.elementor-1124 .elementor-element.elementor-element-fb180a2{--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.8;--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-1124 .elementor-element.elementor-element-fb180a2:not(.elementor-motion-effects-element-type-background), .elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor2 );background-image:url("https://hein.ca/wp-content/uploads/2026/09/CU-NicolBuilding-PhotoCredit-ScottNorsworthy-16.webp");background-position:0px -718px;background-repeat:no-repeat;background-size:cover;}.elementor-1124 .elementor-element.elementor-element-fb180a2::before, .elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-background-video-container::before, .elementor-1124 .elementor-element.elementor-element-fb180a2 > .e-con-inner > .elementor-background-video-container::before, .elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-background-slideshow::before, .elementor-1124 .elementor-element.elementor-element-fb180a2 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-astglobalcolor2 );--background-overlay:'';}.elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-shape-bottom svg, .elementor-1124 .elementor-element.elementor-element-fb180a2 > .e-con-inner > .elementor-shape-bottom svg{width:calc(0 + 1.3px);height:4em;}.elementor-1124 .elementor-element.elementor-element-bc0cbcf{--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-1124 .elementor-element.elementor-element-ad6cfa8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1124 .elementor-element.elementor-element-ad6cfa8{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-1124 .elementor-element.elementor-element-ad6cfa8 p{margin-block-end:0px;}.elementor-1124 .elementor-element.elementor-element-56f408c{--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;--padding-top:65px;--padding-bottom:65px;--padding-left:0px;--padding-right:0px;}.elementor-1124 .elementor-element.elementor-element-8b61e10{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;--e-filter-space-between:35px;--e-filter-normal-text-color:#FFFFFF;--e-filter-hover-text-color:#FFFFFF;--e-filter-active-text-color:#FFFFFF;--e-filter-item-border-radius:10px 10px 10px 10px;}.elementor-1124 .elementor-element.elementor-element-8b61e10 .e-filter-item:not( [aria-pressed=true] ):not( :hover ){background-color:#003057;border-style:none;}.elementor-1124 .elementor-element.elementor-element-8b61e10 .e-filter-item:hover:not( [aria-pressed=true] ){background-color:#003057;border-style:none;}.elementor-1124 .elementor-element.elementor-element-8b61e10 .e-filter-item[aria-pressed="true"]{background-color:#EA7600;border-style:none;}.elementor-1124 .elementor-element.elementor-element-8b61e10 > .elementor-widget-container{padding:25px 0px 10px 0px;}.elementor-1124 .elementor-element.elementor-element-8b61e10 .e-filter-item{font-family:"aller", Sans-serif;font-weight:500;padding:7px 7px 7px 7px;}.elementor-1124 .elementor-element.elementor-element-8c490ec{--grid-columns:3;}.elementor-1124 .elementor-element.elementor-element-8c490ec > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1124 .elementor-element.elementor-element-8c490ec .elementor-loop-container{grid-auto-rows:1fr;}.elementor-1124 .elementor-element.elementor-element-8c490ec .e-loop-item > .elementor-section, .elementor-1124 .elementor-element.elementor-element-8c490ec .e-loop-item > .elementor-section > .elementor-container, .elementor-1124 .elementor-element.elementor-element-8c490ec .e-loop-item > .e-con, .elementor-1124 .elementor-element.elementor-element-8c490ec .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-1124 .elementor-element.elementor-element-8c490ec .elementor-pagination{text-align:center;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1124 .elementor-element.elementor-element-56f408c{--content-width:1200px;}}@media(max-width:1024px){.elementor-1124 .elementor-element.elementor-element-fb180a2:not(.elementor-motion-effects-element-type-background), .elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-1124 .elementor-element.elementor-element-fb180a2{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:110px;--padding-bottom:110px;--padding-left:32px;--padding-right:32px;}.elementor-1124 .elementor-element.elementor-element-8c490ec{--grid-columns:2;}}@media(max-width:767px){.elementor-1124 .elementor-element.elementor-element-fb180a2:not(.elementor-motion-effects-element-type-background), .elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-1124 .elementor-element.elementor-element-fb180a2{--padding-top:60px;--padding-bottom:60px;--padding-left:24px;--padding-right:24px;}.elementor-1124 .elementor-element.elementor-element-8c490ec{--grid-columns:1;}}/* Start custom CSS for text-editor, class: .elementor-element-ad6cfa8 *//* Makes the liquid glass background hug the project title instead of stretching wide */
.elementor-1124 .elementor-element.elementor-element-ad6cfa8 {
  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-1124 .elementor-element.elementor-element-ad6cfa8 > .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-1124 .elementor-element.elementor-element-ad6cfa8 p {
  margin: 0;
}

/* Keeps the title on one line on desktop */
.elementor-1124 .elementor-element.elementor-element-ad6cfa8 .elementor-widget-container,
.elementor-1124 .elementor-element.elementor-element-ad6cfa8 .elementor-text-editor,
.elementor-1124 .elementor-element.elementor-element-ad6cfa8 p {
  white-space: nowrap;
}

/* Allows the title to wrap nicely on mobile */
@media (max-width: 767px) {
  .elementor-1124 .elementor-element.elementor-element-ad6cfa8 {
    max-width: 92%;
  }

  .elementor-1124 .elementor-element.elementor-element-ad6cfa8 .elementor-widget-container,
  .elementor-1124 .elementor-element.elementor-element-ad6cfa8 .elementor-text-editor,
  .elementor-1124 .elementor-element.elementor-element-ad6cfa8 p {
    white-space: normal;
    text-align: center;
  }
}





/* Project hero title shadow, matching the project card treatment */
.elementor-1124 .elementor-element.elementor-element-ad6cfa8 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-fb180a2 *//* =========================================================
   HEIN INNER-PAGE HERO GRADIENT
   RESPONSIVE SHAPE-DIVIDER SAFE VERSION

   Apply directly to the outermost hero container.
   No CSS class or fixed hero height is required.
   ========================================================= */

.elementor-1124 .elementor-element.elementor-element-fb180a2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Desktop curve depth */
  --hein-hero-curve-height: 58px;

  /* Match the section directly below */
  --hein-hero-divider-fill: #ffffff;
}


/* Disable Elementor's existing overlay */
.elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-background-overlay {
  display: none !important;
}


/* =========================================================
   HEIN BLUE GRADIENT
   ========================================================= */

.elementor-1124 .elementor-element.elementor-element-fb180a2::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-1124 .elementor-element.elementor-element-fb180a2 > .e-con-inner {
  position: relative;
  z-index: 2;
}


.elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-element:not(.elementor-shape):not(.elementor-background-overlay) {
  position: relative;
  z-index: 2;
}


/* =========================================================
   SHAPE DIVIDER

   Uses a controlled height at each breakpoint so the curve
   maintains a consistent visual depth across screen sizes.
   ========================================================= */

.elementor-1124 .elementor-element.elementor-element-fb180a2 > .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;
  max-height: var(--hein-hero-curve-height) !important;

  overflow: hidden !important;
  pointer-events: none;

  line-height: 0;
}


/* =========================================================
   TOP DIVIDER
   ========================================================= */

.elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-shape-top {
  top: -1px !important;
  bottom: auto !important;
}


/* =========================================================
   BOTTOM DIVIDER
   ========================================================= */

.elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-shape-bottom {
  top: auto !important;
  bottom: -1px !important;
}


/* =========================================================
   DIVIDER SVG
   ========================================================= */

.elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-shape svg {
  position: relative;

  display: block;

  width: calc(100% + 2px) !important;
  min-width: calc(100% + 2px) !important;

  height: 100% !important;
  max-height: 100% !important;

  left: 50%;

  transform: translateX(-50%);
}


/* Match divider to the section below */
.elementor-1124 .elementor-element.elementor-element-fb180a2 > .elementor-shape .elementor-shape-fill {
  fill: var(--hein-hero-divider-fill) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .elementor-1124 .elementor-element.elementor-element-fb180a2 {
    --hein-hero-curve-height: 44px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .elementor-1124 .elementor-element.elementor-element-fb180a2 {
    --hein-hero-curve-height: 30px;
  }


  .elementor-1124 .elementor-element.elementor-element-fb180a2::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-1124 .elementor-element.elementor-element-fb180a2 {
    --hein-hero-curve-height: 28px;
  }

}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-8c490ec *//* Varies the blueprint overlay position from card to card */
.elementor-1124 .elementor-element.elementor-element-8c490ec .elementor-loop-container > .e-loop-item:nth-child(6n+1) .hein-project-card::before {
  background-position: left top !important;
  background-size: 140% auto !important;
}

.elementor-1124 .elementor-element.elementor-element-8c490ec .elementor-loop-container > .e-loop-item:nth-child(6n+2) .hein-project-card::before {
  background-position: center top !important;
  background-size: 125% auto !important;
}

.elementor-1124 .elementor-element.elementor-element-8c490ec .elementor-loop-container > .e-loop-item:nth-child(6n+3) .hein-project-card::before {
  background-position: right top !important;
  background-size: 150% auto !important;
}

.elementor-1124 .elementor-element.elementor-element-8c490ec .elementor-loop-container > .e-loop-item:nth-child(6n+4) .hein-project-card::before {
  background-position: left center !important;
  background-size: 130% auto !important;
}

.elementor-1124 .elementor-element.elementor-element-8c490ec .elementor-loop-container > .e-loop-item:nth-child(6n+5) .hein-project-card::before {
  background-position: center center !important;
  background-size: 145% auto !important;
}

.elementor-1124 .elementor-element.elementor-element-8c490ec .elementor-loop-container > .e-loop-item:nth-child(6n+6) .hein-project-card::before {
  background-position: right bottom !important;
  background-size: 135% auto !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56f408c *//* =========================================================
   HEIN FEATURED PROJECTS
   FILTER + LOOP GRID WRAPPER

   Elementor structure:

   Container
   Class: hein-projects-browser

   ├── Taxonomy Filter
   │   Class: hein-projects-filter
   │
   └── Loop Grid
       Class: hein-projects-grid
   ========================================================= */


/* =========================================================
   MASTER LISTING WRAPPER

   Controls:
   - Overall content width
   - Responsive side padding
   - Space below hero
   - Space between filter and projects
   ========================================================= */

.hein-projects-browser {
    position: relative;

    width: 100% !important;
    max-width: 1200px !important;

    min-width: 0;
    min-height: 0 !important;

    margin:
        0 auto !important;

    /* Reduced vertical spacing, equal top and bottom */
    padding:
        32px 24px !important;

    box-sizing:
        border-box;

    display:
        flex !important;

    flex-direction:
        column !important;

    flex-wrap:
        nowrap !important;

    justify-content:
        flex-start !important;

    align-items:
        stretch !important;

    gap:
        28px !important;

    background:
        transparent;
}


/* =========================================================
   DIRECT ELEMENTOR CHILDREN

   Prevent Elementor widget/container sizing from introducing
   unexpected horizontal or vertical spacing.
   ========================================================= */

.hein-projects-browser > .elementor-element {
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}


/* =========================================================
   TAXONOMY FILTER
   Class: hein-projects-filter
   ========================================================= */

.hein-projects-filter {
    position: relative;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* Remove Elementor widget-container spacing */

.hein-projects-filter > .elementor-widget-container {
    width:
        100%;

    max-width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* =========================================================
   FILTER BUTTON GROUP
   ========================================================= */

.hein-projects-filter .e-filter {
    width:
        100%;

    max-width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-wrap:
        wrap !important;

    justify-content:
        flex-start !important;

    align-items:
        center !important;

    gap:
        10px !important;
}


/* =========================================================
   FILTER BUTTONS
   ========================================================= */

.hein-projects-filter .e-filter-item {
    position: relative;

    appearance:
        none;

    margin:
        0 !important;

    padding:
        11px 18px !important;

    min-height:
        42px;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    background:
        #ffffff !important;

    border:
        1px solid rgba(0, 48, 87, 0.18) !important;

    border-radius:
        4px !important;

    box-shadow:
        0 4px 14px rgba(0, 48, 87, 0.035);

    color:
        #003057 !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.11em !important;

    text-transform:
        uppercase !important;

    text-align:
        center;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}


/* =========================================================
   FILTER HOVER
   ========================================================= */

@media (hover: hover) {

    .hein-projects-filter .e-filter-item:hover {
        background:
            rgba(0, 48, 87, 0.045) !important;

        border-color:
            rgba(0, 48, 87, 0.34) !important;

        color:
            #003057 !important;

        box-shadow:
            0 6px 18px rgba(0, 48, 87, 0.07);
    }

}


/* =========================================================
   ACTIVE FILTER
   ========================================================= */

.hein-projects-filter
.e-filter-item[aria-pressed="true"] {
    background:
        #EA7600 !important;

    border-color:
        #EA7600 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 6px 18px rgba(234, 118, 0, 0.16);
}


/* Keep active state orange on hover */

@media (hover: hover) {

    .hein-projects-filter
    .e-filter-item[aria-pressed="true"]:hover {
        background:
            #EA7600 !important;

        border-color:
            #EA7600 !important;

        color:
            #ffffff !important;
    }

}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.hein-projects-filter
.e-filter-item:focus-visible {
    outline:
        2px solid #EA7600;

    outline-offset:
        3px;
}


/* =========================================================
   LOOP GRID
   Class: hein-projects-grid
   ========================================================= */

.hein-projects-grid {
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* Remove unexpected Elementor widget spacing */

.hein-projects-grid > .elementor-widget-container {
    width:
        100%;

    max-width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* =========================================================
   ELEMENTOR LOOP CONTAINER
   ========================================================= */

.hein-projects-grid
.elementor-loop-container {
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* =========================================================
   INDIVIDUAL LOOP ITEMS
   ========================================================= */

.hein-projects-grid
.e-loop-item {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .hein-projects-browser {
        max-width:
            100% !important;

        /* Reduced vertical spacing, equal top and bottom */
        padding:
            28px 32px !important;

        gap:
            26px !important;
    }


    .hein-projects-filter .e-filter {
        justify-content:
            flex-start !important;
    }


    .hein-projects-filter .e-filter-item {
        padding:
            11px 16px !important;

        font-size:
            11.5px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hein-projects-browser {
        /* Reduced vertical spacing, equal top and bottom */
        padding:
            24px 20px !important;

        gap:
            24px !important;
    }


    /* =====================================================
       MOBILE FILTER

       Keep all three choices together as one deliberate,
       evenly proportioned control.
       ===================================================== */

    .hein-projects-filter .e-filter {
        display:
            grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        width:
            100%;

        gap:
            7px !important;
    }


    .hein-projects-filter .e-filter-item {
        width:
            100% !important;

        min-width:
            0;

        min-height:
            40px;

        padding:
            10px 6px !important;

        font-size:
            10.5px !important;

        letter-spacing:
            0.08em !important;

        text-align:
            center;

        white-space:
            nowrap;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .hein-projects-browser {
        padding-left:
            18px !important;

        padding-right:
            18px !important;
    }


    .hein-projects-filter .e-filter {
        gap:
            6px !important;
    }


    .hein-projects-filter .e-filter-item {
        padding:
            10px 4px !important;

        font-size:
            10px !important;

        letter-spacing:
            0.06em !important;
    }

}/* End custom CSS */