:root {
	--leader-height: 200px;
}

/* Become an Agent's hero CTA links straight to the form below; keep it
   clear of the sticky header when the browser jumps to the anchor. */
#partner-form {
	scroll-margin-top: var(--spacing-8);
}

/* Same prose spacing as contact.css, so the intro content reads
   identically to every other leader+prose page on the site. */
.prose h2 {
	margin-top: 0;
}
.prose p {
	margin-bottom: var(--spacing-6);
}

/* Everything below is specific to Apply Online: it's the one page
   presented full-width instead of the leader/sidebar-form split
   every other page (including Contact) uses, because a 16-field
   application form doesn't fit a sidebar column. */

.apply-intro {
	max-width: var(--container-prose);
}

/* .container .contact-form gets `margin-top: -10rem !important` at
   desktop from site/forms.css, meant to float a short sidebar form
   over a hero image. The wizard section below isn't that kind of
   form, but shares the same container context — cancel it here in
   case anything upstream still applies the class. */
.container .contact-form,
.container .apply-wizard-section {
	margin-top: 0 !important;
}

.apply-form-note {
	font-size: var(--text-sm);
	color: var(--prose-color-text);
	opacity: 0.75;
	margin-top: var(--spacing-2);
}

.apply-form-consent {
	margin-top: var(--spacing-4);
}

.apply-form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-2);
	font-size: var(--text-sm);
	cursor: pointer;
}

.apply-form-checkbox input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 0.2em;
}

.apply-form-checkbox .error {
	color: var(--brand-error);
}

.required-marker {
	color: var(--brand-error);
}

.apply-radio-group {
	display: flex;
	gap: var(--spacing-4);
	margin-top: var(--spacing-2);
}

.apply-radio-option {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	font-size: var(--text-sm);
	cursor: pointer;
}

.apply-radio-option input[type="radio"] {
	flex-shrink: 0;
}

@media screen and (min-width: 40rem) {
	:root {
		--leader-height: 300px;
	}
}

@media screen and (min-width: 72rem) {
	.contact-form {
	    margin: var(--spacing-10) 0;
	}
}

/* ===================================================================
   Premium multi-step wizard (site/snippets/form/apply.php)
   =================================================================== */

.apply-wizard-section {
	margin: var(--spacing-16) 0;
}

.apply-wizard {
	max-width: 40rem;
	margin: 0 auto;
	background: var(--color-white);
	border-radius: var(--rounded-xl);
	box-shadow: var(--shadow-xl);
	padding: var(--spacing-8) var(--spacing-6);
}

@media screen and (min-width: 40rem) {
	.apply-wizard {
		padding: var(--spacing-10) var(--spacing-10);
	}
}

/* Welcome screen */
.apply-welcome {
	text-align: center;
	padding-bottom: var(--spacing-2);
}

.apply-welcome__title {
	margin-bottom: var(--spacing-4);
}

.apply-welcome__lead {
	color: var(--color-text-dimmed);
	max-width: 34rem;
	margin: 0 auto var(--spacing-6);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

.apply-trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-2) var(--spacing-4);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--spacing-8);
}

.apply-trust-badges li {
	position: relative;
	padding-left: var(--spacing-6);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-text-dimmed);
}

.apply-trust-badges li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--color-brand);
	font-weight: var(--font-bold);
}

.apply-trust-badges--compact {
	margin: 0 0 var(--spacing-6);
}

.apply-welcome__checklist {
	max-width: 24rem;
	margin: 0 auto var(--spacing-8);
	padding: var(--spacing-5) var(--spacing-6);
	background: var(--color-gray-100);
	border-radius: var(--rounded-xl);
	text-align: left;
}

.apply-welcome__checklist-title {
	font-weight: var(--font-semibold);
	margin-bottom: var(--spacing-3);
}

.apply-welcome__checklist ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--spacing-2);
}

.apply-welcome__checklist li {
	position: relative;
	padding-left: var(--spacing-5);
	color: var(--color-text-dimmed);
}

