/* ==========================================================================
   MetaOption site styles. Load after Bootstrap 5 and FontAwesome.

   Naming
   mo-*     Shared: header, footer, buttons, tints. Safe on any page.
   home-*   Home page only.
   page-*   Internal pages. The same classes are used on every internal page.

   All animation in this file is CSS. Scroll effects use scroll-driven
   animations, so browsers without them simply show the content at rest.

   Contents
   1.  Root variables
   2.  Base
   3.  Shared components (mo-)
   4.  Header and full-width mega menu (mo-)
   5.  Mobile navigation (mo-)
   6.  Footer (mo-)
   7.  Home page (home-)
   8.  Internal pages (page-)
       8.1 Section shell    8.2 Hero          8.3 Intro
       8.4 Cards            8.5 Process       8.6 Quotes
       8.7 FAQ              8.8 CTA           8.9 Contact
   9.  Blog and listings
   10. Scroll-driven animation
   11. Astra and block editor adjustments
   12. Responsive
   ========================================================================== */


/* 1. Root variables
   ========================================================================== */
:root {
	/* Brand, from the logo */
	--mo-blue: #004a91;
	--mo-trim: #dd9652;
	--mo-ring-2: #a0a0a0;
	--mo-charcoal: #404040;

	/* Extended palette */
	--mo-night: #030e33;
	--mo-navy: #05164d;
	--mo-navy-2: #0a2a6b;
	--mo-blue-bright: #0a6fe8;
	--mo-blue-sky: #5bb0ff;
	--mo-gold: #f0902e; /* logo orange, deepened for buttons */
	--mo-gold-dark: #dc7a18;
	--mo-orange: #e8862e;

	/* Neutrals */
	--mo-ink: #0e1b3d;
	--mo-body: #4b5563;
	--mo-muted: #6b7280;
	--mo-line: #e5e7ee;
	--mo-line-2: #d3d7de;
	--mo-surface: #f4f5f7;
	--mo-paper: #f7f9fc;
	--mo-panel: #fcfcfd;
	--mo-white: #fff;
	--mo-on-dark: #c8d3ea;

	/* Tints for icons */
	--mo-tint-blue-fg: #0a6fe8;
	--mo-tint-blue-bg: #e6f0fd;
	--mo-tint-indigo-fg: #3730a3;
	--mo-tint-indigo-bg: #e9e8fb;
	--mo-tint-violet-fg: #7c3aed;
	--mo-tint-violet-bg: #f0e9fd;
	--mo-tint-orange-fg: #d9601a;
	--mo-tint-orange-bg: #fdeee2;
	--mo-tint-amber-fg: #b57900;
	--mo-tint-amber-bg: #fff4d9;
	--mo-tint-green-fg: #0f8a6b;
	--mo-tint-green-bg: #e1f5ef;
	--mo-tint-rose-fg: #d4265f;
	--mo-tint-rose-bg: #fde8ef;

	/* Type */
	--mo-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mo-h1: clamp(2.1rem, 1.35rem + 2.9vw, 3.5rem);
	--mo-h2: clamp(1.65rem, 1.25rem + 1.5vw, 2.5rem);
	--mo-h3: 1.14rem;

	/* Shape */
	--mo-radius-sm: 10px;
	--mo-radius: 14px;
	--mo-radius-lg: 20px;

	/* Shadows: wide, soft and tinted with navy */
	--mo-shadow-sm: 0 1px 3px rgba(3, 14, 51, .05), 0 4px 12px rgba(3, 14, 51, .05);
	--mo-shadow: 0 4px 14px 3px rgba(3, 14, 51, .06);
	--mo-shadow-md: 0 2px 6px rgba(3, 14, 51, .05), 0 12px 32px rgba(3, 14, 51, .1);
	--mo-shadow-lg: 0 6px 14px rgba(3, 14, 51, .06), 0 24px 56px rgba(3, 14, 51, .16);
	--mo-shadow-xl: 0 8px 20px rgba(3, 14, 51, .1), 0 40px 90px rgba(3, 14, 51, .26);
	--mo-shadow-panel: 0 8px 24px rgba(3, 14, 51, .1), 0 2px 6px rgba(3, 14, 51, .05);
	--mo-glow-gold: 0 10px 26px rgba(240, 144, 46, .38);
	--mo-glow-blue: 0 10px 26px rgba(10, 111, 232, .3);

	/* Gradients */
	--mo-gradient: linear-gradient(90deg, var(--mo-blue-bright), var(--mo-blue) 55%, var(--mo-gold));
	--mo-gradient-blue: linear-gradient(135deg, var(--mo-blue-bright), var(--mo-blue));
	--mo-gradient-dark: linear-gradient(125deg, var(--mo-night) 0%, var(--mo-navy) 45%, var(--mo-navy-2) 75%, var(--mo-blue) 100%);

	/* Motion */
	--mo-ease: cubic-bezier(.16, 1, .3, 1);

	/* Space */
	--mo-section-y: clamp(3.5rem, 2.2rem + 4.4vw, 6.25rem);
	--mo-home-hero-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);
	--mo-page-hero-y: clamp(3rem, 2rem + 4vw, 5.5rem);
	--mo-header-h: 72px;
	--mo-gutter: clamp(1rem, 2vw, 1.75rem);

	/* Bootstrap overrides */
	--bs-primary: #004a91;
	--bs-primary-rgb: 0, 74, 145;
	--bs-body-font-family: var(--mo-font);
	--bs-body-color: #4b5563;
	--bs-link-color: #0a6fe8;
	--bs-link-hover-color: #004a91;
	--bs-border-color: #e5e7ee;
}


/* 2. Base
   ========================================================================== */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800.woff2") format("woff2"); }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mo-header-h) + 16px);
}

body {
	font-family: var(--mo-font);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--mo-body);
	background: var(--mo-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mo-font);
	color: var(--mo-ink);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.22;
}

/* WordPress adds a gap between blocks and Astra a 1.4 heading line height.
   Spacing here comes from the classes below instead. */
/* Bootstrap rows keep their own vertical gutter. */
.entry-content :where(.is-layout-flow:not(.row)) > * { margin-block-start: 0; }
.entry-content :where(h1, h2, h3, h4, h5, h6) { line-height: 1.22; }

:focus-visible {
	outline: 3px solid var(--mo-blue-bright);
	outline-offset: 2px;
	border-radius: 4px;
}


/* 3. Shared components
   ========================================================================== */

/* Buttons. .btn.mo-btn-* for HTML, .wp-block-button.mo-btn-* for the Button block. */
.btn.mo-btn-primary,
.btn.mo-btn-accent,
.btn.mo-btn-ghost,
.wp-block-button.mo-btn-primary .wp-block-button__link,
.wp-block-button.mo-btn-accent .wp-block-button__link,
.wp-block-button.mo-btn-ghost .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	overflow: hidden;
	padding: .82em 1.65em;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-size: .97rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s, transform .3s var(--mo-ease), box-shadow .3s;
}

/* Light sweep across a button on hover */
.btn.mo-btn-primary::before,
.btn.mo-btn-accent::before,
.wp-block-button.mo-btn-primary .wp-block-button__link::before,
.wp-block-button.mo-btn-accent .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg);
	transition: left .65s var(--mo-ease);
}
.btn.mo-btn-primary:hover::before,
.btn.mo-btn-accent:hover::before,
.wp-block-button.mo-btn-primary .wp-block-button__link:hover::before,
.wp-block-button.mo-btn-accent .wp-block-button__link:hover::before { left: 125%; }

.btn.mo-btn-primary,
.wp-block-button.mo-btn-primary .wp-block-button__link {
	background: var(--mo-blue-bright);
	color: var(--mo-white);
	box-shadow: var(--mo-glow-blue);
}
.btn.mo-btn-primary:hover,
.btn.mo-btn-primary:focus-visible,
.wp-block-button.mo-btn-primary .wp-block-button__link:hover {
	background: var(--mo-blue);
	color: var(--mo-white);
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0, 74, 145, .36);
}

.btn.mo-btn-accent,
.wp-block-button.mo-btn-accent .wp-block-button__link {
	background: var(--mo-gold);
	color: var(--mo-navy);
	box-shadow: var(--mo-glow-gold);
}
.btn.mo-btn-accent:hover,
.btn.mo-btn-accent:focus-visible,
.wp-block-button.mo-btn-accent .wp-block-button__link:hover {
	background: var(--mo-gold-dark);
	color: var(--mo-navy);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(240, 144, 46, .48);
}

.btn.mo-btn-ghost,
.wp-block-button.mo-btn-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, .06);
	color: var(--mo-white);
	border-color: rgba(255, 255, 255, .42);
}
.btn.mo-btn-ghost:hover,
.wp-block-button.mo-btn-ghost .wp-block-button__link:hover {
	background: var(--mo-white);
	border-color: var(--mo-white);
	color: var(--mo-navy);
	transform: translateY(-2px);
}

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.wp-block-button { margin: 0; }

