.pmb-sketch,
.pmb-sketch * {
    box-sizing: border-box;
}

.pmb-sketch {
    --pmb-hero-fg: #f4f4f2;
    --pmb-hero-muted: rgba(255, 255, 255, .80);
    --pmb-hero-accent: #f1c856;
    --pmb-hero-button-bottom: #df8123;
    --pmb-hero-button-end: #fa9a1a;
    position: relative;
    width: 100%;
    background: transparent;
    color: #fff;
    font-family: Jost, Arial, sans-serif;
}

.pmb-sketch__shell {
    position: relative;
    width: calc(100% - 30rem);
    min-height: calc(var(--pmb-sketch-pt, 121rem) + 616rem + var(--pmb-sketch-pb, 120rem));
    margin: 0 auto;
    padding: var(--pmb-sketch-pt, 121rem) 222.5rem var(--pmb-sketch-pb, 120rem);
    overflow: hidden;
    border-top: .8px solid rgba(245, 245, 245, .12);
    border-radius: 30rem;
    background: linear-gradient(157deg, #1c1c1c 0%, var(--pmb-sketch-bg, #131313) 100%);
}

.pmb-sketch__shell::before,
.pmb-sketch__shell::after {
    position: absolute;
    z-index: 1;
    content: "";
    pointer-events: none;
}

.pmb-sketch__shell::before {
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .41) 45%, rgba(0, 0, 0, .06) 78%),
        radial-gradient(ellipse at 23% 88%, rgba(208, 144, 44, .28) 0%, rgba(130, 91, 33, .11) 30%, rgba(0, 0, 0, 0) 62%);
}

.pmb-sketch__shell::after {
    left: -220rem;
    bottom: -330rem;
    width: 850rem;
    height: 700rem;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(190, 143, 68, .2) 0%, rgba(190, 143, 68, 0) 68%);
    filter: blur(18rem);
}

.pmb-sketch__background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.pmb-sketch__background-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pmb-sketch__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1475rem;
    min-height: 616rem;
    margin: 0 auto;
}

.pmb-sketch__left {
    position: relative;
    z-index: 3;
    width: 791rem;
}

.pmb-sketch__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20rem;
}

.pmb-sketch__heading {
    width: var(--pmb-sketch-heading-width-desktop, 93%);
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-size: var(--pmb-sketch-heading-desktop, 64rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: .455rem;
}

.pmb-sketch__text {
    width: 710rem;
    max-width: 100%;
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 24rem;
    font-weight: 400;
    line-height: 1.2;
}

/* File upload UI intentionally reuses the Hero component classes from hero.css. */

.pmb-sketch__right {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
}

.pmb-sketch__steps {
    position: absolute;
    top: -13.6rem;
    left: 879.5rem;
    display: flex;
    width: 537rem;
    margin: 0;
    padding: 10rem 0 0;
    list-style: none;
    flex-direction: column;
    gap: 17.5rem;
}

.pmb-sketch__step {
    display: flex;
    width: 100%;
    min-height: 27.5rem;
    align-items: center;
    gap: 20rem;
    color: #fff;
}

.pmb-sketch__step-number {
    display: inline-flex;
    width: 27.5rem;
    height: 27.5rem;
    flex: 0 0 27.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 13.75rem;
    background: rgba(255, 255, 255, .1);
    color: #f4f4f2;
    font-size: 12rem;
    font-weight: 400;
    line-height: 18rem;
}

.pmb-sketch__step-text {
    min-width: 0;
    max-width: 473rem;
    color: #fff;
    font-size: 18rem;
    font-weight: 400;
    line-height: 21rem;
}

.pmb-sketch__step-icons {
    display: inline-flex;
    max-width: 112rem;
    height: 28rem;
    flex: 0 0 auto;
    align-items: center;
}

.pmb-sketch__step-icons-image {
    display: block;
    width: auto;
    max-width: 112rem;
    height: 28rem;
    object-fit: contain;
}

.pmb-sketch__illustration {
    position: absolute;
    top: 192.4rem;
    left: 818.5rem;
    width: 598rem;
    height: 543rem;
    overflow: visible;
}

.pmb-sketch__illustration-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

@media (max-width: 1100px) and (min-width: 768px) {
    .pmb-sketch__shell {
        padding-right: 150rem;
        padding-left: 150rem;
    }

    .pmb-sketch__left {
        width: 820rem;
    }

    .pmb-sketch__right {
        opacity: .78;
    }
}

@media (max-width: 767px) {
    .pmb-sketch__shell {
        width: 100%;
        min-height: 0;
        padding: var(--pmb-sketch-pt-mobile, 50rem) 20rem var(--pmb-sketch-pb-mobile, 50rem);
        border-radius: 0;
    }

    .pmb-sketch__container {
        width: 100%;
        min-height: 0;
    }

    .pmb-sketch__left {
        width: 100%;
    }

    .pmb-sketch__heading {
        width: var(--pmb-sketch-heading-width-mobile, 100%);
        max-width: 100%;
        font-size: var(--pmb-sketch-heading-mobile, 28rem);
        line-height: 1.12;
        letter-spacing: 0;
    }

    .pmb-sketch__text {
        width: 100%;
        font-size: 16rem;
        line-height: 1.3;
    }

    .pmb-sketch__copy {
        gap: 16rem;
    }

    /* Hero upload mobile geometry comes from hero.css unchanged. */

    .pmb-sketch__right {
        display: none;
    }
}