/* ManDeo — site-wide chrome (header + footer), matching SiteHeader.jsx / SiteFooter.jsx */

/* ---- Accessibility: skip link. Kadence's own .screen-reader-text isn't loaded (we don't
   enqueue the parent stylesheet), so this is self-contained rather than relying on it. ---- */
.mandeo-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--ink-900);
	color: var(--paper-050);
	padding: 14px 22px;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 500;
	border-radius: 0 0 var(--radius-1) 0;
}
.mandeo-skip-link:focus {
	left: 0;
	top: 0;
}

/* ---- Header ---- */
.mandeo-site-header-wrap {
	position: sticky;
	top: 0;
	z-index: 20;
}

.mandeo-header {
	height: var(--header-height);
	background: var(--paper-050);
	border-bottom: 1px solid var(--ink-200);
}
.mandeo-header__inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mandeo-header__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.mandeo-header__nav {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-left: auto;
	margin-right: 30px;
}
.mandeo-header__nav a {
	font-family: var(--font-ui);
	font-size: 14.5px;
	font-weight: 400;
	color: var(--ink-700);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
}
.mandeo-header__nav a:hover {
	color: var(--ink-900);
}
.mandeo-header__nav a.is-active {
	color: var(--ink-900);
	font-weight: 500;
	border-bottom-color: var(--copper-500);
}

.mandeo-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
}
.mandeo-header__locales {
	color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */
}
.mandeo-header__toggle {
	display: none;
	background: none;
	border: none;
	padding: 4px;
	color: var(--ink-900);
	cursor: pointer;
}

.mandeo-mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--paper-050);
	border-bottom: 1px solid var(--ink-200);
	padding: 16px var(--margin-tablet) 24px;
}
@media (max-width: 767px) {
	.mandeo-mobile-nav { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
}
.mandeo-mobile-nav[hidden] {
	display: none;
}
.mandeo-mobile-nav a {
	font-family: var(--font-ui);
	font-size: 16px;
	color: var(--ink-800);
	padding: 10px 0;
	border-bottom: 1px solid var(--ink-200);
}
.mandeo-mobile-nav a.is-active {
	color: var(--ink-900);
	font-weight: 500;
	border-bottom-color: var(--copper-500);
}
.mandeo-mobile-nav .mandeo-btn {
	margin-top: 12px;
	text-align: center;
	color: var(--paper-050); /* .mandeo-mobile-nav a's color:ink-800 otherwise wins by specificity,
	                             leaving the button's own dark text on its own dark background */
}
.mandeo-mobile-nav .mandeo-btn:hover {
	color: var(--paper-050);
}

@media (max-width: 900px) {
	.mandeo-header__nav,
	.mandeo-header__locales,
	.mandeo-header__actions > .mandeo-btn {
		display: none;
	}
	.mandeo-header__toggle {
		display: inline-flex;
	}
}

/* ---- Footer ---- */
.mandeo-footer {
	background: var(--ink-900);
	padding: 72px 0 32px;
}
.mandeo-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.mandeo-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
}
.mandeo-footer__brand-col {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.mandeo-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
}
.mandeo-footer__statement {
	font-family: var(--font-display);
	font-size: 21px;
	line-height: 1.4;
	color: var(--ink-300);
	max-width: 300px;
	margin: 0;
}
.mandeo-footer__location {
	color: var(--ink-400);
	line-height: 1.9;
}
.mandeo-footer__col {
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.mandeo-footer__col-title {
	color: var(--copper-400);
}
.mandeo-footer__col a,
.mandeo-footer__col span {
	font-family: var(--font-ui);
	font-size: 14px;
	color: var(--ink-300);
}
.mandeo-footer__col a:hover {
	color: var(--copper-300);
}
.mandeo-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	border-top: 1px solid var(--ink-700);
	padding-top: 22px;
}
.mandeo-footer__bottom .mandeo-label {
	color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */
}
.mandeo-footer__legal {
	display: flex;
	gap: 26px;
}
.mandeo-footer__legal a.mandeo-label {
	color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */
}
.mandeo-footer__legal a.mandeo-label:hover {
	color: var(--ink-300);
}

