.services-intro { padding-bottom:24px; }
.service-family { padding:64px 0 72px; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,#f2f8ff80,transparent 70%); }
.service-family + .service-family { border-top:1px solid #efede9; }
.service-family__header { text-align:center; max-width:760px; margin:0 auto 18px; }
.service-family__header h2 { margin:0 0 14px; font-size:clamp(1.8rem,3.7vw,3.1rem); }
.service-family__header p { margin:0; color:var(--muted); }
/* The family row is the Clients page gallery (clients-page.css): tiles in a horizontal scroller, one centred. */
.service-family .client-gallery { --tile-width:clamp(280px,31vw,460px); }
.service-family .clients-page__list { align-items:flex-start; padding-top:18px; padding-bottom:36px; }
.service-display { text-align:center; }
/* Every product floats the way the client logos do: always, out of phase with its neighbour. */
.service-display__visual { animation:serviceFloat 6s ease-in-out infinite; }
.service-display:nth-child(even) .service-display__visual { animation-delay:-3s; }
.service-display__visual > img { display:block; width:100%; aspect-ratio:1.5; object-fit:cover; border-radius:20px; box-shadow:0 24px 30px -24px #3c2d1e66; }
.service-display .product-box-view { aspect-ratio:1.5; overflow:visible; background:transparent; }
.service-display .product-box-stage { bottom:36px; }
.service-display__copy { margin:26px auto 0; max-width:420px; }
.service-display__copy h3 { font-size:1.15rem; margin:0 0 10px; }
.service-display__copy p { color:var(--muted); margin:0; }
@keyframes serviceFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@media(max-width:700px) {
 .service-family { padding:44px 0 52px; }
 .service-family__header { margin-bottom:14px; }
 .service-family .client-gallery { --tile-width:78vw; }
 .service-display .product-box-view { aspect-ratio:1.25; }
}
@media(prefers-reduced-motion:reduce) {
 .service-display__visual { animation:none; }
}

/* Wrap the growing carton collection without shrinking the individual boxes. */
.service-family[aria-labelledby="tablet-capsule-heading"] .product-box-view { aspect-ratio:1.25; }
.service-family[aria-labelledby="syrup-suspension-heading"] .product-box-view { aspect-ratio:1.05; }

.service-food .product-box-view { aspect-ratio:1.05; }

.service-neutra .product-box-view { aspect-ratio:1.05; }

/* Label bottle and open carton share the existing presentation and controls. */
.service-family[aria-labelledby="labels-leaflets-heading"] .product-box-view,
.product-bottle-view { aspect-ratio:1; position:relative; touch-action:pan-y; cursor:grab; }
.product-bottle-view:focus-visible { outline:3px solid #a02830; outline-offset:-4px; }
.bottle-stage { position:absolute; inset:20px 0 48px; display:flex; align-items:center; justify-content:center; }
.bottle-stage::before { content:""; position:absolute; width:42%; height:30px; bottom:-38px; border-radius:50%; background:radial-gradient(ellipse,#3c2d1e4d, #3c2d1e1c 42%,transparent 70%); filter:blur(6px); }
.bottle-canvas { position:relative; height:100%; width:auto; max-width:85%; object-fit:contain; }
.product-bottle-view.is-ready .product-box-fallback { display:none; }
.has-leaflet .box-top { background:#736f68; filter:none; }
.has-leaflet .box-paper { width:184px; height:98px; left:48px; top:-98px; transform:translateY(var(--paper-travel,0px)); background:white; box-shadow:2px 0 0 #d2d2d2,4px 0 0 #fafafa; backface-visibility:visible; }
.has-leaflet .box-flap { width:280px; height:50px; top:-50px; transform:translateZ(16px); border-radius:28px 28px 0 0; backface-visibility:visible; }
@media(max-width:700px) { .service-family[aria-labelledby="labels-leaflets-heading"] .service-display { width:100%; flex:0 1 auto; max-width:420px; } }

.bottle-mockup-image { position:relative; display:block; height:100%; width:auto; max-width:90%; object-fit:contain; }
.bottle-mockup-view { cursor:default; }