/* ============================================================
   Seishin — Responsive layer
   Shared mobile + tablet styles applied to all six pages.
   ============================================================ */

/* Universal safety: prevent horizontal scroll on small screens
   that can be triggered by SVG backgrounds, oversized text, etc. */
html, body { max-width: 100%; }
img, svg { max-width: 100%; }

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: none; padding: 0;
  cursor: pointer; position: relative; z-index: 1101;
  flex-shrink: 0;
}
.nav-burger-bars,
.nav-burger-bars::before,
.nav-burger-bars::after {
  display: block; position: absolute; left: 10px;
  width: 24px; height: 2px;
  background: var(--navy, #1B2A4A);
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.nav-burger-bars { top: 21px; }
.nav-burger-bars::before { content: ''; top: -7px; left: 0; }
.nav-burger-bars::after  { content: ''; top:  7px; left: 0; }

/* Open state: morph to X */
body.nav-open .nav-burger-bars { background: transparent; }
body.nav-open .nav-burger-bars::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-burger-bars::after  { top: 0; transform: rotate(-45deg); }

/* Lock scroll when mobile menu is open */
body.nav-open { overflow: hidden; }


/* ============================================================
   TABLET — up to 1024px
   ============================================================ */
@media (max-width: 1024px) {
  /* General section padding shrink */
  #about, #services, #projects, #why,
  #story, #values, #leadership,
  .service-section, #capabilities,
  #projects-grid, #stats-strip, #cta,
  #culture, #roles, #faq, #apply-cta,
  #contact-main, #office-strip,
  #heritage, #contact-cta, #cta-strip {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* Hero / page hero padding */
  .hero-inner,
  .page-hero-inner { padding-left: 40px !important; padding-right: 40px !important; }
  .hero-scroll-hint { left: 40px !important; }

  /* Navbar */
  #navbar { padding: 0 24px; }
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 12.5px; }

  /* Index — 3-col grids stay 3-col but tighter; 4-col → 2 */
  .why-grid,
  .cap-grid,
  #stats-strip .stats-strip-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .why-item:nth-child(2),
  .cap-item:nth-child(2) { border-right: none !important; }

  /* Footer 4-col → 2-col */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 48px !important; }
}


/* ============================================================
   MOBILE — up to 768px
   ============================================================ */
