/*
 * Hidden Edge Studio: site styles.
 * Brand (locked 15 Oct 2026): Unbounded headings, Outfit reading text at
 * line-height 1.2 and weight 200 (locked by the owner, 18 Oct 2026), IBM Plex Mono labels. Charcoal #1A1A1A on #F2F0EF,
 * oxblood #5C1A1B for buttons and small accents only.
 * Phone first: 16px gutter, no horizontal scroll, 44px tap targets.
 */

/* ---------- Fonts (self-hosted, no third-party host) ---------- */

@font-face {
	font-family: "Unbounded";
	src: url("../fonts/Unbounded-Variable.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("../fonts/Outfit-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
	--he-bg: #F2F0EF;
	--he-bg-alt: #E9E6E4;
	--he-ink: #1A1A1A;
	--he-ox: #5C1A1B;
	--he-ox-hover: #6F2022;
	/* Lighter oxblood tint for mono labels on dark photos: see the contrast note on .he-label--tint. */
	--he-tint: #DD7578;
	--he-mute: #4A4543;
	--he-rule: #CFCAC7;
	--he-on-dark: #F2F0EF;
	--he-on-dark-mute: #D9D5D3;
	--he-field-border: #6B6563;
	--he-error: #9A1B1B;

	--he-display: "Unbounded", system-ui, -apple-system, "Segoe UI", sans-serif;
	--he-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	--he-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--he-gutter: 16px;
	--he-max: 1280px;
}

@media (min-width: 700px) {
	:root {
		--he-gutter: 32px;
	}
}

@media (min-width: 1100px) {
	:root {
		--he-gutter: 56px;
	}
}

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

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

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

html.he-nav-open,
html.he-nav-open body {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--he-bg);
	color: var(--he-ink);
	font-family: var(--he-body);
	font-size: 1.0625rem;
	font-weight: 200;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

.he-page {
	position: relative;
}

img,
picture {
	display: block;
	max-width: 100%;
	height: auto;
}

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

h1,
h2,
h3 {
	text-wrap: balance;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:focus-visible {
	outline: 3px solid var(--he-ink);
	outline-offset: 3px;
}

.he-on-dark :focus-visible {
	outline-color: var(--he-on-dark);
}

.he-main:focus {
	outline: none;
}

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

.he-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100000;
	padding: 12px 18px;
	background: var(--he-bg);
	color: var(--he-ink);
	font-weight: 600;
	text-decoration: none;
	border-radius: 2px;
}

.he-skip:focus {
	top: 16px;
}

.he-skip:focus-visible {
	outline: 3px solid var(--he-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--he-bg);
}

.he-wrap {
	width: 100%;
	max-width: var(--he-max);
	margin-inline: auto;
	padding-inline: var(--he-gutter);
}

/* ---------- Labels, headings, buttons ---------- */

.he-label {
	margin: 0 0 18px;
	font-family: var(--he-mono);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--he-ox);
}

/*
 * Lighter oxblood tint for mono labels on the darkened photos. WCAG contrast of
 * #DD7578 is 5.71:1 on flat charcoal. Measured on the real photo under the
 * overlays below, as rendered at 320, 390, 768, 1024, 1440 and 1920px wide
 * (brightest pixel behind each text box, text hidden so only the photo and
 * scrims remain). Worst cases: label 4.57:1 (1024px), AA needs 4.5:1; hero h1
 * 10.81:1, sub line 8.41:1, outline button text 11.89:1 and its border 6.67:1
 * (needs 3:1); logo 3.18:1, needs 3:1.
 */
.he-label--tint {
	color: var(--he-tint);
}

@media (min-width: 768px) {
	.he-label {
		letter-spacing: 0.2em;
	}
}

