/* Keep the heading and scene together, with a soft overlapping transition. */
.m4-experience{padding-top:30px}.m4-heading{pointer-events:none}.m4-heading a{pointer-events:auto}.m4-heading :is(h1:not(.home-seo-heading),h2#hero-title){font-size:clamp(38px,4.4vw,62px)}.m4-heading .eyebrow{margin-bottom:12px}.m4-subtitle{margin:12px 0}.m4-stage{margin-top:-95px;height:clamp(350px,40vw,550px)}
.m4-experience .m4-controls{display:grid;grid-template-columns:1fr minmax(160px,240px) 1fr;gap:18px;max-width:840px;margin:0 auto}.m4-experience .m4-controls label{text-align:right}.m4-experience .m4-controls input{width:100%;margin:0}.m4-experience .m4-controls button{justify-self:start;font-family:inherit;line-height:1.3;white-space:nowrap}.m4-experience .m4-controls[hidden]{display:none}
/* Timed decorative light, independent of the car and its render loop. */
.ribbon>div::before{animation:benefit-light 16s ease-in-out infinite;opacity:0}.ribbon>div:nth-child(2)::before{animation-delay:4s}.ribbon>div:nth-child(3)::before{animation-delay:8s}.ribbon>div:nth-child(4)::before{animation-delay:12s}
@keyframes benefit-light{0%,25%,100%{opacity:0}6%,19%{opacity:1}}
.brand-values-grid article{position:relative}.brand-values-grid article::after{content:"";position:absolute;inset:-1px;border:1px solid #cfb477;box-shadow:0 0 20px #d7b67355,inset 0 0 16px #d7b67318;pointer-events:none;opacity:0;animation:value-light 12s ease-in-out infinite}.brand-values-grid article:nth-child(2)::after{animation-delay:4s}.brand-values-grid article:nth-child(3)::after{animation-delay:8s}
@keyframes value-light{0%,33.33%,100%{opacity:0}8%,25%{opacity:1}}
.pricing-motion{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/9}.pricing-motion img{width:100%;height:100%;object-fit:cover;display:block;animation:pricing-drift 12s ease-in-out infinite alternate}.pricing-motion .pricing-detail{position:absolute;inset:0;opacity:0;animation:pricing-reveal 12s ease-in-out infinite,pricing-drift 12s ease-in-out infinite alternate}.pricing-motion-toggle{position:absolute;z-index:2;right:16px;bottom:16px;border:1px solid #c7ad78;background:#191c19df;color:#fff;padding:9px 15px;border-radius:24px;font:12px/1.4 Arial,sans-serif;cursor:pointer}.pricing-motion.is-paused img{animation-play-state:paused}
@keyframes pricing-reveal{0%,42%,100%{opacity:0}50%,92%{opacity:1}}@keyframes pricing-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
@media(max-width:600px){.m4-experience{padding-top:24px}.m4-heading :is(h1:not(.home-seo-heading),h2#hero-title){font-size:36px}.m4-stage{margin-top:-55px;height:330px}.m4-experience .m4-controls{grid-template-columns:1fr;gap:12px;width:100%;max-width:300px}.m4-experience .m4-controls label{text-align:center}.m4-experience .m4-controls button{justify-self:center}.m4-experience .m4-controls input{width:100%}.pricing-motion-toggle{font-size:11px;right:10px;bottom:10px;padding:7px 11px}}
@media(prefers-reduced-motion:reduce){.ribbon>div::before,.brand-values-grid article::after{animation:none;opacity:0}.pricing-motion img{animation:none;transform:none}.pricing-motion .pricing-detail{position:relative;opacity:1}.pricing-motion{aspect-ratio:auto}.pricing-motion-toggle{display:none}}
.m4-stage{mask-image:linear-gradient(to bottom,transparent 0,#000 95px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 95px)}
/* Photographic orbit: eight supplied perspectives, no simulated geometry. */
.photo-orbit{height:clamp(270px,36vw,420px);margin-top:0!important;mask-image:none;-webkit-mask-image:none;user-select:none;background:radial-gradient(ellipse at center,#29392f 0,transparent 70%)}
.orbit-frame{position:absolute;inset:0 0 40px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s ease;pointer-events:none}.orbit-frame.is-active{opacity:1}.orbit-crop{position:relative;width:min(92%,var(--frame-width));aspect-ratio:var(--frame-ratio);overflow:hidden;border-radius:4px;box-shadow:0 20px 70px #0006}.orbit-crop img{position:absolute;max-width:none;object-fit:fill;pointer-events:none}.orbit-angle{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:12px;color:#d2c4a8;letter-spacing:.1em}.m4-experience:has(.photo-orbit) .m4-heading{padding-bottom:0}.m4-experience:has(.photo-orbit){background:linear-gradient(#161916,#17221b)}
.about-scroll-story{position:relative;isolation:isolate}.about-scroll-story>.about-intro{position:sticky;top:var(--header-height,84px);height:calc(100svh - var(--header-height,84px));min-height:440px;margin-top:0;z-index:0}.about-scroll-content{position:relative;z-index:1;background:var(--paper,#f7f5f0);box-shadow:0 -20px 45px #0000000a}.about-scroll-content>.section{background:var(--paper,#f7f5f0)}
@media(max-width:600px){.photo-orbit{height:290px}.about-scroll-story>.about-intro{min-height:440px;height:calc(90svh - var(--header-height,84px))}}
@media(prefers-reduced-motion:reduce){.orbit-frame{transition:none}.about-scroll-story>.about-intro{position:relative;top:auto;height:auto}}

/* Symmetric gallery navigation, independent from the homepage viewer. */
.m4-gallery .m4-controls{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:12px;width:100%;max-width:none;margin:12px 0}.m4-gallery .m4-controls button{width:46px;height:46px;margin:0;justify-self:center;display:grid;place-items:center;padding:0;line-height:1}.m4-gallery .m4-controls .m4-caption{text-align:center;margin:0;min-width:0}

/* Full-resolution studio views soften into the surrounding green-black. */
.m4-experience:has(.photo-orbit){background:#161916}
.photo-orbit{height:clamp(270px,60vw,560px);background:transparent;overflow:hidden}
.orbit-frame{inset:0 0 28px}.orbit-crop{width:min(96%,840px);height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;overflow:visible}
.orbit-crop img{position:static;display:block;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent);-webkit-mask-composite:source-in}
.orbit-crop{width:min(96%,840px,calc((clamp(270px,60vw,560px) - 28px)*1.5));height:auto;aspect-ratio:3/2}.orbit-crop img{height:auto;object-fit:initial}
/* Centered compact viewer controls. */
.m4-experience .m4-controls{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 20px;max-width:360px;margin:0 auto}
.m4-experience .m4-controls label{text-align:center;font-size:12px}
.m4-experience .m4-controls input{width:100%;height:28px}
.m4-experience .m4-caption{margin:8px 0 0;padding:0 16px;font-size:10px}
.m4-experience{padding-bottom:16px}
.photo-orbit{touch-action:none;cursor:grab;--outside-opacity:1;--outside-scale:1}
.photo-orbit:active{cursor:grabbing}.photo-orbit:focus-visible{outline:1px solid #c7ad78;outline-offset:-4px}
.orbit-frame.is-active{opacity:var(--outside-opacity)}.orbit-frame{transform:scale(var(--outside-scale));transition:opacity .55s ease}
.orbit-depth{position:absolute;inset:0 0 28px;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;will-change:transform,opacity}
.orbit-zoom{position:absolute;z-index:4;right:clamp(14px,4vw,60px);bottom:42px;display:flex;flex-direction:column;gap:7px}
.orbit-zoom button{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid #c7ad7866;background:#161916b8;color:#e3d3ad;font:24px/1 Arial;cursor:pointer}
.orbit-zoom button:disabled{opacity:.3;cursor:default}.orbit-angle{pointer-events:none}
.m4-track.is-crossfade{display:grid;overflow:hidden;scroll-snap-type:none;touch-action:pan-y}
.is-crossfade .m4-slide{grid-area:1/1;width:100%;min-width:0;opacity:0;pointer-events:none;transition:opacity .9s cubic-bezier(.25,.1,.25,1);z-index:0}
.is-crossfade .m4-slide.is-current{opacity:1;pointer-events:auto;z-index:1}
@media(prefers-reduced-motion:reduce){.orbit-frame,.is-crossfade .m4-slide{transition:none}}

/* Zoom opacity belongs to the entire exterior layer, avoiding a second CSS fade. */
.orbit-outside{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}
.orbit-outside .orbit-frame{transform:none;transition:opacity .35s ease}
.orbit-outside .orbit-frame.is-active{opacity:1}
.orbit-depth{transition:opacity .3s ease}
.is-zooming .orbit-depth{transition:none}
@media(prefers-reduced-motion:reduce){.orbit-outside .orbit-frame,.orbit-depth{transition:none}}
