/* ==========================================================================
   St Amour — main stylesheet

   Design tokens below are the CONFIRMED values pulled from the Figma file
   (see CLAUDE.md §3). Colors and font family are real; the type scale and
   spacing scale are sensible defaults and have NOT yet been verified against
   Figma measurements — tighten them when each section is built.

   FONT STATUS: Campton (René Bieder) is self-hosted on staging from
   unlicensed files. The webfont licence must be bought and the files
   replaced before launch. See the CAMPTON block below.
   ========================================================================== */

:root {
	/* ---- Brand: teal ramp (confirmed from Figma) ---- */
	--color-teal: #3e9385;        /* primary */
	--color-teal-dark: #193b35;   /* deep, footer / hero overlay */
	--color-teal-mid: #32766a;    /* hover / pressed */
	--color-teal-light: #d8e9e7;  /* tints, section backgrounds */

	/* ---- Brand: purple (Executive Search only, Figma --purple/500) ---- */
	--color-purple: #7d4083;
	--color-purple-light: #eee6f6;  /* top bar + header CTA (client, 2026-09-30; was #a05cad on 09-29) */

	/* ---- Text (confirmed from Figma) ---- */
	--color-title: #090909;       /* headings */
	--color-body: #3f4149;        /* paragraph copy */
	--color-subtitle: #6f7076;    /* eyebrows, captions, meta */

	/* ---- Surfaces ---- */
	--color-bg: #ffffff;
	--color-bg-alt: var(--color-teal-light);
	--color-border: #e3e6e5;
	--color-on-dark: #ffffff;

	/* ---- Semantic aliases (prefer these in component CSS) ---- */
	--color-primary: var(--color-teal);
	--color-primary-hover: var(--color-teal-mid);
	--color-text: var(--color-body);
	--color-heading: var(--color-title);
	--color-muted: var(--color-subtitle);

	/* ---- Type family ----
	   Campton is self-hosted (see the CAMPTON block below); the rest is the
	   fallback stack while the font loads. */
	--font-heading: "Campton", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: var(--font-heading);

	/* ---- Type weights (Campton names -> numeric) ---- */
	--fw-book: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ---- Type scale (provisional, not yet Figma-verified) ---- */
	--font-size-base: 16px;
	--fs-xs: 0.8125rem;   /* 13px */
	--fs-sm: 0.9375rem;   /* 15px */
	--fs-md: 1rem;        /* 16px */
	--fs-lg: 1.125rem;    /* 18px */
	--fs-xl: 1.5rem;      /* 24px */
	--fs-2xl: 2rem;       /* 32px */
	--fs-3xl: 2.75rem;    /* 44px */
	--fs-4xl: clamp(2.5rem, 5vw, 4rem); /* hero headline */

	--lh-tight: 1.15;
	--lh-heading: 1.25;
	--lh-body: 1.6;

	/* ---- Spacing scale ---- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;
	--space-2xl: 8rem;

	/* ---- Layout ---- */
	--container-max: 1280px; /* Figma content width: 1600 frame, 160 side padding */
	--container-gutter: 1.5rem;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 400ms;

	/* ---- Responsive size scale ----
	   Desktop values are the Figma spec. Tablet and phone steps are defined
	   once below, so every button, nav item and icon that reads these tokens
	   scales automatically. New components should use them too. */
	--btn-fs: 18px;          /* Figma hero CTA 316:2309 */
	--btn-py: 14px;          /* 52px buttons site-wide (Raffi, 2026-10-14) */
	/* Campton reserves descender space above the baseline, so text centred
	   by the box sits about 2px high in a control. These push it back down
	   (client feedback via Avi, 2026-09-25). */
	/* Reading copy is set 1.6 rather than Figma's 1.48: the client found
	   the mockup's spacing airier than the browser renders it, and chose
	   the looser setting (Avi, 2026-09-25). UI text keeps 1.48. */
	--optical-nudge: 2px;
	--optical-nudge-lg: 2px;
	--btn-px: 24px;
	--btn-gap: 10px;
	--btn-radius: 6px;
	--btn-min-h: 0px;        /* desktop height comes from padding, as in Figma */
	--btn-h: 52px;           /* what .button measures; for fixed-height buttons */
	--icon-size: 24px;
	--nav-fs: 20px;          /* Figma nav items, Campton Book 20 */
	--nav-cta-fs: 20px;      /* Figma "Nous joindre", 46px tall */
	--nav-cta-h: 46px;
	--nav-cta-px: 20px;
	--topbar-fs: 16px;
	--topbar-h: 48px;
	--header-row-py: 20px;
	--logo-scale: 1;
	--hero-sub-fs: 18px;
}

/* Tablet */
@media (max-width: 1099px) {
	:root {
		--btn-fs: 17px;
		--btn-py: 13px;
		--btn-px: 22px;
		--btn-min-h: 44px;
		--btn-h: 50px;
		--nav-fs: 18px;
		--nav-cta-fs: 18px;
		--nav-cta-h: 44px;
		--nav-cta-px: 18px;
		--header-row-py: 16px;
		--logo-scale: 0.85;
	}
}

/* Phone */
@media (max-width: 767px) {
	:root {
		--btn-fs: 16px;
		--btn-py: 12px;
		--btn-px: 18px;
		--btn-gap: 8px;
		--btn-min-h: 44px;     /* WCAG touch target floor */
		--btn-h: 44px;
		--icon-size: 20px;
		--nav-fs: 17px;
		--nav-cta-fs: 16px;
		--nav-cta-h: 44px;
		--nav-cta-px: 16px;
		--topbar-fs: 14px;
		--topbar-h: 40px;
		--header-row-py: 12px;
		--logo-scale: 0.75;
		--hero-sub-fs: 16px;
	}
}

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

html {
	font-size: var(--font-size-base);
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.5;
}

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

a {
	color: inherit;
}

.container {
	/* Content box is exactly --container-max; the gutter sits outside it. */
	max-width: calc(var(--container-max) + (2 * var(--container-gutter)));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	width: auto;
	height: auto;
	padding: var(--space-sm);
	background: var(--color-bg);
	clip: auto;
}

/* Form controls don't inherit the page font by default; use Campton
   everywhere (buttons, inputs, the testimonial "Voir plus", team cards). */
button,
input,
select,
textarea {
	font-family: inherit;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Buttons and links share this class: strip the native chrome so a
	   <button> looks and presses like the <a> version. */
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	font-family: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	gap: var(--btn-gap);
	min-height: var(--btn-min-h);
	padding: var(--btn-py) var(--btn-px);
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	border-radius: var(--btn-radius);
	font-size: var(--btn-fs);
	font-weight: var(--fw-medium);
	line-height: 1.2;
}

/* ==========================================================================
   Header / Footer
   ========================================================================== */

/* ==========================================================================
   Blocks (flexible content sections)
   ========================================================================== */

.block {
	padding-block: var(--space-lg);
}

.block-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60vh;
	overflow: hidden;
}

.block-hero__background {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.block-hero__background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.block-hero__content {
	color: #fff;
}

/* ==========================================================================
   Contact Form 7 theming
   ========================================================================== */

.st-amour-form__field {
	margin-bottom: var(--space-sm);
}

.st-amour-form input[type="text"],
.st-amour-form input[type="email"],
.st-amour-form input[type="tel"],
.st-amour-form textarea {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
}

.st-amour-form input[type="submit"] {
	display: inline-block;
	padding: 0.75em 1.5em;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-weight: var(--fw-medium);
	cursor: pointer;
}

/* ==========================================================================
   Archive grid
   ========================================================================== */

.archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-md);
}

.blog-filter {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.blog-filter__item {
	text-decoration: none;
	padding: 0.4em 1em;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 0.9rem;
}

.blog-filter__item.is-active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* ==========================================================================
   Team accordion (About page)
   ========================================================================== */

.team-accordion__item {
	border-bottom: 1px solid var(--color-border);
}

.team-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
}

.team-accordion__photo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.team-accordion__panel {
	padding-bottom: var(--space-sm);
}

/* ==========================================================================
   Job listings
   ========================================================================== */

.job-listing-grid {
	display: grid;
	gap: var(--space-sm);
}

.job-card {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: var(--space-sm) var(--space-md);
}

.job-card__link {
	text-decoration: none;
	display: block;
}

.job-card__meta {
	display: flex;
	gap: var(--space-sm);
	color: var(--color-muted);
	font-size: 0.9rem;
}

/* ==========================================================================
   Homepage blocks
   ========================================================================== */

.industry-tile-band {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--space-sm);
}

.industry-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	text-decoration: none;
	text-align: center;
	padding: var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.industry-tile__icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.testimonial-carousel {
	display: grid;
	gap: var(--space-md);
}

.testimonial-carousel__item {
	margin: 0;
	padding: var(--space-md);
	border-left: 3px solid var(--color-primary);
}

.testimonial-carousel__footer {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.testimonial-carousel__logo {
	max-height: 24px;
	width: auto;
}

.block-closing-cta {
	text-align: center;
	padding-block: var(--space-xl);
}

/* ==========================================================================
   Service pages (hub + children)
   ========================================================================== */

.service-children-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-md);
}

.service-child-card {
	display: block;
	text-decoration: none;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.block-service-cta {
	text-align: center;
	padding-block: var(--space-lg);
}

/* ==========================================================================
   Typography base
   Campton weight names map to numerics via the --fw-* tokens.
   ========================================================================== */

body {
	font-family: var(--font-body);
	font-weight: var(--fw-book);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	color: var(--color-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-heading);
	line-height: var(--lh-heading);
	margin-block: 0 var(--space-sm);
	/* No text-wrap: balance — Figma breaks lines greedily and we match it. */
}

h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-lg);  font-weight: var(--fw-medium); }
h6 { font-size: var(--fs-md);  font-weight: var(--fw-medium); }

p { margin-block: 0 var(--space-sm); }
p:last-child { margin-block-end: 0; }

.eyebrow {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

a { color: inherit; }

/* No hover colour changes anywhere: links and buttons keep their own
   colours on hover (Avi, 2026-09-22). */

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.button {
	font-family: var(--font-heading);
	font-weight: var(--fw-medium);
	transition: background-color var(--dur-base) var(--ease);
}


@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   CAMPTON (STAGING ONLY — MUST BE REPLACED BEFORE LAUNCH)
   --------------------------------------------------------------------------
   These woff2 files were converted from the unlicensed desktop copies in the
   project's campton/ folder so layouts are measured in the real font
   (Avi's decision, 2026-09-22). assets/fonts/ is git-ignored for that reason.
   Before launch: buy the Campton WEBFONT licence (Book 400, Medium 500,
   SemiBold 600, Bold 700) and overwrite these four files with the purchased
   woff2s, same names. No other change is needed.
   ========================================================================== */

/* Playfair Display (SIL Open Font License) — the serif the designer used
   for the blog card art. Loaded only for that, latin + latin-ext so the
   French accents render. */
@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display-700-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display-700-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Campton";
	src: url("../fonts/campton-book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Campton";
	src: url("../fonts/campton-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Campton";
	src: url("../fonts/campton-semibold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Campton";
	src: url("../fonts/campton-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Responsive foundation

   Mobile-first. Breakpoints (CSS custom properties can't be used in media
   queries, so these values are fixed — keep them in sync if they change):
     480px  — large phone
     768px  — tablet / nav breakpoint
     1024px — small desktop
   ========================================================================== */

/* ---- Global overflow + fluid media guards ---- */

html {
	-webkit-text-size-adjust: 100%;
	/* In-page links (Postuler, the FAQ and team anchors) glide instead of
	   jumping. The reduced-motion block above turns this back to auto. */
	scroll-behavior: smooth;
}

/* Anchor targets clear the sticky header. */
[id] {
	scroll-margin-top: 120px;
}

body {
	overflow-x: hidden;
}

img,
video,
svg,
iframe,
embed,
object {
	max-width: 100%;
}

iframe,
video {
	height: auto;
}

/* Long words / URLs must not force horizontal scroll on narrow screens. */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, figcaption {
	overflow-wrap: break-word;
}

/* Tables are the most common source of mobile overflow. */
table {
	width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

/* ---- Container ---- */

.container {
	width: 100%;
}

@media (min-width: 768px) {
	:root {
		--container-gutter: 2rem;
	}
}

/* ---- Touch targets ----
   WCAG 2.5.8 / 2.5.5: interactive controls need an adequate hit area. */

@media (pointer: coarse) {
	button,
	input[type="submit"],
	.button,
	.primary-menu a,
	.footer-nav a,
	.lang-switch summary,
	.lang-switch a {
		min-height: 44px;
	}

	.primary-menu a,
	.footer-nav a {
		display: flex;
		align-items: center;
	}

	input[type="submit"],
	button.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---- Forms: full width on mobile, never overflow ---- */

input,
select,
textarea {
	max-width: 100%;
	font: inherit;
}

.st-amour-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.st-amour-form select,
.st-amour-form textarea {
	width: 100%;
	padding: var(--space-2xs) var(--space-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

/* ---- Type scale tightening on small screens ---- */

@media (max-width: 480px) {
	:root {
		--fs-3xl: 2rem;
		--fs-2xl: 1.625rem;
		--fs-xl: 1.25rem;
	}
}

/* ==========================================================================
   Homepage sections
   Mobile-first; breakpoints at 768px and 1024px as elsewhere.
   ========================================================================== */

/* Figma sections sit flush; each one carries its own padding. */

/* ---- 1. Hero ---- */

.block-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Mobile: 560px, about 25% shorter than the old 90vh (731px on a
	   375x812 phone) so the photo is less cropped. Tablet and desktop below. */
	min-height: 560px;
	margin-block-start: 0;
	overflow: hidden;
	background: var(--color-teal-dark);
	color: var(--color-on-dark);
}

.block-hero__media,
.block-hero__slide {
	position: absolute;
	inset: 0;
}

.block-hero__slide {
	opacity: 1;
}

/*
 * Ambient hero cross-fade (Avi, 2026-09-25). Several photographs behind a
 * heading that never moves, standing in for the video that comes later.
 * Only opacity and transform animate, and each slide is a plain <img>, so
 * Chrome has nothing to repaint badly.
 */
[data-hero-slides] .block-hero__slide {
	opacity: 0;
	transition: opacity 1000ms ease-in-out;
	will-change: opacity;
}

[data-hero-slides] .block-hero__slide.is-active {
	opacity: 1;
}

/*
 * No continuous zoom (Avi, 2026-09-25): a drift that never stops draws the
 * eye away from the heading and, whichever way it is timed, some slides
 * get more of it than others. The movement belongs to the change instead.
 *
 * The incoming photograph glides a little into place as it fades in, then
 * everything is still until the next one. The images carry a constant 4%
 * overscale purely to give that glide somewhere to travel without showing
 * an edge, and the resting transform is the end of the glide, so a slide
 * that hands over stays exactly where it was left.
 */
[data-hero-slides] .block-hero__image {
	transform: scale(1.04);
	transform-origin: center top;
}

[data-hero-slides] .block-hero__slide.is-active .block-hero__image {
	animation: hero-glide 1600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hero-glide {
	from { transform: scale(1.04) translate3d(2%, 0, 0); }
	to   { transform: scale(1.04) translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	[data-hero-slides] .block-hero__slide {
		transition: none;
	}

	[data-hero-slides] .block-hero__slide.is-active .block-hero__image {
		animation: none;
	}
}

.block-hero__image,
.block-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Horizontal crop point, set per hero in ACF ("Image position on
	   phones"). Only matters where the band is narrower than the photo.
	   Vertically these sit at the top: the band is shorter than a 16:9
	   photo, and a centred crop takes the top off people's heads. */
	object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 0%);
}

/* Fade the video in once it is playing (main.js adds .is-playing). Without
   scripting it simply shows. */
@media (scripting: enabled) {
	.block-hero__video {
		opacity: 0;
		transition: opacity 700ms ease-out;
	}

	.block-hero__video.is-playing {
		opacity: 1;
	}
}

.block-hero__scrim {
	position: absolute;
	inset: 0;
	/* Exact gradient from Figma (316:2304). Black, not teal. */
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0.2) 50.962%,
		rgba(0, 0, 0, 0.9) 100%
	);
}

.block-hero__content {
	position: relative;
	z-index: 1;
	/* Mobile: proportional to Figma's 88px desktop bottom padding. */
	/* Clears the fixed header on phones (~109px) with breathing room. */
	padding-block: 140px 40px;
}

.block-hero__heading {
	color: var(--color-on-dark);
	/* Figma: Campton Bold 56px / 1.16, two lines with an explicit break.
	   No width cap: the break comes from the content, as in the design. */
	max-width: none;
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem);
	line-height: 1.16;
	font-weight: var(--fw-bold);
	margin-block-end: 0;
}

.block-hero__subheading {
	/* Figma: Campton Medium 18px / 1.44, 36px below the heading,
	   explicit break after « au service ». */
	max-width: none;
	margin-block-start: 36px;
	font-size: var(--hero-sub-fs);
	font-weight: var(--fw-medium);
	line-height: 1.44;
	color: var(--color-on-dark);
}

.block-hero__cta {
	/* Figma 316:2309: label + 24px arrow, gap 10, px 24 / py 12. */
	display: inline-flex;
	align-items: center;
	gap: var(--btn-gap);
	margin-block-start: var(--space-md);
	padding: var(--btn-py) var(--btn-px);
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	border-radius: var(--btn-radius);
	font-size: var(--btn-fs);
	font-weight: var(--fw-medium);
	letter-spacing: -0.18px;
}


/* ---- 2. Logo marquee — Figma 890:11636 ----
   White band, py 64, 1px bottom border. Cards 148 x 80, gap 14, #f8f8f8,
   1px #e7e7e8, radius 6. Each logo is flattened to one grey with a CSS
   filter, so any colour logo turns grey automatically (needs a transparent
   PNG/WebP). Logo box 116 x 44, contained. */

.block-trust-bar {
	padding-block: 64px;
	background: var(--color-bg);
	border-block-end: 1px solid #e7e7e8;
}

/* Title from the content doc (Figma shows none): styled like the section
   eyebrows, in grey so it stays quieter than the logos. */
.block-trust-bar__heading {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--color-subtitle);
	text-align: center;
}

.block-trust-bar__viewport {
	position: relative;
	overflow: hidden;
}

/* Logos enter and leave softly at the edges. White overlays rather than a
   mask, so the moving track doesn't force a mask repaint every frame. */
.block-trust-bar__viewport::before,
.block-trust-bar__viewport::after {
	content: "";
	position: absolute;
	inset-block: 0;
	z-index: 1;
	width: 48px;
	pointer-events: none;
}

.block-trust-bar__viewport::before {
	left: 0;
	background: linear-gradient(to right, var(--color-bg), rgba(255, 255, 255, 0));
}

.block-trust-bar__viewport::after {
	right: 0;
	background: linear-gradient(to left, var(--color-bg), rgba(255, 255, 255, 0));
}

.block-trust-bar__track {
	display: flex;
	width: max-content;
	animation: st-marquee calc(var(--marquee-count, 8) * 4s) linear infinite;
}

.block-trust-bar__set {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0 14px 0 0;
	list-style: none;
}

.block-trust-bar__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 148px;
	height: 80px;
	padding-inline: 16px;
	background: #f8f8f8;
	border: 1px solid #e7e7e8;
	border-radius: 6px;
}

.block-trust-bar__mark {
	display: block;
	width: 116px;
	height: 44px;
	object-fit: contain;
	/* Flatten any logo to one grey (~#999, Figma #989898). */
	filter: brightness(0) invert(0.6);
}

@media (max-width: 767px) {
	.block-trust-bar {
		padding-block: 40px;
	}

	.block-trust-bar__set {
		gap: 10px;
		padding-inline-end: 10px;
	}

	.block-trust-bar__logo {
		width: 120px;
		height: 64px;
		padding-inline: 12px;
	}

	.block-trust-bar__mark {
		width: 96px;
		height: 36px;
	}
}

/* Reduced motion: no scrolling; the row simply wraps and centres. */
@media (prefers-reduced-motion: reduce) {
	.block-trust-bar__viewport::before,
	.block-trust-bar__viewport::after {
		display: none;
	}

	.block-trust-bar__track {
		width: auto;
		animation: none;
	}

	.block-trust-bar__set {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
	}

	.block-trust-bar__set[aria-hidden="true"] {
		display: none;
	}
}

@keyframes st-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- 3. About + stats — Figma 890:11666 ----
   py 136, gap 72. Intro: copy 663 + photo 595 (gap 22). Eyebrow Medium 16
   / 1.12, +0.32px, uppercase teal; gap 16; heading Bold 44 / 1.12 teal +
   #3f4149, 608w; gap 48; body Book 16 / 1.48 #090909, 608w; gap 36;
   link SemiBold 18 / 1.2, -0.18px, py 14, 24px arrow, gap 10. */

.block-about {
	padding-block: 64px;
	background: var(--color-bg);
}

.block-about__intro {
	display: grid;
	gap: 40px;
	margin-block-end: 40px;
}

.block-about__eyebrow {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.12;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.block-about__heading {
	max-width: 608px;
	margin: 0;
	font-size: clamp(30px, 22px + 1.4vw, 44px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-body);
}

.block-about__heading-accent {
	color: var(--color-primary);
}

.block-about__text {
	max-width: 608px;
	margin-block-start: 32px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-title);
}

.block-about__text p {
	margin: 0;
}

.block-about__text p + p {
	margin-block-start: 1.48em;
}

.block-about__link {
	margin-block-start: 22px;
}

/* Text link with trailing arrow (Figma "Parler à un recruteur"). */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-block: 14px;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-body);
	text-decoration: none;
}

.link-arrow:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Notched photo: the shape is a mask exported from Figma's "Union". */
.block-about__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 595 / 455;
	object-fit: cover;
	-webkit-mask: url("../images/about/photo-mask.png") center / 100% 100% no-repeat;
	mask: url("../images/about/photo-mask.png") center / 100% 100% no-repeat;
}

@media (min-width: 768px) {
	.block-about {
		padding-block: 96px;
	}

	.block-about__intro {
		margin-block-end: 56px;
	}
}

@media (min-width: 1100px) {
	.block-about {
		padding-block: 136px;
	}

	.block-about__intro {
		grid-template-columns: minmax(0, 663fr) minmax(0, 595fr);
		gap: 22px;
		align-items: start;
		margin-block-end: 72px;
	}

	.block-about__text {
		margin-block-start: 48px;
	}

	.block-about__link {
		margin-block-start: 36px;
	}
}

/* ---- Stats bento (shared) — Figma 890:11680 ----
   Photo 534 | tall card 302 | two 184px cards 412; 381 tall; column gap
   16, row gap 13; radius 16. Values Bold 40 / 1.12, labels Book 16 / 1.48,
   gap 7, inset 35. */

.stats-bento {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stats-bento__photo {
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 534 / 381;
}

.stats-bento__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	min-height: 160px;
	padding: 32px 28px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 16px;
	background-origin: border-box;
}

.stat-card__value {
	font-family: var(--font-heading);
	font-size: clamp(32px, 26px + 0.9vw, 40px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-primary);
}

.stat-card__label {
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-title);
}

.stat-card--mint {
	border-color: var(--color-teal-light);
	/* Three layers: target icon pinned bottom-right (Figma: 35 from the
	   right, 30 from the bottom, 125px), soft shapes on a canvas wide enough
	   never to end mid-card, and the mint gradient. */
	background:
		url("../images/about/decor-target.svg") right 35px bottom 30px / 125px 125px no-repeat,
		url("../images/about/decor-mint-shapes.svg") -35px 0 / 560px 381px no-repeat,
		linear-gradient(180deg, #d8e9e7 0%, rgba(216, 233, 231, 0.05) 100%);
	background-origin: border-box;
}

/* Phones: the mint card is short and wide, so give the icon room below
   the text instead of letting it collide or drop out of view. */
@media (max-width: 767px) {
	.stat-card--mint {
		justify-content: flex-start;
		min-height: 220px;
		background-position: right 20px bottom 20px, -35px 0, 0 0;
		background-size: 90px 90px, 560px 381px, auto;
	}
}

.stat-card--teal {
	background: var(--color-teal-mid);
}

.stat-card--teal .stat-card__value,
.stat-card--teal .stat-card__label {
	color: var(--color-on-dark);
}

.stat-card--white {
	border-color: #e7e7e8;
	background: var(--color-bg) url("../images/about/decor-white.svg") 0 0 / 412px 184px no-repeat;
}

@media (min-width: 768px) {
	.stats-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(184px, auto);
		row-gap: 13px;
	}

	.stats-bento__photo {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}

	.stat-card--tall {
		grid-row: span 2;
		justify-content: flex-start;
		padding: 35px;
	}

	.stat-card--short {
		padding: 0 35px 4px;
	}
}

@media (min-width: 1100px) {
	.stats-bento {
		grid-template-columns: minmax(0, 534fr) minmax(0, 302fr) minmax(0, 412fr);
		grid-template-rows: 184px 184px;
		grid-auto-rows: auto;
	}

	.stats-bento__photo {
		grid-column: auto;
		grid-row: span 2;
		aspect-ratio: auto;
	}

	.stat-card--tall .stat-card__label {
		max-width: 207px;
	}
}

/* Purple styles (Executive Search, Figma 3056:1416). */
.stat-card--lilac {
	border-color: #e5d9e6;
	background:
		url("../images/about/decor-target-purple.svg") right 35px bottom 30px / 125px 125px no-repeat,
		url("../images/about/decor-lilac-shapes.svg") -35px 0 / 560px 381px no-repeat,
		linear-gradient(180deg, #fbf3fc 0%, rgba(251, 243, 252, 0.05) 100%);
	background-origin: border-box;
}

@media (max-width: 767px) {
	.stat-card--lilac {
		justify-content: flex-start;
		min-height: 220px;
		background-position: right 20px bottom 20px, -35px 0, 0 0;
		background-size: 90px 90px, 560px 381px, auto;
	}
}

.stat-card--lilac .stat-card__value,
.stats-bento--photo-last .stat-card--white .stat-card__value {
	color: var(--color-purple);
}

.stats-bento--photo-last .stat-card--white {
	background-image: url("../images/about/decor-white-grey.svg");
}

.stat-card--purple {
	background: var(--color-purple);
}

.stat-card--purple .stat-card__value,
.stat-card--purple .stat-card__label {
	color: var(--color-on-dark);
}

/* Photo last: 302 | 412 | 534, cards 178 tall with a 25px gap. */
@media (min-width: 768px) {
	.stats-bento--photo-last .stat-card--short {
		grid-column: 2;
	}
}

@media (min-width: 1100px) {
	.stats-bento--photo-last {
		grid-template-columns: minmax(0, 302fr) minmax(0, 412fr) minmax(0, 534fr);
		grid-template-rows: 178px 178px;
		row-gap: 25px;
	}

	.stats-bento--photo-last .stat-card--tall {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.stats-bento--photo-last .stats-bento__photo {
		grid-column: 3;
		grid-row: 1 / span 2;
	}
}

/* ==========================================================================
   Executive Search 2: "Le bon match" — Figma 3056:1416 (1212 at 1600)
   ========================================================================== */

.block-match {
	padding-block: 48px 64px;
	background: var(--color-bg);
}

.block-match__intro {
	display: grid;
	gap: 32px;
	margin-block-end: 48px;
}

.block-match__photo {
	overflow: hidden;
	border-radius: 24px;
	aspect-ratio: 548 / 580;
	max-width: 548px;
}

.block-match__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.block-match__heading {
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-purple);
}

.block-match__heading-dark {
	display: block;
	color: var(--color-title);
}

.block-match__body {
	max-width: 648px;
	margin: 24px 0 0;
	font-size: 16px;
	/* 1.6 rather than the 1.48 used elsewhere: the mockup gives this
	   paragraph more air, and it sits beside stat cards set at 1.6
	   (client feedback via Avi, 2026-09-25). */
	line-height: 1.6;
	color: var(--color-subtitle);
}

.block-match__list {
	display: grid;
	gap: 8px;
	margin: 15px 0 0 -10px;
	padding: 0;
	list-style: none;
}

.block-match__list li {
	display: flex;
	gap: 10px;
	/* Figma item box 702w (text up to ~650w). */
	max-width: 702px;
	padding: 10px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-subtitle);
}

.block-match__list li::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-block-start: 2px;
	background: url("../images/check-grey.svg") center / 20px 20px no-repeat;
}

