/*
 * Site chrome: base reset, header, navigation, footer, accordions, focus.
 *
 * Hand-written, unlike tokens.css and v7.css which are generated. The
 * design tool exported page bodies but drove the header, the dropdowns and
 * the mobile menu from JavaScript, so there was no CSS to extract. Every
 * value below is taken from the source's inline styles; comments mark the
 * places the rebuild deliberately differs.
 */

/* ---- base ------------------------------------------------------------ */
/* Transcribed from the bundle's own global <style> block, which the page
   extracts did not carry. The earlier hand-written version drifted from it
   in three ways that affected every element without an explicit value:
   font-size 14.5px (source: 16px), line-height 1.5 (1.55) and body colour
   --v-ink (#2F3140) where the source uses #3F4250. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--v-white);
  font-family: var(--v-font-body);
  color: var(--v-ink-700);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The source zeroes these; without it anything that does not set its own
   margin inline picks up the user agent default instead. */
h1, h2, h3, h4, p, blockquote, ul { margin: 0; }

/* Headings inherit Open Sans from the body. The design sets no family
   on any heading; a previous version here applied Archivo, which the
   bundle loads but never uses. */
img, svg { max-width: 100%; }

/* :where(), so these carry ZERO specificity and any class beats them.
   The bundle set the same two rules globally and they never caused trouble,
   because every button there also carried an INLINE color, which outranks
   any stylesheet. Converting those inline styles to classes dropped them to
   (0,1,0), below `a:hover` at (0,1,1) — so on hover the header CTA turned
   #2F4BE0 text on a #2F4BE0 background and the label vanished. Six page
   link classes had the same fault. :where() restores the precedence the
   inline styles used to provide. */
:where(a) { color: var(--v-blue); cursor: pointer; text-decoration: none; }
:where(a:hover) { color: var(--v-blue-600); }

/* DELIBERATE DEPARTURE, WCAG 1.4.1. The design distinguishes inline links
   by colour alone, and #3D5AFE against the #3F4250 body colour is 1.94:1,
   under the 3:1 that colour-only differentiation requires. Links sitting
   inside running text get an underline. Standalone link rows are left
   alone: with no prose around them there is nothing to confuse them with,
   so position already distinguishes them. */
/* Scoped away from anything that is styled as a button: an underline under
   a solid-filled control is not the affordance this is meant to add. */
p a:not([class*="btn"]):not([class*="v-h"]) { text-decoration: underline; text-underline-offset: 2px; }
.v7-footer__policy a, .v7-nav a, .v7-mob a, .v7-footer__col a { text-decoration: none; }

/* WCAG 2.4.11. The sticky header is 92px in v9, plus the 33px banner, so
   an anchored or tab-focused element would otherwise land underneath it.
   This number has to move whenever the header height does. */
html { scroll-padding-top: 136px; }

/* Two-color focus ring (WCAG technique C40). The old ring, blue-400 alone,
   was 2.4:1 on white and failed 1.4.11. A blue-600 outline (6.5:1 on white)
   over a 2px white halo in the offset gap reads on white AND on the navy
   bands, so no rule has to know which ground an element sits on. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--v-blue-600);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--v-white);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- continuity banner ---------------------------------------------- */
.v7-banner {
  background: var(--v-navy);
  color: var(--v-line-strong);
  font-size: 13px;
  padding: 8px 24px;
  text-align: center;
}

/* ---- header ---------------------------------------------------------- */
.v7-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(16px, 6vw, 100px);
  background: rgba(255, 255, 255, .97);
  /* v9: a 2px copper rule instead of the hairline. Paired with the 3px
     rule above the footer, it brackets every page in the accent. */
  border-bottom: 2px solid var(--v-copper-mid);
}
.v7-header__brand {
  /* The 8px top margin offset the tagline; alone, the mark centres. */
  display: flex; align-items: center;
  flex-shrink: 0; text-decoration: none;
}
.v7-header__brand img { height: 26px; width: auto; display: block; }

