/* ==========================================================
   Wrkman — New Website (responsive)
   Normal document flow. Flexbox/Grid, clamp() typography, %/rem.
   No transform:scale, no fixed 1440 canvas — reflows with zoom.
   ========================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --navy: #0C2D52;
    --blue: #2046CB;
    --cyan: #00B7FF;
    --ph: #A6C5E2;
    --cardbg: #F3F8F9;
    --desc: rgba(12, 45, 82, .75);
    --line: #83CFEF;
    --maxw: 1200px;
    --pad: clamp(20px, 5vw, 64px);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Lato", system-ui, sans-serif;
    color: var(--navy);
    background: #fff;
    line-height: 1.5;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad);
}

.accent {
    color: var(--cyan);
}

/* ==========================================================
   HERO — 1:1 Figma canvas (Frame 427318712, 1440 × 920).
   Fixed 1440-wide stage, absolute positions at exact Figma px,
   scaled by transform on viewports < 1440 (wrkman_b2b technique).
   ========================================================== */
.nw-hero-stage {
    width: 100%;
    overflow-x: clip;
    background:
        linear-gradient(rgba(204, 241, 255, .20), rgba(204, 241, 255, .20)),
        url('../images/hero-texture.png') center top / cover no-repeat,
        #EAF6FA;
}

.nw-hero {
    position: relative;
    width: 1440px;
    height: 920px;
    margin: 0 auto;
    background: transparent;
    overflow: visible;
    font-family: "Lato", system-ui, sans-serif;
    color: #0C2D52;
}

.nw-hero__bg {
    display: none;
}

.nw-hero__tint {
    display: none;
}

/* content body scaled 15% smaller than the navbar layer (origin top-center keeps it
   centered and pulls it up toward the navbar). Navbar bar/logo/search/links untouched. */
.nw-hero__body {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 920px;
    transform: scale(.85);
    transform-origin: center top;
    z-index: 3;
}

/* navbar */
/* full-bleed: canvas is scaled to 0.93, so widen + recenter the bar so it still
   reaches both viewport edges after the transform (1440/0.93 = 1548.39, centered on 720) */
.nw-navbar {
    position: absolute;
    top: 0;
    left: -54.19px;
    width: 1548.39px;
    height: 97px;
    background: rgba(255, 255, 255, .6);
    z-index: 2;
}

.nw-logo {
    position: absolute;
    top: 24px;
    left: 64px;
    width: 171px;
    height: 52px;
    z-index: 4;
}

.nw-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nw-search {
    position: absolute;
    top: 27px;
    left: 483.79px;
    width: 402.56px;
    height: 46.23px;
    z-index: 4;
    background: #fff;
    border: .81px solid #EFEFEF;
    border-radius: 20.34px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}

.nw-search__ic {
    width: 20.34px;
    height: 20.34px;
    margin-left: 19.5px;
    opacity: .6;
}

.nw-search__need {
    margin-left: 8px;
    font-size: 16px;
    color: #0C2D52;
    white-space: nowrap;
}

.nw-search__input {
    flex: 1;
    min-width: 20px;
    margin-left: 6px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: #0C2D52;
}

.nw-search__input::placeholder {
    color: #A6C5E2;
}

.nw-search__btn {
    width: 120.43px;
    height: 38.39px;
    margin-right: 4px;
    margin-left: auto;
    cursor: pointer;
    border: .81px solid #00B7FF;
    background: #F3F8F9;
    color: #2046CB;
    border-radius: 15.59px;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
}

.nw-links {
    position: absolute;
    top: 39px;
    left: 951px;
    display: flex;
    gap: 37px;
    z-index: 4;
}

.nw-links a {
    font-size: 16px;
    font-weight: 600;
    color: #0C2D52;
    white-space: nowrap;
}

.nw-links a:hover {
    color: #2046CB;
}

/* badge */
.nw-badge {
    position: absolute;
    top: 198px;
    left: 568px;
    width: 304.6px;
    height: 29.6px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14.8px;
    background: rgba(32, 70, 203, .10);
    border: 1px solid rgba(32, 70, 203, .30);
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #2046CB;
}

.nw-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2046CB;
}

/* headline */
.nw-headline {
    position: absolute;
    top: 250px;
    left: 435px;
    width: 570px;
    text-align: center;
    z-index: 3;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    color: #0C2D52;
}

.nw-headline__l2 {
    display: inline-block;
}

.nw-cyan {
    color: #00B7FF;
}

/* sub-copy */
.nw-sub {
    position: absolute;
    top: 402px;
    left: 450px;
    width: 540px;
    text-align: center;
    z-index: 3;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    color: #0C2D52;
}

/* CTAs */
.nw-ctas {
    position: absolute;
    top: 490px;
    left: 0;
    width: 1440px;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
}

.nw-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    color: #0C2D52;
}

.nw-cta__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E9E9E9;
    font-size: 18px;
    line-height: 1;
    padding-bottom: 3px;
}

.nw-cta__div {
    width: 1px;
    height: 40px;
    background: rgba(12, 45, 82, .35);
}

/* feature clouds */
.nw-clouds {
    position: absolute;
    top: 509px;
    left: 159px;
    width: 1122px;
    height: 394px;
    z-index: 2;
}

/* per-cloud wrapper: invisible to desktop layout (children stay absolutely
   positioned in the 1122-wide canvas); becomes a stacked cloud card on mobile. */
.nw-cloud-item {
    display: contents;
}

.nw-cloud {
    position: absolute;
    overflow: visible;
    filter: drop-shadow(0 24px 34px rgba(12, 45, 82, .10));
}

.nw-cloud--1 {
    left: 0;
    top: 31px;
    width: 331px;
    height: 237px;
}

.nw-cloud--2 {
    left: 359px;
    top: 91px;
    width: 422px;
    height: 303px;
}

.nw-cloud--3 {
    left: 791px;
    top: 35px;
    width: 331px;
    height: 237px;
}

.nw-cloud-img {
    position: absolute;
    z-index: 2;
    object-fit: contain;
}

.nw-cloud-img--artisan {
    left: 63px;
    top: 0;
    width: 92px;
    height: 123px;
}

.nw-cloud-img--router {
    left: 379px;
    top: 110px;
    width: 119px;
    height: 143px;
}

.nw-cloud-img--microwave {
    left: 977px;
    top: 56px;
    width: 94px;
    height: 48px;
}

.nw-cloud-img--blender {
    left: 961px;
    top: 28px;
    width: 46px;
    height: 76px;
}

.nw-cloud-txt {
    position: absolute;
    z-index: 2;
    text-align: center;
}

.nw-cloud-txt h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    color: #0C2D52;
}

.nw-cloud-txt p {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: rgba(12, 45, 82, .75);
}

.nw-cloud-txt--1 {
    left: 72px;
    top: 139px;
    width: 221px;
}

.nw-cloud-txt--2 {
    left: 470px;
    top: 229px;
    width: 224px;
}

.nw-cloud-txt--3 {
    left: 863px;
    top: 142px;
    width: 176px;
}

@media all {
    .nw-hero {
        transform-origin: top center;
        transform: scale(calc(100vw / 1440px * 0.93));
    }

    /* body scaled to .85 → content bottoms at ~768 canvas-units (was 903); trim the
       stage flow height to match so what-we-do rises instead of leaving a big gap */
    .nw-hero-stage {
        height: calc(790 * 100vw / 1440 * 0.93);
    }
}

/* ==========================================================
   HERO
   ========================================================== */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #E7F1F8;
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: .85;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
            rgba(224, 240, 250, .50) 0%,
            rgba(219, 237, 250, .22) 45%,
            rgba(233, 244, 251, .32) 100%);
}

/* navbar */
.nav {
    position: relative;
    z-index: 3;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    padding: 0 var(--pad);
    min-height: 97px;
}

.nav>a {
    justify-self: start;
}

.nav__logo {
    width: clamp(130px, 12vw, 172px);
    height: auto;
}

.nav__search {
    flex: 0 1 402px;
    width: 402px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #EFEFEF;
    border-radius: 23px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    padding: 5px 5px 5px 16px;
    gap: 8px;
    height: 46px;
}

.nav__search img {
    width: 20px;
    height: 20px;
    opacity: .6;
}

.nav__search .need {
    font-size: 15px;
    white-space: nowrap;
}

