/* home.css
   Small home-page tweaks. Currently: the "Case Studies" link, enlarged into an
   obvious, clickable call-to-action. Matched to the site look
   (Open Sans, royal blue accent). No motion. */

.home-cs-cta {
  text-align: center;
  margin: 8px 0;
}

.home-cs-cta a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #111;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color 180ms ease, border-color 180ms ease;
}


.home-cs-cta a:hover,
.home-cs-cta a:focus-visible {
  color: rgb(65, 105, 225);
  border-bottom-color: rgb(65, 105, 225);
}

/* Display-size headings on this page (the promoted h1 and the WHAT THEY SAY
   banner, now an h2) get the same tightened tracking the gallery headings
   use, so Open Sans holds up at display sizes. Sizes and weights are pinned
   inline in the page and are not touched here. */
h1,
h2,
h5 {
  letter-spacing: -0.015em;
}

/* ---------- "What they say" testimonials: horizontal auto-scroll ---------- */
/* Replaces the carousel with a continuously scrolling row so it is obvious
   there is more than the first few. Also drag/scrollable by hand; pauses on
   hover; falls back to a static scroller under reduced-motion. Built by
   js/home.js, which relocates each star rating out of the quote text so the
   quote can clamp without hiding the stars. */

.tm-host { position: relative; }

.tm-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.tm-scroller::-webkit-scrollbar { display: none; }

.tm-track {
  display: flex;
  gap: 22px;
  width: max-content;
  align-items: stretch;
  padding: 8px 6px 16px;
}

.tm-track blockquote {
  flex: 0 0 clamp(260px, 80vw, 360px);
  width: clamp(260px, 80vw, 360px);
  box-sizing: border-box;
  margin: 0;
  /* beat any leftover Flickity/theme positioning */
  position: static !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 26px 24px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  text-align: left;
  font-family: "Open Sans", Arial, sans-serif;
}

.tm-track blockquote .image-icon {
  color: rgb(65, 105, 225);
  font-size: 44px;
  line-height: 0.5;
  margin-bottom: 8px;
}

.tm-track blockquote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8) !important;
  margin: 0 0 16px;
}

.tm-track blockquote .star-rating-wrap { display: block; margin: 0 0 14px; }

.tm-track blockquote .tm-stars {
  color: rgb(65, 105, 225);
  font-size: 15px;
  letter-spacing: 3px;
}

.tm-track blockquote .bottom-arrow { display: none; }

.tm-track blockquote .testimonial-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #111;
  margin-top: auto;
}

.tm-track blockquote .title {
  display: block;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}

/* Reduced motion: js/home.js skips the auto-scroll, so the row would otherwise
   read as a static block of cards with no hint the rest can be reached. The
   scrollbar is hidden above for the animated case; put it back here so sideways
   scrolling is visible and discoverable. */
@media (prefers-reduced-motion: reduce) {
  .tm-scroller {
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(65, 105, 225, 0.55) rgba(0, 0, 0, 0.07);
  }

  .tm-scroller::-webkit-scrollbar { display: block; height: 8px; }

  .tm-scroller::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.07);
    border-radius: 4px;
  }

  .tm-scroller::-webkit-scrollbar-thumb {
    background: rgba(65, 105, 225, 0.55);
    border-radius: 4px;
  }

  .tm-track blockquote { scroll-snap-align: start; }
}