/* Small layout fixes on top of the built CSS. Linked from every page. */

/* Phones: show the booking form right after the heading; the selected-service summary moves below it. */
@media (max-width: 800px) {
  .booking-grid { row-gap: 0; }
  .booking-grid > div:first-child { display: contents; }
  .booking-grid > .booking-form { order: 1; margin-top: 8px; }
  .booking-grid .booking-choice-summary { order: 2; margin-top: 24px; }
}

/* Homepage promise banner: slow, seamless loop. Pauses on hover; static for reduced motion. */
.trust-strip.promise-marquee { display: block; overflow: hidden; padding: 18px 0; gap: 0; }
.promise-track { display: flex; width: max-content; animation: buzzl-marquee 45s linear infinite; }
.promise-group { display: flex; gap: 56px; padding-right: 56px; }
.promise-group span { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.promise-marquee:hover .promise-track { animation-play-state: paused; }
@keyframes buzzl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .promise-track { animation-duration: 35s; }
  .promise-group { gap: 36px; padding-right: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .promise-track { animation: none; width: auto; }
  .promise-group { flex-wrap: wrap; justify-content: center; gap: 14px 36px; padding: 0 22px; }
  .promise-group[aria-hidden="true"] { display: none; }
}