.nav__search input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 15px;
    min-width: 40px;
    background: transparent;
    color: var(--navy);
}

.nav__search button {
    border: 1px solid var(--cyan);
    background: var(--cardbg);
    color: var(--blue);
    font-weight: 600;
    font-size: 15px;
    padding: 8px 18px;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 36px);
    justify-self: end;
}

.nav__menu a {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.nav__menu a:hover {
    color: var(--blue);
}

/* hero centre content */
.hero__main {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(14px, 2.2vh, 26px);
    padding: clamp(16px, 3vh, 40px) var(--pad) 0;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(32, 70, 203, .1);
    border: 1px solid rgba(32, 70, 203, .3);
    font-size: clamp(11px, 1.1vw, 12px);
    font-weight: 600;
    color: var(--blue);
}

.hero__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
}

.hero__title {
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    line-height: .95;
}

.hero__title .l1 {
    display: block;
    font-size: clamp(34px, 6vw, 72px);
    letter-spacing: .5px;
}

.hero__title .l2 {
    display: block;
    font-size: clamp(26px, 4.4vw, 54px);
    margin-top: .15em;
}

.hero__sub {
    max-width: 620px;
    font-weight: 600;
    font-size: clamp(14px, 1.4vw, 16px);
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
}

.hero__cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 18px);
}

.hero__cta a::after {
    content: "\203A";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E9E9E9;
    font-size: 18px;
    padding-bottom: 2px;
}

.hero__cta .divider {
    width: 1px;
    height: 40px;
    background: rgba(12, 45, 82, .4);
}

/* hero feature clouds — exact Figma asset (three organic cyan-outline clouds
   with images breaking out the top, middle cloud staggered lower). */
.hero__features {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 var(--pad) clamp(8px, 1.8vh, 22px);
    width: 100%;
}

.hero__clouds {
    width: 100%;
    max-width: 1180px;
    height: auto;
    display: block;
}

/* decorative circle cluster, bottom-left of hero */
.hero__dots {
    position: absolute;
    left: clamp(-30px, -1vw, -10px);
    bottom: clamp(-8px, 1vh, 18px);
    z-index: 1;
    width: 170px;
    height: 60px;
    pointer-events: none;
}

.hero__dots::before,
.hero__dots::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(131, 207, 239, .9);
}

.hero__dots::before {
    width: 74px;
    height: 74px;
    left: 6px;
    bottom: -18px;
    background: rgba(255, 255, 255, .35);
}

.hero__dots::after {
    width: 34px;
    height: 34px;
    left: 92px;
    bottom: 6px;
    background: rgba(255, 255, 255, .6);
}

/* ==========================================================
   WHAT WE DO — 1:1 Figma canvas (1440 × 940), scaled < 1440
   ========================================================== */
.nw-wwd-stage {
    width: 100%;
    overflow-x: clip;
    background: #fff;
}

.nw-wwd {
    position: relative;
    width: 1440px;
    height: 1051px;
    margin: 0 auto;
    background: #fff;
    font-family: "Lato", system-ui, sans-serif;
    color: #0C2D52;
}

/* transition bubbles (Group 530) */
.nw-wwd__ring {
    position: absolute;
    border-radius: 50%;
    background: transparent;
    z-index: 0;
    pointer-events: none;
}

.nw-wwd__ring--1 {
    width: 809px;
    height: 809px;
    left: -247px;
    top: 630px;
    border: 1px solid #00B7FF;
}

.nw-wwd__ring--2 {
    width: 612px;
    height: 612px;
    left: -78px;
    top: 745px;
    border: 1px solid rgba(0, 183, 255, .5);
}

.nw-bub {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #B3E9FF;
    background: #fff;
    z-index: 1;
}

.nw-bub--1 {
    width: 100px;
    height: 100px;
    left: -56px;
    top: -51px;
}

.nw-bub--2 {
    width: 70px;
    height: 70px;
    left: 60px;
    top: -36px;
}

.nw-bub--3 {
    width: 40px;
    height: 40px;
    left: 146px;
    top: -21px;
}

.nw-bub--4 {
    width: 20px;
    height: 20px;
    left: 202px;
    top: -11px;
}

/* cyan bracket (Line 2) framing the heading */
.nw-wwd__bracket {
    position: absolute;
    left: 222px;
    top: -1px;
    width: 873px;
    height: 162px;
    z-index: 1;
}

.nw-wwd__dot {
    position: absolute;
    border-radius: 50%;
    background: #CCF1FF;
    z-index: 1;
}

.nw-wwd__dot--lg {
    width: 40px;
    height: 40px;
    left: 750px;
    top: 140px;
}

.nw-wwd__dot--sm {
    width: 20px;
    height: 20px;
    left: 714px;
    top: 150px;
}

.nw-wwd__head {
    position: absolute;
    top: 68px;
    left: 0;
    width: 1440px;
    text-align: center;
    z-index: 2;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    color: #0C2D52;
}

.nw-wwd__sub {
    position: absolute;
    top: 241px;
    left: 169px;
    width: 560px;
    z-index: 2;
}

.nw-wwd__sub h3 {
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    color: #0C2D52;
    max-width: 288px;
}

.nw-wwd__sub h3 .nw-cyan {
    font-style: italic;
    font-weight: 800;
}

.nw-wwd__sub p {
    margin-top: 14px;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #0C2D52;
    max-width: 549px;
}

.nw-card {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(23, 51, 107, .08);
    display: block;
}

.nw-card--electrical {
    left: 169px;
    top: 431px;
    width: 299px;
    height: 472px;
}

.nw-card--plumbing {
    left: 480px;
    top: 431px;
    width: 440px;
    height: 230px;
}

.nw-card--ac {
    left: 932px;
    top: 431px;
    width: 340px;
    height: 230px;
}

.nw-card--interior {
    left: 480px;
    top: 673px;
    width: 340px;
    height: 230px;
}

.nw-card--moving {
    left: 832px;
    top: 673px;
    width: 440px;
    height: 230px;
}

.nw-card__circle {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nw-card__circle--lg {
    width: 130px;
    height: 130px;
}

.nw-card__emoji {
    font-size: 35px;
    line-height: 1;
}

.nw-card__emoji--lg {
    font-size: 60px;
}

/* admin-uploaded service icon — sits inside the coloured circle and scales with
   it (works for the normal 70px and the large 130px electrical circle). */
.nw-card__img {
    width: 64%;
    height: 64%;
    object-fit: contain;
}

.nw-card__book {
    position: absolute;
    top: 26px;
    right: 24px;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #00B7FF;
}

.nw-card h4 {
    position: absolute;
    left: 32px;
    top: 110px;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #0C2D52;
}

.nw-card p {
    position: absolute;
    left: 32px;
    top: 142px;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: rgba(12, 45, 82, .75);
}

.nw-card--electrical h4 {
    top: 315px;
}

.nw-card--electrical p {
    top: 347px;
    width: 229px;
}

.nw-card--plumbing p {
    width: 384px;
}

.nw-card--ac p {
    width: 272px;
}

.nw-card--interior p {
    width: 277px;
}

.nw-card--moving p {
    width: 358px;
}

@media all {
    .nw-wwd {
        transform-origin: top center;
        transform: scale(calc(100vw / 1440px * 0.93));
    }

    .nw-wwd-stage {
        height: calc(1051 * 100vw / 1440 * 0.93);
    }
}

/* ==========================================================
   PROFESSIONAL — 1:1 Figma canvas (1440 × 1180), scaled < 1440
   ========================================================== */
.nw-pro-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow-x: clip;
    background: #fff;
}

.nw-pro {
    position: relative;
    width: 1440px;
    height: 1302px;
    margin: 0 auto;
    background: #fff;
    font-family: "Lato", system-ui, sans-serif;
    color: #0C2D52;
}

.nw-pro__pframe {
    position: absolute;
    left: 384px;
    top: 611px;
    width: 1009px;
    height: 712px;
    z-index: 0;
    pointer-events: none;
}

