/* A compact version of the existing layout for phones only.
   Keep the responsive canvas, desktop/tablet rules and minimum touch sizes. */
@media (max-width: 600px) {
  .wrap { width: calc(100% - 37.8px); }
  header { height: 57.6px; }
  .nav-controls { gap: 10.8px; }
  .logo .drive-brand { width: 113.4px; }
  .language-control select {
    font-size: 16px;
    min-height: 44px;
    padding: 9px 10.8px;
  }

  /* Introduction and shared section typography. */
  .hero { padding: 55.8px 0 68.4px; }
  .hero h1 { font-size: clamp(3.78rem, 15.3vw, 5.4rem); }
  html:not([lang="en"]) .hero h1 {
    font-size: clamp(2.7rem, 11.7vw, 4.5rem);
  }
  h2, .location-heading h2 {
    font-size: clamp(2.43rem, 9vw, 3.6rem);
  }
  html:not([lang="en"]) h2 {
    font-size: clamp(1.8rem, 7.56vw, 3.24rem);
  }
  .eyebrow { font-size: 10.8px; gap: 10.8px; margin-bottom: 17.1px; }
  .eyebrow::before { width: 21.6px; }
  .hero .lead { font-size: 18px; margin-top: 24.3px; }
  .copy { font-size: 18px; margin-top: 17.1px; }
  .scroll-note {
    font-size: 12.6px;
    gap: 14.4px;
    margin-top: 32.4px;
    padding-bottom: 7.2px;
    min-height: 44px;
  }
  .scroll-note span { font-size: 19.8px; }
  .chapter { padding: 54px 0; }
  .chapter > .wrap::before { top: -54px; }

  /* Auction cards keep the existing three-column arrangement. */
  .auction .copy { margin-top: 22.5px; }
  .logos { gap: 9px; margin-top: 30.6px; }
  .auction-brand { padding: 14.4px 7.2px; gap: 11.7px; }
  .auction-brand img { width: 38.7px; height: 38.7px; }
  .auction-brand span { font-size: 14.4px; }
  .mini-line { font-size: 12.6px; margin-top: 16.2px; }

  /* Retain the photographs and their existing fades. */
  .chapter.photo-chapter, .parking.photo-chapter {
    padding: 54px 0 171px;
  }
  .parking .copy { font-size: 1.008rem; }
  .photo-copy .tools { gap: 7.2px; margin-top: 23.4px; }
  .photo-copy .tool-chip {
    font-size: 12.6px;
    padding: 8.1px 11.7px;
    min-height: 44px;
    min-width: 44px;
  }

  /* Financing. */
  .finance .finance-grid { gap: 25.2px; }
  .finance-visual { min-height: 216px; padding: 25.2px; gap: 30.6px; }
  .finance-kicker { font-size: 11.7px; }
  .finance-visual img { width: 198px; }
  .finance-visual-copy { padding-top: 18px; }
  .finance-visual-copy p { font-size: 1.125rem; }
  .finance .finance-note { font-size: 12.6px; margin-top: 12.6px; }

  /* Location: preserve the map, card order and responsive columns. */
  .location-heading { margin-bottom: 23.4px; }
  .location-lead { font-size: 15.3px; margin-top: 18px; }
  .location-address { margin-top: 21.6px; padding: 0 0 3.6px 15.3px; }
  .location-drive { font-size: 16.2px; margin-bottom: 4.5px; }
  .location-drive .drive-brand { width: 94.5px; }
  .location-address p { font-size: 13.5px; }
  .location-address a {
    display: inline-flex;
    align-items: center;
    font-size: 12.6px;
    margin-top: 7.2px;
    min-height: 44px;
    max-width: 100%;
  }
  .location-list { padding: 16.2px 10.8px; }
  .location-list-heading { padding: 0 7.2px 10.8px; }
  .location-list-heading h3 { font-size: 16.2px; margin-bottom: 6.3px; }
  .location-list-heading p { font-size: 12.6px; }
  .location-places { gap: 5.4px; }
  .place-button { padding: 10.8px 8.1px; gap: 5.4px; min-height: 87.3px; }
  .place-button:last-child { min-height: 61.2px; }
  .place-number { font-size: 10.8px; margin-top: 2.7px; }
  .place-copy { flex-basis: calc(100% - 21.6px); }
  .place-copy strong { font-size: 11.7px; }
  .place-category { font-size: 10.8px; margin-top: 4.5px; }
  .place-distance { font-size: 11.7px; margin-left: 20.7px; }
  .map-toolbar { min-height: 54px; padding: 9px 11.7px; gap: 12.6px; }
  .map-toolbar-brand { gap: 8.1px; }
  .map-toolbar-brand .drive-brand { width: 63px; }
  .map-toolbar-brand .map-toolbar-city { font-size: 10px; }
  .map-toolbar button {
    font-size: 12.6px;
    padding: 8.1px 11.7px;
    min-width: 44px;
    min-height: 44px;
  }
  #drive-map { height: 315px; min-height: 315px; }
  .map-selection { padding: 12.6px; min-height: 90px; gap: 8.1px; }
  .map-selection strong { font-size: 13.5px; }
  .map-selection p { font-size: 11.7px; margin-top: 4.5px; }
  .map-selection a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 12.6px;
  }
  .map-note { font-size: 10.8px; margin-top: 12.6px; }
  .leaflet-control-zoom a { min-width: 44px; min-height: 44px; line-height: 44px; }

  /* Dealer tools: the complete summary remains the touch target. */
  .dealer-tools-layout { gap: 25.2px; }
  #dealer-tools .dealer-tools-hint { font-size: .9rem; margin-top: 16.2px; }
  #dealer-tools .dealer-apps { gap: 10.8px; }
  #dealer-tools .dealer-app-card summary {
    grid-template-columns: minmax(0, 1fr) 19.8px;
    grid-template-rows: 39.6px auto;
    min-height: 100.8px;
    padding: 16.2px 14.4px;
    gap: 10.8px 7.2px;
  }
  #dealer-tools .dealer-app-card summary img {
    width: 90%;
    max-width: 144px;
    height: 36px;
  }
  #dealer-tools .dealer-app-category { font-size: .7875rem; }
  #dealer-tools .dealer-app-toggle { width: 19.8px; height: 19.8px; }
  #dealer-tools .dealer-app-toggle::before,
  #dealer-tools .dealer-app-toggle::after {
    left: 5.4px;
    right: 5.4px;
    top: 8.1px;
    height: 1.8px;
  }
  #dealer-tools .dealer-app-description {
    font-size: .9rem;
    margin: 0 14.4px;
    padding: 14.4px 0 18px;
  }
  #dealer-tools .dealer-app-instetag summary {
    grid-template-columns: minmax(0, 1fr) auto 19.8px;
    grid-template-rows: auto;
    min-height: 86.4px;
    gap: 14.4px;
    padding: 16.2px 18px;
  }
  #dealer-tools .dealer-app-instetag summary img {
    max-width: 154.8px;
    height: 46.8px;
  }
  #dealer-tools .dealer-app-instetag .dealer-app-description { margin-inline: 18px; }

  /* Appointments retain the native form and readable iPhone input text. */
  .closing.booking { padding: 54px 0; }
  .booking .closing-grid { gap: 28.8px; }
  .benefit-line { font-size: 16.2px; margin-top: 23.4px; }
  .booking-location {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14.4px;
    margin-top: 19.8px;
  }
  .booking .details { margin-top: 27px; padding-top: 10.8px; font-size: 12.6px; }
  .booking .details summary { min-height: 44px; padding: 7.2px 0; }
  .booking .details p { font-size: 12.6px; margin-top: 9px; }
  .booking-form h3 { font-size: 20.7px; margin-bottom: 21.6px; }
  .meeting-options { gap: 9px; margin-bottom: 18px; }
  .meeting-options legend { font-size: 12.6px; margin-bottom: 9px; }
  .meeting-options label {
    font-size: 13.5px;
    gap: 7.2px;
    padding: 9px 11.7px;
    min-height: 44px;
    min-width: 44px;
  }
  .meeting-options input { width: 15.3px; height: 15.3px; }
  .booking-field { font-size: 12.6px; gap: 7.2px; margin-bottom: 16.2px; }
  .booking-field input, .booking-field select {
    font-size: 16px;
    min-height: 44px;
    padding: 9.9px 10.8px;
  }
  .booking-timezone, .booking-address { font-size: 12.6px; margin-bottom: 14.4px; }
  .booking-form .button {
    font-size: 14.4px;
    padding: 12.6px 18px;
    min-height: 44px;
  }
  .booking-status { font-size: 12.6px; margin-top: 10.8px; }
  footer { padding: 21.6px 0; font-size: 11.7px; }
  .footer { gap: 8.1px; }
  .footer-brand { gap: 10.8px; }
  .footer-brand .drive-brand { width: 20.7px; }
}

/* Keep the page's existing narrow-phone and wider-phone arrangements. */
@media (min-width: 441px) and (max-width: 600px) {
  .booking-fields-row { gap: 14.4px; }
}
@media (max-width: 400px) {
  #dealer-tools .dealer-app-card summary { padding: 14.4px 10.8px; }
  #dealer-tools .dealer-app-instetag summary {
    grid-template-columns: minmax(0, 1fr) 19.8px;
    grid-template-rows: 39.6px auto;
    gap: 10.8px 7.2px;
  }
  #dealer-tools .dealer-app-instetag summary img { height: 39.6px; }
  #dealer-tools .dealer-app-instetag .dealer-app-description { margin-inline: 14.4px; }
}