/* Append to existing styles */

/* ── Mobile breakpoints ── */
@media (max-width: 768px) {

  /* Hero: stack columns */
  .hero {
    grid-template-columns: 1fr !important;
    min-height: 100svh;
  }

  .hero > div:first-child {
    padding: 7rem 1.5rem 4rem !important;
  }

  .hero > div:first-child h1 {
    font-size: clamp(2.4rem, 10vw, 4rem) !important;
  }

  /* Hide decorative image column on mobile */
  .hero > div:last-child {
    display: none !important;
  }

  /* About / feature two-col sections */
  .content-section > div[style*='grid-template-columns:1fr 1fr'],
  .content-section > div[style*='grid-template-columns: 1fr 1fr'] {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Stats four-col */
  div[style*='grid-template-columns:repeat(4'] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Category cards auto-fit already handles mobile but ensure min readable size */
  div[style*='minmax(240px'] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Content section padding */
  .content-section[style*='padding:110px'] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Section margins */
  .content-section[style*='margin:110px'] {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }

  /* Comparison table inside article section */
  div[style*='grid-template-columns:1fr 1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* Stats: single column on very small screens */
  div[style*='grid-template-columns:repeat(4'] {
    grid-template-columns: 1fr !important;
  }

  /* Category cards: single column */
  div[style*='minmax(240px'] {
    grid-template-columns: 1fr !important;
  }

  .hero > div:first-child {
    padding: 6rem 1.2rem 3rem !important;
  }
}

/* ── Category card inner padding fix ── */
.card {
  padding: 2rem 1.5rem !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #1B4D6E !important;
  font-weight: 600 !important;
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
  border-left: 3px solid #E8C84A !important;
}

.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(27,77,110,0.18) !important;
  color: #E8C84A !important;
  background: #1B4D6E !important;
}