From d5488ea37d49f974ef9adc62f2d790d158eb0f34 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 11:16:04 +0000
Subject: [PATCH 01/14] Copilot test - Migrate legacy nav

---
 .../DropdownNavigation/index.styles.ts        |  111 +
 .../Navigation/DropdownNavigation/index.tsx   |  198 ++
 .../Navigation/DropdownNavigation/types.d.ts  |   22 +
 .../Navigation/NavigationList/index.styles.ts |   80 +
 .../Navigation/NavigationList/index.tsx       |   93 +
 .../NavigationWrapper/index.styles.ts         |   41 +
 .../Navigation/NavigationWrapper/index.tsx    |   35 +
 .../ScrollableNavigation/index.styles.ts      |   59 +
 .../Navigation/ScrollableNavigation/index.tsx |   30 +
 .../__snapshots__/index.amp.test.tsx.snap     |  226 +-
 .../index.canonical.test.tsx.snap             |  232 +-
 .../__snapshots__/index.test.tsx.snap         | 2252 +++++++----------
 src/app/components/Navigation/index.amp.tsx   |   25 +-
 .../Navigation/index.canonical.test.tsx       |    2 +-
 .../components/Navigation/index.canonical.tsx |   14 +-
 src/app/components/Navigation/index.styles.ts |   33 +-
 src/app/components/Navigation/index.tsx       |   25 +-
 17 files changed, 1779 insertions(+), 1699 deletions(-)
 create mode 100644 src/app/components/Navigation/DropdownNavigation/index.styles.ts
 create mode 100644 src/app/components/Navigation/DropdownNavigation/index.tsx
 create mode 100644 src/app/components/Navigation/DropdownNavigation/types.d.ts
 create mode 100644 src/app/components/Navigation/NavigationList/index.styles.ts
 create mode 100644 src/app/components/Navigation/NavigationList/index.tsx
 create mode 100644 src/app/components/Navigation/NavigationWrapper/index.styles.ts
 create mode 100644 src/app/components/Navigation/NavigationWrapper/index.tsx
 create mode 100644 src/app/components/Navigation/ScrollableNavigation/index.styles.ts
 create mode 100644 src/app/components/Navigation/ScrollableNavigation/index.tsx

diff --git a/src/app/components/Navigation/DropdownNavigation/index.styles.ts b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
new file mode 100644
index 00000000000..62f32b440de
--- /dev/null
+++ b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
@@ -0,0 +1,111 @@
+import { css, Theme } from '@emotion/react';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+import { GROUP_B_MIN_WIDTH } from '#app/components/ThemeProvider/fontMediaQueries';
+import { MAX_NAV_ITEM_HEIGHT } from '../index.styles';
+
+export default {
+  dropdown: ({ palette, mq }: Theme) =>
+    css({
+      backgroundColor: palette.WHITE,
+      clear: 'both',
+      overflow: 'hidden',
+      height: 0,
+      transition: 'all 0.2s ease-out',
+      transitionTimingFunction: 'cubic-bezier(0, 0, 0.58, 1)',
+      visibility: 'hidden',
+      [mq.GROUP_3_MIN_WIDTH]: {
+        display: 'none',
+        visibility: 'hidden',
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transition: 'none',
+      },
+    }),
+
+  dropdownOpen: css({
+    visibility: 'visible',
+  }),
+
+  ampDropdown: ({ palette, mq }: Theme) =>
+    css({
+      backgroundColor: palette.WHITE,
+      clear: 'both',
+      [mq.GROUP_3_MIN_WIDTH]: {
+        display: 'none',
+        visibility: 'hidden',
+      },
+    }),
+
+  dropdownList: css({
+    listStyleType: 'none',
+    margin: 0,
+    padding: 0,
+  }),
+
+  dropdownListItem: ({ palette }: Theme) =>
+    css({
+      padding: 0,
+      borderBottom: `${pixelsToRem(1)}rem solid ${palette.GREY_3}`,
+      '&:last-child': {
+        border: 0,
+      },
+    }),
+
+  // Visual defaults for legacy nav services.
+  // The new-nav container's `dropdown` descendant styles override display, padding and hover.
+  dropdownLink: ({ palette, fontSizes, fontVariants }: Theme) =>
+    css({
+      ...fontSizes.pica,
+      ...fontVariants.sansRegular,
+      color: palette.GREY_10,
+      textDecoration: 'none',
+      padding: '0.75rem 0',
+      display: 'inline-block',
+      '&:hover, &:focus': {
+        textDecoration: 'underline',
+        textDecorationColor: palette.POSTBOX,
+      },
+    }),
+
+  // Active link indicator: inline-start border + padding for the current page item
+  currentLink: ({ palette, spacings }: Theme) =>
+    css({
+      borderInlineStart: `${pixelsToRem(4)}rem solid ${palette.POSTBOX}`,
+      paddingInlineStart: `${spacings.FULL}rem`,
+    }),
+
+  menuButton: ({ palette, mq }: Theme) =>
+    css({
+      position: 'relative',
+      padding: 0,
+      margin: 0,
+      border: 0,
+      float: 'inline-start',
+      backgroundColor: palette.POSTBOX,
+      color: palette.WHITE,
+      width: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+      height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+      [mq.GROUP_3_MIN_WIDTH]: {
+        display: 'none',
+        visibility: 'hidden',
+      },
+      [GROUP_B_MIN_WIDTH]: {
+        width: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+        height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+      },
+      svg: {
+        verticalAlign: 'middle',
+        fill: palette.WHITE,
+      },
+      '&:hover, &:focus': {
+        cursor: 'pointer',
+        boxShadow: `inset 0 0 0 ${pixelsToRem(4)}rem ${palette.WHITE}`,
+        '&::after': {
+          content: "''",
+          position: 'absolute',
+          inset: 0,
+          border: `${pixelsToRem(4)}rem solid ${palette.BLACK}`,
+        },
+      },
+    }),
+};
diff --git a/src/app/components/Navigation/DropdownNavigation/index.tsx b/src/app/components/Navigation/DropdownNavigation/index.tsx
new file mode 100644
index 00000000000..23d20ca0a5c
--- /dev/null
+++ b/src/app/components/Navigation/DropdownNavigation/index.tsx
@@ -0,0 +1,198 @@
+import { PropsWithChildren, useRef, cloneElement } from 'react';
+import { Helmet } from 'react-helmet';
+import { navigationIcons } from '#psammead/psammead-assets/src/svgs';
+import VisuallyHiddenText from '#app/components/VisuallyHiddenText';
+import { Direction } from '#app/models/types/global';
+import styles from './index.styles';
+
+type CanonicalDropdownProps = {
+  isOpen: boolean;
+  className?: string;
+};
+
+export const CanonicalDropdown = ({
+  isOpen,
+  children,
+  className,
+}: PropsWithChildren<CanonicalDropdownProps>) => {
+  const heightRef = useRef<HTMLDivElement>(null);
+  return (
+    <div
+      data-e2e="dropdown-nav"
+      ref={heightRef}
+      css={[styles.dropdown, isOpen && styles.dropdownOpen]}
+      style={{
+        height: `${isOpen && heightRef.current ? heightRef.current.scrollHeight : 0}px`,
+      }}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+};
+
+type AmpDropdownProps = {
+  id?: string;
+  className?: string;
+  hidden?: boolean;
+};
+
+export const AmpDropdown = ({
+  children,
+  id,
+  className,
+  hidden,
+}: PropsWithChildren<AmpDropdownProps>) => (
+  <div
+    css={styles.ampDropdown}
+    id={id}
+    className={className}
+    hidden={hidden}
+    data-e2e="dropdown-nav"
+  >
+    {children}
+  </div>
+);
+
+export const DropdownList = ({
+  children,
+  ...props
+}: PropsWithChildren<React.HTMLAttributes<HTMLUListElement>>) => (
+  <ul css={styles.dropdownList} role="list" {...props}>
+    {children}
+  </ul>
+);
+
+type DropdownListItemProps = {
+  url: string;
+  active?: boolean;
+  currentPageText?: string;
+  clickTracker?: Record<string, unknown> | null;
+  viewTracker?: Record<string, unknown> | null;
+};
+
+export const DropdownListItem = ({
+  children,
+  clickTracker = null,
+  currentPageText,
+  active = false,
+  url,
+  viewTracker = null,
+}: PropsWithChildren<DropdownListItemProps>) => {
+  const ariaId = `dropdownNavigation-${(children as string)
+    .replace(/\s+/g, '-')
+    .toLowerCase()}`;
+  return (
+    // aria-labelledby is a temporary fix for the a11y nested span bug in TalkBack: https://github.com/bbc/simorgh/issues/9652
+    <li
+      css={styles.dropdownListItem}
+      role="listitem"
+      {...(viewTracker as object)}
+    >
+      <a
+        css={styles.dropdownLink}
+        href={url}
+        aria-labelledby={ariaId}
+        {...(clickTracker as object)}
+      >
+        {active && currentPageText ? (
+          // ID is a temporary fix for the a11y nested span bug in TalkBack: https://github.com/bbc/simorgh/issues/9652
+          // eslint-disable-next-line jsx-a11y/aria-role
+          <span css={styles.currentLink} id={ariaId} role="text">
+            <VisuallyHiddenText>{`${currentPageText}, `}</VisuallyHiddenText>
+            {children}
+          </span>
+        ) : (
+          // ID is a temporary fix for the a11y nested span bug in TalkBack: https://github.com/bbc/simorgh/issues/9652
+          <span id={ariaId}>{children}</span>
+        )}
+      </a>
+    </li>
+  );
+};
+
+type CanonicalMenuButtonProps = {
+  announcedText: string;
+  isOpen: boolean;
+  onClick: () => void;
+  dir?: Direction;
+};
+
+export const CanonicalMenuButton = ({
+  announcedText,
+  isOpen,
+  onClick,
+  dir = 'ltr',
+}: CanonicalMenuButtonProps) => (
+  <button
+    type="button"
+    css={styles.menuButton}
+    onClick={onClick}
+    aria-expanded={isOpen ? 'true' : 'false'}
+    aria-label={announcedText}
+    dir={dir}
+    className="focusIndicatorRemove"
+  >
+    {isOpen ? navigationIcons.cross : navigationIcons.hamburger}
+    <VisuallyHiddenText>{announcedText}</VisuallyHiddenText>
+  </button>
+);
+
+const AmpHead = () => (
+  <Helmet>
+    <script
+      async
+      custom-element="amp-bind"
+      src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
+    />
+  </Helmet>
+);
+
+const expandedHandler =
+  'AMP.setState({ menuState: { expanded: !menuState.expanded }})';
+
+const initialState = { expanded: false };
+
+type AmpMenuButtonProps = {
+  announcedText: string;
+  onToggle: string;
+  dir?: Direction;
+  className?: string;
+};
+
+export const AmpMenuButton = ({
+  announcedText,
+  onToggle,
+  dir = 'ltr',
+  className,
+}: AmpMenuButtonProps) => (
+  <>
+    <AmpHead />
+    <amp-state id="menuState">
+      <script
+        type="application/json"
+        /* eslint-disable-next-line react/no-danger */
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(initialState) }}
+      />
+    </amp-state>
+    <button
+      type="button"
+      css={styles.menuButton}
+      aria-expanded="false"
+      aria-label={announcedText}
+      data-amp-bind-aria-expanded='menuState.expanded ? "true" : "false"'
+      on={`tap:${expandedHandler},${onToggle}`}
+      dir={dir}
+      className={`focusIndicatorRemove${className ? ` ${className}` : ''}`}
+    >
+      {cloneElement(navigationIcons.hamburger, {
+        'data-amp-bind-hidden': 'menuState.expanded',
+      })}
+      {cloneElement(navigationIcons.cross, {
+        hidden: true,
+        'data-amp-bind-hidden': '!menuState.expanded',
+      })}
+      <VisuallyHiddenText>{announcedText}</VisuallyHiddenText>
+    </button>
+  </>
+);
diff --git a/src/app/components/Navigation/DropdownNavigation/types.d.ts b/src/app/components/Navigation/DropdownNavigation/types.d.ts
new file mode 100644
index 00000000000..fbbd001c485
--- /dev/null
+++ b/src/app/components/Navigation/DropdownNavigation/types.d.ts
@@ -0,0 +1,22 @@
+declare namespace React.JSX {
+  /*
+   * AMP currently doesn't have built-in types for TypeScript.
+   * As a workaround, custom types are declared manually.
+   * See: https://stackoverflow.com/a/50601125
+   */
+  interface IntrinsicElements {
+    'amp-state': React.PropsWithChildren<{
+      id?: string;
+    }>;
+  }
+}
+
+declare namespace React {
+  interface HTMLAttributes<T> {
+    /**
+     * AMP event handler attribute — used for AMP actions like `tap:element.toggleVisibility`.
+     * See: https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/
+     */
+    on?: string;
+  }
+}
diff --git a/src/app/components/Navigation/NavigationList/index.styles.ts b/src/app/components/Navigation/NavigationList/index.styles.ts
new file mode 100644
index 00000000000..33e3ee28516
--- /dev/null
+++ b/src/app/components/Navigation/NavigationList/index.styles.ts
@@ -0,0 +1,80 @@
+import { css, Theme } from '@emotion/react';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+
+export default {
+  list: ({ mq }: Theme) =>
+    css({
+      listStyleType: 'none',
+      padding: 0,
+      margin: 0,
+      position: 'relative',
+      [mq.GROUP_3_MIN_WIDTH]: {
+        overflow: 'hidden',
+      },
+    }),
+
+  listItem: ({ palette, mq }: Theme) =>
+    css({
+      display: 'inline-block',
+      position: 'relative',
+      zIndex: 2,
+      marginInlineEnd: 0,
+      [mq.GROUP_3_MIN_WIDTH]: {
+        // Trick to display a border between list items when they break into
+        // multiple lines, which takes the full width
+        '&::after': {
+          content: "''",
+          position: 'absolute',
+          bottom: '-1px',
+          width: '63.5rem',
+          borderBottom: `${pixelsToRem(1)}rem solid ${palette.GREY_3}`,
+          zIndex: -1,
+        },
+      },
+    }),
+
+  // Visual defaults for all services. The new-nav container's topRowItems/bottomRowItems
+  // descendant styles (higher CSS specificity) override these for POSTBOX-background rows.
+  link: ({ palette, fontSizes, fontVariants, mq }: Theme) =>
+    css({
+      ...fontSizes.pica,
+      ...fontVariants.sansRegular,
+      color: palette.GREY_10,
+      cursor: 'pointer',
+      textDecoration: 'none',
+      display: 'inline-block',
+      padding: '0.75rem 0.25rem',
+      outline: 'none',
+      [mq.GROUP_2_MAX_WIDTH]: {
+        padding: `0.75rem ${pixelsToRem(8)}rem`,
+      },
+      '&:hover::after': {
+        content: "''",
+        position: 'absolute',
+        insetInlineStart: 0,
+        insetInlineEnd: 0,
+        bottom: 0,
+        borderBottom: `${pixelsToRem(4)}rem solid ${palette.POSTBOX}`,
+      },
+      '&:focus::after, &:focus-visible::after': {
+        content: "''",
+        position: 'absolute',
+        inset: 0,
+        border: `${pixelsToRem(3)}rem solid ${palette.BLACK}`,
+      },
+    }),
+
+  // Provides the underline indicator for the active current-page link.
+  // Color is overridden by container styles (e.g. topRowItems sets WHITE for POSTBOX backgrounds).
+  currentLinkSpan: ({ palette }: Theme) =>
+    css({
+      '&::after': {
+        content: "''",
+        position: 'absolute',
+        insetInlineStart: 0,
+        insetInlineEnd: 0,
+        bottom: 0,
+        borderBottom: `${pixelsToRem(4)}rem solid ${palette.POSTBOX}`,
+      },
+    }),
+};
diff --git a/src/app/components/Navigation/NavigationList/index.tsx b/src/app/components/Navigation/NavigationList/index.tsx
new file mode 100644
index 00000000000..06420442636
--- /dev/null
+++ b/src/app/components/Navigation/NavigationList/index.tsx
@@ -0,0 +1,93 @@
+import { PropsWithChildren } from 'react';
+import VisuallyHiddenText from '#app/components/VisuallyHiddenText';
+import { Direction } from '#app/models/types/global';
+import styles from './index.styles';
+
+type NavigationListItemProps = {
+  url: string;
+  active?: boolean;
+  currentPageText?: string;
+  dir?: Direction;
+  clickTracker?: Record<string, unknown> | null;
+  viewTracker?: Record<string, unknown> | null;
+  className?: string;
+};
+
+type CurrentLinkProps = PropsWithChildren<{
+  linkId: string;
+  currentPageText: string;
+}>;
+
+const CurrentLink = ({
+  linkId,
+  children: link,
+  currentPageText,
+}: CurrentLinkProps) => (
+  <span
+    css={styles.currentLinkSpan}
+    // eslint-disable-next-line jsx-a11y/aria-role
+    role="text"
+    // Temporary fix for a11y nested span bug in TalkBack: https://github.com/bbc/simorgh/issues/9652
+    id={`NavigationLinks-${linkId}`}
+  >
+    <VisuallyHiddenText>{`${currentPageText}, `}</VisuallyHiddenText>
+    {link}
+  </span>
+);
+
+export const NavigationList = ({
+  children,
+  ...props
+}: PropsWithChildren<React.HTMLAttributes<HTMLUListElement>>) => (
+  <ul css={styles.list} role="list" {...props}>
+    {children}
+  </ul>
+);
+
+export const NavigationListItem = ({
+  children: link,
+  url,
+  clickTracker = null,
+  currentPageText,
+  active = false,
+  dir = 'ltr',
+  viewTracker = null,
+  className,
+  ...anchorProps
+}: PropsWithChildren<NavigationListItemProps>) => (
+  <li
+    css={styles.listItem}
+    dir={dir}
+    role="listitem"
+    {...(viewTracker as object)}
+  >
+    {active && currentPageText ? (
+      <a
+        css={styles.link}
+        href={url}
+        // Temporary fix for a11y nested span bug in TalkBack: https://github.com/bbc/simorgh/issues/9652
+        aria-labelledby={`NavigationLinks-${link}`}
+        aria-current="page"
+        className={`focusIndicatorRemove${className ? ` ${className}` : ''}`}
+        data-active="true"
+        {...(clickTracker as object)}
+        {...anchorProps}
+      >
+        <CurrentLink linkId={link as string} currentPageText={currentPageText}>
+          {link}
+        </CurrentLink>
+      </a>
+    ) : (
+      <a
+        css={styles.link}
+        href={url}
+        className={`focusIndicatorRemove${className ? ` ${className}` : ''}`}
+        aria-current={active ? 'page' : undefined}
+        {...(clickTracker as object)}
+        {...anchorProps}
+      >
+        {link}
+      </a>
+    )}
+  </li>
+);
diff --git a/src/app/components/Navigation/NavigationWrapper/index.styles.ts b/src/app/components/Navigation/NavigationWrapper/index.styles.ts
new file mode 100644
index 00000000000..219ada4e759
--- /dev/null
+++ b/src/app/components/Navigation/NavigationWrapper/index.styles.ts
@@ -0,0 +1,41 @@
+import { css, Theme } from '@emotion/react';
+
+export default {
+  nav: ({ palette }: Theme) =>
+    css({
+      position: 'relative',
+      backgroundColor: palette.WHITE,
+    }),
+
+  navOpen: ({ palette, mq }: Theme) =>
+    css({
+      [mq.GROUP_2_MAX_WIDTH]: {
+        backgroundColor: palette.EBON,
+      },
+    }),
+
+  navWrapper: ({ palette, mq }: Theme) =>
+    css({
+      position: 'relative',
+      maxWidth: '63.4rem',
+      margin: '0 auto',
+      backgroundColor: palette.WHITE,
+      [mq.GROUP_3_MIN_WIDTH]: {
+        margin: '0 0.8rem',
+      },
+      '@media (min-width: 66rem)': {
+        margin: '0 auto',
+      },
+    }),
+
+  withAmpOpenClass:
+    (ampOpenClass: string) =>
+    ({ palette, mq }: Theme) =>
+      css({
+        [`&.${ampOpenClass}`]: {
+          [mq.GROUP_2_MAX_WIDTH]: {
+            backgroundColor: palette.EBON,
+          },
+        },
+      }),
+};
diff --git a/src/app/components/Navigation/NavigationWrapper/index.tsx b/src/app/components/Navigation/NavigationWrapper/index.tsx
new file mode 100644
index 00000000000..c94b7bf74d7
--- /dev/null
+++ b/src/app/components/Navigation/NavigationWrapper/index.tsx
@@ -0,0 +1,35 @@
+import { PropsWithChildren } from 'react';
+import styles from './index.styles';
+
+type Props = {
+  dir?: 'ltr' | 'rtl';
+  isOpen?: boolean;
+  ampOpenClass?: string;
+  id?: string;
+  className?: string;
+};
+
+const NavigationWrapper = ({
+  children,
+  dir = 'ltr',
+  isOpen = false,
+  ampOpenClass,
+  id,
+  className,
+}: PropsWithChildren<Props>) => (
+  <nav
+    role="navigation"
+    dir={dir}
+    id={id}
+    className={className}
+    css={[
+      styles.nav,
+      isOpen && styles.navOpen,
+      ampOpenClass && styles.withAmpOpenClass(ampOpenClass),
+    ]}
+  >
+    <div css={styles.navWrapper}>{children}</div>
+  </nav>
+);
+
+export default NavigationWrapper;
diff --git a/src/app/components/Navigation/ScrollableNavigation/index.styles.ts b/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
new file mode 100644
index 00000000000..680917f3b1f
--- /dev/null
+++ b/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
@@ -0,0 +1,59 @@
+import { css, Theme } from '@emotion/react';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+
+export default {
+  scrollableNav: ({ palette, mq, spacings }: Theme) =>
+    css({
+      [mq.GROUP_2_MAX_WIDTH]: {
+        position: 'relative', // required so ::after gradient is bounded to this element, not topRow
+        whiteSpace: 'nowrap',
+        overflowX: 'scroll',
+        /* Avoid smooth scrolling — it causes accessibility issues */
+        scrollBehavior: 'auto',
+        WebkitOverflowScrolling: 'touch',
+
+        /* Hide scrollbar */
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
+
+        '&:focus-visible': {
+          outline: 'none',
+        },
+
+        /* Focus indicator applied to pseudo-element for Firefox compatibility */
+        '&:focus-visible::after': {
+          content: "''",
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          outline: `${pixelsToRem(3)}rem solid ${palette.BLACK}`,
+        },
+
+        /* Gradient fade overlay to indicate scrollable content */
+        '&::after': {
+          content: "' '",
+          height: '100%',
+          width: `${spacings.SEXTUPLE}rem`,
+          [mq.GROUP_2_MIN_WIDTH]: {
+            width: '6rem',
+          },
+          position: 'absolute',
+          insetInlineEnd: 0,
+          bottom: 0,
+          zIndex: 3,
+          overflow: 'hidden',
+          pointerEvents: 'none',
+          /* LTR: fade to the right */
+          background: `linear-gradient(to right, transparent 0%, ${palette.WHITE} 100%)`,
+        },
+
+        /* RTL: flip gradient to fade toward the left */
+        '&[dir="rtl"]::after': {
+          background: `linear-gradient(to left, transparent 0%, ${palette.WHITE} 100%)`,
+        },
+      },
+    }),
+};
diff --git a/src/app/components/Navigation/ScrollableNavigation/index.tsx b/src/app/components/Navigation/ScrollableNavigation/index.tsx
new file mode 100644
index 00000000000..c6d66ecfb88
--- /dev/null
+++ b/src/app/components/Navigation/ScrollableNavigation/index.tsx
@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react';
+import { Direction } from '#app/models/types/global';
+import styles from './index.styles';
+
+type Props = {
+  dir?: Direction;
+  navPosition?: 'primary' | 'secondary';
+  id?: string;
+  className?: string;
+};
+
+const ScrollableNavigation = ({
+  children,
+  dir = 'ltr',
+  navPosition,
+  id,
+  className,
+}: PropsWithChildren<Props>) => (
+  <div
+    css={styles.scrollableNav}
+    data-e2e={`scrollable-nav${navPosition === 'secondary' ? '-secondary' : ''}`}
+    dir={dir}
+    id={id}
+    className={className}
+  >
+    {children}
+  </div>
+);
+
+export default ScrollableNavigation;
diff --git a/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
index 00b7dcf58ed..64ba82ecd98 100644
--- a/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
@@ -12,22 +12,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   }
 }
 
