/* Site-wide responsive safety layer. Loaded last on every page. */
html{width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;min-width:0;overflow-x:clip}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
main,header,footer,section,.wrap{min-width:0}
.wrap{width:min(1180px,calc(100% - 40px));max-width:100%}
.nav>*,
[class*="-grid"]>*,
[class*="-layout"]>*,
.intro-grid>*,
.cards>*,
.steps>*,
.footer-grid>*{min-width:0}
h1,h2,h3,h4,p,a,span,strong,address{overflow-wrap:break-word}

/* Fix the primary logo and menu to the viewport after the top strip scrolls away. */
.site-header{
  position:relative;
  z-index:1000;
  isolation:isolate;
}
.site-header.is-fixed{
  position:fixed;
  inset:0 0 auto;
  width:100%;
  box-shadow:0 4px 16px rgba(7,29,53,.08);
}
.site-header.is-fixed+main{padding-top:var(--fixed-header-height,92px)}
.site-header .drop{z-index:1001}

/* The anniversary badge needs a little more room than the original header. */
@media(max-width:1180px){
  .site-header .nav-cta{display:none}
  .site-header .menu-toggle{display:block}
  .site-header .nav-links{
    display:none;
    position:fixed;
    z-index:60;
    inset:92px 0 auto;
    width:100%;
    height:calc(100dvh - 92px);
    overflow:auto;
    overscroll-behavior:contain;
    background:#fff;
    padding:16px clamp(20px,5vw,54px) 60px;
    box-shadow:var(--shadow);
  }
  .site-header .nav-links.open{display:block}
  .site-header .nav-link{
    padding:13px 4px;
    border-bottom:1px solid var(--line);
    font-size:.92rem;
  }
  .site-header .drop{
    display:none;
    position:static;
    width:auto;
    max-height:none;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:0;
    padding:4px 0 8px 12px;
  }
  .site-header .nav-group.open .drop{display:block}
}

@media(max-width:860px){
  .site-header .nav-links{inset-block-start:92px}
}

@media(max-width:640px){
  .wrap{width:calc(100% - 28px)}
  .topbar{display:none}
  .site-header{height:78px}
  .site-header .nav{gap:10px}
  .site-header .brand img{width:140px;height:66px}
  .site-header .anniversary-logo{width:48px;height:56px}
  .site-header .nav-links{
    inset-block-start:78px;
    height:calc(100dvh - 78px);
    padding-inline:14px;
  }
  .site-header.is-fixed+main{padding-top:78px}
  .btn,.nav-cta{white-space:normal;text-align:center}
  .actions,.form-actions,.buttons{flex-wrap:wrap}
  .page-hero h1,h1{overflow-wrap:anywhere}
  .kicker,[class$="-kicker"]{flex-wrap:wrap;line-height:1.5}
  .map-image-wrap{overflow:hidden!important;padding-bottom:0!important}
  .map-image-wrap img{width:100%!important;max-width:100%!important;height:auto!important}
  .map-scroll-note{display:none!important}
  .contact-panel,.contact-form,.value-panel,.fact-card{padding-inline:clamp(20px,6vw,32px)}
}

@media(max-width:380px){
  .wrap{width:calc(100% - 22px)}
  .site-header .brand img{width:118px}
  .site-header .anniversary-logo{width:42px;height:50px}
  .site-header .menu-toggle{padding:6px}
  .site-header .menu-toggle i{width:22px}
  .form-grid{grid-template-columns:1fr!important}
  .field.full{grid-column:auto}
  h1,.page-hero h1,[class$="-hero"] h1{
    max-width:100%;
    font-size:clamp(2rem,11vw,2.5rem)!important;
    line-height:1.08!important;
    letter-spacing:-.04em!important;
  }
  [class$="-hero"] p,.hero-lead{font-size:.96rem!important}
  .kicker,[class$="-kicker"]{font-size:.65rem;letter-spacing:.11em}
  .crumbs,[class$="-crumbs"]{font-size:.68rem;line-height:1.55}
}

/* Avoid fixed hero heights clipping content on short landscape screens. */
@media(max-height:560px) and (orientation:landscape){
  .page-hero,
  [class$="-hero"]{min-height:calc(100dvh - 78px);height:auto}
  .hero-content,
  [class$="-hero-grid"]{padding-block:42px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Cyber security hero: keep the security architecture visible beside the copy. */
.cyber-hero:before{
  background:
    linear-gradient(90deg,rgba(3,18,34,.97) 0%,rgba(3,18,34,.86) 38%,rgba(3,18,34,.38) 62%,rgba(3,18,34,.08) 100%),
    url('cyber-security-hero.png') center/cover;
}
@media(max-width:700px){
  .cyber-hero:before{
    background:
      linear-gradient(90deg,rgba(3,18,34,.92),rgba(3,18,34,.72)),
      url('cyber-security-hero.png') 62% center/cover;
  }
}