/* Renovation Cost Calculator page styles. Built from the existing Upgrader.ie design tokens in styles.css. */
.page-renovation-costs [hidden] { display: none !important; }
.reno-stamp { display: inline-block; background: var(--up-green-light); color: var(--up-green-dark); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 6px; padding: 0.2rem 0.5rem; }
.reno-status { background: var(--up-off-white); border-left: 4px solid var(--up-green); border-radius: var(--radius-md); padding: 0.6rem 0.9rem; font-weight: 600; color: var(--up-charcoal); }
.reno-howto { margin: 0 0 1.5rem; padding-left: 1.25rem; display: grid; gap: 0.4rem; max-width: 70ch; }
.reno-howto li { padding-left: 0.25rem; }
/* Data review line under the H1 */
.data-review {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--up-charcoal-soft);
  margin-top: 0.75rem;
}

/* Step progress text and completed state */
.calc-step-progress {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--up-green-dark);
  margin-bottom: 0.1rem;
}
.calc-step.is-complete .calc-step-number {
  background: var(--up-green);
  color: var(--up-white);
}
.calc-step-recap {
  display: block;
  font-size: 0.85rem;
  color: var(--up-charcoal-soft);
  margin-top: 0.15rem;
}

/* Questions */
.calc-q { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.calc-q legend, .calc-q > label.calc-q-label {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--up-charcoal);
  margin-bottom: 0.35rem;
  padding: 0;
}
.calc-q .calc-hint { display: block; font-size: 0.85rem; color: var(--up-charcoal-soft); margin-bottom: 0.65rem; }
.calc-q[hidden] { display: none; }

/* Selection cards: native radios and checkboxes styled as cards */
.calc-choices { display: grid; gap: 0.65rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .calc-choices { grid-template-columns: repeat(2, 1fr); } .calc-choices--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .calc-choices--4 { grid-template-columns: repeat(4, 1fr); } }
.calc-choice { position: relative; display: block; cursor: pointer; }
.calc-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-choice-box {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  min-height: 44px;
  height: 100%;
  border: 1.5px solid var(--up-border-strong);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.9rem;
  background: var(--up-white);
  transition: border-color var(--transition), background var(--transition);
}
.calc-choice-mark {
  flex: 0 0 20px;
  height: 20px;
  border: 2px solid var(--up-border-strong);
  border-radius: 50%;
  margin-top: 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.calc-choice input[type="checkbox"] + .calc-choice-box .calc-choice-mark { border-radius: 5px; }
.calc-choice-title { display: block; font-weight: 600; color: var(--up-charcoal); font-size: 0.95rem; }
.calc-choice-desc { display: block; font-size: 0.83rem; color: var(--up-charcoal-soft); margin-top: 0.15rem; }
.calc-choice:hover .calc-choice-box { border-color: var(--up-green); }
.calc-choice input:checked + .calc-choice-box { border-color: var(--up-green); background: var(--up-green-light); }
.calc-choice input:checked + .calc-choice-box .calc-choice-mark { border-color: var(--up-green); background: var(--up-green); }
.calc-choice input:checked + .calc-choice-box .calc-choice-mark::after {
  content: ""; width: 6px; height: 10px; border: solid var(--up-white); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}
.calc-choice input:focus-visible + .calc-choice-box { outline: 3px solid var(--up-green); outline-offset: 2px; }
.calc-q[aria-invalid="true"] .calc-choice-box { border-color: var(--up-clay); }

/* Area input with unit */
.calc-area-row { display: flex; align-items: center; gap: 0.5rem; max-width: 260px; }
.calc-area-row input { flex: 1; }
.calc-unit { font-weight: 600; color: var(--up-charcoal-soft); }
.calc-linklike { background: none; border: 0; padding: 0; color: var(--up-green-dark); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; margin-top: 0.5rem; min-height: 32px; }
.calc-field-warning { color: var(--up-teal-dark); font-size: 0.85rem; font-weight: 600; margin-top: 0.4rem; }

/* Error summary */
.calc-error-summary {
  border: 2px solid var(--up-clay);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--up-clay-light);
}
.calc-error-summary h3 { font-size: 1rem; margin: 0 0 0.4rem; color: var(--up-charcoal); }
.calc-error-summary ul { margin: 0; padding-left: 1.1rem; }
.calc-error-summary a { color: var(--up-charcoal); font-weight: 600; }

/* Step actions */
.calc-step-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
@media (max-width: 639px) { .calc-step-actions .btn { width: 100%; justify-content: center; } }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Check your answers (conflicts) */
.calc-check-answers {
  border: 2px solid var(--up-teal);
  background: var(--up-teal-light);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  margin-top: 1.25rem;
}
.calc-check-answers h3 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.calc-conflict { padding: 0.9rem 0; border-top: 1px solid rgba(27, 138, 168, 0.25); }
.calc-conflict:first-of-type { border-top: 0; padding-top: 0; }
.calc-conflict p { margin: 0 0 0.6rem; color: var(--up-charcoal); font-weight: 500; }
.calc-conflict-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.calc-conflict-options .btn { font-size: 0.9rem; }

