@font-face{font-family:'Inter Tight Fallback';font-weight:100 449;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:97.83%;ascent-override:88.19%;descent-override:22.05%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:450 549;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:97.83%;ascent-override:88.19%;descent-override:22.05%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:550 649;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:93.67%;ascent-override:95.07%;descent-override:23.77%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:650 749;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:95.77%;ascent-override:92.79%;descent-override:23.20%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:750 849;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:84.21%;ascent-override:91.43%;descent-override:22.86%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:850 1000;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:84.21%;ascent-override:91.43%;descent-override:22.86%;line-gap-override:0%}
/* it-t10-hvac.css: the HVAC industry page, drawn to the owner's new design
   (tools/trades10/pack-trades-v2/hvac-technician/visual-reference/page-design.png, 772 wide).
   Built by tools/trades10/hvac.py.

   Every length is written in the design's own pixels through --s, one design pixel, so the page is
   the design at any width: --s is 1.865px on a 1440 screen (the pack's reference), 1.658px at 1280,
   and stops growing past 1494 where the 1290px content column caps. Narrow screens get their own
   --s and their own stacking below. */

.t-hvac{
  --s:min(.12953vw,1.935px);
  --cream:#FCFCFA;--ink:#0B1419;--body:#5B6B73;--slatetx:#4E6068;
  --or:#F26207;--ctab:#C04E06;--ctah:#A94404;--band:#1A343D;--pline:#E6ECEE;
  background:var(--cream);color:var(--ink);
  font-family:Inter,'Inter Fallback',-apple-system,"Segoe UI",Roboto,sans-serif;font-feature-settings:"cv11","ss01";
}
.hv-w{width:min(86.3%,1290px);margin-inline:auto}

/* ---- shared type ------------------------------------------------------------------------- */
.t-hvac a.hv-btn,.t-hvac a.hv-step,.t-hvac a.hv-tool,.t-hvac a.hv-rec-doc,.t-hvac a.hv-hero-doc,.t-hvac a.hv-tp{text-decoration:none!important}
.t-hvac h1,.t-hvac h2,.t-hvac .hv-step h3,.t-hvac .hv-tool h3,.t-hvac .hv-strong,.t-hvac .hv-ways,.t-hvac .hv-tpl-row h3,.t-hvac .hv-faq-more{font-family:"Inter Tight",'Inter Tight Fallback',Inter,'Inter Fallback',-apple-system,"Segoe UI",Roboto,sans-serif}
.t-hvac h1,.t-hvac h2{font-weight:800;letter-spacing:-.022em;color:var(--ink)}
.hv-h2{font-size:calc(var(--s)*25);line-height:1.06}
.hv-eyebrow{font-weight:700;font-size:calc(var(--s)*9.5);line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--slatetx)}
.hv-eyebrow.hv-or{color:var(--or)}
.hv-eyebrow.hv-mid{text-align:center}
.hv-body{font-size:calc(var(--s)*10.5);line-height:1.55;color:var(--body)}
.hv-mid{text-align:center}
.t-hvac .hv-btn{display:inline-flex;align-items:center;gap:calc(var(--s)*7);min-height:calc(var(--s)*29);
  padding:0 calc(var(--s)*14);border-radius:calc(var(--s)*3);background:var(--ctab);color:#fff!important;
  font-weight:700;font-size:calc(var(--s)*11);line-height:1;box-shadow:0 calc(var(--s)*6) calc(var(--s)*12) rgba(192,78,6,.20);
  transition:background .18s ease-out,transform .18s ease-out}
.t-hvac .hv-btn:hover{background:var(--ctah);transform:translateY(-1px)}
.hv-btn svg{width:calc(var(--s)*11);height:calc(var(--s)*11);flex:none;stroke-width:2.2}
.hv-micro{margin-top:calc(var(--s)*13)!important;font-weight:700;font-size:calc(var(--s)*7.6);letter-spacing:.14em;
  text-transform:uppercase;color:var(--slatetx)}
.hv-micro i{font-style:normal;color:var(--or);padding:0 calc(var(--s)*3)}
.t-hvac .hv-w>section,.t-hvac section{position:relative}

