@royaloperahouse/harmonic 0.18.3-o → 0.18.4

package/dist/harmonic.cjs.development.js

@@ -8,7 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
-var dateFns = require('date-fns');
+var moment = _interopDefault(require('moment'));
 var server = require('react-dom/server');
 var Select$1 = require('react-select');
 var Select$1__default = _interopDefault(Select$1);
@@ -2626,7 +2626,7 @@ var Icon = /*#__PURE__*/React.memo(function (props) {
 Icon.displayName = 'Icon';
 
 var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
-var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Button = function Button(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
@@ -2636,7 +2636,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     href = _ref.href,
     onClick = _ref.onClick,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var truncatedString = children == null ? void 0 : children.substring(0, 30);
+  var truncatedString = children.substring(0, 30);
   var handleClick = React.useCallback(function (e) {
     if (!href) e.preventDefault();
     onClick == null || onClick(e);
@@ -2648,8 +2648,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     href: href != null ? href : '#',
     onClick: handleClick,
     iconName: iconName,
-    className: className,
-    ref: ref
+    className: className
   }), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
     "data-testid": "button-icon",
     className: iconClassName
@@ -2660,8 +2659,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
     color: "inherit"
   }, truncatedString));
-});
-Button.displayName = 'Button';
+};
 
 var getPointerEvents = function getPointerEvents(_ref) {
   var disabled = _ref.disabled;
@@ -2726,7 +2724,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
 var AriaDescription = /*#__PURE__*/styled__default.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 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var PrimaryButton = function PrimaryButton(_ref) {
   var children = _ref.children,
     disabled = _ref.disabled,
     className = _ref.className,
@@ -2741,7 +2739,6 @@ var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, 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",
@@ -2751,13 +2748,10 @@ var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClick: handleClick
     }), children));
   }
-  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({}, props, {
     className: className
   }), children);
