@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   MOBILE NAV DRAWER: the panel behind .nav-mobile-toggle.
   Built at runtime from the existing .nav-center items and
   their .mega-panel contents, so it never needs to be kept
   in sync by hand. Shown only below the 1100px breakpoint,
   where the desktop nav items are display:none.
   Chevrons are CSS borders, not .ti icons, so the drawer
   works on every page regardless of its icon subset.
══════════════════════════════════════════════════════════ */
.mnav-scrim {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 998;
    background: rgba(1,22,40,0.55);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mnav-scrim.open { opacity: 1; visibility: visible; }

.mnav {
    position: fixed; top: var(--nav-h); right: 0; z-index: 999;
    width: min(400px, 100%); height: calc(100% - var(--nav-h));
    background: #011628;
    border-left: 1px solid rgba(95,153,187,0.18);
    font-family: 'Lato', sans-serif;
    padding: 14px 0 48px;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
.mnav.open { transform: translateX(0); }

/* Keep the nav bar opaque while the drawer is open, otherwise the
   transparent at-top nav leaves a strip of hero above the panel. */
.site-nav.mnav-open .nav-bar::before { opacity: 1; }

/* Hamburger morphs to a cross (spans are 2px tall with a 5px gap). */
.nav-mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav-cta { display: flex; flex-direction: column; gap: 10px; padding: 4px 22px 18px; }
.mnav-cta button {
    width: 100%; padding: 14px 20px; border-radius: 30px; border: none; cursor: pointer;
    font-family: 'Lato', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.mnav-cta .mnav-demo { background: var(--orange); color: #fff; }
.mnav-cta .mnav-contact { background: rgba(95,153,187,0.12); color: #fff; border: 1px solid rgba(95,153,187,0.35); }

.mnav-sec { border-top: 1px solid rgba(95,153,187,0.12); }
.mnav-sec:last-of-type { border-bottom: 1px solid rgba(95,153,187,0.12); }
.mnav-row { display: flex; align-items: stretch; }
.mnav-row > a, .mnav-row > button.mnav-label {
    flex: 1; display: flex; align-items: center; min-height: 54px;
    padding: 14px 8px 14px 22px; background: none; border: none; text-align: left; cursor: pointer;
    font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700; color: #fff;
}
.mnav-row > a.on { color: var(--orange); }
.mnav-exp {
    width: 58px; flex-shrink: 0; background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: rgba(173,221,246,0.75); -webkit-tap-highlight-color: transparent;
}
.mnav-exp::before {
    content: ''; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.22s ease;
}
.mnav-sec.open .mnav-exp::before { transform: translateY(2px) rotate(-135deg); }
.mnav-sec.open .mnav-exp { color: var(--orange); }

.mnav-sub { display: none; padding: 0 22px 14px; }
.mnav-sec.open .mnav-sub { display: block; }
.mnav-grp {
    font-size: 0.6rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--orange); margin: 14px 0 4px;
}
/* Entries with no destination are styled exactly like the linked ones, so the
   list reads as one column. The direct-child span keeps this off the language
   grid and off each row's own inner label span. */
.mnav-sub a, .mnav-sub > span {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0;
    font-size: 0.86rem; font-weight: 400; color: rgba(255,255,255,0.82); line-height: 1.35;
}
.mnav-sub .ti { font-size: 0.95rem; color: var(--airforce); flex-shrink: 0; }
/* The social entries carry an inline <svg> brand mark rather than a .ti mask. */
.mnav-sub a > svg, .mnav-sub > span > svg {
    width: 15px; height: 15px; color: var(--airforce); flex-shrink: 0;
}

.mnav-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding-top: 6px; }
.mnav-langs span {
    display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 8px;
    font-size: 0.85rem; color: rgba(255,255,255,0.82); cursor: pointer;
}
.mnav-langs span.active { color: #fff; font-weight: 700; background: rgba(95,153,187,0.18); }

/* The floating dock sits at z-index 1200, so it would otherwise print over
   the open drawer. */
body.mnav-open .fab-dock { display: none; }

/* ── Mobile nav bar ────────────────────────────────────────
   Contact Us and Search stay in the bar below 1100px, next to the
   hamburger. Measured at 375px the full row wants 414px against a
   375px screen, so on small screens the search collapses to just its
   magnifier and expands again on focus. Contact Us steps aside while
   the field is focused so the expanded box has somewhere to go.
─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    /* The magnifier becomes a button: focusing it opens the full-width
       search panel, which carries a proper field, so the bar itself does
       not need to hold a usable text box. */
    .nav-search-input { width: 34px; padding-right: 4px; cursor: pointer; }
    .nav-search-input::placeholder { color: transparent; }
}
@media (max-width: 400px) {
    .nav-right .cta-btn-secondary { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 360px) {
    /* Last squeeze so Contact Us AND Search both survive down to 320px:
       310px of content against a 320px screen. */
    .nav-logo img.nav-logo-s2c { display: none; }
    .nav-right .cta-btn-secondary { font-size: 0.62rem; padding-left: 6px; padding-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .mnav, .mnav-scrim, .mnav-exp::before, .nav-mobile-toggle span { transition: none; }
}
@media (min-width: 1101px) {
    .mnav, .mnav-scrim { display: none !important; }
}

/* Footer legal links wrap onto a second line on narrow screens instead of pushing the page sideways (#17) */
.footer-legal { flex-wrap: wrap; row-gap: 10px; }

/* Blog article column may shrink below its longest word/link, so posts never push the page wider than a phone (#17) */
.article-main { min-width: 0; }

/* Feature text/image blocks may shrink to the screen on phones instead of holding the column open (#17) */
.feature-grid > * { min-width: 0; }

/* Form/brochure sidebar headings: lines kept together on desktop may wrap on narrow phones (#17) */
@media (max-width: 480px) { .sidebar-heading span[style*="nowrap"] { white-space: normal !important; } }

/* Visible keyboard focus on every page (#23). Shown only when navigating by keyboard (:focus-visible),
   and !important so it wins over the older "outline: none" rules on inputs, buttons and links. */
:focus-visible { outline: 3px solid #E6532B !important; outline-offset: 2px !important; }
/* the Notes panel's typing area has its own panel frame: no orange ring when you click in to type */
.np-textarea:focus, .np-textarea:focus-visible { outline: none !important; }

/* Skip link (#24): first thing a keyboard user reaches; hidden until focused, then jumps to <main id="content"> */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 10001; background: #02263F; color: #fff; padding: 10px 18px; border-radius: 8px; font: 700 15px/1.2 Lato, Arial, sans-serif; text-decoration: none; box-shadow: 0 4px 16px rgba(2,38,63,0.35); transition: top 0.15s ease; }
.skip-link:focus { top: 12px; }
#content:focus, #content:focus-visible { outline: none !important; }   /* the content area itself gets no ring when the skip link moves focus to it */

/* Tile background pictures load when their group comes near the screen (#10). A page marks the group with
   class "bg-wait" and adds "js-lazybg" to <html>; a small script removes "bg-wait" when the group is about a
   screen away. Without JavaScript, js-lazybg is never set, so nothing is held back. */
html.js-lazybg .bg-wait, html.js-lazybg .bg-wait * { --card-img: none !important; --shot: none !important; }