/*
Theme Name: Executive Geometric Technical
Update URI: false
Author: Chantal van Nuland
Description: Generic Geometric Technical block-theme child for Twenty Twenty-Five. Straight geometry, editorial technical grids, hairline borders, semantic colour contexts and native Gutenberg editing across patterns, templates and template parts.
Tags: block-patterns, full-site-editing, block-styles, style-variations, translation-ready
Requires at least: 7.1
Requires PHP: 8.3
Version: 1.2.1
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: executive-geometric-technical
Template: twentytwentyfive

Executive Geometric Technical WordPress Theme, (C) 2026 Chantal van Nuland.
Executive Geometric Technical is distributed under the terms of the GNU GPL.
*/

/* CSS Reset
---------------------------------------------------------------------------- */

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

html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

b,
strong {
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

ol,
ul {
	padding: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
	padding-inline-start: var(--wp--preset--spacing--medium);
}

div[class*="wp-block-"] figcaption {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--x-small);
	margin-bottom: 0;
	margin-top: 20px;
	text-align: center;
}

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

/* Temporary fix for text-decoration-thickness in Firefox */
@-moz-document url-prefix() {
	a {
		text-decoration-thickness: .1rem !important;
	}
}

/* Standardize form styling
--------------------------------------------- */

/*
 * A button does not inherit colour. The UA stylesheet gives it `buttontext`,
 * which is its own grey and ignores everything the theme says. Any block that
 * renders a real <button> — the Accordion heading above all — therefore came
 * out grey on white no matter what the palette held.
 *
 * Inheriting colour as well as font is what makes those blocks obey the theme.
 */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/*
 * The Accordion toggle is a full-width button. It has to look like the heading
 * it is, not like a control.
 */
.wp-block-accordion-heading__toggle {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	text-align: start;
	width: 100%;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

input:not([type="submit"]):not([type="radio"]),
select,
textarea,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wp-block-post-comments-form textarea {
	color: var(--wp--preset--color--ink);
	border-radius: var(--executive-radius-control);
	border: solid 1px color-mix(in srgb, var(--wp--preset--color--surface) 100%, var(--wp--preset--color--ink) 20%);
	padding: .5em 1em;
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--canvas);
	box-shadow: var(--executive-control-shadow);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-color: var(--wp--preset--color--ink);
	outline-offset: 1px;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

/*
 * An SVG used as a background-image is a separate document, so it cannot read
 * currentColor. The arrow therefore lives in a custom property that a dark
 * style variation overrides with a light-stroked version.
 */
:root {
	--executive-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191C20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--canvas) var(--executive-select-arrow) no-repeat;
	background-size: 16px;
	background-position: calc(100% - 12px) 50%;
	padding-right: 2.2em;
}

label {
	width: 100%;
	display: block;
}

::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 0.75;
}

/* Section styles
---------------------------------------------------------------------------- */

/*
 * Section: Dark, Light and Accent are defined in styles/blocks/section/*.json.
 * They were registered, they showed up in the sidebar, and picking one changed
 * nothing on a pattern. This is why.
 *
 * WordPress writes a block style variation as a plain declaration:
 *
 *     :root :where(.wp-block-group.is-style-section-dark){background-color:…}
 *
 * but a colour picked from the palette is written as a preset class, and those
 * are always marked important:
 *
 *     .has-canvas-background-color{background-color:… !important}
 *
 * Seventy-five of the patterns in this theme state their own background on the
 * outermost block that way, because that is what a section is. So the variation
 * lost to the pattern on exactly the block it was made for, every time, and no
 * amount of editing the JSON could change that — theme.json has no way to write
 * !important.
 *
 * The two properties that collide are restated here with the weight to win: one
 * extra class of specificity and the same !important. The values stay palette
 * slugs, so every colour variation keeps its own reading of them.
 *
 * Those files used to repaint headings, links and buttons for the whole subtree
 * as well. They no longer do, and the section below is why: a section says what
 * it is, and everything inside it works out its own colour from the surface it
 * actually stands on.
 */
:is(.wp-block-group, .wp-block-cover).is-style-section-dark {
	background-color: var(--wp--preset--color--canvas-inverse) !important;
	color: var(--wp--preset--color--ink-inverse) !important;
}

:is(.wp-block-group, .wp-block-cover).is-style-section-light {
	background-color: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--ink) !important;
}

:is(.wp-block-group, .wp-block-cover).is-style-section-accent {
	background-color: var(--wp--preset--color--brand-light) !important;
	color: var(--wp--preset--color--ink) !important;
}

/*
 * A cover keeps its image: the background above sits behind the media and the
 * overlay, where it cannot be seen. On a cover the section style is therefore a
 * text treatment, which is the useful half of it anyway — the colour it repaints
 * beats the fixed white that core puts on every cover.
 */

/* Colour context
---------------------------------------------------------------------------- */

/*
 * Everything above only settles what colour the section itself is. The harder
 * question is what happens to the blocks inside it, and that is where this theme
 * kept producing white text on a white card.
 *
 * The old arrangement pointed every text colour at a fixed palette slug: the
 * section style repainted headings, links and buttons for the whole subtree, the
 * Muted role carried a colour chosen for a light page, and a handful of rules
 * further down tried to undo the damage per combination. Each of those rules
 * named one surface, so a card nested one level deeper than the author imagined
 * fell straight through, and the two halves fought on specificity instead of on
 * meaning. Switching a section to Dark was enough to make a grid of white cards
 * unreadable, which is exactly what happened.
 *
 * So a colour is no longer stated per block. Every surface declares what reads
 * on it, once, in these four custom properties:
 *
 *     --executive-text          body text
 *     --executive-text-muted    the Muted and Eyebrow roles
 *     --executive-link          a link that is not a button
 *     --executive-button-*      a solid button
 *
 * Custom properties inherit, and a value set on a card always beats the value
 * coming down from the section around it — no !important, no specificity race,
 * and it holds at any nesting depth. A white card inside a dark section inside a
 * darker page reads correctly because the card is the nearest surface, full
 * stop. That is the whole mechanism.
 *
 * Three contexts, written against the palette so all nine colour variations get
 * the same guarantee.
 */

/*
 * Light surfaces: dark text. Also the page default.
 *
 * A cover is in this list twice, once each way. Its overlay colour sits on a
 * child element, so the cover itself carries no background class to read — but
 * WordPress already tells us which way it went, because core needs the same
 * answer for its own black-or-white rule. is-light means a light overlay.
 */
:root,
.has-canvas-background-color,
.has-surface-background-color,
.has-brand-light-background-color,
.has-brand-alt-background-color,
.has-border-background-color,
.wp-block-cover.is-light {
	--executive-text: var(--wp--preset--color--ink);
	--executive-text-muted: var(--wp--preset--color--ink-muted);
	--executive-link: var(--wp--preset--color--ink);
	--executive-button-background: var(--wp--preset--color--ink);
	--executive-button-text: var(--wp--preset--color--canvas);
	--executive-accent: var(--wp--preset--color--brand);
}

/* Dark surfaces: light text. */
.has-canvas-inverse-background-color,
.has-ink-background-color,
.has-border-inverse-background-color,
.has-brand-alt-dark-background-color,
.wp-block-cover:not(.is-light),
.executive-scrim-soft,
.executive-scrim-medium,
.executive-scrim-strong {
	--executive-text: var(--wp--preset--color--ink-inverse);
	--executive-text-muted: var(--wp--preset--color--ink-inverse-muted);
	--executive-link: var(--wp--preset--color--ink-inverse);
	--executive-button-background: var(--wp--preset--color--canvas);
	--executive-button-text: var(--wp--preset--color--ink);
	--executive-accent: var(--wp--preset--color--brand-alt);
}

/*
 * Three surfaces sit too close to the muted tone meant for them, so on those the
 * muted roles drop back to full-strength text. This is measured, not guessed —
 * docs/check-contrast.py runs the table below against all nine colour variations
 * and these were the only combinations that failed. Muted on Brand Alt lands
 * between 3.1:1 and 4.5:1 depending on the variation, and muted on Dark Section
 * Border between 3.0:1 and 4.4:1. A label you can read beats a decorative one.
 */
.has-brand-alt-background-color {
	--executive-text-muted: var(--wp--preset--color--ink);
}

.has-border-inverse-background-color {
	--executive-text-muted: var(--wp--preset--color--ink-inverse);
}

/* The brand colour as a surface, for the same reason. */
.has-brand-background-color {
	--executive-text: var(--wp--preset--color--canvas);
	--executive-text-muted: var(--wp--preset--color--canvas);
	--executive-link: var(--wp--preset--color--canvas);
	--executive-button-background: var(--wp--preset--color--canvas);
	--executive-button-text: var(--wp--preset--color--brand);
}

/*
 * The accent, and the three surfaces it cannot be used on.
 *
 * An eyebrow is the brand colour rather than a grey — that one change is most of
 * what makes a heading look considered instead of plain, because it gives the
 * heading an approach rather than a cold start.
 *
 * The brand colour is the accent on light ground and the lighter Brand Alt on
 * dark ground, which covers every surface except three: the brand colours
 * themselves, and Dark Section Border. On those, an accent would be a tint of
 * the surface it stands on, so it falls back to plain text — same reasoning, and
 * the same measurement, as the muted rules above.
 */
.has-brand-alt-background-color {
	--executive-accent: var(--wp--preset--color--ink);
}

.has-brand-background-color {
	--executive-accent: var(--wp--preset--color--canvas);
}

.has-brand-alt-dark-background-color,
.has-border-inverse-background-color {
	--executive-accent: var(--wp--preset--color--ink-inverse);
}

/*
 * A scrim: a translucent panel over a photo, used for a price tag or an add to
 * cart bar. Always dark, whatever is underneath, so it belongs with the dark
 * surfaces above. The three strengths are the ones the patterns were already
 * using as raw hex values.
 */
.executive-scrim-soft {
	background-color: color-mix(in srgb, var(--wp--preset--color--canvas-inverse) 19%, transparent);
}

.executive-scrim-medium {
	background-color: color-mix(in srgb, var(--wp--preset--color--canvas-inverse) 35%, transparent);
}

.executive-scrim-strong {
	background-color: color-mix(in srgb, var(--wp--preset--color--canvas-inverse) 77%, transparent);
}

/*
 * A section style is a surface too, and it outranks anything else sitting on the
 * same block — that is the point of picking one. Hence last, and matched on the
 * block class as well so it carries the same weight as the cover rules above.
 */
:is(.wp-block-group, .wp-block-cover).is-style-section-light,
:is(.wp-block-group, .wp-block-cover).is-style-section-accent {
	--executive-text: var(--wp--preset--color--ink);
	--executive-text-muted: var(--wp--preset--color--ink-muted);
	--executive-link: var(--wp--preset--color--ink);
	--executive-button-background: var(--wp--preset--color--ink);
	--executive-button-text: var(--wp--preset--color--canvas);
}

:is(.wp-block-group, .wp-block-cover).is-style-section-dark {
	--executive-text: var(--wp--preset--color--ink-inverse);
	--executive-text-muted: var(--wp--preset--color--ink-inverse-muted);
	--executive-link: var(--wp--preset--color--ink-inverse);
	--executive-button-background: var(--wp--preset--color--canvas);
	--executive-button-text: var(--wp--preset--color--ink);
}

/* What reads the context
---------------------------------------------------------------------------- */

/*
 * A block that states its own background but no text colour. Headings and plain
 * paragraphs below it need no rule at all: nothing declares a colour on them, so
 * they inherit this one.
 *
 * has-text-color means the author picked a colour by hand, and that always wins.
 */
:is(
	.has-canvas-background-color,
	.has-surface-background-color,
	.has-brand-light-background-color,
	.has-brand-alt-background-color,
	.has-border-background-color,
	.has-canvas-inverse-background-color,
	.has-ink-background-color,
	.has-border-inverse-background-color,
	.has-brand-alt-dark-background-color,
	.has-brand-background-color,
	.executive-scrim-soft,
	.executive-scrim-medium,
	.executive-scrim-strong
):not(.has-text-color) {
	color: var(--executive-text);
}

/*
 * A cover, for the same reason. Core already writes a colour here, but it writes
 * a literal black or white; this replaces it with the palette, so a cover reads
 * the same as every other surface in all nine colour variations. Set on the
 * inner container rather than on the cover, which is where the content actually
 * is and saves arguing with core over a tie in specificity.
 */
.wp-block-cover:not(.has-text-color) > .wp-block-cover__inner-container {
	color: var(--executive-text);
}

/*
 * Links and the named roles do need one, because something already declares a
 * colour on them — theme.json for links, styles/blocks/text/*.json for the
 * roles. Those files stay as they are: they are what the block is worth on a
 * default page, and on a default page these rules resolve to the same value.
 * They only diverge once the block is standing on a surface that says otherwise.
 *
 * The extra :not() is doing two jobs — it protects a hand-picked colour, and it
 * carries the weight needed to outrank the declaration being replaced.
 */
a:not(.wp-element-button):not(.has-text-color) {
	color: var(--executive-link);
}

:is(
	.is-style-muted,
	.is-style-muted-inverse
):not(.has-text-color) {
	color: var(--executive-text-muted);
}

/*
 * An eyebrow carries the accent, not the muted grey. It is a label of four or
 * five words above a heading, so it can afford to be the brand colour where a
 * paragraph could not — and that is exactly where the colour earns its keep.
 */
:is(
	.is-style-eyebrow,
	.is-style-eyebrow-inverse
):not(.has-text-color) {
	color: var(--executive-accent);
}

/*
 * A plain button, which is what nearly every pattern uses. Left alone: a button
 * carrying one of the styles from styles/blocks/button/, because Dark, Light and
 * Tint are a choice and not a default, and Outline, because it draws itself in
 * currentColor and so already follows the surface it stands on. That is what the
 * is-style- test excludes — the class sits on the wrapper, one level up.
 */
:not([class*="is-style-"]) > .wp-element-button:not(.has-background) {
	background-color: var(--executive-button-background);
}

:not([class*="is-style-"]) > .wp-element-button:not(.has-text-color) {
	color: var(--executive-button-text);
}

/* Helper styles
---------------------------------------------------------------------------- */

a.more-link {
	display: block;
}

/* Inline code */
*:not(.wp-block-code) > code {
	background-color: var(--wp--preset--color--surface);
	padding: 3px 5px;
	position: relative;
	border-radius: var(--executive-radius-control);
}

.wp-block-categories {
	position: relative;
}

/* Remove margin on term description on archive pages */
.wp-block-term-description p:last-child {
	margin-bottom: 0;
}

/* Remove last separator on post list */
.remove-border-and-padding .wp-block-post-template li:last-child .wp-block-separator {
	display: none;
}

/* Hide post meta div if no tags assigned */
.single .wp-block-group:has(> .post-meta:empty) {
	display: none;
}

.wp-block-group:empty:has(+ .comment-respond) {
	display: none;
}

.row-logos > figure {
	flex-shrink: 1 !important;
}

