/* ==========================================================
   Responsive layer — mobile-first overrides
   Tested at: 320 / 360 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440+
   ========================================================== */

/* Exact anchor positions are calculated in main.js from the fixed header height. */

/* Never allow the page to scroll sideways */
html,body{width:100%;max-width:100%;overflow-x:clip;}
img{max-width:100%;height:auto;}

/* ---------- ≤1024px : tablet ---------- */
@media(max-width:1024px){
  .hero-grid,.twocol,.contact-grid,.info-grid,.cert-grid{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .range-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .stat-strip{grid-template-columns:1fr;}
  .stat{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:16px;}
  .stat:first-child{border-top:none;}
  .foot-grid{grid-template-columns:1fr;}
  .contact-left,.contact-right{padding:34px;}
}

/* ---------- ≤820px : mobile nav kicks in (header.css breakpoint) ---------- */
@media(max-width:820px){
  nav{flex-wrap:nowrap;gap:8px;padding:14px 20px;}
  .brand{min-width:0;overflow:hidden;}
  .brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .brand-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* Keep "Call for Quote" compact in the mobile header */
  nav .cta-btn.amber{
    flex-shrink:0;
    padding:8px 12px;
    font-size:12px;
    letter-spacing:0.01em;
    gap:6px;
    white-space:nowrap;
  }
  .menu-toggle{flex-shrink:0;}
}

/* ---------- ≤768px ---------- */
@media(max-width:768px){
  .prod-grid{grid-template-columns:1fr 1fr;}
  .cert-row,.contact-line{flex-wrap:wrap;gap:4px;}
  .contact-line .v{text-align:left;}
}

/* ---------- ≤560px : single-column product/why grids ---------- */
@media(max-width:560px){
  .prod-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .badge-row{flex-direction:column;align-items:flex-start;}
  .dl-row{flex-direction:column;}
  .dl-row a{text-align:center;}
}

/* ---------- ≤480px : phones ---------- */
@media(max-width:480px){
  .contact-btn-row{gap:6px;}
  .contact-btn-row>a{padding:9px 6px;font-size:12px;letter-spacing:0;}
}
@media(max-width:390px){
  .contact-btn-row>a{padding:8px 4px;font-size:11px;}
}
@media(max-width:340px){
  .contact-btn-row>a{padding:7px 3px;font-size:10px;}
}
@media(max-width:480px){
  .wrap{padding:0 18px;}
  nav{padding:12px 18px;}
  .hero{padding:64px 0 40px;}
  .hero h1{font-size:clamp(24px,7vw,32px);}
  section{padding:52px 0;}
  .contact-left,.contact-right{padding:28px 22px;}
  .foot-bottom{flex-direction:column;}
  .why-grid{grid-template-columns:1fr;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas a{text-align:center;}
}

/* ---------- ≤390px ---------- */
@media(max-width:390px){
  .brand-sub{display:none;}
  nav .cta-btn.amber{padding:7px 10px;font-size:11px;}
  .brand-mark{width:32px;height:32px;}
  .brand-name{font-size:15px;}
}

/* ---------- ≤340px : smallest supported phones ---------- */
@media(max-width:340px){
  .stat-strip{gap:10px;}
  nav .cta-btn.amber{padding:6px 9px;font-size:10.5px;}
  .wrap{padding:0 14px;}
  nav{padding:10px 14px;}
}

/* ---------- Contact / call-quote modal ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(27,36,48,0.62);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease;
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-box{
  background:var(--white);border:1.5px solid var(--steel-deep);
  width:100%;max-width:360px;padding:30px 22px 24px;
  box-sizing:border-box;max-height:calc(100vh - 40px);overflow-y:auto;
  position:relative;
  transform:translateY(10px);
  transition:transform .18s ease;
}
.modal-overlay.open .modal-box{transform:translateY(0);}
.modal-close{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border:1px solid var(--line);background:var(--white);
  font-size:18px;line-height:1;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:var(--paper-deep);}
.modal-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-deep);font-weight:600;margin-bottom:10px;
}
.modal-value{
  font-family:'IBM Plex Mono',monospace;font-size:clamp(14px,4.2vw,18px);font-weight:600;
  color:var(--steel-deep);overflow-wrap:anywhere;word-break:normal;
  margin-bottom:22px;line-height:1.35;
}
.modal-actions{display:flex;flex-direction:column;gap:10px;}
.modal-actions .cta-btn,.modal-actions .cta-outline{
  width:100%;justify-content:center;text-align:center;cursor:pointer;
}
.modal-copy-msg{
  font-size:12.5px;margin-top:14px;min-height:16px;color:var(--verified);font-weight:600;
}

@media (prefers-reduced-motion: reduce){
  .modal-overlay,.modal-box{transition:none;}
}


/* Final responsive CTA/header safeguards */
@media(max-width:820px){
  nav .cta-btn.amber{
    flex:0 0 auto;
    width:auto;
    max-width:112px;
    min-height:36px;
    box-sizing:border-box;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

@media(max-width:480px){
  .contact-btn-row{
    width:100%;
    flex-wrap:nowrap;
  }
  .contact-btn-row > a{
    flex:1 1 0;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media(max-width:360px){
  nav .cta-btn.amber{
    max-width:102px;
    padding-left:7px;
    padding-right:7px;
  }
}