/* ==========================================================================
   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) */

	/* ---- 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: 12px;
	/* 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 */
	--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: 11px;
		--btn-px: 22px;
		--btn-min-h: 44px;
		--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: 10px;
		--btn-px: 18px;
		--btn-gap: 8px;
		--btn-min-h: 44px;     /* WCAG touch target floor */
		--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: 600;
	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-semibold);
	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 {
	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%);
}

.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__viewport:hover .block-trust-bar__track {
	animation-play-state: paused;
}

.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);
}

/* A logo whose artwork is tonal (a globe with light bands, an emblem with a
   figure knocked out in white) loses that shape entirely when flattened, so
   it is desaturated and lightened to sit with the others instead. */
.block-trust-bar__mark--tonal {
	filter: grayscale(1) opacity(0.55);
}

@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) + 2px + var(--optical-nudge)) calc(var(--btn-py) + 2px - 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) + 2px + var(--optical-nudge)) calc(var(--btn-py) + 2px - 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;
	height: 50px;
	margin-block-start: 40px;
	padding-inline: 24px;
	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;
	}
}

/* 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): same block, tighter top (56)
   after the media section, 146 below; the heading's second line is #090909. */
@media (min-width: 1100px) {
	.site-main--recruitment .block-why {
		padding-block: 56px 146px;
	}
}

.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;
	}
}

/* ==========================================================================
   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) + 2px + var(--optical-nudge)) calc(var(--btn-py) + 2px - 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) + 2px + var(--optical-nudge)) calc(var(--btn-py) + 2px - var(--optical-nudge));
	font-weight: var(--fw-semibold);
	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);
}

.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) + 2px + var(--optical-nudge)) calc(var(--btn-py) + 2px - var(--optical-nudge));
	border: 0;
	font-weight: var(--fw-semibold);
	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__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) + 2px + var(--optical-nudge)) calc(var(--btn-py) + 2px - 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) + 2px + var(--optical-nudge)) calc(var(--btn-py) + 2px - 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) + 2px + var(--optical-nudge)) calc(var(--btn-py) + 2px - 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);
}

.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;
}

.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: 54px;
	/* 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;
}

.jobs-listing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

.jobs-listing__alert,
.jobs-listing__more {
	height: 54px;
}

/* ---- 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: 54px;
		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;
}

/* ==========================================================================
   US LANDING PAGES
   Figma file ZJtkiaSIfDjHuD6cWVSfia: green 124:6569, purple 235:1205.
   One brand per install (ST_AMOUR_BRAND), so these read --brand-* tokens
   and work in either colour without a per-page rule.
   ========================================================================== */

/* Both gradients are derived from the Figma node's own gradientTransform
   matrix and stops, not from the generated code, whose angle was out by
   5.5 degrees. Figma paints the gradient across the full 1080 frame with
   the white nav on top of it; these values are re-projected onto the band
   we actually paint (1080 less the 97px nav), so the diagonal lands where
   the design puts it. */
