/* =====================================================================
   HBV SERVICES carousel — "Add anything. Skip nothing."
   Shared, GLOBAL ordering for the service cards. On every page the cards
   are authored in the same DOM order:
     1 Grocery · 2 Private Chef · 3 Crib & Baby Gear · 4 Housekeeping ·
     5 Airport Transfer · 6 In-Home Spa · 7 Childcare · 8 Welcome Provisions
   This reorders them globally (visual + scroll order) to:
     Grocery  ->  Welcome Provisions  ->  Housekeeping  ->  then the rest.
   The cards carry no focusable elements, so flex `order` does not affect
   tab/reading order. Link AFTER the page body CSS.

   The mobile swipe carousel is finite: the per-page infinite-loop clone
   (mobileCarouselLoop) no longer targets #servicesTrack, so it doesn't
   jitter and there's no trailing dead space at the end.
   ===================================================================== */
.services__carousel .service-card:nth-child(1) { order: 1; } /* Grocery & Pantry Stocking */
.services__carousel .service-card:nth-child(8) { order: 2; } /* Welcome Provisions */
.services__carousel .service-card:nth-child(4) { order: 3; } /* Housekeeping */
.services__carousel .service-card:nth-child(2) { order: 4; } /* Private Chef */
.services__carousel .service-card:nth-child(3) { order: 5; } /* Crib & Baby Gear */
.services__carousel .service-card:nth-child(5) { order: 6; } /* Airport Transfer */
.services__carousel .service-card:nth-child(6) { order: 7; } /* In-Home Spa Services */
.services__carousel .service-card:nth-child(7) { order: 8; } /* Childcare & Babysitting */

/* No dead space after the last card. The carousel's right inset mirrors the
   left inset that centers content to 1440px, but a scroll container's
   padding-right is scrollable — so it shows as blank after the last card
   (tiny on narrow screens, very large on wide ones). Drop it: the scroll now
   ends exactly at the last card. The left inset stays so the first card still
   lines up with the page gutter. */
.services__carousel { padding-right: 0 !important; }
@media (max-width: 768px) { .services__carousel { padding-right: 0 !important; } }