/*
 * BIBGroup site styles. Every color, size, font and duration is a theme.json token, generated
 * into tokens.css by bin/build-tokens.mjs; nothing is hard-coded here.
 */

:root {
	--ease: var(--motion-ease);
	--margin: var(--space-margin);
	--gutter: var(--grid-gutter);
	--focus-color: var(--color-graphite);
}

/* ---------- Base ---------- */

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

/* Anchor jumps (#contact, #map, #businesses) and focus scrolling stop below the fixed header, and keep
   24 clear of the bottom edge: Tab into a form field half under it would otherwise leave the field's line,
   its focus mark, off screen (seen at 200% zoom). */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height-solid);
	scroll-padding-bottom: var(--space-24);
}

@media (max-width: 767px) {
	html {
		scroll-padding-top: var(--header-height-mobile);
	}
}

/* The hidden attribute wins over any display value set below (the form's messages, the drawer). */
[hidden] {
	display: none !important;
}

/* overflow-wrap: a word longer than its whole line (a long translation, or text spacing set larger by the
   visitor, WCAG 1.4.12) breaks instead of running out of its box. A word that fits is never broken. */
body {
	margin: 0;
	background: var(--color-white);
	color: var(--color-graphite);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 400;
	line-height: var(--line-height-body);
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--color-graphite);
}

h1 {
	font-size: var(--font-size-display);
	line-height: var(--line-height-display);
}

h2 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
}

h3 {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
}

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

img,
video {
	height: auto;
}

p,
h1,
h2,
h3,
ul,
ol {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

/* Bold lead-ins (C.3) are Sofia Sans SemiBold, as in Figma. */
b,
strong {
	font-weight: 600;
}

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

:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* Dark surfaces: white focus rings (HANDOFF §5.1). */
.hero,
.site-header,
.drawer,
.site-footer,
.on-dark {
	--focus-color: var(--color-white);
}

/* Graphite sections (the founder band): white text, concrete-mid secondary text, white rules
   (oxide never sits on graphite, HANDOFF §3). */
.on-dark {
	background: var(--color-graphite);
	color: var(--color-white);
}

.on-dark :is(h1, h2, h3) {
	color: var(--color-white);
}

.on-dark .eyebrow {
	color: var(--color-concrete-mid);
}

.on-dark .rule {
	background: var(--color-white);
}

.skip-link {
	position: absolute;
	top: 0;
	left: var(--margin);
	z-index: 100;
	padding: 1rem 1.75rem;
	background: var(--color-white);
	color: var(--color-graphite);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--motion-header-duration) var(--ease);
}

.skip-link:focus-visible {
	transform: none;
	--focus-color: var(--color-graphite);
}

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

/* ---------- Type styles (HANDOFF §3) ---------- */

.eyebrow {
	font-family: var(--font-label);
	font-size: var(--font-size-eyebrow);
	font-weight: 600;
	line-height: var(--line-height-eyebrow);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
}

.button-text {
	font-family: var(--font-label);
	font-size: var(--font-size-button);
	font-weight: 600;
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-button);
	text-transform: uppercase;
}