.block-match__button {
	margin-block-start: 24px;
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.block-match {
		padding-block: 64px 96px;
	}
}

@media (min-width: 1100px) {
	.block-match {
		padding-block: 34px 125px;
	}

	.block-match__intro {
		grid-template-columns: 548px minmax(0, 1fr);
		column-gap: 37px;
		align-items: start;
		margin-block-end: 92px;
	}

	.block-match__body {
		margin-block-start: 24.5px;
	}

	.block-match__button {
		margin-block-start: 32px;
	}
}

/* ---- 4. Sectors (shared component) — Figma 890:11702 ----
   #f8f8f8 band, py 136, gap 48. Header 585w centred: eyebrow Medium 16 /
   1.12 uppercase teal; gap 16; heading Bold 48 / 1.12 teal + #090909;
   gap 24; intro Book 18 / 1.48 #3f4149. Grid 3 cols, gap 16. Card: white,
   1px #e7e7e8, radius 16, p 24, gap 20; icon tile 48 (radius 4,
   rgba(216,233,231,.7)) with a 30px icon (teal/white SVG files, swapped on hover); title SemiBold 23 / 1.12 teal;
   gap 8; description Book 16 / 1.48 #090909. Hover (Avi, not in Figma):
   card turns teal, text and icon white. */

.block-sectors {
	padding-block: 64px;
	background: #f8f8f8;
}

.sectors__header {
	max-width: 585px;
	margin: 0 auto 40px;
	text-align: center;
}

.sectors__eyebrow {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--color-primary);
}

.sectors__heading {
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.sectors__heading-accent {
	color: var(--color-primary);
}

.sectors__intro {
	margin: 24px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-body);
}

.sectors__grid {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sectors__grid > li {
	display: flex;
}

.sector-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
	background: var(--color-bg);
	border: 1px solid #e7e7e8;
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	/* Arrow cursor over the text; pointer when the card is a link. */
	cursor: default;
	transition: background-color 200ms ease, border-color 200ms ease;
}

a.sector-card {
	cursor: pointer;
}

.sector-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-block-end: 20px;
	border-radius: 4px;
	background: rgba(216, 233, 231, 0.7);
	transition: background-color 200ms ease;
}

.sector-card__icon {
	color: var(--color-primary);
	transition: background-color 200ms ease;
}

.sector-card__img {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.sector-card__img--hover,
.sector-card:focus-visible .sector-card__img {
	display: none;
}

.sector-card:focus-visible .sector-card__img--hover {
	display: block;
}

/* Custom uploaded icons (PNG) are recoloured with a mask; static, so no
   repaint cost. */
.sector-card__icon .sector-card__custom {
	width: 30px;
	height: 30px;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.sector-card__title {
	font-family: var(--font-heading);
	font-size: 23px;
	font-weight: var(--fw-semibold);
	line-height: 1.12;
	color: var(--color-primary);
	transition: color 200ms ease;
}

.sector-card__desc {
	margin-block-start: 8px;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-title);
	transition: color 200ms ease;
}

.sector-card:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	text-decoration: none;
}

.sector-card:focus-visible .sector-card__icon {
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-on-dark);
}

.sector-card:focus-visible .sector-card__title,
.sector-card:focus-visible .sector-card__desc {
	color: var(--color-on-dark);
}

/* Mouse only: a tap on a phone leaves the card stuck in the hovered
   state, so the colour change is desktop-only (Avi, 2026-09-24). */
@media (hover: hover) and (pointer: fine) {
	.sector-card:hover .sector-card__img {
		display: none;
	}

	.sector-card:hover .sector-card__img--hover {
		display: block;
	}

	.sector-card:hover {
		background: var(--color-primary);
		border-color: var(--color-primary);
		text-decoration: none;
	}

	.sector-card:hover .sector-card__icon {
		background: rgba(255, 255, 255, 0.15);
		color: var(--color-on-dark);
	}

	.sector-card:hover .sector-card__title,
	.sector-card:hover .sector-card__desc {
		color: var(--color-on-dark);
	}
}

.sectors__cta {
	margin: 40px 0 0;
	text-align: center;
}

/* Figma 890:11718: Medium 18 / 1.2, -0.18px, px 24 / py 14. */
.sectors__button {
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
}

/* Phones: compact cards (icon beside the text) so nine cards don't make
   a 2,500px column; the intro's forced break would orphan a word. */
@media (max-width: 767px) {
	.sectors__intro br {
		display: none;
	}

	.sector-card {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
		padding: 20px;
	}

	/* Centred on the card's horizontal axis, not pinned to the first line
	   (client feedback via Avi, 2026-09-23). */
	.sector-card__icon {
		grid-row: span 2;
		align-self: center;
		margin: 0;
	}

	.sector-card__title {
		align-self: center;
		font-size: 20px;
	}

	.sector-card__desc {
		grid-column: 2;
		margin-block-start: 6px;
		font-size: 15px;
	}
}

@media (min-width: 768px) {
	.block-sectors {
		padding-block: 96px;
	}

	.sectors__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.block-sectors {
		padding-block: 136px;
	}

	.sectors__header {
		margin-block-end: 48px;
	}

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

	/* Figma fixes the cards at 200px. */
	.sector-card {
		min-height: 200px;
	}

	.sectors__cta {
		margin-block-start: 48px;
	}
}

/* Executive Search (purple brand) — Figma 3056:1460: #f7f4f8 band, purple
   eyebrow/accent, lilac icon tile, titles #090909; hover turns purple. */
.brand-purple .block-sectors {
	background: #f7f4f8;
}

.brand-purple .sectors__eyebrow,
.brand-purple .sectors__heading-accent {
	color: var(--color-purple);
}

.brand-purple .sectors__heading {
	color: var(--color-body);
}

.brand-purple .sector-card__icon {
	background: rgba(229, 217, 230, 0.7);
	color: var(--color-purple);
}

.brand-purple .sector-card__title {
	color: var(--color-title);
}

.brand-purple .sector-card:focus-visible {
	background: var(--color-purple);
	border-color: var(--color-purple);
}

.brand-purple .sector-card:focus-visible .sector-card__icon {
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-on-dark);
}

.brand-purple .sector-card:focus-visible .sector-card__title {
	color: var(--color-on-dark);
}

@media (hover: hover) and (pointer: fine) {
	.brand-purple .sector-card:hover {
		background: var(--color-purple);
		border-color: var(--color-purple);
	}

	.brand-purple .sector-card:hover .sector-card__icon {
		background: rgba(255, 255, 255, 0.15);
		color: var(--color-on-dark);
	}

	.brand-purple .sector-card:hover .sector-card__title {
		color: var(--color-on-dark);
	}
}

/* Services page variant — Figma 299:7395: header 982w, heading Bold 36 /
   1.12 on two lines (teal, then #3f4149), intro 740w. */
.sectors--services .sectors__header {
	max-width: 982px;
}

.sectors--services .sectors__heading {
	font-size: clamp(26px, 20px + 1vw, 36px);
	color: var(--color-body);
}

.sectors--services .sectors__heading-accent {
	display: block;
}

.sectors--services .sectors__intro {
	max-width: 740px;
	margin-inline: auto;
}

/* ---- 5. Services pair — Figma 890:11721 ----
   White band, py 124, gap 48. Header centred: eyebrow Medium 16 / 1.12
   uppercase teal; gap 16; heading Bold 48 / 1.12 (line 1 #090909, line 2
   teal); gap 24; intro Book 16 / 1.48 #3f4149, 644w. Rows: card + image,
   628 x 640 each, gap 24, row gap 24, radius 24. */

.block-services {
	padding-block: 64px;
	background: var(--color-bg);
}

/* Services page: Figma closes the section with a 1px rule (299:7318). */
.site-main--services .block-services {
	border-block-end: 1px solid #e7e7e8;
}

.block-services__header {
	max-width: 700px;
	margin: 0 auto 40px;
	text-align: center;
}

.block-services__eyebrow {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--color-primary);
}

.block-services__heading {
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.block-services__heading-accent {
	color: var(--color-primary);
}

.block-services__intro {
	max-width: 644px;
	margin: 24px auto 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-body);
}

.service-pair {
	display: grid;
	gap: 24px;
}

.service-pair__row {
	display: grid;
	gap: 16px;
}

.service-pair__media {
	overflow: hidden;
	border-radius: 24px;
	aspect-ratio: 628 / 640;
}

.service-pair__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) center;
}

.service-card {
	--card-accent: var(--color-primary);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 36px 24px;
	border-radius: 24px;
	background: var(--color-teal-dark);
	color: var(--color-on-dark);
}

.service-card--purple {
	--card-accent: var(--color-purple);
	background: var(--color-purple);
}

.service-card__title {
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-semibold);
	line-height: 1.12;
	color: var(--color-on-dark);
}

.service-card__title-muted {
	display: block;
	color: rgba(255, 255, 255, 0.5);
}

.service-card__list {
	display: grid;
	gap: 16px;
	max-width: 540px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.service-card__list li {
	position: relative;
	padding-inline-start: 32px;
	font-size: 18px;
	line-height: 1.6;
}

.service-card__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 1px;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url("../images/check.svg") center / contain no-repeat;
	mask: url("../images/check.svg") center / contain no-repeat;
}

.service-card__list strong {
	font-weight: var(--fw-semibold);
}

.service-card__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* 52 tall like every other button, and the label optically centred the
	   same way (it was box-centred and read high, Raffi 2026-10-14). */
	box-sizing: border-box;
	height: var(--btn-h);
	margin-block-start: 40px;
	padding-inline: 24px;
	padding-block: calc(var(--optical-nudge) * 2) 0;
	border-radius: 8px;
	background: var(--color-bg);
	color: var(--card-accent);
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.48;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.service-card__button .icon {
	transition: transform var(--dur-fast) var(--ease);
}

/* Minimal hover on the card CTAs (client feedback via Avi, 2026-09-23):
   the button lifts 2px and the arrow steps forward. No colour change. */
@media (hover: hover) and (pointer: fine) {
	.service-card__button:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(9, 9, 9, 0.18);
	}

	.service-card__button:hover .icon {
		transform: translateX(4px);
	}
}

.service-card__button:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 767px) {
	.service-card__list li {
		font-size: 16px;
	}
}

@media (min-width: 768px) {
	.block-services {
		padding-block: 96px;
	}

	.service-card {
		padding: 48px 40px;
	}

	/* Stacked on tablet: a shorter photo instead of a near-square one. */
	.service-pair__media {
		aspect-ratio: 16 / 10;
	}
}

/* Side by side from 900px; the image stretches to the card's height. */
@media (min-width: 900px) {
	.service-pair__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.service-pair__row--reverse .service-card {
		order: 2;
	}

	.service-pair__media {
		aspect-ratio: auto;
		min-height: 100%;
	}

	.service-card__button {
		margin-block-start: auto;
	}

	.service-card__list {
		margin-block-end: 40px;
	}
}

@media (min-width: 1100px) {
	.block-services {
		padding-block: 124px;
	}

	.block-services__header {
		max-width: 900px;
		margin-block-end: 48px;
	}

	/* Figma breaks the heading after "pour". */
	.block-services__heading-accent {
		display: block;
	}

	.service-card {
		min-height: 640px;
		padding: 50px 44px 49px;
	}

	.service-pair__media {
		min-height: 640px;
	}
}

/* ---- 6. Testimonials slider (shared) — Figma 890:11770 ----
   #f8f8f8 band, py 136, gap 72. Header: eyebrow + heading Bold 48 / 1.12,
   840w centred. Cards 411 x 415, gap 23, radius 16, p 16, content at the
   bottom; quote mark 72 x 50 at 29/29 (#d8e9e7); quote Medium 18 / 1.48;
   "Voir plus" Medium 16; author: 85px white logo tile (80px image, 1px
   #e7e7e8, radius 7), gap 16, company Medium 18 / 1.18, person Book 12 /
   1.16 #b6b6b6. Active card teal, white text, raised by the arrows row
   (27 + 36). Arrows 36px, gap 17. */

.block-testimonials {
	padding-block: 64px;
	background: #f8f8f8;
}

/* Services page (Figma 684:2530): white band, so it separates from the grey
   sectors section above; the side cards keep their #f8f8f8. */
.site-main--services .block-testimonials {
	background: var(--color-bg);
}

.testimonials__header {
	max-width: 840px;
	margin: 0 auto 40px;
	text-align: center;
}

.testimonials__eyebrow {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--color-primary);
}

.testimonials__heading {
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.testimonials__heading-accent {
	color: var(--color-primary);
}

.tslider {
	display: grid;
	justify-items: center;
	gap: 24px;
}

/* Without JS: the first card shows. With JS (.is-ready) the list becomes
   one flex strip that slides as a single piece; only the strip moves. */
.tslider__viewport {
	width: 100%;
}

.tslider__track {
	display: grid;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tslider.is-ready .tslider__viewport {
	overflow: hidden;
}

.tslider.is-ready .tslider__track {
	display: flex;
	align-items: flex-start;
	gap: var(--gap, 16px);
	width: max-content;
	transform: translate3d(var(--shift, 0px), 0, 0);
	will-change: transform;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tcard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 16px;
	min-height: 415px;
	padding: 16px;
	border-radius: 16px;
	background: var(--color-bg);
	color: var(--color-title);
	cursor: default;
}

.tslider:not(.is-ready) .tcard:nth-child(n+2) {
	display: none;
}

.tslider.is-ready .tcard {
	flex: 0 0 var(--card-w, 100%);
	width: var(--card-w, 100%);
	transition:
		background-color 450ms ease,
		color 450ms ease,
		margin-block-start 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tslider.no-anim .tslider__track,
.tslider.no-anim .tcard,
.tslider__track.is-dragging {
	transition: none;
}

.tcard[data-slot="active"] {
	background: var(--color-primary);
	color: var(--color-on-dark);
}

.tcard[data-slot="prev"],
.tcard[data-slot="next"] {
	cursor: pointer;
}

/* Services page: on the white band the non-active cards are #f8f8f8. */
/* Executive Search (Figma 3056:1300): lilac band, white side cards,
   purple active card, eyebrow, accent and "Voir plus". */
.brand-purple .block-testimonials {
	background: #f7f4f8;
}

.brand-purple .testimonials__eyebrow,
.brand-purple .testimonials__heading-accent,
.brand-purple .tcard__more {
	color: var(--color-purple);
}

.brand-purple .tcard[data-slot="active"] {
	background: var(--color-purple);
}

.brand-purple .tcard[data-slot="active"] .tcard__more {
	color: var(--color-on-dark);
}

.site-main--services .tcard:not([data-slot="active"]) {
	background: #f8f8f8;
}

.tcard .tcard__more,
.tcard .tcard__person {
	transition: color 450ms ease;
}

.tcard__mark {
	position: absolute;
	top: 29px;
	left: 29px;
	width: 72px;
	height: 50px;
}

.tcard__quote {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.48;
	/* Long quotes are cut to five lines; "Voir plus" opens the rest. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.tcard__quote p {
	margin: 0;
}

.tcard__more {
	align-self: flex-start;
	margin-block-start: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.48;
	color: var(--color-primary);
	cursor: pointer;
}

.tcard__more[hidden] {
	display: none;
}

.tcard[data-slot="active"] .tcard__more {
	color: var(--color-on-dark);
}

.tcard__more:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tcard__author {
	display: flex;
	align-items: center;
	gap: 16px;
}

.tcard__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 85px;
	height: 85px;
	border-radius: 8px;
	background: var(--color-bg);
}

.tcard__logo img {
	width: 80px;
	height: 80px;
	border: 1px solid #e7e7e8;
	border-radius: 7px;
	object-fit: contain;
	background: var(--color-bg);
}

.tcard__who {
	display: grid;
	gap: 4px;
}

.tcard__org {
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.18;
}

.tcard__person {
	font-size: 12px;
	line-height: 1.16;
	color: #b6b6b6;
}

.tcard[data-slot="active"] .tcard__person {
	color: #e7e7e8;
}

.tslider__arrows {
	display: flex;
	gap: 17px;
}

.tslider__arrow {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.tslider__arrow img {
	display: block;
	width: 100%;
	height: 100%;
}

/* "Voir plus" dialog. */
.tmodal {
	width: min(640px, calc(100% - 32px));
	padding: 40px 32px 32px;
	border: 0;
	border-radius: 16px;
	background: var(--color-bg);
	color: var(--color-title);
}

.tmodal::backdrop {
	background: rgba(9, 9, 9, 0.6);
}

.tmodal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	padding: 4px 8px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--color-body);
	cursor: pointer;
}

.tmodal .tcard__quote {
	display: block;
	overflow: visible;
	margin-block-end: 24px;
}

@media (min-width: 768px) {
	.block-testimonials {
		padding-block: 96px;
	}
}

/* Desktop: prev | active | next; the arrows sit under the active card,
   in the 63px the side cards are lowered by. */
@media (min-width: 1100px) {
	.block-testimonials {
		padding-block: 136px;
	}

	.testimonials__header {
		margin-block-end: 72px;
	}

	.tslider.is-ready {
		position: relative;
	}

	.tslider.is-ready .tslider__arrows {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	/* Side cards sit 63px lower; the active card rises into the gap. */
	.tslider.is-ready .tcard:not([data-slot="active"]) {
		margin-block-start: 63px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tslider.is-ready .tslider__track,
	.tslider.is-ready .tcard {
		transition: none;
	}
}

/* ---- 7. Newsletter — Figma 890:11816 ----
   Sits on the testimonials' #f8f8f8 (no top padding, pb 124). Card 1280w,
   radius 16, pt 96 / pb 72 / px 48, photo + gradient rgba(0,0,0,.1) ->
   #193b35. Copy 624w: heading Bold 44 / 1.12 white, gap 12, text Book 16 /
   1.48 white 563w. Form 512w: white field (1px rgba(255,255,255,.75),
   radius 8, p 16, placeholder #6f7076) with the teal button inset 6px
   (h 46, px 16, radius 6, Book 16, 24px arrow, gap 10). */

.block-newsletter {
	padding-block: 0 64px;
	background: #f8f8f8;
}

.block-newsletter__card {
	position: relative;
	display: grid;
	gap: 28px;
	padding: 56px 24px 32px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--color-teal-dark);
	color: var(--color-on-dark);
	isolation: isolate;
}

.block-newsletter__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.block-newsletter__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.block-newsletter__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, var(--color-teal-dark) 100%);
}

.block-newsletter__heading {
	max-width: 624px;
	margin: 0;
	font-size: clamp(30px, 22px + 1.4vw, 44px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-on-dark);
}

.block-newsletter__text {
	max-width: 563px;
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-on-dark);
}

