/* ================================================================
   RESPONSIVE.CSS — Comprehensive mobile/tablet overrides
   Linked after per-page <style> blocks — correct cascade order
   ================================================================ */

/* ─── GLOBAL TOUCH & OVERFLOW SAFETY ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, html { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; }

/* Touch-friendly tap targets (min 44px per WCAG 2.5.5) */
.btn {
  min-height: 44px;
}
.hamburger { min-height: 44px; min-width: 44px; }

/* Cursor: auto on all touch devices */
@media (pointer: coarse) {
  body, .btn, .nav-cta, .hamburger,
  .hero-dot, .portfolio-item, .events-img-wrap,
  .service-card, .process-step, .faq-q { cursor: auto !important; }
}

/* ─── HERO SCROLL BUTTON — CENTERING + MOBILE FIX ───────────── */
/* Root cause: fadeUp ends with transform:translateY(0) which        */
/* overwrites the base transform:translateX(-50%) centering offset.  */
/* This animation preserves both axes so centering is never lost.    */
@keyframes fadeUpCentered {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.hero-scroll,
.hero-scroll-hint,
.fac-hero-scroll {
  animation-name: fadeUpCentered !important;
}

/* nav-cta: hide on mobile (matches original style.css intent) */
@media (max-width: 768px) {
  .nav-cta { display: none !important; }
}

@media (max-width: 768px) {
  /* all three scroll button variants */
  .hero-scroll,
  .hero-scroll-hint,
  .fac-hero-scroll      { bottom: 28px !important; }
  .scroll-line,
  .hero-scroll-line,
  .fac-hero-scroll-line { height: 28px !important; }
}
@media (max-width: 480px) {
  .hero-scroll,
  .hero-scroll-hint,
  .fac-hero-scroll      { bottom: 24px !important; }
  .scroll-line,
  .hero-scroll-line,
  .fac-hero-scroll-line { height: 22px !important; }
  .hero-scroll span,
  .hero-scroll-text,
  .fac-hero-scroll-text { font-size: 8px !important; }
}
/* Landscape on very short phones — minimal vertical space */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-scroll,
  .hero-scroll-hint,
  .fac-hero-scroll      { bottom: 12px !important; }
  .scroll-line,
  .hero-scroll-line,
  .fac-hero-scroll-line { height: 16px !important; }
}

/* ─── HERO SECTION (homepage) ────────────────────────────────── */
@media (max-width: 768px) {
  .hero-content  { padding: 0 20px 84px !important; }
  .hero-h1       { font-size: clamp(38px, 9vw, 66px) !important; }
  .hero-subtitle { font-size: 13px !important; line-height: 1.75 !important; }
}
@media (max-width: 480px) {
  .hero-content  { padding: 0 16px 76px !important; }
  .hero-h1       { font-size: clamp(34px, 9vw, 52px) !important; }
  .hero-subtitle { font-size: 12px !important; max-width: 100% !important; }
  .hero-buttons  { flex-direction: column !important; gap: 10px !important; }
  .hero-buttons .btn { width: 100% !important; justify-content: center !important; }
}
/* Landscape on short phones */
@media (orientation: landscape) and (max-height: 500px) {
  #hero { height: 100vh !important; min-height: unset !important; }
  .hero-content  { padding: 0 24px 36px !important; }
}

/* ─── MARQUEE STRIP ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .marquee-item  { font-size: clamp(9px, 2.4vw, 11px) !important; gap: 10px !important; padding-right: 10px !important; }
  #marquee       { padding: 11px 0 !important; }
}

/* ─── ABOUT SECTION ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .about-badge         { display: none !important; }
  .about-image-inner::before { display: none !important; }
}
@media (max-width: 768px) {
  #about-intro         { padding: 80px 20px !important; }
  .about-body          { font-size: 14px !important; }
}
@media (max-width: 480px) {
  #about-intro         { padding: 60px 16px !important; }
  .about-h2            { font-size: clamp(28px, 7vw, 44px) !important; }
  .about-body          { font-size: 13px !important; line-height: 1.8 !important; }
  .about-cta           { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .about-cta .btn      { width: 100% !important; justify-content: center !important; }
}

/* ─── SERVICES SECTION ───────────────────────────────────────── */
@media (max-width: 768px) {
  #services            { padding: 80px 20px !important; }
  .services-header     { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 48px !important; }
  .services-grid       { grid-template-columns: 1fr !important; }
  .service-card        { border-right: none !important; }
  .services-desc       { margin-left: 0 !important; max-width: 100% !important; }
}
@media (max-width: 480px) {
  #services            { padding: 60px 16px !important; }
  .services-h2         { font-size: clamp(28px, 7vw, 42px) !important; }
  .service-name        { font-size: 18px !important; }
}

