/* ==========================================================================
   components.css — shared building blocks: hero band, split rows,
   "trusted by" strip, logo marquee, testimonial slider, lottie containers
   ========================================================================== */

/* ---- Hero band (green, wave pattern) ------------------------------------ */
.hero {
  position: relative;
  background: var(--green);
  color: var(--white);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 580px;
  transform: translateY(-50%);
  background: url("../media/2024/04/Frame-19450.png") no-repeat center / 100% 100%;
  opacity: 0.2;
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1, .hero p { color: var(--white); }
.hero p { font-size: 16px; line-height: 1.2; }

/* ---- Two-column split row ------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}
.split__text p { font-family: var(--font-ui); font-size: 16px; line-height: 1.9; color: #545454; }
.split__text p + p { margin-top: 0; }
.split__inline-media { display: none; }
.split__media img { width: 100%; }

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split__media--desktop { display: none; }
  .split__inline-media { display: block; width: 80%; margin: 0 auto 24px; }
}

/* ---- "Trusted by industry leaders" -------------------------------------- */
.trusted-by { padding: 120px 0 54px; }
.trusted-by__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  padding-bottom: 40px;
}
.trusted-by__title {
  font-family: var(--font-alt);
  font-size: 42px;
  line-height: 1.25;
  font-weight: 600;
  margin: 0;
}
.trusted-by__blurb { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; margin: 0; }

@media (max-width: 980px) {
  .trusted-by { padding: 60px 0 30px; }
  .trusted-by__head { grid-template-columns: 1fr; gap: 16px; }
  .trusted-by__title { font-size: 30px; }
}

/* ---- Logo marquee (pure CSS) -------------------------------------------- */
.logo-marquee {
  --marquee-slot: 292px;
  --marquee-height: 160px;
  --marquee-duration: 45s;
  position: relative;
  display: flex;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 27px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee__track {
  display: flex;
  flex: 0 0 auto;
  list-style: none;
  animation: marquee var(--marquee-duration) linear infinite;
}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__track li {
  flex: 0 0 var(--marquee-slot);
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--marquee-height) - 54px);
  padding: 0 40px;
}
.logo-marquee__track img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.logo-marquee--partners { --marquee-height: 163px; }
.logo-marquee--partners .logo-marquee__track li { padding: 0 56px; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (max-width: 980px) {
  .logo-marquee { --marquee-slot: 200px; --marquee-height: 120px; --marquee-duration: 30s; }
  .logo-marquee__track li { padding: 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-marquee__track { animation: none; }
  .logo-marquee__track[aria-hidden="true"] { display: none; }
}

/* ---- Testimonial slider -------------------------------------------------- */
.testimonials-section { padding: 54px 0; }

.testimonials { position: relative; max-width: var(--container-wide); margin-inline: auto; }
.testimonials__viewport { overflow: hidden; }
.testimonials__track {
  --slide-width: 773px;
  --slide-gap: 60px;
  display: flex;
  gap: var(--slide-gap);
  list-style: none;
  padding: 45px calc((100% - var(--slide-width)) / 2) 55px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }

.testimonial {
  flex: 0 0 var(--slide-width);
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "who logo"
    "quote quote"
    "stars stars";
  column-gap: 30px;
  padding: 45px 30px 55px 55px;
  border-radius: 10px;
  background: var(--peach);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.testimonial:not(.is-active) { opacity: 0.55; }

.testimonial__who { grid-area: who; }
.testimonial__author { margin: 0 0 10px; font-size: 18px; line-height: 21px; font-weight: 700; color: #000; }
.testimonial__role { margin: 0; font-size: 14px; line-height: 16px; color: #000; }
.testimonial__logo { grid-area: logo; display: flex; align-items: flex-start; justify-content: flex-end; }
.testimonial__logo img { max-height: 80px; max-width: 220px; width: auto; }
.testimonial__quote { grid-area: quote; margin: 34px 0 0; }
.testimonial__quote p { font-size: 14px; line-height: 24px; color: var(--text-quote); }
.testimonial__quote p + p { margin-top: 14px; }
.testimonial__stars { grid-area: stars; margin-top: 44px; width: 89px; height: auto; }

.testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 10px 0 0;
}
.testimonials__arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.testimonials__arrow:hover, .testimonials__arrow:focus-visible { background: var(--green); color: var(--white); border-color: var(--green); }

.testimonials__dots { display: flex; gap: 16px; }
.testimonials__dots button {
  width: 40px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: #d9d9d9;
  transition: background-color 0.2s var(--ease);
}
.testimonials__dots button[aria-selected="true"] { background: var(--coral-dot); }

/* Case-study variant: logo first, quote, author last; grey card; no stars. */
.testimonials--case-study .testimonial {
  grid-template-columns: 1fr;
  grid-template-areas:
    "logo"
    "quote"
    "who";
  background: var(--bg-soft);
}
.testimonials--case-study .testimonial__logo { justify-content: flex-start; }
.testimonials--case-study .testimonial__logo img { max-height: 34px; }
.testimonials--case-study .testimonial__quote { margin-top: 10px; }
.testimonials--case-study .testimonial__quote p { letter-spacing: 0.4px; }
.testimonials--case-study .testimonial__who { margin-top: 40px; }
.testimonials--case-study .testimonial__author { font-family: var(--font-alt); font-size: 14px; line-height: 1.7; margin: 0; color: var(--ink-strong); }
.testimonials--case-study .testimonial__role { font-family: var(--font-alt); font-size: 14px; line-height: 1.7; color: var(--ink-strong); }
.testimonials--case-study .testimonial__stars { display: none; }

@media (max-width: 980px) {
  .testimonials__track { --slide-width: min(88vw, 520px); --slide-gap: 16px; padding-top: 20px; padding-bottom: 30px; }
  .testimonial { grid-template-columns: 1fr; grid-template-areas: "logo" "who" "quote" "stars"; padding: 30px 24px 36px; }
  .testimonial__logo { justify-content: flex-end; margin-bottom: 16px; }
  .testimonial__logo img { max-height: 48px; max-width: 180px; }
  .testimonial__quote { margin-top: 20px; }
  .testimonial__quote p { font-size: 16px; line-height: 1.6; }
  .testimonials__arrow { display: none; }
  .testimonials__dots button { width: 20px; height: 5px; }
}

/* ---- Lottie animation containers ---------------------------------------- */
.lottie { width: 100%; aspect-ratio: var(--lottie-ratio, 1 / 1); }
.lottie svg { display: block; width: 100% !important; height: 100% !important; }