/*
Theme Name: Executive Professional
Update URI: false
Author: Chantal van Nuland
Description: A complete WordPress block-theme demo for the fictional notary office Notariaat Meridiaan, built on Twenty Twenty-Five and Executive Professional.
Tags: block-patterns, full-site-editing, style-variations, translation-ready
Requires at least: 6.9
Requires PHP: 8.2
Version: 1.0.19
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: executive-professional
Template: twentytwentyfive

Notariaat Meridiaan WordPress Theme, (C) 2026 Chantal van Nuland.
Notariaat Meridiaan 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;
}

.executive-breadcrumb {
	padding: .75rem var(--wp--preset--spacing--medium);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--canvas);
}

.executive-breadcrumb ol {
	display: flex;
	width: min(100%, var(--wp--style--global--wide-size));
	flex-wrap: wrap;
	gap: .35rem .6rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.executive-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.executive-breadcrumb li + li::before {
	content: "/";
	color: var(--wp--preset--color--brand);
}

.executive-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.executive-breadcrumb a:hover,
.executive-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.executive-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

/* 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='%23161C2E' 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--surface-strong) !important;
	color: var(--wp--preset--color--text-on-strong) !important;
}

:is(.wp-block-group, .wp-block-cover).is-style-section-light {
	background-color: var(--wp--preset--color--text-on-strong) !important;
	color: var(--wp--preset--color--text) !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--text-on-strong);
	--executive-text-muted: var(--wp--preset--color--text-on-strong);
	--executive-link: var(--wp--preset--color--text-on-strong);
	--executive-button-background: var(--wp--preset--color--background);
	--executive-button-text: var(--wp--preset--color--text);
	--executive-accent: var(--wp--preset--color--text-on-strong);
}

/* 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%;
}

/*
 * Floating header.
 *
 * The native sticky control writes .is-position-sticky onto the Group inside
 * the template-part wrapper. Target that exact relationship as well as the
 * editor canvas, so the choice made in Gutenberg is reflected on the site and
 * while editing.
 *
 * Only use this on templates whose first section can carry a header on top of
 * it. Add .executive-unstick-mobile to opt out on small screens.
 */
:is(
	body:not(.wp-admin) .wp-site-blocks > .is-position-sticky,
	body:not(.wp-admin) .wp-block-template-part > .is-position-sticky,
	body:not(.wp-admin) header.is-position-sticky,
	body:not(.wp-admin) header > .is-position-sticky,
	.editor-styles-wrapper .wp-block-template-part > .is-position-sticky
) {
	position: sticky !important;
	top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 0px)) !important;
	z-index: 1100 !important;
	width: 100%;
}

/*
 * 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: 781px) {
	body:not(.wp-admin) :is(
		.wp-site-blocks > .executive-unstick-mobile,
		.wp-site-blocks > .wp-block-template-part > .executive-unstick-mobile,
		.wp-block-template-part > .executive-unstick-mobile,
		header.executive-unstick-mobile,
		header > .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: 600px) {

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

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

/*
 * Media stack for the "About" section (patterns/about-media-stack.php).
 *
 * A looser, livelier take on the seam-tile pairing used elsewhere: the two
 * photographs overlap at an angle instead of meeting on a straight join, and
 * a full-round accent shape peeks out behind them rather than a square icon
 * tile. Scoped to this one pattern so the rest of the theme's sections keep
 * their quieter, aligned treatment.
 */
.executive-about-stack {
	position: relative;
	min-height: clamp(22rem, 34vw, 30rem);
}
.executive-about-stack .wp-block-image { margin: 0; }
.executive-about-stack__image-main {
	position: relative !important;
	z-index: 2;
	width: 84%;
}
.executive-about-stack__image-main img {
	width: 100%;
	border-radius: var(--executive-radius-media);
	box-shadow: var(--executive-card-shadow);
	transform: rotate(-2.5deg);
}
.executive-about-stack__image-small {
	position: absolute !important;
	right: 0;
	bottom: -8%;
	z-index: 3;
	width: clamp(9rem, 25vw, 13rem);
}
.executive-about-stack__image-small img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--executive-radius-media);
	box-shadow: var(--executive-card-shadow);
	transform: rotate(4deg);
}
.executive-about-stack__orb {
	position: absolute !important;
	left: -7%;
	bottom: -9%;
	z-index: 1;
	width: clamp(8rem, 20vw, 12rem);
	aspect-ratio: 1;
	border-radius: 50% !important;
}

@media (max-width: 781px) {
	.executive-about-stack {
		min-height: 0;
		margin-inline: auto;
		max-width: 26rem;
	}
	.executive-about-stack__image-small { width: 6.5rem; }
	.executive-about-stack__orb { width: 6rem; }
}

/*
 * 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 (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;
	}
}

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

/*
 * Regular nav links (.wp-block-navigation-item__content) are hard-coded dark
 * further down in this file and were never part of the veil in the first
 * place, so they always read dark. The site title and the submenu toggle
 * button *are* wired to the veil below, so at scroll position 0 they still
 * start light/transparent — inconsistent with the nav items beside them.
 * Skip the transparent phase everywhere and start solid, matching the nav.
 */
.executive-header-solidify {
	animation: none !important;
	--executive-header-veil: 1;
	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: var(--wp--preset--color--surface);
	--executive-card-border: 1px solid var(--wp--preset--color--border);
	--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);
}

/* Semantic colour contexts.
 *
 * Every style direction defines a background/contrast pair. Apply the matching
 * contrast token to the container, then let ordinary headings and links inherit
 * it. This prevents the global heading/link element colours from turning dark
 * again inside dark cards. The same rules cover the legacy palette aliases used
 * by older patterns, so switching style directions remains safe. */
:is(
	.has-background-background-color,
	.has-surface-background-color,
	.has-surface-alt-background-color,
	.has-canvas-background-color,
	.has-brand-light-background-color
):not(.has-text-color) {
	color: var(--wp--preset--color--text);
}

:is(
	.has-surface-strong-background-color,
	.has-canvas-inverse-background-color,
	.has-brand-alt-dark-background-color
):not(.has-text-color) {
	color: var(--wp--preset--color--text-on-strong);
}

:is(.has-primary-background-color, .has-brand-background-color):not(.has-text-color) {
	color: var(--wp--preset--color--primary-contrast);
}

:is(.has-secondary-background-color, .has-brand-alt-background-color):not(.has-text-color) {
	color: var(--wp--preset--color--secondary-contrast);
}

.has-accent-background-color:not(.has-text-color) {
	color: var(--wp--preset--color--accent-contrast);
}

:is(
	.has-surface-strong-background-color,
	.has-canvas-inverse-background-color,
	.has-brand-alt-dark-background-color,
	.has-primary-background-color,
	.has-brand-background-color,
	.has-secondary-background-color,
	.has-brand-alt-background-color,
	.has-accent-background-color
) :is(h1, h2, h3, h4, h5, h6, .wp-block-heading, a):not(.has-text-color) {
	color: inherit;
}