-});
-PrimaryButton.displayName = 'PrimaryButton';
+};
 
 var COLORS$1 = {
   disabled: 'var(--color-state-disabled)',
@@ -3905,7 +3899,6 @@ 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;
@@ -3940,9 +3933,8 @@ var Tab = function Tab(_ref) {
     className: className,
     "data-testid": dataTestId
   }, /*#__PURE__*/React__default.createElement(TabText, {
-    id: tabLinkId,
-    trimText: trimText,
     color: color,
+    trimText: trimText,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -4629,31 +4621,6 @@ var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 ||
 var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var TimerValue = /*#__PURE__*/styled__default.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,
@@ -4662,22 +4629,43 @@ 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 _useState = React.useState('00'),
-    seconds = _useState[0],
-    setSeconds = _useState[1];
-  var _useState2 = React.useState('00'),
-    minutes = _useState2[0],
-    setMinutes = _useState2[1];
-  var _useState3 = React.useState('00'),
-    hours = _useState3[0],
-    setHours = _useState3[1];
-  var _useState4 = React.useState('00'),
-    days = _useState4[0],
-    setDays = _useState4[1];
-  var _useState5 = React.useState(false),
-    isEndDateReached = _useState5[0],
-    setIsEndDateReached = _useState5[1];
-  React.useEffect(function () {
+  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 () {
     if (isEndDateReached) return undefined;
     // We use this to set values for the timer immediately
     var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
@@ -4685,21 +4673,19 @@ var Timer = function Timer(_ref) {
       return setInterval(fn, delay);
     };
     var updateValues = function updateValues() {
-      var futureDate = new Date(endDate);
-      var nowDate = new Date();
-      var diffInMs = futureDate.getTime() - nowDate.getTime();
-      if (diffInMs < 0) {
+      var futureDate = moment(endDate);
+      var nowDate = moment();
+      var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
+      var difference = moment(differenceInMilliseconds).utc();
+      if (differenceInMilliseconds < 0) {
         setIsEndDateReached(true);
         if (endDateHandler) endDateHandler();
       } else {
-        var duration = dateFns.intervalToDuration({
-          start: nowDate,
-          end: futureDate
-        });
-        var daysDiff = pad(dateFns.differenceInDays(futureDate, nowDate));
-        var hoursDiff = pad(duration.hours);
-        var minutesDiff = pad(duration.minutes);
-        var secondsDiff = pad(duration.seconds);
+        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');
         setDays(daysDiff);
         setHours(hoursDiff);
         setMinutes(minutesDiff);
@@ -4711,7 +4697,7 @@ var Timer = function Timer(_ref) {
       clearInterval(interval);
     };
   });
-  var hideTimer = dateFns.isPast(new Date(endDate));
+  var hideTimer = moment(endDate).isBefore(moment());
   if (hideTimer) return null;
   return /*#__PURE__*/React__default.createElement(TimerWrapper, {
     color: color
@@ -5429,7 +5415,6 @@ var Dropdown = function Dropdown(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
-    tabLinkId = _ref.tabLinkId,
     trimTabText = _ref.trimTabText;
   var node = React.useRef();
   var _useState = React.useState(false),
@@ -5526,7 +5511,6 @@ 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,
@@ -5606,8 +5590,7 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className,
-    tabLinkId: "account-link"
+    className: className
   });
 };
 
@@ -5996,69 +5979,21 @@ var Accordion = function Accordion(_ref) {
   var content = React.useRef(null);
   var timeoutRef = React.useRef(null);
   var rafRef = React.useRef(null);
-  var resizeObserverRef = React.useRef(null);
-  var intervalRef = React.useRef(null);
   React.useEffect(function () {
-    if (content.current && initOpen) {
+    if (content != null && content.current && initOpen) {
       setTextHeight(content.current.scrollHeight + "px");
     }
-  }, [initOpen]);
+  }, [content, initOpen]);
   React.useEffect(function () {
-    var cleanup = function cleanup() {
-      return undefined;
-    };
-    var el = content.current;
-    if (!el) return cleanup;
-    if (!openAccordion) {
+    if (openAccordion && content != null && content.current) {
+      rafRef.current = window.requestAnimationFrame(function () {
+        var _content$current$scro, _content$current;
+        setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
+      });
+    } else if (!openAccordion) {
       setTextHeight('0px');
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
-      if (intervalRef.current) {
-        window.clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-      if (rafRef.current) {
-        window.cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-      return cleanup;
-    }
-    var updateHeight = function updateHeight() {
-      setTextHeight(el.scrollHeight + "px");
-    };
-    rafRef.current = window.requestAnimationFrame(updateHeight);
-    if (typeof ResizeObserver !== 'undefined') {
-      var ro = new ResizeObserver(updateHeight);
-      ro.observe(el);
-      resizeObserverRef.current = ro;
-      intervalRef.current = window.setInterval(updateHeight, 200);
-      return function () {
-        ro.disconnect();
-        resizeObserverRef.current = null;
-        if (intervalRef.current) {
-          window.clearInterval(intervalRef.current);
-          intervalRef.current = null;
-        }
-        if (rafRef.current) {
-          window.cancelAnimationFrame(rafRef.current);
-          rafRef.current = null;
-        }
-      };
     }
-    intervalRef.current = window.setInterval(updateHeight, 200);
-    return function () {
-      if (intervalRef.current) {
-        window.clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-      if (rafRef.current) {
-        window.cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-    };
-  }, [openAccordion, childrenVisibility, children]);
+  }, [openAccordion, childrenVisibility, content]);
   React.useEffect(function () {
     return function () {
       if (timeoutRef.current) {
@@ -6069,20 +6004,11 @@ var Accordion = function Accordion(_ref) {
         window.cancelAnimationFrame(rafRef.current);
         rafRef.current = null;
       }
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
-      if (intervalRef.current) {
-        window.clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
     };
   }, []);
   var toggleAccordion = function toggleAccordion() {
     if (React__default.Children.count(children) === 0) return;
     if (openAccordion) {
-      setIcon(collapsedStateIconData);
       setOpenAccordion(false);
       setTextHeight('0px');
       setIcon(collapsedStateIconData);
@@ -7833,274 +7759,91 @@ var PageHeading = function PageHeading(_ref) {
 };
 
 var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
-var ImpactHeaderWrapper = /*#__PURE__*/styled__default.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__default.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__default.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__default(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    position: static;\n    margin-right: 0;\n  }\n"])), devices.mobile);
-var MobileButtonWrapper = /*#__PURE__*/styled__default.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__default(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__default.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__default.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__default.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__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])));
-var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.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__default.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 ImpactWrapper = /*#__PURE__*/styled__default.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__default.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__default(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__default.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__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var TextWrapper$1 = /*#__PURE__*/styled__default.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__default.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__default.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 _excluded$k = ["text"];
-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 = React.useState(desktopPoster),
-    posterUrl = _useState[0],
-    setPoster = _useState[1];
-  var _useState2 = React.useState(desktopVideo),
-    videoUrl = _useState2[0],
-    setVideoUrl = _useState2[1];
-  var isMobile = useMobile();
-  React.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", {
+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", {
     "data-testid": "impact-picture"
-  }, mobile && /*#__PURE__*/React__default.createElement("source", {
-    srcSet: mobile,
+  }, bgUrlDevice && (/*#__PURE__*/React__default.createElement("source", {
+    srcSet: bgUrlDevice,
     media: "" + devices.mobile,
     "data-testid": "impact-mobile-image-source"
-  }), /*#__PURE__*/React__default.createElement("source", {
-    srcSet: desktop,
+  })), /*#__PURE__*/React__default.createElement("source", {
+    srcSet: bgUrlDesktop,
     media: "" + devices.desktop,
     "data-testid": "impact-desktop-image-source"
   }), /*#__PURE__*/React__default.createElement("img", {
-    src: desktop,
-    alt: alt,
+    src: bgUrlDesktop,
+    alt: bgImageAltText,
     "data-testid": "impact-image"
-  }));
-};
-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: exports.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, {
+  }))), /*#__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, {
     "data-testid": "impact-link"
-  }), 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));
+  }, /*#__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);
 };
 
-var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$l;
-var PanelGrid = /*#__PURE__*/styled__default(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 _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q, _templateObject5$l;
+var PanelGrid = /*#__PURE__*/styled__default(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 color = _ref.color;
   return "\n    background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n    color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n  ";
 }, devices.mobileAndTablet);
-var LeftPanel = /*#__PURE__*/styled__default.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 LeftPanel = /*#__PURE__*/styled__default.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 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__default.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__default.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__default.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__default.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__default.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__default.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;
@@ -8114,7 +7857,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, {
+  }, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
     "data-testid": "scroll-link"
   }, /*#__PURE__*/React__default.createElement(TabLink, {
     iconName: "Arrow",
@@ -8130,11 +7873,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   })))));
 };
 
-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__default.section(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var ImageWrapper = /*#__PURE__*/styled__default.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__default.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__default.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 _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__default.section(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var ImageWrapper = /*#__PURE__*/styled__default.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__default.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__default.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 ContentSection = /*#__PURE__*/styled__default.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 == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
@@ -8344,7 +8087,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
   })))))))))));
 };
 
