/* ============================================================================
   Mindward Collective — Components
   ----------------------------------------------------------------------------
   Header, navigation, heroes, cards, proof band, pillars, logo marquee,
   comparison, services, FAQ, illustration card, CTA bands, contact layout and
   footer.

   Header and navigation rules target GeneratePress's own markup
   (#masthead / #site-navigation / .menu-toggle) rather than replacing it, so
   GeneratePress keeps ownership of the mobile-menu ARIA state, focus handling
   and keyboard behaviour. Nothing here reimplements that logic.

   All values reference tokens from design-system.css.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1 · Site header — GeneratePress markup
   ------------------------------------------------------------------------ */

.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--mw-z-header);
	padding-block: 14px;
	background-color: transparent;
	transition:
		background-color var(--mw-dur-slow) var(--mw-ease-out),
		box-shadow var(--mw-dur-slow) var(--mw-ease-out);
}

.site-header .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mw-gutter);
	max-width: var(--mw-w-content);
	margin-inline: auto;
	padding: 0 var(--mw-gutter);
}

@media (min-width: 768px) {
	.site-header .inside-header {
		padding-inline: var(--mw-gutter-lg);
	}
}

.site-header .site-logo {
	display: block;
	line-height: 0;
}

.site-header .site-logo img {
	width: 168px;
	height: auto;
}

/* Solid state.
   The Mixed logo is a white wordmark with a blue icon: it is built for dark
   grounds, so the solid header is brand navy. A white bar would erase it. */
.site-header.mw-header-solid,
body.mw-header-always-solid .site-header {
	background-color: rgba(6, 21, 43, 0.97);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 var(--mw-navy-700);
}

/* ---------------------------------------------------------------------------
   2 · Desktop navigation — GeneratePress markup
   ------------------------------------------------------------------------ */

.main-navigation,
.main-navigation .inside-navigation {
	background-color: transparent;
	padding: 0;
}

.main-navigation .main-nav > ul {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
}

.main-navigation .main-nav ul li a {
	position: relative;
	padding: 6px 0;
	line-height: 1.4;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-semibold);
	font-size: 15.5px;
	color: var(--mw-white);
	text-decoration: none;
	background-color: transparent;
}

/* GeneratePress emits `.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a
   { color: var(--accent) }` as inline CSS — (0,4,3), which outranks a plain
   `.main-navigation .main-nav ul li a:hover` at (0,3,3). Left alone it repaints
   every hovered link GeneratePress blue (#1e73be): illegible on the navy header,
   and invisible on the Contact Us pill, which is already blue. The `> a` and the
   `:not()` here match that specificity, and this stylesheet loads later. */
.main-navigation .main-nav ul li:not(.mw-nav-cta) > a:hover,
.main-navigation .main-nav ul li:not(.mw-nav-cta) > a:focus,
.main-navigation .main-nav ul li:not(.mw-nav-cta).current-menu-item > a {
	color: var(--mw-white);
	background-color: transparent;
}

/* Underline sweep. Excluded from the menu item styled as a button. */
.main-navigation .main-nav ul li:not(.mw-nav-cta) > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: var(--mw-accent);
	transition: width var(--mw-dur-base) var(--mw-ease-out);
}

.main-navigation .main-nav ul li:not(.mw-nav-cta) > a:hover::after,
.main-navigation .main-nav ul li:not(.mw-nav-cta) > a:focus::after,
.main-navigation .main-nav ul li:not(.mw-nav-cta).current-menu-item > a::after {
	width: 100%;
}

/* The final menu item carries the CSS class `mw-nav-cta` (set on the menu item
   in Appearance → Menus) and renders as the primary button. */
.main-navigation .main-nav ul li.mw-nav-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 32px;
	border: 2px solid transparent;
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-accent);
	color: var(--mw-white);
	font-size: 19px;
	font-weight: var(--mw-weight-bold);
	transition:
		background-color var(--mw-dur-base) var(--mw-ease-out),
		transform var(--mw-dur-base) var(--mw-ease-out);
}

.main-navigation .main-nav ul li.mw-nav-cta > a:hover,
.main-navigation .main-nav ul li.mw-nav-cta > a:focus {
	background-color: var(--mw-blue-600);
	color: var(--mw-white);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   3 · Mobile navigation
   GeneratePress owns the toggle button, aria-expanded and the .toggled class.
   These rules only change how the toggled menu is presented.
   ------------------------------------------------------------------------ */

.site-header .menu-toggle {
	display: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--mw-radius-md);
	background: none;
	color: var(--mw-white);
	line-height: 1;
	cursor: pointer;
}

