/* ============================================================
   BASE RESET & GLOBAL
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text-color);
  transition:
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.serviceBody {
  width: 100%;
  height: 100%;
  color: var(--text-color);
  background-image: var(--primary-background);
  font-family: var(--primary-main-font);
  line-height: 1.6;
  transition:
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ============================================================
   LINK STYLES
   ============================================================ */
.appointment-link a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 450;
}
.appointment-link a:visited {
  color: #9e5900;
}

/* ============================================================
   02. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--primary-background);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--accent-blue) 0%,
    var(--accent-dark-blue) 100%
  );
  border-radius: var(--radius-pill);
  border: 2px solid var(--primary-background);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dark-blue);
}

/* ============================================================
   03. BREADCRUMB NAVIGATION
   ============================================================ */
.breadcrumb-nav {
  width: var(--section-width);
  max-width: var(--max-width);
  margin-top: clamp(4rem, 8vw, 5.2rem);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1.5rem);
  background: var(--accent-gradient);
  border-radius: var(--radius-pill);
  border: 2px solid var(--accent-blue-border);
}

.breadcrumb-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  font-family: var(--nav-head-font);
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  font-weight: 300;
  color: var(--text-muted);
}

.breadcrumb-item a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 400;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb-separator {
  color: var(--text-muted);
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
  user-select: none;
}

.breadcrumb-current {
  color: var(--text-strong);
  font-weight: 500;
}

/* ============================================================
   TYPOGRAPHY HIERARCHY
   ============================================================ */