.nw-pro__rings {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.nw-pro__ring {
    position: absolute;
    border-radius: 50%;
    background: transparent;
}

.nw-pro__ring--1 {
    width: 809px;
    height: 809px;
    left: -247px;
    top: -421px;
    border: 1px solid #00B7FF;
}

.nw-pro__ring--2 {
    width: 612px;
    height: 612px;
    left: -78px;
    top: -306px;
    border: 1px solid rgba(0, 183, 255, .5);
}

.nw-pro__stamp {
    position: absolute;
    left: 101px;
    top: 11px;
    width: 283px;
    height: 283px;
    opacity: .9;
    z-index: 1;
}

.nw-pro__cdot {
    position: absolute;
    border-radius: 50%;
    background: #CCF1FF;
    z-index: 1;
}

.nw-pro__cdot--1 {
    left: 538px;
    top: -6px;
    width: 44px;
    height: 44px;
}

.nw-pro__cdot--2 {
    left: 544px;
    top: 51px;
    width: 22px;
    height: 22px;
}

.nw-pro__h1 {
    position: absolute;
    left: 371px;
    top: 158px;
    z-index: 2;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    color: #0C2D52;
    white-space: nowrap;
}

.nw-pro__h2 {
    position: absolute;
    left: 599px;
    top: 220px;
    z-index: 2;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 48px;
    color: #0C2D52;
    white-space: nowrap;
}

.nw-pro__sub {
    position: absolute;
    left: 451px;
    top: 284px;
    width: 638px;
    z-index: 2;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #0C2D52;
}

.nw-pro__book {
    position: absolute;
    left: 1047px;
    top: 368px;
    width: 319px;
    height: 66px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(23, 51, 107, .07);
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #122E49;
}

/* Full-bleed navy band. Uses pro-navy-blocks.png (text-free LEFT block + baked
   "50,000+" RIGHT block) mapped 1:1 to the canvas: image x0 -> canvas 0 (element
   offset 54.19), y21 (block top) -> band top (offset -21), native 1440x359 size.
   Solid #152D82 fills the -54..0 and 1440..1494 full-bleed extensions seamlessly.
   The left block carries NO baked "01"/notch — the DOM steps-card + step numbers
   own that, so step 01 is no longer duplicated. */
.nw-pro__band {
    position: absolute;
    left: -54.19px;
    top: 388px;
    width: 1548.39px;
    height: 254px;
    z-index: 1;
    background: #152D82 url('../images/pro-navy-blocks.png') 54.19px -21px / 1440px 359px no-repeat;
}

.nw-pro__band-gap {
    position: absolute;
    left: 603px;
    top: 367px;
    width: 55px;
    height: 359px;
    background: #fff;
    z-index: 2;
}

.nw-pro__stat-num {
    display: none;
    position: absolute;
    left: 826px;
    top: 452px;
    z-index: 2;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    font-size: 85px;
    line-height: 102px;
    color: #fff;
}

.nw-pro__stat-sub {
    display: none;
    position: absolute;
    left: 826px;
    top: 566px;
    width: 455px;
    z-index: 2;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #fff;
}

.nw-pro__steps-card {
    position: absolute;
    left: 67px;
    top: 501px;
    width: 557px;
    height: 471px;
    z-index: 2;
    background: #fff;
}

.nw-step-num {
    position: absolute;
    left: 58px;
    z-index: 3;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: #152D82;
}

.nw-step-title {
    position: absolute;
    left: 151px;
    z-index: 3;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #2046CB;
}

.nw-step-desc {
    position: absolute;
    left: 151px;
    width: 333px;
    z-index: 3;
    font-weight: 500;
    font-size: 15px;
    line-height: 19px;
    color: #0C2D52;
}

.nw-pro__partners-h {
    position: absolute;
    left: 776px;
    top: 706px;
    width: 361px;
    z-index: 3;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 34px;
    color: #2046CB;
}

.nw-pro__divider {
    position: absolute;
    left: 1008px;
    top: 836px;
    width: 0;
    height: 318px;
    z-index: 3;
    border-left: 1.5px dashed #C4D0E4;
}

.nw-partner-ic {
    position: absolute;
    z-index: 3;
    font-size: 30px;
    line-height: 1;
}

.nw-partner-tx {
    position: absolute;
    z-index: 3;
    width: 232px;
    font-weight: 500;
    font-size: 19px;
    line-height: 24px;
    color: #0C2D52;
}

@media all {
    .nw-pro {
        transform-origin: top center;
        transform: scale(calc(100vw / 1440px * 0.93));
    }

    .nw-pro-stage {
        height: calc(1302 * 100vw / 1440 * 0.93);
    }
}

/* ==========================================================
   MARKETPLACE — 1:1 Figma canvas (1440 × 989), scaled < 1440
   ========================================================== */
.nw-mkt-stage {
    width: 100%;
    overflow-x: clip;
    background: #F0FBFF;
}

.nw-mkt {
    position: relative;
    width: 1440px;
    height: 989px;
    margin: 0 auto;
    background: #F0FBFF;
    font-family: "Lato", system-ui, sans-serif;
    color: #0C2D52;
}

.nw-mkt__h {
    position: absolute;
    left: 131px;
    top: 140px;
    width: 405px;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    color: #0C2D52;
}

.nw-mkt__sub {
    position: absolute;
    left: 131px;
    top: 220px;
    width: 549px;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #0C2D52;
}

.nw-mkt__browse {
    position: absolute;
    left: 1040px;
    top: 230px;
    height: 52px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #D9E2EC;
    border-radius: 10px;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #122E49;
    box-shadow: 0 4px 14px rgba(23, 51, 107, .06);
}

.nw-mkt-card {
    position: absolute;
    top: 337px;
    width: 263px;
    height: 516px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #00B7FF;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}

.nw-mkt-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(0, 120, 180, .18);
}

.nw-mkt-card__img {
    position: absolute;
    left: 16px;
    top: 17px;
    width: 231px;
    height: 299px;
    object-fit: cover;
    border-radius: 12px;
}

.nw-mkt-card__body {
    position: absolute;
    left: 16px;
    top: 337px;
    width: 231px;
    height: 163px;
    background: #F9F9F9;
    border: 1px solid #B3E9FF;
    border-radius: 12px;
}

.nw-mkt-card__cat {
    position: absolute;
    left: 24px;
    top: 16px;
    font-weight: 700;
    font-size: 16px;
    color: #00B7FF;
}

.nw-mkt-card__name {
    position: absolute;
    left: 24px;
    top: 67px;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: rgba(12, 45, 82, .75);
}

.nw-mkt-card__price {
    position: absolute;
    left: 24px;
    top: 88px;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #0C2D52;
}

.nw-mkt-card__inst {
    position: absolute;
    left: 24px;
    top: 120px;
    font-weight: 500;
    font-size: 14px;
    color: rgba(12, 45, 82, .75);
}

@media all {
    .nw-mkt {
        transform-origin: top center;
        transform: scale(calc(100vw / 1440px * 0.93));
    }

    .nw-mkt-stage {
        height: calc(989 * 100vw / 1440 * 0.93);
    }
}

/* ==========================================================
   STATS — 1:1 Figma canvas (1440 × 378), scaled < 1440
   ========================================================== */
/* Full-bleed blue band: background on the 100%-wide stage so it touches both
   viewport edges above 1440px; the circles stay on the centered 1440 canvas. */
.nw-stats-stage {
    width: 100%;
    overflow-x: clip;
    background: linear-gradient(rgba(179, 233, 255, .9), rgba(179, 233, 255, .9)), url('../images/stats-bg.jpg') center/cover no-repeat, #B3E9FF;
}

.nw-stats {
    position: relative;
    width: 1440px;
    height: 378px;
    margin: 0 auto;
    font-family: "Lato", system-ui, sans-serif;
}

.nw-stat {
    position: absolute;
    top: 64px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(0, 183, 255, .5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.nw-stat__num {
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    font-size: 59px;
    line-height: 1;
    color: #0C2D52;
}

.nw-stat__lbl {
    margin-top: 12px;
    max-width: 150px;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    color: #0C2D52;
}

/* ==========================================================
   TESTIMONIALS — 1:1 Figma canvas (1440 × 470), scaled < 1440
   ========================================================== */
.nw-tst-stage {
    width: 100%;
    overflow-x: clip;
    background: #fff;
}

.nw-tst {
    position: relative;
    width: 1440px;
    height: 725px;
    margin: 0 auto;
    background: #fff;
    font-family: "Lato", system-ui, sans-serif;
    color: #0C2D52;
}

/* full-bleed blue lines framing the testimonials band (Figma 1440x291, #4691E3).
   Widened + offset so they reach both viewport edges after the 0.93 canvas scale
   (same technique as .nw-pro__band). */
.nw-tst::before,
.nw-tst::after {
    content: "";
    position: absolute;
    left: -54.19px;
    width: 1548.39px;
    height: 0;
    border-top: 1px solid #4691E3;
}

.nw-tst::before {
    top: 304px;
}

.nw-tst::after {
    top: 595px;
}

.nw-tst__head {
    position: absolute;
    top: 176px;
    left: 0;
    width: 1440px;
    text-align: center;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    color: #0C2D52;
}

.nw-tst__head em {
    font-style: italic;
}

.nw-tst-item {
    position: absolute;
    top: 335px;
    width: 290px;
}

.nw-tst-item__stars {
    --rating: 5;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 2px;
}

.nw-tst-item__stars::before {
    content: "\2605\2605\2605\2605\2605";
    background: linear-gradient(90deg, #F5B301 calc(var(--rating) / 5 * 100%), #D6DCE3 calc(var(--rating) / 5 * 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.nw-tst-item__quote {
    margin-top: 12px;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #0C2D52;
}

.nw-tst-item__av {
    position: absolute;
    top: 190px;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.nw-tst-item__who {
    position: absolute;
    top: 195px;
    left: 52px;
}

.nw-tst-item__who b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: #2046CB;
}

.nw-tst-item__who span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(12, 45, 82, .75);
}

.nw-tst__div {
    position: absolute;
    top: 362px;
    height: 150px;
    width: 0;
    border-left: 1.5px dotted #BFEBFB;
}

.nw-tst__div::before,
.nw-tst__div::after {
    content: "";
    position: absolute;
    left: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #CCF1FF;
}

.nw-tst__div::before {
    top: -20px;
}

.nw-tst__div::after {
    bottom: -20px;
}

/* ==========================================================
   FOOTER — 1:1 Figma canvas (1440 × 344), scaled < 1440
   ========================================================== */
.nw-ft-stage {
    width: 100%;
    overflow-x: clip;
    background: #0A1E3F;
}

.nw-ft {
    position: relative;
    width: 1440px;
    height: 344px;
    margin: 0 auto;
    background: #0A1E3F;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    color: #fff;
}

.nw-ft__logo {
    position: absolute;
    left: 112px;
    top: 64px;
    width: 154px;
    height: 52px;
}

.nw-ft__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nw-ft__about {
    position: absolute;
    left: 112px;
    top: 132px;
    width: 268px;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, .7);
}

.nw-ft__col {
    position: absolute;
    top: 64px;
    width: 268px;
}

.nw-ft__col h4 {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.nw-ft__col a,
.nw-ft__col div {
    display: block;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 14px;
}

.nw-ft__col a:hover {
    color: #fff;
}

.nw-ft__rule {
    position: absolute;
    left: 112px;
    top: 268px;
    width: 1216px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.nw-ft__copy {
    position: absolute;
    left: 112px;
    top: 296px;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.nw-ft__legal {
    position: absolute;
    top: 296px;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.nw-ft__legal:hover {
    color: #fff;
}

@media all {
    .nw-stats {
        transform-origin: top center;
        transform: scale(calc(100vw / 1440px * 0.93));
    }

    .nw-stats-stage {
        height: calc(378 * 100vw / 1440 * 0.93);
    }

    .nw-tst {
        transform-origin: top center;
        transform: scale(calc(100vw / 1440px * 0.93));
    }

    .nw-tst-stage {
        height: calc(725 * 100vw / 1440 * 0.93);
    }

    .nw-ft {
        transform-origin: top center;
        transform: scale(calc(100vw / 1440px * 0.93));
    }

    .nw-ft-stage {
        height: calc(344 * 100vw / 1440 * 0.93);
    }
}

/* ==========================================================
   GET THE APP — 1:1 Figma canvas (1440 × 520), scaled < 1440
   ========================================================== */
.nw-app-stage {
    width: 100%;
    overflow-x: clip;
    background: #fff;
}

.nw-app {
    position: relative;
    width: 1440px;
    height: 720px;
    margin: 0 auto;
    background: #fff;
    font-family: "Lato", system-ui, sans-serif;
    color: #0C2D52;
}

.nw-app__panel {
    position: absolute;
    left: 0;
    top: 181px;
    width: 912px;
    height: 339px;
    border-radius: 26px;
    background: #EAF5FD url('../images/app-panel-left.png') left center/cover no-repeat;
    overflow: hidden;
}


.nw-app__cyan {
    position: absolute;
    left: 942px;
    top: 81px;
    width: 425px;
    height: 339px;
    border-radius: 20px;
    background: #B3EBFF url('../images/app-panel-right.png') center/cover no-repeat;
    overflow: hidden;
}

.nw-app__h {
    position: absolute;
    left: 97px;
    top: 224px;
    z-index: 2;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    color: #0C2D52;
}

.nw-app__brand {
    color: #2046CB;
}

.nw-app__sub {
    position: absolute;
    left: 97px;
    top: 306px;
    width: 721px;
    z-index: 2;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    color: #0C2D52;
}

.nw-app__sub strong {
    font-weight: 700;
}

.nw-app__badges {
    display: contents;
    /* desktop: badges keep their absolute Figma positions */
}

.nw-app__badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 15px;
    padding: 8px 18px;
}

.nw-app__badge img {
    height: 37px;
    width: auto;
    display: block;
}

.nw-app__phone {
    position: absolute;
    left: 981px;
    top: 0;
    width: 476px;
    height: 420px;
    object-fit: contain;
    z-index: 3;
}

@media all {
    .nw-app {
        transform-origin: top center;
        transform: scale(calc(100vw / 1440px * 0.93));
    }

    .nw-app-stage {
        height: calc(720 * 100vw / 1440 * 0.93);
    }
}

/* ==========================================================
   Section base
   ========================================================== */
.section {
    padding-block: clamp(48px, 7vw, 96px);
    position: relative;
}

/* ==========================================================
   WHAT WE DO
   ========================================================== */
.wwd__head {
    text-align: center;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 4.5vw, 46px);
}

/* decorative cyan bracket + bubbles framing "What We Do" (exact Figma assets) */
.wwd {
    position: relative;
}

.wwd__head {
    position: relative;
    z-index: 1;
}

.wwd__deco {
    position: absolute;
    inset: 0 0 auto 0;
    height: 190px;
    pointer-events: none;
    z-index: 0;
}

.wwd__bracket {
    position: absolute;
    top: 8px;
    left: 3%;
    width: 84%;
    height: auto;
}

.wwd__bubbles {
    position: absolute;
    top: 0;
    left: clamp(-40px, -2vw, -20px);
    width: clamp(92px, 9vw, 122px);
    height: auto;
}

.wwd__conn-dots {
    position: absolute;
    top: 158px;
    left: 47%;
    width: 42px;
    height: auto;
}

.wwd__subhead {
    margin-top: clamp(28px, 4vw, 48px);
}

.wwd__subhead h2 {
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.15;
}

.wwd__subhead h2 span {
    display: block;
}

.wwd__subhead p {
    margin-top: 10px;
    max-width: 520px;
    font-size: 15px;
    color: var(--desc);
}

.wwd__grid {
    margin-top: clamp(28px, 4vw, 48px);
    display: grid;
    gap: clamp(16px, 2vw, 28px);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}

.svc {
    background: #fff;
    border-radius: 16px;
    padding: clamp(20px, 2vw, 28px);
    box-shadow: 0 12px 30px rgba(23, 51, 107, .08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
}

.svc:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(23, 51, 107, .15);
}

.svc--tall {
    grid-row: span 2;
}

.svc--tall h3 {
    margin-top: auto;
}

.svc__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.svc__icon {
    width: clamp(56px, 6vw, 84px);
    height: clamp(56px, 6vw, 84px);
    object-fit: contain;
}

.svc--tall .svc__icon {
    width: clamp(90px, 10vw, 122px);
    height: clamp(90px, 10vw, 122px);
}

.svc__book {
    font-size: 15px;
    font-weight: 600;
    color: #00AEEF;
    white-space: nowrap;
}

.svc__book:hover {
    text-decoration: underline;
}

.svc h3 {
    font-size: clamp(17px, 1.8vw, 20px);
    font-weight: 700;
}

.svc p {
    font-size: 14px;
    line-height: 1.4;
    color: var(--desc);
}

/* ==========================================================
   PROFESSIONAL
   ========================================================== */
.pro {
    padding-block: clamp(30px, 4vw, 56px) 0;
}

.pro__full {
    width: 100%;
    max-width: 1440px;
    height: auto;
    display: block;
    margin-inline: auto;
}

.pro__head {
    text-align: center;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
}

.pro__head .l1 {
    display: block;
    font-size: clamp(30px, 4.4vw, 50px);
}

.pro__head .l2 {
    display: block;
    font-size: clamp(24px, 3.6vw, 40px);
}

.pro__desc {
    text-align: center;
    max-width: 680px;
    margin: 16px auto 0;
    font-size: clamp(14px, 1.4vw, 16px);
}

.pro__btn-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(20px, 3vw, 32px);
}

.pro__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    padding: 15px 28px;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(12, 45, 82, .18);
}

.pro__grid {
    margin-top: clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

.pro__steps {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vw, 30px);
}

.pro__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
}

.pro__step .num {
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 4vw, 44px);
    color: #152D82;
    line-height: 1;
}

