/*
	Headland Earthworks
	Built to the brand system sheet: Montserrat, Ink / Cream / Stone / Slate.

	Tracking rules come straight from the sheet — display and subhead at +140
	(0.14em) uppercase, body and caption at zero. Body copy is never letterspaced.

	The palette has no accent colour, so emphasis is carried by weight, scale,
	and tonal contrast rather than hue.

	Montserrat is bundled in assets/fonts and self-hosted. OFL-1.1.
*/

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

:root {
	--ink:      var(--wp--preset--color--ink, #1E1E1D);
	--graphite: var(--wp--preset--color--graphite, #3F3F3D);
	--slate:    var(--wp--preset--color--slate, #6E6D6A);
	--steel:    var(--wp--preset--color--steel, #9A9995);
	--ash:      var(--wp--preset--color--ash, #DEDEDC);
	--white:    var(--wp--preset--color--white, #FFFFFF);
	--yellow:   var(--wp--preset--color--yellow, #FFC400);

	--font: var(--wp--preset--font-family--montserrat, Montserrat, system-ui, sans-serif);
	--track-display: 0.14em;

	--gutter: clamp(1.25rem, 5vw, 3.5rem);
	--rule: 1px solid var(--steel);

	/*
		Yellow is legible only against the dark grounds, so the focus ring
		flips: ink on light, yellow on ink.
	*/
	--focus: var(--ink);
	--focus-halo: var(--white);
}

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

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--focus-halo);
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: var(--white);
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

.wrap {
	width: 100%;
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 46rem; }

.section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.section + .section { border-top: var(--rule); }

/*
	Display type: uppercase at +140 tracking. Tracked caps eat horizontal
	space, so the measure is deliberately short and the leading is tight —
	caps have no descenders to collide.
*/
.section__title {
	font-size: clamp(1.5rem, 3.2vw, 2.375rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.2;
	margin: 0 0 1.25rem;
	max-width: 17ch;
}

.section__lead {
	max-width: 46ch;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--slate);
	margin: 0 0 2.5rem;
}

/* ---------- Eyebrow ---------- */

.eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--slate);
	margin: 0 0 1rem;
}
/* Stone fails contrast as text on cream, so light eyebrows only ever sit on ink. */
.eyebrow--light { color: var(--steel); }

/* Each phrase stays whole; only the group wraps. */
.eyebrow__part { white-space: nowrap; }

.eyebrow__tick {
	width: 1.75rem;
	height: 0;
	border-top: 1px solid currentColor;
	flex: none;
	opacity: 0.7;
}

@media (max-width: 34rem) {
	.eyebrow__tick { display: none; }
	.eyebrow { gap: 0.25rem 0.875rem; }
}

/* Direct yellow is permitted on the dark bands only. */
.hero .eyebrow__tick,
.closer .eyebrow__tick { border-color: var(--yellow); opacity: 1; }

/* ---------- Buttons ---------- */

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem 1.75rem;
	background: var(--yellow);
	color: var(--ink);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--yellow);
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.button:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

/*
	The filled yellow block carrying ink content is the container pattern,
	and it is the one yellow treatment that works on both grounds — ink on
	yellow is 10.4:1 either way. Everything else here stays neutral, which
	keeps the accent well under the 10% ceiling.
*/
.button--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.button--ghost:hover { background: var(--ink); color: var(--white); }

.button--ghost-light {
	background: transparent;
	color: var(--white);
	border-color: var(--steel);
	letter-spacing: 0.02em;
	text-transform: none;
	font-weight: 500;
	font-size: 1rem;
}
.button--ghost-light:hover {
	background: var(--white);
	color: var(--ink);
	border-color: var(--white);
}

/* ---------- Header ---------- */

.site-header {
	background: var(--white);
	border-bottom: var(--rule);
	position: sticky;
	top: 0;
	z-index: 40;
}

.site-header__inner {
	max-width: 76rem;
	margin-inline: auto;
	padding: 0.875rem var(--gutter);
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/*
	Wordmark. The two lines are width-matched in the real lockup, so the
	secondary line is tracked far wider than the primary. Values follow the
	sheet: +179 on HEADLAND, +340 on EARTHWORKS without the legal entity.
*/
.brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}

/*
	270px is the sheet's minimum for the horizontal lockup, so it is set at
	exactly that and never allowed to shrink below it. Where the header cannot
	afford the width, the mark replaces it rather than the lockup scaling down.
*/
.brand__lockup {
	width: 270px;
	height: auto;
	flex: none;
}
.brand__mark { display: none; }

/* Clear space equals the cap height of HEADLAND — about 13% of lockup height. */
.site-header__brand { padding-block: 0.5rem; }

.site-nav { margin-inline-start: auto; }

.site-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	text-decoration: none;
	padding-block: 0.5rem;
	border-bottom: 2px solid transparent;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	border-bottom-color: var(--ink);
}

.site-header__phone {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	line-height: 1.15;
}
.site-header__phone-label {
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--slate);
}
.site-header__phone-number {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.nav-toggle { display: none; }

@media (min-width: 56rem) {
	.site-header__inner {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"brand phone"
			"nav   nav";
		align-items: center;
		gap: 0.625rem 1.5rem;
		padding-block: 1rem 0;
	}
	.site-header__brand { grid-area: brand; }
	.site-header__phone { grid-area: phone; justify-self: end; }
	.site-nav { grid-area: nav; margin-inline-start: 0; }
	.site-nav__list { gap: 1.75rem; }
	.site-nav__list a { padding-block: 0.5rem 0.75rem; }
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	background: var(--ink);
	color: var(--white);
	padding-block: clamp(3.5rem, 10vw, 6.5rem) clamp(9rem, 16vw, 13rem);
	overflow: hidden;
	--focus: var(--yellow);
	--focus-halo: var(--ink);
}

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hero__title {
	font-size: clamp(1.875rem, 4.6vw, 3.5rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.16;
	margin: 0 0 0.875rem;
	max-width: 15ch;
}

/*
	Tagline, two treatments, both straight from the palette sheet.
	On ink it is direct yellow at 10.4:1. On the ash footer it becomes a
	filled container carrying ink content, because yellow as text or as a
	rule on a light ground is 1.6:1 and unreadable.
*/
.hero__tagline {
	margin: 0 0 1.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--yellow);
}

.hero__deck {
	max-width: 50ch;
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	line-height: 1.6;
	color: var(--steel);
	margin: 0 0 2.25rem;
}

/* Section cut through the ground. Echoes the landform inside the H mark. */
.strata {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: clamp(7rem, 13vw, 11rem);
	z-index: 1;
	pointer-events: none;
}
.strata__svg { width: 100%; height: 100%; }
.strata__organic { fill: var(--graphite); }
.strata__till    { fill: var(--slate); opacity: 0.85; }
.strata__ledge   { fill: var(--steel); opacity: 0.85; }
.strata__cut {
	fill: none;
	stroke: var(--white);
	stroke-width: 1.5;
	stroke-dasharray: 8 8;
	opacity: 0.7;
}
.strata__marks path { stroke: var(--yellow); stroke-width: 3; }

/*
	The section cut is a stand-in for a photograph of real ground. Once there
	is an actual photograph it is redundant, and the dashed limit line without
	its strata behind it reads as a stray rectangle. Hidden wholesale when a
	hero image is set; intact on any hero without one.
*/
.hero--image .strata { display: none; }

/* ---------- Service cards ---------- */

.cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: var(--rule);
	border-left: var(--rule);
	grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
	background: var(--white);
	border-right: var(--rule);
	border-bottom: var(--rule);
}

.card__link {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	height: 100%;
	padding: 1.75rem;
	text-decoration: none;
	transition: background-color 0.18s ease;
}
.card__link:hover { background: var(--ash); }

.card__media { margin: -1.75rem -1.75rem 0.5rem; }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.card__title {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.3;
	margin: 0;
}
.card__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--slate);
}
.card__more {
	margin-top: auto;
	padding-top: 1.25rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--ink);
}
.card__link:hover .card__more { text-decoration: underline; }