.site-header .menu-toggle:hover,
.site-header .menu-toggle:focus {
	background: none;
	color: var(--mw-white);
}

@media (max-width: 1024px) {
	/* Keep the logo and toggle above the overlay so the menu stays closable
	   and the brand stays visible while it is open. */
	.site-header .menu-toggle {
		display: grid;
		place-items: center;
		position: relative;
		z-index: var(--mw-z-header-controls);
	}

	.site-header .site-logo,
	.site-header .site-branding {
		position: relative;
		z-index: var(--mw-z-header-controls);
	}

	/* backdrop-filter on an ancestor creates a containing block for fixed
	   descendants, which would trap the overlay inside the header. Use an
	   opaque header at mobile widths instead. */
	.site-header.mw-header-solid,
	body.mw-header-always-solid .site-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: var(--mw-navy-950);
	}

	.main-navigation .main-nav {
		position: fixed;
		inset: 0;
		z-index: var(--mw-z-nav-overlay);
		display: grid;
		place-items: center;
		background-color: var(--mw-navy-950);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--mw-dur-slow) var(--mw-ease-out),
			visibility var(--mw-dur-slow);
	}

	.main-navigation.toggled .main-nav {
		opacity: 1;
		visibility: visible;
	}

	.main-navigation .main-nav > ul {
		flex-direction: column;
		justify-content: center;
		gap: 8vh;
	}

	.main-navigation .main-nav ul li a {
		font-size: clamp(28px, 6vw, 40px);
		font-weight: var(--mw-weight-black);
	}

	.main-navigation .main-nav ul li.mw-nav-cta > a {
		font-size: clamp(22px, 4.5vw, 30px);
	}

	body.mw-nav-locked {
		overflow: hidden;
	}
}

/* ---------------------------------------------------------------------------
   4 · Heroes
   ------------------------------------------------------------------------ */

/* Homepage hero — full-bleed photograph with a legibility scrim. */
.mw-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(92vh, 900px);
	padding-block: 160px 120px;
	overflow: hidden;
	color: var(--mw-white);
	text-align: center;
}

.mw-hero .mw-hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.mw-hero .mw-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 40%;
}

.mw-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(6, 21, 43, 0.55) 0%,
		rgba(6, 21, 43, 0.35) 45%,
		rgba(6, 21, 43, 0.62) 100%
	);
}

.mw-hero h1,
.mw-hero .mw-display-xl {
	color: var(--mw-white);
}

.mw-hero em {
	font-style: italic;
	font-weight: var(--mw-weight-bold);
}

.mw-hero .mw-btn {
	margin-top: 40px;
}

/* Interior page hero — compact, no photograph. */
.mw-page-hero {
	padding-top: clamp(140px, 18vw, 200px);
	padding-bottom: clamp(56px, 7vw, 96px);
}

/* ---------------------------------------------------------------------------
   5 · Proof-stat band
   ------------------------------------------------------------------------ */

.mw-stat-band {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 56px;
	padding: clamp(40px, 5vw, 64px);
	background-color: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-radius-2xl);
	box-shadow: var(--mw-shadow-card);
}

@media (min-width: 900px) {
	.mw-stat-band {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.mw-stat {
	min-width: 0;
	text-align: center;
}

.mw-stat .mw-stat-num {
	display: block;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-black);
	/* Upper bound trimmed from 76px so four numerals cannot overflow a
	   narrow-phone column. Resolves the ~12px horizontal scroll at 390px. */
	font-size: clamp(44px, 5.2vw, 72px);
	line-height: 1;
	letter-spacing: var(--mw-tracking-display-xl);
	font-variant-numeric: tabular-nums;
	color: var(--mw-accent);
}

.mw-stat .mw-stat-label {
	display: block;
	margin-top: 10px;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	font-size: 15px;
	color: var(--mw-navy-900);
}

.mw-bg-navy .mw-stat .mw-stat-label {
	color: var(--mw-white);
}

/* ---------------------------------------------------------------------------
   6 · Cards and split cards
   ------------------------------------------------------------------------ */

.mw-card {
	padding: var(--mw-pad-card);
	background-color: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-radius-lg);
	box-shadow: var(--mw-shadow-card);
}

.mw-split-card {
	display: grid;
	gap: 0;
	overflow: hidden;
	background-color: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-radius-2xl);
	box-shadow: var(--mw-shadow-card);
}

