/* ===== SVG ICON SYSTEM ===== */
/* Replaces all emoji icons — consistent stroke-based SVG icons */

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  color: var(--secondary);
  flex-shrink: 0;
}

.icon svg {
  width: 2.5rem;
  height: 2.5rem;
  display: block;
}

.badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--secondary);
  flex-shrink: 0;
}

.badge-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

.category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  flex-shrink: 0;
}

.category-icon svg {
  width: 2rem;
  height: 2rem;
  display: block;
}

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--secondary);
  flex-shrink: 0;
}

.service-icon svg {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: rgba(139, 92, 246, 0.12);
  border-radius: 0.9rem;
  color: var(--secondary);
  flex-shrink: 0;
}

.contact-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* CTA section icon */
.cta .icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1rem;
}

.cta .icon svg {
  width: 4rem;
  height: 4rem;
}

/* Paw print decorative spans */
.paw-print {
  display: flex;
  align-items: center;
  justify-content: center;
}

.paw-print svg {
  display: block;
}



/* Placeholder avatar — SVG-based */
.placeholder-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  margin: 0 auto 1.25rem;
}

.team-card.main-vet.placeholder-card .placeholder-avatar {
  width: 14rem;
  height: 14rem;
}

/* Verification choice label icons */
.choice-label svg {
  flex-shrink: 0;
}

/* Terms popup header icon */
.terms-popup-header h3 svg {
  flex-shrink: 0;
}

/* Footer inline icons */
footer p svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Toast icon wrap — SVG color theming */
.toast.success .toast-icon-wrap svg { stroke: #10b981; }
.toast.error   .toast-icon-wrap svg { stroke: #ef4444; }
.toast.warning .toast-icon-wrap svg { stroke: #f59e0b; }
.toast.info    .toast-icon-wrap svg { stroke: #3b82f6; }

/* vhs-modal icon wrap — SVG sizing */
.vhs-modal-icon-wrap svg {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(180deg, #6d4ab1, #170741);
  color: #fdfefd;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* ===== HIDDEN SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ===== PAGE LOADER — Paw Steps Trail ===== */
.page-loader {
  position: fixed;
  inset: 0;
  background: #1a0a3e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}

.page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(109, 74, 177, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 170, 0, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-content {
  position: relative;
  z-index: 1;
}

/* Paw trail container */
.loader-paws {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 2rem;
  justify-content: center;
}

/* Individual paw print — continuous walking cycle */
.loader-paw {
  opacity: 0;
  transform: translateY(8px) scale(0.7);
}

.loader-paw svg {
  width: 36px;
  height: 36px;
  fill: rgba(255, 255, 255, 0.7);
}

/* Staggered fade-in then continuous pulse cycle */
.loader-paw:nth-child(1) { animation: pawCycle1 2s ease-in-out infinite; animation-delay: 0s; }
.loader-paw:nth-child(2) { animation: pawCycle2 2s ease-in-out infinite; animation-delay: 0.2s; }
.loader-paw:nth-child(3) { animation: pawCycle3 2s ease-in-out infinite; animation-delay: 0.4s; }
.loader-paw:nth-child(4) { animation: pawCycle4 2s ease-in-out infinite; animation-delay: 0.6s; }

/* Paw opacity cycling — each paw lights up in sequence, then resets */
@keyframes pawCycle1 {
  0%, 100% { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(-12deg); }
  12.5%    { opacity: 1;   transform: translateY(0) scale(1) rotate(-12deg); }
  25%      { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(-12deg); }
}
@keyframes pawCycle2 {
  0%, 100% { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(8deg); }
  25%      { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(8deg); }
  37.5%    { opacity: 1;   transform: translateY(0) scale(1) rotate(8deg); }
  50%      { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(8deg); }
}
@keyframes pawCycle3 {
  0%, 100% { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(-6deg); }
  50%      { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(-6deg); }
  62.5%    { opacity: 1;   transform: translateY(0) scale(1) rotate(-6deg); }
  75%      { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(-6deg); }
}
@keyframes pawCycle4 {
  0%, 100% { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(10deg); }
  75%      { opacity: 0.25; transform: translateY(4px) scale(0.8) rotate(10deg); }
  87.5%    { opacity: 1;   transform: translateY(-2px) scale(1.05) rotate(10deg); }
}

/* Paw color cycling */
.loader-paw:nth-child(1) svg { fill: rgba(255, 255, 255, 0.25); }
.loader-paw:nth-child(2) svg { fill: rgba(255, 255, 255, 0.4); }
.loader-paw:nth-child(3) svg { fill: rgba(255, 255, 255, 0.55); }
.loader-paw:nth-child(4) svg { fill: #ffaa00; }

/* Clinic name below the trail */
.loader-text {
  color: white;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
  animation: loaderTextIn 0.5s ease-out 1s forwards;
}

.loader-subtext {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  margin-top: 0.4rem;
  letter-spacing: 1px;
  opacity: 0;
  animation: loaderTextIn 0.5s ease-out 1.15s forwards;
}

@keyframes loaderTextIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .loader-paw,
  .loader-text,
  .loader-subtext {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(167, 139, 250, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(216, 208, 234, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 170, 0, 0.1) 0%, transparent 50%);
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px
    );
  pointer-events: none;
  z-index: 0;
}

main {
  position: relative;
  z-index: 1;
}

:root {
  --primary: #6d4ab1;
  --primary-dark: #170741;
  --primary-light: #a78bfa;
  --secondary: #ffaa00;
  --secondary-dark: #f59e0b;
  --dark: #170741;
  --text: #fdfefd;
  --text-dim: #d8d0ea;
  --success: #22c55e;
  --error: #f87171;
  --overlay: rgba(255, 255, 255, 0.1);
  --overlay-strong: rgba(255, 255, 255, 0.16);
  --border: rgba(255, 255, 255, 0.18);
  --overlay-dark: rgba(0, 0, 0, 0.6);
  --max-width: 75rem;
  --transition: 0.3s ease;
  --radius: 0.75rem;
}

/* ===== HEADER ===== */
header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--white-soft);
  border-bottom: 1px solid rgba(109, 74, 177, 0.12);
  box-shadow: 0 4px 24px rgba(109, 74, 177, 0.08);
  transition: transform 0.3s ease-in-out;
}

/* Shimmer line

   The line used to be a 60%-wide bar whose `left` was animated from -60% to
   160%. Because `header` is position:sticky with overflow-x:visible, that bar
   was never clipped, so at the end of every sweep it stuck out past the
   document's right edge (60% of 360px wide, pushed to left:160% => right edge
   ~792px on a 360px viewport). Chromium grew documentElement.scrollWidth from
   360 to ~790 every 4s and snapped it back, which is what made a narrow phone
   page look like it was widening into a desktop layout and then resetting.

   The sweep now moves the GRADIENT inside a bar that is exactly as wide as the
   header (`inset: auto 0 0 0`), so the element itself can never extend past the
   viewport at any point in the animation, on any breakpoint, and the moving
   line keeps its look. No overflow clipping is needed, which matters because
   header carries backdrop-filter and therefore already forms a containing
   block for the fixed-position mobile dropdown menu. */
header::after {
  display: none;
}

@keyframes navShimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

header.nav-hidden {
  transform: translateY(-100%);
}

header.nav-visible {
  transform: translateY(0);
}

:root {
  --white-soft: #ffffff;
  --white-lavender: #faf8ff;
}

.navbar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  background: var(--white-soft);
  border: 1px solid rgba(109, 74, 177, 0.12);
  border-radius: 999px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-img {
  height: 2.5rem;
  width: auto;
  filter: brightness(0) invert(1);
  transition: transform var(--transition);
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-text .logo-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fdfefd;
  letter-spacing: 0.02em;
}

.logo-text .logo-sub {
  font-size: 0.58rem;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.logo:hover .logo-img {
  transform: scale(1.05);
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0 auto;
}

.nav-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--transition);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--secondary);
  transition: width var(--transition);
}

.nav-link:hover,
.nav-link.active {
  color: var(--secondary);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Navbar Buttons */
.navbar-btns {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-shrink: 0;
}

.navbar-btns .btn-primary {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
}

.navbar-btns .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--text);
  transition: all 0.3s ease;
  text-decoration: none;
}



.navbar-btns .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 0.35rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
  z-index: 1001;
}

.hamburger span {
  width: 1.75rem;
  height: 0.2rem;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(0.55rem) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-0.55rem) rotate(-45deg);
}

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 998;
  opacity: 0;
  transition: opacity var(--transition);
}

