@charset "UTF-8";

/* Contact page: header cards and contact cards in the style of the leadership chart */
.contact { container-type: inline-size; font-family: Calibri, "Droid Sans", Arial, sans-serif; color: #202020; text-align: left; }
.contact-head, .contact-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.contact-head { margin-bottom: 8px; }
.contact-card { box-sizing: border-box; min-width: 0; background: #fff; border: 2px solid #039; padding: 14px 16px; }
.contact-card.is-address { border-top-width: 5px; }
.contact-card > :first-child { margin-top: 0; }
.contact-area { font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; color: #53616b; overflow-wrap: anywhere; }
.contact-name { font-size: 16px; line-height: 1.3; font-weight: bold; margin-top: 3px; overflow-wrap: anywhere; }
.contact-role, .contact-address { font-size: 16px; line-height: 1.3; margin-top: 3px; font-style: normal; overflow-wrap: anywhere; }
.contact-role { color: #53616b; }
.contact-sep { margin: 0 8px; color: #039; }
.contact-lines { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; margin: 10px 0 0; font-size: 16px; line-height: 1.3; }
.contact-lines dt { color: #53616b; }
.contact-lines dd { margin: 0; min-height: 32px; display: flex; align-items: center; overflow-wrap: anywhere; }
.contact-lines a { color: #039; }
.contact-note { margin-top: 12px; padding: 10px 12px; background: #f2f3f4; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.contact-mail { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-top: 6px; font-size: 16px; overflow-wrap: anywhere; }
.contact-mail a { color: #039; }
.contact-icon { flex: none; }
.contact-map { display: flex; flex-direction: column; padding: 0; }
.contact-map iframe { display: block; flex: 1; width: 100%; min-height: 260px; border: 0; }
.contact-maplink { display: block; padding: 10px 16px; border-top: 2px solid #039; font-weight: bold; color: #039; text-decoration: none; }
.contact-maplink:hover, .contact-maplink:focus { text-decoration: underline; }

@container (min-width: 560px) {
  .contact-head, .contact-grid { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 420px) {
  .contact-card { padding: 10px 12px; }
  .contact-area { letter-spacing: 0.5px; }
}