.he-h2 {
	font-family: var(--he-display);
	font-weight: 800;
	font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.he-h3 {
	font-family: var(--he-display);
	font-weight: 800;
	font-size: 1.1875rem;
	line-height: 1.2;
}

/*
 * Buttons lean 9.09 degrees forward, the angle of the Hidden Edge lettering and mark. The SHAPE
 * leans and the label stays upright: a skewed ::before carries the fill, the border and the focus
 * ring. It is inset 5px a side because the skew pushes each corner out by about 4.3px at the 54px
 * hero height, so the corners stay inside the button's own box and never pass the page gutter.
 * The extra 6px of side padding keeps the leaning edges clear of the label.
 */
.he-btn,
.he-button {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 32px;
	border: 0;
	background: transparent;
	font-family: var(--he-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.he-btn::before,
.he-button::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 5px;
	border: 1px solid transparent;
	border-radius: 2px;
	background: transparent;
	transform: skewX(-9.09deg);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.he-btn--ox,
.he-button {
	color: var(--he-on-dark);
}

.he-btn--ox::before,
.he-button::before {
	background: var(--he-ox);
}

.he-btn--ox:hover::before,
.he-button:hover::before {
	background: var(--he-ox-hover);
}

.he-btn--line {
	color: var(--he-on-dark);
	font-weight: 500;
}

.he-btn--line::before {
	border-color: rgba(242, 240, 239, 0.7);
}

.he-btn--line:hover::before {
	border-color: var(--he-on-dark);
	background: rgba(242, 240, 239, 0.1);
}

/* The focus ring is drawn on the leaning shape, so it follows the lean. */
.he-btn:focus-visible,
.he-button:focus-visible {
	outline: none;
}

.he-btn:focus-visible::before,
.he-button:focus-visible::before {
	outline: 3px solid var(--he-ink);
	outline-offset: 3px;
}

.he-on-dark .he-btn:focus-visible::before {
	outline-color: var(--he-on-dark);
}

.he-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 12px;
	color: var(--he-ox);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.he-link:hover {
	color: var(--he-ink);
}

/* ---------- Header and navigation ---------- */

.he-header {
	position: relative;
	z-index: 50;
	background: var(--he-ink);
	color: var(--he-on-dark);
}

.he-page--home .he-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.he-header__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	padding-block: 14px;
}

.he-logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.he-logo img {
	width: auto;
	height: 26px;
}

.he-nav {
	flex-basis: 100%;
}

.he-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.he-nav a:not(.he-btn) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 2px;
	color: var(--he-on-dark);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
}

.he-nav a:not(.he-btn):hover {
	text-decoration: underline;
}

.he-nav a[aria-current="page"]:not(.he-btn) {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

.he-nav .he-btn[aria-current="page"]::before {
	box-shadow: inset 0 -3px 0 var(--he-tint);
}

/* The menu button only shows when the script that drives it is running. */
.he-nav-toggle {
	display: none;
}

.he-nav-toggle {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--he-on-dark);
	cursor: pointer;
}

.he-nav-toggle__bars,
.he-nav-toggle__bars::before,
.he-nav-toggle__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.he-nav-toggle__bars {
	position: relative;
}

.he-nav-toggle__bars::before,
.he-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.he-nav-toggle__bars::before {
	top: -7px;
}

.he-nav-toggle__bars::after {
	top: 7px;
}

.he-nav-toggle[aria-expanded="true"] .he-nav-toggle__bars {
	background: transparent;
}

.he-nav-toggle[aria-expanded="true"] .he-nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.he-nav-toggle[aria-expanded="true"] .he-nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Windows high contrast: backgrounds are replaced, so the bars take the button text colour. */
@media (forced-colors: active) {
	.he-nav-toggle__bars,
	.he-nav-toggle__bars::before,
	.he-nav-toggle__bars::after {
		background: ButtonText;
		forced-color-adjust: none;
	}

	/* The leaning shape is not drawn: the button gets a plain border on the element itself. */
	.he-btn,
	.he-button {
		border: 1px solid ButtonText;
	}

	.he-btn::before,
	.he-button::before {
		display: none;
	}

	.he-btn:focus-visible,
	.he-button:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 3px;
	}
}

/* Phone menu: once nav.js has run, the links live in a full-screen panel. */
@media (max-width: 879.98px) {
	.he-nav-ready .he-header__in {
		flex-wrap: nowrap;
	}

	.he-nav-ready .he-nav-toggle {
		display: inline-flex;
	}

	.he-nav-ready .he-nav-toggle[aria-expanded="true"] {
		position: fixed;
		top: 14px;
		right: var(--he-gutter);
		z-index: 2;
	}

	.he-nav-ready .he-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: block;
		padding: 88px var(--he-gutter) 32px;
		overflow-y: auto;
		background: var(--he-ink);
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	.he-nav-ready .he-nav.is-open {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.2s ease;
	}

	.he-nav-ready .he-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.he-nav-ready .he-nav a:not(.he-btn) {
		display: flex;
		min-height: 60px;
		padding: 0;
		border-bottom: 1px solid rgba(242, 240, 239, 0.18);
		font-size: 1.375rem;
	}

	.he-nav-ready .he-nav__cta {
		margin-top: 28px;
	}

	.he-nav-ready .he-nav__cta .he-btn {
		width: 100%;
	}
}

