/* ==========================================================================
   Contact Us — the directory and the form
   The phone number and email address are the headline: set huge on ruled
   directory lines and marked by the yellow, red and green petals. The form
   below is pinned at its corner by the fourth, navy petal, so the logo
   completes at the act of getting in touch. No CTA band: the page is the CTA.
   ========================================================================== */

/* masthead: shorter, so the directory starts sooner; navy behind the green */
main.t-contact .mast--compact { min-height: clamp(360px, 26vw, 500px); }
main.t-contact .mast__petal--b { background: var(--logo-navy); }
/* The chassis hangs A from the header, which on this short masthead runs it
   past its foot, where overflow:clip cuts it flat. Anchored to the foot
   instead, A bleeds off the right and the top. B hangs just below the
   running-head rule (header + the masthead's top padding + 4rem), so the
   rule never cuts it: like every secondary petal, it sits wholly beneath.
   At right 27vw it stays clear of the standfirst and of A; its drift only
   takes it further down. (≤1024 keeps the chassis corner.) */
@media (min-width: 1025px) {
	main.t-contact .mast__petal--a { top: auto; bottom: clamp(2rem, 3.3vw, 4rem); }
	main.t-contact .mast__petal--b {
		top: calc(var(--header-h) + clamp(1.5rem, 3.1vw, 3.75rem) + 4rem);
		bottom: auto;
		right: 27vw;
	}
}

/* 1. The directory ---------------------------------------------------------
   <dl>: each row is [label cols 1-3 | value cols 4-11 | mark col 12]. The
   label sits on the value's baseline, like a ledger. */
.dir-wrap { padding-top: clamp(2rem, 4vw, 5rem); }
.dir { margin: 0; }
.dir__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: baseline;
	padding: clamp(1.5rem, 2.5vw, 2.5rem) 0;
	border-top: var(--rule-strong);
}
.dir__row:last-child { border-bottom: var(--rule-strong); }
.dir__label { grid-column: 1 / 4; color: var(--body); }
.dir__dd {
	grid-column: 4 / -1;
	min-width: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--card-gap);
}
.dir__val {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.75rem;
	min-width: 0;
}
.dir__link,
.dir__addr {
	position: relative;
	display: inline-block;
	min-width: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-style: normal;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ink);
}
.dir__link--phone { font-size: clamp(1.875rem, 4.58vw, 5.5rem); white-space: nowrap; }  /* 88 @1920 */
.dir__link--email { font-size: clamp(1.375rem, 3.75vw, 4.5rem); overflow-wrap: anywhere; } /* 72 */
.dir__addr { font-size: var(--statement); line-height: 1.12; }                              /* 64 */

/* hover / focus: a 4px underline draws beneath the value */
.dir__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.1em;
	height: 4px;
	border-radius: 2px;
	background: var(--acc);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--ease-out);
}
.dir__link:hover::after,
.dir__link:focus-visible::after { transform: none; }

/* the mark: a 2px outline lozenge that turns and fills as you point at its row */
.dir__lz {
	--s: clamp(32px, 3.333vw, 64px);
	position: relative;
	flex: none;
	width: var(--s);
	aspect-ratio: 1;
	margin-inline: calc(var(--s) * 0.21);   /* the turned corners stay inside the column */
	border-radius: 22%;
	box-shadow: inset 0 0 0 2px var(--c);
	rotate: 45deg;
	transition: rotate 0.45s var(--ease-out);
}
.dir__lz::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--c);
	opacity: 0;
	scale: 0.5;
	transition: opacity 0.35s var(--ease-out), scale 0.35s var(--ease-out);
}
.dir__row:hover .dir__lz,
.dir__row:focus-within .dir__lz { rotate: 135deg; }
.dir__row:hover .dir__lz::after,
.dir__row:focus-within .dir__lz::after { opacity: 1; scale: 1; }
/* nothing to point with on touch screens: the petals are simply there */
@media (hover: none) {
	.dir__lz::after { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.dir__row:hover .dir__lz,
	.dir__row:focus-within .dir__lz { rotate: 45deg; }
}

/* Copy: JS-only. .btn's display would otherwise beat the UA's [hidden] */
.dir__copy { flex: none; }
.dir__copy[hidden] { display: none !important; }
.dir__ico {
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dir__ico--check { display: none; }
.dir__copy.is-copied { border-color: var(--green); background: var(--green-tint); }
.dir__copy.is-copied .dir__ico--copy { display: none; }
.dir__copy.is-copied .dir__ico--check { display: block; }

/* 2. Reach out: the form, pinned by the navy petal ------------------------ */
.reach__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: start;
}
.reach__head { grid-column: 1 / 6; }
.reach__ghost { display: block; width: 64px; height: 64px; margin-bottom: 1.5rem; color: #e8edfd; }
.reach__head h2 { margin: 0; font-size: var(--h2); line-height: 1.08; }
@media (min-width: 1024px) and (min-height: 760px) {
	.reach__head { position: sticky; top: var(--seam-t); }
}
.reach__form { grid-column: 7 / -1; position: relative; isolation: isolate; }
.reach__form .form { position: relative; z-index: 1; }
/* each field's edge is the only cue to where it sits: #858a93 is 3.21:1 on
   the #f7f6f4 panel and 3.47:1 on the white field (style.css's --field-line
   is 1.3:1). :not(:focus) leaves style.css's blue-deep focus border alone. */
.reach .field :is(input, textarea):not(:focus) { border-color: #858a93; }
.reach__petal {
	position: absolute;
	z-index: 0;
	top: -48px;
	right: -48px;
	width: 160px;
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--logo-navy);
	rotate: 12deg;
	animation: petal-drift 20s ease-in-out infinite alternate;
	--dx: 8px; --dy: -10px;
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1024px) {
	.dir__row { padding-block: 1.5rem; }
}

@media (max-width: 860px) {
	.reach__grid { display: block; }
	.reach__head { margin-bottom: 2rem; }
	.reach__ghost { width: 48px; height: 48px; margin-bottom: 1rem; }
	.reach__petal { width: 90px; top: -27px; right: -27px; }
}

@media (max-width: 640px) {
	/* the label sits above its value; the mark rides the label's line */
	.dir__row { display: block; padding-block: 1.5rem; }
	.dir__label { display: block; margin-bottom: 0.75rem; padding-right: 56px; }
	.dir__dd { display: block; }
	.dir__link--phone { font-size: 1.875rem; }
	.dir__link--email { font-size: 1.375rem; }
	.dir__addr { font-size: 1.5rem; }
	.dir__val { gap: 0.75rem 1rem; }
	.dir__lz { --s: 32px; position: absolute; top: calc(1.5rem - 8px); right: 7px; margin: 0; }
}