@royaloperahouse/harmonic 0.18.5 → 0.18.6-b

package/dist/harmonic.esm.js

@@ -1,6 +1,6 @@
-import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState, forwardRef, cloneElement, useLayoutEffect } from 'react';
+import React__default, { createElement, memo, forwardRef, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState, cloneElement, useLayoutEffect } from 'react';
 import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
-import moment from 'moment';
+import { isPast, intervalToDuration, differenceInDays } from 'date-fns';
 import { renderToString } from 'react-dom/server';
 import Select$1, { components } from 'react-select';
 import Select$2 from 'react-select/async';
@@ -237,7 +237,8 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
     em = _ref2.em,
     _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
-    serif = _ref2.serif,
+    _ref2$serif = _ref2.serif,
+    serif = _ref2$serif === void 0 ? false : _ref2$serif,
     hierarchy = _ref2.hierarchy,
     tag = _ref2.tag,
     className = _ref2.className,
@@ -2649,7 +2650,7 @@ var Icon = /*#__PURE__*/memo(function (props) {
 Icon.displayName = 'Icon';
 
 var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
-var Button = function Button(_ref) {
+var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
@@ -2659,7 +2660,7 @@ var Button = function Button(_ref) {
     href = _ref.href,
     onClick = _ref.onClick,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var truncatedString = children.substring(0, 30);
+  var truncatedString = children == null ? void 0 : children.substring(0, 30);
   var handleClick = useCallback(function (e) {
     if (!href) e.preventDefault();
     onClick == null || onClick(e);
@@ -2671,7 +2672,8 @@ var Button = function Button(_ref) {
     href: href != null ? href : '#',
     onClick: handleClick,
     iconName: iconName,
-    className: className
+    className: className,
+    ref: ref
   }), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
     "data-testid": "button-icon",
     className: iconClassName
@@ -2682,7 +2684,8 @@ var Button = function Button(_ref) {
   }))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
     color: "inherit"
   }, truncatedString));
-};
+});
+Button.displayName = 'Button';
 
 var getPointerEvents = function getPointerEvents(_ref) {
   var disabled = _ref.disabled;
@@ -2747,7 +2750,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$3 || (_te
 var AriaDescription = /*#__PURE__*/styled.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 var _excluded$3 = ["children", "disabled", "className"];
-var PrimaryButton = function PrimaryButton(_ref) {
+var PrimaryButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     disabled = _ref.disabled,
     className = _ref.className,
@@ -2762,6 +2765,7 @@ var PrimaryButton = function PrimaryButton(_ref) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
       id: disabledButtonDescriptionId
     }, disabledButtonDescription), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
+      ref: ref,
       disabled: true,
       "aria-disabled": "true",
       role: "button",
@@ -2771,10 +2775,13 @@ var PrimaryButton = function PrimaryButton(_ref) {
       onClick: handleClick
     }), children));
   }
-  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
+    ref: ref
+  }, props, {
     className: className
   }), children);
-};
+});
+PrimaryButton.displayName = 'PrimaryButton';
 
 var COLORS$1 = {
   disabled: 'var(--color-state-disabled)',
@@ -3923,6 +3930,7 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
     color = _ref.color,
     dataTestId = _ref.dataTestId,
     isOpen = _ref.isOpen;
@@ -3957,8 +3965,9 @@ var Tab = function Tab(_ref) {
     className: className,
     "data-testid": dataTestId
   }, /*#__PURE__*/React__default.createElement(TabText, {
-    color: color,
+    id: tabLinkId,
     trimText: trimText,
+    color: color,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -4646,6 +4655,31 @@ var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templa
 var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
+var pad = function pad(num) {
+  return String(num || 0).padStart(2, '0');
+};
+var renderTimerValue = function renderTimerValue(value, label, separator) {
+  if (separator === void 0) {
+    separator = true;
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
+    className: "harmonic-timer-value"
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    color: "inherit",
+    hierarchy: "h3",
+    size: "medium",
+    "data-testid": label
+  }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
+    className: "harmonic-timer-label"
+  }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    color: "inherit",
+    size: "large"
+  }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    color: "inherit",
+    hierarchy: "h3",
+    size: "medium"
+  }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
+};
 var Timer = function Timer(_ref) {
   var endDate = _ref.endDate,
     title = _ref.title,
@@ -4654,43 +4688,22 @@ var Timer = function Timer(_ref) {
     bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
-  var _React$useState = React__default.useState('00'),
-    seconds = _React$useState[0],
-    setSeconds = _React$useState[1];
-  var _React$useState2 = React__default.useState('00'),
-    minutes = _React$useState2[0],
-    setMinutes = _React$useState2[1];
-  var _React$useState3 = React__default.useState('00'),
-    hours = _React$useState3[0],
-    setHours = _React$useState3[1];
-  var _React$useState4 = React__default.useState('00'),
-    days = _React$useState4[0],
-    setDays = _React$useState4[1];
-  var _React$useState5 = React__default.useState(false),
-    isEndDateReached = _React$useState5[0],
-    setIsEndDateReached = _React$useState5[1];
-  var renderTimerValue = function renderTimerValue(value, label, separator) {
-    if (separator === void 0) {
-      separator = true;
-    }
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
-      className: "harmonic-timer-value"
-    }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-      color: "inherit",
-      hierarchy: "h3",
-      size: "medium"
-    }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
-      className: "harmonic-timer-label"
-    }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
-      color: "inherit",
-      size: "large"
-    }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
-      color: "inherit",
-      hierarchy: "h3",
-      size: "medium"
-    }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
-  };
-  React__default.useEffect(function () {
+  var _useState = useState('00'),
+    seconds = _useState[0],
+    setSeconds = _useState[1];
+  var _useState2 = useState('00'),
+    minutes = _useState2[0],
+    setMinutes = _useState2[1];
+  var _useState3 = useState('00'),
+    hours = _useState3[0],
+    setHours = _useState3[1];
+  var _useState4 = useState('00'),
+    days = _useState4[0],
+    setDays = _useState4[1];
+  var _useState5 = useState(false),
+    isEndDateReached = _useState5[0],
+    setIsEndDateReached = _useState5[1];
+  useEffect(function () {
     if (isEndDateReached) return undefined;
     // We use this to set values for the timer immediately
     var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
@@ -4698,19 +4711,21 @@ var Timer = function Timer(_ref) {
       return setInterval(fn, delay);
     };
     var updateValues = function updateValues() {
-      var futureDate = moment(endDate);
-      var nowDate = moment();
-      var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
-      var difference = moment(differenceInMilliseconds).utc();
-      if (differenceInMilliseconds < 0) {
+      var futureDate = new Date(endDate);
+      var nowDate = new Date();
+      var diffInMs = futureDate.getTime() - nowDate.getTime();
+      if (diffInMs < 0) {
         setIsEndDateReached(true);
         if (endDateHandler) endDateHandler();
       } else {
-        var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
-        var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
-        var hoursDiff = difference.format('HH');
-        var minutesDiff = difference.format('mm');
-        var secondsDiff = difference.format('ss');
+        var duration = intervalToDuration({
+          start: nowDate,
+          end: futureDate
+        });
+        var daysDiff = pad(differenceInDays(futureDate, nowDate));
+        var hoursDiff = pad(duration.hours);
+        var minutesDiff = pad(duration.minutes);
+        var secondsDiff = pad(duration.seconds);
         setDays(daysDiff);
         setHours(hoursDiff);
         setMinutes(minutesDiff);
@@ -4722,7 +4737,7 @@ var Timer = function Timer(_ref) {
       clearInterval(interval);
     };
   });
-  var hideTimer = moment(endDate).isBefore(moment());
+  var hideTimer = isPast(new Date(endDate));
   if (hideTimer) return null;
   return /*#__PURE__*/React__default.createElement(TimerWrapper, {
     color: color
@@ -5440,6 +5455,7 @@ var Dropdown = function Dropdown(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
     trimTabText = _ref.trimTabText;
   var node = useRef();
   var _useState = useState(false),
@@ -5536,6 +5552,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,
       trimText: trimTabText,
       title: title,
       titleLink: titleLink,
@@ -5615,7 +5632,8 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className
+    className: className,
+    tabLinkId: "account-link"
   });
 };
 
@@ -6090,6 +6108,7 @@ var Accordion = function Accordion(_ref) {
   var toggleAccordion = function toggleAccordion() {
     if (React__default.Children.count(children) === 0) return;
     if (openAccordion) {
+      setIcon(collapsedStateIconData);
       setOpenAccordion(false);
       setTextHeight('0px');
       setIcon(collapsedStateIconData);
@@ -6631,17 +6650,20 @@ var PersonToggle = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObjec
   var isSelected = _ref.isSelected;
   return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
 });
-var PersonImage = /*#__PURE__*/styled.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 8px);\n  height: calc(100% - 8px);\n  margin: 4px;\n  object-fit: cover;\n  border-radius: 50%;\n\n  // This is really specific to the SVG that we have been provided\n  // as a fallback person image. I don't think there's a simpler and\n  // more general way to handle this, so if we're given a new placeholder\n  // image later, we may have to change the scale here\n  ", "\n"])), function (_ref2) {
-  var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
+var PersonImage = /*#__PURE__*/styled.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 8px);\n  height: calc(100% - 8px);\n  margin: 4px;\n  object-fit: cover;\n  border-radius: 50%;\n  filter: ", ";\n\n  // This is really specific to the SVG that we have been provided\n  // as a fallback person image. I don't think there's a simpler and\n  // more general way to handle this, so if we're given a new placeholder\n  // image later, we may have to change the scale here\n  ", "\n"])), function (_ref2) {
+  var greyscale = _ref2.greyscale;
+  return greyscale ? 'grayscale(100%)' : 'none';
+}, function (_ref3) {
+  var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
   return isDefaultPlaceholder && "\n    transform: scale(1.24);\n  ";
 });
 var PersonName = /*#__PURE__*/styled.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 86px;\n  display: flex;\n  flex-wrap: wrap;\n  text-align: center;\n\n  @media ", " {\n    max-width: unset;\n    text-align: left;\n    font-size: 17px;\n    line-height: 24px;\n  }\n"])), devices.mobile);
-var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--color-primary-red);\n  display: ", ";\n  position: absolute;\n  top: 6px;\n  right: -6px;\n  align-items: center;\n  justify-content: center;\n\n  span {\n    display: ", ";\n    width: 65%;\n    height: 65%;\n  }\n"])), function (_ref3) {
-  var isSelected = _ref3.isSelected;
-  return isSelected ? 'flex' : 'none';
-}, function (_ref4) {
+var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--color-primary-red);\n  display: ", ";\n  position: absolute;\n  top: 6px;\n  right: -6px;\n  align-items: center;\n  justify-content: center;\n\n  span {\n    display: ", ";\n    width: 65%;\n    height: 65%;\n  }\n"])), function (_ref4) {
   var isSelected = _ref4.isSelected;
   return isSelected ? 'flex' : 'none';
