/* ============================================
   ARGO - Responsive Stylesheet
   ============================================ */

/* ---- Page Wrapper ---- */
.page-wrapper {
  max-width: 1280px !important;
  width: 100% !important;
  overflow-x: hidden;
}

/* ---- Hamburger Button ---- */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 200;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile Nav Overlay ---- */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: #08182c;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.mobile-nav.open { display: flex; }
.mobile-nav-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: #7e93b4;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 8px;
}
.mobile-nav a {
  font-family: 'Noto Sans JP', sans-serif;
  color: #c4d2e6;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: .1em;
  transition: color .2s;
}
.mobile-nav a:hover { color: #fff; }
.mobile-nav-entry {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #2f6fd0;
  color: #fff !important;
  padding: 14px 36px;
  border-radius: 999px;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin-top: 8px;
}

/* ---- Responsive Grid Classes ---- */
.rg-2   { display: grid !important; grid-template-columns: 1fr 1fr !important; }
.rg-3   { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
.rg-4   { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
.rg-2a  { display: grid !important; }
.rg-staff { display: grid !important; }
.rg-form  { display: grid !important; grid-template-columns: 1fr 1fr !important; }

/* ---- Hero Title ---- */
.hero-title { }  /* base: keep inline style */

/* ============================================
   BREAKPOINT: Tablet (≤ 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .rg-4 { grid-template-columns: repeat(2, 1fr) !important; }
  /* Remove side border on 2nd column items in 2-col layout */
  .rg-4 > div:nth-child(2n)[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid #e7edf5 !important;
  }
}

/* ============================================
   BREAKPOINT: Large Mobile (≤ 900px)
   ============================================ */
@media (max-width: 900px) {
  /* Hide desktop nav, show hamburger */
  header nav { display: none !important; }
  .hamburger-btn { display: flex !important; }

  /* Hero font sizes */
  .hero-title { font-size: 44px !important; }
}

/* ============================================
   BREAKPOINT: Mobile (≤ 768px)
   ============================================ */
@media (max-width: 768px) {

  /* Section padding: reduce 56px side padding */
  .page-wrapper > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .page-wrapper header {
    padding: 16px 20px !important;
  }
  .page-wrapper footer {
    padding: 28px 20px !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
  }
  .page-wrapper footer > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  /* Hero title */
  .hero-title { font-size: 34px !important; line-height: 1.45 !important; }

  /* Decorative side label: hide */
  .page-wrapper [style*="writing-mode:vertical-rl"] { display: none !important; }

  /* Decorative hero ship SVG: hide */
  .page-wrapper [style*="argoFloat"] { display: none !important; }

  /* Grids: stack to 1 column */
  .rg-2, .rg-2a, .rg-staff, .rg-form {
    grid-template-columns: 1fr !important;
  }
  .rg-3 {
    grid-template-columns: 1fr 1fr !important;
  }
  .rg-4 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Company data table: narrow label column */
  .rg-table {
    grid-template-columns: 100px 1fr !important;
  }
  .rg-table > div {
    font-size: 12px !important;
  }

  /* h2 large headings */
  h2[style*="font-size:50px"] { font-size: 30px !important; }
  h2[style*="font-size:44px"] { font-size: 28px !important; }
  h2[style*="font-size:40px"] { font-size: 26px !important; }
  h2[style*="font-size:38px"] { font-size: 24px !important; }
  h2[style*="font-size:36px"] { font-size: 24px !important; }
  h2[style*="font-size:34px"] { font-size: 22px !important; }
  h2[style*="font-size:32px"] { font-size: 22px !important; }

  /* Staff card: photo block full width */
  .rg-staff > div {
    width: 100% !important;
  }

  /* Form submit button: full width */
  .page-wrapper button[type="submit"] {
    width: 100% !important;
    text-align: center !important;
  }

  /* Steps indicator: compress */
  .page-wrapper [style*="max-width:920px"] {
    max-width: 100% !important;
  }

  /* CTA flex buttons: stack */
  .page-wrapper [style*="justify-content:center"] {
    flex-wrap: wrap !important;
  }

  /* Value strip: allow horizontal scroll */
  .page-wrapper [style*="white-space:nowrap"] {
    overflow-x: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Access map: full width */
  .page-wrapper iframe {
    min-height: 240px;
  }

  /* Numbers section: 2x2 border fix */
  .rg-4 > div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid #e7edf5 !important;
  }
}

/* ============================================
   BREAKPOINT: Small Mobile (≤ 480px)
   ============================================ */
@media (max-width: 480px) {
  .hero-title { font-size: 28px !important; }

  .rg-3 { grid-template-columns: 1fr !important; }
  .rg-4 { grid-template-columns: 1fr !important; }

  /* Form rows: single column */
  .rg-form { grid-template-columns: 1fr !important; }

  /* Radio pills: wrap */
  .radio-pill-group { flex-direction: column !important; }
}