@layer sections {
#footer { padding: 0 var(--space-2) var(--space-2); }
#footer .ft-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, .6fr)); gap: 40px 32px; padding: clamp(40px, 5vw, 64px); border-radius: var(--radius-1) var(--radius-1) var(--radius-1) var(--radius-4); background: var(--color-3); }
#footer .ft-brand { display: grid; align-content: start; gap: 22px; }
#footer .ft-brand .m-text-3 { max-width: 18ch; font-size: clamp(24px, 2.4vw, 32px); }
#footer .ft-col { display: grid; align-content: start; gap: 12px; }
#footer .ft-col .m-text-4 { margin-bottom: 4px; }
#footer .ft-col .m-link-2 { justify-self: start; }
#footer .ft-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; padding-top: 28px; border-top: 1.5px solid var(--color-2); }
#footer .ft-shapes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }
#footer .ft-shapes span:nth-child(1) { background: var(--color-5); }
#footer .ft-shapes span:nth-child(2) { background: var(--color-6); }
#footer .ft-shapes span:nth-child(3) { background: var(--color-7); }
#footer .ft-shapes span:nth-child(4) { background: var(--color-9); }
@media (max-width: 900px) {
  #footer .ft-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px 24px 24px 120px; }
  #footer .ft-brand { grid-column: 1 / -1; }
  #footer .ft-shapes { justify-content: flex-start; }
}
}
@layer sections { #footer address { font-style: normal; } }