+}, function (_ref5) {
+  var isSelected = _ref5.isSelected;
+  return isSelected ? 'flex' : 'none';
 });
 var EmptySelectionTextSpacer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: hidden;\n\n  @media ", " {\n    visibility: visible;\n    min-height: var(--button-height);\n  }\n"])), devices.mobile);
 
@@ -7049,6 +7071,8 @@ var CastFilters = function CastFilters(_ref) {
     onSelect = _ref.onSelect,
     onApply = _ref.onApply,
     onClear = _ref.onClear,
+    _ref$greyscale = _ref.greyscale,
+    greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
     _ref$selectedIndices = _ref.selectedIndices,
     selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
   var _useViewport = useViewport(),
@@ -7189,7 +7213,8 @@ var CastFilters = function CastFilters(_ref) {
         src: personImage,
         alt: image ? name : "Placeholder image for " + name,
         draggable: false,
-        isDefaultPlaceholder: !(!!image || !!placeholderImage)
+        isDefaultPlaceholder: !(!!image || !!placeholderImage),
+        greyscale: greyscale
       }), /*#__PURE__*/React__default.createElement(Decal, {
         isSelected: isSelected
       }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -7570,22 +7595,25 @@ var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$n |
 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') 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') 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  /* Shadows */\n  --shadow-floating: 0px 4px 38px 0px #0000000a;\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  --button-anchor-tab-color: var(--color-primary-red);\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-small-width: 44px;\n  --rotator-button-small-icon-width: 28px;\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-margin: 12px;\n\n  --line-height-listing: 36px;\n\n  --upsell-border-color: var(--color-primary-red);\n\n  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n  --font-feature-settings-header: 'tnum' on, 'lnum' on;\n  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n  --text-transform-body: none;\n  --text-transform-header: uppercase;\n  --text-transform-subtitle: uppercase;\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\n    --line-height-listing: 34px;\n\n    --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n    --font-feature-settings-header: 'tnum' on, 'lnum' on;\n    --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n    --text-transform-body: none;\n    --text-transform-header: uppercase;\n    --text-transform-subtitle: uppercase;\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  }\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  --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-altHeader: 'pnum' on, 'onum' on;\n  --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n  --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n  --text-transform-altHeader: none;\n  --text-transform-overline: 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: 4px;\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-altHeader: 'pnum' on, 'onum' on;\n    --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n    --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n    --text-transform-altHeader: none;\n    --text-transform-overline: 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  --button-anchor-tab-color: var(--color-primary-black);\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  --upsell-border-color: var(--color-primary-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  /* Shadows */\n  --shadow-floating: 0px 4px 38px 0px #0000000a;\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  --button-anchor-tab-color: var(--color-primary-red);\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-small-width: 44px;\n  --rotator-button-small-icon-width: 28px;\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-margin: 12px;\n\n  --line-height-listing: 36px;\n\n  --upsell-border-color: var(--color-primary-red);\n\n  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n  --font-feature-settings-header: 'tnum' on, 'lnum' on;\n  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n  --text-transform-body: none;\n  --text-transform-header: uppercase;\n  --text-transform-subtitle: uppercase;\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\n    --line-height-listing: 34px;\n\n    --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n    --font-feature-settings-header: 'tnum' on, 'lnum' on;\n    --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n    --text-transform-body: none;\n    --text-transform-header: uppercase;\n    --text-transform-subtitle: uppercase;\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  }\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  --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-altHeader: 'pnum' on, 'onum' on;\n  --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n  --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n  --text-transform-altHeader: none;\n  --text-transform-overline: 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: 4px;\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-altHeader: 'pnum' on, 'onum' on;\n    --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n    --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n    --text-transform-altHeader: none;\n    --text-transform-overline: 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  --button-anchor-tab-color: var(--color-primary-black);\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\n  --upsell-border-color: var(--color-primary-black);\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  --button-anchor-tab-color: var(--color-primary-black);\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  --upsell-border-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  --button-anchor-tab-color: var(--color-primary-black);\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\n  --upsell-border-color: var(--color-primary-black);\n}\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 DEFAULT_THEME = ThemeType.Core;
 var getThemeClass = function getThemeClass(theme) {
@@ -7853,91 +7881,274 @@ var PageHeading = function PageHeading(_ref) {
 };
 
 var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
-var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  position: relative;\n  display: flex;\n  background: var(--base-color-black);\n\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n  }\n"])), devices.mobile);
-var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  img {\n    width: 100%;\n    filter: brightness(0.7);\n    opacity: 0.95;\n  }\n\n  @media ", " {\n    height: fit-content;\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n\n    img {\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile);
-var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  align-self: center;\n  width: 100%;\n  z-index: ", ";\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content min-content;\n  grid-template-areas:\n    '. . . . . logo logo logo logo logo logo . . . . .'\n    '. . . text text text text text text text text text text . . .'\n    '. . . button button button button button button button button button button . . .';\n\n  @media ", " {\n    & {\n      height: 100%;\n      grid-template-rows: 1fr max-content 1fr;\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo 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  @media ", " {\n    align-content: center;\n\n    & {\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo logo logo . . .'\n        '. . text text text text text text text text text text . .'\n        '. . button button button button button button button button button button . .';\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
-var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__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 LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
-var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__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$6 || (_templateObject8$6 = /*#__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 ImpactHeaderWrapper = /*#__PURE__*/styled.header(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--color-base-black);\n  padding: 36px 0;\n\n  @media ", " {\n    padding: 21px 0;\n  }\n"])), devices.mobile);
+var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: grid;\n  grid-template-columns: ", ";\n  padding: 0 50px;\n\n  @media ", " {\n    padding: 0 50px;\n  }\n\n  @media ", " {\n    padding: 0 20px;\n    grid-template-columns: ", ";\n  }\n"])), function (_ref) {
+  var hasButton = _ref.hasButton,
+    sponsorPresent = _ref.sponsorPresent;
+  if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
+  return '1fr';
+}, devices.tablet, devices.mobile, function (_ref2) {
+  var sponsorPresent = _ref2.sponsorPresent;
+  return sponsorPresent ? '1fr 20px auto' : '1fr';
+});
+var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1;\n  display: flex;\n  align-items: center;\n  min-width: ", ";\n"])), function (_ref3) {
+  var sponsorWidth = _ref3.sponsorWidth;
+  return sponsorWidth ? sponsorWidth + "px" : 'auto';
+});
+var TitleButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    position: static;\n    margin-right: 0;\n  }\n"])), devices.mobile);
+var MobileButtonWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 20px 16px 20px;\n"])));
+var ImpactTitle = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  align-self: center;\n  grid-column: ", ";\n  min-width: 0;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 2;\n  max-height: calc(48px * 2);\n  text-align: center;\n  padding-bottom: 2px;\n\n  @media ", " {\n    grid-column: 1;\n    -webkit-line-clamp: 4;\n    max-height: calc(34px * 4);\n    text-align: left;\n  }\n"])), function (_ref4) {
+  var hasColumns = _ref4.hasColumns;
+  return hasColumns ? '3' : '1';
+}, devices.mobile);
+var ImpactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  aspect-ratio: 21 / 9;\n  height: auto;\n  &::before {\n    content: '';\n    display: block;\n    padding-top: calc(9 / 21 * 100%);\n  }\n\n  > picture,\n  img,\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n  img {\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: cover;\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: cover;\n    }\n  }\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    &::before {\n      padding-top: 100%;\n    }\n    max-height: 100vh;\n    img {\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile, devices.mobile);
+var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 5;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  z-index: ", ";\n  min-width: ", ";\n\n  @media ", " {\n    grid-column: 3;\n    justify-content: flex-start;\n    min-width: unset;\n  }\n"])), zIndexes.sponsorship, function (_ref5) {
+  var buttonWidth = _ref5.buttonWidth;
+  return buttonWidth ? buttonWidth + "px" : 'auto';
+}, devices.mobile);
+
+var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q;
+var VideoPlayButton$1 = /*#__PURE__*/styled.button(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80px;\n  height: 80px;\n  background-color: var(--color-base-transparent);\n  border: none;\n  cursor: pointer;\n\n  @media ", " {\n    width: 60px;\n    height: 60px;\n  }\n"])), devices.mobile);
+var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])));
+var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 20px;\n\n  @media ", " {\n    margin: 20px 4px;\n  }\n"])), devices.mobile);
+var LeftWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+
+var VideoControlsImpact = function VideoControlsImpact(_ref) {
+  var videoElementId = _ref.videoElementId,
+    _ref$loop = _ref.loop,
+    loop = _ref$loop === void 0 ? false : _ref$loop;
+  var _React$useState = React__default.useState(false),
+    playing = _React$useState[0],
+    setPlaying = _React$useState[1];
+  var getVideoElement = function getVideoElement() {
+    return document.querySelector("#" + videoElementId);
+  };
+  React__default.useEffect(function () {
+    var video = getVideoElement();
+    if (video) {
+      video.loop = loop;
+    }
+  }, [loop]);
+  var handlePlay = React__default.useCallback(function () {
+    var video = getVideoElement();
+    if (!video) return;
+    if (playing) {
+      video.pause();
+      setPlaying(false);
+    } else {
+      video == null || video.play();
+      setPlaying(true);
+    }
+  }, [playing]);
+  return /*#__PURE__*/React__default.createElement(VideoControlsWrapper$1, {
+    className: "video-controls-container"
+  }, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper$1, null, /*#__PURE__*/React__default.createElement(LeftWrapper$1, null, /*#__PURE__*/React__default.createElement(VideoPlayButton$1, {
+    id: "play",
+    onClick: handlePlay,
+    className: "video-play-button",
+    "data-testid": "video-play-button",
+    "aria-label": !playing ? 'Play' : 'Pause'
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: !playing ? 'Play' : 'Pause',
+    color: "white"
+  })))));
+};
 
 var _excluded$k = ["text"];
