:root {
    --counter-accent: var(--base-color);
    --counter-ink: var(--dark-gray);
    --counter-paper: #f4f4ef;
    --counter-muted: var(--medium-gray);
    --counter-border: rgba(23, 24, 23, 0.14);
}

.counter-promo-hero,
.counter-promo-models,
.counter-promo-customize,
.counter-promo-delivery,
.counter-promo-contexts,
.counter-promo-request {
    font-family: inherit;
}

.counter-promo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.counter-promo-kicker::before {
    width: 28px;
    height: 2px;
    background-color: var(--counter-accent);
    content: "";
}

.counter-promo-hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 74% 35%, rgba(190, 255, 1, 0.16), transparent 30%),
        linear-gradient(135deg, #101110 0%, #222421 100%);
}

.counter-promo-hero::before {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 74px 74px;
    content: "";
}

.counter-promo-hero__container {
    position: relative;
    display: grid;
    min-height: 760px;
    grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
    align-items: center;
    gap: 30px;
    padding-top: 80px;
    padding-bottom: 70px;
}

.counter-promo-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.counter-promo-hero__copy h1 {
    margin-bottom: 26px;
    color: #ffffff;
    font-size: clamp(54px, 6vw, 94px);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.counter-promo-hero__copy h1 em {
    color: var(--counter-accent);
    font-style: normal;
}

.counter-promo-hero__copy > p {
    max-width: 590px;
    margin-bottom: 34px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 20px;
    line-height: 1.55;
}

.counter-promo-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.counter-promo-hero__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin: 44px 0 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    list-style: none;
}

.counter-promo-hero__benefits li::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: var(--counter-accent);
    content: "";
}

.counter-promo-hero__visual {
    position: relative;
    align-self: stretch;
    min-height: 620px;
}

.counter-promo-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 510px;
    height: 510px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    transform: translate(-48%, -48%);
}

.counter-promo-orbit::before,
.counter-promo-orbit::after {
    position: absolute;
    inset: 11%;
    border: 1px solid rgba(190, 255, 1, 0.19);
    border-radius: inherit;
    content: "";
}

.counter-promo-orbit::after {
    inset: 25%;
    background-color: rgba(190, 255, 1, 0.03);
}

.counter-promo-product {
    position: absolute;
    z-index: 1;
    margin: 0;
}

.counter-promo-product img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 34px 28px rgba(0, 0, 0, 0.34));
}

.counter-promo-product figcaption {
    position: absolute;
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 8px;
    color: #ffffff;
    background-color: rgba(20, 21, 20, 0.82);
    backdrop-filter: blur(8px);
}

.counter-promo-product figcaption strong {
    font-size: 13px;
    letter-spacing: 0.12em;
}

.counter-promo-product figcaption span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
}

.counter-promo-product--line {
    top: 16px;
    right: 190px;
    width: min(53vw, 510px);
}

.counter-promo-product--line figcaption {
    top: 47%;
    left: 10%;
}

.counter-promo-product--flow {
    right: -40px;
    bottom: -12px;
    width: min(54vw, 530px);
}

.counter-promo-product--flow figcaption {
    right: 9%;
    bottom: 16%;
}

.counter-promo-hero__draft {
    position: absolute;
    right: 0;
    bottom: 0;
    color: rgba(255, 255, 255, 0.46);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.counter-promo-models,
.counter-promo-contexts {
    padding: 120px 0;
    background-color: #ffffff;
}

.counter-promo-section-heading {
    display: grid;
    max-width: 760px;
    margin-bottom: 60px;
}

.counter-promo-section-heading h2,
.counter-promo-delivery h2,
.counter-promo-request h2 {
    margin-bottom: 22px;
    color: var(--counter-ink);
    font-size: clamp(44px, 5.5vw, 76px);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
}

.counter-promo-section-heading > p,
.counter-promo-delivery__copy > p,
.counter-promo-request__copy > p {
    max-width: 650px;
    margin: 0;
    color: var(--counter-muted);
    font-size: 20px;
    line-height: 1.7;
}

.counter-promo-model-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.counter-promo-model-card {
    overflow: hidden;
    border: 1px solid var(--counter-border);
    border-radius: 24px;
    background-color: #ffffff;
}

.counter-promo-model-card__media {
    position: relative;
    display: grid;
    height: 430px;
    place-items: center;
    overflow: hidden;
    background-color: var(--counter-paper);
}

.counter-promo-model-card--flow .counter-promo-model-card__media {
    background-color: #e8ecde;
}

.counter-promo-model-card__media::after {
    position: absolute;
    right: 10%;
    bottom: 11%;
    left: 10%;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.13);
    filter: blur(17px);
    content: "";
}