/* ─── PORTFOLIO GRID ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #portfolio           { padding: 80px 20px !important; }
  .portfolio-header    { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  #portfolio           { padding: 60px 16px !important; }
  .portfolio-grid      { grid-template-columns: 1fr !important; gap: 6px !important; }
  .portfolio-item:nth-child(1),
  .portfolio-item:nth-child(2),
  .portfolio-item:nth-child(3),
  .portfolio-item:nth-child(4),
  .portfolio-item:nth-child(5) { grid-column: span 1 !important; aspect-ratio: 4/3 !important; }
}

/* ─── EVENTS & EXHIBITIONS TEASER ────────────────────────────── */
@media (max-width: 768px) {
  #events-teaser       { padding: 80px 20px !important; }
  .events-images       { grid-template-columns: 1fr !important; }
  .events-img-wrap     { aspect-ratio: 3/2 !important; }
  .events-body         { font-size: 13px !important; }
}
@media (max-width: 480px) {
  #events-teaser       { padding: 60px 16px !important; }
}

/* ─── PROCESS STEPS (homepage) ───────────────────────────────── */
@media (max-width: 768px) {
  #process             { padding: 80px 20px !important; }
  .process-steps       { grid-template-columns: repeat(2,1fr) !important; gap: 40px 16px !important; }
  .process-steps::before { display: none !important; }
  .process-step-title  { font-size: 18px !important; }
}
@media (max-width: 480px) {
  #process             { padding: 60px 16px !important; }
  .process-steps       { grid-template-columns: 1fr !important; gap: 32px !important; }
  .process-step-text   { font-size: 12px !important; }
}

/* ─── BRAND PROMISE SECTION ──────────────────────────────────── */
@media (max-width: 768px) {
  #brand-promise       { padding: 100px 20px !important; }
  .brand-bg-text       { font-size: clamp(48px, 12vw, 120px) !important; opacity: 0.018 !important; }
  .brand-quote         { font-size: clamp(24px, 5.5vw, 40px) !important; }
}
@media (max-width: 480px) {
  #brand-promise       { padding: 72px 16px !important; }
  .brand-bg-text       { display: none !important; }
  .brand-quote         { font-size: clamp(22px, 6.5vw, 34px) !important; line-height: 1.35 !important; }
  .brand-buttons       { flex-direction: column !important; align-items: stretch !important; }
  .brand-buttons .btn  { width: 100% !important; justify-content: center !important; }
}

