/* =============================================================================
   ABOUT US — page-specific styles.
   Reuses ece-cleaning.css for the testimonial slider component
   (.testimonials-wrapper / .testimonial-slide / .testimonial-nav).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. HERO — full-bleed background image with text overlay (left)
   Image is set as a CSS background so the photo bleeds edge-to-edge. A
   left-to-right dark gradient overlay keeps the headline/body legible while
   leaving the right side of the portrait visible.
   ----------------------------------------------------------------------------- */
.about-hero {
    position: relative;
    background-color: #2d2d2d;
    background-image: url('../images/about-us/about-us-banner-img.webp');
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    min-height: 560px;
    padding: 110px 0 100px;
    overflow: hidden;
}

.about-hero> p{
    font-size: 19px!important;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(34, 34, 34, 0.85) 0%,
        rgba(34, 34, 34, 0.7) 35%,
        rgba(34, 34, 34, 0.25) 65%,
        rgba(34, 34, 34, 0) 100%
    );
    z-index: 1;
}

.about-hero .container {
    position: relative;
    z-index: 2;
}

.about-hero-content {
    max-width: 560px;
    color: #ffffff;
}

.about-hero-eyebrow {
    display: inline-block;
    font-family: Europa, Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #8dc63f;
    margin: 0 0 16px;
    letter-spacing: 0.3px;
}

.about-hero-title {
    font-family: Europa, Arial, sans-serif;
    font-size: 46px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 22px;
}

.about-hero-text {
    font-family: Europa, Arial, sans-serif;
    font-size: 17px;
    color: #ffffff;
    line-height: 1.7;
    margin: 0 0 32px;
    opacity: 0.95;
}

.about-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* -----------------------------------------------------------------------------
   2. COMMITMENT (green bg)
   Centered heading, 2-col body (text left, image right).
   ----------------------------------------------------------------------------- */
.about-commitment-section {
    background: #8dc63f;
    padding: 80px 0;
    color: #ffffff;
}

.about-commitment-icon {
    text-align: center;
    margin-bottom: 18px;
}

.about-commitment-icon img {
    width: 84px;
    height: 84px;
}

.about-commitment-title {
    font-family: Europa, Arial, sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    text-align: center;
    margin: 0 auto 50px;
    max-width: 880px;
}

.about-commitment-body {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-commitment-text {
    flex: 1 1 55%;
    font-family: Europa, Arial, sans-serif;
    font-size: 17px;
    color: #ffffff;
    line-height: 1.75;
}

.about-commitment-text p {
    margin: 0 0 18px;
    font-size: 19px!important;
    line-height: 36px!important;
}

.about-commitment-text p:last-child {
    margin-bottom: 0;
}

.about-commitment-text em {
    font-style: italic;
}

.about-commitment-text strong {
    font-weight: 700;
}

.about-commitment-image {
    flex: 1 1 45%;
    text-align: center;
}

.about-commitment-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: inline-block;
}


/* -----------------------------------------------------------------------------
   3. CLEANING YOU CAN SEE (white bg)
   Centered heading + intro, then a 2-col row: Carenote photo (left), green panel (right).
   ----------------------------------------------------------------------------- */
.about-cleaning-section {
    background: #ffffff;
    padding: 90px 0;
}

.about-cleaning-heading {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 26px;
}

/* Scoped to .about-cleaning-section so the dark colour wins over any global
   h2 / h2 br styles inherited from the site's base stylesheet. */
.about-cleaning-section .about-cleaning-title {
    font-family: Europa, Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #222222;
    line-height: 1.2;
    margin: 0;
}

.about-cleaning-intro {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 60px;
    font-family: Europa, Arial, sans-serif;
    font-size: 17px;
    color: #555555;
    line-height: 1.75;
}

.about-cleaning-intro p {
    margin: 0 0 14px;
    font-size: 19px!important;
}

.about-cleaning-intro p:last-child {
    margin-bottom: 0;
}

