/* =========================================================================
   Island Entertainment — design system
   Navy ink on cream and white paper. Hairline rules. Sharp corners.
   Serif speaks, sans works.
   ========================================================================= */

:root {
	--ie-navy: #16283F;
	--ie-navy-deep: #0F1D2F;
	--ie-cream: #F5F1E8;
	--ie-white: #FFFFFF;
	--ie-ink: #2B3A4C;      /* body text — 9.9:1 on cream */
	--ie-muted: #5A6B7E;    /* secondary text — 5.1:1 on cream */
	--ie-line: rgba(22, 40, 63, 0.16);
	--ie-line-strong: rgba(22, 40, 63, 0.4);
	--ie-on-navy-muted: #B9C6D6; /* secondary on navy — 8:1 */
	--ie-on-navy-line: rgba(255, 255, 255, 0.22);

	--ie-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--ie-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* Hero display face — HERO HEADLINES ONLY (client choice, 2026-08-13).
	   Ramabhadra ships weight 400 and nothing else; never ask for bold, the
	   browser would synthesise it. Every other heading stays on --ie-serif —
	   the hero/body split is deliberate, not drift (see DESIGN.md → Type). */
	--ie-display: 'Ramabhadra', 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--ie-section-pad: clamp(4.5rem, 9vw, 7.5rem);
	--ie-container: 1200px;
	--ie-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--ie-header-h: 6rem;
}

/* ------------------------------------------------------------------ base */

html {
	scroll-padding-top: calc(var(--ie-header-h) + 1rem);
}

body {
	font-family: var(--ie-sans);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ie-ink);
	background: var(--ie-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--ie-serif);
	font-weight: 400;
	color: var(--ie-navy);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 1.25rem;
	text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 6vw, 4.25rem); line-height: 1.06; }
h2 { font-size: clamp(2rem, 4vw, 2.875rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.1875rem; font-family: var(--ie-sans); font-weight: 600; }

p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--ie-navy);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover { color: var(--ie-navy-deep); }

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

::selection { background: var(--ie-navy); color: var(--ie-white); }

:focus-visible {
	outline: 2px solid var(--ie-navy);
	outline-offset: 3px;
}

.ie-section--navy :focus-visible,
.ie-footer :focus-visible,
.ie-header :focus-visible {
	outline-color: var(--ie-white);
}

/* ------------------------------------------------- layout & GP overrides */

.site-content { padding: 0; }

/* Belt-and-suspenders: GP's own nav and sidebars never render in this theme. */
#site-navigation,
.main-navigation,
#right-sidebar,
#left-sidebar { display: none !important; }

/* Sections are authored as alignfull blocks; break them out of GP's box. */
.entry-content .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

/* THE 100vw TRAP, and it is not hypothetical — it was measured.
   `100vw` counts the scrollbar; `clientWidth` does not. On a platform with
   CLASSIC space-taking scrollbars (Windows, Linux, and macOS with "always
   show scroll bars") every alignfull block above is ~15px wider than the
   document and overhangs ~7.5px each side, raising a horizontal scrollbar.

   Measured 2026-08-10 with a forced 15px scrollbar: EVERY page overflowed by
   8px — /, /about/, /leadership/, /contact/ alike — so this long predates the
   full-bleed marquee, which overhangs by exactly the same amount and adds
   nothing to it. macOS and mobile use overlay scrollbars, which take no
   layout width, which is why it had never shown up locally.

   `.site` is the right place to absorb it: the fixed header is a SIBLING of
   this element, not a descendant, so clipping here cannot affect it (verified
   — still fixed, still full width, still pinned at top 0 after the change).
   `clip` and not `hidden`, so the vertical axis is not turned into a scroll
   container. */
.site {
	overflow-x: clip;
}

.entry-content > *:first-child { margin-top: 0; }

.ie-container,
.ie-section__inner {
	max-width: var(--ie-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ie-gutter);
	padding-right: var(--ie-gutter);
}

.ie-section {
	padding-top: var(--ie-section-pad);
	padding-bottom: var(--ie-section-pad);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.ie-section--cream { background: var(--ie-cream); }

.ie-section--navy {
	background: var(--ie-navy);
	color: var(--ie-on-navy-muted);
}

.ie-section--navy h1,
.ie-section--navy h2,
.ie-section--navy h3,
.ie-section--navy p { color: var(--ie-white); }

.ie-section--navy a { color: var(--ie-white); }

/* ---------------------------------------------------------------- eyebrow */

.ie-eyebrow {
	display: block;
	font-family: var(--ie-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ie-navy);
	margin: 0 0 1.1rem;
}

.ie-eyebrow::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: var(--ie-navy);
	margin-top: 0.85rem;
}

.ie-eyebrow--center { text-align: center; }
.ie-eyebrow--center::after { margin-left: auto; margin-right: auto; }

.ie-section--navy .ie-eyebrow { color: var(--ie-on-navy-muted); }
.ie-section--navy .ie-eyebrow::after { background: var(--ie-on-navy-line); }

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

/*
 * Outline button system (mockup spec): 1px navy border, transparent ground,
 * navy letterspaced uppercase, roomy horizontal padding. Selector chains are
 * deliberately heavy — core's element styles and GP's button defaults both
 * try to paint solid fills, and every state must stay ours.
 */
