/* Vantage FP&A shared stylesheet. Linked by every page. No external dependencies. */

/* FONTS, self-hosted variable faces */
@font-face {
  font-family: 'Inter';
  src: url('Inter.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('PlayfairDisplay.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

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

/* DESIGN TOKENS
   Three locked scales, type, space, and measure. Nothing in this file may use a
   font-size, a margin, a padding, or a gap that is not drawn from them. That
   rule is the whole point. A one-off value is invisible on its own and it is
   most of the difference between a site that reads designed and a site that
   reads assembled. If a new value seems necessary, the correct move is almost
   always the nearest step on the scale. */
:root {
  --navy: #0D1F3C;
  --navy-mid: #1A3358;
  --navy-light: #243E6B;
  --gold: #C9A84C;
  --gold-light: #E8C97A;
  --white: #FFFFFF;
  --off-white: #F7F8FA;
  --gray-100: #EEF0F4;
  --gray-400: #8A95A3;
  --gray-600: #4A5568;
  --text: #1A202C;

  /* TYPE SCALE. Fifteen steps, named by size so an off-scale value is obvious
     on sight. Steps 11 through 20 carry the interface, 22 through 64 carry the
     serif display. */
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-22: 22px;
  --t-28: 28px;
  --t-32: 32px;
  --t-36: 36px;
  --t-44: 44px;
  --t-48: 48px;
  --t-56: 56px;
  --t-64: 64px;

  /* Fluid display sizes. Both endpoints are steps on the same scale, so the
     type never lands on a value the system does not own. */
  --t-h1: clamp(var(--t-36), 4.5vw, var(--t-64));
  --t-h1-page: clamp(var(--t-32), 3.6vw, var(--t-48));
  --t-h2: clamp(var(--t-28), 3vw, var(--t-44));

  /* LINE HEIGHT LADDER, five values, no others. */
  --lh-tight: 1.15;
  --lh-display: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* SPACE SCALE, one vertical and horizontal rhythm for the whole site. */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;
  --s-144: 144px;

  /* MEASURE. Line length holds at every viewport instead of being right at one
     width, which is what the old mix of 480, 560, 620, 640, 720 and 760 pixel
     caps produced. */
  --measure: 62ch;
  --measure-wide: 72ch;

  /* LAYOUT RAILS */
  --rail: 1100px;
  --rail-head: 900px;
  --rail-narrow: 720px;
  --nav-h: 68px;
  --hair: 2px;

  /* Mono is declared and deliberately unused. Jurisdiction is evidence, cell
     references, formulas, account codes and file paths, none of which exist on
     the site today. It resolves to faces already on the machine, so it costs
     nothing until the trace component arrives and needs it. */
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Finance readers register column alignment before they register anything
     else, so every digit on the site is the same width. */
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

section[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-24)); }

/* FOCUS, one visible ring on every interactive element.
   Gold on the navy surfaces at 7.1 to 1, navy on the light surfaces at 18 to 1.
   The gold buttons take a navy ring on a white halo, because a gold ring on a
   gold button is invisible on navy and a white ring is invisible on the light
   band, and one of those two grounds is always underneath. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

nav a:focus-visible,
.mobile-menu a:focus-visible,
.hero a:focus-visible,
.page-hero a:focus-visible,
.why a:focus-visible,
.compare-us a:focus-visible,
footer a:focus-visible,
.nav-toggle:focus-visible {
  outline-color: var(--gold);
}

/* Element qualifier keeps this at the same specificity as the surface rules
   above, and it sits later, so a gold button always takes the navy ring rather
   than a gold ring it would disappear into. */
a.btn-primary:focus-visible,
a.nav-cta:focus-visible,
a.mobile-menu-cta:focus-visible {
  outline-color: var(--navy);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.9);
}

/* NAV. Solid navy, no backdrop blur. Solid is more confident and it is one
   less surface for the compositor to redraw on every scroll frame. */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--navy);
  padding: 0 var(--s-48);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

