/* One immediate, self-hosted illustration. Its geometry is complete before script loads. */
.opening{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:var(--s4);padding:var(--s4) 0 var(--s5)}
.opening-copy{min-width:0}.opening-copy h1 em{display:block}.opening-copy h1{font-size:clamp(2.75rem,5.2vw,5rem)!important}.opening-copy .eyebrow{color:var(--accent)}.opening-copy .lead{font-size:1.125rem}.opening-note{font-size:.9375rem;margin-top:var(--s3)!important}.opening-note a{text-decoration:underline;font-weight:600}
.opening-art{min-width:0;margin:0}.opening-stage{position:relative;aspect-ratio:760/570;isolation:isolate}.opening-lamp{position:absolute;inset:0;width:100%;height:100%}.opening-browser{position:absolute;left:6%;top:29%;width:73%;border:2px solid var(--ink);border-radius:9px;overflow:hidden;background:var(--card);box-shadow:8px 10px 0 #0b2d4b15;transform:rotate(-3deg)}.opening-chrome{height:24px;display:flex;gap:4px;align-items:center;padding:0 10px;background:var(--paper);border-bottom:1px solid var(--ink)}.opening-chrome i{display:block;width:4px;height:4px;border-radius:50%;background:var(--accent)}.opening-chrome span{font-size:8px;letter-spacing:.12em;font-weight:600;margin-left:auto;color:var(--ink)}.opening-site{position:relative;aspect-ratio:1200/640;overflow:hidden}.opening-site img{display:block;width:100%;height:auto}.opening-before{position:absolute;inset:0;opacity:0}.opening-phone{position:absolute;left:69%;top:48%;width:23%;aspect-ratio:390/610;border:5px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:5px 7px 0 #0b2d4b20;transform:rotate(6deg)}.opening-phone>span{display:block;width:32%;height:4px;background:var(--ink);border-radius:4px;margin:7px auto}.opening-phone img{display:block;width:100%;height:auto}.opening-art figcaption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:.75rem;line-height:1.5;min-height:44px;margin-top:8px}.opening-art figcaption>span{flex:1 1 12rem}body.public-site button.opening-replay{background:none;border:0;color:var(--ink);padding:8px 0;min-height:44px;font-size:.8125rem;text-decoration:underline;gap:6px}body.public-site button.opening-replay[hidden]{display:none}body.public-site button.opening-replay svg{width:16px;height:16px}

@media(max-width:1000px){.opening{gap:var(--s3)}.opening-copy h1{font-size:3rem!important}.opening-title-break{display:none}.opening-browser{border-radius:6px}.opening-phone{border-width:4px;border-radius:14px}.opening-art figcaption{justify-content:center}.opening-art figcaption>span{flex-basis:100%;text-align:center}.opening-replay{margin:auto}}
@media(max-width:700px){.opening{grid-template-columns:minmax(0,1fr);gap:var(--s2);padding:var(--s2) 0 var(--s4)}.opening-art{grid-row:1}.opening-stage{margin-inline:-8px}.opening-copy{grid-row:2}body.public-site .opening-copy .eyebrow{display:none}.opening-copy h1{font-size:2.75rem!important;margin-bottom:var(--s2)!important}.opening-copy .lead{font-size:1rem;line-height:1.5}.opening-copy .actions{margin-top:var(--s2)}.opening-copy .actions>.button{width:100%}.opening-note{margin-top:var(--s2)!important}.opening-chrome{height:18px;padding:0 7px}.opening-chrome span{font-size:6px}.opening-chrome i{width:3px;height:3px}.opening-art figcaption{margin-top:0;min-height:44px;gap:8px}.opening-art figcaption>span{flex:1 1 12rem;text-align:left}body.public-site button.opening-replay{font-size:.75rem;min-height:44px;margin:0}.opening-phone>span{height:3px;margin:5px auto}}
@media(prefers-reduced-motion:reduce){body.public-site button.opening-replay{display:none}}

/* The first painted frame is unlit. Images settle before one deliberate switch-on. */
.opening-beam{opacity:.68;transform-origin:350px 107px}
.opening-pool{opacity:.26}
.opening-bulb{opacity:1}
.opening-switch{transform-origin:377px 100px}
@media(prefers-reduced-motion:no-preference){
 .opening-beam{animation:opening-light 1.9s both paused}
 .opening-bulb{animation:opening-bulb-on 1.9s both paused}
 .opening-pool{animation:opening-pool-on 1.9s both paused}
 .opening-switch{animation:opening-pull 1.9s both paused}
 .opening-before{animation:opening-redesign 1.9s both paused}
 .opening-phone{animation:opening-phone-in 1.9s both paused}
 .opening.is-ready .opening-stage *{animation-play-state:running}
}
@keyframes opening-pull{0%,16%{transform:translateY(0)}25%,31%{transform:translateY(9px)}40%,100%{transform:translateY(0)}}
@keyframes opening-bulb-on{0%,30%{opacity:0}34%,100%{opacity:1}}
@keyframes opening-light{0%,30%{opacity:0;transform:scaleY(.04)}43%,100%{opacity:.68;transform:scaleY(1)}}
@keyframes opening-pool-on{0%,34%{opacity:0}48%,100%{opacity:.26}}
@keyframes opening-redesign{0%,46%{opacity:1}78%,100%{opacity:0}}
@keyframes opening-phone-in{0%,65%{opacity:0;transform:translateY(12px) rotate(6deg)}100%{opacity:1;transform:translateY(0) rotate(6deg)}}