.impact-voices {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 6vw, 7rem) clamp(1.25rem, 4vw, 5rem) clamp(5rem, 8vw, 9rem);
  /* White, not lilac (Hodge, 8 Oct): the three films carry the colour. */
  background: #fff;
  color: #241c2c;
  font-family: var(--font-ui, "Inter", sans-serif);
}
.impact-voices__intro { display: grid; justify-items: center; gap: 1.2rem; margin: 0 auto clamp(2.5rem, 3vw, 3.5rem); text-align: center; }
.impact-voices__eyebrow { margin: 0; color: #604783; font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.impact-voices__intro h2 { max-width: 13ch; margin: 0; font-size: clamp(3.5rem, 5.5vw, 6.5rem); font-weight: 400; line-height: .92; letter-spacing: -.075em; }
.impact-voices__intro h2 em { color: #674693; font-family: var(--font-accent, "Inter", sans-serif); font-weight: 600; }
.impact-voices__intro > p:last-child { max-width: 36rem; margin: 0; color: #655a6e; font-size: clamp(1rem, 1.15vw, 1.25rem); line-height: 1.5; }
.impact-voices__grid { display: grid; gap: clamp(2rem, 5vw, 6rem); max-width: 96rem; margin: 0 auto; }
.impact-voice { display: block; width: 100%; max-width: 20rem; min-width: 0; color: inherit; }
.impact-voices.is-reveal-ready .impact-voice { opacity: 0; transform: translateY(6rem); transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.impact-voices.is-reveal-ready .impact-voice.is-revealed { opacity: 1; transform: translateY(0); }
.impact-voice__frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #453453; color: #fff; }
.impact-voice:nth-child(2) .impact-voice__frame { background: #62647d; }
.impact-voice:nth-child(3) .impact-voice__frame { background: #b8a1cf; }
.impact-voice__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.impact-voice__frame:not(.is-playing)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 27, .34), transparent 27%, transparent 65%, rgba(20, 12, 27, .32)); pointer-events: none; }
.impact-voice__index { position: absolute; z-index: 1; top: 1.5rem; left: 1.5rem; color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.impact-voice__play { position: absolute; z-index: 2; inset: 0; display: grid; align-content: center; justify-items: center; gap: .9rem; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #fff; font: 600 .7rem/1 var(--font-ui, "Inter", sans-serif); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.impact-voice__play span:first-child { display: grid; width: clamp(4.5rem, 6vw, 6.5rem); aspect-ratio: 1; place-items: center; padding-left: .2rem; border: 1px solid #fff; border-radius: 50%; background: rgba(28, 19, 38, .45); font-size: 1.2rem; transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s ease; }
.impact-voice__play:hover span:first-child,
.impact-voice__play:focus-visible span:first-child { transform: scale(1.1); background: rgba(28, 19, 38, .8); }
.impact-voice__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.impact-voice__frame.is-playing .impact-voice__play,
.impact-voice__frame.is-playing .impact-voice__index { display: none; }
.impact-voice__shutter { display: none; }
.impact-voices.is-reveal-ready .impact-voice__shutter {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #5a3f70;
  color: #e9cfee;
  pointer-events: none;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1) .45s, visibility 0s linear 1.45s;
}
.impact-voices.is-reveal-ready .impact-voice:nth-child(2) .impact-voice__shutter { background: #49415f; color: #d6bfaa; }
.impact-voices.is-reveal-ready .impact-voice:nth-child(3) .impact-voice__shutter { background: #757891; color: #eee8f2; }
.impact-voices.is-reveal-ready .impact-voice.is-revealed .impact-voice__shutter { transform: translateY(-101%); visibility: hidden; }
.impact-voice__shutter::before,
.impact-voice__shutter::after { position: absolute; right: 1rem; left: 1rem; height: 1px; content: ""; background: currentColor; opacity: .35; }
.impact-voice__shutter::before { top: 1rem; }
.impact-voice__shutter::after { bottom: 1rem; }
.impact-voice__shutter-mark {
  display: block;
  width: clamp(4rem, 7vw, 7.5rem);
  height: clamp(7rem, 13vw, 13rem);
  background: currentColor;
  -webkit-mask: url("assets/brand/tlh-monogram-mask.svg") center / contain no-repeat;
  mask: url("assets/brand/tlh-monogram-mask.svg") center / contain no-repeat;
}
.impact-voice__shutter-number { position: absolute; right: 1.4rem; bottom: 1.8rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; }
.impact-voice__caption { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid #bbaec5; margin-top: 1.2rem; }
.impact-voice__caption strong { font-size: clamp(1.1rem, 1.4vw, 1.45rem); font-weight: 500; letter-spacing: -.035em; }
.impact-voice__caption > span { padding-top: .25rem; color: #675a70; font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
.impact-voice:focus-within .impact-voice__caption strong { color: #674693; }
.impact-voice__quote { margin: 1.1rem 0 0; color: #302638; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.35rem, 1.7vw, 2rem); line-height: 1.16; letter-spacing: -.045em; text-align: center; text-wrap: balance; }
.impact-final-image { position: relative; z-index: 2; height: min(90svh, 58rem); min-height: 28rem; margin: 0; overflow: hidden; background: #283849; }
.impact-final-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
@media (min-width: 800px) { .impact-voices__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; } }
@media (max-width: 799px) { .impact-voices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .impact-voices__grid { grid-template-columns: 1fr; justify-items: center; } .impact-voice { max-width: 23rem; } .impact-final-image { height: 65svh; } }
@media (prefers-reduced-motion: reduce) { .impact-voice__play span:first-child, .impact-voices.is-reveal-ready .impact-voice, .impact-voices.is-reveal-ready .impact-voice__shutter { transition: none; } }

/* The same section on the homepage (under the globe) and at the foot of each
   case study (ClientFilms.astro, 8 Oct). Its ground matches whatever sits
   directly above it, so the join never shows as a line. On phones the three
   films become a swipe row — about one and a half across — rather than three
   full-height films stacked, which pushed everything below a long way down. */
.impact-voices--home { background: var(--client-films-ground, #fbfaf8); }
.impact-voices--case { padding-top: clamp(4rem, 8vw, 7.5rem); }
@media (max-width: 799px) {
  .impact-voices--row .impact-voices__grid {
    display: flex;
    gap: 1rem;
    margin-inline: calc(-1 * clamp(1.25rem, 4vw, 5rem));
    padding-inline: clamp(1.25rem, 4vw, 5rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .impact-voices--row .impact-voices__grid::-webkit-scrollbar { display: none; }
  .impact-voices--row .impact-voice { flex: 0 0 62vw; max-width: none; }
  .impact-voices--row .impact-voice__quote { font-size: clamp(1.1rem, 4.6vw, 1.35rem); text-align: left; }
}