.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 {
	background-color: var(--executive-card-background) !important;
	border: var(--executive-card-border) !important;
	border-radius: var(--executive-radius-surface) !important;
	box-shadow: var(--executive-card-shadow) !important;
	-webkit-backdrop-filter: var(--executive-card-blur, none);
	backdrop-filter: var(--executive-card-blur, none);
}

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

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

.executive-hero .wp-block-cover__background {
	background: var(--wp--preset--color--ink) !important;
	opacity: .6 !important;
}

/* Reserve clear space for the floating header before any hero copy begins. */
.executive-hero,
.wp-block-cover.executive-parallax-media {
	padding-top: calc(var(--wp--preset--spacing--xxx-large) + 2rem) !important;
}

.executive-media-overlay .wp-block-cover__background {
	background: var(--executive-hero-overlay) !important;
}

.executive-hero .wp-block-cover__inner-container,
.executive-hero .wp-block-cover__inner-container :is(h1, h2, h3, h4, h5, h6, p, a):not(.wp-element-button) {
	color: var(--wp--preset--color--ink-inverse) !important;
}

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

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

/* Notariaat Meridiaan Creative Modern Bold project layer. */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.notariaat-main,
.creative-home {
	overflow: clip;
}

/* Page shell must not collapse full-width homepage patterns to contentSize. */
.notariaat-main {
	width: 100%;
	max-width: none !important;
}

.notariaat-main > .wp-block-post-content {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.notariaat-main > .wp-block-post-content > .alignfull {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Floating glass navigation ------------------------------------------------ */
.notariaat-header {
	isolation: isolate;
	z-index: 100;
	margin-top: 16px !important;
	padding: 0 var(--wp--preset--spacing--small) 0 !important;
}

/* The sticky element is the root-level shell in the template, not the Group
 * inside the template part. Core only exposes native sticky positioning for
 * root-level blocks. Keeping the shell at the template root also prevents a
 * sticky header from being trapped by the template-part's own height. */
body:not(.wp-admin) .notariaat-header-shell.is-position-sticky,
.wp-site-blocks > .wp-block-template-part:has(> .notariaat-header),
.editor-styles-wrapper .notariaat-header-shell.is-position-sticky {
	position: fixed !important;
	inset: 0 0 auto !important;
	top: 0 !important;
	z-index: 1100 !important;
	width: 100%;
}

body.admin-bar:not(.wp-admin) :is(.notariaat-header-shell.is-position-sticky, .wp-site-blocks > .wp-block-template-part:has(> .notariaat-header)) {
	top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* Fallback for a header Group that a user explicitly marks sticky inside a
 * template part. Promote the template-part wrapper itself, otherwise the
 * inner sticky Group can only stick within a parent that is one header tall. */
body:not(.wp-admin) .wp-block-template-part:has(> .notariaat-header.is-position-sticky),
.editor-styles-wrapper .wp-block-template-part:has(> .notariaat-header.is-position-sticky) {
	position: sticky !important;
	top: 0 !important;
	z-index: 1100 !important;
}

body.admin-bar:not(.wp-admin) .wp-block-template-part:has(> .notariaat-header.is-position-sticky) {
	top: 32px !important;
}

body:not(.wp-admin) .wp-block-template-part > .notariaat-header.is-position-sticky {
	position: static !important;
	top: auto !important;
}

.creative-floating-header {
	position: relative;
	width: min(100%, 1320px);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 78%, transparent) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 70%, transparent) !important;
	border-radius: var(--executive-radius-control) !important;
	box-shadow: var(--executive-header-shadow) !important;
	-webkit-backdrop-filter: blur(22px) saturate(1.25);
	backdrop-filter: blur(22px) saturate(1.25);
}

.notariaat-header .wp-block-site-title {
	font-family: var(--wp--preset--font-family--expanded);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 720;
	letter-spacing: -.045em;
	white-space: nowrap;
}

.notariaat-header .wp-block-site-title a,
.notariaat-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.notariaat-header .wp-block-navigation__container {
	align-items: center;
	gap: .25rem;
}

.notariaat-header .wp-block-navigation-item__content {
	border-radius: var(--executive-radius-control);
	padding: .62rem .86rem;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.notariaat-header .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--wp--preset--color--surface-alt) 72%, transparent);
	transform: translateY(-1px);
}

.notariaat-header .notariaat-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-weight: 700;
	padding-inline: 1.05rem;
}

.notariaat-header .notariaat-nav-cta > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface-strong);
	color: var(--wp--preset--color--text-on-strong);
}

.notariaat-header .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	min-width: 16rem;
	padding: .55rem;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 94%, transparent);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--executive-radius-surface);
	box-shadow: var(--executive-card-shadow);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.notariaat-header .wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .72rem .85rem;
}

/* Shared page section contract -------------------------------------------- */
.notariaat-section,
.creative-section {
	margin-block: 0 !important;
	padding: clamp(2.75rem, 6vw, 6.5rem) var(--wp--preset--spacing--medium) !important;
	background: transparent !important;
}

.notariaat-section__inner {
	width: min(100%, var(--wp--style--global--wide-size));
	margin-inline: auto !important;
}

.notariaat-section__inner.has-background {
	padding: clamp(1.6rem, 4vw, 4rem) !important;
	border-radius: var(--executive-radius-surface);
	box-shadow: var(--executive-card-shadow);
}

.notariaat-feature-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	background: transparent !important;
}

.notariaat-grid-card,
.notariaat-feature-grid > .wp-block-group {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border: var(--executive-card-border);
	border-radius: var(--executive-radius-surface);
	box-shadow: var(--executive-card-shadow);
	background: var(--executive-card-background) !important;
	-webkit-backdrop-filter: var(--executive-card-blur, none);
	backdrop-filter: var(--executive-card-blur, none);
}

/* Creative homepage -------------------------------------------------------- */
.creative-home-hero {
	margin-block: 0 !important;
	padding: calc(var(--wp--preset--spacing--xxx-large) + 2rem) var(--wp--preset--spacing--medium) clamp(4rem, 8vw, 8rem) !important;
}


.creative-home-hero__grid:not(.is-layout-flex):not(.is-layout-grid) {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(25rem, 1.1fr);
	align-items: center;
	gap: clamp(2.5rem, 7vw, 8rem);
}
.creative-home-hero__grid.is-layout-constrained > :where(.creative-home-hero__copy, .creative-home-hero__visual) {
	max-width: none;
	margin-inline: 0 !important;
}

.creative-home-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--medium);
	max-width: 43rem;
}

.creative-home-hero__copy > * { margin-block: 0; }
.creative-home-hero__copy .wp-block-buttons { align-self: stretch; }
.creative-home-hero__copy h1 {
	max-width: 10ch;
	font-size: clamp(3.7rem, 7.5vw, 8.4rem) !important;
	line-height: .84 !important;
	letter-spacing: -.075em !important;
}
.creative-home-hero__copy .has-medium-font-size { max-width: 36rem; color: var(--wp--preset--color--text-muted); }

