/* ========================================
   HERO
======================================== */

.rx-hero {
    position: relative;
    overflow-y: clip;
}

.rx-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,41,35,1) 0%,
        rgba(0,41,35,.92) 40%,
        rgba(0,41,35,0) 100%
    );
    pointer-events: none;
}

.rx-hero__wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 640px 1fr;
    gap: 80px;
    align-items: center;
}

.rx-hero__title {
    margin: 24px 0 32px;
}

.rx-hero__text {
    margin-bottom: 40px;
}

.rx-hero__media {
    aspect-ratio: 1 / 1.15;
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    margin: -27% 0;
}

.rx-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rx-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* ========================================
   Founder
======================================== */

.about-founder {
    padding: 120px 0 260px;
}

.about-founder__grid {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 80px;
    align-items: flex-end;
}

.about-founder .h2 {
    margin: 20px 0 40px;
}
.about-founder .text-label,
.about-founder .h2 span {
    color: var(--color-bright-green);
}

.about-founder__image img {
    width: 100%;
    display: block;
    border-radius: 24px;
}
.about-founder__image-cap {
    text-align: center;
}
.about-founder__image-cap > * {
    margin-bottom: 10px;
}

.about-founder__quote {
    margin: 0 0 40px;
    font-size: 55px;
    line-height: 1.1;
    border-bottom: 1px solid #000;
    padding: 0 0 40px;
  }

.about-founder__text {
    margin-bottom: 40px;
}

.about-founder__text p:not(:last-child) {
    margin-bottom: 24px;
}

/* ========================================
   Mission
======================================== */

.about-mission {
    padding: 120px 0;
    position: relative;
}

.about-mission__grid {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 80px;
    align-items: center;
}

.about-mission .text-label {
    color: var(--color-bright-green);
}

.about-mission .wrapper {position: static;}
.about-mission__image {min-height: 825px;}
.about-mission__image img {position: absolute;left: 0;bottom: 0;max-width: 750px;}

.about-mission__image img {
    width: 100%;
    display: block;
    border-radius: 24px;
}

.about-mission__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about-mission__item {
    padding-bottom: 40px;
    display: flex;
    gap: 24px;
}

.about-mission__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about-mission__item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 20px;
}

.about-mission__item-text h4 {
    color: var(--color-bright-green);
    margin-bottom: 8px;
}
.about-mission__item-text h3 {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 1.2;
    padding-bottom: 24px;
    position: relative;
}
.about-mission__item-text h3:after {
    content: "";
    width: 40px;
    height: 2px;
    background: var(--color-bright-green);
    position: absolute;
    left: 0;
    bottom: 0;
}

.about-mission .sect-top-right {
    clip-path: polygon(41% 0, 100% 0, 100% 100%, 0% 100%);
    width: 29%;
    height: 130px;
    position: absolute;
    right: 0;
    transform: translateY(-100%);
    background: var(--color-dark-teal);
    top: 1px;
  }

/* ========================================
   Principles
======================================== */

.about-principles {
    padding: 120px 0;
}

.about-principles .text-label {
    margin-bottom: 20px;
    color: var(--color-bright-green);
}

.about-principles .h2 {
    max-width: 900px;
    margin-bottom: 24px;
}

.about-principles .text-big {
    max-width: 620px;
    margin-bottom: 80px;
}

.about-principles .row {
    margin: 0 -10px;
    gap: 20px 0px;
}
.about-principles .row > div {
    padding: 0 10px;
}

.about-principles .row > div:nth-child(1) .what-we-one span {color: var(--color-bright-green);}
.about-principles .row > div:nth-child(1) .what-we-one .h3::after { background: var(--color-bright-green);}

.about-principles .row > div:nth-child(2) .what-we-one span {color: var(--color-bright-orange);}
.about-principles .row > div:nth-child(2) .what-we-one .h3::after { background: var(--color-bright-orange);}

.about-principles .row > div:nth-child(3) .what-we-one span {color: var(--color-bright-teal);}
.about-principles .row > div:nth-child(3) .what-we-one .h3::after { background: var(--color-bright-teal);}

.about-principles .row > div:nth-child(4) .what-we-one span {color: var(--color-bright-teal);}
.about-principles .row > div:nth-child(4) .what-we-one .h3::after { background: var(--color-bright-teal);}

.about-principles .row > div:nth-child(5) .what-we-one span {color: var(--color-bright-green);}
.about-principles .row > div:nth-child(5) .what-we-one .h3::after { background: var(--color-bright-green);}

.about-principles .row > div:nth-child(6) .what-we-one span {color: var(--color-bright-orange);}
.about-principles .row > div:nth-child(6) .what-we-one .h3::after { background: var(--color-bright-orange);}



/* ========================================
   Culture
======================================== */

.about-culture {
    padding: 120px 0 260px;
}

.about-culture .text-label {
    color: var(--color-bright-green);
}

