:root {
  --navy: #071d41;
  --burgundy: #80010d;
  --cream: #f7f4ee;
  --coal: var(--navy);
  --steel: #18345f;
  --paper: var(--cream);
  --accent: var(--burgundy);
}

body { background: var(--cream); }
.site-header, .hero, .page-head, footer { background-color: var(--navy); }
.site-header { border-bottom: 4px solid var(--burgundy); }
.brand { gap: .9rem; }
.brand .brand-logo {
  width: 62px;
  height: 62px;
  max-width: none;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(46% at 50% 50%);
  background: #fff;
}
.brand .brand-name {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  background: transparent;
  color: #fff;
  line-height: 1.15;
}
.btn { background: var(--burgundy); color: #fff; }
.btn:hover { background: #a31322; }
.btn.secondary { background: transparent; color: inherit; border-color: currentColor; }
.hero {
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(3, 17, 42, .94) 0%, rgba(3, 17, 42, .82) 38%, rgba(3, 17, 42, .48) 66%, rgba(3, 17, 42, .14) 100%),
    var(--hero-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 7px solid var(--burgundy);
  min-height: min(760px, calc(100vh - 84px));
  display: flex;
  align-items: center;
}
.page-head {
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(3, 17, 42, .94) 0%, rgba(3, 17, 42, .8) 42%, rgba(3, 17, 42, .38) 72%, rgba(3, 17, 42, .14) 100%),
    var(--hero-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 6px solid var(--burgundy);
  min-height: clamp(340px, 34vw, 520px);
  display: flex;
  align-items: center;
}
.page-head h1 {
  max-width: 850px;
  text-wrap: balance;
  text-shadow: 0 3px 28px rgba(0, 0, 0, .48);
}
.page-head .container > p:last-child {
  max-width: 700px;
  color: #f0f2f5;
  font-size: 1.15rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.eyebrow { color: var(--burgundy); }
.hero .eyebrow, .page-head .eyebrow { color: #f3c8cc; }
.pagination strong { background: var(--burgundy); color: #fff; }
.card { border-top-color: var(--navy); }
.card:hover { border-color: var(--burgundy); }
.panel { background: var(--navy); border-left-color: var(--burgundy); }
.number { color: var(--burgundy); }
.cta { background: var(--burgundy); color: #fff; }
.cta .btn { background: #fff; color: var(--burgundy); }
.contact-card { background: var(--navy); border-top: 6px solid var(--burgundy); }
.steps li::before { color: var(--burgundy); }
.admin-shell aside, .login, .top { background: var(--navy); }
aside nav a:hover { border-color: var(--burgundy); }
.admin-title { border-color: var(--burgundy); }
button, .button { background: var(--burgundy); color: #fff; }
.quick a { border-color: var(--burgundy); }
.login-brand-logo {
  width: 118px;
  height: 118px;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(46% at 50% 50%);
  background: #fff;
  margin-bottom: 1.25rem;
}
.hero-text-only { grid-template-columns: minmax(0, 1fr); }
.hero-text-only > div { width: min(100%, 880px); }
.hero-text-only h1 {
  max-width: 880px;
  font-size: clamp(3rem, 4.7vw, 5rem);
  text-wrap: balance;
  text-shadow: 0 3px 28px rgba(0, 0, 0, .42);
}
.hero-text-only .lead { max-width: 760px; color: #f0f2f5; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.featured-services .card h3 {
  color: var(--burgundy);
  font-size: 1.18rem;
  margin-bottom: 1rem;
}
.featured-services .card { padding: 0; overflow: hidden; }
.featured-services .card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  transition: transform .35s ease;
}
.featured-services .card:hover img { transform: scale(1.025); }
.featured-services .card-content { padding: 1.6rem 2rem 2rem; }

@media (max-width: 800px) {
  .brand .brand-logo { width: 54px; height: 54px; }
  .brand .brand-name { font-size: .92rem; }
  .nav nav { background: var(--navy); }
  .hero {
    min-height: auto;
    background-image:
      linear-gradient(180deg, rgba(3, 17, 42, .78) 0%, rgba(3, 17, 42, .9) 100%),
      var(--hero-image, none);
    background-position: 66% center;
  }
  .page-head {
    min-height: 360px;
    background-image:
      linear-gradient(180deg, rgba(3, 17, 42, .72) 0%, rgba(3, 17, 42, .9) 100%),
      var(--hero-image, none);
    background-position: 68% center;
  }
}

@media (max-width: 430px) {
  .brand .brand-logo { width: 48px; height: 48px; max-width: none; }
  .brand .brand-name { max-width: 115px; font-size: .78rem; }
  .hero-text-only h1 { font-size: clamp(2.7rem, 13vw, 3.65rem); }
}