/* ELT Learn — layout/arrangement utilities.
   Used instead of the Gutenberg block "layout" attribute's custom justify/wrap/gap/contentSize
   options: those require Gutenberg to generate a per-instance <style> tag at save time, which
   can't be reliably hand-authored in static pattern/template HTML and causes "Block contains
   unexpected or invalid content" errors in the editor. These classes are plain, static CSS
   referencing the same theme.json preset vars, so the raw HTML always matches what's declared. */

/* Fluid page style: the theme's single root wrapper, `.wp-site-blocks`, is left unconstrained,
   so every top-level section spans the full viewport width — section backgrounds (navy/gray
   bands, the dark CTA, hero cover images and gradients) bleed to the screen edges. The content
   inside each section is held to the central container by the `.elt-px-14` gutter below, not by
   a cap on this wrapper. `overflow-x: clip` (not `hidden`, which would also create a vertical
   scroll container) is only a safety net against accidental horizontal overflow. */
.wp-site-blocks {
	background: var(--wp--preset--color--white);
	overflow-x: clip;
}
/* Top-level sections sit flush — drop the default block-gap margin between them (the design
   separates sections by their own background + padding, not a gap). Only the root children are
   zeroed, so column/flex gaps and elt-stack-* spacing inside sections are untouched. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.elt-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.elt-nowrap { flex-wrap: nowrap; }
.elt-justify-between { justify-content: space-between; }
.elt-justify-center { justify-content: center; }

.elt-gap-1 { gap: var(--wp--preset--spacing--space-1); }
.elt-gap-2 { gap: var(--wp--preset--spacing--space-2); }
.elt-gap-4 { gap: var(--wp--preset--spacing--space-4); }
.elt-gap-5 { gap: var(--wp--preset--spacing--space-5); }
.elt-gap-6 { gap: var(--wp--preset--spacing--space-6); }
.elt-gap-9 { gap: var(--wp--preset--spacing--space-9); }
.elt-gap-10 { gap: var(--wp--preset--spacing--space-10); }
.elt-gap-12 { gap: var(--wp--preset--spacing--space-12); }

.elt-stack-1 > * + * { margin-top: var(--wp--preset--spacing--space-1); }
.elt-stack-2 > * + * { margin-top: var(--wp--preset--spacing--space-2); }
.elt-stack-3 > * + * { margin-top: var(--wp--preset--spacing--space-3); }
.elt-stack-4 > * + * { margin-top: var(--wp--preset--spacing--space-4); }
.elt-stack-5 > * + * { margin-top: var(--wp--preset--spacing--space-5); }
.elt-stack-6 > * + * { margin-top: var(--wp--preset--spacing--space-6); }
.elt-stack-8 > * + * { margin-top: var(--wp--preset--spacing--space-8); }
.elt-stack-10 > * + * { margin-top: var(--wp--preset--spacing--space-10); }

.elt-mt-auto { margin-top: auto; }

.elt-narrow-560 { max-width: 560px; margin-left: auto; margin-right: auto; }
.elt-narrow-640 { max-width: 640px; margin-left: auto; margin-right: auto; }
.elt-narrow-760 { max-width: 760px; margin-left: auto; margin-right: auto; }
.elt-narrow-860 { max-width: 860px; margin-left: auto; margin-right: auto; }
/* Left-aligned max-width helper for section headers. The !important is required: core's own
   ".is-layout-constrained > *" rule forces margin-left/right:auto !important on any non-wide
   child of a constrained layout, which otherwise centers these regardless of this class. */
.elt-narrow-760-left { max-width: 760px; margin-left: 0 !important; margin-right: 0 !important; }
.elt-narrow-640-left { max-width: 640px; margin-left: 0 !important; margin-right: 0 !important; }
.elt-narrow-560-left { max-width: 560px; margin-left: 0 !important; margin-right: 0 !important; }
.elt-narrow-860-left { max-width: 860px; margin-left: 0 !important; margin-right: 0 !important; }
/* Left-aligned quote column (no auto margins), matching the design's testimonial width. */
.elt-quote { max-width: 720px; }

/* CTA row — heading/text on the left, button on the right (space-between), wrapping the
   button below on narrow screens. Flow container turned into flex, so zero the child margins
   and let gap handle spacing (same core block-gap interaction noted on the grids). */
.elt-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--space-10);
}
.elt-cta-row > * {
	margin-block: 0;
}

/* Section gutter in the fluid model. The section itself is full-viewport-width; this padding
   grows with the viewport so the section's content box stays inside the central container
   (--wp--style--global--content-size). Below that width it falls back to the fixed 48px gutter.
   The class name is kept as-is: it is already saved in the post_content / wp_template rows of
   every page built from these patterns, so renaming it would unstyle existing content. */
.elt-px-14 {
	padding-left: max(var(--wp--preset--spacing--space-14), calc((100% - var(--wp--style--global--content-size)) / 2));
	padding-right: max(var(--wp--preset--spacing--space-14), calc((100% - var(--wp--style--global--content-size)) / 2));
}

/* Full-bleed covers (hero, inner hero, image CTA): the cover box spans the viewport so its
   image and scrim reach the screen edges, while its content starts on the same central
   container edge as every other section. The gutter has to be applied to the cover itself
   rather than to its inner container: the inner container is a shrink-to-fit flex item, and
   stretching it to the container width would re-centre any `.elt-narrow-*` block inside it
   (the inner heroes wrap their copy in `.elt-narrow-760`, which has auto side margins), pushing
   the copy off the container edge. `!important` is required because the covers set their own
   left/right padding inline through the block's spacing attribute, which outranks any class. */
