/* ==========================================================================
   ValderTech — shared design system
   Used by every page. Page files carry markup only.
   ========================================================================== */

/* ------------------------------------------------------------ 1. tokens -- */

:root {
  /* ---------------------------------------------------------------- brand --
     Finalized brand kit. These eight values are the source of truth; every
     other colour on the site is one of these or a shade derived below. No
     colour literal appears anywhere outside this block. */

  /* Core */
  --vt-navy: #1b2740; /* primary brand, headings, dark sections */
  --vt-blue: #2b8af0; /* accent — focus rings, borders, icons, large type */

  /* Support */
  --vt-ink: #131c2e; /* body text */
  --vt-slate: #5a6880; /* secondary text, captions, labels */
  --vt-sky: #7db9f7; /* hover states, accent on dark backgrounds */
  --vt-mist: #eef3f9; /* alternating sections, cards */
  --vt-white: #ffffff; /* default background */

  /* Type */
  --vt-display: "Outfit", system-ui, sans-serif;
  --vt-body: "Inter", system-ui, sans-serif;
  --vt-mono: "JetBrains Mono", ui-monospace, monospace;

  /* -------------------------------------------------------------- derived --
     Same hue and saturation as the brand value, lightness moved only.
     --vt-blue is 3.5:1 on white, which clears AA for focus rings, borders and
     large type but not for small text. Anything that renders blue TEXT at body
     size — inline links, button labels reversed out of a blue fill — uses
     --vt-blue-deep instead (5.07:1 on white, 4.55:1 on mist). */
  --vt-blue-deep: #0f6dd2; /* link text, primary button fill */
  --vt-blue-deeper: #0d5eb5; /* primary button hover */
  --vt-navy-deep: #0e1420; /* far end of dark-section gradients */
  --vt-line: #cadaec; /* borders */
  --vt-line-soft: #e5ecf6; /* hairlines, dividers */

  /* Text and rules reversed out of --vt-navy. Ratios against navy:
     strong 12.8:1, muted 8.8:1, faint 6.0:1 — all clear AA. */
  --vt-on-navy: var(--vt-white);
  --vt-on-navy-strong: rgba(255, 255, 255, 0.92);
  --vt-on-navy-muted: rgba(255, 255, 255, 0.74);
  --vt-on-navy-faint: rgba(255, 255, 255, 0.58);
  --vt-on-navy-line: rgba(255, 255, 255, 0.14);
  --vt-on-navy-panel: rgba(255, 255, 255, 0.07);
  --vt-on-navy-panel-hover: rgba(255, 255, 255, 0.16);
  --vt-on-navy-grid: rgba(255, 255, 255, 0.055);

  /* Tinted accents used as washes and rings rather than as text. */
  --vt-blue-wash: rgba(43, 138, 240, 0.16);
  --vt-blue-ring: rgba(43, 138, 240, 0.24);
  --vt-blue-underline: rgba(15, 109, 210, 0.35);
  --vt-sky-glow: rgba(125, 185, 247, 0.18);

  /* Feedback. Not part of the brand kit — needed for form validation only,
     and kept deliberately muted so it never competes with the accent. */
  --vt-danger: #a3231b;
  --vt-danger-border: rgba(163, 35, 27, 0.32);
  --vt-danger-bg: #fdf3f2;
  --vt-placeholder: #8593a8;

  /* ------------------------------------------------------------- type scale */
  --fs-h1: clamp(2.25rem, 5vw, 3.5rem); /* 36 → 56px */
  --fs-display: var(--fs-h1);
  --fs-h2: clamp(1.5rem, 3vw, 1.875rem); /* 24 → 30px */
  --fs-h3: 1.375rem; /* 22px */
  --fs-body: 1rem; /* 16px */
  --fs-lede: clamp(1.0625rem, 1.4vw, 1.1875rem); /* 17 → 19px */
  --fs-small: 0.9375rem; /* 15px */
  --fs-label: clamp(0.6875rem, 1vw, 0.8125rem); /* 11 → 13px */

  --lh-body: 1.65;
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-label: 0.08em;
  --measure: 65ch;

  /* ----------------------------------------------------------------- rhythm */
  --space-section: clamp(60px, 8vw, 104px);
  --vt-maxw: 1140px;
  --vt-maxw-narrow: 760px;

  /* ------------------------------------------------------ surface treatment */
  --vt-radius: 16px;
  --vt-radius-sm: 10px;
  --vt-radius-pill: 999px;
  --vt-shadow-sm: 0 1px 2px rgba(19, 28, 46, 0.06),
    0 1px 3px rgba(19, 28, 46, 0.04);
  --vt-shadow-md: 0 4px 6px -2px rgba(19, 28, 46, 0.05),
    0 12px 24px -6px rgba(19, 28, 46, 0.1);
  --vt-shadow-lg: 0 8px 12px -4px rgba(19, 28, 46, 0.06),
    0 24px 48px -12px rgba(19, 28, 46, 0.16);
  --vt-shadow-panel: 0 24px 48px -16px rgba(14, 20, 32, 0.5);

  --vt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --------------------------------------------------------------- aliases --
     Kept so quote.css and the form components keep resolving. */
  --vt-bg: var(--vt-white);
  --vt-bg-raised: var(--vt-mist);
  --vt-bg-inset: var(--vt-mist);
  --vt-border: var(--vt-line);
  --vt-text: var(--vt-ink);
  --vt-text-muted: var(--vt-slate);
  --vt-accent: var(--vt-blue-deep);
  --vt-accent-strong: var(--vt-blue-deeper);
  --vt-accent-contrast: var(--vt-white);
  --vt-muted: var(--vt-slate);
  --vt-surface: var(--vt-white);
  --vt-surface-alt: var(--vt-mist);
  --vt-font: var(--vt-body);
}

