/**
 * Health Market Advocates — child theme styles.
 *
 * Every rule here must justify why it cannot be an Elementor setting. If that
 * justification is hard to write, the rule probably belongs in Elementor instead.
 *
 * Contents
 *   1. Design tokens as CSS custom properties
 *   2. Global focus visibility
 *   3. Reduced motion
 */

/* ==========================================================================
   1. Design tokens
   --------------------------------------------------------------------------
   WHY: Elementor emits its globals as --e-global-color-* scoped to the kit
   wrapper (.elementor-kit-5). Child-theme components that render OUTSIDE an
   Elementor container — the fixed-position bot bubble in Phase 07, the carrier
   marquee in Phase 08 — cannot read those. These :root mirrors give that code
   the same values under stable, readable names.

   These are MIRRORS, not a second source of truth. The Elementor kit is
   authoritative. If a value changes there, change it here too; the pairing is
   documented in docs/audits/design-tokens.md.
   ========================================================================== */

:root {
	/* Brand */
	--hma-navy: #12355b;
	--hma-navy-deep: #0e2a49;
	--hma-ins-blue: #1d4e89;
	--hma-gold: #f4b740;
	--hma-gold-hover: #d99a1e;

	/* Surfaces */
	--hma-sky: #e8f3f8;
	--hma-cream: #faf7f0;
	--hma-white: #ffffff;
	--hma-line: #d5e3ec;

	/* Text */
	--hma-charcoal: #1f2937;

	/* Status — added in Phase 06 for form validation; the source had none.
	   All three pass WCAG AA on white, sky, and cream. */
	--hma-success: #1b7a4b;
	--hma-warning: #8a5a00;
	--hma-error: #b3261e;

	/* Layout */
	--hma-container: 1240px;
	--hma-gutter: 24px;

	/* Motion — the source settled on .15s ease almost everywhere. */
	--hma-transition: 150ms ease;
}

/* ==========================================================================
   2. Global focus visibility
   --------------------------------------------------------------------------
   WHY: the source removed focus outlines on form fields
   (`input:focus{outline:none}`) and replaced them with only a border-colour
   change, which is a weak and easily-missed affordance. It also had no global
   focus style at all — only `.nav-link:focus-visible`.

   Elementor's Theme Style covers field border colour on focus but does not
   provide a site-wide focus ring, so this cannot be expressed as a kit setting.

   :focus-visible is used so the ring appears for keyboard users without adding
   a ring on mouse click. The two-tone outline keeps the indicator visible on
   both light and dark surfaces.
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--hma-ins-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On dark sections the blue ring has too little contrast; gold reads clearly
   against navy (8.09) while staying on-brand. */
:where(.hma-on-dark) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--hma-gold);
}

