/**
 * Foxtrot theme CSS.
 * All colors, fonts, and scale tokens come from theme.json presets.
 * No hardcoded brand values in this file.
 */

/* ---------- Base ---------- */

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Filled inputs keep the dark surface: browsers otherwise repaint autofill
	fields with a white background and black text. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--wp--preset--color--surface) inset;
	-webkit-text-fill-color: var(--wp--preset--color--contrast);
	caret-color: var(--wp--preset--color--contrast);
	transition: background-color 9999s ease-out;
}

p { margin-block-end: 1em; }

h1, h2, h3, h4, h5, h6 { margin-block-start: 0; }

/* ---------- Long-form content standard: pages + posts share one rhythm ---------- */

/* H1: tight to the breadcrumb above, clear handoff to the meta/body below. */
.wp-block-post-title { margin-block: 0 12px; }

/* The shared article header prints a date line; pages are timeless, so only
	posts (articles, press releases) show it. */
.page .wp-block-post-date { display: none; }

/* Meta rows: post date, featured image, author line get explicit separation. */
.wp-block-post-date { margin-block-end: 24px; }
.wp-block-post-featured-image { margin-block-end: 48px; }

/* In-body headings: one predictable rhythm on every page and post. Sizes
	are one step below the page headline so the H1 stays dominant, and the
	vertical offsets stay modest. */
.entry-content h2,
.wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--xxxl);
	margin-block: 1.5rem 0.5rem;
}

.entry-content h3,
.wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--xxl);
	margin-block: 1.25rem 0.4rem;
}

.entry-content h4,
.wp-block-post-content h4 {
	font-size: var(--wp--preset--font-size--xl);
	margin-block: 1rem 0.4rem;
}

.entry-content h5,
.entry-content h6,
.wp-block-post-content h5,
.wp-block-post-content h6 {
	font-size: var(--wp--preset--font-size--lg);
	margin-block: 1rem 0.4rem;
}

/* Anchored headings land below the fixed header, never underneath it. */
.entry-content [id],
.wp-block-post-content [id] { scroll-margin-top: calc(var(--fx-header-h, 86px) + 24px); }

/* A heading that opens the content carries no top offset. */
.entry-content > :first-child,
.wp-block-post-content > :first-child { margin-block-start: 0; }

/* Tables: token borders, left-aligned cells, readable padding, scrollable
	on phones so wide legal tables never break the column. */
.entry-content .wp-block-table { overflow-x: auto; }

.entry-content .wp-block-table td,
.entry-content .wp-block-table th { padding: 10px 16px; text-align: left; }

.entry-content .wp-block-table thead { border-bottom: 2px solid var(--wp--preset--color--border); }

.entry-content .wp-block-table thead th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Figures and captions: consistent vertical rhythm, centered caption. */
.entry-content figure { margin-block: 2rem; }

.entry-content figcaption { text-align: center; margin-block-start: 8px; }

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

/* Lists: standard indent and item rhythm. */
.entry-content ul,
.entry-content ol { padding-inline-start: 1.5em; }

.entry-content li + li { margin-block-start: 0.4em; }

/* Links inside content: accent (theme.json), steady underline geometry. */
.entry-content a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Accessibility: skip link + focus ---------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 16px;
	z-index: 100000;
	padding: 10px 20px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-radius: var(--wp--custom--radius--sm);
}

.skip-link:focus {
	left: 16px;
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Screen-reader only utility. */
.screen-reader-text,
.foxtrot-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Motion: reveals ---------- */

.fx-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--wp--custom--motion--slow) ease-out,
		transform var(--wp--custom--motion--slow) ease-out;
}

.fx-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.fx-reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ---------- Texture underlay (route-line grid, under 4% ink) ---------- */

.has-fx-texture { position: relative; isolation: isolate; }

.has-fx-texture::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--fx-texture);
	background-size: 340px 340px;
	opacity: 0.04;
	pointer-events: none;
}

:root {
	--fx-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cpath d='M0 60 H340 M0 140 H340 M0 220 H340 M0 300 H340 M60 0 V340 M140 0 V340 M220 0 V340 M300 0 V340' stroke='%238B95A5' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---------- Photography treatment ---------- */

/* Scrim wrapper: photo sits inside the palette. */
.fx-photo { position: relative; }

.fx-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.85) contrast(1.05) brightness(0.92);
}

.fx-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10, 13, 18, 0.05) 0%,
		rgba(10, 13, 18, 0.25) 70%,
		rgba(10, 13, 18, 0.5) 100%);
	pointer-events: none;
}

