:root {
    --shades-white: white;
    --primary-800: #393939;
    --primary-700: #001412;
    --primary-725: #fad7d7;
    --primary-900: #00211d;
    --shades-black: #001412;
    --primary-600: #ff4040;
    --primary-625: #ff4040;
    --primary-650: #fad7d7;
    --primary-675: #393939;
    --neutral-800: #323b50;
    --primary-500: #ff4040;
    --neutral-500: #9ca6c1;
    --neutral-700: #546286;
    --neutral-600: #818eb0;
    --primary-50: #ffecec;
    --primary-100: #ffebeb;
    --primary-200: #99dbd4;
    --primary-300: #66cabe;
    --neutral-50: #f5f6f9;
    --neutral-100: #e6e9f0;
    --neutral-200: #d7dbe6;
    --neutral-300: #c9cedd;
    --neutral-400: #bac1d4;
    --neutral-900: #11141b;
}

.w-pagination-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
}

.w-pagination-previous {
    color: #333;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 9px 20px;
    font-size: 14px;
    display: block;
}

.w-pagination-previous-icon {
    margin-right: 4px;
}

.w-pagination-next {
    color: #333;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 9px 20px;
    font-size: 14px;
    display: block;
}

.w-pagination-next-icon {
    margin-left: 4px;
}

.w-page-count {
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.w-layout-grid {
    grid-row-gap: 16px;
    grid-column-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 32px;
    font-weight: bold;
    line-height: 36px;
}

h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
}

h6 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
}

p {
    margin-bottom: 10px;
}

blockquote {
    border-left: 5px solid #e2e2e2;
    margin-bottom: 10px;
    padding: 10px 20px;
    font-size: 18px;
    line-height: 22px;
}

.nav-bar-dark {
    z-index: 3;
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
    width: 100%;
    padding: 20px 80px;
    position: fixed;
}



.body {
    background-color: #001412;
}

.nav-bar-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.nav-main-div {
    justify-content: space-between;
    display: flex;
}

.nav-logo {
    width: auto;
}

.nav-hamburger-menu {
    z-index: 999;
    grid-row-gap: 10px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    display: flex;
    position: relative;
}

.menu-line-1,
.menu-line-2 {
    background-color: #ffffff;
    border-radius: 100px;
    width: 60px;
    height: 2px;
}

.logo {
    width: 100px;
}

.nav-bar-light {
    z-index: 10;
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
    background-color: #fff9;
    width: 100%;
    padding: 16px 80px;
    position: fixed;
}

.sg-intro {
    align-items: center;
    height: 50vh;
    margin-bottom: 60px;
    display: flex;
}

.sg-intro-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.sg-main-div {
    grid-row-gap: 40px;
    flex-direction: column;
    align-items: center;
    display: flex;
}

.sg-company-logo {
    justify-content: center;
    width: 100%;
    font-size: 100px;
    display: flex;
}

/* Hadeed's Updated Centered Styles */

.email-section-wrapper {
    padding: 20px 0 80px;
    display: flex;
    justify-content: center;
}

.email-form-wrapper {
    max-width: 600px;
    /* control width */
    width: 100%;
    margin: 0 auto 16px;
    display: flex;
    justify-content: center;
}

.email-form {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 600px;
}

.email-input {
    flex: 1;
    max-width: 400px;
    /* prevent full width */
    padding: 16px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 8px 0 0 8px;
    outline: none;
    min-width: 0;
}

.submit-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    font-size: 16px;
    font-weight: 600;
    background-color: #ff4040;
    color: white;
    border: 1px solid #ff4040;
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.submit-btn:hover {
    background-color: #e03b3b;
}

.submit-btn svg {
    width: 22px;
    height: 22px;
    fill: white;
    flex-shrink: 0;
}

.centered-paragraph {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    color: #777;
    font-size: 15px;
    line-height: 22px;
    margin-top: 5px;
}

/* Responsive */

@media (max-width: 600px) {

    .email-form-wrapper,
    .centered-paragraph {
        max-width: 100%;
        padding: 0 20px;
    }

    .email-input {
        max-width: none;
        flex: 1 1 60%;
        font-size: 14px;
        padding: 14px;
    }

    .submit-btn {
        font-size: 14px;
        padding: 14px 20px;
    }

    .submit-btn svg {
        width: 20px;
        height: 20px;
    }

    .centered-paragraph {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (max-width: 400px) {
    .email-input {
        flex: 1 1 50%;
        padding: 12px;
    }

    .submit-btn {
        font-size: 13px;
        padding: 12px 16px;
    }

    .submit-btn svg {
        width: 18px;
        height: 18px;
    }
}


.highlight-yellow {
    background-color: #fff176;
    /* soft yellow, like a highlighter */
    padding: 0 4px;
    border-radius: 2px;
}


.heading-card {
    color: #0a0a0a;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Outfit, sans-serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 72px;
    position: sticky;
    top: 45vh;
    letter-spacing: -0.02em;
}

/* Responsive override for mobile */
@media screen and (max-width: 991px) {
    .heading-card {
        font-size: 40px;
        line-height: 62px;
        position: static;
    }
}



/* Hadeed's Updated Centered Styles */

.heading {
    color: white;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Outfit, sans-serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 72px;
}


.heading-hero {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Outfit, sans-serif;
    font-size: 4.4rem;
    font-weight: 600;
    line-height: 72px;
    text-align: center;
}

.heading.no-margin {
    margin-top: 0;
    margin-bottom: 0;
}

.heading.d1-regular {
    color: var(--shades-white);
    letter-spacing: -.02em;
    font-size: 100px;
    font-weight: 400;
    line-height: 120px;
}

.heading.d1-semi-bold {
    letter-spacing: -.02em;
    font-size: 100px;
    font-weight: 600;
    line-height: 120px;
    display: none;
}

.heading.d1-bold {
    letter-spacing: -.02em;
    font-size: 105px;
    font-weight: 700;
    line-height: 120px;
}

.heading.d2-regular {
    letter-spacing: -.02em;
    font-size: 72px;
    font-weight: 400;
    line-height: 94px;
}

.heading.d2-bold {
    letter-spacing: -.02em;
    font-size: 72px;
    font-weight: 600;
    line-height: 94px;
}

.heading.d2-bold.gap {
    margin-bottom: 100px;
}

.heading.h1-regular {
    letter-spacing: -.02em;
    font-weight: 400;
    line-height: 83px;
}

.heading.h1-regular.headline-text-size-for-tablet.headline-text-size-for-mobile.color {
    color: var(--primary-800);
}

.heading.h1-regular.animation.align {
    text-align: center;
}

.heading.h1-semi-bold {
    letter-spacing: -.02em;
    font-weight: 600;
}

.heading.h1-semi-bold.swap,
.heading.h1-semi-bold.align {
    text-align: center;
}

.heading.h1-semi-bold.hz-title-text-color {
    color: var(--primary-700);
    font-size: 54px;
    line-height: 70px;
}

.heading.h1-semi-bold.ux-title-color,
.heading.h1-semi-bold.design-text-color {
    color: var(--primary-700);
}

.heading.h1-semi-bold.color {
    color: var(--primary-800);
}

.heading.h1-semi-bold.color.width {
    width: 50%;
}

.heading.h1-semi-bold.color.margin {
    margin-bottom: 16px;
}

.heading.h1-bold {
    letter-spacing: -.02em;
    font-weight: 700;
}

.heading.h1-s-regular {
    letter-spacing: -.02em;
    font-size: 54px;
    font-weight: 400;
    line-height: 70px;
}

.heading.h1-s-regular.color {
    color: var(--primary-800);
}

.heading.h1-s-regular.color.margin {
    margin-bottom: 40px;
}

.heading.h1-s-semi-bold {
    letter-spacing: -.02em;
    font-size: 54px;
    font-weight: 600;
    line-height: 70px;
}

.heading.h1-s-semi-bold.align {
    text-align: center;
}

.heading.h1-s-semi-bold.align.occ-text-color {
    color: var(--primary-800);
}

.heading.h1-s-semi-bold.align.text-color {
    color: var(--primary-900);
    font-weight: 400;
}

.heading.h1-s-semi-bold.color {
    color: var(--primary-700);
}

.heading.h1-s-semi-bold.width {
    width: 25%;
}

.heading.h1-s-semi-bold.text-color {
    color: var(--primary-900);
    font-weight: 400;
}

.heading.h1-s-bold {
    letter-spacing: -.02em;
    font-size: 54px;
    font-weight: 600;
    line-height: 70px;
}

.heading.h2-regular {
    letter-spacing: -.02em;
    font-size: 48px;
    font-weight: 400;
    line-height: 62px;
}

.heading.h2-semi-bold {
    letter-spacing: -.02em;
    font-size: 48px;
    font-weight: 600;
    line-height: 62px;
}

.heading.h2-semi-bold.ux-text-color {
    color: var(--primary-700);
}

.heading.h2-semi-bold.color {
    color: var(--shades-black);
}

.heading.h2-semi-bold.color.margin {
    color: var(--primary-900);
    margin-bottom: 80px;
}


.heading.h2-bold {
    letter-spacing: -.02em;
    font-size: 48px;
    font-weight: 700;
    line-height: 62px;
}

.heading.h2-m-regular {
    letter-spacing: -.02em;
    font-size: 40px;
    font-weight: 400;
    line-height: 62px;
}

.heading.h2-m-semi-bold {
    letter-spacing: -.02em;
    font-size: 40px;
    line-height: 62px;
    position: sticky;
    top: 45vh;
}

.heading.h2-m-semi-bold.hide {
    display: none;
}

.heading.h2-m-bold {
    letter-spacing: -.02em;
    font-size: 48px;
    font-weight: 700;
    line-height: 62px;
}

.heading.h2-s-regular {
    letter-spacing: -.02em;
    font-size: 36px;
    font-weight: 400;
    line-height: 47px;
}

.heading.h2-s-semi-bold {
    letter-spacing: -.02em;
    font-size: 36px;
    font-weight: 600;
    line-height: 47px;
}

.heading.h2-s-semi-bold.dm-link-text-color {
    color: var(--primary-600);
}

.heading.h2-s-semi-bold.color {
    color: var(--primary-800);
}

.heading.h2-s-semi-bold.color.margin {
    margin-bottom: 16px;
}

.heading.h2-s-semi-bold.color.margin.color-for-home {
    color: var(--shades-white);
}

.heading.h2-s-bold {
    letter-spacing: -.02em;
    font-size: 36px;
    font-weight: 700;
    line-height: 47px;
}

.heading.h2-s-medium {
    letter-spacing: -.02em;
    font-size: 36px;
    font-weight: 500;
    line-height: 47px;
}

.heading.h2-s-medium.list-color {
    grid-row-gap: 12px;
    color: var(--primary-700);
    flex-direction: column;
    display: flex;
}

.heading.h3-regular {
    letter-spacing: -.02em;
    font-size: 32px;
    font-weight: 400;
    line-height: 42px;
}

.heading.h3-regular.nav-menu-text-color,
.heading.h3-regular.sc-content-text-color {
    color: var(--primary-700);
}

.heading.h3-regular.color {
    color: var(--primary-600);
}

.heading.h3-regular.color.width {
    width: 50%;
}

.heading.h3-medium {
    letter-spacing: -.02em;
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
}

.heading.h3-medium.color {
    color: var(--shades-black);
}

.heading.h3-medium.nav-menu-text-color {
    color: var(--primary-700);
}



.heading.h3-semi-bold {
    letter-spacing: -.02em;
    font-size: 32px;
    font-weight: 600;
    line-height: 42px;
}

.heading.h3-semi-bold.occ-service-text-color {
    color: var(--primary-700);
}

.heading.h3-semi-bold.color {
    color: var(--primary-800);
}

.heading.h3-bold {
    letter-spacing: -.02em;
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
}

.heading.h3-s-regular {
    letter-spacing: -.02em;
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
}

.heading.h3-s-medium {
    letter-spacing: -.02em;
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
}

.heading.h3-s-semi-bold {
    letter-spacing: -.02em;
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
}

.heading.h3-s-semi-bold.phone-text-color {
    color: var(--primary-600);
}

.heading.h3-s-semi-bold.color {
    color: var(--primary-800);
}

.heading.h3-s-semi-bold.color.margin {
    margin-bottom: 20px;
}

.heading.h3-s-bold {
    letter-spacing: -.02em;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
}

.heading.h4-regular {
    letter-spacing: -.02em;
    font-size: 24px;
    font-weight: 400;
    line-height: 31px;
}

.heading.h4-regular.color {
    color: var(--primary-400);
}

.heading.h4-regular.color.width {
    width: 50%;
}

.heading.h4-semi-bold {
    letter-spacing: -.02em;
    font-size: 24px;
    font-weight: 600;
    line-height: 31px;
}

.heading.h4-semi-bold.nav-text-color {
    color: var(--primary-700);
}

.heading.h4-semi-bold.color {
    color: var(--neutral-800);
}

.heading.h4-semi-bold.color.margin {
    margin-bottom: 8px;
}

.heading.h4-bold {
    letter-spacing: -.02em;
    font-size: 24px;
    font-weight: 700;
    line-height: 31px;
}

.heading.h5-light,
.heading.h5-regular {
    letter-spacing: -.02em;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
}

.heading.h5-regular.color {
    color: var(--primary-800);
}

.heading.h5-semi-bold {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

.heading.h5-semi-bold.ods-text-color {
    color: #ff4040;
}

.heading.h5-semi-bold.odp-subtitle-text-color {
    color: #ff4040;
}

.heading.h5-semi-bold.occ-text-color {
    color: var(--primary-400);
}

.heading.h5-bold {
    letter-spacing: -.02em;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
}

.heading.h5-medium {
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
}

.heading.h5-medium.info-mail-text-size-for-1920 {
    font-size: 24px;
    line-height: 31px;
}

.text-block {
    color: #33b8a9;
    text-align: center;
    font-family: Supreme, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
}

.sg-typeface-display-and-heading {
    padding: 100px 80px;
}

.sg-typeface-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.sg-d1-typeface-main-div {
    grid-column-gap: 60px;
    flex-direction: row;
    display: flex;
}

.sg-tf-details {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-direction: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 40px;
    display: flex;
}

.sg-title {
    color: var(--shades-white);
    font-family: Outfit, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
}

.sg-title.paragraph-color {
    color: #001412;
}

.sg-details {
    color: #33b8a9;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 23px;
}

.sg-tf-all-div {
    flex-direction: column;
    display: flex;
}

.sg-tf-main-div {
    grid-column-gap: 16px;
    grid-row-gap: 100px;
    flex-direction: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
}

.paragraph {
    margin-bottom: 0;
    text-decoration: none;
}

.paragraph.p1-light {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 31px;
}

.paragraph.p1-light.owp-text-color {
    color: var(--shades-white);
}

.paragraph.p1-regular {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 31px;
}

.paragraph.p1-regular.color {
    color: var(--primary-800);
}

.paragraph.p1-medium {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
}

.paragraph.p1-medium.design-text-color {
    color: var(--primary-700);
}

.paragraph.p1-bold {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 31px;
}

.paragraph.p2-light {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 26px;
}

.paragraph.p2-regular {
    color: var(--shades-white);
    text-align: left;
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
}

.paragraph.p2-regular.dm-text-color,
.paragraph.p2-regular.phone-number-text-color {
    color: var(--primary-600);
}

.paragraph.p2-regular.phone-number-text-color.phn-paragraph-text-size-for-mobile.text-swap {
    text-align: right;
}

.paragraph.p2-regular.odp-body-text-color,
.paragraph.p2-regular.ct-text-color {
    color: var(--shades-white);
}

.paragraph.p2-regular.nav-text-color {
    color: var(--primary-700);
}

.paragraph.p2-regular.owp-text-color {
    color: var(--shades-white);
}

.paragraph.p2-regular.ux-text-color,
.paragraph.p2-regular.design-text-color {
    color: var(--primary-700);
}

.paragraph.p2-regular.color {
    color: var(--primary-400);
}

.paragraph.p2-regular.color.margin {
    margin-bottom: 60px;
}

.paragraph.p2-regular.link-color {
    color: var(--shades-black);
}

.paragraph.p2-regular.link-color.new-link-color {
    color: var(--primary-500);
}

.paragraph.p2-regular.pp-text-color {
    color: var(--primary-800);
}

.paragraph.p2-regular._w-view-text-color,
.paragraph.p2-regular._w-result-text-color {
    color: var(--shades-white);
}

.paragraph.p2-medium {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
}

.paragraph.p2-medium.ux-text-color {
    color: var(--primary-700);
}

.paragraph.p2-bold {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
}

.paragraph.p3-light {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 23px;
}

.paragraph.p3-regular {
    color: var(--shades-white);
    text-align: left;
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 23px;
}

.paragraph.p3-regular.f-newsletter-text-color {
    color: var(--shades-white);
}

.paragraph.p3-regular.faq-text-color {
    color: var(--neutral-500);
}

.paragraph.p3-regular.ct-text-color {
    color: var(--shades-white);
}

.paragraph.p3-regular.occ-service-text-color {
    color: var(--primary-700);
}

.paragraph.p3-regular.color {
    color: var(--primary-800);
}

.paragraph.p3-regular.color.margin {
    margin-bottom: 60px;
}

.paragraph.p3-regular.b-text-color {
    color: var(--neutral-700);
}

.paragraph.p3-regular.b-text-color.margin {
    margin-bottom: 8px;
}

.paragraph.p3-regular.b-text-color.align {
    text-align: center;
}

.paragraph.p3-regular.b-para-text-color,
.paragraph.p3-regular._w-text-color,
.paragraph.p3-regular.home-link-color,
.paragraph.p3-regular._w-para-text-color {
    color: var(--shades-white);
}

.paragraph.p3-medium {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
}

.paragraph.p3-medium.sw-text-color {
    color: var(--shades-white);
}

.paragraph.p3-medium.margin {
    color: var(--primary-900);
    margin-bottom: 4px;
}

.paragraph.p3-medium.f-phn-text-color {
    color: var(--shades-white);
}

.paragraph.p3-bold {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
}

.paragraph.p3-bold.text-color,
.paragraph.p3-bold.btn-text-color {
    z-index: 1;
    color: var(--shades-white);
    position: relative;
}

.paragraph.p4-light {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 21px;
}

.paragraph.p4-light.btm-info-text-color,
.paragraph.p4-light._w-web-link-text-color {
    color: var(--shades-white);
}

.paragraph.p4-regular {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}

.paragraph.p4-regular.text-color {
    color: var(--neutral-600);
}

.paragraph.p4-regular.page-link-color {
    color: var(--shades-white);
}

.paragraph.p4-regular.category-text-color.width {
    width: 50%;
}

.paragraph.p4-regular.footer-text-color {
    color: var(--shades-white);
}

.paragraph.p4-medium {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
}

.paragraph.p4-medium.text-color {
    color: var(--shades-black);
}

.paragraph.p4-medium.b-text-color {
    color: var(--neutral-800);
}

.paragraph.p4-bold {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
}

.paragraph.p4-bold.text-color-for-read-more-btn {
    color: var(--neutral-800);
}

.paragraph.p5-light {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 19px;
}

.paragraph.p5-light.owp-text-color {
    color: var(--shades-white);
}

.paragraph.p5-light._w-tag-text-color {
    color: var(--shades-white);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
}

.paragraph.p5-regular {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
}

.paragraph.p5-regular.blog-post-date {
    color: var(--neutral-600);
}

.paragraph.p5-medium {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
}

.paragraph.p5-medium.ux-text-color {
    color: var(--primary-700);
}

.paragraph.p5-medium.color,
.paragraph.p5-medium.tag {
    color: var(--shades-white);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.paragraph.p5-bold {
    color: var(--shades-black);
    letter-spacing: -.02em;
    font-family: Supreme, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
}

.sg-title-headline {
    grid-column-gap: 40px;
    align-items: center;
    margin-bottom: 100px;
    display: flex;
}

.headline {
    color: var(--shades-white);
    text-align: left;
    font-family: Outfit, sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 94px;
}

.headline.paragraph-color {
    color: var(--shades-black);
}

.sub-title {
    color: var(--shades-white);
    text-align: left;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 23px;
}

.sub-title.paragraph-color {
    color: var(--shades-black);
}

.text-logo {
    background-color: var(--shades-white);
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 14px;
    display: flex;
}

.text-logo-paragraph {
    background-color: var(--shades-white);
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    display: flex;
}

.sg-button {
    padding: 100px 80px;
}

.sg-btn-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.sg-color {
    padding: 100px 80px;
}

.sg-color-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.sg-color-main-div {
    grid-row-gap: 60px;
    flex-direction: column;
    display: flex;
}

.sg-color-div {
    grid-row-gap: 40px;
    flex-direction: column;
    display: flex;
}

.color-title {
    color: var(--shades-white);
    font-family: Outfit, sans-serif;
    font-size: 54px;
    font-weight: 600;
    line-height: 62px;
}

.color-name {
    color: #00a693;
    font-family: Supreme, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
}

.color-name.color {
    color: var(--neutral-500);
}

.color-name.color-for-shades {
    color: var(--shades-white);
}

.sg-color-name-div {
    grid-row-gap: 14px;
    flex-direction: column;
    display: flex;
}

.sg-color-plate-blocks {
    grid-column-gap: 0px;
    justify-content: space-between;
    display: flex;
}

.sg-color-plate-blocks.flex {
    grid-column-gap: 32px;
    justify-content: flex-start;
}

.p-50 {
    background-color: var(--primary-50);
}

.p-100 {
    background-color: var(--primary-100);
}

.p-200 {
    background-color: var(--primary-200);
}

.p-300 {
    background-color: var(--primary-300);
}

.p-400 {
    background-color: var(--primary-400);
}

.p-500 {
    background-color: var(--primary-500);
}

.p-600 {
    background-color: var(--primary-600);
}

.p-675 {
    background-color: var(--primary-675);
}

.p-700 {
    background-color: var(--primary-700);
}

.p-725 {
    background-color: var(--primary-725);
}

.p-800 {
    background-color: var(--primary-800);
}

.p-900 {
    background-color: var(--primary-900);
}

.n-50 {
    background-color: var(--neutral-50);
}

.n-100 {
    background-color: var(--neutral-100);
}

.n-200 {
    background-color: var(--neutral-200);
}

.n-300 {
    background-color: var(--neutral-300);
}

.n-400 {
    background-color: var(--neutral-400);
}

.n-500 {
    background-color: var(--neutral-500);
}

.n-600 {
    background-color: var(--neutral-600);
}

.n-700 {
    background-color: var(--neutral-700);
}

.n-800 {
    background-color: var(--neutral-800);
}

.n-900 {
    background-color: var(--neutral-900);
}

.shades-black {
    background-color: var(--shades-black);
}

.shades-white {
    background-color: var(--shades-white);
}

.sg-btn-main-div {
    grid-column-gap: 60px;
    display: flex;
}

.sg-btn-div {
    grid-row-gap: 14px;
    flex-direction: column;
    display: flex;
}

.btn-title {
    color: var(--shades-white);
    font-family: Supreme, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
}

.button-request-a-project {
    background-color: #ff4040;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    padding: 16px 36px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1;
    border-radius: 100px;
    transition: all 0.25s ease;
    display: inline-flex;
    color: #ffffff;
    text-decoration: none;
    border: 1.5px solid transparent;
}

.button-request-a-project:hover {
    background-color: #e03030;
    transform: scale(1.02);
    border-color: transparent;
}

.button-request-a-project.seconday-button {
    background-color: transparent;
    color: #0a0a0a;
    border: 1.5px solid #0a0a0a;
}

.button-request-a-project.seconday-button:hover {
    background-color: #0a0a0a;
    color: #ffffff;
}

.btn-view-all {
    border: 1.5px solid #0a0a0a;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    padding: 14px 32px;
    border-radius: 100px;
    text-decoration: none;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: all 0.25s ease;
}

.btn-view-all:hover {
    background-color: #0a0a0a;
    color: #ffffff;
}

.btn-shadow-div {
    background-color: var(--primary-500);
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;
    height: 120px;
    display: none;
    position: absolute;
    inset: 0%;
}

.btn-read-more {
    grid-column-gap: 8px;
    border: 2px none var(--primary-500);
    justify-content: flex-start;
    align-items: center;
    width: 120px;
    height: auto;
    text-decoration: none;
    display: flex;
    position: static;
    overflow: visible;
}

.sg-typeface-paragraph {
    padding: 100px 80px;
}

.sg-typeface-paragraph.bg-color {
    background-color: var(--shades-white);
}

.contact-form-section {
    padding: 140px 80px 100px;
    overflow: hidden;
}

.form-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.contact-main-div {
    grid-row-gap: 100px;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
}

.contact-form {
    width: 50%;
}

.name-box {
    border: 1px solid var(--primary-200);
    background-color: var(--primary-50);
    color: var(--primary-900);
    height: 63px;
    margin-bottom: 0;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    line-height: 23px;
}

.name-box:focus {
    border-width: 2px;
    border-color: var(--primary-400);
    background-color: var(--shades-white);
}

.name-box:focus-visible,
.name-box[data-wf-focus-visible] {
    border-color: var(--primary-400);
    background-color: var(--shades-white);
}

.name-box::placeholder {
    color: var(--neutral-500);
}

.title-and-title-box {
    grid-row-gap: 12px;
    flex-direction: column;
    display: flex;
}

.form {
    grid-row-gap: 60px;
    flex-direction: column;
    display: flex;
}

.form-submit-btn {
    background-color: var(--primary-600);
    height: 66px;
    font-family: Outfit, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    transition: all .25s;
    position: static;
}

.form-submit-btn:hover {
    background-color: var(--primary-700);
}

.message-text-area {
    border: 1px solid var(--primary-200);
    background-color: var(--primary-50);
    color: var(--primary-800);
    height: 63px;
    min-height: 200px;
    margin-bottom: 0;
    padding: 20px;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    line-height: 23px;
}

.message-text-area:focus {
    border-color: var(--primary-400);
    background-color: var(--shades-white);
}

.message-text-area:focus-visible,
.message-text-area[data-wf-focus-visible] {
    border-color: var(--primary-400);
}

.message-text-area::placeholder {
    color: var(--neutral-500);
}

.contact-and-title-div {
    grid-column-gap: 60px;
    grid-row-gap: 0px;
    flex-direction: row;
    justify-content: space-between;
    display: flex;
}

.contact-right-div {
    grid-row-gap: 40px;
    flex-direction: column;
    justify-content: flex-start;
    width: 50%;
    display: flex;
}

.direct-message-div {
    grid-row-gap: 12px;
    flex-direction: column;
    align-items: flex-end;
    display: flex;
}

.contact-phone-and-address-div {
    grid-row-gap: 40px;
    flex-direction: column;
    align-items: stretch;
    display: flex;
}

.contact-phone,
.contact-address {
    grid-row-gap: 12px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    display: flex;
}

.contact-social-media {
    grid-column-gap: 24px;
    justify-content: flex-end;
    display: flex;
}

.sm-icon {
    width: 40px;
    height: 40px;
}

.footer {
    background-color: var(--shades-black);
    padding: 0 80px;
    overflow: hidden;
}

.footer-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.footer-title-and-btn {
    grid-column-gap: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
}

.contact-btn {
    opacity: 1;
    text-decoration: none;
    transition: opacity .25s;
    overflow: hidden;
}

.contact-btn:hover {
    opacity: .8;
}

.c-btn-animation-line {
    background-color: var(--shades-white);
    width: 100%;
    height: 4px;
}

.footer-info-div {
    grid-column-gap: 0px;
    grid-row-gap: 120px;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 60px;
    padding-bottom: 32px;
    display: flex;
}

.footer-info {
    grid-row-gap: 20px;
    flex-direction: column;
    display: flex;
}

.footer-dm-div,
.footer-phone-div,
.footer-address-div,
.footer-pages-div {
    grid-row-gap: 8px;
    flex-direction: column;
    display: flex;
}

.footer-reach-us-at-div {
    grid-row-gap: 32px;
    flex-direction: column;
    display: flex;
}

.footer-sm-icon {
    grid-column-gap: 32px;
    display: flex;
}

.sm-icon-div {
    transition: all .25s;
}

.sm-icon-div:hover {
    opacity: .8;
}

.footer-sm-icon-div {
    grid-row-gap: 24px;
    flex-direction: column;
    display: flex;
}

.text-field {
    width: 100%;
    height: 60px;
    margin-bottom: 0;
    padding: 0 20px 0 16px;
}

.text-field::placeholder {
    color: var(--neutral-500);
    font-size: 16px;
    line-height: 21px;
}

.newsletter-form {
    position: relative;
}

.submit-button {
    background-color: var(--primary-600);
    background-image: url('../images/Btn.svg');
    background-position: 0 0;
    background-size: auto;
    width: 64px;
    padding-left: 12px;
    padding-right: 12px;
    position: absolute;
    inset: 0% 0% 0% auto;
}

.footer-newsletter-div {
    grid-row-gap: 24px;
    flex-direction: column;
    display: flex;
}

.footer-all-div {
    justify-content: space-between;
    width: 100%;
    display: flex;
}

.footer-bottom-info {
    justify-content: space-between;
    display: flex;
}

.footer-bottom-link {
    grid-column-gap: 20px;
    display: flex;
}

.footer-all-page-link {
    grid-row-gap: 8px;
    flex-direction: column;
    display: flex;
}

.sm-icon-col {
    grid-column-gap: 24px;
    display: flex;
}

.h-request-a-project {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    display: flex;
}

.preloader {
    z-index: 1000;
    background-color: var(--primary-700);
    justify-content: center;
    align-items: center;
    display: none;
    position: absolute;
    inset: 0%;
}

.os-main-div {
    grid-row-gap: 100px;
    flex-direction: column;
    display: flex;
}

.os-title-div {
    grid-row-gap: 20px;
    flex-direction: column;
    display: flex;
}

.os-content-block {
    grid-column-gap: 32px;
    display: flex;
}

.os-content-div {
    grid-row-gap: 24px;
    background-color: var(--primary-900);
    flex-direction: column;
    width: 50%;
    padding: 32px 32px 40px;
    display: flex;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.os-content-div:hover {
    background-color: #ff4040 !important;
}

.os-content-icon-div {
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.os-content-text-div {
    grid-row-gap: 16px;
    flex-direction: column;
    display: flex;
}

.os-content {
    grid-row-gap: 32px;
    flex-direction: column;
    display: flex;
}

.os-icon,
.os-hover-icon {
    position: absolute;
    transition: filter 0.3s ease;
    /* Shift teal circle (#00a693) to brand red (#ff4040) */
    filter: hue-rotate(186deg) saturate(2) brightness(1.05);
}

.os-content-div:hover .os-icon,
.os-content-div:hover .os-hover-icon {
    /* On red card: make whole icon white */
    filter: brightness(0) invert(1);
}

.section {
    background-color: var(--shades-black);
    padding: 100px 80px;
    overflow: hidden;
}

.section.shades-black {
    overflow: hidden;
}

.section.color {
    background-color: var(--primary-50);
}

.section.shades-white {
    background-color: var(--shades-white);
}

.section.flex {
    align-items: center;
    height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    position: relative;
}

.section.flex.bg-image {
    /*  background-image: url('../images/Hero-Section-Image.png');*/
    background-size: 2558px;
    position: static;
}

.enccii-hero-section {
    background-color: hsla(333, 0%, 100%, 1);
    padding-top: 160px;
    padding-bottom: 52px;
    background-image: radial-gradient(circle at 0% 0%, hsla(64, 82%, 77%, 0.35) 3.1210986267166043%, transparent 40%), radial-gradient(circle at 20% 0%, hsla(5, 77%, 74%, 0.35) 3.1210986267166043%, transparent 40%), radial-gradient(circle at 40% 0%, hsla(315, 77%, 74%, 0.35) 3.1210986267166043%, transparent 40%), radial-gradient(circle at 60% 0%, hsla(256, 77%, 74%, 0.35) 3.1210986267166043%, transparent 40%), radial-gradient(circle at 80% 0%, hsla(191, 77%, 74%, 0.35) 3.1210986267166043%, transparent 40%), radial-gradient(circle at 100% 0%, hsla(152, 77%, 74%, 0.35) 3%, transparent 40%);
    background-blend-mode: normal, normal, normal, normal, normal, normal;
}

/* ===== Services page hero (white, centered hook + CTA) ===== */
.section.services-hero-section {
    background-color: #ffffff;
    background-image: none;
    padding-top: 170px;
    padding-bottom: 64px;
}

.services-hero-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.services-hero-eyebrow {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ff4040;
    margin-bottom: 24px;
}

.services-hero-heading {
    font-weight: 600;
    font-size: clamp(32px, 7.2vw, 88px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #001412;
    margin: 0 0 28px;
    text-wrap: balance;
}

.services-hero-wrap.services-hero-wrap--two-line {
    max-width: 1400px;
}

.services-hero-heading.services-hero-heading--two-line {
    font-size: clamp(32px, 4.6vw, 66px);
    line-height: 1.1;
}

.services-hero-subtext {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #546286;
    max-width: 580px;
    margin: 0 0 44px;
}

.services-hero-cta-wrap {
    display: flex;
    justify-content: center;
}

.button-request-a-project.services-hero-cta {
    gap: 10px;
    width: auto;
    height: auto;
    padding: 18px 38px;
    font-size: 16px;
    font-weight: 600;
}

.services-hero-cta-arrow {
    flex: none;
    transition: transform 0.25s ease;
}

.services-hero-cta:hover .services-hero-cta-arrow {
    transform: translateX(4px);
}

.services-hero-cta:focus-visible {
    outline: 2px solid #001412;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    .services-hero-cta-arrow,
    .services-hero-cta:hover .services-hero-cta-arrow {
        transition: none;
        transform: none;
    }
}

@media (max-width: 767px) {
    .section.services-hero-section {
        padding-top: 116px;
        padding-bottom: 40px;
    }

    .services-hero-wrap {
        padding: 0 20px;
    }

    .services-hero-eyebrow {
        font-size: 11.5px;
        letter-spacing: 0.12em;
        line-height: 1.5;
        max-width: 260px;
        margin-bottom: 18px;
        text-wrap: balance;
    }

    .services-hero-heading {
        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.1;
        margin-bottom: 18px;
    }

    .services-hero-heading.services-hero-heading--two-line {
        font-size: clamp(24px, 6.8vw, 34px);
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .services-hero-heading br {
        display: none;
    }

    .services-hero-subtext {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 28px;
    }

    .button-request-a-project.services-hero-cta {
        width: auto;
        height: auto;
        padding: 14px 28px;
        font-size: 15px;
    }
}

/* ===== Services page: four service pillars (accordion) ===== */
.section.pillars-section {
    background-color: #ffffff;
    padding: 100px 0 82px;
}

.pillars-wrap {
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 48px);
}

.pillars-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 70px;
}

.pillars-title {

    font-weight: 600;
    font-size: clamp(30px, 4.6vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #001412;
    max-width: 700px;
    margin: 0;
    text-wrap: balance;
}

.pillars-intro {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #546286;
    max-width: 330px;
    margin: 0;
}

.pillars-head.pillars-head--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.pillars-head--stacked .pillars-intro {
    max-width: 75%;
    font-size: clamp(16px, 1.4vw, 18px);
}

@media (max-width: 991px) {
    .pillars-head--stacked .pillars-intro {
        max-width: 100%;
    }
}

.pillars-h {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit
}

.pillars-list {
    --pl-ink: #001412;
    --pl-muted: #546286;
    --pl-red: #ff4040;
    --pl-line: #e6e9f0;
    --pl-soft: #f5f6f9;
    display: flex;
    flex-direction: column;
    padding-bottom: 6px
}

.pillars-item {
    --fg: var(--pl-ink);
    color: var(--fg);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pl-line);
    border-radius: 32px;
    padding: 0 clamp(28px, 4vw, 64px);
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 20, 18, .05);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), color .4s
}

.pillars-item:nth-child(1) {
    --k: 0;
    z-index: 1
}

.pillars-item:nth-child(2) {
    --k: 1;
    z-index: 2
}

.pillars-item:nth-child(3) {
    --k: 2;
    z-index: 3
}

.pillars-item:nth-child(4) {
    --k: 3;
    z-index: 4
}

.pillars-item+.pillars-item {
    margin-top: -26px
}

.pillars-item:not(:last-child) .pillars-trigger {
    padding-bottom: 56px
}

.pillars-item:not(.is-open):hover {
    transform: translateY(-5px)
}

.pillars-item.is-open .pillars-trigger {
    padding-bottom: 30px
}

.pillars-trigger {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    width: 100%;
    padding: 30px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    position: relative;
    z-index: 2
}

.pillars-trigger:focus-visible {
    outline: 2px solid var(--pl-ink);
    outline-offset: 4px;
    border-radius: 12px
}

.pillars-dots {
    display: inline-flex;
    gap: 6px
}

.pillars-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c9cedd;
    transition: background-color .3s, transform .3s
}

.pillars-item.is-open .pillars-dots i,
.pillars-trigger:hover .pillars-dots i {
    background: var(--pl-red)
}

.pillars-item.is-open .pillars-dots i:first-child {
    transform: translateY(-3px)
}

.pillars-name {
    font-weight: 600;
    font-size: clamp(26px, 3.8vw, 48px);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: inherit;
    transition: opacity .3s
}

.pillars-toggle {
    position: relative;
    justify-self: end;
    width: 36px;
    height: 36px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    opacity: .45;
    transition: opacity .3s
}

.pillars-item.is-open .pillars-toggle {
    opacity: 1
}

.pillars-toggle::before,
.pillars-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    margin: -.75px 0 0 -6px;
    background: currentColor;
    transition: transform .3s
}

.pillars-toggle::after {
    transform: rotate(90deg)
}

.pillars-item.is-open .pillars-toggle::after {
    transform: rotate(0)
}

.pillars-panel {
    display: grid;
    grid-template-rows: 1fr;
    position: relative;
    z-index: 2
}

.pillars-list.is-ready .pillars-panel {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .45s ease, visibility 0s linear .45s
}

.pillars-list.is-ready .pillars-item.is-open .pillars-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .45s ease, visibility 0s
}

.pillars-panel-clip {
    overflow: hidden;
    min-height: 0
}

.pillars-panel-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 6px 0 62px 44px
}

