/* =========================================================
   BUSINESS WEBSITE DEVELOPMENT — BASE
   ========================================================= */

.wn-business-website {
    background: #ffffff;
    color: #101827;
}

.wn-business-website .wn-wrap {
    width: min(100% - 64px, 1250px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .wn-business-website .wn-wrap {
        width: min(100% - 36px, 1250px);
    }
}

/* =========================================================
   BUSINESS WEBSITE DEVELOPMENT — HERO
   ========================================================= */

.wn-bwd-hero {
    position: relative;
    overflow: hidden;
    padding: 125px 0 120px;
    background: #07111f;
    color: #fff;
}

.wn-bwd-hero::after {
    content: "";
    position: absolute;
    right: -260px;
    top: -330px;
    width: 850px;
    height: 850px;
    border: 1px solid rgba(35,116,255,.07);
    border-radius: 50%;
    box-shadow:
        0 0 0 120px rgba(35,116,255,.012),
        0 0 0 240px rgba(35,116,255,.008);
    pointer-events: none;
}

.wn-bwd-hero .wn-wrap {
    position: relative;
    z-index: 1;
}

.wn-bwd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr);
    gap: 90px;
    align-items: center;
}


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

.wn-bwd-hero-content {
    min-width: 0;
}

.wn-bwd-kicker {
    display: block;
    margin-bottom: 28px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-hero h1 {
    width: 100%;
    max-width: 720px;
    margin: 0;
    color: #fff;
    font-size: clamp(52px, 5.3vw, 78px);
    line-height: 1.01;
    letter-spacing: -.052em;
    font-weight: 650;
}

.wn-bwd-hero-lead {
    width: 100%;
    max-width: 680px;
    margin: 38px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 19px;
    line-height: 1.72;
}

.wn-bwd-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 40px;
}

.wn-bwd-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px;
    min-width: 245px;
    min-height: 64px;
    padding: 0 21px;
    border: 1px solid #2374ff;
    background: #2374ff;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition:
        transform .2s ease,
        background-color .2s ease;
}

.wn-bwd-button:hover {
    background: #1766ee;
    color: #fff;
    transform: translateY(-2px);
}

.wn-bwd-button span:last-child {
    font-size: 18px;
    transition: transform .2s ease;
}

.wn-bwd-button:hover span:last-child {
    transform: translate(3px, -3px);
}

.wn-bwd-text-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    border-bottom: 1px solid rgba(112,184,255,.25);
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    transition:
        color .2s ease,
        border-color .2s ease;
}

.wn-bwd-text-link:hover {
    border-color: #70b8ff;
    color: #fff;
}


/* =========================================================
   BUSINESS WEBSITE VISUAL
   ========================================================= */

.wn-bwd-hero-visual {
    position: relative;
    min-width: 0;
    padding: 34px 0 48px;
}

.wn-bwd-browser {
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 1px solid rgba(112,184,255,.18);
    background: #0c1828;
    box-shadow: 0 28px 70px rgba(0,0,0,.22);
}

.wn-bwd-browser-bar {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 100px;
    align-items: center;
    min-height: 55px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #101d2e;
}

.wn-bwd-browser-dots {
    display: flex;
    gap: 6px;
}

.wn-bwd-browser-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
}

.wn-bwd-browser-dots i:first-child {
    background: #2374ff;
}

.wn-bwd-browser-bar > span {
    justify-self: center;
    color: rgba(255,255,255,.52);
    font-size: 10px;
    font-weight: 650;
}

.wn-bwd-browser-status {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7ee0ad;
    font-size: 9px;
    font-weight: 700;
}

.wn-bwd-browser-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #52d995;
}


/* BODY */

.wn-bwd-browser-body {
    padding: 27px 30px 31px;
}

.wn-bwd-site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.wn-bwd-site-nav > strong {
    color: #fff;
    font-size: 11px;
    letter-spacing: .08em;
}

.wn-bwd-site-nav > div {
    display: flex;
    gap: 19px;
}

.wn-bwd-site-nav span {
    color: rgba(255,255,255,.42);
    font-size: 8px;
}


/* MESSAGE */

