/** Reusable Mesle Aval components and explicit UI states (MVA-043). */

.ma-icon {
	display: block;
	flex: 0 0 auto;
	inline-size: var(--space-6);
	block-size: var(--space-6);
	overflow: visible;
	color: currentcolor;
}

/* Shared site chrome — MVA-045. */
.ma-site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	min-block-size: 64px;
	border: 0;
	background: var(--color-white);
	backdrop-filter: blur(12px);
	box-shadow: inset 0 -1px 0 var(--color-gray-100);
}

.ma-site-header__inner {
	display: flex;
	align-items: center;
	min-block-size: 64px;
	gap: var(--space-3);
	direction: ltr;
}

.ma-brand {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-block-size: 52px;
	color: var(--color-deep-navy);
	text-decoration: none;
	direction: ltr;
}
.ma-brand picture { display: flex; align-items: center; line-height: 0; }
.ma-brand__logo { display: block; inline-size:clamp(180px,18vw,260px); block-size: auto; object-fit: contain; }
.ma-assessment-brand { display:block; line-height:0; }.ma-assessment-brand img { inline-size:128px; block-size:auto; max-inline-size:100%; }
.ma-photo-uploader__icon svg,.ma-photo-guidance__icon svg { display:block; inline-size:28px; block-size:28px; }

.ma-site-header__menu { display: none; }
.ma-menu-lines { display: grid; gap: 4px; }
.ma-menu-lines span { display: block; inline-size: 28px; block-size: 3px; border-radius: var(--radius-pill); background: var(--color-deep-navy); }

.ma-site-header__nav { margin-inline: auto; direction: rtl; }
.ma-site-header__nav ul { display: flex; align-items: center; gap: var(--space-8); padding: 0; margin: 0; list-style: none; }
.ma-site-header__nav a { color: var(--color-deep-navy); font-size: var(--font-size-body); font-weight: 500; text-decoration: none; }
.ma-site-header__nav a:hover { color: var(--color-teal-primary); }

.ma-site-header__phone {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	direction: rtl;
	min-block-size: var(--tap-target-min);
	padding-inline: var(--space-3);
	border: var(--border-soft);
	border-radius: var(--radius-md);
	color: var(--color-deep-navy);
	text-decoration: none;
}
.ma-site-header__phone-icon { flex: 0 0 auto; }
.ma-site-header__phone .ma-icon { inline-size: 18px; block-size: 18px; }
.ma-site-header__phone-label { font-family: var(--font-family-latin), var(--font-family-body); font-size: var(--font-size-caption); }
.ma-site-header__cta { min-block-size: var(--tap-target-min); padding-inline: var(--space-4); }
.ma-site-header__cta-icon { display: block; }
.ma-site-header__cta-icon .ma-icon { inline-size: 18px; block-size: 18px; }

.ma-mobile-drawer { position: fixed; inset: 0; z-index: var(--z-modal); }
.ma-mobile-drawer__backdrop { position: absolute; inset: 0; background: var(--color-deep-navy); opacity: .42; }
.ma-mobile-drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; inset-inline-end:auto; display: flex; flex-direction: column; inline-size: min(86vw, 360px); padding: var(--space-6); background: var(--color-white); box-shadow: var(--shadow-3); }
.ma-mobile-drawer__header { display: flex; align-items: center; justify-content: space-between; padding-block-end: var(--space-4); border-block-end: var(--border-soft); color: var(--color-deep-navy); font-size: var(--font-size-h3); }
.ma-mobile-drawer__close { display: inline-grid; place-items: center; min-inline-size: var(--tap-target-min); min-block-size: var(--tap-target-min); border: 0; background: transparent; color: var(--color-deep-navy); cursor: pointer; }
.ma-close-icon,
.ma-close-icon::after { display: block; inline-size: 22px; block-size: 2px; border-radius: var(--radius-pill); background: currentcolor; }
.ma-close-icon { transform: rotate(45deg); }
.ma-close-icon::after { content: ""; transform: rotate(90deg); }
.ma-mobile-drawer__links { display: grid; gap: var(--space-2); padding: var(--space-4) 0; margin: 0; list-style: none; }
.ma-mobile-drawer__links a { display: flex; align-items: center; min-block-size: var(--tap-target-min); padding-inline: var(--space-3); border-radius: var(--radius-sm); color: var(--color-deep-navy); font-weight: 500; text-decoration: none; }
.ma-mobile-drawer__links a:hover { background: var(--color-mint-tint); }
.ma-mobile-drawer__cta { margin-block-start: auto; inline-size: 100%; }
.ma-drawer-open { overflow: hidden; }