.mobile-overlay.active {
  display: block;
  opacity: 1;
}

/* Buttons */
.btn-primary,
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  color: var(--dark);
  box-shadow:
    0 2px 4px rgba(109, 74, 177, 0.1),
    0 8px 24px rgba(109, 74, 177, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(109, 74, 177, 0.12),
    0 16px 40px rgba(109, 74, 177, 0.28);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: var(--text);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(109, 74, 177, 0.06);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(109, 74, 177, 0.1);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.5rem 2rem 4rem;
  background:
    radial-gradient(ellipse 600px 500px at 15% 30%, rgba(139, 92, 246, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 500px 600px at 85% 60%, rgba(183, 156, 249, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 400px at 50% 80%, rgba(212, 184, 150, 0.04) 0%, transparent 60%),
    linear-gradient(170deg, #f0e6ff 0%, #e8dcf8 30%, #f5effc 60%, #faf6ff 100%);
}

/* Subtle veterinary identity paw pattern — visible but restrained. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='%236d4ab1' fill-opacity='0.08' transform='translate(40 40) scale(0.5)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g><g fill='%236d4ab1' fill-opacity='0.06' transform='translate(200 300) scale(0.4)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g><g fill='%238b5cf6' fill-opacity='0.05' transform='translate(320 120) scale(0.45)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g><g fill='%236d4ab1' fill-opacity='0.07' transform='translate(80 80) scale(0.4)'><ellipse cx='22' cy='18' rx='8' ry='10'/><ellipse cx='42' cy='18' rx='8' ry='10'/><ellipse cx='10' cy='34' rx='7' ry='9'/><ellipse cx='54' cy='34' rx='7' ry='9'/><path d='M32 36c-10 0-18 7-18 14s4 10 10 10c4 0 6-2 8-6 2 4 4 6 8 6 6 0 10-5 10-10s-8-14-18-14z'/></g></svg>");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 65%, #000 90%);
  mask-image: radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 65%, #000 90%);
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, #fdf9ff 100%);
  pointer-events: none;
  z-index: 2;
}

/* Subtle depth decorative elements */
.hero-depth {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero-depth--1 {
  width: 500px;
  height: 500px;
  top: -120px;
  left: -100px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
  filter: blur(60px);
}

.hero-depth--2 {
  width: 400px;
  height: 400px;
  bottom: -80px;
  right: 15%;
  background: radial-gradient(circle, rgba(183, 156, 249, 0.05) 0%, transparent 70%);
  filter: blur(50px);
}

.hero-depth--3 {
  width: 300px;
  height: 300px;
  top: 20%;
  right: -60px;
  background: radial-gradient(circle, rgba(212, 184, 150, 0.05) 0%, transparent 70%);
  filter: blur(40px);
}

/* Hero Container */
.hero-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 1.75rem;
  align-items: center;
}



@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-highlights {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  animation: fadeIn 1s ease-out 0.6s backwards;
}

.hero-highlight {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-dim);
  font-weight: 500;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.05);
  transition: background 0.3s, border-color 0.3s;
}

.hero-highlight:hover {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(139, 92, 246, 0.1);
}

.hero-highlight svg {
  color: var(--secondary);
  flex-shrink: 0;
}

/* Highlight icon animation on scroll */
.hero-highlight .hl-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-highlight.in-view .hl-icon {
  animation: iconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-highlight:nth-child(2).in-view .hl-icon { animation-delay: 0.1s; }
.hero-highlight:nth-child(3).in-view .hl-icon { animation-delay: 0.2s; }
.hero-highlight:nth-child(4).in-view .hl-icon { animation-delay: 0.3s; }

@keyframes iconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 1rem;
}

.title-line {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  opacity: 0.7;
  animation: slideUp 0.8s ease-out 0.4s backwards;
}

.title-main {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slideUp 0.8s ease-out 0.6s backwards;
}

.title-main:last-child {
  animation-delay: 0.7s;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-description {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.8;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
  max-width: 540px;
  animation: fadeIn 1s ease-out 0.8s backwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hero CTA */
.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
  animation: fadeIn 1s ease-out 1s backwards;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  color: var(--dark);
  box-shadow:
    0 2px 4px rgba(109, 74, 177, 0.1),
    0 8px 24px rgba(109, 74, 177, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(109, 74, 177, 0.12),
    0 16px 40px rgba(109, 74, 177, 0.28);
}

.btn-primary svg {
  transition: transform 0.3s;
}

.btn-primary:hover svg {
  transform: translateX(5px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: var(--text);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(109, 74, 177, 0.06);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(109, 74, 177, 0.1);
}

/* Hero Stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(109, 74, 177, 0.12);
  animation: fadeIn 1s ease-out 1.2s backwards;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.5rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(139, 92, 246, 0.06);
  text-align: center;
  transition: background 0.3s, border-color 0.3s;
}

.stat:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(139, 92, 246, 0.12);
}

.stat-number {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Hero Visual */
.hero-visual {
  position: relative;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 22rem;
  border-radius: 1.25rem;
  overflow: hidden;
  animation: fadeInRight 1s ease-out;
  box-shadow:
    0 4px 6px rgba(109, 74, 177, 0.04),
    0 12px 24px rgba(109, 74, 177, 0.08),
    0 32px 64px rgba(109, 74, 177, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.12);
}

/* Single restrained under-layer — no second backing card. */
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  border: 1px solid rgba(139, 92, 246, 0.07);
  pointer-events: none;
}


@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 22px 52px -26px rgba(79, 48, 140, 0.34), 0 12px 28px -16px rgba(79, 48, 140, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.08);
}

.hero-pet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-pet.active {
  opacity: 1;
  animation: heroImageIn 1s ease-out;
}

/* Ken Burns slow zoom+pan on each image */
.hero-pet.active:nth-child(1) { animation: heroImageIn 1s ease-out, kenBurns1 8s ease-in-out 1s forwards; }
.hero-pet.active:nth-child(2) { animation: heroImageIn 1s ease-out, kenBurns2 8s ease-in-out 1s forwards; }
.hero-pet.active:nth-child(3) { animation: heroImageIn 1s ease-out, kenBurns3 8s ease-in-out 1s forwards; }
.hero-pet.active:nth-child(4) { animation: heroImageIn 1s ease-out, kenBurns4 8s ease-in-out 1s forwards; }
.hero-pet.active:nth-child(5) { animation: heroImageIn 1s ease-out, kenBurns5 8s ease-in-out 1s forwards; }

@keyframes kenBurns1 {
  from { transform: scale(1); }
  to   { transform: scale(1.08) translate(-2%, -1%); }
}
@keyframes kenBurns2 {
  from { transform: scale(1); }
  to   { transform: scale(1.06) translate(1%, -2%); }
}
@keyframes kenBurns3 {
  from { transform: scale(1); }
  to   { transform: scale(1.1) translate(-1%, 1%); }
}
@keyframes kenBurns4 {
  from { transform: scale(1); }
  to   { transform: scale(1.07) translate(2%, 1%); }
}
@keyframes kenBurns5 {
  from { transform: scale(1); }
  to   { transform: scale(1.09) translate(-1%, -2%); }
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== SECTIONS ===== */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 5rem 2rem;
  position: relative;
}

.section:first-of-type {
  padding-top: 4rem;
}

.section h2 {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-dim);
  margin-bottom: 4rem;
}

/* Services Grid - 3x4 Layout */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.service-card {
  background: var(--overlay);
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-light);
}

