/* ============================================================
   Service page template (Tile / Shingle share this layout).
   Plate is 789 x 1993; every block is pinned in % of it.
   Measured bands:
     hero            y   0- 465     form panel x66.67-98.48%, y93-469
     trust strip     y 465- 583
     count-on navy   y 616- 907
     Owens Corning   y 907-1040
     colours         y1040-1233
     process         y1233-1412
     benefits navy   y1414-1631
     benefit icons   y1631-1826
     closing CTA     y1826-1930
   ============================================================ */
.svc{background:#fff;}
.svc .ov{z-index:2;}
.svc .layer{color:var(--navy);}

/* ---------- hero ------------------------------------------ */
.sv-corner{
  left:60%;top:.75%;width:38%;margin:0;text-align:right;
  font-family:var(--ui);font-weight:800;font-size:.86cqw;line-height:1.45;
  letter-spacing:.02em;color:var(--navy);
}
.sv-h1{
  left:3.8%;top:4.15%;width:44%;margin:0;
  font-family:var(--ui);font-weight:900;font-size:5.4cqw;line-height:.96;
  letter-spacing:-.01em;color:var(--navy);
}
.sv-h1 i{display:block;font-style:normal;}
.sv-h1 .red{color:var(--red);}
.sv-sub{
  left:3.8%;top:11.35%;width:42%;margin:0;
  font-family:var(--ui);font-weight:900;font-size:1.72cqw;line-height:1.22;
  letter-spacing:.01em;color:var(--navy);
}
.sv-lede{
  left:3.8%;top:13.85%;width:33%;margin:0;
  font-family:var(--ui);font-size:1.12cqw;line-height:1.5;color:#22406e;
}
.sv-badges{left:0;right:0;top:20.87%;margin:0;padding:0;list-style:none;}
.sv-badges li{
  position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap;
  font-family:var(--ui);font-weight:800;font-size:.92cqw;line-height:1.18;
  letter-spacing:.02em;color:var(--navy);
}
.sv-badges li:nth-child(1){left:7.10%;}
.sv-badges li:nth-child(2){left:19.01%;}
.sv-badges li:nth-child(3){left:31.43%;}
.sv-badges li:nth-child(4){left:43.09%;}

/* ---------- trust strip ----------------------------------- */
.sv-trust{left:0;right:0;top:27.20%;margin:0;padding:0;list-style:none;}
.sv-trust li{
  position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap;
  font-family:var(--ui);font-weight:800;font-size:.82cqw;line-height:1.26;
  letter-spacing:.02em;color:var(--navy);
}
.sv-trust li:nth-child(1){left:9.60%;}
.sv-trust li:nth-child(2){left:25.60%;}
.sv-trust li:nth-child(3){left:41.60%;}
.sv-trust li:nth-child(4){left:57.60%;}
.sv-trust li:nth-child(5){left:73.60%;}
.sv-trust li:nth-child(6){left:89.60%;}

/* ---------- a roof you can count on ----------------------- */
.sv-co-eyebrow{
  left:3.8%;top:31.55%;width:40%;margin:0;display:flex;align-items:center;gap:1cqw;
}
.sv-co-eyebrow i{display:block;width:2.6cqw;height:.22cqw;background:#fff;flex:0 0 auto;}
.sv-co-eyebrow span{
  font-family:var(--ui);font-weight:800;font-size:1.32cqw;letter-spacing:.02em;
  color:#fff;white-space:nowrap;
}
.sv-co-h{
  left:3.8%;top:33.05%;width:40%;margin:0;
  font-family:var(--ui);font-weight:900;font-size:2.85cqw;line-height:1.05;color:#fff;
}
.sv-co-p{
  left:3.8%;top:36.20%;width:34%;margin:0;
  font-family:var(--ui);font-size:1.08cqw;line-height:1.5;color:#cfdcf2;
}
.sv-co{left:0;right:0;top:0;bottom:0;margin:0;padding:0;list-style:none;}
.sv-co li{
  position:absolute;left:6.85%;width:40%;
  font-family:var(--ui);font-weight:800;font-size:1.06cqw;line-height:1.2;
  letter-spacing:.02em;color:#fff;white-space:nowrap;
}
.sv-co li:nth-child(1){top:40.72%;}
.sv-co li:nth-child(2){top:41.94%;}
.sv-co li:nth-child(3){top:43.15%;}
.sv-co li:nth-child(4){top:44.37%;}
.sv-co li:nth-child(5){top:45.58%;}
.sv-script{
  left:70%;top:32.40%;width:27%;margin:0;text-align:right;
  font-family:var(--script,"Priestacy",cursive);font-size:2.5cqw;line-height:1.2;color:#fff;
}

/* ---------- Owens Corning band ---------------------------- */
.sv-oc-h{
  left:19.5%;top:45.90%;width:34%;margin:0;
  font-family:var(--ui);font-weight:900;font-size:2.28cqw;line-height:1.12;color:var(--navy);
}
.sv-oc-p{
  left:19.5%;top:48.60%;width:30%;margin:0;
  font-family:var(--ui);font-weight:700;font-size:1.24cqw;line-height:1.3;color:#22406e;
}
.sv-oc-tag{
  left:3.5%;top:50.72%;width:44%;margin:0;
  font-family:var(--ui);font-weight:800;font-size:.96cqw;letter-spacing:.01em;color:var(--navy);
}
.sv-oc-name{
  left:3.6%;top:46.60%;width:12.6%;margin:0;text-align:center;
  font-family:var(--ui);font-weight:800;font-size:1.32cqw;line-height:1.08;color:#fff;
}

/* ---------- popular colours ------------------------------- */
.sv-col-eyebrow{
  left:3.8%;top:52.75%;width:44%;margin:0;display:flex;align-items:center;gap:1cqw;
}
.sv-col-eyebrow i{display:block;width:2.6cqw;height:.22cqw;background:var(--red);flex:0 0 auto;}
.sv-col-eyebrow span{
  font-family:var(--ui);font-weight:900;font-size:1.42cqw;letter-spacing:.02em;
  color:var(--navy);white-space:nowrap;
}
.sv-colours{left:0;right:0;top:0;bottom:0;margin:0;padding:0;list-style:none;}
.sv-colours li{
  position:absolute;top:57.60%;height:1.75%;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:.92cqw;letter-spacing:.02em;color:#fff;
}
.sv-colours li:nth-child(1){left:2.28%;width:15.59%;}
.sv-colours li:nth-child(2){left:18.76%;width:15.59%;}
.sv-colours li:nth-child(3){left:35.23%;width:15.72%;}
.sv-colours li:nth-child(4){left:51.71%;width:15.84%;}
.sv-col-note{
  left:3.5%;top:59.55%;width:48%;margin:0;
  font-family:var(--ui);font-size:.78cqw;line-height:1.3;color:#5b6b83;
}

/* ---------- process --------------------------------------- */
.sv-proc-eyebrow{
  left:3.8%;top:61.95%;width:46%;margin:0;display:flex;align-items:center;gap:1cqw;
}
.sv-proc-eyebrow i{display:block;width:2.6cqw;height:.22cqw;background:var(--red);flex:0 0 auto;}
.sv-proc-eyebrow span{
  font-family:var(--ui);font-weight:900;font-size:1.42cqw;letter-spacing:.02em;
  color:var(--navy);white-space:nowrap;
}
.sv-proc{left:0;right:0;top:68.60%;margin:0;padding:0;list-style:none;}
.sv-proc li{position:absolute;top:0;width:19%;transform:translateX(-50%);text-align:center;}
.sv-proc b{
  display:block;font-family:var(--ui);font-weight:800;font-size:.88cqw;line-height:1.14;
  letter-spacing:.02em;color:var(--navy);
}
.sv-proc span{
  display:block;margin-top:.18cqw;font-family:var(--ui);font-size:.78cqw;line-height:1.26;color:#3a4a63;
}
.sv-proc li:nth-child(1){left:11.00%;}
.sv-proc li:nth-child(2){left:30.20%;}
.sv-proc li:nth-child(3){left:49.40%;}
.sv-proc li:nth-child(4){left:69.10%;}
.sv-proc li:nth-child(5){left:88.70%;}

/* ---------- benefits navy band ---------------------------- */
.sv-ben-h{
  left:3.8%;top:71.85%;width:42%;margin:0;
  font-family:var(--ui);font-weight:900;font-size:2.42cqw;line-height:1.1;color:#fff;
}
.sv-ben-h .red{color:var(--red);display:block;}
.sv-ben{left:0;right:0;top:0;bottom:0;margin:0;padding:0;list-style:none;}
.sv-ben li{
  position:absolute;left:6.85%;width:42%;
  font-family:var(--ui);font-weight:700;font-size:1.06cqw;line-height:1.2;
  letter-spacing:.02em;color:#fff;white-space:nowrap;
}
.sv-ben li:nth-child(1){top:75.20%;}
.sv-ben li:nth-child(2){top:76.42%;}
.sv-ben li:nth-child(3){top:77.63%;}
.sv-ben li:nth-child(4){top:78.85%;}
.sv-ben li:nth-child(5){top:80.06%;}
.sv-ben li:nth-child(6){top:81.28%;}

/* ---------- benefit icon strip ---------------------------- */
.sv-bi{left:0;right:0;top:85.30%;margin:0;padding:0;list-style:none;}
.sv-bi li{
  position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap;
  font-family:var(--ui);font-weight:800;font-size:.86cqw;line-height:1.24;
  letter-spacing:.02em;color:var(--navy);
}
.sv-bi li:nth-child(1){left:8.30%;}
.sv-bi li:nth-child(2){left:21.17%;}
.sv-bi li:nth-child(3){left:33.14%;}
.sv-bi li:nth-child(4){left:44.87%;}
.sv-bi li:nth-child(5){left:56.65%;}
.sv-bi-script{
  left:72%;top:85.05%;width:26%;margin:0;text-align:center;
  font-family:var(--script,"Priestacy",cursive);font-size:2cqw;color:#fff;
}

/* ---------- closing CTA ----------------------------------- */
.sv-end-h{
  left:6.2%;top:92.35%;width:44%;margin:0;
  font-family:var(--ui);font-weight:900;font-size:2.05cqw;line-height:1.16;color:#fff;
}
.sv-end-h .red{color:var(--red);}
.sv-end-p{
  left:6.2%;top:95.05%;width:44%;margin:0;
  font-family:var(--ui);font-size:1.02cqw;line-height:1.4;color:#cfdcf2;
}
.sv-end-call{
  left:57.5%;top:92.30%;width:36%;height:3.35%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;color:#fff;
}
.sv-end-call b{font-family:var(--ui);font-weight:900;font-size:2.05cqw;line-height:1.1;}
.sv-end-call span{
  font-family:var(--ui);font-weight:800;font-size:.86cqw;letter-spacing:.04em;margin-top:.15cqw;
}

/* ---------- mobile ---------------------------------------- */
@media (max-width:900px){
  .svc .layer{position:static;padding:18px 16px 22px;background:#fff;}
  .svc .ov{position:static;width:auto !important;height:auto !important;transform:none;}
  .sv-corner{text-align:left;font-size:.72rem;margin:0 0 10px;}
  .sv-h1{font-size:2.6rem;margin:0 0 8px;}
  .sv-sub{font-size:1.1rem;margin:0 0 10px;}
  .sv-lede{font-size:.95rem;margin:0 0 14px;}
  .sv-badges,.sv-trust,.sv-co,.sv-ben,.sv-bi,.sv-colours{
    display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 16px;
  }
  .sv-badges li,.sv-trust li,.sv-co li,.sv-ben li,.sv-bi li,.sv-colours li{
    position:static;width:auto;height:auto;transform:none;white-space:normal;font-size:.85rem;
    justify-content:flex-start;
  }
  .sv-co li,.sv-ben li,.sv-colours li{color:var(--navy);}
  .sv-co-h,.sv-ben-h,.sv-end-h,.sv-oc-h{color:var(--navy);font-size:1.5rem;margin:14px 0 8px;}
  .sv-co-p,.sv-oc-p,.sv-end-p,.sv-col-note{color:#2c3a54;font-size:.92rem;margin:0 0 12px;}
  .sv-co-eyebrow span,.sv-oc-name{color:var(--navy);}
  .sv-proc{display:flex;flex-direction:column;gap:12px;margin:0 0 16px;}
  .sv-proc li{position:static;width:auto;transform:none;text-align:left;}
  .sv-script,.sv-bi-script{color:var(--navy);text-align:left;font-size:1.5rem;margin:10px 0;}
  .sv-end-call{color:var(--navy);align-items:flex-start;}
  .sv-end-call b{font-size:1.5rem;}
}

/* the plate paints the panel; the live form is sized to cover it exactly */
.sv-form{
  position:absolute;left:66.25%;top:4.45%;width:32.65%;min-height:19.35%;
  box-sizing:border-box;padding:1.5cqw 1.6cqw 1.3cqw;line-height:normal;
}
.sv-form .hf-title{margin:0;text-align:center;font-family:var(--ui);font-weight:900;font-size:1.95cqw;color:#fff;}
.sv-form .hf-title b{color:var(--red);}
.sv-form .hf-sub{margin:.25cqw 0 .95cqw;text-align:center;font-family:var(--ui);font-weight:800;font-size:1.02cqw;letter-spacing:.03em;color:#dbe7f9;}
.sv-form .fldwrap{position:relative;margin-bottom:.38cqw;}
.sv-form .fld-ic{display:grid;place-items:center;position:absolute;left:1.1cqw;top:50%;transform:translateY(-50%);width:2.1cqw;height:2.1cqw;pointer-events:none;}
.sv-form .fld-ic svg{width:1.95cqw;height:1.95cqw;fill:var(--navy);}
.sv-form input,.sv-form select{width:100%;box-sizing:border-box;height:4.55cqw;border:0;border-radius:.45cqw;padding:0 1cqw 0 4.2cqw;font-family:var(--ui);font-size:1.32cqw;color:#1d2b45;background:#fff;}
.sv-form button{width:100%;margin-top:.42cqw;height:5.0cqw;border:0;border-radius:.45cqw;cursor:pointer;background:var(--red);color:#fff;font-family:var(--ui);font-weight:900;font-size:1.72cqw;display:flex;align-items:center;justify-content:center;gap:.8cqw;}
.sv-form button svg{width:1.85cqw;height:1.85cqw;}
.sv-form .privacy{margin:.55cqw 0 0;display:flex;align-items:center;justify-content:center;gap:.45cqw;font-family:var(--ui);font-size:1.02cqw;color:#cfdcf2;}
.sv-form .privacy svg{width:1.15cqw;height:1.15cqw;fill:#cfdcf2;}
@media (max-width:900px){
  .sv-form{position:static;width:auto;min-height:0;margin:14px 0 18px;padding:16px 14px 14px;border-radius:10px;}
  .sv-form .hf-title{font-size:1.35rem;}
  .sv-form .hf-sub{font-size:.78rem;margin:4px 0 12px;}
  .sv-form .fldwrap{margin-bottom:9px;}
  .sv-form .fld-ic{left:11px;width:22px;height:22px;}
  .sv-form .fld-ic svg{width:19px;height:19px;}
  .sv-form input,.sv-form select{height:46px;font-size:1rem;padding:0 12px 0 41px;}
  .sv-form button{height:52px;font-size:1.05rem;}
  .sv-form .privacy{font-size:.82rem;}
}

/* ---------- metal plate --------------------------------------
   Every top below is measured off reference-full-page.png by
   diffing it against the textless splice, not inherited from
   the tile template.
   ------------------------------------------------------------ */
.metalsvc .sv-corner{top:2.85%;}
.metalsvc .sv-h1{top:5.55%;font-size:5.2cqw;}
.metalsvc .sv-sub{top:11.45%;font-size:1.58cqw;}
.metalsvc .sv-lede{top:14.45%;width:31%;font-size:1.04cqw;}
.metalsvc .sv-badges{top:22.85%;}
.metalsvc .sv-badges li:nth-child(1){left:7.35%;}
.metalsvc .sv-badges li:nth-child(2){left:19.20%;}
.metalsvc .sv-badges li:nth-child(3){left:31.50%;}
.metalsvc .sv-badges li:nth-child(4){left:44.23%;}
.metalsvc .sv-trust{top:25.97%;}
.metalsvc .sv-trust li:nth-child(1){left:9.38%;}
.metalsvc .sv-trust li:nth-child(2){left:25.67%;}
.metalsvc .sv-trust li:nth-child(3){left:42.33%;}
.metalsvc .sv-trust li:nth-child(4){left:57.48%;}
.metalsvc .sv-trust li:nth-child(5){left:73.45%;}
.metalsvc .sv-trust li:nth-child(6){left:89.61%;}
/* two-part heading, six checks */
.metalsvc .sv-co-h{top:30.49%;font-size:2.42cqw;}
.metalsvc .sv-co-h .lead{display:block;font-weight:800;font-size:.82em;}
.metalsvc .sv-co-p{top:35.62%;width:36%;}
.metalsvc .sv-co li:nth-child(1){top:39.45%;}
.metalsvc .sv-co li:nth-child(2){top:40.65%;}
.metalsvc .sv-co li:nth-child(3){top:41.86%;}
.metalsvc .sv-co li:nth-child(4){top:43.06%;}
.metalsvc .sv-co li:nth-child(5){top:44.27%;}
.metalsvc .sv-co li:nth-child(6){top:45.42%;}
/* no logo square in this band — copy sits right */
.metalsvc .sv-oc-h{left:63.5%;top:47.57%;width:34%;}
.metalsvc .sv-oc-p{left:63.5%;top:50.64%;width:32%;}
.metalsvc .sv-col-eyebrow{top:53.45%;}
.metalsvc .sv-colours li{top:57.76%;height:1.56%;}
.metalsvc .sv-colours li:nth-child(1){left:3.04%;width:12.29%;}
.metalsvc .sv-colours li:nth-child(2){left:16.10%;width:12.04%;}
.metalsvc .sv-colours li:nth-child(3){left:29.02%;width:12.04%;}
.metalsvc .sv-colours li:nth-child(4){left:41.83%;width:12.29%;}
.metalsvc .sv-colours li:nth-child(5){left:54.88%;width:12.29%;}
.metalsvc .sv-col-note{top:62.20%;}
.metalsvc .sv-proc-eyebrow{top:62.44%;}
.metalsvc .sv-proc{top:69.22%;}
.metalsvc .sv-proc li:nth-child(1){left:10.58%;}
.metalsvc .sv-proc li:nth-child(2){left:30.16%;}
.metalsvc .sv-proc li:nth-child(3){left:48.86%;}
.metalsvc .sv-proc li:nth-child(4){left:69.26%;}
.metalsvc .sv-proc li:nth-child(5){left:89.04%;}
.metalsvc .sv-ben-h{top:72.90%;}
.metalsvc .sv-ben li:nth-child(1){top:77.27%;}
.metalsvc .sv-ben li:nth-child(2){top:78.47%;}
.metalsvc .sv-ben li:nth-child(3){top:79.63%;}
.metalsvc .sv-ben li:nth-child(4){top:80.83%;}
.metalsvc .sv-ben li:nth-child(5){top:82.03%;}
.metalsvc .sv-ben li:nth-child(6){top:83.30%;}
.metalsvc .sv-bi{top:86.20%;}
.metalsvc .sv-bi li:nth-child(1){left:8.17%;}
.metalsvc .sv-bi li:nth-child(2){left:20.60%;}
.metalsvc .sv-bi li:nth-child(3){left:32.57%;}
.metalsvc .sv-bi li:nth-child(4){left:44.49%;}
.metalsvc .sv-bi li:nth-child(5){left:56.53%;}
.metalsvc .sv-bi-script{left:70%;top:84.75%;width:28%;font-size:1.8cqw;}
.metalsvc .sv-end-h{top:92.43%;}
.metalsvc .sv-end-p{top:95.39%;}
.metalsvc .sv-form{left:64.89%;width:35.11%;top:4.37%;min-height:19.64%;}

/* ============================================================
   Estimate form panel — navy fill, white double frame, red tab.
   This is opaque on purpose: every plate has a form panel with
   field bars painted into it, and the live form has to cover it
   or those bars show through underneath.
   ============================================================ */
.sv-form{
  background:#0d2450 !important;
  border:.26cqw solid #ffffff !important;
  border-radius:.85cqw !important;
  box-shadow:inset 0 0 0 .16cqw #0d2450, inset 0 0 0 .30cqw rgba(255,255,255,.92),
             0 .5cqw 1.6cqw rgba(3,14,34,.45) !important;
}
.sv-form::before{
  content:"";position:absolute;left:50%;top:-.26cqw;transform:translateX(-50%);
  width:16%;height:.5cqw;background:var(--red);border-radius:0 0 .18cqw .18cqw;
}
@media (max-width:900px){
  .sv-form{border-width:2px !important;border-radius:10px !important;box-shadow:0 6px 18px rgba(3,14,34,.3) !important;}
  .sv-form::before{display:none;}
}

.tilesvc .sv-form{left:66.16%;width:32.83%;top:4.37%;min-height:19.47%;}

/* ============================================================
   Metal Roofing hero - images/metal-hero.jpg, 1774x887 (2.0:1)
   The plate is the finished design: logo, phone button, headline,
   rule and sub-copy are painted. Only the nav was cleared from the
   artwork, so the live nav is laid back at the painted position and
   the overlay copy is hidden on desktop (kept for search engines).
   Painted positions (px on the 1774 plate):
     logo        x40-420   y30-190
     nav caps    y80-107   first word x549, last ends x1292
     underline   y117-118  under "Services"
     phone pill  x1479-1738 y55-117
   ============================================================ */
@media (min-width:1001px){
  .metalpage .ov{
    position:absolute !important;left:0 !important;top:0 !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;
  }
  /* the FAQ block is live type over its own plate, so it opts out */
  .metalpage .faq .ov{
    position:absolute !important;width:auto !important;height:auto !important;
    margin:0 !important;overflow:visible !important;clip:auto !important;clip-path:none !important;
  }
  .metalpage .faq .faq-eyebrow{left:16.3% !important;top:26.1% !important;width:20.5% !important;height:6.1% !important;}
  .metalpage .faq .faq-ribbon{left:3.6% !important;top:76.7% !important;width:44.2% !important;height:15.6% !important;}
  .metalpage .mainnav{left:30.95cqw;top:4.27cqw;}
  .metalpage .mainnav ul{gap:min(1.95cqw,28px);}
}

/* ---- metal roofing feature strip ----
   Thin band: icon beside the label, one row, matching Martin's comp. */
.metal-feats{
  display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:1.9cqw 2.4cqw;
  list-style:none;line-height:normal;
  background:linear-gradient(180deg,#f7fbff 0%,#eef5fc 55%,#f7fbff 100%);
}
.metal-feats li{
  display:flex;align-items:center;justify-content:center;gap:1cqw;
  padding:0 1cqw;border-left:1px solid #ccdcec;
}
.metal-feats li:first-child{border-left:0;}
.metal-feats .mf-ic{flex:0 0 auto;width:3.4cqw;height:3.4cqw;color:var(--navy);}
.metal-feats .mf-ic svg{width:100%;height:100%;fill:var(--navy);}
.metal-feats b{
  display:block;font-family:var(--display);font-weight:700;font-size:1.52cqw;
  line-height:1.14;letter-spacing:.005em;color:var(--navy);text-transform:uppercase;
}
@media (max-width:1000px){
  .metal-feats{grid-template-columns:repeat(2,1fr);gap:14px 0;padding:16px 14px;}
  .metal-feats li{border-left:0;justify-content:flex-start;gap:10px;padding:0 6px;}
  .metal-feats .mf-ic{width:26px;height:26px;}
  .metal-feats li:last-child{grid-column:1 / -1;}
  .metal-feats b{font-size:.86rem;}
}

/* ---- metal: a smart investment (copy left, photo collage right) ---- */
.metal-invest{position:relative;background:#fff;container-type:inline-size;}
.mi-pics{display:block;width:54.43%;height:auto;margin-left:auto;}
.mi-copy{position:absolute;left:4.17%;top:8.7%;width:41.5%;}
.mi-eyebrow{
  margin:0 0 1.5cqw;display:flex;align-items:center;gap:1.1cqw;
  font-family:var(--ui);font-weight:900;font-size:1.32cqw;letter-spacing:.16em;color:var(--red);
}
.mi-eyebrow::after{content:"";flex:0 0 9.5cqw;height:.2cqw;background:linear-gradient(90deg,var(--red) 0 52%,#12305e 52% 100%);}
.mi-h2{
  margin:0 0 1.7cqw;font-family:var(--display);font-weight:700;font-size:3.55cqw;
  line-height:1.05;letter-spacing:-.01em;color:var(--navy);text-transform:uppercase;
}
.mi-h2 span{display:block;color:var(--red);font-family:inherit;font-weight:inherit;letter-spacing:inherit;}
.mi-p{margin:0 0 2.1cqw;font-family:var(--ui);font-size:1.42cqw;line-height:1.48;color:#23303f;}
.mi-btn{
  display:inline-flex;align-items:center;gap:1.2cqw;padding:0 2.2cqw;height:3.9cqw;
  border-radius:.35cqw;background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--ui);font-weight:900;font-size:1.42cqw;letter-spacing:.02em;
}
.mi-btn svg{width:1.3cqw;height:1.3cqw;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.mi-btn:hover{background:var(--red-dark);}

/* ---- metal: why homeowners choose metal ---- */
.metal-why{
  position:relative;container-type:inline-size;padding:2.1cqw 3.3% 2.9cqw;text-align:center;
  background:linear-gradient(180deg,#eaf3fd 0%,#e4eefb 100%);
}
.metal-why::after{            /* the blue rule along the bottom edge */
  content:"";position:absolute;left:0;right:0;bottom:0;height:.28cqw;
  background:linear-gradient(90deg,#1f6fd0 0%,#5fa8ea 55%,#cfe4f8 100%);
}
.mw-eyebrow{
  margin:0 0 1.1cqw;display:inline-flex;align-items:center;gap:1.1cqw;
  font-family:var(--ui);font-weight:900;font-size:1.28cqw;letter-spacing:.14em;color:var(--red);
}
.mw-eyebrow::after{content:"";flex:0 0 6cqw;height:.2cqw;background:linear-gradient(90deg,var(--red) 0 52%,#12305e 52% 100%);}
.mw-h2{
  margin:0 0 2.5cqw;font-family:var(--display);font-weight:700;font-size:3.02cqw;
  line-height:1.05;letter-spacing:-.005em;color:var(--navy);text-transform:uppercase;
}
.mw-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:0;padding:0;list-style:none;}
.mw-ic{
  display:grid;place-items:center;width:7cqw;height:7cqw;margin:0 auto 1.25cqw;
  border-radius:50%;background:#123a75;box-sizing:border-box;color:#fff;
}
.mw-ic svg{width:50%;height:50%;fill:#fff;}
.mw-grid b{
  display:block;font-family:var(--display);font-weight:700;font-size:1.66cqw;line-height:1.14;
  color:#123a75;text-transform:uppercase;
}
@media (max-width:1000px){
  .metal-invest{display:block;}
  .mi-pics{width:100%;}
  .mi-copy{position:static;width:auto;padding:20px 16px 26px;}
  .mi-eyebrow{font-size:.78rem;}
  .mi-h2{font-size:1.75rem;}
  .mi-p{font-size:1rem;}
  .mi-btn{height:48px;font-size:.95rem;padding:0 20px;gap:10px;border-radius:6px;}
  .mi-btn svg{width:16px;height:16px;}
  .metal-why{padding:22px 16px 26px;}
  .mw-eyebrow{font-size:.74rem;}
  .mw-h2{font-size:1.5rem;margin-bottom:20px;}
  .mw-grid{grid-template-columns:repeat(2,1fr);gap:20px 0;}
  .mw-ic{width:62px;height:62px;border-width:3px;margin-bottom:9px;}
  .mw-grid b{font-size:.9rem;}
}

/* ---- metal: built for California (finished plate, 1774x887) ----
   Artwork is used as supplied. The only live element is a hit area over
   the painted GET A FREE ESTIMATE button at x954-1295, y613-676. */
.metal-impress{position:relative;display:block;background:#fff;line-height:0;}
.metal-impress > img.plate{display:block;width:100%;height:auto;}
.mim-cta{
  position:absolute;left:54.68%;top:68.29%;width:19.56%;height:8.04%;
  border-radius:.35cqw;
}
.mim-cta:hover{background:rgba(0,0,0,.08);}
.mim-cta:focus-visible{outline:3px solid #fff;outline-offset:-3px;}

/* ============================================================
   Metal Roofing body - two columns, built from Martin's comp.
   Left column runs the narrative, right column the reference
   sections. Every city mention is <span class="city">.
   ============================================================ */
.mbody{
  display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;align-items:start;
  padding:2.4cqw 2.2cqw 3cqw;background:#fff;container-type:inline-size;line-height:normal;
}
.mb-col{display:grid;gap:1.6cqw;align-content:start;}
.mb-card{background:#fff;}
.mb-eyebrow{
  margin:0 0 .55cqw;display:flex;align-items:center;gap:.9cqw;
  font-family:var(--ui);font-weight:900;font-size:1.06cqw;letter-spacing:.07em;color:var(--red);
}
.mb-eyebrow::after{content:"";flex:0 0 4.4cqw;height:.16cqw;background:linear-gradient(90deg,var(--red) 0 55%,#12305e 55% 100%);}
.mb-h1{
  margin:0 0 .9cqw;font-family:var(--display);font-weight:700;font-size:3.05cqw;line-height:1.03;
  color:var(--navy);text-transform:uppercase;letter-spacing:-.01em;
}
.mb-h1 span{display:block;color:var(--red);font-family:inherit;font-weight:inherit;}
.mb-h1 b{font-weight:inherit;}
.mb-h3{
  margin:0 0 .8cqw;display:block;font-family:var(--display);font-weight:700;font-size:1.82cqw;
  line-height:1.14;color:var(--navy);
}
.mb-h3::after{
  content:"";display:block;width:5.4cqw;height:.14cqw;margin-top:.5cqw;
  background:linear-gradient(90deg,var(--red) 0 55%,#12305e 55% 100%);
}
.mb-p{margin:0 0 1.1cqw;font-family:var(--ui);font-size:1.08cqw;line-height:1.5;color:#2b3846;}
.mb-p-sm{font-size:1.0cqw;line-height:1.48;}
.mb-intro img{display:block;width:100%;height:auto;}
.mb-strip{
  display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:1.2cqw .6cqw;
  list-style:none;background:var(--navy);text-align:center;
}
.mb-strip li{padding:0 .5cqw;border-left:1px solid rgba(255,255,255,.28);}
.mb-strip li:first-child{border-left:0;}
.mb-strip span{display:block;width:2.1cqw;height:2.1cqw;margin:0 auto .5cqw;color:#fff;}
.mb-strip svg{width:100%;height:100%;fill:#fff;}
.mb-strip b{display:block;font-family:var(--display);font-weight:700;font-size:.95cqw;line-height:1.15;color:#fff;text-transform:uppercase;}
.mb-ticks{display:grid;grid-template-columns:1fr 1fr;gap:.75cqw 1.2cqw;margin:0;padding:0;list-style:none;}
.mb-ticks li{
  position:relative;padding-left:2cqw;font-family:var(--ui);font-size:1.0cqw;line-height:1.3;color:#2b3846;
}
.mb-ticks li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1.4cqw;height:1.4cqw;border-radius:50%;background:var(--red);}
.mb-ticks li::after{content:"";position:absolute;left:.38cqw;top:50%;width:.62cqw;height:.3cqw;margin-top:-.08cqw;border-left:.13cqw solid #fff;border-bottom:.13cqw solid #fff;transform:translateY(-50%) rotate(-45deg);}
.mb-banner{
  position:relative;margin:0;line-height:0;min-height:11.5cqw;
  background:#123a6b url("images/mb-banner.jpg") center 22%/cover no-repeat;
}

.mb-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,26,58,0) 38%,rgba(8,26,58,.72) 100%);}
.mb-banner figcaption{z-index:2;}
.mb-banner figcaption{
  position:absolute;left:1.8cqw;bottom:1.6cqw;font-family:var(--display);font-weight:700;
  font-size:1.95cqw;line-height:1.12;color:#fff;text-transform:uppercase;text-shadow:0 .1cqw .3cqw rgba(0,20,50,.5);
}
.mb-split{display:grid;grid-template-columns:1fr 34%;gap:1.4cqw;align-items:start;}
.mb-split img{display:block;width:100%;height:auto;}
.mb-split-rev{grid-template-columns:38% 1fr;}
.mb-thumbs{display:grid;gap:.9cqw;margin:.6cqw 0 0;padding:0;list-style:none;align-items:start;}
.mb-thumbs-4{grid-template-columns:repeat(4,1fr);}
.mb-thumbs-3{grid-template-columns:repeat(3,1fr);}
.mb-thumbs li img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin-bottom:.6cqw;border-radius:.2cqw;}
.mb-thumbs b{display:block;font-family:var(--ui);font-weight:700;font-size:1.0cqw;line-height:1.2;color:var(--navy);margin-bottom:.25cqw;}
.mb-thumbs span{display:block;font-family:var(--ui);font-size:.9cqw;line-height:1.32;color:#4a5768;}
.mb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.9cqw;margin:1.1cqw 0 0;padding:0;list-style:none;text-align:center;}
.mb-steps span{display:grid;place-items:center;width:3.5cqw;height:3.5cqw;margin:0 auto .6cqw;border-radius:50%;background:var(--navy);}
.mb-steps svg{width:52%;height:52%;fill:#fff;}
.mb-steps b{display:block;font-family:var(--ui);font-weight:900;font-size:.92cqw;line-height:1.2;color:var(--navy);margin-bottom:.25cqw;}
.mb-steps i{display:block;font-style:normal;font-family:var(--ui);font-size:.86cqw;line-height:1.3;color:#4a5768;}
.mb-serving{
  position:relative;min-height:14.6cqw;line-height:0;
  background:#0d2a5c url("images/mb-serving.jpg") right center/auto 100% no-repeat;
}
.mb-serving::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0d2a5c 0%,rgba(13,42,92,.95) 52%,rgba(13,42,92,.35) 74%,rgba(13,42,92,0) 90%);
}
.mb-serving > div{position:relative;z-index:2;padding:2cqw 2cqw 2.2cqw;width:60%;line-height:normal;}
.mb-serving h3{margin:0 0 .7cqw;font-family:var(--display);font-weight:700;font-size:1.95cqw;line-height:1.1;color:#fff;text-transform:uppercase;}
.mb-serving p{margin:0;font-family:var(--ui);font-size:.95cqw;line-height:1.42;color:#fff;}
.mb-cta{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4cqw;
  padding:1.6cqw 1.8cqw;background:var(--navy);
}
.mb-cta-ic{display:grid;place-items:center;width:4.2cqw;height:4.2cqw;border-radius:50%;border:.18cqw solid #fff;}
.mb-cta-ic svg{width:52%;height:52%;fill:#fff;}
.mb-cta b{display:block;font-family:var(--display);font-weight:700;font-size:1.6cqw;line-height:1.15;color:#fff;text-transform:uppercase;}
.mb-cta i{display:block;font-style:normal;font-family:var(--ui);font-size:.98cqw;line-height:1.35;color:#dce6f3;margin-top:.25cqw;}
.mb-cta-btn{
  display:inline-flex;align-items:center;gap:.9cqw;height:3.1cqw;padding:0 1.6cqw;border-radius:.3cqw;
  background:var(--red);color:#fff;text-decoration:none;font-family:var(--ui);font-weight:900;font-size:1.05cqw;
}
.mb-cta-btn svg{width:1cqw;height:1cqw;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.mb-cta-btn:hover{background:var(--red-dark);}
@media (max-width:1000px){
  .mbody{grid-template-columns:1fr;gap:22px;padding:20px 16px 26px;}
  .mb-col{gap:22px;}
  .mb-eyebrow{font-size:.74rem;}
  .mb-h1{font-size:1.7rem;}
  .mb-h3{font-size:1.15rem;}
  .mb-h3::after{width:64px;height:2px;}
  .mb-p,.mb-p-sm{font-size:.95rem;line-height:1.55;}
  .mb-strip{grid-template-columns:repeat(2,1fr);gap:14px 0;padding:16px 10px;}
  .mb-strip li{border-left:0;}
  .mb-strip span{width:26px;height:26px;}
  .mb-strip b{font-size:.78rem;}
  .mb-ticks{grid-template-columns:1fr;gap:9px;}
  .mb-ticks li{font-size:.95rem;padding-left:26px;}
  .mb-ticks li::before{width:18px;height:18px;}
  .mb-ticks li::after{left:5px;width:8px;height:4px;border-width:0 0 2px 2px;}
  .mb-banner figcaption{font-size:1.1rem;left:14px;bottom:12px;}
  .mb-split,.mb-split-rev{grid-template-columns:1fr;gap:12px;}
  .mb-thumbs-4,.mb-thumbs-3{grid-template-columns:repeat(2,1fr);gap:14px;}
  .mb-thumbs b{font-size:.92rem;}
  .mb-thumbs span{font-size:.82rem;}
  .mb-steps{grid-template-columns:repeat(2,1fr);gap:16px;}
  .mb-steps span{width:48px;height:48px;}
  .mb-steps b{font-size:.82rem;}
  .mb-steps i{font-size:.78rem;}
  .mb-serving > div{position:static;width:auto;padding:16px;background:var(--navy);}
  .mb-serving h3{font-size:1.2rem;}
  .mb-serving p{font-size:.9rem;}
  .mb-cta{grid-template-columns:1fr;text-align:center;justify-items:center;gap:12px;padding:20px 16px;}
  .mb-cta-ic{width:52px;height:52px;border-width:2px;}
  .mb-cta b{font-size:1.15rem;}
  .mb-cta i{font-size:.9rem;}
  .mb-cta-btn{height:46px;font-size:.95rem;padding:0 18px;gap:9px;border-radius:6px;}
  .mb-cta-btn svg{width:15px;height:15px;}
}

/* ---- metal: about the city (live copy over the cleared plate) ----
   Plate 1774x887. Measured: eyebrow y48-66, headline y92-165,
   sub-line y175-191, body y224-641, all inside x970-1700.
   The four icons at the bottom right stay painted. */
.metal-about{position:relative;display:block;background:#fff;line-height:0;container-type:inline-size;}
.metal-about > img.plate{display:block;width:100%;height:auto;}
.ma-copy{position:absolute;left:53.9%;top:1.2%;width:41.6%;line-height:normal;}
.ma-eyebrow{
  margin:0 0 .9cqw;display:flex;align-items:center;gap:1cqw;
  font-family:var(--ui);font-weight:900;font-size:1.32cqw;letter-spacing:.06em;color:var(--red);
}
.ma-eyebrow::after{content:"";flex:0 0 8.5cqw;height:.18cqw;background:linear-gradient(90deg,var(--red) 0 52%,#12305e 52% 100%);}
.ma-h2{
  margin:0 0 .45cqw;font-family:var(--display);font-weight:700;font-size:4.1cqw;line-height:1.02;
  letter-spacing:-.012em;color:var(--navy);text-transform:uppercase;
}
.ma-h2 span{font-family:inherit;font-weight:inherit;letter-spacing:inherit;}
.ma-h2 > span:last-child{color:var(--red);}
.ma-sub{
  margin:0 0 1.1cqw;font-family:var(--display);font-weight:700;font-size:1.52cqw;
  line-height:1.2;color:var(--navy);text-transform:uppercase;
}
.ma-p{margin:0 0 .95cqw;font-family:var(--ui);font-size:1.1cqw;line-height:1.42;color:#23303f;}
.ma-p:last-child{margin-bottom:0;}
@media (max-width:1000px){
  .metal-about > img.plate{width:100%;}
  .ma-copy{position:static;width:auto;padding:18px 16px 24px;background:#fff;}
  .ma-eyebrow{font-size:.76rem;}
  .ma-h2{font-size:1.8rem;}
  .ma-sub{font-size:.95rem;}
  .ma-p{font-size:.95rem;line-height:1.55;}
}
/* the city name on the hillside: live text over the cleared plate.
   Painted box on the 1774x887 plate: x392-501, y114-133. */
.ma-hillside{
  position:absolute;left:21.08%;top:7.5%;width:9.93%;text-align:center;
  font-family:var(--ui);font-weight:700;font-size:1.82cqw;letter-spacing:.06em;line-height:1;
  color:#e8edf5;text-shadow:0 .06cqw .16cqw rgba(20,26,40,.5);white-space:nowrap;pointer-events:none;
}
/* street sign wording in the serving band.
   The photo is 408x660 and is drawn at 100% height against the right edge,
   so this plate box tracks it exactly: face at 11.76%/19.09%, 73.53% wide. */
.mb-serving{overflow:hidden;}
.mb-signplate{
  position:absolute;right:0;top:0;height:100%;aspect-ratio:408/660;
  container-type:inline-size;z-index:3;pointer-events:none;
}
.mb-signword{
  position:absolute;left:10.8%;top:17.9%;width:75%;height:20.6%;
  display:grid;place-items:center;transform:rotate(-4.2deg);
  font-family:var(--ui);font-weight:500;font-size:var(--signw,15.5cqw);line-height:.95;
  color:#fff;text-shadow:0 .35cqw .8cqw rgba(6,20,48,.4);text-align:center;
}
/* The box is the painted sign face. Long city names (Rancho Santa Margarita,
   La Crescenta-Montrose) are broken over two lines by _build/sign_fit.py, which
   also sets --signw, so the name stays readable instead of shrinking away. */
.mb-signword{font-size:min(var(--signw,15.5cqw), 15.5cqw);white-space:pre-line;}

/* ============================================================
   Metal roofing FAQ - ten cards in two columns, built live from
   Martin's comp. Header and footer bands use photo crops that carry
   no painted type, so every word here is editable HTML.
   ============================================================ */
.mfaq{background:#eef4fb;container-type:inline-size;line-height:normal;}
.mfaq-head{
  position:relative;min-height:13.2cqw;padding:2.4cqw 3cqw 2.6cqw;
  background:#dce9f7 url("images/mfq-head.jpg") right 34%/60% auto no-repeat;
}
.mfaq-head::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#eaf2fb 0%,rgba(234,242,251,.97) 33%,rgba(234,242,251,.45) 44%,rgba(234,242,251,0) 56%);
}
.mfaq-head > *{position:relative;z-index:2;}
.mfaq-eyebrow{
  display:inline-flex;align-items:center;gap:1cqw;margin:0 0 1cqw;padding:.5cqw 1.4cqw;
  background:linear-gradient(90deg,#c8102e 0%,#9c1020 100%);
  font-family:var(--ui);font-weight:900;font-size:1.12cqw;letter-spacing:.22em;color:#fff;
}
.mfaq-h2{
  margin:0 0 .7cqw;font-family:var(--display);font-weight:700;font-size:4cqw;line-height:1.02;
  letter-spacing:-.01em;color:var(--navy);text-transform:uppercase;
}
.mfaq-h2 span{display:block;font-size:.62em;color:var(--red);font-family:inherit;font-weight:inherit;}
.mfaq-sub{margin:0;font-family:var(--ui);font-weight:700;font-size:1.18cqw;letter-spacing:.2em;color:#42556e;text-transform:uppercase;}
.mfaq-script{position:absolute;right:13%;top:2.6cqw;margin:0;text-align:center;z-index:2;}
.mfaq-script b{display:block;font-family:"Priestacy","Kaushan Script",cursive;font-weight:400;font-size:var(--scriptfs,3.2cqw);line-height:1;color:#fff;text-shadow:0 .1cqw .3cqw rgba(10,30,60,.45);}
.mfaq-script i{display:block;margin-top:.45cqw;font-style:normal;font-family:var(--ui);font-weight:700;font-size:.98cqw;letter-spacing:.1em;line-height:1.45;color:#fff;text-shadow:0 .1cqw .3cqw rgba(10,30,60,.5);}
.mfaq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1cqw;margin:0;padding:1.6cqw 1.5cqw;list-style:none;counter-reset:none;}
.mfaq-grid li{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1cqw;align-items:start;
  padding:1.2cqw 0 1.2cqw 1.2cqw;border-radius:.5cqw;overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#f2f7fd 100%);box-shadow:0 .1cqw .35cqw rgba(16,38,70,.1);
}
.mfaq-n{
  display:grid;place-items:center;width:2.9cqw;height:2.9cqw;border-radius:.4cqw;background:var(--navy);
  font-family:var(--ui);font-weight:900;font-size:1.24cqw;color:#fff;
}
.mfaq-grid h3{margin:0 0 .45cqw;font-family:var(--display);font-weight:700;font-size:1.6cqw;line-height:1.14;color:var(--navy);}
.mfaq-grid p{margin:0;font-family:var(--ui);font-size:1.06cqw;line-height:1.4;color:#3b4a5c;}
.mfaq-grid img{display:block;width:15.4cqw;height:100%;object-fit:cover;align-self:stretch;border-radius:.35cqw;}
.mfaq-foot{
  display:flex;align-items:center;justify-content:center;gap:2.4cqw;padding:1.8cqw 2cqw;
  background:#0d2a5c url("images/mfq-foot.jpg") center/cover no-repeat;
  font-family:"Priestacy","Kaushan Script",cursive;font-size:3cqw;color:#fff;line-height:1;
  text-shadow:0 .1cqw .35cqw rgba(6,20,48,.55);
}
.mfaq-foot span{
  padding-left:2.4cqw;border-left:1px solid rgba(255,255,255,.5);
  font-family:var(--ui);font-weight:700;font-size:.42em;letter-spacing:.18em;line-height:1.5;
}
@media (max-width:1000px){
  .mfaq-head{padding:18px 16px 22px;background-size:cover;}
  .mfaq-head::before{background:linear-gradient(90deg,#eaf2fb 0%,rgba(234,242,251,.92) 60%,rgba(234,242,251,.6) 100%);}
  .mfaq-eyebrow{font-size:.7rem;padding:5px 12px;}
  .mfaq-h2{font-size:1.75rem;}
  .mfaq-sub{font-size:.78rem;}
  .mfaq-script{display:none;}
  .mfaq-grid{grid-template-columns:1fr;gap:12px;padding:16px;}
  .mfaq-grid li{grid-template-columns:auto 1fr;padding:14px;gap:12px;}
  .mfaq-n{width:34px;height:34px;font-size:.95rem;}
  .mfaq-grid h3{font-size:1.05rem;}
  .mfaq-grid p{font-size:.93rem;}
  .mfaq-grid img{display:none;}
  .mfaq-foot{flex-direction:column;gap:10px;font-size:1.8rem;padding:20px 16px;text-align:center;}
  .mfaq-foot span{border-left:0;padding-left:0;font-size:.75rem;}
}


/* ---- Metal page on mobile ----------------------------------------
   The page now carries the new blocks at every width, so the legacy
   hero overlay (headline, colour list, process list and the old
   estimate form) is kept for search engines but never drawn. The
   quote bar directly under the hero replaces that form. */
@media (max-width:1000px){
  .metalpage .ov{
    position:absolute !important;left:0 !important;top:0 !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;
  }
  /* the FAQ block is live type over its own plate, so it opts out */
  .metalpage .faq .ov{
    position:absolute !important;width:auto !important;height:auto !important;
    margin:0 !important;overflow:visible !important;clip:auto !important;clip-path:none !important;
  }
  .metalpage .faq .faq-eyebrow{left:16.3% !important;top:26.1% !important;width:20.5% !important;height:6.1% !important;}
  .metalpage .faq .faq-ribbon{left:3.6% !important;top:76.7% !important;width:44.2% !important;height:15.6% !important;}

  /* the plate carries the painted logo and phone button, so on mobile the
     artwork's own header is what shows: the live logo and call button are
     hidden and a tap target sits over the painted pill. */
  .metalpage .metalhero img.plate{display:block;width:100%;height:auto;}
  /* the painted lock-up is gone, so mobile shows the standard header */
  .metalpage .site-head{pointer-events:auto;}
  .metalpage .site-head .navtoggle,
  .metalpage .site-head .mainnav{pointer-events:auto;}
  .metalpage .metalhero{position:relative;}
  .metalpage .metalhero .plate-call{
    position:absolute;left:83.37%;top:6.2%;width:14.54%;height:7%;
    display:block;border-radius:1.6vw;z-index:5;
  }
  .metalpage .metalhero .plate-home{
    position:absolute;left:1.5%;top:1%;width:20%;height:10%;display:block;z-index:5;
  }
  .metalpage .metalhero .layer{position:static;}

}