/* Shared portfolio presentation: royal navy, quiet patterns, readable case studies. */
.em-hero,.listing-hero.dark,.case-hero.dark{background:radial-gradient(ellipse at 88% 12%,#08417865,transparent 55%),linear-gradient(135deg,#030922,#082254);color:#f4f8ff}
.em-hero:before{opacity:.19}.em-hero:after{opacity:.07}.em-hero .em-layout{gap:48px}.em-hero .em-preview{aspect-ratio:16/9}.em-hero .em-description{max-width:540px}.em-showcase-heading{margin-bottom:14px}
.work-filters{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 12px}.work-filters[hidden],[data-work-sector][hidden]{display:none!important}.work-filters button{min-height:44px;padding:9px 20px;border:1px solid #c7d2e3;border-radius:30px;background:#fff;color:#283e60;font:600 14px/1.5 Cairo,Arial,sans-serif;cursor:pointer;transition:background .15s,color .15s}.work-filters button[aria-pressed=true]{color:#fff;background:#092656;border-color:#092656}.work-filters button:hover{border-color:#235ec0}.work-filters button:focus-visible{outline:3px solid #2475ff;outline-offset:3px}.work-filter-status{min-height:22px;margin:0 0 20px;font-size:13px;color:#536781}.work-filter-status:empty{display:none}.selected-work-label{font-size:14px;color:#aad8ec;border-inline-start:2px solid #70d7e9;padding-inline-start:18px;white-space:nowrap}.selected-work-intro{font-size:15px;color:#536781;margin:0 0 36px}.listing-top{align-items:center;gap:28px}.listing-hero{padding-block:46px!important}.listing-page{padding-top:28px!important}
.project-grid{gap:32px 24px}.project-visual{aspect-ratio:16/10!important;border-radius:14px!important;overflow:hidden;background:#081b3d}.project-visual img{width:100%;height:100%;object-fit:contain!important;transition:transform .25s}.project-card:hover .project-visual img{transform:scale(1.025)}.project-info{align-items:start!important}.project-info h3{font-size:21px;line-height:1.55}.project-summary{line-height:1.85;color:#536781}.project-details{padding-top:18px}.portfolio-group{margin-bottom:52px}.portfolio-group-head{margin-bottom:24px}.portfolio-group-index{opacity:.4}.em-work-note{margin-top:28px}
.case-hero{padding-block:32px 36px!important}.case-title-grid{gap:22px!important;margin-block:22px!important}.case-title-grid h1{font-size:clamp(30px,3.4vw,52px)!important;line-height:1.5}.case-hero dl{margin-top:24px!important;padding-top:20px!important}.case-visual-wrap{margin-top:28px!important}.case-visual{max-height:620px}.case-visual .case-cover{object-fit:contain!important;max-height:620px}.case-content{gap:50px!important;padding-block:48px!important}.story-pair{gap:28px}.story-pair p{line-height:2}.project-aside{align-self:start}.aside-contact{background:#eaf0fa;border:1px solid #d5dfef;border-radius:14px;padding:24px!important}.aside-contact a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;color:#144cad}.gallery{padding-block:48px!important}.gallery-grid{grid-template-columns:1fr!important;max-width:1080px;margin-inline:auto;gap:32px!important}.gallery-item{margin:0;border:1px solid #d6dfed;border-radius:16px;overflow:hidden;background:#fff}.gallery-item>a{display:block;aspect-ratio:auto!important;max-height:none!important}.gallery-item img{width:100%;height:auto!important;max-height:720px;object-fit:contain!important;background:#091c3d}.gallery-item figcaption{padding:16px 22px!important;font-size:16px;line-height:1.8;color:#233c60}.related{padding-block:48px!important}
@media(max-width:760px){.em-hero .em-layout{gap:36px}.listing-top{flex-direction:column;align-items:flex-start}.selected-work-label{font-size:12px}.listing-hero{padding-block:26px!important}.work-filters{gap:8px}.work-filters button{font-size:12px;padding:9px 14px}.portfolio-group-head h2{font-size:22px}.case-hero{padding-block:22px 26px!important}.case-title-grid{margin-block:16px!important}.case-title-grid h1{font-size:30px!important}.case-hero dl{gap:18px!important}.case-content{gap:28px!important;padding-block:32px!important}.gallery{padding-block:30px!important}.gallery-item figcaption{font-size:14px;padding:14px 16px!important}.project-info h3{font-size:20px}.gallery-grid{gap:24px!important}.selected-work-intro{font-size:14px}}
@media(prefers-reduced-motion:reduce){.work-filters button,.project-visual img{transition:none}.project-card:hover .project-visual img{transform:none}}
/* Show the entire source image, with project information layered over its lower edge. */
.em-hero .em-project{position:relative;isolation:isolate;width:100%}
.em-hero .em-preview,.em-hero .em-preview.em-preview-slide{width:100%;height:auto;aspect-ratio:auto;min-height:0;border:0;background:#05102b}
.em-hero .em-preview img{display:block;width:100%;max-width:none;height:auto;object-fit:contain;object-position:center;transform:none!important}
.em-hero .em-project-caption{position:absolute;inset:auto 0 0;z-index:1;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:14px;min-height:0;padding:44px 20px 16px;background:linear-gradient(0deg,rgba(2,9,29,.98),rgba(2,9,29,.86) 52%,transparent);text-shadow:0 1px 8px #0008}
.em-hero .em-project-caption>div{min-width:0}
.em-hero .em-project-caption strong{font-size:16px;line-height:1.5}
.em-hero .em-project-caption p{font-size:12px;line-height:1.6;color:#d3e1f5;margin:4px 0 0}
.em-hero .em-project-caption .em-project-link{min-height:32px;flex:none;font-size:12px}
@media(max-width:540px){.em-hero .em-project-caption{padding:30px 12px 10px;gap:8px}.em-hero .em-project-caption strong{font-size:13px}.em-hero .em-project-caption p{font-size:10px;line-height:1.5;margin-top:2px}.em-hero .em-project-caption .em-project-link{font-size:10px;gap:3px}.em-hero .em-project-link svg{width:14px;height:14px}}
html[lang] .em-hero .em-project-caption{flex-direction:row;align-items:flex-end;min-height:0}
/* A stable slide frame prevents tall screenshots from resizing the hero. */
html[lang] .em-hero .em-preview{position:relative;width:100%;height:auto;aspect-ratio:16/10;overflow:hidden;background:#05102b}
html[lang] .em-hero .em-preview img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;transform:none!important}
/* Hero thumbnails fill the frame; long pages are cropped below the first screen. */
html[lang] .em-hero .em-preview img{object-fit:cover;object-position:center top}
/* Match landscape presentations; only full-page app screenshots use cover cropping. */
html[lang] .em-hero .em-preview{aspect-ratio:16/9}
html[lang] .em-hero .em-preview.em-preview-slide img{object-fit:contain;object-position:center}

/* Full-page screenshots preview one desktop window at readable full width. */
.gallery-item:has(img.window-crop)>a,
.case-visual:has(img.window-crop){position:relative;display:block;aspect-ratio:16/10!important;height:auto!important;max-height:none!important;overflow:hidden}
.gallery-item img.window-crop,
.case-visual img.window-crop{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center top!important}
.project-visual img.window-crop{object-fit:cover!important;object-position:center top!important}
