/* ==========================================================================
   Terms, 404 and Contact

   Three small templates that share nothing with the wedding pages, so they get
   their own sheet rather than swelling one of those.
   ========================================================================== */

/* ==========================================================================
   Terms — sticky title panel beside the editorial content
   ========================================================================== */

.legal {
	position: relative;
	padding-bottom: var(--space-64);
	background-color: var(--c-white);
}

.legal__inner {
	display: grid;
	gap: var(--space-32);
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
}

/*
 * Full-bleed to the left edge, as the design has it: the panel runs off the
 * side of the frame rather than sitting inside the container gutter.
 */
.legal__panel {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	padding: var(--space-32) var(--gutter);
	overflow: hidden;
	isolation: isolate;
	color: var(--c-white);
	background-color: var(--c-primary-900);
}

.legal__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.legal__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Flat, unlike the heroes — measured row by row inside the panel itself (the
 * banner is a left column here, so sampling the full width lands half in the
 * white copy), the frame holds a steady 0.70 top to bottom on both widths.
 */
.legal__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.7);
}

.legal__heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.legal__title {
	margin: 0;
	color: var(--c-white);
}

.legal__updated {
	margin: 0;
	/* 16/20 in the frame (51314:4534), not the 14/21 it used to run at. */
	font-size: var(--fs-body-md);
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.85);
}

/*
 * 16/24, not 14/21 — JE-120. The word "Welcome" measures 72px in the Terms
 * export; rendered here it is 73px at 16 and 64 at 14, and the export's line
 * pitch is 24, which is 16 x the --lh-body already set below. See
 * docs/type-scale-audit.md: --fs-body-sm is for labels and meta, not prose.
 */
.legal__body {
	padding-inline: var(--gutter);
	color: var(--c-body);
	font-size: var(--fs-body-md);
	line-height: var(--lh-body);
}

.legal__body > * + * {
	margin-top: 1em;
}

/* Numbered section headings, in the display face as the design sets them. */
.legal__body :is(h2, h3) {
	margin-top: var(--space-40);
	margin-bottom: var(--space-16);
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	line-height: var(--lh-display);
	color: #1d1d1e;
}

/*
 * 28 at 428, 32 at 1440 — the mobile frame sets these headings on a 34px line
 * (51360:6956 is one line in 34, 51360:6974 two in 68), i.e. 28 on the same 1.2.
 * It was a flat 32, which ran 4px over on a phone.
 *
 * 32px at the top of the ramp, and tracked normally — JE-120, measured on two words of "1. Acceptance
 * of Terms" in the Terms export: "Acceptance" is 164px and "Terms" 87px, and
 * only 32px at letter-spacing normal reproduces both (164 and 88). The
 * --ls-display tracking that used to apply here left each word short.
 *
 * Written as a literal rather than a token on purpose. This used to read
 * `var(--fs-display-md, 1.75rem)`, but --fs-display-md is not defined in
 * tokens.css and is not in the Figma variable set either — the scale runs
 * display-lg 24 straight to display-2xl 48, so 32 has no rung, and a token
 * named "md" sitting above "lg" would be worse than none. The undefined name
 * was silently rendering at its fallback. See docs/type-scale-audit.md.
 */
.legal__body h2 {
	font-size: clamp(1.75rem, 1.6442rem + 0.3953vw, 2rem);
	letter-spacing: normal;
}

/* Unmeasured — no h3 appears in the Terms frame, so its tracking is left as it
   was rather than assumed to follow h2. */
.legal__body h3 {
	font-size: var(--fs-body-xl);
	letter-spacing: var(--ls-display);
}

.legal__body ul {
	margin-left: var(--space-24);
	padding: 0;
	list-style: disc;
}

.legal__body li + li {
	margin-top: var(--space-8);
}

.legal__body a {
	color: var(--c-link);
}

/*
 * This one is not prose, so the two rules above are scoped off it: `.legal__body
 * ul` was indenting it 24px past the paragraphs, and `li + li` was pushing the
 * email 8px below the phone on the row they share. Both selectors outrank a bare
 * `.legal__contact`, hence the descendant form here.
 *
 * The frame sets both gaps: 48 between the two items side by side on the 1440
 * one, 16 between them stacked on the 428 one (51360:6995).
 */