@media (min-width: 900px) {
	.mw-split-card {
		grid-template-columns: 5fr 7fr;
	}

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

.mw-split-card .mw-split-media {
	position: relative;
	min-height: 320px;
	margin: 0;
}

.mw-split-card .mw-split-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-split-card .mw-split-body {
	padding: var(--mw-pad-card-lg);
}

.mw-split-card .mw-split-body > * + * {
	margin-top: 18px;
}

/* ---------------------------------------------------------------------------
   7 · Growth-engine pillars
   ------------------------------------------------------------------------ */

.mw-pillars {
	display: grid;
	gap: var(--mw-gap);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	text-align: left;
}

.mw-pillar img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	margin-bottom: 20px;
}

.mw-pillar h3,
.mw-pillar h4 {
	font-size: 20px;
	margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
   8 · Organisation-logo marquee
   ------------------------------------------------------------------------ */

.mw-marquee-section {
	overflow: hidden;
}

.mw-marquee {
	position: relative;
	overflow: hidden;
	margin-top: 48px;
}

.mw-marquee-track {
	display: flex;
	align-items: center;
	gap: clamp(48px, 6vw, 88px);
	width: max-content;
	animation: mw-marquee var(--mw-marquee-duration) linear infinite;
}

.mw-marquee:hover .mw-marquee-track,
.mw-marquee:focus-within .mw-marquee-track,
.mw-marquee-track.is-paused {
	animation-play-state: paused;
}

/* The logo files are white-canvas WebP with generous padding. Rendering them at
   full colour and multiplying melts the canvas into the white section.
   Grayscale and opacity treatments wash these particular files out entirely. */
.mw-marquee img {
	height: 88px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--mw-dur-slow) var(--mw-ease-out);
}

.mw-marquee img:hover {
	transform: scale(1.06);
}

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

.mw-disclaimer {
	max-width: var(--mw-w-narrow);
	margin-top: 40px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   9 · Comparison columns
   ------------------------------------------------------------------------ */

.mw-compare {
	display: grid;
	gap: var(--mw-gap);
	margin-top: 56px;
	text-align: left;
}

@media (min-width: 1024px) {
	.mw-compare {
		grid-template-columns: 1fr 1fr;
	}
}

.mw-compare-col {
	padding: clamp(28px, 4vw, 44px);
	border-radius: var(--mw-radius-xl);
}

.mw-compare-them {
	background-color: var(--mw-ice-50);
	border: 1px solid var(--mw-line);
}

.mw-compare-us {
	background: linear-gradient(150deg, var(--mw-navy-800), var(--mw-navy-950));
	color: var(--mw-white);
}

.mw-compare-col h3,
.mw-compare-col h4 {
	margin-bottom: 24px;
	font-size: 22px;
	text-align: center;
}

.mw-compare-them h3,
.mw-compare-them h4 {
	color: var(--mw-navy-900);
}

.mw-compare-us h3,
.mw-compare-us h4 {
	color: var(--mw-white);
}

.mw-compare-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mw-compare-col li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding-block: 10px;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-semibold);
}

.mw-compare-them li {
	color: var(--mw-slate-600);
	font-weight: var(--mw-weight-medium);
}

/* Glyph rendered from CSS so the list stays plain, editable markup:
   a tick by default, an X in the Standard Agencies column. */
.mw-compare-col li::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	transform: translateY(3px);
	background-color: currentColor;
	-webkit-mask: var(--mw-tick-mask) no-repeat center / contain;
	mask: var(--mw-tick-mask) no-repeat center / contain;
}

/* Standard Agencies gets a cross, not a tick — an immediate visual read of
   "this is the option you do not want" — in red, per the client's later call.
   The red is the deep --mw-red-600 rather than a bright alarm red, so it still
   belongs to a navy-and-blue palette. Only the glyph is red; the row text stays
   slate, which keeps the column readable rather than turning it into a warning
   list. The Mindward column keeps the accent-blue tick, so the two columns
   still read as "avoid" against "choose" at a glance. */
.mw-compare-them li::before {
	color: var(--mw-negative);
	-webkit-mask-image: var(--mw-cross-mask);
	mask-image: var(--mw-cross-mask);
}

.mw-compare-us li::before {
	color: var(--mw-accent);
}

/* Both glyphs share the 20x20 viewBox, the 2.4 stroke and the round caps, and
   both are optically centred on y=10, so the single translateY(3px) above
   aligns either one identically against the baseline-aligned row text. */
:root {
	--mw-tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 11l4.5 4.5L17 5'/%3E%3C/svg%3E");
	--mw-cross-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4.8 4.8l10.4 10.4M15.2 4.8L4.8 15.2'/%3E%3C/svg%3E");
}