/*
 * A full width cover that keeps the container.
 *
 * Core shrink-wraps the inner container of a cover the moment a content
 * position is picked — `margin:0;width:auto` — and from that point the
 * constrained layout has nothing left to constrain: the content hugs whichever
 * corner was chosen, hard against the edge of the screen, no matter how the
 * content width toggle is set. That is harmless on a card, which is only as
 * wide as its column anyway, and wrong on a hero, where the copy has to start
 * on the same line as every other section on the page.
 *
 * Handing the inner container its width back is the whole fix: the constrained
 * layout takes the horizontal placement over again, and the cover's own flexbox
 * still does the vertical placement the content position was chosen for. Scoped
 * to full width covers, so cards keep the shrink-wrap that suits them.
 *
 * The repeated classes are counting, not decoration. Core writes this rule with
 * .wp-block-cover twice and the position class as well, which is five classes,
 * and its block stylesheet is printed after the theme's — so anything that only
 * matches that weight ties and loses. Six beats it whatever the order.
 */
.wp-block-cover.alignfull.alignfull.has-custom-content-position.has-custom-content-position > .wp-block-cover__inner-container {
	width: 100%;
}



/* Gutenberg sticky header support.
 * A sticky Group inside a template part is otherwise constrained by the height
 * of the template-part wrapper. When Gutenberg adds is-position-sticky, the
 * wrapper becomes the sticky box while the user's block remains fully editable. */
:where(header.wp-block-template-part, .wp-block-template-part):has(> .executive-site-header.is-position-sticky),
:where(header.wp-block-template-part, .wp-block-template-part):has(> .executive-site-header[style*="position:sticky"]),
:where(header.wp-block-template-part, .wp-block-template-part):has(> .executive-site-header[style*="position: sticky"]) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.executive-site-header.is-position-sticky,
.executive-site-header[style*="position:sticky"],
.executive-site-header[style*="position: sticky"] {
	position: sticky !important;
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	z-index: 100;
}

@media (max-width: 600px) {
	:where(header.wp-block-template-part, .wp-block-template-part):has(> .executive-site-header.is-position-sticky),
	:where(header.wp-block-template-part, .wp-block-template-part):has(> .executive-site-header[style*="position:sticky"]),
	:where(header.wp-block-template-part, .wp-block-template-part):has(> .executive-site-header[style*="position: sticky"]),
	.executive-site-header.is-position-sticky,
	.executive-site-header[style*="position:sticky"],
	.executive-site-header[style*="position: sticky"] {
		top: 0 !important;
	}
}

/*
 * Transparent header. Taken out of the flow so the section below starts at the
 * top of the page and the header sits on top of it. Only use this on templates
 * whose first section is dark enough to carry light navigation.
 *
 * The :not() is not decoration. This selector and the sticky one above have the
 * same specificity, so without it the later rule simply wins and a transparent
 * header that the editor has been told to make sticky scrolls away with the
 * page: absolute beats fixed purely because it is written second. Excluding the
 * sticky case here lets the two combine, which is the pairing anyone reaches
 * for — transparent over the hero, solid and pinned once past it.
 */
body:not(.wp-admin) header:has(> .executive-header-transparent):not(:has(> .is-position-sticky)) {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Mobile helper classes
---------------------------------------------------------------------------- */

/*
 * Opting a header out of sticking on a phone. Same weight as the sticky rule
 * for the same reason as the admin-bar correction above — without `body` in
 * front of it this rule loses and the header stays pinned.
 */

@media (max-width: 900px) {
	.executive-pattern--gallery-overlap .executive-project-gallery__grid {
		grid-template-columns: minmax(0, 1fr) minmax(15rem, .8fr);
	}

	.executive-pattern--gallery-overlap .executive-project-gallery__item--hero img {
		max-height: 29rem;
	}
}

@media (max-width: 781px) {
	.executive-pattern--gallery-overlap .executive-project-gallery__grid {
		grid-template-columns: 1fr;
	}

	.executive-pattern--gallery-overlap .executive-project-gallery__item--hero,
	.executive-pattern--gallery-overlap .executive-project-gallery__side,
	.executive-pattern--gallery-overlap .executive-project-gallery__item--wide {
		grid-column: 1;
		grid-row: auto;
	}

	.executive-pattern--gallery-overlap .executive-project-gallery__side {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.executive-pattern--gallery-overlap .executive-project-gallery__item--hero img,
	.executive-pattern--gallery-overlap .executive-project-gallery__item--detail img,
	.executive-pattern--gallery-overlap .executive-project-gallery__item--wide img {
		max-height: none;
	}

	.executive-pattern--gallery-overlap .executive-project-gallery__item--hero img {
		aspect-ratio: 4 / 3;
	}

	.executive-pattern--gallery-overlap .executive-project-gallery__item--detail img,
	.executive-pattern--gallery-overlap .executive-project-gallery__item--wide img {
		aspect-ratio: 16 / 9;
	}

	body:not(.wp-admin) header:has(>.executive-unstick-mobile) {
		position: static;
	}
}

/* Tabs
---------------------------------------------------------------------------- */

/*
 * A segmented control rather than a row of folder tabs: one rounded track with
 * the chosen segment raised out of it. It reads as a control at a glance, it
 * survives any number of labels, and it does not need the hairline-and-notch
 * trickery that makes classic tabs look dated the moment the palette changes.
 *
 * The track scrolls sideways when the labels no longer fit, which is what saves
 * this on a phone. Snapping makes that feel deliberate instead of loose, and the
 * scrollbar itself is hidden because the raised segment already says there is
 * more to the right.
 */
.executive-tabs__list {
	counter-reset: executive-tab;
	display: flex;
	gap: 4px;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
	padding: 5px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.executive-tabs__list::-webkit-scrollbar {
	display: none;
}

.executive-tabs__list p {
	margin: 0;
	counter-increment: executive-tab;
}

/*
 * The number in front of the label. It is drawn rather than typed, so nobody
 * has to renumber anything after adding or moving a tab, and the sequence
 * cannot end up wrong in a translation.
 */
.executive-tabs__list :is(a, button)::before {
	content: counter(executive-tab, decimal-leading-zero);
	margin-inline-end: .6em;
	opacity: .55;
	font-size: .8em;
	font-variant-numeric: tabular-nums;
}

.executive-tabs__list :is(a, button) {
	display: block;
	padding: .7em 1.5em;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	scroll-snap-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.executive-tabs__list :is(a, button):hover {
	color: var(--wp--preset--color--ink);
}

.executive-tabs__list :is(a, button).is-active {
	background-color: var(--wp--preset--color--canvas);
	box-shadow: var(--wp--preset--shadow--medium-light);
	color: var(--wp--preset--color--brand);
}

/* The number on the chosen tab carries the accent at full strength. */
.executive-tabs__list :is(a, button).is-active::before {
	opacity: 1;
}

/*
 * The tab row on a phone.
 *
 * Three pills side by side need more width than a phone has, and the row then
 * scrolls sideways: everything is still reachable, but the tabs past the fold
 * are reachable only by a swipe nobody is told about. Below 600px the script's
 * button takes over and the row itself drops down underneath it.
 *
 * The wrapper is display: contents on a wide screen, so it is there in the
 * markup and absent from the layout: the row goes on centring itself in the
 * section exactly as it did before, and only below the breakpoint does the
 * wrapper become a box for the panel to be positioned against.
 *
 * The button is hidden by default rather than shown by default, so a page where
 * the script did not run never shows a control that opens nothing.
 */
.executive-tabs__mobile {
	display: contents;
}

.executive-tabs__toggle {
	display: none;
}

@media (max-width: 781px) {

	.executive-tabs.is-enhanced .executive-tabs__mobile {
		display: block;
		position: relative;
		z-index: 1;
		max-width: 26rem;
		margin-inline: auto;
	}

	.executive-tabs.is-enhanced .executive-tabs__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1em;
		width: 100%;
		padding: .8em 1.5em;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 999px;
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink);
		cursor: pointer;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		text-align: start;
	}

	/*
	 * The arrow is drawn from two borders rather than set as an image, so it
	 * takes its colour from the palette like everything else and can turn over
	 * when the panel opens.
	 */
	.executive-tabs.is-enhanced .executive-tabs__toggle::after {
		content: "";
		flex: none;
		width: .45em;
		height: .45em;
		margin-top: -.2em;
		border-right: 2px solid var(--wp--preset--color--brand);
		border-bottom: 2px solid var(--wp--preset--color--brand);
		transform: rotate(45deg);
	}

	.executive-tabs.is-enhanced.is-open .executive-tabs__toggle::after {
		margin-top: .2em;
		transform: rotate(-135deg);
	}

	/*
	 * The panel hangs off the button instead of pushing the section down, so
	 * opening it moves nothing that was already on the screen. Closed it is
	 * hidden rather than transparent, which keeps it out of the tab order and
	 * out of what a screen reader walks through.
	 */
	.executive-tabs.is-enhanced .executive-tabs__list {
		position: absolute;
		inset-inline: 0;
		top: calc(100% + 6px);
		flex-direction: column;
		/* The row layout centres its items; stacked they have to fill the panel. */
		align-items: stretch;
		width: auto;
		max-width: none;
		margin-inline: 0;
		padding: 6px;
		border-radius: var(--executive-radius-control);
		box-shadow: var(--wp--preset--shadow--large-light);
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-.4em);
		transform-origin: top center;
	}

	.executive-tabs.is-enhanced.is-open .executive-tabs__list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.executive-tabs.is-enhanced .executive-tabs__list :is(a, button) {
		width: 100%;
		text-align: start;
		white-space: normal;
	}
}

/*
 * The opening itself, behind the usual guard. Visibility is switched at the end
 * of the closing move and at the start of the opening one, so the panel is
 * never both invisible and in the way.
 */
@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {

	.executive-tabs.is-enhanced .executive-tabs__toggle::after {
		transition: transform .25s cubic-bezier(.22, .61, .36, 1), margin-top .25s cubic-bezier(.22, .61, .36, 1);
	}

	.executive-tabs.is-enhanced .executive-tabs__list {
		transition:
			opacity .2s ease,
			transform .25s cubic-bezier(.22, .61, .36, 1),
			visibility 0s linear .25s;
	}

	.executive-tabs.is-enhanced.is-open .executive-tabs__list {
		transition:
			opacity .2s ease,
			transform .25s cubic-bezier(.22, .61, .36, 1),
			visibility 0s;
	}
}

/*
 * Every panel sits in the same grid cell, so the set is as tall as its tallest
 * panel and switching tabs moves nothing else on the page. Hiding with display
 * would shrink the page under the pointer at the moment of the click, and the
 * page would appear to jump — which is exactly what it feels like.
 *
 * visibility rather than opacity, because visibility takes the panel out of the
 * accessibility tree and out of the tab order as well.
 */
.executive-tabs.is-enhanced .executive-tabs__panels {
	display: grid;
}

.executive-tabs.is-enhanced .executive-tabs__panel {
	grid-area: 1 / 1;
	visibility: hidden;
}

.executive-tabs.is-enhanced .executive-tabs__panel.is-active {
	visibility: visible;
}

/*
 * Before the script runs — and on a page where it never runs — every panel is
 * visible and the links are anchors to them. That is a readable section rather
 * than a broken control, so it only needs breathing room between the panels.
 */
.executive-tabs:not(.is-enhanced) .executive-tabs__panel + .executive-tabs__panel {
	margin-top: var(--wp--preset--spacing--large);
}

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

	.executive-tabs.is-enhanced .executive-tabs__panel.is-active {
		animation: executive-tab-in .35s cubic-bezier(.22, .61, .36, 1);
	}
}

@keyframes executive-tab-in {

	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Table
--------------------------------------------- */

.wp-block-table table {
	background: var(--wp--preset--color--canvas);
	border-radius: var(--executive-radius-control);
	border: solid 1px var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--x-small);
}
.wp-block-table.is-style-stripes {
	border-bottom: none;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface);
}

.wp-block-table td, 
.wp-block-table th,
.wp-block-table thead {
	border: none;
	border-bottom: solid 1px color-mix(in srgb, var(--wp--preset--color--border) 50%, var(--wp--preset--color--canvas) 5%);
}

.wp-block-table th,
.wp-block-table tfoot {
	text-align: start;
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 75%, var(--wp--preset--color--canvas) 5%);
}

.wp-block-table td, 
.wp-block-table th {
	padding: .8em 1em;
}

.wp-block-table tfoot {
	border-top: solid 1px var(--wp--preset--color--border);
}

.wp-block-table tfoot td {
	border-bottom: none;
}

/* Motion
---------------------------------------------------------------------------- */

/*
 * Every class in this section is opt-in: add it under Block → Advanced →
 * Additional CSS class(es). Nothing here runs on JavaScript.
 *
 * Scroll-driven reveals sit behind two guards, and both are load-bearing. The
 * @supports guard prevents a browser that does not understand animation-timeline
 * from applying the `from` keyframe as a plain static style, which would leave
 * the content invisible with nothing to ever reveal it. The reduced-motion guard
 * is the usual courtesy. Outside either guard the content simply renders.
 */

/*
 * Lenis needs the document to size itself normally; it reads and writes the
 * real scroll position rather than transforming a wrapper.
 */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-stopped {
	overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

/*
 * The entrance.
 *
 * Further travel and a touch of scale read as weight rather than as a widget
 * sliding in. The easing is an expo-out: almost all of the distance is covered
 * early, then it settles for a long time. That long settle is what separates
 * "expensive" from "animated" — a linear or ease-out curve arrives and stops,
 * this one glides to rest.
 *
 * linear() approximates that curve for browsers that support it; the plain
 * `linear` fallback keeps the scroll-driven version honest, since a
 * scroll-driven animation is scrubbed by position and should not double-ease.
 */
/*
 * Movement only, deliberately.
 *
 * An earlier version faded opacity from 0 as well. That is one dropped frame,
 * one unsupported range, one odd element height away from leaving body text
 * sitting at half opacity — which reads as unreadable grey on white and looks
 * like a broken palette rather than a broken animation.
 *
 * Text is not allowed to depend on an animation finishing. Transform alone
 * still reads as arrival, and the worst case is a section that sits still.
 */
@keyframes executive-rise-in {
	from {
		transform: translate3d(0, 40px, 0) scale(0.985);
	}

	to {
		transform: none;
	}
}

/*
 * Two ways to reveal, and only ever one of them at a time.
 *
 * The scroll-driven version below is scrubbed by scroll position: it follows the
 * wheel, and it runs backwards when you scroll back up. That reads as reactive.
 * A section that plays once, on its own clock, and then stays put reads as
 * composed — which is the register this theme is after.
 *
 * So when the observer in executive-motion.js is available it marks the
 * document and takes over, and everything below stands down. Without JavaScript,
 * without IntersectionObserver, or with reduced motion asked for, the CSS
 * version is still there and nothing is lost.
 */
html.executive-motion-js .executive-reveal,
html.executive-motion-js .executive-reveal-children > * {
	animation: none !important;
}

/*
 * The JavaScript path.
 *
 * An element is only ever hidden by the script that is about to observe it —
 * `armed` is added element by element, immediately before observe(). That keeps
 * the guarantee the scroll-driven version makes further up: content cannot end
 * up invisible with nothing left to reveal it, because nothing is hidden until
 * the thing that will unhide it is already watching.
 */
@media (prefers-reduced-motion: no-preference) {
	.executive-armed {
		opacity: 0;
		transform: translate3d(0, 26px, 0) scale(0.99);
	}

	.executive-revealed {
		opacity: 1;
		transform: none;
		transition:
			transform 900ms cubic-bezier(.19, 1, .22, 1),
			opacity 900ms cubic-bezier(.19, 1, .22, 1);
		will-change: transform;
	}

	/*
	 * Stagger by 90 ms. Six is the limit: beyond that, the visitor waits for the
	 * final card instead of seeing the row arrive as a whole.
	 */
	.executive-reveal-children > .executive-revealed:nth-child(2) { transition-delay: 90ms; }
	.executive-reveal-children > .executive-revealed:nth-child(3) { transition-delay: 180ms; }
	.executive-reveal-children > .executive-revealed:nth-child(4) { transition-delay: 270ms; }
	.executive-reveal-children > .executive-revealed:nth-child(5) { transition-delay: 360ms; }
	.executive-reveal-children > .executive-revealed:nth-child(n+6) { transition-delay: 450ms; }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.executive-reveal,
		.executive-reveal-children > * {
			animation: executive-rise-in linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 32%;
			will-change: transform;
		}

		/*
		 * Each child gets its own view() timeline, so rows in a grid already
		 * arrive one after another. Within a single row they would land at the
		 * same moment, so the range start is nudged per position to spread them.
		 */
		.executive-reveal-children > *:nth-child(2) {
			animation-range: entry 11% cover 38%;
		}

		.executive-reveal-children > *:nth-child(3) {
			animation-range: entry 17% cover 44%;
		}

		.executive-reveal-children > *:nth-child(n+4) {
			animation-range: entry 23% cover 50%;
		}
	}
}