@media (max-width: 900px) {
	.mandeo-footer {
		padding: 56px 0 24px;
	}
	.mandeo-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.mandeo-footer__brand-col {
		grid-column: 1 / -1;
	}
}
@media (max-width: 560px) {
	.mandeo-footer__top {
		grid-template-columns: 1fr;
	}
}

/* ---- Buttons (Button.jsx) ---- */
.mandeo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--radius-1);
	font-family: var(--font-ui);
	font-weight: 500;
	letter-spacing: -0.005em;
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.mandeo-btn--sm { height: 40px; padding: 0 20px; font-size: 14px; }
.mandeo-btn--md { height: 46px; padding: 0 22px; font-size: 15px; }
.mandeo-btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }

.mandeo-btn--primary {
	background: var(--ink-900);
	color: var(--paper-050);
}
.mandeo-btn--primary:hover { background: var(--ink-800); color: var(--paper-050); }

.mandeo-btn--inverse {
	background: var(--paper-050);
	color: var(--ink-900);
}
.mandeo-btn--inverse:hover { background: #FFFFFF; color: var(--ink-900); }

.mandeo-btn--outline-ink {
	background: transparent;
	color: var(--paper-050);
	border-color: var(--ink-500);
}
.mandeo-btn--outline-ink:hover { border-color: var(--ink-300); }

.mandeo-btn--ghost {
	background: transparent;
	padding: 0;
	height: auto;
	border-radius: 0;
	color: var(--copper-600);
	border-bottom: 1px solid transparent;
	gap: 8px;
}
.mandeo-btn--ghost:hover {
	color: var(--copper-500);
	border-bottom-color: var(--copper-500);
}

.mandeo-btn--full { width: 100%; }

/* ==========================================================================
   Pattern atoms — shared, site-wide (loaded on every page, not just Home),
   because these are the block patterns registered in inc/patterns.php and
   must render correctly wherever they're inserted, not only on the front page.
   ========================================================================== */

.mandeo-hatch {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(135deg, #1C252E 0 9px, #353E47 9px 10px);
}

/* ---- Section Header pattern (kicker + H2 + optional intro) ---- */
.mandeo-section-header {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.mandeo-section-header__kicker {
	color: var(--copper-600);
	display: flex;
	align-items: center;
	gap: 8px;
}
.mandeo-section-header__title {
	font-size: 50px;
	line-height: 1.12;
	letter-spacing: -0.028em;
	font-weight: 400;
}
.mandeo-section-header__intro {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-600);
}
.mandeo-chip-trio {
	display: inline-flex;
	gap: 3px;
	margin-right: 4px;
}
.mandeo-chip-trio span {
	width: 4px;
	height: 12px;
	display: block;
	transform: skewX(-18deg);
}
@media (max-width: 640px) {
	.mandeo-section-header__title { font-size: 34px; }
}

/* ---- Capability Card pattern ---- */
.mandeo-capability-card {
	background: var(--paper-000);
	color: var(--ink-900);
	padding: 34px 30px 30px;
	min-height: 254px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.mandeo-capability-card:hover {
	background: var(--ink-900);
	color: var(--paper-050);
}
.mandeo-capability-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mandeo-capability-card__number { color: var(--copper-600); }
.mandeo-capability-card__chip {
	width: 20px;
	height: 20px;
	display: block;
	transform: skewX(-18deg);
}
.mandeo-capability-card__kicker {
	color: var(--copper-600);
	display: flex;
	align-items: center;
	gap: 8px;
}
.mandeo-capability-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.018em;
	line-height: 1.22;
	color: inherit;
}
.mandeo-capability-card__body {
	font-size: 15px;
	line-height: 1.6;
	color: inherit;
	opacity: 0.68;
}
.mandeo-capability-card__arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 500;
	color: var(--copper-600);
	margin-top: auto;
}
.mandeo-capability-card:hover .mandeo-capability-card__arrow { color: var(--copper-400); }
.mandeo-capability-card--special {
	background: var(--ink-900);
	color: var(--paper-050);
}
.mandeo-capability-card--special:hover { background: #00565E; }
.mandeo-capability-card--special .mandeo-capability-card__kicker { color: var(--copper-400); }
.mandeo-capability-card__arrow--accent { color: var(--copper-400) !important; }

/* ---- Case-Study / Work Card pattern ---- */
.mandeo-case-card {
	display: flex;
	flex-direction: column;
	color: inherit;
}
.mandeo-case-card__media {
	height: 300px;
	background: var(--ink-800);
	position: relative;
	overflow: hidden;
}
.mandeo-case-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mandeo-case-card__media-scrim {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 120px;
	background: linear-gradient(to top, rgba(12,21,29,0.85), rgba(12,21,29,0));
}
.mandeo-case-card__media-caption {
	position: absolute;
	left: 28px;
	bottom: 26px;
	font-family: var(--font-display);
	font-size: 40px;
	color: var(--paper-050);
	letter-spacing: -0.03em;
}
.mandeo-case-card__body {
	padding: 24px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mandeo-case-card__kicker { color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */ }
.mandeo-case-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.018em;
	line-height: 1.25;
	color: var(--ink-900);
}
.mandeo-case-card__description {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-600);
}

/* ---- Stat Tile pattern (dark card: mono label + big number + caption) ---- */
.mandeo-stat-tile {
	background: var(--ink-900);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 132px;
}
.mandeo-stat-tile__label { color: var(--copper-400); }
.mandeo-stat-tile__num {
	font-family: var(--font-display);
	font-size: 42px;
	line-height: 1;
	color: var(--paper-050);
	letter-spacing: -0.03em;
}
.mandeo-stat-tile__caption {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-300);
	margin-top: auto;
}