/* Arrow on a Button block: add mo-arrow next to the button class */
.wp-block-button.mo-arrow .wp-block-button__link::after {
	content: "\f061";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: .85em;
	transition: transform .3s var(--mo-ease);
}
.wp-block-button.mo-arrow .wp-block-button__link:hover::after { transform: translateX(4px); }

/* Eyebrow labels: a short line before uppercase text */
.home-eyebrow,
.page-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .85rem;
	color: var(--mo-blue);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.home-eyebrow::before,
.page-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--mo-gold);
}

/* Cards. Home and internal pages keep their own class names and share this behavior. */
.home-card,
.page-card {
	position: relative;
	height: 100%;
	overflow: hidden;
	padding: 1.75rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-lg);
	background: var(--mo-white);
	box-shadow: var(--mo-shadow);
	transition: transform .4s var(--mo-ease), box-shadow .4s, border-color .25s;
}
/* A soft wash that slides up behind the content */
.home-card::before,
.page-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(10, 111, 232, .07));
	opacity: 0;
	transform: translateY(24px);
	pointer-events: none;
	transition: opacity .4s, transform .5s var(--mo-ease);
}
/* Gradient line that draws across the top */
.home-card::after,
.page-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--mo-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--mo-ease);
}
.home-card:hover,
.page-card:hover { transform: translateY(-7px); border-color: rgba(91, 176, 255, .55); box-shadow: var(--mo-shadow-lg); }
.home-card:hover::before,
.page-card:hover::before { opacity: 1; transform: none; }
.home-card:hover::after,
.page-card:hover::after { transform: scaleX(1); }

.home-card-icon,
.page-card-icon {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 1.1rem;
	border-radius: 15px;
	background: var(--mo-tint-bg, var(--mo-tint-blue-bg));
	color: var(--mo-tint-fg, var(--mo-blue-bright));
	font-size: 1.3rem;
	transition: transform .4s var(--mo-ease), background-color .25s, color .25s, box-shadow .3s;
}
.home-card:hover .home-card-icon,
.page-card:hover .page-card-icon {
	background: var(--mo-tint-fg, var(--mo-blue-bright));
	color: var(--mo-white);
	box-shadow: 0 12px 24px rgba(3, 14, 51, .22);
	transform: translateY(-2px) rotate(-6deg) scale(1.06);
}
.home-card-title,
.page-card-title { position: relative; margin: 0 0 .5rem; font-size: var(--mo-h3); font-weight: 600; }
.home-card-title a,
.page-card-title a { color: inherit; text-decoration: none; transition: color .2s; }
.home-card-title a::after,
.page-card-title a::after { content: ""; position: absolute; inset: -30rem; }
.home-card:hover .home-card-title a,
.page-card:hover .page-card-title a { color: var(--mo-blue-bright); }
.home-card-text,
.page-card-text { position: relative; margin: 0; font-size: .92rem; }

/* Numbered steps */
.home-step,
.page-step { position: relative; height: 100%; padding-top: 4.2rem; }
.home-step::before,
.page-step::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--mo-gradient-blue);
	box-shadow: 0 0 0 6px var(--mo-tint-blue-bg), var(--mo-glow-blue);
	color: var(--mo-white);
	font-size: .9rem;
	font-weight: 600;
}
.home-step::after,
.page-step::after {
	content: "";
	position: absolute;
	top: 24px;
	left: 62px;
	right: -12px;
	height: 2px;
	background: linear-gradient(90deg, var(--mo-blue-bright), var(--mo-blue-sky) 60%, var(--mo-line));
	transform-origin: left;
}
.page-steps > :last-child .page-step::after,
.home-step-last::after { content: none; }

/* FAQ, built on the Details block. A shared name closes the others natively. */
.home-faq-list details,
.page-faq-list details {
	margin-bottom: .8rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius);
	background: var(--mo-white);
	box-shadow: var(--mo-shadow);
	transition: border-color .25s, box-shadow .3s, transform .3s var(--mo-ease);
}
.home-faq-list details:hover,
.page-faq-list details:hover { border-color: rgba(91, 176, 255, .6); transform: translateY(-1px); }
.home-faq-list details[open],
.page-faq-list details[open] { border-color: #6aa0ff; box-shadow: 0 8px 22px rgba(10, 111, 232, .12); }
.home-faq-list summary,
.page-faq-list summary {
	position: relative;
	padding: 1.05rem 3.3rem 1.05rem 1.35rem;
	color: var(--mo-ink);
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}
.home-faq-list summary::-webkit-details-marker,
.page-faq-list summary::-webkit-details-marker { display: none; }
.home-faq-list summary::after,
.page-faq-list summary::after {
	content: "\f067";
	position: absolute;
	top: .85rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mo-tint-blue-bg);
	color: var(--mo-blue-bright);
	font-family: "Font Awesome 6 Free";
	font-size: .74rem;
	font-weight: 900;
	transition: transform .35s var(--mo-ease), background-color .2s, color .2s;
}
.home-faq-list details[open] summary::after,
.page-faq-list details[open] summary::after { background: var(--mo-blue-bright); color: var(--mo-white); transform: rotate(135deg); }
.home-faq-list details p,
.page-faq-list details p { margin: 0; padding: 0 1.35rem 1.15rem; font-size: .95rem; }

@supports (interpolate-size: allow-keywords) {
	.home-faq-list,
	.page-faq-list,
	.mo-mobile-list { interpolate-size: allow-keywords; }
	.home-faq-list details::details-content,
	.page-faq-list details::details-content,
	.mo-mobile-item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size .35s var(--mo-ease), content-visibility .35s allow-discrete;
	}
	.home-faq-list details[open]::details-content,
	.page-faq-list details[open]::details-content,
	.mo-mobile-item[open]::details-content { block-size: auto; }
}

/* Forms */
.page-form .form-label { margin-bottom: .3rem; color: var(--mo-ink); font-size: .86rem; font-weight: 500; }
.page-form .form-control,
.page-form .form-select { padding: .72rem .95rem; border-color: var(--mo-line-2); border-radius: var(--mo-radius-sm); font-size: .95rem; transition: border-color .2s, box-shadow .25s; }
.page-form .form-select { height: auto; min-height: 47px; line-height: 1.5; }
.page-form .form-control:focus,
.page-form .form-select:focus { border-color: var(--mo-blue-bright); box-shadow: 0 0 0 .25rem rgba(10, 111, 232, .14); }

/* Icon tints: .mo-tint-blue and friends */
.mo-tint-blue { --mo-tint-fg: var(--mo-tint-blue-fg); --mo-tint-bg: var(--mo-tint-blue-bg); }
.mo-tint-indigo { --mo-tint-fg: var(--mo-tint-indigo-fg); --mo-tint-bg: var(--mo-tint-indigo-bg); }
.mo-tint-violet { --mo-tint-fg: var(--mo-tint-violet-fg); --mo-tint-bg: var(--mo-tint-violet-bg); }
.mo-tint-orange { --mo-tint-fg: var(--mo-tint-orange-fg); --mo-tint-bg: var(--mo-tint-orange-bg); }
.mo-tint-amber { --mo-tint-fg: var(--mo-tint-amber-fg); --mo-tint-bg: var(--mo-tint-amber-bg); }
.mo-tint-green { --mo-tint-fg: var(--mo-tint-green-fg); --mo-tint-bg: var(--mo-tint-green-bg); }
.mo-tint-rose { --mo-tint-fg: var(--mo-tint-rose-fg); --mo-tint-bg: var(--mo-tint-rose-bg); }

/* Spam trap on the contact form */
.mo-hp { position: absolute; left: -9999px; }

/* Back to top. Fades in with scroll, see section 10. */
.mo-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1030;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--mo-navy);
	box-shadow: var(--mo-shadow-lg);
	color: var(--mo-white);
	text-decoration: none;
	transition: background-color .2s, transform .3s var(--mo-ease);
}
.mo-to-top:hover { background: var(--mo-blue-bright); color: var(--mo-white); transform: translateY(-3px); }

/* Shared motion */
@keyframes moBreathe {
	0%, 100% { transform: scale(1); opacity: .8; }
	50% { transform: scale(1.12); opacity: 1; }
}
@keyframes moDrift {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-16px, 14px); }
}
@keyframes moEnter {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}
@keyframes moSpin {
	to { transform: rotate(360deg); }
}
@keyframes moCorePulse {
	0%, 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, .08), 0 26px 56px rgba(0, 0, 0, .3); }
	50% { box-shadow: 0 0 0 22px rgba(255, 255, 255, .04), 0 26px 64px rgba(10, 111, 232, .5); }
}


