/* ---------------------------------------------------------------
   Spider Infotech — hand-written component CSS.
   Everything that CAN be a Tailwind utility lives in the HTML.
   This file only holds the handful of things utilities don't
   cover well: repeated visual "components" and a couple of
   background/border patterns.
   --------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Placeholder "image" pattern used on case-study art boards */
.ph-pattern {
  background-image: repeating-linear-gradient(135deg, #EDEBE5 0 1px, #F4F2EE 1px 12px);
}

/* Logo marquee track — duplicated in JS, animated via Tailwind's animate-scroll-marquee */
.marquee-mask {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track:hover {
  animation-play-state: paused;
}

/* 5-point star used in testimonial ratings */
.star {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Nav mega-menu: column widths the grid-cols-[] utility can't express cleanly */
.mega-menu {
  grid-template-columns: repeat(3, 220px);
}

/* Testimonial progress bar restart trick (JS removes/reflows/re-adds .animate-progress-fill) */
.prog-bar {
  width: 0;
}