/* Instant quote tool - ported from Dorset Rewires' quote.css (the token names
   match the shared kit palette, so the calculator drops into this site's
   design system unchanged). Handover-pack and PWA styles were NOT ported -
   those are DR-only features. */

.calc { padding: 56px 0 96px; }
.calc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; margin-top: 34px; }

/* Section dividers: the page serves two different visitors - quick single-item
   jobs (EICR, fuse board) and the full room-by-room builder. */
.calc-section-divider { margin: 0 0 18px; }
.calc-section-divider h2 {
  margin: 0 0 4px; font-size: 15px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-navy);
  display: flex; align-items: center; gap: 12px;
}
.calc-section-divider h2::after { content: ""; flex: 1; height: 2px; background: var(--c-border); border-radius: 1px; }
.calc-section-divider p { margin: 0; color: var(--c-text-mute); font-size: 14px; }
.calc-section-divider.calc-section-full { margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--c-border); }
.calc-section-divider.calc-section-full h2::after { background: var(--c-amber-line); }

.calc-block {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 28px 28px 18px; margin-bottom: 22px;
}
.calc-block-head { margin-bottom: 18px; }
.calc-block-head h2 { margin: 0 0 4px; font-size: 22px; color: var(--c-navy); font-weight: 800; letter-spacing: -0.015em; }
.calc-block-head p { margin: 0; color: var(--c-text-mute); font-size: 14.5px; }
.calc-block-head-collapsible { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.calc-block-head-collapsible .calc-block-head-text { flex: 1; }
.calc-block-minimise {
  flex-shrink: 0; background: transparent; border: 1px solid transparent; cursor: pointer;
  color: var(--c-text-mute); font-size: 20px; padding: 4px 12px; line-height: 1; border-radius: var(--r-sm);
  font-family: inherit;
}
.calc-block-minimise:hover { color: var(--c-navy); background: var(--c-bg-soft); border-color: var(--c-border); }
.calc-block.is-collapsed .calc-rows { display: none; }
.calc-block.is-collapsed .calc-block-head { margin-bottom: 0; }
.eicr-result { margin: 6px 0 2px; line-height: 1.5; font-size: 14.5px; color: var(--c-text-soft); }
.eicr-commercial { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; cursor: pointer; font-size: 14px; }
.eicr-commercial input { width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto; }
.occupied-toggle-row { font-size: 15px; }
.occupied-toggle-row strong { color: var(--c-navy); }
.cu-photo-hint { margin: 4px 0 8px; color: var(--c-text-mute); font-size: 13.5px; }

.calc-rows { display: grid; gap: 12px; }
.calc-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--c-border);
}
.calc-row:first-child { border-top: 0; padding-top: 6px; }
.calc-row-label strong { display: block; font-size: 15.5px; color: var(--c-navy); font-weight: 700; }
.calc-row-label span { display: block; color: var(--c-text-mute); font-size: 13.5px; margin-top: 2px; }
.calc-row-size { display: block; margin-top: 8px; max-width: 280px; padding: 6px 8px; font-size: 13.5px; color: var(--c-navy); background: #fff; border: 1px solid var(--c-border-2); border-radius: var(--r-sm); font-family: inherit; }
.calc-row-price { font-weight: 700; color: var(--c-green); font-size: 15px; white-space: nowrap; }
.calc-row-controls { display: inline-flex; align-items: center; gap: 6px; }
.calc-row-step-button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--c-border-2); background: #fff; cursor: pointer;
  font-size: 18px; font-weight: 700; color: var(--c-navy); font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s, border-color 0.1s;
}
.calc-row-step-button:hover { background: var(--c-amber-soft); border-color: var(--c-amber); }
.calc-row-quantity {
  width: 50px; text-align: center; padding: 6px 0;
  border: 1px solid var(--c-border-2); border-radius: var(--r-sm);
  font-size: 16px; font-weight: 700; color: var(--c-navy); font-family: inherit;
  background: #fff;
  -moz-appearance: textfield;
}
.calc-row-quantity::-webkit-outer-spin-button, .calc-row-quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The walk-round TIP panel used to live here. Item 34.4 (Pete, 2026-09-04)
   demoted it to one line of helper text under the Rooms heading, and 34.6 said
   one amber panel maximum - this was the second. Rules deleted with it. */

/* Info (?) button on room items */
.room-item-label-row { display: flex; align-items: center; gap: 6px; }
.room-item-label-row strong { flex: 1; }
.room-item-info-button {
  flex: 0 0 22px; width: 22px; height: 22px;
  background: var(--c-bg-soft); color: var(--c-text-mute);
  border: 1px solid var(--c-border); border-radius: 50%;
  font-size: 12px; font-weight: 800; font-family: inherit;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1;
}
.room-item-info-button:hover { background: var(--c-amber-soft); color: var(--c-navy); border-color: var(--c-amber); }
.room-item-info-button-active { background: var(--c-amber); color: var(--c-navy); border-color: var(--c-amber); }
.room-item-description {
  display: block; margin-top: 6px; padding: 8px 10px;
  background: var(--c-amber-soft); border: 1px solid var(--c-amber-line);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--c-text); line-height: 1.45;
}
.room-item-description[hidden] { display: none; }