.service-card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.75rem;
  color: var(--secondary);
  transition: transform var(--transition);
}

.service-card:hover .icon {
  transform: scale(1.2) rotate(5deg);
}

.service-card:hover .icon svg {
  transform: none;
}

.service-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.service-card p {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 30ch;
}

/* Scroll Container */
.scroll-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Scroll Buttons - Hidden by default, shown on mobile */
.scroll-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 2rem;
  color: var(--text);
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition);
}

.scroll-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.scroll-prev {
  left: 0.5rem;
}

.scroll-next {
  right: 0.5rem;
}

.scroll-btn.light {
  background: rgba(255, 255, 255, 0.3);
}

/* Cards */
.card {
  background: var(--overlay);
  padding: 2.5rem 1.8rem;
  border-radius: var(--radius);
  text-align: center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.15);
}

.card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  color: var(--secondary);
  transition: transform var(--transition);
}

.card:hover .icon {
  transform: scale(1.2) rotate(5deg);
}

.card:hover .icon svg {
  transform: none;
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.card p {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.7;
}

.card.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Team Layout */
.team-section-title {
  font-size: 2rem;
  text-align: center;
  margin: 3rem 0 2rem;
  color: var(--secondary);
}

.team-carousel-wrapper {
  position: relative;
  margin-bottom: 3rem;
}

.carousel-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 2rem;
  color: var(--text);
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition);
  align-items: center;
  justify-content: center;
}

.carousel-nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.carousel-nav.prev {
  left: -1rem;
}

.carousel-nav.next {
  right: -1rem;
}

.team-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

.team-staff {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: var(--max-width);
}

.team-card {
  background: var(--overlay);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.15);
}

.team-card.main-vet img {
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.5rem;
  border: 4px solid var(--secondary);
  transition: all var(--transition);
}

.team-card.staff img {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid var(--secondary);
  transition: all var(--transition);
}

.team-card:hover img {
  transform: scale(1.05);
  border-color: var(--text);
}

.team-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.team-card.staff h3 {
  font-size: 1.2rem;
}

.team-card .role {
  color: var(--secondary);
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.team-card.staff .role {
  font-size: 0.9rem;
}

.team-card p:not(.role) {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.7;
}

.team-card.staff p:not(.role) {
  font-size: 0.85rem;
}

/* Placeholder team cards */
.team-card.placeholder-card {
  background: #111;
  border: 2px dashed rgba(255, 255, 255, 0.15);
}

.placeholder-avatar {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.team-card.main-vet.placeholder-card .placeholder-avatar {
  width: 14rem;
  height: 14rem;
}

.team-card.placeholder-card h3 {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

.team-card.placeholder-card .role {
  color: rgba(255, 170, 0, 0.4);
  font-style: italic;
}

.placeholder-note {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.2) !important;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

/* ============ VET CARDS (new) ============ */
/* Grid: 1 vet = full width, 2+ vets = 2 columns */
.vets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1.5rem;
  max-width: 58rem;
  margin: 0 auto 2.5rem;
}

.vet-card {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  background: #ffffff;
  border: 1px solid rgba(109, 74, 177, 0.1);
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(93, 64, 130, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.vet-card:hover {
  box-shadow: 0 14px 36px rgba(93, 64, 130, 0.16);
  transform: translateY(-4px);
}

.vet-card__photo {
  flex-shrink: 0;
}

.vet-card__photo img {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #8b5cf6;
  display: block;
}

.vet-card__photo-placeholder {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: #f5eefc;
  border: 2px dashed rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
}

.vet-card__info {
  flex: 1;
  min-width: 0;
}

.vet-card__info h3 {
  font-size: 1.4rem;
  color: #3b2d4a;
  margin-bottom: 0.25rem;
}

.vet-card__role {
  color: #8b5cf6;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.vet-card__bio {
  font-size: 0.88rem;
  color: #7a6a8f;
  line-height: 1.65;
  margin-bottom: 0.4rem;
}

.vet-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.vet-tag {
  font-size: 0.75rem;
  background: rgba(139, 92, 246, 0.08);
  color: #6d4ab1;
  padding: 0.2rem 0.55rem;
  border-radius: 1rem;
}

/* Staff cards — auto-adapts: 1 = full, 2 = 2-col, 3 = 3-col, 4 = 4-col */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  max-width: 68rem;
  margin: 0 auto;
}

.staff-card {
  background: #ffffff;
  border: 1px solid rgba(109, 74, 177, 0.1);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(93, 64, 130, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.staff-card:hover {
  box-shadow: 0 14px 36px rgba(93, 64, 130, 0.16);
  transform: translateY(-4px);
}

.staff-card__avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: #f5eefc;
  border: 2px dashed rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: #8b5cf6;
}

.staff-card h4 {
  font-size: 1.15rem;
  color: #3b2d4a;
  margin-bottom: 0.25rem;
}

.staff-card__role {
  color: #8b5cf6;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.staff-card__bio {
  font-size: 0.85rem;
  color: #7a6a8f;
  line-height: 1.6;
}

/* Responsive: vet card stacks on mobile */
@media (max-width: 600px) {
  .vet-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }
  
  .vet-card__photo img,
  .vet-card__photo-placeholder {
    width: 9rem;
    height: 9rem;
  }
  
  .vet-card__tags {
    justify-content: center;
  }
}

.team-grid--staff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  max-width: 44rem;
  margin: 0 auto;
}

.staff-avatar-placeholder {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: #f5eefc;
  border: 2px dashed rgba(109, 92, 236, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: #8b5cf6;
}

.experience-tags {
  margin-top: 1.25rem;
}

.tags-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.exp-tag {
  font-size: 0.78rem;
  background: rgba(139, 92, 246, 0.08);
  color: #6d4ab1;
  padding: 0.25rem 0.6rem;
  border-radius: 1rem;
}

/* ===== ABOUT SECTION ===== */
.about {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4rem 2rem;
}

.about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease;
}

.bg-slide.active {
  opacity: 1;
}

.overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  z-index: 1;
}

.about-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  width: 100%;
}