/* Dark duotone for client-side band photos. */
.fx-photo--deep img { filter: grayscale(0.4) brightness(0.7) contrast(1.1); }
.fx-photo--deep::after {
	background: linear-gradient(120deg,
		rgba(10, 13, 18, 0.75) 0%,
		rgba(10, 13, 18, 0.35) 55%,
		rgba(197, 167, 0, 0.1) 100%);
}

/* Background photo sections need a heavy scrim to hold AA text. */
.fx-bg-photo { position: relative; isolation: isolate; }

.fx-bg-photo > img,
.fx-bg-photo > .fx-photo {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.fx-bg-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(10, 13, 18, 0.82) 0%,
		rgba(10, 13, 18, 0.65) 50%,
		rgba(10, 13, 18, 0.86) 100%);
}

/* ---------- Header ---------- */

.site-header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100;
	/* Always solid — no transparency, no animation */
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.site-header-inner {
	align-items: center;
	padding-block: 16px;
	gap: 24px;
}

/* Logo: 1.5× bigger than default, 24px left margin */
.site-header .site-logo,
.site-header .custom-logo-link {
	margin-left: 24px;
}

.site-header .site-logo img,
.site-header .custom-logo img {
	max-height: 60px;
	width: auto;
}

/* Nav refinement */
.site-header .wp-block-navigation {
	flex-grow: 1;
	justify-content: flex-end;
	/* Keep the About / Careers / Contact Us group 36px off the right edge. */
	margin-right: 36px;
}

.site-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

/* External glyph removed */

/* Header CTA sits tight to the right */
.site-header .wp-block-button { margin: 0; padding: 10px; }

.site-header .wp-block-button__link { white-space: nowrap; }

/* ---------- Core navigation overlay (mobile full-screen menu) ---------- */

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 96px 24px 48px;
	align-items: flex-start;
	gap: 8px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxl);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--accent); }

/* ---------- Buttons ---------- */

.wp-block-button .wp-block-button__link {
	transition: background-color var(--wp--custom--motion--fast) ease-out,
		color var(--wp--custom--motion--fast) ease-out,
		border-color var(--wp--custom--motion--fast) ease-out;
}

/* ---------- Eyebrow / mono label utility ---------- */

.fx-eyebrow {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-block-end: 24px;
}

/* Mono spec value pairs */
.fx-spec dt,
.fx-spec-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.fx-spec dd,
.fx-spec-value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Hero ---------- */

.fx-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 85vh; max-height: 85vh; }

.fx-hero-media { position: absolute; inset: 0; z-index: -2; }

.fx-hero-media img,
.fx-hero-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fx-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.75) 40%, rgba(10,13,18,0.20) 70%, rgba(10,13,18,0.05) 100%);
}

/* Bottom padding leaves room for the overlaid stats strip. */
.fx-hero-inner { padding-block: 160px 120px; }

/* Hero slides behind the transparent sticky header (main has a 24px WP margin). */
main#fx-content .fx-hero {
	margin-top: calc(-1 * var(--fx-header-h, 86px) - 24px);
}

/* Every page without a hero needs the fixed header's height as top padding,
	otherwise the first heading renders underneath it. */
main#fx-content:not(:has(.fx-hero)) {
	padding-top: calc(var(--fx-header-h, 86px) + 24px);
}

/* ---------- Stats: glass strip overlaid on the hero, single row ---------- */

.fx-stats {
	position: relative;
	z-index: 5;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	background: rgba(18, 22, 29, 0.45);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(232, 236, 242, 0.12);
	border-radius: var(--wp--custom--radius--md);
	margin-top: -144px;
	margin-bottom: 120px;
	margin-inline: auto;
	max-width: fit-content;
	width: fit-content;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Override the layout container's centered auto margins with higher specificity. */
.wp-block-group.fx-stats {
	margin-left: auto !important;
	margin-right: auto !important;
}

.fx-stats > * {
	background: transparent;
	padding: 16px 24px;
	margin: 0;
	white-space: nowrap;
}

/* Ensure all stat children are identical height — override WP core wp-block-group defaults */
.fx-stats > .wp-block-group {
	margin: 0;
	padding: 16px 24px;
	align-self: stretch;
}

.fx-stats > * + * { border-left: 1px solid rgba(232, 236, 242, 0.12); }

.fx-stat-value {
	display: inline;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	line-height: 1;
	margin: 0;
}

.fx-stat-label {
	display: inline;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	margin-left: 8px;
}

@media (max-width: 900px) {
	.fx-stats {
		flex-wrap: wrap;
		max-width: calc(100% - 24px);
		margin-top: -40px;
	}
	.fx-stats > * { flex: 1 1 auto; white-space: normal; }
	.fx-stats > *:nth-child(n+2) { border-top: 1px solid rgba(232, 236, 242, 0.12); border-left: 0; }
}


@media (max-width: 782px) {
	.fx-stats {
		margin-top: -64px;
		margin-inline: 24px auto 0;
		max-width: calc(100% - 24px);
	}
}

/* ---------- Service / spec cards ---------- */

.fx-card {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: 32px;
	transition: border-color var(--wp--custom--motion--fast) ease-out,
		transform var(--wp--custom--motion--fast) ease-out;
}

.fx-card:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-1px);
}