/* Results */
.reno-results { margin-top: 2rem; }
.reno-results[hidden] { display: none; }
.reno-headline { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1rem 0; }
@media (min-width: 640px) { .reno-headline { grid-template-columns: 1fr 1.25fr 1fr; align-items: stretch; } }
.reno-figure { background: var(--up-white); border: 1px solid var(--up-border); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.reno-figure--main { border: 2px solid var(--up-green); background: var(--up-green-light); }
.reno-figure-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--up-charcoal-soft); }
.reno-figure-value { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--up-charcoal); margin-top: 0.2rem; }
.reno-figure--main .reno-figure-value { font-size: 2.3rem; color: var(--up-green-dark); }
@media (max-width: 639px) { .reno-figure--main { order: -1; } }
.reno-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.88rem; color: var(--up-charcoal-soft); }
.reno-meta strong { color: var(--up-charcoal); }
.reno-wider { margin-top: 0.75rem; font-size: 0.92rem; }
.reno-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0.5rem; }
@media (max-width: 639px) { .reno-actions .btn { width: 100%; justify-content: center; } }
.reno-panel { background: var(--up-white); border: 1px solid var(--up-border); border-radius: var(--radius-lg); padding: 1.25rem 1.35rem; margin-top: 1.25rem; }
.reno-panel h3 { margin-top: 0; font-size: 1.15rem; }

/* Unpriced and included lists */
.reno-unpriced { border-left: 4px solid #a13d4f; }
.reno-unpriced[hidden] { display: none; }
.reno-list { margin: 0; padding-left: 1.15rem; }
.reno-list li { margin: 0.25rem 0; }

/* Print fallback: results only */
@media print {
  .site-header, .site-footer, .mobile-nav, .calculator-steps, .howto, .reno-actions, .faq-section, .next-steps { display: none !important; }
  .reno-results { margin: 0; }
}

/* v0.2: work selection steppers (multiple bathrooms and kitchens) */
.calc-choice--count .calc-choice-box { cursor: default; flex-direction: column; }
.calc-choice--count.is-active .calc-choice-box { border-color: var(--up-green); background: var(--up-green-light); }
.calc-stepper { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.calc-stepper-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--up-border-strong); background: var(--up-white);
  font-size: 1.35rem; font-weight: 600; line-height: 1; color: var(--up-charcoal); cursor: pointer;
}
.calc-stepper-btn:hover { border-color: var(--up-green); }
.calc-stepper-btn:focus-visible { outline: 3px solid var(--up-green); outline-offset: 2px; }
.calc-stepper output { min-width: 1.5rem; text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--up-charcoal); }

/* Keep step headings, results and the conflict panel clear of the site's sticky header when scrolled to */
.calc-step, .reno-results, .reno-results h2, .calc-check-answers, .reno-cat { scroll-margin-top: 104px; }

/* "Customise individual rooms" (collapsed by default) */
.calc-customise { border: 1px solid var(--up-border); border-radius: var(--radius-md); margin: 0 0 1.5rem; background: var(--up-off-white); }
.calc-customise-summary { list-style: none; cursor: pointer; padding: 0.85rem 1rem; min-height: 44px; display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--up-green-dark); }
.calc-customise-summary::-webkit-details-marker { display: none; }
.calc-customise-summary::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-right: 0.35rem; transition: transform var(--transition); }
.calc-customise[open] .calc-customise-summary::before { transform: rotate(45deg); }
.calc-customise-summary:focus-visible { outline: 3px solid var(--up-green); outline-offset: 2px; border-radius: var(--radius-md); }
.calc-customise-note { font-weight: 500; color: var(--up-charcoal-soft); }
.calc-customise-body { padding: 0 1rem 0.5rem; }
/* Optional bathroom length and width (candidate model geometry) */
.calc-dims-hint { margin: 0.6rem 0 0.35rem; }
.calc-dims-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.4rem; }
.calc-dims-row label { font-weight: 600; color: var(--up-charcoal); }
.calc-dims-row .calc-area-row { max-width: 130px; }
.calc-dims-row input { min-height: 2.75rem; min-width: 5.5rem; box-sizing: border-box; }

/* ===================================================================== */
/* Page layout (v1.1): one centred column for heading, calculator,        */
/* results, methodology, CTAs and FAQs. Scoped to this page only.        */
/* ===================================================================== */
.page-renovation-costs { --reno-width: 70rem; }
.page-renovation-costs #renovation-calculator > .wrap,
.page-renovation-costs #how-it-works > .wrap,
.page-renovation-costs .faq-section > .wrap { max-width: calc(var(--reno-width) + 2 * var(--gutter)); }
.page-renovation-costs #renovation-calculator { scroll-margin-top: 88px; }

/* Calculator heading */
.page-renovation-costs .section-head--tool { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.page-renovation-costs .section-head--tool h2 { font-size: clamp(2.1rem, 3.6vw, 2.85rem); }
.page-renovation-costs .section-head--tool p { max-width: 38rem; margin-inline: auto; }
/* How it works: three equal steps across the width (desktop), stacked (mobile) */
.reno-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 900px) { .reno-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.reno-step { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.15rem; background: var(--up-off-white); border: 1px solid var(--up-border); border-radius: var(--radius-md); }
.reno-step-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.reno-step-title { font-weight: 600; font-size: 0.98rem; color: var(--up-charcoal); line-height: 1.35; }
.reno-step-desc { font-size: 0.88rem; color: var(--up-charcoal-soft); line-height: 1.45; }
.reno-steps-num { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--up-green-light); color: var(--up-green-dark); display: inline-grid; place-items: center; font-size: 0.82rem; font-weight: 700; }
.page-renovation-costs .reno-notice { margin: 0 0 clamp(1.5rem, 3vw, 2rem); font-size: 0.86rem; color: var(--up-charcoal-soft); text-align: center; }

