/*
XMAD One — main stylesheet.

Also loaded as the block editor's style (see add_editor_style() in
inc/setup.php), so front end and backend look alike. Rules that target
template chrome (.site-header, .xmad-sticky-cta, etc.) simply match
nothing inside the editor canvas, since that markup isn't part of post
content — no separate editor.css needed.

Colours, type scale, and spacing values come from theme.json's
generated custom properties (--wp--preset--*) wherever possible, so the
palette/scale has one source of truth. This file adds layout, spacing,
and component rules theme.json can't express.

Organised mobile-first. Responsive overrides live next to the rule they
adjust rather than in one block at the end — easier to read one
component's full behaviour in one place. prefers-reduced-motion is
handled once, globally, in section 1.
*/

/* ---------------------------------------------------------------- *
 * 1. Base / root variables
 * ---------------------------------------------------------------- */

:root {
	/* Layout widths — mirror theme.json settings.layout so non-block
	   template chrome (header/footer/etc., built in later slices) can
	   reference the same content/wide measurements as Gutenberg blocks. */
	--xmad-width-content: var(--wp--style--global--content-size, 720px);
	--xmad-width-wide: var(--wp--style--global--wide-size, 1100px);
	--xmad-container: var(--xmad-width-wide);
	--xmad-gutter: clamp(1rem, 0.85rem + 0.75vw, 2rem);

	/* Inner gutter for the 1200px content wrapper used by Slice 2's
	   full-bleed sections (Trust Strip, Offer Cards) — clamps to exactly
	   20px at the 390px QA viewport and 64px at the 1440px one, matching
	   the approved prototype's inset. */
	--xmad-inset-gutter: clamp(1.25rem, 5vw, 4rem);

	/* Fluid section/component spacing — replaces fixed mobile/desktop
	   breakpoint pairs with a single value that scales continuously
	   between them (see section 4). */
	--xmad-space-section: clamp(2.5rem, 1.9rem + 2.5vw, 4.5rem);
	--xmad-space-component: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);

	/* Readable measure for body copy / long-form text blocks. */
	--xmad-measure: 60ch;

	/* Shape */
	--xmad-radius-sm: 4px;
	--xmad-radius: 8px;
	--xmad-radius-lg: 14px;

	/* Elevation — restrained, near-monochrome shadows (no colour tint). */
	--xmad-shadow-sm: 0 1px 2px rgba(15, 15, 18, 0.06);
	--xmad-shadow-md: 0 4px 12px rgba(15, 15, 18, 0.08);
	--xmad-shadow-lg: 0 12px 32px rgba(15, 15, 18, 0.12);

	/* Motion */
	--xmad-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--xmad-motion-fast: 120ms;
	--xmad-motion-base: 200ms;
	--xmad-transition: var(--xmad-motion-base) var(--xmad-ease);

	--xmad-sticky-cta-height: 64px;
}

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* A client pasting one long unbroken word/URL/SKU into any ordinary
   paragraph, list item, button label, or menu label (hero subtitle, an
   offer card, a testimonial quote, a FAQ answer, the footer, etc.) has
   no other break opportunity and would otherwise overflow its box and
   bleed into neighbouring content. This one inherited rule covers every
   text-bearing element in one place; .site-branding__title/__tagline
   and .site-footer__copyright additionally use the stronger
   overflow-wrap: anywhere where they sit in tight flex rows. */
body {
	overflow-wrap: break-word;
}

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

figure {
	margin: 0;
}

/* ---------------------------------------------------------------- *
 * 2. Accessibility helpers
 * ---------------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	clip: auto;
	width: auto;
	height: auto;
	overflow: visible;
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 10000;
	background: var(--wp--preset--color--dark, #18181b);
	color: var(--wp--preset--color--light, #ffffff);
	padding: 0.75em 1.25em;
	border-radius: var(--xmad-radius);
	text-decoration: none;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #0f766e);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * 3. Typography
 * ---------------------------------------------------------------- */

/*
Base font family/size/colour/line-height and heading font-weight/size
are already output globally by WordPress from theme.json — not
repeated here to avoid shipping the same declarations twice.
*/

p {
	margin: 0 0 1.25em;
}

a {
	text-underline-offset: 0.15em;
}

.xmad-section__intro {
	color: var(--wp--preset--color--muted);
	max-width: var(--xmad-measure);
}

/*
XMAD Typography Customizer overrides. Each rule only ever matches when
its body class is present, which only happens when a value differs from
the v0.1.0 default (see inc/customizer-style.php) — so a fresh install
with nothing customised outputs none of these classes and behaves
identically to before this section existed.

These reliably win against WordPress's own global-styles element rules
(h1, h2, body, etc.) without needing !important: core wraps those in
:where(), which always contributes zero specificity, so any ordinary
class+element selector here beats them regardless of stylesheet order.
*/

body.xmad-text-small {
	font-size: 0.9375rem;
}

body.xmad-text-large {
	font-size: 1.0625rem;
}

body.xmad-leading-compact {
	line-height: 1.4;
}

body.xmad-leading-relaxed {
	line-height: 1.8;
}

body.xmad-heading-weight-normal .wp-block-heading,
body.xmad-heading-weight-normal h1,
body.xmad-heading-weight-normal h2,
body.xmad-heading-weight-normal h3 {
	font-weight: 400;
}

body.xmad-heading-weight-medium .wp-block-heading,
body.xmad-heading-weight-medium h1,
body.xmad-heading-weight-medium h2,
body.xmad-heading-weight-medium h3 {
	font-weight: 600;
}

/* Scoped to XMAD's own section-title/hero classes, not bare h1/h2 —
   avoids resizing intentionally-small headings like the Trust Strip
   label, which sets its own explicit small font size. */
body.xmad-headings-compact .xmad-hero__title {
	font-size: 2rem;
}

body.xmad-headings-compact .xmad-section__title {
	font-size: 1.5rem;
}

body.xmad-headings-compact h3 {
	font-size: 1.125rem;
}

body.xmad-headings-bold .xmad-hero__title {
	font-size: 3rem;
}

body.xmad-headings-bold .xmad-section__title {
	font-size: 2rem;
}

body.xmad-headings-bold h3 {
	font-size: 1.375rem;
}

/* ---------------------------------------------------------------- *
 * 4. Layout wrappers
 * ---------------------------------------------------------------- */

.xmad-container {
	width: 100%;
	max-width: var(--xmad-container);
	margin-inline: auto;
	padding-inline: var(--xmad-gutter);
}

/*
Fluid gutter/section spacing: one clamp()-based value each (defined in
section 1) replaces the previous fixed mobile value + 782px breakpoint
override pair, scaling continuously between the same endpoints instead
of jumping at a single breakpoint.
*/
.xmad-hero .wp-block-cover__inner-container,
.xmad-trust-strip,
.xmad-section,
.xmad-content-gutter {
	padding-inline: var(--xmad-gutter);
}

.xmad-trust-strip,
.xmad-section {
	padding-block: var(--xmad-space-section);
}

.xmad-section__title {
	margin-block-end: var(--xmad-space-component);
}

/* ---------------------------------------------------------------- *
 * 5. Header
 * ---------------------------------------------------------------- */

/*
Burger-only architecture: there is no conventional horizontal desktop
nav anywhere in this theme. The same header structure (branding, one
optional CTA, one burger button) is used at every viewport — see
section 6 for the menu panel the burger controls. --xmad-z-header/
--xmad-z-menu-panel keep the header above the full-screen panel so the
burger (which toggles to a close affordance) stays reachable while the
panel is open.
*/

.site-header {
	position: relative;
	z-index: var(--xmad-z-header, 950);
	background-color: var(--xmad-header-bg, var(--wp--preset--color--light));
	color: var(--xmad-header-text, var(--wp--preset--color--dark));
}

.site-header--has-image {
	background-image: var(--xmad-header-bg-image, none);
	background-size: cover;
	background-position: center;
}

.site-header--sticky {
	position: sticky;
	top: 0;
}

.admin-bar .site-header--sticky {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header--sticky {
		top: 46px;
	}
}

