.brand {
    gap: 16px;
    overflow: visible
}

.brand>img {
    width: 118px;
    height: 78px;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border-radius: 0;
    mix-blend-mode: multiply;
    filter: saturate(.96) contrast(1.18) brightness(1.06);
    transform: scale(1.08);
    transform-origin: center;
    margin-right: 24px
}

.brand-wordmark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    min-width: 190px
}

.brand-forge {
    font-family: "Arial Black", "Arial Narrow", Arial, sans-serif !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    line-height: .9 !important;
    color: #0b2f63 !important;
    text-transform: uppercase;
    width: max-content
}

.brand-forge .brand-o {
    color: inherit !important
}

.brand-solutions {
    font-family: "Arial Narrow", Arial, sans-serif !important;
    font-size: .67rem !important;
    font-weight: 700 !important;
    letter-spacing: .36em !important;
    line-height: 1 !important;
    margin-top: 10px !important;
    color: #2f70ba !important;
    text-transform: uppercase;
    width: max-content
}

.brand-solutions:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 8px;
    background: #f36f21;
    border-radius: 2px
}

.service-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    color: var(--forge-blue);
    display: grid;
    place-items: center
}

.service-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round
}

.service-card {
    border: 1px solid #cfe3f6 !important;
    box-shadow: 0 10px 26px rgba(29, 85, 139, .06) !important
}

.service-card:hover {
    border-color: #b8d8f3 !important;
    box-shadow: 0 18px 42px rgba(29, 85, 139, .12) !important
}

.service-card:nth-child(2) .service-icon {
    color: #2f70ba !important
}

.service-card:nth-child(3) .service-icon {
    color: #2f70ba !important
}

.service-card:nth-child(4) .service-icon {
    color: #2f70ba !important
}

.benefit-strip {
    border: 1px solid #d6e5f3 !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: #fbfdff !important;
    box-shadow: 0 8px 22px rgba(25, 71, 118, .05) !important
}

.benefit-strip>div {
    border-right: 1px solid #d6e5f3 !important
}

.benefit-strip>div:last-child {
    border-right: 0 !important
}

.mini-line {
    background: linear-gradient(180deg, #fbfdff, #f5f9ff) !important
}

.mini-line:before,
.mini-line:after {
    content: none !important;
    display: none !important
}

.mini-line svg {
    position: absolute;
    inset: 12px 10px 10px;
    width: calc(100% - 20px);
    height: calc(100% - 22px);
    overflow: visible
}

.mini-line:global(svg) {
    display: block
}

.mini-series {
    fill: none;
    stroke: #1267e8;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
}

.mini-area {
    fill: url(#areaFill)
}

.mini-points circle {
    fill: #fff;
    stroke: #1267e8;
    stroke-width: 2;
    vector-effect: non-scaling-stroke
}

.about-panel-featured {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    align-items: center;
    gap: clamp(38px, 6vw, 90px)
}

.about-brand-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 520px;
    padding: 34px;
    border-radius: 28px;
    background: radial-gradient(circle at 50% 42%, rgba(74, 167, 255, .16), transparent 46%), linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(238, 246, 255, .9));
    border: 1px solid #d7e8f7;
    overflow: hidden
}

.about-brand-showcase img {
    width: min(640px, 100%);
    max-height: 390px;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
    filter: saturate(.95) contrast(1.08)
}

.about-brand-name {
    margin-top: -18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1
}

.about-brand-name strong {
    font-size: clamp(3rem, 6vw, 5.4rem);
    font-weight: 900;
    letter-spacing: .13em;
    color: #0b2f63
}

.about-brand-name span {
    margin-top: 12px;
    font-size: clamp(.9rem, 1.8vw, 1.35rem);
    font-weight: 700;
    letter-spacing: .42em;
    color: #2f70ba
}

.about-brand-showcase>p {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 2px solid #f36f21;
    color: #0b2f63;
    font-size: .86rem;
    font-weight: 750;
    letter-spacing: .2em;
    text-transform: uppercase
}

.hero:before {
    width: 96% !important;
    right: -2% !important;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .82) 15%, rgba(247, 251, 255, .38) 29%, rgba(238, 248, 255, .08) 48%, rgba(238, 248, 255, 0) 100%), url('/forge-hero-desk.jpg') !important;
    background-position: right center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: saturate(.94) brightness(1.03) contrast(.97) !important;
    opacity: .98 !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .2) 8%, rgba(0, 0, 0, .78) 22%, #000 32%, #000 88%, rgba(0, 0, 0, .78) 94%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .2) 8%, rgba(0, 0, 0, .78) 22%, #000 32%, #000 88%, rgba(0, 0, 0, .78) 94%, transparent 100%) !important
}

.hero:after {
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .96) 29%, rgba(244, 250, 255, .14) 52%, rgba(238, 248, 255, 0) 88%, rgba(255, 255, 255, .35) 100%) !important
}

.hero .hero-scene.hero-photo {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    filter: none !important
}

.footer-privacy {
    display: inline-flex;
    align-items: center;
    gap: .35em
}

.social-links {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    vertical-align: middle
}

.social-link {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 4px;
    color: #2f70ba;
    line-height: 1;
    transition: transform .18s ease, opacity .18s ease
}

.social-link:hover {
    transform: translateY(-1px);
    opacity: .8
}

.social-link svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor
}