.small {
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

.body {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

.lead {
	font-size: var(--font-size-lead);
	line-height: var(--line-height-lead);
}

.quote {
	font-size: var(--font-size-quote);
	line-height: var(--line-height-quote);
}

.display,
.menu-link,
.figure,
.number {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0;
}

.display {
	font-size: var(--font-size-display);
	line-height: var(--line-height-display);
	text-transform: uppercase;
}

/* The H3 style on text that isn't a heading (the founder's name). */
.h3 {
	font-family: var(--font-display);
	font-size: var(--font-size-h3);
	font-weight: 700;
	line-height: var(--line-height-h3);
	letter-spacing: 0;
	text-transform: uppercase;
}

.menu-link {
	font-size: var(--font-size-menu);
	line-height: var(--line-height-menu);
	text-transform: uppercase;
}

.figure {
	font-size: var(--font-size-figure);
	line-height: var(--line-height-figure);
}

.number {
	font-size: var(--font-size-number);
	line-height: var(--line-height-number);
	color: var(--color-oxide);
}

/* Rules: the 48 × 2 white hero rule and the 24 × 2 oxide rule under eyebrows. */
.rule {
	display: block;
	width: var(--space-48);
	height: 2px;
	background: var(--color-oxide);
}

.rule--white {
	background: var(--color-white);
}

.rule--short {
	width: var(--space-24);
}

/* ---------- Layout ---------- */

.container {
	max-width: var(--layout-wide);
	margin-inline: auto;
	padding-inline: var(--margin);
}

.section {
	padding-block: var(--space-section);
}

.section--concrete {
	background: var(--color-concrete);
}

/* Two white blocks in a row share one padding between them, not two (the owner's note of 2026-10-11: 224–256 px
   between, for example, Home's Our approach band and the value cards). Bands of colour keep their own. */
:is(.section, .crm-teaser):not(.section--concrete, .on-dark) + .section:not(.section--concrete, .on-dark) {
	padding-top: 0;
}

/* The company's name is bold wherever it appears in the text (the owner's note of 2026-10-11); the build
   wraps it (bin/build-site.mjs, brandNames). In headings, already 700, it stays as it is. */
.brand-name {
	font-weight: 700;
}

/*
 * The Structure (brand-geometry §3) behind the founder band and the footer: fading in from the
 * right at 6%, drifting slowly on scroll (.drift, motion.js). The parent clips it; the extra 8%
 * above and below leaves room for the drift.
 */
.structure {
	position: absolute;
	inset: -8% 0;
	background: url("../brand/structure/bibgroup-structure-c-fade.svg") right top / cover no-repeat;
	opacity: var(--structure-opacity-light);
	pointer-events: none;
	will-change: transform;
}

/* Section heading (Figma 33:293): an optional eyebrow, the 48 × 2 oxide rule, the H2, 16 apart. */
.section-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

.section-heading .eyebrow {
	color: var(--color-steel);
}

.on-dark .section-heading .eyebrow {
	color: var(--color-concrete-mid);
}

/* The H2 is at most 7 columns wide (Figma's component sets 760), so a long one wraps as designed (C.3). */
.section-heading h2 {
	max-width: calc((var(--layout-content) + var(--gutter)) * 7 / 12 - var(--gutter));
}

/*
 * Split (H.2, A.3; Figma 14:132, 12:48): the text in columns 1–6, the 4:5 image with Facet l in
 * columns 8–12, both from the top. One column below 1024, text first (HANDOFF §8).
 */
.split {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--space-48) var(--gutter);
	align-items: start;
}

/* Stacked below 1024, the text keeps its desktop measure: half the content width (628 at 1440). */
.split__text {
	grid-column: 1 / span 6;
	max-width: calc((var(--layout-content) - var(--gutter)) / 2);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-48);
}