.wp-block-cover.alignfull {
	padding-left: max(var(--wp--preset--spacing--space-14), calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	padding-right: max(var(--wp--preset--spacing--space-14), calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

/* Sticky header. The target is the header template-part wrapper (the tag matters — the footer
   is a `.wp-block-template-part` direct child too), not the `header.wp-block-group`
   inside it: that inner header's containing block is this wrapper, which is only as tall as the
   header itself, so sticking it there would pin it for zero pixels of scroll. Sticking the
   wrapper works even though `.wp-site-blocks` sets `overflow-x: clip` — `clip` paired with a
   visible `overflow-y` does not create a scroll container, unlike `hidden`.
   The transparent bottom border reserves the hairline's 1px up front, so revealing it on scroll
   does not shift the page. `--elt-header-offset` — this bar's height plus its own top offset —
   is published by assets/js/sticky-header.js. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50; /* above the reading-progress bar (40) */
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid transparent;
	/* The bar changes height when the logo shrinks. Scroll anchoring would treat that as content
	   moving and correct scrollY to compensate, which fights the scroll the reader is making;
	   opting out here leaves the correction to the thresholds in assets/js/sticky-header.js. */
	overflow-anchor: none;
}
/* Logged-in views: clear the fixed admin bar (32px, 46px on WP's own mobile breakpoint). */
body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

/* The site logo renders at its `width` attribute (140), which any rule here outranks. */
.wp-block-site-logo img {
	width: var(--elt-logo-width, 140px);
	height: auto;
	transition: width 200ms ease;
}
/* Same base selector as the sticky rule above, so the hairline colour outranks the transparent
   border it replaces. */
.wp-site-blocks > header.wp-block-template-part.elt-header-stuck {
	--elt-logo-width: 112px; /* -20% once the header floats over the content */
	border-bottom-color: var(--wp--preset--color--gray-200);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-site-logo img {
		transition: none;
	}
}

/* Anchor targets clear the sticky header instead of landing behind it. */
.wp-site-blocks [id] {
	scroll-margin-top: calc(var(--elt-header-offset, 0px) + var(--wp--preset--spacing--space-8));
}

.elt-grid-2 {
	display: grid;
	/* minmax(0, 1fr), not 1fr — a bare 1fr track still respects its content's min-content
	   width, so a wide child (e.g. a form row that can't shrink) blows the column out past
	   its fair share instead of wrapping/shrinking inside it. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--space-16);
}
@media (max-width: 767px) {
	.elt-grid-2 {
		grid-template-columns: 1fr;
	}
}

/* These containers render as CSS grids (gap handles spacing) but keep the editor's
   .is-layout-flow class, so core applies margin-block-start: var(--wp--style--block-gap)
   to every child except the first. That leaves the first item in each grid row sitting
   one block-gap higher than its neighbours. Zero the flow margins here — the extra class
   / descendant selector outweighs core's :root :where(.is-layout-flow) > * rule — and let
   grid gap alone space the items. Covers "Why ELT" cards and the client/accreditation logos. */
.elt-grid-2.is-layout-flow > *,
.elt-logo-grid .wp-block-post-template > * {
	margin-block: 0;
}

/* Segmented row (e.g. "Who we serve") — one bordered/rounded strip with zero gap between
   items and a hairline divider between them, instead of separate gapped cards. */
.elt-segmented-row {
	gap: 0;
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xxl);
	overflow: hidden;
}
.elt-segmented-row > .wp-block-column:not(:last-child) {
	border-right: 1px solid var(--wp--preset--color--gray-300);
}

/* Fixed-height clipping box for the zoomed image inside a segmented row item. */
.elt-media-zoom .wp-block-image {
	height: 172px;
	margin: 0;
	overflow: hidden;
}
.elt-media-zoom .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Accreditations Query Loop grid — target the block's own stable .wp-block-post-template
   class instead of a custom block "layout" attribute. Responsive grid: columns auto-fit to
   the available width so the seals stay evenly distributed and wrap into rows as more are
   added. Empty tracks collapse (auto-fit), so a few items spread out instead of clustering. */
.elt-logo-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--space-4);
	align-items: center;
	justify-items: center;
	max-width: 960px;
	margin-inline: auto;
}

/* Clients carousel — a full-screen-width scroll track, the one element on the site that breaks out
   of the central container (the section's heading and button stay in it). The viewport's
   <ul.wp-block-post-template> is the scroller (arrows and the autoplay in carousel.js call
   scrollBy on it); tiles have a fixed width, so a wider screen shows more logos rather than
   bigger ones. The track keeps the .is-layout-flow class, so its child margins are zeroed to let
   gap own the spacing (see the grid note above for the same core block-gap interaction).

   Breaking out depends on `align:full` on the group in the markup: core's constrained layout puts
   `margin-left/right: auto !important` on every non-aligned child, which would cancel the negative
   margins below. The pull is half the difference between the page width and the section's content
   box — `--elt-page-width` is published by carousel.js because `100vw` (the no-JS fallback)
   includes the scrollbar and would shift the track sideways. The selector is qualified up to
   `.wp-site-blocks` because core also ships `.has-global-padding > .alignfull { margin-inline:
   calc(root-padding * -1) }`, which outranks a lone `.elt-carousel` and would pull the track out
   by only the 48px root padding. */
.wp-site-blocks .elt-carousel.alignfull,
.elt-carousel {
	position: relative; /* anchor for the absolutely positioned arrows */
	margin-inline: calc((100% - var(--elt-page-width, 100vw)) / 2);
	padding-inline: var(--wp--preset--spacing--space-14);
}
.elt-carousel > * {
	margin-block: 0;
}
.elt-carousel-arrow {
	position: absolute;
	top: 50%;
	/* `translate`, not `transform`: the hover state in interactions.css uses transform, and the
	   two properties compose instead of overwriting each other. */
	translate: 0 -50%;
	z-index: 2;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	color: var(--wp--preset--color--navy-800);
	cursor: pointer;
	padding: 0;
	user-select: none;
}
/* The track now runs to both screen edges, so there is no free side margin to park the arrows in:
   they sit over its outer edges, inset by the same padding as the track. */
.elt-carousel-prev { left: var(--wp--preset--spacing--space-14); }
.elt-carousel-next { right: var(--wp--preset--spacing--space-14); }
.elt-carousel-arrow:disabled {
	opacity: 0.4;
	cursor: default;
}
.elt-carousel-viewport {
	min-width: 0;
}
.elt-carousel-viewport .wp-block-post-template {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--space-4);
	margin: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.elt-carousel-viewport .wp-block-post-template::-webkit-scrollbar {
	display: none;
}
/* Fixed tile width, `min()`-clamped so it still fits screens narrower than one tile — that
   replaces the old per-breakpoint 2-up / 1-up rules. */
.elt-carousel-viewport .wp-block-post-template > * {
	flex: 0 0 min(400px, 100%);
	scroll-snap-align: start;
	margin-block: 0;
}

/* Results row (stats) — four left-aligned figures under a single navy hairline, on the light
   page background. The rule spans the content width; core/columns keeps the four equal and
   stacks them on mobile. */
.elt-stats-row {
	border-top: 2px solid var(--wp--preset--color--navy-800);
	padding-top: var(--wp--preset--spacing--space-11);
	gap: var(--wp--preset--spacing--space-8);
}

/* ============================================================================
   Language Training (inner-page) sections
   ============================================================================ */

/* Vertically centre the two columns of an .elt-grid-2 (intro + feature/media). */
.elt-grid-2-align-center { align-items: center; }
/* Top-align the two columns of an .elt-grid-2 (e.g. careers apply — intro text vs. form card). */
.elt-grid-2-align-start { align-items: start; }

/* Feature + media: reverse variant puts the image column on the right. */
.elt-feature-reverse .elt-media-frame { order: 2; }

/* Fixed-ratio image frame (feature/media sections) with a hover zoom. */
.elt-media-frame {
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.elt-media-frame .wp-block-image { margin: 0; height: 100%; }
.elt-media-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Intro stat cards — 2x2 bordered tiles on the light page background. */
.is-style-stat-card {
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--space-8);
}

/* Delivery / icon cards — 3-up cards with an icon chip. */
.is-style-icon-card {
	height: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--space-9) var(--wp--preset--spacing--space-8);
}
.elt-icon-chip {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	margin: 0;
	background: var(--wp--preset--color--cyan-50);
	color: var(--wp--preset--color--cyan-600);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
}