/* 4. Header and full-width mega menu
   ========================================================================== */
/* One number drives the whole header. --mo-solid is 1 for the white header and
   0 for transparent. Only the home page changes it, see section 10. --mo-open
   turns the header white while a mega panel is open. */
@property --mo-solid {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}
@property --mo-open {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

.mo-header {
	--mo-s: max(var(--mo-solid), var(--mo-open));
	--mo-header-fg: color-mix(in srgb, var(--mo-navy) calc(var(--mo-s) * 100%), var(--mo-white));
	position: sticky;
	top: 0;
	z-index: 1040;
	background: rgb(255 255 255 / var(--mo-s));
	box-shadow:
		0 1px 0 rgb(228 230 235 / var(--mo-s)),
		0 1px 2px rgb(3 14 51 / calc(var(--mo-s) * .06)),
		0 2px 6px rgb(3 14 51 / calc(var(--mo-s) * .04));
	transition: --mo-open .16s ease;
}
.mo-header:has(.has-mega:hover),
.mo-header:has(.has-mega:focus-within) { --mo-open: 1; }
.admin-bar .mo-header { top: 32px; }

.mo-header-bar {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	height: var(--mo-header-h);
	padding-inline: 28px;
}

/* Both logos share one cell and cross-fade with the header */
.mo-brand { flex: none; display: grid; align-items: center; }
.mo-brand img { grid-area: 1 / 1; display: block; width: auto; height: 48px; }
.mo-brand-dark { opacity: var(--mo-s); }
.mo-brand-light { opacity: calc(1 - var(--mo-s)); }

.mo-nav { flex: 1; min-width: 0; display: flex; }
.mo-nav-list {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mo-nav-item { display: flex; align-items: center; }
.mo-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: 9px 14px;
	border-radius: 8px;
	color: var(--mo-header-fg);
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .16s;
}
.mo-nav-link i { font-size: .62rem; transition: transform .3s var(--mo-ease); }
/* Underline that draws in under the label */
.mo-nav-link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: var(--mo-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--mo-ease);
}
.mo-nav-item:hover .mo-nav-link,
.mo-nav-item:focus-within .mo-nav-link {
	background: color-mix(in srgb, var(--mo-surface) calc(var(--mo-s) * 100%), rgb(255 255 255 / .14));
	color: var(--mo-header-fg);
}
.mo-nav-item:hover .mo-nav-link::after,
.mo-nav-item:focus-within .mo-nav-link::after,
.mo-nav-item.is-current .mo-nav-link::after { transform: scaleX(1); }
.has-mega:hover .mo-nav-link i,
.has-mega:focus-within .mo-nav-link i { transform: rotate(180deg); }

.mo-header-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.mo-icon-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--mo-radius-sm);
	background: var(--mo-surface);
	color: var(--mo-navy);
	font-size: 1.15rem;
}
.mo-header .mo-icon-btn {
	background: color-mix(in srgb, var(--mo-surface) calc(var(--mo-s) * 100%), rgb(255 255 255 / .14));
	color: var(--mo-header-fg);
}
.mo-burger { display: none; }

/* Header button: a gold pill with the arrow in a navy circle */
.mo-header-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 8px 58px 8px 20px;
	border-radius: 60px;
	background: var(--mo-gold);
	color: var(--mo-navy);
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .3s;
}
.mo-header-cta-circle {
	position: absolute;
	top: 1px;
	right: 1px;
	display: grid;
	place-items: center;
	overflow: hidden;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mo-blue);
	color: var(--mo-white);
	font-size: .8rem;
}
.mo-header-cta-circle i { transition: transform .35s var(--mo-ease); }
.mo-header-cta:hover,
.mo-header-cta:focus-visible { background: var(--mo-gold-dark); color: var(--mo-navy); }
.mo-header-cta:hover .mo-header-cta-circle i { transform: translateX(4px); }

/* Search: a pill that widens when focused */
.mo-search { position: relative; display: flex; align-items: center; }
.mo-search i { position: absolute; left: .95rem; color: var(--mo-muted); font-size: .85rem; pointer-events: none; }
.mo-search input {
	width: 240px;
	height: 43px;
	padding: 0 1rem 0 2.35rem;
	border: 1px solid var(--mo-line-2);
	border-radius: 999px;
	background: var(--mo-white);
	color: var(--mo-ink);
	font-size: .88rem;
	transition: width .4s var(--mo-ease), border-color .2s, box-shadow .25s;
}
.mo-search input:focus { width: 280px; border-color: var(--mo-blue-bright); outline: 0; box-shadow: 0 0 0 .22rem rgba(10, 111, 232, .14); }
/* Glass over the home hero, white once the header is solid */
.mo-header .mo-search input {
	border-color: color-mix(in srgb, var(--mo-line-2) calc(var(--mo-s) * 100%), #80838d);
	background: color-mix(in srgb, var(--mo-white) calc(var(--mo-s) * 100%), rgb(255 255 255 / .15));
	color: color-mix(in srgb, var(--mo-ink) calc(var(--mo-s) * 100%), var(--mo-white));
}
.mo-header .mo-search i { color: color-mix(in srgb, var(--mo-muted) calc(var(--mo-s) * 100%), #cdced6); }
.mo-header .mo-search input::placeholder { color: color-mix(in srgb, var(--mo-muted) calc(var(--mo-s) * 100%), #cdced6); }

/* Panels span the viewport because they position against the sticky header.
   Each one opens with :hover or :focus-within on its own list item. */
.mo-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	overflow: hidden;
	border-top: 1px solid var(--mo-line);
	border-radius: 0 0 12px 12px;
	background: var(--mo-panel);
	box-shadow: var(--mo-shadow-panel), 0 34px 70px rgba(3, 14, 51, .16);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity .2s ease .1s, transform .26s var(--mo-ease) .1s, visibility 0s linear .3s;
}
.has-mega:hover > .mo-mega-panel,
.has-mega:focus-within > .mo-mega-panel {
	z-index: 2;
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition: opacity .26s var(--mo-ease) .06s, transform .26s var(--mo-ease) .06s, visibility 0s linear .06s;
}
/* The pointer wins: a panel held open by focus closes while another is hovered */
.mo-nav-list:hover .has-mega:not(:hover) > .mo-mega-panel {
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
}

/* The page dims behind an open panel */
.mo-mega-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1035;
	visibility: hidden;
	opacity: 0;
	background: rgba(3, 14, 51, .42);
	pointer-events: none;
	transition: opacity .25s ease .05s, visibility 0s linear .3s;
}
.mo-header:has(.has-mega:hover) + .mo-mega-backdrop,
.mo-header:has(.has-mega:focus-within) + .mo-mega-backdrop { visibility: visible; opacity: 1; transition: opacity .25s ease .05s, visibility 0s; }

.mo-panel-inner { padding: 1.35rem var(--mo-gutter) 1.15rem; }

/* Intro band */
.mo-panel-band {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--mo-line);
}
.mo-panel-eyebrow {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0 0 .15rem;
	color: var(--mo-muted);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mo-panel-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--mo-gold); }
.mo-panel-headline { margin: 0; color: var(--mo-blue); font-size: 1.14rem; font-weight: 600; line-height: 1.35; }
.mo-panel-all {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--mo-blue);
	font-size: .84rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.mo-panel-all i { font-size: .74rem; transition: transform .3s var(--mo-ease); }
.mo-panel-all:hover { color: var(--mo-blue); }
.mo-panel-all:hover i { transform: translateX(5px); }

/* Columns */
.mo-panel-grid { display: grid; gap: 1.25rem 2rem; padding-top: 1.35rem; }
.mo-panel-services .mo-panel-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.05fr); }
.mo-panel-products .mo-panel-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.mo-panel-products .mo-panel-group-wide { grid-row: span 2; }
.mo-panel-products .mo-panel-feature { grid-row: 1 / span 2; grid-column: 4; }
.mo-panel-resources .mo-panel-grid,
.mo-panel-about .mo-panel-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 22%); }

.mo-panel-group-wide .mo-panel-links { columns: 2; column-gap: 2rem; }
.mo-panel-group-wide .mo-panel-links li { break-inside: avoid; }