.creative-home-hero__visual {
	position: relative;
	min-height: clamp(34rem, 58vw, 48rem);
}
.creative-home-hero__visual .wp-block-image { margin: 0; }
.creative-home-hero__image-main {
	position: absolute !important;
	inset: 4% 5% 8% 14%;
	z-index: 2;
}
.creative-home-hero__image-main img {
	width: 100%; height: 100%; min-height: 34rem; object-fit: cover;
	border-radius: var(--executive-radius-media);
	box-shadow: var(--executive-card-shadow);
	transform: rotate(2.5deg);
}
.creative-home-hero__image-small {
	position: absolute !important;
	right: -1%; top: 2%; z-index: 3;
	width: clamp(8rem, 16vw, 13rem);
}
.creative-home-hero__image-small img {
	aspect-ratio: 1 / 1; object-fit: cover;
	border: .55rem solid var(--wp--preset--color--background);
	border-radius: var(--executive-radius-media);
	box-shadow: var(--executive-card-shadow);
	transform: rotate(-7deg);
}
.creative-home-hero__orb {
	position: absolute !important;
	left: 2%; top: 5%; z-index: 1;
	width: clamp(11rem, 24vw, 19rem); aspect-ratio: 1;
	border-radius: 50% !important;
	filter: saturate(1.08);
}
.creative-home-hero__float-card {
	position: absolute !important;
	left: 2%; bottom: 0; z-index: 4;
	width: min(16rem, 44%);
	padding: 1.35rem;
	border: var(--executive-card-border);
	border-radius: var(--executive-radius-surface);
	box-shadow: var(--executive-card-shadow);
	-webkit-backdrop-filter: var(--executive-card-blur, none);
	backdrop-filter: var(--executive-card-blur, none);
	transform: rotate(-3deg);
}
.creative-home-hero__float-card > * { margin-block: 0; }
.creative-home-hero__float-card > :last-child { margin-top: .55rem; line-height: 1.45; }

.creative-section__heading {
	align-items: end;
	gap: 2rem;
	margin-bottom: clamp(1.75rem, 4vw, 3.5rem);
}
.creative-section__heading h2 { max-width: 12ch; font-size: clamp(2.6rem, 5vw, 5.2rem); line-height: .92; }
.creative-section__heading > p { max-width: 31rem; color: var(--wp--preset--color--text-muted); }

.creative-services__grid:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(12rem, auto);
	gap: clamp(1rem, 2vw, 1.5rem);
}
.creative-service-card {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 18rem;
	padding: clamp(1.5rem, 3vw, 2.75rem);
	border-radius: var(--executive-radius-surface);
	box-shadow: var(--executive-card-shadow);
	transition: transform .35s cubic-bezier(.19,1,.22,1);
}
.creative-service-card--large { grid-column: span 7; grid-row: span 2; min-height: 28rem; }
.creative-service-card--wide { grid-column: span 7; }
.creative-service-card:hover { transform: translateY(-.35rem) rotate(.4deg); }
.creative-service-card > * { margin-block: 0; }
.creative-service-card h3 { margin-top: auto; padding-top: 2rem; font-size: clamp(2rem, 4vw, 4rem); }
.creative-service-card p:not(.is-style-eyebrow):not(.creative-card-link) { max-width: 30rem; }
.creative-card-link { margin-top: 1.5rem !important; font-weight: 700; }
.creative-service-card.has-primary-background-color :is(h3,p,a),
.creative-service-card.has-surface-strong-background-color :is(h3,p,a) { color: inherit; }

.creative-editorial-overlap__grid:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(23rem, 1.1fr);
	align-items: center;
	gap: clamp(2rem, 7vw, 8rem);
}
.creative-editorial-overlap__copy h2 { max-width: 10ch; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .88; }
.creative-editorial-overlap__copy p.has-medium-font-size { max-width: 36rem; color: var(--wp--preset--color--text-muted); }
.creative-editorial-overlap__media { position: relative; padding: 4rem 0 2rem 3rem; }
.creative-editorial-overlap__media .wp-block-image { margin: 0; }
.creative-editorial-overlap__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--executive-radius-media); box-shadow: var(--executive-card-shadow); transform: rotate(-2deg); }
.creative-editorial-overlap__note { position: absolute !important; left: 0; bottom: 0; width: min(17rem, 55%); padding: 1.4rem; border-radius: var(--executive-radius-surface); box-shadow: var(--executive-card-shadow); transform: rotate(4deg); }
.creative-editorial-overlap__note > * { margin-block: 0; }
.creative-editorial-overlap__note > :last-child { margin-top: .5rem; }

.creative-process__island,
.creative-team__island,
.creative-final-cta__island {
	position: relative;
	padding: clamp(1.75rem, 5vw, 5rem);
	border-radius: var(--executive-radius-surface);
	box-shadow: var(--executive-card-shadow);
}
.creative-process__island > h2 { max-width: 10ch; font-size: clamp(2.8rem, 5vw, 5.5rem); }
.creative-process__grid:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin-top: clamp(2rem, 5vw, 4.5rem); }
.creative-process-card { min-height: 16rem; padding: 1.4rem; border-radius: var(--executive-radius-surface); box-shadow: 0 20px 45px -38px rgb(0 0 0 / 55%); }
.creative-process-card:nth-child(2) { transform: translateY(1.5rem) rotate(1deg); }
.creative-process-card:nth-child(3) { transform: translateY(-1rem) rotate(-1deg); }
.creative-process-card:nth-child(4) { transform: translateY(1rem) rotate(1.4deg); }
.creative-process-card > * { margin-block: 0; }
.creative-process-card h3 { margin-top: 2rem; }
.creative-process-card p:last-child { margin-top: .75rem; }

.creative-team__island:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) { display: grid; grid-template-columns: minmax(18rem,.75fr) minmax(0,1.25fr); gap: clamp(2rem,6vw,7rem); align-items: center; overflow: hidden; }
.creative-team__copy h2 { max-width: 9ch; font-size: clamp(3rem,5vw,5.8rem); line-height: .9; }
.creative-team__portraits:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: 1rem; min-height: 28rem; }
.creative-team__portraits .wp-block-image { margin: 0; }
.creative-team__portraits img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--executive-radius-media); box-shadow: var(--executive-card-shadow); }
.creative-team__portraits .wp-block-image:nth-child(1) { transform: translateY(1.5rem) rotate(-4deg); }
.creative-team__portraits .wp-block-image:nth-child(2) { transform: translateY(-1.5rem) rotate(2deg); }
.creative-team__portraits .wp-block-image:nth-child(3) { transform: translateY(2.5rem) rotate(5deg); }

.creative-knowledge__query {
	width: 100%;
	max-width: var(--wp--style--global--wide-size) !important;
	margin-inline: auto !important;
}
.creative-knowledge__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;
	gap: clamp(1rem,2vw,1.5rem);
}
.creative-knowledge__grid > li > .wp-block-group { height: 100%; border-radius: var(--executive-radius-surface); overflow: hidden; box-shadow: var(--executive-card-shadow); }

