/* The full brand palette is loaded in the head before the first paint. */
html { color-scheme: light; background: #f8f3f2; }
.hero-art img { animation: partygo-float 8s ease-in-out infinite; }
@keyframes partygo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.motion-reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.32,1); }
.motion-reveal.motion-visible { opacity: 1; transform: none; }
/* Section emphasis uses movement, preserving the final colours throughout. */
.service-content-reveal { animation: section-arrive .6s ease-out both; }
@keyframes section-arrive { from { opacity: .65; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.package-render { overflow: hidden; }
.package-render img, .product-visual { transition: transform .65s cubic-bezier(.22,.8,.32,1); }
@media (hover: hover) and (pointer: fine) {
  .package-render:hover img { transform: scale(1.015); }
  .product:hover .product-visual { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .hero-art img, .service-content-reveal { animation: none !important; }
  .motion-reveal, .motion-reveal.motion-visible { opacity: 1; transform: none; transition: none; }
  .package-render img, .product-visual { transition: none; transform: none !important; }
}

/* One header offset prevents the preceding service card from remaining onscreen. */
html { scroll-padding-top: var(--header-height, 88px); }
main > section[id] { scroll-margin-top: 0; }
.topbar-brand { display: flex; align-items: center; flex: 0 0 144px; text-decoration: none; }
.topbar-brand img { display: block; width: 144px; height: 69px; object-fit: contain; border: 0; border-radius: 0; }
.topbar { gap: 20px; }
@media (max-width: 1100px) { .topbar nav { gap: 16px; } }
@media (max-width: 600px) {
  html { scroll-padding-top: var(--header-height, 70px); }
  .topbar { gap: 10px; }
  .topbar-brand { flex-basis: 120px; }
  .topbar-brand img { width: 120px; height: 57px; }
}
@media (max-width: 350px) {
  .topbar-brand { flex-basis: 100px; }
  .topbar-brand img { width: 100px; height: 48px; }
}