/* Shared responsive footer — MVA-046. */
.ma-site-footer {
	padding-block: var(--space-10) var(--space-6);
	background: var(--color-deep-navy);
	color: var(--color-white);
}
.ma-site-footer__grid { display: grid; gap: var(--space-8); }
.ma-site-footer h2 { margin-block-end: var(--space-4); color: var(--color-white); font-size: var(--font-size-h3); }
.ma-site-footer p { color: var(--color-gray-100); }
.ma-footer-brand { display: inline-flex; color: var(--color-white); text-decoration: none; }
.ma-footer-brand picture { display: block; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); background:var(--color-white); line-height: 0; }.ma-footer-brand__logo { display: block; inline-size:clamp(128px,18vw,360px); block-size: auto; object-fit: contain; }
.ma-site-footer__brand p { max-inline-size: 30ch; margin-block: var(--space-4); }
.ma-site-footer__brand-cta { min-block-size: 44px; }
.ma-site-footer a { color: var(--color-white); text-decoration-color: var(--color-teal-light); }
.ma-site-footer a:hover { color: var(--color-teal-light); }
.ma-site-footer__desktop-links,
.ma-site-footer__details { padding: 0; margin: 0; list-style: none; }
.ma-site-footer__desktop-links { display: grid; gap: var(--space-2); }
.ma-site-footer__desktop-links a { font-size: var(--font-size-caption); text-decoration: none; }
.ma-site-footer__details { display: none; }
.ma-site-footer .ma-site-footer__phone { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap-target-min); color: var(--color-teal-light); font-weight: 600; text-decoration: none; }
.ma-site-footer__phone .ma-icon,
.ma-site-footer__address .ma-icon { inline-size: 20px; block-size: 20px; }
.ma-site-footer__availability { font-size: var(--font-size-caption); }
.ma-site-footer__address { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); }
.ma-site-footer__map { font-size: var(--font-size-caption); }
.ma-site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block-start: var(--space-6); margin-block-start: var(--space-8); border-block-start: 1px solid var(--color-gray-600); }
.ma-site-footer__bottom p { margin: 0; font-size: var(--font-size-caption); }
.ma-site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ma-site-footer__bottom nav a { font-size: var(--font-size-caption); }

@media (min-width: 1025px) {
	.ma-site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; align-items: start; direction: ltr; }
	.ma-site-footer__grid > * { direction: rtl; }
}

@media (max-width: 1024px) {
	.ma-site-footer { padding-block-end: calc(var(--space-6) + var(--space-4)); }
	.ma-site-footer__desktop-links { display: none; }
	.ma-site-footer__details { display: block; border-block-end: 1px solid var(--color-gray-600); }
	.ma-site-footer__details summary { min-block-size: 52px; padding-block: var(--space-4); color: var(--color-white); font-weight: 600; cursor: pointer; }
	.ma-site-footer__details ul { display: grid; gap: var(--space-2); padding-block: 0 var(--space-4); margin: 0; list-style: none; }
	.ma-site-footer__details a { font-size: var(--font-size-caption); text-decoration: none; }
	.ma-site-footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 1025px) {
	.ma-site-header { block-size: 80px; min-block-size: 80px; }
	.ma-site-header__inner { block-size: 80px; min-block-size: 80px; }
}

@media (max-width: 1024px) {
	.ma-site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
	.ma-site-header__menu { display: inline-grid; place-items: center; flex: 0 0 var(--tap-target-min); padding: 0; border: 0; background: transparent; cursor: pointer; }
	.ma-site-header__menu { justify-self: start; }
	.ma-brand { margin: 0; }
	.ma-brand__logo { inline-size: clamp(170px, 44vw, 230px); }
	.ma-site-header__nav,
	.ma-site-header__cta { display: none; }
	.ma-site-header__phone { padding-inline: var(--space-2); border-color: var(--color-gray-100); color: var(--color-teal-primary); }
	.ma-site-header__phone { min-inline-size: var(--tap-target-min); justify-self: end; }
	.ma-site-header__phone-label { display: inline; }
}

@media (max-width: 600px) {
	.ma-site-header__phone-label { display: none; }
}