/* Steps */
.page-renovation-costs .calculator-steps { margin-top: 0; gap: 1.25rem; }
.page-renovation-costs .calc-step { border: 1px solid var(--up-border); border-radius: var(--radius-lg); transition: border-color var(--transition), box-shadow var(--transition); }
.page-renovation-costs .calc-step[open] { border-color: var(--up-green); box-shadow: 0 0 0 3px var(--up-green-light); }
.page-renovation-costs .calc-step-summary { padding: 1.15rem clamp(1.1rem, 3vw, 1.75rem); min-height: 64px; }
.page-renovation-costs .calc-step-title { font-size: 1.12rem; }
.page-renovation-costs .calc-step[open] .calc-step-number { background: var(--up-green); color: var(--up-white); }
.page-renovation-costs .calc-step-body { padding: 0.25rem clamp(1.1rem, 3vw, 1.75rem) clamp(1.35rem, 3vw, 1.85rem); }
.page-renovation-costs .calc-q { margin-bottom: 1.75rem; }
.page-renovation-costs .calc-q .calc-hint { margin-bottom: 0.85rem; }
.page-renovation-costs .calc-step-body input[type="text"], .page-renovation-costs .calc-step-body select { min-height: 48px; font-size: 1rem; }
.page-renovation-costs .calc-step-actions { margin-top: 2rem; padding-top: 1.35rem; border-top: 1px solid var(--up-border); justify-content: flex-end; }
@media (max-width: 639px) { .page-renovation-costs .calc-step-actions { flex-direction: column-reverse; } }