/*
 * Arrival from the side.
 *
 * The rise is the house entrance and it belongs on a section you meet head on:
 * a header, a grid, a band. It is the wrong move for two things standing beside
 * each other, because both halves lift at once and the eye has nowhere to go.
 * There they come in from their own side instead, which reads as the pair being
 * assembled rather than as a page loading.
 *
 * Half the travel of the rise, deliberately. Sideways movement is read faster
 * than vertical, so the same distance would look like a swipe.
 *
 * These are directional, so rtl.css swaps the two round.
 */
@keyframes executive-slide-in-start {

	from {
		transform: translate3d(-24px, 0, 0);
	}

	to {
		transform: none;
	}
}

@keyframes executive-slide-in-end {

	from {
		transform: translate3d(24px, 0, 0);
	}

	to {
		transform: none;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		.executive-reveal-start {
			animation: executive-slide-in-start linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 38%;
			will-change: transform;
		}

		.executive-reveal-end {
			animation: executive-slide-in-end linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 38%;
			will-change: transform;
		}
	}
}

/*
 * The page boundary for those two entrances.
 *
 * A side entrance only works if there is a side to come in from, so for the
 * length of its range the element really is standing up to 24px outside the
 * page — .executive-reveal-start to the left of it, .executive-reveal-end to
 * the right. Because the animation is scrubbed by scroll position rather than
 * played once, an element is left parked mid-travel at any resting scroll
 * position, not just in passing. The browser counts that overhang as scrollable
 * width, so the whole document gains a horizontal scrollbar and every page can
 * be dragged sideways — worst on a phone, where the drag is a thumb away and
 * the 24px is a larger share of the screen.
 *
 * Clipping at the page edge is the fix rather than shortening the travel: the
 * off-canvas position is the point of the effect, and outside the page is
 * exactly where it belongs.
 *
 * `clip` rather than `hidden`, and one axis rather than both, and both halves
 * of that matter. `hidden` would make this a scroll container, which silently
 * re-anchors every position: sticky inside it and gives the browser somewhere
 * to scroll to on focus. `clip` creates no scroll container at all. And `clip`
 * on one axis is the one combination that leaves the other axis genuinely
 * `visible`, so nothing that hangs below a section — a dropdown, a shadow, a
 * sticky aside — is touched.
 *
 * The fixed headers are unaffected: their containing block is the viewport, and
 * ancestor clipping only reaches a fixed element through its containing block.
 */
.wp-site-blocks {
	overflow-x: clip;
}

/*
 * A figure that counts up to itself.
 *
 * The number in the markup is the finished value, not a zero. Without
 * JavaScript it simply stands there and reads correctly, which is the whole
 * point: a statistic that renders as 0 because a script failed is worse than
 * one that never moved. The script only overwrites it while it is counting.
 *
 * Tabular figures stop the width jumping as the digits change, which otherwise
 * makes the whole row twitch on every frame.
 */
.executive-count {
	font-variant-numeric: tabular-nums;
}

/*
 * A bar that fills to its value.
 *
 * The value lives in a custom property on the element, so the bar is one class
 * and the number is data. Same reasoning as the counter: without the observer
 * the bar is already at its width, and the animation is added only once the
 * script has announced itself on the document element.
 */
.executive-bar {
	position: relative;
	display: block;
	block-size: 3px;
	inline-size: 100%;
	background-color: color-mix(in srgb, currentColor 18%, transparent);
}

.executive-bar::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--executive-bar-value, 0%);
	background-color: var(--executive-accent);
}

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

	html.executive-motion-js .executive-bar::after {
		inline-size: 0;
		transition: inline-size 1200ms cubic-bezier(.19, 1, .22, 1);
	}

	html.executive-motion-js .executive-bar.executive-filled::after {
		inline-size: var(--executive-bar-value, 0%);
	}
}

/*
 * A price list: a name, a leader of dots, an amount.
 *
 * The dots are a repeating gradient on the middle element rather than a row of
 * full stops, so they stay evenly spaced at any width and a screen reader has
 * nothing to read out. The amount never wraps under the name.
 */
.executive-price-row {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	inline-size: 100%;
}

.executive-price-row > :first-child {
	flex: none;
	margin: 0;
}

.executive-price-row > :last-child {
	flex: none;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.executive-price-row::before {
	content: "";
	flex: 1 1 auto;
	align-self: end;
	block-size: 1px;
	margin-block-end: .35em;
	background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
	background-size: 6px 1px;
	background-repeat: repeat-x;
	opacity: .35;
}

/*
 * A timeline.
 *
 * One rule down the middle on a wide screen, entries alternating either side of
 * it; one rule down the left on a narrow screen with everything beside it. The
 * markup is the same in both cases — a plain list of groups — because a
 * timeline that needs different blocks per breakpoint is a timeline nobody will
 * maintain.
 */
.executive-timeline {
	position: relative;
}

.executive-timeline::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 1px;
	background-color: var(--wp--preset--color--border);
}

.executive-timeline > * {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--medium);
}

.executive-timeline > *::before {
	content: "";
	position: absolute;
	inset-inline-start: -4px;
	inset-block-start: .6em;
	inline-size: 9px;
	block-size: 9px;
	background-color: var(--executive-accent);
}

@media (min-width: 782px) {

	.executive-timeline::before {
		inset-inline-start: 50%;
	}

	.executive-timeline > * {
		inline-size: 50%;
		padding-inline-start: var(--wp--preset--spacing--large);
		margin-inline-start: 50%;
	}

	.executive-timeline > *::before {
		inset-inline-start: calc( var(--wp--preset--spacing--large) / -2 - 4px );
	}

	/* Every other entry moves to the left of the rule and reads right to left. */
	.executive-timeline > *:nth-child(odd) {
		margin-inline-start: 0;
		padding-inline-start: 0;
		padding-inline-end: var(--wp--preset--spacing--large);
		text-align: end;
	}

	.executive-timeline > *:nth-child(odd)::before {
		inset-inline-start: auto;
		inset-inline-end: calc( var(--wp--preset--spacing--large) / -2 - 4px );
	}
}

/*
 * The tile on the seam.
 *
 * A small filled square holding one line icon, sitting deliberately across the
 * join between two blocks — half on the image above, half on the panel below.
 * It is the one element that appears on nearly every section, and the reason it
 * works is that it refuses to respect the boundary: two flat planes meeting in a
 * straight line read as a layout, the same two with something laid across the
 * join read as a composition.
 *
 * Sized in one custom property so the pull is always exactly half, whatever the
 * tile measures. Set --executive-seam-size on the block to change it.
 */
.executive-seam-tile {
	--executive-seam-size: clamp(3.25rem, 6vw, 5.5rem);
	block-size: var(--executive-seam-size);
	inline-size: var(--executive-seam-size);
	display: grid;
	place-items: center;
	position: relative;
	z-index: 2;
	flex: none;
	margin-block-start: calc(var(--executive-seam-size) / -2);
	margin-block-end: 0;
	color: var(--executive-text);
}

/*
 * Een streep naast een link in plaats van een knop.
 *
 * De referentie zet onder bijna elke sectie zo'n stille verwijzing: een label in
 * kapitalen met een dunne lijn ernaast. Het is de tegenhanger van de knop — een
 * sectie die verder wil wijzen zonder om aandacht te vragen. Een <hr> tussen
 * flexitems zou zich uitrekken tot de volle breedte, dus de lengte staat vast.
 */
.executive-rule-inline {
	inline-size: clamp(2.5rem, 6vw, 5rem);
	block-size: 1px;
	border: 0;
	flex: none;
	align-self: center;
	opacity: .9;
}

/*
 * The icon lives here instead of in the pattern markup.
 *
 * An SVG in a Custom HTML block seemed like the shortest route, but it renders
 * in an isolated editor frame with a white background. The tile therefore broke
 * in the editor even though it looked right on the front end, and the icon would
 * be repeated in every instance of the markup.
 *
 * As a mask it is one CSS rule, inherits the surrounding colour through
 * currentColor, and lets a section choose another icon by overriding only
 * --executive-seam-icon.
 */
.executive-seam-tile::before {
	content: "";
	inline-size: 42%;
	aspect-ratio: 1;
	background-color: currentColor;
	-webkit-mask-image: var(--executive-seam-icon);
	mask-image: var(--executive-seam-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

:root {
	--executive-seam-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14l2 10H3L5 5z'/%3E%3Cpath d='M8 5 7 15M12 5v10M16 5l1 10'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M12 15v4M9 19h6'/%3E%3C/svg%3E");
}

/*
 * Pulls a block up over whatever sits above it. The distance is a spacing preset
 * rather than a number, so it moves with the rest of the vertical rhythm instead
 * of drifting away from it the first time that scale changes.
 */
.executive-overlap {
	position: relative;
	z-index: 1;
	margin-block-start: calc(-1 * var(--wp--preset--spacing--x-large));
}

@media (min-width: 782px) {
	.wp-block-group.alignwide.executive-overlap:not(.executive-card-grid) {
		width: 100%;
		max-width: min(1440px, calc(100% - var(--wp--preset--spacing--medium) * 2)) !important;
		margin-inline: auto;
	}

	.wp-block-group.executive-overlap > .wp-block-columns {
		width: 100%;
		max-width: min(100%, 1320px) !important;
		margin-inline: auto;
	}
}

@media (max-width: 781px) {

	/*
	 * On one column an overlap has nothing to overlap: the two blocks are simply
	 * stacked, and pulling the lower one up would slide it over the image rather
	 * than across its edge.
	 */
	.executive-overlap {
		margin-block-start: 0;
	}

	.executive-seam-tile {
		margin-block-start: calc(var(--executive-seam-size) / -2);
	}
}

/*
 * A hero carrying a looping video.
 *
 * The loop runs a few seconds and never stops, which is exactly the kind of
 * motion someone with reduced motion asked not to see — and a background video
 * has no pause control to offer them. So it is removed rather than paused, and
 * the video's own poster frame takes over as a still. The path is relative to
 * this stylesheet, which sits in the theme root.
 */
@media (prefers-reduced-motion: reduce) {

	.executive-video-hero .wp-block-cover__video-background {
		display: none;
	}

	.executive-video-hero {
	background-image: url("assets/images/office-view.webp");
		background-position: center;
		background-size: cover;
	}
}

/*
 * A card that rises under the pointer.
 *
 * Same curve and the same shadow behaviour as the buttons, so a page does not
 * end up with two different ideas about what a hover feels like. Hover only —
 * there is nothing behind it to reach, so a touch screen loses nothing.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.executive-lift-hover {
		transition:
			transform .4s cubic-bezier(.22, .61, .36, 1),
			box-shadow .4s cubic-bezier(.22, .61, .36, 1);
	}

	.executive-lift-hover:hover {
		transform: translateY(-4px);
		box-shadow: var(--executive-card-shadow);
	}
}

/*
 * Media that drifts against the scroll.
 *
 * The image sits taller than its frame and moves a fraction of the distance the
 * page does, so it reads as depth rather than as a moving picture. Kept small
 * on purpose: past a few percent it stops looking like parallax and starts
 * looking like a bug.
 *
 * This replaces the Cover block's Fixed background option on anything you want
 * to feel layered — background-attachment jumps on iOS and cannot be eased.
 */
@keyframes executive-drift {
	from {
		transform: translate3d(0, -4%, 0) scale(1.12);
	}

	to {
		transform: translate3d(0, 4%, 0) scale(1.12);
	}
}

/*
 * The frame has to clip, otherwise the oversized photo spills past it. A cover
 * clips on its own; a plain image block does not, and that is the one worth
 * reaching for on a band of nothing but photo — it keeps lazy loading and
 * responsive sources, which a cover with a fixed background gives up.
 */
.executive-parallax-media {
	overflow: hidden;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.executive-parallax-media :is(img, .wp-block-cover__image-background) {
			animation: executive-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
			will-change: transform;
		}
	}
}

/*
 * A photo the page scrolls over.
 *
 * The usual way to do this is a cover with a fixed background, and it costs more
 * than it looks: the photo becomes a CSS background, which gives up srcset and
 * lazy loading, and the block needs an empty text container that the editor then
 * fills with a placeholder nobody asked for.
 *
 * This keeps the image an image. clip-path on the frame makes it the containing
 * block for anything fixed inside it — that is what the spec says a clip-path
 * does — so the photo can be pinned to the viewport while the frame it shows
 * through scrolls away over it. No script, no background-attachment, and the
 * markup stays a plain image block with everything the browser normally does
 * for one.
 *
 * Behind both guards. Without clip-path support, and for anyone who asked for
 * less movement, the photo simply sits in the page as a photo.
 */
@supports (clip-path: inset(0)) {
	@media (prefers-reduced-motion: no-preference) {

		.executive-image-reveal {
			clip-path: inset(0);
			min-height: clamp(280px, 45vh, 520px);
		}

		.executive-image-reveal img {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			max-width: none;
			object-fit: cover;
		}
	}
}

/*
 * Media zoom on hover. The container needs its own overflow clip, otherwise the
 * scaled image spills past the rounded corners of a cover.
 */
.executive-zoom-media {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.executive-zoom-media :is(img, .wp-block-cover__image-background) {
		transition: transform .5s cubic-bezier(.22, .61, .36, 1);
	}

	.executive-zoom-media:hover :is(img, .wp-block-cover__image-background),
	.executive-zoom-media:focus-within :is(img, .wp-block-cover__image-background) {
		transform: scale(1.04);
	}
}

/*
 * Caption that slides in over a tile.
 *
 * Content behind a hover is content some people never reach, so this reveals on
 * :focus-within for keyboard users and stays permanently visible on touch and
 * under reduced motion. The hover effect is decoration on top of markup that
 * already works without it.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.executive-caption-slide .wp-block-cover__inner-container {
		opacity: 0;
		transform: translateX(-12%);
		transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
	}

	.executive-caption-slide:hover .wp-block-cover__inner-container,
	.executive-caption-slide:focus-within .wp-block-cover__inner-container {
		opacity: 1;
		transform: none;
	}
}

/*
 * Fixed backgrounds use the Cover block's own "Fixed background" toggle, so no
 * class is needed to switch one on. These two rules only undo it where it does
 * not belong: iOS ignores background-attachment: fixed and renders a badly
 * cropped image, and a fixed background is exactly the kind of movement
 * reduced-motion asks us to drop.
 */
@media (max-width: 781px) {
	.wp-block-cover.has-parallax {
		background-attachment: scroll;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.has-parallax {
		background-attachment: scroll;
	}
}

/*
 * Buttons.
 *
 * A small lift with a shadow that grows underneath it. The shadow travels
 * further than the button does, which is what makes it read as rising off the
 * page rather than nudging sideways. Active pulls it straight back down so a
 * click feels connected to the press.
 */
@media (prefers-reduced-motion: no-preference) {
	.wp-element-button,
	.wp-block-button__link {
		transition:
			transform .35s cubic-bezier(.22, .61, .36, 1),
			box-shadow .35s cubic-bezier(.22, .61, .36, 1),
			background-color .25s ease;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: translateY(-2px);
		box-shadow: var(--executive-card-shadow);
	}

	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: translateY(0);
		box-shadow: var(--executive-control-shadow);
	}
}

/*
 * Text links draw their underline from the start of the line instead of
 * switching it on. background-size animates on the compositor; text-decoration
 * does not, which is why this is drawn as a gradient rather than declared.
 */
@media (prefers-reduced-motion: no-preference) {
	.entry-content a:not(.wp-element-button):not([class*="wp-block-"]) {
		background-image: linear-gradient(currentColor, currentColor);
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0 1px;
		text-decoration: none;
		transition: background-size .4s cubic-bezier(.22, .61, .36, 1);
	}

	.entry-content a:not(.wp-element-button):not([class*="wp-block-"]):hover {
		background-size: 100% 1px;
	}
}

/*
 * Sticky column, for a section index beside a long list of questions.
 * align-self is required because a column is a stretched flex item by default,
 * and a full-height item has no room left to stick within.
 */
@media (min-width: 782px) {
	.executive-sticky-aside {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--executive-sticky-offset, 96px));
		align-self: start;
	}
}