.fx-card-icon { color: var(--wp--preset--color--accent); margin-block-end: 24px; }

.fx-card-icon svg { width: 24px; height: 24px; stroke: currentColor; }

/* Services sit beneath the proof section on the tight rhythm. */
.fx-section.fx-services { padding-block: 12px 24px; }

/* Icon-free service cards: centered titles. */
#services .fx-card h3 { text-align: center; }

/* Hide any icon left in saved post content until re-saved from the pattern. */
#services .fx-card-icon { display: none; }

/* ---------- Process timeline ---------- */

.fx-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; position: relative; }

.fx-timeline::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--wp--preset--color--border);
}

.fx-step { position: relative; padding-top: 48px; }

.fx-step-dot {
	position: absolute;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Client logos: single-line auto-scrolling marquee ---------- */

/* Viewport window: clips the moving strip. */
.fx-marquee {
	overflow: hidden;
}

/* Full-bleed window: alignfull frees the strip from the section's centered margins,
   then negative margins cancel the remaining content padding so it spans edge to edge. */
.fx-clients-band .fx-marquee.alignfull {
	max-width: none;
	margin-left: calc(-1 * max(24px, calc((100vw - 1240px) / 2)));
	margin-right: calc(-1 * max(24px, calc((100vw - 1240px) / 2)));
}

/* The strip: two identical logo sets ride one flex row so the -50% loop is seamless. */
.fx-clients {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	will-change: transform;
	/* Slow, deliberate drift. Pauses on hover or keyboard focus. */
	animation: fx-marquee 60s linear infinite;
}

/* The duplicated set is presentational only (screen readers hear the logos once). */
.fx-clients-set { display: contents; }

.fx-clients:hover,
.fx-clients:focus-within { animation-play-state: paused; }

.fx-clients a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	margin-inline-end: 24px;
	/* Borderless cards: the logo is the artifact, not a box. Hover opacity on the image carries the state. */
}

/* Logos at 0.8x the 108px height (86.4px); width follows each logo's aspect ratio. */
.fx-clients img {
	height: 86.4px;
	width: auto;
	flex: 0 0 auto;
	/* true monochrome white: every opaque pixel -> white, alpha preserved */
	filter: brightness(0) invert(1);
	opacity: 0.55;
	transition: opacity var(--wp--custom--motion--fast) ease-out;
}

.fx-clients a:hover img { opacity: 1; }

/* Drift to the right: content enters from the left edge and exits right, so every logo gets shown. */
@keyframes fx-marquee {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* No motion under reduced-motion preference: fall back to a manually scrollable strip. */
@media (prefers-reduced-motion: reduce) {
	.fx-clients { animation: none; }
	.fx-marquee { overflow-x: auto; }
}

/* Client band: full-width surface + gold wash + hairline, same band treatment as process/CTA. */
.fx-section.fx-clients-band {
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--accent) 3%, transparent) 100%),
		var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--border);
	/* Slim rhythm: overrides the default 96/160px .fx-section padding; tight bottom keeps the transition close. */
	padding-block: 12px 12px;
}

/* Break out of the constrained 1240px main so the band spans edge to edge. */
.fx-section.fx-clients-band.alignfull {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw;
	width: 100vw;
	/* Inner content stays on the 1240px grid, same as the process band. */
	padding-inline: max(24px, calc((100vw - 1240px) / 2));
}

/* Statement sits beside the eyebrow label at 70% ink so the logos stay the focus. */
.fx-clients-statement { opacity: 0.7; }

/* 24px breathing room between the heading row and the logo strip. */
.fx-clients-heading { margin-block-end: 24px; }

/* ---------- Proof heading + transition-file visual ---------- */

/* Tight rhythm: overrides the default 96/160px .fx-section padding. Slim bottom keeps the services cards close. */
.fx-section.fx-proof { padding-block: 24px 12px; }