.lp {
	--lp-band: linear-gradient(123.96deg, #255850 -2.05%, #32766a 36.67%, #255850 60.06%);
}

.brand-purple.lp {
	--lp-band: linear-gradient(124.71deg, #321a34 12.13%, #643369 43.22%, #321a34 76.27%);
}

/* Canada hero (Figma 426:1593): the node's four stops and gradientTransform
   worked out the same way, projected onto the 1018px we paint (970 + the
   48px strip that sits over the band here). */
.lp {
	--lp-hero-band: linear-gradient(135.96deg, #193b35 14.21%, #32766a 51.48%, #3e9385 67.8%, #193b35 101.49%);
}

/* ---- Header: wordmark and one button, nothing to click away with ---- */

.lp-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: var(--header-row-py);
}

/* The header is fixed over the hero band, so the band clears it: top strip
   + nav row (97 in Figma) + the 112 above the card. */
.lp-hero {
	padding-block-start: calc(var(--topbar-h) + 101px);
}

.lp [id^="lp-"] {
	scroll-margin-top: 110px;
}

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

.lp-header .lang-switch__current {
	font-size: 18px;
	letter-spacing: -0.18px;
}

.lp-header__cta.button {
	min-height: 46px;
	padding: calc(10px + var(--optical-nudge)) 20px calc(10px - var(--optical-nudge));
	font-size: 18px;
	font-weight: var(--fw-medium);
	letter-spacing: -0.18px;
	white-space: nowrap;
}

.site-logo--manufacturing {
	--logo-ratio: 3.614;
	--logo-w: 216px;
}

/* ---- Hero ---- */

.lp-hero {
	background: var(--lp-hero-band, var(--lp-band));
	color: var(--color-on-dark);
}

.lp-hero__inner {
	display: grid;
	grid-template-columns: 651fr 604fr;
	gap: 25px;
	align-items: center;
	/* Read off the nodes: nav 97, card 604x790 at y209, card bottom 999 in
	   a 1080 frame. So the band is 983 with 112 above the card and 81
	   below it, not symmetric. */
	padding-block: 60px 65px;
}

.lp-hero__pitch {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.lp-hero__badge {
	margin: 0;
	padding: calc(4px + var(--optical-nudge)) 12px calc(4px - var(--optical-nudge));
	border: 1px solid rgba(229, 217, 230, 0.1);
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(25px);
	font-size: 14px;
	line-height: 1.44;
	color: rgba(255, 255, 255, 0.8);
}

.lp-hero__heading {
	margin: 0;
	/* The global h1 rule sets a dark colour, which beat the white inherited
	   from the band and left the second half of the headline black. */
	color: var(--color-on-dark);
	font-size: clamp(38px, 22px + 2.625vw, 64px); /* 64 at 1600, per Figma */
	font-weight: var(--fw-bold);
	line-height: 1.12;
	text-wrap: pretty;
}

/* The design leads soft and lands hard, so the *marked* half is the faded one. */
.lp-hero__soft {
	color: rgba(255, 255, 255, 0.7);
}

/* Reading copy is 1.6, not Figma's 1.48: the client chose the looser
   setting on the main site and it carries here. Card small print and other
   UI text stay at 1.48, same carve-out as the main site. */
.lp-hero__lede {
	margin: 0;
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.lp-hero__body {
	margin: 0;
	max-width: 555px;
	font-size: 18px;
	line-height: 1.6;
}

/* ---- Lead form card ---- */

.lp-form {
	display: flex;
	flex-direction: column;
	gap: 24px; /* Figma: every child of the card is 24 apart. */
	padding: 36px 30px;
	border-radius: 24px;
	background: var(--color-bg);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	color: var(--color-body);
}

.lp-form__head {
	text-align: left;
}

.lp-form__heading {
	margin: 0 0 12px; /* Figma: 36 from the heading to the first label */
	font-size: 28px;
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-body);
}

.lp-form__sub {
	margin: 0 auto;
	max-width: 462px;
	font-size: 14px;
	line-height: 1.48;
}

/* Figma: 544x132, padding 16 all round. */
.lp-form .lead-form textarea {
	height: 132px;
	padding: calc(16px + var(--optical-nudge-lg)) 16px calc(16px - var(--optical-nudge-lg));
}

.lp-form__note {
	margin: 0;
	padding-inline: 24px;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
	color: var(--color-muted, #6f7076);
	text-align: center;
	text-wrap: pretty;
}

.lp-form .lead-form__label {
	min-height: 24px;
}

@media (max-width: 1099px) {
	.lp-hero__inner {
		grid-template-columns: 1fr;
		gap: 48px;
		padding-block: 64px;
	}
}

@media (max-width: 767px) {
	.lp-header__bar {
		gap: 8px;
	}

	.lp-header__cta.button {
		min-height: 40px;
		padding-inline: 10px;
		font-size: 13px;
		letter-spacing: -0.13px;
	}

	.lp-header__actions {
		gap: 0;
	}

	.lp-header .site-logo {
		--logo-scale: 0.66;
	}

	.lp-header .lang-switch__current {
		padding: 10px 6px;
		font-size: 14px;
		letter-spacing: -0.14px;
	}

	.lp-hero__inner {
		padding-block: 48px;
	}

	.lp-form {
		padding: 24px 20px;
	}
}

/* ---- Stat cards (Figma 146:570 / 235:1360) ---- */

.lp-stats {
	padding-block: 48px 0;
	background: var(--color-bg);
}

.lp-stats__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-stats__card {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden; /* the streaks bleed off the top right */
	min-height: 178px;
	padding: 24px 35px;
	border: 1px solid #e7e7e8;
	border-radius: 16px;
	background: var(--color-bg);
}

.lp-stats__card--filled {
	border-color: transparent;
	background: var(--lp-stat-fill);
	color: var(--color-on-dark);
}

.lp {
	--lp-stat-fill: var(--color-teal-mid);
}

.brand-purple.lp {
	--lp-stat-fill: #643369;
}

/* Two blurred streaks, masked so the colour follows the brand. Static, so a
   mask is safe here (see the Chrome flicker rules). */
.lp-stats__streak {
	position: absolute;
	background: var(--brand-accent, var(--color-primary));
	opacity: 0.07;
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-image: var(--lp-mask);
	mask-image: var(--lp-mask);
}

/* The exported SVGs carry a 15px blur margin, so each sits 15 back from the
   node position Figma reports. */
.lp-stats__streak--a {
	top: -32px;
	left: 90px;
	width: 300px;
	height: 153px;
}

.lp-stats__streak--b {
	top: -28px;
	left: 273px;
	width: 204px;
	height: 109px;
}

.lp-stats__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.lp-stats__number {
	font-size: 40px;
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--brand-accent, var(--color-primary));
}

.lp-stats__card--filled .lp-stats__number {
	color: var(--color-on-dark);
}

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

.lp-stats__card--filled .lp-stats__label {
	color: var(--color-on-dark);
}

@media (max-width: 1099px) {
	.lp-stats__row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.lp-stats {
		padding-block: 32px 0;
	}

	.lp-stats__row {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.lp-stats__card {
		min-height: 0;
		padding: 24px;
	}
}

/* ---- The challenge + fee card (Figma 218:1449 / 235:1635) ---- */

.lp-challenge {
	padding-block: 136px;
	background: var(--color-bg);
}

.lp-challenge__top {
	display: grid;
	grid-template-columns: 628fr 520fr;
	gap: 133px;
	align-items: start;
}

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

.lp-challenge__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
}

.lp-challenge__heading {
	margin: 0;
	max-width: 543px;
	font-size: clamp(32px, 20px + 1.75vw, 48px); /* 48 at 1600, per Figma */
	font-weight: var(--fw-bold);
	line-height: 1.16;
	color: var(--color-title);
}

.lp-challenge__accent {
	color: var(--brand-accent, var(--color-primary));
}

.lp-challenge__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.6; /* reading copy, per the main site */
	color: #000;
}

/* The stat note: a hairline brand border on the grey field. */
.lp-challenge__note {
	/* One paragraph, not two flex items: in Figma the note is a single text
	   node with a larger figure at the start, so the second line wraps back
	   under the figure instead of being indented past it. */
	display: block;
	margin: 12px 0 0;
	/* Figma: a 4px stroke on the LEFT only, inside the box, so the content
	   still starts 16 in (12 of padding after the 4px border). */
	padding: calc(14px + var(--optical-nudge)) 16px calc(14px - var(--optical-nudge)) 12px;
	border: 0;
	border-inline-start: 4px solid var(--brand-accent, var(--color-primary));
	border-radius: 6px;
	background: #f8f8f8;
	font-size: 16px;
	line-height: 1.48;
	letter-spacing: -0.01em;
	color: var(--color-title);
}

.lp-challenge__note-lead {
	display: inline;
	font-size: 24px;
	font-weight: var(--fw-medium);
	line-height: 1.48;
	letter-spacing: -0.01em;
	color: var(--brand-accent, var(--color-primary));
}

/* ---- Fee card ---- */

.lp-fee {
	display: flex;
	flex-direction: column;
	gap: 42px;
	min-height: 548px;
	padding: 39px 49px;
	border-radius: 16px;
	background: var(--lp-fee-bg);
	color: var(--color-on-dark);
}

.lp {
	--lp-fee-bg: var(--color-teal-dark);
	--lp-fee-soft: #8bbeb6;
	--lp-fee-softer: #b2d4ce;
	--lp-fee-tick: #65a99d;
}

.brand-purple.lp {
	--lp-fee-bg: #321a34;
	--lp-fee-soft: #b18cb5;
	--lp-fee-softer: #cbb3cd;
}

.lp-fee__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lp-fee__eyebrow {
	margin: 0;
	font-size: 16px;
	line-height: 1.48;
	text-transform: uppercase;
	color: var(--lp-fee-soft);
}

.lp-fee__value {
	margin: 0;
	font-size: 72px;
	font-weight: var(--fw-semibold);
	line-height: 1.12;
	color: var(--color-on-dark);
}

.lp-fee__unit {
	font-size: 24px;
	font-weight: var(--fw-bold);
	color: var(--lp-fee-soft);
}

.lp-fee__note {
	margin: 0;
	font-size: 24px;
	font-weight: var(--fw-semibold);
	line-height: 1.48;
	color: var(--lp-fee-soft);
}

.lp-fee__points {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-fee__points li {
	position: relative;
	padding-inline-start: 20px; /* 16px box + 4 gap, as in Figma */
	font-size: 18px;
	line-height: 1.48;
	color: var(--color-on-dark);
}

.lp-fee__points li::before {
	content: "";
	position: absolute;
	inset-block-start: 5px;
	inset-inline-start: 0;
	width: 16px;
	height: 16px;
	background: var(--lp-fee-tick);
	-webkit-mask: var(--lp-check-mask) no-repeat center / 13.33px 9.33px;
	mask: var(--lp-check-mask) no-repeat center / 13.33px 9.33px;
}

.lp-fee__compare {
	margin-block-start: auto;
	padding: 20px 20px 20px 17px;
	border: 0;
	border-inline-start: 3px solid var(--brand-accent, var(--color-primary));
	border-radius: 8px;
	background: color-mix(in srgb, var(--brand-accent, var(--color-primary)) 24%, transparent);
}

.lp-fee__compare-label {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.48;
	text-transform: uppercase;
	color: var(--lp-fee-soft);
}

.lp-fee__compare-value {
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-on-dark);
}

.lp-fee__compare-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.48;
	text-transform: uppercase;
	color: var(--lp-fee-softer);
}

/* ---- Four reasons ---- */

/* Figma runs the reasons straight off the top row: the row ends at 684 and
   the reasons start at 684. */
.lp-reasons {
	margin-block-start: 0;
}

.lp-reasons__heading {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: var(--fw-bold);
	line-height: 1.48;
	text-transform: uppercase;
	color: var(--brand-accent, var(--color-primary));
}

.lp-reasons__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-reasons__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 16px;
	border-radius: 8px;
	background: #f8f8f8;
}