.about-content h2 {
  font-size: 3rem;
  margin-bottom: 3rem;
  text-align: center;
}

/* ===== CTA SECTION ===== */
.cta {
  background: linear-gradient(135deg, var(--primary), var(--dark));
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 170, 0, 0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cta > * {
  position: relative;
  z-index: 1;
}

.cta .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1rem;
  color: var(--secondary);
}

.cta h2 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.cta p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: var(--text-dim);
}

.cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btns .btn {
  min-width: 160px;
}

/* ===== FOOTER ===== */
footer {
  background: rgba(0, 0, 0, 0.4);
  padding: 3rem 2rem 1rem;
  backdrop-filter: blur(10px);
}

.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}

footer h3,
footer h4 {
  margin-bottom: 1rem;
  color: var(--secondary);
}

footer p,
footer a {
  font-size: 0.95rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

footer a {
  text-decoration: none;
  display: block;
  transition: all var(--transition);
}

footer a:hover {
  color: var(--secondary);
  transform: translateX(5px);
}

.social {
  display: flex;
  gap: 1rem;
}

.social a {
  padding: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  transition: all var(--transition);
}

.social a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
}

.footer-bottom {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* ===== MODAL ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  overflow-y: auto;
  padding: 2rem 1rem;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: linear-gradient(135deg, var(--primary), var(--dark));
  padding: 2.5rem;
  border-radius: 1rem;
  max-width: 50rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-booking {
  max-width: 55rem;
}

/* Service detail modal */
.modal-service {
  max-width: 44rem;
  text-align: center;
}

.service-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 1.25rem;
  color: var(--secondary);
}

.service-modal-icon svg {
  width: 2.25rem;
  height: 2.25rem;
}

.service-modal-body {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.75rem;
  color: var(--text);
  line-height: 1.7;
  font-size: 0.95rem;
  text-align: left;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  font-size: 2rem;
  color: var(--text);
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  z-index: 10;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.modal-content h2 {
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 2.2rem;
}

.modal-subtitle {
  text-align: center;
  color: var(--text-dim);
  margin-bottom: 2rem;
  font-size: 1rem;
}

#modal .modal-close {
  top: 2rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.85rem;
}

@media (max-width: 768px) {
  #modal .modal-close { top: 1.5rem; right: 1.25rem; }
}

@media (max-width: 480px) {
  #modal .modal-close { top: calc(1.5rem + 6px); }
}

/* Give the login close control its own corner space. */
#loginForm > h2 {
  margin: 0 0 0.5rem;
  padding-top: 1.5rem;
  text-align: center;
}
#loginForm > .modal-subtitle {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
#modal .modal-booking:has(#loginForm:not(.hidden)) > .modal-close {
  top: 0.5rem;
  right: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.85rem;
}

/* Booking Form Styles */
.booking-form {
  margin-top: 0;
}

.form-section {
  background: rgba(0, 0, 0, 0.2);
  padding: 2rem;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 1.4rem;
  background: var(--secondary);
  border-radius: 2px;
}

