/* ═══════════════════════════════════════════
   BASE — hamburger hidden on desktop by default
═══════════════════════════════════════════ */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 201;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #94d6f6;
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mob-menu { display: none; }

/*
 * responsive.css — TPAIS Events Management
 * Mobile & tablet breakpoints for all pages
 * ─────────────────────────────────────────
 * Breakpoints:
 *   Tablet : ≤ 1024px
 *   Mobile : ≤  768px
 *   Small  : ≤  480px
 */

/* ═══════════════════════════════════════════
   TABLET  (≤ 1024px)
═══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Nav */
  nav { padding: 1.2rem 2rem; }
  .nav-links { gap: 1.8rem; }

  /* Page hero */
  .page-hero { min-height: 360px; }
  .ph-content { padding: 5rem 2rem 3rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

  /* Index — services */
  .svc-g { grid-template-columns: repeat(2, 1fr); }

  /* Index — stats */
  .stats-g { grid-template-columns: repeat(2, 1fr); }

  /* About — values */
  .values-g { grid-template-columns: repeat(2, 1fr); }

  /* About — team */
  .team-g { grid-template-columns: repeat(2, 1fr); }

  /* About — client logos */
  .logos-g { grid-template-columns: repeat(3, 1fr); }

  /* Services — sub-items */
  .sub-grid { grid-template-columns: repeat(2, 1fr); }

  /* Projects */
  .proj-grid { grid-template-columns: repeat(2, 1fr); }

  /* Gallery masonry */
  .masonry { columns: 3; }

  /* Contact */
  .contact-g { gap: 3rem; }
}