[dir="rtl"] .ma-icon--logical {
	transform: scaleX(-1);
}

.ma-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: 52px;
	min-inline-size: var(--tap-target-min);
	padding-block: var(--space-3);
	padding-inline: var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-size: var(--font-size-body);
	font-weight: 600;
	line-height: var(--line-height-body);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--motion-fast) var(--motion-easing),
		border-color var(--motion-fast) var(--motion-easing),
		color var(--motion-fast) var(--motion-easing),
		transform var(--motion-fast) var(--motion-easing);
}

.ma-button--primary {
	border-color: var(--color-deep-navy);
	background: var(--color-teal-primary);
	color: var(--color-deep-navy);
}

.ma-button--secondary {
	border-color: var(--color-navy);
	background: var(--color-white);
	color: var(--color-navy);
}

.ma-button--tertiary {
	border-color: var(--color-deep-navy);
	background: var(--color-mint-tint);
	color: var(--color-deep-navy);
}

.ma-button--text {
	min-block-size: var(--tap-target-min);
	padding-inline: var(--space-2);
	background: transparent;
	color: var(--color-navy);
	text-decoration: underline;
	text-decoration-color: var(--color-teal-primary);
	text-underline-offset: var(--space-1);
}

.ma-button--primary:hover:not(:disabled, [aria-disabled="true"]),
.ma-button--primary[data-demo-state="hover"] {
	border-color: var(--color-navy);
	background: var(--color-navy);
	color: var(--color-white);
}

.ma-button--primary:active:not(:disabled, [aria-disabled="true"]),
.ma-button--primary[data-demo-state="active"] {
	border-color: var(--color-deep-navy);
	background: var(--color-deep-navy);
	color: var(--color-white);
	transform: translateY(1px);
}

.ma-button--secondary:hover:not(:disabled, [aria-disabled="true"]),
.ma-button--secondary[data-demo-state="hover"] {
	border-color: var(--color-deep-navy);
	background: var(--color-gray-50);
	color: var(--color-deep-navy);
}

.ma-button--secondary:active:not(:disabled, [aria-disabled="true"]),
.ma-button--secondary[data-demo-state="active"] {
	border-color: var(--color-deep-navy);
	background: var(--color-mint-tint);
	color: var(--color-deep-navy);
	transform: translateY(1px);
}

.ma-button--tertiary:hover:not(:disabled, [aria-disabled="true"]),
.ma-button--tertiary[data-demo-state="hover"] {
	border-color: var(--color-deep-navy);
	background: var(--color-teal-light);
	color: var(--color-deep-navy);
}

.ma-button--tertiary:active:not(:disabled, [aria-disabled="true"]),
.ma-button--tertiary[data-demo-state="active"] {
	border-color: var(--color-deep-navy);
	background: var(--color-teal-primary);
	color: var(--color-deep-navy);
	transform: translateY(1px);
}

.ma-button--text:hover:not(:disabled, [aria-disabled="true"]),
.ma-button--text[data-demo-state="hover"] {
	background: transparent;
	color: var(--color-deep-navy);
	text-decoration-thickness: 2px;
}

.ma-button--text:active:not(:disabled, [aria-disabled="true"]),
.ma-button--text[data-demo-state="active"] {
	background: var(--color-gray-100);
	color: var(--color-deep-navy);
	transform: translateY(1px);
}

.ma-button[data-demo-state="focus"],
.ma-component-card[data-demo-state="focus"],
.ma-component-card:focus-within,
.ma-chip[data-demo-state="focus"],
.ma-accordion[data-demo-state="focus"] .ma-accordion__summary {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--color-deep-navy);
}

.ma-button:disabled,
.ma-button[aria-disabled="true"],
.ma-button[data-demo-state="disabled"] {
	border-color: var(--color-gray-300);
	background: var(--color-gray-100);
	color: var(--color-gray-600);
	cursor: not-allowed;
	transform: none;
	opacity: 1;
}

.ma-button[aria-busy="true"],
.ma-button[data-demo-state="loading"] {
	cursor: progress;
}

.ma-button[aria-busy="true"]::before,
.ma-button[data-demo-state="loading"]::before {
	inline-size: var(--space-4);
	block-size: var(--space-4);
	border: 2px solid currentcolor;
	border-block-start-color: transparent;
	border-radius: var(--radius-pill);
	content: "";
	animation: ma-spin var(--motion-slow) linear infinite;
}