.servicesSlider h1 {
  font-family: var(--heading-font);
  font-size: clamp(1.5rem, 1rem + 4vw, 4rem);
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
  line-height: 1.35;
  color: var(--text-color);
  margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- H3 in CTA Sections --- */
.book-appointment h3,
.chat-us h3,
.make-call h3 {
  font-family: var(--heading-font);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--text-color);
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- H3 Internal Nav --- */
.internal-nav-links h3 {
  font-family: var(--heading-font);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
  color: var(--text-color);
  letter-spacing: 0.02em;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- H5 inside Slide Cards --- */
.slideTitle h5 {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--heading-font);
  margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
  line-height: 1.4;
  color: var(--text-strong);
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.slideTitle :nth-child(1) {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-family: var(--heading-font);
  margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
  line-height: 1.4;
  color: var(--text-strong);
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

p {
  line-height: 1.75;
  text-align: justify;
  text-wrap: pretty;
  font-size: clamp(0.9rem, 1.2vw, 1.14rem);
  font-family: var(--primary-main-font);
  color: var(--text-color);
  margin: 0.5rem 0;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.book-appointment p.subtitle {
  font-size: clamp(0.9rem, 1.2vw, 1.14rem);
  color: var(--text-label);
  text-align: center;
  word-wrap: normal;
  margin: clamp(0.8rem, 2vw, 1.25rem) auto;
}

.services-hero-desc {
  max-width: var(--max-width-narrow);
  line-height: 1.8;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  margin: 0 auto clamp(1rem, 3vw, 1.5rem);
  padding: 0 clamp(0.5rem, 2vw, 1rem);
  color: var(--text-muted);
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.services-intro-text {
  font-family: var(--primary-main-font);
  font-size: clamp(1rem, 2vw, 1.18rem);
  font-weight: 500;
  line-height: 1.85;
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
  color: var(--text-muted);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 2rem);
  background: var(--primary-gradient);
  border-radius: var(--radius-lg);
  box-shadow: var(--box-shadow-sm);
  border-left: 4px solid var(--accent-blue-border-strong);
  transition:
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.services-intro-text:hover {
  box-shadow: 0 0 0.75rem var(--box-shadow-color);
  border-left-color: #2b8ffa;
}

html.dark-mode body .services-intro-text {
  background: linear-gradient(135deg, #1e2a3a 0%, #2a3a50 100%);
  border-left-color: rgba(43, 143, 250, 0.45);
}

.services-list p {
  font-size: clamp(0.93rem, 1.4vw, 1.05rem);
  text-align: justify;
  text-wrap: pretty;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: clamp(0.5rem, 2vw, 1rem);
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.sub-head-para {
  padding-inline: clamp(1.2rem, 0.57rem + 2.7vw, 3rem);
  text-wrap: balance;
  line-break: normal; 
  text-align: justify;
  
}

strong {
  color: var(--text-strong);
  font-weight: 500;
}

a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
a:hover {
  color: var(--link-hover-color);
}
a:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: 3px;
}

.services-hero-desc a,
.services-intro-text a {
  color: var(--link-color);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* =============================================
   SERVICES SLIDER
   ============================================= */
.servicesSlider {
  margin-top: clamp(1.5rem, 2vw, 3.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1rem, 3vw, 1.5rem) clamp(0.5rem, 2vw, 1rem);
  gap: clamp(0.5rem, 2vw, 1rem);
}

/* --- Slide Track --- */
.slide-track {
  position: relative;
  width: clamp(90%, 95vw, 100%);
  max-width: var(--max-width-narrow);
  margin-top: clamp(1.5rem, 4vw, 2rem);
}

/* --- Individual Slides --- */
.slide {
  display: none;
  background: var(--primary-gradient);
  border-radius: var(--radius-lg);
  padding: clamp(0.5rem, 2vw, 1rem);
  box-shadow: var(--box-shadow-md);
  border: 4px solid var(--accent-blue-border);
  transition:
    opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  animation: fadeSlide 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  overflow: hidden;
}

.slide.active {
  display: block;
}

.slide:hover {
  box-shadow: var(--box-shadow-hover);
  border-color: var(--accent-blue);
}

html.dark-mode body .slide {
  background: linear-gradient(135deg, #1e2a3a 0%, #243040 100%);
  border-color: rgba(43, 143, 250, 0.45);
}

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

/* --- Image Wrapper --- */
.slide-img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
}

/* ✅ picture tag fills the wrapper completely */
.slide-img-wrapper picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ✅ img inside picture fills the wrapper */
.slide-img-wrapper picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-md);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  max-width: 100%;
}

/* --- Hover Effect on Image --- */
.slide:hover .slide-img-wrapper picture img {
  transform: scale(1.02);
}

/* --- Slide Caption --- */
.slideTitle {
  text-align: center;
  padding: clamp(1rem, 3vw, 1.5rem) clamp(0.5rem, 2vw, 1rem)
    clamp(0.25rem, 1vw, 0.5rem);
}

.slideTitle p {
  font-family: var(--primary-main-font);
  font-size: clamp(0.9rem, 1.2vw, 1.14rem);
  line-height: 1.65;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Navigation Dots --- */
.navigationBtn {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1rem);
  margin-top: clamp(1rem, 3vw, 1.5rem);
  align-items: center;
  justify-content: center;
}

.btn {
  width: clamp(10px, 2vw, 14px);
  height: clamp(10px, 2vw, 14px);
  border-radius: 50%;
  background: #b0bec5;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn:hover {
  background: var(--accent-blue);
  transform: scale(1.2);
}

.btn.active {
  background: var(--text-strong);
  border-color: var(--accent-blue-border-strong);
  transform: scale(1.25);
}

html.dark-mode body .btn {
  background: #555;
  border-color: #777;
}

html.dark-mode body .btn:hover {
  background: var(--accent-blue);
}

html.dark-mode body .btn.active {
  background: #ddd;
  border-color: #aaa;
}

.btn:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
}

/* ============================================================
   MAIN SERVICES SECTION
   ============================================================ */
.services-list {
  margin: clamp(2rem, 5vw, 3rem) auto;
  width: clamp(90%, 95vw, 98%);
  max-width: var(--max-width);
  /*! padding-bottom: clamp(0.5rem, 2vw, 0.2rem); */
}

.services-title {
  text-align: center;
  font-family: var(--heading-font);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: clamp(0.5rem, 2vw, 1rem);
  padding: 0 clamp(0.5rem, 2vw, 1rem);
  line-height: 1.35;
  color: var(--text-color);
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.services-list h2 {
  font-family: var(--heading-font);
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
  font-weight: 400;
  text-align: center;
  line-height: 1.4;
  color: var(--text-color);
  background: var(--nav-link-visited-color);
  margin-top: clamp(2rem, 5vw, 3rem);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 4vw, 2rem);
  border: solid rgb(88, 85, 78, 0.99);
  border-radius: var(--radius-lg);
  box-shadow: var(--box-shadow-sm);
  transition:
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

html.dark-mode body .services-list h2 {
  background-color: #1a2030;
}

.services-list h2:hover {
  box-shadow: 0.5rem 0.75rem 1.875rem var(--box-shadow-color);
  transform: translateY(-2px);
  border-color: #b7770d;
}

/* ============================================================
   SERVICES CARD CAROUSEL SLIDER (FLUID & SQUARE 1:1)
   ============================================================ */

.services-carousel-wrapper {
  position: relative;
  width: 100%;
  margin: clamp(1.5rem, 4vw, 2rem) 0;
  display: flex;
  align-items: center;
  padding: 0 5px; /* Prevent glowing arrows from clipping */
}

/* --- GLOWING ARROWS --- */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(35px, 5vw, 45px);
  height: clamp(35px, 5vw, 45px);
  border-radius: var(--radius-circle);
  background: var(--bg-surface);
  border: 2px solid var(--accent-blue);
  color: var(--accent-blue);
  font-size: clamp(1rem, 2vw, 1.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--box-shadow-sm);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  /* Auto-glow animation to signal the user */
  animation: arrowGlow 2s infinite ease-in-out;
}

.slider-arrow.prev {
  left: -7px;
}
.slider-arrow.next {
  right: -7px;
}

/* Stop glow on hover and touch */
.slider-arrow:hover {
  background: var(--accent-blue);
  color: var(--text-on-dark);
  animation: none;
  transform: translateY(-50%) scale(1.1);
}

@keyframes arrowGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(43, 143, 250, 0.2);
  }
  50% {
    box-shadow: 0 0 15px 5px rgba(43, 143, 250, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(43, 143, 250, 0.2);
  }
}

html.dark-mode body .slider-arrow {
  background: var(--bg-surface-soft);
}

/* --- THE SLIDER TRACK --- */
.services-list-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; /* JavaScript will handle disabling this during infinite loop resets */
  padding: clamp(0.5rem, 2vw, 1rem) 5px;
  list-style: none;
  margin: 0;
  width: 100%;
  /* Hide scrollbars for cleaner look */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.services-list-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* --- THE SQUARE CARDS (1:1 Aspect Ratio) --- */
.services-list-track li {
  /*
     * Single responsive flex-basis using clamp():
     * - Large screens (~>900px): 3 cards per view (~33.333% - gap)
     * - Medium screens (~550-900px): 2 cards per view (clamped to 18rem min)
     * - Small screens (~<550px): 1 card per view (clamped to 100% max)
     * Always maintains a perfect 1:1 square ratio.
     */
  flex: 0 0 clamp(18rem, calc(33.333% - 1rem), 100%);
  aspect-ratio: 1 / 1; /* Pure Square Format — always square on every screen */

  scroll-snap-align: center;
  display: flex;
  flex-direction: column;

  font-family: var(--font-system);
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: var(--border-width-thin) solid var(--border-color-light);
  border-bottom: var(--border-width-accent-bar) solid var(--accent-blue);
  box-shadow: var(--box-shadow-xs);

  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  white-space: normal;
}

html.dark-mode body .services-list-track li {
  background: var(--bg-surface-soft);
  border-color: var(--border-color-medium);
  border-bottom-color: var(--accent-blue);
}

.services-list-track li:hover {
  box-shadow: var(--box-shadow-md);
  transform: translateY(-5px);
  border-color: var(--border-color-focus);
}

html.dark-mode body .services-list-track li:hover {
  background: var(--bg-surface-muted);
}

/* Card Title - beside libra symbol */
.services-list-track li strong {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.75rem); /* Gap between symbol and text */
  font-family: var(--primary-main-font);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--letter-spacing-wide);
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  margin-bottom: 1.5rem; /* One line gap (approx 1.5rem) between heading row and description */
  flex-shrink: 0; /* Prevent heading from shrinking */
  line-height: 1.3;
}

/* Libra symbol inside heading */
.services-list-track li strong::before {
  content: "\2696"; /* ⚖ Libra symbol */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(2.5rem, 5vw, 3rem);
  height: clamp(2.5rem, 5vw, 3rem);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: var(--accent-blue);
  background: var(--accent-info-bg);
  border-radius: var(--radius-circle);
}

.services-list-track li:hover strong {
  color: var(--accent-blue);
}

.services-list-track li:hover strong::before {
  background: var(--accent-blue);
  color: var(--text-on-dark);
}

/* Card Description text - takes all remaining space till button */
.card-text-content {
  flex: 1 1 auto; /* Fills all available space between heading and button */
  display: flex;
  flex-direction: column;
  min-height: 0; /* Critical for text clamping in flex */
}

.card-text-content p {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  line-height: var(--line-height-relaxed);
  margin: 0;
  color: var(--text-muted);
  /* Strict clamping so content doesn't break aspect ratio */
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Increased to fill more space */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card 'Book Now' Button - one line gap above */
.card-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
  margin-top: 1.5rem; /* One line gap above button */
  padding: clamp(0.5rem, 1.5vw, 0.75rem);
  font-family: var(--nav-head-font);
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-blue);
  background: transparent;
  border: 2px solid var(--accent-blue);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-book-btn:hover {
  background: var(--accent-blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(43, 143, 250, 0.3);
}

html.dark-mode body .card-book-btn {
  color: #7ab8ff;
  border-color: #7ab8ff;
}

html.dark-mode body .card-book-btn:hover {
  background: #7ab8ff;
  color: #121212;
}

/* --- Hindi Language Section --- */
#hindi-legal-services {
  border-left: 4px solid #ff9800;
}

html.dark-mode body #hindi-legal-services {
  border-left-color: #ff9800;
}