.pillars-outcome {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(22px, 2.5vw, 34px);
    line-height: 1.22;
    margin: 0 0 16px;
    max-width: 620px
}

.pillars-desc {
    font-size: 18px;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 580px
}

.pillars-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0
}

.pillars-chips li {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 11px 17px;
    border-radius: 100px
}

/* open-state themes (each row becomes its card) */
.pillars-t1 {
    background-color: #0b0b0d;
    background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .08) 39%, rgba(255, 255, 255, 0) 47%);
    --fg: #f5f5f7;
    border-color: #0b0b0d
}

.pillars-t1::before,
.pillars-t1::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none
}

.pillars-t1::before {
    width: 640px;
    height: 340px;
    left: 50%;
    top: -190px;
    background: radial-gradient(ellipse closest-side, rgba(214, 219, 232, .5) 0, rgba(214, 219, 232, .4) 28%, rgba(214, 219, 232, .16) 62%, rgba(214, 219, 232, 0) 100%);
    animation: pv-glow-silver 30s ease-in-out infinite alternate
}

.pillars-t1::after {
    width: 520px;
    height: 260px;
    left: 0;
    bottom: -90px;
    background: radial-gradient(ellipse closest-side, rgba(255, 64, 64, .2) 0, rgba(255, 64, 64, .16) 28%, rgba(255, 64, 64, .06) 62%, rgba(255, 64, 64, 0) 100%);
    animation: pv-glow-red 36s ease-in-out infinite alternate
}

@keyframes pv-glow-silver {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(var(--sx-a, -35%))
    }
}

@keyframes pv-glow-red {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(var(--sx-b, 35%))
    }
}

/* Paid Advertising = the featured service (open by default) */
.pillars-t1 {
    box-shadow: 0 -2px 8px rgba(0, 20, 18, .05), 0 20px 44px -26px rgba(255, 64, 64, .4)
}

.pillars-t1.is-open .pillars-name {
    font-size: clamp(30px, 4.6vw, 58px)
}

.pillars-t1 .pillars-desc {
    color: rgba(245, 245, 247, .7)
}

.pillars-t1 .pillars-chips li {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16)
}

.pillars-t2 {
    background: #fff;
    background-image: radial-gradient(circle at 0 0, hsla(64, 82%, 77%, .4), transparent 45%), radial-gradient(circle at 50% 0, hsla(315, 77%, 74%, .35), transparent 45%), radial-gradient(circle at 100% 0, hsla(191, 77%, 74%, .4), transparent 45%), radial-gradient(circle at 100% 100%, hsla(152, 77%, 74%, .35), transparent 45%)
}

.pillars-t3 {
    background-color: #ffecec;
    background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .9) 37%, rgba(255, 255, 255, 0) 44%), linear-gradient(115deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, 0) 71%), radial-gradient(circle at 0% 0%, #fff, rgba(255, 255, 255, 0) 40%), linear-gradient(135deg, #fff6f6 0%, #ffecec 45%, #ffdada 100%);
    --fg: #001412;
    border-color: #ffd3d3
}

.pillars-t3 .pillars-desc {
    color: #546286
}

.pillars-t3 .pillars-chips li {
    background: #fff;
    border: 1px solid rgba(255, 64, 64, .28)
}

.pillars-t4 {
    background-color: #fff;
    background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 34%, hsla(262, 100%, 93%, .65) 41%, rgba(255, 255, 255, 0) 49%), radial-gradient(circle at 100% 0%, hsla(268, 100%, 84%, .95), hsla(268, 100%, 84%, 0) 42%), radial-gradient(circle at 0% 100%, hsla(330, 100%, 86%, .9), hsla(330, 100%, 86%, 0) 40%), radial-gradient(circle at 100% 100%, hsla(190, 100%, 80%, .95), hsla(190, 100%, 80%, 0) 40%), radial-gradient(circle at 0% 0%, hsla(48, 100%, 82%, .9), hsla(48, 100%, 82%, 0) 34%);
    border-color: #fff
}

.pillars-t4::after {
    content: "";
    position: absolute;
    inset: -40% auto auto -10%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 62%);
    pointer-events: none
}

.pillars-t2 .pillars-desc {
    color: var(--pl-muted)
}

.pillars-t4 .pillars-desc {
    color: var(--pl-muted)
}

.pillars-t2 .pillars-chips li {
    background: rgba(255, 255, 255, .75);
    border: 1px solid #d7dbe6
}

.pillars-t4 .pillars-chips li {
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 1px 0 rgba(120, 90, 200, .12)
}

/* visuals */
.pv-vis {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.pv-box {
    width: 100%;
    max-width: 540px;
    border-radius: 22px;
    padding: 20px
}

.pv-ads {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14)
}

/* Paid Advertising: live lead feed */
.pv-feed {
    width: 100%;
    max-width: 540px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 236px;
    overflow: hidden
}

.pv-fh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px
}

.pv-ft {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff
}

.pv-livepill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    flex: none
}

.pv-livepill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ee66b;
    animation: pv-livepulse 1.8s ease-out infinite
}

@keyframes pv-livepulse {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 230, 107, .55)
    }

    70%,
    100% {
        box-shadow: 0 0 0 7px rgba(46, 230, 107, 0)
    }
}

.pv-fl {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.pv-ev {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: #001412;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 11px 14px 11px 11px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    transition: background-color .5s, color .5s, border-color .5s;
    animation: pv-evin .55s cubic-bezier(.2, .8, .2, 1) both
}

.pv-ic {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffecec;
    color: #ff4040;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 16px;
    transition: background-color .5s, color .5s
}

.pv-ev small {
    display: block;
    font-weight: 500;
    color: var(--pl-muted);
    font-size: 12px;
    margin-top: 1px;
    transition: color .5s
}

.pv-ev b {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: #d62828;
    background: #ffecec;
    border-radius: 100px;
    padding: 5px 10px;
    white-space: nowrap;
    transition: background-color .5s, color .5s
}

.pv-ev.is-old {
    background: #e3e5ea
}

.pv-ev.is-old .pv-ic {
    background: rgba(255, 255, 255, .75)
}

.pv-ev.is-old b {
    background: rgba(255, 255, 255, .75);
    color: #546286
}

@keyframes pv-evin {
    from {
        opacity: 0;
        transform: translateY(-26px) scale(.96)
    }
}

/* Marketplace Scaling: Facebook Marketplace live section (minimal) */
.pv-mk {
    width: 100%;
    max-width: 520px;
    background: #fff;
    color: #001412;
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 22px 46px -18px rgba(0, 20, 18, .22)
}

.pv-mk-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px
}

.pv-mk-h b {
    font-size: 14px;
    font-weight: 600
}

.pv-mk-lg {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #1877f2;
    display: grid;
    place-items: center;
    flex: none
}

.pv-mk-lg svg {
    width: 18px;
    height: 18px
}

.pv-mk .pv-livepill {
    margin-left: auto;
    background: #f1f2f6;
    border-color: transparent;
    color: #001412
}

.pv-mk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px
}

.pv-mk-li {
    border-radius: 16px;
    overflow: hidden;
    background: #f6f7fa
}

.pillars-item.is-open .pv-mk-li {
    animation: pv-rise .6s cubic-bezier(.2, .8, .2, 1) both
}

.pillars-item.is-open .pv-mk-li:nth-child(2) {
    animation-delay: .12s
}

.pillars-item.is-open .pv-mk-li:nth-child(3) {
    animation-delay: .24s
}

.pv-mk-im {
    height: 84px;
    display: grid;
    place-items: center;
    position: relative
}

.pv-mk-im svg {
    width: 70px;
    height: auto;
    display: block
}

.pv-mk-st {
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    background: #fff
}

.pv-mk-st.is-g {
    color: #1d7a46
}

.pv-mk-st.is-b {
    color: #1877f2
}

.pv-mk-st.is-o {
    color: #b26a00
}

.pv-mk-bd {
    padding: 10px 11px 12px
}

.pv-mk-pr {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1
}

.pv-mk-ti {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pl-muted);
    margin-top: 3px
}

.pv-mk-th {
    min-height: 112px;
    margin-bottom: 14px
}

.pv-mk-blk {
    animation: pv-evin .5s cubic-bezier(.2, .8, .2, 1) both
}

.pv-mk-hd {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pl-muted);
    margin: 0 0 6px
}

.pv-mk-m {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 6px
}

.pv-mk-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e3e5ea;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--pl-muted);
    flex: none
}

.pv-mk-bb {
    background: #f1f2f6;
    border-radius: 16px 16px 16px 4px;
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    max-width: 82%
}

.pv-mk-m.is-me {
    justify-content: flex-end
}

.pv-mk-m.is-me .pv-mk-bb {
    background: #0084ff;
    color: #fff;
    border-radius: 16px 16px 4px 16px
}

.pv-mk-hid {
    opacity: 0;
    transform: translateY(8px)
}

.pv-mk-hid.is-shown {
    opacity: 1;
    transform: none;
    transition: opacity .4s, transform .4s
}

.pv-mk-ss {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.pv-mk-s {
    position: relative;
    background: #f6f7fa;
    border-radius: 14px;
    padding: 11px 14px
}

.pv-mk-s span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--pl-muted)
}

.pv-mk-s b {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    margin-top: 2px
}

.pv-mk-s.is-money b {
    color: #1d9a55
}

.pv-mk-d {
    position: absolute;
    right: 12px;
    top: 11px;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: #1d7a46;
    background: #e3f5ea;
    border-radius: 100px;
    padding: 3px 9px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s, transform .35s
}

.pv-mk-d.is-show {
    opacity: 1;
    transform: none
}

.pv-mk-s.is-up b::before {
    content: "\2191";
    color: #1d9a55;
    font-family: inherit;
    font-size: .7em;
    margin-right: 6px;
    vertical-align: .08em
}

/* Content & Creative: live content performance (minimal) */
.pv-ct {
    width: 100%;
    max-width: 520px;
    background: #fff;
    color: #001412;
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 22px 46px -18px rgba(90, 60, 190, .3)
}

.pv-ct-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px
}

.pv-ct-h b {
    font-size: 14px;
    font-weight: 600
}

.pv-ct-lg {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #ff4040;
    display: grid;
    place-items: center;
    flex: none
}

.pv-ct-lg svg {
    width: 16px;
    height: 16px
}

.pv-ct .pv-livepill {
    margin-left: auto;
    background: #f1f2f6;
    border-color: transparent;
    color: #001412
}

.pv-ct-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px
}

.pv-ct-tile {
    position: relative;
    height: 118px;
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    place-items: center
}

.pv-ct-tile.is-img {
    background: linear-gradient(160deg, #f6d9c8, #f1b08f)
}

.pv-ct-tile.is-vid {
    background: linear-gradient(135deg, #cfe6e0, #8fcdbf)
}

.pv-ct-tag {
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    background: #fff
}

.pv-ct-sofa {
    width: 86px;
    height: auto;
    display: block;
    margin-top: 14px
}

.pv-ct-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: 12px;
    background: #ff4040 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 7l9 5-9 5z'/%3E%3C/svg%3E") center/22px no-repeat
}

.pv-ct-trk {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 9px;
    height: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .65);
    overflow: hidden
}

.pv-ct-trk i {
    display: block;
    height: 100%;
    width: 100%;
    background: #ff4040;
    border-radius: 5px;
    transform-origin: left;
    animation: pv-ct-play 8s linear infinite
}

@keyframes pv-ct-play {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

.pv-ph {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px
}

.pv-live {
    color: #7ee0a0;
    font-weight: 500
}

.pv-r {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 12px;
    color: rgba(245, 245, 247, .85)
}

.pv-bar {
    height: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden
}

.pv-bar i {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: 8px;
    background: linear-gradient(90deg, #ff8d84, var(--pl-red))
}

.pillars-item.is-open .pv-bar i {
    animation: pv-fill 1.2s cubic-bezier(.2, .8, .2, 1) .35s both
}

@keyframes pv-fill {
    from {
        width: 0
    }
}

.pv-trend {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 6px
}

.pv-lst {
    position: absolute;
    width: 180px;
    background: #fff;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 16px 36px rgba(0, 20, 18, .14);
    font-size: 13px;
    font-weight: 600;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1)
}

.pv-lst .pv-img {
    height: 74px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--bg)
}

.pv-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 100px;
    background: var(--pl-soft)
}

.pv-l1 {
    left: 2%;
    top: 0;
    --r: -6deg;
    --bg: #f6d9c8
}

.pv-l2 {
    right: 2%;
    top: 12px;
    --r: 5deg;
    --bg: #cfe6e0
}

.pv-l3 {
    left: calc(50% - 90px);
    bottom: 0;
    --r: -1deg;
    --bg: #dcd3f0;
    z-index: 2
}

.pv-l1 .pv-tag {
    background: #ffe1e1;
    color: #c02b2b
}

.pv-l2 .pv-tag {
    background: #e3f5ea;
    color: #1d7a46
}

.pv-l3 .pv-tag {
    background: var(--pl-ink);
    color: #fff
}

.pv-team {
    background: #fff;
    color: var(--pl-ink);
    box-shadow: 0 22px 46px rgba(255, 64, 64, .24)
}

.pv-m {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--pl-line);
    font-size: 14px;
    font-weight: 600
}

.pv-m small {
    display: block;
    font-weight: 500;
    color: var(--pl-muted);
    font-size: 12px;
    margin-top: 2px
}

.pv-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pl-soft);
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--pl-muted)
}

.pv-on {
    margin-left: auto;
    font-size: 12px;
    color: #1d9a55;
    display: flex;
    align-items: center;
    gap: 6px
}

.pv-on::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1d9a55
}

.pv-sv {
    border-top: 1px solid var(--pl-line);
    margin-top: 4px;
    padding-top: 12px
}

.pv-sv-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px
}

.pv-sv-tag {
    font-size: 12px;
    font-weight: 600;
    color: #1d9a55;
    background: #e3f5ea;
    border-radius: 100px;
    padding: 4px 10px
}

.pv-sv svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible
}

.pv-sv-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 0
}

.pillars-item.is-open .pv-sv-line {
    animation: pv-draw 1.6s ease .8s both
}

.pillars-item.is-open .pv-sv-area {
    animation: pv-fadein 1s ease 1.8s both
}

.pillars-item.is-open .pv-sv-dot {
    animation: pv-fadein .4s ease 2.3s both
}

@keyframes pv-fadein {
    from {
        opacity: 0
    }
}

.pv-studio {
    position: relative;
    width: 100%;
    max-width: 540px;
    height: 300px
}

.pv-shot {
    position: absolute;
    left: 0;
    top: 0;
    width: 56%;
    height: 230px;
    border-radius: 20px;
    background: linear-gradient(160deg, #f6d9c8, #f1b08f);
    box-shadow: 0 16px 34px rgba(0, 20, 18, .16);
    transform: rotate(-3deg)
}

.pv-shot::before {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 16%;
    height: 34%;
    border-radius: 12px;
    background: rgba(0, 20, 18, .28)
}

.pv-shot::after {
    content: "";
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: 40%;
    height: 26%;
    border-radius: 12px 12px 4px 4px;
    background: rgba(0, 20, 18, .4)
}

.pv-pick {
    position: absolute;
    inset: 12px;
    border: 1.5px dashed #001412;
    border-radius: 12px
}

.pv-cap {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 1;
    background: #fff;
    color: #001412;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 100px
}

.pv-clip {
    position: absolute;
    right: 0;
    top: 30px;
    width: 50%;
    border-radius: 20px;
    background: #fff;
    color: #001412;
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 18px 40px rgba(0, 20, 18, .18);
    transform: rotate(3deg)
}

.pv-frame {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 12px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #cfe6e0, #8fcdbf)
}

.pv-frame::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    background: var(--pl-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 7l9 5-9 5z'/%3E%3C/svg%3E") center/22px no-repeat
}

.pv-track {
    display: flex;
    gap: 4px;
    margin-bottom: 8px
}

.pv-track i {
    flex: 1;
    height: 7px;
    border-radius: 7px;
    background: #e6e9f0
}

.pv-prompt {
    position: absolute;
    left: 6%;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .94);
    color: #001412;
    border-radius: 100px;
    padding: 8px 8px 8px 18px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 14px 32px rgba(120, 90, 200, .22)
}

.pv-prompt b {
    margin-left: auto;
    background: var(--pl-red);
    border-radius: 100px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap
}

/* ===== open animations (replay every time a card opens) ===== */
.pv-lst {
    transform: rotate(var(--r, 0deg))
}

.pv-trend path {
    stroke-dasharray: 1;
    stroke-dashoffset: 0
}

.pv-track i {
    background: #e6e9f0
}

.pillars-item.is-open .pv-bar i {
    animation: pv-fill 1.3s cubic-bezier(.2, .8, .2, 1) both
}

.pillars-item.is-open .pv-r:nth-child(2) .pv-bar i {
    animation-delay: .25s
}

.pillars-item.is-open .pv-r:nth-child(3) .pv-bar i {
    animation-delay: .4s
}

.pillars-item.is-open .pv-r:nth-child(4) .pv-bar i {
    animation-delay: .55s
}

.pillars-item.is-open .pv-trend path {
    animation: pv-draw 1.6s ease .7s both
}

.pv-live {
    animation: pv-pulse 1.8s ease-in-out infinite
}

.pv-on::before {
    animation: pv-pulse 1.8s ease-in-out infinite
}

.pillars-item.is-open .pv-lst {
    animation: pv-pop .75s cubic-bezier(.2, .8, .2, 1) both
}

.pillars-item.is-open .pv-l1 {
    animation-delay: .15s
}

.pillars-item.is-open .pv-l2 {
    animation-delay: .3s
}

.pillars-item.is-open .pv-l3 {
    animation-delay: .45s
}

.pillars-item.is-open .pv-m {
    animation: pv-slide .6s cubic-bezier(.2, .8, .2, 1) both
}

.pillars-item.is-open .pv-m:nth-child(2) {
    animation-delay: .2s
}

.pillars-item.is-open .pv-m:nth-child(3) {
    animation-delay: .38s
}

.pillars-item.is-open .pv-m:nth-child(4) {
    animation-delay: .56s
}

.pillars-item.is-open .pv-shot {
    animation: pv-shot .85s cubic-bezier(.2, .8, .2, 1) both
}

.pillars-item.is-open .pv-clip {
    animation: pv-clip .85s cubic-bezier(.2, .8, .2, 1) .2s both
}

.pillars-item.is-open .pv-prompt {
    animation: pv-rise .7s cubic-bezier(.2, .8, .2, 1) .55s both
}

.pillars-item.is-open .pv-track i:nth-child(-n+4) {
    animation: pv-seg .35s ease both
}

.pillars-item.is-open .pv-track i:nth-child(1) {
    animation-delay: .9s
}

.pillars-item.is-open .pv-track i:nth-child(2) {
    animation-delay: 1.1s
}

.pillars-item.is-open .pv-track i:nth-child(3) {
    animation-delay: 1.3s
}

.pillars-item.is-open .pv-track i:nth-child(4) {
    animation-delay: 1.5s
}

.pillars-item.is-open .pv-prompt b {
    animation: pv-glow 2s ease-in-out 1.6s infinite
}