/* ---- hero: one photograph across the band, the copy on it ------------------------------- */
/* the band is exactly the picture's own shape, so the invoice drawn over it lands where the design
   puts it at every width and the painted one underneath never shows */
.hv-hero{display:flex;align-items:center;height:calc(var(--s)*324);overflow:hidden}
.hv-hero-photo{position:absolute;inset:0}
.hv-hero-win{position:absolute;inset:0;display:block;overflow:hidden}
.hv-hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.hv-hero-in{position:relative;z-index:1;padding-top:calc(var(--s)*22)}
.hv-hero-copy{max-width:calc(var(--s)*250)}
.t-hvac h1{margin:0;text-wrap:normal}
.hv-k{display:block;font-family:Inter,'Inter Fallback',-apple-system,"Segoe UI",sans-serif;font-weight:600;font-size:calc(var(--s)*8.2);line-height:1.35;letter-spacing:.01em;
  color:var(--body);margin-bottom:calc(var(--s)*4)}
.hv-big{display:block;font-size:calc(var(--s)*27.5);line-height:.985;letter-spacing:-.026em;text-wrap:normal}
.hv-hero .hv-eyebrow{margin-bottom:calc(var(--s)*13)!important}
.hv-lede{margin-top:calc(var(--s)*12)!important;font-size:calc(var(--s)*9.6);line-height:1.5;color:#3F4C53;
  max-width:calc(var(--s)*216)}
.hv-hero-in p:has(.hv-btn){margin-top:calc(var(--s)*15)!important}

/* the service invoice lying over the picture, exactly where the design puts it */
.hv-hero-doc{position:absolute;left:66%;top:34%;width:31.3%;z-index:1;border-radius:calc(var(--s)*1.5);
  transform:perspective(calc(var(--s)*330)) rotateX(7.5deg) rotate(-2.2deg);transform-origin:50% 50%;
  box-shadow:0 calc(var(--s)*10) calc(var(--s)*26) rgba(11,20,25,.28)}

/* ---- the paper the documents are drawn on ------------------------------------------------ */
/* the link around each paper is the query container, so the paper's whole layout is written in
   cqw and holds its proportions at any size, from the hero overlay to a phone */
.t-hvac .hv-hero-doc,.t-hvac .hv-rec-doc,.t-hvac .hv-tp{container-type:inline-size}
.hv-paper{background:#fff;color:#16222A;padding:3.6cqw 3.3cqw 3.2cqw;
  font-size:1.95cqw;line-height:1.35;text-align:left}
.hv-wm{display:block;font-weight:800;font-size:3.8cqw;letter-spacing:-.02em;color:#101C24;line-height:1.15}
.hv-wm span{color:var(--or)}
.hv-pp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:2cqw;
  padding-bottom:2.2cqw;border-bottom:1px solid var(--pline)}
