html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', sans-serif; }

@keyframes slide-up-fade-in {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-slide-up-fade { animation: slide-up-fade-in .45s ease-out forwards; }

@keyframes fab-label-in {
  0% { opacity: 0; transform: translateX(6px); }
  100% { opacity: 1; transform: translateX(0); }
}
.fab-label { animation: fab-label-in .18s ease both; }

@media (prefers-reduced-motion: reduce) {
  .animate-slide-up-fade { animation: none !important; }
  html { scroll-behavior: auto; }
}
.department-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  border-color: #2EBFB0;
}
.department-swiper .swiper-pagination-bullet-active { background: #2EBFB0 !important; }
*:focus-visible { outline: 2px solid #2EBFB0; outline-offset: 2px; border-radius: 4px; }

#mobileMenuOverlay { transition: opacity .2s ease; }
#mobileMenuDrawer { transition: transform .25s ease; }
.hero-slide { transition: opacity .7s ease; }
.stat-card:hover .stat-underline { width: 75%; }
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  border-color: #2EBFB0;
}
.branch-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}

/* Booking form field base (mirrors Tailwind's input look without a build step) */
.hexa-field {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  border: 1.5px solid #d1d5db;
  background: #fff;
  transition: border-color .2s;
}
.hexa-field.hexa-field-error { border-color: #ef4444; }

.branch-chip-toggle:hover { background: #F1F5F9 !important; }
.branch-panel { animation: branch-panel-in .18s ease; }
@keyframes branch-panel-in {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.machine-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  border-color: #2EBFB0;
}