.lp-reasons__icon {
	width: 40px;
	height: 40px;
	background: var(--brand-accent, var(--color-primary));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: var(--lp-mask);
	mask-image: var(--lp-mask);
}

.lp-reasons__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lp-reasons__title {
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.44;
	color: var(--color-body);
}

.lp-reasons__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-body);
}

@media (max-width: 1099px) {
	.lp-challenge {
		padding-block: 80px;
	}

	.lp-challenge__top {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.lp-reasons {
		margin-block-start: 48px;
	}

	.lp-reasons__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.lp-challenge {
		padding-block: 56px;
	}

	.lp-fee {
		min-height: 0;
		padding: 28px 24px;
		gap: 32px;
	}

	.lp-fee__value {
		font-size: 56px;
	}

	.lp-reasons__grid {
		grid-template-columns: 1fr;
	}

}

/* ---- Why us, six cards (Figma 149:614 / 235:1300) ---- */

.lp-why {
	padding-block: 136px;
	background: #f8f8f8;
}

.lp-why__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 1003px;
	margin: 0 auto 48px;
	text-align: center;
}

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

.lp-why__accent {
	color: var(--brand-accent, var(--color-primary));
}

.lp-why__intro {
	margin: 0;
	max-width: 838px;
	font-size: 18px;
	line-height: 1.6; /* reading copy */
	color: var(--color-body);
}

.lp-why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-why__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow: hidden;
	padding: 24px;
	border: 1px solid #e7e7e8;
	border-radius: 16px;
	background: var(--color-bg);
	transition: background-color 200ms ease, border-color 200ms ease;
}

/* Same hover as the main site's sector cards: the card takes the brand
   colour and everything on it goes white. Mouse only, so a tap on a phone
   does not leave a card stuck in its hover state. */
@media (hover: hover) and (pointer: fine) {
	.lp-why__card:hover {
		background: var(--brand-accent, var(--color-primary));
		border-color: var(--brand-accent, var(--color-primary));
	}

	.lp-why__card:hover .lp-why__tile {
		background: rgba(255, 255, 255, 0.15);
	}

	.lp-why__card:hover .lp-why__icon {
		background: var(--color-on-dark);
	}

	.lp-why__card:hover .lp-why__title,
	.lp-why__card:hover .lp-why__text {
		color: var(--color-on-dark);
	}

}

.lp {
	--lp-why-tile: rgba(216, 233, 231, 0.7);
}

.brand-purple.lp {
	--lp-why-tile: rgba(233, 216, 236, 0.7);
}

.lp-why__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	background: var(--lp-why-tile);
}

.lp-why__icon {
	width: 30px;
	height: 30px;
	background: var(--brand-accent, var(--color-primary));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: var(--lp-mask);
	mask-image: var(--lp-mask);
}

.lp-why__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lp-why__title {
	font-size: 23px;
	font-weight: var(--fw-semibold);
	line-height: 1.12;
	color: var(--brand-accent, var(--color-primary));
}

.lp-why__text {
	font-size: 16px;
	line-height: 1.6; /* reading copy */
	color: var(--color-title);
}

@media (max-width: 1099px) {
	.lp-why {
		padding-block: 80px;
	}

	.lp-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.lp-why {
		padding-block: 56px;
	}

	.lp-why__grid {
		grid-template-columns: 1fr;
	}

}

/* ---- Us vs them (Figma 218:1450 / 235:1380) ---- */

.lp-compare {
	padding-block: 136px;
	background: var(--color-bg);
}

.lp-compare__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 1117px;
	margin: 0 auto 48px;
	text-align: center;
}

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

.lp-compare__accent {
	color: var(--brand-accent, var(--color-primary));
}

.lp-compare__intro {
	margin: 0;
	max-width: 838px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-body);
}

/* The drop shadow belongs to the FIRST column only (Frame 1125: 0 4 30
   rgba(0,0,0,.10)). It spills out left, top and bottom of the table and is
   hidden on the right by the tinted column, so it is drawn on a wrapper
   behind the table: the table clips its own contents for the rounded
   corners and would cut a shadow off. */
.lp-compare__frame {
	position: relative;
	max-width: 1110px;
	margin-inline: auto;
}

.lp-compare__frame::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 32.7%; /* 363 of 1110 */
	border-radius: 16px 0 0 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	pointer-events: none;
}

.lp-compare__frame .lp-compare__table {
	position: relative;
	z-index: 1;
}