.creative-final-cta__island:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) { overflow: hidden; min-height: 25rem; display: flex; align-items: center; }
.creative-final-cta__copy { position: relative; z-index: 2; max-width: 54rem; margin-inline: 0 !important; }
.creative-final-cta__copy h2 { max-width: 11ch; font-size: clamp(3rem,6vw,6.5rem); line-height: .88; }
.creative-final-cta__copy > p:not(.is-style-eyebrow) { max-width: 34rem; }
.creative-final-cta__orb { position: absolute !important; right: -6rem; top: -7rem; width: clamp(18rem,35vw,34rem); aspect-ratio: 1; border-radius: 50% !important; }

/* Existing generated service, legal and article pages --------------------- */
.notariaat-service-hero-grid,
.notariaat-service-editorial,
.notariaat-service-split,
.notariaat-service-prep,
.notariaat-contact-layout,
.notariaat-hero-grid,
.notariaat-team-split {
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

:is(.notariaat-service-hero-grid, .notariaat-service-split, .notariaat-team-split) img {
	width: 100%; object-fit: cover; border-radius: var(--executive-radius-media); box-shadow: var(--executive-card-shadow);
}

:is(.notariaat-service-topic-grid, .notariaat-service-process-grid, .notariaat-services-overview-grid, .notariaat-process-rail) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

:is(.notariaat-service-topic-grid, .notariaat-service-process-grid, .notariaat-services-overview-grid, .notariaat-process-rail) > .wp-block-group {
	padding: clamp(1.2rem, 2.5vw, 2rem);
	border-radius: var(--executive-radius-surface);
	border: var(--executive-card-border);
	box-shadow: var(--executive-card-shadow);
	background: var(--executive-card-background) !important;
}

.notariaat-service-editorial-section .notariaat-service-editorial {
	padding-block: clamp(2rem, 5vw, 4.5rem);
	border-block: 1px solid var(--wp--preset--color--border);
}

.notariaat-service-editorial h2 {
	max-width: 10ch;
	font-size: clamp(2rem, 4vw, 3.75rem);
}

.notariaat-service-process-grid > .wp-block-group {
	position: relative;
	overflow: hidden;
}

.notariaat-service-process-grid > .wp-block-group::before {
	content: "";
	display: block;
	width: 2.5rem;
	border-top: 3px solid var(--wp--preset--color--brand);
	margin-bottom: var(--wp--preset--spacing--small);
}

@media (max-width: 980px) {
	:is(.notariaat-service-topic-grid, .notariaat-service-process-grid, .notariaat-services-overview-grid, .notariaat-process-rail) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	:is(.notariaat-service-topic-grid, .notariaat-service-process-grid, .notariaat-services-overview-grid, .notariaat-process-rail) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Service pages use the same bold editorial rhythm as the home page. */
.notariaat-service-editorial-section .notariaat-section__inner { background: transparent !important; }

.notariaat-service-editorial {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 5vw, 5rem) !important;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--executive-radius-surface);
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary-contrast);
	box-shadow: var(--executive-card-shadow);
}

.notariaat-service-editorial::before {
	content: "";
	position: absolute;
	right: clamp(-8rem, -6vw, -2rem);
	top: clamp(-9rem, -7vw, -2rem);
	width: clamp(13rem, 24vw, 22rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.notariaat-service-editorial > .wp-block-column { position: relative; z-index: 1; }

.notariaat-service-editorial h2 {
	max-width: 9ch;
	margin: 0;
	color: inherit !important;
	font-size: clamp(2.5rem, 4.8vw, 5rem);
	line-height: .9;
}

.notariaat-service-editorial > .wp-block-column:last-child {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border-radius: var(--executive-radius-surface);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 13%, transparent);
}

.notariaat-service-editorial > .wp-block-column:last-child p { color: inherit !important; }

:is(.notariaat-service-split-section, .notariaat-services-prep) .notariaat-service-split {
	display: grid !important;
	grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr);
	gap: clamp(2.5rem, 7vw, 8rem);
	align-items: center;
}

:is(.notariaat-service-split-section, .notariaat-services-prep) .notariaat-service-split > .wp-block-column:first-child {
	position: relative;
	padding: 2rem 0 0 2rem;
}

:is(.notariaat-service-split-section, .notariaat-services-prep) .notariaat-service-split > .wp-block-column:first-child::before {
	content: "";
	position: absolute;
	inset: 0 20% 12% 0;
	border-radius: 48% 52% 45% 55%;
	background: var(--wp--preset--color--accent);
}

:is(.notariaat-service-split-section, .notariaat-services-prep) .notariaat-service-split figure { position: relative; z-index: 1; margin: 0; }
:is(.notariaat-service-split-section, .notariaat-services-prep) .notariaat-service-split img { transform: rotate(-2deg); }

:is(.notariaat-service-split-section, .notariaat-services-prep) .notariaat-service-split > .wp-block-column:last-child {
	padding: clamp(1.5rem, 3vw, 3rem);
	border: var(--executive-card-border);
	border-radius: var(--executive-radius-surface);
	background: var(--executive-card-background);
	box-shadow: var(--executive-card-shadow);
}

:is(.notariaat-service-process, .notariaat-services-process) .notariaat-section__inner {
	padding: clamp(2rem, 5vw, 4.5rem) !important;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--executive-radius-surface);
	background: var(--wp--preset--color--surface-strong) !important;
	color: var(--wp--preset--color--text-on-strong);
	box-shadow: var(--executive-card-shadow);
}

:is(.notariaat-service-process, .notariaat-services-process) .notariaat-section__inner > :is(h2, p) {
	position: relative;
	color: inherit !important;
	text-align: center;
}

:is(.notariaat-service-process, .notariaat-services-process) .notariaat-section__inner > .is-style-eyebrow { color: var(--wp--preset--color--accent) !important; }

.notariaat-service-process-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	margin-top: clamp(2rem, 5vw, 4.5rem);
}

.notariaat-service-process-grid > .wp-block-group,
.notariaat-process-rail > .wp-block-group {
	display: flex;
	min-height: 16rem;
	flex-direction: column;
	justify-content: center;
	border: 0 !important;
	box-shadow: 0 20px 45px -38px rgb(0 0 0 / 55%);
	text-align: center;
}

.notariaat-service-process-grid > .wp-block-group::before { display: none; }

.notariaat-service-process-grid > .wp-block-group:nth-child(2),
.notariaat-process-rail > .wp-block-group:nth-child(2) {
	transform: translateY(1.5rem) rotate(1deg);
	background: var(--wp--preset--color--surface-alt) !important;
}

.notariaat-service-process-grid > .wp-block-group:nth-child(3),
.notariaat-process-rail > .wp-block-group:nth-child(3) {
	transform: translateY(-1rem) rotate(-1deg);
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent-contrast);
}

.notariaat-service-process-grid > .wp-block-group:nth-child(4) {
	transform: translateY(1rem) rotate(1.4deg);
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary-contrast);
}

:is(.notariaat-service-process-grid, .notariaat-process-rail) > .wp-block-group :is(h3, p) { color: inherit !important; }

