/* STYLE PAGE SPECIFICS - leverage base.css tokens */
.hero {
  position: relative;
  padding: var(--space-24) 0 var(--space-20);
  background: linear-gradient(135deg, var(--color-cream), #ffffff 40%, var(--color-champagne));
}

.hero-subtitle {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.hero-cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.section {
  padding: var(--space-20) 0;
}
.section-alt {
  background-color: var(--color-gray-50);
}
.section-cta {
  padding-top: var(--space-16);
  padding-bottom: var(--space-24);
  background: linear-gradient(180deg, transparent, rgba(212,175,55,0.08));
}

.cta-row {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.palette {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
}
.swatch {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--color-cream);
  box-shadow: var(--shadow-base);
  border: 1px solid var(--color-gray-300);
}
.swatch.gold { background-color: var(--color-gold); }
.swatch.charcoal { background-color: var(--color-charcoal); }
.swatch.navy { background-color: var(--color-navy); }
.swatch.champagne { background-color: var(--color-champagne); }

/* Cards inside grids should stretch nicely */
.card .card-image { aspect-ratio: 16 / 10; object-fit: cover; }

/* Compact column of calls-to-action in grid */
.cta-col {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}
@media (max-width: 767px) {
  .cta-col { flex-wrap: wrap; }
}