/* Signed-in preview: the admin bar is 46px tall up to 782px wide, 32px above. */
@media (max-width: 782px) {
	.he-nav-ready .admin-bar .he-nav {
		top: 46px;
	}

	.he-nav-ready .admin-bar .he-nav-toggle[aria-expanded="true"] {
		top: 60px;
	}
}

@media (min-width: 783px) and (max-width: 879.98px) {
	.he-nav-ready .admin-bar .he-nav {
		top: 32px;
	}

	.he-nav-ready .admin-bar .he-nav-toggle[aria-expanded="true"] {
		top: 46px;
	}
}

@media (min-width: 880px) {
	.he-header__in {
		flex-wrap: nowrap;
		padding-block: 22px;
	}

	.he-logo img {
		height: 34px;
	}

	.he-nav {
		flex-basis: auto;
	}

	.he-nav__list {
		gap: 0 30px;
	}

	.he-nav__cta {
		margin-left: 4px;
	}

	.he-nav .he-btn {
		min-height: 46px;
		padding: 11px 26px;
	}
}

/* ---------- Home hero ---------- */

.he-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--he-ink);
	color: var(--he-on-dark);
}

.he-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.he-hero__media picture {
	width: 100%;
	height: 100%;
}

.he-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Phone overlay: a scrim behind the header only, so the photo shows through the middle. */
.he-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(26, 26, 26, 0.7) 0, rgba(26, 26, 26, 0) 170px);
}

.he-hero__in {
	position: relative;
	padding-top: 120px;
	padding-bottom: 40px;
}

/* Phone: a scrim that rides with the text block, whatever the screen height. It starts 100px above the label
   and is dense by the label itself, which is the tint colour and needs the darkest ground. */
.he-hero__in::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 20px;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0, rgba(26, 26, 26, 0.6) 60px, rgba(26, 26, 26, 0.94) 100px, rgba(26, 26, 26, 0.95) 100%);
}

.he-hero__h1 {
	max-width: 14.2em;
	font-family: var(--he-display);
	font-weight: 800;
	font-size: clamp(1.625rem, 1rem + 3.6vw, 4.25rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--he-on-dark);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
	text-wrap: balance;
}

.he-hero__sub {
	max-width: 34em;
	margin: 20px 0 28px;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	color: var(--he-on-dark-mute);
}

.he-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.he-actions .he-btn {
	width: 100%;
}

.he-hero .he-btn {
	min-height: 54px;
	padding: 16px 34px;
}

@media (min-width: 600px) {
	.he-actions {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px;
	}

	.he-actions .he-btn {
		width: auto;
	}
}

/*
 * The inline nav starts at 880px but the desktop scrim below starts at 1000px, so from 880 to 999px the
 * nav links sat on the phone scrim, which fades from 0.7 to nothing over 170px and let the bright desk
 * through (worst pixel behind a link box: "What we make" 2.82:1 at 880, 920 and 999px; AA needs 4.5:1).
 * Here the top scrim holds at 0.8 through the first 100px, then fades out by 190px.
 * Measured again, worst (brightest) pixel behind each 44px link box over the hero still, text hidden, 900px
 * tall viewport, light text #F2F0EF (before, then now): "What we make" 2.82 then 8.67 at 880px, 2.83 then
 * 8.67 at 920px, 2.83 then 8.67 at 999px; "Our work" 3.69 then 9.51 at 880px, 5.48 then 9.66 at 920px,
 * 5.16 then 9.55 at 999px. Over the moving hero video (900 to 999px wide, frames at 0, 2, 4 and 5.5s) the
 * lowest is 8.53:1. From 1000px the desktop scrim is unchanged: 7.05:1 or better.
 */
@media (min-width: 880px) and (max-width: 999.98px) {
	.he-hero::before {
		background: linear-gradient(180deg, rgba(26, 26, 26, 0.8) 0, rgba(26, 26, 26, 0.8) 100px, rgba(26, 26, 26, 0) 190px);
	}
}