/*
Transparent mode overlays the header on the first section/hero and stays
fixed to the viewport (rather than scrolling away with the hero) so the
burger stays reachable at any scroll position — matching the approved
xMAD One hero design (design/prototypes/homepage-v1/). A neutral
top-down scrim keeps branding/CTA/burger legible over arbitrary hero
imagery without depending on the hero's own colour choice; the Header
Text Colour Customizer control can still override text colour on top of
it. Once the page scrolls past roughly one viewport height,
assets/js/main.js adds .is-solid, swapping the scrim for a solid,
blurred backdrop so the header keeps working over whatever (lighter)
content follows the hero.
*/
.site-header--transparent {
	position: fixed;
	inset-inline: 0;
	top: 0;
	background-color: transparent;
	color: var(--xmad-header-text, var(--wp--preset--color--light));
	transition: background-color var(--xmad-transition), border-color var(--xmad-transition);
	border-bottom: 1px solid transparent;
}

.site-header--transparent::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(9, 9, 11, 0.45), rgba(9, 9, 11, 0));
	pointer-events: none;
	transition: opacity var(--xmad-transition);
}

.site-header--transparent.site-header--has-image::before {
	display: none;
}

.site-header--transparent.is-solid {
	background-color: rgba(255, 255, 255, 0.92);
	border-bottom-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--dark);
}

@supports (backdrop-filter: blur(1px)) {
	.site-header--transparent.is-solid {
		backdrop-filter: saturate(180%) blur(10px);
	}
}

.site-header--transparent.is-solid::before {
	opacity: 0;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	/* Give the identity and burger deliberate breathing room from the viewport edge. */
	padding-block: 1.5rem 1rem;
}

/* Burger position: markup order stays branding-then-actions; the "left"
   modifier just reverses the row, so adding a Customizer toggle later
   (if ever needed beyond the existing select control) requires no
   markup change. */
.site-header--burger-left .site-header__inner {
	flex-direction: row-reverse;
}

/*
Site identity. min-width: 0 is load-bearing here: flex items default to
a content-based min-width (roughly the size of their largest
unbreakable child — a wide logo image, in this case), which silently
defeats max-width:100% on the logo and lets it overflow at narrow
viewports instead of shrinking with the rest of the header row.
*/
.site-branding {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	min-width: 0;
	flex-shrink: 1;
}

.site-branding__title {
	margin: 0;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Smaller, secondary treatment when the title is shown alongside a
   logo rather than standing in for one. */
.site-branding__title--with-logo {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.site-branding__tagline {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	max-width: 100%;
	overflow-wrap: anywhere;
}

.site-branding__title a,
.custom-logo-link {
	color: inherit;
	text-decoration: none;
}

/*
Logo: fixed display height (client-adjustable via the Logo Display
Height Customizer control, --xmad-logo-height), width auto so the
browser derives it from the image's own intrinsic aspect ratio — never
stretched, and correct for wide, square or tall uploads alike.
max-width: 100% is the overflow guard for unusually wide logos, backed
by .site-branding's min-width: 0 above so it can actually take effect.
*/
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	max-width: 100%;
}

.custom-logo {
	display: block;
	height: var(--xmad-logo-height, 40px);
	width: auto;
	max-width: 100%;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* ---------------------------------------------------------------- *
 * 6. Burger + menu panel
 * ---------------------------------------------------------------- */

/*
Real <button aria-expanded aria-controls="xmad-menu-panel">, controlled
by assets/js/main.js (vanilla, no dependency). The panel itself is a
fixed full-screen overlay, present in the DOM (and so still crawlable)
at all times — opening/closing is an opacity/visibility/transform
transition driven by the .is-open class, not a display toggle, which is
what lets the transition run at all. Without JS the burger is inert;
that is an accepted trade-off of moving to a real ARIA disclosure
pattern (documented in the Slice 2 report).
*/

.xmad-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--xmad-radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

/* On the transparent hero header the light-theme border (above) is
   invisible against a dark image — match the approved prototype's
   restrained translucent white border instead. .is-solid (added by
   assets/js/main.js once the header stops overlaying the hero) swaps
   back to the light-theme border. */
.site-header--transparent .xmad-burger {
	border-color: rgba(255, 255, 255, 0.35);
}

.site-header--transparent.is-solid .xmad-burger {
	border-color: var(--wp--preset--color--border);
}

.xmad-burger__icon,
.xmad-burger__icon::before,
.xmad-burger__icon::after {
	display: block;
	width: 18px;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor;
	transition: transform var(--xmad-motion-base) var(--xmad-ease), opacity var(--xmad-motion-fast) var(--xmad-ease);
}

.xmad-burger__icon {
	position: relative;
}

.xmad-burger__icon::before,
.xmad-burger__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.xmad-burger__icon::before {
	top: -6.5px;
}

.xmad-burger__icon::after {
	top: 6.5px;
}

/* Subtle open state: bars form an X. Purely decorative state change —
   aria-expanded on the button is the actual accessible signal. */
.xmad-burger[aria-expanded="true"] .xmad-burger__icon {
	background: transparent;
}

.xmad-burger[aria-expanded="true"] .xmad-burger__icon::before {
	top: 0;
	transform: rotate(45deg);
}

.xmad-burger[aria-expanded="true"] .xmad-burger__icon::after {
	top: 0;
	transform: rotate(-45deg);
}

.xmad-burger:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.xmad-menu-panel {
	position: fixed;
	inset: 0;
	z-index: var(--xmad-z-menu-panel, 900);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background-color: var(--wp--preset--color--light);
	color: var(--wp--preset--color--dark);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--xmad-motion-base) var(--xmad-ease), transform var(--xmad-motion-base) var(--xmad-ease), visibility 0s linear var(--xmad-motion-base);
}

.xmad-menu-panel.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--xmad-motion-base) var(--xmad-ease), transform var(--xmad-motion-base) var(--xmad-ease);
}

/* Body scroll lock while the panel is open. Small and reversible: one
   class, one property. */
.xmad-menu-open {
	overflow: hidden;
}

.xmad-menu-panel__inner {
	width: 100%;
	max-width: var(--xmad-width-content);
	margin-inline: auto;
	padding-inline: var(--xmad-gutter);
	padding-block-start: calc(var(--xmad-space-section) + 3rem);
	padding-block-end: var(--xmad-space-section);
}

.xmad-menu-panel__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.xmad-menu-panel__list a {
	display: block;
	padding: 0.65em 0.1em;
	color: inherit;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.xmad-menu-panel__list a:hover,
.xmad-menu-panel__list a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.xmad-menu-panel__list .sub-menu {
	list-style: none;
	margin: 0.25rem 0 0.75rem 1rem;
	padding: 0;
}

.xmad-menu-panel__list .sub-menu a {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	padding-block: 0.4em;
}

@media (prefers-reduced-motion: reduce) {
	.xmad-burger__icon,
	.xmad-burger__icon::before,
	.xmad-burger__icon::after,
	.xmad-menu-panel {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------- *
 * 7. Buttons
 * ---------------------------------------------------------------- */

/*
Core Button block fill/outline styles come from theme.json. The rules
below style .xmad-btn / .xmad-cta-btn — the plain <a> markup built by
inc/helpers.php for the footer CTA and sticky bar, which aren't core
blocks and so aren't covered by theme.json's block styles.
*/

.xmad-btn,
.xmad-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.75em 1.5em;
	border-radius: var(--xmad-radius);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--xmad-transition), color var(--xmad-transition), border-color var(--xmad-transition);
}

.xmad-btn--fill,
.xmad-cta-btn {
	background-color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light);
}

.xmad-btn--fill:hover,
.xmad-cta-btn:hover {
	background-color: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--light);
}

.xmad-btn--outline {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.xmad-btn--outline:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light);
}

/* WhatsApp's brighter brand green (#25d366) gives white button text only
   ~2:1 contrast — well under WCAG AA. Their darker brand teal keeps the
   same recognisable identity while giving white text ~7.7:1 contrast. */
.xmad-cta-btn--whatsapp {
	background-color: #075e54;
	border-color: #075e54;
}

.xmad-cta-btn--whatsapp:hover {
	background-color: #054840;
	border-color: #054840;
}

/* ---------------------------------------------------------------- *
 * 8. Sections / patterns
 * ---------------------------------------------------------------- */