/* Nav content rides the same 1100px centered grid as every section */
.nav-inner {
  width: 100%;
  max-width: var(--rail);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-20);
  color: var(--white);
  letter-spacing: 0.02em;
}

.nav-logo span { color: var(--gold); }
.nav-logo a { display: block; line-height: 0; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-32);
  list-style: none;
}

.nav-links a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--gold); }

.nav-links a.is-current {
  color: var(--white);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--gold);
}

.nav-cta {
  background: var(--gold);
  color: var(--navy) !important;
  padding: var(--s-12) var(--s-24);
  border-radius: 3px;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  transition: background 0.2s !important;
}

.nav-cta:hover { background: var(--gold-light); color: var(--navy) !important; }

/* MOBILE NAV */
.nav-toggle {
  display: none;
  width: var(--s-40);
  height: var(--s-40);
  margin-right: calc(var(--s-8) * -1);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Drawn-glyph geometry, not layout rhythm. The bar width, the hairline
     thickness and this gap describe an icon, so they are the one place in the
     file that is deliberately off the space scale. */
  gap: 5px;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 99;
  background: var(--navy);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height 0.28s ease, visibility 0.28s ease;
}

.mobile-menu.open { max-height: 520px; visibility: visible; }

.mobile-menu ul { list-style: none; padding: var(--s-8) var(--s-24) var(--s-24); }

.mobile-menu a {
  display: block;
  padding: var(--s-16) 0;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: color 0.28s ease;
}

.mobile-menu a:hover, .mobile-menu a:focus { color: var(--gold); }
.mobile-menu a.is-current { color: var(--gold); }

.mobile-menu .mobile-menu-cta {
  margin-top: var(--s-24);
  padding: var(--s-16) 0;
  text-align: center;
  background: var(--gold);
  color: var(--navy);
  border-bottom: 0;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: background 0.28s ease;
}

.mobile-menu .mobile-menu-cta:hover, .mobile-menu .mobile-menu-cta:focus { background: var(--gold-light); color: var(--navy); }

/* HERO, home only */
/* No 100vh lock. The hero is sized by its content so the capability tape peeks
   above the fold and acts as the scroll affordance, instead of the block being
   vertically centred in a viewport-tall box with dead navy above and below.
   Composition is a single left-aligned stack on the same 1100px rail every
   section below uses, which is also the composition the five interior page
   heroes already use. One vertical left edge runs the whole page.
   The radial gold wash that used to sit in the upper right is gone. An ambient
   gradient field is the visual signature of the category this site is trying
   not to be in, and a firm that sells composure does not decorate. What is left
   is flat navy, the gold eyebrow rule, the gold italic clause, the gold rule on
   the hero line, and the hairline at the foot of the section. */
.hero {
  background: var(--navy);
  padding: var(--s-144) var(--s-48) var(--s-96);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);
}

.hero-inner {
  max-width: var(--rail);
  margin: 0 auto;
  width: 100%;
}

.hero-eyebrow {
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-24);
  display: flex;
  align-items: center;
  gap: var(--s-12);
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: var(--s-32);
  height: 1px;
  background: var(--gold);
}

/* Homepage hero sits on the navy panel above the gold hero-line, so its
   eyebrow takes white instead of the gold used on page-hero (subpage)
   eyebrows, same type scale and letter-spacing otherwise. */
.hero .hero-eyebrow {
  color: var(--white);
}

.hero .hero-eyebrow::before {
  background: var(--white);
}

/* The balance keyword evens the two lines out so the break lands on the clause
   boundary, prove the numbers over make the call, instead of stranding a
   two-word second line. Browsers without it fall back to a ragged break inside
   the same max-width. */
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h1);
  font-weight: 400;
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  max-width: var(--rail-head);
  text-wrap: balance;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold);
}

