.story-page {
        background:
          radial-gradient(circle at 8% 18%, rgba(34, 135, 201, 0.12), transparent 28%),
          radial-gradient(circle at 88% 12%, rgba(246, 183, 57, 0.16), transparent 24%),
          linear-gradient(180deg, #ffffff 0%, #f6faff 46%, #ffffff 100%);
      }

      .story-article-hero {
        padding: clamp(70px, 9vw, 132px) clamp(18px, 5vw, 64px) clamp(38px, 6vw, 72px);
      }

      .story-article-inner {
        width: min(1180px, 100%);
        margin: 0 auto;
      }

      .story-back {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 28px;
        color: var(--navy);
        font-weight: 900;
        text-decoration: none;
      }

      .story-back:hover {
        color: var(--panco-blue);
      }

      .story-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 22px;
      }

      .story-pill {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        color: var(--navy);
        background: var(--panco-yellow);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .story-pill.blue {
        color: #fff;
        background: var(--panco-blue);
      }

      .story-title {
        max-width: 1040px;
        margin: 0;
        color: var(--navy);
        font-size: clamp(2.6rem, 7vw, 6.6rem);
        line-height: 0.94;
        letter-spacing: 0;
      }

      .story-intro {
        max-width: 820px;
        margin: 28px 0 0;
        color: var(--muted);
        font-size: clamp(1.16rem, 2vw, 1.5rem);
        line-height: 1.55;
        font-weight: 600;
      }

      .story-article-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
        gap: clamp(28px, 5vw, 64px);
        align-items: start;
        width: min(1180px, calc(100% - 36px));
        margin: 0 auto clamp(74px, 10vw, 132px);
      }

      .story-feature-image {
        overflow: hidden;
        border: 2px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--shadow);
      }

      .story-feature-image img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
      }

      .story-body {
        padding-top: 34px;
      }

      .story-body p {
        margin: 0 0 22px;
        color: #4d5b6d;
        font-size: clamp(1.04rem, 1.35vw, 1.24rem);
        line-height: 1.75;
      }

      .story-body p:first-child::first-letter {
        float: left;
        margin: 0 10px 0 0;
        color: var(--navy);
        font-size: 4.2rem;
        line-height: 0.88;
        font-weight: 900;
      }

      .story-side-card {
        position: sticky;
        top: 112px;
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--shadow);
      }

      .story-side-card h2 {
        margin: 0;
        color: var(--navy);
        font-size: clamp(1.5rem, 2.4vw, 2.35rem);
        line-height: 1;
      }

      .story-side-card p:not(.eyebrow) {
        margin: 18px 0 0;
        color: var(--muted);
        line-height: 1.6;
      }

      .story-side-card .button {
        width: 100%;
        margin-top: 22px;
      }

      .story-more {
        width: min(1180px, calc(100% - 36px));
        margin: 0 auto clamp(74px, 10vw, 120px);
        padding: clamp(34px, 5vw, 58px);
        border-radius: 8px;
        color: #fff;
        background: var(--navy);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 26px;
      }

      .story-more h2 {
        max-width: 740px;
        margin: 0;
        color: #fff;
        font-size: clamp(2rem, 4.2vw, 4rem);
        line-height: 1;
      }

      .story-more p {
        margin: 14px 0 0;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.6;
      }

      .story-more .button {
        flex: 0 0 auto;
      }

      .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 18px;
      }

      @media (max-width: 900px) {
        .story-article-grid,
        .story-more {
          grid-template-columns: 1fr;
        }

        .story-side-card {
          position: static;
        }

        .story-more {
          align-items: flex-start;
          flex-direction: column;
        }
      }