.ma-button[data-state="error"],
.ma-button[data-demo-state="error"] {
	border-color: var(--color-error);
	background: var(--color-white);
	color: var(--color-deep-navy);
}

.ma-button[data-state="success"],
.ma-button[data-demo-state="success"] {
	border-color: var(--color-deep-navy);
	background: var(--color-mint-tint);
	color: var(--color-deep-navy);
}

@keyframes ma-spin {
	to {
		transform: rotate(1turn);
	}
}

.ma-field {
	display: grid;
	gap: var(--space-2);
	color: var(--color-deep-navy);
}

.ma-field__label {
	font-size: var(--font-size-caption);
	font-weight: 500;
	line-height: var(--line-height-caption);
}

.mesle-aval-theme .ma-field .ma-field__control,
.mesle-aval-theme .ma-field .ma-select {
	inline-size: 100%;
	min-block-size: 52px;
	padding-block: var(--space-3);
	padding-inline: 14px;
	border: var(--border-default);
	border-color: var(--color-gray-600);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-deep-navy);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	transition: border-color var(--motion-fast) var(--motion-easing),
		box-shadow var(--motion-fast) var(--motion-easing),
		background-color var(--motion-fast) var(--motion-easing);
}

.mesle-aval-theme .ma-field textarea.ma-field__control {
	min-block-size: calc(var(--space-16) + var(--space-12) + var(--space-2));
	resize: vertical;
}

.mesle-aval-theme .ma-field .ma-field__control::placeholder,
.mesle-aval-theme .ma-field .ma-select:invalid {
	color: var(--color-gray-600);
	opacity: 1;
}

.mesle-aval-theme .ma-field .ma-field__control:hover:not(:disabled),
.mesle-aval-theme .ma-field .ma-select:hover:not(:disabled),
.mesle-aval-theme .ma-field[data-demo-state="hover"] .ma-field__control,
.mesle-aval-theme .ma-field[data-demo-state="hover"] .ma-select {
	border-color: var(--color-gray-600);
}

.mesle-aval-theme .ma-field .ma-field__control:focus,
.mesle-aval-theme .ma-field .ma-select:focus,
.mesle-aval-theme .ma-field[data-demo-state="focus"] .ma-field__control,
.mesle-aval-theme .ma-field[data-demo-state="focus"] .ma-select {
	border-color: var(--color-deep-navy);
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--color-deep-navy);
}

.mesle-aval-theme .ma-field[data-state="filled"] .ma-field__control,
.mesle-aval-theme .ma-field[data-demo-state="filled"] .ma-field__control,
.mesle-aval-theme .ma-field[data-state="selected"] .ma-select,
.mesle-aval-theme .ma-field[data-demo-state="selected"] .ma-select {
	border-color: var(--color-navy);
	background: var(--color-gray-50);
}

.mesle-aval-theme .ma-field[data-state="error"] .ma-field__control,
.mesle-aval-theme .ma-field[data-state="error"] .ma-select,
.mesle-aval-theme .ma-field[data-demo-state="error"] .ma-field__control,
.mesle-aval-theme .ma-field[data-demo-state="error"] .ma-select,
.mesle-aval-theme .ma-field .ma-field__control[aria-invalid="true"],
.mesle-aval-theme .ma-field .ma-select[aria-invalid="true"] {
	border-color: var(--color-error);
}

.mesle-aval-theme .ma-field[data-state="success"] .ma-field__control,
.mesle-aval-theme .ma-field[data-demo-state="success"] .ma-field__control,
.mesle-aval-theme .ma-field[data-state="success"] .ma-select,
.mesle-aval-theme .ma-field[data-demo-state="success"] .ma-select {
	border-color: var(--color-deep-navy);
	box-shadow: inset 0 -2px 0 var(--color-deep-navy);
}

.mesle-aval-theme .ma-field .ma-field__control:disabled,
.mesle-aval-theme .ma-field .ma-select:disabled,
.mesle-aval-theme .ma-field[data-demo-state="disabled"] .ma-field__control,
.mesle-aval-theme .ma-field[data-demo-state="disabled"] .ma-select {
	border-color: var(--color-gray-300);
	background: var(--color-gray-100);
	color: var(--color-gray-600);
	cursor: not-allowed;
}

.ma-field__helper,
.ma-field__message {
	margin: 0;
	color: var(--color-gray-600);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
}