/* ------------------------------------------------------------- 2. base -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--vt-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--vt-ink);
  background: var(--vt-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--vt-display);
  color: var(--vt-navy);
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-weight: 600;
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-display);
}
h2 {
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-heading);
}
h3,
h4 {
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-heading);
}

/* 65-character measure. In narrow containers this is a no-op; it only caps
   paragraphs that would otherwise run the full width of a wide column. */
p {
  margin: 0 0 1.15em;
  max-width: var(--measure);
}

a {
  color: var(--vt-blue-deep);
  text-decoration-color: var(--vt-blue-underline);
  text-underline-offset: 3px;
  transition: color 0.15s var(--vt-ease),
    text-decoration-color 0.15s var(--vt-ease);
}

a:hover {
  color: var(--vt-blue-deep);
  text-decoration-color: currentColor;
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--vt-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Never remove an outline without replacing it: on navy the blue ring is only
   4.25:1, so dark sections get the sky ring instead. */
.vt-section--ink :focus-visible,
.vt-footer :focus-visible,
.vt-hero :focus-visible,
.vt-cta-band :focus-visible,
.vt-pull :focus-visible {
  outline-color: var(--vt-sky);
}

[hidden] {
  display: none !important;
}

.vt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------- 3. layout -- */

.vt-shell {
  width: 100%;
  max-width: var(--vt-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.vt-main {
  display: block;
}

/* Section rhythm. Alternating surfaces give the page cadence instead of a
   stack of identical blocks. */
.vt-section {
  padding: var(--space-section) 0;
}

.vt-section--tight {
  padding: clamp(44px, 5vw, 68px) 0;
}

.vt-section--alt {
  background: var(--vt-mist);
  border-block: 1px solid var(--vt-line-soft);
}

.vt-section--ink {
  background: var(--vt-navy);
  color: var(--vt-on-navy-strong);
}

.vt-section--ink h2,
.vt-section--ink h3 {
  color: var(--vt-white);
}

.vt-section__head {
  max-width: 42rem;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.vt-section__head--center {
  margin-inline: auto;
  text-align: center;
}

.vt-section__head p {
  font-size: var(--fs-lede);
  margin-bottom: 0;
}

/* --------------------------------------------------------- 4. eyebrows -- */

.vt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vt-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--vt-blue-deep);
  margin: 0 0 14px;
}

.vt-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--vt-blue);
  border-radius: 2px;
}

.vt-section--ink .vt-eyebrow {
  color: var(--vt-sky);
}

.vt-section__head--center .vt-eyebrow {
  justify-content: center;
}