-var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t;
+var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s;
 var GRID = {
   desktop: {
     leftWithImage: '1 / 1 / 3 / 7',
@@ -8357,19 +8100,19 @@ var GRID = {
     right: '2 / 1 / 3 / 15'
   }
 };
-var HighlightPanelGrid = /*#__PURE__*/styled__default(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 HighlightPanelGrid = /*#__PURE__*/styled__default(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 $background = _ref.$background;
   return "var(--color-" + $background + ")";
 });
-var LeftPanel$1 = /*#__PURE__*/styled__default.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 LeftPanel$1 = /*#__PURE__*/styled__default.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 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__default.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__default.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 RightPanel$1 = /*#__PURE__*/styled__default.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__default.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 PageHeadingHighlight = function PageHeadingHighlight(_ref) {
   var _image$src, _image$alt;
@@ -8392,10 +8135,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
   })))));
 };
 
-var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
-var BrandingTextBlock = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
+var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
+var BrandingTextBlock = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.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__default(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,
@@ -8506,7 +8249,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
 };
 
 var _excluded$l = ["text"];
-var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
+var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
   var mobilePoster = poster.mobile || poster.desktop;
@@ -8527,10 +8270,10 @@ var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
     videoUrl: videoUrl
   };
 };
-var VideoWithControls$1 = function VideoWithControls(_ref) {
+var VideoWithControls = function VideoWithControls(_ref) {
   var video = _ref.video,
     poster = _ref.poster;
-  var _useResponsiveVideo = useResponsiveVideo$1(video, poster),
+  var _useResponsiveVideo = useResponsiveVideo(video, poster),
     posterUrl = _useResponsiveVideo.posterUrl,
     videoUrl = _useResponsiveVideo.videoUrl;
   var isIOS = useIOS();
@@ -8583,7 +8326,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$1, {
+  return /*#__PURE__*/React__default.createElement(VideoWithControls, {
     video: video,
     poster: poster
   });
@@ -8646,11 +8389,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   }), linkText))))));
 };
 
-var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject4$u, _templateObject5$o, _templateObject6$h, _templateObject7$d;
-var HighlightsGrid = /*#__PURE__*/styled__default(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__default.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__default.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__default.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 _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
+var HighlightsGrid = /*#__PURE__*/styled__default(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__default.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__default.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__default.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 hasImages = _ref.hasImages;
   return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
 }, devices.mobile, function (_ref2) {
@@ -8725,10 +8468,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
   }))))));
 };
 
-var _templateObject$Y, _templateObject2$M, _templateObject3$A, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
-var linkButtonStyles = /*#__PURE__*/styled.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__default.a(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
-var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
+var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
+var linkButtonStyles = /*#__PURE__*/styled.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__default.a(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
+var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
 var PageNumberWrapper = /*#__PURE__*/styled__default.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__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
 var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
@@ -8884,19 +8627,16 @@ var Pagination = function Pagination(_ref) {
   }))))));
 };
 
