:root {
  --ink: #241313;
  --paper: #f8f4ef;
  --cream: #efe5da;
  --copper: #a9292c;
  --line: rgba(72, 22, 22, .16);
  --royal: #7d1418;
  --navy: #210606;
  --blue: #b62c30;
  --vermillion: #d84236;
  --gold: #d8ad61;
}

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

.brand-mark {
  border-radius: 3px;
  background: linear-gradient(145deg, #a82025, #661015);
  color: #fff8ef;
  border: 1px solid rgba(216, 173, 97, .75);
  box-shadow: 0 8px 28px rgba(76, 5, 9, .28);
}

.site-header { border-color: rgba(255, 233, 218, .18); }
.site-header .brand-mark { border-color: rgba(216, 173, 97, .78); }
.site-header .header-cta { border-color: rgba(225, 190, 128, .5); }

.hero {
  background:
    radial-gradient(circle at 76% 34%, rgba(201, 44, 38, .18), transparent 31%),
    linear-gradient(124deg, #140303 0%, #300809 48%, #641014 100%);
}

.hero:before { background: rgba(239, 197, 138, .16); }
.hero:after {
  border-color: rgba(216, 173, 97, .11);
  box-shadow: 0 0 0 8vw rgba(173, 42, 36, .018), 0 0 0 16vw rgba(216, 173, 97, .012);
}
.hero-copy:before {
  background-image:
    linear-gradient(rgba(216, 173, 97, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 173, 97, .055) 1px, transparent 1px);
}

.eyebrow { color: #e9b86c; }
.eyebrow span { background: var(--vermillion); }
h1 em {
  background: linear-gradient(90deg, #ff7363, #e3ba73);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-intro { color: #e3cdca; }
.button.primary {
  background: linear-gradient(110deg, #c83431, #e55b43);
  color: #fffaf4;
  box-shadow: 0 10px 35px rgba(193, 40, 39, .28);
}
.button.primary:hover { background: #e3b66f; color: #2b0809; }

.network-visual {
  height: 410px;
  border-bottom-color: rgba(216, 173, 97, .28);
  border-radius: 0 0 24px 0;
}
.network-visual img {
  object-fit: cover;
  object-position: 64% 50%;
  transform: scale(1.03);
  filter: saturate(.95) contrast(1.08);
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}
.network-visual:after {
  content: "LEGACY  /  NETWORK  /  NEXT";
  color: #e3b66f;
  letter-spacing: .22em;
}
.brief-card { border-color: rgba(216, 173, 97, .58); }
.brief-card div { color: #cba99d; }

.jurisdictions { background: #1b0506; }
.jurisdictions p { color: #f0dfd4; }
.jurisdictions i { background: var(--gold); }
.section-heading .eyebrow span, .about .eyebrow span { background: var(--copper); }
.service .number { color: var(--copper); }
.service button b { background: #f4ded8; color: #941d22; }

.approach {
  background: linear-gradient(135deg, #180405, #571014 72%, #79191b);
}
.approach .eyebrow span, .principles span { background: var(--gold); color: var(--gold); }
.principles, .principles article { border-color: rgba(229, 190, 124, .22); }
.text-link.dark { color: #9d2024; }

.contact {
  background:
    radial-gradient(circle at 82% 18%, rgba(235, 184, 101, .22), transparent 27%),
    linear-gradient(118deg, #771318, #bd2d2d 66%, #d04b37);
}
.contact .eyebrow span { background: var(--gold); }
.contact h2 em { color: #f2cf91; }
.contact > p:not(.eyebrow) { color: #f4ddd7; }
.button.pale { color: #701216; }
.button.pale:hover { background: #260708; color: #fff; }

footer { background: #140304; }
footer .brand-mark { border-color: rgba(216, 173, 97, .7); }
.legal { border-color: #482022; color: #a98884; }

@media (max-width: 900px) {
  .site-header.menu-open { background: #210606; }
  .network-visual { height: 340px; }
}

@media (max-width: 560px) {
  .network-visual { height: 260px; }
}