/* Figma: 1110 wide, three columns 363 / 387 / 360. Border #d9d9d9, radius 16,
   no shadow. Every value below was read off the nodes. */
.lp-compare__table {
	width: 100%;
	max-width: 1110px;
	margin-inline: auto;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid #d9d9d9;
	border-radius: 16px;
	table-layout: fixed;
	background: var(--color-bg);
}

.lp-compare__table th,
.lp-compare__table td {
	text-align: start;
	vertical-align: middle;
}

/* Column headings: Campton SemiBold 18, set in capitals (textCase UPPER). */
.lp-compare__th {
	height: 80px;
	padding: 24px 36px;
	font-size: 18px;
	font-weight: var(--fw-semibold);
	line-height: 1.48;
	text-transform: uppercase;
	color: var(--color-body);
}

/* The middle column is tinted the whole way down, under a black cap. */
.lp-compare__th--mine,
.lp-compare__cell--mine {
	background: var(--lp-compare-tint);
}

.lp {
	--lp-compare-tint: #e9f3f1;
	--lp-compare-check: var(--color-primary);
}

.brand-purple.lp {
	--lp-compare-tint: #f7f4f8;
	--lp-compare-check: var(--color-purple);
}

/* Cap: black, logo left at 44 with 24 above and below (a 120x32 logo). */
.lp-compare__th--mine {
	padding: 24px 44px;
	background: var(--color-title);
}

.lp-compare__logo {
	--logo-word: #fff;
	width: 120px;
	height: auto;
}

.lp-compare__label,
.lp-compare__cell {
	padding: 19.5px 36px;
	font-size: 16px;
	line-height: 1.48;
	color: var(--color-body);
}

.lp-compare__label {
	font-weight: 400;
}

/* Rule between rows: black at 15%, running edge to edge across all three
   columns, including the tinted one. */
.lp-compare__table tbody tr > * {
	border-block-start: 1px solid rgba(0, 0, 0, 0.15);
}

/* A 20px box for each marker, 8 from the text, as in Figma. */
.lp-compare__mark {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-inline-end: 8px;
	vertical-align: middle;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: auto;
	mask-size: auto;
}

.lp-compare__cell > span:last-child {
	vertical-align: middle;
}

.lp-compare__mark--yes {
	background: var(--lp-compare-check);
	-webkit-mask-image: var(--lp-check-mask);
	mask-image: var(--lp-check-mask);
}

/* Red (#eb5757), and only where the design shows one. */
.lp-compare__mark--no {
	background: #eb5757;
	-webkit-mask-image: var(--lp-x-mask);
	mask-image: var(--lp-x-mask);
}

/* Closing banner: Figma 1110x118, radius 16, dark brand panel. */
.lp-compare__note {
	max-width: 1110px;
	margin: 48px auto 0;
	padding: 32px 61px;
	border-radius: 16px;
	background: var(--lp-fee-bg);
	font-size: 18px;
	line-height: 1.48;
	color: var(--color-on-dark);
	text-align: center;
	text-wrap: pretty;
}

.lp-compare__note-strong {
	font-weight: var(--fw-semibold);
	color: var(--lp-compare-strong, var(--lp-fee-softer));
}

@media (max-width: 1099px) {
	.lp-compare {
		padding-block: 80px;
	}

	.lp-compare__th,
	.lp-compare__label,
	.lp-compare__cell {
		padding-inline: 20px;
	}

	.lp-compare__note {
		padding: 24px;
	}
}

@media (max-width: 767px) {
	.lp-compare {
		padding-block: 56px;
	}

	/* The table stays readable by scrolling rather than by shrinking. */
	.lp-compare__frame {
		overflow-x: auto;
	}

	.lp-compare__frame::before {
		display: none;
	}

	.lp-compare__frame .lp-compare__table {
		min-width: 620px;
	}
}

/* Arrow cursor over the text of every card and panel, as on the main site's
   cards (Avi: not the text cursor). None of these is a link, so nothing here
   gets the pointer; `cursor` is inherited, so setting it on the container
   covers everything inside it. Form fields keep their own cursor. */
.lp-stats__card,
.lp-fee,
.lp-challenge__note,
.lp-reasons__card,
.lp-why__card,
.lp-compare__table,
.lp-compare__note {
	cursor: default;
}

/* Logo bar on the landing pages: Figma's Frame 19 has a 1px stroke on the TOP
   edge only (1/0/0/0), where the main site's version draws it underneath. */
.lp .block-trust-bar {
	border-block-start: 1px solid #e7e7e8;
	border-block-end: 0;
}

/* ---- Process timeline (Figma 175:1636 / 235:1703) ---- */

.lp-process {
	padding-block: 136px;
	background: #f8f8f8;
}

.lp-process__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 1089px;
	margin: 0 auto 48px;
	text-align: center;
}

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

.lp-process__accent {
	color: var(--brand-accent, var(--color-primary));
}

.lp-process__intro {
	margin: 0;
	max-width: 594px;
	font-size: 18px;
	line-height: 1.6; /* reading copy */
	color: var(--color-body);
}

/* The track: rail and dots drawn behind the four steps. Desktop rail is 3px
   #b2d4ce through the circles' centres (24 down), with a 10px dot at each end. */
.lp-process__track {
	position: relative;
}

.lp-process__rail {
	position: absolute;
	inset-block-start: 22.5px;
	inset-inline: 2px 5px;
	height: 3px;
	border-radius: 2px;
	background: var(--lp-rail, #b2d4ce);
	pointer-events: none;
}

.lp-process__dot {
	position: absolute;
	inset-block-start: -3.5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--brand-accent, var(--color-primary));
}

.lp-process__dot--start {
	inset-inline-start: -2px;
}

.lp-process__dot--end {
	inset-inline-end: -5px;
}

.lp-process__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-process__step {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* 48px circle, 18px SemiBold white numeral. Figma sits it 107px in from the
   card's left edge. The numeral is nudged like every other centred label,
   since Campton reserves descender space above the baseline. */
.lp-process__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	margin-inline-start: 107px;
	padding: calc(8px + var(--optical-nudge)) 8px calc(8px - var(--optical-nudge));
	border-radius: 50%;
	background: var(--brand-accent, var(--color-primary));
	font-size: 18px;
	font-weight: var(--fw-semibold);
	line-height: 1.12;
	color: var(--color-on-dark);
}

/* Card: 302x214, padding 20, radius 16, 1px #e7e7e8, title and text 8 apart. */
.lp-process__card {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 20px;
	border: 1px solid #e7e7e8;
	border-radius: 16px;
	background: var(--color-bg);
	cursor: default;
}