/* Rooms */
.room-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; }
.quick-add-button {
  position: relative;
  background: var(--c-bg-soft); color: var(--c-navy);
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.quick-add-button:hover { background: var(--c-amber-soft); border-color: var(--c-amber); }
.quick-add-blank { background: var(--c-amber); color: var(--c-navy); border-color: var(--c-amber); border-style: solid; font-weight: 700; }
.quick-add-blank:hover { background: var(--c-amber-2); border-color: var(--c-amber-2); }
.quick-add-count {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--c-amber); color: var(--c-navy);
  border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1;
}
.quick-add-remove {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; width: 18px; height: 18px;
  background: #C13B3B; color: #fff;
  border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1;
  cursor: pointer;
}
.quick-add-remove:hover { background: #A93226; }

.rooms-list { display: grid; gap: 14px; }
.room {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.room-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; cursor: pointer; }
.room-head .room-name { cursor: text; }
.room-name {
  flex: 1; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 16px; font-weight: 700; color: var(--c-navy); background: transparent; font-family: inherit;
}
.room-name:focus { outline: 2px solid var(--c-amber); border-color: var(--c-amber); background: #fff; }
.room-subtotal { font-weight: 700; color: var(--c-green); font-size: 15px; white-space: nowrap; }
.room-remove, .room-minimise {
  background: transparent; border: 1px solid transparent; cursor: pointer;
  color: var(--c-text-mute); font-family: inherit;
  font-size: 18px; padding: 4px 10px; line-height: 1; border-radius: var(--r-sm);
}
.room-minimise:hover { color: var(--c-navy); background: var(--c-bg-soft); border-color: var(--c-border); }
.room-remove:hover { color: #C13B3B; background: #FBECEC; border-color: #F4C9C9; }
.room.room-collapsed .room-items { display: none; }
.room.room-collapsed { padding-bottom: 16px; }
.room.room-collapsed .room-head { margin-bottom: 0; }

.room-done-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.room-done {
  background: var(--c-navy); color: #fff;
  border: 1px solid var(--c-navy); border-radius: var(--r-pill);
  padding: 9px 22px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: opacity 0.1s;
}
.room-done:hover { opacity: 0.88; }

/* Unified room item rows */
.room-items { display: grid; gap: 10px; }
.room-item {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-sm);
  padding: 14px 16px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
}
.room-item-label strong {
  display: block; color: var(--c-navy); font-weight: 700; font-size: 15px;
  letter-spacing: -0.005em;
}
.room-item-controls { display: inline-flex; align-items: center; gap: 8px; }
.room-item-step-button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--c-border-2); background: #fff; cursor: pointer;
  font-size: 18px; font-weight: 700; color: var(--c-navy); font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s, border-color 0.1s;
}
.room-item-step-button:hover { background: var(--c-amber-soft); border-color: var(--c-amber); }
.room-item-quantity {
  width: 56px; text-align: center; padding: 6px 0;
  border: 1px solid var(--c-border-2); border-radius: var(--r-sm);
  font-size: 16px; font-weight: 700; color: var(--c-navy); font-family: inherit;
  background: #fff;
  -moz-appearance: textfield;
}
.room-item-quantity::-webkit-outer-spin-button, .room-item-quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.room-item-quantity:focus { outline: 2px solid var(--c-amber); border-color: var(--c-amber); }

/* Extras & upgrades collapsible section */
.room-extras { margin-top: 18px; }
.room-extras-toggle {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px dashed var(--c-amber);
  border-radius: var(--r-sm); padding: 14px 18px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.room-extras-toggle:hover { background: var(--c-amber-soft); }
.room-extras-toggle-icon {
  flex: 0 0 32px; width: 32px; height: 32px;
  background: var(--c-amber); color: var(--c-navy);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px;
}
.room-extras-toggle-text { flex: 1; display: grid; }
.room-extras-toggle-text strong { color: var(--c-navy); font-size: 15.5px; font-weight: 700; }
.room-extras-toggle-text small { color: var(--c-text-mute); font-size: 12.5px; margin-top: 2px; }
.room-extras-toggle-arrow { color: var(--c-amber); font-size: 14px; transition: transform 0.2s; }
.room.room-extras-open .room-extras-toggle-arrow { transform: rotate(90deg); }
.room.room-extras-open .room-extras-toggle {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-style: solid; border-bottom-color: transparent;
}
.room-extras-content {
  display: grid; gap: 10px;
  border: 1.5px solid var(--c-amber); border-top: 0;
  border-bottom-left-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm);
  padding: 14px 14px 16px;
  background: #fff;
}
.room-extras-content[hidden] { display: none; }

.room-led-explainer {
  margin: 4px 0 0; padding: 12px 14px;
  background: var(--c-bg-soft); border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--c-text-soft); line-height: 1.45;
}
.room-led-explainer strong {
  display: block; color: var(--c-navy); font-size: 14px; font-weight: 700; margin-bottom: 2px;
}
.room-led-explainer small { color: var(--c-text-mute); font-size: 12.5px; }