.pro__step h4 {
    font-size: clamp(16px, 1.7vw, 18px);
    font-weight: 700;
    color: #2A54CB;
}

.pro__step p {
    font-size: 13px;
    color: var(--desc);
    margin-top: 4px;
}

.pro__step--hl {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 12px 30px rgba(23, 51, 107, .1);
}

.pro__stat {
    background: #142E82;
    color: #fff;
    border-radius: 16px;
    padding: clamp(28px, 4vw, 48px);
    position: relative;
    overflow: hidden;
}

.pro__stat::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle at 70% 30%, rgba(45, 84, 220, .9), transparent 60%);
}

.pro__stat .big {
    position: relative;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 6vw, 72px);
}

.pro__stat .sub {
    position: relative;
    font-size: clamp(14px, 1.4vw, 18px);
    margin-top: 8px;
}

.pro__partners {
    margin-top: clamp(24px, 3vw, 36px);
}

.pro__partners h3 {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    margin-bottom: 20px;
}

.pro__plist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
}

.pro__p {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pro__p img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.pro__p span {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

/* ==========================================================
   MARKETPLACE
   ========================================================== */
.mkt {
    background: transparent;
    padding-block: 0;
}

.mkt>.container {
    max-width: 100%;
    padding-inline: 0;
}

.mkt__full {
    width: 100%;
    height: auto;
    display: block;
}

.mkt__top {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
}

.mkt__title h2 {
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.15;
}

.mkt__title h2 .accent {
    display: block;
}

.mkt__title p {
    margin-top: 12px;
    max-width: 560px;
    font-size: 15px;
}

.mkt__browse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--navy);
    background: #fff;
    border: 1px solid #D9E2EC;
    border-radius: 10px;
    padding: 14px 26px;
    box-shadow: 0 4px 14px rgba(23, 51, 107, .06);
    white-space: nowrap;
}