/* The call to action that closes the comparison sat flush against the bottom of
   the cards — the buttons block carries no margin of its own here. Scoped to
   the adjacent sibling so it cannot reach any other button row on the site. */
.mw-compare + .wp-block-buttons,
.mw-compare + .mw-btn-row {
	margin-top: clamp(24px, 3vw, 32px);
}

/* Same cause, different band: where a CTA section follows its button with a
   secondary text link, the buttons block has no bottom margin and the
   paragraph no top margin, so the link sat flush against the button. Scoped to
   .mw-cta-band, and to the adjacent sibling only, so it cannot reach any other
   button row. Tighter than the comparison gap above — the link belongs WITH
   the button as a secondary action, so it should read as related, not as the
   next thing down the page. */
.mw-cta-band .wp-block-buttons + * {
	margin-top: clamp(20px, 2.5vw, 28px);
}

/* ---------------------------------------------------------------------------
   10 · Provider-category list
   ------------------------------------------------------------------------ */

.mw-org-list {
	display: grid;
	gap: 10px 32px;
	margin-block: 20px;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.mw-org-list {
		grid-template-columns: 1fr 1fr;
	}
}

.mw-org-list.mw-org-list-single {
	grid-template-columns: 1fr;
}

.mw-org-list li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	font-weight: var(--mw-weight-medium);
}

.mw-org-list li::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--mw-accent);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   11 · Values grid
   ------------------------------------------------------------------------ */

.mw-values {
	display: grid;
	gap: var(--mw-gap);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-top: 56px;
	text-align: left;
}

.mw-values .mw-card h3,
.mw-values .mw-card h4 {
	margin-bottom: 10px;
	font-size: 20px;
}

/* Five cards on the auto-fit grid above land 4 + 1: the fifth is stranded
   alone on a second row with three empty slots beside it, which reads as
   something missing rather than as a layout.

   Laying five out on a six-column grid instead gives three across, then two
   centred beneath — every card the same width, and both rows symmetric about
   the same axis, so the second row reads as deliberate. The narrower band gets
   the same treatment on four columns: 2 + 2 + 1 with the last card centred.

   Guarded on the card count with :has(), so a four- or six-card list keeps the
   auto-fit behaviour that already suits it — and if :has() is unsupported the
   whole block is simply dropped and auto-fit stands. */

@media (min-width: 640px) and (max-width: 899.98px) {
	.mw-values:has(.mw-card:nth-child(5):last-child) {
		grid-template-columns: repeat(4, 1fr);
	}

	.mw-values:has(.mw-card:nth-child(5):last-child) .mw-card {
		grid-column: span 2;
	}

	.mw-values:has(.mw-card:nth-child(5):last-child) .mw-card:nth-child(5) {
		grid-column: 2 / span 2;
	}
}

@media (min-width: 900px) {
	.mw-values:has(.mw-card:nth-child(5):last-child) {
		grid-template-columns: repeat(6, 1fr);
	}

	.mw-values:has(.mw-card:nth-child(5):last-child) .mw-card {
		grid-column: span 2;
	}

	/* Placing the fourth card explicitly is enough — the fifth auto-places
	   beside it, and the pair ends up centred under the three above. */
	.mw-values:has(.mw-card:nth-child(5):last-child) .mw-card:nth-child(4) {
		grid-column: 2 / span 2;
	}
}

/* ---------------------------------------------------------------------------
   12 · Services
   ------------------------------------------------------------------------ */

.mw-anchor-map {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
	justify-content: center;
}

.mw-anchor-map a {
	padding: 10px 18px;
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-blue-100);
	color: var(--mw-navy-900);
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-semibold);
	font-size: 14.5px;
	text-decoration: none;
	transition:
		background-color var(--mw-dur-fast) var(--mw-ease-out),
		color var(--mw-dur-fast) var(--mw-ease-out);
}

.mw-anchor-map a:hover,
.mw-anchor-map a:focus {
	background-color: var(--mw-blue-700);
	color: var(--mw-white);
	text-decoration: none;
}

.mw-service {
	scroll-margin-top: 110px;
}

.mw-service + .mw-service {
	margin-top: clamp(64px, 8vw, 112px);
}

.mw-service-grid {
	display: grid;
	gap: var(--mw-gap-lg);
	align-items: start;
}

@media (min-width: 900px) {
	.mw-service-grid {
		grid-template-columns: 5fr 6fr;
	}

	.mw-service:nth-of-type(even) .mw-service-grid > .mw-service-info {
		order: 2;
	}
}