/* ==========================================================================
   3. Reduced motion
   --------------------------------------------------------------------------
   WHY: the source honoured prefers-reduced-motion in both CSS and JS, and the
   Phase 04 acceptance criteria list preserving that as a requirement rather
   than a nicety. Elementor has no global setting for it, so the guard is
   restated here to cover child-theme components and Elementor animations alike.

   Scroll-behaviour is included because Elementor's anchor links animate scroll.
   ========================================================================== */

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

	html {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   4. Carrier logo marquee
   --------------------------------------------------------------------------
   WHY: Elementor has no infinite-marquee widget, and a seamless loop needs a
   duplicated track that translates by exactly -50%. This is the one HTML widget
   on the site (decision D-010); the animation belongs here rather than inline.

   The duplicate half of the track is aria-hidden with empty alt in the markup,
   so assistive technology sees each carrier once.
   ========================================================================== */

.hma-marquee {
	overflow: hidden;
	/* Fade the edges so logos enter and leave softly rather than clipping. */
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hma-marquee__track {
	display: flex;
	align-items: center;
	gap: 38px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
	animation: hma-marquee-scroll 40s linear infinite;
}

.hma-marquee__item {
	flex: 0 0 auto;
}

.hma-marquee__item img {
	display: block;
	height: 46px;
	width: auto;
	/* Carrier logos are supplied on white; keep them legible on any surface. */
	object-fit: contain;
}

@keyframes hma-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause on hover/focus so a user can read a logo, and stop entirely for
   reduced-motion — the source honoured that and Phase 04 made it acceptance. */
.hma-marquee:hover .hma-marquee__track,
.hma-marquee:focus-within .hma-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.hma-marquee__track {
		animation: none;
		/* Without motion the duplicate half is dead weight; wrap instead. */
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   5. Small content-pattern helpers
   --------------------------------------------------------------------------
   WHY: each of these is a repeated inline detail from the source that has no
   Elementor control of its own. They are class-based so they stay out of the
   page data and can be changed in one place.
   ========================================================================== */

/* Uppercase eyebrow above section titles. */
.hma-eyebrow { letter-spacing: 1px; }

/* Centred sub-heading measure — source used 660px.

   Selector specificity is deliberate and matches Elementor's own:
   `.e-con.e-con > .e-con-inner > .elementor-widget` sets max-width:100% at (0,4,0),
   so a single class never applied and every section sub-heading ran the full
   container width. The same trap caught .hma-measure-840. */
.e-con.e-con > .e-con-inner > .elementor-widget.hma-sec-sub,
.elementor.elementor .e-con > .elementor-widget.hma-sec-sub {
	max-width: 660px;
	margin-inline: auto;
}

/* Breadcrumb on the dark interior hero. */
.hma-crumb a { color: var(--hma-gold); text-decoration: none; }
.hma-crumb a:hover { text-decoration: underline; }

/* "Request a review →" affordance inside the situation cards. */
.hma-go a { color: var(--hma-ins-blue); font-weight: 800; text-decoration: none; }
.hma-go a:hover { text-decoration: underline; }

/* Small pill next to a timeline heading, e.g. "Your big one". */
.hma-tl-flag {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--hma-gold);
	color: var(--hma-navy);
	font-size: 12px;
	font-weight: 800;
	vertical-align: middle;
}

/* Text CTA beside a primary button on dark hero backgrounds. */
.hma-cta-soft .elementor-button { text-decoration: underline; text-underline-offset: 3px; }

/* Outstanding-work markers carried over from the source. Deliberately loud:
   these must not ship unnoticed. See OI-036 and docs/qa/page-comparison.md. */
.hma-compliance-hold,
.hma-production-hold,
.hma-tpmo {
	border-left: 4px solid var(--hma-warning);
	padding: 10px 14px;
	background: rgba(138, 90, 0, 0.06);
	border-radius: 4px;
}

/* Visually-hidden utility.
   WHY: the home page's <h1> is intentionally hidden (the visible headings are the
   carousel's h2s), exactly as the source did with .sr-only. The page still needs
   one h1 for heading order and assistive technology, so it must be present in the
   DOM but not painted. Elementor has no control for this. */
.hma-sr-only,
.hma-sr-only-wrap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Home page interest chips (Phase 09)

   The source's quote form asks "I'm interested in..." and branches step 2 on the
   answer. Pro Forms has no conditional field logic, so the page carries four
   interest-specific forms and the chips reveal one (D-007, D-014).

   Progressive enhancement matters here: .hma-chips-ready is added by the script,
   so with JavaScript disabled all four forms stay visible and submittable rather
   than the page offering no form at all.
   --------------------------------------------------------------------------- */
.hma-chips-block { max-width: 820px; margin-inline: auto; width: 100%; }

.hma-chips-label {
	font-weight: 700;
	color: var(--hma-navy);
	margin-bottom: 10px;
}

.hma-chips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 22px;
}

@media (max-width: 640px) {
	.hma-chips { grid-template-columns: 1fr; }
}

/* The interest picker is a native radio field styled as the source's chips: the
   radio itself is hidden and its <label> becomes the chip. Native keeps it in the
   submission, keyboard operable and announced as one single-choice group. */
.elementor-field-subgroup.hma-chips-field {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (max-width: 640px) {
	.elementor-field-subgroup.hma-chips-field { grid-template-columns: 1fr; }
}

.elementor-field-subgroup.hma-chips-field .elementor-field-option { display: block; }

.elementor-field-subgroup.hma-chips-field .elementor-field-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Specificity has to beat Elementor's own `.elementor-field-subgroup
   .elementor-field-option label { display: inline }`. An inline label with
   vertical padding overflows its line box, which made the chips overlap the
   field label above them. */
.elementor-field-subgroup.hma-chips-field .elementor-field-option label {
	display: block;
	border: 2px solid var(--hma-line);
	border-radius: 10px;
	background-color: var(--hma-white);
	padding: 14px 12px;
	font-weight: 700;
	color: var(--hma-navy);
	cursor: pointer;
	text-align: center;
	transition: border-color var(--hma-transition), background-color var(--hma-transition);
}

.elementor-field-subgroup.hma-chips-field .elementor-field-option label:hover { border-color: var(--hma-ins-blue); }

.elementor-field-subgroup.hma-chips-field .elementor-field-option input[type="radio"]:checked + label {
	border-color: var(--hma-ins-blue);
	background-color: var(--hma-sky);
}

/* The radio is visually hidden, so its focus ring has to land on the chip. */
.elementor-field-subgroup.hma-chips-field .elementor-field-option input[type="radio"]:focus-visible + label {
	outline: 3px solid var(--hma-ins-blue);
	outline-offset: 2px;
}

.hma-chips button.hma-chip {
	border: 2px solid var(--hma-line);
	border-radius: 10px;
	background-color: var(--hma-white);
	background-image: none;
	padding: 14px 12px;
	font: inherit;
	font-weight: 700;
	color: var(--hma-navy);
	cursor: pointer;
	text-align: center;
	transition: border-color var(--hma-transition), background var(--hma-transition);
}

.hma-chips button.hma-chip:hover { border-color: var(--hma-ins-blue); background-color: var(--hma-white); }

/* The source used a .selected class; aria-pressed carries the same state and is
   also exposed to assistive technology, so it drives the styling directly. */
.hma-chips button.hma-chip[aria-pressed="true"] {
	border-color: var(--hma-ins-blue);
	background-color: var(--hma-sky);
}

.hma-chips-ready .hma-quote-path { display: none; }
.hma-chips-ready .hma-quote-path.is-active { display: block; }

/* ---------------------------------------------------------------------------
   Measure constraints (Phase 10)

   Elementor containers expose `width` and `boxed_width`, not `max-width`. The
   Phase 08 build set `max_width` on containers, which Elementor stores and never
   reads, so every one of these constraints was inert and the copy ran the full
   width of the section. Each rule below reproduces one source rule exactly.
   --------------------------------------------------------------------------- */
.hma-form-shell {                 /* source .form-shell */
	max-width: 620px;
	margin-inline: auto;
}

.hma-faq-list {                   /* source .faq-list */
	max-width: 780px;
	margin-inline: auto;
}

.hma-testi-stage {                /* source .testi-stage */
	max-width: 760px;
	margin-inline: auto;
}

.hma-magnet-card {                /* source .book-visual */
	max-width: 400px;
}

/* ---------------------------------------------------------------------------
   Interior page hero (Phase 10)

   The source scrim is TWO stacked gradients — one horizontal, one vertical —
   over the photograph. Elementor's background overlay applies a single gradient
   at 50% opacity by default, which left the hero copy sitting on a bright image.
   Reproduced here verbatim; the container carries no Elementor overlay, so
   ::before is ours to use.
   --------------------------------------------------------------------------- */
.hma-page-hero {
	position: relative;
	overflow: hidden;
}

.hma-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(14, 42, 73, 0.75) 0%, rgba(14, 42, 73, 0.45) 30%, rgba(14, 42, 73, 0) 55%),
		linear-gradient(0deg, rgba(14, 42, 73, 0.85) 0%, rgba(14, 42, 73, 0.4) 38%, rgba(14, 42, 73, 0) 68%);
}

/* source .hero-in — the 6% left inset is what holds the copy off the edge */
.hma-page-hero .hma-hero-copy {
	position: relative;
	z-index: 5;
	max-width: 620px;
	padding: 48px 24px 52px 6%;
}

/* Text shadows carry the copy over the lighter parts of the photograph. */
.hma-page-hero h1 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.hma-page-hero .elementor-widget-text-editor p { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
.hma-page-hero .hma-crumb { opacity: 0.9; }

/* ---------------------------------------------------------------------------
   Header phone CTA and nav row (Phase 10)

   The CTA markup was authored in Phase 07 against class hooks no stylesheet
   defined, so "Call or text our team" and the number rendered as one run-on
   line. This mirrors the source's .head-phone / .ph-icn / .ph-txt exactly.
   --------------------------------------------------------------------------- */
.hma-head-phone { margin: 0; }

.hma-head-phone a {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
	text-decoration: none;
}

.hma-head-phone__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--hma-navy);
	color: var(--hma-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
}

.hma-head-phone__txt {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	text-align: left;
}

.hma-head-phone__txt small {
	font-size: 11.5px;
	color: var(--hma-charcoal);
	opacity: 0.75;
}

.hma-head-phone__txt strong {
	font-size: 17px;
	font-weight: 800;
	color: var(--hma-navy);
}

/* The masthead is a single row in the source: logo and phone hold their size,
   the menu takes what is left. Without this the menu wrapped onto a second line
   and the header grew to 107px against the source's 67px.

   Scoped ABOVE the nav's collapse breakpoint only. Applied at every width it
   stopped the row wrapping on phones too, which pushed the burger and the phone
   icon past the viewport edge and put a horizontal scrollbar on all six pages. */
@media (min-width: 1081px) {
	#masthead .e-con-inner {
		flex-wrap: nowrap;
	}

	#masthead .elementor-widget-theme-site-logo,
	#masthead .elementor-widget-text-editor {
		flex: 0 0 auto;
	}

	#masthead .elementor-widget-nav-menu {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Below the nav's collapse breakpoint the source hides the phone text and keeps
   only the icon, so the burger and the CTA both fit. */
@media (max-width: 1080px) {
	.hma-head-phone__txt { display: none; }
}

/* Source .moc — the "Mission Over Commission" badge beside the founder. */
.hma-badge p,
p.hma-badge {
	display: inline-block;
	background: var(--hma-gold);
	color: var(--hma-navy);
	border-radius: 99px;
	padding: 4px 12px;
	font-weight: 800;
}

/* Source .members — the advocate roster thumbnails. */
.hma-members img {
	border-radius: 10px;
}

/* Source .logo img — height-driven, width auto. Sizing the Elementor widget
   instead left the <img> at its natural 760px, which squeezed the nav into six
   rows and grew the header from 67px to 230px. */
#masthead .elementor-widget-theme-site-logo img {
	height: 54px;
	width: auto;
	max-width: none;
}

@media (max-width: 640px) {
	#masthead .elementor-widget-theme-site-logo img { height: 44px; }
}

/* The source's top-level nav carries no dropdown indicator — hovering or
   focusing an item reveals its submenu. Elementor's caret costs about 25px per
   item, which pushed the five items to 782px against a 1232px row shared with a
   283px logo and a 176px phone CTA; the menu wrapped onto three lines and the
   header grew from 79px to 107px.

   Only the icon is hidden. The submenu itself, its hover/focus behaviour and
   Elementor's aria-haspopup/aria-expanded are untouched, so nothing is lost to
   assistive technology. Delete this rule to bring the caret back. */
#masthead .elementor-nav-menu--main .sub-arrow {
	display: none;
}

/* ---------------------------------------------------------------------------
   Home hero carousel (Phase 10)

   The source gives each slide a scrim running from the edge its copy sits on —
   bottom, right, left, bottom. Elementor's per-slide overlay control takes a
   flat colour, not a gradient, so the gradients are applied here. They are keyed
   to the repeater ids the generator assigns (hmaslide1..4). nth-child cannot be
   used: with infinite scrolling Swiper clones slides and prepends them.
   --------------------------------------------------------------------------- */
.hma-home-hero .elementor-repeater-item-hmaslide1 .elementor-background-overlay,
.hma-home-hero .elementor-repeater-item-hmaslide4 .elementor-background-overlay {
	background: linear-gradient(0deg, rgba(14, 42, 73, 0.9) 0%, rgba(14, 42, 73, 0.55) 38%, rgba(14, 42, 73, 0) 66%);
}

.hma-home-hero .elementor-repeater-item-hmaslide2 .elementor-background-overlay {
	background: linear-gradient(270deg, rgba(14, 42, 73, 0.82) 0%, rgba(14, 42, 73, 0.55) 34%, rgba(14, 42, 73, 0) 62%);
}

.hma-home-hero .elementor-repeater-item-hmaslide3 .elementor-background-overlay {
	background: linear-gradient(90deg, rgba(14, 42, 73, 0.82) 0%, rgba(14, 42, 73, 0.55) 34%, rgba(14, 42, 73, 0) 62%);
}

/* Source .offer — 520px measure, 660px for the bottom-positioned slides, inset
   6% from the edge. Elementor has no content-width control on this widget. */
.hma-home-hero .swiper-slide-contents {
	max-width: 520px;
	padding-inline: 6%;
}

.hma-home-hero .elementor-repeater-item-hmaslide1 .swiper-slide-contents,
.hma-home-hero .elementor-repeater-item-hmaslide4 .swiper-slide-contents {
	max-width: 660px;
}

/* Source .offer h2 / p carry text shadows so the copy survives a light photo. */
.hma-home-hero .elementor-slide-heading { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.hma-home-hero .elementor-slide-description { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }

/* Source .car-arrow — 46px white disc, navy glyph, gold on hover. */
.hma-home-hero .elementor-swiper-button {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--hma-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.hma-home-hero .elementor-swiper-button:hover {
	background: var(--hma-gold);
}

/* ---------------------------------------------------------------------------
   Testimonials (Phase 10) — source .testi-head, .score, .stars and .quote.
   --------------------------------------------------------------------------- */
.hma-score {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.hma-score__value { color: var(--hma-ins-blue); font-weight: 800; }
.hma-score__stars { color: var(--hma-gold); letter-spacing: 2px; }

/* Source .quote — a white card on the cream section, text left-aligned. */
.hma-testi-stage .elementor-testimonial {
	background: var(--hma-white);
	border-radius: 14px;
	padding: 26px 26px 22px;
	box-shadow: 0 6px 20px rgba(18, 53, 91, 0.1);
	text-align: left;
}

.hma-testi-stage .elementor-testimonial__text { font-style: normal; }

/* Source .bio-card img — square-cropped 130px portrait with a soft shadow. */
.hma-bio-photo img {
	width: 130px;
	height: 130px;
	border-radius: 14px;
	object-fit: cover;
	box-shadow: 0 6px 16px rgba(18, 53, 91, 0.15);
}

/* Source .ph-tag — the amber "PLACEHOLDER BIO" marker on each advocate. */
.hma-ph-tag p,
p.hma-ph-tag {
	display: inline-block;
	background: rgba(138, 90, 0, 0.1);
	color: var(--hma-warning);
	border-radius: 4px;
	padding: 3px 8px;
	font-weight: 800;
}

/* ---------------------------------------------------------------------------
   Hero carousel controls (Phase 11) — source .car-ctrl, .dot and .pause-btn.

   Autoplay is on again (8s, as the source) now that there is a way to stop it:
   assets/js/carousel-pause.js inserts the Pause/Play control beside the dots and
   starts paused under prefers-reduced-motion. See D-019, which supersedes the
   Phase 08 position recorded in OI-039.
   --------------------------------------------------------------------------- */
.hma-home-hero .hma-car-ctrl {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 10;
}

/* The pagination is moved into the control bar, so it no longer positions itself. */
.hma-home-hero .hma-car-ctrl .swiper-pagination {
	position: static;
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	transform: none;
}

.hma-home-hero .hma-car-ctrl .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	margin: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	background: transparent;
	opacity: 1;
}

.hma-home-hero .hma-car-ctrl .swiper-pagination-bullet-active {
	background: var(--hma-gold);
	border-color: var(--hma-gold);
}

.hma-home-hero button.hma-carousel-pause {
	background-color: rgba(255, 255, 255, 0.92);
	background-image: none;
	border: none;
	border-radius: 99px;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	color: var(--hma-navy);
	padding: 6px 13px;
	cursor: pointer;
	margin-left: 6px;
}

/* Source .slide img — object-position: center 30%. The slide background was
   sitting at centre, showing a lower crop than the source does. */
.hma-home-hero .swiper-slide-bg {
	background-position: center 30%;
}

/* Source .cta-alt — a sentence with an inline link, not a second button. */
.hma-cta-alt { margin-top: 14px; }
.hma-cta-alt a { font-weight: 700; text-underline-offset: 3px; }

/* Source .secure — reassurance line inside the form card. */
.hma-secure { margin-top: 14px; opacity: 0.8; }

/* Source .intro p — 840px measure, centred. Without it the strip ran the full
   1240px container and read as a much longer line than the source's. */
.e-con.e-con > .e-con-inner > .elementor-widget.hma-measure-840,
.elementor.elementor .e-con > .elementor-widget.hma-measure-840 {
	max-width: 840px;
	margin-inline: auto;
}

/* Conditional step-2 groups. !important is required, not lazy: Elementor writes
   an inline display onto every field group as it enters a step, which would
   otherwise re-reveal the groups belonging to interests the visitor did not pick. */
.hma-cond-hidden { display: none !important; }

/* Source .progress — three segments. Elementor's own indicator can only count the
   two INPUT steps, so it can never show the third (the confirmation); this is the
   source's markup instead, lit by quote-interest.js. */
.hma-progress {
	display: flex;
	gap: 8px;
	margin-bottom: 26px;
}

.hma-progress span {
	flex: 1;
	height: 6px;
	border-radius: 99px;
	background: var(--hma-line);
	transition: background 0.3s ease;
}

.hma-progress span.on { background: var(--hma-gold); }

/* Source #step2 heading and lead paragraph, inside the form. */
.hma-step-title {
	font-size: 24px;
	font-weight: 800;
	color: var(--hma-navy);
	margin-bottom: 6px;
}

.hma-step-sub {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 18px;
}

/* Source .skip — a quiet text control under the submit button. */
button.hma-skip {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--hma-ins-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: none;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   FAQ (Phase 11) — source `details` / `summary`.

   Elementor's Nested Accordion supplies the right semantics but its own spacing
   and a chevron on the left. The source uses a roomier row with a +/– on the
   RIGHT, which is what these rules restore.
   --------------------------------------------------------------------------- */
.hma-faq-list .e-n-accordion-item {
	border: 1.5px solid var(--hma-line);
	border-radius: 11px;
	margin-bottom: 12px;
	overflow: hidden;
}

.hma-faq-list .e-n-accordion-item[open] { border-color: var(--hma-ins-blue); }

.hma-faq-list .e-n-accordion-item-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 17px 20px;
	cursor: pointer;
	list-style: none;
}

.hma-faq-list .e-n-accordion-item-title::-webkit-details-marker { display: none; }

.hma-faq-list .e-n-accordion-item-title-text {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--hma-navy);
	margin: 0;
}

/* Elementor's chevron is replaced by the source's plus/minus, set on the title so
   it sits at the end of the flex row rather than wherever the icon span lands. */
.hma-faq-list .e-n-accordion-item-title-icon { display: none !important; }

.hma-faq-list .e-n-accordion-item-title::after {
	content: "+";
	font-size: 22px;
	line-height: 1;
	color: var(--hma-ins-blue);
	font-weight: 800;
	flex-shrink: 0;
	margin-left: auto;
}

.hma-faq-list .e-n-accordion-item[open] > .e-n-accordion-item-title::after { content: "\2013"; }

/* Source .faq-a */
.hma-faq-list .e-n-accordion-item > .e-con,
.hma-faq-list .e-n-accordion-item > .elementor-element {
	padding: 0 20px 18px;
}

.hma-faq-list .e-n-accordion-item p {
	font-size: 15.5px;
	line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   Testimonial dots — source .testi-dots .dot: 12px outline circles in insurance
   blue, filled when active. Elementor's default bullets are small grey discs.
   --------------------------------------------------------------------------- */
.hma-testi-stage .swiper-pagination {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 20px;
	position: static;
}

.hma-testi-stage .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	margin: 0;
	border-radius: 50%;
	border: 2px solid var(--hma-ins-blue);
	background: transparent;
	opacity: 1;
}

.hma-testi-stage .swiper-pagination-bullet-active {
	background: var(--hma-ins-blue);
	border-color: var(--hma-ins-blue);
}

/* Source .guide-cover — the 170px cover to the LEFT of the magnet copy. */
.hma-guide-cover img {
	width: 170px;
	border-radius: 8px;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}

/* Source .magnet-grid is `170px 1fr 400px`. Elementor containers default to
   --width:100%, so the middle column has to be told to behave like 1fr or the
   fixed 400px card wraps onto its own row. */
.e-con.hma-magnet-copy {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

@media (max-width: 900px) {
	.e-con.hma-magnet-copy { flex-basis: 100%; width: 100%; }
}

/* ---------------------------------------------------------------------------
   FAQ, card and form refinements (Phase 11, second pass)
   --------------------------------------------------------------------------- */

/* No rule under the question — Elementor draws one between the accordion title
   and its panel. The source separates items by a gap instead. */
.hma-faq-list .e-n-accordion-item-title,
.hma-faq-list .e-n-accordion-item > .e-con,
.hma-faq-list .e-n-accordion-item > .elementor-element {
	border: 0;
	box-shadow: none;
}

/* Elementor's accordion is a flex column with its own gap; the source spaces the
   items with a bottom margin, and the gap would double it. */
.hma-faq-list .e-n-accordion {
	display: block;
	gap: 0;
}

.hma-faq-list .e-n-accordion-item { margin-bottom: 12px; }
.hma-faq-list .e-n-accordion-item:last-child { margin-bottom: 0; }

/* Pathway card CTAs sit on one line because each is pushed to the foot of its
   card. The cards were already equal height; only the buttons floated. */
.hma-card-cta { margin-top: auto; }

/* Source .section-cta { margin-top: 48px }. Supplied by the container's own
   28px top padding plus the section's 20px flex gap — a margin here as well
   would double it. */

/* The skip control belongs BELOW the submit button. Elementor renders fields in
   source order with the submit last, so the field group is re-ordered rather
   than moved — the fields wrapper is a flex container. */
.elementor-field-group-skip {
	order: 99;
	justify-content: center;
}

.elementor-field-group-skip button.hma-skip { margin-top: 14px; }

/* Specificity notes for the three rules below: Elementor's own selectors are
   (0,3,0) — `.elementor-widget-n-accordion .e-n-accordion-item:not(:last-child)`
   and friends — so a two-class rule silently loses. */

/* Gap between FAQ questions. */
.hma-faq-list .e-n-accordion .e-n-accordion-item:not(:last-child) {
	margin-bottom: 12px;
}

/* Source .card-btn: 15.5px/700 with 12px/14px padding. The global button style
   (17px/800) made the longest label wrap to two lines, so that card's button sat
   a line higher than the other three. */
.hma-card-cta .elementor-button {
	font-size: 15.5px;
	font-weight: 700;
	padding: 12px 14px;
	width: 100%;
}

/* No Back control: the source has none, and step 1 is four fields. Elementor
   renders a "Previous" button regardless of an empty label. */
.hma-form-shell .e-form__buttons__wrapper__button-previous {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Our Team, review spacing, and the confirmation screen (Phase 11, third pass)
   --------------------------------------------------------------------------- */

/* Source .team-head { margin-bottom: 40px } and .team-grid { 340px 1fr; gap:48px }.
   Elementor's own 20px container gap is zeroed so these are the only spacing. */
#about > .e-con-inner { gap: 0; }
.hma-team-head { margin-bottom: 40px; }
.e-con.hma-team-copy { flex: 1 1 0; width: auto; min-width: 0; }

/* Source .members — four equal columns, 18px gutter, 26px above. */
.e-con.hma-members {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 26px;
	width: 100%;
}

@media (max-width: 767px) {
	.e-con.hma-members { grid-template-columns: repeat(2, 1fr); }
}

.hma-member { text-align: center; }

/* Source .member img — square crop, not the portrait Elementor renders. */
.hma-member img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(18, 53, 91, 0.14);
	margin-bottom: 10px;
}

/* Review header spacing: source .testi-head { margin-bottom: 8px } and
   .testi-sub { margin-bottom: 34px }. Elementor's stacked container gaps made
   this 74px. */
#reviews > .e-con-inner { gap: 0; }
#reviews .hma-score { margin-bottom: 8px; }
#reviews .hma-testi-stage { margin-top: 34px; }

/* ---------------------------------------------------------------------------
   Confirmation screen — source #step3 / .confirm / .check / .book
   --------------------------------------------------------------------------- */
.hma-confirm {
	text-align: center;
	padding: 14px 0 6px;
}

.hma-confirm[hidden] { display: none; }

.hma-check {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--hma-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	font-size: 30px;
	color: var(--hma-navy);
	font-weight: 800;
}

.hma-confirm h2 {
	font-size: 24px;
	font-weight: 800;
	color: var(--hma-navy);
	margin-bottom: 10px;
}

.hma-confirm-msg { margin-bottom: 18px; }

.hma-book {
	display: inline-block;
	border: 2.5px solid var(--hma-ins-blue);
	border-radius: 9px;
	color: var(--hma-ins-blue);
	font-weight: 800;
	font-size: 15.5px;
	padding: 12px 26px;
	text-decoration: none;
	transition: background var(--hma-transition), color var(--hma-transition);
}

.hma-book:hover {
	background: var(--hma-ins-blue);
	color: var(--hma-white);
}

/* Our confirmation replaces Elementor's plain-text success line. */
.hma-form-shell.is-confirmed .elementor-message-success { display: none; }
.hma-form-shell.is-confirmed form.elementor-form { display: none; }

/* Source .founder-card — a white card with the portrait bled to its edges and a
   gold rule under it, the name plate padded inside. */
.hma-founder-card {
	background: var(--hma-white);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(18, 53, 91, 0.14);
	padding: 0;
}

.hma-founder-card .elementor-widget-image { width: 100%; }

.hma-founder-card .elementor-widget-image img {
	width: 100%;
	max-width: none;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-bottom: 5px solid var(--hma-gold);
	display: block;
}

/* Source .fc-body { padding: 20px 22px 24px } */
.hma-founder-card .elementor-widget-heading { padding: 20px 22px 0; }
.hma-founder-card .elementor-widget-text-editor { padding: 0 22px 24px; }