.mo-panel-group-title {
	margin: 0 0 .65rem;
	color: #1f2430;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* Link lists with dots, spaced like ValueCoders */
.mo-panel-links { margin: 0; padding: 0; list-style: none; }
.mo-panel-links a {
	position: relative;
	display: block;
	padding: .6rem .6rem .6rem 1.4rem;
	border-radius: 8px;
	color: #3c4250;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .16s, color .16s, padding-left .3s var(--mo-ease);
}
.mo-panel-links a::before {
	content: "";
	position: absolute;
	top: calc(.6rem + .7em - 2.5px);
	left: .6rem;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #c3c8d1;
	transition: background-color .16s, transform .3s var(--mo-ease);
}
.mo-panel-links a:hover,
.mo-panel-links a:focus-visible { padding-left: 1.65rem; background: rgba(0, 74, 145, .06); color: var(--mo-blue); }
.mo-panel-links a:hover::before,
.mo-panel-links a:focus-visible::before { background: var(--mo-gold); transform: scale(1.4); }

/* Cards in a box, as in the ValueCoders Solutions menu */
.mo-panel-cards { display: grid; gap: 10px; align-content: start; margin: 0; padding: 0; list-style: none; }
.mo-panel-industries .mo-panel-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mo-panel-resources .mo-panel-cards,
.mo-panel-about .mo-panel-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mo-panel-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1rem 1.15rem 1.1rem;
	border-radius: 12px;
	background: var(--mo-white);
	box-shadow: 0 0 0 1px var(--mo-line), 0 1px 3px rgba(3, 14, 51, .04);
	text-decoration: none;
	transition: box-shadow .2s, transform .25s var(--mo-ease);
}
.mo-panel-card-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: .75rem;
	border: 1px solid var(--mo-line);
	border-radius: 9px;
	color: var(--mo-blue);
	font-size: .88rem;
	transition: background-color .2s, color .2s, border-color .2s;
}
.mo-panel-card strong { display: block; margin-bottom: .3rem; color: var(--mo-navy); font-size: .9rem; font-weight: 600; line-height: 1.3; transition: color .16s; }
.mo-panel-card small { display: block; color: var(--mo-muted); font-size: .78rem; line-height: 1.55; }
.mo-panel-card:hover,
.mo-panel-card:focus-visible {
	box-shadow: 0 0 0 1px rgba(0, 74, 145, .35), 0 12px 26px rgba(3, 14, 51, .09);
	transform: translateY(-2px);
}
.mo-panel-card:hover .mo-panel-card-icon,
.mo-panel-card:focus-visible .mo-panel-card-icon { border-color: var(--mo-blue); background: var(--mo-blue); color: var(--mo-white); }
.mo-panel-card:hover strong { color: var(--mo-blue); }

/* Promo card */
.mo-panel-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	min-height: 190px;
	border-radius: var(--mo-radius);
	background: var(--mo-gradient-dark);
	box-shadow: var(--mo-shadow-md);
	color: var(--mo-on-dark);
	text-decoration: none;
	transition: transform .35s var(--mo-ease), box-shadow .35s;
}
.mo-panel-feature-art {
	position: absolute;
	inset: 0;
	background: repeating-radial-gradient(circle at 100% 0, transparent 0 30px, rgba(255, 255, 255, .1) 30px 31px);
	transition: transform .6s var(--mo-ease);
}
/* Cards with artwork: the picture gets its own space above the text */
.mo-art-resources .mo-panel-feature-art,
.mo-art-about .mo-panel-feature-art {
	position: relative;
	inset: auto;
	flex: 1 1 96px;
	min-height: 96px;
	background-position: center 34%;
	background-repeat: no-repeat;
	background-size: cover;
}
.mo-art-resources .mo-panel-feature-art { background-image: url("../images/menu/col-resources.svg"); }
.mo-art-about .mo-panel-feature-art { background-image: url("../images/menu/col-about.svg"); }
.mo-panel-feature-text { position: relative; display: block; padding: .85rem 1rem; }
.mo-art-resources .mo-panel-feature-text,
.mo-art-about .mo-panel-feature-text { background: var(--mo-navy); }
.mo-panel-feature-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: .5rem;
	border-radius: 10px;
	background: rgba(240, 144, 46, .16);
	color: var(--mo-gold);
	font-size: .86rem;
}
.mo-panel-feature strong { display: block; color: var(--mo-white); font-size: .92rem; font-weight: 600; line-height: 1.3; }
.mo-panel-feature small { display: block; margin-top: .15rem; font-size: .74rem; line-height: 1.4; }
.mo-panel-feature-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; color: var(--mo-gold); font-size: .76rem; font-weight: 600; }
.mo-panel-feature-more i { transition: transform .3s var(--mo-ease); }
.mo-panel-feature:hover,
.mo-panel-feature:focus-visible { color: var(--mo-on-dark); transform: translateY(-3px); box-shadow: var(--mo-shadow-lg); }
.mo-panel-feature:hover .mo-panel-feature-art { transform: scale(1.06); }
.mo-panel-feature:hover .mo-panel-feature-more i { transform: translateX(4px); }

/* Bottom strip */
.mo-panel-strip {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: .65rem var(--mo-gutter);
	border-top: 1px solid var(--mo-line);
	background: var(--mo-paper);
}
.mo-panel-strip p { margin: 0; color: var(--mo-body); font-size: .84rem; }
.mo-panel-strip p strong { color: var(--mo-navy); font-weight: 600; }
.mo-panel-strip ul { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: 0 auto 0 0; padding: 0; list-style: none; }
.mo-panel-strip li a { display: inline-flex; align-items: center; gap: .4rem; color: var(--mo-body); font-size: .8rem; font-weight: 500; text-decoration: none; transition: color .15s; }
.mo-panel-strip li i { color: var(--mo-blue-bright); font-size: .74rem; }
.mo-panel-strip li a:hover { color: var(--mo-blue-bright); }
.mo-panel-strip-button {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .46rem 1rem;
	border-radius: 999px;
	background: var(--mo-gold);
	box-shadow: 0 6px 16px rgba(240, 144, 46, .32);
	color: var(--mo-navy);
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .18s, transform .3s var(--mo-ease);
}
.mo-panel-strip-button i { transition: transform .3s var(--mo-ease); }
.mo-panel-strip-button:hover,
.mo-panel-strip-button:focus { background: var(--mo-gold-dark); color: var(--mo-navy); transform: translateY(-1px); }
.mo-panel-strip-button:hover i { transform: translateX(3px); }

/* Entrance: links rise in one after another. --i is set in mega-menu.php */
.has-mega:hover .mo-rise,
.has-mega:focus-within .mo-rise { animation: moRise .42s var(--mo-ease) both; animation-delay: calc(var(--i, 0) * 16ms + 60ms); }
.has-mega:hover .mo-panel-band,
.has-mega:focus-within .mo-panel-band { animation: moSlideIn .4s var(--mo-ease) both; }

@keyframes moRise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
@keyframes moSlideIn {
	from { opacity: 0; transform: translateX(-14px); }
	to { opacity: 1; transform: none; }
}


/* 5. Mobile navigation: a popover drawer, no script needed
   ========================================================================== */
.mo-mobile {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(92vw, 420px);
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 1rem 1.25rem 1.5rem;
	overflow-y: auto;
	border: 0;
	background: var(--mo-white);
	box-shadow: var(--mo-shadow-xl);
	color: var(--mo-body);
	transform: translateX(100%);
	transition: transform .4s var(--mo-ease), display .4s allow-discrete, overlay .4s allow-discrete;
}
.mo-mobile:popover-open { transform: none; }
@starting-style {
	.mo-mobile:popover-open { transform: translateX(100%); }
}
.mo-mobile::backdrop {
	background: rgba(3, 14, 51, .5);
	opacity: 0;
	transition: opacity .3s, display .3s allow-discrete, overlay .3s allow-discrete;
}
.mo-mobile:popover-open::backdrop { opacity: 1; }
@starting-style {
	.mo-mobile:popover-open::backdrop { opacity: 0; }
}

