@royaloperahouse/harmonic 0.5.0 → 2.9.1-a

package/dist/harmonic.esm.js

@@ -1,4 +1,4 @@
-import React__default, { createElement, memo, useCallback, useRef, useEffect, useState, forwardRef, useMemo, useImperativeHandle, cloneElement, useLayoutEffect } from 'react';
+import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState, forwardRef, cloneElement, useLayoutEffect } from 'react';
 import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
 import moment from 'moment';
 import Modal from 'react-modal';
@@ -2962,7 +2962,7 @@ var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObj
 
 var _templateObject$7, _templateObject2$5, _templateObject3$1, _templateObject4;
 var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
-var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  ", "\n"])), function (_ref) {
+var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   if (active) {
     return "\n      & {\n        color: var(--color-primary-red);\n      }\n      && svg path {\n        fill: var(--color-primary-red);\n      } \n      ";
@@ -2970,12 +2970,12 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject
   return '';
 });
 var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
-  as: 'a'
+  as: 'button'
 })(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var IconWrapper = /*#__PURE__*/styled.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n\n  span > svg path {\n    fill: var(--color-primary-black);\n  }\n"])));
 
 /* eslint-disable no-useless-return */
-var ControlledDropdown = function ControlledDropdown(_ref) {
+var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var text = _ref.text,
     options = _ref.options,
     active = _ref.active,
@@ -2983,32 +2983,22 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     onOptionClick = _ref.onOptionClick,
     _onMouseEnter = _ref.onMouseEnter,
     _onMouseLeave = _ref.onMouseLeave,
+    _onFocusLeave = _ref.onFocusLeave,
     onReset = _ref.onReset,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
     className = _ref.className;
-  var ref = useRef();
-  var resetHandler = useCallback(function () {
+  ControlledDropdown.displayName = 'ControlledDropdown';
+  var internalRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return internalRef.current;
+  });
+  var resetHandler = function resetHandler() {
     return onReset == null ? void 0 : onReset();
-  }, []);
-  useEffect(function () {
-    if (window.innerWidth > breakpoints.sm) {
-      var mouseClickHandler = function mouseClickHandler(e) {
-        var _ref$current;
-        if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
-          return;
-        } else if (active) {
-          resetHandler();
-        }
-      };
-      document.addEventListener('click', mouseClickHandler);
-      return function () {
-        document.removeEventListener('click', mouseClickHandler);
-      };
-    }
-    // eslint-disable-next-line consistent-return
-    return;
-  }, [ref, resetHandler, active]);
+  };
+  var isDropdown = useMemo(function () {
+    return !!(options != null && options.length);
+  }, [options]);
   var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
     if (e.key === 'Enter') {
       onOptionClick == null || onOptionClick(link);
@@ -3028,13 +3018,15 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       _onBlur == null || _onBlur();
     }
   };
-  var isDropdown = !!(options != null && options.length);
   var wrapperEvents = {
     onMouseEnter: function onMouseEnter() {
       return _onMouseEnter == null ? void 0 : _onMouseEnter();
     },
     onMouseLeave: function onMouseLeave() {
       return _onMouseLeave == null ? void 0 : _onMouseLeave();
+    },
+    onFocusLeave: function onFocusLeave() {
+      return _onFocusLeave == null ? void 0 : _onFocusLeave();
     }
   };
   var headerEvents = {
@@ -3050,21 +3042,51 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     },
     onKeyDown: handleHeaderKeyDown
   };
+  useEffect(function () {
+    var mouseEvent = function mouseEvent(e) {
+      var _internalRef$current;
+      if (internalRef != null && (_internalRef$current = internalRef.current) != null && _internalRef$current.contains(e.target)) return;
+      if (active) resetHandler();
+    };
+    if (window.innerWidth > breakpoints.sm) {
+      document.addEventListener('click', mouseEvent);
+    }
+    return function () {
+      document.removeEventListener('click', mouseEvent);
+    };
+  }, [resetHandler, active]);
+  useEffect(function () {
+    var handleFocusOut = function handleFocusOut(e) {
+      if (internalRef.current && !internalRef.current.contains(e.relatedTarget)) {
+        _onFocusLeave == null || _onFocusLeave();
+      }
+    };
+    var node = internalRef.current;
+    if (node) node.addEventListener('focusout', handleFocusOut);
+    return function () {
+      return node == null ? void 0 : node.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [_onFocusLeave]);
   return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
-    ref: ref
+    ref: internalRef
   }, wrapperEvents, {
     className: className
   }), isDropdown ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
     active: active
   }, headerEvents, {
-    tabIndex: 0,
-    "data-testid": "span-container"
+    "data-testid": "span-container",
+    role: "menuitem",
+    "aria-controls": "dropdown-menu",
+    "aria-haspopup": "menu",
+    "aria-expanded": active
   }), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
     "data-testid": "dropdown-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
   }))), active && options ? (/*#__PURE__*/React__default.createElement(OptionsContainer, {
-    withOptionsInMobile: true
+    withOptionsInMobile: true,
+    role: "menu",
+    id: "dropdown-menu"
   }, options.map(function (optionItem, index) {
     return /*#__PURE__*/React__default.createElement(OptionItem, {
       key: "key-" + index + "-" + optionItem.option,
@@ -3078,15 +3100,17 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       onBlur: function onBlur() {
         return handleOptionBlur(index);
       },
-      href: optionItem.optionLink
+      href: optionItem.optionLink,
+      role: "menuitem"
     }, optionItem.option);
   }))) : null)) : (/*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
     active: active
   }, headerEvents, {
     "data-testid": "link-container",
+    role: "menuitem",
     tabIndex: 0
   }), text)));
-};
+});
 
 var _templateObject$8;
 var Grid = /*#__PURE__*/styled.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  grid-template-rows: max-content;\n  gap: var(--grid-column-gap);\n  margin: 0;\n"])));
@@ -3720,7 +3744,10 @@ var Sponsorship = function Sponsorship(_ref) {
 };
 
 var _templateObject$k, _templateObject2$c;
-var TabText = /*#__PURE__*/styled.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  text-decoration: none;\n  margin-left: 5px;\n  color: var(--color-primary-black);\n\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: calc(9ch + 1px);\n\n  ", "\n\n  @media ", " {\n    width: max-content;\n  }\n"])), function (props) {
+var TabText = /*#__PURE__*/styled.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  text-decoration: none;\n  margin-left: 5px;\n  color: var(--color-primary-black);\n  color: ", ";\n\n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  @media ", " {\n    width: max-content;\n  }\n"])), function (_ref) {
+  var color = _ref.color;
+  return color ? "var(--color-" + color + ")" : "var(--color-primary-black)";
+}, function (props) {
   if (props.withIcon === 'left') {
     return "margin-left: 5px;";
   }
@@ -3731,8 +3758,8 @@ var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObj
     return "\n      flex-direction: row-reverse;\n      svg {\n        margin-right: 6px;\n      }";
   }
   return "\n      svg {\n          margin-left: 6px;\n      }";