/* ---- Signup form (CF7 "Infolettre") ---- */

.block-newsletter__form .wpcf7-form {
	margin: 0;
}

.newsletter-form {
	position: relative;
	width: 100%;
	max-width: 512px;
}

.newsletter-form .wpcf7-form-control-wrap {
	display: block;
}

/* CF7's auto <p> (turned into .st-amour-form__field) adds a bottom margin
   that would push the field off-centre. */
.newsletter-form .st-amour-form__field {
	margin: 0;
}

.st-amour-form .newsletter-form input.newsletter-form__input:not([type="submit"]) {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: calc(16px + var(--optical-nudge-lg)) 16px calc(16px - var(--optical-nudge-lg));
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 8px;
	background: var(--color-bg);
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-title);
}

.newsletter-form .newsletter-form__input::placeholder {
	color: var(--color-subtitle);
	opacity: 1;
}

.newsletter-form__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 46px;
	margin-top: 8px;
	padding: calc(var(--optical-nudge-lg) * 2) 16px 0;
	border: 0;
	border-radius: 6px;
	background: var(--color-primary);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: var(--fw-book);
	line-height: 1.48;
	color: var(--color-on-dark);
	white-space: nowrap;
	cursor: pointer;
}

.newsletter-form__button:focus-visible {
	outline: 2px solid var(--color-on-dark);
	outline-offset: 2px;
}

.newsletter-form__button:disabled {
	cursor: progress;
}

/* CF7 extras: spinner, validation tip, response message (hidden until
   there is a message, so it doesn't push the form off-centre). */
.block-newsletter__form .wpcf7 form.init .wpcf7-response-output,
.block-newsletter__form .wpcf7-response-output:empty {
	display: none;
}

.newsletter-form .wpcf7-spinner {
	position: absolute;
	right: -32px;
	top: 17px;
	margin: 0;
}

.newsletter-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	color: #ffd6d6;
}

.block-newsletter__form .wpcf7-response-output {
	margin: 12px 0 0;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 6px;
	font-size: 14px;
	color: var(--color-on-dark);
}

@media (min-width: 560px) {
	/* Button sits inside the field, inset 6px (Figma). */
	.st-amour-form .newsletter-form input.newsletter-form__input:not([type="submit"]) {
		padding-inline-end: 260px;
	}

	.newsletter-form__button {
		position: absolute;
		top: 6px;
		right: 6px;
		width: auto;
		margin: 0;
	}
}

@media (min-width: 768px) {
	.block-newsletter {
		padding-block-end: 96px;
	}

	.block-newsletter__card {
		padding: 72px 40px 56px;
	}
}

@media (min-width: 1100px) {
	.block-newsletter {
		padding-block-end: 124px;
	}

	.block-newsletter__card {
		grid-template-columns: minmax(0, 624px) minmax(0, 512px);
		justify-content: space-between;
		align-items: center;
		padding: 96px 48px 72px;
	}
}

/* ==========================================================================
   Header
   Source: Figma purple file CjBPQisM7XVG2ecSQTyghY
     green  — Nav-bar 890:11635     purple — Nav-bar 3056:2439
   Base styles are the OPAQUE state (white bar, dark text), used on pages with
   no hero and once scrolled past a hero (.is-stuck). `.site-header--overlay`
   without .is-stuck is the transparent Figma state over the hero photo.
   Scroll/opaque state is not drawn in Figma; it follows the confirmed
   requirement in CLAUDE.md §4.
   ========================================================================== */

/* ---- Brand tokens ---- */

body {
	--brand-topbar-bg: var(--color-teal-light);
	--brand-topbar-fg: var(--color-primary);
	/* Over the hero the pill picks up the top bar's mint rather than white,
	   so the header reads as one band with the consultation strip (client,
	   2026-09-29). Same pairing as the top bar: mint ground, teal label. */
	--brand-cta-bg: var(--color-teal-light);
	--brand-cta-fg: var(--color-primary);
	--brand-cta-border: var(--color-teal-light);
	--brand-accent: var(--color-primary);
	--brand-panel-bg: var(--color-teal-dark);
	--brand-footer-bg: var(--color-teal-dark);
	--brand-footer-accent: var(--color-primary);
	--brand-footer-rule-a: #073029;
	--brand-footer-rule-b: #32766a;
	--brand-menu-hover-bg: var(--color-teal-light);
	--brand-menu-hover-fg: var(--color-teal-light);
	--logo-w: 202px;
}

/* Executive Search: content buttons are purple too (Figma, this page only). */
body.brand-purple .site-main .button {
	background: var(--color-purple);
	border-color: var(--color-purple);
}

body.brand-purple {
	/* The client wants the consultation strip and the header pill lighter
	   than the page purple, the way the green side's mint sits above its
	   teal (2026-09-29). Everything else stays --color-purple. */
	--brand-topbar-bg: var(--color-purple-light);
	--brand-topbar-fg: var(--color-purple);
	--brand-cta-bg: var(--color-purple-light);
	--brand-cta-fg: var(--color-purple);
	--brand-cta-border: var(--color-purple-light);
	--brand-accent: var(--color-purple);
	--brand-panel-bg: var(--color-purple);
	--brand-menu-hover-bg: #f2e7f3;
	--brand-menu-hover-fg: #e9d8ec;
	--logo-w: 206px;
	--brand-footer-bg: #321a34;
	--brand-footer-accent: var(--color-purple);
	--brand-footer-rule-a: #0d040e;
	--brand-footer-rule-b: #643369;
}

/* ---- Icons: Figma SVGs used as masks so colour follows currentColor ---- */

.icon {
	display: inline-block;
	flex-shrink: 0;
	width: var(--icon-size);
	height: var(--icon-size);
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.icon--angle-right { --icon: url("../images/angle-right-small.svg"); }
.icon--angle-down  { --icon: url("../images/angle-down-small.svg"); }

/* No left-pointing file in the set: the right arrow is mirrored. Without
   this the mask has no image and the icon renders as a solid block. */
.icon--angle-left {
	--icon: url("../images/angle-right-small.svg");
	transform: scaleX(-1);
}
.icon--arrow-right { --icon: url("../images/arrow-right-small.svg"); }
.icon--phone       { --icon: url("../images/footer/phone.svg"); }
.icon--clock       { --icon: url("../images/icons/clock.svg"); }
.icon--envelope    { --icon: url("../images/footer/envelope.svg"); }
.icon--linkedin    { --icon: url("../images/footer/linkedin.svg"); }

/* ---- Shell ---- */

.site-header {
	position: relative;
	z-index: 100;
	background: var(--color-bg);
	color: var(--color-heading);
}

/* ---- Top bar: 48px, py 12 / px 10, Campton Medium 16 / 1.2 ---- */

.announcement-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--topbar-h);
	padding: 8px 10px;
	background: var(--brand-topbar-bg);
}

.announcement-bar__link {
	display: inline-flex;
	align-items: center;
	font-size: var(--topbar-fs);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	color: var(--brand-topbar-fg);
	text-align: center;
	text-decoration: none;
}

.announcement-bar__link:focus-visible {
	color: var(--brand-topbar-fg);
	text-decoration: underline;
}

/* ---- Nav row: py 20, bottom hairline rgba(255,255,255,.15) ---- */

.site-header__bar {
	border-block-end: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 var(--space-sm);
	padding-block: var(--header-row-py);
}

/* ---- Logo: sized to the Figma boxes (202x60 green, 206x60 purple).
   The HD files are dark wordmarks on transparent. Over the hero photo a
   masked white overlay (mask = the same file, clipped to the wordmark so the
   coloured tag keeps its fill) turns the wordmark white, mirroring Figma's own
   construction (3056:2447). On the opaque bar the overlay is transparent. */

.site-logo {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: calc(var(--logo-w) * var(--logo-scale));
	height: calc(60px * var(--logo-scale));
	line-height: 0;
	--logo-word: transparent;
}

.site-logo__img {
	display: block;
	width: 100%;
	height: auto;
}

.site-logo::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	aspect-ratio: var(--logo-ratio, 3.75);
	transform: translateY(-50%);
	background: var(--logo-word);
	-webkit-mask: var(--logo-mask) center / 100% 100% no-repeat;
	mask: var(--logo-mask) center / 100% 100% no-repeat;
	clip-path: inset(0 0 35% 0);
	pointer-events: none;
}

.site-logo--purple {
	--logo-ratio: 3.414;
}

/* ---- Primary menu: gap 12, items p 10, Campton Book 20 / 1.2, -0.2px ---- */

.primary-menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px;
	font-size: var(--nav-fs);
	font-weight: var(--fw-book);
	line-height: 1.2;
	letter-spacing: -0.2px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.primary-menu > .menu-item-has-children > a::after {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("../images/angle-down-small.svg") center / contain no-repeat;
	mask: url("../images/angle-down-small.svg") center / contain no-repeat;
	transition: transform var(--dur-fast) var(--ease);
}

.primary-menu .sub-menu {
	margin: 0;
	padding: 0 0 0 var(--space-sm);
	list-style: none;
}

.primary-menu .sub-menu a {
	font-size: calc(var(--nav-fs) - 2px);
}

/* ---- Actions: gap 8. CTA h46, px 20 / py 10, r 6, Campton Medium 20 ---- */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-header__cta.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--nav-cta-h);
	/* This shorthand used to overwrite the split padding-block .button
	   carries, so the header pill was the one boxed control the optical
	   centring pass missed (Avi, 2026-09-29). Split here too. */
	padding: calc(8px + var(--optical-nudge)) var(--nav-cta-px) calc(8px - var(--optical-nudge));
	border: 1px solid var(--brand-accent);
	border-radius: 6px;
	background: var(--brand-accent);
	color: var(--color-on-dark);
	font-size: var(--nav-cta-fs);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: -0.2px;
	white-space: nowrap;
}


/* ---- Language switcher: p 10, gap 4, Campton Book 20 / 1.4 ---- */

.lang-switch {
	position: relative;
}

.lang-switch__current {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px;
	font-size: var(--nav-fs);
	line-height: 1.4;
	letter-spacing: -0.2px;
	list-style: none;
	cursor: pointer;
	border-radius: 6px;
}

.lang-switch__current::-webkit-details-marker {
	display: none;
}

.lang-switch[open] .icon--angle-down {
	transform: rotate(180deg);
}

.lang-switch__list {
	position: absolute;
	inset-inline-end: 0;
	top: 100%;
	min-width: 100%;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	background: var(--color-bg);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(9, 9, 9, 0.12);
}

/* Invisible bridge over the 4px gap so hover survives the move to the list. */
.lang-switch__list::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: 8px;
}

.lang-switch__list a {
	display: block;
	padding: 8px 10px;
	font-size: 18px;
	color: var(--color-heading);
	text-decoration: none;
	border-radius: 4px;
}

.lang-switch__list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Mobile / tablet: hamburger + panel (no mobile frame in Figma) ---- */

.site-header__nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}

.site-header__nav-toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}

.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-header__panel {
	display: none;
	flex-basis: 100%;
	padding-block: var(--space-sm);
}