.split__body {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.split__media {
	grid-column: 8 / span 5;
}

.split__image {
	--facet: var(--facet-l);
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.split {
		grid-template-columns: minmax(0, 1fr);
	}

	.split__text,
	.split__media {
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	.split,
	.split__text {
		gap: var(--space-24);
	}
}

/* ---------- Facet (HANDOFF §5.1) ---------- */

.facet {
	clip-path: polygon(0 0, calc(100% - var(--facet)) 0, 100% calc(var(--facet) * 0.57735), 100% 100%, 0 100%);
}

/* ---------- Cards (value cards, management cards; Figma 39:325, 39:338) ---------- */

/* White, a 1 px concrete-mid border that follows the Facet m cut (an even-odd ring layer, as on the
   outlined buttons, so the diagonal is cut, not folded; HANDOFF §5.1), padding 32. The fill and ring are
   layers, so the cut never clips the card's content or focus rings. */
.card {
	--facet: var(--facet-m);
	--bw: 1px;
	--fi: calc(var(--facet) - 0.732 * var(--bw));
	--card-bg: var(--color-white);
	--card-ring: var(--color-concrete-mid);
	position: relative;
	isolation: isolate;
	padding: var(--space-32);
}

/* Management cards (K.3, HANDOFF §5.12): concrete, no border. */
.card--concrete {
	--card-bg: var(--color-concrete);
	--card-ring: transparent;
}

.card::before,
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.card::before {
	background: var(--card-bg);
	clip-path: polygon(0 0, calc(100% - var(--facet)) 0, 100% calc(var(--facet) * 0.57735), 100% 100%, 0 100%);
}

.card::after {
	background: var(--card-ring);
	clip-path: polygon(
		evenodd,
		0 0,
		calc(100% - var(--facet)) 0,
		100% calc(var(--facet) * 0.57735),
		100% 100%,
		0 100%,
		0 0,
		var(--bw) var(--bw),
		calc(100% - var(--bw) - var(--fi)) var(--bw),
		calc(100% - var(--bw)) calc(var(--bw) + var(--fi) * 0.57735),
		calc(100% - var(--bw)) calc(100% - var(--bw)),
		var(--bw) calc(100% - var(--bw)),
		var(--bw) var(--bw)
	);
}

/* ---------- Buttons (Figma 32:297) ---------- */

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

.button {
	--facet: var(--facet-s);
	--bw: 1.5px;
	--fi: calc(var(--facet) - 0.732 * var(--bw));
	--btn-bg: var(--color-graphite);
	--btn-fg: var(--color-white);
	--btn-ring: transparent;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--space-48);
	padding: 0 1.75rem;
	background: transparent;
	color: var(--btn-fg);
	font-family: var(--font-label);
	font-size: var(--font-size-button);
	font-weight: 600;
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-button);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border: 0;
	border-radius: 0;
	transition: color var(--motion-header-duration) var(--ease);
}

/* Fill layer, cut with the Facet; the focus outline is drawn on the unclipped link, so it stays visible. */
.button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-bg);
	clip-path: polygon(0 0, calc(100% - var(--facet)) 0, 100% calc(var(--facet) * 0.57735), 100% 100%, 0 100%);
	transition: background-color var(--motion-header-duration) var(--ease);
}

/* Ring layer for outlined buttons: an even-odd polygon, so the diagonal is cut, not folded. Each ring
   closes on itself and the two meet along one corner segment traced out and back; joining them with
   two different edges would cross the left side and cut its border into an hourglass. */
.button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-ring);
	clip-path: polygon(
		evenodd,
		0 0,
		calc(100% - var(--facet)) 0,
		100% calc(var(--facet) * 0.57735),
		100% 100%,
		0 100%,
		0 0,
		var(--bw) var(--bw),
		calc(100% - var(--bw) - var(--fi)) var(--bw),
		calc(100% - var(--bw)) calc(var(--bw) + var(--fi) * 0.57735),
		calc(100% - var(--bw)) calc(100% - var(--bw)),
		var(--bw) calc(100% - var(--bw)),
		var(--bw) var(--bw)
	);
}

.button:hover {
	--btn-bg: var(--color-steel);
}

.button--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--color-graphite);
	--btn-ring: var(--color-graphite);
}

.button--secondary:hover {
	--btn-bg: var(--color-graphite);
	--btn-fg: var(--color-white);
}

.button--on-dark-primary {
	--btn-bg: var(--color-white);
	--btn-fg: var(--color-graphite);
}

.button--on-dark-primary:hover {
	--btn-bg: var(--color-concrete);
}

.button--on-dark-secondary {
	--btn-bg: transparent;
	--btn-fg: var(--color-white);
	--btn-ring: var(--color-white);
}

.button--on-dark-secondary:hover {
	--btn-bg: var(--color-white);
	--btn-fg: var(--color-graphite);
}

/* Below 768 buttons are full width (HANDOFF §8); the row stretches even inside a flex-start column. */
@media (max-width: 767px) {
	.actions {
		align-self: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.button {
		width: 100%;
	}
}

/* Text links ("Learn more"): Button style plus a decorative arrow. */
.text-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-label);
	font-size: var(--font-size-button);
	font-weight: 600;
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-button);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-graphite);
}