.mkt__browse:hover {
    border-color: var(--cyan);
}

.mkt__grid {
    margin-top: clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.8vw, 24px);
}

.mkt-card {
    background: #fff;
    border: 1px solid var(--cyan);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s, box-shadow .18s;
}

.mkt-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(0, 120, 180, .18);
}

.mkt-card>img {
    width: 100%;
    aspect-ratio: 233/301;
    object-fit: cover;
}

.mkt-card .body {
    padding: 18px 20px 22px;
}

.mkt-card .cat {
    font-size: 15px;
    font-weight: 700;
    color: var(--cyan);
}

.mkt-card .name {
    font-size: 14px;
    color: var(--desc);
    margin-top: 20px;
}

.mkt-card .price {
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
}

.mkt-card .install {
    font-size: 13px;
    font-weight: 600;
    color: #17a06b;
    margin-top: 12px;
}

/* ==========================================================
   STATS
   ========================================================== */
.stats {
    position: relative;
    padding-block: clamp(40px, 6vw, 70px);
    background: linear-gradient(rgba(150, 214, 242, .82), rgba(150, 214, 242, .82)), url('../images/stats-bg.jpg') center/cover no-repeat;
}

.stats__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.stat {
    flex: 0 1 220px;
    aspect-ratio: 1;
    max-width: 240px;
    margin-inline: -14px;
    background: rgba(60, 183, 232, .90);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stat .num {
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1;
}

.stat .lbl {
    font-size: clamp(13px, 1.5vw, 17px);
    font-weight: 700;
    line-height: 1.15;
    margin-top: 12px;
}

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.tst__head {
    text-align: center;
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 30px);
}

.tst__head .accent {
    color: var(--cyan);
}

.tst__head em {
    display: block;
    font-style: italic;
    margin-top: 2px;
}

.tst__grid {
    margin-top: clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px);
}

.tst {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tst__stars {
    color: #F5B301;
    font-size: 20px;
    letter-spacing: 2px;
}

.tst__stars .half {
    position: relative;
    color: #DCE2EC;
}

.tst__stars .half::before {
    content: "\2605";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: #F5B301;
}

.tst p {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(12, 45, 82, .85);
    flex: 1;
}

.tst__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tst__av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex: none;
}

.tst__av--green {
    background: #CDEFC9;
    color: #3F9E4C;
}

.tst__av--blue {
    background: #CFE6FA;
    color: #2F6FBF;
}

.tst__av--purple {
    background: #E9D9F7;
    color: #8A4FC0;
}

.tst__author b {
    display: block;
    font-size: 14px;
    font-style: italic;
}

.tst__author span {
    font-size: 13px;
    color: rgba(12, 45, 82, .6);
}

/* ==========================================================
   APP
   ========================================================== */
.app__wrap {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(24px, 4vw, 60px);
    background: #C6E9FA;
    border-radius: 26px;
    padding: clamp(28px, 4vw, 56px);
}

.app__text h2 {
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 4vw, 50px);
}

.app__text h2 .blue {
    color: var(--blue);
}

.app__text p {
    margin-top: 16px;
    font-size: clamp(15px, 1.5vw, 20px);
    line-height: 1.35;
}

.app__text p strong {
    display: block;
    margin-top: 6px;
}

.app__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
}

.app__badges img {
    height: clamp(44px, 4vw, 56px);
    width: auto;
}

.app__phone {
    display: flex;
    justify-content: center;
}

.app__phone img {
    max-width: min(100%, 420px);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.ft {
    background: #0B1F45;
    color: #C2CFE0;
    padding-block: clamp(40px, 5vw, 64px);
}

.ft__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: clamp(24px, 3vw, 48px);
}

.ft__logo {
    width: 172px;
    margin-bottom: 22px;
}

.ft__about {
    font-size: 14px;
    line-height: 1.6;
    color: #93A6C0;
    max-width: 260px;
}

.ft__col h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 18px;
}

.ft__col a,
.ft__col div {
    display: block;
    font-size: 14px;
    margin-bottom: 16px;
}

.ft__col a:hover {
    color: #fff;
}

.ft__rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin: clamp(28px, 4vw, 44px) 0 22px;
}

.ft__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    justify-content: space-between;
    font-size: 13px;
    color: #8FA1BC;
}

.ft__bottom a {
    color: #C2CFE0;
}

.ft__heart {
    color: #ff5a5a;
}

/* ==========================================================
   Responsive breakpoints
   ========================================================== */
@media (max-width: 1024px) {
    .pro__grid {
        grid-template-columns: 1fr;
    }

    .app__wrap {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .app__phone {
        order: -1;
    }

    .app__badges {
        justify-content: center;
    }

    .ft__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 820px) {
    .wwd__grid {
        grid-template-columns: 1fr 1fr;
    }

    .svc--tall {
        grid-row: auto;
    }

    .mkt__grid {
        grid-template-columns: 1fr 1fr;
    }

    .tst__grid {
        grid-template-columns: 1fr;
    }

    .nav {
        grid-template-columns: auto 1fr;
        row-gap: 14px;
    }

    .nav__search {
        grid-column: 1 / -1;
        order: 3;
        width: 100%;
        margin-inline: 0;
    }

    .nav__menu {
        justify-self: end;
        order: 2;
    }
}

@media (max-width: 560px) {

    .wwd__grid,
    .mkt__grid,
    .pro__plist {
        grid-template-columns: 1fr;
    }

    .stat {
        margin-inline: -8px;
        flex-basis: 150px;
    }

    .ft__grid {
        grid-template-columns: 1fr;
    }

    .nav__search .need {
        display: none;
    }
}

/* ==========================================================
   MODALS (fixed to viewport, responsive)
   ========================================================== */
.nw-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 48px 20px;
    background: rgba(12, 37, 82, .55);
}