.site-header__panel.is-open {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.site-header__panel .site-header__actions {
	justify-content: space-between;
}

/* Phones/tablets (Avi): hamburger left, logo centred, language switcher
   right. The bar becomes a 3-column grid; the tools wrapper dissolves so
   its two children take the outer columns; the menu panel spans the full
   width below. The switcher copy inside the panel is hidden. */
@media (max-width: 1099px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.site-header__tools {
		display: contents;
	}

	.site-header__nav-toggle {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		margin-inline-start: -10px;
	}

	.site-header__inner > .site-logo {
		grid-column: 2;
		grid-row: 1;
	}

	.site-header__tools .lang-switch {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin-inline-end: -10px;
	}

	.site-header__panel {
		grid-column: 1 / -1;
	}

	.site-header__panel .lang-switch {
		display: none;
	}

	/* "Nous joindre" spans the full width of the open menu (Avi). */
	.site-header__panel .site-header__actions {
		width: 100%;
	}

	.site-header__panel .site-header__cta.button {
		flex: 1;
		width: 100%;
	}
}

/* ---- Desktop nav (the full row fits from ~1100px) ---- */

@media (min-width: 1100px) {
	.site-header__inner {
		flex-wrap: nowrap;
	}

	.site-header__nav-toggle,
	.site-header__tools {
		display: none;
	}

	.site-header__panel .lang-switch {
		display: block;
	}

	.site-header__panel,
	.site-header__panel.is-open {
		display: contents;
	}

	.primary-menu {
		flex-direction: row;
		gap: 12px;
	}

	.primary-menu > li {
		position: relative;
	}

	.primary-menu .sub-menu {
		position: absolute;
		top: 100%;
		inset-inline-start: 0;
		z-index: 10;
		min-width: 240px;
		padding: 8px;
		background: var(--color-bg);
		border-radius: 6px;
		box-shadow: 0 8px 24px rgba(9, 9, 9, 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
	}

	.primary-menu > li:hover > .sub-menu,
	.primary-menu > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.primary-menu > li:hover > a::after,
	.primary-menu > li:focus-within > a::after {
		transform: rotate(180deg);
	}

	/* Coming back to a page, Chrome keeps the :hover state the pointer had
	   when the visitor left until the mouse moves again, so the dropdown
	   they clicked through was open on arrival. main.js marks the header
	   until the first pointer move. */
	.site-header.is-hover-stale .primary-menu > li:hover > .sub-menu {
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		/* Snap, never fade: a transition here would play the dropdown out
		   on arrival, which reads as a flicker. */
		transition: none;
	}

	.site-header.is-hover-stale .primary-menu > li:hover > a::after {
		transform: none;
	}

	.primary-menu .sub-menu a {
		padding: 8px 10px;
		color: var(--color-heading);
		border-radius: 4px;
		transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	}

	/* The one hover colour change in the header (client feedback via Avi,
	   2026-09-23): dropdown links get a pale brand tint. */
	.primary-menu .sub-menu a:hover,
	.primary-menu .sub-menu a:focus-visible {
		background: var(--brand-menu-hover-bg);
		color: var(--brand-accent);
	}

	.primary-menu .sub-menu a:focus-visible {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
}

/* ---- Overlay (transparent, over the hero) ---- */

/* Fixed from the start on hero pages. The old absolute -> fixed swap made
   the bar jump into place; now only colours fade, so the change is smooth. */
.site-header--overlay {
	position: fixed;
	inset-inline: 0;
	top: 0;
	background: transparent;
	color: var(--color-on-dark);
	--header-fade: 400ms cubic-bezier(0.4, 0, 0.2, 1);
	--header-top: 0px;
	transition: background-color var(--header-fade), color var(--header-fade), box-shadow var(--header-fade), top var(--header-fade);
}

.site-header--overlay .site-header__bar {
	transition: border-color var(--header-fade);
}

.site-header--overlay .site-logo::after {
	transition: background-color var(--header-fade);
}

.site-header--overlay .site-header__cta.button {
	transition: background-color var(--header-fade), border-color var(--header-fade), color var(--header-fade);
}

/* Logged-in admin bar sits above a fixed header. */
.admin-bar .site-header--overlay {
	--header-top: 32px;
	top: var(--header-top);
}

@media (max-width: 782px) {
	.admin-bar .site-header--overlay {
		--header-top: 46px;
	}
}

/* Once scrolled past the hero, the top bar ("Réserver une consultation")
   slides out and only the main header row stays (Avi). The header moves
   up by the bar's height (`top`, not a transform: the header holds masked
   icons, see the Chrome flicker rules). */
.site-header--overlay .announcement-bar {
	height: var(--topbar-h);
	overflow: hidden;
}

.site-header--overlay.is-stuck {
	top: calc(var(--header-top) - var(--topbar-h));
}

.site-header--overlay .site-header__bar {
	border-block-end-color: rgba(255, 255, 255, 0.15);
}

.site-header--overlay:not(.is-stuck) .site-logo {
	--logo-word: var(--color-on-dark);
}

/* Figma: green CTA is a white pill with a teal label over the photo. */
.site-header--overlay .site-header__cta.button {
	background: var(--brand-cta-bg);
	border-color: var(--brand-cta-border);
	color: var(--brand-cta-fg);
}


.site-main--home > .block-hero:first-child,
.site-main--services > .block-hero:first-child,
.site-main--recruitment > .block-hero:first-child,
.site-main--executive > .block-hero:first-child {
	margin-block-start: 0;
}

/* The open mobile panel needs a solid backdrop over the photo. */
@media (max-width: 1099px) {
	.site-header--overlay:has(.site-header__panel.is-open) .site-header__bar {
		background: var(--brand-panel-bg);
	}
}

/* ---- Stuck (opaque) once scrolled past the hero ---- */

.site-header--overlay.is-stuck {
	background: var(--color-bg);
	color: var(--color-heading);
	box-shadow: 0 1px 12px rgba(9, 9, 9, 0.08);
}

.site-header--overlay.is-stuck .site-header__bar {
	border-block-end-color: var(--color-border);
}

.site-header--overlay.is-stuck .site-header__cta.button {
	background: var(--brand-accent);
	border-color: var(--brand-accent);
	color: var(--color-on-dark);
}

@media (min-width: 768px) {
	.block-hero {
		min-height: 700px;
	}
}

/* Desktop: Figma frame 890:11626 is an 880px band; the text block sits
   88px above the bottom edge (pb-88) and the CTA 32px below the body copy. */
@media (min-width: 1100px) {
	.block-hero {
		min-height: 880px;
	}

	.block-hero__content {
		padding-block-end: 88px;
	}
}

/* Recrutement de personnel + Recrutement exécutif: hero 20% shorter than the
   homepage's (client, 2026-10-10): 880 -> 704 desktop, 700 -> 560 tablet.
   Phones were already cut to 360px in an earlier round and stay as they are. */
@media (min-width: 768px) {
	.page-template-page-recruitment .block-hero,
	.page-template-page-executive-search .block-hero {
		min-height: 560px;
	}
}

@media (min-width: 1100px) {
	.page-template-page-recruitment .block-hero,
	.page-template-page-executive-search .block-hero {
		min-height: 704px;
	}
}

/* Recrutement de personnel: the photo sat too low in the band (client,
   2026-10-10). The crop is anchored to the top; letting it slide down 30%
   of the spare height lifts the face. Only matters where the band is wider
   than 16:9 allows, i.e. desktop. */
.page-template-page-recruitment .block-hero {
	--hero-focus-y: 30%;
}

/* On phones the design's forced breaks leave orphans ("ans." alone on a
   line), so heading and body copy reflow naturally below 768px. */
@media (max-width: 767px) {
	.block-hero__heading br,
	.block-hero__subheading br {
		display: none;
	}
}

/* Over the photo, top-level nav labels stay white (no underline on hover,
   Avi); keyboard focus still shows an underline. */
.site-header--overlay:not(.is-stuck) .primary-menu > li > a:hover,
.site-header--overlay:not(.is-stuck) .primary-menu > li:focus-within > a {
	color: var(--color-on-dark);
}

.site-header--overlay:not(.is-stuck) .primary-menu > li > a:focus-visible {
	color: var(--color-on-dark);
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* The hero controls its own spacing from Figma values: cancel the generic
   `.block` section padding and the global paragraph margin. */
.block-hero {
	padding-block: 0;
}

.block-hero__subheading {
	margin-block-end: 0;
}

/* ---- Short page hero — Figma 712:3094 (Services) ----
   500px band at 1600w, heading Campton Bold 48/1.12 centred, its last line
   136px above the bottom edge. Scrim is lighter than the homepage one. */

.block-hero--short {
	align-items: flex-end;
	min-height: 360px;
}

.block-hero--short .block-hero__scrim {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.block-hero--short .block-hero__image {
	object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 50%);
}

.block-hero--short .block-hero__content {
	width: 100%;
	padding-block: 130px 56px;
	text-align: center;
}

.block-hero--short .block-hero__heading {
	max-width: 1211px;
	margin-inline: auto;
	font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
	line-height: 1.12;
}

@media (min-width: 768px) {
	.block-hero--short {
		min-height: 420px;
	}

	.block-hero--short .block-hero__content {
		padding-block-end: 96px;
	}
}

@media (min-width: 1100px) {
	.block-hero--short {
		min-height: 500px;
	}

	.block-hero--short .block-hero__content {
		padding-block-end: 136px;
	}
}

/* ==========================================================================
   Mobile menu open
   The open panel is dark (brand panel colour), so its text stays white even
   if the header is in its scrolled/opaque state. Page scroll is locked while
   the menu is open (html.nav-open, set by main.js) and the panel scrolls on
   its own when taller than the screen.
   ========================================================================== */

html.nav-open,
html.nav-open body {
	overflow: hidden;
}

@media (max-width: 1099px) {
	.site-header:has(.site-header__panel.is-open) {
		background: var(--brand-panel-bg);
		color: var(--color-on-dark);
		box-shadow: none;
	}

	.site-header:has(.site-header__panel.is-open) .site-header__bar {
		background: var(--brand-panel-bg);
		border-block-end-color: rgba(255, 255, 255, 0.15);
	}

	.site-header:has(.site-header__panel.is-open) .site-logo {
		--logo-word: var(--color-on-dark);
	}

	.site-header:has(.site-header__panel.is-open) .site-header__cta.button {
		background: var(--color-on-dark);
		border-color: var(--color-on-dark);
		color: var(--brand-accent);
	}

	.site-header__panel.is-open {
		max-height: calc(100dvh - 110px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ==========================================================================
   Footer — Figma 890:11828 (green) / 3056:1346 (purple)
   1600w: pt 96, px 160, 690 tall. Brand column 294w, columns split by 348px
   two-tone rules, full-width rule at 486, outlined wordmark from 529,
   cropped by the bottom edge.
   ========================================================================== */

.site-footer {
	background: var(--brand-footer-bg);
	color: var(--color-on-dark);
	overflow: hidden;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 40px;
	padding-block-start: 56px;
}

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

.site-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Brand column ---- */

.site-footer__brand {
	grid-column: 1 / -1;
}

.site-footer__logo {
	--logo-word: var(--color-on-dark);
}

.site-footer__address,
.site-footer__contact,
.site-footer__copyright {
	font-size: 16px;
	line-height: 1.48;
	font-style: normal;
}

.site-footer__address {
	margin-block: 16px 0;
	opacity: 0.75;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	opacity: 0.75;
}

.site-footer__contact li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-footer__contact .icon {
	--icon-size: 18px;
	color: var(--brand-footer-accent);
}

.site-footer__copyright {
	grid-column: 1 / -1;
	grid-row: 4;
	margin: 0;
}

/* ---- Link columns: gap 8, items p 10, Campton 18 / 1.2, -0.18px, 75% ---- */

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.site-footer__col--menu,
.site-footer__col--info {
	opacity: 0.75;
}

.site-footer__heading {
	margin: 0;
	padding: 10px;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: inherit;
}

.site-footer__heading--social {
	padding-inline: 0;
	font-weight: var(--fw-medium);
	letter-spacing: 0;
}

.footer-nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	/*
	 * The column aligns its children to the start, so the list would be
	 * only as wide as its longest top-level label and the sub-links would
	 * wrap against that rather than against the column (Avi, 2026-09-25).
	 * On phones, where the column is the full width, that wrapped labels
	 * with half the row empty beside them.
	 */
	align-self: stretch;
}

.footer-nav a {
	display: inline-flex;
	align-items: center;
	padding: 10px;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.footer-nav > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Caret 4px after the label (Figma gap 4; the link has 10px padding). */
.footer-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline-start: -6px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.footer-nav__toggle .icon {
	transition: transform 0.36s cubic-bezier(0.33, 1, 0.68, 1);
}

.footer-nav__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.footer-nav .sub-menu {
	display: none;
	flex-basis: 100%;
	/*
	 * Don't let long sub-links widen the column (and shift the others):
	 * zero width means the column is sized by its top-level labels, and
	 * the sub-menu then fills exactly that. Nothing spills into the gap
	 * beside it (Avi, 2026-09-25); long labels wrap instead.
	 */
	width: 0;
	min-width: 100%;
	flex-direction: column;
	margin: 0;
	/* No indent: sub-link text lines up with the top-level labels. No
	   padding either: JS animates the height from 0 (see main.js). */
	padding: 0;
	list-style: none;
}

.footer-nav .sub-menu > li:last-child {
	padding-block-end: 4px;
}

.footer-nav .is-open > .sub-menu {
	display: flex;
}

.footer-nav .sub-menu a {
	padding-block: 6px;
	font-size: 16px;
	line-height: 1.3;
}

/* Sub-links brighten on hover, the dark-background counterpart of the
   header dropdown tint (client feedback via Avi, 2026-09-23). Mouse only,
   so touch never leaves a link stuck in the hovered colour. */
@media (hover: hover) and (pointer: fine) {
	.footer-nav .sub-menu a {
		transition: color var(--dur-fast) var(--ease);
	}

	.footer-nav .sub-menu a:hover {
		color: var(--brand-menu-hover-fg);
	}
}

/* ---- Social: 38px round, p 10, 18px icon ---- */

.site-footer__col--social {
	grid-column: 1 / -1;
	gap: 16px;
}

.site-footer__social {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social-link {
	display: flex;
	padding: 10px;
	border-radius: 90px;
	background: var(--brand-footer-accent);
	color: var(--color-on-dark);
}

.site-footer__social-link .icon {
	--icon-size: 18px;
}

/* ---- Rules: 1px dark + 1px mid, side by side ---- */

.site-footer__rule {
	display: none;
	width: 2px;
	background: linear-gradient(90deg, var(--brand-footer-rule-a) 50%, var(--brand-footer-rule-b) 50%);
}

.site-footer__divider {
	grid-column: 1 / -1;
	grid-row: 5;
	height: 2px;
	background: linear-gradient(180deg, var(--brand-footer-rule-a) 50%, var(--brand-footer-rule-b) 50%);
}

/* ---- Wordmark: 1280 x 189 outline, 161px visible above the bottom edge ---- */

.site-footer__wordmark {
	grid-column: 1 / -1;
	grid-row: 6;
	position: relative;
	/* width 0 + min-width 100% keeps the aspect-ratio box from widening
	   the auto grid tracks it spans. */
	width: 0;
	min-width: 100%;
	aspect-ratio: 1280 / 161;
	margin-block-start: -10px;
	/* Cut off at the bottom edge only (Figma); the outline's top stroke
	   pokes 1px above the box and must not be trimmed. */
	clip-path: inset(-4px 0 0 0);
}

/* An <img> per brand (not a mask): masks rasterise the 1px outline and
   break it up when scaled. */
.site-footer__wordmark img {
	position: absolute;
	top: -1px;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
}

/* Below the desktop row, the 10px item padding would indent the link
   columns from the brand column; pull them back to the shared edge. */
@media (max-width: 1099px) {
	.site-footer__col--menu,
	.site-footer__col--info {
		margin-inline-start: -10px;
	}
}

@media (max-width: 767px) {
	.site-footer__col,
	.footer-nav {
		gap: 0;
	}

	.site-footer__col--social {
		gap: 12px;
	}

	/*
	 * Two columns of about 152px on a phone, so the top-level labels are
	 * the tight ones. They keep their single line (Avi, 2026-09-25) by
	 * giving up their side padding; sub-links below them may wrap.
	 */
	.site-footer__col--menu .footer-nav > li > a {
		white-space: nowrap;
	}

	.footer-nav a {
		min-height: 44px;
		padding-inline: 0;
		font-size: 16px;
	}

	.site-footer__col--menu,
	.site-footer__col--info {
		margin-inline-start: 0;
	}

	.site-footer__heading {
		padding-inline: 0;
	}

	.footer-nav__toggle {
		min-width: 32px;
		min-height: 44px;
		margin-inline-start: 0;
	}

	.footer-nav .sub-menu a {
		min-height: 40px;
		font-size: 15px;
	}

	.site-footer__heading {
		font-size: 17px;
	}
}

@media (min-width: 768px) {
	.site-footer__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 32px;
		padding-block-start: 72px;
	}

	.site-footer__col--social {
		grid-column: auto;
	}

	.site-footer__copyright { grid-row: 3; }
	.site-footer__divider   { grid-row: 4; }
	.site-footer__wordmark  { grid-row: 5; }
}

@media (min-width: 1100px) {
	.site-footer__inner {
		grid-template-columns: minmax(294px, max-content) 2px auto 2px auto 2px auto;
		/* 348px as in Figma; grows if a footer dropdown is opened. */
		grid-template-rows: minmax(348px, auto);
		justify-content: space-between;
		column-gap: 0;
		row-gap: 0;
		padding-block-start: 96px;
	}

	.site-footer__brand {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
	}

	/*
	 * Sub-links wrap. They used to stay on one line, on the assumption
	 * they fit in the gap before the rule; the French labels do not, and
	 * "Recrutement par secteur d'activité" ran across the rule and into
	 * the Information column (Avi, 2026-09-25).
	 *
	 * The column is sized by its top-level labels, which left only 143px
	 * for text and wrapped five of the eight French sub-links. It gets a
	 * floor wide enough for all but the longest, and the sub-links drop
	 * their right-hand padding to use it. This is a fixed width: the
	 * column is the same whether a menu is open or closed, so nothing
	 * shifts when one expands.
	 */
	.site-footer__col--menu {
		min-width: 195px;
	}

	.footer-nav .sub-menu a {
		padding-inline-end: 0;
		text-wrap: pretty;
	}

	/* Figma: copyright at y 312 in the 348px column. */
	.site-footer__copyright {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		margin-block-end: 12px;
	}

	/* Figma breaks the address onto exactly two lines. */
	.site-footer__address {
		white-space: nowrap;
	}

	.site-footer__rule {
		display: block;
		grid-row: 1;
	}

	.site-footer__col {
		grid-row: 1;
		align-self: start;
	}

	.site-footer__divider {
		grid-row: 2;
		margin-block-start: 42px;
	}

	.site-footer__wordmark {
		grid-row: 3;
		margin-block-start: 41px;
	}
}

/* Recrutement de personnel (Figma 456:3004): the heading's second line is
   #090909. Grey band (Raffi, 2026-10-14) so the sections alternate white,
   grey, white; the band keeps the block's own even padding, and the video
   section after it, which has no top padding in Figma, gets the same space
   above as below. */
.site-main--recruitment .block-why {
	background: #f8f8f8;
}

.site-main--recruitment .block-why + .block-video {
	padding-block-start: 64px;
}

@media (min-width: 768px) {
	.site-main--recruitment .block-why + .block-video {
		padding-block-start: 96px;
	}
}

@media (min-width: 1100px) {
	.site-main--recruitment .block-why + .block-video {
		padding-block-start: 124px;
	}
}

.site-main--recruitment .block-why__heading-dark {
	color: var(--color-title);
}

/* ==========================================================================
   Accordion (shared) — Figma 299:7376
   Rows p 4, SemiBold 16 / 1.44, 14px teal icon; 8px above and below each
   1px #e7e7e8 rule. Closed rows show the xmark at 45deg (a plus).
   ========================================================================== */

.accordion__item + .accordion__item {
	margin-block-start: 8px;
	padding-block-start: 8px;
	border-block-start: 1px solid #e7e7e8;
}

.accordion__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 4px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: var(--fw-semibold);
	line-height: 1.44;
	color: var(--color-body);
	list-style: none;
	cursor: pointer;
}

.accordion__title::-webkit-details-marker {
	display: none;
}

.accordion__title > span {
	max-width: 440px;
}

.accordion__icon {
	flex: none;
	width: 14px;
	height: 14px;
	margin-inline-end: 3px;
	transform: rotate(45deg);
	transition: transform 0.36s cubic-bezier(0.33, 1, 0.68, 1);
}

.accordion__item[open] .accordion__icon {
	transform: rotate(0deg);
}

.accordion__panel {
	/* No padding here: JS animates this box's height from 0, and padding
	   would make it jump. Spacing lives on the inner wrapper. */
	/* One step below the 16px question so answers read as secondary. */
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-body);
}

/* The icon turns back to a plus as soon as a row starts closing. */
.accordion__item.is-closing .accordion__icon {
	transform: rotate(45deg);
}

.accordion__panel-inner {
	padding: 4px 4px 12px;
}

.accordion__panel-inner > :last-child {
	margin-block-end: 0;
}

.accordion__panel-inner ul {
	margin: 8px 0 0;
	padding-inline-start: 20px;
}

/* ==========================================================================
   Services 3: "Pourquoi St-Amour" — Figma 299:7360 (784 tall at 1600)
   Text 524w | photo 500 x 536 | stat column 217w; gaps 24 / 20.
   ========================================================================== */

.block-why {
	padding-block: 64px;
	background: var(--color-bg);
}

.block-why__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.block-why__eyebrow {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--color-primary);
}

.block-why__heading {
	max-width: 433px;
	margin: 0;
	font-size: clamp(28px, 22px + 1vw, 36px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-primary);
}

.block-why__heading-dark {
	display: block;
	color: var(--color-body);
}

.block-why__intro {
	margin: 24px 0 21px;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-title);
}

.block-why__photo {
	position: relative;
	min-height: 360px;
	border-radius: 16px;
	overflow: hidden;
}

.block-why__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Figma crops the photo 42px in from the left of a 724px-wide fill. */
	object-position: 19% center;
}

.why-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	padding: 24px;
	border-radius: 16px;
}

.why-stat__value {
	font-size: 44px;
	font-weight: var(--fw-bold);
	line-height: 1.12;
}

.why-stat__label {
	font-size: 16px;
	line-height: 1.16;
}

.why-stat--glass {
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 225px;
	min-height: 186px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.why-stat--glass .why-stat__value {
	flex: 1 0 0;
	font-size: 30px;
	color: var(--color-primary);
}

.why-stat--glass .why-stat__label {
	font-weight: var(--fw-medium);
	color: var(--color-body);
}

.why-stat--teal {
	min-height: 200px;
	background: #255850;
	color: var(--color-on-dark);
}

.why-stat--teal .why-stat__label {
	color: rgba(255, 255, 255, 0.8);
}

.why-stat--white {
	min-height: 180px;
	border: 1px solid #e7e7e8;
	background: var(--color-bg);
}

.why-stat--white .why-stat__value {
	color: var(--color-primary);
}

.why-stat--white .why-stat__label {
	max-width: 168px;
	color: var(--color-body);
}

.block-why__stats {
	display: grid;
	gap: 16px;
}

/* Phones: the two cards stack full width so each figure stays on one line. */
@media (max-width: 767px) {
	.why-stat__value {
		font-size: 36px;
	}

	.why-stat--teal,
	.why-stat--white {
		min-height: 150px;
	}
}

/* Tablet: text on top, photo + stat column below. */
@media (min-width: 768px) {
	.block-why {
		padding-block: 96px;
	}

	.block-why__inner {
		grid-template-columns: minmax(0, 1fr) 217px;
		gap: 32px 20px;
	}

	.block-why__text {
		grid-column: 1 / -1;
	}

	.block-why__photo {
		min-height: 536px;
	}

	.block-why__stats {
		grid-template-columns: 1fr;
		grid-template-rows: 297fr 219fr;
		gap: 20px;
	}
}

/* Desktop: three columns, as Figma. The text column starts 5px left of
   the container edge and is 524 wide (155 -> 679 at 1600). */
@media (min-width: 1100px) {
	.block-why {
		padding-block: 124px;
	}

	.block-why__inner {
		grid-template-columns: minmax(0, 1fr) 500px 217px;
		column-gap: 20px;
		align-items: start;
	}

	/* Figma lets the text run 16px past the photo's bottom edge into the
	   section padding (text ends at 676, section at 784). */
	.block-why__text {
		grid-column: auto;
		margin: 3px 4px -16px -5px;
	}

	.block-why__photo,
	.block-why__stats {
		height: 536px;
	}
}

/* No stat cards (Services): the photo takes the columns they leave. */
@media (min-width: 768px) {
	.block-why--no-stats .block-why__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1100px) {
	.block-why--no-stats .block-why__inner {
		grid-template-columns: minmax(0, 1fr) 737px;
	}

	/* The photo is as tall as the text column with the rows closed (Avi,
	   2026-10-14); main.js sets the height so opening a row does not grow
	   it. 536 until the script has run. */
	.block-why--no-stats .block-why__photo {
		align-self: start;
		min-height: 0;
	}
}

/* ==========================================================================
   CTA with image (shared) — Figma 299:7411 (805 tall at 1600)
   ========================================================================== */

.block-cta-image {
	padding-block: 64px;
	background: #f8f8f8;
}

.block-cta-image__inner {
	display: grid;
	gap: 40px;
	align-items: center;
}

.block-cta-image__heading {
	max-width: 608px;
	margin: 0;
	font-size: clamp(30px, 22px + 1.4vw, 44px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-body);
}

.block-cta-image__heading-accent {
	color: var(--color-primary);
}

.block-cta-image__body {
	max-width: 608px;
	margin: 32px 0 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-title);
}

/* Figma: Medium 18 / 1.2, -0.18px, px 24 / py 14 (same as the sectors CTA). */
.block-cta-image__button {
	margin-block-start: 28px;
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
}

/* Stacked on tablet/phone: keep the photo at its design size at most. */
.block-cta-image__photo {
	width: 100%;
	max-width: 595px;
}

.block-cta-image__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 595 / 533;
	object-fit: cover;
	-webkit-mask: url("../images/cta/cta-mask.png") center / 100% 100% no-repeat;
	mask: url("../images/cta/cta-mask.png") center / 100% 100% no-repeat;
}

@media (min-width: 768px) {
	.block-cta-image {
		padding-block: 96px;
	}
}

@media (min-width: 1100px) {
	.block-cta-image {
		padding-block: 136px;
	}

	.block-cta-image__inner {
		grid-template-columns: 663px 595px;
		justify-content: space-between;
		gap: 22px;
	}

	.block-cta-image__body {
		margin-block-start: 48px;
	}

	.block-cta-image__button {
		margin-block-start: 36px;
	}
}

/* ==========================================================================
   Image banner (shared) — Figma 3056:1196 (898 tall at 1600)
   ========================================================================== */

.block-image-banner {
	padding-block: 64px;
	background: var(--color-bg);
}

.image-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	min-height: 520px;
	padding: 40px 20px;
	overflow: hidden;
	border-radius: 24px;
	background: #0c1d1b;
	text-align: center;
}

.image-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center var(--banner-focus-y, 50%);
}

/* Figma: transparent to 20%, then #0c1d1b (teal 900) by 85%. */
.image-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(12, 29, 27, 0) 20%, #0c1d1b 85.096%);
	pointer-events: none;
}

.image-banner__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 1186px;
}

.image-banner__heading {
	max-width: 956px;
	margin: 0;
	font-size: clamp(28px, 20px + 1.8vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-on-dark);
}

.image-banner__text {
	max-width: 636px;
	margin: 0;
	font-size: clamp(16px, 15px + 0.2vw, 18px);
	line-height: 1.48;
	color: var(--color-on-dark);
}

/* Figma: SemiBold 18 / 1.2, -0.18px, px 24 / py 14. */
.image-banner__button {
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.block-image-banner {
		padding-block: 96px;
	}

	.image-banner {
		min-height: 560px;
		padding: 56px 40px;
	}
}

@media (min-width: 1100px) {
	.block-image-banner {
		padding-block: 136px;
	}

	.image-banner {
		min-height: 626px;
		padding-block: 72px;
	}
}

/* ==========================================================================
   Team grid + pop-up (shared) — Figma 3056:1205 (1519 tall at 1600)
   ========================================================================== */

.block-team {
	padding-block: 64px;
	background: #f7f4f8;
}

/* Green pages (About) use the neutral grey band. */
.brand-green .block-team {
	background: #f8f8f8;
}

.block-team__header {
	/* Figma keeps line 1 on one line (~925px at 48px). */
	max-width: 1000px;
	margin: 0 auto 40px;
	text-align: center;
}

.block-team__heading {
	margin: 0;
	font-size: clamp(30px, 20px + 1.8vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-title);
}

.block-team__heading-accent {
	display: block;
	color: var(--brand-accent, var(--color-primary));
}

.block-team__intro {
	max-width: 730px;
	margin: 24px auto 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-title);
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.team-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 0;
	border: 0;
	/* Buttons don't inherit the page font by default: use Campton. */
	font: inherit;
	letter-spacing: inherit;
	background: none;
	color: var(--color-body);
	text-align: left;
	cursor: pointer;
}

.team-card__photo {
	display: block;
	width: 100%;
	aspect-ratio: 302 / 356;
	margin-block-end: 16px;
	overflow: hidden;
	border-radius: 16px;
	background: #e7e7e8;
}

.team-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card__name {
	font-size: 18px;
	font-weight: var(--fw-semibold);
	line-height: 1.48;
}

.team-card__title {
	margin-block-start: 8px;
	font-size: 16px;
	line-height: 1.48;
}

.team-card:focus-visible {
	outline: 2px solid var(--brand-accent, var(--color-primary));
	outline-offset: 4px;
	border-radius: 16px;
}

.team-card:focus-visible .team-card__name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 479px) {
	.team-card__name {
		font-size: 16px;
	}

	.team-card__title {
		font-size: 14px;
	}
}

@media (min-width: 768px) {
	.block-team {
		padding-block: 96px;
	}

	.team-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 23px;
	}
}

@media (min-width: 1100px) {
	.block-team {
		padding-block: 136px;
	}

	.block-team__header {
		margin-block-end: 48px;
	}

	.team-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 23px;
	}

	/* Figma fixes the first row's cards at 481 tall (photo + 2-line title). */
	.team-card {
		min-height: 481px;
	}
}