@keyframes pv-draw {
    from {
        stroke-dashoffset: 1
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes pv-pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

@keyframes pv-pop {
    from {
        opacity: 0;
        transform: translateY(34px) rotate(0deg) scale(.92)
    }

    to {
        opacity: 1;
        transform: rotate(var(--r, 0deg))
    }
}

@keyframes pv-slide {
    from {
        opacity: 0;
        transform: translateX(28px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes pv-shot {
    from {
        opacity: 0;
        transform: translateX(-36px) rotate(-9deg)
    }

    to {
        opacity: 1;
        transform: rotate(-3deg)
    }
}

@keyframes pv-clip {
    from {
        opacity: 0;
        transform: translateX(36px) rotate(9deg)
    }

    to {
        opacity: 1;
        transform: rotate(3deg)
    }
}

@keyframes pv-rise {
    from {
        opacity: 0;
        transform: translateY(22px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes pv-seg {
    from {
        background: #e6e9f0
    }

    to {
        background: #ff4040
    }
}

@keyframes pv-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 64, 64, .55)
    }

    50% {
        box-shadow: 0 0 0 9px rgba(255, 64, 64, 0)
    }
}

.pillars-cta {
    display: flex;
    justify-content: center;
    margin-top: 64px;
}

@media (max-width: 991px) {
    .pillars-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 40px;
    }

    .pillars-panel-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-left: 0;
    }

    .pv-vis {
        justify-content: flex-start;
        min-height: 0;
    }
}

/* phone: stacked cards stay perfectly aligned (no stepped right edge) */
@media (max-width: 767px) {
    .section.pillars-section {
        padding: 56px 0 36px;
    }

    .pillars-wrap {
        padding: 0 16px;
    }

    .pillars-item {
        padding: 0 20px;
        border-radius: 26px;
    }

    .pillars-item+.pillars-item {
        margin-top: -20px;
    }

    .pillars-item:not(:last-child) .pillars-trigger {
        padding-bottom: 44px;
    }

    .pillars-item.is-open .pillars-trigger {
        padding-bottom: 24px;
    }

    .pillars-trigger {
        grid-template-columns: 30px 1fr 34px;
        padding: 24px 0;
    }

    .pillars-name {
        font-size: 24px;
        padding-right: 12px;
    }

    .pillars-dots i {
        width: 7px;
        height: 7px;
    }

    .pillars-dots {
        gap: 4px;
    }

    .pillars-toggle {
        width: 32px;
        height: 32px;
    }

    .pillars-panel-inner {
        padding: 0 0 48px 0;
    }

    .pillars-desc {
        font-size: 15px;
    }

    .pillars-chips li {
        font-size: 13px;
        padding: 9px 14px;
    }

    .pv-vis {
        min-height: 230px;
    }

    .pv-lst {
        width: 150px;
    }

    .pv-mk-im {
        height: 64px;
    }

    .pv-ct-tile {
        height: 96px;
    }

    .pv-ct-sofa {
        width: 70px;
    }

    .pv-mk-im svg {
        width: 56px;
    }

    .pv-mk-st {
        font-size: 10px;
        padding: 2px 7px;
        left: 6px;
        top: 6px;
    }

    .pv-mk-bd {
        padding: 8px;
    }

    .pv-mk-s b {
        font-size: 22px;
    }

    .pv-l3 {
        left: calc(50% - 75px);
    }

    .pillars-cta {
        margin-top: 44px;
    }

    .pillars-t1 {
        --sx-a: -30%;
        --sx-b: 35%;
    }

    .pillars-t1::before {
        width: 340px;
        height: 210px;
        top: -115px;
        left: 40%;
    }

    .pillars-t1::after {
        width: 400px;
        height: 220px;
        bottom: -80px;
    }
}

/* reduced motion: keep the gentle open animations, drop hover lifts and endless loops */
@media (prefers-reduced-motion: reduce) {
    .pillars-item:not(.is-open):hover {
        transform: none;
    }

    .pv-live,
    .pv-on::before,
    .pv-prompt b,
    .pillars-t1,
    .pillars-t1::before,
    .pillars-t1::after,
    .pv-livepill::before {
        animation: none !important;
    }

    .pv-ev {
        animation: none;
    }

    .pv-mk-blk,
    .pillars-item.is-open .pv-mk-li {
        animation: none;
    }

    .pv-mk-hid {
        opacity: 1;
        transform: none;
    }

    .pv-ct-trk i {
        animation: none;
        transform: scaleX(.4);
    }
}

.section.pd-off {
    padding-left: 0;
    padding-right: 0;
}

.section.overflow-off {
    overflow: visible;
}

.section.service-hero-sec {
    background-color: var(--shades-white);
    padding-top: 140px;
    padding-bottom: 60px;
}

.section.service-sec-padding {
    background-color: var(--shades-white);
    padding-top: 40px;
    padding-bottom: 100px;
}

.section.service-sec {
    background-color: var(--shades-white);
    padding-top: 40px;
    padding-bottom: 40px;
}

.section.about-us-bg-color {
    background-color: var(--primary-50);
    padding-top: 140px;
}

.section.about-us-default-bg,
.section.blog-bg-color,
.section.pp-bg-color {
    background-color: var(--shades-white);
}

.section.licenses-padding {
    background-color: var(--shades-white);
    padding-top: 160px;
    padding-bottom: 100px;
}

.section.licenses-padding.illustrations {
    background-color: var(--neutral-50);
}

.section.tag-bg-color {
    background-color: var(--shades-white);
}

.container-default {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.container-default.flex {
    z-index: 2;
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.container-default.blog-width {
    max-width: 1062px;
}

.container-default.blog-width-for-article {
    max-width: 921px;
}

.works-main-div {
    grid-row-gap: 60px;
    flex-direction: column;
    display: flex;
}

.sw-tilte-and-btn-div {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    display: flex;
}

.odp-main-div {
    grid-row-gap: 100px;
    flex-direction: column;
    display: flex;
}

.odp-title-block {
    grid-row-gap: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.odp-circle-div {
    background-color: #fff;
    border-radius: 100%;
    width: 15px;
    min-width: 15px;
    max-width: 15px;
    height: 15px;
    min-height: 15px;
    max-height: 15px;
    position: sticky;
    top: 50vh;
    box-shadow: 0 0 0 8px #0a0a0a;
}

.odp-circle-div.p-600 {
    border: 6px solid var(--primary-650);
    background-color: var(--primary-625);
    box-shadow: none;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
}

.odp-content {
    z-index: 1;
    background-color: #0a0a0a;
    position: relative;
}

.odp-content.shades-black {
    background-color: var(--shades-black);
}

.odp-content-componant {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
}

.odp-right-text-div {
    margin-bottom: 56px;
    padding: 32px;
}

.odp-right-text-div.p-600 {
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
}

.odp-centre-div {
    justify-content: center;
    display: flex;
}

.odp-overlay {
    background-image: linear-gradient(to bottom, var(--shades-black), #0a0a0a00);
    height: 80px;
    position: absolute;
    inset: 0% 0% auto;
}

.odp-left-div {
    text-align: right;
    justify-content: flex-end;
    align-items: stretch;
}

.odp-content-container {
    z-index: 0;
    width: 90vw;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

.odp-divider-line {
    z-index: -2;
    background-color: var(--primary-725);
    width: 3px;
    height: 100%;
    position: absolute;
}

.odp-divider-line.p-700 {
    background-color: var(--primary-725);
}

.odp-content-div {
    z-index: 2;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 180px 1fr;
    grid-auto-columns: 1fr;
    padding-top: 80px;
    padding-bottom: 80px;
    display: grid;
    position: relative;
}

.odp-overlay-down {
    background-image: linear-gradient(to bottom, #0a0a0a00, var(--shades-black));
    height: 80px;
    position: absolute;
    inset: auto 0% 0%;
}

.ct-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.ct-main-div {
    grid-row-gap: 60px;
    flex-direction: column;
    display: flex;
}

.ct-title-div {
    justify-content: center;
    display: flex;
}

.article-main-div {
    grid-row-gap: 60px;
    flex-direction: column;
    display: flex;
}

.article-title-and-btn {
    justify-content: space-between;
    display: flex;
}

.op-main-div {
    grid-row-gap: 0px;
    flex-direction: column;
    display: flex;
}

.op-title-div {
    margin-bottom: 100px;
    padding-left: 80px;
    padding-right: 80px;
}

.op-partmer-logo {
    grid-row-gap: 100px;
    flex-direction: column;
    width: auto;
    display: flex;
    overflow: visible;
}

.op-partmer-logo.margin {
    flex-direction: row;
    width: auto;
    margin-bottom: 80px;
}

.op-partmer-logo.margin.margin-off {
    margin-bottom: 0;
}

.op-partner-logo-div {
    grid-column-gap: 0px;
    justify-content: center;
    align-items: center;
    width: auto;
    display: flex;
}

.op-logo {
    align-self: center;
    width: 280px;
}

.op-image {
    width: 200px;
}

.faq-question-bar {
    color: #1a1e27;
    border-bottom: 1px solid #00000012;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    padding-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    display: flex;
}

.faq-circle {
    background-color: #ff4040;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    width: 55px;
    min-width: 55px;
    height: 55px;
    min-height: 55px;
    display: flex;
}

.faq-left-div {
    width: 60%;
}

.faq-content-div {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-direction: row;
    justify-content: space-between;
    display: flex;
}

.faq-line-divider {
    width: 100%;
    height: 1px;
}

.faq-content {
    overflow: hidden;
}

.faq-content .paragraph strong {
    font-weight: 600;
    color: #ff4438;
}

.faq-qa-div {
    z-index: 5;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    display: flex;
    position: relative;
}

.faq-qa-div.tab {
    z-index: 0;
}

.faq-qa-wrap {
    border-bottom: 1px solid var(--primary-800);
    cursor: pointer;
    padding-bottom: 16px;
    padding-left: 0;
    padding-right: 0;
}

.testimonial-slider {
    background-color: #0000;
    height: 100%;
    padding-bottom: 0;
    display: block;
    bottom: auto;
}

.testimonial {
    padding-right: 2em;
}

.mask {
    width: 40%;
    padding-left: 80px;
    padding-right: 0;
    overflow: visible;
}

.main-div {
    grid-row-gap: 32px;
    background-color: var(--primary-900);
    flex-direction: column;
    padding: 40px;
    display: flex;
}

.ct-avatar-and-name {
    grid-column-gap: 16px;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.ct-avatar {
    width: 60px;
    height: 60px;
}

.slide-nav {
    display: none;
}

.left-arrow {
    justify-content: flex-start;
    align-items: flex-start;
    width: 64px;
    height: 64px;
    display: flex;
    position: relative;
    top: 30px;
    left: -40px;
}

.right-arrow {
    width: 64px;
    height: 64px;
    position: relative;
    top: -34px;
    left: 60px;
}

.nav-menu-div {
    z-index: 998;
    background-color: #ffecec;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding-left: 80px;
    padding-right: 80px;
    display: none;
    position: fixed;
    inset: 0%;
}

.nav-menu-containe {
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1640px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.nav-left-div {
    grid-column-gap: 40px;
    grid-row-gap: 32px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 50%;
    display: flex;
}

.nav-menu-link {
    text-decoration: none;
    overflow: hidden;
}

.nav-menu-block {
    overflow: hidden;
}

.animation-line {
    background-color: var(--primary-700);
    width: 100%;
    height: 2px;
}

.nav-right-div {
    border-left: 1px solid var(--primary-100);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 50%;
    height: 100%;
    padding-left: 28px;
    display: flex;
}

.nav-mail-and-media-link-div {
    flex-direction: column;
    justify-content: space-between;
    height: 50%;
    display: flex;
}

.nav-left-block {
    border-left: 1px none var(--primary-100);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    padding-left: 0;
    display: flex;
}

.nav-media-icon-div {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-direction: column;
    display: flex;
}

.nm-icon-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    display: flex;
}

.social-icon {
    width: 40px;
    height: 40px;
}

.nav-mail-block,
.nav-icon-block {
    overflow: hidden;
}

.hz-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.hz-main-div {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    background-color: var(--primary-50);
    flex-direction: column;
    padding: 40px;
    display: flex;
}

.service-content-div {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    display: flex;
}

.sc-left-div,
.sc-right-div {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-direction: column;
    width: 50%;
    display: flex;
}

.occ-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.occ-main-div {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-direction: column;
    display: flex;
}

.occ-main-div.flaticon {
    flex-direction: row;
    justify-content: space-between;
}

.occ-title-div {
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: flex;
}

.occ-title-div.flaticon {
    align-items: flex-start;
}

.occ-title-div.middle-align {
    align-items: center;
}

.occ-content-div {
    grid-row-gap: 32px;
    flex-direction: column;
    display: flex;
}

.occ-service-list {
    grid-column-gap: 32px;
    display: flex;
}

.occ-list {
    grid-row-gap: 32px;
    background-color: var(--primary-50);
    flex-direction: column;
    width: 35%;
    padding: 40px;
    display: flex;
}

.occ-icon-div {
    width: 80px;
    height: 80px;
}

.occ-text-div {
    grid-row-gap: 16px;
    flex-direction: column;
    display: flex;
}

.div-block {
    grid-row-gap: 12px;
    flex-direction: column;
    display: flex;
}

.owp-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.owp-wrapper {
    grid-row-gap: 60px;
    background-color: var(--primary-800);
    flex-direction: column;
    padding: 80px 40px;
    display: flex;
}

.owp-upper-div {
    grid-column-gap: 10px;
    align-items: flex-start;
    display: flex;
}

.owp-text {
    width: 75%;
}

.owp-illustration {
    width: 30%;
}

.owp-content-div {
    grid-row-gap: 40px;
    flex-direction: column;
    display: flex;
}

.owp-block {
    grid-column-gap: 60px;
    display: flex;
}

.owp-left-div {
    flex-direction: column;
    width: 25%;
    display: flex;
}

.owp-right-div {
    width: 75%;
}

.ux-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.ux-main-div {
    grid-row-gap: 95px;
    background-color: var(--primary-50);
    flex-direction: column;
    padding: 40px 32px;
    display: flex;
}

.ux-title-div {
    grid-column-gap: 32px;
    justify-content: space-between;
    display: flex;
}

.ux-left-div {
    grid-row-gap: 40px;
    flex-direction: column;
    width: 65%;
    font-size: 14px;
    display: flex;
}

.ux-title {
    grid-row-gap: 27px;
    flex-direction: column;
    display: flex;
}

.ux-right-div {
    width: 35%;
}

.ux-bullet-point {
    flex-direction: column;
    display: flex;
}

.ux-content-details {
    grid-row-gap: 60px;
    flex-direction: column;
    width: 70%;
    display: flex;
}

.ux-content {
    grid-row-gap: 20px;
    flex-direction: column;
    display: flex;
}

.design-section-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.design-main-div {
    grid-row-gap: 40px;
    background-color: var(--primary-50);
    flex-direction: column;
    padding: 100px 32px;
    display: flex;
}

.design-content-div {
    grid-row-gap: 35px;
    flex-direction: column;
    display: flex;
}

.design-bullet-point {
    grid-row-gap: 10px;
    flex-direction: column;
    display: flex;
}

.d-bullet-point {
    grid-column-gap: 9px;
    display: flex;
}

.bullet-icon-div {
    width: 32px;
    height: 32px;
}

.design-illustration-div {
    width: 45%;
}

.wd-section-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.web-development-main-div {
    grid-row-gap: 40px;
    background-color: var(--primary-50);
    flex-direction: column;
    padding: 100px 32px;
    display: flex;
}

.web-d-content-div {
    grid-row-gap: 35px;
    flex-direction: column;
    display: flex;
}

.web-d-illustration-div {
    width: 45%;
}

.web-d-bullet-point {
    grid-row-gap: 10px;
    flex-direction: column;
    width: 40%;
    display: flex;
}

.web-bullet-point {
    grid-column-gap: 9px;
    display: flex;
}

.wev-d-bullet-block {
    display: flex;
}

.seo-main-container {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.seo-main-div {
    grid-row-gap: 40px;
    background-color: var(--primary-50);
    flex-direction: column;
    padding: 100px 32px;
    display: flex;
}

.seo-content-div {
    grid-row-gap: 35px;
    flex-direction: column;
    display: flex;
}

.seo-illustration-div {
    width: 45%;
}

.seo-bullet-point-div {
    grid-row-gap: 10px;
    flex-direction: column;
    display: flex;
}

.seo-bullet-point {
    grid-column-gap: 9px;
    display: flex;
}

.dark-menu-line-1,
.dark-menu-line-2 {
    background-color: #0a0a0a;
    border-radius: 100px;
    width: 60px;
    height: 2px;
}

.utility-page-wrap {
    background-color: var(--primary-50);
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    display: flex;
}

.utility-page-content {
    text-align: center;
    flex-direction: column;
    width: 600px;
    display: flex;
}

.utility-page-form {
    flex-direction: column;
    align-items: stretch;
    display: flex;
}

.home-link {
    grid-column-gap: 10px;
    align-items: center;
    margin-bottom: 80px;
    display: flex;
}

.home-link.flex {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: center;
}

.about-us-title {
    margin-bottom: 48px;
}

.about-subtitle {
    display: flex;
}

.au-title {
    margin-bottom: 40px;
}

.team-block {
    grid-column-gap: 32px;
    grid-row-gap: 0px;
    flex-direction: row;
    display: flex;
}

.card-team {
    grid-column-gap: 0px;
    flex-direction: column;
    justify-content: flex-start;
    width: 35%;
    display: flex;
}

.card-image {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    display: flex;
    position: relative;
}

.card-image-shade {
    background-color: #09ada8e6;
    position: absolute;
    inset: 0%;
}

.social-media-link {
    grid-column-gap: 12px;
    flex-direction: row;
    display: flex;
    position: absolute;
}

.card-text {
    grid-row-gap: 16px;
    flex-direction: column;
    width: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
}

.team-div-block {
    grid-row-gap: 32px;
    flex-direction: column;
    display: flex;
}

.space-div {
    width: 50%;
    display: block;
}

.blog-title {
    grid-row-gap: 24px;
    flex-direction: column;
    margin-bottom: 52px;
    display: flex;
}

.blog-category-btn-div {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    margin-bottom: 40px;
    display: flex;
}

.category-btn-div {
    grid-column-gap: 20px;
    align-items: center;
    padding: 0;
    display: flex;
}

.down-icon {
    width: 24px;
    height: 24px;
}

.blog-all-div {
    grid-column-gap: 32px;
    justify-content: flex-start;
    display: flex;
}

.blog-left-div {
    width: 20%;
}

.go-back-btn {
    grid-column-gap: 12px;
    background-color: var(--primary-50);
    border-radius: 4px;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    text-decoration: none;
    display: flex;
}

.blog-back-arrow {
    width: 20px;
}

.all-topics {
    grid-row-gap: 28px;
    background-color: var(--primary-50);
    border-radius: 4px;
    flex-direction: column;
    padding: 32px;
    display: flex;
}

.topic {
    text-decoration: none;
}

.blog-right-div {
    width: 80%;
}

.blog-title-block {
    margin-bottom: 16px;
}

.content-div.flex {
    grid-row-gap: 0px;
    flex-direction: column;
    margin-bottom: 60px;
    display: flex;
}

.privacy-image {
    margin-bottom: 20px;
}

.home-link-arrow {
    align-items: center;
    width: 12px;
    display: flex;
}

.home-link-back {
    align-items: center;
    text-decoration: none;
    display: flex;
}

.tag-title {
    grid-column-gap: 40px;
    justify-content: space-between;
    margin-bottom: 80px;
    display: flex;
}

.div-block-2 {
    background-color: var(--primary-400);
    width: 2px;
    height: 16px;
}

.tag-list {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.tag-image-container {
    margin-bottom: 20px;
}

.tag-link-block {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    text-decoration: none;
    display: flex;
}

.blog-tag-list {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.blog-tag-image-container {
    margin-bottom: 20px;
}

.blog-tag-div {
    justify-content: space-between;
    margin-bottom: 20px;
    display: flex;
}

.tag-link {
    background-color: var(--primary-600);
    border-radius: 100px;
    padding: 4px 12px;
    text-decoration: none;
}

.read-time {
    background-color: var(--primary-600);
    border-radius: 100px;
    padding: 4px 12px;
}

.home-back-link {
    grid-column-gap: 12px;
    align-items: center;
    margin-bottom: 80px;
    font-size: 18px;
    line-height: 23px;
    text-decoration: none;
    display: flex;
}

.home-back-link.color {
    color: var(--shades-black);
    margin-bottom: 0;
}

.home-back-link.link-color.w--current {
    color: var(--primary-500);
    margin-bottom: 0;
}

.home-back-block {
    grid-column-gap: 12px;
    align-items: center;
    margin-bottom: 40px;
    display: flex;
}

.space {
    background-color: var(--primary-500);
    width: 2px;
    height: 16px;
}

.category-list {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.blog-image-container {
    margin-bottom: 16px;
}

.blog-image {
    object-fit: fill;
    margin-bottom: 0;
}

.blog-link {
    text-decoration: none;
}

.blog-author {
    grid-column-gap: 16px;
    display: flex;
}

.author-avatar {
    width: 48px;
    height: 48px;
}

.date-and-reading-time {
    grid-column-gap: 8px;
    align-items: center;
    display: flex;
}

.date-and-reading-time.margin {
    margin-bottom: 8px;
}

.dot {
    background-color: var(--neutral-600);
    border-radius: 100px;
    width: 8px;
    height: 8px;
}

.blog-social-icon {
    grid-column-gap: 8px;
    justify-content: flex-end;
    align-items: center;
    display: flex;
}

.blog-icon {
    grid-column-gap: 20px;
    display: flex;
}

.b-icon {
    width: 32px;
    height: 32px;
}

.collection-item {
    grid-column-gap: 16px;
    grid-row-gap: 32px;
    grid-template-rows: auto;
    grid-template-columns: .25fr .5fr;
    grid-auto-columns: 1fr;
    display: flex;
}

.blog-image-container-div {
    width: 30%;
}

.blog-title-div {
    width: 60%;
}

.link-icon {
    width: 24px;
    height: 24px;
}

.collection-list {
    grid-column-gap: 16px;
    grid-row-gap: 80px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.blog-collection-list {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.blog-image-div {
    margin-bottom: 16px;
    overflow: hidden;
}

.pagination {
    padding-top: 40px;
    display: none;
}

.next {
    border-color: var(--neutral-500);
    background-color: var(--primary-500);
    border-radius: 4px;
    transition: all .3s;
}

.next:hover {
    background-color: var(--primary-200);
    opacity: 1;
}

.dropdown-toggle {
    grid-column-gap: 20px;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 20px;
    display: flex;
}

.dropdown {
    z-index: 0;
    grid-row-gap: 16px;
    background-color: var(--primary-100);
    border-radius: 6px;
    flex-direction: row;
    display: block;
    position: relative;
}

.category-link {
    text-decoration: none;
}

.pagination-2 {
    display: none;
}

.collection-item-2 {
    padding: 8px 20px;
}

.collection-list-2 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    padding-top: 20px;
    padding-bottom: 20px;
    display: grid;
}

.dropdown-list {
    background-color: var(--neutral-50);
    border-radius: 6px;
    margin-top: 16px;
    display: none;
}

.pp-list-div {
    grid-row-gap: 4px;
    flex-direction: column;
    display: flex;
}

.work-list-wrapper {
    display: block;
}

.work-list {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    justify-content: space-between;
    display: grid;
}

.pagination-4 {
    display: none;
}

.work-wrapper {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
}

.work-wrapper.margin {
    margin-bottom: 16px;
}

.work-image {
    position: static;
}

.work-image-div {
    position: static;
    inset: 0%;
}

.work-view-btn {
    background-color: var(--primary-600);
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    display: flex;
    position: absolute;
}

.work-tag-div {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.work-tag-div.margin {
    margin-bottom: 20px;
}

._w-tag {
    background-color: var(--primary-700);
    border-radius: 100px;
    padding: 4px 12px;
}

.work-link-block {
    border-bottom: 1px solid var(--primary-800);
    padding-bottom: 20px;
    text-decoration: none;
}

.back-icon {
    width: 24px;
}

._w-title {
    justify-content: space-between;
    display: flex;
}

._w-title.margin {
    margin-bottom: 80px;
}

.wt-left-div {
    grid-row-gap: 16px;
    flex-direction: column;
    width: 40%;
    display: flex;
}

.wt-right-div {
    grid-row-gap: 12px;
    flex-direction: column;
    align-items: flex-end;
    display: flex;
}

.div-block-3 {
    grid-column-gap: 32px;
    justify-content: flex-start;
    width: auto;
    display: flex;
}

.work-website-link {
    grid-column-gap: 12px;
    align-items: center;
    display: flex;
}

._w-link-icon {
    width: 24px;
}

._w-image-contaoner.margin {
    margin-bottom: 80px;
}

._w-text-block {
    grid-column-gap: 0px;
    justify-content: flex-start;
    align-items: stretch;
    display: flex;
}

._w-text-block.margin {
    margin-bottom: 140px;
}

._w-subject {
    width: 50%;
}

._w-subject.flex {
    grid-row-gap: 20px;
    flex-direction: column;
    display: flex;
}

._w-deco-div {
    grid-column-gap: 16px;
    justify-content: space-between;
    display: flex;
}

._w-deco-text {
    grid-row-gap: 20px;
    flex-direction: column;
    width: 99%;
    display: flex;
}

._w-result-div {
    grid-column-gap: 0px;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.collection-list-3 {
    grid-column-gap: 16px;
    grid-row-gap: 80px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.blog-content-box {
    grid-column-gap: 20px;
    display: flex;
}

.success-message {
    background-color: var(--primary-500);
    color: var(--shades-white);
    font-family: Supreme, sans-serif;
    font-size: 14px;
}

.text-block-3 {
    color: var(--primary-900);
    font-family: Supreme, sans-serif;
}

.error-title {
    font-family: Outfit, sans-serif;
    font-weight: 600;
}

.error-text {
    padding-bottom: 20px;
    font-family: Supreme, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}

.error-button {
    background-color: var(--primary-500);
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-family: Supreme, sans-serif;
    font-size: 16px;
    font-weight: 500;
    display: flex;
}

.success-message-2 {
    background-color: var(--primary-500);
}

.contact-form-success-message {
    color: var(--shades-white);
    font-family: Supreme, sans-serif;
    font-size: 16px;
    line-height: 21px;
}

.text-block-4 {
    color: var(--primary-900);
    font-family: Supreme, sans-serif;
    font-size: 16px;
    line-height: 21px;
}

.rich-text {
    color: var(--primary-900);
    margin-bottom: 0;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    line-height: 23px;
    text-decoration: none;
}

.rich-text h5 {
    font-size: 24px;
    line-height: 31px;
}

.rich-text h4 {
    font-size: 36px;
    line-height: 47px;
}

.rich-text h1 {
    font-size: 64px;
}

.rich-text h2 {
    font-size: 48px;
    line-height: 62px;
}

.rich-text h3 {
    font-size: 40px;
    line-height: 52px;
}

.rich-text h6 {
    font-size: 20px;
    line-height: 26px;
}

.rich-text blockquote {
    border-left-width: 5px;
    border-left-color: var(--primary-700);
    background-color: var(--neutral-50);
    color: var(--primary-800);
    border-radius: 4px;
    margin-top: 32px;
    margin-bottom: 32px;
    padding: 32px;
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
}

.blog-post-image-container {
    margin-top: 32px;
    margin-bottom: 32px;
}

.blog-image-copy {
    margin-bottom: 16px;
}

.unsplah-images-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template: "."
        "."
        "."
        "."
        "."
        "."
        / 1fr 1fr 1fr 1fr;
    width: 60%;
}

.freepik-images-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template: "." minmax(auto, 1fr) "."
        "."
        "."
        / 1fr 1fr 1fr;
    width: 60%;
}

.icons-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template: "." minmax(auto, 1fr) "."
        "."
        "."
        / 1fr 1fr 1fr 1fr;
    width: 60%;
}

.flaticon-images {
    height: 60px;
}

.license-div {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-direction: row;
    justify-content: space-between;
    display: flex;
}

.license-div.company-logo {
    flex-direction: column;
}

.image {
    width: 60%;
}

.illustration-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template: "." minmax(auto, 1fr) "."
        / 1fr 1fr 1fr;
    width: 60%;
}

.work-rich-text {
    color: var(--shades-white);
    font-family: Supreme, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 23px;
}

.preloader-logo {
    width: 140px;
    max-width: 100%;
    display: block;
}

.text-field-2 {
    height: 60px;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    line-height: 23px;
}

.heading-2 {
    font-family: Outfit, sans-serif;
}

.field-label {
    font-family: Supreme, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
}

.submit-button-2 {
    background-color: var(--primary-600);
    height: 60px;
    font-family: Supreme, sans-serif;
    font-size: 18px;
    line-height: 23px;
}

.external-link,
.link {
    color: var(--shades-white);
    text-decoration: none;
}

.company-logos-div {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    display: flex;
}

.content-block {
    justify-content: center;
    align-items: stretch;
    height: auto;
    display: flex;
}

@media screen and (min-width: 1920px) {

    .nav-bar-dark,
    .nav-bar-light {
        padding-left: 140px;
        padding-right: 140px;
    }

    .heading.d1-regular {
        letter-spacing: -.02em;
    }

    .heading.d1-semi-bold {
        letter-spacing: -.02em;
        display: block;
    }

    .heading.d1-bold,
    .heading.d2-regular,
    .heading.d2-bold,
    .heading.h1-regular {
        letter-spacing: -.02em;
    }

    .heading.h1-regular.animation.align {
        font-size: 6rem;
        line-height: 1.2em;
    }

    .heading.h1-regular.align-middle {
        text-align: center;
    }

    .heading.h1-semi-bold {
        letter-spacing: -.02em;
        display: block;
    }

    .heading.h1-semi-bold.swap.animation-class-2 {
        font-size: 5.5rem;
        font-weight: 400;
        line-height: 1;
    }

    .heading.h1-semi-bold.animation-class.align {
        font-size: 5.5rem;
        font-weight: 400;
        line-height: 1.2;
    }

    .heading.h1-bold,
    .heading.h1-s-regular {
        letter-spacing: -.02em;
    }

    .heading.h1-s-semi-bold {
        letter-spacing: -.02em;
        font-size: 72px;
        line-height: 94px;
    }

    .heading.h1-s-bold,
    .heading.h2-regular,
    .heading.h2-semi-bold,
    .heading.h2-bold,
    .heading.h2-m-regular,
    .heading.h2-m-semi-bold,
    .heading.h2-m-bold,
    .heading.h2-s-regular,
    .heading.h2-s-semi-bold,
    .heading.h2-s-bold,
    .heading.h2-s-medium {
        letter-spacing: -.02em;
    }

    .heading.h3-regular {
        letter-spacing: -.02em;
        font-size: 48px;
        line-height: 62px;
    }

    .heading.h3-regular.nav-menu-text-color,
    .heading.h3-regular.sc-content-text-color {
        font-size: 32px;
        line-height: 42px;
    }

    .heading.h3-regular.color.width {
        width: 50%;
    }

    .heading.h3-medium,
    .heading.h3-semi-bold,
    .heading.h3-bold,
    .heading.h3-s-regular,
    .heading.h3-s-medium,
    .heading.h3-s-semi-bold,
    .heading.h3-s-bold,
    .heading.h4-regular,
    .heading.h4-semi-bold,
    .heading.h4-bold,
    .heading.h5-light,
    .heading.h5-regular,
    .heading.h5-semi-bold,
    .heading.h5-bold,
    .paragraph.p1-light,
    .paragraph.p1-regular,
    .paragraph.p1-medium,
    .paragraph.p1-bold,
    .paragraph.p2-light,
    .paragraph.p2-regular {
        letter-spacing: -.02em;
    }

    .paragraph.p4-regular.page-link-color.paragraph-2-text-size-for-1920 {
        line-height: 23px;
    }

    .sg-typeface-paragraph.bg-color {
        letter-spacing: -.02em;
    }

    .contact-form-section,
    .footer {
        padding-left: 140px;
        padding-right: 140px;
        overflow: hidden;
    }

    .footer-all-div {
        justify-content: space-between;
        width: 100%;
        display: flex;
    }

    .hero-headline {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        flex-flow: column;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr 1fr;
        grid-auto-columns: 1fr;
        display: flex;
    }

    .hero-text-block-1 {
        display: flex;
    }

    .hero-text-block-2 {
        justify-content: center;
        display: flex;
    }

    .container-default.flex {
        grid-row-gap: 100px;
    }

    .faq-question-bar {
        border-bottom-style: none;
        border-bottom-color: #d7dbe6;
        padding-top: 0;
        padding-bottom: 8px;
    }

    .faq-circle {
        background-color: var(--primary-800);
    }

    .faq-left-div {
        width: 40%;
    }

    .faq-content-div {
        flex-direction: row;
        justify-content: flex-start;
    }

    .faq-qa-div {
        width: 100%;
        max-width: 1000px;
    }

    .faq-qa-wrap {
        padding-top: 20px;
    }

    .nav-menu-div {
        display: none;
    }

    .nav-menu-containe {
        max-width: 1280px;
        display: flex;
    }

    .owp-illustration {
        width: 25%;
    }

    .design-main-div {
        grid-column-gap: 32px;
        flex-direction: row;
        align-items: stretch;
        display: flex;
    }

    .design-illustration-div {
        width: 60%;
    }

    .web-development-main-div {
        grid-column-gap: 32px;
        flex-direction: row;
    }

    .web-d-content-div {
        width: 100%;
    }

    .web-d-illustration-div {
        width: 50%;
    }

    .seo-main-div {
        grid-column-gap: 32px;
        flex-direction: row;
    }

    .seo-content-div {
        width: 100%;
    }

    .seo-illustration-div {
        width: 60%;
    }

    .utility-page-content {
        width: 800px;
    }

    .home-link {
        grid-column-gap: 10px;
        justify-content: flex-start;
        align-items: center;
        width: 12%;
        margin-bottom: 80px;
        display: flex;
    }

    .about-subtitle {
        display: flex;
    }

    .space-div {
        width: 50%;
        display: block;
    }
}

@media screen and (max-width: 991px) {
    .nav-bar-dark {
        padding-left: 32px;
        padding-right: 32px;
    }

    .nav-logo {
        width: auto;
    }

    .nav-bar-light {
        padding-left: 32px;
        padding-right: 32px;
    }

    .heading.h1-regular.headline-text-size-for-tablet {
        font-size: 48px;
        line-height: 62px;
    }

    .heading.h1-regular.animation.align {
        line-height: 1.2em;
    }

    .heading.h1-semi-bold {
        font-size: 48px;
        line-height: 62px;
    }

    .heading.h1-semi-bold.align {
        line-height: 72px;
    }

    .heading.h1-s-semi-bold {
        font-size: 48px;
        line-height: 62px;
    }

    .heading.h1-s-semi-bold.align.occ-text-color {
        font-size: 40px;
    }

    .heading.h2-m-semi-bold {
        position: static;
    }

    .heading.h2-m-semi-bold.hide {
        display: block;
    }

    .heading.h3-regular.color.width {
        width: 100%;
    }

    .heading.h3-s-semi-bold {
        font-size: 24px;
        line-height: 31px;
    }

    .paragraph.p2-regular.ct-text-color {
        font-size: 18px;
    }

    .paragraph.p2-regular.ct-text-color.tab {
        font-size: 16px;
        line-height: 21px;
    }

    .paragraph.p2-regular.owp-text-color {
        flex-direction: row;
    }

    .paragraph.p3-regular.align {
        text-align: center;
    }

    .contact-form-section {
        padding: 60px 32px;
    }

    .contact-form {
        width: 100%;
    }

    .contact-and-title-div {
        grid-row-gap: 40px;
        flex-direction: column;
    }

    .contact-right-div {
        width: 100%;
    }

    .footer {
        padding-left: 32px;
        padding-right: 32px;
    }

    .footer-title-and-btn {
        flex-direction: column;
    }

    .contact-btn {
        width: 300px;
    }

    .footer-newsletter-box {
        margin-bottom: 0;
    }

    .text-field {
        width: 100%;
    }

    .newsletter-form {
        width: 40%;
    }

    .footer-all-div {
        grid-row-gap: 40px;
        flex-direction: column;
    }

    .os-content-block {
        grid-row-gap: 24px;
        flex-direction: column;
    }

    .os-content-div {
        width: 100%;
    }

    .section,
    .section.shades-black {
        padding-left: 32px;
        padding-right: 32px;
    }

    .section.shades-white {
        padding-top: 100px;
    }

    .odp-circle-div.p-600 {
        left: auto;
        right: auto;
    }

    .odp-content-componant {
        align-items: flex-start;
    }

    .odp-right-text-div.p-600 {
        grid-row-gap: 24px;
        flex-direction: column;
        align-items: flex-start;
        display: flex;
    }


    .odp-left-div {
        display: none;
    }

    .odp-divider-line.p-700 {
        justify-content: flex-start;
        display: block;
        left: 14px;
    }

    .odp-content-div {
        grid-column-gap: 20px;
        display: flex;
    }

    .ct-title-div {
        padding-left: 0;
    }

    .op-title-div {
        padding-left: 60px;
        padding-right: 60px;
    }

    .op-partmer-logo {
        width: 500vw;
    }

    .faq-left-div {
        width: 100%;
    }

    .faq-content-div {
        flex-direction: column;
    }

    .faq-qa-wrap {
        margin-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
    }

    .testimonial-slider {
        height: 100%;
    }

    .mask {
        width: 70%;
        padding-left: 20px;
    }

    .nav-menu-div {
        padding-bottom: 32px;
        padding-left: 32px;
        padding-right: 32px;
        display: none;
    }

    .nav-menu-containe {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-left-div.mobile {
        grid-column-gap: 40px;
        grid-row-gap: 40px;
    }

    .nav-right-div {
        height: auto;
        padding-left: 0;
    }

    .nav-mail-and-media-link-div {
        justify-content: flex-end;
        height: auto;
    }

    .nav-left-block {
        align-items: flex-start;
        width: 50%;
    }

    .nav-icon-block {
        display: none;
    }

    .occ-service-list {
        grid-row-gap: 32px;
        flex-direction: column;
    }

    .occ-list {
        width: 100%;
    }

    .owp-upper-div {
        flex-direction: column;
        align-items: center;
    }

    .owp-text {
        width: 100%;
    }

    .owp-illustration {
        width: 50%;
    }

    .owp-block {
        grid-row-gap: 20px;
        flex-direction: column;
    }

    .owp-right-div {
        width: 100%;
    }

    .ux-title-div {
        grid-row-gap: 32px;
        flex-direction: column;
    }

    .ux-left-div {
        width: 100%;
    }

    .ux-right-div {
        width: 50%;
    }

    .ux-content-details {
        width: 100%;
    }

    .web-d-bullet-point {
        width: 50%;
    }

    .team-block {
        flex-direction: column;
    }

    .card-team {
        width: auto;
        position: static;
    }

    .card-image {
        justify-content: center;
        height: 400px;
        position: relative;
        overflow: hidden;
    }

    .card-image-container {
        position: static;
    }

    .space-div {
        display: none;
    }

    .blog-all-div {
        grid-row-gap: 60px;
        flex-direction: column;
    }

    .blog-left-div,
    .blog-right-div {
        width: 100%;
    }

    .blog-tag-list {
        grid-template-columns: 1fr 1fr;
    }

    .collection-item {
        display: flex;
    }

    .blog-image-container-div {
        width: 40%;
    }

    .blog-title-div {
        width: 80%;
    }

    .link-icon {
        justify-content: center;
        align-items: center;
        width: 20px;
        display: flex;
    }

    .blog-collection-list,
    .work-list {
        grid-template-columns: 1fr;
    }

    .work-view-btn {
        display: none;
    }

    ._w-text-block.margin {
        grid-row-gap: 16px;
        flex-direction: column;
    }

    ._w-subject {
        width: 100%;
    }

    .blog-content-box {
        grid-column-gap: 20px;
        display: flex;
    }

    .text-block-2 {
        font-family: Supreme, sans-serif;
        font-size: 16px;
    }

    .success-message {
        background-color: var(--primary-500);
        color: var(--shades-white);
    }

    .error-message {
        background-color: var(--primary-50);
        color: var(--shades-black);
        padding: 12px;
    }

    .text-block-3 {
        color: var(--shades-black);
        font-family: Supreme, sans-serif;
        font-size: 16px;
        font-weight: 400;
    }

    .unsplah-images-grid,
    .freepik-images-grid {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .icons-grid {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        grid-template-columns: 1fr 1fr;
    }

    .license-div {
        flex-direction: column;
    }

    .image {
        object-fit: contain;
        width: 100%;
    }

    .illustration-grid {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .heading.h1-regular.animation.align {
        font-size: 48px;
    }

    .heading.h3-medium.nav-menu-text-color {
        font-size: 28px;
        line-height: 36px;
    }

    .heading.h4-regular.color.width {
        width: 100%;
    }

    .paragraph.p2-regular.ct-text-color.tab {
        font-size: 16px;
    }

    .paragraph.p3-regular.align {
        text-align: center;
    }

    .button-request-a-project {
        width: 180px;
        height: 60px;
    }

    .text-field {
        width: 100%;
        padding-left: 12px;
    }

    .newsletter-form {
        width: 60%;
    }

    .footer-bottom-info {
        grid-column-gap: 12px;
        grid-row-gap: 12px;
        flex-direction: column;
        align-items: center;
    }

    .odp-right-text-div {
        margin-bottom: 48px;
    }

    .odp-centre-div {
        justify-content: flex-start;
    }

    .odp-left-div {
        text-align: left;
    }

    .odp-divider-line {
        left: 6px;
    }

    .odp-content-div {
        grid-template-columns: 64px 1fr;
        width: 100%;
    }

    .ct-title-div {
        padding-left: 0;
    }

    .testimonial-slider {
        height: 100%;
        padding-bottom: 0;
    }

    .nav-menu-div {
        display: none;
    }

    .nav-left-div.mobile {
        grid-column-gap: 40px;
        grid-row-gap: 40px;
    }

    .animation-line {
        display: none;
    }

    .service-content-div {
        flex-direction: column;
    }

    .sc-left-div,
    .sc-right-div {
        width: 100%;
    }

    .occ-main-div.flaticon {
        flex-direction: column;
    }

    .owp-illustration,
    .owp-left-div,
    .owp-right-div {
        width: 100%;
    }

    .web-development-main-div {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .utility-page-content {
        width: 400px;
    }

    .tag-title {
        grid-row-gap: 16px;
        flex-direction: column;
    }

    .tag-list {
        grid-template-columns: 1fr 1fr;
    }

    .blog-tag-list {
        grid-template-columns: 1fr;
    }

    .category-list {
        grid-template-columns: 1fr 1fr;
    }

    .blog-image-container-div,
    .blog-title-div {
        width: 100%;
    }

    .wt-left-div {
        width: 60%;
    }

    .blog-content-box {
        grid-row-gap: 20px;
        flex-direction: column;
    }

    .unsplah-images-grid,
    .freepik-images-grid {
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }

    .icons-grid {
        grid-column-gap: 12px;
        grid-row-gap: 12px;
        justify-content: stretch;
        width: 100%;
    }

    .image {
        object-fit: contain;
    }

    .illustration-grid {
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }
}

@media screen and (max-width: 479px) {
    .nav-bar-dark {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nav-logo {
        width: auto;
    }

    .menu-line-1,
    .menu-line-2 {
        width: 40px;
    }

    .logo {
        width: 68px;
    }

    .nav-bar-light {
        padding-left: 20px;
        padding-right: 20px;
    }

    .heading.d2-regular.btn-text-size-for-mobile {
        font-size: 64px;
    }

    .heading.d2-bold.heading-size-for-mobile {
        font-size: 64px;
        line-height: 94px;
    }

    .heading.h1-regular.headline-text-size-for-tablet.headline-text-size-for-mobile {
        font-size: 36px;
        line-height: 47px;
    }

    .heading.h1-regular.animation.align {
        font-size: 40px;
        line-height: 1.4em;
    }

    .heading.h1-semi-bold,
    .heading.h1-semi-bold.align,
    .heading.h1-s-regular,
    .heading.h1-s-semi-bold,
    .heading.h2-semi-bold {
        font-size: 36px;
        line-height: 47px;
    }

    .heading.h2-m-semi-bold {
        font-size: 32px;
        line-height: 42px;
    }

    .heading.h2-s-semi-bold.dm-link-text-color.dm-link-text-size-for-mobile {
        font-size: 24px;
        line-height: 31px;
    }

    .heading.h2-s-medium {
        font-size: 28px;
        line-height: 42px;
    }

    .heading.h3-regular {
        font-size: 24px;
        line-height: 31px;
    }

    .heading.h3-regular.nav-menu-text-color {
        line-height: 42px;
    }

    .heading.h3-s-medium.mobile,
    .heading.h3-s-semi-bold,
    .heading.h3-s-semi-bold.phone-text-color.phn-title-text-size-for-mobile {
        font-size: 24px;
        line-height: 31px;
    }

    .heading.h4-semi-bold {
        font-size: 20px;
        line-height: 26px;
    }

    .heading.h5-semi-bold.occ-text-color {
        text-align: left;
    }

    .paragraph.p2-regular,
    .paragraph.p2-regular.dm-text-color.dm-title-text-size-for-mobile,
    .paragraph.p2-regular.phone-number-text-color.phn-paragraph-text-size-for-mobile {
        font-size: 18px;
        line-height: 23px;
    }

    .paragraph.p2-regular.ct-text-color {
        color: var(--shades-white);
    }

    .paragraph.p3-regular {
        font-size: 16px;
        font-weight: 300;
        line-height: 21px;
    }

    .paragraph.p3-regular.f-newsletter-text-color.newsletter-text-size-for-mobile {
        font-size: 16px;
        line-height: 21px;
    }

    .paragraph.p3-regular.ct-text-color {
        color: var(--shades-white);
    }

    .paragraph.p3-regular._w-para-text-color {
        flex: 1;
    }

    .paragraph.p3-regular.align {
        text-align: center;
    }

    .paragraph.p4-light.btm-info-text-color.btm-text-size-for-mobile {
        font-size: 14px;
        line-height: 19px;
    }

    .paragraph.p4-regular.category-text-color.width {
        width: 100%;
    }

    .button-request-a-project {
        width: 212px;
        height: 71px;
    }

    .contact-form-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .contact-social-media {
        grid-row-gap: 24px;
        flex-direction: column;
        align-items: flex-end;
    }

    .footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer-info-div {
        grid-row-gap: 40px;
    }

    .footer-info {
        grid-row-gap: 24px;
    }

    .text-field,
    .newsletter-form {
        width: 100%;
    }

    .footer-newsletter-div {
        width: auto;
    }

    .footer-bottom-info {
        grid-row-gap: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .h-request-a-project {
        flex-flow: column;
    }

    .section,
    .section.shades-black {
        padding: 60px 20px;
    }

    .section.color {
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .section.shades-white {
        padding-top: 80px;
    }

    .section.overflow-off {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .section.licenses-padding {
        padding-top: 120px;
        padding-bottom: 60px;
    }

    .section.licenses-padding.illustrations {
        padding-top: 120px;
    }

    .sw-tilte-and-btn-div {
        grid-row-gap: 20px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .sw-title {
        flex-direction: column;
        align-items: flex-start;
        display: flex;
    }

    .odp-right-text-div.p-600 {
        height: auto;
        padding: 28px 20px;
    }

    .odp-content-div {
        grid-column-gap: 16px;
        grid-template-columns: 48px 1fr;
        padding-bottom: 0;
    }

    .ct-title-div {
        padding-left: 0;
    }

    .article-title-and-btn {
        grid-row-gap: 20px;
        flex-direction: column;
        align-items: center;
    }

    .op-title-div {
        padding-left: 20px;
        padding-right: 20px;
    }

    .op-partmer-logo {
        width: 600vw;
    }

    .op-logo {
        width: 180px;
    }

    .faq-qa-wrap {
        margin-bottom: 16px;
    }

    .testimonial-slider {
        height: auto;
        padding-bottom: 0;
    }

    .mask {
        width: 100%;
        padding-left: 0;
    }

    .main-div {
        padding: 28px 20px;
    }

    .slide-nav,
    .left-arrow,
    .right-arrow {
        display: none;
    }

    .nav-menu-div {
        flex-direction: column;
        padding-bottom: 0;
        padding-left: 20px;
        padding-right: 20px;
        display: none;
    }

    .nav-menu-containe {
        grid-column-gap: 100px;
        grid-row-gap: 100px;
        justify-content: center;
    }

    .nav-left-div {
        height: auto;
    }

    .nav-left-div.mobile {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

    .animation-line {
        display: none;
    }

    .nav-right-div {
        width: 100%;
    }

    .nav-left-block {
        align-items: flex-start;
        width: 100%;
        height: auto;
    }

    .hz-main-div {
        padding-bottom: 60px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .occ-list {
        padding-left: 24px;
        padding-right: 24px;
    }

    .owp-wrapper {
        padding: 60px 20px;
    }

    .ux-main-div {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ux-right-div {
        width: 100%;
    }

    .design-main-div {
        padding: 60px 20px;
    }

    .design-illustration-div {
        width: 100%;
    }

    .web-development-main-div {
        padding: 60px 20px;
    }

    .web-d-illustration-div,
    .web-d-bullet-point {
        width: 100%;
    }

    .wev-d-bullet-block {
        grid-row-gap: 10px;
        flex-direction: column;
    }

    .seo-main-div {
        padding: 60px 20px;
    }

    .seo-illustration-div {
        width: 100%;
    }

    .dark-menu-line-1,
    .dark-menu-line-2 {
        width: 40px;
    }

    .utility-page-content {
        width: 280px;
    }

    .home-link.flex {
        grid-row-gap: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .card-team {
        height: 420px;
    }

    .blog-category-btn-div {
        flex-direction: column;
    }

    .home-link-arrow {
        display: none;
    }

    .tag-list {
        grid-template-columns: 1fr;
    }

    .blog-tag-div {
        grid-column-gap: 12px;
        grid-row-gap: 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .home-back-block {
        grid-row-gap: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .space {
        display: none;
    }

    .category-list {
        grid-template-columns: 1fr;
    }

    .dropdown-toggle {
        justify-content: space-between;
        width: 100%;
    }

    .dropdown {
        justify-content: space-between;
        width: 100%;
        display: flex;
    }

    .dropdown-list {
        margin-top: 60px;
    }

    .work-list {
        grid-row-gap: 40px;
    }

    .work-view-btn {
        display: none;
    }

    .work-tag-div.margin {
        grid-row-gap: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    ._w-title.margin {
        grid-row-gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .wt-left-div {
        width: 100%;
    }

    .wt-right-div {
        align-items: flex-start;
    }

    ._w-text-block.margin {
        margin-bottom: 40px;
    }

    .unsplah-images-grid {
        width: 100%;
    }

    .license-div {
        flex-direction: column;
    }
}

#w-node-c7c07961-8e71-d7c4-e07b-b844d674bdaa-14f5e125,
#w-node-_79c04c60-4abe-7178-919c-882eee2459b3-14f5e125,
#w-node-_7311c84d-6c56-07d4-52b2-85131d5f9aeb-fcf5e129,
#w-node-_3bd0789f-0bc4-8a9d-9779-bacf88aed5cb-fcf5e129,
#w-node-c58a1fe8-1387-abdc-383c-289bbcd5abba-fcf5e129,
#w-node-_5ae91255-6c55-2184-0722-99d0135e91bf-fcf5e129,
#w-node-_1811079d-6bf4-5f2f-5d82-ddc41f83be3f-fcf5e129,
#w-node-cbfe9f25-67a4-992e-4e25-8f34f5162102-fcf5e129,
#w-node-_78e033e3-524c-445d-9de2-73fac2b5476a-fcf5e129,
#w-node-_293bf735-8685-dba0-18b6-f3e442b392af-fcf5e129,
#w-node-_0b556330-13a9-683d-8c0c-63c2d5a5e038-fcf5e129,
#w-node-c8d4f70f-01fd-e308-4424-76e51edcbbe4-fcf5e129,
#w-node-de6fd1a3-66b1-2572-1866-fee4c38fd322-fcf5e129,
#w-node-_0049a2f5-be90-1061-f394-a5efbd3dc1ca-fcf5e129,
#w-node-dea74c20-1619-e4a3-5b72-a8e8fbe9aa5b-fcf5e129,
#w-node-_86c249d8-939d-75ca-2e43-ba8fed3c57a6-fcf5e129,
#w-node-_69415487-fb33-5254-b171-c040da324ad6-fcf5e129,
#w-node-_8d5bb800-947e-7390-b1c5-f22787bf5809-fcf5e129,
#w-node-d4a5e0c8-b6eb-501d-235f-fcf2af55186f-fcf5e129,
#w-node-_16ac2731-b124-9fd8-821d-7788c77c3464-fcf5e129,
#w-node-_64b19403-35f8-fd7d-4214-3f4d9e036a92-fcf5e129,
#w-node-_8f6ab4d7-54a9-c64b-6385-177c3300b055-fcf5e129,
#w-node-be29433f-923f-3f1e-6c61-67f503aada98-fcf5e129,
#w-node-_4787785c-6cd3-63fb-cac2-29d5b3b3347c-fcf5e129 {
    grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-fc37dbfc-3d70-82c8-d96d-59dfca70243b-fcf5e129 {
    grid-area: span 1 / span 3 / span 1 / span 3;
    justify-self: stretch;
}

#w-node-fc37dbfc-3d70-82c8-d96d-59dfca70243c-fcf5e129,
#w-node-de2e8941-618b-0ce5-bd60-2a61672f5556-fcf5e129,
#w-node-_83dc19bc-8caa-97da-1a13-8682a96afb66-fcf5e129,
#w-node-ea2f57c2-94c2-e230-d3cd-98fe3d75fc15-fcf5e129,
#w-node-_8a131d28-3159-9130-00a1-8b21af283204-fcf5e129,
#w-node-f2919dc9-5815-b188-0e04-6ef78e722f70-fcf5e129,
#w-node-_9d611780-d5fb-73e0-1153-51dba7104cb6-fcf5e129,
#w-node-dc63d75b-6ba5-68f8-f2f0-95f25cd5b6d2-fcf5e129,
#w-node-_57d2ab8a-48a2-4e82-de96-6d6e5f251c87-fcf5e129,
#w-node-_87661b51-2d65-15f1-9281-3793af306360-fcf5e129,
#w-node-dcbb7ee9-60a4-df61-da24-60b19a8dafa2-fcf5e129,
#w-node-fae831b9-a262-4561-b2aa-065246c4b6ac-fcf5e129,
#w-node-a0b26c7d-ef95-cb20-78de-5daad4d98645-fcf5e129,
#w-node-aa125a62-d977-b5b5-d934-eb6b7a4cdb95-fcf5e129,
#w-node-_94ac540b-4420-7730-b23f-643a387724e3-fcf5e129,
#w-node-_252caa4a-dad7-2d21-7868-bcd7e8a57ed9-fcf5e129,
#w-node-_54879ebe-1532-babe-1e8a-ca0e556832ac-fcf5e129,
#w-node-_2071546f-2de2-4f7f-8b35-5856939567b7-fcf5e129,
#w-node-a6365696-5018-1ea6-e01d-261c264f9918-fcf5e129,
#w-node-d65ad03e-e14a-7fea-799b-1430d032dc71-fcf5e129,
#w-node-d38d994b-6cef-1aa4-1330-e284ead46275-fcf5e129,
#w-node-_9659798a-cf98-8fa5-f93f-88c0057b5953-fcf5e129,
#w-node-f31e49ed-44c1-35d8-de95-4de221f41b9e-fcf5e129,
#w-node-_928fbc72-21fc-0b85-ff1e-2ebcfb82b8a4-fcf5e129,
#w-node-_8fe34032-0fd1-076f-ab70-f44e7eefdc02-fcf5e129,
#w-node-_864f8de5-4dee-b482-d538-197344c6dc60-fcf5e129,
#w-node-_64c7e563-5ede-a21c-7c5f-06ca49c80e14-fcf5e129,
#w-node-_2cce5aca-3719-6c55-8f34-18455447cc11-fcf5e129,
#w-node-a5fc7f3c-3853-65fb-89d1-77dea24643de-fcf5e129,
#w-node-e937dc27-644f-0dda-3e71-dff4b8d17ffe-fcf5e129,
#w-node-e937dc27-644f-0dda-3e71-dff4b8d17fff-fcf5e129,
#w-node-e937dc27-644f-0dda-3e71-dff4b8d18000-fcf5e129,
#w-node-e937dc27-644f-0dda-3e71-dff4b8d18001-fcf5e129,
#w-node-e937dc27-644f-0dda-3e71-dff4b8d18002-fcf5e129 {
    grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (max-width: 991px) {
    #w-node-_59e872a4-2c49-1ab4-eaa1-890eb61cd891-14f5e125 {
        grid-area: span 1 / span 1 / span 1 / span 1;
        justify-self: auto;
    }
}

@media screen and (max-width: 767px) {
    #w-node-_42a7b219-53ba-a5b0-24b9-4a9505174dcf-18f5e11d {
        grid-area: 1 / 2 / 2 / 3;
    }

    #w-node-_42a7b219-53ba-a5b0-24b9-4a9505174dd2-18f5e11d {
        grid-area: 1 / 1 / 3 / 2;
    }

    #w-node-_42a7b219-53ba-a5b0-24b9-4a9505174dd4-18f5e11d {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }

    #w-node-_990b1c5e-f791-eaa3-96ea-7663259d44b2-18f5e11d {
        grid-area: 1 / 2 / 2 / 3;
    }

    #w-node-_990b1c5e-f791-eaa3-96ea-7663259d44b5-18f5e11d {
        grid-area: 1 / 1 / 3 / 2;
    }

    #w-node-_990b1c5e-f791-eaa3-96ea-7663259d44b7-18f5e11d {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }

    #w-node-_4b540aa5-0e14-5fbc-4adf-dc47fb4ae98a-18f5e11d {
        grid-area: 1 / 2 / 2 / 3;
    }

    #w-node-_4b540aa5-0e14-5fbc-4adf-dc47fb4ae98d-18f5e11d {
        grid-area: 1 / 1 / 3 / 2;
    }

    #w-node-_4b540aa5-0e14-5fbc-4adf-dc47fb4ae98f-18f5e11d {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }

    #w-node-_4c2d5553-8bf4-ff42-d8d0-478ba2be5b76-18f5e11d {
        grid-area: 1 / 2 / 2 / 3;
    }

    #w-node-_4c2d5553-8bf4-ff42-d8d0-478ba2be5b79-18f5e11d {
        grid-area: 1 / 1 / 3 / 2;
    }

    #w-node-_4c2d5553-8bf4-ff42-d8d0-478ba2be5b7b-18f5e11d {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }

    #w-node-ea2b7d24-2700-e44b-173e-c2d42be6a989-18f5e11d {
        grid-area: 1 / 2 / 2 / 3;
    }

    #w-node-ea2b7d24-2700-e44b-173e-c2d42be6a98c-18f5e11d {
        grid-area: 1 / 1 / 3 / 2;
    }

    #w-node-ea2b7d24-2700-e44b-173e-c2d42be6a98e-18f5e11d {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }

    #w-node-d67a273d-a8bb-6dfd-3cbe-9813f8d83803-18f5e11d {
        grid-area: 1 / 2 / 2 / 3;
    }

    #w-node-d67a273d-a8bb-6dfd-3cbe-9813f8d83806-18f5e11d {
        grid-area: 1 / 1 / 3 / 2;
    }

    #w-node-d67a273d-a8bb-6dfd-3cbe-9813f8d83808-18f5e11d {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }

    #w-node-d4c6e21b-a2de-b180-3c1f-9b19ebee05bd-18f5e11d {
        grid-area: 1 / 2 / 2 / 3;
    }

    #w-node-d4c6e21b-a2de-b180-3c1f-9b19ebee05c0-18f5e11d {
        grid-area: 1 / 1 / 3 / 2;
    }

    #w-node-d4c6e21b-a2de-b180-3c1f-9b19ebee05c2-18f5e11d {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }

    #w-node-_8eed45dd-5350-23de-f2ec-e1078e72eeb6-18f5e11d {
        grid-area: 1 / 2 / 2 / 3;
    }

    #w-node-_8eed45dd-5350-23de-f2ec-e1078e72eeb9-18f5e11d {
        grid-area: 1 / 1 / 3 / 2;
    }

    #w-node-_8eed45dd-5350-23de-f2ec-e1078e72eebb-18f5e11d {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }

    #w-node-_1cf734b3-a9b8-d36e-0155-5b91e7c7eb45-18f5e11d {
        grid-area: 1 / 2 / 2 / 3;
    }

    #w-node-_1cf734b3-a9b8-d36e-0155-5b91e7c7eb48-18f5e11d {
        grid-area: 1 / 1 / 3 / 2;
    }

    #w-node-_1cf734b3-a9b8-d36e-0155-5b91e7c7eb4a-18f5e11d {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }
}


@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-ExtraBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/Supreme-Extrabold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/Supreme-ExtraboldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/Supreme-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/Supreme-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/Supreme-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/Supreme-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/Supreme-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/Supreme-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}



/* Safe utility visibility fix */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media screen and (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}


/* =============================================
   ENCCII HORIZONTAL NAV — REDESIGNED
   ============================================= */

#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

#main-nav.nav-scrolled {
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

#main-nav.nav-scrolled .enccii-nav-link {
    color: #1a1a1a;
}

#main-nav.nav-scrolled .enccii-nav-cta {
    background: #0a0a0a;
    color: #ffffff;
}

.enccii-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 64px;
    height: 64px;
    width: 100%;
    box-sizing: border-box;
}

/* LOGO */
.enccii-nav-logo img {
    display: block;
    height: 44px;
    width: auto;
}

/* NAV LINKS */
.enccii-nav-links {
    display: flex;
    align-items: center;
    gap: 48px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.enccii-nav-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
    padding: 6px 0;
    transition: opacity 0.2s ease;
}

.enccii-nav-link::after {
    display: none;
}

.enccii-nav-link:hover {
    opacity: 0.45;
}

.enccii-nav-link.active {
    opacity: 0.45;
}

/* CTA BUTTON */
.enccii-nav-cta {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    background: #0a0a0a;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 100px;
    letter-spacing: 0.01em;
    transition: background 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.enccii-nav-cta:hover {
    background: #2a2a2a;
    transform: scale(1.02);
}

/* HAMBURGER — desktop hidden */
.enccii-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}

.enccii-hamburger span {
    display: block;
    width: 28px;
    height: 1.5px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: background 0.3s ease;
}

/* ---- WHITE MODE (scrolled into dark) ---- */
#main-nav.nav-white .enccii-nav-link {
    color: #ffffff;
}



#main-nav.nav-white .enccii-nav-cta {
    background: #ffffff;
    color: #0a0a0a;
}

#main-nav.nav-white .enccii-nav-cta:hover {
    background: #e8e8e8;
}

#main-nav.nav-white .enccii-hamburger span {
    background: #ffffff;
}

/* ---- MOBILE MENU ---- */
.enccii-mobile-menu {
    display: none;
    flex-direction: column;
    padding: 16px 64px 32px;
    gap: 0;
    background: #0a0a0a;
}

.enccii-mobile-menu.open {
    display: flex;
}

.enccii-mobile-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.01em;
    transition: opacity 0.2s ease;
}

.enccii-mobile-link:hover {
    opacity: 0.6;
}

.enccii-mobile-link:last-child {
    border-bottom: none;
}

.enccii-mobile-cta {
    margin-top: 20px;
    display: inline-block;
    background: #ffffff;
    color: #0a0a0a;
    padding: 16px 32px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border-bottom: none;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 991px) {

    .enccii-nav-links,
    .enccii-nav-cta {
        display: none;
    }

    .enccii-hamburger {
        display: flex;
    }

    .enccii-nav {
        padding: 0 28px;
        height: 72px;
    }

    #main-nav.mobile-open {
        background: #0a0a0a;
    }

    #main-nav.mobile-open .enccii-nav-link {
        color: #ffffff;
    }

    #main-nav.mobile-open .enccii-hamburger span {
        background: #ffffff;
    }
}