[lang="hi"] {
  font-family: var(--hindi-font), var(--primary-main-font);
  font-size: 1.05rem;
  line-height: 1.9;
}

/* ============================================================
   INTERNAL NAVIGATION LINKS SECTION
   ============================================================ */
.internal-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--max-width);
  margin: clamp(2rem, 5vw, 4rem) auto clamp(1rem, 3vw, 1.5rem);
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: var(--header-background);
  border: 4px solid var(--accent-blue-border);
  transition: box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.internal-nav-links:hover {
  box-shadow: var(--box-shadow-md);
}

html.dark-mode body .internal-nav-links {
  background: linear-gradient(135deg, #1e2535 0%, #2a3555 100%);
  border-color: rgba(43, 143, 250, 0.4);
}

.internal-nav-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.internal-nav-links li {
  display: flex;
  align-items: center;
  padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: transparent;
  box-shadow: none;
  transition:
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.internal-nav-links li::before {
  content: "→";
  margin-right: clamp(0.25rem, 1vw, 0.5rem);
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  color: var(--accent-blue);
  flex-shrink: 0;
}

.internal-nav-links li:hover {
  background: rgba(43, 143, 250, 0.08);
  border-color: var(--accent-blue-border);
  transform: translateX(4px);
}

html.dark-mode body .internal-nav-links li:hover {
  background: rgba(43, 143, 250, 0.12);
}

.internal-nav-links a {
  font-family: var(--nav-head-font);
  font-size: clamp(0.65rem, 1.2vw, 0.72rem);
  font-weight: 300;
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  line-height: 1.5;
  display: block;
  width: 100%;
}

.internal-nav-links a:hover {
  color: var(--service-link-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.internal-nav-links a strong {
  font-weight: 600;
  font-size: clamp(0.7rem, 1.3vw, 0.75rem);
  color: inherit;
}

/* ============================================================
   CTA SECTIONS & OTHERS
   ============================================================ */
.book-appointment,
.chat-us,
.make-call {
  margin: clamp(1.5rem, 4vw, 2rem) auto;
  width: 90%;
  max-width: var(--max-width-narrow);
  background-color: var(--text-secondary-color);
  border: solid rgb(88, 85, 78, 0.99);
  padding: clamp(1.5rem, 2vw, 3rem) clamp(1rem, 2vw, 2rem);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--box-shadow-md);
  transition:
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.book-appointment:hover,
.chat-us:hover,
.make-call:hover {
  box-shadow: 0.5rem 0.75rem 1.875rem var(--box-shadow-color);
  transform: translateY(-3px);
}

html.dark-mode body .book-appointment,
html.dark-mode body .chat-us,
html.dark-mode body .make-call {
  background-color: #1a2030;
  border-color: rgba(88, 85, 78, 0.5);
}
.book-appointment p,
.chat-us p,
.make-call p {
  font: var(--para-font-size)/1.8 var(--primary-main-font);
  color: var(--text-muted);
  margin: clamp(2rem, 4vw, 0.8rem) 0 0;
  text-align: center;
  text-align-last: center;
  text-wrap: balance;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.book-appointment p :is(a, strong),
.chat-us p :is(a, strong),
.make-call p :is(a, strong) {
  white-space-collapse: break-spaces;
  text-align: justify;
}
.appointment-link,
.chat-link,
.call-link {
  display: inline-block;
  margin-top: clamp(1rem, 3vw, 1.5rem);
  text-decoration: none;
  color: #fff;
  padding: clamp(0.5rem, 2vw, 0.7rem) clamp(1.2rem, 4vw, 1.6rem);
  border-radius: var(--radius-pill);
  background: var(--accent-blue);
  border: 2px solid var(--accent-blue);
  font-weight: 500;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  box-shadow: var(--box-shadow-sm);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.appointment-link:hover,
.chat-link:hover,
.call-link:hover {
  background: var(--accent-dark-blue);
  transform: translateY(-2px);
  border-color: var(--accent-dark-blue);
  text-decoration: none;
  box-shadow: var(--box-shadow-md);
  color: #fff;
}

html.dark-mode body .appointment-link,
html.dark-mode body .chat-link,
html.dark-mode body .call-link {
  background: rgba(43, 143, 250, 0.15);
  border-color: rgba(43, 143, 250, 0.5);
  color: #7ab8ff;
}

html.dark-mode body .appointment-link:hover,
html.dark-mode body .chat-link:hover,
html.dark-mode body .call-link:hover {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

.appointment-link:focus-visible,
.chat-link:focus-visible,
.call-link:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
}

.appointment-link:active,
.chat-link:active,
.call-link:active {
  transform: translateY(0);
  box-shadow: var(--box-shadow-sm);
}

/* --- Differentiate Call Button --- */
.call-link {
  background: #bb6000;
  border-color: #bb6000;
}

.call-link:hover {
  background: #9e5900;
  border-color: #9e5900;
}

html.dark-mode body .call-link {
  background: rgba(187, 96, 0, 0.15);
  border-color: rgba(187, 96, 0, 0.5);
  color: #ffb77a;
}

html.dark-mode body .call-link:hover {
  background: #bb6000;
  color: #fff;
  border-color: #bb6000;
}

/* ============================================================
   FORM STYLES
   ============================================================ */

.container {
  width: 100%;
  height: 100%;
  font-family: var(--font-system);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  background: var(--bg-overlay-focus);
  color: var(--text-label);
  padding: clamp(1.5rem, 4vw, 2rem);
  border-radius: var(--radius-sm);
  box-shadow: var(--box-shadow-sm);
  transition: box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  overflow-y: auto;
  margin-top: clamp(1.5rem, 4vw, 2rem);
}

.container:focus-within {
  box-shadow: var(--box-shadow-md);
}

/* ── Heading ─────────────────────────────────────────────── */
h1 {
  font-family: var(--heading-font);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-label);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-tight);
  margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
}

/* ── Subtitle ────────────────────────────────────────────── */
.subtitle {
  font-family: var(--font-system);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
  line-height: var(--line-height-base);
}

/* ── Form layout ─────────────────────────────────────────── */
form {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 2vw, 1rem);
}

/* ── Form group ──────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 1vw, 0.5rem);
}

/* ── Labels ──────────────────────────────────────────────── */
label {
  font-family: var(--primary-main-font);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-label);
  letter-spacing: var(--letter-spacing-wide);
}

/* ── Required marker ─────────────────────────────────────── */
.required {
  color: var(--color-danger);
  margin-left: 2px;
  font-weight: var(--font-weight-black);
}

/* ── Inputs & Textarea ───────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.5rem, 2vw, 1rem);
  border: var(--border-width-thin) solid var(--border-color-default);
  border-radius: var(--radius-xs);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-family: var(--primary-main-font);
  color: var(--text-color);
  background-color: var(--border-color-light);
  line-height: var(--line-height-base);
  transition:
    border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  appearance: none;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  color: var(--text-placeholder);
  font-style: italic;
  opacity: var(--opacity-muted);
}

/* Focus state */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: var(--border-color-focus);
  box-shadow: var(--box-shadow-focus-default);
  background-color: var(--bg-surface);
}

/* Textarea specific */
textarea {
  width: 100%;
  height: 20dvh;
  overflow: auto;
  min-height: clamp(4.375rem, 12dvh, 7.5rem);
  max-height: clamp(15.625rem, 50dvh, 31.25rem);
  resize: vertical;
  min-height: 120px;
  font-family: var(--primary-main-font);
}

/* ── Invalid/Error state ─────────────────────────────────── */
input.invalid,
textarea.invalid {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg-soft);
}