/* Checklist (feature/media + family sections). */
.elt-checklist > * + * { margin-top: var(--wp--preset--spacing--space-5); }
.elt-check-item {
	gap: var(--wp--preset--spacing--space-4);
	align-items: flex-start;
	flex-wrap: nowrap;
}
.elt-check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 3px 0 0;
	border-radius: 50%;
	background: var(--wp--preset--color--cyan-400);
	color: var(--wp--preset--color--cyan-900);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
}

/* Plain chevron marker variant (e.g. "Join our team" list) — no circle background,
   just an accent-colored arrow, matching the design's lighter secondary-list treatment. */
.elt-checklist-chevron .elt-check {
	width: auto;
	height: auto;
	margin: 1px 0 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--cyan-400);
	font-size: var(--wp--preset--font-size--body-md);
}

/* How it works — steps under a navy hairline. */
.elt-step {
	border-top: 2px solid var(--wp--preset--color--navy-700);
	padding-top: var(--wp--preset--spacing--space-7);
}

/* Languages — header row aligns the "view all" link to the baseline. */
.elt-langs-head {
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-6);
}
/* Pill-tag row. */
.elt-langs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-3);
}
.elt-langs > * { margin: 0; }
.is-style-pill {
	margin: 0;
	padding: 11px 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--wp--preset--color--gray-600);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	line-height: 1;
}

/* Industries — one bordered frame split into cells by hairline dividers. */
.elt-segmented-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.elt-segmented-grid > * { margin: 0; }
.elt-seg-cell {
	padding: var(--wp--preset--spacing--space-8);
	border-right: 1px solid var(--wp--preset--color--gray-300);
	border-bottom: 1px solid var(--wp--preset--color--gray-300);
}
.elt-segmented-grid > .elt-seg-cell:nth-child(3n) { border-right: 0; }
.elt-segmented-grid > .elt-seg-cell:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 767px) {
	.elt-segmented-grid { grid-template-columns: 1fr; }
	.elt-seg-cell { border-right: 0; }
	.elt-segmented-grid > .elt-seg-cell:last-child { border-bottom: 0; }
	.elt-segmented-grid > .elt-seg-cell:not(:last-child) { border-bottom: 1px solid var(--wp--preset--color--gray-300); }
}

/* Centered testimonial. */
.elt-quote-center { text-align: center; }
.elt-quote-mark {
	margin: 0;
	font-size: 72px;
	line-height: 0.5;
	height: 34px;
}

/* ============================================================================
   Cultural Training (inner-page) sections
   ============================================================================ */

/* Generic 3-up grid (challenges, and any 3-col card set that must wrap). */
.elt-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--space-5);
}
.elt-grid-3 > * { margin-block: 0; }
@media (max-width: 1023px) {
	.elt-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
	.elt-grid-3 { grid-template-columns: 1fr; }
}

/* Small decorative quote glyph (challenge cards). */
.elt-quote-sm {
	margin: 0;
	font-size: var(--wp--preset--font-size--quote);
	line-height: 0.5;
}

/* Programs — stacked rows, each an image cell + a content cell. */
.elt-program-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-7);
}
.elt-program-list > * { margin-block: 0; }
.elt-program-row {
	display: grid;
	grid-template-columns: 300px 1fr;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.elt-program-row > * { margin-block: 0; }
.elt-program-media {
	min-height: 230px;
	height: 100%;
}
.elt-program-tag { margin: 0; }
.elt-program-body { padding: var(--wp--preset--spacing--space-11); }
.elt-program-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--space-7) var(--wp--preset--spacing--space-12);
}
.elt-program-cols > * { margin-block: 0; }
.elt-microlabel { margin: 0; }
.elt-olist {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-2);
}
.elt-olist > * { margin-block: 0; }
.elt-oitem {
	gap: var(--wp--preset--spacing--space-3);
	align-items: flex-start;
	flex-wrap: nowrap;
}
.elt-oitem > * { margin-block: 0; }
.elt-otick {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--fine);
	line-height: 1.5;
}
.elt-topics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-2);
}
.elt-topics > * { margin: 0; }
.is-style-tag {
	margin: 0;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-300);
	color: var(--wp--preset--color--navy-600);
	font-size: var(--wp--preset--font-size--fine);
	font-weight: 500;
	line-height: 1;
}
@media (max-width: 767px) {
	.elt-program-row { grid-template-columns: 1fr; }
	.elt-program-media { min-height: 200px; }
	.elt-program-cols { grid-template-columns: 1fr; }
}

/* ============================================================================
   Languages page — callout banner + language finder
   ============================================================================ */

/* Tinted callout banner. */
.elt-callout {
	background: var(--wp--preset--color--cyan-50);
	border: 1px solid var(--wp--preset--color--cyan-200);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-9);
}
.elt-callout > * { margin-block: 0; }
.elt-callout-icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 800;
}

/* Finder header — search box aligns to the heading baseline. */
.elt-finder-head {
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-6);
}
.elt-finder-head > * { margin-block: 0; }
.elt-finder-search {
	position: relative;
	width: 320px;
	max-width: 100%;
}
.elt-finder-input {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 18px 14px 44px;
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	color: var(--wp--preset--color--navy-800);
	outline: none;
}
.elt-finder-icon {
	position: absolute;
	left: 17px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--navy-100);
	font-size: 16px;
	pointer-events: none;
}

/* Finder grid — the Query Loop's post list becomes a 4-up card grid. */
.elt-lang-finder .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--space-4);
	margin: 0;
}
.elt-lang-finder .wp-block-post-template > * { margin: 0; }
.elt-finder-empty { grid-column: 1 / -1; padding: var(--wp--preset--spacing--space-12) 0; }
@media (max-width: 1023px) {
	.elt-lang-finder .wp-block-post-template { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.elt-lang-finder .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
	.elt-lang-finder .wp-block-post-template { grid-template-columns: 1fr; }
}

/* Language card. */
.is-style-language-card {
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--lg);
}
.elt-flag {
	height: 92px;
	padding: var(--wp--preset--spacing--space-5);
	background: var(--wp--preset--color--gray-50);
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
	display: flex;
	align-items: center;
	justify-content: center;
}
.elt-flag .wp-block-post-featured-image { margin: 0; height: 100%; }
.elt-flag img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	border-radius: 4px;
}
.elt-lang-body { padding: var(--wp--preset--spacing--space-6); }
.elt-lang-body > * { margin: 0; }
.elt-lang-body .wp-block-post-title { margin: 0; }
.elt-lang-body .wp-block-post-meta { margin: 2px 0 0; }

/* ============================================================================
   Our Work / Clients page — clients by industry + reviews
   ============================================================================ */

.elt-narrow-680 { max-width: 680px; margin-left: auto; margin-right: auto; }