.hero-sub {
  font-size: var(--t-18);
  line-height: var(--lh-loose);
  color: rgba(255,255,255,0.65);
  margin-top: var(--s-32);
  font-weight: 300;
  max-width: var(--measure-wide);
}

/* The couplet that used to caption the removed figure, promoted into the hero
   stack. It closes the paragraph and gives the block a gold beat below the
   headline, so the composition is headline, argument, claim, action. */
.hero-line {
  margin-top: var(--s-24);
  font-size: var(--t-14);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(201,168,76,0.92);
  padding-left: var(--s-16);
  border-left: 1px solid rgba(201,168,76,0.5);
  max-width: var(--measure-wide);
}

.hero-actions {
  display: flex;
  gap: var(--s-16);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s-40);
}

.btn-primary {
  background: var(--gold);
  color: var(--navy);
  padding: var(--s-16) var(--s-32);
  border-radius: 3px;
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
  display: inline-block;
}

.btn-primary:hover { background: var(--gold-light); }

.btn-ghost {
  color: rgba(255,255,255,0.6);
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  transition: color 0.2s;
}

.btn-ghost:hover { color: var(--white); }
.btn-ghost::after { content: '\2192'; }

/* PAGE HERO, interior pages */
.page-hero {
  background: var(--navy);
  padding: var(--s-144) var(--s-48) var(--s-96);
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);
}

.page-hero-inner {
  max-width: var(--rail);
  margin: 0 auto;
  width: 100%;
}

.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h1-page);
  font-weight: 400;
  color: var(--white);
  line-height: var(--lh-display);
  margin-bottom: var(--s-24);
  letter-spacing: -0.01em;
  max-width: var(--rail-head);
}

.page-hero h1 em { font-style: italic; color: var(--gold); }

.page-hero-sub {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: rgba(255,255,255,0.65);
  font-weight: 300;
  max-width: var(--measure-wide);
}

.page-hero-actions {
  display: flex;
  gap: var(--s-16);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s-40);
}

/* CATALOG STRIP, additive per Nic's 2026-07-29 homepage rework. Restyled the
   same day: the flat bulleted list read assembled next to the designed
   sections, so the six items now ride the house card grid. Everything here is
   the existing vocabulary at a quieter register: the hairline-gap grid and
   off-white cells from .process-steps, the small gold index in the .step-phase
   style, a .why-title weight lead over a .step-desc qualifier, and the one
   house motion idea, the gold rule drawing left to right on hover. The indices
   are CSS counters, not markup, because the strip's copy is approved verbatim
   and generated content keeps the visible text identical to the approved list. */
.catalog-strip {
  padding: var(--s-64) var(--s-48);
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
}

.catalog-grid {
  list-style: none;
  counter-reset: catalog;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--hair);
}

.catalog-item {
  counter-increment: catalog;
  background: var(--off-white);
  padding: var(--s-24) var(--s-32) var(--s-32);
  position: relative;
}

.catalog-item::before {
  content: counter(catalog, decimal-leading-zero);
  display: block;
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: var(--s-12);
}

.catalog-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: var(--s-32); right: var(--s-32);
  height: var(--hair);
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.3s;
  transform-origin: left;
}

.catalog-item:hover::after { transform: scaleX(1); }

.catalog-lead {
  display: block;
  font-size: var(--t-16);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
  line-height: var(--lh-snug);
  margin-bottom: var(--s-8);
}

.catalog-rest {
  display: block;
  font-size: var(--t-14);
  line-height: var(--lh-normal);
  color: var(--gray-600);
  font-weight: 300;
  max-width: var(--measure);
}

/* BENEFIT STRIP variant of the catalog grid, four items instead of three, no
   counter badge (a visible index next to "Three doors into the same engine"
   would read as a second step sequence on the same page). */
.catalog-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.catalog-item.no-index::before { content: none; }