/*
Directional scrim, painted directly onto the Cover block's own
.wp-block-cover__background span (it already sits above the image, below
the content — see wp-block-cover__inner-container — so this just gives
it a gradient instead of the block's flat dim colour). dimRatio is set
to 0 in the pattern for exactly this reason: the block's own dim would
otherwise stack underneath and double-darken the image. Left-heavy and
bottom-heavy so a left-aligned, bottom-anchored headline reads clearly
against arbitrary photography without flattening the whole image.
*/
/*
The block editor gives this Cover a fixed inline min-height (from the
pattern's minHeight attribute) so it always has *some* height in the
canvas. Inline styles beat any non-!important stylesheet rule regardless
of selector specificity, so matching the approved prototype's viewport-
relative hero height requires !important here — there is no selector
trick that out-specifies an inline style. min-height is set twice
(vh, then dvh) as a fallback pair: browsers without dvh support simply
ignore the second, invalid-to-them declaration and keep the first.
*/
.xmad-hero {
	min-height: 100vh !important;
	min-height: 100dvh !important;
}

@media (max-width: 620px) {
	.xmad-hero {
		min-height: 92dvh !important;
	}
}

.xmad-hero .wp-block-cover__background {
	/* Core's .has-background-dim-0 rule (dimRatio 0, required above so
	   the block's own flat dim doesn't stack under this gradient) also
	   targets this exact element with the same two-class specificity as
	   this selector, zeroing opacity and silently hiding the gradient
	   below it. Browser QA on the live page confirmed opacity still
	   computed to 0 even with opacity declared here non-!important, so
	   !important is required to reliably win regardless of stylesheet
	   order. */
	opacity: 1 !important;
	/* Saved Gutenberg markup can carry its own inline background-color
	   (e.g. rgb(9,9,11) at full opacity) on this span from an older save.
	   That solid fill sits above the Cover image and below our gradient,
	   so it fully hides the photograph regardless of the alpha gradients
	   below. Overriding to transparent is compatibility scaffolding for
	   that older saved-block shape, not a design choice. */
	background-color: transparent !important;
	background-image:
		linear-gradient(100deg, rgba(9, 9, 11, 0.94) 0%, rgba(9, 9, 11, 0.82) 32%, rgba(9, 9, 11, 0.42) 62%, rgba(9, 9, 11, 0.14) 100%),
		linear-gradient(0deg, rgba(9, 9, 11, 0.65) 0%, rgba(9, 9, 11, 0.08) 45%);
}

/* Core's .wp-block-cover default centers content (align-items: center)
   unless the block carries the editor's is-position-bottom-left class.
   Saved markup here lacks that class, so bottom-left anchoring has to be
   forced independent of it. */
.xmad-hero.wp-block-cover {
	align-items: flex-end;
	justify-content: flex-start;
	/* Core's Cover block ships its own padding-inline on this element
	   (from the block's default/inherited spacing), which shifts the
	   inner container inward on top of that container's own
	   padding-inline below, doubling up the left offset seen against
	   the prototype. Zeroing it here leaves inner-container's own
	   padding-inline as the only inset. */
	padding: 0;
}

.xmad-hero .wp-block-cover__inner-container {
	width: 100%;
	/* Matches the approved prototype's .hero-content composition
	   (max-width 1200px, centered, clamp(20px,5vw,64px) inline padding)
	   rather than the site's shared --xmad-width-wide/--xmad-gutter
	   tokens, which resolve narrower and produced the left-edge offset
	   mismatch against the prototype. */
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 64px);
	padding-block-end: clamp(4rem, 9vw, 7.5rem);
}

@media (max-width: 620px) {
	.xmad-hero .wp-block-cover__inner-container {
		padding-block-end: 56px;
	}
}

/*
Core ships a default color rule for text inside a Cover block's inner
container (`.wp-block-cover .wp-block-cover__inner-container <el>`,
two ancestor classes + the element) that outranks a single custom class
like .xmad-hero__eyebrow or even a color preset class like
.has-accent-color. Browser QA confirmed the eyebrow, title/subtitle wrap
and secondary CTA were all still resolving to core's default text
treatment for exactly this reason. Re-scoping each rule below through
.xmad-hero .wp-block-cover__inner-container gives three ancestor/own
classes, which out-specifies core's rule without needing !important.
*/
.xmad-hero .wp-block-cover__inner-container .xmad-hero__eyebrow {
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	/* Derived from the editable accent (not a hardcoded brand colour):
	   lightened toward white so it stays readable against the dark hero
	   scrim, mirroring the prototype's accent-on-dark eyebrow treatment. */
	/* !important: WordPress's .has-light-color preset utility ships with
	   !important, which otherwise beats this rule regardless of specificity
	   on content saved with that class. */
	color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, white) !important;
}

.xmad-hero .wp-block-cover__inner-container .xmad-hero__title {
	/* Matches the approved prototype's --fs-display exactly; the block's
	   own "xxx-large" size preset tops out at 3.75rem (60px), well short
	   of this clamp's 5rem (80px) ceiling. */
	/* !important: WordPress's .has-xxx-large-font-size preset utility ships
	   with !important, which otherwise beats this rule regardless of
	   specificity on content saved with that class. */
	font-size: clamp(2.75rem, 5vw + 1rem, 5rem) !important;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.03em;
	max-width: 14ch;
	margin: 0 0 24px;
}

.xmad-hero .wp-block-cover__inner-container .xmad-hero__subtitle {
	/* Matches the prototype's --fs-lead exactly, including its 18px
	   (1.125rem) floor — the block's "large" size preset was resolving
	   larger on desktop and had no comparable mobile floor. */
	/* !important: WordPress's .has-large-font-size preset utility ships
	   with !important, which otherwise beats this rule regardless of
	   specificity on content saved with that class. */
	font-size: clamp(1.125rem, 0.9vw + 0.9rem, 1.375rem) !important;
	margin: 0 0 36px;
	max-width: 38ch;
	opacity: 0.86;
}

@media (max-width: 620px) {
	.xmad-hero .wp-block-cover__inner-container .xmad-hero__title {
		max-width: 11ch;
	}

	.xmad-hero .wp-block-cover__inner-container .xmad-hero__subtitle {
		max-width: 30ch;
	}
}

/* Markup keeps .xmad-hero__actions and .xmad-hero__secondary-cta as
   separate sibling blocks (button wrapper, then a paragraph), so there's
   no shared flex parent available to lay them out as one row. Making
   both inline-flex + vertical-align:middle puts them on the same line
   like adjacent inline content, matching the prototype's single CTA row
   without changing the saved block structure.
   Scoped through .xmad-hero .wp-block-cover__inner-container: a bare
   .xmad-hero__actions loses to core's .wp-block-buttons display:flex
   rule (two ancestor/own classes there vs. one here), which left the
   secondary CTA wrapping onto its own row. */
.xmad-hero .wp-block-cover__inner-container .xmad-hero__actions {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 0 28px 0 0;
}

/* Hero's one filled CTA uses the accent fill directly (per DESIGN.md
   §4.1/§4.6 — accent is the site's sole interactive signal), overriding
   the global button style's --primary (near-black) fill for this button
   only. Scoped to the hero so every other button on the page keeps the
   default primary fill. */
.xmad-hero__actions .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	/* Prototype primary CTA sizing; saved markup was resolving to a much
	   larger inherited font-size/weight and Core's default button
	   padding, producing an oversized pill against the prototype. */
	padding: 16px 30px;
	font-size: 16px;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: 8px;
}

.xmad-hero__actions .wp-block-button__link:hover,
.xmad-hero__actions .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}

.xmad-hero .wp-block-cover__inner-container .xmad-hero__secondary-cta {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 0;
}

@media (max-width: 620px) {
	.xmad-hero .wp-block-cover__inner-container .xmad-hero__actions {
		display: flex;
		margin: 0 0 16px 0;
	}

	.xmad-hero .wp-block-cover__inner-container .xmad-hero__secondary-cta {
		display: block;
		margin: 0;
	}
}

/*
Re-scoped through .xmad-hero .wp-block-cover__inner-container for the
same reason as the eyebrow/title/subtitle above: core's default cover
text-color rule otherwise wins over a plain .xmad-hero__secondary-cta a
selector and the link renders white. The secondary CTA is a signal
link, not body copy, so it should read as accent by default rather than
white — same lightened-accent treatment as the eyebrow for legibility
on the dark hero scrim.
*/
.xmad-hero .wp-block-cover__inner-container .xmad-hero__secondary-cta a {
	display: inline-flex;
	align-items: center;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, white);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	line-height: 24px;
	padding: 13px 4px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--xmad-transition);
}

