/* Typography, illustration and narrative each have their own space. */
.need-journey{--journey:0;--voice:0;--context:0;--journey-bg:#f2efe6;height:370svh;position:relative;background:var(--journey-bg);color:#20352f}
.need-stage{position:sticky;top:0;height:100svh;min-height:0;box-sizing:border-box;overflow:clip;isolation:isolate;background:var(--journey-bg);padding:30px 6% 25px;display:flex;flex-direction:column;gap:28px}
.need-top,.need-bottom{display:flex;justify-content:space-between;gap:25px;font-size:10px;letter-spacing:.09em;position:relative;z-index:1;flex:none}
.need-top{padding-bottom:20px;border-bottom:1px solid #20352f40}.need-bottom{align-items:center;font-size:8px;margin-top:auto;min-height:64px;padding-right:76px;box-sizing:border-box}.need-bottom>div{width:13%;height:1px;background:#20352f40}.need-bottom i{display:block;width:100%;height:100%;background:#20352f;transform:scaleX(var(--journey));transform-origin:left}
.need-atmosphere{position:absolute;inset:-40% -15%;background:radial-gradient(ellipse at center,#fff4,transparent 65%);transform:translate(calc(var(--journey)*30%),calc(var(--journey)*-15%)) rotate(calc(var(--journey)*60deg));z-index:-1}
.need-visual{flex:1;min-height:0;display:grid;grid-template-columns:1.1fr 1fr;gap:4%;position:relative}
.need-type{position:relative;min-width:0;overflow:clip;pointer-events:none;font:800 clamp(66px,7.6vw,120px)/.91 'Barlow Condensed',sans-serif;letter-spacing:-.025em;line-height:.91}
.need-type>span{position:absolute;left:0;right:0;top:50%;white-space:normal;display:block;visibility:hidden;opacity:var(--title-alpha,0);transform:translateY(calc(-50% + (1 - var(--title-alpha,0))*10px))}
.type-context{font-size:.91em}
.need-journey[data-act="1"] .type-question,.need-journey[data-act="2"] .type-voice,.need-journey[data-act="3"] .type-context{visibility:visible}
.need-signal{position:relative;min-height:0;min-width:0;overflow:clip;isolation:isolate}
.need-signal svg{position:absolute;inset:0;width:100%;height:100%;overflow:clip}
.signal-strand{fill:none;stroke-width:calc(2 + var(--voice)*5 - var(--context)*5);stroke-linecap:round;vector-effect:non-scaling-stroke}
.strand-one{stroke:#20352f}.strand-two{stroke:#f2efe6}.strand-three{stroke:#20352f80}
.signal-fragment{position:absolute;width:78%;left:12%;font:500 clamp(14px,1.45vw,22px)/1.3 'Space Grotesk',sans-serif;white-space:nowrap;transform:translateX(calc((1 - var(--voice))*10px))}
.signal-one{top:18%}.signal-two{top:43%}.signal-three{top:68%}
.signal-fragment>span{display:block;background:#f2efe6;padding:7px 12px;width:max-content;max-width:100%;border-radius:30px;opacity:calc(1 - var(--voice));transform:translateY(calc(var(--voice)*-20px))}
.signal-fragment>b{display:block;position:absolute;top:0;font-weight:400;font-size:clamp(19px,2vw,30px);opacity:var(--context);transform:translateX(calc((1 - var(--context))*20px));background:#d5fa70;padding:0 9px}
.signal-origin{position:absolute;top:23%;left:40%;font:600 clamp(80px,8vw,130px)/1 'Barlow Condensed',sans-serif;letter-spacing:-.08em;color:#f2efe6;opacity:calc(var(--voice)*(1 - var(--context)));transform:scale(calc(.85 + var(--voice)*.15))}
.signal-channel{position:absolute;font-size:9px;letter-spacing:.12em;opacity:calc(var(--voice)*(1 - var(--context)))}.channel-shopify{left:8%;top:4%}.channel-messenger{right:8%;bottom:4%}
.need-narrative{position:relative;flex:none;min-height:170px;z-index:1;display:grid}
.need-narrative article{grid-area:1/1;display:grid;grid-template-columns:1.1fr 1fr;gap:12px 7%;align-content:center;visibility:hidden;opacity:0;pointer-events:none}
.need-narrative article>span{grid-column:1/-1;font-size:9px;letter-spacing:.12em}.need-narrative h2{font:600 clamp(32px,3.8vw,58px)/1.06 'Barlow Condensed',sans-serif;margin:0;letter-spacing:-.01em;text-transform:none}.need-narrative p{font-size:clamp(14px,1.3vw,18px);line-height:1.65;max-width:550px;margin:0;align-self:center}
.need-journey[data-act="1"] .need-narrative article:nth-child(1),.need-journey[data-act="2"] .need-narrative article:nth-child(2),.need-journey[data-act="3"] .need-narrative article:nth-child(3){visibility:visible;opacity:1;pointer-events:auto}
@media(max-width:650px){
 .need-stage{padding:22px 7%;gap:20px}.need-top{font-size:8px;padding-bottom:16px;gap:12px}
 .need-visual{grid-template-columns:1fr;grid-template-rows:clamp(96px,27vw,142px) minmax(0,1fr);gap:12px}
 .need-type{font-size:clamp(42px,12.7vw,72px);line-height:.94}.type-context{font-size:.9em}
 .need-type>span{top:0;transform:translateY(calc((1 - var(--title-alpha,0))*8px))}
 .signal-fragment{font-size:15px}.signal-fragment>b{font-size:20px}.signal-origin{font-size:80px;top:17%;left:42%}.signal-channel{font-size:7px}
 .need-narrative{min-height:0}.need-narrative article{grid-template-columns:1fr;gap:12px;align-content:start}.need-narrative article>span{font-size:8px}.need-narrative h2{font-size:clamp(28px,7.5vw,36px);line-height:1.08}.need-narrative h2 br{display:none}.need-narrative p{font-size:14px;line-height:1.6}
 .need-bottom{font-size:7px;gap:12px}.need-bottom>span:first-child{max-width:59%;line-height:1.5}.need-bottom>div{display:none}
}
@media(min-width:651px) and (max-height:650px),(orientation:landscape) and (max-height:499px),(prefers-reduced-motion:reduce){
 .need-journey{height:auto;background:#f2efe6}.need-stage{position:relative;height:auto;min-height:0;padding:36px 7%;gap:28px;background:#f2efe6}
 .need-atmosphere,.need-visual,.need-bottom{display:none}.need-narrative{min-height:0;display:block}.need-narrative article{display:grid;visibility:visible!important;opacity:1!important;pointer-events:auto;transform:none;margin:32px 0}.need-narrative article:first-child{margin-top:0}.need-narrative article:last-child{margin-bottom:0}
}

@media(max-width:650px) and (max-height:650px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
 .need-stage{padding:16px 7%;gap:12px}.need-top{font-size:7px;padding-bottom:12px}
 .need-visual{grid-template-rows:clamp(78px,24vw,110px) minmax(65px,1fr);min-height:155px;gap:8px}
 .need-type{font-size:clamp(36px,11.8vw,56px)}
 .need-narrative article{gap:9px}.need-narrative h2{font-size:clamp(24px,6.8vw,30px)}.need-narrative p{font-size:13px;line-height:1.5}
 .need-bottom{min-height:28px;padding-right:0;font-size:6.5px}
 .signal-fragment{font-size:12px}.signal-fragment>b{font-size:16px}.signal-fragment>span{padding:4px 8px}.signal-origin{font-size:48px}
}