.v7-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; height: 100%; }
.v7-nav__list {
  display: flex; align-items: center; gap: 22px;
  list-style: none; margin: 0; padding: 0; height: 100%;
}
.v7-nav__item { position: relative; height: 100%; display: flex; align-items: center; }
.v7-nav__top {
  color: var(--v-ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: 6px 0 4px;
  white-space: nowrap;
}
.v7-nav__item:hover > .v7-nav__top,
.v7-nav__item.is-current > .v7-nav__top { color: var(--v-blue); border-bottom-color: var(--v-blue); }

.v7-nav__panel {
  position: absolute;
  top: 84px;
  left: -14px;
  min-width: 250px;
  background: var(--v-white);
  border: 1px solid var(--v-line);
  border-top: 1px solid var(--v-copper-mid);
  border-radius: 6px;
  box-shadow: 0 12px 32px var(--v-shadow-raised);
  padding: 6px;
  display: none;
}
/* :focus-within as well as :hover. The source opened these on mouseenter
   only, which left all five sections unreachable by keyboard. */
.v7-nav__item:hover > .v7-nav__panel,
.v7-nav__item:focus-within > .v7-nav__panel { display: block; }

.v7-nav__panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  color: var(--v-ink);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.v7-nav__panel a:hover, .v7-nav__panel a:focus-visible { background: var(--v-blue-50); }

.v7-btn {
  display: inline-block;
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 18px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.v7-btn--primary { background: var(--v-blue); color: var(--v-white); }
.v7-btn--primary:hover, .v7-btn--primary:focus-visible { background: var(--v-blue-600); }

/* ---- mobile menu ------------------------------------------------------ */
.v7-mob { display: none; }
.v7-mob__toggle {
  border: 1px solid var(--v-line);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--v-ink);
  cursor: pointer;
  list-style: none;
  /* 2.5.8: 44px tall including padding, comfortably over the 24px floor. */
}
.v7-mob__toggle::-webkit-details-marker { display: none; }
.v7-mob[open] .v7-mob__toggle { background: var(--v-blue-50); border-color: var(--v-blue); }

.v7-mob__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 92px;
  z-index: 39;
  background: var(--v-white);
  border-bottom: 1px solid var(--v-copper-mid);
  padding: 8px 16px 20px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
}
.v7-mob__panel a {
  padding: 12px 0;
  color: var(--v-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--v-line-100);
}
.v7-mob__section {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v-gray);
}
.v7-mob__cta { margin-top: 14px; text-align: center; padding: 13px 18px; border-bottom: 0; }

@media (max-width: 1099px) {
  .v7-nav { display: none; }
  .v7-mob { display: block; }
  .v7-header { position: static; }
  html { scroll-padding-top: 24px; }
}

/* ---- FAQ accordions --------------------------------------------------- */
/* <details> replaces 27 div[role=button] toggles. The marker is drawn from
   the open state so the glyph cannot disagree with what is on screen. */
/* No padding or border here. The source already wraps every question in
   <div class="v-8b54ab">, which supplies `padding: 6px 0` and a
   border-bottom; repeating them on the <details> doubled both, adding 13px
   to all 27 rows and drawing the divider twice. */
.v-faq { margin: 0; }
.v-faq > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--v-ink);
  font-size: 16px;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  list-style: none;
}
.v-faq > summary::-webkit-details-marker { display: none; }
.v-faq > summary::after {
  content: "+";
  color: var(--v-blue);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.v-faq[open] > summary::after { content: "\2212"; }
.v-faq__body > p { margin: 0; font-size: 15px; padding: 0 0 14px; max-width: 70ch; }

/* ---- footer ----------------------------------------------------------- */
.v7-footer {
  /* v11 values. Shorter than before (36/16 against 44/20) and the whole
     lower half is centred, which is the change: the credentials and the
     legal line now read as one centred block rather than two rows pushed
     to opposite edges. */
  padding: 36px 0 16px;
  background: var(--v-footer);
  border-top: 3px solid var(--v-copper-mid);
  font-size: 14px;
  color: var(--v-line-strong);
}

/* Top half: brand at a fixed width, link columns taking the rest and
   reflowing on their own. auto-fit rather than a fixed column count, so
   the columns redistribute instead of the grid wrapping as a block. */
.v7-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 56px;
}
.v7-footer__brand {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* v12: mark and city line centred on each other */
  text-align: center;
  gap: 12px;
}
.v7-footer__brand img { height: 26px; width: auto; display: block; }
.v7-footer__meta { margin: 0; font-size: 13.5px; color: var(--v-slate-300); white-space: nowrap; }

.v7-footer__cols {
  flex: 1 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 24px 20px;
}
.v7-footer__col { display: flex; flex-direction: column; gap: 7px; }
.v7-footer__colhead {
  margin: 0 0 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v-copper-light);
}
.v7-footer__col a {
  color: var(--v-line-strong); text-decoration: none;
  font-size: 13.5px; line-height: 1.35;
}
.v7-footer__col a:hover, .v7-footer__col a:focus-visible { color: var(--v-white); text-decoration: underline; }

