/* "Why a new boiler lowers your bills" — interactive savings section.
   Shared by boilers.html, boiler-replacement-norwich.html and new-boiler.html. */
.bs{position:relative;overflow:hidden;background:var(--graphite-deep);color:var(--off-white);}
.bs::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%,rgba(184,115,62,0.18) 0%,rgba(184,115,62,0) 60%),
             radial-gradient(50% 50% at 0% 100%,rgba(184,115,62,0.08) 0%,rgba(184,115,62,0) 60%);}
.bs .wrap{position:relative;}
.bs .eyebrow{color:var(--silver);}
.bs-head{max-width:760px;margin-bottom:clamp(30px,5vh,48px);}
.bs-head h2{font-weight:600;letter-spacing:-0.025em;line-height:1.06;font-size:clamp(30px,5vw,52px);margin-top:18px;}
.bs-head h2 em{font-style:normal;color:var(--copper-bright);}
.bs-head p{margin-top:16px;font-size:clamp(15px,1.6vw,17px);line-height:1.6;color:var(--silver);max-width:58ch;}

.bs-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:980px){ .bs-grid{grid-template-columns:1.05fr 0.95fr;gap:22px;align-items:stretch;} }
.bs-card{border:1px solid rgba(196,198,197,0.12);background:rgba(255,255,255,0.02);padding:clamp(22px,3vw,34px);}

/* steps */
.bs-step{margin-bottom:24px;}
.bs-step:last-of-type{margin-bottom:0;}
.bs-label{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--silver);margin-bottom:12px;}
.bs-label .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--copper);color:var(--copper-bright);font-size:10px;letter-spacing:0;}
.bs-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
@media(max-width:559px){ .bs-chip{min-height:48px;padding:12px 8px;align-items:center;text-align:center;justify-content:center;} .bs-chip span{display:none;} .bs-chip b{font-size:13.5px;} }
.bs-chip{display:flex;flex-direction:column;gap:3px;text-align:left;min-height:52px;padding:12px 14px;background:transparent;border:1px solid var(--hairline-dark);color:var(--off-white);font-family:inherit;cursor:pointer;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),transform .2s var(--ease);touch-action:manipulation;}
.bs-chip:hover{border-color:rgba(196,198,197,0.45);}
.bs-chip:active{transform:scale(0.98);}
.bs-chip:focus-visible{outline:2px solid var(--copper);outline-offset:2px;}
.bs-chip b{font-size:14px;font-weight:600;letter-spacing:-0.005em;}
.bs-chip span{font-size:11.5px;color:var(--silver);line-height:1.4;}
.bs-chip[aria-pressed="true"]{border-color:var(--copper);background:rgba(184,115,62,0.14);}
.bs-rate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.bs-rate label{font-size:13px;color:var(--silver);}
.bs-rate .in{display:flex;align-items:center;border:1px solid var(--hairline-dark);}
.bs-rate input{width:76px;background:transparent;border:0;color:var(--off-white);font-family:inherit;font-size:16px;font-weight:600;padding:10px 4px 10px 12px;font-variant-numeric:tabular-nums;}
.bs-rate input:focus{outline:none;}
.bs-rate .in:focus-within{border-color:var(--copper);}
.bs-rate .u{padding:0 12px 0 2px;font-size:12px;color:var(--silver);}
.bs-rate small{font-size:11px;color:var(--silver);opacity:.85;}

/* coins: where every £1 of gas goes */
.bs-coins{margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline-dark);}
.bs-coins h3{font-size:15px;font-weight:600;letter-spacing:-0.01em;margin-bottom:4px;}
.bs-coins .sub{font-size:12px;color:var(--silver);margin-bottom:16px;}
.bs-row{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;margin-bottom:12px;}
.bs-row .who{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--silver);line-height:1.3;}
.bs-row .lost{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.bs-row.old .lost{color:#E8A46E;}
.bs-row.new .lost{color:var(--off-white);}
.bs-track{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;}
.bs-coin{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E7C49B 0%,#C98A50 45%,#9C5F31 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25);transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .6s var(--ease),filter .4s var(--ease);}
.bs-coin.gone{transform:translateY(-14px) scale(0.6);opacity:0.18;filter:grayscale(1);}
.bs-key{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--silver);}
.bs-key i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:#C98A50;}
.bs-key i.off{background:#555;opacity:.6;}

/* result */
.bs-result{display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(165deg,rgba(184,115,62,0.20) 0%,rgba(184,115,62,0.04) 55%,rgba(255,255,255,0.02) 100%);border-color:rgba(184,115,62,0.4);position:relative;}
.bs-result::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--copper);}
.bs-k{font-size:10.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--silver);}
.bs-big{font-size:clamp(46px,8vw,84px);font-weight:600;letter-spacing:-0.04em;line-height:1;margin:10px 0 6px;font-variant-numeric:tabular-nums;color:var(--off-white);}
.bs-big small{font-size:0.32em;font-weight:500;letter-spacing:0;color:var(--silver);margin-left:6px;}
.bs-line{font-size:14px;color:var(--silver);line-height:1.55;}
.bs-line b{color:var(--off-white);}
.bs-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0;border-top:1px solid var(--hairline-dark);}
.bs-stats div{padding:16px 10px 0 0;}
.bs-stats .v{font-size:clamp(18px,2.4vw,24px);font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.bs-stats .v .u{color:var(--copper-bright);}
.bs-stats .l{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--silver);line-height:1.4;}
.bs-proof{display:flex;gap:12px;align-items:flex-start;margin:0 0 22px;padding:14px 16px;background:rgba(0,0,0,0.22);border:1px solid var(--hairline-dark);}
.bs-proof svg{width:20px;height:20px;flex-shrink:0;color:var(--copper-bright);margin-top:1px;}
.bs-proof p{font-size:13px;line-height:1.55;color:var(--silver);}
.bs-proof b{color:var(--off-white);font-weight:600;}
.bs-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.bs-cta .btn{flex:1 1 auto;justify-content:center;}
.bs-fine{margin-top:16px;font-size:11px;line-height:1.55;color:var(--silver);opacity:.85;}

/* why cards */
.bs-why{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline-dark);border:1px solid var(--hairline-dark);margin-top:clamp(28px,4vh,40px);}
@media(min-width:760px){ .bs-why{grid-template-columns:repeat(3,1fr);} }
.bs-why li{list-style:none;background:var(--graphite-deep);padding:24px 22px;}
.bs-why svg{width:26px;height:26px;color:var(--copper-bright);margin-bottom:14px;}
.bs-why h3{font-size:16px;font-weight:600;letter-spacing:-0.01em;margin-bottom:6px;}
.bs-why p{font-size:13.5px;line-height:1.6;color:var(--silver);}

@media(max-width:420px){ .bs-row{grid-template-columns:1fr auto;} .bs-row .who{grid-column:1/-1;} .bs-track{grid-column:1/2;} }
@media (prefers-reduced-motion:reduce){ .bs-coin,.bs-chip{transition:none;} }