/*
 * proof/hero-features. Figma "SEO Agency Page - V2" hero 3275:878, see
 * sites/proof/design/agency-spec.md §1 (the Leistung file's hero 3174:817
 * is the same block, leistung-spec.md §2). The theme-builder header sits
 * on top. Eyebrow → H1 → sub 24 apart, buttons 22 below the sub, panel
 * 116 below the buttons, 100 to the section end.
 */

.pf-block.pf-hfeat {
	padding-top: calc(156 * var(--pf-u));
	padding-bottom: calc(100 * var(--pf-u));
	background: linear-gradient(180deg, #adf71e 0%, var(--pf-bg) 100%);
}
/* The two lime brand shapes: plain (::before) and blurred, with Figma's
   noise averaging out to ~5.7% darker (::after). */
.pf-hfeat::before,
.pf-hfeat::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}
.pf-hfeat::before {
	left: calc(-624 * var(--pf-u));
	top: calc(-24 * var(--pf-u));
	width: calc(3167.31 * var(--pf-u));
	height: calc(2553 * var(--pf-u));
	background: url("../../assets/img/hero-shape-1.svg") no-repeat center / 100% 100%;
}
.pf-hfeat::after {
	left: calc(-412 * var(--pf-u));
	top: calc(-347 * var(--pf-u));
	width: calc(2744 * var(--pf-u));
	height: calc(2291 * var(--pf-u));
	background:
		linear-gradient(rgba(0, 0, 0, 0.057), rgba(0, 0, 0, 0.057)),
		url("../../assets/img/hero-shape-2.svg") no-repeat center / 100% 100%;
}
.pf-hfeat > * {
	position: relative;
	z-index: 1;
}
/* Above 1920 the shapes stay centred on the content (both are centred at
   1920: x 960) and the darkening covers the whole hero, not only the
   shape's 2744 box, whose edge would show at 2332. */
@media (min-width: 1921px) {
	.pf-hfeat::before {
		/* Wider than its 3167 on ultrawide screens, so its edges stay out. */
		left: calc(50% - max(1583.65px, 50% + 200px));
		width: max(3167.31px, 100% + 400px);
	}
	.pf-hfeat::after {
		inset: 0;
		width: auto;
		height: auto;
		background:
			linear-gradient(rgba(0, 0, 0, 0.057), rgba(0, 0, 0, 0.057)),
			url("../../assets/img/hero-shape-2.svg") no-repeat center -347px / 2744px 2291px;
	}
}

/* Gradient H1, 168.89° as drawn (Home: 173.8°). */
.pf-block .pf-hfeat-title {
	align-self: center;
	width: calc(1093 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(24 * var(--pf-u));
	font-family: var(--pf-sans);
	font-weight: 700;
	font-size: calc(78 * var(--pf-t));
	line-height: 1;
	letter-spacing: -0.05em;
	text-align: center;
	text-transform: uppercase;
	background: linear-gradient(168.89deg, var(--pf-blue) 1.7%, var(--pf-blue-deep) 73.24%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* Pen underline under one word (2026-10-14, was the 24px brush stroke):
   a thin hand-drawn line just under the baseline. The word paints its own
   gradient text (top layer, clipped to the glyphs) over the line. */
.pf-block .pf-hfeat-title mark {
	padding: 0 calc(4 * var(--pf-u)) 0 0;
	background:
		linear-gradient(180deg, var(--pf-blue), #0a48b4) text,
		url("../../assets/img/hero-underline-pen.svg") no-repeat left 0 bottom 0.1em / 100% 0.11em border-box;
	-webkit-background-clip: text, border-box;
	color: transparent;
}
/* Keyword-only H1 plus claim (2026-10-15): the claim is a <p> with the
   title's look, directly under the H1, no extra gap. */
.pf-block .pf-hfeat-title.pf-hfeat-claim {
	margin-top: calc(6 * var(--pf-u));
	margin-bottom: 0;
	font-size: calc(58 * var(--pf-t));
}
@media (max-width: 1024px) {
	.pf-block .pf-hfeat-title.pf-hfeat-claim {
		margin-top: 6px;
		font-size: 48px;
	}
}
@media (max-width: 767px) {
	.pf-block .pf-hfeat-title.pf-hfeat-claim {
		font-size: 30px;
	}
}
/* Figma: Helvetica Neue Light Italic. Geist has no italic: 300 slanted. */
.pf-block .pf-hfeat-title em {
	font-style: italic;
	font-weight: 300;
	letter-spacing: -0.04em;
}

/* 707 as in the Leistung file (agency: 661, which breaks line 2 before
   "Manager."; its text carries those breaks as manual line breaks). */
.pf-block .pf-hfeat-sub {
	align-self: center;
	width: calc(707 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(24 * var(--pf-u));
	font-weight: 600;
	font-size: calc(16 * var(--pf-t));
	line-height: 1.45;
	letter-spacing: -0.03em;
	text-align: center;
	color: rgba(0, 0, 0, 0.92);
}
/* Leistung file: regular text with bold terms. */
.pf-block .pf-hfeat-sub:has(strong) {
	font-weight: 400;
}
.pf-block .pf-hfeat-sub strong {
	font-weight: 700;
}
.pf-hfeat-sub > * + * {
	margin-top: calc(12 * var(--pf-u));
}
.pf-block .pf-hfeat-ctas {
	margin-top: calc(22 * var(--pf-u));
}

/* Glass panel: 4 columns 398 wide, 56 apart, p 24. */
.pf-block .pf-hfeat-panel {
	display: flex;
	gap: calc(56 * var(--pf-u));
	margin-top: calc(116 * var(--pf-u));
	padding: calc(24 * var(--pf-u));
	border-radius: calc(8 * var(--pf-u));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.2));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
/* Top edge: two fading lines with the badge in the gap between them. */
.pf-hfeat-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72)) 0 0 / calc(1334 * var(--pf-u)) 1px no-repeat,
		linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)) calc(1348 * var(--pf-u)) 0 / calc(460 * var(--pf-u)) 1px no-repeat;
}
.pf-hfeat-panel::after {
	content: "";
	position: absolute;
	left: calc(1332 * var(--pf-u));
	top: calc(-14 * var(--pf-u));
	width: calc(32 * var(--pf-u));
	height: calc(32 * var(--pf-u));
	transform: rotate(23.32deg);
	background: url("../../assets/img/proof-mark-badge.svg") no-repeat center / contain;
}
.pf-hfeat-item {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: calc(12 * var(--pf-u));
	min-width: 0;
}
/* Separators, 163 tall, white fading out at both ends. */
.pf-hfeat-item + .pf-hfeat-item::before {
	content: "";
	position: absolute;
	left: calc(-56 * var(--pf-u));
	top: calc(-8 * var(--pf-u));
	width: 1px;
	height: calc(163 * var(--pf-u));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0));
	opacity: 0.88;
}
/* Figma's separators are not centred in the gaps: x 478 / 955 / 1404. */
.pf-hfeat-item:nth-child(3)::before {
	left: calc(-33 * var(--pf-u));
}
.pf-hfeat-item:nth-child(4)::before {
	left: calc(-38 * var(--pf-u));
}
.pf-hfeat-num {
	font-family: var(--pf-mono);
	font-weight: 700;
	font-size: calc(14 * var(--pf-t));
	line-height: calc(20 * var(--pf-t));
	letter-spacing: 0.48px;
	white-space: pre;
	color: var(--pf-blue);
}
.pf-block .pf-hfeat-name {
	font-family: var(--pf-sans);
	font-weight: 600;
	font-size: calc(20 * var(--pf-t));
	line-height: 1.4;
	letter-spacing: -0.018em;
	color: var(--pf-blue);
}
.pf-block .pf-hfeat-text {
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.52);
}