-}, function (_ref) {
-  var selected = _ref.selected;
+}, function (_ref2) {
+  var selected = _ref2.selected;
   if (selected) {
     return "\n        cursor: pointer;\n        && a {\n          color: var(--color-primary-red);\n        } \n        && svg path {\n          fill: var(--color-primary-red);\n        } \n      ";
   }
@@ -3755,13 +3782,17 @@ var Tab = function Tab(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     _ref$iconName = _ref.iconName,
     iconName = _ref$iconName === void 0 ? 'DropdownArrow' : _ref$iconName,
+    _ref$iconDirection = _ref.iconDirection,
+    iconDirection = _ref$iconDirection === void 0 ? 'down' : _ref$iconDirection,
     _ref$withIcon = _ref.withIcon,
     withIcon = _ref$withIcon === void 0 ? 'right' : _ref$withIcon,
     _ref$withTextInMobile = _ref.withTextInMobile,
     withTextInMobile = _ref$withTextInMobile === void 0 ? true : _ref$withTextInMobile,
     className = _ref.className,
     role = _ref.role,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
+    color = _ref.color;
   var clickHandler = function clickHandler() {
     if (onClick) {
       onClick(titleLink);
@@ -3791,31 +3822,35 @@ var Tab = function Tab(_ref) {
     tabIndex: 0,
     className: className
   }, /*#__PURE__*/React__default.createElement(TabText, {
+    id: tabLinkId,
+    color: color,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
+    direction: iconDirection,
     iconName: iconName,
     "aria-hidden": "true"
   }));
 };
 
 var _templateObject$l, _templateObject2$d;
-var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-family: var(--font-family-sans);\n  font-size: var(--harmonic-font-size-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation)\n  font-weight: var(--font-weight-navigation);\n  line-height: var(--line-height-navigation);\n  text-transform: var(--text-transform-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n  ", "\n\n  @media ", ", ", " {\n    &:hover {\n      color: var(--base-color-", ");\n      border-bottom: 1px solid var(--base-color-", ");\n\n      && svg path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), function (_ref) {
+var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n\n  && svg path {\n    fill: ", ";\n  }\n\n  @media ", ", ", " {\n    &:hover {\n      color: var(--color-", ");\n      border-bottom: 1px solid var(--color-", ");\n\n      && svg path {\n        fill: var(--color-", ");\n      }\n    }\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
 }, function (_ref2) {
   var selected = _ref2.selected,
     color = _ref2.color,
     hoverColor = _ref2.hoverColor;
-  return selected ? "var(--base-color-" + hoverColor + ")" : "var(--base-color-" + color + ")";
+  return selected ? "var(--color-" + hoverColor + ")" : "var(--color-" + color + ")";
 }, function (_ref3) {
   var selected = _ref3.selected,
     hoverColor = _ref3.hoverColor;
-  return selected ? "1px solid var(--base-color-" + hoverColor + ")" : '1px solid transparent';
+  return selected ? "1px solid var(--color-" + hoverColor + ")" : '1px solid transparent';
 }, function (_ref4) {
   var selected = _ref4.selected,
-    hoverColor = _ref4.hoverColor;
-  return selected ? "&& svg path {\n    fill: var(--base-color-" + hoverColor + ");\n  }" : '';
+    hoverColor = _ref4.hoverColor,
+    color = _ref4.color;
+  return selected ? "var(--color-" + hoverColor + ")" : "var(--color-" + color + ")";
 }, devices.desktop, devices.largeDesktop, function (_ref5) {
   var hoverColor = _ref5.hoverColor;
   return hoverColor;
@@ -3834,9 +3869,9 @@ var TabLink = function TabLink(_ref) {
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? Colors.DarkGrey : _ref$color,
+    color = _ref$color === void 0 ? ThemeColor['base-dark-grey'] : _ref$color,
     _ref$hoverColor = _ref.hoverColor,
-    hoverColor = _ref$hoverColor === void 0 ? Colors.Primary : _ref$hoverColor,
+    hoverColor = _ref$hoverColor === void 0 ? ThemeColor['primary-red'] : _ref$hoverColor,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
     color: color,
@@ -4320,9 +4355,8 @@ var Tickbox = function Tickbox(_ref) {
     role: "checkbox",
     "aria-checked": selected ? 'true' : 'false',
     "aria-labelledby": dataLabel
-  }, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
-    tag: "span"
+  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "medium"
   }, children), /*#__PURE__*/React__default.createElement(TickboxInput, {
     type: "checkbox",
     checked: selected,
@@ -5033,14 +5067,17 @@ var useMobile = function useMobile() {
   return mobile;
 };
 var useViewport = function useViewport() {
-  var _useState3 = useState({
-      width: typeof window !== 'undefined' ? window.innerWidth : 0,
-      isMobile: typeof window !== 'undefined' ? window.innerWidth < breakpoints.sm : false,
-      isTablet: typeof window !== 'undefined' ? window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md : false,
-      isDesktop: typeof window !== 'undefined' ? window.innerWidth >= breakpoints.md : false
+  var _useState3 = useState(false),
+    hydrated = _useState3[0],
+    setHydrated = _useState3[1];
+  var _useState4 = useState({
+      width: 0,
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false
     }),
-    viewport = _useState3[0],
-    setViewport = _useState3[1];
+    viewport = _useState4[0],
+    setViewport = _useState4[1];
   useEffect(function () {
     if (typeof window === 'undefined') return undefined;
     var handleResize = function handleResize() {
@@ -5051,12 +5088,16 @@ var useViewport = function useViewport() {
         isDesktop: window.innerWidth >= breakpoints.md
       });
     };
+    handleResize();
+    setHydrated(true);
     window.addEventListener('resize', handleResize);
     return function () {
       return window.removeEventListener('resize', handleResize);
     };
   }, []);
-  return viewport;
+  return _extends({}, viewport, {
+    hydrated: hydrated
+  });
 };
 
 var SocialLinks = function SocialLinks(_ref) {
@@ -5345,7 +5386,8 @@ var Dropdown = function Dropdown(_ref) {
     withIcon = _ref$withIcon === void 0 ? 'right' : _ref$withIcon,
     className = _ref.className,
     role = _ref.role,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId;
   var node = useRef();
   var _useState = useState(false),
     open = _useState[0],
@@ -5441,6 +5483,7 @@ var Dropdown = function Dropdown(_ref) {
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
+      tabLinkId: tabLinkId,
       title: title,
       titleLink: titleLink,
       selected: titleSelected,
@@ -5518,7 +5561,8 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className
+    className: className,
+    tabLinkId: "account-link"
   });
 };
 
@@ -5587,6 +5631,7 @@ var Tabs = function Tabs(_ref) {
   var _useState3 = useState(-1),
     hoverOverDropdown = _useState3[0],
     setHoverOverDropdown = _useState3[1];
+  var dropdownRefs = useRef([]);
   var onClickHandler = function onClickHandler(value) {
     setOpenMenu(value);
     if (onShowMenu) {
@@ -5626,23 +5671,25 @@ var Tabs = function Tabs(_ref) {
       setHoverOverDropdown(-1);
     }
   };
-  var _onFocus = function onFocus(i) {
-    return setActiveDropdown(i);
+  var onDropdownFocusLeave = function onDropdownFocusLeave() {
+    onResetActive();
   };
-  var _onBlur = function onBlur(i) {
-    var _items$length;
-    if (i === ((_items$length = items == null ? void 0 : items.length) != null ? _items$length : 0) - 1) {
+  var handleBlur = function handleBlur(index) {
+    var currentDropdown = dropdownRefs.current[index];
+    var active = document.activeElement;
+    if (currentDropdown && (!active || !currentDropdown.contains(active))) {
       onResetActive();
     }
   };
   return /*#__PURE__*/React__default.createElement(TabsContainer, {
+    role: "menubar",
     className: className
   }, /*#__PURE__*/React__default.createElement(ItemsContainer, {
     showMenu: showMenu
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(ControlledDropdown, {
       key: "key-" + item.title,
-      text: item.title,
+      text: item.title || '',
       options: item.options,
       onClick: function onClick() {
         return onDropdownClick(index, item.titleLink);
@@ -5654,14 +5701,17 @@ var Tabs = function Tabs(_ref) {
       onMouseLeave: function onMouseLeave() {
         return onDropdownMouseLeave();
       },
-      onFocus: function onFocus() {
-        return _onFocus(index);
+      onFocusLeave: function onFocusLeave() {
+        return onDropdownFocusLeave();
       },
       onBlur: function onBlur() {
-        return _onBlur(index);
+        return handleBlur(index);
       },
       onReset: onResetActive,
-      active: isActiveDropdown(index)
+      active: isActiveDropdown(index),
+      ref: function ref(el) {
+        dropdownRefs.current[index] = el;
+      }
     });
   })), !showMenu && (/*#__PURE__*/React__default.createElement(MenuContainer$1, null, openMenu ? (/*#__PURE__*/React__default.createElement("a", {
     "data-testid": "mobile-menu-close",
@@ -8837,102 +8887,104 @@ var Information = function Information(_ref) {
   })))));
 };
 
-var _templateObject$_, _templateObject2$L, _templateObject3$y, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$c, _templateObject8$8;
-var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  // remove spacing above/below for all semantic levels of the title\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.colors.primary;
-}, function (_ref2) {
-  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
+var _templateObject$_, _templateObject2$L, _templateObject3$y, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$c, _templateObject8$8, _templateObject9$5;
+var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: var(--page-header-bg-color);\n  color: var(--color-base-white);\n\n  ", ";\n\n  h1,\n  h2,\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    padding-bottom: 42px;\n  ";
 }, devices.mobile);
 var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
-var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
+var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 35px;\n  padding-bottom: 20px;\n\n  ", ";\n"])), function (_ref2) {
+  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    height: 50px;\n    padding-bottom: 0;\n    margin: 10px 0;\n  ";
+});
+var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
   var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin-top: 42px;\n  ";
 }, devices.mobile);
-var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
+var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-text);\n"])));
+var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
   var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
 }, devices.mobile);
-var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
-var LogoWrapper = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
-var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
-var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-family: var(--font-family-altHeader);\n  text-transform: var(--text-transform-altHeader);\n  word-break: var(--word-break-altHeader);\n"])));
+var TextWrapper = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-white);\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
+var LogoWrapper = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  ", ";\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n\n      ", ";\n    }\n  }\n"])), function (_ref5) {
+  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin-top: 40px;\n  ";
+}, devices.mobile, function (_ref6) {
+  var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin-top: 15px;\n   ";
+});
+var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
 
-var _excluded$k = ["text"];
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
+    hierarchy = _ref.hierarchy,
     text = _ref.text,
     link = _ref.link,
     _ref$sponsor = _ref.sponsor,
     sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
     children = _ref.children,
-    _ref$semanticLevel = _ref.semanticLevel,
-    semanticLevel = _ref$semanticLevel === void 0 ? 1 : _ref$semanticLevel,
     _ref$copyCharLimit = _ref.copyCharLimit,
     copyCharLimit = _ref$copyCharLimit === void 0 ? 250 : _ref$copyCharLimit,
     _ref$titleCharLimit = _ref.titleCharLimit,
-    titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
-  var _ref2 = link || {},
-    linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
+    titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit,
+    className = _ref.className,
+    showBadge = _ref.showBadge,
+    theme = _ref.theme;
+  var themedLink = link && _extends({}, link, {
+    textColor: ThemeColor['base-black'],
+    backgroundColor: ThemeColor['base-white'],
+    hoveredColor: ThemeColor['white-hovered'],
+    pressedColor: ThemeColor['white-pressed']
+  });
+  var linkText = themedLink == null ? void 0 : themedLink.text;
   var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
   var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
   var isTitleUnAvailable = !title;
+  var renderBadge = function renderBadge(currentTheme) {
+    if (!showBadge) return null;
+    switch (currentTheme) {
+      case ThemeType.Cinema:
+        return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
+          isPageHeadingWithoutTitle: isTitleUnAvailable
+        }, /*#__PURE__*/React__default.createElement(CinemaBadge, {
+          align: "left"
+        }));
+      case ThemeType.Stream:
+        return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
+          isPageHeadingWithoutTitle: isTitleUnAvailable
+        }, /*#__PURE__*/React__default.createElement(StreamBadge, {
+          align: "left"
+        }));
+      default:
+        return null;
+    }
+  };
   return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
+    className: className,
     "data-testid": "page-heading-wrapper",
     isPageHeadingWithoutTitle: isTitleUnAvailable
   }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
     "data-testid": "page-heading-title",
     isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
+  }, renderBadge(theme), children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
     isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, children)) : null, !isTitleUnAvailable && (/*#__PURE__*/React__default.createElement(Header, {
-    level: 2,
-    semanticLevel: semanticLevel
+  }, children)) : null, !isTitleUnAvailable && (/*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
+    size: "large",
+    hierarchy: hierarchy
   }, truncatedTitle))), text ? (/*#__PURE__*/React__default.createElement(TextWrapper, {
     "data-testid": "page-heading-text"
-  }, /*#__PURE__*/React__default.createElement(PageHeadingText, {
+  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    color: "white",
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
   }))) : null, sponsor ? (/*#__PURE__*/React__default.createElement(LogoWrapper, {
-    "data-testid": "page-heading-sponsor"
-  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))) : null, link ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
+    "data-testid": "page-heading-sponsor",
+    isPageHeadingWithoutTitle: isTitleUnAvailable
+  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))) : null, themedLink ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
     "data-testid": "page-heading-link"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
-};
-
-var _excluded$l = ["link"];
-var PageHeadingCore = function PageHeadingCore(_ref) {
-  var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  var coreLink = link && _extends({}, link, {
-    color: ThemeColor['base-white'],
-    bgColor: ThemeColor['base-black']
-  });
-  return /*#__PURE__*/React__default.createElement(Theme, {
-    theme: ThemeType.Core
-  }, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
-    link: coreLink
-  })));
-};
-
-var _excluded$m = ["link"];
-var PageHeadingCinema = function PageHeadingCinema(_ref) {
-  var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
-  var cinemaLink = link && _extends({}, link, {
-    color: ThemeColor['base-black'],
-    bgColor: ThemeColor['base-white']
-  });
-  return /*#__PURE__*/React__default.createElement(Theme, {
-    theme: ThemeType.Cinema
-  }, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
-    link: cinemaLink
-  }), /*#__PURE__*/React__default.createElement(CinemaBadge, {
-    align: "left"
-  })));
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
 };
 
 var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$u, _templateObject5$n, _templateObject6$i, _templateObject7$d, _templateObject8$9;