@media (max-width: 479px) {
    .enccii-nav {
        padding: 0 20px;
    }

    .enccii-mobile-menu {
        padding: 12px 20px 24px;
    }
}


/* =============================================
   ENCCII SERVICES — CLEAN MINIMAL
   ============================================= */

.enccii-services-section {
    padding: 140px 80px !important;
    background-color: #060e0d !important;
}

.enccii-services-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* Header row */
.enccii-services-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 80px;
}

.enccii-services-header-left {
    flex: 1;
}

.enccii-services-eyebrow {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ff4040;
    margin-bottom: 24px;
}

.enccii-services-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(38px, 4vw, 60px);
    font-weight: 300;
    line-height: 1.12;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.025em;
}

.enccii-services-title em {
    font-style: italic;
    color: #ff4040;
}

.enccii-services-header-right {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 6px;
}

.enccii-services-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.38);
    margin: 0;
}

.enccii-services-all-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.enccii-services-all-link:hover {
    color: #ff4040;
}

/* Cards */
.enccii-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    overflow: hidden;
}

.enccii-card {
    background: #060e0d;
    padding: 52px 44px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: background 0.3s ease;
    position: relative;
}

.enccii-card:hover {
    background: #0a1a18;
}

.enccii-card--accent {
    background: #ff4040;
}

.enccii-card--accent:hover {
    background: #f03333;
}

.enccii-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
}

.enccii-card-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.2);
}

.enccii-card--accent .enccii-card-num {
    color: rgba(255, 255, 255, 0.45);
}

.enccii-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s ease, background 0.3s ease;
}

.enccii-card:hover .enccii-card-icon {
    color: #ff4040;
    background: rgba(255, 64, 64, 0.1);
}

.enccii-card--accent .enccii-card-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.enccii-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.enccii-card-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 40px;
    flex: 1;
}

.enccii-card--accent .enccii-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

.enccii-card-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    transition: color 0.2s ease, gap 0.2s ease;
}

.enccii-card:hover .enccii-card-link {
    color: #ff4040;
    gap: 12px;
}

.enccii-card--accent .enccii-card-link {
    color: rgba(255, 255, 255, 0.7);
}

.enccii-card--accent:hover .enccii-card-link {
    color: #ffffff;
    gap: 12px;
}

/* Mobile */
@media (max-width: 991px) {
    .enccii-services-section {
        padding: 80px 32px !important;
    }

    .enccii-services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        margin-bottom: 48px;
    }

    .enccii-services-header-right {
        flex: none;
    }

    .enccii-cards-grid {
        grid-template-columns: 1fr;
    }

    .enccii-card {
        padding: 40px 32px;
    }
}

@media (max-width: 479px) {
    .enccii-services-section {
        padding: 60px 20px !important;
    }

    .enccii-card {
        padding: 32px 24px;
    }
}

/* /* =============================================
   HERO HEADLINE — PREMIUM REVEAL + GOLD SHEEN
   ============================================= */

@keyframes enccii-hero-reveal {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
        filter: blur(10px);
        clip-path: inset(0 0 100% 0);
    }

    55% {
        opacity: 1;
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        clip-path: inset(0 0 0% 0);
    }
}

@keyframes enccii-hero-sheen {
    0% {
        background-position: -120% 0;
    }

    100% {
        background-position: 220% 0;
    }
}

*/ .hero-animate {
    opacity: 0;
    background-image: linear-gradient(100deg,
            #000000 35%,
            #ad85a8 48%,
            #f4dfa8 52%,
            #d94f99 56%,
            #0a0a0a 70%);
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0a0a0a;
    animation:
        enccii-hero-reveal 1.3s cubic-bezier(0.19, 1, 0.22, 1) 0.15s forwards,
        enccii-hero-sheen 2s ease-in-out 1.5s 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-animate {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        background-image: none;
        -webkit-text-fill-color: currentColor;
    }
}

.hero-rotate {
    display: inline-block;
    vertical-align: top;
}

.hero-rotate-text {
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-rotate-text.is-swapping {
    opacity: 0;
    transform: translateY(12px);
}

.hero-rotate-text {
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: #0a0a0a;
    font-size: 1.05em;
    line-height: 1;
}

/* Services section */

.svc-section {
    --svc-bg: #0b0b0d;
    --svc-card-bg: #141417;
    --svc-border: rgba(255, 255, 255, 0.08);
    --svc-ink: #f5f5f7;
    --svc-muted: rgba(245, 245, 247, 0.6);
    --svc-accent: #ff4438;
    --svc-glow: #ff4040;
    --svc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;

    width: 100%;
    background: var(--svc-bg);
    color: var(--svc-ink);
    font-family: var(--svc-font);
    padding: 96px 48px 0;
    box-sizing: border-box;
}

.svc-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.svc-eyebrow {
    display: block;
    font-size: 20px;
    font-family: Outfit, sans-serif;
    font-weight: 600;
    color: var(--svc-accent);
    margin-bottom: 12px;
}

.svc-title {
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 500;
    font-family: Outfit, sans-serif;
    letter-spacing: -0.01em;
    margin: 0;
    max-width: 640px;
    color: var(--svc-ink);
}

/* Shared section subtext — use on any section: <p class="section-subtext"> or
   <div class="section-subtext"><p>…</p></div>. Same look/width everywhere. */
.section-subtext {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 400;
    font-family: Outfit, sans-serif;
    letter-spacing: 0.005em;
    color: rgba(245, 245, 247, 0.72);
    max-width: 1020px;
    margin: 22px 0 0;
    padding-left: 18px;
    border-left: 2px solid #ff4438;
}

.section-subtext p {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    font-family: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0 0 12px;
}

.section-subtext p:last-child {
    margin-bottom: 0;
}

.section-subtext-hl {
    color: #f5f5f7;
    font-weight: 500;
}

.svc-view-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    border: 1px solid var(--svc-border);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: var(--svc-ink);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.svc-view-all:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

.svc-grid {
    display: flex;
    width: 100%;
    height: 480px;
    border-top: 1px solid var(--svc-border);
    border-bottom: 1px solid var(--svc-border);
}

.svc-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid var(--svc-border);
    background: var(--svc-card-bg);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: flex-grow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s ease;
}

.svc-card:last-child {
    border-right: none;
}

.svc-card:hover {
    flex-grow: 2.6;
    /* box-shadow: inset 0 0 80px -20px var(--svc-glow); */
}

.svc-blob {
    position: absolute;
    top: -60px;
    left: -40px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--svc-glow) 0%, transparent 70%);
    filter: blur(40px);
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.5s ease, width 0.5s ease, height 0.5s ease;
}

.svc-card:hover .svc-blob {
    opacity: 0.75;
    width: 420px;
    height: 420px;
}

.svc-icon {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 20px;
    z-index: 1;
    transition:
        width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.5s ease,
        left 0.5s ease,
        transform 0.5s ease,
        background 0.4s ease,
        border-color 0.4s ease,
        border-radius 0.4s ease;
}

.svc-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.svc-card:hover .svc-icon {
    width: 42px;
    height: 42px;
    top: 40px;
    left: 32px;
    transform: translateX(0);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--svc-border);
    border-radius: 10px;
}

.svc-card-title {
    position: relative;
    z-index: 1;
    font-size: 24px;
    font-weight: 700;
    margin: 24px 0 0;
    white-space: nowrap;
    order: 2;
    transition: order 0.2s ease;
}

.svc-pills {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.5s ease;
    order: 3;
}

.svc-card:hover .svc-card-title {
    order: 1;
    margin-top: 20px;
}

.svc-card:hover .svc-pills {
    max-height: 320px;
    opacity: 1;
    margin-top: 16px;
    order: 2;
}

.svc-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid var(--svc-border);
    border-radius: 999px;
    font-size: 14px;
    color: var(--svc-ink);
    background: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}

.svc-email-wrapper {
    background: var(--svc-bg);
    padding: 64px 0;
}

.svc-email-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.svc-email-form {
    display: flex;
    gap: 12px;
    background: var(--svc-card-bg);
    border: 1px solid var(--svc-border);
    border-radius: 999px;
    padding: 6px 6px 6px 24px;
}

.svc-email-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: inherit;
    color: var(--svc-ink);
    background: transparent;
}

.svc-email-input::placeholder {
    color: var(--svc-muted);
}

.svc-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--svc-accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.svc-submit-btn:hover {
    background: #e02f24;
}

.svc-email-note {
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--svc-muted);
}

/* Tablet / small laptop: let titles wrap instead of clipping in 4 narrow columns */
@media (min-width: 992px) and (max-width: 1279px) {
    .svc-card-title {
        white-space: normal;
        font-size: 20px;
    }
}

/* Tablet + mobile: stacked cards, no hover-expand */
@media (max-width: 991px) {
    .svc-section {
        padding: 72px 24px 0;
    }

    .svc-header {
        margin-bottom: 32px;
    }

    .svc-title br {
        display: none;
    }

    .section-subtext {
        font-size: 18px;
        max-width: 720px;
    }

    .svc-grid {
        flex-direction: column;
        height: auto;
    }

    .svc-card,
    .svc-card:hover {
        /* KEY FIX: flex-basis 0 + overflow:hidden collapsed cards to their padding height */
        flex: 0 0 auto;
        min-height: 0;
        overflow: hidden;
        border-right: none;
        border-bottom: 1px solid var(--svc-border);
        justify-content: flex-start;
        padding: 28px 24px 32px;
        cursor: default;
    }

    .svc-card:last-child {
        border-bottom: none;
    }

    .svc-blob,
    .svc-card:hover .svc-blob {
        top: -80px;
        left: -60px;
        width: 260px;
        height: 260px;
        opacity: 0.25;
    }

    .svc-icon,
    .svc-card:hover .svc-icon {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 52px;
        height: 52px;
        padding: 8px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--svc-border);
        border-radius: 12px;
    }

    .svc-card-title,
    .svc-card:hover .svc-card-title {
        order: 1;
        margin: 20px 0 0;
        font-size: 22px;
        line-height: 1.2;
        white-space: normal;
    }

    .svc-pills,
    .svc-card:hover .svc-pills {
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
        opacity: 1;
        overflow: visible;
        gap: 8px;
        margin-top: 16px;
    }

    .svc-pill {
        padding: 8px 14px;
        font-size: 13px;
    }
}

@media (max-width: 560px) {
    .svc-section {
        padding: 56px 20px 0;
    }

    .svc-header {
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 28px;
    }

    .svc-eyebrow {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .svc-title {
        font-size: 30px;
    }

    .section-subtext {
        font-size: 16px;
        margin-top: 16px;
        padding-left: 14px;
    }

    .svc-view-all {
        padding: 12px 22px;
    }

    .svc-card,
    .svc-card:hover {
        padding: 24px 20px 28px;
    }

    .svc-email-form {
        flex-direction: column;
        border-radius: 20px;
        padding: 16px;
    }

    .svc-email-input {
        padding: 8px 0;
    }

    .svc-submit-btn {
        justify-content: center;
    }
}

/* Services section end */

/* Decorative faceted gem accents along the top seam */
.enccii-gem {
    position: absolute;
    top: -28px;
    width: 44px;
    height: 56px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 18%, 100% 82%, 80% 100%, 20% 100%, 0% 82%, 0% 18%);
    background:
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0.9) 42%, transparent 50%),
        linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, 0.55) 62%, rgba(255, 255, 255, 0.55) 66%, transparent 74%),
        linear-gradient(160deg, #ffffff 0%, #e4e8ec 45%, #b9c2ca 75%, #8f9aa5 100%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.45),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
    z-index: 2;
}

.enccii-gem-1 {
    left: 8%;
}

.enccii-gem-2 {
    left: 34%;
    top: -20px;
    width: 36px;
    height: 46px;
}

.enccii-gem-3 {
    left: 62%;
    top: -20px;
    width: 36px;
    height: 46px;
}

.enccii-gem-4 {
    left: 88%;
}

@media (max-width: 991px) {
    .enccii-gem {
        display: none;
    }

    .enccii-gem-1,
    .enccii-gem-4 {
        display: block;
        top: -18px;
        width: 30px;
        height: 38px;
    }
}

.enccii-gem {
    position: absolute;
    top: -28px;
    width: 44px;
    height: 56px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 18%, 100% 82%, 80% 100%, 20% 100%, 0% 82%, 0% 18%);
    background:
        linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.95) 18%, rgba(255, 255, 255, 0.95) 21%, transparent 27%),
        linear-gradient(115deg, transparent 33%, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.7) 42%, transparent 48%),
        linear-gradient(115deg, transparent 55%, rgba(180, 200, 220, 0.55) 61%, rgba(180, 200, 220, 0.55) 64%, transparent 70%),
        linear-gradient(115deg, transparent 76%, rgba(255, 255, 255, 0.6) 82%, rgba(255, 255, 255, 0.6) 85%, transparent 91%),
        linear-gradient(160deg, #ffffff 0%, #eef2f6 30%, #cfd8e0 55%, #a3aeb8 78%, #7c8790 100%);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(255, 255, 255, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
    z-index: 2;
    animation: enccii-gem-glint 4s ease-in-out infinite;
}

.enccii-gem::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 28%;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    filter: blur(0.5px);
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: enccii-gem-sparkle 4s ease-in-out infinite;
}

.enccii-gem-2::before {
    animation-delay: 0.8s;
}

.enccii-gem-3::before {
    animation-delay: 1.6s;
}

.enccii-gem-4::before {
    animation-delay: 2.4s;
}

.enccii-gem-2 {
    animation-delay: 0.8s;
}

.enccii-gem-3 {
    animation-delay: 1.6s;
}

.enccii-gem-4 {
    animation-delay: 2.4s;
}

@keyframes enccii-gem-glint {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.25);
    }
}

@keyframes enccii-gem-sparkle {

    0%,
    80%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    90% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@media (prefers-reduced-motion: reduce) {

    .enccii-gem,
    .enccii-gem::before {
        animation: none;
    }
}

/* Rounded top corners on the black services section (Apple-style) */
.svc-section {
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}

@media (max-width: 991px) {
    .svc-section {
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }
}

@media (max-width: 560px) {
    .svc-section {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }
}

.svc-section {
    --svc-bg: #0b0b0d;
    --svc-card-bg: #141417;
    --svc-border: rgba(255, 255, 255, 0.08);
    --svc-ink: #f5f5f7;
    --svc-muted: rgba(245, 245, 247, 0.6);
    --svc-accent: #ff4438;
    --svc-glow: #ff4040;
    --svc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;

    width: 100%;
    background: var(--svc-bg);
    color: var(--svc-ink);
    font-family: var(--svc-font);
    padding: 96px 48px 0;
    box-sizing: border-box;
    position: relative;
    /* add this */
    overflow: visible;
    /* add this */
}



/* ENCCII — Our Work section styles (2-card version).
   Fully scoped under .enccii-work__section — does not touch body, html,
   or any element outside this component. */

/* Poppins + Inter are loaded via <link> in index.html (the @import that was here was ignored by browsers because @import must be at the very top of a stylesheet). */

.enccii-work__section,
.enccii-work__section * {
    box-sizing: border-box;
}

.enccii-work__section {
    --enccii-work-bg: #0a0a0b;
    --enccii-work-red: #ff5a45;
    --enccii-work-red-bright: #ff7a5c;
    --enccii-work-text: #f6f5f3;
    --enccii-work-text-dim: #8f8f94;

    position: relative;
    background: var(--enccii-work-bg);
    color: var(--enccii-work-text);
    font-family: 'Inter', sans-serif;
    padding: 90px 72px 100px;
    overflow: hidden;
}

.enccii-work__eyebrow {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
    color: var(--enccii-work-red);
    margin: 0 0 14px;
}

.enccii-work__big-type {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 4.2vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: var(--enccii-work-text);
    margin: 0 0 24px;
    white-space: normal;
    user-select: none;
}

.enccii-work__accent {
    color: var(--enccii-work-red);
}

.enccii-work__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 36px;
    perspective: 1400px;
}

.enccii-work__card {
    --enccii-rx: 0deg;
    --enccii-ry: 0deg;
    --i: 0;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    isolation: isolate;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
    opacity: 0;
    transform: translateY(40px);
    transform-style: preserve-3d;
    will-change: transform;
}

.enccii-work__card:hover {
    transform: translateY(-10px) rotateX(var(--enccii-rx)) rotateY(var(--enccii-ry));
    z-index: 3;
}

.enccii-work__section.enccii-work__is-visible .enccii-work__card {
    animation: enccii-work-pop-in .95s cubic-bezier(.16, 1.36, .28, 1) forwards;
    animation-delay: calc(var(--i) * .14s);
}

@keyframes enccii-work-pop-in {
    0% {
        opacity: 0;
        transform: translateY(64px) scale(0.78) rotate(-2.5deg);
        filter: blur(18px);
    }

    35% {
        opacity: 1;
        filter: blur(5px);
    }

    55% {
        transform: translateY(-14px) scale(1.035) rotate(1deg);
        filter: blur(0);
    }

    78% {
        transform: translateY(5px) scale(0.99) rotate(-0.3deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .enccii-work__card {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .enccii-work__card:hover {
        transform: none;
    }
}

.enccii-work__glow {
    position: absolute;
    inset: -18px;
    border-radius: 26px;
    background: radial-gradient(60% 60% at 50% 40%, rgba(255, 90, 69, 0.5), transparent 72%);
    opacity: 0;
    z-index: -1;
    filter: blur(18px);
    transition: opacity .5s ease;
    pointer-events: none;
}

.enccii-work__card:hover .enccii-work__glow {
    opacity: 0.55;
}

.enccii-work__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 18px;
    transition: box-shadow .6s cubic-bezier(.22, 1, .36, 1);
}

.enccii-work__card:hover .enccii-work__frame {
    box-shadow: 0 24px 48px -16px rgba(255, 90, 69, 0.32), 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .enccii-work__glow {
        display: none;
    }
}

.enccii-work__frame svg,
.enccii-work__frame img {
    object-fit: cover;
    position: absolute;
    inset: -3%;
    width: 106%;
    height: 106%;
    display: block;
    transform: scale(1.001);
    transition: transform .9s cubic-bezier(.16, .84, .24, 1), filter .6s ease;
    filter: saturate(0.85) brightness(0.82);
}

.enccii-work__card:hover .enccii-work__frame svg,
.enccii-work__card:hover .enccii-work__frame img {
    transform: scale(1.14) translate(-1%, -1%);
    filter: saturate(1.08) brightness(0.95);
}

.enccii-work__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 11, 0) 55%, rgba(10, 10, 11, 0.78) 100%);
    transition: opacity .5s ease;
}

.enccii-work__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    z-index: 2;
    transition: box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}

.enccii-work__card:hover .enccii-work__frame::before {
    box-shadow: inset 0 0 0 1.5px rgba(255, 122, 92, 0.6);
}

.enccii-work__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.enccii-work__name-wrap {
    position: relative;
    display: inline-block;
}

.enccii-work__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.2px;
    margin: 0;
    position: relative;
    z-index: 1;
    transition: color .4s ease, letter-spacing .4s ease;
}

.enccii-work__card:hover .enccii-work__name {
    color: var(--enccii-work-red-bright);
    letter-spacing: 0px;
}

.enccii-work__underline {
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 0%;
    background: var(--enccii-work-red-bright);
    transition: width .55s cubic-bezier(.34, 1.56, .64, 1);
}

.enccii-work__card:hover .enccii-work__underline {
    width: 100%;
}

.enccii-work__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
    transition: border-color .4s ease, background .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}

