/* Palette sampled from the official MEX Group Consulting logo. */
:root {
  --navy: #00578f;
  --blue: #0378c0;
  --gold: #d0ad65;
  --cream: #f8f5e9;
  --ink: #14354b;
  --muted: #627989;
  --line: #d4e0e7;
}

.site-header {
  background: rgba(3, 120, 192, .97);
  box-shadow: 0 1px 0 rgba(242, 231, 151, .3);
}

.brand img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.counter {
  min-width: 3.5ch;
  font-variant-numeric: tabular-nums;
}

.honey { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; }
.form-status { display: none; margin: 0; padding: 12px 14px; font-size: .88rem; text-align: center; }
.form-status.success { display: block; color: #125b35; background: #e7f7ed; border: 1px solid #a9dbba; }
.form-status.error { display: block; color: #8a2530; background: #fff0f1; border: 1px solid #e6b2b7; }
.lead-form button:disabled { cursor: wait; opacity: .7; }

.national-service-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}

.national-service-links a span {
  color: #f2e797;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  transition: transform .2s ease;
}

.national-service-links a:hover,
.national-service-links a:focus-visible {
  color: #f2e797;
  padding-left: 8px;
}

.national-service-links a:hover span,
.national-service-links a:focus-visible span { transform: translateX(6px); }

.hero {
  background: linear-gradient(135deg, #0378c0 0%, #0068aa 58%, #004b7c 100%);
}

.hero::after {
  background: linear-gradient(110deg, transparent 55%, rgba(242, 231, 151, .12));
}

.hero-card {
  border-color: rgba(242, 231, 151, .62);
  padding: 26px 35px 42px;
  background: rgba(0, 75, 124, .24);
  box-shadow: 0 24px 70px rgba(0, 51, 88, .2);
}

.official-logo {
  display: block;
  width: min(100%, 320px);
  margin: 0 auto 15px;
  aspect-ratio: 1.32;
  object-fit: cover;
}

.service.featured { background: linear-gradient(145deg, #0378c0, #004b7c); }
.nationals { background: linear-gradient(120deg, #0378c0, #0063a2); }
.contact { background: linear-gradient(145deg, #004b7c, #0378c0); }
.gold { background: linear-gradient(100deg, #b98d42, #f2e797 55%, #c49a52); }
.gold:hover { background: #f2e797; }

footer {
  background: #00466f;
  color: #b9d2e1;
  border-top: 1px solid rgba(242, 231, 151, .25);
}

footer .footer-logo {
  width: 118px;
  height: 118px;
  object-fit: contain;
  align-self: start;
}

.video-note {
  margin: 10px 4px 2px;
  color: #d8eaf5;
  font-size: .74rem;
  letter-spacing: .03em;
  text-align: center;
}