@@ -8945,7 +8997,7 @@ var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObje
 var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
-var _excluded$n = ["text"];
+var _excluded$k = ["text"];
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -8963,7 +9015,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var truncatedText = text == null ? void 0 : text.substring(0, 75);
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
     bgUrlDevice: bgUrlDevice,
@@ -9001,8 +9053,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
     iconName: "Arrow",
     iconDirection: "down",
     href: scrollHref,
-    color: Colors.White,
-    hoverColor: Colors.White
+    color: ThemeColor['base-white'],
+    hoverColor: ThemeColor['base-white']
   }, "Scroll Down"))) : null);
 };
 
@@ -9040,8 +9092,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
     iconName: "Arrow",
     iconDirection: "down",
     href: scrollTo,
-    color: color === Colors.White ? Colors.Black : Colors.White,
-    hoverColor: color === Colors.White ? Colors.Black : Colors.White
+    color: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white'],
+    hoverColor: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white']
   }, "Scroll Down")))), hasImage && (/*#__PURE__*/React__default.createElement(RightPanel, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
@@ -9050,28 +9102,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   })))));
 };
 
-var _templateObject$11;
-var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
-
-var _excluded$o = ["link"];
-var PageHeadingStream = function PageHeadingStream(_ref) {
-  var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$o);
-  var streamLink = link && _extends({}, link, {
-    color: ThemeColor['base-black'],
-    bgColor: ThemeColor['base-white']
-  });
-  return /*#__PURE__*/React__default.createElement(Theme, {
-    theme: ThemeType.Stream
-  }, /*#__PURE__*/React__default.createElement(StreamWrapper, null, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
-    link: streamLink
-  }), /*#__PURE__*/React__default.createElement(StreamBadge, {
-    align: "left"
-  }))));
-};
-
-var _templateObject$12, _templateObject2$O, _templateObject3$B, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
-var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var _templateObject$11, _templateObject2$O, _templateObject3$B, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$6, _templateObject0$5, _templateObject1$3;
+var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  picture,\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"])));
 var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
 var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: var(--grid-outer-margin);\n  bottom: 20px;\n  z-index: 10;\n\n  @media ", " {\n    right: var(--grid-margin);\n    bottom: 10px;\n  }\n"])), devices.tablet);
@@ -9082,7 +9114,7 @@ var ContentSection = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObj
   var showBlock = _ref2.showBlock;
   return showBlock ? 'block' : 'none';
 }, devices.mobile);
-var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    height: 32px;\n  }\n\n  @media ", " {\n    margin-bottom: 12px;\n  }\n"])), devices.mobile);
+var BadgeWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    height: 32px;\n  }\n\n  @media ", " {\n    margin-bottom: 12px;\n  }\n"])), devices.mobile);
 var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  width: 200px;\n\n  @media ", " {\n    order: ", ";\n    width: 100%;\n    justify-content: center;\n  }\n"])), devices.mobile, function (_ref3) {
   var isBadgePresent = _ref3.isBadgePresent;
   return isBadgePresent ? '1' : '4';
@@ -9091,7 +9123,7 @@ var MainButtonWrapper = /*#__PURE__*/styled.div(_templateObject8$a || (_template
   var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
   return isAdditionalButtonPresent ? '20px' : '0';
 });
-var AdditionalButtonWrapper = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])), devices.mobile);
+var AdditionalButtonWrapper = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])), devices.mobile);
 var TitleWrapper$3 = /*#__PURE__*/styled.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 10px 0;\n\n  h1,\n  h2,\n  h3 {\n    color: ", ";\n  }\n\n  @media ", " {\n    padding: 0;\n    order: 2;\n    margin-bottom: ", ";\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme == ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
@@ -9114,7 +9146,7 @@ var Badge = function Badge(_ref) {
   if (!badge) return null;
   var color = theme === ThemeType.Cinema ? Colors.Black : Colors.White;
   var alignment = isMobile ? 'center' : 'left';
-  return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
+  return /*#__PURE__*/React__default.createElement(BadgeWrapper$2, {
     "data-testid": "promo-heading-badge"
   }, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
     fillColor: color,
@@ -9205,10 +9237,12 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
     additionalLink = _ref.additionalLink,
     image = _ref.image;
   var _useViewport = useViewport(),
-    isMobile = _useViewport.isMobile;
+    isMobile = _useViewport.isMobile,
+    hydrated = _useViewport.hydrated;
   var showImageButton = !title && !badge && !additionalLink && !isMobile;
   var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
   var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
+  if (!hydrated) return null;
   return /*#__PURE__*/React__default.createElement(Wrapper$5, {
     className: className
   }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
@@ -9282,8 +9316,8 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
   })))))))))));
 };
 
-var _templateObject$13, _templateObject2$P, _templateObject3$C, _templateObject5$q, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6;
-var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
+var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject5$q, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$7, _templateObject0$6;
+var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
 var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
 var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
@@ -9305,7 +9339,7 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$k || (
 }, devices.tablet, devices.mobile);
 var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
 var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
-var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
+var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
 var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject0$6 || (_templateObject0$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
   var invert = _ref5.invert,
     theme = _ref5.theme;
@@ -9395,7 +9429,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
-var _excluded$p = ["text"];
+var _excluded$l = ["text"];
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -9497,13 +9531,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     brandingText = _ref4.brandingText,
     brandingLink = _ref4.brandingLink,
     _ref4$showCopy = _ref4.showCopy,
-    showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy,
-    _ref4$semanticLevel = _ref4.semanticLevel,
-    semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
+    showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$p);
-  var titleSize = title && title.length > 20 ? 4 : 3;
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
+  // const titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
     desktop: videoUrlDesktop,
@@ -9529,17 +9561,17 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     brandingText: brandingText,
     brandingLink: brandingLink,
     invert: invert
-  }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
-    level: titleSize,
-    semanticLevel: semanticLevel
+  }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "large",
+    hierarchy: "h1"
   }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
     invert: invert,
     className: "page-heading-compact__button"
   }), linkText))))));
 };
 
-var _templateObject$14, _templateObject2$Q, _templateObject3$D, _templateObject4$x;
-var MorePages = /*#__PURE__*/styled.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
+var _templateObject$13, _templateObject2$Q, _templateObject3$D, _templateObject4$x;
+var MorePages = /*#__PURE__*/styled.span(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
 var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0);\n  }\n"])));
 // PageNumber extends bodyText but uses subtitle-1 font size
 var PageNumber = /*#__PURE__*/styled.a(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: inherit;\n  margin: 0;\n  border-bottom: 1px solid transparent;\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n  :hover {\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n  /* active state - string used because react returns error for bool */\n  ", "\n"])), function (_ref) {
@@ -9612,8 +9644,8 @@ var Pagination = function Pagination(_ref) {
   })))));
 };
 
-var _templateObject$15, _templateObject2$R, _templateObject3$E, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$g;
-var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
+var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$g;
+var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
 var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
 var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
 var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
@@ -9676,8 +9708,8 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$16, _templateObject2$S, _templateObject3$F, _templateObject4$z;
-var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$z;
+var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
   var columnCount = _ref.columnCount;
   return "repeat(" + columnCount + ", 1fr)";
@@ -9801,14 +9833,14 @@ var CreditListing = function CreditListing(_ref) {
   }, creditEntries);
 };
 
-var _templateObject$17, _templateObject2$T, _templateObject3$G, _templateObject4$A, _templateObject5$s, _templateObject6$m, _templateObject7$h, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$A, _templateObject5$s, _templateObject6$m, _templateObject7$h, _templateObject8$c, _templateObject9$8, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 12;
 var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
 var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
 var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
 var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
-var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
+var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
@@ -9851,7 +9883,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$s || (_te
 var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
 var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
 var TextLinkWrapper$3 = /*#__PURE__*/styled.div(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
-var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
+var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
 var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
 var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
@@ -9877,7 +9909,7 @@ var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject17 || (_temp
 var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
 var EndDateText = /*#__PURE__*/styled.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid var(--base-color-black);\n  padding-bottom: 32px;\n  margin-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 20px;\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
 
-var _excluded$q = ["text"],
+var _excluded$m = ["text"],
   _excluded2$4 = ["text"],
   _excluded3 = ["text"];
 var _buttonTypeToButton$2;
@@ -9940,7 +9972,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -10053,10 +10085,10 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$18, _templateObject2$U, _templateObject3$H, _templateObject4$B, _templateObject5$t, _templateObject6$n, _templateObject7$i;
+var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$B, _templateObject5$t, _templateObject6$n, _templateObject7$i;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
+var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
 }, devices.tablet, function (_ref2) {
@@ -10071,7 +10103,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$H ||
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 24px;\n  }\n"])), devices.mobile);
+var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 24px;\n  }\n"])), devices.mobile);
 var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
 var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  margin-bottom: 32px;\n  whiete-space: break-spaces;\n  overflow-wrap: break-word;\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
 var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
@@ -10096,8 +10128,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$i || (_templat
   return '';
 });
 
-var _templateObject$19;
-var VideoContainer = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$18;
+var VideoContainer = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -10209,7 +10241,7 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
 
-var _excluded$r = ["text"],
+var _excluded$n = ["text"],
   _excluded2$5 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -10234,7 +10266,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
@@ -10259,7 +10291,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   }, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft
-  }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper$1, {
     size: titleSize,
     hierarchy: titleHierarchy
   }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
@@ -10276,8 +10308,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
 };
 
-var _templateObject$1a;
-var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
+var _templateObject$19;
+var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -10332,8 +10364,8 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var _templateObject$1b, _templateObject2$V, _templateObject3$I;
-var Container$3 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var _templateObject$1a, _templateObject2$V, _templateObject3$I;
+var Container$3 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
   var horizontalMode = _ref.horizontalMode;
   if (horizontalMode) return 'row';
@@ -10419,8 +10451,8 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error))));
 };
 
-var _templateObject$1c, _templateObject2$W, _templateObject3$J;
-var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-light-grey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
+var _templateObject$1b, _templateObject2$W, _templateObject3$J;
+var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-light-grey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
 var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n"])));
 var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
 
@@ -10478,8 +10510,8 @@ var StatusBanner = function StatusBanner(_ref) {
   return null;
 };
 
