/*
 * Energy Savings calculator — /energy-savings/ only.
 *
 * Its own file rather than style.css because it loads on ONE page, and style.css is on the
 * render-blocking critical path sitewide. Conditionally enqueued in functions.php against the
 * page-energy-savings.php template. Same pattern as team-member.css and testimonial-form.css.
 *
 * Colour mapping is inherited from the static PNG chart this replaces, so a returning visitor
 * reads it the same way: RED is compressed air (the cost you are carrying), GREEN is SolvAir.
 * #db0d20 is the red already in style.css — not a new token.
 *
 * Motion: the two chart lines draw left to right, then the saving area fades in behind them.
 * Everything is gated behind .is-revealed, which energy-calculator.js adds on scroll-in, and
 * every transition is disabled under prefers-reduced-motion. The NUMBER count-up is not here —
 * the shared implementation in js/scripts.js owns it via data-countup.
 */

.energy-calc {
  --ec-red: #db0d20;
  --ec-green: var(--brand-green, #9fc114);
  --ec-ink: #1d232a;
  --ec-line: #e7e7e7;
  --ec-surface: #f7f8f9;
}

/* The section opens both calculator pages, directly under the breadcrumbs, so it does not need
   the full sitewide section gap above it (Jason, 2026-09-18 — "too much white space"). */
.energy-calc.section { margin-top: 48px; }

/* The sitewide energy strip links to #energy-calculator; without this the heading lands flush
   against the top edge of the window. */
.energy-calc { scroll-margin-top: 32px; }

/* Wider than a plain standfirst: the heading is now the page's "up to 12 times cheaper" line,
   moved here from the retired static graph (2026-09-17). */
.energy-calc__head {
  max-width: 64rem;
  margin: 0 auto 40px;
  text-align: center;
}

.energy-calc__title {
  margin: 0 0 12px;
  text-wrap: balance;
}

.energy-calc__standfirst {
  max-width: 56rem;
  margin: 0 auto;
  color: var(--text-grey, #6b7484);
}

.energy-calc__standfirst p { margin: 0; }

/* ── Layout ─────────────────────────────────────────────────────────────────
   Mobile-first single column. The chart follows the numbers on small screens
   because a 800-wide viewBox squeezed into 320px is decoration, not data. */
.energy-calc__grid {
  display: grid;
  gap: 28px;
  scroll-margin-top: 16px; /* the size-tile jump on phones lands just clear of the top edge */
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .energy-calc__grid {
    grid-template-columns: 320px 1fr;
    grid-template-areas:
      "controls result"
      "details  details"
      "secondary secondary"
      "cta      cta";
    align-items: start;
    gap: 24px 32px;
  }

  .energy-calc__controls { grid-area: controls; }
  .energy-calc__results  { grid-area: results; }
  .energy-calc__result   { grid-area: result; }
  .energy-calc__chart    { grid-area: chart; }
  .energy-calc__secondary{ grid-area: secondary; }
  .ec-details            { grid-area: details; }
}

/* ── Result block: hero + the two bills (2026-09-18) ────────────────────────
   Replaces the cumulative line chart, which was two straight lines carrying
   three numbers. Saving leads; the bars answer "compared with what?"; the
   five-year strip below answers "and then?". The chart itself is kept in the
   DOM for the print sheet — see .energy-calc__chart--stored. */

.energy-calc__result {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.energy-calc__chart--stored { display: none; }

.ec-hero {
  background: var(--brand-dark-blue, #0c2c61);
  border-radius: 10px;
  padding: 24px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 36px;
  align-items: flex-start;
  justify-content: space-between;
}

/* Desktop: one row. The headline column shrinks (its basis line wraps instead) so the three
   result figures stay beside the saving even on Large, where they run to six digits. */
@media (min-width: 992px) {
  .ec-hero { flex-wrap: nowrap; }
  .ec-hero__headline { min-width: 0; flex: 0 1 auto; }
  .ec-hero__stats { flex: 0 0 auto; }
}

.energy-calc .ec-hero__label,
.energy-calc .ec-panel-title {
  margin: 0;
  font-family: var(--heading-font, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-grey, #6b7484);
}

.energy-calc .ec-hero__label { color: #c3d0e2; margin-bottom: 4px; }

.energy-calc .ec-hero__value {
  margin: 0;
  font-family: var(--heading-font, sans-serif);
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ec-green);
}

.energy-calc .ec-hero__basis {
  margin: 8px 0 0;
  font-size: 13px;
  color: #c3d0e2;
}

/* Result figures, sized like the case-study result strip. Padded down by the height of
   the hero's own label so they start on the same line as the £ figure. */
.ec-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
}

.ec-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #c3d0e2;
  font-size: 13px;
}

.ec-hero__stats b {
  font-family: var(--heading-font, sans-serif);
  font-size: clamp(26px, 2.6vw, 40px);
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}

@media (max-width: 700px) {
  .ec-hero__stats { padding-top: 0; }
}

.ec-bars,
.ec-years {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 168px, not 130: "218 kW of compressor" wrapped to two lines on Large, which grew the row
   and made the whole card jump as you switched size (Jason, 2026-09-18). */
.ec-bar-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 56px;
}

.ec-bar-label {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-grey, #6b7484);
}

.ec-bar-label b {
  display: block;
  color: var(--ec-ink);
}

.ec-bar-track {
  position: relative;
  height: 48px;
}

/*
 * Sizes come from custom properties the template sets inline (--ec-bar-w, --ec-brace-*,
 * --ec-year-h, --ec-gauge-w) rather than an inline width, so the entrance animation can zero
 * them in CSS — an inline width would win over any rule. Gated on `scripting: enabled`, as the
 * chart block below is: with JS off nothing adds .is-revealed and the bars must not be hidden.
 */
.ec-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--ec-bar-w, 0);
  border-radius: 0 4px 4px 0;
  /* 1s at Jason's request (2026-09-21; was 0.45s). The brace below matches it. */
  transition: width 1s cubic-bezier(0.22, 0.9, 0.32, 1.08);
}

.ec-bar--ca     { background: linear-gradient(90deg, #e8202f 0%, var(--ec-red) 100%); }
.ec-bar--blower { background: linear-gradient(90deg, #2a8ccb 0%, var(--brand-blue, #1e79b7) 100%); }

.ec-bar-value {
  position: absolute;
  top: 50%;
  left: var(--ec-bar-w, 0);
  transform: translateY(-50%);
  padding-left: 8px;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  color: var(--ec-ink);
  font-variant-numeric: tabular-nums;
  transition: left 0.45s cubic-bezier(0.22, 0.9, 0.32, 1.08);
}

/* Bracket spans the gap between the two bar ends; its label sits centred under it. */
.ec-bar-gap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 182px; /* label column + gap */
}

.ec-bar-brace,
.ec-bar-gap-value {
  margin-left: var(--ec-brace-off, 0);
  width: var(--ec-brace-w, 0);
}

.ec-bar-brace {
  height: 14px;
  border: 2px solid var(--ec-green);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  transition: width 1s cubic-bezier(0.22, 0.9, 0.32, 1.08), margin-left 1s cubic-bezier(0.22, 0.9, 0.32, 1.08);
}

.ec-bar-gap-value {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap; /* a narrow bracket must not wrap its caption and change the card height */
  color: var(--good, #1f6048);
  font-variant-numeric: tabular-nums;
  transition: width 0.45s cubic-bezier(0.22, 0.9, 0.32, 1.08), margin-left 0.45s cubic-bezier(0.22, 0.9, 0.32, 1.08);
}

.ec-bars__key {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ec-line);
}

/* Clear of the bracket label above it. */
.ec-bar-gap { margin-bottom: 8px; }

@media (max-width: 520px) {
  .ec-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .ec-bar-gap { margin-left: 0; }
}

/* ── Five-year build-up ───────────────────────────────────────────────────── */

.ec-years__cols {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* matches $ec_years_shown in the template */
  gap: 6px;
  align-items: end;
  height: 175px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ec-year {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}

.ec-year__value {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ec-ink);
  font-variant-numeric: tabular-nums;
}

/* Very slight gradients on the bars (Jason, 2026-09-18) — a lift, not a colour change. */
.ec-year__bar {
  width: 100%;
  max-width: 120px;
  height: var(--ec-year-h, 0);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #adcd25 0%, var(--ec-green) 100%);
  transition: height 0.55s cubic-bezier(0.22, 0.9, 0.32, 1.08);
}

/* Beyond the warranty: the same saving continuing, in a lighter step of the same green. */
.ec-year__bar--beyond { background: linear-gradient(180deg, #dcebA0 0%, #d4e58c 100%); }

.ec-year__label {
  font-size: 12px;
  color: var(--text-grey, #6b7484);
}

.energy-calc .ec-years__note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ec-line);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-grey, #6b7484);
}

.ec-years__note b { color: var(--ec-ink); }
.ec-years__badge { flex: 0 0 auto; width: 50px; height: 50px; }

/* Seven columns in a phone-width card: drop "Year", shrink the figures, and show them on
   alternate columns only — every figure is still in the table below. */
@media (max-width: 700px) {
  .ec-years__cols { gap: 4px; }
  .ec-year__value { font-size: 10px; }
  .ec-year__label { font-size: 11px; }
  .ec-year__label-word { display: none; }
}

@media (max-width: 520px) {
  .ec-year:nth-child(even) .ec-year__value { visibility: hidden; }
}

/* ── Detail on demand ─────────────────────────────────────────────────────── */

.ec-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

/* Two equal columns on desktop (Jason, 2026-09-18); the print row keeps its own line below. */
@media (min-width: 992px) {
  .ec-details { grid-template-columns: 1fr 1fr; gap: 16px; }
}


/* ── Replay: the bars shrink away, then grow back, on every change ───────────
   The first cut SNAPPED them to zero, which read as a glitch (Jason,
   2026-09-18) — so the collapse is animated too, in one quick movement with no
   stagger, and the grow keeps the stagger. The figures never travel while they
   can be seen: they fade out over the collapse, move to their new position
   unseen, and fade back in as the bars grow. On a white card an opacity fade IS
   the white-to-black fade Jason asked for. .is-replaying is set by
   solvairEcReplay() for the length of the collapse. */
.ec-bar-value,
.ec-bar-gap-value,
.ec-year__value {
  transition: opacity 0.3s ease, left 0.22s ease, margin-left 0.22s ease, width 0.22s ease;
}

.energy-calc.is-replaying .ec-bar-value,
.energy-calc.is-replaying .ec-bar-gap-value,
.energy-calc.is-replaying .ec-year__value {
  opacity: 0;
  transition-duration: 0.14s; /* out faster than in — gone before the bar has finished falling */
}

/* ── Entrance: bars grow in when the calculator scrolls into view ────────────
   Left-to-right for the cost bars and gauges, bottom-up for the year columns,
   which rise in sequence. .is-revealed is added by js/energy-calculator.js.
   Gated on scripting, like the chart block above: with JS off nothing would
   ever add the class and every bar would sit at zero. */
@media (scripting: enabled) {
  .energy-calc:not(.is-revealed) .ec-bar,
  .energy-calc:not(.is-revealed) .ec-bar-brace,
  .energy-calc:not(.is-revealed) .ec-gauge__fill { width: 0; }

  /* Figures fade in where they belong rather than riding the bar tip in — same
     behaviour as a change, so the numbers only ever move out of sight. */
  .energy-calc:not(.is-revealed) .ec-bar-value,
  .energy-calc:not(.is-revealed) .ec-bar-gap-value,
  .energy-calc:not(.is-revealed) .ec-year__value { opacity: 0; }

  .energy-calc:not(.is-revealed) .ec-year__bar { height: 0; }

  /* Slower on the way in than on a slider change — this one is a reveal, not feedback. */
  .energy-calc .ec-bar { transition-duration: 1s; }

  .energy-calc .ec-year__bar,
  .energy-calc .ec-gauge__fill { transition-duration: 0.45s; }

  .energy-calc:not(.is-revealed) .ec-bar,
  .energy-calc:not(.is-revealed) .ec-year__bar { transition-duration: 0s; }

  /* Columns take their time — they are a reveal, not slider feedback (Jason, 2026-09-18). */
  .energy-calc .ec-year__bar { transition-duration: 0.7s; }

  .ec-year:nth-child(1) .ec-year__bar { transition-delay: 0ms; }
  .ec-year:nth-child(2) .ec-year__bar { transition-delay: 85ms; }
  .ec-year:nth-child(3) .ec-year__bar { transition-delay: 170ms; }
  .ec-year:nth-child(4) .ec-year__bar { transition-delay: 255ms; }
  .ec-year:nth-child(5) .ec-year__bar { transition-delay: 340ms; }
  .ec-year:nth-child(6) .ec-year__bar { transition-delay: 425ms; }
  .ec-year:nth-child(7) .ec-year__bar { transition-delay: 510ms; }

  /* The collapse half of the replay. It MUST sit below the stagger above: those
     nth-child rules carry the same specificity, so higher up the file their
     delays won — column 7 waited 510ms to start falling, by which time the class
     was already off and it never moved at all. The collapse is one quick
     movement for every bar; the stagger belongs to the grow. */
  .energy-calc.is-replaying .ec-bar,
  .energy-calc.is-replaying .ec-bar-brace { width: 0; }

  .energy-calc.is-replaying .ec-year__bar { height: 0; }

  .energy-calc.is-replaying .ec-bar,
  .energy-calc.is-replaying .ec-bar-brace,
  .energy-calc.is-replaying .ec-year__bar { transition-duration: 0.2s; transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .energy-calc:not(.is-revealed) .ec-bar,
  .energy-calc:not(.is-revealed) .ec-bar-brace,
  .energy-calc:not(.is-revealed) .ec-gauge__fill { width: var(--ec-bar-w, var(--ec-brace-w, var(--ec-gauge-w, 0))); }

  .energy-calc:not(.is-revealed) .ec-year__bar { height: var(--ec-year-h, 0); }

  /* No entrance, so nothing fades — the figures are simply there. */
  .energy-calc:not(.is-revealed) .ec-bar-value,
  .energy-calc:not(.is-revealed) .ec-bar-gap-value,
  .energy-calc:not(.is-revealed) .ec-year__value { opacity: 1; }

  .ec-bar, .ec-bar-value, .ec-year__bar, .ec-gauge__fill, .ec-bar-brace, .ec-bar-gap-value,
  .ec-year__value {
    transition: none;
  }
}

/* ── Pressure comparison (replaces the old PNG under "what makes blowers…") ── */

/* Own copy of the tokens: this figure sits in the page body, OUTSIDE .energy-calc, so the
   variables declared there do not reach it — an undefined var voids the whole background. */
.pressure-compare {
  --ec-red: #db0d20;
  --ec-green: var(--brand-green, #9fc114);
  --ec-ink: #1d232a;
  --ec-line: #e7e7e7;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pressure-compare__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
}

.pressure-compare__label {
  text-align: right;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-grey, #6b7484);
}

.pressure-compare__label b {
  display: block;
  font-size: 15px;
  color: var(--ec-ink);
}

.pressure-compare__track {
  position: relative;
  display: flex;
  align-items: center;
  height: 58px;
  border-radius: 6px;
  background: #f1f3f5;
  overflow: hidden;
}

.pressure-compare__rest {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-grey, #6b7484);
}

.pressure-compare__fill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: width 0.9s cubic-bezier(0.22, 0.75, 0.3, 1);
}

.pressure-compare__fill--ca {
  background: linear-gradient(90deg, #e8202f 0%, var(--ec-red) 100%);
}

.pressure-compare__fill--blower {
  background: linear-gradient(90deg, #adcd25 0%, var(--ec-green) 100%);
}

/* Filled state — added on scroll-in so the bars grow from nothing. */
.pressure-compare.is-revealed .pressure-compare__fill { width: var(--pc-width); }

.pressure-compare__value {
  position: absolute;
  right: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ec-ink);
  font-variant-numeric: tabular-nums;
}

.pressure-compare__fill--ca + .pressure-compare__value { color: #fff; }

.pressure-compare__axis {
  display: flex;
  justify-content: space-between;
  margin-left: 166px;
  padding-top: 6px;
  border-top: 1px solid var(--ec-line);
  font-size: 12px;
  color: var(--text-grey, #6b7484);
  font-variant-numeric: tabular-nums;
}

.pressure-compare__caption {
  margin-left: 166px;
  font-size: 12.5px;
  color: var(--text-grey, #6b7484);
}

@media (max-width: 600px) {
  .pressure-compare__row { grid-template-columns: 1fr; gap: 4px; }
  .pressure-compare__label { text-align: left; }
  .pressure-compare__axis,
  .pressure-compare__caption { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pressure-compare__fill { transition: none; }
}

/* ── What next: three actions in one band ─────────────────────────────────── */

/* Four actions: 4 across on a wide screen, 2 then 1 as it narrows. */
.ec-next__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 26px;
  text-align: left;
}

.ec-next__note {
  font-size: 13px;
  line-height: 1.45;
  color: #fff;
}

.ec-next__note:empty { display: none; }

/* The copy-by-hand fallback (no share sheet, no clipboard) prints the whole URL. */
.ec-next__note--url {
  word-break: break-all;
  color: #dce6f2;
  font-size: 12px;
}

.ec-next__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Sub-header under "What next?" — the heading alone looked lost above the boxes. */
.energy-calc .ec-next .ec-next__lead {
  max-width: 46rem;
  margin: 8px auto 0;
  font-size: 18px;
  line-height: 1.5;
  color: #dce6f2;
}

/* Icon and title on one line (Jason, 2026-09-21): the icon was a 30px green block on its own
   row, louder than the title it belongs to. Now a quiet white marker beside it. */
.ec-next__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ec-next__icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}

/* The print action keeps an inline SVG: a printer glyph is not in the subsetted icon font. */
.ec-next__icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.energy-calc .ec-next__title {
  margin: 0;
  font-size: 20px;
  color: #fff;
}

.energy-calc .ec-next .ec-next__item p {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.55;
  color: #dce6f2;
}

/* ── Share: copy link, plus the channels people actually forward in ────────── */

.ec-share {
  margin-top: auto; /* holds the whole block to the foot of the card, as a lone button would */
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.ec-share .button {
  margin-top: 0; /* the wrapper does the pushing now */
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.ec-share__icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
}

.ec-share__icon svg,
.ec-share__channel svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Copied: the button turns green and keeps the tick for four seconds. */
.ec-next__item .button.is-copied,
.ec-next__item .button.is-copied:hover {
  background: var(--brand-green, #9fc114);
  border-color: var(--brand-green, #9fc114);
  color: var(--ec-ink);
}

.ec-share__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Secondary to the copy button: a text link with its mark, not a second button. */
.ec-share__channel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #dce6f2;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ec-share__channel svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* The WhatsApp mark is a solid glyph, unlike the line icons around it. */
.ec-share__channel .ec-share__brand { fill: currentColor; stroke: none; }

.ec-share__channel:hover,
.ec-share__channel:focus-visible { color: var(--brand-green, #9fc114); }

/* Button sits at the foot of every card, whatever the copy length. */
.ec-next__item .button {
  margin-top: auto;
  align-self: flex-start;
  background: #fff;
  border-color: #fff;
  color: var(--brand-dark-blue, #0c2c61);
  cursor: pointer;
}

.ec-next__item .button:hover,
.ec-next__item .button:focus-visible {
  background: var(--brand-green, #9fc114);
  border-color: var(--brand-green, #9fc114);
  color: var(--ec-ink);
}

/* The "What next?" band is the calculator section's last child and its 120px bottom margin
   does not collapse through the section, which then adds its own 120 — 240 between two
   coloured bands. The section's margin is the one that should count. (The green hand-over
   band that used to follow on /energy-savings-calculator/ was removed 2026-10-07.) */
.energy-calc > .ec-next:last-child { margin-bottom: 0; }

/* /energy-savings-calculator/: the "What next?" band now runs straight into the c2a band
   (Jason 2026-10-07), flush like every other coloured band before a c2a — the blue→charcoal
   colour change is the boundary, not 120px of white. Both margins go: the section's bottom
   and the c2a's sitewide top. Adjacent-sibling only. */
.energy-calc--advanced:has(+ .c2a-container) { margin-bottom: 0; }
.energy-calc--advanced + .c2a-container { margin-top: 0; }

.ec-panel {
  border: 1px solid var(--ec-line);
  border-radius: 10px;
  padding: 14px 20px;
  background: #fff;
}

.ec-panel > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-blue, #1e79b7);
}

.ec-panel[open] > summary { margin-bottom: 14px; }

.ec-panel__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Without this the 460px-wide figures table stretches its flex parent instead of
     scrolling inside .ec-table-wrap, and the page scrolls sideways on a phone. */
  min-width: 0;
}

.ec-panel { min-width: 0; }
.ec-table-wrap { max-width: 100%; }

.ec-panel__body .ec-panel-title { margin-top: 6px; }

.ec-table-wrap { overflow-x: auto; }

.ec-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14px;
}

.ec-table th,
.ec-table td {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--ec-line);
  text-align: left;
}

.ec-table th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-grey, #6b7484);
}

.ec-table th + th,
.ec-table .ec-num { text-align: right; font-variant-numeric: tabular-nums; }
.ec-table .ec-num--save { color: var(--good, #1f6048); font-weight: 600; }
.ec-table tbody tr:last-child td { border-bottom: 0; font-weight: 700; }

.ec-shift {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ec-meter {
  border: 1px solid var(--ec-line);
  border-radius: 10px;
  padding: 12px 16px;
}

.ec-meter__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-grey, #6b7484);
}

.ec-meter__value {
  display: block;
  margin-top: 2px;
  font-family: var(--heading-font, sans-serif);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ec-ink);
}

.ec-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ec-dot--ca     { background: var(--ec-red); }
.ec-dot--blower { background: var(--brand-blue, #1e79b7); }

.ec-shift__clock {
  height: 6px;
  border-radius: 3px;
  background: var(--ec-line);
  overflow: hidden;
}

.ec-shift__clock span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-dark-blue, #0c2c61);
}

.ec-shift__play { align-self: flex-start; }

.ec-gauge {
  display: grid;
  grid-template-columns: 130px 1fr 80px;
  gap: 12px;
  align-items: center;
}

.ec-gauge__track {
  height: 14px;
  border-radius: 7px;
  background: #e6eaf0;
  overflow: hidden;
}

.ec-gauge__fill {
  display: block;
  height: 100%;
  width: var(--ec-gauge-w, 0);
  border-radius: 7px;
  transition: width 0.55s cubic-bezier(0.22, 0.9, 0.32, 1.08);
}

.ec-gauge__fill--ca     { background: linear-gradient(90deg, #e8202f 0%, var(--ec-red) 100%); }
.ec-gauge__fill--blower { background: linear-gradient(90deg, #2a8ccb 0%, var(--brand-blue, #1e79b7) 100%); }

.ec-gauge__value {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ec-ink);
}

@media (max-width: 520px) {
  .ec-gauge { grid-template-columns: 1fr 70px; }
  .ec-gauge .ec-bar-label { grid-column: 1 / -1; }
  .ec-shift { grid-template-columns: 1fr; }
}

.energy-calc .ec-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  color: var(--text-grey, #6b7484);
}

.ec-steps b { color: var(--ec-ink); font-variant-numeric: tabular-nums; }

.ec-steps code {
  background: var(--ec-surface);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.energy-calc .ec-sources {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-grey, #6b7484);
}

/* ── Controls ───────────────────────────────────────────────────────────── */

/* Both calculators group their fields into white .energy-calc__card boxes in a plain column
   (the advanced one moved to cards on 2026-10-01 — Jason: "copy the style of the simpler calc").
   It used to be one grey surface holding every field directly. */
.energy-calc__controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* One bordered card per control group (Installation Size / Operating Schedule / Electricity
   Rate) on the basic calculator, and the chart sits in the same style beside them — see the
   mockup this was built from (Jason, 2026-08-27). */
.energy-calc__card {
  background: #fff;
  border: 1px solid var(--ec-line);
  border-radius: 10px;
  padding: 20px 22px;
}

.energy-calc__card-title {
  display: block;
  margin: 0 0 14px;
  font-family: var(--heading-font, sans-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--ec-ink);
}

.energy-calc__card .energy-calc__field {
  border: 0;
  margin: 0 0 18px;
  padding: 0;
}

.energy-calc__card .energy-calc__field:last-child { margin-bottom: 0; }

.energy-calc__field {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
}

.energy-calc__field:last-of-type { margin-bottom: 16px; }

.energy-calc__legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ec-ink);
}

.energy-calc__output {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--brand-blue, #1e79b7);
}

/* ── Installation size — full-width band above the grid ──────────────────────
   Three tiles that say what each size is FOR, so a visitor can self-select before
   reading a figure (Jason, 2026-09-30). The labels keep .strip-filter__pill because
   js/energy-calculator.js reaches for it with .closest() to toggle .is-active — so
   everything here has to out-specify that pill look (nowrap, radius, navy fill).
   Source order does the rest: this file is enqueued after style.css. */
.ec-size {
  border: 0;
  padding: 0;
  /* A fieldset will not shrink below its content width without this. */
  min-width: 0;
  margin: 0 0 32px;
}

.ec-size__title {
  padding: 0;
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: var(--ec-ink);
}

.ec-size__lead {
  margin: 0 0 20px;
  color: var(--text-grey, #6b7484);
}

.ec-size__options {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* Four tiers since Micro was added (2026-10-01): two by two on tablets, one row on desktop. */
@media (min-width: 768px) {
  .ec-size__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ec-size__options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Rows, not free flow: the spec row sits on the same baseline across all three tiles even
   though the use-case lines wrap to different heights. `position: relative` is what lets the
   label's radio cover the whole tile — see the template. */
.ec-size__tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a long nowrap line may not widen the tile */
  grid-template-rows: 1fr auto;
  gap: 14px;
  padding: 18px 20px 16px;
  border: 1px solid var(--ec-line);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  white-space: normal;
  font-size: 15px;
  font-weight: 400;
  color: var(--ec-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ec-size__tile:hover {
  border-color: var(--brand-dark-blue, #0c2c61);
  color: var(--ec-ink);
}

.ec-size__tile.is-active {
  background: #fff;
  color: var(--ec-ink);
  border-color: var(--brand-dark-blue, #0c2c61);
  box-shadow: inset 0 0 0 1px var(--brand-dark-blue, #0c2c61);
}

/* The label deliberately does NOT carry .energy-calc__preset: that rule draws an outline on
   :focus-within, which fires on mouse clicks, and it is declared later in this file so it won
   on specificity and drew a box round the label on every click (Jason, 2026-09-30). The three
   lines it supplied — position, cursor, and the covering radio — are restated here instead.
   Keyboard focus still gets a ring, on the whole tile. */
.ec-size__choose {
  position: static;
  display: grid;
  gap: 6px;
  align-content: start;
  cursor: pointer;
}

/* inset:0 resolves against .ec-size__tile, so the radio covers the whole card. */
.ec-size__choose input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.ec-size__tile:has(.ec-size__choose input:focus-visible) {
  outline: 2px solid var(--brand-blue, #1e79b7);
  outline-offset: 2px;
}

/* Name and icon on one line — the icon was a full-width block above the name and cost the
   tile ~60px of height for nothing (Jason, 2026-09-30). */
.ec-size__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ec-size__art {
  flex: 0 0 auto;
  color: var(--text-grey, #6b7484);
  transition: color 0.2s;
}

.ec-size__tile.is-active .ec-size__art { color: var(--brand-dark-blue, #0c2c61); }

/* Four objects per tier since 2026-09-30, so the artwork is wider than the single-glyph icon it
   started as. stroke-width is in viewBox units and all three share one viewBox, so the three
   tiles keep an identical line weight. */
.ec-size__art svg {
  display: block;
  width: 150px;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 400px) {
  .ec-size__art svg { width: 120px; }
}

.ec-size__name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

/* No max-width: .ec-size__choose is a grid with the icon row and this description in separate
   rows, so the description can never reach sideways into the icon regardless of its width —
   an earlier 30ch cap here was solving a collision that the grid already prevents, and once the
   copy grew longer (Jason, 2026-09-30) that cap just broke "use-cases." across two lines. Let it
   wrap at the tile's own width instead. */
.ec-size__use {
  line-height: 1.5;
  color: var(--text-grey, #6b7484);
}

/* Length left, the blower it takes on the right — both halves link out. Below 480px there is
   not room for both on one line without the labels breaking mid-phrase, so they stack. */
.ec-size__spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ec-line);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-grey, #6b7484);
}

/* Stacked on phones, and also in the four-across row (1200px+, since Micro was added on
   2026-10-01): at ~310px a tile cannot hold the knife's spec line and "2 x PX2000 · 15.0 kW
   each" side by side, and stacking all four keeps them identical rather than wrapping one. */
@media (max-width: 479px), (min-width: 1200px) {
  .ec-size__spec {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Lifted above the radio that covers the tile, so it takes its own clicks. */
.ec-size__knife {
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: inherit;
}

/* nowrap so the chevron never orphans onto its own line. */
.ec-size__knife-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--brand-dark-blue, #0c2c61);
}

.ec-size__knife-name i {
  font-size: 12px;
  display: inline-block;
  transition: transform 0.2s;
}

/* Pressure + slot gap under the knife length, one line, the same grey as the blower rating. */
.ec-size__knife-spec {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-grey, #6b7484);
}

.ec-size__knife:hover .ec-size__knife-name { text-decoration: underline; }
.ec-size__knife:hover .ec-size__knife-name i { transform: translateX(2px); }

/* Lifted above the radio that covers the tile, so it takes its own clicks. */
.ec-size__blower {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.ec-size__blower-img {
  flex: 0 0 auto;
  width: 56px;
  height: auto;
  mix-blend-mode: multiply;
}

.ec-size__blower-text {
  display: grid;
  gap: 1px;
  line-height: 1.25;
}

.ec-size__blower-name {
  font-weight: 700;
  white-space: nowrap;
  color: var(--brand-dark-blue, #0c2c61);
}

.ec-size__blower-name i {
  font-size: 12px;
  transition: transform 0.2s;
  display: inline-block;
}

.ec-size__blower:hover .ec-size__blower-name { text-decoration: underline; }
.ec-size__blower:hover .ec-size__blower-name i { transform: translateX(2px); }

.ec-size__blower-rating {
  font-size: 13px;
  color: var(--text-grey, #6b7484);
}

@media (prefers-reduced-motion: reduce) {
  .ec-size__tile,
  .ec-size__art,
  .ec-size__blower-name i,
  .ec-size__knife-name i { transition: none; }
}

/* Preset pills. .strip-filter__pill supplies the look; these are <label>s wrapping a
   radio, so the native input is hidden and the label carries the state. */
.energy-calc__presets {
  margin-bottom: 12px;
}

.energy-calc__preset {
  cursor: pointer;
  position: relative;
}

.energy-calc__preset input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

/* Keyboard focus lands on the hidden radio, so the ring has to be drawn on the label. */
.energy-calc__preset:focus-within {
  outline: 2px solid var(--brand-blue, #1e79b7);
  outline-offset: 2px;
}

.energy-calc__preset-summary {
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-grey, #6b7484);
  margin: 0;
}

.energy-calc__preset-summary b { font-style: normal; }

/* One line of guidance under a control (the slot gap). Same voice as the preset summary. */
/* The line under the energy breakdown that hands over to the full calculator. */
.ec-handoff {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ec-line);
  font-size: 14px;
  color: var(--text-grey, #6b7484);
}

.ec-handoff a { font-weight: 600; white-space: nowrap; }

.energy-calc__hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-grey, #6b7484);
}

.energy-calc__range {
  width: 100%;
  accent-color: var(--brand-blue, #1e79b7);
  height: 24px;
}

/* Basic calculator only: hours/days get the dark neutral accent, the tariff rate gets the
   warning-red one, matching the mockup — the advanced calculator's plain .energy-calc__range
   (no modifier) keeps the default blue above. */
.energy-calc__range--dark { accent-color: var(--ec-ink); }
.energy-calc__range--rate { accent-color: var(--ec-red); }

/* The rate card's slider + its live value sit on one row (mockup), unlike hours/days above it,
   which put the value in the legend row instead. */
.energy-calc__card .energy-calc__field:has(.energy-calc__range--rate) {
  display: flex;
  align-items: center;
  gap: 14px;
}

.energy-calc__output--rate {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--ec-red);
}

.energy-calc__tariff {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-grey, #6b7484);
}

.energy-calc__number {
  width: 5.5rem;
  padding: 8px 10px;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ec-ink);
}

.energy-calc__runtime {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--ec-line);
  font-size: 14px;
  color: var(--text-grey, #6b7484);
}

.energy-calc__runtime b {
  color: var(--ec-ink);
  font-variant-numeric: tabular-nums;
}

.energy-calc__runtime-sum {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── Results ────────────────────────────────────────────────────────────── */

.energy-calc__headline {
  text-align: center;
  padding: 24px;
  background: var(--brand-blue, #1e79b7);
  color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
}

.energy-calc__headline-value {
  display: block;
  font-family: var(--heading-font, sans-serif);
  font-size: clamp(38px, 7vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.energy-calc__headline-label {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  opacity: 0.9;
}

.energy-calc__breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 16px;
}

.energy-calc__row {
  border: 1px solid var(--ec-line);
  border-top: 4px solid var(--ec-line);
  border-radius: 8px;
  padding: 14px 16px;
}

.energy-calc__row--ca     { border-top-color: var(--ec-red); }
.energy-calc__row--blower { border-top-color: var(--ec-green); }

.energy-calc__row dt {
  font-size: 13px;
  color: var(--text-grey, #6b7484);
  margin-bottom: 4px;
}

.energy-calc__row dd {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ec-ink);
  line-height: 1.2;
}

.energy-calc__row dd small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-grey, #6b7484);
  font-variant-numeric: tabular-nums;
}

.energy-calc__secondary {
  margin: 0;
  font-size: 15px;
  color: var(--text-grey, #6b7484);
}

.energy-calc__secondary b {
  color: var(--ec-ink);
  font-variant-numeric: tabular-nums;
}

/* Basic calculator only — bigger and centred, per the mockup. Advanced keeps the smaller
   left-aligned default above, next to its own headline/breakdown column. */
.energy-calc:not(.energy-calc--advanced) .energy-calc__secondary {
  font-size: 18px;
  text-align: center;
  color: var(--ec-ink);
}



.energy-calc__key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 14px;
  color: var(--text-grey, #6b7484);
}

.energy-calc__key-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Dots, not bars — matches the mockup's legend and reads better at this size. */
.energy-calc__key-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.energy-calc__key-item--ca     { color: var(--ec-red); }
.energy-calc__key-item--blower { color: var(--brand-blue, #1e79b7); }

.energy-calc__key-item--saving {
  color: var(--ec-green);
}

/* ── Contact CTA ────────────────────────────────────────────────────────────
   The band this button used to sit in is gone (2026-09-21) — both calculators now
   end with the .ec-next band above. The class stays because js/energy-calculator.js
   finds the contact link by it to write data-calc-summary onto. */

.energy-calc__cta-button { flex: 0 0 auto; }

/* ── Method note ────────────────────────────────────────────────────────── */

.energy-calc__method {
  margin: 32px auto 0;
  max-width: 56rem;
  padding-top: 20px;
  border-top: 1px solid var(--ec-line);
  font-size: 14px;
  font-style: italic; /* Jason, 2026-09-17 */
  line-height: 1.65;
  color: var(--text-grey, #6b7484);
}

.energy-calc__method b { color: var(--ec-ink); }

/* ── Advanced calculator ────────────────────────────────────────────────────
   Reuses .energy-calc__controls / __results / __headline / __breakdown from the
   simple one above, so the two read as one system. Only what differs is here:
   no chart, a mode switch, and the spec/range panels. */

.energy-calc--advanced .energy-calc__grid--advanced {
  grid-template-columns: 1fr;
  grid-template-areas: none;
}

@media (min-width: 992px) {
  .energy-calc--advanced .energy-calc__grid--advanced {
    grid-template-columns: 340px 1fr;
    grid-template-areas: "controls results";
  }
}

/* The mode switch is JS-driven (it toggles [hidden] on the panels), so without scripting it
   would be a control that visibly does nothing. Hide it, and the section degrades to the air
   knife route alone — which is the right half to keep, because PHP server-renders it in full.
   The usage route carries `hidden` in the markup and computes on load, so it stays away. */
.eca-modes { display: none; }

@media (scripting: enabled) {
  .eca-modes {
    display: block;
    border: 0;
    margin: 0 0 28px;
    padding: 0;
  }
}

.eca-modes__pills { justify-content: center; }

/* .strip-filter is a horizontally scrolling pill track, which suits /news/ with its 11 topics
   but not a two-option switch: at 390px the second option scrolled out of sight and looked
   like it wasn't there. Swap in shorter labels rather than let it wrap — a wrapped two-line
   track loses the 999px pill shape the rest of the site uses. */
.eca-modes__short { display: none; }

@media (max-width: 767px) {
  .eca-modes__long { display: none; }
  .eca-modes__short { display: inline; }
}

.eca-panel[hidden] { display: none; }

.energy-calc__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  font: inherit;
  color: var(--ec-ink);
  background: #fff;
}

.energy-calc__number--wide { width: 8rem; }

/* The advanced results column stacked its boxes with no space between them — the bars card
   sat flush against the build-up (Jason, 2026-09-21). Same 16px rhythm as the simple
   calculator's .energy-calc__result; the boxes themselves carry no margin, so it cannot
   double up. Applies to both routes. */
.energy-calc--advanced .energy-calc__results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* The standard Air Knife spec the advanced calculator is locked to (140 mbar, 1.4mm slot),
   stated under the knife sliders rather than offered as options (Jason, 2026-10-01). */
.energy-calc__spec {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ec-line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-grey, #6b7484);
}
.energy-calc__spec b { color: var(--ec-ink); }

/* The sized-blower readout — the answer people came for, so it leads the column. */
.eca-spec {
  border: 1px solid var(--ec-line);
  border-left: 4px solid var(--brand-green, #9fc114);
  border-radius: 10px;
  padding: 18px 22px;
  background: var(--ec-surface);
}

.eca-spec p { margin: 0 0 6px; }
.eca-spec p:last-child { margin-bottom: 0; }

/* "Powered by 4 × PX2000  60 kW" heads the box (Jason, 2026-09-21): the blower is the answer,
   the duty underneath is how it was reached. */
.eca-spec__blower {
  font-family: var(--heading-font, sans-serif);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  color: var(--text-grey, #6b7484);
}
.eca-spec p.eca-spec__blower { margin-bottom: 8px; }
.eca-spec__blower b { color: var(--ec-ink); }
.eca-spec__blower span { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The range page's kW / flow badges (.kw_rating / .mbar_rating, sitewide in style.css) at a
   fraction of the size, in the text flow instead of pinned to the photograph. */
.eca-spec__badges {
  display: flex;
  align-items: center;
  gap: 6px;
}
.eca-spec p.eca-spec__badges { margin-bottom: 12px; }

.eca-spec__badges .kw_rating,
.eca-spec__badges .mbar_rating {
  width: auto;
  min-width: 46px;
  height: auto;
  margin: 0;
  padding: 6px 8px 4px;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.5px;
  border: 0;
}

.eca-spec__badges .kw_rating > span:last-child,
.eca-spec__badges .mbar_rating > span:last-child {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.1;
}

/* The figure is a span so the script can swap it; only the unit line under it is the small one. */
.eca-spec__badges .eca-spec__figure {
  display: inline;
  opacity: 1;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.eca-spec__each { font-size: 13px; color: var(--text-grey, #6b7484); }
.eca-spec__each[hidden] { display: none; }

.eca-spec__lead { font-size: 15px; color: var(--text-grey, #6b7484); }
.eca-spec__lead b { color: var(--ec-ink); font-variant-numeric: tabular-nums; }

/* Text left, blower photograph right. One column on phones, where the photograph goes underneath. */
.eca-spec--split {
  display: grid;
  gap: 12px 28px;
  align-items: center;
}

@media (min-width: 768px) {
  .eca-spec--split { grid-template-columns: 1fr 170px; }
}

/* Just the photograph and a link to the model, in a white tile inside the box. */
.eca-blower {
  display: block;
  max-width: 170px;
  padding: 10px 12px;
  border: 1px solid var(--ec-line);
  border-radius: 10px;
  background: #fff;
  text-align: center;
  text-decoration: none;
}

/* A FIXED 3:2 frame with the photograph contained in it. The seven PX photographs run from
   450x289 to 450x330, so at `height: auto` the tile — and the "View the…" link under it —
   moved up and down every time the sizing changed model (Jason, 2026-09-21). */
.eca-blower__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s;
}

.eca-blower:hover .eca-blower__img,
.eca-blower:focus-visible .eca-blower__img { transform: scale(1.04); }

.eca-blower__more {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--link-blue, #1e79b7);
}

@media (prefers-reduced-motion: reduce) {
  .eca-blower__img { transition: none; }
}

.eca-spec__basis {
  font-size: 13px;
  color: var(--text-grey, #6b7484);
  font-variant-numeric: tabular-nums;
}

.eca-spec__bespoke {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ec-line);
  font-size: 13px;
  color: var(--ec-ink);
}

.eca-spec__bespoke[hidden] { display: none; }

/* ── Route A: the same result column as route B, drawn as a range ───────────
   The old single-cost headline and .eca-range panel are gone (2026-09-21) —
   route A now mirrors route B's hero / bars / build-up / details, with every
   blower-side figure spanning the indicative ratio. Only the range-specific
   pieces are here; everything else reuses the .ec-* rules above. */

/* A range never fits the hero's 56px display size — six digits twice plus a dash, which
   wrapped and left the dash hanging at the end of the first line. */
/* Stacked: the range gets the full width on ONE line, the three stats sit in a row under a
   hairline. Side by side (the single-figure layout) the headline column was squeezed until
   the range and its basis line each wrapped to three lines. "from" left the figures for the
   labels ("minimum saved…") so the numbers are the same size and shape as route B's. */
.energy-calc .ec-hero--range {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
}

.energy-calc .ec-hero__value--range {
  font-size: clamp(26px, 3.4vw, 44px);
  white-space: nowrap;
}

.energy-calc .ec-hero--range .ec-hero__stats {
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  gap: 12px 40px;
}

.energy-calc .ec-hero--range .ec-hero__stats b { font-size: clamp(22px, 2vw, 28px); }

@media (max-width: 480px) {
  .energy-calc .ec-hero__value--range { white-space: normal; text-wrap: balance; }
}

/* The upper end of the range: the same blue and green, carried on past the solid bar.
   Translucent rather than a second flat tint so it reads as "and possibly to here". */
.ec-bar--range { background: rgba(42, 140, 203, 0.32); }
.ec-year__bar--range { background: rgba(159, 193, 20, 0.3); }

/* Route A stacks two bars per year column, so they leave the flow and the stack holds
   the height the single bar used to take from .ec-year directly. */
.ec-year__stack {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 120px;
  min-height: 0;
}

.ec-year__stack .ec-year__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
}

.energy-calc .ec-years__range-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-grey, #6b7484);
}

.eca-range__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-grey, #6b7484);
}

.eca-range__note b { color: var(--ec-ink); }

/* Two cost cards side by side stop being readable once the £ figure and the kW subtitle have
   to wrap; below 480px they stack instead. */
@media (max-width: 479px) {
  .energy-calc__breakdown { grid-template-columns: 1fr; }
}



/* Range-guard note. Appears only when a typed value was outside the field's own
   min/max and got written back — see solvairGuardNumberFields() in
   js/energy-calculator.js. role="status" so it is announced, not just seen. */
.energy-calc__clamp-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #8a5300;
}

.energy-calc__clamp-note:empty {
  display: none;
}

/* ── Print sheet ────────────────────────────────────────────────────────────
   A separate branded A4 layout (template-parts/energy-calculator.php, .ecp),
   shown only when the calculator's Print button sets html.ec-printing — see
   printSheet() in js/energy-calculator.js. Never visible on screen. */

.ecp { display: none; }

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  /* The sheet has been moved to <body>; everything else goes. */
  html.ec-printing body > *:not(.ecp) { display: none !important; }

  html.ec-printing,
  html.ec-printing body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.ec-printing .ecp {
    display: block;
    width: 100%;
    color: var(--ec-ink);
    font-size: 10.5pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .ecp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #0c2c61;
    border-radius: 6px;
  }

  .ecp__logo { width: 130px; height: auto; }

  .ecp__head-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #fff;
  }

  .ecp__kicker {
    font-size: 8.5pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
  }

  .ecp__date { font-size: 11pt; font-weight: 600; }
  .ecp__site { margin-top: 2px; font-size: 9pt; opacity: 0.85; }

  html.ec-printing .ecp .ecp__title {
    margin: 14px 0 4px;
    font-family: var(--heading-font, sans-serif);
    font-size: 19pt;
    font-weight: 300;
    line-height: 1.2;
    color: #0c2c61;
  }

  html.ec-printing .ecp .ecp__intro { margin: 0 0 12px; color: #4a5563; }

  html.ec-printing .ecp .ecp__h2 {
    margin: 0 0 8px;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0c2c61;
  }

  .ecp__figures {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 10px;
    margin-bottom: 16px;
    break-inside: avoid;
  }

  .ecp__figure {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border: 1px solid #dde3ea;
    border-top: 4px solid var(--ec-line);
    border-radius: 6px;
  }

  .ecp__figure--ca     { border-top-color: var(--ec-red); }
  .ecp__figure--blower { border-top-color: var(--brand-blue, #1e79b7); }

  .ecp__figure--saving {
    background: #0c2c61;
    border-color: #0c2c61;
    border-top-color: var(--ec-green);
    color: #fff;
  }

  .ecp__figure-label { font-size: 9pt; color: #5d6875; }
  .ecp__figure--saving .ecp__figure-label,
  .ecp__figure--saving .ecp__figure-note { color: #d5deea; }

  .ecp__figure-value {
    margin: 2px 0;
    font-family: var(--heading-font, sans-serif);
    font-size: 22pt;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .ecp__figure--saving .ecp__figure-value { color: var(--ec-green); }

  .ecp__figure-note { font-size: 8.5pt; color: #5d6875; }

  /* ── The three copied blocks ──────────────────────────────────────────────
     Clones of what is on screen, so they inherit the screen styles; these
     rules size them for A4 and undo the entrance animation, which would
     otherwise print every bar at zero. */

  /* 20px between blocks (Jason, 2026-09-21 — "a bit more spacing"); page 1 has the room now
     that "Your figures" starts page 2. */
  .ecp__hero,
  .ecp__panel { break-inside: avoid; margin-bottom: 20px; }

  .ecp__panel {
    padding: 14px 16px;
    border: 1px solid #dde3ea;
    border-radius: 6px;
  }

  /* The clone is itself a bordered, padded card, so inside .ecp__panel it printed as a box in a
     box and — with the screen's row heights — pushed "Your figures" onto a second sheet, making
     the whole thing three pages instead of two (found 2026-09-21 by printing it to PDF). The
     panel keeps the frame; the card inside loses its own, and the rows tighten to paper sizes. */
  .ecp__panel .energy-calc__card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .ecp .ec-bar-row { min-height: 0; }
  .ecp .ec-bars__key { margin-top: 0; }

  .ecp .ec-bar,
  .ecp .ec-bar-brace,
  .ecp .ec-gauge__fill { width: var(--ec-bar-w, var(--ec-brace-w, 0)) !important; transition: none !important; }

  .ecp .ec-bar-brace { width: var(--ec-brace-w, 0) !important; }

  /* Paper has no entrance and no replay: whatever state the screen was mid-fade in,
     every figure prints solid. */
  .ecp .ec-bar-value,
  .ecp .ec-bar-gap-value,
  .ecp .ec-year__value { opacity: 1 !important; transition: none !important; }
  .ecp .ec-bar-value { left: var(--ec-bar-w, 0) !important; transition: none !important; }
  .ecp .ec-year__bar { height: var(--ec-year-h, 0) !important; transition: none !important; }

  .ecp .ec-hero { border-radius: 6px; padding: 12px 18px; gap: 10px 26px; }
  .ecp .ec-hero__value { font-size: 30pt; }
  .ecp .ec-hero__stats { padding-top: 14px; gap: 10px 26px; }
  .ecp .ec-hero__stats b { font-size: 17pt; }
  .ecp .ec-hero__stats span,
  .ecp .ec-hero__basis { font-size: 8.5pt; }

  .ecp .ec-bars,
  .ecp .ec-years { gap: 8px; }

  .ecp .ec-bar-track { height: 34px; }
  .ecp .ec-bar-value { font-size: 12pt; }
  .ecp .ec-years__cols { height: 96px; }
  .ecp .ec-year__value { font-size: 8pt; }
  .ecp .ec-year__label { font-size: 8pt; }
  .ecp .ec-years__note { font-size: 8pt; padding-top: 8px; }
  .ecp .ec-years__badge { width: 38px; height: 38px; }
  .ecp .energy-calc__key { font-size: 8.5pt; padding-top: 8px; }

  /* min-width:0 or a nowrap value inside the copied blocks widens a column past the page. */
  .ecp__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 26px;
    break-inside: avoid;
    /* Page 2 starts HERE, deliberately: figures, method, the two QR codes and the contact
       strip make one sheet. Left to flow, the table fell onto page 2 by itself and the QR
       codes took a third. */
    break-before: page;
    padding-top: 6mm;
  }

  .ecp__cols > * { min-width: 0; }
  .ecp, .ecp__panel, .ecp__hero { max-width: 100%; }

  .ecp__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
  }

  .ecp__table th,
  .ecp__table td {
    padding: 4px 0;
    border-bottom: 1px solid #e5e9ee;
    text-align: left;
    vertical-align: top;
  }

  .ecp__table th { width: 40%; font-weight: 600; color: #5d6875; }
  .ecp__table td { font-variant-numeric: tabular-nums; }

  html.ec-printing .ecp .ecp__method p:not(.ecp__h2) { margin: 0 0 6px; font-size: 9pt; color: #4a5563; }

  .ecp__foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 20px;
    border-radius: 6px;
    background: #eef2f7;
    border-left: 5px solid var(--ec-green);
    break-inside: avoid;
  }

  .ecp__foot-lead {
    font-size: 8.5pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0c2c61;
    font-weight: 700;
  }

  .ecp__foot-contact { font-size: 12pt; color: #0c2c61; }
  .ecp__foot-address { font-size: 8.5pt; color: #5d6875; }

  /* ── Page 2: the two QR codes ─────────────────────────────────────────── */

  .ecp__page2 { break-inside: avoid; margin-bottom: 26px; }

  .ecp__qrs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 16px;
  }

  .ecp__qr {
    padding: 18px 20px 20px;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    break-inside: avoid;
  }

  .ecp__qr-code svg {
    width: 44mm;
    height: 44mm;
    display: block;
    margin-bottom: 12px;
  }

  html.ec-printing .ecp .ecp__qr-title {
    margin: 0 0 4px;
    font-family: var(--heading-font, sans-serif);
    font-size: 13pt;
    font-weight: 700;
    color: #0c2c61;
  }

  html.ec-printing .ecp .ecp__qr-note {
    margin: 0 0 8px;
    font-size: 9pt;
    color: #4a5563;
  }

  html.ec-printing .ecp .ecp__qr-url {
    margin: 0;
    font-size: 8pt;
    color: #5d6875;
    word-break: break-all;
  }
}