.legal__body .legal__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-48);
	row-gap: var(--space-16);
	margin: var(--space-32) 0 0;
	padding: 0;
	list-style: none;
}

.legal__body .legal__contact li + li {
	margin-top: 0;
}

.legal__contact li {
	display: flex;
	align-items: center;
	/* 20px icon at 522 in the frame, label at 556 — a 14px gap, not 8. */
	gap: 14px;
}

.legal__contact .icon {
	width: 20px;
	height: 20px;
	color: var(--c-primary-500);
}

/*
 * inline-flex with a floor so these clear the 24px touch minimum.
 *
 * 14 on a phone, 16 from 64em: the 428 frame measures the two labels at 87 and
 * 187 (51360:6999, 51360:7005) against 99 and 214 on the 1440 one — the same
 * strings at 14 and at 16. The floor keeps the tap target either way.
 */
.legal__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-body);
	text-decoration: none;
}

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

@media (min-width: 64em) {
	/* Panel 451 of the 1440 frame, content beside it. */
	.legal__inner {
		grid-template-columns: 31.32% minmax(0, 1fr);
		gap: var(--space-64);
		align-items: start;
	}

	.legal__panel {
		position: sticky;
		/* Stops below the sticky bar rather than under it. The compact height is
		   the right one: anything far enough down the page to pin this panel has
		   already put the header in its scrolled state. */
		top: var(--header-h-stuck);
		min-height: 650px;
		padding: var(--space-48);
	}

	.legal__body {
		padding-block: var(--space-64);
		padding-right: var(--gutter-lg);
		padding-left: 0;
	}

	.legal__contact a {
		font-size: var(--fs-body-md);
	}
}

/* ==========================================================================
   404
   ========================================================================== */

.error404 {
	position: relative;
	padding-block: var(--space-64) 120px;
	background-color: #efefef;
	text-align: center;
}

.error404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/*
 * The oval photo is the 0 of "404", so the three sit as one row and the photo
 * has to match the numerals' height — at 1440 the frame draws the digits 375
 * tall against a 380-tall oval. The build had them at 235 against 375, which is
 * what made it read as "4 [a photograph] 4" instead of as a number.
 */
.error404__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 43 between glyph and oval on the 1440 frame but only 17 on the 428 one -
	 * the narrow frame closes the figure up so all three still fit the 380
	 * container. A flat gap overflowed 428 by 8px.
	 */
	gap: clamp(12px, 6px + 2.57vw, 44px);
	margin: 0;
	color: var(--c-primary-500);
	line-height: 0.8;
}

/*
 * Ramped between the two frames rather than set once: the digits' ink is 375
 * tall on the 1440 frame and 153 on the 428 one, and Nyght Serif's lining
 * figures are 0.727 of the em, so that is 516 and 210. A single vw value cannot
 * hit both - 35.8vw lands 1440 and undershoots 428 by a third.
 */
.error404__digit {
	font-family: var(--font-display);
	font-size: clamp(7rem, 80.6px + 30.24vw, 32.25rem);
	font-weight: var(--fw-regular);
}

.error404__oval {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: clamp(90px, 47px + 16.6vw, 286px); /* 118 on the 428 frame, 286 on the 1440 */
	aspect-ratio: 286 / 380;
	overflow: hidden;
	border-radius: 50%;
}

.error404__oval :is(img, video) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The 0's ring, laid over the photo. Not a wash over the whole oval: differenced
 * against the source asset scaled to the same 286x380 box, the frame's counter
 * matches the raw photo to 1.000 per channel while the rim is flat and
 * hard-edged, and the clean counter widens as it descends. Fitting an ellipse to
 * the rows that fall on plain sky and plain grass — the only rows where photo
 * detail cannot bias the boundary — puts the counter's semi-axes at 88 x 188 in
 * that box, i.e. 30.8% x 49.5% of it, concentric with the oval. The rim is
 * therefore 55px thick at the sides and ~2px at top and bottom.
 *
 * Two readings were open: a neutral ring, or the teal numeral itself drawn over
 * the photo. Measured across 273 rim pixels on plain sky the multiplier is
 * R 0.7997 / G 0.7999 / B 0.7996 — flat to three decimals, i.e. exactly
 * rgba(0,0,0,.2). Teal at any alpha would have *raised* G and B against that sky
 * (0.20 alpha predicts R 0.856 / G 1.008 / B 1.011), so it is the neutral ring.
 * The teal that was reported at the top of the oval is the sky itself darkened:
 * (160,177,189) x 0.8 = (128,142,151), a slate that reads teal-ish out of
 * context.
 *
 * The radii are fractions of the gradient box, not of its half-size. The first
 * pass read the fitted 61.5% x 99% of the *semi-axes* as CSS percentages and
 * wrote 64% 98%, which asks for an ellipse of 183 x 372 — larger than the oval,
 * so the transparent centre covered essentially the whole photo and the ring
 * never painted. That is what made it look like a missing overlay rather than a
 * faint one.
 */
