* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.stories-page { margin: 0; color: #173f69; background: #f2f2f2; }
.stories-header { position: relative; overflow: hidden; min-height: 610px; color: #fff; background: #184e87; }
.stories-header::before { content: ''; position: absolute; width: 440px; height: 440px; top: 70px; right: -110px; border: 1px solid rgba(255,255,255,.14); border-radius: 44% 56% 57% 43% / 52% 39% 61% 48%; transform: rotate(18deg); }
.stories-header::after { content: ''; position: absolute; width: 170px; height: 170px; left: 8%; bottom: 95px; border: 1px solid rgba(176,198,217,.24); border-radius: 50%; }
.stories-hero { position: relative; z-index: 1; width: calc(100% - (var(--site-gutter) * 2)); max-width: var(--site-width); margin: 84px auto; padding: 0 0 120px; }
.stories-eyebrow, .stories-kicker { margin: 0 0 15px; color: #B0C6D9; font-family: 'Lexend', sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.stories-hero h1 { margin: 0 !important; max-width: 810px !important; font-size: clamp(3.2rem, 3vw, 4.5rem) !important; line-height: .98 !important; letter-spacing: -.055em !important; }
.stories-hero > p:last-child { max-width: 600px; margin: 30px 0 0; color: rgba(255,255,255,.8); font-size: 1.12rem; line-height: 1.7; }
.stories-wave { position: absolute; right: 0; bottom: -1px; left: 0; width: 100%; height: 86px; fill: #f2f2f2; }
.stories-index { width: calc(100% - (var(--site-gutter) * 2)); max-width: var(--site-width); margin: 0px auto; padding: 72px 0; }
.stories-index-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; margin-bottom: 44px; }
.stories-index-head h2 { margin: 0; color: #184e87; font-size: clamp(2.25rem, 4vw, 3.7rem); line-height: 1.05; letter-spacing: -.04em; }
.stories-index-head > p { margin: 0; color: #5f7185; font-size: 1rem; line-height: 1.7; }
.stories-kicker { color: #6387a6; }
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stories-grid:empty { display: none; }
[data-dynamic-stories]:not(:empty) + .stories-static-grid { margin-top: 24px; }
.story-card { display: flex; overflow: hidden; min-width: 0; flex-direction: column; border: 1px solid rgba(24,78,135,.08); border-radius: 22px; background: #fff; box-shadow: 0 7px 20px rgba(24,78,135,.06); transition: transform .3s ease, box-shadow .3s ease; }
.story-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(24,78,135,.13); }
.story-placeholder { position: relative; display: grid; overflow: hidden; flex: 0 0 250px; place-items: center; height: 250px; color: rgba(255,255,255,.72); background: #6387a6; }
.story-placeholder.community { background: #5c83a5; }
.story-placeholder.ocean { background: #184e87; }
.story-placeholder span { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 7px 13px; color: #fff; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(17,57,96,.45); backdrop-filter: blur(8px); font-family: 'Lexend', sans-serif; font-size: .72rem; font-weight: 700; }
.story-placeholder svg { width: 65%; height: 70%; }
.story-placeholder.story-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.story-card:hover .story-placeholder.story-image img { transform: scale(1.05); }
.story-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px 24px 22px; }
.story-status { margin: 0 !important; color: #708394 !important; font-size: .82rem !important; font-weight: 400; letter-spacing: 0; text-transform: none; }
.story-card h3 { margin: 0 0 12px; color: #173f69; font-size: 1.28rem; line-height: 1.3; }
.story-title-link { color: inherit; text-decoration: none; }
.story-title-link:hover { color: #2367a2; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.story-card-copy > p { margin: 0; color: #65768a; font-size: .92rem; line-height: 1.65; }
.story-meta { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 17px; border-top: 1px solid rgba(24,78,135,.18); }
.story-read { display: inline-flex; gap: 7px; color: #184e87; font-family: 'Lexend', sans-serif; font-size: .79rem; font-weight: 700; text-decoration: none; }
.story-read:hover { color: #6387a6; }
.stories-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; max-width: 1280px; margin: 0 auto 72px; padding: 48px 54px; color: #fff; border-radius: 24px; background: #184e87; }
.stories-cta p { margin: 0 0 9px; color: #B0C6D9; font-weight: 700; }
.stories-cta h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.6rem); }
.stories-cta a { flex: none; padding: 15px 23px; color: #184e87; border-radius: 999px; background: #fff; font-family: 'Lexend', sans-serif; font-size: .82rem; font-weight: 700; text-decoration: none; }
@media (max-width: 800px) {
    .stories-hero { margin-top: 70px; }
    .stories-index-head { grid-template-columns: 1fr; gap: 20px; }
    .stories-grid { grid-template-columns: 1fr; }
    .story-placeholder { flex-basis: 290px; height: 290px; }
}
@media (max-width: 560px) {
    .stories-header { min-height: 560px; }
    .stories-hero { margin-top: 55px; padding-bottom: 100px; }
    .stories-index { padding: 52px 0; }
    .story-placeholder { flex-basis: 230px; height: 230px; }
    .stories-cta { align-items: flex-start; flex-direction: column; margin-bottom: 52px; padding: 36px 28px; }
}