@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-400.ttf') format('truetype')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/inter-500.ttf') format('truetype')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-600.ttf') format('truetype')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/inter-700.ttf') format('truetype')}
@font-face{font-family:Saira;font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/saira-500.ttf') format('truetype')}
@font-face{font-family:Saira;font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/saira-600.ttf') format('truetype')}

:root {
  --ink: #00535e;
  --hero: #004851;
  --accent: #00b3ad;
  --primary-gradient: linear-gradient(105deg, #00b3ad, #0097a4);
  --page: #e8f7f8;
  --muted: #5d7b89;
  --border: #d5e1e7;
  --disabled: #f0f3f4;
  --error: #b43b43;
  /* Shared spacing and type scale across the four wizard views. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --text-small: 12px;
  --text-caption: 13px;
  --text-label: 14px;
  --text-body: 16px;
  --page-gutter: 24px;
  --card-padding: 32px;
  --section-gap: 48px;
  --control-height: 52px;
  --action-height: 60px;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--page); }
.wizard-progress { position: fixed; inset: 0 0 auto; height: 5px; z-index: 9; pointer-events: none; }
.wizard-progress-fill { display: block; height: 100%; width: calc(100% / 3); background: var(--primary-gradient); transition: width .3s ease; }
.wizard-progress[aria-valuenow="2"] .wizard-progress-fill { width: calc(200% / 3); }
.wizard-progress[aria-valuenow="3"] .wizard-progress-fill { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .wizard-progress-fill { transition: none; }
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #007f8a; outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 12px 20px; border-radius: 8px; background: white; color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { position: relative; z-index: 1; padding: var(--space-10) var(--page-gutter) 0; text-align: center; }
.brand-logo { display: block; width: 250px; max-width: 100%; height: auto; margin: 0 auto; }
main { padding: 0 var(--page-gutter) 80px; }
.introduction { position: relative; isolation: isolate; margin: var(--space-16) auto 0; text-align: center; }
/* Follow the actual title height, including long names and enlarged text. */
.introduction::before { content: ''; position: absolute; z-index: -1; top: -1000px; bottom: calc(-1 * var(--section-gap) - 80px); left: calc(-1 * var(--page-gutter)); right: calc(-1 * var(--page-gutter)); background: var(--hero); pointer-events: none; }
body[data-step="2"] .introduction::before, body[data-step="3"] .introduction::before { background: linear-gradient(105deg, #004851, #1c292e); }
body[data-step="loading"] .introduction::before { display: none; }
.steps ol { display: flex; align-items: center; justify-content: center; gap: 25px; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; display: flex; gap: 8px; align-items: center; color: #608994; font-size: 14px; line-height: 24px; font-weight: 600; }
.steps li:not(:last-child)::after { position: absolute; right: -16px; width: 9px; height: 9px; content: ''; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.steps .step-current { color: var(--accent); }
.steps .step-complete { color: var(--accent); }
.step-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.step-link:disabled { cursor: default; }
.step-link:not(:disabled) { min-height: 44px; margin-block: -10px; }
.step-link:not(:disabled):hover { text-decoration: underline; text-underline-offset: 4px; }
.step-complete .step-number { background: var(--accent); }
body[data-step="3"] #page-title { overflow-wrap: anywhere; }
#page-title:focus { outline: none; }
.step-number { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: #608994; color: var(--hero); font-size: 11px; line-height: 1; }
.step-current .step-number { background: var(--accent); box-shadow: 0 0 14px #00b3ad55; }
h1 { max-width: 880px; margin: var(--space-6) auto 0; color: #e7f8fa; font: 500 clamp(40px, 3.4vw, 48px)/1.2 Saira, sans-serif; letter-spacing: .1px; text-wrap: balance; }
h1 span { color: var(--accent); }
.introduction > p { max-width: 720px; margin: var(--space-4) auto 0; color: #c4e0e5; font-size: var(--text-body); line-height: 1.5; text-wrap: pretty; }
.quote-card { position: relative; z-index: 1; max-width: 696px; margin: var(--section-gap) auto 0; padding: var(--card-padding); border: 1px solid var(--border); border-radius: 20px; background: #fff; }
.personal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.personal-card label .optional { font-weight: 400; }
.contact-preference { min-width: 0; padding: 0; margin: -8px 0; border: 0; }
.contact-preference legend { float: left; padding: 0; margin-right: 16px; font-size: 14px; font-weight: 700; line-height: 44px; }
.contact-options { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; }
.contact-options label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; color: var(--muted); font-size: 14px; font-weight: 400; cursor: pointer; }
.contact-options input { appearance: auto; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: #008d91; flex: 0 0 auto; cursor: pointer; }
.input-hint { margin: var(--space-2) 0 0; font-size: var(--text-caption); line-height: 1.5; color: var(--muted); }
#get-quote { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: var(--space-6); }
.button-arrow { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: #ffffff30; font-size: 27px; line-height: 1; font-weight: 400; }
.back-navigation { margin: var(--space-4) 0 0; color: #536e7b; text-align: center; font-size: 14px; }
.back-navigation button { min-height: 44px; }
body[data-step="2"] .process-help { margin-top: var(--space-4); }
.budget-section { position: relative; z-index: 1; max-width: 1328px; margin: var(--section-gap) auto 0; }
.budget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.budget-grid[data-count="1"] { max-width: 430px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
.budget-grid[data-count="2"] { max-width: 880px; margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.budget-vehicle { display: flex; flex-direction: column; min-width: 0; padding: 0 20px 20px; border: 1px solid var(--border); border-radius: 20px; background: #fff; scroll-margin-top: 78px; }
.budget-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); min-height: 50px; padding: var(--space-3); margin-bottom: var(--space-5); border-radius: 0 0 10px 10px; background: var(--page); color: #00898c; text-align: center; text-transform: uppercase; font-size: 14px; line-height: 18px; font-weight: 700; }
.budget-best-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: #00515b; color: #fff; font-size: var(--text-small); line-height: 18px; font-weight: 700; white-space: nowrap; }
.budget-picture { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: #eff6f6; }
.budget-picture img { display: block; position: relative; width: 100%; height: 100%; object-fit: cover; }
.budget-picture figcaption { position: absolute; bottom: 7px; right: 7px; padding: 3px 6px; border-radius: 4px; color: #fff; background: #153a40d9; font-size: 10px; }
.budget-image-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--muted); font-size: 13px; }
.budget-image-fallback svg { width: 110px; fill: none; stroke: #8eaeb5; stroke-width: 2; stroke-linejoin: round; }
.budget-identity { padding: var(--space-5) 0; }
.budget-identity h2 { margin: 0; font: 700 22px/1.3 Inter, sans-serif; overflow-wrap: anywhere; }
.budget-version { margin: var(--space-1) 0 0; color: #52717b; font-size: var(--text-label); font-weight: 600; line-height: 1.4; }
.budget-details { margin: var(--space-2) 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.budget-origin { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.budget-origin-flag { flex: 0 0 20px; width: 20px; height: 15px; object-fit: contain; }
.budget-price { padding: var(--space-5); border-radius: 16px; background: var(--hero); color: #fff; }
.budget-price-label { margin: 0; font-size: var(--text-label); font-weight: 600; }
.budget-price-amount { margin: var(--space-2) 0 var(--space-1); font-size: 36px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.budget-price-range { margin: 0 0 var(--space-5); color: #b5d5d9; font-size: var(--text-caption); line-height: 1.6; font-variant-numeric: tabular-nums; }
.budget-price-range span { white-space: nowrap; }
.budget-price-amount:has(+ .budget-services) { margin-bottom: var(--space-3); }
.budget-included { margin: 0; color: #5ee3da; font-size: 13px; font-weight: 600; }
.budget-services { margin: var(--space-2) 0 0; color: #b5d5d9; font-size: 12px; line-height: 1.6; }
.budget-reference { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px dashed #528087; }
.budget-reference-copy { flex: 1; min-width: 0; font-size: var(--text-caption); line-height: 1.5; }
.budget-reference-copy > span { font-weight: 600; }
.budget-metric-description { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--muted); }
.budget-reference .budget-metric-description { color: #b5d5d9; }
.budget-reference strong { flex-shrink: 0; font-size: 17px; }
.budget-equipment { margin-top: var(--space-4); padding: var(--space-5); border-radius: 16px; background: var(--page); }
.budget-equipment h3 { margin: 0; font: 700 16px/1.5 Inter, sans-serif; }
.budget-equipment-intro { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-caption); line-height: 1.5; color: var(--muted); }
.budget-equipment ul { padding: 0; margin: 0; list-style: none; }
.budget-equipment li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; font-size: var(--text-label); color: #4b6d79; line-height: 1.4; }
.budget-equipment li + li { border-top: 1px dashed #ccdee1; }
.equipment-tick { color: #008d90; font-size: 17px; font-weight: 600; }
.budget-equipment small { display: block; margin-top: var(--space-1); font-size: var(--text-small); color: var(--muted); }
.budget-summary { margin-top: auto; padding-top: var(--space-5); }
.budget-metrics { margin: 0 0 var(--space-5); }
.budget-metrics > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; }
.budget-metrics > div + div { border-top: 1px dashed var(--border); }
.budget-metrics dt { min-width: 0; font-size: var(--text-caption); line-height: 1.5; color: var(--ink); font-weight: 600; }
.budget-metrics dd { margin: 0; font-size: 18px; font-weight: 700; white-space: nowrap; }
.budget-metrics > div:last-child { color: var(--ink); }
.budget-no-saving { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.budget-consult, .contact-whatsapp { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; text-decoration: none; }
/* Compensate for the transparent padding in the supplied 800 × 800 SVG. */
.whatsapp-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; transform: scale(1.5); }
.budget-consult-label { min-width: 0; }
.budget-consult.continue-button { margin: 0; padding-inline: 12px; font-size: var(--text-body); }
.budget-contact-hint { margin: var(--space-3) 0 0; font-size: var(--text-small); line-height: 1.5; color: var(--muted); text-align: center; }
.budget-notes { max-width: 880px; margin: var(--space-8) auto var(--space-4); text-align: center; color: #4d6c76; font-size: 13px; line-height: 1.7; }
.budget-notes p { margin: 0 0 12px; }
.budget-navigation { font-size: var(--text-label); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.budget-navigation button { min-height: 44px; }
.budget-jump { display: none; }
body[data-step="3"] .process-help { margin-top: var(--space-6); }
@media (max-width: 999px) {
  body[data-step="3"] .introduction::before { bottom: calc(-1 * var(--section-gap) - 144px); }
  .budget-grid, .budget-grid[data-count="2"] { max-width: 480px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .budget-jump { display: flex; position: sticky; top: 5px; z-index: 2; justify-content: center; gap: 4px; max-width: 480px; padding: 8px 4px; margin: 0 auto 16px; background: #e8f7f8f5; border-radius: 10px; box-shadow: 0 2px 8px #00485112; }
  .budget-jump-link { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; color: var(--ink); border: 1px solid #b9d7dc; border-radius: 7px; text-decoration: none; text-align: center; font-size: var(--text-small); line-height: 1.4; overflow-wrap: anywhere; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .budget-grid { gap: var(--space-4); }
  .budget-vehicle { padding-inline: var(--space-4); }
  .budget-price, .budget-equipment { padding: var(--space-4); }
  .budget-reference, .budget-metrics > div { flex-wrap: wrap; gap: var(--space-2); }
  .budget-reference-copy, .budget-metrics dt { flex-basis: 100%; }
}
.catalogue-message { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.catalogue-message button { display: block; margin-top: 10px; }
.vehicle { min-width: 0; padding: 0; margin: 0; border: 0; }
.vehicle-count { margin: 0 0 var(--space-2); font-size: var(--text-caption); line-height: 20px; color: #536e7b; }
.required-hint { margin: 0 0 var(--space-6); color: #536e7b; font-size: var(--text-caption); line-height: 1.5; }
.editor-footer { padding-top: 16px; }
.editor-footer > .vehicle-actions { justify-content: flex-end; }
.editor-feedback:not(:empty), .summary-feedback:not(:empty) { margin-bottom: 18px; }
.range-note { margin: 6px 0 0; color: #536e7b; font-size: 12px; line-height: 1.5; }
.vehicle + .vehicle { border-top: 1px solid var(--border); }
.vehicle[data-expanded="true"]:not(:first-child) { padding-top: 16px; }
.vehicle[data-expanded="true"]:not(:last-child) { padding-bottom: 24px; }
.vehicle-summary { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; }
.vehicle-badge { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #c6dcdf; border-radius: 50%; background: #f3fafb; color: #527e89; font-size: 12px; font-weight: 600; }
.summary-copy { min-width: 0; }
.summary-title { margin: 0; font: 700 14px/1.5 Inter, sans-serif; overflow-wrap: anywhere; }
.summary-details { margin: 2px 0 0; font-size: 12px; line-height: 1.6; color: #597886; overflow-wrap: anywhere; }
.vehicle-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.editing-title { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.editing-title h2 { margin: 0; font: 700 13px/1.5 Inter, sans-serif; text-transform: uppercase; }
.editing-title span { font-size: var(--text-small); color: #597886; }
.vehicle-actions { display: flex; align-items: center; gap: 8px; }
.action-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #527480; font-size: var(--text-caption); line-height: 1.4; white-space: nowrap; }
.action-button svg { flex: 0 0 auto; }
.action-button:hover { background: #edf7f8; color: var(--ink); }
.action-danger { color: #a04747; }
.action-danger:hover { background: #fff2f1; color: #923333; }
.save-car { color: #007b80; font-weight: 600; }
.vehicle:has(.vehicle-summary:not([hidden])) { scroll-margin-top: 24px; }
.vehicle-heading, select, input { scroll-margin-top: 28px; }
.confirmation-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.confirmation-actions button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px; background: white; color: var(--ink); font-size: 14px; }
.confirmation-actions .confirm-removal { background: #a04747; color: white; border-color: #a04747; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-6); }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
label, .field-label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 700; }
select, input { display: block; width: 100%; height: var(--control-height); padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: 8px; background-color: #fff; color: var(--ink); font-size: var(--text-body); line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%2336444b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
select:has(option[value=""]:checked) { color: var(--muted); }
select option { color: var(--ink); }
input::placeholder { color: var(--muted); opacity: 1; }
select:disabled { background-color: var(--disabled); color: var(--muted); opacity: 1; cursor: not-allowed; }
select:hover:not(:disabled), input:hover { border-color: #9bb8c1; }
select:focus, input:focus { outline: none; border-color: #009c9e; box-shadow: 0 0 0 3px #00b3ad22; }
.range-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.range-fields select { padding-left: 14px; padding-right: 28px; background-position: right 12px center; }
.field-help { margin: var(--space-2) 0 0; font-size: var(--text-small); line-height: 1.5; color: #566f7b; }
.field-help .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.text-link { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: #00868c; }
.add-car { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: var(--control-height); margin-top: var(--space-6); border: 1px dashed var(--border); border-radius: 10px; background: white; color: #526873; font-size: 16px; transition: background-color .15s, border-color .15s; }
.add-car:hover:not(:disabled) { background: #f2fbfb; border-color: #009c9e; }
.inline-validation { margin-top: 10px; padding: 12px 16px 4px; border-left: 3px solid var(--error); border-radius: 4px 8px 8px 4px; background: #fff5f3; color: #85373a; font-size: 13px; line-height: 1.6; }
.inline-validation p { margin: 0; }
.inline-validation .text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.inline-validation.feedback-success { background: #edf9f7; border-left-color: #008b83; color: #005c58; padding-bottom: 12px; }
.inline-validation:has(.review-fields[hidden]) { padding-bottom: 12px; }
.plus { color: #438c97; font-size: 28px; font-weight: 400; line-height: 1; }
.optional { color: #647f8c; }
.continue-button, .dialog-confirm { width: 100%; min-height: var(--action-height); padding: var(--space-4) var(--space-6); margin-top: var(--space-4); border: 0; border-radius: 10px; background: var(--primary-gradient); box-shadow: 0 8px 20px #00485113; color: white; font-size: var(--text-body); font-weight: 700; line-height: 1.4; transition: filter .15s, transform .15s; }
.continue-button:hover:not(:disabled), .dialog-confirm:hover { filter: brightness(.96); transform: translateY(-1px); }
.continue-button:active:not(:disabled) { transform: translateY(0); }
.continue-button:disabled, .add-car:disabled { opacity: .5; }
.reassurance { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-5) 0 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; text-align: center; }
.reassurance svg { flex: 0 0 auto; }
.process-help { margin: var(--space-8) 0 0; color: #536e7b; font-size: var(--text-label); line-height: 1.5; text-align: center; }
.process-help strong { font-weight: 700; }
.form-notice { margin: 18px 0 0; padding: 14px 16px; border-radius: 8px; background: #e8f7f8; color: var(--ink); font-size: 14px; line-height: 1.6; }
.field-error { margin: var(--space-2) 0 0; color: var(--error); font-size: var(--text-caption); line-height: 1.5; }
[aria-invalid="true"] { border-color: var(--error); }
dialog { position: fixed; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 32px; border: 1px solid var(--border); border-radius: 20px; color: var(--ink); box-shadow: 0 24px 80px #002d4166; }
dialog::backdrop { background: #002f3bd0; }
dialog h2 { margin: 0 32px 20px 0; font: 600 28px/1.2 Saira, sans-serif; }
dialog p, .help-steps { font-size: 14px; line-height: 1.7; }
.help-steps { padding-left: 20px; }
.help-steps li { margin-bottom: 14px; padding-left: 5px; }
.dialog-close { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 28px; }
.dialog-confirm { min-height: 48px; font-size: 15px; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 720px) {
  :root { --page-gutter: 20px; --card-padding: 24px; --section-gap: 32px; --action-height: 56px; }
  .site-header { padding-top: var(--space-6); }
  .brand-logo { width: 220px; }
  main { padding-bottom: var(--space-16); }
  .introduction { margin-top: var(--space-10); }
  .steps ol { gap: 22px; }
  .steps li { gap: 6px; font-size: 11px; line-height: 20px; }
  .step-link { gap: 6px; }
  .steps li:not(:last-child)::after { right: -14px; width: 7px; height: 7px; }
  .step-number { width: 18px; height: 18px; font-size: 10px; }
  h1 { font-size: clamp(30px, 6vw, 40px); }
  .introduction > p { max-width: 490px; font-size: 15px; line-height: 1.5; }
  .desktop-break { display: none; }
  .quote-card { border-radius: 16px; }
  .budget-notes { text-align: left; }
}
@media (max-width: 520px) {
  :root { --page-gutter: 16px; --card-padding: 20px; }
  .steps ol { gap: 16px; }
  .steps li { gap: 4px; font-size: 11px; }
  .steps li:not(:last-child)::after { right: -10px; width: 6px; height: 6px; }
  .step-link { gap: 4px; }
  .personal-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .contact-preference { margin-block: 0; }
  .contact-preference legend { float: none; line-height: 20px; margin: 0 0 6px; font-size: var(--text-label); }
  .contact-options { column-gap: 18px; }
  #get-quote { font-size: 16px; padding-inline: 14px; }
  h1 { font-size: clamp(30px, 7.8vw, 36px); }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  input, select { font-size: 16px; }
  input[data-field="equipment"] { font-size: 16px; text-overflow: ellipsis; }
  .field-help { margin-bottom: 0; }
  .field-help .text-link { min-height: 44px; }
  .add-car { font-size: var(--text-label); gap: var(--space-2); }
  .reassurance { align-items: flex-start; max-width: 280px; margin: var(--space-5) auto 0; font-size: var(--text-small); }
  .process-help strong { display: block; }
  .process-help .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .vehicle-summary { grid-template-columns: 28px minmax(0, 1fr); gap: 6px 10px; padding-block: 16px 10px; }
  .vehicle-badge { width: 28px; height: 28px; align-self: start; }
  .vehicle-summary > .vehicle-actions { grid-column: 2; justify-content: flex-start; gap: 16px; }
  .summary-title { font-size: 14px; }
  .summary-details { font-size: 12px; }
  .vehicle-heading { align-items: flex-start; flex-direction: column; gap: 4px; margin-bottom: 18px; }
  .vehicle-heading > .vehicle-actions { justify-content: flex-end; width: 100%; }
  .action-button { min-width: 76px; }
  .confirmation-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media (max-width: 360px) {
  .range-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Keep amounts readable without splitting digits or leaving the currency alone. */
.budget-price { container-type: inline-size; }
.budget-price-amount { font-size: clamp(28px, 11cqi, 40px); }
.budget-calculation { margin: var(--space-4) 0 0; font-size: var(--text-small); line-height: 1.5; color: #b5d5d9; }

body[data-step="loading"] { background: linear-gradient(105deg, #004851, #1c292e); }
body[data-step="loading"] .introduction > p { max-width: 820px; color: #eef9fa; }
body[data-step="loading"] .process-help { display: none; }
body[data-step="loading"] :focus-visible { outline-color: #68e3db; }
.loading-section { max-width: 560px; margin: var(--section-gap) auto 0; color: #f0f9fa; }
.loading-checklist { display: grid; gap: var(--space-6); padding: var(--card-padding); margin: 0; border: 1px solid #ffffff1c; border-radius: 20px; background: #ffffff02; list-style: none; }
.loading-checklist li { display: flex; align-items: center; gap: 12px; min-height: 34px; font-size: 16px; line-height: 1.6; }
.loading-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--accent); border-radius: 50%; color: var(--hero); font-size: 22px; font-weight: 700; }
.loading-checklist [data-state="done"] .loading-icon { background: var(--accent); }
.loading-checklist [data-state="active"] { color: #26d5cd; }
.loading-checklist [data-state="active"] .loading-icon { border-width: 2px; border-color: #00b3ad44; border-top-color: #26d5cd; border-right-color: #26d5cd; animation: loading-spin 1s linear infinite; }
.loading-checklist [data-state="error"] .loading-icon { border-color: #ffbfbf; color: #ffbfbf; }
.loading-status { min-height: 28px; margin: var(--space-8) 0 0; color: #26d5cd; text-align: center; font-size: 18px; font-weight: 600; line-height: 1.5; }
.loading-back { font-size: var(--text-label); display: block; min-height: 44px; margin: 16px auto 0; color: #c4e0e5; text-align: center; }
.loading-error { padding: var(--space-6); margin-top: var(--space-6); border: 1px solid #dfabab66; border-radius: 14px; background: #ffffff08; }
.loading-error p { margin: 0; font-size: 15px; line-height: 1.6; }
.loading-error .continue-button { margin-top: 20px; }
.loading-section[data-error="true"] .loading-status { display: none; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading-checklist [data-state="active"] .loading-icon { animation: none; }
}
@media (max-width: 520px) {
  .loading-checklist { gap: var(--space-5); border-radius: 16px; }
  .loading-checklist li { gap: 12px; font-size: 15px; line-height: 1.5; }
  .loading-icon { flex-basis: 28px; width: 28px; height: 28px; font-size: 19px; }
  .loading-status { margin-top: var(--space-6); font-size: var(--text-body); }
  .loading-error { padding: 20px; }
}

@media (max-width: 520px) {
  .budget-vehicle { padding-inline: var(--space-4); }
  .budget-price, .budget-equipment { padding: var(--space-4); }
  .budget-identity h2 { font-size: 20px; }
  .budget-metrics dd { font-size: 16px; }
  .budget-consult.continue-button { padding-inline: var(--space-2); }
  .budget-reference { gap: var(--space-3); }
}
@media (max-width: 360px) {
  .steps li { font-size: 10px; }
  .steps ol { gap: 14px; }
  .brand-logo { width: 200px; }
  .budget-reference { flex-wrap: wrap; gap: var(--space-2); }
  .budget-reference-copy { flex-basis: 100%; }
}