:root {
    --yellow: #ffc300;
    --max: 1440px;
    --gutter: clamp(24px, 5.55vw, 50px);
    --radius: 8px;
}
/* body {
    -webkit-font-smoothing: antialiased;
} */
.site-shell {
    width: min(100%, var(--max));
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.eyebrow {
    margin: 0;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1.2;
    font-family: "Urbanist", sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #515151;
}
.hero {
    padding-block: 80px;
}
.hero .eyebrow {
    font-weight: 600;
    letter-spacing: 0;
    color: #000000;
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr);
    gap: 0;
    align-items: center;
}
.hero-copy h1 {
    font-size: clamp(52px, 4.45vw, 64px);
    line-height: 1.07;
    letter-spacing: 0;
    font-weight: 400;
    max-width: 570px;
    margin: 22px 0;
    text-wrap: unset;
}
.lede {
    color: #707070;
    font-size: 18px;
    line-height: 1.42;
    letter-spacing: 0.02em;
    max-width: 610px;
    margin: 0;
}
.hero .lede {
    color: #757575;
    letter-spacing: 0.04em;
}
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.button {
    min-height: 48px;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid #000;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.button:hover {
    transform: translateY(-2px);
}
.button-dark {
    background: #000;
    color: #fff;
}
.button-dark:hover {
    background: #272727;
    color: #fff;
}
.button-outline {
    background: #fff;
    color: #000;
}
.button-outline:hover {
    background: #f5f5f5;
}

.proof {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #757575;
    margin-top: 20px;
    letter-spacing: 0.04em;
    font-size: 14px;
    line-height: 131.11%;
    font-weight: normal;
    font-family: "Urbanist", sans-serif;
}
.stars {
    color: var(--yellow);
    letter-spacing: 2px;
}
.proof i {
    height: 12px;
    width: 1px;
    background: #757575;
    display: inline-block;
    margin: 0 5px -2px;
}
.websites-banner-service-section .search-visual {
    width: 606px;
}
.website-design-visual img {
    position: relative;
}
.website-design-visual img:nth-child(1) {
    width: 87%;
    right: 0;
    top: 0;
}
.website-design-visual img:nth-child(2) {
    width: 41%;
    right: -40px;
    bottom: -20%;
    position: absolute;
}
.website-design-visual img:nth-child(3) {
    width: 194px;
    left: 80px;
    top: 70px;
}
.website-design-visual img:nth-child(4) {
    width: 194px;
    left: 120px;
    bottom: 60px;
}

/* ==========================================================
   NATIONAL SEO HERO ANIMATION
   ========================================================== */

.hero-copy-animate > * {
    opacity: 0;
    transform: translateY(28px);
}
.hero-copy-animate.is-hero-visible > .eyebrow {
    animation: heroTextIn 0.65s cubic-bezier(.22, 1, .36, 1) 0.05s forwards;
}
.hero-copy-animate.is-hero-visible h1 {
    animation: heroTextIn 0.8s cubic-bezier(.22, 1, .36, 1) 0.18s forwards;
}
.hero-copy-animate.is-hero-visible .lede {
    animation: heroTextIn 0.75s cubic-bezier(.22, 1, .36, 1) 0.34s forwards;
}
.hero-copy-animate.is-hero-visible .button-row {
    animation: heroTextIn 0.7s cubic-bezier(.22, 1, .36, 1) 0.50s forwards;
}
.hero-copy-animate.is-hero-visible .proof {
    animation: heroTextIn 0.65s cubic-bezier(.22, 1, .36, 1) 0.65s forwards;
}
.hero-visual-animate {
    opacity: 0;
    transform: translateX(45px) scale(.96);
}
.hero-visual-animate.is-hero-visible {
    animation: heroVisualIn 1s cubic-bezier(.22, 1, .36, 1) 0.15s forwards;
}
/* Ranking card */
.hero-visual-animate .website-design-visual img:nth-child(1) {
    opacity: 0;
    transform: translateY(25px) scale(.96);
}
.hero-visual-animate.is-hero-visible .website-design-visual img:nth-child(1){
    animation: heroRankingIn .8s cubic-bezier(.22, 1, .36, 1) .45s forwards;
}
/* Result card */
.hero-visual-animate .website-design-visual img:nth-child(2) {
    opacity: 0;
    transform: translateY(35px) scale(.94);
}
.hero-visual-animate.is-hero-visible .website-design-visual img:nth-child(2) {
    animation: heroResultIn .8s cubic-bezier(.22, 1, .36, 1) .75s forwards, heroResultFloat 4.5s ease-in-out 1.7s infinite;
}
/* user btn card */
.hero-visual-animate .website-design-visual img:nth-child(3), .hero-visual-animate .website-design-visual img:nth-child(4) {
    opacity: 0;
    transform: translateY(35px) scale(.94);
}
.hero-visual-animate.is-hero-visible .website-design-visual img:nth-child(3), .hero-visual-animate.is-hero-visible .website-design-visual img:nth-child(4) {
    animation: heroResultIn .8s cubic-bezier(.22, 1, .36, 1) .95s forwards;
}
/* Small ranking lines */
.hero-visual-animate .rank-line-item,
.hero-visual-animate .rank-dots,
.hero-visual-animate .hero-rank-chart {
    opacity: 0;
}
.hero-visual-animate.is-hero-visible .rank-line-item {
    animation: heroFadeIn .5s ease 1s forwards;
}
.hero-visual-animate.is-hero-visible .rank-dots {
    animation: heroFadeIn .5s ease 1.1s forwards;
}
.hero-visual-animate.is-hero-visible .hero-rank-chart {
    animation: heroFadeIn .7s ease 1.2s forwards;
}
/* Keyframes */
@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes heroVisualIn {
    from {
        opacity: 0;
        transform: translateX(45px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
@keyframes heroRankingIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes heroResultIn {
    from {
        opacity: 0;
        transform: translateY(35px) scale(.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes heroFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes heroResultFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
    100% {
        transform: translateY(0);
    }
}
/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .hero-copy-animate > *,
    .hero-visual-animate,
    .hero-visual-animate .ranking-card,
    .hero-visual-animate .result-card,
    .hero-visual-animate .rank-line-item,
    .hero-visual-animate .rank-dots,
    .hero-visual-animate .hero-rank-chart {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}
/** SERVICE Why SECTION CSS START **/
h2 {
    font-size: 48px;
    line-height: 58px;
    color: #111827;
    letter-spacing: 0em;
    font-weight: 400;
    margin: 0;
}
.service-cmn-heading {
    margin-bottom: 48px;
}
.service-cmn-heading h2 {
    max-width: 100%;
    margin: 0 auto;
    font-size: 48px;
    text-wrap: auto;
}
.section.visitor-judges-section.black-bg .service-cmn-heading h2 {
    font-size: 56px;
}
.visitor-judges-section .service-cmn-heading p {
    color: #ABABAB;
}
.visitor-judges-section .service-cmn-heading p {
    max-width: 1010px;
}
.service-cmn-heading p {
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: 0.04em;
    color: #555555;
    max-width: 900px;
    margin: 0 auto;
}
.service-cmn-heading h2 + p, .service-cmn-heading h3 + p, .service-cmn-heading h4 + p {
    margin-top: 20px;
}
.why-wrap {
    max-width: 1200px;
    margin: 0 auto;
}
.h-line {
    max-width: 920px;
    margin: 0 auto;
    height: 1px;
    background: #EBEBEB;
    width: 0;
    margin: 0 auto;
    width: 100%;
}
.h-line.aos-animate {
    width: 100%;
}
.reason-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    /* filter: drop-shadow(0px 13px 9px rgba(0, 0, 0, 0.01)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.03)) drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.05)); */
}
.reason-item {
    background: #FFFFFF;
    border: 1px solid #F8F8F8;
    border-radius: 8px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    box-shadow: 0 18px 28px rgba(20, 29, 45, 0.08), 0 4px 8px rgba(20, 29, 45, 0.035);
}
.reason-item h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.04em;
    color: #111827;
    text-transform: uppercase;
    margin: 0;
}
.reason-item p {
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.04em;
    color: #111827;
    margin: 0;
}
.reason-item p strong {
    font-family: "Urbanist", sans-serif;
    font-weight: bold;
}
.reason-item .button-row {
    margin: 0;
    width: 100%;
}
.reason-item .button-row .button {
    width: 100%;
}
.service-lexicon-indicators {
    position: relative;
    width: 100%;
    height: 35px;
    border-top: 1px solid #EBEBEB;
    max-width: 920px;
    margin: 0 auto;
}
.service-indicator {
    position: absolute;
    top: 0;
    width: 1px;
    height: 34px;
    background: #EBEBEB;
}
.service-indicator-1 {
    left: 0;
}
.service-indicator-2 {
    left: 33.42%;
}
.service-indicator-3 {
    left: 66.59%;
}
.service-indicator-4 {
    left: 100%;
}
/** SERVICE Why SECTION CSS END **/

/** SERVICE UPGRADE SECTION CSS START **/
.service-upgrade-section .site-shell {
    position: relative;
    z-index: 1;
}
.service-upgrade-way-section {
    position: relative;
    padding: 1px 24px 25px;
    background-image: linear-gradient(to right, rgb(0 0 0 / 3%) 1px, #00000000 1px), linear-gradient(to bottom, rgb(0 0 0 / 3%) 1px, transparent 1px);
    background-size: 150px 150px;
    overflow: hidden;
    margin-top: 85px;
}
.service-upgrade-way-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 24.52%, rgba(255, 255, 255, 0) 76.44%, #FFFFFF 100%);
    pointer-events: none;
}
.the-way-canvas {
    position: relative;
    margin: 0 auto 0;
    aspect-ratio: 1430 / 780;
}
.the-way-floating-box {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    padding: 29px 12px;
    text-align: center;
    transition: transform 0.85s cubic-bezier(.16, .9, .28, 1), opacity 0.7s ease;
    will-change: transform, opacity;
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    border-radius: 4px;
    width: 140px;
}
.the-way-floating-box .ic {
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
}
.the-way-floating-box .ic svg {
    width: 100%;
    height: 100%;
    display: block;
}
.service-upgrade-title h4 {
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: #000000;
    margin: 0;
}
.the-way-canvas:not(.in-view) .the-way-floating-box {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) scale(0.32);
}
.the-way-canvas.in-view .the-way-floating-box {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.card-applications-hub {
    position: absolute;
    left: 51.5%;
    top: 55%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 35%;
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    box-shadow: 0px 137px 55px rgba(0, 0, 0, 0.01), 0px 77px 46px rgba(0, 0, 0, 0.03), 0px 34px 34px rgba(0, 0, 0, 0.05), 0px 9px 19px rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 28px 31px 30px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .8, .3, 1);
}
.upgrade-web-lp-section .card-applications-hub {
    padding: 0;
    box-shadow: none;
    border: 0;
    background: transparent;
    text-align: center;
}
.upgrade-web-lp-section .card-applications-hub img {
    /* filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.12)); */
    max-width: 100%;
    margin: 0 auto;
}
.the-way-canvas.in-view .card-applications-hub {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.card-applications-hub h3 {
    margin: 0 0 59px;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #1B1B1D;
    letter-spacing: 0;
}
.rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 12px 12px;
    margin-bottom: 10px;
    border: 1px solid #ECEFF1;
    border-radius: 16px;
}
.rank-row:last-child {
    margin-bottom: 0;
}
.avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    font-family: "Inter", sans-serif;
}
.avatar.lime {
    background: #F4F9D7;
    color: #708C1F;
}
.avatar.blue {
    background: #EFF6FF;
    color: #2563EB;
}
.avatar.violet {
    background: #F5F3FF;
    color: #7C3AED;
}
.avatar svg {
    width: 16px;
    height: 16px;
}
.rank-info {
    flex: 1 1 auto;
    min-width: 0;
}
.rank-info .name {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: #1B1B1D;
}
.rank-info .sub {
    margin-top: 3px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    color: #606063;
}
.rank-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.pill {
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    color: #606063;
    background: #F1F5F9;
}
.pill.up {
    background: #FFF5E6;
    color: #FFA500;
}
.arrow {
    width: 13px;
    height: 13px;
    color: var(--faint);
    flex: 0 0 auto;
}
@keyframes floaty {
    0% {
        transform: translate(-50%, -50%) scale(1) translateY(0px);
    }

    50% {
        transform: translate(-50%, -50%) scale(1) translateY(var(--float-y, -7px));
    }

    100% {
        transform: translate(-50%, -50%) scale(1) translateY(0px);
    }
}
.the-way-canvas.settled .the-way-floating-box {
    animation-name: floaty;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: var(--float-duration, 4.2s);
    animation-delay: var(--float-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
    .the-way-floating-box,
    .card-applications-hub {
        transition: none !important;
    }
    .the-way-canvas.settled .the-way-floating-box {
        animation: none !important;
    }
    .the-way-canvas:not(.in-view) .the-way-floating-box {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    .the-way-canvas:not(.in-view) .card-applications-hub {
        opacity: 1;
    }
    @media (max-width:860px) {
        .the-way-canvas:not(.in-view) .the-way-floating-box {
            opacity: 1;
            translate: 0 0;
        }

        .the-way-canvas:not(.in-view) .card-applications-hub {
            opacity: 1;
            translate: 0 0;
        }
    }
}
/** SERVICE UPGRADE SECTION CSS END **/

/** SERVICE CASE STUDY SECTION CSS START **/
.service-case-study-grid {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.service-case-study-grid.row-reverse-case-study-scoial {
    flex-direction: row-reverse;
    align-items: center;
}
.service-case-study-grid.row-reverse-case-study-scoial .service-case-study-left-col {
    width: 485px;
}
.section.service-case-study-section {
    padding: 120px 0;
}
.service-case-study-left-col {
    width: 490px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.service-case-study-left-col .eyebrow {
    letter-spacing: 0.04em;
}
.service-case-study-left-col h3 {
    font-size: 42px;
    line-height: 120%;
    color: #000000;
    font-family: "Urbanist", sans-serif;
    font-weight: normal;
    margin: 0;
    margin-bottom: -7px;
    text-wrap: auto;
}
.service-case-study-left-col p {
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0.04em;
    color: #4F4E4E;
    margin: 0;
    font-weight: normal;
}
.service-case-study-left-col .button-row {
    margin-top: 0;
}
.service-case-study-right-col {
    justify-content: flex-end;
    width: 740px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 20px;
    overflow: hidden;
}
.service-case-study-img-card {
    width: 350px;
}
.service-case-study-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}
.service-case-study-stat-card {
    width: 388px;
    background: #FA665B;
    padding: 60px 32px;
    display: flex;
    flex-direction: column;
}
.ebast-service-case-study-bg-black {
    background: #121212;
    padding: 120px 0;
}
.ebast-service-case-study-bg-black .eyebrow {
    color: #B3B3B3;
}
.ebast-service-case-study-bg-black .service-case-study-left-col h3 {
    color: #fff;
}
.ebast-service-case-study-bg-black .service-case-study-left-col p {
    color: #C7C7C7;
}
.cs-stat-top {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
}
.cs-stat-top .cs-stat-num {
    font-weight: 800;
    font-size: 56px;
    line-height: 1;
    color: #fff;
}
.cs-stat-top .cs-stat-desc {
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    color: #fff;
}
.chart-area {
    margin-top: auto;
}
.cs-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 15px;
    justify-content: space-between;
}
.cs-meta-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cs-meta-labels {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 140%;
    text-transform: uppercase;
    color: #fff;
}
.cs-meta-value {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    color: #fff;
}
.chart-area #areaFill {
    opacity: 0;
    transition: opacity 1s ease;
    transition-delay: .5s;
}
.chart-area.revealed #areaFill {
    opacity: 1;
}
.chart-area .grid-line {
    opacity: 0;
    transition: opacity .5s ease;
}
.chart-area.revealed .grid-line {
    opacity: 1;
}
.chart-area .grid-line:nth-of-type(1) {
    transition-delay: .05s;
}
.chart-area .grid-line:nth-of-type(2) {
    transition-delay: .10s;
}
.chart-area .grid-line:nth-of-type(4) {
    transition-delay: .20s;
}
.chart-area .grid-line:nth-of-type(5) {
    transition-delay: .25s;
}
.chart-area g#calloutGroup {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1);
    transition-delay: 1.1s;
}
.chart-area.revealed g#calloutGroup {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.web-lp-case-study-one .service-case-study-grid {
    align-items: flex-start;
}
.web-lp-case-study-one .service-case-study-left-col {
    width: 485px;
}
.web-lp-case-study-one .service-case-study-left-col h3 {
    text-wrap: unset;
}
.web-lp-case-study-one .service-case-study-right-col {
    width: 687px;
    background: #E5E9EC;
    border-radius: 20px;
    padding: 24px;
    gap: 10px;
}
.web-lp-case-study-one-img-card {
    gap: 12px;
    grid-template-columns: 312px 1fr;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    align-self: flex-start;
}
.web-lp-case-study-one-img-item {
    margin-bottom: 12px;
}
.web-lp-case-study-one-img-item:last-child {
    margin-bottom: 0;
}
.visitor-judges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}
.visitor-judges-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 32px;
    background: #171717;
    border: 1px solid #383838;
    border-radius: 8px;
    height: 100%;
}
.visitor-judges-info h3 {
    font-weight: 400;
    font-size: 21px;
    line-height: 120%;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
}
.visitor-judges-info p {
    line-height: 150%;
    color: #ABABAB;
}
.visitor-judges-reviews-section {
    background: #171717;
}
.visitor-judges-reviews-section .visitor-judges-grid {
    gap: 78px;
}
.visitor-judges-reviews-section .visitor-judges-info {
    gap: 12px;
    border: 0;
    padding: 0;
}
.visitor-judges-reviews-section .visitor-judges-info p {
    color: #FFFFFF;
    margin: 0;
}
.visitor-judges-reviews-section .visitor-judges-info p strong {
    color: #ABABAB;
}
.visitor-judges-reviews-section .visitor-judges-info p:last-child {
    margin-top: auto;
}
/** SERVICE CASE STUDY SECTION CSS END **/