/* ═══════════════════════════════════════════
   MOBILE  (≤ 768px)
═══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ───────────────────────────── */
  nav { padding: 1rem 1.5rem; }
  .nav-links,
  .nav-cta { display: none !important; }
  .hamburger { display: flex !important; }

  /* ── MOBILE MENU ───────────────────── */
  .mob-menu {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 12, 0.98);
    backdrop-filter: blur(20px);
    z-index: 300;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .mob-menu.open { display: flex; }
  .mob-close {
    position: absolute;
    top: 1.4rem;
    right: 1.5rem;
    font-size: 1.8rem;
    color: rgba(148, 214, 246, 0.55);
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
  }
  .mob-close:hover { color: #94d6f6; }
  .mob-links {
    list-style: none;
    text-align: center;
    margin-bottom: 2.5rem;
  }
  .mob-links li { margin-bottom: 1.8rem; }
  .mob-links a {
    font-family: 'Cormorant SC', serif;
    font-size: 2rem;
    font-weight: 300;
    color: rgba(220, 238, 250, 0.9);
    letter-spacing: 0.08em;
    transition: color 0.3s;
    text-decoration: none;
  }
  .mob-links a:hover,
  .mob-links a.active { color: #94d6f6; }
  .mob-cta {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #05080c;
    background: #94d6f6;
    padding: 0.9rem 2.4rem;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .mob-cta:hover { opacity: 0.85; }

  /* ── PAGE HERO ─────────────────────── */
  .page-hero { min-height: 280px; }
  .ph-content { padding: 4.5rem 1.5rem 2.5rem; }
  .ph-content::before { height: 36px; margin-bottom: 1.2rem; }
  .page-hero-title,
  .ph-title {
    font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
    animation: none !important;
    opacity: 1 !important;
  }

  /* ── COMMON SECTIONS ───────────────── */
  .inner { padding: 0; }

  /* ── INDEX — HERO ──────────────────── */
  .hero { padding: 0; }
  .hero-c {
    padding: 7rem 1.5rem 4rem;
    max-width: 100%;
  }
  .h-title {
    font-size: clamp(2.8rem, 12vw, 5rem) !important;
    line-height: 1 !important;
  }
  .h-sub { font-size: 0.85rem; max-width: 100%; }
  .h-acts { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .scroll-ind { display: none; }

  /* INDEX — MARQUEE */
  .mq { padding: 1rem 0; }

  /* INDEX — ABOUT TEASER */
  .about-t { padding: 4rem 1.5rem; }
  .about-g {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .about-vis { height: 280px; }
  .av-bg { height: 100%; }

  /* INDEX — SERVICES */
  .svc-t { padding: 4rem 1.5rem; }
  .svc-g { grid-template-columns: 1fr !important; }
  .svc-card { padding: 0 0 2rem; }
  .svc-img { height: 160px; margin: 0 0 1.5rem; }
  .svc-name { padding: 0 1.8rem; }
  .svc-desc { padding: 0 1.8rem; }
  .svc-arr  { right: 1.8rem; }
  .svc-n    { padding: 0 1.8rem; padding-top: 1.8rem; }

  /* INDEX — STATS */
  .stats { padding: 4rem 1.5rem; }
  .stats-g { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem; }
  .stat-n { font-size: clamp(2.5rem, 10vw, 4rem); }

  /* INDEX — CTA */
  .cta-s { padding: 5rem 1.5rem; }
  .cta-title { font-size: clamp(2.2rem, 10vw, 4rem) !important; }
  .cta-acts { flex-direction: column; align-items: center; gap: 1rem; }

  /* ── ABOUT PAGE ────────────────────── */
  .about-sec { padding: 4rem 1.5rem; }
  .story-g {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
  }
  .story-img { height: 260px; }
  .si-bg { height: 100%; }

  .values-sec { padding: 4rem 1.5rem; }
  .values-g { grid-template-columns: 1fr !important; }

  .team-sec { padding: 4rem 1.5rem; }
  .team-g { grid-template-columns: 1fr !important; }

  .test-sec { padding: 4rem 1.5rem; }
  .test-arrows { gap: 0.8rem; }

  .logos-sec { padding: 4rem 1.5rem; }
  .logos-g { grid-template-columns: repeat(2, 1fr) !important; gap: 0.8rem; }
  .logo-box { height: 72px; padding: 0.8rem; }

  /* ── SERVICES PAGE ─────────────────── */
  .services-section { padding: 4rem 1.5rem; }
  .svc-header { padding: 1.8rem 1.5rem; gap: 1rem; }
  .tile-num { font-size: 2.5rem; min-width: 2.5rem; }
  .tile-name { font-size: 1.2rem; }
  .tile-desc { font-size: 0.8rem; }
  .tile-body { padding: 0 1.5rem 2rem; }
  .sub-grid { grid-template-columns: 1fr !important; gap: 1rem; }
  .process-bar {
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: flex-start;
  }
  .pb-step { min-width: calc(33% - 0.6rem); }

  /* ── PROJECTS PAGE ─────────────────── */
  .proj-sec { padding: 4rem 1.5rem 5rem; }
  .filter-bar { gap: 0.5rem; }
  .filter-btn { font-size: 0.65rem; padding: 0.45rem 1rem; }
  .proj-grid { grid-template-columns: 1fr !important; }
  .proj-name { font-size: 1.05rem; }
  .pagination { gap: 0.4rem; }
  .pg-btn { min-width: 36px; height: 36px; font-size: 0.68rem; }

  /* ── GALLERY PAGE ──────────────────── */
  .gal-sec { padding: 3rem 1rem 5rem; }
  .masonry { columns: 2 !important; column-gap: 6px; }

  /* ── CONTACT PAGE ──────────────────── */
  .contact-sec { padding: 4rem 1.5rem; }
  .contact-g {
    grid-template-columns: 1fr !important;
    gap: 3rem;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .ci-item { gap: 1rem; }
  .ci-icon { width: 40px; height: 40px; font-size: 1rem; }

  /* ── FOOTER ────────────────────────── */
  footer { padding: 3.5rem 1.5rem 2rem; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
    margin-top: 2rem;
  }

  /* ── LIGHTBOXES ────────────────────── */
  .lb { padding: 1rem; }
  .lb-close { top: 1rem; right: 1rem; }
  .lb-prev { left: 0.5rem; }
  .lb-next { right: 0.5rem; }
  .lb-title { font-size: 1.5rem; }
}


/* ═══════════════════════════════════════════
   SMALL PHONES  (≤ 480px)
═══════════════════════════════════════════ */
@media (max-width: 480px) {

  .h-title { font-size: clamp(2.4rem, 14vw, 3.5rem) !important; }
  .stats-g { grid-template-columns: 1fr !important; }
  .masonry { columns: 1 !important; }
  .logos-g { grid-template-columns: repeat(2, 1fr) !important; }
  .values-g { grid-template-columns: 1fr !important; }
  .team-g   { grid-template-columns: 1fr !important; }

  /* Service card tighter on small phones */
  .svc-n, .svc-name, .svc-desc { padding-left: 1.2rem; padding-right: 1.2rem; }

  /* Process bar — 2 per row on small screens */
  .pb-step { min-width: calc(50% - 0.6rem); }

  /* About story visual smaller */
  .story-img { height: 200px; }

  /* Gallery single column */
  .gal-sec { padding: 2rem 0.8rem 4rem; }
}