-var _templateObject$Z;
-var PeopleListingGrid = /*#__PURE__*/styled__default(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$Y;
+var PeopleListingGrid = /*#__PURE__*/styled__default(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: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
 
-var _templateObject$_, _templateObject2$N;
-var TextWrapper$1 = /*#__PURE__*/styled__default.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__default(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$Z, _templateObject2$M;
+var TextWrapper$2 = /*#__PURE__*/styled__default.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__default(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$O;
-var PersonLink = /*#__PURE__*/styled__default.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__default.span(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--base-color-dark-grey);\n  }\n"])));
+var _templateObject$_, _templateObject2$N;
+var PersonLink = /*#__PURE__*/styled__default.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__default.span(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--base-color-dark-grey);\n  }\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -8919,7 +8659,7 @@ var PersonDetails = function PersonDetails(_ref) {
   var _role$people;
   var role = _ref.role,
     className = _ref.className;
-  return /*#__PURE__*/React__default.createElement(TextWrapper$1, {
+  return /*#__PURE__*/React__default.createElement(TextWrapper$2, {
     className: className
   }, /*#__PURE__*/React__default.createElement(RoleContent, {
     title: "role",
@@ -8935,17 +8675,13 @@ var PersonDetails = function PersonDetails(_ref) {
   })));
 };
 
-var _templateObject$10, _templateObject2$P;
-var PersonWrapper$1 = /*#__PURE__*/styled__default.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__default.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';
-});
+var _templateObject$$, _templateObject2$O;
+var PersonWrapper$1 = /*#__PURE__*/styled__default.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__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n  }\n"])));
 
 var PersonCard = function PersonCard(_ref) {
   var role = _ref.role,
-    className = _ref.className,
-    greyscale = _ref.greyscale;
+    className = _ref.className;
   var hasHeadshot = React__default.useMemo(function () {
     var _role$people;
     var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
@@ -8953,9 +8689,7 @@ var PersonCard = function PersonCard(_ref) {
   }, [role]);
   if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
     className: className
-  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
-    greyscale: greyscale
-  }, /*#__PURE__*/React__default.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
     src: role.people[0].headshot,
     alt: role.people[0].name
   })), /*#__PURE__*/React__default.createElement(PersonDetails, {
@@ -8969,31 +8703,26 @@ var PersonCard = function PersonCard(_ref) {
 
 var PeopleListing = function PeopleListing(_ref) {
   var roles = _ref.roles,
-    className = _ref.className,
-    greyscale = _ref.greyscale,
-    largeDesktopColumns = _ref.largeDesktopColumns;
+    className = _ref.className;
   return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
-    className: className,
-    "$largeDesktopColumns": largeDesktopColumns
+    className: className
   }, roles.map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
       key: role.name + "-" + index
     }, /*#__PURE__*/React__default.createElement(PersonCard, {
-      role: role,
-      className: className,
-      greyscale: greyscale
+      role: role
     }));
   }));
 };
 
-var _templateObject$11, _templateObject2$Q, _templateObject3$B, _templateObject4$v;
-var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
-var CreditListingWrapper = /*#__PURE__*/styled__default(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 _templateObject$10, _templateObject2$P, _templateObject3$A, _templateObject4$u;
+var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var CreditListingWrapper = /*#__PURE__*/styled__default(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 columnCount = _ref.columnCount;
   return "repeat(" + columnCount + ", 1fr)";
 }, devices.mobile, devices.tablet);
-var DescriptionWrapper = /*#__PURE__*/styled__default.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__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var DescriptionWrapper = /*#__PURE__*/styled__default.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__default.div(_templateObject4$u || (_templateObject4$u = /*#__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) {
@@ -9082,7 +8811,7 @@ var CreditListing = function CreditListing(_ref) {
       columnSpanSmallDevice: 1,
       key: "credit-entry-" + name + "-" + index,
       "data-testid": "credit-entry"
-    }, /*#__PURE__*/React__default.createElement(TextWrapper$1, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
+    }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
       title: "role",
       "data-roh": dataROH
     }, /*#__PURE__*/React__default.createElement(Overline, {
@@ -9120,8 +8849,8 @@ var CreditListing = function CreditListing(_ref) {
   }, creditEntries);
 };
 
-var _templateObject$12;
-var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(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 _templateObject$11;
+var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(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 PolicyLinks = function PolicyLinks(_ref) {
   var items = _ref.items;
@@ -9139,14 +8868,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
   }));
 };
 