.ie-btn,
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link.wp-element-button,
.entry-content .wp-block-buttons .wp-block-button__link {
	display: inline-block;
	font-family: var(--ie-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	height: auto;
	padding: 0.95rem 2.5rem;
	border: 1px solid var(--ie-navy);
	border-radius: 0;
	background: transparent none;
	background-color: transparent;
	color: var(--ie-navy);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ie-btn:visited,
.wp-block-button .wp-block-button__link:visited,
.entry-content .wp-block-buttons .wp-block-button__link:visited {
	color: var(--ie-navy);
}

.ie-btn:hover,
.ie-btn:focus-visible,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.entry-content .wp-block-buttons .wp-block-button__link:hover,
.entry-content .wp-block-buttons .wp-block-button__link:focus {
	background: var(--ie-navy);
	background-color: var(--ie-navy);
	color: var(--ie-white);
	border-color: var(--ie-navy);
}

.ie-btn--solid,
.entry-content .is-style-ie-solid .wp-block-button__link {
	background: var(--ie-navy);
	background-color: var(--ie-navy);
	color: var(--ie-white);
}

.ie-btn--solid:hover,
.entry-content .is-style-ie-solid .wp-block-button__link:hover {
	background: var(--ie-navy-deep);
	background-color: var(--ie-navy-deep);
	border-color: var(--ie-navy-deep);
}

.ie-section--navy .ie-btn,
.ie-section--navy .wp-block-button .wp-block-button__link,
.ie-section--navy .wp-block-button .wp-block-button__link.wp-element-button,
.ie-hero .wp-block-button .wp-block-button__link {
	border-color: var(--ie-white);
	color: var(--ie-white);
	background: transparent none;
	background-color: transparent;
}

.ie-section--navy .ie-btn:hover,
.ie-section--navy .ie-btn:focus-visible,
.ie-section--navy .wp-block-button .wp-block-button__link:hover,
.ie-section--navy .wp-block-button .wp-block-button__link:focus,
.ie-hero .wp-block-button .wp-block-button__link:hover {
	background: var(--ie-white);
	background-color: var(--ie-white);
	color: var(--ie-navy);
	border-color: var(--ie-white);
}

/* ---------------------------------------------------------------- wordmark */

/* Stacked letterspaced lockup (mockup): serif ISLAND over tracked sans
   ENTERTAINMENT. White — used in the navy header and footer. */
.ie-wordmark {
	display: inline-block;
	line-height: 1;
	color: var(--ie-white);
	text-decoration: none;
}

.ie-wordmark__primary {
	display: block;
	font-family: var(--ie-serif);
	font-weight: 400;
	font-size: 1.6875rem;
	letter-spacing: 0.3em;
	margin-right: -0.3em;
	text-transform: uppercase;
}

.ie-wordmark__secondary {
	display: block;
	font-family: var(--ie-sans);
	font-weight: 500;
	font-size: 0.5625rem;
	letter-spacing: 0.54em;
	margin-right: -0.54em;
	margin-top: 0.4rem;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

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

.ie-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--ie-header-h);
	background: var(--ie-navy);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.ie-has-hero .ie-header { background: transparent; }

.ie-header.is-scrolled,
.ie-header.is-open {
	position: fixed;
	background: var(--ie-navy);
	box-shadow: 0 1px 0 var(--ie-on-navy-line);
}

.ie-no-hero .site { padding-top: var(--ie-header-h); }

.ie-header__inner {
	max-width: var(--ie-container);
	margin: 0 auto;
	height: 100%;
	padding: 0 var(--ie-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.ie-header__brand { text-decoration: none; display: flex; align-items: center; }

/* Real brand lockup rendered as a white silhouette — legible over both the
   transparent-hero and solid-navy header states, whatever colors the
   source logo carries. */
/* 5rem inside the 6rem header bar. Stepped 4 -> 4.5 -> 5rem across two client
   passes on 2026-08-10, and the bar went 5 -> 5.5 -> 6rem with it.
   The RATIO is what matters — 8px of clear air above and below the lockup.
   Raising the logo without raising the bar is what pushes the "ENTERTAINMENT"
   rule against the lower edge, so these two values move as a pair or not at
   all. */
.ie-header__logo {
	display: block;
	width: auto;
	height: 5rem;
	filter: brightness(0) invert(1);
}

@media (max-width: 640px) {
	.ie-header__logo { height: 3.875rem; }
}

.ie-header__wordmark {
	font-family: var(--ie-serif);
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	color: var(--ie-white);
	white-space: nowrap;
}

.ie-header__wordmark span {
	font-family: var(--ie-sans);
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ie-nav__list {
	display: flex;
	gap: 2.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ie-nav__list a {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ie-white);
	padding: 0.4rem 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.ie-nav__list a:hover,
.ie-nav__list .current-menu-item a,
.ie-nav__list .current_page_item a {
	border-bottom-color: var(--ie-white);
	color: var(--ie-white);
}

.ie-nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.6rem 0.2rem;
	cursor: pointer;
}

.ie-nav-toggle__bar {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--ie-white);
	margin: 6px 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 900px) {
	.ie-nav-toggle { display: block; }

	.ie-nav {
		display: none;
		position: fixed;
		inset: var(--ie-header-h) 0 auto 0;
		background: var(--ie-navy);
		border-top: 1px solid var(--ie-on-navy-line);
		padding: 1.25rem var(--ie-gutter) 2rem;
	}

	.ie-header.is-open .ie-nav { display: block; }

	.ie-header.is-open .ie-nav-toggle__bar:first-child { transform: translateY(4px) rotate(45deg); }
	.ie-header.is-open .ie-nav-toggle__bar:last-child { transform: translateY(-4px) rotate(-45deg); }

	.ie-nav__list { flex-direction: column; gap: 0; }

	.ie-nav__list li { border-bottom: 1px solid var(--ie-on-navy-line); }

	.ie-nav__list a {
		display: block;
		padding: 0.95rem 0;
		border-bottom: 0;
	}
}

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

.ie-hero {
	position: relative;
	min-height: 86vh;
	display: flex;
	align-items: flex-end;
	padding: 0 !important;
}

.ie-hero .ie-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ie-container);
	margin: 0 auto;
	padding: 9rem var(--ie-gutter) clamp(3.5rem, 8vh, 6rem);
}

.ie-hero h1 {
	/* --ie-display, not --ie-serif: hero headlines run Ramabhadra 400 (the
	   family's only weight). Size, leading, tracking and the ch-based
	   max-width all inherit from the base h1 rule unchanged — ch is
	   font-relative, so this box IS wider than it was under Source Serif 4
	   (Ramabhadra's "0" is 0.555em against 0.500em). Measured, accepted. */
	font-family: var(--ie-display);
	font-weight: 400;
	color: var(--ie-white);
	max-width: 14ch;
	margin-bottom: 1.5rem;
}

/* 🔴 THE SOLE LEGIBILITY DEVICE FOR HERO COPY, as of 2026-08-11.

   Every dimming overlay except the nav band was removed at the client's
   explicit request (see the note further down by `.ie-hero--page`), so there is
   no longer anything between the copy and bare photography. This shadow is what
   is left, and it was strengthened in the same change to compensate.

   TIGHTER AND DENSER, not bigger. The previous pair was
   `0 1px 2px /0.4` + `0 2px 28px /0.55` — a 28px radius spreads a visible haze
   across the photo well beyond the glyphs, which is the very thing the client
   objected to, and it buys little at the stroke edge where legibility is
   actually decided. The stack below inverts that: near-opaque within a pixel or
   two of the glyph, falling away by 16px, so it reads as depth ON the letters
   rather than as a wash BEHIND them.

   Four stops rather than two because a single tight shadow leaves light-on-light
   strokes fringing: 1px carries the edge, 3px carries the immediate surround,
   8px and 16px do the separation from busy detail (sand, foliage, water) without
   ever reaching far enough to read as a panel.

   ⚠️ Tuned to be invisible as a halo at normal viewing distance. If you raise
   the radii, check it against the brightest hero — /our-brands/, whose sky and
   white tent are the worst case — before assuming it is imperceptible.

   ⚠️ This does NOT show up in the background-contrast figures recorded in
   CLAUDE.md: that harness hides the copy, so it measures the photo alone and
   excludes the shadow by design. The shadow's contribution is measured
   separately as an at-the-glyph-edge figure. Do not read a low background
   number as meaning the text is illegible without checking that second figure. */
.ie-hero h1,
.ie-hero p {
	text-shadow:
		0 1px 1px rgba(15, 29, 47, 0.78),
		0 1px 3px rgba(15, 29, 47, 0.66),
		0 2px 8px rgba(15, 29, 47, 0.50),
		0 3px 16px rgba(15, 29, 47, 0.38);
}

.ie-hero p {
	color: #E4EAF1; /* near-white: muted blue fails over bright photo areas */
	font-size: 1.1875rem;
	max-width: 46ch;
	margin-bottom: 0;
}

.ie-hero .wp-block-cover__background { z-index: 1; }

/* The <picture> that lets phones take the poster frame instead of the wide
   cover photo is a wrapper only. `display: contents` removes its box entirely,
   so the absolutely-positioned <img> inside behaves exactly as it did when core
   emitted it as a direct child — no stray inline box, no layout change. */
.ie-hero__picture { display: contents; }

/* Blur-up.

   The placeholder itself is an inline base64 still printed into <head> by
   functions.php, so it needs no request and is painted by the time the hero
   first appears. All this does is fade the sharp image over it.

   NOTE the direction of the dependency: the image is visible by default, and JS
   opts INTO hiding it (adding .is-lqip) only when it confirms the image has not
   loaded yet. A visitor with no JS, a script error, or a failed image therefore
   all end up with the image shown rather than a hero stuck behind a blur. That
   is also why this pair is safe in the block editor, where .is-lqip is never
   added — unlike a rule that hides something unconditionally. */
.ie-hero--home .wp-block-cover__image-background { transition: opacity 420ms ease; }
.ie-hero--home.is-lqip .wp-block-cover__image-background { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	/* Still swap placeholder for photograph, just without the cross-fade. */
	.ie-hero--home .wp-block-cover__image-background { transition: none; }
}

/* Home hero background video.

   Position, sizing and object-fit all come from core's own
   `video.wp-block-cover__video-background` rule, which matches what it gives
   the cover image — so the two stack exactly, and neither carries a z-index,
   which leaves DOM order to put the video above the image and the scrim above
   both. The scrim and the copy are untouched, so contrast is unchanged.

   It starts transparent and is faded in by main.js only once the clip is
   genuinely playing. Until then — and on a phone, a metered connection, a
   refused autoplay or a failed download — the cover image behind it is what
   shows, with no flash of empty space either way. */
.ie-hero__video {
	opacity: 0;
	transition: opacity 700ms ease;
	pointer-events: none;
	background-color: transparent;

	/* NO FILTER, deliberately — the footage plays at full strength.

	   This carried `filter: brightness(0.85)` until 2026-08-10. That was the
	   right call while a single full-hero scrim was the only other lever: the
	   clip is brighter than the still it replaced and at full strength it pulled
	   worst-case contrast DOWN to headline 2.34 / paragraph 1.55, where 0.85
	   recovered 3.24 / 2.11.

	   That was then narrowed twice more. On 2026-08-10 the full-hero scrim was
	   cut to a short header band plus a localised gradient behind the copy,
	   which measured better than the global dim ever had (3.53 / 2.26). On
	   2026-08-11 the client asked for that localised gradient to go too, so
	   NOTHING now dims this footage at any point — not a filter, not a scrim,
	   not a pseudo-element. The only overlay left on the hero is the top band
	   in the cover block's own gradient, which exists for the nav.
	   Hero copy is carried by its text-shadow alone. Re-measure with the harness
	   described in CLAUDE.md before changing any of it. */
}

.ie-hero__video.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	/* The poster still is swapped in rather than played; don't fade even that. */
	.ie-hero__video { transition: none; }
}

/* 🔴 THE COPY-PROTECTION GRADIENTS ARE GONE — CLIENT DECISION, 2026-08-11.
   DO NOT REINSTATE ONE WITHOUT ASKING.

   `.ie-hero--home::after` (a radial ellipse behind the home copy) and
   `.ie-hero--page::after` (horizontal above 1200px, vertical below) both used
   to live here. The client looked at the result of the 2026-08-11 lightening
   round and still read the remaining aimed gradient as "a dimming panel over
   the photography", and asked for every overlay to go except the band behind
   the menu. That is an explicit, informed choice: they were shown what it
   costs and accepted it.

   WHAT REMAINS, and it is the only thing that remains: the short top band in
   each hero's COVER BLOCK gradient — 0.92→0 by 32% on home, 0.62→0 by 42% on
   the interior pages. That band is not decoration and is not negotiable: the
   header is transparent over the hero, so the white nav links sit directly on
   the photograph, and cutting it takes the nav to ~1.9 against a 4.5 AA floor.
   It lives in page content, not here.

   THE TEXT-SHADOW ON `.ie-hero h1, .ie-hero p` IS NOW THE ONLY LEGIBILITY
   DEVICE. It was strengthened in the same change to compensate. If hero copy
   ever needs more help, strengthen that further — do NOT add a panel, scrim,
   gradient, backdrop-filter or per-element background back in.

   The full before/after contrast history is kept in CLAUDE.md rather than
   deleted, because it is what tells a future session what this costs and why
   it is nevertheless correct. */

/* Interior page hero: shorter, title + subtitle. */
.ie-hero--page { min-height: 56vh; }

/* Homepage hero (mockup): taller, text block upper-left, gradient strongest
   at the top where the nav and headline sit.

   🔴 THE HEIGHT LIVES HERE NOW, NOT IN PAGE CONTENT (2026-08-11). The cover
   block used to carry an inline `min-height: 486px`. An inline style beats any
   stylesheet rule regardless of specificity, so the declaration on this line
   was INERT — and when the hero paragraph moved to the Brands intro the copy
   shrank below that inline floor and the hero silently dropped 588px -> 488px.
   The `home-hero-height-to-theme` migration removed the inline value, so this
   rule is finally the thing that governs.

   588px IS NOT A NEW NUMBER. It is exactly what the hero measured back when its
   own content set the height (128 padding + 144 headline + 100 paragraph + 24
   gap + 192 padding), so this restores the page as it stood rather than
   inventing a size.

   ⚠️ DO NOT "restore" the old `92vh`. It never bound, so it was never the old
   behaviour — at a 754px viewport it computes to 693px, a full 105px taller
   than this hero has ever been.

   The max() means the fixed value governs on every laptop and phone, while the
   viewport term takes over on a tall monitor so the hero scales up instead of
   stranding. `svh` rather than `vh` on purpose: `vh` resolves against the LARGE
   viewport on phones, so a hero sized by it grows as browser chrome retracts
   and the page lurches mid-scroll. In practice 588px wins at every phone height
   we support, which pins mobile and makes the unit moot there — but it stops
   the rule being a trap the day someone raises the number. */
.ie-hero--home {
	min-height: 588px; /* fallback: browsers without svh support */
	min-height: max(588px, 64svh);
	align-items: stretch;
}

/* Make the copy block FILL the hero rather than sit in it.

   The cue is positioned against .ie-hero__inner, so that box has to span the
   full hero for the cue to hug the hero's bottom edge. Without the fill,
   `stretch`/`flex-start` on the hero left the cue stranded 172px above the
   floor, because the inner box was only as tall as its text. This pair
   (column flex parent + `flex: 1`) is what pins the cue at
   clamp(3.5rem, 8vh, 6rem) above the hero base at every hero height — do not
   remove it, and do not swap it for `align-items: center` on the hero, which
   centres the whole inner box and drags the cue with it. */
.ie-hero--home .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
}