/* ---- Pop-up (no Figma frame; follows the testimonial dialog) ---- */

.team-modal {
	width: min(880px, calc(100% - 32px));
	max-height: calc(100dvh - 32px);
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 16px;
	background: var(--color-bg);
	color: var(--color-title);
}

.team-modal::backdrop {
	background: rgba(9, 9, 9, 0.6);
}

.team-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 1;
	padding: 4px 8px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--color-body);
	cursor: pointer;
}

.team-modal__inner {
	display: grid;
	gap: 24px;
	padding: 24px;
}

.team-modal__photo img {
	display: block;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 302 / 356;
	object-fit: cover;
	border-radius: 12px;
}

.team-modal__name {
	margin: 0 32px 0 0;
	font-size: 24px;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	color: var(--color-title);
}

.team-modal__title {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--brand-accent, var(--color-primary));
}

.team-modal__bio {
	margin-block-start: 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-body);
}

.team-modal__bio p {
	margin: 0 0 12px;
}

.team-modal__bio p:last-child {
	margin-block-end: 0;
}

@media (min-width: 768px) {
	.team-modal__inner {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 32px;
		padding: 32px;
	}
}

/* ---- Accordion, FAQ variant — Figma 3056:1250 ----
   Rows py 24 with a 1px #ddd rule below; question SemiBold 20 / 1.48
   #3f4149 (571w max); 20px icon; answers one step smaller (16px). */
.accordion--faq .accordion__item + .accordion__item {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.accordion--faq .accordion__item {
	border-block-end: 1px solid #ddd;
}

.accordion--faq .accordion__title {
	align-items: flex-start;
	gap: 20px;
	padding: 24px 0;
	border-radius: 0;
	font-size: clamp(17px, 16px + 0.25vw, 20px);
	line-height: 1.48;
}

.accordion--faq .accordion__title > span {
	max-width: 571px;
}

.accordion--faq .accordion__icon {
	width: 20px;
	height: 20px;
	margin: 5px 4px 0 0;
}

.accordion--faq .accordion__panel {
	max-width: 571px;
	font-size: 16px;
	line-height: 1.55;
}

/* ==========================================================================
   Executive Search 7: FAQ — Figma 3056:1250 (1087 tall at 1600)
   ========================================================================== */

.block-faq {
	padding-block: 64px;
	background: var(--color-bg);
}

.block-faq__header {
	margin: 0 0 32px;
	text-align: center;
}

.block-faq__eyebrow {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--brand-accent, var(--color-primary));
}

.block-faq__heading {
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.block-faq__heading-accent {
	color: var(--brand-accent, var(--color-primary));
}

.block-faq__columns {
	display: grid;
	gap: 0;
}

@media (min-width: 768px) {
	.block-faq {
		padding-block: 96px;
	}
}

@media (min-width: 1100px) {
	.block-faq {
		padding-block: 124px;
	}

	.block-faq__header {
		margin-block-end: 48px;
	}

	.block-faq__columns {
		grid-template-columns: 620px 620px;
		justify-content: space-between;
		align-items: start;
	}
}

/* ==========================================================================
   Lead form (shared) — Figma 3056:1530 (1066 tall at 1600)
   ========================================================================== */

.block-lead {
	padding-block: 64px;
	background: var(--color-bg);
}

.block-lead__inner {
	display: grid;
	gap: 40px;
}

.block-lead__heading {
	max-width: 575px;
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.block-lead__accent {
	color: var(--brand-accent, var(--color-primary));
}

.block-lead__body {
	max-width: 598px;
	margin: 32px 0 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-body);
}

.block-lead__card {
	padding: 28px 20px;
	border-radius: 24px;
	background: var(--color-bg);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.block-lead__title {
	margin: 0 0 24px;
	font-size: clamp(22px, 19px + 0.5vw, 28px);
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-body);
}

/* ---- Form markup (inside the CF7 template) ---- */

.lead-form {
	display: grid;
	gap: 24px;
}

.lead-form__row {
	display: grid;
	gap: 24px;
}

.lead-form__field {
	display: grid;
	gap: 8px;
}

.lead-form__label {
	font-size: 16px;
	font-weight: var(--fw-semibold);
	line-height: 1.48;
	text-transform: uppercase;
	color: var(--color-body);
}

.lead-form .wpcf7-form-control-wrap {
	display: block;
}

.st-amour-form .lead-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.st-amour-form .lead-form select,
.st-amour-form .lead-form textarea {
	display: block;
	width: 100%;
	padding: calc(12px + var(--optical-nudge-lg)) 16px calc(12px - var(--optical-nudge-lg));
	border: 1px solid #e7e7e8;
	border-radius: 8px;
	background: var(--color-bg);
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-title);
}

.st-amour-form .lead-form select {
	padding-inline-end: 48px;
	background: var(--color-bg) url("../images/icons/angle-down-grey.svg") right 16px center / 24px 24px no-repeat;
	-webkit-appearance: none;
	appearance: none;
	color: var(--color-subtitle);
	cursor: pointer;
}

.st-amour-form .lead-form select.is-filled {
	color: var(--color-title);
}

/* ---- Custom dropdown (JS builds it over the real select) ---- */

.st-select {
	position: relative;
}

/* The real select stays for CF7 (validation, submit) but is not shown. */
.st-select select,
.st-amour-form .lead-form .st-select select {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.st-select__button {
	display: flex;
	align-items: center;
	width: 100%;
	padding: calc(12px + var(--optical-nudge-lg)) 48px calc(12px - var(--optical-nudge-lg)) 16px;
	border: 1px solid #e7e7e8;
	border-radius: 8px;
	background: var(--color-bg) url("../images/icons/angle-down-grey.svg") right 16px center / 24px 24px no-repeat;
	font: inherit;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-subtitle);
	text-align: left;
	cursor: pointer;
}

/*
 * A dropdown that takes several answers (the application form's industry
 * field): each chosen option keeps a tick and the list stays open, and the
 * button shows the choices joined (client, 2026-09-25).
 */
.st-select--multi .st-select__option {
	padding-inline-start: 44px;
}

.st-select--multi .st-select__option::before {
	content: "";
	position: absolute;
	inset-inline-start: 16px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 1px solid #c9cbd1;
	border-radius: 4px;
	background: var(--color-bg);
}

.st-select--multi .st-select__option.is-chosen::before {
	border-color: var(--color-primary);
	background: var(--color-primary) url("../images/icons/check-white.svg") center / 12px 12px no-repeat;
}

.st-select--multi .st-select__value {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.st-select.is-filled .st-select__button {
	color: var(--color-title);
}

.st-select.is-open .st-select__button,
.st-select__button:focus-visible {
	outline: 2px solid var(--brand-accent, var(--color-primary));
	outline-offset: 1px;
}

.st-select__value {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.st-select__list {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 6px);
	z-index: 20;
	max-height: min(420px, 60vh);
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid #e7e7e8;
	border-radius: 8px;
	background: var(--color-bg);
	box-shadow: 0 8px 24px rgba(9, 9, 9, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}

.st-select.is-open .st-select__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* In a pop-up a closed list takes no room at all: invisible lists still stretched the panel's scroll area. */
dialog .st-select:not(.is-open) .st-select__list {
	display: none;
}

/* Opens upward when a pop-up leaves more room above the field than below it. */
.st-select--up .st-select__list {
	top: auto;
	bottom: calc(100% + 6px);
	transform: translateY(4px);
}

.st-select--up.is-open .st-select__list {
	transform: translateY(0);
}

.st-select__option {
	position: relative;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-body);
	cursor: pointer;
}

/* Highlighted row (mouse or arrow keys): soft brand tint. */
.st-select__option.is-active {
	background: #eef5f4;
}

.brand-purple .st-select__option.is-active {
	background: #f7f4f8;
}

.st-select__option[aria-selected="true"] {
	font-weight: var(--fw-semibold);
	color: var(--brand-accent, var(--color-primary));
}

/* CF7 invalid state carries over to the custom button. */
.st-select:has(.wpcf7-not-valid) .st-select__button {
	border-color: #dc3232;
}

.st-amour-form .lead-form textarea {
	height: 132px;
	padding: 16px;
	resize: vertical;
}

.lead-form ::placeholder {
	color: var(--color-subtitle);
	opacity: 1;
}

.st-amour-form .lead-form input:focus-visible,
.st-amour-form .lead-form select:focus-visible,
.st-amour-form .lead-form textarea:focus-visible {
	outline: 2px solid var(--brand-accent, var(--color-primary));
	outline-offset: 1px;
}

/* Figma: full width, SemiBold 18 / 1.2, -0.18px, py 14, brand colour. */
.lead-form__submit.button {
	width: 100%;
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	border: 0;
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
	cursor: pointer;
}

.lead-form__note {
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--color-subtitle);
}

.lead-form .wpcf7-not-valid-tip {
	margin-block-start: 6px;
	font-size: 14px;
}

.block-lead .wpcf7-response-output:empty {
	display: none;
}

.block-lead .wpcf7-spinner {
	position: absolute;
}

@media (min-width: 600px) {
	.lead-form__row {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}

@media (min-width: 768px) {
	.block-lead {
		padding-block: 96px;
	}

	.block-lead__card {
		padding: 36px 30px;
	}
}

@media (min-width: 1100px) {
	.block-lead {
		padding-block: 136px;
	}

	.block-lead__inner {
		grid-template-columns: 628px 604px;
		justify-content: space-between;
		align-items: start;
	}

	.block-lead__text {
		padding-block: 24px;
	}

	.block-lead__body {
		margin-block-start: 48px;
	}
}

/* ==========================================================================
   Media + text (shared) — Figma 712:3160 (596 tall at 1600)
   ========================================================================== */

.block-media-text {
	padding-block: 48px;
	background: var(--color-bg);
}

.block-media-text__inner {
	display: grid;
	gap: 40px;
	align-items: center;
}

.block-media-text__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 546px;
	aspect-ratio: 546 / 500;
	padding: 7%;
	overflow: hidden;
	border-radius: 24px;
	background: #f8f8f8;
}

.block-media-text__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}

/* Figma: white .9 at the top fading to transparent. */
.block-media-text__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.block-media-text__frame {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--color-on-dark);
	border-radius: 20px;
	background: var(--color-bg);
}

.block-media-text__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.block-media-text__media.block-media-text__media--plain {
	padding: 0;
	background: none;
}

.block-media-text__media--plain::after {
	content: none;
}

.block-media-text__media--plain .block-media-text__frame {
	border: 0;
	border-radius: 24px;
	background: none;
}

.block-media-text__heading {
	max-width: 560px;
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-primary);
}

.block-media-text__heading-dark {
	display: block;
	color: var(--color-title);
}

.block-media-text__body {
	margin-block-start: 24px;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-subtitle);
}

.block-media-text__body p {
	margin: 0 0 24px;
}

.block-media-text__body p:last-child {
	margin-block-end: 0;
}

/* Figma: Medium 18 / 1.2, -0.18px, px 24 / py 14 (same as other CTAs). */
.block-media-text__button {
	margin-block-start: 32px;
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.block-media-text {
		padding-block: 64px;
	}
}

@media (min-width: 1100px) {
	.block-media-text {
		padding-block: 48px;
	}

	.block-media-text__inner {
		grid-template-columns: 546px minmax(0, 686px);
		justify-content: space-between;
		gap: 48px;
	}

	.block-media-text__media {
		padding: 39px 43px;
	}

	.block-media-text__button {
		margin-block-start: 48px;
	}
}

/* ==========================================================================
   Video feature (components/video-feature.php)
   Figma 606:2878: pt 0 / pb 124, heading Bold 48 / 1.24 centred, 24 gap,
   text Book 16 / 1.48 #3f4149, 48 gap, 1280 x 720 media radius 12.
   ========================================================================== */
.block-video {
	padding-block: 0 64px;
	background: var(--color-bg);
}

.block-video__header {
	display: grid;
	gap: 16px;
	text-align: center;
}

.block-video__heading {
	margin: 0;
	font-size: clamp(30px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-primary);
}

.block-video__heading-dark {
	display: block;
	color: var(--color-title);
}

.block-video__text {
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-body);
}

.block-video__text p {
	margin: 0;
}

.block-video__media {
	position: relative;
	margin-block-start: 32px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: var(--color-title);
}

.block-video__cover,
.block-video__media iframe,
.block-video__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.block-video__media video {
	object-fit: contain;
	background: #000;
}

/* The whole cover is the play target; the Figma icon sits in the middle. */
.block-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.block-video__play img {
	width: 64px;
	height: auto;
}

.block-video__play:focus-visible img {
	outline: 3px solid var(--color-on-dark);
	outline-offset: 4px;
	border-radius: 16px;
}

@media (min-width: 768px) {
	.block-video {
		padding-block-end: 96px;
	}

	.block-video__header {
		gap: 24px;
	}

	.block-video__media {
		margin-block-start: 48px;
	}

	.block-video__play img {
		width: 88px;
	}
}

@media (min-width: 1100px) {
	.block-video {
		padding-block-end: 124px;
	}

	/* Figma's heading box is 1299 wide, a little wider than the container. */
	.block-video__heading {
		margin-inline: -10px;
	}
}

/* ---- Accordion, steps variant — Figma 458:3189 ----
   White cards 16 apart, radius 16, p 16, shadow 0 10 15 rgba(0,0,0,.05);
   number badge 43 (#f8f8f8, #e7e7e8 border, radius 8, Bold 18 teal),
   24 gap, title Medium 24 / 1.24 #090909, 20px icon; text under the
   title, Book 16 / 1.48. */
.accordion--steps {
	display: grid;
	gap: 16px;
}

.accordion--steps .accordion__item + .accordion__item {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.accordion--steps .accordion__item {
	border: 1px solid var(--color-on-dark);
	border-radius: 16px;
	background: var(--color-on-dark);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

.accordion--steps .accordion__title {
	justify-content: flex-start;
	gap: 16px;
	padding: 12px;
	border-radius: 16px;
	font-size: clamp(17px, 14px + 0.6vw, 24px);
	font-weight: var(--fw-medium);
	line-height: 1.24;
	color: var(--color-title);
}

.accordion--steps .accordion__title > span:not(.accordion__num) {
	flex: 1;
	max-width: none;
}

.accordion__num {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 43px;
	height: 43px;
	border: 1px solid #e7e7e8;
	border-radius: 8px;
	background: #f8f8f8;
	font-size: 18px;
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--color-primary);
}

.accordion--steps .accordion__icon {
	width: 18px;
	height: 18px;
	margin-inline-end: 0;
}

.accordion--faq .accordion__panel-inner {
	padding: 0 0 24px;
}

.accordion--steps .accordion__panel-inner {
	padding: 0 12px 16px 71px;
}

.accordion--steps .accordion__panel {
	font-size: 16px;
	line-height: 1.48;
}

/* ==========================================================================
   Recrutement de personnel 5: "7 étapes" — Figma 458:3189 (990 tall)
   ========================================================================== */
.block-steps {
	padding-block: 64px;
	background: #f8f8f8;
}

.block-steps__inner {
	display: grid;
	gap: 40px;
	align-items: start;
}

.block-steps__heading {
	margin: 0;
	font-size: clamp(28px, 22px + 1vw, 36px);
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-title);
}

.block-steps__accent {
	color: var(--color-primary);
}

.block-steps__body {
	max-width: 474px;
	margin-block-start: 24px;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-body);
}

.block-steps__body p {
	margin: 0;
}

.block-steps__button {
	margin-block-start: 32px;
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.block-steps {
		padding-block: 96px;
	}

	.accordion--steps .accordion__title {
		min-height: 75px;
		gap: 24px;
		padding: 16px;
	}

	.accordion--steps .accordion__icon {
		width: 20px;
		height: 20px;
		margin-inline-end: 4px;
	}

	/* Figma open card 136: 75 row + 48 text + 10 + borders. */
	.accordion--steps .accordion__panel-inner {
		padding: 0 60px 10px 83px;
	}
}

@media (min-width: 1100px) {
	.block-steps {
		padding-block: 148px;
	}

	.block-steps__inner {
		grid-template-columns: 517px minmax(0, 737px);
		justify-content: space-between;
		gap: 26px;
	}

	/* Figma: 24 below the text (plus an empty line of 24), 24 to the button. */
	.block-steps__button {
		margin-block-start: 48px;
	}
}

/* Recrutement de personnel 6: banner heading box is 1074 wide (Figma 712:3165). */
.site-main--recruitment .image-banner__heading {
	max-width: 1074px;
}

/* Recrutement de personnel 8: FAQ (Figma 458:3272): 608w columns, questions
   Medium 20 / 1.48, 485w. */
.site-main--recruitment .accordion--faq .accordion__title {
	font-weight: var(--fw-medium);
}

.site-main--recruitment .accordion--faq .accordion__title > span,
.site-main--recruitment .accordion--faq .accordion__panel {
	max-width: 510px;
}

@media (min-width: 1100px) {
	.site-main--recruitment .block-faq__columns {
		grid-template-columns: 608px 608px;
	}
}

/* Recrutement de personnel 9: lead form on a #f8f8f8 band (Figma 712:3007). */
.site-main--recruitment .block-lead {
	background: #f8f8f8;
}

/* ==========================================================================
   404 (404.php) — not in Figma; built from the site's tokens: #f8f8f8 band,
   pale-teal "404", eyebrow Medium 16 teal, heading Bold 48 / 1.12, body
   Book 16 / 1.48, white cards radius 16 with the steps-card shadow.
   ========================================================================== */
.block-404 {
	padding-block: 56px 64px;
	background: #f8f8f8;
}

.block-404__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.block-404__code {
	margin: 0 0 8px;
	font-size: clamp(120px, 60px + 14vw, 240px);
	font-weight: var(--fw-bold);
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: #d8e9e7; /* tealgreen 100 */
	user-select: none;
}

.block-404__eyebrow {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--color-primary);
}

.block-404__heading {
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.block-404__accent {
	color: var(--color-primary);
}

.block-404__text {
	max-width: 560px;
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-body);
}

.block-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-block-start: 32px;
}

.block-404__actions .button {
	padding-block: calc(var(--btn-py) + var(--optical-nudge)) calc(var(--btn-py) - var(--optical-nudge));
	letter-spacing: -0.01em;
}

/* Secondary button: teal outline on the grey band. */
.button--ghost {
	border: 1px solid var(--color-primary);
	background: transparent;
	color: var(--color-primary);
}

.block-404__popular {
	margin-block-start: 64px;
}

.block-404__popular-title {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.12;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-subtitle);
}

.block-404__cards {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-404 {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr;
	align-items: start;
	gap: 8px 16px;
	height: 100%;
	padding: 24px;
	border: 1px solid var(--color-on-dark);
	border-radius: 16px;
	background: var(--color-on-dark);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
	text-decoration: none;
}

.card-404__title {
	grid-column: 1 / -1;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.24;
	color: var(--color-title);
}

.card-404__text {
	font-size: 15px;
	line-height: 1.48;
	color: var(--color-body);
}

.card-404__arrow {
	align-self: end;
	width: 24px;
	height: 24px;
}

/* No hover effect (Avi); keyboard focus underlines the title. */
.card-404:focus-visible .card-404__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.block-404 {
		padding-block: 72px 96px;
	}

	.block-404__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.block-404 {
		padding-block: 80px 136px;
	}

	.block-404__popular {
		margin-block-start: 88px;
	}

	.block-404__cards {
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
	}
}

/* ==========================================================================
   About (page-about.php) — Figma file B 397:9795
   ========================================================================== */

/* Hero 397:9796: same short hero, heading 148px above the bottom edge. */
@media (min-width: 1100px) {
	.site-main--about .block-hero--short .block-hero__content {
		padding-block-end: 148px;
	}
}

/* About 2: intro + video + values — Figma 556:2707 (1538 tall at 1600). */
.block-about-intro {
	padding-block: 64px;
	background: var(--color-bg);
}

.block-about-intro__header {
	max-width: 854px;
	margin-inline: auto;
	text-align: center;
}

.block-about-intro__heading {
	margin: 0;
	font-size: clamp(30px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

/* EN heading on one line (client, 2026-10-14): it needs ~880px at 48px,
   so it may run 40px past the 854 text column on each side. */
@media (min-width: 1100px) {
	html[lang^="en"] .block-about-intro__heading {
		margin-inline: -40px;
	}
}

.block-about-intro__accent {
	color: var(--color-primary);
}

.block-about-intro__text {
	margin-block-start: 16px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-body);
}

.block-about-intro__text p {
	margin: 0;
}

.block-video__media.block-about-intro__media {
	margin-block-start: 40px;
	border: 1px solid #e7e7e8;
	border-radius: 24px;
}

.block-about-intro__media .block-video__play img {
	width: 56px;
}

.values-grid {
	display: grid;
	gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.value-card {
	padding: 24px;
	border: 1px solid #e7e7e8;
	border-radius: 16px;
	background: #f8f8f8;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.value-card__title {
	margin: 0;
	font-size: clamp(20px, 18px + 0.4vw, 24px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-primary);
	transition: color 200ms ease;
}

.value-card__text {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-body);
	transition: color 200ms ease;
}

/* Same hover as the sector cards (client feedback via Avi, 2026-09-23):
   the card fills teal and the text turns white. Mouse only, so a tap on a
   phone never leaves a card stuck in the hovered state. */
@media (hover: hover) and (pointer: fine) {
	.value-card:hover {
		background: var(--color-primary);
		border-color: var(--color-primary);
	}

	.value-card:hover .value-card__title,
	.value-card:hover .value-card__text {
		color: var(--color-on-dark);
	}
}

@media (min-width: 768px) {
	.block-about-intro {
		padding-block: 96px;
	}

	.block-video__media.block-about-intro__media {
		margin-block-start: 56px;
	}

	.block-about-intro__media .block-video__play img {
		width: 72px;
	}

	.values-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Odd count: the last card spans the row. */
	.value-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1100px) {
	.block-about-intro {
		padding-block: 124px 116px;
	}

	.block-video__media.block-about-intro__media {
		margin-block-start: 82px;
	}

	.values-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 24px;
		margin-block-start: 48px;
	}

	.value-card,
	.value-card:last-child:nth-child(odd) {
		grid-column: span 2;
	}

	/* A last row of two: each takes half. A last row of one: full width. */
	.value-card:nth-child(3n+1):nth-last-child(2),
	.value-card:nth-child(3n+1):nth-last-child(2) + .value-card {
		grid-column: span 3;
	}

	.value-card:nth-child(3n+1):last-child {
		grid-column: 1 / -1;
	}
}

