.elementor-kit-13{--e-global-color-primary:#37729A;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#F9E79B;--e-global-color-e03a6b8:#FAD04F;--e-global-color-1d6674b:#FFFFFF;--e-global-color-66445ed:#2DA536;--e-global-color-f5e0c6c:#6EDF77;--e-global-color-5aaaa0a:#D7E0E2;--e-global-color-1c00ab5:#77ABCE;--e-global-color-c869852:#FFFFFF00;--e-global-color-4fa3d5a:#37729A0A;--e-global-color-6aa2464:#F9E645;--e-global-color-5fe7b99:#FF0000;--e-global-typography-primary-font-family:"Sarpanch";--e-global-typography-primary-font-size:50px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-size:25px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-272e430-font-family:"Roboto";--e-global-typography-272e430-font-size:13px;--e-global-typography-293c38c-font-family:"Montserrat";--e-global-typography-293c38c-font-size:15px;--e-global-typography-8f922a0-font-family:"Montserrat";--e-global-typography-8f922a0-font-size:15px;--e-global-typography-8f922a0-font-weight:400;--e-global-typography-8f922a0-text-transform:uppercase;--e-global-typography-8f922a0-font-style:normal;--e-global-typography-9922801-font-family:"Sarpanch";--e-global-typography-9922801-font-size:28px;--e-global-typography-9922801-text-transform:uppercase;--e-global-typography-c87b383-font-family:"Sarpanch";--e-global-typography-c87b383-font-size:16px;--e-global-typography-c87b383-font-weight:400;--e-global-typography-8180cb6-font-family:"Sarpanch";--e-global-typography-8180cb6-font-size:50px;--e-global-typography-dde3782-font-family:"Sarpanch";--e-global-typography-dde3782-font-size:10px;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.site-footer{background-color:transparent;padding-inline-end:62px;padding-inline-start:62px;background-image:linear-gradient(180deg, #0D5282AD 5%, #5A8BB475 100%);}.elementor-kit-13 a{color:#0B6E9E;}.elementor-kit-13 a:hover{color:#76BFE2;}.elementor-kit-13 h2{font-size:35px;}.elementor-kit-13 h3{font-size:20px;}.elementor-kit-13 h4{font-size:18px;}.elementor-kit-13 h5{font-size:18px;}.elementor-kit-13 h6{font-size:18px;}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-family:"Tahoma", sarpanch;text-transform:uppercase;border-radius:4px 4px 4px 4px;padding:12px 12px 12px 12px;}.elementor-kit-13 img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-kit-13 input:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea,.elementor-kit-13 .elementor-field-textual{padding:1px 7px 1px 7px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.page-title{display:var(--page-title-display);}.elementor-lightbox{background-color:#00050BDB;}.site-header .header-inner{width:10px;max-width:100%;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}footer .footer-inner .site-navigation a{color:#FFFFFF;font-family:"Roboto", sarpanch;font-size:12px;font-weight:400;line-height:12px;letter-spacing:0.8px;word-spacing:1px;}.site-footer .copyright p{color:#FFFFFF;font-style:normal;letter-spacing:-0.7px;}@media(max-width:1024px){.elementor-kit-13{--e-global-typography-secondary-font-size:18px;--e-global-typography-9922801-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1023px;}.e-con{--container-max-width:1023px;}}@media(max-width:767px){.elementor-kit-13{--e-global-typography-c87b383-font-size:14px;--e-global-typography-8180cb6-font-size:12px;}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:9px;}.e-con{--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}/* Start custom CSS *//* ==========================================================================
   HERO
   ========================================================================== */
.hero-container {
    position: relative;
}

.hero-container.e-con {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    row-gap: 0 !important;
}

@media (min-width: 1025px) {
    .hero-container.e-con {
        width: 100% !important;
        max-width: 100vw !important;
        --container-max-width: 100vw !important;
        --content-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Fluid hero image with exact preload aspect ratio */
.hero-image,
.hero-image img {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 300 / 233 !important;
    contain-intrinsic-size: 300px 233px;
    display: block !important;
}
.hero-image {
    margin-bottom: 0 !important;
}

/* Text overlay: wrapper container holding the H1 + H2 */
.hero-text-overlay {
    position: absolute !important;
    top: clamp(100px, 16vh, 220px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    pointer-events: none;
}

.hero-text-overlay .elementor-heading-title {
    margin: 0;
}

/* Headings hug their text so the H2 background doesn't span the screen */
.hero-text-overlay .elementor-widget-heading {
    width: fit-content !important;
    max-width: 100%;
}

/* Tall desktop monitors: bring headings down about 50px */
@media (min-width: 1025px) and (min-height: 900px) {
    .hero-text-overlay {
        top: calc(16vh + 50px);
    }
}

/* Landscape tweaks */
@media (max-width: 1024px) and (orientation: landscape) {
    .hero-container.e-con {
        --padding-top: 60px !important;
    }
    .hero-image {
        margin-top: 0px !important;
    }
}

/* Phone: position headings from screen width so container height doesn't matter */
@media (max-width: 767px) {
    .hero-container.e-con {
        height: auto !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    .hero-text-overlay {
        top: 28vw !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* ==========================================================================
   ARTICLE LAYOUT
   ========================================================================== */
.alignleft { 
    float: left !important; 
    margin: 0 25px 25px 0 !important; 
    max-width: 45%; 
}
.alignright { 
    float: right !important; 
    margin: 0 0 25px 25px !important; 
    max-width: 45%; 
}
.alignleft, .alignright {
    height: auto;
    margin-bottom: 25px;
}

.city-article-wrap h2, 
.city-article-wrap h3 {
    clear: both !important;
}

/* Fix Logo dimensions */
.elementor-widget-image img {
    width: 300px;
    height: auto;
}

/* Drop floats on tablet and below */
@media (max-width: 1024px) {
    .alignleft, .alignright {
        float: none !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
        max-width: 100%;
    }
}

/* Mobile article centering */
@media (max-width: 767px) {
    .city-article-wrap .mobile-pic-city {
        float: none !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
    }
    .city-article-wrap h2, .city-article-wrap h3, .city-article-wrap p {
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .city-article-wrap {
        padding: 15px !important;
    }
}

/* ==========================================================================
   BEFORE/AFTER SLIDER STRUCTURE
   ========================================================================== */
.elementor-widget-image-before-after,
.elementor-widget-image-before-after .elementor-widget-container,
.pafe-before-after-image-comparison-slider,
.pafe-before-after-wrapper,
.twentytwenty-container,
.cd-image-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.pafe-before-after-wrapper img,
.pafe-before-after-img img,
.twentytwenty-container img,
.cd-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ==========================================================================
   STICKY HEADER STACKING
   ========================================================================== */
.elementor-element-271dce57 {
    z-index: 1000 !important;
    overflow: visible !important;
}

.elementor-element-3839ad7f.elementor-sticky--active {
    z-index: 1000 !important;
}

/* ==========================================================================
   FAQ CHATBOT ANSWER HIGHLIGHT
   ========================================================================== */
.ss-ask-section .ss-answer-box > div:not(.ss-answered-q) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #111111;
  color: #ffffff;
  padding: 14px 16px;
  border-radius: 6px;
  margin-top: 10px;
}

.ss-ask-section .ss-answer-box > div:not(.ss-answered-q)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: url("https://stairsteps.ca/chat-ai-3.webp") center / contain no-repeat;
  opacity: 0.10;
  pointer-events: none;
  transform: rotate(15deg) scale(0.8);
}

.ss-ask-section .ss-answer-box > div:not(.ss-answered-q) a {
  color: #f0b752;
}

@media (max-width: 767.98px) {
  .ss-ask-section .ss-answer-box > div:not(.ss-answered-q)::before {
    background: url("https://stairsteps.ca/chat-ai-3.webp") center / contain repeat-y;
    transform: rotate(15deg) scale(0.96);
  }
}

/* ==========================================================================
   FRAME HOVER BOX
   ========================================================================== */
.inset-hover-box {
    position: relative;
    overflow: hidden;
}

.inset-hover-box::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border: 5px solid rgba(255, 255, 255, 0.473);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: all 0.7s ease;
}

.inset-hover-box:hover::after {
    border: 7px solid rgba(255, 255, 255, 0.473);
    width: 97%;
    height: 92%;
    opacity: 1;
    top: 4%;
    left: 1.5%;
}


/* Phone: keep the H2 background hugging each line of text */
@media (max-width: 767px) {
    .hero-text-overlay {
        padding-inline: 40px;
        box-sizing: border-box;
    }
    .hero-text-overlay h2.elementor-heading-title {
        display: inline;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }
}

/* Tablet and desktop: lift the hero image 60px (not phones) */
@media (min-width: 768px) {
    .hero-image {
        top: -60px;
    }
}/* End custom CSS */