.nw-overlay.is-open {
    display: flex;
}

.nw-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.nw-modal {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 90px -20px rgba(10, 28, 64, .55);
    overflow: hidden;
}

.nw-modal--wide {
    max-width: 613px;
}

.nw-modal--plain {
    max-width: 613px;
    padding-top: 8px;
}

.nw-decor {
    position: relative;
    height: 44px;
    background: #2B4FD0;
    line-height: 0;
}

.nw-decor-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.nw-close {
    position: absolute;
    top: 100%;
    right: 26px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: #fff;
    color: #2B4FD0;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(10, 28, 64, .18);
    z-index: 2;
}

.nw-close--outline {
    top: 20px;
    transform: none;
    border: 2px solid #2B4FD0;
    box-shadow: none;
}

.nw-close:hover {
    background: #F3F8FE;
}

.nw-body {
    padding: 34px clamp(22px, 4vw, 42px) 40px;
}

.nw-modal--plain .nw-body {
    padding: 8px clamp(22px, 5vw, 48px) 40px;
    text-align: left;
}

.nw-title {
    font-family: "Bricolage Grotesque", "Lato", sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.1;
}

/* reset the hero .nw-sub absolute/left/top/width that would otherwise leak in here */
.nw-modal .nw-sub {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    text-align: center;
    margin-top: 12px;
    font-size: clamp(15px, 1.6vw, 18px);
}

.nw-sub strong {
    color: var(--blue);
    font-weight: 700;
}

.nw-sub--tight {
    font-size: 16px;
    line-height: 1.4;
}

.nw-sub--tight strong {
    color: var(--navy);
}

/* reset the hero .nw-search absolute/left/width/top that would otherwise leak in here */
.nw-modal .nw-search {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 22px;
    height: 56px;
    border: 1px solid #E3E8EF;
    border-radius: 14px;
    display: flex;
    align-items: center;
    box-shadow: none;
}

.nw-modal .nw-search-ic {
    width: 20px;
    height: 20px;
    margin: 0 14px 0 20px;
    opacity: .5;
}

.nw-modal .nw-search input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 16px;
    color: var(--navy);
    background: transparent;
}

.nw-modal .nw-search input::placeholder {
    color: #9AA7B8;
}

.nw-poplabel {
    margin: 26px 0 14px;
    font-size: 15px;
    font-weight: 700;
}

.nw-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.nw-svc-card {
    background: #FAFBFF;
    border: 1px solid #EDF1F7;
    border-radius: 14px;
    cursor: pointer;
    padding: 14px 10px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.nw-svc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(23, 51, 107, .12);
    border-color: var(--cyan);
}

.nw-svc-card img {
    width: 70px;
    height: 62px;
    object-fit: contain;
}

.nw-svc-card span {
    font-size: 15px;
    font-weight: 400;
    /* regular, matches Figma (not bold) */
    text-align: center;
    line-height: 1.25;
}

.nw-form {
    margin-top: 22px;
}

.nw-field {
    display: block;
    margin-bottom: 18px;
}

.nw-label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
}

.nw-label em {
    font-weight: 400;
    font-style: normal;
    color: #9AA7B8;
}

.nw-field input,
.nw-field textarea {
    width: 100%;
    border: 1px solid #E3E8EF;
    border-radius: 12px;
    padding: 15px 16px;
    font-size: 16px;
    color: var(--navy);
    font-family: inherit;
    outline: 0;
    background: #fff;
}

.nw-field input::placeholder,
.nw-field textarea::placeholder {
    color: #B0BAC8;
}

.nw-field input:focus,
.nw-field textarea:focus {
    border-color: var(--cyan);
}

.nw-field textarea {
    resize: vertical;
}

.nw-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.nw-choose {
    margin: 6px 0 14px;
    font-size: 15px;
    font-weight: 700;
}

.nw-check {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    cursor: pointer;
}

.nw-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #17336B;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex: none;
}

.nw-check input:checked {
    background: var(--cyan);
    border-color: var(--cyan);
}

.nw-check input:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.nw-check span {
    font-size: 17px;
}

.nw-submit {
    width: 100%;
    margin-top: 12px;
    padding: 16px 24px;
    border: 0;
    cursor: pointer;
    background: var(--cyan);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 12px;
    font-family: inherit;
    transition: background .15s, transform .1s;
}

/* space between the services grid and the Continue button, matched 1:1 to
   the Figma (search pop-up / "Find an artisan" modal). Targets the modal's
   Continue directly so it holds regardless of the popular/results grid swap. */
#modalArtisan [data-nw-artisan-continue] {
    margin-top: 123px;
}

.nw-submit:hover {
    background: #00A5E6;
}

.nw-submit:active {
    transform: translateY(1px);
}

.nw-rocket {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 14px auto 4px;
}