-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 _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 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__default(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 PromoWithTagsGrid = /*#__PURE__*/styled__default(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 imageToLeft = _ref.imageToLeft;
   return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
@@ -9156,7 +8885,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 ||
   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__default.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 ButtonsContainer$2 = /*#__PURE__*/styled__default.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 hasTextLinks = _ref4.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
 }, function (_ref5) {
@@ -9180,7 +8909,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$C ||
   }
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref7) {
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref7) {
   var marginBottom = _ref7.marginBottom;
   return marginBottom + "px";
 }, function (_ref8) {
@@ -9220,7 +8949,7 @@ var _excluded$m = ["text"],
   _excluded3$1 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_TEXT$1 = 28;
-var LENGTH_TEXT_PARAGRAPH = 185;
+var LENGTH_TEXT_PARAGRAPH = 130;
 var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -9411,25 +9140,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$14, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g;
+var _templateObject$13, _templateObject2$Q, _templateObject3$C, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled__default(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 PromoWithTitleGrid = /*#__PURE__*/styled__default(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 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__default.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 PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.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 imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.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 PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.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 imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 24px;\n  }\n"])), devices.mobile);
+var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 24px;\n  }\n"])), devices.mobile);
 var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
 var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(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__default.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) {
@@ -9454,8 +9183,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
   return '';
 });
 
-var _templateObject$15;
-var VideoContainer = /*#__PURE__*/styled__default.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 _templateObject$14;
+var VideoContainer = /*#__PURE__*/styled__default.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 _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -9486,7 +9215,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
   return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
 };
 
-var VideoWithControls$2 = function VideoWithControls(_ref) {
+var VideoWithControls$1 = function VideoWithControls(_ref) {
   var video = _ref.video,
     settings = _ref.settings;
   var videoRef = React.useRef(null);
@@ -9561,7 +9290,7 @@ var PromoChild = function PromoChild(_ref) {
   }, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3'],
     "data-testid": "AspectRatioWrapper"
-  }, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
+  }, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
     video: children,
     settings: videoSettings
   }));
@@ -9624,7 +9353,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     size: titleSize,
     hierarchy: titleHierarchy
   }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
-    size: "small"
+    size: "medium"
   }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
     size: "large",
     dangerouslySetInnerHTML: {
@@ -9637,8 +9366,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$16;
-var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
+var _templateObject$15;
+var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -9693,9 +9422,9 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var _templateObject$17, _templateObject2$S, _templateObject3$E;
-var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var RadioGroup$1 = /*#__PURE__*/styled__default.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 _templateObject$16, _templateObject2$R, _templateObject3$D;
+var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RadioGroup$1 = /*#__PURE__*/styled__default.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 horizontalMode = _ref.horizontalMode;
   if (horizontalMode) return 'row';
   return 'column';
@@ -9703,7 +9432,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_temp
   var gap = _ref2.gap;
   return gap + "px";
 });
-var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
+var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__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)';
@@ -9780,10 +9509,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error))));
 };
 
-var _templateObject$18, _templateObject2$T, _templateObject3$F;
-var StatusBannerWrapper = /*#__PURE__*/styled__default.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__default.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__default.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);
+var _templateObject$17, _templateObject2$S, _templateObject3$E;
+var StatusBannerWrapper = /*#__PURE__*/styled__default.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__default.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__default.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);
 
 /* eslint-disable react/no-danger */
 var StatusBanner = function StatusBanner(_ref) {
@@ -9839,8 +9568,8 @@ var StatusBanner = function StatusBanner(_ref) {
   return null;
 };
 
-var _templateObject$19;
-var SectionTitleWrapper = /*#__PURE__*/styled__default.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);
+var _templateObject$18;
+var SectionTitleWrapper = /*#__PURE__*/styled__default.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);
 
 /* ~~~~~~~ new harmonic types ~~~~~~~ */
 var HarmonicSize = {
@@ -9882,8 +9611,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
 
-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__*/styled.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 _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__*/styled.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 theme = _ref.theme;
   return "3px solid " + theme.colors.lapisLazuli;
 }, function (_ref2) {
@@ -9893,12 +9622,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$1a || (_templateObject
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/styled.css(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/styled.css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.darkgrey;
 });
-var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
 var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
   var theme = _ref5.theme;
   return {
@@ -10263,37 +9992,37 @@ function Select(_ref3) {
   })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
-var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper$1 = /*#__PURE__*/styled__default.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 _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
+var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var SelectWrapper$1 = /*#__PURE__*/styled__default.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  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-dark-grey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-dark-grey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-light-grey);\n      background: var(--base-color-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-dark-grey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-dark-grey);\n    background: var(--base-color-light-grey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-mid-grey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-size: var(--font-size-body-1);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + "px";
 }, function (_ref2) {
   var error = _ref2.error;
-  if (error !== undefined) return "1px solid var(--color-state-error)";
-  return "1px solid var(--color-base-mid-grey)";
+  if (error !== undefined) return "1px solid var(--base-color-errorstate)";
+  return "1px solid var(--base-color-dark-grey)";
 }, function (_ref3) {
   var error = _ref3.error;
-  if (error !== undefined) return "var(--color-state-error)";
-  return "var(--color-base-dark-grey)";
+  if (error !== undefined) return "var(--base-color-errorstate)";
+  return "var(--base-color-dark-grey)";
 }, function (_ref4) {
   var darkMode = _ref4.darkMode;
-  if (darkMode) return "0 0 0 1px var(--color-state-medium)";
+  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
   return "0 0 0 3px var(--base-color-lapislazuli)";
-}, devices.mobile, devices.mobile);
-var TextLabel$4 = /*#__PURE__*/styled__default.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 TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\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__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
+  if (darkMode) return "var(--base-color-white)";
+  return "var(--base-color-black)";
+});
+var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__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)";
+  if (darkMode) return "var(--base-color-white)";
+  return "var(--base-color-errorstate)";
 });
 