.enccii-work__arrow svg {
    width: 16px;
    height: 16px;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.enccii-work__card:hover .enccii-work__arrow {
    border-color: transparent;
    background: var(--enccii-work-red);
    transform: translate(3px, -3px) rotate(45deg) scale(1.08);
    box-shadow: 0 6px 18px -4px rgba(255, 90, 69, 0.55);
}

@media (max-width: 860px) {
    .enccii-work__section {
        padding: 64px 24px 70px;
    }

    .enccii-work__grid {
        grid-template-columns: 1fr;
    }
}

/* ENCCII — Featured Work section (filters, hover tilt/glow, scroll-reveal).
   Fully scoped under .enccii-featured-work__section — does not touch body,
   html, or any element outside this component. Deliberately namespaced
   "featured-work" rather than reusing .enccii-work__* above: this is the
   richer version of the Our Work grid (filter pills, stat badges, glow,
   cursor tilt) and needed names that wouldn't collide with the existing
   .enccii-work__* rules right above it. Poppins + Inter are already loaded
   via <link> on every page, same as the block above. */

.enccii-featured-work__section,
.enccii-featured-work__section * {
    box-sizing: border-box;
}

.enccii-featured-work__section {
    --enccii-featured-work-bg: #0a0a0b;
    --enccii-featured-work-red: #ff5a45;
    --enccii-featured-work-red-bright: #ff7a5c;
    --enccii-featured-work-text: #f6f5f3;
    --enccii-featured-work-text-dim: #8f8f94;

    position: relative;
    background: var(--enccii-featured-work-bg);
    color: var(--enccii-featured-work-text);
    font-family: 'Inter', sans-serif;
    padding: 100px 24px 110px;
    overflow: hidden;
}

.enccii-featured-work__inner {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
}

.enccii-featured-work__eyebrow {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
    color: var(--enccii-featured-work-red);
    margin: 0 0 14px;
}

.enccii-featured-work__big-type {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.8px;
    margin: 0 0 10px;
}

.enccii-featured-work__accent {
    color: var(--enccii-featured-work-red);
}

.enccii-featured-work__sub {
    color: var(--enccii-featured-work-text-dim);
    font-size: 16px;
    line-height: 1.55;
    max-width: 480px;
    margin: 0 0 36px;
}

.enccii-featured-work__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
}

.enccii-featured-work__filter {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--enccii-featured-work-text-dim);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 100px;
    padding: 9px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.enccii-featured-work__filter:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.enccii-featured-work__filter.is-active {
    color: #0a0a0b;
    background: var(--enccii-featured-work-red);
    border-color: var(--enccii-featured-work-red);
}

.enccii-featured-work__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    perspective: 1400px;
}

@media (max-width: 640px) {
    .enccii-featured-work__grid {
        grid-template-columns: 1fr;
    }
}

.enccii-featured-work__card {
    --rx: 0deg;
    --ry: 0deg;
    --i: 0;
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 18px;
    isolation: isolate;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transform: translateY(40px);
}

.enccii-featured-work__section.enccii-featured-work__is-visible .enccii-featured-work__card {
    animation: enccii-featured-work-pop 0.95s cubic-bezier(0.16, 1.36, 0.28, 1) forwards;
    animation-delay: calc(var(--i) * 0.12s);
}

.enccii-featured-work__card:hover {
    z-index: 3;
}

@keyframes enccii-featured-work-pop {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.8) rotate(-2deg);
        filter: blur(14px);
    }
    55% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .enccii-featured-work__card {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .enccii-featured-work__card:hover {
        transform: none;
    }
}

.enccii-featured-work__glow {
    position: absolute;
    inset: -18px;
    border-radius: 26px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 60% at 50% 40%, rgba(255, 90, 69, 0.5), transparent 72%);
    opacity: 0;
    filter: blur(18px);
    transition: opacity 0.5s ease;
}

.enccii-featured-work__card:hover .enccii-featured-work__glow {
    opacity: 0;
}

.enccii-featured-work__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 16px;
    transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.enccii-featured-work__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: none;
}

.enccii-featured-work__card:hover .enccii-featured-work__frame {
    box-shadow: 0 30px 50px -28px rgba(0, 0, 0, 0.85);
}

.enccii-featured-work__frame img,
.enccii-featured-work__frame svg,
.enccii-featured-work__frame .enccii-featured-work__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.24, 1), filter 0.6s ease;
    filter: saturate(0.9) brightness(0.85);
}

.enccii-featured-work__card:hover .enccii-featured-work__frame img,
.enccii-featured-work__card:hover .enccii-featured-work__frame svg,
.enccii-featured-work__card:hover .enccii-featured-work__frame .enccii-featured-work__ph {
    transform: scale(1.04);
    filter: saturate(1) brightness(0.92);
}

.enccii-featured-work__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 10, 11, 0) 42%, rgba(10, 10, 11, 0.88) 100%);
}

.enccii-featured-work__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.enccii-featured-work__card:hover .enccii-featured-work__frame::before {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.enccii-featured-work__badge {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(10, 10, 11, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 100px;
    transition: border-color 0.4s ease;
}

.enccii-featured-work__card:hover .enccii-featured-work__badge {
    border-color: rgba(255, 255, 255, 0.4);
}

.enccii-featured-work__badge b {
    color: var(--enccii-featured-work-red-bright);
    font-weight: 800;
}

.enccii-featured-work__tag {
    position: absolute;
    left: 17px;
    bottom: 52px;
    z-index: 3;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.enccii-featured-work__card:hover .enccii-featured-work__tag {
    color: rgba(255, 255, 255, 0.95);
}

.enccii-featured-work__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.enccii-featured-work__name-wrap {
    position: relative;
    display: inline-block;
}

.enccii-featured-work__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--enccii-featured-work-text);
    letter-spacing: -0.2px;
    margin: 0;
    position: relative;
    z-index: 1;
}

.enccii-featured-work__card:hover .enccii-featured-work__name {
    color: var(--enccii-featured-work-text);
}

.enccii-featured-work__underline {
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 1px;
    width: 0;
    background: var(--enccii-featured-work-red);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.enccii-featured-work__card:hover .enccii-featured-work__underline {
    width: 100%;
}

.enccii-featured-work__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
    transition: background 0.4s ease, border-color 0.4s ease;
}

.enccii-featured-work__arrow svg path {
    transition: stroke 0.4s ease;
}

.enccii-featured-work__arrow svg {
    width: 16px;
    height: 16px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.enccii-featured-work__card:hover .enccii-featured-work__arrow {
    border-color: #fff;
    background: #fff;
}

.enccii-featured-work__card:hover .enccii-featured-work__arrow svg {
    transform: translate(2px, -2px);
}

.enccii-featured-work__card:hover .enccii-featured-work__arrow svg path {
    stroke: #0a0a0b;
}

.enccii-featured-work__card.enccii-featured-work__is-filtered-out {
    display: none;
}

.enccii-featured-work__more {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

.enccii-featured-work__more a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    padding: 15px 30px;
    transition: all 0.3s ease;
}

.enccii-featured-work__more a:hover {
    background: #fff;
    color: #0a0a0b;
}

@media (max-width: 860px) {
    .enccii-featured-work__section {
        padding: 64px 24px 70px;
    }

    .enccii-featured-work__grid {
        grid-template-columns: 1fr;
    }
}

.enccii-testimonial-section,
.enccii-testimonial-section * {
    box-sizing: border-box;
}

.enccii-testimonial-section {
    --enccii-testi-bg: #0a0a0b;
    --enccii-testi-card-bg: #141417;
    --enccii-testi-border: rgba(255, 255, 255, 0.08);
    --enccii-testi-ink: #f6f5f3;
    --enccii-testi-muted: #8f8f94;
    --enccii-testi-accent: #ff4438;
    --enccii-testi-accent-bright: #ff7a5c;

    position: relative;
    background: var(--enccii-testi-bg);
    color: var(--enccii-testi-ink);
    font-family: 'Montserrat', sans-serif;
    padding: 140px 72px 90px;
    scroll-margin-top: 120px;
    /* keeps the title clear of a sticky/fixed nav on anchor-scroll */
}

.enccii-testimonial-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 64px;
    flex-wrap: wrap;
}

.enccii-testimonial-section__eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--enccii-testi-accent);
    margin: 0 0 14px;
}

.enccii-testimonial-section__title {
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    max-width: 560px;
    color: var(--enccii-testi-ink);
}

.enccii-testimonial-section__sub {
    max-width: 300px;
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--enccii-testi-muted);
}

/* ---------- Chart ---------- */

.enccii-testimonial-section__chart {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.enccii-testimonial-section__chart::-webkit-scrollbar {
    display: none;
}

.enccii-testimonial-section__scroller {
    position: relative;
    display: inline-block;
    min-width: 100%;
    height: 560px;
}

.enccii-testimonial-section__line {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

.enccii-testimonial-section__line polyline {
    fill: none;
    stroke: var(--enccii-testi-accent-bright);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(255, 122, 92, 0.45));
}

.enccii-testimonial-section__baseline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--enccii-testi-border);
}

.enccii-testimonial-section__track {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 72px;
    height: 100%;
    padding: 0 32px;
    width: max-content;
}

.enccii-testimonial-section__col {
    position: relative;
    width: 170px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.enccii-testimonial-section__bar {
    width: 2px;
    height: var(--enccii-testi-bar);
    background: linear-gradient(180deg, rgba(255, 90, 69, 0.55), rgba(255, 90, 69, 0));
    scroll-snap-align: center;
}

.enccii-testimonial-section__node {
    position: absolute;
    bottom: var(--enccii-testi-bar);
    transform: translate(0, 50%);
    width: 24px;
    height: 24px;
}

.enccii-testimonial-section__node svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.enccii-testimonial-section__node--peak {
    width: 30px;
    height: 30px;
}

.enccii-testimonial-section__month {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--enccii-testi-muted);
}

/* ---------- Card ---------- */

.enccii-testimonial-section__card {
    position: absolute;
    bottom: calc(var(--enccii-testi-bar) + 30px);
    left: 50%;
    transform: translateX(-50%);
    width: 218px;
    background: var(--enccii-testi-card-bg);
    border: 1px solid var(--enccii-testi-border);
    border-radius: 16px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.enccii-testimonial-section__col:hover .enccii-testimonial-section__card,
.enccii-testimonial-section__card:focus-within {
    border-color: rgba(255, 122, 92, 0.45);
    box-shadow: 0 16px 40px -18px rgba(255, 90, 69, 0.45);
    transform: translateX(-50%) translateY(-4px);
}

.enccii-testimonial-section__stat {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 26px;
    color: var(--enccii-testi-accent-bright);
    line-height: 1;
}

.enccii-testimonial-section__statunit {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: var(--enccii-testi-muted);
    margin-top: 4px;
}

.enccii-testimonial-section__quote {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(246, 245, 243, 0.85);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.4s ease;
}

.enccii-testimonial-section__col:hover .enccii-testimonial-section__quote,
.enccii-testimonial-section__card:focus-within .enccii-testimonial-section__quote {
    max-height: 220px;
    opacity: 1;
}

.enccii-testimonial-section__person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.enccii-testimonial-section__avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #1a0d0b;
    background: linear-gradient(135deg, var(--enccii-testi-g1), var(--enccii-testi-g2));
}

.enccii-testimonial-section__who {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.enccii-testimonial-section__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--enccii-testi-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.enccii-testimonial-section__role {
    font-size: 11.5px;
    color: var(--enccii-testi-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Peak card (final point): the story lands here, so it's open by default */
.enccii-testimonial-section__card--peak {
    width: 246px;
    border-color: rgba(255, 122, 92, 0.35);
    background: linear-gradient(180deg, #17110f, var(--enccii-testi-card-bg) 60%);
}

.enccii-testimonial-section__card--peak .enccii-testimonial-section__quote {
    max-height: 220px;
    opacity: 1;
}

.enccii-testimonial-section__card--peak .enccii-testimonial-section__stat {
    font-size: 30px;
}

/* ---------- Scale up on large / wide desktop screens ---------- */

@media (min-width: 1400px) {
    .enccii-testimonial-section {
        padding: 160px 96px 110px;
    }

    .enccii-testimonial-section__header {
        margin-bottom: 80px;
    }

    .enccii-testimonial-section__title {
        font-size: clamp(38px, 3.2vw, 56px);
        max-width: 680px;
    }

    .enccii-testimonial-section__sub {
        max-width: 360px;
        font-size: 16px;
    }

    .enccii-testimonial-section__scroller {
        height: 660px;
    }

    .enccii-testimonial-section__track {
        gap: 96px;
        padding: 0 48px;
    }

    .enccii-testimonial-section__col {
        width: 210px;
    }

    .enccii-testimonial-section__node {
        width: 30px;
        height: 30px;
    }

    .enccii-testimonial-section__node--peak {
        width: 38px;
        height: 38px;
    }

    .enccii-testimonial-section__card {
        width: 260px;
        padding: 22px 22px 20px;
        gap: 12px;
    }

    .enccii-testimonial-section__card--peak {
        width: 300px;
    }

    .enccii-testimonial-section__stat {
        font-size: 32px;
    }

    .enccii-testimonial-section__card--peak .enccii-testimonial-section__stat {
        font-size: 38px;
    }

    .enccii-testimonial-section__statunit {
        font-size: 13px;
    }

    .enccii-testimonial-section__quote {
        font-size: 15px;
        line-height: 1.6;
    }

    .enccii-testimonial-section__avatar {
        width: 36px;
        height: 36px;
        font-size: 12.5px;
    }

    .enccii-testimonial-section__name {
        font-size: 14.5px;
    }

    .enccii-testimonial-section__role {
        font-size: 12.5px;
    }

    .enccii-testimonial-section__month {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .enccii-testimonial-section__quote {
        max-height: none;
        opacity: 1;
        transition: none;
    }

    .enccii-testimonial-section__card {
        transition: none;
    }
}

/* ---------- Mobile: drop the chart, keep the story ---------- */

@media (max-width: 760px) {
    .enccii-testimonial-section {
        padding: 64px 20px 72px;
    }

    .enccii-testimonial-section__header {
        align-items: flex-start;
        margin-bottom: 40px;
    }

    .enccii-testimonial-section__chart {
        -webkit-mask-image: none;
        mask-image: none;
        overflow: visible;
    }

    .enccii-testimonial-section__line,
    .enccii-testimonial-section__baseline,
    .enccii-testimonial-section__bar {
        display: none;
    }

    .enccii-testimonial-section__scroller {
        height: auto;
        display: block;
        min-width: 0;
    }

    .enccii-testimonial-section__track {
        flex-direction: column;
        align-items: stretch;
        width: auto;
        height: auto;
        padding: 0;
        gap: 0;
    }

    .enccii-testimonial-section__col {
        width: auto;
        padding: 0 0 0 28px;
        margin-bottom: 28px;
        position: relative;
    }

    .enccii-testimonial-section__col::before {
        content: "";
        position: absolute;
        left: 11px;
        top: 26px;
        bottom: -28px;
        width: 1px;
        background: var(--enccii-testi-border);
    }

    .enccii-testimonial-section__col:last-child::before {
        display: none;
    }

    .enccii-testimonial-section__node {
        position: absolute;
        bottom: auto;
        top: 0;
        left: 0;
        transform: none;
        width: 22px;
        height: 22px;
    }

    .enccii-testimonial-section__month {
        margin: 0 0 10px;
    }

    .enccii-testimonial-section__card {
        position: static;
        transform: none;
        width: 100%;
    }

    .enccii-testimonial-section__col:hover .enccii-testimonial-section__card {
        transform: none;
    }

    .enccii-testimonial-section__quote {
        max-height: none;
        opacity: 1;
    }

    .enccii-testimonial-section__card--peak {
        width: 100%;
    }
}






/* ============================================================
   Testimonials section styles
   All selectors are scoped to the "enccii-" prefix so they will
   not collide with any existing classes on your site.
   Drop this file's fonts (Bitter + Inter) into your <head> if
   they aren't already loaded:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
============================================================= */

.enccii-stage,
.enccii-stage * {
    box-sizing: border-box;
}

.enccii-stage {
    --enccii-page: #ffffff;
    --enccii-card: #ffffff;
    --enccii-line: #e3e0da;
    --enccii-line-strong: #111111;
    --enccii-ink: #111111;
    --enccii-muted: #7c7a76;
    --enccii-serif: 'Outfit', sans-serif;
    --enccii-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --enccii-gutter: clamp(16px, 4vw, 48px);
    --enccii-gap: clamp(14px, 1.8vw, 26px);
    --enccii-card-pad: clamp(22px, 2.6vw, 40px);

    position: relative;
    width: 100%;
    background: var(--enccii-page);
    color: var(--enccii-ink);
    font-family: var(--enccii-sans);
    -webkit-font-smoothing: antialiased;
    color-scheme: light;
}

/* ---------- pinned scroll stage ---------- */
.enccii-pin {
    position: sticky;
    top: 0;
    height: min(100vh, 860px);
    height: min(100dvh, 860px);
    display: flex;
    flex-direction: column;
    justify-content: center;          /* fallback */
    justify-content: safe center;     /* centre the heading + cards; never clip the top on short screens */
    gap: clamp(28px, 4.5vh, 60px);
    overflow: hidden;
    padding: clamp(24px, 4vh, 48px) 0;
}

.enccii-head {
    padding: 0 var(--enccii-gutter);
    text-align: center;
}

.enccii-head h2 {
    margin: 40px;
    font-family: var(--enccii-serif);
    font-weight: 400;
    font-size: clamp(30px, 6vw, 68px);
    line-height: 1.08;
    letter-spacing: -.018em;
    text-wrap: balance;
}

/* ---------- track ---------- */
.enccii-rail {
    width: 100%
}

.enccii-track {
    display: flex;
    gap: var(--enccii-gap);
    padding: 0 var(--enccii-gutter);
    will-change: transform;
}

/* ---------- card ---------- */
.enccii-card {
    flex: 0 0 auto;
    width: min(690px, 86vw);
    display: flex;
    flex-direction: column;
    padding: var(--enccii-card-pad);
    background: var(--enccii-card);
    border: 1px solid var(--enccii-line);
    border-radius: 4px;
}

/* Premium hover lift — only on devices with a real pointer/hover
   (desktop, trackpad, mouse). Phones and other touch devices skip
   this entirely so nothing feels "stuck" after a tap.
   Colors are pinned with !important because some site themes ship
   a generic ":hover" rule that darkens any card-like element — this
   keeps our card white with dark text no matter what the host page
   does on hover. */
@media (hover:hover) and (pointer:fine) {
    .enccii-card {
        transition: transform .35s cubic-bezier(.16, 1, .3, 1),
            box-shadow .35s cubic-bezier(.16, 1, .3, 1),
            border-color .35s ease;
    }

    .enccii-card:hover {
        transform: translateY(-6px);
        border-color: transparent;
        background: var(--enccii-card) !important;
        color: var(--enccii-ink) !important;
        box-shadow:
            0 1px 2px rgba(17, 17, 17, .04),
            0 8px 24px rgba(17, 17, 17, .06),
            0 28px 56px -16px rgba(17, 17, 17, .16);
    }

    .enccii-card:hover .enccii-quote,
    .enccii-card:hover .enccii-logo span,
    .enccii-card:hover .enccii-name strong {
        color: var(--enccii-ink) !important;
    }

    .enccii-card:hover .enccii-mark {
        color: rgba(17, 17, 17, .45) !important;
    }

    .enccii-card:hover .enccii-name span {
        color: var(--enccii-muted) !important;
    }

    .enccii-card:hover .enccii-logo svg,
    .enccii-card:hover .enccii-logo svg path,
    .enccii-card:hover .enccii-logo svg circle,
    .enccii-card:hover .enccii-logo svg rect {
        stroke: #111 !important;
    }
}

.enccii-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(20px, 3.2vh, 42px);
}

.enccii-logo svg {
    flex: 0 0 auto;
    display: block
}

.enccii-logo span {
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 500;
    letter-spacing: -.01em;
}

.enccii-quote {
    margin: 0 0 clamp(22px, 3.2vh, 40px);
    font-family: var(--enccii-serif);
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 33px);
    line-height: 1.24;
    letter-spacing: -.012em;
    text-indent: -.44em;
    max-width: 23ch;
}

.enccii-quote.enccii-quote--long {
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.4;
    max-width: 46ch;
}

.enccii-note {
    margin: -24px 0 32px;
    font-size: 14px;
    color: var(--enccii-muted, #6b6b6b);
}

.enccii-mark {
    color: rgba(17, 17, 17, .45)
}

.enccii-foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.enccii-name {
    font-size: clamp(12.5px, 1.05vw, 15px);
    line-height: 1.5;
    margin: 0
}

.enccii-name strong {
    font-weight: 500;
    display: block
}

.enccii-name span {
    color: var(--enccii-muted)
}

.enccii-photo {
    flex: 0 0 auto;
    width: clamp(88px, 11.5vw, 170px);
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 2px;
    margin: 0;
    background:
        linear-gradient(rgba(17, 17, 17, .07) 1px, transparent 1px) 0 0/13px 13px,
        linear-gradient(90deg, rgba(17, 17, 17, .07) 1px, transparent 1px) 0 0/13px 13px,
        #efeeeb;
}

.enccii-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) contrast(1.05);
    mix-blend-mode: multiply;
}

/* ---------- progress rule ---------- */
.enccii-progress {
    margin: 0 var(--enccii-gutter);
    height: 1px;
    background: var(--enccii-line);
    position: relative;
}

.enccii-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--enccii-p, 0%);
    background: var(--enccii-line-strong);
}

.enccii-progress[hidden] {
    display: none
}

/* ---------- phone prev/next controls ----------
   Small rectangular buttons, phone only. Desktop relies on the
   scroll-pin + swipe/wheel; these give phone visitors an
   explicit, deliberate way to move the carousel too. */
.enccii-controls {
    display: none;
}

.enccii-arrow {
    width: 40px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--enccii-line);
    border-radius: 6px;
    background: var(--enccii-card);
    color: var(--enccii-ink);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .1s ease;
    padding: 0;
}

.enccii-arrow:active {
    transform: scale(.94);
    background: #f5f4f2
}

.enccii-arrow:focus-visible {
    outline: 2px solid var(--enccii-ink);
    outline-offset: 2px
}

.enccii-arrow[disabled] {
    opacity: .3;
    cursor: default
}

.enccii-arrow[disabled]:active {
    transform: none;
    background: var(--enccii-card)
}

/* ---------- fallback: plain sideways scroll ----------
   Applied by testimonials.js on wide screens when the cards
   already fit the viewport, or the visitor prefers reduced
   motion. Not used on phones — see the stacked layout below. */
.enccii-stage.enccii-is-static .enccii-pin {
    position: static;
    height: auto;
    padding: clamp(48px, 8vw, 96px) 0;
}

.enccii-stage.enccii-is-static .enccii-rail {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.enccii-stage.enccii-is-static .enccii-rail::-webkit-scrollbar {
    display: none
}

.enccii-stage.enccii-is-static .enccii-card {
    scroll-snap-align: start
}

.enccii-stage.enccii-is-static .enccii-progress {
    display: none
}

.enccii-rail:focus-visible {
    outline: 2px solid var(--enccii-ink);
    outline-offset: 6px
}

/* ---------- phones: native swipeable carousel ----------
   Below the breakpoint the section is never pinned to the
   viewport — no scroll-jacking. The cards become a normal
   horizontally swipeable strip with snap points, and the page
   itself scrolls vertically as usual. testimonials.js also
   skips all pin/measure logic at this width — kept in sync
   with the same 700px breakpoint. */
@media (max-width:700px) {
    .enccii-pin {
        position: static !important;
        height: auto !important;
        justify-content: flex-start;
        padding: clamp(56px, 14vw, 88px) 0 clamp(48px, 12vw, 72px);
    }

    .enccii-rail {
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .enccii-rail::-webkit-scrollbar {
        display: none
    }

    .enccii-track {
        transform: none !important;
    }

    .enccii-card {
        width: 88vw;
        scroll-snap-align: center;
        border-radius: 3px;
    }

    .enccii-quote {
        max-width: none
    }

    .enccii-photo {
        width: 84px
    }

    .enccii-progress {
        display: none
    }

    /* prev/next + dots row, phone only */
    .enccii-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin-top: clamp(18px, 4vw, 28px);
    }

    .enccii-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 0;
    }

    .enccii-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--enccii-line);
        transition: background .2s ease, transform .2s ease;
    }

    .enccii-dots span.enccii-dot-active {
        background: var(--enccii-line-strong);
        transform: scale(1.25);
    }
}

@media (min-width:701px) {
    .enccii-dots {
        display: none
    }
}

@media (max-width:380px) {
    .enccii-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px
    }

    .enccii-photo {
        width: 92px
    }
}


/* ===== Hero: tablet + mobile fixes ===== */
@media (max-width: 991px) {

    /* Clear the fixed nav (~112px) and trim the dead space under the buttons */
    .section.enccii-hero-section {
        padding-top: 150px;
        padding-bottom: 52px;
    }

    .enccii-hero-section .container-default.flex {
        grid-row-gap: 36px;
        row-gap: 36px;
    }

    /* The h1 uses .heading-hero (no .heading class), so the old mobile rules never hit it */
    .enccii-hero-section .heading-hero {
        font-size: clamp(32px, 9.6vw, 64px);
        line-height: 1.12;
        letter-spacing: -0.02em;
        text-wrap: balance;
        /* reserve 4 lines so the buttons don't jump when the rotating phrase changes length */
        min-height: 4.5em;
    }

    /* Let the rotating phrase flow inline with "by" instead of dropping to its own tall block */
    .enccii-hero-section .hero-rotate,
    .enccii-hero-section .hero-rotate-text {
        display: inline;
    }

    .enccii-hero-section .hero-rotate-text {
        font-size: 1.08em;
        line-height: 1.05;
    }
}

@media (max-width: 767px) {

    /* Full-width stacked buttons with readable text */
    .enccii-hero-section .h-request-a-project {
        flex-direction: column;
        align-items: stretch;
        box-sizing: border-box;
        width: 100%;
        max-width: 340px;
        gap: 12px;
    }

    .enccii-hero-section .h-request-a-project .button-request-a-project {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 18px 24px;
        font-size: 15px;
        white-space: nowrap;
    }
}

/* =====================================================================
   ENCCII custom styles (merged from the former enx-custom.css)
   Everything below was previously loaded after this file, so the cascade
   order is unchanged. New components use the prefixes enx-* / enccii-*.
   Rules that override Webflow classes are wrapped in :where(.enx-page)
   and only apply on pages whose <body> has class="enx-page".
   ===================================================================== */

/* ---------- 1. Global helpers ---------- */
html:has(> body.enx-page) {
    scroll-padding-top: 100px;
}

/* ---------- 2. Blog carousel (Latest articles) ---------- */
.enx-blog {
    --enx-blog-bg: #001412;
    --enx-blog-red: #ff4040;
    --enx-blog-ink: #fff;
    --enx-blog-mute: rgba(255, 255, 255, .66);
    --enx-blog-line: rgba(255, 255, 255, .16);
    background: var(--enx-blog-bg);
    color: var(--enx-blog-ink);
    padding: 110px 0 120px;
    font-family: Montserrat, sans-serif
}

.enx-blog * {
    box-sizing: border-box
}

.enx-blog__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px
}

.enx-blog__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 56px
}

.enx-blog__title {
    font-family: Outfit, Montserrat, sans-serif;
    font-weight: 600;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff
}

.enx-blog__title em {
    font-style: normal;
    color: var(--enx-blog-red)
}

.enx-blog__controls {
    display: flex;
    gap: 12px;
    align-items: center
}

.enx-blog__all {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 28px;
    border: 1.5px solid var(--enx-blog-line);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    transition: .25s
}

.enx-blog__all:hover {
    background: var(--enx-blog-red);
    border-color: var(--enx-blog-red)
}

.enx-blog__arrow {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1.5px solid var(--enx-blog-line);
    color: #fff;
    cursor: pointer;
    transition: .25s
}

.enx-blog__arrow svg {
    width: 20px;
    height: 20px
}

.enx-blog__arrow:hover:not(:disabled) {
    background: var(--enx-blog-red);
    border-color: var(--enx-blog-red)
}

.enx-blog__arrow:disabled {
    opacity: .35;
    cursor: not-allowed
}

.enx-blog__arrow:focus-visible,
.enx-blog__all:focus-visible,
.enx-blog__more:focus-visible,
.enx-blog__card-title a:focus-visible {
    outline: 2px solid var(--enx-blog-red);
    outline-offset: 3px
}

.enx-blog__track {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
}

.enx-blog__track::-webkit-scrollbar {
    display: none
}

.enx-blog__card {
    flex: 0 0 calc((100% - 96px)/4);
    scroll-snap-align: start;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: calc(var(--enx-i)*90ms)
}

.enx-blog.enx-is-visible .enx-blog__card {
    opacity: 1;
    transform: none
}

.enx-blog__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #06221f
}

.enx-blog__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.enx-blog__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 14px
}

.enx-blog__tag {
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase
}

.enx-blog__tag--web {
    background: rgba(255, 64, 64, .16);
    color: #ff8d84
}

.enx-blog__tag--ux {
    background: rgba(255, 255, 255, .12);
    color: #fff
}

.enx-blog__read {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--enx-blog-mute)
}

.enx-blog__card-title {
    margin: 0 0 18px;
    font-family: Outfit, Montserrat, sans-serif;
    font-weight: 500;
    font-size: clamp(19px, 1.5vw, 23px);
    line-height: 1.3;
    letter-spacing: -.01em
}

.enx-blog__card-title a {
    color: #fff;
    text-decoration: none
}

.enx-blog__more {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--enx-blog-red);
    text-decoration: none
}

@media(max-width:1199px) {
    .enx-blog__card {
        flex-basis: calc((100% - 64px)/3)
    }
}

@media(max-width:991px) {
    .enx-blog__card {
        flex-basis: calc((100% - 32px)/2)
    }
}

@media(max-width:767px) {
    .enx-blog {
        padding: 72px 0 80px
    }

    .enx-blog__head {
        margin-bottom: 32px;
        gap: 24px
    }

    .enx-blog__title {
        font-size: clamp(30px, 8.5vw, 38px)
    }

    .enx-blog__controls {
        width: 100%;
        gap: 10px
    }

    .enx-blog__all {
        flex: 1;
        justify-content: center;
        height: 48px;
        padding: 0 16px;
        font-size: 14px;
        white-space: nowrap
    }

    .enx-blog__arrow {
        width: 48px;
        height: 48px;
        flex: 0 0 48px
    }

    .enx-blog__track {
        gap: 20px
    }

    .enx-blog__card {
        flex-basis: 80%
    }
}

@media(prefers-reduced-motion:reduce) {
    .enx-blog__card {
        opacity: 1;
        transform: none;
        transition: none
    }

    .enx-blog__track {
        scroll-behavior: auto
    }
}


/* ---------- 3. Mobile: stop oversized headings on phones ---------- */
@media (max-width:767px) {

    :where(.enx-page) .heading.h1-regular,
    :where(.enx-page) .heading.h1-semi-bold,
    :where(.enx-page) .heading.h1-s-regular,
    :where(.enx-page) .heading.h1-s-semi-bold,
    :where(.enx-page) .heading.h1-bold {
        font-size: clamp(30px, 8.5vw, 40px) !important;
        line-height: 1.2 !important
    }

    :where(.enx-page) .heading.d1-regular,
    :where(.enx-page) .heading.d1-bold {
        font-size: clamp(34px, 9.5vw, 44px) !important;
        line-height: 1.15 !important
    }

    :where(.enx-page) .heading.d2-regular,
    :where(.enx-page) .heading.d2-bold {
        line-height: 1.15 !important
    }

    :where(.enx-page) .heading.h2-regular,
    :where(.enx-page) .heading.h2-semi-bold,
    :where(.enx-page) .heading.h2-bold,
    :where(.enx-page) .heading.h2-m-regular,
    :where(.enx-page) .heading.h2-m-semi-bold,
    :where(.enx-page) .heading.h2-m-bold {
        font-size: clamp(24px, 7vw, 32px) !important;
        line-height: 1.25 !important
    }
}


/* ---------- 4. Navigation: white look, slimmer, accessible ---------- */
:root {
    --enx-nav-h: 88px;
    --enx-nav-h-scrolled: 88px
}

#main-nav.nav-bar-dark {
    padding: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-shadow: none !important;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease
}

#main-nav.nav-scrolled {
    background: rgba(255, 255, 255, .97) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom-color: rgba(0, 0, 0, .07);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06) !important
}

#main-nav .enccii-nav {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px !important;
    height: var(--enx-nav-h) !important;
    transition: height .3s ease
}

#main-nav.nav-scrolled .enccii-nav {
    height: var(--enx-nav-h-scrolled) !important
}

#main-nav .enccii-nav-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto
}

#main-nav .enccii-nav-logo img {
    height: 44px !important;
    width: auto
}

@media (max-width:991px) {
    #main-nav .enccii-nav-logo img {
        height: 36px !important
    }
}

#main-nav .enccii-nav-links {
    gap: 44px
}

#main-nav .enccii-nav-link,
#main-nav.nav-scrolled .enccii-nav-link,
#main-nav.nav-white .enccii-nav-link {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #1a1a1a !important;
    opacity: 1 !important;
    padding: 8px 0;
    transition: color .25s ease
}

#main-nav .enccii-nav-link::after {
    display: none !important;
    content: none !important
}

#main-nav .enccii-nav-link:hover,
#main-nav.nav-scrolled .enccii-nav-link:hover {
    color: #e02f24 !important
}

#main-nav .enccii-nav-link.active,
#main-nav.nav-scrolled .enccii-nav-link.active {
    color: #e02f24 !important
}

#main-nav .enccii-nav-cta,
#main-nav.nav-scrolled .enccii-nav-cta,
#main-nav.nav-white .enccii-nav-cta {
    background: #0a0a0a !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    padding: 15px 32px;
    border: 0;
    border-radius: 100px;
    transition: background .25s ease, transform .2s ease
}

#main-nav .enccii-nav-cta:hover {
    background: #ff4040 !important;
    transform: translateY(-1px)
}

#main-nav a:focus-visible,
#main-nav button:focus-visible {
    outline: 2px solid #ff4040;
    outline-offset: 4px;
    border-radius: 4px
}

#main-nav .enccii-hamburger span,
#main-nav.nav-white .enccii-hamburger span {
    background: #0a0a0a !important;
    height: 2px;
    transition: transform .3s ease, opacity .3s ease
}

#main-nav.mobile-open .enccii-hamburger span:first-child {
    transform: translateY(3.5px) rotate(45deg)
}

#main-nav.mobile-open .enccii-hamburger span:last-child {
    transform: translateY(-3.5px) rotate(-45deg)
}

#main-nav .enccii-mobile-menu {
    background: #fff;
    padding: 8px 24px 28px !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    max-height: calc(100vh - var(--enx-nav-h));
    overflow-y: auto
}

#main-nav .enccii-mobile-link {
    font-size: 18px;
    color: #0a0a0a;
    padding: 16px 0;
    border-bottom-color: rgba(0, 0, 0, .08)
}

#main-nav .enccii-mobile-link:hover {
    opacity: 1;
    color: #ff4040
}

#main-nav .enccii-mobile-cta {
    background: #0a0a0a !important;
    color: #fff !important;
    text-align: center;
    border-radius: 100px
}

#main-nav .enccii-mobile-cta:hover {
    background: #ff4040 !important;
    color: #fff
}

.enx-skip {
    position: fixed;
    left: 16px;
    top: -60px;
    z-index: 10000;
    background: #0a0a0a;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font: 600 14px Montserrat, sans-serif;
    text-decoration: none;
    transition: top .2s
}

.enx-skip:focus {
    top: 12px
}

