/* ============================================================
   Shingle hero - images/shingle-hero.jpg, 1983x793 (2.5006:1)
   Desktop (>1000px): the plate IS the finished design - logo, phone
   button, headline, badges, haze and QUALITY block are painted in.
   Only the nav text was removed from the artwork; the live nav is
   laid back in at the painted position. The HTML copy stays in the
   DOM (h1, badges) for SEO/screen readers but is visually hidden so
   nothing doubles over the artwork.
   Painted positions (px on the 1983 plate, /19.83 = cqw):
     logo          x62-360   y24-188
     nav caps      y76-90    first word x584, last word ends x1634
     underline     y103-107
     phone button  x1677-1945 y47-111
   Mobile (<=1000px): clean plate shingle-hero-mobile.jpg + live copy.
   ============================================================ */
.shero{background:#fff;}
.shero .ov{z-index:2;}

@media (min-width:1001px){
  /* live copy kept for SEO, hidden over the painted artwork */
  .shero .layer{position:absolute;inset:0;}
  .shero .ov{
    position:absolute !important;width:1px !important;height:1px !important;
    padding:0 !important;margin:-1px !important;overflow:hidden !important;
    clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important;
  }

  /* header: painted logo + painted phone button show through,
     the live elements sit on top as invisible hit areas */
  .shinglepage .credentials{display:none;}

  /* nav: same font, weight and size rule as index (aa-index.css .mainnav a),
     only the position is moved to the slot painted on this hero */
  .shinglepage .mainnav{left:30cqw;top:4.28cqw;}
  .shinglepage .mainnav ul{gap:min(1.1cqw,15px);}
  .shinglepage .mainnav .subnav{min-width:11cqw;}
}

@media (max-width:1000px){
  .shero .layer{position:static;padding:18px 16px 22px;background:#fff;}
  .shero .ov{position:static;width:auto !important;}
  .sh-h1{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1.02;color:var(--navy);}
  .sh-h1 .r{display:block;color:var(--red);}
  .sh-durable{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.1em;color:var(--navy);}
  .sh-durable b{color:var(--red);font-size:.9em;margin:0 .35em;}
  .sh-tag{margin:0 0 16px;font-family:var(--display);font-style:italic;font-weight:700;font-size:1.05rem;line-height:1.15;color:var(--navy);}
  .sh-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 14px;padding:0;list-style:none;}
  .sh-badges li{text-align:center;}
  .sh-badges .ic{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 7px;border-radius:50%;background:var(--navy);border:3px solid var(--red);box-sizing:border-box;}
  .sh-badges .ic svg{width:52%;height:52%;fill:#fff;}
  .sh-badges b{display:block;font-family:var(--ui);font-weight:900;font-size:.8rem;line-height:1.12;letter-spacing:.02em;color:var(--navy);}
  .sh-quality{margin:0;font-family:var(--ui);font-weight:900;font-size:1rem;line-height:1.3;letter-spacing:.07em;color:var(--navy);text-align:left;}
}