-var PageHeadingImpact = function PageHeadingImpact(_ref) {
-  var children = _ref.children,
-    text = _ref.text,
-    link = _ref.link,
-    _ref$sponsor = _ref.sponsor,
-    sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
-    customSponsorImage = _ref.customSponsorImage,
-    scrollHref = _ref.scrollHref,
-    bgUrlDesktop = _ref.bgUrlDesktop,
-    bgUrlDevice = _ref.bgUrlDevice,
-    _ref$bgImageAltText = _ref.bgImageAltText,
-    bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
-    _ref$semanticLevel = _ref.semanticLevel,
-    semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
-  var truncatedText = text == null ? void 0 : text.substring(0, 75);
-  var _ref2 = link || {},
-    linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
-  return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
-    bgUrlDesktop: bgUrlDesktop,
-    bgUrlDevice: bgUrlDevice,
-    "data-testid": "impact-wrapper"
-  }, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
-    "data-testid": "impact-sponsor"
-  }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
-    "data-testid": "impact-custom-sponsor"
-  }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderImageWrapper, null, /*#__PURE__*/React__default.createElement("picture", {
+var CHAR_LIMIT = 100;
+var useResponsiveVideo = function useResponsiveVideo(video, poster) {
+  var mobileVideo = video.mobile || video.desktop;
+  var desktopVideo = video.desktop || video.mobile;
+  var mobilePoster = poster.mobile || poster.desktop;
+  var desktopPoster = poster.desktop || poster.mobile;
+  var _useState = useState(desktopPoster),
+    posterUrl = _useState[0],
+    setPoster = _useState[1];
+  var _useState2 = useState(desktopVideo),
+    videoUrl = _useState2[0],
+    setVideoUrl = _useState2[1];
+  var isMobile = useMobile();
+  useEffect(function () {
+    setPoster(isMobile ? mobilePoster : desktopPoster);
+    setVideoUrl(isMobile ? mobileVideo : desktopVideo);
+  }, [isMobile]);
+  return {
+    posterUrl: posterUrl,
+    videoUrl: videoUrl
+  };
+};
+var VideoWithControls = function VideoWithControls(_ref) {
+  var video = _ref.video,
+    poster = _ref.poster;
+  var _useResponsiveVideo = useResponsiveVideo(video, poster),
+    posterUrl = _useResponsiveVideo.posterUrl,
+    videoUrl = _useResponsiveVideo.videoUrl;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
+    id: video.elementId,
+    width: "100%",
+    height: "100%",
+    poster: posterUrl,
+    src: videoUrl,
+    "data-testid": "impact-video",
+    playsInline: true
+  }, /*#__PURE__*/React__default.createElement("source", {
+    src: videoUrl
+  }), /*#__PURE__*/React__default.createElement("img", {
+    src: posterUrl,
+    alt: poster.alt,
+    "data-testid": "impact-image"
+  })), /*#__PURE__*/React__default.createElement(VideoControlsImpact, {
+    loop: true,
+    videoElementId: video.elementId
+  }));
+};
+var ImpactHeaderImage = function ImpactHeaderImage(_ref2) {
+  var mobile = _ref2.mobile,
+    desktop = _ref2.desktop,
+    alt = _ref2.alt;
+  return /*#__PURE__*/React__default.createElement("picture", {
     "data-testid": "impact-picture"
-  }, bgUrlDevice && (/*#__PURE__*/React__default.createElement("source", {
-    srcSet: bgUrlDevice,
+  }, mobile && /*#__PURE__*/React__default.createElement("source", {
+    srcSet: mobile,
     media: "" + devices.mobile,
     "data-testid": "impact-mobile-image-source"
-  })), /*#__PURE__*/React__default.createElement("source", {
-    srcSet: bgUrlDesktop,
+  }), /*#__PURE__*/React__default.createElement("source", {
+    srcSet: desktop,
     media: "" + devices.desktop,
     "data-testid": "impact-desktop-image-source"
   }), /*#__PURE__*/React__default.createElement("img", {
-    src: bgUrlDesktop,
-    alt: bgImageAltText,
+    src: desktop,
+    alt: alt,
     "data-testid": "impact-image"
-  }))), /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
-    "data-testid": "impact-logo"
-  }, children) : null, text ? (/*#__PURE__*/React__default.createElement(TextWrapper$1, {
-    "data-testid": "impact-text"
-  }, /*#__PURE__*/React__default.createElement(Header, {
-    level: 3,
-    semanticLevel: semanticLevel
-  }, truncatedText))) : null, link ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
+  }));
+};
+var ImpactHeaderVideo = function ImpactHeaderVideo(_ref3) {
+  var video = _ref3.video,
+    poster = _ref3.poster;
+  if (!video.desktop && !video.mobile) {
+    return /*#__PURE__*/React__default.createElement(ImpactHeaderImage, Object.assign({}, poster));
+  }
+  return /*#__PURE__*/React__default.createElement(VideoWithControls, {
+    video: video,
+    poster: poster
+  });
+};
+var useElementWidth = function useElementWidth() {
+  var _React$useState = React__default.useState(undefined),
+    width = _React$useState[0],
+    setWidth = _React$useState[1];
+  var observerRef = React__default.useRef(null);
+  var ref = React__default.useCallback(function (node) {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (!node) return;
+    observerRef.current = new ResizeObserver(function () {
+      setWidth(node.offsetWidth);
+    });
+    observerRef.current.observe(node);
+  }, []);
+  return [ref, width];
+};
+var PageHeadingImpact = function PageHeadingImpact(_ref4) {
+  var text = _ref4.text,
+    link = _ref4.link,
+    _ref4$sponsor = _ref4.sponsor,
+    sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
+    customSponsorImage = _ref4.customSponsorImage,
+    bgUrlDesktop = _ref4.bgUrlDesktop,
+    bgUrlDevice = _ref4.bgUrlDevice,
+    _ref4$bgImageAltText = _ref4.bgImageAltText,
+    bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
+    videoUrlDesktop = _ref4.videoUrlDesktop,
+    videoUrlMobile = _ref4.videoUrlMobile,
+    className = _ref4.className;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile,
+    hydrated = _useViewport.hydrated;
+  var _useElementWidth = useElementWidth(),
+    buttonRef = _useElementWidth[0],
+    buttonWidth = _useElementWidth[1];
+  var _useElementWidth2 = useElementWidth(),
+    sponsorRef = _useElementWidth2[0],
+    sponsorWidth = _useElementWidth2[1];
+  var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
+  var _ref5 = link || {},
+    linkText = _ref5.text,
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
+  var video = {
+    elementId: 'impact-header-video',
+    desktop: videoUrlDesktop,
+    mobile: videoUrlMobile
+  };
+  var poster = {
+    desktop: bgUrlDesktop,
+    mobile: bgUrlDevice,
+    alt: bgImageAltText
+  };
+  var sponsorContent = sponsor ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
+    "data-testid": customSponsorImage ? 'impact-custom-sponsor' : undefined
+  }, customSponsorImage != null ? customSponsorImage : {}))) : null;
+  var hasButton = !isMobile && !!(link && linkText);
+  var showSideColumns = hasButton || !!sponsor;
+  var showTitleBar = !!(text || hasButton || sponsor);
+  var renderSponsor = function renderSponsor() {
+    if (isMobile) {
+      if (!sponsorContent) return null;
+      return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
+        "data-testid": "impact-sponsor"
+      }, sponsorContent);
+    }
+    if (!showSideColumns) return null;
+    return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
+      ref: sponsorRef,
+      buttonWidth: buttonWidth,
+      "data-testid": "impact-sponsor"
+    }, sponsorContent);
+  };
+  if (!hydrated) return null;
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
+    theme: ThemeType.Cinema
+  }, showTitleBar ? (/*#__PURE__*/React__default.createElement(ImpactHeaderWrapper, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(ImpactTitleWrapper, {
+    "data-testid": "impact-title-wrapper",
+    sponsorPresent: !!sponsor,
+    hasButton: hasButton
+  }, !isMobile && showSideColumns ? (/*#__PURE__*/React__default.createElement(TitleButtonWrapper, {
+    sponsorWidth: sponsorWidth
+  }, hasButton ? (/*#__PURE__*/React__default.createElement(TitleButton, Object.assign({
+    ref: buttonRef
+  }, restLink, {
     "data-testid": "impact-link"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null), scrollHref ? (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
-    "data-testid": "impact-scroll-link"
-  }, /*#__PURE__*/React__default.createElement(TabLink, {
-    iconName: "Arrow",
-    iconDirection: "down",
-    href: scrollHref,
-    color: ThemeColor['base-white'],
-    hoverColor: ThemeColor['base-white']
-  }, "Scroll Down"))) : null);
+  }), linkText)) : null)) : null, text ? (/*#__PURE__*/React__default.createElement(ImpactTitle, {
+    size: "large",
+    color: "white",
+    hasColumns: !isMobile && showSideColumns
+  }, truncatedText)) : null, renderSponsor()))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderAssetWrapper, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(ImpactHeaderVideo, {
+    video: video,
+    poster: poster
+  }), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
 };
 