@media(max-width:991px) {
    #main-nav .enccii-nav {
        height: 60px !important
    }

    #main-nav.mobile-open {
        background: #fff !important
    }
}

@media(prefers-reduced-motion:reduce) {

    #main-nav,
    #main-nav * {
        transition: none !important
    }
}


/* ---------- 5. Footer: brand red + same heading pattern as blog ---------- */
/* big headline: "Have an idea?" white, "Let's Talk" red like the blog's accent word */
:where(.enx-page) .footer-title-and-btn .heading {
    font-family: Outfit, Montserrat, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    font-size: clamp(40px, 5vw, 72px) !important;
    line-height: 1.1 !important;
    color: #fff !important
}

:where(.enx-page) .footer-title-and-btn .contact-btn .heading {
    color: #ff4040 !important
}

:where(.enx-page) .footer-title-and-btn .c-btn-animation-line {
    background-color: #ff4040 !important;
    height: 4px
}

/* column titles */
:where(.enx-page) .footer-info .heading.h5-regular {
    font-family: Outfit, Montserrat, sans-serif !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
    color: #fff !important;
    margin-bottom: 6px
}

:where(.enx-page) .footer-info .heading.h5-medium {
    font-family: Outfit, Montserrat, sans-serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    letter-spacing: -.01em !important;
    color: #fff !important
}

/* small labels (Phone / Address) match the blog's tag + read-time style */
:where(.enx-page) .footer-info .paragraph.f-phn-text-color {
    font-family: Montserrat, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: #ff4040 !important
}

/* body text + links */
:where(.enx-page) .footer-info .paragraph.footer-text-color,
:where(.enx-page) .footer-info .paragraph.page-link-color {
    font-family: Montserrat, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
    color: rgba(255, 255, 255, .72) !important;
    transition: color .25s ease
}

:where(.enx-page) .footer-info a.paragraph.page-link-color:hover,
:where(.enx-page) .footer-info .w--current {
    color: #ff4040 !important
}

:where(.enx-page) .footer-info .heading.h5-medium:hover {
    color: #ff4040 !important
}

:where(.enx-page) .footer-info .paragraph.f-newsletter-text-color {
    font-family: Montserrat, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, .72) !important
}

:where(.enx-page) .footer-bottom-link a {
    font-family: Montserrat, sans-serif !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, .6) !important;
    transition: color .25s
}

:where(.enx-page) .footer-bottom-link a:hover {
    color: #ff4040 !important
}

/* newsletter: teal -> brand red */
:where(.enx-page) .footer-newsletter-box .submit-button {
    background-color: #ff4040 !important;
    transition: background-color .25s ease
}

:where(.enx-page) .footer-newsletter-box .submit-button:hover {
    background-color: #e02f24 !important
}

/* newsletter button: the teal was baked into the Btn.svg background image -> replace with our own white plane on red */
:where(.enx-page) .footer-newsletter-box .submit-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2.01 21 23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;
    background-color: #ff4040 !important
}

:where(.enx-page) .footer-newsletter-box .text-field {
    font-family: Montserrat, sans-serif !important;
    font-size: 15px !important
}

/* modern social icons: outlined circles, white icon, brand red on hover */
:where(.enx-page) .enx-social {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    gap: 16px 24px
}

:where(.enx-page) .enx-soc {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .16);
    display: grid;
    place-items: center;
    color: #fff;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease
}

:where(.enx-page) .enx-soc svg {
    width: 20px;
    height: 20px
}

:where(.enx-page) .enx-soc:hover {
    background: #ff4040;
    border-color: #ff4040;
    transform: translateY(-3px)
}

:where(.enx-page) .enx-soc:focus-visible {
    outline: 2px solid #ff4040;
    outline-offset: 3px
}

/* modern newsletter field: dark input, red inset button */
:where(.enx-page) .footer-newsletter-box .text-field {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, .22) !important;
    border-radius: 10px !important;
    height: 60px !important;
    padding: 0 72px 0 18px !important
}

:where(.enx-page) .footer-newsletter-box .text-field::placeholder {
    color: rgba(255, 255, 255, .5) !important
}

:where(.enx-page) .footer-newsletter-box .submit-button {
    inset: 6px 6px 6px auto !important;
    width: 48px !important;
    border-radius: 7px !important;
    border: 0 !important
}

:where(.enx-page) .footer-newsletter-box .text-field:focus {
    outline: 2px solid #ff4040;
    outline-offset: 0;
    border-color: #ff4040
}


/* ---------- 6. FAQ: red circles, turn black when open ---------- */
:where(.enx-page) .faq-qa-wrap .faq-circle {
    background-color: #ff4040 !important;
    border: 1.5px solid transparent;
    transition: background-color .3s ease, border-color .3s ease
}

:where(.enx-page) .faq-qa-wrap .faq-circle .plus-icon {
    transition: transform .3s ease;
    transform: rotate(0deg) !important
}

:where(.enx-page) .faq-qa-wrap .faq-question-bar:hover .faq-circle {
    background-color: #e02f24 !important
}

:where(.enx-page) .faq-qa-wrap.enx-is-open .faq-circle,
:where(.enx-page) .faq-qa-wrap.enx-is-open .faq-question-bar:hover .faq-circle {
    background-color: #000 !important;
    border-color: rgba(255, 255, 255, .35)
}

:where(.enx-page) .faq-qa-wrap.enx-is-open .faq-circle .plus-icon {
    transform: rotate(45deg) !important
}

:where(.enx-page) .faq-qa-wrap .faq-content {
    overflow: hidden;
    transition: height .35s ease
}

:where(.enx-page) .faq-qa-wrap .faq-content p {
    padding-top: 14px
}

:where(.enx-page) .faq-qa-wrap .faq-line-divider {
    background: transparent !important
}


/* ---------- 7. No-JavaScript fallbacks (replaces the two <noscript><style> blocks) ----------
   Webflow's head script adds .w-mod-js to <html> when JS runs, so these
   only apply when JavaScript is off/blocked. */
html:not(.w-mod-js) .enx-blog__card {
    opacity: 1 !important;
    transform: none !important;
}

html:not(.w-mod-js) .enx-page .enccii-work__card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

html:not(.w-mod-js) .enx-page .content {
    opacity: 1 !important;
}

/* ---------- 8. Platforms strip (text wordmarks; swap for official logos when you have them) ---------- */

/* ---------- 9. Testimonials hidden until real ones exist (remove the hidden attribute in index.html to show) ---------- */
.enx-page .enccii-stage[hidden] {
    display: none !important;
}

/* ---------- Stats band (between Services and Our Work) ----------
   Black on white in Outfit (the site's heading font). The + / % mark and one key word
   per label pick up the brand red, like the "Latest insights & articles" heading.
   Re-theme with the variables below. */
.enx-stats {
    --enx-stats-bg: #ffffff;
    --enx-stats-ink: #0a0a0a;
    --enx-stats-accent: #ff4040;
    --enx-stats-line: rgba(10, 10, 10, .14);
    background: #0b0b0d;
    padding: 88px 0 0
}

.enx-stats__panel {
    background: var(--enx-stats-bg);
    padding: 104px 24px
}

.enx-stats__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1500px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: center
}

.enx-stats__item {
    list-style: none;
    margin: 0;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px
}

.enx-stats__item+.enx-stats__item {
    border-left: 1px solid var(--enx-stats-line)
}

.enx-stats__num {
    display: inline-flex;
    align-items: flex-start;
    font-family: Outfit, Montserrat, sans-serif;
    font-weight: 600;
    color: var(--enx-stats-ink);
    font-size: clamp(46px, 6.2vw, 104px);
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: lining-nums
}

.enx-stats__val {
    display: inline-block;
    text-align: right
}

.enx-stats__mark {
    color: var(--enx-stats-accent);
    margin-left: .02em
}

.enx-stats__label {
    font-family: Outfit, Montserrat, sans-serif;
    font-weight: 500;
    color: var(--enx-stats-ink);
    font-size: clamp(15px, 1.45vw, 23px);
    line-height: 1.25;
    letter-spacing: -.005em;
    max-width: 16em;
    text-wrap: balance
}

.enx-stats__label em {
    font-style: normal;
    font-weight: 600;
    color: var(--enx-stats-accent)
}

@media (max-width:767px) {
    .enx-stats {
        padding-top: 56px
    }

    .enx-stats__panel {
        padding: 40px 20px
    }

    .enx-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .enx-stats__item {
        padding: 32px 12px
    }

    .enx-stats__item+.enx-stats__item {
        border-left: 0
    }

    .enx-stats__item:nth-child(even) {
        border-left: 1px solid var(--enx-stats-line)
    }

    .enx-stats__item:nth-child(n+3) {
        border-top: 1px solid var(--enx-stats-line)
    }

    .enx-stats__num {
        font-size: clamp(44px, 13vw, 64px)
    }
}

/* Count-up helper: JS sets data-final on each animated value; this invisible copy keeps the box at its final width while the digits count. */
.enx-stats__val[data-final]::before {
    content: attr(data-final);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden
}

/* ---------- Platforms & tools strip ---------- */
.enx-platforms {
    background: #001412;
    color: #fff;
    padding: 80px 0 100px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-family: Outfit, Montserrat, sans-serif;
    overflow: hidden
}

.enx-platforms__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px
}

.enx-platforms__title {
    margin: 0;
    padding: 72px 0 0;
    font-family: Outfit, Montserrat, sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.8vw, 52px);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fff
}

.enx-platforms__marquee {
    margin-top: 64px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%)
}

.enx-platforms__track {
    display: flex;
    width: max-content;
    animation: enx-platforms-scroll 45s linear infinite
}

.enx-platforms__marquee:hover .enx-platforms__track {
    animation-play-state: paused
}

.enx-platforms__set {
    list-style: none;
    margin: 0;
    padding: 0 clamp(28px, 3.5vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: clamp(48px, 6vw, 96px);
    min-width: 100vw;
    flex: 0 0 auto
}

.enx-platforms__item {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.2vw, 18px);
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .78);
    transition: color .25s ease
}

.enx-platforms__item:hover {
    color: #fff
}

.enx-platforms__icon {
    --enx-ico: clamp(36px, 3.3vw, 46px);
    height: var(--enx-ico);
    width: calc(var(--enx-ico) * var(--ar, 1));
    display: block;
    flex: 0 0 auto;
    overflow: visible
}

.enx-platforms__name {
    font-weight: 600;
    font-size: clamp(23px, 2.2vw, 32px);
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap
}

@keyframes enx-platforms-scroll {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@media (max-width:767px) {
    .enx-platforms {
        padding-bottom: 72px
    }

    .enx-platforms__title {
        padding-top: 48px
    }

    .enx-platforms__marquee {
        margin-top: 44px
    }
}

@media (prefers-reduced-motion:reduce) {
    .enx-platforms__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center
    }

    .enx-platforms__set {
        min-width: 0;
        flex-wrap: wrap;
        justify-content: center;
        gap: 28px 48px;
        padding: 0 24px
    }

    .enx-platforms__set[aria-hidden="true"] {
        display: none
    }

    .enx-platforms__marquee {
        -webkit-mask-image: none;
        mask-image: none
    }
}

/* ================= ENCCII IG Reels ================= */
.enx-reels {
    --enx-reels-bg: #001412;
    --enx-reels-red: #ff4040;
    --enx-reels-ink: #fff;
    --enx-reels-line: rgba(255, 255, 255, .16);
    background: var(--enx-reels-bg);
    color: var(--enx-reels-ink);
    padding: 80px 0 120px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-family: Montserrat, sans-serif;
    overflow: hidden
}

.enx-reels * {
    box-sizing: border-box
}

.enx-reels__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px
}

.enx-reels__title {
    margin: 0 0 56px;
    font-family: Outfit, Montserrat, sans-serif;
    font-weight: 600;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff
}

.enx-reels__title em {
    font-style: normal;
    color: var(--enx-reels-red)
}

.enx-reels__marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%)
}

.enx-reels__track {
    display: flex;
    width: max-content;
    animation: enx-reels-scroll 50s linear infinite
}

.enx-reels__marquee:hover .enx-reels__track {
    animation-play-state: paused
}

.enx-reels__set {
    list-style: none;
    margin: 0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 20px
}

.enx-reels__item {
    list-style: none;
    flex: 0 0 auto
}

.enx-reels__card {
    position: relative;
    display: block;
    width: clamp(180px, 15vw, 240px);
    aspect-ratio: 9/16;
    overflow: hidden;
    border-radius: 20px;
    background: #06221f;
    border: 1px solid var(--enx-reels-line);
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease
}

.enx-reels__card:hover,
.enx-reels__card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--enx-reels-red)
}

.enx-reels__card:focus-visible {
    outline: 2px solid var(--enx-reels-red);
    outline-offset: 3px
}

.enx-reels__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease
}

.enx-reels__card:hover .enx-reels__poster {
    transform: scale(1.05)
}

.enx-reels__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .6) 100%);
    pointer-events: none;
    opacity: .7;
    transition: opacity .3s ease
}

.enx-reels__card:hover::after {
    opacity: .85
}

.enx-reels__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .25s ease, transform .25s ease
}

.enx-reels__card:hover .enx-reels__play,
.enx-reels__card:focus-visible .enx-reels__play {
    opacity: 1;
    transform: scale(1)
}

.enx-reels__play-icon {
    width: 22px;
    height: 22px;
    color: #001412;
    margin-left: 3px
}

.enx-reels__play::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff
}

.enx-reels__play-icon {
    position: relative;
    z-index: 1
}

.enx-reels__ig-badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: #fff;
    opacity: .85
}

.enx-reels__ig-icon {
    width: 20px;
    height: 20px
}

@keyframes enx-reels-scroll {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@media (hover:none) {
    .enx-reels__play {
        opacity: 1;
        transform: scale(1)
    }

    .enx-reels__card::after {
        opacity: .85
    }
}

@media (max-width:767px) {
    .enx-reels {
        padding: 72px 0 80px
    }

    .enx-reels__title {
        font-size: clamp(30px, 8.5vw, 38px);
        margin-bottom: 32px
    }

    .enx-reels__card {
        width: clamp(140px, 42vw, 190px);
        border-radius: 16px
    }
}

@media (prefers-reduced-motion:reduce) {
    .enx-reels__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center
    }

    .enx-reels__set {
        flex-wrap: wrap;
        justify-content: center
    }

    .enx-reels__set[aria-hidden="true"] {
        display: none
    }

    .enx-reels__marquee {
        -webkit-mask-image: none;
        mask-image: none
    }
}

/* ================= /ENCCII IG Reels ================= */


/* =============================================
   WIDE / ZOOMED-OUT SCREENS
   Testimonials: when all cards fit on screen the row switches to "static"
   mode. It was left-aligned; this centres it. (Auto margins are used
   instead of justify-content so cards can never be pushed off-screen.)
   ============================================= */
.enccii-stage.enccii-is-static .enccii-card:first-child {
    margin-left: auto
}

.enccii-stage.enccii-is-static .enccii-card:last-child {
    margin-right: auto
}

/* =============================================
   PAIN SECTION (problem hook, sits above .pillars-section)
   One rounded panel, four columns split by hairline dividers. Each column rotates its own issues (Montserrat only).
   Add an issue = add one .pain-slide in the HTML. Speed = data-interval (ms) on .pain-grid.
   Scoped: .pain-* only. Breakpoints: 640 / 1200.
   ============================================= */
.section.pain-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0b0b0d;
    padding: clamp(56px, 7vw, 96px) 0
}

.section.pain-section::after {
    content: "";
    position: absolute;
    width: 560px;
    height: 300px;
    left: -120px;
    bottom: -150px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse closest-side, rgba(255, 64, 64, .22), rgba(255, 64, 64, 0))
}

.pain-wrap {
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 48px)
}

.pain-card {
    position: relative;
    color: #f5f5f7;
    font-family: 'Montserrat', sans-serif
}

.pain-dots {
    display: flex;
    gap: 5px;
    margin: 0 0 20px
}

.pain-dots i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5f5f7
}

.pain-dots i:first-child {
    background: #ff4040
}

.pain-title {
    margin: 0 0 14px;
    max-width: 820px;
    font-weight: 600;
    font-size: clamp(30px, 4.6vw, 56px);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #f5f5f7;
    text-wrap: balance
}

.pain-intro {
    max-width: 720px;
    text-wrap: balance;
    margin: 0 0 clamp(28px, 4vw, 52px);
    font-size: clamp(16px, 1.6vw, 19px);
    font-weight: 500;
    line-height: 1.5;
    color: rgba(245, 245, 247, .6)
}

.pain-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    background: #141417;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px
}

.pain-item {
    --pain-int: 5s;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 28px 24px 14px
}

.pain-item+.pain-item {
    border-top: 1px solid rgba(255, 255, 255, .07)
}

.pain-ico {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 0 24px;
    filter: drop-shadow(0 6px 16px rgba(255, 64, 64, .3))
}

.pain-ico svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible
}

.pain-cat {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.2;
    color: rgba(245, 245, 247, .6)
}

.pain-slides {
    display: grid
}

.pain-slide {
    grid-area: 1/1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease, visibility 0s .4s
}

.pain-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .45s ease .1s, transform .45s ease .1s, visibility 0s
}

.pain-hook {
    margin: 0 0 12px;
    font-size: clamp(20px, 1.7vw, 23px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: #f5f5f7
}

.pain-cost {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(245, 245, 247, .62)
}

.pain-nav {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 20px
}

.pain-dot {
    display: block;
    padding: 10px 3px;
    margin: 0;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none
}

.pain-dot:first-child {
    padding-left: 0
}

.pain-dot i {
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .2);
    overflow: hidden;
    transition: width .3s ease
}

.pain-dot i::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    border-radius: 99px;
    background: #ff4040;
    opacity: 0
}

.pain-dot.is-active i {
    width: 30px
}

.pain-dot.is-active i::after {
    opacity: 1
}

.pain-dot:focus-visible {
    outline: 2px solid #f5f5f7;
    outline-offset: 2px;
    border-radius: 8px
}

.pain-item.is-playing .pain-dot.is-active i::after {
    animation: pain-fill var(--pain-int) linear forwards
}

.pain-item.is-hold .pain-dot.is-active i::after,
.pain-grid.is-offscreen .pain-dot.is-active i::after {
    animation-play-state: paused
}

@keyframes pain-fill {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.pain-bridge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin-top: clamp(28px, 3.5vw, 44px);
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 600;
    line-height: 1.3;
    color: #f5f5f7;
    text-decoration: none
}

.pain-arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ff4040;
    transition: transform .25s ease
}

.pain-arrow svg {
    width: 16px;
    height: 16px
}

.pain-bridge:hover .pain-arrow {
    transform: translateY(3px)
}

.pain-bridge:focus-visible {
    outline: 2px solid #f5f5f7;
    outline-offset: 6px;
    border-radius: 14px
}

#pillars-title {
    scroll-margin-top: 120px
}

@media (min-width:640px) {
    .pain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .pain-item {
        padding: 32px 28px 16px
    }

    .pain-item+.pain-item {
        border-top: 0
    }

    .pain-item:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, .07)
    }

    .pain-item:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .07)
    }
}

@media (min-width:1200px) {
    .pain-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .pain-item:nth-child(even) {
        border-left: 0
    }

    .pain-item:nth-child(n+3) {
        border-top: 0
    }

    /* near-invisible divider that fades out top and bottom */
    .pain-item+.pain-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 32px;
        bottom: 32px;
        width: 1px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .14) 30%, rgba(255, 255, 255, .14) 70%, rgba(255, 255, 255, 0))
    }
}

@media (max-width:639px) {
    .section.pain-section {
        padding: 44px 0 40px
    }

    .pain-bridge {
        margin-top: 24px;
        gap: 10px;
        font-size: 15px
    }

    .pain-arrow {
        width: 32px;
        height: 32px
    }

    .pain-ico {
        width: 32px;
        height: 32px;
        margin-bottom: 20px
    }
}

@media (prefers-reduced-motion:reduce) {

    .pain-arrow,
    .pain-slide,
    .pain-slide.is-active,
    .pain-dot i {
        transition: none
    }

    .pain-slide {
        transform: none
    }
}

/* Stats band on the Services page: sits directly under the white hero, so drop the dark lead-in used on the home page and add a hairline divider. */
.enx-stats.enx-stats--flush {
    background: #ffffff;
    padding-top: 0
}

.enx-stats--flush .enx-stats__panel {
    padding: 72px 24px 96px;
    border-top: 1px solid var(--enx-stats-line)
}

@media (max-width:767px) {
    .enx-stats.enx-stats--flush {
        padding-top: 0
    }

    .enx-stats--flush .enx-stats__panel {
        padding: 40px 20px 48px
    }
}




/* About US Page CSS Start  */

/* ==========================================================================
   ENCCII – ABOUT US PAGE
   File: enccii-about-us.css
   Every class here starts with "enccii-about" so nothing can collide with
   enccii.css. Load this file AFTER enccii.css.
   ========================================================================== */

/* ---------- Page shell + tokens ---------- */
body:has(.enccii-about) {
  background: #000
}

.enccii-about {
  --ea-red: #ff4040;
  --ea-red-deep: #e02f24;
  --ea-black: #000;
  --ea-card: #111113;
  --ea-card-2: #161618;
  --ea-line: rgba(255, 255, 255, .1);
  --ea-mute: rgba(255, 255, 255, .62);
  --ea-dim: rgba(255, 255, 255, .4);
  --ea-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  background: #000;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.enccii-about *,
.enccii-about *::before,
.enccii-about *::after {
  box-sizing: border-box
}

:where(.enccii-about) :where(h1, h2, h3, p, ul, blockquote) {
  margin: 0;
  padding: 0
}

:where(.enccii-about) :where(a) {
  color: inherit;
  text-decoration: none
}

:where(.enccii-about) :where(ul) {
  list-style: none
}

.enccii-about :focus-visible {
  outline: 2px solid var(--ea-red);
  outline-offset: 3px
}

.enccii-about__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2
}

.enccii-about__section {
  position: relative;
  padding: 130px 0
}

.enccii-about__h1,
.enccii-about__h2,
.enccii-about__h3 {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: #fff
}

.enccii-about__h2 {
  font-size: clamp(36px, 4.8vw, 68px)
}

.enccii-about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 15px/1 Outfit, sans-serif;
  color: var(--ea-red);
  margin-bottom: 22px;
}

.enccii-about__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--ea-red)
}

.enccii-about__lede {
  color: var(--ea-mute);
  font-size: 19px;
  max-width: 54ch;
  margin-top: 22px
}

/* ---------- Buttons ---------- */
.enccii-about__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ea-red);
  color: #fff;
  font: 600 16px/1 Outfit, sans-serif;
  padding: 16px 28px;
  border-radius: 999px;
  transition: transform .3s var(--ea-ease), box-shadow .3s var(--ea-ease), background .3s;
  box-shadow: 0 0 0 rgba(255, 64, 64, 0);
}

.enccii-about__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(255, 64, 64, .45);
  background: #ff5252
}

.enccii-about__btn svg {
  width: 16px;
  height: 16px;
  transition: transform .3s var(--ea-ease)
}

.enccii-about__btn:hover svg {
  transform: translateX(4px)
}

.enccii-about__btn--ghost {
  background: transparent;
  border: 1px solid var(--ea-line);
  color: #fff
}

.enccii-about__btn--ghost:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: none
}

.enccii-about__btn--light {
  background: #fff;
  color: #000
}

.enccii-about__btn--light:hover {
  background: #fff;
  box-shadow: 0 12px 40px rgba(255, 255, 255, .25)
}

/* ---------- The four marks ---------- */
.enccii-about__defs {
  position: absolute;
  width: 0;
  height: 0
}

.enccii-about__mark {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 34px rgba(255, 64, 64, .32))
}

/* ---------- Stand-in header (replace with your standard header) ---------- */
.enccii-about__nav {
  position: relative;
  z-index: 20;
  height: 88px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ea-line);
  background: #000;
}

.enccii-about__nav .enccii-about__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%
}

.enccii-about__logo {
  font: 700 26px/1 Outfit, sans-serif;
  letter-spacing: -.03em;
  color: #fff
}

.enccii-about__logo i {
  color: var(--ea-red);
  font-style: normal
}

.enccii-about__links {
  display: flex;
  gap: 34px;
  font: 500 15px/1 Outfit, sans-serif
}

.enccii-about__links a {
  opacity: .7;
  transition: opacity .2s
}

.enccii-about__links a:hover,
.enccii-about__links a.is-current {
  opacity: 1
}

.enccii-about__links a.is-current {
  border-bottom: 2px solid var(--ea-red);
  padding-bottom: 6px
}

.enccii-about__nav .enccii-about__btn {
  padding: 12px 24px;
  font-size: 15px
}

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.enccii-about-js .enccii-about__reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ea-ease), transform .9s var(--ea-ease);
  transition-delay: var(--d, 0ms);
}

.enccii-about-js .enccii-about__reveal.is-in {
  opacity: 1;
  transform: none
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.enccii-about__hero {
  position: relative;
  padding: 96px 0 0;
  overflow: hidden
}

.enccii-about__hero::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -20%;
  width: 70%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(255, 64, 64, .22), transparent 70%);
  pointer-events: none;
}

.enccii-about__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--ea-line) 1px, transparent 1px), linear-gradient(90deg, var(--ea-line) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 30%, #000 0%, transparent 70%);
}

.enccii-about__hero-h1 {
  font-size: clamp(50px, 7.6vw, 120px);
  max-width: 12.5ch;
  line-height: .98
}

.enccii-about__hero-h1 em {
  font-style: normal;
  position: relative;
  display: inline-block;
  background: linear-gradient(100deg, #ff8a8a, #ff4040 45%, #e02f24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.enccii-about__hero-h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .02em;
  height: .06em;
  background: var(--ea-red);
  transform-origin: left;
  animation: enccii-about-draw 1.2s .6s var(--ea-ease) both;
}

.enccii-about__hero-row {
  display: flex;
  gap: 28px 40px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 36px
}

.enccii-about__hero-row p {
  max-width: 50ch;
  color: var(--ea-mute);
  font-size: 20px
}

.enccii-about__hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.enccii-about__floaters {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none
}

.enccii-about__floaters .enccii-about__mark {
  position: absolute;
  animation: enccii-about-float 8s ease-in-out infinite
}

.enccii-about__floaters .f-star {
  width: 230px;
  height: 230px;
  right: 6%;
  top: 70px
}

.enccii-about__floaters .f-ring {
  width: 120px;
  height: 120px;
  right: 26%;
  top: 300px;
  animation-duration: 10s;
  animation-delay: -3s
}

.enccii-about__floaters .f-quad {
  width: 100px;
  height: 100px;
  right: 4%;
  top: 400px;
  animation-duration: 9s;
  animation-delay: -5s
}

.enccii-about__floaters .f-hex {
  width: 78px;
  height: 78px;
  right: 22%;
  top: 40px;
  animation-duration: 11s;
  animation-delay: -2s
}

/* Year chart */
.enccii-about__year {
  margin-top: 84px;
  border-top: 1px solid var(--ea-line);
  padding-top: 28px;
  position: relative;
  z-index: 2
}

.enccii-about__year-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  font: 500 14px/1 Outfit, sans-serif;
  color: var(--ea-mute)
}

.enccii-about__year-title strong {
  color: #fff;
  font-weight: 600
}

.enccii-about__bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(6px, 1.2vw, 16px);
  height: 240px
}

.enccii-about__month {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.enccii-about__bar {
  display: block;
  background: linear-gradient(#26262a, #18181b);
  border-top: 1px solid rgba(255, 255, 255, .14);
  transform-origin: bottom;
  animation: enccii-about-up .9s var(--ea-ease) both;
  animation-delay: calc(var(--i)*40ms);
}

.enccii-about__fill {
  display: block;
  height: 0;
  background: linear-gradient(#ff6b6b, #e02f24);
  box-shadow: 0 0 28px rgba(255, 64, 64, .55);
  animation: enccii-about-fill 1s var(--ea-ease) forwards;
  animation-delay: calc(1.1s + var(--i)*70ms);
}

.enccii-about__month-label {
  position: absolute;
  bottom: -30px;
  left: 0;
  font: 500 13px/1 Outfit, sans-serif;
  color: var(--ea-dim)
}

.enccii-about__legend {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-bottom: 70px;
  font-size: 14px;
  color: var(--ea-mute)
}

.enccii-about__legend strong {
  color: #fff;
  font-weight: 500
}

.enccii-about__legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--ea-red);
  margin-right: 8px;
  vertical-align: -1px;
  box-shadow: 0 0 12px var(--ea-red)
}

.enccii-about__legend i.is-base {
  background: #2a2a2e;
  box-shadow: none
}

/* Marquee */
.enccii-about__ticker {
  border-top: 1px solid var(--ea-line);
  border-bottom: 1px solid var(--ea-line);
  background: #050505;
  overflow: hidden;
  padding: 26px 0;
  position: relative;
  z-index: 2
}

.enccii-about__ticker-track {
  display: flex;
  width: max-content;
  animation: enccii-about-marquee 38s linear infinite
}

.enccii-about__ticker:hover .enccii-about__ticker-track {
  animation-play-state: paused
}

.enccii-about__ticker-group {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-right: 48px
}

.enccii-about__ticker-item {
  display: flex;
  align-items: center;
  gap: 48px;
  font: 600 clamp(26px, 3.2vw, 44px)/1 Outfit, sans-serif;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #fff
}

.enccii-about__ticker-item:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .5)
}

.enccii-about__ticker-item .enccii-about__mark {
  width: 38px;
  height: 38px;
  filter: none;
  flex: none
}

/* ==========================================================================
   2. FOUNDER
   ========================================================================== */
.enccii-about__founder {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 90px;
  align-items: center
}

.enccii-about__photo {
  position: relative;
  aspect-ratio: 4/5;
  display: grid;
  place-items: end start;
  padding: 22px;
  background: repeating-linear-gradient(135deg, #0d0d0f 0 14px, #131316 14px 28px);
  border: 1px solid var(--ea-line);
  border-bottom: 3px solid var(--ea-red);
  color: var(--ea-mute);
  font-size: 13px;
  overflow: hidden;
}

.enccii-about__photo::before {
  content: "";
  position: absolute;
  left: -25%;
  top: -25%;
  width: 90%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(255, 64, 64, .28), transparent 70%);
}

.enccii-about__photo span {
  position: relative
}

.enccii-about__photo-badge {
  position: absolute;
  right: -1px;
  top: -1px;
  z-index: 2;
  background: var(--ea-red);
  color: #fff;
  font: 600 14px/1 Outfit, sans-serif;
  padding: 14px 18px;
}

.enccii-about__founder-copy .enccii-about__h2 {
  max-width: 16ch
}

.enccii-about__quote {
  position: relative;
  margin: 34px 0 26px;
  padding-left: 28px;
  border-left: 3px solid var(--ea-red);
  font: 500 clamp(24px, 2.8vw, 36px)/1.25 Outfit, sans-serif;
  letter-spacing: -.015em;
  color: #fff;
}

.enccii-about__founder-copy p {
  color: var(--ea-mute);
  max-width: 56ch
}

.enccii-about__sig {
  margin-top: 30px;
  font: 600 19px/1.3 Outfit, sans-serif;
  color: #fff
}

.enccii-about__sig span {
  display: block;
  font: 400 15px Inter, sans-serif;
  color: var(--ea-mute)
}

/* ==========================================================================
   3. PROOF / STATS
   ========================================================================== */
.enccii-about__stats {
  position: relative;
  padding: 0;
  border-top: 1px solid var(--ea-line);
  border-bottom: 1px solid var(--ea-line);
  background: #070707;
  overflow: hidden
}

.enccii-about__stats::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 64, 64, .14), transparent 70%);
  pointer-events: none;
}

.enccii-about__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.enccii-about__stat {
  padding: 84px 32px 84px 36px;
  border-left: 1px solid var(--ea-line);
  position: relative;
  transition: background .4s
}

.enccii-about__stat:first-child {
  border-left: 0;
  padding-left: 0
}

.enccii-about__stat:hover {
  background: linear-gradient(180deg, transparent, rgba(255, 64, 64, .07))
}

.enccii-about__stat b {
  display: block;
  font: 700 clamp(46px, 6vw, 92px)/1 Outfit, sans-serif;
  letter-spacing: -.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.enccii-about__stat b s {
  text-decoration: none;
  color: var(--ea-red);
  text-shadow: 0 0 30px rgba(255, 64, 64, .6)
}

.enccii-about__stat>span {
  display: block;
  margin-top: 10px;
  color: var(--ea-mute);
  font-size: 16px
}

/* ==========================================================================
   4. WHO WE WORK WITH
   ========================================================================== */
.enccii-about__who {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 90px;
  align-items: start
}

.enccii-about__who-head {
  position: sticky;
  top: 60px
}

.enccii-about__who-list {
  border-top: 1px solid var(--ea-line)
}

.enccii-about__who-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 64px;
  gap: 20px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--ea-line);
  overflow: hidden;
  transition: padding .5s var(--ea-ease);
}

.enccii-about__who-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255, 64, 64, .16), transparent 70%);
  transform: translateX(-101%);
  transition: transform .6s var(--ea-ease);
}

.enccii-about__who-item:hover::before {
  transform: none
}

.enccii-about__who-item:hover {
  padding-left: 22px
}

.enccii-about__who-item>* {
  position: relative;
  z-index: 1
}

.enccii-about__who-num {
  font: 600 15px/1 Outfit, sans-serif;
  color: var(--ea-red)
}

.enccii-about__who-title {
  font: 600 clamp(22px, 2.4vw, 32px)/1.15 Outfit, sans-serif;
  letter-spacing: -.02em;
  color: #fff
}

.enccii-about__who-sub {
  color: var(--ea-mute);
  font-size: 16px;
  margin-top: 8px
}

.enccii-about__who-item .enccii-about__mark {
  width: 52px;
  height: 52px;
  filter: none;
  opacity: .55;
  transition: transform .6s var(--ea-ease), opacity .4s
}

.enccii-about__who-item:hover .enccii-about__mark {
  transform: rotate(90deg) scale(1.2);
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(255, 64, 64, .6))
}

/* ==========================================================================
   5. FOUR THINGS WE STAND FOR (the four marks, styled like the services cards)
   ========================================================================== */
.enccii-about__values {
  background: #050505;
  border-top: 1px solid var(--ea-line);
  border-bottom: 1px solid var(--ea-line)
}

.enccii-about__values-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 56px
}

.enccii-about__values-head .enccii-about__h2 {
  max-width: 14ch
}

.enccii-about__values-head .enccii-about__lede {
  margin-top: 0;
  max-width: 40ch
}

.enccii-about__values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ea-line)
}

.enccii-about__value {
  --mx: 20%;
  --my: 15%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 520px;
  padding: 32px 28px 34px;
  background: var(--ea-card);
  overflow: hidden;
  border-left: 1px solid var(--ea-line);
  transition: background .4s;
}

.enccii-about__value:first-child {
  border-left: 0
}

.enccii-about__value::before {
  content: "";
  position: absolute;
  left: -15%;
  top: -10%;
  width: 90%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(255, 64, 64, .3), transparent 70%);
  transition: transform .8s var(--ea-ease), opacity .5s;
}

.enccii-about__value::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 64, 64, .22), transparent 65%);
}

.enccii-about__value:hover {
  background: var(--ea-card-2)
}

.enccii-about__value:hover::before {
  transform: scale(1.4) translate(10%, 10%)
}