/* No trailing margin: the section padding already supplies the gap below the proof visual. */
.fx-proof-heading { margin-block-end: 0; }

/* Nudge the copy down so "Where this fits" sits level with "TRANSITION FILE". */
.fx-proof-heading-row .wp-block-column:first-child { padding-top: 48px; }

@media (max-width: 781px) {
	.fx-proof-heading-row .wp-block-column:first-child { padding-top: 0; }
}

.fx-proof-visual svg { display: block; width: 100%; height: auto; }

.fx-viz-frame { fill: none; stroke: none; }

.fx-viz-grid line { stroke: var(--wp--preset--color--border); opacity: 0.6; }

.fx-viz-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	fill: var(--wp--preset--color--accent);
}

.fx-viz-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	fill: var(--wp--preset--color--muted);
}

.fx-viz-live { fill: var(--wp--preset--color--accent); animation: fx-ping 2.4s ease-in-out infinite; }

.fx-viz-row { opacity: 0.35; }

[data-fx-visual].is-live .fx-viz-row { animation: fx-row-in 0.5s ease-out forwards; }
[data-fx-visual].is-live .fx-viz-row--1 { animation-delay: 0.2s; }
[data-fx-visual].is-live .fx-viz-row--2 { animation-delay: 0.8s; }
[data-fx-visual].is-live .fx-viz-row--3 { animation-delay: 1.4s; }

.fx-viz-box { fill: transparent; stroke: var(--wp--preset--color--border); }

.fx-viz-check {
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 20;
	stroke-dashoffset: 20;
}

[data-fx-visual].is-live .fx-viz-check { animation: fx-draw 0.45s ease-out forwards; }
[data-fx-visual].is-live .fx-viz-row--1 .fx-viz-check { animation-delay: 0.35s; }
[data-fx-visual].is-live .fx-viz-row--2 .fx-viz-check { animation-delay: 0.95s; }
[data-fx-visual].is-live .fx-viz-row--3 .fx-viz-check { animation-delay: 1.55s; }

.fx-viz-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	fill: var(--wp--preset--color--contrast);
}

.fx-viz-status {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	fill: var(--wp--preset--color--muted);
}

.fx-viz-stop {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	fill: var(--wp--preset--color--muted);
}

.fx-viz-route {
	stroke: var(--wp--preset--color--border);
	stroke-width: 1;
	stroke-dasharray: 5 6;
	animation: fx-dash 1.4s linear infinite;
}

.fx-viz-plane { color: var(--wp--preset--color--accent); animation: fx-taxi 9s linear infinite; }

.fx-viz-plane path { fill: currentColor; }

@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-row-in { to { opacity: 1; } }
@keyframes fx-ping { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes fx-dash { to { stroke-dashoffset: -22; } }
@keyframes fx-taxi { from { transform: translateX(0); } to { transform: translateX(418px); } }

@media (prefers-reduced-motion: reduce) {
	.fx-viz-live,
	.fx-viz-route,
	.fx-viz-plane { animation: none; }
	.fx-viz-row { opacity: 1; }
	.fx-viz-check { stroke-dashoffset: 0; }
}

/* ---------- Synops band ---------- */

.fx-synops {
	/* No band background or hairlines: the section sits flat on the page background. */
}

/* Keep the Synops section edge-to-edge so inner content lands on the 1240px grid. */
.fx-section.fx-synops.alignfull {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw;
	width: 100vw;
	/* Inner content stays on the 1240px grid, same as the process band. */
	padding-inline: max(24px, calc((100vw - 1240px) / 2));
}

/* Synops logo at half size on the text column. */
.fx-synops .wp-block-image img { width: 200px; height: auto; }

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

.fx-cta-band {
	background:
		linear-gradient(180deg,
			rgba(197, 167, 0, 0.08) 0%,
			rgba(197, 167, 0, 0.03) 100%),
		var(--wp--preset--color--surface);
	/* Top border only: the band joins the footer directly below, which
	   carries its own top border — together they render a single seam line. */
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: 48px;
	/* Same full-bleed grid treatment as the process and client bands:
	   content sits on the 1240px grid, and on narrow screens keeps a
	   cushioned inset instead of touching the screen edges. */
	padding-inline: max(24px, calc((100vw - 1240px) / 2));
}

/* Synops heading: same technical styling as eyebrows */
.fx-synops .wp-block-heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* ---------- Forms ---------- */

.fx-form { display: grid; gap: 24px; }

.fx-field { display: grid; gap: 8px; }

.fx-field label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
}

