@charset "utf-8";

#contact {
  --contact-bg: #2d323a;
  --contact-blue: #4381b2;
  --contact-blue-muted: #557a9a;
  --contact-green: #6e9b4b;
  --contact-paper: #f3f3f0;
  margin: 0;
  background: var(--contact-bg);
  color: #fff;
}

#contact .contact-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 0 4vw; background: #f1f1ef; }
.contact-logo { display: flex; align-items: center; color: #0c3154; font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 800; }
.contact-logo img { width: 42px; margin-right: 10px; }
#contact .contact-header nav { width: min(62%, 760px); padding: 0; background: transparent; }
#contact .contact-header nav ul { display: flex; justify-content: space-between; }
#contact .contact-header nav li { width: auto; }
#contact .contact-header nav a { padding: 1rem; color: #0c3154; font-size: .76rem; font-weight: 800; }
#contact .contact-header nav a:hover, #contact .contact-header nav a[aria-current="page"] { background: transparent; color: var(--contact-blue); }

#contact main { background: var(--contact-bg); }
#contact section { margin: 0; }
.contact-hero { min-height: 290px; background: linear-gradient(90deg, var(--contact-blue) 0 50%, #4c88b8 50% 100%); }
.contact-hero__title { display: flex; flex-direction: column; justify-content: center; width: min(49%, 625px); min-height: 290px; padding: 3rem clamp(2rem, 8vw, 7.5rem); background: var(--contact-blue-muted); }
.contact-hero__title h1 { font: 800 clamp(2.8rem, 5vw, 4.6rem)/1 var(--font-heading); letter-spacing: -.03em; }
.contact-hero__title p { margin-top: 1.5rem; font-weight: 700; }

.contact-intro { width: min(760px, calc(100% - 48px)); margin: 0 auto !important; padding: 130px 0 110px; }
.contact-intro__eyebrow { color: var(--contact-blue); font-weight: 800; letter-spacing: .08em; }
#contact .contact-intro h2 { padding: 1.1rem 0 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.45; text-transform: none; }
.contact-intro > p:last-child { margin-top: 2.2rem; font-size: .92rem; line-height: 2; }

.contact-form-section { width: min(1040px, calc(100% - 48px)); margin: 0 auto !important; padding-bottom: 130px; }
.contact-form-heading { margin-bottom: 45px; }
.contact-form-heading > p:first-child { font: 800 clamp(1.7rem, 3vw, 2.5rem)/1 var(--font-heading); }
#contact .contact-form-heading h2 { padding: .7rem 0 1.5rem; font-size: clamp(1.7rem, 3vw, 2.5rem); text-transform: none; }
.contact-form-heading > p:last-child { font-size: .82rem; }
.contact-form { padding: 55px clamp(24px, 6vw, 80px); background: var(--contact-paper); color: var(--contact-bg); }
.contact-form fieldset { border: 0; }
.form-row { display: grid; grid-template-columns: 240px 1fr; gap: 35px; padding: 24px 0; border-bottom: 1px solid #c9cdd0; }
.form-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--contact-bg); font-weight: 700; }
.required-mark, .optional-mark { display: inline-block; flex: 0 0 auto; padding: 3px 8px; border-radius: 2px; color: #fff; font-size: .68rem; font-weight: 700; }
.required-mark { background: var(--contact-blue); }
.optional-mark { background: #858b90; }
.form-control input, .form-control select, .form-control textarea { width: 100%; border: 1px solid #bcc1c4; border-radius: 3px; background: #fff; color: #252a31; font: 400 1rem/1.6 var(--font-body); }
.form-control input, .form-control select { min-height: 52px; padding: 0 16px; }
.form-control textarea { display: block; min-height: 210px; padding: 14px 16px; resize: vertical; }
.form-control input:focus, .form-control select:focus, .form-control textarea:focus { outline: 3px solid rgba(67, 129, 178, .25); border-color: var(--contact-blue); }
.privacy-box { margin-top: 45px; padding: 24px; border: 1px solid #c9cdd0; }
.privacy-box h3 { color: var(--contact-bg); font: 700 1rem/1.5 var(--font-body); }
.privacy-box p { margin-top: 10px; color: #51565c; font-size: .78rem; line-height: 1.8; }
.privacy-check { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 32px 0; color: var(--contact-bg); font-size: .9rem; font-weight: 700; }
.privacy-check input { width: 20px; height: 20px; accent-color: var(--contact-blue); }
.contact-submit { display: flex; align-items: center; justify-content: space-between; width: min(100%, 390px); min-height: 64px; margin: 0 auto; padding: 0 24px; border: 1px solid var(--contact-blue); border-radius: 4px; background: var(--contact-blue); color: #fff; font: 700 1rem var(--font-body); cursor: pointer; transition: background-color .25s, color .25s; }
.contact-submit:hover { background: #fff; color: var(--contact-blue); }

.contact-other { padding: 90px 24px; background: var(--contact-blue); text-align: center; }
.contact-other > p:first-child { font-weight: 800; letter-spacing: .08em; }
#contact .contact-other h2 { padding: .5rem 0 1.5rem; font-size: clamp(1.8rem, 3vw, 2.5rem); text-transform: none; }
.contact-other > p { font-size: .9rem; }
.contact-other a { display: flex; flex-direction: column; align-items: center; width: min(100%, 430px); margin: 32px auto 0; padding: 18px; border: 1px solid #fff; border-radius: 4px; }
.contact-other a span { font-size: 1.8rem; font-weight: 800; letter-spacing: .05em; }
.contact-other a small { margin-top: 4px; font-size: .72rem; }

#contact .contact-footer { margin: 0; padding: 70px 7vw 20px; background: var(--contact-paper); color: var(--contact-bg); }
.contact-footer__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1120px; margin: auto; }
.contact-footer__company { color: var(--contact-bg); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 800; }
.contact-footer__address { margin-top: 25px; color: #5b6065; font-size: .8rem; }
#contact .contact-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#contact .contact-footer nav a { padding: 10px 16px; border-radius: 6px; background: var(--contact-blue); color: #fff; font-size: .74rem; font-weight: 700; }
.contact-footer__copyright { padding-top: 50px !important; color: var(--contact-bg); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 767px) {
  #contact .contact-header { min-height: 68px; padding: 0 20px; }
  .contact-logo img { width: 34px; }
  #contact .contact-header nav { width: auto; }
  #contact .contact-header nav li:not(:last-child) { display: none; }
  #contact .contact-header nav a { padding: .75rem 0; }
  .contact-hero, .contact-hero__title { min-height: 230px; }
  .contact-hero__title { width: 86%; padding: 2.5rem 24px; }
  .contact-intro { width: min(100% - 40px, 620px); padding: 90px 0 75px; }
  .contact-form-section { width: min(100% - 32px, 620px); padding-bottom: 90px; }
  .contact-form { padding: 34px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .form-label { justify-content: flex-start; }
  .contact-other { padding: 70px 20px; }
  .contact-footer__inner { grid-template-columns: 1fr; gap: 50px; }
}