@media (max-width: 768px) {

  /* -------- NAVBAR / HAMBURGER -------- */
  #navbar { padding: 0 20px; }
  .nav-inner { height: 72px !important; }
  .nav-logo img { height: 52px !important; }

  .nav-burger { display: block; }

  /* Collapse the desktop link list into a full-height drawer */
  .nav-links {
    position: fixed;
    inset: 72px 0 0 0;            /* below the navbar */
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 24px 28px 48px !important;
    background: #FFFFFF;
    border-top: 1px solid rgba(27,42,74,0.08);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 1100;
  }
  body.nav-open .nav-links { transform: translateX(0); }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 18px 0 !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(27,42,74,0.08);
  }
  .nav-links a::after { display: none !important; }
  .btn-nav {
    margin-top: 20px;
    justify-content: center;
    padding: 14px 20px !important;
    border-bottom: none !important;
  }

  /* -------- SECTION PADDING -------- */
  #about, #services, #projects, #why,
  #story, #values, #leadership,
  .service-section, #capabilities,
  #projects-grid, #stats-strip, #cta,
  #culture, #roles, #faq, #apply-cta,
  #contact-main, #office-strip,
  #heritage, #contact-cta, #cta-strip {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* -------- HERO (index) -------- */
  #hero { min-height: auto; padding: 120px 0 80px; }
  .hero-inner { padding: 0 20px !important; padding-top: 0 !important; }
  .hero h1 { font-size: clamp(36px, 9vw, 52px) !important; }
  .hero-sub { font-size: 15px !important; margin-bottom: 32px !important; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px !important; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline { justify-content: center; padding: 14px 24px !important; }
  .hero-scroll-hint { display: none !important; }
  /* Tame the decorative SVG so it doesn't push the right edge */
  .hero-bg-lines { opacity: 0.4; }

  /* -------- PAGE HERO (about/services/projects/contact/careers) -------- */
  .page-hero { padding-top: 72px !important; }
  .page-hero-inner { padding: 56px 20px 64px !important; }
  .page-hero h1 { font-size: clamp(34px, 8.5vw, 48px) !important; }
  .page-hero-sub { font-size: 14.5px !important; }
  .page-hero-lines { width: 80%; opacity: 0.35; }

  /* -------- SECTION TITLES -------- */
  .section-title { font-size: clamp(28px, 7vw, 38px) !important; margin-bottom: 18px !important; }
  .section-header { margin-bottom: 40px !important; }

  /* -------- STATS (index) -------- */
  .stats-inner { grid-template-columns: 1fr !important; }
  .stat-item { padding: 36px 24px !important; border-right: none !important; border-bottom: 1px solid rgba(27,42,74,0.1); }
  .stat-item:last-child { border-bottom: none; }
  .stat-number { font-size: 52px !important; }

  /* -------- ABOUT (index) / STORY (about) -------- */
  .about-inner,
  .story-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .about-img-tag { bottom: -12px !important; right: -12px !important; padding: 16px 20px !important; }
  .about-img-tag strong { font-size: 28px !important; }

  /* -------- SERVICES grid (index) -------- */
  .services-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .service-card { padding: 36px 28px !important; }

  /* -------- PROJECTS grid (index) -------- */
  .projects-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .project-tile { aspect-ratio: 16/10 !important; }
  .project-tile-content { padding: 24px !important; }
  .project-tile-content h3 { font-size: 22px !important; }

  /* -------- WHY (index) -------- */
  .why-grid { grid-template-columns: 1fr !important; }
  .why-item { border-right: none !important; border-bottom: 1px solid rgba(27,42,74,0.08); padding: 36px 28px !important; }
  .why-item:last-child { border-bottom: none; }

  /* -------- CONTACT CTA (index) -------- */
  #contact-cta { padding: 72px 20px !important; }
  .cta-bg-ornament { font-size: 160px !important; }

  /* -------- ABOUT page — VALUES / LEADERSHIP / HERITAGE -------- */
  .values-grid,
  .team-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .heritage-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .heritage-stats { grid-template-columns: 1fr 1fr !important; }
  .heritage-stat { padding: 28px 20px !important; }

  /* About timeline */
  .timeline-item { grid-template-columns: 56px 1fr !important; gap: 16px !important; }

  /* -------- SERVICES page — deep dives -------- */
  .service-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .service-inner.reverse > *:first-child { order: -1; }
  .service-tag { bottom: -12px !important; right: -12px !important; padding: 14px 20px !important; }
  .cap-grid { grid-template-columns: 1fr !important; }
  .cap-item { border-right: none !important; border-bottom: 1px solid rgba(201,168,76,0.15); padding: 32px 24px !important; }

  /* -------- PROJECTS page — filter bar + register -------- */
  #project-filters { padding: 0 12px !important; top: 72px !important; }
  .filter-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-inner::-webkit-scrollbar { display: none; }
  .filter-btn { padding: 16px 16px !important; font-size: 11.5px !important; white-space: nowrap; }
  #projects-grid .projects-grid { grid-template-columns: 1fr !important; gap: 2px !important; }
  .project-card { padding: 28px 24px !important; }
  #stats-strip .stats-strip-inner { grid-template-columns: 1fr 1fr !important; }
  #stats-strip .stat-item { padding: 28px 16px !important; border-right: 1px solid rgba(27,42,74,0.08) !important; }
  #stats-strip .stat-item:nth-child(2n) { border-right: none !important; }
  #stats-strip .stat-item:nth-child(-n+2) { border-bottom: 1px solid rgba(27,42,74,0.08); }

  /* -------- CONTACT page -------- */
  .contact-main-inner { grid-template-columns: 1fr !important; gap: 56px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .map-overlay-card { left: 20px !important; right: 20px !important; bottom: 20px !important; padding: 22px 24px !important; }
  .office-strip-inner { grid-template-columns: 1fr !important; }
  .office-item { border-right: none !important; border-bottom: 1px solid rgba(201,168,76,0.15); padding: 32px 24px !important; }
  .office-item:last-child { border-bottom: none; }

  /* -------- CAREERS page -------- */
  .culture-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .culture-perks { grid-template-columns: 1fr !important; }
  .role-header { flex-direction: column; align-items: flex-start !important; gap: 16px; padding: 28px 24px !important; }
  .role-body-inner { grid-template-columns: 1fr !important; gap: 32px !important; padding-top: 24px !important; }
  .faq-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .faq-item { padding: 28px 24px !important; }
  #team-band { height: 280px !important; }

  /* -------- FOOTER -------- */
  footer { padding: 56px 20px 32px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding-bottom: 36px !important; }
  .footer-logo img { height: 52px !important; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; align-items: center !important; }

  /* -------- FLOATING WHATSAPP -------- */
  a[title="WhatsApp Us"][style*="position:fixed"] {
    width: 52px !important; height: 52px !important;
    bottom: 20px !important; right: 20px !important;
  }
}


/* ============================================================
   SMALL MOBILE — up to 420px
   ============================================================ */
@media (max-width: 420px) {
  .nav-logo img { height: 44px !important; }
  .hero h1 { font-size: 34px !important; }
  .page-hero h1 { font-size: 32px !important; }
  .section-title { font-size: 26px !important; }
  .stat-number { font-size: 44px !important; }
  .cta-bg-ornament { font-size: 120px !important; }
}