{"version":3,"sources":["webpack:///./src/helpers/fonts.ts","webpack:///./src/helpers/grid.ts","webpack:///./src/stories/Components/Misc/SectionWrapper/SectionWrapper.tsx","webpack:///./src/hooks/useIntersectionObserver.ts","webpack:///./src/hooks/useInView.ts","webpack:///./src/helpers/media.ts","webpack:///./src/stories/Components/Buttons/LinkButton/LinkButton.tsx","webpack:///./src/helpers/brand.ts","webpack:///./src/stories/Components/Buttons/Button/Button.styles.ts","webpack:///./src/img/misc/cta-section-bg-overlap.svg","webpack:///./src/stories/Widgets/CtaSection/CtaSection.styles.ts","webpack:///./src/stories/Widgets/CtaSection/CtaSection.tsx","webpack:///./src/stories/Components/Misc/SectionWrapper/SectionWrapper.styles.ts","webpack:///./src/helpers/fluid.ts","webpack:///./src/helpers/srOnly.ts","webpack:///./src/img/icons/button-arrow.svg","webpack:///./src/helpers/animate.ts","webpack:///./src/img/misc/cta-section-bg.svg","webpack:///./src/helpers/typography.ts"],"names":["altGothicNo2","regular","css","apercu","light","lightItalic","bold","SitePaddingMin","SiteWidthBreakpoint","SiteWidth","siteWide","fluid","baseGrid","SectionWrapper","React","ref","children","layout","hideOverflow","otherProps","S","Container","Inner","displayName","useIntersectionObserver","callback","options","observerRef","useRef","rootRef","elementRef","useEffect","current","IntersectionObserver","root","observe","disconnect","useInView","reverse","isEditMode","inView","setInView","useState","firstCheck","setFirstCheck","entries","boundingClientRect","top","window","outerHeight","isIntersecting","Device","from","size","until","LinkButton","buttonSize","buttonType","fillDirection","icon","SvgArrow","iconOnly","iconPosition","FocusRing","focusRingClass","as","Text","IconWrapper","black","blackDark","grey","greyMidLight","greyMid","greyDark","pureBlack","white","yellow","green","availability","amber","red","validation","invalid","valid","styled","button","transition","brand","TabletLarge","span","fonts","srOnly","ButtonStyles","div","_path","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","SvgCtaSectionBgOverlap","props","xmlns","viewBox","fill","d","ContentWrapper","Tablet","Title","h2","h1","TitleFill","shouldAnimate","titleFill","Content","contentStyles","CtaWrapper","OverlapLogo","CtaSectionStyles","BackgroundLogo","CtaSection","align","overlap","theme","rootMargin","pageContext","id","className","SvgBgOverlap","SvgBg","style","title","content","dangerouslySetInnerHTML","__html","cta1","cta2","href","url","text","SectionWrapperStyles","section","DEFAULT_MIN_VALUE","TabletSmall","DEFAULT_MAX_VALUE","DesktopLarge","min","max","minWidth","maxWidth","minRem","maxRem","minWidthRem","maxWidthRem","slope","yAxisIntersection","clampMin","round","clampVal","clampMax","num","Math","_g","SvgButtonArrow","stroke","strokeWidth","cubicEaseOut","innerCss","properties","duration","timing","SvgCtaSectionBg","headerLink","MobileLarge","headingStyles","h3","h4","h5","h6","paragraphStyles","paragraphLarge","paragraphMedium","paragraphSmall","paragraphMicro","meta","link","table","blockquote","contentStylesSmall"],"mappings":"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","file":"CtaSection-efdd357922704de46884.js","sourcesContent":["import { css } from 'styled-components';\r\nexport default {\r\n    altGothicNo2: {\r\n        regular: css `\r\n      font-family: 'Alternate Gothic No2 D', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n    `,\r\n    },\r\n    apercu: {\r\n        light: css `\r\n      font-family: 'Apercu', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        lightItalic: css `\r\n      font-family: 'Apercu', sans-serif;\r\n      font-style: italic;\r\n      font-weight: 300;\r\n    `,\r\n        bold: css `\r\n      font-family: 'Apercu', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n    },\r\n};\r\n","import { css } from 'styled-components';\r\nimport { fluid } from './fluid';\r\nexport const SitePaddingMin = 12;\r\nexport const SitePaddingMax = 64;\r\nexport const SiteWidth = 1756;\r\nexport const SiteWidthBreakpoint = SiteWidth + SitePaddingMax * 2;\r\nexport const siteWide = css `\r\n  /* The minimum amount of space between the content and the edge of the viewport. */\r\n  --sitePadding: ${fluid(SitePaddingMin, SitePaddingMax)};\r\n\r\n  /* Max site container width */\r\n  --siteWidth: calc(${SiteWidth}px + (var(--sitePadding) * 2));\r\n\r\n  /* The amount of space between the edge of the site container and the viewport, will be 0px on smaller screens. */\r\n  --siteMargin: calc((100vw - min(var(--siteWidth), 100vw)) / 2);\r\n\r\n  margin: 0 auto;\r\n  max-width: var(--siteWidth);\r\n  padding: 0 var(--sitePadding);\r\n  width: 100%;\r\n`;\r\nexport const baseGrid = css `\r\n  --gutterWidth: ${fluid(10, 32)};\r\n\r\n  display: grid;\r\n  column-gap: var(--gutterWidth);\r\n  grid-template-columns: repeat(12, 1fr);\r\n`;\r\n","import * as React from 'react';\r\nimport S from './SectionWrapper.styles';\r\nconst SectionWrapper = React.forwardRef(({ children, layout = 'default', hideOverflow, ...otherProps }, ref) => {\r\n    switch (layout) {\r\n        case 'fullWidth':\r\n            return (React.createElement(S.Container, { ref: ref, \"data-hide-overflow\": hideOverflow, ...otherProps }, children));\r\n        case 'default':\r\n        default:\r\n            return (React.createElement(S.Container, { ref: ref, \"data-hide-overflow\": hideOverflow, ...otherProps },\r\n                React.createElement(S.Inner, null, children)));\r\n    }\r\n});\r\nSectionWrapper.displayName = 'SectionWrapper';\r\nexport default SectionWrapper;\r\n","import { useEffect, useRef } from 'react';\r\n/**\r\n * Use the IntersectionObserver to track visibility of an element in the viewport.\r\n * @param {IntersectionObserverCallback} callback\r\n * @param {IntersectionObserverInit} options\r\n * @returns {UseIntersectionObserverReturn}\r\n */\r\nfunction useIntersectionObserver(callback, options = {}) {\r\n    const observerRef = useRef(null);\r\n    const rootRef = useRef(null);\r\n    const elementRef = useRef(null);\r\n    useEffect(() => {\r\n        if (!elementRef.current) {\r\n            return undefined;\r\n        }\r\n        observerRef.current = new IntersectionObserver(callback, {\r\n            root: rootRef.current,\r\n            ...options,\r\n        });\r\n        observerRef.current.observe(elementRef.current);\r\n        return () => {\r\n            if (observerRef.current === null) {\r\n                return;\r\n            }\r\n            observerRef.current.disconnect();\r\n        };\r\n    }, [callback, options]);\r\n    return { elementRef, observerRef, rootRef };\r\n}\r\nexport default useIntersectionObserver;\r\n","import { useState } from 'react';\r\nimport useIntersectionObserver from './useIntersectionObserver';\r\nexport function useInView(options, reverse = false, isEditMode = false) {\r\n    const [inView, setInView] = useState(false);\r\n    const [firstCheck, setFirstCheck] = useState(false);\r\n    const { elementRef } = useIntersectionObserver((entries) => {\r\n        /**\r\n         * If element is above the fold on first check,\r\n         * set inView to true to prevent empty space\r\n         */\r\n        if (!firstCheck) {\r\n            setFirstCheck(true);\r\n            if (entries[0].boundingClientRect.top < window.outerHeight) {\r\n                setInView(true);\r\n            }\r\n        }\r\n        if (entries[0].isIntersecting) {\r\n            setInView(true);\r\n        }\r\n        else if (reverse === true) {\r\n            setInView(false);\r\n        }\r\n    }, options);\r\n    return [elementRef, isEditMode ? true : inView];\r\n}\r\nexport function useWithInView(options, reverse = false, isEditMode = false) {\r\n    const [inView, setInView] = useState(false);\r\n    const [firstCheck, setFirstCheck] = useState(false);\r\n    const { elementRef } = useIntersectionObserver((entries) => {\r\n        /**\r\n         * If element is above the fold on first check,\r\n         * set inView to true to prevent empty space\r\n         */\r\n        if (!firstCheck) {\r\n            setFirstCheck(true);\r\n            console.log(entries[0].boundingClientRect, window.outerHeight);\r\n            if (entries[0].boundingClientRect.bottom < window.outerHeight && entries[0].boundingClientRect.top > 200) {\r\n                setInView(true);\r\n            }\r\n        }\r\n        if (entries[0].boundingClientRect.bottom < window.outerHeight && entries[0].boundingClientRect.top > 200) {\r\n            setInView(true);\r\n        }\r\n        else {\r\n            setInView(false);\r\n        }\r\n    }, options);\r\n    return [elementRef, isEditMode ? true : inView];\r\n}\r\n","export var Device;\r\n(function (Device) {\r\n    Device[Device[\"MobileSmall\"] = 320] = \"MobileSmall\";\r\n    Device[Device[\"Mobile\"] = 375] = \"Mobile\";\r\n    Device[Device[\"MobileLarge\"] = 480] = \"MobileLarge\";\r\n    Device[Device[\"TabletSmall\"] = 568] = \"TabletSmall\";\r\n    Device[Device[\"Tablet\"] = 768] = \"Tablet\";\r\n    Device[Device[\"TabletLarge\"] = 1024] = \"TabletLarge\";\r\n    Device[Device[\"DesktopSmall\"] = 1280] = \"DesktopSmall\";\r\n    Device[Device[\"Desktop\"] = 1366] = \"Desktop\";\r\n    Device[Device[\"DesktopLarge\"] = 1600] = \"DesktopLarge\";\r\n    Device[Device[\"ActualDesktop\"] = 1920] = \"ActualDesktop\";\r\n    Device[Device[\"DesktopXL\"] = 2560] = \"DesktopXL\";\r\n})(Device || (Device = {}));\r\nexport function from(size) {\r\n    return `(min-width: ${size}px)`;\r\n}\r\nexport function until(size) {\r\n    return `(max-width: ${size - 1}px)`;\r\n}\r\nexport function between(start, end) {\r\n    return `${from(start)} and ${until(end)}`;\r\n}\r\n","import { ReactComponent as SvgArrow } from '@img/icons/button-arrow.svg';\r\nimport * as React from 'react';\r\nimport { FocusRing } from 'react-aria';\r\nimport S from '../Button/Button.styles';\r\nconst LinkButton = ({ buttonSize = 'default', buttonType = 'default', children, fillDirection = 'right', icon = React.createElement(SvgArrow, null), iconOnly, iconPosition = 'right', ...otherProps }) => {\r\n    return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n        React.createElement(S.Container, { as: \"a\", \"data-fill\": fillDirection, \"data-icon-only\": iconOnly, \"data-icon-position\": iconPosition, \"data-size\": buttonSize, \"data-type\": buttonType, ...otherProps },\r\n            React.createElement(S.Text, null, children),\r\n            icon && React.createElement(S.IconWrapper, null, icon))));\r\n};\r\nexport default LinkButton;\r\n","export default {\r\n    black: '#282828',\r\n    blackDark: '#121212',\r\n    grey: '#f4f4f4',\r\n    greyMidLight: '#BABABA',\r\n    greyMid: '#707070',\r\n    greyDark: '#4a4a4a',\r\n    pureBlack: '#000000',\r\n    white: '#ffffff',\r\n    yellow: '#ffdc00',\r\n    green: '#80C342',\r\n    availability: {\r\n        green: '#68F087',\r\n        amber: '#FFA969',\r\n        red: '#F84848',\r\n    },\r\n    validation: {\r\n        invalid: '#da291c',\r\n        valid: '#008c15',\r\n    },\r\n};\r\n","import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, until } from '@helpers/media';\r\nimport srOnly from '@helpers/srOnly';\r\nimport styled from 'styled-components';\r\nconst Container = styled.button `\r\n  --doorSize: 18px;\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border: var(--borderWidth, 0) solid var(--colorBorder, var(--colorBg));\r\n  background: var(--colorBg);\r\n  background-image: linear-gradient(to right, var(--colorBgActive), var(--colorBgActive));\r\n  background-repeat: no-repeat;\r\n  background-size: var(--bgSize);\r\n  color: var(--colorFg);\r\n  height: 55px;\r\n  padding: 0px 32px;\r\n  text-decoration: none;\r\n  ${transition('background-size, border-color, opacity')};\r\n  user-select: none;\r\n  width: auto;\r\n\r\n  &[data-fill='right'] {\r\n    background-position: left center;\r\n  }\r\n\r\n  &[data-fill='left'] {\r\n    background-position: right center;\r\n  }\r\n\r\n  &[data-size='small'] {\r\n    --doorSize: 10px;\r\n\r\n    height: 36px;\r\n    padding: 0 14px;\r\n  }\r\n\r\n  span& {\r\n    button:focus &,\r\n    a:focus & {\r\n      outline: auto;\r\n      outline-offset: 3px;\r\n    }\r\n\r\n    @media (hover: hover) or (pointer: fine) {\r\n      button:hover &,\r\n      a:hover & {\r\n        border-color: var(--colorBorderActive, var(--colorBgActive));\r\n        color: var(--colorFgActive);\r\n        background-size: var(--bgSizeActive);\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    cursor: pointer;\r\n    outline: none;\r\n\r\n    &.focus-ring {\r\n      outline: auto;\r\n      outline-offset: 5px;\r\n    }\r\n\r\n    @media (hover: hover) or (pointer: fine) {\r\n      &:hover {\r\n        border-color: var(--colorBorderActive, var(--colorBgActive));\r\n        color: var(--colorFgActive);\r\n        background-size: var(--bgSizeActive);\r\n      }\r\n    }\r\n  }\r\n\r\n  &[data-type='default'] {\r\n    --borderWidth: 2px;\r\n\r\n    --bgSize: 100% 100%;\r\n    --colorFg: ${brand.black};\r\n    --colorBg: transparent;\r\n    --colorBorder: ${brand.yellow};\r\n\r\n    --bgSizeActive: 0% 100%;\r\n    --colorFgActive: ${brand.black};\r\n    --colorBgActive: ${brand.yellow};\r\n    --colorBorderActive: ${brand.yellow};\r\n\r\n    [data-theme='transparent'] &,\r\n    [data-theme='dark'] & {\r\n      --colorFgActive: ${brand.white};\r\n    }\r\n  }\r\n\r\n  &[data-type='default-green'] {\r\n    --borderWidth: 2px;\r\n\r\n    --bgSize: 100% 100%;\r\n    --colorFg: ${brand.black};\r\n    --colorBg: transparent;\r\n    --colorBorder: ${brand.green};\r\n\r\n    --bgSizeActive: 0% 100%;\r\n    --colorFgActive: ${brand.black};\r\n    --colorBgActive: ${brand.green};\r\n    --colorBorderActive: ${brand.green};\r\n\r\n    [data-theme='transparent'] &,\r\n    [data-theme='dark'] & {\r\n      --colorFgActive: ${brand.white};\r\n    }\r\n  }\r\n\r\n  &[data-type='default-alt'] {\r\n    --borderWidth: 2px;\r\n\r\n    --bgSize: 100% 100%;\r\n    --colorFg: ${brand.black};\r\n    --colorBg: transparent;\r\n    --colorBorder: ${brand.yellow};\r\n\r\n    --bgSizeActive: 0% 100%;\r\n    --colorFgActive: ${brand.yellow};\r\n    --colorBgActive: ${brand.yellow};\r\n    --colorBorderActive: ${brand.yellow};\r\n  }\r\n\r\n  &[data-type='outline'] {\r\n    --borderWidth: 2px;\r\n\r\n    --bgSize: 0% 100%;\r\n    --colorFg: ${brand.yellow};\r\n    --colorBg: transparent;\r\n    --colorBorder: ${brand.yellow};\r\n\r\n    --bgSizeActive: 100% 100%;\r\n    --colorFgActive: ${brand.black};\r\n    --colorBgActive: ${brand.yellow};\r\n    --colorBorderActive: ${brand.yellow};\r\n  }\r\n\r\n  &[data-type='outline-alt'] {\r\n    --borderWidth: 2px;\r\n\r\n    --bgSize: 0% 100%;\r\n    --colorFg: ${brand.black};\r\n    --colorBg: ${brand.white};\r\n    --colorBorder: ${brand.black};\r\n\r\n    --bgSizeActive: 100% 100%;\r\n    --colorFgActive: ${brand.white};\r\n    --colorBgActive: ${brand.black};\r\n    --colorBorderActive: ${brand.black};\r\n\r\n    [data-theme='dark'] & {\r\n      --colorBorder: ${brand.white};\r\n      --colorBorderActive: ${brand.white};\r\n    }\r\n  }\r\n\r\n  &[data-icon-only='true'] {\r\n    height: 55px;\r\n    justify-content: center;\r\n    padding: 0;\r\n    width: 55px;\r\n  }\r\n\r\n  /* Increase specificity to override :not(span) style */\r\n  &:disabled:disabled:disabled {\r\n    background-size: 100% 100%;\r\n    opacity: 0.5;\r\n    pointer-events: none;\r\n  }\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    height: 45px;\r\n    padding: 0px 12px;\r\n\r\n    &[data-icon-only='true'] {\r\n      height: 45px;\r\n      width: 45px;\r\n    }\r\n  }\r\n\r\n  /** door opening animation on button hover */\r\n  &[data-type='default'][data-fill='right'],\r\n  &[data-type='default-alt'][data-fill='right'],\r\n  &[data-type='default-green'][data-fill='right'] {\r\n    /* hide border to replace with clip path */\r\n    border: 0;\r\n    position: relative;\r\n\r\n    &::before,\r\n    &::after {\r\n      content: '';\r\n      display: block;\r\n      position: absolute;\r\n    }\r\n\r\n    &::before {\r\n      /* create semi-complete border using clip path */\r\n      clip-path: polygon(\r\n        0% 0,\r\n        0% 100%,\r\n        101% 100%,\r\n        101% calc(50% + (var(--doorSize, 0) * 0.5)),\r\n        calc(100% - var(--borderWidth, 0)) calc(50% + (var(--doorSize, 0) * 0.5)),\r\n        calc(100% - var(--borderWidth, 0)) calc(100% - var(--borderWidth, 0)),\r\n        var(--borderWidth, 0) calc(100% - var(--borderWidth, 0)),\r\n        var(--borderWidth, 0) var(--borderWidth),\r\n        calc(100% - var(--borderWidth, 0)) var(--borderWidth, 0),\r\n        calc(100% - var(--borderWidth, 0)) calc(50% - (var(--doorSize, 0) * 0.5)),\r\n        100% calc(50% - (var(--doorSize, 0) * 0.5)),\r\n        100% 0%\r\n      );\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: var(--colorBorder);\r\n    }\r\n\r\n    /* cover gap in clip path to create solid border */\r\n    &::after {\r\n      ${transition('transform')};\r\n\r\n      width: var(--borderWidth, 0);\r\n      height: calc(var(--doorSize, 0) + 2px);\r\n      transform-origin: 0 0;\r\n      top: calc(50% - (var(--doorSize, 0) * 0.5) - 1px);\r\n      right: 0;\r\n      background-color: var(--colorBorder);\r\n    }\r\n\r\n    @media (hover: hover) or (pointer: fine) {\r\n      &:hover::after {\r\n        transform: rotate(40deg);\r\n      }\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    display: none !important;\r\n  }\r\n`;\r\nconst Text = styled.span `\r\n  ${transition('color')};\r\n\r\n  color: currentColor;\r\n  ${fonts.altGothicNo2.regular};\r\n  font-size: 22px;\r\n  line-height: 21px;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n\r\n  [data-icon-only='true'] & {\r\n    ${srOnly};\r\n  }\r\n`;\r\nconst IconWrapper = styled.div `\r\n  --size: 14px;\r\n  --spacing: 12px;\r\n\r\n  display: block;\r\n  color: currentColor;\r\n  height: var(--size);\r\n  margin: 0;\r\n  padding: 0;\r\n  ${transition('color')};\r\n  width: calc(var(--size) + var(--spacing));\r\n\r\n  [data-icon-position='left'] & {\r\n    margin-right: auto;\r\n    order: -1;\r\n    padding-right: var(--spacing);\r\n  }\r\n\r\n  [data-icon-position='right'] & {\r\n    margin-left: auto;\r\n    order: 1;\r\n    padding-left: var(--spacing);\r\n  }\r\n\r\n  [data-icon-only='true'] & {\r\n    color: currentColor;\r\n    height: var(--size);\r\n    margin: 0;\r\n    padding: 0;\r\n    width: var(--size);\r\n  }\r\n`;\r\nconst ButtonStyles = {\r\n    Container,\r\n    IconWrapper,\r\n    Text,\r\n};\r\nexport default ButtonStyles;\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgCtaSectionBgOverlap(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"1.74 2.2 370.26 682.44\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    fill: \"currentColor\",\n    d: \"M292.25 76.54L372 122.58V59.75L272.33 2.2 177.6 166.28l47.13 27.21zM372 621.81L76.08 450.96 138 343.71l145.85-39.09-14.08-52.57-156.74 42-10.93 2.98L1.74 470.87 372 684.64z\"\n  })));\n}\n\nexport default __webpack_public_path__ + \"1c626da1fc062375de2e57552942d0bf.svg\";\nexport { SvgCtaSectionBgOverlap as ReactComponent };","import { shouldAnimate, titleFill, transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { baseGrid } from '@helpers/grid';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport { contentStyles, h1 } from '@helpers/typography';\r\nimport SectionWrapper from '@stories/Components/Misc/SectionWrapper/SectionWrapper';\r\nimport styled, { css } from 'styled-components';\r\nconst Container = styled(SectionWrapper) `\r\n  --logoSize: min(728px, calc(728 / 1920 * 100vw));\r\n  --containerSize: min(990px, calc(990 / 1920 * 100vw));\r\n\r\n  position: relative;\r\n  display: flex;\r\n  background-color: var(--bgColor);\r\n  color: var(--fgColor);\r\n  margin: 0;\r\n  min-height: var(--containerSize);\r\n  overflow: hidden;\r\n  padding: var(--sectionSpacing) 0;\r\n  scroll-margin: var(--scrollOffset) 0 0;\r\n\r\n  &[data-align='center'] {\r\n    align-items: center;\r\n  }\r\n\r\n  &[data-align='top'] {\r\n    align-items: flex-start;\r\n  }\r\n\r\n  &[data-overlap='true'] {\r\n    overflow: visible;\r\n  }\r\n\r\n  &[data-theme='dark'] {\r\n    --bgColor: ${brand.black};\r\n    --fgColor: ${brand.white};\r\n  }\r\n\r\n  &[data-theme='light'] {\r\n    --bgColor: ${brand.white};\r\n    --fgColor: ${brand.black};\r\n  }\r\n`;\r\nconst Inner = styled.div `\r\n  ${baseGrid}\r\n  align-items: center;\r\n`;\r\nconst ContentWrapper = styled.div `\r\n  grid-column: 1 / span 12;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    grid-column: 2 / span 6;\r\n  }\r\n`;\r\nconst Title = styled.h2 `\r\n  ${h1}\r\n`;\r\nconst TitleFill = styled.span `\r\n  &[data-fill='false'] {\r\n    ${transition('opacity')}\r\n\r\n    ${shouldAnimate(css `\r\n      transition-delay: 0.15s;\r\n\r\n      [data-animate='false'] & {\r\n        opacity: 0;\r\n      }\r\n\r\n      [data-animate='true'] & {\r\n        opacity: 1;\r\n      }\r\n    `)}\r\n  }\r\n\r\n  &[data-fill='true'] {\r\n    --delay: 0.15s;\r\n    ${titleFill}\r\n  }\r\n`;\r\nconst Content = styled.div `\r\n  ${contentStyles}\r\n  margin: 0;\r\n\r\n  ${transition('opacity')}\r\n\r\n  ${shouldAnimate(css `\r\n    transition-delay: 0.3s;\r\n\r\n    [data-animate='false'] & {\r\n      opacity: 0;\r\n    }\r\n\r\n    [data-animate='true'] & {\r\n      opacity: 1;\r\n    }\r\n  `)}\r\n`;\r\nconst CtaWrapper = styled.div `\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 12px;\r\n  margin-top: ${fluid(16, 32)};\r\n\r\n  ${transition('opacity')}\r\n\r\n  ${shouldAnimate(css `\r\n    transition-delay: 0.45s;\r\n    [data-animate='false'] & {\r\n      opacity: 0;\r\n    }\r\n\r\n    [data-animate='true'] & {\r\n      opacity: 1;\r\n    }\r\n  `)}\r\n`;\r\nconst OverlapLogo = styled.span `\r\n  ${transition('opacity')}\r\n\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n  display: block;\r\n  color: ${brand.yellow};\r\n  transform: translateY(-15%);\r\n  height: var(--logoSize);\r\n  width: auto;\r\n\r\n  ${shouldAnimate(css `\r\n    [data-animate='false'] & {\r\n      opacity: 0;\r\n    }\r\n\r\n    [data-animate='true'] & {\r\n      opacity: 1;\r\n    }\r\n  `)}\r\n\r\n  ${Container}[data-overlap='true'] & {\r\n    height: var(--containerSize);\r\n  }\r\n\r\n  @media ${until(Device.Tablet)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst BackgroundLogo = styled.span `\r\n  ${transition('opacity, transform', 1.5)}\r\n\r\n  position: absolute;\r\n  right: 0;\r\n  top: 50%;\r\n  display: block;\r\n  color: ${brand.yellow};\r\n  height: var(--logoSize);\r\n  transform: translateX(50%) translateY(-50%) rotate(-150deg);\r\n  transform-origin: center center;\r\n  width: var(--logoSize);\r\n\r\n  ${shouldAnimate(css `\r\n    [data-animate='false'] & {\r\n      opacity: 0;\r\n      transform: translateX(50%) translateY(-50%) rotate(-180deg);\r\n    }\r\n\r\n    [data-animate='true'] & {\r\n      opacity: 1;\r\n      transform: translateX(50%) translateY(-50%) rotate(-150deg);\r\n    }\r\n  `)}\r\n\r\n  @media ${until(Device.Tablet)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst CtaSectionStyles = {\r\n    BackgroundLogo,\r\n    Container,\r\n    Content,\r\n    ContentWrapper,\r\n    CtaWrapper,\r\n    Inner,\r\n    OverlapLogo,\r\n    Title,\r\n    TitleFill,\r\n};\r\nexport default CtaSectionStyles;\r\n","import { rootMargin } from '@helpers/animate';\r\nimport { useInView } from '@hooks/useInView';\r\nimport { ReactComponent as SvgBgOverlap } from '@img/misc/cta-section-bg-overlap.svg';\r\nimport { ReactComponent as SvgBg } from '@img/misc/cta-section-bg.svg';\r\nimport LinkButton from '@stories/Components/Buttons/LinkButton/LinkButton';\r\nimport * as React from 'react';\r\nimport S from './CtaSection.styles';\r\nconst CtaSection = ({ align = 'center', overlap = false, theme = 'dark', ...props }) => {\r\n    const [ref, inView] = useInView({ rootMargin }, false, props.pageContext?.isEditMode);\r\n    return (React.createElement(S.Container, { ref: ref, id: props.id, \"data-animate\": inView, \"data-align\": align, \"data-overlap\": overlap, \"data-theme\": theme, className: props.className },\r\n        overlap ? React.createElement(S.OverlapLogo, { as: SvgBgOverlap }) : React.createElement(S.BackgroundLogo, { as: SvgBg }),\r\n        React.createElement(S.Inner, null,\r\n            React.createElement(S.ContentWrapper, null,\r\n                React.createElement(S.Title, null,\r\n                    React.createElement(S.TitleFill, { \"data-fill\": theme === 'dark', style: { '--length': props.title.length } }, props.title)),\r\n                props.content && React.createElement(S.Content, { dangerouslySetInnerHTML: { __html: props.content } }),\r\n                (props.cta1 || props.cta2) && (React.createElement(S.CtaWrapper, null,\r\n                    props.cta1 && (React.createElement(LinkButton, { buttonSize: \"small\", buttonType: theme === 'dark' ? 'default-alt' : 'default', href: props.cta1.url, target: props.cta1.target }, props.cta1.text)),\r\n                    props.cta2 && (React.createElement(LinkButton, { buttonSize: \"small\", buttonType: theme === 'dark' ? 'outline' : 'outline-alt', href: props.cta2.url, target: props.cta2.target }, props.cta2.text))))))));\r\n};\r\nexport default CtaSection;\r\n","import { fluid } from '@helpers/fluid';\r\nimport { siteWide } from '@helpers/grid';\r\nimport styled from 'styled-components';\r\nconst Container = styled.section `\r\n  --sectionSpacing: ${fluid(48, 96)};\r\n\r\n  margin: var(--sectionSpacing) 0;\r\n  scroll-margin: calc(var(--scrollOffset) + var(--sectionSpacing)) 0 0;\r\n\r\n  &[data-hide-overflow='true'] {\r\n    overflow: hidden;\r\n  }\r\n`;\r\nconst Inner = styled.div `\r\n  ${siteWide}\r\n`;\r\nconst SectionWrapperStyles = {\r\n    Container,\r\n    Inner,\r\n};\r\nexport default SectionWrapperStyles;\r\n","import { Device } from './media';\r\n/**\r\n * Base pixel value for the \"rem\" unit.\r\n */\r\nexport const PIXELS_PER_REM = 16;\r\n/**\r\n * Default pixel value for the min width.\r\n */\r\nexport const DEFAULT_MIN_VALUE = Device.TabletSmall;\r\n/**\r\n * Default pixel value for the max width.\r\n */\r\nexport const DEFAULT_MAX_VALUE = Device.DesktopLarge;\r\n/**\r\n * Define a fluid value between the min/max values at the min/max widths.\r\n */\r\nexport function fluid(min, max, minWidth = DEFAULT_MIN_VALUE, maxWidth = DEFAULT_MAX_VALUE) {\r\n    const minRem = min / PIXELS_PER_REM;\r\n    const maxRem = max / PIXELS_PER_REM;\r\n    const minWidthRem = minWidth / PIXELS_PER_REM;\r\n    const maxWidthRem = maxWidth / PIXELS_PER_REM;\r\n    const slope = (maxRem - minRem) / (maxWidthRem - minWidthRem);\r\n    const yAxisIntersection = -minWidthRem * slope + minRem;\r\n    const clampMin = `${round(minRem)}rem`;\r\n    const clampVal = `${round(yAxisIntersection)}rem + ${round(slope * 100)}vw`;\r\n    const clampMax = `${round(maxRem)}rem`;\r\n    return `clamp(${clampMin}, ${clampVal}, ${clampMax})`;\r\n}\r\n/**\r\n * Round to nearest hundredth.\r\n */\r\nfunction round(num) {\r\n    return Math.round(num * 100) / 100;\r\n}\r\n","import { css } from 'styled-components';\r\n/**\r\n * Show only for screen readers.\r\n * @description Sourced from https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034\r\n */\r\nconst srOnly = css `\r\n  border: 0 !important;\r\n  clip: rect(1px, 1px, 1px, 1px) !important;\r\n  -webkit-clip-path: inset(50%) !important;\r\n  clip-path: inset(50%) !important;\r\n  height: 1px !important;\r\n  margin: -1px !important;\r\n  overflow: hidden !important;\r\n  padding: 0 !important;\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  white-space: nowrap !important;\r\n`;\r\nexport default srOnly;\r\n","var _g;\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgButtonArrow(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"-1 -0.3 16 16\"\n  }, props), _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 2,\n    \"data-name\": \"Group 42\"\n  }, /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M0 7.785h12.621\",\n    \"data-name\": \"Line 1\"\n  }), /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M7.081.703l6.919 7-6.919 7\",\n    \"data-name\": \"Path 16\"\n  }))));\n}\n\nexport default __webpack_public_path__ + \"884cbed45f6e6ade11638851e135eba6.svg\";\nexport { SvgButtonArrow as ReactComponent };","import { css } from 'styled-components';\r\nimport brand from './brand';\r\nexport const rootMargin = '0px 0px -33% 0px';\r\nexport const cubicEaseOut = `cubic-bezier(0.33, 1, 0.68, 1)`;\r\nexport const shouldAnimate = (innerCss) => {\r\n    return css `\r\n    @media (prefers-reduced-motion: no-preference) {\r\n      ${innerCss}\r\n    }\r\n  `;\r\n};\r\nexport const transition = (properties, duration = 0.35, timing = cubicEaseOut) => {\r\n    return shouldAnimate(css `\r\n    transition-duration: ${typeof duration === 'string' ? duration : `${duration}s`};\r\n    transition-property: ${properties};\r\n    transition-timing-function: ${timing};\r\n    will-change: ${properties};\r\n  `);\r\n};\r\nconst TITLE_FILL_SPEED = '0.1s';\r\nexport const titleFill = shouldAnimate(css `\r\n  @supports (background-clip: text) or (-webkit-background-clip: text) {\r\n    ${transition('opacity, background-size', `0.25s, var(--duration, calc(var(--length) * var(--speed, ${TITLE_FILL_SPEED})))`)}\r\n    transition-delay: var(--delay, 0.15s), calc(var(--delay, 0.15s) * 2);\r\n\r\n    display: inline;\r\n    -webkit-background-clip: text;\r\n    background-clip: text;\r\n    background-color: var(--textColor, ${brand.white});\r\n    background-image: linear-gradient(\r\n      to right,\r\n      var(--fillColor, ${brand.yellow}),\r\n      var(--fillColor, ${brand.yellow})\r\n    );\r\n    background-repeat: no-repeat;\r\n    background-size: 0% 100%;\r\n    color: transparent;\r\n    opacity: 0;\r\n\r\n    [data-animate='true'] & {\r\n      background-size: 100% 100%;\r\n      opacity: 1;\r\n    }\r\n  }\r\n`);\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgCtaSectionBg(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 724.1 724.1\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    \"data-name\": \"Path 119\",\n    d: \"M0 0v724.1h724.1V470.6h-72.817v180.689H72.812V72.812h578.471v165.7L508.42 381.379l51.492 51.5 153.52-153.526 10.668-10.77V0z\",\n    fill: \"currentColor\"\n  })));\n}\n\nexport default __webpack_public_path__ + \"ec7938714f37ea5c75fd9c28f9f387f1.svg\";\nexport { SvgCtaSectionBg as ReactComponent };","import { css } from 'styled-components';\r\nimport { transition } from './animate';\r\nimport brand from './brand';\r\nimport { fluid } from './fluid';\r\nimport fonts from './fonts';\r\nimport { Device, until } from './media';\r\nexport const headerLink = css `\r\n  ${transition('color, text-decoration-color')};\r\n\r\n  display: inline;\r\n  color: currentColor;\r\n  text-decoration: underline;\r\n  text-decoration-color: ${brand.yellow};\r\n  text-underline-offset: -0.19em;\r\n  text-underline-position: under;\r\n\r\n  @media ${until(Device.MobileLarge)} {\r\n    word-break: break-word;\r\n  }\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: auto;\r\n    outline-width: thin;\r\n  }\r\n\r\n  &:focus,\r\n  &:hover {\r\n    text-decoration-color: currentColor; \r\n  }\r\n`;\r\nexport const headingStyles = css `\r\n  color: currentColor;\r\n  ${fonts.altGothicNo2.regular};\r\n  margin: 0 0 ${fluid(16, 24)};\r\n  text-transform: uppercase;\r\n  a{\r\n    ${headerLink}\r\n  }\r\n\r\n`;\r\nexport const h1 = css `\r\n  ${headingStyles};\r\n  font-size: ${fluid(45, 96)};\r\n  line-height: ${fluid(45, 96)};\r\n`;\r\nexport const h2 = css `\r\n  ${headingStyles};\r\n  font-size: ${fluid(30, 56)};\r\n  line-height: ${fluid(30, 54)};\r\n`;\r\nexport const h3 = css `\r\n  ${headingStyles};\r\n  font-size: ${fluid(24, 30)};\r\n  line-height: ${fluid(24, 30)};\r\n`;\r\nexport const h4 = css `\r\n  ${headingStyles};\r\n  font-size: ${fluid(18, 20)};\r\n  line-height: ${fluid(18, 18)};\r\n`;\r\nexport const h5 = css `\r\n  ${headingStyles};\r\n  font-size: ${fluid(18, 20)};\r\n  line-height: ${fluid(18, 18)};\r\n`;\r\nexport const h6 = css `\r\n  ${headingStyles};\r\n  font-size: ${fluid(18, 18)};\r\n  line-height: ${fluid(22, 22)};\r\n`;\r\nexport const paragraphStyles = css `\r\n  color: currentColor;\r\n  ${fonts.apercu.light};\r\n  margin: 0 0 ${fluid(16, 24)};\r\n`;\r\nexport const paragraphLarge = css `\r\n  ${paragraphStyles};\r\n  font-size: ${fluid(18, 24)};\r\n  line-height: ${fluid(28, 32)};\r\n`;\r\nexport const paragraphMedium = css `\r\n  ${paragraphStyles};\r\n  font-size: ${fluid(16, 18)};\r\n  line-height: ${fluid(26, 26)};\r\n`;\r\nexport const paragraphSmall = css `\r\n  ${paragraphStyles};\r\n  font-size: ${fluid(14, 16)};\r\n  line-height: ${fluid(24, 24)};\r\n`;\r\nexport const paragraphMicro = css `\r\n  ${paragraphStyles};\r\n  font-size: ${fluid(12, 14)};\r\n  line-height: ${fluid(22, 24)};\r\n`;\r\nexport const meta = css `\r\n  display: block;\r\n  ${fonts.altGothicNo2.regular};\r\n  font-size: ${fluid(18, 18)};\r\n  line-height: ${fluid(22, 22)};\r\n  letter-spacing: 0.01em;\r\n  text-transform: uppercase;\r\n\r\n  sup {\r\n    font-size: 60%;\r\n  }\r\n`;\r\nexport const link = css `\r\n  ${transition('color, text-decoration-color')};\r\n\r\n  display: inline;\r\n  color: currentColor;\r\n  text-decoration: underline;\r\n  text-decoration-color: currentColor;\r\n  text-underline-position: under;\r\n\r\n  @media ${until(Device.MobileLarge)} {\r\n    word-break: break-word;\r\n  }\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: auto;\r\n    outline-width: thin;\r\n  }\r\n\r\n  &:focus,\r\n  &:hover {\r\n    text-decoration-color: ${brand.yellow};\r\n  }\r\n`;\r\nexport const table = css `\r\n  background: ${brand.white};\r\n  border-collapse: collapse;\r\n  color: ${brand.black};\r\n  margin-bottom: 1em;\r\n  width: 100%;\r\n\r\n  thead {\r\n    tr {\r\n      background: ${brand.black};\r\n\r\n      td,\r\n      th {\r\n        border: 2px solid ${brand.white};\r\n        color: ${brand.white};\r\n        ${fonts.altGothicNo2.regular};\r\n        font-size: 18px;\r\n        letter-spacing: -0.01em;\r\n        line-height: 22px;\r\n        padding: 12px 16px;\r\n        text-align: left;\r\n        text-transform: uppercase;\r\n      }\r\n    }\r\n  }\r\n\r\n  tbody {\r\n    tr {\r\n      &:nth-child(odd) {\r\n        background: ${brand.white};\r\n      }\r\n\r\n      &:nth-child(even) {\r\n        background: ${brand.white};\r\n      }\r\n\r\n      th {\r\n        border: 2px solid ${brand.white};\r\n        color: ${brand.white};\r\n        ${fonts.altGothicNo2.regular};\r\n        font-size: 18px;\r\n        letter-spacing: -0.01em;\r\n        line-height: 22px;\r\n        padding: 12px 16px;\r\n        text-align: left;\r\n        text-transform: uppercase;\r\n      }\r\n\r\n      td {\r\n        border: 2px solid ${brand.white};\r\n        ${fonts.apercu.light};\r\n        font-size: 16px;\r\n        letter-spacing: -0.01em;\r\n        line-height: 20px;\r\n        padding: 12px 16px;\r\n        text-align: left;\r\n      }\r\n    }\r\n  }\r\n  @media ${until(Device.TabletSmall)} {\r\n    padding: 4px;\r\n  }\r\n`;\r\nexport const blockquote = css `\r\n  ${paragraphLarge}\r\n\r\n  position: relative;\r\n  border-left: 4px solid currentColor;\r\n  padding-left: 16px;\r\n  text-align: left;\r\n`;\r\nexport const contentStyles = css `\r\n  h1,\r\n  .h1-styles {\r\n    ${h1}\r\n  }\r\n\r\n  h2,\r\n  .h2-styles {\r\n    ${h2}\r\n  }\r\n\r\n  h3,\r\n  .h3-styles {\r\n    ${h3}\r\n  }\r\n\r\n  h4,\r\n  .h4-styles {\r\n    ${h4}\r\n  }\r\n\r\n  h5,\r\n  .h5-styles {\r\n    ${h5}\r\n  }\r\n\r\n  p {\r\n    ${paragraphLarge}\r\n  }\r\n\r\n  p.small {\r\n    ${paragraphSmall}\r\n  }\r\n\r\n  a {\r\n    ${link}\r\n  }\r\n\r\n  ol,\r\n  ul {\r\n    ${paragraphLarge};\r\n\r\n    li {\r\n      &::marker {\r\n        color: ${brand.yellow};\r\n      }\r\n    }\r\n  }\r\n\r\n  ol {\r\n    list-style: decimal;\r\n    padding-left: 1.2em;\r\n  }\r\n\r\n  ul {\r\n    list-style: disc;\r\n    padding-left: 1.2em;\r\n  }\r\n\r\n  hr {\r\n    display: block;\r\n    background: currentColor;\r\n    border: 0;\r\n    height: 4px;\r\n    margin: ${fluid(40, 80)} 0;\r\n    padding: 0;\r\n    width: 100%;\r\n  }\r\n\r\n  table {\r\n    ${table};\r\n  }\r\n\r\n  blockquote {\r\n    ${blockquote};\r\n  }\r\n\r\n  .responsive-table {\r\n    position: relative;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  > *:first-child {\r\n    margin-top: 0;\r\n  }\r\n\r\n  > *:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n`;\r\nexport const contentStylesSmall = css `\r\n  h1,\r\n  .h1-styles {\r\n    ${h1}\r\n  }\r\n\r\n  h2,\r\n  .h2-styles {\r\n    ${h2}\r\n  }\r\n\r\n  h3,\r\n  .h3-styles {\r\n    ${h3}\r\n  }\r\n\r\n  h4,\r\n  .h4-styles {\r\n    ${h4}\r\n  }\r\n\r\n  h5,\r\n  .h5-styles {\r\n    ${h5}\r\n  }\r\n\r\n  p {\r\n    ${paragraphMedium}\r\n  }\r\n\r\n  p.small {\r\n    ${paragraphSmall}\r\n  }\r\n\r\n  a {\r\n    ${link}\r\n  }\r\n\r\n  ol,\r\n  ul {\r\n    ${paragraphMedium};\r\n\r\n    li {\r\n      &::marker {\r\n        color: ${brand.yellow};\r\n      }\r\n    }\r\n  }\r\n\r\n  ol {\r\n    list-style: decimal;\r\n    padding-left: 1.2em;\r\n  }\r\n\r\n  ul {\r\n    list-style: disc;\r\n    padding-left: 1.2em;\r\n  }\r\n\r\n  hr {\r\n    display: block;\r\n    background: currentColor;\r\n    border: 0;\r\n    height: 4px;\r\n    margin: ${fluid(40, 80)} 0;\r\n    padding: 0;\r\n    width: 100%;\r\n  }\r\n\r\n  table {\r\n    ${table};\r\n  }\r\n\r\n  blockquote {\r\n    ${blockquote};\r\n  }\r\n\r\n  .responsive-table {\r\n    position: relative;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  > *:first-child {\r\n    margin-top: 0;\r\n  }\r\n\r\n  > *:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n`;\r\n"],"sourceRoot":""}