.text-link__arrow {
	transition: transform var(--motion-header-duration) var(--ease);
}

.text-link:hover .text-link__text {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.text-link:hover .text-link__arrow {
	transform: translateX(4px);
}

/* ---------- Logo ---------- */

.site-logo {
	display: inline-block;
	line-height: 0;
}

.site-logo__svg {
	height: 40px;
	width: auto;
}

/* The header's logo (the owner asked twice for it bigger than Figma's 40): 72 over a hero, 12 clear above
   and below in the 96 px header, shrinking to 56 in the solid header's 72 px; 48 on phones, where the
   header stays 64. */
.site-header .site-logo__svg {
	height: 72px;
	transform-origin: left center;
	transition: transform var(--motion-header-duration) var(--ease);
}

.site-header.is-solid .site-logo__svg {
	transform: scale(calc(56 / 72));
}

/* The footer's logo is the header's size (the owner's note of 2026-10-11; 40 until then, Figma): 72, 48 on phones. */
.site-logo--footer .site-logo__svg {
	height: 72px;
}

@media (max-width: 767px) {
	.site-header .site-logo__svg,
	.site-header.is-solid .site-logo__svg {
		height: 48px;
		transform: none;
	}

	.site-logo--footer .site-logo__svg {
		height: 48px;
	}
}

/* ---------- Header (HANDOFF §5.2, Figma 38:314) ---------- */

.site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 50;
	height: var(--header-height);
	color: var(--color-white);
	transition:
		height var(--motion-header-duration) var(--ease),
		background-color var(--motion-header-duration) var(--ease);
}

.site-header__fade {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--header-fade-height);
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--color-graphite) calc(var(--header-fade-opacity) * 100%), transparent),
		transparent
	);
	pointer-events: none;
	transition: opacity var(--motion-header-duration) var(--ease);
	/* Only on the logo's side: the black menu button on the right reads on the photo itself. */
	-webkit-mask-image: linear-gradient(to right, #000 40%, transparent 60%);
	mask-image: linear-gradient(to right, #000 40%, transparent 60%);
}

/* A hero whose picture is dark behind the menu button (.hero--dark: Contacts' dusk shot, and Home, whose
   video has deep-blue skies there): the button stays white, over the full-width fade, since black would not
   read. The fade's 80 % over 220 px (theme.json) is what keeps the white labels at 4.5:1 over the video's
   palest frames too (measured on every clip, 2026-10-06). */
body:has(.hero--dark) .site-header__fade {
	-webkit-mask-image: none;
	mask-image: none;
}

body:has(.hero--dark) .site-header:not(.is-solid) .menu-button {
	--focus-color: var(--color-white);
	color: var(--color-white);
}

.site-header.is-solid {
	height: var(--header-height-solid);
	background: var(--color-graphite);
}

.site-header.is-solid .site-header__fade {
	opacity: 0;
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	max-width: var(--layout-wide);
	margin-inline: auto;
	padding-inline: var(--margin);
}

/* The menu button, top right: the icon and label black over a hero, as the owner asked (graphite, the
   palette's black), with a matching focus ring; white on the solid graphite header, where black wouldn't show. */
.menu-button {
	--focus-color: var(--color-graphite);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin-block: -14px;
	color: var(--color-graphite);
	transition: color var(--motion-header-duration) var(--ease);
}

.site-header.is-solid .menu-button {
	--focus-color: var(--color-white);
	color: var(--color-white);
}

.menu-button__icon {
	display: block;
	width: 24px;
	height: 16px;
	position: relative;
}

.menu-button__icon span {
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: currentColor;
}

.menu-button__icon span:nth-child(1) { top: 0; }
.menu-button__icon span:nth-child(2) { top: 7px; }
.menu-button__icon span:nth-child(3) { top: 14px; }

/* ---------- Language switch (six languages, 2026-09-29; not in Figma yet) ---------- */

/* Left of the menu button, in its colours: the current language's code and a chevron. */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-32);
}