.ma-field__message {
	color: var(--color-deep-navy);
	font-weight: 500;
}

.ma-field[data-state="error"] .ma-field__message,
.ma-field[data-demo-state="error"] .ma-field__message {
	text-decoration: underline;
	text-decoration-color: var(--color-error);
	text-decoration-thickness: 2px;
}

.ma-component-card {
	display: grid;
	gap: var(--space-4);
	min-inline-size: 0;
	padding: var(--space-6);
	border: var(--border-default);
	border-color: var(--color-gray-600);
	border-radius: var(--radius-card);
	background: var(--color-white);
	color: var(--color-deep-navy);
	box-shadow: var(--shadow-1);
	transition: border-color var(--motion-fast) var(--motion-easing),
		box-shadow var(--motion-fast) var(--motion-easing),
		transform var(--motion-fast) var(--motion-easing);
}

.ma-component-card--service,
.ma-component-card--recommended-action {
	background: var(--color-mint-tint);
}

.ma-component-card--estimate,
.ma-component-card--case-summary {
	background: var(--color-gray-50);
}

.ma-component-card:hover,
.ma-component-card[data-demo-state="hover"] {
	border-color: var(--color-deep-navy);
	box-shadow: var(--shadow-2);
}

.ma-component-card:active,
.ma-component-card[data-demo-state="active"] {
	transform: translateY(1px);
}

.ma-component-card[aria-selected="true"],
.ma-component-card[data-demo-state="selected"] {
	border-color: var(--color-deep-navy);
	box-shadow: 0 0 0 2px var(--color-teal-light);
}

.ma-component-card[aria-disabled="true"],
.ma-component-card[data-demo-state="disabled"] {
	background: var(--color-gray-100);
	color: var(--color-gray-600);
	opacity: .72;
}

.ma-component-card[aria-busy="true"],
.ma-component-card[data-demo-state="loading"] {
	cursor: progress;
}

.ma-component-card[data-state="error"],
.ma-component-card[data-demo-state="error"] {
	border-color: var(--color-error);
}

.ma-component-card[data-state="success"],
.ma-component-card[data-demo-state="success"] {
	border-color: var(--color-deep-navy);
	box-shadow: inset 0 -2px 0 var(--color-deep-navy);
}

.ma-component-card__action {
	justify-self: start;
}

.ma-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--tap-target-min);
	padding-block: var(--space-2);
	padding-inline: var(--space-4);
	border: var(--border-default);
	border-color: var(--color-gray-600);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-deep-navy);
	font-size: var(--font-size-caption);
	font-weight: 500;
	line-height: var(--line-height-caption);
	cursor: pointer;
	transition: background-color var(--motion-fast) var(--motion-easing),
		border-color var(--motion-fast) var(--motion-easing),
		color var(--motion-fast) var(--motion-easing);
}

.ma-chip:hover:not(:disabled),
.ma-chip[data-demo-state="hover"] {
	border-color: var(--color-deep-navy);
	background: var(--color-mint-tint);
}

.ma-chip:active:not(:disabled),
.ma-chip[data-demo-state="active"],
.ma-chip[aria-pressed="true"],
.ma-chip[data-demo-state="selected"] {
	border-color: var(--color-deep-navy);
	background: var(--color-teal-light);
	color: var(--color-deep-navy);
}

.ma-chip:disabled,
.ma-chip[data-demo-state="disabled"] {
	background: var(--color-gray-100);
	color: var(--color-gray-600);
	cursor: not-allowed;
}

.ma-chip[aria-busy="true"],
.ma-chip[data-demo-state="loading"] {
	border-style: dashed;
	cursor: progress;
}

.ma-chip[data-state="error"],
.ma-chip[data-demo-state="error"] {
	border-color: var(--color-error);
}

.ma-chip[data-state="success"],
.ma-chip[data-demo-state="success"] {
	border-color: var(--color-deep-navy);
	background: var(--color-mint-tint);
}

.ma-accordion {
	border: var(--border-default);
	border-color: var(--color-gray-600);
	border-radius: var(--radius-md);
	background: var(--color-white);
	overflow: clip;
}

.ma-accordion + .ma-accordion {
	margin-block-start: var(--space-3);
}

.ma-accordion__summary {
	display: flex;
	align-items: center;
	min-block-size: 52px;
	padding: var(--space-4);
	color: var(--color-deep-navy);
	font-weight: 600;
	cursor: pointer;
}

