.brain-page{overflow-x:clip}
.brain-page p{font-size:16px;line-height:1.85;margin-top:24px;max-width:460px}
.brain-page h1{font-size:clamp(64px,6.7vw,100px);line-height:.93;letter-spacing:-.025em;text-transform:uppercase}
.brain-page h2 em{display:inline;color:var(--coral)}
.piece{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;user-select:none}

/* Intro: copy scrolls on the left, Dawn stays pinned while the lid lifts. */
.brain-intro{max-width:1440px;margin-inline:auto;padding-inline:clamp(48px,6.5vw,100px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4vw}
.intro-copy{grid-column:1;display:flex;flex-direction:column;justify-content:center;min-height:max(680px,calc(100svh - 120px));padding-block:40px 80px}
.intro-dawn{min-height:max(900px,150svh);padding-block:120px}
.brain-standfirst{font-size:23px!important;line-height:1.45!important;max-width:360px!important;margin-top:34px!important}
.brain-pullout{font-size:17px!important;border-left:2px solid var(--coral);padding-left:22px}
.brain-scroll{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:600;margin-top:35px;width:fit-content}
.brain-scroll>span{width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:20px;transition:background .2s,color .2s}
.brain-scroll:hover>span{background:var(--coral);color:var(--paper)}
.lid-art{grid-column:2;grid-row:1/span 2;position:relative}
.lid-stage{--p:0;position:sticky;top:0;height:max(460px,100svh);aspect-ratio:1/1.3;width:auto;max-width:none;margin:-120px auto 0;translate:4% 0}
.lid-stage>*{position:absolute}
/* The hat lifts, the scalp hinges open on the right, then the brain rises out of the hole. */
.lid-dawn{left:0;bottom:0;width:100%;height:auto;z-index:4;clip-path:polygon(0 15.6%,26.0% 16.4%,28.3% 15.0%,30.6% 16.4%,32.9% 15.0%,35.2% 16.4%,37.5% 15.0%,39.8% 16.4%,42.1% 15.0%,44.4% 16.4%,46.7% 15.0%,49.0% 16.4%,51.3% 15.0%,53.6% 16.4%,55.9% 15.0%,58.2% 16.4%,60.5% 15.0%,62.8% 16.4%,65.1% 15.0%,67.4% 16.4%,69.7% 15.0%,72.0% 16.4%,100% 15.6%,100% 100%,0 100%)}
.lid-stage .lid-scalp{z-index:5;clip-path:polygon(0 0,100% 0,100% 15.6%,72.0% 16.4%,69.7% 15.0%,67.4% 16.4%,65.1% 15.0%,62.8% 16.4%,60.5% 15.0%,58.2% 16.4%,55.9% 15.0%,53.6% 16.4%,51.3% 15.0%,49.0% 16.4%,46.7% 15.0%,44.4% 16.4%,42.1% 15.0%,39.8% 16.4%,37.5% 15.0%,35.2% 16.4%,32.9% 15.0%,30.6% 16.4%,28.3% 15.0%,26.0% 16.4%,0 15.6%);transform-origin:68% 15.6%;transform:rotate(calc(clamp(0,calc((var(--p) - .16)/.36),1)*118deg));filter:drop-shadow(0 6px 5px #17161433)}
.lid-sun{left:50%;top:40%;width:210%;aspect-ratio:1;z-index:0;translate:-50% -50%;scale:calc(.9 + var(--p)*.1);background:repeating-conic-gradient(var(--coral) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 12%,#0009 30%,transparent 58%),linear-gradient(transparent 27%,#000 42%);-webkit-mask-composite:source-in;mask:radial-gradient(circle,#000 12%,#0009 30%,transparent 58%),linear-gradient(transparent 27%,#000 42%);mask-composite:intersect;animation:sun-spin 140s linear infinite}
@keyframes sun-spin{to{rotate:1turn}}
.lid-hole{left:31%;top:33%;width:36%;height:4.4%;border-radius:50%;z-index:2;background:radial-gradient(ellipse at 50% 70%,#0b0a09 30%,#2c2723 70%,#5d544b);box-shadow:inset 0 -3px 6px #000a}
.lid-stage .piece{--t:clamp(0,calc((var(--p) - var(--delay,0))/var(--span,calc(1 - var(--delay,0)))),1);left:calc(var(--x0) + (var(--x1) - var(--x0))*var(--t));top:calc(var(--y0) + (var(--y1) - var(--y0))*var(--t));width:var(--w);transform:translate(-50%,-50%) rotate(calc(var(--r0,0deg) + (var(--r1,0deg) - var(--r0,0deg))*var(--t))) scale(calc(var(--s0,.3) + (1 - var(--s0,.3))*var(--t)));opacity:min(1,calc(var(--t)*4));z-index:6;filter:drop-shadow(6px 12px 10px #1716141f)}
@property --bob{syntax:'<length>';inherits:false;initial-value:0px}
@property --wob{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes bob{0%,100%{--bob:-7px;--wob:-3deg}50%{--bob:7px;--wob:3deg}}
.lid-stage .piece{--q:var(--fly,0);animation:bob var(--dur,4s) ease-in-out var(--bd,0s) infinite;translate:calc(var(--fx,0vw)*var(--q)) calc(var(--bob)*var(--t) + var(--fy,0vh)*var(--q));rotate:calc(var(--wob)*var(--t) + var(--fr,0deg)*var(--q))}
.lid-stage .lid-brain{--x0:49%;--y0:42%;--x1:45%;--y1:20%;--w:34%;--s0:.45;--r0:-4deg;--r1:-4deg;--delay:.3;z-index:3;opacity:1;--dur:5.2s;--fx:6vw;--fy:-95vh;--fr:-25deg}
.lid-stage .piece-phone{--x0:46%;--y0:30%;--x1:11%;--y1:22%;--w:15%;--r0:20deg;--r1:-16deg;--delay:.48;--dur:3.6s;--bd:-1s;--fx:-100vw;--fy:-45vh;--fr:-80deg}
.lid-stage .piece-bulb{--x0:52%;--y0:30%;--x1:91%;--y1:33%;--w:11%;--r0:-30deg;--r1:14deg;--delay:.56;--dur:4.4s;--bd:-2.2s;--fx:55vw;--fy:-60vh;--fr:60deg}
.lid-stage .piece-pen{--x0:46%;--y0:31%;--x1:11%;--y1:44%;--w:12%;--r0:40deg;--r1:-24deg;--delay:.6;--dur:3.9s;--bd:-.6s;--fx:-105vw;--fy:20vh;--fr:-140deg}
.lid-stage .piece-book{--x0:52%;--y0:31%;--x1:90%;--y1:52%;--w:18%;--r0:-20deg;--r1:12deg;--delay:.52;--dur:4.8s;--bd:-3s;--fx:60vw;--fy:30vh;--fr:70deg}
.lid-stage .lid-hat{--x0:49.3%;--y0:26.4%;--x1:82%;--y1:12%;--w:40%;--r0:-2deg;--r1:20deg;--s0:1;--span:.4;--dur:6s;opacity:1;z-index:7;filter:drop-shadow(6px 12px 10px #17161433)}
.burst{display:grid;place-content:center;text-align:center;width:118px;aspect-ratio:1;color:var(--paper);font:800 40px/1 var(--heading);transform:rotate(-12deg);z-index:6}
.burst:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--coral);clip-path:polygon(50% 0%,56.57% 8.52%,65.45% 2.45%,69.07% 12.58%,79.39% 9.55%,79.7% 20.3%,90.45% 20.61%,87.42% 30.93%,97.55% 34.55%,91.48% 43.43%,100% 50%,91.48% 56.57%,97.55% 65.45%,87.42% 69.07%,90.45% 79.39%,79.7% 79.7%,79.39% 90.45%,69.07% 87.42%,65.45% 97.55%,56.57% 91.48%,50% 100%,43.43% 91.48%,34.55% 97.55%,30.93% 87.42%,20.61% 90.45%,20.3% 79.7%,9.55% 79.39%,12.58% 69.07%,2.45% 65.45%,8.52% 56.57%,0% 50%,8.52% 43.43%,2.45% 34.55%,12.58% 30.93%,9.55% 20.61%,20.3% 20.3%,20.61% 9.55%,30.93% 12.58%,34.55% 2.45%,43.43% 8.52%)}
.burst small{display:block;font:600 11px/1.25 var(--body);max-width:72px;margin:5px auto 0}
.lid-burst{right:-2%;bottom:14%}
.lid-burst:before{background:var(--ink)}

/* Bands */
.brain-band{--p:0;position:relative;padding-block:clamp(110px,14vh,170px)}
.band-and:before,.band-customers:before,.band-customers:after{content:'';position:absolute;left:0;width:100%;height:16px;top:-1px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 40%,98% 60%,94% 30%,89% 80%,82% 45%,74% 70%,69% 35%,63% 55%,56% 20%,47% 70%,40% 40%,33% 65%,25% 20%,16% 75%,9% 30%,4% 80%,0 40%);z-index:2}
.band-customers:before{background:var(--ink)}
.band-customers:after{top:auto;bottom:-1px;transform:rotate(180deg)}
.band-and{background:var(--ink);color:var(--paper);overflow:hidden;text-align:center}
.and-type{display:flex;justify-content:center;align-items:baseline;font:800 clamp(170px,31vw,470px)/.8 var(--heading);letter-spacing:-.04em;margin-bottom:clamp(50px,7vh,90px)}
.and-word{transform:translateX(calc((1 - var(--p))*-14%));opacity:calc(.25 + var(--p)*.75)}
.and-mark{color:var(--coral);display:inline-block;transform-origin:50% 90%;transform:translateX(calc((1 - var(--p))*30%)) rotate(calc((1 - var(--p))*40deg))}
.band-copy h2{margin-inline:auto}
.band-columns{display:flex;justify-content:center;gap:clamp(30px,5vw,80px);text-align:left;margin-top:20px}
.band-columns p{max-width:420px}
.band-customers{background:var(--blue)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;align-items:center}
.buyers{display:flex;justify-content:center;align-items:flex-end;gap:1.5vw}
.buyers figure{--t:clamp(0,calc((var(--p) - var(--d))*2.2),1);position:relative;width:31%;transform:translateY(calc((1 - var(--t))*70px));opacity:var(--t)}
.buyers figure:nth-child(2){width:34%}
.buyers img{width:100%;height:auto}
.thought{position:absolute;left:50%;bottom:calc(100% + 18px);display:grid;place-items:center;width:64px;aspect-ratio:1;border-radius:50%;background:var(--paper);font:800 30px/1 var(--heading);transform:translateX(-50%) scale(calc(.4 + var(--t)*.6))}
.thought:after{content:'';position:absolute;left:30%;bottom:-16px;width:12px;height:12px;border-radius:50%;background:inherit}
.thought-and{background:var(--coral);color:var(--paper);font-size:22px;width:76px}
.desk{position:relative;aspect-ratio:1/.85}
.desk .piece{filter:drop-shadow(8px 14px 12px #17161426)}
.desk-book{width:52%;left:24%;top:12%;transform:translateX(calc((1 - var(--p))*40%)) rotate(calc(-8deg + var(--p)*12deg))}
.desk-phone{width:24%;left:4%;top:4%;transform:translateY(calc((1 - var(--p))*-30%)) rotate(calc(-24deg + var(--p)*14deg))}
.desk-pen{width:20%;left:68%;top:40%;transform:translateY(calc((1 - var(--p))*40%)) rotate(calc(30deg - var(--p)*50deg))}
.band-finale{border-top:1px solid var(--line)}
.band-finale h2{font-size:clamp(60px,6.4vw,94px)}
.band-finale .button{margin-top:38px}
.finale-art{position:relative;width:min(100%,460px);aspect-ratio:1/1.05;margin-inline:auto}
.finale-brain{width:66%;left:17%;top:30%;filter:drop-shadow(8px 16px 14px #17161426)}
.finale-hat{width:58%;left:22%;top:calc(9% - (1 - var(--p))*24%);transform:rotate(calc(-7deg + (1 - var(--p))*-18deg));opacity:clamp(0,calc(var(--p)*3),1);filter:drop-shadow(8px 14px 12px #17161433)}
.finale-bulb{width:15%;left:4%;top:16%;transform:rotate(-18deg);opacity:clamp(0,calc(var(--p)*2 - 1),1)}

@media(max-width:760px){
.brain-intro{grid-template-columns:1fr;padding-inline:20px}
.intro-copy,.lid-art{grid-column:1;grid-row:auto}
.intro-copy{min-height:0;padding-block:48px 40px}
.intro-dawn{padding-block:40px 90px}
.lid-stage{position:relative;top:0;width:min(100%,400px);height:auto;margin:0 auto;translate:none}
.brain-page h1{font-size:clamp(46px,13vw,64px)}
.split{grid-template-columns:1fr;gap:60px}
.band-columns{flex-direction:column;gap:0}
.band-copy{text-align:left}
.burst{width:96px;font-size:32px}
}
@media(prefers-reduced-motion:reduce){.lid-stage .piece,.lid-sun{animation:none}.brain-scroll>span{transition:none}}