.site-footer { position: relative; isolation: isolate; overflow: hidden; margin-top: 64px; background: #fff; box-shadow: 0 -3px 18px rgb(31 77 48 / 5%); }
.site-footer-inner { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 28px; width: min(100% - 48px, 1440px); min-height: 156px; margin: auto; padding-top: 28px; padding-right: 165px; }
.footer-brand { transform: translateY(-13px); display: flex; align-items: center; flex-shrink: 0; gap: 10px; color: #25392e; text-decoration: none; }
.footer-brand .site-brand-tree { width: 48px; height: 56px; }
.footer-brand > span { display: flex; flex-direction: column; }
.footer-brand strong { font-size: 23px; font-weight: 800; letter-spacing: .06em; line-height: 1.25; }
.footer-brand span span { color: #6a7470; font-size: 9px; line-height: 1.55; letter-spacing: .04em; }
.footer-navigation { transform: translateY(-8px); display: flex; align-items: center; justify-content: center; flex: 1; flex-wrap: wrap; row-gap: 12px; padding-top: 13px; color: #717986; font-size: 13px; font-weight: 600; }
.footer-navigation > * { padding: 0 16px; line-height: 1; white-space: nowrap; }
.footer-navigation > * + * { border-left: 1px solid #b3b9c0; }
.footer-navigation a { color: inherit; text-decoration: none; }
.footer-navigation a:hover { color: #20734e; text-decoration: underline; text-underline-offset: 4px; }
.footer-socials { transform: translateY(-16px); display: flex; flex-shrink: 0; gap: 14px; padding-top: 9px; color: #717986; }
.footer-socials span { display: flex; align-items: center; width: 29px; height: 34px; }
.footer-socials svg { width: 100%; height: 100%; }
.footer-message { position: absolute; right: 0; top: 21px; width: 150px; color: #31764a; text-align: center; }
.footer-message > span { position: relative; display: inline-block; white-space: nowrap; transform: rotate(-12deg); font-family: serif; font-size: 14px; line-height: 1.95; letter-spacing: .15em; }
.footer-message > span::after { content: ''; display: block; height: 2px; margin: 5px -5px 0; background: #82aa88; border-radius: 50%; transform: rotate(-5deg); }
.footer-message small { display: block; margin-top: 24px; font-size: 9px; font-weight: 600; letter-spacing: .14em; }
.footer-message small span { display: block; font-size: 7px; letter-spacing: .12em; }
.footer-town { position: absolute; z-index: 0; bottom: 25px; width: 100%; height: 100px; background: url('footer-town.svg') center bottom / 100% 100% no-repeat; pointer-events: none; }
.footer-copyright { position: relative; z-index: 1; min-height: 25px; padding: 3px 16px; background: #31764a; color: white; text-align: center; line-height: 19px; }
.footer-copyright small { font-size: 10px; }
@media (max-width: 1200px) {
  .site-footer-inner { gap: 16px; min-height: 176px; }
  .footer-navigation > * { padding: 0 10px; }
  .footer-socials { gap: 9px; }
}
@media (max-width: 960px) {
  .site-footer-inner { flex-wrap: wrap; justify-content: space-between; padding-bottom: 105px; }
  .footer-navigation { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .footer-navigation > *:first-child { padding-left: 0; }
  .footer-message small { margin-top: 36px; }
  .footer-town { background-size: auto 88px; }
}
@media (max-width: 560px) {
  .site-footer { margin-top: 40px; }
  .site-footer-inner { width: calc(100% - 32px); padding: 28px 0 108px; gap: 22px; }
  .footer-brand { gap: 6px; }
  .footer-brand strong { font-size: 21px; }
  .footer-brand .site-brand-tree { width: 40px; height: 50px; }
  .footer-socials { align-self: center; padding-top: 0; gap: 11px; }
  .footer-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; padding-top: 0; }
  .footer-navigation > * { padding: 0; border: 0; font-size: 14px; }
  .footer-message { position: static; order: 4; display: flex; justify-content: center; align-items: center; gap: 28px; width: 100%; padding-top: 8px; }
  .footer-message > span { font-size: 12px; }
  .footer-message small { margin-top: 0; }
}

.footer-brand-image { transform: translate(-13px, -5px); display: block; width: 210px; height: auto; }
@media (max-width: 560px) { .footer-brand-image { width: 180px; } }