/* Reset, typography, layout primitives, buttons, fields. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0; background: var(--bg); color: var(--fg);
	font: 400 var(--va-fs-body)/1.55 var(--va-font-text);
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--fg); color: var(--bg); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.va-sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 200; background: var(--va-paper); color: var(--va-ink); padding: 12px 18px; border-radius: var(--va-pill); font-weight: 600; text-decoration: none; transition: top var(--va-dur-fast); }
.skip-link:focus { top: 16px; }

/* ---------- typography ---------- */
.va-display, .va-h1, .va-h2, .va-h3 { font-family: var(--va-font-display); text-transform: uppercase; font-kerning: normal; text-wrap: balance; }
.va-display { font-size: var(--va-fs-mega); font-weight: var(--va-fw-display); line-height: .95; letter-spacing: -.01em; }
.va-h1 { font-size: var(--va-fs-h1); font-weight: var(--va-fw-display); line-height: .95; letter-spacing: -.01em; }
.va-h2 { font-size: var(--va-fs-h2); font-weight: var(--va-fw-display); line-height: .95; letter-spacing: -.005em; }
.va-h3 { font-size: var(--va-fs-h3); font-weight: 500; line-height: 1.05; letter-spacing: .005em; }
/* accent word inside a heading: same family and size, light weight, no italic (bold/light contrast) */
.va-accent, :is(.va-display, .va-h1, .va-h2, .va-h3) em { font-family: var(--va-font-accent); font-style: normal; font-weight: var(--va-fw-accent); }
.va-lead { font-size: var(--va-fs-lead); line-height: 1.45; max-width: 40ch; text-wrap: pretty; }
.va-text { max-width: 64ch; text-wrap: pretty; }
.va-text > * + * { margin-top: 1em; }
.va-small { font-size: var(--va-fs-small); }
.va-mute { color: var(--mute); }
.va-eyebrow { font: 600 var(--va-fs-micro)/1.3 var(--va-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.va-num { font-variant-numeric: tabular-nums lining-nums; }
.va-link { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--va-dur) var(--va-ease-out); padding-bottom: 1px; }
.va-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- layout ---------- */
.site-main { display: block; min-height: 60vh; }
.va-section { position: relative; padding-block: var(--va-section-y); background: var(--bg); color: var(--fg); }
.va-section--flush { padding-block: 0; }
.va-container { width: min(100% - 2 * var(--va-gutter), var(--va-maxw)); margin-inline: auto; }
.va-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--va-col-gap); row-gap: var(--va-s7); }
.va-col { grid-column: var(--start, auto) / span var(--span, 12); min-width: 0; }
@media (max-width: 899px) {
	.va-col { grid-column: auto / span var(--span-m, 12); }
}
.va-stack > * + * { margin-top: var(--gap, var(--va-s5)); }
.va-rule { height: 1px; border: 0; margin: 0; background: var(--line); }
.va-media { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--va-radius); }
.va-media > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- buttons ---------- */
.va-btn {
	--btn-bg: transparent; --btn-fg: var(--fg); --btn-fill: var(--fg); --btn-fill-fg: var(--bg);
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 56px; padding: 0 30px; border: 1px solid var(--btn-fg); border-radius: var(--va-pill);
	background: var(--btn-bg); color: var(--btn-fg);
	font: 600 var(--va-fs-small)/1 var(--va-font-text); letter-spacing: .01em; text-decoration: none; cursor: pointer;
	transition: color var(--va-dur) var(--va-ease-out), border-color var(--va-dur) var(--va-ease-out);
}
.va-btn::before {
	content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--btn-fill);
	transform: translateY(101%); transition: transform var(--va-dur) var(--va-ease-out);
}
.va-btn:hover::before { transform: translateY(0); }
.va-btn:hover { color: var(--btn-fill-fg); }
/* filled buttons: no wipe, the fill just softens on hover (opacity) */
.va-btn--solid { --btn-bg: var(--fg); --btn-fg: var(--bg); border-color: var(--fg); transition: opacity var(--va-dur-fast) var(--va-ease-out); }
.va-btn--light { --btn-bg: var(--va-paper); --btn-fg: var(--va-ink); border-color: var(--va-paper); transition: opacity var(--va-dur-fast) var(--va-ease-out); }
.va-btn:is(.va-btn--solid, .va-btn--light)::before { display: none; }
.va-btn:is(.va-btn--solid, .va-btn--light):hover { color: var(--btn-fg); opacity: .84; }
.va-btn--ghost { --btn-fg: var(--fg); }
.va-btn--line {
	min-height: 44px; padding: 0; border: 0; border-radius: 0; overflow: visible; gap: 16px; font-size: var(--va-fs-body);
}
.va-btn--line::before { display: none; }
.va-btn--line::after { content: ''; width: 40px; height: 1px; background: currentColor; transition: width var(--va-dur) var(--va-ease-out); }
.va-btn--line:hover { color: inherit; }
.va-btn--line:hover::after { width: 72px; }
.va-btn[disabled], .va-btn[aria-busy='true'] { cursor: progress; opacity: .7; }

/* ---------- fields ---------- */
.field { position: relative; display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field__label { font: 600 var(--va-fs-micro)/1.3 var(--va-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 0; }
.field__input {
	width: 100%; padding: 12px 0 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--fg);
	font: 400 var(--va-fs-body)/1.35 var(--va-font-text); transition: border-color var(--va-dur-fast);
	-webkit-appearance: none; appearance: none;
}
.field__input::placeholder { color: var(--mute); opacity: .8; }
.field__input:hover { border-bottom-color: var(--mute); }
.field__input:focus { outline: none; border-bottom-color: var(--fg); box-shadow: 0 1px 0 var(--fg); }
.field__input:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.field__input--area { resize: vertical; min-height: 88px; }
.field__error { min-height: 0; color: var(--err); font-size: var(--va-fs-small); line-height: 1.35; }
.field__error:empty { display: none; }
.field.is-invalid .field__input { border-bottom-color: var(--err); box-shadow: 0 1px 0 var(--err); }
.choice { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.choice__item { position: relative; cursor: pointer; }
.choice__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__item span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--va-pill); font-size: var(--va-fs-small); transition: background var(--va-dur-fast), color var(--va-dur-fast), border-color var(--va-dur-fast); }
.choice__item input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.choice__item input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--va-fs-small); line-height: 1.45; color: var(--mute); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--fg); }
.consent a { color: var(--fg); }