.contact-page {
  background:radial-gradient(ellipse at 8% 10%,#d5e8ffb3,transparent 35%),radial-gradient(ellipse at 95% 65%,#c5e4ff85,transparent 45%),#f6f9fd;
  color:#102440;
  font-family:Inter,Arial,sans-serif
}

.contact-main {
  max-width:1360px;
  margin:24px auto 0;
  padding:16px 20px 0;
  background:#ffffff8c;
  border:1px solid #fff;
  border-radius:32px 32px 0 0;
  box-shadow:0 20px 70px #16447708
}

.contact-header {
  position:relative;
  z-index:3;
  margin-bottom:22px
}

.contact-header .nav {
  margin:0;
  max-width:none;
  width:100%;
  padding:0 22px;
  background:linear-gradient(90deg,#f3f8ffbb,#d4e5f8a6,#fff9);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px)
}

.contact-header [aria-current=page] {
  color:#087cff
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:30px;
  padding:28px 15px 65px;
  align-items:stretch
}

.contact-opening {
  padding:32px 20px 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.contact-kicker {
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  color:#6a86aa
}

.contact-opening :is(h1,.export-heading) {
  font-size:clamp(44px,4.7vw,66px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.06em;
  margin:36px 0 25px
}

.contact-opening :is(h1,.export-heading)>span {
  color:#087cff
}

.contact-lead {
  font-size:13px;
  line-height:1.8;
  color:#7b8fa9;
  margin:0 0 45px
}

.contact-location {
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:40px
}

.location-icon {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid #d9e7f5;
  border-radius:12px;
  color:#087cff;
  background:#fff8
}

.location-icon svg {
  width:23px;
  height:23px
}

.contact-location h2 {
  font-size:15px;
  font-weight:600;
  letter-spacing:-.025em;
  margin:3px 0 12px
}

.contact-location address {
  font-size:12px;
  font-style:normal;
  color:#6c809a;
  line-height:1.8
}

.contact-location a {
  display:inline-block;
  color:#087cff;
  font-size:11px;
  font-weight:500;
  margin-top:15px
}

.contact-social {
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  padding-top:30px;
  border-top:1px solid #dce6f0
}

.contact-social>a {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#2462a2
}

.contact-social>a span {
  font-size:16px;
  font-weight:800;
  border:1px solid #d0e2f4;
  border-radius:7px;
  padding:6px 8px;
  background:#fff
}

.contact-social>span {
  color:#8a9bb2;
  font-size:8px;
  line-height:1.7;
  text-align:right
}

.contact-email-panel {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:30px;
  padding:34px;
  background:radial-gradient(ellipse at 100% 0,#a4e9ff8c,transparent 60%),radial-gradient(ellipse at 0 100%,#1959e0,transparent 60%),linear-gradient(145deg,#0765e9,#137bfb 55%,#52b8ef);
  color:#fff;
  box-shadow:inset 0 1px 2px #ffffff9c,0 20px 45px #126be51a
}

.contact-email-panel:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.5;
  background:repeating-linear-gradient(120deg,transparent 0 60px,#ffffff14 61px,transparent 120px)
}

.email-panel-heading {
  margin-bottom:28px
}

.email-panel-heading .contact-kicker {
  color:#e0f3ff
}

.email-panel-heading>p {
  font-size:31px;
  font-weight:500;
  letter-spacing:-.045em;
  margin:15px 0 0
}

.email-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.email-card {
  min-width:0;
  min-height:217px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
  padding:23px 19px;
  border:1px solid #ffffff66;
  border-radius:23px;
  background:linear-gradient(130deg,#ffffff30,#ffffff12);
  box-shadow:inset 0 1px 1px #ffffff4d;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  color:#fff;
  transition:transform .4s cubic-bezier(.22,1,.36,1),background .4s,box-shadow .4s
}

.email-card:hover {
  transform:translateY(-5px);
  background:linear-gradient(130deg,#ffffff52,#ffffff24);
  box-shadow:0 15px 35px #00358433,inset 0 1px 2px #fff9
}

.email-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.06em;
  color:#dceeff
}

.email-arrow {
  font-size:17px;
  color:#fff
}

.email-card h2 {
  font-size:25px;
  line-height:1.1;
  letter-spacing:-.045em;
  font-weight:500;
  margin:0 0 11px
}

.email-card p {
  font-size:10px;
  line-height:1.65;
  color:#d5eaff;
  margin:0
}

.email-address {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid #fff3;
  padding-top:16px;
  font-size:clamp(9px,.85vw,12px);
  letter-spacing:-.025em;
  white-space:nowrap
}

.email-address span {
  font-size:14px
}

.contact-panel-bottom {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  color:#deefff;
  margin-top:26px
}

.contact-signal {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px #fff2
}

.contact-main .shared-contact {
  margin-top:15px
}

.contact-page :focus-visible {
  outline:2px solid #fff;
  outline-offset:4px
}

.contact-opening :focus-visible {
  outline-color:#087cff
}

@media(max-width:1050px) {
  .contact-layout {
    grid-template-columns:.9fr 1.2fr;
    gap:18px;
    padding-left:0;
    padding-right:0
  }

  .contact-email-panel {
    padding:28px 22px
  }

  .contact-opening {
    padding-left:15px;
    padding-right:5px
  }

  .email-grid {
    gap:9px
  }

  .email-card {
    padding:20px 15px;
    min-height:220px
  }

  .email-card h2 {
    font-size:23px
  }

  .email-address {
    font-size:9px
  }

  .contact-opening :is(h1,.export-heading) {
    font-size:49px
  }

  .contact-social {
    gap:12px
  }

}

@media(max-width:850px) {
  .contact-main {
    margin:12px 10px 0;
    padding:10px 10px 0;
    border-radius:25px 25px 0 0
  }

  .contact-header {
    margin-bottom:0
  }

  .contact-header .nav {
    padding:0 15px
  }

  .contact-header .navlinks {
    display:flex;
    gap:15px
  }

  .contact-header .navlinks a {
    font-size:10px
  }

  .contact-header .mobile {
    display:none
  }

  .contact-header .brand-logo {
    width:130px
  }

  .contact-layout {
    grid-template-columns:1fr;
    padding:20px 0 45px;
    gap:30px
  }

  .contact-opening {
    padding:25px 20px 0
  }

  .contact-opening :is(h1,.export-heading) {
    font-size:60px;
    margin:25px 0
  }

  .contact-opening :is(h1,.export-heading) br:first-child {
    display:none
  }

  .contact-lead {
    margin-bottom:30px
  }

  .contact-location {
    margin-bottom:25px
  }

  .contact-social {
    padding-top:20px
  }

  .contact-email-panel {
    padding:30px 24px
  }

  .email-card {
    min-height:230px;
    padding:24px
  }

  .email-card h2 {
    font-size:29px
  }

  .email-address {
    font-size:13px
  }

  .email-card p {
    font-size:12px
  }

  .contact-social>span {
    font-size:9px
  }

}

@media(max-width:500px) {
  .contact-header .navlinks>a {
    display:none
  }

  .contact-header .navlinks>a[aria-current=page] {
    display:block
  }

  .contact-header .navlinks {
    gap:13px
  }

  .contact-header .navlinks .out {
    font-size:10px;
    padding-left:10px
  }

  .contact-header .brand-logo {
    width:115px
  }

  .contact-opening {
    padding:25px 15px 0
  }

  .contact-opening :is(h1,.export-heading) {
    font-size:48px
  }

  .contact-opening :is(h1,.export-heading) br:first-child {
    display:block
  }

  .contact-email-panel {
    padding:28px 20px;
    border-radius:25px
  }

  .email-panel-heading>p {
    font-size:31px
  }

  .email-grid {
    grid-template-columns:1fr;
    gap:12px
  }

  .email-card {
    min-height:215px;
    padding:23px
  }

  .email-card h2 {
    font-size:30px
  }

  .email-card p {
    font-size:11px
  }

  .email-address {
    font-size:13px
  }

  .contact-lead {
    font-size:12px
  }

  .contact-social>span {
    font-size:8px
  }

}

@media(prefers-reduced-motion:reduce) {
  .email-card {
    transition:none
  }

}

@media(min-width:501px) and (max-width:850px) {
  .contact-header .navlinks>a {
    display:block
  }

}

.contact-email-panel {
  background:linear-gradient(125deg,#02132b59,#041e3b26),url("/assets/images/photos/blue-glass.jpg") center/cover no-repeat
}

.contact-email-panel:before {
  display:none
}

.contact-email-panel .email-card {
  background:linear-gradient(130deg,#071c3d80,#123b5b4d);
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%)
}

.contact-email-panel .email-card:hover {
  background:linear-gradient(130deg,#163e638c,#1b5b7959)
}

.email-panel-heading,.contact-panel-bottom {
  text-shadow:0 2px 15px #00133180
}