-var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q, _templateObject5$l;
-var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
+var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$l;
+var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return "\n    background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n    color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n  ";
 }, devices.mobileAndTablet);
-var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0px 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
+var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0px 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
   var hasImage = _ref2.hasImage;
   return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
 }, devices.mobileAndTablet, function (_ref3) {
   var hasImage = _ref3.hasImage;
   return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
 });
-var RightPanel = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--base-color-black);\n\n  @media ", " {\n    grid-area: 2 / 1 / 3 / 15;\n  }\n"])), devices.mobileAndTablet);
-var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px;\n  max-height: 33vw;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
-var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\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\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+var RightPanel = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--base-color-black);\n\n  @media ", " {\n    grid-area: 2 / 1 / 3 / 15;\n  }\n"])), devices.mobileAndTablet);
+var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px;\n  max-height: 33vw;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
+var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\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\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 
 var PageHeadingPanel = function PageHeadingPanel(_ref) {
   var _image$src, _image$alt;
@@ -7951,7 +8162,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
     "data-testid": "wrapper"
   }, /*#__PURE__*/React__default.createElement(LeftPanel, {
     hasImage: hasImage
-  }, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
+  }, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
     "data-testid": "scroll-link"
   }, /*#__PURE__*/React__default.createElement(TabLink, {
     iconName: "Arrow",
@@ -7967,11 +8178,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   })))));
 };
 
-var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
-var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__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$v || (_templateObject3$v = /*#__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$r || (_templateObject4$r = /*#__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);
+var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
+var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__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$w || (_templateObject3$w = /*#__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$s || (_templateObject4$s = /*#__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);
 var ContentSection = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--heading-promo-bg-color);\n  border-bottom: ", ";\n  display: ", ";\n\n  @media ", " {\n    padding: 12px 0 20px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
@@ -8181,7 +8392,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
   })))))))))));
 };
 
-var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s;
+var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t;
 var GRID = {
   desktop: {
     leftWithImage: '1 / 1 / 3 / 7',
@@ -8194,19 +8405,19 @@ var GRID = {
     right: '2 / 1 / 3 / 15'
   }
 };
-var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  background-color: ", ";\n  color: var(--color-base-white);\n"])), function (_ref) {
+var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  background-color: ", ";\n  color: var(--color-base-white);\n"])), function (_ref) {
   var $background = _ref.$background;
   return "var(--color-" + $background + ")";
 });
-var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
+var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
   var hasImage = _ref2.hasImage;
   return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
 }, devices.mobileAndTablet, function (_ref3) {
   var hasImage = _ref3.hasImage;
   return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
 });
-var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--color-base-black);\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
-var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px 36px 36px 50px;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px 5px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
+var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--color-base-black);\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
+var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px 36px 36px 50px;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px 5px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
 
 var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
   var _image$src, _image$alt;
@@ -8229,10 +8440,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
   })))));
 };
 
-var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
-var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$V || (_templateObject$V = /*#__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$J || (_templateObject2$J = /*#__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$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
+var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
+var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__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$K || (_templateObject2$K = /*#__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$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__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);
 var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
@@ -8343,7 +8554,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
 };
 
 var _excluded$l = ["text"];
-var useResponsiveVideo = function useResponsiveVideo(video, poster) {
+var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
   var mobilePoster = poster.mobile || poster.desktop;
@@ -8364,10 +8575,10 @@ var useResponsiveVideo = function useResponsiveVideo(video, poster) {
     videoUrl: videoUrl
   };
 };
-var VideoWithControls = function VideoWithControls(_ref) {
+var VideoWithControls$1 = function VideoWithControls(_ref) {
   var video = _ref.video,
     poster = _ref.poster;
-  var _useResponsiveVideo = useResponsiveVideo(video, poster),
+  var _useResponsiveVideo = useResponsiveVideo$1(video, poster),
     posterUrl = _useResponsiveVideo.posterUrl,
     videoUrl = _useResponsiveVideo.videoUrl;
   var isIOS = useIOS();
@@ -8420,7 +8631,7 @@ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
   if (!video.desktop && !video.mobile) {
     return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
   }
-  return /*#__PURE__*/React__default.createElement(VideoWithControls, {
+  return /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
     video: video,
     poster: poster
   });
@@ -8483,11 +8694,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   }), linkText))))));
 };
 
-var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
-var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--color-base-black);\n  color: var(--color-base-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
-var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h1 {\n    margin: 0 0 8px 0;\n  }\n  p {\n    text-transform: uppercase;\n  }\n"])));
-var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.mobile);
-var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: ", ";\n      width: 100%;\n      padding: 20px;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject4$u, _templateObject5$o, _templateObject6$h, _templateObject7$d;
+var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--color-base-black);\n  color: var(--color-base-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
+var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h1 {\n    margin: 0 0 8px 0;\n  }\n  p {\n    text-transform: uppercase;\n  }\n"])));
+var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.mobile);
+var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: ", ";\n      width: 100%;\n      padding: 20px;\n    }\n  }\n"])), function (_ref) {
   var hasImages = _ref.hasImages;
   return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
 }, devices.mobile, function (_ref2) {
@@ -8562,10 +8773,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
   }))))));
 };
 
-var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
-var linkButtonStyles = /*#__PURE__*/css(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  background: none;\n  border: none;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n\n  span {\n    height: 1.5em;\n    width: 1.5em;\n\n    svg > path {\n      fill: var(--color-base-black);\n    }\n  }\n\n  &:hover {\n    outline: none;\n  }\n"])));
-var PageNav = /*#__PURE__*/styled.a(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
-var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
+var _templateObject$Y, _templateObject2$M, _templateObject3$A, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
+var linkButtonStyles = /*#__PURE__*/css(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  background: none;\n  border: none;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n\n  span {\n    height: 1.5em;\n    width: 1.5em;\n\n    svg > path {\n      fill: var(--color-base-black);\n    }\n  }\n\n  &:hover {\n    outline: none;\n  }\n"])));
+var PageNav = /*#__PURE__*/styled.a(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
+var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
 var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  min-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: 0 auto;\n\n  li {\n    margin-left: 24px;\n    color: var(--color-base-black);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  li:first-child {\n    margin-left: 0px;\n  }\n"])));
 var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
 var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
@@ -8721,19 +8932,19 @@ var Pagination = function Pagination(_ref) {
   }))))));
 };
 
-var _templateObject$Y;
-var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 40px 36px;\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: ", ";\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
+var _templateObject$Z;
+var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 40px 36px;\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: ", ";\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
   var $largeDesktopColumns = _ref.$largeDesktopColumns;
   return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
 });
 
-var _templateObject$Z, _templateObject2$M;
-var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n  }\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
-var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-base-dark-grey);\n  }\n  overflow-wrap: break-word;\n  padding-bottom: 4px;\n"])));
-
 var _templateObject$_, _templateObject2$N;
-var PersonLink = /*#__PURE__*/styled.a(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n  text-underline-offset: 6px;\n\n  && {\n    color: var(--color-primary-black);\n\n    :hover {\n      color: var(--color-rbo-black-hovered);\n      :after {\n        color: var(--color-primary-black);\n      }\n    }\n\n    :visited {\n      color: var(--color-primary-black);\n    }\n  }\n"])));
-var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--base-color-dark-grey);\n  }\n"])));
+var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n  }\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
+var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-base-dark-grey);\n  }\n  overflow-wrap: break-word;\n  padding-bottom: 4px;\n"])));
+
+var _templateObject$$, _templateObject2$O;
+var PersonLink = /*#__PURE__*/styled.a(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n  text-underline-offset: 6px;\n\n  && {\n    color: var(--color-primary-black);\n\n    :hover {\n      color: var(--color-rbo-black-hovered);\n      :after {\n        color: var(--color-primary-black);\n      }\n    }\n\n    :visited {\n      color: var(--color-primary-black);\n    }\n  }\n"])));
+var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--base-color-dark-grey);\n  }\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -8756,7 +8967,7 @@ var PersonDetails = function PersonDetails(_ref) {
   var _role$people;
   var role = _ref.role,
     className = _ref.className;
-  return /*#__PURE__*/React__default.createElement(TextWrapper$2, {
+  return /*#__PURE__*/React__default.createElement(TextWrapper$1, {
     className: className
   }, /*#__PURE__*/React__default.createElement(RoleContent, {
     title: "role",
@@ -8772,9 +8983,9 @@ var PersonDetails = function PersonDetails(_ref) {
   })));
 };
 
-var _templateObject$$, _templateObject2$O;
-var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 82px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 16px;\n"])));
-var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n    filter: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$10, _templateObject2$P;
+var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 82px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 16px;\n"])));
+var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n    filter: ", ";\n  }\n"])), function (_ref) {
   var greyscale = _ref.greyscale;
   return greyscale ? 'grayscale(100%)' : 'none';
 });