/* About 3: "L'excellence en recrutement" — Figma 492:3567 (868 tall). */
.block-excellence {
	padding-block: 64px;
	background: #f8f8f8;
}

.block-excellence__heading {
	margin: 0 0 32px;
	font-size: clamp(30px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	text-align: center;
	color: var(--color-title);
}

.block-excellence__accent {
	color: var(--color-primary);
}

.excellence-cards {
	display: grid;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.excellence-card__media {
	aspect-ratio: 410 / 283;
	overflow: hidden;
	border-radius: 16px;
	background: #d9d9d9;
}

.excellence-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma crop of the team photo (1st card) sits slightly left of centre. */
.excellence-card:first-child .excellence-card__media img {
	object-position: 6% center;
}

.excellence-card__title {
	margin: 24px 0 0;
	font-size: 20px;
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.excellence-card__text {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-title);
}

@media (min-width: 768px) {
	.block-excellence {
		padding-block: 96px;
	}

	.excellence-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 24px;
	}
}

@media (min-width: 1100px) {
	.block-excellence {
		padding-block: 136px;
	}

	.block-excellence__heading {
		margin-block-end: 48px;
	}

	.excellence-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.excellence-card__title {
		margin-block-start: 29px;
	}
}

/* About 4: team groups — Figma 397:10118 (3558 tall at 1600): white, 36px
   top/bottom, each group py 48 with a 48 gap under its heading (Bold 48 /
   1.24, #090909 + teal, or purple for the executive group), rows 48 apart,
   cards 302w 24 apart, rows centred (the admin row of 3 sits in the middle). */
.about-team {
	padding-block: 24px;
	background: var(--color-bg);
}

.block-team--group,
.brand-green .block-team--group {
	padding-block: 32px;
	background: transparent;
}

.block-team__heading-em {
	color: var(--color-primary);
}

.block-team--accent-purple .block-team__heading-em {
	color: var(--color-purple);
}

.block-team--accent-purple .team-card:focus-visible {
	outline-color: var(--color-purple);
}

.block-team--group .team-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px 16px;
}

.block-team--group .team-grid > li {
	width: calc((100% - 16px) / 2);
}

@media (min-width: 768px) {
	.block-team--group,
	.brand-green .block-team--group {
		padding-block: 40px;
	}
}

@media (min-width: 1100px) {
	.about-team {
		padding-block: 36px;
	}

	.block-team--group,
	.brand-green .block-team--group {
		padding-block: 48px;
	}

	.block-team--group .team-grid {
		gap: 48px 24px;
	}

	.block-team--group .team-grid > li {
		width: calc((100% - 72px) / 4);
	}

	.block-team--group .team-card {
		min-height: 0;
	}
}

/* ==========================================================================
   Médias (page-media.php) — Figma file B 398:11283
   ========================================================================== */

/* Hero 398:11284: same short hero, heading 148px above the bottom edge. */
@media (min-width: 1100px) {
	.site-main--media .block-hero--short .block-hero__content,
	.site-main--tests .block-hero--short .block-hero__content,
	.site-main--faq .block-hero--short .block-hero__content {
		padding-block-end: 148px;
	}
}

/* Médias 2: video grid — Figma 712:3200 (1317 tall at 1600). */
.block-videos {
	padding-block: 56px 64px;
	background: var(--color-bg);
}

.video-grid {
	display: grid;
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.video-card[hidden] {
	display: none;
}

.video-card__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: #000;
	text-decoration: none;
}

.video-card__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 411 / 231;
	overflow: hidden;
	border-radius: 12px;
	background: #e7e7e8;
}

.video-card__thumb img:first-child {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Some channel thumbnails have thin black bands baked in (up to 12px of
	   720, top and bottom): zoom slightly so they fall outside the card. */
	transform: scale(1.035);
}

.video-card__play {
	position: relative;
	width: 48px;
	height: auto;
}

.video-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/* 15% below Figma's 22px (Avi). */
	font-size: clamp(15.3px, 13.6px + 0.34vw, 18.7px);
	font-weight: var(--fw-medium);
	line-height: 1.12;
}

/* No hover effect (Avi); keyboard focus underlines the title. */
.video-card__link:focus-visible .video-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.video-card__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: 12px;
}

.video-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-block-start: 40px;
}

.video-pager[hidden] {
	display: none;
}

.video-pager__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 4px;
	border: 1px solid #e7e7e8;
	border-radius: 4px;
	background: var(--color-bg);
	cursor: pointer;
}

.video-pager__btn:disabled,
.video-pager__btn.is-disabled {
	opacity: 0.4;
	cursor: default;
}

a.video-pager__btn {
	color: var(--color-body);
	text-decoration: none;
}

.video-pager__status {
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-body);
}

/* Pop-up player: 16:9 frame, same backdrop as the team pop-up. */
.video-modal {
	width: min(1100px, calc(100% - 32px));
	max-height: calc(100dvh - 32px);
	padding: 48px 16px 16px;
	overflow: auto;
	border: 0;
	border-radius: 16px;
	/* Brand teal (Avi: the darker green didn't match the brand). */
	background: var(--color-primary);
	color: var(--color-on-dark);
}

.video-modal::backdrop {
	background: rgba(9, 9, 9, 0.8);
}

.video-modal__close {
	position: absolute;
	top: 6px;
	right: 10px;
	padding: 4px 8px;
	border: 0;
	background: none;
	font-size: 32px;
	line-height: 1;
	color: var(--color-on-dark);
	cursor: pointer;
}

.video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	background: #000;
}

.video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-modal__title {
	margin: 12px 4px 0;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.3;
}

@media (min-width: 768px) {
	.block-videos {
		padding-block: 96px;
	}

	.video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}

	.video-modal {
		padding: 56px 24px 24px;
	}
}

@media (min-width: 1100px) {
	.block-videos {
		padding-block: 124px;
	}

	.video-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px 24px;
	}

	.video-pager {
		margin-block-start: 48px;
	}
}

/* ==========================================================================
   Split block (shared, components/split-block.php) — Figma Tests
   psychométriques 460:3490 (plain) and 492:3581 (card).
   ========================================================================== */
.block-split {
	padding-block: 64px;
	background: var(--color-bg);
}

.block-split__inner {
	display: grid;
	gap: 48px;
}

.split-block {
	display: grid;
	gap: 32px;
	align-items: center;
}

.split-block__heading {
	margin: 0;
	font-size: clamp(28px, 22px + 1vw, 36px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.split-block__accent {
	color: var(--color-primary);
}

.split-block__body {
	margin-block-start: 24px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-title);
}

.split-block__body p {
	margin: 0 0 24px;
}

.split-block__body p:last-child {
	margin-block-end: 0;
}

.split-block__button {
	margin-block-start: 24px;
	letter-spacing: -0.01em;
}

.split-block__media {
	overflow: hidden;
	border: 1px solid var(--color-on-dark);
	border-radius: 16px;
	aspect-ratio: 628 / 480;
}

.split-block__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--split-focus-x, 50%) center;
}

@media (min-width: 768px) {
	.block-split {
		padding-block: 96px;
	}
}

@media (min-width: 1100px) {
	.block-split {
		padding-block: 124px;
	}

	.block-split__inner {
		gap: 72px;
	}

	.split-block--plain {
		grid-template-columns: 571px 628px;
		justify-content: space-between;
		gap: 81px;
	}
}

/* Card variant (492:3581): grey card, image left 478 x 445 radius 12. */
.split-block--card {
	padding: 16px;
	border: 1px solid #e7e7e8;
	border-radius: 24px;
	background: #f8f8f8;
}

.split-block--card .split-block__media {
	order: -1;
	aspect-ratio: 478 / 445;
	border: 0;
	border-radius: 12px;
}

.split-block--card .split-block__body {
	color: var(--color-body);
}

@media (min-width: 768px) {
	.split-block--card {
		padding: 24px;
	}
}

@media (min-width: 1100px) {
	.split-block--card {
		grid-template-columns: 478px minmax(0, 660px);
		gap: 40px;
	}
}

/* Executive FAQ on a green page (FAQ page): purple accent word + icons. */
.block-faq--purple .block-faq__heading-accent {
	color: var(--color-purple);
}

/* FAQ page (Figma 504:4326): questions run up to 586px before wrapping,
   closer to the icon than on the service pages. */
.site-main--faq .accordion--faq .accordion__title {
	gap: 8px;
}

.site-main--faq .accordion--faq .accordion__title > span {
	max-width: 586px;
}

/* FAQ page: the executive FAQ sits on the #f8f8f8 band (Figma 504:4326). */
.site-main--faq #recrutement-de-cadres {
	background: #f8f8f8;
}

/* Executive team group (About): the pop-up title is purple too. */
.block-team--accent-purple .team-modal__title {
	color: var(--color-purple);
}

/* ==========================================================================
   Phone typography: headings flow as sentences
   Figma's line breaks are authored for desktop widths. On a phone they land
   mid-phrase, so every hard break inside a heading is dropped and the text
   wraps on its own, balanced so no line is left with a single word.
   Client feedback via Avi, 2026-09-23.
   ========================================================================== */

@media (max-width: 767px) {
	h1 br,
	h2 br,
	h3 br,
	.block-hero__subheading br,
	.sectors__intro br,
	.sector-card__desc br,
	.block-lead__title br,
	.block-video__heading br,
	.split-block__heading br {
		display: none;
	}

	/* Accent halves that sit on their own line on desktop join the sentence.
	   The service card titles keep their two-line stack: there the faded and
	   solid halves are a designed lock-up, not a broken sentence. */
	.block-team__heading-accent,
	.block-video__heading-dark,
	.block-match__heading-dark,
	.block-why__heading-dark,
	.block-media-text__heading-dark,
	.sectors--services .sectors__heading-accent {
		display: inline;
	}

	h1,
	h2,
	h3,
	.block-hero__heading,
	.block-lead__title {
		text-wrap: balance;
	}
}

/* Service child pages (Recrutement de personnel, Recrutement exécutif) use
   the full photo hero, which is sized for the homepage. On phones the client
   wants it as short as the other pages' hero (360px), so the band is reduced
   and the copy tightened. Client feedback via Avi, 2026-09-23. */
@media (max-width: 767px) {
	.site-main--recruitment > .block-hero:first-child,
	.site-main--executive > .block-hero:first-child {
		min-height: 360px;
	}

	.site-main--recruitment > .block-hero:first-child .block-hero__content,
	.site-main--executive > .block-hero:first-child .block-hero__content {
		padding-block: 120px 32px;
	}

	.site-main--recruitment > .block-hero:first-child .block-hero__subheading,
	.site-main--executive > .block-hero:first-child .block-hero__subheading {
		margin-block-start: 20px;
	}
}

/* Static cards show the arrow cursor, not the text caret: nothing inside them
   is meant to be selected or clicked (the sector cards set this already).
   Avi, 2026-09-23 — carry it across every card design. */
.value-card,
.excellence-card,
.stat-card,
.why-stat,
.tcard {
	cursor: default;
}

/* ==========================================================================
   Nous joindre — Figma 404:12292 (1015 tall at 1600)
   White band py 124. Address column left (312w), form card right (725w).
   Mobile first: one column, card first is not wanted, so the address stays
   on top and the card follows.
   ========================================================================== */

.block-contact {
	padding-block: 64px;
	background: var(--color-bg);
}

.block-contact__inner {
	display: grid;
	gap: 40px;
}

.block-contact__details {
	display: grid;
	gap: 48px;
	align-content: start;
}

.block-contact__info {
	display: grid;
	gap: 24px;
}

.block-contact__heading {
	margin: 0;
	font-size: clamp(32px, 22px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.block-contact__accent {
	color: var(--brand-accent, var(--color-primary));
}

.block-contact__address {
	margin: 0;
	font-size: 16px;
	font-style: normal;
	line-height: 1.48;
	color: var(--color-body);
}

.block-contact__rows {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.block-contact__rows li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-body);
}

.block-contact__rows .icon {
	--icon-size: 14px;
}

.block-contact__rows a {
	color: inherit;
	text-decoration: none;
}

.block-contact__rows a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.block-contact__social {
	display: grid;
	gap: 16px;
	justify-items: start;
}

.block-contact__social-title {
	margin: 0;
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	color: var(--color-title);
}

.block-contact__social-list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.block-contact__social-link {
	display: flex;
	padding: 8px;
	border-radius: 90px;
	background: var(--brand-accent, var(--color-primary));
	color: var(--color-on-dark);
}

.block-contact__social-link .icon {
	--icon-size: 14px;
}

.block-contact__card {
	padding: 28px 20px;
	border-radius: 24px;
	background: var(--color-bg);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.block-contact__form-title {
	margin: 0 0 24px;
	font-size: clamp(22px, 19px + 0.5vw, 28px);
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-body);
}

@media (min-width: 768px) {
	.block-contact {
		padding-block: 96px;
	}

	.block-contact__card {
		padding: 36px 30px;
	}
}

@media (min-width: 1100px) {
	.block-contact {
		padding-block: 124px;
	}

	.block-contact__inner {
		grid-template-columns: 312px minmax(0, 725px);
		justify-content: space-between;
		gap: 64px;
	}

	.block-contact__details {
		padding-block: 24px;
	}
}

/* ==========================================================================
   Candidature spontanée — Figma 403:11867 (1072 tall at 1600)
   Centred heading, then one full-width form card (1264w, padding 36).
   ========================================================================== */

.block-application {
	padding-block: 64px;
	background: var(--color-bg);
}

.block-application__heading {
	margin: 0 0 32px;
	font-size: clamp(28px, 20px + 1.6vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
	text-align: center;
}

.block-application__accent {
	color: var(--brand-accent, var(--color-primary));
}

/* ---- Candidate / employer switch (Candidature spontanée) ----
   Two options side by side where the section title used to be. Both are
   visible on purpose: a closed dropdown hides the employer route, and an
   employer who misses it fills in the candidate form, which is the lead
   mixing this is meant to solve. Pill sits on the page, not in the card. */

.audience-switch {
	position: relative;
	display: flex;
	justify-content: center;
	max-width: 760px;
	margin: 0 auto 32px;
	padding: 6px;
	border-radius: 999px;
	background: #f1f1f2;
	isolation: isolate;
}

/* The selected state is one pill that slides between the two options,
   rather than one background switching off as another switches on. */
.audience-switch::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 6px;
	inset-inline-start: 6px;
	width: calc(50% - 6px);
	border-radius: 999px;
	background: var(--brand-accent, var(--color-primary));
	transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.audience-switch[data-active="employer"]::before {
	transform: translateX(100%);
}

.audience-switch__option {
	flex: 1 1 50%;
	min-width: 0;
	min-height: 56px;
	/* Split around the optical nudge like every other control: Campton
	   reserves descender space above the baseline. */
	padding: calc(14px + var(--optical-nudge)) 24px calc(14px - var(--optical-nudge));
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--color-body);
	font-family: inherit;
	font-size: 17px;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: color 260ms ease;
}

.audience-switch__option.is-active {
	color: var(--color-on-dark);
}

.audience-switch__option:focus-visible {
	outline: 2px solid var(--brand-accent, var(--color-primary));
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.audience-switch::before {
		transition: none;
	}
}

/* Stacked on a phone, so the pill slides down instead of across. */
@media (max-width: 599px) {
	.audience-switch {
		flex-direction: column;
		gap: 4px;
		border-radius: 20px;
	}

	.audience-switch::before {
		inset-inline: 6px;
		width: auto;
		height: calc(50% - 8px);
		border-radius: 16px;
	}

	.audience-switch[data-active="employer"]::before {
		transform: translateY(calc(100% + 8px));
	}

	.audience-switch__option {
		flex: 0 0 auto;
		min-height: 52px;
		font-size: 16px;
	}
}

.block-application__card {
	padding: 24px 20px;
	border-radius: 24px;
	background: var(--color-bg);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Figma pads this form's inputs 16px all round (58 tall), not the 12/16 of
   the lead forms. */
.st-amour-form .apply-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
.st-amour-form .apply-form select,
.st-amour-form .apply-form textarea {
	padding: calc(16px + var(--optical-nudge-lg)) 16px calc(16px - var(--optical-nudge-lg));
}

.st-amour-form .apply-form select {
	padding-inline-end: 48px;
}

.apply-form .st-select__button {
	padding: calc(16px + var(--optical-nudge-lg)) 48px calc(16px - var(--optical-nudge-lg)) 16px;
}

/* ---- CV drop zone ---- */

.apply-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 152px;
	padding: 16px;
	border: 1px solid #e7e7e8;
	border-radius: 8px;
	background: #f8f8f8;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.apply-drop.is-dragover {
	border-color: var(--color-primary);
	background: var(--color-teal-light);
}

/* CF7 wraps every control in a relative span; here that span is stretched
   over the zone so the input inside it can fill the whole box. */
.apply-drop .wpcf7-form-control-wrap {
	position: absolute;
	inset: 0;
	display: block;
}

/* The real file input covers the zone so a click or a drop lands on it. */
.st-amour-form .apply-drop input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.apply-drop__icon {
	width: 46px;
	height: 36px;
	background: url("../images/icons/upload-cloud.svg") center / contain no-repeat;
}

.apply-drop__text {
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-subtitle);
}

.apply-drop__link {
	font-weight: var(--fw-medium);
	color: var(--color-primary);
}

.apply-drop__file {
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-title);
	word-break: break-all;
}

/* ---- Checkbox row (Figma: 24px box, 14px label) ---- */

.apply-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.apply-checks .wpcf7-list-item {
	margin: 0;
}

.apply-checks .wpcf7-list-item-label,
.apply-checks label {
	font-size: 14px;
	line-height: 1.48;
	color: var(--color-subtitle);
}

.apply-checks a {
	font-weight: var(--fw-medium);
	color: var(--color-primary);
	text-decoration: none;
}

.apply-checks a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.st-amour-form .apply-checks input[type="checkbox"] {
	width: 24px;
	height: 24px;
	margin: 0 8px 0 0;
	border: 1.5px solid #e7e7e8;
	border-radius: 6px;
	background: var(--color-bg);
	vertical-align: -6px;
	accent-color: var(--color-primary);
}

@media (min-width: 768px) {
	.block-application {
		padding-block: 96px;
	}

	.block-application__card {
		padding: 36px;
	}

	.block-application__heading {
		margin-block-end: 48px;
	}
}

@media (min-width: 1100px) {
	.block-application {
		padding-block: 124px;
	}

	/* Figma insets the card 8px inside the 1280 container. */
	.block-application__card {
		margin-inline: 8px;
	}
}

/* ==========================================================================
   Legal pages and sitemap (not in Figma; site style, Avi 2026-09-23)
   Compact hero with no photo, then one readable column of text.
   ========================================================================== */

/* No photo here, so the title is centred in the band below the fixed
   header rather than hanging off its bottom edge (Avi, 2026-09-23). */
.site-main--legal .block-hero--short,
.site-main--sitemap .block-hero--short {
	min-height: 280px;
}

.site-main--legal .block-hero__content,
.site-main--sitemap .block-hero__content {
	padding-block: 150px 40px;
}

.block-legal,
.block-sitemap {
	padding-block: 56px;
	background: var(--color-bg);
}

.legal-prose {
	/* Full container width (Avi, 2026-09-23): the capped column left too
	   much empty space on the right. */
	max-width: none;
	font-size: 16px;
	line-height: 1.62;
	color: var(--color-body);
}

.legal-prose > * + * {
	margin-block-start: 16px;
}

.legal-prose h2 {
	margin-block: 48px 8px;
	font-size: clamp(22px, 19px + 0.6vw, 28px);
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-title);
}

.legal-prose h2:first-child {
	margin-block-start: 0;
}

.legal-prose h3 {
	margin-block: 32px 8px;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.32;
	color: var(--color-primary);
}

.legal-prose ul,
.legal-prose ol {
	margin-block-start: 16px;
	padding-inline-start: 22px;
}

.legal-prose li + li {
	margin-block-start: 8px;
}

.legal-prose a {
	color: var(--color-primary);
	text-decoration: none;
}

.legal-prose a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.legal-prose strong {
	font-weight: var(--fw-semibold);
	color: var(--color-title);
}

.legal-updated {
	margin-block-start: 48px;
	padding-block-start: 16px;
	border-block-start: 1px solid #e7e7e8;
	font-size: 14px;
	color: var(--color-subtitle);
}

/* ---- Sitemap: centred cards ---- */

.block-sitemap__intro {
	max-width: 720px;
	margin-inline: auto;
	margin-block-end: 40px;
	text-align: center;
}

.block-sitemap__cols {
	display: grid;
	gap: 24px;
	max-width: 1120px;
	margin-inline: auto;
}

.block-sitemap__col {
	padding: 28px 24px;
	border: 1px solid #e7e7e8;
	border-radius: 16px;
	background: #f8f8f8;
	text-align: center;
}

.block-sitemap__title {
	margin: 0 0 20px;
	padding-block-end: 16px;
	border-block-end: 1px solid #e7e7e8;
	font-size: 20px;
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-primary);
}

.block-sitemap__list,
.block-sitemap__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.block-sitemap__list > li + li {
	margin-block-start: 14px;
	padding-block-start: 14px;
	border-block-start: 1px solid #ececec;
}

.block-sitemap__list a {
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-body);
	text-decoration: none;
}

.block-sitemap__list > li > a {
	font-size: 17px;
	font-weight: var(--fw-semibold);
	color: var(--color-title);
}

/* Children sit under their parent as small teal-dotted rows. */
.block-sitemap__list .sub-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin-block-start: 10px;
}

.block-sitemap__list .sub-menu a {
	position: relative;
	padding-inline-start: 14px;
	font-size: 15px;
	color: var(--color-subtitle);
}