.apply-welcome__checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-brand);
}

.apply-welcome__begin {
	font-size: var(--text-lg);
	padding: var(--spacing-3) var(--spacing-10);
}

/* "Need help?" reassurance card, sits under the wizard */
.apply-help-card {
	max-width: 40rem;
	margin: var(--spacing-6) auto 0;
	padding: var(--spacing-6) var(--spacing-8);
	background: var(--surface-alt);
	border-radius: var(--rounded-xl);
	text-align: center;
}

/* At desktop width, the wizard card and the help card sit side by side
   instead of both being centred narrow columns with empty margins on
   either side — uses the space the page actually has rather than
   widening the form itself, and puts help alongside the journey instead
   of stacked below it. */
@media screen and (min-width: 72rem) {
	.apply-wizard-section {
		max-width: 64rem;
		margin-left: auto;
		margin-right: auto;
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: var(--spacing-8);
		align-items: start;
	}
	.apply-wizard {
		margin: 0;
	}
	.apply-help-card {
		max-width: none;
		margin: 0;
		position: sticky;
		top: var(--spacing-8);
	}
}

.apply-help-card h3 {
	margin-bottom: var(--spacing-2);
}

.apply-help-card ul {
	list-style: none;
	padding: 0;
	margin: var(--spacing-3) 0;
	display: inline-flex;
	flex-direction: column;
	gap: var(--spacing-1);
	text-align: left;
}

.apply-help-card .btn {
	margin-top: var(--spacing-3);
}

/* Progress indicator */
.apply-progress {
	display: flex;
	list-style: none;
	margin: 0 0 var(--spacing-10);
	padding: 0;
	counter-reset: apply-step;
}

.apply-progress li {
	flex: 1;
	position: relative;
	text-align: center;
	font-size: var(--text-xs);
	color: var(--color-text-dimmed);
}

.apply-progress li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 16px;
	left: 50%;
	width: 100%;
	height: 2px;
	background: var(--color-gray-200);
	z-index: 0;
}

.apply-progress li.is-complete:not(:last-child)::after {
	background: var(--color-brand);
}

.apply-progress__index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 auto var(--spacing-2);
	border-radius: 50%;
	background: var(--color-gray-200);
	color: var(--color-text-dimmed);
	font-weight: var(--font-bold);
	position: relative;
	z-index: 1;
	transition: var(--transition-base);
}

.apply-progress li.is-active .apply-progress__index {
	background: var(--color-brand);
	color: var(--color-white);
}

.apply-progress li.is-complete .apply-progress__index {
	background: var(--color-brand);
	color: var(--color-white);
	font-size: 0;
}

.apply-progress li.is-complete .apply-progress__index::after {
	content: "\2713";
	font-size: var(--text-base);
}

.apply-progress__label {
	display: none;
}

.apply-progress li.is-active .apply-progress__label {
	color: var(--color-text);
	font-weight: var(--font-semibold);
}

@media screen and (min-width: 40rem) {
	.apply-progress__label {
		display: block;
		margin-top: var(--spacing-1);
	}
}

/* Steps */
.apply-step__title {
	margin-bottom: var(--spacing-1);
}

.apply-step__subtitle {
	color: var(--color-text-dimmed);
	margin-bottom: var(--spacing-8);
}

.apply-optional {
	font-weight: var(--font-normal);
	color: var(--color-text-dimmed);
	text-transform: none;
}

.apply-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-6);
}

.apply-fields .form-full {
	grid-column: 1 / -1;
}

@media screen and (min-width: 40rem) {
	.apply-fields {
		grid-template-columns: 1fr 1fr;
	}
}

/* Premium inputs — scoped to the wizard so the rest of the site's forms
   (Contact, Request a Call, Become an Agent) are untouched. */
.apply-wizard label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	margin-bottom: var(--spacing-2);
}