.language {
	position: relative;
}

.language__button {
	--focus-color: var(--color-graphite);
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-width: 44px;
	min-height: 44px;
	margin-block: -14px;
	color: var(--color-graphite);
	transition: color var(--motion-header-duration) var(--ease);
}

.site-header.is-solid .language__button,
body:has(.hero--dark) .site-header:not(.is-solid) .language__button {
	--focus-color: var(--color-white);
	color: var(--color-white);
}

.language__chevron {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--motion-header-duration) var(--ease);
}

.language__button[aria-expanded="true"] .language__chevron {
	transform: translateY(2px) rotate(-135deg);
}

/* The list: a graphite panel under the button, right-aligned, Facet s top right. Each language in its own
   name; the current one white and bold, the others concrete-mid. */
.language__list {
	--focus-color: var(--color-white);
	position: absolute;
	top: calc(100% + var(--space-16));
	right: 0;
	min-width: 13rem;
	margin: 0;
	padding: var(--space-8) 0;
	list-style: none;
	background: var(--color-graphite);
	clip-path: polygon(0 0, calc(100% - var(--facet-s)) 0, 100% calc(var(--facet-s) * var(--facet-ratio)), 100% 100%, 0 100%);
}

.language__list:not([hidden]) {
	animation: language-in var(--motion-header-duration) var(--ease);
}

@keyframes language-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

.language__link {
	display: block;
	padding: 10px var(--space-24);
	color: var(--color-concrete-mid);
	font-size: var(--font-size-body);
	text-decoration: none;
	outline-offset: -4px;
}

.language__link:hover {
	color: var(--color-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.language__link[aria-current] {
	color: var(--color-white);
	font-weight: 600;
}

@media (max-width: 767px) {
	.site-header__actions {
		gap: var(--space-16);
	}
}

@media (prefers-reduced-motion: reduce) {
	.language__list:not([hidden]) {
		animation: none;
	}

	.language__chevron {
		transition: none;
	}
}

@media (max-width: 767px) {
	.site-header,
	.site-header.is-solid {
		height: var(--header-height-mobile);
	}
}

/* ---------- Drawer (HANDOFF §5.3, Figma 38:315) ---------- */

.drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--motion-backdrop);
	-webkit-backdrop-filter: blur(var(--motion-backdrop-blur));
	backdrop-filter: blur(var(--motion-backdrop-blur));
	opacity: 0;
	transition: opacity var(--motion-drawer-close) var(--ease);
}

.drawer-backdrop.is-open {
	opacity: 1;
	transition-duration: var(--motion-drawer-open);
}

.drawer-backdrop[hidden],
.drawer[hidden] {
	display: none;
}

/* From the right, the side of the menu button (the owner's change of 2026-09-28; HANDOFF §5.3 had the left). */
.drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: flex;
	flex-direction: column;
	width: max(40vw, 480px);
	padding: var(--space-32) var(--space-48) 80px;
	overflow-y: auto;
	background: var(--color-graphite);
	color: var(--color-white);
	transform: translateX(100%);
	transition: transform var(--motion-drawer-close) var(--ease);
}

.drawer.is-open {
	transform: none;
	transition-duration: var(--motion-drawer-open);
}

.drawer__texture {
	position: absolute;
	inset: 0;
	background: var(--texture-l) center / cover no-repeat;
	opacity: 0.25;
	pointer-events: none;
}

.drawer > :not(.drawer__texture) {
	position: relative;
}

/* Top right, where the menu button was. */
.drawer__close {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: -14px 0;
}

.drawer__close-x {
	font-size: 1rem;
	line-height: 1;
}

.drawer__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 132px;
}

.drawer__link {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
	text-decoration: none;
	transition: transform var(--motion-header-duration) var(--ease);
}

.drawer__number {
	color: var(--color-concrete-mid);
	padding-top: 1px;
}