.mw-service-icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
	margin-bottom: 18px;
}

.mw-deliverables {
	display: grid;
	gap: 10px;
	margin-top: 8px;
	padding: var(--mw-pad-card);
	list-style: none;
	background-color: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-radius-lg);
	box-shadow: var(--mw-shadow-card);
}

.mw-deliverables li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	font-weight: var(--mw-weight-medium);
}

.mw-deliverables li::before {
	content: "\2192"; /* → */
	flex: 0 0 auto;
	color: var(--mw-accent);
	font-weight: var(--mw-weight-bold);
}

.mw-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.mw-badge {
	display: inline-block;
	padding: 10px 16px;
	border-radius: var(--mw-radius-sm);
	background-color: var(--mw-blue-100);
	color: var(--mw-navy-900);
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	font-size: 13px;
	letter-spacing: var(--mw-tracking-badge);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   13 · FAQ / accordion
   Uses native <details>/<summary>, which is keyboard-operable without script.
   ------------------------------------------------------------------------ */

.mw-faq {
	max-width: var(--mw-w-narrow);
	margin-inline: auto;
	margin-top: 48px;
	text-align: left;
}

.mw-faq details {
	border-bottom: 1px solid var(--mw-line);
}

.mw-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--mw-gutter);
	padding-block: 24px;
	list-style: none;
	cursor: pointer;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	font-size: 18px;
	color: var(--mw-navy-900);
}

.mw-faq summary::-webkit-details-marker {
	display: none;
}

.mw-faq summary::after {
	content: "+";
	font-size: 26px;
	font-weight: var(--mw-weight-regular);
	color: var(--mw-accent);
	transition: transform var(--mw-dur-base) var(--mw-ease-out);
}

.mw-faq details[open] summary::after {
	transform: rotate(45deg);
}

.mw-faq .mw-faq-answer {
	max-width: var(--mw-w-article);
	padding-bottom: 28px;
}

/* ---------------------------------------------------------------------------
   14 · Editorial illustration card
   handshake2.webp is line art, not a photograph. It is contained and scaled
   proportionally here — never object-fit: cover, which crops the drawing and
   stretches it to viewport width.
   ------------------------------------------------------------------------ */

.mw-illustration-card {
	position: relative;
	display: grid;
	gap: clamp(28px, 3.5vw, 40px);
	align-items: center;
	max-width: var(--mw-w-narrow);
	margin-inline: auto;
	padding: clamp(36px, 5.5vw, 72px);
	overflow: hidden;
	background-color: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-radius-3xl);
	box-shadow: var(--mw-shadow-lift);
	text-align: center;
}

.mw-illustration-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 78%;
	background: radial-gradient(78% 100% at 50% 0%, var(--mw-blue-050), transparent 72%);
	pointer-events: none;
}

.mw-illustration-card .mw-illustration-art {
	position: relative;
	display: grid;
	place-items: center;
	margin: 0;
}

.mw-illustration-card .mw-illustration-art img {
	width: 100%;
	max-width: 320px;
	height: auto;
}

.mw-illustration-card figcaption,
.mw-illustration-card .mw-illustration-caption {
	position: relative;
}

.mw-illustration-card .mw-illustration-statement {
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	font-size: clamp(21px, 2.2vw, 28px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--mw-navy-900);
	text-wrap: balance;
}

@media (min-width: 760px) {
	.mw-illustration-card {
		grid-template-columns: minmax(0, 300px) 1fr;
		gap: clamp(36px, 4.5vw, 60px);
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
   15 · CTA band
   ------------------------------------------------------------------------ */

.mw-cta-band {
	text-align: center;
}

.mw-cta-band .mw-lead {
	margin-top: 24px;
}

.mw-cta-band .mw-btn {
	margin-top: 40px;
}

/* ---------------------------------------------------------------------------
   16 · Contact layout and numbered steps
   ------------------------------------------------------------------------ */

.mw-contact-grid {
	display: grid;
	gap: 48px;
	align-items: start;
}

@media (min-width: 900px) {
	.mw-contact-grid {
		grid-template-columns: 5fr 6fr;
	}
}

.mw-steps {
	counter-reset: mw-step;
	display: grid;
	gap: 28px;
	margin-top: 32px;
	padding: 0;
	list-style: none;
}

.mw-steps li {
	counter-increment: mw-step;
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 20px;
	align-items: start;
}

.mw-steps li::before {
	content: counter(mw-step);
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--mw-blue-100);
	color: var(--mw-blue-700);
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-black);
	font-size: 18px;
}

