/* ================= Tablet & below ================= */
@media (max-width:1000px){
  .fill-gauge{ display:none; }
}

@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ display:block; margin-top:36px; }
  .hero-photo-frame img{ aspect-ratio:16/10; }
  .about-grid{ grid-template-columns:1fr; }
  .about-visual{ max-width:340px; margin:0 auto; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cta-banner{ flex-direction:column; text-align:center; }
}

/* ================= Mobile ================= */
@media (max-width:720px){
  nav.main-nav, .nav-actions .nav-phone{ display:none; }
  .nav-toggle{ display:block; }
  nav.main-nav.open{
    display:flex; position:absolute; top:100%; left:0; right:0;
    background:var(--ocean-deep); flex-direction:column; padding:20px 24px;
  }
  nav.main-nav.open ul{ flex-direction:column; gap:18px; }
  .services-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .section{ padding:70px 0; }
  .page-header{ padding:150px 0 70px; }
}