/** * Swiper 11.1.14 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2024 Vladimir Kharlampidi * * Released under the MIT License * * Released on: September 12, 2024 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ *, *:before, *:after { box-sizing: border-box; } html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; /* `clip` instead of `hidden` so body is not a scrolling context — needed for `position: sticky` to work on descendants. */ overflow-x: clip; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: 700; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } svg { display: block; } img, svg, video { vertical-align: middle; max-width: 100%; } /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 0px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } .content-wrapper { margin: 0 auto; padding: 0 1rem; } .row-fluid-wrapper { position: relative; } @media screen and (min-width: 1380px) { .content-wrapper { padding: 0; } } .dnd-section > .row-fluid { margin: 0 auto; } .dnd-section .dnd-column { padding: 0 0rem; } @media (max-width: 768px) { .dnd-section .dnd-column { padding: 0; } } :root { --white: #FFFFFF; --grey: #383f47; --cardBorderColour: #E4E4E4; --bodyColour: #141517; --ctaPrimaryColour: #062951; --primaryColour: #062951; --secondaryColour: #e1e5ea; } /* ============================================= GLOBAL ============================================= */ a { text-decoration: none; color: var(--primaryColour); } /* ============================================= BASE BUTTONS ============================================= */ .btn, .hs-button.primary.large { outline: none; cursor: pointer; font-size: 1.6rem; text-wrap: nowrap; font-weight: 500; text-align: center; border-radius: 99999px; color: var(--white); display: inline-flex; align-items: center; text-decoration: none; padding: 12px 20px; transition: all 250ms ease; background: var(--ctaPrimaryColour); border: 2px solid var(--ctaPrimaryColour); height: 48px; background-color: #062951; color: var(--white); border-color: #062951; transform: translateY(0); box-shadow: none; } .btn:hover, .hs-button.primary.large:hover { background-color: #1F3E62; color: var(--white); border-color: #1F3E62; transform: translateY(-2px); box-shadow: 0 2px 0px #13192D; } .btn:active, .hs-button.primary.large:active { background-color: #062951; border-color: #062951; transform: translateY(0); box-shadow: none; } .btn.inverted { outline: none; cursor: pointer; font-size: 1.6rem; text-wrap: nowrap; font-weight: 500; text-align: center; border-radius: 99999px; color: var(--white); display: inline-flex; align-items: center; text-decoration: none; padding: 12px 20px; transition: all 250ms ease; background: var(--ctaPrimaryColour); border: 2px solid var(--ctaPrimaryColour); height: 48px; background-color: var(--white); color: #062951; border-color: var(--white); transform: translateY(0); box-shadow: none; } .btn.inverted:hover { background-color: var(--white); color: #062951; border-color: var(--white); transform: translateY(-2px); box-shadow: 0 2px 0px #8F9FB1; } .btn.inverted:active { background-color: #EBEEF1; border-color: #EBEEF1; transform: translateY(0); box-shadow: none; } @media (max-width: 768px) { .btn.inverted { height: auto; text-wrap: wrap; } } .btn.light { outline: none; cursor: pointer; font-size: 1.6rem; text-wrap: nowrap; font-weight: 500; text-align: center; border-radius: 99999px; color: var(--white); display: inline-flex; align-items: center; text-decoration: none; padding: 12px 20px; transition: all 250ms ease; background: var(--ctaPrimaryColour); border: 2px solid var(--ctaPrimaryColour); height: 48px; color: var(--primaryColour); background-color: var(--white); border-color: var(--white); } .btn.light:hover { color: var(--primaryColour); border-color: var(--primaryColour); background: var(--white); color: var(--white); background-color: var(--primaryColour); border-color:var(--primaryColour); } /* ============================================= OUTLINE BUTTON ============================================= */ .btn.outline { color: #062951; background: transparent; border: 2px solid #062951; transform: translateY(0); box-shadow: none; } .btn.outline:hover { color: #062951; background: transparent; border-color: #062951; transform: translateY(-2px); box-shadow: 0 2px 0px #13192D; } .btn.outline:active { transform: translateY(0); box-shadow: none; } .btn.outline.inverted { color: var(--white); background: transparent; border: 2px solid var(--white); transform: translateY(0); box-shadow: none; } .btn.outline.inverted:hover { color: var(--white); background: transparent; border-color: var(--white); transform: translateY(-2px); box-shadow: 0 2px 0px #8F9FB1; } .btn.outline.inverted:active { transform: translateY(0); box-shadow: none; } /* ============================================= LINK BUTTONS ============================================= */ .btn.link { gap: 5px; padding: 0; border: none; font-weight: 600; font-size: 1.4rem; background: none; color: var(--ctaPrimaryColour); align-items: center; position: relative; } .btn.link:before { content: ""; position: absolute; bottom: -3px; left: 0; width: 100%; height: 2px; background: var(--ctaPrimaryColour); } .btn.link:after { content: ""; width: 10px; height: 10px; background: url('https://20155276.fs1.hubspotusercontent-na1.net/hubfs/20155276/Learn%20More%20Arrow.svg') no-repeat; } /* ============================================= DISABLED / NO LINK BUTTONS ============================================= */ .btn.no-link { cursor: default; border: none; background: none; color: var(--primaryColour); padding: 0; } /* ============================================= MENU BUTTON ============================================= */ .btn#menu { width: 40px; height: 40px; padding: 0; border: none; background: none; } /* ============================================= SCROLL BUTTON ============================================= */ .btn.scroll { gap: 5px; padding: 0; border: none; background: transparent; color: #141517; align-items: center; } @media (max-width: 768px) { .btn { font-size: 1.4rem; } } :root { --primaryFont: DM Sans; --secondaryFont: DM Sans; --primaryFontColor: #161b30; --fontWeightRegular: 300; --fontWeightMedium: 500; --fontWeightSemiBold: 600; --fontWeightBold: 700; /* Font Sizes - Desktop */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 28px; /* The "small" text block (.small) is a named variant in the Figma design system, and its heading is Figma's text-2xl token: 32px / 38px / -0.5px. The theme's own --text-2xl above is 28px / 36px — drifted from the design system, but seven other components were built and signed off against 28px (role slider slide titles, icon CTA headings, values cards, thank-you card titles, testimonial pull quotes, perks power-up card titles), several with their own line-heights that 32px would crowd. So the design value lives here, on the variant the design actually specifies, instead of being forced through --text-2xl. */ --text-heading-small: 32px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 60px; --text-6xl: 80px; --text-7xl: 104px; /* Line Heights - Desktop */ --leading-xs: 16px; --leading-sm: 20px; --leading-base: 24px; --leading-lg: 28px; --leading-xl: 32px; --leading-2xl: 36px; --leading-heading-small: 38px; --leading-3xl: 40px; --leading-4xl: 52px; --leading-5xl: 62px; --leading-6xl: 80px; --leading-7xl: 96px; /* Tagline Font Sizes - Desktop */ --tagline-2xs: 10px; --tagline-xs: 12px; --tagline-sm: 14px; --tagline-base: 16px; --tagline-lg: 20px; /* Tagline Line Heights - Desktop */ --leading-tagline-2xs: 12px; --leading-tagline-xs: 14px; --leading-tagline-sm: 16px; --leading-tagline-base: 20px; --leading-tagline-lg: 24px; } /* Tablet - Font Sizes & Line Heights */ @media (max-width: 1440px) { :root { --text-xl: 22px; --text-3xl: 32px; --text-4xl: 40px; --text-5xl: 48px; --text-6xl: 64px; --text-7xl: 80px; --leading-xl: 28px; --leading-3xl: 36px; --leading-4xl: 44px; --leading-6xl: 64px; --leading-7xl: 80px; /* Tagline - Tablet */ --tagline-lg: 18px; } } /* Mobile - Font Sizes & Line Heights */ @media (max-width: 768px) { :root { --text-xl: 20px; --text-2xl: 24px; --text-heading-small: 24px; --text-3xl: 28px; --text-4xl: 32px; --text-5xl: 36px; --text-6xl: 44px; --text-7xl: 56px; --leading-xl: 24px; --leading-2xl: 32px; --leading-heading-small: 32px; --leading-3xl: 32px; --leading-4xl: 36px; --leading-6xl: 42px; --leading-7xl: 56px; /* Tagline - Mobile */ --tagline-sm: 12px; --tagline-base: 14px; --tagline-lg: 16px; --leading-tagline-base: 16px; } } /* Typography Utility Classes */ .text-xs { font-size: var(--text-xs); line-height: var(--leading-xs); } .text-sm { font-size: var(--text-sm); line-height: var(--leading-sm); } .text-base { font-size: var(--text-base); line-height: var(--leading-base); } .text-lg { font-size: var(--text-lg); line-height: var(--leading-lg); } .text-xl { font-size: var(--text-xl); line-height: var(--leading-xl); } .text-2xl { font-size: var(--text-2xl); line-height: var(--leading-2xl); } .text-3xl { font-size: var(--text-3xl); line-height: var(--leading-3xl); } .text-4xl { font-size: var(--text-4xl); line-height: var(--leading-4xl); } .text-5xl { font-size: var(--text-5xl); line-height: var(--leading-5xl); } .text-6xl { font-size: var(--text-6xl); line-height: var(--leading-6xl); } .text-7xl { font-size: var(--text-7xl); line-height: var(--leading-7xl); } /* Rich Text Element Overrides */ .text-xs p, .text-xs li, .text-xs span { font-size: var(--text-xs); line-height: var(--leading-xs); } .text-sm p, .text-sm li, .text-sm span { font-size: var(--text-sm); line-height: var(--leading-sm); } .text-base p, .text-base li, .text-base span { font-size: var(--text-base); line-height: var(--leading-base); } .text-lg p, .text-lg li, .text-lg span { font-size: var(--text-lg); line-height: var(--leading-lg); } .text-xl p, .text-xl li, .text-xl span { font-size: var(--text-xl); line-height: var(--leading-xl); } .text-2xl p, .text-2xl li, .text-2xl span { font-size: var(--text-2xl); line-height: var(--leading-2xl); } .text-3xl p, .text-3xl li, .text-3xl span { font-size: var(--text-3xl); line-height: var(--leading-3xl); } .text-4xl p, .text-4xl li, .text-4xl span { font-size: var(--text-4xl); line-height: var(--leading-4xl); } .text-5xl p, .text-5xl li, .text-5xl span { font-size: var(--text-5xl); line-height: var(--leading-5xl); } .text-6xl p, .text-6xl li, .text-6xl span { font-size: var(--text-6xl); line-height: var(--leading-6xl); } .text-7xl p, .text-7xl li, .text-7xl span { font-size: var(--text-7xl); line-height: var(--leading-7xl); } /* Tagline Utility Classes */ .tagline-2xs { font-size: var(--tagline-2xs); line-height: var(--leading-tagline-2xs); } .tagline-xs { font-size: var(--tagline-xs); line-height: var(--leading-tagline-xs); } .tagline-sm { font-size: var(--tagline-sm); line-height: var(--leading-tagline-sm); } .tagline-base { font-size: var(--tagline-base); line-height: var(--leading-tagline-base); } .tagline-lg { font-size: var(--tagline-lg); line-height: var(--leading-tagline-lg); } /* Tagline Rich Text Element Overrides */ .tagline-2xs p, .tagline-2xs li, .tagline-2xs span { font-size: var(--tagline-2xs); line-height: var(--leading-tagline-2xs); } .tagline-xs p, .tagline-xs li, .tagline-xs span { font-size: var(--tagline-xs); line-height: var(--leading-tagline-xs); } .tagline-sm p, .tagline-sm li, .tagline-sm span { font-size: var(--tagline-sm); line-height: var(--leading-tagline-sm); } .tagline-base p, .tagline-base li, .tagline-base span { font-size: var(--tagline-base); line-height: var(--leading-tagline-base); } .tagline-lg p, .tagline-lg li, .tagline-lg span { font-size: var(--tagline-lg); line-height: var(--leading-tagline-lg); } html { font-size: 62.5%; } body { color: var(--primaryFontColor); } h1, .h1 { margin: 0px; margin-bottom: 20px; font-size: 104px; font-style: normal; font-weight: 500; line-height: 96px; letter-spacing: 0; } @media (max-width: 768px) { h1, .h1 { font-size: 4rem; line-height: 5rem; } } @media (max-width: 768px) { h1 br, .h1 br { display: none; } } @media (max-width: 768px) { h2 { font-size: 3.5rem; line-height: 4.5rem; } } h2:last-child { margin-bottom: 0px; } h3 { margin: 0px; font-size: 3rem; letter-spacing: 0rem; line-height: 1.25; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } h3:last-child { margin-bottom: 0px; } h4 { margin: 0px; font-size: 2.5rem; letter-spacing: 0px; line-height: 3rem; margin-bottom: 2rem; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } h4:last-child { margin-bottom: 0px; } h5 { margin: 0px; font-size: 2.0rem; letter-spacing: 0px; line-height: 3rem; margin-bottom: 20px; font-family: var(--primaryFont); font-weight: var(--fontWeightSemiBold); } @media (max-width: 768px) { h5 { font-weight: var(--fontWeightMedium); } } h5:last-child { margin-bottom: 0px; } ul { margin: 0px; padding-left: 18px; margin-bottom: 20px; } ul:last-child { margin-bottom: 0 } p, li { margin: 0px; font-size: 1.6rem; letter-spacing: 0px; line-height: 2.5rem; margin-bottom: 2rem; font-family: var(--secondaryFont); font-weight: var(--fontWeightRegular); } p:last-child, li:last-child { margin-bottom: 0 } .eyebrow { margin-bottom: 12px; color: #A1BF24; font-size: 12px; font-style: normal; font-weight: 400; line-height: 14px; letter-spacing: 1.2px; text-transform: uppercase; font-family: Tomorrow; } h2 { font-size: 2.8rem; font-style: normal; font-weight: 500; line-height: 3.6rem; margin: 0; } /* ================================ Content Header Size Variants ================================ */ /* Large Size */ .large .eyebrow { font-size: var(--tagline-lg); line-height: var(--leading-tagline-lg); letter-spacing: 2px; margin-bottom: 32px; } .large h1, .large h2, .large h3, .large h4, .large h5, .large h6, .large .main-heading h1, .large .main-heading h2, .large .main-heading h3, .large .main-heading h4, .large .main-heading h5, .large .main-heading h6 { font-size: var(--text-6xl); line-height: var(--leading-6xl); font-weight: 400; letter-spacing: 0.5px; } .large p, .large li, .large .content-text p, .large .content-text li { font-size: var(--text-lg); line-height: var(--leading-lg); } /* Normal Size */ .normal .eyebrow { font-size: var(--tagline-base); line-height: var(--leading-tagline-base); letter-spacing: 1.6px; margin-bottom: 24px; } .normal h1, .normal h2, .normal h3, .normal h4, .normal h5, .normal h6, .normal .main-heading h1, .normal .main-heading h2, .normal .main-heading h3, .normal .main-heading h4, .normal .main-heading h5, .normal .main-heading h6 { font-size: var(--text-4xl); line-height: var(--leading-4xl); font-weight: 400; letter-spacing: 0.5px; } .normal p, .normal li, .normal .content-text p, .normal .content-text li { font-size: var(--text-lg); line-height: var(--leading-lg); } /* Small Size */ .small .eyebrow { font-size: var(--tagline-xs); line-height: var(--leading-tagline-xs); letter-spacing: 1.2px; margin-bottom: 16px; } .small h1, .small h2, .small h3, .small h4, .small h5, .small h6, .small .main-heading h1, .small .main-heading h2, .small .main-heading h3, .small .main-heading h4, .small .main-heading h5, .small .main-heading h6 { font-size: var(--text-heading-small); line-height: var(--leading-heading-small); font-weight: 500; letter-spacing: -0.5px; } .small p, .small li, .small .content-text p, .small .content-text li { font-size: var(--text-base); line-height: var(--leading-base); } .form form { position: relative; } .form form fieldset .input { margin: 0 !important; } .form form fieldset.form-columns-1 { display: grid; max-width: 100%; margin-bottom: 3rem; grid-template-columns: repeat(1, 1fr); } .form form fieldset.form-columns-2 { gap: 3rem; display: grid; max-width: 100%; margin-bottom: 3rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { .form form fieldset.form-columns-2 { grid-template-columns: repeat(1, 1fr); } } .form form fieldset.form-columns-2 .hs-form-field { width: 100%; float: none; margin-bottom: 0px; } .form form fieldset.form-columns-2 .hs-form-field .input { margin-right: 0px; margin-bottom: 0px; } .form input[type="text"], .form input[type="email"], .form input[type="tel"] { width: 100% !important; height: 4.8rem; outline: none; display: block; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); padding: 12px 16px; align-items: center; color: rgba(255, 255, 255, 0.80); } .form input[type="text"]::placeholder, .form input[type="email"]::placeholder, .form input[type="tel"]::placeholder { color: rgba(255, 255, 255, 0.80); } .form.dark input[type="submit"] { color: var(--primaryColour); background-color: var(--white); border-color: var(--white); } .form.dark input[type="submit"]:hover { color: var(--primaryColour); background-color: var(--white); border-color: var(--white); background: var(--Button-Fill-Light-bg-hover, #FFF); box-shadow: 0 2px 0 0 var(--Colour-Signal-400, #8F9FB1); } .form.subscribe .hs_submit.hs-submit .actions { justify-content: center; margin-top: 24px; } .form select { width: 100% !important; height: 5.5rem; outline: none; display: block; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); padding: 12px 16px; align-items: center; color: rgba(255, 255, 255, 0.80); } .form textarea { width: 100% !important; height: 5.5rem; outline: none; display: block; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); padding: 12px 16px; align-items: center; color: rgba(255, 255, 255, 0.80); } .form .hs-fieldtype-file > label { display: flex; cursor: pointer; overflow: hidden; padding-left: 1rem; border-radius: 5px; align-items: center; border: 2px solid #787CFE; justify-content: space-between; } .form .hs-fieldtype-file > label:after { color: #fff; content: "Upload"; padding: 2.33rem 4.88rem; background-color: #787CFE; font-weight: var(--fontWeightBold); } .form .hs-fieldtype-file .input { display: none; } .form .hs-form-field { margin-bottom: 1rem; position: relative; } .form .hs-form-field .hs-error-msgs, .form .hs_error_rollup .hs-error-msgs { margin: 0px; padding: 0px; list-style: none; position: block; } .form .hs_error_rollup .hs-error-msgs li label, .form .hs-form-field .hs-error-msgs li label.hs-error-msg { color: red; font-size: 1.3rem; } .form .legal-consent-container { gap: 3.5rem; display: flex; flex-direction: column; } .form .hs-richtext, .form .hs-richtext p { font-size: 1.5rem; color: #141517; letter-spacing: 0; line-height: 2.5rem; font-weight: 400; } .form .inputs-list { list-style: none; padding: 0px; } .form .legal-consent-container .hs-form-booleancheckbox-display { display: flex; align-items: center; justify-content: start; /* flex-direction: row-reverse; justify-content: flex-end; */ } .form .legal-consent-container .hs-form-booleancheckbox-display input[type=checkbox] { display: none; } .form .legal-consent-container .hs-form-booleancheckbox-display span { gap: 1.2rem; margin: 0px; display: flex; align-items: center; font-size: 1.5rem; color: #141517; letter-spacing: 0; line-height: 25px; font-weight: 700; } .form .legal-consent-container .hs-form-booleancheckbox-display span:before { content: ''; width: 2.3rem; min-width: 2.3rem; height: 2.3rem; display: block; border-radius: 5px; border: 1px solid #00A9F3; } .form .legal-consent-container .hs-form-booleancheckbox-display input[type=checkbox]:checked + span:before { background-position: center; background-repeat: no-repeat; background-image: url(https://144479753.fs1.hubspotusercontent-eu1.net/hubfs/144479753/raw_assets/public/MO%20Entelect/images/check.svg); } .hs-search-field__bar.form form .hs-search-field__input { width: 100%; height: 50px; max-width: 370px; min-width: 370px; font-size: 1.6rem; border-radius: 7px; border: 2px solid #141517; } .hs-search-field__bar.form form .hs-search-field__input::placeholder { color: #000; font-weight: 700; } .hs-search-field__bar.form form .search-icon { width: 20px; height: 20px; top: 0px; bottom: 0px; right: 23px; margin: auto 0; position: absolute; background: none; border: none; outline: none; padding: 0px; display: flex; align-items: center; } .hs-search-field__bar.form form .search-icon svg { width: 100%; max-width: 20px; } .form .hs_submit.hs-submit .actions { display: flex; justify-content: start; } .form .submitted-message { color: var(--white); } /* ------------------------------------------------------------------ * * HubSpot Forms — new renderer (FormsNext / hsfc) * * * * The new form widget is wrapped in .hs_cos_wrapper_type_form and * * rendered into [data-hsfc-id="Renderer"]. It is themed via a * * documented set of --hsf-* custom properties; override those at the * * renderer scope so the form's own base stylesheet picks them up * * via var() lookups (no specificity wars). * * ------------------------------------------------------------------ */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] { /* Layout / spacing — matches Figma 24px column gap, 24px row gap */ --hsf-row__vertical-spacing: 2.4rem; --hsf-row__horizontal-spacing: 2.4rem; --hsf-module__vertical-spacing: 0.8rem; /* Step background — strip HubSpot's default card; the host module/page provides bg */ --hsf-background__background-color: transparent; --hsf-background__border-style: none; --hsf-background__border-width: 0; --hsf-background__border-radius: 0; --hsf-background__padding: 0; /* Headings & rich text inside the form */ --hsf-heading__font-family: var(--primaryFont); --hsf-heading__color: #13192D; --hsf-richtext__font-family: var(--primaryFont); --hsf-richtext__color: #555C70; --hsf-richtext__font-size: 1.6rem; /* Field labels — text-secondary, medium 14px */ --hsf-field-label__font-family: var(--primaryFont); --hsf-field-label__color: #555C70; --hsf-field-label__font-size: 1.4rem; --hsf-field-description__font-family: var(--primaryFont); --hsf-field-description__color: #7B8194; --hsf-field-footer__font-family: var(--primaryFont); --hsf-field-footer__color: #7B8194; /* Text / email / phone / dropdown inputs — solid white pill */ --hsf-field-input__font-family: var(--primaryFont); --hsf-field-input__font-size: 1.6rem; --hsf-field-input__color: #13192D; --hsf-field-input__placeholder-color: #7B8194; --hsf-field-input__background-color: #FFFFFF; --hsf-field-input__border-color: #BCC4D1; --hsf-field-input__border-style: solid; --hsf-field-input__border-width: 1px; --hsf-field-input__border-radius: 999px; --hsf-field-input__padding: 1.2rem 1.6rem; /* Textareas — same fill, soft 16px corners (NOT pill) */ --hsf-field-textarea__font-family: var(--primaryFont); --hsf-field-textarea__font-size: 1.6rem; --hsf-field-textarea__color: #13192D; --hsf-field-textarea__placeholder-color: #7B8194; --hsf-field-textarea__background-color: #FFFFFF; --hsf-field-textarea__border-color: #BCC4D1; --hsf-field-textarea__border-style: solid; --hsf-field-textarea__border-width: 1px; --hsf-field-textarea__border-radius: 16px; --hsf-field-textarea__padding: 1.2rem 1.6rem; /* Checkboxes & radios — white fill, light border, CTA tick/dot */ --hsf-field-checkbox__background-color: #FFFFFF; --hsf-field-checkbox__border-color: #BCC4D1; --hsf-field-checkbox__border-width: 1px; --hsf-field-checkbox__color: #062951; --hsf-field-checkbox__padding: 0; --hsf-field-radio__background-color: #FFFFFF; --hsf-field-radio__border-color: #BCC4D1; --hsf-field-radio__border-width: 1px; --hsf-field-radio__color: #062951; --hsf-field-radio__padding: 0; /* Dropdown popover */ --hsf-field-dropdown-options__border-radius: 12px; /* Buttons — dark navy fill, pill, white text */ --hsf-button__font-family: var(--primaryFont); --hsf-button__font-size: 1.6rem; --hsf-button__font-weight: 500; --hsf-button__color: #FFFFFF; --hsf-button__background-color: #062951; --hsf-button__border-color: #062951; --hsf-button__border-style: solid; --hsf-button__border-width: 1px; --hsf-button__border-radius: 999px; --hsf-button__padding: 1.2rem 2.4rem; --hsf-button--hover__background-color: #13192D; --hsf-button--hover__color: #FFFFFF; --hsf-button--hover__border-color: #13192D; /* Progress bar */ --hsf-progressbar-progressLine__background-color: #062951; --hsf-progressbar-trackLine__background-color: #E1E5EA; --hsf-progressbar-text__font-family: var(--primaryFont); --hsf-progressbar-text__color: #13192D; /* Alerts */ --hsf-erroralert__font-family: var(--primaryFont); --hsf-erroralert__color: #E22618; --hsf-infoalert__font-family: var(--primaryFont); --hsf-infoalert__color: #555C70; /* Required-indicator asterisk — red per Figma */ --hsf-field-label-requiredindicator__color: #E22618; } /* Give radios / checkboxes an explicit hit-target so they don't collapse under appearance:none, and keep them perfectly circular / square. */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-RadioInput, .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-CheckboxInput { box-sizing: border-box; width: 2rem; height: 2rem; } /* Dropdown popover list */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-DropdownOptions { background-color: #FFFFFF; border-color: #BCC4D1; box-shadow: 0 4px 12px rgba(19, 25, 45, 0.08); } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem { color: #13192D; } /* Dropdown caret (drawn with border tricks, not theming vars) */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-DropdownInput__Caret > span, .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret__Caret { border-top-color: #13192D; } /* File input — match the input text colour */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput { color: #13192D; } /* Style the native "choose file" button to match the form buttons. Kept as separate rules (not a comma group) so an unrecognised pseudo in one browser can't invalidate the whole selector. */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput::file-selector-button { background-color: var(--hsf-button__background-color, #062951); border: var(--hsf-button__border-width, 1px) var(--hsf-button__border-style, solid) var(--hsf-button__border-color, #062951); border-radius: var(--hsf-button__border-radius, 999px); color: var(--hsf-button__color, #FFFFFF); cursor: pointer; font-family: var(--hsf-button__font-family, var(--primaryFont)); font-size: var(--hsf-button__font-size, 1.6rem); font-weight: var(--hsf-button__font-weight, 500); margin-right: 1.2rem; padding: var(--hsf-button__padding, 1.2rem 2.4rem); transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput::-webkit-file-upload-button { background-color: var(--hsf-button__background-color, #062951); border: var(--hsf-button__border-width, 1px) var(--hsf-button__border-style, solid) var(--hsf-button__border-color, #062951); border-radius: var(--hsf-button__border-radius, 999px); color: var(--hsf-button__color, #FFFFFF); cursor: pointer; font-family: var(--hsf-button__font-family, var(--primaryFont)); font-size: var(--hsf-button__font-size, 1.6rem); font-weight: var(--hsf-button__font-weight, 500); margin-right: 1.2rem; padding: var(--hsf-button__padding, 1.2rem 2.4rem); transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput:hover::file-selector-button { background-color: var(--hsf-button--hover__background-color, #13192D); border-color: var(--hsf-button--hover__border-color, #13192D); color: var(--hsf-button--hover__color, #FFFFFF); } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-FileInput:hover::-webkit-file-upload-button { background-color: var(--hsf-button--hover__background-color, #13192D); border-color: var(--hsf-button--hover__border-color, #13192D); color: var(--hsf-button--hover__color, #FFFFFF); } /* Multi-step nav spacing */ .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons { margin-top: 2.4rem; } @media (max-width: px) { .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-Row { display: flex; flex-direction: column; gap: var(--hsf-row__vertical-spacing); } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons { flex-direction: column; } .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons > * { width: 100%; } } /* Module variants — Subscribe Section wraps the widget in `.form.subscribe`, centre the submit button there to match the legacy variant. */ .form.subscribe .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons { justify-content: center; } /* Dark-context override — Subscribe Section (`.form.dark`) and any other wrapper that opts into a dark surface need white-on-translucent inputs. */ .form.dark .hs_cos_wrapper_type_form [data-hsfc-id="Renderer"] { --hsf-heading__color: #FFFFFF; --hsf-richtext__color: rgba(255, 255, 255, 0.80); --hsf-field-label__color: rgba(255, 255, 255, 0.90); --hsf-field-description__color: rgba(255, 255, 255, 0.60); --hsf-field-footer__color: rgba(255, 255, 255, 0.60); --hsf-field-input__color: rgba(255, 255, 255, 0.90); --hsf-field-input__placeholder-color: rgba(255, 255, 255, 0.60); --hsf-field-input__background-color: rgba(255, 255, 255, 0.15); --hsf-field-input__border-color: rgba(255, 255, 255, 0.30); --hsf-field-textarea__color: rgba(255, 255, 255, 0.90); --hsf-field-textarea__placeholder-color: rgba(255, 255, 255, 0.60); --hsf-field-textarea__background-color: rgba(255, 255, 255, 0.15); --hsf-field-textarea__border-color: rgba(255, 255, 255, 0.30); --hsf-button__background-color: #FFFFFF; --hsf-button__color: #062951; --hsf-button__border-color: #FFFFFF; --hsf-button--hover__background-color: rgba(255, 255, 255, 0.85); --hsf-button--hover__color: #062951; --hsf-button--hover__border-color: rgba(255, 255, 255, 0.85); --hsf-progressbar-progressLine__background-color: #FFFFFF; --hsf-progressbar-trackLine__background-color: rgba(255, 255, 255, 0.20); --hsf-progressbar-text__color: #FFFFFF; } .card { background: var(--white); border: 1px solid var(--cardBorderColour); box-shadow: 5px 5px 25px 4px rgba(22, 27, 48, 0.05); border-radius: 7px; } .container { width: 100%; margin: 0 auto; padding: 0 8rem; max-width: var(--containerWidth); } @media (max-width: 1440px) { .container { padding: 0 4rem; } } @media (max-width: 768px) { .container { padding: 0 1.6rem; } } .cta-container { gap: 15px; display: flex; align-items: center; } .cta-container.right { justify-content: end; } .cta-container.center { justify-content: center; } .cta-container.space-between { justify-content: space-between; } :root { --containerWidth: 1920px; --verticalSpacing: 80px; --swiper-pagination-bottom: -3rem; } .no-scroll { overflow-y: hidden; } html { /* Use `clip` rather than `hidden` so html does NOT become a scrolling context — this is what allows `position: sticky` to work for descendants (e.g. .header-and-cards__left). */ overflow-x: clip; } * { font-family: var(--primaryFont); } *.eyebrow * { font-family: Tomorrow; } body { font-size: 1.6rem; } .menu-underlay { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 1000; display: none; background-color: rgba(0,0,0,0.7); } .content-header .content-text { margin-top: 24px; } /* Scroll fade-in animation */ .fade-in-element { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in-element.fade-in-active { opacity: 1; transform: translateY(0); } /* Scroll fade-in animation for text, one word at a time. It used to be one letter at a time, which cost more than it looked. Each letter was its own inline-block, so the browser could not shape or kern across them and the text measured wider than the same words set normally: on /stagnation one heading took 176px against 132px unsplit at 1440, gaining a line it should not have had. That page also carried 876 letter spans in a 2121-node document, each running its own pair of transitions, and with a flat 0.03s per letter its longest heading did not finish revealing for 5.88 seconds. Per word, the delays are written by scripts/main.js as finished seconds in --fade-delay, scaled so the whole block lands inside its reveal budget however long the text is. --fade-speed lets a module scale that; 1 is normal. */ .fade-in-letters-element { display: block; } .fade-word { display: inline-block; white-space: nowrap; } .fade-in-letters-element .fade-word { opacity: 0; transform: translateY(20px); transition: opacity 0.35s ease-out, transform 0.35s ease-out; transition-delay: calc(var(--fade-delay, 0s) * var(--fade-speed, 1)); } .fade-in-letters-element.fade-in-letters-active .fade-word { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .fade-in-element, .fade-in-letters-element .fade-word { transform: none; transition-delay: 0s; transition-duration: 0.01s; } }