/* ============================================================
   VANTAGE SEARCH — SENDING-DOMAIN PAGES
   The look of vantagesearch.com (wheelhouse apps/web/public/vantage.css): Ink + White surfaces,
   Indigo as signal, Inter Tight with JetBrains Mono eyebrows. Fonts are served from this site:
   no request leaves it (see the Content-Security-Policy in vercel.json).
   ============================================================ */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
}

:root {
  /* Brand palette — Vantage Brand Guidelines, May 2026 */
  --ink:          #0C0A09;
  --ink-80:       #2A2724;
  --ink-50:       #6B6660;
  --white:        #FFFFFF;
  --indigo:       #4F46E5;
  --indigo-deep:  #4338CA;
  --indigo-light: #A5B4FC;
  --indigo-soft:  #EEF2FF;
  --rule:         #E7E5E0;

  --max-w: 1320px;
  --pad-x: clamp(24px, 4.5vw, 72px);

  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: clamp(96px, 12vw, 160px);

  --sans: 'Inter Tight', system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-80);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--indigo); color: var(--white); }
a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

h1, h2, h3 { font-family: var(--sans); color: var(--ink); font-weight: 700; }
.signal { color: var(--indigo); }
.arr { display: inline-block; transition: transform .15s ease; }

.section {
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-top: 1px solid var(--rule);
}

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  height: 72px;
}
.brand { display: inline-flex; align-items: center; }
.brand-lockup { display: block; height: 36px; width: auto; flex-shrink: 0; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.005em;
  color: var(--white);
  background: var(--indigo);
  padding: 11px 18px;
  white-space: nowrap;
  transition: background .15s ease;
}
.nav-cta:hover { background: var(--indigo-deep); }
.nav-cta:hover .arr { transform: translateX(3px); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px;
  padding: 0 28px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--indigo); color: var(--white); border-color: var(--indigo); }
.btn-primary:hover { background: var(--indigo-deep); border-color: var(--indigo-deep); }
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--white); }
.btn-on-ink { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-on-ink:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- HERO — the landing page's splash, with the V/ ghost mark ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(72px, 9vw, 136px);
}
.hero-grid { position: relative; z-index: 2; }
.display {
  font-weight: 700;
  font-size: clamp(44px, 7vw, 104px);
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: var(--ink);
}
.hero-eyebrow {
  display: inline-block;
  margin-top: var(--sp-7);
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--indigo);
}
.hero-body {
  margin-top: var(--sp-5);
  max-width: 52ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-80);
}
.hero-body strong { font-weight: 600; color: var(--ink); }
.hero-coverage {
  margin-top: var(--sp-5);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.hero-coverage .sep { color: var(--indigo); font-weight: 500; margin: 0 0.28em; }
.hero-ctas { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: 12px; }

.hero-mark {
  position: absolute;
  right: clamp(-160px, -7vw, -60px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(560px, 64vw, 1180px);
  z-index: 1;
  pointer-events: none;
}
.hero-mark svg { width: 100%; height: auto; }
.hero-mark .v-shape { fill: var(--rule); }
.hero-mark .slash-shape { fill: var(--indigo-light); }

/* ---------- ABOUT THIS DOMAIN — the indigo band, with the white V/ watermark ---------- */
.band {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  color: rgba(255, 255, 255, 0.92);
  border-top: 0;
}
.band.section { padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(80px, 9vw, 140px); }
.band-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: end;
}
.band-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-4);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--indigo-light);
}
.band-display {
  color: var(--white);
  font-size: clamp(40px, 5.6vw, 84px);
  letter-spacing: 0.01em;
  line-height: 1.04;
  max-width: 12ch;
}
.band-body p {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  max-width: 34ch;
}
.band-body p + p { margin-top: 1em; }
.band-body strong { color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.band-body .btn { margin-top: var(--sp-6); }
.band-mark {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(700px, 78vw, 1500px);
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
}
.band-mark svg { width: 100%; height: auto; }
.band-mark path { fill: var(--white); }

/* ---------- NOTES — opting out, and personal data ---------- */
.notes.section { border-top: 0; padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.position-cards {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
.position-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--rule);
}
.position-card-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--indigo);
}
.position-card-body {
  flex: 1;
  max-width: 32ch;
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.position-card-link {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  overflow-wrap: anywhere;
  transition: color .15s ease, border-color .15s ease;
}
.position-card-link:hover { color: var(--indigo); border-color: var(--indigo); }
.position-card-link:hover .arr { transform: translateX(3px); }

/* ---------- FOOTER ---------- */
.footer {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  background: var(--white);
}
.footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.footer-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand-lockup--footer { height: 26px; }
.footer-line { font-weight: 500; font-size: 14px; letter-spacing: 0.01em; color: var(--indigo); }
.footer-meta {
  display: inline-flex; flex-wrap: wrap; gap: var(--sp-5);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.footer-meta a:hover { color: var(--ink); }

/* ---------- WIDE SCREENS ---------- */
@media (min-width: 720px) {
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-6); }
}
@media (min-width: 900px) {
  .band-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(56px, 7vw, 120px); }
  .position-cards { grid-template-columns: 1fr 1fr; }
  .position-card { padding-right: var(--sp-8); border-bottom: 0; border-right: 1px solid var(--rule); }
  .position-card + .position-card { padding-right: 0; padding-left: var(--sp-8); border-right: 0; }
}

/* ---------- PHONES ---------- */
@media (max-width: 900px) {
  .band-mark { width: 140vw; right: -30vw; top: auto; bottom: -10%; transform: none; opacity: 0.12; }
}
@media (max-width: 899px) {
  .band-body { padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.20); }
}
@media (max-width: 720px) {
  .brand-lockup { height: 28px; }
  .brand-lockup--footer { height: 24px; }
  .nav-cta { padding: 11px 14px; font-size: 13px; min-height: 40px; }
  .hero-mark { width: 150vw; right: -45vw; top: 60%; opacity: 0.55; }
  .section { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
  .btn { min-height: 48px; }
  .footer-meta { font-size: 10px; gap: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  .arr, .btn, .nav-cta, .position-card-link { transition: none; }
}