@@ -8823,14 +9034,14 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$10, _templateObject2$P, _templateObject3$A, _templateObject4$u;
-var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
-var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$P || (_templateObject2$P = /*#__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 _templateObject$11, _templateObject2$Q, _templateObject3$B, _templateObject4$v;
+var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$Q || (_templateObject2$Q = /*#__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)";
 }, devices.mobile, devices.tablet);
-var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
+var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
 
 // Get the total character length of a property in an array of objects
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -8919,7 +9130,7 @@ var CreditListing = function CreditListing(_ref) {
       columnSpanSmallDevice: 1,
       key: "credit-entry-" + name + "-" + index,
       "data-testid": "credit-entry"
-    }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
+    }, /*#__PURE__*/React__default.createElement(TextWrapper$1, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
       title: "role",
       "data-roh": dataROH
     }, /*#__PURE__*/React__default.createElement(Overline, {
@@ -8957,8 +9168,8 @@ var CreditListing = function CreditListing(_ref) {
   }, creditEntries);
 };
 
-var _templateObject$11;
-var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: 0.4px;\n  color: var(--color-base-white);\n  border-bottom: unset;\n  text-decoration: underline;\n  text-underline-offset: var(--harmonic-text-link-underline-offset);\n  margin-bottom: 0;\n  padding-bottom: 0;\n"])));
+var _templateObject$12;
+var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: 0.4px;\n  color: var(--color-base-white);\n  border-bottom: unset;\n  text-decoration: underline;\n  text-underline-offset: var(--harmonic-text-link-underline-offset);\n  margin-bottom: 0;\n  padding-bottom: 0;\n"])));
 
 var PolicyLinks = function PolicyLinks(_ref) {
   var items = _ref.items;
@@ -8976,14 +9187,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
   }));
 };
 
-var _templateObject$12, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject$13, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 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$12 || (_templateObject$12 = /*#__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$13 || (_templateObject$13 = /*#__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) {
@@ -8993,7 +9204,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templa
   var asCard = _ref3.asCard;
   return asCard ? "\n    grid-template-areas: " + GridTemplateAsCard + ";\n    @media " + devices.tablet + " {\n      grid-template-areas: " + GridTemplateAsCardTablet + ";\n    }\n  " : "";
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref4) {
+var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref4) {
   var hasTextLinks = _ref4.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
 }, function (_ref5) {
@@ -9017,7 +9228,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$B || (_templat
   }
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref7) {
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref7) {
   var marginBottom = _ref7.marginBottom;
   return marginBottom + "px";
 }, function (_ref8) {
@@ -9057,7 +9268,7 @@ var _excluded$m = ["text"],
   _excluded3$1 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_TEXT$1 = 28;
-var LENGTH_TEXT_PARAGRAPH = 130;
+var LENGTH_TEXT_PARAGRAPH = 185;
 var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -9248,25 +9459,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$13, _templateObject2$Q, _templateObject3$C, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
+var _templateObject$14, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__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$14 || (_templateObject$14 = /*#__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) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
 }, devices.mobile);
-var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
+var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
+var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 24px;\n  }\n"])), devices.mobile);
+var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 24px;\n  }\n"])), devices.mobile);
 var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
 var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$k || (_templateObject6$k = /*#__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$g || (_templateObject7$g = /*#__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) {
@@ -9291,8 +9502,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
   return '';
 });
 
-var _templateObject$14;
-var VideoContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__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$15;
+var VideoContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__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;
@@ -9323,7 +9534,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
   return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
 };
 
-var VideoWithControls$1 = function VideoWithControls(_ref) {
+var VideoWithControls$2 = function VideoWithControls(_ref) {
   var video = _ref.video,
     settings = _ref.settings;
   var videoRef = useRef(null);
@@ -9398,7 +9609,7 @@ var PromoChild = function PromoChild(_ref) {
   }, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: AspectRatio['4:3'],
     "data-testid": "AspectRatioWrapper"
-  }, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
+  }, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
     video: children,
     settings: videoSettings
   }));
@@ -9461,7 +9672,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     size: titleSize,
     hierarchy: titleHierarchy
   }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
-    size: "medium"
+    size: "small"
   }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
     size: "large",
     dangerouslySetInnerHTML: {
@@ -9474,8 +9685,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$15;
-var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
+var _templateObject$16;
+var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -9530,9 +9741,9 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var _templateObject$16, _templateObject2$R, _templateObject3$D;
-var Container$3 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
+var _templateObject$17, _templateObject2$S, _templateObject3$E;
+var Container$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__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';
   return 'column';
@@ -9540,7 +9751,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObjec
   var gap = _ref2.gap;
   return gap + "px";
 });
-var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
+var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
   var darkMode = _ref3.darkMode;
   if (darkMode) return 'var(--base-color-white)';
   return 'var(--base-color-errorstate)';
@@ -9617,10 +9828,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error))));
 };
 
-var _templateObject$17, _templateObject2$S, _templateObject3$E;
-var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__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$S || (_templateObject2$S = /*#__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$E || (_templateObject3$E = /*#__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);
+var _templateObject$18, _templateObject2$T, _templateObject3$F;
+var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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$T || (_templateObject2$T = /*#__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$F || (_templateObject3$F = /*#__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);
 
 /* eslint-disable react/no-danger */
 var StatusBanner = function StatusBanner(_ref) {
@@ -9676,8 +9887,8 @@ var StatusBanner = function StatusBanner(_ref) {
   return null;
 };
 
-var _templateObject$18;
-var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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    margin-block-start: 0;\n  }\n"])), devices.mobile);
+var _templateObject$19;
+var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__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    margin-block-start: 0;\n  }\n"])), devices.mobile);
 
 /* ~~~~~~~ new harmonic types ~~~~~~~ */
 var HarmonicSize = {
@@ -9719,8 +9930,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
 
-var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
-var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /*#__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$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
+var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /*#__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) {
@@ -9730,12 +9941,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/css(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.darkgrey;
 });
-var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
 var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
   var theme = _ref5.theme;
   return {
@@ -10100,9 +10311,9 @@ function Select(_ref3) {
   })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
-var Container$4 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__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\n  .harmonic-select__control--is-focused {\n    border-color: var(--color-base-dark-grey);\n    box-shadow: ", ";\n  }\n\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--color-primary-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\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-sans);\n    font-weight: 400;\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n\n    @media ", " {\n      font-size: 17px;\n    }\n  }\n\n  .harmonic-select__placeholder {\n    color: var(--color-primary-black);\n  }\n\n  .harmonic-select__single-value {\n    color: var(--color-primary-black);\n  }\n\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--color-base-light-grey);\n      background: var(--color-base-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--color-base-dark-grey);\n    }\n  }\n\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--color-base-mid-grey);\n  }\n\n  .harmonic-select__menu-list {\n    padding: 10px 0;\n  }\n\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-sans);\n    font-weight: 400;\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n    color: var(--color-primary-black);\n\n    @media ", " {\n      font-size: 17px;\n    }\n\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--color-base-light-grey);\n    }\n  }\n\n  .harmonic-select__option--is-selected {\n    color: var(--color-primary-black);\n    background: none;\n  }\n\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    color: var(--color-primary-black);\n  }\n\n  .harmonic-select__menu-notice {\n    color: var(--color-primary-black);\n    padding: 20px 20px;\n    text-align: left;\n  }\n\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
+var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
+var Container$4 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__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\n  .harmonic-select__control--is-focused {\n    border-color: var(--color-base-dark-grey);\n    box-shadow: ", ";\n  }\n\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--color-primary-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\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-sans);\n    font-weight: 400;\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n\n    @media ", " {\n      font-size: 17px;\n    }\n  }\n\n  .harmonic-select__placeholder {\n    color: var(--color-primary-black);\n  }\n\n  .harmonic-select__single-value {\n    color: var(--color-primary-black);\n  }\n\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--color-base-light-grey);\n      background: var(--color-base-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--color-base-dark-grey);\n    }\n  }\n\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--color-base-mid-grey);\n  }\n\n  .harmonic-select__menu-list {\n    padding: 10px 0;\n  }\n\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-sans);\n    font-weight: 400;\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n    color: var(--color-primary-black);\n\n    @media ", " {\n      font-size: 17px;\n    }\n\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--color-base-light-grey);\n    }\n  }\n\n  .harmonic-select__option--is-selected {\n    color: var(--color-primary-black);\n    background: none;\n  }\n\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    color: var(--color-primary-black);\n  }\n\n  .harmonic-select__menu-notice {\n    color: var(--color-primary-black);\n    padding: 20px 20px;\n    text-align: left;\n  }\n\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + "px";
@@ -10119,12 +10330,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateOb
   if (darkMode) return "0 0 0 1px var(--color-state-medium)";
   return "0 0 0 3px var(--base-color-lapislazuli)";
 }, devices.mobile, devices.mobile);
-var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n\n  @media ", " {\n    margin: 0 0 12px;\n  }\n"])), function (_ref5) {
+var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n\n  @media ", " {\n    margin: 0 0 12px;\n  }\n"])), function (_ref5) {
   var darkMode = _ref5.darkMode;
   if (darkMode) return "var(--color-base-white)";
   return "var(--color-primary-black)";
 }, devices.mobile);
-var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
+var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
   var darkMode = _ref6.darkMode;
   if (darkMode) return "var(--color-base-white)";
   return "var(--color-state-error)";
@@ -10243,10 +10454,10 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
 
-var _templateObject$1b, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
-var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-light-grey);\n  padding: 40px 20px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  align-items: stretch;\n"])));
-var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: var(--upsell-border-color);\n  padding: 6px 8px;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n\n  && {\n    color: var(--color-base-white);\n  }\n\n  font-feature-settings:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    'calt' off;\n  text-align: center;\n"])));
-var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  padding-top: 10px;\n  width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media ", " {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  ", "\n\n  @media ", ", ", " {\n    a {\n      text-align: center;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$1c, _templateObject3$I, _templateObject4$A, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
+var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-light-grey);\n  padding: 40px 20px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  align-items: stretch;\n"])));
+var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: var(--upsell-border-color);\n  padding: 6px 8px;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n\n  && {\n    color: var(--color-base-white);\n  }\n\n  font-feature-settings:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    'calt' off;\n  text-align: center;\n"])));
+var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  padding-top: 10px;\n  width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media ", " {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  ", "\n\n  @media ", ", ", " {\n    a {\n      text-align: center;\n    }\n  }\n"])), function (_ref) {
   var stackCtasEarly = _ref.stackCtasEarly;
   return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
 }, function (_ref2) {
@@ -10349,8 +10560,8 @@ var UpsellCard = function UpsellCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
 };
 
-var _templateObject$1c, _templateObject2$V, _templateObject3$I;
-var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: table;\n  width: auto;\n  margin: 0;\n\n  ", " {\n    width: 100%;\n\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
+var _templateObject$1d, _templateObject2$W, _templateObject3$J;
+var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: table;\n  width: auto;\n  margin: 0;\n\n  ", " {\n    width: 100%;\n\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;
@@ -10360,8 +10571,8 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1c || (_templateObjec
     height = _ref2.height;
   return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
 });
-var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: table-caption;\n  caption-side: bottom;\n  margin-top: var(--carousel-image-caption-margin);\n"])));
-var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-clamp: 2;\n  max-height: 46px;\n  white-space: normal;\n  word-break: break-word;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n"])));
+var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: table-caption;\n  caption-side: bottom;\n  margin-top: var(--carousel-image-caption-margin);\n"])));
+var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-clamp: 2;\n  max-height: 46px;\n  white-space: normal;\n  word-break: break-word;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n"])));
 
 var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
 var ImageWithCaption = function ImageWithCaption(_ref) {
@@ -10394,11 +10605,11 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   }, caption))));
 };
 
-var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u, _templateObject6$n;
-var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__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$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var StyledImage = /*#__PURE__*/styled.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
-var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u, _templateObject6$n;
+var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__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$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
+var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
 
@@ -10438,14 +10649,14 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
-var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__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$X || (_templateObject2$X = /*#__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$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
+var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
+var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__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$Y || (_templateObject2$Y = /*#__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$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
+var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
@@ -10530,11 +10741,11 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
 
-var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w;
-var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled.ul(_templateObject2$Y || (_templateObject2$Y = /*#__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$L || (_templateObject3$L = /*#__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$C || (_templateObject4$C = /*#__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) {
+var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$w;
+var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled.ul(_templateObject2$Z || (_templateObject2$Z = /*#__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$M || (_templateObject3$M = /*#__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$D || (_templateObject4$D = /*#__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) {
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
 }, Colors.MidGrey);
@@ -10694,14 +10905,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o;
-var Container$5 = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
-var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o;
+var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   return "var(--base-color-" + color + ")";
 });
-var BottomLine = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
+var BottomLine = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
 var Text = /*#__PURE__*/styled.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
@@ -10788,11 +10999,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
-var TableContainer = /*#__PURE__*/styled.table(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
-var Container$6 = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
-var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableHeader = /*#__PURE__*/styled.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  text-transform: capitalize;\n  border: 1px solid var(--color-primary-black);\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    min-width: 150px;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
+var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
+var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var Container$6 = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var TableHeader = /*#__PURE__*/styled.th(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  text-transform: capitalize;\n  border: 1px solid var(--color-primary-black);\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    min-width: 150px;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
 var TableCell = /*#__PURE__*/styled.td(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  vertical-align: middle;\n  border: 1px solid var(--color-primary-black);\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    min-width: 150px;\n  }\n"])), function (props) {
@@ -11003,22 +11214,22 @@ var Table = function Table(_ref) {
   }))));
 };
 
