/* Contact: incumbent Merry palette, pill trigger, lightweight disclosure. */
/* Raise the whole header context above the flying hero logo, not just its panel. */
.nav:has(.nav-contact[open]) { z-index: 130; }
.nav-contact { position: relative; order: 3; flex: none; }
.contact-trigger { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 18px; list-style: none; cursor: pointer; border: 1px solid var(--blue); border-radius: var(--radius-full); background: #10273a; color: #c5eaff; font: 700 14px/1 var(--font); touch-action: manipulation; transition: background-color 160ms ease, transform 160ms ease; }
.contact-trigger::-webkit-details-marker { display: none; }
.contact-trigger svg { width: 22px; height: 22px; flex: none; }
.contact-trigger .contact-chevron { width: 16px; height: 16px; transition: transform 160ms ease; }
.nav-contact[open] .contact-chevron { transform: rotate(180deg); }
.contact-trigger:active { transform: scale(.97); }
.contact-trigger:focus-visible, .contact-options a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.contact-options { position: absolute; top: calc(100% + 12px); right: 0; z-index: 105; width: 304px; max-width: calc(100vw - 32px); padding: 22px 18px 16px; border-radius: 16px; background: #141d2b; color: var(--text); box-shadow: 0 18px 48px #0009; }
.contact-title { margin: 0; font: 700 20px/1.3 var(--font); letter-spacing: -.02em; }
.contact-intro { margin: 5px 0 18px; color: #bccbd8; font: 400 14px/1.5 var(--font); }
.contact-option { display: flex; align-items: center; gap: 13px; min-height: 68px; padding: 10px 6px; border-radius: 8px; color: var(--text); }
.contact-option + .contact-option { border-top: 1px solid #304153; border-radius: 0; }
.contact-option-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; color: #81cfff; }
.contact-option-icon svg { width: 26px; height: 26px; }
.contact-option-icon--chat { color: #72e5a9; }
.contact-option strong { display: block; font: 650 16px/1.4 var(--font); }
.contact-option small { display: block; margin-top: 2px; color: #bccbd8; font: 400 13px/1.5 var(--font); }
.contact-gmail { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 8px; padding: 0 8px; border-radius: 8px; color: #a7dcff; font: 600 14px/1.4 var(--font); text-decoration: underline; text-underline-offset: 4px; }
.contact-address { margin-top: 12px; padding-top: 14px; border-top: 1px solid #304153; color: #bccbd8; font: 400 12px/1.5 var(--font); text-align: center; user-select: text; }
@media (hover: hover) and (pointer: fine) {
  .contact-trigger:hover { background: #19394f; }
  .contact-option:hover, .contact-gmail:hover { background: #203044; color: #fff; }
}
@media (max-width: 1200px) and (min-width: 901px) {
  .nav-inner { gap: 10px; }
  .nav-links a { padding-inline: 9px; font-size: 11px; }
  .nav-menu { gap: 5px; }
}
@media (max-width: 900px) {
  .nav-contact { order: 0; margin-left: auto; z-index: 121; }
  .nav-toggle { position: relative; z-index: 122; }
  .contact-trigger { padding-inline: 14px; }
  .contact-options { right: -52px; }
}
@media (max-width: 380px) {
  .nav-inner { gap: 8px; }
  .contact-trigger { gap: 7px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-trigger, .contact-chevron { transition: none; }
  .contact-trigger:active { transform: none; }
}