/* ============================================================
   TPO ROOFING page (TPO-Roofing.html)
   Built from the 1024x1536 comp: 1 comp px = var(--k) = 0.09766cqw.
   Plates cut from the comp with the copy cleared and set live:
     tpo-hero.jpg  y0-476     tpo-rolls.jpg   x452-1024 y640-907
     tpo-card-*    y913-1082  tpo-layers.png  x8-566 y1168-1385
     tpo-band.jpg  y1386-1536 (keeps the painted warranty badge)
   ============================================================ */
.tpopage{--k:.09766cqw;--tp-tint:#eef4fb;--tp-navy:#0a2a5e;}

@media (min-width:1001px){

}

/* ---------- shared ------------------------------------------ */
.tp-h2{margin:0;font-family:var(--ui);font-weight:900;color:var(--navy);letter-spacing:-.025em;}
.tp-h2 span{display:block;line-height:1.04;}
.tp-h2 em{font-style:normal;color:var(--navy);}
.tp-h2 .red,.tp-h2 span em + *{color:var(--red);}
.tp-p{margin:calc(14*var(--k)) 0 0;font-family:var(--ui);font-size:calc(14*var(--k));line-height:1.42;color:var(--navy);}

/* ---------- hero -------------------------------------------- */
.tp-hero{background:#fff;}
.tp-hero .layer{color:var(--navy);}
.tp-hero .ov{margin:0;}
.tp-h1{position:static;font-family:var(--ui);font-weight:900;}
.tp-h1 span{
  position:absolute;left:calc(55*var(--k));display:block;white-space:nowrap;
  line-height:1;letter-spacing:-.04em;
}
.tp-h1 .l1{top:calc(144*var(--k));font-size:calc(104*var(--k));color:var(--navy);}
.tp-h1 .l2{top:calc(226*var(--k));font-size:calc(104*var(--k));color:var(--red);}
.tp-kicker{
  left:calc(58*var(--k));top:calc(316*var(--k));white-space:nowrap;
  font-family:var(--ui);font-weight:800;font-size:calc(17.4*var(--k));line-height:1;
  letter-spacing:.285em;color:var(--navy);
}
.tp-pills{left:calc(56*var(--k));top:calc(350*var(--k));padding:0;list-style:none;display:flex;align-items:center;}
.tp-pills li{
  position:relative;display:flex;align-items:center;padding:0 calc(16*var(--k)) 0 calc(24*var(--k));
  font-family:var(--ui);font-weight:800;font-size:calc(12.6*var(--k));line-height:1;color:var(--navy);white-space:nowrap;
}
.tp-pills li + li{border-left:1px solid rgba(11,42,91,.3);}
.tp-pills li::before{
  content:"";position:absolute;left:calc(2*var(--k));top:50%;width:calc(16*var(--k));height:calc(16*var(--k));
  margin-top:calc(-8*var(--k));border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-7.6' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;
}
.tp-hero-p{
  left:calc(58*var(--k));top:calc(386*var(--k));white-space:nowrap;
  font-family:var(--ui);font-size:calc(14.6*var(--k));line-height:1.42;color:var(--navy);
}

/* ---------- benefits ----------------------------------------- */
.tp-benefits{
  list-style:none;margin:0;padding:calc(20*var(--k)) calc(20*var(--k)) calc(22*var(--k));
  background:linear-gradient(180deg,#f4f8fd,var(--tp-tint));
  display:grid;grid-template-columns:repeat(4,1fr);
}
.tp-benefits li{
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 calc(14*var(--k));
  border-left:1px solid rgba(11,42,91,.18);
}
.tp-benefits li:first-child{border-left:0;}
.tp-benefits i{
  width:calc(46*var(--k));height:calc(46*var(--k));border-radius:50%;border:calc(2.4*var(--k)) solid var(--navy);
  display:grid;place-items:center;
}
.tp-benefits svg{width:calc(24*var(--k));height:calc(24*var(--k));fill:var(--navy);}
.tp-benefits b{margin-top:calc(13*var(--k));font-family:var(--ui);font-weight:800;font-size:calc(15*var(--k));line-height:1.15;color:var(--navy);}
.tp-benefits span{margin-top:calc(9*var(--k));font-family:var(--ui);font-size:calc(12.6*var(--k));line-height:1.3;color:var(--navy);}

/* ---------- what is TPO -------------------------------------- */
.tp-what{
  background:#fff;display:grid;grid-template-columns:calc(452*var(--k)) 1fr;align-items:start;
  padding:calc(26*var(--k)) 0 calc(14*var(--k)) calc(50*var(--k));
}
.tp-what .tp-h2 .l1{font-size:calc(34*var(--k));}
.tp-what .tp-h2 span:first-child{font-size:calc(34*var(--k));}
.tp-what .tp-h2 span:last-child{font-size:calc(38*var(--k));color:var(--red);}
.tp-what .tp-h2 em{color:var(--navy);}
.tp-what img{display:block;width:100%;height:auto;}
.tp-what > div{padding-right:calc(20*var(--k));}

/* ---------- detail cards ------------------------------------- */
.tp-cards{
  list-style:none;margin:0;padding:calc(6*var(--k)) calc(24*var(--k)) calc(18*var(--k));background:#fff;
  display:grid;grid-template-columns:repeat(4,1fr);column-gap:calc(15*var(--k));
}
.tp-cards img{display:block;width:100%;height:auto;border-radius:calc(2*var(--k)) calc(2*var(--k)) 0 0;}
.tp-cards b{
  display:block;background:var(--tp-navy);color:#fff;text-align:center;
  padding:calc(7*var(--k)) calc(6*var(--k));
  font-family:var(--ui);font-weight:800;font-size:calc(13.4*var(--k));letter-spacing:.01em;
}
.tp-cards span{
  display:block;margin-top:calc(9*var(--k));text-align:center;
  font-family:var(--ui);font-size:calc(12.6*var(--k));line-height:1.3;color:var(--navy);
}

/* ---------- system ------------------------------------------- */
.tp-system{
  background:#fff;display:grid;grid-template-columns:calc(566*var(--k)) 1fr;align-items:center;
  padding:calc(14*var(--k)) calc(24*var(--k)) calc(16*var(--k)) calc(8*var(--k));column-gap:calc(24*var(--k));
}
.tp-system img{display:block;width:100%;height:auto;}
.tp-system .tp-h2 span{font-size:calc(30*var(--k));}
.tp-system .tp-h2 .red{color:var(--red);}

/* ---------- warranty band ------------------------------------ */
.tp-band .layer{color:#fff;}
.tp-band .ov{margin:0;}
.tp-band-h{
  left:calc(336*var(--k));top:calc(22*var(--k));white-space:nowrap;
  font-family:var(--ui);font-weight:900;font-size:calc(26*var(--k));line-height:1;letter-spacing:-.02em;color:#fff;
}
.tp-band-h em{font-style:normal;color:var(--red);}
.tp-band-p{
  left:calc(336*var(--k));top:calc(58*var(--k));white-space:nowrap;
  font-family:var(--ui);font-size:calc(13*var(--k));line-height:1.45;color:#fff;
}

/* ============ MOBILE (<=1000px) ============================== */
@media (max-width:1000px){
  .tpopage{--k:1px;}
  .tpopage br.dk{display:none;}
  .tp-hero > img.plate{aspect-ratio:16/11;object-fit:cover;object-position:78% 50%;}
  .tp-hero .layer,.tp-band .layer{position:static;padding:22px 18px 24px;}
  .tp-hero .ov,.tp-band .ov{position:static;white-space:normal;}
  .tp-h1 span{position:static;}
  .tp-h1 .l1,.tp-h1 .l2{font-size:clamp(2.6rem,13vw,4rem);}
  .tp-kicker{margin-top:6px;font-size:.82rem;letter-spacing:.2em;}
  .tp-pills{margin-top:12px;flex-wrap:wrap;gap:8px 0;}
  .tp-pills li{font-size:.72rem;padding:0 10px 0 22px;}
  .tp-pills li::before{width:15px;height:15px;margin-top:-7.5px;}
  .tp-hero-p{margin-top:12px;font-size:1rem;line-height:1.5;}

  .tp-benefits{grid-template-columns:repeat(2,1fr);gap:20px 0;padding:24px 14px;}
  .tp-benefits li:nth-child(3){border-left:0;}
  .tp-benefits i{width:46px;height:46px;border-width:2px;}
  .tp-benefits svg{width:24px;height:24px;}
  .tp-benefits b{margin-top:10px;font-size:.88rem;}
  .tp-benefits span{margin-top:6px;font-size:.82rem;}

  .tp-what{grid-template-columns:1fr;padding:26px 16px 0;row-gap:18px;}
  .tp-what > div{padding-right:0;}
  .tp-what .tp-h2 span:first-child,.tp-what .tp-h2 span:last-child{font-size:clamp(1.7rem,8vw,2.4rem);}
  .tp-p{font-size:1rem;line-height:1.55;}

  .tp-cards{grid-template-columns:repeat(2,1fr);gap:18px 12px;padding:22px 16px;}
  .tp-cards b{font-size:.85rem;padding:8px 6px;}
  .tp-cards span{font-size:.82rem;}

  .tp-system{grid-template-columns:1fr;padding:10px 16px 24px;row-gap:18px;}
  .tp-system .tp-h2 span{font-size:clamp(1.6rem,7.4vw,2.2rem);}

  .tp-band{background:var(--tp-navy);}
  .tp-band > img.plate{aspect-ratio:16/6;object-fit:cover;object-position:8% 50%;}
  .tp-band-h{font-size:clamp(1.4rem,6.4vw,1.9rem);}
  .tp-band-p{margin-top:10px !important;font-size:.95rem;}
}