/* ============================================================
   SILICONE & ACRYLIC ROOF COATING page (Silicone-Roof-Coating.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:
     coat-hero.jpg  y0-523      coat-cta.jpg      y1281-1487
     coat-card-*    y533-651    coat-type-*       y845-969
     coat-before/after          y1038-1279
   Header matches the rest of the site; a scrim keeps the white nav
   legible over the light top of the hero plate.
   ============================================================ */
.coatingpage{--k:.09766cqw;--rc-tint:#eef7fe;--rc-panel:#edf6fd;--rc-navy:#002150;}

@media (min-width:1001px){

  .rc-hero .layer::before{
    content:"";position:absolute;left:0;right:0;top:0;height:19%;pointer-events:none;
    background:linear-gradient(180deg,rgba(11,42,91,.5),rgba(11,42,91,.16) 62%,rgba(11,42,91,0));
  }
}

/* ---------- shared ------------------------------------------ */
.rc-eb{
  margin:0;display:flex;align-items:center;gap:calc(12*var(--k));
  font-family:var(--ui);font-weight:800;font-size:calc(13*var(--k));letter-spacing:.03em;line-height:1;color:var(--navy);
}
.rc-eb::before{content:"";flex:0 0 auto;width:calc(40*var(--k));height:calc(3*var(--k));background:var(--red);}
.rc-h2{
  margin:0;font-family:var(--ui);font-weight:800;color:var(--navy);
  font-size:calc(34*var(--k));line-height:1.12;letter-spacing:-.02em;
}
.rc-p{margin:0;font-family:var(--ui);font-size:calc(14.6*var(--k));line-height:1.34;color:var(--navy);}
.rc-btn{
  display:flex;align-items:center;justify-content:center;gap:calc(14*var(--k));text-decoration:none;
  background:linear-gradient(180deg,#e8171a,#c8102e);color:#fff;border-radius:calc(3*var(--k));
  font-family:var(--ui);font-weight:800;letter-spacing:.01em;
  box-shadow:0 calc(2*var(--k)) calc(7*var(--k)) rgba(120,0,10,.28);
}
.rc-btn:hover{background:var(--red-dark);}
.rc-btn svg{flex:0 0 auto;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- hero -------------------------------------------- */
.rc-hero{background:#fff;}
.rc-hero .layer{color:var(--navy);}
.rc-hero-eb{left:calc(33*var(--k));top:calc(104*var(--k));}
.rc-h1{left:calc(31*var(--k));top:calc(122*var(--k));margin:0;font-family:var(--ui);font-weight:900;}
.rc-h1 span{display:block;white-space:nowrap;letter-spacing:-.035em;transform-origin:left top;}
.rc-h1 .l1{font-size:calc(66*var(--k));line-height:1.02;color:var(--navy);transform:scaleX(.92);}
.rc-h1 .l2{font-size:calc(58*var(--k));line-height:1.08;color:var(--red);transform:scaleX(.94);}
.rc-hero-sub{
  left:calc(33*var(--k));top:calc(248*var(--k));margin:0;white-space:nowrap;
  font-family:var(--ui);font-weight:800;font-size:calc(30*var(--k));line-height:1;letter-spacing:-.025em;color:var(--navy);
}
.rc-hero-p{
  left:calc(34*var(--k));top:calc(288*var(--k));margin:0;white-space:nowrap;
  font-family:var(--ui);font-size:calc(15.4*var(--k));line-height:1.36;color:var(--navy);
}
.rc-hero-btn{
  left:calc(33*var(--k));top:calc(378*var(--k));width:calc(355*var(--k));height:calc(48*var(--k));
  font-size:calc(21*var(--k));
}
.rc-hero-btn svg{width:calc(20*var(--k));height:calc(20*var(--k));}
.rc-feats{left:calc(22*var(--k));top:calc(438*var(--k));margin:0;padding:0;list-style:none;display:flex;}
.rc-feats li{
  width:calc(112*var(--k));display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--k));
  border-left:1px solid rgba(11,42,91,.22);
}
.rc-feats li:first-child{border-left:0;}
.rc-feats svg{width:calc(36*var(--k));height:calc(36*var(--k));fill:var(--navy);color:var(--navy);}
.rc-feats b{font-family:var(--ui);font-weight:800;font-size:calc(12*var(--k));line-height:1.2;text-align:center;color:var(--navy);}

/* ---------- silicone & acrylic ------------------------------- */
.rc-two{
  background:#fff;display:grid;grid-template-columns:calc(339*var(--k)) 1fr;column-gap:calc(27*var(--k));
  padding:calc(18*var(--k)) calc(19*var(--k)) calc(16*var(--k)) calc(27*var(--k));
}
.rc-two-copy .rc-h2{margin-top:calc(14*var(--k));}
.rc-two-copy .rc-p{margin-top:calc(14*var(--k));}
.rc-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(15*var(--k));}
.rc-cards > li{background:#fff;border-radius:calc(3*var(--k));overflow:hidden;box-shadow:0 calc(1*var(--k)) calc(5*var(--k)) rgba(7,27,61,.14);}
.rc-cards > li > img{display:block;width:100%;height:auto;}
.rc-cards > li > b{
  display:block;background:var(--rc-navy);color:#fff;padding:calc(9*var(--k)) calc(14*var(--k));
  font-family:var(--ui);font-weight:800;font-size:calc(15*var(--k));letter-spacing:.01em;
}
.rc-cards ul{list-style:none;margin:0;padding:calc(10*var(--k)) calc(14*var(--k)) calc(12*var(--k));background:#f7fbff;}
.rc-cards ul li{
  position:relative;padding-left:calc(24*var(--k));margin-top:calc(7*var(--k));
  font-family:var(--ui);font-size:calc(12.8*var(--k));line-height:1.25;color:var(--navy);
}
.rc-cards ul li::before{
  content:"";position:absolute;left:0;top:calc(1*var(--k));width:calc(15*var(--k));height:calc(15*var(--k));border-radius:50%;
  background:#0537dd 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;
}

/* ---------- roof types --------------------------------------- */
.rc-types{background:var(--rc-tint);padding:calc(12*var(--k)) calc(21*var(--k)) calc(16*var(--k)) calc(24*var(--k));}
.rc-types > ul{list-style:none;margin:calc(14*var(--k)) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:calc(11*var(--k));}
.rc-types img{display:block;width:100%;height:auto;border-radius:calc(2*var(--k));}
.rc-types b{
  display:block;margin-top:calc(9*var(--k));text-align:center;
  font-family:var(--ui);font-weight:800;font-size:calc(12.6*var(--k));color:var(--navy);
}

/* ---------- results + why ------------------------------------ */
.rc-results{
  background:#fff;display:grid;grid-template-columns:calc(566*var(--k)) 1fr;column-gap:calc(16*var(--k));
  padding:calc(16*var(--k)) calc(18*var(--k)) calc(14*var(--k)) calc(26*var(--k));
}
.rc-ba > div{margin-top:calc(14*var(--k));display:grid;grid-template-columns:258fr 279fr;column-gap:calc(5*var(--k));}
.rc-ba figure{position:relative;margin:0;border-radius:calc(2*var(--k));overflow:hidden;}
.rc-ba img{display:block;width:100%;height:100%;object-fit:cover;}
.rc-ba figcaption{
  position:absolute;left:calc(8*var(--k));top:calc(8*var(--k));
  background:rgba(22,28,38,.78);color:#fff;border-radius:calc(2*var(--k));
  padding:calc(5*var(--k)) calc(12*var(--k));
  font-family:var(--ui);font-weight:800;font-size:calc(13*var(--k));letter-spacing:.02em;
}
.rc-why{background:var(--rc-panel);border-radius:calc(3*var(--k));padding:calc(14*var(--k)) calc(16*var(--k)) calc(16*var(--k)) calc(18*var(--k));}
.rc-why > ul{list-style:none;margin:calc(10*var(--k)) 0 0;padding:0;}
.rc-why > ul > li{display:grid;grid-template-columns:calc(42*var(--k)) 1fr;column-gap:calc(14*var(--k));align-items:center;min-height:calc(50*var(--k));}
.rc-why i{
  width:calc(42*var(--k));height:calc(42*var(--k));border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 calc(1*var(--k)) calc(4*var(--k)) rgba(11,42,91,.14);
}
.rc-why svg{width:calc(22*var(--k));height:calc(22*var(--k));fill:var(--navy);color:var(--navy);}
.rc-why b{display:block;font-family:var(--ui);font-weight:800;font-size:calc(13*var(--k));line-height:1.1;color:var(--navy);}
.rc-why span{display:block;margin-top:calc(3*var(--k));font-family:var(--ui);font-size:calc(12*var(--k));line-height:1.3;color:var(--navy);}

/* ---------- CTA band ----------------------------------------- */
.rc-cta .layer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,24,62,.82) 0%,rgba(0,24,62,.6) 40%,rgba(0,24,62,0) 66%);
}
.rc-cta .ov{z-index:1;margin:0;color:#fff;}
.rc-cta-eb{left:calc(33*var(--k));top:calc(17*var(--k));color:#fff;}
.rc-cta-h{
  left:calc(31*var(--k));top:calc(34*var(--k));font-family:var(--ui);font-weight:800;
  font-size:calc(31*var(--k));line-height:1.12;letter-spacing:-.02em;white-space:nowrap;
}
.rc-cta-p{left:calc(33*var(--k));top:calc(116*var(--k));font-family:var(--ui);font-size:calc(14.4*var(--k));line-height:1.35;white-space:nowrap;}
.rc-cta-p b{font-weight:800;}
.rc-cta-btn{
  left:calc(712*var(--k));top:calc(84*var(--k));width:calc(288*var(--k));height:calc(52*var(--k));
  font-size:calc(19*var(--k));
}
.rc-cta-btn svg{width:calc(19*var(--k));height:calc(19*var(--k));}

/* ---------- trust strip -------------------------------------- */
.rc-strip{
  list-style:none;margin:0;padding:calc(16*var(--k)) calc(20*var(--k));background:var(--rc-navy);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.rc-strip li{
  display:flex;align-items:center;justify-content:center;gap:calc(12*var(--k));
  border-left:1px solid rgba(255,255,255,.22);
}
.rc-strip li:first-child{border-left:0;}
.rc-strip svg{flex:0 0 auto;width:calc(26*var(--k));height:calc(26*var(--k));fill:#fff;}
.rc-strip b{font-family:var(--ui);font-weight:700;font-size:calc(13*var(--k));color:#fff;}

/* ============ MOBILE (<=1000px) ============================== */
@media (max-width:1000px){
  .coatingpage{--k:1px;}
  .coatingpage br.dk{display:none;}
  .rc-hero > img.plate{aspect-ratio:16/11;object-fit:cover;object-position:78% 50%;}
  .rc-hero .layer,.rc-cta .layer{position:static;padding:22px 18px 24px;}
  .rc-hero .ov,.rc-cta .ov{position:static;white-space:normal;}
  .rc-h1 span{transform:none;}
  .rc-h1{margin-top:10px;}
  .rc-h1 .l1{font-size:clamp(2.3rem,10.5vw,3.2rem);}
  .rc-h1 .l2{font-size:clamp(2rem,9vw,2.8rem);}
  .rc-hero-sub{margin-top:10px;font-size:1.35rem;}
  .rc-hero-p{margin-top:10px;font-size:1rem;line-height:1.5;}
  .rc-btn{width:100% !important;height:auto !important;padding:15px 12px;font-size:1.02rem !important;}
  .rc-btn svg{width:18px !important;height:18px !important;}
  .rc-hero-btn{margin-top:16px;}
  .rc-feats{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);}
  .rc-feats li{width:auto;}
  .rc-feats svg{width:30px;height:30px;}
  .rc-feats b{font-size:.62rem;}

  .rc-eb{font-size:.78rem;}
  .rc-h2{font-size:clamp(1.6rem,7vw,2.1rem);}
  .rc-p{font-size:1rem;line-height:1.5;}

  .rc-two{grid-template-columns:1fr;padding:28px 18px 22px;row-gap:20px;}
  .rc-cards{grid-template-columns:1fr;row-gap:14px;}
  .rc-cards > li > b{font-size:1rem;padding:10px 14px;}
  .rc-cards ul li{font-size:.95rem;padding-left:28px;margin-top:9px;}
  .rc-cards ul li::before{width:18px;height:18px;}

  .rc-types{padding:26px 16px 24px;}
  .rc-types > ul{grid-template-columns:repeat(2,1fr);gap:14px 10px;}
  .rc-types b{font-size:.8rem;}

  .rc-results{grid-template-columns:1fr;padding:26px 16px 24px;row-gap:22px;}
  .rc-ba > div{grid-template-columns:1fr 1fr;column-gap:8px;}
  .rc-ba figcaption{font-size:.78rem;padding:4px 10px;}
  .rc-why{padding:18px 16px;}
  .rc-why > ul > li{grid-template-columns:40px 1fr;column-gap:12px;min-height:0;padding:8px 0;}
  .rc-why i{width:40px;height:40px;}
  .rc-why svg{width:21px;height:21px;}
  .rc-why b{font-size:.95rem;}
  .rc-why span{font-size:.9rem;line-height:1.4;}

  .rc-cta{background:var(--rc-navy);}
  .rc-cta > img.plate{display:none;}
  .rc-cta .layer::before{display:none;}
  .rc-cta-h{margin-top:10px !important;font-size:clamp(1.6rem,7vw,2.1rem);}
  .rc-cta-p{margin-top:10px !important;font-size:1rem;}
  .rc-cta-btn{margin-top:16px !important;}

  .rc-strip{grid-template-columns:repeat(2,1fr);gap:16px 0;padding:20px 12px;}
  .rc-strip li{flex-direction:column;text-align:center;gap:8px;}
  .rc-strip li:nth-child(3){border-left:0;}
  .rc-strip svg{width:26px;height:26px;}
  .rc-strip b{font-size:.78rem;}
}

/* ============================================================
   COATING SYSTEMS, KEY BENEFITS AND PROCESS (second comp, 1024x1536)
   Same unit as the page above. Card photos and the five process
   photos are cut from the comp; all type is live.
   ============================================================ */
.rc-center{justify-content:center;text-align:center;}
.rc-detail{background:#fff;padding:calc(18*var(--k)) calc(22*var(--k)) calc(14*var(--k));}
.rc-h2-lg{margin-top:calc(12*var(--k));font-size:calc(38*var(--k));letter-spacing:-.025em;}
.rc-h2-lg span{color:var(--red);}
.rc-detail-sub{
  margin:calc(10*var(--k)) 0 0;text-align:center;
  font-family:var(--ui);font-weight:800;font-size:calc(18*var(--k));line-height:1;letter-spacing:-.015em;color:var(--navy);
}
.rc-detail-lede{
  margin:calc(12*var(--k)) auto 0;max-width:calc(810*var(--k));text-align:center;
  font-family:var(--ui);font-size:calc(13.4*var(--k));line-height:1.45;color:var(--navy);
}
.rc-systems{list-style:none;margin:calc(16*var(--k)) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(19*var(--k));}
.rc-systems > li{background:#fff;border-radius:calc(3*var(--k));overflow:hidden;box-shadow:0 calc(1*var(--k)) calc(5*var(--k)) rgba(7,27,61,.16);}
.rc-systems > li > img{display:block;width:100%;height:auto;}
.rc-sys-bar{
  margin:0;background:var(--rc-navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:calc(12*var(--k));
  padding:calc(9*var(--k)) calc(14*var(--k)) calc(10*var(--k)) calc(16*var(--k));
}
.rc-sys-bar b{font-family:var(--ui);font-weight:800;font-size:calc(22*var(--k));letter-spacing:-.01em;line-height:1.05;}
.rc-sys-bar i{font-style:normal;text-align:right;font-family:var(--ui);font-weight:700;font-size:calc(11.4*var(--k));line-height:1.25;}
.rc-sys-p{
  margin:calc(13*var(--k)) calc(14*var(--k)) 0;
  font-family:var(--ui);font-size:calc(13.4*var(--k));line-height:1.4;color:var(--navy);
}
.rc-sys-list{
  list-style:none;margin:calc(14*var(--k)) calc(12*var(--k)) calc(14*var(--k));
  padding:calc(12*var(--k)) calc(14*var(--k));background:var(--rc-panel);border-radius:calc(3*var(--k));
}
.rc-sys-list li{
  position:relative;padding-left:calc(40*var(--k));min-height:calc(24*var(--k));display:flex;align-items:center;
  margin-top:calc(8*var(--k));font-family:var(--ui);font-size:calc(13.4*var(--k));line-height:1.25;color:var(--navy);
}
.rc-sys-list li:first-child{margin-top:0;}
.rc-sys-list li::before{
  content:"";position:absolute;left:0;top:50%;width:calc(24*var(--k));height:calc(24*var(--k));margin-top:calc(-12*var(--k));
  border-radius:50%;background:var(--rc-navy) 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' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* ---------- key benefits ------------------------------------- */
.rc-benefits{
  background:#fff;display:grid;grid-template-columns:calc(380*var(--k)) 1fr;column-gap:calc(26*var(--k));
  padding:calc(14*var(--k)) calc(22*var(--k)) calc(10*var(--k)) calc(33*var(--k));align-items:center;
}
.rc-benefits .rc-h2{margin-top:calc(13*var(--k));font-size:calc(28*var(--k));line-height:1.14;}
.rc-benefits .rc-p{margin-top:calc(12*var(--k));font-size:calc(13.4*var(--k));}
.rc-benefits .rc-p b{font-weight:700;}
.rc-benefits > ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);}
.rc-benefits > ul li{
  display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--k));padding:calc(6*var(--k)) calc(6*var(--k));
  border-left:1px solid rgba(11,42,91,.2);
}
.rc-benefits > ul li:first-child{border-left:0;}
.rc-benefits > ul svg{width:calc(36*var(--k));height:calc(36*var(--k));fill:var(--navy);color:var(--navy);}
.rc-benefits > ul b{font-family:var(--ui);font-weight:800;font-size:calc(12.4*var(--k));line-height:1.2;text-align:center;color:var(--navy);}

/* ---------- the roof coating process -------------------------- */
.rc-process{background:#fff;padding:calc(10*var(--k)) calc(22*var(--k)) calc(26*var(--k)) calc(26*var(--k));}
.rc-process > ol{list-style:none;margin:calc(14*var(--k)) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);column-gap:calc(36*var(--k));}
.rc-process > ol li{position:relative;}
.rc-process > ol li + li::before{
  content:"";position:absolute;left:calc(-24*var(--k));top:calc(38*var(--k));width:calc(12*var(--k));height:calc(12*var(--k));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h17M13 5l7 7-7 7' fill='none' stroke='%230B2A5B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rc-process img{display:block;width:100%;height:auto;border-radius:calc(2*var(--k));}
.rc-process b{display:block;margin-top:calc(14*var(--k));font-family:var(--ui);font-weight:800;font-size:calc(13.4*var(--k));color:var(--navy);}
.rc-process span{display:block;margin-top:calc(5*var(--k));font-family:var(--ui);font-size:calc(12.4*var(--k));line-height:1.35;color:var(--navy);}

@media (max-width:1000px){
  .rc-detail{padding:28px 16px 18px;}
  .rc-h2-lg{font-size:clamp(1.7rem,7.6vw,2.3rem);margin-top:10px;}
  .rc-detail-sub{margin-top:10px;font-size:1.1rem;}
  .rc-detail-lede{margin-top:12px;font-size:1rem;line-height:1.55;}
  .rc-systems{grid-template-columns:1fr;row-gap:18px;margin-top:20px;}
  .rc-sys-bar{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;}
  .rc-sys-bar b{font-size:1.15rem;}
  .rc-sys-bar i{text-align:left;font-size:.85rem;}
  .rc-sys-p{margin:12px 14px 0;font-size:.98rem;line-height:1.5;}
  .rc-sys-list{margin:14px 12px;padding:12px 14px;}
  .rc-sys-list li{font-size:.95rem;padding-left:34px;min-height:24px;margin-top:10px;}
  .rc-sys-list li::before{width:22px;height:22px;margin-top:-11px;}

  .rc-benefits{grid-template-columns:1fr;padding:18px 16px 10px;row-gap:18px;}
  .rc-benefits .rc-h2{font-size:clamp(1.5rem,6.6vw,2rem);margin-top:10px;}
  .rc-benefits .rc-p{margin-top:10px;font-size:1rem;line-height:1.5;}
  .rc-benefits > ul{grid-template-columns:repeat(3,1fr);gap:16px 0;}
  .rc-benefits > ul li:nth-child(4){border-left:0;}
  .rc-benefits > ul svg{width:32px;height:32px;}
  .rc-benefits > ul b{font-size:.72rem;}

  .rc-process{padding:18px 16px 26px;}
  .rc-process > ol{grid-template-columns:repeat(2,1fr);gap:20px 12px;}
  .rc-process > ol li:last-child{grid-column:1 / -1;}
  .rc-process > ol li + li::before{display:none;}
  .rc-process b{margin-top:10px;font-size:.9rem;}
  .rc-process span{margin-top:4px;font-size:.85rem;}
}