.stories-page { overflow: hidden; }
.stories-hero {
    min-height: 30rem;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(17, 19, 23, .98), rgba(17, 19, 23, .72)), url('../images/history-image-01.jpg') center/cover;
}
.stories-hero-content { max-width: 58rem; }
.stories-eyebrow { color: var(--primary, #51e858); margin-bottom: 1rem; }
.stories-hero .title-xl { max-width: 15ch; margin: 0 0 1.25rem; }
.stories-hero .lead { max-width: 48rem; }
.stories-gallery { background: var(--surface, #17191d); }
.stories-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.stories-heading .muted-copy { max-width: 42rem; }
.stories-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.stories-filter { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .7rem 1rem; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.stories-filter:hover, .stories-filter:focus-visible, .stories-filter.is-active { border-color: #51e858; background: #51e858; color: #111317; }
.stories-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.story-card[hidden] { display: none; }
.comparison-slider-container { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; aspect-ratio: 4 / 3; margin-bottom: 1.4rem; border: 1px solid rgba(81,232,88,.28); border-radius: .75rem; background: #111317; box-shadow: 0 0 24px rgba(81,232,88,.12); cursor: ew-resize; }
.comparison-slider-container:focus-visible { outline: 3px solid #51e858; outline-offset: 3px; }
.comparison-slider-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparison-slider-before { position: absolute; inset: 0 auto 0 0; z-index: 2; width: 50%; overflow: hidden; border-right: 2px solid #51e858; }
.comparison-slider-before img { display: block; width: var(--comparison-width, 100%); max-width: none; height: 100%; object-fit: cover; }
.comparison-handle { position: absolute; inset: 0 auto 0 50%; z-index: 4; width: 3px; background: #51e858; transform: translateX(-50%); }
.comparison-handle::after { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #51e858; color: #111317; content: '↔'; font-weight: 800; transform: translate(-50%,-50%); box-shadow: 0 0 16px rgba(81,232,88,.55); }
.slider-label { position: absolute; top: 1rem; z-index: 5; padding: .3rem .65rem; border-radius: .2rem; background: rgba(17,19,23,.78); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; pointer-events: none; }
.label-before { left: 1rem; }
.label-after { right: 1rem; }
.story-card .title-sm { margin: 0 0 .55rem; }
.story-excerpt, .story-copy { color: var(--muted, #b8bcb8); }
.story-extra-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; margin-top: 1.2rem; }
.story-extra-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .35rem; }
.stories-empty { padding: 3rem; border: 1px dashed rgba(255,255,255,.22); text-align: center; }
.stories-cta { background: #111317; }
.stories-cta-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); align-items: center; gap: 3rem; }
.stories-cta-inner > img { width: 100%; max-height: 24rem; object-fit: cover; border-radius: .75rem; }
.stories-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 800px) {
    .stories-hero { min-height: 25rem; }
    .stories-heading, .stories-cta-inner { display: grid; grid-template-columns: 1fr; align-items: start; }
    .stories-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .comparison-slider-before, .comparison-handle { transition: none; }
}