.testimonials-page { overflow-x: hidden; }
.testimonials-page .header-actions { gap: 10px; }

.story-hero {
  background:
    radial-gradient(circle at 87% 71%, rgba(220,203,187,.5), transparent 29%),
    linear-gradient(145deg, #f8f5ee 0%, #eee9df 100%);
}
.story-visual .voice-line, .story-visual .quote-mark {
  fill: none; stroke: var(--forest); stroke-linecap: round; stroke-linejoin: round;
}
.story-visual .voice-line { stroke-width: .9; stroke-dasharray: 4 9; opacity: .48; animation: voiceFlow 16s linear infinite; }
.story-visual .voice-points circle { fill: var(--paper); stroke: var(--forest); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: voicePulse 3.4s var(--voice-delay,0s) ease-in-out infinite; }
.story-visual .voice-points circle:nth-child(2) { --voice-delay: .8s; }
.story-visual .voice-points circle:nth-child(3) { --voice-delay: 1.6s; }
.story-visual .quote-mark { stroke-width: 1.4; stroke-dasharray: 90; stroke-dashoffset: 90; animation: draw 1.2s 1.35s var(--ease) forwards; }

@media (max-width: 719px) {
  .story-hero { min-height: 820px; }
  .story-visual { width: 230px; height: 285px; right: -48px; bottom: 4px; opacity: .82; }
}

.stories-section { overflow: hidden; padding: 88px 0 92px; }
.carousel-shell { position: relative; }
.story-list {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-inline: contain;
  padding: 4px 22px 38px; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.story-list::-webkit-scrollbar { display: none; }
.story-list:focus-visible { outline: 1px solid var(--forest); outline-offset: -5px; }

.story-card {
  position: relative; isolation: isolate; flex: 0 0 calc(100vw - 64px); min-height: 470px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  padding: 64px 28px 28px; color: var(--paper); background: var(--forest);
  border: 1px solid rgba(255,255,255,.13); border-radius: 34px 34px 12px 34px;
  box-shadow: 0 22px 42px rgba(21,49,41,.19); scroll-snap-align: center;
}
.story-card:first-child { min-height: 680px; }
.story-card:nth-child(3n + 2) { color: var(--ink); background: var(--sand); border-radius: 34px 12px 34px 34px; box-shadow: 0 22px 42px rgba(83,66,49,.17); }
.story-card:nth-child(3n) { background: #697965; border-radius: 12px 34px 34px 34px; }
.story-card::before, .story-card::after { content:""; position:absolute; z-index:-1; border:1px solid currentColor; border-radius:50%; opacity:.13; pointer-events:none; }
.story-card::before { width:230px; height:230px; right:-92px; top:-58px; }
.story-card::after { width:140px; height:140px; right:-42px; top:-8px; }
.story-number { position: absolute; left: 26px; top: 24px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; font-size: 8px; letter-spacing: .08em; }
.story-card blockquote { margin: 0; font: 400 24px/1.28 var(--serif); letter-spacing: -.018em; }
.story-card:first-child blockquote { font-size: 19px; line-height: 1.42; }
.story-card p { margin: 34px 0 0; font: italic 400 23px/1 var(--serif); }
.story-card p::before { content:"— "; }

.carousel-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 22px; }
.carousel-footer .carousel-hint { margin: 0; }
.carousel-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.carousel-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; transition: color .25s, background .25s, transform .25s var(--ease); }
.carousel-controls button:is(:hover,:focus-visible) { color: var(--paper); background: var(--forest); outline: none; }
.carousel-controls button:active { transform: scale(.94); }
.carousel-controls output { min-width: 42px; font-size: 8px; font-weight: 600; letter-spacing: .12em; text-align: center; }

.results-section { overflow: hidden; padding: 82px 0 92px; background: var(--cream); }
.results-heading { padding: 0 22px 44px; }
.results-heading h2 { max-width: 620px; margin: 0 0 18px; font: 400 43px/1.04 var(--serif); letter-spacing: -.04em; }
.results-heading > div > p:last-child { max-width: 530px; font-size: 12px; }
.consent-note { display: flex; gap: 13px; align-items: flex-start; margin-top: 30px; padding: 17px; border: 1px solid var(--line); background: rgba(251,250,246,.7); }
.consent-note > span { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--paper); background: var(--forest); font-size: 12px; }
.consent-note p { margin: 0; font-size: 9px; line-height: 1.55; }
.consent-note strong { display: block; margin-bottom: 3px; font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }

.result-list { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 4px 22px 38px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.result-list::-webkit-scrollbar { display: none; }
.result-list:focus-visible { outline: 1px solid var(--forest); outline-offset: -5px; }
.result-card { position: relative; flex: 0 0 calc(100vw - 64px); overflow: hidden; padding: 0; color: var(--paper); background: var(--forest); border: 0; border-radius: 34px 34px 12px 34px; box-shadow: 0 22px 42px rgba(21,49,41,.18); scroll-snap-align: center; cursor: zoom-in; }
.result-card:nth-child(3n + 2) { border-radius: 34px 12px 34px 34px; }
.result-card:nth-child(3n) { border-radius: 12px 34px 34px 34px; }
.result-card img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .65s var(--ease); }
.result-card > span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px; background: rgba(18,45,37,.9); backdrop-filter: blur(10px); font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.result-card > span i { font-style: normal; font-size: 17px; }
.result-card:is(:hover,:focus-visible) img { transform: scale(1.025); }
.result-card:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }

.media-dialog { width: min(calc(100% - 20px),700px); max-width: 700px; max-height: calc(100dvh - 20px); margin: auto; padding: 0; overflow: hidden; color: var(--ink); background: var(--white); border: 0; border-radius: 28px; box-shadow: 0 30px 90px rgba(10,28,23,.4); }
.media-dialog:not([open]) { display: none; }
.media-dialog[open] { animation: dialogIn .45s var(--ease) both; }
.media-dialog::backdrop { background: rgba(12,31,25,.62); backdrop-filter: blur(8px); animation: backdropIn .3s ease both; }
.media-dialog-top, .media-controls { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; }
.media-dialog-top { border-bottom: 1px solid var(--line); font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.media-dialog-top button { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.media-dialog-top i { font-style: normal; font-size: 17px; }
.media-stage { overflow: hidden; background: #0f1f1a; touch-action: pan-y; }
.media-stage img { display: block; width: 100%; max-height: calc(100dvh - 125px); object-fit: contain; }
.media-stage img.slide-from-right { animation: slideFromRight .38s var(--ease) both; }
.media-stage img.slide-from-left { animation: slideFromLeft .38s var(--ease) both; }
.media-controls { border-top: 1px solid var(--line); }
.media-controls button { min-height: 34px; border: 0; background: transparent; font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.media-controls > span { font-size: 7px; letter-spacing: .11em; text-transform: uppercase; opacity: .55; }

@keyframes dialogIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes backdropIn { from { opacity: 0; } }
@keyframes slideFromRight { from { opacity: .4; transform: translateX(22px); } }
@keyframes slideFromLeft { from { opacity: .4; transform: translateX(-22px); } }

.story-cta { position: relative; overflow: hidden; margin: 20px 14px; padding: 46px 22px; color: var(--paper); background: var(--ink); }
.story-cta::after { content:""; position:absolute; width:240px; height:240px; right:-104px; top:-78px; border:1px solid rgba(244,241,233,.12); border-radius:50%; box-shadow:0 0 0 38px rgba(244,241,233,.035),0 0 0 78px rgba(244,241,233,.025); }
.story-cta h2 { position: relative; z-index: 2; margin: 0; font: 400 38px/1.04 var(--serif); letter-spacing: -.035em; }
.story-cta > p { position: relative; z-index: 2; margin: 22px 0; font-size: 12px; opacity: .82; }
.story-cta .primary-cta { position: relative; z-index: 2; }

@keyframes voiceFlow { to { stroke-dashoffset: -130; } }
@keyframes voicePulse { 50% { transform: scale(1.55); fill: var(--forest); } }

@media (min-width: 720px) {
  .testimonials-page .header-actions { gap: 28px; }
  .stories-section { padding-top: 120px; }
  .story-list { gap: 20px; padding: 6px 7vw 48px; }
  .story-card { flex-basis: min(420px, 40vw); min-height: 560px; padding: 76px 38px 34px; }
  .story-card:first-child { min-height: 720px; }
  .story-card blockquote { font-size: 29px; }
  .story-card:first-child blockquote { font-size: 22px; }
  .carousel-footer { margin: 0 7vw; }
  .result-list { gap: 20px; padding: 6px 7vw 48px; }
  .results-heading { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.7fr); gap: 7vw; align-items: end; padding: 0 7vw 58px; }
  .results-heading h2 { font-size: 56px; }
  .consent-note { margin: 0; }
  .result-card { flex-basis: min(410px,38vw); }
  .story-cta { margin: 28px 3vw; padding: 80px 7vw; }
  .story-cta h2 { max-width: 690px; font-size: 55px; }
  .story-cta > p { max-width: 540px; font-size: 14px; }
}

@media (min-width: 1180px) {
  .story-card { flex-basis: 390px; }
  .result-card { flex-basis: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-visual .voice-line, .story-visual .voice-points circle, .story-visual .quote-mark { animation: none; }
}