.xmad-hero .wp-block-cover__inner-container .xmad-hero__secondary-cta a:hover,
.xmad-hero .wp-block-cover__inner-container .xmad-hero__secondary-cta a:focus-visible {
	border-bottom-color: currentColor;
}

/*
Compact rhythm deliberately overrides the shared .xmad-trust-strip,
.xmad-section padding-block rule in section 4 — this strip sits directly
under the hero and reads as a quiet transition band, not a full section,
matching the approved prototype's .trust (clamp(28px,4vw,40px)) rather
than the standard section rhythm.
*/
/*
Live-vs-prototype QA (Pass 02) found the WordPress "constrained" layout's
own 1200px centering left this section's actual content sitting flush
against that 1200px box with no further inset, while the approved
prototype insets its content a further 64px/20px inside that box. The
outer group keeps zero inline padding and zero block-gap margin (both of
which the block editor adds by default) and .xmad-trust-strip__row itself
becomes the 1200px border-box wrapper carrying the real inset, via
--xmad-inset-gutter — see the matching .xmad-offers__inner treatment below.
*/
.xmad-trust-strip {
	margin-block-start: 0;
	padding-block: clamp(28px, 4vw, 40px);
	padding-inline: 0;
}

.xmad-trust-strip__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--xmad-inset-gutter);
	box-sizing: border-box;
}

.xmad-trust-strip__line {
	flex: none;
	margin: 0;
	/* Match the section-eyebrow language used throughout the page. */
	font-size: 12px !important;
	line-height: 19.2px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent) !important;
}

.xmad-trust-strip__items {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.75rem;
	font-size: 15px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.xmad-trust-strip__items li {
	position: relative;
	padding-inline-start: 1rem;
}

.xmad-trust-strip__items li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent);
}

@media (max-width: 620px) {
	.xmad-trust-strip__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.xmad-trust-strip__items {
		gap: 1rem;
	}
}

/* LEGACY COMPAT: pages saved before the Slice 2 trust-strip redesign
   still contain the old "Why Choose Us" heading (.xmad-trust-strip__label)
   and chip-style reassurance points (.xmad-trust-strip__item), both
   removed from the current pattern. Restoring their original rules here
   keeps those existing blocks readable instead of rendering unstyled. */
.xmad-trust-strip__label {
	text-align: center;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-block-end: 1rem;
}

.xmad-trust-strip__item {
	margin: 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.5em 1.1em;
	background: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--xmad-radius-lg);
}

/* ---------------------------------------------------------------- *
 * 9. Offer / features columns, testimonial cards
 * ---------------------------------------------------------------- */

/*
Editorial columns, not cards — per the approved prototype
(design/prototypes/homepage-v1/), which deliberately drops the bordered/
shadowed card grammar this section used previously. Numbered columns
separated by a hairline (top rule + vertical rules between columns on
desktop; horizontal rules only once the grid collapses to one column
below 900px) rather than boxed surfaces.
*/
/*
Live-vs-prototype QA (Pass 02): the outer group keeps zero inline padding
and zero block-gap margin (both block-editor defaults) and the section's
own padding-block replaces the shared .xmad-section rhythm with the
prototype's taller clamp. backgroundColor:"light" on the pattern block
already makes this section opaque in the editor; the color declaration
here is a safety net for any saved content missing that attribute.
*/
.xmad-offers {
	margin-block-start: 0;
	padding-inline: 0;
	padding-block: clamp(4.5rem, 9vw, 8rem);
	background-color: var(--wp--preset--color--light);
}

/*
.xmad-offers__inner is the 1200px border-box wrapper carrying the real
content inset (--xmad-inset-gutter), matching .xmad-trust-strip__row —
WordPress's own "constrained" layout only centers a bare 1200px box with
no further inset, which is 64px/20px narrower than the prototype.
*/
.xmad-offers__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--xmad-inset-gutter);
	box-sizing: border-box;
}

.xmad-offers__head {
	max-width: 60ch;
	font-size: 17px;
	margin-block-end: clamp(2.5rem, 6vw, 4rem);
}

.xmad-offers__eyebrow {
	margin: 0 0 0.75rem;
	/* !important needed: WP core's .has-small-font-size utility (present in markup) also carries !important and would otherwise win. */
	font-size: 12px !important;
	line-height: 19.2px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
}

.xmad-offers__title {
	margin: 0;
	font-size: clamp(2rem, 2.4vw + 1.2rem, 2.75rem);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.02em;
}

/*
Grid, not flex, for the same reason as the testimonials grid below:
grid-template-columns is recalculated from the current child count on
every layout, so it's immune to the Columns block's own per-column
flex-basis inline styles left over from a previously different child
count. Chained onto .wp-block-columns (rather than the bare .xmad-offers__grid
class WordPress core also targets with its own display:flex rule) so this
reliably wins on specificity instead of racing core's rule on load order.
*/
.xmad-offers .xmad-offers__grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.xmad-offers__grid > .wp-block-column {
	min-width: 0;
	width: auto;
	padding-block-start: clamp(2rem, 3.4vw, 2.75rem);
	padding-inline-start: clamp(1.25rem, 2.6vw, 2.25rem);
	padding-inline-end: clamp(1.25rem, 2.6vw, 2.25rem);
	border-inline-start: 1px solid var(--wp--preset--color--border);
}

.xmad-offers__grid > .wp-block-column:first-child {
	border-inline-start: none;
	padding-inline-start: 0;
}

.xmad-offer-col__number {
	margin: 0 0 1.25rem;
	/* !important needed: WP core's .has-small-font-size utility (present in markup) also carries !important and would otherwise win. */
	font-size: 15px !important;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
}

.xmad-offer-col__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.375rem, 1vw + 1.1rem, 1.625rem);
	line-height: 1.25;
	font-weight: 600;
}

.xmad-offer-col__text {
	margin: 0 0 1.25rem;
	font-size: 17px;
	line-height: 27.2px;
}

.xmad-offer-col__link {
	margin: 0;
}

.xmad-offer-col__link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	line-height: 24px;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.xmad-offer-col__link a:hover,
.xmad-offer-col__link a:focus-visible {
	border-block-end-color: currentColor;
}

@media (max-width: 900px) {
	.xmad-offers .xmad-offers__grid.wp-block-columns {
		grid-template-columns: 1fr;
		border-block-start: none;
	}

	.xmad-offers__grid > .wp-block-column {
		border-inline-start: none;
		padding-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--border);
		padding-block-start: 1.75rem;
	}

	.xmad-offers__grid > .wp-block-column:first-child {
		border-block-start: none;
		padding-block-start: 0;
	}
}

/* LEGACY COMPAT: pages saved before the Slice 2 offer-cards redesign
   still contain the old boxed .xmad-offer-card markup (image + content +
   button), not the new .xmad-offer-col editorial columns. .xmad-offers__grid
   now targets any .wp-block-column child with hairline-divider borders/
   padding meant for the new columns; cancel that for old cards and restore
   their original bordered/shadowed card look and spacing. */
.xmad-offers__grid > .xmad-offer-card {
	border-inline-start: none;
	border-block-start: none;
	padding-inline-start: 0;
	padding-inline-end: 0;
	padding-block-start: 0;
	margin-block-start: 1.25rem;
	margin-inline-start: 1.25rem;
}

.xmad-offers__grid > .xmad-offer-card:first-child {
	margin-inline-start: 0;
}

