/* === FOOTER ===
   Shared component. Dark navy (#222631). Slate (#92A6BE) logo SVG + address, Company +
   Careers link columns, Call Us outlined pill + email. Divider, then a centered bottom
   row: copyright + Privacy Policy + System (#576371) and social icons (#576371). */
.site-footer { background: #222631; padding: 56px 40px 40px; }
.footer-inner { max-width: 1160px; margin: 0 auto; }

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-logo { display: block; margin-bottom: 24px; }
.footer-logo svg { display: block; width: 240px; height: auto; fill: #92A6BE; }
.footer-address {
  display: inline-block;
  max-width: 200px;
  color: #92A6BE;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: underline;
}
.footer-address:hover { color: #ffffff; }

.footer-links { display: flex; gap: 56px; }
.footer-col-head {
  display: inline-block;
  color: #92A6BE;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(146,166,190,0.45);
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
  color: #92A6BE;
  font-family: var(--body-font);
  font-size: 16px;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: #ffffff; }

.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-callus {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px;
  border: 2px solid #92A6BE;
  border-radius: 20px;
  color: #92A6BE;
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-callus svg { width: 14px; height: 14px; fill: currentColor; }
/* hover: border + label/icon turn white, bg stays transparent (matches original) */
.footer-callus:hover { border-color: #ffffff; color: #ffffff; }
.footer-email {
  color: #92A6BE;
  font-family: var(--body-font);
  font-size: 16px;
  transition: color 0.15s ease;
}
.footer-email:hover { color: #ffffff; }

.footer-divider { height: 1px; background: rgba(146,166,190,0.22); margin: 34px 0 22px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-legal {
  color: #576371;
  font-family: var(--body-font);
  font-size: 14px;
}
.footer-legal a { color: #576371; text-decoration: underline; transition: color 0.15s ease; }
.footer-legal a:hover { color: #92A6BE; }
.footer-legal .sep { margin: 0 6px; }
.footer-social { display: flex; align-items: center; gap: 18px; }
.footer-social a { color: #576371; display: inline-flex; transition: color 0.15s ease; }
.footer-social svg { width: 30px; height: 30px; fill: currentColor; }
.footer-social a:hover { color: #92A6BE; }

/* --- Footer responsive --- */
@media (max-width: 900px) {
  .footer-top { gap: 36px 40px; }
}
@media (max-width: 640px) {
  .site-footer { padding: 36px 24px 24px; text-align: center; }
  .footer-top { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .footer-logo { margin-bottom: 14px; }
  .footer-logo svg { margin: 0 auto; }
  .footer-address { max-width: none; }
  .footer-links { gap: 44px; justify-content: center; }
  .footer-contact { align-items: center; gap: 8px; }
  /* The divider was squeezed to 8px/6px, hugging the Call Us button above and
     the copyright row below — a jarring compression next to the 14-22px
     rhythm used earlier in this stack. Give it real breathing room. */
  .footer-divider { margin: 20px 0 16px; }
  .footer-bottom { flex-direction: column; gap: 4px; }

  /* Tap-target fixes (mobile only — desktop keeps the tighter 17.6px link rows,
     30px icons, and 38px pill since those are fine with a pointer). */
  .footer-col-head { margin-bottom: 8px; padding-bottom: 3px; }
  .footer-col ul { gap: 0; }
  .footer-col a { display: block; padding: 14px 0; }
  .footer-callus { padding: 12px 22px; }
  .footer-social { gap: 10px; }
  .footer-social a { padding: 7px; }

  /* Group the contact info under the link columns: address + email + Call Us
     sit together after the Company/Careers columns, with the Call Us button
     last. display:contents dissolves the brand/contact wrappers so their
     children become direct flex items of .footer-top and can be ordered
     individually. Desktop keeps its original three-column layout untouched. */
  .footer-brand, .footer-contact { display: contents; }
  .footer-logo    { order: 1; }
  .footer-links   { order: 2; }
  .footer-address { order: 3; margin-top: 6px; }
  .footer-email   { order: 4; }
  .footer-callus  { order: 5; margin-top: 2px; }
}