.nav-dropdown { position: relative; display: grid; grid-template-columns: auto 24px; align-items: center; }
.nav-dropdown-trigger { position: relative; padding: 0; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.nav .nav-dropdown-trigger, .subpage-nav .nav-dropdown-trigger { padding: 28px 0; }
.nav .nav-dropdown-trigger::after, .subpage-nav .nav-dropdown-trigger::after { content: ""; position: absolute; right: 100%; bottom: 20px; left: 0; height: 2px; background: var(--green); transition: right .2s; }
.nav .nav-dropdown-trigger:hover::after, .nav .nav-dropdown-trigger:focus-visible::after, .nav .nav-dropdown-trigger[aria-current="page"]::after, .subpage-nav .nav-dropdown-trigger:hover::after, .subpage-nav .nav-dropdown-trigger:focus-visible::after, .subpage-nav .nav-dropdown-trigger[aria-current="page"]::after { right: 0; }
.nav-dropdown-trigger[aria-current="page"] { color: var(--green); }
.nav-dropdown-toggle { display: grid; width: 24px; height: 34px; place-items: center; padding: 0; color: var(--deep); background: transparent; border: 0; font-size: 16px; cursor: pointer; transition: transform .2s; }
.nav-dropdown.open .nav-dropdown-toggle { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: calc(100% - 12px); right: 0; z-index: 200; width: 248px; padding: 10px; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 38px rgba(23,52,43,.14); transition: opacity .18s, transform .18s, visibility .18s; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav .nav-dropdown-menu a, .subpage-nav .nav-dropdown-menu a { display: block; padding: 11px 13px; color: #33463e; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1.45; white-space: normal; }
.nav .nav-dropdown-menu a::after, .subpage-nav .nav-dropdown-menu a::after { display: none; }
.nav .nav-dropdown-menu a:hover, .nav .nav-dropdown-menu a:focus-visible, .subpage-nav .nav-dropdown-menu a:hover, .subpage-nav .nav-dropdown-menu a:focus-visible { color: var(--green); background: #eef5ef; }

@media(max-width:820px){
  .nav .nav-dropdown { grid-template-columns: 1fr 44px; width: 100%; }
  .nav .nav-dropdown-trigger { padding: 15px 4px; }
  .nav .nav-dropdown-toggle { width: 44px; height: 44px; }
  .nav .nav-dropdown-menu { position: static; grid-column: 1 / -1; display: none; width: 100%; padding: 5px 0 7px 14px; visibility: visible; opacity: 1; transform: none; pointer-events: auto; background: #f7faf8; border: 0; border-radius: 12px; box-shadow: none; }
  .nav .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav .nav-dropdown-menu a { padding: 10px 12px; }
}

@media(max-width:1050px){
  .subpage-nav .nav-dropdown { grid-template-columns: 1fr 44px; width: 100%; }
  .subpage-nav .nav-dropdown-trigger { padding: 14px 4px; }
  .subpage-nav .nav-dropdown-toggle { width: 44px; height: 44px; }
  .subpage-nav .nav-dropdown-menu { position: static; grid-column: 1 / -1; display: none; width: 100%; padding: 5px 0 7px 14px; visibility: visible; opacity: 1; transform: none; pointer-events: auto; background: #f7faf8; border: 0; border-radius: 12px; box-shadow: none; }
  .subpage-nav .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .subpage-nav .nav-dropdown-menu a { padding: 10px 12px; }
}