header { position: relative; width: 100%; z-index: 20; color: #FFFFFF; }
header > nav { display: flex; justify-content: space-between; }
header .brand { position: relative; font-family: "DM Sans", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 23px; letter-spacing: -.5px; }
header .brand img { display: block; height: auto; }
header .nav-links { display: flex; align-items: center; line-height: 1.4; }
header .nav-links a { color: inherit; text-decoration: none; opacity: .92; transition: .2s ease; }
header .nav-links a:hover { opacity: 1; }
header .nav-group { position: relative; }
header .nav-group > a, header .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 5px; }
header .nav-dropdown-toggle { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; cursor: pointer; opacity: .92; transition: .2s ease; }
header .nav-dropdown-toggle:hover { opacity: 1; }
header .nav-dropdown-toggle::after { content: none; display: none; }
header .nav-dropdown { display: none; position: absolute; top: 100%; left: -18px; min-width: 205px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 3px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
header .nav-dropdown a { display: block; font-size: 14px; white-space: nowrap; }
header .menu-toggle { display: none; color: #FFFFFF; border: 1px solid rgba(255,255,255,.65); background: transparent; border-radius: 100px; padding: 9px 14px; font: inherit; }
header .nav-cta { border: 0; padding: 0; border-radius: 0; background: transparent; }
@media (min-width: 851px) {
  header .nav-group:hover .nav-dropdown, header .nav-group:focus-within .nav-dropdown { display: grid; gap: 10px; }
}
@media (max-width: 850px) {
  header .nav-links { display: none; }
  header .menu-toggle { display: inline-flex; }
  header .nav-links.is-open { display: grid; position: absolute; left: 5%; width: 90%; gap: 0; padding: 12px 20px; border-radius: 3px; font-size: 15px; }
  header .nav-links.is-open > a, header .nav-links.is-open .nav-group > a, header .nav-links.is-open .nav-dropdown-toggle { display: flex; padding: 10px 0; }
  header .nav-links.is-open .nav-group .nav-dropdown { position: static; padding: 0 0 8px 14px; border: 0; box-shadow: none; gap: 5px; }
  header .nav-links.is-open .nav-group:not(.nav-group--craft) .nav-dropdown { display: grid; }
  header .nav-links.is-open .nav-group--craft .nav-dropdown { display: none; }
  header .nav-links.is-open .nav-group--craft.is-open .nav-dropdown { display: grid; }
  header .nav-links.is-open .nav-dropdown a { padding: 4px 0; }
  header .nav-links.is-open .nav-cta { justify-content: center; margin: 8px 0; padding: 10px 18px; }
}