/* NPZ_HERO_V1 (2026-10-27) — "Are We in Your Area?" ZIP card in the hero of every
   non-moving page (assembly, handyman, hoisting). The card hands the ZIP to the NPQ2
   quote form (/quote/npq2.js) and opens it at the next question.
   Desktop (>=1024px): two columns, page text on the left, card on the right.
   Phone/tablet: one column, card right under the description. */

/* ---------- layout: phone + tablet ---------- */
#hero .npz-grid{display:flex;flex-direction:column;align-items:stretch;}
#hero .npz-left{display:contents;}
#hero .npz-grid #hero-badge{align-self:center;}
#hero .npz-grid #hero-cta,
#hero .npz-grid #service-router,
#hero .npz-grid #hero-trust{order:2;}
#hero .npz-card{order:1;}
@media (max-width:1023px){
  /* the card is the quote start and carries the phone number, so the two duplicate
     buttons step aside; anything else in the row (e.g. "Text Us a Photo") stays */
  #hero .npz-grid #hero-cta .btn-premium,
  #hero .npz-grid #hero-cta a[href^="tel:"]{display:none!important;}
  #hero .npz-grid #hero-cta:not(:has(> a:not(.btn-premium):not([href^="tel:"]))){display:none!important;}
}

/* ---------- layout: desktop ---------- */
@media (min-width:1024px){
  #hero .npz-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:3.5rem;align-items:center;
    max-width:76rem;text-align:left;padding-top:9rem;padding-bottom:6rem;}
  #hero .npz-left{display:block;min-width:0;}
  #hero .npz-grid #hero-badge{margin-bottom:1.75rem;}
  #hero .npz-grid #hero-title{font-size:clamp(3.4rem,4.7vw,4.9rem);line-height:1;margin-bottom:1.5rem;}
  #hero .npz-grid #hero-desc{margin-left:0;margin-right:0;max-width:36rem;font-size:1.15rem;margin-bottom:2rem;}
  #hero .npz-grid #hero-cta{justify-content:flex-start;}
  #hero .npz-grid #service-router{text-align:left;margin-bottom:2.25rem;}
  #hero .npz-grid #hero-trust{justify-content:flex-start;}
  #hero .npz-card{margin:0;max-width:none;}
}
@media (min-width:1024px){
  /* pages with their own left-shifted hero (playset) get the same centred two-column frame */
  #hero > .relative.z-10.npz-grid{margin-left:auto;margin-right:auto;max-width:76rem;}
  #hero .npz-grid #hero-cta a{white-space:nowrap;}
}
@media (min-width:1024px) and (max-width:1279px){
  /* narrow desktop: keep the trust row and the two buttons on one line */
  #hero .npz-grid #hero-trust{gap:1.75rem!important;flex-wrap:nowrap;}
  #hero .npz-grid #hero-trust .w-px{display:none!important;}
  #hero .npz-grid #hero-cta{gap:.75rem;}
  #hero .npz-grid #hero-cta a{padding:.95rem 1.4rem!important;font-size:1rem!important;}
}
@media (min-width:1280px){
  #hero .npz-grid{grid-template-columns:minmax(0,1fr) 420px;column-gap:4.5rem;}
}

/* ---------- the card ---------- */
#hero .npz-card{position:relative;width:100%;max-width:440px;margin:0 auto 1.6rem;text-align:left;
  background:#fff;color:#102a43;border-radius:1.5rem;padding:1.6rem 1.5rem 1.35rem;
  box-shadow:0 30px 60px -18px rgba(3,10,20,.55),0 0 0 1px rgba(255,255,255,.08);text-shadow:none;}
#hero .npz-card::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#F5A623,#E8941E);}
.npz-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.85rem;}
.npz-pin{width:2.9rem;height:2.9rem;flex-shrink:0;border-radius:.95rem;display:flex;align-items:center;justify-content:center;
  background:rgba(245,166,35,.13);color:#E8941E;}
.npz-pin svg{width:1.35rem;height:1.35rem;}
.npz-eyebrow{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9a5b00;line-height:1.2;}
#hero .npz-title{margin:.2rem 0 0;font-size:1.85rem;line-height:1.05;font-weight:700;color:#102a43;letter-spacing:-.01em;text-shadow:none;}
.npz-sub{margin:0 0 1.1rem;font-size:.95rem;line-height:1.55;color:#486581;}
.npz-label{display:block;margin-bottom:.45rem;font-size:.82rem;font-weight:600;color:#243b53;}
.npz-row{display:flex;gap:.6rem;}
.npz-input{flex:1 1 auto;min-width:0;width:100%;box-sizing:border-box;border:2px solid #d9e2ec;background:#f8fafc;border-radius:.85rem;
  padding:.8rem 1rem;font:inherit;font-size:1.15rem;font-weight:600;letter-spacing:.08em;color:#102a43;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;}
.npz-input::placeholder{color:#9fb3c8;font-weight:500;}
.npz-input:focus{outline:none;border-color:#F5A623;box-shadow:0 0 0 4px rgba(245,166,35,.18);background:#fff;}
.npz-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;white-space:nowrap;border:0;cursor:pointer;
  border-radius:.85rem;padding:.8rem 1.15rem;font:inherit;font-size:1rem;font-weight:700;color:#0a1929;
  background:linear-gradient(135deg,#F5A623 0%,#E8941E 100%);box-shadow:0 8px 18px -8px rgba(232,148,30,.7);
  transition:transform .15s,box-shadow .15s,opacity .15s;}
.npz-btn:hover{transform:translateY(-1px);box-shadow:0 12px 22px -10px rgba(232,148,30,.8);}
.npz-btn:disabled{opacity:.7;cursor:default;transform:none;}
.npz-btn svg{width:1rem;height:1rem;}
.npz-msg{display:flex;align-items:flex-start;gap:.5rem;margin:.7rem 0 0;padding:.6rem .75rem;border-radius:.7rem;font-size:.9rem;font-weight:600;line-height:1.4;}
.npz-msg[hidden]{display:none;}
.npz-msg svg{width:1.05rem;height:1.05rem;flex-shrink:0;margin-top:.1rem;}
.npz-msg.is-in{background:#ecfdf3;color:#166534;}
.npz-msg.is-out{background:#fff7e6;color:#8a5300;}
.npz-msg.is-err{background:#fef2f2;color:#b42318;}
.npz-list{list-style:none;margin:1.05rem 0 0;padding:0;display:grid;gap:.45rem;font-size:.9rem;color:#334e68;}
.npz-list li{display:flex;align-items:center;gap:.55rem;margin:0;}
.npz-list svg{width:1rem;height:1rem;flex-shrink:0;color:#E8941E;}
.npz-foot{margin-top:1.05rem;padding-top:.95rem;border-top:1px solid #e6ecf2;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  font-size:.9rem;color:#627d98;}
.npz-foot a{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:#102a43;text-decoration:none;white-space:nowrap;}
.npz-foot a:hover{color:#E8941E;}
.npz-foot svg{width:.95rem;height:.95rem;color:#E8941E;}
@media (max-width:640px){
  #hero .npz-card{padding:1.35rem 1.15rem 1.15rem;border-radius:1.25rem;margin-bottom:1.25rem;}
  #hero .npz-title{font-size:1.6rem;}
  .npz-sub{font-size:.9rem;margin-bottom:.9rem;}
}
@media (max-width:359px){
  .npz-row{flex-direction:column;}
  .npz-btn{width:100%;}
}