/* The opening image leaves a glimpse of the customer proof that follows. */
body[data-approved-page="/"] .hero {
  height: max(620px, calc(100svh - 112px));
  min-height: 0;
}

body[data-approved-page="/"] .hero + .logobar {
  padding-top: clamp(28px, 3vw, 40px);
}

/* One quiet wine-coloured surface joins the two shorter customer voices.
   This uses CSS colour only: no new image, filter or animation payload. */
#voices .voice-pair-secondary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
  background:
    radial-gradient(ellipse at 85% 5%, rgba(205, 123, 105, .16), transparent 65%),
    linear-gradient(120deg, #481c2c, #652837 55%, #3f1b29);
}

#voices .voice-pair-secondary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--orange);
}

#voices .voice-pair-secondary .voice-card {
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#voices .voice-pair-secondary .voice-card + .voice-card {
  border-left: 1px solid rgba(255, 255, 255, .2);
}

#voices .voice-pair-secondary .voice-card::before,
#voices .voice-pair-secondary .voice-card::after {
  content: none;
}

#voices .voice-pair-secondary .reddit .voice-logo img {
  filter: brightness(0) invert(1);
}

#voices .voice-pair-secondary figcaption {
  border-color: rgba(255, 255, 255, .25);
}

#voices .voice-pair-secondary figcaption span {
  color: rgba(255, 255, 255, .84);
}

@media (max-width: 980px) {
  body[data-approved-page="/"] .hero {
    height: auto;
    min-height: max(700px, calc(100svh - 80px));
  }
  #voices .voice-pair-secondary {
    grid-template-columns: minmax(0, 1fr);
  }
  #voices .voice-pair-secondary .voice-card + .voice-card {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
}

@media (forced-colors: active) {
  #voices .voice-pair-secondary {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }
  #voices .voice-pair-secondary .voice-card,
  #voices .voice-pair-secondary figcaption span {
    color: CanvasText;
    border-color: CanvasText;
  }
  #voices .voice-pair-secondary .voice-logo img { filter: none; }
}

/* Approved adaptive CTA ring: pale blue on photography, electric blue on glass. */
[data-approved-page="/"] .nav .tv-border-glint,
[data-approved-page="/"] .tv .tv-border-glint {
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
}
[data-approved-page="/"] .nav .tv-border-glint rect,
[data-approved-page="/"] .tv .tv-border-glint rect {
  rx: 14px;
  stroke: #BDD2FF;
  stroke-width: 3;
  stroke-dasharray: 24 76;
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(189,210,255,.3));
}
[data-approved-page="/"] .nav:not(.is-at-top) .tv-border-glint rect {
  stroke: #4D7CFF;
  filter: drop-shadow(0 0 2px rgba(77,124,255,.22));
}
[data-approved-page="/"] .nav:not(.is-at-top) .nav-consultation {
  box-shadow: 0 4px 14px rgba(11,44,128,.18);
}
@media (prefers-reduced-motion: no-preference) {
  [data-approved-page="/"] .nav.tv-cta-seen .tv-border-glint rect,
  [data-approved-page="/"] .tv.tv-cta-seen .tv-border-glint rect {
    animation-name: adaptive-border-pass;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}
@keyframes adaptive-border-pass {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}
@media (forced-colors: active) {
  [data-approved-page="/"] .tv-border-glint { display: none; }
}