.service-template--site,
.service-template--mobile-app {
	--brand-hero-size: clamp(3.65rem, 5.2vw, 5rem);
	--brand-title-size: clamp(2.8rem, 4.35vw, 4.25rem);
	--brand-section-space: clamp(76px, 8vw, 124px);
	font-family: var(--brand-sans);
}

.service-template--site .rd,
.service-template--mobile-app .rd {
	font-family: var(--brand-sans);
}

.service-template--site .container,
.service-template--mobile-app .container {
	width: min(calc(100% - 9vw), var(--brand-container));
}

body.single-service .service-template--site .hero,
body.single-service .service-template--mobile-app .hero {
	min-height: min(800px, 100svh);
	padding-top: clamp(128px, 11vw, 166px);
}

body.single-service .service-template--site .hero h1,
body.single-service .service-template--mobile-app .hero h1 {
	font-family: var(--brand-display);
	font-size: var(--brand-hero-size);
	font-weight: 620;
	line-height: .9;
	letter-spacing: -.06em;
	text-transform: none;
	text-wrap: balance;
}

.service-template--site h2,
.service-template--mobile-app .mobile-section-head h2 {
	font-family: var(--brand-display);
	font-size: var(--brand-title-size);
	font-weight: 600;
	line-height: .96;
	letter-spacing: -.05em;
	text-wrap: balance;
}

.service-template--site .eyebrow,
.service-template--site .site-kicker,
.service-template--mobile-app .eyebrow,
.service-template--mobile-app .mobile-kicker {
	font-family: var(--brand-mono);
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.service-template--site .btn,
.service-template--mobile-app .btn,
.service-template--site button,
.service-template--mobile-app button {
	font-family: var(--brand-sans);
}

@media (max-width: 680px) {
	.service-template--site,
	.service-template--mobile-app {
		--brand-hero-size: clamp(3rem, 13vw, 4rem);
		--brand-title-size: clamp(2.55rem, 11vw, 3.35rem);
		--brand-section-space: 74px;
	}

	.service-template--site .container,
	.service-template--mobile-app .container {
		width: min(calc(100% - 34px), var(--brand-container));
	}
}