.ie-hero--home .ie-hero__inner { flex: 1; }

/* THE HEADLINE CENTRES IN THE BAND BELOW THE HEADER (client, 2026-08-14).

   The band is: bottom of the fixed header -> bottom of the hero. The header is
   transparent over the hero, so the nav visually owns the top var(--ie-header-h)
   of the frame; centring in the FULL hero box would tuck the headline under it.
   Hence `padding-top: var(--ie-header-h)` — the padding removes the header band
   from the flex content box, and `justify-content: center` then centres the
   headline in exactly what remains. DERIVED, NOT A MAGIC NUMBER: if the header
   bar or the hero height ever changes, the headline re-centres itself. Do not
   "simplify" this back to a fixed padding pair — that is precisely what used to
   be here (8rem/12rem), and it parked the headline 142px above centre.

   `padding-bottom: 0` is part of the same rule: any bottom padding shrinks the
   centring band from the bottom and lifts the headline off centre by half that
   amount. The old clamp() bottom padding lives on only in the cue's own
   `bottom:` offset, which is absolute and unaffected by any of this.

   Measured 2026-08-14 at 1440x900 / 1512x775 / 1280x800 / 390x844: the gap from
   header bottom to headline top equals the gap from headline bottom to hero
   bottom at every one (173.9/173.9 at 1440), and the cue did not move. */
.ie-hero--home .ie-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--ie-header-h);
	padding-bottom: 0;
}

/* The h1's own 1.5rem bottom margin would ride inside the centred block and
   sit the headline 12px high. Neutralised on the LAST child, not on the h1,
   so the centring stays exact even if a paragraph ever returns to this hero —
   the h1 margin would then separate the two lines of copy again and only the
   final element's trailing margin is dropped. */
.ie-hero--home .ie-hero__inner > :last-child { margin-bottom: 0; }

.ie-hero--home h1 { max-width: 15ch; }

/* Scroll cue: a hairline that breathes. */
.ie-hero__inner::after {
	content: "";
	position: absolute;
	right: var(--ie-gutter);
	bottom: clamp(3.5rem, 8vh, 6rem);
	width: 1px;
	height: 64px;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.75));
	animation: ie-cue 2.6s ease-in-out infinite;
}

@keyframes ie-cue {
	0%, 100% { transform: scaleY(0.55); transform-origin: top; opacity: 0.5; }
	50% { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 640px) {
	/* Home is excluded because its own min-height is a max() that already
	   accounts for viewport height, and this rule would otherwise beat it:
	   `.ie-hero` and `.ie-hero--home` have EQUAL specificity (0,1,0), so the
	   later one in source order wins, and that is this one. Excluding home by
	   selector is one edit and leaves no ordering trap; duplicating the value
	   in here would be two places to keep in step.

	   Note this rule has never actually applied to anything: every hero cover
	   carries an inline min-height, which outranks it. It stays for the day one
	   of those inline values goes away, as home's just did. */
	.ie-hero:not(.ie-hero--home) { min-height: 76vh; }
	.ie-hero__inner::after { display: none; }
}

/* ------------------------------------------------------------ brand grid */

/* Boxed brand cards. Client direction 2026-08-10 (model: wbd.com/our-brands):
   the marks are the point, so they render in FULL COLOUR at full opacity in
   every state, each in its own discrete bordered box that lifts and zooms
   under the cursor.

   This replaced the flush hairline-gap ledger — a 1px grid `background`
   showing through 1px gaps — which is why the cells now carry their own
   border and the old `:last-child:nth-child(5n+1)` full-row hack is gone
   (it existed only to stop that gap trick painting empty tracks as a slab).
   Square corners stay: the no-border-radius rule is not what changed. */
.ie-brand-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 3rem 0;
	list-style: none;
	padding: 0;
}