@media (max-width: 1024px) {
	.pf-block.pf-hfeat {
		padding-top: 120px;
		padding-bottom: 56px;
	}
	.pf-hfeat::before {
		left: -60%;
		top: 0;
		width: 220%;
		height: auto;
		aspect-ratio: 3167 / 2553;
	}
	.pf-hfeat::after {
		left: -40%;
		top: -10%;
		width: 180%;
		height: auto;
		aspect-ratio: 2744 / 2291;
	}
	.pf-block .pf-hfeat-title {
		width: 100%;
		margin-top: 16px;
		font-size: 64px;
	}
	.pf-block .pf-hfeat-sub {
		width: 560px;
		margin-top: 20px;
		font-size: 16px;
	}
	/* Manual line breaks match the desktop lines only. */
	.pf-hfeat-sub br {
		display: none;
	}
	.pf-block .pf-hfeat-ctas {
		margin-top: 24px;
	}
	.pf-block .pf-hfeat-panel {
		flex-wrap: wrap;
		gap: 24px;
		margin-top: 56px;
		padding: 24px;
	}
	.pf-hfeat-panel::before,
	.pf-hfeat-panel::after,
	.pf-hfeat-item + .pf-hfeat-item::before {
		display: none;
	}
	.pf-hfeat-item {
		flex: 1 1 calc(50% - 12px);
		gap: 8px;
	}
	.pf-hfeat-num {
		font-size: 13px;
		line-height: 18px;
	}
	.pf-block .pf-hfeat-name {
		font-size: 18px;
	}
	.pf-block .pf-hfeat-text {
		font-size: 15px;
	}
}
@media (max-width: 767px) {
	.pf-block .pf-hfeat-title {
		font-size: 40px;
		letter-spacing: -0.045em;
	}
	.pf-block .pf-hfeat-sub {
		font-size: 15px;
	}
	.pf-hfeat-item {
		flex-basis: 100%;
	}
}

/* Team faces above the H1 (option "Team-Fotos"): overlapping 48px circles,
   white ring, centred. */
.pf-block .pf-hfeat-faces {
	display: flex;
	align-self: center;
	margin-top: calc(20 * var(--pf-u));
	padding-left: 12px;
}
.pf-hfeat-face {
	display: block;
	width: 48px;
	height: 48px;
	margin-left: -12px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	background: var(--pf-bg-2);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
.pf-hfeat-face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pf-hfeat-faces + .pf-hfeat-title {
	margin-top: calc(16 * var(--pf-u));
}
@media (max-width: 1024px) {
	.pf-block .pf-hfeat-faces {
		margin-top: 16px;
	}
	.pf-hfeat-face {
		width: 44px;
		height: 44px;
	}
	.pf-hfeat-faces + .pf-hfeat-title {
		margin-top: 12px;
	}
}

/* Line under the buttons and the optional board image (2026-10-14). */
.pf-block .pf-hfeat-note {
	align-self: center;
	margin-top: calc(14 * var(--pf-u));
	font-family: var(--pf-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.6);
}
.pf-block .pf-hfeat-media {
	align-self: center;
	width: calc(1100 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(56 * var(--pf-u));
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.06);
	background: #fff;
}
.pf-block .pf-hfeat-media img {
	display: block;
	width: 100%;
	height: auto;
}
.pf-hfeat-media + .pf-hfeat-panel {
	margin-top: calc(56 * var(--pf-u));
}
@media (max-width: 1024px) {
	.pf-block .pf-hfeat-note {
		margin-top: 12px;
	}
	.pf-block .pf-hfeat-media {
		margin-top: 32px;
		border-radius: 8px;
	}
	.pf-hfeat-media + .pf-hfeat-panel {
		margin-top: 32px;
	}
}