.demo-video{display:block;width:100%;height:100%;object-fit:cover;background:#0b1220;border-radius:3px}
.example-image{aspect-ratio:16/9}
.example-image>.demo-video{position:absolute;inset:0}
.example-media.has-video{position:relative}
.has-video .example-crop{display:none}
.has-video.is-cropped .example-image{aspect-ratio:9/16;max-width:320px;margin-inline:auto}
.has-video.is-cropped .demo-video{object-fit:cover}
.video-shell{position:relative;aspect-ratio:16/9;background:#0b1220}
.video-shell>.demo-video{position:absolute;inset:0}
.video-error{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;background:#0b1220f5;padding:22px;text-align:center;font-size:.9rem}
.video-error[hidden]{display:none}
.video-error a{color:var(--accent);text-decoration:underline;min-height:44px;padding:10px}
.media-badge{pointer-events:none;top:12px;left:12px;max-width:calc(100% - 24px);font-size:.55rem}
.footage .crop-frame,.footage-label{pointer-events:none}
.footage .demo-video{position:absolute;inset:0}
.footage .crop-frame{bottom:24%;opacity:.65}
.footage-label{top:12px;bottom:auto;background:#0b1220ed;padding:5px 8px}
.service-card>.video-shell{align-self:start}
.example-media figcaption{flex-wrap:wrap;gap:12px}
.crop-toggle{min-height:44px;font-size:.76rem}
.video-note{font-size:.74rem;color:#c8d5e8;margin-top:18px}
@media(max-width:1100px) and (min-width:701px){.service-card>.video-shell{height:100%;min-height:300px;aspect-ratio:auto}}
@media(max-width:700px){
 .hero-content,.section-intro,.reading-panel,.example-copy,.contact-content,.faq-list{overflow-wrap:anywhere}
 .hero,.js .hero{padding:285px 5% 165px;min-height:100svh}
 .hero-content{padding:25px 20px}
 .hero h1,.photo-journey .hero h1{font-size:clamp(2.35rem,9vw,3.4rem);line-height:1.08}
 .hero-description{font-size:1rem;line-height:1.7}
 .photo-journey .hero,.js .photo-journey .hero{padding:155px 5% 175px;align-items:flex-start}
 .section-wrap{padding:62px 5%}
 .section-intro>p:not(.eyebrow),.reading-panel>p:not(.eyebrow),.example-copy>p:not(.eyebrow),.idea-card-body p,.service-card p,.detail-list p,.faq-list p{font-size:1rem;line-height:1.75}
 .hero-bottom,.photo-journey .hero-bottom{left:5%;right:5%;bottom:110px}
 .button,.text-link,.crop-toggle,.footer-nav a,#site-nav a{min-height:44px}
 .text-link,.footer-nav a,#site-nav a{display:inline-flex;align-items:center}
 .page-links{grid-template-columns:1fr}
 .page-link{min-height:0;padding:24px}
 .page-link h3{margin-top:18px;font-size:1.55rem}
 .page-link p{max-width:none;font-size:.94rem}
 .scene-window{padding:28px 5%;min-height:55svh}
 .scene-window figcaption{max-width:100%}
 .service-card-body,.idea-card-body{padding:24px 18px}
 .example-media figcaption{font-size:.72rem;line-height:1.5}
 .media-badge{font-size:.48rem;padding:5px 7px}
 .has-video.is-cropped .example-image{max-width:280px}
 .journey-controls{left:12px;right:auto;bottom:max(12px,env(safe-area-inset-bottom));width:48px;height:48px;min-height:48px;padding:0;justify-content:center}
 .journey-stage,.journey-progress{display:none}
 .journey-controls .motion-toggle{font-size:0;width:46px;height:46px;min-height:44px;border:0;padding:0}
 .journey-controls .motion-toggle span{font-size:1.05rem;margin:0}
 .journey-controls .motion-toggle:disabled::after{content:'Ⅱ';font-size:1.05rem;opacity:.5}
 .footer-nav,.js .footer-nav{gap:14px}
 #fb-open{min-height:48px;bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:360px){
 .hero h1,.photo-journey .hero h1{font-size:2.2rem}
 .hero-actions .button{font-size:.75rem;gap:12px}
 .fb-h #fb-reset{font-size:.65rem;padding:7px}
}