/*
 * The header's call-to-action button on a collapsed header row.
 *
 * Every header pattern with a button — Blur, Floating, Pill, Solara — puts it
 * on a row that is set not to wrap, beside a navigation that is not allowed to
 * shrink: selfStretch: fit compiles to flex-shrink: 0 (see
 * patterns/header-floating.php). Wordmark + toggle + a full-width button no
 * longer fit on that row on a phone, and because nothing on the row may give
 * way, the excess leaves the header entirely and becomes horizontal overflow
 * on the whole page rather than a wrapped second line.
 *
 * The breakpoint is the one at which this theme collapses the navigation into
 * a toggle — 992px, see assets/styles/core-navigation.css — and not core's own
 * 782px. This rule used to stop at 781px, which left the 782–992px band that
 * this theme added with a collapsed menu and a full-width button still on the
 * row: exactly the case the rule was written to prevent.
 *
 * Two shapes are matched, the same two as the reordering rule in
 * core-navigation.css: a navigation standing directly beside the buttons
 * (Blur, Floating, Solara) and a navigation wrapped in a capsule of its own
 * (Pill). Both require the buttons to follow a navigation, so buttons
 * elsewhere in a header are left alone. Matching on shape rather than on a
 * class is what makes this reach a header that is already saved as a template
 * part in the database, where editing the pattern file would change nothing.
 *
 * .solara-header-action stays in the list for the header that names its CTA
 * explicitly, so that one keeps working even if its row is rearranged.
 *
 * The action is not lost: each of these CTAs is repeated further down the page,
 * and the menu it sits beside is one tap away.
 */
@media (max-width: 992px) {

	:is(header, .wp-block-template-part) :is(.wp-block-navigation, .wp-block-group:has(> .wp-block-navigation)) ~ .wp-block-buttons,
	.solara-header-action {
		display: none;
	}

	html,
	body {
		overflow-x: clip;
		scrollbar-width: none;
	}

	body::-webkit-scrollbar {
		display: none;
	}
}

/*
 * Transparent header that fades to solid on scroll, for use together with
 * .executive-header-transparent.
 *
 * One registered custom property carries the whole effect: the veil runs 0 → 1
 * as the page scrolls, and background, border and text colour are all derived
 * from it with color-mix. Registering it with @property is what makes it
 * interpolate at all — an unregistered custom property jumps from 0 to 1.
 */
@property --executive-header-veil {
	syntax: "<number>";
	initial-value: 0;
	inherits: true;
}

@keyframes executive-header-veil-in {
	from {
		--executive-header-veil: 0;
	}

	to {
		--executive-header-veil: 1;
	}
}

.executive-header-solidify {
	background-color: color-mix(in srgb, var(--wp--preset--color--canvas) calc(var(--executive-header-veil) * 100%), transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--border) calc(var(--executive-header-veil) * 100%), transparent);
}

/*
 * button belongs in this list. A navigation item that has a submenu is not a
 * link but a <button>, so leaving it out meant it never picked up the veil and
 * fell back to the inherited body colour — dark text on a dark hero, while
 * every item beside it was light.
 */
.executive-header-solidify :is(a, p, h1, h2, button, .wp-block-site-title):not(.wp-element-button) {
	color: color-mix(in srgb, var(--wp--preset--color--ink) calc(var(--executive-header-veil) * 100%), var(--wp--preset--color--ink-inverse));
}

/*
 * Desktop dropdowns opt out, for the same reason the mobile overlay does.
 *
 * A submenu is a child of the header, so the veil paints its links light while
 * the dropdown carries a light background of its own: white on white, and only
 * while the page is at the top, which is exactly when someone opens it.
 *
 * The dropdown never sits over the hero, so it states both its background and
 * its text colour instead of inheriting either. Scoped to the closed state, so
 * the mobile overlay keeps its own rule.
 */
.executive-header-solidify .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--canvas);
}

.executive-header-solidify .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container :is(a, button) {
	color: var(--wp--preset--color--ink);
}

/*
 * The mobile overlay is a child of the header, so the veil would tint its links
 * as well — light text on a light panel while the page is still at the top. The
 * overlay brings its own opaque background and is never transparent, so it opts
 * out of the veil completely.
 */
.executive-header-solidify .wp-block-navigation__responsive-container.is-menu-open :is(a, p, h1, h2, .wp-block-site-title) {
	color: var(--wp--preset--color--ink);
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.executive-header-solidify {
			animation: executive-header-veil-in linear both;
			animation-timeline: scroll();
			animation-range: 0 180px;
		}
	}
}

/*
 * Without scroll-driven animations the veil never moves, so the header would
 * stay transparent over whatever scrolls under it. Pin it to solid instead:
 * a header that is always readable beats one that is sometimes invisible.
 */
@supports not (animation-timeline: scroll()) {
	.executive-header-solidify {
		--executive-header-veil: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.executive-header-solidify {
		--executive-header-veil: 1;
	}
}

/*
 * Headings on a dark band follow the band.
 *
 * A heading colour set in Global Styles lands on the h1–h6 elements themselves,
 * which beats the text colour a section sets on its wrapper — inheritance loses
 * to any declaration. So a brand coloured heading stayed brand inside a brand
 * band and disappeared into it, and sat at three to one on a dark section.
 *
 * The classes below are the ones that only ever appear as light text, so they
 * only appear on something dark: a heading inside them belongs to the section,
 * not to the site wide heading colour. A heading that carries its own colour is
 * left alone, and on a site that never recolours headings this changes nothing,
 * because inheriting is what already happened.
 */
:where(.has-canvas-color, .has-ink-inverse-color, .is-style-section-dark) :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: inherit;
}

/*
 * Buttons keep their own contrast when given a pale background.
 *
 * Button text is white by default, from the button element in theme.json, and
 * that colour stays put when only the background is changed in the editor. Pick
 * a pale background for a button and the label goes white on near white. These
 * are the pale entries in the palette; a button that was given a text colour of
 * its own is left alone.
 */
.wp-element-button.has-canvas-background-color:not(.has-text-color),
.wp-element-button.has-surface-background-color:not(.has-text-color),
.wp-element-button.has-brand-light-background-color:not(.has-text-color),
.wp-element-button.has-brand-alt-background-color:not(.has-text-color),
.wp-element-button.has-ink-inverse-background-color:not(.has-text-color) {
	color: var(--wp--preset--color--ink);
}

/* Keep editorial headings intact at narrow widths. */
:where(.wp-site-blocks, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

/* Directional design primitives
---------------------------------------------------------------------------- */

/*
 * Direction files set these custom properties. Patterns only opt into a role
 * such as card, header frame or hero; they do not need to know whether the
 * active design is square, soft, elevated or nearly flat.
 */
:root {
	--executive-radius-control: var(--wp--custom--design--radius--control, var(--wp--preset--border-radius--md));
	--executive-radius-surface: var(--wp--custom--design--radius--surface, var(--wp--preset--border-radius--lg));
	--executive-radius-media: var(--wp--custom--design--radius--media, var(--wp--preset--border-radius--md));
	--executive-card-background: transparent;
	--executive-card-border: none;
	--executive-card-shadow: none;
	--executive-control-shadow: 0 1px 2px rgb(0 0 0 / 2%), 0 .5px 1px rgb(0 0 0 / 4%);
	--executive-hairline-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--text) 11%, transparent);
	--executive-header-shadow: none;
	--executive-hero-overlay: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--surface-strong) 84%, transparent), color-mix(in srgb, var(--wp--preset--color--surface-strong) 18%, transparent));
	--executive-motion-scale: 1;
	--executive-motion-lenis-duration: var(--wp--custom--design--motion--lenis-duration, 1.05);
	
}
:is(.wp-block-group, .wp-block-cover).is-style-section-dark,
:is(.wp-block-group, .wp-block-cover).is-style-section-light,
:is(.wp-block-group, .wp-block-cover).is-style-section-accent {
	border-radius: var(--executive-radius-surface);
	overflow: clip;
}

/* Semantic contexts are available to new patterns without removing legacy
 * palette slugs used by existing content. */
:is(
	.has-background-background-color,
	.has-surface-background-color,
	.has-surface-alt-background-color
):not(.has-text-color) {
	color: var(--wp--preset--color--text);
}

:is(
	.has-surface-strong-background-color,
	.has-primary-background-color,
	.has-secondary-background-color
):not(.has-text-color) {
	color: var(--wp--preset--color--text-on-strong);
}

:is(.has-surface-strong-background-color, .has-primary-background-color, .has-secondary-background-color) a:not(.wp-element-button):not(.has-text-color) {
	color: var(--wp--preset--color--text-on-strong);
}

.wp-element-button,
.wp-block-button__link {
	border-radius: var(--executive-radius-control);
}

.executive-card,
.is-style-card-surface,
.executive-card-grid > .wp-block-group,
.executive-card-grid > .wp-block-column > .wp-block-group,
.executive-card-grid > .wp-block-cover {
	border-radius: var(--executive-radius-surface);
	box-shadow: var(--executive-card-shadow);
}

.executive-card :is(img, .wp-block-cover),
.is-style-card-surface :is(img, .wp-block-cover),
.executive-card-grid :is(img, .wp-block-cover) {
	border-radius: var(--executive-radius-media);
}

.executive-card-grid > .wp-block-cover {
	box-shadow: var(--executive-card-shadow);
}



/*
 * Align the content rows of paired image cards without stretching their panels.
 * The reserved rows keep labels, titles, copy, lists and actions level across
 * the pair, while the card still ends directly after its content.
 */
@media (min-width: 782px) {
	.wp-block-columns.executive-reveal-children > .wp-block-column:has(> .wp-block-image + .wp-block-group.has-canvas-background-color) {
		background-color: var(--wp--preset--color--canvas);
		border: 1px solid var(--wp--preset--color--border);
		overflow: clip;
	}

	.wp-block-columns.executive-reveal-children > .wp-block-column:has(> .wp-block-image + .wp-block-group.has-canvas-background-color) > .wp-block-image {
		margin: 0;
	}

	.wp-block-columns.executive-reveal-children > .wp-block-column:has(> .wp-block-image + .wp-block-group.has-canvas-background-color) > .wp-block-group.has-canvas-background-color {
		display: grid;
		grid-template-rows: auto minmax(7.5rem, auto) minmax(4.8em, auto) auto minmax(7.5em, auto) auto;
		align-content: start;
	}

	.wp-block-columns.executive-reveal-children > .wp-block-column:has(> .wp-block-image + .wp-block-group.has-canvas-background-color) > .wp-block-group.has-canvas-background-color > .wp-block-heading {
		min-block-size: 3lh;
	}
}

.executive-header-frame {
	border-radius: var(--executive-radius-control) !important;
	box-shadow: var(--executive-header-shadow) !important;
}

.executive-hero :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
	border-radius: var(--executive-radius-media);
}

/* Query and Post Template column counts are owned by Gutenberg. */


@media (prefers-reduced-motion: no-preference) {
	.wp-element-button,
	.wp-block-button__link,
	.executive-lift-hover,
	.executive-zoom-media :is(img, .wp-block-cover__image-background) {
	transition-duration: calc(.35s * var(--executive-motion-scale));
	}
}

/* Geometric Technical system extensions
---------------------------------------------------------------------------- */
:root {
	--executive-gt-wide: var(--wp--style--global--wide-size, 1260px);
	--executive-gt-content: var(--wp--style--global--content-size, 740px);
	--executive-gt-pad: clamp(1.25rem, 2.6vw, 2.5rem);
	--executive-gt-gap: clamp(1.25rem, 2.8vw, 3rem);
	--executive-gt-gap-small: clamp(.75rem, 1.5vw, 1.25rem);
	--executive-gt-rule: 1px solid var(--wp--preset--color--border);
	--executive-gt-rule-strong: 1px solid var(--wp--preset--color--border-strong);
}

/* The page shell must not become a second content-width container. Patterns
 * own their own full, wide and content alignment. This is shared by frontend
 * and editor because style.css is the editor stylesheet as well. */
:where(.wp-site-blocks, .editor-styles-wrapper) :is(.executive-page-shell, .executive-site-content, .executive-page-root) {
	width: 100%;
	max-width: none;
}

/* Root template flow never supplies spacing between header, page sections and
 * footer. Section rhythm belongs to the blocks themselves, so no white seam is
 * exposed between adjacent full-width surfaces. */