@media (max-width: 1024px) {
	:is(.notariaat-service-split-section, .notariaat-services-prep) .notariaat-service-split { grid-template-columns: 1fr; }
	.notariaat-service-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 700px) {
	.notariaat-service-editorial { padding: clamp(1.5rem, 7vw, 2.5rem) !important; }
	.notariaat-service-editorial > .wp-block-column:last-child { padding: 1.25rem; }
	:is(.notariaat-service-process-grid, .notariaat-process-rail) > .wp-block-group { min-height: 0; transform: none !important; }
}

@media (max-width: 560px) {
	.notariaat-service-process-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Keep the general services introduction readable when its headline is long. */
.notariaat-service-editorial {
	gap: clamp(2rem, 5vw, 5rem);
}

.notariaat-service-editorial > .wp-block-column:first-child {
	flex-basis: 45%;
}

.notariaat-service-editorial > .wp-block-column:last-child {
	flex-basis: 55%;
}

.notariaat-service-editorial::before {
	left: clamp(-10rem, -7vw, -3rem);
	right: auto;
	top: auto;
	bottom: clamp(-12rem, -9vw, -4rem);
}

.notariaat-service-editorial h2 {
	max-width: 13ch;
	font-size: clamp(2.25rem, 3.7vw, 3.9rem);
	line-height: .94;
}

.notariaat-service-editorial > .wp-block-column:last-child {
	align-self: center;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

.notariaat-service-editorial > .wp-block-column:last-child p {
	color: var(--wp--preset--color--text) !important;
}

/* On the preparation section the accent belongs behind the image, not the copy. */
.notariaat-services-prep .notariaat-service-split > .wp-block-column:first-child {
	padding: 0;
}

.notariaat-services-prep .notariaat-service-split > .wp-block-column:first-child::before {
	display: none;
}

.notariaat-services-prep .notariaat-service-split > .wp-block-column:last-child {
	position: relative;
	padding: 1.5rem 0 0 1.5rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.notariaat-services-prep .notariaat-service-split > .wp-block-column:last-child::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 48% 52% 45% 55%;
	background: var(--wp--preset--color--accent);
}

.notariaat-services-prep .notariaat-service-split figure,
.notariaat-services-prep .notariaat-service-split img {
	position: relative;
	z-index: 1;
}

.notariaat-services-prep .notariaat-service-split img {
	transform: rotate(1deg);
}

.notariaat-tarieven-grid .executive-card-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.notariaat-tarieven-grid .executive-card-grid > .wp-block-group {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	height: 100%;
	margin: 0 !important;
	background: transparent !important;
}

.notariaat-tarieven-grid .executive-seam-tile {
	display: none !important;
}

.notariaat-tarieven-intro__layout {
	display: grid !important;
	grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
	align-items: center;
	gap: clamp(2rem, 7vw, 7rem);
	padding-block: clamp(.5rem, 2vw, 2rem);
	border-block: 1px solid var(--wp--preset--color--border);
}

.notariaat-tarieven-intro__copy h2 {
	max-width: 10ch;
	font-size: clamp(2.8rem, 5.8vw, 6rem);
	line-height: .9;
}

.notariaat-tarieven-intro__detail {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--executive-radius-surface);
}

.notariaat-tarieven-intro__detail::before {
	position: absolute;
	inset: -55% -25%;
	content: "";
	border-radius: 46% 54% 58% 42%;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 18%, transparent);
	transform: rotate(-9deg);
}

.notariaat-tarieven-intro__detail p {
	position: relative;
	z-index: 1;
	max-width: 32rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 700px) {
	.notariaat-tarieven-grid .executive-card-grid {
		grid-template-columns: 1fr;
	}

	.notariaat-tarieven-intro__layout {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--large);
	}

	.notariaat-tarieven-intro__copy h2 {
		max-width: 12ch;
	}
}

.notariaat-service-related { gap: .75rem; }
.notariaat-service-related a { display: inline-flex; padding: .65rem 1rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--executive-radius-control); }

.notariaat-faq-list .wp-block-details,
.notariaat-service-faq .wp-block-details {
	margin: .75rem 0;
	padding: 0;
	overflow: clip;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--executive-radius-surface);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

.notariaat-faq-list .wp-block-details > summary,
.notariaat-service-faq .wp-block-details > summary {
	margin: 0;
	padding: 1.05rem 1.25rem;
	list-style-position: inside;
}

.notariaat-faq-list .wp-block-details > :not(summary),
.notariaat-service-faq .wp-block-details > :not(summary) {
	margin-inline: 1.25rem !important;
}

.notariaat-faq-list .wp-block-details[open] > :last-child,
.notariaat-service-faq .wp-block-details[open] > :last-child {
	margin-bottom: 1.1rem !important;
}

.notariaat-article { overflow-x: clip; }
.notariaat-article-hero { max-width: 52rem; margin-inline: auto; padding-block: clamp(3rem,7vw,7rem); }
.notariaat-article-hero .wp-block-post-title { font-size: clamp(2.8rem,5.5vw,5.8rem); line-height: .92; }
.notariaat-article-image { max-width: 74rem; margin-inline: auto; }
.notariaat-article-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--executive-radius-media); box-shadow: var(--executive-card-shadow); }
.notariaat-article .wp-block-post-content { max-width: 48rem; margin-inline: auto; }
.notariaat-article .notariaat-section { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw) !important; }

.notariaat-contact-section {
	overflow: clip;
}

.notariaat-contact-layout {
	display: grid !important;
	grid-template-columns: minmax(0, .9fr) minmax(24rem, 1.1fr);
	align-items: start;
	gap: clamp(2rem, 7vw, 8rem);
}

.notariaat-contact-copy {
	padding-block: clamp(.5rem, 4vw, 3rem);
}

.notariaat-contact-copy h1 {
	max-width: 10ch;
	font-size: clamp(3rem, 6vw, 6.25rem);
	line-height: .88;
}

.notariaat-contact-copy > .has-medium-font-size {
	max-width: 32rem;
}

.notariaat-contact-details {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block: clamp(2rem, 5vw, 4rem);
	border-block: 1px solid var(--wp--preset--color--border);
}