.lp-process__title {
	margin: 0;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.12;
	color: var(--brand-accent, var(--color-primary));
}

.lp-process__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6; /* reading copy */
	color: var(--color-title);
}

.lp-process__cta {
	display: flex;
	justify-content: center;
	margin: 48px 0 0;
}

/* Figma 175:1651: Medium 18 / 1.2, -0.18px, padding 14/24, 10 to a 24px
   arrow. That is 363x52, and it is the same button as the main site's
   sector CTA, not the SemiBold submit button used inside forms. */
.lp-process__cta .button {
	gap: 10px;
	padding: calc(14px + var(--optical-nudge)) 24px calc(14px - var(--optical-nudge));
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: -0.18px;
}

/* Below the desktop width the steps become a vertical timeline. A process is
   a sequence, and a 2x2 grid of circles floating above cards with no line
   between them stopped reading as one (Avi, on tablet). The rail runs down
   the left through the circles, its two dots cap the ends, and each card
   sits to the right of its circle. */
@media (max-width: 1099px) {
	.lp-process {
		padding-block: 80px;
	}

	/* Room above the first circle: the rail and its start dot begin clear of
	   it, as they do past the ends of the row on desktop. Without this the
	   first circle sat right on the dot and hid it. */
	.lp-process__track {
		padding-block-start: 28px;
	}

	.lp-process__rail {
		display: block;
		inset-block: 0;
		inset-inline: 22.5px auto;
		width: 3px;
		height: auto;
	}

	.lp-process__dot {
		inset-inline-start: -3.5px;
	}

	.lp-process__dot--start {
		inset-block-start: -5px;
	}

	.lp-process__dot--end {
		inset-block: auto -5px;
		inset-inline-end: auto;
	}

	.lp-process__steps {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.lp-process__step {
		position: relative;
		display: block;
		padding-inline-start: 72px;
	}

	.lp-process__marker {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		margin: 0;
	}
}

@media (max-width: 599px) {
	.lp-process {
		padding-block: 56px;
	}

	.lp-process__steps {
		gap: 20px;
	}

	.lp-process__step {
		padding-inline-start: 68px;
	}

	.lp-process__cta .button {
		width: 100%;
		justify-content: center;
	}
}


/* ---- US landing: About + team photo (Figma 228:939) ----
   Section 742 tall, padding 136/160. Copy column 491: eyebrow, gap 16,
   heading Bold 48 / 1.16 (second line brand colour), gap 36, body Book 16
   468 wide, gap 36, Medium 18 / -0.18px link, 52 tall, 10 to a 24px arrow.
   Photo 16px radius. Figma's photo runs 22px past the 1280 container, so
   here it takes the room that is left. */

.lp-about {
	padding-block: 136px;
	background: #fff;
}

.lp-about__grid {
	display: grid;
	grid-template-columns: 491px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

.lp-about__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	cursor: default;
}

.lp-about__heading {
	margin: 16px 0 0;
	font-size: 48px;
	font-weight: var(--fw-bold);
	line-height: 1.16;
	letter-spacing: 0;
	color: #090909;
}

.lp-about__accent {
	color: var(--brand-accent, var(--color-primary));
}

.lp-about__text {
	max-width: 468px;
	margin: 36px 0 0;
	font-size: 16px;
	line-height: 1.6; /* reading copy */
	color: #000;
}

.lp-about__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 36px;
	padding: calc(14px + var(--optical-nudge)) 0 calc(14px - var(--optical-nudge));
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: -0.18px;
	color: #090909;
	text-decoration: none;
}

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

.lp-about__photo {
	cursor: default;
}

.lp-about__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 789 / 436;
	object-fit: cover;
	border-radius: 16px;
}

@media (max-width: 1099px) {
	.lp-about {
		padding-block: 96px;
	}

	.lp-about__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.lp-about__heading {
		font-size: 40px;
	}

	.lp-about__text {
		max-width: 620px;
	}
}

@media (max-width: 599px) {
	.lp-about {
		padding-block: 64px;
	}

	.lp-about__grid {
		gap: 36px;
	}

	.lp-about__heading {
		font-size: 32px;
	}

	.lp-about__link {
		align-items: flex-start;
	}
}

/* ---- US landing: industries and roles (Figma 218:1452) ----
   Section 1077 tall on #f8f8f8, padding 136, rows 48 apart. Header 790 wide:
   eyebrow, gap 24, heading Bold 48 / 1.12 with the brand words, then an
   18px intro. Grid 3 x 2 of 416x224 cards, gap 16 (the why-us card).
   Closing link: Book 18 + Medium 18 in the brand colour, -0.18px, py 14,
   24px arrow, 330x52. */

.lp-ind {
	padding-block: 136px;
	background: #f8f8f8;
}

.lp-ind__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 790px;
	margin: 0 auto 48px;
	text-align: center;
}

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

.lp-ind__accent {
	color: var(--brand-accent, var(--color-primary));
}

.lp-ind__intro {
	margin: 8px 0 0;
	max-width: 736px;
	font-size: 18px;
	line-height: 1.6; /* reading copy */
	color: var(--color-body);
}

.lp-ind__cta {
	display: flex;
	justify-content: center;
	margin: 48px 0 0;
}

.lp-ind__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: calc(14px + var(--optical-nudge)) 24px calc(14px - var(--optical-nudge));
	font-size: 18px;
	font-weight: var(--fw-book, 400);
	line-height: 1.2;
	letter-spacing: -0.18px;
	color: #090909;
	text-decoration: none;
}

.lp-ind__link em {
	font-style: normal;
	font-weight: var(--fw-medium);
	color: var(--brand-accent, var(--color-primary));
}

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

@media (max-width: 1099px) {
	.lp-ind {
		padding-block: 80px;
	}
}

@media (max-width: 599px) {
	.lp-ind {
		padding-block: 56px;
	}
}

/* Figma 218:1466: the arrow in this link is the brand colour (the About
   link's arrow is dark, so this is per link, not per icon). */
.lp-ind__link .icon {
	color: var(--brand-accent, var(--color-primary));
}

/* ---- US landing: where we work (Figma 235:952) ----
   Section 1066 tall on white, padding 136, rows 48 apart. Header 1014 wide
   (eyebrow, heading Bold 48 / 1.12, 18px intro). Split 845 | 412, gap 23.
   Panel: 1px #e7e7e8, radius 16, map 720x470 at 97/37, note 633 wide at 48,
   its bottom 46 above the panel edge, fill tint, 3px brand stroke LEFT only,
   padding 16, text 18. Cards 412 wide, gap 16, padding 24, radius 16, title
   SemiBold 20 brand colour, text Book 14; same hover as the why-us cards. */

