/*
 * Proof base: self-hosted fonts, design tokens and page defaults.
 * Loaded on the front end (before the block styles) and in
 * the block editor, so ACF block previews use the same tokens.
 *
 * Desktop (>= 1025px) scales the layout with --pf-u (1px at 1920 wide), so
 * spacing and images keep the design's proportions down to 1025px. Type
 * (font-size, line-height, letter-spacing, the buttons) uses --pf-t, which
 * is always 1px: text stays at its design size at every width and only
 * changes where the layout changes (the 1024 and 767 breakpoints). Below
 * 1024 sections stack and use their own sizes.
 */

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2-variations"),
		url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Cousine";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cousine-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Cousine";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/cousine-latin-700-normal.woff2") format("woff2");
}

/* Above 1920 the layout stays at its 1920 size: the gutter grows so the
   content keeps the design's 1808 and sits centred, while the section
   backgrounds (on the block roots) still run edge to edge. Full-bleed
   rows (logos, videos, bands) pull out by the gutter and follow it. */
:root {
	--pf-u: min(1px, calc(100vw / 1920));
	--pf-t: 1px; /* type unit: never scales with the viewport */
	--pf-gutter: max(calc(56 * var(--pf-u)), calc(50vw - 904px));

	--pf-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
	--pf-mono: "Cousine", "Courier New", monospace;

	--pf-blue: #0b50c8;
	--pf-blue-2: #0b55d4;
	--pf-blue-deep: #062558;
	--pf-lime: #adf71e;
	--pf-lime-soft: #bdee5f;
	--pf-lime-footer: #bdf94a;
	--pf-bg: #f3f2f1;
	--pf-bg-2: #eeedec;
	--pf-ink: #101114;
	--pf-ink-80: rgba(0, 0, 0, 0.8);
	--pf-muted: rgba(38, 42, 27, 0.61);
	--pf-rule: rgba(0, 0, 0, 0.1);
	--pf-navy: #273957;
	--pf-green: #71a961;
}

@media (max-width: 1024px) {
	:root {
		--pf-u: 1px;
		--pf-gutter: 32px;
	}
}
@media (max-width: 767px) {
	:root {
		--pf-gutter: 16px;
	}
}

body {
	background: var(--pf-bg);
	color: var(--pf-ink);
	font-family: var(--pf-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------- *
 * Primitives of the ACF blocks (blocks/)
 * ---------------------------------------------------------------- */

/* Eyebrow label with the full-width rule below ("OUR SERVICES"). */
.pf-label {
	width: 100%;
	font-family: var(--pf-mono);
	font-size: calc(14 * var(--pf-t));
	line-height: 1.3;
	text-transform: uppercase;
	text-align: center;
	color: rgba(0, 0, 0, 0.64);
	padding-bottom: calc(12.8 * var(--pf-u));
	border-bottom: 1px solid var(--pf-rule);
}
.pf-label--light {
	color: rgba(255, 255, 255, 0.64);
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

.pf-h2 {
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(56 * var(--pf-t));
	line-height: 1.18;
	letter-spacing: -0.04em;
	color: var(--pf-ink-80);
}

@media (max-width: 1024px) {
	.pf-label {
		font-size: 12px;
		padding-bottom: 12px;
	}
	.pf-h2 {
		font-size: 44px;
	}
}

/* Phone: fixed sizes in place of the former clamp() (see --pf-t in base.css). */
@media (max-width: 767px) {
	.pf-h2 {
		font-size: 30px;
	}
}