/* Clients grouped by business area (rendered by the [elt_clients_by_industry] shortcode). */
.elt-client-group { margin-bottom: var(--wp--preset--spacing--space-14); }
.elt-client-group:last-child { margin-bottom: 0; }
.elt-client-group__head {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--space-4);
	margin-bottom: var(--wp--preset--spacing--space-6);
	padding-bottom: var(--wp--preset--spacing--space-4);
	border-bottom: 2px solid var(--wp--preset--color--navy-700);
}
.elt-client-group__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--card-title-sm);
	font-weight: 700;
	color: var(--wp--preset--color--navy-800);
}
.elt-client-group__count {
	font-size: var(--wp--preset--font-size--fine);
	font-weight: 600;
	color: var(--wp--preset--color--navy-100);
}
.elt-client-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--wp--preset--spacing--space-4);
}
.elt-client-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 118px;
	padding: var(--wp--preset--spacing--space-6);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: var(--wp--custom--radius--lg);
}
.elt-client-logo img {
	max-height: 60px;
	max-width: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
}
@media (max-width: 1023px) { .elt-client-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 781px)  { .elt-client-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px)  { .elt-client-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================
   Careers page — role rows, dark process steps, apply form
   ============================================================================ */

/* Roles — stacked bordered rows split into title | description | apply button. */
.elt-role-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-5);
}
.elt-role-list > * { margin-block: 0; }
.elt-role-row {
	display: grid;
	grid-template-columns: 1fr 2fr auto;
	gap: var(--wp--preset--spacing--space-8);
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xxl);
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-9);
}
.elt-role-row > * { margin-block: 0; }
@media (max-width: 767px) {
	.elt-role-row { grid-template-columns: 1fr; }
}

/* Process — dark variant of the numbered steps, on a navy band. */
.elt-step-dark {
	border-top: 2px solid rgba(255, 255, 255, 0.16);
	padding-top: var(--wp--preset--spacing--space-7);
}

/* Careers apply form — card holding the Forminator form. */
.elt-apply-card {
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xxl);
	padding: var(--wp--preset--spacing--space-10) var(--wp--preset--spacing--space-9);
}

/* Careers apply form (Forminator) — same card, ported to Forminator's own field markup.
   Unlike CF7, Forminator gives each field its own .forminator-row (no shared wrapper for a
   two-field row), so pairing First/Last name and Language/Based-in side by side is done by
   flexing the form's direct .forminator-row children and widening the paired ones via
   :has() on each field's stable id — no shared-row markup to hook into like CF7 had. */
.elt-apply-card .forminator-custom-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-4);
}
.elt-apply-card .forminator-custom-form > .forminator-row {
	flex: 1 1 100%;
	/* Forminator's own grid CSS (forminator-grid.open.min.css) puts a -15px/-15px/30px
	   margin on every .forminator-row via a selector — .forminator-ui.forminator-custom-
	   form:not(.forminator-size--small)[data-grid=open] .forminator-row — that's more
	   specific than a plain 3-class selector can beat without matching its exact
	   attribute/:not() chain. That negative margin is a gutter-compensation trick for
	   Forminator's own .forminator-col padding, which conflicts with the `gap`-based
	   spacing here (it's what visually misaligned the paired rows from the full-width
	   ones). Zeroing it is a narrow, 1-property override of a plugin default, not a fight
	   against our own cascade — !important is the pragmatic tool for exactly this. */
	margin: 0 !important;
}
.elt-apply-card .forminator-custom-form > .forminator-row:has(#text-1),
.elt-apply-card .forminator-custom-form > .forminator-row:has(#text-2),
.elt-apply-card .forminator-custom-form > .forminator-row:has(#text-3),
.elt-apply-card .forminator-custom-form > .forminator-row:has(#text-4) {
	flex: 1 1 calc(50% - var(--wp--preset--spacing--space-4) / 2);
}
.elt-apply-card .forminator-row,
.elt-apply-card .forminator-col {
	min-width: 0;
}
/* Same specificity fight as the .forminator-row margin above — Forminator's grid CSS also
   gives every .forminator-col a 0 15px padding (the other half of its gutter-compensation
   pair with the row's negative margin), which shrinks the input area now that the row's
   margin is zeroed and nothing is left to compensate for it. */
.elt-apply-card .forminator-col {
	padding: 0 !important;
}
/* The bare <p> wrapping the hidden referer_url field has no visible content — hiding it
   outright (rather than giving it flex-basis: 100%, which fixed the same layout gap here
   but broke the Newsletter form's inline input+button row when tried there) sidesteps the
   flex-layout interaction entirely. */
.elt-apply-card .forminator-custom-form > p {
	display: none;
}
.elt-apply-card .forminator-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--space-2);
	font-size: var(--wp--preset--font-size--fine);
	font-weight: 600;
	color: var(--wp--preset--color--navy-600);
}
.elt-apply-card .forminator-required {
	color: var(--wp--preset--color--navy-200);
	font-weight: 400;
}
.elt-apply-card .forminator-input,
.elt-apply-card .forminator-textarea {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);
	border: 1px solid var(--wp--preset--color--gray-400);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-700);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	outline: none;
}
.elt-apply-card .forminator-textarea {
	height: 130px;
	resize: vertical;
}
.elt-apply-card .forminator-input::placeholder,
.elt-apply-card .forminator-textarea::placeholder {
	color: var(--wp--preset--color--navy-100);
	opacity: 1;
}
.elt-apply-card .forminator-button-submit {
	width: 100%;
	margin-top: var(--wp--preset--spacing--space-1);
	padding: var(--wp--preset--spacing--space-4);
	border: none;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cyan-900);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 700;
	cursor: pointer;
}
/* The (usually empty) response-message div is another zero-width-but-nonzero-height item
   in the form's flex flow — same fix as the hidden <p> above, but this one has real
   content when a submission actually errors/succeeds, so it's given its own full-width
   line instead of being hidden outright. */
.elt-apply-card .forminator-response-message {
	flex-basis: 100%;
	margin: 0 0 var(--wp--preset--spacing--space-4);
	font-size: var(--wp--preset--font-size--fine);
}

/* Resume/CV upload field — with the form's "Appearance: None" style (see mapa-css.md),
   Forminator renders almost nothing for a single-file upload beyond a bare native
   <input type="file"> plus a hidden "Remove" button — no dropzone box, no chosen-file
   feedback, no drag-and-drop wiring (that's Forminator-native only for multi-file
   uploads). The dropzone visuals (icon, label, filename feedback) are DOM nodes injected
   by assets/js/careers-upload.js at runtime; this CSS only lays out the wrapper the
   plugin already renders and the nodes that script adds inside it. The native input stays
   in the DOM, stretched invisibly over the whole box, so click/keyboard/drag-drop target
   it directly and Forminator's own validation/upload handling keeps working untouched. */
