.story-page { background:#f2f3ef; }
.story-hero { min-height:100svh; padding:150px 0 90px; display:flex; align-items:center; color:#fff; background:#0b0e11; overflow:hidden; }
.story-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:7vw; align-items:center; }
.story-hero h1 { margin:32px 0 28px; font-size:clamp(50px,6.2vw,92px); line-height:1.03; }
.story-hero h1 em { color:var(--lime); -webkit-text-stroke:0; }
.story-hero-copy>p:last-child { color:#aeb5ba; font-size:17px; line-height:1.8; }
.portrait-photo { margin:0; }
.portrait-frame { position:relative; min-height:580px; aspect-ratio:4/5; border:1px solid rgba(255,255,255,.2); background:#171b1f; overflow:hidden; }
.portrait-frame:after { content:""; position:absolute; inset:0; border:1px solid rgba(216,255,62,.12); pointer-events:none; }
.portrait-frame img { width:100%; height:100%; display:block; object-fit:cover; object-position:50% 42%; }
.portrait-photo figcaption { margin-top:14px; color:#747d83; font:700 9px Montserrat,sans-serif; letter-spacing:.18em; }
@media(max-width:800px){.story-hero{padding:120px 0 70px}.story-hero-grid{grid-template-columns:1fr}.portrait-frame{min-height:0;aspect-ratio:4/5}.portrait-frame img{object-position:50% 38%}.story-hero h1{font-size:clamp(43px,12vw,65px)}}

.story-section { padding:clamp(95px,11vw,160px) 0; background:#fff; }
.story-prose-grid { display:grid; grid-template-columns:.55fr 1.45fr; gap:8vw; }
.story-label { padding-top:8px; }
.story-label span { color:#92999d; font:700 11px Montserrat,sans-serif; }
.story-label p { margin:16px 0 0; font-size:14px; font-weight:700; }
.story-prose { max-width:790px; }
.story-prose p { margin:0 0 25px; color:#555d63; font-size:17px; line-height:2; }
.story-prose .story-lead { color:#161a1e; font-size:clamp(23px,2.3vw,34px); font-weight:600; line-height:1.65; letter-spacing:-.035em; }
.story-question { margin:60px 0!important; color:#0b0e11!important; font-size:clamp(28px,3.2vw,48px)!important; font-weight:700; line-height:1.4!important; letter-spacing:-.045em; }
.story-prose h2 { margin:0 0 45px; font-size:clamp(38px,4.5vw,65px); line-height:1.2; letter-spacing:-.055em; }

.story-quote { position:relative; padding:clamp(100px,13vw,190px) 0; overflow:hidden; color:#fff; text-align:center; background:#0b0e11; }
.story-quote:before { content:""; position:absolute; width:min(60vw,760px); aspect-ratio:1; top:50%; left:50%; border:1px solid rgba(216,255,62,.18); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 80px rgba(216,255,62,.018); }
.story-quote .wrap { position:relative; }
.story-quote span { color:var(--lime); font:700 10px Montserrat,sans-serif; letter-spacing:.22em; }
.story-quote blockquote { margin:40px 0 34px; font-size:clamp(46px,6.2vw,90px); font-weight:700; line-height:1.15; letter-spacing:-.06em; }
.story-quote blockquote em { color:var(--lime); font-style:normal; }
.story-quote p { color:#939ba1; font-size:15px; line-height:1.8; }

.story-choice { background:#f2f3ef; }
.story-timeline { padding:clamp(100px,11vw,160px) 0; color:#fff; background:#11161b; }
.timeline-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:70px; }
.timeline-heading h2 { margin:0; font-size:clamp(42px,5vw,70px); letter-spacing:-.055em; }
.timeline-list { margin:0; padding:0; border-top:1px solid rgba(255,255,255,.35); list-style:none; }
.timeline-list li { display:grid; grid-template-columns:.5fr 1.5fr; gap:4vw; padding:34px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.timeline-list time { color:var(--lime); font:700 clamp(25px,3vw,42px) Montserrat,sans-serif; letter-spacing:-.04em; }
.timeline-list b { display:block; margin-bottom:10px; font-size:20px; }
.timeline-list p { max-width:620px; margin:0; color:#8d969c; font-size:14px; line-height:1.8; }

.story-customer { background:#fff; }
.beauty-manifesto { min-height:850px; display:grid; grid-template-columns:1fr 1fr; color:#fff; background:#090c0f; }
.beauty-image { min-height:680px; background:#101820 url("assets/beanstalks-hero.png") 66% center/cover no-repeat; filter:saturate(.65) contrast(1.08); }
.beauty-copy { padding:clamp(70px,8vw,130px); align-self:center; }
.manifesto-number { display:block; margin:35px 0 25px; color:#596168; font:700 12px Montserrat,sans-serif; }
.beauty-copy h2 { margin:0 0 40px; font-size:clamp(42px,5vw,72px); line-height:1.08; letter-spacing:-.06em; }
.beauty-copy h2 em { color:var(--lime); font-style:normal; }
.beauty-copy>p:not(.kicker) { color:#a2a9ae; font-size:15px; line-height:1.9; }
.beauty-copy .manifesto-line { margin-top:35px; padding-top:30px; color:#fff!important; border-top:1px solid rgba(255,255,255,.2); font-size:20px!important; font-weight:600; }

.story-promise { padding:clamp(110px,14vw,210px) 0; text-align:center; background:var(--lime); }
.story-promise .kicker { color:#454b24; }
.story-promise h2 { margin:25px 0 34px; font-size:clamp(52px,7.2vw,104px); line-height:1.03; letter-spacing:-.07em; }
.story-promise h2 em { color:transparent; -webkit-text-stroke:1.5px #0b0e11; font-style:normal; }
.story-promise>div>p:not(.kicker):not(.promise-sign) { color:#353a29; font-size:17px; line-height:1.9; }
.promise-sign { margin:45px 0 30px; font:700 11px Montserrat,sans-serif; letter-spacing:.22em; }

@media(max-width:900px){
  .story-prose-grid{grid-template-columns:1fr;gap:40px}.story-label{display:flex;align-items:center;gap:16px}.story-label p{margin:0}.beauty-manifesto{grid-template-columns:1fr}.beauty-image{min-height:520px}.beauty-copy{padding:80px 7vw}.timeline-list li{grid-template-columns:.65fr 1.35fr}
}
@media(max-width:640px){
  .story-section{padding:85px 0}.story-question{margin:45px 0!important}.story-quote p br{display:none}.timeline-heading{align-items:start;flex-direction:column;gap:20px}.timeline-list li{grid-template-columns:1fr;gap:18px}.beauty-image{min-height:430px}.beauty-copy{padding:75px 22px}.story-promise h2{font-size:47px}
}