.ie-brand-grid__cell {
	display: flex;
	min-height: 12rem;
	background: var(--ie-white);
	border: 1px solid var(--ie-line);
	transition:
		transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.ie-section--cream .ie-brand-grid__cell { background: var(--ie-cream); }

.ie-brand-grid__link {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	/* Slim side padding: percentage max-width on the logo resolves against
	   this content box, so fat padding silently shrinks every logo (the old
	   2rem sides capped wide marks at 121px despite a "76%" rule). */
	padding: 2.5rem 1rem;
	text-align: center;
	text-decoration: none;
}

.ie-brand-grid__logo {
	max-height: 110px;
	width: auto;
	max-width: 85%; /* of the padded content box ~= 75% of the cell */
	object-fit: contain;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Text-wordmark fallback (a brand with no logo file) — full navy, matching the
   logos now that they are no longer lightened. */
.ie-brand-grid__name {
	font-family: var(--ie-serif);
	font-size: 1.1875rem;
	color: var(--ie-navy);
	line-height: 1.25;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.ie-brand-grid__tagline {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ie-muted);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover / keyboard focus: the card lifts off the page and the mark grows
   into it. `:focus-within` rather than `:focus-visible` because the focus
   lands on the inner link, not on the cell that carries the border.

   The shadow is the ONE sanctioned exception to DESIGN.md's no-shadows
   prohibition: it is transient (hover only), scoped to this component, and
   it is what makes the lift read as a lift rather than a nudge. Surfaces at
   rest still separate with hairlines only. */
.ie-brand-grid__cell:hover,
.ie-brand-grid__cell:focus-within {
	transform: translateY(-4px);
	border-color: var(--ie-line-strong);
	box-shadow: 0 10px 28px rgba(22, 40, 63, 0.10);
}

.ie-brand-grid__cell:hover .ie-brand-grid__logo,
.ie-brand-grid__cell:focus-within .ie-brand-grid__logo,
.ie-brand-grid__cell:hover .ie-brand-grid__name,
.ie-brand-grid__cell:focus-within .ie-brand-grid__name {
	transform: scale(1.06);
}

.ie-brand-grid__cell:hover .ie-brand-grid__tagline,
.ie-brand-grid__cell:focus-within .ie-brand-grid__tagline {
	opacity: 1;
	transform: none;
}

/* Staggered glide-in, hung off the container's existing scroll reveal —
   `.ie-brand-grid` is already an IntersectionObserver target in main.js, so
   there is no second observer and the 3s failsafe covers this too.

   FAIL-SAFE BY CONSTRUCTION, and it has to be: the hidden state is gated on
   `.ie-reveal`, which is applied by main.js. No JS, a script error, or the
   block editor canvas (where main.js never runs) all leave the cards simply
   visible, instead of permanently blank. Never gate this on the bare class.

   animation + `backwards` rather than a transition-delay: a delay long enough
   to stagger the entrance would also delay every hover lift afterwards, and
   `forwards` fill would pin `transform: none` and defeat the lift entirely. */
@media (prefers-reduced-motion: no-preference) {
	/* The container is only the trigger — its own fade-rise is neutralised so
	   the cards' stagger is a single gesture rather than two stacked ones. */
	.ie-brand-grid.ie-reveal {
		opacity: 1;
		transform: none;
	}

	.ie-brand-grid.ie-reveal .ie-brand-grid__cell { opacity: 0; }

	.ie-brand-grid.ie-reveal.is-visible .ie-brand-grid__cell {
		opacity: 1;
		animation: ie-brand-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
		animation-delay: calc(var(--ie-i, 0) * 55ms);
	}
}

@keyframes ie-brand-card-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
	.ie-brand-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.ie-brand-grid { grid-template-columns: repeat(2, 1fr); }
	.ie-brand-grid__cell { min-height: 8rem; }
}

/* -------------------------------------------------------- brand marquee */

/* Home-page treatment (model: the wbd.com home ticker): one continuous row
   sliding right-to-left, no pagination, pauses under the cursor. Scoped
   entirely to `.ie-brand-marquee*` so it and the card grid above share no
   rule and cannot cross-contaminate.

   THE SEAM: the track holds the brand list TWICE and translates by exactly
   -50%, so the moment the first set leaves frame the duplicate is sitting
   pixel-identical where it started. That only works if the two halves are
   byte-identical in width INCLUDING their trailing space — which is why the
   spacing is a per-item `margin-right` and NOT a flex `gap`. With `gap`,
   n items produce 2n-1 gaps rather than 2n, so -50% lands half a gap short
   and the row visibly jumps ~32px once per cycle. */
.ie-brand-marquee {
	/* Scale knobs. Logo height, gap and the animation-duration multiplier all
	   move together by the SAME factor at every breakpoint — that is what keeps
	   the ticker's px/sec identical across viewports and identical to what it
	   was before the marks were doubled.

	   Track width = sum(logo widths) + n x gap, and the logos are
	   height-constrained, so changing either the logo height or the gap changes
	   the track — and the duration has to follow or the ticker silently speeds
	   up or crawls.

	   --ie-marquee-speed is NOT a simple scale factor. Logo height and gap
	   scale differently between breakpoints, so the track does not scale
	   uniformly; the multipliers are derived from the MEASURED period at each
	   width to hold the rate relationship 1 : 0.909 : 0.854 across
	   1440 / 1000 / 390. Recompute them from fresh measurements if either the
	   logo height or the gap changes again — do not assume they still hold. */
	--ie-marquee-logo-h: 144px;
	--ie-marquee-band-h: 14rem;
	--ie-marquee-gap: clamp(3.75rem, 7.5vw, 6.25rem); /* 100px at >=1334px */
	--ie-marquee-speed: 1;
	/* Intended px/sec. main.js divides the measured pixel distance by this to
	   derive the duration, so the rate is declared rather than arrived at. */
	--ie-marquee-rate: 107;
	/* The colour the edges fade INTO — must match the section behind the band. */
	--ie-marquee-fade: var(--ie-white);
	--ie-marquee-fade-0: rgba(255, 255, 255, 0);
	/* FULL BLEED, and it must stay that way. Constrained to the 1200px
	   container the row reads as a scrolling paragraph rather than a ticker,
	   so the band alone breaks out to the viewport while the eyebrow, intro
	   and "Explore All Brands" button stay inside .ie-section__inner.
	   Same idiom the theme already uses for .entry-content .alignfull. */
	position: relative;
	width: 100vw;
	margin: 3rem 0 3rem calc(50% - 50vw);
	overflow: hidden;
}

.ie-section--cream .ie-brand-marquee {
	--ie-marquee-fade: var(--ie-cream);
	--ie-marquee-fade-0: rgba(245, 241, 232, 0);
}

/* Edge fades, as OVERLAYS rather than a mask.
   ---------------------------------------------------------------------------
   This was `mask-image` on the container until 2026-08-10. WebKit tiles a
   masked layer, and this container is 100vw wide wrapping a 13,590px track —
   at that size it drops or partially rasterises tiles, which is the
   fragmented, half-missing logos in the client's Safari screenshots. Two
   painted gradients get the identical visual result and mask nothing.

   `pointer-events: none` is load-bearing: without it these two strips would
   sit over the band and swallow the hover that pauses the ticker. */
.ie-brand-marquee::before,
.ie-brand-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 6%;
	z-index: 2;
	pointer-events: none;
}

.ie-brand-marquee::before {
	left: 0;
	background: linear-gradient(to right, var(--ie-marquee-fade), var(--ie-marquee-fade-0));
}

.ie-brand-marquee::after {
	right: 0;
	background: linear-gradient(to left, var(--ie-marquee-fade), var(--ie-marquee-fade-0));
}

.ie-brand-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	/* One element — the animated one — gets the layer hints. Do NOT scatter
	   these onto the cells or the images. */
	will-change: transform;
	backface-visibility: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ie-brand-marquee__cell {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	/* See the seam note above — margin, deliberately, not gap. */
	margin-right: var(--ie-marquee-gap);
}

.ie-brand-marquee__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ie-marquee-band-h);
	text-decoration: none;
}

