/* Story Engine case study — page-specific styles; shared site components remain in place. */
.story-engine-case-page { background: #fff; color: #132038; }
.story-case { overflow: hidden; padding-top: 68px; }
.story-section-inner { margin: 0 auto; max-width: 1180px; padding-left: 34px; padding-right: 34px; }
.story-eyebrow { color: #e74f68; font-size: .72rem; font-weight: 700; letter-spacing: .15em; line-height: 1.45; margin: 0 0 12px; text-transform: uppercase; }
.story-hero { align-items: center; background: #08172b; color: #fff; display: grid; gap: clamp(36px, 6vw, 84px); grid-template-areas: "copy art"; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); margin: 0 auto; max-width: 1440px; min-height: 540px; overflow: hidden; padding: 54px clamp(34px, 5vw, 76px); }
.story-hero-art { align-self: center; grid-area: art; overflow: hidden; position: relative; }
.story-hero-art picture, .story-hero-art img { display: block; width: 100%; }
.story-hero-art img { aspect-ratio: 1536 / 706; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; box-shadow: 0 22px 60px rgba(0,0,0,.32); height: auto; object-fit: contain; }
.story-hero-copy { grid-area: copy; margin: 0; max-width: 580px; padding: 0; position: relative; width: 100%; z-index: 1; }
.story-hero-copy .story-eyebrow { color: #f27486; }
.story-hero-copy h1 { color: #fff; font-size: clamp(3.2rem, 6.7vw, 5.8rem); font-weight: 700; letter-spacing: -.05em; line-height: .98; margin: 0 0 20px; max-width: 660px; }
.story-hero-summary { color: rgba(255,255,255,.93); font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.52; margin: 0 0 30px; max-width: 490px; }
.story-scroll-link { align-items: center; color: #fff; display: inline-flex; font-size: .95rem; gap: 12px; }
.story-scroll-link span { font-size: 1.65rem; font-weight: 300; }
.story-scroll-link:hover, .story-scroll-link:focus-visible { color: #ffb8c1; }
.story-project-meta { align-items: center; border-bottom: 1px solid #e3e5e9; display: grid; grid-template-columns: repeat(3,1fr); margin: 0 auto; max-width: 1180px; padding: 24px 34px; }
.story-project-meta > div { border-right: 1px solid #d8dce2; display: flex; flex-direction: column; gap: 5px; min-height: 43px; padding: 0 30px; }
.story-project-meta > div:first-child { padding-left: 0; }
.story-project-meta > div:last-child { border: 0; }
.story-project-meta span { color: #818998; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.story-project-meta strong { color: #394456; font-size: .98rem; font-weight: 500; }
.story-section { padding: 76px 0; }
.story-origin { background: #fcfaf7; }
.story-origin-grid { align-items: center; display: grid; gap: clamp(44px,8vw,110px); grid-template-columns: .85fr 1.15fr; }
.story-origin-copy h2, .story-challenge h2, .story-approach h2 { color: #111d33; font-size: clamp(2.2rem,4.2vw,3.35rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; margin: 0 0 16px; max-width: 12ch; }
.story-origin-copy > p:last-child, .story-approach-grid > div > p:last-child { color: #50596a; font-size: 1rem; line-height: 1.58; margin: 0; max-width: 47ch; }
.story-origin-art { margin: 0; }
.story-origin-art picture, .story-origin-art img { display: block; width: 100%; }
.story-origin-art img { aspect-ratio: 1536 / 706; border-radius: 10px; height: auto; object-fit: contain; }
.story-origin-art figcaption { color: #697282; font-size: .72rem; margin-top: 8px; text-align: right; }
.story-challenge { background: #fff; padding-bottom: 68px; }
.story-challenge h2 { max-width: 18ch; }
.story-challenge-intro { color: #596273; font-size: 1rem; line-height: 1.55; margin: 0 0 36px; max-width: 52ch; }
.story-principles { display: grid; grid-template-columns: repeat(3,1fr); }
.story-principles article { border-right: 1px solid #d9dde3; padding: 0 34px; }
.story-principles article:first-child { padding-left: 0; }
.story-principles article:last-child { border: 0; }
.story-principles article > span { color: #e84d67; display: block; font-size: 1.25rem; font-weight: 700; margin-bottom: 7px; }
.story-principles h3 { color: #142039; font-size: 1.08rem; font-weight: 700; margin: 0 0 10px; }
.story-principles p { color: #687181; font-size: .9rem; line-height: 1.55; margin: 0; max-width: 34ch; }
.story-interface { background: radial-gradient(ellipse at center bottom, rgba(26,52,84,.6), transparent 56%), #08172b; color: #fff; padding: 74px 0 80px; }
.story-interface .story-eyebrow { color: #d1d8e2; font-size: .68rem; }
.story-interface h2 { color: #fff; font-size: clamp(2rem,4vw,3.3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 14px; max-width: 23ch; }
.story-interface-intro { color: #d5dce7; font-size: 1rem; line-height: 1.55; margin: 0 0 38px; max-width: 56ch; }
.story-mobile-hint { display: none; }
.story-screen-grid { align-items: start; display: grid; gap: 44px 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-screen-card { min-width: 0; }
.story-screen-frame { align-items: center; aspect-ratio: 706 / 1536; background: #111d35; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; display: flex; justify-content: center; margin: 0 auto; max-height: 490px; max-width: 226px; overflow: hidden; padding: 4px; width: 100%; }
.story-screen-frame picture, .story-screen-frame img { display: block; height: 100%; width: 100%; }
.story-screen-frame img { border-radius: 15px; object-fit: contain; }
.story-screen-caption { margin: 16px auto 0; max-width: 29ch; text-align: center; }
.story-screen-caption h3 { color: #fff; font-size: 1.05rem; font-weight: 700; margin: 0 0 5px; }
.story-screen-caption p { color: #cbd3df; font-size: .86rem; line-height: 1.48; margin: 0; }
.story-approach { background: #fcfaf7; padding: 58px 0; }
.story-approach-grid { align-items: center; display: grid; gap: 45px; grid-template-columns: .95fr 1.4fr; }
.story-approach h2 { font-size: clamp(1.9rem,3.2vw,2.65rem); max-width: 18ch; }
.story-flow { align-items: start; display: grid; grid-template-columns: repeat(5,1fr); list-style: none; margin: 0; padding: 0; position: relative; }
.story-flow::before { background: #ee6b7f; content: ''; height: 1px; left: 9%; position: absolute; right: 9%; top: 16px; }
.story-flow li { align-items: center; color: #5d6878; display: flex; flex-direction: column; font-size: .72rem; gap: 12px; position: relative; text-align: center; }
.story-flow li::before { background: #eb5a72; border: 3px solid #fcfaf7; border-radius: 50%; content: ''; height: 12px; position: absolute; top: 10px; width: 12px; z-index: 1; }
.story-flow li > span:first-child { color: #7b8492; font-size: 1.05rem; margin-top: 38px; }
.story-flow li > span:last-child { white-space: nowrap; }
.story-case-cta { background: linear-gradient(120deg,#e74e69,#f76678); color: #fff; padding: 43px 0; text-align: center; }
.story-case-cta h2 { color: #fff; font-size: clamp(1.6rem,3vw,2.35rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 22px; }
.story-case-cta a { background: #fff; border: 1px solid #fff; border-radius: 999px; color: #d94661; display: inline-flex; font-size: .9rem; gap: 10px; padding: 12px 24px; }
.story-case-cta a:hover, .story-case-cta a:focus-visible { background: #08172b; border-color: #08172b; color: #fff; }
.story-case-footer { background: #fff; color: #1b263a; padding: 22px 0; }
.story-case-footer .story-section-inner { align-items: center; display: flex; justify-content: space-between; }
.story-footer-logo { color: #101a2b; font-size: 1rem; font-weight: 800; letter-spacing: .03em; }
.story-case-footer > .story-section-inner > a:nth-child(2) { color: #536075; font-size: .8rem; }
.story-case-footer > .story-section-inner > span { color: #536075; font-size: .73rem; }
.story-case-footer sup { font-size: .6em; }
.story-engine-case-page :focus-visible { outline: 3px solid #ef5c74; outline-offset: 3px; }

@media (max-width: 767.98px) {
  .story-case { padding-top: 58px; }
  .story-section-inner { padding-left: 22px; padding-right: 22px; }
  .story-hero { gap: 28px; grid-template-areas: "copy" "art"; grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 48px 22px 34px; }
  .story-hero-art { width: 100%; }
  .story-hero-copy { padding: 0; }
  .story-hero-copy h1 { font-size: clamp(3rem,12vw,4.3rem); }
  .story-hero-summary { max-width: 390px; }
  .story-project-meta { gap: 14px; grid-template-columns: 1fr; padding: 21px 22px; }
  .story-project-meta > div, .story-project-meta > div:first-child { border: 0; border-bottom: 1px solid #e0e3e8; min-height: 0; padding: 0 0 12px; }
  .story-project-meta > div:last-child { border: 0; padding-bottom: 0; }
  .story-section { padding: 55px 0; }
  .story-origin-grid, .story-approach-grid { gap: 27px; grid-template-columns: 1fr; }
  .story-origin-copy h2, .story-challenge h2 { font-size: 2.45rem; }
  .story-origin-art img { aspect-ratio: 1536 / 706; }
  .story-principles { gap: 21px; grid-template-columns: 1fr; }
  .story-principles article, .story-principles article:first-child { border-bottom: 1px solid #d9dde3; border-right: 0; padding: 0 0 19px; }
  .story-principles article:last-child { border: 0; padding-bottom: 0; }
  .story-interface { padding: 52px 0 48px; }
  .story-interface h2 { font-size: 2.15rem; margin-bottom: 10px; }
  .story-interface-intro { margin-bottom: 19px; }
  .story-mobile-hint { color: #cbd3df; display: block; font-size: .82rem; margin: 0 0 17px; }
  .story-screen-grid { display: grid; grid-auto-columns: min(72vw, 290px); grid-auto-flow: column; grid-template-columns: none; gap: 18px; margin: 0 -22px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 22px 16px; scroll-snap-type: x mandatory; }
  .story-screen-card { scroll-snap-align: start; }
  .story-screen-frame { max-height: 520px; }
  .story-screen-caption { max-width: 32ch; }
  .story-approach h2 { font-size: 2.1rem; }
  .story-flow { gap: 12px; grid-template-columns: repeat(5,minmax(60px,1fr)); overflow-x: auto; padding-bottom: 5px; }
  .story-flow li { font-size: .67rem; }
  .story-flow li > span:last-child { white-space: normal; }
  .story-case-cta { padding: 39px 22px; }
  .story-case-footer .story-section-inner { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .story-footer-logo { width: 55%; }
  .story-case-footer > .story-section-inner > span { text-align: right; width: calc(45% - 12px); }
  .story-case-footer > .story-section-inner > a:nth-child(2) { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .story-case-cta a { transition: none; }
  .story-screen-grid { scroll-behavior: auto; }
}