.about-cleaning-intro strong {
    font-weight: 700;
    color: #333333;
}

.about-cleaning-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.about-cleaning-image {
    flex: 1 1 55%;
    min-height: 360px;
    background-size: cover;
    background-position: center;
}

.about-cleaning-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-cleaning-panel {
    flex: 1 1 45%;
    background: #8dc63f;
    padding: 44px 40px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* White badge wrapping the Carenote logo: lifts the brand mark off the green
   panel so the icon + wordmark stay readable, mirroring the PDF design. */
.about-cleaning-panel-logo {
    display: inline-block;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 4px;
    margin-bottom: 22px;
    align-self: flex-start;
}

.about-cleaning-panel-logo img {
    display: block;
    max-width: 130px;
    height: auto;
}

.about-cleaning-panel p {
    font-family: Europa, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0 0 16px;
}

.about-cleaning-panel p:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
   4. TESTIMONIALS (green bg wrapper)
   Reuses .testimonials-wrapper from ece-cleaning.css.
   This wrapper just provides the green section background + padding.
   ----------------------------------------------------------------------------- */
.about-testimonials-section {
    background: #8dc63f;
    padding: 70px 0;
}

/* The .testimonials-wrapper inside takes care of its own internal layout
   (header on the left, slider with arrows on the right). */


/* -----------------------------------------------------------------------------
   5. LEADERSHIP TEAM
   Eyebrow + headline above the retained slick.js .person-carousel.
   ----------------------------------------------------------------------------- */
.about-leadership-section {
    padding: 80px 0 60px;
    background: #ffffff;
}

.about-leadership-heading {
    text-align: center;
    margin: 0 auto 40px;
    max-width: 800px;
}

.about-leadership-eyebrow {
    display: block;
    font-family: Europa, Arial, sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #8dc63f;
    margin: 0 0 15px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.about-leadership-title {
    font-family: Europa, Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #222222;
    line-height: 1.25;
    margin: 0;
}


/* -----------------------------------------------------------------------------
   6. OUR PEOPLE
   Centered eyebrow + heading + body + CTA.
   ----------------------------------------------------------------------------- */
.about-people-section {
    padding: 60px 0 90px;
    background: #ffffff;
    text-align: center;
}

.about-people-eyebrow {
    display: block;
    font-family: Europa, Arial, sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #8dc63f;
    margin: 0 0 15px;
    letter-spacing: 0.5px;
}

.about-people-title {
    font-family: Europa, Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #222222;
    line-height: 1.25;
    margin: 0 auto 28px;
    max-width: 820px;
}

.about-people-body {
    max-width: 820px;
    margin: 0 auto 36px;
    font-family: Europa, Arial, sans-serif;
    font-size: 19px;
    color: #555555;
    line-height: 1.75;
}

.about-people-body p {
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.7;
}

.about-people-body p:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
   7. EXPERIENCE THE CREWCARE DIFFERENCE (dark image banner)
   Wide banner with portrait on the right and white text on the left. The
   gradient stays heavy across the whole section so the title/body remain
   legible even when the background image's left side is light (e.g. a white
   wall behind the subject).
   ----------------------------------------------------------------------------- */
.about-experience-section {
    position: relative;
    background-color: #e4e4e4;
    background-image: url('../images/about-us/about-us-exp-diff-banner.webp');
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    /* Tall enough that the portrait's full upper body (head → torso) is visible
       on desktop without cropping the subject's head. Reduced at tablet/mobile
       to avoid wasted whitespace below the text. */
    min-height: 580px;
    padding: 100px 0;
    overflow: hidden;
}

.about-experience-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Heavier baseline opacity keeps text readable regardless of how light the
       photo's left edge is. Right side still fades enough that the portrait
       remains visible behind the right half. */
    background: linear-gradient(
        90deg,
        rgba(45, 45, 45, 0.92) 0%,
        rgba(45, 45, 45, 0.85) 40%,
        rgba(45, 45, 45, 0.6) 70%,
        rgba(45, 45, 45, 0.4) 100%
    );
    z-index: 1;
}