.fx-field input,
.fx-field select,
.fx-field textarea {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	padding: 12px 16px;
	width: 100%;
	transition: border-color var(--wp--custom--motion--fast) ease-out;
}

.fx-field input:focus-visible,
.fx-field select:focus-visible,
.fx-field textarea:focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

/* Honeypot: present in the DOM for bots, never visible to humans and takes
   zero layout space (!important guards against block/editor styles).
   Belt-and-braces: wpautop may inject stray <br>/<p></p> around the form, so
   hide those too. */
.fx-newsletter-form > br,
.fx-newsletter-form > p:empty,
.fx-newsletter-form .fx-hp + br,
.fx-newsletter-form .fx-hp br,
.fx-newsletter-form .fx-consent-label > br,
.fx-newsletter-form .fx-field > p:empty,
.fx-newsletter-form .fx-field > br {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
}
.fx-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	display: block !important;
	width: 1px !important;
	max-width: 1px !important;
	height: 1px !important;
	max-height: 1px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	font-size: 0 !important;
	line-height: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.fx-hp label,
.fx-hp input {
	display: block !important;
	width: 1px !important;
	max-width: 1px !important;
	height: 1px !important;
	max-height: 1px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	opacity: 0 !important;
}

/* ---------- Jobs ---------- */

.fx-roles { display: grid; gap: 24px; }

.fx-roles-filters { display: flex; flex-wrap: wrap; gap: 8px; }

.fx-chip {
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	padding: 6px 16px;
	transition: border-color var(--wp--custom--motion--fast) ease-out, color var(--wp--custom--motion--fast) ease-out;
}

.fx-chip:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); }

.fx-chip[aria-pressed="true"] {
	background: var(--wp--preset--color--accent-dim);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.fx-roles-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }

.fx-role-row {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px 32px;
	padding: 20px 24px;
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--fast) ease-out;
}

.fx-role-row:hover { border-color: var(--wp--preset--color--accent); }

.fx-role-main { display: grid; gap: 4px; }

.fx-role-title { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--lg); font-weight: 600; }

.fx-role-summary { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); }

.fx-role-meta {
	color: var(--wp--preset--color--muted);
	display: grid;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	gap: 4px;
	justify-items: end;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Job detail spec strip: one minimal row of label/value pairs.
	No box — just the type in an aligned, wrap-ready row. */
.fx-spec.fx-job-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px 0;
	margin-block: 16px 40px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.fx-spec.fx-job-meta > div { display: grid; gap: 4px; }

/* Hairline between pairs keeps the row scannable without a box. */
.fx-spec.fx-job-meta > div + div {
	border-inline-start: 1px solid var(--wp--preset--color--border);
	margin-inline-start: 40px;
	padding-inline-start: 40px;
}

.fx-spec.fx-job-meta dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.fx-spec.fx-job-meta dd {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	margin: 0;
}

/* Application form extras on top of .fx-form base. */
.fx-form-grid-2 { display: grid; gap: 24px 48px; grid-template-columns: 1fr 1fr; }

.fx-field input[type="file"] { padding: 10px 16px; }

.fx-field input[type="file"]::file-selector-button {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	margin-inline-end: 16px;
	padding: 8px 16px;
}

.fx-consent { grid-template-columns: auto 1fr; }

.fx-consent input {
	accent-color: var(--wp--preset--color--accent);
	height: 18px;
	margin-block-start: 3px;
	width: 18px;
}

.fx-consent label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0;
	text-transform: none;
}

.fx-apply {
	border-block-start: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: 32px;
	margin-block-start: 64px;
	padding-block-start: 48px;
}

/* Section heading, deliberately smaller than the description's H2s. */
.fx-apply h2 { font-size: var(--wp--preset--font-size--lg); }

/* WP core gives every .wp-site-blocks child a 24px block-start margin. The
   footer is the last child and always follows the CTA band (or main with its
   own padding); removing that margin makes the CTA band + footer read as one
   continuous block with a single seam border. */
.wp-block-template-part:has(.fx-cta-band) + .wp-block-template-part {
	margin-block-start: 0;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: 64px 48px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.fx-timeline { grid-template-columns: repeat(2, 1fr); }
	.fx-timeline::before { display: none; }
	.fx-step { padding-top: 0; padding-left: 44px; }
	.fx-step-dot { top: 4px; left: 0; }
	.fx-step::before {
		content: "";
		position: absolute;
		top: 34px;
		bottom: -32px;
		left: 15px;
		width: 1px;
		background: var(--wp--preset--color--border);
	}
	.fx-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.site-header .wp-block-button { display: none; }
}