.wn-bwd-site-message {
    padding: 38px 0 34px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.wn-bwd-site-message small {
    display: block;
    margin-bottom: 13px;
    color: #70b8ff;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-site-message > strong {
    display: block;
    max-width: 430px;
    color: #fff;
    font-size: clamp(25px, 2.4vw, 35px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 650;
}

.wn-bwd-site-message > span {
    display: block;
    max-width: 430px;
    margin-top: 17px;
    color: rgba(255,255,255,.47);
    font-size: 11px;
    line-height: 1.6;
}


/* POSITIONING → SERVICES → PROOF */

.wn-bwd-site-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto
        minmax(0, 1fr) auto
        minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 29px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.wn-bwd-site-flow > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(112,184,255,.12);
    background: rgba(35,116,255,.025);
}

.wn-bwd-site-flow > div > span {
    display: block;
    margin-bottom: 13px;
    color: rgba(112,184,255,.65);
    font-size: 8px;
    font-weight: 750;
}

.wn-bwd-site-flow small {
    display: block;
    margin-bottom: 6px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-site-flow strong {
    display: block;
    color: rgba(255,255,255,.82);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 650;
}

.wn-bwd-site-flow > i {
    color: rgba(112,184,255,.6);
    font-size: 13px;
    font-style: normal;
}


/* SEARCH / CONVERSION */

.wn-bwd-site-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding-top: 27px;
}

.wn-bwd-site-bottom > div {
    min-width: 0;
}

.wn-bwd-site-bottom small {
    display: block;
    margin-bottom: 8px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-site-bottom span {
    display: block;
    max-width: 220px;
    color: rgba(255,255,255,.46);
    font-size: 10px;
    line-height: 1.55;
}


/* FLOATING SIGNAL */

.wn-bwd-hero-signal {
    position: absolute;
    right: -28px;
    bottom: 10px;
    width: 255px;
    padding: 17px 19px;
    border: 1px solid rgba(112,184,255,.22);
    background: #102033;
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

.wn-bwd-hero-signal span {
    display: block;
    margin-bottom: 8px;
    color: #70b8ff;
    font-size: 8px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-hero-signal strong {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
}


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

@media (max-width: 1100px) {

    .wn-bwd-hero-grid {
        grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
        gap: 55px;
    }

    .wn-bwd-hero h1 {
        font-size: clamp(50px, 5vw, 68px);
    }
}


@media (max-width: 900px) {

    .wn-bwd-hero-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .wn-bwd-hero-content {
        max-width: 760px;
    }

    .wn-bwd-hero-visual {
        max-width: 760px;
    }
}


@media (max-width: 650px) {

    .wn-bwd-hero {
        padding: 90px 0 85px;
    }

    .wn-bwd-hero h1 {
        font-size: 48px;
    }

    .wn-bwd-hero-lead {
        margin-top: 28px;
        font-size: 17px;
    }

    .wn-bwd-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .wn-bwd-button {
        width: 100%;
        max-width: 340px;
    }

    .wn-bwd-browser-body {
        padding: 23px 20px 26px;
    }

    .wn-bwd-site-nav > div {
        display: none;
    }

    .wn-bwd-site-flow {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .wn-bwd-site-flow > i {
        justify-self: center;
        transform: rotate(90deg);
    }

    .wn-bwd-site-bottom {
        grid-template-columns: 1fr;
    }

    .wn-bwd-hero-signal {
        position: relative;
        right: auto;
        bottom: auto;
        width: calc(100% - 30px);
        margin: -12px 0 0 30px;
    }
}


@media (max-width: 460px) {

    .wn-bwd-hero h1 {
        font-size: 42px;
    }

    .wn-bwd-browser-bar {
        grid-template-columns: 70px 1fr 70px;
    }
}
/* =========================================================
   01 — MORE THAN AN ONLINE BROCHURE
   ========================================================= */

.wn-bwd-brochure {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: #ffffff;
    color: #101827;
}

.wn-bwd-brochure::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 72px;
    background: #dbe3ec;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-bwd-brochure-head {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-section-number {
    display: block;
    margin-bottom: 28px;
    color: #2374ff;
    font-size: 58px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: -.05em;
}

.wn-bwd-section-kicker {
    display: block;
    margin-bottom: 22px;
    color: #2374ff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.wn-bwd-brochure h2 {
    max-width: 670px;
    margin: 0;
    color: #0c1625;
    font-size: clamp(42px, 4.3vw, 64px);
    line-height: 1.04;
    font-weight: 650;
    letter-spacing: -.045em;
}

.wn-bwd-brochure-intro {
    padding-bottom: 5px;
}

.wn-bwd-brochure-intro p {
    max-width: 570px;
    margin: 0;
    color: #596777;
    font-size: 17px;
    line-height: 1.75;
}

.wn-bwd-brochure-intro .wn-bwd-large-copy {
    margin-bottom: 22px;
    color: #182333;
    font-size: 23px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.015em;
}


/* =========================================================
   VISITOR JOURNEY
   ========================================================= */

.wn-bwd-journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 92px;
    border-top: 1px solid #dce3eb;
    border-bottom: 1px solid #dce3eb;
}

.wn-bwd-journey-line {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    height: 1px;
    background: #dce3eb;
    pointer-events: none;
}

.wn-bwd-journey-step {
    position: relative;
    min-width: 0;
    padding: 27px 32px 38px;
    border-right: 1px solid #dce3eb;
}

.wn-bwd-journey-step:first-of-type {
    padding-left: 0;
}

.wn-bwd-journey-step:last-child {
    padding-right: 0;
    border-right: 0;
}

.wn-bwd-journey-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    margin-bottom: 27px;
}

.wn-bwd-journey-number {
    color: #8492a2;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
}

.wn-bwd-journey-top i {
    display: block;
    width: 11px;
    height: 11px;
    margin-right: -6px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #2374ff;
    box-shadow: 0 0 0 1px #2374ff;
}

.wn-bwd-journey-step:last-child .wn-bwd-journey-top i {
    margin-right: 0;
}

.wn-bwd-journey-label {
    display: block;
    margin-bottom: 15px;
    color: #2374ff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-journey-step h3 {
    min-height: 70px;
    margin: 0 0 20px;
    color: #101a29;
    font-size: 24px;
    line-height: 1.28;
    font-weight: 650;
    letter-spacing: -.025em;
}

.wn-bwd-journey-step p {
    max-width: 245px;
    margin: 0;
    color: #5c6978;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   DIRECT ANSWER
   ========================================================= */

.wn-bwd-direct-answer {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 72px;
    padding: 34px 38px;
    border-left: 3px solid #2374ff;
    background: #f4f7fa;
}

.wn-bwd-direct-question {
    color: #182333;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 750;
    letter-spacing: .09em;
}

.wn-bwd-direct-answer p {
    max-width: 760px;
    margin: 0;
    color: #3f4e5e;
    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   PRINCIPLE
   ========================================================= */

.wn-bwd-brochure-principle {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 72px;
    padding-top: 36px;
    border-top: 1px solid #dce3eb;
}

.wn-bwd-brochure-principle > span {
    color: #758393;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .14em;
}

.wn-bwd-brochure-principle p {
    max-width: 790px;
    margin: 0;
    color: #7a8795;
    font-size: 26px;
    line-height: 1.5;
    letter-spacing: -.02em;
}

.wn-bwd-brochure-principle strong {
    color: #101a29;
    font-weight: 600;
}


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

@media (max-width: 1050px) {

    .wn-bwd-brochure-head {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-brochure-intro p {
        max-width: 720px;
    }

    .wn-bwd-journey {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-bwd-journey-line {
        display: none;
    }

    .wn-bwd-journey-step {
        padding: 32px;
        border-bottom: 1px solid #dce3eb;
    }

    .wn-bwd-journey-step:first-of-type {
        padding-left: 32px;
    }

    .wn-bwd-journey-step:nth-child(3) {
        border-right: 0;
    }

    .wn-bwd-journey-step:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .wn-bwd-journey-top i {
        margin-right: 0;
    }

    .wn-bwd-journey-step p {
        max-width: 100%;
    }

    .wn-bwd-direct-answer,
    .wn-bwd-brochure-principle {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 45px;
    }
}


@media (max-width: 700px) {

    .wn-bwd-brochure {
        padding: 85px 0 90px;
    }

    .wn-bwd-brochure::before {
        display: none;
    }

    .wn-bwd-section-number {
        margin-bottom: 22px;
        font-size: 48px;
    }

    .wn-bwd-brochure h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .wn-bwd-brochure-intro .wn-bwd-large-copy {
        font-size: 21px;
    }

    .wn-bwd-journey {
        grid-template-columns: 1fr;
        margin-top: 65px;
    }

    .wn-bwd-journey-step,
    .wn-bwd-journey-step:first-of-type,
    .wn-bwd-journey-step:last-child {
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid #dce3eb;
    }

    .wn-bwd-journey-step:last-child {
        border-bottom: 0;
    }

    .wn-bwd-journey-step h3 {
        min-height: 0;
        font-size: 25px;
    }

    .wn-bwd-direct-answer,
    .wn-bwd-brochure-principle {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wn-bwd-direct-answer {
        margin-top: 55px;
        padding: 28px 25px;
    }

    .wn-bwd-brochure-principle {
        margin-top: 55px;
    }

    .wn-bwd-brochure-principle p {
        font-size: 22px;
    }
}
/* =========================================================
   02 — BUILT AROUND THE BUSINESS
   ========================================================= */

.wn-bwd-business {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: #07111f;
    color: #ffffff;
}

.wn-bwd-business::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -220px;
    top: -250px;
    border: 1px solid rgba(112, 184, 255, .09);
    border-radius: 50%;
    box-shadow:
        0 0 0 80px rgba(35, 116, 255, .025),
        0 0 0 160px rgba(35, 116, 255, .018);
    pointer-events: none;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-bwd-business-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(400px, .72fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-business .wn-bwd-section-number {
    color: #70b8ff;
}

.wn-bwd-business .wn-bwd-section-kicker {
    color: #70b8ff;
}

.wn-bwd-business h2 {
    max-width: 650px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: 1.03;
    font-weight: 650;
    letter-spacing: -.045em;
}

.wn-bwd-business-statement {
    padding-bottom: 4px;
}

.wn-bwd-business-statement > span {
    display: block;
    margin-bottom: 20px;
    color: #70b8ff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .14em;
}

.wn-bwd-business-statement p {
    max-width: 570px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-size: 20px;
    line-height: 1.7;
}


/* =========================================================
   BUSINESS → STRUCTURE → WEBSITE
   ========================================================= */

.wn-bwd-architecture {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        150px
        minmax(430px, 1.05fr);
    gap: 42px;
    align-items: stretch;
    margin-top: 90px;
    padding-top: 55px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}


/* =========================================================
   SOURCE — BUSINESS
   ========================================================= */

.wn-bwd-architecture-source {
    min-width: 0;
}

.wn-bwd-architecture-label {
    display: block;
    margin-bottom: 20px;
    color: #70b8ff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .14em;
}

.wn-bwd-architecture-source > h3 {
    max-width: 450px;
    margin: 0;
    color: #ffffff;
    font-size: 31px;
    line-height: 1.22;
    font-weight: 600;
    letter-spacing: -.025em;
}

.wn-bwd-source-list {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.wn-bwd-source-list > div {
    display: grid;
    grid-template-columns: 38px 105px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 23px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.wn-bwd-source-list > div > span {
    padding-top: 3px;
    color: #70b8ff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
}

.wn-bwd-source-list strong {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 650;
}

.wn-bwd-source-list p {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   FLOW
   ========================================================= */

.wn-bwd-architecture-flow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 50px 0;
    text-align: center;
}

.wn-bwd-architecture-flow > span {
    color: #70b8ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-flow-line {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 22px 0;
}

.wn-bwd-flow-line i {
    display: block;
    flex: 1;
    height: 1px;
    background: rgba(112, 184, 255, .45);
}

.wn-bwd-flow-line b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(112, 184, 255, .38);
    border-radius: 50%;
    color: #70b8ff;
    font-size: 17px;
    font-weight: 400;
}

.wn-bwd-architecture-flow small {
    display: block;
    max-width: 140px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .46);
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   OUTPUT — WEBSITE
   ========================================================= */

.wn-bwd-architecture-output {
    min-width: 0;
}

.wn-bwd-output-browser {
    overflow: hidden;
    border: 1px solid rgba(112, 184, 255, .25);
    background: #0b1a2c;
    box-shadow: 0 28px 65px rgba(0, 0, 0, .24);
}

.wn-bwd-output-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 0 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #0d1e31;
}

.wn-bwd-output-bar i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4b6178;
}

.wn-bwd-output-bar i:first-child {
    background: #2374ff;
}

.wn-bwd-output-bar span {
    margin-left: auto;
    color: rgba(255, 255, 255, .48);
    font-size: 11px;
    line-height: 1;
}

.wn-bwd-output-body {
    padding: 30px;
}

.wn-bwd-output-home {
    padding: 26px 27px;
    border: 1px solid rgba(112, 184, 255, .2);
    background: rgba(35, 116, 255, .07);
}

.wn-bwd-output-body small {
    display: block;
    margin-bottom: 9px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-output-home strong {
    display: block;
    margin-bottom: 9px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-bwd-output-home span {
    display: block;
    max-width: 350px;
    color: rgba(255, 255, 255, .57);
    font-size: 14px;
    line-height: 1.65;
}

.wn-bwd-output-path {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.wn-bwd-output-path::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -15px;
    width: 1px;
    height: 15px;
    background: rgba(112, 184, 255, .24);
}

.wn-bwd-output-path > div {
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .11);
    background: rgba(255, 255, 255, .025);
}

.wn-bwd-output-path strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
}

.wn-bwd-output-note {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 25px;
    margin-top: 23px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.wn-bwd-output-note > span {
    color: #70b8ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-output-note p {
    max-width: 390px;
    margin: 0;
    color: rgba(255, 255, 255, .63);
    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   BOTTOM PRINCIPLE + DIRECT ANSWER
   ========================================================= */

.wn-bwd-business-bottom {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, .82fr);
    gap: 90px;
    margin-top: 82px;
    padding-top: 42px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.wn-bwd-business-principle > span,
.wn-bwd-business-answer > span {
    display: block;
    margin-bottom: 18px;
    color: #70b8ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-business-principle p {
    max-width: 670px;
    margin: 0;
    color: rgba(255, 255, 255, .52);
    font-size: 22px;
    line-height: 1.58;
    letter-spacing: -.015em;
}

.wn-bwd-business-principle strong {
    color: #ffffff;
    font-weight: 600;
}

.wn-bwd-business-answer {
    padding-left: 30px;
    border-left: 2px solid #2374ff;
}

.wn-bwd-business-answer p {
    max-width: 510px;
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 16px;
    line-height: 1.75;
}


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

@media (max-width: 1100px) {

    .wn-bwd-business-head {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-business-statement p {
        max-width: 720px;
    }

    .wn-bwd-architecture {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-bwd-architecture-flow {
        display: grid;
        grid-template-columns: auto minmax(100px, 1fr) minmax(200px, .8fr);
        gap: 20px;
        align-items: center;
        padding: 0;
        text-align: left;
    }

    .wn-bwd-flow-line {
        margin: 0;
    }

    .wn-bwd-architecture-flow small {
        max-width: none;
        margin: 0;
    }

    .wn-bwd-output-browser {
        max-width: 720px;
    }

    .wn-bwd-output-note {
        max-width: 720px;
    }

    .wn-bwd-business-bottom {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-bwd-business-answer {
        max-width: 720px;
    }
}


@media (max-width: 700px) {

    .wn-bwd-business {
        padding: 85px 0 90px;
    }

    .wn-bwd-business::before {
        display: none;
    }

    .wn-bwd-business h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .wn-bwd-business-statement p {
        font-size: 18px;
    }

    .wn-bwd-architecture {
        margin-top: 65px;
        padding-top: 42px;
    }

    .wn-bwd-architecture-source > h3 {
        font-size: 27px;
    }

    .wn-bwd-source-list > div {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 8px 15px;
    }

    .wn-bwd-source-list p {
        grid-column: 2;
    }

    .wn-bwd-architecture-flow {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 12px 0;
    }

    .wn-bwd-flow-line {
        max-width: 190px;
    }

    .wn-bwd-output-body {
        padding: 20px;
    }

    .wn-bwd-output-path {
        grid-template-columns: 1fr;
    }

    .wn-bwd-output-path::before {
        display: none;
    }

    .wn-bwd-output-note {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wn-bwd-business-bottom {
        margin-top: 60px;
    }

    .wn-bwd-business-principle p {
        font-size: 20px;
    }

    .wn-bwd-business-answer {
        padding-left: 20px;
    }
}
/* =========================================================
   03 — WHAT WE BUILD
   ========================================================= */

.wn-bwd-build {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: #f5f8fc;
    color: #101827;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-bwd-build-head {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .72fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-build h2 {
    max-width: 680px;
    margin: 0;
    color: #0c1625;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: 1.03;
    font-weight: 650;
    letter-spacing: -.045em;
}

.wn-bwd-build-intro {
    padding-bottom: 4px;
}

.wn-bwd-build-intro p {
    max-width: 570px;
    margin: 0;
    color: #596777;
    font-size: 17px;
    line-height: 1.75;
}

.wn-bwd-build-intro .wn-bwd-large-copy {
    margin-bottom: 22px;
    color: #182333;
    font-size: 23px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.015em;
}


/* =========================================================
   WEBSITE TYPES INDEX
   ========================================================= */

.wn-bwd-build-index {
    display: grid;
    grid-template-columns: minmax(370px, .82fr) minmax(0, 1.18fr);
    gap: 70px;
    align-items: start;
    margin-top: 90px;
    padding-top: 55px;
    border-top: 1px solid #d8e0e9;
}


/* =========================================================
   FEATURED — CORPORATE & COMPANY WEBSITES
   ========================================================= */

.wn-bwd-build-featured {
    position: sticky;
    top: 40px;
    min-width: 0;
    padding: 35px;
    border: 1px solid #d4dee8;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(17, 40, 67, .07);
}

.wn-bwd-build-featured-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e6ed;
}

.wn-bwd-build-featured-top > span {
    color: #2374ff;
    font-size: 14px;
    line-height: 1;
    font-weight: 750;
}

.wn-bwd-build-featured-top small {
    color: #748292;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-build-featured-copy {
    padding: 34px 0 30px;
}

.wn-bwd-build-featured-copy h3 {
    max-width: 420px;
    margin: 0 0 22px;
    color: #101a29;
    font-size: 37px;
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: -.035em;
}

.wn-bwd-build-featured-copy p {
    max-width: 430px;
    margin: 0;
    color: #596777;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   FEATURED WEBSITE MAP
   ========================================================= */

.wn-bwd-build-featured-visual {
    padding: 22px;
    border: 1px solid #d8e2eb;
    background: #f5f8fb;
}

.wn-bwd-build-page,
.wn-bwd-build-page-row > div {
    min-width: 0;
    border: 1px solid #d5e0e9;
    background: #ffffff;
}

.wn-bwd-build-page {
    padding: 21px;
    border-left: 2px solid #2374ff;
}

.wn-bwd-build-featured-visual span {
    display: block;
    margin-bottom: 8px;
    color: #2374ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-build-featured-visual strong {
    display: block;
    color: #172333;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 650;
}

.wn-bwd-build-page i {
    display: block;
    width: 65%;
    height: 4px;
    margin-top: 15px;
    background: #e2e8ee;
}

.wn-bwd-build-page-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.wn-bwd-build-page-row > div {
    padding: 17px;
}

.wn-bwd-build-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.wn-bwd-build-tags span {
    padding: 8px 11px;
    border: 1px solid #d8e1ea;
    color: #637181;
    font-size: 11px;
    line-height: 1;
}


/* =========================================================
   WEBSITE TYPE LIST
   ========================================================= */

.wn-bwd-build-list {
    min-width: 0;
    border-top: 1px solid #d8e0e9;
}

.wn-bwd-build-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 155px;
    gap: 28px;
    align-items: start;
    padding: 32px 0 35px;
    border-bottom: 1px solid #d8e0e9;
}

.wn-bwd-build-item-number {
    padding-top: 4px;
    color: #2374ff;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 750;
}

.wn-bwd-build-item-copy {
    min-width: 0;
}

.wn-bwd-build-item-copy > span {
    display: block;
    margin-bottom: 11px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-build-item-copy h3 {
    max-width: 520px;
    margin: 0 0 13px;
    color: #142030;
    font-size: 23px;
    line-height: 1.35;
    font-weight: 650;
    letter-spacing: -.02em;
}

.wn-bwd-build-item-copy p {
    max-width: 540px;
    margin: 0;
    color: #637080;
    font-size: 15px;
    line-height: 1.7;
}

.wn-bwd-build-item-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 28px;
}

.wn-bwd-build-item-meta span {
    padding-bottom: 7px;
    border-bottom: 1px solid #e0e6ec;
    color: #7b8896;
    font-size: 11px;
    line-height: 1.45;
}


/* =========================================================
   E-COMMERCE BOUNDARY
   ========================================================= */

.wn-bwd-build-boundary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 70px;
    align-items: center;
    margin-top: 78px;
    padding: 37px 40px;
    background: #0b1a2c;
    color: #ffffff;
}

.wn-bwd-build-boundary > div {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.wn-bwd-build-boundary > div > span {
    color: #70b8ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-build-boundary p {
    max-width: 590px;
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    line-height: 1.7;
}

.wn-bwd-build-boundary > a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-width: 270px;
    padding: 17px 19px;
    border: 1px solid rgba(112, 184, 255, .4);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
    transition:
        border-color .18s ease,
        background-color .18s ease;
}

.wn-bwd-build-boundary > a:hover {
    border-color: #70b8ff;
    background: rgba(35, 116, 255, .08);
}


/* =========================================================
   DIRECT ANSWER
   ========================================================= */

.wn-bwd-build-answer {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 70px;
    padding-top: 38px;
    border-top: 1px solid #d8e0e9;
}

.wn-bwd-build-answer > span {
    color: #2374ff;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-build-answer p {
    max-width: 770px;
    margin: 0;
    color: #3f4e5e;
    font-size: 18px;
    line-height: 1.72;
}


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

@media (max-width: 1100px) {

    .wn-bwd-build-head {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-build-intro p {
        max-width: 720px;
    }

    .wn-bwd-build-index {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .wn-bwd-build-featured {
        position: static;
        max-width: 720px;
    }

    .wn-bwd-build-item {
        grid-template-columns: 48px minmax(0, 1fr) 150px;
    }

    .wn-bwd-build-boundary {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wn-bwd-build-boundary > a {
        min-width: 0;
        max-width: 330px;
    }

    .wn-bwd-build-answer {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 45px;
    }
}


@media (max-width: 760px) {

    .wn-bwd-build {
        padding: 85px 0 90px;
    }

    .wn-bwd-build h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .wn-bwd-build-intro .wn-bwd-large-copy {
        font-size: 21px;
    }

    .wn-bwd-build-index {
        margin-top: 65px;
        padding-top: 42px;
    }

    .wn-bwd-build-featured {
        padding: 25px;
    }

    .wn-bwd-build-featured-copy h3 {
        font-size: 31px;
    }

    .wn-bwd-build-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 15px;
    }

    .wn-bwd-build-item-meta {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 7px;
        padding-top: 5px;
    }

    .wn-bwd-build-item-meta span {
        padding: 6px 9px;
        border: 1px solid #dce3ea;
    }

    .wn-bwd-build-boundary {
        margin-top: 60px;
        padding: 28px 25px;
    }

    .wn-bwd-build-boundary > div {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-bwd-build-answer {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 55px;
    }
}


@media (max-width: 480px) {

    .wn-bwd-build-page-row {
        grid-template-columns: 1fr;
    }

    .wn-bwd-build-featured {
        padding: 21px;
    }

    .wn-bwd-build-featured-visual {
        padding: 15px;
    }
}

/* =========================================================
   04 — STRUCTURE, CONTENT & USER JOURNEYS
   ========================================================= */

.wn-bwd-structure {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: #ffffff;
    color: #101827;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-bwd-structure-head {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .72fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-structure h2 {
    max-width: 700px;
    margin: 0;
    color: #0c1625;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: 1.03;
    font-weight: 650;
    letter-spacing: -.045em;
}

.wn-bwd-structure-intro {
    padding-bottom: 4px;
}

.wn-bwd-structure-intro p {
    max-width: 570px;
    margin: 0;
    color: #596777;
    font-size: 17px;
    line-height: 1.75;
}

.wn-bwd-structure-intro .wn-bwd-large-copy {
    margin-bottom: 22px;
    color: #182333;
    font-size: 23px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.015em;
}


/* =========================================================
   INFORMATION ARCHITECTURE
   ========================================================= */

.wn-bwd-ia {
    margin-top: 90px;
    padding: 52px;
    border: 1px solid #d8e1ea;
    background: #f5f8fb;
}

.wn-bwd-ia-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .62fr);
    gap: 80px;
    align-items: end;
    padding-bottom: 38px;
    border-bottom: 1px solid #d8e1ea;
}

.wn-bwd-ia-top > div > span {
    display: block;
    margin-bottom: 15px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-ia-top h3 {
    max-width: 650px;
    margin: 0;
    color: #101a29;
    font-size: 31px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.025em;
}

.wn-bwd-ia-top > p {
    max-width: 440px;
    margin: 0;
    color: #627080;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   SITEMAP
   ========================================================= */

.wn-bwd-sitemap {
    position: relative;
    padding-top: 48px;
}

.wn-bwd-sitemap-home {
    width: 280px;
    margin: 0 auto;
    padding: 20px 22px;
    border: 1px solid #b9cce0;
    border-top: 3px solid #2374ff;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 12px 28px rgba(20, 44, 70, .06);
}

.wn-bwd-sitemap-home span,
.wn-bwd-sitemap-node span,
.wn-bwd-sitemap-detail > span {
    display: block;
    margin-bottom: 7px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-sitemap-home strong {
    display: block;
    color: #101a29;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.wn-bwd-sitemap-home small {
    display: block;
    margin-top: 6px;
    color: #73808f;
    font-size: 12px;
    line-height: 1.45;
}

.wn-bwd-sitemap-connector {
    position: relative;
    width: calc(80% - 40px);
    height: 50px;
    margin: 0 auto;
}

.wn-bwd-sitemap-connector::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 25px;
    background: #b9c8d7;
}

.wn-bwd-sitemap-connector i {
    position: absolute;
    left: 0;
    right: 0;
    top: 25px;
    height: 1px;
    background: #b9c8d7;
}

.wn-bwd-sitemap-level {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
}

.wn-bwd-sitemap-node {
    position: relative;
    min-width: 0;
    min-height: 125px;
    padding: 20px;
    border: 1px solid #d4dee8;
    background: #ffffff;
}

.wn-bwd-sitemap-node::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -26px;
    width: 1px;
    height: 25px;
    background: #b9c8d7;
}

.wn-bwd-sitemap-node strong {
    display: block;
    color: #172333;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 650;
}

.wn-bwd-sitemap-node small {
    display: block;
    margin-top: 8px;
    color: #778493;
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   SERVICE DETAIL BRANCH
   ========================================================= */

.wn-bwd-sitemap-detail {
    position: relative;
    max-width: 760px;
    margin: 42px auto 0;
    padding: 30px;
    border: 1px solid #d4dee8;
    background: #ffffff;
}

.wn-bwd-sitemap-detail::before {
    content: "";
    position: absolute;
    top: -43px;
    left: 10%;
    width: 1px;
    height: 42px;
    background: #b9c8d7;
}

.wn-bwd-sitemap-detail-pages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.wn-bwd-sitemap-detail-pages > div {
    min-width: 0;
    padding: 15px;
    border: 1px solid #e0e6ec;
    background: #f8fafc;
}

.wn-bwd-sitemap-detail-pages i {
    display: block;
    width: 17px;
    height: 3px;
    margin-bottom: 10px;
    background: #2374ff;
}

.wn-bwd-sitemap-detail-pages strong {
    color: #263343;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
}

.wn-bwd-sitemap-detail > p {
    max-width: 630px;
    margin: 22px 0 0;
    color: #697686;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   USER JOURNEYS
   ========================================================= */

.wn-bwd-journeys {
    display: grid;
    grid-template-columns: minmax(300px, .65fr) minmax(0, 1.35fr);
    gap: 85px;
    align-items: start;
    margin-top: 95px;
    padding-top: 55px;
    border-top: 1px solid #d8e0e9;
}

.wn-bwd-journeys-head > span {
    display: block;
    margin-bottom: 17px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-journeys-head h3 {
    max-width: 420px;
    margin: 0;
    color: #101a29;
    font-size: 34px;
    line-height: 1.18;
    font-weight: 650;
    letter-spacing: -.03em;
}

.wn-bwd-journeys-head p {
    max-width: 390px;
    margin: 23px 0 0;
    color: #647181;
    font-size: 16px;
    line-height: 1.7;
}

.wn-bwd-journey-paths {
    border-top: 1px solid #d8e0e9;
}

.wn-bwd-path {
    padding: 27px 0 29px;
    border-bottom: 1px solid #d8e0e9;
}

.wn-bwd-path-person {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.wn-bwd-path-person > span {
    padding-top: 3px;
    color: #2374ff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
}

.wn-bwd-path-person small {
    display: block;
    margin-bottom: 6px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-path-person strong {
    display: block;
    color: #1b2736;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 650;
}

.wn-bwd-path-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0 54px;
}

.wn-bwd-path-flow span,
.wn-bwd-path-flow strong {
    padding: 8px 11px;
    border: 1px solid #d8e1ea;
    background: #f7f9fb;
    color: #566474;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 550;
}

.wn-bwd-path-flow strong {
    border-color: #a9c9f7;
    background: #edf5ff;
    color: #1764d8;
    font-weight: 700;
}

.wn-bwd-path-flow i {
    color: #8d9aaa;
    font-size: 13px;
    font-style: normal;
}


/* =========================================================
   CONTENT HAS A JOB TOO
   ========================================================= */

.wn-bwd-content-role {
    display: grid;
    grid-template-columns: 180px minmax(280px, .75fr) minmax(0, 1.25fr);
    gap: 55px;
    align-items: start;
    margin-top: 90px;
    padding: 45px 0;
    border-top: 1px solid #d8e0e9;
    border-bottom: 1px solid #d8e0e9;
}

.wn-bwd-content-role-label span {
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-content-role-main p {
    margin: 0;
    color: #7a8794;
    font-size: 24px;
    line-height: 1.52;
    letter-spacing: -.02em;
}

.wn-bwd-content-role-main strong {
    display: block;
    margin-top: 4px;
    color: #101a29;
    font-weight: 650;
}

.wn-bwd-content-role-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.wn-bwd-content-role-points > div {
    min-width: 0;
}

.wn-bwd-content-role-points span {
    display: block;
    margin-bottom: 15px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 750;
}

.wn-bwd-content-role-points strong {
    display: block;
    margin-bottom: 8px;
    color: #172333;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 650;
}

.wn-bwd-content-role-points p {
    margin: 0;
    color: #697686;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   DIRECT ANSWER
   ========================================================= */

.wn-bwd-structure-answer {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 70px;
    padding: 34px 38px;
    border-left: 3px solid #2374ff;
    background: #f4f7fa;
}

.wn-bwd-structure-answer > span {
    color: #182333;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 750;
    letter-spacing: .09em;
}

.wn-bwd-structure-answer p {
    max-width: 770px;
    margin: 0;
    color: #3f4e5e;
    font-size: 18px;
    line-height: 1.72;
}


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

@media (max-width: 1100px) {

    .wn-bwd-structure-head,
    .wn-bwd-ia-top {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-structure-intro p,
    .wn-bwd-ia-top > p {
        max-width: 720px;
    }

    .wn-bwd-sitemap-level {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wn-bwd-sitemap-connector,
    .wn-bwd-sitemap-node::before,
    .wn-bwd-sitemap-detail::before {
        display: none;
    }

    .wn-bwd-sitemap-level {
        margin-top: 30px;
    }

    .wn-bwd-journeys {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-bwd-content-role {
        grid-template-columns: 160px minmax(0, 1fr);
    }

    .wn-bwd-content-role-points {
        grid-column: 1 / -1;
    }

    .wn-bwd-structure-answer {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 45px;
    }
}


@media (max-width: 760px) {

    .wn-bwd-structure {
        padding: 85px 0 90px;
    }

    .wn-bwd-structure h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .wn-bwd-structure-intro .wn-bwd-large-copy {
        font-size: 21px;
    }

    .wn-bwd-ia {
        margin-top: 65px;
        padding: 28px 24px;
    }

    .wn-bwd-ia-top h3 {
        font-size: 27px;
    }

    .wn-bwd-sitemap-home {
        width: 100%;
        max-width: 300px;
    }

    .wn-bwd-sitemap-level {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wn-bwd-sitemap-node {
        min-height: 0;
    }

    .wn-bwd-sitemap-detail {
        padding: 22px;
    }

    .wn-bwd-sitemap-detail-pages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-bwd-journeys {
        margin-top: 70px;
    }

    .wn-bwd-path-flow {
        margin-left: 0;
    }

    .wn-bwd-content-role {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-top: 70px;
    }

    .wn-bwd-content-role-points {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .wn-bwd-content-role-main p {
        font-size: 22px;
    }

    .wn-bwd-structure-answer {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 55px;
        padding: 28px 25px;
    }
}


@media (max-width: 480px) {

    .wn-bwd-sitemap-detail-pages {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   05 — SEO FROM THE FOUNDATION
   ========================================================= */

.wn-bwd-seo {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: #07111f;
    color: #ffffff;
}

.wn-bwd-seo::before {
    content: "";
    position: absolute;
    left: -280px;
    top: 280px;
    width: 620px;
    height: 620px;
    border: 1px solid rgba(112, 184, 255, .07);
    border-radius: 50%;
    box-shadow:
        0 0 0 90px rgba(35, 116, 255, .018),
        0 0 0 180px rgba(35, 116, 255, .012);
    pointer-events: none;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-bwd-seo-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .72fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-seo .wn-bwd-section-number,
.wn-bwd-seo .wn-bwd-section-kicker {
    color: #70b8ff;
}

.wn-bwd-seo h2 {
    max-width: 700px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: 1.03;
    font-weight: 650;
    letter-spacing: -.045em;
}

.wn-bwd-seo-intro {
    padding-bottom: 4px;
}

.wn-bwd-seo-intro p {
    max-width: 570px;
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 17px;
    line-height: 1.75;
}

.wn-bwd-seo-intro .wn-bwd-large-copy {
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .88);
    font-size: 23px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.015em;
}


/* =========================================================
   SEO SYSTEM
   ========================================================= */

.wn-bwd-seo-system {
    position: relative;
    z-index: 2;
    margin-top: 90px;
    padding: 48px;
    border: 1px solid rgba(112, 184, 255, .18);
    background: #0a1829;
}

.wn-bwd-seo-system-top {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 55px;
    align-items: start;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.wn-bwd-seo-system-top > span {
    color: #70b8ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-seo-system-top p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 18px;
    line-height: 1.65;
}


/* =========================================================
   SEARCH INTENT → STRUCTURE → FOCUSED PAGES
   ========================================================= */

.wn-bwd-seo-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        46px
        minmax(0, 1fr)
        46px
        minmax(0, 1fr);
    gap: 15px;
    align-items: stretch;
    padding: 45px 0;
}

.wn-bwd-seo-step {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

.wn-bwd-seo-step-number {
    padding-top: 3px;
    color: #70b8ff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
}

.wn-bwd-seo-step small {
    display: block;
    margin-bottom: 10px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-seo-step strong {
    display: block;
    margin-bottom: 13px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 650;
}

.wn-bwd-seo-step p {
    margin: 0;
    color: rgba(255, 255, 255, .54);
    font-size: 14px;
    line-height: 1.7;
}

.wn-bwd-seo-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #70b8ff;
    font-size: 18px;
}


/* =========================================================
   WEBSITE FOUNDATION
   ========================================================= */

.wn-bwd-seo-foundation {
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) minmax(0, .95fr);
    gap: 55px;
    padding-top: 45px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.wn-bwd-seo-foundation-core {
    min-width: 0;
    padding: 32px;
    border: 1px solid rgba(112, 184, 255, .2);
    background: #0d1e31;
}

.wn-bwd-seo-foundation-core > span {
    display: block;
    margin-bottom: 13px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-seo-foundation-core > strong {
    display: block;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -.02em;
}


/* =========================================================
   PAGE MAP
   ========================================================= */

.wn-bwd-seo-page-map {
    margin-top: 32px;
}

.wn-bwd-seo-page-main {
    max-width: 310px;
    margin: 0 auto;
    padding: 18px 20px;
    border: 1px solid rgba(112, 184, 255, .34);
    background: rgba(35, 116, 255, .08);
    text-align: center;
}

.wn-bwd-seo-page-map small {
    display: block;
    margin-bottom: 7px;
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-seo-page-map span {
    display: block;
    color: rgba(255, 255, 255, .87);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}

.wn-bwd-seo-page-map > i {
    display: block;
    width: 1px;
    height: 27px;
    margin: 0 auto;
    background: rgba(112, 184, 255, .32);
}

.wn-bwd-seo-page-children {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 19px;
}

.wn-bwd-seo-page-children::before {
    content: "";
    position: absolute;
    left: 16.66%;
    right: 16.66%;
    top: 0;
    height: 1px;
    background: rgba(112, 184, 255, .32);
}

.wn-bwd-seo-page-children > div {
    position: relative;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .025);
}

.wn-bwd-seo-page-children > div::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -20px;
    width: 1px;
    height: 19px;
    background: rgba(112, 184, 255, .32);
}


/* =========================================================
   CONTENT / INTERNAL LINKS / TECHNICAL
   ========================================================= */

.wn-bwd-seo-foundation-signals {
    border-top: 1px solid rgba(255, 255, 255, .11);
}

.wn-bwd-seo-foundation-signals > div {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 15px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.wn-bwd-seo-foundation-signals > div > span {
    padding-top: 2px;
    color: #70b8ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
}

.wn-bwd-seo-foundation-signals small {
    display: block;
    margin-bottom: 7px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-seo-foundation-signals strong {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 650;
}

.wn-bwd-seo-foundation-signals p {
    grid-column: 2;
    margin: -2px 0 0;
    color: rgba(255, 255, 255, .54);
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   BUILT-IN SEO vs ONGOING SEO
   ========================================================= */

.wn-bwd-seo-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: 1px;
    margin-top: 75px;
    border: 1px solid rgba(112, 184, 255, .18);
    background: rgba(112, 184, 255, .18);
}

.wn-bwd-seo-included,
.wn-bwd-seo-ongoing {
    min-width: 0;
    padding: 42px;
    background: #0a1829;
}

.wn-bwd-seo-split-head > span,
.wn-bwd-seo-ongoing > span {
    display: block;
    margin-bottom: 15px;
    color: #70b8ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-seo-split h3 {
    margin: 0;
    color: #ffffff;
    font-size: 29px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.025em;
}


/* =========================================================
   BUILT-IN CHECKS
   ========================================================= */

.wn-bwd-seo-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin-top: 31px;
    border-top: 1px solid rgba(255, 255, 255, .11);
}

.wn-bwd-seo-checks > div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.wn-bwd-seo-checks span {
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
}

.wn-bwd-seo-checks strong {
    color: rgba(255, 255, 255, .76);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 550;
}


/* =========================================================
   ONGOING
   ========================================================= */

.wn-bwd-seo-ongoing {
    background: #0d1e31;
}

.wn-bwd-seo-ongoing > p {
    max-width: 500px;
    margin: 25px 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: 16px;
    line-height: 1.72;
}

.wn-bwd-seo-ongoing-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 30px;
}

.wn-bwd-seo-ongoing-flow span {
    padding: 8px 10px;
    border: 1px solid rgba(112, 184, 255, .24);
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    line-height: 1.3;
}

.wn-bwd-seo-ongoing-flow i {
    color: #70b8ff;
    font-size: 12px;
    font-style: normal;
}

.wn-bwd-seo-ongoing > small {
    display: block;
    max-width: 470px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .43);
    font-size: 12px;
    line-height: 1.65;
}


/* =========================================================
   DIRECT ANSWER
   ========================================================= */

.wn-bwd-seo-answer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 70px;
    padding: 34px 38px;
    border-left: 3px solid #2374ff;
    background: rgba(255, 255, 255, .045);
}

.wn-bwd-seo-answer > span {
    color: #70b8ff;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-seo-answer p {
    max-width: 770px;
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 18px;
    line-height: 1.72;
}


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

@media (max-width: 1100px) {

    .wn-bwd-seo-head {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-seo-intro p {
        max-width: 720px;
    }

    .wn-bwd-seo-flow {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .wn-bwd-seo-arrow {
        justify-content: flex-start;
        padding-left: 50px;
        transform: rotate(90deg);
    }

    .wn-bwd-seo-foundation {
        grid-template-columns: 1fr;
    }

    .wn-bwd-seo-split {
        grid-template-columns: 1fr;
    }

    .wn-bwd-seo-answer {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 45px;
    }
}


@media (max-width: 760px) {

    .wn-bwd-seo {
        padding: 85px 0 90px;
    }

    .wn-bwd-seo::before {
        display: none;
    }

    .wn-bwd-seo h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .wn-bwd-seo-intro .wn-bwd-large-copy {
        font-size: 21px;
    }

    .wn-bwd-seo-system {
        margin-top: 65px;
        padding: 28px 24px;
    }

    .wn-bwd-seo-system-top {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-bwd-seo-foundation-core {
        padding: 24px;
    }

    .wn-bwd-seo-foundation-core > strong {
        font-size: 23px;
    }

    .wn-bwd-seo-page-children {
        grid-template-columns: 1fr;
        padding-top: 0;
    }

    .wn-bwd-seo-page-children::before,
    .wn-bwd-seo-page-children > div::before {
        display: none;
    }

    .wn-bwd-seo-page-map > i {
        height: 18px;
    }

    .wn-bwd-seo-included,
    .wn-bwd-seo-ongoing {
        padding: 28px 24px;
    }

    .wn-bwd-seo-checks {
        grid-template-columns: 1fr;
    }

    .wn-bwd-seo-answer {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 55px;
        padding: 28px 25px;
    }
}
/* =========================================================
   05 — SEO SIGNALS TEXT FIX
   ========================================================= */

.wn-bwd-seo-foundation-signals > div {
    grid-template-columns: 45px minmax(0, 1fr);
}

.wn-bwd-seo-foundation-signals > div > span {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.wn-bwd-seo-foundation-signals small,
.wn-bwd-seo-foundation-signals strong,
.wn-bwd-seo-foundation-signals p {
    grid-column: 2;
}

.wn-bwd-seo-foundation-signals small {
    grid-row: 1;
}

.wn-bwd-seo-foundation-signals strong {
    grid-row: 2;
    max-width: 100%;
}

.wn-bwd-seo-foundation-signals p {
    grid-row: 3;
    margin: 0;
}
/* =========================================================
   06 — CMS, INTEGRATIONS & TECHNOLOGY
   ========================================================= */

.wn-bwd-technology {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: #f5f8fc;
    color: #101827;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-bwd-technology-head {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .72fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-technology h2 {
    max-width: 700px;
    margin: 0;
    color: #0c1625;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: 1.03;
    font-weight: 650;
    letter-spacing: -.045em;
}

.wn-bwd-technology-intro {
    padding-bottom: 4px;
}

.wn-bwd-technology-intro p {
    max-width: 570px;
    margin: 0;
    color: #596777;
    font-size: 17px;
    line-height: 1.75;
}

.wn-bwd-technology-intro .wn-bwd-large-copy {
    margin-bottom: 22px;
    color: #182333;
    font-size: 23px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.015em;
}


/* =========================================================
   WEBSITE ECOSYSTEM
   ========================================================= */

.wn-bwd-ecosystem {
    margin-top: 90px;
    padding: 48px;
    border: 1px solid #d7e0e9;
    background: #ffffff;
}

.wn-bwd-ecosystem-top {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 55px;
    align-items: start;
    padding-bottom: 32px;
    border-bottom: 1px solid #dce3ea;
}

.wn-bwd-ecosystem-top > span {
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-ecosystem-top p {
    max-width: 650px;
    margin: 0;
    color: #596777;
    font-size: 18px;
    line-height: 1.65;
}


/* =========================================================
   ECOSYSTEM MAP
   ========================================================= */

.wn-bwd-ecosystem-map {
    position: relative;
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(360px, 1.1fr) minmax(250px, .8fr);
    grid-template-areas:
        "cms core forms"
        "systems core api";
    gap: 28px 55px;
    align-items: stretch;
    margin-top: 48px;
}

.wn-bwd-node-cms {
    grid-area: cms;
}

.wn-bwd-node-forms {
    grid-area: forms;
}

.wn-bwd-node-systems {
    grid-area: systems;
}

.wn-bwd-node-api {
    grid-area: api;
}


/* =========================================================
   ECOSYSTEM NODES
   ========================================================= */

.wn-bwd-ecosystem-node {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 27px;
    border: 1px solid #d8e1ea;
    background: #f7f9fc;
}

.wn-bwd-ecosystem-node > span {
    display: block;
    margin-bottom: 22px;
    color: #2374ff;
    font-size: 12px;
    line-height: 1;
    font-weight: 750;
}

.wn-bwd-ecosystem-node small {
    display: block;
    margin-bottom: 10px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-ecosystem-node strong {
    display: block;
    color: #142030;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 650;
    letter-spacing: -.015em;
}

.wn-bwd-ecosystem-node p {
    margin: 17px 0 0;
    color: #657282;
    font-size: 14px;
    line-height: 1.68;
}


/* =========================================================
   CORE WEBSITE
   ========================================================= */

.wn-bwd-ecosystem-core {
    grid-area: core;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.wn-bwd-ecosystem-browser {
    overflow: hidden;
    border: 1px solid #9fbae0;
    background: #0b1a2c;
    box-shadow: 0 24px 55px rgba(18, 43, 70, .14);
}

.wn-bwd-ecosystem-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 45px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: #0d1e31;
}

.wn-bwd-ecosystem-browser-bar i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #52677d;
}

.wn-bwd-ecosystem-browser-bar i:first-child {
    background: #2374ff;
}

.wn-bwd-ecosystem-browser-bar span {
    margin-left: auto;
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
}

.wn-bwd-ecosystem-browser-body {
    padding: 36px 32px;
}

.wn-bwd-ecosystem-browser-body > small {
    display: block;
    margin-bottom: 13px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-ecosystem-browser-body > strong {
    display: block;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.025em;
}

.wn-bwd-ecosystem-browser-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    padding-top: 23px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.wn-bwd-ecosystem-browser-flow span {
    padding: 7px 9px;
    border: 1px solid rgba(112, 184, 255, .22);
    color: rgba(255, 255, 255, .7);
    font-size: 11px;
    line-height: 1.3;
}

.wn-bwd-ecosystem-browser-flow i {
    color: #70b8ff;
    font-size: 11px;
    font-style: normal;
}

.wn-bwd-ecosystem-core-label {
    display: block;
    margin-top: 16px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .11em;
    text-align: center;
}


/* =========================================================
   CONNECTOR LINES
   ========================================================= */

.wn-bwd-ecosystem-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.wn-bwd-ecosystem-lines i {
    position: absolute;
    display: block;
    width: 55px;
    height: 1px;
    background: #a9bfd8;
}

.wn-bwd-line-top-left {
    left: calc(33.333% - 27px);
    top: 24%;
}

.wn-bwd-line-top-right {
    right: calc(33.333% - 27px);
    top: 24%;
}

.wn-bwd-line-bottom-left {
    left: calc(33.333% - 27px);
    bottom: 24%;
}

.wn-bwd-line-bottom-right {
    right: calc(33.333% - 27px);
    bottom: 24%;
}


/* =========================================================
   MEASUREMENT & CONSENT
   ========================================================= */

.wn-bwd-ecosystem-bottom {
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
    gap: 70px;
    align-items: center;
    margin-top: 42px;
    padding: 29px 32px;
    border-top: 1px solid #d8e1ea;
    border-bottom: 1px solid #d8e1ea;
}

.wn-bwd-ecosystem-bottom > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
}

.wn-bwd-ecosystem-bottom > div > span {
    color: #2374ff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
}

.wn-bwd-ecosystem-bottom small {
    display: block;
    margin-bottom: 7px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-ecosystem-bottom strong {
    display: block;
    color: #172333;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 650;
}

.wn-bwd-ecosystem-bottom > p {
    max-width: 650px;
    margin: 0;
    color: #637181;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   CHOOSING THE TECHNOLOGY
   ========================================================= */

.wn-bwd-tech-choice {
    display: grid;
    grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr);
    gap: 85px;
    align-items: start;
    margin-top: 95px;
    padding-top: 55px;
    border-top: 1px solid #d8e0e9;
}

.wn-bwd-tech-choice-head > span {
    display: block;
    margin-bottom: 17px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-tech-choice-head h3 {
    max-width: 420px;
    margin: 0;
    color: #101a29;
    font-size: 34px;
    line-height: 1.18;
    font-weight: 650;
    letter-spacing: -.03em;
}

.wn-bwd-tech-choice-head p {
    max-width: 410px;
    margin: 24px 0 0;
    color: #647181;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   TECHNOLOGY OPTIONS
   ========================================================= */

.wn-bwd-tech-options {
    border-top: 1px solid #d8e0e9;
}

.wn-bwd-tech-options article {
    display: grid;
    grid-template-columns: 40px 190px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid #d8e0e9;
}

.wn-bwd-tech-options article > span {
    padding-top: 3px;
    color: #2374ff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
}

.wn-bwd-tech-options small {
    padding-top: 3px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.55;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-tech-options article > strong {
    display: none;
}

.wn-bwd-tech-options p {
    position: relative;
    margin: 0;
    padding-top: 42px;
    color: #637181;
    font-size: 15px;
    line-height: 1.7;
}

.wn-bwd-tech-options p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    color: #172333;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 650;
    letter-spacing: -.015em;
}

.wn-bwd-tech-options article:nth-child(1) p::before {
    content: "WordPress";
}

.wn-bwd-tech-options article:nth-child(2) p::before {
    content: "Custom development";
}

.wn-bwd-tech-options article:nth-child(3) p::before {
    content: "APIs & integrations";
}


/* =========================================================
   PRINCIPLE
   ========================================================= */

.wn-bwd-tech-principle {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 80px;
    padding: 40px 0;
    border-top: 1px solid #d8e0e9;
    border-bottom: 1px solid #d8e0e9;
}

.wn-bwd-tech-principle > span {
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-tech-principle p {
    max-width: 850px;
    margin: 0;
    color: #778493;
    font-size: 23px;
    line-height: 1.55;
    letter-spacing: -.015em;
}

.wn-bwd-tech-principle strong {
    color: #101a29;
    font-weight: 650;
}


/* =========================================================
   DIRECT ANSWER
   ========================================================= */

.wn-bwd-technology-answer {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 70px;
    padding: 34px 38px;
    border-left: 3px solid #2374ff;
    background: #eaf0f6;
}

.wn-bwd-technology-answer > span {
    color: #182333;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-technology-answer p {
    max-width: 770px;
    margin: 0;
    color: #3f4e5e;
    font-size: 18px;
    line-height: 1.72;
}


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

@media (max-width: 1100px) {

    .wn-bwd-technology-head {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-technology-intro p {
        max-width: 720px;
    }

    .wn-bwd-ecosystem-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "core core"
            "cms forms"
            "systems api";
    }

    .wn-bwd-ecosystem-core {
        max-width: 620px;
        width: 100%;
        margin: 0 auto 20px;
    }

    .wn-bwd-ecosystem-lines {
        display: none;
    }

    .wn-bwd-tech-choice {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-bwd-tech-choice-head p {
        max-width: 700px;
    }

    .wn-bwd-technology-answer {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 45px;
    }
}


@media (max-width: 760px) {

    .wn-bwd-technology {
        padding: 85px 0 90px;
    }

    .wn-bwd-technology h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .wn-bwd-technology-intro .wn-bwd-large-copy {
        font-size: 21px;
    }

    .wn-bwd-ecosystem {
        margin-top: 65px;
        padding: 28px 24px;
    }

    .wn-bwd-ecosystem-top {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wn-bwd-ecosystem-map {
        grid-template-columns: 1fr;
        grid-template-areas:
            "core"
            "cms"
            "forms"
            "systems"
            "api";
        gap: 14px;
    }

    .wn-bwd-ecosystem-browser-body {
        padding: 28px 23px;
    }

    .wn-bwd-ecosystem-browser-body > strong {
        font-size: 23px;
    }

    .wn-bwd-ecosystem-bottom {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 26px 0;
    }

    .wn-bwd-tech-choice {
        margin-top: 70px;
    }

    .wn-bwd-tech-options article {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 10px 15px;
    }

    .wn-bwd-tech-options small {
        grid-column: 2;
    }

    .wn-bwd-tech-options p {
        grid-column: 2;
    }

    .wn-bwd-tech-principle {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 65px;
    }

    .wn-bwd-tech-principle p {
        font-size: 21px;
    }

    .wn-bwd-technology-answer {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 55px;
        padding: 28px 25px;
    }
}
/* =========================================================
   07 — PROCESS
   ========================================================= */

.wn-bwd-process {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: #ffffff;
    color: #101827;
}

.wn-bwd-process::before {
    content: "";
    position: absolute;
    right: -320px;
    top: 180px;
    width: 680px;
    height: 680px;
    border: 1px solid rgba(35, 116, 255, .055);
    border-radius: 50%;
    box-shadow:
        0 0 0 100px rgba(35, 116, 255, .014),
        0 0 0 200px rgba(35, 116, 255, .009);
    pointer-events: none;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-bwd-process-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .72fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-process h2 {
    max-width: 700px;
    margin: 0;
    color: #0c1625;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: 1.03;
    font-weight: 650;
    letter-spacing: -.045em;
}

.wn-bwd-process-intro {
    padding-bottom: 4px;
}

.wn-bwd-process-intro p {
    max-width: 570px;
    margin: 0;
    color: #596777;
    font-size: 17px;
    line-height: 1.75;
}

.wn-bwd-process-intro .wn-bwd-large-copy {
    margin-bottom: 22px;
    color: #182333;
    font-size: 23px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.015em;
}


/* =========================================================
   PROJECT TIMELINE CONTAINER
   ========================================================= */

.wn-bwd-project-timeline {
    position: relative;
    z-index: 2;
    margin-top: 90px;
    border: 1px solid #d8e1ea;
    background: #f7f9fc;
}

.wn-bwd-timeline-top {
    display: grid;
    grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr);
    gap: 80px;
    align-items: end;
    padding: 42px 48px;
    border-bottom: 1px solid #d8e1ea;
    background: #ffffff;
}

.wn-bwd-timeline-top > div > span {
    display: block;
    margin-bottom: 13px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-timeline-top strong {
    display: block;
    color: #101a29;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.025em;
}

.wn-bwd-timeline-top > p {
    max-width: 670px;
    margin: 0;
    color: #596777;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.wn-bwd-timeline {
    padding: 48px;
}

.wn-bwd-timeline-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 17px;
}

.wn-bwd-timeline-label > span {
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-timeline-label small {
    color: #758291;
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   TWO WORKSTREAMS
   ========================================================= */

.wn-bwd-timeline-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #b9c9da;
    border-bottom: 1px solid #d8e1ea;
}

.wn-bwd-timeline-track article {
    position: relative;
    min-width: 0;
    padding: 31px 27px 32px 0;
}

.wn-bwd-timeline-track article + article {
    padding-left: 27px;
    border-left: 1px solid #d8e1ea;
}

.wn-bwd-timeline-track article::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border: 2px solid #2374ff;
    border-radius: 50%;
    background: #f7f9fc;
}

.wn-bwd-timeline-track article + article::before {
    left: 27px;
}

.wn-bwd-timeline-track article > span {
    display: block;
    margin-bottom: 22px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 750;
}

.wn-bwd-timeline-track small {
    display: block;
    margin-bottom: 9px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-timeline-track strong {
    display: block;
    color: #172333;
    font-size: 17px;
    line-height: 1.42;
    font-weight: 650;
}

.wn-bwd-timeline-track p {
    margin: 14px 0 0;
    color: #657282;
    font-size: 14px;
    line-height: 1.68;
}


/* =========================================================
   DECISION / SYNC GATES
   ========================================================= */

.wn-bwd-timeline-sync {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 28px 0;
    border: 1px solid #d8e1ea;
    background: #d8e1ea;
}

.wn-bwd-timeline-sync > div {
    position: relative;
    min-width: 0;
    padding: 22px 25px 22px 49px;
    background: #0b1a2c;
}

.wn-bwd-timeline-sync i {
    position: absolute;
    left: 24px;
    top: 26px;
    width: 9px;
    height: 9px;
    border: 2px solid #70b8ff;
    border-radius: 50%;
}

.wn-bwd-timeline-sync span {
    display: block;
    margin-bottom: 7px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-timeline-sync small {
    display: block;
    color: rgba(255, 255, 255, .66);
    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   DEVELOPMENT STREAM
   ========================================================= */

.wn-bwd-timeline-label-dev {
    margin-top: 4px;
}

.wn-bwd-track-development article::before {
    background: #ffffff;
}

.wn-bwd-track-development {
    background: #ffffff;
}


/* =========================================================
   COLLABORATION
   ========================================================= */

.wn-bwd-process-collaboration {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(280px, .58fr) minmax(0, 1.42fr);
    gap: 85px;
    align-items: start;
    margin-top: 95px;
    padding-top: 55px;
    border-top: 1px solid #d8e0e9;
}

.wn-bwd-process-collaboration-head > span {
    display: block;
    margin-bottom: 17px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-process-collaboration-head h3 {
    max-width: 430px;
    margin: 0;
    color: #101a29;
    font-size: 34px;
    line-height: 1.18;
    font-weight: 650;
    letter-spacing: -.03em;
}


/* =========================================================
   WEBNIME + YOUR BUSINESS
   ========================================================= */

.wn-bwd-process-roles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 55px minmax(0, 1fr);
    align-items: stretch;
}

.wn-bwd-process-roles article {
    min-width: 0;
    padding: 31px;
    border: 1px solid #d8e1ea;
    background: #f7f9fc;
}

.wn-bwd-process-roles article > span {
    display: block;
    margin-bottom: 18px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-process-roles article strong {
    display: block;
    color: #172333;
    font-size: 21px;
    line-height: 1.4;
    font-weight: 650;
    letter-spacing: -.015em;
}

.wn-bwd-process-roles article p {
    margin: 17px 0 0;
    color: #637181;
    font-size: 15px;
    line-height: 1.72;
}

.wn-bwd-process-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2374ff;
    font-size: 27px;
    font-weight: 350;
}


/* =========================================================
   PRINCIPLE
   ========================================================= */

.wn-bwd-process-principle {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 80px;
    padding: 40px 0;
    border-top: 1px solid #d8e0e9;
    border-bottom: 1px solid #d8e0e9;
}

.wn-bwd-process-principle > span {
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-process-principle p {
    max-width: 880px;
    margin: 0;
    color: #778493;
    font-size: 23px;
    line-height: 1.55;
    letter-spacing: -.015em;
}

.wn-bwd-process-principle strong {
    color: #101a29;
    font-weight: 650;
}


/* =========================================================
   DIRECT ANSWER
   ========================================================= */

.wn-bwd-process-answer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 70px;
    padding: 34px 38px;
    border-left: 3px solid #2374ff;
    background: #f1f5f9;
}

.wn-bwd-process-answer > span {
    color: #182333;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-process-answer p {
    max-width: 780px;
    margin: 0;
    color: #3f4e5e;
    font-size: 18px;
    line-height: 1.72;
}


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

@media (max-width: 1100px) {

    .wn-bwd-process-head {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-process-intro p {
        max-width: 720px;
    }

    .wn-bwd-timeline-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .wn-bwd-timeline-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-bwd-timeline-track article:nth-child(3) {
        border-left: 0;
    }

    .wn-bwd-process-collaboration {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-process-collaboration-head h3 {
        max-width: 650px;
    }

    .wn-bwd-process-answer {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 45px;
    }
}


@media (max-width: 760px) {

    .wn-bwd-process {
        padding: 85px 0 90px;
    }

    .wn-bwd-process::before {
        display: none;
    }

    .wn-bwd-process h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .wn-bwd-process-intro .wn-bwd-large-copy {
        font-size: 21px;
    }

    .wn-bwd-project-timeline {
        margin-top: 65px;
    }

    .wn-bwd-timeline-top,
    .wn-bwd-timeline {
        padding: 28px 24px;
    }

    .wn-bwd-timeline-label {
        display: block;
    }

    .wn-bwd-timeline-label small {
        display: block;
        margin-top: 7px;
    }

    .wn-bwd-timeline-track {
        grid-template-columns: 1fr;
        border-top: 0;
    }

    .wn-bwd-timeline-track article,
    .wn-bwd-timeline-track article + article {
        padding: 25px 0;
        border-left: 0;
        border-top: 1px solid #d8e1ea;
    }

    .wn-bwd-timeline-track article::before,
    .wn-bwd-timeline-track article + article::before {
        left: 0;
    }

    .wn-bwd-timeline-sync {
        grid-template-columns: 1fr;
    }

    .wn-bwd-process-collaboration {
        margin-top: 70px;
    }

    .wn-bwd-process-roles {
        grid-template-columns: 1fr;
    }

    .wn-bwd-process-plus {
        min-height: 55px;
    }

    .wn-bwd-process-principle {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 65px;
    }

    .wn-bwd-process-principle p {
        font-size: 21px;
    }

    .wn-bwd-process-answer {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 55px;
        padding: 28px 25px;
    }
}
/* =========================================================
   08 — BUSINESS WEBSITES IN PRACTICE
   ========================================================= */

.wn-bwd-practice {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: #07111f;
    color: #ffffff;
}

.wn-bwd-practice::before {
    content: "";
    position: absolute;
    left: -340px;
    top: 300px;
    width: 700px;
    height: 700px;
    border: 1px solid rgba(112, 184, 255, .06);
    border-radius: 50%;
    box-shadow:
        0 0 0 100px rgba(35, 116, 255, .014),
        0 0 0 200px rgba(35, 116, 255, .009);
    pointer-events: none;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-bwd-practice-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .72fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-practice .wn-bwd-section-number,
.wn-bwd-practice .wn-bwd-section-kicker {
    color: #70b8ff;
}

.wn-bwd-practice h2 {
    max-width: 700px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: 1.03;
    font-weight: 650;
    letter-spacing: -.045em;
}

.wn-bwd-practice-intro {
    padding-bottom: 4px;
}

.wn-bwd-practice-intro p {
    max-width: 570px;
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 17px;
    line-height: 1.75;
}

.wn-bwd-practice-intro .wn-bwd-large-copy {
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .88);
    font-size: 23px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.015em;
}


/* =========================================================
   CASE STUDY
   ========================================================= */

.wn-bwd-case {
    position: relative;
    z-index: 2;
    margin-top: 90px;
    border: 1px solid rgba(112, 184, 255, .2);
    background: #0a1829;
}


/* =========================================================
   CASE HEADER
   ========================================================= */

.wn-bwd-case-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(480px, .95fr);
    gap: 70px;
    align-items: end;
    padding: 45px 48px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.wn-bwd-case-identity > span {
    display: block;
    margin-bottom: 13px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-bwd-case-identity h3 {
    margin: 0;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: -.035em;
}

.wn-bwd-case-identity p {
    max-width: 510px;
    margin: 15px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: 17px;
    line-height: 1.65;
}

.wn-bwd-case-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .1);
}

.wn-bwd-case-meta > div {
    min-width: 0;
    padding: 18px;
    background: #0d1e31;
}

.wn-bwd-case-meta small {
    display: block;
    margin-bottom: 8px;
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-case-meta strong {
    display: block;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}


/* =========================================================
   PROJECT STAGE
   ========================================================= */

.wn-bwd-case-stage {
    position: relative;
    padding: 65px 8% 78px;
    background:
        linear-gradient(
            135deg,
            rgba(35, 116, 255, .045),
            transparent 45%
        );
}

.wn-bwd-case-browser {
    position: relative;
    overflow: hidden;
    max-width: 970px;
    margin: 0 auto;
    border: 1px solid rgba(112, 184, 255, .24);
    background: #081523;
    box-shadow: 0 30px 75px rgba(0, 0, 0, .25);
}

.wn-bwd-case-browser-bar {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 19px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: #0d1e31;
}

.wn-bwd-case-browser-bar > div {
    display: flex;
    gap: 6px;
}

.wn-bwd-case-browser-bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #53687d;
}

.wn-bwd-case-browser-bar i:first-child {
    background: #2374ff;
}

.wn-bwd-case-browser-bar > span {
    margin: 0 auto;
    color: rgba(255, 255, 255, .45);
    font-size: 10px;
}

.wn-bwd-case-browser-bar > small {
    color: #70b8ff;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
}


/* =========================================================
   ILLUSTRATIVE AVA WEBSITE
   ========================================================= */

.wn-bwd-case-browser-body {
    padding: 34px;
}

.wn-bwd-case-site-head {
    display: flex;
    justify-content: space-between;
    gap: 35px;
    align-items: center;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.wn-bwd-case-site-head > strong {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .04em;
}

.wn-bwd-case-site-head > div {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.wn-bwd-case-site-head span {
    color: rgba(255, 255, 255, .43);
    font-size: 9px;
}

.wn-bwd-case-site-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
    gap: 65px;
    align-items: center;
    min-height: 330px;
    padding: 48px 0;
}

.wn-bwd-case-site-hero > div:first-child > small {
    display: block;
    margin-bottom: 14px;
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-case-site-hero > div:first-child > strong {
    display: block;
    color: #ffffff;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 650;
    letter-spacing: -.035em;
}

.wn-bwd-case-site-hero > div:first-child > p {
    max-width: 500px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .53);
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   INDUSTRIAL VISUAL
   ========================================================= */

.wn-bwd-case-industrial-visual {
    position: relative;
    min-height: 220px;
    padding: 30px;
    border: 1px solid rgba(112, 184, 255, .17);
    background:
        linear-gradient(
            145deg,
            rgba(35, 116, 255, .12),
            rgba(255, 255, 255, .015)
        );
}

.wn-bwd-case-machine {
    position: relative;
    height: 130px;
    border-left: 1px solid rgba(112, 184, 255, .35);
    border-bottom: 1px solid rgba(112, 184, 255, .35);
}

.wn-bwd-case-machine span {
    position: absolute;
    bottom: 0;
    width: 16%;
    border: 1px solid rgba(112, 184, 255, .3);
    border-bottom: 0;
    background: rgba(35, 116, 255, .09);
}

.wn-bwd-case-machine span:nth-child(1) {
    left: 7%;
    height: 42%;
}

.wn-bwd-case-machine span:nth-child(2) {
    left: 30%;
    height: 72%;
}

.wn-bwd-case-machine span:nth-child(3) {
    left: 53%;
    height: 54%;
}

.wn-bwd-case-machine span:nth-child(4) {
    left: 76%;
    height: 88%;
}

.wn-bwd-case-industrial-visual > small {
    display: block;
    margin-top: 19px;
    color: rgba(255, 255, 255, .5);
    font-size: 9px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .1em;
}


/* =========================================================
   MINI SITE CARDS
   ========================================================= */

.wn-bwd-case-site-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.wn-bwd-case-site-grid > div {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .025);
}

.wn-bwd-case-site-grid small {
    display: block;
    margin-bottom: 8px;
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-case-site-grid strong {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}


/* =========================================================
   REAL PROJECT BADGE
   ========================================================= */

.wn-bwd-case-note {
    position: absolute;
    right: calc(8% - 20px);
    bottom: 48px;
    min-width: 290px;
    padding: 17px 22px;
    border: 1px solid rgba(112, 184, 255, .25);
    background: #10243a;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

.wn-bwd-case-note span {
    display: block;
    margin-bottom: 6px;
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-case-note strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
}


/* =========================================================
   PROJECT STORY
   ========================================================= */

.wn-bwd-case-story {
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
    gap: 90px;
    padding: 55px 48px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.wn-bwd-case-story-title > span {
    display: block;
    margin-bottom: 14px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-case-story-title h3 {
    max-width: 470px;
    margin: 0;
    color: #ffffff;
    font-size: 29px;
    line-height: 1.28;
    font-weight: 650;
    letter-spacing: -.025em;
}

.wn-bwd-case-story-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
}

.wn-bwd-case-story-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .59);
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   PROJECT COMPONENTS
   ========================================================= */

.wn-bwd-case-components {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.wn-bwd-case-components article {
    min-width: 0;
    padding: 34px 28px;
}

.wn-bwd-case-components article + article {
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.wn-bwd-case-components article > span {
    display: block;
    margin-bottom: 22px;
    color: #70b8ff;
    font-size: 11px;
    line-height: 1;
    font-weight: 750;
}

.wn-bwd-case-components small {
    display: block;
    margin-bottom: 10px;
    color: #70b8ff;
    font-size: 9px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-case-components strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 650;
}

.wn-bwd-case-components p {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .52);
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   CASE FOOTER
   ========================================================= */

.wn-bwd-case-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 70px;
    align-items: center;
    padding: 37px 48px;
}

.wn-bwd-case-footer > div > span {
    display: block;
    margin-bottom: 9px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-case-footer p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: 16px;
    line-height: 1.7;
}

.wn-bwd-case-footer > a {
    display: inline-flex;
    align-items: center;
    gap: 35px;
    min-height: 52px;
    padding: 0 20px;
    border: 1px solid rgba(112, 184, 255, .35);
    color: #ffffff;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition:
        border-color .2s ease,
        background .2s ease;
}

.wn-bwd-case-footer > a:hover {
    border-color: #70b8ff;
    background: rgba(35, 116, 255, .1);
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.wn-bwd-practice-experience {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
    gap: 90px;
    align-items: start;
    margin-top: 80px;
    padding: 45px 0;
    border-top: 1px solid rgba(255, 255, 255, .11);
    border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.wn-bwd-practice-experience span {
    display: block;
    margin-bottom: 15px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-practice-experience h3 {
    margin: 0;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.025em;
}

.wn-bwd-practice-experience > p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   DIRECT ANSWER
   ========================================================= */

.wn-bwd-practice-answer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 70px;
    padding: 34px 38px;
    border-left: 3px solid #2374ff;
    background: rgba(255, 255, 255, .045);
}

.wn-bwd-practice-answer > span {
    color: #70b8ff;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-practice-answer p {
    max-width: 780px;
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 18px;
    line-height: 1.72;
}


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

@media (max-width: 1100px) {

    .wn-bwd-practice-head,
    .wn-bwd-case-top {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-practice-intro p {
        max-width: 720px;
    }

    .wn-bwd-case-meta {
        max-width: 700px;
    }

    .wn-bwd-case-site-hero {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .wn-bwd-case-industrial-visual {
        max-width: 580px;
        width: 100%;
    }

    .wn-bwd-case-story {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .wn-bwd-case-components {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-bwd-case-components article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .wn-bwd-case-components article:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .wn-bwd-practice-answer {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 45px;
    }
}


@media (max-width: 760px) {

    .wn-bwd-practice {
        padding: 85px 0 90px;
    }

    .wn-bwd-practice::before {
        display: none;
    }

    .wn-bwd-practice h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .wn-bwd-practice-intro .wn-bwd-large-copy {
        font-size: 21px;
    }

    .wn-bwd-case {
        margin-top: 65px;
    }

    .wn-bwd-case-top,
    .wn-bwd-case-story,
    .wn-bwd-case-footer {
        padding: 28px 24px;
    }

    .wn-bwd-case-identity h3 {
        font-size: 31px;
    }

    .wn-bwd-case-meta {
        grid-template-columns: 1fr;
    }

    .wn-bwd-case-stage {
        padding: 35px 24px 65px;
    }

    .wn-bwd-case-browser-body {
        padding: 24px;
    }

    .wn-bwd-case-site-head {
        align-items: flex-start;
    }

    .wn-bwd-case-site-head > div {
        display: none;
    }

    .wn-bwd-case-site-hero {
        min-height: 0;
        padding: 35px 0;
    }

    .wn-bwd-case-site-hero > div:first-child > strong {
        font-size: 29px;
    }

    .wn-bwd-case-site-grid {
        grid-template-columns: 1fr;
    }

    .wn-bwd-case-note {
        position: relative;
        right: auto;
        bottom: auto;
        min-width: 0;
        margin: -1px 0 0;
    }

    .wn-bwd-case-story-copy {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wn-bwd-case-components {
        grid-template-columns: 1fr;
    }

    .wn-bwd-case-components article + article,
    .wn-bwd-case-components article:nth-child(3),
    .wn-bwd-case-components article:nth-child(4) {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .wn-bwd-case-footer {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wn-bwd-case-footer > a {
        width: 100%;
        justify-content: space-between;
    }

    .wn-bwd-practice-experience {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 65px;
    }

    .wn-bwd-practice-answer {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 55px;
        padding: 28px 25px;
    }
}
/* =========================================================
   09 — PRACTICAL QUESTIONS
   ========================================================= */

.wn-bwd-questions {
    position: relative;
    overflow: hidden;
    padding: 120px 0 125px;
    background: #f5f8fc;
    color: #101827;
}

.wn-bwd-questions::before {
    content: "";
    position: absolute;
    right: -350px;
    top: 220px;
    width: 720px;
    height: 720px;
    border: 1px solid rgba(35, 116, 255, .05);
    border-radius: 50%;
    box-shadow:
        0 0 0 100px rgba(35, 116, 255, .012),
        0 0 0 200px rgba(35, 116, 255, .008);
    pointer-events: none;
}


/* =========================================================
   HEADING
   ========================================================= */

.wn-bwd-questions-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .72fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-questions h2 {
    max-width: 700px;
    margin: 0;
    color: #0c1625;
    font-size: clamp(44px, 4.5vw, 66px);
    line-height: 1.03;
    font-weight: 650;
    letter-spacing: -.045em;
}

.wn-bwd-questions-intro {
    padding-bottom: 4px;
}

.wn-bwd-questions-intro p {
    max-width: 570px;
    margin: 0;
    color: #596777;
    font-size: 17px;
    line-height: 1.75;
}

.wn-bwd-questions-intro .wn-bwd-large-copy {
    margin-bottom: 22px;
    color: #182333;
    font-size: 23px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.015em;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.wn-bwd-questions-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(310px, .62fr) minmax(0, 1.38fr);
    gap: 90px;
    align-items: start;
    margin-top: 90px;
}


/* =========================================================
   LEFT — BEFORE YOU CONTACT US
   ========================================================= */

.wn-bwd-questions-aside {
    position: sticky;
    top: 110px;
    padding: 35px;
    border: 1px solid #d7e0e9;
    background: #ffffff;
}

.wn-bwd-questions-aside > span {
    display: block;
    margin-bottom: 17px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-questions-aside > h3 {
    max-width: 390px;
    margin: 0;
    color: #101a29;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -.03em;
}

.wn-bwd-questions-aside > p {
    margin: 22px 0 0;
    color: #637181;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   GOOD STARTING POINT
   ========================================================= */

.wn-bwd-questions-aside-signal {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid #dce3ea;
}

.wn-bwd-questions-aside-signal > small {
    display: block;
    margin-bottom: 18px;
    color: #758291;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-bwd-questions-aside-signal > div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 13px 0;
    border-top: 1px solid #e2e8ef;
}

.wn-bwd-questions-aside-signal > div:first-of-type {
    border-top: 0;
}

.wn-bwd-questions-aside-signal span {
    padding-top: 2px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 750;
}

.wn-bwd-questions-aside-signal strong {
    color: #1b2736;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
}


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

.wn-bwd-questions-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 56px;
    margin-top: 30px;
    padding: 0 19px;
    background: #2374ff;
    color: #ffffff;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition:
        background .2s ease,
        transform .2s ease;
}

.wn-bwd-questions-contact:hover {
    background: #1766e8;
    transform: translateY(-1px);
}


/* =========================================================
   FAQ — EDITORIAL INDEX
   ========================================================= */

.wn-bwd-faq {
    border-top: 1px solid #cdd8e3;
}

.wn-bwd-faq-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 25px;
    padding: 36px 0 39px;
    border-bottom: 1px solid #cdd8e3;
}

.wn-bwd-faq-number {
    padding-top: 3px;
    color: #2374ff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
}

.wn-bwd-faq-content {
    min-width: 0;
}

.wn-bwd-faq-content > span {
    display: block;
    margin-bottom: 10px;
    color: #2374ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-faq-content h3 {
    max-width: 760px;
    margin: 0;
    color: #101a29;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -.02em;
}

.wn-bwd-faq-answer {
    max-width: 790px;
    margin: 18px 0 0;
    color: #657282;
    font-size: 16px;
    line-height: 1.75;
}

.wn-bwd-faq-answer strong {
    color: #263445;
    font-weight: 650;
}


/* =========================================================
   SUBTLE FAQ HOVER
   ========================================================= */

.wn-bwd-faq-item {
    position: relative;
}

.wn-bwd-faq-item::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #2374ff;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .2s ease;
}

.wn-bwd-faq-item:hover::before {
    transform: scaleY(1);
}


/* =========================================================
   BOTTOM PRINCIPLE
   ========================================================= */

.wn-bwd-questions-bottom {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
    margin-top: 80px;
    padding: 38px 40px;
    border-left: 3px solid #2374ff;
    background: #e9eff6;
}

.wn-bwd-questions-bottom > span {
    color: #182333;
    font-size: 11px;
    line-height: 1.55;
    font-weight: 750;
    letter-spacing: .11em;
}

.wn-bwd-questions-bottom p {
    max-width: 830px;
    margin: 0;
    color: #637181;
    font-size: 20px;
    line-height: 1.65;
    letter-spacing: -.01em;
}

.wn-bwd-questions-bottom strong {
    color: #101a29;
    font-weight: 650;
}


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

@media (max-width: 1100px) {

    .wn-bwd-questions-head {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .wn-bwd-questions-intro p {
        max-width: 720px;
    }

    .wn-bwd-questions-layout {
        grid-template-columns: minmax(270px, .55fr) minmax(0, 1.45fr);
        gap: 55px;
    }

    .wn-bwd-questions-aside {
        padding: 28px;
    }

    .wn-bwd-questions-aside > h3 {
        font-size: 27px;
    }
}


@media (max-width: 850px) {

    .wn-bwd-questions-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .wn-bwd-questions-aside {
        position: relative;
        top: auto;
        max-width: 650px;
    }

    .wn-bwd-questions-bottom {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


@media (max-width: 650px) {

    .wn-bwd-questions {
        padding: 85px 0 90px;
    }

    .wn-bwd-questions::before {
        display: none;
    }

    .wn-bwd-questions h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .wn-bwd-questions-intro .wn-bwd-large-copy {
        font-size: 21px;
    }

    .wn-bwd-questions-layout {
        margin-top: 65px;
    }

    .wn-bwd-questions-aside {
        padding: 25px;
    }

    .wn-bwd-faq-item {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 13px;
        padding: 29px 0 32px;
    }

    .wn-bwd-faq-item::before {
        display: none;
    }

    .wn-bwd-faq-content h3 {
        font-size: 22px;
    }

    .wn-bwd-faq-answer {
        font-size: 15px;
    }

    .wn-bwd-questions-bottom {
        margin-top: 60px;
        padding: 28px 25px;
    }

    .wn-bwd-questions-bottom p {
        font-size: 18px;
    }
}
/* =========================================================
   10 — FINAL CTA
   ========================================================= */

.wn-bwd-final {
    position: relative;
    overflow: hidden;
    padding: 120px 0 105px;
    background: #07111f;
    color: #ffffff;
    border-bottom: 1px solid rgba(112, 184, 255, .12);
}

.wn-bwd-final::before {
    content: "";
    position: absolute;
    right: -240px;
    top: -300px;
    width: 760px;
    height: 760px;
    border: 1px solid rgba(112, 184, 255, .07);
    border-radius: 50%;
    box-shadow:
        0 0 0 110px rgba(35, 116, 255, .018),
        0 0 0 220px rgba(35, 116, 255, .01);
    pointer-events: none;
}


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

.wn-bwd-final-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(380px, .65fr);
    gap: 110px;
    align-items: end;
}

.wn-bwd-final .wn-bwd-section-number,
.wn-bwd-final .wn-bwd-section-kicker {
    color: #70b8ff;
}

.wn-bwd-final h2 {
    max-width: 820px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.02;
    font-weight: 650;
    letter-spacing: -.048em;
}

.wn-bwd-final-action {
    padding-bottom: 5px;
}

.wn-bwd-final-action > p {
    max-width: 520px;
    margin: 0;
    color: rgba(255, 255, 255, .63);
    font-size: 18px;
    line-height: 1.72;
}

.wn-bwd-final-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 390px;
    min-height: 68px;
    margin-top: 32px;
    padding: 0 24px;
    background: #2374ff;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 650;
    text-decoration: none;
    transition:
        background .2s ease,
        transform .2s ease;
}

.wn-bwd-final-button:hover {
    background: #1766e8;
    transform: translateY(-2px);
}

.wn-bwd-final-button span:last-child {
    font-size: 18px;
}


/* =========================================================
   BUSINESS PROBLEM STRIP
   ========================================================= */

.wn-bwd-final-line {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
    gap: 90px;
    align-items: start;
    margin-top: 95px;
    padding: 38px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.wn-bwd-final-line > div > span {
    display: block;
    margin-bottom: 10px;
    color: #70b8ff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: .12em;
}

.wn-bwd-final-line > div > strong {
    display: block;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 650;
    letter-spacing: -.015em;
}

.wn-bwd-final-line > p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   CLOSING SIGNAL
   ========================================================= */

.wn-bwd-final-signal {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 42px;
}

.wn-bwd-final-signal span {
    color: rgba(255, 255, 255, .45);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .14em;
}

.wn-bwd-final-signal span:last-child {
    color: #70b8ff;
}

.wn-bwd-final-signal i {
    color: rgba(112, 184, 255, .55);
    font-size: 13px;
    font-style: normal;
}


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

@media (max-width: 1100px) {

    .wn-bwd-final-top {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .wn-bwd-final-action > p {
        max-width: 700px;
    }

    .wn-bwd-final-line {
        grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr);
        gap: 55px;
    }
}


@media (max-width: 760px) {

    .wn-bwd-final {
        padding: 85px 0 75px;
    }

    .wn-bwd-final::before {
        display: none;
    }

    .wn-bwd-final h2 {
        font-size: clamp(40px, 11vw, 56px);
    }

    .wn-bwd-final-button {
        max-width: none;
    }

    .wn-bwd-final-line {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 70px;
        padding: 30px 0;
    }

    .wn-bwd-final-signal {
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 32px;
    }
}