@import url(https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap); @import url(https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap); /*! 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. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 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 ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 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; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* 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 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 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; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 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, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Make clicks pass-through */ #nprogress { pointer-events: none; } #nprogress .bar { background: #29d; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } /* Fancy blur effect */ #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; transform: rotate(3deg) translate(0px, -4px); } /* Remove these to get rid of the spinner */ #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 50%; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} @charset "UTF-8"; .fa, .fas, form .submit button.loading::before, form .fui-submit.loading::before, .serviceLists__subServiceExpand::before, .projectGallery__next::before, .projectGallery__prev::before, .projectGallery__close::before, .informationSlider__navButton::before, .heroSlider__next::before, .heroSlider__prev::before, .heroSlider__galleryView::before, .featuredServices__spotlight::after, .featuredServices__spotlight::before, .featuredServices__cta::after, .featuredProjectDetail__location::before, .workSample__cta::after, .tagList__tagLink::before, .secondaryNav__navLink.-search::before, .primaryNav__dropdownCtaLink::after, .featuredWork.-emphasized .featuredWork__description > *:last-child::after, .featuredWork__location::before, .correspondingSliderNav__navButton::before, .companyFeature__description > *:last-child::after, .breadCrumbNav__listItem::after, .select__wrapper::after, .date::before, a.button.loading::before, button.button.loading::before, .richText ul li::before, .far, form .dropdown .input::after, .fal, .informationSlider__navButtonNext::before, .informationSlider__navButtonPrev::before, .correspondingSliderNav__navButtonNext::before, .correspondingSliderNav__navButtonPrev::before, .fad, .fab, .leadership__linkedin::before, .socialList__socialLink::before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } form .submit button.loading::before, form .fui-submit.loading::before, form .dropdown .input::after, .serviceLists__subServiceExpand::before, .projectGallery__next::before, .projectGallery__prev::before, .projectGallery__close::before, .leadership__linkedin::before, .informationSlider__navButton::before, .informationSlider__navButtonNext::before, .informationSlider__navButtonPrev::before, .heroSlider__next::before, .heroSlider__prev::before, .heroSlider__galleryView::before, .featuredServices__spotlight::after, .featuredServices__spotlight::before, .featuredServices__cta::after, .featuredProjectDetail__location::before, .workSample__cta::after, .tagList__tagLink::before, .secondaryNav__navLink.-search::before, .primaryNav__dropdownCtaLink::after, .featuredWork.-emphasized .featuredWork__description > *:last-child::after, .featuredWork__location::before, .correspondingSliderNav__navButton::before, .correspondingSliderNav__navButtonNext::before, .correspondingSliderNav__navButtonPrev::before, .companyFeature__description > *:last-child::after, .breadCrumbNav__listItem::after, .select__wrapper::after, .date::before, a.button.loading::before, button.button.loading::before, .richText ul li::before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; } /*! * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Commercial License) */ @font-face { font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-brands-400.eot?2ac0cbf0ae3aa5e15f77cfec5f380e6c); src: url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-brands-400.eot?2ac0cbf0ae3aa5e15f77cfec5f380e6c?#iefix) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-brands-400.woff2?df56145e6ac7861a1c0a9e5a278bcb79) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-brands-400.woff?92ee10240bc7f84042de9e5f85e19cb6) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-brands-400.ttf?aa21aa27a6be24f99e402d50d27714a1) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-brands-400.svg?363e840666219cf3436efc468a10b2f6#fontawesome) format("svg"); } .fab, .leadership__linkedin::before, .socialList__socialLink::before { font-family: "Font Awesome 5 Brands"; font-weight: 400; } /*! * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Commercial License) */ @font-face { font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 300; font-display: block; src: url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-light-300.eot?ab918e79c8dbce95d7158d71b9d11620); src: url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-light-300.eot?ab918e79c8dbce95d7158d71b9d11620?#iefix) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-light-300.woff2?d3271a5651ab5ba62d854296f393a3b6) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-light-300.woff?8df58881554c80bdbc5ae0a44e3f2c9b) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-light-300.ttf?431c25ff502d4460d3ec7d302b9a6742) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-light-300.svg?76f70e6c0db0270aebcce515a9c88a2a#fontawesome) format("svg"); } .fal, .informationSlider__navButtonNext::before, .informationSlider__navButtonPrev::before, .correspondingSliderNav__navButtonNext::before, .correspondingSliderNav__navButtonPrev::before { font-family: "Font Awesome 5 Pro"; font-weight: 300; } /*! * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Commercial License) */ @font-face { font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-regular-400.eot?1c9c47c2e74e9e4a5d07e83e727dd36a); src: url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-regular-400.eot?1c9c47c2e74e9e4a5d07e83e727dd36a?#iefix) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-regular-400.woff2?33904a1b964c9b363ce79e87ce077789) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-regular-400.woff?126e4e16f5400ed7fb9942ca5d89eb52) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-regular-400.ttf?2e9a4f2704b8d84284940bbd45124bbc) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-regular-400.svg?1a812d84040362f3cbe1f302dd3d5356#fontawesome) format("svg"); } .far, form .dropdown .input::after { font-family: "Font Awesome 5 Pro"; font-weight: 400; } /*! * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Commercial License) */ @font-face { font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 900; font-display: block; src: url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-solid-900.eot?dcddb714e825d85920df5cf98fc161c8); src: url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-solid-900.eot?dcddb714e825d85920df5cf98fc161c8?#iefix) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-solid-900.woff2?54dfc8f551be346014e424fe36b4b0e3) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-solid-900.woff?6057f0f7f9a9a68b2eede7d911d3b8eb) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-solid-900.ttf?601a1847bf98e6bf4b9465f0094428a1) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-pro/webfa-solid-900.svg?ceb187c9cc886c93094cb6e31f3a5923#fontawesome) format("svg"); } .fa, .fas, form .submit button.loading::before, form .fui-submit.loading::before, .serviceLists__subServiceExpand::before, .projectGallery__next::before, .projectGallery__prev::before, .projectGallery__close::before, .informationSlider__navButton::before, .heroSlider__next::before, .heroSlider__prev::before, .heroSlider__galleryView::before, .featuredServices__spotlight::after, .featuredServices__spotlight::before, .featuredServices__cta::after, .featuredProjectDetail__location::before, .workSample__cta::after, .tagList__tagLink::before, .secondaryNav__navLink.-search::before, .primaryNav__dropdownCtaLink::after, .featuredWork.-emphasized .featuredWork__description > *:last-child::after, .featuredWork__location::before, .correspondingSliderNav__navButton::before, .companyFeature__description > *:last-child::after, .breadCrumbNav__listItem::after, .select__wrapper::after, .date::before, a.button.loading::before, button.button.loading::before, .richText ul li::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; } .container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container-sm, .container { max-width: 540px; } } @media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } } @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } @media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*=col-] { padding-right: 0; padding-left: 0; } .col-xl, .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } .order-first { order: -1; } .order-last { order: 13; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-9 { order: 9; } .order-10 { order: 10; } .order-11 { order: 11; } .order-12 { order: 12; } .offset-1 { margin-left: 8.33333333%; } .offset-2 { margin-left: 16.66666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333333%; } .offset-5 { margin-left: 41.66666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333333%; } .offset-8 { margin-left: 66.66666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333333%; } .offset-11 { margin-left: 91.66666667%; } @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-sm-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-sm-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-sm-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-sm-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-sm-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-sm-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-sm-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-sm-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-sm-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-sm-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .order-sm-first { order: -1; } .order-sm-last { order: 13; } .order-sm-0 { order: 0; } .order-sm-1 { order: 1; } .order-sm-2 { order: 2; } .order-sm-3 { order: 3; } .order-sm-4 { order: 4; } .order-sm-5 { order: 5; } .order-sm-6 { order: 6; } .order-sm-7 { order: 7; } .order-sm-8 { order: 8; } .order-sm-9 { order: 9; } .order-sm-10 { order: 10; } .order-sm-11 { order: 11; } .order-sm-12 { order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.33333333%; } .offset-sm-2 { margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333333%; } .offset-sm-5 { margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333333%; } .offset-sm-8 { margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333333%; } .offset-sm-11 { margin-left: 91.66666667%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-md-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-md-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-md-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-md-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-md-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-md-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-md-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-md-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-md-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-md-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .order-md-first { order: -1; } .order-md-last { order: 13; } .order-md-0 { order: 0; } .order-md-1 { order: 1; } .order-md-2 { order: 2; } .order-md-3 { order: 3; } .order-md-4 { order: 4; } .order-md-5 { order: 5; } .order-md-6 { order: 6; } .order-md-7 { order: 7; } .order-md-8 { order: 8; } .order-md-9 { order: 9; } .order-md-10 { order: 10; } .order-md-11 { order: 11; } .order-md-12 { order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.33333333%; } .offset-md-2 { margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333333%; } .offset-md-5 { margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333333%; } .offset-md-8 { margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333333%; } .offset-md-11 { margin-left: 91.66666667%; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-lg-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-lg-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-lg-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-lg-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-lg-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-lg-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-lg-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-lg-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-lg-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-lg-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .order-lg-first { order: -1; } .order-lg-last { order: 13; } .order-lg-0 { order: 0; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } .order-lg-4 { order: 4; } .order-lg-5 { order: 5; } .order-lg-6 { order: 6; } .order-lg-7 { order: 7; } .order-lg-8 { order: 8; } .order-lg-9 { order: 9; } .order-lg-10 { order: 10; } .order-lg-11 { order: 11; } .order-lg-12 { order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333333%; } .offset-lg-2 { margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333333%; } .offset-lg-5 { margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333333%; } .offset-lg-8 { margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333333%; } .offset-lg-11 { margin-left: 91.66666667%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-xl-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-xl-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-xl-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row-cols-xl-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-xl-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-xl-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-xl-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-xl-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-xl-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-xl-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-xl-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; } .order-xl-first { order: -1; } .order-xl-last { order: 13; } .order-xl-0 { order: 0; } .order-xl-1 { order: 1; } .order-xl-2 { order: 2; } .order-xl-3 { order: 3; } .order-xl-4 { order: 4; } .order-xl-5 { order: 5; } .order-xl-6 { order: 6; } .order-xl-7 { order: 7; } .order-xl-8 { order: 8; } .order-xl-9 { order: 9; } .order-xl-10 { order: 10; } .order-xl-11 { order: 11; } .order-xl-12 { order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.33333333%; } .offset-xl-2 { margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333333%; } .offset-xl-5 { margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333333%; } .offset-xl-8 { margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333333%; } .offset-xl-11 { margin-left: 91.66666667%; } } @keyframes continuousRotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } html { font-family: var(--root-font-family); line-height: 150%; overflow-x: hidden; } html:has(body.-scrollLock) { overflow: hidden; height: 100vh; } * { box-sizing: border-box; } html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; } body { overflow-x: hidden; padding-top: 65px; background: white; } @media screen and (min-width: 1024px) { body { padding-top: 165px; } } body { /* Fallback for iOS 11/12: :has() not supported; homepage uses .siteHeader.js-homepage-nav */ } body.section-homepage { padding-top: 0; } @media screen and (min-width: 1024px) { body.section-homepage { padding-top: 0; } } body:has(.siteHeader.js-homepage-nav) { padding-top: 0; } @media screen and (min-width: 1024px) { body:has(.siteHeader.js-homepage-nav) { padding-top: 0; } } p { margin-top: 0; line-height: 150%; } body.-scrollLock { overflow: hidden; height: 100vh; } .workSample, .featuredOurWork { transition: all 250ms; } .shuffle-list-enter, .shuffle-list-leave-to { opacity: 0; transform: translateY(30px); } .shuffle-list-leave-active { position: absolute; } .height-shift-enter, .height-shift-leave-to { max-height: 0; overflow: hidden; } .height-shift-leave-active { max-height: 500px; } .container { max-width: 1250px; margin: 0 auto; padding: 0 1rem; } @media screen and (min-width: ) { .container { padding: 0 0; } } img { display: block; } .lazyload, .lazyloading { opacity: 0; } .lazyloaded { opacity: 1; transition: opacity 500ms; } .visibilityHidden { visibility: hidden; height: 0; margin: 0; } .sr-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .richText ul { list-style-type: none; padding-left: 20px; } .richText ul li { margin-bottom: 1rem; position: relative; padding-left: 21px; } .richText ul li::before { content: "\f219"; color: #f5b211; position: absolute; top: 10px; left: 0; font-size: 0.5rem; } .-paddingNone { padding-top: 0 !important; padding: 0 !important; } .-paddingTop { padding-bottom: 0 !important; } .-paddingBottom { padding-top: 0 !important; } .js-swoosh { opacity: 0; transform: translatey(50); } .js-swooshItem { transform: scale(1.3); opacity: 0; } [v-cloak] { display: none !important; } :root { --root-font-family: 'Figtree', sans-serif; --root-font-family-heading: 'Merriweather', serif; } .splide__arrow { background: #3d684f; opacity: 1; transition: opacity 250ms cubic-bezier(0.19, 1, 0.22, 1), color 250ms cubic-bezier(0.19, 1, 0.22, 1); } .splide__arrow svg { fill: white; } .splide__arrow:hover { opacity: 0.85; } .splide__arrow:hover:disabled { opacity: 0.3; } .-faintLinesBackgroundMediumDensity { position: relative; overflow: hidden; } .-faintLinesBackgroundMediumDensity::before { content: ""; background: no-repeat url("/img/backgrounds/faintlines-medium-density.svg"); position: absolute; width: 200%; height: 200%; bottom: -25%; left: 50%; z-index: -1; mix-blend-mode: multiply; opacity: 0.75; } .-faintLinesBackground { position: relative; overflow: hidden; } .-faintLinesBackground::before { content: ""; background: no-repeat url("/img/backgrounds/faintlines.svg"); position: absolute; width: 150%; height: 150%; bottom: -5%; left: 45%; z-index: -1; mix-blend-mode: multiply; opacity: 0.75; } a.button, button.button { --button-white-rgb: 255, 255, 255; --button-gold-rgb: 245, 178, 17; --button-green-rgb: 61, 104, 79; --button-dark-transparent-rgb: 3, 3, 3; --button-light-yellow-rgb: 251, 224, 114; --button-bg: var(--button-white-rgb); --button-border: white; --button-border-hover: #f5b211; --button-color: #3e3e3e; color: var(--button-color); display: inline-block; box-sizing: content-box; position: relative; font-weight: 600; padding: 13px 30px; border-radius: 24px; line-height: 1; text-align: center; vertical-align: top; border: 3px solid; border-color: var(--button-border); z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(var(--button-bg), 0) 0%, rgba(var(--button-bg), 1) 0%) 50% 100%/200% 200%; transition: border-color 0.3s cubic-bezier(0.7, 0, 0.2, 1), color 0.3s cubic-bezier(0.7, 0, 0.2, 1), background-position 0.3s cubic-bezier(0.7, 0, 0.2, 1); overflow: hidden; } a.button span, button.button span { position: relative; } a.button.-whiteUnderlay, form a.button.fui-submit.-tertiary, form a.button.fui-submit.-primary, a.button.-tertiary, a.button.-primary, button.button.-whiteUnderlay, form .submit button.button.-tertiary, form button.button.fui-submit.-tertiary, form .submit button.button.-primary, form button.button.fui-submit.-primary, button.button.-tertiary, button.button.-primary { background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgba(var(--button-bg), 0) 0%, rgba(var(--button-bg), 1) 0%) 50% 100%/200% 200%; } a.button:hover, a.button:focus, button.button:hover, button.button:focus { border-color: var(--button-border-hover); background-position: 50% 200%; } a.button.loading, button.button.loading { color: transparent; } a.button.loading::before, button.button.loading::before { content: "\f110"; color: var(--button-color); position: absolute; top: 32%; left: 0; right: 0; margin: auto; animation: 1s linear continuousRotation infinite; } a.button.disabled, a.button[disabled], button.button.disabled, button.button[disabled] { color: #cccccc; pointer-events: none; } a.button.-primary, button.button.-primary { --button-bg: var(--button-gold-rgb); --button-border: #f5b211; z-index: 1; } a.button.-secondary, button.button.-secondary { --button-bg: var(--button-gold-rgb); --button-hover-bg: transparent; --button-border: #f5b211; } a.button.-tertiary, button.button.-tertiary { --button-bg: var(--button-light-yellow-rgb); --button-border: rgb(251.3010204082, 223.9285714286, 113.6989795918); --button-border-hover: rgb(251.3010204082, 223.9285714286, 113.6989795918); } a.button.-greenPrimary, button.button.-greenPrimary { --button-bg: var(--button-green-rgb); --button-border: #3d684f; --button-color: white; --button-border-hover: #3d684f; } a.button.-greenPrimary:hover, a.button.-greenPrimary:focus, button.button.-greenPrimary:hover, button.button.-greenPrimary:focus { --button-color: #3e3e3e; } a.button.-greenOutline, button.button.-greenOutline { --button-bg: var(--button-green-rgb); --button-border: #3d684f; --button-border-hover: #3d684f; } a.button.-greenOutline:hover, a.button.-greenOutline:focus, button.button.-greenOutline:hover, button.button.-greenOutline:focus { --button-color: white; } a.button.-whiteOutline, button.button.-whiteOutline { --button-bg: var(--button-green-rgb); --button-border: white; --button-border-hover: white; --button-color: white; } a.button.-whiteOutlineWhiteHover, button.button.-whiteOutlineWhiteHover { --button-bg: var(--button-white-rgb); --button-border: white; --button-border-hover: white; --button-color: white; } a.button.-whiteOutlineWhiteHover:hover, a.button.-whiteOutlineWhiteHover:focus, button.button.-whiteOutlineWhiteHover:hover, button.button.-whiteOutlineWhiteHover:focus { --button-color: #3d684f; } a.button.-darkTransparent, button.button.-darkTransparent { --button-bg: var(--button-dark-transparent-rgb); --button-border: white; --button-border-hover: white; --button-color: white; background: linear-gradient(180deg, rgba(var(--button-bg), 0.5) 0%, rgba(var(--button-bg), 0.5) 50%, rgba(var(--button-bg), 1) 0%, rgba(var(--button-bg), 1) 0%) 50% 200%/200% 200%; } a.button.-darkTransparent:hover, a.button.-darkTransparent:focus, button.button.-darkTransparent:hover, button.button.-darkTransparent:focus { background-position: 50% 100%; } a.button.-reverseHover, form a.button.fui-submit.-whiteOutlineWhiteHover, form a.button.fui-submit.-whiteOutline, form a.button.fui-submit.-greenOutline, form a.button.fui-submit.-tertiary, a.button.-tertiary, a.button.-greenOutline, a.button.-whiteOutline, a.button.-whiteOutlineWhiteHover, button.button.-reverseHover, form .submit button.button.-whiteOutlineWhiteHover, form button.button.fui-submit.-whiteOutlineWhiteHover, form .submit button.button.-whiteOutline, form button.button.fui-submit.-whiteOutline, form .submit button.button.-greenOutline, form button.button.fui-submit.-greenOutline, form .submit button.button.-tertiary, form button.button.fui-submit.-tertiary, button.button.-tertiary, button.button.-greenOutline, button.button.-whiteOutline, button.button.-whiteOutlineWhiteHover { background-position: 50% 200%; } a.button.-reverseHover:hover, a.button.-tertiary:hover, a.button.-greenOutline:hover, a.button.-whiteOutline:hover, a.button.-whiteOutlineWhiteHover:hover, a.button.-reverseHover:focus, a.button.-tertiary:focus, a.button.-greenOutline:focus, a.button.-whiteOutline:focus, a.button.-whiteOutlineWhiteHover:focus, button.button.-reverseHover:hover, button.button.-tertiary:hover, button.button.-greenOutline:hover, button.button.-whiteOutline:hover, button.button.-whiteOutlineWhiteHover:hover, button.button.-reverseHover:focus, button.button.-tertiary:focus, button.button.-greenOutline:focus, button.button.-whiteOutline:focus, button.button.-whiteOutlineWhiteHover:focus { background-position: 50% 100%; } a.button, button.button { text-decoration: none; } .date { margin: 0; font-size: 1.1rem; font-weight: 700; } .date::before { content: "\f133"; margin-right: 0.5rem; color: #f5b211; } .embed__wrapper { height: 0; max-width: 100%; overflow: hidden; padding-bottom: 56.25%; position: relative; } .embed__wrapper iframe, .embed__wrapper object, .embed__wrapper embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .embed__wrapper.-overlay { position: relative; z-index: 0; } .embed__wrapper.-overlay::before, .embed__wrapper.-overlay::after { content: ""; position: absolute; z-index: 2; transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1); pointer-events: none; } .embed__wrapper.-overlay::before { top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .embed__wrapper.-overlay::after { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: url("/img/icons/playbutton.svg") no-repeat; } @media screen and (min-width: 800px) { .embed__wrapper.-overlay::after { width: 100px; height: 100px; } } .embed__wrapper.-overlay.-isActive::before, .embed__wrapper.-overlay.-isActive::after { opacity: 0; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { margin-top: 0; font-family: var(--root-font-family-heading); font-weight: 300; color: #3e3e3e; line-height: 112.5%; } @media screen and (min-width: 800px) { h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { line-height: 120%; } } @media screen and (min-width: 800px) { h4, .h4, h5, .h5 { line-height: 112.5%; } } h1, .h1 { font-weight: 300; margin-bottom: 1rem; font-size: clamp(2rem, 4.5vw, 3.5rem); } @media screen and (min-width: 1024px) { h1, .h1 { margin-bottom: 2rem; } } h2, .h2 { margin-bottom: 0.75rem; color: #3e3e3e; font-size: clamp(1.5rem, 3.5vw, 2.5rem); } @media screen and (min-width: 1024px) { h2, .h2 { margin-bottom: 1.5rem; } } h2.-homepage, .h2.-homepage { font-size: clamp(2rem, 2.5vw, 2.25rem); margin-bottom: 1.5rem; } h3, .h3 { color: #3d684f; margin-bottom: 0.625rem; font-size: clamp(1.25rem, 2.5vw, 2rem); } @media screen and (min-width: 1024px) { h3, .h3 { margin-bottom: 1rem; } } .icon { --icon-stroke-color: #3e3e3e; --icon-fill-color: #F5B210; aspect-ratio: 1; height: 4.5rem; } .icon.-square { border-radius: 0.25em; } .icon.-circle { /* Using clip-path to avoid clipping the icons. */ clip-path: circle(calc(50% - 0.5px)); } .icon.-gray { --icon-stroke-color: #3B3B45; --icon-fill-color: #3B3B45; } .icon.-knock-out-yellow { --icon-stroke-color: white; --icon-fill-color: #F5B210; } .icon.-knock-out-white { --icon-stroke-color: white; --icon-fill-color: white; } .link { --link-color: #147bb8; color: var(--link-color); text-decoration: underline; font-weight: 600; } .link:hover { text-decoration: none; } .pagination { text-align: end; } .pagination__list { list-style: none; display: inline-flex; } .pagination__item.-active .pagination__link { background: #3d684f; color: white; font-weight: 700; } .pagination__item.-next, .pagination__item.-previous { display: none; } .pagination__link { aspect-ratio: 1; background: transparent; border-radius: 50%; color: #3e3e3e; display: grid; line-height: 1; width: clamp(2rem, 1.5vw, 2.5rem); height: clamp(2rem, 1.5vw, 2.5rem); place-items: center; transition: all 0.2s ease-in-out; text-decoration: none; font-weight: 400; } .-subhead { line-height: 1.8rem; } p { color: #3e3e3e; } .select.-rounded .select__wrapper { border-radius: 20px; min-width: 200px; } .select.-rounded .select__select { background-color: transparent; } .select.-green .select__label { color: #3e3e3e; font-weight: 400; font-size: 0.875rem; } .select.-green .select__wrapper { border: 2px solid #3d684f; background: white; } .select.-green .select__wrapper::after { font-weight: 400; color: #3d684f; } .select.-green .select__wrapper:hover::after { color: #3e3e3e; } .select__label { display: block; margin-bottom: 10px; color: #137CB9; font-size: 1.1rem; font-weight: 600; } .select__select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ""; padding: 8px 15px; width: 100%; border: 0; cursor: pointer; } .select__wrapper { position: relative; display: block; border: 2px solid #3e3e3e; } .select__wrapper::after { content: "\f078"; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; height: 100%; width: 50px; pointer-events: none; transition: color 250ms #f5b211; } .select:hover .select__wrapper::after { color: #137CB9; } .aboutProject { padding: 30px 0; background-color: #3d684f; } .aboutProject__list { list-style-type: none; padding-left: 0; margin: 0; } .aboutProject__listItem { position: relative; padding: 0 30px; margin-bottom: 27px; color: #fff; } .aboutProject__listItem::before { content: ""; display: block; position: absolute; top: 6px; left: 0; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #fff; } .aboutProject__listItem:last-child { margin-bottom: 0; } .accordion { --webkit-appearance: none; background-color: white; border-radius: 4px; box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2); transition-property: box-shadow, height; transition-duration: 250ms; transition-timing-function: ease-out; height: var(--accordion-target-height); overflow: hidden; } .accordion__summary { list-style: none; display: flex; align-items: center; padding-right: 0.75rem; cursor: pointer; } .accordion__heading { font-size: clamp(1.125rem, 3vw, 2rem); color: #3e3e3e; padding: 1rem; margin-bottom: 0; flex-grow: 1; } .accordion__iconWrapper { padding: 0.5rem; aspect-ratio: 1; block-size: 1.5rem; transition: background-color 0.25s ease; position: relative; } .accordion__iconWrapper span { content: ""; position: absolute; transition: 0.25s ease; background: #137CB9; } .accordion__iconWrapper { /* Create the "+" shape by positioning the spans absolutely */ } .accordion__iconWrapper span:first-child { top: 25%; bottom: 25%; width: 8%; left: 45%; } .accordion__iconWrapper span:last-child { left: 25%; right: 25%; height: 8%; top: 45%; } .accordion__content { padding: 1rem; padding-top: 0; } .accordion[data-accordion-open] { box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2); } .accordion[data-accordion-open] .accordion__iconWrapper { /* Morph the shape when the button is hovered over */ } .accordion[data-accordion-open] .accordion__iconWrapper span { transform: rotate(90deg); } .accordion[data-accordion-open] .accordion__iconWrapper span:last-child { left: 50%; right: 50%; } .breadCrumbNav { padding: 22px 0; } .breadCrumbNav__list { list-style-type: none; padding-left: 0; display: flex; flex-direction: row; margin: 0; } .breadCrumbNav__listCurrent { margin: 0; font-weight: 700; } .breadCrumbNav__listItem { font-size: 1.125rem; } .breadCrumbNav__listItem::after { content: "\f105"; margin: 0 10px; font-weight: 300; font-size: 1.3rem; vertical-align: -2.8px; color: #969696; } .breadCrumbNav__listItem:last-child::after { display: none; } .breadCrumbNav__listLink { color: #137CB9; text-decoration: none; transition: color 75ms cubic-bezier(0.39, 0.575, 0.565, 1); } .breadCrumbNav__listLink:hover { color: #3e3e3e; } .breadCrumbNav.-shade { background-color: #f8f8f8; } .breadCrumbNav + .threeColumnText { padding-top: 65px; } .buttonWrapper { padding: 50px 0; text-align: center; } .card { color: #3e3e3e; display: flex; flex-direction: column; gap: 1rem; } .card__imageWrapper { width: 100%; margin-bottom: 0.5rem; aspect-ratio: 5/3; height: -moz-min-content; height: min-content; } .card__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .card__heading { font-size: 1rem; font-weight: 600; display: inline-block; font-size: 1.125rem; } .card__textWrapper { display: flex; flex-direction: column; gap: 1rem; } .card__text { margin-bottom: 0; } .card__text > * { color: inherit; } .card__link { color: #3e3e3e; margin-top: auto; font-weight: 600; } .card.-iconCard { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 0; } .card.-iconCard .card__imageWrapper { max-height: 70px; } .card.-iconCard .card__icon { height: 100%; width: auto; } .card.-iconCard .card__imageWrapper, .card.-iconCard .card__text { margin: 0; } .card.-iconCard .card__heading { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); } .card.-iconCard .card__text { font-size: 1rem; line-height: 150%; } .categoryFilters { padding: 30px 0; } .categoryFilters__buttonRow { max-width: 1000px; } .categoryFilters__cta { margin-bottom: 16px; margin-right: 14px; } .categoryFilters__cta.button.-primary:hover::after, .categoryFilters__cta.button.-primary.-active::after { opacity: 0; } .categoryFilters__title { margin-bottom: 16px; font-size: 24px; font-weight: 600; } .categoryFilters.-shade { background-color: #f8f8f8; } @media screen and (min-width: 800px) { .categoryFilters { padding: 50px 0; } .categoryFilters.-shade { padding: 50px 0 125px; } } @media (max-width: 991.98px) { .categoryFilters__cta.button.-primary { padding: 8px 15px; } } .companyFeature { position: relative; padding: 100px 0 30px; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .companyFeature__title, .companyFeature__description { margin-bottom: 0.75rem; color: #fff; transition: color 250ms cubic-bezier(0.39, 0.575, 0.565, 1); } .companyFeature__description p { color: #fff; } .companyFeature__description > *:last-child::after { font-weight: 500; font-size: 0.975rem; margin-left: 7px; transition: margin-left 500ms cubic-bezier(0.075, 0.82, 0.165, 1); content: "\f178"; } .companyFeature__cta { position: relative; display: block; z-index: 2; text-decoration: none; max-width: 555px; } .companyFeature__cta:hover .companyFeature__title, .companyFeature__cta:hover .companyFeature__description p { color: rgb(252.6020408163, 234.8571428571, 163.3979591837); } .companyFeature__cta:hover .companyFeature__description > *:last-child::after { margin-left: 11px; } .companyFeature::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 190%; z-index: 1; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); } @media screen and (min-width: 800px) { .companyFeature { padding: 592px 0 136px; } .companyFeature__description { font-size: 1.125rem; } .companyFeature::after { height: 75%; } } .correspondingSliderNav__navList { list-style-type: none; padding-left: 0; display: flex; flex-direction: row; align-items: center; } .correspondingSliderNav__navListItem { line-height: 0; } .correspondingSliderNav__navButton, .correspondingSliderNav__navButtonPrev, .correspondingSliderNav__navButtonNext { background: none; border: none; cursor: pointer; } .correspondingSliderNav__navButton:hover::before, .correspondingSliderNav__navButtonPrev:hover::before, .correspondingSliderNav__navButtonNext:hover::before { color: #3e3e3e; } .correspondingSliderNav__navButtonPrev::before { content: "\f053"; color: #137CB9; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); font-size: 2rem; } .correspondingSliderNav__navButtonNext::before { content: "\f054"; color: #137CB9; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); font-size: 2rem; } .correspondingSliderNav__navButton.-active::before { color: #3e3e3e; } .correspondingSliderNav__navButton::before { content: "\f111"; color: #137CB9; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); font-size: 0.6rem; vertical-align: 2px; } p { color: #3e3e3e; } .ctaBar { background-color: #137CB9; } .ctaBar__content { display: flex; flex-direction: column; padding: 2rem 0; } @media screen and (min-width: 800px) { .ctaBar__content { flex-direction: row; justify-content: space-between; align-items: center; padding: 1rem 0; } } .ctaBar__content .button { width: -moz-fit-content; width: fit-content; } .ctaBar__heading { margin: 0 0 1rem 0; font-weight: 400; color: white; font-size: 1.667rem; font-size: clamp(1.667rem, 2.5vw, 2rem); } @media screen and (min-width: 800px) { .ctaBar__heading { margin-bottom: 0; } } .detailsGrid { background-color: white; } .detailsGrid__layer { border-top: 1px solid #DADADA; border-bottom: 1px solid #DADADA; } .detailsGrid__grid { --gap: 1.5rem; display: flex; flex-direction: column; gap: var(--gap); } @media screen and (min-width: 576px) { .detailsGrid__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); } } .detailsGrid__itemHeading, .detailsGrid__itemDetail { color: #3e3e3e; text-transform: uppercase; display: block; } .detailsGrid__itemHeading { font-size: 0.875rem; font-weight: 400; } .detailsGrid__itemDetail { font-weight: 600; font-size: 1rem; word-break: break-word; } .entryInfo { background: #f8f8f8; padding: 1rem 0; } .featuredPhoto__photoWrapper { width: 70vw; height: 70vw; overflow: hidden; position: relative; display: block; transform: rotate(45deg); border: 2px solid #b7b7b7; margin: 0 auto; } .featuredPhoto__photoWrapper::after { content: ""; position: absolute; display: block; width: calc(100% - 20px); height: calc(100% - 20px); left: -10px; top: -10px; border: 20px solid #fff; } .featuredPhoto img { display: block; position: absolute; transform: rotate(-45deg) scale(1.375); transform-origin: center; height: 100%; } @media screen and (min-width: 1024px) { .featuredPhoto__photoWrapper { width: 625px; height: 625px; margin: 0; } } .featuredWork { background-color: #d5ebde; padding: 40px; display: flex; flex-direction: column; text-decoration: none; transition: box-shadow 150ms ease-out; text-align: left; } .featuredWork:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } .featuredWork.-skeleton { background-color: #DDDBDD; position: relative; } .featuredWork.-skeleton::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)); animation: shimmer 5s infinite; content: ""; } @keyframes shimmer { 100% { transform: translateX(100%); } } .featuredWork.-skeleton .featuredWork__body { display: none; } .featuredWork__date { color: #3e3e3e; text-transform: uppercase; font-size: 14px; font-weight: 600; margin-bottom: 0; } .featuredWork__location { position: relative; } .featuredWork__location::before { content: "\f3c5"; color: #137CB9; margin-right: 0.5rem; } .featuredWork__location::after { content: "|"; position: absolute; right: -0.75rem; top: -1px; } .featuredWork__title { display: inline-block; color: #3e3e3e; font-size: 1.125rem; font-weight: 600; margin-bottom: 20px; padding-bottom: 20px; position: relative; } .featuredWork__title::after { content: ""; display: block; width: 50px; height: 3px; background-color: #3d684f; position: absolute; bottom: 0; left: 0; } .featuredWork__description p { margin-bottom: 2rem; } .featuredWork__description, .featuredWork__description p { color: #3e3e3e; } .featuredWork__description a { word-wrap: break-word; text-decoration: none; color: #3d684f; font-weight: 700; } .featuredWork__description a:hover { color: #fad540; } .featuredWork__tagList { margin-top: auto; display: flex; -moz-column-gap: 1.5rem; column-gap: 1.5rem; flex-wrap: wrap; } .featuredWork__location, .featuredWork__list { margin: 0; } .featuredWork__body { display: flex; flex-direction: column; flex-grow: 1; } .featuredWork__image { height: 209px; overflow: hidden; position: relative; width: 100%; } .featuredWork__image img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-width: 100%; max-height: none; min-width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 1; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .featuredWork__tagLink.tagList__tagLink { white-space: nowrap; color: #3e3e3e; } .featuredWork__tagLink.tagList__tagLink::before { display: none; } .featuredWork .tagList__tag:has(+ .tagList__tag) { position: relative; } .featuredWork .tagList__tag:has(+ .tagList__tag)::after { content: "|"; position: absolute; right: -0.75rem; top: -1px; color: #3e3e3e; } .featuredWork__tag { margin-right: 27px; } .featuredWork__list { margin-bottom: 0; } .featuredWork.-emphasized { background: #fff; padding: 0; transition: background 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .featuredWork.-emphasized .featuredWork__body { padding: 30px; } .featuredWork.-emphasized .featuredWork__date { color: #3d684f; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .featuredWork.-emphasized .featuredWork__title { color: #137CB9; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .featuredWork.-emphasized .featuredWork__title::after { display: none; } .featuredWork.-emphasized .featuredWork__description, .featuredWork.-emphasized .featuredWork__description p { color: #000; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .featuredWork.-emphasized .featuredWork__description::after, .featuredWork.-emphasized .featuredWork__description p::after { color: #137CB9; } .featuredWork.-emphasized .featuredWork__tagLink.tagList__tagLink { font-size: 16px; font-weight: 600; color: #137CB9; } .featuredWork.-emphasized .featuredWork__tagLink.tagList__tagLink::before { display: inline-block; } .featuredWork.-emphasized .featuredWork__description > *:last-child::after { font-weight: 500; font-size: 0.975rem; margin-left: 11px; transition: margin-left 500ms cubic-bezier(0.075, 0.82, 0.165, 1); content: "\f178"; display: inline-block; transition: transform 250ms cubic-bezier(0.075, 0.82, 0.165, 1), color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .featuredWork.-emphasized:hover { background: #137CB9; transform: none; } .featuredWork.-emphasized:hover .featuredWork__description, .featuredWork.-emphasized:hover .featuredWork__description p, .featuredWork.-emphasized:hover .featuredWork__title, .featuredWork.-emphasized:hover .featuredWork__date, .featuredWork.-emphasized:hover .featuredWork__location, .featuredWork.-emphasized:hover .featuredWork__location::before { color: #fff; } .featuredWork.-emphasized:hover .featuredWork__description > *:last-child::after { color: #fff; } .featuredWork.-emphasized:hover .featuredWork__tagLink { color: #fff; } .featuredWork.-emphasized.-skeleton { height: 700px; background-color: #DDDBDD; } .footerNavigation { display: flex; gap: 1rem; flex-direction: column; justify-content: space-between; } @media screen and (min-width: 800px) { .footerNavigation { flex-direction: row; } } @media screen and (min-width: 1200px) { .footerNavigation { justify-content: space-around; } } .footerNavigation__heading, .footerNavigation__headingLink { font-size: 1rem; color: #3e3e3e; text-decoration: none; margin: 0; font-weight: bold; font-family: var(--root-font-family); } .footerNavigation__headingLink { background-image: linear-gradient(#3e3e3e 0 0), linear-gradient(transparent 0 0); background-position: 0 100%, 0 100%; background-repeat: no-repeat; background-size: 0 1px, 100% 1px; position: relative; transition: background-size 0.15s linear; } .footerNavigation__headingLink:hover { background-size: 100% 1px, 0 1px; } .footerNavigation__headingLink.-reverse { background-image: linear-gradient(transparent 0 0), linear-gradient(#3e3e3e 0 0); background-position: 0 100%, 100% 100%; } .footerNavigation__headingLink.-reverse:hover { background-size: 100% 1px, 0 1px; } .footerNavigation__linkList { list-style-type: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; margin-bottom: 1rem; } @media screen and (min-width: 1024px) { .footerNavigation__linkList { margin-bottom: 0; } } .footerNavigation__navItem { line-height: 225%; } .footerNavigation__navLink { text-decoration: none; font-weight: 400; color: #3e3e3e; background-image: linear-gradient(#3e3e3e 0 0), linear-gradient(transparent 0 0); background-position: 0 100%, 0 100%; background-repeat: no-repeat; background-size: 0 1px, 100% 1px; position: relative; transition: background-size 0.15s linear; } .footerNavigation__navLink:hover { background-size: 100% 1px, 0 1px; } .footerNavigation__navLink.-reverse { background-image: linear-gradient(transparent 0 0), linear-gradient(#3e3e3e 0 0); background-position: 0 100%, 100% 100%; } .footerNavigation__navLink.-reverse:hover { background-size: 100% 1px, 0 1px; } .fullWidth .container p { line-height: 150%; margin: 0; margin-bottom: 2rem; } .fullWidth .container figure { margin-left: 0; margin-right: 0; } .fullWidth .container img { max-width: 100%; } .fullWidth .container a:not(.button) { text-decoration: none; color: #137CB9; font-weight: 700; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .fullWidth .container a:not(.button):hover, .fullWidth .container a:not(.button):focus { color: #3e3e3e; } .hoverCard { overflow: hidden; box-shadow: none; } .hoverCard:hover, .hoverCard:focus, .hoverCard:focus-within { box-shadow: none; } .hoverCard:hover .hoverCard__content, .hoverCard:focus .hoverCard__content, .hoverCard:focus-within .hoverCard__content { top: 0; } .hoverCard:hover .hoverCard__titleIcon, .hoverCard:focus .hoverCard__titleIcon, .hoverCard:focus-within .hoverCard__titleIcon { /* Morph the shape when the button is hovered over */ } .hoverCard:hover .hoverCard__titleIcon span, .hoverCard:focus .hoverCard__titleIcon span, .hoverCard:focus-within .hoverCard__titleIcon span { transform: rotate(90deg); } .hoverCard:hover .hoverCard__titleIcon span:last-child, .hoverCard:focus .hoverCard__titleIcon span:last-child, .hoverCard:focus-within .hoverCard__titleIcon span:last-child { left: 50%; right: 50%; } .hoverCard.accordion[data-accordion-open] { box-shadow: none; } .hoverCard__imageWrapper { position: relative; margin-bottom: 0.5rem; display: grid; grid-template-rows: 250px auto; } @media screen and (min-width: 1024px) { .hoverCard__imageWrapper { display: block; } } .hoverCard__image { aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; max-width: 300px; } @media screen and (min-width: 1024px) { .hoverCard__image { max-width: unset; } } .hoverCard__accordionHeading { padding-left: 0; font-size: 1.25rem; } .hoverCard__accordionSummary.-hidden { display: none; } .hoverCard__accordionContent { padding-left: 0; } @media screen and (min-width: 1024px) { .hoverCard__accordionContent { padding: 0; } } @media screen and (min-width: 1024px) { .hoverCard__content { position: absolute; top: -100%; left: 0; width: 100%; height: 100%; transition: top 0.25s ease-out; padding: 1.5rem; visibility: visible; opacity: 1; } .hoverCard__content::before { content: ""; background-color: #284a37; width: 100%; height: 100%; position: absolute; top: 0; left: 0; mix-blend-mode: multiply; z-index: 0; } } .hoverCard__text { position: relative; z-index: 1; } .hoverCard__text > * { color: #3e3e3e; } @media screen and (min-width: 1024px) { .hoverCard__text > * { color: white; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; max-height: 4lh; overflow: hidden; } } .hoverCard__titleWrapper { gap: 0.25rem; align-items: center; display: none; } @media screen and (min-width: 1024px) { .hoverCard__titleWrapper { display: flex; } } .hoverCard__titleIcon { aspect-ratio: 1; block-size: 1.5rem; transition: background-color 0.25s ease; position: relative; } .hoverCard__titleIcon span { content: ""; position: absolute; transition: 300ms; background: #137CB9; } .hoverCard__titleIcon { /* Create the "+" shape by positioning the spans absolutely */ } .hoverCard__titleIcon span:first-child { top: 25%; bottom: 25%; width: 8%; left: 45%; } .hoverCard__titleIcon span:last-child { left: 25%; right: 25%; height: 8%; top: 45%; } .hoverCard__title { font-size: clamp(1rem, 1.5vw, 1.125rem); } .hoverCard__button.button.-whiteOutline { --button-bg: var(--button-green-rgb); --button-border-hover: #3d684f; --button-color: #3e3e3e; --button-border: #3d684f; } .hoverCard__button.button.-whiteOutline:hover { --button-color: white; } @media screen and (min-width: 1024px) { .hoverCard__button.button.-whiteOutline { --button-bg: var(--button-green-rgb); --button-border: white; --button-border-hover: white; --button-color: white; } } .iconJumpNav { display: flex; flex-direction: column; justify-content: space-between; } .iconJumpNav__navLink { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(100% + 30px); height: auto; padding: 15px; margin-left: -15px; margin-right: -15px; background-color: #137CB9; text-decoration: none; transition: background-color 75ms cubic-bezier(0.39, 0.575, 0.565, 1); } .iconJumpNav__navLink:hover { background-color: #fff; } .iconJumpNav__navLinkText { margin: 0; line-height: 1.15; text-align: center; width: 100%; color: #fff; font-weight: 600; transition: color 75ms cubic-bezier(0.39, 0.575, 0.565, 1); } .iconJumpNav__navLink:hover .iconJumpNav__navLinkText { color: #137CB9; } .iconJumpNav__svgIcon { display: none; margin-bottom: 10px; height: 35px; } .iconJumpNav__iconFill { fill: #fff; stroke: #fff; transition: fill 75ms cubic-bezier(0.39, 0.575, 0.565, 1); } .iconJumpNav__navLink:hover .iconJumpNav__iconFill { fill: #137CB9; stroke: #137CB9; } @media screen and (min-width: 800px) { .iconJumpNav { flex-direction: row; } .iconJumpNav__navLink { margin: 0 15px 70px; width: 168px; height: 168px; border-radius: 50%; } .iconJumpNav__svgIcon { display: block; } } .indexCta { background-color: #3d684f; padding: 2rem 0; } .indexCta__ctaWrapper { text-align: center; } .introduction__wrapper { border-bottom: 2px solid #3d684f; max-width: 800px; padding-bottom: 32px; } .introduction__body > p { font-size: 1.1rem; line-height: 1.9rem; } .jumpNav { padding: 2rem 0; } .jumpNav__list { list-style-type: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; align-items: center; } .jumpNav__link { font-weight: 700; text-decoration: none; color: #3d684f; font-size: 1.125rem; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .jumpNav__listItem { margin-bottom: 1rem; } .jumpNav__link:hover { color: #3e3e3e; } .jumpNav.-shade { background-color: #f8f8f8; } @media screen and (min-width: 800px) { .jumpNav__list { flex-direction: row; flex-wrap: wrap; justify-content: center; } .jumpNav__listItem { margin-right: 20px; margin-bottom: 0; } .jumpNav__listItem:last-child { margin-right: 0; } .jumpNav__listItem::after { content: "|"; margin-left: 18px; color: #969696; font-weight: 700; vertical-align: 1px; } .jumpNav__listItem:last-child::after { content: ""; margin-left: 0; } } .jumpNavigation { padding: 20px 30px; background-color: #137CB9; overflow: hidden; } .jumpNavigation__list { list-style-type: none; padding-left: 0; margin: 0; } .jumpNavigation__listItem { margin-bottom: 20px; text-align: center; } .jumpNavigation__link { position: relative; text-decoration: none; color: #fff; font-weight: 400; } .jumpNavigation__link:hover, .jumpNavigation__link.-active { font-weight: 600; } .jumpNavigation__link.-active::after { content: ""; position: absolute; display: block; top: 12px; right: -10016px; width: 9999px; border-top: 2px solid #fff; } @media screen and (min-width: 1024px) { .jumpNavigation__listItem { text-align: left; } } .largeImage.layer { padding-bottom: 0; } .largeImage__desktop { width: 100%; } .largeImage__caption > p { font-style: italic; font-size: clamp(1rem, 1.5vw, 1.125rem); } .largeImage__caption { text-align: center; margin-top: 1rem; } .largeImage__header { max-width: 570px; margin-bottom: 3.8rem; } .largeImage__introduction > * { font-size: 1.125rem; line-height: 1.4; } .largeImage__imageWrapper { padding-bottom: 3rem; } .largeImage.-halfShade { background-color: #f8f8f8; } .largeImage.-halfShade .largeImage__imageWrapper { position: relative; } .largeImage.-halfShade .largeImage__imageWrapper::after { content: ""; display: block; position: absolute; bottom: 0; left: -5000px; height: 50%; width: 10000px; background-color: #fff; z-index: 0; } .largeImage.-halfShade .largeImage__caption, .largeImage.-halfShade .largeImage__desktop { z-index: 1; position: relative; } .largeVideo { background-color: white; } .listFilters { padding-top: 30px; } .listFilters__wrapper { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .listFilters__select { width: calc(100% - 30px); margin: 0 15px 30px; } .listFilters__select .select__wrapper { min-height: 35px; } @media screen and (min-width: 800px) { .listFilters { padding: 50px 0 20px; } .listFilters__select { width: calc(50% - 100px); margin: 0 50px 30px; } } .logoTicker__tickerWrapper { display: flex; overflow: hidden; width: 100vw; margin-left: -15px; } @media (min-width: 1250px) { .logoTicker__tickerWrapper { margin-left: calc((100vw - 1220px) / 2 * -1); } } .logoTicker__tickerWrapper:hover .logoTicker__ticker { animation-play-state: paused; } .logoTicker__ticker { --animation-duration: 15s; display: flex; align-items: center; list-style: none; padding-inline: 0; animation: ticker var(--animation-duration) linear infinite; } .logoTicker__ticker:has(.logoTicker__logoWrapper:nth-child(6)) { --animation-duration: 18s; } .logoTicker__ticker:has(.logoTicker__logoWrapper:nth-child(8)) { --animation-duration: 24s; } .logoTicker__ticker:has(.logoTicker__logoWrapper:nth-child(10)) { --animation-duration: 28s; } .logoTicker__ticker:has(.logoTicker__logoWrapper:nth-child(12)) { --animation-duration: 34s; } .logoTicker__ticker:has(.logoTicker__logoWrapper:nth-child(14)) { --animation-duration: 40s; } .logoTicker__ticker:has(.logoTicker__logoWrapper:nth-child(16)) { --animation-duration: 50s; } .logoTicker__ticker:has(.logoTicker__logoWrapper:nth-child(18)) { --animation-duration: 56s; } .logoTicker__logoWrapper { padding-inline: 2.5rem; } .logoTicker__logo { min-width: 75px; max-width: 300px; max-height: 105px; -o-object-fit: contain; object-fit: contain; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .megaMenu { --mega-menu-container-edge: calc((100vw - 1250px) / 2); inline-size: 100%; z-index: var(--z-drawer); transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); opacity: 0; } .megaMenu__container { background: white; box-shadow: 0 1rem 4rem 0 rgba(0, 0, 0, 0.05); } @media screen and (min-width: 1024px) { .megaMenu__wrapper { display: grid; gap: 2rem; grid-template-columns: var(--mega-menu-container-edge) min(25%, 325px) repeat(3, 1fr) var(--mega-menu-container-edge); border-top: 8px solid #3d684f; } } .megaMenu__column { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 0 3rem; } .megaMenu__column.-featuredColumn { height: 100%; padding-left: 1rem; padding-right: 2rem; background: #3d684f; color: white; grid-column: 1/3; } .megaMenu__column.-featuredColumn .megaMenu__columnTitle { color: white; } .megaMenu__column.-featuredColumn .megaMenu__columnDescription > * { color: white; } @media (min-width: 1250px) { .megaMenu__column.-featuredColumn { padding-left: calc(var(--mega-menu-container-edge) + 1rem); } } .megaMenu__column.-twoColumn { grid-column: span 2; } .megaMenu__column.-twoColumn .megaMenu__columnList { -moz-column-count: 2; column-count: 2; display: table-column; } @media screen and (min-width: 1024px) { .megaMenu__column.-twoColumn .megaMenu__listItem { margin-bottom: 0.5rem; } } .megaMenu__columnTitle { font-family: var(--root-font-family); font-size: 1.125rem; margin-bottom: 0; color: #3e3e3e; font-weight: 600; } .megaMenu__columnTitle:hover .megaMenu__linkIcon { transform: translateX(2px); } .megaMenu__columnTitleLink { font-family: var(--root-font-family); font-size: 1.125rem; margin-bottom: 0; color: #3e3e3e; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 0.25rem; } .megaMenu__columnButton { width: -moz-fit-content; width: fit-content; margin-top: 0.5rem; } .megaMenu__linkIcon { color: #3d684f; width: 1cap; height: 1cap; transition: transform 150ms ease-out; } .megaMenu__columnDescription > * { color: grey; margin-bottom: 0; } .megaMenu__columnList { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; margin-top: 0; padding: 0; } .megaMenu__listItem { line-height: 200%; } .megaMenu__listItem a { line-height: 200%; font-weight: 400; text-decoration: none; color: #3e3e3e; transition: color 150ms ease-out; } .megaMenu__listItem a:hover { color: #3d684f; } .megaMenu__tile { font-size: 1.25rem; } @media screen and (min-width: 1024px) { .megaMenu__tile { min-width: 18.75rem; } } .megaMenu__columnImageWrapper { max-width: 240px; } .megaMenu__columnImage { aspect-ratio: 3/2; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .navigation__list { align-items: center; display: flex; gap: 4.5rem; justify-content: flex-end; list-style: none; } .navigation__heading { border-bottom: 2px solid lightgray; font-size: 2rem; font-weight: 400; line-height: 1; margin-bottom: 0; padding: 0.5rem 1rem; text-align: center; } .navigation__trigger { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; color: unset; margin: 0; padding: 0; color: #3e3e3e; cursor: pointer; font-size: 1.125rem; font-weight: 600; line-height: 150%; text-decoration: none; transition: color 150ms ease-out; white-space: nowrap; position: relative; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .navigation__trigger::after { content: ""; background-image: url('data:image/svg+xml,'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; display: block; height: 70px; width: 80px; position: absolute; bottom: -91px; left: 50%; opacity: 0; transform: translateX(-50%); transition: bottom 250ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); } .navigation__trigger:hover { color: #3d684f; } .navigation__trigger--active::after { opacity: 1; } .navigation__triggerIcon { color: #3e3e3e; width: 1cap; height: 1cap; } .navigation__triggerIconWrapper { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; } .navigation__megaMenu { display: none; position: absolute; left: 0; opacity: 0; top: 100%; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1); opacity: 0; width: 100%; } .navigation__megaMenu[aria-hidden=false] { display: grid; } .navigation__megaMenu--active { opacity: 1; } body.scrolled .navigation__trigger::after { bottom: -80px; } .plumbBobFollow { display: none; } .plumbBobFollow.-module .plumbBobFollow__imageWrapper { top: -61px; } .plumbBobFollow__wrapper { position: relative; } .plumbBobFollow__imageWrapper { position: absolute; top: 739px; right: 0; width: 138px; z-index: 5; transition: top 1000ms cubic-bezier(0.075, 0.82, 0.165, 1); } .plumbBobFollow__imageWrapper::before { content: ""; position: absolute; display: block; width: 14px; top: -9979px; height: 9999px; left: 0; right: 0; margin: 0 auto; background-color: #3d684f; z-index: 1; } .plumbBobFollow__plumbBob { width: 100%; z-index: 2; position: relative; } @media screen and (min-width: 1024px) { .plumbBobFollow { display: block; } } .primaryNav__dropdownCtaImageWrapper { overflow: hidden; } .primaryNav__dropdownCtaTextWrapper { padding: 1rem; background-color: #3d684f; } .primaryNav__dropdownCtaText, .primaryNav__dropdownCtaText p { margin: 0; color: #fff; font-size: 0.925rem; } .primaryNav__dropdownCtaLink { color: #fff; font-size: 0.925rem; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); text-decoration: none; } .primaryNav__dropdownCtaLink::after { content: "\f178"; font-weight: 400; vertical-align: middle; margin-bottom: 4px; margin-left: 4px; } .primaryNav__dropdownCtaLink:hover { color: #fad540; } .primaryNav__linkList { list-style-type: none; padding-left: 0; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; } .primaryNav__navLink { color: #3e3e3e; font-weight: 400; text-decoration: none; position: relative; z-index: 2; font-size: 1rem; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .primaryNav__navItem { position: relative; margin-bottom: 2rem; } .primaryNav__navItem:last-child { padding-right: 0; } .primaryNav__navItem:hover .primaryNav__navLink, .primaryNav__navItem:hover .primaryNav__dropDownNavlink { color: #649d79; outline: none; } .primaryNav__dropdownCtaImageWrapper { height: 140px; background-size: cover; background-repeat: no-repeat; background-position: center; } .primaryNav__dropDownNavLink { font-weight: 600; text-decoration: none; color: #3e3e3e; font-size: 1.075rem; transition: color 125ms cubic-bezier(0.19, 1, 0.22, 1); } .primaryNav__dropDownNavLink:hover, .primaryNav__dropDownNavLink:focus { color: #649d79; outline: none; } .primaryNav__dropdown { display: none; overflow-y: scroll; flex-direction: column; position: fixed; top: 89px; right: 0; bottom: 0; left: 0; background-color: #fff; z-index: 4; } .primaryNav__dropdown.-opened { display: flex; } .primaryNav__dropdown::before { content: ""; display: none; position: absolute; top: -19px; left: 180px; width: 0; height: 0; border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: 20px solid rgb(108.2654545455, 168.9345454545, 133.6618181818); } .primaryNav__dropdown::after { content: ""; display: block; position: absolute; top: -36px; left: 176px; width: 100px; background-color: transparent; height: 39px; } .primaryNav__dropdownListWrapper { background-color: #fff; padding: 0 1.5rem; display: flex; flex-direction: row; flex-wrap: wrap; } .primaryNav__dropdownList { list-style-type: none; padding-left: 0; text-align: center; left: 0; top: -100%; width: 50%; margin: 0 auto; transition: top 250ms cubic-bezier(0.19, 1, 0.22, 1); } .primaryNav__dropdownList li { margin-bottom: 25px; text-align: left; } .primaryNav__dropdownList li.-opened { width: 100%; } .primaryNav__dropdownList li:last-child { margin-bottom: 0; } .primaryNav__dropdownList.-expanded { top: 0; } .primaryNav__dropDownNavOverview { text-decoration: none; background: #fad540; padding: 1rem 1.5rem; text-align: center; display: block; color: #3e3e3e; font-weight: 600; margin-bottom: 1.5rem; } @media screen and (min-width: 1024px) { .primaryNav__dropdownCtaImageWrapper { height: 200px; } .primaryNav__dropdownCtaTextWrapper { flex-grow: 1; } .primaryNav__dropdownCta { width: 323px; min-width: 323px; border-top: 5px solid rgb(108.2654545455, 168.9345454545, 133.6618181818); display: flex; flex-direction: column; } .primaryNav__linkList { flex-direction: row; justify-content: space-around; } .primaryNav__navItem { margin-bottom: 0; padding-right: 8px; flex-grow: 1; } .primaryNav__navItem:hover .primaryNav__dropdown { display: flex; } .primaryNav__navLink { font-size: 1rem; white-space: nowrap; } .primaryNav__navItem.-simple:hover .primaryNav__dropdownListWrapper { width: 100%; margin-left: 90px; } .primaryNav__navItem.-simple:hover .primaryNav__dropdown { background-color: transparent; } .primaryNav__dropdown { overflow-y: visible; flex-direction: row; top: 55px; left: -175px; right: 0px; bottom: auto; position: absolute; } .primaryNav__dropdown::before { content: ""; display: block; border-bottom: 20px solid rgb(108.2654545455, 168.9345454545, 133.6618181818); } .primaryNav__dropdownListWrapper { display: flex; flex-wrap: nowrap; padding: 0 0; background-color: transparent; align-items: stretch; } .primaryNav__dropdownList { width: 100vw; display: flex; width: auto; flex-direction: column; text-align: left; background-color: #fff; border-top: 5px solid rgb(108.2654545455, 168.9345454545, 133.6618181818); } .primaryNav__dropdownList li { width: 230px; padding: 15px 30px; background-color: #fff; margin-bottom: 0; } .primaryNav__dropdownList li:first-child { padding: 30px 30px 15px; } .primaryNav__dropdownList li:last-child { padding: 15px 30px 30px; } .primaryNav .-mobile { display: none; } } .productFeature { position: relative; height: 522px; background-position: center; background-repeat: no-repeat; background-size: cover; } .productFeature__cta { margin-top: 30px; } .productFeature__footer { position: absolute; padding: 30px 35px; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.7); } .productFeature__title { margin: 0; font-weight: 200; color: #fff; } .productFeature__client { position: absolute; margin: 0; top: 0; right: 0; padding: 15px; background-color: rgba(19, 124, 185, 0.8); color: #fff; text-decoration: none; } .productFeature__client:hover { color: #fad540; } .productFeature__introduction p { color: #fff; margin-top: 15px; } .productFeature__introduction p:last-child { margin-bottom: 0; } .productFeature__hoverHidden { overflow: hidden; transition: max-height 500ms cubic-bezier(0.39, 0.575, 0.565, 1); } .productFeature__tagList .productFeature__tagLink { color: #fff; } .productFeature__tagList .productFeature__tagLink:hover { color: #fff; } .productFeature:hover .productFeature__hoverHidden { max-height: 500px; } @media screen and (min-width: 1024px) { .productFeature__hoverHidden { max-height: 0; } } .quote__mark { width: 60px; } .quote__text { font-weight: 400; line-height: 1.5; color: #3e3e3e; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); } .quote__author, .quote__title { display: block; font-size: 0.89rem; } .quote__author { text-transform: uppercase; color: #137CB9; } .secondaryNav { display: flex; flex-direction: column; align-items: center; grid-column: 3; position: absolute; bottom: 3rem; left: 0; width: 100%; transition: margin-top 250ms; } .secondaryNav__linkList { list-style-type: none; padding-left: 0; gap: 1.5rem; display: flex; gap: 1.5rem; justify-content: space-around; flex-direction: row; margin: 0; padding: 8px 0; margin-bottom: 2rem; align-self: stretch; } .secondaryNav__navLink { color: #3e3e3e; font-size: 0.778rem; text-decoration: none; transition: color 250ms cubic-bezier(0.19, 1, 0.22, 1); } .secondaryNav__navLink.-search::before { content: "\f002"; display: inline; font-size: 0.6rem; font-weight: 600; } .secondaryNav__navLink:hover, .secondaryNav__navLink:focus { outline: none; color: #3d684f; } @media screen and (min-width: 1024px) { .secondaryNav { align-items: flex-end; grid-row: 1; bottom: 0; position: relative; } .secondaryNav__button { transform: translateY(5px); } .secondaryNav__linkList { margin-bottom: 20px; position: relative; justify-content: flex-end; } } .socialList { list-style-type: none; padding-left: 0; display: flex; flex-direction: row; gap: 0.5rem; } .socialList__socialLink { border: 1px solid #3d684f; border-radius: 50%; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; flex-shrink: 0; width: 2.25rem; } .socialList__socialLink:hover { border-color: #3e3e3e; } .socialList__socialLink:hover::before { color: #3e3e3e; } .socialList__socialLink::before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; color: #3d684f; font-size: 1.25rem; transition: color 500ms cubic-bezier(0.075, 0.82, 0.165, 1); position: absolute; } .socialList__socialLink.-facebook::before { content: "\f39e"; } .socialList__socialLink.-twitter::before { content: "\f099"; } .socialList__socialLink.-linkedin::before { content: "\f0e1"; } .socialList__socialLink.-instagram::before { content: "\f16d"; } .stats { --stat-gap: 1rem; background-color: rgba(22, 137, 204, 0.1); color: #3e3e3e; padding: 1.5rem; display: flex; position: relative; flex-wrap: wrap; /* Margin-based spacing: iOS 11 etc. report @supports(gap) but don't render flex gap */ margin: calc(var(--stat-gap) / -2); } .stats__stat { flex-basis: 100%; text-align: center; flex-grow: 1; margin: calc(var(--stat-gap) / 2); } @media screen and (min-width: 800px) { .stats__stat { flex-basis: calc(33% - var(--stat-gap) * 2 / 2); } } .stats__statNumber, .stats__statLabel { display: block; } .stats__statNumber { font-weight: 100; line-height: 1; margin-bottom: 1rem; font-family: var(--root-font-family-heading); font-size: clamp(3rem, 5vw, 4rem); } .stats__statLabel { line-height: 120%; } .tagList__list { list-style-type: none; padding-left: 0; } .tagList__tag { display: inline-block; } .tagList__tag:has(+ .tagList__tag) { margin-right: 20px; } .tagList__tagLink { text-decoration: none; color: #137CB9; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .tagList__tagLink::before { content: "\f02b"; font-size: 0.8rem; margin-right: 4px; } .tagList__tagLink:hover { color: #3e3e3e; } .testimonial { --testimonial-font-color: #3e3e3e; display: grid; row-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; margin-left: 0; padding-left: 0; box-shadow: none; } .testimonial__content { margin-bottom: 0; color: var(--testimonial-font-color); } .testimonial__citationPhotoWrapper { height: 4rem; aspect-ratio: 1; border-radius: 4rem; overflow: hidden; flex-shrink: 0; } .testimonial__citationPhoto { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .testimonial__citation { color: var(--testimonial-font-color); line-height: 1.5; font-style: normal; font-weight: 600; font-size: 1rem; margin-bottom: 0; } .testimonial__citationTitle { display: block; color: var(--testimonial-font-color); font-weight: 400; font-size: 1rem; } .testimonial__footer { grid-row: 2/3; grid-column: 1/3; display: flex; align-items: center; gap: 1rem; } @media screen and (min-width: 800px) { .testimonial__footer { grid-column: 2/3; } } .testimonial__icon { --icon-fill-color: var(--accent-color-600); grid-row: 1/3; grid-column: 1/2; height: 2.0625rem; width: 2rem; min-width: 2rem; transform: translateY(-50%); } .twoColumns__column p { line-height: 150%; margin: 0; margin-bottom: 2rem; } .twoColumns__column figure { margin-left: 0; margin-right: 0; } .twoColumns__column img { max-width: 100%; } .twoColumns__column a:not(.button) { text-decoration: none; color: #137CB9; font-weight: 700; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .twoColumns__column a:not(.button):hover, .twoColumns__column a:not(.button):focus { color: #3e3e3e; } .twoColumns__column { margin: 0 32px; width: calc(100% - 64px); } .twoColumns__wrapper { margin-bottom: 32px; display: flex; flex-direction: column; margin-left: -32px; margin-right: -32px; } .twoColumns__ctaWrapper { text-align: center; } @media screen and (min-width: 800px) { .twoColumns__wrapper { flex-direction: row; } .twoColumns__column { width: calc(50% - 64px); } } div.workSample::after { display: none; } .workSample { overflow: hidden; position: relative; width: 100%; } .workSample__cta { color: #fff; text-decoration: none; font-size: 1.4rem; font-weight: 600; margin: 0; } .workSample__cta::after { font-weight: 500; font-size: 0.975rem; margin-left: 11px; transition: margin-left 500ms cubic-bezier(0.075, 0.82, 0.165, 1); content: "\f178"; display: inline; } .workSample__content { position: absolute; bottom: 20px; left: 20px; z-index: 3; width: calc(100% - 40px); } .workSample__list { margin: 0; margin-top: 15px; display: flex; flex-direction: row; flex-wrap: wrap; } .workSample__tagLink { color: #fff; white-space: nowrap; } .workSample__tagLink:hover { color: #fff; } .workSample__tagLink::before { color: #f5b211; } .workSample__tagLink:hover::before { color: #f5b211; } .workSample:hover .workSample__cta::after { margin-left: 15px; } .workSample:hover::after { opacity: 0.7; } .workSample::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; transition: height 500ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 500ms cubic-bezier(0.075, 0.82, 0.165, 1); background: linear-gradient(to bottom, transparent, #000); opacity: 0.5; z-index: 2; } .workSample img { position: absolute; -o-object-fit: cover; object-fit: cover; top: 50%; left: 50%; width: auto; height: auto; max-height: none; min-width: 100%; min-height: 100%; max-height: 100%; z-index: 1; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } @media screen and (min-width: 800px) { .workSample img { max-height: 100%; max-width: none; } } .aboutSection { padding: 30px 0; } .aboutSection__wrapper { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; position: relative; } .aboutSection__feature { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .aboutSection__header { margin-bottom: 10px; } .aboutSection__subhead { margin-bottom: 50px; } .aboutSection__featuredPhoto { width: 100%; padding: 20% 0; } @media screen and (min-width: 800px) { .aboutSection__header { font-size: 2rem; } } @media screen and (min-width: 1024px) { .aboutSection { padding: 110px 0; } .aboutSection__feature { flex: 0 0 50%; max-width: 50%; } .aboutSection__featuredPhoto { position: absolute; top: -220px; right: -240px; width: auto; padding-top: 0; } } .callToAction { padding: 30px 0; background-color: #3d684f; } .callToAction__wrapper { display: flex; flex-direction: column; } .callToAction__title { color: #fff; font-weight: 300; text-align: center; } .callToAction__cta { display: flex; flex-direction: column; align-items: center; justify-content: center; } .callToAction.-greenBricks, .callToAction.-blackBricks { background-image: url("/img/patterns/bricktexture.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .callToAction.-greenBricks .callToAction__title, .callToAction.-blackBricks .callToAction__title { text-align: center; font-size: 1.5rem; } .callToAction.-greenBricks .callToAction__introduction, .callToAction.-blackBricks .callToAction__introduction { max-width: 1005px; margin: 0 auto; margin-bottom: 2.8rem; } .callToAction.-greenBricks .callToAction__introduction > *, .callToAction.-blackBricks .callToAction__introduction > * { color: #fff; } .callToAction.-greenBricks { background-image: url("/img/patterns/bricktexture.jpg"); } .callToAction.-blackBricks { background-image: url("/img/patterns/bricktextureblack.jpg"); } @media screen and (min-width: 800px) { .callToAction { padding: 70px 0; } .callToAction__wrapper { flex-direction: row; justify-content: space-between; } .callToAction.-greenBricks .callToAction__wrapper, .callToAction.-blackBricks .callToAction__wrapper { flex-direction: column; } .callToAction.-greenBricks .callToAction__title, .callToAction.-blackBricks .callToAction__title { max-width: 100%; margin-right: 0; font-size: 2rem; } .callToAction.-greenBricks .callToAction__introduction p, .callToAction.-blackBricks .callToAction__introduction p { font-size: 1.125rem; } .callToAction__title { margin-right: 50px; max-width: 650px; font-size: 2.335rem; text-align: left; } } .cardGrid__grid { display: grid; row-gap: 1.375rem; grid-template-columns: 100%; } @media screen and (min-width: 1024px) { .cardGrid__grid { row-gap: 1.875rem; grid-template-columns: auto; } } .cardGrid__heading { grid-row: 1; margin-bottom: 0; } .cardGrid__actions { grid-row: 3; display: flex; align-items: center; gap: 1.11rem; justify-content: space-between; } @media screen and (min-width: 1024px) { .cardGrid__actions { grid-row: 1; margin-left: auto; justify-content: flex-end; gap: 1.333rem; } } .cardGrid__listWrapper { grid-column: 1/3; } .cardGrid__cardList { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); list-style: none; -moz-column-gap: 1.11rem; column-gap: 1.11rem; row-gap: 3.5rem; grid-column: 1/3; padding-inline: 0; margin-top: 0; } .cardGrid .card { margin-bottom: 0; } .cardGrid .card.-skeleton { background-color: #DDDBDD; position: relative; } .cardGrid .card.-skeleton::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)); animation: shimmer 5s infinite; content: ""; } @keyframes shimmer { 100% { transform: translateX(100%); } } .cardGrid .card.-skeleton { height: 450px; width: 100%; } .cardGrid .card__imageWrapper { aspect-ratio: 1.6/1; margin-bottom: 0; } .cardsWithTextSlider { --container-padding: 15px; --container-padding-both: 30px; --slide-offset: 2rem; } @media screen and (min-width: 576px) { .cardsWithTextSlider { --slide-offset: 3rem; } } @media screen and (min-width: 1024px) { .cardsWithTextSlider .layer { padding-block: 8rem; } } .cardsWithTextSlider .splide__track { overflow: visible; width: calc(100% - var(--slide-offset) + var(--container-padding)); margin-left: calc(var(--container-padding) * -1); } @media screen and (min-width: 576px) { .cardsWithTextSlider .splide__track { width: calc(100% - var(--slide-offset)); margin-left: 0; } } @media (min-width: 1250px) { .cardsWithTextSlider .splide__track { width: 100%; } } .cardsWithTextSlider .splide__list { transition: transform 500ms cubic-bezier(0.44, 0.65, 0.07, 1.01); } .cardsWithTextSlider .splide__arrows { position: absolute; bottom: calc(100% + 1.75rem); right: var(--slide-offset); display: flex; /* Margin-based spacing: iOS 11 etc. report @supports(gap) but don't render flex gap */ margin-left: -0.375rem; margin-right: -0.375rem; } @media screen and (min-width: 576px) { .cardsWithTextSlider .splide__arrows { right: var(--slide-offset); } } @media screen and (min-width: 1440px) { .cardsWithTextSlider .splide__arrows { left: 100%; bottom: 2rem; right: unset; background-color: white; z-index: 2; } } .cardsWithTextSlider .splide__arrow { transition: opacity 250ms cubic-bezier(0.19, 1, 0.22, 1); position: unset; transform: unset; margin: 0.375rem; } .cardsWithTextSlider .card__imageWrapper { position: relative; height: 0; padding-bottom: 100%; overflow: hidden; } .cardsWithTextSlider .card__imageWrapper img, .cardsWithTextSlider .card__imageWrapper picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cardsWithTextSlider .card__imageWrapper img { -o-object-fit: cover; object-fit: cover; } .cardsWithTextSlider .card__imageWrapper::after { content: ""; background: black; width: 100%; height: 100%; opacity: 80%; transition: opacity 500ms ease; position: absolute; top: 0; left: 0; } .cardsWithTextSlider .card__body { margin-right: 15%; margin-left: 15px; opacity: 0; transition: opacity 500ms ease; } @media screen and (min-width: 576px) { .cardsWithTextSlider .card__body { margin-left: 0; } } .cardsWithTextSlider .card__link { font-weight: 600; display: block; margin-top: 1rem; } .cardsWithTextSlider .card.is-visible .card__body { opacity: 1; } .cardsWithTextSlider .card.is-visible .card__imageWrapper::after { opacity: 0; } .comparisonSlider { background-color: #f8f8f8; padding: 2rem 0; } .comparisonSlider__title { max-width: 450px; } .comparisonSlider__columns { display: flex; flex-direction: column; } .comparisonSlider__column ul { list-style-type: none; padding-left: 0.4rem; } .comparisonSlider__column li:before { content: "ยท"; font-size: 37px; vertical-align: -5px; } .comparisonSlider__introduction > *:last-child { margin-bottom: 0; } .comparisonSlider__column p { line-height: 150%; margin: 0; margin-bottom: 2rem; } .comparisonSlider__column figure { margin-left: 0; margin-right: 0; } .comparisonSlider__column img { max-width: 100%; } .comparisonSlider__column a:not(.button) { text-decoration: none; color: #137CB9; font-weight: 700; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .comparisonSlider__column a:not(.button):hover, .comparisonSlider__column a:not(.button):focus { color: #3e3e3e; } @media screen and (min-width: 1024px) { .comparisonSlider { padding: 6rem 0; } .comparisonSlider__introduction p, .comparisonSlider__introduction li, .comparisonSlider__column li, .comparisonSlider__column p { font-size: 1.125rem; } .comparisonSlider__columns { flex-direction: row; margin-left: -1rem; margin-right: -1rem; margin-bottom: 2rem; } .comparisonSlider__column { width: calc(50% - 1rem); margin: 0 1rem; } .comparisonSlider__column li { line-height: 1.1; } } .comparisonSlider__imageCompare { --thumb-background-color: #f5b211; --thumb-background-image: url('data:image/svg+xml;utf8,'); --thumb-size: 2.5rem; --thumb-radius: 50%; --thumb-border-color: white; --thumb-border-size: 0px; --focus-width: 2px; --focus-color: #3d684f; --border-width: 2px; --border-color: hsla(0, 0%, 0%, 0.9); --divider-color: #3d684f; --divider-width: 3px; } .connect { background: url("/img/patterns/bricktexture.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; padding: 30px 0; text-align: center; } .connect .container { position: relative; z-index: 2; } .connect__column { width: 100%; display: flex; flex-direction: column; } .connect__featuredWork:first-child { margin-bottom: 30px; } .connect__featuredWork { flex-grow: 1; } .connect__wrapper { display: flex; flex-direction: column; margin-bottom: 67px; } .connect__header { color: #fff; } @media screen and (min-width: 1024px) { .connect { padding: 80px 0; } .connect__header { margin-bottom: 80px; } } @media screen and (min-width: 800px) { .connect__wrapper { flex-direction: row; } .connect__column { width: calc(50% - 15px); } .connect__column:first-child { margin-right: 30px; } .connect__featuredWork.-emphasized { margin-bottom: 0; } } .contentWithAside { padding: 30px 0; } .contentWithAside__wrapper { display: flex; flex-direction: column; } .contentWithAside__richText p { line-height: 150%; margin: 0; margin-bottom: 2rem; } .contentWithAside__richText figure { margin-left: 0; margin-right: 0; } .contentWithAside__richText img { max-width: 100%; } .contentWithAside__richText a:not(.button) { text-decoration: none; color: #137CB9; font-weight: 700; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .contentWithAside__richText a:not(.button):hover, .contentWithAside__richText a:not(.button):focus { color: #3e3e3e; } .contentWithAside__richText { margin-bottom: 45px; } .contentWithAside__content { margin-bottom: 30px; } @media screen and (min-width: 800px) { .contentWithAside { padding: 80px 0; } .contentWithAside__wrapper { flex-direction: row; justify-content: space-between; } .contentWithAside__aside { width: 292px; min-width: 292px; } .contentWithAside__content { margin-right: 50px; margin-bottom: 0; max-width: 683px; } } .contentWithSideNav { padding: 0 0 30px; } .contentWithSideNav__wrapper { display: flex; flex-direction: column; } .contentWithSideNav__nav { width: calc(100% + 30px); position: relative; margin-left: -15px; margin-right: -15px; margin-bottom: 30px; } .contentWithSideNav__content { flex-grow: 1; } .contentWithSideNav__jumpNavigation.js-is-sticky { top: 0; } .contentWithSideNav__jumpNavigation.js-is-stuck { bottom: 0; } .contentWithSideNav__productFeature { margin-bottom: 30px; } @media screen and (min-width: 1024px) { .contentWithSideNav { padding: 75px 0 190px; } .contentWithSideNav__wrapper { flex-direction: row; } .contentWithSideNav__nav { width: 263px; min-width: 263px; margin-right: 99px; margin-left: 0; margin-bottom: 0; } .contentWithSideNav__productFeature { margin-bottom: 60px; } .contentWithSideNav__jumpNavigation { width: 263px; } } .ctaWithImage { overflow: hidden; } .ctaWithImage__content { padding: 30px 0; position: relative; z-index: 2; max-width: 487px; } .ctaWithImage__wrapper { display: flex; flex-direction: column; justify-content: space-between; } .ctaWithImage__imageWrapper { position: relative; z-index: 1; line-height: 0; } .ctaWithImage__imageWrapper::after { content: ""; display: none; position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; z-index: 2; background: radial-gradient(transparent, #fff 55%); } .ctaWithImage__image { position: relative; width: 100%; z-index: 1; } .ctaWithImage__imageAndCta { position: relative; text-align: center; margin-left: -15px; margin-right: -15px; } .ctaWithImage__cta.button.-primary { position: absolute; top: 50%; margin: 0 auto; transform: translateY(-50%) translateX(-50%); } .ctaWithImage__title { margin-bottom: 10px; } .ctaWithImage__description p:last-child { margin-bottom: 0; } .ctaWithImage__description p { line-height: 1.6; } @media screen and (min-width: 800px) { .ctaWithImage { min-height: 350px; } .ctaWithImage__content { padding: 105px 0; } .ctaWithImage__image { position: absolute; width: 120%; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .ctaWithImage__wrapper { flex-direction: row; } .ctaWithImage__imageWrapper { position: absolute; width: 200%; height: 140%; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .ctaWithImage__imageWrapper::after { display: block; } .ctaWithImage__imageAndCta { width: 50%; min-width: 50%; margin-left: 0; margin-right: 0; } } .designGear { padding: 75px 0; } .designGear__wrapper { display: flex; flex-direction: row; } .designGear__title { font-size: 2rem; line-height: 1.4; margin-bottom: 0.5rem; } .designGear__introduction p, .designGear__introduction li, .designGear__introduction a { font-size: 1.125rem; line-height: 1.6; } .designGear__introduction > *:last-child { margin-bottom: 0; } .designGear__introductionWrapper { margin-bottom: 1.6rem; } .designGear__gearContainer { width: 585px; height: 575px; position: relative; } .designGear__gearContainer::before { content: ""; display: block; width: 0; height: 0; border-bottom: 25px solid transparent; /* left arrow slant */ border-top: 25px solid transparent; /* right arrow slant */ border-left: 25px solid #fff; /* bottom, add background color here */ font-size: 0; line-height: 0; position: absolute; top: 246px; left: -20px; z-index: 1; } .designGear__bigGearWrapper { position: relative; width: 534px; height: 534px; transition: transform 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); } .designGear__bigGear { width: 534px; } .designGear__smallGear { width: 290px; pointer-events: none; } .designGear__gearLink { position: absolute; top: 257px; left: -2px; width: calc(100% - 223px); padding-right: 33%; padding-left: 30px; text-align: center; text-decoration: none; color: #fff; font-weight: 700; transform-origin: center; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .designGear__gearLink:hover { color: #649d79; } .designGear__gearLink.-two { transform: rotate(51.4285714286deg); top: 166px; left: 38px; } .designGear__gearLink.-three { transform: rotate(102.8571428571deg); top: 132px; left: 129px; } .designGear__gearLink.-four { transform: rotate(154.2857142857deg); top: 194px; left: 229px; } .designGear__gearLink.-five { transform: rotate(205.7142857143deg); top: 318px; left: 224px; } .designGear__gearLink.-six { transform: rotate(257.1428571429deg); top: 381px; left: 135px; } .designGear__gearLink.-seven { transform: rotate(308.5714285714deg); top: 346px; left: 27px; } .designGear__triangleOverlay { position: absolute; top: 173px; left: -1px; opacity: 0.6; width: 280px; mix-blend-mode: overlay; pointer-events: none; } .designGear__smallGear { position: absolute; top: 117px; left: 123px; transform-origin: center; transition: transform 3000ms cubic-bezier(0.075, 0.82, 0.165, 1); } .designGear__littleGearWords { position: absolute; top: 114px; left: 120px; width: 301px; pointer-events: none; } .designGear__designProcess { position: absolute; top: -13px; left: 0; width: 575px; pointer-events: none; } .designGear__descriptionsIntro { font-size: 1.33333rem; padding: 1.6rem; font-style: italic; font-weight: 400; line-height: 1.4; margin: 0; margin-bottom: 0.5rem; } .designGear__descriptions { width: calc(100% - 585px); } .designGear__descriptionItem { display: none; } .designGear__descriptionText > *:last-child { margin-bottom: 0; } .designGear__descriptionItem.-displayed { display: block; } .designGear__descriptionsContainer { background-color: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); padding: 1.6rem; margin-right: 1rem; } .designGear__descriptionTitle { margin: 0; margin-bottom: 0.5rem; font-size: 1.125rem; color: #3d684f; font-weight: bold; } .designGear__descriptionText { font-size: 1rem; } .designGear__navList { margin: 0; list-style-type: none; padding-left: 0; } .designGear__listItem { display: inline; } .designGear__listLink { text-decoration: none; color: #137CB9; font-weight: 700; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .designGear__listLink:hover, .designGear__listLink:focus, .designGear__listLink.-active { color: #3e3e3e; } .designGear__listItem::after { content: "|"; color: #3e3e3e; margin: 0 5px; } .designGear__listItem:last-child::after { display: none; } .designGear__nav { margin-bottom: 1.5rem; } @media (max-width: 991.98px) { .designGear { padding: 30px 0; } .designGear__gearContainer { display: none; } .designGear__descriptions { width: 100%; } .designGear__introduction p, .designGear__introduction li, .designGear__introduction a { font-size: 1rem; line-height: 1.4; } .designGear__descriptionText { font-size: 1.125rem; } } .fancyAccordion { --_accordion-target-height: var(--accordion-target-height, auto); --_accordion-closed-height: var(--accordion-closed-height, auto); --_accordion-background-image: var(--accordion-background-image, none); -webkit-appearance: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 38.64%, rgba(0, 0, 0, 0) 99.61%), linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), var(--_accordion-background-image) lightgray 50%/cover no-repeat; background-color: var(--_accordion-background-color); transition-property: box-shadow, height; transition-duration: 300ms; transition-timing-function: ease-in; height: var(--_accordion-target-height); transform-origin: top; overflow: hidden; position: relative; border-top: 1px solid white; } .fancyAccordion summary::-webkit-details-marker { display: none; } @media screen and (min-width: 800px) { .fancyAccordion::after { content: ""; width: 43vw; height: 100%; position: absolute; right: 0; top: 0; background-color: transparent; transition: background-color 300ms ease; z-index: 0; } } @media screen and (min-width: 1440px) { .fancyAccordion::after { width: calc((100vw - 1220px) / 2 + 508.3333333333px); } } .fancyAccordion__summary { cursor: pointer; padding-top: 1.75rem; padding-bottom: 1.75rem; list-style: none; z-index: 1; position: relative; } .fancyAccordion__summaryContainer { display: flex; justify-content: space-between; align-items: center; } .fancyAccordion__summaryHeading { color: white; transition: opacity 300ms ease; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400; margin: 0; } @media screen and (min-width: 800px) { .fancyAccordion__summaryHeading { margin-inline-start: 12.5%; } } .fancyAccordion__iconWrapper { aspect-ratio: 1; block-size: 40px; position: relative; transition: background-color 0.25s ease; } .fancyAccordion__iconWrapper span { content: ""; position: absolute; transition: 300ms; background: white; } .fancyAccordion__iconWrapper { /* Create the "+" shape by positioning the spans absolutely */ } .fancyAccordion__iconWrapper span:first-child { top: 25%; bottom: 25%; width: 8%; left: 45%; } .fancyAccordion__iconWrapper span:last-child { left: 25%; right: 25%; height: 8%; top: 45%; } .fancyAccordion__secondaryIconWrapper { aspect-ratio: 1; width: 100px; height: 100px; aspect-ratio: 1; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: -85px; opacity: 0; transition: opacity 300ms ease; } @media screen and (min-width: 800px) { .fancyAccordion__secondaryIconWrapper { position: unset; grid-column: 1/span 2; grid-row: 1; width: 50%; margin-inline-start: 6%; } } @media screen and (min-width: 1024px) { .fancyAccordion__secondaryIconWrapper { margin-block-start: -10%; margin-inline-start: 0; z-index: 5; } } @media (min-width: 1250px) { .fancyAccordion__secondaryIconWrapper { width: 115px; height: 115px; } } .fancyAccordion__secondaryIconWrapper svg { width: 60%; height: auto; } .fancyAccordion__grid { display: grid; grid-template-columns: auto; gap: 4.5rem; } @media screen and (min-width: 800px) { .fancyAccordion__grid { gap: 0.875rem; grid-template-columns: repeat(12, 1fr); } } .fancyAccordion__content { padding: 2.25rem 0 3.375rem; z-index: 1; position: relative; } @media screen and (min-width: 800px) { .fancyAccordion__content { padding: 2.25rem 0 4.5rem; } } @media screen and (min-width: 1024px) { .fancyAccordion__content { padding: 2.25rem 0 9rem; } } .fancyAccordion__headerContent { grid-column: 1; grid-row: 1; } @media screen and (min-width: 800px) { .fancyAccordion__headerContent { grid-column: 2/7; grid-row: 1/span 2; padding-right: 1rem; margin-inline-start: 12.5%; } } @media screen and (min-width: 1024px) { .fancyAccordion__headerContent { grid-column: 2/6; padding-right: 0; } } .fancyAccordion__heading { margin-top: auto; margin-bottom: clamp(1.125rem, 1vw, 2.25rem); font-size: clamp(2rem, 3vw, 2.5rem); flex-grow: 1; color: white; font-weight: 400; line-height: 85%; opacity: 0; transform: translateY(100px); transition: opacity 300ms ease, transform 400ms ease; line-height: 100%; } .fancyAccordion__subHeading { display: block; font-weight: 300; margin-top: 0.5rem; font-size: clamp(1.25rem, 2.5vw, 2rem); } .fancyAccordion__headerText { opacity: 0; transform: translateY(100px); transition: transform 500ms ease; } .fancyAccordion__headerText p { color: white; font-size: clamp(1rem, 2vw, 1.125rem); } .fancyAccordion__secondPanel { display: flex; flex-direction: column; position: relative; /* Prevent stretch in grid (iOS 11 can compute row height wrong when gap is broken) */ align-self: start; min-height: 0; } @media screen and (min-width: 800px) { .fancyAccordion__secondPanel { grid-column: 8/13; grid-row: 1/span 2; } } .fancyAccordion__secondPanel::after { content: ""; width: 100vw; height: calc(100% + 5.625rem); position: absolute; right: -15px; top: -2rem; background-color: transparent; transition: background-color 300ms ease; z-index: -1; } .fancyAccordion__imageGrid { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; /* Prevent grid from growing past content (iOS 11 height bugs) */ align-content: start; min-height: 0; } @media screen and (min-width: 800px) { .fancyAccordion__imageGrid { width: 120%; margin-inline-start: -20%; gap: 1.25rem; } } @media screen and (min-width: 1024px) { .fancyAccordion__imageGrid { grid-template-columns: repeat(3, 1fr); } } .fancyAccordion__imageGrid > picture.fancyAccordion__image { position: relative; height: 0; padding-bottom: 100%; overflow: hidden; } .fancyAccordion__imageGrid > img.fancyAccordion__image { height: 100%; -o-object-fit: cover; object-fit: cover; /* iOS 11: limit height so grid row doesn't blow up when aspect-ratio unsupported */ max-height: 50vw; } .fancyAccordion__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; max-height: 100%; opacity: 0; transition: opacity 300ms ease; } .fancyAccordion__imageGrid > picture.fancyAccordion__image .fancyAccordion__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .fancyAccordion__image { aspect-ratio: 1; } .fancyAccordion__image:nth-child(3) { display: none; } @media screen and (min-width: 800px) { .fancyAccordion__image { transform: translateX(100px); transition: opacity 300ms ease, transform 500ms ease; } .fancyAccordion__image:nth-child(1) { transition-duration: 550ms; } .fancyAccordion__image:nth-child(2) { transition-duration: 650ms; } } @media screen and (min-width: 1024px) { .fancyAccordion__image:nth-child(3) { display: block; transition-duration: 750ms; } } .fancyAccordion__footerContent { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 1rem; /* Vertical spacing from secondPanel (works when flex gap doesnโ€™t, e.g. iOS 11) */ margin-top: 1rem; } @media screen and (min-width: 800px) { .fancyAccordion__footerContent { grid-template-columns: repeat(12, 1fr); grid-column: 8/13; padding-inline: 2rem 1rem; margin-top: 4.5rem; opacity: 0; transition: opacity 300ms ease, transform 600ms ease; transform: translateY(100px); } } .fancyAccordion__footerHeading { font-size: 1.5rem; } .fancyAccordion__cta { width: -moz-fit-content; width: fit-content; } .fancyAccordion.-fadeIn .fancyAccordion__summaryHeading { opacity: 0; } .fancyAccordion.-fadeIn .fancyAccordion__secondaryIconWrapper { opacity: 1; } .fancyAccordion.-fadeIn .fancyAccordion__heading, .fancyAccordion.-fadeIn .fancyAccordion__headerText { opacity: 1; transform: translateY(0); } .fancyAccordion.-fadeIn .fancyAccordion__image { opacity: 1; } @media screen and (min-width: 800px) { .fancyAccordion.-fadeIn .fancyAccordion__footerContent, .fancyAccordion.-fadeIn .fancyAccordion__image { opacity: 1; transform: translateY(0); } } .fancyAccordion[data-accordion-open] { --accordion-shadow-color: hsl(0 0% 0% / 0.1); --accordion-box-shadow: 0 var(--size-1) var(--size-3) 0px var(--_accordion-shadow-color); --accordion-icon-background-color: var(--color-neutral-200); --accordion-icon-rotation: 180deg; --accordion-icon-y-offset: 0.125rem; } .fancyAccordion[data-accordion-open] .fancyAccordion__summary { height: var(--_accordion-closed-height); } .fancyAccordion[data-accordion-open] .fancyAccordion__secondPanel::after { background-color: #f3f3f3; } @media screen and (min-width: 800px) { .fancyAccordion[data-accordion-open]::after { background-color: #f3f3f3; } .fancyAccordion[data-accordion-open] .fancyAccordion__secondPanel::after { background-color: transparent; } } .fancyAccordion[data-accordion-open] > .fancyAccordion__accordionSummary .fancyAccordion__iconWrapper, .fancyAccordion[open] > .fancyAccordion__summary .fancyAccordion__iconWrapper { /* Morph the shape when the button is hovered over */ } .fancyAccordion[data-accordion-open] > .fancyAccordion__accordionSummary .fancyAccordion__iconWrapper span, .fancyAccordion[open] > .fancyAccordion__summary .fancyAccordion__iconWrapper span { transform: rotate(90deg); } @media screen and (min-width: 800px) { .fancyAccordion[data-accordion-open] > .fancyAccordion__accordionSummary .fancyAccordion__iconWrapper span, .fancyAccordion[open] > .fancyAccordion__summary .fancyAccordion__iconWrapper span { background-color: #3d684f; } } .fancyAccordion[data-accordion-open] > .fancyAccordion__accordionSummary .fancyAccordion__iconWrapper span:last-child, .fancyAccordion[open] > .fancyAccordion__summary .fancyAccordion__iconWrapper span:last-child { left: 50%; right: 50%; } .fancyAccordions.js-homepage-accordion { --accordion-motion-scaleY: 0; position: relative; } @media screen and (min-width: 1024px) { .fancyAccordions.js-homepage-accordion::before { content: ""; position: absolute; width: 50px; height: 78px; top: calc(var(--accordion-top) * -1 + (var(--accordion-line-height) - 1rem) * var(--accordion-motion-scaleY) - 78px); left: calc((100vw - 30px) / 12 / 2 - 25.5px); background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg width='50' height='79' viewBox='0 0 50 79' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_accordion_line_end)'%3E%3Cpath d='M25.0007 0L10.5532 9.11331L16.803 16.0546L0 29.5202L25.0007 79' fill='%23F5B210'/%3E%3Cpath d='M25.0007 0L39.4553 9.11331L33.2012 16.0546L50 29.5202L25.0007 79' fill='%23D39809'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_accordion_line_end'%3E%3Crect width='50' height='79' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-size: 50px 78px; background-repeat: no-repeat; background-position: 0 0; pointer-events: none; z-index: 2; transition: none; /* scroll-scrubbed via --accordion-motion-scaleY */ } } @media (min-width: 1250px) { .fancyAccordions.js-homepage-accordion::before { left: calc((100vw - 1220px) / 2 + 50.8333333333px - 25.5px); } } .fancyAccordions.js-homepage-accordion .fancyAccordion__secondaryIconWrapper.-stackingLayer { display: none; } @media screen and (min-width: 1024px) { .fancyAccordions.js-homepage-accordion .fancyAccordion__secondaryIconWrapper.-stackingLayer { display: flex; align-items: center; justify-content: center; position: absolute; top: 18.5rem; left: max(1.5rem, (100vw - 1220px) / 2.25 + 1.5rem); z-index: 3; width: 100px; height: 100px; background-color: white; border-radius: 50%; pointer-events: none; box-sizing: border-box; opacity: 0; transition: opacity 300ms ease; } } @media (min-width: 1250px) { .fancyAccordions.js-homepage-accordion .fancyAccordion__secondaryIconWrapper.-stackingLayer { width: 115px; height: 115px; } } .fancyAccordions.js-homepage-accordion .fancyAccordion__secondaryIconWrapper.-stackingLayer svg { width: 60%; height: auto; } .fancyAccordions.js-homepage-accordion { /* Show stacking layer only when first accordion is open (so arrow goes behind it) */ } @media screen and (min-width: 1024px) { .fancyAccordions.js-homepage-accordion .fancyAccordion:first-of-type[data-accordion-open] ~ .fancyAccordion__secondaryIconWrapper.-stackingLayer { opacity: 1; } } .fancyAccordions.js-homepage-accordion .fancyAccordion:first-of-type { position: unset; } @media screen and (min-width: 1024px) { .fancyAccordions.js-homepage-accordion .fancyAccordion:first-of-type::before { content: ""; top: calc(var(--accordion-top) * -1.125); width: 11px; height: calc(var(--accordion-line-height) - 3rem); background-color: #F5B210; display: block; border-radius: 0 0 7px 7px; position: absolute; left: calc((100vw - 30px) / 12 / 2 - 5.5px); transition: none; /* scroll-scrubbed via --accordion-motion-scaleY */ transform-origin: top; transform: scaleY(var(--accordion-motion-scaleY)); z-index: 1; } } @media (min-width: 1250px) { .fancyAccordions.js-homepage-accordion .fancyAccordion:first-of-type::before { left: calc((100vw - 1220px) / 2 + 50.8333333333px - 5.5px); } } @media screen and (min-width: 1024px) { .fancyAccordions.js-homepage-accordion .fancyAccordion:first-of-type::after { content: ""; position: absolute; top: 0; right: 0; width: 43vw; height: 100%; background-color: transparent; pointer-events: none; z-index: 0; transition: background-color 300ms ease; } } @media (min-width: 1250px) { .fancyAccordions.js-homepage-accordion .fancyAccordion:first-of-type::after { width: calc((100vw - 1220px) / 2 + 508.3333333333px); } } @media screen and (min-width: 1024px) { .fancyAccordions.js-homepage-accordion .fancyAccordion:first-of-type[data-accordion-open]::after { background-color: #f3f3f3; } } .featuredProjectDetails { margin-bottom: 3rem; } .featuredProjectDetails__featuredProjectDetail:last-child .featuredProjectDetail__wrapper::after { display: none; } @media screen and (min-width: 1024px) { .featuredProjectDetails { margin-bottom: 7rem; } } .featuredEntries { padding: 30px 0; } .featuredEntries__list { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; margin-bottom: 27px; } .featuredEntries__workSample { margin: 0 15px; margin-bottom: 30px; width: calc(100% - 30px); } @media screen and (min-width: 800px) { .featuredEntries { padding: 80px 0 125px; } .featuredEntries__title { margin-bottom: 30px; } .featuredEntries__workSample { width: calc(50% - 30px); min-height: 345px; } } @media screen and (min-width: 1024px) { .featuredEntries__workSample { width: calc(33.3333% - 30px); } } .featuredOurWork { background-color: #f8f8f8; box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2); } .featuredOurWork .itemList__wrapper { grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)); } .featuredProjectDetail__imageWrapper { position: relative; overflow: hidden; height: 340px; margin-bottom: 2rem; } .featuredProjectDetail__image { position: absolute; min-width: 100%; min-height: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .featuredProjectDetail__description { margin-bottom: 2rem; } .featuredProjectDetail__title { margin-bottom: 10px; color: #3e3e3e; line-height: 2.9rem; font-size: clamp(1.5rem, 3vw, 2.66667rem); } .featuredProjectDetail__location { font-weight: 600; margin-bottom: 1.5rem; } .featuredProjectDetail__location::before { content: "\f3c5"; margin-right: 0.5rem; color: #3d684f; } .featuredProjectDetail__wrapper { display: flex; flex-direction: column; position: relative; padding: 30px 0; } .featuredProjectDetail__wrapper > * { z-index: 3; position: relative; } .featuredProjectDetail__wrapper::after { content: ""; position: absolute; bottom: 0; width: calc(100% + 600px); left: -300px; box-shadow: 0 0 70px rgba(0, 0, 0, 0.1); border-bottom-left-radius: 230%; border-bottom-right-radius: 230%; z-index: 1; height: 100px; } .featuredProjectDetail__wrapper::before { content: ""; position: absolute; bottom: 0; height: calc(100% - 100px); width: 20000px; left: -10000px; background-color: #fff; z-index: 2; } @media screen and (min-width: 1024px) { .featuredProjectDetail { min-height: 400px; } .featuredProjectDetail__wrapper { flex-direction: row; padding: 70px 0; } .featuredProjectDetail__imageWrapper { height: auto; margin-bottom: 0; } .featuredProjectDetail__imageWrapper, .featuredProjectDetail__content { width: 50%; } .featuredProjectDetail__content { padding-left: 60px; } } .featuredProjectsSlider { --mobile-slide-image-height: 300px; } .featuredProjectsSlider__slide { display: flex; flex-direction: column; background-color: #3d684f; } @media screen and (min-width: 900px) { .featuredProjectsSlider__slide { flex-direction: row; } } .featuredProjectsSlider__mediaWrapper { height: var(--mobile-slide-image-height); position: relative; } @media screen and (min-width: 900px) { .featuredProjectsSlider__mediaWrapper { width: 50%; height: 100%; } } @media screen and (min-width: 1200px) { .featuredProjectsSlider__mediaWrapper { width: 60%; } } .featuredProjectsSlider__media { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; } .featuredProjectsSlider__content { position: relative; overflow: hidden; padding: 2rem; color: white; display: flex; flex-direction: column; row-gap: 1.5rem; z-index: 1; color: white; height: calc(100% - var(--mobile-slide-image-height)); } .featuredProjectsSlider__content::before { content: ""; position: absolute; background-image: url('data:image/svg+xml,'); width: 100%; background-repeat: no-repeat; height: 150%; width: 150%; z-index: 0; left: -55%; top: -5%; opacity: 0.6; z-index: -1; } @media screen and (min-width: 576px) { .featuredProjectsSlider__content::before { left: 0%; } } @media screen and (min-width: 900px) { .featuredProjectsSlider__content::before { left: -55%; } } @media screen and (min-width: 900px) { .featuredProjectsSlider__content { width: 50%; height: auto; padding: 4rem 4rem 5rem; } } @media screen and (min-width: 1200px) { .featuredProjectsSlider__content { width: 40%; max-width: 600px; padding: 4rem 6rem 6rem; } } .featuredProjectsSlider__eyebrow, .featuredProjectsSlider__title, .featuredProjectsSlider__text, .featuredProjectsSlider__tagLink { color: inherit; } .featuredProjectsSlider__eyebrow { font-family: var(--root-font-family); font-weight: 600; margin-bottom: 1rem; font-size: clamp(1rem, 1.5vw, 1.125rem); } @media screen and (min-width: 800px) { .featuredProjectsSlider__eyebrow { margin-bottom: 3rem; } } .featuredProjectsSlider__tagLink:hover { color: #d5ebde; } .featuredProjectsSlider__button { width: -moz-fit-content; width: fit-content; } .featuredProjectsSlider .splide__arrows { width: 100%; position: absolute; top: 150px; display: flex; gap: 0.5rem; justify-content: space-between; padding: 0 1rem; } @media screen and (min-width: 900px) { .featuredProjectsSlider .splide__arrows { padding: 0; width: auto; top: 3.75rem; right: 2rem; } } .featuredProjectsSlider .splide__arrow { position: unset; transform: none; } .featuredProjectsSlider .splide__arrow::hover { background: #1E412D; } .featuredServices { display: flex; flex-direction: row; flex-wrap: wrap; height: 500px; background: #fff; position: relative; z-index: 3; } .featuredServices__service { margin-right: 0px; margin-bottom: 5px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; transition: width 500ms cubic-bezier(0.075, 0.82, 0.165, 1); } .featuredServices__service::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 200%; z-index: 1; transition: height 500ms cubic-bezier(0.075, 0.82, 0.165, 1); background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)); } .featuredServices__ctaWrapper { position: absolute; bottom: 23px; left: 39px; z-index: 2; transition: bottom 500ms cubic-bezier(0.075, 0.82, 0.165, 1); } .featuredServices__cta { font-size: 1.57rem; font-weight: 600; margin-bottom: 15px; color: #fff; text-decoration: none; display: block; } .featuredServices__cta:hover::after { margin-left: 20px; } .featuredServices__cta::after { font-weight: 500; font-size: 1.3rem; margin-left: 10px; transition: margin-left 1000ms cubic-bezier(0.075, 0.82, 0.165, 1); content: "\f178"; } .featuredServices__spotlight { color: #fff; font-weight: 700; text-decoration: none; padding-left: 40px; position: relative; display: none; } .featuredServices__spotlight:hover::after { margin-left: 10px; } .featuredServices__spotlight::before { content: "\f005"; position: absolute; top: 2px; left: 0; color: #fad540; font-size: 1.3rem; } .featuredServices__spotlight::after { font-weight: 500; font-size: 0.875rem; margin-left: 4px; transition: margin-left 1000ms cubic-bezier(0.075, 0.82, 0.165, 1); content: "\f178"; } .featuredServices__spotlight span { display: block; font-size: 0.675rem; color: #7b7b7b; text-transform: uppercase; line-height: 6px; } .featuredServices__serviceTitle { font-size: 1.335rem; font-weight: 700; position: absolute; text-align: right; width: auto; transition: bottom 500ms cubic-bezier(0.075, 0.82, 0.165, 1), transform 500ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 500ms cubic-bezier(0.075, 0.82, 0.165, 1); opacity: 1; color: #fff; bottom: 0; right: 40px; z-index: 2; display: none; } .featuredServices__serviceTitle::after { content: ""; display: block; height: 57px; background-repeat: no-repeat; background-position: center; background-size: contain; margin-top: 7px; width: 100%; margin-left: auto; margin-right: 0; } .featuredServices__serviceTitle.-construction::after { background-image: url("/img/icons/heroconstruction.png"); width: 53px; } .featuredServices__serviceTitle.-masonry::after { background-image: url("/img/icons/heromasonry.png"); width: 44px; } .featuredServices__serviceTitle.-design::after { background-image: url("/img/icons/herodesign.png"); width: 50px; } .featuredServices__serviceTitle.-real-estate::after { background-image: url("/img/icons/herohandshake.png"); width: 55px; } @media screen and (min-width: 576px) { .featuredServices { height: 600px; } .featuredServices__service { width: calc(50% - 2.5px); margin-bottom: 5px; } .featuredServices__service:nth-child(odd) { margin-right: 5px; } .featuredServices__spotlight { display: block; } } @media screen and (min-width: 1024px) { .featuredServices { height: 575px; max-height: 575px; flex-wrap: nowrap; } .featuredServices__ctaWrapper { bottom: -100%; } .featuredServices__cta { margin-bottom: 40px; } .featuredServices:hover .featuredServices__serviceTitle { bottom: 50px; transform: translateY(0); } .featuredServices:hover .featuredServices__service::after { height: 500%; } .featuredServices__serviceTitle { bottom: 50%; transform: translateY(50%); left: 0; right: 0; margin: 0 auto; text-align: center; width: 117px; display: block; } .featuredServices__serviceTitle::after { margin: 0 auto; } .featuredServices__service { width: 100%; margin-right: 5px; margin-bottom: 0; } .featuredServices__service:hover { width: 310%; } .featuredServices__service:hover .featuredServices__serviceTitle { bottom: 50%; transform: translateY(50%); opacity: 0; } .featuredServices__service:hover::after { height: 25% !important; } .featuredServices__service:hover .featuredServices__ctaWrapper { bottom: 39px; } .featuredServices__service:last-child { margin-right: 0; } } .fiveColumnIcons { padding: 3rem 0; } .fiveColumnIcons__header { max-width: 570px; margin-bottom: 3.8rem; } .fiveColumnIcons__sectionHeader { color: #fff; } .fiveColumnIcons__introduction > * { font-size: 1.125rem; color: #fff; } .fiveColumnIcons__columnWrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); -moz-column-gap: 5rem; column-gap: 5rem; row-gap: 3rem; } .fiveColumnIcons__iconWrapper { max-height: 85px; height: 70px; margin-bottom: 1rem; } .fiveColumnIcons__icon { height: 100%; margin-inline: auto; } .fiveColumnIcons__column { text-align: center; } .fiveColumnIcons__columnTitle, .fiveColumnIcons__columnText > * { color: #fff; font-size: 1.125rem; } .fiveColumnIcons__columnTitle { margin-bottom: 0.8rem; font-weight: bold; line-height: 150%; } .fiveColumnIcons__columnText > * { line-height: 1.35; } .fiveColumnIcons__columnText > *:last-child { margin-bottom: 0; } .fiveColumnIcons__button { margin-top: 2.1rem; } .fiveColumnIcons.-greenBricks, .fiveColumnIcons.-blackBricks { background: url("/img/patterns/bricktexture.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } .fiveColumnIcons.-greenBricks { background-image: url("/img/patterns/bricktexture.jpg"); } .fiveColumnIcons.-blackBricks { background-image: url("/img/patterns/bricktextureblack.jpg"); } .fiveColumnIcons.-white .fiveColumnIcons__sectionHeader, .fiveColumnIcons.-white .fiveColumnIcons__introduction > *, .fiveColumnIcons.-white .fiveColumnIcons__columnTitle, .fiveColumnIcons.-white .fiveColumnIcons__columnText > * { color: #3e3e3e; } .fiveColumnIcons.-fade { position: relative; overflow: hidden; } .fiveColumnIcons.-fade .fiveColumnIcons__sectionHeader, .fiveColumnIcons.-fade .fiveColumnIcons__introduction > *, .fiveColumnIcons.-fade .fiveColumnIcons__columnTitle, .fiveColumnIcons.-fade .fiveColumnIcons__columnText > * { color: #3e3e3e; } .fiveColumnIcons.-fade::before { content: ""; display: block; position: absolute; top: -40px; left: -30px; width: calc(100% + 60px); height: 30px; box-shadow: 0 15px 80px rgba(0, 0, 0, 0.2); } @media screen and (min-width: 800px) { .fiveColumnIcons { padding: 6rem 0; } .fiveColumnIcons.-emphasize { padding: 12rem 0 6rem; } .fiveColumnIcons.-emphasize .fiveColumnIcons__columnTitle { font-size: 2rem; } .fiveColumnIcons__introduction > * { font-size: 1.125rem; line-height: 1.4; } } @media screen and (min-width: 1024px) { .fiveColumnIcons { padding: 6rem 0; } } .formWithContent__wrapper { display: flex; flex-direction: column; } .formWithContent__form { padding: 2rem 15px; margin-left: -15px; margin-right: -15px; background-color: #f8f8f8; } .formWithContent__form h2, .formWithContent__form h3 { color: #3e3e3e; line-height: 2.9rem; color: #3e3e3e; margin-bottom: 1.5rem; font-size: clamp(1.5rem, 3vw, 2.66667rem); } @media screen and (min-width: 800px) { .formWithContent__wrapper { flex-direction: row; } .formWithContent__content { width: 60%; padding-right: 3rem; padding-bottom: 3rem; padding-top: 2rem; } .formWithContent__form { width: 40%; padding-left: 2rem; padding: 3rem 0; padding-left: 2rem; margin-left: 0; margin-right: 0; position: relative; } .formWithContent .breadCrumbNav { margin-top: -2rem; } .formWithContent__form::after { content: ""; display: block; position: absolute; width: 9999px; background-color: #f8f8f8; right: -9999px; height: 100%; top: 0; } } .fullWidthStats { background-color: #d5ebde; } .fullWidthStats__stats { --stat-gap: 2rem; background-color: transparent; padding-inline: 0; flex-direction: column; } @media screen and (min-width: 800px) { .fullWidthStats__stats { flex-direction: row; } } @media screen and (min-width: 1024px) { .fullWidthStats__stats { --stat-gap: 4rem; padding-inline-start: 8.3333333333%; } } @media screen and (min-width: 1200px) { .fullWidthStats__stats .stats__stat { display: flex; gap: 1rem; text-align: left; align-items: end; flex-direction: row; } } .fullWidthStats__stats .stats__numberWrapper { display: flex; justify-content: center; } .fullWidthStats__stats .stats__statNumber { color: #3d684f; line-height: 0.75; font-size: 80px; letter-spacing: normal; } @media screen and (min-width: 1200px) { .fullWidthStats__stats .stats__statNumber { font-size: 80px; margin-bottom: 0; } } .fullWidthStats__stats .stats__statLabel { letter-spacing: normal; line-height: 1.2; font-size: clamp(1.125rem, 2vw, 1.25px); max-width: 25ch; margin: auto; } @media screen and (min-width: 1024px) { .fullWidthStats__stats .stats__statLabel { margin: 0; } } .hero { position: relative; padding: 50px 0; background-repeat: no-repeat; background-size: cover; background-position: center; } .hero::after { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .hero .container { position: relative; z-index: 2; } .hero__caption { max-width: 560px; margin: 0 auto; background: #3d684f; padding: 1.7rem 1.8rem; margin-bottom: -8.1rem; } .hero__captionTitle { font-size: 1.125rem; margin-bottom: 0.7rem; font-weight: bold; } .hero__captionTitle, .hero__captionBody * { color: #fff; } .hero__captionBody > *:last-child { margin-bottom: 0; } .hero__title { max-width: 870px; color: #fff; } .hero__subtitle { max-width: 650px; } .hero__subtitle p, .hero__subtitle * { color: #fff; font-size: clamp(1rem, 1.5vw, 1.25rem); } .hero__subtitle p:last-child { margin-bottom: 0; } .hero__iconJumpNav { padding-top: 57px; } .hero.-stacked { padding: 0; } .hero.-stacked .hero__imageWrapper { height: 300px; } .hero.-stacked .hero__background { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .hero.-stacked::after { display: none; } .hero.-stacked .hero__title { font-weight: normal; color: #3e3e3e; } @media screen and (min-width: 576px) { .hero.-stacked .hero__title { max-width: 75%; } } @media screen and (min-width: 800px) { .hero.-stacked .hero__textWrapper { max-width: 66.6666666667%; } } .hero.-stacked .hero__text { font-size: 1rem; line-height: 150%; } .hero.-stacked.-twoColumn .hero__content { display: flex; gap: 1.5rem; flex-direction: column-reverse; } @media screen and (min-width: 800px) { .hero.-stacked.-twoColumn .hero__content { flex-direction: row; } } @media screen and (min-width: 800px) { .hero.-stacked.-twoColumn .hero__textWrapper { max-width: 50%; } } @media screen and (min-width: 576px) { .hero.-stacked.-twoColumn .hero__title { max-width: 75%; } } @media screen and (min-width: 576px) { .hero.-stacked.-twoColumn .hero__text { max-width: unset; } } @media screen and (min-width: 800px) { .hero.-stacked.-twoColumn .hero__columnImageWrapper { max-width: 50%; } .hero.-stacked.-twoColumn .hero__columnImageWrapper picture { width: 613px; max-width: 100%; display: block; } } .hero.-stacked.-twoColumn .hero__image { max-width: 100%; width: 100%; } .hero.-stacked.-twoColumn .hero__title, .hero.-stacked.-twoColumn .hero__text { max-width: 100%; } .hero.-stacked + .-faintLinesBackgroundMediumDensity, .hero.-stacked + .-faintLinesBackground { overflow: visible; } .hero:has(+ .hoverCardGrid) .hero__content { padding-bottom: 0; } @media screen and (min-width: 1024px) { .hero:has(+ .hoverCardGrid) .hero__content { padding-bottom: 3rem; } } .hero.-condense .hero__wrapper { max-width: 1005px; margin: 0 auto; } .hero.-condense .hero__title { max-width: 650px; } .hero.-emphasized { margin-bottom: 5.3rem; } .hero.-emphasized .hero__wrapper { margin-bottom: 14.2rem; } .hero.-hasIconJumpNav { padding-bottom: 0; } .hero.-mediaOnly { padding: 0; min-height: 300px; position: sticky; z-index: -1; top: 0; } .hero.-mediaOnly .hero__background { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .hero.-mediaOnly.-video { aspect-ratio: 16/9; min-height: 0; } @media screen and (min-width: 800px) { .hero.-mediaOnly { min-height: 450px; } } @media screen and (min-width: 1024px) { .hero.-mediaOnly { min-height: 600px; } } .hero.-mediaOnly::after { display: none; } @media screen and (min-width: 800px) { .hero { padding: 104px 0; } .hero.-emphasized { margin-bottom: 2.3rem; } } .hero.-emphasized + .breadCrumbNav { padding-top: 75px; margin-top: -2.1rem; } .heroSlider { position: relative; height: 210px; } .heroSlider__galleryView { position: absolute; top: 41%; left: 0; right: 0; margin: 0 auto; width: 50px; height: 50px; border: 0; border-radius: 50%; background-color: #137CB9; transition: background-color 125ms cubic-bezier(0.075, 0.82, 0.165, 1); cursor: pointer; } .heroSlider__galleryView::before { content: "\f00e"; font-weight: 500; font-size: 1.4rem; color: #fff; } .heroSlider__galleryView:hover { background-color: rgb(21.375, 139.5, 208.125); } .heroSlider__next, .heroSlider__prev { position: absolute; display: block; top: 50%; z-index: 2; width: 30px; height: 30px; background-color: transparent; border: none; cursor: pointer; transition: background-color 125ms cubic-bezier(0.075, 0.82, 0.165, 1); } .heroSlider__next::after, .heroSlider__prev::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(45deg); transform-origin: center; transition: background-color 125ms cubic-bezier(0.075, 0.82, 0.165, 1); background-color: #137CB9; z-index: 1; } .heroSlider__next::before, .heroSlider__prev::before { position: relative; color: #fff; font-weight: 300; font-size: 1.3rem; z-index: 2; } .heroSlider__next:hover::after, .heroSlider__prev:hover::after { background-color: rgb(21.375, 139.5, 208.125); } .heroSlider__next { right: 20px; transform: translateY(-50%); } .heroSlider__next::before { content: "\f054"; padding-left: 7px; } .heroSlider__prev { left: 20px; transform: translateY(-50%); } .heroSlider__prev::before { content: "\f053"; padding-right: 20px; margin-left: -5px; } .heroSlider__sliderNav { position: absolute; display: block; margin: 0 auto; bottom: 16px; left: 0; right: 0; z-index: 2; } .heroSlider__sliderNavList { list-style-type: none; padding-left: 0; display: flex; flex-direction: row; justify-content: center; } .heroSlider__sliderNavButton { width: 17px; height: 17px; padding: 0; background-color: #000; border: 4px solid #000; border-radius: 50%; } .heroSlider__sliderNavButton.-active { background-color: #fad540; } .heroSlider__sliderNavList li { margin-right: 5px; } .heroSlider__sliderNavList li:last-child { margin-right: 0; } .heroSlider__sliderWrapper, .heroSlider__slide, .heroSlider__sliderWrapper > div, .heroSlider__sliderWrapper > div > div { height: 100%; } .heroSlider__slide { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; } .heroSlider__slide::after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); } .heroSlider__title { position: absolute; top: 28%; left: 0; right: 0; margin: auto; z-index: 1; transform: translateY(-50%); color: #fff; font-size: 1.5rem; text-align: center; } @media screen and (min-width: 576px) { .heroSlider { height: 400px; } .heroSlider__galleryView { top: 58%; } .heroSlider__next, .heroSlider__prev { width: 50px; height: 50px; } .heroSlider__prev::before { margin-left: 0; } .heroSlider__next::before { padding-left: 20px; } .heroSlider__next::before, .heroSlider__prev::before { font-size: 1.7rem; } .heroSlider__title { font-size: 2rem; top: 50%; } } @media screen and (min-width: 1024px) { .heroSlider { height: 570px; } .heroSlider__next, .heroSlider__prev { width: 80px; height: 80px; } .heroSlider__next { right: 75px; } .heroSlider__prev { left: 75px; } .heroSlider__next::before, .heroSlider__prev::before { font-size: 2.7rem; } .heroSlider__title { font-size: 3.325rem; } } .heroWithMediaBackground { position: relative; } .heroWithMediaBackground::before { content: ""; position: absolute; top: 0; background: linear-gradient(360deg, rgba(62, 62, 62, 0) 20%, #3E3E3E 97.79%); background-size: 100% 20%; background-repeat: no-repeat; mix-blend-mode: multiply; width: 100%; height: 100%; z-index: -1; } @media screen and (min-width: 800px) { .heroWithMediaBackground::before { background-size: 100% 40%; } } .heroWithMediaBackground__media img, .heroWithMediaBackground__media video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: -1; mix-blend-mode: multiply; } .heroWithMediaBackground__content { --padding-top: 15rem; gap: 0.75rem; padding: var(--padding-top) 0 3rem; } @media screen and (min-width: 800px) { .heroWithMediaBackground__content { display: grid; grid-template-columns: repeat(12, 1fr); } } @media screen and (min-width: 1200px) { .heroWithMediaBackground__content { padding: var(--padding-top) 0 7rem; } } .heroWithMediaBackground__content::after { content: ""; background: linear-gradient(to top, #3E3E3E 0.08%, #9E9E9E 38.67%, rgba(0, 0, 0, 0.2)); mix-blend-mode: multiply; width: 100%; height: 100%; z-index: -1; position: absolute; left: 0; bottom: 0; } @media screen and (min-width: 800px) { .heroWithMediaBackground__content::after { background: linear-gradient(90deg, #3E3E3E 0.08%, #9E9E9E 38.67%, #FFF 59.53%); } } .heroWithMediaBackground__heading, .heroWithMediaBackground__text { color: white; } .heroWithMediaBackground__heading { grid-column: 1; margin: 1.6rem 0; font-weight: 400; } @media screen and (min-width: 800px) { .heroWithMediaBackground__heading { grid-column: 1/10; } } .heroWithMediaBackground__text { grid-column: 1; font-size: clamp(1.125rem, 2vw, 1.5rem); margin: 0; } @media screen and (min-width: 800px) { .heroWithMediaBackground__text { grid-column: 1/7; } } @media screen and (min-width: 1024px) { .heroWithMediaBackground__text { --motion-scaleY: 0; --motion-opacity: 0; grid-column: 2/7; position: relative; } .heroWithMediaBackground__text::before { content: ""; position: absolute; z-index: 2; top: calc((var(--hero-line-height) + 170px) * var(--motion-scaleY)); left: calc(-3rem + 5.5px - 25px); width: 50px; height: 79px; background-image: url("data:image/svg+xml,%3Csvg width='50' height='79' viewBox='0 0 50 79' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_hero_line_end)'%3E%3Cpath d='M25.0007 0L10.5532 9.11331L16.803 16.0546L0 29.5202L25.0007 79' fill='%23F5B210'/%3E%3Cpath d='M25.0007 0L39.4553 9.11331L33.2012 16.0546L50 29.5202L25.0007 79' fill='%23D39809'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_hero_line_end'%3E%3Crect width='50' height='79' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-size: 50px 79px; background-repeat: no-repeat; background-position: 0 0; pointer-events: none; opacity: var(--motion-opacity); transition: none; /* scroll-scrubbed via --motion-opacity */ } .heroWithMediaBackground__text::after { top: 0; content: ""; width: 11px; height: calc(var(--hero-line-height) + 200px); background-color: #F5B210; display: block; border-radius: 7px; position: absolute; z-index: 1; left: -3rem; transition: none; /* scroll-scrubbed via --motion-scaleY */ transform-origin: top; transform: scaleY(var(--motion-scaleY)); } .heroWithMediaBackground__text { /* homepageLineAnimation.js sets --motion-scaleY and --motion-opacity to 1 */ } } .historyTimeline { overflow: hidden; position: relative; background-color: #f8f8f8; } .historyTimeline__title { font-size: 3.5rem; margin-bottom: 0; } .historyTimeline__moment { padding: 30px 0; } .historyTimeline__moments .historyTimeline__moment:nth-child(even) { background-color: #fff; } .historyTimeline__momentWrapper { display: flex; flex-direction: column; } .historyTimeline__photoWrapper { width: 100%; margin-bottom: 1rem; } .historyTimeline__photo { width: 100%; } .historyTimeline__info { width: 100%; } .historyTimeline__year { padding: 1.8rem 3.1rem; font-size: 2.2rem; color: #fff; font-weight: 400; background-color: #329772; display: inline-block; margin-top: 0; margin-bottom: 1.9rem; } .historyTimeline__momentTitle { font-size: 2rem; margin-top: 0; margin-bottom: 0.4rem; color: #3e3e3e; line-height: 1.3; } .historyTimeline__description p { font-size: 1.2rem; line-height: 1.5; } @media screen and (min-width: 800px) { .historyTimeline__momentWrapper { flex-direction: row; } .historyTimeline__moment { padding: 75px 0; } .historyTimeline__photoWrapper { width: 50%; padding-right: 35px; margin-bottom: 0; } .historyTimeline__info { width: 50%; padding-left: 35px; padding-right: 35px; padding-right: 173px; } } .hoverCardGrid__grid { display: flex; flex-direction: column; } @media screen and (min-width: 1024px) { .hoverCardGrid__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); -moz-column-gap: 1.25rem; column-gap: 1.25rem; row-gap: 1.5rem; } } .iconCardSection { color: #3e3e3e; } .iconCardSection__header { margin-bottom: 2.5rem; color: inherit; } @media screen and (min-width: 800px) { .iconCardSection__header { max-width: 66%; } } .iconCardSection__heading { color: inherit; } .iconCardSection__text { margin-bottom: 0; color: inherit; } .iconCardSection__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); -moz-column-gap: 2rem; column-gap: 2rem; row-gap: 2.5rem; } .iconCardSection.-darkBackground { background-color: #3e3e3e; color: white; } .iconCardSection.-darkBackground .card { color: white; } .iconCardSection.-darkBackground .card__heading { color: #f5b211; } .imageGridWithContent { position: relative; z-index: 4; background: left 0/auto 100% no-repeat url("/img/backgrounds/faintlines.svg"); padding-top: 1.75rem; padding-bottom: 3.33rem; } @media screen and (min-width: 1024px) { .imageGridWithContent { padding-top: 3rem; padding-bottom: 4rem; background-image: none; } .imageGridWithContent::before { content: ""; position: absolute; inset: 0; background: 70vw 25%/100% no-repeat url("/img/backgrounds/faintlines.svg"), -64vw -58%/100% no-repeat url("/img/backgrounds/faintlines.svg"); opacity: 0.28; pointer-events: none; z-index: 0; } .imageGridWithContent > .container { position: relative; z-index: 1; } } @media screen and (min-width: 1200px) { .imageGridWithContent { padding-top: 4.7rem; padding-bottom: 11.3rem; } } @media screen and (min-width: 1024px) { .imageGridWithContent__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; } } @media screen and (min-width: 1200px) { .imageGridWithContent__grid { gap: 6rem; } } .imageGridWithContent__imageGrid { --grid-spacing: 1.5rem; display: grid; grid-template-columns: auto var(--grid-spacing) auto; grid-template-rows: var(--grid-spacing) auto var(--grid-spacing) var(--grid-spacing) auto var(--grid-spacing) var(--grid-spacing); position: relative; } @media screen and (min-width: 800px) { .imageGridWithContent__imageGrid { --grid-spacing: 3rem; } } @media screen and (min-width: 1440px) { .imageGridWithContent__imageGrid { width: calc(100% + 4rem); margin-left: -4rem; } } .imageGridWithContent__imageGrid::after { content: ""; background-color: #3d684f; width: 100vw; height: 75%; position: absolute; z-index: 0; bottom: 0; left: -15px; } @media screen and (min-width: 1024px) { .imageGridWithContent__imageGrid::after { width: 90%; mix-blend-mode: multiply; } } @media (min-width: 1250px) { .imageGridWithContent__imageGrid::after { width: calc(90% + (100vw - 1250px) / 2); left: calc((100vw - 1250px) / 2 * -1 - 15px); } } .imageGridWithContent__image { max-width: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; height: 100%; z-index: 1; aspect-ratio: 1; transform: translateY(100px); opacity: 0; } .imageGridWithContent__image.-flyUp { transform: translateY(0); opacity: 1; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 450ms; } .imageGridWithContent__image.-flyUp:nth-child(3), .imageGridWithContent__image.-flyUp:nth-child(4) { transition-delay: 0.75s; } @media (prefers-reduced-motion) { .imageGridWithContent__image { transform: translateY(0); opacity: 1; } } .imageGridWithContent__image:nth-child(1) { grid-area: 1/1/3/2; } .imageGridWithContent__image:nth-child(2) { grid-area: 2/3/4/4; } .imageGridWithContent__image:nth-child(3) { grid-area: 4/1/6/1; } .imageGridWithContent__image:nth-child(4) { grid-area: 5/3/7/3; } .imageGridWithContent__content { padding-top: 3.15rem; transform: translateY(100px); opacity: 0; } .imageGridWithContent__content.-flyUp { transform: translateY(0); opacity: 1; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 450ms; transition-delay: 0.5s; } @media (prefers-reduced-motion) { .imageGridWithContent__content { transform: translateY(0); opacity: 1; } } .imageGridWithContent__text { /* Fallbacks for browsers that don't support clamp() */ font-size: 1.125rem; margin-bottom: 2rem; width: 90%; max-width: 600px; color: #3e3e3e; line-height: 150%; } @supports (font-size: clamp(1rem, 1vw, 1.125rem)) { .imageGridWithContent__text { font-size: clamp(1rem, 2vw, 1.125rem); } } @supports (margin-bottom: clamp(1.5rem, 1vw, 2rem)) { .imageGridWithContent__text { margin-bottom: clamp(1.5rem, 1vw, 2rem); } } .imageGridWithContent__ctaWrapper { display: flex; flex-wrap: wrap; /* Margin-based spacing only: iOS 11 etc. report @supports(gap) but don't render flex gap */ margin-left: -0.5rem; margin-right: -0.5rem; } .imageGridWithContent__ctaWrapper > * { margin-left: 0.5rem; margin-right: 0.5rem; } .imageGridWithSlider { --image-slider-row-gap: 2rem; --image-slider-column-gap: 1.5rem; --image-slider-row-gap-subtractor: calc((var(--image-slider-row-gap) * 2) / 3); background-color: white; } .imageGridWithSlider__grid { display: grid; grid-template-columns: repeat(2, calc(50% - var(--image-slider-column-gap) / 2)); row-gap: var(--image-slider-row-gap); -moz-column-gap: var(--image-slider-column-gap); column-gap: var(--image-slider-column-gap); } @media screen and (min-width: 800px) { .imageGridWithSlider__grid { height: clamp(400px, 75vw, 900px); grid-template-columns: calc(41.5% - var(--image-slider-column-gap) / 2) calc(58.5% - var(--image-slider-column-gap) / 2); grid-template-rows: calc(42% - (var(--image-slider-row-gap-subtractor))) calc(14% - (var(--image-slider-row-gap-subtractor))) calc(44% - (var(--image-slider-row-gap-subtractor))); } } .imageGridWithSlider__imageWrapper { border: none; padding: 0; cursor: pointer; } .imageGridWithSlider__imageWrapper:nth-child(1) { grid-area: 1/1/1/1; } .imageGridWithSlider__imageWrapper:nth-child(2) { grid-area: 1/2/1/2; } .imageGridWithSlider__imageWrapper:nth-child(3) { grid-area: 2/1/2/1; } .imageGridWithSlider__imageWrapper:nth-child(4) { grid-area: 2/2/2/2; } @media screen and (min-width: 800px) { .imageGridWithSlider__imageWrapper:nth-child(1) { grid-row: 1/3; } .imageGridWithSlider__imageWrapper:nth-child(2) { grid-row: 1/2; } .imageGridWithSlider__imageWrapper:nth-child(3) { grid-row: 3/4; } .imageGridWithSlider__imageWrapper:nth-child(4) { grid-row: 2/4; grid-column: 2; } } .imageGridWithSlider__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .imageGridWithSlider__modalOpen { padding: 0.75rem; margin: 1rem; background-color: rgba(62, 62, 62, 0.5); grid-row: 2; grid-column: 2; align-self: end; justify-self: end; display: grid; grid-template-columns: 1rem auto; gap: 0.5rem; cursor: pointer; border: none; position: relative; align-items: center; } @media screen and (min-width: 800px) { .imageGridWithSlider__modalOpen { grid-row: 3; grid-column: 2; padding: 1rem 1.25rem; } } .imageGridWithSlider__modalOpen .imageGridWithSlider__count { color: white; } .imageGridWithSlider__modalOpen::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .imageGridWithSlider__modalOpenIcon { width: 1rem; } .imageGridWithSlider__modal { width: 90vw; aspect-ratio: 3/2; margin: auto; border: none; padding: 1rem; overflow: visible; } .imageGridWithSlider__modal::backdrop { background-color: #858585; mix-blend-mode: multiply; } @media screen and (min-width: 800px) { .imageGridWithSlider__modal { width: 80vw; } } @media screen and (min-width: 1024px) { .imageGridWithSlider__modal { width: 85vw; } } .imageGridWithSlider__modalHeader { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 1rem; width: calc(100% - 2rem); } .imageGridWithSlider__caption { display: none; } @media screen and (min-width: 800px) { .imageGridWithSlider__caption { display: block; width: 90%; margin: 0; } } .imageGridWithSlider__count { display: block; color: #3e3e3e; } @media screen and (min-width: 800px) { .imageGridWithSlider__count { margin-left: auto; } } .imageGridWithSlider__modalClose { background-color: transparent; border: none; position: absolute; top: 1.1rem; right: 1rem; z-index: 2; } .imageGridWithSlider .splide__slide img, .imageGridWithSlider__modalClose img { vertical-align: inherit; } .imageGridWithSlider .splide, .imageGridWithSlider .splide__list, .imageGridWithSlider .splide__track { height: 100%; } .imageGridWithSlider .splide__arrow { background: #3d684f; opacity: 1; top: calc(100% + 2.5em); transition: opacity 250ms cubic-bezier(0.19, 1, 0.22, 1); } @media screen and (min-width: 800px) { .imageGridWithSlider .splide__arrow { top: 50%; } } .imageGridWithSlider .splide__arrow svg { fill: white; } .imageGridWithSlider .splide__arrow:hover { opacity: 0.85; } .imageGridWithSlider .splide__arrow--next { right: calc(50% - 2.5em); } @media screen and (min-width: 800px) { .imageGridWithSlider .splide__arrow--next { right: -4rem; } } .imageGridWithSlider .splide__arrow--prev { left: calc(50% - 2.5em); } @media screen and (min-width: 800px) { .imageGridWithSlider .splide__arrow--prev { left: -4rem; } } .imageGridWithSlider .splide__pagination { display: none; } .imageGridWithSlider__modalImageWrapper { position: relative; aspect-ratio: 3/2; } .imageGridWithSlider:has(+ .iconCardSection.-lightBackground) { padding-bottom: 0; } .imageThumbSlider { padding: 4rem 0 4.5rem; position: relative; display: grid; gap: 1rem; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr auto; } @media screen and (min-width: 800px) { .imageThumbSlider { padding: 6rem 0 3.5rem; gap: 2rem; } } .imageThumbSlider__background { background-color: #3d684f; height: calc(50% + 4rem); margin-top: -4rem; width: 100%; z-index: 0; grid-row: 1/3; grid-column: 1; } @media screen and (min-width: 800px) { .imageThumbSlider__background { height: calc(50% + 6rem); margin-top: -6rem; } } .imageThumbSlider__container { position: relative; z-index: 1; grid-row: 1/3; grid-column: 1; } .imageThumbSlider__content { display: grid; row-gap: 2rem; grid-row: 3/4; } @media screen and (min-width: 800px) { .imageThumbSlider__content { row-gap: 1.5rem; } } .imageThumbSlider__mainTrack { overflow: hidden; background-color: #f8f8f8; } .imageThumbSlider__mainImage { display: block; width: 100%; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; border: 1px solid #D5D5D6; } .imageThumbSlider__arrowsSlot { margin-top: 2rem; } .imageThumbSlider__arrowsSlot .splide__arrows { display: flex; justify-content: center; gap: 1rem; position: static; transform: none; } .imageThumbSlider__arrowsSlot .splide__arrow { position: static; } .imageThumbSlider__thumbnails { margin: 0; } .imageThumbSlider .splide__list { margin: 0; padding: 0; transition: transform 800ms cubic-bezier(0.66, 0, 0.34, 1); } .imageThumbSlider__thumbnail.splide__slide { overflow: hidden; background-color: #f8f8f8; cursor: pointer; border: 1px solid #D5D5D6 !important; } .imageThumbSlider__thumbnail.splide__slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .imageThumbSlider__thumbnail.splide__slide.is-active { outline: 0; } .imageThumbSlider__thumbnailImage { display: block; width: 100%; aspect-ratio: 1.5/1; -o-object-fit: cover; object-fit: cover; } .imageThumbSlider__thumbnail.is-active { outline: 0.125rem solid #3d684f; outline-offset: 0.125rem; } .imageWithText__wrapper { display: flex; flex-direction: column; } .imageWithText__text, .imageWithText__image { width: 100%; } .imageWithText__imageTag { width: 100%; } .imageWithText__image > * { max-width: 100%; } .imageWithText__text p { line-height: 150%; margin: 0; margin-bottom: 2rem; } .imageWithText__text figure { margin-left: 0; margin-right: 0; } .imageWithText__text img { max-width: 100%; } .imageWithText__text a:not(.button) { text-decoration: none; color: #137CB9; font-weight: 700; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .imageWithText__text a:not(.button):hover, .imageWithText__text a:not(.button):focus { color: #3e3e3e; } .imageWithText__text { margin-bottom: 32px; } .imageWithText__ctaWrapper { margin-top: 32px; } .imageWithText__caption > p { size: 1rem; } .imageWithText.-mediumGrayBackground { background-color: #f1f1f1; } .imageWithText.-emphasize { position: relative; } .imageWithText.-compressed .imageWithText__sectionHeading { margin-bottom: 2rem; } .imageWithText.-compressed .imageWithText__heading { font-weight: 600; color: #3e3e3e; } .imageWithText.-compressed + .imageWithText { padding-top: 0; } .imageWithText.-compressed .imageWithText__text p:last-child { margin-bottom: 0; } @media screen and (min-width: 800px) { .imageWithText__wrapper { flex-direction: row; gap: 32px; } .imageWithText__text, .imageWithText__imageWrapper { width: calc(50% - 16px); } .imageWithText__text { margin-bottom: 0; } .imageWithText.-reverse .imageWithText__text { order: 2; } .imageWithText.-reverse .imageWithText__imageWrapper { order: 1; } .imageWithText.-emphasize { overflow: hidden; } .imageWithText.-emphasize .imageWithText__imageWrapper { position: absolute; top: 0; width: 50vw; height: 100%; margin: 0; } .imageWithText.-emphasize .imageWithText__image { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .imageWithText.-emphasize .imageWithText__text { padding: 2rem 0; } .imageWithText.-emphasize .imageWithText__text p, .imageWithText.-emphasize .imageWithText__text li { font-size: 1.125rem; } .imageWithText.-emphasize .imageWithText__text p { margin-bottom: 0.5rem; } .imageWithText.-emphasize .imageWithText__text ul { margin-top: 0; } .imageWithText.-emphasize .imageWithText__text li { margin-bottom: 0.5rem; } .imageWithText.-emphasize .imageWithText__text > *:last-child { margin-bottom: 0; } .imageWithText.-emphasize:not(.-reverse) .imageWithText__imageWrapper { right: 0; } .imageWithText.-emphasize:not(.-reverse) .imageWithText__text { padding-right: 80px; } .imageWithText.-emphasize.-reverse .imageWithText__imageWrapper { left: 0; } .imageWithText.-emphasize.-reverse .imageWithText__text { padding-left: 80px; margin-left: auto; } .imageWithText.-compressed + .imageWithText { padding-top: 1.5rem; } .imageWithText.-compressed .imageWithText__sectionHeading { max-width: 50%; } .imageWithText.-compressed .imageWithText__wrapper { gap: 3rem; } .imageWithText.-compressed .imageWithText__imageWrapper { width: 50%; } .imageWithText.-compressed .imageWithText__image { height: 100%; -o-object-fit: cover; object-fit: cover; } .imageWithText.-compressed .imageWithText__text { margin-block: auto; width: calc(50% - 3rem); } } @media screen and (min-width: 1024px) { .imageWithText.-compressed .imageWithText__imageWrapper { height: 270px; } } .informationSlider { background-color: #f8f8f8; } .informationSlider__wrapper { display: flex; flex-direction: column; } .informationSlider__content { background-color: #f8f8f8; padding: 6rem 1rem 4rem 1rem; } .informationSlider__contentWrapper { max-width: 625px; } .informationSlider__images { overflow: hidden; position: relative; min-height: 400px; } .informationSlider__introduction > * { font-size: 1.125rem; } .informationSlider__introduction > *:last-child { margin-bottom: 0; } .informationSlider__image { position: absolute; top: 0; left: -9999px; right: -9999px; margin: 0 auto; min-width: 100%; min-height: 100%; max-height: 100%; -o-object-fit: cover; object-fit: cover; } .informationSlider__slider { margin-top: 3rem; position: relative; z-index: 1; background-color: #fff; padding: 1.3rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); margin-right: 2rem; margin-bottom: 1.8rem; } .informationSlider__slide { opacity: 0; transition: opacity 1000ms; height: 100%; width: calc(100% - 2.5rem); } .informationSlider__slide.-active { opacity: 1; } .informationSlider__slider > div { display: flex; flex-direction: row; align-items: stretch; } .informationSlider__slideTitle { font-size: 1.125rem; font-weight: bold; margin-bottom: 1rem; } .informationSlider__slideText > *:last-child { margin-bottom: 0; } .informationSlider__navList { list-style-type: none; padding-left: 0; display: flex; flex-direction: row; align-items: center; } .informationSlider__navListItem { line-height: 0; } .informationSlider__navButton, .informationSlider__navButtonPrev, .informationSlider__navButtonNext { background: none; border: none; cursor: pointer; } .informationSlider__navButton:hover::before, .informationSlider__navButtonPrev:hover::before, .informationSlider__navButtonNext:hover::before { color: #3e3e3e; } .informationSlider__navButtonPrev::before { content: "\f053"; color: #137CB9; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); font-size: 2rem; } .informationSlider__navButtonNext::before { content: "\f054"; color: #137CB9; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); font-size: 2rem; } .informationSlider__navButton.-active::before { color: #3e3e3e; } .informationSlider__navButton::before { content: "\f111"; color: #137CB9; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); font-size: 0.6rem; vertical-align: 2px; } .informationSlider.-greenBricks .informationSlider__content, .informationSlider.-blackBricks .informationSlider__content { background-image: url("/img/patterns/bricktexture.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; } .informationSlider.-greenBricks .informationSlider__title, .informationSlider.-greenBricks .informationSlider__introduction *, .informationSlider.-blackBricks .informationSlider__title, .informationSlider.-blackBricks .informationSlider__introduction * { color: #fff; } .informationSlider.-greenBricks .informationSlider__navButton.-active::before, .informationSlider.-blackBricks .informationSlider__navButton.-active::before { color: #fff; } .informationSlider.-greenBricks .informationSlider__content { background-image: url("/img/patterns/bricktexture.jpg"); } .informationSlider.-blackBricks .informationSlider__content { background-image: url("/img/patterns/bricktextureblack.jpg"); } @media screen and (min-width: 1024px) { .informationSlider__wrapper { flex-direction: row; justify-content: space-between; } .informationSlider__content { display: flex; flex-direction: row; flex-grow: 1; justify-content: flex-end; padding: 6rem 0 4rem 1rem; } .informationSlider__images { width: calc(50% - 30px); min-width: calc(50% - 30px); } .informationSlider__nav { transform: translateX(12.1rem); } .informationSlider__slider { transform: translateX(12.1rem); } } .instagramFeed { padding: 30px 0 0; } .instagramFeed__header { display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 30px; } .instagramFeed__title { margin: 0; } .instagramFeed .socialList__socialLink::before { font-size: 1.1rem; } .instagramFeed .socialList__socialItem:last-child .socialList__socialLink { margin-right: 0; } .instagramFeed__postList { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .instagramFeed__post { width: calc(100% - 30px); margin: 0 15px 30px; position: relative; overflow: hidden; } .instagramFeed__post img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; transform-origin: center; transform: scale(1); transition: transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1); } .instagramFeed__post:hover img { transform: scale(1.05); } .instagramFeed__post::before { content: ""; display: block; padding-top: 100%; } @media screen and (min-width: 800px) { .instagramFeed__header { flex-direction: row; } .instagramFeed__post { width: calc(50% - 30px); } } @media screen and (min-width: 1024px) { .instagramFeed { padding: 95px 0 80px; } .instagramFeed__post { width: calc(25% - 30px); } } .introSection { background-color: white; } .introSection__header { margin: 0 0 1rem 0; font-size: clamp(2rem, 4vw, 3rem); } .introSection__tagList { margin-bottom: 1.5rem; } @media screen and (min-width: 800px) { .introSection__tagList { margin-bottom: 2.5rem; } } .introSection__grid { --grid-gap: 1.5rem; --grid-columns: calc(25% - (var(--grid-gap) / 4)); display: flex; flex-direction: column; gap: var(--grid-gap); } @media screen and (min-width: 800px) { .introSection__grid { display: grid; grid-template-columns: repeat(4, calc(25% - var(--grid-gap) * 3 / 4)); grid-gap: var(--grid-gap); } } @media screen and (min-width: 800px) { .introSection__grid { grid-template-columns: repeat(3, calc(33% - var(--grid-gap) * 2 / 3)); } } @media screen and (min-width: 1024px) { .introSection__grid { grid-template-columns: repeat(4, calc(25% - var(--grid-gap) * 3 / 4)); } } .introSection__grid.-withBgGraphic { position: relative; } @media screen and (min-width: 800px) { .introSection__grid.-withBgGraphic::before { content: ""; background: no-repeat url("/img/backgrounds/faintlines-light-density.svg"); position: absolute; width: 200%; height: 200%; top: 250px; left: 20vw; mix-blend-mode: multiply; z-index: 1; } } @media screen and (min-width: 800px) { .introSection__grid.-withImage, .introSection__grid:has(.introSection__image) { grid-template-columns: repeat(4, calc(25% - var(--grid-gap) * 3 / 4)); align-items: center; } } @media screen and (min-width: 800px) { .introSection__grid.-withImage .introSection__content, .introSection__grid:has(.introSection__image) .introSection__content { grid-column: 1/span 2; } } @media screen and (min-width: 800px) { .introSection__grid.-withImage .introSection__richText, .introSection__grid:has(.introSection__image) .introSection__richText { grid-column: 1/span 2; padding-right: 2rem; } } @media screen and (min-width: 1024px) { .introSection__grid.-withImage .introSection__richText, .introSection__grid:has(.introSection__image) .introSection__richText { grid-column: 1/span 2; padding-right: 4rem; } } .introSection__grid.-withImage .introSection__image, .introSection__grid:has(.introSection__image) .introSection__image { width: 100%; z-index: 2; max-width: 100%; } .introSection__grid.-withImage .introSection__image img, .introSection__grid:has(.introSection__image) .introSection__image img { width: 100%; height: auto; } @media screen and (min-width: 800px) { .introSection__grid.-withImage .introSection__image, .introSection__grid:has(.introSection__image) .introSection__image { grid-column: 3/span 2; grid-row: 1; } } @media screen and (min-width: 800px) { .introSection__grid.-withImage .introSection__info, .introSection__grid:has(.introSection__image) .introSection__info { grid-column: 1; grid-row: 2; } } @media screen and (min-width: 1024px) { .introSection__grid.-withImage .introSection__info, .introSection__grid:has(.introSection__image) .introSection__info { grid-column: 1; grid-row: 2; margin-top: 1rem; } } @media screen and (min-width: 800px) { .introSection__richText { grid-column: 1/span 2; padding-right: 2rem; } } @media screen and (min-width: 1024px) { .introSection__richText { grid-column: 1/span 3; padding-right: 4rem; } } @media screen and (min-width: 800px) { .introSection__info { grid-column: 3; } } @media screen and (min-width: 1024px) { .introSection__info { grid-column: 4; } } .introSection__listHeading { color: #3e3e3e; font-weight: 400; text-transform: uppercase; font-size: 0.875rem; } .introSection__list { padding-inline-start: 1rem; color: #3e3e3e; font-weight: 600; margin-block-start: 0.25rem; } .introWithLargeGraphic { overflow: hidden; position: relative; } .introWithLargeGraphic__grid { display: grid; row-gap: 2rem; } .introWithLargeGraphic__graphicWrapper { margin-inline: 1rem; } .introWithLargeGraphic__graphic { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .introWithLargeGraphic__text ul { list-style: none; } .introWithLargeGraphic__text li::before { content: url('data:image/svg+xml,'); width: 1rem; height: 1rem; position: absolute; left: 0.5rem; } @media screen and (min-width: 1024px) { .introWithLargeGraphic::before { content: ""; background: no-repeat url("/img/backgrounds/faintlines-light-density.svg"); position: absolute; width: 150%; height: 150%; top: 250px; left: 20vw; mix-blend-mode: multiply; opacity: 0.75; } .introWithLargeGraphic:has(+ .iconCardSection) { z-index: 0; overflow: visible; } .introWithLargeGraphic__header { width: 50%; } .introWithLargeGraphic__graphicWrapper { margin-top: -250px; } } @media screen and (min-width: 1200px) { .introWithLargeGraphic { position: relative; } .introWithLargeGraphic__header { grid-area: 1/1/1/1; z-index: 1; } .introWithLargeGraphic__graphicWrapper { grid-area: 1/1/1/1; margin: 0; } } .itemList { padding-bottom: 50px; } .itemList__wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(325px, 1fr)); -moz-column-gap: 20px; column-gap: 20px; row-gap: 18px; margin-bottom: 2rem; } @media screen and (min-width: 800px) { .itemList__wrapper { margin-bottom: 4rem; } } .itemList__workSample, .itemList__featuredWork { min-height: 300px; } @media screen and (min-width: 576px) { .itemList__workSample, .itemList__featuredWork { min-height: 350px; } } .itemList__featuredWork.-emphasized { box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } .itemList .featuredWork__description { font-size: 1rem; } .itemList .featuredWork__image { height: 258px; } .itemList.-shade { background-color: #f8f8f8; } .itemList.-compact { padding: 30px 0 0; } .itemList.-wideSpacing .itemList__wrapper { -moz-column-gap: 36px; column-gap: 36px; row-gap: 60px; } .itemList__introduction { margin-top: -1.4rem; margin-bottom: 2rem; } .itemList__introduction *:first-child { margin-top: 0; } .itemList__introduction *:last-child { margin-bottom: 0; } @media screen and (min-width: 800px) { .itemList.-compact { padding: 50px 0 20px; } } .jobList__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1.5rem; } .jobList__heading { margin-bottom: 0; } .jobList__filters { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } @media screen and (min-width: 800px) { .jobList .itemList__wrapper { margin: 0; } } .jobList .select__label { margin-bottom: 0; } .layer { padding: 3rem 0; position: relative; } .layer.-shade { background-color: #f8f8f8; } .layer.-transparent { background-color: transparent; } .layer.-reducedPaddingMobile { padding: 1.5rem 0; } @media screen and (min-width: 800px) { .layer.-reducedPaddingMobile { padding: 3rem 0; } } .layer.-reducedPadding { padding: 1.5rem 0; } .layer .container { z-index: 10; } .leadership { padding: 2rem 0 0; } .leadership__title { font-size: 2rem; margin-bottom: 0.2rem; } .leadership__introduction { font-size: 1.125rem; } .leadership__introduction > *:last-child { margin-bottom: 0; } .leadership__introduction p { line-height: 1.4; } .leadership__introductionWrapper { max-width: 790px; margin-bottom: 85px; } .leadership__columns { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -70px; margin-right: -70px; } .leadership__column { width: calc(100% - 140px); margin: 0 70px; margin-bottom: 2.5rem; text-align: center; } .leadership__photo { width: 100%; position: absolute; top: 0; left: 0; } .leadership__photoWrapper { border-radius: 50%; position: relative; overflow: hidden; margin-bottom: 1.6rem; } .leadership__photoWrapper::after { content: ""; display: block; padding-top: 100%; } .leadership__name { font-size: 1.3885rem; margin-bottom: 0.3rem; margin-top: 0; color: #3d684f; font-weight: 700; } .leadership__position { font-size: 1.125rem; margin-bottom: 0.5rem; margin-top: 0; } .leadership__linkedin { text-decoration: none; font-size: 0; } .leadership__linkedin::before { content: "\f08c"; font-size: 1.5rem; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); color: #3e3e3e; } .leadership__linkedin:hover::before { color: #3d684f; } @media screen and (min-width: 800px) { .leadership { padding: 7rem 0 2rem; } .leadership__column { width: calc(50% - 140px); margin: 0 70px; margin-bottom: 6rem; } } @media screen and (min-width: 1024px) { .leadership__column { width: calc(33.3333% - 140px); margin: 0 70px; margin-bottom: 6rem; } } .mobileNavigation__menuButton { background-color: transparent; border: none; cursor: pointer; } .mobileNavigation__menuButtonIcon { width: 2rem; height: 1rem; color: #3d684f; } .mobileNavigation__panel { display: none; flex-direction: column; background-color: white; position: fixed; top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, 0.1); transform: translateX(-100%); transition: transform 150ms ease-out; z-index: 1000; overflow: scroll; } .mobileNavigation__panel.-subnav .mobileNavigation__trigger { font-weight: 400; } .mobileNavigation__panel .mobileNavigation__panel { right: 0; } .mobileNavigation__panel[aria-hidden=false] { display: flex; } .mobileNavigation__panel--active { transform: translateX(0); } .mobileNavigation__heading { display: grid; grid-template-columns: repeat(3, 1fr); font-size: 1rem; font-weight: 400; padding: 0.5rem 1rem; border-bottom: 2px solid lightgray; margin-bottom: 0; text-align: center; } .mobileNavigation__headingText { align-self: center; grid-column: 2/3; font-family: var(--root-font-family); margin: 0; font-size: 1rem; font-weight: 400; } .mobileNavigation__list { list-style: none; padding: 0 0 1rem; } .mobileNavigation__list.-twoColumn { -moz-column-count: 2; column-count: 2; padding: 1rem; } .mobileNavigation__list.-twoColumn .mobileNavigation__trigger { padding: 0; font-weight: 400; } .mobileNavigation__back { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; color: unset; margin: 0; padding: 0; grid-column: 1/2; justify-self: start; grid-row: 1; } .mobileNavigation__back .mobileNavigation__triggerIcon { transform: rotate(180deg); } .mobileNavigation__close { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; color: unset; margin: 0; padding: 0; grid-column: 3/4; justify-self: end; grid-row: 1; } .mobileNavigation__close .mobileNavigation__triggerIconWrapper { background-color: transparent; } .mobileNavigation__close .mobileNavigation__triggerIcon { height: 1.5rem; width: auto; } .mobileNavigation__trigger { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; color: unset; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; text-decoration: none; cursor: pointer; width: 100%; color: #3e3e3e; padding: 0.5rem 1rem; line-height: 2; font-weight: 600; } .mobileNavigation__triggerIconWrapper { display: grid; align-items: center; justify-content: center; margin: -0.25rem 0rem; background-color: #f2f2f2; width: 3rem; height: 3rem; border-radius: 50%; } .mobileNavigation__triggerIcon { --icon-fill-color: blue; width: 0.75rem; height: 1.25rem; } .mobileNavigation__column { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1rem; } .mobileNavigation__column.-featuredColumn { height: 100%; background: #3d684f; color: white; grid-column: 1/3; } .mobileNavigation__column.-featuredColumn .mobileNavigation__columnTitle { color: white; font-family: var(--root-font-family); padding: 0; } .mobileNavigation__column.-featuredColumn .mobileNavigation__columnDescription > * { color: white; margin-bottom: 0; font-size: 0.875rem; } .mobileNavigation__column.-image { display: flex; align-items: center; flex-direction: row; padding: 0.5rem 1rem 0.5rem; } .mobileNavigation__column.-image:first-child { padding-top: 1rem; } .mobileNavigation__column.-image:last-child { padding-bottom: 1rem; } .mobileNavigation__column.-image .mobileNavigation__columnTitle { padding: 0; } .mobileNavigation__columnTitle { font-family: var(--root-font-family); font-size: 1rem; margin-bottom: 0; color: #3e3e3e; font-weight: 600; padding: 1rem; } .mobileNavigation__columnTitle:hover .mobileNavigation__linkIcon { transform: translateX(2px); } .mobileNavigation__columnImageWrapper { max-width: 100px; } .mobileNavigation__columnImage { aspect-ratio: 3/2; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .mobileNavigation__footer { display: flex; list-style: none; width: 100%; padding: 0; margin-top: auto; margin-bottom: 0; } .mobileNavigation__footer .mobileNavigation__trigger { font-size: 0.875rem; font-weight: 400; } .ourWork { padding: 30px 0; background: #f8f8f8; } .ourWork__header { margin-bottom: 30px; } .ourWork__introduction > * { font-size: 1.125rem; line-height: 1.4; max-width: 570px; } .ourWork__wrapper { display: flex; flex-direction: column; flex-wrap: wrap; margin-bottom: 30px; } .ourWork__workSample { margin-bottom: 30px; transform: scale(1.3); opacity: 0; } .ourWork.-rowsEven .ourWork__wrapper { flex-direction: row; height: auto; margin-left: -15px; margin-right: -15px; } @media screen and (min-width: 800px) { .ourWork__wrapper { height: 1530px; } .ourWork__workSample { width: calc(50% - 15px); } .ourWork__workSample:nth-child(even) { height: 345px; } .ourWork__workSample:nth-child(7) { height: 487px; } .ourWork__workSample:nth-child(1), .ourWork__workSample:nth-child(2), .ourWork__workSample:nth-child(3), .ourWork__workSample:nth-child(4), .ourWork__workSample:nth-child(5) { margin-right: 30px; } .ourWork.-rows .ourWork__wrapper { flex-direction: row; height: auto; margin-left: -15px; margin-right: -15px; } .ourWork.-rows .ourWork__workSample { height: 225px !important; } .ourWork.-rows .ourWork__workSample { margin-bottom: 0 !important; margin-right: 0 !important; height: 225px !important; } .ourWork.-rows .ourWork__workSample:nth-child(1), .ourWork.-rows .ourWork__workSample:nth-child(2), .ourWork.-rows .ourWork__workSample:nth-child(3), .ourWork.-rows .ourWork__workSample:nth-child(6), .ourWork.-rows .ourWork__workSample:nth-child(7), .ourWork.-rows .ourWork__workSample:nth-child(9), .ourWork.-rows .ourWork__workSample:nth-child(10) { width: calc(50% - 22.5px); margin: 0 15px; margin-bottom: 15px !important; } .ourWork.-rows .ourWork__workSample:nth-child(1), .ourWork.-rows .ourWork__workSample:nth-child(4), .ourWork.-rows .ourWork__workSample:nth-child(5), .ourWork.-rows .ourWork__workSample:nth-child(8), .ourWork.-rows .ourWork__workSample:nth-child(11), .ourWork.-rows .ourWork__workSample:nth-child(14), .ourWork.-rows .ourWork__workSample:nth-child(17) { width: calc(100% - 30px); margin: 0 15px; margin-bottom: 15px !important; } .ourWork.-rowsEven .ourWork__workSample { height: auto !important; width: calc(33.3333% - 30px); min-height: 0 !important; margin: 0 15px; margin-bottom: 30px !important; } .ourWork.-rowsEven .ourWork__workSample::before { content: ""; display: block; padding-top: 100%; } } @media screen and (min-width: 1024px) { .ourWork { padding: 70px 0 138px; } .ourWork__wrapper { height: 1015px; margin-bottom: 60px; } .ourWork__workSample { width: calc(33.333% - 20px); } .ourWork__workSample:nth-child(1), .ourWork__workSample:nth-child(2), .ourWork__workSample:nth-child(3), .ourWork__workSample:nth-child(4), .ourWork__workSample:nth-child(5), .ourWork__workSample:nth-child(6) { margin-right: 30px; } .ourWork__workSample:nth-child(1), .ourWork__workSample:nth-child(3), .ourWork__workSample:nth-child(7), .ourWork__workSample:nth-child(9) { height: 345px; } .ourWork__workSample:nth-child(5) { height: 462px; } .ourWork__workSample:nth-child(even) { height: 225px; } .ourWork__header { margin-bottom: 75px; } .ourWork.-rows .ourWork__wrapper { height: auto; } .ourWork.-rows .ourWork__workSample { height: 225px !important; } .ourWork.-rows .ourWork__workSample:nth-child(1), .ourWork.-rows .ourWork__workSample:nth-child(2), .ourWork.-rows .ourWork__workSample:nth-child(3), .ourWork.-rows .ourWork__workSample:nth-child(6), .ourWork.-rows .ourWork__workSample:nth-child(7), .ourWork.-rows .ourWork__workSample:nth-child(10), .ourWork.-rows .ourWork__workSample:nth-child(11), .ourWork.-rows .ourWork__workSample:nth-child(14), .ourWork.-rows .ourWork__workSample:nth-child(15), .ourWork.-rows .ourWork__workSample:nth-child(18) { width: calc(33.333% - 30px); margin: 0 15px; margin-bottom: 15px !important; } .ourWork.-rows .ourWork__workSample:nth-child(1), .ourWork.-rows .ourWork__workSample:nth-child(4), .ourWork.-rows .ourWork__workSample:nth-child(5), .ourWork.-rows .ourWork__workSample:nth-child(8), .ourWork.-rows .ourWork__workSample:nth-child(9), .ourWork.-rows .ourWork__workSample:nth-child(12), .ourWork.-rows .ourWork__workSample:nth-child(13), .ourWork.-rows .ourWork__workSample:nth-child(16), .ourWork.-rows .ourWork__workSample:nth-child(17) { width: calc(66.6666% - 30px); margin: 0 15px; margin-bottom: 15px !important; } .ourWork.-rowsEven .ourWork__workSample { height: auto !important; width: calc(33.3333% - 30px); min-height: 0 !important; margin: 0 15px; margin-bottom: 30px !important; } .ourWork.-rowsEven .ourWork__workSample::before { content: ""; display: block; padding-top: 100%; } } .ourWorkGrid { padding: 30px 0; background: #f8f8f8; } .ourWorkGrid__header { margin-bottom: 30px; } .ourWorkGrid__introduction > * { font-size: 1.125rem; line-height: 1.4; max-width: 570px; } .ourWorkGrid__wrapper { display: grid; grid-template-rows: repeat(9, 228px); grid-gap: 30px; margin-bottom: 30px; } @media screen and (min-width: 800px) { .ourWorkGrid__wrapper { display: grid; grid-template-columns: repeat(2, calc(50% - 15px)); grid-template-rows: repeat(auto-fit, minmax(57px, 1fr)); grid-gap: 30px; } .ourWorkGrid .workSample__item--1 { grid-column: 1/span 1; grid-row: 1/span 6; } .ourWorkGrid .workSample__item--2 { grid-row: 7/span 12; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--3 { grid-row: 19/span 8; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--4 { grid-row: 27/span 12; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--5 { grid-row: 39/span 9; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--6 { grid-column: 2/span 1; grid-row: 1/span 7; } .ourWorkGrid .workSample__item--7 { grid-row: 8/span 18; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--8 { grid-row: 27/span 12; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--9 { grid-row: 39/span 9; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--10 { grid-row: 48/span 8; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--11 { grid-row: 48/span 10; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--12 { grid-row: 56/span 12; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--13 { grid-row: 58/span 18; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--14 { grid-row: 68/span 8; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--15 { grid-row: 76/span 10; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--16 { grid-row: 76/span 10; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--17 { grid-row: 86/span 10; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--18 { grid-row: 86/span 10; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--19 { grid-row: 96/span 10; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--20 { grid-row: 96/span 10; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--21 { grid-row: 106/span 10; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--22 { grid-row: 106/span 10; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--23 { grid-row: 116/span 10; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--24 { grid-row: 116/span 10; grid-column: 1/span 1; } } @media screen and (min-width: 1024px) { .ourWorkGrid__wrapper { display: grid; grid-template-columns: repeat(3, calc(33.333% - 20px)); grid-template-rows: repeat(auto-fit, minmax(114px, 1fr)); grid-gap: 30px; } .ourWorkGrid .workSample__item--1 { grid-row: 1/span 9; } .ourWorkGrid .workSample__item--2 { grid-row: 10/span 9; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--3 { grid-row: 19/span 12; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--4 { grid-row: 1/span 5; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--5 { grid-row: 6/span 16; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--6 { grid-row: 22/span 9; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--7 { grid-row: 1/span 9; grid-column: 3/span 1; } .ourWorkGrid .workSample__item--8 { grid-row: 10/span 9; grid-column: 3/span 1; } .ourWorkGrid .workSample__item--9 { grid-row: 19/span 12; grid-column: 3/span 1; } .ourWorkGrid .workSample__item--10 { grid-row: 31/span 12; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--11 { grid-row: 31/span 9; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--12 { grid-row: 31/span 12; grid-column: 3/span 1; } .ourWorkGrid .workSample__item--13 { grid-row: 43/span 9; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--14 { grid-row: 40/span 15; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--15 { grid-row: 43/span 9; grid-column: 3/span 1; } .ourWorkGrid .workSample__item--16 { grid-row: 52/span 12; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--17 { grid-row: 55/span 9; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--18 { grid-row: 52/span 12; grid-column: 3/span 1; } .ourWorkGrid .workSample__item--19 { grid-row: 64/span 9; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--20 { grid-row: 64/span 9; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--21 { grid-row: 64/span 9; grid-column: 3/span 1; } .ourWorkGrid .workSample__item--22 { grid-row: 73/span 12; grid-column: 1/span 1; } .ourWorkGrid .workSample__item--23 { grid-row: 73/span 12; grid-column: 2/span 1; } .ourWorkGrid .workSample__item--24 { grid-row: 73/span 12; grid-column: 3/span 1; } } .pdfViewer { padding: 0 0 3rem; position: relative; z-index: 1; } .pdfViewer__embed { width: 100%; height: 70vh; min-height: 600px; overflow: hidden; border: 16px solid #D5D5D6; margin-bottom: 1rem; } .pdfViewer__embed iframe { display: block; width: 100%; height: 100%; border: none; } @media screen and (min-width: 1024px) { .pdfViewer__embed { height: 80vh; min-height: 400px; } } .projectGallery { display: block; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 6; transition: opacity 250ms cubic-bezier(0.075, 0.82, 0.165, 1); background-color: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; } .projectGallery.-revealed { pointer-events: auto; opacity: 1; } .projectGallery__wrapper { height: 100%; width: 100%; } .projectGallery__wrapper img { max-width: 100vw; max-height: 100vh; transform: translateY(-50%); } .projectGallery__slide { text-align: center; padding-top: 50vh; } .projectGallery__next, .projectGallery__prev, .projectGallery__close { position: absolute; border: 0; background: none; cursor: pointer; } .projectGallery__next, .projectGallery__prev { top: 50%; transform: translateY(-50%); } .projectGallery__next { right: 10px; } .projectGallery__prev { left: 10px; } .projectGallery__close { top: 20px; right: 20px; } .projectGallery__next::before, .projectGallery__prev::before, .projectGallery__close::before { color: #fff; font-weight: 300; } .projectGallery__close::before { font-size: 1.8rem; } .projectGallery__next::before, .projectGallery__prev::before { font-size: 2.7rem; } .projectGallery__next::before { content: "\f105"; } .projectGallery__prev::before { content: "\f104"; } .projectGallery__close::before { content: "\f00d"; } @media screen and (min-width: 576px) { .projectGallery__next { right: 50px; } .projectGallery__prev { left: 50px; } } .projectGrid { padding: 30px 0; } .projectGrid__wrapper { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around; } .projectGrid__item { flex: 0 0 49.5%; background-color: #FFF; cursor: pointer; } .projectGrid__image { -o-object-fit: cover; object-fit: cover; width: 100%; opacity: 1; transition: all 250ms; } .projectGrid__image:hover { opacity: 0.8; } @media screen and (min-width: 800px) { .projectGrid__item { flex: 0 0 33%; } } .relatedProjects { padding-top: 30px; margin-top: 70px; position: relative; overflow: hidden; } .relatedProjects::before { content: ""; position: absolute; display: block; top: -50px; left: -25px; width: calc(100% + 50px); height: 10px; box-shadow: 0px 30px 20px rgba(0, 0, 0, 0.9); z-index: 1; } .relatedProjects__productFeature { margin-bottom: 3rem; } .relatedProjects__ctaWrapper { text-align: center; } .relatedProjects .itemList__title { margin-top: 2rem; } .-shade + .relatedProjects { margin-top: 0; } .serviceLists { padding: 25px 0; } .serviceLists__content { flex-grow: 1; padding-left: 15px; } .serviceLists__featuredPhoto { width: 100%; padding: 80px 0; opacity: 0; transform: translateY(100px); transition: transform 1s cubic-bezier(0.39, 0.575, 0.565, 1), opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1); } .serviceLists__featuredPhoto.-revealed { transform: translateY(0); opacity: 1; } .serviceLists__list { list-style-type: none; margin: 0; padding-left: 20px; max-height: 0; overflow: hidden; transition: max-height 500ms cubic-bezier(0.075, 0.82, 0.165, 1); } .serviceLists__list ul { list-style-type: none; } .serviceLists__list li:first-child { margin-top: 11px; } .serviceLists__list li::before { content: "ยท"; position: absolute; top: 0; left: -1rem; font-size: 1.7rem; } .serviceLists__list * { position: relative; margin-bottom: 9px; color: #fff; transition: color 250ms cubic-bezier(0.39, 0.575, 0.565, 1); } .serviceLists__photoWrapper { width: 300px; height: 300px; transform-origin: center; } .serviceLists__subService { position: relative; margin-bottom: 15px; padding: 25px; background-color: #3d684f; box-shadow: 0 0 0px rgba(0, 0, 0, 0); transition: background-color 250ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 250ms cubic-bezier(0.075, 0.82, 0.165, 1); cursor: pointer; } .serviceLists__subService.-opened { background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); cursor: auto; } .serviceLists__subService.-opened .serviceLists__list { max-height: 1000px; } .serviceLists__subService.-opened .serviceLists__list * { color: #000; } .serviceLists__subService.-opened .serviceLists__listItem { color: #3e3e3e; font-size: 1.125rem; } .serviceLists__subService.-opened .serviceLists__subServiceExpand { transform: rotate(90deg); pointer-events: auto; } .serviceLists__subService.-opened .serviceLists__subServiceExpand::before { color: #3d684f; } .serviceLists__subService.-opened .serviceLists__subserviceTitle { color: #3d684f; } .serviceLists__subService:hover { background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .serviceLists__subServiceExpand { position: absolute; top: 25px; right: 25px; padding: 0; background: none; border: none; transform-origin: center; transform: rotate(45deg); transition: transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1); pointer-events: none; cursor: pointer; } .serviceLists__subServiceExpand::before { content: "\f00d"; font-weight: 300; font-size: 25px; color: #fff; } .serviceLists__subService:hover .serviceLists__subServiceExpand::before { color: #3d684f; } .serviceLists__subserviceTitle { margin: 0; color: #fff; font-size: 1.125rem; font-weight: 400; transition: color 75ms cubic-bezier(0.39, 0.575, 0.565, 1); } .serviceLists__subService:hover .serviceLists__subserviceTitle { color: #3d684f; } .serviceLists__wrapper { display: flex; flex-direction: column; } .serviceLists.-flipped .serviceLists__featuredPhoto { order: 1; position: relative; } .serviceLists.-flipped .serviceLists__content { order: 2; } .serviceLists.-flipped .serviceLists__photoWrapper img { transform: rotate(45deg) scale(1.375); } .serviceLists.-shade { background: #f8f8f8; } .serviceLists.-noPhoto .serviceLists__content { padding-top: 0; padding-left: 0; } @media screen and (min-width: 1024px) { .serviceLists__content { padding-top: 50px; } .serviceLists__featuredPhoto { width: 570px; min-width: 570px; min-height: 988px; padding: 0; } .serviceLists__photoWrapper { width: 695px; height: 695px; transform-origin: top left; } .serviceLists__introductionWrapper { width: 50%; min-width: 50%; padding-right: 3rem; } .serviceLists__introduction { font-size: 1.125rem; } .serviceLists__wrapper { flex-direction: row; } .serviceLists.-noPhoto { padding: 5.5rem 0; } .serviceLists.-flipped .serviceLists__content { order: 1; } .serviceLists.-flipped .serviceLists__featuredPhoto { order: 2; } .serviceLists.-flipped .serviceLists__photoWrapper { transform-origin: top right; transform: rotate(-45deg); position: absolute; top: 0; right: 0; } .serviceLists.-flipped .serviceLists__photoWrapper img { transform: rotate(45deg) scale(1.375); } } .siteFooter__wrapper { display: flex; flex-direction: column; gap: 0.75rem; } @media screen and (min-width: 1200px) { .siteFooter__wrapper { display: grid; grid-template-columns: repeat(12, 1fr); } } .siteFooter__navigation, .siteFooter__companyInfo { width: 100%; padding-top: 2rem; } @media screen and (min-width: 1200px) { .siteFooter__navigation, .siteFooter__companyInfo { padding: 2.5rem 0; } } @media screen and (min-width: 1200px) { .siteFooter__companyInfo { grid-column: 1/span 3; } } .siteFooter__companyInfoWrapper { display: flex; gap: 3rem; } .siteFooter__legalInfo small { letter-spacing: -0.322px; font-size: 0.778rem; } .siteFooter__legalInfoLink { color: #3e3e3e; text-decoration: none; background-image: linear-gradient(#3e3e3e 0 0), linear-gradient(transparent 0 0); background-position: 0 100%, 0 100%; background-repeat: no-repeat; background-size: 0 1px, 100% 1px; position: relative; transition: background-size 0.15s linear; } .siteFooter__legalInfoLink:hover { background-size: 100% 1px, 0 1px; } .siteFooter__legalInfoLink.-reverse { background-image: linear-gradient(transparent 0 0), linear-gradient(#3e3e3e 0 0); background-position: 0 100%, 100% 100%; } .siteFooter__legalInfoLink.-reverse:hover { background-size: 100% 1px, 0 1px; } .siteFooter__locationTitle { font-weight: 700; } .siteFooter__locationTitle, .siteFooter__locationAddress, .siteFooter__locationPhone { margin: 0; font-size: 0.889rem; line-height: 150%; letter-spacing: -0.368px; } .siteFooter__logoWrapper { width: 200px; padding-bottom: 1rem; } .siteFooter__logo { width: 100%; max-width: 100%; } .siteFooter__navigation { flex-direction: column; padding-bottom: 2rem; } @media screen and (min-width: 800px) { .siteFooter__navigation { flex-direction: row; } } @media screen and (min-width: 1200px) { .siteFooter__navigation { grid-column: 5/span 8; } } .siteFooter__utilityNav { padding: 1rem 0; border-top: 1px solid #e5e5e5; display: flex; justify-content: space-between; } @media screen and (min-width: 1024px) { body.scrolled .siteHeader { box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3); } body.scrolled .siteHeader__wrapper::after { top: -1px; } body.scrolled .siteHeader__secondaryNav { margin-top: -40px; } body.scrolled .siteHeader__logoWrapper { padding-top: 0; max-width: 164px; } } .siteHeader { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; background: #fff; box-shadow: 0 -31px 20px rgba(0, 0, 0, 0.3); transition: box-shadow 250ms; } .siteHeader__wrapper { max-width: 1250px; margin: 0 auto; padding: 15px; display: grid; grid-template-areas: "logo . . mobile-nav"; } @media screen and (min-width: 1024px) { .siteHeader__wrapper { grid-template-areas: ". . . secondary-nav" "logo . primary-nav primary-nav"; } .siteHeader__wrapper::after { content: ""; background-color: #DADADA; width: 100%; height: 1px; position: absolute; top: 50px; opacity: 1; transition: top 250ms; } } @media screen and (min-width: ) { .siteHeader { padding: 0 0; } } .siteHeader__secondaryNav { display: none; } @media screen and (min-width: 1024px) { .siteHeader__secondaryNav { display: block; grid-area: secondary-nav; margin-bottom: 1rem; transition: margin-top 250ms; } } .siteHeader__secondaryNav .navigation__list { gap: 2rem; margin: 0; } .siteHeader__secondaryNav .navigation__trigger { font-size: 0.75rem; font-weight: 400; } .siteHeader__secondaryNav .navigation__trigger::after { content: none; } .siteHeader__logoWrapper { max-width: 105px; min-width: 105px; margin-right: 10px; z-index: 1; transform: scale(1.3) translateX(10px); transition: padding-top 250ms, max-width 250ms; grid-area: logo; } .siteHeader__logoWrapper.-mobile { display: block; } @media screen and (min-width: 1024px) { .siteHeader__logoWrapper { max-width: 244px; min-width: 188px; transform: scale(1) translateX(0); padding-top: 1rem; } } .siteHeader__logo { width: 100%; transition: transform 250ms; max-height: 8.375rem; } .siteHeader__navigation { display: none; } @media screen and (min-width: 1024px) { .siteHeader__navigation { display: block; grid-area: primary-nav; align-self: center; } } .siteHeader__mobileNavigation { grid-column: 13/main-end; align-self: center; justify-self: end; } @media screen and (min-width: 1024px) { .siteHeader__mobileNavigation { display: none; } } body.home .siteHeader.js-homepage-nav { position: fixed; top: var(--transitional-top-position); transition: top 250ms ease; opacity: 0; } body.home .siteHeader.js-homepage-nav .mobileNavigation__menuButtonIcon { color: #3d684f; } @media screen and (min-width: 1024px) { body.home .siteHeader.js-homepage-nav { box-shadow: none; } body.home .siteHeader.js-homepage-nav__wrapper::after { top: -45px; opacity: 0; } body.home .siteHeader.js-homepage-nav .secondaryNav { margin-top: -43px; } body.home .siteHeader.js-homepage-nav__logoWrapper { padding-top: 0; max-width: 164px; } } body.home .siteHeader.js-homepage-nav.-secondary { --transitional-top-position: 0; opacity: 1; } body.home .siteHeader.js-homepage-nav.-secondary .primaryNav__linkList { justify-content: space-between; } body.home .siteHeader.js-homepage-nav.-secondary .navigation__trigger--active { color: #3d684f; } body.home .siteHeader.js-homepage-nav.-secondary .navigation__item:hover .navigation__trigger, body.home .siteHeader.js-homepage-nav.-secondary .navigation__item:focus .navigation__trigger { color: #3d684f; } body.home .siteHeader.js-homepage-nav.-initial { position: absolute; background-color: transparent; opacity: 1; } body.home .siteHeader.js-homepage-nav.-initial .mobileNavigation__menuButtonIcon { color: white; } @media screen and (min-width: 1024px) { body.home .siteHeader.js-homepage-nav.-initial .siteHeader__wrapper::after { background-color: white; opacity: 1; } body.home .siteHeader.js-homepage-nav.-initial .navigation__trigger { color: white; } body.home .siteHeader.js-homepage-nav.-initial .navigation__trigger--active { color: #F5B210; } body.home .siteHeader.js-homepage-nav.-initial .navigation__item:hover .navigation__trigger, body.home .siteHeader.js-homepage-nav.-initial .navigation__item:focus .navigation__trigger { color: #F5B210; } } .testimonialsSlider { background-color: #3d684f; position: relative; overflow: hidden; } @media screen and (min-width: 1024px) { .testimonialsSlider::before { content: ""; position: absolute; background-image: url('data:image/svg+xml,'); width: 100%; background-repeat: no-repeat; height: calc(100% + 550px); width: 60%; z-index: 0; left: 0; top: -200px; opacity: 0.6; } .testimonialsSlider:has(+ .iconCardSection.-darkBackground) { z-index: 0; overflow: visible; } .testimonialsSlider + .iconCardSection.-darkBackground { z-index: -1; } } .testimonialsSlider__container { z-index: 1; position: relative; } @media screen and (min-width: 1024px) { .testimonialsSlider__container { display: grid; grid-template-columns: 27% 1fr; gap: 70px; } } .testimonialsSlider__heading { color: #fff; grid-column: 1; } .testimonialsSlider__sliderWrapper { grid-column: 2; } .testimonialsSlider .testimonial { --testimonial-font-color: #fff; } .testimonialsSlider .testimonial__icon { --icon-fill-color: #fff; grid-row: 1; transform: unset; height: unset; width: 2.5rem; } .testimonialsSlider .testimonial__content { grid-row: 2; font-size: clamp(1.25rem, 1.5vw, 1.75rem); } .testimonialsSlider .testimonial__citation { max-width: 60%; } .testimonialsSlider .testimonial__citationTitle { font-weight: 400; } .testimonialsSlider .testimonial__footer { grid-row: 3; grid-column: 1; } .testimonialsSlider .splide { overflow: hidden; } .testimonialsSlider .splide__arrows { display: flex; flex-direction: row; } @media screen and (min-width: 1024px) { .testimonialsSlider .splide__arrows { position: absolute; bottom: 2rem; right: 2rem; } } .testimonialsSlider .splide__arrow { position: unset; background-color: transparent; transform: none; } .textWithQuote { background-color: white; } .textWithQuote__grid { --grid-gap: 1.5rem; display: flex; flex-direction: column; gap: var(--grid-gap); } @media screen and (min-width: 576px) { .textWithQuote__grid { --grid-gap: 3rem; display: grid; grid-template-columns: repeat(5, calc(20% - var(--grid-gap) * 4 / 5)); grid-gap: var(--grid-gap); } } @media screen and (min-width: 576px) { .textWithQuote__textWrapper { grid-column: 1/span 5; } } @media screen and (min-width: 800px) { .textWithQuote__textWrapper { grid-column: 1/span 3; } } .textWithQuote__richText p { line-height: 150%; margin: 0; margin-bottom: 2rem; } .textWithQuote__richText figure { margin-left: 0; margin-right: 0; } .textWithQuote__richText img { max-width: 100%; } .textWithQuote__richText a:not(.button) { text-decoration: none; color: #137CB9; font-weight: 700; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .textWithQuote__richText a:not(.button):hover, .textWithQuote__richText a:not(.button):focus { color: #3e3e3e; } .textWithQuote__richText p:last-child { margin-bottom: 0; } @media screen and (min-width: 576px) { .textWithQuote__quote { grid-row: 2; grid-column: 1/span 3; } } @media screen and (min-width: 800px) { .textWithQuote__quote { grid-row: 1; grid-column: 4/span 2; } } .textWithStats { background-color: white; } .textWithStats__grid { --grid-gap: 1.5rem; --grid-columns: calc(25% - (var(--grid-gap) / 4)); display: flex; flex-direction: column; gap: var(--grid-gap); } @media screen and (min-width: 800px) { .textWithStats__grid { display: grid; grid-template-columns: repeat(4, calc(25% - var(--grid-gap) * 3 / 4)); grid-gap: var(--grid-gap); } } @media screen and (min-width: 800px) { .textWithStats__textWrapper { grid-column: 1/span 4; } } @media screen and (min-width: 1024px) { .textWithStats__textWrapper { grid-column: 1/span 2; } } .textWithStats__richText p { line-height: 150%; margin: 0; margin-bottom: 2rem; } .textWithStats__richText figure { margin-left: 0; margin-right: 0; } .textWithStats__richText img { max-width: 100%; } .textWithStats__richText a:not(.button) { text-decoration: none; color: #137CB9; font-weight: 700; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .textWithStats__richText a:not(.button):hover, .textWithStats__richText a:not(.button):focus { color: #3e3e3e; } .textWithStats__richText p:last-child { margin-bottom: 0; } @media screen and (min-width: 1024px) { .textWithStats__richText { width: 90%; } } @media screen and (min-width: 800px) { .textWithStats__stats { grid-row: 2; grid-column: 1/span 4; } } @media screen and (min-width: 1024px) { .textWithStats__stats { grid-row: 1; grid-column: 3/span 2; margin-top: 1.5rem; } } .threeColumnText { padding: 1.5rem 0 0; } .threeColumnText__header { max-width: 570px; margin-bottom: 3.8rem; } .threeColumnText__sectionHeader { color: #fff; } .threeColumnText__introduction > * { font-size: 1.125rem; line-height: 1.4; color: #fff; } .threeColumnText__columnWrapper { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -85px; margin-right: -85px; } .threeColumnText__iconWrapper { max-height: 85px; height: 70px; margin-bottom: 1rem; } .threeColumnText__icon { height: 100%; } .threeColumnText__column { width: calc(100% - 170px); margin: 0 85px; margin-bottom: 2.5rem; } .threeColumnText__columnTitle, .threeColumnText__columnText > * { color: #fff; } .threeColumnText__columnTitle { font-size: 1.125rem; font-weight: bold; } .threeColumnText__columnText > *:last-child { margin-bottom: 0; } .threeColumnText__button { margin-top: 2.1rem; } .threeColumnText.-greenBricks, .threeColumnText.-blackBricks { background: url("/img/patterns/bricktexture.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } .threeColumnText.-greenBricks { background-image: url("/img/patterns/bricktexture.jpg"); } .threeColumnText.-blackBricks { background-image: url("/img/patterns/bricktextureblack.jpg"); } .threeColumnText.-white .threeColumnText__sectionHeader, .threeColumnText.-white .threeColumnText__introduction > *, .threeColumnText.-white .threeColumnText__columnTitle, .threeColumnText.-white .threeColumnText__columnText > * { color: #3e3e3e; } .threeColumnText.-fade { position: relative; overflow: hidden; } .threeColumnText.-fade .threeColumnText__sectionHeader, .threeColumnText.-fade .threeColumnText__introduction > *, .threeColumnText.-fade .threeColumnText__columnTitle, .threeColumnText.-fade .threeColumnText__columnText > * { color: #3e3e3e; } .threeColumnText.-fade::before { content: ""; display: block; position: absolute; top: -40px; left: -30px; width: calc(100% + 60px); height: 30px; box-shadow: 0 15px 80px rgba(0, 0, 0, 0.2); } @media screen and (min-width: 800px) { .threeColumnText { padding: 6rem 0 0; } .threeColumnText.-emphasize { padding: 12rem 0 2rem; } .threeColumnText.-emphasize .threeColumnText__columnTitle { font-size: 1.5rem; } .threeColumnText__column { width: calc(50% - 170px); margin: 0 85px; margin-bottom: 6rem; } } @media screen and (min-width: 1024px) { .threeColumnText { padding: 6rem 0 0; } .threeColumnText__column { width: calc(33.3333% - 170px); margin: 0 85px; margin-bottom: 6rem; } } .twoCardsWithHeadings { background: linear-gradient(180deg, #3d684f 20%, #fff 20%); } @media screen and (min-width: 800px) { .twoCardsWithHeadings { background: linear-gradient(180deg, #3d684f 35%, #fff 35%); } } @media screen and (min-width: 1024px) { .twoCardsWithHeadings { background: linear-gradient(180deg, #3d684f 45%, #fff 45%); } } .twoCardsWithHeadings__columns { --gap: 1.5rem; display: flex; background-color: transparent; flex-direction: column; -moz-column-gap: var(--gap); column-gap: var(--gap); } @media screen and (min-width: 800px) { .twoCardsWithHeadings__columns { --gap: 7rem; display: grid; grid-template-columns: 1fr 1fr; } } .twoCardsWithHeadings__column { --gap: 1.5rem; display: flex; flex-direction: column; margin-bottom: 2rem; gap: var(--gap); } @media screen and (min-width: 800px) { .twoCardsWithHeadings__column { --gap: 2rem; flex-basis: calc(50% - var(--gap) / 2); grid-row: 2; margin-bottom: 0; } } .twoCardsWithHeadings__heading { color: white; grid-row: 1; font-size: clamp(1.5rem, 3vw, 2rem); } .twoCardsWithHeadings__heading.-second { color: #3e3e3e; } @media screen and (min-width: 800px) { .twoCardsWithHeadings__heading.-second { color: white; grid-column: 2; } } @media screen and (min-width: 800px) { .twoCardsWithHeadings__heading { grid-column: 1; } } .twoCardsWithHeadings__card .card__link { font-weight: 600; } .twoCardsWithHeadings__cta { margin-top: auto; } @media screen and (min-width: 800px) { .twoCardsWithHeadings__cta { align-self: flex-start; } } .twoColumnText__heading { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 3vw, 2.5rem); } .twoColumnText__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); color: #3e3e3e; } @media screen and (min-width: 800px) { .twoColumnText__grid { gap: 3.5rem; } } .twoColumnText__column p { line-height: 150%; margin: 0; margin-bottom: 2rem; } .twoColumnText__column figure { margin-left: 0; margin-right: 0; } .twoColumnText__column img { max-width: 100%; } .twoColumnText__column a:not(.button) { text-decoration: none; color: #137CB9; font-weight: 700; transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1); } .twoColumnText__column a:not(.button):hover, .twoColumnText__column a:not(.button):focus { color: #3e3e3e; } .twoColumnText__column .ul1 { margin-top: 0; padding-left: 1rem; } .twoColumnText__column .li1 { margin-bottom: 0.5rem; } .twoColumnText__column .li1:last-child { margin-bottom: 0; } .videoSlider { position: relative; background-color: #f8f8f8; padding: 2rem 0; } .videoSlider__wrapper { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .videoSlider::before { content: ""; display: block; position: absolute; top: 0; left: 0; height: 250px; width: 100%; background-image: url("/img/patterns/bricktexture.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .videoSlider.-blackBricks::before { background-image: url("/img/patterns/bricktextureblack.jpg"); } .videoSlider__videos { overflow: hidden; position: relative; width: 100%; box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; } .videoSlider__videos::before { content: ""; display: block; padding-top: 56.25%; } .videoSlider__videoWrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videoSlider__videoWrapper > * { width: 100%; height: 100%; } .videoSlider__information { flex-grow: 1; display: flex; width: 100%; flex-direction: column; } .videoSlider__informationSlide { opacity: 0; transition: opacity 1000ms; height: 100%; width: calc(100% - 2.5rem); } .videoSlider__informationSlide.-active { opacity: 1; } .videoSlider__slideTitle { font-size: 2.25rem; margin-bottom: 1rem; color: #3e3e3e; } .videoSlider__slideText > *:last-child { margin-bottom: 0; } .videoSlider__slideTray { order: 2; } .videoSlider__nav { order: 1; z-index: 1; margin-bottom: 2rem; } @media screen and (min-width: 1024px) { .videoSlider { padding: 7rem 0; } .videoSlider__slideTray { order: 1; } .videoSlider__nav { order: 2; margin-bottom: 0; } .videoSlider__wrapper { flex-direction: row; } .videoSlider__videos { width: 487.5px; min-width: 487.5px; margin-bottom: 0; } .videoSlider__information { max-width: calc(50% - 5px); } .videoSlider__slideText p { font-size: 1.125rem; } .videoSlider::before, .videoSlider.-blackBricks::before { height: 100%; width: calc((100vw - 1250px) / 2 + 243px); min-width: 243px; } } form .fields { max-width: 600px; } form .field { margin-bottom: 1rem; } form .heading { margin-bottom: 0.5rem; } form fieldset { border: none; padding: 0; } form .field:not(.required) label::after, form .field:not(.required) legend::after { content: "(optional)"; font-size: 0.875rem; margin-left: 0.5rem; color: #969696; } form .checkboxes label::after, form .multiplechoice label::after { display: none; } form .checkboxes label, form .multiplechoice label { margin-right: 1rem; } form .checkboxes input, form .multiplechoice input { margin-right: 0.5rem; } form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 0.7rem; border-radius: 5px; border: none; } form .dropdown .input { border: 2px solid #969696; font-size: 1rem; width: 100%; border-radius: 5px; position: relative; } form .dropdown .input:focus { border: 2px solid #3d684f; outline: none; } form .dropdown .input::after { content: "\f107"; position: absolute; right: 1rem; top: 0.8rem; pointer-events: none; color: #969696; } form input[type=text], form input[type=email], form input[type=number], form textarea { border: 2px solid #969696; padding: 0.7rem; font-size: 1rem; width: 100%; border-radius: 5px; } form input[type=text]:focus, form input[type=email]:focus, form input[type=number]:focus, form textarea:focus { border: 2px solid #3d684f; outline: none; } form .submit button, form .fui-submit { --button-white-rgb: 255, 255, 255; --button-gold-rgb: 245, 178, 17; --button-green-rgb: 61, 104, 79; --button-dark-transparent-rgb: 3, 3, 3; --button-light-yellow-rgb: 251, 224, 114; --button-bg: var(--button-white-rgb); --button-border: white; --button-border-hover: #f5b211; --button-color: #3e3e3e; color: var(--button-color); display: inline-block; box-sizing: content-box; position: relative; font-weight: 600; padding: 13px 30px; border-radius: 24px; line-height: 1; text-align: center; vertical-align: top; border: 3px solid; border-color: var(--button-border); z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(var(--button-bg), 0) 0%, rgba(var(--button-bg), 1) 0%) 50% 100%/200% 200%; transition: border-color 0.3s cubic-bezier(0.7, 0, 0.2, 1), color 0.3s cubic-bezier(0.7, 0, 0.2, 1), background-position 0.3s cubic-bezier(0.7, 0, 0.2, 1); overflow: hidden; } form .submit button span, form .fui-submit span { position: relative; } form .submit button.-whiteUnderlay, form .submit button.-tertiary, form .submit button.fui-submit.-tertiary, form .submit button.-primary, form .submit button.fui-submit.-primary, form .submit button.button.-primary, form .submit button.button.-tertiary, form .fui-submit.-whiteUnderlay, form .fui-submit.-tertiary, form .fui-submit.-primary, form a.fui-submit.button.-primary, form button.fui-submit.button.-primary, form a.fui-submit.button.-tertiary, form button.fui-submit.button.-tertiary { background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgba(var(--button-bg), 0) 0%, rgba(var(--button-bg), 1) 0%) 50% 100%/200% 200%; } form .submit button:hover, form .submit button:focus, form .fui-submit:hover, form .fui-submit:focus { border-color: var(--button-border-hover); background-position: 50% 200%; } form .submit button.loading, form .fui-submit.loading { color: transparent; } form .submit button.loading::before, form .fui-submit.loading::before { content: "\f110"; color: var(--button-color); position: absolute; top: 32%; left: 0; right: 0; margin: auto; animation: 1s linear continuousRotation infinite; } form .submit button.disabled, form .submit button[disabled], form .fui-submit.disabled, form .fui-submit[disabled] { color: #cccccc; pointer-events: none; } form .submit button.-primary, form .fui-submit.-primary { --button-bg: var(--button-gold-rgb); --button-border: #f5b211; z-index: 1; } form .submit button.-secondary, form .fui-submit.-secondary { --button-bg: var(--button-gold-rgb); --button-hover-bg: transparent; --button-border: #f5b211; } form .submit button.-tertiary, form .fui-submit.-tertiary { --button-bg: var(--button-light-yellow-rgb); --button-border: rgb(251.3010204082, 223.9285714286, 113.6989795918); --button-border-hover: rgb(251.3010204082, 223.9285714286, 113.6989795918); } form .submit button.-greenPrimary, form .fui-submit.-greenPrimary { --button-bg: var(--button-green-rgb); --button-border: #3d684f; --button-color: white; --button-border-hover: #3d684f; } form .submit button.-greenPrimary:hover, form .submit button.-greenPrimary:focus, form .fui-submit.-greenPrimary:hover, form .fui-submit.-greenPrimary:focus { --button-color: #3e3e3e; } form .submit button.-greenOutline, form .fui-submit.-greenOutline { --button-bg: var(--button-green-rgb); --button-border: #3d684f; --button-border-hover: #3d684f; } form .submit button.-greenOutline:hover, form .submit button.-greenOutline:focus, form .fui-submit.-greenOutline:hover, form .fui-submit.-greenOutline:focus { --button-color: white; } form .submit button.-whiteOutline, form .fui-submit.-whiteOutline { --button-bg: var(--button-green-rgb); --button-border: white; --button-border-hover: white; --button-color: white; } form .submit button.-whiteOutlineWhiteHover, form .fui-submit.-whiteOutlineWhiteHover { --button-bg: var(--button-white-rgb); --button-border: white; --button-border-hover: white; --button-color: white; } form .submit button.-whiteOutlineWhiteHover:hover, form .submit button.-whiteOutlineWhiteHover:focus, form .fui-submit.-whiteOutlineWhiteHover:hover, form .fui-submit.-whiteOutlineWhiteHover:focus { --button-color: #3d684f; } form .submit button.-darkTransparent, form .fui-submit.-darkTransparent { --button-bg: var(--button-dark-transparent-rgb); --button-border: white; --button-border-hover: white; --button-color: white; background: linear-gradient(180deg, rgba(var(--button-bg), 0.5) 0%, rgba(var(--button-bg), 0.5) 50%, rgba(var(--button-bg), 1) 0%, rgba(var(--button-bg), 1) 0%) 50% 200%/200% 200%; } form .submit button.-darkTransparent:hover, form .submit button.-darkTransparent:focus, form .fui-submit.-darkTransparent:hover, form .fui-submit.-darkTransparent:focus { background-position: 50% 100%; } form .submit button.-reverseHover, form .submit button.button.-tertiary, form .submit button.button.-greenOutline, form .submit button.button.-whiteOutline, form .submit button.button.-whiteOutlineWhiteHover, form .submit button.-tertiary, form .submit button.fui-submit.-tertiary, form .submit button.-greenOutline, form .submit button.fui-submit.-greenOutline, form .submit button.-whiteOutline, form .submit button.fui-submit.-whiteOutline, form .submit button.-whiteOutlineWhiteHover, form .submit button.fui-submit.-whiteOutlineWhiteHover, form .fui-submit.-reverseHover, form a.fui-submit.button.-tertiary, form button.fui-submit.button.-tertiary, form a.fui-submit.button.-greenOutline, form button.fui-submit.button.-greenOutline, form a.fui-submit.button.-whiteOutline, form button.fui-submit.button.-whiteOutline, form a.fui-submit.button.-whiteOutlineWhiteHover, form button.fui-submit.button.-whiteOutlineWhiteHover, form .fui-submit.-tertiary, form .fui-submit.-greenOutline, form .fui-submit.-whiteOutline, form .fui-submit.-whiteOutlineWhiteHover { background-position: 50% 200%; } form .submit button.-reverseHover:hover, form .submit button.-tertiary:hover, form .submit button.-greenOutline:hover, form .submit button.-whiteOutline:hover, form .submit button.-whiteOutlineWhiteHover:hover, form .submit button.-reverseHover:focus, form .submit button.-tertiary:focus, form .submit button.-greenOutline:focus, form .submit button.-whiteOutline:focus, form .submit button.-whiteOutlineWhiteHover:focus, form .fui-submit.-reverseHover:hover, form .fui-submit.-tertiary:hover, form .fui-submit.-greenOutline:hover, form .fui-submit.-whiteOutline:hover, form .fui-submit.-whiteOutlineWhiteHover:hover, form .fui-submit.-reverseHover:focus, form .fui-submit.-tertiary:focus, form .fui-submit.-greenOutline:focus, form .fui-submit.-whiteOutline:focus, form .fui-submit.-whiteOutlineWhiteHover:focus { background-position: 50% 100%; } form .submit button, form .fui-submit { border: 2px solid transparent; padding: 13px 30px; z-index: 1; margin-top: 1rem; transition: border 250ms cubic-bezier(0.19, 1, 0.22, 1), background 250ms cubic-bezier(0.19, 1, 0.22, 1); } form .submit button::after, form .fui-submit::after { content: ""; display: block; position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 24px; background: linear-gradient(to bottom, #fad540 0%, #f5b211 100%); z-index: -1; opacity: 1; transition: opacity 250ms cubic-bezier(0.19, 1, 0.22, 1); } form .submit button:hover, form .submit button:focus, form .fui-submit:hover, form .fui-submit:focus { border: 2px solid #fad540; padding: 13px 30px; background: linear-gradient(to bottom, rgba(250, 213, 64, 0) 0%, rgba(245, 178, 17, 0) 100%); background: #fff; outline: none; color: #3e3e3e; } form .submit button:hover::after, form .submit button:focus::after, form .fui-submit:hover::after, form .fui-submit:focus::after { opacity: 0; } /*# sourceMappingURL=app.css.map*/