.section-description {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.required {
  color: #ff6b6b;
  font-weight: bold;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
}

.btn-submit {
  font-size: 1rem;
  padding: 0.85rem 2.5rem;
  width: auto;
  min-width: 160px;
  max-width: 280px;
}

.form-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 1.1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.form-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.form-footer {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.form-footer p {
  color: var(--text-dim);
  font-size: 0.95rem;
}

.form-footer a,
.switch-form,
.forgot-password,
.terms-link {
  color: var(--secondary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
}

.form-footer a:hover,
.switch-form:hover,
.forgot-password:hover,
.terms-link:hover {
  color: var(--secondary);
  text-decoration: underline;
}

.forgot-password {
  display: inline-block;
  font-size: 0.9rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form.hidden {
  display: none;
}

.booking-form.hidden {
  display: none;
}

.form h3 {
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
}

.form input,
.form select,
.form textarea {
  padding: 0.9rem;
  border-radius: 0.4rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  transition: all var(--transition);
}

.form input::placeholder,
.form textarea::placeholder {
  color: var(--text-dim);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--secondary);
  background: rgba(255, 255, 255, 0.15);
}

.phone-input-wrapper {
  display: flex;
  align-items: center;
  border-radius: 0.4rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  transition: all var(--transition);
  overflow: hidden;
}

.phone-input-wrapper:focus-within {
  border-color: var(--secondary);
  background: rgba(255, 255, 255, 0.15);
}

.phone-country-code {
  flex: 0 0 auto;
  padding: 0.9rem 0.85rem;
  color: var(--text);
  font-weight: 600;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(23, 7, 65, 0.28);
}

.form .phone-input-wrapper input {
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0.85rem;
}

.form .phone-input-wrapper input:focus {
  border: none;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 1024px) {
  /* Services - 2 columns on tablet */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Team - 2 columns for main vets */
  .team-main {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .team-staff {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero adjustments */
  .hero-container {
    gap: 2rem;
  }

  .hero-visual {
    height: 420px;
  }

  .hero-stats {
    gap: 1.25rem;
  }
}

/* Login / Sign Up in the hamburger are a MOBILE-only entry point; at desktop
   widths `.navbar-btns` already carries both, so the row stays hidden there. */
.nav-menu .nav-menu-auth {
  display: none;
}

@media (max-width: 768px) {
  /* Navigation */
  .nav-menu {
    position: fixed;
    top: 5rem;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    background: var(--primary);
    text-align: center;
    padding: 1.5rem 0;
    gap: 0;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Slide down animation — reset the desktop centering transform */
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    pointer-events: none;
  }

  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-menu li {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-menu li:last-child {
    border-bottom: none;
  }

  /* Login / Sign Up inside the hamburger.
     `.navbar-btns` is display:none at this width, so without these the two
     auth entry points are unreachable on mobile. Desktop is untouched: the
     row is hidden again outside the media query below. */
  .nav-menu .nav-menu-auth {
    display: flex;
    gap: 0.6rem;
    padding: 0.9rem 0;
    border-bottom: none;
  }

  .nav-menu .nav-auth-btn {
    flex: 1 1 0;
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }

  .nav-menu .nav-auth-btn-login {
    min-height: 44px;
    padding: 0.75rem 1.1rem;
    border-color: var(--pv-line);
    border-radius: 0.85rem;
    background: var(--pv-softer);
    color: var(--pv-ink);
  }

  .nav-menu .nav-auth-btn-login:hover {
    background: #ffffff;
    border-color: var(--pv-violet);
  }

  .nav-menu .nav-auth-btn-login {
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    border-color: var(--pv-line);
    border-radius: 0.75rem;
    background: var(--pv-softer);
    color: var(--pv-ink);
  }

  .nav-menu .nav-auth-btn-login:hover {
    background: #ffffff;
    border-color: var(--pv-violet);
  }

  .nav-menu .nav-auth-btn-primary {
    background: var(--primary, #6d4ab1);
    border-color: var(--primary, #6d4ab1);
    color: #ffffff;
  }

  .hamburger {
    display: flex;
  }

  .navbar {
    position: relative;
  }

  .navbar-btns {
    display: none;
  }

  /* Modal Responsive - Mobile Friendly

     STABILITY CONTRACT: once the auth modal is open its position comes from
     LAYOUT ONLY and never from an animation. The previous rule bottom-anchored
     the sheet (`align-items: flex-end`) and let `@keyframes slideUp`
     (`translateY(100%)`) own its position, so the resting place of the sheet
     existed only inside the animation: interrupted or re-resolved, it sat a
     full sheet-height BELOW the viewport, and because the anchor was the
     bottom edge, every content-height change (a validation message, a form
     swap, the OTP panel) and every visual-viewport change (mobile keyboard /
     URL bar) moved the whole sheet. That produced the reported drift → stretch
     → off-screen → restart cycle.

     Now: top-anchored inside a viewport-bound shell sized with dvh, one scroll
     container, and an entrance that fades in without translating the shell. */
  .modal {
    padding: 0.75rem 0;
    align-items: flex-start;
    justify-content: center;
    /* dvh tracks the VISIBLE viewport, so the shell never grows taller than
       the screen when the keyboard or URL bar is showing. vh is the fallback
       for engines without dvh. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    /* The sheet below is the only scroll container. Two competing scrollers
       (overlay + sheet) is what let content escape the viewport. */
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .modal-content {
    padding: 1.5rem 1.25rem 2rem;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 1.25rem 1.25rem 0 0;
    width: 100%;
    /* Settles on `transform: none`, i.e. the layout position, and the 8px
       offset is small enough that an interrupted entrance can never push the
       sheet out of the viewport. */
    animation: modalSheetIn 0.22s ease-out;
  }

  /* Separate name from `slideUp`: that keyframe is still used by the hero
     title inside this same media query and must not be redefined here. */
  @keyframes modalSheetIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .modal-booking {
    max-width: 100%;
  }

  .modal-content h2 {
    font-size: 1.6rem;
  }

  .form-section {
    padding: 1.25rem;
  }

  .section-title {
    font-size: 1.1rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn-submit {
    width: 100%;
    max-width: 100%;
  }

  /* Hero - Mobile */
  .hero {
    padding: 0.75rem 1.5rem 2.5rem;
    min-height: auto;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-content {
    text-align: center;
    order: 2;
  }

  .hero-visual {
    order: 1;
    height: 320px;
    max-width: 100%;
    margin-top: 0;
  }


  .title-line {
    font-size: 1.1rem;
  }

  .title-main {
    font-size: 2.2rem;
  }

  .hero-description {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    max-width: 100%;
  }

  .hero-cta {
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .hero-highlights {
    margin-bottom: 1rem;
  }

  .btn {
    padding: 0.875rem 1.75rem;
    font-size: 0.95rem;
  }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding-top: 1rem;
  }

  .stat {
    padding: 0.5rem 0.35rem;
  }

  .hero-depth { display: none; }

  .stat-number {
    font-size: 1.6rem;
  }

  .stat-label {
    font-size: 0.8rem;
  }


  /* Team - Horizontal scroll on mobile */
  .team-section-title {
    font-size: 1.6rem;
    margin: 2rem 0 1.5rem;
  }

  .carousel-nav {
    display: none;
  }

  .team-main,
  .team-staff {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 1.5rem;
    padding: 0 1rem 1rem;
    scrollbar-width: none;
  }

  .team-main::-webkit-scrollbar,
  .team-staff::-webkit-scrollbar {
    display: none;
  }

  .team-card {
    flex: 0 0 85%;
    max-width: 20rem;
    scroll-snap-align: center;
  }
  
  .team-card.main-vet img {
    width: 13rem;
    height: 13rem;
  }
  
  .team-card.staff img {
    width: 10rem;
    height: 10rem;
  }

  /* About - Horizontal scroll on mobile */
  .about .scroll-btn {
    display: none;
  }

  .scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 1.5rem;
    padding: 0 1rem 1rem;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }

  .scroll-container::-webkit-scrollbar {
    display: none;
  }

  .card {
    flex: 0 0 85%;
    max-width: 18rem;
    scroll-snap-align: center;
    min-width: 16rem;
  }



  /* Sections */
  .section {
    padding: 3.5rem 1.5rem;
  }
  
  .section h2,
  .about-content h2,
  .cta h2 {
    font-size: 2.2rem;
  }
  
  .subtitle {
    margin-bottom: 3rem;
  }

  /* Services - Horizontal scroll on mobile */
  .services-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 1.5rem;
    padding: 0 1rem 1rem;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }

  .services-grid::-webkit-scrollbar {
    display: none;
  }

  .service-card {
    flex: 0 0 85%;
    max-width: 18rem;
    scroll-snap-align: center;
    min-width: 16rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Modal */
  .modal-content {
    padding: 2rem;
    width: 95%;
  }

  .modal-content h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }

  .hero {
    padding: 0.5rem 1rem 2rem;
  }

  .hero-container {
    gap: 1.25rem;
  }

  .title-main {
    font-size: 2rem;
  }

  .hero-visual {
    height: 240px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    text-align: center;
    padding-top: 1rem;
  }

  .hero-cta {
    flex-direction: column;
    width: 100%;
    margin-bottom: 1.25rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }



  .section h2,
  .about-content h2 {
    font-size: 1.9rem;
  }

  .service-card {
    min-width: 14rem;
  }

  .cta .icon {
    font-size: 3rem;
  }
  
  /* Chatbot Mobile Styles */
  .chatbot-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }
  
  .chatbot-bubble {
    width: 56px;
    height: 56px;
    margin-left: auto;
  }
  
  .chatbot-window {
    width: 100%;
    height: calc(100vh - 120px);
    bottom: 70px;
    right: 0;
    left: 0;
    border-radius: 1rem;
    max-width: 100%;
  }
  
  .chatbot-header {
    padding: 1rem 1.25rem;
  }
  
  .chatbot-avatar {
    width: 36px;
    height: 36px;
  }
  
  .chatbot-title {
    font-size: 1rem;
  }
  
  .chatbot-messages {
    padding: 1rem;
  }
  
  .message-content {
    max-width: 80%;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }
  
  .chatbot-input-area {
    padding: 0.875rem 1rem;
    gap: 0.5rem;
  }
  
  .chatbot-input {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  
  .chatbot-send-btn {
    width: 40px;
    height: 40px;
  }
  
  .message-avatar {
    width: 28px;
    height: 28px;
  }
  
  .message-avatar svg {
    width: 16px;
    height: 16px;
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease;
}

.fade-in-up {
  animation: fadeInUp 0.8s ease;
}

/* ===== SCROLL ANIMATIONS ===== */
.scroll-animate,
.scroll-animate-delay,
.scroll-animate-title,
.scroll-animate-subtitle,
.scroll-animate-left,
.scroll-animate-right {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate {
  transform: translateY(40px);
}

.scroll-animate-delay {
  transform: translateY(30px);
  transition-delay: 0.2s;
}

.scroll-animate-title {
  transform: translateY(50px) scale(0.95);
}

.scroll-animate-subtitle {
  transform: translateY(30px);
  transition-delay: 0.15s;
}

.scroll-animate-left {
  transform: translateX(-50px);
}

.scroll-animate-right {
  transform: translateX(50px);
}

/* Animated state */
.scroll-animate.animate-in,
.scroll-animate-delay.animate-in,
.scroll-animate-title.animate-in,
.scroll-animate-subtitle.animate-in,
.scroll-animate-left.animate-in,
.scroll-animate-right.animate-in {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Staggered animations for groups */
.service-card.animate-in,
.team-card.animate-in,
.stat.animate-in {
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Title animations */
.scroll-animate-title.animate-in {
  animation: titleReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Subtitle fade in */
.scroll-animate-subtitle.animate-in {
  animation: subtitleFade 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

@keyframes subtitleFade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Side animations */
.scroll-animate-left.animate-in {
  animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.scroll-animate-right.animate-in {
  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Utility */
.hidden {
  display: none !important;
}

/* ===== AI CHATBOT STYLES ===== */
.chatbot-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1500;
  font-family: inherit;
}

/* Chatbot Bubble Button */
.chatbot-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  border: none;
  box-shadow: 0 8px 24px rgba(255, 170, 0, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.chatbot-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.chatbot-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(255, 170, 0, 0.5);
}

.chatbot-bubble:hover::before {
  opacity: 1;
}

.chatbot-bubble:active {
  transform: scale(0.95);
}

.chatbot-icon,
.chatbot-close-icon {
  color: #fff;
  transition: all 0.3s;
}

.chatbot-close-icon {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg);
}

.chatbot-bubble.active .chatbot-icon {
  opacity: 0;
  transform: rotate(90deg);
}

.chatbot-bubble.active .chatbot-close-icon {
  opacity: 1;
  transform: rotate(0deg);
}

/* Pulse Animation */
.chatbot-bubble::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--secondary);
  opacity: 0;
  animation: chatbotPulse 2s ease-out infinite;
}

@keyframes chatbotPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Chatbot Window */
.chatbot-window {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 2rem);
  height: 550px;
  max-height: calc(100vh - 150px);
  background: linear-gradient(135deg, var(--primary), var(--dark));
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.chatbot-window.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Chatbot Header */
.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.chatbot-header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chatbot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.chatbot-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.chatbot-status {
  font-size: 0.85rem;
  color: #4ade80;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chatbot-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.chatbot-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.chatbot-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

/* Chatbot Messages */
.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) rgba(255, 255, 255, 0.1);
}

.chatbot-messages::-webkit-scrollbar {
  width: 6px;
}

.chatbot-messages::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background: var(--secondary);
  border-radius: 10px;
}

.chatbot-message {
  display: flex;
  gap: 0.75rem;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.user-message .message-avatar {
  background: rgba(255, 255, 255, 0.2);
  order: 2;
}

.message-content {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 0.875rem 1.125rem;
  border-radius: 1rem;
  max-width: 75%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.user-message .message-content {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  margin-left: auto;
  border-radius: 1rem 1rem 0.25rem 1rem;
}

.bot-message .message-content {
  border-radius: 1rem 1rem 1rem 0.25rem;
}

.message-content p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}

/* Chatbot Input Area */
.chatbot-input-area {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.chatbot-input {
  flex: 1;
  padding: 0.875rem 1.125rem;
  border-radius: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.3s;
}

.chatbot-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.chatbot-input:focus {
  outline: none;
  padding: 0;
  border-color: var(--secondary);
  background: rgba(255, 255, 255, 0.15);
}

.chatbot-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
}

.chatbot-send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 170, 0, 0.4);
}

.chatbot-send-btn:active {
  transform: scale(0.95);
}

.chatbot-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Chatbot Footer */
.chatbot-footer {
  padding: 0.75rem 1.5rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.chatbot-footer p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  gap: 0.4rem;
  padding: 0.875rem 1.125rem;
}

.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}


/* ===== PAGE HERO ===== */
.page-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--dark));
  padding: 8rem 2rem 4rem;
  text-align: center;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 170, 0, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: 50rem;
}

.page-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
  font-weight: 800;
}

.page-hero p {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--text-dim);
}

/* ===== SERVICES PAGE ===== */
.services-page {
  max-width: 75rem;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.services-intro {
  text-align: center;
  margin-bottom: 5rem;
}

.services-intro h2 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.service-category {
  margin-bottom: 5rem;
}

.category-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.category-icon {
  font-size: 2.5rem;
}

.services-grid-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 2rem;
}

.service-card-detailed {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  padding: 2rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.service-card-detailed:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--secondary);
}

.service-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.service-card-detailed:hover .service-icon {
  transform: scale(1.2) rotate(5deg);
}

.service-header h4 {
  font-size: 1.3rem;
  margin: 0;
}

.service-description {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

.btn-service {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  align-self: flex-start;
}

.btn-service:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 170, 0, 0.4);
}

.services-cta {
  text-align: center;
  margin-top: 5rem;
  padding: 3rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
}

.services-cta h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.services-cta p {
  font-size: 1.2rem;
  color: var(--text-dim);
  margin-bottom: 2rem;
}

.services-cta .cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.services-cta .cta-btns .btn {
  min-width: 160px;
}

/* ===== ABOUT PAGE ===== */
.about-page {
  max-width: 75rem;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.about-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2.5rem;
  margin-bottom: 6rem;
}

.about-story {
  margin-bottom: 6rem;
  overflow-x: hidden;
}

.about-story h2 {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 3.5rem;
}

.story-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.story-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

.story-carousel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.story-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-slide {
  min-width: 100%;
  flex: 0 0 100%;
}

.story-slide img {
  width: 100%;
  height: clamp(240px, 48vw, 350px);
  object-fit: cover;
  display: block;
}

.story-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(109, 74, 177, 0.78);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  z-index: 2;
}

.story-nav.story-prev {
  left: 0.75rem;
}

.story-nav.story-next {
  right: 0.75rem;
}

.story-carousel:hover .story-nav,
.story-carousel:focus-within .story-nav {
  opacity: 1;
  pointer-events: auto;
}

.story-nav:hover {
  background: rgba(93, 64, 130, 0.92);
}

.story-nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .story-nav {
    opacity: 1;
    pointer-events: auto;
    width: 36px;
    height: 36px;
  }
}


