/* Accessibility refinements; loaded last, without changing artwork or motion timings. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}

/* A white inner ring keeps the existing blue focus distinguishable on dark canvases. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 3px #fff}
.service-select input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 3px #fff}
.scroll-motion .closing:focus-within .closing-copy>.button{transform:none}

/* The field boundary and placeholder remain identifiable without changing their shape. */
.project-form input:not([type=checkbox]),.project-form textarea{border-color:#758a94}
.project-form input::placeholder,.project-form textarea::placeholder{color:var(--grey);opacity:1}
.service-select input:not(:checked)+span{border-color:#758a94}
.on-dark .desktop-nav a:not([aria-current=page]):not(:hover){color:#e0edf2}
.hero-proof>div>span{color:#e0edf2}
.language-switch{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}

/* Auto height preserves the normal 24 px word mask and permits text-spacing overrides. */
.underline-button .button-word{height:auto;min-height:24px}
.pages-menu .motion-control{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:5px}
.mobile-nav>.motion-control{display:block;width:100%;text-align:left;font-size:16px;padding:14px 0;min-height:44px}
.motion-control{min-height:24px}
.motion-shortcut,.skip-link{position:fixed;z-index:110;left:20px;top:12px;max-width:calc(100vw - 40px);padding:12px 20px;border-radius:8px;background:#fff;color:var(--ink);text-align:left;overflow-wrap:anywhere}
.motion-shortcut:not(:focus),.skip-link:not(:focus){transform:translateY(calc(-100% - 24px))}
.motion-shortcut:focus,.skip-link:focus{top:12px;transform:none}

/* Optional visual description of the original reel, with native disclosure behavior. */
.reel-description{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink)}
.reel-description>summary{display:list-item;cursor:pointer;min-height:44px;padding:10px 0;font-size:16px;line-height:1.5;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.reel-description>p{max-width:900px;margin:16px 0;color:var(--grey);font-size:17px;line-height:1.65}
.reel-scenes{display:grid;gap:12px;max-width:980px;margin:18px 0 0;padding:0;list-style:none}
.reel-scenes>li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;align-items:start;color:var(--ink);font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.reel-scenes time{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.media-dialog #media-caption a{color:#e0edf2;text-decoration:underline;text-underline-offset:3px}
@media(max-width:479px){.reel-description>p{font-size:16px}.reel-scenes>li{grid-template-columns:54px minmax(0,1fr);gap:10px}}
/* Permit extra rows only when enlarged text or user spacing no longer fits. */
@media(max-width:767px){.hero[data-hero-projects] .hero-services>div{flex-wrap:wrap}.about-hero h1{flex-wrap:wrap}}

/* A percentage row gap does not reserve intrinsic height in the one-column case grid. */
@media(max-width:767px){.case-story{row-gap:55px}}

/* Keep the existing photograph and crop, with a stable blue reading layer. */
.contact-hero::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(3,43,62,.5);pointer-events:none}

/* Preserve the waves while protecting mobile text at their brightest position. */
@media(max-width:991px){
 .hero[data-hero-projects] .hero-background::after{background:linear-gradient(180deg,transparent 38%,rgba(3,43,62,.25) 58%,rgba(3,43,62,.25) 100%)}
 .hero[data-hero-projects] .hero-pill{background:rgba(3,43,62,.67)}
}

/* Narrow desktop windows can bring decorative artwork under the large closing title. */
@media(min-width:992px) and (max-width:1279px){.closing .floating-piece{filter:brightness(.65)}}

/* Manual motion preference follows the same static presentation as the OS preference. */
html:has(body.user-reduced-motion){scroll-behavior:auto}
body.user-reduced-motion *,body.user-reduced-motion *::before,body.user-reduced-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
body.user-reduced-motion [data-reveal],body.user-reduced-motion .motion-item-pending,body.user-reduced-motion .motion-single-pending,body.user-reduced-motion .reveal-line>span,body.user-reduced-motion .reveal-char{opacity:1!important;transform:none!important;animation:none!important}
body.user-reduced-motion .hero-bg{scale:1!important;transform:none!important}
body.user-reduced-motion .hero-wave-flow,body.user-reduced-motion .hero-project-float,body.user-reduced-motion .about-hero-image img{animation:none!important}
body.user-reduced-motion .hero-project-card{transition:none!important;translate:none!important}
body.user-reduced-motion .hero-project-frame,body.user-reduced-motion .hero-project-arrow{transition:none}
body.user-reduced-motion .marquee-track{animation:none!important;flex-wrap:wrap;justify-content:center;width:auto;gap:25px;padding-right:0}
body.user-reduced-motion .marquee-track>span[aria-hidden=true]{display:none}
body.user-reduced-motion .brand-marquee{mask-image:none}
body.user-reduced-motion.scroll-motion .studio-visual,body.user-reduced-motion.scroll-motion .closing{height:auto}
body.user-reduced-motion.scroll-motion .studio-stage,body.user-reduced-motion.scroll-motion .closing-stage{position:relative;height:auto;min-height:600px}
body.user-reduced-motion .studio-piece,body.user-reduced-motion .floating-piece{translate:none!important;scale:1!important}
body.user-reduced-motion .floating-piece{transform:none!important}
body.user-reduced-motion .button .button-word>span,body.user-reduced-motion .nav-contact .button-word>span,body.user-reduced-motion .button-icon>.arrow-icon{transform:none!important;transition:none!important}
body.user-reduced-motion .button-word>.word-back,body.user-reduced-motion .button-icon>.arrow-icon+ .arrow-icon{display:none}
body.user-reduced-motion .closing-copy>.button{transform:none!important;visibility:visible!important;pointer-events:auto!important}
body.user-reduced-motion .journal-callout{translate:none!important}
body.user-reduced-motion .home-archive-art img{transition:none}
body.user-reduced-motion .home-archive-card:is(:hover,:focus-visible) .home-archive-art img{transform:none}
body.user-reduced-motion .media-dialog::backdrop{animation:none!important}
@media(max-width:479px){body.user-reduced-motion .process-card{position:relative;top:auto}}
@media(prefers-reduced-motion:reduce){.brand-marquee{mask-image:none}}

/* Windows high contrast keeps native control colors and an explicit focus indicator. */
@media(forced-colors:active){
 :where(a,button,summary,input,textarea,select):focus-visible,.service-select input:focus-visible+span{outline:3px solid Highlight!important;outline-offset:3px;box-shadow:none!important}
 .project-form input:not([type=checkbox]),.project-form textarea,.service-select span{border-color:ButtonText}
 .service-select input:checked+span,.filter-bar button[aria-pressed=true]{border-color:Highlight;background:Highlight;color:HighlightText}
 .hero-project-controls button,.viewer-nav,.background-video-toggle{border-color:ButtonText}
 .motion-shortcut,.skip-link{background:Canvas;color:CanvasText}
}