-@media (min-width: 62.9375rem) {
-  .emotion-0::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-bottom: 0.0625rem solid #E6E8EA;
-  }
-}
-
-.emotion-0 .e11sm0on2::after {
-  left: 0;
-}
-
-.emotion-2 {
+.emotion-1 {
   position: relative;
   max-width: 63.4rem;
   margin: 0 auto;
@@ -35,18 +20,18 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-2 {
+  .emotion-1 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-2 {
+  .emotion-1 {
     margin: 0 auto;
   }
 }
 
-.emotion-4 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -57,12 +42,12 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   width: 100%;
 }
 
-.emotion-5 {
+.emotion-3 {
   position: relative;
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -81,7 +66,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   z-index: 0;
 }
 
-.emotion-6::before {
+.emotion-4::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -98,7 +83,8 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-7 {
+  .emotion-5 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -107,52 +93,52 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
     -ms-overflow-style: none;
   }
 
-  .emotion-7::-webkit-scrollbar {
+  .emotion-5::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-7:focus-visible {
+  .emotion-5:focus-visible {
     outline: none;
   }
 
-  .emotion-7:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-5:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-7:after {
+  .emotion-5::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-7:after {
+    .emotion-5::after {
       width: 6rem;
     }
   }
+
+  .emotion-5[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-7 li {
+.emotion-5 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-7 li a {
+.emotion-5 li a {
   color: #FFFFFF;
   padding: 0 0.5rem;
   height: 2.75rem;
@@ -169,27 +155,35 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   justify-content: center;
 }
 
-.emotion-7 li a:hover::after {
+.emotion-5 li a:hover::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-7 li a:focus-visible::after {
+.emotion-5 li a:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-7 li a:focus::after {
+.emotion-5 li a:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-7 li a[data-active="true"] span::after {
+.emotion-5 li a[data-active="true"] span::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-7 li:before {
+.emotion-5 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -205,95 +199,78 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   opacity: 0.3;
 }
 
-.emotion-7 li:last-child:before {
+.emotion-5 li:last-child:before {
   display: none;
 }
 
-.emotion-7:after {
+.emotion-5.emotion-5::after {
   background: none;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-7.si-nav-scrollable-hidden {
+  .emotion-5.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-9 {
+.emotion-6 {
   position: relative;
   padding: 0;
   margin: 0;
-  background-color: transparent;
   border: 0;
-  float: left;
-  height: 2.75rem;
-  width: 2.75rem;
+  float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
   width: 2.75rem;
   height: 2.75rem;
 }
 
-.emotion-9:hover,
-.emotion-9:focus {
-  cursor: pointer;
-  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
-}
-
-.emotion-9:hover::after,
-.emotion-9:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  border: 0.25rem solid #000000;
-}
-
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-6 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-9 {
-    height: 2.75rem;
+  .emotion-6 {
     width: 2.75rem;
+    height: 2.75rem;
   }
 }
 
-.emotion-9 svg {
+.emotion-6 svg {
   vertical-align: middle;
+  fill: #FFFFFF;
 }
 
-@media (min-width: 20rem) {
-  .emotion-9 {
-    width: 2.75rem;
-    height: 2.75rem;
-  }
+.emotion-6:hover,
+.emotion-6:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-9 svg {
-  vertical-align: middle;
-  fill: #FFFFFF;
+.emotion-6:hover::after,
+.emotion-6:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0.25rem solid #000000;
 }
 
-.emotion-11 {
+.emotion-7 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-11 {
+  .emotion-7 {
     fill: linkText;
   }
 }
 
-.emotion-15 {
+.emotion-11 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -304,7 +281,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   margin: 0;
 }
 
-.emotion-16 {
+.emotion-12 {
   background-color: #FFFFFF;
   clear: both;
   position: absolute;
@@ -316,38 +293,38 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-12 {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-16 ul {
+.emotion-12 ul {
   padding: 0;
   border: none;
 }
 
-.emotion-16 ul li {
+.emotion-12 ul li {
   padding: 0;
 }
 
-.emotion-16 ul li:last-child {
+.emotion-12 ul li:last-child {
   padding-bottom: 0;
 }
 
-.emotion-16 a {
+.emotion-12 a {
   display: block;
   position: relative;
   padding-inline: 0.5rem;
 }
 
-.emotion-16 a:hover {
+.emotion-12 a:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-16 a:before {
+.emotion-12 a:before {
   content: "";
   position: absolute;
   top: 0;
@@ -359,22 +336,23 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   opacity: 0;
 }
 
-.emotion-16 a:hover::before {
+.emotion-12 a:hover::before {
   opacity: 1;
 }
 
-.emotion-16 a:focus-visible {
+.emotion-12 a:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-18 {
+.emotion-13 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-19 {
+  .emotion-14 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -383,52 +361,52 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
     -ms-overflow-style: none;
   }
 
-  .emotion-19::-webkit-scrollbar {
+  .emotion-14::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-19:focus-visible {
+  .emotion-14:focus-visible {
     outline: none;
   }
 
-  .emotion-19:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-14:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-19:after {
+  .emotion-14::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-19:after {
+    .emotion-14::after {
       width: 6rem;
     }
   }
+
+  .emotion-14[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-19 li {
+.emotion-14 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-19 li a {
+.emotion-14 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -444,7 +422,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   justify-content: center;
 }
 
-.emotion-19 li:before {
+.emotion-14 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -460,12 +438,12 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   opacity: 1;
 }
 
-.emotion-19 li:last-child:before {
+.emotion-14 li:last-child:before {
   display: none;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-19.si-nav-scrollable-hidden {
+  .emotion-14.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
@@ -473,25 +451,25 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
 
 <div>
   <nav
-    class="emotion-0 emotion-1"
+    class="emotion-0"
     dir="ltr"
     id="si-nav"
     role="navigation"
   >
     <div
-      class="emotion-2 emotion-3"
+      class="emotion-1"
     >
       <div
-        class="emotion-4"
+        class="emotion-2"
       >
         <div
-          class="emotion-5"
+          class="emotion-3"
         >
           <div
-            class="emotion-6"
+            class="emotion-4"
           >
             <div
-              class="emotion-7 emotion-8"
+              class="emotion-5"
               data-e2e="scrollable-nav"
               dir="ltr"
             >
@@ -515,7 +493,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
             <button
               aria-expanded="false"
               aria-label="menu"
-              class="focusIndicatorRemove emotion-9 emotion-10"
+              class="focusIndicatorRemove emotion-6"
               data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
               dir="ltr"
               on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
@@ -527,7 +505,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="emotion-11 emotion-12"
+                class="emotion-7 emotion-8"
                 data-amp-bind-hidden="menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -540,7 +518,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
               </svg>
               <svg
                 aria-hidden="true"
-                class="emotion-11 emotion-12"
+                class="emotion-7 emotion-8"
                 data-amp-bind-hidden="!menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -554,14 +532,14 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
                 />
               </svg>
               <span
-                class="emotion-15"
+                class="emotion-11"
               >
                 menu
               </span>
             </button>
           </div>
           <div
-            class="emotion-16 emotion-17"
+            class="emotion-12"
             data-e2e="dropdown-nav"
             hidden=""
             id="si-nav-dropdown-menu"
@@ -576,10 +554,10 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
           </div>
         </div>
         <div
-          class="emotion-18"
+          class="emotion-13"
         >
           <div
-            class="emotion-19 emotion-8"
+            class="emotion-14"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
             id="si-nav-scrollable"
diff --git a/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
index 93ea16c9f2b..52f5a1b72e6 100644
--- a/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
@@ -6,22 +6,7 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   background-color: #FFFFFF;
 }
 
-@media (min-width: 62.9375rem) {
-  .emotion-0::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-bottom: 0.0625rem solid #E6E8EA;
-  }
-}
-
-.emotion-0 .e11sm0on2::after {
-  left: 0;
-}
-
-.emotion-2 {
+.emotion-1 {
   position: relative;
   max-width: 63.4rem;
   margin: 0 auto;
@@ -29,18 +14,18 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-2 {
+  .emotion-1 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-2 {
+  .emotion-1 {
     margin: 0 auto;
   }
 }
 
-.emotion-4 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -51,12 +36,12 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   width: 100%;
 }
 
-.emotion-5 {
+.emotion-3 {
   position: relative;
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -75,7 +60,7 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   z-index: 0;
 }
 
-.emotion-6::before {
+.emotion-4::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -92,7 +77,8 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-7 {
+  .emotion-5 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -101,52 +87,52 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
     -ms-overflow-style: none;
   }
 
-  .emotion-7::-webkit-scrollbar {
+  .emotion-5::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-7:focus-visible {
+  .emotion-5:focus-visible {
     outline: none;
   }
 
-  .emotion-7:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-5:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-7:after {
+  .emotion-5::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-7:after {
+    .emotion-5::after {
       width: 6rem;
     }
   }
+
+  .emotion-5[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-7 li {
+.emotion-5 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-7 li a {
+.emotion-5 li a {
   color: #FFFFFF;
   padding: 0 0.5rem;
   height: 2.75rem;
@@ -163,27 +149,35 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   justify-content: center;
 }
 
-.emotion-7 li a:hover::after {
+.emotion-5 li a:hover::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-7 li a:focus-visible::after {
+.emotion-5 li a:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-7 li a:focus::after {
+.emotion-5 li a:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-7 li a[data-active="true"] span::after {
+.emotion-5 li a[data-active="true"] span::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-7 li:before {
+.emotion-5 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -199,88 +193,71 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   opacity: 0.3;
 }
 
-.emotion-7 li:last-child:before {
+.emotion-5 li:last-child:before {
   display: none;
 }
 
-.emotion-7:after {
+.emotion-5.emotion-5::after {
   background: none;
 }
 
-.emotion-9 {
+.emotion-6 {
   position: relative;
   padding: 0;
   margin: 0;
-  background-color: transparent;
   border: 0;
-  float: left;
-  height: 2.75rem;
-  width: 2.75rem;
+  float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
   width: 2.75rem;
   height: 2.75rem;
 }
 
-.emotion-9:hover,
-.emotion-9:focus {
-  cursor: pointer;
-  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
-}
-
-.emotion-9:hover::after,
-.emotion-9:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  border: 0.25rem solid #000000;
-}
-
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-6 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-9 {
-    height: 2.75rem;
+  .emotion-6 {
     width: 2.75rem;
+    height: 2.75rem;
   }
 }
 
-.emotion-9 svg {
+.emotion-6 svg {
   vertical-align: middle;
+  fill: #FFFFFF;
 }
 
-@media (min-width: 20rem) {
-  .emotion-9 {
-    width: 2.75rem;
-    height: 2.75rem;
-  }
+.emotion-6:hover,
+.emotion-6:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-9 svg {
-  vertical-align: middle;
-  fill: #FFFFFF;
+.emotion-6:hover::after,
+.emotion-6:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0.25rem solid #000000;
 }
 
-.emotion-11 {
+.emotion-7 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-11 {
+  .emotion-7 {
     fill: linkText;
   }
 }
 
-.emotion-13 {
+.emotion-9 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -291,7 +268,7 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-10 {
   background-color: #FFFFFF;
   clear: both;
   overflow: hidden;
@@ -309,45 +286,45 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-10 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-14 {
+  .emotion-10 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-14 ul {
+.emotion-10 ul {
   padding: 0;
   border: none;
 }
 
-.emotion-14 ul li {
+.emotion-10 ul li {
   padding: 0;
 }
 
-.emotion-14 ul li:last-child {
+.emotion-10 ul li:last-child {
   padding-bottom: 0;
 }
 
-.emotion-14 a {
+.emotion-10 a {
   display: block;
   position: relative;
   padding-inline: 0.5rem;
 }
 
-.emotion-14 a:hover {
+.emotion-10 a:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-14 a:before {
+.emotion-10 a:before {
   content: "";
   position: absolute;
   top: 0;
@@ -359,22 +336,23 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   opacity: 0;
 }
 
-.emotion-14 a:hover::before {
+.emotion-10 a:hover::before {
   opacity: 1;
 }
 
-.emotion-14 a:focus-visible {
+.emotion-10 a:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-16 {
+.emotion-11 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-17 {
+  .emotion-12 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -383,52 +361,52 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
     -ms-overflow-style: none;
   }
 
-  .emotion-17::-webkit-scrollbar {
+  .emotion-12::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-17:focus-visible {
+  .emotion-12:focus-visible {
     outline: none;
   }
 
-  .emotion-17:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-12:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-17:after {
+  .emotion-12::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-17:after {
+    .emotion-12::after {
       width: 6rem;
     }
   }
+
+  .emotion-12[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-17 li {
+.emotion-12 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-17 li a {
+.emotion-12 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -444,7 +422,7 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   justify-content: center;
 }
 
-.emotion-17 li:before {
+.emotion-12 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -460,23 +438,23 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   opacity: 1;
 }
 
-.emotion-17 li:last-child:before {
+.emotion-12 li:last-child:before {
   display: none;
 }
 
-.emotion-19 {
+.emotion-13 {
   position: absolute;
   width: 100%;
   inset-inline-start: 0;
 }
 
 @media (min-width: 1041px) {
-  .emotion-19 {
+  .emotion-13 {
     width: 100%;
   }
 }
 
-.emotion-19::after {
+.emotion-13::after {
   content: '';
   position: absolute;
   inset-block-end: 0;
@@ -486,24 +464,24 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
 
 <div>
   <nav
-    class="emotion-0 emotion-1"
+    class="emotion-0"
     dir="ltr"
     role="navigation"
   >
     <div
-      class="emotion-2 emotion-3"
+      class="emotion-1"
     >
       <div
-        class="emotion-4"
+        class="emotion-2"
       >
         <div
-          class="emotion-5"
+          class="emotion-3"
         >
           <div
-            class="emotion-6"
+            class="emotion-4"
           >
             <div
-              class="emotion-7 emotion-8"
+              class="emotion-5"
               data-e2e="scrollable-nav"
               dir="ltr"
             >
@@ -518,13 +496,13 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
             <button
               aria-expanded="false"
               aria-label="menu"
-              class="focusIndicatorRemove emotion-9 emotion-10"
+              class="focusIndicatorRemove emotion-6"
               dir="ltr"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-11 emotion-12"
+                class="emotion-7 emotion-8"
                 focusable="false"
                 height="2.75rem"
                 viewBox="0 0 44 44"
@@ -535,16 +513,16 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
                 />
               </svg>
               <span
-                class="emotion-13"
+                class="emotion-9"
               >
                 menu
               </span>
             </button>
           </div>
           <div
-            class="emotion-14 emotion-15"
+            class="emotion-10"
             data-e2e="dropdown-nav"
-            height="0"
+            style="height: 0px;"
           >
             <ul
               data-testid="dropdown"
@@ -556,10 +534,10 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
           </div>
         </div>
         <div
-          class="emotion-16"
+          class="emotion-11"
         >
           <div
-            class="emotion-17 emotion-8"
+            class="emotion-12"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
           >
@@ -574,7 +552,7 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
         </div>
       </div>
       <div
-        class="emotion-19"
+        class="emotion-13"
       />
     </div>
   </nav>
diff --git a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
index 9647f2dd68b..62160e9c709 100644
--- a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
@@ -20,22 +20,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   }
 }
 
-@media (min-width: 62.9375rem) {
-  .emotion-1::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-bottom: 0.0625rem solid #E6E8EA;
-  }
-}
-
-.emotion-1 .emotion-13::after {
-  left: 0;
-}
-
-.emotion-3 {
+.emotion-2 {
   position: relative;
   max-width: 63.4rem;
   margin: 0 auto;
@@ -43,18 +28,18 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 auto;
   }
 }
 
-.emotion-5 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -65,12 +50,12 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: relative;
   width: 100%;
 }
 
-.emotion-7 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -89,7 +74,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   z-index: 0;
 }
 
-.emotion-7::before {
+.emotion-5::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -106,7 +91,8 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-6 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -115,52 +101,52 @@ exports[`Navigation should correctly render amp navigation 1`] = `
     -ms-overflow-style: none;
   }
 
-  .emotion-8::-webkit-scrollbar {
+  .emotion-6::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-8:focus-visible {
+  .emotion-6:focus-visible {
     outline: none;
   }
 
-  .emotion-8:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-6:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-8:after {
+  .emotion-6::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-8:after {
+    .emotion-6::after {
       width: 6rem;
     }
   }
+
+  .emotion-6[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-8 li {
+.emotion-6 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-8 li a {
+.emotion-6 li a {
   color: #FFFFFF;
   padding: 0 0.5rem;
   height: 2.75rem;
@@ -177,27 +163,35 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   justify-content: center;
 }
 
-.emotion-8 li a:hover::after {
+.emotion-6 li a:hover::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li a:focus-visible::after {
+.emotion-6 li a:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a:focus::after {
+.emotion-6 li a:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a[data-active="true"] span::after {
+.emotion-6 li a[data-active="true"] span::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li:before {
+.emotion-6 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -213,22 +207,22 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   opacity: 0.3;
 }
 
-.emotion-8 li:last-child:before {
+.emotion-6 li:last-child:before {
   display: none;
 }
 
-.emotion-8:after {
+.emotion-6.emotion-6::after {
   background: none;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-8.si-nav-scrollable-hidden {
+  .emotion-6.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-10 {
+.emotion-7 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -236,37 +230,31 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-7 {
     overflow: hidden;
   }
 }
 
-.emotion-12 {
+.emotion-8 {
   display: inline-block;
   position: relative;
   z-index: 2;
-  -webkit-margin-end: 0.75rem;
-  margin-inline-end: 0.75rem;
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-12:last-child {
-    margin-right: 3rem;
-  }
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12::after {
+  .emotion-8::after {
     content: '';
     position: absolute;
     bottom: -1px;
-    width: 80rem;
+    width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
   }
 }
 
-.emotion-14 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -282,67 +270,52 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-9 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-14:hover::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  border-bottom: 0.3125rem solid #B80000;
-}
-
-.emotion-14:focus::after {
+.emotion-9:hover::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
 }
 
-.emotion-14:focus-visible::after {
+.emotion-9:focus::after,
+.emotion-9:focus-visible::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
+  inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-16::after {
+.emotion-10::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-18 {
+.emotion-11 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -353,146 +326,63 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   margin: 0;
 }
 
-.emotion-21 {
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-family: ReithSans,Helvetica,Arial,sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  color: #141414;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  display: inline-block;
-  padding: 0.75rem 0.25rem;
-  outline: none;
-}
-
-@media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-21 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-}
-
-@media (min-width: 37.5rem) {
-  .emotion-21 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-21 {
-    padding: 0.75rem 0.5rem;
-  }
-}
-
-.emotion-21:hover::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-}
-
-.emotion-21:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
-}
-
-.emotion-21:focus-visible::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
-}
-
-.emotion-23 {
+.emotion-14 {
   position: relative;
   padding: 0;
   margin: 0;
-  background-color: transparent;
   border: 0;
-  float: left;
-  height: 2.75rem;
-  width: 2.75rem;
+  float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
   width: 2.75rem;
   height: 2.75rem;
 }
 
-.emotion-23:hover,
-.emotion-23:focus {
-  cursor: pointer;
-  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
-}
-
-.emotion-23:hover::after,
-.emotion-23:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  border: 0.25rem solid #000000;
-}
-
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-14 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-23 {
-    height: 2.75rem;
+  .emotion-14 {
     width: 2.75rem;
+    height: 2.75rem;
   }
 }
 
-.emotion-23 svg {
+.emotion-14 svg {
   vertical-align: middle;
+  fill: #FFFFFF;
 }
 
-@media (min-width: 20rem) {
-  .emotion-23 {
-    width: 2.75rem;
-    height: 2.75rem;
-  }
+.emotion-14:hover,
+.emotion-14:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-23 svg {
-  vertical-align: middle;
-  fill: #FFFFFF;
+.emotion-14:hover::after,
+.emotion-14:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0.25rem solid #000000;
 }
 
-.emotion-25 {
+.emotion-15 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-25 {
+  .emotion-15 {
     fill: linkText;
   }
 }
 
-.emotion-30 {
+.emotion-20 {
   background-color: #FFFFFF;
   clear: both;
   position: absolute;
@@ -504,38 +394,38 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-30 {
+  .emotion-20 {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-30 ul {
+.emotion-20 ul {
   padding: 0;
   border: none;
 }
 
-.emotion-30 ul li {
+.emotion-20 ul li {
   padding: 0;
 }
 
-.emotion-30 ul li:last-child {
+.emotion-20 ul li:last-child {
   padding-bottom: 0;
 }
 
-.emotion-30 a {
+.emotion-20 a {
   display: block;
   position: relative;
   padding-inline: 0.5rem;
 }
 
-.emotion-30 a:hover {
+.emotion-20 a:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-30 a:before {
+.emotion-20 a:before {
   content: "";
   position: absolute;
   top: 0;
@@ -547,32 +437,30 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   opacity: 0;
 }
 
-.emotion-30 a:hover::before {
+.emotion-20 a:hover::before {
   opacity: 1;
 }
 
-.emotion-30 a:focus-visible {
+.emotion-20 a:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-32 {
+.emotion-21 {
   list-style-type: none;
   margin: 0;
-  padding: 0 0.5rem;
-  border-bottom: 0.0625rem solid #E6E8EA;
+  padding: 0;
 }
 
-.emotion-34 {
-  padding: 0.75rem 0;
+.emotion-22 {
+  padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-34:last-child {
-  padding-bottom: 0.25rem;
+.emotion-22:last-child {
   border: 0;
 }
 
-.emotion-36 {
+.emotion-23 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -586,34 +474,35 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-36 {
+  .emotion-23 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-36 {
+  .emotion-23 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-36:hover,
-.emotion-36:focus {
+.emotion-23:hover,
+.emotion-23:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-38 {
+.emotion-24 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-39 {
+  .emotion-25 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -622,52 +511,52 @@ exports[`Navigation should correctly render amp navigation 1`] = `
     -ms-overflow-style: none;
   }
 
-  .emotion-39::-webkit-scrollbar {
+  .emotion-25::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-39:focus-visible {
+  .emotion-25:focus-visible {
     outline: none;
   }
 
-  .emotion-39:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-25:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-39:after {
+  .emotion-25::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-39:after {
+    .emotion-25::after {
       width: 6rem;
     }
   }
+
+  .emotion-25[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-39 li {
+.emotion-25 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-39 li a {
+.emotion-25 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -683,7 +572,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   justify-content: center;
 }
 
-.emotion-39 li:before {
+.emotion-25 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -699,12 +588,12 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   opacity: 1;
 }
 
-.emotion-39 li:last-child:before {
+.emotion-25 li:last-child:before {
   display: none;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-39.si-nav-scrollable-hidden {
+  .emotion-25.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
@@ -715,50 +604,50 @@ exports[`Navigation should correctly render amp navigation 1`] = `
     class="emotion-0"
   />
   <nav
-    class="emotion-1 emotion-2"
+    class="emotion-1"
     dir="ltr"
     id="si-nav"
     role="navigation"
   >
     <div
-      class="emotion-3 emotion-4"
+      class="emotion-2"
     >
       <div
-        class="emotion-5"
+        class="emotion-3"
       >
         <div
-          class="emotion-6"
+          class="emotion-4"
         >
           <div
-            class="emotion-7"
+            class="emotion-5"
           >
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-6"
               data-e2e="scrollable-nav"
               dir="ltr"
             >
               <ul
-                class="emotion-10 emotion-11"
+                class="emotion-7"
                 role="list"
               >
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
                     aria-label="Home"
-                    class="focusIndicatorRemove emotion-14 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     data-active="true"
                     href="/news"
                   >
                     <span
-                      class="emotion-16 emotion-17"
+                      class="emotion-10"
                       id="NavigationLinks-Home"
                       role="text"
                     >
                       <span
-                        class="emotion-18"
+                        class="emotion-11"
                       >
                         Current page, 
                       </span>
@@ -767,12 +656,12 @@ exports[`Navigation should correctly render amp navigation 1`] = `
                   </a>
                 </li>
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-21 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     href="/about"
                   >
                     About
@@ -792,7 +681,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-23 emotion-24"
+              class="focusIndicatorRemove emotion-14"
               data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
               dir="ltr"
               on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
@@ -804,7 +693,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="emotion-25 emotion-26"
+                class="emotion-15 emotion-16"
                 data-amp-bind-hidden="menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -817,7 +706,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
               </svg>
               <svg
                 aria-hidden="true"
-                class="emotion-25 emotion-26"
+                class="emotion-15 emotion-16"
                 data-amp-bind-hidden="!menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -831,28 +720,29 @@ exports[`Navigation should correctly render amp navigation 1`] = `
                 />
               </svg>
               <span
-                class="emotion-18"
+                class="emotion-11"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-20"
             data-e2e="dropdown-nav"
             hidden=""
             id="si-nav-dropdown-menu"
           >
             <ul
-              class="emotion-32 emotion-33"
+              class="emotion-21"
+              role="list"
             >
               <li
-                class="emotion-34 emotion-35"
+                class="emotion-22"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-36 emotion-37"
+                  class="emotion-23"
                   href="/news"
                 >
                   <span
@@ -866,16 +756,16 @@ exports[`Navigation should correctly render amp navigation 1`] = `
           </div>
         </div>
         <div
-          class="emotion-38"
+          class="emotion-24"
         >
           <div
-            class="emotion-39 emotion-9"
+            class="emotion-25"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
             id="si-nav-scrollable"
           >
             <ul
-              class="emotion-10 emotion-11"
+              class="emotion-7"
               role="list"
             />
           </div>
@@ -906,22 +796,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   }
 }
 
-@media (min-width: 62.9375rem) {
-  .emotion-1::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-bottom: 0.0625rem solid #E6E8EA;
-  }
-}
-
-.emotion-1 .emotion-13::after {
-  left: 0;
-}
-
-.emotion-3 {
+.emotion-2 {
   position: relative;
   max-width: 63.4rem;
   margin: 0 auto;
@@ -929,18 +804,18 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 auto;
   }
 }
 
-.emotion-5 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -951,12 +826,12 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: relative;
   width: 100%;
 }
 
-.emotion-7 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -975,7 +850,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   z-index: 0;
 }
 
-.emotion-7::before {
+.emotion-5::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -992,7 +867,8 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-6 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -1001,52 +877,52 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
     -ms-overflow-style: none;
   }
 
-  .emotion-8::-webkit-scrollbar {
+  .emotion-6::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-8:focus-visible {
+  .emotion-6:focus-visible {
     outline: none;
   }
 
-  .emotion-8:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-6:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-8:after {
+  .emotion-6::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-8:after {
+    .emotion-6::after {
       width: 6rem;
     }
   }
+
+  .emotion-6[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-8 li {
+.emotion-6 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-8 li a {
+.emotion-6 li a {
   color: #FFFFFF;
   padding: 0 0.5rem;
   height: 2.75rem;
@@ -1063,27 +939,35 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   justify-content: center;
 }
 
-.emotion-8 li a:hover::after {
+.emotion-6 li a:hover::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li a:focus-visible::after {
+.emotion-6 li a:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a:focus::after {
+.emotion-6 li a:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a[data-active="true"] span::after {
+.emotion-6 li a[data-active="true"] span::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li:before {
+.emotion-6 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -1099,22 +983,22 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   opacity: 0.3;
 }
 
-.emotion-8 li:last-child:before {
+.emotion-6 li:last-child:before {
   display: none;
 }
 
-.emotion-8:after {
+.emotion-6.emotion-6::after {
   background: none;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-8.si-nav-scrollable-hidden {
+  .emotion-6.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-10 {
+.emotion-7 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -1122,37 +1006,31 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-7 {
     overflow: hidden;
   }
 }
 
-.emotion-12 {
+.emotion-8 {
   display: inline-block;
   position: relative;
   z-index: 2;
-  -webkit-margin-end: 0.75rem;
-  margin-inline-end: 0.75rem;
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-12:last-child {
-    margin-right: 3rem;
-  }
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12::after {
+  .emotion-8::after {
     content: '';
     position: absolute;
     bottom: -1px;
-    width: 80rem;
+    width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
   }
 }
 
-.emotion-14 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -1168,130 +1046,99 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-9 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-14:hover::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-}
-
-.emotion-14:focus::after {
+.emotion-9:hover::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
 }
 
-.emotion-14:focus-visible::after {
+.emotion-9:focus::after,
+.emotion-9:focus-visible::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
+  inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-20 {
+.emotion-12 {
   position: relative;
   padding: 0;
   margin: 0;
-  background-color: transparent;
   border: 0;
-  float: left;
-  height: 2.75rem;
-  width: 2.75rem;
+  float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
   width: 2.75rem;
   height: 2.75rem;
 }
 
-.emotion-20:hover,
-.emotion-20:focus {
-  cursor: pointer;
-  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
-}
-
-.emotion-20:hover::after,
-.emotion-20:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  border: 0.25rem solid #000000;
-}
-
 @media (min-width: 37.5rem) {
-  .emotion-20 {
+  .emotion-12 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-20 {
-    height: 2.75rem;
+  .emotion-12 {
     width: 2.75rem;
+    height: 2.75rem;
   }
 }
 
-.emotion-20 svg {
+.emotion-12 svg {
   vertical-align: middle;
+  fill: #FFFFFF;
 }
 
-@media (min-width: 20rem) {
-  .emotion-20 {
-    width: 2.75rem;
-    height: 2.75rem;
-  }
+.emotion-12:hover,
+.emotion-12:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-20 svg {
-  vertical-align: middle;
-  fill: #FFFFFF;
+.emotion-12:hover::after,
+.emotion-12:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0.25rem solid #000000;
 }
 
-.emotion-22 {
+.emotion-13 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-22 {
+  .emotion-13 {
     fill: linkText;
   }
 }
 
-.emotion-26 {
+.emotion-17 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -1302,7 +1149,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   margin: 0;
 }
 
-.emotion-27 {
+.emotion-18 {
   background-color: #FFFFFF;
   clear: both;
   position: absolute;
@@ -1314,38 +1161,38 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-27 {
+  .emotion-18 {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-27 ul {
+.emotion-18 ul {
   padding: 0;
   border: none;
 }
 
-.emotion-27 ul li {
+.emotion-18 ul li {
   padding: 0;
 }
 
-.emotion-27 ul li:last-child {
+.emotion-18 ul li:last-child {
   padding-bottom: 0;
 }
 
-.emotion-27 a {
+.emotion-18 a {
   display: block;
   position: relative;
   padding-inline: 0.5rem;
 }
 
-.emotion-27 a:hover {
+.emotion-18 a:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-27 a:before {
+.emotion-18 a:before {
   content: "";
   position: absolute;
   top: 0;
@@ -1357,32 +1204,30 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   opacity: 0;
 }
 
-.emotion-27 a:hover::before {
+.emotion-18 a:hover::before {
   opacity: 1;
 }
 
-.emotion-27 a:focus-visible {
+.emotion-18 a:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-29 {
+.emotion-19 {
   list-style-type: none;
   margin: 0;
-  padding: 0 0.5rem;
-  border-bottom: 0.0625rem solid #E6E8EA;
+  padding: 0;
 }
 
-.emotion-31 {
-  padding: 0.75rem 0;
+.emotion-20 {
+  padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-31:last-child {
-  padding-bottom: 0.25rem;
+.emotion-20:last-child {
   border: 0;
 }
 
-.emotion-33 {
+.emotion-21 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -1396,34 +1241,35 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-33 {
+  .emotion-21 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-33 {
+  .emotion-21 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-33:hover,
-.emotion-33:focus {
+.emotion-21:hover,
+.emotion-21:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-35 {
+.emotion-22 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-36 {
+  .emotion-23 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -1432,52 +1278,52 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
     -ms-overflow-style: none;
   }
 
-  .emotion-36::-webkit-scrollbar {
+  .emotion-23::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-36:focus-visible {
+  .emotion-23:focus-visible {
     outline: none;
   }
 
-  .emotion-36:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-23:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-36:after {
+  .emotion-23::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-36:after {
+    .emotion-23::after {
       width: 6rem;
     }
   }
+
+  .emotion-23[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-36 li {
+.emotion-23 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-36 li a {
+.emotion-23 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -1493,7 +1339,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   justify-content: center;
 }
 
-.emotion-36 li:before {
+.emotion-23 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -1509,12 +1355,12 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   opacity: 1;
 }
 
-.emotion-36 li:last-child:before {
+.emotion-23 li:last-child:before {
   display: none;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-36.si-nav-scrollable-hidden {
+  .emotion-23.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
@@ -1525,51 +1371,51 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
     class="emotion-0"
   />
   <nav
-    class="emotion-1 emotion-2"
+    class="emotion-1"
     dir="ltr"
     id="si-nav"
     role="navigation"
   >
     <div
-      class="emotion-3 emotion-4"
+      class="emotion-2"
     >
       <div
-        class="emotion-5"
+        class="emotion-3"
       >
         <div
-          class="emotion-6"
+          class="emotion-4"
         >
           <div
-            class="emotion-7"
+            class="emotion-5"
           >
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-6"
               data-e2e="scrollable-nav"
               dir="ltr"
             >
               <ul
-                class="emotion-10 emotion-11"
+                class="emotion-7"
                 role="list"
               >
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-14 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     href="/news"
                   >
                     Home
                   </a>
                 </li>
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-14 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     href="/about"
                   >
                     About
@@ -1589,7 +1435,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-20 emotion-21"
+              class="focusIndicatorRemove emotion-12"
               data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
               dir="ltr"
               on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
@@ -1601,7 +1447,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
             >
               <svg
                 aria-hidden="true"
-                class="emotion-22 emotion-23"
+                class="emotion-13 emotion-14"
                 data-amp-bind-hidden="menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -1614,7 +1460,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
               </svg>
               <svg
                 aria-hidden="true"
-                class="emotion-22 emotion-23"
+                class="emotion-13 emotion-14"
                 data-amp-bind-hidden="!menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -1628,28 +1474,29 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
                 />
               </svg>
               <span
-                class="emotion-26"
+                class="emotion-17"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-27 emotion-28"
+            class="emotion-18"
             data-e2e="dropdown-nav"
             hidden=""
             id="si-nav-dropdown-menu"
           >
             <ul
-              class="emotion-29 emotion-30"
+              class="emotion-19"
+              role="list"
             >
               <li
-                class="emotion-31 emotion-32"
+                class="emotion-20"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-33 emotion-34"
+                  class="emotion-21"
                   href="/news"
                 >
                   <span
@@ -1663,16 +1510,16 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
           </div>
         </div>
         <div
-          class="emotion-35"
+          class="emotion-22"
         >
           <div
-            class="emotion-36 emotion-9"
+            class="emotion-23"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
             id="si-nav-scrollable"
           >
             <ul
-              class="emotion-10 emotion-11"
+              class="emotion-7"
               role="list"
             />
           </div>
@@ -1703,22 +1550,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   }
 }
 
-@media (min-width: 62.9375rem) {
-  .emotion-1::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-bottom: 0.0625rem solid #E6E8EA;
-  }
-}
-
-.emotion-1 .emotion-13::after {
-  left: 0;
-}
-
-.emotion-3 {
+.emotion-2 {
   position: relative;
   max-width: 63.4rem;
   margin: 0 auto;
@@ -1726,18 +1558,18 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 auto;
   }
 }
 
-.emotion-5 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1748,12 +1580,12 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: relative;
   width: 100%;
 }
 
-.emotion-7 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1772,7 +1604,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   z-index: 0;
 }
 
-.emotion-7::before {
+.emotion-5::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -1789,7 +1621,8 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-6 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -1798,52 +1631,52 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
     -ms-overflow-style: none;
   }
 
-  .emotion-8::-webkit-scrollbar {
+  .emotion-6::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-8:focus-visible {
+  .emotion-6:focus-visible {
     outline: none;
   }
 
-  .emotion-8:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-6:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-8:after {
+  .emotion-6::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-8:after {
+    .emotion-6::after {
       width: 6rem;
     }
   }
+
+  .emotion-6[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-8 li {
+.emotion-6 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-8 li a {
+.emotion-6 li a {
   color: #FFFFFF;
   padding: 0 0.5rem;
   height: 2.75rem;
@@ -1860,27 +1693,35 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   justify-content: center;
 }
 
-.emotion-8 li a:hover::after {
+.emotion-6 li a:hover::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li a:focus-visible::after {
+.emotion-6 li a:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a:focus::after {
+.emotion-6 li a:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a[data-active="true"] span::after {
+.emotion-6 li a[data-active="true"] span::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li:before {
+.emotion-6 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -1896,22 +1737,22 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   opacity: 0.3;
 }
 
-.emotion-8 li:last-child:before {
+.emotion-6 li:last-child:before {
   display: none;
 }
 
-.emotion-8:after {
+.emotion-6.emotion-6::after {
   background: none;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-8.si-nav-scrollable-hidden {
+  .emotion-6.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-10 {
+.emotion-7 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -1919,103 +1760,31 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-7 {
     overflow: hidden;
   }
 }
 
-.emotion-12 {
+.emotion-8 {
   display: inline-block;
   position: relative;
   z-index: 2;
-  -webkit-margin-end: 0.75rem;
-  margin-inline-end: 0.75rem;
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-12:last-child {
-    margin-right: 3rem;
-  }
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12::after {
+  .emotion-8::after {
     content: '';
     position: absolute;
     bottom: -1px;
-    width: 80rem;
+    width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
   }
 }
 
-.emotion-14 {
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-family: ReithSans,Helvetica,Arial,sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  color: #141414;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  display: inline-block;
-  padding: 0.75rem 0.25rem;
-  outline: none;
-}
-
-@media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-}
-
-@media (min-width: 37.5rem) {
-  .emotion-14 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-14 {
-    padding: 0.75rem 0.5rem;
-  }
-}
-
-.emotion-14:hover::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-}
-
-.emotion-14:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
-}
-
-.emotion-14:focus-visible::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
-}
-
-.emotion-18 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -2031,67 +1800,52 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-18 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-18 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-18 {
+  .emotion-9 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-18:hover::after {
+.emotion-9:hover::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
-  border-bottom: 0.3125rem solid #B80000;
 }
 
-.emotion-18:focus::after {
+.emotion-9:focus::after,
+.emotion-9:focus-visible::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
+  inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-18:focus-visible::after {
+.emotion-12::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
-}
-
-.emotion-20::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-22 {
+.emotion-13 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -2102,80 +1856,63 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   margin: 0;
 }
 
-.emotion-23 {
+.emotion-14 {
   position: relative;
   padding: 0;
   margin: 0;
-  background-color: transparent;
   border: 0;
-  float: left;
-  height: 2.75rem;
-  width: 2.75rem;
+  float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
   width: 2.75rem;
   height: 2.75rem;
 }
 
-.emotion-23:hover,
-.emotion-23:focus {
-  cursor: pointer;
-  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
-}
-
-.emotion-23:hover::after,
-.emotion-23:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  border: 0.25rem solid #000000;
-}
-
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-14 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-23 {
-    height: 2.75rem;
+  .emotion-14 {
     width: 2.75rem;
+    height: 2.75rem;
   }
 }
 
-.emotion-23 svg {
+.emotion-14 svg {
   vertical-align: middle;
+  fill: #FFFFFF;
 }
 
-@media (min-width: 20rem) {
-  .emotion-23 {
-    width: 2.75rem;
-    height: 2.75rem;
-  }
+.emotion-14:hover,
+.emotion-14:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-23 svg {
-  vertical-align: middle;
-  fill: #FFFFFF;
+.emotion-14:hover::after,
+.emotion-14:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0.25rem solid #000000;
 }
 
-.emotion-25 {
+.emotion-15 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-25 {
+  .emotion-15 {
     fill: linkText;
   }
 }
 
-.emotion-30 {
+.emotion-20 {
   background-color: #FFFFFF;
   clear: both;
   position: absolute;
@@ -2187,38 +1924,38 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-30 {
+  .emotion-20 {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-30 ul {
+.emotion-20 ul {
   padding: 0;
   border: none;
 }
 
-.emotion-30 ul li {
+.emotion-20 ul li {
   padding: 0;
 }
 
-.emotion-30 ul li:last-child {
+.emotion-20 ul li:last-child {
   padding-bottom: 0;
 }
 
-.emotion-30 a {
+.emotion-20 a {
   display: block;
   position: relative;
   padding-inline: 0.5rem;
 }
 
-.emotion-30 a:hover {
+.emotion-20 a:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-30 a:before {
+.emotion-20 a:before {
   content: "";
   position: absolute;
   top: 0;
@@ -2230,32 +1967,30 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   opacity: 0;
 }
 
-.emotion-30 a:hover::before {
+.emotion-20 a:hover::before {
   opacity: 1;
 }
 
-.emotion-30 a:focus-visible {
+.emotion-20 a:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-32 {
+.emotion-21 {
   list-style-type: none;
   margin: 0;
-  padding: 0 0.5rem;
-  border-bottom: 0.0625rem solid #E6E8EA;
+  padding: 0;
 }
 
-.emotion-34 {
-  padding: 0.75rem 0;
+.emotion-22 {
+  padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-34:last-child {
-  padding-bottom: 0.25rem;
+.emotion-22:last-child {
   border: 0;
 }
 
-.emotion-36 {
+.emotion-23 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -2269,34 +2004,35 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-36 {
+  .emotion-23 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-36 {
+  .emotion-23 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-36:hover,
-.emotion-36:focus {
+.emotion-23:hover,
+.emotion-23:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-38 {
+.emotion-24 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-39 {
+  .emotion-25 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -2305,52 +2041,52 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
     -ms-overflow-style: none;
   }
 
-  .emotion-39::-webkit-scrollbar {
+  .emotion-25::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-39:focus-visible {
+  .emotion-25:focus-visible {
     outline: none;
   }
 
-  .emotion-39:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-25:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-39:after {
+  .emotion-25::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-39:after {
+    .emotion-25::after {
       width: 6rem;
     }
   }
+
+  .emotion-25[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-39 li {
+.emotion-25 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-39 li a {
+.emotion-25 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -2366,7 +2102,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   justify-content: center;
 }
 
-.emotion-39 li:before {
+.emotion-25 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -2382,12 +2118,12 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   opacity: 1;
 }
 
-.emotion-39 li:last-child:before {
+.emotion-25 li:last-child:before {
   display: none;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-39.si-nav-scrollable-hidden {
+  .emotion-25.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
@@ -2398,62 +2134,62 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
     class="emotion-0"
   />
   <nav
-    class="emotion-1 emotion-2"
+    class="emotion-1"
     dir="ltr"
     id="si-nav"
     role="navigation"
   >
     <div
-      class="emotion-3 emotion-4"
+      class="emotion-2"
     >
       <div
-        class="emotion-5"
+        class="emotion-3"
       >
         <div
-          class="emotion-6"
+          class="emotion-4"
         >
           <div
-            class="emotion-7"
+            class="emotion-5"
           >
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-6"
               data-e2e="scrollable-nav"
               dir="ltr"
             >
               <ul
-                class="emotion-10 emotion-11"
+                class="emotion-7"
                 role="list"
               >
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-14 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     href="/news"
                   >
                     Home
                   </a>
                 </li>
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
                     aria-label="About"
-                    class="focusIndicatorRemove emotion-18 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     data-active="true"
                     href="/about"
                   >
                     <span
-                      class="emotion-20 emotion-21"
+                      class="emotion-12"
                       id="NavigationLinks-About"
                       role="text"
                     >
                       <span
-                        class="emotion-22"
+                        class="emotion-13"
                       >
                         Current page, 
                       </span>
@@ -2475,7 +2211,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-23 emotion-24"
+              class="focusIndicatorRemove emotion-14"
               data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
               dir="ltr"
               on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
@@ -2487,7 +2223,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
             >
               <svg
                 aria-hidden="true"
-                class="emotion-25 emotion-26"
+                class="emotion-15 emotion-16"
                 data-amp-bind-hidden="menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -2500,7 +2236,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
               </svg>
               <svg
                 aria-hidden="true"
-                class="emotion-25 emotion-26"
+                class="emotion-15 emotion-16"
                 data-amp-bind-hidden="!menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -2514,28 +2250,29 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
                 />
               </svg>
               <span
-                class="emotion-22"
+                class="emotion-13"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-20"
             data-e2e="dropdown-nav"
             hidden=""
             id="si-nav-dropdown-menu"
           >
             <ul
-              class="emotion-32 emotion-33"
+              class="emotion-21"
+              role="list"
             >
               <li
-                class="emotion-34 emotion-35"
+                class="emotion-22"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-36 emotion-37"
+                  class="emotion-23"
                   href="/news"
                 >
                   <span
@@ -2549,16 +2286,16 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
           </div>
         </div>
         <div
-          class="emotion-38"
+          class="emotion-24"
         >
           <div
-            class="emotion-39 emotion-9"
+            class="emotion-25"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
             id="si-nav-scrollable"
           >
             <ul
-              class="emotion-10 emotion-11"
+              class="emotion-7"
               role="list"
             />
           </div>
@@ -2583,22 +2320,7 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   background-color: #FFFFFF;
 }
 
-@media (min-width: 62.9375rem) {
-  .emotion-1::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-bottom: 0.0625rem solid #E6E8EA;
-  }
-}
-
-.emotion-1 .emotion-13::after {
-  left: 0;
-}
-
-.emotion-3 {
+.emotion-2 {
   position: relative;
   max-width: 63.4rem;
   margin: 0 auto;
@@ -2606,18 +2328,18 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 auto;
   }
 }
 
-.emotion-5 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2628,12 +2350,12 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: relative;
   width: 100%;
 }
 
-.emotion-7 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2652,7 +2374,7 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   z-index: 0;
 }
 
-.emotion-7::before {
+.emotion-5::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -2669,7 +2391,8 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-6 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -2678,52 +2401,52 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
     -ms-overflow-style: none;
   }
 
-  .emotion-8::-webkit-scrollbar {
+  .emotion-6::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-8:focus-visible {
+  .emotion-6:focus-visible {
     outline: none;
   }
 
-  .emotion-8:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-6:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-8:after {
+  .emotion-6::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-8:after {
+    .emotion-6::after {
       width: 6rem;
     }
   }
+
+  .emotion-6[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-8 li {
+.emotion-6 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-8 li a {
+.emotion-6 li a {
   color: #FFFFFF;
   padding: 0 0.5rem;
   height: 2.75rem;
@@ -2740,27 +2463,35 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   justify-content: center;
 }
 
-.emotion-8 li a:hover::after {
+.emotion-6 li a:hover::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li a:focus-visible::after {
+.emotion-6 li a:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a:focus::after {
+.emotion-6 li a:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a[data-active="true"] span::after {
+.emotion-6 li a[data-active="true"] span::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li:before {
+.emotion-6 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -2776,15 +2507,15 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   opacity: 0.3;
 }
 
-.emotion-8 li:last-child:before {
+.emotion-6 li:last-child:before {
   display: none;
 }
 
-.emotion-8:after {
+.emotion-6.emotion-6::after {
   background: none;
 }
 
-.emotion-10 {
+.emotion-7 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -2792,37 +2523,31 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-7 {
     overflow: hidden;
   }
 }
 
-.emotion-12 {
+.emotion-8 {
   display: inline-block;
   position: relative;
   z-index: 2;
-  -webkit-margin-end: 0.75rem;
-  margin-inline-end: 0.75rem;
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-12:last-child {
-    margin-right: 3rem;
-  }
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12::after {
+  .emotion-8::after {
     content: '';
     position: absolute;
     bottom: -1px;
-    width: 80rem;
+    width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
   }
 }
 
-.emotion-14 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -2838,67 +2563,52 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-9 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-14:hover::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  border-bottom: 0.3125rem solid #B80000;
-}
-
-.emotion-14:focus::after {
+.emotion-9:hover::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
 }
 
-.emotion-14:focus-visible::after {
+.emotion-9:focus::after,
+.emotion-9:focus-visible::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
+  inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-16::after {
+.emotion-10::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-18 {
+.emotion-11 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -2909,146 +2619,63 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   margin: 0;
 }
 
-.emotion-21 {
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-family: ReithSans,Helvetica,Arial,sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  color: #141414;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  display: inline-block;
-  padding: 0.75rem 0.25rem;
-  outline: none;
-}
-
-@media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-21 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-}
-
-@media (min-width: 37.5rem) {
-  .emotion-21 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-21 {
-    padding: 0.75rem 0.5rem;
-  }
-}
-
-.emotion-21:hover::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-}
-
-.emotion-21:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
-}
-
-.emotion-21:focus-visible::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
-}
-
-.emotion-23 {
+.emotion-14 {
   position: relative;
   padding: 0;
   margin: 0;
-  background-color: transparent;
   border: 0;
-  float: left;
-  height: 2.75rem;
-  width: 2.75rem;
+  float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
   width: 2.75rem;
   height: 2.75rem;
 }
 
-.emotion-23:hover,
-.emotion-23:focus {
-  cursor: pointer;
-  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
-}
-
-.emotion-23:hover::after,
-.emotion-23:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  border: 0.25rem solid #000000;
-}
-
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-14 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-23 {
-    height: 2.75rem;
+  .emotion-14 {
     width: 2.75rem;
+    height: 2.75rem;
   }
 }
 
-.emotion-23 svg {
+.emotion-14 svg {
   vertical-align: middle;
+  fill: #FFFFFF;
 }
 
-@media (min-width: 20rem) {
-  .emotion-23 {
-    width: 2.75rem;
-    height: 2.75rem;
-  }
+.emotion-14:hover,
+.emotion-14:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-23 svg {
-  vertical-align: middle;
-  fill: #FFFFFF;
+.emotion-14:hover::after,
+.emotion-14:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0.25rem solid #000000;
 }
 
-.emotion-25 {
+.emotion-15 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-25 {
+  .emotion-15 {
     fill: linkText;
   }
 }
 
-.emotion-28 {
+.emotion-18 {
   background-color: #FFFFFF;
   clear: both;
   overflow: hidden;
@@ -3066,45 +2693,45 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-28 {
+  .emotion-18 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-28 {
+  .emotion-18 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-28 ul {
+.emotion-18 ul {
   padding: 0;
   border: none;
 }
 
-.emotion-28 ul li {
+.emotion-18 ul li {
   padding: 0;
 }
 
-.emotion-28 ul li:last-child {
+.emotion-18 ul li:last-child {
   padding-bottom: 0;
 }
 
-.emotion-28 a {
+.emotion-18 a {
   display: block;
   position: relative;
   padding-inline: 0.5rem;
 }
 
-.emotion-28 a:hover {
+.emotion-18 a:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-28 a:before {
+.emotion-18 a:before {
   content: "";
   position: absolute;
   top: 0;
@@ -3116,32 +2743,30 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   opacity: 0;
 }
 
-.emotion-28 a:hover::before {
+.emotion-18 a:hover::before {
   opacity: 1;
 }
 
-.emotion-28 a:focus-visible {
+.emotion-18 a:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-30 {
+.emotion-19 {
   list-style-type: none;
   margin: 0;
-  padding: 0 0.5rem;
-  border-bottom: 0.0625rem solid #E6E8EA;
+  padding: 0;
 }
 
-.emotion-32 {
-  padding: 0.75rem 0;
+.emotion-20 {
+  padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-32:last-child {
-  padding-bottom: 0.25rem;
+.emotion-20:last-child {
   border: 0;
 }
 
-.emotion-34 {
+.emotion-21 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -3155,34 +2780,35 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-34 {
+  .emotion-21 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-34 {
+  .emotion-21 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-34:hover,
-.emotion-34:focus {
+.emotion-21:hover,
+.emotion-21:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-36 {
+.emotion-22 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-37 {
+  .emotion-23 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -3191,52 +2817,52 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
     -ms-overflow-style: none;
   }
 
-  .emotion-37::-webkit-scrollbar {
+  .emotion-23::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-37:focus-visible {
+  .emotion-23:focus-visible {
     outline: none;
   }
 
-  .emotion-37:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-23:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-37:after {
+  .emotion-23::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-37:after {
+    .emotion-23::after {
       width: 6rem;
     }
   }
+
+  .emotion-23[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-37 li {
+.emotion-23 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-37 li a {
+.emotion-23 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -3252,7 +2878,7 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   justify-content: center;
 }
 
-.emotion-37 li:before {
+.emotion-23 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -3268,23 +2894,23 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   opacity: 1;
 }
 
-.emotion-37 li:last-child:before {
+.emotion-23 li:last-child:before {
   display: none;
 }
 
-.emotion-41 {
+.emotion-25 {
   position: absolute;
   width: 100%;
   inset-inline-start: 0;
 }
 
 @media (min-width: 1041px) {
-  .emotion-41 {
+  .emotion-25 {
     width: 100%;
   }
 }
 
-.emotion-41::after {
+.emotion-25::after {
   content: '';
   position: absolute;
   inset-block-end: 0;
@@ -3297,49 +2923,49 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
     class="emotion-0"
   />
   <nav
-    class="emotion-1 emotion-2"
+    class="emotion-1"
     dir="ltr"
     role="navigation"
   >
     <div
-      class="emotion-3 emotion-4"
+      class="emotion-2"
     >
       <div
-        class="emotion-5"
+        class="emotion-3"
       >
         <div
-          class="emotion-6"
+          class="emotion-4"
         >
           <div
-            class="emotion-7"
+            class="emotion-5"
           >
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-6"
               data-e2e="scrollable-nav"
               dir="ltr"
             >
               <ul
-                class="emotion-10 emotion-11"
+                class="emotion-7"
                 role="list"
               >
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
                     aria-label="Home"
-                    class="focusIndicatorRemove emotion-14 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     data-active="true"
                     href="/news"
                   >
                     <span
-                      class="emotion-16 emotion-17"
+                      class="emotion-10"
                       id="NavigationLinks-Home"
                       role="text"
                     >
                       <span
-                        class="emotion-18"
+                        class="emotion-11"
                       >
                         Current page, 
                       </span>
@@ -3348,12 +2974,12 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
                   </a>
                 </li>
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-21 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     href="/about"
                   >
                     About
@@ -3364,13 +2990,13 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-23 emotion-24"
+              class="focusIndicatorRemove emotion-14"
               dir="ltr"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-25 emotion-26"
+                class="emotion-15 emotion-16"
                 focusable="false"
                 height="2.75rem"
                 viewBox="0 0 44 44"
@@ -3381,27 +3007,28 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
                 />
               </svg>
               <span
-                class="emotion-18"
+                class="emotion-11"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-18"
             data-e2e="dropdown-nav"
-            height="0"
+            style="height: 0px;"
           >
             <ul
-              class="emotion-30 emotion-31"
+              class="emotion-19"
+              role="list"
             >
               <li
-                class="emotion-32 emotion-33"
+                class="emotion-20"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-34 emotion-35"
+                  class="emotion-21"
                   href="/news"
                 >
                   <span
@@ -3415,22 +3042,22 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
           </div>
         </div>
         <div
-          class="emotion-36"
+          class="emotion-22"
         >
           <div
-            class="emotion-37 emotion-9"
+            class="emotion-23"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
           >
             <ul
-              class="emotion-10 emotion-11"
+              class="emotion-7"
               role="list"
             />
           </div>
         </div>
       </div>
       <div
-        class="emotion-41"
+        class="emotion-25"
       />
     </div>
   </nav>
@@ -3451,22 +3078,7 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   background-color: #FFFFFF;
 }
 
-@media (min-width: 62.9375rem) {
-  .emotion-1::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-bottom: 0.0625rem solid #E6E8EA;
-  }
-}
-
-.emotion-1 .emotion-13::after {
-  left: 0;
-}
-
-.emotion-3 {
+.emotion-2 {
   position: relative;
   max-width: 63.4rem;
   margin: 0 auto;
@@ -3474,18 +3086,18 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 auto;
   }
 }
 
-.emotion-5 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3496,12 +3108,12 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: relative;
   width: 100%;
 }
 
-.emotion-7 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3520,7 +3132,7 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   z-index: 0;
 }
 
-.emotion-7::before {
+.emotion-5::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -3537,7 +3149,8 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-6 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -3546,52 +3159,52 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
     -ms-overflow-style: none;
   }
 
-  .emotion-8::-webkit-scrollbar {
+  .emotion-6::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-8:focus-visible {
+  .emotion-6:focus-visible {
     outline: none;
   }
 
-  .emotion-8:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-6:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-8:after {
+  .emotion-6::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-8:after {
+    .emotion-6::after {
       width: 6rem;
     }
   }
+
+  .emotion-6[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-8 li {
+.emotion-6 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-8 li a {
+.emotion-6 li a {
   color: #FFFFFF;
   padding: 0 0.5rem;
   height: 2.75rem;
@@ -3608,27 +3221,35 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   justify-content: center;
 }
 
-.emotion-8 li a:hover::after {
+.emotion-6 li a:hover::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li a:focus-visible::after {
+.emotion-6 li a:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a:focus::after {
+.emotion-6 li a:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a[data-active="true"] span::after {
+.emotion-6 li a[data-active="true"] span::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li:before {
+.emotion-6 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -3644,15 +3265,15 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   opacity: 0.3;
 }
 
-.emotion-8 li:last-child:before {
+.emotion-6 li:last-child:before {
   display: none;
 }
 
-.emotion-8:after {
+.emotion-6.emotion-6::after {
   background: none;
 }
 
-.emotion-10 {
+.emotion-7 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -3660,37 +3281,31 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-7 {
     overflow: hidden;
   }
 }
 
-.emotion-12 {
+.emotion-8 {
   display: inline-block;
   position: relative;
   z-index: 2;
-  -webkit-margin-end: 0.75rem;
-  margin-inline-end: 0.75rem;
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-12:last-child {
-    margin-right: 3rem;
-  }
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12::after {
+  .emotion-8::after {
     content: '';
     position: absolute;
     bottom: -1px;
-    width: 80rem;
+    width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
   }
 }
 
-.emotion-14 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -3706,130 +3321,99 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-9 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-14:hover::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-}
-
-.emotion-14:focus::after {
+.emotion-9:hover::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
 }
 
-.emotion-14:focus-visible::after {
+.emotion-9:focus::after,
+.emotion-9:focus-visible::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
+  inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-20 {
+.emotion-12 {
   position: relative;
   padding: 0;
   margin: 0;
-  background-color: transparent;
   border: 0;
-  float: left;
-  height: 2.75rem;
-  width: 2.75rem;
+  float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
   width: 2.75rem;
   height: 2.75rem;
 }
 
-.emotion-20:hover,
-.emotion-20:focus {
-  cursor: pointer;
-  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
-}
-
-.emotion-20:hover::after,
-.emotion-20:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  border: 0.25rem solid #000000;
-}
-
 @media (min-width: 37.5rem) {
-  .emotion-20 {
+  .emotion-12 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-20 {
-    height: 2.75rem;
+  .emotion-12 {
     width: 2.75rem;
+    height: 2.75rem;
   }
 }
 
-.emotion-20 svg {
+.emotion-12 svg {
   vertical-align: middle;
+  fill: #FFFFFF;
 }
 
-@media (min-width: 20rem) {
-  .emotion-20 {
-    width: 2.75rem;
-    height: 2.75rem;
-  }
+.emotion-12:hover,
+.emotion-12:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-20 svg {
-  vertical-align: middle;
-  fill: #FFFFFF;
+.emotion-12:hover::after,
+.emotion-12:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0.25rem solid #000000;
 }
 
-.emotion-22 {
+.emotion-13 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-22 {
+  .emotion-13 {
     fill: linkText;
   }
 }
 
-.emotion-24 {
+.emotion-15 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -3840,7 +3424,7 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   margin: 0;
 }
 
-.emotion-25 {
+.emotion-16 {
   background-color: #FFFFFF;
   clear: both;
   overflow: hidden;
@@ -3858,45 +3442,45 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-25 {
+  .emotion-16 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-25 {
+  .emotion-16 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-25 ul {
+.emotion-16 ul {
   padding: 0;
   border: none;
 }
 
-.emotion-25 ul li {
+.emotion-16 ul li {
   padding: 0;
 }
 
-.emotion-25 ul li:last-child {
+.emotion-16 ul li:last-child {
   padding-bottom: 0;
 }
 
-.emotion-25 a {
+.emotion-16 a {
   display: block;
   position: relative;
   padding-inline: 0.5rem;
 }
 
-.emotion-25 a:hover {
+.emotion-16 a:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-25 a:before {
+.emotion-16 a:before {
   content: "";
   position: absolute;
   top: 0;
@@ -3908,32 +3492,30 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   opacity: 0;
 }
 
-.emotion-25 a:hover::before {
+.emotion-16 a:hover::before {
   opacity: 1;
 }
 
-.emotion-25 a:focus-visible {
+.emotion-16 a:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-27 {
+.emotion-17 {
   list-style-type: none;
   margin: 0;
-  padding: 0 0.5rem;
-  border-bottom: 0.0625rem solid #E6E8EA;
+  padding: 0;
 }
 
-.emotion-29 {
-  padding: 0.75rem 0;
+.emotion-18 {
+  padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-29:last-child {
-  padding-bottom: 0.25rem;
+.emotion-18:last-child {
   border: 0;
 }
 
-.emotion-31 {
+.emotion-19 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -3947,34 +3529,35 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-31 {
+  .emotion-19 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-31 {
+  .emotion-19 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-31:hover,
-.emotion-31:focus {
+.emotion-19:hover,
+.emotion-19:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-33 {
+.emotion-20 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-34 {
+  .emotion-21 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -3983,52 +3566,52 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
     -ms-overflow-style: none;
   }
 
-  .emotion-34::-webkit-scrollbar {
+  .emotion-21::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-34:focus-visible {
+  .emotion-21:focus-visible {
     outline: none;
   }
 
-  .emotion-34:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-21:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-34:after {
+  .emotion-21::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-34:after {
+    .emotion-21::after {
       width: 6rem;
     }
   }
+
+  .emotion-21[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-34 li {
+.emotion-21 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-34 li a {
+.emotion-21 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -4044,7 +3627,7 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   justify-content: center;
 }
 
-.emotion-34 li:before {
+.emotion-21 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -4060,23 +3643,23 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   opacity: 1;
 }
 
-.emotion-34 li:last-child:before {
+.emotion-21 li:last-child:before {
   display: none;
 }
 
-.emotion-38 {
+.emotion-23 {
   position: absolute;
   width: 100%;
   inset-inline-start: 0;
 }
 
 @media (min-width: 1041px) {
-  .emotion-38 {
+  .emotion-23 {
     width: 100%;
   }
 }
 
-.emotion-38::after {
+.emotion-23::after {
   content: '';
   position: absolute;
   inset-block-end: 0;
@@ -4089,50 +3672,50 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
     class="emotion-0"
   />
   <nav
-    class="emotion-1 emotion-2"
+    class="emotion-1"
     dir="ltr"
     role="navigation"
   >
     <div
-      class="emotion-3 emotion-4"
+      class="emotion-2"
     >
       <div
-        class="emotion-5"
+        class="emotion-3"
       >
         <div
-          class="emotion-6"
+          class="emotion-4"
         >
           <div
-            class="emotion-7"
+            class="emotion-5"
           >
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-6"
               data-e2e="scrollable-nav"
               dir="ltr"
             >
               <ul
-                class="emotion-10 emotion-11"
+                class="emotion-7"
                 role="list"
               >
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-14 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     href="/news"
                   >
                     Home
                   </a>
                 </li>
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-14 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     href="/about"
                   >
                     About
@@ -4143,13 +3726,13 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-20 emotion-21"
+              class="focusIndicatorRemove emotion-12"
               dir="ltr"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-22 emotion-23"
+                class="emotion-13 emotion-14"
                 focusable="false"
                 height="2.75rem"
                 viewBox="0 0 44 44"
@@ -4160,27 +3743,28 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
                 />
               </svg>
               <span
-                class="emotion-24"
+                class="emotion-15"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-25 emotion-26"
+            class="emotion-16"
             data-e2e="dropdown-nav"
-            height="0"
+            style="height: 0px;"
           >
             <ul
-              class="emotion-27 emotion-28"
+              class="emotion-17"
+              role="list"
             >
               <li
-                class="emotion-29 emotion-30"
+                class="emotion-18"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-31 emotion-32"
+                  class="emotion-19"
                   href="/news"
                 >
                   <span
@@ -4194,22 +3778,22 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
           </div>
         </div>
         <div
-          class="emotion-33"
+          class="emotion-20"
         >
           <div
-            class="emotion-34 emotion-9"
+            class="emotion-21"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
           >
             <ul
-              class="emotion-10 emotion-11"
+              class="emotion-7"
               role="list"
             />
           </div>
         </div>
       </div>
       <div
-        class="emotion-38"
+        class="emotion-23"
       />
     </div>
   </nav>
@@ -4230,22 +3814,7 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   background-color: #FFFFFF;
 }
 
-@media (min-width: 62.9375rem) {
-  .emotion-1::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-bottom: 0.0625rem solid #E6E8EA;
-  }
-}
-
-.emotion-1 .emotion-13::after {
-  left: 0;
-}
-
-.emotion-3 {
+.emotion-2 {
   position: relative;
   max-width: 63.4rem;
   margin: 0 auto;
@@ -4253,18 +3822,18 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-3 {
+  .emotion-2 {
     margin: 0 auto;
   }
 }
 
-.emotion-5 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4275,12 +3844,12 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   width: 100%;
 }
 
-.emotion-6 {
+.emotion-4 {
   position: relative;
   width: 100%;
 }
 
-.emotion-7 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4299,7 +3868,7 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   z-index: 0;
 }
 
-.emotion-7::before {
+.emotion-5::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -4316,7 +3885,8 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-6 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -4325,52 +3895,52 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
     -ms-overflow-style: none;
   }
 
-  .emotion-8::-webkit-scrollbar {
+  .emotion-6::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-8:focus-visible {
+  .emotion-6:focus-visible {
     outline: none;
   }
 
-  .emotion-8:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-6:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-8:after {
+  .emotion-6::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-8:after {
+    .emotion-6::after {
       width: 6rem;
     }
   }
+
+  .emotion-6[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-8 li {
+.emotion-6 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-8 li a {
+.emotion-6 li a {
   color: #FFFFFF;
   padding: 0 0.5rem;
   height: 2.75rem;
@@ -4387,27 +3957,35 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   justify-content: center;
 }
 
-.emotion-8 li a:hover::after {
+.emotion-6 li a:hover::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li a:focus-visible::after {
+.emotion-6 li a:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a:focus::after {
+.emotion-6 li a:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: none;
   box-shadow: inset 0 0 0 0.1875rem #FFFFFF;
   outline: 0.125rem solid #000000;
   outline-offset: -0.125rem;
 }
 
-.emotion-8 li a[data-active="true"] span::after {
+.emotion-6 li a[data-active="true"] span::after {
   border-bottom-color: #FFFFFF;
 }
 
-.emotion-8 li:before {
+.emotion-6 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -4423,15 +4001,15 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   opacity: 0.3;
 }
 
-.emotion-8 li:last-child:before {
+.emotion-6 li:last-child:before {
   display: none;
 }
 
-.emotion-8:after {
+.emotion-6.emotion-6::after {
   background: none;
 }
 
-.emotion-10 {
+.emotion-7 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -4439,103 +4017,31 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-7 {
     overflow: hidden;
   }
 }
 
-.emotion-12 {
+.emotion-8 {
   display: inline-block;
   position: relative;
   z-index: 2;
-  -webkit-margin-end: 0.75rem;
-  margin-inline-end: 0.75rem;
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-12:last-child {
-    margin-right: 3rem;
-  }
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12::after {
+  .emotion-8::after {
     content: '';
     position: absolute;
     bottom: -1px;
-    width: 80rem;
+    width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
   }
 }
 
-.emotion-14 {
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-family: ReithSans,Helvetica,Arial,sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  color: #141414;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  display: inline-block;
-  padding: 0.75rem 0.25rem;
-  outline: none;
-}
-
-@media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-}
-
-@media (min-width: 37.5rem) {
-  .emotion-14 {
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-14 {
-    padding: 0.75rem 0.5rem;
-  }
-}
-
-.emotion-14:hover::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-}
-
-.emotion-14:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
-}
-
-.emotion-14:focus-visible::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
-}
-
-.emotion-18 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -4551,67 +4057,52 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-18 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-18 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-18 {
+  .emotion-9 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-18:hover::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  border-bottom: 0.3125rem solid #B80000;
-}
-
-.emotion-18:focus::after {
+.emotion-9:hover::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
-  top: 0;
-  border: 0.1875rem solid #000000;
 }
 
-.emotion-18:focus-visible::after {
+.emotion-9:focus::after,
+.emotion-9:focus-visible::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-bottom: 0.25rem solid #B80000;
-  top: 0;
+  inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-20::after {
+.emotion-12::after {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-22 {
+.emotion-13 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -4622,80 +4113,63 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   margin: 0;
 }
 
-.emotion-23 {
+.emotion-14 {
   position: relative;
   padding: 0;
   margin: 0;
-  background-color: transparent;
   border: 0;
-  float: left;
-  height: 2.75rem;
-  width: 2.75rem;
+  float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
   width: 2.75rem;
   height: 2.75rem;
 }
 
-.emotion-23:hover,
-.emotion-23:focus {
-  cursor: pointer;
-  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
-}
-
-.emotion-23:hover::after,
-.emotion-23:focus::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  border: 0.25rem solid #000000;
-}
-
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-14 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-23 {
-    height: 2.75rem;
+  .emotion-14 {
     width: 2.75rem;
+    height: 2.75rem;
   }
 }
 
-.emotion-23 svg {
+.emotion-14 svg {
   vertical-align: middle;
+  fill: #FFFFFF;
 }
 
-@media (min-width: 20rem) {
-  .emotion-23 {
-    width: 2.75rem;
-    height: 2.75rem;
-  }
+.emotion-14:hover,
+.emotion-14:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-23 svg {
-  vertical-align: middle;
-  fill: #FFFFFF;
+.emotion-14:hover::after,
+.emotion-14:focus::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0.25rem solid #000000;
 }
 
-.emotion-25 {
+.emotion-15 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-25 {
+  .emotion-15 {
     fill: linkText;
   }
 }
 
-.emotion-28 {
+.emotion-18 {
   background-color: #FFFFFF;
   clear: both;
   overflow: hidden;
@@ -4713,45 +4187,45 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-28 {
+  .emotion-18 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-28 {
+  .emotion-18 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-28 ul {
+.emotion-18 ul {
   padding: 0;
   border: none;
 }
 
-.emotion-28 ul li {
+.emotion-18 ul li {
   padding: 0;
 }
 
-.emotion-28 ul li:last-child {
+.emotion-18 ul li:last-child {
   padding-bottom: 0;
 }
 
-.emotion-28 a {
+.emotion-18 a {
   display: block;
   position: relative;
   padding-inline: 0.5rem;
 }
 
-.emotion-28 a:hover {
+.emotion-18 a:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-28 a:before {
+.emotion-18 a:before {
   content: "";
   position: absolute;
   top: 0;
@@ -4763,32 +4237,30 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   opacity: 0;
 }
 
-.emotion-28 a:hover::before {
+.emotion-18 a:hover::before {
   opacity: 1;
 }
 
-.emotion-28 a:focus-visible {
+.emotion-18 a:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-30 {
+.emotion-19 {
   list-style-type: none;
   margin: 0;
-  padding: 0 0.5rem;
-  border-bottom: 0.0625rem solid #E6E8EA;
+  padding: 0;
 }
 
-.emotion-32 {
-  padding: 0.75rem 0;
+.emotion-20 {
+  padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-32:last-child {
-  padding-bottom: 0.25rem;
+.emotion-20:last-child {
   border: 0;
 }
 
-.emotion-34 {
+.emotion-21 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -4802,34 +4274,35 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-34 {
+  .emotion-21 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-34 {
+  .emotion-21 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-34:hover,
-.emotion-34:focus {
+.emotion-21:hover,
+.emotion-21:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-36 {
+.emotion-22 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-37 {
+  .emotion-23 {
+    position: relative;
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -4838,52 +4311,52 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
     -ms-overflow-style: none;
   }
 
-  .emotion-37::-webkit-scrollbar {
+  .emotion-23::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-37:focus-visible {
+  .emotion-23:focus-visible {
     outline: none;
   }
 
-  .emotion-37:focus-visible::after {
-    outline: 0.1875rem solid #000000;
+  .emotion-23:focus-visible::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
+    outline: 0.1875rem solid #000000;
   }
 
-  .emotion-37:after {
+  .emotion-23::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 3;
     overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 1) 100%
-          );
+    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-37:after {
+    .emotion-23::after {
       width: 6rem;
     }
   }
+
+  .emotion-23[dir="rtl"]::after {
+    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+  }
 }
 
-.emotion-37 li {
+.emotion-23 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-37 li a {
+.emotion-23 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -4899,7 +4372,7 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   justify-content: center;
 }
 
-.emotion-37 li:before {
+.emotion-23 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -4915,23 +4388,23 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   opacity: 1;
 }
 
-.emotion-37 li:last-child:before {
+.emotion-23 li:last-child:before {
   display: none;
 }
 
-.emotion-41 {
+.emotion-25 {
   position: absolute;
   width: 100%;
   inset-inline-start: 0;
 }
 
 @media (min-width: 1041px) {
-  .emotion-41 {
+  .emotion-25 {
     width: 100%;
   }
 }
 
-.emotion-41::after {
+.emotion-25::after {
   content: '';
   position: absolute;
   inset-block-end: 0;
@@ -4944,61 +4417,61 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
     class="emotion-0"
   />
   <nav
-    class="emotion-1 emotion-2"
+    class="emotion-1"
     dir="ltr"
     role="navigation"
   >
     <div
-      class="emotion-3 emotion-4"
+      class="emotion-2"
     >
       <div
-        class="emotion-5"
+        class="emotion-3"
       >
         <div
-          class="emotion-6"
+          class="emotion-4"
         >
           <div
-            class="emotion-7"
+            class="emotion-5"
           >
             <div
-              class="emotion-8 emotion-9"
+              class="emotion-6"
               data-e2e="scrollable-nav"
               dir="ltr"
             >
               <ul
-                class="emotion-10 emotion-11"
+                class="emotion-7"
                 role="list"
               >
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-14 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     href="/news"
                   >
                     Home
                   </a>
                 </li>
                 <li
-                  class="emotion-12 emotion-13"
+                  class="emotion-8"
                   dir="ltr"
                   role="listitem"
                 >
                   <a
                     aria-label="About"
-                    class="focusIndicatorRemove emotion-18 emotion-15"
+                    class="focusIndicatorRemove emotion-9"
                     data-active="true"
                     href="/about"
                   >
                     <span
-                      class="emotion-20 emotion-21"
+                      class="emotion-12"
                       id="NavigationLinks-About"
                       role="text"
                     >
                       <span
-                        class="emotion-22"
+                        class="emotion-13"
                       >
                         Current page, 
                       </span>
@@ -5011,13 +4484,13 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-23 emotion-24"
+              class="focusIndicatorRemove emotion-14"
               dir="ltr"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-25 emotion-26"
+                class="emotion-15 emotion-16"
                 focusable="false"
                 height="2.75rem"
                 viewBox="0 0 44 44"
@@ -5028,27 +4501,28 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
                 />
               </svg>
               <span
-                class="emotion-22"
+                class="emotion-13"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-28 emotion-29"
+            class="emotion-18"
             data-e2e="dropdown-nav"
-            height="0"
+            style="height: 0px;"
           >
             <ul
-              class="emotion-30 emotion-31"
+              class="emotion-19"
+              role="list"
             >
               <li
-                class="emotion-32 emotion-33"
+                class="emotion-20"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-34 emotion-35"
+                  class="emotion-21"
                   href="/news"
                 >
                   <span
@@ -5062,22 +4536,22 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
           </div>
         </div>
         <div
-          class="emotion-36"
+          class="emotion-22"
         >
           <div
-            class="emotion-37 emotion-9"
+            class="emotion-23"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
           >
             <ul
-              class="emotion-10 emotion-11"
+              class="emotion-7"
               role="list"
             />
           </div>
         </div>
       </div>
       <div
-        class="emotion-41"
+        class="emotion-25"
       />
     </div>
   </nav>
diff --git a/src/app/components/Navigation/index.amp.tsx b/src/app/components/Navigation/index.amp.tsx
index bb4d7d69c50..34a5877c6c5 100644
--- a/src/app/components/Navigation/index.amp.tsx
+++ b/src/app/components/Navigation/index.amp.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
-import Navigation from '#psammead/psammead-navigation/src';
-import { ScrollableNavigation } from '#psammead/psammead-navigation/src/ScrollableNavigation';
-import {
-  AmpDropdown,
-  AmpMenuButton,
-} from '#psammead/psammead-navigation/src/DropdownNavigation';
 import { Direction } from '#app/models/types/global';
+import NavigationWrapper from './NavigationWrapper';
+import ScrollableNavigation from './ScrollableNavigation';
+import { AmpDropdown, AmpMenuButton } from './DropdownNavigation';
 import styles, { HIDDEN_CLASS_NAME } from './index.styles';
 
 const DROPDOWN_ID = 'si-nav-dropdown-menu';
@@ -28,7 +25,11 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
   bottomScrollableListItems,
   dropdownListItems,
 }) => (
-  <Navigation dir={dir} id={NAVIGATION_ID} ampOpenClass={OPEN_CLASS_NAME}>
+  <NavigationWrapper
+    dir={dir}
+    id={NAVIGATION_ID}
+    ampOpenClass={OPEN_CLASS_NAME}
+  >
     <div css={styles.navStack}>
       <div css={{ position: 'relative', width: '100%' }}>
         <div css={styles.topRow}>
@@ -40,7 +41,6 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
             {topScrollableListItems}
           </ScrollableNavigation>
           <AmpMenuButton
-            css={styles.menuButton}
             announcedText={menuAnnouncedText}
             onToggle={`
               ${DROPDOWN_ID}.toggleVisibility,
@@ -50,12 +50,7 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
             dir={dir}
           />
         </div>
-        <AmpDropdown
-          id={DROPDOWN_ID}
-          data-e2e="dropdown-nav"
-          css={styles.dropdown}
-          hidden
-        >
+        <AmpDropdown id={DROPDOWN_ID} css={styles.dropdown} hidden>
           {dropdownListItems}
         </AmpDropdown>
       </div>
@@ -70,7 +65,7 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
         </ScrollableNavigation>
       </div>
     </div>
-  </Navigation>
+  </NavigationWrapper>
 );
 
 export default AmpNavigationContainer;
diff --git a/src/app/components/Navigation/index.canonical.test.tsx b/src/app/components/Navigation/index.canonical.test.tsx
index a228c705ed5..b31dae4f48c 100644
--- a/src/app/components/Navigation/index.canonical.test.tsx
+++ b/src/app/components/Navigation/index.canonical.test.tsx
@@ -41,7 +41,7 @@ describe('Navigation - Canonical', () => {
       const dropdown = queryByTestId(dropdownTestId)?.parentElement;
       const [scrollableNavTopRow] = getAllByTestId(scrollableTestId);
       expect(scrollableNavTopRow).toBeInTheDocument();
-      expect(dropdown).toHaveAttribute('height', '0');
+      expect(dropdown).toHaveStyle('height: 0');
     });
 
     it('should render dropdown and no scrollable nav after menu button clicked', () => {
diff --git a/src/app/components/Navigation/index.canonical.tsx b/src/app/components/Navigation/index.canonical.tsx
index 1db20c8dc6d..02b8f414eaa 100644
--- a/src/app/components/Navigation/index.canonical.tsx
+++ b/src/app/components/Navigation/index.canonical.tsx
@@ -1,10 +1,4 @@
 import React, { useState, use } from 'react';
-import Navigation from '#psammead/psammead-navigation/src';
-import { ScrollableNavigation } from '#psammead/psammead-navigation/src/ScrollableNavigation';
-import {
-  CanonicalDropdown,
-  CanonicalMenuButton,
-} from '#psammead/psammead-navigation/src/DropdownNavigation';
 import { GROUP_2_MAX_WIDTH_BP } from '#app/components/ThemeProvider/mediaQueries';
 import useMediaQuery from '#hooks/useMediaQuery';
 import { RequestContext } from '#app/contexts/RequestContext';
@@ -12,6 +6,9 @@ import TopBarOJs from '#app/components/TopBarOJs';
 import useToggle from '#app/hooks/useToggle';
 import { TopStoryItem } from '#app/pages/ArticlePage/PagePromoSections/TopStoriesSection/types';
 import { Direction } from '#app/models/types/global';
+import { CanonicalDropdown, CanonicalMenuButton } from './DropdownNavigation';
+import ScrollableNavigation from './ScrollableNavigation';
+import NavigationWrapper from './NavigationWrapper';
 import styles from './index.styles';
 
 type CanonicalNavigationContainerProps = {
@@ -44,7 +41,7 @@ const CanonicalNavigationContainer: React.FC<
   });
 
   return (
-    <Navigation dir={dir} isOpen={isOpen}>
+    <NavigationWrapper dir={dir} isOpen={isOpen}>
       <div css={styles.navStack}>
         <div css={{ position: 'relative', width: '100%' }}>
           <div css={styles.topRow}>
@@ -57,7 +54,6 @@ const CanonicalNavigationContainer: React.FC<
             </ScrollableNavigation>
             {!isLite && (
               <CanonicalMenuButton
-                css={styles.menuButton}
                 announcedText={menuAnnouncedText}
                 isOpen={isOpen}
                 onClick={() => setIsOpen(!isOpen)}
@@ -81,7 +77,7 @@ const CanonicalNavigationContainer: React.FC<
       </div>
       <div css={styles.bottomDivider} />
       {topBarOJsEnabled && <TopBarOJs blocks={blocks ?? []} />}
-    </Navigation>
+    </NavigationWrapper>
   );
 };
 
diff --git a/src/app/components/Navigation/index.styles.ts b/src/app/components/Navigation/index.styles.ts
index 996de945c98..b9a5e55d2e3 100644
--- a/src/app/components/Navigation/index.styles.ts
+++ b/src/app/components/Navigation/index.styles.ts
@@ -1,6 +1,5 @@
 import pixelsToRem from '#app/utilities/pixelsToRem';
 import { css, Theme } from '@emotion/react';
-import { GROUP_B_MIN_WIDTH } from '../ThemeProvider/fontMediaQueries';
 
 export const HIDDEN_CLASS_NAME = 'si-nav-scrollable-hidden';
 
@@ -83,16 +82,26 @@ export default {
           justifyContent: 'center',
 
           '&:hover::after': {
+            // Override base POSTBOX hover colour — links sit on a POSTBOX background
             borderBottomColor: palette.WHITE,
           },
 
           '&:focus-visible::after': {
+            // Generate the pseudo-element, clear the old border, apply new focus indicator
+            content: "''",
+            position: 'absolute',
+            inset: 0,
+            border: 'none',
             boxShadow: `inset 0 0 0 ${pixelsToRem(3)}rem ${palette.WHITE}`,
             outline: `${pixelsToRem(2)}rem solid ${palette.BLACK}`,
             outlineOffset: `${pixelsToRem(-2)}rem`,
           },
 
           '&:focus::after': {
+            content: "''",
+            position: 'absolute',
+            inset: 0,
+            border: 'none',
             boxShadow: `inset 0 0 0 ${pixelsToRem(3)}rem ${palette.WHITE}`,
             outline: `${pixelsToRem(2)}rem solid ${palette.BLACK}`,
             outlineOffset: `${pixelsToRem(-2)}rem`,
@@ -125,7 +134,9 @@ export default {
         },
       },
 
-      '&:after': {
+      // Double selector (0,2,0) beats scrollableNav's gradient (0,1,0), regardless of
+      // stylesheet injection order (child class is injected after parent class in React).
+      '&&::after': {
         background: 'none',
       },
     }),
@@ -219,22 +230,4 @@ export default {
     position: 'relative',
     zIndex: 1,
   }),
-  menuButton: ({ palette }: Theme) =>
-    css({
-      backgroundColor: palette.POSTBOX,
-      color: palette.WHITE,
-
-      width: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
-      height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
-
-      [GROUP_B_MIN_WIDTH]: {
-        width: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
-        height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
-      },
-
-      svg: {
-        verticalAlign: 'middle',
-        fill: palette.WHITE,
-      },
-    }),
 };
diff --git a/src/app/components/Navigation/index.tsx b/src/app/components/Navigation/index.tsx
index ee545ee9e2b..7fb78002759 100644
--- a/src/app/components/Navigation/index.tsx
+++ b/src/app/components/Navigation/index.tsx
@@ -1,15 +1,12 @@
 import React, { use } from 'react';
-import { NavigationUl, NavigationLi } from '#psammead/psammead-navigation/src';
-import {
-  DropdownUl,
-  DropdownLi,
-} from '#psammead/psammead-navigation/src/DropdownNavigation';
 import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
 import useViewTracker from '#app/hooks/useViewTracker';
 import { RequestContext } from '#contexts/RequestContext';
 import { ServiceContext } from '#contexts/ServiceContext';
 import { Direction, Navigation, PageTypes } from '#app/models/types/global';
 import { TopStoryItem } from '#app/pages/ArticlePage/PagePromoSections/TopStoriesSection/types';
+import { DropdownList, DropdownListItem } from './DropdownNavigation';
+import { NavigationList, NavigationListItem } from './NavigationList';
 import Canonical from './index.canonical';
 import Amp from './index.amp';
 import styles from './index.styles';
@@ -231,9 +228,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   });
 
   const topScrollableListItems = (
-    <NavigationUl>
+    <NavigationList>
       {renderListItems({
-        Li: NavigationLi,
+        Li: NavigationListItem,
         navigation: navigationItems,
         currentPage,
         dir,
@@ -243,7 +240,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         pageType,
         navType: 'top',
       })}
-    </NavigationUl>
+    </NavigationList>
   );
 
   /**
@@ -262,9 +259,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   );
 
   const bottomScrollableListItems = (
-    <NavigationUl>
+    <NavigationList>
       {renderListItems({
-        Li: NavigationLi,
+        Li: NavigationListItem,
         navigation: bottomItems,
         currentPage,
         dir,
@@ -272,7 +269,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         clickTracker: bottomNavClickTrackerHandler,
         pageType,
       })}
-    </NavigationUl>
+    </NavigationList>
   );
 
   // Dropdown menu: prioritise the first top-level item and all its subitems
@@ -284,9 +281,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   })();
 
   const dropdownListItems = (
-    <DropdownUl>
+    <DropdownList>
       {renderListItems({
-        Li: DropdownLi,
+        Li: DropdownListItem,
         navigation: dropdownSource,
         currentPage,
         dir,
@@ -295,7 +292,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         viewTracker: dropdownNavViewTracker,
         pageType,
       })}
-    </DropdownUl>
+    </DropdownList>
   );
 
   const NavigationRenderer = isAmp ? Amp : Canonical;

From 32c13ca5102a6d045f1a2135fea689c3c8f44210 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 11:22:15 +0000
Subject: [PATCH 02/14] Update bundleSizeConfig.js

---
 scripts/bundleSize/bundleSizeConfig.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/bundleSize/bundleSizeConfig.js b/scripts/bundleSize/bundleSizeConfig.js
index b6c38b33d1f..ca88894e5ec 100644
--- a/scripts/bundleSize/bundleSizeConfig.js
+++ b/scripts/bundleSize/bundleSizeConfig.js
@@ -9,5 +9,5 @@
 
 export const VARIANCE = 5;
 
-export const MIN_SIZE = 935;
-export const MAX_SIZE = 1309;
+export const MIN_SIZE = 949;
+export const MAX_SIZE = 1321;

From a2b6b4ed36deaad86f9ea5a552f6ca9b6154e369 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 12:07:03 +0000
Subject: [PATCH 03/14] fix bottom divider

---
 src/app/components/Navigation/index.amp.tsx   |  1 +
 src/app/components/Navigation/index.styles.ts | 17 +++++++----------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/app/components/Navigation/index.amp.tsx b/src/app/components/Navigation/index.amp.tsx
index 34a5877c6c5..e7860a6bbb2 100644
--- a/src/app/components/Navigation/index.amp.tsx
+++ b/src/app/components/Navigation/index.amp.tsx
@@ -65,6 +65,7 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
         </ScrollableNavigation>
       </div>
     </div>
+    <div css={styles.bottomDivider} />
   </NavigationWrapper>
 );
 
diff --git a/src/app/components/Navigation/index.styles.ts b/src/app/components/Navigation/index.styles.ts
index b9a5e55d2e3..8cb79b603aa 100644
--- a/src/app/components/Navigation/index.styles.ts
+++ b/src/app/components/Navigation/index.styles.ts
@@ -16,19 +16,16 @@ export default {
     }),
   bottomDivider: ({ palette }: Theme) =>
     css({
-      position: 'absolute',
-      width: '100%',
-      insetInlineStart: 0,
-
-      '@media (min-width: 1041px)': {
-        width: '100%',
-      },
-
+      position: 'relative',
+      // ::after breaks out of the constrained navWrapper to span the full viewport,
+      // using the same centre-overflow trick as the POSTBOX topRow background.
       '&::after': {
         content: "''",
         position: 'absolute',
-        insetBlockEnd: 0,
-        width: '100%',
+        bottom: 0,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: '100vw',
         borderBottom: `${pixelsToRem(1)}rem solid ${palette.GREY_3}`,
       },
     }),

From d33462476d16e9527372ed9d0e9060b671dd448f Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 12:13:12 +0000
Subject: [PATCH 04/14] Fix amp `on` type

---
 .eslintrc.js                                                | 1 +
 src/app/components/Navigation/DropdownNavigation/types.d.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index bce2049712f..72998947bf6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -74,6 +74,7 @@ module.exports = {
           'custom-element',
           'custom-template',
           'fallback',
+          'on', // AMP event handler attribute — https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/
         ],
       },
     ],
diff --git a/src/app/components/Navigation/DropdownNavigation/types.d.ts b/src/app/components/Navigation/DropdownNavigation/types.d.ts
index fbbd001c485..0ffdafff2d8 100644
--- a/src/app/components/Navigation/DropdownNavigation/types.d.ts
+++ b/src/app/components/Navigation/DropdownNavigation/types.d.ts
@@ -12,7 +12,7 @@ declare namespace React.JSX {
 }
 
 declare namespace React {
-  interface HTMLAttributes<T> {
+  interface HTMLAttributes {
     /**
      * AMP event handler attribute — used for AMP actions like `tap:element.toggleVisibility`.
      * See: https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/

From 6745c678294b7192e3af52b5775e65cb44d31184 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 12:16:49 +0000
Subject: [PATCH 05/14] snapshot updates

---
 .../__snapshots__/index.amp.test.tsx.snap     |  20 +++
 .../index.canonical.test.tsx.snap             |  19 ++-
 .../__snapshots__/index.test.tsx.snap         | 117 +++++++++++++-----
 3 files changed, 112 insertions(+), 44 deletions(-)

diff --git a/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
index 64ba82ecd98..a6cb94c7905 100644
--- a/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
@@ -449,6 +449,23 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   }
 }
 
+.emotion-15 {
+  position: relative;
+}
+
+.emotion-15::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 100vw;
+  border-bottom: 0.0625rem solid #E6E8EA;
+}
+
 <div>
   <nav
     class="emotion-0"
@@ -572,6 +589,9 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="emotion-15"
+      />
     </div>
   </nav>
 </div>
diff --git a/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
index 52f5a1b72e6..6f3e10e30ce 100644
--- a/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
@@ -443,22 +443,19 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
 }
 
 .emotion-13 {
-  position: absolute;
-  width: 100%;
-  inset-inline-start: 0;
-}
-
-@media (min-width: 1041px) {
-  .emotion-13 {
-    width: 100%;
-  }
+  position: relative;
 }
 
 .emotion-13::after {
   content: '';
   position: absolute;
-  inset-block-end: 0;
-  width: 100%;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 100vw;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
diff --git a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
index 62160e9c709..208231fc629 100644
--- a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
@@ -599,6 +599,23 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   }
 }
 
+.emotion-27 {
+  position: relative;
+}
+
+.emotion-27::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 100vw;
+  border-bottom: 0.0625rem solid #E6E8EA;
+}
+
 <div>
   <div
     class="emotion-0"
@@ -771,6 +788,9 @@ exports[`Navigation should correctly render amp navigation 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="emotion-27"
+      />
     </div>
   </nav>
 </div>
@@ -1366,6 +1386,23 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   }
 }
 
+.emotion-25 {
+  position: relative;
+}
+
+.emotion-25::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 100vw;
+  border-bottom: 0.0625rem solid #E6E8EA;
+}
+
 <div>
   <div
     class="emotion-0"
@@ -1525,6 +1562,9 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
           </div>
         </div>
       </div>
+      <div
+        class="emotion-25"
+      />
     </div>
   </nav>
 </div>
@@ -2129,6 +2169,23 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   }
 }
 
+.emotion-27 {
+  position: relative;
+}
+
+.emotion-27::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 100vw;
+  border-bottom: 0.0625rem solid #E6E8EA;
+}
+
 <div>
   <div
     class="emotion-0"
@@ -2301,6 +2358,9 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
           </div>
         </div>
       </div>
+      <div
+        class="emotion-27"
+      />
     </div>
   </nav>
 </div>
@@ -2899,22 +2959,19 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 .emotion-25 {
-  position: absolute;
-  width: 100%;
-  inset-inline-start: 0;
-}
-
-@media (min-width: 1041px) {
-  .emotion-25 {
-    width: 100%;
-  }
+  position: relative;
 }
 
 .emotion-25::after {
   content: '';
   position: absolute;
-  inset-block-end: 0;
-  width: 100%;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 100vw;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
@@ -3648,22 +3705,19 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 .emotion-23 {
-  position: absolute;
-  width: 100%;
-  inset-inline-start: 0;
-}
-
-@media (min-width: 1041px) {
-  .emotion-23 {
-    width: 100%;
-  }
+  position: relative;
 }
 
 .emotion-23::after {
   content: '';
   position: absolute;
-  inset-block-end: 0;
-  width: 100%;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 100vw;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
@@ -4393,22 +4447,19 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 .emotion-25 {
-  position: absolute;
-  width: 100%;
-  inset-inline-start: 0;
-}
-
-@media (min-width: 1041px) {
-  .emotion-25 {
-    width: 100%;
-  }
+  position: relative;
 }
 
 .emotion-25::after {
   content: '';
   position: absolute;
-  inset-block-end: 0;
-  width: 100%;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 100vw;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 

From 6bb7df72ca2c6a4fd184d010752ca38256303112 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 12:44:51 +0000
Subject: [PATCH 06/14] Combine styles

---
 .../DropdownNavigation/index.styles.ts        |  44 ++++-
 .../ScrollableNavigation/index.styles.ts      | 115 +++++++++++-
 .../Navigation/ScrollableNavigation/index.tsx |   6 +-
 src/app/components/Navigation/index.amp.tsx   |   9 +-
 .../components/Navigation/index.canonical.tsx |  14 +-
 src/app/components/Navigation/index.styles.ts | 166 ------------------
 6 files changed, 160 insertions(+), 194 deletions(-)

diff --git a/src/app/components/Navigation/DropdownNavigation/index.styles.ts b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
index 62f32b440de..f52e2903d85 100644
--- a/src/app/components/Navigation/DropdownNavigation/index.styles.ts
+++ b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
@@ -6,7 +6,13 @@ import { MAX_NAV_ITEM_HEIGHT } from '../index.styles';
 export default {
   dropdown: ({ palette, mq }: Theme) =>
     css({
+      position: 'absolute',
+      top: '100%',
+      left: 0,
+      width: '100%',
+      zIndex: 99999,
       backgroundColor: palette.WHITE,
+      borderBottom: `${pixelsToRem(3)}rem solid ${palette.POSTBOX}`,
       clear: 'both',
       overflow: 'hidden',
       height: 0,
@@ -28,7 +34,13 @@ export default {
 
   ampDropdown: ({ palette, mq }: Theme) =>
     css({
+      position: 'absolute',
+      top: '100%',
+      left: 0,
+      width: '100%',
+      zIndex: 99999,
       backgroundColor: palette.WHITE,
+      borderBottom: `${pixelsToRem(3)}rem solid ${palette.POSTBOX}`,
       clear: 'both',
       [mq.GROUP_3_MIN_WIDTH]: {
         display: 'none',
@@ -51,19 +63,35 @@ export default {
       },
     }),
 
-  // Visual defaults for legacy nav services.
-  // The new-nav container's `dropdown` descendant styles override display, padding and hover.
-  dropdownLink: ({ palette, fontSizes, fontVariants }: Theme) =>
+  dropdownLink: ({ palette, spacings, fontSizes, fontVariants }: Theme) =>
     css({
       ...fontSizes.pica,
       ...fontVariants.sansRegular,
       color: palette.GREY_10,
       textDecoration: 'none',
-      padding: '0.75rem 0',
-      display: 'inline-block',
-      '&:hover, &:focus': {
-        textDecoration: 'underline',
-        textDecorationColor: palette.POSTBOX,
+      display: 'block',
+      position: 'relative',
+      padding: `0.75rem ${spacings.FULL}rem`,
+      '&:hover': {
+        backgroundColor: palette.GREY_3,
+        textDecoration: 'none',
+      },
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        insetInlineStart: 0,
+        height: '100%',
+        width: `${pixelsToRem(4)}rem`,
+        background: palette.POSTBOX,
+        display: 'block',
+        opacity: 0,
+      },
+      '&:hover::before': {
+        opacity: 1,
+      },
+      '&:focus-visible': {
+        outlineOffset: `-${pixelsToRem(3)}rem`,
       },
     }),
 
diff --git a/src/app/components/Navigation/ScrollableNavigation/index.styles.ts b/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
index 680917f3b1f..31d869c1ed4 100644
--- a/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
+++ b/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
@@ -1,11 +1,19 @@
 import { css, Theme } from '@emotion/react';
 import pixelsToRem from '#app/utilities/pixelsToRem';
+import { HIDDEN_CLASS_NAME, MAX_NAV_ITEM_HEIGHT } from '../index.styles';
 
 export default {
   scrollableNav: ({ palette, mq, spacings }: Theme) =>
     css({
+      // AMP hidden class — toggled via AMP actions, harmless on canonical
+      [`&.${HIDDEN_CLASS_NAME}`]: {
+        [mq.GROUP_2_MAX_WIDTH]: {
+          display: 'none',
+          visibility: 'hidden',
+        },
+      },
       [mq.GROUP_2_MAX_WIDTH]: {
-        position: 'relative', // required so ::after gradient is bounded to this element, not topRow
+        position: 'relative',
         whiteSpace: 'nowrap',
         overflowX: 'scroll',
         /* Avoid smooth scrolling — it causes accessibility issues */
@@ -56,4 +64,109 @@ export default {
         },
       },
     }),
+
+  // Applied when navPosition="primary" — sits on POSTBOX background; suppresses gradient overlay
+  primary: ({ palette, spacings }: Theme) =>
+    css({
+      li: {
+        marginInlineEnd: 0,
+
+        a: {
+          color: palette.WHITE,
+          padding: `0 ${spacings.FULL}rem`,
+          height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+
+          '&:hover::after': {
+            borderBottomColor: palette.WHITE,
+          },
+
+          '&:focus-visible::after': {
+            content: "''",
+            position: 'absolute',
+            inset: 0,
+            border: 'none',
+            boxShadow: `inset 0 0 0 ${pixelsToRem(3)}rem ${palette.WHITE}`,
+            outline: `${pixelsToRem(2)}rem solid ${palette.BLACK}`,
+            outlineOffset: `${pixelsToRem(-2)}rem`,
+          },
+
+          '&:focus::after': {
+            content: "''",
+            position: 'absolute',
+            inset: 0,
+            border: 'none',
+            boxShadow: `inset 0 0 0 ${pixelsToRem(3)}rem ${palette.WHITE}`,
+            outline: `${pixelsToRem(2)}rem solid ${palette.BLACK}`,
+            outlineOffset: `${pixelsToRem(-2)}rem`,
+          },
+
+          '&[data-active="true"]': {
+            span: {
+              '&::after': {
+                borderBottomColor: palette.WHITE,
+              },
+            },
+          },
+        },
+
+        '&:before': {
+          content: '""',
+          position: 'absolute',
+          insetInlineEnd: 0,
+          top: '50%',
+          transform: 'translateY(-50%)',
+          height: '60%',
+          width: `${pixelsToRem(1)}rem`,
+          background: palette.WHITE,
+          display: 'block',
+          opacity: 0.3,
+        },
+
+        '&:last-child:before': {
+          display: 'none',
+        },
+      },
+
+      // Double selector (0,2,0) beats scrollableNav's gradient (0,1,0), regardless of
+      // stylesheet injection order (child class is injected after parent class in React).
+      '&&::after': {
+        background: 'none',
+      },
+    }),
+
+  // Applied when navPosition="secondary" — white background row
+  secondary: ({ palette, spacings }: Theme) =>
+    css({
+      li: {
+        marginInlineEnd: 0,
+
+        a: {
+          padding: `0 ${spacings.FULL}rem`,
+          height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        },
+
+        '&:before': {
+          content: '""',
+          position: 'absolute',
+          insetInlineEnd: 0,
+          top: '50%',
+          transform: 'translateY(-50%)',
+          height: '60%',
+          width: `${pixelsToRem(1)}rem`,
+          background: palette.GREY_4,
+          display: 'block',
+          opacity: 1,
+        },
+
+        '&:last-child:before': {
+          display: 'none',
+        },
+      },
+    }),
 };
diff --git a/src/app/components/Navigation/ScrollableNavigation/index.tsx b/src/app/components/Navigation/ScrollableNavigation/index.tsx
index c6d66ecfb88..12aea34cf3b 100644
--- a/src/app/components/Navigation/ScrollableNavigation/index.tsx
+++ b/src/app/components/Navigation/ScrollableNavigation/index.tsx
@@ -17,7 +17,11 @@ const ScrollableNavigation = ({
   className,
 }: PropsWithChildren<Props>) => (
   <div
-    css={styles.scrollableNav}
+    css={[
+      styles.scrollableNav,
+      navPosition === 'primary' && styles.primary,
+      navPosition === 'secondary' && styles.secondary,
+    ]}
     data-e2e={`scrollable-nav${navPosition === 'secondary' ? '-secondary' : ''}`}
     dir={dir}
     id={id}
diff --git a/src/app/components/Navigation/index.amp.tsx b/src/app/components/Navigation/index.amp.tsx
index e7860a6bbb2..727ec5631c1 100644
--- a/src/app/components/Navigation/index.amp.tsx
+++ b/src/app/components/Navigation/index.amp.tsx
@@ -33,11 +33,7 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
     <div css={styles.navStack}>
       <div css={{ position: 'relative', width: '100%' }}>
         <div css={styles.topRow}>
-          <ScrollableNavigation
-            dir={dir}
-            css={[styles.topRowItems, styles.ampScrollableNav]}
-            navPosition="primary"
-          >
+          <ScrollableNavigation dir={dir} navPosition="primary">
             {topScrollableListItems}
           </ScrollableNavigation>
           <AmpMenuButton
@@ -50,7 +46,7 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
             dir={dir}
           />
         </div>
-        <AmpDropdown id={DROPDOWN_ID} css={styles.dropdown} hidden>
+        <AmpDropdown id={DROPDOWN_ID} hidden>
           {dropdownListItems}
         </AmpDropdown>
       </div>
@@ -58,7 +54,6 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
         <ScrollableNavigation
           id={SCROLLABLE_ID}
           dir={dir}
-          css={[styles.bottomRowItems, styles.ampScrollableNav]}
           navPosition="secondary"
         >
           {bottomScrollableListItems}
diff --git a/src/app/components/Navigation/index.canonical.tsx b/src/app/components/Navigation/index.canonical.tsx
index 02b8f414eaa..e3ceb7d5b6f 100644
--- a/src/app/components/Navigation/index.canonical.tsx
+++ b/src/app/components/Navigation/index.canonical.tsx
@@ -45,11 +45,7 @@ const CanonicalNavigationContainer: React.FC<
       <div css={styles.navStack}>
         <div css={{ position: 'relative', width: '100%' }}>
           <div css={styles.topRow}>
-            <ScrollableNavigation
-              dir={dir}
-              css={styles.topRowItems}
-              navPosition="primary"
-            >
+            <ScrollableNavigation dir={dir} navPosition="primary">
               {topScrollableListItems}
             </ScrollableNavigation>
             {!isLite && (
@@ -61,16 +57,12 @@ const CanonicalNavigationContainer: React.FC<
               />
             )}
           </div>
-          <CanonicalDropdown isOpen={isOpen} css={styles.dropdown}>
+          <CanonicalDropdown isOpen={isOpen}>
             {dropdownListItems}
           </CanonicalDropdown>
         </div>
         <div css={styles.lowerNavWrapper}>
-          <ScrollableNavigation
-            dir={dir}
-            css={styles.bottomRowItems}
-            navPosition="secondary"
-          >
+          <ScrollableNavigation dir={dir} navPosition="secondary">
             {bottomScrollableListItems}
           </ScrollableNavigation>
         </div>
diff --git a/src/app/components/Navigation/index.styles.ts b/src/app/components/Navigation/index.styles.ts
index 8cb79b603aa..8ed91657b42 100644
--- a/src/app/components/Navigation/index.styles.ts
+++ b/src/app/components/Navigation/index.styles.ts
@@ -34,15 +34,6 @@ export default {
     flexDirection: 'column',
     width: '100%',
   }),
-  ampScrollableNav: ({ mq }: Theme) =>
-    css({
-      [`&.${HIDDEN_CLASS_NAME}`]: {
-        [mq.GROUP_2_MAX_WIDTH]: {
-          display: 'none',
-          visibility: 'hidden',
-        },
-      },
-    }),
   topRow: ({ palette }: Theme) =>
     css({
       display: 'flex',
@@ -65,163 +56,6 @@ export default {
         pointerEvents: 'none' /* ensure it never interferes with clicks */,
       },
     }),
-  topRowItems: ({ palette, spacings }: Theme) =>
-    css({
-      li: {
-        marginInlineEnd: 0,
-
-        a: {
-          color: palette.WHITE,
-          padding: `0 ${spacings.FULL}rem`,
-          height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-
-          '&:hover::after': {
-            // Override base POSTBOX hover colour — links sit on a POSTBOX background
-            borderBottomColor: palette.WHITE,
-          },
-
-          '&:focus-visible::after': {
-            // Generate the pseudo-element, clear the old border, apply new focus indicator
-            content: "''",
-            position: 'absolute',
-            inset: 0,
-            border: 'none',
-            boxShadow: `inset 0 0 0 ${pixelsToRem(3)}rem ${palette.WHITE}`,
-            outline: `${pixelsToRem(2)}rem solid ${palette.BLACK}`,
-            outlineOffset: `${pixelsToRem(-2)}rem`,
-          },
-
-          '&:focus::after': {
-            content: "''",
-            position: 'absolute',
-            inset: 0,
-            border: 'none',
-            boxShadow: `inset 0 0 0 ${pixelsToRem(3)}rem ${palette.WHITE}`,
-            outline: `${pixelsToRem(2)}rem solid ${palette.BLACK}`,
-            outlineOffset: `${pixelsToRem(-2)}rem`,
-          },
-
-          '&[data-active="true"]': {
-            span: {
-              '&::after': {
-                borderBottomColor: palette.WHITE,
-              },
-            },
-          },
-        },
-
-        '&:before': {
-          content: '""',
-          position: 'absolute',
-          insetInlineEnd: 0,
-          top: '50%',
-          transform: 'translateY(-50%)',
-          height: '60%',
-          width: `${pixelsToRem(1)}rem`,
-          background: palette.WHITE,
-          display: 'block',
-          opacity: 0.3,
-        },
-
-        '&:last-child:before': {
-          display: 'none',
-        },
-      },
-
-      // Double selector (0,2,0) beats scrollableNav's gradient (0,1,0), regardless of
-      // stylesheet injection order (child class is injected after parent class in React).
-      '&&::after': {
-        background: 'none',
-      },
-    }),
-  bottomRowItems: ({ palette, spacings }: Theme) =>
-    css({
-      li: {
-        marginInlineEnd: 0,
-
-        a: {
-          padding: `0 ${spacings.FULL}rem`,
-          height: `${pixelsToRem(MAX_NAV_ITEM_HEIGHT)}rem`,
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-        },
-
-        '&:before': {
-          content: '""',
-          position: 'absolute',
-          insetInlineEnd: 0,
-          top: '50%',
-          transform: 'translateY(-50%)',
-          height: '60%',
-          width: `${pixelsToRem(1)}rem`,
-          background: palette.GREY_4,
-          display: 'block',
-          opacity: 1,
-        },
-
-        '&:last-child:before': {
-          display: 'none',
-        },
-      },
-    }),
-  dropdown: ({ palette, spacings }: Theme) =>
-    css({
-      position: 'absolute',
-      top: '100%',
-      left: '0',
-      width: '100%',
-      zIndex: 99999,
-
-      borderBottom: `${pixelsToRem(3)}rem solid ${palette.POSTBOX}`,
-
-      ul: {
-        padding: 0,
-        border: 'none',
-
-        li: {
-          padding: 0,
-
-          '&:last-child': {
-            paddingBottom: 0,
-          },
-        },
-      },
-
-      a: {
-        display: 'block',
-        position: 'relative',
-        paddingInline: `${spacings.FULL}rem`,
-
-        '&:hover': {
-          backgroundColor: palette.GREY_3,
-          textDecoration: 'none',
-        },
-
-        '&:before': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          height: '100%',
-          width: `${pixelsToRem(4)}rem`,
-          background: palette.POSTBOX,
-          display: 'block',
-          opacity: 0,
-        },
-
-        '&:hover::before': {
-          opacity: 1,
-        },
-
-        '&:focus-visible': {
-          outlineOffset: `-${pixelsToRem(3)}rem`,
-        },
-      },
-    }),
   lowerNavWrapper: css({
     width: '100%',
     position: 'relative',

From e59740acacf1e0608a8126c6ec4cc88a4778f044 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 12:45:08 +0000
Subject: [PATCH 07/14] snapshot updates

---
 .../__snapshots__/index.amp.test.tsx.snap     |  77 +-
 .../index.canonical.test.tsx.snap             |  71 +-
 .../__snapshots__/index.test.tsx.snap         | 658 ++++++++----------
 3 files changed, 311 insertions(+), 495 deletions(-)

diff --git a/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
index a6cb94c7905..e9bf2c04bd9 100644
--- a/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
@@ -82,6 +82,13 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   pointer-events: none;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-5.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-5 {
     position: relative;
@@ -207,13 +214,6 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   background: none;
 }
 
-@media (max-width: 37.4375rem) {
-  .emotion-5.si-nav-scrollable-hidden {
-    display: none;
-    visibility: hidden;
-  }
-}
-
 .emotion-6 {
   position: relative;
   padding: 0;
@@ -282,14 +282,14 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
 }
 
 .emotion-12 {
-  background-color: #FFFFFF;
-  clear: both;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   z-index: 99999;
+  background-color: #FFFFFF;
   border-bottom: 0.1875rem solid #B80000;
+  clear: both;
 }
 
 @media (min-width: 37.5rem) {
@@ -299,57 +299,19 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   }
 }
 
-.emotion-12 ul {
-  padding: 0;
-  border: none;
-}
-
-.emotion-12 ul li {
-  padding: 0;
-}
-
-.emotion-12 ul li:last-child {
-  padding-bottom: 0;
-}
-
-.emotion-12 a {
-  display: block;
-  position: relative;
-  padding-inline: 0.5rem;
-}
-
-.emotion-12 a:hover {
-  background-color: #E6E8EA;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-12 a:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  height: 100%;
-  width: 0.25rem;
-  background: #B80000;
-  display: block;
-  opacity: 0;
-}
-
-.emotion-12 a:hover::before {
-  opacity: 1;
-}
-
-.emotion-12 a:focus-visible {
-  outline-offset: -0.1875rem;
-}
-
 .emotion-13 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-14.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-14 {
     position: relative;
@@ -442,13 +404,6 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   display: none;
 }
 
-@media (max-width: 37.4375rem) {
-  .emotion-14.si-nav-scrollable-hidden {
-    display: none;
-    visibility: hidden;
-  }
-}
-
 .emotion-15 {
   position: relative;
 }
diff --git a/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
index 6f3e10e30ce..a940d9dff2e 100644
--- a/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
@@ -76,6 +76,13 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   pointer-events: none;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-5.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-5 {
     position: relative;
@@ -269,7 +276,13 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
 }
 
 .emotion-10 {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 99999;
   background-color: #FFFFFF;
+  border-bottom: 0.1875rem solid #B80000;
   clear: both;
   overflow: hidden;
   height: 0;
@@ -277,12 +290,6 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   transition: all 0.2s ease-out;
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
   visibility: hidden;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  z-index: 99999;
-  border-bottom: 0.1875rem solid #B80000;
 }
 
 @media (min-width: 37.5rem) {
@@ -299,57 +306,19 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   }
 }
 
-.emotion-10 ul {
-  padding: 0;
-  border: none;
-}
-
-.emotion-10 ul li {
-  padding: 0;
-}
-
-.emotion-10 ul li:last-child {
-  padding-bottom: 0;
-}
-
-.emotion-10 a {
-  display: block;
-  position: relative;
-  padding-inline: 0.5rem;
-}
-
-.emotion-10 a:hover {
-  background-color: #E6E8EA;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-10 a:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  height: 100%;
-  width: 0.25rem;
-  background: #B80000;
-  display: block;
-  opacity: 0;
-}
-
-.emotion-10 a:hover::before {
-  opacity: 1;
-}
-
-.emotion-10 a:focus-visible {
-  outline-offset: -0.1875rem;
-}
-
 .emotion-11 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-12.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-12 {
     position: relative;
diff --git a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
index 208231fc629..fa73d8227bb 100644
--- a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
@@ -90,6 +90,13 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   pointer-events: none;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-6.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
@@ -215,13 +222,6 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   background: none;
 }
 
-@media (max-width: 37.4375rem) {
-  .emotion-6.si-nav-scrollable-hidden {
-    display: none;
-    visibility: hidden;
-  }
-}
-
 .emotion-7 {
   list-style-type: none;
   padding: 0;
@@ -383,14 +383,14 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 .emotion-20 {
-  background-color: #FFFFFF;
-  clear: both;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   z-index: 99999;
+  background-color: #FFFFFF;
   border-bottom: 0.1875rem solid #B80000;
+  clear: both;
 }
 
 @media (min-width: 37.5rem) {
@@ -400,51 +400,6 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   }
 }
 
-.emotion-20 ul {
-  padding: 0;
-  border: none;
-}
-
-.emotion-20 ul li {
-  padding: 0;
-}
-
-.emotion-20 ul li:last-child {
-  padding-bottom: 0;
-}
-
-.emotion-20 a {
-  display: block;
-  position: relative;
-  padding-inline: 0.5rem;
-}
-
-.emotion-20 a:hover {
-  background-color: #E6E8EA;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-20 a:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  height: 100%;
-  width: 0.25rem;
-  background: #B80000;
-  display: block;
-  opacity: 0;
-}
-
-.emotion-20 a:hover::before {
-  opacity: 1;
-}
-
-.emotion-20 a:focus-visible {
-  outline-offset: -0.1875rem;
-}
-
 .emotion-21 {
   list-style-type: none;
   margin: 0;
@@ -469,8 +424,9 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   color: #141414;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0.75rem 0;
-  display: inline-block;
+  display: block;
+  position: relative;
+  padding: 0.75rem 0.5rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -487,11 +443,30 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   }
 }
 
-.emotion-23:hover,
-.emotion-23:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-color: #B80000;
+.emotion-23:hover {
+  background-color: #E6E8EA;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-23::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  height: 100%;
+  width: 0.25rem;
+  background: #B80000;
+  display: block;
+  opacity: 0;
+}
+
+.emotion-23:hover::before {
+  opacity: 1;
+}
+
+.emotion-23:focus-visible {
+  outline-offset: -0.1875rem;
 }
 
 .emotion-24 {
@@ -500,6 +475,13 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   z-index: 1;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-25.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-25 {
     position: relative;
@@ -592,13 +574,6 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   display: none;
 }
 
-@media (max-width: 37.4375rem) {
-  .emotion-25.si-nav-scrollable-hidden {
-    display: none;
-    visibility: hidden;
-  }
-}
-
 .emotion-27 {
   position: relative;
 }
@@ -886,6 +861,13 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   pointer-events: none;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-6.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
@@ -1011,13 +993,6 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   background: none;
 }
 
-@media (max-width: 37.4375rem) {
-  .emotion-6.si-nav-scrollable-hidden {
-    display: none;
-    visibility: hidden;
-  }
-}
-
 .emotion-7 {
   list-style-type: none;
   padding: 0;
@@ -1170,14 +1145,14 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 .emotion-18 {
-  background-color: #FFFFFF;
-  clear: both;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   z-index: 99999;
+  background-color: #FFFFFF;
   border-bottom: 0.1875rem solid #B80000;
+  clear: both;
 }
 
 @media (min-width: 37.5rem) {
@@ -1187,51 +1162,6 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   }
 }
 
-.emotion-18 ul {
-  padding: 0;
-  border: none;
-}
-
-.emotion-18 ul li {
-  padding: 0;
-}
-
-.emotion-18 ul li:last-child {
-  padding-bottom: 0;
-}
-
-.emotion-18 a {
-  display: block;
-  position: relative;
-  padding-inline: 0.5rem;
-}
-
-.emotion-18 a:hover {
-  background-color: #E6E8EA;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-18 a:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  height: 100%;
-  width: 0.25rem;
-  background: #B80000;
-  display: block;
-  opacity: 0;
-}
-
-.emotion-18 a:hover::before {
-  opacity: 1;
-}
-
-.emotion-18 a:focus-visible {
-  outline-offset: -0.1875rem;
-}
-
 .emotion-19 {
   list-style-type: none;
   margin: 0;
@@ -1256,8 +1186,9 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   color: #141414;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0.75rem 0;
-  display: inline-block;
+  display: block;
+  position: relative;
+  padding: 0.75rem 0.5rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1274,11 +1205,30 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   }
 }
 
-.emotion-21:hover,
-.emotion-21:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-color: #B80000;
+.emotion-21:hover {
+  background-color: #E6E8EA;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-21::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  height: 100%;
+  width: 0.25rem;
+  background: #B80000;
+  display: block;
+  opacity: 0;
+}
+
+.emotion-21:hover::before {
+  opacity: 1;
+}
+
+.emotion-21:focus-visible {
+  outline-offset: -0.1875rem;
 }
 
 .emotion-22 {
@@ -1287,6 +1237,13 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   z-index: 1;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-23.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-23 {
     position: relative;
@@ -1379,13 +1336,6 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   display: none;
 }
 
-@media (max-width: 37.4375rem) {
-  .emotion-23.si-nav-scrollable-hidden {
-    display: none;
-    visibility: hidden;
-  }
-}
-
 .emotion-25 {
   position: relative;
 }
@@ -1660,6 +1610,13 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   pointer-events: none;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-6.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
@@ -1785,13 +1742,6 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   background: none;
 }
 
-@media (max-width: 37.4375rem) {
-  .emotion-6.si-nav-scrollable-hidden {
-    display: none;
-    visibility: hidden;
-  }
-}
-
 .emotion-7 {
   list-style-type: none;
   padding: 0;
@@ -1953,14 +1903,14 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 .emotion-20 {
-  background-color: #FFFFFF;
-  clear: both;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   z-index: 99999;
+  background-color: #FFFFFF;
   border-bottom: 0.1875rem solid #B80000;
+  clear: both;
 }
 
 @media (min-width: 37.5rem) {
@@ -1970,51 +1920,6 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   }
 }
 
-.emotion-20 ul {
-  padding: 0;
-  border: none;
-}
-
-.emotion-20 ul li {
-  padding: 0;
-}
-
-.emotion-20 ul li:last-child {
-  padding-bottom: 0;
-}
-
-.emotion-20 a {
-  display: block;
-  position: relative;
-  padding-inline: 0.5rem;
-}
-
-.emotion-20 a:hover {
-  background-color: #E6E8EA;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-20 a:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  height: 100%;
-  width: 0.25rem;
-  background: #B80000;
-  display: block;
-  opacity: 0;
-}
-
-.emotion-20 a:hover::before {
-  opacity: 1;
-}
-
-.emotion-20 a:focus-visible {
-  outline-offset: -0.1875rem;
-}
-
 .emotion-21 {
   list-style-type: none;
   margin: 0;
@@ -2039,8 +1944,9 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   color: #141414;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0.75rem 0;
-  display: inline-block;
+  display: block;
+  position: relative;
+  padding: 0.75rem 0.5rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -2057,11 +1963,30 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   }
 }
 
-.emotion-23:hover,
-.emotion-23:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-color: #B80000;
+.emotion-23:hover {
+  background-color: #E6E8EA;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-23::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  height: 100%;
+  width: 0.25rem;
+  background: #B80000;
+  display: block;
+  opacity: 0;
+}
+
+.emotion-23:hover::before {
+  opacity: 1;
+}
+
+.emotion-23:focus-visible {
+  outline-offset: -0.1875rem;
 }
 
 .emotion-24 {
@@ -2070,6 +1995,13 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   z-index: 1;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-25.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-25 {
     position: relative;
@@ -2155,18 +2087,11 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   width: 0.0625rem;
   background: #B0B2B4;
   display: block;
-  opacity: 1;
-}
-
-.emotion-25 li:last-child:before {
-  display: none;
-}
-
-@media (max-width: 37.4375rem) {
-  .emotion-25.si-nav-scrollable-hidden {
-    display: none;
-    visibility: hidden;
-  }
+  opacity: 1;
+}
+
+.emotion-25 li:last-child:before {
+  display: none;
 }
 
 .emotion-27 {
@@ -2450,6 +2375,13 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   pointer-events: none;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-6.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
@@ -2736,7 +2668,13 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 .emotion-18 {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 99999;
   background-color: #FFFFFF;
+  border-bottom: 0.1875rem solid #B80000;
   clear: both;
   overflow: hidden;
   height: 0;
@@ -2744,12 +2682,6 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   transition: all 0.2s ease-out;
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
   visibility: hidden;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  z-index: 99999;
-  border-bottom: 0.1875rem solid #B80000;
 }
 
 @media (min-width: 37.5rem) {
@@ -2766,51 +2698,6 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   }
 }
 
-.emotion-18 ul {
-  padding: 0;
-  border: none;
-}
-
-.emotion-18 ul li {
-  padding: 0;
-}
-
-.emotion-18 ul li:last-child {
-  padding-bottom: 0;
-}
-
-.emotion-18 a {
-  display: block;
-  position: relative;
-  padding-inline: 0.5rem;
-}
-
-.emotion-18 a:hover {
-  background-color: #E6E8EA;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-18 a:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  height: 100%;
-  width: 0.25rem;
-  background: #B80000;
-  display: block;
-  opacity: 0;
-}
-
-.emotion-18 a:hover::before {
-  opacity: 1;
-}
-
-.emotion-18 a:focus-visible {
-  outline-offset: -0.1875rem;
-}
-
 .emotion-19 {
   list-style-type: none;
   margin: 0;
@@ -2835,8 +2722,9 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   color: #141414;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0.75rem 0;
-  display: inline-block;
+  display: block;
+  position: relative;
+  padding: 0.75rem 0.5rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -2853,11 +2741,30 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   }
 }
 
-.emotion-21:hover,
-.emotion-21:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-color: #B80000;
+.emotion-21:hover {
+  background-color: #E6E8EA;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-21::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  height: 100%;
+  width: 0.25rem;
+  background: #B80000;
+  display: block;
+  opacity: 0;
+}
+
+.emotion-21:hover::before {
+  opacity: 1;
+}
+
+.emotion-21:focus-visible {
+  outline-offset: -0.1875rem;
 }
 
 .emotion-22 {
@@ -2866,6 +2773,13 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   z-index: 1;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-23.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-23 {
     position: relative;
@@ -3205,6 +3119,13 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   pointer-events: none;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-6.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
@@ -3482,7 +3403,13 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 .emotion-16 {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 99999;
   background-color: #FFFFFF;
+  border-bottom: 0.1875rem solid #B80000;
   clear: both;
   overflow: hidden;
   height: 0;
@@ -3490,12 +3417,6 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   transition: all 0.2s ease-out;
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
   visibility: hidden;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  z-index: 99999;
-  border-bottom: 0.1875rem solid #B80000;
 }
 
 @media (min-width: 37.5rem) {
@@ -3512,51 +3433,6 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   }
 }
 
-.emotion-16 ul {
-  padding: 0;
-  border: none;
-}
-
-.emotion-16 ul li {
-  padding: 0;
-}
-
-.emotion-16 ul li:last-child {
-  padding-bottom: 0;
-}
-
-.emotion-16 a {
-  display: block;
-  position: relative;
-  padding-inline: 0.5rem;
-}
-
-.emotion-16 a:hover {
-  background-color: #E6E8EA;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-16 a:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  height: 100%;
-  width: 0.25rem;
-  background: #B80000;
-  display: block;
-  opacity: 0;
-}
-
-.emotion-16 a:hover::before {
-  opacity: 1;
-}
-
-.emotion-16 a:focus-visible {
-  outline-offset: -0.1875rem;
-}
-
 .emotion-17 {
   list-style-type: none;
   margin: 0;
@@ -3581,8 +3457,9 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   color: #141414;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0.75rem 0;
-  display: inline-block;
+  display: block;
+  position: relative;
+  padding: 0.75rem 0.5rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -3599,11 +3476,30 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   }
 }
 
-.emotion-19:hover,
-.emotion-19:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-color: #B80000;
+.emotion-19:hover {
+  background-color: #E6E8EA;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-19::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  height: 100%;
+  width: 0.25rem;
+  background: #B80000;
+  display: block;
+  opacity: 0;
+}
+
+.emotion-19:hover::before {
+  opacity: 1;
+}
+
+.emotion-19:focus-visible {
+  outline-offset: -0.1875rem;
 }
 
 .emotion-20 {
@@ -3612,6 +3508,13 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   z-index: 1;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-21.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-21 {
     position: relative;
@@ -3938,6 +3841,13 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   pointer-events: none;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-6.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
@@ -4224,7 +4134,13 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 .emotion-18 {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 99999;
   background-color: #FFFFFF;
+  border-bottom: 0.1875rem solid #B80000;
   clear: both;
   overflow: hidden;
   height: 0;
@@ -4232,12 +4148,6 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   transition: all 0.2s ease-out;
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
   visibility: hidden;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  z-index: 99999;
-  border-bottom: 0.1875rem solid #B80000;
 }
 
 @media (min-width: 37.5rem) {
@@ -4254,51 +4164,6 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   }
 }
 
-.emotion-18 ul {
-  padding: 0;
-  border: none;
-}
-
-.emotion-18 ul li {
-  padding: 0;
-}
-
-.emotion-18 ul li:last-child {
-  padding-bottom: 0;
-}
-
-.emotion-18 a {
-  display: block;
-  position: relative;
-  padding-inline: 0.5rem;
-}
-
-.emotion-18 a:hover {
-  background-color: #E6E8EA;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-18 a:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  height: 100%;
-  width: 0.25rem;
-  background: #B80000;
-  display: block;
-  opacity: 0;
-}
-
-.emotion-18 a:hover::before {
-  opacity: 1;
-}
-
-.emotion-18 a:focus-visible {
-  outline-offset: -0.1875rem;
-}
-
 .emotion-19 {
   list-style-type: none;
   margin: 0;
@@ -4323,8 +4188,9 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   color: #141414;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0.75rem 0;
-  display: inline-block;
+  display: block;
+  position: relative;
+  padding: 0.75rem 0.5rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -4341,11 +4207,30 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   }
 }
 
-.emotion-21:hover,
-.emotion-21:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-color: #B80000;
+.emotion-21:hover {
+  background-color: #E6E8EA;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-21::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  height: 100%;
+  width: 0.25rem;
+  background: #B80000;
+  display: block;
+  opacity: 0;
+}
+
+.emotion-21:hover::before {
+  opacity: 1;
+}
+
+.emotion-21:focus-visible {
+  outline-offset: -0.1875rem;
 }
 
 .emotion-22 {
@@ -4354,6 +4239,13 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   z-index: 1;
 }
 
+@media (max-width: 37.4375rem) {
+  .emotion-23.si-nav-scrollable-hidden {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 @media (max-width: 37.4375rem) {
   .emotion-23 {
     position: relative;

From 89a9314635313680fdc04a18284778240fdcc879 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 12:53:05 +0000
Subject: [PATCH 08/14] Update bundleSizeConfig.js

---
 scripts/bundleSize/bundleSizeConfig.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/bundleSize/bundleSizeConfig.js b/scripts/bundleSize/bundleSizeConfig.js
index ca88894e5ec..fee45d8ffc4 100644
--- a/scripts/bundleSize/bundleSizeConfig.js
+++ b/scripts/bundleSize/bundleSizeConfig.js
@@ -9,5 +9,5 @@
 
 export const VARIANCE = 5;
 
-export const MIN_SIZE = 949;
-export const MAX_SIZE = 1321;
+export const MIN_SIZE = 948;
+export const MAX_SIZE = 1320;

From 5169264a64244244595d3d4e5c727375eb855447 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 13:39:35 +0000
Subject: [PATCH 09/14] Gradient fixes

---
 .../DropdownNavigation/index.styles.ts        |  1 +
 .../ScrollableNavigation/index.styles.ts      | 90 ++++++++++++-------
 .../Navigation/ScrollableNavigation/index.tsx |  2 +-
 3 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/src/app/components/Navigation/DropdownNavigation/index.styles.ts b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
index f52e2903d85..14184234b04 100644
--- a/src/app/components/Navigation/DropdownNavigation/index.styles.ts
+++ b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
@@ -108,6 +108,7 @@ export default {
       padding: 0,
       margin: 0,
       border: 0,
+      flexShrink: 0, // never let the flex container squeeze the button off-screen
       float: 'inline-start',
       backgroundColor: palette.POSTBOX,
       color: palette.WHITE,
diff --git a/src/app/components/Navigation/ScrollableNavigation/index.styles.ts b/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
index 31d869c1ed4..c81a1a70db5 100644
--- a/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
+++ b/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
@@ -3,7 +3,10 @@ import pixelsToRem from '#app/utilities/pixelsToRem';
 import { HIDDEN_CLASS_NAME, MAX_NAV_ITEM_HEIGHT } from '../index.styles';
 
 export default {
-  scrollableNav: ({ palette, mq, spacings }: Theme) =>
+  // Outer non-scrolling wrapper — owns the gradient overlay.
+  // Keeping gradient here (not on the inner scroll div) means it stays fixed
+  // to the edge of the component while content scrolls underneath it.
+  scrollableNav: ({ mq, spacings }: Theme) =>
     css({
       // AMP hidden class — toggled via AMP actions, harmless on canonical
       [`&.${HIDDEN_CLASS_NAME}`]: {
@@ -12,6 +15,35 @@ export default {
           visibility: 'hidden',
         },
       },
+      [mq.GROUP_2_MAX_WIDTH]: {
+        position: 'relative',
+        // Flex item defaults: min-width:auto prevents shrinking, flex-grow:0 doesn't fill space.
+        // minWidth:0 + flexGrow:1 means this wrapper fills all space left by the fixed-width
+        // hamburger button, keeping the button on-screen at any viewport width.
+        minWidth: 0,
+        flexGrow: 1,
+
+        /* Gradient fade overlay — positioned on the non-scrolling wrapper so it
+           stays fixed at the edge while inner content scrolls beneath it */
+        '&::after': {
+          content: "' '",
+          height: '100%',
+          width: `${spacings.SEXTUPLE}rem`,
+          [mq.GROUP_2_MIN_WIDTH]: {
+            width: '6rem',
+          },
+          position: 'absolute',
+          top: 0,
+          insetInlineEnd: 0,
+          zIndex: 3,
+          pointerEvents: 'none',
+        },
+      },
+    }),
+
+  // Inner scrolling div — handles overflow, scrollbar hiding and focus ring
+  scrollableNavInner: ({ palette, mq, spacings }: Theme) =>
+    css({
       [mq.GROUP_2_MAX_WIDTH]: {
         position: 'relative',
         whiteSpace: 'nowrap',
@@ -20,6 +52,12 @@ export default {
         scrollBehavior: 'auto',
         WebkitOverflowScrolling: 'touch',
 
+        /* Pad the end so the last item can scroll fully clear of the gradient overlay */
+        paddingInlineEnd: `${spacings.SEXTUPLE}rem`,
+        [mq.GROUP_2_MIN_WIDTH]: {
+          paddingInlineEnd: '6rem',
+        },
+
         /* Hide scrollbar */
         scrollbarWidth: 'none',
         msOverflowStyle: 'none',
@@ -31,43 +69,27 @@ export default {
           outline: 'none',
         },
 
-        /* Focus indicator applied to pseudo-element for Firefox compatibility */
+        /* Focus indicator on pseudo-element for Firefox compatibility */
         '&:focus-visible::after': {
           content: "''",
           position: 'absolute',
-          width: '100%',
-          height: '100%',
+          inset: 0,
           outline: `${pixelsToRem(3)}rem solid ${palette.BLACK}`,
         },
-
-        /* Gradient fade overlay to indicate scrollable content */
-        '&::after': {
-          content: "' '",
-          height: '100%',
-          width: `${spacings.SEXTUPLE}rem`,
-          [mq.GROUP_2_MIN_WIDTH]: {
-            width: '6rem',
-          },
-          position: 'absolute',
-          insetInlineEnd: 0,
-          bottom: 0,
-          zIndex: 3,
-          overflow: 'hidden',
-          pointerEvents: 'none',
-          /* LTR: fade to the right */
-          background: `linear-gradient(to right, transparent 0%, ${palette.WHITE} 100%)`,
-        },
-
-        /* RTL: flip gradient to fade toward the left */
-        '&[dir="rtl"]::after': {
-          background: `linear-gradient(to left, transparent 0%, ${palette.WHITE} 100%)`,
-        },
       },
     }),
 
   // Applied when navPosition="primary" — sits on POSTBOX background; suppresses gradient overlay
   primary: ({ palette, spacings }: Theme) =>
     css({
+      '&::after': {
+        background: `linear-gradient(to right, transparent 0%, ${palette.POSTBOX} 100%)`,
+      },
+
+      '&[dir="rtl"]::after': {
+        background: `linear-gradient(to left, transparent 0%, ${palette.POSTBOX} 100%)`,
+      },
+
       li: {
         marginInlineEnd: 0,
 
@@ -129,17 +151,19 @@ export default {
           display: 'none',
         },
       },
-
-      // Double selector (0,2,0) beats scrollableNav's gradient (0,1,0), regardless of
-      // stylesheet injection order (child class is injected after parent class in React).
-      '&&::after': {
-        background: 'none',
-      },
     }),
 
   // Applied when navPosition="secondary" — white background row
   secondary: ({ palette, spacings }: Theme) =>
     css({
+      '&::after': {
+        background: `linear-gradient(to right, transparent 0%, ${palette.WHITE} 100%)`,
+      },
+
+      '&[dir="rtl"]::after': {
+        background: `linear-gradient(to left, transparent 0%, ${palette.WHITE} 100%)`,
+      },
+
       li: {
         marginInlineEnd: 0,
 
diff --git a/src/app/components/Navigation/ScrollableNavigation/index.tsx b/src/app/components/Navigation/ScrollableNavigation/index.tsx
index 12aea34cf3b..5394d97bec7 100644
--- a/src/app/components/Navigation/ScrollableNavigation/index.tsx
+++ b/src/app/components/Navigation/ScrollableNavigation/index.tsx
@@ -27,7 +27,7 @@ const ScrollableNavigation = ({
     id={id}
     className={className}
   >
-    {children}
+    <div css={styles.scrollableNavInner}>{children}</div>
   </div>
 );
 

From 5f98c6fa3d2d1ecd1a20eca4e2dc3c5acc39a8c2 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 13:39:54 +0000
Subject: [PATCH 10/14] snapshot updates

---
 .../__snapshots__/index.amp.test.tsx.snap     |  217 +-
 .../index.canonical.test.tsx.snap             |  217 +-
 .../__snapshots__/index.test.tsx.snap         | 1846 +++++++++--------
 3 files changed, 1192 insertions(+), 1088 deletions(-)

diff --git a/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
index e9bf2c04bd9..9b296bd1b13 100644
--- a/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.amp.test.tsx.snap
@@ -92,28 +92,11 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
 @media (max-width: 37.4375rem) {
   .emotion-5 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-5::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-5:focus-visible {
-    outline: none;
-  }
-
-  .emotion-5:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
   .emotion-5::after {
@@ -121,12 +104,10 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
@@ -134,10 +115,14 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
       width: 6rem;
     }
   }
+}
 
-  .emotion-5[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-5::after {
+  background: linear-gradient(to right, transparent 0%, #B80000 100%);
+}
+
+.emotion-5[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #B80000 100%);
 }
 
 .emotion-5 li {
@@ -210,15 +195,50 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   display: none;
 }
 
-.emotion-5.emotion-5::after {
-  background: none;
+@media (max-width: 37.4375rem) {
+  .emotion-6 {
+    position: relative;
+    white-space: nowrap;
+    overflow-x: scroll;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-padding-end: 3rem;
+    padding-inline-end: 3rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  @media (min-width: 25rem) {
+    .emotion-6 {
+      -webkit-padding-end: 6rem;
+      padding-inline-end: 6rem;
+    }
+  }
+
+  .emotion-6::-webkit-scrollbar {
+    display: none;
+  }
+
+  .emotion-6:focus-visible {
+    outline: none;
+  }
+
+  .emotion-6:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    outline: 0.1875rem solid #000000;
+  }
 }
 
-.emotion-6 {
+.emotion-7 {
   position: relative;
   padding: 0;
   margin: 0;
   border: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
@@ -227,50 +247,50 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-7 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-6 {
+  .emotion-7 {
     width: 2.75rem;
     height: 2.75rem;
   }
 }
 
-.emotion-6 svg {
+.emotion-7 svg {
   vertical-align: middle;
   fill: #FFFFFF;
 }
 
-.emotion-6:hover,
-.emotion-6:focus {
+.emotion-7:hover,
+.emotion-7:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-6:hover::after,
-.emotion-6:focus::after {
+.emotion-7:hover::after,
+.emotion-7:focus::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.25rem solid #000000;
 }
 
-.emotion-7 {
+.emotion-8 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-7 {
+  .emotion-8 {
     fill: linkText;
   }
 }
 
-.emotion-11 {
+.emotion-12 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -281,7 +301,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   margin: 0;
 }
 
-.emotion-12 {
+.emotion-13 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -293,82 +313,67 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12 {
+  .emotion-13 {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-13 {
+.emotion-14 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-14.si-nav-scrollable-hidden {
+  .emotion-15.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-15 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-14::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-14:focus-visible {
-    outline: none;
-  }
-
-  .emotion-14:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
-  .emotion-14::after {
+  .emotion-15::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-14::after {
+    .emotion-15::after {
       width: 6rem;
     }
   }
+}
 
-  .emotion-14[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-15::after {
+  background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
 }
 
-.emotion-14 li {
+.emotion-15[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+}
+
+.emotion-15 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-14 li a {
+.emotion-15 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -384,7 +389,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   justify-content: center;
 }
 
-.emotion-14 li:before {
+.emotion-15 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -400,15 +405,15 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
   opacity: 1;
 }
 
-.emotion-14 li:last-child:before {
+.emotion-15 li:last-child:before {
   display: none;
 }
 
-.emotion-15 {
+.emotion-17 {
   position: relative;
 }
 
-.emotion-15::after {
+.emotion-17::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -445,13 +450,17 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
               data-e2e="scrollable-nav"
               dir="ltr"
             >
-              <ul
-                data-testid="scrollable-nav"
+              <div
+                class="emotion-6"
               >
-                <li>
-                  List Items
-                </li>
-              </ul>
+                <ul
+                  data-testid="scrollable-nav"
+                >
+                  <li>
+                    List Items
+                  </li>
+                </ul>
+              </div>
             </div>
             <amp-state
               id="menuState"
@@ -465,7 +474,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
             <button
               aria-expanded="false"
               aria-label="menu"
-              class="focusIndicatorRemove emotion-6"
+              class="focusIndicatorRemove emotion-7"
               data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
               dir="ltr"
               on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
@@ -477,7 +486,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="emotion-7 emotion-8"
+                class="emotion-8 emotion-9"
                 data-amp-bind-hidden="menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -490,7 +499,7 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
               </svg>
               <svg
                 aria-hidden="true"
-                class="emotion-7 emotion-8"
+                class="emotion-8 emotion-9"
                 data-amp-bind-hidden="!menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -504,14 +513,14 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
                 />
               </svg>
               <span
-                class="emotion-11"
+                class="emotion-12"
               >
                 menu
               </span>
             </button>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-13"
             data-e2e="dropdown-nav"
             hidden=""
             id="si-nav-dropdown-menu"
@@ -526,26 +535,30 @@ exports[`AMP Navigation Snapshots should correctly render AMP navigation 1`] = `
           </div>
         </div>
         <div
-          class="emotion-13"
+          class="emotion-14"
         >
           <div
-            class="emotion-14"
+            class="emotion-15"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
             id="si-nav-scrollable"
           >
-            <ul
-              data-testid="scrollable-nav"
+            <div
+              class="emotion-6"
             >
-              <li>
-                List Items
-              </li>
-            </ul>
+              <ul
+                data-testid="scrollable-nav"
+              >
+                <li>
+                  List Items
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
       <div
-        class="emotion-15"
+        class="emotion-17"
       />
     </div>
   </nav>
diff --git a/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
index a940d9dff2e..47182a710dc 100644
--- a/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.canonical.test.tsx.snap
@@ -86,28 +86,11 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
 @media (max-width: 37.4375rem) {
   .emotion-5 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-5::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-5:focus-visible {
-    outline: none;
-  }
-
-  .emotion-5:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
   .emotion-5::after {
@@ -115,12 +98,10 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
@@ -128,10 +109,14 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
       width: 6rem;
     }
   }
+}
 
-  .emotion-5[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-5::after {
+  background: linear-gradient(to right, transparent 0%, #B80000 100%);
+}
+
+.emotion-5[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #B80000 100%);
 }
 
 .emotion-5 li {
@@ -204,15 +189,50 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   display: none;
 }
 
-.emotion-5.emotion-5::after {
-  background: none;
+@media (max-width: 37.4375rem) {
+  .emotion-6 {
+    position: relative;
+    white-space: nowrap;
+    overflow-x: scroll;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-padding-end: 3rem;
+    padding-inline-end: 3rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  @media (min-width: 25rem) {
+    .emotion-6 {
+      -webkit-padding-end: 6rem;
+      padding-inline-end: 6rem;
+    }
+  }
+
+  .emotion-6::-webkit-scrollbar {
+    display: none;
+  }
+
+  .emotion-6:focus-visible {
+    outline: none;
+  }
+
+  .emotion-6:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    outline: 0.1875rem solid #000000;
+  }
 }
 
-.emotion-6 {
+.emotion-7 {
   position: relative;
   padding: 0;
   margin: 0;
   border: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
@@ -221,50 +241,50 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-7 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-6 {
+  .emotion-7 {
     width: 2.75rem;
     height: 2.75rem;
   }
 }
 
-.emotion-6 svg {
+.emotion-7 svg {
   vertical-align: middle;
   fill: #FFFFFF;
 }
 
-.emotion-6:hover,
-.emotion-6:focus {
+.emotion-7:hover,
+.emotion-7:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-6:hover::after,
-.emotion-6:focus::after {
+.emotion-7:hover::after,
+.emotion-7:focus::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.25rem solid #000000;
 }
 
-.emotion-7 {
+.emotion-8 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-7 {
+  .emotion-8 {
     fill: linkText;
   }
 }
 
-.emotion-9 {
+.emotion-10 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -275,7 +295,7 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   margin: 0;
 }
 
-.emotion-10 {
+.emotion-11 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -293,89 +313,74 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-10 {
+  .emotion-11 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-11 {
+.emotion-12 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-12.si-nav-scrollable-hidden {
+  .emotion-13.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-12 {
+  .emotion-13 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-12::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-12:focus-visible {
-    outline: none;
-  }
-
-  .emotion-12:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
-  .emotion-12::after {
+  .emotion-13::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-12::after {
+    .emotion-13::after {
       width: 6rem;
     }
   }
+}
 
-  .emotion-12[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-13::after {
+  background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
 }
 
-.emotion-12 li {
+.emotion-13[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+}
+
+.emotion-13 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-12 li a {
+.emotion-13 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -391,7 +396,7 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   justify-content: center;
 }
 
-.emotion-12 li:before {
+.emotion-13 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -407,15 +412,15 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
   opacity: 1;
 }
 
-.emotion-12 li:last-child:before {
+.emotion-13 li:last-child:before {
   display: none;
 }
 
-.emotion-13 {
+.emotion-15 {
   position: relative;
 }
 
-.emotion-13::after {
+.emotion-15::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -451,24 +456,28 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
               data-e2e="scrollable-nav"
               dir="ltr"
             >
-              <ul
-                data-testid="scrollable-nav"
+              <div
+                class="emotion-6"
               >
-                <li>
-                  List Items
-                </li>
-              </ul>
+                <ul
+                  data-testid="scrollable-nav"
+                >
+                  <li>
+                    List Items
+                  </li>
+                </ul>
+              </div>
             </div>
             <button
               aria-expanded="false"
               aria-label="menu"
-              class="focusIndicatorRemove emotion-6"
+              class="focusIndicatorRemove emotion-7"
               dir="ltr"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-7 emotion-8"
+                class="emotion-8 emotion-9"
                 focusable="false"
                 height="2.75rem"
                 viewBox="0 0 44 44"
@@ -479,14 +488,14 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
                 />
               </svg>
               <span
-                class="emotion-9"
+                class="emotion-10"
               >
                 menu
               </span>
             </button>
           </div>
           <div
-            class="emotion-10"
+            class="emotion-11"
             data-e2e="dropdown-nav"
             style="height: 0px;"
           >
@@ -500,25 +509,29 @@ exports[`Navigation - Canonical snapshots should correctly render Canonical navi
           </div>
         </div>
         <div
-          class="emotion-11"
+          class="emotion-12"
         >
           <div
-            class="emotion-12"
+            class="emotion-13"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
           >
-            <ul
-              data-testid="scrollable-nav"
+            <div
+              class="emotion-6"
             >
-              <li>
-                List Items
-              </li>
-            </ul>
+              <ul
+                data-testid="scrollable-nav"
+              >
+                <li>
+                  List Items
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
       <div
-        class="emotion-13"
+        class="emotion-15"
       />
     </div>
   </nav>
diff --git a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
index fa73d8227bb..991e716b8d4 100644
--- a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
@@ -100,28 +100,11 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-6::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-6:focus-visible {
-    outline: none;
-  }
-
-  .emotion-6:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
   .emotion-6::after {
@@ -129,12 +112,10 @@ exports[`Navigation should correctly render amp navigation 1`] = `
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
@@ -142,10 +123,14 @@ exports[`Navigation should correctly render amp navigation 1`] = `
       width: 6rem;
     }
   }
+}
 
-  .emotion-6[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-6::after {
+  background: linear-gradient(to right, transparent 0%, #B80000 100%);
+}
+
+.emotion-6[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #B80000 100%);
 }
 
 .emotion-6 li {
@@ -218,11 +203,43 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   display: none;
 }
 
-.emotion-6.emotion-6::after {
-  background: none;
+@media (max-width: 37.4375rem) {
+  .emotion-7 {
+    position: relative;
+    white-space: nowrap;
+    overflow-x: scroll;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-padding-end: 3rem;
+    padding-inline-end: 3rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  @media (min-width: 25rem) {
+    .emotion-7 {
+      -webkit-padding-end: 6rem;
+      padding-inline-end: 6rem;
+    }
+  }
+
+  .emotion-7::-webkit-scrollbar {
+    display: none;
+  }
+
+  .emotion-7:focus-visible {
+    outline: none;
+  }
+
+  .emotion-7:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    outline: 0.1875rem solid #000000;
+  }
 }
 
-.emotion-7 {
+.emotion-8 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -230,12 +247,12 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-8 {
     overflow: hidden;
   }
 }
 
-.emotion-8 {
+.emotion-9 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -244,7 +261,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8::after {
+  .emotion-9::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -254,7 +271,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   }
 }
 
-.emotion-9 {
+.emotion-10 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -270,26 +287,26 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-9:hover::after {
+.emotion-10:hover::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -298,15 +315,15 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-9:focus::after,
-.emotion-9:focus-visible::after {
+.emotion-10:focus::after,
+.emotion-10:focus-visible::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-10::after {
+.emotion-11::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -315,7 +332,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-11 {
+.emotion-12 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -326,11 +343,14 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-15 {
   position: relative;
   padding: 0;
   margin: 0;
   border: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
@@ -339,50 +359,50 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-15 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-14 {
+  .emotion-15 {
     width: 2.75rem;
     height: 2.75rem;
   }
 }
 
-.emotion-14 svg {
+.emotion-15 svg {
   vertical-align: middle;
   fill: #FFFFFF;
 }
 
-.emotion-14:hover,
-.emotion-14:focus {
+.emotion-15:hover,
+.emotion-15:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-14:hover::after,
-.emotion-14:focus::after {
+.emotion-15:hover::after,
+.emotion-15:focus::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.25rem solid #000000;
 }
 
-.emotion-15 {
+.emotion-16 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-15 {
+  .emotion-16 {
     fill: linkText;
   }
 }
 
-.emotion-20 {
+.emotion-21 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -394,28 +414,28 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-20 {
+  .emotion-21 {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-21 {
+.emotion-22 {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-22:last-child {
+.emotion-23:last-child {
   border: 0;
 }
 
-.emotion-23 {
+.emotion-24 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -430,26 +450,26 @@ exports[`Navigation should correctly render amp navigation 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-23 {
+  .emotion-24 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-24 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-23:hover {
+.emotion-24:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-23::before {
+.emotion-24::before {
   content: "";
   position: absolute;
   top: 0;
@@ -461,84 +481,69 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   opacity: 0;
 }
 
-.emotion-23:hover::before {
+.emotion-24:hover::before {
   opacity: 1;
 }
 
-.emotion-23:focus-visible {
+.emotion-24:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-24 {
+.emotion-25 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-25.si-nav-scrollable-hidden {
+  .emotion-26.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-25 {
+  .emotion-26 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-25::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-25:focus-visible {
-    outline: none;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
-  .emotion-25:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
-  }
-
-  .emotion-25::after {
+  .emotion-26::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-25::after {
+    .emotion-26::after {
       width: 6rem;
     }
   }
+}
 
-  .emotion-25[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-26::after {
+  background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
+}
+
+.emotion-26[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
 }
 
-.emotion-25 li {
+.emotion-26 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-25 li a {
+.emotion-26 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -554,7 +559,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   justify-content: center;
 }
 
-.emotion-25 li:before {
+.emotion-26 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -570,15 +575,15 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   opacity: 1;
 }
 
-.emotion-25 li:last-child:before {
+.emotion-26 li:last-child:before {
   display: none;
 }
 
-.emotion-27 {
+.emotion-29 {
   position: relative;
 }
 
-.emotion-27::after {
+.emotion-29::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -618,48 +623,52 @@ exports[`Navigation should correctly render amp navigation 1`] = `
               data-e2e="scrollable-nav"
               dir="ltr"
             >
-              <ul
+              <div
                 class="emotion-7"
-                role="list"
               >
-                <li
+                <ul
                   class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
+                  role="list"
                 >
-                  <a
-                    aria-label="Home"
-                    class="focusIndicatorRemove emotion-9"
-                    data-active="true"
-                    href="/news"
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    <span
-                      class="emotion-10"
-                      id="NavigationLinks-Home"
-                      role="text"
+                    <a
+                      aria-label="Home"
+                      class="focusIndicatorRemove emotion-10"
+                      data-active="true"
+                      href="/news"
                     >
                       <span
                         class="emotion-11"
+                        id="NavigationLinks-Home"
+                        role="text"
                       >
-                        Current page, 
+                        <span
+                          class="emotion-12"
+                        >
+                          Current page, 
+                        </span>
+                        Home
                       </span>
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li
-                  class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
-                >
-                  <a
-                    class="focusIndicatorRemove emotion-9"
-                    href="/about"
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    About
-                  </a>
-                </li>
-              </ul>
+                    <a
+                      class="focusIndicatorRemove emotion-10"
+                      href="/about"
+                    >
+                      About
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
             <amp-state
               id="menuState"
@@ -673,7 +682,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-14"
+              class="focusIndicatorRemove emotion-15"
               data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
               dir="ltr"
               on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
@@ -685,7 +694,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="emotion-15 emotion-16"
+                class="emotion-16 emotion-17"
                 data-amp-bind-hidden="menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -698,7 +707,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
               </svg>
               <svg
                 aria-hidden="true"
-                class="emotion-15 emotion-16"
+                class="emotion-16 emotion-17"
                 data-amp-bind-hidden="!menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -712,29 +721,29 @@ exports[`Navigation should correctly render amp navigation 1`] = `
                 />
               </svg>
               <span
-                class="emotion-11"
+                class="emotion-12"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-20"
+            class="emotion-21"
             data-e2e="dropdown-nav"
             hidden=""
             id="si-nav-dropdown-menu"
           >
             <ul
-              class="emotion-21"
+              class="emotion-22"
               role="list"
             >
               <li
-                class="emotion-22"
+                class="emotion-23"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-23"
+                  class="emotion-24"
                   href="/news"
                 >
                   <span
@@ -748,23 +757,27 @@ exports[`Navigation should correctly render amp navigation 1`] = `
           </div>
         </div>
         <div
-          class="emotion-24"
+          class="emotion-25"
         >
           <div
-            class="emotion-25"
+            class="emotion-26"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
             id="si-nav-scrollable"
           >
-            <ul
+            <div
               class="emotion-7"
-              role="list"
-            />
+            >
+              <ul
+                class="emotion-8"
+                role="list"
+              />
+            </div>
           </div>
         </div>
       </div>
       <div
-        class="emotion-27"
+        class="emotion-29"
       />
     </div>
   </nav>
@@ -871,28 +884,11 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-6::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-6:focus-visible {
-    outline: none;
-  }
-
-  .emotion-6:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
   .emotion-6::after {
@@ -900,12 +896,10 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
@@ -913,10 +907,14 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
       width: 6rem;
     }
   }
+}
 
-  .emotion-6[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-6::after {
+  background: linear-gradient(to right, transparent 0%, #B80000 100%);
+}
+
+.emotion-6[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #B80000 100%);
 }
 
 .emotion-6 li {
@@ -989,11 +987,43 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   display: none;
 }
 
-.emotion-6.emotion-6::after {
-  background: none;
+@media (max-width: 37.4375rem) {
+  .emotion-7 {
+    position: relative;
+    white-space: nowrap;
+    overflow-x: scroll;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-padding-end: 3rem;
+    padding-inline-end: 3rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  @media (min-width: 25rem) {
+    .emotion-7 {
+      -webkit-padding-end: 6rem;
+      padding-inline-end: 6rem;
+    }
+  }
+
+  .emotion-7::-webkit-scrollbar {
+    display: none;
+  }
+
+  .emotion-7:focus-visible {
+    outline: none;
+  }
+
+  .emotion-7:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    outline: 0.1875rem solid #000000;
+  }
 }
 
-.emotion-7 {
+.emotion-8 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -1001,12 +1031,12 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-8 {
     overflow: hidden;
   }
 }
 
-.emotion-8 {
+.emotion-9 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -1015,7 +1045,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8::after {
+  .emotion-9::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -1025,7 +1055,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   }
 }
 
-.emotion-9 {
+.emotion-10 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -1041,26 +1071,26 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-9:hover::after {
+.emotion-10:hover::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -1069,19 +1099,22 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-9:focus::after,
-.emotion-9:focus-visible::after {
+.emotion-10:focus::after,
+.emotion-10:focus-visible::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-12 {
+.emotion-13 {
   position: relative;
   padding: 0;
   margin: 0;
   border: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
@@ -1090,50 +1123,50 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12 {
+  .emotion-13 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-12 {
+  .emotion-13 {
     width: 2.75rem;
     height: 2.75rem;
   }
 }
 
-.emotion-12 svg {
+.emotion-13 svg {
   vertical-align: middle;
   fill: #FFFFFF;
 }
 
-.emotion-12:hover,
-.emotion-12:focus {
+.emotion-13:hover,
+.emotion-13:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-12:hover::after,
-.emotion-12:focus::after {
+.emotion-13:hover::after,
+.emotion-13:focus::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.25rem solid #000000;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-13 {
+  .emotion-14 {
     fill: linkText;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -1144,7 +1177,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   margin: 0;
 }
 
-.emotion-18 {
+.emotion-19 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -1156,28 +1189,28 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-18 {
+  .emotion-19 {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-19 {
+.emotion-20 {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.emotion-20 {
+.emotion-21 {
   padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-20:last-child {
+.emotion-21:last-child {
   border: 0;
 }
 
-.emotion-21 {
+.emotion-22 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -1192,26 +1225,26 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-21 {
+  .emotion-22 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-21 {
+  .emotion-22 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-21:hover {
+.emotion-22:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-21::before {
+.emotion-22::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1223,84 +1256,69 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   opacity: 0;
 }
 
-.emotion-21:hover::before {
+.emotion-22:hover::before {
   opacity: 1;
 }
 
-.emotion-21:focus-visible {
+.emotion-22:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-22 {
+.emotion-23 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-23.si-nav-scrollable-hidden {
+  .emotion-24.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-23 {
+  .emotion-24 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-23::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-23:focus-visible {
-    outline: none;
-  }
-
-  .emotion-23:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
-  .emotion-23::after {
+  .emotion-24::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-23::after {
+    .emotion-24::after {
       width: 6rem;
     }
   }
+}
 
-  .emotion-23[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-24::after {
+  background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
+}
+
+.emotion-24[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
 }
 
-.emotion-23 li {
+.emotion-24 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-23 li a {
+.emotion-24 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -1316,7 +1334,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   justify-content: center;
 }
 
-.emotion-23 li:before {
+.emotion-24 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -1332,15 +1350,15 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   opacity: 1;
 }
 
-.emotion-23 li:last-child:before {
+.emotion-24 li:last-child:before {
   display: none;
 }
 
-.emotion-25 {
+.emotion-27 {
   position: relative;
 }
 
-.emotion-25::after {
+.emotion-27::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -1380,35 +1398,39 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
               data-e2e="scrollable-nav"
               dir="ltr"
             >
-              <ul
+              <div
                 class="emotion-7"
-                role="list"
               >
-                <li
+                <ul
                   class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
+                  role="list"
                 >
-                  <a
-                    class="focusIndicatorRemove emotion-9"
-                    href="/news"
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    Home
-                  </a>
-                </li>
-                <li
-                  class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
-                >
-                  <a
-                    class="focusIndicatorRemove emotion-9"
-                    href="/about"
+                    <a
+                      class="focusIndicatorRemove emotion-10"
+                      href="/news"
+                    >
+                      Home
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    About
-                  </a>
-                </li>
-              </ul>
+                    <a
+                      class="focusIndicatorRemove emotion-10"
+                      href="/about"
+                    >
+                      About
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
             <amp-state
               id="menuState"
@@ -1422,7 +1444,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-12"
+              class="focusIndicatorRemove emotion-13"
               data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
               dir="ltr"
               on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
@@ -1434,7 +1456,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
             >
               <svg
                 aria-hidden="true"
-                class="emotion-13 emotion-14"
+                class="emotion-14 emotion-15"
                 data-amp-bind-hidden="menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -1447,7 +1469,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
               </svg>
               <svg
                 aria-hidden="true"
-                class="emotion-13 emotion-14"
+                class="emotion-14 emotion-15"
                 data-amp-bind-hidden="!menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -1461,29 +1483,29 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
                 />
               </svg>
               <span
-                class="emotion-17"
+                class="emotion-18"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-18"
+            class="emotion-19"
             data-e2e="dropdown-nav"
             hidden=""
             id="si-nav-dropdown-menu"
           >
             <ul
-              class="emotion-19"
+              class="emotion-20"
               role="list"
             >
               <li
-                class="emotion-20"
+                class="emotion-21"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-21"
+                  class="emotion-22"
                   href="/news"
                 >
                   <span
@@ -1497,23 +1519,27 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
           </div>
         </div>
         <div
-          class="emotion-22"
+          class="emotion-23"
         >
           <div
-            class="emotion-23"
+            class="emotion-24"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
             id="si-nav-scrollable"
           >
-            <ul
+            <div
               class="emotion-7"
-              role="list"
-            />
+            >
+              <ul
+                class="emotion-8"
+                role="list"
+              />
+            </div>
           </div>
         </div>
       </div>
       <div
-        class="emotion-25"
+        class="emotion-27"
       />
     </div>
   </nav>
@@ -1620,41 +1646,22 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
-  .emotion-6::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-6:focus-visible {
-    outline: none;
-  }
-
-  .emotion-6:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
-  }
-
-  .emotion-6::after {
-    content: ' ';
-    height: 100%;
-    width: 3rem;
-    position: absolute;
-    inset-inline-end: 0;
-    bottom: 0;
-    z-index: 3;
-    overflow: hidden;
-    pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
+  .emotion-6::after {
+    content: ' ';
+    height: 100%;
+    width: 3rem;
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    z-index: 3;
+    pointer-events: none;
   }
 
   @media (min-width: 25rem) {
@@ -1662,10 +1669,14 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
       width: 6rem;
     }
   }
+}
 
-  .emotion-6[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-6::after {
+  background: linear-gradient(to right, transparent 0%, #B80000 100%);
+}
+
+.emotion-6[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #B80000 100%);
 }
 
 .emotion-6 li {
@@ -1738,11 +1749,43 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   display: none;
 }
 
-.emotion-6.emotion-6::after {
-  background: none;
+@media (max-width: 37.4375rem) {
+  .emotion-7 {
+    position: relative;
+    white-space: nowrap;
+    overflow-x: scroll;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-padding-end: 3rem;
+    padding-inline-end: 3rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  @media (min-width: 25rem) {
+    .emotion-7 {
+      -webkit-padding-end: 6rem;
+      padding-inline-end: 6rem;
+    }
+  }
+
+  .emotion-7::-webkit-scrollbar {
+    display: none;
+  }
+
+  .emotion-7:focus-visible {
+    outline: none;
+  }
+
+  .emotion-7:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    outline: 0.1875rem solid #000000;
+  }
 }
 
-.emotion-7 {
+.emotion-8 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -1750,12 +1793,12 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-8 {
     overflow: hidden;
   }
 }
 
-.emotion-8 {
+.emotion-9 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -1764,7 +1807,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8::after {
+  .emotion-9::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -1774,7 +1817,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   }
 }
 
-.emotion-9 {
+.emotion-10 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -1790,26 +1833,26 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-9:hover::after {
+.emotion-10:hover::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -1818,15 +1861,15 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-9:focus::after,
-.emotion-9:focus-visible::after {
+.emotion-10:focus::after,
+.emotion-10:focus-visible::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-12::after {
+.emotion-13::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -1835,7 +1878,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -1846,11 +1889,14 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-15 {
   position: relative;
   padding: 0;
   margin: 0;
   border: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
@@ -1859,50 +1905,50 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-15 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-14 {
+  .emotion-15 {
     width: 2.75rem;
     height: 2.75rem;
   }
 }
 
-.emotion-14 svg {
+.emotion-15 svg {
   vertical-align: middle;
   fill: #FFFFFF;
 }
 
-.emotion-14:hover,
-.emotion-14:focus {
+.emotion-15:hover,
+.emotion-15:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-14:hover::after,
-.emotion-14:focus::after {
+.emotion-15:hover::after,
+.emotion-15:focus::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.25rem solid #000000;
 }
 
-.emotion-15 {
+.emotion-16 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-15 {
+  .emotion-16 {
     fill: linkText;
   }
 }
 
-.emotion-20 {
+.emotion-21 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -1914,28 +1960,28 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-20 {
+  .emotion-21 {
     display: none;
     visibility: hidden;
   }
 }
 
-.emotion-21 {
+.emotion-22 {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-22:last-child {
+.emotion-23:last-child {
   border: 0;
 }
 
-.emotion-23 {
+.emotion-24 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -1950,26 +1996,26 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-23 {
+  .emotion-24 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-24 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-23:hover {
+.emotion-24:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-23::before {
+.emotion-24::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1981,84 +2027,69 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   opacity: 0;
 }
 
-.emotion-23:hover::before {
+.emotion-24:hover::before {
   opacity: 1;
 }
 
-.emotion-23:focus-visible {
+.emotion-24:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-24 {
+.emotion-25 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-25.si-nav-scrollable-hidden {
+  .emotion-26.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-25 {
+  .emotion-26 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-25::-webkit-scrollbar {
-    display: none;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
-  .emotion-25:focus-visible {
-    outline: none;
-  }
-
-  .emotion-25:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
-  }
-
-  .emotion-25::after {
+  .emotion-26::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-25::after {
+    .emotion-26::after {
       width: 6rem;
     }
   }
+}
 
-  .emotion-25[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-26::after {
+  background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
+}
+
+.emotion-26[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
 }
 
-.emotion-25 li {
+.emotion-26 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-25 li a {
+.emotion-26 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -2074,7 +2105,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   justify-content: center;
 }
 
-.emotion-25 li:before {
+.emotion-26 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -2090,15 +2121,15 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   opacity: 1;
 }
 
-.emotion-25 li:last-child:before {
+.emotion-26 li:last-child:before {
   display: none;
 }
 
-.emotion-27 {
+.emotion-29 {
   position: relative;
 }
 
-.emotion-27::after {
+.emotion-29::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -2138,48 +2169,52 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
               data-e2e="scrollable-nav"
               dir="ltr"
             >
-              <ul
+              <div
                 class="emotion-7"
-                role="list"
               >
-                <li
+                <ul
                   class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
+                  role="list"
                 >
-                  <a
-                    class="focusIndicatorRemove emotion-9"
-                    href="/news"
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    Home
-                  </a>
-                </li>
-                <li
-                  class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
-                >
-                  <a
-                    aria-label="About"
-                    class="focusIndicatorRemove emotion-9"
-                    data-active="true"
-                    href="/about"
+                    <a
+                      class="focusIndicatorRemove emotion-10"
+                      href="/news"
+                    >
+                      Home
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    <span
-                      class="emotion-12"
-                      id="NavigationLinks-About"
-                      role="text"
+                    <a
+                      aria-label="About"
+                      class="focusIndicatorRemove emotion-10"
+                      data-active="true"
+                      href="/about"
                     >
                       <span
                         class="emotion-13"
+                        id="NavigationLinks-About"
+                        role="text"
                       >
-                        Current page, 
+                        <span
+                          class="emotion-14"
+                        >
+                          Current page, 
+                        </span>
+                        About
                       </span>
-                      About
-                    </span>
-                  </a>
-                </li>
-              </ul>
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
             <amp-state
               id="menuState"
@@ -2193,7 +2228,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-14"
+              class="focusIndicatorRemove emotion-15"
               data-amp-bind-aria-expanded="menuState.expanded ? "true" : "false""
               dir="ltr"
               on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),
@@ -2205,7 +2240,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
             >
               <svg
                 aria-hidden="true"
-                class="emotion-15 emotion-16"
+                class="emotion-16 emotion-17"
                 data-amp-bind-hidden="menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -2218,7 +2253,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
               </svg>
               <svg
                 aria-hidden="true"
-                class="emotion-15 emotion-16"
+                class="emotion-16 emotion-17"
                 data-amp-bind-hidden="!menuState.expanded"
                 focusable="false"
                 height="2.75rem"
@@ -2232,29 +2267,29 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
                 />
               </svg>
               <span
-                class="emotion-13"
+                class="emotion-14"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-20"
+            class="emotion-21"
             data-e2e="dropdown-nav"
             hidden=""
             id="si-nav-dropdown-menu"
           >
             <ul
-              class="emotion-21"
+              class="emotion-22"
               role="list"
             >
               <li
-                class="emotion-22"
+                class="emotion-23"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-23"
+                  class="emotion-24"
                   href="/news"
                 >
                   <span
@@ -2268,23 +2303,27 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
           </div>
         </div>
         <div
-          class="emotion-24"
+          class="emotion-25"
         >
           <div
-            class="emotion-25"
+            class="emotion-26"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
             id="si-nav-scrollable"
           >
-            <ul
+            <div
               class="emotion-7"
-              role="list"
-            />
+            >
+              <ul
+                class="emotion-8"
+                role="list"
+              />
+            </div>
           </div>
         </div>
       </div>
       <div
-        class="emotion-27"
+        class="emotion-29"
       />
     </div>
   </nav>
@@ -2385,28 +2424,11 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-6::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-6:focus-visible {
-    outline: none;
-  }
-
-  .emotion-6:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
   .emotion-6::after {
@@ -2414,12 +2436,10 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
@@ -2427,10 +2447,14 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
       width: 6rem;
     }
   }
+}
 
-  .emotion-6[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-6::after {
+  background: linear-gradient(to right, transparent 0%, #B80000 100%);
+}
+
+.emotion-6[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #B80000 100%);
 }
 
 .emotion-6 li {
@@ -2503,11 +2527,43 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   display: none;
 }
 
-.emotion-6.emotion-6::after {
-  background: none;
+@media (max-width: 37.4375rem) {
+  .emotion-7 {
+    position: relative;
+    white-space: nowrap;
+    overflow-x: scroll;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-padding-end: 3rem;
+    padding-inline-end: 3rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  @media (min-width: 25rem) {
+    .emotion-7 {
+      -webkit-padding-end: 6rem;
+      padding-inline-end: 6rem;
+    }
+  }
+
+  .emotion-7::-webkit-scrollbar {
+    display: none;
+  }
+
+  .emotion-7:focus-visible {
+    outline: none;
+  }
+
+  .emotion-7:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    outline: 0.1875rem solid #000000;
+  }
 }
 
-.emotion-7 {
+.emotion-8 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -2515,12 +2571,12 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-8 {
     overflow: hidden;
   }
 }
 
-.emotion-8 {
+.emotion-9 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -2529,7 +2585,7 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8::after {
+  .emotion-9::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -2539,7 +2595,7 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   }
 }
 
-.emotion-9 {
+.emotion-10 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -2555,26 +2611,26 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-9:hover::after {
+.emotion-10:hover::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -2583,15 +2639,15 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-9:focus::after,
-.emotion-9:focus-visible::after {
+.emotion-10:focus::after,
+.emotion-10:focus-visible::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-10::after {
+.emotion-11::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -2600,7 +2656,7 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-11 {
+.emotion-12 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -2611,11 +2667,14 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-15 {
   position: relative;
   padding: 0;
   margin: 0;
   border: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
@@ -2624,50 +2683,50 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-15 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-14 {
+  .emotion-15 {
     width: 2.75rem;
     height: 2.75rem;
   }
 }
 
-.emotion-14 svg {
+.emotion-15 svg {
   vertical-align: middle;
   fill: #FFFFFF;
 }
 
-.emotion-14:hover,
-.emotion-14:focus {
+.emotion-15:hover,
+.emotion-15:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-14:hover::after,
-.emotion-14:focus::after {
+.emotion-15:hover::after,
+.emotion-15:focus::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.25rem solid #000000;
 }
 
-.emotion-15 {
+.emotion-16 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-15 {
+  .emotion-16 {
     fill: linkText;
   }
 }
 
-.emotion-18 {
+.emotion-19 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -2685,35 +2744,35 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-18 {
+  .emotion-19 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-18 {
+  .emotion-19 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-19 {
+.emotion-20 {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.emotion-20 {
+.emotion-21 {
   padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-20:last-child {
+.emotion-21:last-child {
   border: 0;
 }
 
-.emotion-21 {
+.emotion-22 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -2728,26 +2787,26 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-21 {
+  .emotion-22 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-21 {
+  .emotion-22 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-21:hover {
+.emotion-22:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-21::before {
+.emotion-22::before {
   content: "";
   position: absolute;
   top: 0;
@@ -2759,84 +2818,69 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   opacity: 0;
 }
 
-.emotion-21:hover::before {
+.emotion-22:hover::before {
   opacity: 1;
 }
 
-.emotion-21:focus-visible {
+.emotion-22:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-22 {
+.emotion-23 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-23.si-nav-scrollable-hidden {
+  .emotion-24.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-23 {
+  .emotion-24 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-23::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-23:focus-visible {
-    outline: none;
-  }
-
-  .emotion-23:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
-  .emotion-23::after {
+  .emotion-24::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-23::after {
+    .emotion-24::after {
       width: 6rem;
     }
   }
+}
 
-  .emotion-23[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-24::after {
+  background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
+}
+
+.emotion-24[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
 }
 
-.emotion-23 li {
+.emotion-24 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-23 li a {
+.emotion-24 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -2852,7 +2896,7 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   justify-content: center;
 }
 
-.emotion-23 li:before {
+.emotion-24 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -2868,15 +2912,15 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   opacity: 1;
 }
 
-.emotion-23 li:last-child:before {
+.emotion-24 li:last-child:before {
   display: none;
 }
 
-.emotion-25 {
+.emotion-27 {
   position: relative;
 }
 
-.emotion-25::after {
+.emotion-27::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -2915,59 +2959,63 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
               data-e2e="scrollable-nav"
               dir="ltr"
             >
-              <ul
+              <div
                 class="emotion-7"
-                role="list"
               >
-                <li
+                <ul
                   class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
+                  role="list"
                 >
-                  <a
-                    aria-label="Home"
-                    class="focusIndicatorRemove emotion-9"
-                    data-active="true"
-                    href="/news"
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    <span
-                      class="emotion-10"
-                      id="NavigationLinks-Home"
-                      role="text"
+                    <a
+                      aria-label="Home"
+                      class="focusIndicatorRemove emotion-10"
+                      data-active="true"
+                      href="/news"
                     >
                       <span
                         class="emotion-11"
+                        id="NavigationLinks-Home"
+                        role="text"
                       >
-                        Current page, 
+                        <span
+                          class="emotion-12"
+                        >
+                          Current page, 
+                        </span>
+                        Home
                       </span>
-                      Home
-                    </span>
-                  </a>
-                </li>
-                <li
-                  class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
-                >
-                  <a
-                    class="focusIndicatorRemove emotion-9"
-                    href="/about"
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    About
-                  </a>
-                </li>
-              </ul>
+                    <a
+                      class="focusIndicatorRemove emotion-10"
+                      href="/about"
+                    >
+                      About
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-14"
+              class="focusIndicatorRemove emotion-15"
               dir="ltr"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-15 emotion-16"
+                class="emotion-16 emotion-17"
                 focusable="false"
                 height="2.75rem"
                 viewBox="0 0 44 44"
@@ -2978,28 +3026,28 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
                 />
               </svg>
               <span
-                class="emotion-11"
+                class="emotion-12"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-18"
+            class="emotion-19"
             data-e2e="dropdown-nav"
             style="height: 0px;"
           >
             <ul
-              class="emotion-19"
+              class="emotion-20"
               role="list"
             >
               <li
-                class="emotion-20"
+                class="emotion-21"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-21"
+                  class="emotion-22"
                   href="/news"
                 >
                   <span
@@ -3013,22 +3061,26 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
           </div>
         </div>
         <div
-          class="emotion-22"
+          class="emotion-23"
         >
           <div
-            class="emotion-23"
+            class="emotion-24"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
           >
-            <ul
+            <div
               class="emotion-7"
-              role="list"
-            />
+            >
+              <ul
+                class="emotion-8"
+                role="list"
+              />
+            </div>
           </div>
         </div>
       </div>
       <div
-        class="emotion-25"
+        class="emotion-27"
       />
     </div>
   </nav>
@@ -3129,28 +3181,11 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-6::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-6:focus-visible {
-    outline: none;
-  }
-
-  .emotion-6:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
   .emotion-6::after {
@@ -3158,12 +3193,10 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
@@ -3171,10 +3204,14 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
       width: 6rem;
     }
   }
+}
 
-  .emotion-6[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-6::after {
+  background: linear-gradient(to right, transparent 0%, #B80000 100%);
+}
+
+.emotion-6[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #B80000 100%);
 }
 
 .emotion-6 li {
@@ -3247,11 +3284,43 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   display: none;
 }
 
-.emotion-6.emotion-6::after {
-  background: none;
+@media (max-width: 37.4375rem) {
+  .emotion-7 {
+    position: relative;
+    white-space: nowrap;
+    overflow-x: scroll;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-padding-end: 3rem;
+    padding-inline-end: 3rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  @media (min-width: 25rem) {
+    .emotion-7 {
+      -webkit-padding-end: 6rem;
+      padding-inline-end: 6rem;
+    }
+  }
+
+  .emotion-7::-webkit-scrollbar {
+    display: none;
+  }
+
+  .emotion-7:focus-visible {
+    outline: none;
+  }
+
+  .emotion-7:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    outline: 0.1875rem solid #000000;
+  }
 }
 
-.emotion-7 {
+.emotion-8 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -3259,12 +3328,12 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-8 {
     overflow: hidden;
   }
 }
 
-.emotion-8 {
+.emotion-9 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -3273,7 +3342,7 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8::after {
+  .emotion-9::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -3283,7 +3352,7 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   }
 }
 
-.emotion-9 {
+.emotion-10 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -3299,26 +3368,26 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-9:hover::after {
+.emotion-10:hover::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -3327,19 +3396,22 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-9:focus::after,
-.emotion-9:focus-visible::after {
+.emotion-10:focus::after,
+.emotion-10:focus-visible::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-12 {
+.emotion-13 {
   position: relative;
   padding: 0;
   margin: 0;
   border: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
@@ -3348,50 +3420,50 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12 {
+  .emotion-13 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-12 {
+  .emotion-13 {
     width: 2.75rem;
     height: 2.75rem;
   }
 }
 
-.emotion-12 svg {
+.emotion-13 svg {
   vertical-align: middle;
   fill: #FFFFFF;
 }
 
-.emotion-12:hover,
-.emotion-12:focus {
+.emotion-13:hover,
+.emotion-13:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-12:hover::after,
-.emotion-12:focus::after {
+.emotion-13:hover::after,
+.emotion-13:focus::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.25rem solid #000000;
 }
 
-.emotion-13 {
+.emotion-14 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-13 {
+  .emotion-14 {
     fill: linkText;
   }
 }
 
-.emotion-15 {
+.emotion-16 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -3402,7 +3474,7 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   margin: 0;
 }
 
-.emotion-16 {
+.emotion-17 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -3420,35 +3492,35 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-17 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-16 {
+  .emotion-17 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.emotion-18 {
+.emotion-19 {
   padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-18:last-child {
+.emotion-19:last-child {
   border: 0;
 }
 
-.emotion-19 {
+.emotion-20 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -3463,26 +3535,26 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-19 {
+  .emotion-20 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-19 {
+  .emotion-20 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-19:hover {
+.emotion-20:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-19::before {
+.emotion-20::before {
   content: "";
   position: absolute;
   top: 0;
@@ -3494,84 +3566,69 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   opacity: 0;
 }
 
-.emotion-19:hover::before {
+.emotion-20:hover::before {
   opacity: 1;
 }
 
-.emotion-19:focus-visible {
+.emotion-20:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-20 {
+.emotion-21 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-21.si-nav-scrollable-hidden {
+  .emotion-22.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-21 {
+  .emotion-22 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
-  .emotion-21::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-21:focus-visible {
-    outline: none;
-  }
-
-  .emotion-21:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
-  }
-
-  .emotion-21::after {
+  .emotion-22::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-21::after {
+    .emotion-22::after {
       width: 6rem;
     }
   }
+}
 
-  .emotion-21[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-22::after {
+  background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
 }
 
-.emotion-21 li {
+.emotion-22[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+}
+
+.emotion-22 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-21 li a {
+.emotion-22 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -3587,7 +3644,7 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   justify-content: center;
 }
 
-.emotion-21 li:before {
+.emotion-22 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -3603,15 +3660,15 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   opacity: 1;
 }
 
-.emotion-21 li:last-child:before {
+.emotion-22 li:last-child:before {
   display: none;
 }
 
-.emotion-23 {
+.emotion-25 {
   position: relative;
 }
 
-.emotion-23::after {
+.emotion-25::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -3650,46 +3707,50 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
               data-e2e="scrollable-nav"
               dir="ltr"
             >
-              <ul
+              <div
                 class="emotion-7"
-                role="list"
               >
-                <li
+                <ul
                   class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
+                  role="list"
                 >
-                  <a
-                    class="focusIndicatorRemove emotion-9"
-                    href="/news"
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    Home
-                  </a>
-                </li>
-                <li
-                  class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
-                >
-                  <a
-                    class="focusIndicatorRemove emotion-9"
-                    href="/about"
+                    <a
+                      class="focusIndicatorRemove emotion-10"
+                      href="/news"
+                    >
+                      Home
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    About
-                  </a>
-                </li>
-              </ul>
+                    <a
+                      class="focusIndicatorRemove emotion-10"
+                      href="/about"
+                    >
+                      About
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-12"
+              class="focusIndicatorRemove emotion-13"
               dir="ltr"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-13 emotion-14"
+                class="emotion-14 emotion-15"
                 focusable="false"
                 height="2.75rem"
                 viewBox="0 0 44 44"
@@ -3700,28 +3761,28 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
                 />
               </svg>
               <span
-                class="emotion-15"
+                class="emotion-16"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-16"
+            class="emotion-17"
             data-e2e="dropdown-nav"
             style="height: 0px;"
           >
             <ul
-              class="emotion-17"
+              class="emotion-18"
               role="list"
             >
               <li
-                class="emotion-18"
+                class="emotion-19"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-19"
+                  class="emotion-20"
                   href="/news"
                 >
                   <span
@@ -3735,22 +3796,26 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
           </div>
         </div>
         <div
-          class="emotion-20"
+          class="emotion-21"
         >
           <div
-            class="emotion-21"
+            class="emotion-22"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
           >
-            <ul
+            <div
               class="emotion-7"
-              role="list"
-            />
+            >
+              <ul
+                class="emotion-8"
+                role="list"
+              />
+            </div>
           </div>
         </div>
       </div>
       <div
-        class="emotion-23"
+        class="emotion-25"
       />
     </div>
   </nav>
@@ -3851,28 +3916,11 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 @media (max-width: 37.4375rem) {
   .emotion-6 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-6::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-6:focus-visible {
-    outline: none;
-  }
-
-  .emotion-6:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
   .emotion-6::after {
@@ -3880,12 +3928,10 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
@@ -3893,10 +3939,14 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
       width: 6rem;
     }
   }
+}
 
-  .emotion-6[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-6::after {
+  background: linear-gradient(to right, transparent 0%, #B80000 100%);
+}
+
+.emotion-6[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #B80000 100%);
 }
 
 .emotion-6 li {
@@ -3969,11 +4019,43 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   display: none;
 }
 
-.emotion-6.emotion-6::after {
-  background: none;
+@media (max-width: 37.4375rem) {
+  .emotion-7 {
+    position: relative;
+    white-space: nowrap;
+    overflow-x: scroll;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-padding-end: 3rem;
+    padding-inline-end: 3rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  @media (min-width: 25rem) {
+    .emotion-7 {
+      -webkit-padding-end: 6rem;
+      padding-inline-end: 6rem;
+    }
+  }
+
+  .emotion-7::-webkit-scrollbar {
+    display: none;
+  }
+
+  .emotion-7:focus-visible {
+    outline: none;
+  }
+
+  .emotion-7:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    outline: 0.1875rem solid #000000;
+  }
 }
 
-.emotion-7 {
+.emotion-8 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -3981,12 +4063,12 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-8 {
     overflow: hidden;
   }
 }
 
-.emotion-8 {
+.emotion-9 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -3995,7 +4077,7 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8::after {
+  .emotion-9::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -4005,7 +4087,7 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   }
 }
 
-.emotion-9 {
+.emotion-10 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -4021,26 +4103,26 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-9:hover::after {
+.emotion-10:hover::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -4049,15 +4131,15 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-9:focus::after,
-.emotion-9:focus-visible::after {
+.emotion-10:focus::after,
+.emotion-10:focus-visible::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.1875rem solid #000000;
 }
 
-.emotion-12::after {
+.emotion-13::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -4066,7 +4148,7 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -4077,11 +4159,14 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-15 {
   position: relative;
   padding: 0;
   margin: 0;
   border: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   float: inline-start;
   background-color: #B80000;
   color: #FFFFFF;
@@ -4090,50 +4175,50 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-15 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-14 {
+  .emotion-15 {
     width: 2.75rem;
     height: 2.75rem;
   }
 }
 
-.emotion-14 svg {
+.emotion-15 svg {
   vertical-align: middle;
   fill: #FFFFFF;
 }
 
-.emotion-14:hover,
-.emotion-14:focus {
+.emotion-15:hover,
+.emotion-15:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-14:hover::after,
-.emotion-14:focus::after {
+.emotion-15:hover::after,
+.emotion-15:focus::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 0.25rem solid #000000;
 }
 
-.emotion-15 {
+.emotion-16 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-15 {
+  .emotion-16 {
     fill: linkText;
   }
 }
 
-.emotion-18 {
+.emotion-19 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -4151,35 +4236,35 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-18 {
+  .emotion-19 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-18 {
+  .emotion-19 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-19 {
+.emotion-20 {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.emotion-20 {
+.emotion-21 {
   padding: 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-20:last-child {
+.emotion-21:last-child {
   border: 0;
 }
 
-.emotion-21 {
+.emotion-22 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -4194,26 +4279,26 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-21 {
+  .emotion-22 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-21 {
+  .emotion-22 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-21:hover {
+.emotion-22:hover {
   background-color: #E6E8EA;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-21::before {
+.emotion-22::before {
   content: "";
   position: absolute;
   top: 0;
@@ -4225,84 +4310,69 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   opacity: 0;
 }
 
-.emotion-21:hover::before {
+.emotion-22:hover::before {
   opacity: 1;
 }
 
-.emotion-21:focus-visible {
+.emotion-22:focus-visible {
   outline-offset: -0.1875rem;
 }
 
-.emotion-22 {
+.emotion-23 {
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-23.si-nav-scrollable-hidden {
+  .emotion-24.si-nav-scrollable-hidden {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-23 {
+  .emotion-24 {
     position: relative;
-    white-space: nowrap;
-    overflow-x: scroll;
-    scroll-behavior: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .emotion-23::-webkit-scrollbar {
-    display: none;
-  }
-
-  .emotion-23:focus-visible {
-    outline: none;
-  }
-
-  .emotion-23:focus-visible::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    outline: 0.1875rem solid #000000;
+    min-width: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 
-  .emotion-23::after {
+  .emotion-24::after {
     content: ' ';
     height: 100%;
     width: 3rem;
     position: absolute;
+    top: 0;
     inset-inline-end: 0;
-    bottom: 0;
     z-index: 3;
-    overflow: hidden;
     pointer-events: none;
-    background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
   }
 
   @media (min-width: 25rem) {
-    .emotion-23::after {
+    .emotion-24::after {
       width: 6rem;
     }
   }
+}
 
-  .emotion-23[dir="rtl"]::after {
-    background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
-  }
+.emotion-24::after {
+  background: linear-gradient(to right, transparent 0%, #FFFFFF 100%);
 }
 
-.emotion-23 li {
+.emotion-24[dir="rtl"]::after {
+  background: linear-gradient(to left, transparent 0%, #FFFFFF 100%);
+}
+
+.emotion-24 li {
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
-.emotion-23 li a {
+.emotion-24 li a {
   padding: 0 0.5rem;
   height: 2.75rem;
   display: -webkit-box;
@@ -4318,7 +4388,7 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   justify-content: center;
 }
 
-.emotion-23 li:before {
+.emotion-24 li:before {
   content: "";
   position: absolute;
   inset-inline-end: 0;
@@ -4334,15 +4404,15 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   opacity: 1;
 }
 
-.emotion-23 li:last-child:before {
+.emotion-24 li:last-child:before {
   display: none;
 }
 
-.emotion-25 {
+.emotion-27 {
   position: relative;
 }
 
-.emotion-25::after {
+.emotion-27::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -4381,59 +4451,63 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
               data-e2e="scrollable-nav"
               dir="ltr"
             >
-              <ul
+              <div
                 class="emotion-7"
-                role="list"
               >
-                <li
+                <ul
                   class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
+                  role="list"
                 >
-                  <a
-                    class="focusIndicatorRemove emotion-9"
-                    href="/news"
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    Home
-                  </a>
-                </li>
-                <li
-                  class="emotion-8"
-                  dir="ltr"
-                  role="listitem"
-                >
-                  <a
-                    aria-label="About"
-                    class="focusIndicatorRemove emotion-9"
-                    data-active="true"
-                    href="/about"
+                    <a
+                      class="focusIndicatorRemove emotion-10"
+                      href="/news"
+                    >
+                      Home
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-9"
+                    dir="ltr"
+                    role="listitem"
                   >
-                    <span
-                      class="emotion-12"
-                      id="NavigationLinks-About"
-                      role="text"
+                    <a
+                      aria-label="About"
+                      class="focusIndicatorRemove emotion-10"
+                      data-active="true"
+                      href="/about"
                     >
                       <span
                         class="emotion-13"
+                        id="NavigationLinks-About"
+                        role="text"
                       >
-                        Current page, 
+                        <span
+                          class="emotion-14"
+                        >
+                          Current page, 
+                        </span>
+                        About
                       </span>
-                      About
-                    </span>
-                  </a>
-                </li>
-              </ul>
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
             <button
               aria-expanded="false"
               aria-label="Sections"
-              class="focusIndicatorRemove emotion-14"
+              class="focusIndicatorRemove emotion-15"
               dir="ltr"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-15 emotion-16"
+                class="emotion-16 emotion-17"
                 focusable="false"
                 height="2.75rem"
                 viewBox="0 0 44 44"
@@ -4444,28 +4518,28 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
                 />
               </svg>
               <span
-                class="emotion-13"
+                class="emotion-14"
               >
                 Sections
               </span>
             </button>
           </div>
           <div
-            class="emotion-18"
+            class="emotion-19"
             data-e2e="dropdown-nav"
             style="height: 0px;"
           >
             <ul
-              class="emotion-19"
+              class="emotion-20"
               role="list"
             >
               <li
-                class="emotion-20"
+                class="emotion-21"
                 role="listitem"
               >
                 <a
                   aria-labelledby="dropdownNavigation-home"
-                  class="emotion-21"
+                  class="emotion-22"
                   href="/news"
                 >
                   <span
@@ -4479,22 +4553,26 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
           </div>
         </div>
         <div
-          class="emotion-22"
+          class="emotion-23"
         >
           <div
-            class="emotion-23"
+            class="emotion-24"
             data-e2e="scrollable-nav-secondary"
             dir="ltr"
           >
-            <ul
+            <div
               class="emotion-7"
-              role="list"
-            />
+            >
+              <ul
+                class="emotion-8"
+                role="list"
+              />
+            </div>
           </div>
         </div>
       </div>
       <div
-        class="emotion-25"
+        class="emotion-27"
       />
     </div>
   </nav>

From 7602428f0883f7decffe85a258ea34710909c906 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 13:51:45 +0000
Subject: [PATCH 11/14] Remove `className` props

---
 .../Navigation/DropdownNavigation/index.tsx     | 17 ++---------------
 .../Navigation/NavigationList/index.tsx         |  6 ++----
 .../Navigation/NavigationWrapper/index.tsx      |  3 ---
 .../Navigation/ScrollableNavigation/index.tsx   |  3 ---
 4 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/app/components/Navigation/DropdownNavigation/index.tsx b/src/app/components/Navigation/DropdownNavigation/index.tsx
index 23d20ca0a5c..13416d31bdf 100644
--- a/src/app/components/Navigation/DropdownNavigation/index.tsx
+++ b/src/app/components/Navigation/DropdownNavigation/index.tsx
@@ -7,13 +7,11 @@ import styles from './index.styles';
 
 type CanonicalDropdownProps = {
   isOpen: boolean;
-  className?: string;
 };
 
 export const CanonicalDropdown = ({
   isOpen,
   children,
-  className,
 }: PropsWithChildren<CanonicalDropdownProps>) => {
   const heightRef = useRef<HTMLDivElement>(null);
   return (
@@ -24,7 +22,6 @@ export const CanonicalDropdown = ({
       style={{
         height: `${isOpen && heightRef.current ? heightRef.current.scrollHeight : 0}px`,
       }}
-      className={className}
     >
       {children}
     </div>
@@ -33,23 +30,15 @@ export const CanonicalDropdown = ({
 
 type AmpDropdownProps = {
   id?: string;
-  className?: string;
   hidden?: boolean;
 };
 
 export const AmpDropdown = ({
   children,
   id,
-  className,
   hidden,
 }: PropsWithChildren<AmpDropdownProps>) => (
-  <div
-    css={styles.ampDropdown}
-    id={id}
-    className={className}
-    hidden={hidden}
-    data-e2e="dropdown-nav"
-  >
+  <div css={styles.ampDropdown} id={id} hidden={hidden} data-e2e="dropdown-nav">
     {children}
   </div>
 );
@@ -157,14 +146,12 @@ type AmpMenuButtonProps = {
   announcedText: string;
   onToggle: string;
   dir?: Direction;
-  className?: string;
 };
 
 export const AmpMenuButton = ({
   announcedText,
   onToggle,
   dir = 'ltr',
-  className,
 }: AmpMenuButtonProps) => (
   <>
     <AmpHead />
@@ -183,7 +170,7 @@ export const AmpMenuButton = ({
       data-amp-bind-aria-expanded='menuState.expanded ? "true" : "false"'
       on={`tap:${expandedHandler},${onToggle}`}
       dir={dir}
-      className={`focusIndicatorRemove${className ? ` ${className}` : ''}`}
+      className="focusIndicatorRemove"
     >
       {cloneElement(navigationIcons.hamburger, {
         'data-amp-bind-hidden': 'menuState.expanded',
diff --git a/src/app/components/Navigation/NavigationList/index.tsx b/src/app/components/Navigation/NavigationList/index.tsx
index 06420442636..6568d7cfa24 100644
--- a/src/app/components/Navigation/NavigationList/index.tsx
+++ b/src/app/components/Navigation/NavigationList/index.tsx
@@ -10,7 +10,6 @@ type NavigationListItemProps = {
   dir?: Direction;
   clickTracker?: Record<string, unknown> | null;
   viewTracker?: Record<string, unknown> | null;
-  className?: string;
 };
 
 type CurrentLinkProps = PropsWithChildren<{
@@ -52,7 +51,6 @@ export const NavigationListItem = ({
   active = false,
   dir = 'ltr',
   viewTracker = null,
-  className,
   ...anchorProps
 }: PropsWithChildren<NavigationListItemProps>) => (
   <li
@@ -68,7 +66,7 @@ export const NavigationListItem = ({
         // Temporary fix for a11y nested span bug in TalkBack: https://github.com/bbc/simorgh/issues/9652
         aria-labelledby={`NavigationLinks-${link}`}
         aria-current="page"
-        className={`focusIndicatorRemove${className ? ` ${className}` : ''}`}
+        className="focusIndicatorRemove"
         data-active="true"
         {...(clickTracker as object)}
         {...anchorProps}
@@ -81,7 +79,7 @@ export const NavigationListItem = ({
       <a
         css={styles.link}
         href={url}
-        className={`focusIndicatorRemove${className ? ` ${className}` : ''}`}
+        className="focusIndicatorRemove"
         aria-current={active ? 'page' : undefined}
         {...(clickTracker as object)}
         {...anchorProps}
diff --git a/src/app/components/Navigation/NavigationWrapper/index.tsx b/src/app/components/Navigation/NavigationWrapper/index.tsx
index c94b7bf74d7..b0c2d6a4fe3 100644
--- a/src/app/components/Navigation/NavigationWrapper/index.tsx
+++ b/src/app/components/Navigation/NavigationWrapper/index.tsx
@@ -6,7 +6,6 @@ type Props = {
   isOpen?: boolean;
   ampOpenClass?: string;
   id?: string;
-  className?: string;
 };
 
 const NavigationWrapper = ({
@@ -15,13 +14,11 @@ const NavigationWrapper = ({
   isOpen = false,
   ampOpenClass,
   id,
-  className,
 }: PropsWithChildren<Props>) => (
   <nav
     role="navigation"
     dir={dir}
     id={id}
-    className={className}
     css={[
       styles.nav,
       isOpen && styles.navOpen,
diff --git a/src/app/components/Navigation/ScrollableNavigation/index.tsx b/src/app/components/Navigation/ScrollableNavigation/index.tsx
index 5394d97bec7..fa1c2658238 100644
--- a/src/app/components/Navigation/ScrollableNavigation/index.tsx
+++ b/src/app/components/Navigation/ScrollableNavigation/index.tsx
@@ -6,7 +6,6 @@ type Props = {
   dir?: Direction;
   navPosition?: 'primary' | 'secondary';
   id?: string;
-  className?: string;
 };
 
 const ScrollableNavigation = ({
@@ -14,7 +13,6 @@ const ScrollableNavigation = ({
   dir = 'ltr',
   navPosition,
   id,
-  className,
 }: PropsWithChildren<Props>) => (
   <div
     css={[
@@ -25,7 +23,6 @@ const ScrollableNavigation = ({
     data-e2e={`scrollable-nav${navPosition === 'secondary' ? '-secondary' : ''}`}
     dir={dir}
     id={id}
-    className={className}
   >
     <div css={styles.scrollableNavInner}>{children}</div>
   </div>

From 1552697a328ca10a996d54f4d663a55231bf88d4 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 13:54:59 +0000
Subject: [PATCH 12/14] Update index.styles.ts

---
 .../Navigation/DropdownNavigation/index.styles.ts         | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Navigation/DropdownNavigation/index.styles.ts b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
index 14184234b04..0ee9586008e 100644
--- a/src/app/components/Navigation/DropdownNavigation/index.styles.ts
+++ b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
@@ -75,6 +75,9 @@ export default {
       '&:hover': {
         backgroundColor: palette.GREY_3,
         textDecoration: 'none',
+        '&::before': {
+          opacity: 1,
+        },
       },
       '&::before': {
         content: '""',
@@ -87,10 +90,9 @@ export default {
         display: 'block',
         opacity: 0,
       },
-      '&:hover::before': {
-        opacity: 1,
-      },
       '&:focus-visible': {
+        textDecoration: 'underline',
+        textDecorationColor: palette.POSTBOX,
         outlineOffset: `-${pixelsToRem(3)}rem`,
       },
     }),

From b93eb2a894f3f40b60a61180508ba25c05e1db7d Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 14:14:12 +0000
Subject: [PATCH 13/14] snapshots

---
 .../__snapshots__/index.test.tsx.snap         | 66 ++++++++++++-------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
index 991e716b8d4..98b182193bb 100644
--- a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
@@ -469,6 +469,10 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   text-decoration: none;
 }
 
+.emotion-24:hover::before {
+  opacity: 1;
+}
+
 .emotion-24::before {
   content: "";
   position: absolute;
@@ -481,11 +485,10 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   opacity: 0;
 }
 
-.emotion-24:hover::before {
-  opacity: 1;
-}
-
 .emotion-24:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-color: #B80000;
   outline-offset: -0.1875rem;
 }
 
@@ -1244,6 +1247,10 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   text-decoration: none;
 }
 
+.emotion-22:hover::before {
+  opacity: 1;
+}
+
 .emotion-22::before {
   content: "";
   position: absolute;
@@ -1256,11 +1263,10 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   opacity: 0;
 }
 
-.emotion-22:hover::before {
-  opacity: 1;
-}
-
 .emotion-22:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-color: #B80000;
   outline-offset: -0.1875rem;
 }
 
@@ -2015,6 +2021,10 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   text-decoration: none;
 }
 
+.emotion-24:hover::before {
+  opacity: 1;
+}
+
 .emotion-24::before {
   content: "";
   position: absolute;
@@ -2027,11 +2037,10 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   opacity: 0;
 }
 
-.emotion-24:hover::before {
-  opacity: 1;
-}
-
 .emotion-24:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-color: #B80000;
   outline-offset: -0.1875rem;
 }
 
@@ -2806,6 +2815,10 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   text-decoration: none;
 }
 
+.emotion-22:hover::before {
+  opacity: 1;
+}
+
 .emotion-22::before {
   content: "";
   position: absolute;
@@ -2818,11 +2831,10 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   opacity: 0;
 }
 
-.emotion-22:hover::before {
-  opacity: 1;
-}
-
 .emotion-22:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-color: #B80000;
   outline-offset: -0.1875rem;
 }
 
@@ -3554,6 +3566,10 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   text-decoration: none;
 }
 
+.emotion-20:hover::before {
+  opacity: 1;
+}
+
 .emotion-20::before {
   content: "";
   position: absolute;
@@ -3566,11 +3582,10 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   opacity: 0;
 }
 
-.emotion-20:hover::before {
-  opacity: 1;
-}
-
 .emotion-20:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-color: #B80000;
   outline-offset: -0.1875rem;
 }
 
@@ -4298,6 +4313,10 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   text-decoration: none;
 }
 
+.emotion-22:hover::before {
+  opacity: 1;
+}
+
 .emotion-22::before {
   content: "";
   position: absolute;
@@ -4310,11 +4329,10 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   opacity: 0;
 }
 
-.emotion-22:hover::before {
-  opacity: 1;
-}
-
 .emotion-22:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-color: #B80000;
   outline-offset: -0.1875rem;
 }
 

From 13a60d1d73ff1b637ee7b5ec195472e32916f228 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 24 Mar 2026 15:23:59 +0000
Subject: [PATCH 14/14] Remove hardcoded rem/px values

---
 .../Navigation/DropdownNavigation/index.styles.ts    |  2 +-
 .../Navigation/NavigationList/index.styles.ts        | 10 +++++-----
 .../Navigation/ScrollableNavigation/index.styles.ts  |  4 ++--
 .../Navigation/__snapshots__/index.test.tsx.snap     | 12 ++++++------
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/Navigation/DropdownNavigation/index.styles.ts b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
index 0ee9586008e..d3babf6542a 100644
--- a/src/app/components/Navigation/DropdownNavigation/index.styles.ts
+++ b/src/app/components/Navigation/DropdownNavigation/index.styles.ts
@@ -71,7 +71,7 @@ export default {
       textDecoration: 'none',
       display: 'block',
       position: 'relative',
-      padding: `0.75rem ${spacings.FULL}rem`,
+      padding: `${pixelsToRem(12)}rem ${spacings.FULL}rem`,
       '&:hover': {
         backgroundColor: palette.GREY_3,
         textDecoration: 'none',
diff --git a/src/app/components/Navigation/NavigationList/index.styles.ts b/src/app/components/Navigation/NavigationList/index.styles.ts
index 33e3ee28516..fac2f420788 100644
--- a/src/app/components/Navigation/NavigationList/index.styles.ts
+++ b/src/app/components/Navigation/NavigationList/index.styles.ts
@@ -25,8 +25,8 @@ export default {
         '&::after': {
           content: "''",
           position: 'absolute',
-          bottom: '-1px',
-          width: '63.5rem',
+          bottom: `-${pixelsToRem(1)}rem`,
+          width: `${pixelsToRem(1016)}rem`,
           borderBottom: `${pixelsToRem(1)}rem solid ${palette.GREY_3}`,
           zIndex: -1,
         },
@@ -35,7 +35,7 @@ export default {
 
   // Visual defaults for all services. The new-nav container's topRowItems/bottomRowItems
   // descendant styles (higher CSS specificity) override these for POSTBOX-background rows.
-  link: ({ palette, fontSizes, fontVariants, mq }: Theme) =>
+  link: ({ palette, fontSizes, fontVariants, mq, spacings }: Theme) =>
     css({
       ...fontSizes.pica,
       ...fontVariants.sansRegular,
@@ -43,10 +43,10 @@ export default {
       cursor: 'pointer',
       textDecoration: 'none',
       display: 'inline-block',
-      padding: '0.75rem 0.25rem',
+      padding: `${pixelsToRem(12)}rem ${spacings.HALF}rem`,
       outline: 'none',
       [mq.GROUP_2_MAX_WIDTH]: {
-        padding: `0.75rem ${pixelsToRem(8)}rem`,
+        padding: `${pixelsToRem(12)}rem ${spacings.FULL}rem`,
       },
       '&:hover::after': {
         content: "''",
diff --git a/src/app/components/Navigation/ScrollableNavigation/index.styles.ts b/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
index c81a1a70db5..22d7af0dbba 100644
--- a/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
+++ b/src/app/components/Navigation/ScrollableNavigation/index.styles.ts
@@ -30,7 +30,7 @@ export default {
           height: '100%',
           width: `${spacings.SEXTUPLE}rem`,
           [mq.GROUP_2_MIN_WIDTH]: {
-            width: '6rem',
+            width: `${pixelsToRem(96)}rem`,
           },
           position: 'absolute',
           top: 0,
@@ -55,7 +55,7 @@ export default {
         /* Pad the end so the last item can scroll fully clear of the gradient overlay */
         paddingInlineEnd: `${spacings.SEXTUPLE}rem`,
         [mq.GROUP_2_MIN_WIDTH]: {
-          paddingInlineEnd: '6rem',
+          paddingInlineEnd: `${pixelsToRem(96)}rem`,
         },
 
         /* Hide scrollbar */
diff --git a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
index 98b182193bb..9e884bb2b8f 100644
--- a/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Navigation/__snapshots__/index.test.tsx.snap
@@ -264,7 +264,7 @@ exports[`Navigation should correctly render amp navigation 1`] = `
   .emotion-9::after {
     content: '';
     position: absolute;
-    bottom: -1px;
+    bottom: -0.0625rem;
     width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
@@ -1051,7 +1051,7 @@ exports[`Navigation should correctly render amp navigation on a URL not associat
   .emotion-9::after {
     content: '';
     position: absolute;
-    bottom: -1px;
+    bottom: -0.0625rem;
     width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
@@ -1816,7 +1816,7 @@ exports[`Navigation should correctly render amp navigation on non-home navigatio
   .emotion-9::after {
     content: '';
     position: absolute;
-    bottom: -1px;
+    bottom: -0.0625rem;
     width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
@@ -2597,7 +2597,7 @@ exports[`Navigation should correctly render canonical navigation 1`] = `
   .emotion-9::after {
     content: '';
     position: absolute;
-    bottom: -1px;
+    bottom: -0.0625rem;
     width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
@@ -3357,7 +3357,7 @@ exports[`Navigation should correctly render canonical navigation on a URL not as
   .emotion-9::after {
     content: '';
     position: absolute;
-    bottom: -1px;
+    bottom: -0.0625rem;
     width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;
@@ -4095,7 +4095,7 @@ exports[`Navigation should correctly render canonical navigation on non-home nav
   .emotion-9::after {
     content: '';
     position: absolute;
-    bottom: -1px;
+    bottom: -0.0625rem;
     width: 63.5rem;
     border-bottom: 0.0625rem solid #E6E8EA;
     z-index: -1;