/* CAPABILITY TAPE, full-bleed dulled gold ground, navy type, 45px per second,
   one row at every width. The ground is the house gold #C9A84C at full strength,
   which is the muted antique gold the bar carried before the six-page split, not
   a saturated yellow. Navy type on it measures 7.2 to 1, so it clears AA at this
   size with headroom and AAA as well.
   The ground stays solid edge to edge. The edge fade lives on the viewport
   inside it, so the type fades out at both ends without the bar itself tapering
   into the page. */
.cap-tape {
  background: var(--gold);
  /* No border-top: moved 2026-07-30 to sit directly under .hero, which already
     draws its own gold gradient hairline along its bottom edge (.hero::after).
     A second line here doubled that edge into a visible seam. */
  border-bottom: 1px solid rgba(13, 31, 60, 0.22);
  padding: var(--s-16) 0;
  white-space: nowrap;
}

.cap-tape-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}

.cap-tape-track {
  display: inline-flex;
  /* 45px per second, held. Measured with Inter loaded, one copy of the
     seven-item track is 1569.5px at this spacing, so 1569.5 / 45 = 34.9s.
     If the item list or the item spacing changes, remeasure one copy with the
     webfont applied and reset duration to width / 45. */
  animation: cap-tape 34.9s linear infinite;
  will-change: transform;
}

.cap-tape:hover .cap-tape-track,
.cap-tape:focus-within .cap-tape-track { animation-play-state: paused; }

.cap-tape:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }

.cap-tape-list {
  display: flex;
  align-items: center;
  list-style: none;
}

.cap-tape-list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: var(--lh-snug);
}

.cap-tape-list li::after {
  content: '\00B7';
  color: rgba(13, 31, 60, 0.45);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 var(--s-24);
}

@keyframes cap-tape {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* SECTIONS */
.how {
  padding: var(--s-120) var(--s-48);
  background: var(--white);
}

.section-inner {
  max-width: var(--rail);
  margin: 0 auto;
}

.section-header {
  margin-bottom: var(--s-64);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-48);
  align-items: center;
}

.section-eyebrow {
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-12);
}

.section-eyebrow::before {
  content: '';
  display: block;
  width: var(--s-24);
  height: 1px;
  background: var(--gold);
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h2);
  font-weight: 400;
  color: var(--navy);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
}

.section-desc {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  font-weight: 300;
  align-self: end;
  max-width: var(--measure);
}

/* PROCESS STEPS */
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hair);
  margin-top: var(--s-64);
}

/* The card no longer lifts on hover. A card that jumps is a template gesture
   and it is the opposite of the composure this site is selling. The one motion
   idea on the site is the gold rule drawing left to right, and it does all the
   hover work everywhere. */
.process-step {
  background: var(--off-white);
  padding: var(--s-48) var(--s-40);
  position: relative;
}

.process-step::after {
  content: '';
  position: absolute;
  bottom: 0; left: var(--s-40); right: var(--s-40);
  height: var(--hair);
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.3s;
  transform-origin: left;
}

.process-step:hover::after { transform: scaleX(1); }

.step-phase {
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-12);
}

.step-num {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-56);
  color: rgba(13, 31, 60, 0.08);
  line-height: 1;
  margin-bottom: var(--s-16);
  font-weight: 400;
}

.step-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-22);
  font-weight: 500;
  color: var(--navy);
  margin-bottom: var(--s-16);
  line-height: var(--lh-snug);
}

.step-desc {
  font-size: var(--t-14);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  font-weight: 300;
  margin-bottom: var(--s-24);
  max-width: var(--measure);
}

.step-detail {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  padding: var(--s-12) var(--s-16);
  background: var(--white);
  border-left: var(--hair) solid var(--gold);
  line-height: var(--lh-normal);
}