.lp-map {
	padding-block: 136px;
	background: #fff;
}

.lp-map__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 1014px;
	margin: 0 auto 48px;
	text-align: center;
}

.lp-map__heading {
	margin: 8px 0 0; /* eyebrow to heading is 24 here */
	font-size: clamp(32px, 20px + 1.75vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-title);
}

.lp-map__accent {
	color: var(--brand-accent, var(--color-primary));
}

.lp-map__intro {
	margin: 8px 0 0;
	max-width: 838px;
	font-size: 18px;
	line-height: 1.6; /* reading copy */
	color: var(--color-body);
}

.lp-map__split {
	display: grid;
	grid-template-columns: minmax(0, 845fr) minmax(0, 412fr);
	gap: 23px;
	align-items: stretch;
}

.lp-map__panel {
	position: relative;
	min-height: 599px;
	border: 1px solid #e7e7e8;
	border-radius: 16px;
	background: #fff;
	cursor: default;
}

.lp-map__art {
	position: absolute;
	inset-block-start: 36px; /* offsets are inside the 1px border */
	inset-inline-start: calc(96 / 843 * 100%);
	width: calc(720 / 843 * 100%);
}

.lp-map__art img {
	display: block;
	width: 100%;
	height: auto;
}

.lp-map__note {
	position: absolute;
	inset-block-end: 45px;
	inset-inline-start: calc(47 / 843 * 100%);
	width: calc(633 / 843 * 100%);
	margin: 0;
	padding: calc(16px + var(--optical-nudge)) 16px calc(16px - var(--optical-nudge)) 19px;
	border-inline-start: 3px solid var(--brand-accent, var(--color-primary));
	background: var(--lp-note-tint, #d8e9e7);
	font-size: 18px;
	line-height: 1.6; /* reading copy */
	color: var(--color-body);
}

.lp-map__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-map__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border: 1px solid #e7e7e8;
	border-radius: 16px;
	background: var(--color-bg);
	cursor: default;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.lp-map__card:last-child {
	flex: 1;
}

.lp-map__card-title {
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.12;
	color: var(--brand-accent, var(--color-primary));
}

.lp-map__card-text {
	font-size: 14px;
	line-height: 1.6; /* reading copy */
	color: #090909;
}

@media (hover: hover) and (pointer: fine) {
	.lp-map__card:hover {
		background: var(--brand-accent, var(--color-primary));
		border-color: var(--brand-accent, var(--color-primary));
	}

	.lp-map__card:hover .lp-map__card-title,
	.lp-map__card:hover .lp-map__card-text {
		color: var(--color-on-dark);
	}
}

/* Under the desktop width the note can no longer sit over the map: the map
   fills the panel and the note follows it. */
@media (max-width: 1099px) {
	.lp-map {
		padding-block: 80px;
	}

	.lp-map__split {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.lp-map__panel {
		display: flex;
		flex-direction: column;
		gap: 24px;
		min-height: 0;
		padding: 24px;
	}

	.lp-map__art,
	.lp-map__note {
		position: static;
		width: 100%;
	}
}

@media (max-width: 599px) {
	.lp-map {
		padding-block: 56px;
	}

	.lp-map__panel {
		padding: 16px;
	}

	.lp-map__note {
		font-size: 16px;
	}
}

/* ---- US landing: testimonials (Figma 124:6756) ----
   972 tall on #f8f8f8, padding 136, header 150 (eyebrow, gap 24, heading
   Bold 48 / 1.12 centred with the brand words inside it), then 72 to the
   slider. The slider is the main site's. */

.lp-test {
	padding-block: 136px;
}

.lp-test__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 840px;
	margin: 0 auto 72px;
	text-align: center;
}

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

.lp-test__accent {
	color: var(--brand-accent, var(--color-primary));
}

@media (max-width: 1099px) {
	.lp-test {
		padding-block: 80px;
	}

	.lp-test__head {
		margin-block-end: 48px;
	}
}

@media (max-width: 599px) {
	.lp-test {
		padding-block: 56px;
	}
}

/* A question with no answer yet has nothing to open, so no pointer. The plus
   stays, because the design shows it on every row. */
.accordion__item--empty > .accordion__title {
	cursor: default;
}

/* Landing FAQ: Figma sets the eyebrow with 2% tracking and the heading at a
   flat 48 (the main site's clamp gives 47.6 at 1600). */
.lp .block-faq__eyebrow {
	letter-spacing: 0.02em;
}

.lp .block-faq__heading {
	font-size: clamp(32px, 20px + 1.75vw, 48px);
}

/* ---- US landing: closing pitch + form (Figma 124:6859) ----
   1079 tall on #f8f8f8, padding 136. Copy column 622, card 569, 89 apart,
   the column centred against the taller card. Heading Bold 44 / 1.24 with
   the brand words first, then two 16px lines 24 apart (groups 42 apart).
   Stat boxes 303x119: 1px #e5d9e6, radius 8, padding 20, gap 8, figure
   Bold 40 in the brand colour. Ticks: Medium 16 / 1.44, 20px tick, 8 gap,
   16 between lines. The card is the hero's, with padding 36/30 and a
   softer, wider shadow (0 4 30). */

.lp-cta {
	padding-block: 136px;
	background: #f8f8f8;
}

.lp-cta__inner {
	display: grid;
	grid-template-columns: 622fr 569fr;
	gap: 89px;
	align-items: center;
}

.lp-cta__copy {
	display: flex;
	flex-direction: column;
	gap: 42px;
	cursor: default;
}

.lp-cta__intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lp-cta__heading {
	max-width: 631px;
	margin: 0;
	font-size: clamp(32px, 22px + 1.4vw, 44px);
	font-weight: var(--fw-bold);
	line-height: 1.24;
	color: var(--color-title);
}

.lp-cta__accent {
	color: var(--brand-accent, var(--color-primary));
}

.lp-cta__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6; /* reading copy */
	color: var(--color-body);
}

.lp-cta__text--1 {
	max-width: 530px;
}

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

.lp-cta__stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Figma's label is 268 wide inside a 261 box, so on the desktop it runs
	   into the right padding rather than wrapping. 12 on the right holds it
	   on one line the same way. */
	padding: 20px 12px 20px 20px;
	border: 1px solid #e5d9e6;
	border-radius: 8px;
}

