/* Dxvion production polish — accessibility, resilience and utility pages */

/* Keep content visible without JavaScript; animate only when JS is active. */
.animate{opacity:1;transform:none}
.js .animate{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.js .animate.show{opacity:1;transform:none}

.skip-link{
  position:fixed;
  left:18px;
  top:12px;
  z-index:2000;
  padding:10px 14px;
  border-radius:10px;
  color:#fff;
  background:#082f67;
  text-decoration:none;
  font-weight:700;
  transform:translateY(-160%);
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid rgba(5,185,207,.72);
  outline-offset:3px;
}

.office-map-link{display:none!important}
.form-privacy{
  margin:0!important;
  color:#6b7f9d!important;
  font-size:10px!important;
  line-height:1.55!important;
}
.form-privacy a{color:#075fc9;font-weight:700}
body.nav-open{overflow:hidden}

/* Footer logo: exact transparent director wordmark. The artwork itself is
   transparent, so it can sit directly on the footer gradient with no box. */
.footer-brand img{display:none!important}
.footer-brand::before{
  content:"";
  display:block;
  width:155px;
  height:47px;
  flex:0 0 auto;
  background:url("../images/footer-logo.svg?v=5") left center/contain no-repeat;
}

/* Contact directory: five addresses should read as a clean directory rather
   than five narrow boxes squeezed across one row. */
.contact-directory{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:2px;
}
.contact-directory a{
  flex:1 1 215px;
  max-width:260px;
  min-height:88px;
  padding:15px 17px;
  gap:12px;
  border:1px solid #d5e5f3;
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#f8fcff);
  box-shadow:0 8px 22px rgba(8,47,103,.05);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.contact-directory a:hover{
  transform:translateY(-2px);
  border-color:#a9d4ec;
  box-shadow:0 12px 28px rgba(8,47,103,.09);
}
.contact-directory a>i{
  width:40px;
  height:40px;
  font-size:16px;
  background:linear-gradient(145deg,#eaf7ff,#f3fbff);
  color:#0765b8;
}
.contact-directory small{
  font-size:9px;
  line-height:1.25;
  letter-spacing:.055em;
  color:#4c6f99;
}
.contact-directory strong{
  margin-top:4px;
  font-size:12px;
  line-height:1.3;
  color:#0b3b7b;
}

/* Consistent legal and utility pages. */
.legal-main,.utility-main{
  min-height:72vh;
  padding:70px clamp(20px,6vw,100px) 90px;
  background:
    radial-gradient(circle at 88% 4%,rgba(5,185,207,.10),transparent 26%),
    linear-gradient(180deg,#f8fcff,#fff);
}
.legal-card,.utility-card{
  width:min(920px,100%);
  margin:0 auto;
  padding:clamp(28px,5vw,58px);
  border:1px solid #d6e6f2;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 55px rgba(8,47,103,.08);
}
.legal-card h1,.utility-card h1{
  margin:0 0 18px;
  color:#082f67;
  font-family:"Manrope",sans-serif;
  font-size:clamp(38px,5vw,58px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.legal-card h2{
  margin:34px 0 8px;
  color:#0a4389;
  font-family:"Manrope",sans-serif;
  font-size:22px;
}
.legal-card p,.legal-card li,.utility-card p{color:#4e688c;line-height:1.75}
.legal-card ul{padding-left:22px}
.legal-card a,.utility-card a{color:#075fc9}
.legal-meta{margin:0 0 28px;color:#7185a1!important;font-size:13px}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:24px;
  color:#075fc9;
  font-weight:700;
  text-decoration:none;
}
.utility-card{text-align:center;max-width:760px}
.utility-icon{
  width:76px;
  height:76px;
  margin:0 auto 22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:30px;
  background:linear-gradient(135deg,#05b9cf,#075fc9);
  box-shadow:0 16px 35px rgba(5,95,201,.16);
}
.utility-card .btn-primary{margin-top:16px}

@media (max-width:920px){
  .site-header nav{
    max-height:calc(100vh - 94px);
    overflow-y:auto;
  }
  .contact-directory a{flex-basis:220px;max-width:none}
}

@media (max-width:620px){
  .legal-main,.utility-main{padding:46px 16px 60px}
  .legal-card,.utility-card{border-radius:18px}
  .contact-directory{display:grid;grid-template-columns:1fr;gap:10px}
  .contact-directory a{max-width:none;min-height:78px}
  .footer-brand::before{width:150px;height:45px}
}

@media (max-width:420px){
  .hero-copy h1{font-size:40px}
  .section-copy h2,.section-heading h2,.people-intro h2,.sustainability-copy h2,.news-copy h2,.contact-head h2{font-size:34px}
  .journey{gap:9px}
  .journey strong{font-size:12px}
  .journey span{font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  .js .animate{opacity:1;transform:none}
}