-var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
+var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -10304,15 +10033,12 @@ var WrapperComponent = function WrapperComponent(_ref) {
     error = _ref.error,
     width = _ref.width,
     darkMode = _ref.darkMode,
-    children = _ref.children,
-    className = _ref.className;
-  return /*#__PURE__*/React__default.createElement(Container$4, {
-    className: className
-  }, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
+    children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
     darkMode: darkMode,
     "data-testid": "select2-text-label"
-  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    size: "large"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
   }, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
     width: width,
     error: error,
@@ -10320,8 +10046,8 @@ var WrapperComponent = function WrapperComponent(_ref) {
   }, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
     darkMode: darkMode,
     "data-testid": "select2-error-label"
-  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    size: "medium"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
   }, error))));
 };
 /**
@@ -10347,14 +10073,12 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    className = _ref2.className,
     selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
     width: width,
-    darkMode: darkMode,
-    className: className
+    darkMode: darkMode
   }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
     components: _extends({
       DropdownIndicator: DropdownIndicator,
@@ -10406,10 +10130,10 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
 
-var _templateObject$1c, _templateObject3$I, _templateObject4$A, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
-var Wrapper$6 = /*#__PURE__*/styled__default.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__default(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__default.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 _templateObject$1b, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
+var Wrapper$6 = /*#__PURE__*/styled__default.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__default(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__default.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 stackCtasEarly = _ref.stackCtasEarly;
   return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
 }, function (_ref2) {
@@ -10512,8 +10236,8 @@ var UpsellCard = function UpsellCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
 };
 
-var _templateObject$1d, _templateObject2$W, _templateObject3$J;
-var Wrapper$7 = /*#__PURE__*/styled__default.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 _templateObject$1c, _templateObject2$V, _templateObject3$I;
+var Wrapper$7 = /*#__PURE__*/styled__default.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 _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -10523,8 +10247,8 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1d || (_temp
     height = _ref2.height;
   return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
 });
-var CaptionWrapper = /*#__PURE__*/styled__default.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__default(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 CaptionWrapper = /*#__PURE__*/styled__default.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__default(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 _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
 var ImageWithCaption = function ImageWithCaption(_ref) {
@@ -10557,11 +10281,11 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   }, caption))));
 };
 
-var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u, _templateObject6$n;
-var CardContainer$1 = /*#__PURE__*/styled__default.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__default.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__default.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
-var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u, _templateObject6$n;
+var CardContainer$1 = /*#__PURE__*/styled__default.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__default.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__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
+var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var IconWrapper$3 = /*#__PURE__*/styled__default.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__default.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);
 
@@ -10601,14 +10325,14 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
-var ReadMoreContainer = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
+var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
+var ReadMoreContainer = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject3$K || (_templateObject3$K = /*#__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__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
+var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
@@ -10693,11 +10417,11 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
 
-var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$w;
-var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey);
-var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
-var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref) {
+var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w;
+var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey);
+var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
+var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref) {
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
 }, exports.Colors.MidGrey);
@@ -10857,14 +10581,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o;
-var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
-var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o;
+var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__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__default.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 BottomLine = /*#__PURE__*/styled__default.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 Text = /*#__PURE__*/styled__default.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
@@ -10951,11 +10675,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
-var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
-var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
-var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableHeader = /*#__PURE__*/styled__default.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) {
+var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
+var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var TableHeader = /*#__PURE__*/styled__default.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) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
 var TableCell = /*#__PURE__*/styled__default.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) {
@@ -11166,22 +10890,22 @@ var Table = function Table(_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__default('div')(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_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__default('div')(_templateObject$1i || (_templateObject$1i = /*#__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__default(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__default('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__default.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 SignUpFormWrapper = /*#__PURE__*/styled__default(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__default('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__default.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 Form = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
 var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  @media ", " {\n    text-decoration: underline;\n  }\n"])), devices.mobile);
-var ButtonWrapper$2 = /*#__PURE__*/styled__default.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$3 = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
 var DropdownAreaWrapper = /*#__PURE__*/styled__default.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"])));
@@ -11471,10 +11195,10 @@ var SignUpForm = function SignUpForm(_ref) {
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "small"
-  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
     onClick: handleFormSubmit,
     theme: theme
-  })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+  })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
     onClick: handleFormSubmit,
     theme: theme
   })), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
@@ -11591,12 +11315,12 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
   }))))));
 };
 