.mw-steps h3 {
	margin-bottom: 4px;
	font-size: 18px;
}

/* ---------------------------------------------------------------------------
   17 · Footer
   Rendered by a GeneratePress Block Element (Site Footer). These rules style
   that block output; the copy itself stays editable in WordPress.
   ------------------------------------------------------------------------ */

.site-footer,
.mw-footer {
	background-color: var(--mw-navy-950);
	color: var(--mw-slate-400);
}

.mw-footer {
	padding-block: clamp(64px, 8vw, 96px) 40px;
}

.mw-footer-grid {
	display: grid;
	gap: 40px;
	align-items: start;
}

@media (min-width: 900px) {
	.mw-footer-grid {
		grid-template-columns: 1.2fr 1fr 1fr;
	}
}

.mw-footer img {
	width: 180px;
	height: auto;
}

.mw-footer .mw-footer-tagline {
	max-width: 34ch;
	margin-top: 20px;
	font-style: italic;
}

.mw-footer-nav {
	display: grid;
	gap: 12px;
	padding: 0;
	list-style: none;
}

.mw-footer-nav li {
	margin: 0;
}

.mw-footer-nav a {
	color: var(--mw-white);
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-semibold);
	text-decoration: none;
}

.mw-footer-nav a:hover,
.mw-footer-nav a:focus {
	color: var(--mw-accent);
	text-decoration: none;
}

.mw-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--mw-navy-700);
	font-size: var(--mw-size-small);
}

/* Four legal links share this row. Separated by a column gap rather than by
   pipe or bullet glyphs: at 390px the row wraps to two or three lines, and a
   glyph-based separator leaves an orphan mark stranded at a line end. The gap
   is wide enough that "Privacy Policy" and "Privacy & HIPAA Practices" cannot
   be misread as one link. */
.mw-footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.mw-footer-legal a {
	color: var(--mw-slate-400);
	text-decoration: none;
}

.mw-footer-legal a:hover,
.mw-footer-legal a:focus {
	color: var(--mw-white);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   18 · Core block wrappers
   Page content is built from core blocks, which insert their own wrappers:
   core/image adds a <figure class="wp-block-image">, core/group adds
   .wp-block-group, core/buttons adds a flex row. These rules neutralise those
   wrappers where a component expects a direct parent-child relationship, so the
   layout behaves the same as it does in the static source.
   ------------------------------------------------------------------------ */

/* Groups are pure layout containers here; the design system owns their spacing. */
.mw-container.wp-block-group,
.mw-section.wp-block-group,
.mw-section-tight.wp-block-group,
.mw-section-major.wp-block-group {
	margin-block: 0;
}

/* An image inside a bleed area must not be constrained by the figure. */
.mw-hero-bg figure,
.mw-split-media figure,
.mw-post-media figure {
	position: static;
	margin: 0;
	max-width: none;
}

.mw-split-media .wp-block-image,
.mw-hero-bg .wp-block-image {
	height: 100%;
}

/* The pillar and service icons are figures; keep their box tight to the image. */
.mw-pillar figure,
.mw-service-info figure.wp-block-image {
	margin: 0;
}

.mw-pillar figure img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	margin-bottom: 20px;
}

.mw-service-info figure.mw-service-icon {
	width: 56px;
	margin-bottom: 18px;
}

.mw-service-info figure.mw-service-icon img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

/* Buttons blocks inside centred sections. */
.mw-center .wp-block-buttons,
.mw-cta-band .wp-block-buttons {
	justify-content: center;
}

.mw-hero .wp-block-buttons {
	margin-top: 40px;
	justify-content: center;
}

.mw-cta-band .wp-block-buttons {
	margin-top: 40px;
}

/* core/details is the FAQ accordion. */
.mw-faq .wp-block-details {
	border-bottom: 1px solid var(--mw-line);
}

.mw-faq .wp-block-details > summary {
	padding-block: 24px;
}

/* Lists inside comparison columns and cards lose the core indent. */
.mw-compare-col .wp-block-list,
.mw-org-list.wp-block-list {
	padding-left: 0;
	list-style: none;
}

/* .mw-deliverables is a CARD, not a bare list: its padding is the card's inset.
   Resetting padding-left here (as the browser's default ul indent otherwise
   requires) would drop the arrows flush against the card's left border. */
.mw-deliverables.wp-block-list {
	list-style: none;
}