@media (max-width: 600px) {
	.fx-stats { grid-template-columns: 1fr 1fr; }
	.fx-stats > * { padding: 32px 24px; }
	.fx-role-row { grid-template-columns: 1fr; }
	.fx-role-meta { grid-auto-flow: column; gap: 12px; justify-items: start; }
	.fx-form-grid-2 { grid-template-columns: 1fr; }
	.fx-spec.fx-job-meta { gap: 12px; }
	.fx-spec.fx-job-meta > div + div {
		border-inline-start: 0;
		margin-inline-start: 0;
		padding-inline-start: 0;
	}
}

/* ---------- Breadcrumb ---------- */

.fx-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
	margin-block-end: 48px;
}

.fx-breadcrumb a { color: var(--wp--preset--color--muted); text-decoration: none; }
.fx-breadcrumb a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.fx-breadcrumb [aria-current] { color: var(--wp--preset--color--contrast); }

/* ---------- Footer extras ---------- */

.fx-footer-grid { gap: 48px 64px; }

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--wp--preset--color--accent); }

.site-footer .wp-block-site-logo img { max-height: 40px; width: auto; }

.site-footer hr.wp-block-separator { margin-block: 48px; opacity: 0.3; }

/* Footer newsletter form: name row + email/consent row.
   NOTE: theme.css (.fx-field label + .fx-field input) styles every label as an
   uppercase grid item and every input as width:100% -- both must be undone
   here or the consent checkbox stretches/misaligns. */
.fx-newsletter-form .fx-name-row { display: flex; gap: 8px; margin-bottom: 8px; }
.fx-newsletter-form .fx-name-row .fx-field { flex: 1 1 0; min-width: 0; }
.fx-newsletter-form .fx-email-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.fx-newsletter-form .fx-email-row > .fx-field { flex: 1 1 0; min-width: 0; }
.fx-newsletter-form .fx-email-row > .fx-consent { margin: 0; }
.fx-newsletter-form .fx-consent { display: block; margin: 0; padding: 0; }
.fx-newsletter-form .fx-consent-label {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: #8B95A5 !important;
	cursor: pointer;
	line-height: 1.4 !important;
	text-align: left !important;
}
.fx-newsletter-form .fx-consent-label input[type="checkbox"] {
	flex: 0 0 auto !important;
	align-self: center !important;
	width: auto !important;
	min-width: 13px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: revert !important;
	background: revert !important;
	border-radius: revert !important;
	color: revert !important;
	font-family: revert !important;
	font-size: revert !important;
	transition: none !important;
}
.fx-newsletter-form .fx-consent-label span { flex: 1 1 auto; min-width: 0; }
/* Turnstile: interaction-only appearance keeps the Managed widget hidden
   unless Cloudflare decides an interactive checkbox is needed. The wrapper
   collapses to zero height when there is nothing to show. */
.fx-newsletter-form .fx-turnstile { margin: 0 !important; padding: 0 !important; line-height: 0; min-height: 0; }
.fx-newsletter-form .fx-turnstile:empty { display: none !important; }
.fx-newsletter-form .fx-turnstile .cf-turnstile:empty { display: none !important; }
@media (max-width: 420px) {
	.fx-newsletter-form .fx-name-row { flex-direction: column; }
	.fx-newsletter-form .fx-email-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Section rhythm helper ---------- */

.fx-section { padding-block: 48px; }

@media (min-width: 1024px) {
	/* 96px was too much; keep the desktop rhythm at 48px. */
	.fx-section { padding-block: 48px; }
}

/* ---------- Service detail layout ---------- */

.fx-service-columns,
.fx-legal-columns { align-items: flex-start; }

.fx-service-nav {
	position: sticky;
	top: 112px;
	border-left: 1px solid var(--wp--preset--color--border);
	padding-left: 24px;
}

.fx-service-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fx-service-nav a { text-decoration: none; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); }
.fx-service-nav a:hover { color: var(--wp--preset--color--accent); text-decoration: none; }
.fx-service-nav a.is-active { color: var(--wp--preset--color--accent); }

@media (max-width: 1024px) {
	.fx-service-nav { position: static; border-left: 0; padding-left: 0; }
	.fx-service-nav ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
}

/* ---------- Legal TOC ---------- */

.fx-toc { border-left: 1px solid var(--wp--preset--color--border); padding-left: 24px; position: sticky; top: 112px; }

.fx-toc-title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
	margin-block-end: 16px;
}

.fx-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fx-toc a { text-decoration: none; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); }
.fx-toc a:hover { color: var(--wp--preset--color--accent); }
.fx-toc a[aria-current="true"] { color: var(--wp--preset--color--accent); }