.team-section h2 {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

/* staff-grid uses auto-fit from base definition */

/* Location Section */
.location-section {
  margin-top: 5rem;
  text-align: center;
}

.location-section h2 {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
}

.map-container {
  margin: 2rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.location-details {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  padding: 2rem;
  margin-top: 2rem;
  text-align: left;
}

.location-details p {
  font-size: 1.1rem;
  line-height: 2;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}

.location-details strong {
  color: var(--secondary);
  font-weight: 600;
}

/* ===== CONTACT PAGE ===== */
.contact-page {
  max-width: 75rem;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
  margin-top: 2rem;
}

.contact-info h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.contact-info > p {
  font-size: 1.1rem;
  color: var(--text-dim);
  margin-bottom: 3rem;
  line-height: 1.7;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.contact-icon {
  flex-shrink: 0;
}

.contact-item h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

.contact-item p {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.7;
}

.contact-form-wrapper {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  padding: 2.5rem;
}

.contact-form h3 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* ===== IMPROVED FORMS ===== */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(30, 10, 80, 0.85);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  transition: all var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

/* Style native select dropdown options */
.form-group select option {
  background: var(--dark);
  color: var(--text);
  padding: 0.5rem;
}

.form-group select option:checked,
.form-group select option:hover {
  background: var(--primary);
  color: var(--secondary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--secondary);
  background: rgba(40, 15, 100, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 170, 0, 0.15);
}

/* Custom select arrow */
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffaa00' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-hint {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.4rem;
  font-style: italic;
}

.error-message {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  border: 2px solid #ef4444;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: #fee2e2;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.75rem;
  animation: slideDown 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
  position: relative;
  overflow: hidden;
}

.error-message::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ef4444, #dc2626);
  animation: errorPulse 2s ease-in-out infinite;
}

@keyframes errorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-15px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.shake {
  animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-subtitle {
  text-align: center;
  color: var(--text-dim);
  margin-bottom: 2rem;
  font-size: 1rem;
}

/* Terms Section */
.terms-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.terms-scroll {
  max-height: 15rem;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) rgba(255, 255, 255, 0.1);
}

.terms-scroll::-webkit-scrollbar {
  width: 8px;
}

.terms-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.terms-scroll::-webkit-scrollbar-thumb {
  background: var(--secondary);
  border-radius: 10px;
}

.terms-scroll h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--secondary);
}

