/* Scoped homepage addition; existing tiles and hero keep their layout rules. */
.story-teaser { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 52px 56px; background: #d7eeee; color: #0a1740; position: relative; isolation: isolate; }
/* All artwork stays out of grid flow, so the existing text sets the same size. */
.story-teaser-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.story-teaser-media img, .story-teaser-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.story-teaser::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(232 246 246 / .8), rgb(232 246 246 / .75) 63%, rgb(232 246 246 / .58) 86%, transparent); }
.story-teaser > :not(.story-teaser-media) { position: relative; z-index: 2; }
.story-teaser .story-teaser-label { margin: 0 0 16px; color: #014bd0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.story-teaser h2 { max-width: 12ch; margin: 0; font-family: "Sora", Arial, sans-serif; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.15; letter-spacing: -.04em; }
.story-teaser-copy p { max-width: 48ch; margin: 0; color: #0a1740; font-size: 16px; line-height: 1.75; }
.story-teaser-link { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; margin-top: 24px; padding: 6px 6px 6px 20px; border-radius: 999px; background: #fff; color: #014bd0; font-size: 14px; font-weight: 700; text-decoration: none; }
.story-teaser-link > span:last-child { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #014bd0; color: #fff; }
.story-teaser-link:hover { background: #e3ecfc; }
.story-teaser-link:focus-visible { outline: 3px solid #014bd0; outline-offset: 5px; }
@media (min-width: 701px) {
  .story-teaser-copy { transform: translateX(-32px); }
}
@media (max-width: 1360px) {
  .story-teaser::after { background: linear-gradient(90deg, rgb(232 246 246 / .94), rgb(232 246 246 / .88) 68%, rgb(232 246 246 / .55)); }
}
@media (max-width: 700px) {
  .story-teaser { grid-template-columns: 1fr; gap: 24px; padding: 36px 28px; }
  .story-teaser-copy p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-teaser-media video { display: none; }
}
@media (forced-colors: active) {
  .story-teaser-media, .story-teaser::after { display: none; }
}