.block-sitemap__list .sub-menu a::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	transform: translateY(-50%);
}

.block-sitemap__list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (min-width: 768px) {
	.block-legal,
	.block-sitemap {
		padding-block: 80px;
	}

	.site-main--legal .block-hero--short,
	.site-main--sitemap .block-hero--short {
		min-height: 320px;
	}

	.site-main--legal .block-hero__content,
	.site-main--sitemap .block-hero__content {
		padding-block: 180px 50px;
	}

	/* Auto-fit so two columns centre when a third (the blog) is empty. */
	.block-sitemap__cols {
		grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
		justify-content: center;
		gap: 24px;
	}
}

@media (min-width: 1100px) {
	.site-main--legal .block-hero--short,
	.site-main--sitemap .block-hero--short {
		min-height: 360px;
	}

	.site-main--legal .block-hero__content,
	.site-main--sitemap .block-hero__content {
		padding-block: 210px 60px;
	}

	.block-legal,
	.block-sitemap {
		padding-block: 96px;
	}

	.block-sitemap__cols {
		grid-template-columns: repeat(auto-fit, minmax(300px, 352px));
		justify-content: center;
		align-items: start;
		gap: 32px;
	}

	.block-sitemap__col {
		padding: 36px 28px;
	}
}

/* ==========================================================================
   Blog cards — Figma 503:4106
   The posts have no photographs, so the "image" is generated from the title
   on the brand backdrop: purple before the colon, teal after (Avi).
   ========================================================================== */

.post-art {
	/* The art is its own container, so the title scales with the box and
	   every card keeps the same proportions (Avi, 2026-09-23). */
	container-type: inline-size;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	background:
		radial-gradient(60% 80% at 22% 45%, rgba(151, 106, 190, 0.28), rgba(151, 106, 190, 0) 70%),
		radial-gradient(55% 75% at 72% 55%, rgba(62, 147, 133, 0.22), rgba(62, 147, 133, 0) 70%),
		url("../images/blog/card-waves.svg") center / cover no-repeat,
		#f6f6f7;
}

.post-art__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* A real featured image fills the same box the generated art would. */
.post-art--photo {
	display: block;
	container-type: normal;
	background: #f6f6f7;
}

.post-art--photo .post-art__photo {
	position: absolute;
	inset: 0;
	display: block;
}

/* On the article page a photo gets a 1500 x 900 (5:3) box, not the wide band
   the generated artwork uses: a featured image often carries its own text
   (the client's banners do), and the band cut the top and bottom off. */
.block-article__art .post-art.post-art--photo {
	/* The client's banners are 1500 x 900, so the article shows a 5:3 box:
	   a 1500x900 image fits it exactly and nothing is cropped. */
	aspect-ratio: 1500 / 900;
	background: none;
}

.block-article__art .post-art--photo .post-art__photo {
	border-radius: 12px;
}

.post-art__photo-title {
	margin: 24px 0 0;
	font-size: clamp(28px, 22px + 1.6vw, 44px);
	font-weight: var(--fw-bold);
	line-height: 1.16;
	color: var(--color-title);
}

.post-art__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4cqi;
	width: 100%;
	padding: 6cqi;
	text-align: center;
}

.post-art__lead {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(13px, 6.24cqi, 53px);
	font-weight: 700;
	line-height: 1.16;
	color: var(--color-primary);
	text-wrap: balance;
}

.post-art__rest {
	max-width: 80%;
	font-size: clamp(9px, 2.46cqi, 20px);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	color: var(--color-title);
	text-wrap: balance;
}

/* ---- Card shell ---- */

.post-card {
	container-type: inline-size;
	border: 1px solid #e7e7e8;
	border-radius: 12px;
	background: var(--color-bg);
}

.post-card__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 16px;
	color: inherit;
	text-decoration: none;
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
}

.post-card__title {
	font-size: 18px;
	font-weight: var(--fw-semibold);
	line-height: 1.24;
	color: var(--color-title);
}

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-subtitle);
}

.post-card__author {
	font-weight: var(--fw-medium);
	color: var(--color-primary);
}

.post-card__read {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.post-card__read .icon {
	--icon-size: 12px;
}

.post-card__excerpt {
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-subtitle);
}

.post-card__more {
	margin-block-start: auto;
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Feature card (729 x 609 in Figma) ---- */

.post-card--feature .post-card__link {
	gap: 24px;
}

.post-card--feature .post-art {
	aspect-ratio: 695 / 356;
}

.post-card--grid .post-art {
	aspect-ratio: 377 / 220;
}

.post-card--feature .post-card__title {
	font-size: clamp(20px, 18px + 0.4vw, 24px);
	font-weight: var(--fw-bold);
}

.post-card--feature .post-card__excerpt {
	font-size: 18px;
}

/* ---- Side card (519 x 187): art beside the text ---- */

.post-card--side .post-card__link {
	flex-direction: row;
	gap: 24px;
}

.post-card--side .post-card__art {
	flex: 0 0 200px;
}

.post-card--side .post-art {
	aspect-ratio: 200 / 153;
}

.post-card--side .post-card__body {
	justify-content: space-between;
	gap: 16px;
}

/* ==========================================================================
   Blog index — Figma 503:4067
   ========================================================================== */

.block-blog {
	padding-block: 56px;
	background: var(--color-bg);
}

.block-blog__heads {
	display: grid;
	gap: 8px;
	margin-block-end: 24px;
}

.block-blog__head {
	margin: 0;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.24;
	color: var(--color-title);
}

.block-blog__top {
	display: grid;
	gap: 32px;
}

.block-blog__side {
	display: grid;
	gap: 24px;
	align-content: start;
}

.block-blog__grid {
	display: grid;
	gap: 24px;
	margin-block-start: 40px;
}

.block-blog__empty {
	margin: 40px 0 0;
	color: var(--color-subtitle);
}

/* ---- Category dropdown (Figma 503:4100) ---- */

.blog-filter {
	display: grid;
	gap: 12px;
	margin-block-start: 48px;
}

.blog-filter__label {
	margin: 0;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.24;
	color: var(--color-title);
}

.blog-filter .st-select {
	width: 100%;
}

.blog-filter .st-select__button {
	height: 54px;
	padding: calc(12px + var(--optical-nudge-lg)) 48px calc(12px - var(--optical-nudge-lg)) 24px;
	font-size: 18px;
	letter-spacing: -0.18px;
	background-position: right 20px center;
}

.blog-filter__select {
	width: 100%;
	height: 54px;
	padding: calc(12px + var(--optical-nudge-lg)) 48px calc(12px - var(--optical-nudge-lg)) 24px;
	border: 1px solid #e7e7e8;
	border-radius: 8px;
	background: var(--color-bg) url("../images/icons/angle-down-grey.svg") right 20px center / 24px 24px no-repeat;
	font: inherit;
	font-size: 18px;
	letter-spacing: -0.18px;
	color: var(--color-subtitle);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.blog-filter__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

/* Pagination uses the shared pager from the Médias grid (Figma 503:4264):
   an arrow either side of "1 de 5". */

.block-blog__pager {
	margin-block-start: 40px;
}

@media (min-width: 768px) {
	.block-blog {
		padding-block: 80px;
	}

	.block-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.blog-filter {
		grid-template-columns: auto minmax(0, 706px);
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		margin-block-start: 56px;
	}
}

@media (min-width: 1100px) {
	.block-blog {
		padding-block: 124px;
	}

	.block-blog__heads {
		grid-template-columns: 729px minmax(0, 1fr);
		gap: 32px;
	}

	.block-blog__top {
		grid-template-columns: 729px minmax(0, 1fr);
	}

	.block-blog__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 23px;
		margin-block-start: 48px;
	}
}

/* Figma fixes the card text: two lines of title, three of excerpt, so the
   grid stays on a tidy baseline whatever the article is called. */
.post-card__title,
.post-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card--grid .post-card__title,
.post-card--feature .post-card__title {
	-webkit-line-clamp: 2;
}

.post-card--side .post-card__title {
	-webkit-line-clamp: 3;
}

.post-card__excerpt {
	-webkit-line-clamp: 3;
}

/* The generated art keeps its own limits so a long title cannot overflow. */
.post-art__lead {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.post-art__rest {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* The grid fades while the next page of articles is fetched. */
.block-blog.is-loading [data-blog-results] {
	opacity: 0.45;
	transition: opacity 120ms ease;
	pointer-events: none;
}

/* ==========================================================================
   Single article (not in Figma; site style, Avi 2026-09-23)
   The generated card art opens the page, then the meta row and the text.
   ========================================================================== */

.block-article {
	padding-block: 40px 56px;
	background: var(--color-bg);
}

.block-article__art {
	border-radius: 12px;
	overflow: hidden;
}

.block-article__art .post-art {
	/* A wide band on desktop, taller on phones so the title still breathes. */
	aspect-ratio: 3 / 2;
	border-radius: 12px;
}

@media (min-width: 768px) {
	.block-article__art .post-art {
		aspect-ratio: 16 / 7;
	}
}

@media (min-width: 1100px) {
	.block-article__art .post-art {
		aspect-ratio: 1280 / 420;
	}
}

/* The artwork carries the article's own H1, so it is a little larger here
   and free to run to four lines. */
.block-article__art .post-art__lead {
	margin: 0;
	-webkit-line-clamp: 4;
	font-size: clamp(24px, 4.4cqi, 56px);
}

.block-article__art .post-art__rest {
	margin: 0;
	max-width: 70%;
	font-size: clamp(12px, 1.7cqi, 22px);
}

.block-article__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.block-article__intro {
	/* Everything on the article lines up with the artwork: one column
	   the width of the container (Avi, 2026-09-23). */
	margin-block-start: 28px;
}

.block-article__category {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--color-teal-light);
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 1.4;
	color: var(--color-primary);
	text-decoration: none;
}

.block-article__title {
	margin: 0;
	font-size: clamp(28px, 22px + 1.4vw, 44px);
	font-weight: var(--fw-bold);
	line-height: 1.16;
	color: var(--color-title);
}

.block-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-subtitle);
}

.block-article__author {
	font-weight: var(--fw-medium);
	color: var(--color-primary);
}

.block-article__read {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.block-article__read .icon {
	--icon-size: 12px;
}

.block-article__body {
	margin-block-start: 40px;
}

.block-article__back {
	margin-block-start: 48px;
	padding-block-start: 24px;
	border-block-start: 1px solid #e7e7e8;
}

.block-article__back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
	text-decoration: none;
}

.block-article__back .icon {
	--icon-size: 20px;
}

/* ---- Related articles ---- */

.block-related {
	padding-block: 56px;
	background: #f8f8f8;
}

.block-related__heading {
	margin: 0 0 24px;
	font-size: clamp(22px, 19px + 0.6vw, 28px);
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-title);
}

.block-related__grid {
	display: grid;
	gap: 24px;
}

@media (min-width: 768px) {
	.block-article {
		padding-block: 48px 72px;
	}

	.block-related {
		padding-block: 72px;
	}

	.block-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.block-article {
		padding-block: 56px 96px;
	}

	.block-related {
		padding-block: 96px;
	}

	.block-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 23px;
	}
}

/* ==========================================================================
   Search and generic archives: the blog's cards on a plain band
   ========================================================================== */

.site-main--results .block-hero--short {
	min-height: 280px;
}

.site-main--results .block-hero__content {
	padding-block: 150px 40px;
}

.block-results {
	padding-block: 56px;
	background: var(--color-bg);
}

.block-results__intro {
	margin-block-end: 32px;
}

.block-results__grid {
	display: grid;
	gap: 24px;
}

.block-results__empty {
	margin: 0;
	color: var(--color-subtitle);
}

.post-card--plain .post-card__link {
	gap: 12px;
	padding: 24px;
}

@media (min-width: 768px) {
	.site-main--results .block-hero--short {
		min-height: 320px;
	}

	.site-main--results .block-hero__content {
		padding-block: 180px 50px;
	}

	.block-results {
		padding-block: 80px;
	}

	.block-results__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.site-main--results .block-hero--short {
		min-height: 360px;
	}

	.site-main--results .block-hero__content {
		padding-block: 210px 60px;
	}

	.block-results {
		padding-block: 96px;
	}

	.block-results__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 23px;
	}
}

/* ==========================================================================
   Single job posting (not in Figma; site style, Avi 2026-09-23)
   ========================================================================== */

/* The teal band and the body grid carry their own padding, so the shared
   .block spacing would only open a white gap under the header. */
.block-job {
	padding-block: 0;
}

.block-job__head {
	padding-block: 40px 48px;
	background: var(--color-teal-dark);
	color: var(--color-on-dark);
}

.block-job__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-end: 24px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	color: var(--color-on-dark);
	text-decoration: none;
	opacity: 0.85;
}

.block-job__back .icon {
	--icon-size: 20px;
}

.block-job__title {
	max-width: 900px;
	margin: 0;
	font-size: clamp(28px, 22px + 1.6vw, 44px);
	font-weight: var(--fw-bold);
	line-height: 1.16;
	color: var(--color-on-dark);
}

.block-job__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.48;
	color: rgba(255, 255, 255, 0.82);
}

.block-job__place {
	font-weight: var(--fw-medium);
	color: var(--color-teal-light);
}

.block-job__cta {
	margin-block-start: 28px;
	background: var(--color-bg);
	border-color: var(--color-bg);
	color: var(--color-primary);
}

.block-job__body {
	display: grid;
	gap: 40px;
	padding-block: 48px 64px;
}

.job-card {
	padding: 28px 24px;
	border: 1px solid #e7e7e8;
	border-radius: 16px;
	background: #f8f8f8;
}

.job-card__title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-title);
}

.job-card__facts {
	display: grid;
	gap: 14px;
	margin: 0;
}

.job-card__row {
	display: grid;
	gap: 2px;
}

.job-card__row dt {
	font-size: 14px;
	color: var(--color-subtitle);
}

.job-card__row dd {
	margin: 0;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.48;
	color: var(--color-title);
}

.job-card__recruiter {
	margin-block-start: 24px;
	padding-block-start: 20px;
	border-block-start: 1px solid #e7e7e8;
}

.job-card__recruiter-label {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--color-subtitle);
}

.job-card__recruiter-name {
	margin: 0;
	font-size: 16px;
	font-weight: var(--fw-semibold);
	color: var(--color-title);
}

.job-card__recruiter-mail {
	font-size: 15px;
	color: var(--color-primary);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.job-card__cta {
	width: 100%;
	margin-block-start: 24px;
	justify-content: center;
}

/* ---- Apply form ---- */

.block-apply {
	padding-block: 56px;
	background: #f8f8f8;
}

.block-apply__card {
	padding: 28px 20px;
	border-radius: 24px;
	background: var(--color-bg);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.block-apply__heading {
	margin: 0;
	font-size: clamp(22px, 19px + 0.6vw, 28px);
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-title);
}

.block-apply__intro {
	margin: 8px 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-subtitle);
}

.block-apply__success,
.block-apply__error {
	margin: 0 0 8px;
	padding: 16px 20px;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.48;
}

.block-apply__success {
	background: var(--color-teal-light);
	color: var(--color-primary);
}

.block-apply__error {
	background: #fdecec;
	color: #a12525;
}

.apply-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lead-form__hint {
	font-size: 14px;
	color: var(--color-subtitle);
}

@media (min-width: 768px) {
	.block-job__head {
		padding-block: 48px 56px;
	}

	.block-apply {
		padding-block: 80px;
	}

	.block-apply__card {
		padding: 36px 30px;
	}
}

@media (min-width: 1100px) {
	.block-job__head {
		padding-block: 56px 64px;
	}

	.block-job__body {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 64px;
		padding-block: 64px 96px;
	}

	.block-job__aside {
		position: sticky;
		top: 120px;
		align-self: start;
	}

	.block-apply {
		padding-block: 96px;
	}
}

/* Safety net: a description pasted into the CRM with its own font rules
   still renders in the site's typography. */
.block-job__description [style],
.legal-prose [style] {
	font-family: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
	background: none !important;
}

/* ==========================================================================
   Emplois disponibles (Figma 0D68dTyOaCqJ0CkJZsVTwE 712:3191)
   411px filter sidebar + 775px listing column, 95px gutter at 1600.
   ========================================================================== */

.block-jobs {
	padding-block: 48px 64px;
	background: var(--color-bg);
}

.block-jobs__inner {
	display: grid;
	gap: 32px;
}

.block-jobs.is-loading .jobs-listing__results {
	opacity: .45;
	transition: opacity .2s ease;
}

/* ---- Sidebar ---- */

.jobs-sidebar {
	display: grid;
	gap: 24px;
	align-content: start;
}

.jobs-filters {
	display: grid;
	gap: 24px;
	padding: 24px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
}

.jobs-filters__field {
	display: grid;
	gap: 8px;
}

.jobs-filters__label {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-body);
}

/* The native control is replaced by the site's listbox (main.js), which
   copies these dimensions; both are sized here so no-JS keeps the shape. */
.jobs-filters select,
.jobs-filters .st-select__button {
	width: 100%;
	height: 54px;
	/* Fixed height, so the top padding alone carries the optical nudge and
	   shifts the label by half its value. */
	padding: calc(var(--optical-nudge-lg) * 2) 16px 0;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-subtitle);
	background: var(--color-bg);
}

.jobs-filters__clear,
.jobs-filters__apply {
	justify-content: flex-start;
	width: 100%;
	height: var(--btn-h);
	/* The French label is long: keep it on one line inside the 411px card. */
	padding-inline: 16px;
	white-space: nowrap;
}

.jobs-categories {
	padding: 24px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: #f8f8f8;
}

.jobs-categories__title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.12;
	color: var(--color-heading);
}

.jobs-categories__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jobs-categories__item + .jobs-categories__item {
	border-top: 1px solid var(--color-border);
}

.jobs-categories__item a {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding-block: 16px;
	color: var(--color-body);
	text-decoration: none;
}

.jobs-categories__name {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.48;
}

.jobs-categories__item.is-active .jobs-categories__name {
	font-weight: 600;
	color: var(--color-teal);
}

.jobs-categories__count {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	color: #fff;
	background: var(--color-teal);
}

/* ---- Listing column ---- */

.jobs-listing__head {
	display: grid;
	gap: 24px;
	margin-bottom: 24px;
}

.jobs-listing__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.12;
	color: var(--color-heading);
}

.jobs-listing__sort {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
}

.jobs-sort {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	/* Not a .button, so it carries the optical nudge itself. */
	padding: calc(12px + var(--optical-nudge-lg)) 24px calc(12px - var(--optical-nudge-lg));
	border: 1px solid var(--color-teal);
	border-radius: 8px;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.48;
	letter-spacing: -0.18px;
	color: var(--color-teal);
	background: var(--color-bg);
	text-decoration: none;
}

.jobs-sort.is-active {
	color: #fff;
	background: var(--color-teal);
}

.jobs-listing__count {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-subtitle);
}

.jobs-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.job-row {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding: 24px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	text-decoration: none;
}

.job-row__info {
	display: grid;
	gap: 9px;
}

/*
 * The position leads in teal with the region as a quieter line underneath
 * (client via Avi, 2026-09-25). Figma had it the other way round.
 */
.job-row__place {
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-subtitle);
}

.job-row__title {
	font-weight: 600;
	font-size: 20px;
	line-height: 1.12;
	color: var(--color-teal);
}

.job-row__arrow {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: url("../images/arrow-right-circle.svg") center / contain no-repeat;
}

.jobs-listing__empty {
	margin: 0;
	padding: 32px 24px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	color: var(--color-body);
	background: #f8f8f8;
}

/* Rows revealed by "Voir tous les postes ouverts" ease in one after the other. */
.jobs-list__item.is-revealing {
	animation: jobs-reveal 420ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms) both;
}

@keyframes jobs-reveal {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jobs-list__item.is-revealing {
		animation: none;
	}
}

.jobs-listing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

.jobs-listing__alert,
.jobs-listing__more {
	height: var(--btn-h);
}

/* The button's own display would otherwise win over the hidden attribute once every job is shown. */
.jobs-listing__more[hidden] {
	display: none;
}

/* ---- Job alert pop-up ---- */

.jobs-alert {
	width: min(560px, calc(100vw - 32px));
	/*
	 * The dialog itself never scrolls and never clips: it sizes to the
	 * content up to the height of the screen, and the panel inside takes
	 * the scrolling when a phone cannot fit the form (client, 2026-09-25,
	 * the pop-up was cut off with a scrollbar over its own corner).
	 */
	max-height: calc(100dvh - 48px);
	/*
	 * No position of our own: a modal dialog is centred by the browser with
	 * position:fixed, and overriding that drops it into the page flow, so
	 * opening it scrolled the page to where it sits (Avi, 2026-09-25). It
	 * is still the containing block for the close button.
	 */
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 24px;
	background: var(--color-bg);
}

/* Only the open dialog lays out: a display value on the element itself
   would override the browser's own display:none and print the form in the
   page (Avi, 2026-09-25). */
.jobs-alert[open] {
	display: flex;
}

.jobs-alert::backdrop {
	background: rgba(9, 9, 9, .6);
}