.ie-brand-marquee__logo {
	max-height: var(--ie-marquee-logo-h);
	width: auto;
	object-fit: contain;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.ie-brand-marquee__name {
	font-family: var(--ie-serif);
	font-size: 1.1875rem;
	color: var(--ie-navy);
	line-height: 1.25;
	white-space: nowrap;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

a.ie-brand-marquee__link:hover .ie-brand-marquee__logo,
a.ie-brand-marquee__link:focus-visible .ie-brand-marquee__logo,
a.ie-brand-marquee__link:hover .ie-brand-marquee__name,
a.ie-brand-marquee__link:focus-visible .ie-brand-marquee__name {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: no-preference) {
	.ie-brand-marquee__track {
		animation: ie-marquee calc(var(--ie-marquee-duration, 40s) * var(--ie-marquee-speed, 1)) linear infinite;
		/* Starts paused. main.js measures the half-track and releases it once
		   the logos have decoded, so the animation never runs against a width
		   that is still changing. A <noscript> block in the markup un-pauses
		   it, and main.js has a 2.5s timeout, so it cannot stay frozen. */
		animation-play-state: paused;
	}

	.ie-brand-marquee.is-running .ie-brand-marquee__track {
		animation-play-state: running;
	}

	/* Hold still so a visitor can actually read a mark they reached for.
	   :focus-within keeps keyboard tabbing through the row from chasing the
	   focused link off-screen.

	   FALLBACK ONLY as of 2026-08-14 — the third WebKit marquee trap. Pausing
	   this compositor-promoted track via animation-play-state makes Safari
	   re-derive the position from the main thread's animation clock, and under
	   main-thread load (the hero video is right above) the row snaps BACKWARDS
	   and freezes. The pause is therefore driven by main.js through
	   Animation.updatePlaybackRate(0/1), which the engine resolves against the
	   animation's current position, so it cannot jump. This rule now applies
	   only when main.js has added .no-waapi (no getAnimations() support); the
	   <noscript> block in blocks.php carries an ungated copy for the no-JS
	   path. Do NOT un-gate it "for simplicity" — an ungated play-state pause
	   here would race the WAAPI rate and reintroduce the Safari jump.

	   Specificity note: at 0,4,0 this now beats .is-running's 0,3,0 regardless
	   of source order (the old pair were both 0,3,0 and order-dependent). It
	   stays after .is-running anyway, so restoring the ungated selector would
	   still win the old way rather than silently losing. */
	.ie-brand-marquee.no-waapi:hover .ie-brand-marquee__track,
	.ie-brand-marquee.no-waapi:focus-within .ie-brand-marquee__track {
		animation-play-state: paused;
	}
}

/* The 100vw-vs-scrollbar trap: on a platform with CLASSIC (space-taking)
   scrollbars, 100vw is wider than the document, so a full-bleed band overhangs
   by the scrollbar width and raises a horizontal scrollbar. Clipping the
   enclosing section absorbs the overhang.

   `clip` and not `hidden`: hidden would force the other axis to `auto` and
   turn the section into a scroll container. `clip` leaves overflow-y visible.
   Scoped with :has() so it only ever applies to a section that contains a
   marquee — nothing else on the site gets its overflow changed. Where :has()
   is unsupported the band still renders correctly; the only cost is the
   scrollbar-width overhang that .alignfull already has site-wide. */
.ie-section:has(.ie-brand-marquee) {
	overflow-x: clip;
}

/* Tablet: three-quarter scale. Phone: back to the pre-2026-08-10 size — a
   144px mark on a 390px viewport is most of the screen. Each breakpoint's
   speed multiplier is measured against its own track so the rate relationship
   holds: 107.0 / 97.2 / 91.3 px/sec at 1440 / 1000 / 390, the same
   1 : 0.909 : 0.854 shape as the slower 62.5 / 56.8 / 53.4 it replaced. */
@media (max-width: 1000px) {
	.ie-brand-marquee {
		--ie-marquee-logo-h: 108px;
		--ie-marquee-band-h: 10.5rem;
		--ie-marquee-gap: clamp(2.8125rem, 5.625vw, 4.6875rem); /* 56.25px at 1000 */
		--ie-marquee-speed: 0.771;
		--ie-marquee-rate: 97.2;
	}
}

@media (max-width: 640px) {
	.ie-brand-marquee {
		--ie-marquee-logo-h: 72px;
		--ie-marquee-band-h: 7rem;
		--ie-marquee-gap: clamp(1.875rem, 3.75vw, 3.125rem); /* 30px at 390 */
		--ie-marquee-speed: 0.524;
		--ie-marquee-rate: 91.3;
	}
}

/* No motion: the row stays put and becomes an ordinary horizontal scroller,
   so every brand is still reachable. */
@media (prefers-reduced-motion: reduce) {
	.ie-brand-marquee {
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	/* No fade over a row the visitor is scrolling by hand. */
	.ie-brand-marquee::before,
	.ie-brand-marquee::after { display: none; }
}

/* PIXELS, NOT A PERCENTAGE — this is the Safari bug.
   ---------------------------------------------------------------------------
   This animated to `translateX(-50%)` until 2026-08-10. WebKit resolves a
   percentage transform against the element's OWN border box every frame, and
   the track is `width: max-content` — a width that keeps changing while 36
   images resolve srcset, decode and lay out. So the endpoint moved during
   load. Measured in WebKit on a throttled cold load: the track was 3600px wide
   and crawling at 28.3 px/sec, jumped to 130 px/sec at 4625px, spiked to
   667 px/sec, and only settled at 107 px/sec once it reached its final
   13,585px. That is exactly the client's "crawls, breaks, breaks again, then
   it's fine". Blink resolves it differently, which is why Chrome never showed
   it.

   main.js sets --ie-marquee-shift to the measured half-track in px. The 50%
   fallback is the no-JS path only. */
@keyframes ie-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--ie-marquee-shift, 50%))); }
}

/* ---------------------------------------------------------- split section */

.ie-split {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.ie-split--flip { grid-template-columns: 5fr 7fr; }

.ie-split__media { position: relative; }

.ie-split__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Inked frame: hairline offset behind the photo. */
.ie-split__media::after {
	content: "";
	position: absolute;
	inset: 14px -14px -14px 14px;
	border: 1px solid var(--ie-line-strong);
	z-index: -1;
}

@media (max-width: 900px) {
	.ie-split,
	.ie-split--flip { grid-template-columns: 1fr; }

	.ie-split__media { order: -1; max-width: 480px; }
}

/* Flush split (mockup homepage About): text in the padded left half, image
   bleeding to the section's right/top/bottom edges. */
.ie-split-flush {
	padding-top: 0;
	padding-bottom: 0;
}

.ie-split-flush .ie-split-flush__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

.ie-split-flush__body {
	width: 100%;
	max-width: calc(var(--ie-container) / 2);
	margin-left: auto;
	padding: clamp(4rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 5rem) clamp(4rem, 7vw, 6.5rem) var(--ie-gutter);
}

.ie-split-flush__media { position: relative; min-height: 420px; }

.ie-split-flush__media img,
.ie-split-flush__media .wp-block-image,
.ie-split-flush__media figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.ie-split-flush__media img {
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.ie-split-flush .ie-split-flush__grid { grid-template-columns: 1fr; }

	.ie-split-flush__body {
		max-width: none;
		padding-right: var(--ie-gutter);
	}

	.ie-split-flush__media { min-height: 300px; }
}

/* -------------------------------------------------------------- team grid */

.ie-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 3rem 0;
	list-style: none;
	padding: 0;
}

