/* =========================================================
   RevShyft — Shared Service Proof + Testimonial Spotlight
   Refined composition pass.
   Reusable across service pages; page-specific copy remains
   in each page's HTML.
   ========================================================= */

.service-proof {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(5rem, 6vw, 6.35rem) 0 clamp(5.15rem, 6.2vw, 6.6rem);
}

/* Section intro now belongs to the whole section, not the proof rail. */
.service-proof__header {
  max-width: 70rem;
}

.service-proof__header .eyebrow {
  margin-bottom: 1.05rem;
  color: var(--teal);
}

.service-proof__heading {
  margin: 0;
  max-width: 29ch;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(2.45rem, 3.05vw, 3.18rem);
  font-weight: 600;
  line-height: 1.075;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.service-proof__composition {
  display: grid;
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 1fr);
  gap: clamp(3.75rem, 6.2vw, 6.5rem);
  align-items: start;
  margin-top: clamp(3.15rem, 4vw, 4rem);
}

/* ---------------------------------------------------------
   Static proof rail
   --------------------------------------------------------- */

.service-proof__rail {
  display: grid;
  gap: clamp(2.1rem, 2.65vw, 2.7rem);
  margin: 0;
  padding: 0.35rem 0 0;
}

.service-proof__proof {
  min-width: 0;
}

.service-proof__proof dt {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(1.16rem, 1.05rem + 0.34vw, 1.4rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.022em;
}

.service-proof__proof dd {
  max-width: 20rem;
  margin: 0.52rem 0 0;
  color: var(--ink-secondary);
  font-size: clamp(0.95rem, 0.92rem + 0.08vw, 1.01rem);
  line-height: 1.58;
}

/* ---------------------------------------------------------
   Testimonial spotlight
   --------------------------------------------------------- */

.service-proof__spotlight {
  position: relative;
  min-width: 0;
  isolation: isolate;
  padding: clamp(2rem, 2.6vw, 2.65rem) clamp(2rem, 3vw, 3rem) clamp(1.75rem, 2.4vw, 2.35rem);
  outline: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 87% 13%, rgba(74, 155, 136, 0.095), transparent 34%),
    linear-gradient(108deg, rgba(34, 47, 79, 0.038) 0%, rgba(74, 155, 136, 0.026) 52%, rgba(247, 248, 245, 0) 100%);
}

/* A soft ambient veil gives the testimonial area presence without
   producing a visible card edge or decorative illustration. */
.service-proof__spotlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 42%);
}

.service-proof__stage {
  display: grid;
  align-items: start;
}

/* All slides remain in the same grid area. Hidden slides still contribute
   to the grid's intrinsic height, so the longest quote stabilizes the stage
   and prevents layout shift when testimonials rotate. */
.service-proof__testimonial {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px);
  transition:
    opacity 420ms var(--ease-standard),
    transform 420ms var(--ease-standard);
}