.ma-accordion__summary:hover,
.ma-accordion[data-demo-state="hover"] .ma-accordion__summary {
	background: var(--color-gray-50);
}

.ma-accordion__summary:active,
.ma-accordion[data-demo-state="active"] .ma-accordion__summary {
	background: var(--color-gray-100);
}

.ma-accordion[open] .ma-accordion__summary,
.ma-accordion[data-demo-state="expanded"] .ma-accordion__summary {
	background: var(--color-mint-tint);
}

.ma-accordion__panel {
	padding: 0 var(--space-4) var(--space-4);
	color: var(--color-gray-600);
}

.ma-accordion[aria-disabled="true"],
.ma-accordion[data-demo-state="disabled"] {
	background: var(--color-gray-100);
	color: var(--color-gray-600);
}

.ma-accordion[aria-disabled="true"] .ma-accordion__summary {
	cursor: not-allowed;
}

.ma-accordion[aria-busy="true"],
.ma-accordion[data-demo-state="loading"] {
	border-style: dashed;
}

.ma-accordion[data-state="error"],
.ma-accordion[data-demo-state="error"] {
	border-color: var(--color-error);
}

.ma-accordion[data-state="success"],
.ma-accordion[data-demo-state="success"] {
	border-color: var(--color-deep-navy);
}

.ma-stepper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2);
	padding: 0;
	margin: 0;
	list-style: none;
}

.ma-stepper__item {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--space-2);
	min-inline-size: 0;
	color: var(--color-gray-600);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	text-align: center;
}

.ma-stepper__item:not(:last-child)::after {
	position: absolute;
	inset-block-start: var(--space-4);
	inset-inline-start: calc(50% + var(--space-4));
	inline-size: calc(100% - var(--space-8));
	block-size: 2px;
	background: var(--color-gray-600);
	content: "";
}

.ma-stepper__marker {
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	inline-size: var(--space-8);
	block-size: var(--space-8);
	border: 2px solid var(--color-gray-600);
	border-radius: var(--radius-pill);
	background: var(--color-gray-100);
	color: var(--color-gray-600);
	font-weight: 600;
}

.ma-stepper__marker .ma-icon {
	inline-size: var(--space-6);
	block-size: var(--space-6);
}

.ma-stepper__item[data-state="active"],
.ma-stepper__item[data-state="completed"] {
	color: var(--color-deep-navy);
}

.ma-stepper__item[data-state="active"] .ma-stepper__marker,
.ma-stepper__item[data-state="completed"] .ma-stepper__marker {
	border-color: var(--color-deep-navy);
	background: var(--color-teal-primary);
	color: var(--color-deep-navy);
}

.ma-stepper__item[data-state="completed"]::after {
	background: var(--color-deep-navy);
}

.ma-alert {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-4);
	border: var(--border-default);
	border-color: var(--color-deep-navy);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-deep-navy);
}

.ma-alert--info {
	border-color: var(--color-deep-navy);
	border-inline-start: var(--space-1) solid var(--color-info);
}

.ma-alert--success {
	border-color: var(--color-deep-navy);
	border-inline-start: var(--space-1) solid var(--color-success);
	background: var(--color-mint-tint);
}

.ma-alert--warning {
	border-color: var(--color-deep-navy);
	border-inline-start: var(--space-1) solid var(--color-warning);
}

.ma-alert--error {
	border-color: var(--color-deep-navy);
	border-inline-start: var(--space-1) solid var(--color-error);
}

.ma-alert__icon {
	display: inline-grid;
	place-items: center;
	inline-size: var(--space-8);
	block-size: var(--space-8);
	border: var(--border-default);
	border-color: var(--color-deep-navy);
	border-radius: var(--radius-pill);
}

.ma-alert__content,
.ma-alert__content p {
	margin: 0;
}

.ma-widget {
	min-inline-size: 0;
}

.ma-widget-call-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

.ma-widget-call-cta--full,
.ma-widget-call-cta--full .ma-button {
	inline-size: 100%;
}

.ma-widget-call-cta__phone {
	color: var(--color-gray-600);
	font-family: var(--font-family-latin);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
}

.ma-widget-trust {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	padding: 0;
	margin: 0;
	list-style: none;
}

.ma-widget-trust__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-4);
	border: var(--border-default);
	border-color: var(--color-gray-600);
	border-radius: var(--radius-card);
	background: var(--color-white);
	color: var(--color-deep-navy);
}

