/* TT21-003: keep focus geometry; use a high-contrast turquoise on light surfaces. */
:focus-visible{outline:3px solid #006c80;outline-offset:5px}
.hero-shell :focus-visible,.itps-feature :focus-visible,.site-footer :focus-visible,.is-dark :focus-visible,.dark :focus-visible,.operations-analytics :focus-visible,.project-inquiry :focus-visible{outline-color:#ffce70}
.brand img,.footer-brand img{aspect-ratio:7678 / 1362;object-fit:contain}
/* TT21-014: if the tiny head script is blocked/disabled, keep native links and Services available. */
@media(max-width:980px){
 html:not(.nav-ready) .site-header{flex-wrap:wrap}
 html:not(.nav-ready) .menu-toggle{display:none}
 html:not(.nav-ready) #navigation{display:flex;position:static;flex-direction:column;align-items:stretch;width:100%;max-height:none;overflow:visible;gap:5px}
 html:not(.nav-ready) .service-menu{position:static;width:auto;box-shadow:none}
 html:not(.nav-ready) .mobile-home{display:block}
}
/* TT21-004: same cover/position/crop, matching mobile density preload and shared decorative motifs. */
@media(max-width:700px){
 .hero-art,.corner-fold{background-image:image-set(url('/assets/hero-optimized-1152.webp') 1x,url('/assets/hero-optimized-1536.webp') 2x)}
 .closing-fold{background-image:linear-gradient(90deg,var(--navy),#031927aa 55%,#03192740),image-set(url('/assets/hero-optimized-1152.webp') 1x,url('/assets/hero-optimized-1536.webp') 2x)}
}

/* 024A: keep the height-limited mobile menu in one vertical column.
   Global nav flex-wrap:wrap must not create off-screen flex columns.
   Leave room for the existing 3px outline + 5px focus offset when scrolling. */
@media(max-width:980px){
 #navigation{flex-wrap:nowrap;scroll-padding-block:8px}
}

/* Below 700px, 100% is the positioned header height; keep the scrollport and focus inside short zoomed viewports. */
@media(max-width:700px){
 #navigation{max-height:min(70dvh,calc(100dvh - 100% - 8px))}
}