.hv-pp-t{font-weight:800;font-size:2.5cqw;letter-spacing:.02em;text-align:right;color:#101C24;line-height:1.2}
.hv-pp-no{display:flex;flex-direction:column;align-items:flex-end;gap:.3cqw;margin-top:1.7cqw;font-size:1.75cqw;color:#41525B}
.hv-pp-who{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;margin-top:2.2cqw;font-size:1.8cqw}
.hv-pp-who b{display:block;font-weight:700;color:#16222A;margin-bottom:.45cqw}
.hv-pp-who span{display:block;color:#51626B;line-height:1.42}
.hv-pp-tb{width:100%;border-collapse:collapse;margin-top:2.8cqw;font-size:1.8cqw}
.hv-pp-tb th{background:#F1F4F5;font-weight:700;color:#16222A;text-align:left;padding:.5em .55em;border:1px solid var(--pline)}
.hv-pp-tb td{padding:.45em .55em;border:1px solid var(--pline);color:#31434C}
.hv-pp-tb th:nth-child(2),.hv-pp-tb td:nth-child(2){text-align:center;width:11%}
.hv-pp-tb th:nth-child(3),.hv-pp-tb td:nth-child(3),
.hv-pp-tb th:nth-child(4),.hv-pp-tb td:nth-child(4){text-align:right;width:16%;font-variant-numeric:tabular-nums}
.hv-pp-tot{margin:2.6cqw 0 0 auto;width:52%;font-size:1.8cqw}
.hv-pp-tot div{display:flex;justify-content:space-between;gap:2cqw;padding:.7cqw 0;color:#41525B}
.hv-pp-tot dt,.hv-pp-tot dd{margin:0}
.hv-pp-tot dd{font-variant-numeric:tabular-nums}
.hv-pp-tot div.g{border-top:1px solid var(--pline);font-weight:800;color:#101C24;font-size:2.25cqw;padding-top:.9cqw}
.hv-pp-ty{margin-top:2.2cqw!important;text-align:center;font-style:italic;font-size:1.65cqw;color:#68787F}

/* ---- a clear path from service to payment ------------------------------------------------ */
.hv-path{padding-block:calc(var(--s)*13) calc(var(--s)*8)}
.hv-path .hv-h2{margin-top:calc(var(--s)*9)!important;font-size:calc(var(--s)*23.5)}
.hv-steps{display:flex;align-items:flex-start;justify-content:space-between;margin-top:calc(var(--s)*19)!important}
.hv-steps li{flex:0 1 calc(var(--s)*108);width:calc(var(--s)*108);min-width:0;text-align:center}
.hv-steps li.hv-arrow{flex:0 1 calc(var(--s)*28);width:calc(var(--s)*28);margin-top:calc(var(--s)*17);color:var(--or)}
.hv-arrow svg{width:100%;height:auto;stroke-width:1.5}
.hv-step{display:block}
.hv-ring{display:grid;place-items:center;width:calc(var(--s)*40);height:calc(var(--s)*40);margin:0 auto calc(var(--s)*12);
  border:calc(var(--s)*1.5) solid var(--or);border-radius:50%;color:var(--or)}
.hv-ring svg{width:calc(var(--s)*20);height:calc(var(--s)*20);stroke-width:1.8}
.hv-step h3{font-weight:800;font-size:calc(var(--s)*11.5);letter-spacing:-.01em;color:var(--ink)}
.hv-step p{margin-top:calc(var(--s)*7)!important;font-size:calc(var(--s)*8.8);line-height:1.42;color:var(--body)}
.hv-step:hover h3{color:var(--ctab)}
.hv-step:hover .hv-ring{background:rgba(242,98,7,.07)}

/* ---- the service record ------------------------------------------------------------------ */
.hv-rec{padding-block:calc(var(--s)*17) calc(var(--s)*13)}
.hv-rec-in{display:grid;grid-template-columns:calc(var(--s)*244) 1fr;align-items:start}
.hv-rec-solo .hv-rec-in{grid-template-columns:1fr}
.hv-rec-solo .hv-rec-copy{padding-top:0}
.hv-rec-copy{padding-top:calc(var(--s)*51)}
.hv-rec-copy .hv-eyebrow{line-height:1.5}
.hv-rec .hv-h2{margin-top:calc(var(--s)*19)!important;font-size:calc(var(--s)*35);line-height:.985}
.hv-rec-copy .hv-body{margin-top:calc(var(--s)*27)!important;font-size:calc(var(--s)*13);line-height:1.35;
  max-width:calc(var(--s)*200);color:#54646D}
.hv-rule{display:block;width:calc(var(--s)*2.5);height:calc(var(--s)*33);background:var(--or);margin:calc(var(--s)*19) 0 0}
.hv-strong{margin-top:calc(var(--s)*19)!important;font-weight:700;font-size:calc(var(--s)*12);line-height:1.38;color:var(--ink)}
.hv-rec-doc{box-shadow:0 calc(var(--s)*9) calc(var(--s)*26) rgba(11,20,25,.10)}

.hv-rp{padding:2.9cqw 3.1cqw 3cqw;font-size:1.58cqw}
.hv-rp .hv-wm{font-size:3.1cqw}
.hv-rp .hv-pp-top{padding-bottom:0;border-bottom:0;align-items:center}
.hv-rp .hv-pp-t{font-size:2.15cqw}
.hv-rp-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 4cqw;margin-top:2.2cqw}
.hv-rp-meta dl{margin:0}
.hv-rp-meta div{display:grid;grid-template-columns:7.6em 1fr;gap:1em;padding:.36em 0;border-bottom:1px solid var(--pline)}
.hv-rp-meta dt{margin:0;color:#48595F}
.hv-rp-meta dd{margin:0;color:#16222A}
.hv-rp h4{margin:1.75cqw 0 .6cqw!important;font-weight:800;font-size:1.72cqw;letter-spacing:.06em;text-transform:uppercase;color:#101C24}
.hv-rp-tb{width:100%;border-collapse:collapse;font-size:1.56cqw}
.hv-rp-tb th{background:#F1F4F5;font-weight:700;text-align:left;color:#16222A;padding:.38em .8em;border:1px solid var(--pline)}
.hv-rp-tb td{padding:.36em .8em;border:1px solid var(--pline);color:#33454D}
.hv-rp-ck th:nth-child(2),.hv-rp-ck td:nth-child(2){width:31%}
.hv-rp-ck th:nth-child(3),.hv-rp-ck td:nth-child(3){width:27%}
.hv-rp-tb:not(.hv-rp-ck) th:nth-child(2),.hv-rp-tb:not(.hv-rp-ck) td:nth-child(2){width:16%;text-align:center}
.hv-rp-tb:not(.hv-rp-ck) th:nth-child(3),.hv-rp-tb:not(.hv-rp-ck) td:nth-child(3),
.hv-rp-tb:not(.hv-rp-ck) th:nth-child(4),.hv-rp-tb:not(.hv-rp-ck) td:nth-child(4){width:17%;text-align:right;font-variant-numeric:tabular-nums}
.hv-rp-work{margin:0!important}
.hv-rp-work li{position:relative;padding-left:1.5em;margin-bottom:.3em;color:#33454D}
.hv-rp-work li::before{content:"";position:absolute;left:.45em;top:.52em;width:.33em;height:.33em;border-radius:50%;background:#54646D}
.hv-rp-note{padding-left:1em;color:#33454D;line-height:1.45}

/* ---- calculators -------------------------------------------------------------------------- */
.hv-calc{padding-block:calc(var(--s)*13) calc(var(--s)*12)}
.hv-calc-in{display:grid;grid-template-columns:calc(var(--s)*244) 1fr;align-items:start}
.hv-calc .hv-h2{margin-top:calc(var(--s)*13)!important;font-size:calc(var(--s)*25);line-height:1.09}
.hv-calc-list{display:grid;grid-template-columns:repeat(3,1fr)}
.hv-calc-list li{border-left:1px solid #E1E7E9}
.hv-tool{display:block;padding:calc(var(--s)*2) calc(var(--s)*16) 0}
.hv-tool-ic{display:block;width:calc(var(--s)*22);height:calc(var(--s)*22);color:var(--or)}
.hv-tool-ic svg{width:100%;height:100%;stroke-width:1.6}
.hv-tool h3{margin-top:calc(var(--s)*8)!important;font-weight:800;font-size:calc(var(--s)*10.5);line-height:1.22;color:var(--ink);max-width:7.6em}
.hv-tool p{margin-top:calc(var(--s)*7)!important;font-size:calc(var(--s)*8.8);line-height:1.5;color:var(--body);max-width:13em}
.hv-tool-go{display:inline-flex;align-items:center;gap:calc(var(--s)*5);margin-top:calc(var(--s)*12);
  font-weight:700;font-size:calc(var(--s)*8.8);color:var(--ctab);border-bottom:1px solid rgba(242,98,7,.55);padding-bottom:calc(var(--s)*1)}
.hv-tool-go svg{width:calc(var(--s)*9);height:calc(var(--s)*9);stroke-width:2.2}
.hv-tool:hover .hv-tool-go{border-color:var(--ctab)}
.hv-pct circle{fill:none}

/* ---- templates ---------------------------------------------------------------------------- */
.hv-tpl{padding-block:calc(var(--s)*18) calc(var(--s)*24)}
.hv-tpl-top{display:grid;grid-template-columns:calc(var(--s)*292) 1fr;gap:calc(var(--s)*8);align-items:start}
.hv-tpl .hv-h2{margin-top:calc(var(--s)*11)!important;line-height:1.08}
.hv-tpl-top .hv-body{padding-top:calc(var(--s)*19);max-width:calc(var(--s)*310);font-size:calc(var(--s)*10)}
.hv-tpl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--s)*33);margin-top:calc(var(--s)*20)!important;align-items:stretch}
.hv-tpl-row li{display:flex;flex-direction:column}
.t-hvac .hv-tpl-row .hv-tp{flex:1}
.hv-tpl-row .hv-paper{height:100%}
.hv-tpl-row h3{text-align:center;font-weight:800;font-size:calc(var(--s)*11);color:var(--ink);margin-bottom:calc(var(--s)*9)!important}
.t-hvac .hv-tp{box-shadow:0 calc(var(--s)*7) calc(var(--s)*20) rgba(11,20,25,.11)}
/* the three template papers hold the same proportions as the hero's, just smaller on the page */
.hv-mini-est .hv-pp-tot{width:100%;font-size:2.1cqw}
.hv-mini-est .hv-pp-tot div.g{border-top:0;font-size:2.2cqw}
.hv-rcpt .hv-rc-from{margin-top:6cqw;line-height:1.5}
.hv-rcpt .hv-rc-from b{display:block;font-weight:700;color:#16222A;margin-bottom:1cqw}
.hv-rcpt .hv-rc-from span{display:block;color:#51626B}
.hv-rc-list{margin:6cqw 0 0!important}
.hv-rc-list div{display:grid;grid-template-columns:38% 1fr;gap:2cqw;padding:2cqw 0;border-bottom:1px solid var(--pline)}
.hv-rc-list dt{margin:0;font-weight:700;color:#16222A}
.hv-rc-list dd{margin:0;color:#41525B}
.hv-rc-list div.g dd{font-weight:800;color:#101C24}
.hv-tpl-cta{margin-top:calc(var(--s)*19)!important;text-align:center}
.hv-tpl .t10-strip{margin-top:calc(var(--s)*40)}

/* ---- the payment band (the page's only QR) ------------------------------------------------ */
.hv-pay{background:var(--band);color:#fff;padding-block:calc(var(--s)*11.5)}
.hv-pay-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(var(--s)*34)}
.hv-pay .hv-eyebrow{color:#C6D3D7}
.hv-pay .hv-h2{margin-top:calc(var(--s)*9)!important;color:#fff;font-size:calc(var(--s)*26);line-height:1.1}
.hv-pay-ways{border-left:1px solid rgba(255,255,255,.28);padding-left:calc(var(--s)*24)}
.hv-ways{font-weight:700;font-size:calc(var(--s)*12);color:#fff}
.hv-ways i{font-style:normal;color:#F9A66A;padding:0 calc(var(--s)*2)}
.hv-pay-sub{margin-top:calc(var(--s)*5)!important;font-size:calc(var(--s)*9.4);color:#C6D3D7}
.hv-pay-qr{text-align:center}
.hv-qr-card{display:block;width:calc(var(--s)*71);height:calc(var(--s)*71);margin:0 auto;background:#fff;
  border-radius:calc(var(--s)*4);padding:calc(var(--s)*5)}
.hv-pay-qr b{display:block;margin-top:calc(var(--s)*8);font-weight:700;font-size:calc(var(--s)*9.4);color:#fff}
.hv-pay-qr .hv-pay-sub{margin-top:calc(var(--s)*3)!important}

/* ---- questions ---------------------------------------------------------------------------- */
.hv-faq{padding-block:calc(var(--s)*22) calc(var(--s)*26)}
.hv-faq .hv-h2{margin-top:calc(var(--s)*10)!important;font-size:calc(var(--s)*24)}
.t-hvac .hv-faq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 calc(var(--s)*22);margin-top:calc(var(--s)*20)}
.t-hvac .hv-faq-grid details{border-bottom:1px solid #E1E7E9}
.t-hvac .hv-faq-grid summary{padding:calc(var(--s)*9) 0;font-size:calc(var(--s)*8.9);line-height:1.4;color:#2C3B43;gap:calc(var(--s)*8)}
.t-hvac .hv-faq-grid summary::after{content:"";flex:none;width:calc(var(--s)*9);height:calc(var(--s)*9);
  background:currentColor;color:#5B6B73;transition:transform .18s ease-out;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M14 7l5 5-5 5'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M14 7l5 5-5 5'/%3E%3C/svg%3E")}
.t-hvac .hv-faq-grid details[open] summary::after{transform:rotate(90deg)}
.t-hvac .hv-faq-grid summary:hover{color:var(--ctab)}
.t-hvac .hv-faq-grid .a{padding:0 calc(var(--s)*6) calc(var(--s)*12) 0}
.t-hvac .hv-faq-grid .a p{font-size:calc(var(--s)*8.8);line-height:1.6;color:var(--body)}
.hv-faq-more{margin-top:calc(var(--s)*30)!important;font-weight:800;font-size:calc(var(--s)*12);color:var(--ink)}

/* ---- the closing call to action ----------------------------------------------------------- */
.hv-cta{display:flex;align-items:center;height:calc(var(--s)*199);overflow:hidden}
.hv-cta-photo{position:absolute;inset:0}
.hv-cta-img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.hv-cta-in{position:relative;z-index:1}
.hv-cta-copy{max-width:calc(var(--s)*250)}
.hv-cta .hv-h2{margin-top:calc(var(--s)*14)!important;font-size:calc(var(--s)*25);line-height:1.09}
.hv-cta-in p:has(.hv-btn){margin-top:calc(var(--s)*14)!important}

/* ---- the search copy at the end sits on the design's cream -------------------------------- */
.t-hvac .t10-long{background:#F4F6F5}

/* ---- narrower screens --------------------------------------------------------------------- */
@media (max-width:1180px){
  .hv-rec-in,.hv-calc-in{grid-template-columns:calc(var(--s)*236) 1fr}
}
/* Under 900 the copy no longer fits on the picture's calm side, so the band becomes one column:
   the copy on the cream the picture's own edge fades into, then the picture full width with that
   same cream washing down over its top so there is no seam, then the invoice lifted onto its lower
   edge the way the design lays it over the photograph. The picture is windowed to the part left of
   the painted invoice, so only the real HTML one is ever on the page. */
@media (max-width:900px){
  .t-hvac{--s:clamp(1.02px,.212vw,1.5px)}
  .hv-w{width:min(90%,720px)}
  .hv-hero,.hv-cta{height:auto;display:flex;flex-direction:column;align-items:stretch;overflow:visible}
  .hv-hero-in{order:1;padding-block:calc(var(--s)*40) calc(var(--s)*30)}
  .hv-hero-photo{order:2;position:relative;inset:auto;aspect-ratio:772/324}
  .hv-hero-win::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;z-index:1;
    background:linear-gradient(var(--cream),rgba(252,252,250,0))}
  .hv-cta-in{order:1;padding-block:calc(var(--s)*34) calc(var(--s)*26)}
  .hv-cta-photo{order:2;position:relative;inset:auto;overflow:hidden;aspect-ratio:520/199}
  .hv-cta-img{object-position:100% 50%}
  .hv-cta-photo::before{content:"";position:absolute;left:0;right:0;top:0;height:26%;z-index:1;
    background:linear-gradient(var(--cream),rgba(252,252,250,0))}
  .hv-hero-copy,.hv-cta-copy{max-width:calc(var(--s)*360)}
  .hv-lede{max-width:calc(var(--s)*330)}
  .hv-rec-in,.hv-calc-in,.hv-tpl-top{grid-template-columns:1fr;gap:calc(var(--s)*26)}
  .hv-rec-copy{padding-top:0}
  .hv-rec-copy .hv-body,.hv-tpl-top .hv-body{max-width:46ch}
  .hv-tpl-top .hv-body{padding-top:0}
  .hv-calc-list{grid-template-columns:1fr 1fr}
  .hv-calc-list li{padding-bottom:calc(var(--s)*18)}
  .hv-pay-in{grid-template-columns:1fr;gap:calc(var(--s)*20);text-align:center}
  .hv-pay-ways{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.22);padding-top:calc(var(--s)*16)}
  .hv-qr-card{width:calc(var(--s)*110);height:calc(var(--s)*110)}
  .t-hvac .hv-faq-grid{grid-template-columns:1fr 1fr}
  .hv-steps{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;gap:calc(var(--s)*26) calc(var(--s)*14)}
  .hv-steps li{flex:none;width:100%;max-width:calc(var(--s)*170)}
  .hv-steps li.hv-arrow{display:none}
}
@media (max-width:620px){
  .t-hvac{--s:clamp(1.02px,.30vw,1.34px)}
  .hv-w{width:min(92%,560px)}
  /* the picture is windowed to the part left of the invoice the design painted into it, and the
     real HTML invoice is lifted onto its lower edge, so the two layers still read as one picture */
  .hv-hero-photo{aspect-ratio:auto;display:flex;flex-direction:column}
  .hv-hero-win{position:relative;inset:auto;aspect-ratio:300/324}
  .hv-hero-img{object-position:41.7% 50%}
  .hv-hero-doc{position:relative;left:auto;top:auto;width:min(340px,82%);
    margin:calc(var(--s)*-64) auto calc(var(--s)*26);transform:rotate(-1.6deg);
    box-shadow:0 14px 34px rgba(11,20,25,.22)}
  .hv-cta-photo{aspect-ratio:380/199}
  .hv-tpl-row{grid-template-columns:1fr;gap:calc(var(--s)*30)}
  .hv-calc-list{grid-template-columns:1fr}
  .t-hvac .hv-faq-grid{grid-template-columns:1fr}
  .hv-steps{grid-template-columns:1fr 1fr}
  .hv-rp{font-size:2.6cqw}
  .hv-rp h4{font-size:2.7cqw}
  .hv-rp-tb{font-size:2.5cqw}
  .hv-rp-meta{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .t-hvac .hv-btn,.t-hvac .hv-faq-grid summary::after{transition:none}
}

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

/* it-hero-phone-v1 start */
/* One composed hero on phones (24 Sep 2026): the picture sits under the copy inside the same panel,
   with a scrim in the panel color, instead of a separate strip beneath the text. */
@media (max-width:900px){
.hv-hero{display:flex;flex-direction:column;position:relative;background:rgb(255,255,255);overflow:hidden;height:auto;min-height:0}
.hv-hero-in{order:1;position:relative;inset:auto;z-index:2;background:transparent;padding-bottom:0;margin-bottom:0}
.hv-hero-photo{order:2;position:relative;z-index:1;inset:auto;margin:calc(100vw*-0.3500) 0 0;width:100%;max-width:none;height:auto}
.hv-hero-win{aspect-ratio:1/1.0000;overflow:hidden}
.hv-hero-img{display:block;position:static;width:100%;height:100%;max-width:none;aspect-ratio:auto;padding-top:calc(100vw*0.2100);box-sizing:border-box;background:rgb(255,255,255);object-fit:cover;object-position:41.7% 50%;-webkit-mask-image:none;mask-image:none}
.hv-hero-win{position:relative;inset:auto;display:block;width:100%;height:auto}
.hv-hero-win::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgb(255,255,255) 0,rgb(255,255,255) calc(100vw*0.2200),rgba(255,255,255,0.85) calc(100vw*0.2700),rgba(255,255,255,0.5) calc(100vw*0.3800),rgba(255,255,255,0) calc(100vw*0.6700))}
.hv-hero-win::before{display:none}.hv-hero-doc{z-index:2}
}
/* it-hero-phone-v1 end */

/* v541: touch-sized hero buttons (coarse pointers only; desktop is unchanged) */
@media (pointer:coarse){.t-hvac .hv-btn,.hv-btn{min-height:44px}}