.elementor-1126 .elementor-element.elementor-element-9177005{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:32px 0px;--row-gap:32px;--column-gap:0px;--overlay-opacity:0.92;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:200px;--padding-bottom:45px;--padding-left:040px;--padding-right:040px;}.elementor-1126 .elementor-element.elementor-element-9177005:not(.elementor-motion-effects-element-type-background), .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor2 );background-image:url("https://hein.ca/wp-content/uploads/2026/09/20211123-Prescott-Russell-7-1-scaled.jpg");background-position:0px -800px;background-repeat:no-repeat;background-size:cover;}.elementor-1126 .elementor-element.elementor-element-9177005::before, .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-background-video-container::before, .elementor-1126 .elementor-element.elementor-element-9177005 > .e-con-inner > .elementor-background-video-container::before, .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-background-slideshow::before, .elementor-1126 .elementor-element.elementor-element-9177005 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-astglobalcolor2 );--background-overlay:'';}.elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-shape-bottom .elementor-shape-fill, .elementor-1126 .elementor-element.elementor-element-9177005 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-shape-bottom svg, .elementor-1126 .elementor-element.elementor-element-9177005 > .e-con-inner > .elementor-shape-bottom svg{width:calc(0 + 1.3px);height:4em;}.elementor-1126 .elementor-element.elementor-element-e033860{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-e5611cd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1126 .elementor-element.elementor-element-e5611cd{text-align:center;font-family:"Michroma", Sans-serif;font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:1.9px;word-spacing:7px;color:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-e5611cd p{margin-block-end:0px;}.elementor-1126 .elementor-element.elementor-element-4343b3e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-b0ed12f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-02a2c76{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-72c5f95{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-9b1f895{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-9411972{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-13624d6{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-8df5ee5{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-919dbfb{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-49de100{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--overflow:hidden;--overlay-opacity:0.1;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-49de100::before, .elementor-1126 .elementor-element.elementor-element-49de100 > .elementor-background-video-container::before, .elementor-1126 .elementor-element.elementor-element-49de100 > .e-con-inner > .elementor-background-video-container::before, .elementor-1126 .elementor-element.elementor-element-49de100 > .elementor-background-slideshow::before, .elementor-1126 .elementor-element.elementor-element-49de100 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1126 .elementor-element.elementor-element-49de100 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-1126 .elementor-element.elementor-element-5c62be3{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-30c0724{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-0506a3b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1126 .elementor-element.elementor-element-0506a3b{text-align:center;}.elementor-1126 .elementor-element.elementor-element-0506a3b .elementor-heading-title{font-family:"aller", Sans-serif;font-size:40px;letter-spacing:-2px;color:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-df49658 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1126 .elementor-element.elementor-element-df49658{text-align:center;}.elementor-1126 .elementor-element.elementor-element-df49658 .elementor-heading-title{font-family:"aller", Sans-serif;font-size:40px;letter-spacing:-2px;color:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-a8f23e8{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-d1e4bfc{--display:flex;}.elementor-1126 .elementor-element.elementor-element-2e137ed{font-family:"Open Sans", Sans-serif;color:#000000;}.elementor-1126 .elementor-element.elementor-element-2e137ed p{margin-block-end:12px;}.elementor-1126 .elementor-element.elementor-element-4f2f41e .elementor-button{background-color:#003057;fill:#FFFFFF;color:#FFFFFF;border-radius:24px 24px 24px 24px;}.elementor-1126 .elementor-element.elementor-element-4f2f41e .elementor-button:hover, .elementor-1126 .elementor-element.elementor-element-4f2f41e .elementor-button:focus{background-color:#EA7600;color:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-4f2f41e .elementor-button:hover svg, .elementor-1126 .elementor-element.elementor-element-4f2f41e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-f4df774{--display:flex;}.elementor-1126 .elementor-element.elementor-element-b8749fd{font-family:"Open Sans", Sans-serif;color:#000000;}.elementor-1126 .elementor-element.elementor-element-8fad756 .elementor-button{background-color:#003057;fill:#FFFFFF;color:#FFFFFF;border-radius:24px 24px 24px 24px;}.elementor-1126 .elementor-element.elementor-element-8fad756 .elementor-button:hover, .elementor-1126 .elementor-element.elementor-element-8fad756 .elementor-button:focus{background-color:#EA7600;color:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-8fad756 .elementor-button:hover svg, .elementor-1126 .elementor-element.elementor-element-8fad756 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-d8c573b{--display:flex;}.elementor-1126 .elementor-element.elementor-element-2eed7dc{font-family:"Open Sans", Sans-serif;color:#000000;}.elementor-1126 .elementor-element.elementor-element-b5bff44 .elementor-button{background-color:#003057;fill:#FFFFFF;color:#FFFFFF;border-radius:24px 24px 24px 24px;}.elementor-1126 .elementor-element.elementor-element-b5bff44 .elementor-button:hover, .elementor-1126 .elementor-element.elementor-element-b5bff44 .elementor-button:focus{background-color:#EA7600;color:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-b5bff44 .elementor-button:hover svg, .elementor-1126 .elementor-element.elementor-element-b5bff44 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-23b52cb{--display:flex;}.elementor-1126 .elementor-element.elementor-element-2ffec67{font-family:"Open Sans", Sans-serif;color:#000000;}.elementor-1126 .elementor-element.elementor-element-2ee2c83 .elementor-button{background-color:#003057;fill:#FFFFFF;color:#FFFFFF;border-radius:24px 24px 24px 24px;}.elementor-1126 .elementor-element.elementor-element-2ee2c83 .elementor-button:hover, .elementor-1126 .elementor-element.elementor-element-2ee2c83 .elementor-button:focus{background-color:#EA7600;color:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-2ee2c83 .elementor-button:hover svg, .elementor-1126 .elementor-element.elementor-element-2ee2c83 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1126 .elementor-element.elementor-element-5aa45e1{--n-accordion-title-font-size:20px;--n-accordion-item-title-distance-from-content:30px;--n-accordion-title-normal-color:#003057;--n-accordion-title-hover-color:#EA7600;--n-accordion-title-active-color:#EA7600;--n-accordion-icon-size:16px;--n-accordion-icon-normal-color:#EA7600;}.elementor-1126 .elementor-element.elementor-element-5aa45e1 > .elementor-widget-container{background-color:#F7F7F7;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}:where( .elementor-1126 .elementor-element.elementor-element-5aa45e1 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"aller", Sans-serif;}:where( .elementor-1126 .elementor-element.elementor-element-5aa45e1 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item ) > .e-con{border-style:none;}.elementor-1126 .elementor-element.elementor-element-f8f6f87{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-5da04d5{text-align:center;}.elementor-1126 .elementor-element.elementor-element-ab85f20{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-8a02d6c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1126 .elementor-element.elementor-element-0c67ccd{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-5246b15{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-40fadda{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-e4f8b1e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-8beeb61{text-align:center;}.elementor-1126 .elementor-element.elementor-element-1f625fa{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-126664a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-fbaadae .elementor-icon-wrapper{text-align:center;}.elementor-1126 .elementor-element.elementor-element-2acc4ad{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-e27a7af .elementor-icon-wrapper{text-align:center;}.elementor-1126 .elementor-element.elementor-element-0efcfca{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-7d0c64d .elementor-icon-wrapper{text-align:center;}.elementor-1126 .elementor-element.elementor-element-99dc0cb{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-dc7d61d .elementor-icon-wrapper{text-align:center;}.elementor-1126 .elementor-element.elementor-element-381e937{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-80cb1cd .elementor-icon-wrapper{text-align:center;}.elementor-1126 .elementor-element.elementor-element-7c978f9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1126 .elementor-element.elementor-element-ca25012 .elementor-icon-wrapper{text-align:center;}.elementor-1126 .elementor-element.elementor-element-77e3be2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-1881dce{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.72;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-1881dce::before, .elementor-1126 .elementor-element.elementor-element-1881dce > .elementor-background-video-container::before, .elementor-1126 .elementor-element.elementor-element-1881dce > .e-con-inner > .elementor-background-video-container::before, .elementor-1126 .elementor-element.elementor-element-1881dce > .elementor-background-slideshow::before, .elementor-1126 .elementor-element.elementor-element-1881dce > .e-con-inner > .elementor-background-slideshow::before, .elementor-1126 .elementor-element.elementor-element-1881dce > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-1126 .elementor-element.elementor-element-64b1da8 a.elementor-button:hover, .elementor-1126 .elementor-element.elementor-element-64b1da8 .elementor-button:hover{background-color:#FFFFFF;color:#003057;}.elementor-1126 .elementor-element.elementor-element-64b1da8 .hfe-infocard{text-align:center;}.elementor-1126 .elementor-element.elementor-element-64b1da8 a.elementor-button, .elementor-1126 .elementor-element.elementor-element-64b1da8 .elementor-button{color:#FFFFFF;border-radius:24px 24px 24px 24px;}.elementor-1126 .elementor-element.elementor-element-64b1da8 .elementor-button{border-style:none;}.elementor-1126 .elementor-element.elementor-element-64b1da8 .hfe-infocard-title{color:#FFFFFF;margin:0px 0px 10px 0px;}.elementor-1126 .elementor-element.elementor-element-64b1da8 .hfe-infocard-text{color:#FFFFFF;margin:0px 0px 0px 0px;}.elementor-1126 .elementor-element.elementor-element-64b1da8 .hfe-infocard-cta-link-style, .elementor-1126 .elementor-element.elementor-element-64b1da8 .hfe-button-wrapper{margin:10px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1126 .elementor-element.elementor-element-9177005:not(.elementor-motion-effects-element-type-background), .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-1126 .elementor-element.elementor-element-9177005{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:110px;--padding-bottom:110px;--padding-left:32px;--padding-right:32px;}.elementor-1126 .elementor-element.elementor-element-4343b3e{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:110px;--padding-bottom:110px;--padding-left:32px;--padding-right:32px;}.elementor-1126 .elementor-element.elementor-element-02a2c76{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1126 .elementor-element.elementor-element-49de100{--gap:60px 0px;--row-gap:60px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:32px;--padding-right:32px;}}@media(max-width:767px){.elementor-1126 .elementor-element.elementor-element-9177005:not(.elementor-motion-effects-element-type-background), .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-1126 .elementor-element.elementor-element-9177005{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:24px;--padding-right:24px;}.elementor-1126 .elementor-element.elementor-element-4343b3e{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:24px;--padding-right:24px;}.elementor-1126 .elementor-element.elementor-element-02a2c76{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1126 .elementor-element.elementor-element-49de100{--gap:40px 0px;--row-gap:40px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:60px;--padding-bottom:60px;--padding-left:24px;--padding-right:24px;}.elementor-1126 .elementor-element.elementor-element-30c0724{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-0506a3b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1126 .elementor-element.elementor-element-df49658 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1126 .elementor-element.elementor-element-a8f23e8{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1126 .elementor-element.elementor-element-ab85f20{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for text-editor, class: .elementor-element-e5611cd *//* Makes the liquid glass background hug the project title instead of stretching wide */ .elementor-1126 .elementor-element.elementor-element-e5611cd { width: fit-content !important; max-width: 90%; margin-left: auto; margin-right: auto; align-self: center; } /* Makes the glass effect area size to the text */ .elementor-1126 .elementor-element.elementor-element-e5611cd > .elementor-widget-container { width: fit-content !important; max-width: 100%; display: inline-flex !important; align-items: center; justify-content: center; padding: 8px 24px !important; } /* Removes extra paragraph spacing from the Text Editor widget */ .elementor-1126 .elementor-element.elementor-element-e5611cd p { margin: 0; } /* Keeps the title on one line on desktop */ .elementor-1126 .elementor-element.elementor-element-e5611cd .elementor-widget-container, .elementor-1126 .elementor-element.elementor-element-e5611cd .elementor-text-editor, .elementor-1126 .elementor-element.elementor-element-e5611cd p { white-space: nowrap; } /* Allows the title to wrap nicely on mobile */ @media (max-width: 767px) { .elementor-1126 .elementor-element.elementor-element-e5611cd { max-width: 92%; } .elementor-1126 .elementor-element.elementor-element-e5611cd .elementor-widget-container, .elementor-1126 .elementor-element.elementor-element-e5611cd .elementor-text-editor, .elementor-1126 .elementor-element.elementor-element-e5611cd p { white-space: normal; text-align: center; } } /* Project hero title shadow, matching the project card treatment */ .elementor-1126 .elementor-element.elementor-element-e5611cd p { margin: 0; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.45); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9177005 *//* ========================================================= HEIN INNER-PAGE HERO RESPONSIVE BACKGROUND + GRADIENT + SHAPE DIVIDER Apply directly to the outermost hero container. PURPOSE: - Stabilize Elementor background-image behaviour - Prevent unpredictable background positioning - Maintain consistent image coverage when resizing - Provide explicit focal-point controls - Add HEIN blue gradient overlay - Maintain responsive shape-divider depth ========================================================= */ /* ========================================================= 1. HERO ROOT / BACKGROUND IMAGE CONTROL IMAGE POSITION CONTROLS: --hein-hero-image-x Horizontal image position 0% = left 50% = center 100% = right --hein-hero-image-y Vertical image position 0% = top 50% = center 100% = bottom EXAMPLES: Center: 50% 50% Slightly right: 65% 50% Slightly lower: 50% 60% Upper-right: 70% 35% ========================================================= */ .elementor-1126 .elementor-element.elementor-element-9177005 { --hein-hero-curve-height: 58px; --hein-hero-image-x: 50%; --hein-hero-image-y: 70%; position: relative; isolation: isolate; overflow: hidden; /* * Explicitly control Elementor's background image. * * COVER is best practice for full-width hero imagery. * It guarantees the hero is always completely filled. * * Some cropping is unavoidable when the browser aspect * ratio differs from the image aspect ratio. */ background-size: cover !important; background-position: var(--hein-hero-image-x) var(--hein-hero-image-y) !important; background-repeat: no-repeat !important; /* * Avoid background-attachment: fixed. * * Fixed backgrounds can behave unpredictably during * resizing and are particularly unreliable on tablets * and mobile devices. */ background-attachment: scroll !important; /* * Safe fallback colour while the image loads or if * the image fails to load. */ background-color: #003057; } /* ========================================================= 2. DISABLE ELEMENTOR'S EXISTING OVERLAY The custom ::before gradient below replaces it. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-background-overlay { display: none !important; } /* ========================================================= 3. HEIN BLUE GRADIENT OVERLAY ========================================================= */ .elementor-1126 .elementor-element.elementor-element-9177005::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(0, 23, 42, 0.94) 0%, rgba(0, 48, 87, 0.86) 45%, rgba(51, 91, 141, 0.68) 100% ), linear-gradient( 180deg, rgba(0, 31, 56, 0.08) 0%, rgba(0, 31, 56, 0.26) 100% ); } /* ========================================================= 4. HERO CONTENT Keep all actual hero content above the gradient overlay. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-9177005 > .e-con-inner { position: relative; z-index: 2; } .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-element:not(.elementor-shape):not(.elementor-background-overlay) { position: relative; z-index: 2; } /* ========================================================= 5. SHAPE DIVIDER Elementor retains the selected divider SVG. CSS controls its rendered depth so the curve remains consistent rather than becoming excessively tall when the viewport changes. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-shape { position: absolute !important; left: 0 !important; z-index: 4 !important; display: block !important; width: 100% !important; height: var(--hein-hero-curve-height) !important; overflow: hidden !important; pointer-events: none; line-height: 0; } /* ========================================================= TOP SHAPE ========================================================= */ .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-shape-top { top: -1px !important; bottom: auto !important; } /* ========================================================= BOTTOM SHAPE ========================================================= */ .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-shape-bottom { top: auto !important; bottom: -1px !important; } /* ========================================================= SHAPE SVG ========================================================= */ .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-shape svg { position: relative; display: block; width: calc(100% + 1.3px) !important; min-width: calc(100% + 1.3px) !important; height: 100% !important; } /* ========================================================= SHAPE FILL Matches the white section immediately below the hero. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-9177005 > .elementor-shape .elementor-shape-fill { fill: #ffffff !important; } /* ========================================================= 6. TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-1126 .elementor-element.elementor-element-9177005 { --hein-hero-curve-height: 44px; /* * Tablet focal point. * * Keeping this explicitly defined prevents Elementor * responsive settings from unexpectedly changing the * image position. */ --hein-hero-image-x: 50%; --hein-hero-image-y: 50%; background-size: cover !important; background-position: var(--hein-hero-image-x) var(--hein-hero-image-y) !important; background-repeat: no-repeat !important; background-attachment: scroll !important; } } /* ========================================================= 7. MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-1126 .elementor-element.elementor-element-9177005 { --hein-hero-curve-height: 30px; /* * Mobile backgrounds become much taller relative to * their width, so the visible crop will naturally differ. * * Adjust these values per hero if the important subject * needs to remain visible. */ --hein-hero-image-x: 50%; --hein-hero-image-y: 50%; background-size: cover !important; background-position: var(--hein-hero-image-x) var(--hein-hero-image-y) !important; background-repeat: no-repeat !important; background-attachment: scroll !important; } /* --------------------------------------------------------- MOBILE GRADIENT --------------------------------------------------------- */ .elementor-1126 .elementor-element.elementor-element-9177005::before { background: linear-gradient( 90deg, rgba(0, 23, 42, 0.92) 0%, rgba(0, 48, 87, 0.86) 57%, rgba(43, 84, 132, 0.74) 100% ), linear-gradient( 180deg, rgba(0, 31, 56, 0.08) 0%, rgba(0, 31, 56, 0.28) 100% ); } } /* ========================================================= 8. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-1126 .elementor-element.elementor-element-9177005 { --hein-hero-curve-height: 28px; --hein-hero-image-x: 50%; --hein-hero-image-y: 50%; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4343b3e *//* ========================================================= HEIN CAREERS PAGE SECTION 01 . WHY HEIN Structure: Why HEIN └── Inner ├── Intro Row │ ├── Team Photo │ │ └── Team Photo │ └── Content │ ├── Eyebrow │ ├── Heading │ └── Ownership Copy │ └── Shawn Quote ├── Author │ ├── Shawn Headshot │ └── Details │ ├── Name │ └── Title │ └── Quote Content └── Text Editor ========================================================= */ /* ========================================================= OUTER SECTION Navigator: Why HEIN Class: hein-careers-intro ========================================================= */ .hein-careers-intro { position: relative; isolation: isolate; width: 100%; max-width: 100%; margin: 0; padding: 80px 24px; background-color: #ffffff; color: #003057; overflow: hidden; } /* ========================================================= FADED BLUEPRINT GRID Fades cleanly into white at the top and bottom ========================================================= */ .hein-careers-intro::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient( rgba(0, 48, 87, 0.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0, 48, 87, 0.045) 1px, transparent 1px ); background-size: 48px 48px; background-position: center top; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000000 14%, #000000 86%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000000 14%, #000000 86%, transparent 100% ); } /* ========================================================= INNER WRAPPER Navigator: Inner Class: hein-careers-intro__inner ========================================================= */ .hein-careers-intro__inner { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0; overflow: visible; } /* ========================================================= INTRO ROW Navigator: Intro Row Class: hein-careers-intro__row ========================================================= */ .hein-careers-intro__row { width: 100%; max-width: 100%; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 56px; overflow: visible; } /* ========================================================= TEAM PHOTO COLUMN Navigator: Team Photo Class: hein-careers-intro__media ========================================================= */ .hein-careers-intro__media { position: relative; flex: 0 0 calc(47% - 28px); width: calc(47% - 28px); max-width: calc(47% - 28px); min-width: 0; margin: 0; padding: 0; overflow: visible; } /* Orange architectural corner */ .hein-careers-intro__media::before { content: ""; position: absolute; top: -10px; left: -10px; width: 72px; height: 72px; border-top: 3px solid #EA7600; border-left: 3px solid #EA7600; z-index: 3; pointer-events: none; } /* Subtle blue architectural corner */ .hein-careers-intro__media::after { content: ""; position: absolute; right: -9px; bottom: -9px; width: 42px; height: 42px; border-right: 2px solid rgba(0, 48, 87, 0.22); border-bottom: 2px solid rgba(0, 48, 87, 0.22); z-index: 3; pointer-events: none; } /* ========================================================= TEAM IMAGE Navigator: Team Photo image Class: hein-careers-intro__image ========================================================= */ .hein-careers-intro__image { position: relative; z-index: 1; width: 100%; max-width: 100%; margin: 0 !important; padding: 0 !important; } .hein-careers-intro__image .elementor-widget-container { width: 100%; max-width: 100%; margin: 0; padding: 0; } .hein-careers-intro__image img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0; padding: 0; object-fit: contain; border: 0; border-radius: 0; box-shadow: 0 18px 42px rgba(0, 48, 87, 0.10); } /* ========================================================= INTRO CONTENT Navigator: Content Class: hein-careers-intro__content ========================================================= */ .hein-careers-intro__content { flex: 1 1 calc(53% - 28px); width: calc(53% - 28px); max-width: calc(53% - 28px); min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; overflow: visible; } /* ========================================================= EYEBROW Navigator: Eyebrow Class: hein-careers-intro__eyebrow ========================================================= */ .hein-careers-intro__eyebrow { position: relative; width: auto; margin: 0 0 14px 0 !important; padding: 0 0 0 28px !important; } .hein-careers-intro__eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 2px; background: #EA7600; transform: translateY(-50%); } .hein-careers-intro__eyebrow, .hein-careers-intro__eyebrow * { color: #EA7600 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } /* ========================================================= MAIN HEADING Navigator: Heading Class: hein-careers-intro__heading ========================================================= */ .hein-careers-intro__heading { width: 100%; margin: 0 0 24px 0 !important; padding: 0 !important; } .hein-careers-intro__heading .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: #003057 !important; font-size: clamp(34px, 3vw, 44px) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; } /* ========================================================= OWNERSHIP COPY Navigator: Ownership Copy Class: hein-careers-intro__copy ========================================================= */ .hein-careers-intro__copy { width: 100%; margin: 0 !important; padding: 0 !important; } .hein-careers-intro__copy .elementor-widget-container { margin: 0; padding: 0; } .hein-careers-intro__copy p { margin: 0 0 15px 0 !important; padding: 0; color: #4f5963 !important; font-size: 15.5px !important; font-weight: 400 !important; line-height: 1.7 !important; } .hein-careers-intro__copy p:last-child { margin-bottom: 0 !important; } /* ========================================================= SHAWN QUOTE Navigator: Shawn Quote Class: hein-careers-intro__quote ========================================================= */ .hein-careers-intro__quote { position: relative; width: 100%; max-width: 100%; margin: 56px 0 0 0; padding: 30px 34px; display: grid !important; grid-template-columns: 180px minmax(0, 1fr); column-gap: 42px; align-items: stretch; background: linear-gradient( 105deg, rgba(247, 249, 251, 0.98) 0%, rgba(250, 251, 252, 0.97) 38%, rgba(255, 255, 255, 0.95) 100% ); border: 1px solid rgba(0, 48, 87, 0.09); box-shadow: 0 16px 42px rgba(0, 48, 87, 0.055); overflow: hidden; } /* ========================================================= SMALL ARCHITECTURAL ORANGE CORNER ========================================================= */ .hein-careers-intro__quote::before { content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 52px; border-top: 3px solid #EA7600; border-left: 3px solid #EA7600; z-index: 3; pointer-events: none; } /* ========================================================= LARGE DECORATIVE QUOTATION MARK ========================================================= */ .hein-careers-intro__quote::after { content: "\201C"; position: absolute; top: 16px; right: 32px; z-index: 0; color: rgba(0, 48, 87, 0.055); font-family: Georgia, "Times New Roman", serif; font-size: 118px; font-weight: 700; line-height: 1; pointer-events: none; } /* ========================================================= AUTHOR COLUMN Navigator: Author Class: hein-careers-intro__author ========================================================= */ .hein-careers-intro__author { position: relative; z-index: 2; width: 180px !important; max-width: 180px !important; margin: 0 !important; padding: 20px 14px 18px !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 0 !important; text-align: center !important; background: rgba(0, 48, 87, 0.032); overflow: visible; } /* ========================================================= SHAWN HEADSHOT Navigator: Shawn Headshot Class: hein-careers-intro__author-photo ========================================================= */ .hein-careers-intro__author-photo { flex: 0 0 144px !important; width: 144px !important; max-width: 144px !important; height: 174px !important; margin: 0 0 18px 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 8px; } .hein-careers-intro__author-photo .elementor-widget-container { position: relative; width: 144px !important; height: 174px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 48, 87, 0.14); } .hein-careers-intro__author-photo img { position: absolute; width: 116% !important; max-width: none !important; height: 116% !important; left: 50%; top: 55%; margin: 0 !important; padding: 0 !important; object-fit: cover; object-position: center top; transform: translate(-50%, -50%); border-radius: 0; } /* ========================================================= AUTHOR DETAILS Navigator: Details Class: hein-careers-intro__author-details ========================================================= */ .hein-careers-intro__author-details { width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 5px !important; text-align: center !important; overflow: visible; } /* ========================================================= AUTHOR NAME Navigator: Name Class: hein-careers-intro__author-name ========================================================= */ .hein-careers-intro__author-name { width: 100% !important; margin: 0 !important; padding: 0 !important; } .hein-careers-intro__author-name, .hein-careers-intro__author-name * { margin: 0 !important; padding: 0 !important; color: #003057 !important; font-size: 15.5px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; } /* ========================================================= AUTHOR TITLE Navigator: Title Class: hein-careers-intro__author-title ========================================================= */ .hein-careers-intro__author-title { width: 100% !important; margin: 0 !important; padding: 0 !important; } .hein-careers-intro__author-title, .hein-careers-intro__author-title * { margin: 0 !important; padding: 0 !important; color: #EA7600 !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.45 !important; text-align: center !important; } /* ========================================================= QUOTE CONTENT Navigator: Quote Content Class: hein-careers-intro__quote-content ========================================================= */ .hein-careers-intro__quote-content { position: relative; z-index: 2; width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 !important; padding: 20px 28px 20px 0 !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: flex-start !important; gap: 0 !important; border: 0 !important; overflow: visible; } /* ========================================================= QUOTE TEXT Navigator: Text Editor Class: hein-careers-intro__quote-text ========================================================= */ .hein-careers-intro__quote-text { width: 100%; margin: 0 !important; padding: 0 !important; } .hein-careers-intro__quote-text .elementor-widget-container { width: 100%; margin: 0; padding: 0; } .hein-careers-intro__quote-text blockquote { width: 100%; max-width: 880px; margin: 0; padding: 0; border: 0; background: transparent; color: #344553; font-size: 17px; font-weight: 400; font-style: italic; line-height: 1.72; } /* Remove theme-generated quote decoration */ .hein-careers-intro__quote-text blockquote::before, .hein-careers-intro__quote-text blockquote::after { display: none; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .hein-careers-intro { padding: 64px 32px; } .hein-careers-intro::before { background-size: 44px 44px; } /* ===================================================== INTRO Proper full-width stacked tablet layout ===================================================== */ .hein-careers-intro__row { width: 100%; max-width: 100%; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 40px; } .hein-careers-intro__media { flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 !important; align-self: stretch; } .hein-careers-intro__image { width: 100% !important; max-width: 100% !important; } .hein-careers-intro__image .elementor-widget-container { width: 100% !important; max-width: 100% !important; } .hein-careers-intro__image img { width: 100% !important; max-width: 100% !important; height: auto !important; } .hein-careers-intro__content { flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; align-items: flex-start !important; align-self: stretch !important; } .hein-careers-intro__eyebrow { align-self: flex-start; } .hein-careers-intro__heading { width: 100%; max-width: 760px; } .hein-careers-intro__heading .elementor-heading-title { font-size: 36px !important; line-height: 1.12 !important; } .hein-careers-intro__copy { width: 100%; max-width: 820px; } .hein-careers-intro__copy p { font-size: 15.5px !important; line-height: 1.7 !important; } /* ===================================================== QUOTE ===================================================== */ .hein-careers-intro__quote { margin-top: 46px; padding: 26px; grid-template-columns: 154px minmax(0, 1fr); column-gap: 30px; } .hein-careers-intro__quote::after { top: 14px; right: 20px; font-size: 96px; } .hein-careers-intro__author { width: 154px !important; max-width: 154px !important; padding: 18px 12px !important; } .hein-careers-intro__author-photo { flex: 0 0 126px !important; width: 126px !important; max-width: 126px !important; height: 153px !important; margin-bottom: 16px !important; } .hein-careers-intro__author-photo .elementor-widget-container { width: 126px !important; height: 153px !important; } .hein-careers-intro__author-photo img { width: 116% !important; max-width: none !important; height: 116% !important; } .hein-careers-intro__quote-content { padding: 16px 22px 16px 0 !important; } .hein-careers-intro__quote-text blockquote { font-size: 15.5px; line-height: 1.68; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .hein-careers-intro { padding: 48px 20px; } .hein-careers-intro::before { background-size: 38px 38px; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000000 10%, #000000 90%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000000 10%, #000000 90%, transparent 100% ); } /* ===================================================== INTRO ===================================================== */ .hein-careers-intro__row { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 34px; } .hein-careers-intro__media, .hein-careers-intro__content { flex: none; width: 100%; max-width: 100%; } .hein-careers-intro__media::before { top: -7px; left: -7px; width: 56px; height: 56px; border-top-width: 2px; border-left-width: 2px; } .hein-careers-intro__media::after { right: -6px; bottom: -6px; width: 32px; height: 32px; } .hein-careers-intro__eyebrow { margin-bottom: 12px !important; } .hein-careers-intro__heading { width: 100%; max-width: 100%; margin-bottom: 18px !important; } .hein-careers-intro__heading .elementor-heading-title { font-size: 30px !important; line-height: 1.14 !important; } .hein-careers-intro__copy { width: 100%; max-width: 100%; } .hein-careers-intro__copy p { font-size: 15px !important; line-height: 1.65 !important; } /* ===================================================== SHAWN QUOTE ===================================================== */ .hein-careers-intro__quote { margin-top: 38px; padding: 24px 20px 26px; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 24px !important; background: rgba(250, 251, 252, 0.97); } .hein-careers-intro__quote::before { width: 40px; height: 40px; border-top-width: 2px; border-left-width: 2px; } .hein-careers-intro__quote::after { top: 14px; right: 16px; font-size: 78px; } .hein-careers-intro__author { width: 100% !important; max-width: 100% !important; padding: 14px !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 18px !important; text-align: left !important; } .hein-careers-intro__author-photo { flex: 0 0 88px !important; width: 88px !important; max-width: 88px !important; height: 108px !important; margin: 0 !important; } .hein-careers-intro__author-photo .elementor-widget-container { width: 88px !important; height: 108px !important; } .hein-careers-intro__author-photo img { width: 116% !important; max-width: none !important; height: 116% !important; } .hein-careers-intro__author-details { width: auto !important; align-items: flex-start !important; text-align: left !important; } .hein-careers-intro__author-name, .hein-careers-intro__author-name *, .hein-careers-intro__author-title, .hein-careers-intro__author-title * { text-align: left !important; } .hein-careers-intro__quote-content { width: 100% !important; padding: 0 4px 2px !important; border: 0 !important; } .hein-careers-intro__quote-text blockquote { font-size: 14.5px; line-height: 1.65; } }/* End custom CSS */ /* Start custom CSS for nested-accordion, class: .elementor-element-5aa45e1 *//* ========================================================= HEIN CAREERS PAGE JOBS ACCORDION Apply directly to the Jobs Accordion widget Class on widget: hein-job-accordion ========================================================= */ /* ========================================================= RESET ELEMENTOR / NESTED ACCORDION BACKGROUNDS Prevent Elementor from injecting white backgrounds ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1, .elementor-1126 .elementor-element.elementor-element-5aa45e1 > .elementor-widget-container, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-item, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item { background: transparent !important; background-color: transparent !important; } /* ========================================================= ACCORDION SHELL Restrained HEIN glass treatment ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 { --n-accordion-item-title-space: 0px !important; --n-accordion-gap: 0px !important; width: 100%; max-width: 100%; margin: 0; padding: 0; background: rgba(255, 255, 255, 0.075) !important; border: 1px solid rgba(255, 255, 255, 0.20) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 16px 38px rgba(0, 31, 56, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.13) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* Clean widget wrapper */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 > .elementor-widget-container { width: 100%; max-width: 100%; margin: 0; padding: 0; border-radius: 14px !important; overflow: hidden !important; } /* ========================================================= INNER ACCORDION WRAPPER Supports legacy Accordion and Nested Accordion ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion { width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important; overflow: hidden !important; } /* ========================================================= INDIVIDUAL ITEMS ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-item, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 0 !important; overflow: hidden !important; } /* Remove divider from final item */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-item:last-child, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:last-child { border-bottom: 0 !important; } /* ========================================================= CLOSED TITLE ROW ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 summary.e-n-accordion-item-title { position: relative; margin: 0 !important; padding: 21px 26px !important; background: rgba(255, 255, 255, 0.04) !important; background-color: rgba(255, 255, 255, 0.04) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; transition: background 0.22s ease, box-shadow 0.22s ease; } /* ========================================================= TITLE HOVER ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-title:hover, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title:hover, .elementor-1126 .elementor-element.elementor-element-5aa45e1 summary.e-n-accordion-item-title:hover { background: rgba(255, 255, 255, 0.075) !important; background-color: rgba(255, 255, 255, 0.075) !important; } /* ========================================================= KEYBOARD FOCUS ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-title:focus-visible, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title:focus-visible, .elementor-1126 .elementor-element.elementor-element-5aa45e1 summary.e-n-accordion-item-title:focus-visible { outline: 2px solid #EA7600 !important; outline-offset: -2px; background: rgba(255, 255, 255, 0.08) !important; } /* ========================================================= ACTIVE / OPEN TITLE Strong HEIN navy with orange construction accent ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-title.elementor-active, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item[open] > .e-n-accordion-item-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item[open] > summary.e-n-accordion-item-title { background: linear-gradient( 90deg, rgba(0, 31, 56, 0.96) 0%, rgba(0, 48, 87, 0.90) 56%, rgba(0, 38, 69, 0.94) 100% ) !important; box-shadow: inset 4px 0 0 #EA7600 !important; } /* ========================================================= TITLE TYPOGRAPHY ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title-text { color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -0.01em !important; text-decoration: none !important; } /* ========================================================= ACCORDION ICONS ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-icon, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-icon i, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-icon svg, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title-icon, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title-icon i, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title-icon svg { color: #EA7600 !important; fill: #EA7600 !important; flex-shrink: 0; transition: color 0.22s ease, fill 0.22s ease; } /* Slightly brighter icon when open */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-title.elementor-active .elementor-accordion-icon, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item[open] .e-n-accordion-item-title-icon { color: #ff8a13 !important; fill: #ff8a13 !important; } /* ========================================================= OPEN CONTENT AREA ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-content, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item > .e-con, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item > [role="region"] { margin: 0 !important; padding: 24px 28px 30px !important; background: rgba(0, 31, 56, 0.42) !important; background-color: rgba(0, 31, 56, 0.42) !important; color: rgba(255, 255, 255, 0.86) !important; border: 0 !important; border-top: 1px solid rgba(234, 118, 0, 0.30) !important; box-shadow: inset 4px 0 0 #EA7600 !important; font-size: 15px !important; line-height: 1.7 !important; } /* ========================================================= BODY COPY ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-content p, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item p { margin-top: 0 !important; margin-bottom: 14px !important; color: rgba(255, 255, 255, 0.84) !important; font-size: 15px !important; line-height: 1.7 !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-content p:last-child, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item p:last-child { margin-bottom: 0 !important; } /* ========================================================= STRONG TEXT ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 strong { color: #ffffff !important; font-weight: 700 !important; } /* ========================================================= LISTS ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 ul, .elementor-1126 .elementor-element.elementor-element-5aa45e1 ol { margin-top: 8px !important; margin-bottom: 18px !important; padding-left: 22px !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 li { margin-bottom: 7px !important; color: rgba(255, 255, 255, 0.84) !important; line-height: 1.6 !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 li:last-child { margin-bottom: 0 !important; } /* ========================================================= APPLY BUTTON Orange resting state, white hover state Consistent with HEIN CTA treatment ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-button { display: inline-flex; align-items: center; justify-content: center; width: auto !important; min-width: 0 !important; min-height: 40px; margin-top: 6px; padding: 10px 21px !important; background: #EA7600 !important; color: #ffffff !important; border: 1px solid #EA7600 !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 1px !important; text-transform: uppercase !important; box-shadow: none !important; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } /* Apply button hover */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-button:hover { background: #ffffff !important; border-color: #ffffff !important; color: #003057 !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 31, 56, 0.22) !important; } /* Apply button keyboard focus */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-button:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 3px; } /* ========================================================= FIRST ITEM CORNERS ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-item:first-child, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-item:first-child .elementor-tab-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:first-child, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:first-child > .e-n-accordion-item-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:first-child > summary.e-n-accordion-item-title { border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; } /* ========================================================= FINAL ITEM CORNERS WHEN CLOSED ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-item:last-child, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-item:last-child .elementor-tab-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:last-child, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:last-child > .e-n-accordion-item-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:last-child > summary.e-n-accordion-item-title { border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; } /* ========================================================= FINAL ITEM OPEN CONTENT CORNERS ========================================================= */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-item:last-child .elementor-tab-content, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:last-child > .e-con, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:last-child > [role="region"] { border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; overflow: hidden !important; } /* Remove lower radius from final title while open */ .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-item:last-child .elementor-tab-title.elementor-active, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:last-child[open] > .e-n-accordion-item-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item:last-child[open] > summary.e-n-accordion-item-title { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 summary.e-n-accordion-item-title { padding: 20px 23px !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title-text { font-size: 17px !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-content, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item > .e-con, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item > [role="region"] { padding: 22px 24px 28px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-1126 .elementor-element.elementor-element-5aa45e1 { border-radius: 12px !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 > .elementor-widget-container, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion { border-radius: 12px !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 summary.e-n-accordion-item-title { padding: 18px 19px !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-accordion-title, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item-title-text { font-size: 16px !important; line-height: 1.4 !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-content, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item > .e-con, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item > [role="region"] { padding: 19px 20px 25px !important; font-size: 14.5px !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-tab-content p, .elementor-1126 .elementor-element.elementor-element-5aa45e1 .e-n-accordion-item p { font-size: 14.5px !important; } .elementor-1126 .elementor-element.elementor-element-5aa45e1 .elementor-button { min-height: 39px; padding: 10px 18px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-49de100 *//* ========================================================= HEIN CAREERS PAGE SECTION 02 . CAREER OPPORTUNITIES Handles: - animated project-photo background - softened directional HEIN blue gradient - darker bottom-left depth - subtle orange blueprint grid - section intro - active / empty states - accordion positioning - centered general-interest CTA - balanced CTA copy wrapping - responsive layout Accordion-specific styling remains inside the Jobs Accordion widget's own Custom CSS. ========================================================= */ /* ========================================================= STATE UTILITY ========================================================= */ .hein-hidden { display: none !important; } /* ========================================================= OUTER SECTION Navigator: Career Opportunities Class: hein-careers-opportunities ========================================================= */ .hein-careers-opportunities { position: relative; width: 100%; max-width: 100%; margin: 0; padding: 80px 24px; background-color: #00172a; color: #ffffff; overflow: hidden; isolation: isolate; } /* Disable Elementor's built-in background overlay */ .hein-careers-opportunities .elementor-background-overlay { display: none !important; } /* Keep all content above photo / gradient / grid */ .hein-careers-opportunities > * { position: relative; z-index: 3; } /* ========================================================= ANIMATED BACKGROUND PHOTO ========================================================= */ .hein-careers-opportunities::before { content: ""; position: absolute; inset: -3%; z-index: 0; pointer-events: none; background-image: url("/wp-content/uploads/2026/06/Louise-Arbour-CEPEO-02-scaled.webp"); background-repeat: no-repeat; background-size: cover; background-position: center 48%; opacity: 1; transform: scale(1.07) translate3d(0, 0, 0); transform-origin: center center; animation: heinCareersPhotoDrift 40s ease-in-out infinite alternate; will-change: transform; } /* ========================================================= SOFTENED BLUE GRADIENT + ORANGE BLUEPRINT GRID Layers: 1. Horizontal orange grid 2. Vertical orange grid 3. Soft bottom-left navy depth 4. Directional HEIN blue gradient This version is slightly lighter than the previous treatment so more of the project photograph remains visible. ========================================================= */ .hein-careers-opportunities::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: /* Horizontal orange grid */ linear-gradient( rgba(234, 118, 0, 0.075) 1px, transparent 1px ), /* Vertical orange grid */ linear-gradient( 90deg, rgba(234, 118, 0, 0.075) 1px, transparent 1px ), /* Softened lower-left depth */ radial-gradient( circle at 4% 108%, rgba(0, 18, 34, 0.68) 0%, rgba(0, 23, 42, 0.40) 28%, rgba(0, 31, 56, 0.14) 48%, transparent 66% ), /* Softer directional HEIN gradient */ linear-gradient( 115deg, rgba(0, 23, 42, 0.87) 0%, rgba(0, 48, 87, 0.76) 52%, rgba(0, 62, 105, 0.70) 100% ); background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%; background-position: center top, center top, center center, center center; background-repeat: repeat, repeat, no-repeat, no-repeat; } /* ========================================================= BACKGROUND PHOTO MOVEMENT ========================================================= */ @keyframes heinCareersPhotoDrift { 0% { transform: scale(1.07) translate3d(0, 0, 0); } 30% { transform: scale(1.10) translate3d(-1.25%, 0.45%, 0); } 65% { transform: scale(1.085) translate3d(1%, -0.55%, 0); } 100% { transform: scale(1.11) translate3d(-0.7%, -0.35%, 0); } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .hein-careers-opportunities::before { animation: none !important; transform: scale(1.07) translate3d(0, 0, 0) !important; } } /* ========================================================= INNER WRAPPER Navigator: Inner Class: hein-careers-opportunities__inner ========================================================= */ .hein-careers-opportunities__inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0; overflow: visible; } /* ========================================================= SECTION INTRO Navigator: Intro Class: hein-careers-opportunities__intro ========================================================= */ .hein-careers-opportunities__intro { width: 100%; max-width: 780px; margin: 0 auto 40px auto; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0; text-align: center; } /* ========================================================= EYEBROW ========================================================= */ .hein-careers-opportunities__eyebrow { position: relative; width: auto; margin: 0 0 13px 0 !important; padding: 0 28px !important; } .hein-careers-opportunities__eyebrow::before, .hein-careers-opportunities__eyebrow::after { content: ""; position: absolute; top: 50%; width: 18px; height: 2px; background: #EA7600; transform: translateY(-50%); } .hein-careers-opportunities__eyebrow::before { left: 0; } .hein-careers-opportunities__eyebrow::after { right: 0; } .hein-careers-opportunities__eyebrow, .hein-careers-opportunities__eyebrow * { color: #EA7600 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } /* ========================================================= MAIN HEADING ========================================================= */ .hein-careers-opportunities__heading { width: 100%; margin: 0 0 18px 0 !important; padding: 0 !important; } .hein-careers-opportunities__heading .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: clamp(32px, 3vw, 44px) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; text-shadow: 0 2px 14px rgba(0, 23, 42, 0.24); } /* ========================================================= INTRO COPY ========================================================= */ .hein-careers-opportunities__copy { width: 100%; max-width: 720px; margin: 0 auto !important; padding: 0 !important; } .hein-careers-opportunities__copy .elementor-widget-container { margin: 0; padding: 0; } .hein-careers-opportunities__copy p { margin: 0 !important; padding: 0; color: rgba(255, 255, 255, 0.84) !important; font-size: 15.5px !important; font-weight: 400 !important; line-height: 1.7 !important; text-shadow: 0 1px 10px rgba(0, 23, 42, 0.18); } /* ========================================================= ACTIVE STATE ========================================================= */ .hein-careers-opportunities__active { width: 100%; max-width: 100%; margin: 0; padding: 0; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 34px !important; overflow: visible; } /* ========================================================= JOBS ACCORDION POSITIONING ========================================================= */ .hein-careers-opportunities__active .hein-job-accordion { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; align-self: stretch !important; } /* ========================================================= GENERAL INTEREST ========================================================= */ .hein-careers-opportunities__general { position: relative; flex: 0 0 auto; width: 100% !important; max-width: 820px !important; margin: 0 auto !important; padding: 28px 32px 30px !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 0 !important; text-align: center !important; background: rgba(0, 23, 42, 0.48); border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 10px; box-shadow: 0 14px 32px rgba(0, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.07); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); overflow: hidden; } /* ========================================================= GENERAL INTEREST ORANGE ACCENT ========================================================= */ .hein-careers-opportunities__general::before { content: ""; position: absolute; top: 0; left: 50%; width: 54px; height: 3px; background: #EA7600; transform: translateX(-50%); } /* ========================================================= GENERAL INTEREST COPY ========================================================= */ .hein-careers-opportunities__general-copy { flex: 0 1 auto !important; width: 100% !important; max-width: 670px !important; min-width: 0; margin: 0 auto 21px auto !important; padding: 0 !important; text-align: center !important; } .hein-careers-opportunities__general-copy .elementor-widget-container { width: 100% !important; max-width: 670px !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } .hein-careers-opportunities__general-copy p { width: 100% !important; max-width: 670px !important; margin: 0 auto !important; padding: 0 !important; color: rgba(255, 255, 255, 0.82) !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.65 !important; text-align: center !important; } .hein-careers-opportunities__general-copy strong { color: #ffffff !important; font-weight: 700 !important; } /* ========================================================= RESUME BUTTON ========================================================= */ .hein-careers-opportunities__resume-button { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; align-self: center !important; } .hein-careers-opportunities__resume-button .elementor-widget-container { width: auto !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } /* Default orange */ .hein-careers-opportunities__resume-button .elementor-button { display: inline-flex; align-items: center; justify-content: center; width: auto !important; min-width: 0 !important; min-height: 42px; padding: 11px 20px !important; background: #EA7600 !important; border: 1px solid #EA7600 !important; border-radius: 999px !important; color: #ffffff !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.9px !important; text-transform: uppercase !important; white-space: nowrap; box-shadow: none !important; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } /* Hover white */ .hein-careers-opportunities__resume-button .elementor-button:hover { background: #ffffff !important; border-color: #ffffff !important; color: #003057 !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 23, 42, 0.20) !important; } /* Keyboard focus */ .hein-careers-opportunities__resume-button .elementor-button:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 3px; } /* ========================================================= EMPTY STATE ========================================================= */ .hein-careers-opportunities__empty { position: relative; width: 100%; max-width: 100%; margin: 0; padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; text-align: center; background: rgba(0, 23, 42, 0.50); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 14px; box-shadow: 0 18px 42px rgba(0, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: hidden; } /* Orange empty-state detail */ .hein-careers-opportunities__empty::before { content: ""; display: block; width: 42px; height: 3px; margin: 0 0 22px 0; background: #EA7600; } /* ========================================================= EMPTY HEADING ========================================================= */ .hein-careers-opportunities__empty-heading { width: 100%; margin: 0 0 14px 0 !important; padding: 0 !important; } .hein-careers-opportunities__empty-heading .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 27px !important; font-weight: 700 !important; line-height: 1.2 !important; } /* ========================================================= EMPTY COPY ========================================================= */ .hein-careers-opportunities__empty-copy { width: 100%; max-width: 720px; margin: 0 0 26px 0 !important; padding: 0 !important; } .hein-careers-opportunities__empty-copy p { margin: 0 !important; padding: 0; color: rgba(255, 255, 255, 0.80) !important; font-size: 15px !important; line-height: 1.7 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .hein-careers-opportunities { padding: 64px 32px; } .hein-careers-opportunities::before { inset: -2.5%; } .hein-careers-opportunities::after { background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%; } .hein-careers-opportunities__intro { margin-bottom: 34px; } .hein-careers-opportunities__active { gap: 30px !important; } .hein-careers-opportunities__general { width: calc(100% - 40px) !important; max-width: 780px !important; padding: 26px 28px 28px !important; } .hein-careers-opportunities__general-copy, .hein-careers-opportunities__general-copy .elementor-widget-container, .hein-careers-opportunities__general-copy p { max-width: 620px !important; } .hein-careers-opportunities__empty { padding: 42px 32px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .hein-careers-opportunities { padding: 48px 20px; } /* Background */ .hein-careers-opportunities::before { inset: -3%; background-position: center center; animation-duration: 42s; } /* * Softer mobile version of the same treatment. */ .hein-careers-opportunities::after { background-image: linear-gradient( rgba(234, 118, 0, 0.070) 1px, transparent 1px ), linear-gradient( 90deg, rgba(234, 118, 0, 0.070) 1px, transparent 1px ), radial-gradient( circle at 5% 106%, rgba(0, 18, 34, 0.68) 0%, rgba(0, 23, 42, 0.36) 32%, transparent 64% ), linear-gradient( 115deg, rgba(0, 23, 42, 0.88) 0%, rgba(0, 48, 87, 0.78) 54%, rgba(0, 62, 105, 0.74) 100% ); background-size: 38px 38px, 38px 38px, 100% 100%, 100% 100%; } /* Intro */ .hein-careers-opportunities__intro { margin-bottom: 28px; } .hein-careers-opportunities__eyebrow { padding: 0 25px !important; } .hein-careers-opportunities__heading .elementor-heading-title { font-size: 30px !important; line-height: 1.14 !important; } .hein-careers-opportunities__copy p { font-size: 15px !important; line-height: 1.65 !important; } /* Active */ .hein-careers-opportunities__active { gap: 24px !important; } /* General Interest */ .hein-careers-opportunities__general { width: 100% !important; max-width: 100% !important; padding: 25px 20px 26px !important; justify-content: center !important; align-items: center !important; text-align: center !important; } .hein-careers-opportunities__general-copy { width: 100% !important; max-width: 100% !important; margin: 0 auto 18px auto !important; } .hein-careers-opportunities__general-copy .elementor-widget-container, .hein-careers-opportunities__general-copy p { width: 100% !important; max-width: 100% !important; } .hein-careers-opportunities__general-copy p { font-size: 14px !important; line-height: 1.6 !important; } /* Resume Button */ .hein-careers-opportunities__resume-button { width: auto !important; margin: 0 auto !important; } .hein-careers-opportunities__resume-button .elementor-button { width: auto !important; min-height: 40px; padding: 10px 18px !important; } /* Empty state */ .hein-careers-opportunities__empty { padding: 36px 22px; } .hein-careers-opportunities__empty-heading .elementor-heading-title { font-size: 23px !important; } .hein-careers-opportunities__empty-copy { margin-bottom: 22px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5246b15 *//* ========================================================= HEIN CAREERS PAGE SECTION 03 . BENEFITS / WHAT WE OFFER Design system: - standard HEIN section spacing - slightly more breathing room before CTA - light HEIN blueprint grid - grid softly fades at top and bottom - open editorial benefits layout - no card borders - no hover treatment ========================================================= */ /* ========================================================= OUTER SECTION Navigator: Careers - Benefits Class: hein-careers-benefits ========================================================= */ .hein-careers-benefits { position: relative; isolation: isolate; width: 100%; max-width: 100%; margin: 0; /* * Standard section spacing with slightly increased * bottom padding before the CTA. */ padding: 80px 24px 96px; /* * White base remains visible wherever * the blueprint grid fades away. */ background: #ffffff; color: #003057; overflow: hidden; } /* ========================================================= BLUEPRINT GRID BACKGROUND Fades softly at top and bottom ========================================================= */ .hein-careers-benefits::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* * LIGHT HEIN BLUEPRINT GRID */ background-image: linear-gradient( rgba(0, 48, 87, 0.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0, 48, 87, 0.045) 1px, transparent 1px ); background-size: 48px 48px; background-position: center top; /* * Fade the grid into white at both edges. * * 0% . invisible * 18% . fully visible * 82% . fully visible * 100% . invisible */ -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 18%, #000 82%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000 18%, #000 82%, transparent 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* ========================================================= INNER Navigator: Benefits - Inner Class: hein-careers-benefits__inner ========================================================= */ .hein-careers-benefits__inner { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; } /* ========================================================= INTRO Navigator: Benefits - Intro Class: hein-careers-benefits__intro ========================================================= */ .hein-careers-benefits__intro { width: 100%; max-width: 820px; margin: 0 auto 48px auto; padding: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0; text-align: center; } /* ========================================================= EYEBROW Class: hein-careers-benefits__eyebrow ========================================================= */ .hein-careers-benefits__eyebrow { position: relative; width: auto; margin: 0 0 13px 0 !important; padding: 0 28px !important; } .hein-careers-benefits__eyebrow::before, .hein-careers-benefits__eyebrow::after { content: ""; position: absolute; top: 50%; width: 18px; height: 2px; background: #EA7600; transform: translateY(-50%); } .hein-careers-benefits__eyebrow::before { left: 0; } .hein-careers-benefits__eyebrow::after { right: 0; } .hein-careers-benefits__eyebrow, .hein-careers-benefits__eyebrow * { color: #EA7600 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } /* ========================================================= MAIN HEADING Class: hein-careers-benefits__heading ========================================================= */ .hein-careers-benefits__heading { width: 100%; margin: 0 0 18px 0 !important; padding: 0 !important; } .hein-careers-benefits__heading .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: #003057 !important; font-size: clamp(32px, 3vw, 44px) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; } /* ========================================================= INTRO COPY Class: hein-careers-benefits__copy ========================================================= */ .hein-careers-benefits__copy { width: 100%; max-width: 780px; margin: 0 auto !important; padding: 0 !important; } .hein-careers-benefits__copy .elementor-widget-container { width: 100%; margin: 0; padding: 0; } .hein-careers-benefits__copy p { margin: 0 !important; padding: 0; color: #4f5963 !important; font-size: 15.5px !important; font-weight: 400 !important; line-height: 1.7 !important; } /* ========================================================= BENEFITS GRID Navigator: Benefits - Grid Class: hein-careers-benefits__grid Open editorial layout. No surrounding border. No cell borders. ========================================================= */ .hein-careers-benefits__grid { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 54px; row-gap: 48px; } /* ========================================================= INDIVIDUAL BENEFIT Class: hein-careers-benefits__item Static editorial content. No cards. No borders. No hover. ========================================================= */ .hein-careers-benefits__item { position: relative; width: 100% !important; max-width: 100% !important; margin: 0; padding: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } /* ========================================================= ICON Class: hein-careers-benefits__icon Icon tile uses fully opaque colours so the blueprint grid cannot show through behind the icon. ========================================================= */ .hein-careers-benefits__icon { width: auto !important; margin: 0 0 20px 0 !important; padding: 0 !important; } .hein-careers-benefits__icon .elementor-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; /* * Opaque equivalent of: * rgba(234, 118, 0, 0.085) * * This preserves the same soft-orange appearance * against white while completely masking the grid. */ background: #FDF3E9; /* * Opaque equivalent of: * rgba(234, 118, 0, 0.22) * * Prevents the grid from showing through the border. */ border: 1px solid #FAE1C7; border-radius: 6px; color: #EA7600; font-size: 22px; } .hein-careers-benefits__icon .elementor-icon i, .hein-careers-benefits__icon .elementor-icon svg { color: #EA7600 !important; fill: #EA7600 !important; } /* ========================================================= ITEM HEADING Class: hein-careers-benefits__item-heading ========================================================= */ .hein-careers-benefits__item-heading { width: 100%; margin: 0 0 11px 0 !important; padding: 0 !important; } .hein-careers-benefits__item-heading .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: #003057 !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; } /* ========================================================= ITEM COPY Class: hein-careers-benefits__item-copy ========================================================= */ .hein-careers-benefits__item-copy { width: 100%; margin: 0 !important; padding: 0 !important; } .hein-careers-benefits__item-copy .elementor-widget-container { width: 100%; margin: 0; padding: 0; } .hein-careers-benefits__item-copy p { margin: 0 !important; padding: 0; color: #59636d !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.65 !important; } /* ========================================================= TABLET Two-column benefits layout Slightly more space before CTA ========================================================= */ @media (max-width: 1024px) { .hein-careers-benefits { padding: 64px 32px 72px; } .hein-careers-benefits::before { background-size: 44px 44px; /* * Slightly shorter fade because the section * becomes taller as content wraps. */ -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 14%, #000 86%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000 14%, #000 86%, transparent 100% ); } .hein-careers-benefits__intro { margin-bottom: 42px; } .hein-careers-benefits__grid { max-width: 900px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; row-gap: 42px; } .hein-careers-benefits__heading .elementor-heading-title { font-size: 34px !important; } .hein-careers-benefits__icon .elementor-icon { width: 46px; height: 46px; font-size: 21px; } } /* ========================================================= MOBILE Single-column benefits layout Slightly more space before CTA ========================================================= */ @media (max-width: 767px) { .hein-careers-benefits { padding: 48px 20px 56px; } .hein-careers-benefits::before { background-size: 38px 38px; /* * Mobile section becomes much taller, so the * fade is kept close to the outer edges. */ -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 10%, #000 90%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000 10%, #000 90%, transparent 100% ); } .hein-careers-benefits__intro { margin-bottom: 34px; } .hein-careers-benefits__eyebrow { padding: 0 25px !important; } .hein-careers-benefits__heading .elementor-heading-title { font-size: 30px !important; line-height: 1.14 !important; } .hein-careers-benefits__copy p { font-size: 15px !important; line-height: 1.65 !important; } .hein-careers-benefits__grid { width: 100%; max-width: 100%; grid-template-columns: 1fr; column-gap: 0; row-gap: 34px; } .hein-careers-benefits__item { padding: 0; } .hein-careers-benefits__icon { margin-bottom: 17px !important; } .hein-careers-benefits__icon .elementor-icon { width: 44px; height: 44px; font-size: 20px; } .hein-careers-benefits__item-heading .elementor-heading-title { font-size: 18px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-77e3be2 *//* ========================================================= HEIN HOMEPAGE CTA COMPACT CLOSING SECTION --------------------------------------------------------- Apply this CSS to: CTA Section Required classes: hein-home-cta hein-cta-shell hein-cta-content DESIGN INTENT: - Compact closing statement - Static architectural/project photograph - Strong HEIN blue photographic wash - Restrained drafting grid - Curved transition from How We Work - Clear single CTA ========================================================= */ /* ========================================================= 1. DESIGN TOKENS + SECTION ROOT ========================================================= */ .elementor-1126 .elementor-element.elementor-element-77e3be2 { --hein-blue: #003057; --hein-blue-dark: #001f38; --hein-blue-deep: #00172a; --hein-orange: #f58220; --hein-orange-dark: #d86a08; --hein-white: #ffffff; --hein-divider-fill: #ffffff; /* ======================================================= CTA BACKGROUND PHOTOGRAPH Replace this URL with your chosen WordPress image. Example: /wp-content/uploads/2026/08/project-image.jpg A full https:// URL also works. ======================================================= */ --hein-cta-photo: url("/wp-content/uploads/2026/06/Canal-Building-Carleton-University-Featured-Image.webp"); position: relative; z-index: 2; isolation: isolate; display: block; width: 100%; margin: 0; /* * Significantly tighter than the previous CTA. * * Previous: * roughly 96–122px top * roughly 72–92px bottom * * Revised: * roughly 72–88px top * roughly 54–68px bottom */ padding: clamp(72px, 5.5vw, 88px) 0 clamp(54px, 4.5vw, 68px); overflow: hidden; color: var(--hein-white); background-color: var(--hein-blue-dark); } /* Predictable sizing */ .elementor-1126 .elementor-element.elementor-element-77e3be2, .elementor-1126 .elementor-element.elementor-element-77e3be2 *, .elementor-1126 .elementor-element.elementor-element-77e3be2 *::before, .elementor-1126 .elementor-element.elementor-element-77e3be2 *::after { box-sizing: border-box; } /* Remove Elementor default widget spacing */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .elementor-widget { margin-block-end: 0; } /* Hide Elementor's built-in overlay */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .elementor-background-overlay { display: none !important; } /* Keep actual content above background layers */ .elementor-1126 .elementor-element.elementor-element-77e3be2 > * { position: relative; z-index: 3; } /* ========================================================= 2. STATIC PROJECT PHOTOGRAPH --------------------------------------------------------- Dedicated photo layer underneath the blue treatment. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-77e3be2::before { content: ""; position: absolute; inset: -4%; z-index: 0; pointer-events: none; background-image: var(--hein-cta-photo); background-repeat: no-repeat; background-position: center center; background-size: cover; transform: scale(1.08) translate3d(0, 0, 0); transform-origin: center center; } /* ========================================================= 4. BLUE WASH + DRAFTING GRID --------------------------------------------------------- This combines the previous blue gradient and grid layers. The photograph remains visible, but deliberately subdued. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-77e3be2::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: /* * Fine horizontal grid */ linear-gradient( rgba(245, 130, 32, 0.055) 1px, transparent 1px ), /* * Fine vertical grid */ linear-gradient( 90deg, rgba(245, 130, 32, 0.055) 1px, transparent 1px ), /* * Major horizontal drafting grid */ linear-gradient( rgba(245, 130, 32, 0.085) 1px, transparent 1px ), /* * Major vertical drafting grid */ linear-gradient( 90deg, rgba(245, 130, 32, 0.085) 1px, transparent 1px ), /* * Subtle central illumination behind the copy */ radial-gradient( circle at 50% 26%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.018) 34%, transparent 62% ), /* * Restrained HEIN orange atmosphere */ radial-gradient( circle at 92% 110%, rgba(245, 130, 32, 0.065) 0%, transparent 38% ), /* * Main photographic HEIN-blue wash */ linear-gradient( 115deg, rgba(0, 23, 42, 0.95) 0%, rgba(0, 48, 87, 0.88) 52%, rgba(0, 67, 111, 0.84) 100% ); background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat; background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px, 100% 100%, 100% 100%, 100% 100%; background-position: center top; } /* ========================================================= 5. ELEMENTOR TOP SHAPE DIVIDER --------------------------------------------------------- Elementor still controls the actual chosen shape. CSS controls positioning, sizing and fill. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-77e3be2 > .elementor-shape-top { position: absolute !important; top: -1px !important; left: 0 !important; z-index: 5 !important; width: 100% !important; /* * Slightly reduced so the divider does not consume as much * visual height. */ height: clamp(32px, 3.5vw, 46px) !important; overflow: hidden !important; line-height: 0; pointer-events: none; } .elementor-1126 .elementor-element.elementor-element-77e3be2 > .elementor-shape-top svg { display: block; width: calc(100% + 1.3px) !important; min-width: calc(100% + 1.3px) !important; height: 100% !important; } .elementor-1126 .elementor-element.elementor-element-77e3be2 > .elementor-shape-top .elementor-shape-fill { fill: var(--hein-divider-fill) !important; } /* ========================================================= 6. CONTENT SHELL ========================================================= */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-shell { position: relative; z-index: 3; display: flex !important; width: min(calc(100% - 48px), 1200px) !important; max-width: 1200px !important; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin-inline: auto !important; padding: 0 !important; } /* Elementor inner-wrapper compatibility */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-shell > .e-con-inner { display: flex !important; width: 100% !important; max-width: none !important; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin: 0 !important; padding: 0 !important; } /* ========================================================= 7. CTA CONTENT --------------------------------------------------------- Reduced from the previous 940px overall width. This keeps the copy visually consolidated. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content { position: relative; z-index: 3; display: block; width: 100%; max-width: 780px; margin: 0 auto !important; padding: 0 !important; color: var(--hein-white); text-align: center; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content > .elementor-widget-container { width: 100%; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Reset common Info Card wrappers */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content [class*="info-card"], .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content [class*="infocard"] { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Remove any inherited decorative pseudo-elements */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content::before, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content::after { content: none !important; display: none !important; } /* ========================================================= 8. CTA HEADING --------------------------------------------------------- This is intentionally a slightly smaller tier than the major homepage section headings. Major homepage sections: maximum 50px Compact CTA: maximum 46px This keeps the CTA strong without making it feel like another full content section. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content :is( h1, h2, h3, h4, .elementor-heading-title, [class*="info-card-title"], [class*="info-card__title"], [class*="infocard-title"] ) { width: 100%; max-width: 760px; margin: 0 auto 14px !important; color: var(--hein-white) !important; font-family: "Aller", "Open Sans", Arial, sans-serif !important; font-size: clamp(34px, 3.3vw, 46px) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.03em !important; /* * Title case works well here because this is an action * statement rather than an informational section heading. */ text-transform: none !important; text-align: center !important; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; text-shadow: 0 2px 16px rgba(0, 23, 42, 0.26); } /* ========================================================= 9. CTA DESCRIPTION --------------------------------------------------------- Narrower measure and slightly tighter line-height. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content p { width: 100%; max-width: 700px; margin: 0 auto !important; color: rgba(255, 255, 255, 0.84) !important; font-family: "Open Sans", Arial, sans-serif !important; font-size: clamp(16px, 1.15vw, 17.5px) !important; font-weight: 400 !important; line-height: 1.65 !important; text-align: center !important; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: pretty; } /* ========================================================= 10. CTA BUTTON --------------------------------------------------------- Slightly tighter spacing while preserving enough weight for the final page action. ========================================================= */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href], .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button { display: inline-flex !important; min-width: 225px; min-height: 52px; align-items: center; justify-content: center; gap: 10px; margin: 23px auto 0 !important; padding: 13px 25px !important; color: var(--hein-white) !important; background: var(--hein-orange) !important; border: 1px solid var(--hein-orange) !important; border-radius: 999px !important; font-family: "Open Sans", Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; text-align: center !important; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 23, 42, 0.21) !important; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important; } /* CSS arrow */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href]::after, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button::after { content: "→"; display: inline-block; color: currentColor; font-size: 17px; line-height: 1; transition: transform 180ms ease; } /* Button hover */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href]:hover, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href]:focus-visible, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button:hover, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button:focus-visible { color: var(--hein-white) !important; background: var(--hein-orange-dark) !important; border-color: var(--hein-orange-dark) !important; box-shadow: 0 11px 24px rgba(0, 23, 42, 0.28) !important; transform: translateY(-2px); } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href]:hover::after, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href]:focus-visible::after, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button:hover::after, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button:focus-visible::after { transform: translateX(4px); } /* Keyboard focus */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href]:focus-visible, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.50); outline-offset: 4px; } /* Hide Elementor/widget icon because CSS supplies the arrow */ .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content .elementor-button-icon, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content [class*="button-icon"] { display: none !important; } /* ========================================================= 11. LAPTOP ========================================================= */ @media (max-width: 1024px) { .elementor-1126 .elementor-element.elementor-element-77e3be2 { padding: 70px 0 56px; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-shell { width: min(calc(100% - 40px), 1200px) !important; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content { max-width: 760px; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content :is( h1, h2, h3, h4, .elementor-heading-title, [class*="info-card-title"], [class*="info-card__title"], [class*="infocard-title"] ) { font-size: clamp(33px, 4vw, 43px) !important; } } /* ========================================================= 12. TABLET ========================================================= */ @media (max-width: 820px) { .elementor-1126 .elementor-element.elementor-element-77e3be2 { padding: 64px 0 54px; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-shell { width: min(calc(100% - 36px), 1200px) !important; } .elementor-1126 .elementor-element.elementor-element-77e3be2 > .elementor-shape-top { height: 31px !important; } } /* ========================================================= 13. MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-1126 .elementor-element.elementor-element-77e3be2 { padding: 58px 0 48px; } /* * Slightly stronger blue treatment on mobile because the * photograph occupies a much smaller visible area. */ .elementor-1126 .elementor-element.elementor-element-77e3be2::after { background-image: linear-gradient( rgba(245, 130, 32, 0.050) 1px, transparent 1px ), linear-gradient( 90deg, rgba(245, 130, 32, 0.050) 1px, transparent 1px ), linear-gradient( rgba(245, 130, 32, 0.075) 1px, transparent 1px ), linear-gradient( 90deg, rgba(245, 130, 32, 0.075) 1px, transparent 1px ), radial-gradient( circle at 50% 24%, rgba(255, 255, 255, 0.06) 0%, transparent 60% ), radial-gradient( circle at 92% 110%, rgba(245, 130, 32, 0.055) 0%, transparent 38% ), linear-gradient( 115deg, rgba(0, 23, 42, 0.96) 0%, rgba(0, 48, 87, 0.91) 55%, rgba(0, 67, 111, 0.87) 100% ); background-size: 25px 25px, 25px 25px, 125px 125px, 125px 125px, 100% 100%, 100% 100%, 100% 100%; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-shell { width: min(calc(100% - 28px), 1200px) !important; } .elementor-1126 .elementor-element.elementor-element-77e3be2 > .elementor-shape-top { height: 24px !important; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content :is( h1, h2, h3, h4, .elementor-heading-title, [class*="info-card-title"], [class*="info-card__title"], [class*="infocard-title"] ) { font-size: clamp(31px, 8.7vw, 39px) !important; line-height: 1.08 !important; margin-bottom: 13px !important; text-wrap: pretty; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content p { max-width: 580px; font-size: 16px !important; line-height: 1.62 !important; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href], .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button { width: 100%; min-width: 0; min-height: 52px; margin-top: 21px !important; } } /* ========================================================= 14. SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .elementor-1126 .elementor-element.elementor-element-77e3be2 { padding: 54px 0 44px; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content :is( h1, h2, h3, h4, .elementor-heading-title, [class*="info-card-title"], [class*="info-card__title"], [class*="infocard-title"] ) { font-size: clamp(29px, 8.5vw, 36px) !important; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href], .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button { padding: 13px 18px !important; font-size: 12px !important; } } /* ========================================================= 15. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href], .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href]::after, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button::after { transition: none !important; } .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href]:hover, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content a[href]:focus-visible, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button:hover, .elementor-1126 .elementor-element.elementor-element-77e3be2 .hein-cta-content button:focus-visible { transform: none; } }/* End custom CSS */