-var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
-var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
+var _templateObject$1j, _templateObject2$10, _templateObject3$P, _templateObject4$G, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
+var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1j || (_templateObject$1j = /*#__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) {
   var theme = _ref2.theme;
   return "var(--color-" + theme + ")";
 });
-var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
-var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--color-base-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
-var Error = /*#__PURE__*/styled.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--color-base-errorstate);\n\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
+var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
+var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--color-base-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
+var Error = /*#__PURE__*/styled.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--color-base-errorstate);\n\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
 var Form = /*#__PURE__*/styled.form(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error);
 var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$q || (_templateObject6$q = /*#__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$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
 var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  @media ", " {\n    text-decoration: underline;\n  }\n"])), devices.mobile);
-var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$9 || (_templateObject9$9 = /*#__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$2 = /*#__PURE__*/styled.div(_templateObject9$9 || (_templateObject9$9 = /*#__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$8 || (_templateObject0$8 = /*#__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 = /*#__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"])));
@@ -11046,7 +11257,9 @@ var themeToColor = function themeToColor(theme) {
 var SignUpTitle = function SignUpTitle(_ref) {
   var title = _ref.title,
     _ref$isMobile = _ref.isMobile,
-    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
+    _ref$titleFontFamily = _ref.titleFontFamily,
+    titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
   return /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 10,
@@ -11055,7 +11268,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
   }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
     color: "black",
     hierarchy: "h3",
-    serif: true,
+    serif: titleFontFamily === 'Victor',
     size: isMobile ? 'small' : 'medium'
   }, title)));
 };
@@ -11308,10 +11521,10 @@ var SignUpForm = function SignUpForm(_ref) {
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "small"
-  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
     onClick: handleFormSubmit,
     theme: theme
-  })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+  })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
     onClick: handleFormSubmit,
     theme: theme
   })), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
@@ -11428,12 +11641,12 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
   }))))));
 };
 
-var _templateObject$1j, _templateObject2$10, _templateObject4$G, _templateObject5$A;
-var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1j || (_templateObject$1j = /*#__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  border-bottom: 1px solid var(--color-base-light-grey);\n\n  ", "\n\n  @media ", " {\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, function (_ref) {
+var _templateObject$1k, _templateObject2$11, _templateObject4$H, _templateObject5$A;
+var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1k || (_templateObject$1k = /*#__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  border-bottom: 1px solid var(--color-base-light-grey);\n\n  ", "\n\n  @media ", " {\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, function (_ref) {
   var withShadow = _ref.withShadow;
-  return withShadow && css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 }, devices.mobile);
-var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$G || (_templateObject4$G = /*#__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 CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$H || (_templateObject4$H = /*#__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$2 = /*#__PURE__*/styled.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 
 var defaultGrid = {
@@ -11492,12 +11705,12 @@ var AnchorBar = function AnchorBar(_ref) {
   return null;
 };
 
-var _templateObject$1k, _templateObject2$11;
-var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  &:not(:active):not(:focus) {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n\n  @media ", " {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    width: 80px;\n    height: 44px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: auto;\n    color: transparent;\n    background: transparent;\n    opacity: 0;\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n"])), function (_ref) {
+var _templateObject$1l, _templateObject2$12;
+var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  &:not(:active):not(:focus) {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n\n  @media ", " {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    width: 80px;\n    height: 44px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: auto;\n    color: transparent;\n    background: transparent;\n    opacity: 0;\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n"])), function (_ref) {
   var hide = _ref.hide;
   return hide && "display: none;";
 }, devices.mobileAndTablet);
-var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 29px 50px;\n  display: inline-block;\n  width: 100%;\n  height: fit-content;\n  border-bottom: solid 2px var(--color-base-light-grey);\n  overflow: hidden;\n  &:not(:has(div:focus)) {\n    position: absolute;\n    border-bottom: 0;\n    padding: 0;\n  }\n  @media ", " {\n    border-bottom: 0;\n    position: absolute;\n    padding: 0;\n  }\n"])), devices.mobileAndTablet);
+var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 29px 50px;\n  display: inline-block;\n  width: 100%;\n  height: fit-content;\n  border-bottom: solid 2px var(--color-base-light-grey);\n  overflow: hidden;\n  &:not(:has(div:focus)) {\n    position: absolute;\n    border-bottom: 0;\n    padding: 0;\n  }\n  @media ", " {\n    border-bottom: 0;\n    position: absolute;\n    padding: 0;\n  }\n"])), devices.mobileAndTablet);
 
 /**
  * An accessible component which allows Assistive Technology users to move the focus
@@ -11589,8 +11802,8 @@ var SkipToMain = function SkipToMain(_ref) {
   }));
 };
 
-var _templateObject$1l;
-var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-black);\n  font-feature-settings: var(--font-feature-settings-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\n    font-feature-settings: var(--font-feature-settings-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: var(--color-base-black);\n    text-decoration: underline;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n    cursor: pointer;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n    &:hover {\n      color: var(--color-rbo-black-hovered);\n    }\n\n    &:active {\n      color: var(--color-rbo-black-pressed);\n    }\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  p:has(+ ul),\n  p:has(+ ol) {\n    margin-bottom: 12px;\n  }\n\n  & ul,\n  & ol {\n    padding: 0;\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  & ul li,\n  & ol li {\n    position: relative;\n    padding-left: 32px;\n    padding-top: 6px;\n    padding-bottom: 6px;\n\n    @media ", " {\n      padding-left: 28px;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    position: absolute;\n    left: 0;\n    width: 20px;\n    text-align: right;\n    margin-right: 12px;\n\n    @media ", " {\n      width: 16px;\n      margin-right: 12px;\n    }\n  }\n\n  & ol {\n    counter-reset: custom-ol;\n  }\n\n  & ol > li {\n    counter-increment: custom-ol;\n  }\n\n  & ol > li::before {\n    content: counter(custom-ol, decimal-leading-zero) '';\n    position: absolute;\n    left: 0;\n    min-width: 20px;\n    text-align: right;\n    margin-right: 12px;\n    display: inline-block;\n\n    @media ", " {\n      min-width: 16px;\n      margin-right: 12px;\n    }\n  }\n"])), devices.mobile, devices.mobile, devices.mobile);
+var _templateObject$1m;
+var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-black);\n  font-feature-settings: var(--font-feature-settings-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\n    font-feature-settings: var(--font-feature-settings-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: var(--color-base-black);\n    text-decoration: underline;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n    cursor: pointer;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n    &:hover {\n      color: var(--color-rbo-black-hovered);\n    }\n\n    &:active {\n      color: var(--color-rbo-black-pressed);\n    }\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  p:has(+ ul),\n  p:has(+ ol) {\n    margin-bottom: 12px;\n  }\n\n  & ul,\n  & ol {\n    padding: 0;\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  & ul li,\n  & ol li {\n    position: relative;\n    padding-left: 32px;\n    padding-top: 6px;\n    padding-bottom: 6px;\n\n    @media ", " {\n      padding-left: 28px;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    position: absolute;\n    left: 0;\n    width: 20px;\n    text-align: right;\n    margin-right: 12px;\n\n    @media ", " {\n      width: 16px;\n      margin-right: 12px;\n    }\n  }\n\n  & ol {\n    counter-reset: custom-ol;\n  }\n\n  & ol > li {\n    counter-increment: custom-ol;\n  }\n\n  & ol > li::before {\n    content: counter(custom-ol, decimal-leading-zero) '';\n    position: absolute;\n    left: 0;\n    min-width: 20px;\n    text-align: right;\n    margin-right: 12px;\n    display: inline-block;\n\n    @media ", " {\n      min-width: 16px;\n      margin-right: 12px;\n    }\n  }\n"])), devices.mobile, devices.mobile, devices.mobile);
 
 var addTypographyClasses = function addTypographyClasses(html) {
   return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
@@ -11625,14 +11838,9 @@ var BodyContent = function BodyContent(_ref2) {
     _ref2$renderGridItem = _ref2.renderGridItem,
     renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
   var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
-  var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
-    tag: "div",
-    size: "large",
-    "data-testid": "text-container",
+  var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
     className: textContainerClassName,
-    dangerouslySetInnerHTML: {
-      __html: addTypographyClasses(text)
-    }
+    html: text
   });
   var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
@@ -11650,20 +11858,20 @@ var BodyContent = function BodyContent(_ref2) {
   }, gridItemOrContent);
 };
 
-var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
+var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
 var color = 'primary-black';
 var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
   borderColor: color,
   hoveredColor: color,
   pressedColor: color,
   textColor: color
-})(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 35px;\n  margin-top: 33px;\n  width: fit-content;\n\n  @media ", " {\n    margin-bottom: 33px;\n    margin-top: 31px;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])), devices.mobile);
-var Container$7 = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-", ");\n  padding: 60px 59px 59px;\n\n  @media ", " {\n    padding: 35px 20px 34px;\n  }\n"])), color, devices.mobile);
-var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    margin: 27px 0;\n\n    @media ", " {\n      margin: 20px 0;\n    }\n  }\n"])), devices.mobile);
+})(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 35px;\n  margin-top: 33px;\n  width: fit-content;\n\n  @media ", " {\n    margin-bottom: 33px;\n    margin-top: 31px;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])), devices.mobile);
+var Container$7 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-", ");\n  padding: 60px 59px 59px;\n\n  @media ", " {\n    padding: 35px 20px 34px;\n  }\n"])), color, devices.mobile);
+var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    margin: 27px 0;\n\n    @media ", " {\n      margin: 20px 0;\n    }\n  }\n"])), devices.mobile);
 var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
   serif: true,
   size: 'medium'
-})(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    letter-spacing: -0.5px;\n    margin-bottom: 27px;\n\n    @media ", " {\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
+})(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    letter-spacing: -0.5px;\n    margin-bottom: 27px;\n\n    @media ", " {\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var Intro = /*#__PURE__*/styled(HarmonicSubtitle).attrs({
   size: 'large'
 })(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-bottom: 27px;\n\n    @media ", " {\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
@@ -11863,11 +12071,11 @@ var Navigation = function Navigation(_ref) {
   })))))));
 };
 
