/* ==========================================================================
   CALCULATOR PAGE
   Two columns on desktop: form on the left, results pinned on the right.
   One column on mobile, with a sticky summary bar at the bottom.
   ========================================================================== */
.calcpage{padding:34px 0 120px}
.calchead{margin-bottom:26px}
.calchead .lede{font-size:16.5px}
.calcgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.85fr);gap:26px;align-items:start}

/* ---------- panels ---------- */
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.panelhead{width:100%;display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;min-height:66px}
.panelhead:hover{background:var(--mint)}
.pnum{width:28px;height:28px;border-radius:9px;background:var(--mint-2);color:var(--ink-3);
  font-family:var(--mono);font-size:12px;display:grid;place-items:center;flex:none;transition:.2s}
.panel.open .pnum,.panel.done .pnum{background:var(--forest-tint);color:var(--forest)}
.ptitle{flex:1;font-weight:600;font-size:15.5px;color:var(--ink)}
.psum{display:block;font-weight:400;font-size:13px;color:var(--ink-3);margin-top:2px}
.chev{width:10px;height:10px;border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);
  transform:rotate(45deg);flex:none;transition:transform .25s;margin-right:4px}
.panel.open .chev{transform:rotate(225deg)}
.panelbody{display:none;padding:0 20px 20px}
.panel.open .panelbody{display:block}

/* ---------- fields ---------- */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field > label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field input[type=number],.field select{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--mint);font-family:inherit;font-size:15.5px;color:var(--ink)}
.field input[type=number]{font-family:var(--mono)}
.field input:focus,.field select:focus{outline:none;border-color:var(--forest);
  background:var(--white);box-shadow:0 0 0 3px var(--forest-tint)}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- radio options ---------- */
.opts{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--mint)}
.opt{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;cursor:pointer;
  border-bottom:1px solid var(--line-2);transition:background .15s;min-height:54px}
.opt:last-child{border-bottom:0}
.opt:hover{background:var(--mint-2)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.dot{width:20px;height:20px;border-radius:50%;border:1.5px solid #BCCBBF;flex:none;margin-top:2px;
  display:grid;place-items:center;background:var(--white);transition:.16s}
.opt.on{background:var(--forest-tint)}
.opt.on .dot{border-color:var(--forest);background:var(--forest)}
.opt.on .dot::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.opt input:focus-visible ~ .dot{outline:2px solid var(--forest);outline-offset:2px}
.otxt{flex:1;min-width:0}
.ot{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-weight:600;font-size:14.5px}
.ot em{font-family:var(--mono);font-style:normal;font-size:11.5px;color:var(--forest);
  font-weight:600;white-space:nowrap}
.od{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:3px}

/* ---------- add-ons ---------- */
.addon{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;
  background:var(--mint);overflow:hidden}
.addon.on{border-color:#B9D2C1;background:var(--white)}
.addonhead{display:flex;gap:12px;align-items:flex-start;padding:14px}
.chk{flex:none;margin-top:2px;cursor:pointer}
.chk input{position:absolute;opacity:0;width:0;height:0}
.box{width:22px;height:22px;border-radius:7px;border:1.5px solid #BCCBBF;background:var(--white);
  display:grid;place-items:center;transition:.16s}
.addon.on .box{background:var(--forest);border-color:var(--forest)}
.box svg{width:13px;height:13px;stroke:#fff;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.addon.on .box svg{opacity:1}
.chk input:focus-visible ~ .box{outline:2px solid var(--forest);outline-offset:2px}
.addonmeta{flex:1;min-width:0;background:none;border:0;text-align:left;cursor:pointer;
  font-family:inherit;padding:0;display:block}
.an{display:block;font-weight:600;font-size:14.5px;color:var(--ink)}
.atag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--forest-tint);color:var(--forest);padding:3px 8px;border-radius:999px;margin-left:8px}
.ad{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:3px}
.ap{display:block;font-family:var(--mono);font-size:13.5px;font-weight:600;margin-top:6px;color:var(--ink)}
.addonbody{display:none;padding:0 14px 14px}
.addon.expanded .addonbody{display:block}
.warn{background:#FBF3DC;border:1px solid #EBDCA8;color:#7A5C10;padding:12px 14px;
  border-radius:var(--r-sm);font-size:13.5px;line-height:1.55;margin-bottom:14px}
table.bom{width:100%;border-collapse:collapse;font-size:13px}
table.bom th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding:7px 8px;border-bottom:1px solid var(--line);font-weight:600}
table.bom td{padding:9px 8px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.bom tr.alt{opacity:.62}
table.bom .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.spec{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
input.rate{width:88px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;
  text-align:right;font-family:var(--mono);font-size:12.5px;background:var(--mint)}

/* ---------- results ---------- */
.results{position:sticky;top:90px}
.rescard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.reshead{background:#1B4028;color:#DCE9DE;padding:11px 16px;display:flex;
  justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase}
.resbody{padding:18px 16px;max-height:calc(100vh - 260px);overflow-y:auto}
.big{margin-bottom:16px}
.big .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.big .v{display:block;font-family:var(--mono);font-size:29px;font-weight:600;
  letter-spacing:-.03em;line-height:1.1;margin-top:5px}
.big .s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:14px}
.kpi{background:var(--white);padding:11px 12px}
.kpi .k{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.kpi .v{font-family:var(--mono);font-size:16px;font-weight:600;margin-top:4px;letter-spacing:-.02em}
.kpi.good .v{color:#2C7A45}
.kpi.bad .v{color:#A8503F}
.note{background:#FBF3DC;border:1px solid #EBDCA8;color:#6E5310;padding:11px 13px;
  border-radius:var(--r-sm);font-size:12.5px;line-height:1.55;margin-bottom:10px}
.restabs{display:flex;gap:2px;background:var(--mint);padding:3px;border-radius:var(--r-sm);margin-bottom:14px}
.rtab{flex:1;background:none;border:0;padding:9px 6px;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-3)}
.rtab.on{background:var(--white);color:var(--forest);box-shadow:0 1px 2px rgba(21,32,24,.06)}
.tabpane{display:none}
.tabpane.on{display:block}
.tabpane h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 0 8px;font-weight:600}
.tabpane h4:first-child{margin-top:0}
.rows .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-2);font-size:13.5px}
.rows .row:last-child{border-bottom:0}
.rows .row span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rows .row.tot{border-top:1.5px solid var(--line);border-bottom:0;margin-top:4px;
  padding-top:10px;font-weight:700}