.about-culture__grid {
    display: grid;
    grid-template-columns: 1fr 42%;
    gap: 80px;
    align-items: center;
}

.about-culture .h2 {
    margin: 20px 0 30px;
}

.about-culture__content > div p {
    margin-bottom: 24px;
}

.about-culture__content > div:not(.about-culture__buttons) {
    margin-bottom: 30px;
}

.about-culture__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}

.about-culture__image img {
    width: 100%;
    display: block;
    border-radius: 24px;
}

/* ========================================
   Certifications
======================================== */

.about-certs {
    padding: 120px 0;
    background: #F4F4F4;
    position: relative;
}

.about-certs .sect-top-right {
    clip-path: polygon(41% 0, 100% 0, 100% 100%, 0% 100%);
    width: 29%;
    height: 130px;
    position: absolute;
    right: 0;
    transform: translateY(-100%);
    background: #F4F4F4;
    top: 1px;
}

.about-certs__content {
    display: grid;
    grid-template-columns: 560px 1fr;
    gap: 80px;
    align-items: center;
}

.about-certs .h2 {
    margin: 20px 0 24px;
}

.about-certs__logos {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 50px;
}

.about-certs__item {
    text-align: center;
}

.about-certs__logo {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.about-certs__logo img {
    max-width: 200px;
    max-height: 100px;
    width: auto;
    height: auto;
}

.about-certs__title {
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
}

/* ========================================
   CTA
======================================== */

.hp-cta {
    background-color: var(--color-bright-green);
    text-align: center;
    background-attachment: fixed;
    background-image: url('../../../../wp-content/uploads/2026/05/reXtore_BrandMark_LightGreen-scaled.png');
    background-size: cover;
    min-height: 525px;
    display: flex;
    align-items: center;
}
.hp-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 1140px;
    margin: 0 auto;
}
.hp-cta-inner .h2 {
    max-width: 1100px;
}
.hp-cta-inner .text-big {
    font-size: 25px;
    margin: 0 auto 20px;
}
.hp-cta-inner .h2,
.hp-cta-inner .text-big {
    color: var(--color-dark-teal);
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1920px) {

}

@media (max-width: 1600px) {
    .text-label {
        font-size: 15px;
    }
    .rx-hero__text {
        max-width: 550px;
    }
    .about-page section {
        padding: 80px 0;
    }
    .about-page section.rx-hero {
        padding: 120px 0 80px;
    }
    .about-page section.about-culture,
    .about-page section.about-founder {
        padding: 80px 0 260px;
    }
    .rx-hero__wrapper {
        grid-template-columns: 800px 1fr;
    }
    .rx-hero__media {
        transform: scale(1.7) translateX(-20%);
        margin: 0;
    }
    .rx-hero__content {
        max-width: 550px;
    }
    .hp-cta-inner {
        max-width: 990px;
    }
    .hp-cta-inner .text-big {
        font-size: 22px;
    }
    .about-mission__image {min-height: 700px;}
    .about-mission__image img {max-width: 600px;}

}

@media (max-width: 1200px) {
    .rx-hero__wrapper {
        grid-template-columns: 650px 1fr;
    }
    .about-founder__quote {
        font-size: 38px;
    }
    .about-mission__item-text h3 {
        font-size: 24px;
    }
    .about-mission__image {min-height: 550px;}
    .about-mission__image img {max-width: 480px;}
}

@media (max-width: 991px) {

    .about-page section {
        padding: 60px 0;
    }
    .about-page section.rx-hero {
        padding: 110px 0 80px;
    }
    .about-page section.about-culture,
    .about-page section.about-founder {
        padding: 60px 0;
    }

    .rx-hero__wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .rx-hero__media {
        transform: none;
    }
    .rx-hero__content, .rx-hero__text {
        max-width: unset;
    }
    .about-founder__grid,
    .about-mission__grid,
    .about-culture__grid,
    .about-certs__content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-principles__grid {
        grid-template-columns: repeat(2,1fr);
    }
    .about-principles .text-big {
        max-width: unset;
        margin-bottom: 50px;
    }
    .about-mission__image {min-height: unset;}
    .about-mission__image img {position: static;max-width: 100%;}

    .about-founder__quote {
        font-size: 28px;
    }
    .about-certs .sect-top-right, .about-mission .sect-top-right {display: none;}

}

@media (max-width: 767px) {

    .wrapper {
        width: calc(100% - 48px);
    }

    .about-principles__grid {
        grid-template-columns: 1fr;
    }

    .about-certs__logos {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-founder__quote {
        font-size: 24px;
    }
	
	.about-mission__item {
	  padding-bottom: 0;
	}

    .about-principles__card {
        padding: 24px;
    }

    .about-culture__buttons {
        flex-direction: column;
    }

    .about-culture__buttons .btn {
        width: 100%;
        justify-content: center;
    }
    .hp-cta-inner .text-big {
        font-size: 20px;
    }

}

@media (min-width: 992px) {
	.about-mission__content > img {display: none;}
}