/* Bottom half: one centred column. */
.v7-footer__bottom {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--v-on-dark-10);
  font-size: 12.5px;
  color: var(--v-slate-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.v7-footer__creds {
  /* In the brand column now, under the city line (2026-10-19). */
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 12px 28px;
  margin-top: 22px;
}
.v7-footer__badge { width: auto; display: block; }
.v7-footer__badge--nmsdc { height: 44px; }
.v7-footer__badge--sba   { height: 32px; }
.v7-footer__legalrow {
  display: flex; align-items: center; justify-content: center;
  gap: 8px 14px; flex-wrap: wrap;
}
/* The legal sentence takes its own line once the row is too narrow to
   hold it alongside the links, so the links group cleanly beneath it
   rather than the sentence breaking mid-way through. */
@media (max-width: 640px) {
  .v7-footer__legal { flex: 0 0 100%; }
}
.v7-footer__legal { margin: 0; color: var(--v-slate-300); }
.v7-footer__legalrow a { color: var(--v-slate-300); text-decoration: underline; }
.v7-footer__legalrow a:hover, .v7-footer__legalrow a:focus-visible { color: var(--v-white); }
/* The separator is decoration between links, so it is hidden from
   assistive technology and never becomes part of a link's name. */
.v7-sep { color: var(--v-slate-500, #5A5F86); }

/* No column-count breakpoints: the brand is a fixed 220px and the link
   grid is auto-fit, so both reflow on their own. The old rules reset a
   grid-template-columns that this layout no longer has. */
@media (max-width: 600px) {
  .v7-footer__top { grid-template-columns: 1fr; }
}

/* ---- legal pages ------------------------------------------------------ */
/* The v7 design has no privacy, terms or accessibility page, but its footer
   links to all three. They reuse the design's own page classes; only the
   list needs a rule, because no v7 page contains a plain bulleted list. */
.v-legal-list { margin: 14px 0 0; padding-left: 20px; max-width: 70ch; }
.v-legal-list li { margin: 0 0 6px; }

/* ---- hover contrast ---------------------------------------------------- */
/* DELIBERATE DEPARTURE, WCAG 1.4.3.
 *
 * The white primary CTA declares `color:#2F3140` with
 * `style-hover="background:#2F4BE0"` — only the background changes. Dark
 * ink on that blue is 1.96:1, against the 4.5:1 required, so the label is
 * close to unreadable for the whole time the pointer is on it. It is the
 * hero call to action on 19 pages.
 *
 * The text goes white on hover, which is what the design already does for
 * the blue variant of the same button and takes it to 6.55:1. Nothing
 * moves; only the label colour changes, and only while hovered or focused.
 *
 * Worth raising with the designer: the intent may have been for this
 * button to keep a light background on hover, in which case the fix
 * belongs in the design rather than here.
 */
.v-5cce60.v-h26111d:hover,
.v-5cce60.v-h26111d:focus-visible { color: var(--v-white); }

/* ---- contact form ------------------------------------------------------ */
/* The design supplies the field classes (v-4bb3bf, v-fb4f7b, v-aef394); only
   the states it never drew need rules: errors, the success panel, the
   honeypot and the submit button as a real <button>. */

.v-form-send {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  /* 2.5.8 target size: 44px tall, well over the 24px floor. */
  min-height: 44px;
  padding: 11px 18px;
}

.v-form-required { margin: 0 0 14px; font-size: 13px; color: var(--v-gray); }

/* Errors carry an icon-free text message, a border and a colour. Never
   colour alone (1.4.1): every error is also a sentence. */
.v-form-error {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--v-error);
}

.v-form-summary {
  border: 1px solid var(--v-error);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 20px;
  background: var(--v-error-tint);
}
.v-form-summary p { margin: 0 0 6px; }
.v-form-summary ul { margin: 0; padding-left: 20px; }
.v-form-summary li { margin: 2px 0; }
.v-form-summary a { color: var(--v-error); }
.v-form-summary:focus-visible { outline: 3px solid var(--v-blue-400); outline-offset: 2px; }

.v-form-ok {
  border: 1px solid var(--v-green);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 16px 18px;
  background: var(--v-green-tint);
}
.v-form-ok p { margin: 0 0 6px; }
.v-form-ok p:last-child { margin: 0; }

.v-form-turnstile { margin: 4px 0 16px; }

/* The honeypot. Hidden from people without display:none, which some bots
   check for, and removed from the accessibility tree by aria-hidden plus
   tabindex="-1" on the input itself. */
.v-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact reason cards.
 *
 * The design paints the chosen card by swapping four inline colours at
 * runtime. Server-rendered there is no runtime, so the same four values
 * live here as a modifier class. Taken from the bundle, not approximated:
 * #2B2E44 ground, #fff label, #C9CDDB description, #D5D6DC resting border.
 *
 * They are links, not role="button" divs, so choosing a reason works with
 * scripting off and the keyboard gets Enter for free. */
.v-reason {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	border: 1px solid #D5D6DC;
	border-radius: 6px;
	background: #fff;
	text-decoration: none;
}
.v-reason:hover,
.v-reason:focus-visible { border-color: #3D5AFE; }
.v-reason__label {
	font-size: 16px;
	font-weight: 700;
	color: #2F3140;
}
.v-reason__desc {
	font-size: 14px;
	line-height: 1.5;
	color: #6B6E7B;
}
.v-reason--on {
	background: #2B2E44;
	border-color: #2B2E44;
}
.v-reason--on .v-reason__label { color: #fff; }
.v-reason--on .v-reason__desc  { color: #C9CDDB; }

/* Phones. iOS Safari zooms the whole page when a field under 16px takes
   focus, and does not zoom back out, so tapping into the contact form
   left the visitor scrolling sideways. 16px is the threshold. The footer
   links were 18px tall with 7px between them: within WCAG 2.5.8 by its
   spacing exception, but a thumb hits the neighbour. Padding brings each
   to 32px without moving the text. */
@media (max-width: 899px) {
	form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
	form select[name],
	form textarea[name] { font-size: 16px; }  /* [name]: outranks their own class */
	.v7-footer__col { gap: 0; }
	.v7-footer__col a { display: block; padding: 7px 0; }
	.v7-footer__legalrow a { display: inline-block; padding: 6px 0; }
	/* The row wraps here, leaving the divider dangling as "| Privacy". */
	.v7-footer__legalrow .v7-sep { display: none; }
}

/* Form field borders (2026-10-19). The design's #D5D6DC border is 1.4:1 on
   white, too faint to show where a field is (WCAG 1.4.11 needs 3:1). This
   gray is 3.5:1, the design system's `line-control`. Fields only: cards
   keep the light border, which only decorates. [name] outranks the fields'
   own compiled class. */
form input[name]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
form select[name],
form textarea[name] { border-color: #858896; }

/* Apply pop-up (Tech Brief, Oct 2026). The Careers contact card is a
 * button that opens it, so it needs the browser button styles undone. */
.v-reason--button {
	width: 100%;
	text-align: left;
	font: inherit;
	cursor: pointer;
}
.vt-apply {
	width: min(440px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: #2F3140;
	box-shadow: 0 24px 60px rgba(14, 20, 48, .28);
}
.vt-apply::backdrop { background: rgba(14, 20, 48, .6); }
.vt-apply__inner { position: relative; padding: 28px; }
.vt-apply__title {
	margin: 0 40px 12px 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: #2F3140;
}
.vt-apply__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	user-select: text;
}
.vt-apply__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #2F3140;
	font-family: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.vt-apply__close:hover { background: #F1F2F6; }

/* Privacy notice (supplied 2026-10-19, design/legal/). Its own stylesheet,
 * ported as-is under the vt-privacy namespace bin/v7legal.py gives its
 * classes. Fonts and the base text color come from the theme. */
.vt-privacy { color: #3F4250; }
.vt-privacy a { color: #3D5AFE; font-weight: 600; }
.vt-privacy a:hover { color: #2F4BE0; }
.vt-privacy__wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.vt-privacy__hero { background: #2B2E44; color: #fff; padding: 88px 0 72px; }
.vt-privacy__eyebrow { margin: 0 0 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #E8B77B; font-weight: 600; }
.vt-privacy h1 { margin: 0; font-size: clamp(34px, 5vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; max-width: 820px; color: #fff; }
.vt-privacy__effective { margin: 20px 0 0; font-size: 18px; color: #D3D6E0; }
.vt-privacy__main { padding: 72px 0 96px; }
.vt-privacy__short { background: #F1F3FE; border: 1px solid #D9DEFB; border-radius: 8px; padding: 28px; max-width: 880px; }
.vt-privacy__short h2 { margin: 0 0 14px; font-size: 20px; color: #2F3140; }
.vt-privacy ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
.vt-privacy__sections { border-top: 1px solid #D5D6DC; margin-top: 48px; }
.vt-privacy__row { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid #D5D6DC; scroll-margin-top: 96px; }
.vt-privacy__row h2 { margin: 0; font-size: 18px; font-weight: 700; color: #2F3140; line-height: 1.35; }
.vt-privacy__body { max-width: 680px; display: flex; flex-direction: column; gap: 12px; }
.vt-privacy__body p { margin: 0; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.vt-privacy strong { color: #2F3140; }
@media (max-width: 900px) {
	.vt-privacy__row { grid-template-columns: 1fr; gap: 8px; }
	.vt-privacy__hero { padding: 64px 0 52px; }
	.vt-privacy__main { padding: 52px 0 72px; }
}
.vt-apply__text a { color: #3D5AFE; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.vt-apply__text a:hover { color: #2F4BE0; }