.about-experience-section .container {
    position: relative;
    z-index: 2;
}

.about-experience-content {
    max-width: 540px;
    color: #ffffff;
}

/* Selectors are scoped to .about-experience-section so the white colour wins
   over any global h2/p styles inherited from the site's base stylesheet. */
.about-experience-section .about-experience-title {
    font-family: Europa, Arial, sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.about-experience-section .about-experience-text {
    font-family: Europa, Arial, sans-serif;
    font-size: 19px;
    color: #ffffff;
    line-height: 1.7;
    margin: 0 0 28px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}


/* =============================================================================
   RESPONSIVE BREAKPOINTS
   Matches the breakpoints used by ece-cleaning.css / office-cleaning.css.
   ============================================================================= */

@media (max-width: 991px) {
    .about-hero {
        min-height: 480px;
        padding: 80px 0;
        background-size: cover!important;        
    }
    .about-hero-title { font-size: 38px; }
    .about-hero-eyebrow { font-size: 20px; }

    .about-commitment-section,
    .about-cleaning-section,
    .about-leadership-section,
    .about-people-section { padding: 60px 0; }

    .about-commitment-title { font-size: 32px; }
    .about-cleaning-title,
    .about-leadership-title,
    .about-people-title,
    .about-experience-section .about-experience-title { font-size: 30px; }

    .about-commitment-body { gap: 40px; }

    /* Tablet: scale the banner down from the desktop 580px so the photo still
       shows the subject's head without leaving excess whitespace. */
    .about-experience-section {
        min-height: 460px;
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    .about-hero {
        min-height: 0;
        padding: 70px 0 60px;
        /* On mobile the right-side portrait is mostly off-screen; darken the
           whole overlay so text stays legible regardless of crop. */
        background-position: right!important;
    }
    .about-hero::before {
        background: linear-gradient(
            180deg,
            rgba(34, 34, 34, 0.8) 0%,
            rgba(34, 34, 34, 0.7) 100%
        );
    }
    .about-hero-content { max-width: none; }
    .about-hero-title { font-size: 32px; }
    .about-hero-eyebrow { font-size: 18px; }

    .about-commitment-section { padding: 50px 0; }
    .about-commitment-title { font-size: 26px; margin-bottom: 30px; }
    .about-commitment-body { flex-direction: column; gap: 28px; }
    .about-commitment-image { order: -1; }

    .about-cleaning-section { padding: 50px 0; }
    .about-cleaning-title { font-size: 26px; }
    .about-cleaning-row { flex-direction: column; }
    .about-cleaning-image { min-height: 260px; }
    .about-cleaning-panel { padding: 32px 24px; }

    .about-leadership-section { padding: 50px 0 30px; }
    .about-people-section { padding: 30px 0 60px; }
    .about-leadership-title,
    .about-people-title { font-size: 26px; }

    .about-experience-section {
        min-height: 0;
        padding: 60px 0;
        /* On mobile the portrait crops out at center-right, so anchor the
           image toward the right edge and darken the full overlay vertically
           so the text stays legible regardless of which slice of the photo
           shows behind it. */
        background-position: right center;
    }
    .about-experience-section::before {
        background: linear-gradient(
            180deg,
            rgba(45, 45, 45, 0.88) 0%,
            rgba(45, 45, 45, 0.28) 100%
        );
    }
    .about-experience-content { max-width: none; text-align: center; }
    .about-experience-section .about-experience-title { font-size: 26px; }
    .about-experience-section .about-experience-text { font-size: 15px; }
}

@media (max-width: 479px) {
    .about-hero-title { font-size: 28px; }
    .about-commitment-title,
    .about-cleaning-title,
    .about-leadership-title,
    .about-people-title,
    .about-experience-section .about-experience-title { font-size: 24px; }
}