.notariaat-contact-detail {
	min-height: 8rem;
	padding: 1.25rem 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.notariaat-contact-detail:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.notariaat-contact-detail:nth-child(odd) {
	border-right: 1px solid var(--wp--preset--color--border);
}

.notariaat-contact-detail p {
	margin-block: 0;
}

.notariaat-contact-detail > :last-child {
	margin-top: .65rem;
	overflow-wrap: anywhere;
}

.notariaat-contact-detail a {
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.notariaat-contact-form-panel {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	padding: clamp(1.6rem, 4vw, 4rem);
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--executive-radius-surface);
}

.notariaat-contact-form-panel__orb {
	position: absolute !important;
	right: clamp(-10rem, -8vw, -3rem);
	top: clamp(-10rem, -7vw, -3rem);
	width: clamp(14rem, 30vw, 27rem);
	aspect-ratio: 1;
	border-radius: 50% !important;
	opacity: .9;
}

.notariaat-contact-form-panel__content {
	position: relative;
	z-index: 1;
}

.notariaat-contact-form-panel__content > :is(h2, p) {
	color: inherit !important;
}

.notariaat-contact-form-panel__content h2 {
	max-width: 10ch;
	font-size: clamp(2.6rem, 4.6vw, 5rem);
	line-height: .9;
}

.notariaat-contact-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.notariaat-contact-form > p {
	grid-column: 1 / -1;
	margin: 0;
}

.notariaat-contact-form > p:has(#notariaat-name),
.notariaat-contact-form > p:has(#notariaat-email),
.notariaat-contact-form > p:has(#notariaat-phone),
.notariaat-contact-form > p:has(#notariaat-subject) {
	grid-column: span 1;
	display: grid;
	grid-template-rows: minmax(2.5rem, auto) auto;
	gap: .45rem;
}

.notariaat-contact-form label {
	display: block;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.notariaat-contact-form label:has(input[type="checkbox"]) {
	display: block;
	font-weight: 400;
}

.notariaat-contact-form :is(input:not([type="checkbox"]), select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 3.15rem;
	padding: .8rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: .5rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}
.notariaat-contact-form textarea { min-height: 10rem; resize: vertical; border-radius: .65rem; }

.notariaat-contact-form :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	outline-offset: 2px;
}

.notariaat-contact-form .notariaat-form-help,
.notariaat-contact-form label:has(input[type="checkbox"]) {
	color: color-mix(in srgb, currentColor 78%, transparent);
	font-size: var(--wp--preset--font-size--x-small);
}

.notariaat-contact-form .notariaat-form-honeypot {
	display: none;
}

.notariaat-contact-form .wp-block-button__link {
	min-height: 3.15rem;
	border-radius: var(--executive-radius-control);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

/* WPForms inherits the same panel layout as the temporary contact form. */
.notariaat-contact-form-panel .wpforms-container {
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

.notariaat-contact-form-panel .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 1rem;
}

.notariaat-contact-form-panel .wpforms-field {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.notariaat-contact-form-panel :is(.wpforms-field-name, .wpforms-field-email, .wpforms-field-phone, .wpforms-field-select) {
	grid-column: span 1;
}

.notariaat-contact-form-panel .wpforms-field-label {
	display: flex !important;
	align-items: end;
	min-height: 2.5rem;
	margin: 0 0 .45rem !important;
	color: inherit !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600 !important;
	line-height: 1.35;
}

.notariaat-contact-form-panel .wpforms-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	box-sizing: border-box;
	width: 100% !important;
	min-height: 3.15rem;
	padding: .8rem 1rem !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: .5rem !important;
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--text) !important;
}

.notariaat-contact-form-panel .wpforms-field textarea {
	min-height: 10rem;
	resize: vertical;
	border-radius: .65rem !important;
}

.notariaat-contact-form-panel .wpforms-field :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--accent) !important;
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	outline-offset: 2px;
}

.notariaat-contact-form-panel .wpforms-field-description,
.notariaat-contact-form-panel .wpforms-field-checkbox label {
	color: color-mix(in srgb, currentColor 78%, transparent) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
}

.notariaat-contact-form-panel .wpforms-submit-container {
	margin: 1rem 0 0 !important;
	padding: 0 !important;
}

.notariaat-contact-form-panel button.wpforms-submit {
	min-height: 3.15rem;
	padding: .75rem 1.2rem !important;
	border: 0 !important;
	border-radius: var(--executive-radius-control) !important;
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent-contrast) !important;
	font: inherit !important;
	font-weight: 700 !important;
}

@media (max-width: 900px) {
	.notariaat-contact-layout {
		grid-template-columns: 1fr;
	}

	.notariaat-contact-form-panel {
		min-height: auto;
	}
}

@media (max-width: 560px) {
	.notariaat-contact-details,
	.notariaat-contact-form {
		grid-template-columns: 1fr;
	}

	.notariaat-contact-detail,
	.notariaat-contact-detail:nth-last-child(-n + 2) {
		min-height: 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.notariaat-contact-detail:nth-child(odd) {
		border-right: 0;
	}

	.notariaat-contact-detail:last-child {
		border-bottom: 0;
	}

	.notariaat-contact-form > p:has(#notariaat-name),
	.notariaat-contact-form > p:has(#notariaat-email),
	.notariaat-contact-form > p:has(#notariaat-phone),
	.notariaat-contact-form > p:has(#notariaat-subject) {
		grid-column: 1 / -1;
		grid-template-rows: auto;
	}

	.notariaat-contact-form label,
	.notariaat-contact-form-panel .wpforms-field-label {
		min-height: 0;
	}

	.notariaat-contact-form-panel .wpforms-field-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.notariaat-contact-form-panel :is(.wpforms-field-name, .wpforms-field-email, .wpforms-field-phone, .wpforms-field-select) {
		grid-column: 1 / -1;
	}
}

.notariaat-site-footer {
	margin-top: clamp(3rem,7vw,7rem) !important;
	border-radius: var(--executive-radius-surface) var(--executive-radius-surface) 0 0;
	overflow: hidden;
}
.notariaat-site-footer a { color: inherit; }

@media (max-width: 1024px) {
	.creative-home-hero__grid:not(.is-layout-flex):not(.is-layout-grid),
	.creative-editorial-overlap__grid:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained),
	.creative-team__island:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) { grid-template-columns: 1fr; }
	.creative-home-hero__visual { min-height: 40rem; max-width: 44rem; }
	.creative-services__grid:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.creative-service-card,
	.creative-service-card--large,
	.creative-service-card--wide { grid-column: auto; grid-row: auto; min-height: 18rem; }
	.creative-process__grid:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 781px) {
	body.admin-bar:not(.wp-admin) .notariaat-header-shell.is-position-sticky,
	body.admin-bar:not(.wp-admin) .wp-block-template-part:has(> .notariaat-header.is-position-sticky) { top: 46px !important; }
	.creative-home-hero {
		padding-top: calc(var(--wp--preset--spacing--xxx-large) + 5rem) !important;
	}
	.executive-hero,
	.wp-block-cover.executive-parallax-media {
		padding-top: calc(var(--wp--preset--spacing--xxx-large) + 5rem) !important;
	}
	body:not(.wp-admin) .notariaat-header {
		position: static;
		top: auto;
		margin-bottom: 0 !important;
		margin-top: 16px !important;
		padding: 0 .65rem !important;
	}
	.notariaat-header .creative-floating-header {
		margin-top: 0 !important;
		padding-top: .55rem !important;
		padding-bottom: .55rem !important;
		border-radius: var(--executive-radius-surface) !important;
	}
	.notariaat-header .wp-block-navigation__responsive-container-open {
		display: inline-flex !important; align-items: center; justify-content: center;
		min-width: 2.75rem; min-height: 2.75rem; padding: .55rem;
		border: 1px solid var(--wp--preset--color--border); border-radius: var(--executive-radius-control);
		background: var(--wp--preset--color--surface);
	}
	.notariaat-header .wp-block-navigation { position: relative; }
	.notariaat-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open {
		display: block !important;
		position: absolute;
		inset: auto;
		top: calc(100% + .35rem) !important;
		right: 0 !important;
		z-index: 1001;
		width: min(20rem, calc(100vw - 1.3rem));
		height: auto !important;
		max-height: calc(100dvh - 4.75rem);
		overflow: hidden;
		border: 2px solid var(--wp--preset--color--accent);
		border-radius: var(--executive-radius-surface);
		background: var(--wp--preset--color--surface-strong);
		box-shadow: 0 24px 60px -32px rgb(21 8 35 / 75%);
		-webkit-backdrop-filter: blur(22px) saturate(1.2);
		backdrop-filter: blur(22px) saturate(1.2);
	}
	.notariaat-header .wp-block-navigation__responsive-close,
	.notariaat-header .wp-block-navigation__responsive-dialog,
	.notariaat-header .wp-block-navigation__responsive-container-content {
		height: auto !important;
		min-height: 0 !important;
	}
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open::before {
		content: "";
		position: absolute;
		right: -3rem;
		top: -5rem;
		width: 11rem;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--wp--preset--color--accent);
		opacity: .92;
	}
	.notariaat-header .wp-block-navigation__responsive-dialog {
		position: relative;
		z-index: 1;
		min-height: 0;
		max-height: calc(100dvh - 4.75rem);
		padding: .65rem;
		overflow-y: auto;
	}
	.notariaat-header .wp-block-navigation__responsive-close {
		display: flex;
		justify-content: flex-end;
		margin: 0 0 .35rem;
	}
	.notariaat-header .wp-block-navigation__responsive-container-close {
		width: 2.5rem;
		height: 2.5rem;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 50%;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--surface-strong);
	}
	.notariaat-header .wp-block-navigation__responsive-container-content,
	.notariaat-header .wp-block-navigation__container {
		align-items: stretch;
		width: 100%;
		gap: .5rem;
	}
	.notariaat-header .wp-block-navigation__container { flex-direction: column; }
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle) {
		width: 100%;
		min-height: 3rem;
		padding: .8rem 1rem;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--text-on-strong) 18%, transparent);
		border-radius: var(--executive-radius-control);
		background: color-mix(in srgb, var(--wp--preset--color--surface) 8%, transparent);
		color: var(--wp--preset--color--text) !important;
	}
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open :is(
		.wp-block-navigation-item__label,
		.wp-block-navigation-submenu__toggle,
		.wp-block-navigation__submenu-container a,
		.wp-block-navigation__submenu-icon svg
	) {
		color: var(--wp--preset--color--text) !important;
		stroke: currentColor;
	}
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open .notariaat-nav-cta > .wp-block-navigation-item__content {
		border-color: transparent;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--text) !important;
	}
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static;
		width: 100% !important;
		min-width: 0;
		gap: .2rem;
		margin: .4rem 0 .25rem !important;
		padding: .35rem !important;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 82%, transparent) !important;
		border-radius: 1rem !important;
		background: color-mix(in srgb, var(--wp--preset--color--surface-alt) 48%, var(--wp--preset--color--surface)) !important;
		box-shadow: none !important;
		overflow: hidden;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		min-height: 2.6rem;
		padding: .65rem .8rem;
		border-color: transparent;
		border-radius: .7rem;
		background: transparent;
		color: var(--wp--preset--color--text) !important;
	}
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--surface));
		transform: translateX(.15rem);
	}
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		animation: executive-drawer-submenu-in .22s cubic-bezier(.22, .61, .36, 1) both;
	}
	.notariaat-header .wp-block-navigation__responsive-container.is-menu-open { animation: executive-mobile-drawer-in .2s ease-out; }
	.creative-home-hero__copy h1 { font-size: clamp(3.2rem,16vw,5.8rem) !important; }
	.creative-home-hero__visual { min-height: 34rem; }
	.creative-home-hero__image-main { inset: 6% 3% 10% 8%; }
	.creative-home-hero__image-small { right: 0; }
	.creative-services__grid:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained),
	.creative-process__grid:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) { grid-template-columns: 1fr; }
	.creative-process-card:nth-child(n) { transform: none; }
	/* Keep the team portraits as a compact, readable composition on small screens. */
	.creative-team__portraits:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: .75rem;
		min-height: 0;
		margin-top: .25rem;
	}
	.creative-team__portraits .wp-block-image:nth-child(n) { transform: none; }
	.creative-team__portraits .wp-block-image:nth-child(3) {
		grid-column: 1 / -1;
		width: calc(50% - .375rem);
		justify-self: center;
	}
	.creative-team__portraits img { display: block; }
}

