/* Contact reuses the homepage palette and rounded navigation controls. */
.contact { padding: clamp(40px, 7vw, 80px) 20px; background: #061f27; }
.contact__card { max-width: 600px; margin: 0 auto; padding: clamp(20px, 5vw, 40px); border: 1px solid #367078; border-radius: 24px; background: #0a2a32; }
.contact h2 { margin: 0 0 24px; color: #ffc365; font-size: clamp(30px, 6vw, 42px); }
.contact__name { margin: 0 0 24px; line-height: 1.6; }
.contact__name strong { font-size: 22px; }
.contact__details { display: grid; gap: 12px; margin-bottom: 28px; font-style: normal; }
.contact__details span { display: block; color: #b9d1d4; font-size: 14px; }
.contact__details a { display: flex; align-items: center; min-height: 48px; width: fit-content; max-width: 100%; color: #ffe0a0; overflow-wrap: anywhere; text-underline-offset: 4px; line-height: 1.5; }
.contact__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: 12px 24px; border: 2px solid #fff1c0; border-radius: 999px; background: linear-gradient(165deg, #ffe493, #ffc458 55%, #efa32e); color: #171105; font-weight: 800; text-align: center; text-decoration: none; }
.contact a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.contact__details a:hover { color: #fff; }
.contact__cta:hover { filter: brightness(1.1); }