/* THE MODEL, linked-bubbles progression */
.flow {
  margin-top: var(--s-64);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.flow-node {
  position: relative;
  padding: 0 var(--s-24);
  text-align: center;
}

.flow-bubble {
  width: var(--s-96);
  height: var(--s-96);
  margin: 0 auto var(--s-32);
  border-radius: 50%;
  border: var(--hair) solid var(--navy);
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: var(--t-36);
  color: var(--gold);
  position: relative;
  z-index: 2;
  line-height: 1;
}

.flow-digit {
  display: block;
  transform: translateY(-0.15em);
}

.flow-node:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 47px;
  left: calc(50% + 52px);
  width: calc(100% - 112px);
  height: var(--hair);
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.3), var(--gold));
  z-index: 1;
}

.flow-node:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 42px;
  left: calc(150% - 56px);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--gold);
  z-index: 2;
}

.flow-phase {
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-12);
}

.flow-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-22);
  font-weight: 500;
  color: var(--navy);
  margin-bottom: var(--s-16);
  line-height: var(--lh-snug);
}

.flow-desc {
  font-size: var(--t-14);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  font-weight: 300;
  margin-bottom: var(--s-24);
  max-width: var(--measure);
}

.flow-chip {
  display: inline-block;
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  padding: var(--s-8) var(--s-16);
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 3px;
  line-height: var(--lh-snug);
}

/* SERVICES */
.services {
  padding: var(--s-120) var(--s-48);
  background: var(--off-white);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hair);
}

.services-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.service-card {
  background: var(--white);
  padding: var(--s-48) var(--s-40);
  position: relative;
  display: flex;
  flex-direction: column;
}

.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: var(--s-40); right: var(--s-40);
  height: var(--hair);
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.3s;
  transform-origin: left;
}

.service-card:hover::after { transform: scaleX(1); }

.service-icon {
  width: var(--s-48);
  height: var(--s-48);
  margin-bottom: var(--s-24);
  color: var(--gold);
}

.service-tag {
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-12);
}

.service-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-22);
  font-weight: 500;
  color: var(--navy);
  margin-bottom: var(--s-16);
  line-height: var(--lh-snug);
}

.service-desc {
  font-size: var(--t-14);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  font-weight: 300;
  margin-bottom: var(--s-24);
  max-width: var(--measure);
}

.service-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.service-bullets li {
  font-size: var(--t-13);
  color: var(--gray-600);
  padding-left: var(--s-16);
  position: relative;
  line-height: var(--lh-normal);
  max-width: var(--measure);
}

.service-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 1px;
  background: var(--gold);
}

/* CARD LINK, routes a card into its page */
.card-link {
  margin-top: auto;
  padding-top: var(--s-24);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  transition: color 0.2s;
}

.card-link::after { content: '\2192'; }
.card-link:hover { color: var(--gold); }

/* WHY VANTAGE, navy band. The radial gold glow that used to sit in the lower
   right is gone, for the same reason the hero glow is gone. */
.why {
  padding: var(--s-120) var(--s-48);
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.why .section-title { color: var(--white); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hair);
  margin-top: var(--s-64);
}

.why-item {
  padding: var(--s-48);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.2s;
}

.why-item:hover { border-color: rgba(201,168,76,0.3); }

.why-number {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-56);
  color: var(--gold);
  line-height: 1;
  margin-bottom: var(--s-24);
  font-weight: 400;
}

.why-title {
  font-size: var(--t-16);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--s-12);
  letter-spacing: 0.01em;
  line-height: var(--lh-snug);
}

.why-desc {
  font-size: var(--t-14);
  line-height: var(--lh-loose);
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  max-width: var(--measure);
}

.why-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.why-footer {
  margin-top: var(--s-48);
  position: relative;
  z-index: 2;
}

/* WHY VANTAGE, stacked statement rows on a light band */
.why-alt {
  padding: var(--s-120) var(--s-48);
  background: var(--off-white);
}

.why-alt .section-title { color: var(--navy); }

.why-rows {
  margin-top: var(--s-48);
  border-top: 1px solid var(--gray-100);
}

/* The row used to shove itself 12px to the right on hover. Same house gesture
   as the cards now, the gold rule draws left to right along the bottom of the
   row and nothing moves. */