/*
 * The studio-desk photo is bright (a cream desk), so the text needs a strong scrim.
 * Phones and tablets up to 999px keep the bottom text scrim above, which is denser here than on
 * the uk home page because this photo is bright. From 1000px the text sits on the left over a dark
 * band that stays dark for the widest line of text (the sub line, 34em, ends near 780px, or just
 * past the middle of a wide screen), then fades to show the photo on the right. The band starts
 * where the text column starts, so it holds on a wide screen too.
 */
@media (min-width: 1000px) {
	.he-hero {
		justify-content: center;
		min-height: clamp(620px, 86vh, 820px);
	}

	.he-hero__img {
		object-position: center 60%;
	}

	/* Desktop overlay: top scrim for the nav, strong on the left for the text. */
	.he-hero::before {
		background:
			linear-gradient(180deg, rgba(26, 26, 26, 0.45) 0, rgba(26, 26, 26, 0) 160px),
			linear-gradient(90deg, rgba(26, 26, 26, 0.93) max(0px, calc(50% - 640px)), rgba(26, 26, 26, 0.86) max(800px, calc(50% + 140px)), rgba(26, 26, 26, 0.25) 100%);
	}

	.he-hero__in {
		padding-top: 150px;
		padding-bottom: 96px;
	}

	.he-hero__in::before {
		display: none;
	}

	.he-hero__sub {
		margin: 26px 0 34px;
	}
}

/* ---------- Inner page band ---------- */

.he-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 44px 0 48px;
	background: var(--he-ink);
	color: var(--he-on-dark);
}

.he-band__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.he-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.he-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(26, 26, 26, 0.93) 0%, rgba(26, 26, 26, 0.84) 55%, rgba(26, 26, 26, 0.72) 100%);
}

.he-band--plain::before {
	display: none;
}

.he-band__h1 {
	max-width: 18em;
	font-family: var(--he-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 1rem + 2.6vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--he-on-dark);
}

.he-band__lead {
	max-width: 34em;
	margin-top: 18px;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	color: var(--he-on-dark-mute);
}

@media (min-width: 900px) {
	.he-band {
		padding: 72px 0 76px;
	}
}

/* ---------- Sections ---------- */

.he-section {
	padding: 52px 0;
}

.he-section--alt {
	background: var(--he-bg-alt);
}

@media (min-width: 900px) {
	.he-section {
		padding: 88px 0;
	}
}

/* ---------- What we make: four plain cards ---------- */

.he-cards__list {
	display: grid;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.he-card {
	padding-top: 18px;
	border-top: 1px solid var(--he-rule);
}

.he-card__title {
	margin: 0 0 8px;
	font-family: var(--he-display);
	font-weight: 800;
	font-size: 1.1875rem;
	line-height: 1.2;
}

.he-card p {
	max-width: 34em;
	font-size: 1.0625rem;
	color: var(--he-mute);
}

.he-cards__list--make {
	margin-top: 8px;
}

@media (min-width: 640px) {
	.he-cards__list--make {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 40px;
	}
}

@media (min-width: 1040px) {
	.he-cards__list--make {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 40px;
	}
}

/* ---------- Our own work: four rows with the mark as a small motif ---------- */

.he-work {
	display: grid;
	gap: 28px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.he-work__item {
	padding-top: 18px;
	border-top: 1px solid #CBC6C3;
}

.he-work__mark {
	width: 21px;
	height: 28px;
	margin-bottom: 14px;
}

.he-work__item p {
	max-width: 36em;
	font-size: 1.0625rem;
	color: var(--he-mute);
}

@media (min-width: 760px) {
	.he-work {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 56px;
		margin-top: 40px;
	}
}

/* ---------- Contact and the form (markup comes from he_contact_form) ---------- */

.he-contact {
	display: grid;
	gap: 36px;
}

.he-contact__intro .he-h2 {
	margin-bottom: 14px;
}

.he-contact__mail {
	font-family: var(--he-display);
	font-weight: 700;
	font-size: clamp(1rem, 0.85rem + 1vw, 1.5rem);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.he-contact__mail a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

@media (min-width: 900px) {
	.he-contact {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 64px;
		align-items: start;
	}
}

.he-form {
	display: grid;
	gap: 22px;
	max-width: 40rem;
}

.he-field {
	display: block;
}

.he-label-text,
.he-form .he-label,
.he-field .he-label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--he-body);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	color: var(--he-ink);
}

.he-input,
.he-textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--he-field-border);
	border-radius: 2px;
	background: #FFFFFF;
	color: var(--he-ink);
	font-family: var(--he-body);
	font-size: 1.125rem;
	font-weight: 200;
	line-height: 1.3;
}