.xmad-offer-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--xmad-radius);
	box-shadow: var(--xmad-shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.xmad-offer-card__image {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.xmad-offer-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.xmad-offer-card__content {
	padding-block: 1rem;
	padding-inline: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.xmad-offer-card__content .wp-block-buttons {
	margin-top: auto;
}

.xmad-offer-card__title {
	margin-block-end: 0.5rem;
}

.xmad-offer-card__text {
	color: var(--wp--preset--color--muted);
	margin-block-end: 1rem;
}

@media (min-width: 782px) {
	.xmad-offer-card__content {
		padding-block: 1.25rem;
	}
}

/*
Editorial / Why it works — soft, asymmetric split, no card chrome
(DESIGN.md §1.5 / prototype .editorial). Same full-bleed-section +
1200px inset-gutter wrapper as Trust Strip/Offer Cards (Slice 2) — see
.xmad-offers__inner above for why the inner wrapper carries the real
inset instead of relying on the "constrained" layout's bare 1200px box.
*/
.xmad-editorial {
	margin-block-start: 0;
	padding-inline: 0;
	padding-block: clamp(5rem, 10vw, 8.75rem);
	background-color: var(--wp--preset--color--soft);
}

.xmad-editorial__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--xmad-inset-gutter);
	box-sizing: border-box;
}

/*
Grid, not flex, so the 0.9fr/1.1fr asymmetry can't be overridden by the
Columns block's own per-column flex-basis inline styles — same reasoning
as .xmad-offers__grid above.
*/
.xmad-editorial .xmad-editorial__grid.wp-block-columns {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.xmad-editorial__text,
.xmad-editorial__aside {
	min-width: 0;
}

.xmad-editorial__eyebrow {
	margin: 0 0 12px;
	/* !important needed: WP core's .has-small-font-size utility (present in markup) also carries !important and would otherwise win. */
	font-size: 12px !important;
	line-height: 19.2px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
}

.xmad-editorial__statement {
	margin: 0;
	font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--dark);
}

.xmad-editorial__aside {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* Overrides the shared is-style-xmad-portrait aspect-ratio (3/4) with
   the 4/5 crop this composition calls for — kept scoped to this section
   rather than changing the shared style variant used elsewhere. Scoped
   under .xmad-editorial (rather than !important) so it outranks the
   later .wp-block-image.is-style-xmad-portrait rule on specificity. */
.xmad-editorial .wp-block-image.xmad-editorial__image {
	aspect-ratio: 4 / 5;
}

.xmad-editorial__stat {
	gap: 16px;
	/* Road-test feedback: baseline alignment left the detail copy floating too low. */
	align-items: flex-start;
	margin-top: 0;
}

.xmad-editorial__stat-lead {
	margin: 0;
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent);
}

.xmad-editorial__stat-text {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
	max-width: 22ch;
}

@media (max-width: 900px) {
	.xmad-editorial .xmad-editorial__grid.wp-block-columns {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.xmad-editorial .wp-block-image.xmad-editorial__image {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 620px) {
	.xmad-editorial__statement {
		font-size: clamp(1.5rem, 6vw, 2rem);
	}
}

/*
Testimonials — dark, single-quote moment. The section intentionally has
no card chrome; only one editable quote is visible at a time.
*/
.xmad-testimonials {
	margin-block-start: 0;
	padding-inline: 0;
	padding-block: clamp(90px, 11vw, 150px);
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--light);
}

.xmad-testimonials > .xmad-testimonials__inner {
	width: 100%;
	max-width: 760px !important;
	margin-inline: auto;
	padding-inline: var(--xmad-inset-gutter);
	box-sizing: border-box;
	text-align: center;
}

.xmad-testimonials__label {
	margin: 0 0 28px;
	font-size: 12px !important;
	line-height: 19.2px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, white) !important;
}

.xmad-testimonial {
	display: none;
	margin-block-start: 0;
}

.xmad-testimonial.is-active {
	display: block;
}

.xmad-testimonial__quote {
	margin: 0 0 36px;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--light);
}

.xmad-testimonial__quote p {
	margin: 0;
	font-size: clamp(2rem, 2.4vw + 1.2rem, 2.75rem);
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.015em;
	font-style: normal;
}

.xmad-testimonial__attribution {
	margin-block-start: 0;
	gap: 14px;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.xmad-testimonial__mark {
	width: 36px;
	height: 36px;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--light) 18%, transparent);
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	color: var(--wp--preset--color--accent);
	font-size: 1.1rem;
	line-height: 1;
}

.xmad-testimonial__person {
	margin-block-start: 0;
}

.xmad-testimonial__name,
.xmad-testimonial__role {
	margin: 0;
}

.xmad-testimonial__name {
	font-size: 17px;
	line-height: 27.2px;
	font-weight: 600;
	color: var(--wp--preset--color--light);
}

.xmad-testimonial__role {
	font-size: 15px;
	line-height: 24px;
	color: color-mix(in srgb, var(--wp--preset--color--light) 62%, transparent);
}

.xmad-testimonials__dots.wp-block-buttons {
	margin-block-start: 44px;
	gap: 10px;
	justify-content: center;
}

.xmad-testimonials__dots .wp-block-button {
	margin: 0;
}

.xmad-testimonial-dot .wp-block-button__link {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}

.xmad-testimonial-dot .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--wp--preset--color--light) 18%, transparent);
	transform: translate(-50%, -50%);
}

.xmad-testimonial-dot.is-active .wp-block-button__link::after,
.xmad-testimonial-dot .wp-block-button__link[aria-current="true"]::after {
	background: var(--wp--preset--color--accent);
}

.xmad-testimonial-dot .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--light);
	outline-offset: -5px;
}

/* In Gutenberg both quotes must remain visible/editable. The front-end
   switcher is presentation only, never an editor-content lockout. */
.editor-styles-wrapper .xmad-testimonial {
	display: block;
}

.editor-styles-wrapper .xmad-testimonial + .xmad-testimonial {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--light) 18%, transparent);
}

.editor-styles-wrapper .xmad-testimonials__dots {
	display: none;
}

@media (max-width: 620px) {
	.xmad-testimonial__quote p {
		font-size: clamp(1.375rem, 5vw, 1.75rem);
	}
}

/* ---------------------------------------------------------------- *
 * 10. Images / galleries
 * ---------------------------------------------------------------- */

/*
Core's Columns/Gallery/Media & Text blocks already handle their own
responsive stacking and column collapsing — not duplicated here.
*/

/*
Native image-shape choices, available on any core Image block via its
own Styles panel (registered in inc/setup.php) — not specific to any
one pattern. Aspect-ratio + overflow on the figure, object-fit on
the img, matching the same pattern used by Offer Cards/Gallery.
*/
.wp-block-image.is-style-xmad-square,
.wp-block-image.is-style-xmad-landscape,
.wp-block-image.is-style-xmad-portrait {
	margin: 0;
	overflow: hidden;
	border-radius: var(--xmad-radius);
}

.wp-block-image.is-style-xmad-square img,
.wp-block-image.is-style-xmad-landscape img,
.wp-block-image.is-style-xmad-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-image.is-style-xmad-square {
	aspect-ratio: 1 / 1;
}

.wp-block-image.is-style-xmad-landscape {
	aspect-ratio: 16 / 9;
}

.wp-block-image.is-style-xmad-portrait {
	aspect-ratio: 3 / 4;
}

/*
Signature full-bleed gallery band — the one place on the page imagery is
allowed to dominate the frame with zero card chrome (DESIGN.md §4.8,
XMAD_ONE_VISUAL_COMPOSITION.md §4). One dominant left image, a two-image
middle stack, and one tall right image, separated only by hairline seams —
never card gaps, borders, or radius.
*/
.xmad-gallery {
	margin-block-start: 0;
	padding-block: 0;
}

.xmad-gallery__band {
	display: grid;
	grid-template-columns: 1.4fr 0.9fr 1fr;
	gap: 3px;
	height: clamp(420px, 52vw, 640px);
}

.xmad-gallery__band > *,
.xmad-gallery__stack > * {
	margin: 0;
}

.xmad-gallery__cell,
.xmad-gallery__stack {
	height: 100%;
	overflow: hidden;
}

.xmad-gallery__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.xmad-gallery__stack {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 3px;
}

.xmad-gallery__stack .xmad-gallery__cell {
	min-height: 0;
}

@media (max-width: 900px) {
	.xmad-gallery__band {
		height: auto;
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}

	.xmad-gallery__cell--large {
		grid-row: span 2;
		height: auto;
	}

	.xmad-gallery__stack {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		/* Keep the two small mobile images as one continuous band. */
		gap: 0;
	}
}

