/* [aob_hero] — mobile-first; desktop layout from 1024px (Figma frame is 1440px). */
:not(#_) .aob-hero,
:not(#_) .aob-hero *,
:not(#_) .aob-hero *::before,
:not(#_) .aob-hero *::after { box-sizing: border-box; }

:not(#_) .aob-hero {
	position: relative;
	overflow: hidden;
	background: var(--aob-black-3);
	color: var(--aob-light-1);
	font-family: var(--aob-font-body);
	font-size: 16px;
	line-height: 1.4;
}
:not(#_) .aob-hero img { display: block; max-width: none; }
:not(#_) .aob-hero h1,
:not(#_) .aob-hero h2,
:not(#_) .aob-hero p,
:not(#_) .aob-hero ul,
:not(#_) .aob-hero figure { margin: 0; padding: 0; }

/* ---------- Top (image) area ---------- */
:not(#_) .aob-hero__top {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 760px;
	padding-bottom: 140px;
}
:not(#_) .aob-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	flex-direction: column;
}
:not(#_) .aob-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
/* Figma: 1553x931 frame offset (-46,-49) over the 1440x882 area; photo scaled to 118% x 147.5%. */
:not(#_) .aob-hero__bg-frame {
	position: absolute;
	left: -3.2%;
	top: -5.6%;
	width: 107.9%;
	height: 105.6%;
}
:not(#_) .aob-hero__bg-img {
	position: absolute;
	left: 3.2%;
	top: -30.8%;
	width: 117.8%;
	height: 147.5%;
	max-width: none;
	object-fit: cover;
}
:not(#_) .aob-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(17, 16, 14, 0) 79%, var(--aob-black-3) 100%),
		linear-gradient(90deg, var(--aob-black-3) 0%, rgba(17, 16, 14, 0.71) 29%, rgba(17, 16, 14, 0) 76%);
}

/* headline block */
:not(#_) .aob-hero__content {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	gap: 32px;
}
:not(#_) .aob-hero__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
/* the rating banner itself is the shared component (modules/rating); the wrapper only orders it first */
:not(#_) .aob-hero__rating { order: -1; }
:not(#_) .aob-hero__title {
	font-family: var(--aob-font-display);
	font-size: clamp(76px, 10.2vw, 147px);
	font-weight: 400;
	line-height: 0.932;
	letter-spacing: -0.01em;
	color: var(--aob-light-1);
}
:not(#_) .aob-hero__title-accent { color: var(--aob-brand); }
:not(#_) .aob-hero__subtitle {
	max-width: 503px;
	color: var(--aob-light-2);
	font-size: 20px;
	line-height: 26px;
}

:not(#_) .aob-hero__features {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
}
:not(#_) .aob-hero__feature {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--aob-glass-border);
	border-radius: var(--aob-radius);
	background: var(--aob-glass-bg);
	box-shadow: var(--aob-shadow-glass);
	-webkit-backdrop-filter: blur(5.85px);
	backdrop-filter: blur(5.85px);
}
:not(#_) .aob-hero__feature-icon {
	position: relative;
	display: block;
	flex: none;
	width: 41.4px;
	height: 41.4px;
	border: 1px solid var(--aob-brand);
	border-radius: 35px;
}
:not(#_) .aob-hero__feature-icon img { position: absolute; display: block; }
:not(#_) .aob-hero__feature-icon--1 img,
:not(#_) .aob-hero__feature-icon--3 img { left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
:not(#_) .aob-hero__feature-icon--2 { border: 0; }
:not(#_) .aob-hero__feature-icon--2 img { inset: 0; width: 100%; height: 100%; }
:not(#_) .aob-hero__feature-text { width: 106px; font-size: 16px; line-height: 22.4px; color: var(--aob-light-1); }
:not(#_) .aob-hero__feature:nth-child(2) .aob-hero__feature-text { width: 145px; }
:not(#_) .aob-hero__feature:nth-child(3) .aob-hero__feature-text { width: 84px; }

/* scroll hint + curve */
:not(#_) .aob-hero__scroll { display: none; }
:not(#_) .aob-hero__curve {
	position: absolute;
	left: 0;
	bottom: 24px;
	width: 100%;
	height: 62px;
	z-index: 1;
}

/* ---------- Quote area ---------- */
:not(#_) .aob-hero__quote {
	position: relative;
	border-bottom: 1px solid var(--aob-gold-soft);
}
:not(#_) .aob-hero__quote-inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
:not(#_) .aob-hero__contact { display: flex; flex-direction: column; gap: 32px; min-width: 0; flex: 1; max-width: 820px; }
:not(#_) .aob-hero__form-title {
	font-size: 32px;
	font-weight: 600;
	line-height: 38.4px;
	text-transform: uppercase;
	color: var(--aob-white);
}

/* advisor */
:not(#_) .aob-hero__advisor {
	position: relative;
	flex: none;
	align-self: center;
	width: 295px;
	height: 325px;
}
:not(#_) .aob-hero__advisor::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid var(--aob-gold-soft);
	border-radius: 147.5px;
	pointer-events: none;
}
:not(#_) .aob-hero__advisor-photo {
	position: absolute;
	left: 6px;
	top: 7px;
	width: 283px;
	height: 311px;
	border-radius: 147.5px;
	object-fit: cover;
}
:not(#_) .aob-hero__advisor-chip {
	position: absolute;
	left: 19px;
	bottom: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 258px;
	padding: 8px 32px;
	border: 1px solid var(--aob-light-3);
	border-radius: 59px;
	background: linear-gradient(180deg, var(--aob-light-1), var(--aob-light-2));
}
:not(#_) .aob-hero__advisor-name { font-size: 18px; font-weight: 500; line-height: 23.4px; color: var(--aob-black-3); white-space: nowrap; }
:not(#_) .aob-hero__advisor-role {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--aob-brand);
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
:not(#_) .aob-hero__advisor-role img { width: 27px; height: 1px; }

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
	:not(#_) .aob-hero__top { min-height: 882px; padding-bottom: 233px; }
	:not(#_) .aob-hero__content {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	:not(#_) .aob-hero__intro { width: 503px; flex: none; }
	:not(#_) .aob-hero__features { flex-wrap: nowrap; gap: 20px; }
	:not(#_) .aob-hero__scroll {
		position: absolute;
		left: 50%;
		bottom: 74px;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 13px;
		transform: translateX(-50%);
		color: var(--aob-light-1);
		font-size: 14px;
		font-weight: 500;
		line-height: 21px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		padding: 0 14px;
		border: 0;
		background: none;
		font-family: inherit;
		cursor: pointer;
	}
	:not(#_) .aob-hero__scroll-label { transition: color 0.25s; }
	:not(#_) .aob-hero__mouse { transition: border-color 0.25s, box-shadow 0.25s; }
	/* Cue animation: the wheel dot travels down and fades, two chevrons cascade underneath. */
	:not(#_) .aob-hero__mouse-dot:not([class*="--"]) { animation: aob-scroll-wheel 1.8s var(--aob-btn-ease) infinite; }
	:not(#_) .aob-hero__mouse-dot--top, :not(#_) .aob-hero__mouse-dot--bottom { opacity: 0.45; }
	:not(#_) .aob-hero__chevrons {
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		display: block;
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--aob-brand);
		border-bottom: 2px solid var(--aob-brand);
		transform: rotate(45deg);
		animation: aob-scroll-chevron 1.8s ease-in-out infinite;
	}
	:not(#_) .aob-hero__scroll:hover .aob-hero__scroll-label { color: var(--aob-brand); }
	:not(#_) .aob-hero__scroll:hover .aob-hero__mouse { border-color: var(--aob-brand); box-shadow: 0 0 14px rgba(242, 106, 10, 0.55); }
	:not(#_) .aob-hero__scroll:focus-visible { outline: 2px solid var(--aob-white); outline-offset: 2px; border-radius: 12px; }
	@keyframes aob-scroll-wheel {
		0% { transform: translateY(-4px); opacity: 0; }
		30% { opacity: 1; }
		75% { transform: translateY(8px); opacity: 0; }
		100% { transform: translateY(8px); opacity: 0; }
	}
	@keyframes aob-scroll-chevron {
		0%, 20% { transform: translateY(-4px) rotate(45deg); opacity: 0; }
		60% { opacity: 1; }
		100% { transform: translateY(5px) rotate(45deg); opacity: 0; }
	}
	@media (prefers-reduced-motion: reduce) {
		:not(#_) .aob-hero__mouse-dot, :not(#_) .aob-hero__chevrons { animation: none; }
	}
	:not(#_) .aob-hero__mouse {
		position: relative;
		display: block;
		width: 20px;
		height: 32px;
		border: 1px solid var(--aob-white);
		border-radius: 48px;
	}
	:not(#_) .aob-hero__mouse-dot { position: absolute; left: 6px; top: 12px; width: 6px; height: 6px; }
	:not(#_) .aob-hero__mouse-dot--top { left: 7px; top: 5px; width: 4px; height: 4px; }
	:not(#_) .aob-hero__mouse-dot--bottom { left: 7px; top: 21px; width: 4px; height: 4px; }
	:not(#_) .aob-hero__curve { bottom: 39px; }
	:not(#_) .aob-hero .aob-form__fields { grid-template-columns: repeat(3, 1fr); }
	:not(#_) .aob-hero .aob-field--wide { grid-column: 1 / -1; }
	:not(#_) .aob-hero__quote-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	:not(#_) .aob-hero .aob-form__submit-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}

/* ---------- Above the fold: hero + form must fit one viewport ----------
   Section = 100svh. The image area takes what the form leaves; type, paddings and the advisor
   scale down on short screens. Very small viewports may exceed 100svh instead of clipping the form. */
:not(#_) .aob-hero {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}
:not(#_) .aob-hero__top { flex: 1 0 auto; min-height: 0; }
:not(#_) .aob-hero__quote { flex: none; padding-block: clamp(16px, 3vh, 36px); }

/* mobile / tablet portrait: stripped-down hero so the whole form is visible */
@media (max-width: 1023px) {
	:not(#_) .aob-hero__top { padding-top: 84px; padding-bottom: 56px; }
	:not(#_) .aob-hero__intro { gap: 12px; }
	:not(#_) .aob-hero__title { font-size: clamp(48px, min(15vw, 8vh), 76px); }
	:not(#_) .aob-hero__subtitle { font-size: 16px; line-height: 22px; }
	:not(#_) .aob-hero__features,
	:not(#_) .aob-hero__advisor { display: none; }
	:not(#_) .aob-hero__curve { height: 40px; bottom: 16px; }
	:not(#_) .aob-hero .aob-rating__source { font-size: 12px; line-height: 16px; }
	:not(#_) .aob-hero .aob-rating__value { font-size: 20px; line-height: 24px; }
	:not(#_) .aob-hero__quote-inner { gap: 0; }
	:not(#_) .aob-hero__contact { gap: 12px; max-width: none; }
	:not(#_) .aob-hero__form-title { font-size: 22px; line-height: 28px; }
	:not(#_) .aob-hero .aob-form { gap: 12px; }
	:not(#_) .aob-hero .aob-form__fields { gap: 8px; }
	:not(#_) .aob-hero .aob-field { gap: 0; }
	/* labels stay in the DOM for screen readers; placeholders carry the visual label */
	:not(#_) .aob-hero .aob-field__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	:not(#_) .aob-hero .aob-field__control { padding: 11px 12px; }
	:not(#_) .aob-hero .aob-form__submit-row { gap: 12px; }
	:not(#_) .aob-hero .aob-form__consent { font-size: 13px; line-height: 17px; }
	:not(#_) .aob-hero .aob-form__submit-row .aob-btn { width: 100%; justify-content: space-between; height: 52px; }
	:not(#_) .aob-hero .aob-form__submit-row .aob-btn__icon { width: 42px; height: 42px; }
}

@media (min-width: 1024px) {
	:not(#_) .aob-hero { --aob-adv: 1; }
	:not(#_) .aob-hero__top { padding-bottom: 156px; }
	:not(#_) .aob-hero__title { font-size: clamp(56px, min(10.2vw, 12vh), 147px); }
	:not(#_) .aob-hero__intro { gap: 12px; }
	:not(#_) .aob-hero__contact { gap: 20px; }
	:not(#_) .aob-hero .aob-form { gap: 14px; }
	:not(#_) .aob-hero .aob-form__fields { gap: 12px 16px; }
	:not(#_) .aob-hero .aob-field { gap: 8px; }
	:not(#_) .aob-hero .aob-form__submit-row { gap: 24px; }

	/* advisor scales with the available height */
	:not(#_) .aob-hero__advisor { width: calc(295px * var(--aob-adv)); height: calc(325px * var(--aob-adv)); }
	:not(#_) .aob-hero__advisor::before { border-radius: calc(147.5px * var(--aob-adv)); }
	:not(#_) .aob-hero__advisor-photo { left: calc(6px * var(--aob-adv)); top: calc(7px * var(--aob-adv)); width: calc(283px * var(--aob-adv)); height: calc(311px * var(--aob-adv)); border-radius: calc(147.5px * var(--aob-adv)); }
	:not(#_) .aob-hero__advisor-chip { left: calc(19px * var(--aob-adv)); bottom: calc(30px * var(--aob-adv)); width: calc(258px * var(--aob-adv)); padding-inline: calc(32px * var(--aob-adv)); }
}
@media (min-width: 1024px) and (max-height: 1000px) { :not(#_) .aob-hero { --aob-adv: 0.84; } }
@media (min-width: 1024px) and (max-height: 820px) {
	:not(#_) .aob-hero { --aob-adv: 0.7; }
	:not(#_) .aob-hero__top { padding-bottom: 124px; }
	:not(#_) .aob-hero__title { font-size: clamp(48px, min(10.2vw, 9.5vh), 147px); }
	:not(#_) .aob-hero__subtitle { display: none; }
	:not(#_) .aob-hero__form-title { font-size: 26px; line-height: 32px; }
}

/* short phones: drop the secondary copy so the form still fits */
@media (max-width: 1023px) and (max-height: 760px) {
	:not(#_) .aob-hero__top { padding-top: 76px; padding-bottom: 40px; }
	:not(#_) .aob-hero__subtitle,
	:not(#_) .aob-hero .aob-hero__curve { display: none; }
	:not(#_) .aob-hero__title { font-size: clamp(44px, min(14vw, 7.5vh), 64px); }
	:not(#_) .aob-hero__quote { padding-block: 12px; }
	:not(#_) .aob-hero__form-title { font-size: 19px; line-height: 24px; }
	:not(#_) .aob-hero .aob-field__control { padding-block: 9px; }
	:not(#_) .aob-hero .aob-form__submit-row .aob-btn { height: 46px; }
	:not(#_) .aob-hero .aob-form__submit-row .aob-btn__icon { width: 38px; height: 38px; }
}

/* ---------- Proportions: roomy image area, compact form ---------- */
@media (min-width: 1024px) {
	:not(#_) .aob-hero { --aob-adv: 0.8; }
	:not(#_) .aob-hero__quote { padding-block: clamp(12px, 2.2vh, 24px); }
	:not(#_) .aob-hero__title { font-size: clamp(56px, min(10.2vw, 13.5vh), 147px); }
	:not(#_) .aob-hero__intro { gap: 20px; }

	:not(#_) .aob-hero__contact { gap: 14px; }
	:not(#_) .aob-hero__form-title { font-size: 26px; line-height: 32px; }
	:not(#_) .aob-hero .aob-form { gap: 12px; }
	:not(#_) .aob-hero .aob-form__fields { gap: 10px 16px; }
	:not(#_) .aob-hero .aob-field { gap: 6px; }
	:not(#_) .aob-hero .aob-field__label { font-size: 14px; line-height: 20px; }
	:not(#_) .aob-hero .aob-field__control { padding: 9px 12px; font-size: 15px; line-height: 22px; }
	:not(#_) .aob-hero .aob-form__consent { font-size: 13px; line-height: 18px; }
	:not(#_) .aob-hero .aob-form__submit-row { gap: 16px; }
	:not(#_) .aob-hero .aob-form__submit-row .aob-btn { height: 50px; gap: 12px; padding: 4px 4px 4px 20px; font-size: 16px; }
	:not(#_) .aob-hero .aob-form__submit-row .aob-btn__icon { width: 40px; height: 40px; }
}
@media (min-width: 1024px) and (max-height: 1000px) { :not(#_) .aob-hero { --aob-adv: 0.72; } }
@media (min-width: 1024px) and (max-height: 820px) {
	:not(#_) .aob-hero { --aob-adv: 0.62; }
	:not(#_) .aob-hero__form-title { font-size: 22px; line-height: 28px; }
	:not(#_) .aob-hero__title { font-size: clamp(48px, min(10.2vw, 11vh), 147px); }
	:not(#_) .aob-hero__mouse { display: none; }
}

@media (min-width: 1024px) {
	:not(#_) .aob-hero__advisor-chip { padding-block: calc(8px * var(--aob-adv)); border-radius: 59px; }
	:not(#_) .aob-hero__advisor-name { font-size: calc(18px * var(--aob-adv) + 2px); line-height: 1.25; }
	:not(#_) .aob-hero__advisor-role { font-size: calc(14px * var(--aob-adv) + 1px); line-height: 1.3; gap: 6px; }
	:not(#_) .aob-hero__advisor-role img { width: calc(27px * var(--aob-adv)); }
}

/* ---------- Round 4: clearance under the header, lower SCROLL cue, 1024–1199px, mobile rating ---------- */
@media (min-width: 1024px) {
	/* text never sits against the header: logo/nav bar is ~108px tall */
	:not(#_) .aob-hero__top { padding-top: calc(108px + clamp(12px, 3vh, 36px)); padding-bottom: 128px; }
	:not(#_) .aob-hero__scroll { bottom: 46px; }
	:not(#_) .aob-hero__curve { bottom: 10px; }
}
@media (min-width: 1024px) and (max-height: 820px) { :not(#_) .aob-hero__top { padding-bottom: 100px; } }

/* tablets and narrow desktops: compact feature tiles (hidden only on phones) */
@media (min-width: 600px) and (max-width: 1199px) {
	:not(#_) .aob-hero__features { display: flex; flex-wrap: wrap; gap: 8px 10px; }
	:not(#_) .aob-hero__feature { padding: 8px 12px; gap: 10px; }
	:not(#_) .aob-hero__feature-icon { width: 34px; height: 34px; }
	:not(#_) .aob-hero__feature-text,
	:not(#_) .aob-hero__feature:nth-child(2) .aob-hero__feature-text,
	:not(#_) .aob-hero__feature:nth-child(3) .aob-hero__feature-text { width: auto; font-size: 14px; line-height: 20px; white-space: nowrap; }
}
/* 1024–1199px: tiles become one tidy column of equal-width tiles on the right */
@media (min-width: 1024px) and (max-width: 1199px) {
	:not(#_) .aob-hero__intro { width: auto; flex: 1 1 auto; min-width: 0; }
	:not(#_) .aob-hero__features { display: grid; grid-template-columns: 1fr; width: max-content; flex: none; gap: 8px; }
}

/* mobile: tighter top, much smaller Facebook/Google badges */
@media (max-width: 1023px) {
	:not(#_) .aob-hero__top { padding-top: 68px; }
	:not(#_) .aob-hero .aob-rating { gap: 8px; }
	:not(#_) .aob-hero .aob-rating__badges { width: 50px; height: 28px; }
	:not(#_) .aob-hero .aob-rating__badge-ring { left: 22px; width: 28px; height: 30px; }
	:not(#_) .aob-hero .aob-rating__badge-google { left: 26px; top: 4px; width: 19px; height: 19px; }
	:not(#_) .aob-hero .aob-rating__badge-photo { width: 28px; height: 28px; }
	:not(#_) .aob-hero .aob-rating__text { width: auto; }
	:not(#_) .aob-hero .aob-rating__value { font-size: 17px; line-height: 20px; }
	:not(#_) .aob-hero .aob-rating__line img { width: 76px; height: 14px; }
	:not(#_) .aob-hero .aob-rating__source { font-size: 11px; line-height: 14px; }
}
@media (max-width: 1023px) and (max-height: 760px) { :not(#_) .aob-hero__top { padding-top: 62px; } }

/* title height budget by viewport height (keeps hero + form inside 100svh) */
@media (min-width: 1024px) and (max-height: 1000px) { :not(#_) .aob-hero__title { font-size: clamp(48px, min(10.2vw, 12vh), 147px); } }
@media (min-width: 1024px) and (max-height: 820px) { :not(#_) .aob-hero__title { font-size: clamp(44px, min(10.2vw, 9.5vh), 147px); } }
@media (min-width: 1024px) and (max-height: 730px) { :not(#_) .aob-hero__title { font-size: clamp(40px, min(10.2vw, 8.6vh), 147px); } }

@media (max-width: 1023px) { :not(#_) .aob-hero__title { font-size: clamp(48px, min(17vw, 9.5vh), 84px); } }
@media (max-width: 1023px) and (max-height: 760px) { :not(#_) .aob-hero__title { font-size: clamp(44px, min(14vw, 7.5vh), 64px); } }

@media (min-width: 600px) and (max-width: 1199px) {
	:not(#_) .aob-hero__feature-icon--1 img,
	:not(#_) .aob-hero__feature-icon--3 img { width: 19px; height: 19px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	:not(#_) .aob-hero__content { gap: 24px; }
	:not(#_) .aob-hero__top { padding-bottom: 72px; }
}

/* small portrait tablets that are not tall enough for the tile row */
@media (min-width: 600px) and (max-width: 767px) and (max-height: 980px) { :not(#_) .aob-hero__features { display: none; } }

/* the mobile dock (fixed bottom bar) takes space from the first screen */
@media (max-width: 767px) {
	:not(#_) .aob-hero { min-height: calc(100vh - var(--aob-dock-h, 0px)); min-height: calc(100svh - var(--aob-dock-h, 0px)); }
}

/* very short phones (with the dock visible): drop the rating row */
@media (max-width: 1023px) and (max-height: 700px) { :not(#_) .aob-hero__rating { display: none; } }