-var _templateObject$1k, _templateObject2$11, _templateObject4$H, _templateObject5$A;
-var AnchorBarContainer = /*#__PURE__*/styled__default(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 _templateObject$1j, _templateObject2$10, _templateObject4$G, _templateObject5$A;
+var AnchorBarContainer = /*#__PURE__*/styled__default(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 withShadow = _ref.withShadow;
-  return withShadow && styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && styled.css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 }, devices.mobile);
-var CloseButtonWrapper = /*#__PURE__*/styled__default.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 CloseButtonWrapper = /*#__PURE__*/styled__default.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 ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 
 var defaultGrid = {
@@ -11655,12 +11379,12 @@ var AnchorBar = function AnchorBar(_ref) {
   return null;
 };
 
-var _templateObject$1l, _templateObject2$12;
-var FocusableTab = /*#__PURE__*/styled__default(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 _templateObject$1k, _templateObject2$11;
+var FocusableTab = /*#__PURE__*/styled__default(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 hide = _ref.hide;
   return hide && "display: none;";
 }, devices.mobileAndTablet);
-var HiddenBlock = /*#__PURE__*/styled__default.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);
+var HiddenBlock = /*#__PURE__*/styled__default.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);
 
 /**
  * An accessible component which allows Assistive Technology users to move the focus
@@ -11752,8 +11476,8 @@ var SkipToMain = function SkipToMain(_ref) {
   }));
 };
 
-var _templateObject$1m;
-var TextContainer$1 = /*#__PURE__*/styled__default(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 _templateObject$1l;
+var TextContainer$1 = /*#__PURE__*/styled__default(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 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'] + "\">");
@@ -11788,9 +11512,14 @@ 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(BodyContentTextContainer, {
+  var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
+    tag: "div",
+    size: "large",
+    "data-testid": "text-container",
     className: textContainerClassName,
-    html: text
+    dangerouslySetInnerHTML: {
+      __html: addTypographyClasses(text)
+    }
   });
   var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
@@ -11808,20 +11537,20 @@ var BodyContent = function BodyContent(_ref2) {
   }, gridItemOrContent);
 };
 
-var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
+var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
 var color = 'primary-black';
 var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
   borderColor: color,
   hoveredColor: color,
   pressedColor: color,
   textColor: color
-})(_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__default.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__default(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);
+})(_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__default.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__default(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);
 var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
   serif: true,
   size: 'medium'
-})(_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);
+})(_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);
 var Intro = /*#__PURE__*/styled__default(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);
@@ -12021,11 +11750,11 @@ var Navigation = function Navigation(_ref) {
   })))))));
 };
 
-var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject6$s, _templateObject7$m;
-var FooterSection = /*#__PURE__*/styled__default(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__default(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__default(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__default.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 _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject6$s, _templateObject7$m;
+var FooterSection = /*#__PURE__*/styled__default(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__default(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__default(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__default.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 LogoAndDescriptionSection = /*#__PURE__*/styled__default(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__default.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__default(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"])));
@@ -12086,17 +11815,17 @@ var Footer = function Footer(_ref) {
   }, additionalInfo))));
 };
 
-var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
+var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
 var LIST_ITEM_GAP = 32;
-var AnchorTabbarWrapper = /*#__PURE__*/styled__default.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 AnchorTabbarWrapper = /*#__PURE__*/styled__default.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 bottomBorder = _ref.bottomBorder;
   return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
 }, zIndexes.anchor, function (_ref2) {
   var withShadow = _ref2.withShadow;
-  return withShadow && styled.css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && styled.css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
-var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
-var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
+var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var TabsList = /*#__PURE__*/styled__default.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%';
@@ -12367,17 +12096,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   })))) : null))));
 };
 
-var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
-var TitleCTAGridWrapper = /*#__PURE__*/styled__default.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 _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
+var TitleCTAGridWrapper = /*#__PURE__*/styled__default.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 sticky = _ref.sticky;
   return sticky ? 'sticky' : 'initial';
 }, zIndexes.anchor);
-var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
-var TitleCTAGridItem = /*#__PURE__*/styled__default.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 TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
+var TitleCTAGridItem = /*#__PURE__*/styled__default.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 title = _ref2.title;
   return title ? 'row' : 'row-reverse';
 }, devices.tablet, devices.mobile);
