/* /testimonials/moderno/ — a dark film hero, the facts strip, two chapters
   with stills from the film, a result band, and the demo CTA. */
.story-page{background:var(--paper)}
.story-hero{background:radial-gradient(120% 90% at 30% 20%,#0b2419 0%,#06150e 55%,#020a06 100%);color:#f7f2e8;
  padding:72px 0 88px;position:relative;overflow:hidden}
.story-hero::after{content:"";position:absolute;inset:auto -10% -40% 40%;height:80%;
  background:radial-gradient(circle,rgba(201,169,94,.16),transparent 65%);pointer-events:none}
.story-hero-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:56px;align-items:center;position:relative;z-index:1}
.story-kicker{display:inline-flex;align-items:center;gap:10px;font:700 10px/1 var(--font-geist-mono),monospace;
  letter-spacing:.14em;color:#e6cf94}
.story-kicker i{width:8px;height:8px;border-radius:50%;background:#c9a95e;box-shadow:0 0 0 4px rgba(201,169,94,.22)}
.story-hero h1{font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:-.05em;margin:24px 0 22px;color:#fffdf7}
.story-hero h1 em{font-family:Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.03em;color:#e6cf94}
.story-hero-copy p{color:#b8c6bc;font-size:17px;line-height:1.6;margin:0;max-width:460px}
.story-film{margin:0}
.story-player{position:relative;border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(247,242,232,.12);aspect-ratio:16/9}
.story-player video{display:block;width:100%;height:100%;object-fit:cover}
.story-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;
  padding:28px;border:0;cursor:pointer;color:#fff;font:inherit;
  background:linear-gradient(180deg,transparent 45%,rgba(2,10,6,.72) 100%)}
.story-play-icon{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(180deg,#ecd7a0,#c9a95e);box-shadow:0 14px 40px rgba(0,0,0,.45);transition:transform .25s var(--hx-ease,ease)}
.story-play-icon svg{width:30px;height:30px;fill:#06150e;margin-left:4px}
.story-play:hover .story-play-icon,.story-play:focus-visible .story-play-icon{transform:scale(1.07)}
.story-play:focus-visible{outline:3px solid #e6cf94;outline-offset:-3px}
.story-play-label{font-weight:700;font-size:18px;letter-spacing:-.02em;padding-bottom:6px}
.story-play-label b{font:600 12px/1 var(--font-geist-mono),monospace;color:#e6cf94;margin-left:8px;letter-spacing:.06em}
.story-player.is-playing .story-play{display:none}
.story-film figcaption{display:flex;align-items:center;gap:14px;margin-top:20px;color:#b8c6bc;font-size:13px}
.story-film figcaption strong{display:block;color:#fffdf7;font-size:15px;margin-bottom:2px}
.story-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#123325;border:1px solid rgba(230,207,148,.4);color:#e6cf94;font:700 12px/1 var(--font-geist-mono),monospace}
.story-facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:-1px;border-left:1px solid var(--line)}
.story-facts div{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#ffffff52}
.story-facts span{display:block;font:700 9px/1 var(--font-geist-mono),monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);margin-bottom:12px}
.story-facts strong{font-size:17px;letter-spacing:-.03em;line-height:1.2}
.story-chapters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center;padding-top:96px}
.story-step{font:700 10px/1 var(--font-geist-mono),monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.story-chapters h2{font-size:clamp(30px,3.2vw,46px);letter-spacing:-.05em;line-height:1.02;margin:18px 0 26px}
.story-chapters blockquote{margin:0 0 18px;padding:0 0 0 22px;border-left:3px solid var(--gold);
  font-size:18px;line-height:1.55;color:#2c3a31;letter-spacing:-.01em}
.story-still{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(6,21,14,.18)}
.story-still img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.story-result{margin-top:110px;background:#06150e;color:#f7f2e8;padding:88px 0}
.story-result .story-step{color:#e6cf94}
.story-big{margin:26px 0 56px;max-width:1080px;font-size:clamp(32px,4vw,58px);line-height:1.06;letter-spacing:-.045em;font-weight:700}
.story-big em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#e6cf94;letter-spacing:-.03em}
.story-results{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid #ffffff2e}
.story-results li{padding:26px 28px 0 0}
.story-results strong{display:block;font:700 10px/1 var(--font-geist-mono),monospace;letter-spacing:.12em;
  text-transform:uppercase;color:#e6cf94;margin-bottom:14px}
.story-results span{color:#d5ddd7;font-size:16px;line-height:1.55}
.story-attrib{margin:40px 0 0;color:#87978d;font-size:14px}
.story-cta{text-align:center;padding:110px 0 120px}
.story-cta h2{font-size:clamp(34px,4.4vw,62px);letter-spacing:-.05em;margin:0 0 18px}
.story-cta h2 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--green)}
.story-cta p{color:var(--muted);font-size:17px;max-width:560px;margin:0 auto 32px;line-height:1.6}
.story-cta .hero-actions{justify-content:center}
@media (max-width:960px){
  .story-hero{padding:44px 0 56px}
  .story-hero-inner,.story-chapters{grid-template-columns:1fr;gap:34px}
  .story-flip .story-still{order:2}
  .story-facts{grid-template-columns:repeat(2,1fr)}
  .story-results{grid-template-columns:1fr}
  .story-chapters{padding-top:64px}
  .story-result{margin-top:72px;padding:64px 0}
}
@media (max-width:520px){
  .story-play{padding:16px;gap:12px}
  .story-play-icon{width:58px;height:58px}
  .story-play-icon svg{width:24px;height:24px}
  .story-play-label{font-size:15px}
  .story-chapters blockquote{font-size:16px}
}