input.invalid:focus,
textarea.invalid:focus {
  box-shadow: var(--box-shadow-focus-danger);
  border-color: var(--color-danger);
}

/* ── Error text ──────────────────────────────────────────– */
.error-text {
  color: var(--color-danger);
  font-size: clamp(0.7rem, 1vw, 0.75rem);
  font-family: var(--primary-main-font);
  font-weight: var(--font-weight-medium);
  margin-top: clamp(0.1rem, 0.5vw, 0.25rem);
  display: none;
  letter-spacing: var(--letter-spacing-normal);
}

.error-text.show {
  display: block;
  animation: slideError var(--anim-duration-fast) var(--anim-easing-base);
}

/* ── Form hint ───────────────────────────────────────────── */
.form-hint {
  font-size: clamp(0.7rem, 1vw, 0.75rem);
  font-family: var(--font-system);
  color: var(--text-subtle);
  margin-top: clamp(0.1rem, 0.5vw, 0.25rem);
  line-height: var(--line-height-snug);
  font-style: italic;
}

/* ── Captcha wrapper ─────────────────────────────────────── */
.captcha-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(0.5rem, 2vw, 1rem) 0;
  margin: clamp(0.25rem, 1vw, 0.5rem) 0;
}

.cf-turnstile {
  transform: scale(1);
  transform-origin: center center;
}