-var AnchorTitle = /*#__PURE__*/styled__default.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 AnchorTitle = /*#__PURE__*/styled__default.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 ButtonsDesktopWrapper = /*#__PURE__*/styled__default.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__default.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__default(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) {
@@ -12427,14 +12156,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
   }, message))));
 };
 
-var _templateObject$1r, _templateObject2$17, _templateObject3$U, _templateObject4$M;
-var UpsellBorderBox = /*#__PURE__*/styled__default.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__default(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__default.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__default(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$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L;
+var UpsellBorderBox = /*#__PURE__*/styled__default.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__default(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__default.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__default(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$1s;
-var Wrapper$a = /*#__PURE__*/styled__default.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 _templateObject$1r;
+var Wrapper$a = /*#__PURE__*/styled__default.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 UpsellCards = function UpsellCards(_ref) {
   var upsellCards = _ref.upsellCards;
@@ -12496,9 +12225,9 @@ var UpsellSection = function UpsellSection(_ref) {
   })))));
 };
 
-var _templateObject$1t, _templateObject2$18;
-var StickyBarWrapper = /*#__PURE__*/styled__default.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__default(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 _templateObject$1s, _templateObject2$17;
+var StickyBarWrapper = /*#__PURE__*/styled__default.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__default(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 bottomBorder = _ref.bottomBorder;
   return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
 }, devices.mobileAndTablet, devices.mobile);
@@ -12529,11 +12258,11 @@ var StickyBar = function StickyBar(_ref) {
   }, children)));
 };
 
-var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N;
-var InnerModal = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Overlay = /*#__PURE__*/styled__default(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 _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M;
+var InnerModal = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Overlay = /*#__PURE__*/styled__default(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 _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
 var MAX_Z_INDEX = 9999999999;
@@ -12737,21 +12466,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$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
-var ImageCarouselWrapper = /*#__PURE__*/styled__default.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 _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
+var ImageCarouselWrapper = /*#__PURE__*/styled__default.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 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__default.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n}"])), function (_ref3) {
+var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__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__default(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__default.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 TitleButtonsGrid = /*#__PURE__*/styled__default(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__default.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 TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref4) {
   var isDescriptionPresent = _ref4.isDescriptionPresent;
   return isDescriptionPresent && 'margin: 20px 0';
@@ -13002,11 +12731,11 @@ var Carousel = function Carousel(_ref) {
   }, children))));
 };
 
-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__default(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__default.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__default.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var InfoWrapper$2 = /*#__PURE__*/styled__default.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 _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__default(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__default.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__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var InfoWrapper$2 = /*#__PURE__*/styled__default.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 InfoLogoWrapper = /*#__PURE__*/styled__default.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__default.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__default.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);
@@ -13152,7 +12881,7 @@ var VideoSlide = function VideoSlide(_ref) {
   });
   return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
     isCurrentSlide: isCurrentSlide
-  }, /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
+  }, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
     video: video,
     settings: settings
   }));
@@ -13327,9 +13056,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
   })));
 };
 
-var _templateObject$1x, _templateObject3$Y;
-var CarouselWrapper$1 = /*#__PURE__*/styled__default.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__default.div(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
+var _templateObject$1w, _templateObject3$X;
+var CarouselWrapper$1 = /*#__PURE__*/styled__default.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__default.div(_templateObject3$X || (_templateObject3$X = /*#__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;
@@ -13924,8 +13653,8 @@ var Theme = function Theme(_ref) {
   }, children);
 };
 
-var _templateObject$1y;
-var GlobalStyles = /*#__PURE__*/styled.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 _templateObject$1x;
+var GlobalStyles = /*#__PURE__*/styled.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 theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -14872,10 +14601,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1y || (
   return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
 
-var _templateObject$1z, _templateObject2$1c, _templateObject3$Z;
-var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var AttributionBlock = /*#__PURE__*/styled__default(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);
+var _templateObject$1y, _templateObject2$1b, _templateObject3$Y;
+var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+var AttributionBlock = /*#__PURE__*/styled__default(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);
 
 /* eslint-disable react/no-danger */
 var Quote = function Quote(_ref) {
@@ -15010,7 +14739,7 @@ exports.TypeTags = TypeTags;
 exports.UpsellCard = UpsellCard;
 exports.UpsellSection = UpsellSection;
 exports.VideoControls = VideoControls;
-exports.VideoWithControls = VideoWithControls$2;
+exports.VideoWithControls = VideoWithControls$1;
 exports.breakpoints = breakpoints;
 exports.devices = devices;
 exports.useHarmonicTheme = useHarmonicTheme;