/* GENERATED by scripts/build-media-css.php from style.css — do not edit by hand.
   Every rule of the design that styles an <img> is repeated for .tti-m ( a <video> or a
   <picture> printed in a picture slot ), so either is laid out like the image it replaces. */
.tti-m{max-width:100%;display:block}
.logo .tti-m{height:46px;width:auto}
.tech-img .tti-m{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.8);transition:transform .7s var(--ease),filter .4s}
.tech:hover .tti-m{transform:scale(1.06);filter:none}
.p-proj .tti-m{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;margin-bottom:14px}
.who .tti-m{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:#12384a;display:grid;place-items:center;font:600 18px/1 var(--f-d);color:var(--cyan)}
.svc-view .tti-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.svc-view .tti-m.on{opacity:1;transform:none}
.proj-img .tti-m{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.proj:hover .proj-img .tti-m{transform:scale(1.05)}
.logos .tti-m{max-height:62px;width:auto;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.logos li:hover .tti-m{filter:none;opacity:1}
.foot .tti-m{height:48px;width:auto}
.mona-sign .tti-m{height:19px;width:auto;display:block}
.vid .tti-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .tti-m{filter:brightness(.45)}
@media (max-width:899px){
.logo .tti-m{height:34px}
}
.ph-media .tti-m{width:100%;height:100%;object-fit:cover}
.ph-tiles .tti-m{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid rgba(120,205,228,.3);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 40px rgba(70,177,206,.14);animation:drift 9s ease-in-out infinite}
.ph-tiles .tti-m:nth-child(even){margin-top:44px;animation-delay:-4.5s}
.ph-tiles.t3 .tti-m:first-child{grid-row:span 2;aspect-ratio:3/4;height:100%}
.ph-tiles.t3 .tti-m:nth-child(even){margin-top:0}
.ph-faces .tti-m{flex:none;width:clamp(110px,11.5vw,176px);height:clamp(110px,11.5vw,176px);object-fit:cover;border-radius:50%;margin-left:-26px;filter:grayscale(.5);box-shadow:0 0 0 4px var(--bg),0 0 0 5px rgba(120,205,228,.55),0 0 44px rgba(70,177,206,.35);animation:drift 8s ease-in-out infinite}
.ph-faces .tti-m:nth-child(2n){margin-top:58px;animation-delay:-2.6s}
.ph-faces .tti-m:nth-child(3n){animation-delay:-5.2s}
.doc-sec figure .tti-m{width:100%;aspect-ratio:5/4;object-fit:cover}
.person .tti-m{width:150px;height:150px;object-fit:cover;border-radius:50%;filter:grayscale(.6);transition:filter .4s;box-shadow:0 0 0 4px var(--t-card),0 0 0 5px var(--t-accent)}
.person:hover .tti-m{filter:none}
.row-link .tti-m{width:240px;aspect-ratio:16/10;object-fit:cover;border-radius:6px}
.vbox .tti-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.side figure .tti-m{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.mini .tti-m{width:84px;height:60px;object-fit:cover;border-radius:4px}
.card-img .tti-m{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card-img .tti-m{transform:scale(1.05)}
@media (max-width:1180px){
.person .tti-m{width:120px;height:120px}
}
@media (max-width:1099px){
.ph-video .ph-media .tti-m{position:absolute;inset:0;z-index:-1}
.ph-tiles .tti-m,.ph-tiles.t3 .tti-m:first-child{aspect-ratio:1;height:auto;grid-row:auto;margin-top:0!important;animation:none}
.ph-faces .tti-m{width:19vw;height:19vw;margin-left:-3vw;margin-top:0!important;animation:none}
.ph-faces .tti-m:first-child{margin-left:0}
}
@media (max-width:899px){
.row-link .tti-m{display:none}
.person .tti-m{width:96px;height:96px}
}
.proj-rail .tti-m{-webkit-user-drag:none;user-select:none}
.cover-img .tti-m{width:100%;height:100%;object-fit:cover}
figure.wide .tti-m{width:100%;aspect-ratio:21/8;object-fit:cover}
@media (max-width:899px){
figure.wide .tti-m{aspect-ratio:16/10}
}
.person .tti-m{box-shadow:0 0 0 4px var(--t-bg),0 0 0 5px var(--t-accent)}
.person .tti-m{box-shadow:0 0 0 4px var(--t-ring),0 0 0 5px var(--t-accent)}
.orb>.tti-m{width:100%;height:100%;object-fit:cover}
.mosaic .tti-m,.pano .tti-m,.strip .tti-m,.shot .tti-m{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:18px;border:1px solid var(--g-line);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.mosaic .tti-m:first-child{grid-row:span 2;border-radius:18px 18px 18px 90px}
.mosaic .tti-m:nth-child(2){border-radius:18px 90px 18px 18px}
.strip .tti-m{aspect-ratio:4/3;height:auto}
.strip .tti-m:nth-child(even){translate:0 24px}
.orbpic>.tti-m:first-child{width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1px rgba(170,220,255,.5),0 0 70px rgba(40,120,235,.5)}
.scard>.tti-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.scard:hover>.tti-m{transform:scale(1.06)}
.pcard>.tti-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.pcard:hover>.tti-m{transform:scale(1.06)}
.nextpic>.tti-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.nextpic:hover>.tti-m{transform:scale(1.05)}
.lead-wide .tti-m{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.lead-port .tti-m{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover;object-position:top}
.crew .tti-m{flex:none;width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #06162b,0 0 0 5px var(--teal),0 0 34px rgba(92,227,208,.35)}
@media (max-width:899px){
.mosaic .tti-m:first-child{border-radius:18px 18px 18px 60px}
.mosaic .tti-m:nth-child(2){border-radius:18px 60px 18px 18px}
.pano .tti-m{aspect-ratio:4/3;height:auto}
.pano .tti-m:first-child{grid-column:span 2;aspect-ratio:16/9}
.strip .tti-m:nth-child(even){translate:none}
}
.sub .ph-tiles .tti-m{border-radius:18px;border-color:var(--g-line)}
.ph-arch>.tti-m:first-child{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 0 0;border:1px solid rgba(170,220,255,.5);border-bottom:0;box-shadow:0 0 90px rgba(40,120,235,.5)}
.sub .ph .ph-pano>.tti-m{max-width:none;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:22px 22px 0 0;border:1px solid var(--g-line);border-bottom:0}
.sub .ph .ph-pano>.tti-m:nth-child(2){margin-top:34px;height:calc(100% - 34px)}
.sub .ph .ph-pano>.tti-m:nth-child(3){margin-top:68px;height:calc(100% - 68px)}
.ph-bg .tti-m{width:100%;height:100%;object-fit:cover}
.ph-const .tti-m{position:absolute;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #06162b;box-shadow:0 0 0 1px var(--teal),0 0 34px rgba(92,227,208,.4);animation:drift 9s ease-in-out infinite}
@media (max-width:899px){
.sub .ph .ph-pano>.tti-m{aspect-ratio:4/3;height:auto!important;margin-top:0!important;border-radius:18px;border-bottom:1px solid var(--g-line)}
.sub .ph .ph-pano>.tti-m:first-child{grid-column:span 2;aspect-ratio:16/9}
.sub .ph .ph-pano>.tti-m:nth-child(n+2){border-radius:18px 18px 0 0;border-bottom:0}
}
@media (max-width:1099px){
.ph-arch>.tti-m:first-child{border-radius:999px;border-bottom:1px solid rgba(170,220,255,.5)}
}
.level .shot .tti-m{position:absolute;inset:0}
@media (max-width:899px){
.pano.two .tti-m,.pano.two .tti-m:first-child{grid-column:auto;aspect-ratio:16/10}
}
@media (prefers-reduced-motion:no-preference){
.ph-bg .tti-m,.cover-img .tti-m{scale:1.14;will-change:translate}
}
.ph-video>.tti-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film>.tti-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the <img> inside a <picture class="tti-m"> fills the box the rule above gave the picture */
picture.tti-m{display:block;overflow:hidden}
picture.tti-m>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;margin:0;translate:none;box-shadow:none;border:0}
video.tti-m{display:block;object-fit:cover}