/* Project cards (three): one row of three from tablet width up; one column on mobile; equal sizes */
.page-renovation-costs [data-work-cards] { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 1rem; }
@media (min-width: 720px) { .page-renovation-costs [data-work-cards] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }
.page-renovation-costs [data-work-cards] > .calc-choice { height: 100%; }
.page-renovation-costs [data-work-cards] .calc-choice-box { flex-direction: row; align-items: flex-start; gap: 0.8rem; padding: 1.15rem 1.25rem; min-height: 7.25rem; border-width: 1.5px; border-color: var(--up-border); }
.page-renovation-costs [data-work-cards] .calc-choice-title { font-size: 1.02rem; }
.page-renovation-costs [data-work-cards] .calc-choice-desc { font-size: 0.88rem; margin-top: 0.3rem; line-height: 1.45; }
.page-renovation-costs [data-work-cards] .calc-choice-text { flex: 1 1 auto; min-width: 0; }
.page-renovation-costs [data-work-cards] .calc-choice--count .calc-choice-box { flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.page-renovation-costs [data-work-cards] .calc-choice--count .calc-stepper { margin-top: auto; margin-left: auto; align-self: flex-end; }
.page-renovation-costs [data-work-cards] .calc-choice:hover .calc-choice-box { border-color: var(--up-green); }
.page-renovation-costs [data-work-cards] .calc-choice input:checked + .calc-choice-box,
.page-renovation-costs [data-work-cards] .calc-choice--count.is-active .calc-choice-box { border-color: var(--up-green); background: var(--up-green-light); box-shadow: inset 0 0 0 1px var(--up-green); }
.page-renovation-costs [data-work-cards] + [data-planned-note], .page-renovation-costs [data-planned-note] { margin-top: 1.5rem; font-size: 0.88rem; color: var(--up-charcoal-soft); text-align: center; }

/* Results */
.page-renovation-costs .reno-results { margin-top: clamp(2rem, 4vw, 3rem); }
.page-renovation-costs .reno-status { font-size: 0.92rem; }
.page-renovation-costs #results-h { font-size: clamp(1.75rem, 3vw, 2.25rem); text-align: center; margin: 1.5rem 0 0.25rem; }
.page-renovation-costs .reno-headline { gap: 1rem; margin: 1.25rem 0; }
@media (min-width: 640px) { .page-renovation-costs .reno-headline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-renovation-costs .reno-figure { text-align: center; padding: 1.25rem 1rem; box-shadow: none; display: flex; flex-direction: column; justify-content: center; }
.page-renovation-costs .reno-figure--main { border-width: 2px; background: var(--up-white); box-shadow: 0 0 0 4px var(--up-green-light); }
.page-renovation-costs .reno-figure-value { font-variant-numeric: tabular-nums; }
.page-renovation-costs .reno-meta { justify-content: center; }
.page-renovation-costs .reno-wider { text-align: center; }
.page-renovation-costs .reno-actions { justify-content: center; margin: 1.5rem 0 0.5rem; }
.page-renovation-costs #pdf-status { text-align: center; }
.page-renovation-costs .reno-panel { padding: clamp(1.1rem, 3vw, 1.6rem); margin-top: 1.25rem; border-radius: var(--radius-md); }
.page-renovation-costs .reno-results > h3 { margin-top: 2.25rem; font-size: 1.3rem; }

/* Methodology, FAQs and CTAs */
.page-renovation-costs .faq-section .section-head { margin-inline: auto; }
.page-renovation-costs .faq-list { max-width: 52rem; margin-inline: auto; }
.page-renovation-costs .reno-cta-section + .reno-cta-section { padding-top: 0; }

/* ===================================================================== */
/* Results presentation (v1.2): breakdown tables, category panels,        */
/* exclusions and next steps. Scoped to this page only.                  */
/* ===================================================================== */

/* Breakdown tables. Fixed layout: price columns get a set width so the item column can never squeeze them,
   and the table is exactly as wide as its container (no margins that push it past the panel edge). */
.reno-table-scroll { position: relative; max-width: 100%; container-type: inline-size; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.reno-table-scroll.is-scrollable {
  background: linear-gradient(to right, var(--up-white) 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
              linear-gradient(to left, var(--up-white) 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
              radial-gradient(farthest-side at 0 50%, rgba(23, 33, 29, 0.16), transparent) left center / 0.9rem 100% no-repeat scroll,
              radial-gradient(farthest-side at 100% 50%, rgba(23, 33, 29, 0.16), transparent) right center / 0.9rem 100% no-repeat scroll;
}
.reno-table-scroll:focus-visible { outline: 3px solid var(--up-green); outline-offset: 3px; border-radius: 6px; }
.reno-scroll-hint { display: none; margin: 0.5rem 0 0; font-size: 0.8rem; font-weight: 600; color: var(--up-charcoal-soft); position: sticky; left: 0; }
.reno-table-scroll.is-scrollable .reno-scroll-hint { display: block; }

.calc-breakdown { width: 100%; min-width: 30rem; table-layout: fixed; border-collapse: collapse; font-size: 0.93rem; line-height: 1.45; }
.calc-breakdown col.col-num { width: 8.75rem; }
.calc-breakdown caption { text-align: left; font-weight: 700; color: var(--up-charcoal); margin-bottom: 0.75rem; font-size: 1.05rem; }
.calc-breakdown th, .calc-breakdown td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--up-border); vertical-align: top; }
.calc-breakdown thead th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.3; color: var(--up-charcoal-soft); text-align: right; vertical-align: bottom; border-bottom-width: 2px; }
.calc-breakdown thead th:first-child { text-align: left; }
.calc-breakdown tbody th { text-align: left; font-weight: 500; color: var(--up-charcoal); overflow-wrap: anywhere; }
.calc-breakdown td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--up-charcoal); }
.calc-breakdown tr.row-sub th, .calc-breakdown tr.row-sub td { font-weight: 700; background: var(--up-off-white); }
.calc-breakdown tr.row-total th, .calc-breakdown tr.row-total td { font-weight: 700; font-size: 1.02rem; border-top: 2px solid var(--up-charcoal); border-bottom: 0; color: var(--up-charcoal); }
.calc-breakdown tbody tr:last-child th, .calc-breakdown tbody tr:last-child td { border-bottom: 0; }
.calc-breakdown .row-note { display: block; font-size: 0.8rem; line-height: 1.4; color: var(--up-charcoal-soft); font-weight: 400; margin-top: 0.15rem; }
.calc-breakdown a { color: var(--up-green-dark); font-weight: 600; }
.calc-breakdown-foot { font-size: 0.82rem; line-height: 1.5; color: var(--up-charcoal-soft); margin: 0.85rem 0 0; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .calc-breakdown col.col-num { width: 7.5rem; }
  .calc-breakdown th, .calc-breakdown td { padding-inline: 0.5rem; }
}
/* Phones: each row becomes the item name, then the three amounts side by side, each with its own label. */
@media (max-width: 639.98px) {
  .calc-breakdown { min-width: 0; table-layout: auto; font-size: 0.9rem; }
  .calc-breakdown, .calc-breakdown tbody { display: block; width: 100%; }
  .calc-breakdown colgroup { display: none; }
  .calc-breakdown caption { display: block; }
  .calc-breakdown thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .calc-breakdown tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.5rem; padding: 0.7rem 0; border-bottom: 1px solid var(--up-border); }
  .calc-breakdown tbody tr:last-child { border-bottom: 0; }
  .calc-breakdown th, .calc-breakdown td, .calc-breakdown tbody tr:last-child th, .calc-breakdown tbody tr:last-child td { border: 0; padding: 0; min-width: 0; }
  .calc-breakdown tbody th { grid-column: 1 / -1; font-weight: 600; margin-bottom: 0.4rem; }
  .calc-breakdown td.num { text-align: left; font-size: 0.92rem; }
  .calc-breakdown td.num::before { content: attr(data-col); display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--up-charcoal-soft); white-space: normal; margin-bottom: 0.1rem; }
  .calc-breakdown tr.row-sub { border-top: 1px solid var(--up-border-strong); }
  .calc-breakdown tr.row-sub th, .calc-breakdown tr.row-sub td { background: none; padding: 0; }
  .calc-breakdown tr.row-total { border-top: 2px solid var(--up-charcoal); }
  .calc-breakdown tr.row-total th, .calc-breakdown tr.row-total td { border-top: 0; }
  .calc-breakdown tr.row-total td.num { font-size: 0.95rem; }
}
/* Very narrow containers: each amount on its own line, label left and value right, so nothing can overlap. */
@container (max-width: 16.5rem) {
  .calc-breakdown tr { grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
  .calc-breakdown td.num { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
  .calc-breakdown td.num::before { display: inline; margin: 0; }
}

/* Section headings within the results */
.page-renovation-costs .reno-section-head { margin: 2.5rem 0 1rem; }
.page-renovation-costs .reno-section-head h3 { margin: 0; font-size: 1.3rem; }
.page-renovation-costs .reno-section-intro { margin: 0.35rem 0 0; font-size: 0.93rem; line-height: 1.55; color: var(--up-charcoal-soft); max-width: 62ch; }
.page-renovation-costs .reno-panel > h3 { margin: 0; font-size: 1.15rem; }
.page-renovation-costs .reno-panel > h3 + .reno-list, .page-renovation-costs .reno-panel > h3 + .calc-hint { margin-top: 0.6rem; }
.page-renovation-costs .reno-summary { margin-top: 1.5rem; }

/* Selected work that can't be priced: compact, clearly separate from the totals */
.page-renovation-costs .reno-unpriced .reno-list { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.55; }
.page-renovation-costs .reno-unpriced .reno-list li { margin: 0.4rem 0; overflow-wrap: break-word; }
.page-renovation-costs .reno-unpriced .reno-list strong { color: var(--up-charcoal); }

/* Notes about your estimate: short groups under small headings, two columns on wider screens */
.page-renovation-costs .reno-notes-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2.5rem; margin-top: 0.9rem; }
@media (min-width: 48rem) { .page-renovation-costs .reno-notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-renovation-costs .reno-note-group { min-width: 0; padding-top: 0.85rem; border-top: 1px solid var(--up-border); }
.page-renovation-costs .reno-note-group h4 { font-family: var(--font-sans); margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--up-green-dark); }
.page-renovation-costs .reno-note-list { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; line-height: 1.55; color: var(--up-charcoal-soft); }
.page-renovation-costs .reno-note-list li { margin: 0 0 0.45rem; overflow-wrap: break-word; }
.page-renovation-costs .reno-note-list li:last-child { margin-bottom: 0; }

/* Category accordions (native details/summary: keyboard and screen reader support built in) */
.page-renovation-costs .reno-cats { display: grid; gap: 0.75rem; }
.page-renovation-costs .reno-cat { background: var(--up-white); border: 1px solid var(--up-border); border-radius: var(--radius-md); padding: 0; margin: 0; transition: border-color var(--transition); }
.page-renovation-costs .reno-cat[open] { border-color: var(--up-border-strong); }
.page-renovation-costs .reno-cat-summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.35rem 1rem;
  padding: 1rem clamp(1rem, 2.5vw, 1.5rem); min-height: 56px; border-radius: var(--radius-md);
}
.page-renovation-costs .reno-cat-summary::-webkit-details-marker { display: none; }
.page-renovation-costs .reno-cat-summary::after { content: none; }
.page-renovation-costs .reno-cat-summary:hover .reno-cat-title { color: var(--up-green-dark); }
.page-renovation-costs .reno-cat-summary:focus-visible { outline: 3px solid var(--up-green); outline-offset: 2px; }
.page-renovation-costs .reno-cat-title { font-weight: 700; color: var(--up-charcoal); font-size: 1.05rem; }
.page-renovation-costs .reno-cat-figures { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.page-renovation-costs .reno-cat-total { font-weight: 700; color: var(--up-green-dark); font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-renovation-costs .reno-cat-total-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--up-charcoal-soft); margin-right: 0.3rem; }
.page-renovation-costs .reno-cat-range { font-weight: 500; color: var(--up-charcoal-soft); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-renovation-costs .reno-cat-chevron { width: 10px; height: 10px; border: solid var(--up-charcoal-soft); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform var(--transition); margin-left: 0.25rem; }
.page-renovation-costs .reno-cat[open] .reno-cat-chevron { transform: translateY(2px) rotate(-135deg); }
.page-renovation-costs .reno-cat-body { padding: 0.25rem clamp(1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.5rem); border-top: 1px solid var(--up-border); padding-top: 1rem; }
.page-renovation-costs .reno-cat-covered { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--up-charcoal-soft); }
.page-renovation-costs .reno-cat-covered ul, .page-renovation-costs .reno-cat-notes ul { margin: 0.35rem 0 0; }
.page-renovation-costs .reno-cat-notes, .page-renovation-costs .reno-cat-unpriced { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--up-charcoal-soft); }
.page-renovation-costs .reno-cat-notes li, .page-renovation-costs .reno-cat-covered li { overflow-wrap: anywhere; }
@media (max-width: 479.98px) {
  .page-renovation-costs .reno-cat-summary { grid-template-columns: minmax(0, 1fr) auto; }
  .page-renovation-costs .reno-cat-title { grid-column: 1; }
  .page-renovation-costs .reno-cat-chevron { grid-column: 2; grid-row: 1; }
  .page-renovation-costs .reno-cat-figures { grid-column: 1 / -1; grid-row: 2; align-items: flex-start; text-align: left; }
}