.elt-apply-card .forminator-field-upload .forminator-label {
	margin-bottom: var(--wp--preset--spacing--space-2);
}
.elt-apply-card .forminator-file-upload {
	position: relative;
	padding: var(--wp--preset--spacing--space-4);
	border: 1.5px dashed var(--wp--preset--color--gray-500);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* The icon+text pair is wrapped in this one non-<span> div (see careers-upload.js) rather
   than appended as bare <span> children of .forminator-file-upload — Forminator's own
   front.multi.js listens for the input's "change" event and does
   `$upload.find('> span').text(filename)`, i.e. it blindly overwrites the .html() of every
   *direct* <span> child with the raw filename on every selection. Two bare spans there
   (icon + text) both got clobbered with plain filename text, wiping the nested title/
   subtitle/icon markup. Nesting them one level deeper, inside a <div>, keeps them out of
   that `> span` selector entirely. */
.elt-apply-card .forminator-upload-visual {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4);
}
.elt-apply-card .forminator-file-upload:hover,
.elt-apply-card .forminator-file-upload.is-dragover {
	border-color: var(--wp--preset--color--cyan-400);
	background: var(--wp--preset--color--cyan-50);
}
.elt-apply-card .forminator-file-upload.has-file {
	border-style: solid;
	border-color: var(--wp--preset--color--cyan-400);
}
/* The real <input type="file"> — kept functional (click, keyboard, native drag-drop
   target) but stretched invisibly over the whole dropzone, on top of the injected visuals. */
.elt-apply-card .forminator-file-upload input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.elt-apply-card .forminator-upload-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--cyan-50);
}
.elt-apply-card .forminator-upload-icon svg {
	width: 19px;
	height: 19px;
	stroke: var(--wp--preset--color--cyan-600);
}
.elt-apply-card .forminator-upload-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}
/* Long filenames wrap instead of overflowing the box — break-word/word-break together so a
   single unbroken run of characters (no spaces, e.g. "comp-residencia-bruno-2026.pdf") still
   wraps instead of pushing the box wider than its column. */
.elt-apply-card .forminator-upload-title {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	color: var(--wp--preset--color--navy-700);
	overflow-wrap: break-word;
	word-break: break-word;
}
.elt-apply-card .forminator-upload-subtitle {
	font-size: var(--wp--preset--font-size--fine);
	color: var(--wp--preset--color--navy-100);
}
/* The field's configured description ("PDF, DOC or DOCX · up to 5 MB") is rendered by
   Forminator as its own paragraph after the dropzone, not inside it — the script copies
   its text into .forminator-upload-subtitle above, so the original is redundant. */
.elt-apply-card .forminator-field-upload .forminator-description {
	display: none;
}

/* Reviews — rating badge + masonry of cards. */
.elt-rating-badge {
	margin-inline: auto;
	width: fit-content;
	align-items: center;
	gap: var(--wp--preset--spacing--space-3);
	padding: 10px 20px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 999px;
}
.elt-rating-badge > * { margin-block: 0; }
.elt-stars {
	margin: 0;
	color: var(--wp--preset--color--gold);
	letter-spacing: 2px;
	line-height: 1;
}
.elt-rating-badge .elt-stars { font-size: 18px; }
.is-style-review-card .elt-stars { font-size: 14px; }

.elt-reviews { columns: 3; column-gap: var(--wp--preset--spacing--space-6); }
.elt-reviews > * { margin: 0 0 var(--wp--preset--spacing--space-6); break-inside: avoid; }
.is-style-review-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--space-9) var(--wp--preset--spacing--space-8);
}
.elt-review-foot {
	align-items: center;
	gap: var(--wp--preset--spacing--space-4);
	border-top: 1px solid var(--wp--preset--color--gray-200);
	padding-top: var(--wp--preset--spacing--space-4);
}
.elt-review-foot > * { margin-block: 0; }
.elt-review-foot p { margin: 0; }
.elt-review-avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--cyan-50);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
}
@media (max-width: 1023px) { .elt-reviews { columns: 2; } }
@media (max-width: 599px)  { .elt-reviews { columns: 1; } }

/* ============================================================================
   Blog / Insights page
   ============================================================================ */

/* Small cyan "eyebrow" badge — featured tag, per-post category label. */
.is-style-badge {
	display: inline-block;
	/* Prevent flex-column parents (e.g. .elt-blog-card-body, align-items:stretch by default)
	   from stretching the badge to the card's full width — it must stay pill-sized. */
	align-self: flex-start;
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--cyan-50);
	color: var(--wp--preset--color--cyan-600);
	font-size: var(--wp--preset--font-size--fine);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}
.is-style-badge a {
	color: inherit;
	text-decoration: none;
}

/* Category filter — plain-HTML row of <button> pills (see patterns/blog-post-grid.php +
   assets/js/blog-filter.js), not a real block: needed for the "All" pill and the client-side
   filter behavior, which core/categories can't do (it only renders real archive-link <a>s). */
.elt-blog-cat-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-3);
	margin: 0;
	padding: 0;
}
.elt-blog-cat-pill {
	display: inline-block;
	margin: 0;
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--gray-400);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-600);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.elt-blog-cat-pill.is-active {
	background: var(--wp--preset--color--navy-700);
	border-color: var(--wp--preset--color--navy-700);
	color: var(--wp--preset--color--white);
}
/* Filtered-out cards — same hidden convention as the language finder's search filter. */
.elt-blog-grid .wp-block-post.is-hidden {
	display: none;
}
.elt-blog-grid-empty {
	grid-column: 1 / -1;
	padding: var(--wp--preset--spacing--space-12) 0;
	color: var(--wp--preset--color--navy-300);
}

/* Post grid — three equal columns, responsive down to one. */
.elt-blog-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--space-6);
	margin: 0;
}
.elt-blog-grid .wp-block-post-template > * { margin: 0; }
@media (max-width: 1023px) { .elt-blog-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .elt-blog-grid .wp-block-post-template { grid-template-columns: 1fr; } }

/* Post card — image on top, padded body below, equal height within the grid row. */
.is-style-blog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.is-style-blog-card .wp-block-post-featured-image {
	margin: 0;
}
.is-style-blog-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.is-style-blog-card .elt-blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--wp--preset--spacing--space-6) var(--wp--preset--spacing--space-6) var(--wp--preset--spacing--space-7);
}

/* Featured post — two-column card, image left, content right. */
.is-style-featured-post-card {
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xl);
}
.is-style-featured-post-card .wp-block-column:first-child {
	margin: 0;
	align-self: stretch;
}
.is-style-featured-post-card .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}
.is-style-featured-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
}
.is-style-featured-post-card .elt-blog-card-body {
	padding: var(--wp--preset--spacing--space-12);
}

/* ============================================================================
   Single blog post
   ============================================================================ */

/* Reading progress — sticky track under the header, filled by assets/js/blog-post.js. */
.elt-reading-progress {
	position: sticky;
	/* Sits directly under the sticky header rather than behind it. */
	top: var(--elt-header-offset, 0px);
	z-index: 40;
	height: 3px;
	background: var(--wp--preset--color--gray-200);
}
.elt-reading-progress-bar {
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--wp--preset--color--cyan-400), var(--wp--preset--color--cyan-600));
}