/*
Native WP caption markup (figcaption, plus the classic-editor
.wp-caption-text fallback) otherwise inherits core block-library's own
hardcoded caption colour rather than this theme's own muted-text token —
re-pointing it to the existing token keeps captions in step with any
future palette change instead of silently drifting from it.
*/
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-caption-text {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
An image inside one of the opt-in xmad-* shape styles or the gallery
grid sits inside a figure with overflow:hidden (so the crop reads as a
clean edge, not a stretched/distorted one). If an editor links that
image, the global :focus-visible ring (outline-offset: 2px, see section
2) draws outside the image's own box and gets clipped by that
overflow:hidden ancestor — invisible keyboard focus. Flipping the offset
inward only in these specific overflow-hidden contexts keeps the ring
visible without touching the global rule everywhere else.
*/
.wp-block-image.is-style-xmad-square a:focus-visible,
.wp-block-image.is-style-xmad-landscape a:focus-visible,
.wp-block-image.is-style-xmad-portrait a:focus-visible,
.xmad-gallery__cell a:focus-visible,
.xmad-offer-card__image a:focus-visible {
	outline-offset: -3px;
}

/* ---------------------------------------------------------------- *
 * 10b. Location / contact
 * ---------------------------------------------------------------- */

/*
Soft, practical split section from the approved homepage composition.
The map remains a plain Custom HTML slot so a real Google Maps iframe can
be pasted without a plugin; the surrounding layout stays native Gutenberg.
*/
.xmad-location {
	margin-block-start: 0;
	padding-block: clamp(80px, 10vw, 130px);
	padding-inline: 0;
	background: var(--wp--preset--color--soft);
}

.xmad-location > .xmad-location__inner {
	width: 100%;
	max-width: 1200px !important;
	margin-inline: auto;
	padding-inline: var(--xmad-inset-gutter);
}

.xmad-location__eyebrow {
	margin: 0 0 12px;
	font-size: 0.75rem !important;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.xmad-location__title {
	margin: 0 0 clamp(32px, 5vw, 48px);
	font-size: clamp(2rem, 2.4vw + 1.2rem, 2.75rem);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.02em;
}

.xmad-location__grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(32px, 5vw, 56px);
	align-items: stretch;
	margin-block-start: 0;
}

.xmad-location__grid > *,
.xmad-location__info > *,
.xmad-location__item > * {
	margin-block-start: 0;
}

.xmad-location__map {
	position: relative;
	min-width: 0;
	min-height: 340px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: #ebebee;
}

.xmad-map-embed,
.xmad-map-placeholder {
	position: absolute;
	inset: 0;
}

.xmad-map-placeholder {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background:
		linear-gradient(var(--wp--preset--color--border) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, var(--wp--preset--color--border) 1px, transparent 1px) 0 0 / 32px 32px,
		#ebebee;
}

.xmad-map-pin {
	position: absolute;
	top: 44%;
	left: 52%;
	width: 16px;
	height: 16px;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
	transform: translate(-50%, -50%);
}

.xmad-map-embed__hint {
	margin: 0 20px 18px;
	padding: 5px 9px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--wp--preset--color--light) 90%, transparent);
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.xmad-location__map iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	border: 0;
}

.xmad-location__info {
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.xmad-location__item p {
	margin: 0;
}

.xmad-location__label {
	margin-bottom: 4px !important;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.xmad-location__link {
	color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.xmad-location__cta {
	margin-top: 0;
}

.xmad-location__info > .wp-block-buttons {
	margin-top: 4px;
}

.xmad-location__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
}

@media (max-width: 900px) {
	.xmad-location__grid {
		grid-template-columns: 1fr;
	}

	.xmad-location__map {
		min-height: 340px;
	}
}

/* ---------------------------------------------------------------- *
 * 11. FAQ / details
 * ---------------------------------------------------------------- */

/*
FAQ is intentionally quieter than the surrounding feature sections: a
narrow reading measure, one heading, and native Details disclosures split
only by hairline rules. The inner wrapper carries the prototype's
64px/20px responsive inset while the outer section remains full bleed.
*/
.xmad-faq {
	margin-block-start: 0;
	padding-block: clamp(72px, 9vw, 120px);
	padding-inline: 0;
	background: var(--wp--preset--color--light);
}

.xmad-faq .xmad-faq__inner {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	padding-inline: var(--xmad-inset-gutter);
	box-sizing: border-box;
}

.xmad-faq__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 19.2px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.xmad-faq__title {
	margin: 0 0 clamp(32px, 5vw, 48px);
	font-size: clamp(2rem, 2.4vw + 1.2rem, 2.75rem);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--dark);
}

.xmad-faq__list {
	margin-block-start: 0;
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.xmad-faq .xmad-faq__item {
	margin-block-start: 0;
	padding-block: 20px;
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.xmad-faq__item summary {
	cursor: pointer;
	font-size: clamp(1.125rem, 0.9vw + 0.9rem, 1.375rem);
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.xmad-faq__item summary::-webkit-details-marker {
	display: none;
}

.xmad-faq__item summary::after {
	content: "+";
	color: var(--wp--preset--color--accent);
	font-size: 1.4rem;
	font-weight: 400;
	margin-inline-start: 16px;
	flex-shrink: 0;
}

.xmad-faq__item[open] summary::after {
	content: "\2212";
}

.xmad-faq__item p {
	margin: 14px 0 0;
	max-width: 56ch;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- *
 * 12. Footer
 * ---------------------------------------------------------------- */

/*
The footer keeps all of its existing WordPress data sources (site identity,
footer menu, shared contact settings, optional CTA and editable copyright)
but presents them in the approved dark editorial composition. PHP adds a
column-count class so partially configured sites still lay out deliberately
instead of leaving empty fixed tracks.
*/
.site-footer {
	padding-block-start: clamp(64px, 8vw, 96px);
	background-color: var(--xmad-footer-bg, var(--wp--preset--color--primary-dark));
	color: var(--xmad-footer-text, var(--wp--preset--color--light));
	font-size: 1.0625rem;
	line-height: 1.6;
}

.site-footer a {
	color: inherit;
}

.site-footer .site-footer__main,
.site-footer .site-footer__bottom-inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--xmad-inset-gutter);
}

.site-footer__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-block: 0 clamp(48px, 6vw, 72px);
	border-block-end: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

@media (min-width: 621px) {
	.site-footer__main:not(.site-footer__main--cols-1) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 40px;
	}
}

@media (min-width: 901px) {
	.site-footer__main.site-footer__main--cols-2 {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

	.site-footer__main.site-footer__main--cols-3 {
		grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	}

	.site-footer__main.site-footer__main--cols-4 {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	}
}

.site-footer__col {
	min-width: 0;
}

.site-footer__logo .custom-logo {
	height: var(--xmad-logo-height, 40px);
	width: auto;
	max-width: min(100%, 220px);
}

.site-footer__business {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.site-footer__tagline {
	margin: 14px 0 0;
	max-width: 32ch;
	font-size: 0.9375rem;
	line-height: 1.7rem;
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.site-footer__col-heading {
	margin: 0 0 16px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.site-footer__nav-list,
.site-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__nav-list li {
	margin: 0;
}

.site-footer__nav-list a,
.xmad-footer-contact-link {
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color var(--xmad-transition);
}

.site-footer__nav-list a {
	line-height: 1.6;
}

.xmad-footer-contact-link {
	line-height: 1.7rem;
}

.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible,
.xmad-footer-contact-link:hover,
.xmad-footer-contact-link:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.site-footer__col--cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.xmad-footer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color var(--xmad-transition), border-color var(--xmad-transition), color var(--xmad-transition);
}

.xmad-footer__cta--fill {
	background: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

.xmad-footer__cta--fill:hover,
.xmad-footer__cta--fill:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 84%, black);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 84%, black);
	color: var(--wp--preset--color--accent-contrast);
}

.xmad-footer__cta--outline {
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	color: inherit;
}

.xmad-footer__cta--outline:hover,
.xmad-footer__cta--outline:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.site-footer__bottom {
	border: 0;
}

.site-footer__bottom-inner {
	padding-block: 24px;
}

.site-footer__copyright {
	margin: 0;
	max-width: 100%;
	font-size: 0.75rem;
	line-height: 1.6;
	color: color-mix(in srgb, currentColor 62%, transparent);
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- *
 * 13. Sticky mobile CTA bar
 * ---------------------------------------------------------------- */

.xmad-sticky-cta {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 9999;
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem;
	padding-block-end: max(0.5rem, env(safe-area-inset-bottom));
	background-color: var(--wp--preset--color--light);
	border-block-start: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -2px 8px rgba(15, 15, 18, 0.08);
}

.xmad-sticky-cta .xmad-cta-btn {
	flex: 1 1 0;
	min-height: 48px;
	font-size: 0.9rem;
}

@media (min-width: 900px) {
	.xmad-sticky-cta {
		display: none;
	}
}

/* Reserves space at the bottom of the page so the fixed bar never
   covers the last section's content or the footer. Only applied when
   the bar will actually render — see xmad_one_sticky_cta_bar_will_render()
   in inc/helpers.php, used by header.php's body_class(). */
.has-xmad-sticky-cta {
	padding-block-end: calc(var(--xmad-sticky-cta-height) + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
	.has-xmad-sticky-cta {
		padding-block-end: 0;
	}
}

/* ---------------------------------------------------------------- *
 * 14. Responsive enhancements
 * ---------------------------------------------------------------- */

/*
Breakpoint-specific overrides live inline with each component above
(sections 5-13) rather than repeated here, so one component's full
mobile-to-desktop behaviour reads in one place. This section is left
as a marker for any future global, cross-component breakpoint rule.
*/

/* ---------------------------------------------------------------- *
 * 15. Print
 * ---------------------------------------------------------------- */

@media print {
	.xmad-sticky-cta,
	.skip-link,
	.xmad-burger,
	.xmad-menu-panel {
		display: none !important;
	}

	.site-header,
	.site-footer {
		background: none !important;
		color: #000 !important;
	}
}

/* ---------------------------------------------------------------- *
 * 13. Final contact CTA
 * ---------------------------------------------------------------- */

/*
The closing CTA is intentionally quieter than the older full-width dark
banner: a light page section containing one centred soft panel. It echoes
the approved prototype's lifted close while keeping all three pieces of
content as ordinary editable Gutenberg blocks.
*/
.xmad-contact-cta {
	margin-block-start: 0;
	padding-block: clamp(56px, 7vw, 96px);
	padding-inline: var(--xmad-inset-gutter);
	background: var(--wp--preset--color--light);
}

.xmad-contact-cta > .xmad-contact-cta__panel {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(48px, 7vw, 80px) clamp(28px, 5vw, 56px);
	box-sizing: border-box;
	text-align: center;
	background: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}

.xmad-contact-cta .xmad-contact-cta__title {
	margin: 0 0 14px;
	font-size: clamp(2rem, 2.4vw + 1.2rem, 2.75rem);
	line-height: 1.6;
	letter-spacing: -0.02em;
}

.xmad-contact-cta .xmad-contact-cta__copy {
	margin: 0 0 32px;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.125rem, 0.9vw + 0.9rem, 1.375rem);
	line-height: 1.6;
}

.xmad-contact-cta .wp-block-buttons {
	justify-content: center;
	margin: 0;
}

.xmad-contact-cta .xmad-contact-cta__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 30px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	transition: background-color var(--xmad-transition), border-color var(--xmad-transition);
}

.xmad-contact-cta .xmad-contact-cta__button .wp-block-button__link:hover,
.xmad-contact-cta .xmad-contact-cta__button .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 84%, black);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 84%, black);
}