/* What's included / Not included, two balanced columns from tablet up */
/* Included and not included: side by side when the lists are similar in length (each box sized to its own content,
   not stretched), stacked full width when one is much longer. Long lists flow into two columns on wider screens. */
.page-renovation-costs .reno-incl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-top: 1.1rem; align-items: start; }
@media (min-width: 45rem) { .page-renovation-costs .reno-incl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 45rem) { .page-renovation-costs .reno-incl-grid--stacked { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } }
.page-renovation-costs .reno-incl-grid--stacked .reno-list--cols { columns: 2 16rem; column-gap: 2.25rem; }
.page-renovation-costs .reno-incl .reno-list--cols li { break-inside: avoid; }
.page-renovation-costs .reno-incl-toggle { margin-top: 0.5rem; }
.page-renovation-costs .reno-incl { background: var(--up-off-white); border-radius: 12px; padding: 0.9rem 1.1rem 1rem; min-width: 0; }
.page-renovation-costs .reno-incl h4 { font-family: var(--font-sans); margin: 0 0 0.45rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--up-charcoal-soft); }
.page-renovation-costs .reno-incl--yes h4 { color: var(--up-green-dark); }
.page-renovation-costs .reno-incl .reno-list { padding-left: 1.05rem; font-size: 0.9rem; line-height: 1.5; }
.page-renovation-costs .reno-incl .reno-list li { margin: 0.2rem 0; }