.error404__oval::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: radial-gradient(
		ellipse 30.8% 49.5% at 50% 50%,
		rgba(0, 0, 0, 0) 99.4%,
		rgba(0, 0, 0, 0.2) 99.8%
	);
	pointer-events: none;
}

.error404__title {
	margin: 0;
	color: #1d1d1e;
}

.error404__text {
	max-width: 600px;
	margin: 0;
	color: var(--c-body);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
}

.error404__link {
	margin-top: var(--space-16);
}

/* ==========================================================================
   Contact
   ========================================================================== */

/*
 * The photo is boxed by the 24px gutter on a phone, so it takes the same 24 off
 * the header rather than butting straight up against the bar. From 64em the
 * desktop rule below replaces this with the frame's 64.
 */
.contact-intro {
	padding-top: var(--space-24);
	padding-bottom: var(--space-64);
	background-color: var(--c-white);
}

.contact-intro__inner {
	display: grid;
	gap: var(--space-32);
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
}

/*
 * Boxed at 428, full-bleed from 64em. The 428 frame insets the photo by the
 * 24 gutter so it lines up with the copy under it (x 24..403 of 428); the 1440
 * frame runs it off the left edge instead (x 0..709). It was full-bleed at both,
 * which left the photo hanging outside the copy's margin on a phone.
 */
.contact-intro__media {
	margin: 0;
	padding-inline: var(--gutter);
}

.contact-intro__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 700 / 760;
	object-fit: cover;
}

.contact-intro__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
	padding-inline: var(--gutter);
}

.contact-intro__title {
	margin: 0;
	color: var(--c-primary-500);
}

/*
 * 16/24, not 14/21. The frame's paragraph (51284:9789) is a 558 box 240 tall
 * over ten lines — a 24px pitch — and at 16 its first line measures 544 and the
 * next word takes it to 573, i.e. it wraps exactly where the frame wraps. At 14
 * the line would run three words longer. Same --fs-body-sm-as-prose slip the
 * type audit documents; docs/type-scale-audit.md: 14 is for labels and meta.
 */
.contact-intro__text {
	color: var(--c-body);
	font-size: var(--fs-body-md);
	line-height: var(--lh-body);
}

.contact-intro__text p + p {
	margin-top: 1em;
}

/*
 * 20/600, not 18/400, on a 39px row pitch. Measured off the frame's own render
 * of 51284:9790 (295x97, 1:1): the three lines ink out at 266, 122 and 171 wide
 * and sit 39 apart. Across those three strings 20px semibold reproduces them to
 * 3.1px total (264.7 / 121.0 / 170.2); the next best pairing, 20px medium, is
 * off by 8.6 and 21px regular by 13.
 */
.contact-intro__details {
	display: flex;
	flex-direction: column;
	/* 39 pitch on a 30px line box. */
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-primary-500);
	font-size: var(--fs-body-xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
}

.contact-intro__details a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	color: inherit;
	text-decoration: none;
}

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