.rows .row .sub{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400}
.bar{margin-bottom:9px}
.bar .bt{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:4px}
.bar .bt b{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--ink-2)}
.bar .bg{height:6px;background:var(--mint-2);border-radius:99px;overflow:hidden}
.bar .bg i{display:block;height:100%;background:var(--forest);border-radius:99px;transition:width .4s}
.resfoot{border-top:1px solid var(--line);padding:16px;background:var(--mint)}
.btn.block{width:100%}
.disc{font-size:11.5px;color:var(--ink-3);line-height:1.55;margin-top:12px}
.loading{opacity:.45;transition:opacity .15s}

/* ---------- sticky mobile bar ---------- */
.stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#1B4028;
  color:#fff;padding:10px 18px;justify-content:space-between;gap:14px}
.stickybar .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:#9FBFA7}
.stickybar .v{display:block;font-family:var(--mono);font-size:15px;font-weight:600;margin-top:1px}

@media(max-width:1040px){
  .calcgrid{grid-template-columns:1fr}
  .results{position:static}
  .resbody{max-height:none}
  .stickybar{display:flex}
  .calcpage{padding-bottom:90px}
}
@media(max-width:560px){
  .two{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   BUDGET MODE, QUOTATION, SPECIALIST REVIEW
   ========================================================================== */
.budgetpanel .pnum{background:var(--wheat);color:#4A3708;font-weight:700}
.boptions{display:grid;gap:12px;margin-top:18px}
.bopt{background:var(--mint);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px;position:relative}
.bopt.best{border-color:var(--forest);background:var(--forest-tint)}
.bopt .rank{position:absolute;top:-9px;left:14px;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;background:var(--forest);color:#fff;
  padding:3px 9px;border-radius:999px}
.bopt h4{font-size:16px;margin:6px 0 4px;letter-spacing:-.01em}
.bopt .why{font-size:13px;color:var(--ink-3);line-height:1.5;margin-bottom:12px}
.bnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bnums div{background:var(--white);padding:9px 10px}
.bnums .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.bnums .v{font-family:var(--mono);font-size:14px;font-weight:600;margin-top:3px}
.bopt .use{margin-top:12px}
.bnofit{background:#FBF3DC;border:1px solid #EBDCA8;color:#6E5310;padding:14px 16px;
  border-radius:var(--r-sm);font-size:14px;line-height:1.6;margin-top:16px}
.bheld{font-size:13px;color:var(--ink-3);margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-2)}

.afterresults{display:grid;gap:16px;margin-top:26px}
.arcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow)}
.arcard h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px}
.arcard > p{color:var(--ink-2);font-size:15px;line-height:1.65;max-width:62ch}
.arcard.consult{border-color:#B9D2C1;background:linear-gradient(180deg,var(--forest-tint),var(--white) 60%)}
.arcard textarea{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--mint);font-family:inherit;font-size:15px;
  color:var(--ink);resize:vertical}
.arcard textarea:focus{outline:none;border-color:var(--forest);background:var(--white);
  box-shadow:0 0 0 3px var(--forest-tint)}
.areagrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.areapick{display:flex;gap:10px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;cursor:pointer;
  transition:border-color .15s,background .15s}
.areapick:hover{border-color:#B9D2C1}
.areapick input{position:absolute;opacity:0;width:0;height:0}
.areapick .box{width:19px;height:19px;border-radius:6px;border:1.5px solid #BCCBBF;
  background:var(--white);display:grid;place-items:center;flex:none;margin-top:1px;transition:.15s}
.areapick .box svg{width:12px;height:12px;stroke:#fff;stroke-width:2.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.areapick:has(input:checked){border-color:var(--forest);background:var(--forest-tint)}
.areapick:has(input:checked) .box{background:var(--forest);border-color:var(--forest)}
.areapick:has(input:checked) .box svg{opacity:1}
.areapick input:focus-visible ~ .box{outline:2px solid var(--forest);outline-offset:2px}
.areapick strong{display:block;font-size:14px;font-weight:600}
.areapick em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);
  line-height:1.45;margin-top:2px}
.consultbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
@media(max-width:660px){.areagrid{grid-template-columns:1fr}}