/* Costs not included in your estimate */
.page-renovation-costs .reno-exclusions { margin-top: 1.25rem; }
.page-renovation-costs .reno-excl-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem 2.5rem; margin-top: 1.1rem; }
@media (min-width: 720px) { .page-renovation-costs .reno-excl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-renovation-costs .reno-excl-group { min-width: 0; padding-top: 0.85rem; border-top: 1px solid var(--up-border); }
.page-renovation-costs .reno-excl-title { font-family: var(--font-sans); margin: 0 0 0.4rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--up-charcoal-soft); }
.page-renovation-costs .reno-excl-list { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; line-height: 1.5; color: var(--up-charcoal); }
.page-renovation-costs .reno-excl-list li { position: relative; padding-left: 1rem; margin: 0.3rem 0; }
.page-renovation-costs .reno-excl-list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--up-border-strong); }
.page-renovation-costs .reno-excl-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem; min-height: 44px; padding: 0 0.1rem;
  background: none; border: 0; font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--up-green-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.page-renovation-costs .reno-excl-toggle[hidden] { display: none; }
.page-renovation-costs .reno-excl-toggle svg { transition: transform var(--transition); }
.page-renovation-costs .reno-excl-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.page-renovation-costs .reno-excl-toggle:hover { color: var(--up-green); }
.page-renovation-costs .reno-excl-toggle:focus-visible { outline: 3px solid var(--up-green); outline-offset: 2px; border-radius: 6px; }

/* Disclaimer */
/* Sits directly below the calculator and results, before and after an estimate: visible but restrained. */
.page-renovation-costs .reno-disclaimer { font-size: 0.9rem; line-height: 1.6; margin-top: 2rem; background: var(--up-white); border: 1px solid var(--up-border); border-left: 4px solid var(--up-green); }
.page-renovation-costs .reno-disclaimer > h2 { margin: 0 0 0.6rem; font-family: inherit; font-size: 1.1rem; line-height: 1.35; color: var(--up-charcoal); }
.page-renovation-costs .reno-disclaimer .reno-disclaimer-foot { font-size: 0.85rem; }
.page-renovation-costs .reno-disclaimer a { color: var(--up-green-dark); font-weight: 600; }
.page-renovation-costs .reno-disclaimer p { margin: 0 0 0.65rem; color: var(--up-charcoal-soft); }
.page-renovation-costs .reno-disclaimer p:last-child { margin-bottom: 0; }

