/* Contact form — Aperture tokens, scoped under .tsp-contact.

   Sized for a reading column rather than full width: a form whose inputs run
   the width of a 1200px page is measurably harder to complete.

   Deliberately parallel to careers.css. The two forms are visually identical
   by design — a reader who has met one should recognise the other — but the
   rules stay separate, because sharing them would make a tweak to the careers
   form silently restyle the contact form.

   v1.10.311: brought in line with the v1.10.309 Careers form — @container on a
   wrapper, 46px controls, :user-invalid error styling, styled select, consent
   row, and the submit-button specificity fix described below. */

.tsp-contact-wrap{container-type:inline-size;scroll-margin-top:110px}

.tsp-contact{
	--tsp-red:#C8102E;
	--tsp-dark-red:#9C0F27;
	--tsp-ink:#16181F;
	--tsp-muted:#676E7B;
	--tsp-hairline:#E8E5DE;
	--tsp-wash:#F6F4EF;
	--tsp-field:46px;
	max-width:680px;
	margin:0 auto;
	font-family:var(--tsp-font-ui);
	color:var(--tsp-ink);
	background:#fff;
	border:1px solid var(--tsp-hairline);
	border-radius:14px;
	padding:32px;
}
.tsp-contact *{box-sizing:border-box}
.tsp-contact__h{font-family:var(--tsp-font-display);font-weight:700;font-size:clamp(22px,2.4cqi + 18px,28px);line-height:1.25;margin:0 0 8px;color:var(--tsp-ink)}
.tsp-contact__intro{font-size:15px;line-height:1.6;color:var(--tsp-muted);margin:0 0 26px}

/* ------------------------------------------------------------- result state */

.tsp-contact__notice{border-radius:10px;padding:16px 18px;margin:0 0 24px;font-size:14.5px;line-height:1.55;border:1px solid var(--tsp-hairline);display:block}
.tsp-contact__notice:focus{outline:2px solid var(--tsp-red);outline-offset:2px}
.tsp-contact__notice-h{display:block;font-family:var(--tsp-font-display);font-size:18px;font-weight:700;margin-bottom:4px}
.tsp-contact__notice--ok{background:#f0f8f2;border-color:#bfe3c9;color:#1c5a2c}
.tsp-contact__notice--err{background:#fdf2f3;border-color:#f0c4c9;color:#8a1c26}

/* ----------------------------------------------------------------- controls */

.tsp-contact__row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.tsp-contact__field{margin:0 0 20px}
.tsp-contact__field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--tsp-ink);letter-spacing:.01em}
.tsp-contact__req{color:var(--tsp-red)}

.tsp-contact__field input[type=text],
.tsp-contact__field input[type=email],
.tsp-contact__field select,
.tsp-contact__field textarea{
	width:100%;
	min-height:var(--tsp-field);
	border:1px solid #D9D5CC;
	background:#fff;
	border-radius:9px;
	padding:12px 14px;
	font-family:inherit;
	/* 16px, not 15.5px: iOS Safari zooms the viewport on focus for any
	   text-entry field under 16px, and the reader then has to pinch back out
	   mid-form. Measured at 320/360/390/430 — every field here zoomed.
	   Unconditional rather than a @container rule on purpose: the zoom is a
	   VIEWPORT behaviour, so the wrap's own width is the wrong question to
	   ask. Half a pixel, and it is invisible next to the 13.5px label. */
	font-size:16px;
	color:var(--tsp-ink);
	transition:border-color .15s,box-shadow .15s;
}
.tsp-contact__field textarea{resize:vertical;min-height:170px;line-height:1.6}

.tsp-contact__field select{
	appearance:none;
	padding-right:42px;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23676E7B' stroke-width='1.8' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 16px center;
}

.tsp-contact__field input:hover,
.tsp-contact__field select:hover,
.tsp-contact__field textarea:hover{border-color:#B9B3A8}

.tsp-contact__field input:focus-visible,
.tsp-contact__field select:focus-visible,
.tsp-contact__field textarea:focus-visible{outline:2px solid var(--tsp-red);outline-offset:1px;border-color:var(--tsp-red)}

/* Border AND the browser's own message, so colour is never the only signal.
   :user-invalid rather than :invalid so an untouched required field is not red
   before the visitor has typed anything. */
.tsp-contact__field input:user-invalid,
.tsp-contact__field select:user-invalid,
.tsp-contact__field textarea:user-invalid{border-color:var(--tsp-red);box-shadow:0 0 0 3px rgba(200,16,46,.10)}

.tsp-contact__help{display:block;font-size:12.5px;color:var(--tsp-muted);margin-top:7px;line-height:1.5}

/* ------------------------------------------------------------------ consent */

.tsp-contact__consent{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:start;margin:4px 0 0}
.tsp-contact__consent input[type=checkbox]{width:24px;height:24px;margin:0;flex:0 0 auto;accent-color:var(--tsp-red);cursor:pointer}
.tsp-contact__consent input[type=checkbox]:focus-visible{outline:2px solid var(--tsp-red);outline-offset:2px}
.tsp-contact__consent label{font-size:13.5px;line-height:1.55;color:var(--tsp-ink);cursor:pointer}

/* Honeypot: removed from the layout and from the accessibility tree, but not
   display:none — some bots skip hidden inputs, which would defeat it. */
.tsp-contact__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------ actions */

/* Scoped under .tsp-contact to reach (0,2,0). Blocksy's
   `.button, .ct-button, …, [type="submit"], .wp-element-button` rule is also
   (0,1,0) and main.min.css loads AFTER this sheet, so an unscoped selector ties
   and loses on source order — it silently supplied
   min-height:var(--theme-button-min-height) (40px) and 5px padding. Specificity
   is the fix, not !important. */
.tsp-contact .tsp-contact__submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	min-height:48px;
	background:var(--tsp-red);
	color:#fff;
	border:none;
	border-radius:40px;
	padding:13px 34px;
	font-family:inherit;
	font-weight:700;
	font-size:15px;
	letter-spacing:.02em;
	cursor:pointer;
	transition:background .15s;
}
.tsp-contact .tsp-contact__submit:hover{background:var(--tsp-dark-red);color:#fff}
.tsp-contact .tsp-contact__submit:focus-visible{background:var(--tsp-dark-red);color:#fff;outline:2px solid var(--tsp-ink);outline-offset:2px}

.tsp-contact__actions{margin:26px 0 0}
.tsp-contact__privacy{font-size:12.5px;color:var(--tsp-muted);margin:16px 0 0;line-height:1.55}

/* --------------------------------------------------------------- responsive */

@container (max-width:520px){
	.tsp-contact{padding:26px 22px}
	.tsp-contact__row{grid-template-columns:1fr}
	.tsp-contact .tsp-contact__submit{width:100%}
}
@container (max-width:360px){
	.tsp-contact{padding:22px 18px;border-radius:12px}
}

@media (prefers-reduced-motion:reduce){
	.tsp-contact .tsp-contact__submit,
	.tsp-contact__field input,
	.tsp-contact__field select,
	.tsp-contact__field textarea{transition:none}
}

/* v1.10.430 — the consent checkbox meets the minimum target size.
 *
 * Found in the UX audit: every text field in this form is 46px tall and the
 * consent checkbox was 20x20 — under the 24x24 floor WCAG 2.5.8 sets for a
 * pointer target, and the one control in the form a reader MUST hit before the
 * form will submit. 24x24 with no margin, and the row aligned so the box sits
 * with the first line of its label rather than drifting above it. */