.story-page { color: var(--black); background: var(--cream); }

.story-hero { position: relative; min-height: 100svh; padding: 108px var(--gutter) 54px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; isolation: isolate; color: var(--cream); background: var(--black); }
.story-hero__media { position: absolute; z-index: -3; inset: 0; }
.story-hero__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 65% 30%; }
.story-hero__wash { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(9,9,9,.97) 0%, rgba(9,9,9,.84) 34%, rgba(9,9,9,.16) 72%), linear-gradient(0deg, rgba(9,9,9,.82), transparent 58%); }
.story-hero__topline { display: flex; justify-content: space-between; width: min(100%, 760px); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.story-hero__copy { align-self: end; width: min(100%, 920px); }
.story-hero__copy > p { margin: 0 0 28px; color: var(--acid); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.story-hero h1 { margin: 0; font: 900 clamp(120px, 17vw, 260px)/.64 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.story-hero h1 strong { color: var(--pink); font: inherit; }
.story-hero__copy > a { width: max-content; margin: 50px 0 0 16%; padding-bottom: 6px; display: flex; gap: 50px; color: var(--cream); border-bottom: 2px solid var(--acid); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.story-hero__result { position: absolute; right: var(--gutter); bottom: 54px; width: min(26vw, 300px); aspect-ratio: 1; padding: clamp(22px, 3vw, 42px); display: flex; flex-direction: column; justify-content: space-between; color: var(--black); background: var(--acid); transform: rotate(3deg); box-shadow: 22px 24px 0 rgba(9,9,9,.56); }
.story-hero__result span, .story-hero__result small { font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.story-hero__result strong { font: 900 clamp(44px, 5.5vw, 84px)/.72 var(--display); text-transform: uppercase; }

.story-facts { display: grid; grid-template-columns: repeat(4, 1fr); color: var(--black); background: var(--acid); border-bottom: 2px solid var(--black); }
.story-facts > div { min-height: 160px; padding: 27px var(--gutter); display: flex; flex-direction: column; justify-content: space-between; border-right: 2px solid var(--black); }
.story-facts > div:last-child { border-right: 0; }
.story-facts span { font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.story-facts strong { font: 900 clamp(32px, 3.5vw, 54px)/.84 var(--display); text-transform: uppercase; }

.story-intro { padding: var(--section) var(--gutter); display: grid; grid-template-columns: .28fr .72fr; column-gap: 7vw; background: var(--cream); }
.story-intro > .label { grid-row: span 2; }
.story-intro h2 { max-width: 1050px; margin: 0; font-size: clamp(76px, 9.5vw, 150px); line-height: .75; letter-spacing: -.05em; }
.story-intro h2 strong { color: var(--pink); }
.story-intro__body { max-width: 720px; margin: 55px 0 0 22%; display: grid; gap: 20px; color: #51474a; font-size: 18px; line-height: 1.62; }
.story-intro__body p { margin: 0; }

.story-chapter { position: relative; padding: var(--section) var(--gutter); display: grid; grid-template-columns: .74fr 1.26fr; gap: 6vw; overflow: hidden; }
.story-chapter--dark { color: var(--cream); background: var(--wine); }
.story-chapter__number { position: absolute; right: -2vw; top: -8vw; color: rgba(255,61,110,.15); font: 900 37vw/.8 var(--display); }
.story-chapter__heading, .story-chapter__copy, .story-chapter__portrait { position: relative; z-index: 1; }
.story-chapter__heading > span { color: var(--pink); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.story-chapter__heading h2 { margin: 42px 0 0; font-size: clamp(70px, 8vw, 126px); line-height: .76; letter-spacing: -.045em; }
.story-chapter__copy { max-width: 640px; margin-top: 150px; align-self: start; }
.story-chapter__copy p { margin: 0 0 24px; color: #cbbcc2; font-size: 18px; line-height: 1.62; }
.story-chapter__portrait { grid-column: 1 / -1; width: min(78%, 1080px); height: min(76vw, 940px); margin: 80px 0 0 auto; overflow: hidden; background: var(--black); }
.story-chapter__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: grayscale(1) contrast(1.08); }
.story-chapter__portrait figcaption { position: absolute; left: 0; bottom: 0; padding: 14px 18px; color: var(--black); background: var(--acid); font-size: 9px; font-weight: 900; text-transform: uppercase; }

.story-build { padding: var(--section) var(--gutter); background: var(--acid); }
.story-build__head { display: grid; grid-template-columns: .3fr .7fr; gap: 6vw; margin-bottom: 7vw; }
.story-build__head h2 { margin: 0; font-size: clamp(80px, 10vw, 158px); line-height: .72; letter-spacing: -.05em; }
.story-build__head h2 strong { color: var(--pink); }
.story-build__list { border-top: 2px solid; }
.story-build__list article { min-height: 210px; padding: 30px 0; display: grid; grid-template-columns: 80px .8fr 1.2fr; gap: 4vw; align-items: center; border-bottom: 2px solid; }
.story-build__list article > span { width: 46px; height: 46px; display: grid; place-items: center; color: var(--cream); background: var(--black); font-size: 10px; font-weight: 900; }
.story-build__list h3 { margin: 0; font-size: clamp(42px, 4.7vw, 72px); line-height: .84; }
.story-build__list p { max-width: 620px; margin: 0; line-height: 1.58; }

.story-pivot { min-height: 100svh; display: grid; grid-template-columns: 1.15fr .85fr; color: var(--cream); background: var(--black); }
.story-pivot__media { min-height: 100%; overflow: hidden; }
.story-pivot__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: contrast(1.12) saturate(.85); }
.story-pivot__copy { padding: var(--section) var(--gutter); align-self: center; }
.story-pivot h2 { margin: 45px 0 40px; font-size: clamp(64px, 7vw, 112px); line-height: .76; letter-spacing: -.05em; }
.story-pivot h2 strong { color: var(--pink); }
.story-pivot p { max-width: 590px; margin: 0 0 22px; color: var(--muted); font-size: 17px; line-height: 1.62; }

.story-outcome { position: relative; min-height: 96svh; padding: var(--section) var(--gutter); display: flex; align-items: center; overflow: hidden; color: var(--black); background: var(--pink); }
.story-outcome__mark { position: absolute; right: -2vw; top: -5vw; color: rgba(9,9,9,.1); font: 900 32vw/.8 var(--display); white-space: nowrap; }
.story-outcome__copy { position: relative; z-index: 1; width: min(100%, 1120px); }
.story-outcome__copy > span { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.story-outcome h2 { margin: 45px 0 35px; font-size: clamp(82px, 10.5vw, 164px); line-height: .72; letter-spacing: -.05em; }
.story-outcome h2 strong { color: var(--cream); }
.story-outcome__copy > p { max-width: 680px; margin: 0 0 35px; font-size: 18px; line-height: 1.58; }
.story-outcome__links { display: flex; flex-wrap: wrap; gap: 10px; }
.story-outcome__links a { min-height: 44px; padding: 13px 15px; display: inline-flex; align-items: center; color: var(--cream); background: var(--black); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.story-outcome small { max-width: 620px; margin-top: 28px; display: block; font-size: 10px; line-height: 1.5; }

.story-cta { padding: var(--section) var(--gutter); color: var(--cream); background: var(--wine); }
.story-cta h2 { max-width: 1180px; margin: 50px 0 35px; font-size: clamp(84px, 11vw, 174px); line-height: .72; letter-spacing: -.05em; }
.story-cta h2 strong { color: var(--pink); }
.story-cta > p { max-width: 620px; color: #c5b5bd; font-size: 18px; line-height: 1.58; }
.story-cta > div { margin-top: 40px; display: flex; align-items: center; gap: 28px; }

@media (max-width: 1050px) {
  .story-hero__result { width: 245px; }
  .story-pivot { grid-template-columns: 1fr; }
  .story-pivot__media { min-height: 64svh; }
}

@media (max-width: 760px) {
  .story-hero { padding-top: 95px; }
  .story-hero__media img { object-position: 62% center; }
  .story-hero__wash { background: linear-gradient(0deg, rgba(9,9,9,.98) 0%, rgba(9,9,9,.42) 74%, rgba(9,9,9,.28)); }
  .story-hero__topline { font-size: 7px; }
  .story-hero__copy { padding-bottom: 4px; }
  .story-hero h1 { font-size: clamp(100px, 32vw, 140px); }
  .story-hero__copy > a { margin: 32px 0 0; }
  .story-hero__result { right: var(--gutter); bottom: auto; top: 130px; width: 134px; padding: 17px; }
  .story-hero__result strong { font-size: 38px; }
  .story-facts { grid-template-columns: 1fr 1fr; }
  .story-facts > div { min-height: 120px; padding: 20px; }
  .story-facts > div:nth-child(2) { border-right: 0; }
  .story-facts > div:nth-child(-n+2) { border-bottom: 2px solid; }
  .story-facts strong { font-size: 34px; }
  .story-intro { grid-template-columns: 1fr; }
  .story-intro > .label { grid-row: auto; margin-bottom: 38px; }
  .story-intro h2 { font-size: 70px; }
  .story-intro__body { margin: 42px 0 0; }
  .story-chapter { grid-template-columns: 1fr; }
  .story-chapter__heading h2 { font-size: 70px; }
  .story-chapter__copy { margin-top: 20px; }
  .story-chapter__portrait { grid-column: auto; width: 100%; height: 124vw; margin-top: 45px; }
  .story-build__head { grid-template-columns: 1fr; }
  .story-build__head h2 { margin-top: 35px; font-size: 72px; }
  .story-build__list article { min-height: 0; grid-template-columns: 52px 1fr; gap: 20px; }
  .story-build__list h3 { font-size: 44px; }
  .story-build__list p { grid-column: 2; }
  .story-pivot__media { min-height: 56vw; }
  .story-pivot h2 { font-size: 68px; }
  .story-outcome { min-height: 88svh; }
  .story-outcome h2 { font-size: 76px; }
  .story-cta h2 { font-size: 78px; }
  .story-cta > div { align-items: stretch; flex-direction: column; }
  .story-cta .text-link { align-self: flex-start; }
}

@media (max-width: 390px) {
  .story-hero h1 { font-size: 99px; }
  .story-intro h2, .story-chapter__heading h2, .story-build__head h2, .story-pivot h2, .story-outcome h2, .story-cta h2 { font-size: 63px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-hero__media img, .story-chapter__portrait img { transform: none !important; }
}