.vt-lede {
  font-size: var(--fs-lede);
  color: var(--vt-ink);
  max-width: 60ch;
}

.vt-section--ink .vt-lede {
  color: var(--vt-on-navy-strong);
}

/* ----------------------------------------------------------- 5. header -- */

.vt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vt-on-navy-strong);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--vt-line);
}

.vt-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  flex-wrap: wrap;
}

/* Two-tone wordmark, no symbol. Live text so it stays sharp at any resolution
   and scales with the layout. Clear space equals the cap height of the V,
   which at Outfit 600 is ~0.72em — applied as padding so it is preserved
   whatever the surrounding layout does. */
.vt-logo {
  display: inline-block;
  font-family: var(--vt-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: var(--ls-display);
  line-height: 1.1;
  min-width: 120px;
  padding: 0.72em 0;
  color: var(--vt-navy);
  text-decoration: none;
  white-space: nowrap;
}

.vt-logo:hover {
  color: var(--vt-navy);
}

.vt-logo__text span {
  color: var(--vt-blue);
}

/* Reversed treatment on any navy ground. */
.vt-footer .vt-logo,
.vt-section--ink .vt-logo {
  color: var(--vt-white);
}

.vt-footer .vt-logo__text span,
.vt-section--ink .vt-logo__text span {
  color: var(--vt-sky);
}

.vt-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.vt-nav a {
  position: relative;
  font-family: var(--vt-display);
  color: var(--vt-ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  padding: 9px 14px;
  border-radius: var(--vt-radius-sm);
  transition: color 0.15s var(--vt-ease), background-color 0.15s var(--vt-ease);
}

.vt-nav a:hover {
  color: var(--vt-ink);
  background: var(--vt-mist);
}

.vt-nav a[aria-current="page"] {
  color: var(--vt-blue-deep);
  font-weight: 650;
}

.vt-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--vt-blue);
}

.vt-nav__cta {
  margin-left: 6px;
}

/* ---------------------------------------------------------- 6. buttons -- */

.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--vt-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  padding: 14px 24px;
  border-radius: var(--vt-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s var(--vt-ease),
    border-color 0.16s var(--vt-ease), color 0.16s var(--vt-ease),
    box-shadow 0.16s var(--vt-ease), transform 0.16s var(--vt-ease);
}

.vt-btn svg {
  flex: none;
  transition: transform 0.16s var(--vt-ease);
}

.vt-btn:hover svg {
  transform: translateX(2px);
}

.vt-btn--primary {
  background: var(--vt-blue-deep);
  color: var(--vt-white);
  box-shadow: var(--vt-shadow-sm);
}

.vt-btn--primary:hover:not(:disabled) {
  background: var(--vt-navy);
  color: var(--vt-white);
  box-shadow: var(--vt-shadow-md);
  transform: translateY(-1px);
}

.vt-btn--accent {
  background: var(--vt-blue);
  color: var(--vt-navy);
  box-shadow: var(--vt-shadow-sm);
}

.vt-btn--accent:hover:not(:disabled) {
  background: var(--vt-sky);
  color: var(--vt-navy);
  box-shadow: var(--vt-shadow-md);
  transform: translateY(-1px);
}

.vt-btn--secondary {
  background: var(--vt-white);
  border-color: var(--vt-line);
  color: var(--vt-ink);
}

.vt-btn--secondary:hover:not(:disabled) {
  border-color: var(--vt-blue);
  color: var(--vt-blue-deep);
  box-shadow: var(--vt-shadow-sm);
}

.vt-btn--ghost-light {
  background: var(--vt-on-navy-panel);
  border-color: var(--vt-on-navy-line);
  color: var(--vt-white);
}

.vt-btn--ghost-light:hover:not(:disabled) {
  background: var(--vt-on-navy-panel-hover);
  border-color: var(--vt-on-navy-faint);
  color: var(--vt-white);
}

.vt-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.vt-btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.vt-btn-row--spaced {
  margin-top: 40px;
}

.vt-btn-row--tight {
  margin-bottom: 34px;
}

/* Text link with a moving arrow. */
.vt-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
  font-size: 0.94rem;
  text-decoration: none;
  color: var(--vt-blue-deep);
}

