/* How we work — Business Light Theme */

.hw-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f8f9fc !important;
  background-image:
    radial-gradient(circle at 92% 14%, rgba(238, 61, 37, 0.05), transparent 48%),
    radial-gradient(circle at 8% 86%, rgba(35, 48, 88, 0.04), transparent 42%) !important;
  border-top: none !important;
}

/* Hide ambient glow blobs and dark chevrons in light theme */
.hw-section > .glow,
.hw-section .hw-chev {
  display: none !important;
}

.hw-section::before,
.hw-section::after {
  content: none !important;
  display: none !important;
}

/* Ensure NO line appears ABOVE the heading */
.hw-section h2::before,
.hw-section h2:before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}

/* Line strictly UNDER the heading */
.hw-section h2::after,
.hw-section h2:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 56px !important;
  height: 3.5px !important;
  border-radius: 3px !important;
  background: #ee3d25 !important;
  box-shadow: 0 2px 8px rgba(238, 61, 37, 0.3) !important;
  display: block !important;
  transform: none !important;
}

.hw-section > .w,
.hw-section > .container {
  position: relative;
  z-index: 1;
}

.hw-section .hw-steps {
  gap: clamp(14px, 1.4vw, 22px);
}

/* Card Base */
.hw-section .hw-steps .card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1.5px solid rgba(35, 48, 88, 0.1) !important;
  border-radius: 20px !important;
  padding: clamp(26px, 2.5vw, 38px) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(35, 48, 88, 0.05), 0 1px 3px rgba(35, 48, 88, 0.03) !important;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.35s ease !important;
  animation: none !important;
}

/* Card Hover Top Accent Line (Restored) */
.hw-section .hw-steps .card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, #ee3d25, #ff6a3d) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 5 !important;
  display: block !important;
  pointer-events: none !important;
}

.hw-section .hw-steps .card:hover::before {
  opacity: 1 !important;
  display: block !important;
}

/* Kill all extra lines and beam animations on cards */
.hw-section .hw-steps .card::after,
.hw-section .hw-steps .card:hover::after,
.hw-section .hw-steps .card .hw-beam,
.hw-section .hw-steps .card:hover .hw-beam {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
  visibility: hidden !important;
}

/* Card Hover: Prominent elevation lift (-16px), warm brand tint, crisp 2px red border, deep shadow */
.hw-section .hw-steps .card:hover,
.hw-section .hw-steps .card:focus-within {
  z-index: 3 !important;
  transform: translateY(-16px) !important;
  background-color: #fff2ef !important;
  background-image: linear-gradient(175deg, #ffffff 10%, #ffe9e4 100%) !important;
  border-color: #ee3d25 !important;
  box-shadow:
    0 26px 52px rgba(35, 48, 88, 0.15),
    0 10px 24px rgba(238, 61, 37, 0.14) !important;
}

/* Card Number */
.hw-section .hw-steps .card .n {
  font-size: clamp(44px, 4vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
  background: linear-gradient(180deg, #ee3d25 0%, rgba(238, 61, 37, 0.35) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.02em !important;
  position: relative !important;
  transition: color 0.3s ease, filter 0.3s ease !important;
}

.hw-section .hw-steps .card:hover .n {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ee3d25 !important;
  color: #ee3d25 !important;
  filter: drop-shadow(0 2px 10px rgba(238, 61, 37, 0.35)) !important;
}

/* Number underline */
.hw-section .hw-steps .card .n::after {
  content: "" !important;
  display: block !important;
  height: 2.5px !important;
  width: 100% !important;
  margin-top: 14px !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, #ee3d25, rgba(238, 61, 37, 0.06)) !important;
  opacity: 0.7 !important;
  transition: opacity 0.3s ease, background 0.3s ease !important;
}

.hw-section .hw-steps .card:hover .n::after {
  background: #ee3d25 !important;
  opacity: 1 !important;
}

/* Card Title */
.hw-section .hw-steps .card h3 {
  color: #1e294b !important;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em !important;
}

.hw-section .hw-steps .card:hover h3 {
  color: #141b30 !important;
}

/* Card Description */
.hw-section .hw-steps .card p {
  color: #55627a !important;
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.hw-section .hw-steps .card:hover p {
  color: #3e4b63 !important;
}

/* Neutralize old entrance animations */
.hw-section.hw-anim .hw-steps .card,
.hw-section.hw-anim.is-in .hw-steps .card {
  opacity: 1 !important;
  animation: none !important;
}

@media (max-width: 900px) {
  .hw-section .hw-steps .card {
    padding: 22px !important;
  }
}