.enccii-about__value:hover::after {
  opacity: 1
}

.enccii-about__value-mark {
  position: absolute;
  left: 50%;
  top: 150px;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  z-index: 1;
  transition: transform .8s var(--ea-ease);
}

.enccii-about__value-mark .enccii-about__mark {
  width: 100%;
  height: 100%;
  animation: enccii-about-float 7s ease-in-out infinite;
  animation-delay: var(--fd, 0s)
}

.enccii-about__value:hover .enccii-about__value-mark {
  transform: scale(1.18) rotate(18deg)
}

.enccii-about__value-body {
  position: relative;
  z-index: 2
}

.enccii-about__value-num {
  display: block;
  font: 600 13px/1 Outfit, sans-serif;
  color: var(--ea-red);
  margin-bottom: 14px;
  letter-spacing: .06em
}

.enccii-about__value .enccii-about__h3 {
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.1;
  margin-bottom: 12px
}

.enccii-about__value p {
  font-size: 15px;
  color: var(--ea-mute)
}

.enccii-about__value-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font: 600 14px/1 Outfit, sans-serif;
  color: var(--ea-red);
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
  transition: gap .3s var(--ea-ease), color .3s;
}

.enccii-about__value-link:hover {
  gap: 14px;
  color: #fff
}

/* ==========================================================================
   6. HOW WE WORK
   ========================================================================== */
.enccii-about__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 80px
}

.enccii-about__steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ea-red), rgba(255, 64, 64, .15));
  box-shadow: 0 0 18px rgba(255, 64, 64, .7);
  transform-origin: left;
  transition: transform 1.6s var(--ea-ease);
}

.enccii-about-js .enccii-about__steps::before {
  transform: scaleX(0)
}

.enccii-about-js .enccii-about__steps.is-in::before {
  transform: scaleX(1)
}

.enccii-about__step {
  position: relative;
  padding: 44px 26px 30px;
  background: var(--ea-card);
  border: 1px solid var(--ea-line);
  border-top: 0;
  transition: transform .5s var(--ea-ease), border-color .4s, background .4s;
}

.enccii-about__step::before {
  content: "";
  position: absolute;
  left: 26px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ea-red);
  box-shadow: 0 0 0 6px rgba(255, 64, 64, .18), 0 0 20px var(--ea-red);
}

.enccii-about__step:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 64, 64, .5);
  background: var(--ea-card-2)
}

.enccii-about__step-num {
  display: block;
  font: 700 84px/1 Outfit, sans-serif;
  letter-spacing: -.05em;
  margin-bottom: 14px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .28);
  transition: color .4s, -webkit-text-stroke-color .4s;
}

.enccii-about__step:hover .enccii-about__step-num {
  color: var(--ea-red);
  -webkit-text-stroke-color: var(--ea-red)
}

.enccii-about__step .enccii-about__h3 {
  font-size: 26px;
  margin-bottom: 10px
}

.enccii-about__step p {
  font-size: 15px;
  color: var(--ea-mute)
}

/* ==========================================================================
   7. RESULTS
   ========================================================================== */
.enccii-about__results {
  background: #050505;
  border-top: 1px solid var(--ea-line);
  border-bottom: 1px solid var(--ea-line)
}

.enccii-about__cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 64px;
  border: 1px solid var(--ea-line)
}

.enccii-about__case {
  position: relative;
  padding: 48px 44px 52px;
  background: var(--ea-card);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.enccii-about__case+.enccii-about__case {
  border-left: 1px solid var(--ea-line)
}

.enccii-about__case::before {
  content: "";
  position: absolute;
  right: -20%;
  top: -30%;
  width: 80%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(255, 64, 64, .28), transparent 70%);
  transition: transform .8s var(--ea-ease);
}

.enccii-about__case:hover::before {
  transform: scale(1.35)
}

.enccii-about__case .enccii-about__mark {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 96px;
  height: 96px;
  animation: enccii-about-float 9s ease-in-out infinite
}

.enccii-about__case>*:not(.enccii-about__mark) {
  position: relative;
  z-index: 1
}

.enccii-about__case .enccii-about__h3 {
  font-size: 34px
}

.enccii-about__case-big {
  display: block;
  margin: 26px 0 10px;
  font: 700 clamp(64px, 8vw, 120px)/1 Outfit, sans-serif;
  letter-spacing: -.05em;
  background: linear-gradient(100deg, #ff9a9a, #ff4040 50%, #e02f24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.enccii-about__case p {
  color: var(--ea-mute);
  max-width: 44ch
}

/* ==========================================================================
   8. TEAM
   ========================================================================== */
.enccii-about__team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px
}

.enccii-about__person {
  transition: transform .5s var(--ea-ease)
}

.enccii-about__person:hover {
  transform: translateY(-10px)
}

.enccii-about__person .enccii-about__photo {
  aspect-ratio: 3/4;
  transition: border-color .4s
}

.enccii-about__person:hover .enccii-about__photo {
  border-color: rgba(255, 64, 64, .6);
  border-bottom-color: var(--ea-red)
}

.enccii-about__person .enccii-about__h3 {
  font-size: 22px;
  margin: 18px 0 4px
}

.enccii-about__person p {
  color: var(--ea-mute);
  font-size: 15px
}

/* ==========================================================================
   9. CTA
   ========================================================================== */
.enccii-about__cta {
  position: relative;
  padding: 150px 0;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--ea-line)
}

.enccii-about__cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1100px;
  height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 64, 64, .4), rgba(255, 64, 64, .08) 60%, transparent 75%);
  animation: enccii-about-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

.enccii-about__cta .enccii-about__wrap {
  display: flex;
  flex-direction: column;
  align-items: center
}

.enccii-about__cta .enccii-about__h2 {
  font-size: clamp(46px, 8vw, 128px);
  max-width: 11ch;
  line-height: .98
}

.enccii-about__cta .enccii-about__h2 em {
  font-style: normal;
  color: var(--ea-red)
}

.enccii-about__cta-marks {
  display: flex;
  gap: 26px;
  margin: 44px 0 48px
}

.enccii-about__cta-marks .enccii-about__mark {
  width: 56px;
  height: 56px;
  animation: enccii-about-float 6s ease-in-out infinite
}

.enccii-about__cta-marks .enccii-about__mark:nth-child(2) {
  animation-delay: -1.5s
}

.enccii-about__cta-marks .enccii-about__mark:nth-child(3) {
  animation-delay: -3s
}

.enccii-about__cta-marks .enccii-about__mark:nth-child(4) {
  animation-delay: -4.5s
}

.enccii-about__cta .enccii-about__btn {
  font-size: 18px;
  padding: 20px 38px
}

/* ---------- Stand-in footer (replace with your standard footer) ---------- */
.enccii-about__footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--ea-line);
  background: #000;
  padding: 38px 0;
  color: var(--ea-mute);
  font-size: 14px
}

.enccii-about__footer .enccii-about__wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center
}

.enccii-about__footer a:hover {
  color: #fff
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes enccii-about-up {
  from {
    transform: scaleY(0)
  }
}

@keyframes enccii-about-fill {
  to {
    height: var(--f)
  }
}

@keyframes enccii-about-draw {
  from {
    transform: scaleX(0)
  }
}

@keyframes enccii-about-float {

  0%,
  100% {
    transform: translateY(0) rotate(0)
  }

  50% {
    transform: translateY(-22px) rotate(6deg)
  }
}

@keyframes enccii-about-marquee {
  to {
    transform: translateX(-50%)
  }
}

@keyframes enccii-about-pulse {

  0%,
  100% {
    opacity: .75;
    transform: translate(-50%, -50%) scale(1)
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12)
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1100px) {

  .enccii-about__floaters .f-ring,
  .enccii-about__floaters .f-hex {
    display: none
  }

  .enccii-about__floaters .f-star {
    width: 170px;
    height: 170px;
    opacity: .6
  }

  .enccii-about__floaters .f-quad {
    width: 80px;
    height: 80px;
    top: 330px;
    opacity: .6
  }
}

@media(max-width:900px) {
  .enccii-about__wrap {
    padding: 0 20px
  }

  .enccii-about__section {
    padding: 90px 0
  }

  .enccii-about__links {
    display: none
  }

  .enccii-about__hero {
    padding-top: 60px
  }

  .enccii-about__founder,
  .enccii-about__who {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .enccii-about__who-head {
    position: static
  }

  .enccii-about__stats-grid {
    grid-template-columns: 1fr 1fr
  }

  .enccii-about__stat {
    padding: 48px 20px 48px 24px;
    border-top: 1px solid var(--ea-line)
  }

  .enccii-about__stat:nth-child(-n+2) {
    border-top: 0
  }

  .enccii-about__stat:nth-child(odd) {
    border-left: 0;
    padding-left: 0
  }

  .enccii-about__values-grid {
    grid-template-columns: 1fr 1fr
  }

  .enccii-about__value {
    min-height: 440px
  }

  .enccii-about__value:nth-child(3) {
    border-left: 0
  }

  .enccii-about__value:nth-child(n+3) {
    border-top: 1px solid var(--ea-line)
  }

  .enccii-about__steps {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px
  }

  .enccii-about__cases {
    grid-template-columns: 1fr
  }

  .enccii-about__case+.enccii-about__case {
    border-left: 0;
    border-top: 1px solid var(--ea-line)
  }

  .enccii-about__team-grid {
    grid-template-columns: 1fr 1fr
  }

  .enccii-about__bars {
    height: 180px
  }

  .enccii-about__cta {
    padding: 100px 0
  }
}

@media(max-width:560px) {
  .enccii-about__floaters {
    display: none
  }

  .enccii-about__hero-row p {
    font-size: 18px
  }

  .enccii-about__values-grid {
    grid-template-columns: 1fr
  }

  .enccii-about__value {
    border-left: 0;
    border-top: 1px solid var(--ea-line);
    min-height: 420px
  }

  .enccii-about__value:first-child {
    border-top: 0
  }

  .enccii-about__steps {
    grid-template-columns: 1fr
  }

  .enccii-about__team-grid {
    grid-template-columns: 1fr
  }

  .enccii-about__who-item {
    grid-template-columns: 36px 1fr 44px;
    gap: 14px
  }

  .enccii-about__who-item .enccii-about__mark {
    width: 40px;
    height: 40px
  }

  .enccii-about__case {
    padding: 36px 26px 40px
  }

  .enccii-about__case .enccii-about__mark {
    width: 70px;
    height: 70px;
    right: 24px;
    top: 28px
  }

  .enccii-about__month-label {
    font-size: 10px
  }

  .enccii-about__cta-marks {
    gap: 16px
  }

  .enccii-about__cta-marks .enccii-about__mark {
    width: 44px;
    height: 44px
  }
}

@media(prefers-reduced-motion:reduce) {

  .enccii-about *,
  .enccii-about *::before,
  .enccii-about *::after {
    animation: none !important;
    transition: none !important
  }

  .enccii-about__fill {
    height: var(--f)
  }

  .enccii-about-js .enccii-about__steps::before {
    transform: none
  }

  .enccii-about-js .enccii-about__reveal {
    opacity: 1;
    transform: none
  }
}

/* ==========================================================================
   LIGHT (WHITE) SECTIONS
   Add class "enccii-about__light" to any <section> to make it white.
   Sections alternate dark / white down the page.
   ========================================================================== */
.enccii-about__light {
  --ea-red: #e02f24;
  --ea-card: #f5f5f6;
  --ea-card-2: #ececee;
  --ea-line: rgba(0, 0, 0, .12);
  --ea-mute: rgba(10, 10, 10, .66);
  --ea-dim: rgba(10, 10, 10, .45);
  background: #fff;
  color: #0a0a0a;
}

.enccii-about__light .enccii-about__h1,
.enccii-about__light .enccii-about__h2,
.enccii-about__light .enccii-about__h3,
.enccii-about__light .enccii-about__quote,
.enccii-about__light .enccii-about__sig,
.enccii-about__light .enccii-about__who-title {
  color: #0a0a0a
}

.enccii-about__light .enccii-about__mark {
  filter: drop-shadow(0 8px 22px rgba(224, 47, 36, .22))
}

.enccii-about__light .enccii-about__who-item .enccii-about__mark {
  filter: none
}

.enccii-about__light .enccii-about__who-item:hover .enccii-about__mark {
  filter: drop-shadow(0 6px 14px rgba(224, 47, 36, .35))
}

.enccii-about__light .enccii-about__who-item::before {
  background: linear-gradient(90deg, rgba(224, 47, 36, .09), transparent 70%)
}

/* Photo placeholders */
.enccii-about__light .enccii-about__photo {
  background: repeating-linear-gradient(135deg, #f1f1f3 0 14px, #e8e8eb 14px 28px);
  border-color: var(--ea-line);
  border-bottom-color: var(--ea-red);
}

.enccii-about__light .enccii-about__photo::before {
  background: radial-gradient(closest-side, rgba(224, 47, 36, .16), transparent 70%)
}

.enccii-about__light .enccii-about__person:hover .enccii-about__photo {
  border-color: rgba(224, 47, 36, .5);
  border-bottom-color: var(--ea-red)
}

/* Process steps */
.enccii-about__light .enccii-about__step {
  background: #f5f5f6
}

.enccii-about__light .enccii-about__step:hover {
  background: #fff;
  border-color: rgba(224, 47, 36, .5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08)
}

.enccii-about__light .enccii-about__step-num {
  -webkit-text-stroke: 1.5px rgba(10, 10, 10, .28)
}

.enccii-about__light .enccii-about__step:hover .enccii-about__step-num {
  color: var(--ea-red);
  -webkit-text-stroke-color: var(--ea-red)
}

.enccii-about__steps::before {
  box-shadow: 0 0 12px rgba(224, 47, 36, .35)
}

.enccii-about__light .enccii-about__step::before {
  box-shadow: 0 0 0 6px rgba(224, 47, 36, .14)
}

/* Thin divider where white meets dark */
.enccii-about__light {
  border-top: 1px solid rgba(0, 0, 0, .06);
  border-bottom: 1px solid rgba(0, 0, 0, .06)
}
/* ---------- 1. Section header: heading + intro line ---------- */
.enccii-about__head {
  max-width: 760px;
  margin-bottom: 72px
}

.enccii-about__head .enccii-about__h2 {
  margin-bottom: 18px
}

.enccii-about__intro {
  color: var(--ea-mute);
  font-size: 19px;
  line-height: 1.65;
  max-width: 640px
}

/* ---------- 2. Section spacing variants ---------- */
.enccii-about__section--tight {
  padding: 90px 0
}

.enccii-about__section--soft {
  background: #070707;
  border-top: 1px solid var(--ea-line);
  border-bottom: 1px solid var(--ea-line)
}

/* ---------- 3. The furniture-year chart ---------- */
/* per-month index for the stagger animation */
.enccii-about__month { --i: 0 }
.enccii-about__month:nth-child(2) { --i: 1 }
.enccii-about__month:nth-child(3) { --i: 2 }
.enccii-about__month:nth-child(4) { --i: 3 }
.enccii-about__month:nth-child(5) { --i: 4 }
.enccii-about__month:nth-child(6) { --i: 5 }
.enccii-about__month:nth-child(7) { --i: 6 }
.enccii-about__month:nth-child(8) { --i: 7 }
.enccii-about__month:nth-child(9) { --i: 8 }
.enccii-about__month:nth-child(10) { --i: 9 }
.enccii-about__month:nth-child(11) { --i: 10 }
.enccii-about__month:nth-child(12) { --i: 11 }

.enccii-about__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%
}

/* gray "store's year" bar (height comes from the inline style) */
.enccii-about__col .enccii-about__base {
  display: block;
  background: linear-gradient(#26262a, #18181b);
  border-top: 1px solid rgba(255, 255, 255, .14);
  transform-origin: bottom;
  animation: enccii-about-up .9s var(--ea-ease) both;
  animation-delay: calc(var(--i, 0)*40ms)
}

/* red "Enccii fills in" bar — grows to its inline height */
.enccii-about__col .enccii-about__fill {
  animation: enccii-about-fill-grow 1s var(--ea-ease) both;
  animation-delay: calc(1.1s + var(--i, 0)*70ms)
}

@keyframes enccii-about-fill-grow {
  from { height: 0 }
}

/* legend swatches: keep the base one gray, not red */
.enccii-about__legend .enccii-about__sw--base {
  background: #2a2a2e;
  box-shadow: none
}

/* ---------- 4. Stats band ---------- */
.enccii-about__stat .enccii-about__stat-num {
  display: block;
  margin: 0;
  font: 700 clamp(46px, 6vw, 92px)/1 Outfit, sans-serif;
  letter-spacing: -.04em;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.enccii-about__stat .enccii-about__stat-mark {
  color: var(--ea-red);
  text-shadow: 0 0 30px rgba(255, 64, 64, .6)
}

.enccii-about__stat .enccii-about__stat-label {
  display: block;
  margin-top: 10px;
  color: var(--ea-mute);
  font-size: 16px
}

/* ---------- 5. Decorative dots (red + dark pair) ---------- */
.enccii-about__dots {
  display: inline-flex;
  gap: 7px;
  margin-bottom: 22px
}

.enccii-about__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ea-red);
  box-shadow: 0 0 12px rgba(255, 64, 64, .55)
}

.enccii-about__dots i + i {
  background: #2a2a2e;
  box-shadow: none
}

/* ---------- 6. Who we work with list ---------- */
/* markup has 3 children (dots, h3, p) — pin the text to one column */
.enccii-about__who-item {
  grid-template-columns: 56px 1fr;
  row-gap: 6px;
  align-items: start
}

.enccii-about__who-item .enccii-about__h3,
.enccii-about__who-item p {
  grid-column: 2
}

.enccii-about__who-item .enccii-about__h3 {
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.1
}

.enccii-about__who-item p {
  color: var(--ea-mute);
  font-size: 15px;
  max-width: 60ch
}

/* ---------- 7. Values grid (markup uses __values as the grid) ---------- */
.enccii-about__wrap .enccii-about__values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ea-line);
  background: none
}

/* service links inside value cards (markup uses __link) */
.enccii-about__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font: 600 14px/1 Outfit, sans-serif;
  color: var(--ea-red);
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
  transition: gap .3s var(--ea-ease), color .3s
}

.enccii-about__link:hover {
  gap: 14px;
  color: #fff
}

/* ---------- 8. Team grid (markup uses __team) ---------- */
.enccii-about__team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px
}

/* square team photos */
.enccii-about__person .enccii-about__photo--sq {
  aspect-ratio: 1/1
}

/* ---------- 9. Responsive ---------- */
@media(max-width:900px) {
  .enccii-about__team {
    grid-template-columns: 1fr 1fr
  }

  .enccii-about__wrap .enccii-about__values {
    grid-template-columns: 1fr 1fr
  }

  .enccii-about__head {
    margin-bottom: 48px
  }
}

@media(max-width:560px) {
  .enccii-about__team {
    grid-template-columns: 1fr
  }

  .enccii-about__wrap .enccii-about__values {
    grid-template-columns: 1fr
  }

  .enccii-about__who-item {
    grid-template-columns: 36px 1fr;
    gap: 14px
  }

  .enccii-about__dots {
    gap: 5px;
    margin-bottom: 14px
  }

  .enccii-about__dots i {
    width: 8px;
    height: 8px
  }
}

/* ==========================================================================
   ENCCII – ABOUT US PAGE FIX, PART 2
   1) Icons for the "Four things we stand for" cards — same sparkle/ring/
      dots/hexagon icon set already used in the pain-points strip on the
      Services page, matched to the same topic (Paid Ads, Marketplace,
      Team/Ops, Content) so the empty red glow now has an icon inside it.
   2) "Who we work with" section switched to a white background.
   ========================================================================== */

/* ---------- 1. Value-card icons ---------- */
.enccii-about__icon {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 0 26px;
  filter: drop-shadow(0 6px 16px rgba(255, 64, 64, .35))
}

.enccii-about__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible
}

@media(max-width:900px) {
  .enccii-about__icon {
    width: 38px;
    height: 38px;
    margin-bottom: 20px
  }
}

/* ---------- 2. "Who we work with" — white section ---------- */
.enccii-about__section--light {
  background: #fff;
  color: #0a0a0a
}

.enccii-about__section--light .enccii-about__h2,
.enccii-about__section--light .enccii-about__h3 {
  color: #0a0a0a
}

.enccii-about__section--light .enccii-about__intro,
.enccii-about__section--light .enccii-about__who-item p {
  color: rgba(10, 10, 10, .62)
}

.enccii-about__section--light .enccii-about__who-list {
  border-top-color: rgba(10, 10, 10, .12)
}

.enccii-about__section--light .enccii-about__who-item {
  border-bottom-color: rgba(10, 10, 10, .12)
}

.enccii-about__section--light .enccii-about__dots i {
  box-shadow: 0 0 12px rgba(255, 64, 64, .4)
}

.enccii-about__section--light .enccii-about__dots i + i {
  background: rgba(10, 10, 10, .18);
  box-shadow: none
}


/* Founder photo: no red bottom line */
.enccii-about__founder .enccii-about__photo {
  border-bottom: 1px solid var(--ea-line);
}

/* ---------- Live year chart ---------- */
/* hold the intro until the chart scrolls into view */
.enccii-about__year.is-armed:not(.is-in) .enccii-about__base,
.enccii-about__year.is-armed:not(.is-in) .enccii-about__fill {
  animation-play-state: paused
}

.enccii-about__year.is-live .enccii-about__col {
  opacity: .62;
  transition: opacity .5s var(--ea-ease), transform .5s var(--ea-ease), filter .5s
}

.enccii-about__year.is-live .enccii-about__month.is-on .enccii-about__col {
  opacity: 1;
  transform: translateY(-10px);
  filter: brightness(1.18)
}

.enccii-about__year.is-live .enccii-about__month-label {
  transition: color .4s
}

.enccii-about__year.is-live .enccii-about__month.is-on .enccii-about__month-label {
  color: #fff
}

/* the red "filled" part breathes, and re-fills when the spotlight lands on a slow month */
@keyframes enccii-about-glow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 64, 64, .3)
  }

  50% {
    box-shadow: 0 0 44px rgba(255, 64, 64, .8)
  }
}

.enccii-about__year.is-live .enccii-about__col .enccii-about__fill {
  animation: enccii-about-glow 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0)*.2s)
}

.enccii-about__year.is-live .enccii-about__col .enccii-about__fill.is-refill {
  animation: enccii-about-fill-grow 1s var(--ea-ease) both, enccii-about-glow 2.8s ease-in-out infinite
}

/* Year chart: solid, filled-looking bars instead of near-black "empty" ones */
.enccii-about__year .enccii-about__col .enccii-about__base {
  background: linear-gradient(180deg, #62626e 0%, #43434c 50%, #2f2f36 100%);
  border-top: 2px solid rgba(255, 255, 255, .4)
}

.enccii-about__year .enccii-about__col .enccii-about__fill {
  background: linear-gradient(180deg, #ff6b6b 0%, #ff4040 45%, #e02f24 100%)
}

.enccii-about__legend .enccii-about__sw--base {
  background: #5a5a66
}

.enccii-about__year.is-live .enccii-about__col {
  opacity: .88
}

/* Year chart: one solid bar per month, filled to its percentage */
.enccii-about__year .enccii-about__col .enccii-about__fill {
  background: linear-gradient(180deg, #ff7a7a 0%, #ff4040 40%, #d92b20 100%);
  border-top: 2px solid rgba(255, 255, 255, .45)
}

/* ---------- Counter (About page): hairline under it + tighter gap ---------- */
.enccii-about .enx-stats--flush .enx-stats__panel {
  padding-bottom: 72px;
  border-bottom: 1px solid var(--enx-stats-line)
}

/* ---------- Who we work with: showroom floor plans ---------- */
.enccii-about__wwf {
  background: #fff;
  color: #0a0a0a;
  padding: 96px 0 120px
}

.enccii-about__wwf .enccii-about__h2 {
  color: #0a0a0a
}

.enccii-about__wwf .enccii-about__intro {
  color: rgba(10, 10, 10, .62)
}

.enccii-about__wwf-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
  margin-top: 64px
}

.enccii-about__wwf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(10, 10, 10, .14)
}

.enccii-about__wwf-list li {
  border-bottom: 1px solid rgba(10, 10, 10, .14)
}

.enccii-about__wwf-row {
  position: relative;
  display: flex;
  gap: 22px;
  width: 100%;
  padding: 30px 8px 30px 26px;
  text-align: left;
  background: none;
  border: 0;
  color: rgba(10, 10, 10, .42);
  cursor: pointer;
  font: inherit;
  transition: color .4s
}

.enccii-about__wwf-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ff4040;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1)
}

.enccii-about__wwf-row.is-on {
  color: #0a0a0a
}

.enccii-about__wwf-row.is-on::before {
  transform: scaleY(1)
}

.enccii-about__wwf-n {
  font: 600 14px/1.9 Outfit, sans-serif;
  letter-spacing: .1em;
  color: #ff4040
}

.enccii-about__wwf-t b {
  display: block;
  font: 600 clamp(22px, 2.2vw, 32px)/1.12 Outfit, sans-serif;
  letter-spacing: -.02em
}

.enccii-about__wwf-d {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(10, 10, 10, .66);
  transition: max-height .5s ease, opacity .5s, margin .5s
}

.enccii-about__wwf-row.is-on .enccii-about__wwf-d {
  max-height: 60px;
  opacity: 1;
  margin-top: 10px
}

.enccii-about__wwf-row:focus-visible {
  outline: 2px solid #ff4040;
  outline-offset: -2px
}

.enccii-about__wwf-board {
  position: relative;
  aspect-ratio: 3/2.25;
  background-color: #fbfbfb;
  background-image: linear-gradient(rgba(10, 10, 10, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 10, 10, .055) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid rgba(10, 10, 10, .18);
  box-shadow: 0 50px 80px -50px rgba(10, 10, 10, .35)
}

.enccii-about__wwf-top {
  position: absolute;
  left: 18px;
  top: 14px;
  font: 600 11px/1 Outfit, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, .45)
}

.enccii-about__wwf-board svg {
  position: absolute;
  left: 3%;
  top: 6%;
  width: 94%;
  height: 78%;
  overflow: visible;
  fill: #fff;
  stroke: #0a0a0a;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round
}

.enccii-about__wwf-plan {
  opacity: 0;
  transition: opacity .5s
}

.enccii-about__wwf-plan.is-on {
  opacity: 1
}

.enccii-about__wwf-plan .wall {
  fill: none;
  stroke-width: 5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1
}

.enccii-about__wwf-plan.is-on .wall {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s cubic-bezier(.5, 0, .2, 1)
}

.enccii-about__wwf-plan .fx {
  opacity: 0
}

.enccii-about__wwf-plan.is-on .fx {
  opacity: 1;
  transition: opacity .6s var(--d, 0s)
}

.enccii-about__wwf-plan .zone,
.enccii-about__wwf-plan .note {
  fill: none;
  stroke-width: 1.4
}

.enccii-about__wwf-plan .hero {
  stroke: #ff4040;
  stroke-width: 2.4
}

.enccii-about__wwf-plan text {
  fill: #0a0a0a;
  stroke: none;
  font: 600 11px Outfit, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase
}

.enccii-about__wwf-plan .fx + text.fx {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  fill: #ff4040
}

.enccii-about__wwf-plan .flow {
  fill: none;
  stroke: #ff4040;
  stroke-width: 3;
  stroke-dasharray: 7 9;
  animation: enccii-about-wwf-flow 1.1s linear infinite
}

@keyframes enccii-about-wwf-flow {
  to {
    stroke-dashoffset: -32
  }
}

.enccii-about__wwf-plan .pin {
  fill: #ff4040;
  stroke: #fff;
  stroke-width: 2
}

.enccii-about__wwf-plan .hub {
  fill: #ff4040;
  stroke: #fff;
  stroke-width: 4
}

.enccii-about__wwf-plan text.hubt {
  fill: #fff;
  font-size: 7.5px;
  letter-spacing: .05em
}

.enccii-about__wwf-caps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  border-top: 1px solid rgba(10, 10, 10, .18);
  background: #fff
}

.enccii-about__wwf-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 20px;
  opacity: 0;
  transition: opacity .4s
}

.enccii-about__wwf-cap.is-on {
  opacity: 1
}

.enccii-about__wwf-cap b {
  font: 600 12px/1 Outfit, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ff4040
}

.enccii-about__wwf-cap span {
  font-size: 14px;
  color: rgba(10, 10, 10, .7)
}

@media(max-width:900px) {
  .enccii-about__wwf {
    padding: 72px 0 90px
  }

  .enccii-about__wwf-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 44px
  }
}


/* ==========================================================================
   ENCCII – ABOUT US: "Four things we stand for" redesign
   2x2 grid. Icons are shown exactly like the homepage services section:
   large, plain gradient shapes with no tile, glow or shadow behind them.
   Kept at the very end of the file so it wins over the older value-card rules.
   ========================================================================== */
.enccii-about .enccii-about__wrap .enccii-about__values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .1);
  background-clip: padding-box;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden
}

.enccii-about .enccii-about__values > .enccii-about__value {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 28px;
  justify-content: normal;
  align-content: stretch;
  min-height: 0;
  padding: 44px 40px 34px;
  border: 0;
  background: #151517;
  overflow: hidden;
  transition: background .4s
}

.enccii-about .enccii-about__values > .enccii-about__value:hover {
  background: #19191c
}

/* no glow / overlay layers on the cards */
.enccii-about .enccii-about__values > .enccii-about__value::before,
.enccii-about .enccii-about__values > .enccii-about__value::after {
  display: none
}

/* icon: plain, large, same look as the homepage services icons */
.enccii-about .enccii-about__values .enccii-about__icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  display: block;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  transition: transform .5s var(--ea-ease)
}

.enccii-about .enccii-about__values .enccii-about__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: none
}

.enccii-about .enccii-about__values > .enccii-about__value:hover .enccii-about__icon {
  transform: scale(1.1)
}

/* the small red/dark dot pair is not used in this section */
.enccii-about .enccii-about__values .enccii-about__dots {
  display: none
}

/* text */
.enccii-about .enccii-about__values .enccii-about__value .enccii-about__h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 12px;
  font-size: clamp(25px, 2.3vw, 32px);
  line-height: 1.08
}

.enccii-about .enccii-about__values > .enccii-about__value p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .66)
}

/* service link: full-width row with a hairline above, arrow on the right */
.enccii-about .enccii-about__values .enccii-about__link {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font: 600 15px/1 Outfit, sans-serif;
  color: var(--ea-red)
}

.enccii-about .enccii-about__values .enccii-about__link svg {
  flex: none;
  transition: transform .35s var(--ea-ease)
}

.enccii-about .enccii-about__values .enccii-about__link:hover {
  gap: 12px;
  color: #fff
}

.enccii-about .enccii-about__values .enccii-about__link:hover svg {
  transform: translateX(6px)
}

/* tablet / phone */
@media(max-width:760px) {
  .enccii-about .enccii-about__wrap .enccii-about__values {
    grid-template-columns: 1fr;
    border-radius: 18px
  }

  .enccii-about .enccii-about__values > .enccii-about__value {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 20px;
    padding: 32px 26px 28px
  }

  .enccii-about .enccii-about__values .enccii-about__icon {
    width: 48px;
    height: 48px
  }
}

@media(max-width:480px) {
  .enccii-about .enccii-about__values > .enccii-about__value {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto
  }

  .enccii-about .enccii-about__values .enccii-about__icon {
    grid-row: 1;
    align-self: start;
    width: 52px;
    height: 52px;
    margin-bottom: 20px
  }

  .enccii-about .enccii-about__values .enccii-about__value .enccii-about__h3,
  .enccii-about .enccii-about__values > .enccii-about__value p,
  .enccii-about .enccii-about__values .enccii-about__link {
    grid-column: 1
  }

  .enccii-about .enccii-about__values .enccii-about__value .enccii-about__h3 {
    grid-row: 2
  }

  .enccii-about .enccii-about__values > .enccii-about__value p {
    grid-row: 3
  }

  .enccii-about .enccii-about__values .enccii-about__link {
    grid-row: 4
  }
}

@media(prefers-reduced-motion:reduce) {
  .enccii-about .enccii-about__values > .enccii-about__value,
  .enccii-about .enccii-about__values .enccii-about__icon,
  .enccii-about .enccii-about__values .enccii-about__link svg {
    transition: none
  }

  .enccii-about .enccii-about__values > .enccii-about__value:hover .enccii-about__icon,
  .enccii-about .enccii-about__values .enccii-about__link:hover svg {
    transform: none
  }
}
/* ===== end: Four things we stand for ===== */

/* ==========================================================================
   ENCCII – ABOUT US: "How we work with you" list reset
   The process steps are an <ol>, so the browser was adding its own
   1. 2. 3. 4. markers and left padding next to the big 01-04 numbers.
   ========================================================================== */
.enccii-about .enccii-about__steps {
  list-style: none;
  padding-left: 0;
  margin-left: 0
}

/* white version of the process line: solid red fading out, no glow */
.enccii-about__light .enccii-about__steps::before {
  background: linear-gradient(90deg, #e02f24, rgba(224, 47, 36, .3));
  box-shadow: none
}
/* ===== end: list reset ===== */

/* ==========================================================================
   ENCCII – ABOUT US: closing call-to-action band (white)
   Sits between the team section and the footer. Uses the same button as the
   hero (.button-request-a-project.services-hero-cta).
   ========================================================================== */
.enccii-about__closer {
  padding: 96px 0
}

.enccii-about__closer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px
}

.enccii-about__closer-copy {
  max-width: 680px
}

.enccii-about__closer .enccii-about__h2 {
  font-size: clamp(34px, 4vw, 56px);
  margin-bottom: 16px
}

.enccii-about__closer .enccii-about__intro {
  margin: 0
}

.enccii-about__closer .button-request-a-project {
  flex: none;
  white-space: nowrap
}

@media(max-width:900px) {
  .enccii-about__closer {
    padding: 72px 0
  }

  .enccii-about__closer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px
  }
}
/* ===== end: closing call-to-action band ===== */

/* ==========================================================================
   ENCCII – ABOUT US: team section, phone fix
   The team <ul> was picking up Webflow's default list indent (40px on the
   left), which pushed the photos off to the right on phones. Reset it and
   show the team two across on phones instead of one huge photo per row.
   ========================================================================== */
.enccii-about .enccii-about__team {
  list-style: none;
  margin: 0;
  padding: 0
}

@media(max-width:560px) {
  .enccii-about .enccii-about__team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px
  }

  .enccii-about .enccii-about__person:hover {
    transform: none
  }

  .enccii-about .enccii-about__person .enccii-about__photo {
    padding: 14px;
    font-size: 12px
  }

  .enccii-about .enccii-about__person .enccii-about__h3 {
    font-size: 18px;
    margin: 14px 0 2px
  }

  .enccii-about .enccii-about__person p {
    font-size: 14px
  }
}
/* ===== end: team phone fix ===== */

/* ==========================================================================
   ENCCII – ABOUT US: founder + section spacing, phone fix
   - Founder story now comes first on phones, photo after it.
   - Photo is shorter on phones (was a full 4:5 portrait).
   - Section padding is trimmed on phones so two neighbouring sections no
     longer stack ~180px of empty black between them.
   ========================================================================== */
@media(max-width:900px) {
  .enccii-about .enccii-about__founder-copy {
    order: -1
  }

  .enccii-about .enccii-about__founder {
    gap: 32px
  }

  .enccii-about .enccii-about__founder .enccii-about__photo {
    aspect-ratio: 4/3
  }
}