.he-textarea {
	min-height: 168px;
	resize: vertical;
}

.he-input:focus-visible,
.he-textarea:focus-visible {
	border-color: var(--he-ink);
	outline: 3px solid var(--he-ink);
	outline-offset: 2px;
}

.he-input[aria-invalid="true"],
.he-textarea[aria-invalid="true"] {
	border: 2px solid var(--he-error);
}

.he-hint {
	margin-top: 6px;
	font-size: 0.9375rem;
	color: var(--he-mute);
}

.he-error {
	margin-top: 6px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--he-error);
}

.he-button {
	justify-self: start;
	padding: 13px 34px;
}

@media (max-width: 599.98px) {
	.he-button {
		justify-self: stretch;
	}
}

/* The one line under the form that says where the details go. The link keeps a 44px tap area. */
.he-privacy-line {
	max-width: 40rem;
	margin-top: 18px;
	font-size: 0.9375rem;
	color: var(--he-mute);
}

.he-privacy-line a {
	display: inline-block;
	margin-block: -13px;
	padding-block: 13px;
	color: var(--he-ink);
	text-decoration: underline;
}

.he-notice {
	margin-bottom: 24px;
	padding: 16px 18px;
	border-left: 4px solid var(--he-ink);
	background: var(--he-bg-alt);
	font-size: 1.0625rem;
}

.he-notice--ok {
	border-left-color: #2D5A3A;
	background: #E4EEE6;
}

.he-notice--error {
	border-left-color: var(--he-error);
	background: #F6E7E7;
}

/* Honeypot: off screen, never display:none, so bots still see it. */
.he-hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Privacy and plain pages ---------- */

.he-legal > * {
	max-width: 44rem;
}

.he-legal h2,
.he-legal .he-h3 {
	margin: 40px 0 12px;
	font-family: var(--he-display);
	font-weight: 800;
	font-size: 1.1875rem;
	line-height: 1.2;
}

.he-legal h2:first-child {
	margin-top: 0;
}

.he-legal p {
	margin-bottom: 1em;
	font-size: 1.125rem;
}

/* Links inside sentences get a 44px tap area without moving the text. */
.he-legal a {
	display: inline-block;
	margin-block: -11px;
	padding-block: 11px;
	text-decoration: underline;
}

.he-legal__updated {
	margin-top: 40px;
	font-family: var(--he-mono);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--he-mute);
}

/* ---------- Footer ---------- */

.he-footer {
	padding: 52px 0 32px;
	background: var(--he-ink);
	color: var(--he-on-dark-mute);
}

.he-footer a {
	color: var(--he-on-dark);
}

.he-footer__grid {
	display: grid;
	gap: 28px;
}

.he-footer__tag {
	margin-top: 10px;
	font-family: var(--he-mono);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--he-on-dark-mute);
}

.he-footer__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.he-footer__nav a,
.he-footer__mail a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.he-footer__mail {
	font-size: 1.125rem;
	font-weight: 500;
}

.he-footer__sister {
	margin-top: 10px;
	font-size: 1rem;
	line-height: 1.3;
}

/* The link inside the sentence gets a 44px tap area without moving the text. */
.he-footer__sister a {
	display: inline-block;
	margin-block: -11px;
	padding-block: 11px;
	font-weight: 500;
	text-decoration: underline;
}

.he-footer__legal {
	margin-top: 36px;
	max-width: var(--he-max);
}

/* The rule lives inside the wrap's side padding, so it lines up with the text column above it. */
.he-footer__legal::before {
	content: "";
	display: block;
	margin-bottom: 24px;
	border-top: 1px solid rgba(242, 240, 239, 0.18);
}

.he-footer__legal p {
	max-width: 52em;
	margin-bottom: 8px;
	font-size: 0.9375rem;
	color: #BDB8B6;
}

@media (min-width: 860px) {
	.he-footer__grid {
		grid-template-columns: 1.3fr 1fr 1fr;
		gap: 48px;
	}
}

/* ---------- Motion ---------- */

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