.chauffeur-calculator {
  margin-block: 1.5rem;
  color: #0f1520;
}
.chauffeur-calculator[hidden], .chauffeur-hourly-summary[hidden] { display: none; }
.chauffeur-calculator__fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(6rem, 1fr);
  gap: 1rem;
}
.chauffeur-calculator__field { display: grid; gap: 0.5rem; min-width: 0; }
.chauffeur-calculator__field label { font-size: 1rem; font-weight: 600; }
.chauffeur-calculator__field input, .chauffeur-calculator__field select {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.75rem;
  border: 1px solid #8a95a3;
  border-radius: 4px;
  background: #f4f6f9;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  caret-color: #0a2342;
}
.chauffeur-calculator__field input:focus-visible, .chauffeur-calculator__field select:focus-visible {
  outline: 2px solid #2e6eb5;
  outline-offset: 3px;
}
.chauffeur-calculator__field input[aria-invalid="true"] { border-color: #a02727; }
.chauffeur-calculator__error { color: #a02727; font-size: 0.875rem; margin-top: 0.5rem; }
.chauffeur-calculator__error:empty { display: none; }
.chauffeur-calculator__result {
  display: grid;
  gap: 0.35rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #c5cdd6;
}
.chauffeur-calculator__label { font-weight: 600; }
.chauffeur-calculator__amount {
  color: #0a2342;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 750;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.chauffeur-calculator__formula { font-size: 1rem; }
.chauffeur-calculator__note { display: block; margin-top: 0.75rem; font-size: 0.875rem; color: #475569; }
.chauffeur-calculator__continue { margin-top: 1.25rem; max-width: 100%; white-space: normal; }
.chauffeur-hourly-summary { display: grid; gap: 0.25rem; padding: 0.75rem; color: #0f1520; }
.chauffeur-hourly-summary output { font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.chauffeur-hourly-summary small { font-size: 0.875rem; }
#chauffeur-price-heading { scroll-margin-top: 6rem; }
/* Let the photograph grow with the hourly form instead of covering its button. */
@media (min-width: 960px) {
  [data-private-chauffeur] .service-hero__container {
    grid-template-columns: minmax(0, 1fr) clamp(23rem, 31vw, 28rem) max(calc((100vw - 1200px) / 2), 1.25rem);
    grid-template-rows: max-content minmax(0, 1fr);
  }
  [data-private-chauffeur] .service-hero__heading { grid-column: 1 / -1; grid-row: 1; }
  [data-private-chauffeur] .service-hero__media { grid-column: 1 / -1; grid-row: 2; align-self: stretch; }
  [data-private-chauffeur] .service-hero__booking {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-block: clamp(1.55rem, 2.5vw, 2.35rem);
    align-self: start;
  }
}
/* The fixed mobile CTA follows the visitor beyond the form; keep the
   transition into the page content to a normal section gap. */
@media (max-width: 959px) {
  [data-private-chauffeur] .service-hero__booking .hero-form {
    padding-bottom: 1.5rem;
  }
}
@media (max-width: 420px) {
  .chauffeur-calculator__fields { grid-template-columns: minmax(0, 1fr); }
}