.elt-post-byline {
	align-items: center;
	padding-top: var(--wp--preset--spacing--space-4);
	border-top: 1px solid var(--wp--preset--color--gray-200);
}
.elt-post-byline .wp-block-group { margin: 0; }
.elt-post-byline .wp-block-avatar img {
	border-radius: 50%;
}
.elt-post-hero img {
	width: 100%;
	height: 440px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--xxl);
}

/* Body + sticky sidebar. minmax(0, 1fr) — same reasoning as .elt-grid-2 — keeps the article
   column from being pushed wide by any unshrinkable content (e.g. a wide code sample or table). */
.elt-article-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--wp--preset--spacing--space-16);
	align-items: start;
}
@media (max-width: 1023px) {
	.elt-article-grid {
		grid-template-columns: 1fr;
	}
}

.elt-article-sidebar {
	position: sticky;
	top: var(--wp--preset--spacing--space-10);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-6);
}
.elt-toc-card,
.elt-toc-share {
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xxl);
	padding: var(--wp--preset--spacing--space-6);
}
.elt-toc-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-3);
	margin-top: var(--wp--preset--spacing--space-4);
}
.elt-toc-list a {
	color: var(--wp--preset--color--navy-600);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	text-decoration: none;
	line-height: 1.45;
}
.elt-toc-cta {
	background: var(--wp--preset--color--navy-700);
	border-radius: var(--wp--custom--radius--xxl);
	padding: var(--wp--preset--spacing--space-6);
}
.elt-toc-cta .wp-block-button__link {
	width: 100%;
}
.elt-share-buttons .wp-block-button {
	flex: 1;
}
.is-style-outline-share .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	background: transparent;
	color: var(--wp--preset--color--navy-600);
	border: 1px solid var(--wp--preset--color--gray-400);
	padding: var(--wp--preset--spacing--space-2) 0;
	font-size: var(--wp--preset--font-size--fine);
	font-weight: 600;
}

/* Article body typography. */
.entry-content {
	max-width: 100%;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.75;
	color: var(--wp--preset--color--navy-600);
}
.entry-content > * + * {
	margin-top: var(--wp--preset--spacing--space-6);
}
.entry-content h2 {
	/* Offsets the anchor target so a TOC click (or in-page link) doesn't land the heading
	   underneath the sticky header and reading-progress bar. Same expression as the global
	   `[id]` rule, plus the bar's own 3px. */
	scroll-margin-top: calc(var(--elt-header-offset, 0px) + var(--wp--preset--spacing--space-8) + 3px);
}
.is-style-pull-quote {
	border-left: 4px solid var(--wp--preset--color--cyan-400);
	background: var(--wp--preset--color--cyan-50);
	border-radius: 0 var(--wp--custom--radius--xl) var(--wp--custom--radius--xl) 0;
	padding: var(--wp--preset--spacing--space-7) var(--wp--preset--spacing--space-8);
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: var(--wp--preset--font-size--card-title-lg);
	color: var(--wp--preset--color--navy-800);
}

/* Inline CTA — light tinted band (counterpart to .is-style-cta-dark). */
.is-style-cta-light {
	background: var(--wp--preset--color--cyan-50);
	border: 1px solid var(--wp--preset--color--cyan-200);
	border-radius: var(--wp--custom--radius--xxl);
	padding: var(--wp--preset--spacing--space-10) var(--wp--preset--spacing--space-9);
}

/* Newsletter signup form (Forminator) — same dark-band treatment, ported to Forminator's own
   markup. Forminator gives the email field and the submit button their own top-level
   .forminator-row each (no shared wrapper), so the inline "input + button" layout flexes the
   form's direct .forminator-row children directly instead of a shared row/control-wrap. */
.is-style-cta-dark .forminator-custom-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-3);
	flex: 1 1 320px;
	min-width: 0;
	max-width: 460px;
}
.is-style-cta-dark .forminator-custom-form > .forminator-row {
	/* Same Forminator grid-CSS override as the other 2 forms — see the comment in the
	   .elt-apply-card block. */
	margin: 0 !important;
}
.is-style-cta-dark .forminator-custom-form > .forminator-row:has(#email-1) {
	flex: 1 1 0;
	min-width: 0;
	order: 1;
}
/* The Captcha field's row sits in the DOM between Email and the Subscribe button (Forminator
   always renders fields before the submit row, and Subscribe isn't a draggable field, so it
   can't be reordered after it from the editor). Left inline, its fixed ~300px width squeezed
   the email input down to a few px. Visually reorder with flex `order` instead: email + button
   stay on the first line, Turnstile drops to its own full-width line below. */
.is-style-cta-dark .forminator-custom-form > .forminator-row:has(#captcha-1) {
	flex: 1 1 100%;
	order: 3;
}
.is-style-cta-dark .forminator-custom-form > .forminator-row.forminator-row-last {
	order: 2;
}
.is-style-cta-dark .forminator-input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--space-4);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--wp--custom--radius--lg);
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	outline: none;
}
.is-style-cta-dark .forminator-input::placeholder {
	color: var(--wp--preset--color--gray-600);
}
.is-style-cta-dark .forminator-button-submit {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: var(--wp--preset--spacing--space-4) var(--wp--preset--spacing--space-7);
	border: none;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cyan-900);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	cursor: pointer;
}
.is-style-cta-dark .forminator-button-submit.forminator-button-onload {
	opacity: 0.7;
	cursor: progress;
}
.is-style-cta-dark .forminator-response-message {
	flex-basis: 100%;
	order: 4;
	margin: var(--wp--preset--spacing--space-2) 0 0;
	color: var(--wp--preset--color--gray-100);
	font-size: var(--wp--preset--font-size--fine);
}

/* Request a Proposal — form column + dark sidebar column, side by side.
   Unlike the other sections, nothing here bleeds: the whole grid (form column 824px + dark
   sidebar 400px) is held inside the central container, so the sidebar's right edge lines up
   with every other section's content edge. Only the surrounding white background is
   full-width. The form column's own `.elt-px-14` would double the grid's left inset, so it is
   neutralised here — its 52px right padding, set inline in the pattern, is what separates it
   from the sidebar. */
.elt-proposal-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	padding-left: max(var(--wp--preset--spacing--space-14), calc((100% - var(--wp--style--global--content-size)) / 2));
	padding-right: max(var(--wp--preset--spacing--space-14), calc((100% - var(--wp--style--global--content-size)) / 2));
}
.elt-proposal-grid > .elt-px-14 {
	padding-left: 0;
	padding-right: 52px;
}
@media (max-width: 1023px) {
	.elt-proposal-grid {
		grid-template-columns: 1fr;
		/* Stacked: the sidebar runs edge to edge under the form, as before, so the grid drops its
		   own gutter and the form column takes it back. */
		padding-left: 0;
		padding-right: 0;
	}
	.elt-proposal-grid > .elt-px-14 {
		padding-left: max(var(--wp--preset--spacing--space-14), calc((100% - var(--wp--style--global--content-size)) / 2));
		padding-right: max(var(--wp--preset--spacing--space-14), calc((100% - var(--wp--style--global--content-size)) / 2));
	}
}