.counter-promo-model-card__media img {
    position: relative;
    z-index: 1;
    width: min(90%, 520px);
    height: 100%;
    object-fit: contain;
    transition: transform 0.45s ease;
}

.counter-promo-model-card:hover .counter-promo-model-card__media img {
    transform: scale(1.035);
}

.counter-promo-model-card__tag {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    padding: 8px 12px;
    border-radius: 999px;
    color: #ffffff;
    background-color: var(--counter-ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.counter-promo-model-card__body {
    display: grid;
    gap: 30px;
    padding: 38px;
}

.counter-promo-model-card__number {
    display: block;
    margin-bottom: 5px;
    color: #939690;
    font-size: 13px;
    font-weight: 700;
}

.counter-promo-model-card h3 {
    margin-bottom: 12px;
    color: var(--counter-ink);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.counter-promo-model-card__body p {
    max-width: 500px;
    margin: 0;
    color: var(--counter-muted);
    font-size: 17px;
    line-height: 1.7;
}

.counter-promo-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    border-top: 1px solid var(--counter-border);
    border-bottom: 1px solid var(--counter-border);
}

.counter-promo-specs div {
    display: grid;
    gap: 3px;
    padding: 18px 10px;
    border-right: 1px solid var(--counter-border);
}

.counter-promo-specs div:first-child {
    padding-left: 0;
}

.counter-promo-specs div:last-child {
    border-right: 0;
}

.counter-promo-specs dt {
    color: #858883;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.counter-promo-specs dd {
    margin: 0;
    color: var(--counter-ink);
    font-size: 18px;
    font-weight: 700;
}

.counter-promo-model-card__footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;
}

.counter-promo-price {
    display: grid;
}

.counter-promo-price span,
.counter-promo-price small {
    color: var(--counter-muted);
    font-size: 13px;
}

.counter-promo-price strong {
    margin: 2px 0 4px;
    color: var(--counter-ink);
    font-size: 30px;
    line-height: 1;
}

.counter-promo-models__note {
    margin: 22px 0 0;
    color: #858883;
    font-size: 13px;
    line-height: 1.6;
}

.counter-promo-customize {
    padding: 64px 0;
    overflow: hidden;
    color: #ffffff;
    background-color: var(--counter-ink);
}
.counter-promo-delivery__grid,
.counter-promo-request__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
    align-items: center;
    gap: 90px;
}



.counter-promo-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.counter-promo-steps li {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.counter-promo-steps li > span {
    color: var(--counter-accent);
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 700;
}

.counter-promo-steps li > div {
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.45fr);
    gap: 32px;
    align-items: baseline;
    padding-top: 6px;
}

.counter-promo-steps strong {
    display: block;
    margin-bottom: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.45;
}

.counter-promo-steps p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    line-height: 1.7;
}

.counter-promo-delivery {
    padding: 120px 0;
    background-color: var(--counter-accent);
}

.counter-promo-delivery__grid {
    grid-template-columns: minmax(440px, 0.9fr) minmax(0, 1.1fr);
}

.counter-promo-delivery .counter-promo-kicker::before {
    background-color: var(--counter-ink);
}

.counter-promo-delivery__copy > p {
    color: rgba(23, 24, 23, 0.7);
    font-size: 20px;
    line-height: 1.7;
}