.mo-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mo-mobile-head img { display: block; width: auto; height: 40px; }
.mo-mobile .mo-search { margin-bottom: .75rem; }
.mo-mobile .mo-search input,
.mo-mobile .mo-search input:focus { width: 100%; }
.mo-mobile-list { margin-bottom: 1.25rem; }
.mo-mobile-link,
.mo-mobile-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .85rem 0;
	border-bottom: 1px solid var(--mo-line);
	color: var(--mo-navy);
	font-weight: 600;
	text-decoration: none;
	list-style: none;
	cursor: pointer;
}
.mo-mobile-item summary::-webkit-details-marker { display: none; }
.mo-mobile-item summary::after {
	content: "\f078";
	color: var(--mo-muted);
	font-family: "Font Awesome 6 Free";
	font-size: .7rem;
	font-weight: 900;
	transition: transform .3s var(--mo-ease);
}
.mo-mobile-item[open] summary { color: var(--mo-blue-bright); }
.mo-mobile-item[open] summary::after { transform: rotate(180deg); }
.mo-mobile-body { padding: .6rem 0 .85rem; border-bottom: 1px solid var(--mo-line); }
.mo-mobile-overview { display: inline-block; margin-bottom: .3rem; color: var(--mo-blue-bright); font-size: .9rem; font-weight: 600; text-decoration: none; }
.mo-mobile-group { display: flex; align-items: center; gap: .55rem; margin: .8rem 0 .2rem; color: var(--mo-ink); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mo-mobile-sublink { display: flex; align-items: center; gap: .65rem; padding: .38rem 0; color: var(--mo-body); font-size: .92rem; text-decoration: none; }
.mo-mobile-sublink i { flex: none; width: 20px; color: var(--mo-blue); font-size: .85rem; text-align: center; }
.mo-mobile-sublink:not(:has(i))::before { content: ""; flex: none; width: 5px; height: 5px; margin-inline: 2px 6px; border-radius: 50%; background: #c3c8d1; }
.mo-mobile-phone { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; color: var(--mo-blue); font-weight: 600; text-decoration: none; }


/* 6. Footer
   ========================================================================== */
.mo-footer {
	position: relative;
	overflow: hidden;
	background: var(--mo-gradient-dark);
	color: var(--mo-on-dark);
	font-size: .9rem;
}
.mo-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--mo-gradient);
}
.mo-footer::after {
	content: "";
	position: absolute;
	top: -260px;
	right: -200px;
	width: 680px;
	height: 680px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 48px, rgba(255, 255, 255, .05) 48px 49px);
	animation: moDrift 26s ease-in-out infinite;
}
.mo-footer-inner {
	position: relative;
	z-index: 1;
	max-width: 1500px;
	margin-inline: auto;
	padding: clamp(3rem, 2rem + 3vw, 4.75rem) clamp(1rem, 3vw, 2.5rem) 1.5rem;
}
.mo-footer a { color: inherit; text-decoration: none; transition: color .15s; }
.mo-footer a:hover { color: var(--mo-white); }
.mo-footer-brand img { display: block; width: auto; height: 50px; }
.mo-footer-about { max-width: 42ch; margin: 1.1rem 0; }
.mo-footer-contact { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.mo-footer-contact li { margin-bottom: .45rem; }
.mo-footer-contact a { display: inline-flex; align-items: center; gap: .6rem; }
.mo-footer-contact i { color: var(--mo-gold); }
.mo-footer-title { margin: 0 0 .9rem; color: var(--mo-white); font-size: .95rem; font-weight: 600; }
.mo-footer-links { margin: 0; padding: 0; list-style: none; }
.mo-footer-links li { margin-bottom: .5rem; }
.mo-footer-links a { display: inline-block; transition: color .15s, transform .3s var(--mo-ease); }
.mo-footer-links a:hover { transform: translateX(4px); }
.mo-footer-social { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mo-footer-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--mo-white);
	transition: background-color .2s, color .2s, transform .3s var(--mo-ease);
}
.mo-footer-social a:hover { background: var(--mo-gold); color: var(--mo-navy); transform: translateY(-3px); }

.mo-footer-offices { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid rgba(255, 255, 255, .13); }
.mo-footer-office {
	height: 100%;
	padding: 1.15rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--mo-radius);
	background: rgba(255, 255, 255, .05);
	transition: background-color .25s, border-color .25s, transform .35s var(--mo-ease);
}
.mo-footer-office:hover { border-color: rgba(240, 144, 46, .5); background: rgba(255, 255, 255, .09); transform: translateY(-3px); }
.mo-footer-office p { margin: 0 0 .35rem; font-size: .84rem; line-height: 1.5; }
.mo-footer-office .mo-footer-office-label { margin: 0; color: var(--mo-gold); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mo-footer-office .mo-footer-office-city { margin-bottom: .3rem; color: var(--mo-white); font-size: 1rem; font-weight: 600; }
.mo-footer-office a { font-size: .84rem; font-weight: 500; }

.mo-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1.5rem;
	margin-top: 2rem;
	padding: 1.25rem 4rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, .13);
	font-size: .82rem;
}
.mo-footer-bottom p { margin: 0; }
.mo-footer-bottom ul { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.mo-footer-badges i { margin-right: .4rem; color: var(--mo-gold); }


/* 7. Home page
   ========================================================================== */
.home-section { position: relative; padding-block: var(--mo-section-y); }
.home-section-alt { background: var(--mo-paper); }

.home-title { margin: 0 0 .85rem; font-size: var(--mo-h2); font-weight: 600; letter-spacing: -.02em; }
.home-lead { margin: 0; font-size: 1.04rem; }
.home-head { max-width: 700px; margin-bottom: 3rem; }
.home-head-center { margin-inline: auto; text-align: center; }

/* Hero: the photo is toned deep blue, as on ValueCoders, so every line of text
   stays white on a dark background. The right side keeps the darker photo. */
.home-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
	padding-block: calc(var(--mo-header-h) + 2.5rem) var(--mo-home-hero-y);
	background:
		linear-gradient(180deg, rgba(3, 14, 51, .72) 0, rgba(3, 14, 51, 0) 30%),
		linear-gradient(90deg, rgba(3, 14, 51, .94) 0%, rgba(3, 14, 51, .82) 40%, rgba(5, 22, 77, .55) 72%, rgba(3, 14, 51, .7) 100%),
		url("../images/home-hero.webp") center / cover no-repeat;
	background-color: #0a2a6b;
	background-blend-mode: normal, normal, luminosity;
	color: var(--mo-white);
}
.home-hero > .container { position: relative; z-index: 1; width: 100%; }

.home-hero-title { margin: 0 0 1rem; color: var(--mo-white); font-size: var(--mo-h1); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.home-hero-subtitle { margin: 0 0 .9rem; color: var(--mo-white); font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 600; line-height: 1.4; }
.home-hero-lead { max-width: 60ch; margin: 0 0 2rem; color: var(--mo-white); font-size: 1.06rem; }
.home-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
}
.home-hero-badges li {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem .9rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
	color: var(--mo-white);
	font-size: .84rem;
	font-weight: 500;
}
.home-hero-badges i { color: var(--mo-white); }

/* The hero text arrives in sequence */
.home-hero .col-lg-8 > * { animation: moEnter .8s var(--mo-ease) both; }
.home-hero .col-lg-8 > :nth-child(2) { animation-delay: .08s; }
.home-hero .col-lg-8 > :nth-child(3) { animation-delay: .16s; }
.home-hero .col-lg-8 > :nth-child(4) { animation-delay: .24s; }
.home-hero .col-lg-8 > :nth-child(5) { animation-delay: .32s; }

/* Running bar under the hero. The list repeats in the HTML, so sliding a
   quarter of the way loops cleanly. */
.home-running {
	overflow: hidden;
	padding-block: 1.35rem;
	background: linear-gradient(90deg, #00336b 0%, var(--mo-blue) 55%, #0b5cb0 100%);
	color: var(--mo-white);
}
.home-running-list {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: moTickerQuarter 40s linear infinite;
}
.home-running:hover .home-running-list { animation-play-state: paused; }
.home-running-list li {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding-inline: 2rem;
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
}
.home-running-list li::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 2rem;
	border-radius: 50%;
	background: var(--mo-gold);
}
.home-running-list strong { font-size: 1.45rem; font-weight: 700; line-height: 1; }
.home-running-list i { color: var(--mo-gold); }