/** SERVICE ISOLATION SECTION CSS START **/
.section.service-isolation-section {
    padding-bottom: 0;
}
.pin-section {
    position:relative;
    height:300vh;
}
.pin-inner {
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, #00000000 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 65px 66px;
}
.pin-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 17.52%, rgba(255, 255, 255, 0) 100.44%, #FFFFFF 100%);
    pointer-events: none;
}
.pin-inner .site-shell {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 64px;
    align-items: center;
}
.service-isolation-tab-left-stack {
    max-width: 398px;
}
.service-isolation-tab-left-stack .word {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color .4s ease;
    -webkit-tap-highlight-color: transparent;
    font-size: 56px;
    line-height: 120%;
    color: #000000;
    opacity: 0.15;
    font-family: "Urbanist", sans-serif;
    margin-bottom: 14px;
    width: 100%;
    text-align: center;
    transition: 0.4s;
}
.service-isolation-tab-left-stack .word:last-child {
    margin-bottom: 0;
}
.service-isolation-tab-left-stack .word:hover {
    opacity: 0.50;
}
.service-isolation-tab-left-stack .word.active {
    opacity: 1;
}
.progress-rail{
    display: none;
    pointer-events: none;
}
.service-isolation-tab-right-stage {
    position:relative;
    height:80vh;
    max-height:800px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
}

.track {
    display:flex;
    flex-direction:column;
    gap:18px;
    will-change:transform;
}
.spacer {
    height:120px;
    flex-shrink:0;
}
.service-isolation-item {
    padding: 32px;
    /* transform: scale(.94); */
    transition: opacity .3s ease, transform .3s ease, border-color .3s ease;
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    border-radius: 10px;
}
.service-isolation-item.active{
    opacity:1;
    transform:scale(1);
}

.service-isolation-item-head {
    margin-bottom: 18px;
    padding-right: 20px;
}
.service-isolation-item-head p {
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0.04em;
    color: #000000;
    font-family: "Urbanist", sans-serif;
}

@media (max-width:760px){
    .pin-inner .site-shell { grid-template-columns:1fr; gap:28px; }
    .service-isolation-tab-right-stage { height:56vh; }
}
/** SERVICE ISOLATION SECTION CSS END **/