.room-item-extra-input {
  margin: -4px 0 0 16px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  background: var(--c-amber-soft); border: 1px dashed var(--c-amber-line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.room-item-extra-label { font-size: 13.5px; font-weight: 600; color: var(--c-text); }

@media (max-width: 720px) {
  .room-item { grid-template-columns: 1fr; gap: 12px; }
  .room-item-controls { justify-self: end; }
}

.calc-disclaimer {
  font-size: 13px; color: var(--c-text-mute); margin-top: 22px;
  padding: 14px 18px; background: var(--c-amber-soft); border: 1px solid var(--c-amber-line);
  border-radius: var(--r-md);
}

/* Sticky summary */
.calc-summary { position: sticky; top: 88px; display: grid; gap: 18px; }
.summary-card {
  background: var(--c-navy); color: #fff;
  border-radius: var(--r-lg);
  padding: 24px; box-shadow: 0 18px 40px rgba(11,39,64,0.15);
}
.summary-head { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 16px; }
.summary-eyebrow { font-size: 11px; letter-spacing: 0.1em; color: var(--c-amber); font-weight: 700; text-transform: uppercase; }
.summary-total { font-size: 44px; font-weight: 800; letter-spacing: -0.025em; color: #fff; line-height: 1.05; margin: 4px 0 2px; }
.summary-sub { font-size: 13px; color: #B6C2D6; }
.summary-line-list { display: grid; gap: 6px; min-height: 32px; font-size: 13.5px; color: #C6CFDE; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.summary-line { display: flex; justify-content: space-between; gap: 10px; }
.summary-line strong { color: #fff; font-weight: 600; }
.summary-empty { color: #7E8EA8; font-style: italic; }
.summary-cta { margin: 14px 0 12px; padding: 16px; font-size: 16px; width: 100%; }
.btn-block { display: flex; }
.btn-ghost-cta {
  display: flex; justify-content: center; align-items: center;
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--r-sm);
  padding: 12px 16px; color: #fff; font-weight: 600; text-decoration: none;
  font-size: 14.5px;
}
.btn-ghost-cta:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.summary-foot { font-size: 12px; color: #B6C2D6; margin: 14px 0 0; text-align: center; line-height: 1.4; }
.summary-reset { display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 10px; padding: 11px 16px; background: rgba(192,57,43,0.10); border: 1px solid rgba(192,57,43,0.70); border-radius: var(--r-sm); color: #FF8A7A; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.summary-reset:hover { background: rgba(192,57,43,0.22); border-color: #C0392B; color: #FF9D8F; }
.summary-reset[hidden] { display: none; }

.summary-minimum-note {
  background: var(--c-amber-soft);
  border: 1px solid var(--c-amber-line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text);
}
.summary-minimum-note[hidden] { display: none; }
.consumer-unit-prompt {
  background: var(--c-amber-soft);
  border: 1px solid var(--c-amber-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 14px 0 0;
}
.consumer-unit-prompt[hidden] { display: none; }
.consumer-unit-prompt p { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--c-text); }
.consumer-unit-prompt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.consumer-unit-prompt-add {
  background: var(--c-amber); color: var(--c-navy); border: none; font-family: inherit;
  border-radius: var(--r-sm); padding: 9px 14px; font-weight: 800; font-size: 14px; cursor: pointer;
}
.consumer-unit-prompt-dismiss {
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-soft); font-family: inherit;
  border-radius: var(--r-sm); padding: 9px 14px; font-size: 14px; cursor: pointer;
}

.rate-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 22px 24px;
}
.rate-card h3 { margin: 0 0 12px; font-size: 16px; color: var(--c-navy); font-weight: 700; }
.rate-card table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rate-card td { padding: 6px 0; color: var(--c-text-soft); }
.rate-card td:last-child { text-align: right; color: var(--c-navy); font-weight: 700; }
.rate-card tr { border-top: 1px solid var(--c-border); }
.rate-card tr:first-child { border-top: 0; }
.rate-card-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--c-text-soft); }

@media (max-width: 980px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-summary { position: static; }
}
@media (max-width: 720px) {
  .calc-row { grid-template-columns: 1fr; }
  .calc-row-price { justify-self: start; }
  .calc-row-controls { justify-self: start; }
  .summary-total { font-size: 36px; }
}

/* Send-my-quote modal */
.quote-modal[hidden] { display: none; }
.quote-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.quote-modal-backdrop { position: absolute; inset: 0; background: rgba(11,39,64,0.55); }
.quote-modal-card { position: relative; background: #fff; border-radius: 14px; max-width: 430px; width: 100%; padding: 26px 24px 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); max-height: 92vh; overflow: auto; }
.quote-modal-card h2 { margin: 0 0 4px; color: var(--c-navy); font-size: 20px; }
.quote-modal-sub { margin: 0 0 16px; color: var(--c-text-soft); font-size: 13.5px; }
.quote-modal-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--c-text-faint); cursor: pointer; font-family: inherit; }
#quoteForm label { display: block; font-size: 13px; font-weight: 600; color: var(--c-navy); margin-bottom: 12px; }
#quoteForm input, #quoteForm textarea { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; border: 1px solid var(--c-border-2); border-radius: 8px; font: inherit; font-size: 16px; font-weight: 400; }
#quoteForm input:focus, #quoteForm textarea:focus { outline: 2px solid var(--c-amber); border-color: var(--c-amber); }
.qm-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }
.quote-modal-status { font-size: 13.5px; margin: 2px 0 12px; min-height: 18px; }
.quote-modal-status.is-error { color: #C0392B; }
.quote-modal-status.is-ok { color: var(--c-green); font-weight: 600; }

/* Branded dialog (native popups are banned product-wide) */
.quote-dialog { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.quote-dialog-backdrop { position: absolute; inset: 0; background: rgba(11,39,64,0.55); }
.quote-dialog-card { position: relative; background: #fff; border-radius: 14px; max-width: 380px; width: 100%; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.quote-dialog-card h3 { margin: 0 0 8px; color: var(--c-navy); font-size: 18px; }
.quote-dialog-card p { margin: 0 0 18px; color: var(--c-text-soft); font-size: 14.5px; line-height: 1.5; }
.quote-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.quote-dialog-cancel { background: transparent; border: 1px solid var(--c-border-2); color: var(--c-text-soft); border-radius: var(--r-sm); padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.quote-dialog-confirm { background: var(--c-navy); border: 1px solid var(--c-navy); color: #fff; border-radius: var(--r-sm); padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.quote-dialog-confirm.is-danger { background: #C0392B; border-color: #C0392B; }

/* =====================================================================
   INTENT-FIRST LAYOUT (2026-09-04). Pete's verdict on the old /quote was
   "confusing as hell and way too big" - 14.1 phone-screens, with the service
   cards saying at the top what the calculators said again further down. The
   page now opens with one question, and the CARD IS THE ENTRY: tapping it
   unfolds its own calculator inside it. Everything else on the page starts
   collapsed behind a labelled button.

   Every hidden panel below is hidden by the HTML `hidden` attribute, and each
   one that gets a display value here restores that with a [hidden] rule - a
   `display: grid` on an element beats the user-agent `[hidden]{display:none}`
   and would leave a "collapsed" panel fully open.
   ===================================================================== */

/* A GRID ITEM DOES NOT SHRINK BY DEFAULT. Its min-width is auto, so it grows
   to its content's minimum instead of to the track. Found 2026-09-04 while
   driving the relocated room builder: with one Kitchen added, .calc-main
   measured 450px inside a 375px column and the whole page panned 95px
   sideways. Nothing had ever caught it because a room card only exists after
   somebody taps Quick add, and the render gate had only ever measured pages
   as they load. Both grid children get min-width: 0 so the track wins. */
.calc-grid > * { min-width: 0; }
/* Same trap one level down, and this is the piece that actually did the
   pushing: the room-name INPUT is a flex item whose intrinsic minimum is its
   default 20-character size, about 177px, so a .room refused to be narrower
   than roughly 350px however small the screen got. */
.rooms-list > .room, .room-items > .room-item, .room-item > * { min-width: 0; }
.room-name { min-width: 0; width: 100%; }

.page-head-tight { padding-top: 28px; padding-bottom: 24px; }
.page-head-tight h1 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 8px; }
.page-head-tight .breadcrumb { margin-bottom: 8px; }
.page-head-tight .lede { margin-bottom: 0; max-width: 640px; font-size: 16px; }

.calc { padding: 26px 0 34px; }
.calc .section-h { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 6px; }
.calc .section-sub { margin-bottom: 20px; font-size: 15.5px; }
.calc-grid { margin-top: 0; }

.intent-list { display: grid; gap: 14px; }
.intent-card {
  background: #fff; border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.intent-card.intent-card-open {
  border-color: var(--c-amber);
  box-shadow: 0 10px 26px rgba(18,58,94,0.10);
}
.intent-choice {
  width: 100%; display: flex; align-items: center; gap: 18px;
  background: transparent; border: 0; border-radius: var(--r-lg);
  padding: 20px 22px; cursor: pointer; font-family: inherit; text-align: left;
  transition: background 0.12s;
}
.intent-choice:hover { background: var(--c-amber-soft); }
.intent-choice[aria-pressed="true"] { background: var(--c-amber-soft); }
.intent-text { flex: 1; display: grid; gap: 4px; }
.intent-title { font-size: 19px; font-weight: 800; color: var(--c-navy); letter-spacing: -0.015em; }
.intent-desc { font-size: 14px; color: var(--c-text-mute); line-height: 1.45; }
.intent-side { flex: 0 0 auto; display: grid; gap: 3px; justify-items: end; text-align: right; }
.intent-price { font-size: 16px; font-weight: 800; color: var(--c-green); white-space: nowrap; }
.intent-running {
  font-size: 15px; font-weight: 800; color: var(--c-navy);
  background: var(--c-amber); border-radius: var(--r-pill);
  padding: 2px 11px; white-space: nowrap;
}
.intent-running[hidden] { display: none; }
.intent-hint { font-size: 12px; font-weight: 700; color: var(--c-text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.intent-choice[aria-pressed="true"] .intent-hint { color: var(--c-navy); }

/* The calculator that lives inside its own card - no second border and no
   second heading, because the card head above it already said what this is. */
.calc-block.intent-calc {
  border: 0; border-top: 1px solid var(--c-border);
  border-radius: 0; margin: 0; padding: 4px 22px 20px;
  background: transparent;
}
.calc-block.intent-calc[hidden] { display: none; }
.intent-panel { border-top: 1px solid var(--c-border); padding: 18px 22px 20px; }
.intent-panel[hidden] { display: none; }
.intent-routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.intent-routes li {
  font-size: 14.5px; color: var(--c-text-soft); line-height: 1.5;
  padding-left: 18px; position: relative;
}
.intent-routes li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-amber);
}
.intent-routes li strong { color: var(--c-navy); }
.intent-routes-call { margin: 14px 0 0; font-size: 14.5px; color: var(--c-text-soft); }
.intent-routes-call a { font-weight: 800; color: var(--c-navy); }

/* ITEM 39 (Pete, 2026-09-05): the separate "Not sure? Pick the property size
   instead" control is GONE. The four price bands ARE the picker now, so its
   rules went with it - see .eicr-bands below. */

/* The room-by-room builder: KEPT in full (Pete, 2026-09-04, his word was
   "Keep"), one tap down. Its internals are untouched - this is a relocation,
   not a redesign. */
.full-builder { margin-top: 22px; }
.full-builder-toggle {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px dashed var(--c-amber);
  border-radius: var(--r-lg); padding: 16px 20px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background 0.15s;
}
.full-builder-toggle:hover { background: var(--c-amber-soft); }
.full-builder-toggle-icon {
  flex: 0 0 34px; width: 34px; height: 34px;
  background: var(--c-amber); color: var(--c-navy); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 21px;
}
.full-builder-toggle-text { flex: 1; display: grid; gap: 2px; }
.full-builder-toggle-text strong { color: var(--c-navy); font-size: 16px; font-weight: 800; }
.full-builder-toggle-text small { color: var(--c-text-mute); font-size: 13px; }
.full-builder-toggle-arrow { flex: 0 0 auto; color: var(--c-amber); font-size: 14px; transition: transform 0.2s; }
.full-builder-toggle[aria-expanded="true"] .full-builder-toggle-arrow { transform: rotate(90deg); }
.full-builder-panel { padding-top: 20px; }
.full-builder-panel[hidden] { display: none; }

/* The rate card and the FAQ, each behind one labelled tap. */
.disclosure-section { padding: 44px 0 52px; }
.disclosure { margin-bottom: 14px; }
.disclosure-toggle {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 18px 20px; cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.disclosure-toggle:hover { border-color: var(--c-amber); background: var(--c-amber-soft); }
.disclosure-toggle[aria-expanded="true"] { border-color: var(--c-amber); }
.disclosure-toggle-text { flex: 1; display: grid; gap: 2px; }
.disclosure-toggle-text strong { color: var(--c-navy); font-size: 17px; font-weight: 800; }
.disclosure-toggle-text small { color: var(--c-text-mute); font-size: 13px; line-height: 1.4; }
.disclosure-toggle-arrow { flex: 0 0 auto; color: var(--c-amber); font-size: 14px; transition: transform 0.2s; }
.disclosure-toggle[aria-expanded="true"] .disclosure-toggle-arrow { transform: rotate(90deg); }
.disclosure-panel { padding: 20px 0 6px; display: grid; gap: 26px; }
.disclosure-panel[hidden] { display: none; }
.disclosure-prose { max-width: none; }
.disclosure-prose h3 { margin-top: 0; }

/* On a phone the cards stay a ROW - title and one line of description on the
   left, the From price on the right. Stacking them turned four cards into
   two thirds of a screen on their own, which is the exact fault this page was
   rebuilt to fix. */
@media (max-width: 620px) {
  .intent-choice { align-items: flex-start; gap: 12px; padding: 14px 16px; }
  .intent-text { gap: 2px; }
  .intent-title { font-size: 16.5px; }
  .intent-desc { font-size: 12.5px; line-height: 1.35; }
  .intent-side { gap: 2px; }
  .intent-price { font-size: 14.5px; }
  .intent-hint { font-size: 10.5px; }
  .intent-running { font-size: 13.5px; padding: 1px 9px; }
  .calc-block.intent-calc, .intent-panel { padding-left: 16px; padding-right: 16px; }
  .full-builder-toggle { padding: 13px 15px; gap: 11px; }
  .full-builder-toggle-icon { flex: 0 0 30px; width: 30px; height: 30px; font-size: 19px; }
  .full-builder-toggle-text strong { font-size: 15px; }
  .full-builder-toggle-text small { font-size: 12px; line-height: 1.35; }
  .disclosure-toggle { padding: 13px 16px; }
  .disclosure-toggle-text strong { font-size: 15.5px; }
  .disclosure-toggle-text small { font-size: 12px; line-height: 1.35; }
}

/* =====================================================================
   THE HEIGHT BUDGET. The brief set a target of about three phone-screens
   with everything collapsed and a hard ceiling of five. quote.css is loaded
   by /quote and by nothing else, so the shared components below are tuned
   for this page only - the other 13 pages keep the roomier spacing.
   ===================================================================== */

.intent-choice { padding: 16px 20px; gap: 14px; }
.intent-title { font-size: 18px; }
.intent-desc { font-size: 13.5px; line-height: 1.4; }
.intent-list { gap: 12px; }

.full-builder { margin-top: 18px; }
.full-builder-toggle { padding: 14px 18px; }

/* The summary card is the one thing a visitor with a quote must always be
   able to reach, so it stays - just without the air around it. */
.summary-card { padding: 20px; }
.summary-head { padding-bottom: 14px; margin-bottom: 12px; }
.summary-total { font-size: 34px; }
.summary-line-list { min-height: 22px; font-size: 13px; }
.summary-cta { margin: 10px 0 8px; padding: 14px; }
.summary-foot { margin-top: 8px; font-size: 11.5px; }
.summary-sub { font-size: 12.5px; }
.calc-summary { gap: 14px; }

.disclosure-section { padding: 24px 0 28px; }
.disclosure { margin-bottom: 10px; }
.disclosure-toggle { padding: 14px 18px; }

/* The call block stays visible - it is the escape hatch and has to be one
   thumb-reach away. Its two route cards sit side by side on a phone instead
   of stacking, which keeps both links without costing a third of a screen. */
.cta-band { padding: 34px 0; }
.cta-band h2 { font-size: clamp(23px, 3vw, 34px); margin-bottom: 8px; }
.cta-band p { font-size: 15.5px; }
.cta-band-grid { gap: 20px; }
.routes-dark { grid-template-columns: 1fr 1fr; gap: 10px; }
.routes-dark .route { padding: 12px 12px 14px; }
.routes-dark .route-icon { width: 30px; height: 30px; margin-bottom: 6px; }
.routes-dark .route-title { font-size: 10.5px; }
.routes-dark .route-num { font-size: 17px; }
.routes-dark .route-sub { font-size: 11.5px; line-height: 1.3; }

/* =====================================================================
   ITEMS 33 AND 34 (Pete's 34-item review of the live site, 2026-09-04 PM).

   33. The first price on the page was one line, "EICR from 160", and the
       trip-switch counter that turns it into YOUR price was a tap away and
       most of a screen down. Both are above the fold now.
   34. The build-your-own-quote section opened on 1,508px of chrome before a
       visitor could add anything: an occupied-property question about a job
       that did not exist yet, an amber tip panel, a whole-property block, and
       thirteen room chips in a wrapped heap. It now opens IN Rooms.

   House rule this build enforces: AMBER IS THE ACTION COLOUR. One amber thing
   on screen at a time - the button that sends the quote. The tip panel, the
   custom-room chip and the small-print panel were all amber and are not now.
   ===================================================================== */

/* ---- ITEM 41 (Pete, 2026-09-05, off the live page): THE EICR IS A ROW ----
   The white card that used to hold this block open above the stack is gone.
   The block lives inside the stack's first row now, so the card chrome comes
   from .intent-card like every other row and the pricing block below is
   unchanged inside it.

   The row is a <details> and its header is a <summary>, so the counter and the
   four band prices open with no JavaScript at all. A summary is display:
   list-item by default and draws a triangle; .intent-choice sets display:flex,
   which drops the marker everywhere except older Safari, and the webkit rule
   below finishes the job. Without this the stack's first row would be the only
   one wearing a disclosure triangle. */
.intent-card-eicr > .intent-choice { list-style: none; }
.intent-card-eicr > .intent-choice::-webkit-details-marker { display: none; }
/* The counter box carries its own top edge, so the panel does not need the
   full .intent-panel gap above it. */
.eicr-panel { padding-top: 14px; }

/* ---- ITEM 37: THE COUNTER, IN THE BRANDED ORANGE BOX ----
   THE ONE-AMBER RESOLUTION, STATED. The house rule is one amber thing per
   screen. Above the fold that slot belonged to the accent word in the h1.
   The counter is the hero interaction - it is the control that turns a "from"
   price into THIS visitor's price - and a decorative word in a heading is not,
   so the counter takes the slot and the h1 accent gives it up (the override is
   at the end of this file, scoped to this page). Nothing else above the fold
   is amber: the commercial block below is navy, the bands are collapsed, and
   the pinned Send button only appears once there IS a total. */
/* ITEM 42c (Pete: the solid amber slab was "ghastly"): a white card that
   wears the brand amber as a border and on the step buttons instead of as a
   flood fill. Still unmistakably the branded control, no longer shouting. */
.calc-block.eicr-counter-box {
  background: #fff; border: 2px solid var(--c-amber); border-radius: var(--r-md);
  margin: 12px 0; padding: 14px 16px 13px;
}
.eicr-counter-box .calc-row-step-button {
  background: var(--c-amber); border: 0; color: var(--c-navy-deep); font-weight: 800;
}
.eicr-counter-box .calc-row-step-button:hover { background: var(--c-navy); color: #fff; }
.eicr-counter-box .calc-rows { gap: 0; }
.eicr-counter-box .calc-row {
  grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  border-top: 0; padding: 0;
}
.eicr-counter-box .calc-row-label strong {
  font-size: 16px; font-weight: 800; color: var(--c-navy-deep); line-height: 1.25;
}
.eicr-counter-box .calc-row-label span {
  font-size: 12.5px; color: var(--c-navy); margin-top: 3px; line-height: 1.3;
}
.eicr-counter-box .eicr-result {
  margin: 12px 0 0; padding: 9px 10px;
  background: var(--c-amber-soft); border-radius: var(--r-sm);
  font-size: 15px; font-weight: 700; color: var(--c-navy-deep); line-height: 1.4;
}
.eicr-counter-help { margin: 6px 0 0; font-size: 12.5px; color: var(--c-text-mute); line-height: 1.35; }
.eicr-counter-help a { color: var(--c-navy-deep); font-weight: 700; text-decoration: underline; }

/* ---- ITEM 38: the commercial block, now a pure TOGGLE ----
   BIG, BRANDED, AND NOT AMBER - the counter above holds the screen's one
   amber, so this stays solid navy, the loudest colour the brand has left and
   the only filled navy block on the screen. The tick box that used to shadow
   it is gone (item 36), so this IS the state: aria-pressed says which way it
   is set and the two small lines swap with it. */
/* ITEM 46: an explicit display beats the hidden attribute's browser default,
   so the parked state needs its own rule or the button shows anyway - caught
   live by the verify pass, not in review. */
.commercial-entry[hidden] { display: none; }
.commercial-entry {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; padding: 13px 16px;
  background: var(--c-navy); border: 0; border-radius: var(--r-sm);
  color: #fff; font-family: inherit; text-align: left; cursor: pointer;
  transition: background 0.15s ease;
}
.commercial-entry:hover { background: var(--c-navy-2); }
.commercial-entry-text { display: grid; gap: 2px; min-width: 0; }
.commercial-entry-text strong { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.commercial-entry-text small { font-size: 13px; color: #C6CFDE; line-height: 1.3; }
.commercial-entry-arrow { flex: 0 0 auto; font-size: 15px; transition: transform 0.2s; }
/* One control, two states, and the copy for each is in the page rather than
   written in by script - so the right line is there before any JS runs. */
.commercial-entry-when-on { display: none; }
.commercial-entry[aria-pressed="true"] .commercial-entry-when-off { display: none; }
.commercial-entry[aria-pressed="true"] .commercial-entry-when-on { display: block; }
.commercial-entry[aria-pressed="true"] { background: var(--c-navy-deep); }
.commercial-entry[aria-pressed="true"] .commercial-entry-arrow { color: var(--c-green); transform: rotate(90deg); }

/* The counter carries no heading of its own - the row header above it already
   said what this prices. */
.calc-block.eicr-upfront-calc { border-radius: var(--r-md); }

/* ---- ITEMS 39 + 40: the four bands, collapsed, and tappable when open ----
   A real details element: no JavaScript is needed to open it and read all
   four prices, which is the whole point of keeping them in the served HTML
   rather than rendering them. */
/* ITEM 42: the bands are the FIRST thing in the open row now, always visible
   - no top border, no disclosure. The old summary rules below are unused
   since the details wrapper went, and stay only so a cached page renders. */
.eicr-bands { border-top: 0; padding-top: 0; }
.eicr-bands-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; cursor: pointer;
  font-size: 14.5px; font-weight: 700; color: var(--c-navy); line-height: 1.35;
}
.eicr-bands-summary::-webkit-details-marker { display: none; }
.eicr-bands-summary:hover { color: var(--c-navy-2); }
.eicr-bands-summary-arrow { flex: 0 0 auto; font-size: 13px; color: var(--c-navy); transition: transform 0.2s; }
.eicr-bands[open] .eicr-bands-summary-arrow { transform: rotate(90deg); }

.eicr-band-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.eicr-band {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--c-border-2); border-radius: var(--r-sm);
  padding: 10px 12px; cursor: pointer; font-family: inherit; text-align: left;
}
.eicr-band:hover { background: var(--c-amber-soft); border-color: var(--c-amber); }
.eicr-band[aria-pressed="true"] { background: var(--c-amber-soft); border-color: var(--c-amber); }
.eicr-band-what { display: grid; gap: 0; min-width: 0; }
.eicr-band-what strong { font-size: 14.5px; font-weight: 700; color: var(--c-navy); line-height: 1.3; }
.eicr-band-what span { font-size: 12px; color: var(--c-text-mute); line-height: 1.3; }
.eicr-band-price { flex: 0 0 auto; font-size: 18px; font-weight: 800; color: var(--c-green); white-space: nowrap; }
.eicr-band-note { margin: 10px 0 0; font-size: 12.5px; color: var(--c-text-mute); line-height: 1.45; }
.eicr-band-note[hidden] { display: none; }

/* ---- 34.1: Rooms first, four chips, the rest behind one reveal ---- */
/* align-items: stretch, not the inherited centre: "Living room" wraps to two
   lines and a centred grid row would drop the other three chips out of line
   with it. Four chips, one row, all the same height. */
.room-quick-primary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  align-items: stretch; margin-bottom: 10px;
}
.room-quick-primary .quick-add-button {
  padding: 11px 4px; text-align: center; font-size: 13px; line-height: 1.25;
}
.more-rooms-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--c-bg-soft); border: 1px dashed var(--c-border-2);
  border-radius: var(--r-sm); padding: 10px 14px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--c-navy);
  cursor: pointer; text-align: left;
}
.more-rooms-toggle:hover { background: var(--c-amber-soft); border-color: var(--c-amber); }
.more-rooms-toggle-arrow { color: var(--c-text-faint); font-size: 13px; transition: transform 0.2s; }
.more-rooms-toggle[aria-expanded="true"] .more-rooms-toggle-arrow { transform: rotate(90deg); }
.room-quick-more { margin-top: 10px; margin-bottom: 0; }
.room-quick-more[hidden] { display: none; }
.rooms-list:not(:empty) { margin-top: 14px; }

/* 34.6: the custom-room chip was amber. Amber is the action colour and the
   action on this page is sending the quote, so this is a chip like the rest. */
.quick-add-blank {
  background: #fff; color: var(--c-navy);
  border: 1px dashed var(--c-border-2); font-weight: 700;
}
.quick-add-blank:hover { background: var(--c-bg-soft); border-color: var(--c-navy); }

/* ---- 34.2: the occupied question, at the end, next to the total ----
   It is one question about a number that already exists, so it is a row, not
   another bordered card competing with the rooms above it. */
.full-builder-panel .calc-block.occupied-final {
  background: transparent; border: 0; border-radius: 0;
  padding: 2px 2px 0; margin-bottom: 4px;
}
.occupied-final .calc-block-head { margin-bottom: 4px; }
.occupied-final .calc-block-head h2 { font-size: 15.5px; }
.occupied-final .occupied-toggle-row { font-size: 14px; align-items: flex-start; }
.occupied-final .eicr-result { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--c-text-mute); }

/* ---- 34.5: the terms, one tap away, and no longer amber ---- */
.builder-terms { margin-top: 18px; }
.builder-terms .disclosure-panel { padding: 12px 0 0; }
.builder-terms .calc-disclaimer {
  margin-top: 0; background: var(--c-bg-soft); border-color: var(--c-border);
}

/* ---- 34.3: the running total, pinned ---- */
/* It appears the moment there IS a total and hides again at zero, so a first
   visit still gets the whole screen for the price bands. */
.quote-sticky-total {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  display: none; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--c-navy); color: #fff;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.22);
}
.quote-sticky-total[hidden] { display: none; }
.quote-sticky-figure { flex: 1; display: grid; gap: 0; min-width: 0; line-height: 1.15; }
.quote-sticky-eyebrow {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--c-amber);
}
.quote-sticky-amount { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.quote-sticky-count { font-size: 11.5px; color: #B6C2D6; }
.quote-sticky-call {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-green); color: #fff;
}
.quote-sticky-call:hover { background: var(--c-green-2); color: #fff; text-decoration: none; }
.quote-sticky-send {
  flex: 0 0 auto; font-family: inherit; font-size: 15px; font-weight: 800;
  padding: 13px 18px; border: 0; cursor: pointer;
}

/* Only where the summary card is NOT already sticky beside the builder. */
@media (max-width: 980px) {
  .quote-sticky-total:not([hidden]) { display: flex; }
  body.has-sticky-total { padding-bottom: 78px; }
  /* Two stacked fixed bars would eat a fifth of a phone screen, so the pinned
     total takes the call route with it rather than sitting on top of one. */
  body.has-sticky-total .mobile-call-bar { display: none; }
}

@media (max-width: 620px) {
  .eicr-panel { padding-top: 12px; padding-bottom: 16px; }
  .eicr-counter-box.calc-block { padding: 13px 14px 12px; }
  .eicr-counter-box .calc-row-label strong { font-size: 15.5px; }
  .eicr-counter-box .eicr-result { font-size: 14.5px; }
  .eicr-bands-summary { font-size: 14px; }
  .eicr-band-what strong { font-size: 14.5px; }
  .eicr-band-price { font-size: 17px; }
  .room-quick-primary { gap: 6px; }
  .room-quick-primary .quick-add-button { font-size: 12.5px; padding: 10px 3px; }
  .quote-sticky-amount { font-size: 23px; }
  .quote-sticky-send { font-size: 14px; padding: 12px 14px; }
}

/* ---- 34: the builder's pre-interaction chrome ----
   1,508px of it before this build, at 390px wide, with nothing added. Every
   block inside the builder is tuned tight here. Nothing is removed - the
   builder just stops shouting before there is a job to price. */
.full-builder-panel { padding-top: 14px; }
.full-builder-panel .calc-block { padding: 14px 14px 12px; margin-bottom: 12px; }
.full-builder-panel .calc-block-head { margin-bottom: 8px; }
.full-builder-panel .calc-block-head h2 { font-size: 16.5px; margin-bottom: 1px; }
.full-builder-panel .calc-block-head p { font-size: 12.5px; line-height: 1.35; }
.full-builder-panel .calc-block:last-of-type { margin-bottom: 0; }
/* Collapsed, the whole-property block is a heading and a subtotal - it does
   not need the paragraph explaining a list nobody can see yet. */
#wholePropertyBlock.is-collapsed .calc-block-head p { display: none; }

/* 34.6 again, one level up: the builder ENTRY is amber because a closed flap
   has to invite a tap. Once it is open it is a heading, and the only amber
   thing on the screen should be the button that sends the quote. */
.full-builder-toggle[aria-expanded="true"] {
  border-style: solid; border-color: var(--c-border);
}
.full-builder-toggle[aria-expanded="true"] .full-builder-toggle-icon {
  background: var(--c-bg-soft); color: var(--c-navy);
}
.full-builder-toggle[aria-expanded="true"] .full-builder-toggle-arrow { color: var(--c-text-faint); }

/* ---- ITEM 37, second half: the one-amber slot changes hands ----
   styles.css paints the h1 accent word amber on every inner page, and it was
   the amber above the fold here. The counter's orange box now is, so on THIS
   page the accent word goes back to white and the heading reads as one line.
   Scoped to quote.css on purpose: every other page keeps its amber accent,
   because no other page has an orange control at the top of it. */
.page-head h1 .accent { color: #fff; }

/* ITEM 39 (the rapid-tap zoom fix) is NOT here. It is a SITE-WIDE rule, so it
   lives in styles.css, which every page of this site loads - see the
   touch-action block at the end of that file. Putting it in quote.css would
   have fixed today's steppers and silently missed tomorrow's. */

/* ---- CLICK-TO-EXPAND ARROWS MATCH THE FAQ CHEVRON (Pete 2026-09-09) ----
   Pete asked for the orange expand arrow to be bigger across the whole site.
   styles.css gave the FAQ accordion a 44px amber circle; these are the quote
   page's own expand controls (the rate-card and price-questions disclosures,
   the full-builder toggle, the per-room extras toggle and the builder terms)
   and they were still a bare 14px triangle. Same circle, same size, so one
   "this opens" signal reads the same on every page. The rotate-on-open rules
   above still apply. */
.disclosure-toggle-arrow, .full-builder-toggle-arrow, .room-extras-toggle-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-amber-soft); border: 1px solid var(--c-amber-line);
  font-size: 24px; line-height: 1;
}
.room-extras-toggle-arrow { width: 36px; height: 36px; font-size: 20px; }

/* ---- THE PLUS AND MINUS ARE DRAWN, NOT TYPED (Pete 2026-09-09) ----
   Pete: "put the + in the centre of the circle" on Planning bigger works and
   across the site. A typed + is a font glyph sitting in a 1.55 line box, and
   where its ink lands is the font's call: measured 3.2px low in Firefox and
   2.4px low in Chromium on the amber circle, 1.8px low on the step buttons.
   Drawing the sign as a masked shape puts its geometric centre on the
   circle's centre in every browser, and currentColor keeps every existing
   colour state (amber counter box hover goes navy with a white sign) working.
   The typed character stays in the markup for anything reading the DOM; it is
   collapsed to zero size, and this rule sits after the mobile override that
   used to restore its font-size. */
.full-builder-toggle-icon, .room-extras-toggle-icon,
.calc-row-step-button, .room-item-step-button { font-size: 0; }
.full-builder-toggle-icon::before, .room-extras-toggle-icon::before,
.calc-row-step-button::before, .room-item-step-button::before {
  content: ""; display: block; width: 16px; height: 16px; flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.9 2h2.2v4.9H14v2.2H9.1V14H6.9V9.1H2V6.9h4.9z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.9 2h2.2v4.9H14v2.2H9.1V14H6.9V9.1H2V6.9h4.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.calc-row-step-button[data-step="-1"]::before, .calc-row-step-button[data-eicr-step="-1"]::before,
.calc-row-step-button[data-board-step="-1"]::before, .room-item-step-button[data-step="-1"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6.9h12v2.2H2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6.9h12v2.2H2z'/%3E%3C/svg%3E");
}