.as-social { display: flex; flex-wrap: wrap; gap: 9px; }
.as-social a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 13px; border: 1px solid #a5bdd72b; border-radius: 10px; background: linear-gradient(130deg, #9bbbf40b, #a5c4ee05); color: #c6d3e6; font-size: 12px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.as-social svg { width: 19px; height: 19px; flex: none; }
.as-social a:hover { color: #fff; border-color: #a4c2f580; background: #6e9adb15; transform: translateY(-2px); }
.as-social a:focus-visible { outline: 2px solid #bbd5fc; outline-offset: 4px; }
.as-social-label { margin: 27px 0 11px; color: #8c9eb7; font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.footer-brand .as-social-label { margin-top: 25px; }
.footer-brand .as-social { gap: 7px; }
.footer-brand .as-social a { padding-inline: 11px; font-size: 11px; }
@media (max-width: 520px) { .as-social { gap: 8px; } .as-social a { padding-inline: 11px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .as-social a { transition: none; } .as-social a:hover { transform: none; } }

/* Keep the agency's social accounts within reach from the main navigation. */
.header-socials { flex: none; flex-wrap: nowrap; align-items: center; gap: 5px; }
.header-socials a { width: 40px; min-height: 40px; padding: 0; border-radius: 7px; color: #c6d3e6; }
.header-socials svg { width: 18px; height: 18px; }
.header-socials a:hover { color: #fff; border-color: #a4c2f580; background: #6e9adb20; }

@media (min-width: 901px) and (max-width: 1200px) {
  .nav-shell:has(.header-socials) { gap: 12px; }
  .nav-shell:has(.header-socials) .nav-links { gap: 12px; }
  .nav-shell:has(.header-socials) .nav-links a { font-size: 11px; }
  .nav-shell:has(.header-socials) .button--nav { padding-inline: 12px; font-size: 11px; }
}

@media (min-width: 901px) and (max-width: 1000px) {
  .nav-shell:has(.header-socials) { gap: 9px; }
  .nav-shell:has(.header-socials) .brand { font-size: 16px; }
  .nav-shell:has(.header-socials) .brand img { width: 36px; height: 36px; }
  .nav-shell:has(.header-socials) .nav-links { gap: 9px; }
  .nav-shell:has(.header-socials) .nav-links a { font-size: 10px; }
  .nav-shell:has(.header-socials) .button--nav { padding-inline: 10px; font-size: 10px; }
}

@media (max-width: 900px) {
  .header-socials { order: 1; margin-left: auto; gap: 5px; }
  .header-socials a { width: 44px; min-height: 44px; }
  .nav-shell:has(.header-socials) .nav-toggle { order: 2; margin-left: 0; flex: none; }
}

@media (max-width: 600px) {
  .header-socials { order: 3; width: 100%; margin: 0; padding-top: 6px; border-top: 1px solid #a5bdd71c; justify-content: flex-end; }
  .header-socials::before { content: "Follow us"; margin-right: auto; color: #8c9eb7; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .nav-shell:has(.header-socials) .nav-toggle { margin-left: auto; }
  .site-header:has(.header-socials) + main .hero.service-hero { padding-top: 175px; }
}