/* ── Button group ────────────────────────────────────────── */
.button-group {
  display: flex;
  gap: clamp(0.25rem, 1vw, 0.5rem);
  margin-top: clamp(0.25rem, 1vw, 0.5rem);
  flex-wrap: wrap;
}

/* ── Submit button ───────────────────────────────────────── */
button[type="submit"] {
  flex: 1;
  min-width: 140px;
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
  background-color: var(--accent-blue);
  color: var(--text-on-dark);
  border: none;
  border-radius: var(--radius-xs);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-family: var(--primary-main-font);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  cursor: pointer;
  box-shadow: var(--box-shadow-xs);
  transition:
    background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  text-transform: uppercase;
}

button[type="submit"]:hover:not(:disabled) {
  background-color: var(--accent-dark-blue);
  box-shadow: var(--box-shadow-sm);
}

button[type="submit"]:active:not(:disabled) {
  opacity: var(--opacity-subtle);
  transform: translateY(1px);
}

button[type="submit"]:focus-visible {
  box-shadow: var(--box-shadow-focus-accent);
}

button[type="submit"]:disabled {
  background-color: var(--color-disabled);
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
  box-shadow: none;
}

/* ── Reset button ────────────────────────────────────────── */
button[type="reset"] {
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
  min-width: 140px;
  border: var(--border-width-thin) solid var(--border-color-medium);
  border-radius: var(--radius-xs);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-family: var(--primary-main-font);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

button[type="reset"]:hover {
  /*! background-color: var(--accent-blue-light); */
  border-color: var(--border-color-focus);
}

button[type="reset"]:focus-visible {
  box-shadow: var(--box-shadow-focus-default);
}

button[type="reset"]:active {
  opacity: var(--opacity-subtle);
}

/* ── Status message ──────────────────────────────────────── */
#statusMessage {
  padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
  border-radius: var(--radius-xs);
  margin-top: clamp(0.5rem, 2vw, 1rem);
  font-family: var(--font-system);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  display: none;
  border-left: var(--border-width-accent-bar) solid transparent;
  animation: slideIn var(--anim-duration-base) var(--anim-easing-base);
}