.lp-cta__stat-value {
	font-size: 40px;
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--brand-accent, var(--color-primary));
}

.lp-cta__stat-label {
	font-size: 16px;
	line-height: 1.48;
	color: #090909;
}

.lp-cta__checks {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-cta__checks li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.44;
	color: #090909;
}

.lp-cta__checks img {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.lp-cta__card {
	padding: 36px 30px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.lp-cta__card .lp-form__sub {
	max-width: 462px;
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 1099px) {
	.lp-cta {
		padding-block: 80px;
	}

	.lp-cta__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}
}

@media (max-width: 599px) {
	.lp-cta {
		padding-block: 56px;
	}

	.lp-cta__stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-cta__card {
		padding: 24px 20px;
	}
}

.lp-cta__card .lp-form__heading {
	margin-block-end: 10px; /* Figma 124:6866: heading and intro are 10 apart */
}

/* Figma sets the Name and Company labels in Medium, the rest in SemiBold. */
.lead-form__label--medium {
	font-weight: var(--fw-medium);
}

/* Figma 124:6865: the card's own gap is 36 (heading block to form), while
   everything inside the form is 24 apart; the hero card is 24 throughout. */
.lp-cta__card .lp-form__head {
	margin-block-end: 12px;
}

/* ---- US landing: slim footer (Figma 124:6902) ----
   The main footer with the two link menus replaced by one short column: on
   the desktop row that is brand 294 | rule | links | rule | LinkedIn, spread
   across the 1280 with the same 348px row. The rules here are 259 tall, not
   348. Under 1100px the brand block, then the links and LinkedIn side by
   side, then the copyright, rule and wordmark. */

.site-footer--slim .site-footer__col--menu,
.site-footer--slim .site-footer__col--social {
	margin-inline-start: 0;
}

.site-footer--slim .footer-nav {
	gap: 8px;
}

/* Figma: the copyright line is full white, not the 75% of the link columns. */
.site-footer--slim .site-footer__copyright {
	opacity: 1;
}

@media (max-width: 1099px) {
	.site-footer--slim .site-footer__copyright { grid-row: 3; }
	.site-footer--slim .site-footer__divider   { grid-row: 4; }
	.site-footer--slim .site-footer__wordmark  { grid-row: 5; }
	.site-footer--slim .site-footer__col--menu { margin-inline-start: -10px; }
}

@media (max-width: 767px) {
	.site-footer--slim .site-footer__col--menu {
		grid-column: 1;
		grid-row: 2;
		margin-inline-start: 0;
	}

	/* The main footer gives LinkedIn a full row of its own; here it sits
	   beside the links, before the copyright row. */
	.site-footer--slim .site-footer__col--social {
		grid-column: 2;
		grid-row: 2;
	}
}

@media (min-width: 1100px) {
	.site-footer--slim .site-footer__inner {
		grid-template-columns: minmax(294px, max-content) 2px auto 2px auto;
	}

	.site-footer--slim .site-footer__col--menu {
		min-width: 0;
		grid-column: 3;
	}

	.site-footer--slim .site-footer__rule--1 { grid-column: 2; }
	.site-footer--slim .site-footer__rule--2 { grid-column: 4; }

	.site-footer--slim .site-footer__rule {
		align-self: start;
		height: 259px;
	}

	.site-footer--slim .site-footer__col--social {
		grid-column: 5;
	}

	.site-footer--slim .site-footer__divider  { grid-row: 2; }
	.site-footer--slim .site-footer__wordmark { grid-row: 3; }
}

/* ---- Legal pages on the landing installs: white bar, then a title band in
   the page colours and the text underneath. ---- */

.lp-legal-head {
	padding-block: 72px;
	background: var(--lp-band);
	color: var(--color-on-dark);
}

.lp-legal-head__title {
	margin: 0;
	font-size: clamp(34px, 24px + 2vw, 56px);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	color: var(--color-on-dark);
}

.lp .legal-prose a {
	color: var(--brand-accent, var(--color-primary));
}

.lp .legal-prose h3 {
	color: var(--brand-accent, var(--color-primary));
}

@media (max-width: 599px) {
	.lp-legal-head {
		padding-block: 48px;
	}
}

/* The footer shows the header's logo at the header's size (56 tall) in the
   60px box the main footer gives its logo, so the address keeps its 16px gap. */
.site-footer--slim .site-footer__logo {
	width: calc(56px * var(--logo-ratio, 3.75));
	height: 60px;
}

.site-footer--slim .site-footer__logo .site-logo__img {
	width: 100%;
	height: auto;
}

/* ---- US landing (executive): the recruiters (Figma 235:2012) ----
   The main site's team section with five people. 900 tall on #f7f4f8,
   padding 136, rows 48 apart. Header 970 wide, centred: eyebrow, gap 24,
   heading Bold 48 / 1.24 (brand words first, rest #3f4149), intro Book 16.
   Five 243-wide cards, gap 16, photo 243x284, then the name (SemiBold 18),
   the title (Book 14) and the sectors (Book 12), 8 below the photo's
   caption gap. */

.block-team--lp .block-team__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 970px;
	margin-block-end: 48px;
}

.block-team--lp .block-team__heading {
	color: var(--color-body);
}

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

.block-team--lp .block-team__intro {
	max-width: none;
	margin: 0;
	line-height: 1.6; /* reading copy */
}

.block-team--lp .team-card {
	min-height: 0;
	gap: 0;
}

.block-team--lp .team-card__photo {
	aspect-ratio: 243 / 284;
}

.block-team--lp .team-card__title {
	margin-block-start: 8px;
	font-size: 14px;
	line-height: 1.6; /* reading copy */
}

.block-team--lp .team-card__focus {
	font-size: 12px;
	line-height: 1.6; /* reading copy */
}

@media (min-width: 1100px) {
	.block-team--lp .team-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 16px;
	}
}

/* Purple sectors: same rule, the cards in a row match (Figma has the
   Sustainability card taller than its neighbours). */

/* Purple About (Figma 235:1757): a 562 copy column centred against a 696x509
   photo with a 24px radius, where the green one is 491 and 789x436. */
.brand-purple .lp-about__grid {
	grid-template-columns: 562px minmax(0, 1fr);
	align-items: center;
}

.brand-purple .lp-about__photo img {
	aspect-ratio: 696 / 509;
	border-radius: 24px;
}