.counter-promo-delivery__copy ul {
    display: grid;
    gap: 13px;
    margin: 35px 0 0;
    padding: 0;
    color: var(--counter-ink);
    font-weight: 600;
    list-style: none;
}

.counter-promo-delivery__copy li::before {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    border-radius: 50%;
    color: #ffffff;
    background-color: var(--counter-ink);
    font-size: 12px;
    content: "✓";
}

.counter-promo-delivery__illustration {
    display: grid;
    min-height: 450px;
    place-items: center;
}

.counter-promo-package {
    position: relative;
    width: 300px;
    height: 350px;
    transform: rotate(-6deg);
}

.counter-promo-package__lid,
.counter-promo-package__base,
.counter-promo-package__panel {
    position: absolute;
    display: block;
    border: 3px solid var(--counter-ink);
    background-color: rgba(255, 255, 255, 0.32);
    box-shadow: 14px 16px 0 rgba(23, 24, 23, 0.11);
}

.counter-promo-package__lid {
    top: 0;
    left: 55px;
    width: 210px;
    height: 74px;
}

.counter-promo-package__panel {
    top: 120px;
    width: 88px;
    height: 170px;
}

.counter-promo-package__panel--one { left: 16px; }
.counter-promo-package__panel--two { right: 16px; }

.counter-promo-package__base {
    bottom: 0;
    left: 65px;
    width: 185px;
    height: 55px;
    border-radius: 50%;
}

.counter-promo-section-heading--row {
    max-width: none;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    align-items: end;
    gap: 80px;
}

.counter-promo-section-heading--row h2 {
    margin-bottom: 0;
}

.counter-promo-contexts .container {
    width: calc(100% - 80px);
    max-width: 1440px;
}

.counter-promo-request {
    padding: 120px 0;
    color: #ffffff;
    background-color: #111211;
}

.counter-promo-request__grid {
    align-items: start;
}

.counter-promo-request h2 {
    color: #ffffff;
}

.counter-promo-request__copy > p {
    color: rgba(255, 255, 255, 0.62);
}

.counter-promo-request__contact {
    display: grid;
    gap: 3px;
    margin-top: 42px;
}

.counter-promo-request__contact span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.counter-promo-request__contact a {
    color: var(--counter-accent);
    font-size: 24px;
    font-weight: 700;
}

.counter-promo-form {
    display: grid;
    gap: 20px;
    padding: 38px;
    border-radius: 24px;
    color: var(--counter-ink);
    background-color: #ffffff;
}