.service-proof__testimonial.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.service-proof__quote {
  max-width: 45rem;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(1.26rem, 1.12rem + 0.42vw, 1.55rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.022em;
}

.service-proof__attribution {
  display: grid;
  gap: 0.24rem;
  margin-top: clamp(1.45rem, 1.85vw, 1.85rem);
}

.service-proof__attribution strong,
.service-proof__attribution cite,
.service-proof__attribution span {
  display: block;
}

.service-proof__attribution strong,
.service-proof__attribution > span:first-child {
  color: var(--ink);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.service-proof__attribution cite,
.service-proof__attribution .service-proof__company {
  color: rgba(34, 47, 79, 0.62);
  font-size: 0.84rem;
  font-style: italic;
  line-height: 1.45;
}

/* Controls remain visually light while retaining 44px targets. Their
   reduced top margin keeps them tied to the attribution rather than floating
   at the bottom of the stage. */
.service-proof__controls {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: clamp(1.15rem, 1.45vw, 1.4rem) 0 0 -0.68rem;
}

.service-proof__arrow,
.service-proof__dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(34, 47, 79, 0.54);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.service-proof__arrow {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transition:
    color 180ms var(--ease-standard),
    transform 180ms var(--ease-standard);
}

.service-proof__arrow:hover,
.service-proof__arrow:focus-visible {
  color: var(--ink);
}

.service-proof__arrow--prev:hover {
  transform: translateX(-2px);
}

.service-proof__arrow--next:hover {
  transform: translateX(2px);
}

.service-proof__dots {
  display: inline-flex;
  align-items: center;
}

.service-proof__dot::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border: 1px solid rgba(34, 47, 79, 0.3);
  border-radius: 50%;
  background: transparent;
  transition:
    background-color 180ms var(--ease-standard),
    border-color 180ms var(--ease-standard),
    transform 180ms var(--ease-standard),
    box-shadow 180ms var(--ease-standard);
}

.service-proof__dot[aria-current="true"]::before {
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(74, 155, 136, 0.08);
  transform: scale(1.08);
}

.service-proof__arrow:focus-visible,
.service-proof__dot:focus-visible {
  outline: 2px solid rgba(74, 155, 136, 0.72);
  outline-offset: -5px;
  border-radius: var(--radius-1);
}

.service-proof__note {
  max-width: 42rem;
  margin: 1.25rem 0 0;
  color: rgba(34, 47, 79, 0.56);
  font-size: 0.79rem;
  line-height: 1.55;
}

/* Existing site Reveal behavior, kept restrained. */
.service-proof[data-reveal] .service-proof__header,
.service-proof[data-reveal] .service-proof__composition {
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity var(--duration-medium) var(--ease-standard),
    transform var(--duration-medium) var(--ease-standard);
}

.service-proof.is-visible .service-proof__header,
.service-proof.is-visible .service-proof__composition {
  opacity: 1;
  transform: translateY(0);
}

.service-proof.is-visible .service-proof__composition {
  transition-delay: 70ms;
}

/* ---------------------------------------------------------
   Laptop / tablet
   --------------------------------------------------------- */

@media (max-width: 1100px) {
  .service-proof__composition {
    grid-template-columns: minmax(14.5rem, 0.46fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 3.75rem);
  }

  .service-proof__spotlight {
    padding-inline: clamp(1.75rem, 2.6vw, 2.35rem);
  }

  .service-proof__quote {
    font-size: clamp(1.16rem, 1.07rem + 0.3vw, 1.34rem);
  }
}

@media (max-width: 899px) {
  .service-proof {
    padding-top: clamp(4.65rem, 7vw, 5.5rem);
    padding-bottom: clamp(4.8rem, 7vw, 5.65rem);
  }

  .service-proof__heading {
    max-width: 27ch;
  }

  .service-proof__composition {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6.5vw, 3.8rem);
  }

  .service-proof__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.4rem, 3.4vw, 2rem);
    padding-top: 0;
  }

  .service-proof__proof dd {
    max-width: none;
  }

  .service-proof__spotlight {
    max-width: 48rem;
  }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 639px) {
  .service-proof {
    padding: clamp(4.25rem, 11vw, 4.85rem) 0 clamp(4.5rem, 11.5vw, 5rem);
  }

  .service-proof__header .eyebrow {
    margin-bottom: 0.9rem;
  }

  .service-proof__heading {
    max-width: none;
    font-size: clamp(2rem, 8vw, 2.4rem);
    line-height: 1.08;
  }

  .service-proof__composition {
    margin-top: 2.5rem;
    gap: 2.85rem;
  }

  .service-proof__rail {
    grid-template-columns: 1fr;
    gap: 1.7rem;
  }

  .service-proof__proof dt {
    font-size: 1.18rem;
  }

  .service-proof__proof dd {
    margin-top: 0.4rem;
    font-size: 0.96rem;
  }

  .service-proof__spotlight {
    max-width: none;
    margin-inline: -0.35rem;
    padding: 1.75rem 1.3rem 1.55rem;
    background:
      radial-gradient(circle at 92% 9%, rgba(74, 155, 136, 0.07), transparent 34%),
      linear-gradient(108deg, rgba(34, 47, 79, 0.032), rgba(247, 248, 245, 0) 95%);
  }

  .service-proof__quote {
    max-width: none;
    font-size: clamp(1.08rem, 4.35vw, 1.22rem);
    line-height: 1.53;
  }

  .service-proof__attribution {
    margin-top: 1.3rem;
  }

  .service-proof__controls {
    margin-top: 1.05rem;
  }

  .service-proof__arrow,
  .service-proof__dot {
    width: 2.75rem;
    height: 2.75rem;
  }

  .service-proof__note {
    margin-top: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-proof[data-reveal] .service-proof__header,
  .service-proof[data-reveal] .service-proof__composition,
  .service-proof__testimonial,
  .service-proof__arrow,
  .service-proof__dot::before {
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  .service-proof__testimonial:not(.is-active) {
    opacity: 0;
  }
}