/* Mobile composition: full artwork in normal flow, never a cropped desktop canvas.
   Scoped to narrow screens; desktop styling and choreography stay unchanged. */
@media (max-width:820px){
 :root{--nav-height:68px;--notice-height:28px}
 header{height:var(--nav-height);padding-inline:5%;gap:8px}
 header .brand{width:105px}
 .nav-cta{margin-left:auto;font-size:10px;padding:10px 12px;white-space:nowrap}
 .nav-cta span{margin-left:6px}
 .menu{display:block;color:#252129;background:transparent;border:0;font-size:20px;min-width:38px;min-height:44px;padding:8px}
 .motion-toggle{min-width:34px;min-height:44px;padding:6px}
 .motion-toggle span{display:none}
 nav{display:none;position:absolute;left:0;right:0;top:calc(var(--nav-height) - 1px);margin:0;background:#fffffffa;padding:24px 6%;border-bottom:1px solid #17171c20;flex-direction:column;gap:22px;font-size:15px}
 nav.open{display:flex}
 .delivery-notice{height:var(--notice-height);font-size:8px;line-height:1.3;padding-inline:8px;letter-spacing:0}
 .section-pad{padding:54px 6%}
 .split{grid-template-columns:minmax(0,1fr);gap:28px}
 .split>.copy{order:-1}
 .copy,.section-heading>*,.split>*{min-width:0}
 h2{font-size:clamp(32px,8.7vw,43px);line-height:1.13;letter-spacing:-1.7px}
 p{font-size:13px;line-height:1.85}
 .eyebrow{font-size:8px;letter-spacing:1.7px;margin-bottom:20px;line-height:1.7}
 .section-heading{display:block}
 .section-heading>p{font-size:12px;margin-bottom:20px}
 .copy>p{max-width:none}
 /* Hero: the ring gets its own row, so buttons and captions can never overlap it. */
 .hero{height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:40px 6% 26px;overflow:visible;isolation:isolate}
 .hero-copy{order:0;width:100%;padding:0}
 .hero h1{font-size:clamp(38px,10.5vw,54px);line-height:1.08;letter-spacing:-2.2px;margin-bottom:22px;max-width:620px}
 .hero p{font-size:13px;line-height:1.8}
 .hero .actions{gap:12px 22px;margin-top:22px;flex-wrap:wrap}
 .hero .button{font-size:11px;padding:14px 18px;gap:15px;min-height:44px}
 .hero .text-button{font-size:11px;min-height:44px}
 .hero-ring{position:relative;inset:auto;order:1;width:min(78%,290px);max-width:100%;height:auto;max-height:325px;object-fit:contain;margin:22px auto 16px;transform:none}
 .hero-glow{inset:auto 0 30px;width:100%;height:45%;z-index:-1}
 .hero-caption{position:static;order:2;align-items:center;text-align:center;font-size:8px;gap:6px;margin:0}
 .hero-caption span:first-child{font-size:7px;letter-spacing:1.5px}
 .hero .scroll{position:static;order:3;text-align:center;font-size:7px;letter-spacing:1.3px;margin-top:19px}
 .hero .scroll span{margin-left:10px;font-size:15px}
 .vertical-label{display:none}
 .chapter-bar{padding:18px 6%;font-size:7px;line-height:1.6;gap:15px;letter-spacing:1px}
 .chapter-bar div{display:none}
 /* Wide artwork belongs below the copy, not behind it, on a phone. */
 .scene,.panther,.macro,.comfort,.wild{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible;margin:0;padding:46px 0 28px}
 .scene .scene-copy,.scene .scene-copy.right,.panther .scene-copy,.wild .scene-copy,.comfort .scene-copy{order:0;position:relative;width:100%;padding:0 6%;margin:0;background:none}
 .scene .scene-copy h2,.panther .scene-copy h2,.wild .scene-copy h2{font-size:clamp(32px,8.7vw,43px)!important}
 .scene .scene-copy p{max-width:100%;font-size:13px}
 .scene>img,.panther>img,.macro>img,.comfort>img,.wild>img{position:relative;inset:auto;order:1;display:block;width:100%;max-width:100%;height:auto;min-height:0;max-height:360px;object-fit:contain;object-position:center;margin:25px auto 0;transform:none}
 .scene-foot{position:relative;inset:auto;order:2;width:88%;margin:20px auto 0;padding:15px 0;font-size:6px;letter-spacing:1px;gap:15px;line-height:1.6}
 .inline-link{font-size:11px;margin-top:8px;gap:25px;min-height:44px}
 .model-title{margin-bottom:16px}
 /* All portrait products are deliberately smaller than the viewport width. */
 .product-art{width:100%;margin:0 auto}
 .product-art>img,.display-details>img,.hardware-detail>img{display:block;width:min(88%,300px);max-width:100%;height:auto;max-height:350px;min-height:0;object-fit:contain;margin:8px auto}
 .scroll-art{transform:translateY(clamp(-7px,var(--art-y,0px),7px));will-change:auto}
 .film-scene{margin:22px auto 12px;width:100%}
 .film-scene>img{width:100%;max-width:100%;height:auto;min-height:0;max-height:265px;object-fit:contain;margin:0}
 .intro{overflow:visible;padding-bottom:32px}
 .intro>p{max-width:480px;margin:20px auto}
 .launch-film{display:block;padding:22px 0 28px;margin-top:20px}
 .launch-film h3{font-size:24px}
 .launch-film button{margin-top:16px;min-height:44px}
 .launch-film .circle-play{flex-shrink:0}
 .additional-art>img,.engineering-campaign>img{width:100%;max-width:100%;height:auto;max-height:330px;object-fit:contain;margin:12px auto}
 .finish-stage{height:clamp(245px,72vw,340px);margin:22px auto 0;width:100%}
 .finish-stage img{position:absolute;inset:0;width:min(88%,300px);max-width:100%;height:100%;margin:auto;object-fit:contain}
 .giant-word{font-size:clamp(35px,10vw,64px);letter-spacing:-2px;left:0;right:0;text-align:center;top:40%;white-space:normal}
 .finish-controls{padding:22px 0;gap:15px;font-size:9px;line-height:1.6}
 .finish-controls>span:last-child{display:none}
 .swatches{gap:14px;flex-shrink:0;padding:5px}
 .swatch{width:27px;height:27px}
 .display{overflow:visible}
 .display-macro{width:100%;max-width:100%;height:auto;min-height:0;max-height:315px;object-fit:contain;object-position:center;margin:26px auto 0;mask-image:none}
 .display-details{margin-top:40px;gap:22px}
 .controls .split{gap:25px}
 .controls .product-art{order:2}
 .controls .product-art img{margin:0 auto;width:min(85%,285px);height:auto;max-height:320px}
 .large{font-size:24px;line-height:1.2}
 .conduction{gap:16px}
 .conduction>img{width:72px;height:72px;flex-shrink:0}
 .architecture{height:auto;margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 15px}
 .architecture>img{width:min(86%,310px);max-width:100%;height:auto;max-height:360px;object-fit:contain;margin:0 auto 15px;flex-basis:100%}
 .architecture-label{position:static;inset:auto;background:none;gap:5px;padding:0;font-size:7px;line-height:1.6}
 .architecture-label small{font-size:7px}
 .architecture-label:after{display:none}
 .view-switch{margin:20px 0 48px;gap:24px}
 .view-switch button{font-size:11px;min-height:44px}
 .core{margin-bottom:55px}
 .core>img{width:100%;max-width:100%;height:auto;max-height:310px;object-fit:contain;margin:0 auto}
 .hardware-detail{margin:55px 0;gap:25px}
 .components img{width:100%;max-width:100%;height:auto;margin:24px auto 0;object-fit:contain}
 .components .eyebrow{font-size:8px}
 .engineering-campaign>img{margin-top:25px}
 .about h2{font-size:clamp(37px,10vw,54px)}
 .about-bottom{display:block}
 .about-bottom>a{margin-top:5px;white-space:normal}
 .portrait-wrap{width:min(86%,300px);max-width:100%;margin:10px auto 0}
 .portrait-wrap img{width:100%;height:auto}
 .founder-links{gap:15px 20px}
 .founder-links a{padding:10px 0}
 .partner-row{flex-wrap:wrap;gap:30px;margin-top:35px;padding:25px 0}
 .partner-row>a{font-size:22px}
 .partner-row .aiia-brand{max-width:100%;font-size:11px}
 .partner-row .aiia-brand img{max-width:100px;width:100px}
 .contact{grid-template-columns:minmax(0,1fr);gap:25px;padding-top:40px}
 .contact>img{width:min(76%,260px);max-width:100%;height:auto;max-height:295px;margin:0 auto;object-fit:contain;transform:none}
 .contact .copy{order:-1;padding:0}
 .contact h2{font-size:clamp(34px,9vw,44px)}
 .contact-fields{grid-template-columns:1fr;gap:0}
 #contact-form input,#contact-form textarea,#contact-form select{font-size:16px}
 .interaction-layout{grid-template-columns:1fr;gap:20px}
 .interaction-layout>img{width:min(82%,280px);height:auto;margin:0 auto}
 .interaction-point{gap:16px;padding:23px 0}
 .interaction-point h3{font-size:17px}
 .interaction-point p{font-size:12px}
 .footer-navigation{flex-wrap:wrap;gap:12px 24px}
 footer{padding:35px 6% 25px;gap:25px}
 .footer-bottom{flex-direction:column;gap:10px;line-height:1.7;font-size:9px}
 /* Scrubbing stays intact; the entire movie frame fits inside its stage. */
 .motion-chapter{height:225svh}
 .motion-chapter.auto-chapter{height:150svh}
 .motion-stage{top:var(--sticky-top);height:calc(100svh - var(--sticky-top));min-height:0;padding-top:24px}
 .motion-heading{padding-inline:6%}
 .motion-heading h2{font-size:clamp(26px,7.6vw,34px);letter-spacing:-1.2px;margin-bottom:10px}
 .motion-heading .eyebrow{font-size:7px;margin-bottom:10px;line-height:1.5}
 .motion-heading p{font-size:11px;line-height:1.6;max-width:320px;margin:auto}
 .motion-media{width:100%;max-width:100%;min-width:0;min-height:0;margin:8px 0 0;transform:none;will-change:auto}
 .motion-media video{width:100%;max-width:100%;height:100%;object-fit:contain;mask-image:none}
 .motion-footer{width:88%;min-height:62px;height:auto;flex-basis:62px;display:flex;flex-wrap:wrap;gap:6px 12px;padding:10px 0;font-size:6px;letter-spacing:1px}
 .motion-instruction{width:100%;line-height:1.6}
 .motion-steps{font-size:8px;gap:15px;flex-wrap:wrap}
 .motion-track{left:6%;right:6%}
 .scene-play{bottom:75px;font-size:11px;min-height:44px}
 .motion-off .motion-stage{height:auto;min-height:0;top:auto;padding-top:25px}
 .motion-off .motion-media{flex:none;aspect-ratio:16/9;width:100%;margin:20px 0 10px}
 .motion-off .motion-footer{flex-basis:48px}
 .motion-off .scene-play{position:static;order:4;margin:0 auto 20px;padding:12px 8px}
 dialog{padding:48px 12px 18px;width:94vw;max-height:90svh}
 dialog>p{font-size:10px;flex-wrap:wrap;gap:12px}
}
@media (max-width:359px){
 header{padding-inline:4%;gap:4px}
 header .brand{width:91px}
 .nav-cta{font-size:9px;padding-inline:9px}
 .nav-cta span{margin-left:3px}
 .hero h1{font-size:36px}
 .hero .actions{gap:10px 14px}
 .hero .button{font-size:10px;padding-inline:14px}
 .hero .text-button{font-size:10px}
 .motion-steps{gap:10px;font-size:7px}
}
@media (max-width:820px) and (max-height:500px) and (orientation:landscape){
 :root{--nav-height:52px;--notice-height:24px}
 .motion-stage{padding-top:9px}
 .motion-heading h2{font-size:22px;margin-bottom:2px}
 .motion-heading .eyebrow{font-size:6px;margin-bottom:3px}
 .motion-heading p{display:none}
 .motion-footer{flex-basis:38px;min-height:38px;padding:4px 0}
 .motion-instruction{width:auto;font-size:5px}
 .motion-steps{font-size:7px}
 .hero-ring{max-height:240px}
}