:root {
  --brand-primary: #6d727a;
  --brand-secondary: #609298;
  --brand-accent: #a0a0a0;
  --brand-light: #f5f5f5;
  --brand-white: #ffffff;

  /* Legacy aliases for compatibility */
  --brand-1: var(--brand-primary);
  --brand-2: var(--brand-secondary);
  --brand-3: var(--brand-accent);
  --brand-4: var(--brand-light);
  --brand-5: var(--brand-secondary);
}

.text-brand-2 {
  color: var(--brand-2) !important;
}

body {
  color: var(--brand-1);
}

.text-primary {
  color: var(--brand-1) !important;
}

.btn-brand-1 {
  background-color: var(--brand-1);
  color: white;
  border: none;
}

.btn-brand-1:hover {
  background-color: var(--brand-2);
  color: white;
}

.btn-brand-2 {
  background-color: var(--brand-2);
  color: white;
  border: none;
}

.btn-brand-2:hover {
  background-color: var(--brand-1);
  color: white;
}

.btn-brand-cta {
  background-color: var(--brand-2);
  color: white;
  border: none;
}

.btn-brand-cta:hover {
  background-color: var(--brand-2);
  color: white;
}

.bg-brand-1 {
  background-color: var(--brand-1);
}

.bg-brand-2 {
  background-color: var(--brand-2);
}

.navbar-nav .nav-link {
  color: var(--brand-1) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--brand-2) !important;
}

.dropdown-menu .dropdown-item {
  color: var(--brand-1) !important;
}

.dropdown-menu .dropdown-item:hover {
  color: var(--brand-2) !important;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
  background-color: var(--brand-1) !important;
  color: white !important;
}

.bg-call-green {
  background-color: #34C759;
}

.area-outline {
  fill: none;
  stroke: var(--brand-1);
  stroke-width: 4;
}

.location-star {
  fill: var(--brand-2);
  stroke: white;
  stroke-width: 1;
}

.hero-image-wrapper {
  width: 100%;
  background-color: #212529;
  padding-bottom: 3rem;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .hero-image {
    width: 60%;
  }
}

.section-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0.375rem;
}

.accordion-button:not(.collapsed) {
  background-color: var(--brand-2);
  opacity: 0.5;
  color: white;
}

.accordion-button.collapsed {
  color: var(--brand-1);
}
.fill-primary {
  fill: var(--brand-1);
}

.fill-brand-2 {
  fill: var(--brand-2);
}

.material-symbols-outlined {
  font-size: 1.2em;
  line-height: 1;
}

.icon-win {
  font-size: 3rem !important;
}

.icon-why-now {
  font-size: 2.5rem !important;
}

.why-now-card {
  height: clamp(110px, 10vw, 145px);
}

@media (max-width: 575.98px) {
  .why-now-card {
    height: auto;
  }
}