/* ---------------------------------------------------------------------------
   19 · Content-area guards
   GeneratePress renders pages inside .site-content > .content-area. Full-width
   sections need the container padding removed so bleeds reach the viewport.

   The outermost wrapper matters as much as the inner ones. In One Container
   mode GeneratePress puts BOTH the 1200px max-width (.grid-container) and the
   content background colour (.one-container .container, emitted as inline CSS
   after this stylesheet) on div.site.grid-container. Left alone, that opaque
   white panel paints over .mw-hero-bg — which is position:absolute and
   z-index:-2 — so the hero photograph disappears and the white hero headline
   sits on white. The page then looks like it failed to load even though every
   asset returned 200 and every script ran.

   .site-content is guarded here too rather than in the Customizer. Older
   GeneratePress versions exposed a Content Padding control under Layout →
   Container; 3.6 removed it, so its 40px default is no longer switchable off
   from the Customizer at all and has to be neutralised in CSS. Left in, it
   puts a 40px white gutter down both sides of every full-bleed section.
   ------------------------------------------------------------------------ */

body.mw-fullwidth .site.grid-container,
body.mw-fullwidth .site-content {
	max-width: none;
	padding: 0;
	background-color: transparent;
}

/* .mw-article-body is exempt. On a single Journal article the entry-content IS
   the article body (single.php gives it both classes), and it is already inside
   a .mw-container — it wants the reading measure from journal.css and the
   `> * + *` rhythm that gives paragraphs their spacing. Without the exemption
   these guards strip both: every paragraph runs edge to edge at 1136px and butts
   directly against the next with no gap at all. */
body.mw-fullwidth .site-content .content-area,
body.mw-fullwidth .site-content .site-main,
body.mw-fullwidth .site-content .entry-content:not(.mw-article-body) {
	margin: 0;
	padding: 0;
	max-width: none;
}

body.mw-fullwidth .site-content .entry-content:not(.mw-article-body) > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
   20 · Block-group inner containers
   Every layout in this design was authored against a static build where a
   group's children were its direct children. WordPress does not render core
   groups that way on a CLASSIC theme: because GeneratePress does not declare
   layout support in theme.json, WordPress restores the legacy
   `.wp-block-group__inner-container` wrapper inside every group.

   Any group that IS a grid therefore ends up with exactly one grid item — the
   wrapper — and its real children stack inside it at full width. Visually:
   the values grid, the pillars, the comparison columns, the split cards, the
   services grid, the contact grid and the footer all collapse to a single
   column at every breakpoint, on desktop as much as on mobile.

   `display: contents` removes the wrapper from the box tree without touching
   the markup, so the children become grid items of the group itself — which is
   what the design assumed all along. It is inert if the wrapper is ever
   dropped (a future theme.json, a block theme), because then it matches
   nothing. The wrapper is a presentational div with no role or semantics, so
   removing its box has no accessibility consequence.

   GeneratePress also gives that wrapper its own padding —
   `.site-main .wp-block-group__inner-container { padding: 40px }`, 30px below
   768px. Because the wrapper is emitted for EVERY group, that padding compounds
   once per nesting level: on the contact page a section, its container and the
   grid stacked three of them, insetting the content 84px from the left on a
   390px screen and pushing the page 12px wider than the viewport. Every mw-
   section already declares its own padding, so the correct value here is zero.
   ------------------------------------------------------------------------ */

body.mw-fullwidth .site-main .wp-block-group__inner-container {
	padding: 0;
}

:is(
	.mw-hero,
	.mw-values,
	.mw-pillars,
	.mw-compare,
	.mw-service-grid,
	.mw-contact-grid,
	.mw-split-card,
	.mw-footer-grid
) > .wp-block-group__inner-container {
	display: contents;
}

/* ---------------------------------------------------------------------------
   21 · Section rhythm between neighbours
   Section spacing is `padding-block`, so the gap between any two sections is
   the SUM of the first one's bottom and the second one's top. That makes the
   gap an accident of which two section classes happen to be adjacent: measured
   across the built pages it ranged from 208px to 400px with no pattern.

   Where the ground colour changes, the doubled space is doing a job — it keeps
   a coloured band from crowding the content above it. Where the ground does NOT
   change, the two paddings merge into one long void with nothing to explain it,
   and that is what reads as "too much space" — 320px of nothing between two
   white sections on Services and Who We Are.

   So: collapse the top padding only when the boundary carries no colour change.
   .mw-bg-dots is not a colour change — it paints a dot pattern with no
   background-color, so it sits on whatever ground is behind it.
   ------------------------------------------------------------------------ */