.vt-arrow-link svg {
  transition: transform 0.16s var(--vt-ease);
}

.vt-arrow-link:hover svg {
  transform: translateX(3px);
}

/* ------------------------------------------------------------- 7. hero -- */

.vt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--vt-navy) 0%, var(--vt-navy) 45%, var(--vt-navy-deep) 100%);
  color: var(--vt-on-navy-strong);
  padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 128px);
}

/* Layer 1: fine grid, fading out toward the bottom. */
.vt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(
      var(--vt-on-navy-grid) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, var(--vt-on-navy-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, black 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 88%);
}

/* Layer 2: an amber glow off the top-right, so the field isn't flat blue. */
.vt-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -280px;
  right: -180px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--vt-sky-glow) 0%,
    var(--vt-blue-wash) 40%,
    transparent 70%
  );
  pointer-events: none;
}

.vt-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.vt-hero h1 {
  font-size: var(--fs-display);
  color: var(--vt-white);
  letter-spacing: -0.032em;
  margin-bottom: 20px;
}

.vt-hero__lede {
  font-size: var(--fs-lede);
  color: var(--vt-on-navy-strong);
  max-width: 34rem;
  margin-bottom: 32px;
}

.vt-hero .vt-eyebrow {
  color: var(--vt-sky);
}

.vt-hero__note {
  margin: 26px 0 0;
  font-size: var(--fs-small);
  color: var(--vt-on-navy-muted);
}

/* Floating panel in the hero's right column. */
.vt-hero__panel {
  background: var(--vt-on-navy-panel);
  border: 1px solid var(--vt-on-navy-panel-hover);
  border-radius: var(--vt-radius);
  padding: 28px;
  backdrop-filter: blur(6px);
  box-shadow: var(--vt-shadow-panel);
}

.vt-hero__panel h2 {
  font-family: var(--vt-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--vt-sky);
  margin-bottom: 18px;
}

.vt-hero__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}

.vt-hero__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--vt-on-navy-strong);
  line-height: 1.5;
}

.vt-hero__list svg {
  flex: none;
  margin-top: 2px;
  color: var(--vt-sky);
}

/* ------------------------------------------------------------ 8. cards -- */

.vt-card {
  background: var(--vt-white);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--vt-shadow-sm);
}

.vt-card h3 {
  margin-bottom: 8px;
}

.vt-card p:last-child {
  margin-bottom: 0;
}

.vt-card--link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s var(--vt-ease), box-shadow 0.18s var(--vt-ease),
    border-color 0.18s var(--vt-ease);
}

.vt-card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--vt-shadow-lg);
  border-color: var(--vt-line);
  color: inherit;
}

.vt-card--link:hover .vt-card__more svg {
  transform: translateX(3px);
}

/* The lead card — used for the primary IT services offering. */
.vt-card--feature {
  position: relative;
  overflow: hidden;
  border-color: var(--vt-line);
  background: linear-gradient(180deg, var(--vt-white) 0%, var(--vt-mist) 100%);
  box-shadow: var(--vt-shadow-md);
}

.vt-card--feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--vt-blue-deep), var(--vt-sky) 85%);
}

.vt-card__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: start;
  margin-top: auto;
  padding-top: 18px;
  color: var(--vt-blue-deep);
  font-weight: 650;
  font-size: 0.92rem;
}

.vt-card__more svg {
  transition: transform 0.18s var(--vt-ease);
}

.vt-badge {
  display: inline-block;
  font-family: var(--vt-mono);
  padding: 5px 11px;
  border-radius: var(--vt-radius-pill);
  background: var(--vt-mist);
  color: var(--vt-blue-deep);
  border: 1px solid var(--vt-blue-ring);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------ 9. icons -- */

.vt-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--vt-mist);
  color: var(--vt-blue-deep);
  border: 1px solid var(--vt-line);
  margin-bottom: 18px;
  flex: none;
}

.vt-icon--accent {
  background: var(--vt-mist);
  color: var(--vt-blue-deep);
  border-color: var(--vt-blue-ring);
}

.vt-icon--lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.vt-icon--bare {
  width: auto;
  height: auto;
  background: none;
  border: 0;
  margin: 0;
  color: var(--vt-blue-deep);
}

