/* it-t10-roofer.css: the roofer page, drawn to the owner's mockup (tools/roofer-pack/roofer-final-claude-handoff).
   Built by tools/trades10/roofer.py. From 900px up every size is the mockup's own, in mockup pixels
   (--u = 1/773 of the page width), so the page keeps the mockup's proportions at every desktop width.
   Below 900px it stacks. Only the two photographs are pictures; the documents, logo, icons and rules are drawn. */
main.t-roofer{--serif:Tinos,"Times New Roman",Georgia,serif;--ink:#0B1419;--navy:#162A36;--muted:#5A666D;--line:#DDE3E6;
  --u:1px;--hs:1;--s:1px;container-type:inline-size}
.t-roofer .ro-f{position:relative;margin:0 auto;padding-inline:20px}
.t-roofer .ro-h2{font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:-.02em;font-size:31px;line-height:1.08}
.t-roofer .ro-p{font-size:16px;line-height:1.55;color:#4A565E}
.t-roofer .ro-eb{font:700 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#E8600E}
.t-roofer .ro-c{text-align:center}
.t-roofer .ro-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#C04E06;color:#fff;font:700 15px/1 var(--sans);height:50px;padding:0 24px;border-radius:2px}
.t-roofer .ro-btn:hover{background:#A94404}
.t-roofer .ro-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the roofing company mark, drawn */
.t-roofer .ro-mark{display:block;width:42px;height:18px;fill:#16263A;stroke:#16263A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.t-roofer .ro-mark path{fill:none}
.t-roofer .ro-brand{display:block}
.t-roofer .ro-brand b{display:block;font:700 15px/1.1 var(--sans);letter-spacing:-.01em;color:#16263A;margin-top:6px}
.t-roofer .ro-brand i{display:block;font:400 7px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#93A2AB;margin-top:4px}

/* documents (hero sheet, payment invoice, the three templates) */
.t-roofer .ro-doc-in{display:block}
.t-roofer .ro-doc-top{display:flex;justify-content:space-between;align-items:flex-start}
.t-roofer .ro-inv{font:700 16px/1 var(--sans);letter-spacing:.01em;color:#16263A}
.t-roofer .ro-topright{text-align:right}
.t-roofer .ro-meta{display:grid;grid-template-columns:auto auto;justify-content:end;gap:4px 14px;margin-top:10px;font-size:10px;color:#5F6B73}
.t-roofer .ro-meta span:nth-child(2n){color:#16263A;text-align:right}
.t-roofer .ro-job{font:700 14px/1.2 var(--sans);color:#16263A;margin-top:14px!important}
.t-roofer .ro-addr{font-size:10.5px;line-height:1.5;color:#68747B;margin-top:4px!important}
.t-roofer .ro-billto{font-size:10.5px;line-height:1.5;color:#68747B;margin-top:14px!important}
.t-roofer .ro-billto b{display:block;font-weight:400;color:#93A0A7}
.t-roofer .ro-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:10px;color:#3F4A51}
.t-roofer .ro-table th{background:#E7EAEE;font:700 10px/1 var(--sans);color:#16263A;text-align:right;padding:6px 8px}
.t-roofer .ro-table th:first-child{text-align:left}
.t-roofer .ro-table td{padding:7px 8px;text-align:right;border-bottom:1px solid #EDF0F2}
.t-roofer .ro-table td:first-child{text-align:left}
.t-roofer .ro-table th:nth-child(2),.t-roofer .ro-table td:nth-child(2){text-align:center}
.t-roofer .ro-tot{display:flex;justify-content:flex-end;align-items:baseline;gap:22px;margin-top:12px!important}
.t-roofer .ro-tot span{font:700 13px/1 var(--sans);color:#16263A}
.t-roofer .ro-tot b{font:700 16px/1 var(--sans);color:#16263A}

/* hero */
.t-roofer .ro-hero{position:relative;background:#16263A}
.t-roofer .ro-hero-img,.t-roofer .ro-hero-img img{display:block;width:100%;height:auto}
.t-roofer .ro-scale{position:absolute;left:0;top:0;transform:translateX(calc(-334px * var(--hs))) scale(var(--hs));transform-origin:0 0}
@media (max-width:899px){main.t-roofer{--hs:calc(100cqw / 439px)}}
.t-roofer .ro-hdoc{position:absolute;left:0;top:0;width:232px;height:272px;background:#FBFBFC;border-radius:2px;transform-origin:0 0;
  transform:matrix3d(.861435,-.048469,0,-.000167,-.229581,.886355,0,-.000272,0,0,1,0,521.7,99,0,1);
  box-shadow:0 18px 40px -14px rgba(8,18,26,.5)}
.t-roofer .ro-hdoc .ro-doc-in{padding:17.25px 14.95px}
.t-roofer .ro-hdoc .ro-mark{width:37.95px;height:15.52px;stroke-width:2.9}
.t-roofer .ro-hdoc .ro-brand b{font-size:8.05px;margin-top:4.02px}
.t-roofer .ro-hdoc .ro-brand i{font-size:3.79px;margin-top:2.88px}
.t-roofer .ro-hdoc .ro-inv{font-size:8.74px}
.t-roofer .ro-hdoc .ro-meta{font-size:5.4px;gap:2.99px 9.2px;margin-top:5.75px}
.t-roofer .ro-hdoc .ro-job{font-size:7.93px;margin-top:12.65px!important}
.t-roofer .ro-hdoc .ro-addr{font-size:5.63px;margin-top:3.45px!important}
.t-roofer .ro-hdoc .ro-table{font-size:5.4px;margin-top:12.65px}
.t-roofer .ro-hdoc .ro-table th{font-size:5.4px;padding:4.02px 5.75px}
.t-roofer .ro-hdoc .ro-table td{padding:4.94px 5.75px}
.t-roofer .ro-hdoc .ro-tot{margin-top:9.2px!important;gap:12.65px}
.t-roofer .ro-hdoc .ro-tot span{font-size:7.36px}
.t-roofer .ro-hdoc .ro-tot b{font-size:9.89px}
/* the photo fills the whole band and the copy sits on it: the design's cream area is a wide, soft
   wash of its own tone that melts into the picture, not a panel with an edge */
.t-roofer .ro-panel{padding:26px 20px 30px;background:linear-gradient(180deg,rgba(251,249,245,.99),rgba(251,249,245,1))}
@media (max-width:899px){
  .t-roofer .ro-hero .ro-f{position:relative;margin-top:calc(-15vw - 10px);z-index:2}
  .t-roofer .ro-panel{padding-top:calc(15vw + 20px);background:linear-gradient(180deg,rgba(251,249,245,0) 0,rgba(251,249,245,.8) 20%,rgba(251,249,245,.97) 40%,#FBF9F5 60%)}
}
.t-roofer .ro-seo{display:block;font:500 13.5px/1.3 var(--sans);color:#6B7378;margin-bottom:6px}
.t-roofer .ro-big{display:block;font:700 30px/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.t-roofer .ro-lede{font-size:16px;line-height:1.5;color:#4C585F;margin-top:14px!important}
.t-roofer .ro-panel .ro-btn{margin-top:20px}
.t-roofer .ro-fine{font-size:13.5px;line-height:1.4;color:#6B7378;margin-top:14px!important}

/* the four steps */
.t-roofer .ro-flow{background:#fff;padding:46px 0}
.t-roofer .ro-flow .ro-h2{margin-top:10px!important}
.t-roofer .ro-steps{position:relative;display:grid;gap:26px;margin-top:28px!important;text-align:center}
.t-roofer .ro-steps a{display:block}
.t-roofer .ro-num{display:grid;place-items:center;width:38px;height:38px;margin:0 auto;border:1.6px solid #F26207;border-radius:50%;
  font:400 19px/1 var(--serif);color:#16263A;background:#fff;position:relative;z-index:1}
.t-roofer .ro-steps h3{font:700 19px/1.2 var(--serif);color:var(--ink);margin-top:12px!important}
.t-roofer .ro-steps p{font-size:15px;line-height:1.45;color:#57636A;margin-top:5px!important}
.t-roofer .ro-steps a:hover h3{color:#C04E06}

/* templates */
.t-roofer .ro-tpl{background:#F0F4F6;padding:46px 0 36px}
.t-roofer .ro-tpl .ro-h2{margin-top:10px!important}
.t-roofer .ro-tpl .ro-p{margin-top:14px!important}
.t-roofer .ro-sheets{position:relative;--su:calc((100cqw - 40px) * .74 / 160);--s:var(--su);height:calc(268 * var(--s));margin-top:34px}
.t-roofer .ro-sheet-l,.t-roofer .ro-sheet-r{--s:calc(var(--su) * .875)}
.t-roofer .ro-sheet{position:absolute;display:block;background:#FCFCFD;color:var(--ink);border-radius:calc(2 * var(--s));overflow:visible;
  box-shadow:0 calc(9 * var(--s)) calc(20 * var(--s)) calc(-7 * var(--s)) rgba(11,20,25,.3),0 0 0 1px rgba(11,20,25,.04)}
.t-roofer .ro-sheet .ro-doc-in{padding:calc(14 * var(--s)) calc(15 * var(--s))}
.t-roofer .ro-sheet .ro-mark{width:calc(38 * var(--s));height:calc(15 * var(--s));stroke-width:calc(3.2 * var(--s))}
.t-roofer .ro-st{font:700 calc(8.6 * var(--s))/1.2 var(--sans);letter-spacing:-.01em;color:#16263A;margin-top:calc(11 * var(--s))!important}
.t-roofer .ro-lines{width:100%;border-collapse:collapse;margin-top:calc(9 * var(--s));font-size:calc(6.4 * var(--s));color:#5A666D}
.t-roofer .ro-lines td{padding:0;height:calc(19.6 * var(--s));border-bottom:1px solid #EAEDEF}
.t-roofer .ro-lines td+td{text-align:right;color:#26333A}
.t-roofer .ro-lines tr:first-child td{border-top:1px solid #EAEDEF}
.t-roofer .ro-sum{margin-top:calc(9 * var(--s))}
.t-roofer .ro-sheet .ro-tot{margin-top:calc(10 * var(--s))!important;gap:calc(10 * var(--s));justify-content:space-between;border-top:1px solid #DDE2E5;padding-top:calc(9 * var(--s))}
.t-roofer .ro-sheet .ro-tot span{font-size:calc(8.6 * var(--s))}
.t-roofer .ro-sheet .ro-tot b{font-size:calc(10.6 * var(--s))}
.t-roofer .ro-thanks{display:block;text-align:center;font-size:calc(5.6 * var(--s));color:#8C989F;margin-top:calc(14 * var(--s))!important}
.t-roofer .ro-sheet .t10-edit{font-size:calc(9 * var(--s));height:calc(25 * var(--s));padding:0 calc(12 * var(--s));border-radius:calc(2 * var(--s));gap:calc(8 * var(--s))}
.t-roofer .ro-sheet .t10-edit svg{width:calc(9 * var(--s));height:calc(9 * var(--s))}
.t-roofer .ro-sheet-c .t10-edit{position:static;display:flex;justify-content:center;width:calc(130 * var(--s));margin:calc(14 * var(--s)) auto 0;opacity:1;transform:none;background:#C04E06}
.t-roofer .ro-sheet-l .t10-edit,.t-roofer .ro-sheet-r .t10-edit{bottom:42%}
.t-roofer .ro-sheet-c{width:calc(160 * var(--su));height:calc(252 * var(--su));left:calc(50% - 80 * var(--su));top:0;z-index:3}
/* left/right offset widened from 102 to 160su (24 Sep 2026): at 102su the center card's own edge
   sat past the left/right card's own midpoint, so a tap or keyboard focus aimed at the middle of
   the visible card landed on the center card instead. Still a fan, just not overlapping the card's
   own center. */
.t-roofer .ro-sheet-l{width:calc(140 * var(--su));height:calc(221 * var(--su));left:calc(50% - 160 * var(--su));top:calc(16 * var(--su));transform:rotate(-2.7deg);z-index:1}
.t-roofer .ro-sheet-r{width:calc(142 * var(--su));height:calc(215 * var(--su));right:calc(50% - 160 * var(--su));top:calc(21 * var(--su));transform:rotate(2deg);z-index:2}
.t-roofer .ro-stripsec{background:#F0F4F6;padding:0 0 46px}
.t-roofer .ro-stripsec .t10-strip{margin-top:0}
.t-roofer .ro-stripsec .t10-strip-top h3,.t-roofer .ro-stripsec .tgx-btn,.t-roofer .ro-stripsec .tgx-all{background:#fff}

/* payment */
.t-roofer .ro-pay{background:var(--navy);color:#fff;padding:46px 0}
.t-roofer .ro-pay .ro-h2,.t-roofer .ro-pay .ro-p{color:#fff}
.t-roofer .ro-pay .ro-h2{margin-top:10px!important}
.t-roofer .ro-pay .ro-p{margin-top:14px!important;color:rgba(255,255,255,.86)}
.t-roofer .ro-notes{display:grid;gap:18px;margin-top:26px!important}
.t-roofer .ro-notes li{display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(255,255,255,.92)}
.t-roofer .ro-notes svg{width:26px;height:26px;flex:none;stroke-width:1.5}
.t-roofer .ro-paycard{position:relative;background:#FBFBFC;color:var(--ink);border-radius:3px;padding:20px 18px;margin-top:30px}
.t-roofer .ro-payfoot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:16px}
.t-roofer .ro-scan{display:flex;align-items:flex-start;gap:12px}
.t-roofer .ro-qr{width:76px;height:76px}
.t-roofer .ro-scan span{font-size:11px;line-height:1.5;color:#93A0A7}
.t-roofer .ro-scan b{display:block;font-weight:400;color:#3F4A51;font-size:12px}
.t-roofer .ro-paycard .ro-tot{margin:0!important}
.t-roofer .ro-ov{position:absolute;inset:0;z-index:1}
.t-roofer .ro-ov .t10-edit{bottom:46%}

/* pricing */
.t-roofer .ro-price{background:#fff;padding:46px 0}
.t-roofer .ro-price .ro-h2{margin-top:10px!important}
.t-roofer .ro-tools{margin-top:22px!important}
.t-roofer .ro-tools li+li{border-top:1px solid var(--line)}
.t-roofer .ro-tools a{display:grid;grid-template-columns:44px 1fr 24px;align-items:center;gap:16px;padding:16px 0;color:var(--ink)}
.t-roofer .ro-ti{width:30px;height:30px;stroke-width:1.5;justify-self:center;color:#16263A}
.t-roofer .ro-tools b{display:block;font:700 18px/1.2 var(--sans);letter-spacing:-.01em}
.t-roofer .ro-tools small{display:block;font-size:14.5px;color:#57636A;margin-top:4px}
.t-roofer .ro-ta{width:22px;height:22px;stroke-width:2;color:#F26207}
.t-roofer .ro-tools a:hover b{color:#C04E06}

/* the items a clear roofing document needs */
.t-roofer .ro-det{background:#F3F5F6;padding:46px 0}
.t-roofer .ro-col{margin-top:26px}
.t-roofer .ro-col h3{font:700 19px/1.2 var(--serif);color:var(--ink)}
.t-roofer .ro-col ul{margin-top:12px!important}
.t-roofer .ro-col li{display:flex;align-items:center;gap:14px;font-size:15.5px;line-height:1.5;color:#46525A;padding:5px 0}
.t-roofer .ro-tick{width:20px;height:20px;flex:none}

/* FAQ */
.t-roofer .ro-faq{background:#fff;padding:46px 0}
.t-roofer .ro-q{margin-top:20px}
.t-roofer .ro-q details{border-bottom:1px solid #E3E8EA}
.t-roofer .ro-q summary{font:400 15px/1.35 var(--sans);color:var(--ink);padding:14px 0}
.t-roofer .ro-q summary::after{font-weight:300;font-size:22px}
.t-roofer .ro-q .a{padding:0 30px 14px 0}
.t-roofer .ro-rel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:22px!important;font-size:14px;color:var(--ink)}
.t-roofer .ro-rel b{font-weight:700}
.t-roofer .ro-rel span{color:#C8D0D4}
.t-roofer .ro-rl{color:#E8600E!important;text-decoration:underline!important;text-underline-offset:3px}
.t-roofer .ro-rl:hover{color:#C04E06!important}
.t-roofer .ro-more{margin-top:34px}
.t-roofer .ro-more h3{font:700 20px/1.25 var(--serif);color:var(--ink)}

/* final call to action */
.t-roofer .ro-end{position:relative;background:var(--navy)}
.t-roofer .ro-end-img,.t-roofer .ro-end-img img{display:block;width:100%;height:auto}
.t-roofer .ro-endbox{padding:28px 0 34px;color:#fff}
.t-roofer .ro-logo{display:flex;align-items:center;gap:10px;font:600 19px/1 var(--sans);color:#fff}
.t-roofer .ro-logo img{width:24px;height:auto}
.t-roofer .ro-end h2{font:700 32px/1.1 var(--serif);letter-spacing:-.02em;margin-top:18px!important;color:#fff}
.t-roofer .ro-endbox .ro-btn{margin-top:22px}
.t-roofer .ro-endbox .ro-fine{color:rgba(255,255,255,.82)}

/* from 900px: the mockup, to scale */
@media (min-width:900px){
  main.t-roofer{--u:calc(min(100cqw,1600px) / 773);--hs:calc(min(100cqw,1600px) / 773px)}
  .t-roofer .ro-scale{transform:scale(var(--hs))}
  .t-roofer .ro-f{width:calc(773 * var(--u));padding-inline:calc(37 * var(--u))}
  .t-roofer .ro-h2{font-size:calc(32.9 * var(--u));line-height:calc(32 * var(--u))}
  .t-roofer .ro-p{font-size:max(14px,calc(10.6 * var(--u)));line-height:max(21px,calc(16 * var(--u)))}
  .t-roofer .ro-eb{font-size:max(11px,calc(7.5 * var(--u)));line-height:calc(10 * var(--u))}
  .t-roofer .ro-btn{height:calc(31 * var(--u));padding:0 calc(16 * var(--u));font-size:max(13px,calc(11.3 * var(--u)));gap:calc(8 * var(--u));border-radius:calc(1.5 * var(--u))}
  .t-roofer .ro-btn svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}

  .t-roofer .ro-hero{height:calc(386 * var(--u))}
  .t-roofer .ro-hero-img img{height:calc(386 * var(--u));object-fit:cover}
  .t-roofer .ro-hero .ro-f{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%}
  .t-roofer .ro-panel{position:absolute;left:0;top:0;bottom:0;width:calc(430 * var(--u));min-height:0;box-shadow:none;
    padding:calc(84 * var(--u)) calc(100 * var(--u)) calc(25 * var(--u)) calc(43 * var(--u));
    background:linear-gradient(90deg,rgba(251,249,245,.97) 0%,rgba(251,249,245,.95) 52%,rgba(251,249,245,.72) 70%,rgba(251,249,245,.28) 86%,rgba(251,249,245,0) 100%)}
  .t-roofer .ro-seo{font-size:max(12px,calc(8 * var(--u)));margin-bottom:calc(3 * var(--u))}
  .t-roofer .ro-big{font-size:calc(31 * var(--u));line-height:calc(35.5 * var(--u));letter-spacing:-.03em}
  .t-roofer .ro-lede{font-size:max(13px,calc(9.8 * var(--u)));line-height:max(20px,calc(16 * var(--u)));margin-top:calc(7 * var(--u))!important;width:calc(275 * var(--u))}
  .t-roofer .ro-panel .ro-btn{margin-top:calc(16.5 * var(--u));width:calc(171.5 * var(--u));padding:0}
  .t-roofer .ro-fine{font-size:max(12px,calc(7.6 * var(--u)));line-height:calc(12 * var(--u));margin-top:calc(15 * var(--u))!important}

  .t-roofer .ro-flow{padding:calc(40.5 * var(--u)) 0 calc(31 * var(--u))}
  .t-roofer .ro-flow .ro-h2{font-size:calc(28.3 * var(--u));line-height:calc(30 * var(--u));margin-top:calc(4 * var(--u))!important}
  .t-roofer .ro-steps{grid-template-columns:repeat(4,1fr);gap:0;width:calc(693 * var(--u));margin:calc(18.5 * var(--u)) 0 0 calc(-6.5 * var(--u))!important}
  .t-roofer .ro-steps::before{content:"";position:absolute;left:calc(86.5 * var(--u));right:calc(88 * var(--u));top:calc(15.5 * var(--u));height:max(1px,calc(1.4 * var(--u)));background:#F26207}
  .t-roofer .ro-num{width:calc(31 * var(--u));height:calc(31 * var(--u));border-width:max(1px,calc(1.3 * var(--u)));font-size:calc(15 * var(--u))}
  .t-roofer .ro-steps h3{font-size:calc(14.2 * var(--u));line-height:calc(18 * var(--u));margin-top:calc(9.5 * var(--u))!important}
  .t-roofer .ro-steps p{font-size:max(12.5px,calc(9.8 * var(--u)));line-height:max(17px,calc(13.5 * var(--u)));margin-top:calc(5 * var(--u))!important}

  .t-roofer .ro-tpl{padding:0}
  .t-roofer .ro-tpl-in{height:calc(286 * var(--u))}
  .t-roofer .ro-tpl-copy{width:calc(250 * var(--u));padding-top:calc(81.5 * var(--u))}
  .t-roofer .ro-tpl .ro-h2{font-size:calc(32.9 * var(--u));line-height:calc(33 * var(--u));margin-top:calc(6 * var(--u))!important}
  .t-roofer .ro-tpl .ro-p{margin-top:calc(11 * var(--u))!important;font-size:max(14px,calc(11 * var(--u)))}
  .t-roofer .ro-sheets{position:absolute;left:calc(296.6 * var(--u));top:0;width:calc(452 * var(--u));height:100%;margin:0;--su:var(--u)}
  .t-roofer .ro-sheet-c{left:calc(142.4 * var(--u));top:calc(15.7 * var(--u))}
  .t-roofer .ro-sheet-l{left:0;top:calc(31.5 * var(--u))}
  .t-roofer .ro-sheet-r{left:calc(308.6 * var(--u));right:auto;top:calc(36.5 * var(--u))}
  .t-roofer .ro-stripsec{padding:0 0 calc(34 * var(--u))}

  .t-roofer .ro-pay{padding:calc(77 * var(--u)) 0 calc(30 * var(--u))}
  .t-roofer .ro-pay-in{min-height:calc(241 * var(--u))}
  .t-roofer .ro-pay-copy{width:calc(330 * var(--u))}
  .t-roofer .ro-pay .ro-h2{margin-top:calc(6.5 * var(--u))!important}
  .t-roofer .ro-pay .ro-p{margin-top:calc(11.5 * var(--u))!important;width:calc(285 * var(--u))}
  .t-roofer .ro-notes{grid-template-columns:calc(94 * var(--u)) calc(134 * var(--u)) 1fr;gap:0;margin:calc(35 * var(--u)) 0 0 calc(2 * var(--u))!important}
  .t-roofer .ro-notes li{display:block;font-size:max(12px,calc(8 * var(--u)));line-height:calc(13 * var(--u));padding-right:calc(16 * var(--u))}
  .t-roofer .ro-notes li+li{border-left:1px solid rgba(255,255,255,.22);padding-left:calc(20 * var(--u))}
  .t-roofer .ro-notes svg{width:calc(22 * var(--u));height:calc(22 * var(--u));margin-bottom:calc(16 * var(--u))}
  .t-roofer .ro-paycard{position:absolute;left:calc(404 * var(--u));top:calc(-60.5 * var(--u));width:calc(332 * var(--u));min-height:calc(286.5 * var(--u));
    margin:0;padding:calc(13.7 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));border-radius:calc(2 * var(--u))}
  .t-roofer .ro-paycard .ro-mark{width:calc(47 * var(--u));height:calc(19 * var(--u));stroke-width:calc(3 * var(--u))}
  .t-roofer .ro-paycard .ro-brand b{font-size:calc(9.6 * var(--u));margin-top:calc(5 * var(--u))}
  .t-roofer .ro-paycard .ro-brand i{font-size:calc(4.6 * var(--u));margin-top:calc(3 * var(--u))}
  .t-roofer .ro-paycard .ro-inv{font-size:calc(10.5 * var(--u))}
  .t-roofer .ro-paycard .ro-meta{font-size:calc(6.6 * var(--u));gap:calc(3.6 * var(--u)) calc(12 * var(--u));margin-top:calc(8 * var(--u))}
  .t-roofer .ro-billto{font-size:calc(6.8 * var(--u));line-height:calc(9.7 * var(--u));margin-top:calc(5.7 * var(--u))!important}
  .t-roofer .ro-paycard .ro-table{font-size:calc(6.6 * var(--u));margin-top:calc(9.2 * var(--u))}
  .t-roofer .ro-paycard .ro-table th{font-size:calc(6.6 * var(--u));padding:0 calc(7 * var(--u));height:calc(18.3 * var(--u))}
  .t-roofer .ro-paycard .ro-table td{padding:0 calc(7 * var(--u));height:calc(17.5 * var(--u))}
  .t-roofer .ro-payfoot{margin-top:calc(11 * var(--u))}
  .t-roofer .ro-qr{width:calc(37.6 * var(--u));height:calc(37.6 * var(--u))}
  .t-roofer .ro-scan{gap:calc(10 * var(--u))}
  .t-roofer .ro-scan span{font-size:calc(6.6 * var(--u));line-height:calc(10 * var(--u))}
  .t-roofer .ro-scan b{font-size:calc(7.4 * var(--u))}
  .t-roofer .ro-paycard .ro-tot{gap:calc(16 * var(--u))}
  .t-roofer .ro-paycard .ro-tot span{font-size:calc(10 * var(--u))}
  .t-roofer .ro-paycard .ro-tot b{font-size:calc(12.5 * var(--u))}

  .t-roofer .ro-two{display:grid;grid-template-columns:calc(326.5 * var(--u)) 1fr;gap:0}
  .t-roofer .ro-price{padding:calc(27.5 * var(--u)) 0 calc(21.5 * var(--u))}
  .t-roofer .ro-price .ro-h2{font-size:calc(33.7 * var(--u));line-height:calc(33.5 * var(--u));margin-top:calc(6 * var(--u))!important;width:calc(250 * var(--u))}
  .t-roofer .ro-two>div:first-child{border-right:1px solid var(--line);height:calc(160 * var(--u));padding-top:calc(28 * var(--u))}
  .t-roofer .ro-price .ro-two{align-items:start}
  .t-roofer .ro-tools{margin-top:calc(-18.5 * var(--u))!important;padding-left:calc(18.5 * var(--u))}
  .t-roofer .ro-tools a{grid-template-columns:calc(48 * var(--u)) 1fr calc(20 * var(--u));gap:calc(20 * var(--u));height:calc(64.5 * var(--u));padding:0}
  .t-roofer .ro-ti{width:calc(27 * var(--u));height:calc(27 * var(--u))}
  .t-roofer .ro-tools b{font-size:calc(10.3 * var(--u));line-height:calc(15 * var(--u))}
  .t-roofer .ro-tools small{font-size:max(12px,calc(8.6 * var(--u)));line-height:calc(12 * var(--u));margin-top:calc(3 * var(--u))}
  .t-roofer .ro-ta{width:calc(15 * var(--u));height:calc(15 * var(--u))}

  .t-roofer .ro-det{padding:calc(28.5 * var(--u)) 0 calc(26 * var(--u))}
  .t-roofer .ro-det-in{display:grid;grid-template-columns:calc(249 * var(--u)) calc(225 * var(--u)) 1fr;gap:0;min-height:calc(126.5 * var(--u))}
  .t-roofer .ro-det .ro-h2{width:calc(230 * var(--u));font-size:calc(28 * var(--u));line-height:calc(29.5 * var(--u))}
  .t-roofer .ro-col{margin:0;padding-left:calc(11 * var(--u));border-left:1px solid #D9DEE1}
  .t-roofer .ro-col h3{font-size:calc(15.2 * var(--u));line-height:calc(19 * var(--u))}
  .t-roofer .ro-col ul{margin-top:calc(11 * var(--u))!important}
  .t-roofer .ro-col li{font-size:max(12.5px,calc(10 * var(--u)));line-height:calc(25 * var(--u));padding:0;gap:calc(10 * var(--u))}
  .t-roofer .ro-tick{width:calc(17 * var(--u));height:calc(17 * var(--u))}

  .t-roofer .ro-faq{padding:calc(11 * var(--u)) 0 calc(23 * var(--u))}
  .t-roofer .ro-faq-top,.t-roofer .ro-more{grid-template-columns:calc(250 * var(--u)) 1fr}
  .t-roofer .ro-faq .ro-h2{font-size:calc(27.1 * var(--u));line-height:calc(30 * var(--u));width:calc(210 * var(--u));margin-top:calc(20 * var(--u))!important}
  .t-roofer .ro-q{margin-top:0}
  .t-roofer .ro-q summary{font-size:max(12.5px,calc(8.8 * var(--u)));height:calc(30.5 * var(--u));padding:0 calc(6 * var(--u)) 0 0}
  .t-roofer .ro-q summary::after{font-size:calc(15 * var(--u))}
  .t-roofer .ro-q .a p{font-size:max(13px,calc(9 * var(--u)))}
  .t-roofer .ro-rel{gap:0;margin-top:calc(16 * var(--u))!important;font-size:max(11.5px,calc(7.6 * var(--u)))}
  .t-roofer .ro-rel b{margin-right:calc(14 * var(--u))}
  .t-roofer .ro-rel span{margin:0 calc(12 * var(--u))}
  .t-roofer .ro-more{margin-top:calc(26 * var(--u))}
  .t-roofer .ro-more h3{font-size:calc(14 * var(--u))}

  .t-roofer .ro-end{height:calc(221 * var(--u))}
  .t-roofer .ro-end-img{position:absolute;inset:0}
  .t-roofer .ro-end-img img{height:100%;object-fit:cover}
  .t-roofer .ro-end .ro-f{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%}
  .t-roofer .ro-endbox{position:absolute;left:calc(1 * var(--u));top:calc(19 * var(--u));width:calc(400 * var(--u));padding:0}
  .t-roofer .ro-logo{font-size:calc(12.5 * var(--u));gap:calc(7 * var(--u));height:calc(15 * var(--u))}
  .t-roofer .ro-logo img{width:calc(15 * var(--u))}
  .t-roofer .ro-end h2{font-size:calc(31.1 * var(--u));line-height:calc(33 * var(--u));margin-top:calc(11 * var(--u))!important;width:calc(300 * var(--u))}
  .t-roofer .ro-endbox .ro-btn{margin-top:calc(14 * var(--u));width:calc(186 * var(--u));height:calc(32 * var(--u));padding:0}
  .t-roofer .ro-endbox .ro-fine{margin-top:calc(14 * var(--u))!important}
}

/* the hero text frame lay over the template paper and swallowed clicks on it (23 Sep 2026) */
.ro-hero .ro-f{pointer-events:none}.ro-hero .ro-f>*{pointer-events:auto}