@media (min-width: 64em) {
	/* Photo runs to the left frame edge; copy sits in the container. */
	.contact-intro__inner {
		grid-template-columns: 49.3% minmax(0, 1fr);
		column-gap: var(--space-64);
		align-items: center;
	}

	/*
	 * Figma 51284:9782 → the photo is 710x769 sitting in a 897 band with 64px
	 * of air above and below it. The band only carried its lower 64, and the
	 * ratio here was cropping 140px off the picture.
	 *
	 * The photo also has to touch the left frame edge, and "the frame edge" is
	 * the screen, not the container. .contact-intro__inner is capped at the
	 * container plus its gutters and centred, which happens to equal the whole
	 * viewport at exactly 1440 — so this read as correct at the design width and
	 * only at the design width. From 1441 up the inner centres and took the
	 * photo inboard with it: 112px of white to its left at 1920, 368px at 2560.
	 *
	 * --contact-bleed is that slack. Same min()/100vw construction as the Add To
	 * The Experience rail and .split-band--bleed; as there, 100vw counts the
	 * scrollbar, so it can overshoot by half a scrollbar, which on a photo that
	 * is running off the edge anyway is invisible.
	 */
	.contact-intro {
		--contact-bleed: max(
			0px,
			calc((100vw - var(--container) - (var(--gutter) * 2)) / 2)
		);

		padding-top: var(--space-64);
	}

	/*
	 * The ratio sits on the figure, which stays exactly in its 49.3% track, so
	 * the band keeps the height the track gives it. Only the picture inside is
	 * widened by the bleed, and it crops into it rather than growing the
	 * section: hanging the ratio on the widened box instead would have taken
	 * the photo to 1372 tall at 2560 and left the copy floating in ~450px of
	 * white above and below.
	 *
	 * 2/3 is the contact photo's own ratio. The Figma band (710/769 = 0.923)
	 * was a landscape-ish crop of a portrait shot, so cover threw away 28% of
	 * the frame's width at 1440 and 36% at 1920 — taking the disco ball and
	 * the raised arm with it. Matching the picture's ratio leaves the bleed as
	 * the only thing cropping it: nothing at or below 1440, ~5% at 1600,
	 * ~12% at 1920.
	 */
	.contact-intro__media {
		padding-inline: 0;
		aspect-ratio: 2 / 3;
	}

	.contact-intro__media img {
		aspect-ratio: auto;
		/* base.css:123 caps every image at max-width: 100%, which silently
		   clamped the widened box straight back to the track width. */
		max-width: none;
		width: calc(100% + var(--contact-bleed));
		height: 100%;
		margin-left: calc(var(--contact-bleed) * -1);
	}

	.contact-intro__copy {
		max-width: 640px;
		padding-inline: 0 var(--gutter-lg);
	}
}

/* --- the form ------------------------------------------------------------ */

.contact-form {
	position: relative;
	padding-block: var(--space-64) 120px;
	padding-inline: var(--gutter);
	background-color: #efefef;
}

/*
 * Figma 51284:9782 → the card is 900 wide with 40px padding, giving an 820px
 * field row. At 594 the fields were 514 wide and the form ran 279px taller than
 * the frame, which is where the section's whole height overshoot came from.
 */
.contact-form__card {
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	padding: var(--space-32);
	background-color: var(--c-white);
	border-radius: 8px;
}

/*
 * Contact Form 7 markup. Styled by its own classes rather than by rewriting the
 * plugin's output, so a form edited in the admin keeps working.
 */
.contact-form .janda-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin-bottom: var(--space-24);
}

/*
 * The row is the thing on the 24px pitch, not the fields inside it — so the
 * margin moves from the nested fields onto the row. It had been zeroed on the
 * fields and never put back on the row, so the Email/Phone row was the only
 * one in the form with no pitch under it: box tops measured 115 apart
 * everywhere and 91 after this row, against a uniform 115 in the frame. That
 * missing 24 is also why the Email field's validation tip landed on top of the
 * "Where do you live?" label rather than merely close to it (#JE-50).
 */
.contact-form .janda-row {
	display: grid;
	gap: var(--space-16);
	margin-bottom: var(--space-24);
}

.contact-form .janda-row .janda-field {
	margin-bottom: 0;
}

.contact-form label {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	color: #1d1d1e;
}

/*
 * Field metrics come straight off Figma 51284:9782 (rows Frame 1984078215):
 * every row is 91 tall — a 27px label, a 12px gap and a 52px control — with a
 * 24px pitch between rows. CF7 emits `<label><br><span><input>`, so the <br>
 * was setting the label-to-control gap at a full 32px line and each row ran
 * 101. Laying the row out as a flex column and dropping the <br> puts the gap
 * under our control.
 */
.contact-form .janda-field p {
	margin: 0;
}

.contact-form .janda-field p br {
	display: none;
}