-var _templateObject$1d;
-var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    font-size: var(--font-size-title-description);\n    line-height: var(--line-height-title-description);\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
+var _templateObject$1c;
+var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    font-size: var(--font-size-title-description);\n    line-height: var(--line-height-title-description);\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
 
 var SectionTitle = function SectionTitle(_ref) {
   var title = _ref.title,
@@ -10507,8 +10539,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
 
-var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
-var stateStyles = /*#__PURE__*/css(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
+var _templateObject$1d, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$9, _templateObject0$8, _templateObject1$5;
+var stateStyles = /*#__PURE__*/css(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return "3px solid " + theme.colors.lapisLazuli;
 }, function (_ref2) {
@@ -10535,7 +10567,7 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
 var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
 var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
 var Options = /*#__PURE__*/styled.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
-var Option = /*#__PURE__*/styled.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
+var Option = /*#__PURE__*/styled.li(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
   var theme = _ref6.theme,
     hover = _ref6.hover;
   var _theme$colors = theme.colors,
@@ -10888,8 +10920,8 @@ function Select(_ref3) {
   })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$D;
-var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$D;
+var Container$4 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-dark-grey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-dark-grey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-light-grey);\n      background: var(--base-color-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-dark-grey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-dark-grey);\n    background: var(--base-color-light-grey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-mid-grey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-size: var(--font-size-body-1);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
@@ -10918,7 +10950,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObjec
   return "var(--base-color-errorstate)";
 });
 
-var _excluded$s = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -10969,7 +11001,7 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -10987,7 +11019,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
 
-var _excluded$t = ["label", "error", "width", "darkMode", "components"];
+var _excluded$p = ["label", "error", "width", "darkMode", "components"];
 /**
  * The Select2Async component is similar to Select 2, but uses react-select async
  * component for select instead of regular react-select component. This can be used
@@ -11009,7 +11041,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     components = _ref.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -11026,8 +11058,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
 
-var _templateObject$1g, _templateObject2$Z;
-var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
+var _templateObject$1f, _templateObject2$Z;
+var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -11071,8 +11103,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   })), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };
 
-var _templateObject$1h, _templateObject2$_, _templateObject3$M;
-var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var _templateObject$1g, _templateObject2$_, _templateObject3$M;
+var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
 var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
@@ -11102,8 +11134,8 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$1i, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$v, _templateObject6$p;
-var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
+var _templateObject$1h, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$v, _templateObject6$p;
+var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
 var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var StyledImage = /*#__PURE__*/styled.img(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
 var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
@@ -11146,8 +11178,8 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1j, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$w;
-var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
+var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$w;
+var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
 var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
 var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
@@ -11238,8 +11270,8 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
 
-var _templateObject$1k, _templateObject2$11, _templateObject3$P, _templateObject4$G, _templateObject5$x;
-var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$G, _templateObject5$x;
+var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
 var MenuList = /*#__PURE__*/styled.ul(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), Colors.LightGrey);
 var MobileButton = /*#__PURE__*/styled.button(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
 var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), Colors.Black, function (_ref) {
@@ -11402,8 +11434,8 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1l, _templateObject2$12, _templateObject3$Q, _templateObject4$H, _templateObject5$y, _templateObject6$q;
-var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$H, _templateObject5$y, _templateObject6$q;
+var Container$5 = /*#__PURE__*/styled.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var Sections = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
@@ -11496,8 +11528,8 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1m, _templateObject2$13, _templateObject3$R, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
-var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$a, _templateObject0$9;
+var TableContainer = /*#__PURE__*/styled.table(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
 var Container$6 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var TableHeader = /*#__PURE__*/styled.th(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
@@ -11516,7 +11548,7 @@ var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$k || (_templateOb
   return active === 'true' && "\n      color: var(--base-color-core);\n      border-bottom: 1px solid var(--base-color-core);\n    ";
 });
 var Next = /*#__PURE__*/styled.span(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
-var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
+var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
 var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 /* eslint-disable react/no-danger */
@@ -11700,8 +11732,8 @@ var Table = function Table(_ref) {
   }))))))))));
 };
 
-var _templateObject$1n, _templateObject2$14, _templateObject3$S, _templateObject4$J, _templateObject5$A, _templateObject6$s, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
-var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
+var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$J, _templateObject5$A, _templateObject6$s, _templateObject7$l, _templateObject8$f, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
+var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return "var(--color-" + theme + ")";
 }, function (_ref2) {
@@ -11715,7 +11747,7 @@ var Form = /*#__PURE__*/styled.form(_templateObject5$A || (_templateObject5$A =
 var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 28px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
 var ServerError = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
 var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  @media ", " {\n    text-decoration: underline;\n  }\n"])), devices.mobile);
-var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n  color: var(--base-color-white);\n  text-decoration: none;\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
+var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n  color: var(--base-color-white);\n  text-decoration: none;\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 36px;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n"])), devices.mobile);
 var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
 var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  gap: var(--grid-column-gap);\n  cursor: pointer;\n"])));
@@ -12124,8 +12156,8 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
   }))))));
 };
 