.drawer__text {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.is-current .drawer__number {
	color: var(--color-white);
}

.is-current .drawer__text {
	border-bottom-color: var(--color-white);
}

/* The 24 px Cell that draws in before a hovered or focused link. */
.drawer__cell {
	position: absolute;
	top: calc(var(--line-height-menu) / 2 - 12px);
	left: -40px;
	width: 24px;
	height: 24px;
}

.drawer__cell polygon {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset var(--motion-line-draw) var(--ease);
}

.drawer__link:hover,
.drawer__link:focus-visible {
	transform: translateX(8px);
}

.drawer__link:hover .drawer__cell polygon,
.drawer__link:focus-visible .drawer__cell polygon {
	stroke-dashoffset: 0;
}

.drawer__contact {
	margin-top: auto;
	padding-top: var(--space-48);
	max-width: 480px;
	color: var(--color-concrete-mid);
}

.drawer__contact a {
	text-decoration: none;
}

.drawer__contact a:hover {
	text-decoration: underline;
}

/* Links rise in after the panel, 0.05 s apart. */
.drawer__item {
	opacity: 0;
	transform: translateY(var(--motion-reveal-distance));
	transition:
		opacity var(--motion-reveal-duration) var(--ease),
		transform var(--motion-reveal-duration) var(--ease);
}

.drawer.is-open .drawer__item {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--motion-drawer-open) * 0.5 + var(--i, 0) * var(--motion-drawer-link-stagger));
}

html.drawer-open body {
	overflow: hidden;
	padding-right: var(--scrollbar-w, 0px);
}

html.drawer-open .site-header {
	padding-right: var(--scrollbar-w, 0px);
}

@media (max-width: 767px) {
	.drawer {
		width: 100%;
		padding: var(--space-24) var(--space-24) var(--space-48);
	}

	.drawer__texture {
		background-image: var(--texture-s);
	}

	.drawer__list {
		margin-top: 96px;
		padding-left: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.drawer,
	.drawer-backdrop {
		transform: none;
		opacity: 0;
		transition: opacity 0.2s linear;
	}

	.drawer.is-open,
	.drawer-backdrop.is-open {
		opacity: 1;
		transition-duration: 0.2s;
	}

	.drawer__item,
	.drawer.is-open .drawer__item {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.drawer__link:hover,
	.drawer__link:focus-visible {
		transform: none;
	}
}

/* ---------- Contact block (HANDOFF §5.13, Figma 15:289 / 67:630) ---------- */

/* On every page, white: the details in columns 1–5 and the form in columns 7–12, the map 64 below both.
   Below 1024 they stack 48 apart, keeping the split measure (628 at 1440); the map is 48 below on mobile. */
.contact-block__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-64);
}

.contact-block__columns {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--space-48) var(--gutter);
	align-items: start;
}

/* Four label/value groups, 32 apart: the label in Eyebrow steel, the value in Body 8 below it. The phone and
   email are links, underlined on hover only, like the team cards'. */
.contact-details {
	grid-column: 1 / span 5;
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	margin: 0;
}

.contact-details__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.contact-details dt {
	color: var(--color-steel);
}

.contact-details dd {
	margin: 0;
}

.contact-details a {
	text-decoration: none;
	text-decoration-thickness: from-font;
	text-underline-position: from-font;
}

.contact-details a:hover {
	text-decoration-line: underline;
}

/* The form: the title (H3), then the fields, the consent line and Send, all 24 apart. */
.contact-form {
	grid-column: 7 / span 6;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
}

/* A field (Figma 34:312): the label in Eyebrow steel, 8 above a 48 tall input with a 1 px steel line (steel,
   not Figma's concrete-mid: HANDOFF §1) that turns graphite and 2 px on focus. No placeholders. */