-var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject6$s, _templateObject7$m;
-var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-black);\n  color: var(--color-base-white);\n  padding: 44px 0px;\n  grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n  @media ", " {\n    padding: 40px 0px;\n    gap: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 0px;\n    row-gap: 40px;\n    grid-template-areas:\n      '. social social social social social social social social social social social social .'\n      '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n      '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n  }\n"])), devices.tablet, devices.mobile);
-var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: policy;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media ", " {\n    gap: 20px;\n  }\n\n  @media ", " {\n    gap: 12px;\n  }\n"])), devices.tablet, devices.mobile);
-var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: social;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 20px;\n\n  @media ", " {\n    gap: 40px;\n  }\n"])), devices.mobile);
-var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media ", " {\n    gap: 24px;\n  }\n"])), devices.mobile);
+var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject6$s, _templateObject7$m;
+var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-black);\n  color: var(--color-base-white);\n  padding: 44px 0px;\n  grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n  @media ", " {\n    padding: 40px 0px;\n    gap: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 0px;\n    row-gap: 40px;\n    grid-template-areas:\n      '. social social social social social social social social social social social social .'\n      '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n      '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n  }\n"])), devices.tablet, devices.mobile);
+var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: policy;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media ", " {\n    gap: 20px;\n  }\n\n  @media ", " {\n    gap: 12px;\n  }\n"])), devices.tablet, devices.mobile);
+var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: social;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 20px;\n\n  @media ", " {\n    gap: 40px;\n  }\n"])), devices.mobile);
+var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media ", " {\n    gap: 24px;\n  }\n"])), devices.mobile);
 var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  @media ", " {\n    gap: 24px;\n  }\n"])), devices.mobile);
 var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 290px;\n\n  @media ", " {\n    max-width: unset;\n  }\n"])), devices.mobile);
 var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: 0.4px;\n  color: var(--color-base-white);\n  border-bottom: unset;\n  text-decoration: underline;\n  text-underline-offset: var(--harmonic-text-link-underline-offset);\n  margin-bottom: 0;\n  padding-bottom: 0;\n"])));
@@ -11928,17 +12136,17 @@ var Footer = function Footer(_ref) {
   }, additionalInfo))));
 };
 
-var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
+var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
 var LIST_ITEM_GAP = 32;
-var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  width: 100%;\n  top: 0;\n  border-bottom: ", ";\n  background-color: var(--color-base-white);\n  z-index: ", ";\n\n  ", "\n"])), function (_ref) {
+var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  width: 100%;\n  top: 0;\n  border-bottom: ", ";\n  background-color: var(--color-base-white);\n  z-index: ", ";\n\n  ", "\n"])), function (_ref) {
   var bottomBorder = _ref.bottomBorder;
   return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
 }, zIndexes.anchor, function (_ref2) {
   var withShadow = _ref2.withShadow;
-  return withShadow && css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
-var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
-var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
+var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var TabsList = /*#__PURE__*/styled.ul(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  gap: ", "px;\n  justify-content: ", ";\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: var(--anchor-tabs-height);\n  white-space: nowrap;\n  overflow: scroll;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scroll-behavior: smooth;\n\n  @media ", " {\n    & {\n      width: ", ";\n    }\n  }\n"])), function (_ref3) {
   var tabsOverflow = _ref3.tabsOverflow;
   return tabsOverflow ? 'calc(100% - 74px)' : '100%';
@@ -12209,17 +12417,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   })))) : null))));
 };
 
-var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
-var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -1px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
+var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
+var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -1px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
   var sticky = _ref.sticky;
   return sticky ? 'sticky' : 'initial';
 }, zIndexes.anchor);
-var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
-var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2 / span 15;\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  gap: 40px;\n  justify-content: space-between;\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 13;\n      gap: 20px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 12;\n    }\n  }\n"])), function (_ref2) {
+var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
+var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2 / span 15;\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  gap: 40px;\n  justify-content: space-between;\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 13;\n      gap: 20px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 12;\n    }\n  }\n"])), function (_ref2) {
   var title = _ref2.title;
   return title ? 'row' : 'row-reverse';
 }, devices.tablet, devices.mobile);
-var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  min-height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      min-height: 50px;\n    }\n  }\n"])), devices.mobile);
+var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  min-height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      min-height: 50px;\n    }\n  }\n"])), devices.mobile);
 var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n\n  a {\n    width: max-content;\n  }\n"])), devices.mobile);
 var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
 var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref3) {
@@ -12269,14 +12477,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
   }, message))));
 };
 
-var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L;
-var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: solid 4px;\n  border-color: var(--upsell-border-color);\n  padding: 66px 74px 70px;\n\n  @media ", " {\n    & {\n      border-left: none;\n      border-right: none;\n      padding: 40px 0px;\n    }\n  }\n"])), devices.mobile);
-var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n\n    @media ", " {\n      margin-left: 20px;\n      margin-right: 20px;\n    }\n  }\n"])), devices.mobile);
-var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 60px;\n\n  @media ", " {\n    margin-bottom: 40px;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobile);
-var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n    margin: 35px 0 10px;\n\n    @media ", " {\n      margin-top: 24px;\n    }\n  }\n\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n    margin-bottom: 0;\n  }\n"])), devices.mobile);
+var _templateObject$1r, _templateObject2$17, _templateObject3$U, _templateObject4$M;
+var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: solid 4px;\n  border-color: var(--upsell-border-color);\n  padding: 66px 74px 70px;\n\n  @media ", " {\n    & {\n      border-left: none;\n      border-right: none;\n      padding: 40px 0px;\n    }\n  }\n"])), devices.mobile);
+var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n\n    @media ", " {\n      margin-left: 20px;\n      margin-right: 20px;\n    }\n  }\n"])), devices.mobile);
+var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 60px;\n\n  @media ", " {\n    margin-bottom: 40px;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobile);
+var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n    margin: 35px 0 10px;\n\n    @media ", " {\n      margin-top: 24px;\n    }\n  }\n\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n    margin-bottom: 0;\n  }\n"])), devices.mobile);
 