.ie-team-grid--wide { grid-template-columns: repeat(4, 1fr); }

.ie-team-card { text-align: center; }

.ie-team-card a { text-decoration: none; display: block; }

/* Studio treatment (mockup): light-gray ground behind the portraits,
   consistent 3:4 crop cropped from the top so faces are never sliced.
   Portraits render FULL COLOUR as of 2026-08-10 (client direction — the site
   should read brighter); the ground and the crop are unchanged, and the
   placeholder/initials treatment below still applies to anyone without a
   headshot. */
.ie-team-card__photo {
	width: 100%;
	/* Restated even though the base `img` rule (top of this file) already sets
	   it: the portrait now carries intrinsic width/height attributes, and if
	   anything ever gives this selector a real `height` the attribute-derived
	   box would win over `aspect-ratio` and the 3:4 crop would collapse. */
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	display: block;
	background: #E9EDF1;
}

.ie-team-card__name {
	display: block;
	font-family: var(--ie-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ie-navy);
	margin: 1.1rem 0 0.25rem;
	line-height: 1.4;
}

.ie-team-card__title {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--ie-muted);
}

@media (max-width: 900px) {
	.ie-team-grid, .ie-team-grid--wide { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------- CTA band */

.ie-cta {
	text-align: center;
}

.ie-cta h2 {
	max-width: 22ch;
	margin: 0 auto 2rem;
}

/* Slim strip variant (mockup): heading + button on one line, minimal
   vertical padding. */
.ie-cta--slim {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.ie-cta--slim .ie-cta__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem 3.5rem;
}

.ie-cta--slim h2 {
	font-size: clamp(1.5rem, 2.4vw, 1.9375rem);
	margin: 0;
	max-width: none;
}

/* The row is already flex/align-items:center, but the button still sat ~20px
   low: `.entry-content .wp-block-buttons { margin-top: 2.5rem }` (utilities,
   near the end of this file) ties this rule on specificity (0,2,0) and wins on
   source order. Flexbox centers the MARGIN box, so a 40px top margin offsets
   the button by half that. `.entry-content` here takes it to (0,3,0) so it
   wins regardless of order. Do not drop the prefix. */
.ie-cta--slim .wp-block-buttons,
.entry-content .ie-cta--slim .wp-block-buttons { margin-top: 0; }

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

.ie-footer {
	background: var(--ie-navy-deep);
	color: var(--ie-on-navy-muted);
	font-size: 0.9375rem;
}

.ie-footer a { color: var(--ie-on-navy-muted); text-decoration: none; }
.ie-footer a:hover { color: var(--ie-white); }

/* Brand mark, same white-silhouette treatment as .ie-header__logo so the two
   instances read as one mark. 130px — LARGER THAN THE 80px HEADER MARK, which
   is deliberate and is the client's explicit request, not drift. The footer
   lockup is now the biggest instance of the mark on the site; see DESIGN.md,
   where the inversion is recorded so it does not read as a mistake later.

   The 1.984:1 lockup lands 258x130px, which is wider than the brand column
   used to be (239px at 1440, 186px at 1000) — hence the grid change below.
   Sizes step down at 900px and again on phones.
   The anchor is inline by default, which would leave a descender gap under the
   image and shift the row; display:block on the img removes it. */
.ie-footer__brand a { display: inline-block; }

.ie-footer__logo {
	display: block;
	width: auto;
	height: 130px;
	filter: brightness(0) invert(1);
}

/* Compact single-band arrangement (mockup): wordmark | blurb + contact |
   two link columns | socials + copyright. */
.ie-footer__inner {
	max-width: var(--ie-container);
	margin: 0 auto;
	padding: 3.25rem var(--ie-gutter) 2.75rem;
	display: grid;
	/* The brand column has to hold a 258px-wide lockup. As a bare 1.3fr it
	   measured 239px at 1440 and 186px at 1000 — the mark would have overflowed
	   into the blurb at both. `minmax` is what makes this safe: the floor
	   guarantees the lockup always fits with breathing room, and the fr keeps
	   the column proportional on wider screens instead of pinning it. The space
	   comes off the blurb and the two menu columns, which have slack; the menu
	   columns stay wider than their longest label ("Our Brands", 75px). */
	grid-template-columns: minmax(285px, 1.6fr) 1.4fr 0.66fr 0.66fr 1fr;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	align-items: start;
}

.ie-footer__blurb { max-width: 32ch; margin-bottom: 1rem; font-size: 0.875rem; }

.ie-footer__contact { line-height: 1.8; font-size: 0.875rem; }

.ie-footer__meta { text-align: right; }

.ie-footer__meta .ie-footer__icons { justify-content: flex-end; margin-bottom: 1.1rem; }

.ie-footer__legal-line {
	font-size: 0.8125rem;
	line-height: 1.7;
	margin: 0;
}

.ie-footer__heading {
	font-family: var(--ie-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ie-white);
	margin: 0 0 1.2rem;
}

.ie-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ie-footer__list li { margin-bottom: 0.65rem; }

.ie-footer__icons {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ie-footer__icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--ie-on-navy-line);
	border-radius: 50%;
	color: var(--ie-white);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ie-footer__icons a:hover {
	background: var(--ie-white);
	color: var(--ie-navy);
}

@media (max-width: 900px) {
	/* Brand and blurb span the full width here, so the minmax floor above would
	   only force a needless horizontal scroll. */
	.ie-footer__inner { grid-template-columns: 1fr 1fr; }
	.ie-footer__brand,
	.ie-footer__about { grid-column: 1 / -1; }
	.ie-footer__meta { text-align: left; grid-column: 1 / -1; }
	.ie-footer__meta .ie-footer__icons { justify-content: flex-start; }

	/* The brand spans the full width here, so the mark steps down rather than
	   dominating a stacked footer. */
	.ie-footer__logo { height: 96px; }
}

@media (max-width: 640px) {
	/* Phones: smaller again — 96px is still a quarter of a 390px viewport once
	   the 1.984:1 lockup is laid out. */
	.ie-footer__logo { height: 72px; }
}

/* --------------------------------------------------------- approach row */

/*
 * Rebuilt 2026-08-04 from the HTML block Mary pasted into the About page.
 * Her copy, her icon artwork and her card line-breaks are kept verbatim; what
 * changed is that the section now speaks the design system instead of its own
 * inline stylesheet (Arial, teal #12b8c4, rounded white cards on a drop shadow).
 * Centred head, hairline-ruled grid, square corners — same language as the
 * brand grid and the approach row it replaces.
 */

.ie-approach__title {
	margin-bottom: 0;
}

/* The 32px hairline under the heading is the same mark .ie-eyebrow carries —
   it is what replaces her teal rule. */
.ie-approach__title::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: var(--ie-navy);
	margin: 1.5rem auto 0;
}

/* About's Approach lede.

   🔴 THE MEASURE STAYS AT 62ch, AND THAT IS A MEASURED DECISION, NOT AN
   OVERSIGHT. It looks like the last `62ch` left behind when `.ie-intro` went to
   52ch, but the two are not the same case:

   - `ch` is font-relative, and this element is a step smaller than `.ie-intro`,
     so its 62ch computes to **675px, not 755px**.
   - The copy carries an authored `<br>`, so each sentence gets its own line and
     the cap never governs the rag. It renders at **80 characters**, not the 89
     that made `.ie-intro` worth changing.

   Taking it to 52ch (566px) is actively worse, measured at 1440 and 1000:
   the second sentence no longer fits, so 2 lines become 3 and the last line
   collapses to a one-word orphan — 542/601 becomes 542/495/**102**. Mobile is
   untouched either way, because at 390 the viewport binds long before the cap.
   Reaching a 75-character measure here would mean rewriting the sentence, which
   is a copy decision, not a CSS one.

   ⚠️ `balance` rather than `pretty`, matching the rest of the type system — but
   note it does NOT rescue the 52ch case above: a forced `<br>` splits the
   paragraph into segments the balancer handles separately, and there it
   produced a worse rag than `pretty` did (495/102 against 466/131). Here at
   62ch it is a no-op on desktop and evens the first sentence on mobile
   (344/193 -> 273/265). */
.ie-approach__lede {
	max-width: 62ch;
	margin: 1.75rem auto 0;
	color: var(--ie-ink);
	text-wrap: balance;
}

.ie-approach {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--ie-line);
	border-top: 1px solid var(--ie-line);
	border-bottom: 1px solid var(--ie-line);
	margin-top: 3.25rem;
	list-style: none;
	padding: 0;
}

