.contact-page { background: var(--paper); }

.contact-hero { position: relative; overflow: hidden; min-height: 51rem; color: var(--white); background: var(--navy); }
.contact-hero::before { content: ""; position: absolute; top: 0; right: 0; width: 37%; height: .28rem; background: linear-gradient(90deg, var(--lime) 0 34%, var(--blue) 34% 67%, var(--amber) 67%); }
.contact-hero::after { content: "CONTACT"; position: absolute; right: -1.5rem; bottom: -3rem; color: rgb(255 255 255 / .025); font-size: clamp(9rem, 18vw, 21rem); font-weight: 800; letter-spacing: -.08em; line-height: 1; pointer-events: none; }
.contact-hero__grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgb(255 255 255 / .16) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .16) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(110deg, black, transparent 78%); }
.contact-hero__inner { position: relative; z-index: 2; display: flex; min-height: 51rem; align-items: center; justify-content: center; padding-block: 9rem 5rem; }
.contact-hero__copy { width: min(100%, 76rem); text-align: center; }
.contact-hero__copy .breadcrumb, .contact-hero__copy .eyebrow { justify-content: center; }
.contact-hero__copy h1 { max-width: 12ch; margin: 0 auto; font-size: clamp(4rem, 6.8vw, 7.8rem); font-weight: 560; letter-spacing: -.06em; line-height: .94; }
.contact-hero__copy h1 em { color: var(--lime); font-style: normal; font-weight: 420; }
.contact-hero__copy > p { max-width: 42rem; margin: 2rem auto 0; color: #b8c6cc; font-size: clamp(1.05rem, 1.4vw, 1.28rem); }
.contact-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 2.5rem auto 0; }

.contact-directory { background: linear-gradient(180deg, var(--paper), #edf1ef); }
.contact-directory__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .48fr); gap: clamp(3rem, 8vw, 9rem); align-items: end; }
.contact-directory__head > p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.contact-directory__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); margin-top: clamp(4rem, 7vw, 7rem); border: 1px solid #c8d1d1; box-shadow: 0 1.5rem 4rem rgb(8 30 46 / .07); }
.company-card { position: relative; overflow: hidden; min-height: 36rem; padding: clamp(2rem, 4vw, 4rem); color: var(--white); background: var(--navy); }
.company-card::after { content: ""; position: absolute; right: -5rem; bottom: -5rem; width: 19rem; aspect-ratio: 284 / 280; background: url("../images/ums-emblem.png") center / contain no-repeat; filter: brightness(0) invert(1); opacity: .045; }
.company-card__index { color: var(--lime); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.company-card h3 { max-width: 14ch; margin: clamp(4rem, 8vw, 7rem) 0 1.5rem; font-size: clamp(2rem, 3.4vw, 3.8rem); font-weight: 560; letter-spacing: -.045em; line-height: 1; }
.company-card address { color: #b8c6cc; font-size: 1rem; font-style: normal; }
.company-card dl { position: relative; z-index: 1; display: grid; gap: .8rem; margin: 3rem 0 0; }
.company-card dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding-top: .8rem; border-top: 1px solid rgb(255 255 255 / .14); }
.company-card dt { color: #7e96a2; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.company-card dd { margin: 0; color: #dbe3e6; }

.contact-channels { display: grid; background: rgb(255 255 255 / .7); }
.contact-channel { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; min-width: 0; padding: 1.45rem clamp(1.4rem, 3vw, 2.6rem); color: var(--ink); border-bottom: 1px solid #c8d1d1; text-decoration: none; transition: color .25s ease, background-color .25s ease, padding-left .25s var(--ease); }
.contact-channel:last-child { border-bottom: 0; }
a.contact-channel:hover { padding-left: calc(clamp(1.4rem, 3vw, 2.6rem) + .5rem); color: var(--white); background: var(--navy); }
.contact-channel > span:first-child { display: grid; min-width: 0; }
.contact-channel small { color: #6c7d84; font-size: .75rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; transition: color .25s ease; }
.contact-channel strong { overflow-wrap: anywhere; margin-top: .2rem; font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 620; }
.contact-channel > i { color: var(--lime); font-size: 1.1rem; font-style: normal; }
a.contact-channel:hover small { color: #9db0ba; }

.contact-map { padding-block: clamp(5rem, 8vw, 8rem) 0; background: #e8edeb; }
.contact-map__head { display: flex; justify-content: space-between; gap: 3rem; align-items: end; padding-bottom: 2.5rem; }
.contact-map__head span { color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.contact-map__head h2 { margin: .8rem 0 0; font-size: clamp(2.5rem, 4.5vw, 5rem); font-weight: 560; letter-spacing: -.05em; line-height: 1; }
.contact-map__frame { position: relative; min-height: clamp(34rem, 55vw, 46rem); overflow: hidden; background: #cad4d3; }
.contact-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.75) saturate(.65) contrast(1.08); }

.contact-project { position: relative; overflow: hidden; color: var(--white); background: #10181d; }
.contact-project::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34%; height: .25rem; background: linear-gradient(90deg, var(--lime), var(--blue), var(--amber)); }
.contact-project__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(29rem, 1.1fr); gap: clamp(4rem, 9vw, 10rem); align-items: start; }
.contact-project__copy h2 { max-width: 11ch; margin: 0; font-size: clamp(3rem, 5vw, 5.8rem); font-weight: 560; letter-spacing: -.055em; line-height: .98; }
.contact-project__copy > p { max-width: 37rem; margin: 2rem 0 0; color: #aebdc4; font-size: 1.05rem; }
.project-prep { display: grid; margin-top: 3rem; border-top: 1px solid rgb(255 255 255 / .15); }
.project-prep span { padding: .85rem 0; color: #91a5ae; border-bottom: 1px solid rgb(255 255 255 / .15); font-size: .75rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.contact-form { position: relative; z-index: 1; box-shadow: 0 2rem 5rem rgb(0 0 0 / .18); }

@media (max-width: 1000px) {
  .contact-directory__grid, .contact-project__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .contact-project__grid { gap: 4rem; }
}

@media (max-width: 900px) {
  .contact-hero__inner { padding-top: 9rem; }
  .contact-directory__head, .contact-directory__grid, .contact-project__grid { grid-template-columns: 1fr; }
  .company-card { min-height: 31rem; }
  .contact-map__head { align-items: start; flex-direction: column; gap: 1.5rem; }
}

@media (max-width: 767px) {
  .contact-hero, .contact-hero__inner { min-height: 44rem; }
  .contact-hero__inner { padding-block: 8rem 4rem; }
  .contact-hero__copy h1 { font-size: clamp(3.5rem, 15vw, 5rem); }
  .contact-hero__actions { width: min(100%, 24rem); align-items: stretch; flex-direction: column; }
  .company-card { min-height: auto; padding: 2rem 1.5rem 3rem; }
  .company-card h3 { margin-top: 4rem; }
  .company-card dl div { grid-template-columns: 1fr; gap: .25rem; }
  .contact-channel { grid-template-columns: 1fr auto; padding-inline: 1rem; }
  .contact-map__frame { min-height: 38rem; }
  .contact-project__grid { gap: 3rem; }
}

@media (max-width: 390px) {
  .contact-channel { grid-template-columns: 1fr; }
  .contact-channel > i { display: none; }
}