.why-row {
  display: grid;
  grid-template-columns: var(--s-96) 1fr;
  gap: var(--s-40);
  padding: var(--s-40) var(--s-4);
  border-bottom: 1px solid var(--gray-100);
  align-items: baseline;
  position: relative;
}

.why-row::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.3s;
  transform-origin: left;
}

.why-row:hover::after { transform: scaleX(1); }

.why-row-num {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-48);
  color: var(--gold);
  line-height: 1;
  font-weight: 400;
}

.why-row-title {
  font-size: var(--t-18);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--s-12);
  letter-spacing: 0.01em;
  line-height: var(--lh-snug);
}

.why-row-desc {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  font-weight: 300;
  max-width: var(--measure);
}

/* VS ENTERPRISE, and the two-column exhibit it is reused for */
.vs {
  padding: var(--s-120) var(--s-48);
  background: var(--white);
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hair);
  margin-top: var(--s-48);
  border: 1px solid var(--gray-100);
}

.compare-col { padding: var(--s-48) var(--s-40); background: var(--off-white); }
.compare-us { background: var(--navy); }

.compare-head {
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--s-24);
  padding-bottom: var(--s-16);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.compare-them .compare-head { color: var(--gray-400); }
.compare-us .compare-head { color: var(--gold); border-bottom-color: rgba(201,168,76,0.25); }

.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-16); }

.compare-col li {
  font-size: var(--t-14);
  line-height: var(--lh-normal);
  padding-left: var(--s-24);
  position: relative;
  max-width: var(--measure);
}

.compare-them li { color: var(--gray-600); }
.compare-us li { color: rgba(255,255,255,0.85); }
.compare-them li::before { content: '\00d7'; position: absolute; left: 0; color: var(--gray-400); font-weight: 600; }
.compare-us li::before { content: '\2713'; position: absolute; left: 0; color: var(--gold); font-weight: 600; }

.compare.compare-neutral .compare-them li::before,
.compare.compare-neutral .compare-us li::before { content: '\2013'; }

.compare-note {
  margin-top: var(--s-24);
  font-size: var(--t-12);
  line-height: var(--lh-normal);
  color: var(--gray-400);
  font-weight: 300;
  max-width: var(--measure);
}

.vs-body { margin-top: var(--s-48); }

.vs-body p {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  font-weight: 300;
  max-width: var(--measure);
}

.vs-kicker {
  margin-top: var(--s-24);
  font-family: 'Playfair Display', serif;
  font-size: var(--t-22) !important;
  line-height: var(--lh-snug) !important;
  color: var(--navy) !important;
  font-weight: 500 !important;
}

/* PROSE BLOCK */
.prose { max-width: var(--measure); margin-top: var(--s-40); }

.prose p {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  font-weight: 300;
  margin-bottom: var(--s-24);
}

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

.prose a { color: var(--navy); }

/* CONTACT */
.contact {
  padding: var(--s-120) var(--s-48);
  background: var(--white);
}

.contact-inner {
  max-width: var(--rail-narrow);
  margin: 0 auto;
  text-align: center;
}

.contact-inner .section-eyebrow { justify-content: center; }

.contact-lead {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  font-weight: 300;
  margin: var(--s-24) auto var(--s-32);
  max-width: var(--measure);
}

.contact-btn { margin-bottom: var(--s-64); }

.contact-detail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-48);
  padding-top: var(--s-40);
  border-top: 1px solid var(--gray-100);
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  text-align: center;
}

.contact-label {
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.contact-value {
  font-size: var(--t-16);
  color: var(--navy);
  font-weight: 400;
}

.contact-value a {
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s;
}

.contact-value a:hover { color: var(--gold); }

/* CTA BAND, repeated at the foot of every page */
.cta-band {
  background: var(--off-white);
  border-top: 1px solid var(--gray-100);
  padding: var(--s-80) var(--s-48);
}

.cta-band-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-48);
  align-items: center;
}