/* ---------------------------------------------------------------- *
 * xmad.ma brand variant — restrained umbrella-site identity
 * ---------------------------------------------------------------- */
.site-header {
	background: #fff;
	color: #09090b;
	border-bottom: 0;
}

.site-header--transparent {
	position: relative;
	background: #fff;
	color: #09090b;
}

.site-header--transparent::before {
	display: none;
}

.site-header__inner {
	max-width: 1200px;
	padding-inline: clamp(3.5rem, 8vw, 6rem);
	padding-block: clamp(1.5rem, 2vw, 2rem);
}

.site-branding {
	flex-direction: row;
	align-items: center;
	gap: 0;
}

.site-branding > :not(.xmad-ma-brand) {
	display: none;
}

.xmad-ma-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 44px;
	color: #09090b;
	text-decoration: none;
}

.xmad-ma-brand__mark {
	display: block;
	width: clamp(2.15rem, 3vw, 2.7rem);
	height: auto;
	flex: 0 0 auto;
}

.xmad-ma-brand__word {
	font-size: clamp(1.3rem, 1.6vw, 1.6rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.xmad-header__cta {
	display: none;
}

.xmad-burger,
.site-header--transparent .xmad-burger,
.site-header--transparent.is-solid .xmad-burger {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #09090b;
}

.xmad-burger__icon,
.xmad-burger__icon::before,
.xmad-burger__icon::after {
	width: 20px;
	height: 1.5px;
}

/* xmad.ma hero */
.xmad-ma-hero {
	position: relative;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	margin-block-start: 0;
	overflow: hidden;
	background: #fff;
	color: #09090b;
	min-height: clamp(520px, 56vw, 650px);
}

.xmad-ma-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1200px !important;
	min-height: inherit;
	margin-inline: auto;
	padding: clamp(3.2rem, 6vw, 4rem) clamp(3.5rem, 8vw, 6rem) 3rem;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
}

.xmad-ma-hero__inner > *,
.xmad-ma-hero__copy > * {
	margin-block-start: 0;
}

.xmad-ma-hero__copy {
	position: relative;
	z-index: 2;
	width: 42%;
	max-width: 430px;
	margin-inline: 0 !important;
}

@media (min-width: 901px) {
	.xmad-ma-hero__copy {
		transform: translateX(min(10vw, 120px));
	}

}

.xmad-ma-hero__eyebrow {
	margin: 0 0 clamp(1.6rem, 3vw, 2.5rem);
	font-size: 0.72rem !important;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #52525b;
}

.xmad-ma-hero__eyebrow::before {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	margin-bottom: 14px;
	background: #d61f26;
}

.xmad-ma-hero__title {
	margin: 0;
	max-width: 430px;
	font-size: clamp(3.6rem, 6.4vw, 6.5rem);
	font-weight: 750;
	line-height: 0.96;
	letter-spacing: -0.055em;
	color: #09090b;
	text-wrap: balance;
}

.xmad-ma-hero__intro {
	margin: clamp(2rem, 3vw, 2.75rem) 0 0;
	max-width: 38ch;
	font-size: clamp(1.05rem, 1.25vw, 1.3rem);
	line-height: 1.65;
	color: #52525b;
}

.xmad-ma-hero__x {
	position: absolute;
	z-index: 1;
	top: 47%;
	left: 46.5%;
	right: auto;
	width: clamp(440px, 51vw, 620px);
	aspect-ratio: 2028 / 1132;
	max-width: none !important;
	margin: 0;
	transform: translate(calc(-50% + min(10vw, 120px)), -50%) scaleY(1.06);
	transform-origin: center;
	pointer-events: none;
}

.xmad-ma-hero__x > .wp-block-image {
	position: absolute;
	top: 0;
	height: 100%;
	margin: 0 !important;
}

.xmad-ma-hero__x > .wp-block-image img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	transform-origin: center;
}

.xmad-ma-hero__x-full {
	inset: 0;
	width: 100%;
	opacity: 0;
}

.xmad-ma-hero__x-full img {
	width: 100% !important;
	height: 100% !important;
}

.xmad-ma-hero__x-left {
	left: 0;
	opacity: 1;
	animation: xmad-arrow-forward 5.8s cubic-bezier(0.32, 0, 0.2, 1) infinite;
}

.xmad-ma-hero__x-right {
	right: 0;
	opacity: 1;
	animation: xmad-right-fade 5.8s ease-in-out infinite;
}