.counter-promo-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.counter-promo-form label {
    display: grid;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.counter-promo-form label > span:first-child {
    color: #50534e;
}

.counter-promo-form label small {
    font-weight: 400;
}

.counter-promo-form textarea { resize: vertical; }

.counter-promo-form__draft {
    color: #8a8d86;
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
}

@media (max-width: 1199px) {
    .counter-promo-hero__container {
        grid-template-columns: minmax(0, 0.9fr) minmax(450px, 1.1fr);
    }

    .counter-promo-product--line {
        right: 130px;
        width: 450px;
    }

    .counter-promo-product--flow {
        right: -45px;
        width: 470px;
    }
    .counter-promo-request__grid {
        grid-template-columns: minmax(0, 0.82fr) minmax(470px, 1.18fr);
        gap: 55px;
    }
}

@media (max-width: 991px) {
    .counter-promo-hero__container,
    .counter-promo-delivery__grid,
    .counter-promo-request__grid {
        grid-template-columns: 1fr;
    }

    .counter-promo-hero__container {
        padding-top: 100px;
    }

    .counter-promo-hero__visual {
        min-height: 580px;
    }

    .counter-promo-model-grid {
        grid-template-columns: 1fr;
    }
    .counter-promo-delivery__grid,
    .counter-promo-request__grid {
        gap: 55px;
    }

    .counter-promo-section-heading--row {
        grid-template-columns: 1fr;
        gap: 25px;
    }

}

@media (max-width: 767px) {
    .counter-promo-contexts .container {
        width: calc(100% - 40px);
    }

    .counter-promo-models,
    .counter-promo-customize,
    .counter-promo-delivery,
    .counter-promo-contexts,
    .counter-promo-request {
        padding: 82px 0;
    }

    .counter-promo-hero__copy h1 {
        font-size: 52px;
    }

    .counter-promo-hero__copy > p {
        font-size: 18px;
    }

    .counter-promo-hero__visual {
        min-height: 500px;
    }

    .counter-promo-orbit {
        width: 390px;
        height: 390px;
    }

    .counter-promo-product--line {
        top: 0;
        right: 20%;
        width: 370px;
    }

    .counter-promo-product--flow {
        right: -6%;
        width: 390px;
    }

    .counter-promo-section-heading h2,
    .counter-promo-delivery h2,
    .counter-promo-request h2 {
        font-size: 45px;
    }

    .counter-promo-model-card__media {
        height: 360px;
    }

    .counter-promo-model-card__body,
    .counter-promo-form {
        padding: 28px;
    }

    .counter-promo-model-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .counter-promo-model-card__footer .btn {
        width: 100%;
    }

}

@media (max-width: 575px) {
    .counter-promo-hero__container {
        min-height: 0;
        padding-top: 80px;
        padding-bottom: 45px;
    }

    .counter-promo-hero__copy h1 {
        font-size: 43px;
    }

    .counter-promo-hero__actions,
    .counter-promo-hero__actions .btn {
        width: 100%;
    }

    .counter-promo-hero__benefits {
        display: grid;
    }

    .counter-promo-hero__visual {
        min-height: 410px;
    }

    .counter-promo-product--line {
        right: 16%;
        width: 310px;
    }

    .counter-promo-product--flow {
        right: -14%;
        width: 330px;
    }

    .counter-promo-product figcaption {
        display: none;
    }

    .counter-promo-hero__draft {
        right: auto;
        left: 0;
    }

    .counter-promo-section-heading h2,
    .counter-promo-delivery h2,
    .counter-promo-request h2 {
        font-size: 39px;
    }

    .counter-promo-model-card__media {
        height: 300px;
    }

    .counter-promo-model-card__body,
    .counter-promo-form {
        padding: 22px;
    }

    .counter-promo-specs {
        grid-template-columns: 1fr;
    }

    .counter-promo-specs div,
    .counter-promo-specs div:first-child {
        padding: 12px 0;
        border-right: 0;
        border-bottom: 1px solid var(--counter-border);
    }

    .counter-promo-specs div:last-child {
        border-bottom: 0;
    }

    .counter-promo-delivery__illustration {
        min-height: 370px;
        transform: scale(0.83);
    }

    .counter-promo-context figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .counter-promo-form__row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .counter-promo-model-card__media img,
    .counter-promo-context img {
        transition: none;
    }
}

/* Real product presentation: one full-size model, with tightly framed posters. */
.counter-promo-hero__container {
    max-width: 1440px;
    width: calc(100% - 80px);
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 36px;
    padding-top: 40px;
    padding-bottom: 32px;
}
.counter-promo-hero__copy h1 { font-size: clamp(52px, 5.3vw, 82px); line-height: 1.04; }
.counter-promo-hero__copy > p { max-width: 470px; }
.counter-promo-hero__visual { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-self: center; }
.counter-promo-hero__visual .counter-promo-orbit { width: 78%; height: auto; aspect-ratio: 1; pointer-events: none; }
.counter-promo-viewer { position: relative; width: 100%; height: clamp(540px, 72vh, 760px); z-index: 1; }
.counter-promo-viewer > img { position: absolute; inset: 4% 0; width: 100%; height: 92%; object-fit: contain; transition: opacity .2s; filter: drop-shadow(0 24px 24px #0006); }
.counter-promo-viewer > canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .2s; }
.counter-promo-viewer.is-ready > img { opacity: 0; }
.counter-promo-viewer.is-ready > canvas { opacity: 1; }
.counter-promo-viewer__controls { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.counter-promo-viewer__models { display: flex; padding: 5px; gap: 4px; border: 1px solid #ffffff35; border-radius: 999px; background: #151715cc; }
.counter-promo-viewer__models button span { font-weight: 400; font-size: 12px; margin-left: 7px; }
.counter-promo-viewer__models button[aria-pressed="true"] { color: var(--dark-gray); background: var(--base-color); border-color: var(--base-color); }
.counter-promo-viewer__pause[hidden] { display: none; }
.counter-promo-viewer__controls button:focus-visible { outline: 2px solid var(--counter-accent); outline-offset: 4px; }
.counter-promo-viewer__status { position: relative; z-index: 1; text-align: center; color: #b8bcb2; font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.counter-promo-model-card__media { height: 590px; padding: 30px 24px; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.counter-promo-model-card__media img { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 991px) {
    .counter-promo-hero__container { width: calc(100% - 48px); grid-template-columns: 1fr 1fr; gap: 20px; min-height: 0; }
    .counter-promo-hero__copy h1 { font-size: clamp(42px, 6vw, 62px); }
    .counter-promo-viewer { height: 560px; }
    .counter-promo-viewer__models button span { display: none; }
    .counter-promo-model-card__media { height: 510px; }
}
@media (max-width: 767px) {
    .counter-promo-hero__container { width: calc(100% - 40px); grid-template-columns: 1fr; padding-top: 45px; padding-bottom: 35px; gap: 20px; }
    .counter-promo-hero__copy h1 { max-width: 540px; font-size: clamp(44px, 9vw, 64px); }
    .counter-promo-hero__visual { width: 100%; min-height: 0; }
    .counter-promo-viewer { height: 490px; }
    .counter-promo-viewer__models button span { display: inline; }
    .counter-promo-model-card__media { height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
    .counter-promo-viewer > img, .counter-promo-viewer > canvas { transition: none; }
}

/* Fit the desktop introduction below the actual site navigation. */
.counter-promo-hero { padding: 0; min-height: 0; }
@media (min-width: 768px) {
    .counter-promo-hero { height: calc(100svh - var(--counter-header-height, 116px)); min-height: 460px; }
    .counter-promo-hero__container { height: 100%; min-height: 0; padding-top: 24px; padding-bottom: 24px; }
    .counter-promo-hero__visual { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; align-self: stretch; }
    .counter-promo-viewer { height: 100%; min-height: 0; }
    .counter-promo-hero__copy h1 { font-size: clamp(40px, min(5.3vw, 8.4svh), 82px); margin-bottom: 20px; }
    .counter-promo-hero__copy > p { font-size: clamp(18px, 2svh, 20px); margin-bottom: 24px; }
    .counter-promo-hero__benefits { margin-top: 24px; gap: 10px 20px; line-height: 1.5; }
    .counter-promo-viewer__status { margin-top: 8px; }
}
@media (min-width: 768px) and (max-height: 740px) {
    .counter-promo-hero__container { padding-top: 16px; padding-bottom: 16px; }
    .counter-promo-hero .counter-promo-kicker { font-size: 10px; margin-bottom: 14px; }
    .counter-promo-hero__copy h1 { font-size: clamp(36px, 6.8svh, 50px); margin-bottom: 16px; }
    .counter-promo-hero__copy > p { font-size: 18px; line-height: 1.5; margin-bottom: 18px; }
    .counter-promo-hero__benefits { margin-top: 18px; font-size: 12px; }
}

/* Exploded product presentation. The user starts the movement explicitly. */
.counter-assembly { min-width: 0; padding: 24px; border: 1px solid #d2d6cd; border-radius: 24px; background: #e5e9e1; color: #242824; }
.counter-assembly__models { display: flex; justify-content: center; gap: 8px; }
.counter-assembly [data-assembly-model][aria-pressed="true"] { background: var(--dark-gray); border-color: var(--dark-gray); color: var(--white); }
.counter-assembly button:disabled { opacity: .5; cursor: wait; }
.counter-assembly button:focus-visible, .counter-assembly input:focus-visible { outline: 2px solid #527400; outline-offset: 4px; }
.counter-assembly__canvas { position: relative; height: 520px; }
.counter-assembly__canvas > img { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; }
.counter-assembly__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.counter-assembly__canvas.is-ready canvas { visibility: visible; }
.counter-assembly__canvas.is-ready img { visibility: hidden; }
.counter-assembly__controls { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.counter-assembly__controls label { display: flex; align-items: center; flex: 1; min-width: 210px; gap: 8px; font-size: 12px; margin: 0; }
.counter-assembly input { width: 100%; min-width: 45px; accent-color: #527400; }
.counter-assembly p { margin: 16px 0 4px; font-size: 13px; line-height: 1.4; }
.counter-assembly small { display: block; font-size: 11px; line-height: 1.4; color: #62685d; }
@media (max-width: 767px) {
    .counter-assembly { padding: 16px; }
    .counter-assembly__canvas { height: 420px; }
    .counter-assembly__controls { justify-content: center; }
}

.counter-assembly__controls { flex-direction: column; align-items: stretch; }
.counter-assembly__controls > button { align-self: center; }
.counter-assembly__controls label { width: 100%; min-width: 0; line-height: 1.4; }
.counter-assembly__controls label span { flex-shrink: 0; white-space: nowrap; }
.counter-assembly__controls input { flex: 1; min-width: 0; margin: 0; }

.counter-promo-delivery__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; }
.counter-assembly__canvas { height: 560px; }
@media (max-width: 991px) { .counter-promo-delivery__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .counter-assembly__canvas { height: 420px; } }

/* Compact process section, with no repeated product illustration. */
@media (max-width: 767px) {
    .counter-promo-customize { padding: 40px 0; }
    .counter-promo-steps { grid-template-columns: 1fr; gap: 0; }
    .counter-promo-steps li { grid-template-columns: 58px minmax(0, 1fr); gap: 18px; }
    .counter-promo-steps li > span { font-size: 40px; }
}

@media (max-width: 767px) {
    .counter-promo-steps li > div { display: block; padding-top: 0; }
    .counter-promo-steps strong { margin-bottom: 8px; }
    .counter-promo-delivery__copy > p,
    .counter-promo-request__copy > p { font-size: 18px; }
}

/* Examples follow the page scroll, with a consistent photographic frame. */
.counter-context-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    padding: 56px 0;
    border-top: 1px solid var(--counter-border);
}
.counter-context-copy { max-width: 460px; }
.counter-context-number { display: block; margin-bottom: 24px; color: #74796c; font-size: 18px; font-weight: 600; }
.counter-context-copy h3 { font-size: clamp(32px, 3.5vw, 52px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 600; color: var(--counter-ink); margin-bottom: 24px; }
.counter-context-copy p { font-size: 20px; line-height: 1.7; color: var(--counter-muted); margin: 0 0 28px; }
.counter-context-photo { display: block; position: relative; justify-self: center; width: 100%; aspect-ratio: 4 / 3; min-width: 0; border-radius: 22px; overflow: hidden; line-height: 0; }
.counter-context-photo img { display: block; position: absolute; width: var(--crop-image-width); height: auto; max-width: none; max-height: none; left: var(--crop-left); top: var(--crop-top); }
@media (max-width: 991px) {
    .counter-context-panel { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
    .counter-context-copy { max-width: 650px; }
    .counter-context-number { margin-bottom: 16px; }
    .counter-context-copy p { font-size: 18px; margin-bottom: 20px; }
    .counter-context-photo { width: 100%; }
}

/* Alternate the examples on desktop; keep reading order on smaller screens. */
@media (min-width: 992px) {
    .counter-context-panel:nth-child(even) {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    }
    .counter-context-panel:nth-child(even) .counter-context-photo {
        grid-column: 1;
        grid-row: 1;
    }
    .counter-context-panel:nth-child(even) .counter-context-copy {
        grid-column: 2;
        grid-row: 1;
    }
}