@media (max-width: 1024px) {
	.fx-toc { position: static; border-left: 0; padding-left: 0; }
}

/* ---------- FAQ details ---------- */

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--lg);
}

.wp-block-details summary:hover { color: var(--wp--preset--color--accent); }

.wp-block-details[open] summary { color: var(--wp--preset--color--accent); }

.wp-block-details { margin-block: 16px; transition: border-color var(--wp--custom--motion--fast) ease-out; }
.wp-block-details[open] { border-color: var(--wp--preset--color--accent); }

/* ---------- Checklist (service pages) ---------- */

.fx-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fx-checklist li { display: flex; gap: 12px; align-items: flex-start; }
.fx-checklist svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--wp--preset--color--accent); }

/* ---------- Form status + submit ---------- */

.fx-form-status {
	border: 1px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-dim);
	border-radius: var(--wp--custom--radius--md);
	padding: 16px 20px;
	margin-block-end: 24px;
}

.fx-form-status--success p { color: var(--wp--preset--color--contrast); margin: 0; }
.fx-form-status--error { border-color: var(--wp--preset--color--accent); }
.fx-form-status--error p { color: var(--wp--preset--color--accent); margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); }

.fx-field-actions button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 14px 24px;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--fast) ease-out;
}

.fx-field-actions button:hover { background: var(--wp--preset--color--accent-deep); }

/* ---------- Careers role cards ---------- */

.fx-role-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-block: 16px 24px; }
.fx-role-meta > div { display: grid; gap: 4px; }

.fx-role-openline { margin-block-start: 32px; }

/* ---------- Spec dl grid ---------- */

.fx-spec { display: grid; gap: 20px; margin: 0; }
.fx-spec > div { display: grid; gap: 4px; }
.fx-spec dd { margin: 0; }

/* ---------- Synops graphic ---------- */

.fx-synops-graphic { width: 100%; height: auto; border-radius: var(--wp--custom--radius--md); border: 1px solid var(--wp--preset--color--border); }

/* ---------- Hero copy stack ---------- */

/* Tagline as a technical stamp between copy and CTAs. */
.fx-hero-creed {
	margin-block: 32px 0;
	color: var(--wp--preset--color--muted);
}

/* Compact buttons: any button link set to the XS font size. */
.wp-block-buttons .wp-block-button__link.has-xs-font-size {
	padding: 10px 18px;
	letter-spacing: 0.06em;
}

/* Hero spacing rhythm. */
.fx-hero-inner .wp-block-heading {
	margin-block-end: 24px;
}

.fx-hero-inner .wp-block-buttons {
	margin-block-start: 32px;
}

/* Hero text column: span the flex row so constrained children center. */
.fx-hero-inner {
	width: 100%;
}

/* ---------- Tighter rhythm for sections that follow the hero/stats card ---------- */

.fx-section--flush { padding-block: 12px; }

@media (min-width: 1024px) {
	.fx-section--flush { padding-block: 12px; }
}

/* ---------- Process band: tight 12px rhythm, full-width like CTA band ---------- */

/* Same surface + gold wash + texture + hairline as the CTA band, 12px rhythm. */
.fx-section.fx-process {
	padding-block: 12px;
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--accent) 3%, transparent) 100%),
		var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--border);
}

/* Break out of the constrained 1240px main so the background spans edge to edge. */
.fx-section.fx-process.alignfull {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw;
	width: 100vw;
	/* Inner content stays on the 1240px grid, same as the CTA band. */
	padding-inline: max(24px, calc((100vw - 1240px) / 2));
}

/* Keep the dot fill matched to the band so the timeline line stays masked. */
.fx-process .fx-step-dot { background: var(--wp--preset--color--surface); }

/* Breathing room inside the tight outer rhythm. */
.fx-process .fx-process-heading { margin-block-end: 32px; }

.fx-process .fx-step h3 {
	font-size: var(--wp--preset--font-size--lg);
	margin-block: 0 8px;
}

.fx-process .fx-step p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	max-width: 28ch;
}

/* Process heading: keep on one line by allowing the wider column. */
.fx-process-heading .wp-block-heading {
	white-space: nowrap;
}

@media (max-width: 1023px) {
	.fx-process-heading .wp-block-heading { white-space: normal; }
}

/* ---------- Mobile interface + reader polish ---------- */