-var _templateObject$1o, _templateObject3$T, _templateObject4$K;
-var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  min-height: 70px;\n  background: var(--color-base-white);\n  z-index: ", ";\n  align-content: center;\n\n  @media ", " {\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, devices.mobile);
+var _templateObject$1n, _templateObject3$T, _templateObject4$K;
+var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  min-height: 70px;\n  background: var(--color-base-white);\n  z-index: ", ";\n  align-content: center;\n\n  @media ", " {\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, devices.mobile);
 var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 24px;\n  min-width: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  border: none;\n  padding: 0;\n  background: none;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media ", " {\n    min-height: 12px;\n    min-width: 12px;\n    max-height: 12px;\n    max-width: 12px;\n  }\n"])), devices.mobile);
 var ContentWrapper$3 = /*#__PURE__*/styled.a(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 
@@ -12336,22 +12368,25 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
 var css_248z$1 = "@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n";
 styleInject(css_248z$1);
 
-var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n  /* RBO Red */\n  /* Primary Palette */\n  --color-primary: #1a1a1a;\n  --color-primary-background: #eb0a0a;\n  --color-primary-red: #eb0a0a;\n  --color-primary-black: #1a1a1a;\n\n  /* Base Colours */\n  --color-base-white: #ffffff;\n  --color-base-black: #000000;\n  --color-base-dark-grey: #4c4f53;\n  --color-base-mid-grey: #72767c;\n  --color-base-light-grey: #e9e9e9;\n  --color-base-transparent: transparent;\n\n  /* States */\n  --color-state-error: #cc071e;\n  --color-state-medium: #ffce45;\n  --color-state-good: #2a874a;\n  --color-state-focused: #1e1da0;\n  --color-state-disabled: #b3b3b3;\n\n  /* RBO Red (Core) */\n  --color-rbo-red-hovered: #c40808;\n  --color-rbo-red-pressed: #9d0707;\n\n  /* RBO Black */\n  --color-rbo-black-hovered: #575757;\n  --color-rbo-black-pressed: #353535;\n\n  /* Black */\n  --color-black-hovered: #575757;\n  --color-black-pressed: #353535;\n\n  /* White */\n  --color-white-hovered: #fafafa;\n  --color-white-pressed: #f2f2f2;\n\n  /* Secondary Palette */\n  --color-secondary-yellow: #ffce45;\n  --color-secondary-pink: #ff36d0;\n  --color-secondary-orange: #ff6700;\n  --color-secondary-blue: #5f9cff;\n\n  /* Core theme colors */\n  --base-color-primary: #c8102e;\n  --base-color-core: #c8102e;\n  --base-color-stream: #1866dc;\n  --base-color-cinema: #1a1a1a;\n  --base-color-white: #ffffff;\n  --base-color-black: #000000;\n  --base-color-dark-grey: #4c4f53;\n  --base-color-mid-grey: #72767c;\n  --base-color-light-grey: #e9e9e9;\n  --base-color-transparent: transparent;\n  --base-color-errorstate: #eb0a0a;\n  --base-color-mediumstate: #ffce45;\n  --base-color-goodstate: #2a874a;\n  --base-color-progress: #1866dc;\n  --base-color-navigation: #c8102e;\n  --base-color-lapislazuli: #0060a0;\n  --base-color-lemonchiffon: #fffbbe;\n\n  --button-height: 48px;\n  --button-line-height: 20px;\n  --button-padding-x: 20px;\n  --button-padding-y: 14px;\n  --button-padding-y-icon: 12px;\n  --button-icon-margin: 12px;\n  --button-icon-width: 20px;\n  --button-icon-height: 20px;\n  --button-font-size: 14px;\n  --button-font-weight: 400;\n  --button-color: var(--color-base-white);\n  --button-bg-color: var(--color-primary-red);\n  --button-hover-color: var(--color-rbo-red-hovered);\n  --button-pressed-color: var(--color-rbo-red-pressed);\n  --button-secondary-color: var(--color-primary-red);\n  --button-secondary-hover-color: var(--color-rbo-red-hovered);\n  --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n  --button-tertiary-color: var(--color-primary-black);\n  --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n  --button-auxiliary-color: var(--color-primary-black);\n  --button-auxiliary-bg-color: var(--color-base-transparent);\n\n/* -----  Variables already used in Harmonic START  ----- */\n  --grid-column-gap: 36px;\n  --grid-margin: 10%;\n\n  --rotator-button-width: 60px;\n  --rotator-button-icon-width: 36px;\n  --rotator-button-color: var(--color-primary-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-red);\n\n  --carousel-image-caption-height: 17px;\n  \n  @media (max-width: 699px) {\n    --grid-column-gap: 12px;\n    --grid-margin: 20px;\n    --rotator-button-width: 40px;\n    --rotator-button-icon-width: 24px;\n    --carousel-image-caption-height: 14px;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-column-gap: 20px;\n    --grid-margin: 32px;\n    --rotator-button-width: 44px;\n    --rotator-button-icon-width: 24px;\n    --carousel-image-caption-height: 14px;\n  }\n\n/* -----  Variables already used in Harmonic END  ----- */\n\n  --font-size-header-1: 96px;\n  --font-weight-header-1: 500;\n  --letter-spacing-header-1: 2px;\n  --line-height-header-1: 110px;\n  --margin-header-1: 0.67em 0;\n\n  --font-size-header-2: 68px;\n  --font-weight-header-2: 500;\n  --letter-spacing-header-2: 1px;\n  --line-height-header-2: 72px;\n  --margin-header-2: 0.83em 0;\n\n  --font-size-header-3: 44px;\n  --font-weight-header-3: 500;\n  --letter-spacing-header-3: 1px;\n  --line-height-header-3: 48px;\n  --margin-header-3: 1em 0;\n\n  --font-size-header-4: 34px;\n  --font-weight-header-4: 500;\n  --letter-spacing-header-4: 1px;\n  --line-height-header-4: 40px;\n  --margin-header-4: 1.33em 0;\n\n  --font-size-header-5: 24px;\n  --font-weight-header-5: 500;\n  --letter-spacing-header-5: 1px;\n  --line-height-header-5: 30px;\n  --margin-header-5: 1.67em 0;\n\n  --font-size-header-6: 20px;\n  --font-weight-header-6: 500;\n  --letter-spacing-header-6: 1px;\n  --line-height-header-6: 28px;\n  --margin-header-6: 2.33em 0;\n\n  --font-size-altHeader-3: 44px;\n  --font-weight-altHeader-3: normal;\n  --letter-spacing-altHeader-3: normal;\n  --line-height-altHeader-3: 48px;\n\n  --font-size-altHeader-4: 34px;\n  --font-weight-altHeader-4: normal;\n  --letter-spacing-altHeader-4: normal;\n  --line-height-altHeader-4: 44px;\n\n  --font-size-altHeader-5: 24px;\n  --font-weight-altHeader-5: normal;\n  --letter-spacing-altHeader-5: normal;\n  --line-height-altHeader-5: 30px;\n\n  --font-size-altHeader-6: 20px;\n  --font-weight-altHeader-6: normal;\n  --letter-spacing-altHeader-6: normal;\n  --line-height-altHeader-6: 28px;\n\n  --font-size-overline-1: 14px;\n  --font-weight-overline-1: 500;\n  --letter-spacing-overline-1: 1px;\n  --line-height-overline-1: 16px;\n\n  --font-size-overline-2: 12px;\n  --font-weight-overline-2: 500;\n  --letter-spacing-overline-2: 1px;\n  --line-height-overline-2: 14px;\n\n  --font-size-overline-3: 10px;\n  --font-weight-overline-3: 500;\n  --letter-spacing-overline-3: 1px;\n  --line-height-overline-3: 12px;\n\n  --font-size-overline-4: 8px;\n  --font-weight-overline-4: 500;\n  --letter-spacing-overline-4: 1px;\n  --line-height-overline-4: 10px;\n\n  --font-size-body-1: 19px;\n  --font-weight-body-1: 400;\n  --letter-spacing-body-1: normal;\n  --line-height-body-1: 26px;\n\n  --font-size-body-2: 16px;\n  --font-weight-body-2: 400;\n  --letter-spacing-body-2: normal;\n  --line-height-body-2: 22px;\n\n  --font-size-body-3: 14px;\n  --font-weight-body-3: 400;\n  --letter-spacing-body-3: normal;\n  --line-height-body-3: 20px;\n\n  --font-size-subtitle-1: 18px;\n  --font-weight-subtitle-1: 500;\n  --letter-spacing-subtitle-1: 1px;\n  --line-height-subtitle-1: 22px;\n\n  --font-size-subtitle-2: 14px;\n  --font-weight-subtitle-2: 500;\n  --letter-spacing-subtitle-2: 1px;\n  --line-height-subtitle-2: 22px;\n\n  --font-size-title-description: 20px;\n  --line-height-title-description: 28px;\n\n  --line-height-listing: 36px;\n  --font-size-individual-listing-name: 19px;\n  --line-height-individual-listing-name: 24px;\n  --line-height-people-listing-gap: 24px;\n\n  --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-altHeader: 'adobe-garamond-pro';\n  --font-family-body: 'adobe-garamond-pro';\n  --font-family-body-italics: 'adobe-garamond-pro';\n  --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-name: 'adobe-garamond-pro';\n\n  --font-feature-settings-header: 'tnum' on, 'lnum' on;\n  --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n  --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n  --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n  --text-transform-header: uppercase;\n  --text-transform-altHeader: none;\n  --text-transform-body: none;\n  --text-transform-overline: uppercase;\n  --text-transform-subtitle: uppercase;\n\n  --word-break-header: break-word;\n  --word-break-altHeader: break-word;\n  --word-break-body: break-word;\n  --word-break-overline: break-word;\n  --word-break-subtitle: break-word;\n\n  --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-size-navigation: 13px;\n  --font-weight-navigation: 500;\n  --line-height-navigation: 16px;\n  --text-transform-navigation: uppercase;\n  --letter-spacing-navigation: 1px;\n\n  --navigation-small-gap: 16px;\n  --navigation-middle-gap: 20px;\n  --navigation-large-gap: 24px;\n  --navigation-xlarge-gap: 36px;\n  --navigation-large-margin: 60px;\n\n  --font-size-search: 24px;\n  --font-family-search: 'adobe-garamond-pro';\n\n  --grid-outer-margin: 50px;\n  --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n  --footer-height: 380px;\n  --footer-padding-top: 44px;\n  --footer-padding-bottom: 44px;\n  --footer-items-gap: 32px;\n  --footer-media-gap: 32px;\n  --footer-media-icon-width: 24px;\n  --footer-media-icon-height: 24px;\n  --footer-vertical-spacing-lg: 58px;\n  --footer-vertical-spacing-sm: 16px;\n\n  --text-link-underline-offset: 8px;\n  --cards-spacing-stack: 40px;\n\n  --editorial-subtitle-margin-bottom: 16px;\n  --editorial-margin-between: 24px;\n  --editorial-spacing-hover: 4px;\n  --anchor-tabs-height: 70px;\n\n  --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n  --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n  --harmonic-text-link-underline-offset: 6px;\n  --harmonic-font-size-navigation: 19px;\n\n  --announcement-banner-color: var(--color-base-white);\n  --announcement-banner-bg-color: var(--color-primary-red);\n  --announcement-banner-hover-color: var(--color-white-hovered);\n  --announcement-banner-pressed-color: var(--color-white-pressed);\n\n  --information-panel-color: var(--color-base-white);\n  --information-panel-bg-color: var(--color-primary-red);\n  --information-panel-button-color: var(--color-primary-black);\n  --information-panel-button-bg-color: var(--color-base-white);\n  --information-panel-button-hover-color: var(--color-white-hovered);\n  --information-panel-button-pressed-color: var(--color-white-pressed);\n\n  --heading-promo-bg-color: var(--color-primary-red);\n\n  @media (max-width: 699px) {\n    --font-size-header-1: 38px;\n    --font-weight-header-1: 500;\n    --letter-spacing-header-1: 1px;\n    --line-height-header-1: 42px;\n\n    --font-size-header-2: 30px;\n    --font-weight-header-2: 500;\n    --letter-spacing-header-2: 1px;\n    --line-height-header-2: 34px;\n\n    --font-size-header-3: 26px;\n    --font-weight-header-3: 500;\n    --letter-spacing-header-3: 1px;\n    --line-height-header-3: 30px;\n\n    --font-size-header-4: 24px;\n    --font-weight-header-4: 500;\n    --letter-spacing-header-4: 1px;\n    --line-height-header-4: 28px;\n\n    --font-size-header-5: 20px;\n    --font-weight-header-5: 500;\n    --letter-spacing-header-5: 1px;\n    --line-height-header-5: 28px;\n\n    --font-size-header-6: 17px;\n    --font-weight-header-6: 500;\n    --letter-spacing-header-6: 1px;\n    --line-height-header-6: 24px;\n\n    --font-size-altHeader-3: 26px;\n    --font-weight-altHeader-3: normal;\n    --letter-spacing-altHeader-3: normal;\n    --line-height-altHeader-3: 30px;\n\n    --font-size-altHeader-4: 24px;\n    --font-weight-altHeader-4: normal;\n    --letter-spacing-altHeader-4: normal;\n    --line-height-altHeader-4: 28px;\n\n    --font-size-altHeader-5: 20px;\n    --font-weight-altHeader-5: normal;\n    --letter-spacing-altHeader-5: normal;\n    --line-height-altHeader-5: 28px;\n\n    --font-size-altHeader-6: 17px;\n    --font-weight-altHeader-6: normal;\n    --letter-spacing-altHeader-6: normal;\n    --line-height-altHeader-6: 24px;\n\n    --font-size-overline-1: 14px;\n    --font-weight-overline-1: 500;\n    --letter-spacing-overline-1: 1px;\n    --line-height-overline-1: 16px;\n\n    --font-size-overline-2: 12px;\n    --font-weight-overline-2: 500;\n    --letter-spacing-overline-2: 1px;\n    --line-height-overline-2: 14px;\n\n    --font-size-body-1: 17px;\n    --font-weight-body-1: 400;\n    --letter-spacing-body-1: normal;\n    --line-height-body-1: 24px;\n\n    --font-size-body-2: 12px;\n    --font-weight-body-2: 400;\n    --letter-spacing-body-2: normal;\n    --line-height-body-2: 18px;\n\n    --font-size-body-3: 11px;\n    --font-weight-body-3: 400;\n    --letter-spacing-body-3: normal;\n    --line-height-body-3: 16px;\n\n    --font-size-subtitle-1: 16px;\n    --font-weight-subtitle-1: 500;\n    --letter-spacing-subtitle-1: 1px;\n    --line-height-subtitle-1: 24px;\n\n    --font-size-subtitle-2: 14px;\n    --font-weight-subtitle-2: 500;\n    --letter-spacing-subtitle-2: 1px;\n    --line-height-subtitle-2: 18px;\n\n    --font-size-title-description: 17px;\n    --line-height-title-description: 24px;\n    --line-height-people-listing-gap: 16px;\n\n    --font-size-search: 20px;\n    --font-family-search: 'adobe-garamond-pro';\n\n    --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-altHeader: 'adobe-garamond-pro';\n    --font-family-body: 'adobe-garamond-pro';\n    --font-family-body-italics: 'adobe-garamond-pro';\n    --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-overline: 'Gotham SSm Medium', sans-serif;\n    --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n    --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-people-listing-name: 'adobe-garamond-pro';\n\n    --font-feature-settings-header: 'tnum' on, 'lnum' on;\n    --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n    --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n    --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n    --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n    --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n    --text-transform-header: uppercase;\n    --text-transform-altHeader: none;\n    --text-transform-body: none;\n    --text-transform-overline: uppercase;\n    --text-transform-subtitle: uppercase;\n\n    --word-break-header: break-word;\n    --word-break-altHeader: break-word;\n    --word-break-body: break-word;\n    --word-break-overline: break-word;\n    --word-break-subtitle: break-word;\n\n    --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n    --footer-height: auto;\n    --footer-padding-top: 20px;\n    --footer-padding-bottom: 20px;\n    --footer-items-gap: 12px;\n    --footer-media-icon-width: 28px;\n    --footer-media-icon-height: 28px;\n    --footer-vertical-spacing-lg: 24px;\n    --footer-vertical-spacing-sm: 24px;\n\n    --anchor-tabs-height: 60px;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n    --font-size-header-6: 17px;\n    --font-size-altHeader-4: 24px;\n    --font-size-body-1: 17px;\n\n    --footer-media-gap: 24px;\n    --footer-padding-top: 40px;\n    --footer-padding-bottom: 40px;\n  }\n}\n";
-var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
+var css_248z$2 = "/* ~~~~~ General Styling Classes ~~~~~ */\n.typography_color-primary__LOfDi {\n  color: var(--color-primary);\n}\n\n.typography_color-black__6MHRL {\n  color: var(--color-base-black);\n}\n\n.typography_color-white__PfW5s {\n  color: var(--color-base-white);\n}\n\n.typography_color-red__iPlbG {\n  color: var(--color-primary-red);\n}\n\n.typography_color-grey__GA1c2 {\n  color: var(--color-base-dark-grey);\n}\n\n.typography_color-inherit__RDd0Y {\n  color: inherit;\n}\n\n.typography_em__E6tX- {\n  font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.typography_display__-F3p4 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  line-height: 100%;\n\n  &.typography_large__uq0zC {\n    font-size: 96px;\n    font-weight: 700;\n    letter-spacing: -5px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 68px;\n    font-weight: 500;\n    letter-spacing: -3px;\n  }\n\n  /* Serif and Italic styles */\n  &.typography_serif__VSO38,\n  &.typography_em__E6tX- {\n    font-family: var(--font-family-serif);\n    font-weight: 500;\n  }\n\n  /* Serif and Italic adjustments */\n  &.typography_large__uq0zC.typography_serif__VSO38,\n  &.typography_large__uq0zC.typography_em__E6tX- {\n    letter-spacing: -3px;\n  }\n\n  &.typography_small__wfQ0K.typography_serif__VSO38,\n  &.typography_small__wfQ0K.typography_em__E6tX- {\n    letter-spacing: -2px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      font-size: 38px;\n      letter-spacing: -1.5px;\n    }\n\n    &.typography_small__wfQ0K {\n      font-size: 32px;\n      letter-spacing: -1.5px;\n    }\n\n    &.typography_large__uq0zC.typography_serif__VSO38,\n    &.typography_large__uq0zC.typography_em__E6tX-,\n    &.typography_small__wfQ0K.typography_serif__VSO38,\n    &.typography_small__wfQ0K.typography_em__E6tX- {\n      letter-spacing: -0.5px;\n    }\n  }\n}\n\n/* Headers */\n.typography_header__BexiD {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n\n  &.typography_large__uq0zC {\n    font-size: 44px;\n    line-height: 48px;\n    letter-spacing: -1.5px;\n  }\n\n  &.typography_medium__K0uZD {\n    font-size: 34px;\n    line-height: 40px;\n    letter-spacing: -1px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 26px;\n    line-height: 32px;\n    letter-spacing: -0.5px;\n  }\n\n  /* Serif and Italic styles */\n  &.typography_serif__VSO38,\n  &.typography_em__E6tX- {\n    font-family: var(--font-family-serif);\n  }\n\n  /* Serif and Italic letter-spacing overrides */\n  &.typography_large__uq0zC.typography_serif__VSO38,\n  &.typography_large__uq0zC.typography_em__E6tX- {\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_medium__K0uZD.typography_serif__VSO38,\n  &.typography_medium__K0uZD.typography_em__E6tX- {\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_small__wfQ0K.typography_serif__VSO38,\n  &.typography_small__wfQ0K.typography_em__E6tX- {\n    letter-spacing: -0.5px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      font-size: 28px;\n      line-height: 34px;\n      letter-spacing: -1.5px;\n    }\n\n    &.typography_medium__K0uZD {\n      font-size: 24px;\n      line-height: 28px;\n      letter-spacing: -1px;\n    }\n\n    &.typography_small__wfQ0K {\n      font-size: 20px;\n      line-height: 26px;\n      letter-spacing: -0.75px;\n    }\n\n    /* Mobile overrides for serif/italic letter-spacing */\n    &.typography_large__uq0zC.typography_serif__VSO38,\n    &.typography_large__uq0zC.typography_em__E6tX-,\n    &.typography_medium__K0uZD.typography_serif__VSO38,\n    &.typography_medium__K0uZD.typography_em__E6tX-,\n    &.typography_small__wfQ0K.typography_serif__VSO38,\n    &.typography_small__wfQ0K.typography_em__E6tX- {\n      letter-spacing: -0.5px;\n    }\n  }\n}\n\n/* Subtitle */\n.typography_subtitle__aoFTV {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n\n  &.typography_large__uq0zC {\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      font-size: 17px;\n      line-height: 24px;\n      letter-spacing: -0.5px;\n    }\n\n    &.typography_small__wfQ0K {\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: -0.2px;\n    }\n  }\n}\n\n/* Body Copy */\n.typography_bodycopy__vYtQ8 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n\n  &.typography_large__uq0zC {\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_medium__K0uZD {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.5px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      font-size: 17px;\n      line-height: 24px;\n      letter-spacing: -0.5px;\n    }\n\n    &.typography_medium__K0uZD {\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: -0.2px;\n    }\n\n    &.typography_small__wfQ0K {\n      font-size: 11px;\n      line-height: 16px;\n      letter-spacing: -0.2px;\n    }\n  }\n}\n\n/* Overline */\n.typography_overline__EnUK3 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n  text-transform: uppercase;\n\n  &.typography_large__uq0zC {\n    font-size: 14px;\n    line-height: 18px;\n    letter-spacing: 0.3px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 12px;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      line-height: 17px;\n      letter-spacing: 0.3px; /* Added to ensure it stays */\n    }\n\n    &.typography_small__wfQ0K {\n      line-height: 14px;\n      letter-spacing: 0.3px;\n    }\n  }\n}\n\n/* Button Text */\n.typography_buttontext__vcxNi {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  line-height: 20px;\n  letter-spacing: -0.5px;\n  font-weight: 400;\n\n  @media (max-width: 699px) {\n    font-weight: 500;\n    line-height: 17px;\n  }\n}\n\n/* Caption Text */\n.typography_captiontext__91UFb {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n\n  @media (max-width: 699px) {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.2px;\n  }\n}\n\n/* Navigation Text */\n.typography_navigationtext__YfGf7 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-size: 19px;\n  line-height: 19px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n\n  @media (max-width: 699px) {\n    font-size: 17px;\n    line-height: 17px;\n  }\n}\n";
 styleInject(css_248z$2);
 
-var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n  /* Stream theme overrides */\n  --base-color-primary: #1a1a1a;\n  --color-primary: #1a1a1a;\n  --color-primary-background: #1a1a1a;\n  --color-primary-button: #1a1a1a;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n  --color-primary-button-reverse-bg: #1a1a1a;\n  --color-primary-button-reverse: #ffffff;\n\n  --button-color: var(--color-base-white);\n  --button-bg-color: var(--color-primary-black);\n  --button-hover-color: var(--color-black-hovered);\n  --button-pressed-color: var(--color-black-pressed);\n  --button-secondary-color: var(--color-primary-black);\n  --button-secondary-hover-color: var(--color-black-hovered);\n  --button-secondary-pressed-color: var(--color-black-pressed);\n  --button-tertiary-color: var(--color-primary-black);\n  --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n\n  --rotator-button-color: var(--color-base-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-black);\n\n  --announcement-banner-color: var(--color-base-white);\n  --announcement-banner-bg-color: var(--color-primary-black);\n  --announcement-banner-hover-color: var(--color-white-hovered);\n  --announcement-banner-pressed-color: var(--color-white-pressed);\n\n  --information-panel-color: var(--color-base-white);\n  --information-panel-bg-color: var(--color-primary-black);\n\n  --heading-promo-bg-color: var(--color-base-black);\n}\n";
-var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
+var css_248z$3 = ".core-theme-module_coreTheme__pWxYB {\n  /* RBO Red */\n  /* Primary Palette */\n  --color-primary: #1a1a1a;\n  --color-primary-background: #eb0a0a;\n  --color-primary-red: #eb0a0a;\n  --color-primary-black: #1a1a1a;\n\n  /* Base Colours */\n  --color-base-white: #ffffff;\n  --color-base-black: #000000;\n  --color-base-dark-grey: #4c4f53;\n  --color-base-mid-grey: #72767c;\n  --color-base-light-grey: #e9e9e9;\n  --color-base-transparent: transparent;\n\n  /* States */\n  --color-state-error: #cc071e;\n  --color-state-medium: #ffce45;\n  --color-state-good: #2a874a;\n  --color-state-focused: #1e1da0;\n  --color-state-disabled: #b3b3b3;\n\n  /* RBO Red (Core) */\n  --color-rbo-red-hovered: #c40808;\n  --color-rbo-red-pressed: #9d0707;\n\n  /* RBO Black */\n  --color-rbo-black-hovered: #575757;\n  --color-rbo-black-pressed: #353535;\n\n  /* Black */\n  --color-black-hovered: #575757;\n  --color-black-pressed: #353535;\n\n  /* White */\n  --color-white-hovered: #fafafa;\n  --color-white-pressed: #f2f2f2;\n\n  /* Secondary Palette */\n  --color-secondary-yellow: #ffce45;\n  --color-secondary-pink: #ff36d0;\n  --color-secondary-orange: #ff6700;\n  --color-secondary-blue: #5f9cff;\n\n  /* Core theme colors */\n  --base-color-primary: #c8102e;\n  --base-color-core: #c8102e;\n  --base-color-stream: #1866dc;\n  --base-color-cinema: #1a1a1a;\n  --base-color-white: #ffffff;\n  --base-color-black: #000000;\n  --base-color-dark-grey: #4c4f53;\n  --base-color-mid-grey: #72767c;\n  --base-color-light-grey: #e9e9e9;\n  --base-color-transparent: transparent;\n  --base-color-errorstate: #eb0a0a;\n  --base-color-mediumstate: #ffce45;\n  --base-color-goodstate: #2a874a;\n  --base-color-progress: #1866dc;\n  --base-color-navigation: #c8102e;\n  --base-color-lapislazuli: #0060a0;\n  --base-color-lemonchiffon: #fffbbe;\n\n  --button-height: 48px;\n  --button-line-height: 20px;\n  --button-padding-x: 20px;\n  --button-padding-y: 14px;\n  --button-padding-y-icon: 12px;\n  --button-icon-margin: 12px;\n  --button-icon-width: 20px;\n  --button-icon-height: 20px;\n  --button-font-size: 14px;\n  --button-font-weight: 400;\n  --button-color: var(--color-base-white);\n  --button-bg-color: var(--color-primary-red);\n  --button-hover-color: var(--color-rbo-red-hovered);\n  --button-pressed-color: var(--color-rbo-red-pressed);\n  --button-secondary-color: var(--color-primary-red);\n  --button-secondary-hover-color: var(--color-rbo-red-hovered);\n  --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n  --button-tertiary-color: var(--color-primary-black);\n  --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n  --button-auxiliary-color: var(--color-primary-black);\n  --button-auxiliary-bg-color: var(--color-base-transparent);\n\n/* -----  Variables already used in Harmonic START  ----- */\n  --grid-column-gap: 36px;\n  --grid-margin: 10%;\n\n  --rotator-button-width: 60px;\n  --rotator-button-icon-width: 36px;\n  --rotator-button-color: var(--color-primary-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-red);\n\n  --carousel-image-caption-height: 17px;\n  \n  @media (max-width: 699px) {\n    --grid-column-gap: 12px;\n    --grid-margin: 20px;\n    --rotator-button-width: 40px;\n    --rotator-button-icon-width: 24px;\n    --carousel-image-caption-height: 14px;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-column-gap: 20px;\n    --grid-margin: 32px;\n    --rotator-button-width: 44px;\n    --rotator-button-icon-width: 24px;\n    --carousel-image-caption-height: 14px;\n  }\n\n/* -----  Variables already used in Harmonic END  ----- */\n\n  --font-size-header-1: 96px;\n  --font-weight-header-1: 500;\n  --letter-spacing-header-1: 2px;\n  --line-height-header-1: 110px;\n  --margin-header-1: 0.67em 0;\n\n  --font-size-header-2: 68px;\n  --font-weight-header-2: 500;\n  --letter-spacing-header-2: 1px;\n  --line-height-header-2: 72px;\n  --margin-header-2: 0.83em 0;\n\n  --font-size-header-3: 44px;\n  --font-weight-header-3: 500;\n  --letter-spacing-header-3: 1px;\n  --line-height-header-3: 48px;\n  --margin-header-3: 1em 0;\n\n  --font-size-header-4: 34px;\n  --font-weight-header-4: 500;\n  --letter-spacing-header-4: 1px;\n  --line-height-header-4: 40px;\n  --margin-header-4: 1.33em 0;\n\n  --font-size-header-5: 24px;\n  --font-weight-header-5: 500;\n  --letter-spacing-header-5: 1px;\n  --line-height-header-5: 30px;\n  --margin-header-5: 1.67em 0;\n\n  --font-size-header-6: 20px;\n  --font-weight-header-6: 500;\n  --letter-spacing-header-6: 1px;\n  --line-height-header-6: 28px;\n  --margin-header-6: 2.33em 0;\n\n  --font-size-altHeader-3: 44px;\n  --font-weight-altHeader-3: normal;\n  --letter-spacing-altHeader-3: normal;\n  --line-height-altHeader-3: 48px;\n\n  --font-size-altHeader-4: 34px;\n  --font-weight-altHeader-4: normal;\n  --letter-spacing-altHeader-4: normal;\n  --line-height-altHeader-4: 44px;\n\n  --font-size-altHeader-5: 24px;\n  --font-weight-altHeader-5: normal;\n  --letter-spacing-altHeader-5: normal;\n  --line-height-altHeader-5: 30px;\n\n  --font-size-altHeader-6: 20px;\n  --font-weight-altHeader-6: normal;\n  --letter-spacing-altHeader-6: normal;\n  --line-height-altHeader-6: 28px;\n\n  --font-size-overline-1: 14px;\n  --font-weight-overline-1: 500;\n  --letter-spacing-overline-1: 1px;\n  --line-height-overline-1: 16px;\n\n  --font-size-overline-2: 12px;\n  --font-weight-overline-2: 500;\n  --letter-spacing-overline-2: 1px;\n  --line-height-overline-2: 14px;\n\n  --font-size-overline-3: 10px;\n  --font-weight-overline-3: 500;\n  --letter-spacing-overline-3: 1px;\n  --line-height-overline-3: 12px;\n\n  --font-size-overline-4: 8px;\n  --font-weight-overline-4: 500;\n  --letter-spacing-overline-4: 1px;\n  --line-height-overline-4: 10px;\n\n  --font-size-body-1: 19px;\n  --font-weight-body-1: 400;\n  --letter-spacing-body-1: normal;\n  --line-height-body-1: 26px;\n\n  --font-size-body-2: 16px;\n  --font-weight-body-2: 400;\n  --letter-spacing-body-2: normal;\n  --line-height-body-2: 22px;\n\n  --font-size-body-3: 14px;\n  --font-weight-body-3: 400;\n  --letter-spacing-body-3: normal;\n  --line-height-body-3: 20px;\n\n  --font-size-subtitle-1: 18px;\n  --font-weight-subtitle-1: 500;\n  --letter-spacing-subtitle-1: 1px;\n  --line-height-subtitle-1: 22px;\n\n  --font-size-subtitle-2: 14px;\n  --font-weight-subtitle-2: 500;\n  --letter-spacing-subtitle-2: 1px;\n  --line-height-subtitle-2: 22px;\n\n  --font-size-title-description: 20px;\n  --line-height-title-description: 28px;\n\n  --line-height-listing: 36px;\n  --font-size-individual-listing-name: 19px;\n  --line-height-individual-listing-name: 24px;\n  --line-height-people-listing-gap: 24px;\n\n  --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-altHeader: 'adobe-garamond-pro';\n  --font-family-body: 'adobe-garamond-pro';\n  --font-family-body-italics: 'adobe-garamond-pro';\n  --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-name: 'adobe-garamond-pro';\n\n  --font-feature-settings-header: 'tnum' on, 'lnum' on;\n  --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n  --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n  --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n  --text-transform-header: uppercase;\n  --text-transform-altHeader: none;\n  --text-transform-body: none;\n  --text-transform-overline: uppercase;\n  --text-transform-subtitle: uppercase;\n\n  --word-break-header: break-word;\n  --word-break-altHeader: break-word;\n  --word-break-body: break-word;\n  --word-break-overline: break-word;\n  --word-break-subtitle: break-word;\n\n  --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-size-navigation: 13px;\n  --font-weight-navigation: 500;\n  --line-height-navigation: 16px;\n  --text-transform-navigation: uppercase;\n  --letter-spacing-navigation: 1px;\n\n  --navigation-small-gap: 16px;\n  --navigation-middle-gap: 20px;\n  --navigation-large-gap: 24px;\n  --navigation-xlarge-gap: 36px;\n  --navigation-large-margin: 60px;\n\n  --font-size-search: 24px;\n  --font-family-search: 'adobe-garamond-pro';\n\n  --grid-outer-margin: 50px;\n  --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n  --footer-height: 380px;\n  --footer-padding-top: 44px;\n  --footer-padding-bottom: 44px;\n  --footer-items-gap: 32px;\n  --footer-media-gap: 32px;\n  --footer-media-icon-width: 24px;\n  --footer-media-icon-height: 24px;\n  --footer-vertical-spacing-lg: 58px;\n  --footer-vertical-spacing-sm: 16px;\n\n  --text-link-underline-offset: 8px;\n  --cards-spacing-stack: 40px;\n\n  --editorial-subtitle-margin-bottom: 16px;\n  --editorial-margin-between: 24px;\n  --editorial-spacing-hover: 4px;\n  --anchor-tabs-height: 70px;\n\n  --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n  --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n  --harmonic-text-link-underline-offset: 6px;\n  --harmonic-font-size-navigation: 19px;\n\n  --announcement-banner-color: var(--color-base-white);\n  --announcement-banner-bg-color: var(--color-primary-red);\n  --announcement-banner-hover-color: var(--color-white-hovered);\n  --announcement-banner-pressed-color: var(--color-white-pressed);\n\n  --information-panel-color: var(--color-base-white);\n  --information-panel-bg-color: var(--color-primary-red);\n  --information-panel-button-color: var(--color-primary-black);\n  --information-panel-button-bg-color: var(--color-base-white);\n  --information-panel-button-hover-color: var(--color-white-hovered);\n  --information-panel-button-pressed-color: var(--color-white-pressed);\n\n  --heading-promo-bg-color: var(--color-primary-red);\n  --page-header-bg-color: var(--color-primary-red);\n\n  @media (max-width: 699px) {\n    --font-size-header-1: 38px;\n    --font-weight-header-1: 500;\n    --letter-spacing-header-1: 1px;\n    --line-height-header-1: 42px;\n\n    --font-size-header-2: 30px;\n    --font-weight-header-2: 500;\n    --letter-spacing-header-2: 1px;\n    --line-height-header-2: 34px;\n\n    --font-size-header-3: 26px;\n    --font-weight-header-3: 500;\n    --letter-spacing-header-3: 1px;\n    --line-height-header-3: 30px;\n\n    --font-size-header-4: 24px;\n    --font-weight-header-4: 500;\n    --letter-spacing-header-4: 1px;\n    --line-height-header-4: 28px;\n\n    --font-size-header-5: 20px;\n    --font-weight-header-5: 500;\n    --letter-spacing-header-5: 1px;\n    --line-height-header-5: 28px;\n\n    --font-size-header-6: 17px;\n    --font-weight-header-6: 500;\n    --letter-spacing-header-6: 1px;\n    --line-height-header-6: 24px;\n\n    --font-size-altHeader-3: 26px;\n    --font-weight-altHeader-3: normal;\n    --letter-spacing-altHeader-3: normal;\n    --line-height-altHeader-3: 30px;\n\n    --font-size-altHeader-4: 24px;\n    --font-weight-altHeader-4: normal;\n    --letter-spacing-altHeader-4: normal;\n    --line-height-altHeader-4: 28px;\n\n    --font-size-altHeader-5: 20px;\n    --font-weight-altHeader-5: normal;\n    --letter-spacing-altHeader-5: normal;\n    --line-height-altHeader-5: 28px;\n\n    --font-size-altHeader-6: 17px;\n    --font-weight-altHeader-6: normal;\n    --letter-spacing-altHeader-6: normal;\n    --line-height-altHeader-6: 24px;\n\n    --font-size-overline-1: 14px;\n    --font-weight-overline-1: 500;\n    --letter-spacing-overline-1: 1px;\n    --line-height-overline-1: 16px;\n\n    --font-size-overline-2: 12px;\n    --font-weight-overline-2: 500;\n    --letter-spacing-overline-2: 1px;\n    --line-height-overline-2: 14px;\n\n    --font-size-body-1: 17px;\n    --font-weight-body-1: 400;\n    --letter-spacing-body-1: normal;\n    --line-height-body-1: 24px;\n\n    --font-size-body-2: 12px;\n    --font-weight-body-2: 400;\n    --letter-spacing-body-2: normal;\n    --line-height-body-2: 18px;\n\n    --font-size-body-3: 11px;\n    --font-weight-body-3: 400;\n    --letter-spacing-body-3: normal;\n    --line-height-body-3: 16px;\n\n    --font-size-subtitle-1: 16px;\n    --font-weight-subtitle-1: 500;\n    --letter-spacing-subtitle-1: 1px;\n    --line-height-subtitle-1: 24px;\n\n    --font-size-subtitle-2: 14px;\n    --font-weight-subtitle-2: 500;\n    --letter-spacing-subtitle-2: 1px;\n    --line-height-subtitle-2: 18px;\n\n    --font-size-title-description: 17px;\n    --line-height-title-description: 24px;\n    --line-height-people-listing-gap: 16px;\n\n    --font-size-search: 20px;\n    --font-family-search: 'adobe-garamond-pro';\n\n    --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-altHeader: 'adobe-garamond-pro';\n    --font-family-body: 'adobe-garamond-pro';\n    --font-family-body-italics: 'adobe-garamond-pro';\n    --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-overline: 'Gotham SSm Medium', sans-serif;\n    --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n    --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-people-listing-name: 'adobe-garamond-pro';\n\n    --font-feature-settings-header: 'tnum' on, 'lnum' on;\n    --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n    --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n    --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n    --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n    --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n    --text-transform-header: uppercase;\n    --text-transform-altHeader: none;\n    --text-transform-body: none;\n    --text-transform-overline: uppercase;\n    --text-transform-subtitle: uppercase;\n\n    --word-break-header: break-word;\n    --word-break-altHeader: break-word;\n    --word-break-body: break-word;\n    --word-break-overline: break-word;\n    --word-break-subtitle: break-word;\n\n    --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n    --footer-height: auto;\n    --footer-padding-top: 20px;\n    --footer-padding-bottom: 20px;\n    --footer-items-gap: 12px;\n    --footer-media-icon-width: 28px;\n    --footer-media-icon-height: 28px;\n    --footer-vertical-spacing-lg: 24px;\n    --footer-vertical-spacing-sm: 24px;\n\n    --anchor-tabs-height: 60px;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n    --font-size-header-6: 17px;\n    --font-size-altHeader-4: 24px;\n    --font-size-body-1: 17px;\n\n    --footer-media-gap: 24px;\n    --footer-padding-top: 40px;\n    --footer-padding-bottom: 40px;\n  }\n}\n";
+var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
 styleInject(css_248z$3);
 
-var css_248z$4 = ".cinema-theme-module_cinemaTheme__f5QFs {\n  /* White */\n  --base-color-primary: #1a1a1a;\n  --color-primary: #1a1a1a;\n  --color-primary-button: #ffffff;\n  --color-primary-background: #1a1a1a;\n  --color-primary-button-reverse-bg: #ffffff;\n  --color-primary-button-reverse: #1a1a1a;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n  --color-white-hovered: #fafafa;\n  --color-white-pressed: #f2f2f2;\n\n  --button-color: var(--color-primary-black);\n  --button-bg-color: var(--color-base-white);\n  --button-hover-color: var(--color-white-hovered);\n  --button-pressed-color: var(--color-white-pressed);\n  --button-secondary-color: var(--color-base-white);\n  --button-secondary-hover-color: var(--color-white-hovered);\n  --button-secondary-pressed-color: var(--color-white-pressed);\n  --button-tertiary-color: var(--color-base-white);\n  --button-tertiary-hover-color: var(--color-white-hovered);\n  --button-tertiary-pressed-color: var(--color-white-pressed);\n\n  --rotator-button-color: var(--color-primary-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-black);\n\n  --announcement-banner-color: var(--color-primary-red);\n  --announcement-banner-bg-color: var(--color-base-white);\n  --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n  --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n  --information-panel-color: var(--color-primary-black);\n  --information-panel-bg-color: var(--color-base-white);\n  --information-panel-button-color: var(--color-base-white);\n  --information-panel-button-bg-color: var(--color-primary-red);\n  --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n  --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n  --heading-promo-bg-color: var(--color-base-white);\n}\n";
-var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
+var css_248z$4 = ".stream-theme-module_streamTheme__lTfqQ {\n  /* Stream theme overrides */\n  --base-color-primary: #1a1a1a;\n  --color-primary: #1a1a1a;\n  --color-primary-background: #1a1a1a;\n  --color-primary-button: #1a1a1a;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n  --color-primary-button-reverse-bg: #1a1a1a;\n  --color-primary-button-reverse: #ffffff;\n\n  --button-color: var(--color-base-white);\n  --button-bg-color: var(--color-primary-black);\n  --button-hover-color: var(--color-black-hovered);\n  --button-pressed-color: var(--color-black-pressed);\n  --button-secondary-color: var(--color-primary-black);\n  --button-secondary-hover-color: var(--color-black-hovered);\n  --button-secondary-pressed-color: var(--color-black-pressed);\n  --button-tertiary-color: var(--color-primary-black);\n  --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n\n  --rotator-button-color: var(--color-base-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-black);\n\n  --announcement-banner-color: var(--color-base-white);\n  --announcement-banner-bg-color: var(--color-primary-black);\n  --announcement-banner-hover-color: var(--color-white-hovered);\n  --announcement-banner-pressed-color: var(--color-white-pressed);\n\n  --information-panel-color: var(--color-base-white);\n  --information-panel-bg-color: var(--color-primary-black);\n\n  --heading-promo-bg-color: var(--color-base-black);\n  --page-header-bg-color: var(--color-primary-black);\n}\n";
+var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
 styleInject(css_248z$4);
 
-var css_248z$5 = ".schools-theme-module_schoolsTheme__CWHba {\n  /* Schools theme overrides */\n  --base-color-primary: #c8102e;\n  --color-primary: #c8102e;\n  --color-primary-button: #c8102e;\n  --color-primary-button-reverse-bg: #1a1a1a;\n  --color-primary-button-reverse: #ffffff;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n\n  --text-transform-header: none;\n  --text-transform-altHeader: none;\n  --text-transform-body: none;\n  --text-transform-overline: none;\n  --text-transform-subtitle: none;\n  --text-transform-navigation: uppercase;\n\n  @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n    --text-transform-header: none;\n    --text-transform-altHeader: none;\n    --text-transform-body: none;\n    --text-transform-overline: none;\n    --text-transform-subtitle: none;\n    --text-transform-navigation: uppercase;\n  }\n}\n";
-var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
+var css_248z$5 = ".cinema-theme-module_cinemaTheme__f5QFs {\n  /* White */\n  --base-color-primary: #1a1a1a;\n  --color-primary: #1a1a1a;\n  --color-primary-button: #ffffff;\n  --color-primary-background: #1a1a1a;\n  --color-primary-button-reverse-bg: #ffffff;\n  --color-primary-button-reverse: #1a1a1a;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n  --color-white-hovered: #fafafa;\n  --color-white-pressed: #f2f2f2;\n\n  --button-color: var(--color-primary-black);\n  --button-bg-color: var(--color-base-white);\n  --button-hover-color: var(--color-white-hovered);\n  --button-pressed-color: var(--color-white-pressed);\n  --button-secondary-color: var(--color-base-white);\n  --button-secondary-hover-color: var(--color-white-hovered);\n  --button-secondary-pressed-color: var(--color-white-pressed);\n  --button-tertiary-color: var(--color-base-white);\n  --button-tertiary-hover-color: var(--color-white-hovered);\n  --button-tertiary-pressed-color: var(--color-white-pressed);\n\n  --rotator-button-color: var(--color-primary-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-black);\n\n  --announcement-banner-color: var(--color-primary-red);\n  --announcement-banner-bg-color: var(--color-base-white);\n  --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n  --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n  --information-panel-color: var(--color-primary-black);\n  --information-panel-bg-color: var(--color-base-white);\n  --information-panel-button-color: var(--color-base-white);\n  --information-panel-button-bg-color: var(--color-primary-red);\n  --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n  --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n  --heading-promo-bg-color: var(--color-base-white); \n  --page-header-bg-color: var(--color-primary-black);\n};";
+var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
 styleInject(css_248z$5);
 
+var css_248z$6 = ".schools-theme-module_schoolsTheme__CWHba {\n  /* Schools theme overrides */\n  --base-color-primary: #c8102e;\n  --color-primary: #c8102e;\n  --color-primary-button: #c8102e;\n  --color-primary-button-reverse-bg: #1a1a1a;\n  --color-primary-button-reverse: #ffffff;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n\n  --text-transform-header: none;\n  --text-transform-altHeader: none;\n  --text-transform-body: none;\n  --text-transform-overline: none;\n  --text-transform-subtitle: none;\n  --text-transform-navigation: uppercase;\n\n  @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n    --text-transform-header: none;\n    --text-transform-altHeader: none;\n    --text-transform-body: none;\n    --text-transform-overline: none;\n    --text-transform-subtitle: none;\n    --text-transform-navigation: uppercase;\n  }\n}\n";
+var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
+styleInject(css_248z$6);
+
 /* eslint-disable react/jsx-no-useless-fragment */
 var getThemeClass = function getThemeClass(theme) {
   // Always include the base (core) theme class
@@ -12391,11 +12426,11 @@ var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
   return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
 };
 
-var _excluded$u = ["logo", "slides"];
+var _excluded$q = ["logo", "slides"];
 var HighlightsCinema = function HighlightsCinema(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12412,10 +12447,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
   })));
 };
 