.form__field {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.form__label {
	color: var(--color-steel);
}

/* "(optional)" after Phone: Small, steel, on the label's line. */
.form__optional {
	font-family: var(--font-body);
	font-weight: 400;
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.form__input {
	display: block;
	width: 100%;
	height: var(--space-48);
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--color-steel);
	border-radius: 0;
	background: transparent;
	color: var(--color-graphite);
	font: inherit;
	appearance: none;
	transition:
		border-color var(--motion-header-duration) var(--ease),
		box-shadow var(--motion-header-duration) var(--ease);
}

/* Your message: 144 tall (HANDOFF §5.13), the first line set in a little from the top. */
.form__textarea {
	height: calc(3 * var(--space-48));
	padding-block: var(--space-8);
	resize: vertical;
}

/* The line thickens inward, so nothing moves. */
.form__input:focus {
	outline: none;
	border-bottom-color: var(--color-graphite);
	box-shadow: inset 0 -1px 0 var(--color-graphite);
}

.form__input:autofill {
	box-shadow: inset 0 0 0 100vmax var(--color-white);
	-webkit-text-fill-color: var(--color-graphite);
}

.form__input:autofill:focus {
	box-shadow: inset 0 -1px 0 var(--color-graphite), inset 0 0 0 100vmax var(--color-white);
}

/* Errors under their fields, and the failure message: Small, oxide (HANDOFF §3). */
.form__error,
.form__failure {
	color: var(--color-oxide);
}

.form__consent {
	color: var(--color-steel);
}

.form__consent a,
.contact-map__note a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.form .button[aria-disabled="true"] {
	cursor: progress;
}

/* The success message takes the form's place and receives focus; it isn't interactive, so no ring. */
.form__success:focus {
	outline: none;
}

/* The map (HANDOFF §5.13, now a Google Maps embed): "Headquarters office" and the address line, 8 apart,
   then the map, 360 tall (240 on mobile), concrete until Google's tiles arrive. */
.contact-map {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.contact-map__label,
.contact-map__line {
	color: var(--color-steel);
}

.contact-map__frame {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
	background: var(--color-concrete);
}

/* Until the visitor asks for the map (map.js): the same concrete box, with a graphite Cell for the pin,
   the note about Google and the Show map button, centred. It grows if its text needs more room. */
.contact-map__consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-24);
	min-height: 360px;
	padding: var(--space-32) var(--margin);
	background: var(--color-concrete);
	text-align: center;
}

.contact-map__cell {
	width: var(--space-48);
	height: auto;
}

.contact-map__note {
	max-width: 32rem;
}

@media (max-width: 1023px) {
	.contact-block__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.contact-details,
	.contact-form {
		grid-column: auto;
		max-width: calc((var(--layout-content) - var(--gutter)) / 2);
	}
}

@media (max-width: 767px) {
	.contact-block__inner {
		gap: var(--space-48);
	}

	.contact-details,
	.contact-form {
		max-width: none;
	}

	.contact-map__frame {
		height: 240px;
	}

	.contact-map__consent {
		min-height: 240px;
		gap: var(--space-16);
		padding-block: var(--space-24);
	}
}

/* ---------- Footer (HANDOFF §5.14, Figma 64:652) ---------- */

.site-footer {
	position: relative;
	overflow: hidden;
	padding: var(--space-96) 0 var(--space-48);
	background: var(--color-graphite);
	color: var(--color-white);
}

.site-footer__structure {
	bottom: 45%; /* Figma: the Structure stops above the navigation row */
}

.site-footer__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	max-width: var(--layout-wide);
	margin-inline: auto;
	padding-inline: var(--margin);
}

.site-footer__row--1 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gutter);
}

/* The logo, then the address, phone and email under it, in the text's colour; the links white on hover. */
.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	color: var(--color-concrete-mid);
	font-style: normal;
}

.site-footer__contact a {
	text-decoration: none;
}

.site-footer__contact a:hover {
	color: var(--color-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.site-footer__text {
	width: calc(50% - var(--gutter) / 2);
	color: var(--color-concrete-mid);
}

.site-footer__row--2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-32);
	min-height: 40px;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-32);
}

.site-footer__links a {
	display: inline-block;
	padding-block: 12px;
	text-decoration: none;
}

.site-footer__links a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.site-footer__row--3 {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.site-footer__rule {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: color-mix(in srgb, var(--color-concrete-mid) 30%, transparent);
}

.site-footer__legal {
	color: var(--color-concrete-mid);
}

/* The legal line, with the privacy policy link at the right end (left-aligned under it when they don't fit). */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-8) var(--space-32);
}