.terms-scroll p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  color: var(--text-dim);
}

.terms-scroll ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.terms-scroll li {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  color: var(--text-dim);
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.terms-checkbox input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  margin-top: 0.2rem;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--secondary);
}

.terms-checkbox label {
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}

.terms-link {
  color: var(--secondary);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  transition: color 0.2s;
}

.terms-link:hover {
  color: var(--secondary);
}

.forgot-password {
  color: var(--secondary);
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.forgot-password:hover {
  color: var(--secondary);
  text-decoration: underline;
}

.form-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.form-footer .switch-form {
  color: var(--secondary);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.form-footer .switch-form:hover {
  text-decoration: underline;
}

/* ===== TERMS & CONDITIONS POPUP ===== */
.terms-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.terms-popup.active {
  display: flex;
}

.terms-popup-content {
  background: linear-gradient(135deg, var(--primary), var(--dark));
  border: 1px solid rgba(255, 170, 0, 0.3);
  border-radius: 1rem;
  width: 100%;
  max-width: 42rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.terms-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.terms-popup-header h3 {
  font-size: 1.4rem;
  color: var(--secondary);
}

.terms-popup-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.terms-popup-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

/* Footer accept button — override the close-button circle styles */
.terms-popup-footer .terms-popup-close {
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  padding: 0.7rem 2rem;
  background: var(--primary);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.terms-popup-footer .terms-popup-close:hover {
  transform: none;
  background: var(--primary-dark);
}

.terms-popup-body {
  overflow-y: auto;
  padding: 1.5rem 2rem;
  flex: 1;
  line-height: 1.7;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.terms-popup-body h4 {
  color: var(--secondary);
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}

.terms-popup-body h4:first-child {
  margin-top: 0;
}

.terms-popup-body p {
  margin-bottom: 0.75rem;
}

.terms-popup-body ul {
  margin: 0.5rem 0 1rem 1.5rem;
}

.terms-popup-body li {
  margin-bottom: 0.4rem;
}

.terms-popup-footer {
  padding: 1rem 2rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--dark));
  border-radius: 0 0 1rem 1rem;
  position: sticky;
  bottom: 0;
}

.terms-popup-footer .btn-primary {
  padding: 0.7rem 2rem;
  font-size: 0.95rem;
}

@media (max-width: 480px) {
  .terms-popup-content {
    max-height: 92vh;
    border-radius: 0.75rem;
  }

  .terms-popup-header,
  .terms-popup-body,
  .terms-popup-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ===== RESPONSIVE - NEW PAGES ===== */
@media (max-width: 1024px) {
  .services-grid-page {
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  }
  
  .story-content {
    grid-template-columns: 1fr;
  }
  
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .staff-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
  
  .contact-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 7rem 1.5rem 3rem;
    min-height: 30vh;
  }
  
  .page-hero h1 {
    font-size: 2.2rem;
  }
  
  .services-page,
  .about-page,
  .contact-page {
    padding: 3.5rem 1.5rem;
  }
  
  .services-intro {
    margin-bottom: 3.5rem;
  }
  
  .service-category {
    margin-bottom: 3.5rem;
  }
  
  .about-cards {
    gap: 2rem;
    margin-bottom: 4rem;
  }
  
  .about-story {
    margin-bottom: 4rem;
  }
  
  .location-section {
    margin-top: 4rem;
  }
  
  .services-grid-page {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.25rem;
    padding-bottom: 0.5rem;
  }
  .services-grid-page::-webkit-scrollbar { display: none; }
  .services-grid-page .service-card-detailed {
    flex-shrink: 0;
    min-width: min(80vw, 280px);
    scroll-snap-align: start;
  }

  .category-title {
    font-size: 1.6rem;
  }
  
  .team-grid,
  .staff-grid {
    grid-template-columns: 1fr;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
  }
  
  .team-grid .team-card,
  .staff-grid .team-card {
    width: 100%;
  }
  
  /* Vet cards */
  .vets-grid {
    grid-template-columns: 1fr;
    max-width: 32rem;
  }
  
  .vet-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .vet-card__tags {
    justify-content: center;
  }
  
  .staff-grid {
    grid-template-columns: 1fr;
    max-width: 20rem;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .about-cards {
    grid-template-columns: 1fr;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
  }

  .about-cards .card {
    width: 100%;
    max-width: 22rem;
  }
  
  .location-section {
    margin-top: 3rem;
  }
  
  .map-container iframe {
    height: 350px;
  }
  
  .location-details {
    padding: 1.5rem;
  }
  
  .location-details p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: 6rem 1rem 2rem;
  }
  
  .services-intro h2,
  .about-story h2,
  .team-section h2 {
    font-size: 2rem;
  }
  
  .category-title {
    font-size: 1.4rem;
  }
  
  .service-card-detailed {
    padding: 1.5rem;
  }
  
  .contact-form-wrapper {
    padding: 1.5rem;
  }
  
  .terms-scroll {
    max-height: 12rem;
  }
  
  .services-page,
  .about-page,
  .contact-page {
    padding: 3rem 1rem;
  }
  
  .services-intro,
  .service-category {
    margin-bottom: 3rem;
  }
  
  .about-cards,
  .about-story {
    margin-bottom: 3rem;
  }
  
  .section {
    padding: 3rem 1rem;
  }
  
  /* Chatbot Extra Small Mobile */
  .chatbot-window {
    height: calc(100vh - 100px);
    bottom: 65px;
  }
  
  .chatbot-bubble {
    width: 52px;
    height: 52px;
  }
  
  .chatbot-header {
    padding: 0.875rem 1rem;
  }
  
  .chatbot-title {
    font-size: 0.95rem;
  }
  
  .chatbot-status {
    font-size: 0.75rem;
  }
  
  .chatbot-messages {
    padding: 0.875rem;
    gap: 0.875rem;
  }
  
  .message-content {
    max-width: 75%;
    font-size: 0.85rem;
    padding: 0.65rem 0.875rem;
  }
  
  .chatbot-input-area {
    padding: 0.75rem 0.875rem;
  }
  
  .chatbot-input {
    padding: 0.65rem 0.875rem;
    font-size: 0.85rem;
  }
  
  .chatbot-send-btn {
    width: 38px;
    height: 38px;
  }
  
  .chatbot-footer {
    padding: 0.625rem 1rem;
  }
  
  .chatbot-footer p {
    font-size: 0.75rem;
  }
}

/* ===== PREMIUM VERIFICATION FLOW ===== */
.verification-method-group {
  margin: 1rem 0;
  display: block;
}

.verification-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.65rem;
}

.choice-container {
  flex: 1;
  position: relative;
  cursor: pointer;
  display: block;
}

.choice-container input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.choice-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all var(--transition);
  text-align: center;
  backdrop-filter: blur(10px);
  user-select: none;
}

.choice-container:hover .choice-label {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text);
}

