/* =========================================================
   STC LIVING — Responsive rules
   Breakpoints: 1080 (tablet-lg), 860 (tablet), 620 (mobile)
   ========================================================= */

/* ---------- Tablet-large ---------- */
@media (max-width:1080px){
  .wrap{padding:0 28px;}
  .about-grid{gap:40px;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .coll-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr;}
  .footer-col:last-child{grid-column:span 3;}
  
  .contact-grid-v2{grid-template-columns:340px 1fr;gap:20px;}
}

/* ---------- Tablet ---------- */
@media (max-width:860px){
  nav{padding:14px 24px;}
  .navlinks{
    position:fixed;top:73px;left:0;right:0;background:var(--espresso-deep);
    flex-direction:column;gap:0;padding:10px 24px 20px;
    border-bottom:1px solid rgba(186,141,95,.18);
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:all .35s var(--ease);
  }
  .navlinks.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
  .navlinks a{padding:14px 0;border-bottom:1px solid rgba(186,141,95,.1);width:100%;}
  .nav-cta{display:none;}
  .menu-toggle{display:flex;}
  .menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  .about-grid{grid-template-columns:1fr;}
  .about-visual{order:1;}
  .about-visual img{height:340px;}

  .why-grid{grid-template-columns:repeat(2,1fr);}
  .coll-grid{grid-template-columns:repeat(2,1fr);}
  .tier-grid{grid-template-columns:1fr;}
  
  /* Contact grid stacked cleanly on tablet */
  .contact-grid-v2{grid-template-columns:1fr;gap:24px;}

  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-col:last-child{grid-column:span 2;}

  .cta-banner{padding:40px;flex-direction:column;text-align:center;}
  .cta-banner h2{max-width:100%;}

  .quote-block{padding:40px 28px;}
  .quote-block p{font-size:1.5rem;}
}

/* ---------- Mobile ---------- */
@media (max-width:620px){
  .wrap{padding:0 20px;}
  .section{padding:50px 0;}
  .section-head h2{font-size:1.9rem;}
  .page-hero{padding:70px 0 56px;}
  .page-hero h1{font-size:2.1rem;}

  .why-grid{grid-template-columns:1fr;}
  .coll-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .coll-tabs{gap:8px;}
  .coll-tab{padding:9px 18px;font-size:.72rem;}

  /* Contact Cards Mobile */
  .git-card, .enquiry-card{padding:24px 20px;}
  .wa-card-v2{padding:20px;}

  /* Map overlay layout on mobile */
  .map-section{padding-bottom:40px;}
  .map-shell-v2{height:auto;display:flex;flex-direction:column;}
  .map-shell-v2 .map-frame{height:250px;}
  .map-overlay-v2{
    position:relative;
    left:0;
    top:0;
    width:100%;
    margin:0;
    box-shadow:none;
    border-top:1px solid rgba(0,0,0,0.08);
    border-radius:0;
    padding:20px;
  }

  .about-stats{grid-template-columns:1fr;}
  .about-stats div{border-right:none;border-bottom:1px solid var(--gold);}
  .about-stats div:last-child{border-bottom:none;}

  .footer-grid{grid-template-columns:1fr;}
  .footer-col:last-child{grid-column:span 1;}
  .footer-bottom{flex-direction:column;text-align:center;}

  .quote-block p{font-size:1.25rem;}
  .cta-banner h2{font-size:1.6rem;}

  .wa-float{width:52px;height:52px;right:16px;bottom:16px;}
  .wa-float svg{width:24px;height:24px;}
}

/* ---------- Small phones ---------- */
@media (max-width:380px){
  .brand-name{font-size:1.05rem;}
  .coll-grid{grid-template-columns:1fr 1fr;}
}