/* ------------------------------------------------------------ 10. grid -- */

.vt-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.vt-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.vt-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

/* Primary offering laid out wider than the supporting ones. */
.vt-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.vt-split--middle {
  align-items: center;
}

.vt-split--wide-left {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

/* --------------------------------------------------------- 11. feature -- */

.vt-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 24px;
}

.vt-features li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.vt-features__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--vt-mist);
  color: var(--vt-blue-deep);
  border: 1px solid var(--vt-line);
  flex: none;
}

.vt-features h3 {
  margin-bottom: 5px;
}

.vt-features p {
  margin: 0;
  font-size: 0.955rem;
}

/* Compact checked list. */
.vt-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.vt-checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.97rem;
}

.vt-checks svg {
  flex: none;
  margin-top: 4px;
  color: var(--vt-blue);
}

.vt-section--ink .vt-checks svg {
  color: var(--vt-sky);
}

/* Kept for the reason lists on secondary pages. */
.vt-reasons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.vt-reasons li {
  padding-left: 30px;
  position: relative;
}

.vt-reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--vt-blue);
}

.vt-reasons strong {
  display: block;
  color: var(--vt-ink);
  font-weight: 650;
}

/* ------------------------------------------------------- 12. pull quote -- */

.vt-pull {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, var(--vt-navy), var(--vt-navy-deep));
  border-radius: clamp(18px, 2.5vw, 26px);
  padding: clamp(36px, 5.5vw, 68px);
  box-shadow: var(--vt-shadow-lg);
}

.vt-pull::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -240px;
  left: -120px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--vt-sky-glow) 0%,
    transparent 68%
  );
}

.vt-pull p {
  font-size: clamp(1.24rem, 2.7vw, 1.92rem);
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--vt-white);
  max-width: 30ch;
  margin: 0;
  text-wrap: balance;
}

.vt-pull p em {
  font-style: normal;
  color: var(--vt-sky);
}

.vt-pull p.vt-pull__foot {
  margin-top: 26px;
  font-size: var(--fs-small);
  color: var(--vt-on-navy-muted);
  max-width: 46ch;
}

/* ------------------------------------------------------------ 13. stats -- */

.vt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 2px;
  background: var(--vt-line);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius);
  overflow: hidden;
}

.vt-stat {
  background: var(--vt-white);
  padding: 26px 24px;
}

.vt-stat__value {
  display: block;
  font-family: var(--vt-mono);
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--vt-blue-deep);
  margin-bottom: 8px;
}

.vt-stat__label {
  font-size: 0.925rem;
  margin: 0;
}

/* ------------------------------------------------------------- 14. cta -- */

.vt-cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, var(--vt-navy), var(--vt-navy-deep));
  border-radius: clamp(18px, 2.5vw, 26px);
  padding: clamp(38px, 5vw, 64px);
  text-align: center;
  box-shadow: var(--vt-shadow-lg);
}

.vt-cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -220px;
  right: -140px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--vt-sky-glow) 0%,
    transparent 68%
  );
}

.vt-cta-band h2 {
  color: var(--vt-white);
  margin-bottom: 12px;
}

.vt-cta-band p {
  color: var(--vt-on-navy-strong);
  max-width: 52ch;
  margin: 0 auto 28px;
  font-size: 1.03rem;
}

.vt-cta-band .vt-btn-row {
  justify-content: center;
}

/* ----------------------------------------------------------- 15. prose -- */

.vt-prose {
  max-width: var(--vt-maxw-narrow);
}

.vt-prose h2 {
  margin-top: 2em;
}

.vt-prose h2:first-child {
  margin-top: 0;
}

.vt-prose p {
  font-size: 1.03rem;
}

.vt-prose strong {
  color: var(--vt-ink);
  font-weight: 650;
}

.vt-aside h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.vt-aside h2:not(:first-child) {
  margin-top: 34px;
}

.vt-page-header {
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* ----------------------------------------------------------- 16. forms -- */

.vt-label {
  display: block;
  font-family: var(--vt-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--vt-slate);
  margin-bottom: 9px;
}

.vt-input,
.vt-textarea {
  width: 100%;
  font: inherit;
  color: var(--vt-ink);
  background: var(--vt-white);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius-sm);
  padding: 13px 15px;
  transition: border-color 0.15s var(--vt-ease), box-shadow 0.15s var(--vt-ease);
}