.ie-approach__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--ie-cream);
	padding: 2.5rem 1.5rem 2.75rem;
	text-align: center;
}

/*
 * Icons are Mary's 80-unit artwork rendered in the theme's stroke treatment.
 * stroke-width is set in USER UNITS, so it scales with the box: 2.75 at a
 * 44px render off an 80 viewBox lands at ~1.5px on screen, matching the
 * hairline weight the rest of the system uses.
 */
.ie-approach__icon {
	display: block;
	width: 44px;
	height: 44px;
	stroke: var(--ie-navy);
	stroke-width: 2.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

/*
 * TWO of the five approach icons are NOT inline SVG — they are <span>s painted
 * through a CSS alpha mask. They are meant to be indistinguishable from the
 * other three, and are, but the mechanism differs and that is deliberate:
 *
 * Mary supplied those two as 480x480 RASTER PNGs (2026-08-18), and a raster
 * cannot inherit colour. Shipped as <img> the ink stays its baked #231F20
 * near-black beside the other three icons' #16283F navy, and would never
 * follow the token. Used as a MASK, the PNG's alpha channel is the artwork and
 * the colour comes from `background-color: var(--ie-navy)` — so her exact
 * pixels render in the site's own navy and track the token like the SVGs do.
 * Nothing was traced or redrawn; auto-tracing was explicitly rejected.
 *
 * 🔴 The 44x44 box is deliberately NOT re-declared here. It comes from
 * .ie-approach__icon above, which every one of the five carries, so the masked
 * pair cannot drift out of size with the drawn three — change 44px once and
 * all five move together.
 *
 * The mask URLs are NOT here, because they are media-library attachments whose
 * URL a static stylesheet cannot know. ie_approach_mask_urls() resolves them
 * and prints them into <head> (functions.php), following the same pattern as
 * the hero LQIP block.
 *
 * FAIL-SAFE: `background-color` is set ONLY alongside the mask, in that inline
 * block, inside an @supports guard. So a browser without mask support, or a
 * deleted attachment, yields an empty 44px box that holds the layout — never a
 * solid navy square where an icon should be.
 *
 * PREFERRED END STATE: if Mary supplies the vector originals, inline them as
 * <svg> like the other three and delete this rule, the wp_head block and the
 * seeded attachments. See CLAUDE.md.
 */
.ie-approach__icon--mask {
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-position: center;
	        mask-position: center;
}

.ie-approach__rule {
	display: block;
	width: 28px;
	height: 1px;
	background: var(--ie-line-strong);
	margin: 1.5rem 0 1.25rem;
}

.ie-approach__item h3 {
	font-family: var(--ie-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.45;
	color: var(--ie-navy);
	margin: 0;
}

.ie-approach__item p {
	font-family: var(--ie-sans);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ie-muted);
	margin: 0.75rem 0 0;
	text-wrap: pretty;
}

@media (max-width: 1000px) {
	.ie-approach { grid-template-columns: repeat(2, 1fr); }
	.ie-approach__item:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.ie-approach { grid-template-columns: 1fr; }
	.ie-approach__item:last-child { grid-column: auto; }
}

/* ------------------------------------------------------------ news cards */

.ie-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	margin-top: 3rem;
}

.ie-news-card { border-top: 1px solid var(--ie-line-strong); padding-top: 1.5rem; }

.ie-news-card__image {
	display: block;
	margin-bottom: 1.4rem;
}

.ie-news-card__image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.ie-news-card__meta {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ie-muted);
	margin-bottom: 0.7rem;
}

.ie-news-card__title {
	font-size: 1.375rem;
	line-height: 1.25;
	margin-bottom: 0.7rem;
}

.ie-news-card__title a { text-decoration: none; }
.ie-news-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.ie-news-card__excerpt { font-size: 0.9375rem; color: var(--ie-muted); }

@media (max-width: 900px) {
	.ie-news-grid { grid-template-columns: 1fr; max-width: 560px; }
}

/* Single post */

.ie-single {
	max-width: 720px;
	margin: 0 auto;
	padding: 4rem var(--ie-gutter) var(--ie-section-pad);
}

.ie-single .entry-content > * { max-width: 100%; }

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

.ie-contact-block {
	border-top: 1px solid var(--ie-line-strong);
	padding-top: 1.75rem;
}

.ie-contact-block .ie-contact-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ie-muted);
	display: block;
	margin-bottom: 0.5rem;
}

.ie-contact-block p {
	font-family: var(--ie-serif);
	font-size: 1.375rem;
	line-height: 1.5;
	color: var(--ie-navy);
}

/* ------------------------------------------------------- contact form (CF7)

   CF7 ships its own stylesheet and its own markup conventions; everything
   below exists to make none of that visible. Rules are scoped to .wpcf7 so
   they cannot leak into the block editor or anywhere else.
   ------------------------------------------------------------------------ */

.ie-contact-cols { gap: clamp(2.5rem, 6vw, 5rem); align-items: flex-start; }

.ie-contact-cols .ie-contact-block + .ie-contact-block { margin-top: 2.25rem; }

.ie-form-intro { margin-bottom: 2rem; }

.ie-form-intro p {
	font-family: var(--ie-serif);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ie-ink);
	margin: 0.5rem 0 0;
}

/* Strip CF7's own chrome. */
.wpcf7 { margin: 0; }
.wpcf7 form .wpcf7-response-output { margin: 1.5rem 0 0; }
.wpcf7 p { margin: 0; }

/* 🔴 THESE TWO MUST STAY SCOPED TO .wpcf7, and the reason is not stylistic.
   `.wpcf7 p { margin: 0 }` three lines up is specificity (0,1,1). A bare
   `.ie-form__row` is (0,1,0), so it LOSES outright — being later in the file
   buys nothing, because source order only breaks ties between equal
   specificities. The field spacing below was written when this form was built
   and never once rendered: every group sat at margin 0, so fields touched
   their neighbour's label at exactly 0px and the submit button sat 0px under
   the textarea, reading as an extension of it rather than an action.

   Scoping to `.wpcf7` makes these (0,2,0) and they win. If a future edit
   un-scopes them "for tidiness", the form silently collapses back to touching.

   Rhythm: 28px from a field's bottom edge to the next label. The label keeps
   its own 0.55rem/8.8px gap to the field it belongs to — the whole point is the
   gap ABOVE a label being much larger than the one below it, which is what
   makes each label read as bound to its own field instead of floating between
   two. 36px above the button, collapsed against the last row's 28px, so it
   separates as a distinct action. */
.wpcf7 .ie-form__row { margin: 0 0 1.75rem; }

.ie-form__label {
	display: block;
	font-family: var(--ie-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ie-navy);
	margin-bottom: 0.55rem;
}

.ie-form__req {
	color: var(--ie-muted);
	text-decoration: none;
	border: 0;
	cursor: help;
}

.ie-form__optional {
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--ie-muted);
	text-transform: none;
}

/* CF7 wraps every control in a span.wpcf7-form-control-wrap. */
.wpcf7 .wpcf7-form-control-wrap { display: block; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--ie-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ie-ink);
	background: var(--ie-white);
	border: 1px solid var(--ie-line);
	border-radius: 0;
	padding: 0.85rem 1rem;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* On the cream sections the field ground shifts so inputs stay distinguishable. */
.ie-section--cream .wpcf7 input[type="text"],
.ie-section--cream .wpcf7 input[type="email"],
.ie-section--cream .wpcf7 input[type="tel"],
.ie-section--cream .wpcf7 textarea { background: var(--ie-white); }

.wpcf7 textarea { resize: vertical; min-height: 10rem; }