:is(.mw-page-hero, .mw-section, .mw-section-tight, .mw-section-major):not(.mw-bg-ice):not(.mw-bg-navy)
+ :is(.mw-section, .mw-section-tight, .mw-section-major):not(.mw-bg-ice):not(.mw-bg-navy) {
	padding-top: 0;
}

.mw-bg-ice + .mw-bg-ice,
.mw-bg-navy + .mw-bg-navy {
	padding-top: 0;
}

/* ---------------------------------------------------------------------------
   22 · Legal documents
   Privacy Policy, Privacy & HIPAA Practices, Terms of Use, Accessibility.

   These pages are read, not scanned, so the job here is legibility rather than
   presentation: one column at a reading measure, a heading hierarchy you can
   navigate by eye, and enough air between clauses to find your place again.
   Deliberately no reveal animations and no marketing components — the design
   system's type, colour and spacing, and nothing else.
   ------------------------------------------------------------------------ */

.mw-legal {
	max-width: var(--mw-w-article);
	margin-inline: auto;
	text-align: left;
}

/* Rhythm via the owl, so every child gets separation without having to
   enumerate block types. Two things to know about the selectors:

   1. Paragraphs zero only their BOTTOM margin. Zeroing the shorthand would
      also assert margin-top at (0,1,1) and silently cancel this rule — the
      exact trap journal.css fell into.
   2. The owl has to reach THROUGH .wp-block-group__inner-container. WordPress
      emits that wrapper inside every core group on a classic theme, so
      `.mw-legal > * + *` matches the wrapper alone and never the content.
      Both forms are listed so the rule holds whether or not it is emitted. */
.mw-legal > * + *,
.mw-legal > .wp-block-group__inner-container > * + * {
	margin-top: 1.4em;
}

.mw-legal > :first-child,
.mw-legal > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}

.mw-legal p {
	margin-bottom: 0;
	line-height: 1.7;
}

/* The owl is the only source of vertical rhythm here, so the block defaults
   that would otherwise add a second, inconsistent gap are cleared. */
.mw-legal h2,
.mw-legal h3,
.mw-legal ul,
.mw-legal ol {
	margin-bottom: 0;
}

.mw-legal h2 {
	margin-top: 2.1em;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	font-size: clamp(23px, 2.6vw, 28px);
	line-height: 1.25;
	color: var(--mw-text-heading);
}

.mw-legal h3 {
	margin-top: 1.7em;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-semibold);
	font-size: clamp(17.5px, 1.9vw, 19px);
	line-height: 1.4;
	color: var(--mw-text-heading);
}

.mw-legal ul,
.mw-legal ol {
	padding-left: 1.35em;
}

.mw-legal li {
	line-height: 1.7;
}

.mw-legal li + li {
	margin-top: 0.5em;
}

.mw-legal ul li::marker {
	color: var(--mw-accent);
}

.mw-legal a {
	color: var(--mw-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* A quiet aside for the "this is not a substitute for X" notes that legal
   copy needs to set apart without shouting. */
.mw-legal .mw-legal-callout {
	margin-top: 1.6em;
	padding: var(--mw-pad-card);
	border-left: 3px solid var(--mw-accent);
	border-radius: var(--mw-radius-md);
	background-color: var(--mw-bg-alt);
}

.mw-legal .mw-legal-callout > * + *,
.mw-legal .mw-legal-callout > .wp-block-group__inner-container > * + * {
	margin-top: 0.9em;
}

.mw-legal .mw-legal-callout > :first-child,
.mw-legal .mw-legal-callout > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}

/* The callout's own heading. It has to be an h2 so the document outline never
   skips a level (an h3 directly under the page h1 is a WCAG 1.3.1 failure),
   but visually it is a sub-note inside a box, not a document section — so it
   is held at the h3 type scale and given no leading gap. */
.mw-legal .mw-legal-callout :is(h2, h3, h4) {
	margin-top: 0;
	font-size: clamp(17.5px, 1.9vw, 19px);
	line-height: 1.35;
}

/* Effective / last-updated line under the page title. */
.mw-legal-dates {
	margin-top: 20px;
	color: var(--mw-text-muted);
	font-size: var(--mw-size-small);
	letter-spacing: 0.01em;
}

.mw-legal-dates span + span::before {
	content: "·";
	margin: 0 10px;
	color: var(--mw-slate-400);
}

@media (max-width: 600px) {
	.mw-legal p,
	.mw-legal li {
		line-height: 1.65;
	}

	.mw-legal .mw-legal-callout {
		padding: 20px;
	}

	.mw-legal-dates span {
		display: block;
	}

	.mw-legal-dates span + span::before {
		content: none;
	}
}