/* ==========================================================
   ECKSELLENT CUSTOMS
   ABOUT PAGE STYLESHEET

   Version : 1.0.0
   Updated : 2026-08-05
   ========================================================== */


/* ==========================================================
   PAGE BASE
   ========================================================== */

.exc-about {
    overflow: hidden;
    background: #050505;
    color: #f5f5f2;
}


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

.exc-about-hero {
    position: relative;
    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 170px 0 110px;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 18% 28%,
            rgba(255, 29, 132, 0.13),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(0, 255, 26, 0.10),
            transparent 36%
        ),
        #050505;

    background-size:
        48px 48px,
        48px 48px,
        auto,
        auto,
        auto;
}

.exc-about-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 29, 132, 0.75),
            rgba(0, 255, 26, 0.75),
            transparent
        );
}

.exc-about-watermark {
    position: absolute;

    right: -4%;
    top: 50%;

    width: min(48vw, 720px);
    aspect-ratio: 1;

    transform: translateY(-50%);

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.065;
    filter: grayscale(1);

    pointer-events: none;
}

.exc-about-hero-inner {
    position: relative;
    z-index: 1;
}

.exc-about-kicker,
.exc-about-section-heading > span,
.exc-about-section-label > span {
    display: block;

    color: #a2a29d;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.exc-about-hero h1 {
    max-width: 1040px;

    margin: 18px 0 32px;

    font-size: clamp(4rem, 8vw, 8.4rem);
    line-height: 0.84;
    letter-spacing: -0.055em;
}

.exc-about-hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ff1d84 44%,
            #00ff1a 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.exc-about-hero-copy {
    max-width: 690px;
}

.exc-about-hero-copy p {
    margin: 0 0 13px;

    color: #bcbcb7;

    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.65;
}

.exc-about-hero-copy strong {
    color: #ffffff;
}


/* ==========================================================
   GENERAL CONTENT SECTIONS
   ========================================================== */

.exc-about-section {
    padding: 110px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}

.exc-about-section-alt {
    background:
        linear-gradient(
            135deg,
            rgba(255, 29, 132, 0.028),
            transparent 38%
        ),
        linear-gradient(
            315deg,
            rgba(0, 255, 26, 0.025),
            transparent 38%
        ),
        #090909;
}

.exc-about-split {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.72fr)
        minmax(0, 1.28fr);

    gap: 72px;
    align-items: start;
}

.exc-about-section-label {
    position: sticky;
    top: 130px;
}

.exc-about-section-label h2,
.exc-about-section-heading h2 {
    margin: 12px 0 0;

    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
}

.exc-about-section-heading {
    margin-bottom: 48px;
}

.exc-about-body {
    max-width: 780px;
}

.exc-about-body p {
    margin: 0 0 20px;

    color: #b7b7b2;

    font-size: 1.06rem;
    line-height: 1.8;
}

.exc-about-body strong {
    color: #ffffff;
}

.exc-about-lead {
    color: #f4f4f2 !important;

    font-size:
        clamp(1.45rem, 2.4vw, 2.25rem) !important;

    line-height: 1.35 !important;
}


/* ==========================================================
   FEATURED QUOTE
   ========================================================== */

.exc-about-quote {
    position: relative;

    margin: 46px 0 0;
    padding: 30px 30px 30px 34px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-left: 3px solid #ff1d84;
    border-radius: 0 16px 16px 0;

    background: #0c0c0c;
}

.exc-about-quote::after {
    content: "";

    position: absolute;

    left: -3px;
    top: 50%;

    width: 3px;
    height: 45%;

    transform: translateY(-50%);

    background: #00ff1a;
}

.exc-about-quote span,
.exc-about-quote strong,
.exc-about-quote em {
    display: block;
}

.exc-about-quote span {
    color: #858580;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.exc-about-quote strong {
    margin-top: 12px;

    color: #ffffff;

    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.35;
}

.exc-about-quote em {
    margin-top: 15px;

    color: #a8a8a3;

    font-style: normal;
    line-height: 1.6;
}


/* ==========================================================
   MANIFESTO / HIGHLIGHT LINES
   ========================================================== */

.exc-about-manifesto,
.exc-about-three-lines,
.exc-about-promises {
    display: grid;
    gap: 10px;

    margin: 30px 0;
}

.exc-about-manifesto span,
.exc-about-three-lines span,
.exc-about-promises span {
    padding: 13px 16px;

    border-left: 2px solid #ff1d84;

    background:
        rgba(255, 255, 255, 0.035);

    color: #ffffff;

    font-weight: 750;
}

.exc-about-manifesto span:nth-child(even),
.exc-about-three-lines span:nth-child(even),
.exc-about-promises span:nth-child(even) {
    border-left-color: #00ff1a;
}


