:root{--roof-accent:#176348;--roof-ink:#242c2b;--roof-tint:#edf4f0}
.roof-calculator-nav{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}
.roof-calculator-nav a{border:1px solid #cedbd3;border-radius:9px;padding:11px 14px;color:var(--roof-accent);background:white;text-decoration:none}
.roof-calculator-nav a:hover{background:var(--roof-tint)}
.roof-tool{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:28px;margin:28px 0;align-items:start}
.roof-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;background:#f4f7f5;border:1px solid #dfe8e1;border-radius:18px;padding:28px}
.roof-field{display:grid;gap:9px;min-width:0;font-size:14px;color:var(--roof-ink)}
.roof-field>span{font-weight:600;line-height:1.4}
.roof-field input,.roof-field select{min-width:0;width:100%;padding:13px 12px;border:1px solid #bfcfc6;border-radius:9px;background:white;color:var(--roof-ink);height:48px;font-size:16px}
.roof-field small{font-size:12px;color:#65746e;line-height:1.4}
.roof-field:has(select){grid-column:1/-1}
.roof-results{background:white;border:1px solid #dae5dd;box-shadow:0 12px 34px #22382a0b;border-radius:18px;padding:26px;position:sticky;top:24px}
.roof-output{padding:14px 0;border-bottom:1px solid #e8eeea;display:grid;gap:7px}
.roof-output>span{font-size:13px;color:#5b6b62}
.roof-output output{font-size:22px;color:var(--roof-ink);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.roof-output-main output{font-size:36px;color:var(--roof-accent)}
.roof-calculate{grid-column:1/-1;border:0;cursor:pointer;justify-content:center;display:flex}
.roof-calculate,#kpQC [data-qc-cta]{display:flex;align-items:center;justify-content:center;background:#176348;color:#fff!important;padding:16px 20px;border:0;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;min-height:52px;cursor:pointer}
.roof-calculate:hover,#kpQC [data-qc-cta]:hover{background:#124e39}
.roof-formula{font-size:14px;padding:20px 24px;background:var(--roof-tint);border-left:3px solid var(--roof-accent);border-radius:0 12px 12px 0;color:#41574b;max-width:none!important}
[data-calc-error],[data-wizard-error],[data-quick-error]{color:#a12620!important;background:#fff0ee;border:1px solid #efc3bb;border-radius:8px;padding:12px;font-size:14px;line-height:1.5;margin:14px 0}
.roof-wizard-error{margin:16px 24px}
#kpQC [data-qc-min]{display:block;font-size:clamp(32px,3.4vw,48px);font-weight:700;color:var(--roof-accent);line-height:1.2;margin:20px 0}
#kpQC [data-area-output]{display:inline;font-size:16px;font-weight:600;color:var(--roof-ink)}
#kpQC [data-qc-max]{font-weight:700;color:var(--roof-ink)}
#kpQC .kp-qc-result .btn1{margin-top:16px;justify-content:center}
#kpQC .kp-qc-result{background:#f6faf8;color:#263b30;border:1px solid #d7e5dc}
#kpQC .kp-qc-result p,#kpQC .adapted-calc-label{color:#405348}
#kpQC [aria-disabled=true]{opacity:.5;cursor:not-allowed}
.adapted-price-group{margin:42px 0}.adapted-price-group h2{font-size:28px;margin:0 0 10px}
.adapted-price-group td:last-child{white-space:nowrap;color:var(--roof-accent);font-weight:600}
.kp-rcalc-page .kp-rcalc-layout{margin-top:30px}
.kp-rcalc-step>.roof-field{margin:20px 0}.kp-rcalc-step>.roof-field input{max-width:250px}
.kp-rcalc-result-disclaimer{font-size:13px!important}.kp-rcalc-progress li{cursor:pointer}
/* The main calculator keeps the selected house in view while its controls change. */
#kpRcalc{grid-template-columns:minmax(0,1fr) 420px;gap:28px;scroll-margin-top:14px}
#kpRcalc .kp-rcalc-side{gap:20px}
#kpRcalc .roof-scene{padding:25px 25px 16px;border:1px solid #394e43;border-radius:20px;background:radial-gradient(ellipse at 32% 24%,#405247 0%,#293b32 44%,#1b2b24 100%);box-shadow:0 16px 42px #183c2417;isolation:isolate}
#kpRcalc .roof-scene::before{display:none}
.roof-scene-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative;z-index:1}
.roof-scene-heading>div{display:grid;gap:7px;min-width:0}
.roof-scene-eyebrow{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#b4c7b7}
#kpRcalcTypeText{font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.025em;color:#f4f5ed}
.roof-scene-area{flex:none;white-space:nowrap;font-size:13px;font-weight:600;color:#e4ecdf;padding:7px 10px;border-radius:6px;background:#ffffff09;border:1px solid #ffffff20;font-variant-numeric:tabular-nums}
.roof-scene-stage{position:relative;margin:-2px -19px -12px}
.roof-scene-stage::before{content:'';position:absolute;inset:8% 12%;border-radius:50%;background:radial-gradient(ellipse,#81967b16,transparent 70%);pointer-events:none}
#kpRcalc .roof-scene .kp-rcalc-svg{position:relative;width:100%;height:auto;border-radius:0;overflow:visible}
.roof-scene-material{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid #ffffff14;color:#edf0e5}
.roof-scene-material>div{display:grid;gap:4px;min-width:0}
.roof-scene-material>div>span{font-size:10px;color:#b5c5b6}
#kpRcalcMatText{font-size:14px;line-height:1.3;font-weight:500}
.roof-scene-swatch{flex:none;width:36px;height:36px;border-radius:7px;background-color:var(--roof-material,#8b3a3a);background-image:repeating-linear-gradient(90deg,transparent 0 7px,#ffffff26 7px 8px,#00000025 8px 10px);box-shadow:inset 0 0 0 1px #ffffff29,0 4px 10px #0000001a;transition:background-color .45s ease}
.roof-scene-swatch[data-material=soft]{background-image:repeating-linear-gradient(0deg,transparent 0 7px,#00000055 7px 8px),repeating-linear-gradient(90deg,transparent 0 11px,#00000022 11px 12px)}
.roof-scene-swatch[data-material=membrane]{background-image:linear-gradient(135deg,#ffffff20,transparent)}
#kpRcalc .kp-rcalc-card-swatch{background-image:repeating-linear-gradient(90deg,transparent 0 9px,#ffffff26 9px 10px,#00000025 10px 12px)}
#kpRcalc .kp-rcalc-card-swatch[data-material=soft]{background-image:repeating-linear-gradient(0deg,transparent 0 7px,#00000066 7px 8px),repeating-linear-gradient(90deg,transparent 0 12px,#00000022 12px 13px)}
#kpRcalc .kp-rcalc-card-swatch[data-material=membrane]{background-image:linear-gradient(135deg,#ffffff20,transparent)}
#kpRcalc .kp-rcalc-card-swatch[data-material=ceramic],#kpRcalc .kp-rcalc-card-swatch[data-material=metal_tile]{background-image:repeating-linear-gradient(0deg,transparent 0 7px,#0000002b 7px 9px),repeating-linear-gradient(90deg,transparent 0 7px,#ffffff26 7px 9px,#00000025 9px 11px)}
#kpRcalc .roof-scene-caption{font-size:10px!important;line-height:1.4!important;color:#a8bcae!important;margin:13px 0 0!important}
#kpRcalc .kp-rcalc-card{transition:border-color .2s,background-color .2s,box-shadow .25s,transform .25s}
#kpRcalc .kp-rcalc-card:has(input:checked){background:#f0f6f2;box-shadow:0 0 0 1px #176348,0 7px 19px #17452f0a}
#kpRcalc .kp-rcalc-card:has(input:focus-visible),#kpRcalc .kp-rcalc-option:has(input:focus-visible){outline:3px solid #71a88b;outline-offset:3px}
#kpRcalc .kp-rcalc-progress li:focus-visible{outline:2px solid #176348;outline-offset:4px;border-radius:8px}
#kpRcalc .kp-rcalc-step.is-active{animation:roof-step-in .32s ease-out both}
#kpRcalc .kp-rcalc-result-num{font-variant-numeric:tabular-nums}
@keyframes roof-step-in{from{opacity:.45;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px) and (min-width:981px){#kpRcalc{grid-template-columns:minmax(0,1fr) 360px;gap:20px}#kpRcalc .kp-rcalc-stepper{padding:24px}}
@media(max-width:980px){
  #kpRcalc{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
  #kpRcalc .kp-rcalc-side{display:contents}
  #kpRcalc .roof-scene{grid-row:1;position:sticky;top:12px;z-index:3;padding:15px 20px 12px;border-radius:16px;box-shadow:0 6px 24px #152c2620}
  #kpRcalc .kp-rcalc-stepper{grid-row:2;min-width:0}
  #kpRcalc .kp-rcalc-result{grid-row:3}
  .roof-scene-heading{gap:12px}
  .roof-scene-heading>div{gap:4px}
  #kpRcalcTypeText{font-size:17px}
  .roof-scene-eyebrow{font-size:9px}
  .roof-scene-area{font-size:12px;padding:5px 8px}
  .roof-scene-stage{margin:-12px -10px -18px}
  #kpRcalc .roof-scene .kp-rcalc-svg{height:184px}
  .roof-scene-material{padding-top:9px;gap:9px}
  .roof-scene-material>div{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .roof-scene-swatch{width:25px;height:25px;border-radius:5px}
  #kpRcalcMatText{font-size:12px}
  #kpRcalc .roof-scene-caption{font-size:9px!important;margin-top:6px!important}
  #kpRcalc .kp-rcalc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #kpRcalc .kp-rcalc-card{padding:16px 13px;min-width:0}
  #kpRcalc .kp-rcalc-card-title{font-size:14px;overflow-wrap:anywhere}
  #kpRcalc .kp-rcalc-card-meta{font-size:11px}
  #kpRcalc .kp-rcalc-card-icon{height:36px;width:36px}
  #kpRcalc .kp-rcalc-card-icon svg{width:36px;height:36px}
  #kpRcalc .kp-rcalc-stepper,#kpRcalc .kp-rcalc-step,#kpRcalc .kp-rcalc-card{scroll-margin-top:304px}
}
@media(max-width:359px){#kpRcalc .roof-scene{padding-inline:14px}#kpRcalcTypeText{font-size:15px}#kpRcalc .kp-rcalc-card{padding:13px 10px}#kpRcalc .kp-rcalc-card-title{font-size:13px}#kpRcalc .kp-rcalc-card-desc{font-size:11px}#kpRcalc .kp-rcalc-card-check{width:19px;height:19px;right:8px;top:8px}}
@media(max-height:620px) and (max-width:980px){#kpRcalc .roof-scene{position:relative;top:0}}
@media(prefers-reduced-motion:reduce){#kpRcalc *,#kpRcalc *::before,#kpRcalc *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:900px){.roof-tool{grid-template-columns:1fr}.roof-results{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.roof-output-main,[data-calc-error]{grid-column:1/-1}}
@media(max-width:600px){.roof-fields{padding:20px;grid-template-columns:1fr}.roof-results{padding:20px}.roof-output-main output{font-size:32px}.roof-output output{font-size:20px}.roof-calculator-nav a{font-size:13px;padding:10px}.adapted-price-group h2{font-size:23px}.adapted-table td:first-child{min-width:180px}.roof-formula{padding:16px;font-size:13px}#kpQC [data-qc-min]{font-size:32px}.kp-rcalc-page .kp-rcalc-layout{min-width:0}}

/* Both native range tracks follow the same value as their number fields. */
#kpRcalc .kp-rcalc-slider{background:linear-gradient(90deg,#176348 0%,#176348 var(--fill,0%),#e2e8f0 var(--fill,0%),#e2e8f0 100%)}
[data-roof-calculator-quick] .kp-qc-area-slider{background:linear-gradient(90deg,#6fcca6 0%,#6fcca6 var(--fill,0%),rgba(255,255,255,.22) var(--fill,0%),rgba(255,255,255,.22) 100%)}