/* ---------- Process ---------- */

.section--process { background: var(--ash); }

.process {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}
@media (min-width: 52rem) {
	.process { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

.process__step {
	padding: 1.25rem 1.25rem 1.5rem 0;
	border-top: 1px solid var(--ink);
	margin-top: 1.5rem;
}
@media (min-width: 52rem) {
	.process__step { margin-top: 0; padding-right: 1.75rem; }
}

.process__number {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--track-display);
	color: var(--ink);
	margin-bottom: 0.75rem;
}

.process__title {
	min-height: 2.6em;
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.process__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	/* Slate on ash is 3.84:1 and fails; graphite on ash is 7.83:1. */
	color: var(--graphite);
}

/* ---------- Towns ---------- */

.towns {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0 1.5rem;
}
.towns__item {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-block: 0.5rem;
	border-bottom: var(--rule);
}

/* ---------- Page hero band ---------- */

/*
	Every page opens on an Ink band. With no image it is flat Ink; with one,
	an inline background-image plus scrim is written onto the same element,
	so the type treatment is identical either way and nothing shifts when an
	image is dropped in later.
*/
.page-hero {
	background: var(--ink);
	color: var(--white);
	padding-block: clamp(2.75rem, 7vw, 5rem);
	--focus: var(--yellow);
	--focus-halo: var(--ink);
}
.page-hero--image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.page-hero__title {
	font-size: clamp(1.625rem, 4vw, 2.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.2;
	margin: 0;
	max-width: 18ch;
}
.page-hero__deck {
	margin: 1.125rem 0 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ash);
	max-width: 50ch;
}

/* Hero image on the homepage sits behind the existing hero band. */
.hero--image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ---------- Address ---------- */

.site-address,
.site-footer__address {
	font-style: normal;
	display: block;
}
.site-address__line { display: block; }
.site-address {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.site-footer__address {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
}

/* ---------- Service + page bodies ---------- */

.page__header {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 3vw, 2rem);
}

.service__title, .page__title {
	font-size: clamp(1.625rem, 4vw, 2.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.2;
	margin: 0 0 1.25rem;
	max-width: 18ch;
}

.service__deck {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--slate);
	max-width: 50ch;
	margin: 0;
}

.service__media { margin-block: 1rem clamp(2rem, 5vw, 3.5rem); }
.service__media img { width: 100%; max-height: 32rem; object-fit: cover; }

.prose { padding-bottom: 2.5rem; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 {
	font-size: clamp(1.125rem, 2.4vw, 1.375rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.3;
	margin-top: 2.75rem;
}
.prose h3 {
	font-size: 1.0625rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	margin-top: 2rem;
}
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.5rem; }
.prose blockquote {
	margin-inline: 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--ink);
	font-size: 1.125rem;
}

/* ---------- Inline CTA ---------- */

.inline-cta {
	margin-block: 2.5rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--ash);
	border-left: 3px solid var(--ink);
}
.inline-cta__title {
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.3;
	margin: 0 0 0.75rem;
}
.inline-cta__text {
	margin: 0 0 1.5rem;
	color: var(--graphite);
}