:where(.wp-site-blocks) > :is(.wp-block-template-part, main, .site-content),
:where(.wp-site-blocks) > :is(.wp-block-template-part, main, .site-content) + :is(.wp-block-template-part, main, .site-content),
:where(.executive-page-shell) > .wp-block-post-content,
:where(.executive-page-shell) > .wp-block-post-content > .alignfull,
:where(.executive-page-shell) > .wp-block-post-content > .alignfull + .alignfull,
:where(.wp-block-post-content) > .executive-pattern,
:where(.wp-block-post-content) > .executive-pattern + .executive-pattern,
:where(.editor-styles-wrapper .is-root-container) > .executive-pattern,
:where(.editor-styles-wrapper .is-root-container) > .executive-pattern + .executive-pattern {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern {
	box-sizing: border-box;
	min-width: 0;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern.alignfull {
	width: 100%;
}


:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern :is(.wp-block-group, .wp-block-column, .wp-block-cover, .wp-block-media-text) {
	min-width: 0;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern img {
	display: block;
	max-width: 100%;
}

/* A thin separator is one hairline. The old definition could render as two
 * rules depending on core styles and was the source of many duplicated lines. */
:where(.wp-site-blocks, .editor-styles-wrapper) .wp-block-separator.is-style-separator-thin {
	border: 0 !important;
	border-top: 1px solid currentColor !important;
	height: 0 !important;
	min-height: 0 !important;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .executive-rule-inline {
	inline-size: clamp(2rem, 4vw, 3.75rem);
	opacity: .55;
}



/* Pattern Library index page
---------------------------------------------------------------------------- */
.executive-pattern-library-hero {
	padding: clamp(3rem, 6vw, 5.5rem) var(--wp--preset--spacing--medium);
}

.executive-pattern-library-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
}

.executive-pattern-library-hero__copy {
	max-width: 52rem;
}

.executive-pattern-library-hero__copy > * {
	margin-block-start: 0;
}

.executive-pattern-library-hero__copy > * + * {
	margin-block-start: clamp(.75rem, 1.5vw, 1.25rem);
}

.executive-pattern-library-hero__stats {
	gap: .6rem 1.25rem;
	margin-top: clamp(1rem, 2vw, 1.5rem);
}

.executive-pattern-library-hero__stats p {
	margin: 0;
}

.executive-pattern-library-index {
	padding: clamp(3.5rem, 6vw, 6rem) var(--wp--preset--spacing--medium);
}

.executive-pattern-library-index__grid {
	gap: clamp(1rem, 1.8vw, 1.5rem);
	align-items: stretch;
}

.executive-pattern-library-card {
	display: flex !important;
	flex-direction: column;
	height: 100%;
	min-height: clamp(17rem, 21vw, 20rem);
	gap: 0 !important;
	padding: clamp(1.25rem, 2vw, 1.75rem) !important;
}

.executive-pattern-library-card__head {
	gap: .5rem 1rem;
	margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}

.executive-pattern-library-card__head p,
.executive-pattern-library-card__count,
.executive-pattern-library-card__index {
	margin: 0;
}

.executive-pattern-library-card > .wp-block-heading {
	margin: 0;
	font-size: clamp(1.25rem, 1.6vw, 1.6rem) !important;
	line-height: 1.08;
}

.executive-pattern-library-card__description {
	margin: clamp(.85rem, 1.4vw, 1.15rem) 0 0;
	font-size: clamp(.9rem, .95vw, 1rem) !important;
	line-height: 1.55;
	max-width: 30ch;
}

.executive-pattern-library-card__actions {
	margin-top: auto;
	padding-top: clamp(1.25rem, 2vw, 1.75rem);
}

.executive-pattern-library-card__actions .wp-block-button__link {
	padding: .72rem 1rem;
	font-size: .9rem;
	line-height: 1.1;
}

@media (max-width: 781px) {
	.executive-pattern-library-hero {
		padding-block: clamp(2.5rem, 10vw, 4rem);
	}

	.executive-pattern-library-hero__inner {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.executive-pattern-library-index {
		padding-block: clamp(2.75rem, 10vw, 4rem);
	}

	.executive-pattern-library-card {
		min-height: 0;
	}
}

/* Pattern library
---------------------------------------------------------------------------- */
.executive-pattern-showcase-hero {
	padding: clamp(2rem, 5vw, 5rem) var(--wp--preset--spacing--medium);
}

.executive-pattern-showcase-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--executive-gt-gap);
	align-items: end;
}

.executive-pattern-showcase {
	padding: 0 var(--wp--preset--spacing--medium) clamp(4rem, 8vw, 8rem);
}

.executive-pattern-showcase__item {
	padding-block: clamp(2rem, 5vw, 5rem);
	border-bottom: var(--executive-gt-rule);
}

.executive-pattern-showcase__meta {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	gap: 1rem 2rem;
}

.executive-pattern-showcase__title-row {
	gap: 1rem;
}

.executive-pattern-showcase__number {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
}

.executive-pattern-showcase__slug {
	margin: 0;
}

.executive-pattern-showcase__viewport {
	width: 100%;
	max-width: min(100%, 1500px);
	margin-inline: auto;
}

/* Gutenberg owns editable grid and column geometry.
 * Theme CSS supplies only visual behavior that is independent of the chosen
 * column count. This prevents flow-layout margins from offsetting card 2, 3,
 * or any later card when a Group is used as a Grid in the editor. */
:where(.wp-site-blocks,.editor-styles-wrapper) .executive-pattern :where(.is-layout-grid,.wp-block-columns) > * {
	min-width: 0;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

:where(.wp-site-blocks,.editor-styles-wrapper) .executive-equal-grid > * {
	height: 100%;
	align-self: stretch;
}

/* Authority credentials */
.executive-authority__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, .55fr);
	gap: var(--executive-gt-gap);
	align-items: end;
}

.executive-authority__grid {
	align-items: stretch;
	background: transparent;
	border: 0;
}

.executive-authority__card {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	height: 100%;
	min-height: 100%;
	padding: var(--executive-gt-pad);
	background: var(--wp--preset--color--surface);
	border: var(--executive-gt-rule);
}

.executive-authority__card--featured {
	background: var(--wp--preset--color--surface-strong);
	color: var(--wp--preset--color--text-on-strong);
}

/* Banners */
.executive-campaign-banner__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--executive-gt-gap);
	align-items: center;
	padding: var(--executive-gt-pad);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}

.executive-campaign-banner__copy {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.executive-campaign-banner__label {
	margin: 0;
	padding: .65rem .9rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

.executive-marquee {
	overflow: hidden;
	width: 100%;
}

.executive-marquee__track {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	width: max-content;
	white-space: nowrap;
	animation: executive-gt-marquee 28s linear infinite;
}

.executive-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	white-space: nowrap;
}

.executive-marquee__dot {
	font-size: .65em;
	line-height: 1;
}

@keyframes executive-gt-marquee {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.executive-marquee__track { animation: none; }
}

/* Final CTA */
.executive-final-cta__columns {
	align-items: center;
}

.executive-final-cta__headline,
.executive-final-cta__action {
	min-width: 0;
}

.executive-final-cta__headline-inner {
	max-width: 42rem;
}

.executive-final-cta__headline h2 {
	max-width: 11ch;
	font-size: clamp(3.35rem, 5.5vw, 5.8rem);
	line-height: .96;
	letter-spacing: -.05em;
}

.executive-final-cta__lead {
	max-width: 32rem;
	margin-top: .5rem;
}

.executive-final-cta__action-panel {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary-contrast) 22%, transparent);
}

.executive-final-cta__action-panel h3 {
	max-width: 13ch;
}

.executive-final-cta__buttons {
	gap: .75rem;
	margin-top: .25rem;
}

.executive-final-cta__buttons .wp-block-button,
.executive-final-cta__buttons .wp-block-button__link {
	max-width: 100%;
}

/* Lead magnet */
.executive-lead-magnet__card {
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--canvas);
}

.executive-lead-magnet__media,
.executive-lead-magnet__content {
	min-width: 0;
	display: flex;
}

.executive-lead-magnet__media > *,
.executive-lead-magnet__content > * {
	width: 100%;
}

.executive-lead-magnet__cover {
	min-height: clamp(24rem, 38vw, 34rem);
}

.executive-lead-magnet__content > .wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Specialist patterns */
.executive-condition__hero,
.executive-treatment-detail__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
	gap: var(--executive-gt-gap);
	align-items: stretch;
}

.executive-condition__notice,
.executive-treatment-detail__cta {
	padding: var(--executive-gt-pad);
}

.executive-condition__steps,
.executive-program-phases,
.executive-training__grid {
	align-items: stretch;
	margin-top: var(--executive-gt-gap);
}

.executive-condition__step,
.executive-program-phase,
.executive-training__card {
	padding: var(--executive-gt-pad);
	display: flex;
	flex-direction: column;
	gap: .85rem;
	border: var(--executive-gt-rule);
	height: 100%;
}

.executive-program-detail__intro,
.executive-training__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, .65fr);
	gap: var(--executive-gt-gap);
	align-items: end;
}

.executive-training__trial {
	margin-top: var(--executive-gt-gap);
	padding-top: var(--executive-gt-pad);
	border-top: var(--executive-gt-rule);
}

.executive-safety-information__intro {
	margin-inline: 0 auto !important;
	text-align: left;
}

.executive-pattern--safety-information .wp-block-columns > .wp-block-column {
	padding: var(--executive-gt-pad);
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.executive-specialist-card {
	align-items: stretch;
	border: var(--executive-gt-rule);
	overflow: clip;
}

.executive-specialist-card__media {
	position: relative;
	min-height: 100%;
}

.executive-specialist-card__media .wp-block-image,
.executive-specialist-card__media .wp-block-image img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.executive-pattern--treatment-card .executive-specialist-card__media .wp-block-image,
.executive-pattern--accommodation-card .executive-specialist-card__media .wp-block-image {
	height: 100%;
	min-height: clamp(26rem, 36vw, 34rem);
}

.executive-pattern--treatment-card .executive-specialist-card__media img,
.executive-pattern--accommodation-card .executive-specialist-card__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	max-height: none;
}

.executive-specialist-card__badge {
	position: absolute;
	inset: 1rem auto auto 1rem;
	padding: .55rem .75rem;
	margin: 0;
}

.executive-specialist-card__content {
	padding: var(--executive-gt-pad);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.executive-specialist-card.wp-block-columns {
	gap: 0;
}

.executive-specialist-card > .wp-block-column {
	margin-top: 0;
}


.executive-specialist-card__amenities .wp-block-list {
	margin-block-start: .25rem;
}

.executive-specialist-card__footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

@media (max-width: 781px) {
	.executive-specialist-card {
		gap: 0;
	}

	.executive-specialist-card__media .wp-block-image,
	.executive-pattern--treatment-card .executive-specialist-card__media .wp-block-image,
	.executive-pattern--accommodation-card .executive-specialist-card__media .wp-block-image {
		height: auto;
		min-height: 0;
	}

	.executive-pattern--treatment-card .executive-specialist-card__media img,
	.executive-pattern--accommodation-card .executive-specialist-card__media img {
		height: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}

	.executive-specialist-card__content {
		padding: clamp(1.25rem, 5vw, 2rem);
	}

}


.executive-specialist-card__facts {
	align-items: stretch;
	padding-top: 1rem;
	border-top: var(--executive-gt-rule);
}

.executive-specialist-fact {
	min-width: 0;
}

.executive-treatment-detail__facts {
	align-items: stretch;
	margin-top: var(--executive-gt-gap);
}

.executive-treatment-detail__fact,
.executive-treatment-detail__panel {
	padding: var(--executive-gt-pad);
	border: var(--executive-gt-rule);
	height: 100%;
}

.executive-condition__notice,
.executive-treatment-detail__cta {
	min-height: 100%;
}

.executive-treatment-detail__guidance {
	align-items: stretch;
	margin-top: var(--executive-gt-gap);
}

/* Culture and people */
.executive-culture__header,
.executive-team-intro__header,
.executive-team-directory__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, .55fr);
	gap: var(--executive-gt-gap);
	align-items: end;
}

.executive-culture-grid,
.executive-team-intro__grid,
.executive-team-directory__grid {
	align-items: stretch;
}

.executive-culture-card,
.executive-team-intro__card,
.executive-team-directory__card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	border: var(--executive-gt-rule);
	background: var(--wp--preset--color--surface);
	overflow: clip;
}

.executive-culture-card,
.executive-team-directory__card-copy,
.executive-team-intro__caption {
	padding: var(--executive-gt-pad);
}

.executive-team-intro__card .wp-block-image,
.executive-team-directory__card .wp-block-image,
.executive-pattern--team-members .wp-block-image {
	margin: 0;
}

.executive-team-intro__card img,
.executive-team-directory__card img,
.executive-pattern--team-members .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}


.executive-pattern--team-members .executive-card-grid {
	align-items: stretch;
}

.executive-pattern--team-members .executive-card-grid > * {
	height: 100%;
}

/* Job openings use quiet rows, not coloured 1px gap scaffolding. */
.executive-pattern--job-openings .executive-reveal {
	border-top: var(--executive-gt-rule);
}

.executive-pattern--job-openings .executive-reveal > .wp-block-group {
	border-bottom: var(--executive-gt-rule);
}

.executive-pattern--job-openings .executive-rule-inline {
	display: none;
}

/* Facts and systems */
.executive-system-facts__header,
.executive-proof-wall__heading,
.executive-system-facts__cards,
.executive-proof-grid {
	width: 100%;
}

.executive-equal-columns {
	align-items: stretch;
}

.executive-equal-columns > .wp-block-column {
	display: flex;
	min-width: 0;
}

.executive-equal-columns > .wp-block-column > .wp-block-group {
	width: 100%;
	height: 100%;
}

.executive-proof-item {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	border: var(--executive-gt-rule);
}

.executive-system-facts__card {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.executive-system-flow__intro {
	margin-inline: 0 auto !important;
}

.executive-system-flow__sequence {
	align-items: stretch;
	margin-top: var(--executive-gt-gap);
}

.executive-system-flow__node {
	padding: var(--executive-gt-pad);
	min-height: 11rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	border: var(--executive-gt-rule);
}

/* Services */
.executive-related-services__intro,
.executive-service-options__intro,
.executive-service-intro__copy {
	max-width: 52rem;
	margin-inline: 0 auto !important;
}

.executive-related-services__columns,
.executive-service-modules__cards,
.executive-service-intro__columns,
.executive-service-options__columns {
	align-items: stretch;
}

.executive-related-services__columns > .wp-block-column,
.executive-service-modules__cards > .wp-block-column,
.executive-service-intro__columns > .wp-block-column,
.executive-service-options__columns > .wp-block-column {
	display: flex;
	min-width: 0;
}

.executive-related-service-card,
.executive-service-usecase,
.executive-service-intro-card,
.executive-service-option-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	border: var(--executive-gt-rule);
}

.executive-related-service-card__link,
.executive-service-option-card__link {
	margin-top: auto !important;
}

.executive-service-modules__top-columns {
	align-items: stretch;
}

.executive-service-modules__top-columns > .wp-block-column {
	min-width: 0;
}

.executive-service-modules__copy {
	max-width: 48rem;
}

.executive-service-modules__signal {
	height: 100%;
	border: var(--executive-gt-rule-strong);
}

.executive-service-modules__signal-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .85rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.executive-service-modules__signal-row > * {
	margin: 0;
}