@keyframes xmad-arrow-forward {
	0%,
	18% {
		transform: translate3d(0, 0, 0);
	}
	68%,
	76% {
		transform: translate3d(82px, 0, 0);
	}
	80%,
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes xmad-right-fade {
	0%,
	18%,
	82%,
	100% {
		opacity: 1;
	}
	30%,
	76% {
		opacity: 0.08;
	}
}

@media (max-width: 900px) {
	.xmad-ma-hero {
		min-height: clamp(620px, 82vh, 760px);
	}

	.xmad-ma-hero__inner {
		padding-top: clamp(4.5rem, 10vw, 6rem);
		padding-bottom: clamp(4.5rem, 10vw, 6rem);
		align-items: flex-start;
	}

	.xmad-ma-hero__copy {
		width: min(62%, 34rem);
		max-width: 34rem;
	}

	.xmad-ma-hero__title {
		font-size: clamp(3.1rem, 9vw, 5rem);
	}

	.xmad-ma-hero__x {
		top: 51%;
		left: 32%;
		right: auto;
		width: clamp(360px, 55vw, 520px);
		transform: translate(-50%, -50%) scaleY(1.06);
	}
}

@media (max-width: 620px) {
	.xmad-ma-hero {
		min-height: 650px;
	}

	.xmad-ma-hero__inner {
		padding-inline: 1.25rem;
		padding-top: 4.5rem;
		padding-bottom: 4rem;
	}

	.xmad-ma-hero__copy {
		width: 72%;
		max-width: 26rem;
	}

	.xmad-ma-hero__title {
		max-width: 240px;
		font-size: clamp(3rem, 13vw, 4.35rem);
	}

	.xmad-ma-hero__intro {
		font-size: 1rem;
	}

	.xmad-ma-hero__x {
		top: 46.5%;
		left: 40%;
		right: auto;
		width: 72vw;
		min-width: 300px;
		max-width: 430px;
		transform: translate(-50%, -50%) scaleY(1.06);
	}
}

@media (max-width: 420px) {
	.xmad-ma-hero__copy {
		width: 78%;
	}

	.xmad-ma-hero__x {
		top: 46.5%;
		left: 40%;
		right: auto;
		width: 72vw;
		min-width: 300px;
		max-width: 430px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.xmad-ma-hero__x-full {
		opacity: 1;
	}

	.xmad-ma-hero__x-left,
	.xmad-ma-hero__x-right {
		opacity: 0;
		animation: none !important;
	}
}

/* Temporary design-preview page: the hero owns the visible H1. */
.page-id-1806 .xmad-page__header {
	display: none;
}

.page-id-1806 .xmad-page__inner {
	width: 100%;
	max-width: none;
	padding: 0;
}

/* xmad.ma page body */
.xmad-ma-section-inner {
	width: min(100%, 1200px);
	max-width: 1200px !important;
	margin-inline: auto;
	padding: clamp(7rem, 10vw, 11rem) clamp(1.25rem, 4vw, 4rem);
	box-sizing: border-box;
}

.xmad-ma-kicker {
	margin: 0 0 1.75rem;
	font-size: 0.72rem !important;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #d61f26;
}

.xmad-ma-about {
	margin-block-start: 0;
	background: #f4f4f2;
	color: #09090b;
}

.xmad-ma-about .xmad-ma-section-inner {
	text-align: center;
}

.xmad-ma-about__title,
.xmad-ma-about__body,
.xmad-ma-about__trinity {
	margin-left: auto;
	margin-right: auto;
}

.xmad-ma-about__title {
	max-width: 16ch;
	margin: 0 auto;
	font-size: clamp(2.8rem, 5vw, 5.2rem);
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.05em;
}

.xmad-ma-about__body {
	max-width: 46ch;
	margin: clamp(2.25rem, 4vw, 3.5rem) auto 0;
	font-size: clamp(1.05rem, 1.35vw, 1.3rem);
	line-height: 1.7;
	color: #52525b;
}

.xmad-ma-about__trinity {
	margin: clamp(3.5rem, 6vw, 5.5rem) auto 0;
	font-size: clamp(1.5rem, 2.4vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	word-spacing: clamp(0.35rem, 1vw, 0.8rem);
	color: #09090b;
}

.xmad-ma-editorial {
	margin-block-start: 0;
	background: #fff;
}

.xmad-ma-editorial__grid {
	width: min(100%, 1200px);
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: clamp(6rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4rem);
	gap: 0 !important;
	align-items: stretch !important;
	box-sizing: border-box;
}

.xmad-ma-editorial__grid > .wp-block-column {
	margin: 0 !important;
}

.xmad-ma-editorial__image {
	height: 100%;
	min-height: 560px;
	margin: 0 !important;
	overflow: hidden;
}

.xmad-ma-editorial__image img {
	width: 100%;
	height: 100%;
	min-height: 560px;
	object-fit: cover;
	display: block;
}

.xmad-ma-editorial__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 560px;
	padding: clamp(3rem, 5vw, 5.5rem);
	box-sizing: border-box;
	background: #09090b;
	color: #fff;
}

.xmad-ma-editorial__copy .xmad-ma-kicker {
	color: #ef2b31;
}

.xmad-ma-editorial__title {
	max-width: 8ch;
	margin: 0;
	font-size: clamp(2.7rem, 4.2vw, 4.5rem);
	font-weight: 750;
	line-height: 0.98;
	letter-spacing: -0.05em;
	color: #fff;
}

.xmad-ma-editorial__body {
	max-width: 34ch;
	margin: clamp(2rem, 3.5vw, 3rem) 0 0;
	font-size: clamp(1rem, 1.2vw, 1.16rem);
	line-height: 1.75;
	color: #c7c7cb;
}

.xmad-ma-contact {
	margin-block-start: 0;
	background: #fff;
	color: #09090b;
	border-top: 1px solid #e4e4e7;
}

.xmad-ma-contact__inner {
	width: min(100%, 920px);
	max-width: 920px !important;
	margin-inline: auto;
	padding: clamp(7rem, 12vw, 12rem) clamp(1.25rem, 4vw, 4rem);
	text-align: center;
	box-sizing: border-box;
}

.xmad-ma-contact__inner .xmad-ma-kicker {
	margin-bottom: 2rem;
}

.xmad-ma-contact__title {
	max-width: 12ch;
	margin: 0 auto;
	font-size: clamp(3rem, 5.5vw, 5.5rem);
	font-weight: 750;
	line-height: 0.98;
	letter-spacing: -0.055em;
}

.xmad-ma-contact__email {
	margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 650;
}

.xmad-ma-contact__email a {
	color: #d61f26;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.12em;
}

.xmad-ma-contact__email a:hover,
.xmad-ma-contact__email a:focus-visible {
	color: #09090b;
}

@media (max-width: 781px) {
	.xmad-ma-editorial {
		background: #09090b;
	}

	.xmad-ma-editorial__grid {
		padding: 0;
	}

	.xmad-ma-editorial__grid > .wp-block-column {
		flex-basis: 100% !important;
	}

	.xmad-ma-editorial__image,
	.xmad-ma-editorial__image img {
		min-height: 420px;
	}

	.xmad-ma-editorial__copy {
		min-height: auto;
		padding: clamp(3.5rem, 10vw, 5rem) clamp(1.25rem, 7vw, 3rem);
	}

	.xmad-ma-editorial__title {
		max-width: 10ch;
	}
}

@media (max-width: 480px) {
	.xmad-ma-section-inner {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}

	.xmad-ma-about__title,
	.xmad-ma-contact__title {
		font-size: clamp(2.8rem, 13vw, 4rem);
	}

	.xmad-ma-editorial__image,
	.xmad-ma-editorial__image img {
		min-height: 330px;
	}
}

/* xmad.ma footer */
.xmad-ma-footer {
	margin: 0;
	padding: 0;
	background: #09090b;
	color: #fff;
	border: 0;
}

.xmad-ma-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: 1200px;
	padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 4rem);
}

.xmad-ma-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	color: #fff;
	text-decoration: none;
}

.xmad-ma-footer__brand img {
	display: block;
	width: 2rem;
	height: auto;
}

.xmad-ma-footer__brand span {
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.055em;
}

.xmad-ma-footer__search {
	color: #c7c7cb;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 160ms ease;
}

.xmad-ma-footer__search:hover,
.xmad-ma-footer__search:focus-visible {
	color: #fff;
}

.xmad-ma-footer__bottom {
	max-width: 1200px;
	padding: 0 clamp(1.25rem, 4vw, 4rem) 2.25rem;
	color: #71717a;
	font-size: 0.78rem;
}

.xmad-ma-footer__bottom p {
	margin: 0;
}

@media (max-width: 600px) {
	.xmad-ma-footer__inner {
		align-items: flex-start;
		flex-direction: column;
	}
}