#statusMessage.show {
  display: block;
}

#statusMessage.success {
  background-color: var(--color-success-bg-soft);
  color: var(--color-success-dark);
  border-left-color: var(--color-success);
}

#statusMessage.error {
  background-color: var(--color-danger-bg-soft);
  color: var(--color-danger-dark);
  border-left-color: var(--color-danger-dark);
}

#statusMessage.warning {
  background-color: var(--color-warning-bg-soft);
  color: var(--color-warning-dark);
  border-left-color: var(--color-warning);
}

#statusMessage.info {
  background-color: var(--accent-info-bg);
  color: var(--accent-info);
  border-left-color: var(--accent-info);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(var(--anim-slide-offset));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
.waBook {
  position: fixed;
  right: 2%;
  bottom: 2%;
  z-index: 999;
  filter: drop-shadow(0 4px 10px rgba(0, 218, 84, 0.3));
  transition:
    filter 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.waBook:hover {
  filter: drop-shadow(0 6px 16px rgba(0, 218, 84, 0.55));
  transform: translateY(-2px);
}

.WaChat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-decoration: none;
}

.waLogo {
  display: block;
  width: 35px;
  height: 35px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.WaChat:hover .waLogo {
  transform: scale(1.1) rotate(-5deg);
}

.WaChat span {
  background-color: #00da54;
  border: 2px solid var(--primary-background);
  font-size: 0.875rem;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 1rem;
  border: 2px solid white;
  font-family: var(--hindi-font), sans-serif;
  color: #0a0a0ae1;
  font-weight: 200;
  white-space: nowrap;
  box-shadow: var(--box-shadow-sm);
}

/* ============================================================
   FOOTER
   ============================================================ */
.downFooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(161, 175, 222, 0.32);
  width: 100%;
  height: auto;
  padding-top: 3rem;
  padding-bottom: clamp(1.5rem, 4vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 2px solid #c3cfe2;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  transition:
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

html.dark-mode body .downFooter {
  background-color: rgba(20, 30, 50, 0.55);
  border-top-color: #333;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}

.socialLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(0.5rem, 2vw, 1rem);
}

.socialLink p {
  font-family: var(--nav-head-font);
  font-size: var(--para-font-size);
  font-weight: 300;
  margin: 0;
  padding-bottom: 2rem;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.socialIcons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.5rem);
  flex-wrap: wrap;
}

.social-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  filter: grayscale(15%);
}

.socialIcons a:hover .social-logo,
.socialIcons a:focus .social-logo {
  transform: scale(1.2) translateY(-3px);
  filter: grayscale(0%) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}