@media (max-width: 720px) {
    .nw-svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nw-grid2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   MOBILE + TABLET (<= 1024px) — reflow the fixed 1440 canvases.
   The desktop technique is a 1440-wide stage with absolutely
   positioned children scaled by transform. On phones/tablets that
   scale shrinks every text node to an unreadable size. At and below
   1024px we drop the transform, free the stage heights, turn each
   1440 canvas into a fluid centered column, and lay every absolutely
   positioned child back into normal document flow. Above 1024px the
   original desktop design is untouched.
   ========================================================== */
@media (max-width: 1024px) {

    /* hard guard against any horizontal overflow / edge-clipping */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* --- universal canvas reset: kill the scale + fixed 1440 width.
           Content is capped to a centered reading column so it looks
           intentional on wide tablets; the full-bleed stage bg still
           spans edge to edge. --- */
    .nw-hero,
    .nw-wwd,
    .nw-pro,
    .nw-mkt,
    .nw-stats,
    .nw-tst,
    .nw-app,
    .nw-ft {
        transform: none;
        width: 100%;
        max-width: 760px;
        height: auto;
        margin: 0 auto;
    }

    .nw-hero-stage,
    .nw-wwd-stage,
    .nw-pro-stage,
    .nw-mkt-stage,
    .nw-stats-stage,
    .nw-tst-stage,
    .nw-app-stage,
    .nw-ft-stage {
        height: auto;
    }

    /* =================== HERO =================== */
    /* the in-canvas navbar/logo/search/links are hidden here — the real,
       unscaled hamburger bar (partials/mobile-nav) replaces them. */
    .nw-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 22px 16px 34px;
        overflow-x: clip;
    }

    .nw-hero__bg,
    .nw-hero__tint,
    .nw-navbar,
    .nw-logo,
    .nw-links,
    .nw-search {
        display: none;
    }

    .nw-hero__body {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .nw-hero__body>* {
        max-width: 100%;
    }

    .nw-badge {
        position: static;
        width: auto;
        max-width: 100%;
        height: auto;
        padding: 7px 16px;
        margin-top: 8px;
        white-space: normal;
        text-align: center;
        line-height: 1.4;
    }

    .nw-headline {
        position: static;
        width: 100%;
        font-size: 34px;
        line-height: 41px;
    }

    .nw-sub {
        position: static;
        width: 100%;
        font-size: 15px;
        line-height: 23px;
    }

    .nw-ctas {
        position: static;
        width: 100%;
        flex-direction: column;
        gap: 14px;
        margin-top: 4px;
    }

    .nw-cta__div {
        display: none;
    }

    /* clouds → stacked cloud cards (shape + image breaking out top + label inside) */
    .nw-clouds {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .nw-cloud-item {
        display: block;
        position: relative;
        width: min(290px, 84vw);
        margin: 0 auto;
        padding-top: 34px;
    }

    .nw-cloud {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        filter: drop-shadow(0 16px 24px rgba(12, 45, 82, .10));
    }

    .nw-cloud--1,
    .nw-cloud--2,
    .nw-cloud--3 {
        left: auto;
        top: auto;
    }

    /* product image(s) break out the top of the cloud */
    .nw-cloud-img {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: auto;
        height: auto;
    }

    .nw-cloud-img--artisan {
        max-height: 96px;
    }

    .nw-cloud-img--router {
        max-height: 88px;
        top: 4px;
    }

    .nw-cloud-img--microwave {
        max-height: 46px;
        left: 40%;
        top: 26px;
        /* bottom-aligned with the blender (both rest on the cloud) */
    }

    .nw-cloud-img--blender {
        max-height: 70px;
        left: 60%;
        top: 2px;
    }

    /* label centered in the lower body of the cloud */
    .nw-cloud-txt {
        position: absolute;
        left: 50%;
        bottom: 15%;
        top: auto;
        transform: translateX(-50%);
        width: 82%;
        max-width: none;
        text-align: center;
    }

    .nw-cloud-txt h3 {
        font-size: 15px;
        line-height: 18px;
    }

    .nw-cloud-txt p {
        font-size: 12px;
        line-height: 15px;
        margin-top: 6px;
    }

    /* per-cloud tuning so the top image never overlaps the label */
    /* cloud 2 (Installation Services) — flat wide shape: lift the router fully
       above the cloud body and drop the label lower */
    .nw-cloud-item:nth-child(2) {
        padding-top: 46px;
    }

    .nw-cloud-txt--2 {
        bottom: 10%;
    }

    /* cloud 3 (Appliance Marketplace) — center the microwave+blender cluster on top */
    .nw-cloud-item:nth-child(3) {
        padding-top: 10px;
    }

    .nw-cloud-txt--3 {
        bottom: 16%;
    }

    /* =================== WHAT WE DO =================== */
    .nw-wwd {
        display: flex;
        flex-direction: column;
        position: relative;
        /* anchor the bracket line + balls */
        padding: 42px 20px 44px;
    }

    /* hide the big arc rings + corner bubbles, but KEEP the cyan bracket
       line + the two balls that frame the "What We Do" heading (web parity) */
    .nw-wwd__ring,
    .nw-bub {
        display: none;
    }

    .nw-wwd__bracket {
        display: block;
        position: absolute;
        left: 50%;
        top: 26px;
        transform: translateX(-50%);
        width: 300px;
        max-width: 88%;
        height: auto;
        z-index: 0;
    }

    .nw-wwd__dot {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background: #CCF1FF;
    }

    .nw-wwd__dot--lg {
        width: 22px;
        height: 22px;
        left: 56%;
        top: 70px;
    }

    .nw-wwd__dot--sm {
        width: 12px;
        height: 12px;
        left: 49%;
        top: 75px;
    }

    .nw-wwd__head {
        position: relative;
        /* sit above the bracket */
        top: 0;
        /* reset desktop's top:68px offset */
        left: auto;
        z-index: 1;
        width: 100%;
        font-size: 30px;
        line-height: 36px;
        margin-bottom: 34px;
    }

    .nw-wwd__sub {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        margin: 0 0 26px;
    }

    .nw-wwd__sub h3 {
        font-size: 22px;
        line-height: 28px;
        max-width: none;
        word-break: break-word;
    }

    .nw-wwd__sub p {
        max-width: none;
    }

    .nw-card {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin: 0 0 16px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .nw-card__circle {
        position: static;
        left: auto;
        top: auto;
    }

    .nw-card__circle--lg {
        width: 96px;
        height: 96px;
    }

    .nw-card__book {
        position: absolute;
        top: 24px;
        right: 24px;
    }

    .nw-card h4 {
        position: static;
        left: auto;
        top: auto;
        padding-right: 90px;
    }

    .nw-card--electrical h4 {
        top: auto;
    }

    .nw-card p {
        position: static;
        left: auto;
        top: auto;
    }

    .nw-card--electrical p,
    .nw-card--plumbing p,
    .nw-card--ac p,
    .nw-card--interior p,
    .nw-card--moving p {
        width: auto;
    }

    /* =================== PROFESSIONAL =================== */
    /* block flow (not flex) so partner icon+label pairs can sit inline */
    .nw-pro {
        display: block;
        padding: 44px 20px;
    }

    .nw-pro__pframe,
    .nw-pro__rings,
    .nw-pro__stamp,
    .nw-pro__cdot,
    .nw-pro__band,
    .nw-pro__band-gap,
    .nw-pro__steps-card,
    .nw-pro__divider {
        display: none;
    }

    .nw-pro__h1 {
        position: static;
        left: auto;
        top: auto;
        white-space: normal;
        font-size: 22px;
        line-height: 28px;
    }

    .nw-pro__h2 {
        position: static;
        left: auto;
        top: auto;
        white-space: normal;
        font-size: 30px;
        line-height: 36px;
        margin-top: 4px;
    }

    .nw-pro__sub {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        margin-top: 12px;
    }

    .nw-pro__book {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 320px;
        height: 56px;
        margin: 22px 0;
    }

    /* rebuild the "50,000+" figure as a real navy card (baked PNG band is hidden) */
    .nw-pro__stat-num {
        display: block;
        position: static;
        left: auto;
        top: auto;
        margin: 6px 0 0;
        padding: 30px 20px 2px;
        background: #152D82;
        color: #fff;
        font-size: 52px;
        line-height: 1;
        text-align: center;
        border-radius: 16px 16px 0 0;
    }

    .nw-pro__stat-sub {
        display: block;
        position: static;
        left: auto;
        top: auto;
        width: auto;
        margin: 0 0 10px;
        padding: 4px 24px 30px;
        background: #152D82;
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        text-align: center;
        border-radius: 0 0 16px 16px;
    }

    /* steps 01-04 flow as a list (spans forced to block; inline top from style="" is ignored once static) */
    .nw-step-num {
        position: static;
        left: auto;
        display: block;
        font-size: 32px;
        margin-top: 22px;
    }

    .nw-step-title {
        position: static;
        left: auto;
        display: block;
        font-size: 18px;
        margin-top: 4px;
    }

    .nw-step-desc {
        position: static;
        left: auto;
        display: block;
        width: auto;
        margin-top: 4px;
    }

    .nw-pro__partners-h {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        font-size: 22px;
        margin: 30px 0 4px;
    }

    .nw-partner-ic {
        position: static;
        left: auto;
        top: auto;
        display: inline-block;
        width: 28px;
        margin: 14px 6px 0 0;
        font-size: 22px;
        vertical-align: top;
    }

    .nw-partner-tx {
        position: static;
        left: auto;
        top: auto;
        display: inline-block;
        width: calc(100% - 40px);
        font-size: 16px;
        margin-top: 14px;
        vertical-align: top;
    }

    /* =================== MARKETPLACE (2-column product grid) =================== */
    .nw-mkt {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 14px;
        row-gap: 20px;
        align-items: stretch;
        /* the two cards in each row share the tallest height */
        padding: 40px 16px;
    }

    .nw-mkt__h {
        position: static;
        left: auto;
        top: auto;
        grid-column: 1 / -1;
        width: 100%;
        font-size: 26px;
        line-height: 32px;
    }

    .nw-mkt__sub {
        position: static;
        left: auto;
        top: auto;
        grid-column: 1 / -1;
        width: 100%;
        margin: 12px 0 0;
    }

    .nw-mkt__browse {
        position: static;
        left: auto;
        top: auto;
        grid-column: 1 / -1;
        width: 100%;
        max-width: 300px;
        margin: 20px 0 8px;
        justify-content: center;
    }

    .nw-mkt-card {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        max-width: none;
        height: 100%;
        /* fill the equal-height grid row */
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .nw-mkt-card__img {
        position: static;
        left: auto;
        top: auto;
        display: block;
        width: 100%;
        height: 150px;
        margin-bottom: 10px;
    }

    .nw-mkt-card__body {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        flex: 1;
        /* stretch body to fill the equal-height card */
        display: flex;
        flex-direction: column;
        margin: 0 8px 8px;
        padding: 12px;
    }

    .nw-mkt-card__cat {
        position: static;
        left: auto;
        top: auto;
        display: block;
        font-size: 13px;
    }

    .nw-mkt-card__name {
        position: static;
        left: auto;
        top: auto;
        display: block;
        min-height: 40px;
        /* reserve 2 lines so price/install line up across cards */
        margin-top: 8px;
        line-height: 1.3;
    }

    .nw-mkt-card__price {
        position: static;
        left: auto;
        top: auto;
        display: block;
        margin-top: 4px;
        font-size: 16px;
        /* reduced so long prices (₦1,200,000) stay on one line */
        white-space: nowrap;
    }

    .nw-mkt-card__inst {
        position: static;
        left: auto;
        top: auto;
        display: block;
        margin-top: 8px;
        /* size unchanged — keep the install text readable */
        font-size: 12px;
    }

    /* =================== STATS =================== */
    .nw-stats {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        padding: 40px 20px;
    }

    .nw-stat {
        position: static;
        left: auto;
        top: auto;
        width: 140px;
        height: 140px;
    }

    .nw-stat__num {
        font-size: 38px;
    }

    .nw-stat__lbl {
        font-size: 14px;
    }

    /* =================== TESTIMONIALS =================== */
    .nw-tst {
        display: flex;
        flex-direction: column;
        padding: 44px 20px;
        height: auto;
    }

    /* hide the desktop full-bleed blue frame lines (positioned for the fixed
       1440 layout) — on the stacked mobile layout they cut across a card. The
       per-card border-bottom already separates the testimonials here. */
    .nw-tst::before,
    .nw-tst::after {
        display: none;
    }

    .nw-tst__head {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 26px;
    }

    .nw-tst__div {
        display: none;
    }

    .nw-tst-item {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        margin-bottom: 28px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EEF4F8;
        text-align: center;
        /* centre stars, quote, and the avatar+name row on mobile */
    }

    .nw-tst-item:last-of-type {
        border-bottom: 0;
    }

    .nw-tst-item__quote {
        margin: 12px 0 16px;
        font-size: 15px;
        line-height: 22px;
    }

    .nw-tst-item__av {
        position: static;
        left: auto;
        top: auto;
        display: inline-flex;
        vertical-align: middle;
        margin-right: 12px;
    }

    .nw-tst-item__who {
        position: static;
        left: auto;
        top: auto;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        /* name/location stay left beside the avatar, whole unit centred */
    }

    /* =================== GET THE APP =================== */
    .nw-app-stage {
        padding: 20px;
    }

    .nw-app {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* bring the web version's diagonal "lining" texture onto mobile */
        background: #C6E9FA url('../images/app-panel-left.png') center/cover no-repeat;
        border-radius: 24px;
        padding: 34px 22px;
        overflow: hidden;
    }

    .nw-app__panel,
    .nw-app__cyan {
        display: none;
    }

    .nw-app__phone {
        position: static;
        left: auto;
        top: auto;
        order: -1;
        width: auto;
        max-width: 230px;
        height: auto;
        margin: 0 auto 6px;
    }

    .nw-app__h {
        position: static;
        left: auto;
        top: auto;
        font-size: 30px;
        line-height: 36px;
    }

    .nw-app__brand {
        color: #2046CB;
    }

    .nw-app__sub {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        margin: 12px 0 0;
        font-size: 16px;
        line-height: 24px;
    }

    .nw-app__badges {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 18px;
    }

    .nw-app__badge {
        position: static;
        left: auto;
        top: auto;
        margin: 0;
        padding: 11px 18px;      /* smaller Figma button so both fit side by side on phones */
        border-radius: 16px;
    }

    .nw-app__badge img {
        height: 30px;
    }

    /* =================== FOOTER =================== */
    .nw-ft {
        display: flex;
        flex-direction: column;
        padding: 44px 24px;
    }

    .nw-ft__logo {
        position: static;
        left: auto;
        top: auto;
        margin-bottom: 16px;
    }

    .nw-ft__about {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 320px;
        margin-bottom: 28px;
    }

    .nw-ft__col {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        margin-bottom: 24px;
    }

    .nw-ft__rule {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        margin: 6px 0 20px;
    }

    .nw-ft__copy {
        position: static;
        left: auto;
        top: auto;
        margin-bottom: 10px;
    }

    .nw-ft__legal {
        position: static;
        left: auto;
        top: auto;
        display: inline-block;
        margin-right: 20px;
    }
}

/* --- very small phones (<= 380px): tighten the stats circles --- */
@media (max-width: 380px) {
    .nw-stat {
        width: 128px;
        height: 128px;
    }

    .nw-stat__num {
        font-size: 34px;
    }
}

/* ==========================================================
   MOBILE HAMBURGER NAVBAR (<= 1024px) — real, unscaled bar
   that matches the live site's header pattern. Hidden on desktop.
   ========================================================== */
.nw-mnav {
    display: none;
}

@media (max-width: 1024px) {
    .nw-mnav {
        display: flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 200;
        width: 100%;
        padding: 10px 14px;
        background: #fff;
        border-bottom: 1px solid #EEF3F7;
        box-shadow: 0 2px 12px rgba(12, 45, 82, .06);
    }

    .nw-mnav__logo {
        flex: none;
    }

    .nw-mnav__logo img {
        height: 38px;
        width: auto;
        display: block;
    }

    /* search pill in the bar (between logo and hamburger) — taps open the search modal */
    .nw-mnav__search {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 42px;
        background: #fff;
        border: 1px solid #E6ECF2;
        border-radius: 21px;
        padding: 0 14px;
        cursor: pointer;
        font: inherit;
        box-shadow: 0 2px 8px rgba(12, 45, 82, .05);
    }

    .nw-mnav__search img {
        width: 16px;
        height: 16px;
        opacity: .55;
        flex: none;
    }

    .nw-mnav__search span {
        font-size: 14px;
        color: #9BB2CB;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nw-mnav__toggle {
        width: 44px;
        height: 44px;
        flex: none;
        border: 0;
        background: transparent;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 9px;
    }

    .nw-mnav__toggle span {
        display: block;
        width: 26px;
        height: 2.5px;
        background: #0C2D52;
        border-radius: 2px;
        transition: transform .25s, opacity .25s;
    }

    .nw-mnav.is-open .nw-mnav__toggle span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

    .nw-mnav.is-open .nw-mnav__toggle span:nth-child(2) {
        opacity: 0;
    }

    .nw-mnav.is-open .nw-mnav__toggle span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }

    /* dropdown panel — links only now */
    .nw-mnav__panel {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #EEF3F7;
        box-shadow: 0 14px 26px rgba(12, 45, 82, .12);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .nw-mnav.is-open .nw-mnav__panel {
        max-height: 320px;
    }

    .nw-mnav__links {
        display: flex;
        flex-direction: column;
        padding: 4px 16px 14px;
    }

    .nw-mnav__links a {
        padding: 14px 4px;
        font-size: 16px;
        font-weight: 600;
        color: #0C2D52;
        border-bottom: 1px solid #F1F5F9;
    }

    .nw-mnav__links a:last-child {
        border-bottom: 0;
    }

    .nw-mnav__links a:active {
        color: #2046CB;
    }
}

/* ==========================================================
   SEARCH INQUIRY MODAL (#serviceModal) — reduce the spacing
   between fields by 10% (spaces only; text/inputs untouched).
   Scoped to #serviceModal + loaded only on the new website
   (app.css / the live site is untouched). Higher specificity
   than the app.css utility classes, so these win.
   Originals: sub-heading 33, mb-20 20, mb-32 32, mb-46 46,
   mb-13 13, #selected-services gap 16  ->  all × 0.81 (2× 10% off).
   ========================================================== */
#serviceModal .sub-heading-33 {
    margin-bottom: 27px;
}

#serviceModal .mb-20 {
    margin-bottom: 16px;
}

#serviceModal .mb-32 {
    margin-bottom: 26px;
}

#serviceModal .mb-46 {
    margin-bottom: 37px;
}

#serviceModal .mb-13 {
    margin-bottom: 11px !important;
}

#serviceModal #selected-services {
    gap: 13px;
}

/* ==========================================================
   FIND-AN-ARTISAN modal — search shows matched service CARDS
   (sliced from the Figma card set). Same grid as Popular Services.
   ========================================================== */
.nw-result-card {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}

.nw-result-card img {
    width: 100%;
    height: auto;
    display: block;
}

.nw-result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(23, 51, 107, .12);
}

.nw-no-results {
    padding: 24px 4px;
    color: #9AA7B8;
    font-size: 15px;
}