.apply-wizard input:not([type="checkbox"]):not([type="file"]),
.apply-wizard select,
.apply-wizard textarea {
	width: 100%;
	padding: var(--spacing-3) var(--spacing-4);
	margin-top: 0;
	border: 1.5px solid var(--color-border);
	border-radius: var(--rounded-xl);
	font-size: var(--text-base);
	background: var(--color-white);
	transition: var(--transition-base);
}

.apply-wizard input:not([type="checkbox"]):not([type="file"]):focus,
.apply-wizard select:focus,
.apply-wizard textarea:focus {
	outline: none;
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.apply-wizard input.error,
.apply-wizard select.error,
.apply-wizard textarea.error {
	border-color: var(--brand-error);
}

.apply-step__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--spacing-10);
	gap: var(--spacing-4);
}

.apply-step__nav .apply-next,
.apply-step__nav input[type="submit"] {
	margin-left: auto;
}

@media screen and (max-width: 26rem) {
	.apply-step__nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.apply-step__nav .btn,
	.apply-step__nav input[type="submit"] {
		width: 100%;
		margin-left: 0;
	}
	/* .btn--cta's sitewide font-size (--text-2xl, 24px) is sized for a
	   standalone page-level CTA (Apply Online, WhatsApp Us). Here it's
	   paired with Back, which stays at the plain .btn size (--text-lg,
	   18px) — full-width and stacked on mobile, the 24px/18px mismatch
	   reads as two differently-important buttons rather than a single
	   Back/Continue pair. Matched to Back's size, mobile-only, so the
	   same buttons at desktop width are untouched. */
	.apply-step__nav .apply-next,
	.apply-step__nav input[type="submit"] {
		font-size: var(--text-lg);
	}
}

/* Premium file upload cards — the real <input type="file"> is the full
   clickable/droppable surface, stretched over the styled card beneath it
   (native file inputs already accept drag-and-drop). */
.apply-upload-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--spacing-1);
	padding: var(--spacing-8) var(--spacing-4);
	border: 2px dashed var(--color-border);
	border-radius: var(--rounded-xl);
	background: var(--color-gray-100);
	transition: var(--transition-base);
	min-height: 10rem;
}

.apply-upload-card:hover {
	border-color: var(--color-brand);
	background: var(--color-white);
}

.apply-upload-card.has-file {
	border-style: solid;
	border-color: var(--brand-success);
	background: var(--color-white);
}

.apply-upload-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.apply-upload-icon {
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: var(--shadow);
	color: var(--color-brand);
	margin-bottom: var(--spacing-3);
}

.apply-upload-card.has-file .apply-upload-icon {
	display: none;
}

.apply-upload-check {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--brand-success);
	color: var(--color-white);
	margin-bottom: var(--spacing-3);
}

.apply-upload-card.has-file .apply-upload-check {
	display: flex;
}

.apply-upload-preview {
	display: none;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	border-radius: var(--rounded);
	margin-bottom: var(--spacing-3);
	box-shadow: var(--shadow);
}

.apply-upload-card.has-preview .apply-upload-check {
	display: none;
}

.apply-upload-card.has-preview .apply-upload-preview {
	display: block;
}

.apply-upload-text strong {
	color: var(--color-brand);
}

.apply-upload-card.has-file .apply-upload-text {
	display: none;
}

.apply-upload-meta {
	display: flex;
	gap: var(--spacing-3);
	font-size: var(--text-xs);
	color: var(--color-text-dimmed);
	margin-top: var(--spacing-2);
}

.apply-upload-card.has-file .apply-upload-meta {
	display: none;
}

.apply-upload-selected-name {
	margin-top: 0;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--brand-success);
	word-break: break-all;
}

.apply-upload-field {
	margin-bottom: 0;
}

.apply-upload-field > label {
	display: block;
	margin-bottom: var(--spacing-2);
}

/* Review step — one card per section, each with its own Edit link */
.apply-review-card {
	margin-bottom: var(--spacing-4);
	padding: var(--spacing-5) var(--spacing-6);
	background: var(--color-gray-100);
	border-radius: var(--rounded-xl);
}

