/* -----------------------------------------------------------------------
   base.css — reset, semantic tokens, typography, container.
   Values come from the Buildsheet export; tokens.css holds the raw
   generated custom properties and is not edited by hand.
   ----------------------------------------------------------------------- */

:root {
	/* Semantic colour aliases over the generated palette. */
	--c-bg: var(--title);
	/* #19181B — the page ground */
	--c-bg-alt: #232326;
	/* raised card surface */
	--c-ink: var(--white);
	--c-ink-muted: rgba(255, 255, 255, 0.6);
	--c-ink-dark: var(--title);
	--c-accent: var(--primary);
	/* #E91E22 */
	--c-line: rgba(255, 255, 255, 0.1);
	--c-line-strong: rgba(255, 255, 255, 0.4);
	/* design token "Border" — rules inside the white menu panels. */
	--c-border: #D7D7D7;

	/* Layout. The design is 1440 wide with an 80px margin each side. */
	--container-max: 1280px;
	/* 80px at 1440 (the design), floored at the 24px the mobile frames use. */
	--gutter: clamp(24px, 5.5556vw, 80px);

	/* Type families. */
	--font-heading: var(--font-family-1);
	/* Inter */
	--font-body: var(--font-family-2);
	/* DM Sans */

	/* Fluid type scale. The upper bound of each clamp is the exact the design
	   value at 1440; the lower bound is the mobile size. Between them the
	   size tracks the viewport so intermediate widths stay in proportion. */
	--fs-display: clamp(40px, 6.67vw, 96px);
	/* 96 @1440 */
	--fs-h1: clamp(40px, 5vw, 72px);
	/* 72 @1440; 40 in the mobile variable mode */
	--fs-h2: clamp(32px, 3.889vw, 56px);
	/* 56 @1440; 32 on the mobile frames */
	--fs-h3: clamp(24px, 2.223vw, 32px);
	/* 32 @1440 — 2.222vw stops at 31.9968 */
	--fs-h4: clamp(20px, 1.667vw, 24px);
	/* 24 @1440; 20 in the mobile variable mode */
	--fs-h5: clamp(18px, 1.389vw, 20px);
	/* 20 @1440; 18 in the mobile variable mode */
	--fs-h6: 16px;
	--fs-ghost: clamp(34px, 5.556vw, 80px);
	/* 80 @1440 — solutions ghosts */
	--fs-customer-label: clamp(28px, 2.778vw, 40px);
	/*
	 * 40 @1440 — the page name an "Is this you?" row shows at rest.
	 *
	 * Capped at 40 rather than taken up to the h2's 56 because it has to stay
	 * on ONE line inside a 519px column: the longest of them, "OWNER
	 * OCCUPIERS", measures 9.79em in Inter, which is 548px at 56 and 392px at
	 * 40. The vw ramp is set so it keeps that headroom as the column shrinks.
	 */
	--fs-solutions-open: clamp(28px, 4.45vw, 64px);
	/* 64 @1440 — headline once the cards open */
	--fs-lead: clamp(18px, 1.389vw, 20px);
	/* Large Paragraph — sized on H5 */
	--fs-body: 16px;
	/* Paragraph 1 */
	--fs-small: 14px;
	/* Paragraph 2 */

	/*
	 * The design's "Gap/Gap n" and "Margin/py" variables. Each has two modes — the
	 * 1440 desktop value and the 390 mobile one — so each is a clamp between
	 * them. The vw coefficients are deliberately a hair over the exact ratio
	 * (64/14.4 = 4.44444…), because a coefficient rounded DOWN never reaches
	 * its upper bound at 1440 — the same trap that left --fs-h3 at 31.9968px.
	 */
	--gap-1: clamp(48px, 4.4445vw, 64px);
	--gap-2: clamp(40px, 3.3334vw, 48px);
	--gap-3: clamp(32px, 2.7778vw, 40px);
	--gap-4: clamp(24px, 2.2223vw, 32px);
	--gap-5: clamp(20px, 1.6667vw, 24px);
	--gap-6: 16px;
	--gap-7: clamp(12px, 1.1112vw, 16px);
	--section-py: clamp(56px, 5.5556vw, 80px);

	--lh-tight: 110%;
	--lh-heading: 120%;
	--lh-h1: 130%;
	--lh-body: 140%;

	--radius-pill: var(--radius-1);
	/* 32px — nav pill */
	--radius-lg: var(--radius-2);
	/* 36px */

	--transition: 200ms ease;
	--transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);
	/* The solutions collage unpacking into columns. */
	--solutions-ease: 1600ms cubic-bezier(0.22, 1, 0.36, 1);
	/*
	 * The "Is this you?" row reveal, on the solutions curve so the two bands
	 * ease alike. Everything it drives is an opacity, so the long tail costs
	 * nothing to run — but it IS long for something that answers a pointer:
	 * sweeping down the rows leaves each one still fading for 1.6s after the
	 * cursor has gone. Drop this one number to ~800ms if that reads as mushy;
	 * nothing else needs to change.
	 */
	--isthisyou-ease: 1600ms cubic-bezier(0.22, 1, 0.36, 1);

	--header-height: 96px;
}