/* Trusted By: two rows of client logos moving in opposite directions */
.home-trusted { overflow: hidden; padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem); background: var(--mo-white); }
.home-trusted-title {
	margin: 0 0 1.75rem;
	color: var(--mo-ink);
	font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
	font-weight: 600;
	text-align: center;
}
.home-logos {
	display: grid;
	gap: 1rem;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.home-logos-row {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: moTickerQuarter 55s linear infinite;
}
.home-logos-row-reverse { animation-direction: reverse; animation-duration: 50s; }
.home-logos:hover .home-logos-row { animation-play-state: paused; }
.home-logos-row li { flex: none; padding-inline: 1.75rem; }
/* The logo files have white backgrounds; multiply drops it into the page */
.home-logos-row img {
	display: block;
	width: auto;
	height: 58px;
	mix-blend-mode: multiply;
	filter: grayscale(1) contrast(1.15);
	opacity: .82;
	transition: filter .3s, opacity .3s, transform .3s var(--mo-ease);
}
.home-logos-row img:hover { filter: none; opacity: 1; transform: scale(1.06); }

/* Services: three pillars */
.home-pillar { display: flex; flex-direction: column; padding: 2rem; }
.home-pillar-list { position: relative; z-index: 1; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .92rem; }
.home-pillar-list li { position: relative; padding: .28rem 0 .28rem 1.55rem; }
.home-pillar-list li::before {
	content: "\f00c";
	position: absolute;
	left: 0;
	top: .42rem;
	color: var(--mo-blue-bright);
	font-family: "Font Awesome 6 Free";
	font-size: .76rem;
	font-weight: 900;
}
.home-pillar-list a { color: inherit; text-decoration: none; transition: color .15s, padding-left .25s var(--mo-ease); }
.home-pillar-list a:hover { padding-left: .25rem; color: var(--mo-blue-bright); }

/* Why MetaOption */
.home-why { overflow: hidden; background: var(--mo-gradient-dark); color: var(--mo-on-dark); }
.home-why::before {
	content: "";
	position: absolute;
	top: -240px;
	left: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 46px, rgba(255, 255, 255, .07) 46px 47px);
	animation: moDrift 22s ease-in-out infinite;
}
.home-why::after {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -220px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 144, 46, .17), transparent 65%);
	animation: moBreathe 13s ease-in-out infinite;
}
.home-why > .container { position: relative; z-index: 1; }
.home-why .home-title,
.home-why .home-card-title { color: var(--mo-white); }
.home-why .home-eyebrow { color: var(--mo-gold); }
.home-why-item {
	height: 100%;
	padding: 1.6rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--mo-radius-lg);
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
	transition: transform .4s var(--mo-ease), background-color .25s, border-color .25s;
}
.home-why-item:hover { transform: translateY(-5px); border-color: rgba(240, 144, 46, .55); background: rgba(255, 255, 255, .1); }
.home-why-icon {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: .85rem;
	border-radius: 13px;
	background: rgba(240, 144, 46, .15);
	color: var(--mo-gold);
	transition: transform .4s var(--mo-ease);
}
.home-why-item:hover .home-why-icon { transform: rotate(-6deg) scale(1.08); }
.home-why-item p { margin: 0; font-size: .93rem; }

/* Industries */
.home-industry {
	position: relative;
	display: flex;
	align-items: center;
	gap: .8rem;
	height: 100%;
	padding: 1rem 1.1rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius);
	background: var(--mo-white);
	box-shadow: var(--mo-shadow);
	color: var(--mo-ink);
	font-size: .92rem;
	font-weight: 500;
	transition: transform .35s var(--mo-ease), border-color .2s, box-shadow .35s;
}
.home-industry:hover { transform: translateY(-4px); border-color: rgba(91, 176, 255, .6); box-shadow: var(--mo-shadow-md); }
.home-industry a { color: inherit; text-decoration: none; transition: color .2s; }
.home-industry a::after { content: ""; position: absolute; inset: 0; }
.home-industry:hover a { color: var(--mo-blue-bright); }
.home-industry i {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--mo-tint-bg);
	color: var(--mo-tint-fg);
	transition: transform .35s var(--mo-ease), background-color .2s, color .2s;
}
.home-industry:hover i { background: var(--mo-tint-fg); color: var(--mo-white); transform: rotate(-6deg) scale(1.06); }
.home-industry p { margin: 0; line-height: 1.3; }

/* Process */
.home-steps { counter-reset: home-step; }
.home-step { counter-increment: home-step; }
.home-step::before { content: counter(home-step, decimal-leading-zero); }
.home-step p { margin: 0; font-size: .93rem; }

/* Stories */
.home-card-label { position: relative; margin: 0 0 .3rem; color: var(--mo-orange); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.home-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 2.2rem;
	border-radius: var(--mo-radius-lg);
	background: var(--mo-gradient-dark);
	box-shadow: var(--mo-shadow-lg);
	color: var(--mo-on-dark);
}
.home-quote::after {
	content: "";
	position: absolute;
	right: -110px;
	bottom: -110px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 32px, rgba(255, 255, 255, .1) 32px 33px);
	animation: moBreathe 10s ease-in-out infinite;
}
.home-quote > * { position: relative; z-index: 1; }
.home-quote > i { margin-bottom: 1rem; color: var(--mo-gold); font-size: 1.6rem; }
/* Quotes share one grid cell and fade between each other */
.home-quote-stack { display: grid; flex: 1; align-items: center; }
.home-quote-item { grid-area: 1 / 1; margin: 0; animation: moQuote 16s ease-in-out infinite; }
.home-quote-item:nth-child(2) { animation-delay: -8s; }
.home-quote:hover .home-quote-item { animation-play-state: paused; }
.home-quote blockquote { margin: 0 0 1rem; border: 0; padding: 0; color: var(--mo-white); font-size: 1.08rem; font-style: normal; line-height: 1.6; }
.home-quote figcaption { font-size: .88rem; }
.home-quote figcaption strong { display: block; color: var(--mo-gold); font-weight: 600; }

/* Contact band */
.home-contact { overflow: hidden; background: var(--mo-gradient-dark); color: var(--mo-on-dark); }
.home-contact::before {
	content: "";
	position: absolute;
	bottom: -260px;
	left: -200px;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 46px, rgba(255, 255, 255, .06) 46px 47px);
	animation: moDrift 24s ease-in-out infinite;
}
.home-contact > .container { position: relative; z-index: 1; }
.home-contact .home-title { color: var(--mo-white); }
.home-contact .home-eyebrow { color: var(--mo-gold); }
.home-contact-list { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.home-contact-list li { display: flex; align-items: center; gap: .7rem; margin-bottom: .65rem; color: var(--mo-white); font-size: .96rem; }
.home-contact-list i {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--mo-gold);
	font-size: .85rem;
}
.home-contact-list a { color: inherit; text-decoration: none; transition: color .15s; }
.home-contact-list a:hover { color: var(--mo-gold); }
.home-contact-card { padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); border-radius: var(--mo-radius-lg); background: var(--mo-white); box-shadow: var(--mo-shadow-xl); color: var(--mo-body); }
.home-contact-title { margin: 0 0 1.1rem; font-size: 1.3rem; font-weight: 600; }

@keyframes moShimmer {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}
@keyframes moTicker {
	to { transform: translateX(-50%); }
}
@keyframes moTickerQuarter {
	to { transform: translateX(-25%); }
}
@keyframes moQuote {
	0%, 44% { opacity: 1; visibility: visible; }
	50%, 94% { opacity: 0; visibility: hidden; }
	100% { opacity: 1; visibility: visible; }
}


/* 8. Internal pages
   ========================================================================== */

/* 8.1 Section shell: .page-section, optional .page-section-alt */
.page-section { position: relative; padding-block: var(--mo-section-y); }
.page-section-alt { background: var(--mo-paper); }
.page-section-head { max-width: 720px; margin-bottom: 2.75rem; }
.page-section-head-center { margin-inline: auto; text-align: center; }
.page-title { margin: 0 0 .75rem; font-size: var(--mo-h2); font-weight: 600; letter-spacing: -.02em; }
.page-subtitle { margin: 0; font-size: 1.03rem; }

/* 8.2 Hero: .page-hero */
.page-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--mo-page-hero-y);
	background: var(--mo-gradient-dark);
	color: var(--mo-on-dark);
}
.page-hero::before {
	content: "";
	position: absolute;
	top: -200px;
	left: 30%;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(10, 111, 232, .3), transparent 64%);
	animation: moBreathe 13s ease-in-out infinite;
}
.page-hero::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -130px;
	width: 560px;
	height: 560px;
	margin-top: -280px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 46px, rgba(255, 255, 255, .08) 46px 47px);
	animation: moDrift 24s ease-in-out infinite;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .page-eyebrow { color: var(--mo-gold); }
.page-hero-title { margin: 0 0 1rem; color: var(--mo-white); font-size: var(--mo-h1); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.page-hero-lead { max-width: 60ch; margin: 0 0 1.7rem; font-size: 1.06rem; }
.page-breadcrumb { margin: 0 0 1.1rem; color: #a9b8d8; font-size: .84rem; }
.page-breadcrumb a { color: inherit; text-decoration: none; transition: color .15s; }
.page-breadcrumb a:hover { color: var(--mo-white); }
.page-hero .col-lg-8 > * { animation: moEnter .7s var(--mo-ease) both; }
.page-hero .col-lg-8 > :nth-child(2) { animation-delay: .06s; }
.page-hero .col-lg-8 > :nth-child(3) { animation-delay: .12s; }
.page-hero .col-lg-8 > :nth-child(4) { animation-delay: .18s; }
.page-hero .col-lg-8 > :nth-child(5) { animation-delay: .24s; }

.page-hero-mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 168px;
	height: 168px;
	margin-inline: auto;
	border-radius: 50%;
	background: radial-gradient(circle at 42% 36%, var(--mo-white), #dfeafb 70%);
	color: var(--mo-blue-bright);
	font-size: 3.5rem;
	animation: moEnter .9s var(--mo-ease) .1s both, moCorePulse 5s ease-in-out 1s infinite;
}
.page-hero-mark::before {
	content: "";
	position: absolute;
	inset: -32px;
	border: 1px dashed rgba(255, 255, 255, .3);
	border-radius: 50%;
	animation: moSpin 30s linear infinite;
}
.page-hero-mark::after {
	content: "";
	position: absolute;
	inset: -56px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--mo-gold) 0 5px, transparent 6px) top center / 12px 12px no-repeat;
	filter: drop-shadow(0 0 7px rgba(240, 144, 46, .8));
	animation: moSpin 12s linear infinite;
}

