/* Cool green comparison: action buttons and a spacious typographic footer. */
html[data-accent="teal"] {
  --action: #247568;
  --action-hover: #1b5e53;
}

html[data-accent="teal"] .button {
  color: #fff;
  background: var(--action);
}

html[data-accent="teal"] .button:hover {
  background: var(--action-hover);
  box-shadow: 0 8px 24px rgb(36 117 104 / 17%);
}

html[data-accent="teal"] .brand-footer {
  padding: 76px 0 0;
  border-top: 1px solid #e4eeeb;
  background: #f7faf9;
  overflow: hidden;
}

.brand-footer .footer-container {
  width: min(1100px, calc(100% - 80px));
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 50px;
  align-items: start;
}

.footer-brand .wordmark {font-size: 22px;}
.footer-brand .brand-symbol {width: 30px; height: 30px; font-size: 15px; border-radius: 8px;}
.footer-description {max-width: 275px; margin: 19px 0 18px; color: #53655d; font-size: 14px; line-height: 1.75;}
.footer-contact {display: flex; align-items: center; gap: 9px; min-height: 34px; color: #53655d; font-size: 14px; line-height: 1.6;}
a.footer-contact:hover {color: var(--action); text-decoration: underline; text-underline-offset: 4px;}
.footer-city {margin-top: 6px; color: #6e7e75; font-size: 13px; line-height: 1.6;}
.footer-column h3 {margin: 6px 0 20px; color: #6b7d73; font-size: 12px; font-weight: 600; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase;}
.footer-links {display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none;}
.footer-links a {display: inline-flex; align-items: center; min-height: 42px; color: #3e5147; font-size: 14px; line-height: 1.55; padding: 5px 0;}
.footer-links a:hover {color: var(--action); text-decoration: underline; text-underline-offset: 4px;}
.footer-documents li {display: block; padding: 0 0 12px; color: #728177; font-size: 14px; line-height: 1.65;}
.footer-documents-note {margin-top: 5px; color: #728177; font-size: 12px; line-height: 1.65;}
.footer-meta {display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 47px; padding: 21px 0; border-top: 1px solid #dce7e3; color: #697b70; font-size: 12px; line-height: 1.6;}
.footer-wordmark {display: block; width: 100%; margin: 25px 0 0; padding: 12px 1.5vw 0; text-align: center; color: #81a99e; background: linear-gradient(105deg,#cbd8d4 4%,#afc8c0 29%,#7aa699 54%,#99bdb1 72%,#cbdad4 98%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: Arial,Helvetica,sans-serif; font-weight: 900; font-size: 12vw; line-height: 1.04; letter-spacing: -.068em; white-space: nowrap; user-select: none;}

@media (max-width: 1023px) {
  .footer-grid {grid-template-columns: 1.4fr 1fr 1fr; gap: 36px;}
  .footer-brand {grid-column: 1 / -1;}
  .footer-description {max-width: 440px; margin-top: 16px;}
}

@media (max-width: 639px) {
  html[data-accent="teal"] .brand-footer {padding-top: 48px;}
  .brand-footer .footer-container {width: calc(100% - 44px);}
  .footer-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 22px;}
  .footer-brand {grid-column: 1 / -1;}
  .footer-column-documents {grid-column: 1 / -1; max-width: 290px;}
  .footer-column h3 {margin-bottom: 12px;}
  .footer-links a {min-height: 44px;}
  .footer-documents {display: flex; flex-direction: column; gap: 0;}
  .footer-meta {align-items: flex-start; flex-direction: column; gap: 6px; margin-top: 30px; padding: 18px 0;}
  .footer-wordmark {margin-top: 7px; padding-top: 6px;}
}

@media (prefers-contrast: more) {
  .footer-wordmark {background: none; color: #247568; -webkit-text-fill-color: currentColor;}
}