/*
 * CF7 wraps each control in an inline span, and the row has to measure exactly
 * 27 + 12 + 52 — so the wrap must not add the half-leading and baseline gap an
 * inline-level control leaves under itself.
 *
 * This was originally done with `line-height: 0` on the wrap, which does zero
 * the gap but takes the line box with it — and CF7 nests the control *and* its
 * `.wpcf7-not-valid-tip` inside this wrap, so everything downstream inherited a
 * zero line box: the textarea's typed rows collapsed to nothing (#JE-51, it
 * read as "the field won't accept typing"), the error tip occupied no flow
 * space and painted straight over the next label, and the date input's
 * ::-webkit-datetime-edit was clipped to a sliver (#JE-50).
 *
 * Making the control itself a block removes the inline formatting context
 * instead. The wrap then has no inline content to lead, so it still measures
 * the control's border box exactly, and every descendant keeps a real line box.
 */
.contact-form .wpcf7-form-control-wrap {
	display: block;
}

.contact-form .wpcf7-form-control-wrap > :is(input, select, textarea) {
	display: block;
}

/*
 * Block layout with an explicit margin rather than a flex gap: the <br> and the
 * whitespace either side of it perturb flex sizing, and the row has to land on
 * exactly 27 + 12 + 52.
 */
.contact-form .janda-field > p > label {
	display: block;
	margin-bottom: 12px;
	font-size: var(--fs-body-lg); /* 18 */
	font-weight: var(--fw-semibold);
	line-height: 27px;
}

/*
 * #JE-50 asks for a required marker. Keyed off the aria-required CF7 already
 * emits for a [text*]/[email*] tag rather than typed into the stored form body,
 * so the marker follows the form: make a field required in the CF7 admin and
 * the asterisk appears, drop the star from the tag and it goes. Nothing to keep
 * in sync, and an admin edit to the form cannot strip it.
 *
 * Decorative only — the input's own aria-required carries this to assistive
 * tech, so the glyph does not need to be in the accessible name.
 */
.contact-form .janda-field:has([aria-required="true"]) > p > label::after {
	content: "\00a0*";
	color: #b3261e;
	font-weight: var(--fw-regular);
}

.contact-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
	width: 100%;
	min-height: 52px;
	padding: 0.75rem 1rem;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	background-color: #fafafa;
	color: var(--c-body);
	font-family: inherit;
	font-size: var(--fs-body-md); /* 16/24 — the frame's placeholder style */
	line-height: 24px; /* the frame's 16/24; also what the date input's rows read */
}

/* Figma: placeholders are #a1a1a4. Mates Rates #MR-39 was raised for exactly
   this — a placeholder too dark to read as a placeholder. */
.contact-form :is(input, select, textarea)::placeholder {
	color: #a1a1a4;
	opacity: 1;
}

/*
 * The date control's rows are laid out by ::-webkit-datetime-edit, which takes
 * its line-height from the input. Under the old `line-height: 0` those rows had
 * no height and the yyyy/mm/dd was sliced to a sliver (#JE-50); the 24px above
 * restores them. Pinned here as well so a future edit to the shared control rule
 * cannot silently re-clip it.
 */
.contact-form input[type="date"]::-webkit-datetime-edit {
	line-height: 24px;
}

/*
 * #JE-50 also asks for the empty date to read grey like every other
 * placeholder. A date input has no ::placeholder — its empty yyyy/mm/dd is
 * ::-webkit-datetime-edit and takes the element's own `color`, so it renders at
 * the body dark and reads as an entered value.
 *
 * There is no CSS selector for "this date input is empty". Measured on the live
 * control: `value` stays "" in the attribute after the picker sets a date, so
 * [value=""] never flips; :valid is true both empty and filled while the field
 * is optional; and :in-range answers inconsistently on a date input with no
 * min/max. The only honest discriminators are making the field required (a
 * behaviour change nobody asked for) or a class toggled from script.
 *
 * A select's blank first option is the same problem in a different control:
 * CF7's include_blank renders "—Please choose an option—" as real option text,
 * which takes the select's own colour rather than any placeholder colour.
 *
 * So both are gated on .is-empty, which app.js sets (initEmptyFields).
 * Colouring either control grey unconditionally would drop entered values to
 * 2.5:1 on the #fafafa field, which trades a cosmetic defect for a contrast
 * failure.
 */
.contact-form :is(input[type="date"], select).is-empty {
	color: #a1a1a4;
}

.contact-form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--c-primary-500);
	outline-offset: 1px;
	border-color: var(--c-primary-500);
}