@media(max-width:1050px) {
    .about-panel-featured {
        grid-template-columns: 1fr
    }

    .about-brand-showcase {
        min-height: 430px
    }

    .about-brand-showcase img {
        max-height: 320px
    }

    .benefit-strip {
        border-radius: 16px !important
    }

    .benefit-strip>div:nth-child(2) {
        border-right: 0 !important
    }

    .benefit-strip>div:nth-child(-n+2) {
        border-bottom: 1px solid #d6e5f3 !important
    }
}

@media(max-width:900px) {
    .brand>img {
        width: 96px;
        height: 66px;
        transform: scale(1.45);
        margin-right: 20px;
        filter: saturate(.96) contrast(1.24) brightness(1.08)
    }

    .brand-wordmark {
        min-width: 150px
    }

    .brand-forge {
        font-size: 1.55rem !important
    }

    .brand-solutions {
        font-size: .52rem !important;
        letter-spacing: .28em !important
    }

    .hero:before {
        width: 125% !important;
        right: -16% !important;
        opacity: .82 !important
    }

    .hero:after {
        background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .84) 48%, rgba(244, 250, 255, .18) 88%, rgba(255, 255, 255, .3) 100%) !important
    }
}

@media(max-width:620px) {
    .brand {
        gap: 9px
    }

    .brand>img {
        width: 76px;
        height: 54px;
        transform: scale(1.35);
        margin-right: 14px;
        filter: saturate(.96) contrast(1.32) brightness(1.1)
    }

    .brand-wordmark {
        min-width: 118px
    }

    .brand-forge {
        font-size: 1.16rem !important;
        letter-spacing: .07em !important
    }

    .brand-solutions {
        font-size: .4rem !important;
        letter-spacing: .2em !important;
        margin-top: 7px !important
    }

    .brand-solutions:after {
        width: 100%;
        margin-top: 6px
    }

    .about-brand-showcase {
        min-height: 340px;
        padding: 22px
    }

    .about-brand-showcase img {
        max-height: 240px
    }

    .about-brand-name {
        margin-top: -8px
    }

    .about-brand-name span {
        letter-spacing: .3em
    }

    .about-brand-showcase>p {
        letter-spacing: .12em
    }

    .hero:before {
        right: -24% !important;
        width: 148% !important;
        opacity: .68 !important
    }

    .benefit-strip>div {
        border-right: 0 !important;
        border-bottom: 1px solid #d6e5f3 !important
    }

    .benefit-strip>div:last-child {
        border-bottom: 0 !important
    }
}

/* Give the compact Forge Insights bar chart clear meaning. */
.mini-bars {
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 14px 14px 12px !important;
    overflow: visible !important
}

.mini-bars:before {
    content: "Traffic sources";
    display: block;
    margin-bottom: 2px;
    color: #0b1f3a;
    font-size: .72rem;
    font-weight: 800
}

.mini-bars b {
    position: relative;
    height: 9px !important;
    margin-top: 11px;
    overflow: visible
}

.mini-bars b:before,
.mini-bars b:after {
    position: absolute;
    top: -16px;
    font-size: .58rem;
    line-height: 1;
    white-space: nowrap
}

.mini-bars b:before {
    left: 0;
    color: #61748b;
    font-weight: 650
}

.mini-bars b:after {
    right: 0;
    color: #0b1f3a;
    font-weight: 800
}

.mini-bars b:nth-child(1):before { content: "Search" }
.mini-bars b:nth-child(1):after { content: "44%" }
.mini-bars b:nth-child(2):before { content: "Direct" }
.mini-bars b:nth-child(2):after { content: "28%" }
.mini-bars b:nth-child(3):before { content: "Social" }
.mini-bars b:nth-child(3):after { content: "18%" }
.mini-bars b:nth-child(4):before { content: "Referral" }
.mini-bars b:nth-child(4):after { content: "10%" }

@media(max-width:620px) {
    .mini-bars {
        min-height: 150px
    }
}
/* Mobile readability refinements across public pages */
@media(max-width:620px){
 .page-hero.section-pad{padding:48px 20px 30px}
 .page-hero h1{font-size:clamp(2.15rem,9vw,3rem);line-height:1.12;letter-spacing:-.035em;overflow-wrap:break-word}
 .page-hero .lead{font-size:1.05rem;line-height:1.65;margin:18px 0 0}
 .section-pad{padding-left:20px;padding-right:20px}
 .section-heading h2,.home-insights-copy h2{font-size:clamp(1.85rem,8vw,2.5rem);line-height:1.16}
 .service-card,.offer-card,.journey-step{padding:20px;min-width:0}
 .service-card p,.offer-card p,.process-detail p,.about-panel p{font-size:1rem;line-height:1.7}
 .home-insights,.mini-insights,.demo-panel{min-width:0}
 .mini-insights{padding:14px}
 .mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mini-kpis>div{min-width:0}
 .mini-charts{grid-template-columns:1fr}
 .about-brand-showcase{min-height:0;padding:20px}
 .about-brand-showcase img{max-width:100%;height:auto;max-height:220px}
 .about-brand-name strong{font-size:clamp(2rem,10vw,3.5rem);letter-spacing:.06em}
 .about-brand-name span{font-size:.8rem;letter-spacing:.18em}
 .process-detail{padding:34px 0}
 .website-journey{gap:12px;margin-top:22px}
 .button,.nav-cta{min-height:44px}
}