.choice-container input[type="radio"]:checked + .choice-label {
  background: rgba(255, 170, 0, 0.14);
  border-color: var(--secondary);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(255, 170, 0, 0.18), 0 10px 24px rgba(0, 0, 0, 0.18);
}

#otpVerificationContainer {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
  animation: slideDownIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

@keyframes slideDownIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.otp-input-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  margin-top: 0.65rem;
}

.otp-input-wrapper input {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 1rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: rgba(23, 7, 65, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--text) !important;
  border-radius: 0.4rem;
  padding: 0.85rem 1rem;
  transition: all var(--transition);
}

.otp-input-wrapper input:focus {
  border-color: var(--secondary) !important;
  box-shadow: 0 0 0 3px rgba(255, 170, 0, 0.14);
}

.resend-btn {
  padding: 0.85rem 1.25rem;
  font-size: 0.9rem;
  min-width: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  border: none;
  color: var(--dark);
  font-weight: 700;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 8px 18px rgba(255, 170, 0, 0.18);
}

.resend-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(255, 170, 0, 0.25);
}

.resend-btn:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 480px) {
  .verification-choices {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .otp-input-wrapper {
    grid-template-columns: 1fr;
  }
  .resend-btn {
    width: 100%;
    min-width: 0;
  }
}

/* Homepage services category overview (1 + 2 + 2 layout) */
.services-grid--categories {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: var(--max-width);
  margin: 0.5rem auto 0;
}

.services-grid--categories .service-card:first-child {
  grid-column: 1 / -1;
}

/* Category cards inherit the established white card surface, border, radius,
   and shadow from the shared warm theme; only layout/typography overrides remain. */
.services-grid--categories .service-card {
  text-align: left;
  align-items: flex-start;
  padding: 1.5rem 1.75rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.services-grid--categories .service-card:first-child {
  padding: 1.75rem 2rem;
}

.services-grid--categories .service-card:first-child h3 {
  font-size: 1.45rem;
}

.services-grid--categories .service-card:first-child p {
  max-width: 60ch;
}

/* Category icon and title row (icon markup reused from services.html) */
.services-grid--categories .service-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.services-grid--categories .svc-cat-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(109, 74, 177, 0.1));
  color: #6d4ab1;
  flex-shrink: 0;
}

.services-grid--categories .svc-cat-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.services-grid--categories .service-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}

.services-grid--categories .service-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: none;
  margin-bottom: 0;
}

.services-view-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.services-view-all .btn-primary {
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  min-width: 0;
  align-self: center;
}

.services-view-all .btn-primary svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* Mobile: stack all five cards vertically */
@media (max-width: 768px) {
  .services-grid--categories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
    margin-top: 0.25rem;
  }

  .services-grid--categories .service-card:first-child {
    grid-column: auto;
    padding: 1.5rem 1.75rem;
  }

  .services-grid--categories .service-card:first-child h3 {
    font-size: 1.3rem;
  }

  .services-grid--categories .service-card {
    flex: none;
    max-width: none;
    min-width: 0;
    scroll-snap-align: none;
  }
}

@media (max-width: 767px) {
  .about-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.25rem;
    padding-bottom: 0.5rem;
  }
  .about-cards::-webkit-scrollbar {
    display: none;
  }
  .about-cards .card {
    flex: 0 0 min(82vw, 20rem);
    scroll-snap-align: start;
    max-width: none;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-track {
    transition: none;
  }

  .story-nav {
    transition: none;
  }
}

/* Persistent password visibility toggle */
.password-field {
  position: relative;
  width: 100%;
}

.password-field input {
  padding-right: 3.25rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.password-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--secondary);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.password-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}

.password-field input::-ms-reveal,
.password-field input::-ms-clear {
  display: none;
}

/* Public six-box OTP inputs */
.otp-inputs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
}

.otp-box {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'SF Mono', 'Consolas', monospace;
  border: 2px solid rgba(109, 74, 177, 0.25);
  border-radius: 10px;
  background: #fff;
  color: #3b2d4a;
  outline: none;
  padding: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-text-size-adjust: 100%;
}

.otp-box:focus {
  border-color: #6d4ab1;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.otp-box[aria-invalid="true"] {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

@media (max-width: 480px) {
  .otp-inputs {
    gap: 0.35rem;
  }
  .otp-box {
    width: 42px;
    height: 50px;
    font-size: 1.35rem;
  }
}


#loginForm .btn-submit {
  justify-content: center;
  width: min(160px, 100%);
  min-width: 0;
  min-height: 44px;
  padding: 0.75rem 1rem;
  line-height: 1.25;
}