/* ==========================================================================
   Shared: inner-page hero (template-parts/sections/page-hero.php)
   Figma: Services / About / Coverage / Service detail "Page hero"
   ========================================================================== */
.page-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--c-blue);
	color: #fff;
	padding: 56px 0 88px;
	min-height: 584px;
}
.page-hero__inner { position: relative; z-index: 2; }

/* Photo: anchored to the right edge of the 1440 frame, bleeds past the section */
.page-hero__media {
	--hero-img-w: min(104.65%, 1507px);
	position: absolute; z-index: 0;
	top: 50%;
	right: calc(max(0px, (100% - 1440px) / 2) - min(4.65%, 67px));
	width: var(--hero-img-w);
	aspect-ratio: 1507 / 672;
	transform: translateY(calc(-50% + 31px));
	pointer-events: none;
}
.page-hero__media picture { display: block; width: 100%; height: 100%; }
.page-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }

/* Breadcrumbs */
.page-hero__crumbs ol { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.page-hero__crumbs li {
	font-family: var(--ff-mono); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--c-on-dark);
}
.page-hero__crumbs li + li::before { content: "/"; padding: 0 .9em; }
.page-hero__crumbs a { transition: color .2s; }
.page-hero__crumbs a:hover { color: var(--c-orange); }

.page-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 56px; max-width: 660px; }

.page-hero__eyebrow {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--ff-mono); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--c-on-dark);
}
.page-hero__title {
	font-weight: 300; font-size: 64px; line-height: 70px; letter-spacing: -1.6px; color: #fff;
	max-width: 760px;
}
.page-hero__text {
	max-width: 614px;
	font-family: var(--ff-text); font-weight: 400; font-size: 18px; line-height: 28px; color: var(--c-on-dark);
}

/* Chips (outlined pills) */
.page-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.page-hero__chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 100px;
	font-family: var(--ff-text); font-weight: 400; font-size: 13px; line-height: 15px; color: var(--c-on-dark);
	white-space: nowrap;
}
.page-hero__chip .tk-icon { width: 16px; height: 16px; flex: none; color: var(--c-on-dark); }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
	.page-hero { padding: 56px 0 70px; min-height: 526px; }
	.page-hero__media {
		top: 0; right: 0; bottom: 0;
		width: 137.4%; aspect-ratio: auto; height: 100%;
		transform: none;
	}
	.page-hero::before {
		content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: linear-gradient(90deg, #312bb6 0%, rgba(49, 43, 182, .7) 60%, rgba(49, 43, 182, .12) 100%);
	}
	.page-hero__title { font-size: 46px; line-height: 50px; }
	.page-hero__content { max-width: 640px; }
}

/* ---------- Mobile: photo goes below the text ---------- */
@media (max-width: 767px) {
	.page-hero { display: flex; flex-direction: column; padding: 42px 0 0; min-height: 0; }
	.page-hero::before { display: none; }
	.page-hero__inner { order: 1; }
	.page-hero__media {
		order: 2; position: relative; z-index: 0;
		top: auto; right: auto; bottom: auto; transform: none;
		width: 100%; height: auto; aspect-ratio: 375 / 400;
		margin-top: 12px;
	}
	.page-hero__img { object-position: 87% 60%; }
	.page-hero__media picture:has(source) .page-hero__img { object-position: 50% 100%; }
	.page-hero__content { margin-top: 32px; gap: 24px; }
	.page-hero__title { font-size: 36px; line-height: 39px; letter-spacing: -1.2px; }
	.page-hero__text { font-size: 18px; line-height: 28px; }
	.page-hero__btns { flex-direction: column; gap: 16px; width: 100%; }
	.page-hero__btns .btn { width: 100%; padding-inline: 22px; }
}