/* ---- Process / Phase Step pattern ---- */
.mandeo-phase-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 2px solid var(--ink-900);
	padding-top: 18px;
}
.mandeo-phase-step--accent { border-top-color: var(--copper-600); }
.mandeo-phase-step__kicker { color: var(--copper-600); }
.mandeo-phase-step__title {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 18px;
	font-weight: 600;
	color: var(--ink-900);
}
.mandeo-phase-step__body {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-600);
}
.mandeo-phase-step__footnote {
	color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */
	padding-top: 6px;
}

/* ---- Quick Contact CTA pattern ---- */
.mandeo-cta__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.mandeo-cta__title {
	font-size: 52px;
	line-height: 1.12;
	letter-spacing: -0.03em;
	font-weight: 400;
}
.mandeo-cta__sub {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-600);
	max-width: 520px;
}
.mandeo-cta__form-panel {
	background: var(--paper-050);
	border: 1px solid var(--ink-200);
	padding: 32px;
}
.mandeo-cta__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.mandeo-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.mandeo-field__label { color: var(--ink-700); }
.mandeo-input,
.mandeo-textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--paper-000);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-1);
	font-family: var(--font-ui);
	font-size: 15px;
	color: var(--ink-900);
	outline: none;
}
.mandeo-input { height: 46px; padding: 0 14px; }
.mandeo-textarea { min-height: 88px; padding: 13px 14px; line-height: 1.55; resize: vertical; }
.mandeo-input:focus,
.mandeo-textarea:focus {
	border-color: var(--ink-900);
	outline: 2px solid var(--copper-600);
	outline-offset: 2px;
}
.mandeo-cta__submit { height: 48px; }
.mandeo-cta__direct {
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */
}
.mandeo-cta__status {
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 1.6;
	padding: 16px;
	border-left: 2px solid;
}
.mandeo-cta__status--success {
	color: var(--color-success);
	border-color: var(--color-success);
	background: rgba(33, 118, 60, 0.06);
}
.mandeo-cta__status--error {
	color: var(--color-danger);
	border-color: var(--color-danger);
	background: rgba(197, 55, 50, 0.06);
	margin: 0 0 18px;
}

@media (max-width: 900px) {
	.mandeo-cta__title { font-size: 36px; }
}