.executive-service-overview__columns {
	align-items: stretch;
}

.executive-service-overview__columns > .wp-block-column {
	min-width: 0;
}

.executive-service-overview__media-stack figure,
.executive-service-overview__media-stack img {
	width: 100%;
}

.executive-service-overview__media-stack figure {
	margin: 0;
}

.executive-service-overview__note {
	width: 100%;
	margin: var(--wp--preset--spacing--small) 0 0 !important;
	position: static;
	border: var(--executive-gt-rule-strong);
}

.executive-service-overview__content {
	height: 100%;
	border: var(--executive-gt-rule);
}

.executive-service-overview__timeline {
	margin-top: var(--wp--preset--spacing--medium);
	border-top: var(--executive-gt-rule);
}

.executive-service-overview__step {
	display: grid !important;
	grid-template-columns: 3rem minmax(0, 1fr);
	align-items: start;
	gap: 1rem;
	padding-block: 1rem;
	border-bottom: var(--executive-gt-rule);
}

.executive-service-overview__step > * {
	margin: 0;
	min-width: 0;
}

.executive-service-overview__step > .wp-block-group > :first-child {
	margin-top: 0;
}

.executive-service-overview__step > .wp-block-group > :last-child {
	margin-bottom: 0;
}

.executive-service-scale__columns,
.executive-service-scale__media-columns {
	align-items: stretch;
}

.executive-service-scale__columns > .wp-block-column,
.executive-service-scale__media-columns > .wp-block-column {
	min-width: 0;
}

.executive-service-scale__intro {
	max-width: 34rem;
}

.executive-service-scale__media-columns figure {
	margin: 0;
	width: 100%;
}

.executive-service-scale__media-columns img {
	width: 100%;
}

.executive-service-scale__side {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--small);
}

.executive-service-scale__priority {
	flex: 1 1 auto;
	border: var(--executive-gt-rule-strong);
}

.executive-service-scale__priority .is-style-eyebrow-inverse {
	color: var(--wp--preset--color--secondary-contrast);
}

.executive-service-intro__columns,
.executive-service-options__columns {
	width: 100%;
}

.executive-service-option-card {
	min-height: 24rem;
}

.executive-problem-intro__lead {
	margin-inline: 0 auto !important;
}

.executive-problem-intro__decisions {
	align-items: stretch;
}

.executive-problem-intro__card {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	min-height: 100%;
}

/* Services tabs */
.executive-tabs {
	width: 100%;
}

.executive-tabs__mobile {
	display: contents;
}

.executive-tabs__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;
	border: var(--executive-gt-rule);
	border-radius: 0;
	background: var(--wp--preset--color--surface);
	overflow: visible;
}

.executive-tabs__list > * {
	min-width: 0;
	margin: 0 !important;
}

.executive-tabs__list :is(a, button) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.75rem;
	padding: .9rem 1rem;
	border: 0;
	border-inline-end: var(--executive-gt-rule);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	text-align: center;
	white-space: normal;
}

.executive-tabs__list > :last-child :is(a, button),
.executive-tabs__list > :last-child:is(a, button) {
	border-inline-end: 0;
}

.executive-tabs__list :is(a, button).is-active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	box-shadow: none;
}

.executive-tabs__toggle {
	display: none;
	width: 100%;
	padding: 1rem 1.25rem;
	border: var(--executive-gt-rule);
	border-radius: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
	text-align: left;
}

.executive-tabs__panels {
	width: 100%;
}

.executive-tabs__panel {
	width: 100%;
	border: var(--executive-gt-rule);
}

@media (max-width: 781px) {
	.executive-service-option-card {
		min-height: 0;
	}

	.executive-service-scale__intro {
		max-width: none;
	}

	.executive-service-overview__step {
		grid-template-columns: 2.5rem minmax(0, 1fr);
	}

	.executive-tabs__mobile {
		display: block;
		position: relative;
		z-index: 5;
		width: 100%;
	}

	.executive-tabs.is-enhanced .executive-tabs__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.executive-tabs.is-enhanced .executive-tabs__list {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: calc(100% + 4px);
		grid-template-columns: 1fr;
		z-index: 10;
		box-shadow: var(--wp--preset--shadow--large-light);
	}

	.executive-tabs.is-enhanced.is-open .executive-tabs__list {
		display: grid;
	}

	.executive-tabs__list :is(a, button) {
		justify-content: flex-start;
		border-inline-end: 0;
		border-bottom: var(--executive-gt-rule);
		text-align: left;
	}

	.executive-tabs__list > :last-child :is(a, button),
	.executive-tabs__list > :last-child:is(a, button) {
		border-bottom: 0;
	}
}

/* Pricing */
.executive-pattern--pricing-table .executive-card-grid,
.executive-pattern--pricing-table-3-column .executive-card-grid,
.executive-pattern--pricing-table-with-testimonials .executive-card-grid {
	align-items: stretch;
}

.executive-pattern--pricing-table .executive-card-grid > *,
.executive-pattern--pricing-table-3-column .executive-card-grid > *,
.executive-pattern--pricing-table-with-testimonials .executive-card-grid > * {
	height: 100%;
}

.executive-pattern--pricing-table-with-testimonials {
	background: transparent;
}

.executive-pattern--pricing-table-3-column .has-surface-background-color,
.executive-pattern--pricing-table-with-testimonials .has-surface-background-color {
	color: var(--wp--preset--color--text);
}

/* Booking */
.executive-booking-details__header,
.executive-booking-details__cards {
	width: 100%;
}

.executive-booking-details__card {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	border: var(--executive-gt-rule);
	overflow-wrap: anywhere;
}

/* Hero and page headers */
.executive-pattern--hero-call-to-action-buttons > .wp-block-columns {
	align-items: stretch;
}

.executive-pattern--hero-call-to-action-buttons > .wp-block-columns > .wp-block-column {
	min-height: clamp(32rem, 64vh, 48rem);
}

.executive-pattern--hero-call-to-action-buttons .wp-block-cover {
	height: 100%;
}

.executive-page-header__breadcrumbs {
	width: 100%;
	max-width: none;
	margin-inline: 0 !important;
}

.executive-breadcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.executive-breadcrumbs__item,
.executive-breadcrumbs__separator {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Projects and case studies */

/* Hero, projects and case studies: native Gutenberg layout contract */
.executive-pattern--hero-home .wp-block-column,
.executive-pattern--hero-statement .wp-block-column,
.executive-pattern--case-study-body .wp-block-column,
.executive-pattern--case-study-narrative .wp-block-column,
.executive-pattern--case-study-results .wp-block-column,
.executive-pattern--development-overview .wp-block-column,
.executive-pattern--location-context .wp-block-column,
.executive-pattern--project-brief .wp-block-column,
.executive-pattern--project-showcase .wp-block-column {
	min-width: 0;
}

.executive-pattern--hero-home .executive-home-hero__image,
.executive-pattern--hero-statement .executive-hero-statement__image,
.executive-pattern--project-showcase .wp-block-image,
.executive-pattern--project-grid .wp-block-image,
.executive-pattern--gallery-materials .wp-block-image {
	margin-block-start: 0;
}

.executive-pattern--hero-home .executive-home-hero__image img,
.executive-pattern--hero-statement .executive-hero-statement__image img,
.executive-pattern--project-showcase .wp-block-image img,
.executive-pattern--project-grid .wp-block-image img,
.executive-pattern--gallery-materials .wp-block-image img {
	display: block;
	width: 100%;
}

.executive-pattern--hero-home .executive-home-hero__facts,
.executive-pattern--case-study-body .executive-case-study__facts,
.executive-pattern--case-study-body .executive-case-study__body,
.executive-pattern--case-study-narrative .executive-case-narrative__cards,
.executive-pattern--case-study-results .executive-case-results__metrics,
.executive-pattern--development-overview .executive-development__facts,
.executive-pattern--development-overview .executive-development__plans,
.executive-pattern--location-context .executive-location__map-row,
.executive-pattern--project-brief .executive-project-brief__columns,
.executive-pattern--project-showcase .executive-project-showcase__cards {
	align-items: stretch;
}

.executive-pattern--hero-home .executive-home-hero__facts > .wp-block-column,
.executive-pattern--case-study-body .executive-case-study__facts > .wp-block-column,
.executive-pattern--case-study-body .executive-case-study__body > .wp-block-column,
.executive-pattern--case-study-narrative .executive-case-narrative__cards > .wp-block-column,
.executive-pattern--case-study-results .executive-case-results__metrics > .wp-block-column,
.executive-pattern--development-overview .executive-development__facts > .wp-block-column,
.executive-pattern--development-overview .executive-development__plans > .wp-block-column,
.executive-pattern--location-context .executive-location__map-row > .wp-block-column,
.executive-pattern--project-brief .executive-project-brief__columns > .wp-block-column,
.executive-pattern--project-showcase .executive-project-showcase__cards > .wp-block-column {
	display: flex;
}

.executive-pattern--hero-home .executive-home-hero__fact,
.executive-pattern--case-study-body .executive-case-study__fact-card,
.executive-pattern--case-study-body .executive-case-study__decisions,
.executive-pattern--case-study-body .executive-case-study__evidence,
.executive-pattern--case-study-narrative .executive-case-narrative__card,
.executive-pattern--case-study-results .executive-case-results__metric-card,
.executive-pattern--development-overview .executive-development__fact,
.executive-pattern--development-overview .executive-development__plans,
.executive-pattern--location-context .executive-location__map,
.executive-pattern--location-context .executive-location__summary,
.executive-pattern--project-brief .executive-project-brief__brief,
.executive-pattern--project-brief .executive-project-brief__form-panel,
.executive-pattern--project-showcase .executive-project-showcase__card {
	width: 100%;
	height: 100%;
}

.executive-pattern--hero-home .executive-home-hero__title,
.executive-pattern--hero-statement .executive-hero-statement__title,
.executive-pattern--case-study-body h2,
.executive-pattern--project-showcase h2 {
	max-width: 13ch;
}

.executive-pattern--hero-home .executive-home-hero__lede,
.executive-pattern--hero-statement .executive-hero-statement__copy > p,
.executive-pattern--case-study-body .executive-case-study__intro p,
.executive-pattern--project-showcase .executive-project-showcase__intro p {
	max-width: 42rem;
}

.executive-pattern--hero-statement .executive-hero-statement__badge {
	width: min(100%, 22rem);
}

.executive-pattern--project-grid .executive-project-grid__cards > *,
.executive-pattern--project-showcase .executive-project-showcase__featured,
.executive-pattern--project-showcase .executive-project-showcase__card,
.executive-pattern--case-study-narrative .executive-case-narrative__card,
.executive-pattern--case-study-results .executive-case-results__metric-card,
.executive-pattern--development-overview .executive-development__fact {
	border: var(--executive-gt-rule);
}

.executive-pattern--project-grid .executive-project-grid__card {
	height: 100%;
	min-width: 0;
	overflow: hidden;
}

.executive-pattern--project-showcase .executive-project-showcase__featured,
.executive-pattern--project-showcase .executive-project-showcase__card {
	overflow: hidden;
}

.executive-pattern--gallery-materials .executive-gallery-materials__gallery img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.executive-pattern--gallery-materials .executive-gallery-materials__notes > .wp-block-column {
	display: flex;
}

.executive-pattern--gallery-materials .executive-gallery-materials__note {
	width: 100%;
	height: 100%;
}

.executive-pattern--project-brief .executive-project-brief__form-wrap,
.executive-pattern--project-brief .executive-project-brief__form-wrap form,
.executive-pattern--project-brief .executive-project-brief__form-wrap :is(input, select, textarea) {
	max-width: 100%;
	box-sizing: border-box;
}

.executive-pattern--project-brief .executive-project-brief__form-wrap :is(input, select, textarea) {
	width: 100%;
}

@media (max-width: 781px) {
	.executive-pattern--hero-home,
	.executive-pattern--hero-statement,
	.executive-pattern--case-study-body,
	.executive-pattern--case-study-narrative,
	.executive-pattern--case-study-results,
	.executive-pattern--development-overview,
	.executive-pattern--gallery-materials,
	.executive-pattern--location-context,
	.executive-pattern--project-brief,
	.executive-pattern--project-grid,
	.executive-pattern--project-showcase {
		padding-top: var(--wp--preset--spacing--x-large) !important;
		padding-bottom: var(--wp--preset--spacing--x-large) !important;
	}

	.executive-pattern--hero-home .wp-block-columns,
	.executive-pattern--hero-statement .wp-block-columns,
	.executive-pattern--case-study-body .wp-block-columns,
	.executive-pattern--case-study-narrative .wp-block-columns,
	.executive-pattern--case-study-results .wp-block-columns,
	.executive-pattern--development-overview .wp-block-columns,
	.executive-pattern--gallery-materials .wp-block-columns,
	.executive-pattern--location-context .wp-block-columns,
	.executive-pattern--project-brief .wp-block-columns,
	.executive-pattern--project-showcase .wp-block-columns {
		gap: var(--wp--preset--spacing--medium);
	}

	.executive-pattern--hero-home .executive-home-hero__image img,
	.executive-pattern--hero-statement .executive-hero-statement__image img,
	.executive-pattern--project-showcase .executive-project-showcase__featured-image img {
		max-height: 28rem;
		object-fit: cover;
	}

	.executive-pattern--gallery-materials .wp-block-gallery {
		--wp--style--unstable-gallery-gap: .75rem;
	}
}

@media (max-width: 520px) {
	.executive-pattern--hero-home .wp-block-buttons,
	.executive-pattern--hero-statement .wp-block-buttons {
		align-items: stretch;
	}

	.executive-pattern--hero-home .wp-block-button,
	.executive-pattern--hero-home .wp-block-button__link,
	.executive-pattern--project-brief .wp-block-button,
	.executive-pattern--project-brief .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* Footer and headers */
.executive-pattern--footer .wp-block-columns.alignwide {
	align-items: flex-start;
}

.executive-pattern--footer .wp-block-column,
.executive-pattern--footer .wp-block-navigation {
	min-width: 0;
}

.executive-pattern--footer .wp-block-navigation__container {
	gap: .6rem;
}

.executive-pattern--header .wp-block-navigation__container,
.executive-pattern--header-standard .wp-block-navigation__container,
.executive-pattern--header-overlay .wp-block-navigation__container,
.executive-pattern--header-pill .wp-block-navigation__container,
.executive-pattern--header-rail .wp-block-navigation__container,
.executive-pattern--header-banner .wp-block-navigation__container,
.executive-pattern--header-blur .wp-block-navigation__container,
.executive-pattern--header-floating .wp-block-navigation__container {
	gap: .75rem 1.25rem;
	flex-wrap: wrap;
}


/* Responsive refinements for Text, Events and Facts patterns. */
@media (max-width: 781px) {
	.executive-pattern--problem-introduction .executive-problem-intro__lead,
	.executive-pattern--booking-details .executive-booking-details__header,
	.executive-pattern--proof-stats .executive-proof-wall__heading,
	.executive-pattern--system-facts .executive-system-facts__header,
	.executive-pattern--event-listing .executive-event-listing__intro {
		margin-bottom: var(--wp--preset--spacing--medium) !important;
	}

	.executive-pattern--event-card .executive-event-card__content {
		padding: var(--wp--preset--spacing--medium) !important;
	}

	.executive-pattern--event-card .executive-event-card__media img {
		max-height: 18rem;
		object-fit: cover;
	}
}

/* Responsive */
/* Editable Grid blocks use their own responsive layout support. */

@media (max-width: 781px) {
	.executive-authority__card + .executive-authority__card {
		border-inline-start: 0;
		border-top: var(--executive-gt-rule);
	}
	.executive-pattern-showcase-hero__inner,
	.executive-authority__header,
	.executive-condition__hero,
	.executive-treatment-detail__hero,
	.executive-program-detail__intro,
	.executive-training__header,
	.executive-culture__header,
	.executive-team-intro__header,
	.executive-team-directory__header {
		grid-template-columns: 1fr;
	}

	.executive-specialist-card__media,
	.executive-pattern--treatment-card .executive-specialist-card__media img,
	.executive-pattern--accommodation-card .executive-specialist-card__media img {
		max-height: 24rem;
	}

	.executive-menu__item-head {
		flex-wrap: wrap;
	}

	.executive-specialist-card__footer .wp-block-buttons,
	.executive-specialist-card__footer .wp-block-button,
	.executive-specialist-card__footer .wp-block-button__link {
		width: 100%;
	}

	.executive-system-flow__node {
		min-height: auto;
	}





	.executive-pattern--hero-call-to-action-buttons > .wp-block-columns > .wp-block-column {
		min-height: auto;
	}

	.executive-pattern--hero-call-to-action-buttons .wp-block-cover {
		min-height: 24rem;
	}

	.executive-pattern--footer .wp-block-columns,
	.executive-pattern--footer .wp-block-columns .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.executive-pattern--footer .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 560px) {
	.executive-pattern-showcase,
	.executive-pattern-showcase-hero {
		padding-inline: var(--wp--preset--spacing--small);
	}

	.executive-campaign-banner__inner {
		grid-template-columns: 1fr;
	}

	.executive-campaign-banner__inner .wp-block-buttons,
	.executive-campaign-banner__inner .wp-block-button,
	.executive-campaign-banner__inner .wp-block-button__link {
		width: 100%;
	}

}

/* Semantic palette aliases used by the generic Geometric Technical patterns.
 * These mirror the legacy canvas/brand context system so every style variation
 * keeps readable text, links, labels and default buttons. */
:where(.has-background-background-color, .has-surface-background-color, .has-surface-alt-background-color) {
	--executive-text: var(--wp--preset--color--text);
	--executive-text-muted: var(--wp--preset--color--text-muted);
	--executive-link: var(--wp--preset--color--text);
	--executive-button-background: var(--wp--preset--color--surface-strong);
	--executive-button-text: var(--wp--preset--color--text-on-strong);
	--executive-accent: var(--wp--preset--color--primary);
}

.has-surface-strong-background-color {
	--executive-text: var(--wp--preset--color--text-on-strong);
	--executive-text-muted: var(--wp--preset--color--text-muted-on-strong);
	--executive-link: var(--wp--preset--color--text-on-strong);
	--executive-button-background: var(--wp--preset--color--primary);
	--executive-button-text: var(--wp--preset--color--primary-contrast);
	--executive-accent: var(--wp--preset--color--accent);
}

.has-primary-background-color {
	--executive-text: var(--wp--preset--color--primary-contrast);
	--executive-text-muted: var(--wp--preset--color--primary-contrast);
	--executive-link: var(--wp--preset--color--primary-contrast);
	--executive-button-background: var(--wp--preset--color--accent);
	--executive-button-text: var(--wp--preset--color--accent-contrast);
	--executive-accent: var(--wp--preset--color--primary-contrast);
}

.has-secondary-background-color {
	--executive-text: var(--wp--preset--color--secondary-contrast);
	--executive-text-muted: var(--wp--preset--color--secondary-contrast);
	--executive-link: var(--wp--preset--color--secondary-contrast);
	--executive-button-background: var(--wp--preset--color--accent);
	--executive-button-text: var(--wp--preset--color--accent-contrast);
	--executive-accent: var(--wp--preset--color--secondary-contrast);
}

.has-accent-background-color {
	--executive-text: var(--wp--preset--color--accent-contrast);
	--executive-text-muted: var(--wp--preset--color--accent-contrast);
	--executive-link: var(--wp--preset--color--accent-contrast);
	--executive-button-background: var(--wp--preset--color--surface-strong);
	--executive-button-text: var(--wp--preset--color--text-on-strong);
	--executive-accent: var(--wp--preset--color--accent-contrast);
}

:where(
	.has-surface-strong-background-color,
	.has-primary-background-color,
	.has-secondary-background-color,
	.has-accent-background-color
) :is(.is-style-eyebrow, .is-style-eyebrow-inverse):not(.has-text-color) {
	color: var(--executive-accent);
}

:where(
	.has-surface-strong-background-color,
	.has-primary-background-color,
	.has-secondary-background-color
) :is(h1,h2,h3,h4,h5,h6,.wp-block-heading):not(.has-text-color) {
	color: var(--executive-text);
}

/* Geometric controls are square unless the block itself is semantically round,
 * such as an avatar image. */
.executive-pattern :is(.wp-element-button, .wp-block-button__link, .executive-tabs__list, .executive-tabs__list a, .executive-tabs__list button, .executive-tabs__toggle) {
	border-radius: 0;
}

/* Geometric Technical coverage for extended pattern families
---------------------------------------------------------------------------- */
.executive-pattern--about-story > .alignwide {
	display: grid;
	grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.1fr);
	gap: var(--executive-gt-gap);
	align-items: center;
}

.executive-pattern--about-story > .alignwide > .wp-block-group:first-child {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto auto;
	gap: 1rem;
	align-items: end;
}

.executive-pattern--about-story > .alignwide > .wp-block-group:first-child > .wp-block-image:first-child {
	grid-column: 1 / span 5;
	grid-row: 1;
	margin: 0;
}

.executive-pattern--about-story > .alignwide > .wp-block-group:first-child > .wp-block-image:nth-child(2) {
	grid-column: 4 / -1;
	grid-row: 1 / span 2;
	margin: clamp(3rem, 8vw, 7rem) 0 0;
}

.executive-pattern--about-story > .alignwide > .wp-block-group:first-child > .wp-block-image:nth-child(2) img {
	aspect-ratio: 4 / 3;
	max-height: 32rem;
	object-fit: cover;
}

.executive-pattern--about-story > .alignwide > .wp-block-group:first-child > p {
	grid-column: 1 / span 7;
	grid-row: 2;
	z-index: 2;
	margin: 0;
	padding: .8rem 1rem;
}

.executive-pattern--about-story > .alignwide > .wp-block-group:last-child {
	max-width: 40rem;
}

.executive-pattern--feature-cards-with-images .executive-card-grid {
	align-items: stretch;
}

.executive-pattern--feature-cards-with-images .executive-card-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--executive-gt-rule);
	background: var(--wp--preset--color--surface);
	padding-bottom: var(--executive-gt-pad);
	gap: .75rem;
	overflow: clip;
}

