/* Shared footer content flows as the site settings change. */
.page .footer { position: relative; bottom: auto; height: auto; min-height: 658px; padding-top: 56px; }
.footer__bg { height: calc(100% - 98px); object-fit: fill; pointer-events: none; }
.footer__social-area { position: relative; min-height: 60px; margin: 0 38px; display: flex; justify-content: flex-end; }
.footer__columns { position: relative; display: grid; grid-template-columns: 555px 491px 1fr; margin: 102px 52px 0; }   /* Figma column x: 52 / 607 / 1098 */
.footer__columns::before, .footer__columns::after { content: ""; position: absolute; top: 0; width: 1px; height: 176px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.16) 0 6px, transparent 6px 12px); }
.footer__columns::before { left: 374px; }   /* Figma dividers at x 426 and 1001 */
.footer__columns::after { left: 949px; }
.footer__column { min-width: 0; padding-right: 40px; }
.footer__column + .footer__column { padding-left: 0; border-left: 0; }
.footer__column:last-child { padding-right: 0; }
.footer__heading { position: static; white-space: normal; overflow-wrap: anywhere; }
.footer__col { position: static; display: grid; gap: 16px; margin-top: 20px; white-space: normal; }
.footer__link, .footer__text { position: static; overflow-wrap: anywhere; }
.footer__legal-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 48px 44px 0; padding: 12px 8px 0; border-top: 1px solid rgba(255,255,255,.24); }
.footer__legal { position: static; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.4; }
.footer__legal:last-child { text-align: right; }
.footer__wordmark { position: relative; left: auto; top: auto; margin: 9px auto -16px; height: auto; }   /* wordmark overhangs the page edge by 16px as in Figma (658px footer) */
.social { height: auto; min-height: 60px; gap: 0; max-width: 100%; }
.social__label { width: auto; max-width: 160px; margin-right: 12px; overflow-wrap: anywhere; }
.social a { flex: none; }

/* Collapsible: the links rest folded away behind the + button and open on hover, keyboard
   focus (:focus-visible, so a tap on the button does not hold it open) or a tap
   (public/js/social.js, .is-open). The strip widens to fit exactly the number
   of links (--social-count), and the icons pop in one after another. */
.social__links {
  display: flex; align-items: center; gap: 8px; overflow: hidden;
  max-width: 0; visibility: hidden;
  transition: max-width .55s cubic-bezier(.16,1,.3,1), margin .55s cubic-bezier(.16,1,.3,1), visibility 0s linear .55s;
}
.social__link { display: block; border-radius: 50%; opacity: 0; scale: .6; translate: 10px 0; transition: opacity .2s ease, scale .2s ease, translate .2s ease; }
.social__toggle {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--btn-gradient), var(--blue); color: var(--white); cursor: pointer;
  transition: rotate .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.social__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.social.is-open .social__links, .social:has(:focus-visible) .social__links {
  max-width: calc(var(--social-count, 4) * 52px); margin-right: 8px; visibility: visible;
  transition: max-width .55s cubic-bezier(.16,1,.3,1), margin .55s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.social.is-open .social__link, .social:has(:focus-visible) .social__link {
  opacity: 1; scale: 1; translate: 0 0;
  transition: opacity .35s ease calc(.12s + var(--i, 0) * 70ms), scale .5s cubic-bezier(.34,1.56,.64,1) calc(.12s + var(--i, 0) * 70ms), translate .5s cubic-bezier(.16,1,.3,1) calc(.12s + var(--i, 0) * 70ms);
}
.social.is-open .social__toggle, .social:has(:focus-visible) .social__toggle { rotate: 135deg; box-shadow: 0 6px 16px rgba(23,123,235,.35); }
@media (hover: hover) {
  .social { cursor: default; }
  .social:hover .social__links {
    max-width: calc(var(--social-count, 4) * 52px); margin-right: 8px; visibility: visible;
    transition: max-width .55s cubic-bezier(.16,1,.3,1), margin .55s cubic-bezier(.16,1,.3,1), visibility 0s;
  }
  .social:hover .social__link {
    opacity: 1; scale: 1; translate: 0 0;
    transition: opacity .35s ease calc(.12s + var(--i, 0) * 70ms), scale .5s cubic-bezier(.34,1.56,.64,1) calc(.12s + var(--i, 0) * 70ms), translate .5s cubic-bezier(.16,1,.3,1) calc(.12s + var(--i, 0) * 70ms);
  }
  .social:hover .social__toggle { rotate: 135deg; box-shadow: 0 6px 16px rgba(23,123,235,.35); }
}
@media (hover: none) { .social { cursor: pointer; } }
.social__badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 16px; font-weight: 600; }

.page .footer-m { position: relative; left: auto; bottom: auto; margin: 0 auto; height: auto; min-height: 680px; padding-top: 80px; }
.footer-m__bg { height: 100%; object-fit: fill; pointer-events: none; }
.footer-m__columns { position: relative; display: grid; gap: 36px; padding: 0 20px; }   /* Figma: 36px between groups */
.footer-m__heading { position: static; white-space: normal; overflow-wrap: anywhere; }
.footer-m__links { display: grid; gap: 12px; margin-top: 16px; }
.footer-m__item { position: static; white-space: normal; overflow-wrap: anywhere; }
.footer-m__legal-row { position: relative; display: grid; gap: 12px; margin: 36px 8px 0; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.16); }
.footer-m__legal { position: static; white-space: pre-line; overflow-wrap: anywhere; }
.footer-m__social-area { position: relative; margin: 24px 16px 0; }
.footer-m__social-area:empty { display: none; }
.footer-m__social-area { display: flex; justify-content: center; }
/* Phones: the same white pill as on desktop, sized to its contents, so it is small while
   folded and grows as the icons slide in (opened with a tap). Slightly smaller icons keep
   the open pill within the footer. */
.footer-m__social-area .social { width: auto; height: 48px; min-height: 0; padding: 6px 6px 6px 18px; }   /* the height of the mobile "View Services" button */
.footer-m__social-area .social__label { white-space: nowrap; }
.footer-m__social-area .social__links { gap: 6px; }
.footer-m__social-area .social img, .footer-m__social-area .social__badge { width: 36px; height: 36px; }
.footer-m__social-area .social__toggle { width: 36px; height: 36px; }
.footer-m__social-area .social.is-open .social__links, .footer-m__social-area .social:has(:focus-visible) .social__links { max-width: calc(var(--social-count, 4) * 42px); margin-right: 6px; }
.footer-m__wordmark { position: relative; left: auto; top: auto; margin: 36px auto 0; }

/* Keep edited taglines centred, with the trademark following the text. */
.nav .nav__tagline, .nav-m .nav-m__tagline { left: 50%; width: 420px; height: auto; transform: translateX(-50%); display: flex; justify-content: center; gap: 3px; white-space: normal; text-align: center; }
.nav__tagline .nav__tagline-text, .nav__tagline .nav__tagline-tm,
.nav-m__tagline .nav__tagline-text, .nav-m__tagline .nav__tagline-tm { position: static; }
@media (max-width: 899px) {
  .nav-m .nav-m__tagline { width: 270px; }
}