/* ─── CONTACT CTA ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #contact-cta         { padding: 80px 20px !important; }
}
@media (max-width: 480px) {
  #contact-cta         { padding: 60px 16px !important; }
  .contact-cta-inner   { gap: 28px !important; }
  .contact-cta-h2      { font-size: clamp(24px, 6.5vw, 36px) !important; }
  .contact-cta-actions { flex-direction: column !important; width: 100% !important; }
  .contact-cta-actions .btn { width: 100% !important; justify-content: center !important; }
}

/* ─── FAQ SECTION ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #faq                 { padding: 80px 20px !important; }
  .faq-q               { font-size: 14px !important; padding: 18px 0 !important; }
}
@media (max-width: 480px) {
  #faq                 { padding: 60px 16px !important; }
  .faq-q               { font-size: 13px !important; gap: 10px !important; }
  .faq-a p             { font-size: 12px !important; line-height: 1.75 !important; }
  .faq-icon            { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }
}

/* ─── PAGE HERO (service pages) ──────────────────────────────── */
@media (max-width: 768px) {
  #page-hero           { height: 58vh !important; min-height: 460px !important; }
  .page-hero-content   { padding: 0 20px 60px !important; }
  .page-hero-sub       { font-size: 13px !important; max-width: 100% !important; }
}
@media (max-width: 480px) {
  #page-hero           { height: 52vh !important; min-height: 380px !important; }
  .page-hero-content   { padding: 0 16px 44px !important; }
  .page-hero-h1        { font-size: clamp(32px, 8.5vw, 54px) !important; margin-bottom: 10px !important; }
  .page-hero-sub       { font-size: 12px !important; line-height: 1.7 !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #page-hero           { height: 100vh !important; min-height: unset !important; }
  .page-hero-content   { padding: 0 24px 28px !important; }
}

/* ─── SERVICE OVERVIEW ───────────────────────────────────────── */
@media (max-width: 480px) {
  #svc-overview        { padding: 60px 16px !important; }
  .svc-overview-h2     { font-size: clamp(26px, 6.5vw, 40px) !important; }
  .svc-overview-body   { font-size: 13px !important; }
  .svc-overview-badge  { width: 80px !important; height: 80px !important; bottom: -10px !important; left: -8px !important; }
  .svc-badge-num       { font-size: 22px !important; }
  .svc-badge-text      { font-size: 7px !important; }
}

/* ─── CAPABILITIES GRID ──────────────────────────────────────── */
@media (max-width: 768px) {
  #capabilities        { padding: 80px 20px !important; }
}
@media (max-width: 480px) {
  #capabilities        { padding: 60px 16px !important; }
  .cap-grid            { grid-template-columns: 1fr !important; }
  .cap-card            { border-right: none !important; }
  .cap-title           { font-size: 15px !important; }
  .cap-body            { font-size: 12px !important; }
}

/* ─── GALLERY ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #gallery             { padding: 60px 16px !important; }
  .gallery-grid        { grid-template-columns: 1fr !important; gap: 8px !important; }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3),
  .gallery-item:nth-child(4),
  .gallery-item:nth-child(5) { grid-column: span 1 !important; aspect-ratio: 4/3 !important; }
}

/* ─── SERVICE PROCESS (service pages) ───────────────────────── */
@media (max-width: 480px) {
  #process             { padding: 60px 16px !important; }
  .process-track       { grid-template-columns: 1fr !important; gap: 32px !important; }
  .process-track::before { display: none !important; }
  .process-title       { font-size: 17px !important; }
  .process-desc        { font-size: 12px !important; }
}

/* ─── WHY-US SECTION ─────────────────────────────────────────── */
@media (max-width: 480px) {
  #why-us              { padding: 60px 16px !important; }
  .why-tile            { padding: 32px 20px !important; }
  .why-title           { font-size: 18px !important; }
  .why-body            { font-size: 12px !important; }
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .footer-manifesto    { padding: 12px 16px !important; }
  .footer-manifesto-inner { font-size: 12px !important; }
  .footer-grid         { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 16px 32px !important; }
  .footer-bottom       { flex-direction: column !important; gap: 8px !important; text-align: center !important; padding: 16px !important; }
  .footer-links a      { font-size: 12px !important; }
  .footer-enquiry-btn  { width: 100% !important; text-align: center !important; }
}

/* ─── OVERLAY MENU ───────────────────────────────────────────── */
@media (max-width: 380px) {
  #overlay-menu        { padding: 80px 16px 36px !important; }
}

/* ─── ABOUT PAGE ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .stats-grid          { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .values-grid         { grid-template-columns: 1fr !important; }
  .timeline-item       { padding-left: 20px !important; }
  .stat-num            { font-size: clamp(36px, 9vw, 56px) !important; }
}

/* ─── PROJECTS PAGE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .filter-bar          { gap: 8px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .filter-btn          { font-size: 9px !important; padding: 8px 14px !important; min-height: 36px !important; }
}
@media (max-width: 480px) {
  .projects-grid       { grid-template-columns: 1fr !important; }
  .project-card        { aspect-ratio: 4/3 !important; }
}

/* ─── CONTACT PAGE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-grid        { grid-template-columns: 1fr !important; gap: 48px !important; }
}
@media (max-width: 480px) {
  .contact-grid        { gap: 36px !important; }
}
/* iOS Safari: prevent zoom on input focus */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ─── FACILITY PAGE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .facility-grid       { grid-template-columns: 1fr !important; gap: 32px !important; }
  .map-embed,
  iframe               { height: 260px !important; }
}

/* ─── SECTION LABELS — Never clip on narrow screens ─────────── */
.section-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
}
@media (max-width: 360px) {
  .section-label       { font-size: 9px !important; letter-spacing: 0.14em !important; }
  .section-label::before { width: 16px !important; }
}

/* ─── REVEAL ANIMATION — Reduce distance on mobile ───────────── */
@media (max-width: 768px) {
  .reveal              { transform: translateY(14px) !important; }
  .reveal.visible      { transform: translateY(0) !important; }
}

/* ─── BUTTONS — Ultra-mobile adjustments ─────────────────────── */
@media (max-width: 480px) {
  .btn                 { padding: 13px 20px !important; font-size: 10px !important; }

}

/* ─── SECTION HEADINGS — Scale down on 360px ─────────────────── */
@media (max-width: 360px) {
  h1, h2               { word-break: break-word; hyphens: auto; }
  .services-h2,
  .about-h2,
  .events-h2,
  .process-h2,
  .portfolio-h2,
  .contact-cta-h2,
  .svc-overview-h2,
  .page-hero-h1        { word-break: break-word; }
}