.story-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 48px; align-items: center; padding: 38px var(--section-inset) 54px; background: var(--amber-95-c5); color: var(--green-24); }
.story-hero .hero-copy { padding-block: 24px; }
.story-hero .hero-copy > .eyebrow { color: var(--green-45-c23); margin: 0 0 28px; }
.marketing .story-hero h1 { font-size: clamp(48px, 5.4vw, 82px); font-weight: 500; letter-spacing: -.065em; line-height: 1.02; margin: 0 0 26px; }
.story-hero h1 > span { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.045em; color: var(--green-45-c29); }
.hero-description { font-size: 21px; color: var(--green-29-c16-h155); margin: 0 0 16px; line-height: 1.5; }
.hero-detail { max-width: 410px; font-size: 17px; color: var(--green-41-c15); line-height: 1.8; margin: 0; }
.hero-visual { position: relative; min-width: 0; height: 560px; border-radius: 180px 22px 22px; overflow: hidden; background: var(--green-26); }
.campaign-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 82% center; }
.hero-visual::after { content: ''; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent, var(--green-16-a85)); pointer-events: none; }
.hero-photo-caption { position: absolute; bottom: 32px; left: 30px; color: var(--yellow-99); z-index: 1; }
.hero-photo-caption > span { display: block; font-size: 28px; line-height: 1.2; letter-spacing: -.8px; }
.hero-photo-caption em { font-family: 'Instrument Serif', Georgia, serif; font-size: 39px; font-weight: 400; color: var(--lime-93); }
.hero-photo-caption small { display: block; font-size: 9px; letter-spacing: 1.2px; margin-top: 16px; }
.hero-leash { position: absolute; width: 180px; height: 170px; left: 18px; top: 15px; opacity: .55; }
.hero-proof { display: flex; flex-flow: column wrap; gap: 9px; font-size: 12px; color: var(--green-41-c20); }
.story-hero .subtle-link { color: var(--green-31-c17); }
.story-hero .marketing-button { background: var(--green-27); border-color: var(--green-27); color: var(--lime-96); }
.story-hero .marketing-button:hover { background: var(--green-35-c21); }
.campaign-closing { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--lime-91); color: var(--green-24); overflow: hidden; }
.campaign-closing > picture > img { grid-column: 2; grid-row: 1; width: 100%; height: 410px; object-fit: cover; object-position: 75% center; }
.closing-copy { grid-column: 1; grid-row: 1; padding: 40px 48px 40px var(--section-inset); }
.campaign-closing h2 { margin: 18px 0; }.campaign-closing h2 > span { color: var(--green-45-c29); }
.closing-copy > p:not(.eyebrow) { color: var(--green-37-c26); font-size: 17px; line-height: 1.7; }
.closing-copy .marketing-button { background: var(--green-27); border-color: var(--green-27); color: var(--lime-96); margin: 12px 0 20px; }
.closing-copy > small { display: block; color: var(--green-33-c26); font-size: 13px; }.closing-copy > small a { text-decoration: underline; text-underline-offset: 4px; }

@media (width <= 1100px) { .story-hero { gap: 28px; }.hero-visual { height: 520px; border-top-left-radius: 130px; }.hero-actions { gap: 14px; }.story-hero .marketing-button { font-size: 15px; gap: 16px; }.closing-copy { padding-right: 30px; } }

@media (width <= 900px) { .story-hero { grid-template-columns: 1fr 1fr; }.hero-visual { height: 500px; }.marketing .story-hero h1 { font-size: 53px; }.hero-description { font-size: 18px; }.hero-detail { font-size: 16px; }.hero-photo-caption { left: 20px; }.hero-leash { width: 140px; }.closing-copy { padding: 36px; } }

@media (width <= 700px) { .hero-leash { display: none; }.story-hero { grid-template-columns: 1fr; gap: 24px; padding: 15px var(--section-inset) 36px; }.story-hero .hero-copy { padding-block: 18px 0; }.marketing .story-hero h1 { font-size: clamp(47px, 10.5vw, 68px); }.hero-description { font-size: 19px; }.hero-actions { margin-block: 24px; }.hero-visual { height: 330px; border-radius: 120px 18px 18px; }.hero-photo-caption > span { font-size: 24px; }.hero-photo-caption em { font-size: 33px; }.hero-photo-caption small { margin-top: 12px; }.campaign-closing { grid-template-columns: 1fr; }.campaign-closing > picture > img { grid-column: 1; grid-row: 2; height: 260px; }.closing-copy { padding: 40px var(--section-inset); }.campaign-closing h2 { font-size: 40px; } }