.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 input[type="tel"]:hover,
.wpcf7 textarea:hover { border-color: var(--ie-line-strong); }

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--ie-navy);
	box-shadow: 0 0 0 1px var(--ie-navy);
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--ie-muted); opacity: 1; }

/* Submit: the same navy outline button as the rest of the site.
   Scoped to .wpcf7 for the specificity reason spelled out at .ie-form__row. */
.wpcf7 .ie-form__actions { margin: 2.25rem 0 0; }

.wpcf7 .ie-form__submit,
.wpcf7 input[type="submit"] {
	display: inline-block;
	font-family: var(--ie-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	height: auto;
	padding: 0.95rem 2.5rem;
	border: 1px solid var(--ie-navy);
	border-radius: 0;
	background: transparent;
	color: var(--ie-navy);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wpcf7 .ie-form__submit:hover,
.wpcf7 .ie-form__submit:focus-visible,
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	background: var(--ie-navy);
	color: var(--ie-white);
}

.wpcf7 .ie-form__submit:focus-visible,
.wpcf7 input[type="submit"]:focus-visible { outline: 2px solid var(--ie-navy); outline-offset: 3px; }

/* CF7's AJAX spinner sits inline next to the button. */
.wpcf7 .wpcf7-spinner { margin: 0 0 0 0.75rem; vertical-align: middle; }

/* Validation + response messages, restyled off CF7's red/green defaults. */
.wpcf7 .wpcf7-not-valid-tip {
	font-family: var(--ie-sans);
	font-size: 0.8125rem;
	color: #A3242B;
	margin-top: 0.4rem;
}

.wpcf7 .wpcf7-not-valid { border-color: #A3242B; }

.wpcf7 form .wpcf7-response-output {
	font-family: var(--ie-sans);
	font-size: 0.875rem;
	line-height: 1.6;
	border: 1px solid var(--ie-line-strong);
	border-left-width: 3px;
	border-radius: 0;
	padding: 0.9rem 1.1rem;
	color: var(--ie-ink);
}

.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--ie-navy); }

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-left-color: #A3242B; }

/* Honeypot: off-screen rather than display:none, which some bots skip.
   aria-hidden + tabindex=-1 keep it away from assistive tech and keyboards. */
.ie-form__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 781px) {
	/* Core stacks .wp-block-columns here; drop the inline flex-basis with it. */
	.ie-contact-cols .wp-block-column { flex-basis: 100% !important; }
	.ie-contact-cols .wp-block-column + .wp-block-column { margin-top: 3rem; }
}

.ie-form-placeholder {
	border: 1px solid var(--ie-line-strong);
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	color: var(--ie-muted);
}

/* -------------------------------------------------------------- reveal */

@media (prefers-reduced-motion: no-preference) {
	.ie-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.ie-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	.ie-hero h1, .ie-hero p {
		opacity: 0;
		transform: translateY(28px);
	}

	.ie-hero.is-loaded h1, .ie-hero.is-loaded p {
		opacity: 1;
		transform: none;
		transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.ie-hero.is-loaded p { transition-delay: 0.15s; }
}

@media (prefers-reduced-motion: reduce) {
	.ie-hero__inner::after { animation: none; }
}

/* -------------------------------------------------- navy page header strip */

.ie-page-header {
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

.ie-page-header h1 { margin: 0; }

.ie-page-header p { margin: 0.75rem 0 0; }

/* --------------------------------------------- team placeholder monogram */

.ie-team-card__figure { position: relative; display: block; }

.ie-team-card__figure .ie-team-card__photo { width: 100%; }

span.ie-team-card__photo {
	display: block;
	aspect-ratio: 4 / 5;
	background: #D8DCE1;
}

.ie-team-card__initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ie-serif);
	font-size: 3rem;
	color: var(--ie-muted);
	letter-spacing: 0.05em;
}

/* --------------------------------------- GP structure overrides (pages) */

/* Pages are fully section-built; strip GP's container chrome and title. */
body.page .site-content,
body.page .content-area,
body.page .site-main {
	padding: 0;
	margin: 0;
	max-width: none;
}

body.page .site-main > article { padding: 0; margin: 0; }

body.page .inside-article { padding: 0; }

body.page .entry-header { display: none; }

body.page .entry-content { margin-top: 0; }

body.page .entry-content > * + * { margin-block-start: 0; }

body.blog .site-content,
body.blog .content-area,
body.blog .site-main,
body.archive .site-content,
body.archive .content-area,
body.archive .site-main,
body.single-team .site-content,
body.single-team .content-area,
body.single-team .site-main {
	padding: 0;
	margin: 0;
	max-width: none;
}

/* Single posts keep GP's contained article; give it air and a measure. */
body.single-post .site-main {
	max-width: 760px;
	margin: 0 auto;
	padding: 3.5rem var(--ie-gutter) var(--ie-section-pad);
}

/* ------------------------------------------------------------ utilities */

.ie-center { text-align: center; }

/* Body-intro paragraph.

   ⚠️ `ch` IS THE WIDTH OF THE "0" GLYPH, NOT AN AVERAGE CHARACTER, and in this
   face zero is far wider than the mean letter. The old `62ch` computed to
   754.9px and actually held ~89 characters — measured 89 on home and 88 on
   /our-brands/, against a ~75 ceiling for comfortable reading. `52ch` is
   633px, which measures out at ~75. The number is deliberately NOT 75ch: that
   would be ~1090px and twice as wrong.

   Kept in step with `.ie-section__inner--narrow` below, which expresses its
   column as this measure plus the gutters it sits inside. Change one, change
   the other, or that comment stops being true. */
.ie-intro {
	font-size: 1.1875rem;
	max-width: 52ch;
	/* Tightening the measure to 52ch left the home intro ending on a stranded
	   "experiences." — 602/572/527/106px. Balancing evens the rag to
	   418/445/480/464 and the orphan is gone. `pretty` was measured too and
	   also clears it (502/555/523/228), but leaves the lines uneven; `balance`
	   is additionally what the headings already use, so this keeps one
	   convention rather than introducing a second. Unsupported browsers fall
	   back to normal wrapping, which is exactly today's behaviour.

	   It reaches mobile too, which is worth knowing rather than assuming
	   otherwise: at 390 the home intro balances across all SIX lines (rag
	   spread 120px -> 59px) and /our-brands/ loses a stranded "website."
	   that predates the measure change. No paragraph anywhere changed line
	   COUNT — /leadership/ in particular is a single 73-character line and
	   stays one line, which is the case to re-check if this is ever touched,
	   since balancing is free to split a short paragraph. */
	text-wrap: balance;
}

.ie-intro--center { margin-left: auto; margin-right: auto; text-align: center; }

.ie-mt-lg { margin-top: 3rem !important; }

/* Careers is the only section with no grid, image or second column to occupy
   the width, so left-ranged copy at a 62ch measure left the right half of the
   viewport empty and the page read thin beside the others.

   Centre the COLUMN and keep the text ranged left. Centring two paragraphs of
   body copy would cost readability (ragged on both sides) for no real gain, and
   the site's editorial voice is left-ranged everywhere else — home's About
   section, About's Our Story. Width is expressed as the measure plus the gutters
   it sits inside, so the column is exactly as wide as the text it holds and
   every paragraph wraps on the same line length regardless of its font size.
   Inert on mobile, where the viewport is already narrower than the cap. */
.ie-section__inner--narrow {
	max-width: calc(52ch + (var(--ie-gutter) * 2));
}

/* The design system's text measure, for body copy sitting directly in a
   full-width section where nothing else constrains it. Applied as an explicit
   class rather than a `.ie-section__inner > p` rule on purpose: that selector
   also matches About's .ie-approach__lede and would out-specify it (0,2,1 beats
   0,1,0), quietly changing a page this had no business touching. */
.ie-measure { max-width: 62ch; }

/* Secondary aside, a step down from body copy without becoming fine print.
   Used for the Careers page's "applications are handled on Indeed" line. */
.ie-note {
	font-size: 0.875rem;
	color: var(--ie-muted);
	max-width: 62ch;
}

.entry-content .wp-block-buttons { margin-top: 2.5rem; }