.apply-review-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-3);
}

.apply-review-card__header h4 {
	margin: 0;
	font-size: var(--text-base);
}

.apply-review-card__edit {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-brand);
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

.apply-review__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-3) var(--spacing-5);
	margin: 0;
}

.apply-review__list dt {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-text-dimmed);
}

.apply-review__list dd {
	margin: var(--spacing-1) 0 0;
	font-weight: var(--font-semibold);
	word-break: break-word;
}

.apply-review__list dd.is-missing {
	color: var(--color-text-dimmed);
	font-weight: var(--font-normal);
	font-style: italic;
}

.apply-review__list--files {
	grid-template-columns: 1fr;
}

/* Step-enter animation — a small "arriving" motion each time a step
   becomes visible, so progressing feels like a sequence of small wins
   rather than a page just swapping content. framework/reset.css already
   disables all animations under prefers-reduced-motion. */
@keyframes apply-step-enter {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.apply-step--enter {
	animation: apply-step-enter 0.35s ease;
}

/* ===================================================================
   Become an Agent — local corrections only, scoped to body.become-an-
   agent (set in site/templates/become-an-agent.php). apply.php and
   request-a-call.php also load this file but don't carry that class,
   so nothing here reaches them. headings.css, site/leader.css, and
   framework/grid.css are untouched — only this one page's rendering
   of the shared .leader/.grid components is adjusted.
   =================================================================== */

/* 1 & 3: hero was clipping its own CTA row (Submit Partner Application /
   WhatsApp Us) because the shared --leader-height (200px/300px, sized for
   the short Apply/Request-a-Call heroes) isn't tall enough for this hero's
   longer content: eyebrow + two-line H1 + description + two buttons. The
   text block is vertically centred within .leader (site/leader.css), so a
   taller box on its own restores top/bottom breathing room without extra
   padding rules. */
body.become-an-agent {
	--leader-height: 460px;
}
@media screen and (min-width: 40rem) {
	body.become-an-agent {
		--leader-height: 520px;
	}
}

/* 2: site/leader.css's own .leader-text h1 jumps to text-6xl (3.5rem) at
   40rem+ — sized for short, single-line hero headlines elsewhere. "Become
   an Education Agent" wrapped awkwardly at that size. Restrained to
   text-5xl, the same scale used for ordinary page H1s sitewide, still a
   proper hero heading, just not the extra-large treatment. */
@media screen and (min-width: 40rem) {
	body.become-an-agent .leader-text h1 {
		font-size: var(--text-5xl);
	}
}

/* 4: nudges the visible crop toward the handshake on the right (where the
   photo's actual subject is) while keeping the left portion — where the
   text sits — clear. Needs a live look once deployed; I can't render the
   crop to confirm the exact position. */
body.become-an-agent .leader figure img {
	object-position: 70% 35%;
}

/* Vertical rhythm: the "Why Partner" cards section (.services-container,
   site/elements.css) and .prose's own top margin (framework/prose.css)
   were stacking to a much larger gap than the rest of the page uses
   before this page's intro paragraph. Tightened locally, still a
   deliberate gap, not compressed flush. */
body.become-an-agent .apply-intro {
	margin-top: var(--spacing-4);
}

/* Item 2 (mid-turn follow-up): the .grid's second column (framework/
   grid.css: grid-template-columns: var(--container-prose) 1fr at 72rem+)
   existed already but this page's own text.php never rendered anything
   into it, leaving ~35-40% of the page blank from the intro through the
   FAQ. Reuses .sidebar/.sticky/.sidebar-offer (assets/css/site/sidebar.css)
   exactly as layouts/sidebar.php already does elsewhere — same sticky-
   above-72rem/hidden-below behaviour, same card styling, no new CSS
   needed for the column itself. */
body.become-an-agent .sidebar-offer {
	margin-top: var(--spacing-6);
}