-var _excluded$v = ["slides"];
+var _excluded$r = ["slides"];
 var HighlightsCore = function HighlightsCore(_ref) {
   var slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12429,11 +12464,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
   })));
 };
 
-var _excluded$w = ["logo", "slides"];
+var _excluded$s = ["logo", "slides"];
 var HighlightsStream = function HighlightsStream(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12450,8 +12485,8 @@ var HighlightsStream = function HighlightsStream(_ref) {
   })));
 };
 
-var _templateObject$1p, _templateObject3$U;
-var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
+var _templateObject$1o, _templateObject3$U;
+var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
 var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
 
 var MinimalCarousel = function MinimalCarousel(_ref) {
@@ -12487,8 +12522,8 @@ var MinimalCarousel = function MinimalCarousel(_ref) {
   }))));
 };
 
-var _templateObject$1q;
-var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-text-link-underline-offset: 6px;\n    --harmonic-text-transform-navigation: capitalize;\n    --harmonic-font-size-navigation: 19px;\n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
+var _templateObject$1p;
+var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-text-link-underline-offset: 6px;\n    --harmonic-text-transform-navigation: capitalize;\n    --harmonic-font-size-navigation: 19px;\n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -13442,5 +13477,5 @@ var HarmonicSize = {
   Large: 'large'
 };
 
-export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
+export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
 //# sourceMappingURL=harmonic.esm.js.map