/* Next steps */
.page-renovation-costs .reno-next { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--up-border); }
.page-renovation-costs .reno-next > h3 { margin: 0; font-size: 1.3rem; }
.page-renovation-costs .reno-next-grid { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
@media (min-width: 720px) { .page-renovation-costs .reno-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.page-renovation-costs .reno-next-grid > li { display: flex; min-width: 0; }
.page-renovation-costs .reno-next-card {
  display: flex; flex-direction: column; gap: 0.35rem; width: 100%; padding: 1.1rem 1.25rem; background: var(--up-white);
  border: 1px solid var(--up-border); border-left: 3px solid var(--up-green); border-radius: 12px; color: var(--up-charcoal); text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.page-renovation-costs .reno-next-card:hover { border-color: var(--up-green); box-shadow: var(--shadow-sm); }
.page-renovation-costs .reno-next-card:focus-visible { outline: 3px solid var(--up-green); outline-offset: 2px; }
.page-renovation-costs .reno-next-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--up-green-dark); }
.page-renovation-costs .reno-next-card:hover .reno-next-title { text-decoration: underline; text-underline-offset: 3px; }
.page-renovation-costs .reno-next-title svg { flex: 0 0 auto; margin-top: 0.1rem; transition: transform var(--transition); }
.page-renovation-costs .reno-next-card:hover .reno-next-title svg { transform: translateX(2px); }
.page-renovation-costs .reno-next-desc { font-size: 0.88rem; line-height: 1.5; color: var(--up-charcoal-soft); }
@media (prefers-reduced-motion: reduce) {
  .page-renovation-costs .reno-next-card, .page-renovation-costs .reno-next-title svg, .page-renovation-costs .reno-cat-chevron, .page-renovation-costs .reno-excl-toggle svg { transition: none; }
}

/* Print: show the full breakdown and every exclusion */
@media print {
  .reno-table-scroll { overflow: visible; background: none; }
  .reno-scroll-hint, .reno-excl-toggle { display: none !important; }
  .reno-excl-list li[hidden], .reno-incl li[hidden] { display: list-item !important; }
}

/* Supporting cost guides (bathroom, kitchen, extension): three balanced cards below the calculator */
.page-renovation-costs .reno-guides { padding-top: clamp(2rem, 5vw, 3.5rem); }
.page-renovation-costs .reno-guides-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .page-renovation-costs .reno-guides-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-renovation-costs .reno-guide-card { display: flex; flex-direction: column; background: var(--up-white); border: 1px solid var(--up-border); border-top: 4px solid var(--up-green, #188942); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem; font-size: 0.95rem; color: var(--up-charcoal-soft); }
.page-renovation-costs .reno-guide-card h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.85rem; color: var(--up-charcoal); }
.page-renovation-costs .reno-guide-card p { margin: 0 0 0.85rem; }
.page-renovation-costs .reno-guide-card .reno-guide-link { margin: auto 0 0; padding-top: 0.85rem; border-top: 1px solid var(--up-border); font-size: 0.9rem; }
.page-renovation-costs .reno-guide-card a { color: var(--up-green-dark, var(--up-green, #188942)); font-weight: 600; }

/* Methodology: four equal cards in a 2 x 2 grid on desktop (equal rows from grid-auto-rows, no fixed heights),
   one column with natural heights below 62.5rem (1000px at default text size, so enlarged text stacks sooner).
   VAT and sources run full width beneath. */
.page-renovation-costs .reno-method { margin-top: 0; }
.page-renovation-costs .reno-method .section-head { margin-inline: auto; }
.page-renovation-costs .reno-method-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 62.5rem) { .page-renovation-costs .reno-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1.75rem; } }
.page-renovation-costs .reno-method-block, .page-renovation-costs .reno-method-sources {
  background: var(--up-white); border: 1px solid var(--up-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 3vw, 1.85rem); font-size: 1rem; line-height: 1.65; color: var(--up-charcoal-soft); min-width: 0; overflow-wrap: break-word;
}
.page-renovation-costs .reno-method-block h3, .page-renovation-costs .reno-method-sources h3 { margin: 0 0 0.85rem; font-size: 1.25rem; line-height: 1.3; color: var(--up-charcoal); }
.page-renovation-costs .reno-method-block p, .page-renovation-costs .reno-method-sources p { margin: 0 0 0.9rem; }
.page-renovation-costs .reno-method-block > :last-child, .page-renovation-costs .reno-source > :last-child { margin-bottom: 0; }
.page-renovation-costs .reno-method-block strong { color: var(--up-charcoal); }
.page-renovation-costs .reno-method-list { margin: 0 0 0.9rem; padding-left: 1.2rem; list-style: disc; }
.page-renovation-costs .reno-method-list li { display: list-item; }
.page-renovation-costs .reno-method-list li { margin: 0 0 0.35rem; padding-left: 0.15rem; }
.page-renovation-costs .reno-method-list li::marker { color: var(--up-green); }
.page-renovation-costs .reno-method-facts { margin: 0; display: grid; gap: 0.9rem; }
.page-renovation-costs .reno-method-facts > div { padding-top: 0.9rem; border-top: 1px solid var(--up-border); }
.page-renovation-costs .reno-method-facts > div:first-child { padding-top: 0; border-top: 0; }
.page-renovation-costs .reno-method-facts dt { font-weight: 700; color: var(--up-charcoal); margin: 0 0 0.2rem; }
.page-renovation-costs .reno-method-facts dd { margin: 0; }
/* Compact facts list: the term runs into its description, which keeps the card close to its neighbours' height. */
.page-renovation-costs .reno-method-facts--compact { gap: 0.7rem; }
.page-renovation-costs .reno-method-facts--compact > div { padding-top: 0.7rem; }
.page-renovation-costs .reno-method-facts--compact dt { display: inline; margin: 0; }
.page-renovation-costs .reno-method-facts--compact dt::after { content: ". "; }
.page-renovation-costs .reno-method-facts--compact dd { display: inline; }
.page-renovation-costs .reno-method-vat, .page-renovation-costs .reno-method-sources { margin-top: 1.5rem; }
@media (min-width: 62.5rem) { .page-renovation-costs .reno-method-vat, .page-renovation-costs .reno-method-sources { margin-top: 1.75rem; } }
.page-renovation-costs .reno-method-lead { font-size: 1.05rem; }
.page-renovation-costs .reno-vat-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 1.1rem; }
@media (min-width: 720px) { .page-renovation-costs .reno-vat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-renovation-costs .reno-vat-rate { background: var(--up-green-light); border-radius: var(--radius-sm); padding: 1rem 1.15rem; min-width: 0; }
.page-renovation-costs .reno-vat-rate p { margin: 0; }
.page-renovation-costs .reno-vat-rate .reno-vat-figure { font-family: var(--font-display, inherit); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--up-green-dark); margin-bottom: 0.3rem; }
.page-renovation-costs .reno-sources-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) { .page-renovation-costs .reno-sources-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.page-renovation-costs .reno-source { min-width: 0; }
.page-renovation-costs .reno-source .calc-source-group-label { margin: 0 0 0.4rem; color: var(--up-green-dark); }
.page-renovation-costs .reno-method-sources .reno-source p:not(.calc-source-group-label) { font-size: 0.95rem; }

/* --------------------------------------------------------------------- */
/* Enlarged text (browser text-size settings): no clipping or sideways   */
/* scrolling. Column changes use container queries in rem, so they scale  */
/* with the text size. At the default 16px text the breakpoints match the */
/* viewport ones above exactly (form and results: 640px and 1024px         */
/* viewports; project cards: 720px; closing CTA benefits: 700px), so the   */
/* normal layout does not change.                                          */
/* --------------------------------------------------------------------- */
/* Header: wraps only when the text is enlarged (the thresholds sit below the narrowest widths at 16px text:
   320px on mobile and 1100px with the desktop menu), so the menu button never leaves the screen. */
.page-renovation-costs .site-header { container: site-header / inline-size; }
@container site-header (max-width: 19.9rem) {
  .page-renovation-costs .site-header .wrap { flex-wrap: wrap; }
  .page-renovation-costs .header-actions { margin-left: auto; }
}
@media (min-width: 1100px) {
  @container site-header (max-width: 68rem) {
    .page-renovation-costs .site-header .wrap { flex-wrap: wrap; }
    .page-renovation-costs .header-actions { margin-left: auto; }
  }
}

.page-renovation-costs #reno-form { container: reno-form / inline-size; }
.page-renovation-costs .calculator-steps > *, .page-renovation-costs .calc-step-body, .page-renovation-costs .calc-q { min-width: 0; }
.page-renovation-costs .calc-step-heading, .page-renovation-costs .calc-choice-text, .page-renovation-costs .calc-q legend { min-width: 0; overflow-wrap: break-word; }
.page-renovation-costs .calc-choices,
.page-renovation-costs .calc-choices--3,
.page-renovation-costs .calc-choices--4 { grid-template-columns: minmax(0, 1fr); }
@container reno-form (min-width: 36.78rem) {
  .page-renovation-costs .calc-choices, .page-renovation-costs .calc-choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-renovation-costs .calc-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container reno-form (min-width: 58.85rem) {
  .page-renovation-costs .calc-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page-renovation-costs [data-work-cards] { grid-template-columns: minmax(0, 1fr); }
@container reno-form (min-width: 41.375rem) {
  .page-renovation-costs [data-work-cards] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
}
@container reno-form (max-width: 15rem) { .page-renovation-costs .calc-customise-summary { flex-wrap: wrap; } }
.page-renovation-costs .calc-area-row input { min-width: 0; }

.page-renovation-costs #results { container: reno-results / inline-size; }
.page-renovation-costs .reno-headline { grid-template-columns: minmax(0, 1fr); }
@container reno-results (min-width: 36.78rem) {
  .page-renovation-costs .reno-headline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page-renovation-costs .reno-figure { min-width: 0; }
.page-renovation-costs .reno-cat-total, .page-renovation-costs .reno-cat-range { white-space: normal; }

.page-renovation-costs .reno-cta-section .cta-panel { container: reno-cta / inline-size; }
.page-renovation-costs .reno-cta-section .cta-panel-benefits { grid-template-columns: minmax(0, 1fr); }
@container reno-cta (min-width: 35.85rem) {
  .page-renovation-costs .reno-cta-section .cta-panel-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page-renovation-costs .cta-panel-benefit { min-width: 0; }
.page-renovation-costs .cta-panel-benefit p { min-width: 0; overflow-wrap: break-word; }
.page-renovation-costs .reno-figure--main { order: -1; }
@container reno-results (min-width: 36.78rem) { .page-renovation-costs .reno-figure--main { order: 0; } }

/* Selected work that can't be priced: named next to the headline figures (not in the totals) */
.page-renovation-costs .reno-unpriced-alert { margin: 0 auto 1rem; max-width: 62rem; padding: 0.75rem 1rem; border: 1px solid #e3c9cf; border-left: 4px solid #a13d4f; border-radius: var(--radius-md); background: #fbf3f5; color: var(--up-charcoal); font-size: 0.95rem; font-weight: 600; line-height: 1.5; overflow-wrap: break-word; }
.page-renovation-costs .reno-unpriced-alert[hidden] { display: none; }

/* Headline figures: never wider than their card. The cap (20% of the card's width) only bites when a large value would
   otherwise run past the card edge (for example from 640px to about 750px wide, or with enlarged text). */
.page-renovation-costs .reno-figure { container: reno-figure / inline-size; }
.page-renovation-costs .reno-figure-value { font-size: min(1.9rem, 20cqi); }
.page-renovation-costs .reno-figure--main .reno-figure-value { font-size: min(2.3rem, 20cqi); }

/* Very large text on narrow screens: step headings move below the step number, and long words wrap inside their box */
@container reno-form (max-width: 15rem) {
  .page-renovation-costs .calc-step-summary { flex-wrap: wrap; }
  .page-renovation-costs .calc-step-heading { flex: 1 1 100%; order: 3; }
  .page-renovation-costs .calc-q legend, .page-renovation-costs .calc-choice-title, .page-renovation-costs .calc-step-title { overflow-wrap: anywhere; }
}
.page-renovation-costs .calc-customise, .page-renovation-costs .calc-customise-body { min-width: 0; }
.page-renovation-costs .reno-steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .page-renovation-costs .reno-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-renovation-costs .reno-step, .page-renovation-costs .faq-item, .page-renovation-costs .reno-guide-card, .page-renovation-costs .reno-method-block { min-width: 0; }
.page-renovation-costs main { overflow-wrap: break-word; }
.page-renovation-costs .faq-item summary { min-width: 0; overflow-wrap: anywhere; }