/* D-028: black continuity, own-media diagrams, finite native scroll. */
#explore .experience-grid { background:#08090B; }
#explore.explore-mobile .network-view { background:#08090B; }
.service-story { background:#08090B; color:#f6f3eb; position:relative; isolation:isolate; }
.story-intro,.story-outro { max-width:850px; margin:0 auto; padding:100px 26px 10px; text-align:center; }
.story-intro h2 { font-size:clamp(36px,5vw,76px); line-height:1.05; letter-spacing:-.045em; margin:20px 0; }
.story-intro > p:last-of-type,.story-outro p { color:#c8c7c2; font-size:clamp(16px,1.65vw,22px); line-height:1.65; }
.story-connector { display:block; width:80px; height:120px; margin:24px auto 0; stroke:#D4AA24; stroke-width:1.5; overflow:visible; }
.story-wire { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--story-line,1)); }
.story-arrowhead { opacity:var(--story-line,1); }
.story-step { position:relative; min-height:100svh; }
.story-frame { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:100px max(5vw,24px) 22px; }
.story-scene { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:30px 6vw; align-items:center; width:100%; max-width:1400px; margin:auto; }
.story-step:nth-of-type(even) .story-copy { order:2; }
.story-step:nth-of-type(even) .story-visual { order:1; }
.story-copy { max-width:580px; }
.story-kicker { display:flex; align-items:center; gap:16px; color:#D4AA24; font-size:13px; letter-spacing:.09em; text-transform:uppercase; }
.story-number { border:1px solid #d4aa2466; border-radius:50%; width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; }
.story-copy h3 { font-size:clamp(30px,3.7vw,62px); line-height:1.08; letter-spacing:-.04em; margin:22px 0; font-weight:650; }
.story-copy > p:last-child { font-size:clamp(15px,1.45vw,20px); line-height:1.75; color:#c8c7c2; margin:0; }
.story-visual { position:relative; min-width:0; margin:0; padding:30px 36px 44px; aspect-ratio:1.2; display:flex; align-items:center; justify-content:center; }
.story-image { width:75%; height:100%; max-height:430px; overflow:hidden; border-radius:18px; border:1px solid #ffffff29; box-shadow:0 16px 80px #0008; position:relative; z-index:1; }
.story-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
[data-story-service="web"] .story-image { width:100%; height:auto; aspect-ratio:1.78; }
.story-visual-links { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#176B68; stroke-width:2; }
.story-visual-links path { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--story-reveal,1)); }
.story-chips { position:absolute; z-index:2; inset:0; pointer-events:none; }
.story-chips span { position:absolute; display:block; padding:13px 19px; border:1px solid #d4aa2466; background:#111216ed; border-radius:12px; font-size:clamp(12px,1.1vw,15px); box-shadow:0 10px 25px #0007; }
.story-chips span:nth-child(1) { left:0; top:6%; }
.story-chips span:nth-child(2) { right:0; top:45%; border-color:#278c87; }
.story-chips span:nth-child(3) { left:5%; bottom:8%; }
.story-concept { position:absolute; margin:0; bottom:8px; left:0; right:0; text-align:center; color:#aaa9a4; font-size:11px; }
.story-next { grid-column:1/-1; order:3; text-align:center; color:#D4AA24; font-size:14px; line-height:1.5; margin:4px auto 0; max-width:620px; }
.story-frame > .story-connector { height:90px; flex-shrink:0; margin-top:12px; }
.story-outro { padding:25px 26px 100px; }
.story-outro .cinema-text-link { color:#D4AA24; border-color:#D4AA24; }
.story-outro a:focus-visible { outline:3px solid #fff; outline-offset:6px; }
.story-enhanced .story-track { height:700svh; position:relative; }
.story-enhanced .story-stage { position:sticky; top:0; height:100svh; }
.story-enhanced .story-step { position:absolute; inset:0; height:100%; min-height:0; pointer-events:none; }
.story-enhanced .story-frame { height:100%; min-height:0; }
.story-enhanced .story-frame { opacity:var(--story-opacity,1); transform:translate3d(0,calc(var(--story-shift,0) * 1px),0); }
.story-enhanced .story-image { transform:scale(calc(.94 + var(--story-reveal,1) * .06)); }
@media(max-width:759px) {
  .story-intro { padding:65px 22px 0; }
  .story-intro h2 { font-size:38px; }
  .story-frame { padding:85px 22px 14px; }
  .story-scene { grid-template-columns:minmax(0,1fr); gap:16px; max-width:530px; }
  .story-copy,.story-step:nth-of-type(even) .story-copy { order:0; }
  .story-visual,.story-step:nth-of-type(even) .story-visual { order:1; aspect-ratio:1.7; padding:18px 24px 25px; width:100%; max-height:28svh; }
  .story-image { width:70%; border-radius:12px; }
  .story-copy h3 { font-size:clamp(27px,6.8vw,38px); margin:13px 0; }
  .story-copy > p:last-child { font-size:14px; line-height:1.55; }
  .story-kicker { font-size:10px; gap:10px; }
  .story-number { width:32px; height:32px; }
  .story-chips span { padding:8px 10px; font-size:10px; border-radius:8px; }
  .story-concept { font-size:9px; bottom:0; }
  .story-next { font-size:12px; }
  .story-frame > .story-connector { height:55px; margin-top:5px; }
}
@media(prefers-reduced-motion:reduce),(max-height:699px) {
  .story-enhanced .story-track { height:auto; }
  .story-enhanced .story-stage { position:relative; height:auto; }
  .story-enhanced .story-step { position:relative; inset:auto; }
  .story-step,.story-enhanced .story-step { height:auto; min-height:0; }
  .story-frame,.story-enhanced .story-frame { position:relative; height:auto; min-height:0; padding-block:65px 20px; }
  .story-frame,.story-enhanced .story-frame,.story-enhanced .story-image { opacity:1; transform:none; }
  .story-wire,.story-visual-links path { stroke-dashoffset:0; }
  .story-arrowhead { opacity:1; }
  .story-visual { min-height:200px; max-height:none; }
}