.socialIcons a:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- Footer Nav Links --- */
.downFooter nav {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  place-items: center;
  margin: clamp(0.25rem, 1vw, 0.5rem) 0;
}

.policy {
  padding-top: clamp(0.5rem, 2vw, 1rem);
  font-size: 12px;
  text-decoration: none;
  color: var(--text-color);
  font-family: var(--nav-head-font);
  font-weight: 300;
  transition:
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    background 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
}

.policy:hover,
.policy:focus {
  color: var(--service-link-hover-color);
  background: rgba(0, 0, 0, 0.05);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.dark-mode body .policy:hover {
  background: rgba(255, 255, 255, 0.05);
}

.policy:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
}

/* --- Footer Bottom --- */
.footerBottom {
  margin-top: clamp(0.5rem, 2vw, 1rem);
  padding-top: clamp(0.25rem, 1vw, 0.5rem);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  width: 90%;
  text-align: center;
  transition: border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

html.dark-mode body .footerBottom {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.footerBottom p {
  font-size: smaller;
  font-family: var(--nav-head-font);
  font-weight: 300;
  color: var(--text-muted);
  padding: 0;
  margin: 0.5rem 0;
  line-height: 1.65;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* 🖥️ Ultra Wide / 4K (1441px and above) */
@media (min-width: 1441px) {
  .slide-track {
    width: 85%;
  }
  .slide-img-wrapper {
    aspect-ratio: 16 / 9;
    max-height: 480px;
  }
}

/* 🖥️ Large Desktop (1025px – 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
  .slide-img-wrapper {
    aspect-ratio: 16 / 9;
    max-height: 440px;
  }
}

/* 📟 Tablet (768px – 1024px) */
@media (max-width: 1024px) {
  .services-list {
    width: 95%;
  }
  .slide-track {
    width: 92%;
  }
  .slide-img-wrapper {
    aspect-ratio: 16 / 9;
    max-height: 400px;
  }
}

/* 📱 Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .servicesSlider {
    margin-top: 1.5rem;
  }

  .slide-track {
    width: 97%;
    min-height: auto;
  }
  .slide img {
    border-radius: var(--radius-md);
  }
  .slide-img-wrapper {
    aspect-ratio: 16 / 9;
    max-height: 320px;
  }

  .services-list {
    width: 97%;
  }

  .internal-nav-links {
    margin: 0 auto;
  }

  .book-appointment,
  .chat-us,
  .make-call {
    width: 97%;
  }

  .button-group {
    flex-direction: column;
  }
  button[type="submit"],
  button[type="reset"] {
    width: 100%;
  }

  .downFooter nav {
    flex-direction: column;
    align-items: center;
  }
}

/* 📱 Form Tablet/Mobile Tweaks (max-width: 600px) */
@media (max-width: 600px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  .cf-turnstile {
    transform: scale(0.9);
    transform-origin: center center;
  }
}

/* 📱 Small Mobile (≤550px) */
/* No override needed — the base clamp() rule already handles single-column layout */

/* 📱 Very Small Mobile (max-width: 480px) */
@media (max-width: 30rem) {
  .servicesSlider {
    margin-top: 1rem;
  }

  .slide-img-wrapper {
    aspect-ratio: 1 / 1;
    max-height: 16.25rem;
  }

  .cf-turnstile {
    transform: scale(0.85);
  }
}

@media (max-width: 320px) {
  .breadcrumb-nav {
    width: var(--section-width);
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .waBook,
  .theme-toggle,
  .navigationBtn,
  .book-appointment,
  .chat-us,
  .make-call,
  .compactMenu,
  .menuBtn,
  .internal-nav-links {
    display: none !important;
  }

  .serviceBody {
    background: #fff !important;
    color: #000 !important;
  }

  .services-list h2 {
    background: none !important;
    box-shadow: none !important;
    border-left: 3px solid #333 !important;
    page-break-after: avoid;
  }

  a {
    color: #000 !important;
    text-decoration: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.7rem;
    color: #555;
  }

  .downFooter {
    border-top: 1px solid #ccc !important;
    box-shadow: none !important;
    background: none !important;
  }

  .slider-arrow {
    display: none !important;
  }
  .services-list-track {
    display: block !important;
    overflow: visible !important;
  }
  .services-list-track li {
    margin-bottom: 1rem;
    page-break-inside: avoid;
  }
}

/* Service-card description Show More / Show Less.
   The button is created only when the description is actually truncated. */
.services-list-track li .card-text-content {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.services-list-track li .card-description-toggle {
  align-self: flex-start;
  flex: 0 0 auto;
  margin-top: auto;
  padding: 0.125rem 0;
  color: var(--accent-blue);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: clamp(0.75rem, 1vw, 0.85rem);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  touch-action: manipulation;
}

.services-list-track li .card-description-toggle:hover {
  color: var(--accent-dark-blue);
}

.services-list-track li .card-description-toggle:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
}

html.dark-mode body .services-list-track li .card-description-toggle:hover {
  color: #7ab8ff;
}

/* The expanded text scrolls within the card's existing text area. */
.services-list-track li .card-text-content.is-expanded > p {
  display: block;
  flex: 1 1 0;
  width: 100%;
  height: 0;
  min-height: 0;
  max-width: 100%;
  padding-right: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-blue) var(--bg-surface);
}

.services-list-track li .card-text-content.is-expanded > p::-webkit-scrollbar {
  width: 6px;
}

.services-list-track
  li
  .card-text-content.is-expanded
  > p::-webkit-scrollbar-track {
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
}

.services-list-track
  li
  .card-text-content.is-expanded
  > p::-webkit-scrollbar-thumb {
  background: var(--accent-blue);
  border: 1px solid var(--bg-surface);
  border-radius: var(--radius-pill);
}

.services-list-track
  li
  .card-text-content.is-expanded
  > p::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dark-blue);
}

html.dark-mode body .services-list-track li .card-text-content.is-expanded > p {
  scrollbar-color: var(--accent-blue) var(--bg-surface-soft);
}

html.dark-mode
  body
  .services-list-track
  li
  .card-text-content.is-expanded
  > p::-webkit-scrollbar-track {
  background: var(--bg-surface-soft);
}

html.dark-mode
  body
  .services-list-track
  li
  .card-text-content.is-expanded
  > p::-webkit-scrollbar-thumb {
  border-color: var(--bg-surface-soft);
}

/* ============================================================
   SERVICES CAROUSEL — SLIDE AFFORDANCE
   A subtle horizontal motion makes it clear that the cards are
   a swipe/arrow-controlled slider, rather than a static grid.
   ============================================================ */
.services-list-track {
  /* Keeps the first/last card comfortably aligned when navigated by arrow. */
  scroll-padding-inline: var(--spacing-xs);
  touch-action: pan-x pan-y;
  cursor: grab;
}

.services-list-track:active {
  cursor: grabbing;
}

.services-list-track li {
  /* A small, repeating horizontal nudge is intentionally restrained so the
     cards remain readable while still advertising the carousel interaction. */
  animation: service-card-slide-cue calc(var(--anim-duration-slow) * 9)
    var(--anim-easing-base) infinite;
  will-change: transform;
}

/* Stagger the cue so the row reads as one moving slider, not every card
   bouncing at once. Additional cards repeat this pattern naturally. */
.services-list-track li:nth-child(3n + 1) {
  animation-delay: calc(var(--anim-duration-slow) * 2);
}

.services-list-track li:nth-child(3n + 2) {
  animation-delay: calc(var(--anim-duration-slow) * 3);
}

.services-list-track li:nth-child(3n) {
  animation-delay: calc(var(--anim-duration-slow) * 4);
}

/* Moving highlight along the accent bar provides a clear left-to-right
   direction cue even when the card itself is not currently being dragged. */
.services-list-track li::after {
  position: absolute;
  right: var(--spacing-sm);
  bottom: calc(var(--border-width-accent-bar) * -1);
  left: var(--spacing-sm);
  height: var(--border-width-accent-bar);
  content: "";
  pointer-events: none;
  background: var(--accent-blue-light);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left center;
  animation: service-card-progress calc(var(--anim-duration-slow) * 9)
    var(--anim-easing-base) infinite;
}

.services-list-track li:nth-child(3n + 2)::after {
  animation-delay: calc(var(--anim-duration-slow) * 1);
}

.services-list-track li:nth-child(3n)::after {
  animation-delay: calc(var(--anim-duration-slow) * 2);
}

.services-list-track li:hover {
  /* Stop the cue so the existing lift-on-hover remains responsive. */
  animation: none;
  transform: translateY(calc(var(--spacing-2xs) * -1));
}

.services-list-track li:focus-within {
  animation: none;
}

.services-list-track li:hover::after,
.services-list-track li:focus-within::after {
  animation-play-state: paused;
  background: var(--accent-blue);
  transform: scaleX(1);
}

@keyframes service-card-slide-cue {
  0%,
  14%,
  100% {
    transform: translateX(0);
  }
  7% {
    transform: translateX(calc(var(--spacing-xs) * -1));
  }
}

@keyframes service-card-progress {
  0%,
  14%,
  100% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  7% {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Do not animate the carousel cue for people who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .services-list-track {
    scroll-behavior: auto;
  }

  .services-list-track li,
  .services-list-track li::after {
    animation: none;
  }
}