.hero-scroll{height:165vh;min-height:1000px}.hero-scroll .hero{position:sticky;top:0;min-height:704px;height:100vh;max-height:1000px}.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0}.hero-art canvas.ready{opacity:1}.hero-art:after{z-index:3}.hero-art video{z-index:2}.hero-art video.ready{z-index:4}.hero-art.playing-film canvas{opacity:0}.hero-art.playing-film:after{z-index:5}
#hero-twin{color:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:16px 18px;font-weight:600;background:#eee9dfdb}.twin-visual img{height:410px;object-fit:cover;object-position:center 35%}
.ai-mascot-toggle{position:fixed;right:24px;bottom:22px;z-index:1200;display:flex;gap:11px;align-items:center;background:var(--ink);color:var(--paper);border:1px solid #c9d9cb;box-shadow:0 8px 30px #142e2e30;padding:11px 19px 11px 10px;border-radius:40px;font-size:13px;font-weight:600;min-height:52px}.ai-mascot-toggle__orb{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#c9d9cb;color:var(--ink);font-size:20px}
.ai-mascot-panel{position:fixed;right:24px;bottom:87px;width:420px;height:min(760px,calc(100dvh - 110px));z-index:1200;background:var(--pale);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 90px #102e2e40;display:none;grid-template-rows:auto minmax(180px,1fr) auto minmax(90px,.7fr) auto auto;overflow:hidden}.ai-mascot-panel.is-open{display:grid}.ai-mascot-header{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;gap:12px;border-bottom:1px solid var(--line)}.ai-mascot-kicker{font:8px Mono,monospace;letter-spacing:.08em;margin-bottom:7px;color:var(--copper)}.ai-mascot-header strong{font:600 17px Space,Arial,sans-serif}.ai-mascot-header #ai-mascot-status{display:block;font-size:10px;color:var(--muted);margin-top:5px}.ai-mascot-header-actions{display:flex;gap:4px}.ai-icon-btn{width:35px;height:38px;border:1px solid var(--line);border-radius:5px;font-size:20px}.ai-mascot-stage{position:relative;min-height:0;background:#ddd9ce;overflow:hidden}.ai-mascot-stage canvas{display:block;position:relative;z-index:1;width:100%;height:100%}.avatar-fallback{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 28%}.ai-mascot-stage:has(canvas) .avatar-fallback{opacity:0}.ai-mascot-loader{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;background:#eee9dfda;font-size:12px;padding:22px;text-align:center}.ai-mascot-loader small{display:block;font-size:10px;line-height:1.6;margin-top:7px}.ai-mascot-loader.is-hidden{display:none}.ai-prompt-list{display:flex;gap:7px;padding:11px 13px;flex-wrap:wrap;border-block:1px solid var(--line)}.ai-prompt-list button{border:1px solid var(--line);padding:8px;border-radius:5px;font-size:10px}.ai-chat-log{overflow:auto;padding:13px;display:flex;flex-direction:column;gap:10px}.ai-message{padding:11px 13px;border-radius:8px;font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.ai-message-bot{background:#e5e9df}.ai-message-user{background:var(--ink);color:var(--paper);align-self:flex-end}.ai-message-error{background:#f0d9c9}.ai-chat-form{display:flex;gap:7px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}.ai-chat-form input{font:12px Inter,Arial,sans-serif;min-width:0;flex:1;padding:12px 9px;background:white;color:var(--ink);border:1px solid var(--line);border-radius:5px}.ai-chat-action{width:38px;height:40px;border:1px solid var(--line);border-radius:5px;font-size:20px}.ai-send-btn{background:var(--ink);color:white}.ai-chat-action:disabled{opacity:.4;cursor:not-allowed}.ai-mascot-note{font-size:9px;line-height:1.6;padding:0 13px 11px;color:var(--muted)}.is-listening{color:#b34e30;background:#f2dccc}.ai-mascot-panel.is-expanded{width:min(1050px,calc(100vw - 48px));grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto 1fr auto auto}.is-expanded .ai-mascot-header{grid-column:1/-1}.is-expanded .ai-mascot-stage{grid-column:1;grid-row:2/6}.is-expanded .ai-prompt-list,.is-expanded .ai-chat-log,.is-expanded .ai-chat-form,.is-expanded .ai-mascot-note{grid-column:2}input:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
@media(max-width:700px){.hero-scroll{min-height:1180px;height:160vh}.hero-scroll .hero{height:850px;min-height:850px;max-height:none;top:0}.hero-art canvas{height:370px;top:auto;bottom:0}.ai-mascot-toggle{right:14px;bottom:14px;font-size:12px}.ai-mascot-panel,.ai-mascot-panel.is-expanded{right:10px;bottom:79px;width:calc(100vw - 20px);height:calc(100dvh - 95px);grid-template-columns:1fr;grid-template-rows:auto minmax(160px,1fr) auto minmax(80px,.6fr) auto auto}.is-expanded .ai-mascot-header,.is-expanded .ai-mascot-stage,.is-expanded .ai-prompt-list,.is-expanded .ai-chat-log,.is-expanded .ai-chat-form,.is-expanded .ai-mascot-note{grid-column:1;grid-row:auto}.twin-visual img{height:360px}.footer{padding-bottom:65px}}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:auto;min-height:0}.hero-scroll .hero{position:relative;height:auto}.hero-art canvas{display:none}}
.footer{padding-bottom:105px}.hero-note{bottom:94px}.twin-visual img{height:auto;aspect-ratio:1200/630;object-fit:contain}
.voice-icon{display:inline-flex;vertical-align:middle}.voice-icon .sound-off{display:none}.voice-icon[data-icon="muted"] .sound-on{display:none}.voice-icon[data-icon="muted"] .sound-off{display:block}
#ai-mic-btn{width:auto;min-width:76px;display:flex;gap:5px;align-items:center;justify-content:center;padding-inline:9px}.mic-label{font-size:10px;font-weight:600}.ai-mascot-panel.is-open #ai-mic-btn.is-voice-ready:not(:disabled){background:#d4e8da;color:#163f35;border-color:#2a7260;animation:voice-invitation 1.5s ease-out 3}.ai-mascot-panel #ai-mic-btn.is-listening{background:#b04d31!important;color:white!important;animation:none!important}
@keyframes voice-invitation{0%,100%{box-shadow:0 0 0 0 #397c6040}55%{box-shadow:0 0 0 5px #397c6000}}
a,button{transition:color .18s,background-color .18s,border-color .18s,box-shadow .18s,transform .18s}button:disabled{cursor:not-allowed}
@media(hover:hover){a:hover{color:var(--copper)}.work a:hover,.contact a:hover{color:#edba9e}.button:hover,.ai-mascot-toggle:hover{color:var(--paper);background:#28514a;box-shadow:0 7px 20px #142e2e25}.quiet-link:hover,#hero-twin:hover{background:var(--ink);color:var(--paper)}button:not(:disabled):hover{transform:translateY(-2px)}.ai-icon-btn:hover,.ai-prompt-list button:hover,.close-dialog:hover,.menu-btn:hover{background:#dce6d9;border-color:#28514a}.ai-chat-action:hover{border-color:#28514a;box-shadow:0 3px 9px #142e2e20}.project-links a:hover,.project-links button:hover,.about-links a:hover,.footer a:hover{text-decoration:underline;text-underline-offset:5px}.project-card:hover .project-title-row span{transform:translate(3px,-3px)}.project-title-row span{transition:transform .18s}}
@media(prefers-reduced-motion:reduce){#ai-mic-btn{animation:none!important}button:hover{transform:none!important}}
@media(max-width:700px){.ai-mascot-panel,.ai-mascot-panel.is-expanded{left:10px;right:10px;width:auto;max-width:none;box-sizing:border-box}}
.hero-scroll{height:220vh}.hero-art canvas{transition:opacity .15s;will-change:opacity}
@media(max-width:700px){.hero-scroll{height:200vh}}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:auto}}
.hero-art canvas{transition:none}.hero-art:has(canvas.ready):not(.playing-film)>img{visibility:hidden}.hero-art:not(.playing-film) video{visibility:hidden}
.round-contact{display:flex;flex-direction:column;justify-content:center;gap:4px;text-decoration:none;line-height:1}.round-contact-label{font:600 12px Inter,Arial,sans-serif;letter-spacing:0}.round-contact:hover{transform:translateY(-2px);background:#dce6d9;color:var(--ink)!important}.round-contact:focus-visible{outline:3px solid var(--copper);outline-offset:5px}@media(max-width:700px){.round-contact-label{font-size:9px}}@media(prefers-reduced-motion:reduce){.round-contact:hover{transform:none}}

/* Keep all three assistant controls visible when the mobile viewer is expanded. */
.ai-mascot-header>div:first-child{min-width:0;flex:1}.ai-mascot-header-actions{flex:0 0 auto;margin-left:auto}
@media(max-width:700px){
 .ai-mascot-header{position:relative;gap:6px;padding:10px 132px 10px 10px}
 .ai-mascot-header-actions{position:absolute;top:10px;right:10px;gap:3px;margin:0}
 .ai-icon-btn{flex:0 0 38px;width:38px;height:40px}
 .ai-mascot-kicker,.ai-mascot-header strong,.ai-mascot-header #ai-mascot-status{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ai-mascot-header strong{font-size:15px}
}
@media(max-width:360px){.ai-mascot-kicker{display:none}.ai-mascot-header #ai-mascot-status{font-size:9px}}

/* Mobile: dedicate real layout space to the film instead of cropping it below an 850px hero. */
@media(max-width:700px){
 .header{gap:10px}.header .brand{margin-right:auto}#music-toggle{font-size:10px!important;padding:8px 10px!important}
 .hero-scroll{height:calc(100svh + 650px);min-height:1400px}
 .hero-scroll .hero{display:grid;grid-template-rows:auto minmax(320px,1fr);height:100svh;min-height:740px;max-height:none;align-items:stretch}
 .hero-inner{grid-row:1;padding-top:24px;padding-bottom:22px;width:100%;align-self:start}
 .hero .eyebrow{margin-bottom:18px}
 .hero h1{font-size:clamp(44px,11.5vw,70px)}
 .hero-copy{margin-top:18px;font-size:14px;line-height:1.65}
 .hero-cta{margin-top:20px;gap:12px;flex-wrap:wrap}
 .hero-art{position:relative;grid-row:2;inset:auto;width:100%;height:100%;min-height:320px;overflow:hidden}
 .hero-art canvas,.hero-art img,.hero-art video{inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
 .hero-art:after{background:linear-gradient(180deg,var(--paper),transparent 14%);pointer-events:none}
 .hero-note{display:none}.motion-control{bottom:20px;z-index:6}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 .hero-scroll{height:auto;min-height:0}.hero-scroll .hero{position:relative}
}