.ma-widget-trust__item h3,
.ma-widget-trust__item p,
.ma-widget-faq h2,
.ma-widget-faq__answer p,
.ma-widget-case-study h2,
.ma-widget-case-study p,
.ma-widget-structured-card h3,
.ma-widget-structured-card p {
	margin: 0;
}

.ma-widget-faq,
.ma-widget-faq__items {
	display: grid;
	gap: var(--space-4);
}

.ma-widget-faq__item summary {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	align-items: center;
	min-block-size: 52px;
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
}

.ma-widget-faq__item summary:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--color-deep-navy);
}

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

.ma-widget-faq__item[open] summary .ma-icon {
	transform: rotate(90deg);
}

[dir="rtl"] .ma-widget-faq__item[open] summary .ma-icon--logical {
	transform: scaleX(-1) rotate(90deg);
}

.ma-widget-faq__answer {
	padding: 0 var(--space-4) var(--space-4);
	color: var(--color-gray-600);
}

.ma-widget-case-study {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
	align-items: start;
	padding: var(--space-6);
	border: var(--border-default);
	border-color: var(--color-deep-navy);
	border-radius: var(--radius-card);
	background: var(--color-mint-tint);
	color: var(--color-deep-navy);
}

.ma-widget__eyebrow {
	color: var(--color-navy);
	font-size: var(--font-size-caption);
	font-weight: 600;
	line-height: var(--line-height-caption);
}

.ma-widget-structured-card .ma-component-card__action {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	min-block-size: var(--tap-target-min);
	inline-size: fit-content;
}

.ma-sticky-cta {
	position: fixed;
	z-index: var(--z-sticky);
	inset-block-end: 0;
	inset-inline: 0;
	display: grid;
	gap: var(--space-2);
	padding-block: var(--space-3) max(var(--space-3), env(safe-area-inset-bottom));
	padding-inline: var(--page-padding-inline);
	border-block-start: 1px solid var(--color-gray-600);
	background: var(--color-white);
	box-shadow: var(--shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(100% + 24px));
	pointer-events: none;
	transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.ma-sticky-cta.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

.ma-sticky-cta .ma-button {
	inline-size: 100%;
}

.ma-sticky-cta__status {
	margin: 0;
	color: var(--color-deep-navy);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	text-align: center;
}

.ma-has-sticky-cta { padding-block-end: calc(var(--space-16) + var(--space-12) + var(--space-4)); }
.ma-sticky-cta__actions { display: flex; gap: var(--space-2); direction: rtl; }
.ma-sticky-cta__actions .ma-button { min-block-size: 52px; inline-size: auto; }
.ma-sticky-cta__actions .ma-button:first-child { flex: 1 1 auto; min-inline-size: 0; direction: ltr; }
.ma-sticky-cta__actions .ma-button:last-child { flex: 0 0 128px; }
.ma-sticky-cta__actions .ma-button > span[aria-hidden="true"] { display: inline-flex; flex: 0 0 20px; }
.ma-sticky-cta__actions .ma-button .ma-icon { flex: 0 0 20px; }
.ma-sticky-cta__actions .ma-button:first-child { font-size: var(--font-size-body); }
.ma-sticky-cta__actions .ma-icon { inline-size: 20px; block-size: 20px; }

@media (prefers-reduced-motion: reduce) {
	.ma-sticky-cta { transition: none; }
}

.ma-component-demo {
	padding-block: var(--space-10) calc(var(--space-16) + var(--space-16));
}

.ma-component-demo__section {
	display: grid;
	gap: var(--space-4);
	padding-block: var(--space-6);
	border-block-end: var(--border-soft);
}

.ma-component-demo__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}

.ma-component-demo__state {
	display: grid;
	gap: var(--space-2);
	align-content: start;
}

.ma-component-demo__state-name {
	color: var(--color-gray-600);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
}

@media (min-width: 768px) {
	.ma-has-sticky-cta { padding-block-end: 0; }
	.ma-sticky-cta {
		display: none;
	}

	.ma-component-demo {
		padding-block-end: var(--space-16);
	}

	.ma-component-demo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ma-widget-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.ma-component-demo__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ma-widget-trust {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Header visibility overrides follow the shared button primitives. */
@media (max-width: 1024px) {
	.ma-site-header__nav,
	.ma-site-header__cta {
		display: none;
	}
}