.cta-band-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-28);
  font-weight: 500;
  color: var(--navy);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-12);
}

.cta-band-desc {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  font-weight: 300;
  max-width: var(--measure);
}

.cta-band-desc a { color: var(--navy); }

/* FOOTER */
footer {
  background: var(--navy);
  padding: var(--s-40) var(--s-48);
  border-top: 1px solid rgba(201,168,76,0.2);
}

/* Footer content rides the same 1100px centered grid as every section */
.footer-inner {
  max-width: var(--rail);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-24);
}

.footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-16);
  color: var(--white);
}

.footer-logo span { color: var(--gold); }

.footer-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-24);
  justify-content: flex-end;
}

.footer-nav a {
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover { color: var(--gold); }

.footer-copy {
  flex-basis: 100%;
  font-size: var(--t-12);
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}

.footer-legal {
  flex-basis: 100%;
  font-size: var(--t-12);
  line-height: var(--lh-normal);
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  max-width: var(--rail-head);
}

/* RESPONSIVE
   Four tiers rather than one. The old stylesheet jumped straight from the full
   desktop grid to a 900px phone layout, which left every three-column grid
   running at three columns on a 1024 laptop and an iPad in landscape, at
   roughly 27 characters of measure. */

/* Tier 1, below the point where the 1100px rail meets its 48px gutters. Pull
   the gutters in so the rail keeps its air instead of the content crowding the
   viewport edge. */
@media (max-width: 1196px) {
  nav, footer,
  .hero, .page-hero, .how, .services, .why, .why-alt, .vs, .contact, .cta-band,
  .catalog-strip {
    padding-left: var(--s-32);
    padding-right: var(--s-32);
  }
  /* The nav collapses HERE, not at 900. Measured 2026-07-24: with seven items
     the full link row needs roughly 1150px plus gutters, so between 901 and
     1196 the old rule wrapped "DEAL DILIGENCE" and spilled the gold CTA text
     out of its own box, exactly the band of a non-maximized laptop window or
     an iPad in landscape. The hamburger takes the whole band instead. */
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu { display: block; }
}

/* Tier 2, tablet landscape and small laptops. Three-column grids drop to two.
   A three-item grid then leaves one card on the second row, so that card takes
   the full width deliberately rather than sitting half-wide next to a hole. */
@media (max-width: 1024px) {
  .services-grid,
  .process-steps,
  .catalog-grid,
  .why-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }

  .catalog-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }

  .services-grid > :last-child:nth-child(odd),
  .process-steps > :last-child:nth-child(odd),
  .why-grid.cols-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  .how, .services, .why, .why-alt, .vs, .contact { padding-top: var(--s-96); padding-bottom: var(--s-96); }
  .hero { padding-top: var(--s-120); padding-bottom: var(--s-80); }
  .page-hero { padding-top: var(--s-120); padding-bottom: var(--s-80); }
  .flow-node { padding: 0 var(--s-16); }
}