/* 8.3 Intro: .page-intro */
.page-intro-text p { margin: 0 0 1rem; }
.page-intro-text p:last-child { margin-bottom: 0; }
.page-checklist-card {
	position: relative;
	overflow: hidden;
	padding: 2rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-lg);
	background: var(--mo-white);
	box-shadow: var(--mo-shadow-md);
}
.page-checklist-title { margin: 0 0 .9rem; font-size: var(--mo-h3); }
.page-checklist { margin: 0; padding: 0; list-style: none; }
.page-checklist li { position: relative; padding: .42rem 0 .42rem 2rem; color: var(--mo-ink); font-size: .95rem; font-weight: 500; }
.page-checklist li::before {
	content: "\f00c";
	position: absolute;
	left: 0;
	top: .55rem;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mo-blue-bright);
	color: var(--mo-white);
	font-family: "Font Awesome 6 Free";
	font-size: .6rem;
	font-weight: 900;
}

/* 8.4 Cards: .page-card, shared behavior is in section 3 */
.page-card-meta { position: relative; margin: .75rem 0 0; color: var(--mo-orange); font-size: .8rem; font-weight: 600; }
.page-group-title { margin: 2.75rem 0 1.25rem; font-size: 1.28rem; }
.page-group-title:first-child { margin-top: 0; }

/* 8.5 Process: .page-process, shared behavior is in section 3 */
.page-steps { counter-reset: page-step; }
.page-step { counter-increment: page-step; }
.page-step::before { content: counter(page-step, decimal-leading-zero); }
.page-step-title { margin: 0 0 .4rem; font-size: var(--mo-h3); }
.page-step-text { margin: 0; font-size: .93rem; }

/* 8.6 Quotes: .page-quote */
.page-quote {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 2rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-lg);
	background: var(--mo-white);
	box-shadow: var(--mo-shadow);
	transition: transform .4s var(--mo-ease), box-shadow .4s;
}
.page-quote:hover { transform: translateY(-5px); box-shadow: var(--mo-shadow-lg); }
.page-quote::before {
	content: "\f10d";
	display: block;
	margin-bottom: .6rem;
	color: var(--mo-gold);
	font-family: "Font Awesome 6 Free";
	font-size: 1.4rem;
	font-weight: 900;
}
.page-quote-text { margin: 0 0 .8rem; color: var(--mo-ink); font-size: 1.02rem; }
.page-quote-cite { margin: 0; color: var(--mo-muted); font-size: .86rem; }

/* 8.7 FAQ: .page-faq, shared behavior is in section 3 */

/* 8.8 CTA: .page-cta, a floating rounded card */
.page-cta { padding-block: var(--mo-section-y); background: var(--mo-white); }
.page-cta > .container {
	position: relative;
	overflow: hidden;
	width: calc(100% - 1.5rem);
	padding: clamp(2rem, 1rem + 4vw, 3.75rem);
	border-radius: 28px;
	background: var(--mo-gradient-dark);
	box-shadow: var(--mo-shadow-xl);
	color: var(--mo-on-dark);
}
.page-cta > .container::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -120px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 144, 46, .3), transparent 66%);
	animation: moBreathe 9s ease-in-out infinite;
}
.page-cta .row { position: relative; z-index: 1; }
.page-cta-title { margin: 0 0 .4rem; color: var(--mo-white); font-size: var(--mo-h2); font-weight: 600; letter-spacing: -.02em; }
.page-cta-text { margin: 0; font-size: 1.02rem; }

/* 8.9 Contact: .page-contact */
.page-contact > .container { position: relative; z-index: 2; }
.page-contact-title { margin: 0 0 1.2rem; font-size: 1.4rem; font-weight: 600; }
.page-contact-panel { height: 100%; padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); border: 1px solid var(--mo-line); border-radius: var(--mo-radius-lg); background: var(--mo-white); box-shadow: var(--mo-shadow-lg); }
.page-contact-side {
	position: relative;
	overflow: hidden;
	height: 100%;
	padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
	border-radius: var(--mo-radius-lg);
	background: var(--mo-gradient-dark);
	box-shadow: var(--mo-shadow-lg);
	color: var(--mo-on-dark);
}
.page-contact-side::after {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -120px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 34px, rgba(255, 255, 255, .1) 34px 35px);
	animation: moBreathe 10s ease-in-out infinite;
}
.page-contact-side > * { position: relative; z-index: 1; }
.page-contact-side h3 { margin-bottom: .5rem; color: var(--mo-white); font-size: 1.2rem; font-weight: 600; }
.page-contact-side p { margin-bottom: 1.1rem; font-size: .93rem; }
.page-contact-side ul { margin: 0; padding: 0; list-style: none; }
.page-contact-side li { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; font-size: .94rem; }
.page-contact-side i {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--mo-gold);
	font-size: .85rem;
}
.page-contact-side a { color: var(--mo-white); text-decoration: none; transition: color .15s; }
.page-contact-side a:hover { color: var(--mo-gold); }
.page-location-label { position: relative; margin: 0 0 .2rem; color: var(--mo-orange); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }


/* 9. Blog and listings
   ========================================================================== */
.blog .site-content,
.archive .site-content,
.search .site-content { padding-block: 3rem; }
.blog .ast-article-post,
.archive .ast-article-post,
.search .ast-article-post {
	margin-bottom: 1.5rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-lg);
	background: var(--mo-white);
	box-shadow: var(--mo-shadow);
	transition: transform .4s var(--mo-ease), box-shadow .4s, border-color .25s;
}
.blog .ast-article-post:hover,
.archive .ast-article-post:hover,
.search .ast-article-post:hover { transform: translateY(-4px); border-color: rgba(91, 176, 255, .6); box-shadow: var(--mo-shadow-lg); }
.entry-title a { color: var(--mo-ink); text-decoration: none; transition: color .2s; }
.entry-title a:hover { color: var(--mo-blue-bright); }
.single .entry-content { font-size: 1.02rem; }


/* 10. Scroll-driven animation
   ========================================================================== */

/* The header gains a shadow and a reading progress line as the page scrolls */
.mo-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--mo-gradient);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* Home page: the header sits over the hero and stays fixed while scrolling.
   Browsers without scroll-driven animation keep the solid white header. */
.home .mo-header { position: fixed; left: 0; right: 0; }

@keyframes moHeaderSolid {
	from { --mo-solid: 0; }
	to { --mo-solid: 1; }
}
@supports (animation-timeline: scroll()) {
	.home .mo-header { animation: moHeaderSolid linear both; animation-timeline: scroll(root); animation-range: 0 24px; }
}

@keyframes moProgress {
	to { transform: scaleX(1); }
}
@keyframes moShowTop {
	from { opacity: 0; visibility: hidden; }
	to { opacity: 1; visibility: visible; }
}
/* Uses translate, not transform, so card hover effects keep working */
@keyframes moReveal {
	from { opacity: 0; translate: 0 48px; }
	to { opacity: 1; translate: 0 0; }
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.mo-header::after { animation: moProgress linear both; animation-timeline: scroll(root); }
		.mo-to-top { animation: moShowTop linear both; animation-timeline: scroll(root); animation-range: 500px 700px; }

		.home-head,
		.home-trusted-title,
		.home-logos,
		.home-pillar-list,
		.home-contact-list,
		.home-card,
		.home-industry,
		.home-why-item,
		.home-step,
		.home-quote,
		.home-faq-list details,
		.home-contact-card,
		.page-section-head,
		.page-card,
		.page-step,
		.page-quote,
		.page-intro-text,
		.page-checklist-card,
		.page-faq-list details,
		.page-contact-panel,
		.page-contact-side {
			animation: moReveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 38%;
		}

		/* Later cards in a row arrive slightly after the first */
		.row > :nth-child(2) > .home-card,
		.row > :nth-child(2) > .page-card,
		.row > :nth-child(2) > .home-step,
		.row > :nth-child(2) > .page-step,
		.row > :nth-child(2) > .home-why-item { animation-range: entry 6% entry 46%; }
		.row > :nth-child(3) > .home-card,
		.row > :nth-child(3) > .page-card,
		.row > :nth-child(3) > .home-step,
		.row > :nth-child(3) > .page-step { animation-range: entry 12% entry 54%; }
		.row > :nth-child(4) > .home-card,
		.row > :nth-child(4) > .page-card,
		.row > :nth-child(4) > .home-step,
		.row > :nth-child(4) > .page-step { animation-range: entry 18% entry 62%; }

		/* The step connector draws as it scrolls in */
		.home-step::after,
		.page-step::after { animation: moDraw linear both; animation-timeline: view(); animation-range: entry 20% entry 80%; }

	}
}
@keyframes moDraw {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}


