.contact-hero { background: linear-gradient(90deg, rgba(3, 39, 61, .96), rgba(3, 39, 61, .68) 55%, rgba(3, 39, 61, .15)), url('../images/ckb/contact.jpg') center / cover no-repeat; padding: 34px 0 68px; color: #fff; }
.contact-hero nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 52px; font-size: 13px; color: #c8dae5; }
.contact-hero nav a { color: #fff; }
.contact-hero .career-eyebrow { color: #b8d8e8; }
.contact-hero h1 { max-width: 740px; font-size: clamp(36px, 4.5vw, 60px); color: #fff; line-height: 1.1; letter-spacing: -1.5px; }
.contact-hero .container > p:not(.career-eyebrow) { max-width: 540px; margin: 24px 0 28px; color: #e1ebf1; line-height: 1.75; }
.contact-main { padding: clamp(48px, 6vw, 88px) 0; background: #f4f6f9; scroll-margin-top: 100px; }
.contact-details { padding-top: 10px; }
.contact-details > h2 { color: #21214f; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; margin-bottom: 22px; }
.contact-details > p:not(.career-eyebrow) { color: #60677a; line-height: 1.8; margin-bottom: 28px; }
.contact-detail { display: flex; gap: 18px; padding: 24px 0; border-top: 1px solid #dce1e9; }
.contact-detail-icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; color: #21214f; background: #e8edf3; font-size: 18px; }
.contact-detail h3, .contact-careers-note h3 { margin: 0 0 12px; font-size: 17px; color: #21214f; }
.contact-detail a { display: block; width: fit-content; color: #424c63; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.contact-detail a:hover, .contact-careers-note a:hover { text-decoration: underline; }
.contact-detail address { margin: 0; font-size: 15px; line-height: 1.8; color: #424c63; font-style: normal; }
.contact-detail .contact-directions { color: #21214f; margin-top: 12px; font-weight: 800; font-size: 13px; }
.contact-careers-note { padding: 24px; margin-top: 12px; border-left: 3px solid #21214f; background: #e8edf3; }
.contact-careers-note p { font-size: 14px; line-height: 1.7; color: #60677a; }
.contact-careers-note a { color: #21214f; font-size: 14px; font-weight: 800; }
.ckb-contact .career-field textarea { width: 100%; resize: vertical; min-height: 170px; padding: 14px; border: 1px solid #cdd4df; border-radius: 3px; background: #fff; color: #21214f; font-size: 16px; line-height: 1.6; }
.ckb-contact .career-field textarea::placeholder { font-size: 14px; color: #70798c; }
.ckb-contact .career-field textarea[aria-invalid="true"] { border-color: #ad3434; }
.ckb-contact textarea:focus-visible { outline: 3px solid #5387a9; outline-offset: 3px; }
.contact-field-help { margin: 8px 0 0; color: #60677a; font-size: 12px; line-height: 1.65; }
.contact-map-section { padding: 0 0 70px; background: #f4f6f9; }
.contact-map-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-top: 36px; margin-bottom: 28px; border-top: 1px solid #dce1e9; }
.contact-map-heading h2 { color: #21214f; font-size: clamp(28px, 3vw, 38px); }
.contact-map-heading > p { color: #60677a; margin: 0; font-size: 14px; line-height: 1.8; }
.contact-map-section iframe { display: block; width: 100%; height: 400px; border: 1px solid #dce1e9; }
@media (max-width: 575px) { .contact-hero { padding-bottom: 48px; background-position: 65% center; } .contact-map-heading { display: block; } .contact-map-heading > p { margin-top: 18px; } .contact-map-section iframe { height: 320px; } }