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

/* The homepage hero photo is a wide landscape shot; at 500px tall on a
   narrow phone that's still a much harder crop than the photo's own
   proportions, cutting away most of its width. Shorter here keeps the
   crop closer to how the photo actually looks. */
@media screen and (max-width: 39.99rem) {
	:root {
		--leader-height: 340px;
	}
}

.leader-text {
	top: 50%;
	transform: translate(0, -50%);
}


/* GET STARTED — homepage multi-entry-point section, architecture v8 §9.5.15 */
section.get-started {
	background: var(--surface-alt);
	padding: var(--spacing-20) 0;
	text-align: center;
}
.get-started h2 {
	margin-bottom: var(--spacing-4);
}
.get-started-intro {
	max-width: 40rem;
	margin: 0 auto var(--spacing-12);
	color: var(--color-text-dimmed);
}
.get-started-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: var(--spacing-5);
	text-align: left;
}
.get-started-tile {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	background: var(--color-white);
	border: 1px solid var(--brand-border);
	border-radius: var(--rounded-xl);
	padding: var(--spacing-6);
	text-decoration: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.get-started-tile:hover,
.get-started-tile:focus-visible {
	border-color: var(--brand-blue);
	box-shadow: var(--shadow-md);
}
.get-started-tile:focus-visible {
	outline: 2px solid var(--brand-blue);
	outline-offset: 2px;
}
.get-started-tile__label {
	font-family: var(--font-title);
	font-weight: var(--font-semibold);
	font-size: var(--text-lg);
	color: var(--brand-blue);
}
.get-started-tile__desc {
	color: var(--color-text-dimmed);
}

/* Apply Online is the one genuine conversion action in this grid; the
   other three are ways to ask a question first. Same card shape, but
   filled with the site's one primary CTA colour (same token as every
   other "Apply Online" button) so it reads as the dominant choice
   instead of four equally-weighted options. */
.get-started-tile--primary {
	background: var(--btn-cta-bg);
	border-color: var(--btn-cta-bg);
}
.get-started-tile--primary:hover,
.get-started-tile--primary:focus-visible {
	background: var(--btn-cta-bg-hover);
	border-color: var(--btn-cta-bg-hover);
}
.get-started-tile--primary .get-started-tile__label {
	color: var(--btn-cta-color);
}
.get-started-tile--primary .get-started-tile__desc {
	color: var(--btn-cta-color);
	opacity: 0.85;
}
.get-started-tile__note {
	font-size: var(--text-xs);
	color: var(--color-gray-500);
	font-style: italic;
}

@media screen and (min-width: 40rem) {
	.get-started-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media screen and (min-width: 72rem) {
	.get-started-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* A single line, not a fifth tile — Growth Engine 2 (agents) deliberately
   kept visually distinct from the student-facing entry-point grid above it,
   rather than diluting a clear "how would you like to get started" choice
   with an audience it isn't addressed to. */
.get-started-agent-note {
	margin: var(--spacing-10) auto 0;
	color: var(--color-text-dimmed);
}
.get-started-agent-note a {
	color: var(--brand-blue);
	font-weight: var(--font-semibold);
}

/* SERVICES — icon cards, one per real core service. Deliberately not
   photo-tiles: three of the six service pages have a hero image today
   and three don't, and a grid where half the cards are photographs and
   half are flat colour reads as unfinished rather than premium.
   Full component (.services-container / .services-intro / .services-grid
   / .service-card) lives in site/elements.css so location pages reuse
   the exact same component. */

/* USPS — one "why choose us" treatment, no emoji. A default linework
   icon is used whenever no custom icon image is set, matching the
   design system's single-stroke icon style. */
section.usp-container {
	background: var(--surface-default);
	padding: var(--spacing-20) 0;
	text-align: center;
}
.usps {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: var(--spacing-5);
	text-align: center;
}
.usp-box {
	background: var(--surface-alt);
	border-radius: var(--rounded-xl);
	padding: var(--spacing-6);
	text-align: center;
}
.usp-box img {
	width: 64px;
	height: 64px;
	margin: 0 auto;
	margin-bottom: var(--spacing-4);
}
.usp-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--surface-default);
	color: var(--brand-blue);
	margin: 0 auto var(--spacing-4);
	box-shadow: var(--shadow);
}
.usp-box h3.usp-heading {
	font-size: var(--text-xl);
	font-weight: var(--font-normal);
}
.usp-button {
	margin: auto;
	text-align: center;
	margin-top: var(--spacing-16);
}
.usp-button .btn {
	font-size: var(--text-2xl);
}

/* PLATFORM — makes the Student Portal and Agent Portal visible on the
   homepage, rather than something only visible after applying. */
.platform-container {
	background: var(--surface-default);
	padding: var(--spacing-20) 0;
	text-align: center;
}
.platform-intro {
	max-width: 42rem;
	margin: 0 auto var(--spacing-10);
	color: var(--color-text-dimmed);
}
.platform-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: var(--spacing-6);
	text-align: left;
}
.platform-card {
	background: var(--surface-alt);
	border-radius: var(--rounded-xl);
	padding: var(--spacing-8) var(--spacing-6);
}
.platform-card__icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--surface-default);
	color: var(--brand-navy);
	margin-bottom: var(--spacing-4);
	box-shadow: var(--shadow);
}
.platform-card h3 {
	font-size: var(--text-lg);
	margin-bottom: var(--spacing-2);
}
.platform-card p {
	color: var(--color-text-dimmed);
	margin-bottom: var(--spacing-4);
}
.platform-card__link {
	font-weight: var(--font-semibold);
	color: var(--brand-blue);
	text-decoration: none;
}
.platform-card__link:hover {
	text-decoration: underline;
}

/* Destinations teaser component moved to site/elements.css — shared by
   the homepage and location pages' "Explore Other UK Destinations". */


@media screen and (min-width: 40rem) {
	:root {
		--leader-height: 700px;
	}
	.leader-text {
		padding-top: 0;

	}
	.usps {
		grid-template-columns: 1fr 1fr;
	}
	.platform-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 72rem) {
	.usps {
		grid-template-columns: repeat(3, 1fr);
	}
	.platform-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}