/* Request a Proposal (Forminator) — same field styling as .elt-apply-card, without the boxed
   card look, ported to Forminator's own markup. Same :has()-on-id pairing technique as the
   careers form for the two-up rows (First/Last name, Email/Phone). */
.elt-proposal-form .forminator-custom-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-6) var(--wp--preset--spacing--space-4);
}
.elt-proposal-form .forminator-custom-form > .forminator-row {
	flex: 1 1 100%;
	/* See the matching comment in the .elt-apply-card block above — Forminator's own grid
	   CSS puts a -15px/-15px/30px margin on every .forminator-row at higher specificity
	   than a plain class selector can beat, which fights the `gap`-based spacing here. */
	margin: 0 !important;
}
.elt-proposal-form .forminator-custom-form > .forminator-row:has(#text-1),
.elt-proposal-form .forminator-custom-form > .forminator-row:has(#text-2),
.elt-proposal-form .forminator-custom-form > .forminator-row:has(#email-1),
.elt-proposal-form .forminator-custom-form > .forminator-row:has(#phone-1) {
	flex: 1 1 calc(50% - var(--wp--preset--spacing--space-4) / 2);
}
.elt-proposal-form .forminator-row,
.elt-proposal-form .forminator-col {
	min-width: 0;
}
/* Same specificity fight as the .forminator-row margin (see .elt-apply-card above) —
   Forminator's grid CSS gives every .forminator-col a 0 15px padding, shrinking the input
   area now that the row's own margin is zeroed and nothing compensates for it. */
.elt-proposal-form .forminator-col {
	padding: 0 !important;
}
.elt-proposal-form .forminator-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--space-2);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy-700);
}
.elt-proposal-form .forminator-required {
	color: var(--wp--preset--color--navy-200);
	font-weight: 400;
}
.elt-proposal-form .forminator-description {
	display: block;
	margin-top: var(--wp--preset--spacing--space-2);
	font-size: var(--wp--preset--font-size--fine);
	font-weight: 400;
	color: var(--wp--preset--color--navy-200);
}
.elt-proposal-form .forminator-input,
.elt-proposal-form .forminator-textarea {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--space-4);
	border: 1px solid var(--wp--preset--color--gray-400);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-700);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	outline: none;
}
.elt-proposal-form .forminator-textarea {
	height: 150px;
	resize: vertical;
}
.elt-proposal-form .forminator-input::placeholder,
.elt-proposal-form .forminator-textarea::placeholder {
	color: var(--wp--preset--color--navy-100);
	opacity: 1;
}
.elt-proposal-form .forminator-button-submit {
	padding: var(--wp--preset--spacing--space-5) var(--wp--preset--spacing--space-9);
	border: none;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cyan-900);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 700;
	cursor: pointer;
}
.elt-proposal-form .forminator-button-submit.forminator-button-onload {
	opacity: 0.7;
	cursor: progress;
}
/* Same fix as .elt-apply-card — hide the bare <p> wrapping the hidden referer_url field
   outright, sidestepping the flex-layout interaction entirely. */
.elt-proposal-form .forminator-custom-form > p {
	display: none;
}
.elt-proposal-form .forminator-response-message {
	flex-basis: 100%;
	margin: 0 0 var(--wp--preset--spacing--space-4);
	font-size: var(--wp--preset--font-size--fine);
}

/* Training-type picker — Forminator radio field styled as selectable cards, no JS.
   Forminator renders the field as one [role=radiogroup] wrapping a .forminator-label
   (the question) and one <label class="forminator-radio"> per option (no extra list-item
   wrapper like CF7 had) — :has(:checked) drives the selected state purely in CSS. Each
   card's subtitle isn't part of the field's value (radio option labels are plain text, no
   HTML), so it's injected as a ::after on the fixed, known 3-item order via nth-of-type,
   same technique as the CF7 version above. */
/* The question text (.forminator-label) is rendered as the [role=radiogroup]'s own first
   child, inside the same grid as the 3 option cards — grid-column spans it across all 3
   columns so it sits on its own row above them, instead of eating column 1 row 1. */
.elt-proposal-form .forminator-field-radio .forminator-label {
	display: block;
	grid-column: 1 / -1;
	margin: 0 0 var(--wp--preset--spacing--space-3);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy-700);
}
.elt-proposal-form [role="radiogroup"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--space-3);
}
@media (max-width: 600px) {
	.elt-proposal-form [role="radiogroup"] {
		grid-template-columns: 1fr;
	}
}
.elt-proposal-form .forminator-radio {
	display: block;
	cursor: pointer;
	padding: var(--wp--preset--spacing--space-5);
	border: 1.5px solid var(--wp--preset--color--gray-400);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	transition:
		border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard),
		background var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard);
}
.elt-proposal-form .forminator-radio:has(input:checked) {
	border-color: var(--wp--preset--color--cyan-400);
	background: var(--wp--preset--color--cyan-50);
}
.elt-proposal-form .forminator-radio:has(input:checked) .forminator-radio-label {
	color: var(--wp--preset--color--cyan-600);
}
.elt-proposal-form .forminator-radio input[type="radio"],
.elt-proposal-form .forminator-radio-bullet {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.elt-proposal-form .forminator-radio-label {
	display: block;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	color: var(--wp--preset--color--navy-700);
}
.elt-proposal-form .forminator-radio-label::after {
	display: block;
	margin-top: var(--wp--preset--spacing--space-1);
	font-size: var(--wp--preset--font-size--fine);
	font-weight: 400;
	color: var(--wp--preset--color--navy-300);
}
.elt-proposal-form .forminator-radio:nth-of-type(1) .forminator-radio-label::after {
	content: "Speaking, writing and business communication";
}
.elt-proposal-form .forminator-radio:nth-of-type(2) .forminator-radio-label::after {
	content: "Working and living in a new culture";
}
.elt-proposal-form .forminator-radio:nth-of-type(3) .forminator-radio-label::after {
	content: "Language and culture in one program";
}

/* Proposal sidebar — dark navy column with arrow-bullet list, stat grid, and pull-quote. */
.elt-proposal-sidebar {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-9);
}
.elt-arrow-list > * + * {
	margin-top: var(--wp--preset--spacing--space-5);
}
.elt-arrow-item {
	gap: var(--wp--preset--spacing--space-3);
	align-items: flex-start;
}
.elt-arrow-item > * {
	margin: 0;
}
.elt-proposal-quote {
	border-left: 3px solid var(--wp--preset--color--cyan-400);
	padding-left: var(--wp--preset--spacing--space-6);
}
.elt-proposal-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
}

/* Thank You — confirmation hero. Decorative radial glow, top-right, matching the reference
   design's blurred cyan circle behind the checkmark/heading. */
