.calculator-page { margin: 0; color: #4d5862; background: #f7f4ef; }
.calculator-page,.calculator-page *,.calculator-page *::before,.calculator-page *::after { box-sizing: border-box; }
.calculator-page main { padding: 0 !important; }
.calculator-page .menu a.active { color: #c96400; }
.calculator-hero { padding: clamp(42px, 7vw, 68px) 0 clamp(50px, 7vw, 72px); background: linear-gradient(115deg, rgba(27,39,50,.96), rgba(44,54,62,.88)), url("images/renovatieplanner-hero-background.png") center/cover; color: #fff; }
.calculator-hero__inner { max-width: 790px; text-align: center; }
.calculator-kicker { display: inline-block; margin-bottom: 11px; color: #ff9d3b; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.calculator-hero h1 { margin: 0; color: #fff !important; font-size: clamp(36px, 6vw, 58px); line-height: 1.02; }
.calculator-hero p { max-width: 690px; margin: 15px auto 0; color: rgba(255,255,255,.86); font-size: clamp(15px, 2vw, 18px); line-height: 1.55; }
.calculator-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 700; }
.calculator-trust span::before { content: "✓"; margin-right: 6px; color: #ff920f; font-weight: 900; }

.calculator-shell-section { position: relative; z-index: 2; margin: 0; padding: clamp(22px, 4vw, 38px) 0 clamp(56px, 8vw, 90px); background: #f7f4ef; }
.calculator-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.calculator-card,.calculator-aside section { border: 1px solid rgba(52,64,74,.12); background: rgba(255,255,255,.97); box-shadow: 0 22px 58px rgba(24,34,43,.12); }
.calculator-card { min-height: 0; padding: clamp(20px, 4vw, 38px); border-radius: 22px; }
.calculator-aside { display: grid; gap: 12px; }
.calculator-aside section { padding: 20px; border-radius: 16px; box-shadow: 0 12px 32px rgba(24,34,43,.08); }
.calculator-aside h2 { margin: 0 0 10px; color: #3a4650; font-size: 16px; font-weight: 750; }
.calculator-aside p,.calculator-aside li { color: #68727b; font-size: 12.5px; line-height: 1.5; }
.calculator-aside ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.calculator-aside li { padding-left: 18px; position: relative; }
.calculator-aside li::before { content: "✓"; position: absolute; left: 0; color: #ea7907; font-weight: 900; }
.calculator-text-button { justify-self: start; border: 0; background: transparent; color: #bd5f00; font: inherit; font-size: 12px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.calculator-progress { display: grid; grid-template-columns: auto minmax(130px, 220px); align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.calculator-progress > span { color: #6a747d; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.calculator-progress__track { overflow: hidden; height: 5px; border-radius: 99px; background: #eee8df; }
.calculator-progress__track span { display: block; width: 8%; height: 100%; border-radius: inherit; background: #ff8500; transition: width .25s ease; }
.calculator-status { display: none; margin: 0 0 18px; padding: 11px 13px; border-radius: 9px; font-size: 13px; font-weight: 800; }
.calculator-status.error { display: block; border: 1px solid #edc1b9; background: #fff1ee; color: #8b3124; }
.calculator-status.success { display: block; border: 1px solid #b9dec7; background: #edf8f1; color: #18623a; }
.calculator-screen h2 { margin: 0; color: #3a4650; font-size: clamp(24px, 4vw, 34px); font-weight: 750; line-height: 1.15; }
.calculator-screen > p,.screen-intro { max-width: 670px; margin: 8px 0 22px; color: #69737d; font-size: 14px; line-height: 1.55; }

.sector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sector-card,.work-type-card { position: relative; min-height: 78px; padding: 14px; border: 1px solid #ded8ce; border-radius: 12px; background: #fff; color: #46515b; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.sector-card strong,.work-type-card strong { display: block; font-size: 13px; line-height: 1.3; }
.sector-card span,.work-type-card span { display: block; margin-top: 5px; color: #78818a; font-size: 10.5px; line-height: 1.4; }
.sector-card:not(:disabled):hover,.sector-card:not(:disabled):focus-visible,.work-type-card:hover,.work-type-card:focus-visible { border-color: #ff8500; box-shadow: 0 7px 19px rgba(32,42,51,.08); transform: translateY(-1px); outline: none; }
.sector-card:disabled { padding-top: 26px; border-style: dashed; background: #faf8f4; color: #79818a; cursor: not-allowed; opacity: .82; }
.sector-card__status { position: absolute; top: 7px; right: 8px; margin: 0!important; color: #a45a17!important; font-size: 8px!important; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.work-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }

.calculator-form { display: grid; gap: 14px; }
.calculator-field { min-inline-size: 0; display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.calculator-field > label,.calculator-field legend { color: #46515b; font-size: 13px; font-weight: 750; }
.calculator-field small { color: #707a83; font-size: 11.5px; line-height: 1.45; }
.calculator-field select { width: 100%; min-width: 0; min-height: 48px; padding: 10px 38px 10px 12px; border: 1px solid #d8d2c7; border-radius: 9px; background: #fff; color: #26323d; font: inherit; font-size: 15px; }
.calculator-field select:focus { border-color: #ff8500; outline: 3px solid rgba(255,133,0,.14); outline-offset: 1px; }
.calculator-field__input { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) max-content; align-items: stretch; gap: 0; overflow: hidden; border: 1px solid #d8d2c7; border-radius: 9px; background: #fff; }
.calculator-field__input:focus-within { border-color: #ff8500; box-shadow: 0 0 0 3px rgba(255,133,0,.14); }
.calculator-field__input input { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; color: #26323d; font: inherit; font-size: 15px; }
.calculator-field__input input:focus { outline: 0; }
.calculator-field__unit { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-left: 1px solid #e2ddd5; background: #f7f4ef; color: #5d6872; font-size: 12px; font-weight: 800; white-space: nowrap; }
.boolean-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.boolean-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 11px; border: 1px solid #ddd6cc; border-radius: 9px; color: #4d5862; font-size: 13px; font-weight: 700; cursor: pointer; }
.boolean-options label:hover,.boolean-options label:focus-within { border-color: #f3a451; }
.boolean-options label:has(input:checked) { border-color: #ff8500; background: #fff7ed; color: #8a4800; }
.boolean-options input { width: 17px; height: 17px; min-height: auto; accent-color: #ef7a05; }

.calculator-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.calculator-button { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 9px 18px; border: 0; border-radius: 999px; background: #ff8500; color: #fff; font: inherit; font-size: 13px; font-weight: 900; line-height: 1.25; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; }
.calculator-button:hover,.calculator-button:focus-visible { background: #e87500; outline: 3px solid rgba(255,133,0,.18); outline-offset: 2px; }
.calculator-button.secondary { border: 1px solid #d9d2c7; background: #fff; color: #4b5660; }
.calculator-button.secondary:hover { background: #f8f5ef; }
.calculator-button.danger { color: #8a3729; }
.calculator-button:disabled { cursor: wait; opacity: .55; }

.project-review-list { display: grid; gap: 10px; }
.project-review-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px; border: 1px solid #dfd9cf; border-radius: 12px; background: #fff; }
.project-review-card strong { display: block; color: #26323d; font-size: 14px; }
.project-review-card span { display: block; margin-top: 4px; color: #707a83; font-size: 12px; }
.project-review-actions { display: flex; gap: 7px; }
.project-review-actions button { border: 0; background: transparent; color: #b55a00; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.review-note { margin-top: 18px; padding: 13px; border: 1px solid #f1cfaa; border-radius: 10px; background: #fff7ee; color: #624a33; font-size: 12px; line-height: 1.5; }

.result-projects { display: grid; gap: 18px; }
.result-card { overflow: hidden; border: 1px solid #ddd7cc; border-radius: 15px; background: #fff; }
.result-card__head { display: flex; justify-content: space-between; gap: 16px; padding: 17px; background: #f8f5ef; }
.result-card__head h3 { margin: 0; color: #2b3742; font-size: 16px; }
.result-card__head span { color: #6f7881; font-size: 11px; }
.result-range { text-align: right; }
.result-range strong { display: block; color: #d76b00; font-size: 18px; }
.result-range small { color: #737c84; font-size: 10px; }
.result-card__body { padding: 17px; }
.result-vat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.result-vat-grid div { padding: 10px; border-radius: 9px; background: #f7f5f1; }
.result-vat-grid small { display: block; color: #78818a; font-size: 9.5px; text-transform: uppercase; }
.result-vat-grid strong { display: block; margin-top: 3px; color: #34404a; font-size: 12px; }
.result-breakdown { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 11.5px; }
.result-breakdown th,.result-breakdown td { padding: 8px 5px; border-bottom: 1px solid #ece7df; text-align: left; vertical-align: top; }
.result-breakdown th:last-child,.result-breakdown td:last-child { text-align: right; }
.result-notes { display: grid; gap: 7px; margin-top: 13px; padding: 0; list-style: none; }
.result-notes li { color: #6c757e; font-size: 11.5px; line-height: 1.45; }
.result-notes li::before { content: "•"; margin-right: 7px; color: #ef7a05; font-weight: 900; }
.total-card { margin-top: 18px; padding: clamp(18px, 4vw, 28px); border-radius: 16px; background: #29343e; color: #fff; }
.calculator-page .total-card h3 { margin: 0; color: #fff !important; font-size: 18px; }
.total-card__range { margin-top: 8px; color: #ff9a32; font-size: clamp(26px, 5vw, 38px); font-weight: 900; }
.total-card p { margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 11.5px; line-height: 1.5; }
.calculator-disclaimer { margin-top: 14px; padding: 13px; border-left: 3px solid #ff8500; background: #fff8f0; color: #5e5145; font-size: 11.5px; line-height: 1.5; }
@media (max-width: 900px) {
  .calculator-layout { grid-template-columns: 1fr; }
  .calculator-aside { grid-template-columns: 1fr 1fr; }
  .calculator-text-button { grid-column: 1/-1; }
}
@media (max-width: 680px) {
  .calculator-hero { padding-top: 34px; padding-bottom: 46px; }
  .calculator-shell-section { margin: 0; padding-top: 16px; }
  .calculator-card { min-height: 0; padding: 18px 14px; border-radius: 17px; }
  .calculator-progress { grid-template-columns: 1fr; gap: 8px; margin-bottom: 22px; }
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .work-type-grid { grid-template-columns: 1fr; }
  .calculator-aside { grid-template-columns: 1fr; }
  .project-review-card { grid-template-columns: 1fr; }
  .project-review-actions { justify-content: flex-start; }
  .result-card__head { display: grid; }
  .result-range { text-align: left; }
  .result-vat-grid { grid-template-columns: 1fr; }
  .result-breakdown th:nth-child(2),.result-breakdown td:nth-child(2) { display: none; }
  .calculator-field__unit { max-width: 46vw; padding-inline: 10px; }
  .calculator-actions { align-items: stretch; }
  .calculator-actions .calculator-button { flex: 1 1 180px; min-height: 46px; }
}

@media (max-width: 430px) {
  .sector-grid { grid-template-columns: 1fr; }
  .calculator-card { min-height: 0; }
  .calculator-actions .calculator-button { flex-basis: 100%; width: 100%; }
}