/* ===================================================================
   RESPONSIVE — breakpoints: 1440 / 1280 / 1024 / 768 / 430 / 390 / 360
   Layout/responsiveness only — desktop visual design is preserved.
=================================================================== */

/* Large desktop refinement */
@media (min-width: 1600px){
  .container{ padding-left: 96px; padding-right: 96px; }
}

/* Laptop */
@media (max-width: 1280px){
  .main-nav{ gap: 30px; }
  .main-nav ul{ gap: 26px; }
  .stats-row{ grid-template-columns: repeat(2,1fr); }
  .stat{ border-right: 1px solid var(--line-light); }
  .stat:nth-child(2n){ border-right:none; }
  .stat:nth-child(n+3){ border-top: 1px solid var(--line-light); }
}

/* Tablet */
@media (max-width: 1024px){
  .split, .split--reverse{ grid-template-columns: 1fr; }
  .split--reverse .split-media{ order:0; }
  .split-media-tag{ left: 16px; bottom:-24px; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .location-wrap{ grid-template-columns:1fr; }
  .section{ padding: 96px 0; }
}

/* Small tablet / large phone */
@media (max-width: 860px){
  .main-nav{ display:none; }
  .header-enquire{ display:none; }
  .menu-btn{ display:flex; }
  .hero h1{ font-size: clamp(2.6rem, 11vw, 4.5rem); }
  .hero-content{ padding-top: 130px; }
  .principle{ padding: 32px 0; }
  .fp-info{ padding: 24px; }
  .footer-top{ grid-template-columns: 1fr; gap: 40px; padding-bottom: 46px; }
  .footer-statement{ padding: 40px 0; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* Mobile */
@media (max-width: 600px){
  :root{ --gutter: 20px; }
  .section{ padding: 72px 0; }
  .section--tight{ padding: 56px 0; }
  .hero-meta{ font-size:0.78rem; gap: 10px 18px; }
  .hero-actions{ flex-direction:column; align-items:flex-start; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .scroll-indicator{ display:none; }
  .mosaic{ grid-auto-rows: 140px; }
  .showcase-card{ width: 84vw; }
  .cta-full-actions{ flex-direction:column; width:100%; }
  .cta-full-actions .btn{ width:100%; justify-content:center; }
  .footer-statement h2{ font-size: clamp(2rem, 9vw, 3rem); }
  .lightbox-caption{ font-size:0.9rem; max-width:85vw; }
}

/* Very small phones */
@media (max-width: 390px){
  .brand-word{ font-size:0.9rem; }
  .brand-word strong{ font-size:1.02rem; }
  .btn{ padding: 15px 22px; font-size:0.78rem; }
}

/* ================================================================
   MOBILE OVERFLOW / INLINE-GRID FIXES
   These rules only affect tablet/mobile widths.
   They do not change the desktop design.
================================================================ */

@media (max-width: 900px){

  /* Contact page: convert the inline two-column enquiry layout to one column. */
  #enquiry > .container{
    grid-template-columns: 1fr !important;
    gap: 50px !important;
  }

  /* Project detail page: convert the inline two-column gallery to one column. */
  .project-gallery-grid{
    grid-template-columns: 1fr !important;
  }

  /* Keep content inside the viewport. */
  .container{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  img,
  video,
  iframe{
    max-width: 100%;
  }

  /* Long text/links must wrap rather than widen the page. */
  a,
  p,
  h1,
  h2,
  h3,
  h4{
    overflow-wrap: break-word;
  }
}

@media (max-width: 600px){

  /* Inline flex groups can wrap naturally on small screens. */
  .container[style*="display:flex"]{
    flex-wrap: wrap;
  }

  input,
  select,
  textarea{
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* No-overflow safety net */
html,
body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.container,
.split,
.location-wrap,
.footer-top{
  max-width:100%;
}