/* ---- Secondary button (light-theme outline, used by CTA Band's optional 2nd button) ---- */
.mandeo-btn--secondary {
	background: transparent;
	color: var(--ink-900);
	border-color: var(--ink-900);
}
.mandeo-btn--secondary:hover { background: var(--paper-100); }

/* ---- Shared dark textured background, used by Hero and CTA Band (dark variant) ---- */
.mandeo-hatch-band {
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(-18deg, rgba(231,136,93,0.07) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(72deg, rgba(0,153,166,0.055) 0 1px, transparent 1px 46px),
		radial-gradient(120% 95% at 88% 6%, rgba(0,121,132,0.30) 0%, transparent 62%);
}

/* ---- CTA Band pattern ---- */
.mandeo-cta-band { position: relative; overflow: hidden; padding: 96px 0; }
.mandeo-cta-band--dark { background: var(--ink-900); }
.mandeo-cta-band--light { background: var(--paper-000); border-top: 1px solid var(--ink-200); }
.mandeo-cta-band__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.mandeo-cta-band__heading {
	font-size: 44px;
	line-height: 1.16;
	letter-spacing: -0.028em;
	font-weight: 400;
	max-width: 600px;
	margin: 0;
}
.mandeo-cta-band--dark .mandeo-cta-band__heading { color: var(--paper-050); }
.mandeo-cta-band__actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	flex-shrink: 0;
}
.mandeo-cta-band__buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.mandeo-cta-band__note {
	font-size: 14px;
	line-height: 1.6;
	max-width: 380px;
	color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */
}
.mandeo-cta-band--dark .mandeo-cta-band__note { color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */ }

@media (max-width: 900px) {
	.mandeo-cta-band { padding: 64px 0; }
	.mandeo-cta-band__heading { font-size: 32px; }
}

/* ---- Callout pattern ---- */
.mandeo-callout {
	background: var(--paper-000);
	border: 1px solid var(--ink-200);
	border-left-width: 2px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.mandeo-callout__body {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-700);
}

/* ---- Proof Panel pattern ---- */
.mandeo-proof-panel {
	background: var(--ink-900);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.mandeo-proof-panel__kicker { color: var(--copper-400); }
.mandeo-proof-panel__quote {
	margin: 0;
	font-family: var(--font-display);
	font-size: 27px;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--paper-050);
}
.mandeo-proof-panel__attribution { display: flex; flex-direction: column; gap: 3px; }
.mandeo-proof-panel__name { font-size: 15px; font-weight: 600; color: var(--paper-050); }
.mandeo-proof-panel__title { color: var(--ink-400); }
.mandeo-proof-panel__stats {
	display: flex;
	gap: 32px;
	border-top: 1px solid var(--ink-700);
	padding-top: 22px;
}
.mandeo-proof-panel__stat { display: flex; flex-direction: column; gap: 4px; }
.mandeo-proof-panel__stat-num {
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: var(--paper-050);
}
.mandeo-proof-panel__stats .mandeo-label { color: var(--ink-400); }

/* ---- Breadcrumb ---- */
.mandeo-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.mandeo-breadcrumb__crumb { color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */ }
.mandeo-breadcrumb__crumb--current { color: var(--ink-900); }
.mandeo-breadcrumb__sep { color: var(--ink-300); }
.mandeo-breadcrumb--dark .mandeo-breadcrumb__crumb { color: var(--ink-400); }
.mandeo-breadcrumb--dark .mandeo-breadcrumb__crumb--current { color: var(--copper-400); }
.mandeo-breadcrumb--dark .mandeo-breadcrumb__sep { color: var(--ink-700); }

