/* One project collection above the supporting category descriptions. */
.ux-page .ux-experience-hero{padding-bottom:40px;border-bottom:0}
.ux-project-reel{padding:0 0 64px;background:#f2f7f9}
.ux-project-reel__head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.ux-page .ux-project-reel__head h2{margin:0;font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.2;color:#0e3548}
.ux-project-reel__controls{display:flex;flex:none;gap:8px}
.ux-project-reel__controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #bdcfd7;border-radius:50%;background:transparent;color:#0e3548;cursor:pointer;font:400 1.3rem/1 system-ui,sans-serif}
.ux-project-reel__controls button:hover{background:#0e3548;border-color:#0e3548;color:#fff}
.ux-project-reel__controls svg{width:19px;height:19px;fill:currentColor}
.ux-reel-play,[data-paused="true"] .ux-reel-pause{display:none}
[data-paused="true"] .ux-reel-play{display:block}
.ux-project-reel__track{display:flex;gap:20px;padding:4px max(20px,calc((100% - var(--max)) / 2)) 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,calc((100% - var(--max)) / 2));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ux-project-reel__track::-webkit-scrollbar{display:none}
.ux-project-reel__track{overflow-anchor:none}
.ux-project-reel__card{position:relative;isolation:isolate;flex:0 0 clamp(340px,35vw,520px);aspect-ratio:1.6;display:block;overflow:hidden;scroll-snap-align:start;padding:0;border:0;border-radius:5px;background:#0e3548;color:#fff;font:inherit;text-align:left;cursor:pointer}
.ux-project-reel__card::after{content:"";position:absolute;inset:28% 0 0;background:linear-gradient(transparent,rgba(0,12,20,.9));pointer-events:none}
.ux-project-reel__card img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.ux-project-reel__card--panorama img{object-fit:contain;object-position:center 28%}
.ux-project-reel__card:hover img{opacity:.9}
.ux-project-reel__caption{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;text-shadow:0 1px 6px #071b26}
.ux-project-reel__location{display:block;margin-bottom:6px;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#e2edf2}
.ux-project-reel__caption strong{display:block;font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.2;letter-spacing:-.015em}
.ux-project-reel__caption small{display:block;margin-top:8px;font-size:.62rem;line-height:1.4;color:#d0e0e9}
.ux-project-reel__card:focus-visible,.ux-project-reel__controls button:focus-visible{outline:3px solid #bc351f;outline-offset:3px}
.ux-project-reel__track:focus-visible{outline:2px solid #bc351f;outline-offset:-2px}
@media(max-width:680px){
 .ux-page .ux-experience-hero{padding-bottom:28px}
 .ux-project-reel{padding-bottom:40px}
 .ux-project-reel__head{gap:16px;align-items:flex-end;margin-bottom:16px}
 .ux-project-reel__controls{gap:4px}
 .ux-project-reel__controls button{width:44px;height:44px;border-radius:4px}
 .ux-project-reel__track{gap:12px}
 .ux-project-reel__card{flex-basis:84vw;aspect-ratio:1.4}
 .ux-project-reel__caption{left:20px;right:20px;bottom:20px}
}
@media(prefers-reduced-motion:reduce){.ux-project-reel__card img{transition:none}}
.ux-page .ux-experience-categories{background:#f3f6f7}
.ux-page .project-grid{gap:24px;border:0}
.ux-page .project-grid article{padding:28px;border:1px solid #d0dce2;border-top:3px solid #0e3548;border-radius:5px;background:#fff;box-shadow:0 3px 12px rgb(14 53 72 / .035)}
.ux-project-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.ux-project-card-head>span{flex:none;color:var(--orange-dark);font-size:.75rem;font-weight:800;letter-spacing:.08em}
.ux-page .project-grid h2{margin:0 0 16px;font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.2;text-wrap:balance}
.ux-page .project-grid p{margin:0;color:#48616e;line-height:1.65}
@media(min-width:681px){.ux-page .project-grid h2{min-height:2.4em}}
@media(max-width:680px){.ux-page .project-grid{gap:16px}.ux-page .project-grid article{padding:24px}.ux-project-card-head{margin-bottom:20px}}
@media(max-width:360px){.ux-page .project-grid article{padding:20px}}
html:has(.ux-project-example){scrollbar-gutter:stable}
html:has(.ux-project-example.is-expanded){scrollbar-gutter:auto}
html.ux-project-dialog-open{overflow:hidden}
.ux-project-example{--gallery-bg:#092533;--gallery-line:#365461;--gallery-text:#eef4f6;width:min(1360px,calc(100vw - 48px));height:min(760px,calc(100dvh - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid #365461;border-radius:8px;background:var(--gallery-bg);color:var(--gallery-text);box-shadow:0 24px 80px rgb(0 0 0 / .45);overflow:hidden}
.ux-project-example[open]{display:block}
.ux-project-example::backdrop{background:rgb(3 13 19 / .85)}
.ux-project-example [hidden]{display:none!important}
.ux-project-frame{height:100%;width:100%;display:flex;flex-direction:column;background:#092533;color:#eef4f6;--image-width:70%}
.ux-project-example__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 24px;border-bottom:1px solid #365461;background:#0b2c3c}
.ux-project-example__bar p{min-width:0;margin:0;font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.2;letter-spacing:-.015em;font-weight:700;color:#eef4f6;text-wrap:balance}
.ux-project-example__bar p:focus{outline:none}
.ux-project-orientation-hint{display:none;flex:none;margin:0;padding:9px 16px;background:#0b2c3c;color:#b8cbd4;font-size:.75rem;line-height:1.5;border-bottom:1px solid #365461}
.ux-project-orientation-hint svg{display:inline-block;vertical-align:-3px;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(max-width:680px) and (orientation:portrait){.ux-project-orientation-hint{display:block}.ux-project-example.is-expanded .ux-project-orientation-hint{display:none}}
.ux-project-close{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid #66818e;border-radius:4px;background:transparent;color:#fff;font:inherit;font-size:.875rem;cursor:pointer}
.ux-project-close span{font-size:1.4rem;line-height:1}
[data-project-carousel]{display:flex;flex-direction:column;flex:1;min-height:0}
.ux-project-stage{position:relative;flex:1;min-height:0;overflow:hidden}
[data-project-slides]{height:100%;overflow:hidden}
.ux-project-example__body{display:grid;grid-template-columns:7fr 3fr;align-items:stretch;height:100%;min-height:0}
.ux-project-example figure{position:relative;margin:0;min-width:0;min-height:0;background:#061d28;overflow:hidden}
.ux-project-example figure::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,12,20,.86));pointer-events:none}
.ux-project-example img{display:block;width:100%;height:100%;object-fit:cover}
/* Panorama motion uses its own five-second pass, separate from the slide timer. */
@keyframes ux-project-pan{from{object-position:0% 50%}to{object-position:100% 50%}}
.ux-project-example.has-panorama:not(.is-expanded) [data-project-slide]:not([hidden]) img{animation:ux-project-pan 5s linear infinite alternate;animation-play-state:paused}
.ux-project-example.has-panorama:not(.is-expanded) .ux-project-frame[data-playing="true"] [data-project-slide]:not([hidden]) img{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.ux-project-example.has-panorama:not(.is-expanded) [data-project-slide]:not([hidden]) img{animation:none;object-position:50% 50%}}
.ux-project-image-caption{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;pointer-events:none;text-shadow:0 1px 6px #071b26}
.ux-project-image-caption .eyebrow{margin:0 0 6px;color:#e2edf2;font-size:.65rem;letter-spacing:.1em}
.ux-page .ux-project-image-caption h2{margin:0;color:#fff;font-size:clamp(1.05rem,1.8vw,1.45rem);line-height:1.2;max-width:470px}
.ux-project-image-caption small{display:block;margin-top:8px;color:#d0e0e9;font-size:.62rem;line-height:1.4}
.ux-project-example__copy{align-self:stretch;display:flex;flex-direction:column;gap:28px;padding:clamp(24px,2.3vw,36px);font-size:clamp(1.2rem,1.55vw,1.4rem);line-height:1.5;min-width:0;min-height:0;max-height:100%;overflow:auto}
.ux-project-summary,.ux-project-details{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
.ux-project-summary p:last-child{margin-bottom:0}
.ux-project-details .ux-project-example__facts{margin-bottom:0}
.ux-project-example__copy p{margin:0 0 16px;color:#d7e4ea}
.ux-project-example__facts{font-weight:700;padding-top:16px;border-top:1px solid #365461}
.ux-project-example__copy .ux-project-example__caption{margin:20px 0 0;font-size:.75rem;color:#b8cbd4}
.ux-project-example__caption a{color:#cce7f4;text-underline-offset:3px}
.ux-project-toggle{position:absolute;left:0;top:0;width:var(--image-width);height:100%;z-index:1;border:0;padding:0;background:transparent;color:#fff;cursor:pointer}
.ux-project-toggle__shade{position:absolute;inset:0;background:rgb(0 0 0 / .3);opacity:0}
.ux-project-toggle__badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 5px rgb(0 0 0 / .75))}
.ux-project-toggle__badge svg{width:36px;height:36px;fill:currentColor}
.ux-project-toggle .ux-project-play-icon{display:none}
.ux-project-toggle[data-paused="true"] .ux-project-pause-icon{display:none}
.ux-project-toggle[data-paused="true"] .ux-project-play-icon{display:block}
.ux-project-toggle:focus-visible{outline:3px solid #ff9a7c;outline-offset:-4px}
.ux-project-toggle:focus-visible .ux-project-toggle__shade,.ux-project-toggle:focus-visible .ux-project-toggle__badge,.ux-project-toggle[data-paused="true"] .ux-project-toggle__badge{opacity:1}
@media(hover:hover){.ux-project-toggle:hover .ux-project-toggle__shade,.ux-project-toggle:hover .ux-project-toggle__badge{opacity:1}}
.ux-project-arrow,.ux-project-expand{position:absolute;z-index:4;width:44px;height:44px;border:1px solid #95aab4;border-radius:4px;background:rgb(3 18 25 / .78);color:#fff;cursor:pointer}
.ux-project-arrow{top:50%;transform:translateY(-50%);font:300 2rem/1 system-ui,sans-serif}
.ux-project-arrow--prev{left:12px}
.ux-project-arrow--next{left:calc(var(--image-width) - 56px)}
.ux-project-expand{top:12px;left:calc(var(--image-width) - 56px);padding:10px}
.ux-project-expand svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.ux-project-expand .ux-project-collapse-icon{display:none}
.ux-project-expand[aria-expanded="true"] .ux-project-expand-icon{display:none}
.ux-project-expand[aria-expanded="true"] .ux-project-collapse-icon{display:block}
.ux-project-arrow:hover,.ux-project-expand:hover,.ux-project-close:hover{background:#214858}
.ux-project-arrow:focus-visible,.ux-project-expand:focus-visible,.ux-project-close:focus-visible{outline:3px solid #ff9a7c;outline-offset:3px}
.ux-project-photo-error{padding:24px;color:#d7e4ea;font-size:.875rem}
.ux-project-example.is-expanded{width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
.ux-project-example.is-expanded .ux-project-frame{--image-width:100%}
.ux-project-example.is-expanded .ux-project-example__body{grid-template-columns:1fr;grid-template-rows:1fr}
.ux-project-example.is-expanded .ux-project-example__copy{display:none}
.ux-project-example.is-expanded img{object-fit:contain}
.ux-project-frame:fullscreen{width:100vw!important;height:100dvh!important;background:#061d28}
.ux-project-frame:fullscreen::backdrop{background:#061d28}
@media(max-width:900px){
 .ux-project-example{width:calc(100vw - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px)}
 .ux-project-frame{--image-width:100%;--image-height:min(38dvh,320px,calc((100vw - 22px) * .625))}
 .ux-project-example__bar{gap:16px;padding:12px 16px}
 .ux-project-example__bar p{font-size:clamp(1.05rem,4.5vw,1.5rem);letter-spacing:-.01em}
 .ux-project-example__body{grid-template-columns:1fr;grid-template-rows:var(--image-height) minmax(0,1fr)}
 .ux-project-example__copy{align-self:stretch;padding:24px}
 .ux-project-toggle{height:var(--image-height)}
 .ux-project-image-caption{left:20px;right:20px;bottom:16px}
 .ux-project-arrow{top:calc(var(--image-height) / 2)}
 .ux-project-example.is-expanded .ux-project-toggle{height:100%}
 .ux-project-example.is-expanded .ux-project-arrow{top:50%}
 .ux-project-example.is-expanded{width:100vw;height:100dvh;max-height:100dvh}
}
@media(max-width:900px) and (max-height:500px){
 .ux-project-expand{left:calc(var(--image-width) - 112px)}
}