@keyframes executive-mobile-drawer-in {
	from { opacity: 0; transform: translateY(-.5rem) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes executive-drawer-submenu-in {
	from { opacity: 0; transform: translateY(-.35rem); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
	.creative-home-hero__visual { min-height: 30rem; }
	.creative-home-hero__image-main img { min-height: 26rem; }
	.creative-home-hero__image-small { width: 7.5rem; }
	.creative-home-hero__float-card { width: 12rem; }
	.creative-team__portraits:not(.is-layout-flex):not(.is-layout-grid):not(.is-layout-constrained) { gap: .65rem; }
	.creative-final-cta__island { min-height: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
	.notariaat-header *, .creative-home *, .creative-section * { transition: none !important; animation: none !important; }
}

/* Block-style contract
---------------------------------------------------------------------------- */

/* The parent theme's section variations reference palette tokens that this
 * child theme does not expose. The matching child JSON files replace their
 * editor metadata; these rules also win over a pattern's preset background. */
:is(.wp-block-group, .wp-block-columns, .wp-block-column).is-style-section-1 {
	background-color: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--executive-radius-surface) !important;
	color: var(--wp--preset--color--text) !important;
}

:is(.wp-block-group, .wp-block-columns, .wp-block-column).is-style-section-2 {
	background-color: var(--wp--preset--color--surface-alt) !important;
	color: var(--wp--preset--color--text) !important;
}

:is(.wp-block-group, .wp-block-columns, .wp-block-column).is-style-section-3 {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary-contrast) !important;
	--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--background);
	--executive-button-text: var(--wp--preset--color--text);
	--executive-accent: var(--wp--preset--color--primary-contrast);
}

:is(.wp-block-group, .wp-block-columns, .wp-block-column).is-style-section-4 {
	background-color: var(--wp--preset--color--surface-strong) !important;
	color: var(--wp--preset--color--text-on-strong) !important;
	--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--background);
	--executive-button-text: var(--wp--preset--color--text);
	--executive-accent: var(--wp--preset--color--primary);
}

:is(.wp-block-group, .wp-block-columns, .wp-block-column).is-style-section-5 {
	background-color: var(--wp--preset--color--background) !important;
	border: 1px solid var(--wp--preset--color--border-strong) !important;
	color: var(--wp--preset--color--text) !important;
}

