:root {
  --vsg-navy: #0f2044;
  --vsg-deep: #07142d;
  --vsg-blue: #172f5e;
  --vsg-cream: #f6f3ec;
  --vsg-paper: #fffdf8;
  --vsg-gold-dark: #8b6415;
  --vsg-gold: #c8992a;
  --vsg-gold-light: #f5d98e;
  --vsg-line: #d9d2c4;
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 6% 18%, rgba(200,153,42,.09), transparent 25rem),
    linear-gradient(180deg, #f9f7f2 0%, var(--vsg-cream) 100%) !important;
  color: var(--vsg-navy) !important;
}

.vh-bar {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid rgba(15,32,68,.12) !important;
  box-shadow: 0 8px 26px rgba(7,20,45,.07) !important;
}
.vh-brand img { filter: drop-shadow(0 4px 8px rgba(7,20,45,.15)); }

.rephero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 15%, rgba(245,217,142,.15), transparent 26rem),
    linear-gradient(125deg, var(--vsg-deep) 0%, var(--vsg-navy) 58%, #1b3566 100%) !important;
  padding: 56px 28px 52px !important;
  border-bottom: 7px solid transparent;
  border-image: linear-gradient(90deg,#8b6415,#f5d98e,#b3821f,#f3d58a,#8b6415) 1;
}
.rephero::before {
  content: "";
  position: absolute;
  inset: -45% auto auto -8%;
  width: 340px;
  height: 340px;
  border: 52px solid rgba(255,255,255,.035);
  border-radius: 50%;
}
.rephero > * { position: relative; z-index: 1; }
.rephero .rk {
  color: var(--vsg-gold-light) !important;
  font-size: 13px !important;
  letter-spacing: .19em !important;
}
.rephero h1 {
  max-width: 900px !important;
  font-size: clamp(34px,4.2vw,58px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  margin-top: 15px !important;
}
.rephero p {
  max-width: 760px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
.confid {
  background: linear-gradient(105deg,#9a701a 0%,#f1d489 25%,#c8992a 50%,#f6dfa4 72%,#a77819 100%) !important;
  color: var(--vsg-deep) !important;
  border-bottom: 1px solid #8b6415;
}

.wrap { max-width: 1120px !important; }
.samplenav {
  gap: 8px !important;
  margin: 32px auto 10px !important;
  padding: 7px !important;
  max-width: 920px;
  border: 1px solid rgba(15,32,68,.12);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 34px rgba(15,32,68,.07);
  border-radius: 10px;
}
.samplenav a {
  flex: 1 1 235px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px !important;
  border-color: rgba(15,32,68,.16) !important;
  color: var(--vsg-navy) !important;
  background: #fff !important;
  font-size: 12px !important;
  letter-spacing: .035em !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.samplenav a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15,32,68,.11);
  border-color: var(--vsg-gold) !important;
}
.samplenav a.on {
  background: linear-gradient(110deg,#987019,#f2d68c 35%,#c8992a 63%,#f5dda0 100%) !important;
  color: var(--vsg-deep) !important;
  border-color: #9c721c !important;
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 7px 18px rgba(139,100,21,.18);
}

.doc {
  background: var(--vsg-paper) !important;
  border: 1px solid var(--vsg-line) !important;
  border-radius: 4px !important;
  box-shadow: 0 25px 70px rgba(15,32,68,.13) !important;
  margin-top: 24px !important;
  padding: 50px 54px 42px !important;
}
.doc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg,#8b6415,#f5d98e,#c8992a,#f5d98e,#8b6415);
}
.dochead {
  padding: 0 0 24px;
  border-bottom: 1px solid #d7cfbe;
}
.dochead .dk {
  color: var(--vsg-gold-dark) !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
}
.dochead h2 {
  font-size: clamp(30px,4vw,44px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em;
  margin-top: 10px !important;
}
.dochead .sub { font-size: 15px !important; line-height: 1.65 !important; }

.stats {
  gap: 0 !important;
  width: 100%;
  margin: 12px auto 28px !important;
  border: 1px solid #8b6415;
  background: #c69a35;
  box-shadow:
    0 7px 18px rgba(139,100,21,.13),
    inset 0 1px rgba(255,255,255,.52),
    inset 0 -1px rgba(91,61,8,.18);
}
.stat {
  background:
    linear-gradient(180deg,
      #e2c774 0%,
      #d4ae4d 48%,
      #c3932d 100%) !important;
  border: 0 !important;
  border-right: 1px solid rgba(79,52,5,.34) !important;
  border-radius: 0 !important;
  padding: 18px 16px !important;
  color: var(--vsg-deep) !important;
  text-shadow: 0 1px rgba(255,255,255,.25);
}
.stat:last-child { border-right: 0 !important; }
.stat b { color: var(--vsg-deep) !important; font-size: 22px !important; }
.stat span,
.stat small {
  color: #17284b !important;
  font-weight: 750 !important;
  letter-spacing: .08em !important;
}

.sec {
  position: relative;
  border-radius: 3px !important;
  padding: 14px 20px !important;
  box-shadow: inset 5px 0 0 rgba(245,217,142,.8);
}
.sec.navy { background: linear-gradient(105deg,var(--vsg-deep),var(--vsg-blue)) !important; }
.sec.goldb { background: linear-gradient(105deg,#987019,#c8992a 48%,#e5c66f) !important; color: var(--vsg-deep) !important; }
.qcard, .vcard, .note, .quote, .why {
  border-radius: 3px !important;
  box-shadow: 0 7px 22px rgba(15,32,68,.055);
}
.qcard, .vcard { border-color: #d9d2c4 !important; background: #fff !important; }
.note { background: #f4efe5 !important; border-left-color: var(--vsg-gold) !important; }
.note.metallic-note {
  background:
    linear-gradient(112deg,
      #956b16 0%,
      #d2a73a 11%,
      #f7e4aa 29%,
      #c59628 48%,
      #f1d481 69%,
      #a97b1b 100%) !important;
  color: var(--vsg-deep) !important;
  border: 1px solid #8b6415 !important;
  border-left: 6px solid #6f4b08 !important;
  box-shadow:
    0 10px 24px rgba(139,100,21,.2),
    inset 0 1px rgba(255,255,255,.68),
    inset 0 -1px rgba(91,61,8,.25) !important;
  text-shadow: 0 1px rgba(255,255,255,.32);
}
.hl { background: linear-gradient(180deg,transparent 58%,rgba(245,217,142,.65) 58%) !important; }
.srcs { border-top-color: #d8d0c1 !important; }

.ctaband {
  background:
    radial-gradient(circle at 10% 50%, rgba(245,217,142,.12), transparent 22rem),
    linear-gradient(120deg,var(--vsg-deep),var(--vsg-navy)) !important;
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg,#8b6415,#f5d98e,#b3821f,#f3d58a,#8b6415) 1;
}
.ctaband a {
  background: linear-gradient(110deg,#987019,#f2d68c 35%,#c8992a 63%,#f5dda0) !important;
  color: var(--vsg-deep) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.65);
}

@media (max-width: 720px) {
  .rephero { padding: 42px 20px 40px !important; }
  .rephero h1 { font-size: clamp(32px,10vw,46px) !important; }
  .doc { padding: 38px 22px 30px !important; }
  .samplenav { margin-inline: 8px !important; }
  .samplenav a { flex-basis: 100%; }
  .stat { min-width: 50% !important; border-bottom: 1px solid #d8d0c1 !important; }
}

@media print {
  .vh-bar, .confid, .samplenav, .ctaband, footer { display: none !important; }
  body { background: #fff !important; }
  .rephero { padding: 26px !important; border-bottom: 4px solid #c8992a; }
  .doc { border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 28px 0 !important; }
  .qcard, .vcard, .note, .quote, .why, .sec, .stat { break-inside: avoid; }
}