/** BUILD THE PAGE GOOGLE TRUSTS SECTION CSS START **/
.build-the-google-trusts-grid {
    display: grid;
    grid-template-columns: 635px 1fr;
    gap: 95px;
    align-items: center;
}
.build-the-google-trusts-left-col, .build-the-google-trusts-wrap, .build-the-google-trusts-head {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.build-the-google-trusts-left-col h2 {
    margin-bottom: -8px;
}
.build-the-google-trusts-left-col p {
    margin: 0;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0.04em;
    color: #4F4E4E;
    font-weight: normal;
}
.build-the-google-trusts-item h6 {
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.04em;
    color: #000000;
    margin-bottom: 10px;
}
.build-the-google-trusts-left-col .build-the-google-trusts-item p {
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.04em;
    color: #575757;
}
.build-the-google-trusts-right-col {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.google-trusts-visual-left {
    width: 290px;
    position: relative;
    z-index: 1;
}
.build-google-trusts-main-card {
    background: #FFFFFF;
    border: 0.85px solid rgba(120, 219, 137, 0.15);
    box-shadow: 0px 48.45px 19.125px rgba(0, 0, 0, 0.01), 0px 26.775px 16.575px rgba(0, 0, 0, 0.03), 0px 11.475px 11.475px rgba(0, 0, 0, 0.04), 0px 2.55px 6.375px rgba(0, 0, 0, 0.05);
    border-radius: 12.75px;
    padding: 17.85px 20.4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15.3px;
}
.ranking-label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 3.4px 8.5px;
    gap: 8.5px;
    background: rgba(120, 219, 137, 0.15);
    border-radius: 85px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 10.2px;
    line-height: 140%;
    letter-spacing: 0.04em;
    color: #5E8E5E;
}
.seo-main-image {
    border-radius: 14.03px;
    overflow: hidden;
}
.seo-main-image img {
    width: 100%;
}
.build-google-trusts-main-card h3 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 17.85px;
    line-height: 140%;
    letter-spacing: 0.04em;
    color: #000000;
    margin: 0;
}
.seo-main-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.seo-main-lines span {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 10px;
    background: #eceeed;
}
.seo-main-lines .short {
    width: 58%;
}
.google-trusts-visual-right {
    width: 188px;
    position: relative;
    z-index: 1;
}
.build-google-trusts-small-card {
    width: 145px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8.925px 10.2px;
    gap: 7.65px;
    background: #FFFFFF;
    border: 0.425px solid #DEDEDE;
    border-radius: 6.375px;
    margin-bottom: 12px;
}
.build-google-trusts-small-card:last-child {
    margin-bottom: 0;
}
.build-google-trusts-small-card h3 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 8.925px;
    line-height: 140%;
    letter-spacing: 0.04em;
    color: #000000;
    margin: 0;
}
.build-google-trusts-small-card .seo-main-lines {
    gap: 4px;
}
.build-google-trusts-small-card .seo-main-lines span {
    height: 5px;
}
.build-google-trusts-tag {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 4px 8px;
    background: #E6F1F7;
    border-radius: 6px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 6px;
    line-height: 7px;
    color: #215496;
}
.build-google-trusts-tag.tag-orange {
    background: #FFF5E6;
    color: #FFA500;
}
.build-google-trusts-tag.tag-red {
    color: #D92E2E;
    background: #FFE8E8;
}
.build-google-trusts-small-card.seo-card-mid {
    margin-left: auto;
}
.google-trusts-connections {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
.google-trusts-connections svg {
    width: 403px;
    height: 306px;
}
.build-the-google-trusts-section .google-trusts-visual-left {
    opacity: 0;
    transform: translateX(-45px) scale(0.96);
}
.build-the-google-trusts-section .google-trusts-connections svg {
    opacity: 0;
}
.build-the-google-trusts-section .build-google-trusts-small-card {
    opacity: 0;
    transform: translateX(45px) translateY(10px) scale(0.96);
}
.build-the-google-trusts-section.is-visible .google-trusts-visual-left {
    animation: googleTrustsMainCard 0.8s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes googleTrustsMainCard {
    0% {
        opacity: 0;
        transform: translateX(-45px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
.build-the-google-trusts-section.is-visible .google-trusts-connections svg {
    opacity: 1;
}
.google-trusts-connections svg path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.build-the-google-trusts-section.is-visible .google-trusts-connections svg path {
    animation: googleTrustsDrawLine 0.6s ease forwards;
    animation-delay: 0.4s;
}
.build-the-google-trusts-section.is-visible .google-trusts-connections svg path:nth-child(1) {
    animation-delay: 0.4s;
}
.build-the-google-trusts-section.is-visible .google-trusts-connections svg path:nth-child(2) {
    animation-delay: 0.7s;
}
.build-the-google-trusts-section.is-visible .google-trusts-connections svg path:nth-child(3) {
    animation-delay: 1s;
}
@keyframes googleTrustsDrawLine {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.build-the-google-trusts-section.is-visible .build-google-trusts-small-card.seo-card-top {
    animation: googleTrustsSmallCard 0.65s cubic-bezier(.22, 1, .36, 1) 1.1s forwards;
}
.build-the-google-trusts-section.is-visible .build-google-trusts-small-card.seo-card-mid {
    animation: googleTrustsSmallCard 0.65s cubic-bezier(.22, 1, .36, 1) 1.3s forwards;
}
.build-the-google-trusts-section.is-visible .build-google-trusts-small-card.seo-card-bottom {
    animation: googleTrustsSmallCard 0.65s cubic-bezier(.22, 1, .36, 1) 1.6s forwards;
}
@keyframes googleTrustsSmallCard {
    0% {
        opacity: 0;
        transform: translateX(45px) translateY(10px) scale(0.96);
    }
    70% {
        opacity: 1;
        transform: translateX(-4px) translateY(0) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}
/** BUILD THE PAGE GOOGLE TRUSTS SECTION CSS END **/

/** B2B CASE STUDY SECTION CSS START **/
.row-reverse-case-study{
    flex-direction: row-reverse;
    align-items: center;
}
.row-reverse-case-study .service-case-study-right-col {
    justify-content: flex-start;
    width: 487px;
}
.row-reverse-case-study .service-case-study-left-col {
    width: 744px;
}
.b2b-cs-result-card {
    padding: 32px;
    background: #FCFCFC;
    border: 1px solid #EBEDEB;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.b2b-cs-result-head h4 {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    color: #000000;
}
.b2b-case-study-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.b2b-cs-stat {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 16px;
    gap: 10px;
}
.b2b-stat-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
}
.b2b-cs-stat p {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    letter-spacing: 0;
}
.b2b-cs-stat p strong {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #10B981;
}
.web-lp-case-study-two .row-reverse-case-study .service-case-study-left-col {
    width: 580px;
}
.web-lp-case-study-two .row-reverse-case-study .service-case-study-right-col {
    width: 641px;
    background: #1E1E1E;
    padding: 24px;
    height: 460px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.web-lp-case-study-two-img-card {

}
.web-lp-case-study-two-img-card video {
    width: 100%;
}
.black-bg.web-lp-case-study-two .service-case-study-left-col .eyebrow, .black-bg.web-lp-case-study-two .service-case-study-left-col p {
    color: #ABABAB;
}
/** B2B CASE STUDY SECTION CSS END **/

/** MANAGED PROCESS SECTION CSS START **/
.managed-process-intro {
    display: grid;
    grid-template-columns: 440px 1fr;
    column-gap: 70px;
    max-width: 984px;
    margin: 0 auto 70px;
    align-items: center;
}
.managed-process-intro p {
    color: #4B4B4B;
    font-weight: normal;
    letter-spacing: 0;
    font-size: 18px;
    line-height: 150%;
}
.managed-process-intro p strong {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
}
.managed-process-list-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #E7E7E7;
    padding-top: 40px;
    gap: 22px;
    max-width: 1118px;
    margin: 0 auto;
}
.managed-process-item-inner {
    position: relative;
}
.managed-process-item-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: -42px;
    width: 0;
    height: 2px;
    background: #000000;
    transition: width .35s ease;
}
.managed-process-item-inner:hover::before {
    width: 100%;
}
.managed-process-item-heading {
    display: flex;
    gap: 21px;
    align-items: center;
    margin-bottom: 15px;
}
.managed-process-square {
    width: 12px;
    height: 12px;
    border: 2px solid #222;
    background: transparent;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.managed-process-item-inner:hover .managed-process-square {
    background: #4edda9;
    border-color: #4edda9;
}
.managed-process-item-heading h6 {
    margin: 0;
    font-family: "Urbanist", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #000000;
    flex: 1;
}
.managed-process-item-body {
    padding-left: 33px;
}
.managed-process-item-body h4 {
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 120%;
    color: #000000;
    margin-bottom: 15px;
    text-wrap: unset;
}
.managed-process-item-body p {
    color: #8E8E8E;
}


.li-how-wotk-section .service-cmn-heading p {
    color: #4B4B4B;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0;
    max-width: 1140px;
}
.li-how-it-works__grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 65px;
}
.li-how-works-process-wrap {
    position: relative;
    padding-left: 42px;
    width: 409px;
}
.li-how-process-line {
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 52px;
    width: 1px;
    background: rgb(0 0 0 / 10%);
    overflow: hidden;
    height: 95%;
}
.li-how-process-item {
    position: relative;
    padding-bottom: 30px;
}
.li-how-process-item h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 12px;
    text-wrap: unset;
}
.li-how-process-item p {
    color: #8E8E8E;
}
.li-how-process-dot {
    position: absolute;
    left: -42px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #000000;
    transition: background-color 0.35s ease, border-color 0.35s ease;
}
.li-how-process-item:hover .li-how-process-dot {
    border-color: #FA665B;
    background: #FA665B;
}
.li-how-work-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 21px;
    width: 653px;
}
.li-how-work-price-card {
    min-height: 329px;
    background: #F9F9F9;
    border-radius: 17px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.li-how-work-price-head h3 {
    margin: 0;
    font-weight: 400;
    font-size: 42px;
    line-height: 120%;
    color: #000000;
}
.li-how-work-price-body h4 {
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.04em;
    color: #000000;
    margin-bottom: 9px;
}
.li-how-work-price-body p {
    color: #555555;
}
.li-how-work-price-card.card--wide {
    grid-column: 1 / -1;
    min-height: 159px;
    padding: 24px 28px;
    justify-content: flex-start;
}
.card--wide .li-how-work-price-head h3 {
    font-size: 24px;
    color: #000000;
    margin-bottom: 10px;
}
.web-build-perform-section .li-how-it-works__grid {
    flex-wrap: wrap;
}
.web-build-perform-img-card {
    width: 545px;
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--reveal-index, 0) * 90ms);
    opacity: 0;
    transform: translateY(22px);
}
.web-build-perform-img-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
.web-build-perform-section .li-how-works-process-wrap {
    width: 498px;
}
.how-we-get-ads-section .web-build-perform-img-card.is-revealed {
    text-align: center;
    position: relative;
}
.how-we-get-ads-section .web-build-perform-img-card img:nth-child(2) {
    position: absolute;
    top: 55%;
    right: 50px;
    transform: translateY(-50%);
    width: 225px;
}
.how-we-get-ads-section .web-build-perform-img-card img:nth-child(3) {
    position: absolute;
    bottom: -10px;
    left: 50px;
}
/** MANAGED PROCESS SECTION CSS END **/


/** MARKITING MANAGER SECTION CSS START **/
.marketing-manager-case-study-section .service-case-study-left-col {
    width: 472px;
}
.marketing-manager-case-study-section .service-case-study-left-col h3 {
    font-size: 52px;
    line-height: 115%;
    color: #1C1917;
    margin: 0;
}
.marketing-manager-case-study-section .service-case-study-left-col p {
    font-size: 17px;
    line-height: 150%;
    color: #555555;
    letter-spacing: 0;
    font-weight: 500;
}
.marketing-manager-case-study-section .service-case-study-left-col p strong {
    font-family: "Urbanist", sans-serif;
    font-weight: 800;
    color: #000000;
}
.marketing-manager-case-study-section .service-case-study-right-col {
    width: 728px;
}
.marketing-manager-comparison-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    width: 100%;
}
.marketing-manager-comparison-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.marketing-manager-comparison-head h5 {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    letter-spacing: 0.08em;
    color: #555555;
    margin: 0;
}
.marketing-manager-agency-body {
    background: #FFFFFF;
    border: 1px solid #EAE9E4;
    border-radius: 24px;
    padding: 28px;
    position: relative;
    height: 324px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mm-agency-row {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
.mm-agency-row:last-child {
    margin-bottom: 0;
}
.agency-dots {
    display: flex;
    width: 100px;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
}
.mm-agency-row h4 {
    text-wrap: unset;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #1C1917;
    margin: 0;
}
.person-icon {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
}
.mm-footer-description p {
    color: #6B6661;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}
.pr-comparison .marketing-manager-comparison-head h5 {
    font-family: "Urbanist", sans-serif;
    color: #000000;
}
.marketing-manager-agency-body.mm-agency-card-right {
    border: 1px solid #E7E7E7;
    box-shadow: 0px 18px 7px rgba(0, 0, 0, 0.01), 0px 10px 6px rgba(0, 0, 0, 0.03), 0px 5px 5px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: 20px;
}
.pr-mm-profile {
    position: absolute;
    z-index: 5;
    top: 17px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.pr-mm--avatar {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    border-radius: 50%;
    border: 3px solid #F1F1F1;
    background: #e6d1b9;
    font-size: 25px;
    overflow: hidden;
}
.pr-mm-profile h3 {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #1B1B1D;
    margin: 0;
}
.pr-mm-profile p {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: #9E9E9E;
}
.connection-circle {
    position: absolute;
    width: 246px;
    height: 246px;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
    border: 1px dashed #D6D3D1;
    border-radius: 50%;
}
.marketing-manager-agency-body .tag {
    position: absolute;
    z-index: 10;
    white-space: nowrap;
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    box-shadow: 7px 5px 4px rgba(0, 0, 0, 0.01), 4px 3px 3px rgba(0, 0, 0, 0.05), 2px 1px 2px rgba(0, 0, 0, 0.09), 0px 0px 1px rgba(0, 0, 0, 0.1);
    border-radius: 34px;
    padding: 6px 10px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: #000000;
}
.tag-sequences {
    top: 131px;
    left: 15px;
}
.tag-templates {
    top: 139px;
    right: 12px;
}
.tag-deliverability {
    left: 36px;
    bottom: 69px;
}
.tag-replies {
    right: 64px;
    bottom: 57px;
}
.pr-comparison .mm-footer-description p {
    font-family: "Inter", sans-serif;
    font-weight: bold;
    color: #555555;
}
.pr-comparison .mm-footer-description p b {
    color: #FA665B;
    font-family: "Inter", sans-serif;
    font-weight: bold;
}
.marketing-manager-comparison-cards {
    opacity: 0;
    transform: translateY(25px);
}
.cs-reveal.cs-active .marketing-manager-comparison-cards {
    animation: csTextIn .7s cubic-bezier(.22, 1, .36, 1) .25s forwards;
}
.marketing-manager-vr-slider {
    padding: 20px 32px;
    background: #F9F9F9;
    border-radius: 16px;
    width: 100%;
    margin-top: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.text-vertical {
    position: relative;
    height: 60px;
    overflow: hidden;
}
.text-vertical p {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.7s ease, opacity 0.7s ease;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Inter", sans-serif;
    gap: 16px;
    font-weight: 400;
    text-align: center;
    color: #000000;
    letter-spacing: 0;
}
.marketing-manager-vr-slider p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    color: #000;
    letter-spacing: 0;
}
.marketing-manager-vr-slider p b {
    color: #000;
    font-family: "Inter", sans-serif;
    font-weight: 800;
}
.text-vertical p.active {
    opacity: 1;
    transform: translateY(0);
}
.text-vertical p.exit {
    opacity: 0;
    transform: translateY(-100%);
}
.web-lp-case-study-three .service-case-study-left-col {
    width: 555px;
}
.web-lp-case-study-three .service-case-study-right-col {
    width: 666px;
    background: #E5E9EC;
    padding: 24px;
    margin-top: 25px;
}
.web-lp-case-study-three .service-case-study-grid.flex-row-reverse {
    align-items: flex-start;
}
.web-lp-case-study-three .web-lp-case-study-one-img-card {
    grid-template-columns: 404px 1fr;
}
/** MARKITING MANAGER SECTION CSS END **/

/** BUILT FOR BRANDS SECTION CSS START **/
.service-built-brands-section {
    background: #000000;
    padding-top: 120px;
}
.service-built-brands-wrap {
    gap: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
}
.service-built-brands-left-col {
    width: 50%;
}
.service-built-brands-right-col {
    width: 46%;
    padding-right: 0;
}
.service-built-brands-right-col .restaurant-visual {
    width: 100%;
}
.service-built-brands-left-info h3 {
    font-weight: 400;
    font-size: 48px;
    line-height: 120%;
    color: #FFFFFF;
    margin-bottom: 32px;
    text-wrap: unset;
}
.service-built-brands-left-info ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    max-width: 486px;
}
.service-built-brands-left-info ul li {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #ABABAB;
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: start;
    gap: 24px;
    margin-bottom: 21px;
}
.service-built-brands-check-icon {
    border: 1px solid #313131;
    border-radius: 200px;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.built-brands-result-card {
    background: #171717;
    box-shadow: -12.8px 12.8px 25.6px rgba(0, 0, 0, 0.121569);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 38.4px;
    gap: 22.4px;
}
.built-brands-result-label, .keyword-title {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    font-size: 14.4px;
    line-height: 17px;
    letter-spacing: 0.16px;
    color: #FFFFFF;
}
.built-brands-result-number {
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-size: 51.2px;
    line-height: 61px;
    letter-spacing: -0.8px;
    color: #7CE3A8;
}
.built-brands-result-growth {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    font-size: 14.4px;
    line-height: 17px;
    letter-spacing: 0.16px;
    color: #FFFFFF;
}
.built-brands-key-word-wrap {
    width: 100%;
}
.keyword-row {
    position: relative;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 13px;
}
.keyword-bar {
    height: 17px;
    border-radius: 20px;
    background: #393939;
    width: 0;
    transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}
.service-built-brands-section.is-visible .keyword-row:nth-child(1) .keyword-bar {
    width: 142px;
    transition-delay: .20s;
}
.service-built-brands-section.is-visible .keyword-row:nth-child(2) .keyword-bar {
    width: 210px;
    transition-delay: .30s;
}
.service-built-brands-section.is-visible .keyword-row:nth-child(3) .keyword-bar {
    width: 148px;
    transition-delay: .40s;
}
.service-built-brands-section.is-visible .keyword-row:nth-child(4) .keyword-bar {
    width: 249px;
    transition-delay: .50s;
}
.built-brands-key-word-flex {
    border-bottom: 0.8px solid rgba(255, 255, 255, 0.101961);
    padding-bottom: 25px;
}
.service-built-brands-visual {
    position: relative;
}

.built-brands-percentage-card {
    background: #1F1F1F;
    border: 1px solid #373737;
    box-shadow: 0px 137px 55px rgba(0, 0, 0, 0.01), 0px 77px 46px rgba(0, 0, 0, 0.03), 0px 34px 34px rgba(0, 0, 0, 0.05), 0px 9px 19px rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    width: 261px;
    height: 191px;
    position: absolute;
    z-index: 5;
    top: -85px;
    right: -50px;
}
.percentage-dots {
    display: flex;
    gap: 10px;
}
.percentage-dots span {
    background: #3C3C3C;
    flex: 1;
    height: 10px;
    border-radius: 10px;
    transform-origin: left;
    transition: transform .45s ease;
}
.built-brands-percentage-card-inner {
    width: 198px;
    margin: 0 auto;
}
.percentage-dots {
    display: flex;
    gap: 10px;
    width: 198px;
    margin: 20px auto 0;
}
.percentage-number {
    position: absolute;
    left: 0;
    right: 0;
    top: 89px;
    text-align: center;
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    color: #ECECEC;
}
.built-brands-chart .chart-fill {
    opacity: 0;
    transition: opacity .7s ease 1.45s;
}
.service-built-brands-section.is-visible .built-brands-chart .chart-fill {
    opacity: 1;
}
.built-brands-chart .chart-line {
    fill: none;
    stroke: #65e6a1;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.7s cubic-bezier(.22,.61,.36,1);
}
.service-built-brands-section.is-visible .built-brands-chart .chart-line {
    stroke-dashoffset: 0;
    transition-delay: 1.35s;
}

.restaurant-visual {
    position: relative;
    width: 467px;
    height: auto;
}
.glow {
    position: absolute;
    right: 4px;
    bottom: 30px;
    width: 280px;
    height: 225px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    filter: blur(40px);
    transform: rotate(-15deg);
    pointer-events: none;
}
.restaurant-card {
    background: #2A2A2A;
    border: 1.3px solid #3A3A3A;
    box-shadow: 0px 10.4px 23.4px rgba(0, 0, 0, 0.501961);
    border-radius: 18.2px;
    width: 300px;
    height: 424px;
    padding: 15px 30px 30px 30px;
}
.restaurant-top-icon {
    width: 26px;
    height: 26px;
    background: #434343;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 9px;
}
.restaurant-heading-line {
    height: 17px;
    border-radius: 20px;
    background: #434343;
    margin-bottom: 7px;
    margin-left: auto;
    margin-right: auto;
}
.restaurant-heading-line.one {
    width: 202px;
}
.restaurant-heading-line.two {
    width: 134px;
}
.restaurant-hero-image {
    border-radius: 13px;
    height: 112px;
    width: 100%;
    overflow: hidden;
}
.restaurant-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.restaurant-middle-line {
    width: 163px;
    height: 16px;
    margin: 10px 0 12px;
    border-radius: 15px;
    background: #434343;
}
.restaurant-thumbs {
    display: flex;
    gap: 14px;
    justify-content: space-between;
}
.restaurant-thumb {
    width: 67px;
    height: 67px;
    overflow: hidden;
    border-radius: 8px;
}
.restaurant-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.restaurant-tiny-lines {
    display: flex;
    gap: 26px;
    margin-top: 8px;
    justify-content: space-around;
}
.restaurant-tiny-line {
    height: 7px;
    width: 36px;
    border-radius: 10px;
    background: #3A3A3A;
}
.restaurant-card-bottom-lines {
    margin-top: 18px;
}
.restaurant-card-bottom-lines span {
    display: block;
    height: 17px;
    background: #434343;
    border-radius: 20px;
    margin-bottom: 8px;
}
.restaurant-card-bottom-lines span:last-child {
    margin-bottom: 0px;
}
.restaurant-avatar-group {
    position: absolute;
    top: 160px;
    right: 25px;
    display: flex;
    align-items: center;
    z-index: 5;
}
.restaurant-avatar {
    width: 47px;
    height: 47px;
    margin-left: -8px;
    overflow: hidden;
    background: #555;
    border-radius: 50%;
    border: 2px solid #565656;
}
.restaurant-avatar:first-child {
    margin-left: 0;
}
.restaurant-btn {
    position: absolute;
    top: 225px;
    right: 20px;
}
.restaurant-btn .restaurant-reserve-btn {
    background: #0537E8;
    box-shadow: 19.5px 89.7px 36.4px rgba(0, 0, 0, 0.01), 10.4px 50.7px 31.2px rgba(0, 0, 0, 0.05), 5.2px 22.1px 23.4px rgba(0, 0, 0, 0.09), 1.3px 5.2px 13px rgba(0, 0, 0, 0.1);
    border-radius: 75.4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 15.6px 27.3px;
    gap: 13px;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
}
.restaurant-conversion-card {
    background: #272629;
    border: 1.69px solid #383838;
    box-shadow: 110.5px 63.7px 35.1px rgba(0, 0, 0, 0.01), 70.2px 40.3px 32.5px rgba(0, 0, 0, 0.05), 39px 23.4px 27.3px rgba(0, 0, 0, 0.18), 18.2px 10.4px 20.8px rgba(0, 0, 0, 0.3), 3.9px 2.6px 11.7px rgba(0, 0, 0, 0.34);
    border-radius: 20.28px;
    width: 196.3px;
    height: 139.1px;
    position: absolute;
    left: 200px;
    bottom: 0px;
    z-index: 10;
    padding: 27px 27px;
    text-align: center;
}
.restaurant-conversion-top {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
}
.restaurant-conversion-top .conversion-value {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 41.6px;
    line-height: 50px;
    color: #FFFFFF;
}
.restaurant-growth {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: #10B981;
}
.growth-circle {
    width: 22px;
    height: 22px;
    background: #15422C;
    border-radius: 32.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.restaurant-conversion-label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 19.5px;
    line-height: 24px;
    color: #ABABAB;
    margin-top: 12px;
}
.explore-seo-cta-section {
    background: #000000;
    padding-top: 90px;
    padding-bottom: 90px;
}
.explore-seo-cta-wrap {
    padding: 30px 50px;
    border: 1px solid #404040;
    border-radius: 10px;
    align-items: center;
    display: grid;
    grid-template-columns: 661px 1fr;
}
.explore-landing-cta-section .explore-seo-cta-wrap {
    flex-direction: column;
    display: flex;
    gap: 40px;
    border: 0;
    max-width: 980px;
    margin: 0 auto;
}
.explore-seo-cta-btn {
    text-align: right;
}
.explore-seo-cta-content h3 {
    font-weight: 400;
    font-size: 28px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin-bottom: 6px;
}
.explore-seo-cta-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.02em;
    color: #FFFFFF;
}
.explore-landing-cta-section .explore-seo-cta-content p {
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: 0.04em;
    color: #fff;
    text-align: center;
}
.explore-landing-cta-section .explore-seo-cta-content p strong {
    font-weight: 800;
    color: #FFFFFF;
}
.eblast-case-study-chart {
    position: relative;
}
.restaurant-visual-img {
    width: 100%;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.restaurant-visual-img img {
    width: 100%;
}

/* Mini line-chart illustration entrance animation.
   Triggered by `.service-built-brands-section.is-visible` (same
   IntersectionObserver that reveals the rest of this section — see
   initBuiltForBrandsSection). The two trend lines are drawn in via JS
   (stroke-dashoffset, since their length varies) — see eblast-animation.js. */
.eblast-case-study-chart svg line {
    opacity: 0;
    transition: opacity .5s ease;
    transition-delay: .2s;
}
.service-built-brands-section.is-visible .eblast-case-study-chart svg line {
    opacity: 1;
}
.eblast-case-study-chart svg g[filter="url(#filter1_d_598_1164)"],
.eblast-case-study-chart svg g[filter="url(#filter2_d_598_1164)"] {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    transform: translateY(8px) scale(.92);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.service-built-brands-section.is-visible .eblast-case-study-chart svg g[filter="url(#filter1_d_598_1164)"] {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 1.1s;
}
.service-built-brands-section.is-visible .eblast-case-study-chart svg g[filter="url(#filter2_d_598_1164)"] {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 1.35s;
}
.eblast-case-study-chart svg path[fill="#3E3E3E"] {
    opacity: 0;
    transition: opacity .4s ease;
}
.service-built-brands-section.is-visible .eblast-case-study-chart svg path[fill="#3E3E3E"] {
    opacity: 1;
    transition-delay: 1.2s;
}
@media (prefers-reduced-motion: reduce) {
    .eblast-case-study-chart svg line,
    .eblast-case-study-chart svg g[filter="url(#filter1_d_598_1164)"],
    .eblast-case-study-chart svg g[filter="url(#filter2_d_598_1164)"],
    .eblast-case-study-chart svg path[fill="#3E3E3E"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
/** BUILT FOR BRANDS SECTION CSS END **/

/** ORGANIC GROWTH CASE STUDY SECTION CSS START **/
.black-bg {
    background: #000000;
}
.section.service-organic-growth-case-study-section.black-bg {
    padding: 120px 0;
}
.black-bg .b2b-cs-result-card {
    background: #181717;
    border: 1px solid #333333;
    border-radius: 28px;
}
.black-bg .b2b-cs-result-head h4, .black-bg .b2b-stat-label, .black-bg .b2b-cs-stat p, .black-bg .service-case-study-left-col h3 {
    color: #fff;
}
.black-bg .service-case-study-left-col .eyebrow, .black-bg .service-case-study-left-col p {
    color: #ABABAB;
}
/** ORGANIC GROWTH CASE STUDY SECTION CSS END **/

/** ALL Case Study Reveal Animations.**/
.cs-reveal {
    --cs-slide-x: 35px;
}
.cs-reveal .row-reverse-case-study {
    --cs-slide-x: -35px;
}

/* Left column text */
.cs-reveal .service-case-study-left-col .eyebrow,
.cs-reveal .service-case-study-left-col h3,
.cs-reveal .service-case-study-left-col p,
.cs-reveal .service-case-study-left-col .button-row {
    opacity: 0;
    transform: translateY(25px);
}
.cs-reveal.cs-active .service-case-study-left-col .eyebrow {
    animation: csTextIn .55s ease .1s forwards;
}
.cs-reveal.cs-active .service-case-study-left-col h3 {
    animation: csTextIn .7s cubic-bezier(.22, 1, .36, 1) .25s forwards;
}
.cs-reveal.cs-active .service-case-study-left-col p {
    animation: csTextIn .7s cubic-bezier(.22, 1, .36, 1) .4s forwards;
}
.cs-reveal.cs-active .service-case-study-left-col .button-row {
    animation: csButtonIn .6s cubic-bezier(.22, 1, .36, 1) .6s forwards;
}

/* Right column card(s) — image card, stat card, or B2B-style result card */
.cs-reveal .service-case-study-img-card,
.cs-reveal .service-case-study-stat-card,
.cs-reveal .b2b-cs-result-card,
.cs-reveal .web-lp-case-study-one-img-card,
.cs-reveal .web-lp-case-study-two-img-card {
    opacity: 0;
    transform: translateX(var(--cs-slide-x));
}
.cs-reveal.cs-active .service-case-study-img-card,
.cs-reveal.cs-active .service-case-study-stat-card,
.cs-reveal.cs-active .b2b-cs-result-card,
.cs-reveal.cs-active .web-lp-case-study-one-img-card,
.cs-reveal.cs-active .web-lp-case-study-two-img-card {
    animation: csCardIn .75s cubic-bezier(.22, 1, .36, 1) .15s forwards;
}

/* Stat rows inside a result card */
.cs-reveal .b2b-cs-stat {
    opacity: 0;
    transform: translateY(15px);
}
.cs-reveal.cs-active .b2b-cs-stat {
    animation: csStatIn .5s ease forwards;
}
.cs-reveal.cs-active .b2b-cs-stat:nth-child(1) { animation-delay: .35s; }
.cs-reveal.cs-active .b2b-cs-stat:nth-child(2) { animation-delay: .5s; }
.cs-reveal.cs-active .b2b-cs-stat:nth-child(3) { animation-delay: .65s; }

/* Bar charts — rect-based (B2B + Organic Growth cards) */
.cs-reveal .b2b-cs-bar-chart svg rect {
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: scaleY(0);
}
.cs-reveal.cs-active .b2b-cs-bar-chart svg rect {
    animation: csBarGrow .75s cubic-bezier(.22, 1, .36, 1) forwards;
}
.cs-reveal.cs-active .b2b-cs-bar-chart svg rect:nth-child(1) { animation-delay: .65s; }
.cs-reveal.cs-active .b2b-cs-bar-chart svg rect:nth-child(2) { animation-delay: .85s; }
.cs-reveal.cs-active .b2b-cs-bar-chart svg rect:nth-child(3) { animation-delay: 1.05s; }
.cs-reveal.cs-active .b2b-cs-bar-chart svg rect:nth-child(4) { animation-delay: 1.25s; }
.cs-reveal.cs-active .b2b-cs-bar-chart svg rect:nth-child(5) { animation-delay: 1.45s; }

/* Bar charts — path-based (Organic Traffic card) */
.cs-reveal .b2b-cs-bar-chart .b2b-cs-chart-bar {
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: scaleY(0);
}
.cs-reveal.cs-active .b2b-cs-bar-chart .b2b-cs-chart-bar {
    animation: csBarGrow 1s cubic-bezier(.22, 1, .36, 1) forwards;
}
.cs-reveal.cs-active .b2b-cs-bar-chart .b2b-cs-chart-bar:nth-child(1) { animation-delay: 1s; }
.cs-reveal.cs-active .b2b-cs-bar-chart .b2b-cs-chart-bar:nth-child(2) { animation-delay: 1.2s; }
.cs-reveal.cs-active .b2b-cs-bar-chart .b2b-cs-chart-bar:nth-child(3) { animation-delay: 1.4s; }
.cs-reveal.cs-active .b2b-cs-bar-chart .b2b-cs-chart-bar:nth-child(4) { animation-delay: 1.6s; }
.cs-reveal.cs-active .b2b-cs-bar-chart .b2b-cs-chart-bar:nth-child(5) { animation-delay: 1.9s; }

/* Callout badge (chart number tag, e.g. Organic Traffic's "3.2X" pill) */
.cs-reveal .b2b-cs-bar-chart .gp-2p {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1);
    transition-delay: 1.1s;
}
.cs-reveal.cs-active .b2b-cs-bar-chart .gp-2p {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Animated stat number, e.g. "3.2X" */
.cs-reveal .cs-stat-num {
    display: inline-block;
}
.cs-reveal.cs-active .cs-stat-num {
    animation: csNumberIn .5s ease .4s forwards;
}

/* Chart-area illustration (the rankings/bar-style graphic inside the stat
   card — #chartArea and #chartArea2). Targets the SVG's gradient-filled
   bars, grid lines, loose white icon/label paths, and the dark callout
   badge generically by attribute, since both charts share the same
   exported shape (Figma "paint" gradients + a filtered badge group), so
   this one set of rules animates either chart without extra markup. */
.cs-reveal .chart-area svg line {
    opacity: 0;
    transition: opacity .5s ease;
    transition-delay: .5s;
}
.cs-reveal.cs-active .chart-area svg line {
    opacity: 1;
}
.cs-reveal .chart-area svg > path[fill^="url(#paint"] {
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: scaleY(0);
    opacity: 0;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
    transition-delay: .6s;
}
.cs-reveal.cs-active .chart-area svg > path[fill^="url(#paint"] {
    transform: scaleY(1);
    opacity: 1;
}
.cs-reveal .chart-area svg > path[fill="white"] {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: .9s;
}
.cs-reveal.cs-active .chart-area svg > path[fill="white"] {
    opacity: 1;
    transform: translateY(0);
}
.cs-reveal .chart-area svg g[filter] {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    transform: translateY(8px) scale(.92);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
    transition-delay: 1.05s;
}
.cs-reveal.cs-active .chart-area svg g[filter] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* #chartAreaOne — 90% donut chart ("CTV Ads reach 90% of US households").
   Rebuilt as a real progress ring so it can fill in smoothly instead of
   just scaling a pre-baked arc shape into place: #DE2B1D is the static
   full-circle track (always shown, just a light entrance fade+scale);
   #chartAreaOneRing is a stroke-based <circle> filled via stroke-dashoffset
   by animateRing() in tv-ads-animation.js (radius/percent read straight off
   the markup, so there's nothing to keep in sync here); #chartAreaOnePercent
   is a live <text> element that same function counts up in step with the
   ring, replacing the old vector-outline "90%" glyph that couldn't be
   animated as a number at all. */
.cs-reveal #chartAreaOne svg path[fill="#DE2B1D"] {
    transform-box: view-box;
    transform-origin: 162px 162px;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cs-reveal.cs-active #chartAreaOne svg path[fill="#DE2B1D"] {
    opacity: 1;
    transform: scale(1);
}
.cs-reveal #chartAreaOne svg text {
    opacity: 0;
    transition: opacity .4s ease;
    transition-delay: .3s;
}
.cs-reveal.cs-active #chartAreaOne svg text {
    opacity: 1;
}

@keyframes csTextIn {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes csButtonIn {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes csCardIn {
    from { opacity: 0; transform: translateX(var(--cs-slide-x)); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes csStatIn {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes csBarGrow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
@keyframes csNumberIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cs-reveal .service-case-study-left-col .eyebrow,
    .cs-reveal .service-case-study-left-col h3,
    .cs-reveal .service-case-study-left-col p,
    .cs-reveal .service-case-study-left-col .button-row,
    .cs-reveal .service-case-study-img-card,
    .cs-reveal .service-case-study-stat-card,
    .cs-reveal .b2b-cs-result-card,
    .cs-reveal .web-lp-case-study-one-img-card,
    .cs-reveal .web-lp-case-study-two-img-card,
    .cs-reveal .b2b-cs-stat,
    .cs-reveal .b2b-cs-bar-chart svg rect,
    .cs-reveal .b2b-cs-bar-chart .b2b-cs-chart-bar,
    .cs-reveal .cs-stat-num,
    .cs-reveal .chart-area svg line,
    .cs-reveal .chart-area svg > path[fill^="url(#paint"],
    .cs-reveal .chart-area svg > path[fill="white"],
    .cs-reveal .chart-area svg g[filter],
    .cs-reveal #chartAreaOne svg path[fill="#DE2B1D"],
    .cs-reveal #chartAreaOne svg text {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}


/**
 * Built for Brands — Entrance Animation
 * ---------------------------------------
 * Triggered by the existing `.is-visible` class (already added by the
 * section's IntersectionObserver in the inline script). Adds a staggered
 * reveal for the left-column heading/checklist and the two right-column
 * cards, matching the entrance style used across the case study sections.
 */

/* Left column: heading + checklist items */
.service-built-brands-left-info h3,
.service-built-brands-left-info ul li,
.build-the-google-trusts-head,
.build-the-google-trusts-item {
    opacity: 0;
    transform: translateY(25px);
}
.service-built-brands-section.is-visible .service-built-brands-left-info h3,
.build-the-google-trusts-section.is-visible .build-the-google-trusts-head {
    animation: brandsTextIn .65s cubic-bezier(.22, 1, .36, 1) .1s forwards;
}
.service-built-brands-section.is-visible .service-built-brands-left-info ul li,
.build-the-google-trusts-section.is-visible .build-the-google-trusts-item {
    animation: brandsTextIn .55s ease forwards;
}
.service-built-brands-section.is-visible .service-built-brands-left-info ul li:nth-child(1) { animation-delay: .3s; }
.service-built-brands-section.is-visible .service-built-brands-left-info ul li:nth-child(2) { animation-delay: .42s; }
.service-built-brands-section.is-visible .service-built-brands-left-info ul li:nth-child(3) { animation-delay: .54s; }
.service-built-brands-section.is-visible .service-built-brands-left-info ul li:nth-child(4) { animation-delay: .66s; }
.service-built-brands-section.is-visible .service-built-brands-left-info ul li:nth-child(5) { animation-delay: .78s; }
.service-built-brands-section.is-visible .service-built-brands-left-info ul li:nth-child(6) { animation-delay: .85s; }

.build-the-google-trusts-section.is-visible .build-the-google-trusts-item:nth-child(1) { animation-delay: .3s; }
.build-the-google-trusts-section.is-visible .build-the-google-trusts-item:nth-child(2) { animation-delay: .42s; }

/* Right column: the two floating cards */
.built-brands-result-card {
    opacity: 0;
    transform: translateX(-35px) scale(0.97);
}
.built-brands-percentage-card {
    opacity: 0;
    transform: translateX(35px) translateY(-10px) scale(0.9);
}
.service-built-brands-section.is-visible .built-brands-result-card {
    animation: brandsCardIn .75s cubic-bezier(.22, 1, .36, 1) .15s forwards;
}
.service-built-brands-section.is-visible .built-brands-percentage-card {
    animation: brandsPercentCardIn .75s cubic-bezier(.22, 1, .36, 1) .45s forwards;
}

@keyframes brandsTextIn {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes brandsCardIn {
    from { opacity: 0; transform: translateX(-35px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes brandsPercentCardIn {
    from { opacity: 0; transform: translateX(35px) translateY(-10px) scale(0.9); }
    to   { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .service-built-brands-left-info h3,
    .service-built-brands-left-info ul li,
    .built-brands-result-card,
    .built-brands-percentage-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}
/** ALL Case Study Reveal Animations.**/

/** CASE STUDY FAQS SECTION CSS START **/
.cs-faq-wrap {
    max-width: 1000px;
    margin: 0 auto;
}
.cs-faq-wrap .service-cmn-heading .eyebrow {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 1.5px;
    color: #8E8E8E;
}
.cs-faq-wrap .service-cmn-heading h2 {
    font-weight: 400;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    font-size: 48px;
}
.cs-faq-wrap .service-cmn-heading.text-left h2 {
    margin: 0;
}
.cs-faq-wrap .service-cmn-heading p {
    font-size: 16px;
    line-height: 150%;
    color: #8E8E8E;
    max-width: 100%;
    letter-spacing: 0;
}
.cs-accordion-list {
    border-bottom: 1px solid #404040;
}
.cs-accordion-head h5 {
    list-style: none;
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
    color: #FFFFFF;
    margin: 0;
    align-items: center;
    gap: 10px;
}
.cs-accordion-head h5 span {
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
}
.cs-accordion-head h5 span:before, .cs-accordion-head h5 span:after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 14px;
    height: 2px;
    background: #fff;
}
.cs-accordion-head h5 span:after {
    transform: rotate(90deg);
    transition: transform .2s;
}
.is-faq.cs-accordion-head h5 span:after {
    transform: rotate(0);
}
.cs-accordion-body p {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #A3A3A3;
    letter-spacing: 0;
    max-width: 100%;
    margin: 0 0 20px;
}
.cs-accordion-body p:last-child {
    margin-bottom: 0;
}
/** CASE STUDY FAQS SECTION CSS END **/

/** CS BOTTOM REVIEWS SECTION CSS START **/
.reviews-thumb-slider .slick-list {
    padding: 0 480px !important;
}
.reviews-thumb-slider .slick-track {
    display: flex;
    justify-content: center;
    align-items: center;
}
.abt-review-item {
    margin: 0;
    padding: 0;
    filter: blur(5px);
    transition: 0.7s;
    transform: scale(0.8);
}
.slick-active .abt-review-item {
    filter: blur(0px);
    transform: scale(1);
}
.abt-review-item-info {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    max-width: 645px;
}
.abt-review-item-info p {
    margin: 0;
    font-weight: 400;
    font-size: 28px;
    line-height: 140%;
    text-align: center;
    color: #fff;
}
.abt-review-item-info p i {
    font-family: "Instrument Serif", serif;
    font-weight: normal;
}
.abt-review-item-info span {
    margin: 0 auto 15px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.abt-review-item-info span img {
    filter: brightness(0);
}
.slick-active .abt-review-item-info span img{
    filter: unset;
}
/** CS BOTTOM REVIEWS SECTION CSS END **/

/** CASE STUDY CONTACT SECTION CSS START **/
.cs-contact-section .submit-group .button {
    min-width: 248px;
}
.cs-contact-section .contact-wrap {
    flex-wrap: wrap;
}
.cs-contact-section .contact-left-col {
    width: 100%;
    text-align: center;
}
.cs-contact-section .contact-left-col .service-cmn-heading h2 {
    margin: 0 auto;
    font-size: 48px;
}
.cs-contact-section .service-cmn-heading p {
    color: #AAAAAA;
    max-width: 790px;
    margin-bottom: 20px;
}
.cs-contact-section .service-cmn-heading p:last-child {
    margin-bottom: 0px;
}
.cs-contact-section .contact-right-col {
    width: 768px;
    margin: 0 auto;
}
.cs-contact-section .contact-form-holder {
    background: #151515;
}
/** CASE STUDY CONTACT SECTION CSS END **/
/** GENERIC SCROLL REVEAL ENGINE START **
 * Drop `data-reveal` on any element for a fade-up entrance, or
 * `data-reveal="fade-left"` / `"fade-right"` / `"scale"` for a variant.
 * Drop `data-reveal-group` on a container and `data-reveal-item` on its
 * direct children for a staggered entrance (stagger order is set via the
 * --reveal-index custom property, assigned automatically by JS).
 * Both are triggered by adding `.is-revealed` on scroll-into-view
 * (see initScrollReveal() in site-animations.js).
 */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal="fade-left"] { transform: translateX(-32px); }
[data-reveal="fade-right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-revealed {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

[data-reveal-group] > [data-reveal-item] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--reveal-index, 0) * 90ms);
}
[data-reveal-group].is-revealed > [data-reveal-item] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-group] > [data-reveal-item] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
/** GENERIC SCROLL REVEAL ENGINE END **/

/** FAQ ACCORDION — SMOOTH HEIGHT TRANSITION (replaces jQuery slideToggle) START **
 * .cs-accordion-body now animates via max-height (set inline by JS to the
 * measured content height) instead of jQuery's display:none/block toggle.
 */
.cs-accordion-body {
    margin: 0;
    padding: 0 25px 0 0;
    max-height: 0;
    overflow: hidden;
    display: block;
    transition: max-height .35s cubic-bezier(.22, 1, .36, 1), padding-bottom .35s ease;
}
.cs-accordion-body-content {
    margin-bottom: 25px;
}
@media (prefers-reduced-motion: reduce) {
    .cs-accordion-body {
        transition: none;
    }
}
/** FAQ ACCORDION — SMOOTH HEIGHT TRANSITION END **/



/** RESPONSIVE CSS START **/
@media (max-width: 1679px) {
    .service-isolation-tab-right-stage {
        height: 100vh;
    }
}
@media (max-width: 1439px) {
    .websites-banner-service-section .search-visual {
        width: 536px;
    }
    .website-design-visual img:nth-child(1) {
        left: auto;
        width: 80%;
        position: relative;
    }
    .website-design-visual img:nth-child(2) {
        right: -30px;
        width: 230px;
        bottom: -60px;
    }
    .website-design-visual img:nth-child(3) {
        width: 158px;
        left: 60px;
        top: 90px;
    }
    .website-design-visual img:nth-child(4) {
        width: 147px;
        left: 80px;
        bottom: 90px;
    }
    .upgrade-web-lp-section .card-applications-hub img {
        max-width: 100%;
    }
    .hero.service-section {
        padding-top: 70px;
        padding-bottom: 20px;
    }
    .service-upgrade-way-section {
        padding: 15px 24px 25px;
        margin-top: 50px;
    }
    .card-applications-hub h3 {
        margin: 0 0 35px;
    }
    .the-way-floating-box {
        padding: 22px 12px;
    }
    .section.service-upgrade-section {
        padding-top: 40px;
    }
    .service-case-study-left-col {
        width: 37%;
        gap: 20px;
    }
    .service-case-study-right-col {
        width: 58%;
    }
    .service-case-study-img-card {
        width: 48%;
    }
    .service-case-study-stat-card {
        width: 52%;
        padding: 30px 25px;
    }
    .cs-stat-top {
        gap: 15px;
        margin-bottom: 20px;
    }
    .cs-stat-top .cs-stat-num {
        font-size: 45px;
    }
    .chart-area svg {
        width: 100%;
    }
    .service-case-study-left-col h3 {
        font-size: 38px;
    }
    .service-case-study-left-col p {
        font-size: 18px;
    }
    .service-isolation-tab-left-stack .word {
        font-size: 46px;
    }
    .pin-inner .site-shell {
        grid-template-columns: 400px 1fr;
        gap: 45px;
    }
    .build-the-google-trusts-left-col h2 {
        font-size: 42px;
        line-height: 54px;
    }
    .build-the-google-trusts-left-col, .build-the-google-trusts-wrap, .build-the-google-trusts-head {
        gap: 28px;
    }
    .build-the-google-trusts-left-col p {
        font-size: 18px;
    }
    .build-the-google-trusts-item h6 {
        font-size: 16px;
        line-height: 130%;
        margin-bottom: 7px;
    }
    .build-the-google-trusts-grid {
        grid-template-columns: 580px 1fr;
        gap: 40px;
    }
    .google-trusts-visual-left {
        width: 260px;
    }
    .google-trusts-connections {
        left: -60px;
    }
    .row-reverse-case-study .service-case-study-left-col {
        width: 58%;
    }
    .row-reverse-case-study .service-case-study-right-col {
        width: 37%;
    }
    .b2b-cs-result-card {
        padding: 30px 25px;
        gap: 30px;
        width: 100%;
    }
    .b2b-cs-result-head h4 {
        font-size: 22px;
        line-height: 28px;
    }
    .b2b-case-study-list {
        gap: 18px;
    }
    .b2b-cs-bar-chart svg {
        width: 100%;
    }
    .section.managed-process-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .managed-process-intro {
        column-gap: 70px;
        max-width: 930px;
        margin: 0 auto 50px;
    }
    .managed-process-intro h2 {
        font-size: 42px;
        line-height: 53px;
    }
    .managed-process-intro p {
        font-size: 16px;
    }
    .managed-process-item-body {
        padding-left: 28px;
    }
    .managed-process-item-heading {
        gap: 17px;
        margin-bottom: 12px;
    }
    .managed-process-item-body h4 {
        font-size: 22px;
        margin-bottom: 12px;
    }
    .section.service-built-brands-section {
        padding-bottom: 30px;
    }
    .section.explore-seo-cta-section {
        padding-bottom: 40px;
    }
    .section.service-organic-growth-case-study-section {
        padding-bottom: 50px;
    }
    .h-line {
        max-width: 904px;
    }
    .service-lexicon-indicators {
        max-width: 904px;
    }
    .web-lp-case-study-one .service-case-study-left-col {
        width: 40%;
    }
    .web-lp-case-study-one .service-case-study-right-col {
        width: 57%;
    }
    .web-lp-case-study-one .web-lp-case-study-one-right-col .web-lp-case-study-one-img-item,
    .web-lp-case-study-three .web-lp-case-study-one-right-col .web-lp-case-study-one-img-item {
        height: 100%;
    }
    .web-lp-case-study-one .web-lp-case-study-one-right-col .web-lp-case-study-one-img-item img,
    .web-lp-case-study-three .web-lp-case-study-one-right-col .web-lp-case-study-one-img-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .web-lp-case-study-two .row-reverse-case-study .service-case-study-left-col {
        width: 50%;
    }
    .web-lp-case-study-two .row-reverse-case-study .service-case-study-right-col {
        width: 45%;
        height: 380px;
    }
    .marketing-manager-case-study-section .service-case-study-left-col {
        width: 37%;
    }
    .marketing-manager-case-study-section .service-case-study-right-col {
        width: 59%;
    }
    .text-vertical p {
        gap: 10px;
        font-size: 14px;
    }
    .web-lp-case-study-three .service-case-study-left-col {
        width: 43%;
    }
    .web-lp-case-study-three .service-case-study-right-col {
        width: 53%;
    }
    .reviews-thumb-slider .slick-list {
        padding: 0 280px !important;
    }
    .web-build-perform-img-card {
        width: 44%;
    }
    .web-build-perform-section .li-how-works-process-wrap {
        width: 50%;
    }
    .marketing-manager-comparison-cards {
        gap: 28px;
    }
    .hero-grid {
        gap: 45px;
    }
    .section.service-case-study-section {
        padding: 80px 0;
    }
    .eblast-case-study-chart svg {
        width: 100%;
    }
    .websites-banner-service-section .search-visual {
        width: 100%;
    }
    .section.visitor-judges-section.black-bg .service-cmn-heading h2 {
        font-size: 48px;
    }
}

@media (max-width: 1279px) {
    .h-line {
        max-width: 844px;
    }
    .service-lexicon-indicators {
        max-width: 844px;
    }
    .card-applications-hub {
        width: 308px;
    }
    .service-case-study-stat-card.ebast-service-cs-small-heading .cs-stat-top .cs-stat-num {
        font-size: 23px;
    }
    .eblast-case-study-chart {
        right: 0;
    }
    .restaurant-visual {
        width: 100%;
        height: 370px;
    }
    .service-case-study-right-col {
        width: 53%;
    }
    .marketing-manager-case-study-section .service-case-study-left-col h3 {
        font-size: 38px;
    }
}

@media (max-width: 1199px) {
    .hero.service-section {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    .site-shell {
        padding-left: 20px;
        padding-right: 20px;
    }
    .hero-grid {
        display: flex;
        gap: 25px;
        grid-template-columns: repeat(2, 1fr);
        flex-wrap: wrap;
    }
    .hero-copy {
        width: 51%;
    }
    .websites-banner-service-section .search-visual {
        width: 45%;
    }
    .website-design-visual img:nth-child(1) {
        width: 83%;
    }
    .website-design-visual img:nth-child(2) {
        width: 170px;
    }
    .website-design-visual img:nth-child(3) {
        width: 133px;
    }
    .website-design-visual img:nth-child(4) {
        width: 127px;
        left: 50px;
        box-shadow: unset;
        bottom: 27px;
    }
    .reason-item .button-row .button {
        padding: 0 10px;
    }
    .ranking-card {
        width: 320px;
    }
    .ranking-head {
        height: 62px;
        padding: 0 20px;
        gap: 12px;
    }
    .ranking-head img {
        max-width: 25px;
    }
    .ranking-head strong {
        font-size: 15px;
    }
    .rank-line {
        height: auto;
        padding: 25px 20px 0 20px;
    }
    .rank-dots {
        padding: 0 20px;
        padding-top: 9px;
    }
    .hero-rank-chart {
        padding-left: 20px;
        padding-top: 8px;
        padding-bottom: 24px;
    }
    .hero-rank-chart svg {
        width: 100%;
    }
    .rank-line em svg {
        width: 25px;
        height: 20px;
    }
    .result-card {
        width: 230px;
        min-height: 295px;
        padding: 14px 15px;
    }
    .result-image {
        width: 70%;
        height: auto;
        margin: 12px 0;
    }
    .result-card h3 {
        font-size: 16px;
        font-weight: 500;
        line-height: 130%;
        margin: 0px 0 14px;
    }
    .skeleton {
        height: 8px;
        margin: 6px 0;
    }
    .result-card b {
        width: 60px;
        height: 12px;
        margin-top: 12px;
    }
    .eyebrow {
        font-size: 14px;
    }
    .hero-copy h1 {
        font-size: 45px;
        margin: 18px 0;
    }
    .lede {
        font-size: 16px;
    }
    .hero-copy .button-row {
        margin-top: 18px;
    }
    .section.national-seo-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    h2 {
        font-size: 42px;
        line-height: 50px;
    }
    .service-cmn-heading {
        margin-bottom: 38px;
    }
    .reason-item {
        padding: 15px;
        gap: 15px;
    }
    .reason-item h3 {
        font-size: 14px;
        line-height: 19px;
        margin-bottom: -5px;
    }
    .reason-item p {
        font-size: 14px;
    }
    .h-line {
        max-width: 758px;
    }
    .service-cmn-heading p {
        font-size: 18px;
    }
    .card-applications-hub {
        width: 330px;
        padding: 25px 20px 25px;
    }
    .the-way-floating-box {
        padding: 18px 10px;
        width: 115px;
    }
    .service-upgrade-title h4 {
        font-size: 14px;
        line-height: 16px;
        letter-spacing: 0.03em;
    }
    .the-way-floating-box .ic {
        width: 24px;
        height: 24px;
        margin: 0 auto 8px;
    }
    .card-applications-hub h3 {
        margin: 0 0 12px;
        font-size: 16px;
        line-height: 22px;
    }
    .service-upgrade-way-section {
        padding: 15px 0px 25px;
        margin-top: 30px;
    }
    .section.service-upgrade-section {
        padding-bottom: 40px;
    }
    .section.service-case-study-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .service-case-study-left-col p {
        font-size: 16px;
    }
    .service-case-study-left-col h3 {
        font-size: 32px;
    }
    .service-case-study-left-col {
        width: 42%;
    }
    .service-case-study-right-col {
        width: 55%;
    }
    .service-case-study-stat-card {
        padding: 25px 15px;
    }
    .cs-stat-top .cs-stat-num {
        font-size: 36px;
    }
    .cs-meta {
        gap: 12px;
        margin-top: 10px;
    }
    .cs-meta-labels {
        font-size: 10px;
    }
    .cs-meta-value {
        font-size: 12px;
    }
    .section.service-isolation-section {
        padding-top: 50px;
    }
    .service-cmn-heading h2 + p, .service-cmn-heading h3 + p, .service-cmn-heading h4 + p {
        margin-top: 15px;
    }
    .service-cmn-heading p {
        font-size: 16px;
    }
    .service-isolation-tab-left-stack .word {
        font-size: 36px;
    }
    .pin-inner .site-shell {
        grid-template-columns: 320px 1fr;
        gap: 35px;
    }
    .service-isolation-item {
        padding: 25px;
    }
    .service-isolation-item-head p {
        font-size: 16px;
        line-height: 140%;
    }
    .build-the-google-trusts-grid {
        grid-template-columns: 440px 1fr;
        gap: 20px;
    }
    .build-the-google-trusts-left-col h2 {
        font-size: 32px;
        line-height: 35px;
    }
    .build-the-google-trusts-left-col p {
        font-size: 16px;
    }
    .google-trusts-connections {
        left: -110px;
    }
    .section.build-the-google-trusts-section {
        padding-bottom: 50px;
    }
    .section.service-b2b-case-study-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .b2b-cs-stat p {
        font-size: 14px;
        line-height: 19px;
    }
    .b2b-stat-label {
        font-size: 14px;
        line-height: 19px;
    }
    .b2b-cs-result-card {
        padding: 25px 20px;
        gap: 25px;
        width: 100%;
    }
    .b2b-cs-result-head h4 {
        font-size: 20px;
        line-height: 26px;
    }
    .managed-process-intro h2 {
        font-size: 38px;
        line-height: 53px;
    }
    .managed-process-intro {
        column-gap: 20px;
        max-width: 880px;
        margin: 0 auto 30px;
    }
    .managed-process-item-body h4 {
        font-size: 20px;
    }
    .managed-process-item-body p {
        font-size: 14px;
    }
    .managed-process-item-heading h6 {
        font-size: 14px;
    }
    .section.service-organic-traffic-case-study-section {
        padding-top: 50px;
    }
    .service-built-brands-wrap {
        grid-template-columns: 1fr 428px;
        gap: 35px;
    }
    .service-built-brands-left-info h3 {
        font-size: 34px;
        line-height: 120%;
        margin-bottom: 26px;
    }
    .service-built-brands-left-info ul li {
        grid-template-columns: 30px 1fr;
        gap: 12px;
        margin-bottom: 15px;
    }
    .service-built-brands-left-info ul li:last-child {
        margin-bottom: 0px;
    }
    .service-built-brands-check-icon {
        width: 30px;
        height: 30px;
    }
    .built-brands-result-card {
        padding: 25px;
        gap: 18px;
    }
    .built-brands-result-label, .keyword-title {
        font-size: 13px;
        line-height: 17px;
        letter-spacing: 0.10px;
    }
    .built-brands-result-number {
        font-size: 41px;
        line-height: 51px;
    }
    .keyword-bar {
        height: 12px;
    }
    .trend-arrow svg {
        width: 23px;
        height: 18px;
    }
    .keyword-row {
        height: 12px;
    }
    .built-brands-chart svg {
        width: 100%;
    }
    .built-brands-percentage-card-inner {
        width: 150px;
    }
    .built-brands-percentage-card {
        width: 190px;
        height: auto;
        right: -30px;
    }
    .built-brands-percentage-card-inner svg {
        width: 172px;
        margin: 0 auto;
        height: 100%;
    }
    .percentage-number {
        right: -10px;
        top: 69px;
        font-size: 22px;
    }
    .percentage-dots {
        gap: 8px;
        width: 158px;
        margin: 20px auto;
    }
    .percentage-dots span {
        height: 8px;
    }
    .section.explore-seo-cta-section {
        padding-bottom: 40px;
        padding-top: 40px;
    }
    .section.service-organic-growth-case-study-section {
        padding-bottom: 40px;
        padding-top: 40px;
    }
    .section.case-study-faq-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .cs-faq-wrap {
        max-width: 870px;
        margin: 0 auto;
    }
    .cs-accordion-body {
        padding: 0;
    }
    .cs-contact-section .service-cmn-heading p {
        max-width: 600px;
    }
    .service-lexicon-indicators {
        max-width: 758px;
    }
    .web-build-perform-img-card {
        width: 42%;
    }
    .web-lp-case-study-two .row-reverse-case-study .service-case-study-right-col {
        height: 310px;
    }
    .marketing-manager-case-study-section .service-case-study-left-col h3 {
        font-size: 40px;
    }
    .marketing-manager-case-study-section .service-case-study-left-col p {
        font-size: 16px;
        line-height: 140%;
    }
    .marketing-manager-agency-body {
        padding: 18px;
        height: 284px;
    }
    .mm-agency-row {
        margin-bottom: 18px;
    }
    .pr-mm-profile h3 {
        font-size: 14px;
    }
    .pr-mm-profile p {
        font-size: 12px;
    }
    .connection-circle {
        width: 216px;
        height: 216px;
    }
    .marketing-manager-agency-body .tag {
        padding: 6px 7px;
        font-size: 11px;
    }
    .tag-replies {
        right: 44px;
        bottom: 47px;
    }
    .tag-deliverability {
        left: 26px;
        bottom: 59px;
    }
    .text-vertical p {
        gap: 10px;
        font-size: 12px;
        padding: 0px 15px;
        justify-content: center;
        text-align: left;
    }
    .text-vertical p img {
        max-width: 15px;
    }
    .service-built-brands-right-col {
        width: 44%;
    }
    .reviews-thumb-slider .slick-list {
        padding: 0 230px !important;
    }
    .cs-contact-section .contact-left-col .service-cmn-heading h2,
    .service-cmn-heading h2,
    .section.visitor-judges-section.black-bg .service-cmn-heading h2 {
        font-size: 42px;
    }
    .service-case-study-grid.row-reverse-case-study-scoial .service-case-study-left-col {
        width: 41%;
    }
    .restaurant-visual {
        width: 100%;
        height: auto;
    }
    .section.service-organic-growth-case-study-section.black-bg {
        padding: 75px 0;
    }
}
@media (max-width: 1023px) {
    .hero-copy {
        width: 100%;
    }
    .websites-banner-service-section .search-visual {
        width: 100%;
        max-width: 470px;
        margin: 20px auto 0;
    }
    .section.service-organic-growth-case-study-section.black-bg {
        padding: 64px 0;
    }
    .restaurant-visual-img {
        right: 0;
    }
    .website-design-visual img:nth-child(2) {
        right: -40px;
        width: 200px;
        bottom: -40px;
    }
    .website-design-visual img:nth-child(4) {
        width: 127px;
        left: 70px;
        box-shadow: unset;
        bottom: 37px;
    }
    .service-lexicon-indicators {
        display: none;
    }
    .reason-grid {
        grid-template-columns: 1fr 1fr;
        gap: 55px 35px;
        position: relative;
    }
    .reason-grid::before, .reason-grid::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }
    .reason-grid::before {
        top: -33px;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        background: #EBEBEB;
        margin: auto;
    }
    .reason-grid::after {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background: #EBEBEB;
        margin: auto;
    }
    .reason-item {
        box-shadow: 0 6px 12px rgba(20, 29, 45, 0.08), 0 4px 8px rgba(20, 29, 45, 0.035);
    }
    h2 {
        font-size: 32px;
        line-height: 38px;
    }
    .service-cmn-heading {
        margin-bottom: 30px;
    }
    .the-way-canvas.settled .the-way-floating-box {
        animation-name: none;
    }
    .section.service-upgrade-section {
        padding-bottom: 64px;
    }
    .service-upgrade-way-section {
        background-image: linear-gradient(to right, rgb(0 0 0 / 3%) 1px, #00000000 1px), linear-gradient(to bottom, rgb(0 0 0 / 3%) 1px, transparent 1px);
        background-size: 70px 70px;
        margin-top: 0;
        padding-top: 90px;
        padding-bottom: 70px;
    }
    .the-way-floating-box:nth-child(2) {
        margin-left: -30px;
    }
    .the-way-floating-box:nth-child(3) {
        margin-top: -50px;
    }
    .the-way-floating-box:nth-child(4) {
        margin-left: 50px;
    }
    .the-way-floating-box:nth-child(8) {
        margin-top: 40px;
    }
    .the-way-floating-box:nth-child(9) {
        margin-top: 50px;
    }
    .card-applications-hub {
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.01), 0px 17px 16px rgba(0, 0, 0, 0.03), 0px 14px 14px rgba(0, 0, 0, 0.05), 0px 6px 10px rgba(0, 0, 0, 0.06);
    }
    .build-the-google-trusts-grid {
        grid-template-columns: 1fr;
    }
    .row-reverse-case-study .service-case-study-left-col {
        width: 50%;
    }
    .row-reverse-case-study .service-case-study-right-col {
        width: 46%;
    }
    .managed-process-intro {
        column-gap: 10px;
        grid-template-columns: 350px 1fr;
    }
    .managed-process-intro h2 {
        font-size: 30px;
        line-height: 43px;
    }
    .managed-process-intro p {
        font-size: 14px;
    }
    .section.managed-process-section {
        padding-top: 20px;
    }
    .managed-process-list-wrap {
        grid-template-columns: repeat(2, 1fr);
        border-top: 0px solid #E7E7E7;
        padding-top: 0;
        gap: 0;
    }
    .managed-process-item {
        border-top: 1px solid #E7E7E7;
        padding: 30px 10px;
    }
    .managed-process-item-inner::before {
        top: -32px;
    }
    .managed-process-item-inner:hover::before {
        width: 103%;
    }
    .section.managed-process-section {
        padding-top: 20px;
        padding-bottom: 0px;
    }
    .service-built-brands-wrap {
        grid-template-columns: 1fr 300px;
        gap: 20px;
    }
    .built-brands-percentage-card {
        width: 150px;
        height: auto;
        right: -30px;
        top: -65px;
    }
    .built-brands-percentage-card-inner {
        width: 110px;
    }
    .built-brands-percentage-card-inner svg {
        width: 122px;
    }
    .percentage-number {
        right: 0;
        top: 48px;
        font-size: 19px;
        width: 100%;
        padding-left: 10px;
    }
    .percentage-dots {
        gap: 8px;
        width: 110px;
        margin: 15px auto;
    }
    .built-brands-result-label {
        max-width: 50%;
    }
    .service-built-brands-section.is-visible .keyword-row:nth-child(1) .keyword-bar {
        width: 102px;
    }
    .service-built-brands-section.is-visible .keyword-row:nth-child(2) .keyword-bar {
        width: 160px;
    }
    .service-built-brands-section.is-visible .keyword-row:nth-child(3) .keyword-bar {
        width: 110px;
    }
    .service-built-brands-section.is-visible .keyword-row:nth-child(4) .keyword-bar {
        width: 170px;
    }
    .section.service-built-brands-section {
        padding-top: 75px;
        padding-bottom: 20px;
    }
    .explore-seo-cta-wrap {
        padding: 20px 20px;
        grid-template-columns: 520px 1fr;
    }
    .explore-seo-cta-content h3 {
        font-size: 23px;
    }
    .explore-seo-cta-content p {
        font-size: 14px;
    }
    .abt-review-item-info p {
        font-size: 20px;
    }
    .reviews-thumb-slider .slick-list {
        padding: 0 160px !important;
    }
    .web-lp-case-study-one .service-case-study-right-col {
        padding: 14px;
        gap: 10px;
    }
    .web-lp-case-study-one-img-card {
        gap: 8px;
        grid-template-columns: 188px 1fr;
    }
    .web-lp-case-study-three .service-case-study-right-col {
        padding: 14px;
    }
    .web-lp-case-study-three .web-lp-case-study-one-img-card {
        grid-template-columns: 233px 1fr;
    }
    .visitor-judges-info {
        padding: 20px 15px;
        gap: 18px;
    }
    .visitor-judges-grid {
        gap: 12px;
    }
    .visitor-judges-info h3 {
        font-size: 18px;
    }
    .visitor-judges-reviews-section .visitor-judges-grid {
        gap: 18px;
    }
    .visitor-judges-reviews-section .visitor-judges-info p {
        font-size: 15px;
    }
    .web-lp-case-study-two .row-reverse-case-study .service-case-study-right-col {
        height: 230px;
    }
    .li-how-it-works__grid {
        gap: 35px;
    }
    .marketing-manager-case-study-section .service-case-study-left-col {
        width: 100%;
    }
    .marketing-manager-case-study-section .service-case-study-right-col {
        width: 100%;
        margin-top: 40px;
    }
    .service-built-brands-right-col {
        width: 46%;
    }
    .restaurant-visual {
        width: 100%;
        height: 369px;
    }
    .restaurant-card {
        width: 260px;
        height: auto;
        padding: 15px 20px 20px 20px;
    }
    .restaurant-hero-image {
        height: 84px;
    }
    .restaurant-thumb {
        width: 57px;
        height: 57px;
    }
    .restaurant-heading-line, .restaurant-middle-line, .restaurant-card-bottom-lines span {
        height: 8px;
    }
    .restaurant-avatar {
        width: 37px;
        height: 37px;
    }
    .restaurant-avatar-group {
        top: 100px;
        right: 2px;
    }
    .restaurant-btn {
        top: 175px;
        right: 10px;
    }
    .restaurant-btn .restaurant-reserve-btn {
        padding: 12px 15px;
        gap: 6px;
        font-size: 13px;
        line-height: 10px;
    }
    .restaurant-btn .restaurant-reserve-btn img {
        max-width: 12px;
    }
    .restaurant-conversion-card {
        width: 156px;
        height: 119px;
        left: 200px;
        bottom: 0px;
        padding: 17px 17px;
    }
    .restaurant-conversion-top .conversion-value {
        font-size: 29px;
    }
    .restaurant-conversion-label {
        font-size: 17px;
        line-height: 24px;
        margin-top: 7px;
    }
    .cs-faq-wrap .service-cmn-heading h2, .cs-contact-section .contact-left-col .service-cmn-heading h2, .service-cmn-heading h2, .section.visitor-judges-section.black-bg .service-cmn-heading h2 {
        font-size: 32px;
    }
}
@media (max-width: 767px) {
    .service-case-study-grid {
        row-gap: 30px;
    }
    .web-lp-case-study-one .service-case-study-left-col, .web-lp-case-study-two .row-reverse-case-study .service-case-study-left-col, .web-lp-case-study-three .service-case-study-left-col, .service-built-brands-left-col {
        width: 100%;
    }
    .web-lp-case-study-one .service-case-study-right-col, .web-lp-case-study-two .row-reverse-case-study .service-case-study-right-col, .web-lp-case-study-three .service-case-study-right-col {
        width: 100%;
    }
    .web-lp-case-study-one-img-card {
        grid-template-columns: 295px 1fr;
    }
    .web-lp-case-study-three .web-lp-case-study-one-img-card {
        grid-template-columns: 395px 1fr;
    }
    .service-built-brands-right-col {
        width: 50%;
        margin: 30px auto 0;
    }
    .section.service-built-brands-section {
        padding-top: 60px;
        padding-bottom: 20px;
    }
}
@media (max-width: 575px) {
    .hero-copy h1 {
        font-size: 36px;
    }
    .hero.service-section {
        padding-top: 40px;
        padding-bottom: 20px;
    }
    .hero-copy .button-row .button {
        width: 100%;
    }
    .section.national-seo-section {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    h2 {
        font-size: clamp(35px,4vw,58px);
        line-height: 1.1;
    }
    .reason-grid {
        grid-template-columns: 1fr;
        gap: 25px 35px;
    }
    .service-case-study-left-col {
        width: 100%;
    }
    .service-case-study-right-col {
        width: 100%;
    }
    .service-case-study-grid {
        row-gap: 30px;
    }
    .service-case-study-img-card, .service-case-study-stat-card, .row-reverse-case-study .service-case-study-left-col, .row-reverse-case-study .service-case-study-right-col {
        width: 100%;
    }
    .service-case-study-img-card img {
        width: 100%;
        height: auto;
    }
    .section.service-case-study-section {
        padding-bottom: 20px;
    }
    .google-trusts-visual-left {
        width: 100%;
        max-width: 290px;
        margin: 10px auto 0;
    }
    .build-the-google-trusts-grid {
        overflow: hidden;
    }
    .build-the-google-trusts-right-col {
        gap: 80px;
    }
    .google-trusts-visual-right {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px 10px;
    }
    .build-google-trusts-small-card {
        width: calc(33.33% - 7px);
        margin: 0;
    }
    .google-trusts-connections {
        left: 0;
        transform: rotate(-270deg);
    }
    .section.build-the-google-trusts-section {
        padding-bottom: 20px;
    }
    .service-built-brands-right-col {
        padding-right: 20px;
    }
    .built-brands-percentage-card {
        right: -20px;
        top: -35px;
    }
    .managed-process-intro {
        grid-template-columns: 1fr;
    }
    .managed-process-list-wrap {
        grid-template-columns: repeat(1, 1fr);
    }
    .managed-process-item {
        padding: 30px 0px;
    }
    .service-built-brands-wrap {
        grid-template-columns: 1fr;
        gap: 100px;
        overflow-x: hidden;
    }
    .section.service-built-brands-section {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    .explore-seo-cta-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .explore-seo-cta-btn {
        text-align: left;
    }
    .explore-seo-cta-btn .button {
        width: 100%;
    }
    .explore-seo-cta-content h3 {
        font-size: 28px;
    }
    .explore-seo-cta-content p {
        font-size: 16px;
    }
    .the-way-canvas-holder {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 10px;
    }
    .card-applications-hub {
        width: 100%;
        padding: 25px 20px 25px;
        max-width: 330px;
        margin: 0 auto;
        position: unset;
        transform: unset !important;
        opacity: 1 !important;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.01);
    }
    .the-way-floating-box {
        position: unset;
        opacity: 1 !important;
        padding: 18px 10px;
        width: calc(50% - 7px);
        transform: unset !important;
        opacity: 1 !important;
        margin: 0 !important;
    }
    .service-upgrade-way-section {
        margin-top: 0;
        padding-top: 5px;
        padding-bottom: 0;
    }
    .pin-inner .site-shell {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .pin-section {
        height: auto !important;
    }
    .pin-inner {
        position: unset;
        height: auto;
        background-size: 45px 45px;
    }
    .service-case-study-left-col .button-row .button {
        width: 100%;
    }
    .form-group.submit-group input.button {
        width: 100%;
    }
    html, body {
        overflow-x: hidden;
    }
    .pin-section.pin-disabled {
        height: auto !important;
    }
    .pin-disabled .pin-inner {
        position: static;
        height: auto;
        -webkit-mask-image: none;
        mask-image: none;
        padding-block: 40px;
    }
    .pin-disabled .service-isolation-tab-right-stage {
        height: auto;
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .pin-disabled .track {
        transform: none !important;
    }
    .pin-disabled .spacer {
        display: none;
    }
    .pin-disabled .service-isolation-tab-left-stack {
        max-width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-bottom: 8px;
    }
    .pin-disabled .service-isolation-tab-left-stack::-webkit-scrollbar {
        display: none;
    }
    .service-isolation-tab-left {
        overflow: hidden;
    }
    .pin-disabled .service-isolation-tab-left-stack .word {
        flex: 0 0 auto;
        width: auto;
        margin-bottom: 0;
        white-space: nowrap;
        scroll-snap-align: start;
        transition: background .25s ease, color .25s ease;
        margin-right: 20px;
        font-size: 30px;
        opacity: 0.40;
    }
    .pin-disabled .service-isolation-tab-left-stack .word.active {
        opacity: 1;
    }
    .pin-disabled .service-isolation-item {
        display: none;
        opacity: 1;
        transform: none;
    }
    .pin-disabled .service-isolation-item.active {
        display: block;
        animation: pinTabFadeIn .35s ease;
    }
    @keyframes pinTabFadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .pin-disabled .progress-rail {
        display: none;
    }
    @media (prefers-reduced-motion: reduce) {
        .pin-disabled .service-isolation-item.active {
            animation: none;
        }
    }
    .service-isolation-item {
        padding: 0;
    }
    .service-isolation-item-head {
        padding: 15px 15px 0;
        margin-bottom: 15px;
    }
    .service-isolation-item-img-card {
        padding-bottom: 15px;
    }
    .cs-accordion-head h5 span {
        width: 28px;
        height: 28px;
    }
    .cs-accordion-head h5 span:before, .cs-accordion-head h5 span:after {
        top: 11px;
        left: 7px;
        right: 7px;
    }
    .section.case-study-faq-section {
        padding-bottom: 0;
    }
    .reason-grid::before, .reason-grid::after {
        display: none;
    }
    .reviews-thumb-slider .slick-list {
        padding: 0 30px !important;
    }
    .web-lp-case-study-one-img-card {
        grid-template-columns: 148px 1fr;
    }
    .visitor-judges-grid {
        gap: 22px;
        grid-template-columns: repeat(1, 1fr);
    }
    .visitor-judges-reviews-section .visitor-judges-grid {
        gap: 28px;
    }
    .web-lp-case-study-two .row-reverse-case-study .service-case-study-right-col {
        height: 210px;
        padding: 14px;
    }
    .web-build-perform-img-card {
        width: 100%;
    }
    .web-build-perform-section .li-how-works-process-wrap {
        width: 100%;
    }
    .section.marketing-manager-case-study-section.cs-reveal.cs-active {
        padding-top: 10px;
    }
    .marketing-manager-case-study-section .service-case-study-left-col h3 {
        font-size: 34px;
    }
    .marketing-manager-comparison-cards {
        gap: 28px;
        grid-template-columns: 1fr;
    }
    .web-lp-case-study-three .web-lp-case-study-one-img-card {
        grid-template-columns: 199px 1fr;
    }
    .service-built-brands-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .service-built-brands-right-col {
        padding-right: 0;
        width: 100%;
    }
    .restaurant-conversion-card {
        left: 160px;
    }
    .marketing-manager-case-study-section .service-case-study-right-col {
        margin-top: 10px;
    }
    .service-built-brands-wrap {
        overflow: hidden;
    }
    .explore-landing-cta-section .explore-seo-cta-wrap {
        gap: 30px;
        padding: 0;
    }
    .explore-landing-cta-section .explore-seo-cta-content p {
        font-size: 17px;
    }
    .explore-landing-cta-section .explore-seo-cta-btn {
        width: 100%;
    }
    .cs-contact-section .contact-left-col .service-cmn-heading h2 {
        font-size: 34px;
    }
    .cs-contact-section .contact-left-col .service-cmn-heading h2 br {
        display: block;
    }
    .cs-contact-section .service-cmn-heading p {
        margin-bottom: 10px;
    }
    .website-design-visual img:nth-child(2) {
        bottom: 0px;
    }
    .website-design-visual img:nth-child(3) {
        left: 0px;
    }
    .website-design-visual img:nth-child(4) {
        width: 137px;
        left: 10px;
        bottom: 87px;
    }
    .upgrade-web-lp-section .card-applications-hub img {
        max-width: 100%;
    }
    .service-cmn-heading h2 br {
        display: none;
    }
    .cs-contact-section .contact-left-col .service-cmn-heading h2 br {
        display: none;
    }
    .website-design-visual img:nth-child(1) {
        width: 84%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .service-case-study-grid.row-reverse-case-study-scoial .service-case-study-left-col {
        width: 100%;
    }
    .restaurant-visual {
        width: 100%;
        height: auto;
    }
    .websites-banner-service-section .search-visual {
        height: 230px;
    }
    .website-design-visual img:nth-child(2) {
        right: -20px;
        width: 42%;
        bottom: -30px;
    }




     .marketing-manager-case-study-section .service-case-study-left-col {
        width: 100%;
        text-align: center;
    }
    .cs-faq-wrap .service-cmn-heading h2, .cs-contact-section .contact-left-col .service-cmn-heading h2, .service-cmn-heading h2, .section.visitor-judges-section.black-bg .service-cmn-heading h2 {
        font-size: 28px;
        line-height: 120%;
    }
    .service-cmn-heading p {
        font-size: 14px;
        line-height: 140%;
    }
    .the-way-floating-box {
        padding: 5px 10px;
        width: max-content;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .the-way-floating-box .ic {
        margin: 0;
        width: 21px;
        height: 21px;
    }
    .the-way-canvas-holder {
        gap: 8px;
        padding-bottom: 20px;
    }
    .upgrade-web-lp-section .card-applications-hub {
        order: 1;
        margin-top: 24px;
        max-width: 100%;
    }
    .service-upgrade-title h4 {
        font-size: 13px;
    }
    .the-way-floating-box .ic img {
        display: block;
    }
    .site-shell {
        padding-left: 15px;
        padding-right: 15px;
    }
    .service-upgrade-way-section::before {
        opacity: 0;
        visibility: hidden;
    }
    .service-upgrade-way-section {
        background-image: none;
    }
    .marketing-manager-case-study-section .service-case-study-left-col p {
        font-size: 14px;
        line-height: 140%;
    }
    .marketing-manager-case-study-section .service-case-study-left-col h3 {
        font-size: 28px;
    }
    .upgrade-web-lp-section .card-applications-hub img {
        max-width: 100%;
    }
    .service-upgrade-title h4 br {
        display: none;
    }
    .service-upgrade-hubSpot-section .card-applications-hub {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        order: 1;
        margin-top: 24px;
    }
    .card-applications-hub {
        width: 100%;
        max-width: 100%;
        order: 1;
        margin-top: 24px;
    }
    .section.service-upgrade-section {
        padding-bottom: 0;
    }

    .section.service-upgrade-section {
        padding-bottom: 22px;
    }
    .service-upgrade-way-section .site-shell {
        padding: 0;
    }
    .card-applications-hub {
        display: none;
    }
    .the-way-canvas-holder {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 0 30px;
        border-top: 1px solid rgb(0 0 0 / 5%);
        border-bottom: 1px solid rgb(0 0 0 / 5%);
    }
    .the-way-floating-box {
        width: unset;
        border: 1px solid rgb(0 0 0 / 5%);
        border-radius: 0px;
        margin-top: -1px !important;
        margin-bottom: -1px !important;
        margin-right: -1px !important;
        flex-direction: column;
        padding: 14px 9px;
        gap: 3px;
        opacity: 1 !important;
    }
    .the-way-canvas-holder:nth-child(4n + 1) .the-way-floating-box::before {
        content: "";
        position: absolute;
        bottom: 0px;
        width: 150vw;
        height: 1px;
        left: -100%;
        background: rgb(0 0 0 / 2%);
        margin-left: -20vw;
    }
    .service-upgrade-title {
        width: 100%;
        text-align: center;
    }
    .service-upgrade-title h4 {
        letter-spacing: 0;
    }
    .the-way-canvas.settled .the-way-floating-box {
        animation-name: none !important;
        animation-timing-function: unset !important;
        animation-iteration-count: unset !important;
        animation-duration: unset !important;
        animation-delay: unset !important;
        --x: unset !important;
        --y: unset !important;
        transition-delay: unset !important;
        --float-duration: unset !important;
        --float-delay: unset !important;
        --float-y: unset !important;
    }
}
/** RESPONSIVE CSS END **/