@media (max-width: 1099px) {
	.brand-purple .lp-about__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Purple headers are set to different widths from the green ones in Figma:
   why-us and the map wrap at 838 (two-line headings), the sectors header runs
   the full 1280 with a 914 intro, the FAQ header is 778. */
.brand-purple .lp-why__head,
.brand-purple .lp-map__head {
	max-width: 838px;
}

.brand-purple .lp-ind__head {
	max-width: 1280px;
}

.brand-purple .lp-ind__intro {
	max-width: 914px;
}

.brand-purple .block-faq__header {
	max-width: 778px;
	margin-inline: auto;
}

/* Purple why-us: Figma draws the third card shorter (248 / 248 / 224), but
   uneven rows look broken on the page (Avi), so the cards in a row match. */

/* Figma's "Private equity and venture capital" title is 377 wide inside a 366
   box and runs into the card's padding rather than wrapping. On the desktop,
   less padding on the right holds it on one line the same way. */
@media (min-width: 1100px) {
	.brand-purple .lp-ind .lp-why__title {
		white-space: nowrap;
	}
}

/* Purple values read off the nodes (235:1300 tiles, 235:1380 note, 235:1822 note). */
.brand-purple.lp {
	--lp-why-tile: rgba(229, 217, 230, 0.7);
	--lp-note-tint: #e5d9e6;
	--lp-compare-strong: #97669c;
}

/* Purple hero (Figma 235:1237): the headline is 56, all white (the green one
   is 64 with a faded first half), and the card's intro is Book 16 with -1%
   tracking. */
.brand-purple .lp-hero__heading {
	font-size: clamp(36px, 20px + 2.25vw, 56px); /* 56 at 1600 */
}

.brand-purple .lp-hero .lp-form__sub {
	font-size: 16px;
	letter-spacing: -0.16px;
}

/* Purple type that differs from green in Figma: the reasons heading is 18
   (green 16), the comparison note's emphasis is Medium (green SemiBold), and
   "Let's talk" in the sectors link is Bold (green Medium). */
.brand-purple .lp-reasons__heading {
	font-size: 18px;
}

.brand-purple .lp-compare__note-strong {
	font-weight: var(--fw-medium);
}

.brand-purple .lp-ind__link em {
	font-weight: var(--fw-bold);
}

/* Text-audit fixes: widths Figma gives the purple copy (wrapped lines must
   match, not just heights). Challenge heading 694 (it runs into the gap
   beside the fee card), process intro 935 on one line, about copy 533,
   comparison intro 736, the hero card's intro 544, label cells padded 32. */
@media (min-width: 1100px) {
	.brand-purple .lp-challenge__heading {
		width: 694px;
		max-width: none;
	}

	.brand-purple .lp-about__text {
		max-width: 533px;
	}

	.brand-purple .lp-process__intro {
		max-width: 935px;
	}
}

.brand-purple .lp-compare__intro {
	max-width: 736px;
}

.brand-purple .lp-hero .lp-form__sub {
	max-width: none;
}

.brand-purple .lp-compare__label {
	padding-inline: 32px;
}

/* Two of the green sector cards carry a designed line break before their last
   word (Figma 235:1047, 235:1012), which makes them three lines. */
.lp-ind .lp-why__text {
	white-space: pre-line;
}

/* The header sits outside <main>, so it needs the brand colour itself, and
   the purple reasons cards are the lilac grey (Figma 235:1635: f7f4f8). */
.lp-header.is-stuck .lp-header__cta.button,
.lp-header:not(.site-header--overlay) .lp-header__cta.button {
	background: var(--brand-accent, var(--color-primary));
	border-color: var(--brand-accent, var(--color-primary));
	color: var(--color-on-dark);
}

.brand-purple .lp-reasons__card {
	background: #f7f4f8;
}

/* Purple colours read off the nodes: the process rail is cbb3cd (235:1711), the
   fee-card ticks 97669c (235:1635). The two blurred streaks on the stat cards
   are teal 3e9385 in the design, a leftover of the green page; Avi chose
   purple, so they follow the brand colour. */
.brand-purple.lp {
	--lp-rail: #cbb3cd;
	--lp-fee-tick: #97669c;
}


/* Purple section grounds read off the section frames (the green page's
   pattern is not the purple one): tinted f7f4f8 for why-us, process,
   recruiters, map and FAQ, white for sectors, testimonials and the closing
   form. On the white testimonials the two side cards carry the tint. */
.brand-purple .lp-why,
.brand-purple .lp-process,
.brand-purple .lp-map,
.brand-purple .block-faq {
	background: #f7f4f8;
}

.brand-purple .lp-ind,
.brand-purple .lp-test,
.brand-purple .lp-cta {
	background: #fff;
}

.brand-purple .lp-test .tcard:not([data-slot="active"]) {
	background: #f7f4f8;
}

/* ---- Phone fixes from the mobile audit (2026-09-29) ---- */

/* The comparison table fits the screen instead of scrolling sideways: a
   table with half its right column off-screen reads as broken. Three equal
   columns, smaller type, tighter cells, a smaller cap logo. */
@media (max-width: 599px) {
	.lp-compare__frame {
		overflow-x: visible;
	}

	.lp-compare__frame .lp-compare__table {
		min-width: 0;
	}

	.lp-compare__table col:nth-child(1) {
		width: 37% !important;
	}

	.lp-compare__table col:nth-child(2),
	.lp-compare__table col:nth-child(3) {
		width: 31.5% !important;
	}

	.lp-compare__th,
	.lp-compare__label,
	.lp-compare__cell {
		padding: 12px 6px;
		font-size: 12px;
		line-height: 1.4;
		overflow-wrap: break-word;
		hyphens: none;
	}

	.lp-compare__th {
		height: auto;
		font-size: 11px;
		letter-spacing: 0;
	}

	.lp-compare__th--mine {
		padding: 14px 6px;
	}

	.lp-compare__logo {
		width: 80px;
	}

	.lp-compare__mark {
		width: 14px;
		height: 14px;
		margin-inline-end: 4px;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	.lp-compare__cell {
		vertical-align: middle;
	}
}

/* Keep "Let's talk" together and centred when the sector link wraps. */
.lp-ind__link em {
	white-space: nowrap;
}

@media (max-width: 599px) {
	.lp-ind__link {
		padding-inline: 0;
		text-align: center;
	}
}

/* Figma sets the testimonial logo inside its 85px white box with a 2-3px
   inset, uncropped, so a wide logo (JAMP) shows whole. */
.lp-test .tcard__logo img {
	box-sizing: border-box;
	object-fit: contain;
	padding: 3px;
}