/* =========================
   QUICK CARDS
========================= */

.quick-cards{
  margin-top:-58px;
  position:relative;
  z-index:5;
}

.quick-cards .container{
  width:min(1320px, calc(100% - 28px));
  margin:0 auto;
}

.cards-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}

.quick-card{
  width:240px;
  height:240px;
  flex:0 0 240px;
  background:#fff;
  border-radius:26px;
  padding:30px 24px;
  box-shadow:var(--shadow-strong);
  border:1px solid rgba(0,0,0,.05);
  outline:1px solid rgba(255,90,31,.08);
  text-align:center;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    box-shadow .34s ease,
    border-color .34s ease,
    background .34s ease,
    color .34s ease,
    outline-color .34s ease;
  will-change:transform;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.quick-card:hover{
  transform:translateY(-18px) scale(1.025);
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  color:#fff;
  box-shadow:
    0 28px 70px rgba(45,38,29,.18),
    0 0 0 1px rgba(247,210,122,.24);
  outline:1px solid rgba(255,90,31,.35);
}

.quick-cards .quick-card:nth-child(1){
  transition-delay:0ms;
}

.quick-cards .quick-card:nth-child(2){
  transition-delay:35ms;
}

.quick-cards .quick-card:nth-child(3){
  transition-delay:70ms;
}

.quick-cards .quick-card:nth-child(4){
  transition-delay:105ms;
}

.quick-cards .quick-card:nth-child(5){
  transition-delay:140ms;
}

.quick-card-highlight{
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  color:#fff;
  box-shadow:0 24px 45px rgba(255,90,31,.22);
  outline:1px solid rgba(255,90,31,.35);
}

.quick-icon{
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  margin:0 auto 16px;
  font-size:1.4rem;
  font-weight:800;
  background:rgba(255,255,255,.18);
  transition:.28s ease;
  flex:0 0 auto;
}

.quick-card:not(.quick-card-highlight) .quick-icon{
  background:#fff4ef;
  color:var(--orange);
  box-shadow:0 8px 18px rgba(255,90,31,.10);
}

.quick-card:hover .quick-icon{
  background:rgba(255,255,255,.18);
  color:#fff;
  box-shadow:none;
}

.quick-card h3{
  margin:0 0 10px;
  font-size:1.1rem;
  line-height:1.25;
}

.quick-card p{
  margin:0;
  line-height:1.6;
  color:inherit;
  font-size:.98rem;
}

@media (max-width: 1024px){
  .quick-card{
    width:220px;
    height:220px;
    flex:0 0 220px;
  }
}

@media (max-width: 768px){
  .quick-cards{
    margin-top:-34px;
  }

  .quick-card{
    width:calc(50% - 9px);
    height:auto;
    min-height:220px;
    flex:0 0 calc(50% - 9px);
    padding:20px 16px;
  }

  .quick-card:hover{
    transform:translateY(-8px) scale(1.01);
  }
}

@media (max-width: 576px){
  .quick-card{
    width:100%;
    height:auto;
    min-height:220px;
    flex:0 0 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .quick-card,
  .home-card,
  .intro-card{
    transition:none !important;
  }

  .quick-card:hover,
  .home-card:hover,
  .intro-card:hover{
    transform:none !important;
  }
}

/* reset permanent first-card highlight */
.quick-cards .quick-card:first-child,
.quick-cards .home-card:first-child,
.quick-cards .intro-card:first-child,
.quick-cards .quick-card.is-active,
.quick-cards .home-card.is-active,
.quick-cards .intro-card.is-active,
.quick-cards .quick-card--featured,
.quick-cards .home-card--featured,
.quick-cards .intro-card--featured,
.quick-cards .quick-card-highlight {
  background: rgba(255,255,255,.92) !important;
  color: inherit !important;
  transform: none !important;
}

.quick-cards .quick-card:first-child *,
.quick-cards .home-card:first-child *,
.quick-cards .intro-card:first-child *,
.quick-cards .quick-card.is-active *,
.quick-cards .home-card.is-active *,
.quick-cards .intro-card.is-active *,
.quick-cards .quick-card--featured *,
.quick-cards .home-card--featured *,
.quick-cards .intro-card--featured *,
.quick-cards .quick-card-highlight * {
  color: inherit;
}

.quick-cards .quick-card,
.quick-cards .home-card,
.quick-cards .intro-card {
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    box-shadow .55s cubic-bezier(.16, 1, .3, 1),
    background .45s ease,
    color .35s ease,
    border-color .45s ease !important;
  transition-delay: 0ms !important;
  will-change: transform;
}

.quick-cards .quick-card:hover,
.quick-cards .home-card:hover,
.quick-cards .intro-card:hover,
.quick-cards .quick-card-highlight:hover {
  transform: translate3d(0, -18px, 0) scale(1.018) !important;
  background: linear-gradient(135deg, #ff5a1f 0%, #f04416 100%) !important;
  color: #fff8e8 !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 30px 72px rgba(240,68,22,.25),
    0 16px 34px rgba(45,38,29,.18) !important;
}

.quick-cards .quick-card:hover *,
.quick-cards .home-card:hover *,
.quick-cards .intro-card:hover *,
.quick-cards .quick-card-highlight:hover * {
  color: #fff8e8 !important;
}

@media (max-width: 768px) {
  .quick-cards .quick-card:hover,
  .quick-cards .home-card:hover,
  .quick-cards .intro-card:hover,
  .quick-cards .quick-card-highlight:hover {
    transform: translate3d(0, -8px, 0) scale(1.008) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-cards .quick-card,
  .quick-cards .home-card,
  .quick-cards .intro-card {
    transition: none !important;
  }

  .quick-cards .quick-card:hover,
  .quick-cards .home-card:hover,
  .quick-cards .intro-card:hover {
    transform: none !important;
  }
}