:root {
  --navy: #03033e;
  --navy2: #10102b;
  --cream: #f7f5f1;
  --paper: #fcfbf9;
  --champagne: #c1b7a8;
  --rose: #b8918a;
  --ink: #03033e;
  --muted: #6f6869;
  --line: rgba(3, 3, 62, .13);
}

body { background: var(--paper); }

/* The navy supports the identity here; it does not fill the page. */
.site-header {
  color: var(--navy);
  background: rgba(252, 251, 249, .96);
  border-bottom-color: rgba(3, 3, 62, .10);
}

.site-header.scrolled {
  background: rgba(252, 251, 249, .98);
  box-shadow: 0 8px 30px rgba(3, 3, 62, .07);
}

.brand-mark {
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: .96;
}

.footer-brand .brand-mark {
  width: 58px;
  height: 58px;
}
.dealer-logo {
  width: 205px;
  margin-top: 20px;
}
.dealer-logo img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
}
.member-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
  margin-top: 26px;
  padding: 20px 24px;
  background: #f7f5f1;
}
.member-logos img {
  display: block;
  height: auto;
  object-fit: contain;
}
.member-logos img:first-child { width: 68px; }
.member-logos img:last-child { width: 108px; }

.primary-nav a:not(.nav-cta)::after { background: var(--rose); }
.nav-cta { border-color: rgba(3, 3, 62, .34); }
.menu-toggle { color: var(--navy); }

/* A light veil gives the words room without hiding Clay's photograph. */
.hero {
  color: var(--navy);
  background: #eae9e5;
}

.hero-photo { overflow: hidden; }

.hero-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(252, 251, 249, .98) 0%, rgba(252, 251, 249, .91) 34%, rgba(252, 251, 249, .44) 58%, rgba(252, 251, 249, .05) 82%),
    linear-gradient(0deg, rgba(252, 251, 249, .58), transparent 36%);
}

.eyebrow { color: #994c58; }
.hero h1 em {
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}
.hero-copy { color: #29294e; }
.button-light {
  color: #fff;
  background: var(--navy);
  box-shadow: none;
}
.button-light:hover { color: #fff; background: #171752; }
.photo-caption {
  padding: 13px 48px 14px;
  color: #6f6869;
  background: #fcfbf9;
  border-bottom: 1px solid var(--line);
}
.photo-caption p {
  width: min(1180px, 100%);
  margin: 0 auto;
  font-size: 11px;
  line-height: 1.55;
  font-style: italic;
  text-align: right;
}

/* Quiet, open fields with accents used only to guide the eye. */
.why { background: #f7f5f1; }
.section-number { color: #994c58; }
.why h2::after { background: var(--rose); }
.conclusion .that {
  color: inherit;
  font-size: calc(1em + .5pt);
  font-weight: 600;
  font-style: italic;
}

.pillars {
  color: var(--navy);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.pillars-heading h2 em { color: var(--rose); }
.pillars-heading .section-number { text-align: left; }
.pillar-grid {
  border-color: var(--line);
}
.pillar + .pillar { border-color: var(--line); }
.pillar-icon,
.pillar h3 { color: #994c58; }
.pillar p { color: #615e68; }
.pillar small { color: #87818a; }
.pillar a {
  color: var(--navy);
  border-color: var(--line);
}
.pillar a span { color: #994c58; }

/* One deep anchor at the end is enough. */
footer {
  padding-top: 0;
  background: #03033e;
}
.footer-top {
  position: relative;
  padding-top: 72px;
  color: var(--navy);
  background: #f7f5f1;
  box-shadow: 0 0 0 100vmax #f7f5f1;
  clip-path: inset(0 -100vmax);
}
.footer-top h5 { color: #994c58; }
.footer-top p,
.footer-top a { color: #615e68; }
.footer-brand p { color: var(--navy); }
.pending-detail { color: #a99ca0; font-style: italic; }
.disclosures {
  padding: 34px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.disclosures h5 {
  margin: 0 0 18px;
  color: #e1c3c8;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.disclosures p {
  margin: 0 0 10px;
  color: #9da9ac;
  font-size: 9px;
  line-height: 1.75;
}

@media (max-width: 950px) {
  .primary-nav { background: rgba(252, 251, 249, .99); }
  .pillar + .pillar { border-left: 0; border-top-color: var(--line); }
}

@media (max-width: 600px) {
  .hero-image { object-position: 59% center; }
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(252, 251, 249, .97), rgba(252, 251, 249, .67)),
      linear-gradient(0deg, rgba(252, 251, 249, .70), transparent 44%);
  }
  .photo-caption { padding: 12px 24px 13px; }
  .photo-caption p { text-align: left; }
}