/* Phone header: shorter chrome, smaller mark, so content owns the fold. */
@media (max-width: 782px) {
	.site-header-inner { padding-block: 12px; gap: 12px; }
	.site-header .site-logo,
	.site-header .custom-logo-link { margin-left: 16px; }
	.site-header .site-logo img,
	.site-header .custom-logo img { max-height: 40px; }

	/* Full-screen menu: list starts under the real header height and items
	   get comfortable, thumb-sized rows. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: calc(var(--fx-header-h, 86px) + 24px) 20px 40px;
		gap: 4px;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		padding-block: 8px;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
		font-size: var(--wp--preset--font-size--xl);
	}
}

/* Reading view: relaxed long-form rhythm and legible type on phones. */
@media (max-width: 600px) {
	/* Long-form: taller leading and even paragraph spacing. */
	.entry-content,
	.wp-block-post-content { line-height: 1.75; }

	.entry-content p,
	.wp-block-post-content p { margin-block: 1.15em 0; }

	.entry-content li + li,
	.wp-block-post-content li + li { margin-block-start: 0.6em; }

	.entry-content a,
	.wp-block-post-content a { padding-block: 2px; }

	/* Tap targets stay >= 44px tall. */
	.wp-block-button__link,
	.fx-field-actions button { min-height: 44px; }

	/* Hero copy: less sky above the headline, shorter fold. */
	.fx-hero { min-height: 68vh; max-height: 68vh; }
	.fx-hero-inner { padding-block: 104px 72px; }

	/* Breadcrumb and meta rows breathe less on small screens. */
	.fx-breadcrumb { margin-block-end: 24px; gap: 6px; }
	.wp-block-post-date,
	.wp-block-post-featured-image { margin-block-end: 24px; }

	/* Wide content keeps its shape by scrolling instead of cramping. */
	.entry-content .wp-block-table { font-size: var(--wp--preset--font-size--xs); }
	.entry-content .wp-block-table td,
	.entry-content .wp-block-table th { padding: 8px 10px; }
	.wp-block-code,
	.wp-block-preformatted,
	pre { overflow-x: auto; max-width: 100%; }
	.wp-block-table,
	.wp-block-group.is-nowrap.is-layout-flex { max-width: 100%; }

	/* Footer stacks to one column with a leaner chrome. */
	.fx-footer-grid { gap: 32px; }
	.site-footer { padding-block: 40px 32px; }
	.site-footer hr.wp-block-separator { margin-block: 32px; }

	/* FAQ rows are taller targets on touch. */
	.wp-block-details summary { padding-block: 8px; }
}

/* Very small phones: never let text butt against the edges. */
@media (max-width: 420px) {
	.site-header-inner { gap: 8px; }
	.entry-content .wp-block-table { font-size: 0.75rem; }
}

/* ---------- Homepage + footer mobile layout ----------

   Sections that live inside main (proof, services, capability splits,
   stats, long-form) get their gutter from main itself; full-bleed bands
   (hero, process, clients, synops, CTA, footer) get their own inset so
   copy never touches or slides behind a screen edge on phones. */

@media (max-width: 781px) {
	/* Global content gutter: every main child inherits this inset. */
	main#fx-content { padding-inline: 24px; }

	/* Hero is full-bleed; give the copy its own inset (the media edge stays
	   flush to the viewport even though main is now padded). */
	main#fx-content .fx-hero {
		margin-inline: calc(50% - 50vw);
		width: 100vw;
	}
	.fx-hero-inner { padding-inline: 24px; }

	/* Footer is full-bleed; inset the whole grid. */
	.site-footer { padding-inline: 24px; }
	.fx-footer-grid > .wp-block-group { flex-basis: 100%; }

	/* Stats band: rely on the parent gutter and stay centered. */
	.fx-stats { margin-inline: auto; max-width: 100%; }
	.fx-stats > *:first-child { flex-basis: 100%; }

	/* CTA band: gutter already applies at all widths; stack the columns and
	   lean the button left instead of floating it to the clipped edge. */
	.fx-cta-band .wp-block-columns { row-gap: 28px; }
	.fx-cta-band .wp-block-buttons { justify-content: flex-start; }
	.fx-cta-band .wp-block-column { min-width: 0; }
}

@media (max-width: 600px) {
	/* Process timeline: one column so step copy never sits in half-width. */
	.fx-timeline { grid-template-columns: 1fr; }

	/* Service cards: keep the padding comfortable rather than boxy. */
	.fx-card { padding: 24px; }

	/* Any wide content may only scroll inside its own box, never the page. */
	.wp-block-columns { min-width: 0; }
}

/* Belt-and-braces: no horizontal page scroll from the marquee, full-bleed
   bands, or wide tables on any viewport. */
body { overflow-x: clip; }