.executive-pattern--feature-cards-with-images .executive-card-grid > .wp-block-column > :not(.wp-block-image) {
	margin-inline: var(--executive-gt-pad);
}

.executive-pattern--feature-cards-with-images .executive-card-grid .wp-block-image {
	margin: 0 0 .5rem;
}

.executive-pattern--feature-cards-with-images .executive-card-grid img {
	width: 100%;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover;
}

.executive-pattern--before-after .wp-block-columns {
	align-items: stretch;
	gap: 1rem;
}

.executive-pattern--before-after .wp-block-column {
	padding: var(--executive-gt-pad);
	border: var(--executive-gt-rule);
	background: var(--wp--preset--color--surface);
}

.executive-pattern--before-after .wp-block-image {
	margin-inline: calc(var(--executive-gt-pad) * -1);
}

.executive-pattern--booking-call-to-action > .alignwide {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
	gap: 1px;
	background: var(--wp--preset--color--border-strong);
}

.executive-pattern--booking-call-to-action > .alignwide > .wp-block-group {
	padding: clamp(1.75rem, 4vw, 3.5rem);
}

.executive-pattern--brand-story .wp-block-columns {
	gap: var(--executive-gt-gap);
}

.executive-pattern--brand-story .executive-brand-story__content {
	padding: var(--executive-gt-pad);
	border-inline-start: var(--executive-gt-rule);
}

.executive-pattern--brand-story .executive-brand-media img {
	max-height: 40rem;
	object-fit: cover;
}

.executive-pattern--class-timetable .wp-block-table {
	border: var(--executive-gt-rule);
	overflow-x: auto;
}

.executive-pattern--class-timetable table {
	min-width: 44rem;
	border-collapse: collapse;
}

.executive-pattern--class-timetable :is(th, td) {
	padding: .9rem 1rem;
	border-bottom: var(--executive-gt-rule);
	text-align: left;
}

.executive-pattern--creative-showreel-section .executive-row-stack {
	align-items: end;
	gap: var(--executive-gt-gap);
}

.executive-pattern--creative-showreel-section :is(.wp-block-video, .wp-block-cover, .wp-block-image) {
	margin: 0;
}

.executive-pattern--route-information > .wp-block-columns.alignwide,
.executive-pattern--professional-profile > .wp-block-columns.alignwide {
	align-items: start;
}

.executive-pattern--route-information > .wp-block-columns.alignwide > .wp-block-column,
.executive-pattern--professional-profile > .wp-block-columns.alignwide > .wp-block-column {
	min-width: 0;
}

.executive-pattern--event-card {
	overflow: clip;
}

.executive-pattern--event-card .executive-event-card__columns {
	align-items: stretch;
	margin: 0;
}

.executive-pattern--event-card .executive-event-card__media {
	display: flex;
	flex-direction: column;
}

.executive-pattern--event-card .executive-event-card__media .wp-block-image {
	margin: 0;
}

.executive-pattern--event-card .executive-event-card__media img {
	display: block;
	width: 100%;
}

.executive-pattern--event-card .executive-event-card__date {
	margin-block-start: 0;
}

.executive-pattern--event-card .executive-event-card__facts > * {
	border-top: var(--executive-gt-rule);
}

.executive-pattern--event-listing .executive-event-listing__grid {
	align-items: stretch;
}

.executive-pattern--event-listing .executive-event-listing__grid > li {
	height: 100%;
}

.executive-pattern--event-listing .executive-event-listing__card {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.executive-pattern--event-listing .executive-event-listing__card > .wp-block-post-featured-image {
	margin: 0;
}

.executive-pattern--event-listing .executive-event-listing__card > .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}

.executive-pattern--event-listing .executive-event-listing__card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.executive-pattern--event-listing .wp-block-read-more {
	margin-top: auto;
}

.executive-pattern--faq-section .executive-faq__layout {
	display: grid;
	grid-template-columns: minmax(18rem, .7fr) minmax(0, 1.3fr);
	gap: var(--executive-gt-gap);
	align-items: start;
}

.executive-pattern--faq-section .executive-faq__items {
	border-top: var(--executive-gt-rule-strong);
}

.executive-pattern--faq-section .executive-faq-item {
	padding-block: 1rem;
	border-bottom: var(--executive-gt-rule);
}

.executive-pattern--form-area .executive-reveal,
.executive-pattern--my-account > .alignwide,
.executive-pattern--product-information > .alignwide,
.executive-pattern--shop-introduction > .alignwide {
	padding: var(--executive-gt-pad);
	border: var(--executive-gt-rule);
}

.executive-pattern--material-palette > .wp-block-columns {
	align-items: stretch;
}

.executive-pattern--gallery-materials > .wp-block-group.alignwide:last-child {
	border: var(--executive-gt-rule);
}

.executive-pattern--gallery .wp-block-gallery {
	gap: 1rem;
}

.executive-pattern--gallery .wp-block-image img {
	width: 100%;
	object-fit: cover;
}

.executive-pattern--gallery-overlap .executive-project-gallery__heading {
	align-items: end;
}

.executive-pattern--gallery-overlap .executive-project-gallery__heading > * {
	min-width: 0;
}

.executive-pattern--gallery-overlap .executive-project-gallery__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .75fr);
	gap: clamp(.9rem, 1.6vw, 1.35rem);
	align-items: stretch;
}

.executive-pattern--gallery-overlap .executive-project-gallery__item,
.executive-pattern--gallery-overlap .executive-project-gallery__side,
.executive-pattern--gallery-overlap .executive-project-gallery__note {
	margin-block: 0 !important;
	min-width: 0;
}

.executive-pattern--gallery-overlap .executive-project-gallery__item--hero {
	grid-column: 1;
	grid-row: 1;
}

.executive-pattern--gallery-overlap .executive-project-gallery__side {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: clamp(.9rem, 1.6vw, 1.35rem);
}

.executive-pattern--gallery-overlap .executive-project-gallery__item--wide {
	grid-column: 1 / -1;
}

.executive-pattern--gallery-overlap .wp-block-image {
	overflow: hidden;
}

.executive-pattern--gallery-overlap .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.executive-pattern--gallery-overlap .executive-project-gallery__item--hero img {
	aspect-ratio: 4 / 3;
	max-height: 34rem;
}

.executive-pattern--gallery-overlap .executive-project-gallery__item--detail img {
	aspect-ratio: 16 / 10;
	max-height: 15.5rem;
}

.executive-pattern--gallery-overlap .executive-project-gallery__item--wide img {
	aspect-ratio: 21 / 7;
	max-height: 17rem;
}

.executive-pattern--gallery-overlap .executive-project-gallery__note {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.4rem, 2.4vw, 2.25rem) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-contrast) 18%, transparent);
}

.executive-pattern--gallery-overlap .executive-project-gallery__note > * {
	margin-block-start: 0;
}

.executive-pattern--gallery-overlap .executive-project-gallery__note h3 {
	max-width: 15ch;
}

.executive-pattern--location-context .wp-block-cover,
.executive-pattern--route-information .wp-block-cover {
	min-height: 26rem;
}

.executive-menu__layout {
	display: grid;
	grid-template-columns: minmax(17rem, .75fr) minmax(0, 1.25fr);
	border: var(--executive-gt-rule);
}

.executive-menu__intro,
.executive-menu__items {
	padding: var(--executive-gt-pad);
}

.executive-menu__items {
	border-inline-start: var(--executive-gt-rule);
}

.executive-menu__item {
	padding-block: 1rem;
	border-bottom: var(--executive-gt-rule);
}

.executive-menu__item:last-child {
	border-bottom: 0;
}

.executive-menu__item--accent {
	padding: var(--executive-gt-pad);
}

.executive-menu__item-head {
	align-items: start;
	gap: 1rem;
}

.executive-pattern--product-category-grid .executive-category-grid {
	align-items: stretch;
}

.executive-pattern--product-category-grid .executive-category-grid > *,
.executive-pattern--product-collection .wp-block-post-template > li {
	border: var(--executive-gt-rule);
	overflow: clip;
	height: 100%;
}

.executive-pattern--product-collection .wp-block-post-template {
	align-items: stretch;
}

