.final-cta {
  display: grid;
  width: min(100%, 1080px);
  grid-template-columns: 1fr minmax(240px, 330px);
  align-items: center;
  gap: 22px;
  min-height: 136px;
  margin: 28px auto 0;
  padding: 28px 36px;
  overflow: hidden;
  border: 1px solid var(--stroke-strong);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.3)),
    linear-gradient(135deg, rgba(247, 248, 248, 0.12), transparent 36%),
    url("../assets/barbershop-hero.png") center / cover;
}

.final-cta h2 {
  color: var(--text);
  font-size: clamp(1.65rem, 4vw, 2.28rem);
  line-height: 1.08;
  text-transform: uppercase;
}

.final-cta p {
  margin-top: 8px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .final-cta {
    grid-template-columns: 1fr;
    padding: 24px 18px;
  }
}