.elt-confirm-hero {
	position: relative;
	overflow: hidden;
}
.elt-confirm-hero::before {
	content: "";
	position: absolute;
	top: -160px;
	right: -120px;
	width: 520px;
	height: 520px;
	border-radius: 999px;
	background: radial-gradient(circle at center, rgba(53, 193, 222, 0.22), rgba(53, 193, 222, 0) 70%);
	pointer-events: none;
}
.elt-confirm-hero > * {
	position: relative;
}
.elt-confirm-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cyan-900);
	font-size: 30px;
	font-weight: 700;
}

/* Newsletter — "Check your email" mail-icon medallion, centered above the hero copy. Light
   counterpart to .elt-confirm-badge above (which is the dark/checkmark "confirmed" state). */
.elt-mail-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: 0 auto;
	border-radius: var(--wp--custom--radius--xxl);
	background: var(--wp--preset--color--cyan-50);
}
.elt-mail-badge svg {
	display: block;
}

/* Newsletter — "Nothing in your inbox?" troubleshooting card. */
.elt-troubleshoot-card {
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xxl);
	padding: var(--wp--preset--spacing--space-9) var(--wp--preset--spacing--space-10);
	background: var(--wp--preset--color--gray-50);
}

/* Thank You — "What happens next" numbered step cards. */
.elt-step-card {
	height: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--space-9) var(--wp--preset--spacing--space-8);
}

/* Thank You — full-bleed contact strip, hairline top/bottom border, no radius. */
.elt-contact-strip {
	padding-top: var(--wp--preset--spacing--space-9);
	padding-bottom: var(--wp--preset--spacing--space-9);
	border-top: 1px solid var(--wp--preset--color--cyan-200);
	border-bottom: 1px solid var(--wp--preset--color--cyan-200);
}

/* ============================================================================
   Case study (inner-page) sections
   ============================================================================ */

/* Tinted metric band under the hero — closed off with a hairline so it reads as its own
   strip rather than as the top of the section that follows. The tint itself is the
   section group's own `cyan-50` background attribute. */
.elt-case-band {
	border-bottom: 1px solid var(--wp--preset--color--gray-100);
}

/* Story + fact panel. minmax(0, 1fr) — same reasoning as .elt-grid-2 — keeps the prose
   column from being widened by anything unshrinkable; the panel stays a fixed 340px. */
.elt-case-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--wp--preset--spacing--space-18);
	align-items: start;
}
@media (max-width: 1023px) {
	.elt-case-grid {
		grid-template-columns: 1fr;
	}
}

/* The fact panel itself. Deliberately not `is-style-card`: this is a reference panel, and
   the hover lift those cards carry would imply it is clickable. */
.elt-case-aside {
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xxl);
	padding: var(--wp--preset--spacing--space-10) var(--wp--preset--spacing--space-9);
}
/* Client logo at the top of the fact panel. Same aspect-driven sizing as the index rows,
   scaled to the panel: a wide wordmark is held by the width (AbbVie lands at 132x24), a
   squarish one by the height (NBC at 40x38). */
.elt-case-aside .wp-block-image {
	width: 132px;
	max-width: 100%;
	margin: 0;
}
.elt-case-aside .wp-block-image img {
	width: 100%;
	max-height: 38px;
	height: auto;
	object-fit: contain;
	object-position: left center;
	display: block;
}

/* Figure/number beside its copy (challenge and result cards). `.elt-flex` alone centres and
   wraps; these rows must stay side by side and top-aligned, and the flow margin core adds to
   the second child has to go or it lands below the number instead of next to it. */
.elt-case-row {
	flex-wrap: nowrap;
	align-items: flex-start;
}
.elt-case-row > * {
	margin-block: 0;
}
/* Keep a figure like "53 h" on one line — it is one value, not two words. */
.elt-case-figure {
	white-space: nowrap;
}

/* Split feature panel — dark copy on one side, photography bleeding to the edge on the
   other. The radius lives on the wrapper with overflow:hidden so the image is clipped by
   it; the columns carry no padding of their own. */
.elt-case-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xxl);
	overflow: hidden;
}
.elt-case-split > * {
	margin-block: 0;
}
.elt-case-split-media {
	position: relative;
	min-height: 380px;
}
.elt-case-split-media .wp-block-image,
.elt-case-split-media .wp-block-image img {
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 767px) {
	.elt-case-split {
		grid-template-columns: 1fr;
	}
	.elt-case-split-media {
		min-height: 260px;
	}
}

/* Timeline — four equal columns, each opening with a coloured rule. The rule is a
   core/separator so the row stays native blocks; core's own separator styling is reset
   here because it ships as a centred, max-width hairline. */
.elt-case-timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--space-9);
}
.elt-case-timeline > * {
	margin-block: 0;
}
/* Three-stage variant (NBC) — same rhythm, one column fewer. */
.elt-case-timeline-3 {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1023px) {
	.elt-case-timeline,
	.elt-case-timeline-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 599px) {
	.elt-case-timeline,
	.elt-case-timeline-3 {
		grid-template-columns: 1fr;
	}
}
.elt-case-bar {
	width: 100%;
	max-width: none;
	height: 3px;
	margin: 0 0 var(--wp--preset--spacing--space-7);
	border: 0;
	opacity: 1;
}
/* Four steps of the cyan ramp, fading as the story moves forward. Only the first is a
   palette token — the three tints exist for this row alone and are not brand colours, so
   they stay local instead of being promoted into theme.json. */
.elt-case-bar-1 { background: var(--wp--preset--color--cyan-400); }
.elt-case-bar-2 { background: #7bd5e8; }
.elt-case-bar-3 { background: #b5e7f1; }
.elt-case-bar-4 { background: #dcf2f7; }

/* Case-study index rows (Clients page) — alternating text/logo pairs separated by a
   hairline, the last one running clean into the section below. */
.elt-case-index-row {
	padding-bottom: var(--wp--preset--spacing--space-11);
	border-bottom: 1px solid var(--wp--preset--color--gray-300);
}
.elt-case-index-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
/* Reverse variant puts the logo/button column first. Only above the .elt-grid-2 collapse
   breakpoint — once stacked, the copy should lead in both rows. */
@media (min-width: 768px) {
	.elt-case-index-reverse > *:first-child { order: 2; }
}
/* Logo stacked over its button, the pair centred in the column. The two caps size every
   mark from its own aspect ratio, so a wide wordmark is held by the width and a tall one by
   the height, without a per-client rule: AbbVie lands at 215x39, NBC at 155x146. */
.elt-case-index-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* The figure needs the explicit width: centred in a flex column it otherwise shrink-wraps to
   the file's intrinsic size (abbvie.svg ships at 88x16), leaving the image nothing to fill. */
.elt-case-index-logo .wp-block-image {
	width: 215px;
	max-width: 100%;
	margin: 0;
}
.elt-case-index-logo img {
	width: 100%;
	max-height: 146px;
	height: auto;
	object-fit: contain;
}