/* UI UX Pro Max review: preserve the approved visual identity and motion. */
html{scroll-padding-top:28px}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #8de0ff;outline-offset:4px}
#project-dialog{scroll-padding-top:100px}
#project-dialog :where(a,button,[tabindex]){scroll-margin-top:100px;scroll-margin-bottom:24px}
#case-intro{font-size:16px;line-height:1.8;color:#b9c9d5;max-width:600px;margin:0}
.portal-copy p,.page-description,.service-intro,.service-copy p,.contact-method p,.about-intro>div>p:not(.eyebrow),.case-story p:not(.eyebrow),.case-detail p:not(.eyebrow){font-size:16px;line-height:1.8;color:#b9c9d5}
.project-caption p,.project-caption div>span,.service-example-grid span,.case-facts dd{font-size:14px;line-height:1.7}
.case-media-caption,.case-detail figcaption,.album-grid figcaption,.case-gallery-note,.case-video p,.lens-toolbar p{font-size:12px!important;line-height:1.8!important}
.case-facts dt,.case-sequence{font-size:11px}
.motion-toggle{width:44px;height:44px;font-size:14px}
header nav a,.footer-socials a{min-height:44px;display:inline-flex;align-items:center}
.cinema-play{min-height:44px;font-size:12px}
@media(max-width:800px){#mobile-nav:not([hidden]){max-height:calc(100svh - 83px);overflow-y:auto;overscroll-behavior:contain}}
@media(max-width:680px){
 .portal-copy p,.page-description,.service-intro,.service-copy p,.contact-method p,.about-intro>div>p:not(.eyebrow),.case-story p:not(.eyebrow),.case-detail p:not(.eyebrow){font-size:15px}
 .portal-copy{padding-bottom:26px}
 .cinema-controls button{font-size:12px;line-height:1.5}
 .cinema-controls{gap:12px}
}
@media(prefers-reduced-motion:reduce){.tilt-active{transform:none!important}.tilt-surface{will-change:auto}}

/* Draw navigation arrows as vectors so mobile platforms cannot substitute emoji. */
.ui-arrow{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.1em;overflow:visible;pointer-events:none}