/* ---------- Siblings / lists ---------- */

.siblings { margin-block: 3rem; padding-top: 2rem; border-top: var(--rule); }

.siblings__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 1.5rem;
}
.siblings__list a {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 3px;
}

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list__item { padding-block: 1.75rem; border-bottom: var(--rule); }
.post-list__title {
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.3;
	margin: 0 0 0.5rem;
}
.post-list__title a { text-decoration: none; }
.post-list__meta {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--slate);
	margin: 0 0 0.5rem;
}
.post-list__excerpt { margin: 0; color: var(--slate); }

.notice {
	padding: 1.25rem;
	background: var(--ash);
	border-left: 3px solid var(--slate);
	font-size: 0.9375rem;
}

.error-page { padding-block: clamp(3rem, 8vw, 6rem); }
.error-page .siblings__list { margin-block: 2rem; }

/* ---------- Closing CTA ---------- */

.closer {
	background: var(--ink);
	color: var(--white);
	padding-block: clamp(3.5rem, 9vw, 6rem);
	--focus: var(--yellow);
	--focus-halo: var(--ink);
}
.closer__inner {
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.closer__title {
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: 1.2;
	margin: 0 0 1rem;
	max-width: 15ch;
}
.closer__text {
	max-width: 48ch;
	color: var(--steel);
	margin: 0 0 2rem;
}

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

.site-footer {
	background: var(--ash);
	padding-top: clamp(2.5rem, 6vw, 4rem);
}
.site-footer__inner {
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
	.site-footer__inner { grid-template-columns: repeat(3, 1fr); }
}

.site-footer__name {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.179em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}
.site-footer__tagline {
	display: inline-block;
	margin: 0 0 1.125rem;
	padding: 0.4375rem 0.75rem;
	background: var(--yellow);
	color: var(--ink);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
}
.site-footer__heading {
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--graphite);
	margin: 0 0 1rem;
}
.site-footer__meta { margin: 0 0 0.25rem; font-size: 0.9375rem; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li + li { margin-top: 0.5rem; }
.site-footer__list a {
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.site-footer__list a:hover { border-bottom-color: var(--ink); }

.site-footer__base {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: var(--rule);
}
.site-footer__base p {
	max-width: 76rem;
	margin-inline: auto;
	padding: 1.25rem var(--gutter);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--graphite);
}


/* ---------- Contact and quote form ---------- */

.contact__direct {
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--ash);
	margin-bottom: 2.5rem;
}
.contact__lead { margin: 0 0 1rem; max-width: 44ch; }
.contact__phone {
	display: inline-block;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	line-height: 1.1;
}
.contact__phone:hover { text-decoration: underline; }
.contact__hours {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--graphite);
}

