@layer sections {
#navigation { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 18px var(--space-2); transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
#navigation[data-hidden="true"] { transform: translateY(-110%); }
#navigation .nav__logo { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; padding: 8px 14px 8px 8px; border-radius: var(--radius-2); background: var(--color-1); text-decoration: none; }
#navigation .nav__mark { width: 30px; aspect-ratio: 4 / 5; background: var(--color-5); border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
#navigation .nav__word { display: grid; font-family: var(--font-1); font-size: 23px; font-weight: 500; line-height: .9; letter-spacing: -0.04em; }
#navigation .nav__word span { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; }
#navigation .nav__menu { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--radius-2); background: var(--color-3); }
#navigation .nav__menu .m-link-2 { padding: 12px 14px; border-radius: var(--radius-2); background-position: 50% calc(100% - 9px); background-size: calc(100% - 28px) 0; }
@media (hover: hover) { #navigation .nav__menu .m-link-2:hover { background-size: calc(100% - 28px) 34%; } }
#navigation .nav__toggle { display: none; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--radius-2); background: var(--color-3); color: var(--color-2); font-size: 15px; font-weight: 500; cursor: pointer; }
#navigation .nav__bars { display: grid; gap: 5px; width: 18px; }
#navigation .nav__bars i { height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s cubic-bezier(.3, .7, .2, 1); }
@media (hover: hover) { #navigation .nav__toggle:hover .nav__bars i:first-child { transform: translateX(-4px); } #navigation .nav__toggle:hover .nav__bars i:last-child { transform: translateX(4px); } }
#navigation .nav__sheet { position: fixed; inset: 0; z-index: 50; display: grid; align-content: space-between; gap: 32px; padding: 96px var(--space-2) 32px; background: var(--color-5); color: var(--color-2); }
#navigation .nav__sheet[hidden] { display: none; }
#navigation .nav__sheet-links { display: grid; gap: 4px; }
#navigation .nav__sheet-links a { font-family: var(--font-1); font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; text-decoration: none; }
#navigation .nav__close { position: absolute; top: 18px; right: var(--space-2); }
@media (max-width: 900px) {
  #navigation { padding: 12px var(--space-2); }
  #navigation .nav__menu, #navigation .nav__cta { display: none; }
  #navigation .nav__toggle { display: inline-flex; }
}
}