/*
 * Mobile opens the bands wider than the design's 56.
 *
 * 56 is what both Figma frames draw, and it holds down to 1008px where the
 * clamp's own ramp bottoms out. On a phone, though, the bands read as running
 * into one another — there is no side margin left to separate them the way
 * there is on desktop, so the vertical break is doing all the work on its own.
 * 72 gives it enough to land as a break without restating the whole scale.
 */
@media (max-width: 768px) {
	:root {
		--section-py: 72px;
	}
}

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background-color: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

/*
 * The UA gives figure a 1em block margin, which was silently adding 16px under
 * every photograph that sits in one — it put 24px between the About section's
 * two mobile images where the design has 8.
 */
figure {
	margin: 0;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition), opacity var(--transition);
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* A visible focus ring everywhere, since the design is dark. */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--gutter);
	z-index: 999;
	padding: 12px 24px;
	background: var(--white);
	color: var(--c-ink-dark);
	font-size: var(--fs-small);
	transition: top var(--transition);
}

.skip-link:focus {
	top: 12px;
}

/* ------------------------------------------------------------ typography */

.t-display {
	font-family: var(--font-heading);
	font-size: var(--fs-display);
	line-height: var(--lh-heading);
	letter-spacing: -0.03125em;
	/* -3px at 96px */
	text-transform: uppercase;
}

.t-h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	letter-spacing: -0.02778em;
	/* -2px at 72px */
}

.t-h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
}

.t-h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
}

.t-h4 {
	font-size: var(--fs-h4);
	line-height: var(--lh-tight);
}

.t-h5 {
	font-size: var(--fs-h5);
	line-height: var(--lh-heading);
}

.t-lead {
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: var(--lh-body);
	letter-spacing: 0.01em;
	text-transform: none;
}

.t-body {
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--lh-body);
}

.t-small {
	font-size: var(--fs-small);
	font-weight: 300;
	line-height: var(--lh-body);
}

.t-small-medium {
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: var(--lh-body);
}

.t-muted {
	color: var(--c-ink-muted);
}

/* --------------------------------------------------------------- layout */

.container {
	width: 100%;
	max-width: calc(var(--container-max) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* The eyebrow + heading pair that opens most sections. */
.section-head {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.section-head--center {
	align-items: center;
	text-align: center;
}

.section-head__eyebrow {
	color: var(--c-ink);
	opacity: 0.6;
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: var(--lh-body);
	letter-spacing: 0.01em;
	text-transform: none;
}

.section-head__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
}

/*
 * 24, not the 20 this carried for a long time. 20 is not one of the mobile
 * gap tokens at all (64/48/40/32/24/16), and every mobile head measured says
 * 24: eyebrow 0-25 with the heading at 49, on The Problem We Solve
 *, Is This You, Insights and the
 * Resources heads. The bands that already read 24 set it
 * themselves because their DESKTOP heads are 24 too, so they are unaffected.
 */
@media (max-width: 768px) {
	.section-head {
		gap: var(--gap-4);
	}
}