/* The frame draws a 120px box; CF7's rows attribute was rendering it at 236. */
.contact-form textarea {
	height: 120px;
	min-height: 120px;
	resize: vertical;
}

.contact-form .wpcf7-list-item {
	display: block;
	margin: 0 0 var(--space-8);
}

.contact-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-weight: var(--fw-regular);
}

.contact-form .wpcf7-checkbox {
	display: grid;
	gap: 0 var(--space-24);
}

.contact-form input[type="submit"] {
	display: block;
	min-width: 160px;
	margin-inline: auto;
	padding: 0.7rem 2rem;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--c-primary-500);
	color: var(--c-white);
	font-family: inherit;
	font-size: var(--fs-body-sm);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease);
}

.contact-form input[type="submit"]:hover,
.contact-form input[type="submit"]:focus-visible {
	background-color: var(--c-primary-800);
}

@media (min-width: 48em) {
	.contact-form .janda-row--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contact-form .wpcf7-checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.contact-form__card {
		padding: var(--space-40);
	}
}

/* ==========================================================================
   About
   ========================================================================== */

.about-values { padding-block: var(--space-64); background-color: var(--c-white); }

/* Measured off the frame: the photo starts at the container gutter (48) and
   runs to 679, the copy from 763 to 1392 — two equal 46.95% columns with a
   6.25% gap. Expressed as fractions of the 1344 container so the split holds
   above 1440 instead of the gap swallowing the slack. */
.about-values__inner {
	display: grid;
	gap: var(--space-32);
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.about-values__media { margin: 0; }

/*
 * #JE-32 — 380x340 on the 428 frame, 632x467 on the 1440 one. The 1440 ratio
 * was drawing at both widths, which left the phone's photo 281 tall against the
 * frame's 340. Measured off the page's own exports in Design Site QA/About us:
 * the mobile band runs 1529-1869 at a 380 column, the desktop one 1372-1839.
 */
.about-values__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 380 / 340;
	object-fit: cover;
}

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

.about-values__title { margin: 0; color: var(--c-primary-500); }

/* 18/150 in both frames — measured at a 27px line step against the build's 21,
   which is what left the band ~400px short of the frame on a phone. */
.about-values__text { color: var(--c-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.about-values__text p { margin: 0; }
.about-values__text p + p { margin-top: 1em; }

@media (min-width: 64em) {
	/* Photo runs to the left frame edge; copy sits in the container. */
	.about-values__inner {
		grid-template-columns: 46.95% minmax(0, 1fr); /* 631 / 1344 */
		column-gap: 6.25%; /* 84 / 1344 */
		align-items: center;
	}

	.about-values__media img {
		aspect-ratio: 632 / 467;
	}
}

/* --- philosophy / approach / promise ------------------------------------- */

.about-pillars { padding-block: var(--space-40) var(--space-64); background-color: var(--c-white); }

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

/* Rules measured at y 1966/2170/2376/2556 in the frame — rows of ~204. */
.about-pillars__row {
	display: grid;
	gap: var(--space-8);
	padding-block: var(--space-32);
	border-top: 1px solid #e6e6e6;
}

.about-pillars__row:last-child { border-bottom: 1px solid #e6e6e6; }

.about-pillars__title { margin: 0; color: var(--c-primary-500); }

/* 18/150 in both frames, like the Values copy above it — measured at a 27px
   line step in the frame against the build's 21. */
.about-pillars__text {
	margin: 0;
	color: var(--c-body);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
}

@media (min-width: 64em) {
	/* The rows share the values split, so the headings and the copy line up
	   with the photo and the paragraph above them. */
	.about-pillars__row {
		grid-template-columns: 46.95% minmax(0, 1fr);
		column-gap: 6.25%;
		align-items: start;
		padding-block: 70px;
	}

	/* The frame wraps this copy at ~1257, not at the column's full 1392. */
	.about-pillars__text {
		max-width: 500px;
	}
}

/* --- full-bleed photo band ----------------------------------------------- */

.about-band { display: block; line-height: 0; background-color: var(--c-primary-900); }

.about-band img {
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 470;
	object-fit: cover;
}


.about-pillars__text p { margin: 0 0 var(--space-16); }
.about-pillars__text p:last-child { margin-bottom: 0; }
.about-pillars__text strong { display: block; margin-bottom: var(--space-8); color: var(--c-black); font-weight: var(--fw-medium); }