/* 11. Astra and block editor adjustments
   ========================================================================== */

/* Sections span the full width; Astra's content width applies only inside .container */
body.ast-page-builder-template,
body.ast-plain-container { background-color: var(--mo-white); }
.ast-page-builder-template .site-content > .ast-container { max-width: 100%; padding: 0; }
.ast-single-post.ast-page-builder-template .site-main > article { padding: 0; }

/* Astra pads top-level Group blocks. Sections set their own space. */
.entry-content > .wp-block-group { padding: 0; }
.entry-content > .home-section,
.entry-content > .page-section,
.entry-content > .page-cta { padding-block: var(--mo-section-y); }
.entry-content > .home-hero { padding-block: calc(var(--mo-header-h) + 2.5rem) var(--mo-home-hero-y); }
.entry-content > .home-running { padding-block: 1.35rem; }
.entry-content > .home-trusted { padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem); }
.entry-content .home-hero p.home-hero-subtitle { margin-bottom: .9rem; }
.entry-content .home-hero p.home-hero-lead { margin-bottom: 2rem; }
.entry-content .home-trusted p.home-trusted-title { margin-bottom: 1.75rem; }
.entry-content > .page-hero { padding-block: var(--mo-page-hero-y); }

/* Astra sets .entry-content ul to margin: revert, which brings back the indent */
.entry-content ul.home-hero-badges { margin: 2.25rem 0 0; padding: 0; }
.entry-content ul.home-running-list,
.entry-content ul.home-logos-row,
.entry-content ul.page-checklist { margin: 0; padding: 0; }
.entry-content ul.home-pillar-list { margin: 1rem 0 0; padding: 0; }
.entry-content ul.home-contact-list { margin: 1.5rem 0 0; padding: 0; }
.ast-page-builder-template .site-content #primary { margin: 0; }
.ast-page-builder-template .entry-header { display: none; }
.ast-page-builder-template .entry-content { margin: 0; }
.entry-content[data-ast-blocks-layout] > * { max-width: none; margin-left: 0; margin-right: 0; }
.entry-content > .wp-block-group,
.entry-content > section { margin-block: 0; }

/* Astra gives every paragraph in .entry-content a large bottom margin, stronger than a
   single class. Styled paragraphs start from zero and set their own space here. */
.entry-content p[class],
.entry-content :is(.home-why-item, .home-step, .home-faq-list, .page-faq-list) p { margin-bottom: 0; }
.entry-content p.home-eyebrow,
.entry-content p.page-eyebrow { margin-bottom: .85rem; }
.entry-content p.home-hero-eyebrow { margin-bottom: 1.2rem; }
.entry-content p.home-hero-lead { margin-bottom: 1.9rem; }
.entry-content p.page-hero-lead { margin-bottom: 1.7rem; }
.entry-content p.page-breadcrumb { margin-bottom: 1.1rem; }
.entry-content p.page-quote-text { margin-bottom: .8rem; }
.entry-content p.home-card-label { margin-bottom: .3rem; }
.entry-content p.page-location-label { margin-bottom: .2rem; }
.entry-content .page-intro-text p { margin-bottom: 1rem; }
.entry-content .page-intro-text p:last-child { margin-bottom: 0; }
.entry-content .page-contact-side p { margin-bottom: 1.1rem; }

/* Astra underlines links inside .entry-content. Cards and buttons don't need it. */
.entry-content :is(.home-card-title, .page-card-title, .home-pillar-list, .home-industry, .home-contact-list, .page-breadcrumb, .page-contact-side, .page-card-meta) a,
.entry-content a.wp-block-button__link { text-decoration: none; }

/* Astra styles headings through .entry-content. Keep our sizes. */
.entry-content .home-hero-title,
.entry-content .page-hero-title { font-size: var(--mo-h1); color: var(--mo-white); }
.entry-content .home-title,
.entry-content .page-title,
.entry-content .page-cta-title { font-size: var(--mo-h2); }
.entry-content .page-cta-title,
.entry-content .home-why .home-title,
.entry-content .home-contact .home-title { color: var(--mo-white); }
.entry-content .home-card-title,
.entry-content .page-card-title,
.entry-content .page-step-title,
.entry-content .page-checklist-title { font-size: var(--mo-h3); }
.entry-content .page-group-title { font-size: 1.28rem; }

/* Page editor: show sections as they appear on the site, without scroll effects */
.editor-styles-wrapper { font-family: var(--mo-font); }
.editor-styles-wrapper .wp-block-group { max-width: none; }
.editor-styles-wrapper .page-hero-title,
.editor-styles-wrapper .home-hero-title,
.editor-styles-wrapper .page-cta-title,
.editor-styles-wrapper .home-why .home-title,
.editor-styles-wrapper .home-why .home-card-title,
.editor-styles-wrapper .home-contact .home-title { color: var(--mo-white); }
.editor-styles-wrapper :is(.home-head, .home-card, .home-why-item, .home-step, .home-contact-card, .page-section-head, .page-card, .page-step, .page-quote, .page-intro-text, .page-checklist-card, .page-contact-panel, details) { animation: none; opacity: 1; translate: none; }


/* 12. Responsive
   ========================================================================== */
@media (max-width: 1499.98px) {
	.mo-search input { width: 190px; }
	.mo-search input:focus { width: 230px; }
}

@media (max-width: 1439.98px) {
	.mo-header-bar { gap: .75rem; padding-inline: var(--mo-gutter); }
	.mo-nav-link { padding-inline: 10px; font-size: .93rem; }
	.mo-nav-link::after { left: 10px; right: 10px; }
	.mo-search input { width: 150px; }
	.mo-search input:focus { width: 200px; }
}

@media (max-width: 1299.98px) {
	.mo-header .mo-search { display: none; }
	.mo-brand img { height: 42px; }
	.mo-panel-strip p { display: none; }
}

@media (max-width: 1199.98px) {
	:root { --mo-header-h: 70px; }
	.mo-nav,
	.mo-mega-backdrop { display: none; }
	.mo-burger { display: grid; }
	.mo-header-bar { justify-content: space-between; }
	.mo-header-actions { margin-left: auto; }
}

@media (max-width: 991.98px) {
	.home-step::after,
	.page-step::after { content: none; }
	.page-hero-mark { display: none; }
	.page-hero::after { opacity: .5; }
}

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

@media (max-width: 767.98px) {
	.home-hero {
		background:
			linear-gradient(180deg, rgba(3, 14, 51, .86) 0%, rgba(3, 14, 51, .76) 55%, rgba(3, 14, 51, .92) 100%),
			url("../images/home-hero-mobile.webp") center / cover no-repeat;
		background-color: #0a2a6b;
		background-blend-mode: normal, luminosity;
	}
}

@media (max-width: 575.98px) {
	.mo-header-cta { display: none; }
	.home-running-list li { padding-inline: 1.25rem; font-size: .92rem; }
	.home-running-list li::after { margin-left: 1.25rem; }
	.home-logos-row img { height: 46px; }
	.home-logos-row li { padding-inline: 1.1rem; }
	.wp-block-buttons > .wp-block-button { flex: 1 1 100%; }
	.wp-block-button .wp-block-button__link { width: 100%; }
	.mo-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Very short screens: panels tighten instead of scrolling */
@media (max-height: 620px) {
	.mo-panel-inner { padding-block: .8rem .6rem; }
	.mo-panel-band { padding-bottom: .5rem; }
	.mo-panel-grid { padding-top: .6rem; }
	.mo-panel-links a { padding-block: .18rem; font-size: .8rem; }
	.mo-panel-links a::before { top: calc(.18rem + .7em - 2.5px); }
	.mo-panel-card { padding-block: .6rem; }
	.mo-panel-card-icon { width: 28px; height: 28px; margin-bottom: .4rem; }
	.mo-panel-card small,
	.mo-panel-strip { display: none; }
}

@media print {
	.mo-header,
	.mo-to-top { position: static; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.page-hero-mark { animation: none !important; }
	.home-quote-item { grid-area: auto; margin-bottom: 1.25rem; opacity: 1; visibility: visible; }
	.home-running-list,
	.home-logos-row { flex-wrap: wrap; justify-content: center; width: auto; }
	.home-running-list [aria-hidden="true"],
	.home-logos-row [aria-hidden="true"] { display: none; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}