.executive-pattern--product-comparison .executive-product-comparison__inner {
	overflow-x: auto;
	border: var(--executive-gt-rule);
}

.executive-pattern--product-comparison table {
	min-width: 44rem;
}

.executive-pattern--process-steps .executive-process__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, .6fr);
	gap: var(--executive-gt-gap);
	align-items: end;
}

.executive-pattern--process-steps .executive-process__steps {
	align-items: stretch;
}

.executive-pattern--process-steps .executive-step {
	padding: var(--executive-gt-pad);
	border: var(--executive-gt-rule);
	height: 100%;
}

.executive-pattern--project-story > .alignwide,
.executive-pattern--trust-information > .alignwide:first-child {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr);
	gap: var(--executive-gt-gap);
	align-items: start;
}

.executive-pattern--trust-information > .alignwide:first-child > .wp-block-group:last-child {
	padding: var(--executive-gt-pad);
}

.executive-pattern--trust-information .executive-trust-grid {
	align-items: stretch;
}

.executive-pattern--trust-information > .alignwide:last-child > .wp-block-group {
	padding: var(--executive-gt-pad);
	border: var(--executive-gt-rule);
	height: 100%;
}

.executive-pattern--technical-specifications .wp-block-table {
	border: var(--executive-gt-rule);
	overflow-x: auto;
}

.executive-pattern--technical-specifications table {
	min-width: 40rem;
}

.executive-pattern--technical-specifications .wp-block-details {
	padding: 1rem 0;
	border-bottom: var(--executive-gt-rule);
}

/* Card-grid background scaffolds should not leak through as a coloured slab. */
.executive-pattern--pricing-table .executive-card-grid,
.executive-pattern--pricing-table-3-column .executive-card-grid,
.executive-pattern--pricing-table-with-testimonials .executive-card-grid {
	gap: 1rem;
}

.executive-pattern--pricing-table .executive-card-grid > *,
.executive-pattern--pricing-table-3-column .executive-card-grid > *,
.executive-pattern--pricing-table-with-testimonials .executive-card-grid > * {
	border: var(--executive-gt-rule);
	padding: var(--executive-gt-pad);
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.executive-pattern--pricing-table .executive-card-grid > * .executive-seam-tile,
.executive-pattern--pricing-table-3-column .executive-card-grid > * .executive-seam-tile,
.executive-pattern--pricing-table-with-testimonials .executive-card-grid > * .executive-seam-tile {
	display: none;
}


@media (max-width: 781px) {
	.executive-pattern--about-story > .alignwide,
	.executive-pattern--booking-call-to-action > .alignwide,
	.executive-pattern--event-card,
	.executive-pattern--faq-section .executive-faq__layout,
	.executive-menu__layout,
	.executive-pattern--process-steps .executive-process__head,
	.executive-pattern--project-story > .alignwide,
	.executive-pattern--trust-information > .alignwide:first-child {
		grid-template-columns: 1fr;
	}

	.executive-pattern--about-story > .alignwide > .wp-block-group:first-child {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.executive-pattern--about-story > .alignwide > .wp-block-group:first-child > .wp-block-image:first-child,
	.executive-pattern--about-story > .alignwide > .wp-block-group:first-child > .wp-block-image:nth-child(2),
	.executive-pattern--about-story > .alignwide > .wp-block-group:first-child > p {
		grid-column: 1;
		grid-row: auto;
		margin: 0;
	}

	.executive-pattern--about-story > .alignwide > .wp-block-group:first-child > .wp-block-image:first-child img {
		max-height: 18rem;
		width: 100%;
		object-fit: cover;
	}

	.executive-menu__items {
		border-inline-start: 0;
		border-top: var(--executive-gt-rule);
	}
}


.executive-authority__header {
	display: block;
	max-width: 52rem;
	margin-inline: 0 auto !important;
}

/* Template and system page layout
---------------------------------------------------------------------------- */
.executive-system-page {
	width: 100%;
	max-width: none;
}

.executive-system-page > .alignwide,
.executive-system-page > .wp-block-query.alignwide,
.executive-single-post > .alignwide {
	width: min(100% - (2 * var(--wp--preset--spacing--medium)), var(--executive-gt-wide));
	margin-inline: auto;
}

.executive-system-query {
	padding-bottom: clamp(3rem, 7vw, 7rem);
}

.executive-system-query__grid {
	align-items: stretch;
}

.executive-system-query__grid > li {
	height: 100%;
}

.executive-system-card {
	height: 100%;
	padding: var(--executive-gt-pad);
	border: var(--executive-gt-rule);
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.executive-system-card .wp-block-post-featured-image {
	margin: calc(var(--executive-gt-pad) * -1) calc(var(--executive-gt-pad) * -1) .5rem;
}

.executive-system-card .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}

.executive-pagination {
	margin-top: var(--wp--preset--spacing--x-large);
	padding-top: var(--wp--preset--spacing--medium);
	border-top: var(--executive-gt-rule);
}

.executive-single-post__body {
	width: min(100% - (2 * var(--wp--preset--spacing--medium)), 1040px) !important;
}

.executive-single-post__content > :is(.alignwide, .alignfull) {
	max-width: 100%;
}

.executive-team-member__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, .55fr);
	gap: var(--executive-gt-gap);
	align-items: center;
}

.executive-team-member__portrait {
	margin: 0;
}

.executive-team-member__portrait img {
	width: 100%;
	max-height: 38rem;
	object-fit: cover;
}

.executive-team-member__profile-grid {
	display: grid;
	grid-template-columns: minmax(10rem, .35fr) minmax(0, 1fr);
	gap: var(--executive-gt-gap);
	align-items: start;
}

.executive-team-member__content {
	max-width: 52rem;
}

@media (max-width: 781px) {
	.executive-team-member__hero-grid,
	.executive-team-member__profile-grid {
		grid-template-columns: 1fr !important;
	}

	.executive-system-page > .alignwide,
	.executive-system-page > .wp-block-query.alignwide,
	.executive-single-post > .alignwide {
		width: min(100% - (2 * var(--wp--preset--spacing--small)), var(--executive-gt-wide));
	}
}


/* Header width contract. Standard headers own a viewport-wide background
 * plane; their navigation row stays inside the wide content container.
 * Floating variants remain contained islands. */
:where(.wp-site-blocks, .editor-styles-wrapper) :is(
	.executive-pattern--header,
	.executive-pattern--header-standard,
	.executive-pattern--header-overlay,
	.executive-pattern--header-pill,
	.executive-pattern--header-rail,
	.executive-pattern--header-banner
) {
	width: 100%;
	max-width: none;
}

/* On a real template, standard header backgrounds also break through the
 * root global padding. Inside the Pattern Library they stay inside the preview
 * viewport instead of escaping to the browser window. */
:where(.wp-site-blocks) > .wp-block-template-part :is(
	.executive-pattern--header,
	.executive-pattern--header-standard,
	.executive-pattern--header-overlay,
	.executive-pattern--header-pill,
	.executive-pattern--header-rail,
	.executive-pattern--header-banner
) {
	width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
	max-width: none;
	margin-inline-start: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
	margin-inline-end: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}

:where(.wp-site-blocks, .editor-styles-wrapper) :is(
	.executive-pattern--header,
	.executive-pattern--header-standard,
	.executive-pattern--header-overlay,
	.executive-pattern--header-pill,
	.executive-pattern--header-rail
) > .alignwide,
:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern--header-banner .alignfull > .alignwide {
	width: min(100%, var(--executive-gt-wide));
	max-width: var(--executive-gt-wide);
	margin-inline: auto !important;
}

:where(.wp-site-blocks, .editor-styles-wrapper) :is(
	.executive-pattern--header-floating,
	.executive-pattern--header-blur
) > .alignwide {
	width: min(calc(100% - (2 * var(--wp--preset--spacing--small))), var(--executive-gt-wide));
	max-width: var(--executive-gt-wide);
	margin-inline: auto !important;
}

/* Compact curated header navigation */
:where(.wp-site-blocks,.editor-styles-wrapper) :is(
	.executive-pattern--header,
	.executive-pattern--header-standard,
	.executive-pattern--header-overlay,
	.executive-pattern--header-pill,
	.executive-pattern--header-rail,
	.executive-pattern--header-banner,
	.executive-pattern--header-blur,
	.executive-pattern--header-floating,
	.executive-pattern--woo-header
) .wp-block-site-title {
	max-width: 18rem;
	margin: 0;
	font-size: clamp(.72rem, .65rem + .2vw, .9rem);
	font-weight: 650;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

:where(.wp-site-blocks,.editor-styles-wrapper) :is(
	.executive-pattern--header,
	.executive-pattern--header-standard,
	.executive-pattern--header-overlay,
	.executive-pattern--header-pill,
	.executive-pattern--header-rail,
	.executive-pattern--header-banner,
	.executive-pattern--header-blur,
	.executive-pattern--header-floating,
	.executive-pattern--woo-header
) .wp-block-navigation__container {
	gap: .75rem 1rem;
}

:where(.wp-site-blocks,.editor-styles-wrapper) :is(
	.executive-pattern--header,
	.executive-pattern--header-standard,
	.executive-pattern--header-overlay,
	.executive-pattern--header-pill,
	.executive-pattern--header-rail,
	.executive-pattern--header-banner,
	.executive-pattern--header-blur,
	.executive-pattern--header-floating
) > .alignwide,
:where(.wp-site-blocks,.editor-styles-wrapper) .executive-pattern--header-banner .alignfull > .alignwide {
	min-height: 3.5rem;
}

:where(.wp-site-blocks,.editor-styles-wrapper) .executive-pattern--header-pill .executive-header-frame {
	border-radius: 0 !important;
}

:where(.wp-site-blocks,.editor-styles-wrapper) .executive-pattern--woo-header .executive-woo-header__search-row {
	min-height: 3rem;
}

:where(.wp-site-blocks,.editor-styles-wrapper) .executive-pattern--woo-header .wp-block-search {
	width: min(100%, 32rem) !important;
	margin-left: auto;
}

@media (max-width: 960px) {
	:where(.wp-site-blocks,.editor-styles-wrapper) :is(
		.executive-pattern--header-pill,
		.executive-pattern--header-blur,
		.executive-pattern--header-floating,
		.executive-pattern--woo-header
	) .alignwide {
		flex-wrap: wrap;
	}

	:where(.wp-site-blocks,.editor-styles-wrapper) :is(
		.executive-pattern--header-pill,
		.executive-pattern--header-blur,
		.executive-pattern--header-floating
	) .executive-header-frame {
		min-width: 0;
	}
}

@media (max-width: 781px) {
	:where(.wp-site-blocks,.editor-styles-wrapper) :is(
		.executive-pattern--header,
		.executive-pattern--header-standard,
		.executive-pattern--header-overlay,
		.executive-pattern--header-pill,
		.executive-pattern--header-rail,
		.executive-pattern--header-banner,
		.executive-pattern--header-blur,
		.executive-pattern--header-floating,
		.executive-pattern--woo-header
	) .wp-block-site-title {
		max-width: min(58vw, 16rem);
	}

	:where(.wp-site-blocks,.editor-styles-wrapper) .executive-pattern--woo-header .wp-block-search {
		width: 100% !important;
	}
}


/* Commerce pattern previews and standalone product cards */
.executive-commerce-preview-product,
:where(.executive-pattern--woo-product-card,
.executive-pattern--woo-product-card-2,
.executive-pattern--woo-product-card-3,
.executive-pattern--woo-product-card-4,
.executive-pattern--woo-product-card-5) {
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	box-shadow: none;
	overflow: clip;
}

.executive-commerce-preview-product {
	max-width: 30rem;
	margin-inline: auto;
}

.executive-commerce-preview-product .wp-block-image {
	margin: 0;
}

.executive-commerce-preview-product > .wp-block-group {
	border-top: 1px solid var(--wp--preset--color--border);
}

:where(.executive-pattern--woo-product-card,
.executive-pattern--woo-product-card-2,
.executive-pattern--woo-product-card-3,
.executive-pattern--woo-product-card-4,
.executive-pattern--woo-product-card-5) > :not(.executive-product-button-hover-image):not(.wp-block-woocommerce-product-image) {
	padding-inline: var(--wp--preset--spacing--medium);
}

:where(.executive-pattern--woo-product-card,
.executive-pattern--woo-product-card-2,
.executive-pattern--woo-product-card-3,
.executive-pattern--woo-product-card-4,
.executive-pattern--woo-product-card-5) > :last-child {
	padding-bottom: var(--wp--preset--spacing--medium);
}

@media (max-width: 781px) {
	.executive-final-cta__headline h2 {
		font-size: clamp(3rem, 13vw, 4.8rem);
	}

	.executive-final-cta__action-panel {
		margin-top: var(--wp--preset--spacing--small);
	}

	.executive-lead-magnet__cover {
		min-height: 19rem;
	}
}

/* Demo/template composition refresh ------------------------------------------------ */
:where(.wp-site-blocks, .editor-styles-wrapper) .executive-page-v2 {
	width: 100%;
	max-width: none;
	margin: 0;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .executive-page-v2 > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .solara-role-grid {
	gap: var(--executive-gt-gap-small);
}

:where(.wp-site-blocks, .editor-styles-wrapper) .solara-role-point {
	padding: var(--executive-gt-pad);
	border: var(--executive-gt-rule);
	height: 100%;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern--accommodation-card .executive-specialist-card__content,
:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern--treatment-card .executive-specialist-card__content {
	justify-content: space-between;
}

@media (max-width: 781px) {
	:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern--accommodation-card > .wp-block-column,
	:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern--treatment-card > .wp-block-column {
		flex-basis: 100% !important;
	}

	:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern--accommodation-card .executive-specialist-card__badge,
	:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern--treatment-card .executive-specialist-card__badge {
		inset: .85rem auto auto .85rem;
		height: auto;
	}
}


/* Pass 17: native Gutenberg width ownership and demo detail refinements
---------------------------------------------------------------------------- */
/* Pattern content width is intentionally not hard-coded here. Root Groups and
 * Covers use Gutenberg's constrained layout by default. Switching off
 * "Inner blocks use content width" changes the parent to flow and is therefore
 * allowed to expand the content without a theme selector forcing it back. */
:where(.wp-site-blocks, .editor-styles-wrapper) .executive-pattern-shell {
	box-sizing: border-box;
	min-width: 0;
}

.executive-page-header__panel {
	max-width: 48rem;
}

.executive-page-header__signal {
	inline-size: clamp(5rem, 18vw, 12rem);
}

.executive-insight-hero__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

:where(.wp-site-blocks, .editor-styles-wrapper) :is(.solara-role-grid, .solara-project-detail-grid) {
	align-items: stretch;
	gap: var(--executive-gt-gap-small);
}

:where(.wp-site-blocks, .editor-styles-wrapper) :is(.solara-role-point, .solara-role-requirement, .solara-project-detail-step) {
	box-sizing: border-box;
	height: 100%;
	padding: var(--executive-gt-pad);
	border: var(--executive-gt-rule);
}

@media (max-width: 781px) {
	.executive-page-header__panel {
		max-width: 100%;
	}

	.executive-page-header__signal {
		inline-size: clamp(4rem, 34vw, 9rem);
	}
}