/* Tactile treatment for the selected hero CTA; other quote links stay unchanged. */
.hero-content .hero-button {
  display: inline-flex;
  align-items: center;
  min-width: 260px;
  max-width: 100%;
  min-height: 64px;
  padding: 17px 24px;
  border: 2px solid var(--blue-deep);
  border-radius: 9px;
  background: var(--yellow);
  color: #111;
  font-size: 17px;
  font-weight: 800;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 5px 0 var(--blue-deep), 0 10px 18px rgba(8, 44, 106, 0.18);
  transform: translateY(0);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
@media (hover: hover) {
  .hero-content .hero-button:hover {
    background: #ffe36a;
    transform: translateY(-2px);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45),
      0 7px 0 var(--blue-deep), 0 13px 20px rgba(8, 44, 106, 0.2);
  }
}
.hero-content .hero-button:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 var(--blue-deep), 0 3px 8px rgba(8, 44, 106, 0.15);
}
.hero-content .hero-button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 8px;
}
@media (max-width: 640px) {
  .hero-content .hero-button {
    width: 100%;
    min-width: 0;
    gap: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content .hero-button {
    transition: none;
  }
}