.quote { margin-block: 1rem 4rem; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.quote__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.quote__row {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 34rem) {
	.quote__row { grid-template-columns: 1fr 1fr; }
}

.quote__field { margin-bottom: 1.25rem; }

.quote label {
	display: block;
	margin-bottom: 0.4375rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
}
.quote__optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.02em;
	color: var(--slate);
	margin-left: 0.375rem;
}

.quote input,
.quote select,
.quote textarea {
	width: 100%;
	padding: 0.8125rem 0.875rem;
	background: var(--white);
	color: var(--ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	border: 1px solid var(--slate);
	border-radius: 0;
	transition: border-color 0.15s ease;
}
.quote input:hover,
.quote select:hover,
.quote textarea:hover { border-color: var(--ink); }
.quote input:focus,
.quote select:focus,
.quote textarea:focus { border-color: var(--ink); }
.quote textarea { resize: vertical; min-height: 8rem; }
.quote ::placeholder { color: var(--slate); opacity: 1; }

.quote [aria-invalid="true"] { border-width: 2px; border-color: var(--ink); }

.quote__error {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ink);
}
.quote__error::before { content: "\2191\00a0"; }

.quote__summary {
	padding: 1rem 1.25rem;
	margin-bottom: 1.75rem;
	background: var(--ash);
	border-left: 3px solid var(--ink);
	font-size: 0.9375rem;
	font-weight: 500;
}

.quote button { margin-top: 0.5rem; }

.quote__note {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	color: var(--slate);
	max-width: 46ch;
}

/* ---------- Instagram feed ---------- */

.feed { margin-top: 0.5rem; }
/* Plugin markup is not ours; contain it rather than restyle it. */
.feed img { display: block; }
.feed__link {
	margin: 1.75rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
}
.feed__link a { text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 3px; }

/* ---------- Social ---------- */

/*
	Ink on Ash is 12.4:1, so the icons are legible without leaning on the
	accent. Yellow here would push the accent past its ceiling for no gain.
	Targets are 44px so they are reachable on a phone with gloves on.
*/
.social {
	list-style: none;
	display: flex;
	gap: 0.25rem;
	margin: 1rem 0 0;
	padding: 0;
}
.social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -0.625rem;
	color: var(--ink);
	text-decoration: none;
	transition: color 0.15s ease;
}
.social__link:hover { color: var(--slate); }
.social__icon { display: block; }

/* ---------- Mobile navigation ---------- */

@media (max-width: 56rem) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		gap: 0.75rem 1rem;
	}

	.site-header__phone { order: 2; }

	.brand__lockup { display: none; }
	.brand__mark {
		display: block;
		height: 46px;
		width: auto;
		flex: none;
	}

	.nav-toggle {
		order: 3;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		appearance: none;
		-webkit-appearance: none;
		width: 3rem;
		height: 3rem;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 1px solid var(--ink);
		border-radius: 0;
		cursor: pointer;
	}
	.nav-toggle::before {
		content: "";
		width: 1.25rem;
		height: 1px;
		background: var(--ink);
		box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink);
	}
	.nav-toggle:checked { background: var(--ink); }
	.nav-toggle:checked::before { background: var(--white); box-shadow: none; }

	.site-nav {
		order: 4;
		grid-column: 1 / -1;
		display: none;
		margin-inline-start: 0;
	}
	.nav-toggle:checked ~ .site-nav { display: block; }

	.site-nav__list { flex-direction: column; gap: 0; padding-block: 0.5rem 1rem; }
	.site-nav__list li { border-top: var(--rule); }
	.site-nav__list a { display: block; padding-block: 0.9375rem; }
}

@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;
	}
}