.vt-input:hover,
.vt-textarea:hover {
  border-color: var(--vt-line);
}

.vt-input:focus-visible,
.vt-textarea:focus-visible {
  border-color: var(--vt-blue);
  box-shadow: 0 0 0 3px var(--vt-blue-wash);
  outline: 3px solid var(--vt-blue);
  outline-offset: 1px;
}

.vt-textarea {
  min-height: 168px;
  resize: vertical;
  line-height: 1.6;
}

.vt-input::placeholder,
.vt-textarea::placeholder {
  color: var(--vt-placeholder);
}

.vt-field-note {
  color: var(--vt-slate);
  font-size: var(--fs-small);
  margin: 8px 0 0;
}

.vt-form-row {
  margin-bottom: 20px;
}

.vt-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
}

.vt-form-status {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--vt-radius-sm);
  border: 1px solid var(--vt-line);
  background: var(--vt-mist);
}

.vt-form-status p {
  margin: 0;
}

.vt-form-status strong {
  display: block;
  margin-bottom: 3px;
}

.vt-form-status--error {
  border-color: var(--vt-danger-border);
  background: var(--vt-danger-bg);
}

.vt-form-status--error strong {
  color: var(--vt-danger);
}

.vt-form-status--success {
  border-color: var(--vt-line);
  background: var(--vt-mist);
}

.vt-form-status--success strong {
  color: var(--vt-blue-deep);
}

/* ---------------------------------------------------------- 17. footer -- */

.vt-footer {
  background: var(--vt-navy);
  color: var(--vt-on-navy-muted);
  padding: clamp(44px, 5vw, 64px) 0 32px;
  font-size: 0.93rem;
}

.vt-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--vt-on-navy-line);
}

.vt-footer .vt-logo {
  margin-bottom: 12px;
}

.vt-footer__blurb {
  max-width: 34ch;
  margin: 0;
  color: var(--vt-on-navy-faint);
}

.vt-footer h3 {
  font-family: var(--vt-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--vt-on-navy-faint);
  margin-bottom: 14px;
}

.vt-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.vt-footer a {
  color: var(--vt-on-navy-strong);
  text-decoration: none;
}

.vt-footer a:hover {
  color: var(--vt-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vt-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 26px;
  color: var(--vt-on-navy-faint);
}

.vt-footer__inner p {
  margin: 0;
}

/* ------------------------------------------------------ 18. responsive -- */

@media (max-width: 900px) {
  .vt-hero__inner,
  .vt-split,
  .vt-split--wide-left {
    grid-template-columns: minmax(0, 1fr);
  }

  .vt-hero__panel {
    padding: 24px;
  }
}

@media (max-width: 780px) {
  .vt-header {
    position: static;
  }

  .vt-header__inner {
    min-height: 0;
    padding: 14px 0;
    gap: 12px;
  }

  .vt-nav {
    width: 100%;
    gap: 0 2px;
  }

  .vt-nav a {
    padding: 8px 11px;
    font-size: 0.9rem;
  }

  .vt-nav__cta {
    margin-left: 0;
  }

  .vt-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 520px) {
  .vt-shell {
    padding: 0 18px;
  }

  .vt-logo {
    font-size: 1.375rem;
  }

  .vt-btn {
    width: 100%;
  }

  .vt-btn-row .vt-btn {
    width: 100%;
  }

  .vt-nav a[aria-current="page"]::after {
    left: 11px;
    right: 11px;
  }
}

/* 360px is the narrowest viewport we support. The logo holds its 120px
   minimum, so the shell padding gives way before the wordmark does. */
@media (max-width: 380px) {
  .vt-shell {
    padding: 0 14px;
  }

  .vt-nav a {
    padding: 8px 9px;
    font-size: 0.92rem;
  }

  .vt-nav a[aria-current="page"]::after {
    left: 9px;
    right: 9px;
  }

  .vt-card,
  .vt-pull,
  .vt-cta-band {
    padding: 22px 18px;
  }

  .vt-stat {
    padding: 20px 18px;
  }
}