diff --git a/blocks/header/header.css b/blocks/header/header.css
index f414ca7..3dc9ea8 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -1,272 +1,615 @@
-/* header and nav layout */
-header .nav-wrapper {
-  position: fixed;
-  z-index: 2;
-  width: 100%;
-  background-color: var(--color-bg);
+body > header {
+  height: var(--nav-height);
+  background-color: var(--color-black);
+  color: var(--color-bg);
 }
 
-header nav {
+header .header {
   display: grid;
   grid-template:
-    'hamburger brand tools' var(--nav-height)
-    'sections sections sections' 1fr / auto 1fr auto;
+    'hamburger logo' auto
+    'search search' auto / 44px 1fr;
   align-items: center;
-  gap: 0 var(--space-m);
-  box-sizing: border-box;
-  height: var(--nav-height);
-  max-width: 1248px;
-  margin: auto;
-  padding: 0 var(--space-m);
-  font-family: var(--body-font-family);
+  gap: var(--space-l) var(--space-s);
+  max-width: var(--site-width);
+  margin: 0 auto;
+  padding: var(--space-s) var(--space-l);
 }
 
-header nav[aria-expanded='true'] {
+header .header[data-nav] {
   grid-template:
-    'hamburger brand' var(--nav-height)
-    'sections sections' 1fr
-    'tools tools' var(--nav-height) / auto 1fr;
-  overflow-y: auto;
-  min-height: 100dvh;
+  'hamburger logo .' auto
+  'nav nav nav' 1fr
+  'language language language' auto / 44px 1fr 44px;
+  gap: var(--space-s);
+  position: fixed;
+  inset: 0;
+  z-index: 2;
+  max-height: 100dvh;
+  background-image: linear-gradient(var(--color-black) 104px, var(--color-bg) 104px);
 }
 
-@media (width >= 900px) {
-  header .nav-wrapper {
-    position: relative;
+@media (width >= 400px) {
+  header .header {
+    grid-template:
+      'hamburger logo .' auto
+      'search search search' auto / 44px 1fr 44px;
   }
+}
 
-  header nav {
-    display: flex;
-    justify-content: space-between;
-    gap: 0 var(--space-l);
-    max-width: 1264px;
-    padding: 0 var(--space-l);
+@media (width >= 900px) {
+  header .header {
+    padding: var(--space-s);
   }
+}
 
-  header nav[aria-expanded='true'] {
-    overflow: visible;
-    min-height: 0;
+@media (width >= 1200px) {
+  header .header {
+    grid-template:
+      'logo search search' auto
+      'nav nav language' auto / auto 1fr auto;
+    gap: 0 var(--space-m);
+    padding-bottom: 0;
   }
 }
 
-header nav p {
+header .header p {
   margin: 0;
-  line-height: 1;
 }
 
-header nav a:any-link {
-  color: currentcolor;
+header .header a {
+  color: inherit;
+  text-decoration: none;
 }
 
-/* hamburger */
-header nav .nav-hamburger {
+header .header ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* HEADER LOGO */
+
+header .header-logo {
+  grid-area: logo;
+  justify-self: center;
+  padding: var(--space-s) 0;
+}
+
+header .header-logo img,
+header .header-logo svg {
+  display: block;
+  max-height: 40px;
+  width: auto;
+}
+
+/* HEADER SEARCH */
+
+header .header-search {
+  grid-area: search;
+}
+
+header [data-nav] .header-search {
+  display: none;
+}
+
+header .header-search form {
   display: flex;
-  grid-area: hamburger;
-  align-items: center;
-  height: 22px;
+  align-items: stretch;
+  overflow: hidden;
+  border-radius: var(--radius-s);
+  background-color: var(--color-bg);
+  color: var(--color-text);
 }
 
-header nav .nav-hamburger button {
-  overflow: initial;
-  height: 22px;
-  margin: 0;
-  border: 0;
+header .header-search input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  padding: var(--space-xs) var(--space-s);
+  background: none;
+  color: inherit;
+}
+
+header .header-search input:focus {
+  outline: none;
+}
+
+header .header-search button {
+  height: 44px;
+  width: 44px;
   border-radius: 0;
   padding: 0;
-  background-color: var(--color-bg);
+}
+
+header .header-search button .icon img,
+header .header-search button .icon svg {
+  display: block;
+  height: 1.25em;
+  width: 1.25em;
+}
+
+/* stylelint-disable no-descending-specificity */
+
+/* HEADER HAMBURGER */
+
+header .header-hamburger {
+  grid-area: hamburger;
+}
+
+header .header-hamburger button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 44px;
+  width: 44px;
+  border: none;
+  padding: 0;
+  background: none;
   color: inherit;
-  text-overflow: initial;
-  white-space: initial;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+header .header-hamburger button:hover,
+header .header-hamburger button:focus-visible {
+  transform: scale(1.2);
 }
 
-header nav .nav-hamburger-icon,
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
+header .header-hamburger .icon-hamburger,
+header .header-hamburger .icon-hamburger::before,
+header .header-hamburger .icon-hamburger::after {
   display: block;
+  height: 4px;
+  width: 28px;
+  background-color: currentcolor;
+  transition: transform 0.2s, background-color 0.2s;
+}
+
+header .header-hamburger .icon-hamburger {
   position: relative;
-  box-sizing: border-box;
-  width: 20px;
 }
 
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
+header .header-hamburger .icon-hamburger::before,
+header .header-hamburger .icon-hamburger::after {
   content: '';
   position: absolute;
-  background: currentcolor;
-}
-
-header nav[aria-expanded='false'] .nav-hamburger-icon,
-header nav[aria-expanded='false'] .nav-hamburger-icon::before,
-header nav[aria-expanded='false'] .nav-hamburger-icon::after {
-  height: 2px;
-  border-radius: 2px;
-  background: currentcolor;
+  left: 0;
 }
 
-header nav[aria-expanded='false'] .nav-hamburger-icon::before {
-  top: -6px;
+header .header-hamburger .icon-hamburger::before {
+  top: -10px;
 }
 
-header nav[aria-expanded='false'] .nav-hamburger-icon::after {
-  top: 6px;
+header .header-hamburger .icon-hamburger::after {
+  top: 10px;
 }
 
-header nav[aria-expanded='true'] .nav-hamburger-icon {
-  height: 22px;
+header .header-hamburger button[aria-expanded='true'] .icon-hamburger {
+  background-color: transparent;
 }
 
-header nav[aria-expanded='true'] .nav-hamburger-icon::before,
-header nav[aria-expanded='true'] .nav-hamburger-icon::after {
-  top: 3px;
-  left: 1px;
-  height: 2px;
-  width: 24px;
-  border-radius: 2px;
-  transform: rotate(45deg);
-  transform-origin: 2px 1px;
+header .header-hamburger button[aria-expanded='true'] .icon-hamburger::before {
+  transform: translateY(10px) rotate(45deg);
 }
 
-header nav[aria-expanded='true'] .nav-hamburger-icon::after {
-  top: unset;
-  bottom: 3px;
-  transform: rotate(-45deg);
+header .header-hamburger button[aria-expanded='true'] .icon-hamburger::after {
+  transform: translateY(-10px) rotate(-45deg);
 }
 
-@media (width >= 900px) {
-  header nav .nav-hamburger {
+@media (width >= 1200px) {
+  header .header-hamburger {
     display: none;
-    visibility: hidden;
   }
 }
 
-/* brand */
-header .nav-brand {
-  flex-basis: 128px;
-  grid-area: brand;
-  font-size: var(--heading-s);
-  font-weight: 700;
-  line-height: 1;
+/* HEADER NAV */
+
+header .header-nav {
+  display: none;
+  grid-area: nav;
 }
 
-header nav .nav-brand img {
-  height: auto;
-  width: 128px;
+header .header-nav[data-expanded] {
+  display: block;
+  align-self: start;
+  overflow-y: auto;
+  max-height: calc(100% - var(--space-s));
+  margin-top: var(--space-s);
+  background-color: var(--color-bg);
+  color: var(--color-text);
 }
 
-/* sections */
-header nav .nav-sections {
+/* top-level list items */
+header .header-nav > ul > li > ul {
   display: none;
-  flex: 1 1 auto;
-  grid-area: sections;
-  visibility: hidden;
 }
 
-header nav[aria-expanded='true'] .nav-sections {
+header .header-nav > ul > li > button,
+header .header-nav > ul > li > a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1ch;
+  width: 100%;
+  border: none;
+  padding: 1.2em 0;
+  background: none;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+header .header-nav > ul > li > button:hover,
+header .header-nav > ul > li > button:focus-visible,
+header .header-nav > ul > li > a:hover,
+header .header-nav > ul > li > a:focus-visible {
+  color: var(--color-link);
+}
+
+header .header-nav > ul > li > button:focus-visible {
+  outline: 1px solid var(--color-border);
+}
+
+/* mobile push panel */
+header .header-nav[data-submenu='expanded'] > ul > li {
+  display: none;
+}
+
+header .header-nav[data-submenu='expanded'] > ul > li[data-active] {
   display: block;
-  align-self: start;
-  visibility: visible;
 }
 
-header nav .nav-sections ul {
-  list-style: none;
-  padding-left: 0;
-  font-size: var(--text-m);
+header .header-nav[data-submenu='expanded'] > ul > li[data-active] > button {
+  display: none;
 }
 
-header nav .nav-sections ul > li {
-  font-weight: 400;
+header .header-nav[data-submenu='expanded'] > ul > li[data-active] > ul {
+  display: block;
 }
 
-header nav .nav-sections ul > li > ul {
-  margin-top: 0;
+header .header-nav[data-submenu='expanded'] > ul > li[data-active] > ul:not(.submenu-multi) > li:not([class]) {
+  padding: 0.8em 0;
 }
 
-header nav .nav-sections ul > li > ul > li {
-  font-weight: 400;
+header .header-nav[data-submenu='expanded'] > ul > li[data-active] > ul > li a {
+  display: block;
 }
 
-@media (width >= 900px) {
-  header nav .nav-sections {
+header .header-nav[data-submenu='expanded'] > ul > li[data-active] > ul > li a:hover {
+  text-decoration: underline;
+}
+
+/* submenu back button */
+header .header-nav .submenu-back button {
+  display: flex;
+  align-items: center;
+  gap: 1ch;
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid var(--color-border);
+  padding: 1.2em 0;
+  background: none;
+  color: inherit;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+header .header-nav .submenu-back button:hover,
+header .header-nav .submenu-back button:focus-visible {
+  color: var(--color-link);
+}
+
+header .header-nav .submenu-back button:focus-visible {
+  outline: 1px solid var(--color-border);
+}
+
+/* flat submenu items */
+header .header-nav .submenu:not(.submenu-multi) > li:not(.submenu-back) {
+  border-bottom: 1px solid var(--color-border);
+}
+
+header .header-nav .submenu:not(.submenu-multi) > li:not(.submenu-back) > a {
+  display: block;
+  padding: var(--space-s) var(--space-m);
+}
+
+header .header-nav .submenu:not(.submenu-multi) > li:not(.submenu-back) > a:hover,
+header .header-nav .submenu:not(.submenu-multi) > li:not(.submenu-back) > a:focus-visible {
+  background-color: var(--color-bg-light);
+}
+
+/* multi-nav accordion */
+header .header-nav .submenu-multi > li:not(.submenu-back) > button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+  width: 100%;
+  border: none;
+  padding: 1.2em 0;
+  background: none;
+  color: inherit;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+header .header-nav .submenu-multi > li:not(.submenu-back) > button .icon {
+  padding: 0 1ch;
+}
+
+header .header-nav .submenu-multi > li:not(.submenu-back) > button:hover,
+header .header-nav .submenu-multi > li:not(.submenu-back) > button:focus-visible {
+  color: var(--color-link);
+}
+
+header .header-nav .submenu-multi > li:not(.submenu-back) > button[aria-expanded='true'] {
+  outline: 1px solid var(--color-border);
+}
+
+header .header-nav .submenu-multi > li > button[aria-expanded='true'] .icon img,
+header .header-nav .submenu-multi > li > button[aria-expanded='true'] .icon svg {
+  transform: rotate(-180deg);
+}
+
+/* category sub-list */
+header .header-nav .submenu-multi > li > button + ul {
+  display: none;
+}
+
+header .header-nav .submenu-multi > li > button[aria-expanded='true'] + ul {
+  display: block;
+}
+
+header .header-nav .submenu-multi > li > button[aria-expanded='true'] + ul > li > a {
+  display: block;
+  padding: 0.8em 0;
+}
+
+@media (width >= 1200px) {
+  header .header-nav {
     display: block;
-    visibility: visible;
-    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    background: none;
+    color: var(--color-bg);
   }
 
-  header nav[aria-expanded='true'] .nav-sections {
-    align-self: unset;
+  header .header-nav > ul {
+    display: flex;
+    align-items: center;
+    gap: 0.6em;
+  }
+
+  header .header-nav > ul > li {
+    position: static;
+  }
+
+  header .header-nav > ul > li .icon {
+    transform: rotate(90deg);
+  }
+
+  header .header-nav > ul > li > button,
+  header .header-nav > ul > li > a {
+    justify-content: flex-start;
+    gap: 1ch;
+    width: auto;
+    padding: 0.6em;
+    color: inherit;
+    font-weight: normal;
+    text-transform: none;
+    transition: background-color 0.2s, color 0.2s;
   }
 
-  header nav .nav-sections .nav-drop {
+  header .header-nav > ul > li > button:hover,
+  header .header-nav > ul > li > button:focus-visible,
+  header .header-nav > ul > li > a:hover,
+  header .header-nav > ul > li > a:focus-visible {
+    background-color: var(--color-muted);
+    color: var(--color-brand);
+  }
+
+  header .header-nav > ul > li > button[aria-expanded='true'] {
     position: relative;
-    padding-right: var(--space-s);
-    cursor: pointer;
+    color: var(--color-brand);
   }
 
-  header nav .nav-sections .nav-drop::after {
+  header .header-nav > ul > li > button[aria-expanded='true']::after {
     content: '';
-    display: inline-block;
     position: absolute;
-    top: 0.5em;
-    right: 2px;
-    height: 6px;
-    width: 6px;
-    border: 2px solid currentcolor;
-    border-radius: 0 1px 0 0;
-    border-width: 2px 2px 0 0;
-    transform: rotate(135deg);
+    inset: auto 0 0;
+    height: 5px;
+    border-radius: var(--radius-m) var(--radius-m) 0 0;
+    background: currentcolor;
+  }
+
+  header .header-nav > ul > li > button[aria-expanded='true'] .icon img,
+  header .header-nav > ul > li > button[aria-expanded='true'] .icon svg {
+    transform: rotate(90deg);
   }
 
-  header nav .nav-sections .nav-drop[aria-expanded='true']::after {
-    top: unset;
-    bottom: 0.5em;
-    transform: rotate(315deg);
+  header .header-nav[data-submenu='expanded'] > ul > li {
+    display: block;
   }
 
-  header nav .nav-sections ul {
+  header .header-nav[data-submenu='expanded'] > ul > li[data-active] > button {
     display: flex;
-    gap: var(--space-m);
-    margin: 0;
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li {
-    flex: 0 1 auto;
-    position: relative;
+  /* flat dropdown */
+  header .header-nav > ul > li > button[aria-expanded='true'] + ul:not(.submenu-multi) {
+    display: block;
+    column-fill: auto;
+    column-width: 240px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    height: 240px;
+    padding: var(--space-s) 0;
+    box-shadow: var(--shadow-s);
+    background-color: var(--color-bg);
+    color: var(--color-text);
+  }
+
+  header .header-nav[data-submenu='expanded'] > ul > li[data-active] > ul:not(.submenu-multi) > li:not([class]) {
+    padding: 0;
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li > ul {
+  header .header-nav .submenu:not(.submenu-multi) > li:not(.submenu-back) {
+    border: none;
+    break-inside: avoid;
+  }
+
+  header .header-nav .submenu:not(.submenu-multi) > li:not(.submenu-back) > a {
+    padding: var(--space-xs) 0;
+  }
+
+  header .header-nav[data-submenu='expanded'] > ul > li[data-active] > ul > li a {
+    padding: 0.8em 1.2em;
+    transition: background-color 0.2s, color 0.2s;
+  }
+
+  header .header-nav[data-submenu='expanded'] > ul > li[data-active] > ul > li a:hover {
+    background-color: var(--color-bg-light);
+    color: var(--color-link);
+    text-decoration: none;
+  }
+
+  header .header-nav .submenu:not(.submenu-multi) > li:not(.submenu-back) > a:hover,
+  header .header-nav .submenu:not(.submenu-multi) > li:not(.submenu-back) > a:focus-visible {
+    background: none;
+    text-decoration: underline;
+  }
+
+  header .header-nav .submenu-back {
     display: none;
-    position: relative;
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul {
+  /* multi-nav split pane */
+  header .header-nav > ul > li > button[aria-expanded='true'] + ul.submenu-multi {
     display: block;
     position: absolute;
-    top: 150%;
-    left: -24px;
-    width: 200px;
-    padding: var(--space-s);
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    min-height: 240px;
+    box-shadow: var(--shadow-s);
+    background-color: var(--color-bg);
+    color: var(--color-text);
+  }
+
+  header .header-nav .submenu-multi {
+    padding: var(--space-s) 0;
+  }
+
+  /* left rail */
+  header .header-nav .submenu-multi > li:not(.submenu-back) {
+    width: 240px;
+  }
+
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button {
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+    padding: 0.8em 1.2em;
+    font-weight: normal;
+    text-transform: uppercase;
+  }
+
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button[aria-expanded='true'] {
+    border-bottom: 2px solid var(--color-brand);
+    font-weight: bold;
+  }
+
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button .icon {
+    display: none;
+  }
+
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button[aria-expanded='false']:hover,
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button[aria-expanded='false']:focus-visible {
     background-color: var(--color-bg-light);
-    white-space: initial;
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
-    content: '';
+  /* right pane */
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button + ul {
+    display: none;
+  }
+
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button[aria-expanded='true'] + ul {
+    display: block;
+    column-fill: auto;
+    column-width: 240px;
     position: absolute;
-    top: -8px;
-    left: 16px;
-    height: 0;
-    width: 0;
-    border-left: 8px solid transparent;
-    border-bottom: 8px solid var(--color-bg-light);
-    border-right: 8px solid transparent;
+    inset: 0 0 0 240px;
+    margin: var(--space-s);
+    margin-right: 0;
+    border-left: 1px solid var(--color-border);
   }
 
-  header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
-    padding: var(--space-xs) 0;
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button[aria-expanded='true'] + ul > li {
+    break-inside: avoid;
+  }
+
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button[aria-expanded='true'] + ul > li:first-of-type {
+    text-transform: uppercase;
   }
+
+  header .header-nav .submenu-multi > li:not(.submenu-back) > button[aria-expanded='true'] + ul > li > a {
+    padding: 0.8em 1.2em;
+  }
+}
+
+/* HEADER LANGUAGE SELECTOR */
+
+header .header-language {
+  display: none;
+  grid-area: language;
+  align-self: start;
+  color: var(--color-text);
+  text-transform: uppercase;
+}
+
+header .header[data-nav] .header-language {
+  display: block;
+}
+
+header .header-language ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
 }
 
-/* tools */
-header nav .nav-tools {
-  grid-area: tools;
+header .header-language a {
+  display: flex;
+  align-items: center;
+  gap: 0.5ch;
+}
+
+header .header-language .icon img,
+header .header-language .icon svg {
+  display: block;
+  height: 1.25em;
+  width: 1.25em;
+}
+
+@media (width >= 1200px) {
+  header .header-language {
+    display: flex;
+    align-self: center;
+  }
+
+  header .header-language ul {
+    flex-direction: row;
+    gap: var(--space-s);
+  }
+
+  header .header-language a {
+    color: var(--color-bg);
+  }
 }
diff --git a/blocks/header/header.js b/blocks/header/header.js
index c7d6ea2..c373678 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -1,171 +1,358 @@
-import { getMetadata } from '../../scripts/aem.js';
+import { getMetadata, decorateIcons } from '../../scripts/aem.js';
+import { decorateExternalLinks } from '../../scripts/scripts.js';
 import { loadFragment } from '../fragment/fragment.js';
 
-// media query match that indicates mobile/tablet width
-const isDesktop = window.matchMedia('(min-width: 900px)');
-
-function closeOnEscape(e) {
-  if (e.code === 'Escape') {
-    const nav = document.getElementById('nav');
-    const navSections = nav.querySelector('.nav-sections');
-    if (!navSections) return;
-    const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]');
-    if (navSectionExpanded && isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleAllNavSections(navSections);
-      navSectionExpanded.focus();
-    } else if (!isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleMenu(nav, navSections);
-      nav.querySelector('button').focus();
-    }
-  }
+/**
+ * Returns a named header section from within the block.
+ * @param {Element} block - The header block element
+ * @param {string} sectionName - The section name, matching the header-{name} class
+ * @returns {Element|null} The section element, or `null` if not found
+ */
+function getSection(block, sectionName) {
+  return block.querySelector(`.header-${sectionName}`);
 }
 
-function closeOnFocusLost(e) {
-  const nav = e.currentTarget;
-  if (!nav.contains(e.relatedTarget)) {
-    const navSections = nav.querySelector('.nav-sections');
-    if (!navSections) return;
-    const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]');
-    if (navSectionExpanded && isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleAllNavSections(navSections, false);
-    } else if (!isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleMenu(nav, navSections, false);
-    }
+/**
+ * Wraps the logo image in its anchor if an href is present.
+ * @param {Element} section - The logo section element
+ */
+function decorateLogo(section) {
+  const img = section.querySelector('img, svg');
+  if (!img) return;
+  const link = section.querySelector('a[href]');
+  if (link) {
+    const picture = img.closest('picture') || img;
+    link.textContent = '';
+    link.append(picture);
+    section.textContent = '';
+    section.append(link);
   }
 }
 
-function openOnKeydown(e) {
-  const focused = document.activeElement;
-  const isNavDrop = focused.className === 'nav-drop';
-  if (isNavDrop && (e.code === 'Enter' || e.code === 'Space')) {
-    const dropExpanded = focused.getAttribute('aria-expanded') === 'true';
-    // eslint-disable-next-line no-use-before-define
-    toggleAllNavSections(focused.closest('.nav-sections'));
-    focused.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true');
-  }
-}
+/**
+ * Replaces the section div with a semantic nav element and decorates all nav items.
+ * @param {Element} section - The nav section element to promote
+ */
+function decorateNav(section) {
+  const list = section.querySelector('ul');
+  if (!list) return;
+
+  list.querySelectorAll(':scope > li').forEach((item) => {
+    const p = item.querySelector(':scope > p');
+    const submenu = item.querySelector(':scope > ul');
+    if (!p) return;
+
+    const label = p.textContent.trim();
+
+    if (submenu) {
+      // top-level trigger button
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.setAttribute('aria-expanded', false);
+      button.setAttribute('aria-haspopup', true);
+      button.textContent = label;
+      const chevron = document.createElement('span');
+      chevron.classList.add('icon', 'icon-chevron', 'chevron-right');
+      button.append(chevron);
+      p.replaceWith(button);
+
+      // back button injected as first child of every submenu
+      const backLi = document.createElement('li');
+      backLi.classList.add('submenu-back');
+      const backBtn = document.createElement('button');
+      backBtn.type = 'button';
+      const backArrow = document.createElement('span');
+      backArrow.classList.add('icon', 'icon-arrow', 'arrow-left');
+      const backLabel = document.createElement('span');
+      backLabel.textContent = label;
+      backBtn.append(backArrow, backLabel);
+      backLi.append(backBtn);
+      submenu.prepend(backLi);
+
+      // detect multi-nav: any submenu li that has both a <p> and a <ul>
+      const isMulti = [...submenu.querySelectorAll(':scope > li')].some(
+        (li) => li.querySelector(':scope > p') && li.querySelector(':scope > ul'),
+      );
+
+      if (isMulti) {
+        submenu.classList.add('submenu-multi');
+
+        submenu.querySelectorAll(':scope > li:not(.submenu-back)').forEach((catItem, i) => {
+          const catP = catItem.querySelector(':scope > p');
+          if (!catP) return;
+
+          const catBtn = document.createElement('button');
+          catBtn.type = 'button';
+          // first category open by default on desktop only
+          catBtn.setAttribute('aria-expanded', i === 0 && window.matchMedia('(min-width: 1200px)').matches);
+          catBtn.textContent = catP.textContent.trim();
+          const catChevron = document.createElement('span');
+          catChevron.classList.add('icon', 'icon-chevron');
+          catBtn.append(catChevron);
+
+          catBtn.addEventListener('click', () => {
+            const expanded = catBtn.getAttribute('aria-expanded') === 'true';
+            // desktop: never close the active category, only switch
+            if (expanded && window.matchMedia('(min-width: 1200px)').matches) return;
+            // mutual exclusion within this submenu-multi
+            submenu.querySelectorAll(':scope > li > button[aria-expanded="true"]').forEach((open) => {
+              open.setAttribute('aria-expanded', false);
+            });
+            // mobile: toggle; desktop always opens
+            if (!expanded) catBtn.setAttribute('aria-expanded', true);
+          });
 
-function focusNavSection() {
-  document.activeElement.addEventListener('keydown', openOnKeydown);
+          catP.replaceWith(catBtn);
+        });
+      }
+
+      // top-level button click: toggle this item, close siblings, manage push-panel state
+      button.addEventListener('click', () => {
+        const expanded = button.getAttribute('aria-expanded') === 'true';
+        const nav = button.closest('nav');
+
+        // close any other open top-level buttons and clear their state
+        list.querySelectorAll(':scope > li > button[aria-expanded="true"]').forEach((open) => {
+          if (open !== button) {
+            open.setAttribute('aria-expanded', false);
+            open.closest('li').removeAttribute('data-active');
+          }
+        });
+
+        if (!expanded) {
+          button.setAttribute('aria-expanded', true);
+          item.dataset.active = '';
+          nav.dataset.submenu = 'expanded';
+          if (!window.matchMedia('(min-width: 1200px)').matches) backBtn.focus();
+        } else {
+          button.setAttribute('aria-expanded', false);
+          item.removeAttribute('data-active');
+          nav.removeAttribute('data-submenu');
+        }
+      });
+
+      // back button click: return to top-level list
+      backBtn.addEventListener('click', () => {
+        button.setAttribute('aria-expanded', false);
+        item.removeAttribute('data-active');
+        const nav = backBtn.closest('nav');
+        nav.removeAttribute('data-submenu');
+        button.focus();
+      });
+    } else {
+      const link = p.querySelector('a');
+      if (link) p.replaceWith(link);
+    }
+  });
+
+  const nav = document.createElement('nav');
+  nav.id = 'nav';
+  nav.classList.add(...section.classList);
+  nav.append(list);
+  section.replaceWith(nav);
+
+  // close all on click outside
+  document.addEventListener('click', (e) => {
+    if (nav.contains(e.target)) return;
+    nav.querySelectorAll('button[aria-expanded="true"]').forEach((open) => {
+      open.setAttribute('aria-expanded', false);
+    });
+    nav.querySelectorAll('[data-active]').forEach((el) => el.removeAttribute('data-active'));
+    nav.removeAttribute('data-submenu');
+  });
+
+  // close all on Escape
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    const open = nav.querySelector(':scope > ul > li > button[aria-expanded="true"]');
+    if (!open) return;
+    nav.querySelectorAll('button[aria-expanded="true"]').forEach((btn) => {
+      btn.setAttribute('aria-expanded', false);
+    });
+    nav.querySelectorAll('[data-active]').forEach((el) => el.removeAttribute('data-active'));
+    nav.removeAttribute('data-submenu');
+    open.focus();
+  });
 }
 
 /**
- * Toggles all nav sections
- * @param {Element} sections The container element
- * @param {Boolean} expanded Whether the element should be expanded or collapsed
+ * Builds a search form with an input and submit button inside the section.
+ * @param {Element} section - The search section element
  */
-function toggleAllNavSections(sections, expanded = false) {
-  if (!sections) return;
-  sections.querySelectorAll('.nav-sections .default-content-wrapper > ul > li').forEach((section) => {
-    section.setAttribute('aria-expanded', expanded);
+function decorateSearch(section) {
+  const p = section.querySelector('p');
+  const placeholder = p ? p.textContent.trim() : 'Search'; // TODO: localization
+
+  const form = document.createElement('form');
+  form.setAttribute('role', 'search');
+
+  const input = document.createElement('input');
+  input.type = 'search';
+  input.id = 'header-search';
+  input.placeholder = placeholder;
+  input.setAttribute('aria-label', placeholder);
+  input.setAttribute('autocomplete', 'off');
+
+  const submitBtn = document.createElement('button');
+  submitBtn.classList.add('button', 'cta');
+  submitBtn.type = 'submit';
+  submitBtn.setAttribute('aria-label', placeholder);
+  const searchIcon = document.createElement('span');
+  searchIcon.classList.add('icon', 'icon-search');
+  submitBtn.append(searchIcon);
+
+  form.append(input, submitBtn);
+  section.textContent = '';
+  section.append(form);
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const query = input.value.trim();
+    if (query) {
+      const q = encodeURIComponent(query);
+      const path = encodeURIComponent(window.location.pathname);
+      window.location.href = `/en/search/search-results.html?search=${q}&pagePath=${path}`;
+    }
   });
 }
 
 /**
- * Toggles the entire nav
- * @param {Element} nav The container element
- * @param {Element} navSections The nav sections within the container element
- * @param {*} forceExpanded Optional param to force nav expand behavior when not null
+ * Decorates the language selector and marks the current locale.
+ * @param {Element} section - The language section element
  */
-function toggleMenu(nav, navSections, forceExpanded = null) {
-  const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true';
-  const button = nav.querySelector('.nav-hamburger button');
-  document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden';
-  nav.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-  toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true');
-  button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation');
-  // enable nav dropdown keyboard accessibility
-  if (navSections) {
-    const navDrops = navSections.querySelectorAll('.nav-drop');
-    if (isDesktop.matches) {
-      navDrops.forEach((drop) => {
-        if (!drop.hasAttribute('tabindex')) {
-          drop.setAttribute('tabindex', 0);
-          drop.addEventListener('focus', focusNavSection);
-        }
+function decorateLanguage(section) {
+  // referenced by hamburger's aria-controls
+  section.id = 'header-language';
+
+  const currentItem = section.querySelector('strong');
+  if (!currentItem) return;
+
+  const link = currentItem.querySelector('a[href]');
+  if (!link) return;
+
+  link.setAttribute('aria-current', true);
+
+  const globe = document.createElement('span');
+  globe.classList.add('icon', 'icon-globe');
+  link.prepend(globe);
+
+  // unwrap <strong>, keeping only the <a> with icon
+  currentItem.replaceWith(link);
+}
+
+/**
+ * Builds the hamburger button that controls the mobile nav and language overlay.
+ * @returns {Element} - The hamburger section element
+ */
+function buildHamburger() {
+  const wrapper = document.createElement('div');
+  wrapper.classList.add('section', 'header-hamburger');
+
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.setAttribute('aria-expanded', false);
+  button.setAttribute('aria-controls', 'nav header-language');
+  button.setAttribute('aria-label', 'Menu'); // TODO: localization
+
+  const icon = document.createElement('span');
+  icon.classList.add('icon-hamburger');
+  button.append(icon);
+
+  button.addEventListener('click', () => {
+    const expanded = button.getAttribute('aria-expanded') === 'true';
+    button.setAttribute('aria-expanded', !expanded);
+
+    const headerEl = button.closest('.header');
+    const nav = headerEl.querySelector('#nav');
+    const main = nav.closest('main');
+    if (!nav) return;
+    if (!expanded) { // opening
+      nav.dataset.expanded = '';
+      headerEl.dataset.nav = 'expanded';
+      document.body.dataset.scroll = 'disabled';
+      main.setAttribute('inert', '');
+    } else { // closing; reset all sub-state too
+      delete nav.dataset.expanded;
+      nav.removeAttribute('data-submenu');
+      nav.querySelectorAll('[data-active]').forEach((el) => el.removeAttribute('data-active'));
+      nav.querySelectorAll('button[aria-expanded="true"]').forEach((btn) => {
+        btn.setAttribute('aria-expanded', false);
       });
-    } else {
-      navDrops.forEach((drop) => {
-        drop.removeAttribute('tabindex');
-        drop.removeEventListener('focus', focusNavSection);
+      delete headerEl.dataset.nav;
+      delete document.body.dataset.scroll;
+      main.removeAttribute('inert');
+    }
+  });
+
+  // sync nav state when viewport crosses the desktop breakpoint
+  window.matchMedia('(min-width: 1200px)').addEventListener('change', (e) => {
+    const headerEl = button.closest('.header');
+    const nav = headerEl.querySelector('#nav');
+    const main = nav.closest('main');
+
+    if (e.matches) {
+      // crossed into desktop: clean up mobile state, then open first category in each submenu-multi
+      button.setAttribute('aria-expanded', false);
+      if (nav) {
+        delete nav.dataset.expanded;
+        nav.removeAttribute('data-submenu');
+        nav.querySelectorAll('[data-active]').forEach((el) => el.removeAttribute('data-active'));
+        nav.querySelectorAll('button[aria-expanded="true"]').forEach((btn) => {
+          btn.setAttribute('aria-expanded', false);
+        });
+        nav.querySelectorAll('.submenu-multi').forEach((multi) => {
+          const firstBtn = multi.querySelector(':scope > li:not(.submenu-back) > button');
+          if (firstBtn) firstBtn.setAttribute('aria-expanded', true);
+        });
+      }
+      delete headerEl.dataset.nav;
+      delete document.body.dataset.scroll;
+      main.removeAttribute('inert');
+    } else if (nav) {
+      // crossed into mobile: collapse all submenu-multi categories
+      nav.querySelectorAll('.submenu-multi > li > button[aria-expanded="true"]').forEach((btn) => {
+        btn.setAttribute('aria-expanded', false);
       });
     }
-  }
+  });
 
-  // enable menu collapse on escape keypress
-  if (!expanded || isDesktop.matches) {
-    // collapse menu on escape press
-    window.addEventListener('keydown', closeOnEscape);
-    // collapse menu on focus lost
-    nav.addEventListener('focusout', closeOnFocusLost);
-  } else {
-    window.removeEventListener('keydown', closeOnEscape);
-    nav.removeEventListener('focusout', closeOnFocusLost);
-  }
+  wrapper.append(button);
+  return wrapper;
 }
 
 /**
- * loads and decorates the header, mainly the nav
- * @param {Element} block The header block element
+ * Loads and decorates the header, including the nav.
+ * @param {Element} block - The header block element
  */
 export default async function decorate(block) {
-  // load nav as fragment
   const navMeta = getMetadata('nav');
   const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav';
   const fragment = await loadFragment(navPath);
 
-  // decorate nav DOM
   block.textContent = '';
-  const nav = document.createElement('nav');
-  nav.id = 'nav';
-  while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
+  block.append(...fragment.children);
 
-  const classes = ['brand', 'sections', 'tools'];
-  classes.forEach((c, i) => {
-    const section = nav.children[i];
-    if (section) section.classList.add(`nav-${c}`);
+  const sections = ['logo', 'nav', 'language', 'search'];
+  sections.forEach((s, i) => {
+    const section = block.children[i];
+    if (section) section.classList.add(`header-${s}`);
   });
 
-  const navBrand = nav.querySelector('.nav-brand');
-  const brandLink = navBrand.querySelector('.button');
-  if (brandLink) {
-    brandLink.className = '';
-    brandLink.closest('.button-container').className = '';
-  }
+  const logo = getSection(block, 'logo');
+  if (logo) decorateLogo(logo);
 
-  const navSections = nav.querySelector('.nav-sections');
-  if (navSections) {
-    navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
-      if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
-      navSection.addEventListener('click', () => {
-        if (isDesktop.matches) {
-          const expanded = navSection.getAttribute('aria-expanded') === 'true';
-          toggleAllNavSections(navSections);
-          navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-        }
-      });
-    });
-  }
+  const nav = getSection(block, 'nav');
+  if (nav) decorateNav(nav);
+
+  const language = getSection(block, 'language');
+  if (language) decorateLanguage(language);
+
+  const search = getSection(block, 'search');
+  if (search) decorateSearch(search);
+
+  const hamburger = buildHamburger();
+  block.prepend(hamburger);
 
-  // hamburger for mobile
-  const hamburger = document.createElement('div');
-  hamburger.classList.add('nav-hamburger');
-  hamburger.innerHTML = `<button type="button" aria-controls="nav" aria-label="Open navigation">
-      <span class="nav-hamburger-icon"></span>
-    </button>`;
-  hamburger.addEventListener('click', () => toggleMenu(nav, navSections));
-  nav.prepend(hamburger);
-  nav.setAttribute('aria-expanded', 'false');
-  // prevent mobile nav behavior on window resize
-  toggleMenu(nav, navSections, isDesktop.matches);
-  isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
-
-  const navWrapper = document.createElement('div');
-  navWrapper.className = 'nav-wrapper';
-  navWrapper.append(nav);
-  block.append(navWrapper);
+  decorateExternalLinks(block);
+  decorateIcons(block);
 }
diff --git a/icons/arrow.svg b/icons/arrow.svg
new file mode 100644
index 0000000..e7f7d3b
--- /dev/null
+++ b/icons/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.35225 1.54977C8.15699 1.3545 7.84041 1.3545 7.64514 1.54977C7.44988 1.74503 7.44988 2.06161 7.64514 2.25687L12.8883 7.5H1.9043C1.62815 7.5 1.4043 7.72386 1.4043 8C1.4043 8.27614 1.62815 8.5 1.9043 8.5H12.8882L7.64514 13.7431C7.44988 13.9384 7.44988 14.2549 7.64514 14.4502C7.84041 14.6455 8.15699 14.6455 8.35225 14.4502L14.4489 8.35354C14.6442 8.15828 14.6442 7.8417 14.4489 7.64643L8.35225 1.54977Z" fill="currentcolor"/>
+</svg>
diff --git a/icons/chevron.svg b/icons/chevron.svg
new file mode 100644
index 0000000..d18fcc9
--- /dev/null
+++ b/icons/chevron.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.54977 4.69112C1.74503 4.49586 2.06161 4.49586 2.25687 4.69112L7.99999 10.4342L13.7431 4.69112C13.9384 4.49586 14.2549 4.49586 14.4502 4.69112C14.6455 4.88639 14.6455 5.20297 14.4502 5.39823L8.68639 11.162C8.5988 11.2535 8.49378 11.3266 8.37749 11.377C8.25832 11.4286 8.12985 11.4552 7.99999 11.4552C7.87013 11.4552 7.74165 11.4286 7.62248 11.377C7.50619 11.3266 7.40117 11.2535 7.31358 11.162L1.54977 5.39823C1.3545 5.20297 1.3545 4.88639 1.54977 4.69112Z" fill="currentcolor"/>
+</svg>
diff --git a/icons/globe.svg b/icons/globe.svg
new file mode 100644
index 0000000..af71e8c
--- /dev/null
+++ b/icons/globe.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99286 15.2635C7.9949 15.2635 7.99694 15.2635 7.99898 15.2635C8.00071 15.2635 8.00244 15.2635 8.00416 15.2635C12.0135 15.2611 15.263 12.0101 15.263 8.00015C15.263 3.98872 12.0111 0.736816 7.99966 0.736816C3.98823 0.736816 0.736328 3.98872 0.736328 8.00015C0.736328 12.0093 3.98456 15.2598 7.99286 15.2635ZM6.94265 1.82563C4.14737 2.30072 1.98285 4.62787 1.75599 7.50016H4.93215C5.11699 5.46689 5.80997 3.51605 6.94265 1.82563ZM1.756 8.50016C1.98286 11.3724 4.14736 13.6996 6.94261 14.1747C5.80995 12.4842 5.11698 10.5334 4.93215 8.50016H1.756ZM14.2433 8.50016C14.0164 11.373 11.8512 13.7004 9.05517 14.1749C10.1879 12.4844 10.881 10.5335 11.0658 8.50016H14.2433ZM14.2433 7.50016C14.0164 4.62734 11.8512 2.29987 9.05514 1.82537C10.1879 3.51585 10.881 5.46678 11.0658 7.50016H14.2433ZM7.99898 13.9422C6.84337 12.3428 6.13139 10.465 5.93665 8.50016H10.0613C9.86657 10.465 9.15458 12.3428 7.99898 13.9422ZM10.0613 7.50016H5.93665C6.1314 5.53532 6.84338 3.65752 7.99898 2.05815C9.15458 3.65752 9.86656 5.53532 10.0613 7.50016Z" fill="currentcolor"/>
+</svg>
diff --git a/icons/search.svg b/icons/search.svg
index 637c677..7841c2c 100644
--- a/icons/search.svg
+++ b/icons/search.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path d="M16.9,15.5c2.4-3.2,2.2-7.7-0.7-10.6c-3.1-3.1-8.1-3.1-11.3,0c-3.1,3.2-3.1,8.3,0,11.4
+  <path fill="currentcolor" d="M16.9,15.5c2.4-3.2,2.2-7.7-0.7-10.6c-3.1-3.1-8.1-3.1-11.3,0c-3.1,3.2-3.1,8.3,0,11.4
     c2.9,2.9,7.5,3.1,10.6,0.6c0,0.1,0,0.1,0,0.1l4.2,4.2c0.5,0.4,1.1,0.4,1.5,0c0.4-0.4,0.4-1,0-1.4L16.9,15.5
     C16.9,15.5,16.9,15.5,16.9,15.5L16.9,15.5z M14.8,6.3c2.3,2.3,2.3,6.1,0,8.5c-2.3,2.3-6.1,2.3-8.5,0C4,12.5,4,8.7,6.3,6.3
     C8.7,4,12.5,4,14.8,6.3z"/>
diff --git a/scripts/scripts.js b/scripts/scripts.js
index dfc85b8..6799e90 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -126,6 +126,19 @@ function decorateButtons(main) {
   }
 }
 
+/**
+ * Sets target and rel on links whose hostname differs from the current page.
+ * @param {Element} container - The element to search for links within
+ */
+export function decorateExternalLinks(container) {
+  container.querySelectorAll('a[href]').forEach((link) => {
+    if (new URL(link.href).hostname !== window.location.hostname) {
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+    }
+  });
+}
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element
@@ -187,16 +200,17 @@ async function loadLazy(doc) {
  * Loads everything that happens a lot later,
  * without impacting the user experience.
  */
-function loadDelayed() {
+function loadDelayed(doc) {
   // eslint-disable-next-line import/no-cycle
   window.setTimeout(() => import('./delayed.js'), 3000);
   // load anything that can be postponed to the latest here
+  decorateExternalLinks(doc.querySelector('main'));
 }
 
 async function loadPage() {
   await loadEager(document);
   await loadLazy(document);
-  loadDelayed();
+  loadDelayed(document);
 }
 
 loadPage();
diff --git a/styles/styles.css b/styles/styles.css
index 54bc9fc..276c9d0 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -36,8 +36,11 @@
   --color-brand: var(--color-yellow);
   --color-brand-dark: var(--color-yellow-dark);
 
+  /* shadows */
+  --shadow-s: 0 1px 4px 0 rgb(0 0 0 / 20%);
+
   /* fonts */
-  --body-font-family: roboto, roboto-fallback, sans-serif;
+  --text-font-family: roboto, roboto-fallback, sans-serif;
   --heading-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif;
 
   /* heading sizes */
@@ -73,7 +76,7 @@
   --space-xl: var(--space-800);
 
   /* layout */
-  --nav-height: 64px;
+  --nav-height: 180px;
   --site-width: 1200px;
 
   /* border radii */
@@ -82,6 +85,12 @@
   --radius-l: 16px;
 }
 
+@media (width >= 1200px) {
+  :root {
+    --nav-height: 128px;
+  }
+}
+
 /* fallback fonts */
 @font-face {
   font-family: roboto-condensed-fallback;
@@ -109,7 +118,7 @@ body {
   margin: 0;
   background-color: var(--color-bg);
   color: var(--color-text);
-  font-family: var(--body-font-family);
+  font-family: var(--text-font-family);
   font-size: var(--text-m);
   line-height: var(--lh-m);
 }
@@ -118,6 +127,10 @@ body.appear {
   display: block;
 }
 
+body[data-scroll='disabled'] {
+  overflow: hidden;
+}
+
 header {
   height: var(--nav-height);
 }
@@ -241,6 +254,26 @@ img {
   width: 100%;
 }
 
+.icon.icon-chevron img,
+.icon.icon-chevron svg {
+  transition: transform 0.2s;
+}
+
+.icon.arrow-left img,
+.icon.arrow-left svg {
+  transform: rotate(180deg);
+}
+
+.icon.chevron-left img,
+.icon.chevron-left svg {
+  transform: rotate(90deg);
+}
+
+.icon.chevron-right img,
+.icon.chevron-right svg {
+  transform: rotate(-90deg);
+}
+
 /* LINKS */
 
 a:any-link {
@@ -260,6 +293,7 @@ input,
 textarea,
 select,
 button {
+  border: 0;
   font: inherit;
 }