.jobs-alert__inner {
	flex: 1;
	max-height: calc(100dvh - 48px);
	padding: 32px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.jobs-alert__title {
	margin: 0 0 24px;
	padding-right: 40px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.12;
	color: var(--color-heading);
}

.jobs-alert__close {
	position: absolute;
	z-index: 1;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	color: var(--color-body);
	background: #f1f1f1;
	cursor: pointer;
}

@media (min-width: 768px) {
	.block-jobs {
		padding-block: 72px 96px;
	}

	.jobs-alert__inner {
		padding: 36px 30px;
	}
}

@media (min-width: 1100px) {
	.block-jobs {
		padding-block: 124px;
	}

	.block-jobs__inner {
		grid-template-columns: 411px minmax(0, 1fr);
		gap: 95px;
		align-items: start;
	}

	.jobs-listing__head {
		margin-bottom: 32px;
	}
}

/* Narrow phones: the long French label may wrap rather than overflow. */
@media (max-width: 420px) {
	.jobs-filters__clear,
	.jobs-filters__apply {
		height: auto;
		min-height: var(--btn-h);
		padding-block: 12px;
		white-space: normal;
	}
}

/* ==========================================================================
   Blog index below the two-column breakpoint (Avi, 2026-09-23)
   The two headings sat together above both cards, and the "most read"
   cards kept their desktop art-beside-text shape. Stack everything: the
   "most read" heading belongs after the latest article, and its cards read
   like the grid cards, one per row with the art on top.
   ========================================================================== */

@media (max-width: 1099px) {
	.block-blog__latest {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	/* Flatten the two wrappers so the four pieces can be reordered. */
	.block-blog__heads,
	.block-blog__top {
		display: contents;
	}

	.block-blog__heads {
		margin-block-end: 0;
	}

	.block-blog__latest .block-blog__head {
		order: 1;
	}

	.block-blog__latest .post-card--feature {
		order: 2;
	}

	.block-blog__latest .block-blog__head--side {
		order: 3;
		margin-block-start: 16px;
	}

	.block-blog__side {
		order: 4;
	}

	.post-card--side .post-card__link {
		flex-direction: column;
		gap: 16px;
	}

	.post-card--side .post-card__art {
		flex: 0 0 auto;
	}

	.post-card--side .post-art {
		aspect-ratio: 377 / 220;
	}

	.post-card--side .post-card__title {
		-webkit-line-clamp: 2;
	}
}

/* ==========================================================================
   Sector pages (not in Figma; built from the site's own patterns)
   Hero with two CTAs, intro beside the positions list, recruiters, the
   three reasons, then the areas of recruitment.
   ========================================================================== */

.block-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: 28px;
}

/* ---- Intro + positions ---- */

.block-industry-intro {
	padding-block: 56px;
	background: var(--color-bg);
}

.block-industry-intro__inner {
	display: grid;
	gap: 40px;
}

.block-industry-intro__heading {
	margin: 0 0 20px;
	font-size: clamp(28px, 22px + 1.4vw, 40px);
	font-weight: var(--fw-bold);
	line-height: 1.16;
	color: var(--color-title);
}

.block-industry-intro__text p:last-child {
	margin-bottom: 0;
}

/* The positions now sit under the copy, so they read as a full-width
   block rather than a sidebar (Avi, 2026-09-23). */
.block-industry-intro__positions {
	margin-top: 36px;
	padding: 28px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: #f8f8f8;
}

.block-industry-intro__lead {
	margin: 0 0 16px;
	font-weight: var(--fw-semibold);
	color: var(--color-title);
}

.industry-positions {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.industry-positions li {
	position: relative;
	padding-left: 26px;
	line-height: 1.6;
	color: var(--color-body);
}

/* A static mask is safe here: nothing animates (Chrome flicker rule). */
.industry-positions li::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 14px;
	height: 14px;
	background-color: var(--color-teal);
	-webkit-mask: url("../images/angle-right-small.svg") center / contain no-repeat;
	mask: url("../images/angle-right-small.svg") center / contain no-repeat;
}

/* ---- Three reasons ---- */

.block-industry-reasons {
	padding-block: 56px;
	background: #f8f8f8;
}

.block-industry-reasons__header {
	max-width: 760px;
	margin-bottom: 32px;
}

.block-industry-reasons__heading {
	margin: 0 0 12px;
	font-size: clamp(26px, 21px + 1.2vw, 36px);
	font-weight: var(--fw-bold);
	line-height: 1.16;
	color: var(--color-title);
}

.block-industry-reasons__lead {
	margin: 0;
	color: var(--color-body);
}

.block-industry-reasons__grid {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reason-card {
	padding: 28px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: var(--color-bg);
	cursor: default;
	transition: background-color 200ms ease, border-color 200ms ease;
}

/* Mouse only: a tap on a phone leaves the card stuck in the hovered
   state, so the colour change is desktop-only (Avi, 2026-09-24). */
@media (hover: hover) and (pointer: fine) {
	.reason-card:hover {
		background: var(--color-primary);
		border-color: var(--color-primary);
	}

	.reason-card:hover .reason-card__number,
	.reason-card:hover .reason-card__title,
	.reason-card:hover .reason-card__text {
		color: var(--color-on-dark);
	}
}

.reason-card__number {
	display: block;
	margin-bottom: 12px;
	transition: color 200ms ease;
	font-size: 20px;
	font-weight: var(--fw-bold);
	color: var(--color-teal);
}

.reason-card__title {
	margin: 0 0 8px;
	transition: color 200ms ease;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.24;
	color: var(--color-title);
}

.reason-card__text {
	margin: 0;
	color: var(--color-body);
	transition: color 200ms ease;
}

/* ---- Areas of recruitment ---- */

.block-industry-areas {
	padding-block: 56px;
	background: var(--color-bg);
}

.block-industry-areas__header {
	max-width: 760px;
	margin-bottom: 28px;
}

.block-industry-areas__heading {
	margin: 0 0 12px;
	font-size: clamp(26px, 21px + 1.2vw, 36px);
	font-weight: var(--fw-bold);
	line-height: 1.16;
	color: var(--color-title);
}

.block-industry-areas__lead {
	margin: 0;
	color: var(--color-body);
}

.block-industry-areas__grid {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.area-card {
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	font-weight: var(--fw-medium);
	line-height: 1.4;
	color: var(--color-title);
	background: var(--color-bg);
}

/* ---- Closing CTA band ---- */

.block-industry-cta {
	padding-block: 48px 64px;
	background: var(--color-bg);
}

.block-industry-cta__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

/* ---- Hub ---- */

.block-industries-intro {
	padding-block: 56px;
	background: var(--color-bg);
}

.block-industries-intro__header {
	max-width: 820px;
	margin-bottom: 36px;
}

.block-industries-intro__heading {
	margin: 0 0 16px;
	font-size: clamp(28px, 22px + 1.4vw, 40px);
	font-weight: var(--fw-bold);
	line-height: 1.16;
	color: var(--color-title);
}

.block-industries-intro__text p:last-child {
	margin-bottom: 0;
}

.block-industries-intro__points {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.point-card {
	position: relative;
	padding: 32px 28px 28px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: var(--color-bg);
	box-shadow: 0 4px 15px rgba(0, 0, 0, .06);
}

.point-card__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border-radius: 50%;
	font-size: 15px;
	font-weight: var(--fw-bold);
	color: #fff;
	background: var(--color-teal);
}

.point-card__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.24;
	color: var(--color-title);
}

.point-card__text {
	margin: 0;
	color: var(--color-body);
}

.block-industries-grid {
	padding-block: 56px;
	background: #f8f8f8;
}

.block-industries-grid__header {
	max-width: 760px;
	margin-bottom: 32px;
}

.block-industries-grid__heading {
	margin: 0 0 12px;
	font-size: clamp(26px, 21px + 1.2vw, 36px);
	font-weight: var(--fw-bold);
	line-height: 1.16;
	color: var(--color-title);
}

.block-industries-grid__lead {
	margin: 0;
	color: var(--color-body);
}

.block-industries-grid__grid {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.industry-card {
	display: flex;
}

/* Same hover as the homepage sector grid: the card fills teal and every
   piece of it turns white. */
.industry-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: var(--color-bg);
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.industry-card__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.24;
	color: var(--color-teal);
	transition: color 200ms ease;
}

.industry-card__tagline {
	margin: 0 0 24px;
	color: var(--color-body);
	transition: color 200ms ease;
}

.industry-card__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: auto;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--color-teal);
	transition: color 200ms ease, background-color 200ms ease;
}

.industry-card__link:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	text-decoration: none;
}

.industry-card__link:focus-visible .industry-card__title,
.industry-card__link:focus-visible .industry-card__tagline,
.industry-card__link:focus-visible .industry-card__arrow {
	color: var(--color-on-dark);
}

.industry-card__link:focus-visible .industry-card__arrow {
	background: rgba(255, 255, 255, .15);
}

/* Mouse only: a tap on a phone leaves the card stuck in the hovered
   state, so the colour change is desktop-only (Avi, 2026-09-24). */
@media (hover: hover) and (pointer: fine) {
	.industry-card__link:hover {
		background: var(--color-primary);
		border-color: var(--color-primary);
		text-decoration: none;
	}

	.industry-card__link:hover .industry-card__title,
	.industry-card__link:hover .industry-card__tagline,
	.industry-card__link:hover .industry-card__arrow {
		color: var(--color-on-dark);
	}

	.industry-card__link:hover .industry-card__arrow {
		background: rgba(255, 255, 255, .15);
	}
}

@media (min-width: 768px) {
	.block-industry-reasons__grid,
	.block-industries-intro__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.block-industry-areas__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.block-industries-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.block-industry-intro,
	.block-industry-reasons,
	.block-industry-areas,
	.block-industries-intro,
	.block-industries-grid {
		padding-block: 96px;
	}

	.block-industry-intro__inner {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 64px;
	}

	.block-industry-intro__positions {
		columns: 2;
		column-gap: 32px;
	}

	.block-industry-intro__lead {
		column-span: all;
	}

	.block-industry-areas__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.block-industries-grid__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.block-industry-cta {
		padding-block: 64px 96px;
	}
}

/* A ghost button over a photo hero needs the photo's contrast, not the
   teal it uses on white bands. */
.block-hero__actions .button--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, .8);
	background: rgba(255, 255, 255, .08);
}

.block-hero__actions .button--ghost:hover,
.block-hero__actions .button--ghost:focus-visible {
	background: rgba(255, 255, 255, .18);
}

/* ---- Sector page: the recruiters panel beside the intro ---- */

.advisor-panel {
	padding: 28px 24px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: var(--color-bg);
	box-shadow: 0 4px 15px rgba(0, 0, 0, .06);
}

.advisor-panel__title {
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
	font-size: 20px;
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-title);
}

/* A flex column, not a grid: grid rows were stretching to fill the column
   and spacing the two cards a screen apart. */
.advisor-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The button also carries the team-card classes so it can reuse the shared
   bio pop-up; these undo the grid card's column layout. */
.advisor-card {
	display: flex;
	flex-direction: row;
	height: auto;
	gap: 16px;
	align-items: center;
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 12px;
	background: none;
	text-align: left;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.advisor-card:focus-visible {
	background: var(--color-teal-light, #d8e9e7);
}

@media (hover: hover) and (pointer: fine) {
	.advisor-card:hover {
		background: var(--color-teal-light, #d8e9e7);
	}
}

.advisor-card__photo {
	display: block;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	aspect-ratio: auto;
	margin-block-end: 0;
	overflow: hidden;
	border-radius: 50%;
	background: #f1f1f1;
}

.advisor-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.advisor-card__text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.advisor-card__name {
	font-size: 16px;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	color: var(--color-title);
}

.advisor-card__role {
	margin-block-start: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-subtitle);
}

/* ---- Polish on the existing sector sections ---- */

/* A teal rule under the section headings, the same accent the rest of the
   site uses, so the page reads in chapters instead of one long run. */
.block-industry-intro__heading,
.block-industry-reasons__heading,
.block-industry-areas__heading,
.block-industries-intro__heading,
.block-industries-grid__heading {
	position: relative;
	padding-bottom: 18px;
}

.block-industry-intro__heading::after,
.block-industry-reasons__heading::after,
.block-industry-areas__heading::after,
.block-industries-intro__heading::after,
.block-industries-grid__heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-teal);
}

.block-industry-intro__positions .industry-positions li {
	break-inside: avoid;
}

/* The areas read as tiles rather than plain boxes: a teal edge picks them
   out and deepens on hover. */
.area-card {
	position: relative;
	padding-left: 24px;
	overflow: hidden;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.area-card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var(--color-teal);
}

@media (hover: hover) and (pointer: fine) {
	.area-card:hover {
		border-color: var(--color-teal);
		background: #f5faf9;
	}
}

/* The recruiters follow the reader down the intro. The column keeps the
   row's full height so the panel has somewhere to travel; the panel is what
   sticks, and it stays its own height rather than stretching. */
@media (min-width: 1100px) {
	.advisor-panel {
		position: sticky;
		top: 120px;
	}
}

/* "Trier par poste" wrapped to two lines in the 2-up sort row on phones. */
@media (max-width: 767px) {
	.jobs-sort {
		padding-inline: 12px;
		font-size: 16px;
		white-space: nowrap;
	}
}

/* Spam trap: present for a bot, never for a person or a screen reader. */
.st-amour-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Phones: type two to three points smaller (client feedback, 2026-10-08:
   "the titles and some text are big and this takes a lot of scrolling").
   Headings -3, sub-headings -2, reading text 18 -> 16 and 16 -> 14. Form
   controls stay at 16px (iOS zooms the page into any field below that), and
   so do the menu, the generated blog-card artwork and the pop-up bios.
   Declared last with !important so no component rule below 600px wins.
   ========================================================================== */
@media (max-width: 599px) {
	.block-hero__heading {
		font-size: 26px !important;
	}

	/* 32 -> 29 */
	.sectors__heading, .sectors__heading-accent,
	.block-services__heading, .block-services__heading-accent,
	.service-card__title, .service-card__title-muted,
	.testimonials__heading, .testimonials__heading-accent,
	.block-match__heading, .block-match__heading-dark,
	.block-faq__heading, .block-faq__heading-accent,
	.block-lead__heading, .block-lead__accent,
	.block-media-text__heading, .block-media-text__heading-dark,
	.block-contact__heading, .block-contact__accent,
	.stat-card__value {
		font-size: 29px !important;
	}

	/* Services and Executive Search show the sectors title smaller already. */
	.page-template-page-services .sectors__heading,
	.page-template-page-services .sectors__heading-accent,
	.page-template-page-executive-search .sectors__heading,
	.page-template-page-executive-search .sectors__heading-accent,
	.block-industries-grid__heading {
		font-size: 23px !important;
	}

	/* 30 -> 27 */
	.block-about__heading, .block-about__heading-accent,
	.block-newsletter__heading,
	.block-team__heading, .block-team__heading-accent, .block-team__heading-em,
	.block-about-intro__heading, .block-about-intro__accent,
	.block-excellence__heading, .block-excellence__accent,
	.block-cta-image__heading, .block-cta-image__heading-accent,
	.block-video__heading, .block-video__heading-dark,
	.why-stat--glass .why-stat__value {
		font-size: 27px !important;
	}

	/* 28 -> 25 */
	.block-why__heading, .block-why__heading-dark,
	.image-banner__heading,
	.block-steps__heading, .block-steps__accent,
	.split-block__heading, .split-block__accent,
	.block-industries-intro__heading,
	.block-job__title,
	.page-template-page-recruitment .block-hero__heading {
		font-size: 25px !important;
	}

	.why-stat--teal .why-stat__value,
	.why-stat--white .why-stat__value {
		font-size: 33px !important;
	}

	/* 24 / 22 -> 21 / 20 */
	.jobs-categories__title,
	.jobs-listing__title,
	.jobs-alert__title {
		font-size: 21px !important;
	}

	.block-lead__title,
	.block-apply__heading,
	.block-contact__form-title,
	.block-related__heading,
	.legal-prose > h2 {
		font-size: 20px !important;
	}

	/* 20 -> 18 */
	.sector-card__title,
	.value-card__title,
	.excellence-card__title,
	.point-card__title,
	.industry-card__title,
	.job-row__title,
	.job-card__title,
	.blog-filter__label,
	.block-blog__head,
	.legal-prose > h4 {
		font-size: 18px !important;
	}

	/* 18 -> 16 */
	.link-arrow,
	.sectors__intro,
	.tcard__quote > p,
	.tcard__org,
	.block-contact__social-title,
	.accordion__num,
	.site-footer__heading,
	.post-card__excerpt {
		font-size: 16px !important;
	}

	/* 16 -> 14 reading text, eyebrows and labels */
	.block-hero__subheading,
	.block-about__eyebrow, .sectors__eyebrow, .block-services__eyebrow,
	.testimonials__eyebrow, .block-why__eyebrow, .block-faq__eyebrow,
	.block-about__text > p,
	.stat-card__label,
	.block-services__intro,
	.service-card__list > li,
	.block-newsletter__text,
	.block-match__body, .block-match__list > li,
	.image-banner__text,
	.block-team__intro,
	.block-why__intro, .why-stat__label,
	.block-lead__body,
	.block-cta-image__body,
	.block-video__text > p,
	.block-steps__body > p,
	.block-media-text__body > p,
	.block-about-intro__text > p,
	.value-card__text, .excellence-card__text,
	.split-block__body > p,
	.block-contact__address,
	.block-apply__intro,
	.apply-drop__text, .apply-drop__link,
	.point-card__text, .industry-card__tagline,
	.block-industries-intro__text > p,
	.jobs-filters__label, .jobs-categories__name, .jobs-sort, .jobs-listing__count,
	.block-job__back, .block-job__place, .block-job__meta > span,
	.job-card__row > dd, .job-card__recruiter-name,
	.legal-prose > p, .legal-prose li,
	.post-card__date, .post-card__author, .post-card__read, .post-card__more,
	.block-article__date, .block-article__author, .block-article__read,
	.block-article__back > a,
	.video-pager__status,
	.tcard__more,
	.accordion__panel-inner > p, .accordion__panel-inner li,
	.lead-form__label, .lead-form__note,
	.site-footer__address, .site-footer__contact > li, .site-footer__copyright,
	.site-footer a {
		font-size: 14px !important;
	}

	.accordion__title > span {
		font-size: 15px !important;
	}

	.sector-card__desc {
		font-size: 14px !important;
	}
}

/* CTA buttons: the label stays on ONE line on a phone. The font scales with
   the viewport (about 14px at 375), the arrow shrinks a little, and below
   350px the arrow goes so even the longest French label fits. */
@media (max-width: 599px) {
	html body .button:not(.site-header__cta):not(.jobs-sort),
	html body .service-card__button,
	html body .newsletter-form__button {
		justify-content: center;
		gap: 6px !important;
		padding-inline: 12px !important;
		font-size: clamp(12px, 3.7vw, 15px) !important;
		letter-spacing: -0.01em !important;
		white-space: nowrap !important;
	}

	html body .button:not(.site-header__cta) .icon,
	html body .service-card__button .icon {
		flex: none;
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 349px) {
	html body .button:not(.site-header__cta) .icon,
	html body .service-card__button .icon {
		display: none;
	}
}

/* Form titles are centred on every form card (client, 2026-10-10). */
.block-lead__title,
.block-contact__form-title,
.block-apply__heading,
.block-apply__intro,
.jobs-alert__title {
	text-align: center;
}

/* ==========================================================================
   Section type, one standard site-wide (Raffi's Loom + Avi, 2026-10-14)
   Headings keep each section's own size (a single 48 for all was tried and
   reverted, Avi 2026-10-14: too big). Text under a heading is 17 (short intros and longer column copy alike,
   Avi 2026-10-14; 18 was tried first); all of it black
   (#090909, no greys), line height 1.6. Text on dark banners stays white.
   Phones keep their own sizes from the phone type-scale block above
   (those rules are !important).
   ========================================================================== */
/* Two headings set their dark half in grey; black like every other. */
main :is(.block-about__heading, .block-cta-image__heading) {
	color: var(--color-title);
}

/* This heading was grey on Services and Exec; black like every other. */
main .sectors--services .sectors__heading {
	color: var(--color-title);
}

main :is(
	.sectors__intro,
	.block-services__intro,
	.block-why__intro,
	.block-video__text,
	.block-steps__body,
	.block-lead__body,
	.block-team__intro,
	.block-cta-image__body,
	.block-about-intro__text,
	.block-industry-intro__lead,
	.block-industry-reasons__lead,
	.block-industry-areas__lead,
	.block-industries-intro__text
),
main :is(
	.sectors__intro,
	.block-services__intro,
	.block-why__intro,
	.block-video__text,
	.block-steps__body,
	.block-lead__body,
	.block-team__intro,
	.block-cta-image__body,
	.block-about-intro__text,
	.block-industries-intro__text
) p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-title);
}

main :is(
	.block-about__text,
	.block-media-text__body,
	.block-match__body,
	.split-block__body,
	.block-industry-intro .legal-prose
),
main :is(
	.block-about__text,
	.block-media-text__body,
	.block-match__body,
	.split-block__body,
	.block-industry-intro .legal-prose
) :is(p, li),
main .block-match__list li {
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-title);
}

/* Phones: text under headings 16. !important because the phone type-scale block above uses it. */
@media (max-width: 599px) {
	main :is(
		.sectors__intro,
		.block-services__intro,
		.block-why__intro,
		.block-video__text,
		.block-steps__body,
		.block-lead__body,
		.block-team__intro,
		.block-cta-image__body,
		.block-about-intro__text,
		.block-industry-intro__lead,
		.block-industry-reasons__lead,
		.block-industry-areas__lead,
		.block-industries-intro__text
	),
	main :is(
		.sectors__intro,
		.block-services__intro,
		.block-why__intro,
		.block-video__text,
		.block-steps__body,
		.block-lead__body,
		.block-team__intro,
		.block-cta-image__body,
		.block-about-intro__text,
		.block-industries-intro__text
	) p {
		font-size: 16px !important;
	}

	main :is(
		.block-about__text,
		.block-media-text__body,
		.block-match__body,
		.split-block__body,
		.block-industry-intro .legal-prose
	),
	main :is(
		.block-about__text,
		.block-media-text__body,
		.block-match__body,
		.split-block__body,
		.block-industry-intro .legal-prose
	) :is(p, li),
	main .block-match__list li {
		font-size: 16px !important;
	}
}

/* ---- Thank-you page (page-templates/page-thank-you.php) ---- */
.block-thanks {
	padding-block: 140px 110px;
	text-align: center;
	background: var(--color-bg);
}

.block-thanks__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 760px;
	margin-inline: auto;
}

.block-thanks__icon {
	display: block;
	width: 72px;
	height: 72px;
	margin-bottom: 28px;
	border-radius: 50%;
	background-color: var(--brand-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 38px;
}

.block-thanks__title {
	margin: 0 0 20px;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15;
	color: var(--color-heading);
}

.block-thanks__text {
	margin: 0 0 32px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-title);
}

.block-thanks__text p {
	margin: 0 0 14px;
}

.block-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}