:root{--cardX:170px;--cardY:20px;--cardWidth:450px;--bunnyX:280px;--bunnyY:170px;--bunnyWidth:350px}
.hero-art .motion-card{position:absolute;left:var(--cardX);top:var(--cardY);width:var(--cardWidth);height:auto;max-width:none;transform:translate(var(--move-x,0px),var(--move-y,0px));mask-image:linear-gradient(#000 88%,transparent 100%)}
.ensemble .motion-bunny{position:absolute;left:var(--bunnyX);top:var(--bunnyY);width:var(--bunnyWidth);height:auto;max-width:none;mask-image:linear-gradient(#000 94%,transparent 100%)}
.motion-character[hidden]{display:none}
@media(max-width:760px){.hero-art .motion-card{left:calc(var(--cardX) - 50px)}}
@media(prefers-reduced-motion:reduce){.hero-art .motion-card{transform:none}}

.motion-controls{display:none}
@media(max-width:760px){
 .hero{max-height:none}
 .hero-art .motion-card{left:75px}
 .hero-art .hero-cleo{left:87px}
 .ensemble .motion-bunny{left:284px}
 .motion-controls{display:block;position:absolute;top:405px;right:6%;z-index:5;pointer-events:auto}
 .motion-controls[hidden]{display:none}
 .tilt-enable{position:relative;border:1px solid #ffffff40;border-radius:7px;background:#171719b8;color:var(--paper);padding:6px 10px;min-height:30px;font-size:10px;line-height:1.4}
 .tilt-enable:before{content:'';position:absolute;inset:-7px 0}
 .tilt-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .studio{height:900px} .hero-art img,.hero-art .motion-card{transform:none}
}
@media(prefers-reduced-motion:reduce){.motion-controls{display:none}}

/* Mobile Figma composition: 390px reference, readable and proportional down to 320px. */
@media(max-width:760px){
 .hero{height:930px;min-height:930px}.header{left:22px;right:22px;height:84px}.brand img{width:76px;height:45px}.brand span{display:none}
 .hero-copy{position:absolute;inset:0;margin:0;width:100%;padding:0}.hero-copy .eyebrow{position:absolute;top:111px;left:22px;right:22px;font-size:8px;margin:0}.hero h1{position:absolute;top:152px;left:22px;right:22px;font-size:clamp(52px,16.4vw,64px);line-height:.97;margin:0}.hero .intro{position:absolute;top:366px;left:22px;right:22px;font-size:12px;line-height:1.6;margin:0;max-width:none}
 .hero .actions{position:absolute;top:830px;left:22px;right:22px;margin:0}.hero .actions .text-link{display:none}.hero .actions .button{min-width:210px;justify-content:space-between}
 .hero-art{top:445px;left:0;right:0;width:100%;height:340px;transform:none;opacity:1}.hero-art .hero-remy{left:1.28%;top:16px;width:41.03%;height:245px;object-fit:contain}.hero-art .hero-anime{left:60.77%;top:0;width:38.46%;height:260px;object-fit:contain}.hero-art .hero-cleo{left:27.18%;top:43px;width:48.72%;height:285px;object-fit:contain}.hero-art .motion-card{left:27.18%;top:43px;width:48.72%;height:auto}.hero-art .orb{display:none}.hero-art .art-fade{bottom:0;height:50px;top:auto}.hero-stat{top:720px;bottom:auto;left:22px;right:22px;min-height:77px}.hero-bottom{bottom:18px;left:22px;right:22px;font-size:7px}
 .process-section{position:relative;min-height:1000px;padding:32px 22px 90px}.process-heading .eyebrow{font-size:10px;margin-bottom:21px}.process-heading h2{font-size:37px;line-height:1;max-width:346px}.process-promise{margin-top:25px}.process-promise p{margin-top:8px}.process-intro{margin:24px 0 26px;font-size:13px}.process-swipe{font-size:10px;margin-bottom:25px}.process-scroll{margin-right:-22px;padding-right:22px;min-height:430px}.process-track{grid-template-columns:repeat(4,280px);gap:24px}.process-bottom{position:absolute;bottom:17px;left:22px;right:22px;padding:0;margin:0}.process-bottom>span{max-width:250px;line-height:1.45}
 .process-ready.process-scrub .process-step{opacity:var(--stage-progress,0);transform:translateY(calc((1 - var(--stage-progress,0))*18px));transition:none}.process-ready.process-scrub .step-connector{clip-path:inset(0 calc((1 - var(--stage-progress,0))*100%) 0 0);transition:none}
}
@media(min-width:761px) and (max-width:1000px){.process-ready.process-scrub .process-step{opacity:var(--stage-progress,0);transform:translateY(calc((1 - var(--stage-progress,0))*18px));transition:none}.process-ready.process-scrub .step-connector{clip-path:inset(0 calc((1 - var(--stage-progress,0))*100%) 0 0);transition:none}}
@media(prefers-reduced-motion:reduce){.process-ready.process-scrub .process-step{opacity:1;transform:none}.process-ready.process-scrub .step-connector{clip-path:none}}
.hero-mobile-copy{display:none}@media(max-width:760px){.hero-desktop-copy{display:none}.hero-mobile-copy{display:inline}}

/* Approved mobile revision: Remy, Cleo and Mio; vertical production stages. */
@media(max-width:760px){
 .hero-art{top:412px;height:361px}
 .hero-art .hero-remy{left:.513%;top:44px;width:49.487%;height:auto;aspect-ratio:193/317;z-index:1}
 .hero-art .hero-anime{left:62.564%;top:68px;width:35.385%;height:auto;aspect-ratio:138/240;z-index:2}
 .hero-art .hero-cleo,.hero-art .motion-card{left:18.974%;top:0;width:61.795%;height:auto;z-index:3}
 .hero-art .hero-cleo{aspect-ratio:241/361}
 .process-section{min-height:0;padding:32px 22px 28px}
 .process-swipe{display:none}
 .process-intro{margin-bottom:32px}
 .process-scroll{overflow:visible;scroll-snap-type:none;margin:0;padding:0;min-height:0}
 .process-track{grid-template-columns:minmax(0,1fr);width:100%;gap:40px}
 .process-step{scroll-snap-align:none}
 .process-bottom{position:static;margin-top:64px;padding:0}
}

/* Direct conversation footer, following the approved Figma layout. */
.contact-direct{padding-top:56px;padding-bottom:32px}
.contact-direct .contact-heading{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:64px;margin:40px 0 68px}
.contact-direct .contact-heading h2{font-size:clamp(52px,5.5vw,84px);line-height:1.02;margin:0}
.contact-direct .contact-invite{justify-self:center}
.contact-direct .conversation-button{border-radius:999px;min-height:54px;padding:16px 24px;gap:32px;font-size:12px;color:#111}
.contact-direct .contact-invite p{font-size:14px;line-height:1.5;margin:24px 0 0;color:var(--paper)}
.contact-direct footer{margin-top:0;padding-top:28px}
.project-image img{object-fit:contain}.project-image{background:#111}
@media(max-width:760px){
 .contact-direct{padding:36px 22px 24px}
 .contact-direct .contact-heading{grid-template-columns:1fr;gap:28px;margin:28px 0 40px}
 .contact-direct .contact-heading h2{font-size:44px}
 .contact-direct .contact-invite{justify-self:start}
 .contact-direct .conversation-button{min-height:44px;padding:12px 18px;font-size:11px;gap:24px}
 .contact-direct .contact-invite p{font-size:12px;margin-top:16px}
 .contact-direct footer{display:flex;flex-wrap:wrap;gap:16px;font-size:9px}
}

.email-chooser{width:min(100%,320px)}
.email-chooser summary{cursor:pointer;list-style:none;user-select:none}
.email-chooser summary::-webkit-details-marker{display:none}
.email-chooser summary:focus-visible{outline:3px solid #f5b74b;outline-offset:5px}
.email-chooser[open] summary>span{transform:rotate(90deg)}
.email-options{margin-top:14px;padding:16px;background:var(--paper);color:var(--ink);border-radius:12px;box-shadow:0 12px 30px #0002}
.contact-direct .email-options p{font-size:12px;color:#555;margin:0 0 10px}
.email-options>a{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:8px 10px;border-radius:7px;font-size:14px}
.email-options>a:hover,.email-options>a:focus-visible{background:#e4dfd5}
.email-options small{display:block;margin-top:10px;font-size:10px;color:#555}

.contact-form-panel{width:min(100%,440px)}
.contact-form-panel summary{cursor:pointer;list-style:none}
.contact-form-panel summary::-webkit-details-marker{display:none}
.contact-form-panel summary:focus-visible{outline:3px solid #f5b74b;outline-offset:5px}
.contact-form-panel[open] summary>span{transform:rotate(90deg)}
#contact-form{position:relative;margin-top:24px;display:grid;gap:16px}
#contact-form label{display:grid;gap:6px;font-size:12px;color:var(--paper)}
#contact-form input,#contact-form textarea{box-sizing:border-box;width:100%;min-width:0;border:1px solid #fff7;border-radius:7px;padding:10px 12px;background:#9b172650;color:#fff;outline-offset:3px}
#contact-form textarea{resize:vertical;min-height:120px}
#contact-form button{justify-self:start;border-radius:9px;min-height:44px}
#contact-form button:disabled{opacity:.65;cursor:wait}
#contact-form .contact-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-direct #contact-form .contact-privacy{font-size:10px;line-height:1.5;margin:0}
.contact-direct #contact-status{font-size:12px;line-height:1.5;margin:0}
.contact-direct .contact-invite{width:100%;max-width:440px}