/* ==========================================================
   CAPABILITY CARDS
   ========================================================== */

.exc-about-beliefs {
    display: grid;

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

    gap: 18px;
}

.exc-about-beliefs article,
.exc-about-process article {
    position: relative;

    overflow: hidden;

    padding: 30px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 29, 132, 0.045),
            #0b0b0b 46%,
            rgba(0, 255, 26, 0.035)
        );
}

.exc-about-beliefs article::before,
.exc-about-process article::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #ff1d84,
            #00ff1a
        );

    opacity: 0.75;
}

.exc-about-beliefs article > span,
.exc-about-process article > span {
    display: block;

    color: #777772;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.exc-about-beliefs h3,
.exc-about-process h3 {
    margin: 16px 0 12px;

    color: #ffffff;

    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.15;
}

.exc-about-beliefs p,
.exc-about-process p {
    margin: 0;

    color: #a7a7a2;

    line-height: 1.7;
}

.exc-about-capability-line {
    max-width: 860px;

    margin: 42px auto 0;

    color: #b7b7b2;

    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.55;
    text-align: center;
}

.exc-about-capability-line strong {
    color: #ffffff;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.exc-about-process-section {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 29, 132, 0.08),
            transparent 26%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(0, 255, 26, 0.06),
            transparent 26%
        ),
        #070707;
}

.exc-about-process {
    display: grid;

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

    gap: 13px;
}

.exc-about-process article {
    min-height: 320px;

    padding: 24px;
}


/* ==========================================================
   OUR PROMISE TRANSITION
   ========================================================== */

.exc-about-promise-section {
    padding-bottom: 55px;
}


/* ==========================================================
   CLOSING INVITATION
   ========================================================== */

.exc-about-welcome {
    padding: 65px 0 110px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.024) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.024) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at center,
            rgba(255, 29, 132, 0.10),
            transparent 52%
        ),
        #050505;

    background-size:
        48px 48px,
        48px 48px,
        auto,
        auto;
}

.exc-about-welcome-inner {
    max-width: 760px;

    text-align: center;
}

.exc-about-welcome p {
    max-width: 760px;

    margin: 0 auto 15px;

    color: #aaaaaa;

    font-size: 1.06rem;
    line-height: 1.75;
}

.exc-about-welcome-line {
    display: block;

    margin: 45px auto 0;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.exc-about-cta {
    display: inline-flex;

    margin-top: 35px;
}


/* ==========================================================
   FINAL "STAY ECKSELLENT" SECTION
   ========================================================== */

.exc-about-closing {
    position: relative;

    overflow: hidden;

    padding: 105px 0 115px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    text-align: center;

    background:
        radial-gradient(
            circle at 25% 50%,
            rgba(255, 29, 132, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 75% 50%,
            rgba(0, 255, 26, 0.10),
            transparent 32%
        ),
        #030303;
}

.exc-about-closing p {
    margin: 0;

    color: #a7a7a2;

    font-size: clamp(1rem, 1.6vw, 1.25rem);
}

.exc-about-closing h2 {
    margin: 18px 0 0;

    font-size: clamp(4rem, 10vw, 10rem);
    line-height: 0.82;
    letter-spacing: -0.06em;

    background:
        linear-gradient(
            90deg,
            #ff1d84,
            #ffffff 50%,
            #00ff1a
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==========================================================
   RESPONSIVE — TABLET / SMALL DESKTOP
   ========================================================== */

@media (max-width: 1100px) {

    .exc-about-process {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .exc-about-process article:last-child {
        grid-column: 1 / -1;

        min-height: auto;
    }
}


/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 820px) {

    .exc-about-hero {
        min-height: auto;

        padding: 145px 0 90px;
    }

    .exc-about-watermark {
        right: -20%;

        width: 85vw;
    }

    .exc-about-split {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .exc-about-section-label {
        position: static;
    }

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


/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 620px) {

    .exc-about-hero {
        padding: 130px 0 78px;
    }

    .exc-about-hero h1 {
        font-size: clamp(3.1rem, 14vw, 5rem);
    }

    .exc-about-section {
        padding: 78px 0;
    }

    .exc-about-promise-section {
        padding-bottom: 42px;
    }

    .exc-about-section-label h2,
    .exc-about-section-heading h2 {
        font-size: clamp(2.6rem, 12vw, 4rem);
    }

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

    .exc-about-process article,
    .exc-about-process article:last-child {
        grid-column: auto;

        min-height: auto;
    }

    .exc-about-beliefs article,
    .exc-about-process article {
        padding: 23px;
    }

    .exc-about-welcome {
        padding: 58px 0 88px;
    }

    .exc-about-closing {
        padding: 84px 0 94px;
    }

    .exc-about-closing h2 {
        font-size: clamp(4rem, 17vw, 6rem);
    }
}