-var _templateObject$1r;
-var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 60px 74px;\n  grid-template-columns: repeat(2, 1fr);\n  width: 100%;\n\n  @media ", " {\n    gap: 40px 74px;\n    width: 100%;\n    padding-left: 0;\n    padding-right: 0;\n    grid-template-columns: 1fr;\n  }\n"])), devices.mobile);
+var _templateObject$1s;
+var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 60px 74px;\n  grid-template-columns: repeat(2, 1fr);\n  width: 100%;\n\n  @media ", " {\n    gap: 40px 74px;\n    width: 100%;\n    padding-left: 0;\n    padding-right: 0;\n    grid-template-columns: 1fr;\n  }\n"])), devices.mobile);
 
 var UpsellCards = function UpsellCards(_ref) {
   var upsellCards = _ref.upsellCards;
@@ -12305,13 +12513,15 @@ var UpsellSection = function UpsellSection(_ref) {
     upsellCards = _ref.upsellCards,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme,
-    className = _ref.className;
+    className = _ref.className,
+    titleFontFamily = _ref.titleFontFamily;
   var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
     return _extends({}, card, {
       theme: card.theme || theme,
       secondaryTheme: card.secondaryTheme || card.theme || theme
     });
   }) : [];
+  var isVictorTitleFont = titleFontFamily === 'Victor';
   return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
     theme: theme
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -12324,7 +12534,7 @@ var UpsellSection = function UpsellSection(_ref) {
     columnStartSmallDevice: 1,
     columnSpanSmallDevice: 14
   }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
-    serif: true
+    serif: isVictorTitleFont
   }, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
     text: richText != null ? richText : '',
     columnStartDesktop: 1,
@@ -12338,9 +12548,9 @@ var UpsellSection = function UpsellSection(_ref) {
   })))));
 };
 
-var _templateObject$1s, _templateObject2$17;
-var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--color-base-white);\n"])), zIndexes.anchor);
-var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
+var _templateObject$1t, _templateObject2$18;
+var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--color-base-white);\n"])), zIndexes.anchor);
+var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
   var bottomBorder = _ref.bottomBorder;
   return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
 }, devices.mobileAndTablet, devices.mobile);
@@ -12371,11 +12581,11 @@ var StickyBar = function StickyBar(_ref) {
   }, children)));
 };
 
-var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M;
-var InnerModal = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 62px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n  position: relative;\n\n  @media ", ", ", " {\n    height: 100vh;\n    padding: 62px 0 0;\n  }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
-var CloseButton = /*#__PURE__*/styled.button(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
-var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
+var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N;
+var InnerModal = /*#__PURE__*/styled.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 62px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n  position: relative;\n\n  @media ", ", ", " {\n    height: 100vh;\n    padding: 62px 0 0;\n  }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
+var CloseButton = /*#__PURE__*/styled.button(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
+var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
 
 var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
 var MAX_Z_INDEX = 9999999999;
@@ -12579,21 +12789,21 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
   return "\n      width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n      margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n    ";
 };
 
-var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
-var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }}\n\n  &:fullscreen {\n    background: var(--color-base-white);\n    padding-top: 44px;\n    padding-bottom: 84px;\n\n    .swipe-slide > figure {\n        height: var(--fullscreen-figure-height);\n\n        > div {\n          height: var(--fullscreen-figure-height);\n        }\n    }\n  }\n"])), function (_ref) {
+var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
+var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }}\n\n  &:fullscreen {\n    background: var(--color-base-white);\n    padding-top: 44px;\n    padding-bottom: 84px;\n\n    .swipe-slide > figure {\n        height: var(--fullscreen-figure-height);\n\n        > div {\n          height: var(--fullscreen-figure-height);\n        }\n    }\n  }\n"])), function (_ref) {
   var imagesHeightDesktop = _ref.imagesHeightDesktop;
   return "& {\n      .swipe-slide {\n        height: fit-content;\n        width: auto;\n        margin-right: var(--grid-column-gap);\n\n        > figure {\n          margin: 0px;\n\n          > div {\n            height: " + imagesHeightDesktop + "px;\n          }\n        }\n      }\n    }";
 }, devices.mobile, function (_ref2) {
   var imagesHeightDevice = _ref2.imagesHeightDevice;
   return "&&& {\n        .swipe-slide > figure {\n            > div {\n              height: " + imagesHeightDevice + "px;\n            }\n        }\n      }";
 });
-var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n}"])), function (_ref3) {
+var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n}"])), function (_ref3) {
   var type = _ref3.type,
     isActive = _ref3.isActive;
   return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type, isActive) + "\n        }\n      }\n\n      @media " + devices.tablet + " {\n        & {\n          .swipe-slide {\n            " + getCardSlideTabletStyles(type) + "\n          }\n        }\n      }\n\n      @media " + devices.mobile + " {\n        && {\n          .swipe-slide {\n            " + getCardSlideMobileStyles(type) + "\n          }\n        }\n      }\n    ";
 });
-var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile, devices.mobile);
-var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  user-select: text;\n"])));
+var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile, devices.mobile);
+var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  user-select: text;\n"])));
 var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref4) {
   var isDescriptionPresent = _ref4.isDescriptionPresent;
   return isDescriptionPresent && 'margin: 20px 0';
@@ -12631,7 +12841,8 @@ var Carousel = function Carousel(_ref) {
     _ref$infinite = _ref.infinite,
     infinite = _ref$infinite === void 0 ? true : _ref$infinite,
     _ref$useOffset = _ref.useOffset,
-    useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
+    useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset,
+    titleFontFamily = _ref.titleFontFamily;
   var _useState = useState(false),
     isFullscreen = _useState[0],
     setIsFullscreen = _useState[1];
@@ -12781,6 +12992,7 @@ var Carousel = function Carousel(_ref) {
   var carouselTitleId = "carousel-title-" + title;
   var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
   var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
+  var isVictorTitleFont = titleFontFamily === 'Victor';
   return /*#__PURE__*/React__default.createElement(Wrapper, {
     className: className,
     type: type,
@@ -12804,7 +13016,7 @@ var Carousel = function Carousel(_ref) {
     isDescriptionPresent: !!description
   }, /*#__PURE__*/React__default.createElement(TitleText$1, {
     size: "medium",
-    serif: true,
+    serif: isVictorTitleFont,
     hierarchy: titleSemanticLevelValue
   }, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "large"
@@ -12844,11 +13056,11 @@ var Carousel = function Carousel(_ref) {
   }, children))));
 };
 
-var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$7, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
-var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--color-base-black);\n  user-select: none;\n\n  .highlight-carousel-text {\n    color: var(--color-base-white);\n  }\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
-var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  a {\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 7;\n      padding: 0 12px 12px var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: 100%;\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var _templateObject$1w, _templateObject2$1b, _templateObject3$X, _templateObject4$P, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$7, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
+var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--color-base-black);\n  user-select: none;\n\n  .highlight-carousel-text {\n    color: var(--color-base-white);\n  }\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
+var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$P || (_templateObject4$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  a {\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 7;\n      padding: 0 12px 12px var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: 100%;\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n  width: 132px;\n  height: 36px;\n\n  @media ", " {\n    & {\n      margin-bottom: 16px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-bottom: 20px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n\n  h1,\n  h2,\n  h3 {\n    margin-bottom: 8px;\n  }\n"])));
 var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$p || (_templateObject7$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.mobileAndTablet);
@@ -12994,7 +13206,7 @@ var VideoSlide = function VideoSlide(_ref) {
   });
   return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
     isCurrentSlide: isCurrentSlide
-  }, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
+  }, /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
     video: video,
     settings: settings
   }));
@@ -13034,7 +13246,8 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     carouselTitle = _ref.carouselTitle,
     slides = _ref.slides,
     titleSemanticLevel = _ref.titleSemanticLevel,
-    className = _ref.className;
+    className = _ref.className,
+    titleFontFamily = _ref.titleFontFamily;
   var slidesMedia = useMemo(function () {
     return slides.map(function (_ref2) {
       var mediaContent = _ref2.mediaContent;
@@ -13065,6 +13278,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   var handleClickInside = function handleClickInside(e) {
     e.stopPropagation();
   };
+  var isVictorTitleFont = titleFontFamily === 'Victor';
   return /*#__PURE__*/React__default.createElement(HighlightsGrid$1, {
     role: "region",
     "aria-labelledby": carouselTitleId,
@@ -13077,7 +13291,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
     className: TYPOGRAPHY_CLASS_NAME,
     size: "medium",
-    serif: true,
+    serif: isVictorTitleFont,
     hierarchy: titleSemanticLevelValue
   }, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickNext: onNext,
@@ -13169,9 +13383,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
   })));
 };
 
-var _templateObject$1w, _templateObject3$X;
-var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1w || (_templateObject$1w = /*#__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$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
+var _templateObject$1x, _templateObject3$Y;
+var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1x || (_templateObject$1x = /*#__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$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
 
 var MinimalCarousel = function MinimalCarousel(_ref) {
   var children = _ref.children;
@@ -13766,8 +13980,8 @@ var Theme = function Theme(_ref) {
   }, children);
 };
 
-var _templateObject$1x;
-var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1x || (_templateObject$1x = /*#__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: 4px;\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$1y;
+var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1y || (_templateObject$1y = /*#__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: 4px;\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) {
@@ -14714,10 +14928,10 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1x || (_templa
   return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
 
-var _templateObject$1y, _templateObject2$1b, _templateObject3$Y;
-var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 32px 0;\n\n  & cite {\n    font-style: normal;\n  }\n\n  @media ", " {\n    padding: 24px 0;\n  }\n"])), devices.mobile);
+var _templateObject$1z, _templateObject2$1c, _templateObject3$Z;
+var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 32px 0;\n\n  & cite {\n    font-style: normal;\n  }\n\n  @media ", " {\n    padding: 24px 0;\n  }\n"])), devices.mobile);
 
 /* eslint-disable react/no-danger */
 var Quote = function Quote(_ref) {
@@ -14747,5 +14961,5 @@ var Quote = function Quote(_ref) {
   }, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
 };
 
-export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, 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, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, 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, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
+export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, 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, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, 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, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$2 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
 //# sourceMappingURL=harmonic.esm.js.map