/* Tier 3, phone and small tablet. Everything single column. */
@media (max-width: 900px) {
  nav { padding-left: var(--s-24); padding-right: var(--s-24); }
  .hero { padding: var(--s-120) var(--s-24) var(--s-64); }
  .hero-sub { margin-top: var(--s-24); }
  .hero-line { margin-top: var(--s-24); }
  .hero-actions { margin-top: var(--s-32); }
  .page-hero { padding: var(--s-120) var(--s-24) var(--s-64); }
  .cap-tape-viewport {
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  .cap-tape-list li::after { margin: 0 var(--s-16); }
  /* Remeasured at this spacing. One copy is 1457.5px, so 1457.5 / 45 = 32.4s. */
  .cap-tape-track { animation-duration: 32.4s; }
  .how { padding: var(--s-80) var(--s-24); }
  .services { padding: var(--s-80) var(--s-24); }
  .catalog-strip { padding: var(--s-48) var(--s-24); }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-grid.cols-4 { grid-template-columns: 1fr; }
  .section-header { grid-template-columns: 1fr; gap: var(--s-24); }
  .process-steps { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; gap: var(--s-64); }
  .flow-node { padding: 0; }
  .flow-node:not(:last-child)::after {
    top: auto;
    bottom: -47px;
    left: 50%;
    width: var(--hair);
    height: 30px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.3), var(--gold));
  }
  .flow-node:not(:last-child)::before {
    top: auto;
    bottom: -55px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--gold);
    border-bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
  }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid.cols-2 { grid-template-columns: 1fr; }
  .services-grid > :last-child:nth-child(odd),
  .process-steps > :last-child:nth-child(odd),
  .why-grid.cols-3 > :last-child:nth-child(odd) { grid-column: auto; }
  .why { padding: var(--s-80) var(--s-24); }
  .why-grid { grid-template-columns: 1fr; }
  .why-grid.cols-3 { grid-template-columns: 1fr; }
  .why-item { padding: var(--s-40) var(--s-32); }
  .why-alt { padding: var(--s-80) var(--s-24); }
  .why-row { grid-template-columns: 1fr; gap: var(--s-12); padding: var(--s-32) 0; }
  .vs { padding: var(--s-80) var(--s-24); }
  .compare { grid-template-columns: 1fr; }
  .contact { padding: var(--s-80) var(--s-24); }
  .contact-inner { grid-template-columns: 1fr; gap: var(--s-64); }
  .cta-band { padding: var(--s-64) var(--s-24); }
  .cta-band-inner { grid-template-columns: 1fr; gap: var(--s-24); }
  footer { padding: var(--s-32) var(--s-24); }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--s-16); text-align: left; }
  .footer-nav { justify-content: flex-start; gap: var(--s-16); }
}

/* Tier 4, small phones. Card and panel padding comes in so the measure inside a
   card does not collapse to a column of two-word lines. */
@media (max-width: 560px) {
  .service-card, .process-step { padding: var(--s-40) var(--s-24); }
  .service-card::after, .process-step::after { left: var(--s-24); right: var(--s-24); }
  .catalog-item { padding: var(--s-24); }
  .catalog-item::after { left: var(--s-24); right: var(--s-24); }
  .why-item { padding: var(--s-32) var(--s-24); }
  .compare-col { padding: var(--s-32) var(--s-24); }
  .contact-detail { gap: var(--s-32); }
  .hero-actions, .page-hero-actions { gap: var(--s-12); }
}

/* REDUCED MOTION. Nothing on this site animates for a visitor who has asked the
   operating system for less of it, and the capability tape becomes a single
   swipeable row rather than reflowing into a multi-line block. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .cap-tape-track { animation: none; transform: none; }
  .cap-tape-track [aria-hidden="true"] { display: none; }
  .cap-tape-viewport {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cap-tape-viewport::-webkit-scrollbar { display: none; }
  .service-card::after, .process-step::after, .why-row::after, .catalog-item::after { transition: none; }
}

/* PRINT */
@media print {
  nav, .mobile-menu, .nav-toggle, .cta-band, .cap-tape { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .hero, .page-hero, .why, footer { background: #FFFFFF !important; color: #000000; }
  .hero h1, .page-hero h1, .why .section-title, .why-title, .footer-logo { color: #000000 !important; }
  .hero-sub, .page-hero-sub, .why-desc, .footer-legal { color: #333333 !important; }
  .hero { min-height: 0; padding: var(--s-24) 0; }
  .page-hero { padding: var(--s-24) 0; }
  .services-grid, .why-grid, .why-grid.cols-3, .compare, .flow, .process-steps, .catalog-grid { grid-template-columns: 1fr !important; }
  .compare-us { background: #FFFFFF !important; }
  .compare-us li { color: #000000 !important; }
  a { text-decoration: none; color: #000000; }
}