body { padding-bottom: 94px; }

.wordmark { align-items: center; gap: 0; font-weight: 400; letter-spacing: 0; }
.wordmark-symbol { position: relative; width: 21px; height: 24px; flex: 0 0 auto; margin-right: 9px; border: 1px solid currentColor; border-radius: 50% 50% 46% 46%; }
.wordmark-symbol::before, .wordmark-symbol::after { position: absolute; left: 3px; width: 13px; border-top: 1px solid currentColor; content: ""; }
.wordmark-symbol::before { top: 10px; transform: rotate(-17deg); }
.wordmark-symbol::after { top: 15px; transform: rotate(11deg); }
.wordmark-auer { font-size: 13px; font-weight: 600; letter-spacing: .18em; }
.wordmark-field { margin-left: 4px; font-family: var(--serif); font-size: 21px; font-style: italic; letter-spacing: -.07em; line-height: .8; }

.capability-shell { padding: 130px 0; background: #d9d3c5; }
.capability-layout { display: grid; grid-template-columns: 1fr 2.8fr; gap: clamp(40px, 10vw, 150px); align-items: start; }
.capability-aside > p:not(.eyebrow) { max-width: 230px; margin: 20px 0 0; font-size: 13px; line-height: 1.55; }
.capability-current { max-width: 740px; padding: 34px 0 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capability-topline { display: flex; justify-content: space-between; color: rgba(28, 39, 29, .7); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.capability-current h2 { max-width: 590px; margin: 54px 0 23px; font-family: var(--serif); font-size: clamp(43px, 5vw, 74px); font-weight: 400; letter-spacing: -.055em; line-height: .96; }
.capability-current > p:not(.capability-next) { max-width: 495px; margin: 0; font-size: 16px; line-height: 1.6; }
.capability-next { margin: 41px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: #536247; font-size: 10px; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }

.bottom-navigation { position: fixed; z-index: 10; bottom: 21px; left: 50%; display: grid; grid-template-columns: repeat(4, auto); align-items: center; padding: 5px; border: 1px solid rgba(28, 39, 29, .18); border-radius: 999px; background: rgba(243, 240, 233, .88); box-shadow: 0 12px 35px rgba(27, 37, 26, .16); backdrop-filter: blur(16px); transform: translateX(-50%); }
.bottom-navigation button { min-width: 112px; padding: 10px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; transition: background 180ms ease, color 180ms ease; }
.bottom-navigation button span { margin-right: 7px; color: #6d795e; font-size: 8px; }
.bottom-navigation button.is-active { background: var(--pine); color: var(--paper-light); }
.bottom-navigation button.is-active span { color: #b8c1a8; }
.bottom-navigation button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 900px) {
  .capability-layout { grid-template-columns: 1fr 2fr; }
}

@media (max-width: 620px) {
  body { padding-bottom: 82px; }
  .capability-shell { padding: 82px 0; }
  .capability-layout { grid-template-columns: 1fr; gap: 35px; }
  .capability-aside > p:not(.eyebrow) { margin-top: 14px; }
  .capability-current { padding: 26px 0 31px; }
  .capability-current h2 { margin: 41px 0 18px; font-size: 45px; }
  .bottom-navigation { bottom: 12px; width: calc(100% - 24px); }
  .bottom-navigation button { min-width: 0; padding: 10px 4px; font-size: 9px; }
  .bottom-navigation button span { display: block; margin: 0 0 3px; font-size: 7px; }
}