.site-footer__privacy {
	color: var(--color-concrete-mid);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.site-footer__privacy:hover,
.site-footer__privacy[aria-current] {
	color: var(--color-white);
}

@media (max-width: 767px) {
	.site-footer {
		padding: 72px 0 var(--space-32);
	}

	.site-footer__inner {
		gap: var(--space-32);
	}

	.site-footer__row--1 {
		flex-direction: column;
		gap: var(--space-32);
	}

	.site-footer__brand {
		gap: var(--space-24);
	}

	.site-footer__text {
		width: 100%;
	}

	.site-footer__row--2 {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-24);
	}

	.site-footer__links {
		gap: var(--space-24);
	}
}

/* ---------- Motion system (HANDOFF §5.15) ---------- */

@keyframes draw-line {
	from {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}

	to {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
	}
}

/* Hidden-until-revealed only once motion.js has taken over, and never with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.motion-ready .reveal:not(.is-visible) > * {
		opacity: 0;
		transform: translateY(var(--motion-reveal-distance));
	}

	/* --reveal-offset lets a second group continue the stagger (the principles' right column). */
	.motion-ready .reveal > * {
		transition:
			opacity var(--motion-reveal-duration) var(--ease),
			transform var(--motion-reveal-duration) var(--ease);
		transition-delay: calc((var(--i, 0) + var(--reveal-offset, 0)) * var(--motion-stagger));
	}

	/* Oxide rules in a revealed group draw from the left (line-draw). */
	.motion-ready .reveal .rule {
		transform-origin: left center;
		transition: transform var(--motion-line-draw) var(--ease);
		transition-delay: calc(var(--i, 0) * var(--motion-stagger));
	}

	.motion-ready .reveal:not(.is-visible) .rule {
		transform: scaleX(0);
	}

	/* Image wipe (H.2, A.3): the image is uncovered from the bottom up, over 0.9 s (the line-draw token).
	   Both ends are inset() shapes: a shape doesn't interpolate to `none`. */
	.motion-ready .wipe {
		clip-path: inset(0);
		transition: clip-path var(--motion-line-draw) var(--ease);
	}

	.motion-ready .wipe:not(.is-visible) {
		clip-path: inset(100% 0 0 0);
	}

	/* Cells draw their outlines (line-draw), a stagger apart (.draw groups: the pillars, the value-card
	   icons). Only the hexagons (polygons) draw; an icon inside its Cell stays. The SVGs are inlined with
	   pathLength="1" (@svg … pathlength). The dash only exists while drawing, so the finished outline
	   keeps its mitred corner where the path starts. */
	.motion-ready .draw:not(.is-visible) polygon {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}

	.motion-ready .draw.is-visible polygon {
		animation: draw-line var(--motion-line-draw) var(--ease) backwards;
		animation-delay: calc(var(--i, 0) * var(--motion-stagger));
	}

	/* Fade only (the founder portrait). */
	.motion-ready .fade-in {
		transition: opacity var(--motion-reveal-duration) var(--ease);
	}

	.motion-ready .fade-in:not(.is-visible) {
		opacity: 0;
	}

	/* Line by line (the founder quote): motion.js splits the text into its rendered lines when it
	   comes into view; each line rises in turn, then the original markup is put back. */
	.motion-ready .reveal-lines:not(.is-visible) {
		opacity: 0;
	}

	.reveal-lines__line {
		display: block;
	}

	.motion-ready .reveal-lines .reveal-lines__line {
		transition:
			opacity var(--motion-reveal-duration) var(--ease),
			transform var(--motion-reveal-duration) var(--ease);
		transition-delay: calc(var(--i, 0) * var(--motion-stagger));
	}

	.motion-ready .reveal-lines.is-splitting .reveal-lines__line {
		opacity: 0;
		transform: translateY(var(--motion-reveal-distance));
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.structure {
		transform: none !important;
	}
}