@media(max-width:560px) {
  .enccii-about .enccii-about__section {
    padding: 60px 0
  }

  .enccii-about .enccii-about__section.enccii-about__section--tight {
    padding: 48px 0 40px
  }

  .enccii-about .enccii-about__head {
    margin-bottom: 36px
  }
}
/* ===== end: founder + spacing phone fix ===== */

/* ==========================================================================
   ENCCII – ABOUT US: "How we work with you" active step
   .is-active is set by the small script in about-us.html. It looks the same
   as the old hover state: red outline number, red border, lighter card.
   ========================================================================== */
.enccii-about__step.is-active {
  border-color: rgba(255, 64, 64, .5);
  background: var(--ea-card-2)
}

.enccii-about__step.is-active .enccii-about__step-num {
  color: var(--ea-red);
  -webkit-text-stroke-color: var(--ea-red)
}

.enccii-about__light .enccii-about__step.is-active {
  background: #fff;
  border-color: rgba(224, 47, 36, .5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08)
}

@media(min-width:901px) {
  .enccii-about__step.is-active {
    transform: translateY(-10px)
  }
}

/* phone / tablet: only the scrolled-to step is highlighted (no sticky tap-hover) */
@media(max-width:900px) {
  .enccii-about__light .enccii-about__step:hover:not(.is-active) {
    transform: none;
    background: #f5f5f6;
    border-color: var(--ea-line);
    box-shadow: none
  }

  .enccii-about__light .enccii-about__step:hover:not(.is-active) .enccii-about__step-num {
    color: transparent;
    -webkit-text-stroke-color: rgba(10, 10, 10, .28)
  }
}
/* ===== end: active step ===== */

/* ==========================================================================
   ENCCII – FREE TRAINING SIGNUP (footer)
   Replaces the old .email-section-wrapper / .email-form block.
   Desktop: one pill (email field + red button). Phone: stacked, full width.
   ========================================================================== */
.enccii-signup {
  box-sizing: border-box;
  padding: 88px 20px 64px;
  background: var(--shades-black, #001412);
  color: #fff;
  text-align: center
}

.enccii-signup *,
.enccii-signup *::before,
.enccii-signup *::after {
  box-sizing: border-box
}

.enccii-signup__inner {
  max-width: 680px;
  margin: 0 auto
}

.enccii-signup__title {
  margin: 0 0 14px;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff
}

.enccii-signup__text {
  max-width: 52ch;
  margin: 0 auto 32px;
  font: 400 17px/1.6 Inter, sans-serif;
  color: rgba(255, 255, 255, .68)
}

.enccii-signup__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  transition: border-color .25s, box-shadow .25s
}

.enccii-signup__form[hidden] {
  display: none
}

.enccii-signup__form:focus-within {
  border-color: #ff4040;
  box-shadow: 0 0 0 4px rgba(255, 64, 64, .18)
}

.enccii-signup__form.is-error {
  border-color: #ff6b62
}

.enccii-signup__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: 400 16px Inter, sans-serif;
  outline: none;
  box-shadow: none
}

.enccii-signup__input::placeholder {
  color: rgba(255, 255, 255, .5);
  opacity: 1
}

.enccii-signup__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  margin: 0;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: #ff4040;
  color: #fff;
  font: 600 16px Outfit, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s
}

.enccii-signup__btn:hover {
  background: #e63535
}

.enccii-signup__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px
}

.enccii-signup__btn:disabled {
  opacity: .65;
  cursor: progress
}

.enccii-signup__btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform .25s
}

.enccii-signup__btn:hover svg {
  transform: translateX(3px)
}

.enccii-signup__msg {
  margin: 16px 0 0;
  font: 500 15px/1.5 Inter, sans-serif
}

.enccii-signup__msg[hidden] {
  display: none
}

.enccii-signup__msg.is-error {
  color: #ff8f88
}

.enccii-signup__msg.is-ok {
  color: #fff;
  font-size: 19px
}

/* honeypot field for bots: off-screen, not for people */
.enccii-signup__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0
}

.enccii-signup__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0
}

@media(max-width:560px) {
  .enccii-signup {
    padding: 56px 20px 44px
  }

  .enccii-signup__text {
    font-size: 16px;
    margin-bottom: 26px
  }

  .enccii-signup__form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none
  }

  .enccii-signup__form:focus-within {
    box-shadow: none
  }

  .enccii-signup__input {
    height: 54px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06)
  }

  .enccii-signup__input:focus {
    border-color: #ff4040;
    box-shadow: 0 0 0 4px rgba(255, 64, 64, .18)
  }

  .enccii-signup__form.is-error .enccii-signup__input {
    border-color: #ff6b62
  }

  .enccii-signup__btn {
    width: 100%;
    height: 54px;
    border-radius: 14px
  }
}

@media(prefers-reduced-motion:reduce) {
  .enccii-signup__form,
  .enccii-signup__btn,
  .enccii-signup__btn svg {
    transition: none
  }

  .enccii-signup__btn:hover svg {
    transform: none
  }
}
/* ===== end: free training signup ===== */

/* ===== Nav breathing room: gap above the bar and space either side of logo / button ===== */
#main-nav.nav-bar-dark {
    padding: 16px 0 !important
}

#main-nav.nav-bar-dark.nav-scrolled {
    padding: 8px 0 !important
}

#main-nav .enccii-nav {
    max-width: none !important;
    padding: 0 clamp(24px, 4.5vw, 80px) !important;
    height: 72px !important
}

#main-nav.nav-scrolled .enccii-nav {
    height: 72px !important
}

@media (max-width: 991px) {
    #main-nav.nav-bar-dark {
        padding: 10px 0 !important
    }

    #main-nav.nav-bar-dark.nav-scrolled {
        padding: 6px 0 !important
    }

    #main-nav .enccii-nav {
        padding: 0 24px !important;
        height: 60px !important
    }
}
/* ===== end: nav breathing room ===== */

/* ===== No page-load fade: show the page immediately instead of fading it in from white ===== */
.enx-page > .content {
    opacity: 1 !important;
    transition: none !important
}
/* ===== end: no page-load fade ===== */

/* ===== HERO HEADLINE: static line + rotating phrase (no layout shift) ===== */
.enccii-hero-section .hero-headline,
.enccii-hero-section .hero-text-block-1 {
    width: 100%;
    justify-content: center;
}

.enccii-hero-section .heading-hero {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    text-align: center;
    font-size: clamp(34px, 4.4vw, 70px);
    line-height: 1.12;
}

/* Line 1 never changes, "by" included */
.enccii-hero-section .hero-line-1 {
    display: block;
    text-align: center;
    text-wrap: balance;
}

/* Line 2: all phrases share ONE grid cell, so it is always as tall as the
   tallest phrase and the buttons below never move */
.enccii-hero-section .heading-hero .hero-rotate {
    display: block;
    width: 100%;
}

.enccii-hero-section .heading-hero .hero-rotate-stack {
    display: grid;
    justify-items: center;
    text-align: center;
}

.enccii-hero-section .heading-hero .hero-rotate-item {
    grid-area: 1 / 1;
    display: block;
    visibility: hidden;
    text-wrap: balance;
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
}

.enccii-hero-section .heading-hero .hero-rotate-item.is-active,
.enccii-hero-section .heading-hero .hero-rotate-item.is-leaving { visibility: visible; }

.enccii-hero-section .heading-hero .hero-rotate-text {
    display: inline;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.15em;
    line-height: 1.05;
    letter-spacing: -0.005em;
}

/* Focus pull: each word drifts up out of a blur, then the red glow settles */
.enccii-hero-section .heading-hero .hero-w { display: inline-block; }

.enccii-hero-section .heading-hero .hero-wi {
    display: inline-block;
    opacity: 0;
    transform: translateY(.55em) rotate(3deg) scale(.94);
    transform-origin: 0 100%;
    filter: blur(14px);
    text-shadow: 0 0 .35em rgba(255, 64, 64, .6);
    will-change: transform, opacity, filter;
}

.enccii-hero-section .heading-hero .is-active .hero-wi {
    opacity: 1;
    transform: none;
    filter: blur(0);
    text-shadow: 0 0 0 rgba(255, 64, 64, 0);
    transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .55s ease, filter .8s ease, text-shadow 1.3s ease .1s;
    transition-delay: calc(var(--i, 0) * 85ms), calc(var(--i, 0) * 85ms), calc(var(--i, 0) * 85ms), calc(var(--i, 0) * 85ms + 100ms);
}

.enccii-hero-section .heading-hero .is-leaving .hero-wi {
    opacity: 0;
    transform: translateY(-.45em) scale(.97);
    filter: blur(10px);
    text-shadow: none;
    transition: transform .5s cubic-bezier(.55, 0, 1, .45), opacity .38s ease, filter .45s ease;
    transition-delay: calc(var(--i, 0) * 30ms);
}

/* Line-break marker between words: ignored on desktop (one line) */
.enccii-hero-section .heading-hero .hero-brk { display: none; }

/* Tablet + phone: every phrase breaks into two balanced lines, so they all
   take the same height (no jumping, no dead gap above the buttons) */
@media (max-width: 991px) {
    .enccii-hero-section .heading-hero {
        font-size: clamp(32px, 6.4vw, 56px);
        min-height: 0;
    }

    .enccii-hero-section .heading-hero .hero-brk { display: block; }

    .enccii-hero-section .heading-hero .hero-rotate { margin-top: .04em; }
}

@media (max-width: 767px) {
    .enccii-hero-section .heading-hero {
        font-size: clamp(28px, 8.4vw, 44px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .enccii-hero-section .heading-hero .hero-wi,
    .enccii-hero-section .heading-hero .is-leaving .hero-wi { transition: none; }
    .enccii-hero-section .heading-hero .is-active .hero-wi { transition: none; transform: none; filter: none; opacity: 1; text-shadow: none; }
    .enccii-hero-section .heading-hero .hero-wi { filter: none; text-shadow: none; will-change: auto; }
}

/* ===== HERO: big sparkle before "We" ===== */
.enccii-hero-section .heading-hero {
    /* headroom for the sparkle so the headline's glow never gets cut; margin cancels the padding */
    padding-top: .75em;
    margin-top: -.75em;
}

.enccii-hero-section .hero-line-1-text {
    position: relative;
    display: inline-block;
}

.enccii-hero-section .hero-star {
    position: absolute;
    display: block;
    line-height: 0;
    width: 1.5em;
    height: 1.5em;
    left: -1.95em;
    top: -.62em;
    pointer-events: none;
    /* --sx / --sy = gentle lean toward the cursor (set by js/enccii-star.js, desktop only) */
    transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0);
    filter: drop-shadow(0 8px 16px rgba(255, 64, 64, .26));
    /* LAYER 1: slow wandering path. Uses the individual `translate` property so it
       stacks with the cursor lean above without fighting it. */
    animation: enStarWander 17s ease-in-out .9s infinite;
}

/* LAYER 2: soft glow that breathes on its own rhythm */
.enccii-hero-section .hero-star::before {
    content: "";
    position: absolute;
    inset: -28%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 90, 80, .2) 0%, rgba(255, 90, 80, 0) 62%);
    opacity: .55;
    animation: enStarGlow 7s ease-in-out .9s infinite;
}

.enccii-hero-section .hero-star svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    /* LAYER 3 + 4: sway (rotate) and breathe (scale), on different clocks.
       17s / 23s / 11s / 7s share no common beat, so the whole motion takes
       minutes to repeat and never looks like a loop. */
    animation:
        enHeroPop .9s cubic-bezier(.2, .8, .2, 1) both,
        enStarSway 23s ease-in-out .9s infinite,
        enStarBreathe 11s ease-in-out .9s infinite;
}

/* Offscreen: stop spending CPU/GPU */
.enccii-hero-section .hero-star.is-paused,
.enccii-hero-section .hero-star.is-paused::before,
.enccii-hero-section .hero-star.is-paused svg { animation-play-state: paused; }

@keyframes enHeroPop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }

/* Uneven on purpose: it drifts both ways, never in a straight there-and-back line */
@keyframes enStarWander {
    0%   { translate: 0 0; }
    16%  { translate: .07em -.11em; }
    34%  { translate: -.05em -.04em; }
    53%  { translate: .06em .05em; }
    71%  { translate: -.08em -.08em; }
    88%  { translate: .02em .03em; }
    100% { translate: 0 0; }
}

/* Leans both directions, with different sizes */
@keyframes enStarSway {
    0%   { rotate: 0deg; }
    20%  { rotate: 6deg; }
    43%  { rotate: -4deg; }
    66%  { rotate: 8deg; }
    86%  { rotate: -6deg; }
    100% { rotate: 0deg; }
}

@keyframes enStarBreathe {
    0%, 100% { scale: 1; }
    28%      { scale: 1.06; }
    55%      { scale: .975; }
    80%      { scale: 1.035; }
}

@keyframes enStarGlow {
    0%, 100% { opacity: .35; transform: scale(.92); }
    50%      { opacity: .6; transform: scale(1.06); }
}

/* Narrower screens: same spot (top-left of the headline), just smaller. Motion layers carry over. */
@media (max-width: 1279px) {
    .enccii-hero-section .heading-hero { padding-top: 1.05em; margin-top: 0; }
    .enccii-hero-section .hero-line-1-text { display: inline-block; position: relative; }
    .enccii-hero-section .hero-star {
        position: absolute;
        width: 1.35em;
        height: 1.35em;
        left: -1.2em;
        top: -.9em;
        margin: 0;
    }
}

/* Phones and small tablets: first line always breaks as "We Scale Furniture / Brands by" */
@media (max-width: 991px) {
    .enccii-hero-section .hl1-a,
    .enccii-hero-section .hl1-b { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .enccii-hero-section .hero-star,
    .enccii-hero-section .hero-star::before,
    .enccii-hero-section .hero-star svg { animation: none !important; }
    .enccii-hero-section .hero-star { transform: none; }
}

/* ===== HERO: lead-magnet sign-up (same component as the About hero) ===== */
.enccii-hero-signup { width: 100%; }

.enccii-hero-section .enccii-signup.enccii-signup--hero {
    padding: 0;
    background: transparent;
    color: #001412;
    width: 100%;
}

.enccii-signup--hero .enccii-signup__inner { max-width: 580px; }

.enccii-signup--hero .enccii-signup__form {
    gap: 8px;
    padding: 7px;
    background: #fff;
    border: 1px solid rgba(0, 20, 18, .12);
    box-shadow: 0 22px 44px -22px rgba(0, 20, 18, .35), 0 2px 8px rgba(0, 20, 18, .06);
}

.enccii-signup--hero .enccii-signup__form:focus-within {
    border-color: #ff4040;
    box-shadow: 0 0 0 4px rgba(255, 64, 64, .16), 0 22px 44px -22px rgba(255, 64, 64, .45);
}

.enccii-signup--hero .enccii-signup__form.is-error { border-color: #e0352b; }

.enccii-signup--hero .enccii-signup__input {
    height: 54px;
    color: #001412;
    font: 500 16px Montserrat, Inter, sans-serif;
}

.enccii-signup--hero .enccii-signup__input::placeholder { color: #7a869f; }

.enccii-signup--hero .enccii-signup__btn {
    height: 54px;
    padding: 0 30px;
    font: 600 16px Montserrat, Inter, sans-serif;
    box-shadow: 0 10px 22px -10px rgba(255, 64, 64, .7);
}

.enccii-signup--hero .enccii-signup__btn:focus-visible { outline-color: #001412; }

.enccii-signup--hero .enccii-signup__msg { margin: 16px 0 0; font: 600 15px/1.5 Montserrat, Inter, sans-serif; }
.enccii-signup--hero .enccii-signup__msg.is-error { color: #c62828; }
.enccii-signup--hero .enccii-signup__msg.is-ok { color: #001412; font-size: 18px; }

.enccii-signup--hero .hero-signup-note {
    margin: 22px auto 0;
    max-width: 46ch;
    font: 500 13.5px/1.55 Montserrat, Inter, sans-serif;
    color: #546286;
}

@media (max-width: 560px) {
    .enccii-signup--hero .enccii-signup__form {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .enccii-signup--hero .enccii-signup__form:focus-within { box-shadow: none; }

    .enccii-signup--hero .enccii-signup__input {
        height: 56px;
        padding: 0 18px;
        border: 1px solid rgba(0, 20, 18, .16);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 10px 24px -16px rgba(0, 20, 18, .35);
    }

    .enccii-signup--hero .enccii-signup__input:focus { border-color: #ff4040; box-shadow: 0 0 0 4px rgba(255, 64, 64, .16); }
    .enccii-signup--hero .enccii-signup__form.is-error .enccii-signup__input { border-color: #e0352b; }
    .enccii-signup--hero .enccii-signup__btn { width: 100%; height: 56px; border-radius: 14px; }
    .enccii-signup--hero .hero-signup-note { font-size: 12.5px; margin-top: 14px; }
}


/* ===== FOOTER: same lead grabber as the hero, tuned for the dark footer ===== */
.email-section-wrapper .enccii-signup--footer {
    width: 100%;
    max-width: 580px;
    padding: 0;
    background: transparent;
}

.enccii-signup--footer .hero-signup-note { color: rgba(255, 255, 255, .6); }
.enccii-signup--footer .enccii-signup__msg.is-ok { color: #fff; }
.enccii-signup--footer .enccii-signup__msg.is-error { color: #ff8f88; }
.enccii-signup--footer .enccii-signup__btn:focus-visible { outline-color: #fff; }



/* ===== FOOTER: phone fixes ===== */
/* newsletter field was wider than the screen (padding added on top of 100% width) */
.footer-newsletter-box .text-field,
.footer-newsletter-box .newsletter-form {
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 560px) {
    .footer {
        padding-left: 24px;
        padding-right: 24px;
    }

    .footer-title-and-btn {
        padding-top: 16px;
        padding-bottom: 8px;
    }

    .footer-title-and-btn .contact-btn {
        width: fit-content;
    }

    .footer-info-div {
        padding-top: 32px;
        padding-bottom: 24px;
        grid-row-gap: 40px;
    }

    .footer-all-div {
        grid-row-gap: 40px;
    }

    .footer-bottom-info {
        align-items: center;
        text-align: center;
    }
}


/* ===== PHONE: even side gutters + no sideways scroll =====
   FAQ and footer text were touching the screen edge. These rules pin a 24px
   gutter on both, line the footer lead grabber up with the headings, and
   stop anything from pushing the page wider than the screen. */
html:has(> body.enx-page),
body.enx-page {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

@media (max-width: 767px) {
    .enx-page .section:has(.faq-content-div) {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .enx-page .footer {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .enx-page .svc-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .enx-page .footer .email-section-wrapper {
        padding: 8px 0 40px;
    }

    .enx-page .footer .enccii-signup--footer {
        max-width: 100%;
    }
}



/* =========================================================
   ENCCII lead grabber v6: free training sign-up (hero + footer)
   Larger field, soft rounded corners, compact brand-red button inset on the right.
   Montserrat, #ff4040 primary, #001412 ink.
   ========================================================= */
.enccii-signup[class] .enccii-signup__inner{max-width:640px}
.email-section-wrapper .enccii-signup--footer[class]{max-width:640px}

.enccii-signup[class] .enccii-signup__form{
  gap:8px;padding:6px;border-radius:18px;
  background:#fff;border:1px solid rgba(0,20,18,.12);
  box-shadow:0 22px 44px -28px rgba(0,20,18,.32);
  transition:border-color .25s,box-shadow .25s}
.enccii-signup[class] .enccii-signup__form:focus-within{
  border-color:rgba(255,64,64,.75);
  box-shadow:0 0 0 4px rgba(255,64,64,.14),0 22px 44px -28px rgba(0,20,18,.32)}
.enccii-signup[class] .enccii-signup__form.is-error{border-color:#c62828;box-shadow:0 0 0 4px rgba(198,40,40,.12)}

/* the field takes all the free space; the button stays compact */
.enccii-signup[class] .enccii-signup__input{
  flex:1 1 auto;min-width:0;height:58px;padding:0 22px;border-radius:12px;
  color:#001412;font:500 16px Montserrat,sans-serif}
.enccii-signup[class] .enccii-signup__input::placeholder{color:#8a94ab}

.enccii-signup[class] .enccii-signup__btn{
  flex:none;height:58px;padding:0 26px;border-radius:12px;
  background:#ff4040;color:#fff;box-shadow:none;
  font:700 12px Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s}
.enccii-signup[class] .enccii-signup__btn::after{content:none}
.enccii-signup[class] .enccii-signup__btn:hover{background:#e63535;transform:none;box-shadow:none}
.enccii-signup[class] .enccii-signup__btn:focus-visible{outline:2px solid #001412;outline-offset:3px}

/* the single supporting line */
.enccii-signup[class] .hero-signup-note{
  margin:18px auto 0;max-width:none;text-wrap:balance;
  font:500 14px/1.6 Montserrat,sans-serif;color:#6b7592}
.enccii-signup[class] .hero-signup-note strong{font-weight:600;color:#001412}

/* success / error message */
.enccii-signup[class] .enccii-signup__msg{margin:14px 0 0;font:600 14px/1.5 Montserrat,sans-serif}
.enccii-signup[class] .enccii-signup__msg.is-error{color:#c62828}
.enccii-signup[class] .enccii-signup__msg.is-ok{
  display:inline-flex;align-items:center;gap:10px;margin:6px auto 0;padding:0;
  background:none;box-shadow:none;border-radius:0;color:#001412;font:600 15px/1.4 Montserrat,sans-serif}
.enccii-signup[class] .enccii-signup__msg.is-ok::before{content:"";flex:none;width:22px;height:22px;border-radius:7px;
  background:#ff4040 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}

/* dark footer variant */
.enccii-signup--footer[class] .enccii-signup__form{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);box-shadow:none}
.enccii-signup--footer[class] .enccii-signup__form:focus-within{border-color:rgba(255,64,64,.8);box-shadow:0 0 0 4px rgba(255,64,64,.2)}
.enccii-signup--footer[class] .enccii-signup__input{color:#fff}
.enccii-signup--footer[class] .enccii-signup__input::placeholder{color:rgba(255,255,255,.5)}
.enccii-signup--footer[class] .enccii-signup__btn:focus-visible{outline-color:#fff}
.enccii-signup--footer[class] .hero-signup-note{color:rgba(255,255,255,.6)}
.enccii-signup--footer[class] .hero-signup-note strong{color:#fff}
.enccii-signup--footer[class] .enccii-signup__msg.is-ok{color:#fff}
.enccii-signup--footer[class] .enccii-signup__msg.is-error{color:#ff8f88}

/* mobile: stack, keep the soft corners */
@media (max-width:560px){
  .enccii-signup[class] .enccii-signup__form{flex-direction:column;align-items:stretch;gap:10px;padding:0;border:0;background:none;box-shadow:none}
  .enccii-signup[class] .enccii-signup__form:focus-within{box-shadow:none}
  .enccii-signup[class] .enccii-signup__input{height:58px;padding:0 20px;border-radius:14px;text-align:left}
  .enccii-signup--hero[class] .enccii-signup__input{background:#fff;border:1px solid rgba(0,20,18,.14);box-shadow:0 14px 28px -20px rgba(0,20,18,.35)}
  .enccii-signup--hero[class] .enccii-signup__input:focus{border-color:rgba(255,64,64,.75);box-shadow:0 0 0 4px rgba(255,64,64,.14)}
  .enccii-signup--footer[class] .enccii-signup__input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);box-shadow:none}
  .enccii-signup--footer[class] .enccii-signup__input:focus{border-color:rgba(255,64,64,.8)}
  .enccii-signup[class] .enccii-signup__btn{width:100%;height:56px;justify-content:center;border-radius:14px;padding:0 20px}
  .enccii-signup[class] .hero-signup-note{font-size:13px;margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .enccii-signup[class] .enccii-signup__btn,.enccii-signup[class] .enccii-signup__form{transition:none}
}


/* ===== Homepage "Latest insights" cards: brand covers (same look as blog.html) ===== */
.enx-blog__media[style*="--g"]{position:relative;background:var(--g)}
.enx-blog__media .st{position:absolute;left:50%;bottom:-26px;width:132px;transform:translateX(-50%);transition:transform .6s}
.enx-blog__card:hover .enx-blog__media .st{transform:translateX(-50%) rotate(90deg)}
.enx-blog__media .ic{position:absolute;right:20px;top:18px;width:62px;height:62px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.enx-blog__tag--red{background:rgba(255,64,64,.16);color:#ff8d84}
.enx-blog__tag--soft{background:rgba(255,255,255,.12);color:#fff}
@media (prefers-reduced-motion:reduce){.enx-blog__media .st{transition:none}.enx-blog__card:hover .enx-blog__media .st{transform:translateX(-50%)}}

/* article picture sits on top of the gradient cover; if it fails to load it is removed and the cover shows */
.enx-blog__media .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ===== Work page hero: same headline size as the Services and Home heroes =====
   Targets the hero that sits directly above the Featured Work section, so it
   works even if the page HTML still uses the plain .services-hero-heading. */
.services-hero-section:has(+ .enccii-featured-work__section) .services-hero-wrap { max-width: 1400px; }
.services-hero-section:has(+ .enccii-featured-work__section) .services-hero-heading { font-size: clamp(32px, 4.6vw, 66px); line-height: 1.1; }
@media (max-width: 767px) {
    .services-hero-section:has(+ .enccii-featured-work__section) .services-hero-heading { font-size: clamp(24px, 6.8vw, 34px); line-height: 1.15; margin-bottom: 18px; }
}

/* ===== Hero headline font lock (Services, Work, About) =====
   The About page sits inside .enccii-about, which sets Inter, so its hero headline
   rendered in a different font (and looked smaller) than Services and Work, which
   inherit the default body font. One explicit stack so all three match. */
.services-hero-heading { font-family: Arial, Helvetica, sans-serif; }

/* ===== HERO: trim dead space above the sparkle on phones/tablets =====
   Mobile nav is ~80px tall (60px bar + 10px padding top/bottom), so 150px of
   top padding left ~70px of empty space above the star. */
@media (max-width: 991px) {
    .section.enccii-hero-section {
        padding-top: 104px;
    }
}

@media (max-width: 767px) {
    .section.enccii-hero-section {
        padding-top: 92px;
    }
}


/* ===== REELS: in-page player pop-up ===== */
.enx-reelbox[hidden] { display: none; }
.enx-reelbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 16px;
}
.enx-reelbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 10, 9, .86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.enx-reelbox__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(400px, 100%);
}
.enx-reelbox__frame {
    width: 100%;
    height: min(calc(100vh - 150px), 720px);
    height: min(calc(100dvh - 150px), 720px);
    min-height: 360px;
    background: #000;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
}
.enx-reelbox__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}
.enx-reelbox__close {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #001412;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.enx-reelbox__close:focus-visible,
.enx-reelbox__open:focus-visible { outline: 2px solid #ff4040; outline-offset: 3px; }
.enx-reelbox__open {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
html.enx-reelbox-open, html.enx-reelbox-open body { overflow: hidden; }


/* ===== REELS: cards without a cover image still look finished ===== */
.enx-reels__label { display: none; }
.enx-reels__card.is-noposter {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 64, 64, .35), transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(255, 125, 116, .18), transparent 50%),
        #06221f;
}
.enx-reels__card.is-noposter .enx-reels__play { opacity: 1; transform: scale(1); }
.enx-reels__card.is-noposter .enx-reels__label {
    display: block;
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    opacity: .9;
}


/* ===== REELS: Vimeo player + labels only on cover-less cards ===== */
.enx-reelbox__frame.is-vimeo iframe { background: #000; }


/* ===== Homepage blog covers: showroom price tag (Was / Now) ===== */
.enx-blog__media{container-type:inline-size;text-decoration:none}
.enx-bt__swing{position:absolute;left:50%;top:0;width:0;height:0;transform-origin:0 0;transform:rotate(var(--tilt,0deg));
  filter:drop-shadow(0 1.6cqw 2.2cqw rgba(0,20,18,.22))}
.enx-bt__string{position:absolute;left:-.35cqw;top:0;width:.7cqw;height:11cqw;background:#001412;opacity:.7;border-radius:1cqw;z-index:2}
.enx-bt__tag{position:absolute;left:-36cqw;top:7cqw;width:72cqw;display:block;
  padding:10.5cqw 6cqw 5.5cqw;background:#fff;color:#001412;
  clip-path:polygon(7cqw 0,calc(100% - 7cqw) 0,100% 7cqw,100% 100%,0 100%,0 7cqw);
  -webkit-mask:radial-gradient(circle at 50% 4cqw,transparent 2.1cqw,#000 2.2cqw);
          mask:radial-gradient(circle at 50% 4cqw,transparent 2.1cqw,#000 2.2cqw)}
.enx-bt__lbl{display:block;font-family:Montserrat,sans-serif;font-weight:600;font-size:3.1cqw;line-height:1;color:rgba(0,20,18,.5);margin:0 0 1cqw}
.enx-bt__was{display:block;font-family:Outfit,Montserrat,sans-serif;font-weight:500;font-size:4.7cqw;line-height:1.15;color:rgba(0,20,18,.55);
  text-decoration:line-through;text-decoration-color:#ff4040;text-decoration-thickness:.55cqw;margin:0 0 3.2cqw}
.enx-bt__now{display:block;font-family:Outfit,Montserrat,sans-serif;font-weight:600;font-size:7.4cqw;line-height:1.08;letter-spacing:-.02em;color:#001412;text-wrap:balance}
.enx-bt__stamp{position:absolute;right:4.5cqw;top:6.5cqw;width:7cqw;height:7cqw}
.enx-blog__card:hover .enx-bt__swing{animation:enx-bt-sway 1.4s ease-out 1}
@keyframes enx-bt-sway{
  0%{transform:rotate(var(--tilt,0deg))}
  18%{transform:rotate(calc(var(--tilt,0deg) + 9deg))}
  42%{transform:rotate(calc(var(--tilt,0deg) - 6deg))}
  66%{transform:rotate(calc(var(--tilt,0deg) + 3deg))}
  100%{transform:rotate(var(--tilt,0deg))}
}
@media (prefers-reduced-motion:reduce){.enx-blog__card:hover .enx-bt__swing{animation:none}}


/* ===== Services cards: rounded corners when stacked (phones / tablets) ===== */
@media (max-width: 991px) {
    .svc-grid {
        gap: 12px;
        border-top: none;
        border-bottom: none;
        padding-bottom: 24px;
    }

    .svc-grid .svc-card,
    .svc-grid .svc-card:hover,
    .svc-grid .svc-card:last-child {
        border: 1px solid var(--svc-border);
        border-radius: 20px;
    }
}


/* Footer copyright line (sits left of the Privacy Policy link) */
.enx-copy {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .6);
}


/* About: founder monogram tile (used until a portrait photo is added) */
.enccii-about__photo--mono {
  place-items: center;
}

.enccii-about__mono {
  position: relative;
  font: 800 clamp(84px, 13vw, 168px)/1 Outfit, sans-serif;
  letter-spacing: -.04em;
  color: #fff;
}

.enccii-about__mono::after {
  content: "";
  display: inline-block;
  width: .12em;
  height: .12em;
  margin-left: .06em;
  border-radius: 50%;
  background: var(--ea-red);
}

/* About: keep the founder name white (the generic paragraph rule was muting it) */
.enccii-about__founder-copy .enccii-about__sig {
  color: #fff;
}


/* About: founder portrait */
.enccii-about__photo--img{padding:0;display:block}
.enccii-about__photo--img::before{display:none}
.enccii-about__photo--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}

/* Year chart: faster intro (was ~3s of dead time before the bars appeared) */
.enccii-about__col .enccii-about__base {
  animation-duration: .5s;
  animation-delay: 0s
}
.enccii-about__col .enccii-about__fill {
  animation-duration: .7s;
  animation-delay: .1s
}
.enccii-about__month:nth-child(1) .enccii-about__fill{animation-delay:.10s}
.enccii-about__month:nth-child(2) .enccii-about__fill{animation-delay:.14s}
.enccii-about__month:nth-child(3) .enccii-about__fill{animation-delay:.18s}
.enccii-about__month:nth-child(4) .enccii-about__fill{animation-delay:.22s}
.enccii-about__month:nth-child(5) .enccii-about__fill{animation-delay:.26s}
.enccii-about__month:nth-child(6) .enccii-about__fill{animation-delay:.30s}
.enccii-about__month:nth-child(7) .enccii-about__fill{animation-delay:.34s}
.enccii-about__month:nth-child(8) .enccii-about__fill{animation-delay:.38s}
.enccii-about__month:nth-child(9) .enccii-about__fill{animation-delay:.42s}
.enccii-about__month:nth-child(10) .enccii-about__fill{animation-delay:.46s}
.enccii-about__month:nth-child(11) .enccii-about__fill{animation-delay:.50s}
.enccii-about__month:nth-child(12) .enccii-about__fill{animation-delay:.54s}


/* Home: "View all work" (and "View all services") use the same button as "View All Articles" */
.enccii-work__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap
}

.enccii-work__btn,
.svc-view-all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 28px;
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  background: transparent;
  transition: .25s
}

.enccii-work__btn:hover,
.svc-view-all:hover {
  background: #ff4040;
  border-color: #ff4040
}

.enccii-work__btn:focus-visible,
.svc-view-all:focus-visible {
  outline: 2px solid #ff4040;
  outline-offset: 3px
}

/* "View All" buttons: sit mid-height of the section header on desktop (phones keep them under the text) */
@media (min-width: 861px) {
  .enccii-work__header,
  .svc-header {
    align-items: center
  }
}

/* Hero headline: more air between "We Scale Furniture Brands by" and the changing line */
.enccii-hero-section .heading-hero .hero-rotate { margin-top: .2em; }

@media (max-width: 991px) {
    .enccii-hero-section .heading-hero .hero-rotate { margin-top: .26em; }
}

@media (max-width: 767px) {
    .enccii-hero-section .heading-hero .hero-rotate { margin-top: .3em; }
}


/* Footer email address: a real mailto link. No underline: a small red arrow marks it as clickable. */
.footer-mail-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s ease
}

.footer-mail-link::after {
  content: "";
  flex: none;
  width: .62em;
  height: .62em;
  background: #ff4040;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L18 6M18 6H9M18 6V15'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L18 6M18 6H9M18 6V15'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1)
}

.footer-mail-link:hover,
.footer-mail-link:focus-visible {
  color: #ff4040
}

.footer-mail-link:hover::after,
.footer-mail-link:focus-visible::after {
  transform: translate(3px, -3px)
}

.footer-mail-link:focus-visible {
  outline: 2px solid #ff4040;
  outline-offset: 6px
}

/* Footer email: fallback menu when no mail app opens */
.footer-mail-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 20;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: #0b1a18;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .7)
}

.footer-mail-pop p {
  margin: 0 0 6px;
  padding: 4px 8px;
  font: 400 13px/1.4 'Montserrat', sans-serif;
  color: rgba(255, 255, 255, .6)
}

.footer-mail-pop a,
.footer-mail-pop button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  background: transparent;
  border: 0;
  color: #fff;
  font: 500 15px/1.2 'Montserrat', sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer
}

.footer-mail-pop a:hover,
.footer-mail-pop button:hover,
.footer-mail-pop a:focus-visible,
.footer-mail-pop button:focus-visible {
  background: #ff4040;
  outline: none
}