:is(.wp-block-group, .wp-block-column).is-style-card-surface {
	background-color: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--executive-radius-surface) !important;
	box-shadow: var(--executive-card-shadow) !important;
	color: var(--wp--preset--color--text) !important;
}

:is(.wp-block-group, .wp-block-column).is-style-plain-surface {
	background-color: var(--wp--preset--color--background) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--executive-radius-surface) !important;
	box-shadow: none !important;
}

:is(.is-style-section-dark, .is-style-section-3, .is-style-section-4) :is(h1, h2, h3, h4, h5, h6, .wp-block-heading):not(.has-text-color) {
	color: var(--executive-text) !important;
}

:is(.is-style-section-dark, .is-style-section-3, .is-style-section-4) :is(p, li, summary, .wp-block-post-excerpt):not(.has-text-color) {
	color: var(--executive-text-muted) !important;
}

:is(.is-style-section-dark, .is-style-section-3, .is-style-section-4) .is-style-eyebrow:not(.has-text-color) {
	color: var(--executive-accent) !important;
}

.is-style-section-accent :is(p, li, summary, .wp-block-post-excerpt):not(.has-text-color) {
	color: var(--wp--preset--color--text) !important;
}

:is(.wp-block-group, .wp-block-column).is-style-background-blur {
	background-color: color-mix(in srgb, var(--wp--preset--color--text-on-strong) 84%, transparent) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--text) 16%, transparent) !important;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

:is(.wp-block-group, .wp-block-column).is-style-column-box-shadow {
	box-shadow: 0 .75rem 1.8rem rgb(24 22 23 / 13%) !important;
}

.wp-block-button.is-style-button-brand .wp-block-button__link {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary-contrast) !important;
}

.wp-block-button.is-style-button-brand-alt .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary) !important;
	border-color: var(--wp--preset--color--secondary) !important;
	color: var(--wp--preset--color--secondary-contrast) !important;
}

.wp-block-button.is-style-button-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--surface-strong) !important;
	border-color: var(--wp--preset--color--surface-strong) !important;
	color: var(--wp--preset--color--text-on-strong) !important;
}

.wp-block-button.is-style-button-light .wp-block-button__link {
	background-color: var(--wp--preset--color--background) !important;
	border-color: var(--wp--preset--color--background) !important;
	color: var(--wp--preset--color--text) !important;
}

.wp-block-button.is-style-secondary-button .wp-block-button__link {
	background-color: var(--wp--preset--color--surface-alt) !important;
	border-color: var(--wp--preset--color--surface-alt) !important;
	color: var(--wp--preset--color--text) !important;
}

.wp-block-button.is-style-button-text .wp-block-button__link {
	padding-inline: 0 !important;
	background: transparent !important;
	border-color: transparent !important;
	color: var(--wp--preset--color--primary) !important;
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Shared article-card system
---------------------------------------------------------------------------- */

/* Query blocks are intentionally wide; only long-form reading copy belongs in
 * the content lane. Without this override core constrains a three-card grid to
 * 740px and turns every card into a narrow, uneven column. */
:is(.notariaat-related-articles, .notariaat-home-knowledge) .wp-block-query {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.notariaat-services-knowledge {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

:is(.notariaat-knowledge-grid, .notariaat-home-knowledge-grid) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	grid-auto-rows: 1fr;
	gap: clamp(1rem, 2vw, 1.75rem);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.notariaat-knowledge-grid, .notariaat-home-knowledge-grid) > li {
	display: flex;
	min-width: 0;
	height: 100%;
	margin: 0 !important;
	border: 0;
}

.notariaat-article-card-grid > li {
	display: flex;
	min-width: 0;
	height: 100%;
	margin: 0 !important;
}

.notariaat-article-card {
	display: flex !important;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	min-height: 100% !important;
	background-color: var(--executive-card-background) !important;
	border: var(--executive-card-border) !important;
	border-radius: var(--executive-radius-surface) !important;
	box-shadow: var(--executive-card-shadow) !important;
	overflow: hidden;
	-webkit-backdrop-filter: var(--executive-card-blur, none);
	backdrop-filter: var(--executive-card-blur, none);
}

.notariaat-article-card-main {
	display: flex !important;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	width: 100%;
}

.notariaat-article-card .wp-block-post-featured-image,
.notariaat-article-card .wp-block-post-featured-image > a,
.notariaat-article-card .wp-block-post-featured-image img {
	display: block;
	width: 100% !important;
	margin: 0 !important;
}

.notariaat-article-card .wp-block-post-featured-image {
	aspect-ratio: 4 / 3 !important;
	overflow: hidden;
}

.notariaat-article-card .wp-block-post-featured-image img {
	height: 100% !important;
	object-fit: cover;
}

.notariaat-article-card-copy {
	display: flex !important;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	width: 100%;
	padding-block: var(--wp--preset--spacing--medium);
}

.notariaat-article-card-copy > * {
	align-self: stretch;
	margin-inline: 0 !important;
	text-align: left;
}

.notariaat-article-card-copy .wp-block-post-terms {
	display: block;
	min-height: 1.6em;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.notariaat-article-card-copy .wp-block-post-title {
	display: -webkit-box;
	min-height: 3.3em;
	margin-top: var(--wp--preset--spacing--small);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--primary);
	line-height: 1.08;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.notariaat-article-card-copy .wp-block-post-excerpt,
.notariaat-article-card-copy .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	min-height: 4.5em;
	margin-top: var(--wp--preset--spacing--small);
	overflow: hidden;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.notariaat-article-card-copy .notariaat-article-card-link {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--medium);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.notariaat-article-card-meta {
	width: 100%;
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--medium);
}

.notariaat-article-card-meta .wp-block-separator {
	width: 100%;
}

.notariaat-team-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--small);
	margin-top: var(--wp--preset--spacing--large) !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.notariaat-team-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next, .page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: .85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--executive-radius-control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.notariaat-team-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
}

.notariaat-team-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink-inverse);
}

.notariaat-team-pagination a:hover {
	border-color: var(--wp--preset--color--brand);
	background: color-mix(in srgb, var(--wp--preset--color--brand) 10%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--ink);
}

@media (max-width: 480px) {
	.notariaat-team-pagination {
		align-items: stretch;
		gap: .65rem;
	}

	.notariaat-team-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
		flex: 1 1 calc(50% - .325rem);
	}

	.notariaat-team-pagination .wp-block-query-pagination-numbers {
		order: 3;
		flex-basis: 100%;
	}
}

@media (max-width: 900px) {
	:is(.notariaat-knowledge-grid, .notariaat-home-knowledge-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	:is(.notariaat-knowledge-grid, .notariaat-home-knowledge-grid) {
		grid-template-columns: 1fr;
	}

	.notariaat-article-card-copy .wp-block-post-title,
	.notariaat-article-card-copy .wp-block-post-excerpt,
	.notariaat-article-card-copy .wp-block-post-excerpt__excerpt {
		min-height: 0;
	}
}