/* ==========================================================================
   Responsive Styles – Eibun Corp
   ========================================================================== */

/* ---------- Tablet (max-width: 1024px) ---------- */
@media (max-width: 1024px) {
  .site-nav__link,
  .site-nav__cta {
    font-size: 0.85rem;
  }

  .services__cards {
    flex-wrap: wrap;
  }

  .service-card {
    flex: 1 1 100%;
  }

  .strengths__items {
    flex-wrap: wrap;
    justify-content: center;
  }

  .strength-item {
    flex: 1 1 calc(50% - 15px);
    min-width: 200px;
  }

  .sub-cards {
    flex-direction: column;
  }

  .site-footer > .container {
    flex-direction: column;
    gap: 24px;
  }

  .access-details {
    grid-template-columns: 1fr;
  }
}

/* ---------- Mobile (max-width: 768px) ---------- */
@media (max-width: 768px) {
  /* --- Navigation --- */
  .site-nav__menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 16px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .site-nav__toggle {
    display: flex;
  }

  .site-nav__menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* --- Hero --- */
  .hero {
    padding: 40px 20px;
  }

  /* --- Services --- */
  .services__cards {
    flex-direction: column;
  }

  /* --- Strengths --- */
  .strengths__items {
    flex-direction: column;
  }

  /* --- CTA Bar --- */
  .cta-bar__buttons {
    flex-direction: column;
    align-items: center;
  }

  /* --- Info Table --- */
  .info-table {
    width: 100%;
  }

  /* --- Related Links --- */
  .related-links {
    flex-direction: column;
  }

  /* --- Contact Form --- */
  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
  }

  /* --- Container --- */
  .container {
    padding: 0 20px;
  }

  /* --- Footer --- */
  .site-footer > .container {
    flex-direction: column;
    gap: 20px;
  }
}