.elementor-1123 .elementor-element.elementor-element-4fc7498{--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:40px;--padding-right:40px;}.elementor-1123 .elementor-element.elementor-element-4fc7498:not(.elementor-motion-effects-element-type-background), .elementor-1123 .elementor-element.elementor-element-4fc7498 > .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/01/HEIN-Office-Lobby.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1123 .elementor-element.elementor-element-4fc7498::before, .elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-background-video-container::before, .elementor-1123 .elementor-element.elementor-element-4fc7498 > .e-con-inner > .elementor-background-video-container::before, .elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-background-slideshow::before, .elementor-1123 .elementor-element.elementor-element-4fc7498 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-astglobalcolor2 );--background-overlay:'';}.elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-shape-bottom svg, .elementor-1123 .elementor-element.elementor-element-4fc7498 > .e-con-inner > .elementor-shape-bottom svg{width:calc(0 + 1.3px);height:4em;}.elementor-1123 .elementor-element.elementor-element-fc52ede{--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-1123 .elementor-element.elementor-element-c0c1c75 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1123 .elementor-element.elementor-element-c0c1c75{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-1123 .elementor-element.elementor-element-c0c1c75 p{margin-block-end:0px;}.elementor-1123 .elementor-element.elementor-element-2ca3379{--display:flex;--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;--justify-content: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-1123 .elementor-element.elementor-element-d32f605{--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;--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-1123 .elementor-element.elementor-element-7373555{--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;--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-1123 .elementor-element.elementor-element-dd63dc0{--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-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1123 .elementor-element.elementor-element-fa0e1b8{--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;--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-1123 .elementor-element.elementor-element-239d408{text-align:center;}.elementor-1123 .elementor-element.elementor-element-65c5181{--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-1123 .elementor-element.elementor-element-c91a9b9{--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-1123 .elementor-element.elementor-element-43c1cad{--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;--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-1123 .elementor-element.elementor-element-0e01fde{--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:stretch;--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-1123 .elementor-element.elementor-element-4b60499{--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;--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-1123 .elementor-element.elementor-element-3b179d7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1123 .elementor-element.elementor-element-aa7259c{--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;--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-1123 .elementor-element.elementor-element-b3d895d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1123 .elementor-element.elementor-element-8f44b01{--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;--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-1123 .elementor-element.elementor-element-ed7b3ef > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1123 .elementor-element.elementor-element-bf1b915{--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;--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-1123 .elementor-element.elementor-element-e5b93cc > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1123 .elementor-element.elementor-element-fa91bb9{--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;--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-1123 .elementor-element.elementor-element-0c0b241 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1123 .elementor-element.elementor-element-e5c5b52{--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;--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-1123 .elementor-element.elementor-element-5176b18{--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-1123 .elementor-element.elementor-element-08c2867{--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-1123 .elementor-element.elementor-element-fca3244{--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;--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-1123 .elementor-element.elementor-element-32f63d4{--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;--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-1123 .elementor-element.elementor-element-a827900{--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;--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-1123 .elementor-element.elementor-element-402a4ae{--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;--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-1123 .elementor-element.elementor-element-3e2c48a{--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;--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-1123 .elementor-element.elementor-element-b026b24{--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;--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-1123 .elementor-element.elementor-element-f719753{--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-1123 .elementor-element.elementor-element-b016354{--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-1123 .elementor-element.elementor-element-20c955c{--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-1123 .elementor-element.elementor-element-2481ce3{--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;--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-1123 .elementor-element.elementor-element-7847d8e{--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-1123 .elementor-element.elementor-element-657caf6{--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-1123 .elementor-element.elementor-element-e622bbd{--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-1123 .elementor-element.elementor-element-4c7b2f3{--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-1123 .elementor-element.elementor-element-4c7b2f3::before, .elementor-1123 .elementor-element.elementor-element-4c7b2f3 > .elementor-background-video-container::before, .elementor-1123 .elementor-element.elementor-element-4c7b2f3 > .e-con-inner > .elementor-background-video-container::before, .elementor-1123 .elementor-element.elementor-element-4c7b2f3 > .elementor-background-slideshow::before, .elementor-1123 .elementor-element.elementor-element-4c7b2f3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1123 .elementor-element.elementor-element-4c7b2f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-1123 .elementor-element.elementor-element-80fb988 a.elementor-button:hover, .elementor-1123 .elementor-element.elementor-element-80fb988 .elementor-button:hover{background-color:#FFFFFF;color:#003057;}.elementor-1123 .elementor-element.elementor-element-80fb988 .hfe-infocard{text-align:center;}.elementor-1123 .elementor-element.elementor-element-80fb988 a.elementor-button, .elementor-1123 .elementor-element.elementor-element-80fb988 .elementor-button{color:#FFFFFF;border-radius:24px 24px 24px 24px;}.elementor-1123 .elementor-element.elementor-element-80fb988 .elementor-button{border-style:none;}.elementor-1123 .elementor-element.elementor-element-80fb988 .hfe-infocard-title{color:#FFFFFF;margin:0px 0px 10px 0px;}.elementor-1123 .elementor-element.elementor-element-80fb988 .hfe-infocard-text{color:#FFFFFF;margin:0px 0px 0px 0px;}.elementor-1123 .elementor-element.elementor-element-80fb988 .hfe-infocard-cta-link-style, .elementor-1123 .elementor-element.elementor-element-80fb988 .hfe-button-wrapper{margin:10px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1123 .elementor-element.elementor-element-4fc7498{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:110px;--padding-bottom:110px;--padding-left:32px;--padding-right:32px;}}@media(max-width:767px){.elementor-1123 .elementor-element.elementor-element-4fc7498{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:24px;--padding-right:24px;}}/* Start custom CSS for text-editor, class: .elementor-element-c0c1c75 *//* Makes the liquid glass background hug the project title instead of stretching wide */ .elementor-1123 .elementor-element.elementor-element-c0c1c75 { 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-1123 .elementor-element.elementor-element-c0c1c75 > .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-1123 .elementor-element.elementor-element-c0c1c75 p { margin: 0; } /* Keeps the title on one line on desktop */ .elementor-1123 .elementor-element.elementor-element-c0c1c75 .elementor-widget-container, .elementor-1123 .elementor-element.elementor-element-c0c1c75 .elementor-text-editor, .elementor-1123 .elementor-element.elementor-element-c0c1c75 p { white-space: nowrap; } /* Allows the title to wrap nicely on mobile */ @media (max-width: 767px) { .elementor-1123 .elementor-element.elementor-element-c0c1c75 { max-width: 92%; } .elementor-1123 .elementor-element.elementor-element-c0c1c75 .elementor-widget-container, .elementor-1123 .elementor-element.elementor-element-c0c1c75 .elementor-text-editor, .elementor-1123 .elementor-element.elementor-element-c0c1c75 p { white-space: normal; text-align: center; } } /* Project hero title shadow, matching the project card treatment */ .elementor-1123 .elementor-element.elementor-element-c0c1c75 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-4fc7498 *//* ========================================================= HEIN INNER-PAGE HERO GRADIENT RESPONSIVE SHAPE-DIVIDER VERSION Apply directly to the outermost hero container. No CSS class or fixed height is required. Shape-divider depth is explicitly controlled so the curve remains consistent across desktop, tablet and mobile. ========================================================= */ .elementor-1123 .elementor-element.elementor-element-4fc7498 { --hein-hero-curve-height: 58px; position: relative; isolation: isolate; overflow: hidden; } /* Disable Elementor's existing overlay */ .elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-background-overlay { display: none !important; } /* ========================================================= HEIN BLUE GRADIENT ========================================================= */ .elementor-1123 .elementor-element.elementor-element-4fc7498::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% ); } /* ========================================================= HERO CONTENT ========================================================= */ .elementor-1123 .elementor-element.elementor-element-4fc7498 > .e-con-inner { position: relative; z-index: 2; } .elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-element:not(.elementor-shape):not(.elementor-background-overlay) { position: relative; z-index: 2; } /* ========================================================= SHAPE DIVIDER Elementor retains the selected divider shape. CSS controls its rendered depth so the curve does not become excessively tall or dramatic on smaller screens. ========================================================= */ .elementor-1123 .elementor-element.elementor-element-4fc7498 > .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; } .elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-shape-top { top: -1px !important; bottom: auto !important; } .elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-shape-bottom { top: auto !important; bottom: -1px !important; } .elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-shape svg { position: relative; display: block; width: calc(100% + 1.3px) !important; min-width: calc(100% + 1.3px) !important; height: 100% !important; preserve-aspect-ratio: none; } /* Correct divider fill to match section below */ .elementor-1123 .elementor-element.elementor-element-4fc7498 > .elementor-shape .elementor-shape-fill { fill: #ffffff !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-1123 .elementor-element.elementor-element-4fc7498 { --hein-hero-curve-height: 44px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-1123 .elementor-element.elementor-element-4fc7498 { --hein-hero-curve-height: 30px; } .elementor-1123 .elementor-element.elementor-element-4fc7498::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% ); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-1123 .elementor-element.elementor-element-4fc7498 { --hein-hero-curve-height: 28px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-2ca3379 *//* ========================================================= HEIN ABOUT PAGE SECTION 01. OUR STORY CLEAN WHITE + FADING BLUEPRINT GRID VERSION Established HEIN website system: - Major headings: Aller - Eyebrows / body: Open Sans - HEIN Blue: #003057 - HEIN Orange: #f58220 - Content max width: 1200px REVISION: - Pure white section background - Removed all atmospheric background gradients - Retained blueprint grid - Grid now fades softly at top and bottom - Decorative 1988 remains HEIN blue at low opacity - Orange photo accents remain anchored to actual image ========================================================= */ /* ========================================================= 01. BOX SIZING ========================================================= */ .hein-story, .hein-story *, .hein-story *::before, .hein-story *::after { box-sizing: border-box; } /* Remove Elementor default widget spacing */ .hein-story .elementor-widget { margin-block-end: 0; } /* ========================================================= 02. OUTER SECTION PURE WHITE BASE Hero shape divider colour: #ffffff ========================================================= */ .hein-story { position: relative; width: 100%; margin: 0 !important; padding: 105px 30px 115px !important; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; overflow: hidden !important; isolation: isolate; } /* ========================================================= 03. BLUEPRINT GRID WITH TOP + BOTTOM FADE Grid remains strongest through the main body of the section, then softly disappears into white at both edges. ========================================================= */ .hein-story::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: /* Horizontal grid lines */ linear-gradient( rgba(0, 48, 87, 0.028) 1px, transparent 1px ), /* Vertical grid lines */ linear-gradient( 90deg, rgba(0, 48, 87, 0.028) 1px, transparent 1px ); background-size: 48px 48px; background-position: center top; background-repeat: repeat; /* ----------------------------------------------------- GRID FADE 0–12%: Fade grid in 12–88%: Full grid strength 88–100%: Fade grid out ----------------------------------------------------- */ -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 5%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0.45) 95%, rgba(0, 0, 0, 0) 100% ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 5%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0.45) 95%, rgba(0, 0, 0, 0) 100% ); } /* ========================================================= 04. REMOVE OLD BACKGROUND OVERLAY ========================================================= */ .hein-story::after { content: none !important; display: none !important; background: none !important; background-image: none !important; } /* ========================================================= 05. INNER 1200PX WRAPPER ========================================================= */ .hein-story__inner { position: relative; z-index: 2; display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); align-items: center !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; gap: 80px !important; overflow: visible !important; } /* ========================================================= 06. LEFT CONTENT ========================================================= */ .hein-story__content { position: relative; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 650px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ========================================================= 07. EYEBROW ========================================================= */ .hein-story__eyebrow { width: 100% !important; margin: 0 0 15px !important; padding: 0 !important; } .hein-story__eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; color: #f58220; font-family: "Open Sans", Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: 0.13em; text-transform: uppercase; } /* Standard orange eyebrow divider */ .hein-story__eyebrow .elementor-heading-title::before { content: ""; display: block; flex: 0 0 26px; width: 26px; height: 2px; background: #f58220; } /* ========================================================= 08. MAIN HEADING ========================================================= */ .hein-story__heading { width: 100% !important; margin: 0 0 26px !important; padding: 0 !important; } .hein-story__heading .elementor-heading-title { width: 100% !important; max-width: 640px; margin: 0 !important; padding: 0 !important; color: #003057; font-family: "Aller", Arial, sans-serif; font-size: clamp( 35px, 3.5vw, 50px ); font-weight: 700; line-height: 1.08; letter-spacing: -0.032em; } /* ========================================================= 09. STORY COPY ========================================================= */ .hein-story__intro, .hein-story__body, .hein-story__copy { width: 100% !important; max-width: 620px; margin: 0 !important; padding: 0 !important; color: #53697a; font-family: "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; } /* Legacy split intro/body spacing */ .hein-story__intro { margin-bottom: 22px !important; } /* Elementor wrapper resets */ .hein-story__intro .elementor-widget-container, .hein-story__body .elementor-widget-container, .hein-story__copy .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* Paragraph resets */ .hein-story__intro p, .hein-story__body p, .hein-story__copy p { margin: 0 !important; padding: 0 !important; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Multiple paragraph spacing */ .hein-story__intro p + p, .hein-story__body p + p, .hein-story__copy p + p { margin-top: 22px !important; } /* ========================================================= 10. RIGHT MEDIA COLUMN ========================================================= */ .hein-story__media { position: relative; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; width: 100% !important; max-width: 500px !important; min-width: 0 !important; margin: 0 0 0 auto !important; padding: 0 !important; overflow: visible !important; } /* ========================================================= 11. DECORATIVE 1988 HEIN BLUE: #003057 Transparent enough to remain secondary. ========================================================= */ .hein-story__media::before { content: "1988"; position: absolute; top: -82px; right: 18px; z-index: -1; color: #003057; font-family: "Aller", Arial, sans-serif; font-size: 108px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; opacity: 0.055; pointer-events: none; white-space: nowrap; } /* ========================================================= 12. PHOTO FRAME ========================================================= */ .hein-story__photo { position: relative; z-index: 2; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 500px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Disable legacy corner pseudos */ .hein-story__photo::before, .hein-story__photo::after { content: none !important; display: none !important; } /* ========================================================= 13. IMAGE WIDGET ========================================================= */ .hein-story__image { position: relative; z-index: 2; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border-radius: 18px; background: transparent; isolation: isolate; } /* ========================================================= 14. TOP-RIGHT ORANGE CORNER ========================================================= */ .hein-story__image::before { content: ""; position: absolute; top: -17px; right: -17px; width: 82px; height: 82px; border-top: 4px solid #f58220; border-right: 4px solid #f58220; border-bottom: 0; border-left: 0; z-index: -1; pointer-events: none; } /* ========================================================= 15. BOTTOM-LEFT ORANGE CORNER ========================================================= */ .hein-story__image::after { content: ""; position: absolute; bottom: -17px; left: -17px; width: 82px; height: 82px; border-bottom: 4px solid #f58220; border-left: 4px solid #f58220; border-top: 0; border-right: 0; z-index: -1; pointer-events: none; } /* ========================================================= 16. ELEMENTOR IMAGE WRAPPER ========================================================= */ .hein-story__image .elementor-widget-container { position: relative; z-index: 1; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: inherit; background: #e9edf0; box-shadow: 0 20px 45px rgba(0, 48, 87, 0.11), 0 4px 12px rgba(0, 48, 87, 0.06); } /* ========================================================= 17. ACTUAL IMAGE ========================================================= */ .hein-story__image img { display: block; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border-radius: inherit; } /* ========================================================= 18. CAPTION ========================================================= */ .hein-story__caption { width: 100% !important; margin: 17px 0 0 !important; padding: 0 2px !important; text-align: right; } .hein-story__caption, .hein-story__caption p { color: rgba(0, 48, 87, 0.58); font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; } .hein-story__caption p { margin: 0 !important; padding: 0 !important; } /* ========================================================= 19. SMALL DESKTOP ========================================================= */ @media (max-width: 1200px) { .hein-story { padding: 100px 36px 110px !important; } .hein-story__inner { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: 60px !important; } } /* ========================================================= 20. TABLET ========================================================= */ @media (max-width: 1024px) { .hein-story { padding: 90px 30px 95px !important; } .hein-story__inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr); gap: 45px !important; } .hein-story__heading .elementor-heading-title { font-size: clamp( 34px, 4.3vw, 44px ); } .hein-story__intro, .hein-story__body, .hein-story__copy, .hein-story__intro p, .hein-story__body p, .hein-story__copy p { font-size: 16px; } .hein-story__media::before { top: -62px; right: 12px; font-size: 80px; opacity: 0.05; } } /* ========================================================= 21. STACKED TABLET / MOBILE ========================================================= */ @media (max-width: 860px) { .hein-story { padding: 85px 30px 90px !important; } .hein-story__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 64px !important; } .hein-story__content { width: 100% !important; max-width: 680px !important; } .hein-story__media { width: 100% !important; max-width: 540px !important; margin: 0 auto !important; align-items: stretch !important; } .hein-story__caption { text-align: left; } } /* ========================================================= 22. MOBILE ========================================================= */ @media (max-width: 767px) { .hein-story { padding: 72px 20px 78px !important; } /* ----------------------------------------------------- Smaller mobile grid Same top/bottom fade remains automatically applied. ----------------------------------------------------- */ .hein-story::before { background-size: 40px 40px; } .hein-story__inner { gap: 54px !important; } /* ----------------------------------------------------- EYEBROW ----------------------------------------------------- */ .hein-story__eyebrow { margin-bottom: 14px !important; } .hein-story__eyebrow .elementor-heading-title { font-size: 11px; } .hein-story__eyebrow .elementor-heading-title::before { flex-basis: 22px; width: 22px; } /* ----------------------------------------------------- HEADING ----------------------------------------------------- */ .hein-story__heading { margin-bottom: 23px !important; } .hein-story__heading .elementor-heading-title { font-size: clamp( 32px, 9vw, 40px ); line-height: 1.1; } /* ----------------------------------------------------- COPY ----------------------------------------------------- */ .hein-story__intro { margin-bottom: 20px !important; } .hein-story__intro, .hein-story__body, .hein-story__copy, .hein-story__intro p, .hein-story__body p, .hein-story__copy p { font-size: 16px; line-height: 1.68; } /* ----------------------------------------------------- MEDIA ----------------------------------------------------- */ .hein-story__media { width: calc(100% - 20px) !important; } .hein-story__media::before { top: -52px; right: 8px; font-size: 66px; color: #003057; opacity: 0.045; } /* ----------------------------------------------------- TOP-RIGHT ORANGE CORNER ----------------------------------------------------- */ .hein-story__image::before { top: -12px; right: -12px; width: 56px; height: 56px; border-top-width: 3px; border-right-width: 3px; } /* ----------------------------------------------------- BOTTOM-LEFT ORANGE CORNER ----------------------------------------------------- */ .hein-story__image::after { bottom: -12px; left: -12px; width: 56px; height: 56px; border-bottom-width: 3px; border-left-width: 3px; } /* ----------------------------------------------------- IMAGE RADIUS ----------------------------------------------------- */ .hein-story__image, .hein-story__image .elementor-widget-container, .hein-story__image img { border-radius: 15px; } /* ----------------------------------------------------- CAPTION ----------------------------------------------------- */ .hein-story__caption { margin-top: 16px !important; padding: 0 !important; text-align: left; } } /* ========================================================= 23. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .hein-story { padding: 64px 18px 70px !important; } .hein-story__inner { gap: 48px !important; } .hein-story__heading .elementor-heading-title { font-size: clamp( 30px, 9vw, 36px ); } .hein-story__media { width: calc(100% - 16px) !important; } .hein-story__media::before { top: -44px; right: 6px; font-size: 58px; color: #003057; opacity: 0.045; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-65c5181 *//* ========================================================= HEIN ABOUT PAGE SECTION 02. OUR HISTORY PREMIUM TWO-ROW TIMELINE DESKTOP: 1988 ----------------------------- 2000 -------- orange fade orange fade ---- 2013 -------- 2018 -------- 2025 ● DESIGN DIRECTION: - Two milestones on row one - Three milestones on row two - No literal zig-zag connector - Subtle continuation treatment between rows - Restrained timeline lines - Controlled copy widths - Local navy scrim for readability - 2025 treated subtly as the current chapter - Architectural drafting grid removed for cleaner presentation ========================================================= */ /* ========================================================= 01. SECTION ROOT ========================================================= */ .hein-history { /* ----------------------------------------------------- HISTORY BACKGROUND PHOTO ----------------------------------------------------- */ --hein-history-photo: url("/wp-content/uploads/2026/07/RolandHein-Helmut-Mueller-01.webp"); --hein-history-photo-position: center 46%; /* ----------------------------------------------------- BRAND VARIABLES ----------------------------------------------------- */ --hein-blue: #003057; --hein-blue-mid: #003b68; --hein-blue-dark: #002b4d; --hein-blue-deep: #001f38; --hein-orange: #f58220; --hein-white: #ffffff; /* ----------------------------------------------------- TIMELINE VARIABLES ----------------------------------------------------- */ --hein-history-column-gap: 56px; --hein-history-row-gap: 64px; position: relative; isolation: isolate; width: 100%; margin: 0 !important; padding: 105px 30px 125px !important; color: var(--hein-white); background-color: var(--hein-blue); overflow: hidden !important; } /* ========================================================= 02. PREDICTABLE BOX SIZING ========================================================= */ .hein-history, .hein-history *, .hein-history *::before, .hein-history *::after { box-sizing: border-box; } /* Remove Elementor default widget spacing */ .hein-history .elementor-widget { margin-block-end: 0; } /* Disable Elementor background overlay */ .hein-history .elementor-background-overlay { display: none !important; } /* Keep actual section content above background layers */ .hein-history > * { position: relative; z-index: 3; } /* ========================================================= 03. ANIMATED BACKGROUND PHOTOGRAPH ========================================================= */ .hein-history::before { content: ""; position: absolute; /* * Overscan prevents exposed edges while * the photograph moves. */ inset: -3%; z-index: 0; pointer-events: none; background-image: var(--hein-history-photo); background-repeat: no-repeat; background-size: cover; background-position: var(--hein-history-photo-position); transform: scale(1.07) translate3d( 0, 0, 0 ); transform-origin: center center; animation: heinHistoryPhotoDrift 40s ease-in-out infinite alternate; will-change: transform; } /* ========================================================= 04. BLUE / NAVY PHOTOGRAPHIC WASH Architectural drafting grid removed. Remaining layers: - Deeper lower-left falloff - Gentle upper-left atmosphere - Main HEIN blue photographic wash ========================================================= */ .hein-history::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: /* Deeper lower-left falloff */ radial-gradient( ellipse at 0% 100%, rgba(0, 20, 38, 0.58) 0%, rgba(0, 28, 51, 0.38) 24%, rgba(0, 40, 70, 0.12) 52%, rgba(0, 48, 87, 0) 72% ), /* Gentle upper-left atmosphere */ radial-gradient( circle at 15% 22%, rgba(22, 84, 126, 0.25) 0%, rgba(22, 84, 126, 0.08) 30%, rgba(0, 48, 87, 0) 57% ), /* Main photographic wash */ linear-gradient( 135deg, rgba(0, 48, 87, 0.84) 0%, rgba(0, 59, 104, 0.79) 48%, rgba(0, 39, 70, 0.87) 100% ); background-repeat: no-repeat, no-repeat, no-repeat; background-size: 100% 100%, 100% 100%, 100% 100%; background-position: center center, center center, center center; } /* ========================================================= 05. BACKGROUND MOVEMENT ========================================================= */ @keyframes heinHistoryPhotoDrift { 0% { transform: scale(1.07) translate3d( -1.25%, 0, 0 ); } 100% { transform: scale(1.07) translate3d( 1.25%, 0, 0 ); } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .hein-history::before { animation: none !important; transform: scale(1.07) translate3d( 0, 0, 0 ) !important; } } /* ========================================================= 06. INNER WRAPPER ========================================================= */ .hein-history__inner { position: relative; z-index: 3; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; gap: 0 !important; overflow: visible !important; } /* ========================================================= 07. HISTORY HEADER ========================================================= */ .hein-history__header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; max-width: 760px !important; margin: 0 auto !important; padding: 0 !important; text-align: center; } /* ========================================================= 08. EYEBROW ========================================================= */ .hein-history__eyebrow { width: auto !important; margin: 0 auto 15px !important; padding: 0 !important; } .hein-history__eyebrow .elementor-heading-title { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0 !important; padding: 0 !important; color: var(--hein-orange); font-family: "Open Sans", Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: 0.13em; text-transform: uppercase; text-align: center; } /* Left accent */ .hein-history__eyebrow .elementor-heading-title::before { content: ""; display: block; flex: 0 0 26px; width: 26px; height: 2px; background: var(--hein-orange); } /* Right accent */ .hein-history__eyebrow .elementor-heading-title::after { content: ""; display: block; flex: 0 0 26px; width: 26px; height: 2px; background: var(--hein-orange); } /* ========================================================= 09. MAIN HEADING ========================================================= */ .hein-history__heading { width: 100% !important; margin: 0 auto 20px !important; padding: 0 !important; text-align: center; } .hein-history__heading .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: var(--hein-white); font-family: "Aller", "Open Sans", Arial, sans-serif; font-size: clamp( 36px, 3.6vw, 50px ); font-weight: 700; line-height: 1.08; letter-spacing: -0.032em; text-shadow: 0 2px 18px rgba( 0, 23, 42, 0.20 ); text-align: center; } /* ========================================================= 10. INTRO COPY ========================================================= */ .hein-history__intro { width: 100% !important; max-width: 690px; margin: 0 !important; padding: 0 !important; color: rgba( 255, 255, 255, 0.78 ); font-family: "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; text-align: left; text-shadow: 0 1px 12px rgba( 0, 23, 42, 0.16 ); } .hein-history__intro p { margin: 0 !important; padding: 0 !important; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* ========================================================= 11. TIMELINE WRAPPER SIX-COLUMN GRID ROW 1 1988 = columns 1-3 2000 = columns 4-6 ROW 2 2013 = columns 1-2 2018 = columns 3-4 2025 = columns 5-6 ========================================================= */ .hein-history__timeline { position: relative; isolation: isolate; display: grid !important; grid-template-columns: repeat( 6, minmax(0, 1fr) ) !important; grid-auto-flow: row !important; column-gap: var(--hein-history-column-gap) !important; row-gap: var(--hein-history-row-gap) !important; width: 100% !important; margin: 82px 0 0 !important; padding: 0 !important; overflow: visible !important; } /* Prevent Elementor ordering from interfering */ .hein-history__timeline > .hein-history__milestone { order: 0 !important; } /* ========================================================= 12. LOCAL TIMELINE SCRIM Soft navy atmosphere behind the milestone area only. No hard edges or card treatment. ========================================================= */ .hein-history__timeline::after { content: ""; position: absolute; z-index: 0; top: -45px; right: -80px; bottom: -75px; left: -80px; pointer-events: none; background: radial-gradient( ellipse at 50% 58%, rgba(0, 24, 44, 0.46) 0%, rgba(0, 28, 51, 0.34) 38%, rgba(0, 34, 61, 0.18) 68%, rgba(0, 48, 87, 0) 100% ); } /* ========================================================= 13. DESKTOP GRID PLACEMENT ========================================================= */ .hein-history__milestone--1988 { grid-column: 1 / 4 !important; grid-row: 1 !important; } .hein-history__milestone--2000 { grid-column: 4 / 7 !important; grid-row: 1 !important; } .hein-history__milestone--2013 { grid-column: 1 / 3 !important; grid-row: 2 !important; } .hein-history__milestone--2018 { grid-column: 3 / 5 !important; grid-row: 2 !important; } .hein-history__milestone--2025 { grid-column: 5 / 7 !important; grid-row: 2 !important; } /* ========================================================= 14. INDIVIDUAL MILESTONE ========================================================= */ .hein-history__milestone { position: relative; z-index: 2; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ========================================================= 15. TOP-ROW TIMELINE Restrained white line with subtle orange continuation treatment at the far right. ========================================================= */ .hein-history__timeline::before { content: ""; position: absolute; top: 57px; left: 0; right: 0; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.28) 86%, rgba(255, 255, 255, 0.30) 92%, rgba(245, 130, 32, 0.50) 97%, rgba(245, 130, 32, 0.82) 100% ); } /* ========================================================= 16. TIMELINE MARKERS ========================================================= */ .hein-history__milestone::before { content: ""; position: absolute; top: 51px; left: 0; width: 13px; height: 13px; border: 2px solid var(--hein-orange); border-radius: 50%; background: #00365f; box-shadow: 0 0 0 5px rgba( 0, 48, 87, 0.90 ); z-index: 4; pointer-events: none; } /* ========================================================= 17. RESET MILESTONE AFTER ELEMENTS ========================================================= */ .hein-history__milestone::after { content: none; display: none; } /* ========================================================= 18. SECOND-ROW TIMELINE Starts with an orange continuation treatment and settles into the restrained white rule. ========================================================= */ .hein-history__milestone--2013::after { content: "" !important; display: block !important; position: absolute; top: 57px; left: 0; width: calc( 300% + ( var(--hein-history-column-gap) * 2 ) ); height: 1px; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(245, 130, 32, 0.82) 0%, rgba(245, 130, 32, 0.48) 3%, rgba(255, 255, 255, 0.30) 8%, rgba(255, 255, 255, 0.27) 100% ); } /* ========================================================= 19. CURRENT CHAPTER 2025 Solid marker establishes the present-day destination without introducing a card or oversized treatment. ========================================================= */ .hein-history__milestone--2025::before { background: var(--hein-orange); border-color: var(--hein-orange); box-shadow: 0 0 0 5px rgba( 0, 48, 87, 0.90 ), 0 0 16px rgba( 245, 130, 32, 0.26 ); } .hein-history__milestone--2025 .hein-history__year .elementor-heading-title { text-shadow: 0 2px 12px rgba( 0, 23, 42, 0.18 ), 0 0 16px rgba( 245, 130, 32, 0.16 ); } /* ========================================================= 20. YEAR ========================================================= */ .hein-history__year { width: 100% !important; margin: 0 0 48px !important; padding: 0 !important; } .hein-history__year .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: var(--hein-orange); font-family: "Aller", "Open Sans", Arial, sans-serif; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 2px 12px rgba( 0, 23, 42, 0.18 ); } /* ========================================================= 21. MILESTONE TITLE ========================================================= */ .hein-history__milestone-title { width: 100% !important; margin: 0 0 11px !important; padding: 0 !important; } .hein-history__milestone-title .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: var(--hein-white); font-family: "Aller", "Open Sans", Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; text-shadow: 0 2px 12px rgba( 0, 23, 42, 0.18 ); } /* ========================================================= 22. MILESTONE COPY ========================================================= */ .hein-history__milestone-copy { width: 100% !important; margin: 0 !important; padding: 0 !important; color: rgba( 255, 255, 255, 0.72 ); font-family: "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.68; text-shadow: 0 1px 10px rgba( 0, 23, 42, 0.18 ); } .hein-history__milestone-copy p { margin: 0 !important; padding: 0 !important; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* ========================================================= 23. CONTROLLED TOP-ROW COPY WIDTH ========================================================= */ .hein-history__milestone--1988 .hein-history__milestone-copy, .hein-history__milestone--2000 .hein-history__milestone-copy { max-width: 430px; } /* ========================================================= 24. CONTROLLED SECOND-ROW COPY WIDTH ========================================================= */ .hein-history__milestone--2013 .hein-history__milestone-copy, .hein-history__milestone--2018 .hein-history__milestone-copy, .hein-history__milestone--2025 .hein-history__milestone-copy { max-width: 320px; } /* ========================================================= 25. SMALL DESKTOP ========================================================= */ @media (max-width: 1200px) { .hein-history { --hein-history-column-gap: 42px; --hein-history-row-gap: 62px; padding: 100px 36px 115px !important; } .hein-history__timeline { margin-top: 76px !important; } .hein-history__timeline::after { right: -55px; left: -55px; } .hein-history__milestone-title .elementor-heading-title { font-size: 19px; } .hein-history__milestone-copy { font-size: 16px; } .hein-history__milestone--1988 .hein-history__milestone-copy, .hein-history__milestone--2000 .hein-history__milestone-copy { max-width: 400px; } .hein-history__milestone--2013 .hein-history__milestone-copy, .hein-history__milestone--2018 .hein-history__milestone-copy, .hein-history__milestone--2025 .hein-history__milestone-copy { max-width: 300px; } } /* ========================================================= 26. TABLET LANDSCAPE KEEP 2 + 3 WHILE SPACE ALLOWS ========================================================= */ @media (max-width: 1024px) { .hein-history { --hein-history-column-gap: 30px; --hein-history-row-gap: 60px; padding: 90px 30px 100px !important; } .hein-history__heading .elementor-heading-title { font-size: clamp( 34px, 4.3vw, 44px ); } .hein-history__timeline { margin-top: 68px !important; } .hein-history__year .elementor-heading-title { font-size: 25px; } .hein-history__milestone-title .elementor-heading-title { font-size: 18px; } .hein-history__milestone-copy { font-size: 15.5px; line-height: 1.68; } .hein-history__milestone--1988 .hein-history__milestone-copy, .hein-history__milestone--2000 .hein-history__milestone-copy { max-width: 380px; } .hein-history__milestone--2013 .hein-history__milestone-copy, .hein-history__milestone--2018 .hein-history__milestone-copy, .hein-history__milestone--2025 .hein-history__milestone-copy { max-width: none; } } /* ========================================================= 27. TABLET PORTRAIT 2 + 2 + 1 ========================================================= */ @media (max-width: 860px) { .hein-history { padding: 85px 30px 90px !important; } .hein-history__timeline { display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; column-gap: 45px !important; row-gap: 55px !important; margin-top: 60px !important; } /* ----------------------------------------------------- Tablet milestone placement ----------------------------------------------------- */ .hein-history__milestone--1988 { grid-column: 1 !important; grid-row: 1 !important; } .hein-history__milestone--2000 { grid-column: 2 !important; grid-row: 1 !important; } .hein-history__milestone--2013 { grid-column: 1 !important; grid-row: 2 !important; } .hein-history__milestone--2018 { grid-column: 2 !important; grid-row: 2 !important; } .hein-history__milestone--2025 { grid-column: 1 / -1 !important; grid-row: 3 !important; width: calc( (100% - 45px) / 2 ) !important; justify-self: center !important; } /* Remove desktop top timeline */ .hein-history__timeline::before { display: none; } /* Softer local scrim on tablet */ .hein-history__timeline::after { top: -35px; right: -35px; bottom: -50px; left: -35px; background: radial-gradient( ellipse at center, rgba(0, 24, 44, 0.34) 0%, rgba(0, 28, 51, 0.20) 62%, rgba(0, 48, 87, 0) 100% ); } /* Remove second-row desktop timeline */ .hein-history__milestone--2013::after { content: none !important; display: none !important; } /* * Each milestone receives its own restrained line * at tablet widths. */ .hein-history__milestone { background: linear-gradient( to right, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) ) left 57px / 100% 1px no-repeat; } .hein-history__milestone::before { top: 51px; } .hein-history__milestone-copy, .hein-history__milestone--1988 .hein-history__milestone-copy, .hein-history__milestone--2000 .hein-history__milestone-copy, .hein-history__milestone--2013 .hein-history__milestone-copy, .hein-history__milestone--2018 .hein-history__milestone-copy, .hein-history__milestone--2025 .hein-history__milestone-copy { max-width: none; } } /* ========================================================= 28. MOBILE TRUE VERTICAL TIMELINE ========================================================= */ @media (max-width: 767px) { .hein-history { padding: 72px 20px 80px !important; } /* ----------------------------------------------------- Header ----------------------------------------------------- */ .hein-history__header { align-items: center !important; max-width: none !important; margin: 0 auto !important; text-align: center; } .hein-history__eyebrow { margin-bottom: 14px !important; } .hein-history__eyebrow .elementor-heading-title { justify-content: center; font-size: 11px; } .hein-history__eyebrow .elementor-heading-title::before, .hein-history__eyebrow .elementor-heading-title::after { flex-basis: 22px; width: 22px; } .hein-history__heading { margin-bottom: 18px !important; } .hein-history__heading .elementor-heading-title { font-size: clamp( 32px, 9vw, 40px ); line-height: 1.1; } .hein-history__intro { max-width: 600px; margin: 0 !important; font-size: 15.5px; line-height: 1.7; text-align: left; } /* ----------------------------------------------------- Mobile timeline ----------------------------------------------------- */ .hein-history__timeline { display: grid !important; grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 52px !important; padding-left: 0 !important; } /* Remove local desktop/tablet scrim */ .hein-history__timeline::after { display: none; } /* * Main pseudo-element becomes vertical connecting line. */ .hein-history__timeline::before { display: block; top: 8px; bottom: 8px; left: 6px; right: auto; width: 1px; height: auto; background: linear-gradient( 180deg, rgba(245, 130, 32, 0.45) 0%, rgba(255, 255, 255, 0.28) 12%, rgba(255, 255, 255, 0.28) 88%, rgba(245, 130, 32, 0.35) 100% ); } /* ----------------------------------------------------- Explicit chronological mobile order ----------------------------------------------------- */ .hein-history__milestone--1988 { grid-column: 1 !important; grid-row: 1 !important; } .hein-history__milestone--2000 { grid-column: 1 !important; grid-row: 2 !important; } .hein-history__milestone--2013 { grid-column: 1 !important; grid-row: 3 !important; } .hein-history__milestone--2018 { grid-column: 1 !important; grid-row: 4 !important; } .hein-history__milestone--2025 { grid-column: 1 !important; grid-row: 5 !important; } /* Reset milestone layout */ .hein-history__milestone { position: relative; width: 100% !important; min-height: 0; margin: 0 !important; padding: 0 0 46px 40px !important; background: none; justify-self: stretch !important; } /* Remove desktop second-row line */ .hein-history__milestone--2013::after { content: none !important; display: none !important; } .hein-history__milestone:last-child { padding-bottom: 0 !important; } /* Vertical marker */ .hein-history__milestone::before { top: 7px; left: 0; width: 13px; height: 13px; border-width: 2px; box-shadow: 0 0 0 4px rgba( 0, 48, 87, 0.92 ); } /* Maintain subtle current-state marker */ .hein-history__milestone--2025::before { background: var(--hein-orange); border-color: var(--hein-orange); box-shadow: 0 0 0 4px rgba( 0, 48, 87, 0.92 ), 0 0 14px rgba( 245, 130, 32, 0.22 ); } /* ----------------------------------------------------- Mobile year ----------------------------------------------------- */ .hein-history__year { margin: 0 0 9px !important; } .hein-history__year .elementor-heading-title { font-size: 23px; line-height: 1; } /* ----------------------------------------------------- Mobile title ----------------------------------------------------- */ .hein-history__milestone-title { margin-bottom: 9px !important; } .hein-history__milestone-title .elementor-heading-title { font-size: 19px; line-height: 1.25; } /* ----------------------------------------------------- Mobile copy ----------------------------------------------------- */ .hein-history__milestone-copy, .hein-history__milestone--1988 .hein-history__milestone-copy, .hein-history__milestone--2000 .hein-history__milestone-copy, .hein-history__milestone--2013 .hein-history__milestone-copy, .hein-history__milestone--2018 .hein-history__milestone-copy, .hein-history__milestone--2025 .hein-history__milestone-copy { width: 100% !important; max-width: 560px; font-size: 15.5px; line-height: 1.68; } } /* ========================================================= 29. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .hein-history { padding: 64px 18px 70px !important; } .hein-history__heading .elementor-heading-title { font-size: clamp( 30px, 9vw, 36px ); } .hein-history__intro { font-size: 15px; } .hein-history__timeline { margin-top: 46px !important; } .hein-history__milestone { width: 100% !important; padding-left: 36px !important; padding-bottom: 42px !important; } .hein-history__milestone:last-child { padding-bottom: 0 !important; } .hein-history__milestone-title .elementor-heading-title { font-size: 18px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b016354 *//* ========================================================= HEIN ABOUT PAGE SECTION 04. OUR EXPERIENCE TRANSPARENT VERSION FOR SHARED MASTER BACKGROUND MASTER PARENT: .hein-ownership-experience IMPORTANT: - This section creates NO section background - No moving background photograph - No section-level gradient - No section-level blueprint grid - No section-level pseudo backgrounds - Parent master container controls the background - Typography converted back to light-section colours Established HEIN website system: - Major headings: Aller - Eyebrows / body: Open Sans - HEIN Blue: #003057 - HEIN Orange: #f58220 - Content max width: 1200px STRUCTURE: OUR EXPERIENCE └── Experience Inner ├── Experience Media │ └── Experience Collage │ ├── Experience Photo 01 │ ├── Experience Photo 02 │ └── Experience Photo 03 │ └── Experience Content ├── Experience Eyebrow ├── Experience Heading ├── Experience Intro └── Experience Stats ├── Experience Stat 01 │ ├── Stat Number 01 │ └── Stat Label 01 │ ├── Experience Stat 02 │ ├── Stat Number 02 │ └── Stat Label 02 │ └── Experience Stat 03 ├── Stat Number 03 └── Stat Label 03 ========================================================= */ /* ========================================================= 01. SECTION VARIABLES + ROOT ========================================================= */ .hein-experience { --hein-blue: #003057; --hein-blue-mid: #0d4d78; --hein-blue-dark: #002744; --hein-orange: #f58220; --hein-text: #53697a; --hein-text-dark: #344f62; --hein-white: #ffffff; position: relative; width: 100%; margin: 0 !important; padding: 105px 30px 115px !important; /* ----------------------------------------------------- CRITICAL: MASTER CONTAINER CONTROLS BACKGROUND ----------------------------------------------------- */ background: transparent !important; background-color: transparent !important; background-image: none !important; overflow: visible !important; } /* ========================================================= 02. BOX SIZING ========================================================= */ .hein-experience, .hein-experience *, .hein-experience *::before, .hein-experience *::after { box-sizing: border-box; } /* Remove Elementor default widget spacing */ .hein-experience .elementor-widget { margin-block-end: 0; } /* ========================================================= 03. REMOVE ALL EXPERIENCE SECTION BACKGROUND PSEUDOS The old CSS used: ::before = moving photograph ::after = blue gradient + grid Both are now completely disabled. ========================================================= */ .hein-experience::before, .hein-experience::after { content: none !important; display: none !important; background: none !important; background-image: none !important; animation: none !important; } /* ========================================================= 04. INNER 1200PX WRAPPER ========================================================= */ .hein-experience__inner { position: relative; z-index: 2; display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr); align-items: center !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; gap: 82px !important; overflow: visible !important; } /* ========================================================= 05. EXPERIENCE MEDIA ========================================================= */ .hein-experience__media { position: relative; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ========================================================= 06. COLLAGE ========================================================= */ .hein-experience__collage { position: relative; display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ); grid-template-rows: minmax(0, 1.2fr) minmax(0, 0.8fr); width: 100% !important; height: 560px; margin: 0 !important; padding: 0 !important; gap: 14px !important; background: transparent !important; overflow: visible !important; } /* ========================================================= 07. ORANGE TOP-LEFT ARCHITECTURAL CORNER ========================================================= */ .hein-experience__collage::before { content: ""; position: absolute; top: -18px; left: -18px; width: 88px; height: 88px; border-top: 4px solid var(--hein-orange); border-left: 4px solid var(--hein-orange); z-index: 0; pointer-events: none; } /* ========================================================= 08. ORANGE BOTTOM-RIGHT ARCHITECTURAL CORNER ========================================================= */ .hein-experience__collage::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 88px; height: 88px; border-right: 4px solid var(--hein-orange); border-bottom: 4px solid var(--hein-orange); z-index: 0; pointer-events: none; } /* ========================================================= 09. ALL COLLAGE PHOTOS ========================================================= */ .hein-experience__photo { position: relative; z-index: 1; width: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(0, 48, 87, 0.08); border-radius: 16px; /* Fallback only, hidden when image loads */ background: #e8eef2; box-shadow: 0 18px 42px rgba(0, 48, 87, 0.11); } /* ========================================================= 10. ELEMENTOR IMAGE WRAPPER ========================================================= */ .hein-experience__photo .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: inherit; } /* ========================================================= 11. ACTUAL IMAGE ========================================================= */ .hein-experience__photo img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover; object-position: center center; border-radius: inherit; } /* ========================================================= 12. PHOTO 01 LARGE UPPER IMAGE ========================================================= */ .hein-experience__photo--01 { grid-column: 1 / -1; grid-row: 1; } /* Keep the large top image anchored to the top-centre. This preserves signage / important content near the top while the image still fills the collage frame. */ .hein-experience__photo--01 img { object-position: center top !important; } /* ========================================================= 13. PHOTO 02 LOWER LEFT ========================================================= */ .hein-experience__photo--02 { grid-column: 1; grid-row: 2; } /* ========================================================= 14. PHOTO 03 LOWER RIGHT ========================================================= */ .hein-experience__photo--03 { grid-column: 2; grid-row: 2; } /* ========================================================= 15. EXPERIENCE CONTENT ========================================================= */ .hein-experience__content { position: relative; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } /* ========================================================= 16. EYEBROW ========================================================= */ .hein-experience__eyebrow { width: 100% !important; margin: 0 0 15px !important; padding: 0 !important; } .hein-experience__eyebrow .elementor-heading-title { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; color: var(--hein-orange); font-family: "Open Sans", Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: 0.13em; text-transform: uppercase; } /* Orange eyebrow divider */ .hein-experience__eyebrow .elementor-heading-title::before { content: ""; display: block; flex: 0 0 26px; width: 26px; height: 2px; background: var(--hein-orange); } /* ========================================================= 17. MAIN HEADING LIGHT BACKGROUND VERSION ========================================================= */ .hein-experience__heading { width: 100% !important; margin: 0 0 22px !important; padding: 0 !important; } .hein-experience__heading .elementor-heading-title { width: 100%; max-width: 520px; margin: 0 !important; padding: 0 !important; color: var(--hein-blue); font-family: "Aller", "Open Sans", Arial, sans-serif; font-size: clamp( 36px, 3.5vw, 49px ); font-weight: 700; line-height: 1.08; letter-spacing: -0.032em; text-shadow: none; } /* ========================================================= 18. INTRO COPY LIGHT BACKGROUND VERSION ========================================================= */ .hein-experience__intro { width: 100% !important; max-width: 540px; margin: 0 !important; padding: 0 !important; color: var(--hein-text); font-family: "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; } .hein-experience__intro .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .hein-experience__intro p { margin: 0 !important; padding: 0 !important; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* ========================================================= 19. EXPERIENCE STATS ========================================================= */ .hein-experience__stats { position: relative; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 550px; margin: 42px 0 0 !important; padding: 0 !important; gap: 0 !important; background: transparent !important; overflow: visible !important; border-bottom: 1px solid rgba(0, 48, 87, 0.15); } /* ========================================================= 20. INDIVIDUAL STAT ROW ========================================================= */ .hein-experience__stat { position: relative; display: grid !important; grid-template-columns: 155px minmax(0, 1fr); align-items: center !important; width: 100% !important; margin: 0 !important; padding: 21px 0 !important; gap: 24px !important; background: transparent !important; border-top: 1px solid rgba(0, 48, 87, 0.15); overflow: visible !important; } /* ========================================================= 21. STAT NUMBER ========================================================= */ .hein-experience__stat-number { width: auto !important; margin: 0 !important; padding: 0 !important; } .hein-experience__stat-number .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: var(--hein-orange); font-family: "Aller", "Open Sans", Arial, sans-serif; font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.035em; } /* ========================================================= 22. STAT LABEL LIGHT BACKGROUND VERSION ========================================================= */ .hein-experience__stat-label { width: auto !important; margin: 0 !important; padding: 0 !important; } .hein-experience__stat-label .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: var(--hein-blue); font-family: "Aller", "Open Sans", Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; } /* ========================================================= 23. SMALL DESKTOP ========================================================= */ @media (max-width: 1200px) { .hein-experience { padding: 100px 36px 110px !important; } .hein-experience__inner { grid-template-columns: minmax(0, 1.05fr) minmax(370px, 0.95fr); gap: 62px !important; } .hein-experience__collage { height: 520px; } .hein-experience__stat { grid-template-columns: 140px minmax(0, 1fr); } .hein-experience__stat-number .elementor-heading-title { font-size: 44px; } .hein-experience__stat-label .elementor-heading-title { font-size: 17px; } } /* ========================================================= 24. TABLET LANDSCAPE ========================================================= */ @media (max-width: 1024px) { .hein-experience { padding: 90px 30px 95px !important; } .hein-experience__inner { grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr); gap: 46px !important; } .hein-experience__collage { height: 470px; gap: 12px !important; } .hein-experience__collage::before { top: -14px; left: -14px; width: 68px; height: 68px; } .hein-experience__collage::after { right: -14px; bottom: -14px; width: 68px; height: 68px; } .hein-experience__heading .elementor-heading-title { font-size: clamp( 34px, 4.2vw, 43px ); } .hein-experience__intro { font-size: 15px; line-height: 1.7; } .hein-experience__stats { margin-top: 34px !important; } .hein-experience__stat { grid-template-columns: 118px minmax(0, 1fr); padding: 18px 0 !important; gap: 18px !important; } .hein-experience__stat-number .elementor-heading-title { font-size: 38px; } .hein-experience__stat-label .elementor-heading-title { font-size: 16px; } } /* ========================================================= 25. TABLET PORTRAIT ========================================================= */ @media (max-width: 860px) { .hein-experience { padding: 85px 30px 90px !important; } .hein-experience__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 70px !important; } .hein-experience__media { width: 100% !important; max-width: 680px; margin: 0 auto !important; } .hein-experience__collage { height: 540px; } .hein-experience__content { width: 100% !important; max-width: 700px; margin: 0 auto !important; } .hein-experience__heading .elementor-heading-title { max-width: 620px; } .hein-experience__intro { max-width: 650px; } .hein-experience__stats { max-width: 650px; } .hein-experience__stat { grid-template-columns: 150px minmax(0, 1fr); } .hein-experience__stat-number .elementor-heading-title { font-size: 44px; } .hein-experience__stat-label .elementor-heading-title { font-size: 18px; } } /* ========================================================= 26. MOBILE ========================================================= */ @media (max-width: 767px) { .hein-experience { padding: 72px 20px 80px !important; background: transparent !important; background-image: none !important; } /* * Explicitly keep old mobile background rules dead. */ .hein-experience::before, .hein-experience::after { content: none !important; display: none !important; background: none !important; background-image: none !important; } .hein-experience__inner { gap: 58px !important; } /* ----------------------------------------------------- COLLAGE ----------------------------------------------------- */ .hein-experience__media { width: calc(100% - 18px) !important; max-width: 600px; } .hein-experience__collage { height: 440px; gap: 10px !important; } .hein-experience__collage::before { top: -11px; left: -11px; width: 54px; height: 54px; border-top-width: 3px; border-left-width: 3px; } .hein-experience__collage::after { right: -11px; bottom: -11px; width: 54px; height: 54px; border-right-width: 3px; border-bottom-width: 3px; } .hein-experience__photo { border-radius: 13px; box-shadow: 0 12px 28px rgba(0, 48, 87, 0.10); } /* ----------------------------------------------------- EYEBROW ----------------------------------------------------- */ .hein-experience__eyebrow { margin-bottom: 14px !important; } .hein-experience__eyebrow .elementor-heading-title { font-size: 11px; } .hein-experience__eyebrow .elementor-heading-title::before { flex-basis: 22px; width: 22px; } /* ----------------------------------------------------- HEADING ----------------------------------------------------- */ .hein-experience__heading { margin-bottom: 19px !important; } .hein-experience__heading .elementor-heading-title { max-width: none; font-size: clamp( 32px, 9vw, 40px ); line-height: 1.1; } /* ----------------------------------------------------- INTRO ----------------------------------------------------- */ .hein-experience__intro { max-width: none; font-size: 16px; line-height: 1.7; } /* ----------------------------------------------------- STATS ----------------------------------------------------- */ .hein-experience__stats { width: 100% !important; max-width: none; margin-top: 38px !important; } .hein-experience__stat { grid-template-columns: 112px minmax(0, 1fr); padding: 18px 0 !important; gap: 18px !important; } .hein-experience__stat-number .elementor-heading-title { font-size: 38px; } .hein-experience__stat-label .elementor-heading-title { font-size: 16px; line-height: 1.28; } } /* ========================================================= 27. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .hein-experience { padding: 64px 18px 70px !important; } .hein-experience__inner { gap: 52px !important; } .hein-experience__media { width: calc(100% - 14px) !important; } .hein-experience__collage { height: 380px; } .hein-experience__heading .elementor-heading-title { font-size: clamp( 30px, 9vw, 36px ); } .hein-experience__intro { font-size: 15px; } .hein-experience__stats { margin-top: 34px !important; } .hein-experience__stat { grid-template-columns: 96px minmax(0, 1fr); padding: 16px 0 !important; gap: 15px !important; } .hein-experience__stat-number .elementor-heading-title { font-size: 34px; } .hein-experience__stat-label .elementor-heading-title { font-size: 15px; } } /* ========================================================= 28. VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .hein-experience__collage { height: 340px; } .hein-experience__stat { grid-template-columns: 86px minmax(0, 1fr); gap: 12px !important; } .hein-experience__stat-number .elementor-heading-title { font-size: 31px; } .hein-experience__stat-label .elementor-heading-title { font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e5c5b52 *//* ========================================================= HEIN ABOUT PAGE OWNERSHIP + EXPERIENCE MASTER SINGLE FULL-WIDTH PHOTO VERSION Photo displays at its natural aspect ratio. No left/right cropping. PLACE THIS CSS ONLY ON: OWNERSHIP + EXPERIENCE Class: hein-ownership-experience EMPLOYEE OWNERSHIP Class: hein-ownership Custom CSS: EMPTY Established HEIN system: - Major headings: Aller - Eyebrows / body: Open Sans - HEIN Blue: #003057 - HEIN Orange: #f58220 - Content max width: 1200px ========================================================= */ /* ========================================================= 01. MASTER CONTAINER ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 { --hein-blue: #003057; --hein-blue-mid: #0d4d78; --hein-blue-dark: #002744; --hein-orange: #f58220; --hein-text: #53697a; --hein-text-dark: #344f62; --hein-white: #ffffff; position: relative; isolation: isolate; width: 100% !important; margin: 0 !important; padding: 0 !important; background-color: #ffffff; overflow: hidden !important; } /* ========================================================= 02. MASTER BLUEPRINT GRID ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient( rgba(0, 48, 87, 0.030) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0, 48, 87, 0.030) 1px, transparent 1px ); background-size: 48px 48px; background-position: center top; background-repeat: repeat; -webkit-mask-image: linear-gradient( to bottom, transparent 0, rgba(0, 0, 0, 0.18) 30px, rgba(0, 0, 0, 0.45) 60px, rgba(0, 0, 0, 0.72) 90px, rgba(0, 0, 0, 0.90) 120px, #000000 150px, #000000 100% ); mask-image: linear-gradient( to bottom, transparent 0, rgba(0, 0, 0, 0.18) 30px, rgba(0, 0, 0, 0.45) 60px, rgba(0, 0, 0, 0.72) 90px, rgba(0, 0, 0, 0.90) 120px, #000000 150px, #000000 100% ); } /* ========================================================= 03. MASTER ATMOSPHERE + BOTTOM FADE ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.10) 77%, rgba(255, 255, 255, 0.28) 82%, rgba(255, 255, 255, 0.52) 87%, rgba(255, 255, 255, 0.76) 92%, rgba(255, 255, 255, 0.93) 96%, #ffffff 100% ), radial-gradient( ellipse at 88% 18%, rgba(0, 48, 87, 0.035) 0%, rgba(0, 48, 87, 0.012) 30%, rgba(0, 48, 87, 0) 58% ), radial-gradient( ellipse at 10% 68%, rgba(0, 48, 87, 0.025) 0%, rgba(0, 48, 87, 0.008) 32%, rgba(0, 48, 87, 0) 60% ); } /* ========================================================= 04. KEEP CHILDREN ABOVE MASTER BACKGROUND ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 > .e-con, .elementor-1123 .elementor-element.elementor-element-e5c5b52 > .elementor-element { position: relative; z-index: 2; } /* ========================================================= 05. SHARED BOX SIZING ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52, .elementor-1123 .elementor-element.elementor-element-e5c5b52 *, .elementor-1123 .elementor-element.elementor-element-e5c5b52 *::before, .elementor-1123 .elementor-element.elementor-element-e5c5b52 *::after { box-sizing: border-box; } /* ========================================================= 06. EMPLOYEE OWNERSHIP SECTION ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership { position: relative; width: 100%; margin: 0 !important; padding: 105px 30px 95px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; overflow: visible !important; } /* Remove legacy section pseudo backgrounds */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership::before, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership::after { content: none !important; display: none !important; } /* Remove Elementor widget spacing */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership .elementor-widget { margin-block-end: 0; } /* ========================================================= 07. OWNERSHIP INNER ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__inner { position: relative; z-index: 2; display: grid !important; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; gap: 82px !important; overflow: visible !important; } /* ========================================================= 08. LEFT OWNERSHIP CONTENT ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__intro-block { position: relative; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: 520px; margin: 0 !important; padding: 0 !important; gap: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ========================================================= 09. EYEBROW ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__eyebrow { width: 100% !important; margin: 0 0 15px !important; padding: 0 !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__eyebrow .elementor-heading-title { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; color: var(--hein-orange); font-family: "Open Sans", Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: 0.13em; text-transform: uppercase; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__eyebrow .elementor-heading-title::before { content: ""; display: block; flex: 0 0 26px; width: 26px; height: 2px; background: var(--hein-orange); } /* ========================================================= 10. MAIN OWNERSHIP HEADING ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__heading { width: 100% !important; margin: 0 0 38px !important; padding: 0 !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__heading .elementor-heading-title { width: 100%; max-width: 500px; margin: 0 !important; padding: 0 !important; color: var(--hein-blue); font-family: "Aller", "Open Sans", Arial, sans-serif; font-size: clamp( 36px, 3.5vw, 49px ); font-weight: 700; line-height: 1.06; letter-spacing: -0.032em; } /* ========================================================= 11. OWNERSHIP PRINCIPLE ROWS ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle { position: relative; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; margin: 0 !important; padding: 20px 0 20px 29px !important; gap: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-left: none !important; outline: none !important; box-shadow: none !important; overflow: visible !important; } /* Kill old adjacent-row divider rule */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle + .hein-ownership__principle { border: none !important; border-top: none !important; border-bottom: none !important; box-shadow: none !important; } /* ========================================================= 12. REMOVE NESTED ELEMENTOR BORDERS ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle > .e-con-inner, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle > .elementor-element, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle .elementor-element, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle .elementor-widget, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle .elementor-widget-container { border: none !important; border-width: 0 !important; border-style: none !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-left: none !important; outline: none !important; box-shadow: none !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle::after { content: none !important; display: none !important; } /* ========================================================= 13. ORANGE PRINCIPLE ACCENT ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle::before { content: ""; position: absolute; top: 20px; left: 0; width: 3px; height: 19px; background: var(--hein-orange); border-radius: 2px; pointer-events: none; } /* ========================================================= 14. PRINCIPLE / ITEM TITLE ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-title, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-title { width: 100% !important; margin: 0 0 7px !important; padding: 0 !important; color: var(--hein-blue) !important; border: none !important; box-shadow: none !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-title .elementor-widget-container, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-title .elementor-widget-container { margin: 0 !important; padding: 0 !important; color: var(--hein-blue) !important; border: none !important; box-shadow: none !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-title .elementor-heading-title, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-title .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: var(--hein-blue) !important; font-family: "Aller", "Open Sans", Arial, sans-serif; font-size: 20px !important; font-weight: 700; line-height: 1.28; letter-spacing: -0.012em; text-shadow: none !important; } /* ========================================================= 15. PRINCIPLE / ITEM COPY ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-copy, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-copy { width: 100% !important; max-width: 470px; margin: 0 !important; padding: 0 !important; color: var(--hein-text) !important; font-family: "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.68; border: none !important; box-shadow: none !important; text-shadow: none !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-copy .elementor-widget-container, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-copy .elementor-widget-container { margin: 0 !important; padding: 0 !important; color: var(--hein-text) !important; background: transparent !important; border: none !important; box-shadow: none !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-copy p, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-copy p { margin: 0 !important; padding: 0 !important; color: inherit !important; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* ========================================================= 16. RIGHT MEDIA BLOCK ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__media-block { position: relative; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ========================================================= 17. OWNERSHIP MEDIA ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__media { position: relative; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ========================================================= 18. SINGLE IMAGE FRAME IMPORTANT: No fixed height. Frame follows the actual photograph ratio. ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage { position: relative; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } /* ========================================================= 19. IMAGE CORNER ACCENTS ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage::before { content: ""; position: absolute; top: -18px; left: -18px; width: 84px; height: 84px; border-top: 4px solid var(--hein-orange); border-left: 4px solid var(--hein-orange); z-index: 0; pointer-events: none; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 84px; height: 84px; border-right: 4px solid var(--hein-orange); border-bottom: 4px solid var(--hein-orange); z-index: 0; pointer-events: none; } /* ========================================================= 20. SINGLE PHOTO ELEMENT Photo wrapper now follows image height rather than forcing image into a predetermined rectangle. ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo { position: relative; z-index: 1; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(0, 48, 87, 0.08); border-radius: 15px; background: #e8eef2; box-shadow: 0 18px 42px rgba(0, 48, 87, 0.10); } /* ========================================================= 21. IMAGE WRAPPER ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo .elementor-widget-container { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: inherit; } /* ========================================================= 22. ACTUAL IMAGE CRITICAL CHANGE: width: 100% height: auto This displays the entire image without cropping. ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; border-radius: inherit; } /* ========================================================= 23. PHOTO 01 ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 24. ELEMENTOR IMAGE ELEMENT SAFETY Prevent Elementor from introducing a fixed height or constraining the image's natural ratio. ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 .elementor-widget-container, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 .elementor-image, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 .elementor-image a, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 .elementor-image picture { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 .elementor-image img, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 picture img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center center !important; } /* ========================================================= 25. SMALL DESKTOP ========================================================= */ @media (max-width: 1200px) { .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership { padding: 100px 36px 90px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__inner { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: 62px !important; } } /* ========================================================= 26. TABLET LANDSCAPE ========================================================= */ @media (max-width: 1024px) { .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership { padding: 90px 30px 85px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__inner { grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr); gap: 46px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__heading .elementor-heading-title { font-size: clamp( 34px, 4.2vw, 43px ); } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__heading { margin-bottom: 32px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle { padding: 18px 0 18px 27px !important; border: none !important; box-shadow: none !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle::before { top: 18px; height: 18px; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-title .elementor-heading-title, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-title .elementor-heading-title { font-size: 19px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-copy, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-copy { font-size: 15.5px; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage::before { top: -14px; left: -14px; width: 66px; height: 66px; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage::after { right: -14px; bottom: -14px; width: 66px; height: 66px; } } /* ========================================================= 27. TABLET PORTRAIT ========================================================= */ @media (max-width: 860px) { .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership { padding: 85px 30px 85px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 64px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__intro-block { width: 100% !important; max-width: 680px; margin: 0 auto !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__heading .elementor-heading-title { max-width: 620px; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-copy, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-copy { max-width: 620px; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__media-block { width: 100% !important; max-width: 700px; margin: 0 auto !important; } } /* ========================================================= 28. MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership { padding: 72px 20px 76px !important; } /* Eyebrow */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__eyebrow { margin-bottom: 14px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__eyebrow .elementor-heading-title { font-size: 11px; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__eyebrow .elementor-heading-title::before { flex-basis: 22px; width: 22px; } /* Main heading */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__heading { margin-bottom: 29px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__heading .elementor-heading-title { max-width: none; font-size: clamp( 32px, 9vw, 40px ); line-height: 1.08; } /* Principles */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle { padding: 17px 0 17px 25px !important; border: none !important; box-shadow: none !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle + .hein-ownership__principle { border: none !important; box-shadow: none !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle::before { top: 17px; left: 0; width: 3px; height: 18px; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-title, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-title { margin-bottom: 6px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-title .elementor-heading-title, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-title .elementor-heading-title { font-size: 19px !important; line-height: 1.25; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-copy, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-copy { max-width: none; font-size: 15.5px; line-height: 1.68; } /* Full uncropped photo */ .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__media-block { width: calc(100% - 18px) !important; max-width: 620px; margin: 0 auto !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage { width: 100% !important; height: auto !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 { width: 100% !important; height: auto !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo img { width: 100% !important; height: auto !important; object-fit: contain !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage::before { top: -11px; left: -11px; width: 54px; height: 54px; border-top-width: 3px; border-left-width: 3px; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage::after { right: -11px; bottom: -11px; width: 54px; height: 54px; border-right-width: 3px; border-bottom-width: 3px; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo { border-radius: 13px; box-shadow: 0 12px 28px rgba(0, 48, 87, 0.10); } /* Master background */ .elementor-1123 .elementor-element.elementor-element-e5c5b52::before { background-size: 40px 40px; -webkit-mask-image: linear-gradient( to bottom, transparent 0, rgba(0, 0, 0, 0.20) 24px, rgba(0, 0, 0, 0.48) 48px, rgba(0, 0, 0, 0.74) 72px, rgba(0, 0, 0, 0.90) 96px, #000000 120px, #000000 100% ); mask-image: linear-gradient( to bottom, transparent 0, rgba(0, 0, 0, 0.20) 24px, rgba(0, 0, 0, 0.48) 48px, rgba(0, 0, 0, 0.74) 72px, rgba(0, 0, 0, 0.90) 96px, #000000 120px, #000000 100% ); } .elementor-1123 .elementor-element.elementor-element-e5c5b52::after { background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.10) 74%, rgba(255, 255, 255, 0.30) 80%, rgba(255, 255, 255, 0.55) 86%, rgba(255, 255, 255, 0.78) 91%, rgba(255, 255, 255, 0.94) 96%, #ffffff 100% ), radial-gradient( ellipse at 88% 18%, rgba(0, 48, 87, 0.035) 0%, rgba(0, 48, 87, 0.012) 30%, rgba(0, 48, 87, 0) 58% ), radial-gradient( ellipse at 10% 65%, rgba(0, 48, 87, 0.022) 0%, rgba(0, 48, 87, 0.007) 32%, rgba(0, 48, 87, 0) 60% ); } } /* ========================================================= 29. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership { padding: 64px 18px 70px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__heading .elementor-heading-title { font-size: clamp( 30px, 9vw, 36px ); } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__inner { gap: 52px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__media-block { width: calc(100% - 14px) !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 { height: auto !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo img { width: 100% !important; height: auto !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-copy, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-copy { font-size: 15px; } } /* ========================================================= 30. VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__collage, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__photo--01 { height: auto !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle { padding-left: 23px !important; } .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__principle-title .elementor-heading-title, .elementor-1123 .elementor-element.elementor-element-e5c5b52 .hein-ownership__item-title .elementor-heading-title { font-size: 18px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e622bbd *//* ========================================================= 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-1123 .elementor-element.elementor-element-e622bbd { --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-1123 .elementor-element.elementor-element-e622bbd, .elementor-1123 .elementor-element.elementor-element-e622bbd *, .elementor-1123 .elementor-element.elementor-element-e622bbd *::before, .elementor-1123 .elementor-element.elementor-element-e622bbd *::after { box-sizing: border-box; } /* Remove Elementor default widget spacing */ .elementor-1123 .elementor-element.elementor-element-e622bbd .elementor-widget { margin-block-end: 0; } /* Hide Elementor's built-in overlay */ .elementor-1123 .elementor-element.elementor-element-e622bbd .elementor-background-overlay { display: none !important; } /* Keep actual content above background layers */ .elementor-1123 .elementor-element.elementor-element-e622bbd > * { position: relative; z-index: 3; } /* ========================================================= 2. STATIC PROJECT PHOTOGRAPH --------------------------------------------------------- Dedicated photo layer underneath the blue treatment. ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e622bbd::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-1123 .elementor-element.elementor-element-e622bbd::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-1123 .elementor-element.elementor-element-e622bbd > .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-1123 .elementor-element.elementor-element-e622bbd > .elementor-shape-top svg { display: block; width: calc(100% + 1.3px) !important; min-width: calc(100% + 1.3px) !important; height: 100% !important; } .elementor-1123 .elementor-element.elementor-element-e622bbd > .elementor-shape-top .elementor-shape-fill { fill: var(--hein-divider-fill) !important; } /* ========================================================= 6. CONTENT SHELL ========================================================= */ .elementor-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content [class*="info-card"], .elementor-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content::before, .elementor-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href], .elementor-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href]::after, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button::after { content: "→"; display: inline-block; color: currentColor; font-size: 17px; line-height: 1; transition: transform 180ms ease; } /* Button hover */ .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href]:hover, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href]:focus-visible, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button:hover, .elementor-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href]:hover::after, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href]:focus-visible::after, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button:hover::after, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button:focus-visible::after { transform: translateX(4px); } /* Keyboard focus */ .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href]:focus-visible, .elementor-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content .elementor-button-icon, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content [class*="button-icon"] { display: none !important; } /* ========================================================= 11. LAPTOP ========================================================= */ @media (max-width: 1024px) { .elementor-1123 .elementor-element.elementor-element-e622bbd { padding: 70px 0 56px; } .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-shell { width: min(calc(100% - 40px), 1200px) !important; } .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content { max-width: 760px; } .elementor-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd { padding: 64px 0 54px; } .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-shell { width: min(calc(100% - 36px), 1200px) !important; } .elementor-1123 .elementor-element.elementor-element-e622bbd > .elementor-shape-top { height: 31px !important; } } /* ========================================================= 13. MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-1123 .elementor-element.elementor-element-e622bbd { padding: 58px 0 48px; } /* * Slightly stronger blue treatment on mobile because the * photograph occupies a much smaller visible area. */ .elementor-1123 .elementor-element.elementor-element-e622bbd::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-1123 .elementor-element.elementor-element-e622bbd .hein-cta-shell { width: min(calc(100% - 28px), 1200px) !important; } .elementor-1123 .elementor-element.elementor-element-e622bbd > .elementor-shape-top { height: 24px !important; } .elementor-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content p { max-width: 580px; font-size: 16px !important; line-height: 1.62 !important; } .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href], .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button { width: 100%; min-width: 0; min-height: 52px; margin-top: 21px !important; } } /* ========================================================= 14. SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .elementor-1123 .elementor-element.elementor-element-e622bbd { padding: 54px 0 44px; } .elementor-1123 .elementor-element.elementor-element-e622bbd .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-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href], .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button { padding: 13px 18px !important; font-size: 12px !important; } } /* ========================================================= 15. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href], .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href]::after, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button::after { transition: none !important; } .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href]:hover, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content a[href]:focus-visible, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button:hover, .elementor-1123 .elementor-element.elementor-element-e622bbd .hein-cta-content button:focus-visible { transform: none; } }/* End custom CSS */