/* ---- Filter bar ---- */
.mandeo-filter-bar {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.mandeo-filter-bar__label { color: var(--ink-600); /* darkened from ink-500 for AA text contrast on small/mono text */ flex-shrink: 0; }
.mandeo-filter-bar__pills { display: flex; gap: 10px; flex-wrap: wrap; }
.mandeo-filter-pill {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	background: none;
	border: 1px solid var(--ink-300);
	color: var(--ink-700);
	font-family: var(--font-ui);
	font-size: 13.5px;
	border-radius: var(--radius-1);
	cursor: pointer;
	transition: background-color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.mandeo-filter-pill:hover {
	background: var(--paper-100);
	border-color: var(--ink-900);
	color: var(--ink-900);
}
.mandeo-filter-pill:focus,
.mandeo-filter-pill:active {
	/* Kadence's global `button:focus, button:active` rule (0,1,1 specificity) otherwise beats
	   this component's plain classes and repaints the pill with the theme's default blue the
	   instant it's clicked — exactly when a screenshot or a real click would show it. */
	background: none;
	color: var(--ink-700);
	border-color: var(--ink-300);
}
.mandeo-filter-pill--active,
.mandeo-filter-pill--active:hover,
.mandeo-filter-pill--active:focus,
.mandeo-filter-pill--active:active {
	/* True black by explicit request, not --ink-900 (#0C151D reads blue-tinted at this size) —
	   scoped to just this active state so it doesn't ripple into ink-900's other uses (hero,
	   footer, CTA bands) where the tint is intended. */
	background: #000000;
	color: var(--paper-050);
	border-color: #000000;
}

/* ---- Page Hero pattern (kicker + big H1 + aside, top-of-page hub hero) ---- */
.mandeo-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--ink-900);
	padding: 96px 0 72px;
}
.mandeo-page-hero--dark { background: var(--ink-900); }
.mandeo-page-hero::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -180px;
	width: 620px;
	height: 620px;
	margin-top: -310px;
	border-radius: 999px 0 0 999px;
	background: #007984;
	opacity: 0.13;
	pointer-events: none;
}
.mandeo-page-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	height: 220px;
	width: 190px;
	background:
		linear-gradient(to right, rgba(231,136,93,0.26) 0 46px, transparent 46px 72px, rgba(209,96,34,0.24) 72px 118px, transparent 118px 144px, rgba(0,121,132,0.24) 144px 190px);
	transform: skewX(-18deg);
	transform-origin: top right;
	opacity: 1;
	pointer-events: none;
}
.mandeo-page-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 72px;
	align-items: end;
}
.mandeo-page-hero__main {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.mandeo-page-hero__kicker { color: var(--copper-600); display: flex; align-items: center; gap: 8px; }
.mandeo-page-hero--dark .mandeo-page-hero__kicker { color: var(--copper-400); }
.mandeo-page-hero__heading {
	margin: 0;
	font-size: 64px;
	line-height: 1.1;
	letter-spacing: -0.032em;
	font-weight: 400;
	color: var(--paper-050);
}
.mandeo-page-hero__intro {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--paper-050);
}
.mandeo-page-hero__aside--boxed {
	border-left: 1px solid var(--ink-700);
	padding-left: 40px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mandeo-page-hero .mandeo-breadcrumb__crumb,
.mandeo-page-hero .mandeo-breadcrumb__crumb--current,
.mandeo-page-hero .mandeo-breadcrumb__sep {
	color: var(--copper-400);
}

@media (max-width: 900px) {
	.mandeo-page-hero { padding: 72px 0 48px; }
	.mandeo-page-hero::before {
		right: -230px;
		width: 500px;
		height: 500px;
		margin-top: -250px;
	}
	.mandeo-page-hero::after {
		top: 0;
		right: 0;
		height: 140px;
		width: 112px;
		background:
			linear-gradient(to right, rgba(231,136,93,0.2) 0 28px, transparent 28px 42px, rgba(209,96,34,0.18) 42px 70px, transparent 70px 84px, rgba(0,121,132,0.18) 84px 112px);
		opacity: 1;
	}
	.mandeo-page-hero__inner { grid-template-columns: 1fr !important; gap: 32px; }
	.mandeo-page-hero__heading { font-size: 40px; }
	.mandeo-page-hero__aside--boxed { border-left: none; padding-left: 0; border-top: 1px solid var(--ink-700); padding-top: 24px; }
}