@font-face {
    font-family: ProximaNova;
    src: url("../fonts/proxima-nova-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: ProximaNova;
    src: url("../fonts/proxima-nova-bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: ProximaNova;
    src: url("../fonts/proxima-nova-bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
:root {
    --carbon-ink: #063867;
    --carbon-deep: #002e45;
    --carbon-cyan: #00b0f0;
    --carbon-green: #31ac00;
    --carbon-mist: #e5eaec;
    --carbon-font: ProximaNova, Arial, sans-serif;
}
html[data-carbon-product="can"],
body[data-carbon-product="can"] {
    background-color: #008fc3 !important;
}
html[data-carbon-product="entec"],
body[data-carbon-product="entec"] {
    background-color: #4aa14e !important;
}
.demo-page {
    margin: 0;
    background: #fff;
    color: var(--carbon-ink);
    font-family: var(--carbon-font);
}
.carbon-page {
    margin: 0;
}
.demo-page * {
    box-sizing: border-box;
}
.demo-header {
    height: 152px;
    background: #fff;
    color: var(--carbon-ink);
}
.demo-header button {
    font: inherit;
}
.demo-header__inner {
    width: min(1320px, calc(100% - 80px));
    height: 100%;
    margin: auto;
}
.demo-header__top {
    display: flex;
    height: 105px;
    align-items: center;
}
.demo-header .demo-logo {
    display: block;
    flex: none;
    width: 263px;
    height: 60px;
    text-decoration: none;
}
.demo-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.demo-logo__mobile {
    display: none;
}
.demo-nav {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 32px;
}
.demo-nav a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--carbon-ink);
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.demo-nav__dropdown::after {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-2px) rotate(45deg);
}
.demo-header__actions {
    display: flex;
    margin-left: 32px;
    align-items: center;
    gap: 26px;
}
.demo-header__actions button,
.demo-header__mobile-actions button {
    display: flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--carbon-ink);
    align-items: center;
    cursor: pointer;
}
.demo-header__actions svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
.demo-header__actions .demo-header__region {
    height: 44px;
    padding: 0 15px;
    border: 2px solid #f5ad00;
    gap: 9px;
}
.demo-header__region::after {
    width: 8px;
    height: 8px;
    margin-left: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-2px) rotate(45deg);
}
.demo-header__search {
    gap: 9px;
}
.demo-header__actions span {
    font-size: 17px;
}
.demo-header__mobile-actions {
    display: none;
}
.demo-header__breadcrumbs {
    display: flex;
    height: 47px;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    text-transform: uppercase;
}
.demo-header__breadcrumbs a {
    display: flex;
    color: #169bd5;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
.demo-header__breadcrumbs svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.demo-header__breadcrumbs > span:last-child {
    color: #4b4f52;
}
.demo-footer__inner {
    display: flex;
    width: 1320px;
    height: 100%;
    margin: auto;
    align-items: center;
    justify-content: space-between;
}
.demo-footer .demo-logo {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
}
.demo-footer {
    height: 438px;
    background: var(--carbon-deep);
    color: #fff;
}
.demo-footer p {
    max-width: 420px;
    margin: 0;
    text-align: right;
}

.carbon {
    --section-space: 96px;
    --content-gap: 48px;
    --layout-scale: 1;
    --full-bleed-width: 100vw;
    overflow-x: clip;
    background: #fff;
    color: var(--carbon-ink);
    font-family: var(--carbon-font);
    font-size: 18px;
    line-height: 1.33;
}
.carbon *,
.carbon *::before,
.carbon *::after {
    box-sizing: border-box;
}
.carbon button {
    font: inherit;
}
.carbon img {
    display: block;
    max-width: 100%;
}
.carbon h1,
.carbon h2,
.carbon h3,
.carbon p,
.carbon ul,
.carbon figure {
    margin-top: 0;
}
.carbon h1,
.carbon h2,
.carbon h3 {
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0;
}
.carbon h1 {
    font-size: 46px;
}
.carbon h2 {
    font-size: 48px;
}
.carbon h3 {
    font-size: 24px;
}
.carbon-container {
    position: relative;
    width: 1320px;
    height: 100%;
    margin: auto;
}
.carbon-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
}

.carbon-hero {
    position: relative;
    height: clamp(690px, calc(205px + 33.68vw), 787px);
    color: #fff;
}
.carbon-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carbon-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 42, 62, 0.36),
        rgba(0, 42, 62, 0) 72%
    );
}
.carbon-hero__content {
    padding-top: var(--section-space);
}
.carbon-hero h1 {
    width: 648px;
    margin: 0;
}
.carbon-hero__caption {
    position: absolute;
    left: 0;
    bottom: var(--section-space);
    display: grid;
    width: 475px;
    gap: 16px;
}
.carbon-hero__icon {
    width: 74px;
    height: 74px;
    margin-left: -13px;
}
.carbon-hero p {
    width: 100%;
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.carbon-intro {
    height: auto;
}
.carbon-intro > .carbon-container {
    display: grid;
    height: auto;
    padding: var(--section-space) 0;
    gap: var(--section-space);
}
.carbon-intro__copy {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 289px 646px;
    gap: 48px;
}
.carbon-intro__copy > .carbon-label {
    width: 289px;
}
.carbon-intro__body {
    width: 646px;
}
.carbon-intro__body p {
    margin-bottom: 22px;
    font-size: 34px;
    line-height: 1.18;
}
.carbon-intro__body p:last-child {
    margin-bottom: 0;
}
.carbon-intro__photos {
    position: relative;
    display: grid; /* width:var(--full-bleed-width); */
    height: 409px; /* margin-left:calc((100% - var(--full-bleed-width))/2); */
    grid-template-columns: 40.6061% 59.3939%;
    overflow: hidden;
}
.carbon-intro__photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carbon-intro__summary {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 648px 424px;
    justify-content: space-between;
    align-items: start;
}
.carbon-intro__summary h2 {
    width: 648px;
    margin: 0;
}
.carbon-intro__summary p {
    width: 424px;
    margin: 6px 0 0;
    font-size: 18px;
}

.carbon-solutions {
    position: relative;
    height: 895px;
    color: #fff;
}
.carbon-solutions__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carbon-solutions__shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.26);
}
.carbon-solutions__content > .carbon-label {
    position: absolute;
    top: var(--section-space);
    left: 0;
    width: 289px;
}
.carbon-solutions__lead {
    position: absolute;
    top: var(--section-space);
    left: 337px;
    width: 647px;
    margin: 0;
    font-size: 34px;
    line-height: 1.18;
}
.carbon-products {
    position: absolute;
    top: auto;
    bottom: var(--section-space);
    left: 337px;
    display: flex;
    gap: 25px;
}
.carbon-product-card {
    position: relative;
    width: 424px;
    height: 175px;
    padding: 36px 20px 20px 180px;
    border: 0;
    background: #045283;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition:
        transform 220ms cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 220ms cubic-bezier(0.25, 1, 0.5, 1);
}
.carbon-product-card:nth-child(2) {
    width: 423px;
    background: #2b812b;
}
.carbon-product-card__visual {
    position: absolute;
    inset: 0 auto 0 0;
    width: 180px;
    pointer-events: none;
}
.carbon-product-card__visual img {
    position: absolute;
    max-width: none;
    object-fit: contain;
    transition: transform 220ms cubic-bezier(0.25, 1, 0.5, 1);
}
.carbon-product-card__visual--can img {
    top: -16px;
    left: 39px;
    width: 105px;
    height: 172px;
}
.carbon-product-card__visual--entec img:first-child {
    top: -28px;
    left: 47px;
    width: 114px;
    height: 184px;
}
.carbon-product-card__visual--entec img:last-child {
    top: 65px;
    left: 25px;
    width: 56px;
    height: 93px;
}
.carbon-product-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}
.carbon-product-card small {
    display: block;
    width: 224px;
    font-size: 16px;
    line-height: 1.2;
}
.carbon-product-card:focus-visible {
    z-index: 1;
    outline: 2px solid #fff;
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .carbon-product-card:hover {
        z-index: 1;
        transform: translateY(-3px) scale(1.018);
        box-shadow: 0 10px 12px rgba(0, 0, 0, 0.18);
    }
    .carbon-product-card:hover .carbon-product-card__visual img {
        transform: translateY(-4px) scale(1.02);
    }
    .carbon-product-card:active {
        transform: translateY(-1px) scale(0.995);
        transition-duration: 100ms;
    }
}

html.carbon-product-lock,
body.carbon-product-lock {
    overflow: hidden;
}
body.carbon-product-lock {
    position: fixed;
    top: var(--carbon-product-scroll-top);
    right: 0;
    left: 0;
    width: 100%;
}
.carbon-product-view {
    position: fixed;
    z-index: 1000;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: visible;
    background: transparent;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    isolation: isolate;
}
.carbon-product-view.is-open {
    opacity: 1;
    visibility: visible;
}
.carbon-product-background {
    position: fixed;
    z-index: 0;
    inset: -200px -2px -400px;
    opacity: 0;
    pointer-events: none;
}
.carbon-product-background[data-product-background="can"] {
    background: linear-gradient(to bottom, #008fc3 0 200px, #045283 200px);
}
.carbon-product-background[data-product-background="entec"] {
    background-color: #4aa14e;
    background-image: url("../images/product-entec-background.svg");
    background-position: center 200px;
    background-size: calc(100% - 4px) 100dvh;
    background-repeat: no-repeat;
}
.carbon-product-view[data-product="can"]
    .carbon-product-background[data-product-background="can"],
.carbon-product-view[data-product="entec"]
    .carbon-product-background[data-product-background="entec"] {
    opacity: 1;
}
.carbon-product-close {
    position: absolute;
    z-index: 5;
    top: 113px;
    right: max(20px, calc((100% - 1320px) / 2));
    display: flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    align-items: center;
    gap: 18px;
    cursor: pointer;
}
.carbon-product-close span {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    font-size: 0;
}
.carbon-product-close span::before,
.carbon-product-close span::after {
    position: absolute;
    top: 11px;
    left: -3px;
    width: 30px;
    height: 2px;
    background: currentColor;
    content: "";
}
.carbon-product-close span::before {
    transform: rotate(45deg);
}
.carbon-product-close span::after {
    transform: rotate(-45deg);
}
.carbon-product-close:focus {
    outline: none;
}
.carbon-product-close:focus-visible {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.carbon-product-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.carbon-product-slide.is-active {
    opacity: 1;
}
.carbon-product-view.is-open .carbon-product-slide.is-active {
    visibility: visible;
    pointer-events: auto;
}
.carbon-product-slide--can,
.carbon-product-slide--entec {
    background: transparent;
}
.carbon-product-slide > .carbon-label {
    position: absolute;
    z-index: 2;
    top: 114px;
    left: max(20px, calc((100% - 1320px) / 2));
    width: 252px;
}
.carbon-product-slide__copy {
    position: absolute;
    z-index: 2;
    top: 267px;
    left: calc(50% + 12px);
    width: 424px;
}
.carbon-product-slide__copy h3 {
    margin: 0 0 34px;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
}
.carbon-product-slide__details {
    font-size: 18px;
    line-height: 1.3;
}
.carbon-product-slide__details p {
    margin: 0 0 12px;
}
.carbon-product-slide__visual {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
}
.carbon-product-slide__visual img {
    position: absolute;
    max-width: none;
    object-fit: contain;
}
.carbon-product-slide--can .carbon-product-slide__visual {
    z-index: 1;
}
.carbon-product-can-stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    aspect-ratio: 1728/895;
    transform: translateX(-50%);
}
.carbon-product-can-stage__background {
    position: absolute;
    inset: 0;
    display: block;
}
.carbon-product-can-stage__background img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.carbon-product-can-stage__bag {
    left: 24.6528%;
    top: 21.3408%;
    width: 18.0556%;
    height: auto;
}
.carbon-product-can-stage__pile {
    left: 22.0486%;
    top: 67.3743%;
    width: 25.1157%;
    height: auto;
}
.carbon-product-slide--entec .carbon-product-slide__big-bag {
    top: 171px;
    left: calc(50% - 382px);
    width: 339px;
    height: 548px;
}
.carbon-product-slide--entec .carbon-product-slide__bag {
    top: 417px;
    left: calc(50% - 499px);
    width: 184px;
    height: 302px;
}
.carbon-product-slide--entec .carbon-product-slide__pile {
    top: 577px;
    left: calc(50% - 460px);
    width: 417px;
    height: 237px;
}
.carbon-product-nav {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
}
.carbon-product-nav button {
    position: absolute;
    top: 397px;
    display: grid;
    width: 102px;
    height: 102px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(6, 56, 103, 0.2);
    color: #fff;
    place-items: center;
    cursor: pointer;
    pointer-events: auto;
}
.carbon-product-view[data-product="entec"] .carbon-product-nav button {
    background: rgba(23, 108, 19, 0.2);
}
.carbon-product-nav button:first-child {
    left: calc(50% - 660px);
}
.carbon-product-nav button:last-child {
    left: calc(50% + 558px);
}
.carbon-product-nav svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.carbon-climate {
    height: auto;
    background: #fff;
}
.carbon-climate__pin {
    height: calc(
        var(--climate-scene-height, 877px) + var(--climate-travel, 0px)
    );
}
.carbon-climate__sticky {
    position: sticky;
    top: 0;
    height: var(--climate-scene-height, 877px);
    background: #fff;
}
.carbon-climate__heading {
    position: absolute;
    top: var(--section-space);
    left: 0;
    width: 100%;
}
.carbon-climate__heading .carbon-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 289px;
}
.carbon-climate__heading h2 {
    position: absolute;
    top: 0;
    left: 337px;
    width: 647px;
    margin: 0;
    font-size: 34px;
    line-height: 1.2;
}
.carbon-climate__viewport {
    position: absolute;
    top: var(--climate-track-top, 305px);
    left: 0;
    width: calc(100vw - (100vw - 1320px) / 2);
    height: var(--climate-track-height, 572px);
    overflow: hidden;
}
.carbon-climate-track {
    display: flex;
    width: 2590px;
    height: 572px;
    gap: 42px;
    transform: translate3d(var(--climate-shift, 0), 0, 0);
    transform-origin: 0 0;
}
.carbon-climate-card {
    position: relative;
    flex: none;
    height: 572px;
    overflow: hidden;
    background: var(--carbon-mist);
}
.carbon-climate-card__copy {
    position: absolute;
    z-index: 3;
    top: 71px;
    left: 64px;
}
.carbon-climate-card__copy h3 {
    position: relative;
    width: 424px;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}
.carbon-climate-card__copy h3::after {
    position: absolute;
    top: 53px;
    left: 0;
    width: 424px;
    height: 1px;
    background: rgba(0, 46, 69, 0.2);
    content: "";
}
.carbon-climate-card__copy p {
    width: 424px;
    margin: 48px 0 0;
    font-size: 18px;
    line-height: 24px;
}
.carbon-climate-card__metric {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
}
.carbon-climate-card__metric strong {
    font-size: 110px;
    font-weight: 600;
    line-height: 1;
    color: #d01f1f;
}
.carbon-climate-card__metric span {
    font-size: 16px;
    line-height: 1;
    color: #b54241;
}
.carbon-climate-card--emissions {
    width: 1322px;
}
.carbon-climate-card--emissions .carbon-climate-card__metric {
    top: 68px;
    left: 591px;
    width: 157px;
}
.carbon-climate-card__emissions-image {
    position: absolute;
    z-index: 1;
    top: -16px;
    left: 138px;
    width: 1005px;
    height: 670px;
    object-fit: fill;
}
.carbon-emissions-chart {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
}
.carbon-emissions-chart h4 {
    position: absolute;
    top: 71px;
    left: 989px;
    width: 196px;
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
}
.carbon-emissions-chart__pie {
    position: absolute;
    top: 142px;
    left: 976px;
    width: 107px;
    height: 107px;
    color: #002e45;
}
.carbon-emissions-chart__pie svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.carbon-emissions-chart__arc {
    stroke-linecap: butt;
}
.carbon-emissions-chart__arc--direct {
    stroke: #003252;
}
.carbon-emissions-chart__arc--indirect {
    stroke: #00a4d3;
}
.carbon-emissions-chart__arc--material {
    stroke: #84bf42;
}
.carbon-emissions-chart__arc--transport {
    stroke: #f7bf36;
}
.carbon-emissions-chart__pie strong {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    font-size: 27px;
    font-weight: 600;
    place-items: center;
}
.carbon-emissions-chart__pie span {
    position: absolute;
    top: 35px;
    left: 120px;
    width: 74px;
    font-size: 17px;
    line-height: 1.2;
}
.carbon-emissions-chart dl {
    --legend-marker-x: 50.5px;
    position: absolute;
    top: 279px;
    left: 979px;
    width: 206px;
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
}
.carbon-emissions-chart dl div {
    position: relative;
    display: grid;
    grid-template-columns: 64px 142px;
    min-height: 34px;
    align-items: start;
}
.carbon-emissions-chart dl div:nth-child(3) {
    margin-top: 0;
    min-height: 53px;
}
.carbon-emissions-chart dt {
    margin: 0;
}
.carbon-emissions-chart dd {
    margin: 0;
}
.carbon-emissions-chart dl div::before {
    position: absolute;
    top: 3px;
    left: var(--legend-marker-x);
    width: 12px;
    height: 12px;
    border: 3px solid #003252;
    border-radius: 50%;
    background: transparent;
    content: "";
    transform: translateX(-50%);
}
.carbon-emissions-chart dl div:nth-child(2)::before {
    border-color: #00a4d3;
}
.carbon-emissions-chart dl div:nth-child(3)::before {
    width: 8px;
    height: 8px;
    border: 2px solid #84bf42;
}
.carbon-emissions-chart dl div:nth-child(4)::before {
    width: 8px;
    height: 8px;
    border: 2px solid #f7bf36;
}
.carbon-climate-card--targets {
    width: 1226px;
}
.carbon-climate-card--targets .carbon-climate-card__copy h3 {
    width: 556px;
}
.carbon-climate-card--targets .carbon-climate-card__copy h3::after {
    top: 91px;
    width: 555px;
}
.carbon-climate-card--targets .carbon-climate-card__copy p {
    width: 534px;
    margin-top: 61px;
}
.carbon-climate-card--targets .carbon-climate-card__metric {
    top: 93px;
    left: 889px;
    width: 217px;
}
.carbon-climate-card--targets .carbon-climate-card__metric strong {
    color: #1aa614;
}
.carbon-climate-card--targets .carbon-climate-card__metric span {
    color: #40783c;
}
.carbon-climate-card__transition {
    position: absolute;
    z-index: 1;
    top: -35px;
    left: 493px;
    width: 1109px;
    height: 693px;
    mask-image: radial-gradient(
        ellipse 55% 50% at 50% 50%,
        #000 56%,
        rgba(0, 0, 0, 0.22) 100%
    );
}
.carbon-climate-card__transition img {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 724px;
    height: 724px;
    object-fit: fill;
}
.carbon-climate-card__sky {
    position: absolute;
    z-index: 2;
    top: 39px;
    left: 666px;
    width: 204px;
    height: 202px;
    object-fit: fill;
}
.carbon-climate__measure {
    position: relative;
    display: grid;
    width: 1320px;
    height: auto;
    padding: var(--section-space) 0;
    grid-template-columns: 289px 648px;
    gap: 48px;
}
.carbon-climate__measure .carbon-label {
    width: 289px;
    margin: 0;
}
.carbon-climate__measure h2 {
    width: 648px;
    margin: 0;
    font-size: 34px;
}

.carbon-compare {
    height: calc(600px * var(--layout-scale));
    background: #fff;
}
.carbon-compare__stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1318px;
    height: 600px;
    overflow: hidden;
    background: var(--carbon-mist);
}
.carbon-compare__copy {
    position: absolute;
    z-index: 4;
    top: 71px;
    left: 64px;
    width: 425px;
}
.carbon-compare__copy h2 {
    margin: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--carbon-deep);
    font-size: 24px;
    font-weight: 700;
}
.carbon-compare__copy p {
    margin: 23px 0 0;
    font-size: 18px;
    line-height: 1.33;
}
.carbon-compare__images {
    position: absolute;
    z-index: 1;
    inset: 0;
}
.carbon .carbon-compare__image {
    position: absolute;
    max-width: none;
    width: 842px;
    height: 577px;
    object-fit: contain;
}
.carbon-compare__image--high {
    top: 14px;
    left: 456px;
}
.carbon-compare__image--low {
    top: 14px;
    left: 476px;
}
.carbon-compare__reveal {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 0 0 var(--position));
}
.carbon-compare__metric {
    position: absolute;
    z-index: 3;
    top: 37px;
    left: 1039px;
    color: #1aa614;
    white-space: nowrap;
}
.carbon-compare__fraction {
    width: 168px;
    height: 231px;
}
.carbon-compare__metric span {
    position: absolute;
    top: 40px;
    left: 121px;
    width: 113px;
    color: #40783c;
    font-size: 16px;
    line-height: 1;
}
.carbon-compare__handle {
    position: absolute;
    z-index: 5;
    top: 235px;
    left: var(--position);
    display: grid;
    width: 102px;
    height: 102px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--carbon-mist);
    color: var(--carbon-deep);
    cursor: ew-resize;
    place-items: center;
    touch-action: none;
    transform: translateX(-50%);
}
.carbon-compare__handle svg {
    width: 48px;
    height: 34px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}
.carbon-compare__handle:focus-visible {
    outline: 2px solid var(--carbon-deep);
    outline-offset: 3px;
}

.carbon-lab {
    --lab-sticky-height: 1123px;
    --lab-image-top: 227px;
    --lab-image-height: 896px;
    --lab-track-top: 528px;
    --lab-track-scale: 1;
    --lab-gutter: max(0px, calc((100vw - 1320px) / 2));
    position: relative;
    height: calc(var(--lab-sticky-height) + var(--lab-travel, 0px));
    background: #fff;
}
.carbon-lab__sticky {
    position: sticky;
    top: 0;
    height: var(--lab-sticky-height);
    background: #fff;
    overflow: hidden;
}
.carbon-lab__sticky::after {
    position: absolute;
    z-index: 1;
    top: var(--lab-image-top);
    left: 0;
    width: 100%;
    height: var(--lab-image-height);
    background: rgba(0, 0, 0, 0.28);
    content: "";
    pointer-events: none;
}
.carbon-lab__heading h2 {
    position: absolute;
    top: var(--section-space);
    left: 0;
    width: 648px;
    margin: 0;
}
.carbon-lab__heading p {
    position: absolute;
    top: calc(var(--section-space) + 14px);
    right: 0;
    width: 440px;
    margin: 0;
    font-size: 18px;
}
.carbon-lab__image {
    position: absolute;
    top: var(--lab-image-top);
    left: 0; /* width:100%; */
    height: var(--lab-image-height);
    object-fit: cover;
    filter: contrast(0.87) saturate(0.83);
}
.carbon-lab__viewport {
    position: absolute;
    z-index: 2;
    top: var(--lab-track-top);
    left: 0;
    width: 100vw;
    height: calc(499px * var(--lab-track-scale));
    overflow: hidden;
    scroll-padding-left: var(--lab-gutter);
}
.carbon-lab__viewport:focus-visible {
    outline: 2px solid var(--carbon-cyan);
    outline-offset: -2px;
}
.carbon-lab__track {
    display: flex;
    width: calc(2063px + var(--lab-gutter));
    height: 499px;
    padding-left: var(--lab-gutter);
    gap: 24px;
    transform: translate3d(var(--lab-shift, 0), 0, 0)
        scale(var(--lab-track-scale));
    transform-origin: top left;
}
.carbon-lab-card {
    position: relative;
    flex: none;
    height: 499px;
    overflow: hidden;
    background: #fff;
    scroll-snap-align: start;
}
.carbon-lab-card--leaching {
    width: 984px;
}
.carbon-lab-card--emissions {
    width: 1055px;
}
.carbon-lab-card__visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 499px;
    overflow: hidden;
    background: var(--carbon-deep);
    color: #fff;
}
.carbon-lab-card--emissions .carbon-lab-card__visual {
    width: 401px;
}
.carbon .carbon-lab-card__scene {
    position: absolute;
    max-width: none;
    object-fit: cover;
}
.carbon-lab-card--leaching .carbon-lab-card__scene {
    top: -150px;
    left: -72px;
    width: 494px;
    height: 649px;
}
.carbon-lab-card--emissions .carbon-lab-card__scene {
    top: -127px;
    left: -56px;
    width: 467px;
    height: 626px;
}
.carbon-lab-card__logo {
    position: absolute;
    top: 46px;
    left: 48px;
    width: 112px;
    height: 49px;
    object-fit: contain;
}
.carbon-lab-card__impact strong {
    position: absolute;
    left: 28px;
    bottom: 18px;
    font-size: 70px;
    font-weight: 700;
    line-height: 1;
}
.carbon-lab-card__impact span {
    position: absolute;
    left: 48px;
    bottom: 108px;
    width: 190px;
    font-size: 20px;
    line-height: 1.2;
}
.carbon-lab-card--emissions .carbon-lab-card__impact strong:first-child {
    bottom: 94px;
}
.carbon-lab-card--emissions .carbon-lab-card__impact strong:nth-child(2) {
    bottom: 18px;
}
.carbon-lab-card--emissions .carbon-lab-card__impact span {
    bottom: 185px;
    width: 190px;
}
.carbon-lab-card__content {
    position: absolute;
    top: 0;
    left: 448px;
    width: 466px;
    height: 499px;
    color: #000;
}
.carbon-lab-card__header {
    height: 175px;
    padding-top: 47px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.carbon-lab-card--emissions .carbon-lab-card__header {
    padding-top: 44px;
}
.carbon-lab-card__content h3 {
    margin: 0;
    color: var(--carbon-deep);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}
.carbon .carbon-lab-card__subtitle {
    margin: 18px 0 0;
    padding-left: 18px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 17px;
    line-height: 24px;
    list-style: disc;
}
.carbon-lab-card__subtitle li::marker {
    font-size: 0.75em;
}
.carbon .carbon-lab-card--emissions .carbon-lab-card__subtitle {
    margin-top: 17px;
}
.carbon-lab-bars {
    position: absolute;
    inset: 0;
}
.carbon-lab-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 62px;
}
.carbon-lab-bar__fill {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 32px;
    background: var(--lab-bar-color, #b5b5b5);
}
.carbon-lab-bar__fill::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--lab-bar-color, #b5b5b5);
    content: "";
}
.carbon-lab-bar__fill strong {
    position: absolute;
    z-index: 1;
    top: 6px;
    left: 7px;
    color: #fff;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
}
.carbon-lab-bar > p {
    position: absolute;
    top: 39px;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 17px;
    line-height: 1;
}
.carbon-lab-bar > b {
    position: absolute;
    top: -30px;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
}
.carbon-lab-bar > b::before {
    position: absolute;
    top: 0;
    right: calc(100% + 6px);
    width: 1px;
    height: 145px;
    background: rgba(0, 0, 0, 0.3);
    content: "";
}
.carbon-lab-bar--blue {
    --lab-bar-color: var(--carbon-cyan);
}
.carbon-lab-bar--green {
    --lab-bar-color: var(--carbon-green);
}
.carbon-lab-bars--leaching .carbon-lab-bar:first-child {
    top: 303px;
}
.carbon-lab-bars--leaching .carbon-lab-bar:first-child .carbon-lab-bar__fill {
    width: 466px;
}
.carbon-lab-bars--leaching .carbon-lab-bar:first-child > b {
    left: 165px;
}
.carbon-lab-bars--leaching .carbon-lab-bar:last-child {
    top: 386px;
}
.carbon-lab-bars--leaching .carbon-lab-bar:last-child .carbon-lab-bar__fill {
    width: 159px;
}
.carbon-lab-card--emissions .carbon-lab-card__content {
    left: 449px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) {
    top: 230px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) .carbon-lab-bar__fill {
    width: 80px;
}
.carbon-lab-bars--emissions
    .carbon-lab-bar:nth-child(1)
    .carbon-lab-bar__fill::after {
    width: 110px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) > b {
    top: 51px;
    left: 421px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) > b::before {
    right: calc(100% + 4px);
    height: 44px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) {
    top: 309px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) .carbon-lab-bar__fill {
    width: 417px;
}
.carbon-lab-bars--emissions
    .carbon-lab-bar:nth-child(2)
    .carbon-lab-bar__fill::after {
    width: 454px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) > b {
    left: 462px;
    top: 38px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) > b::before {
    top: -22px;
    right: calc(100% + 8px);
    height: 44px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(3) {
    top: 389px;
}
.carbon-lab-bars--emissions .carbon-lab-bar:nth-child(3) .carbon-lab-bar__fill {
    width: 177px;
}
.carbon-lab-bars--emissions
    .carbon-lab-bar:nth-child(3)
    .carbon-lab-bar__fill::after {
    width: 207px;
}

.carbon-practice {
    height: auto;
    background: #fff;
    overflow-x: clip;
}
.carbon-practice > .carbon-container {
    display: grid;
    height: auto;
    padding: var(--section-space) 0;
    gap: var(--section-space);
}
.carbon-practice__heading {
    position: relative;
    top: auto;
    display: grid;
    width: 100%;
    grid-template-columns: 648px 440px;
    justify-content: space-between;
    align-items: start;
}
.carbon-practice__heading h2 {
    width: 648px;
    margin: 0;
}
.carbon-practice__heading p {
    width: 440px;
    margin: 14px 0 0;
    font-size: 18px;
}

/* FIX: резиновый блок фото — minmax(0,fr) вместо %, clamp() для высоты */
.carbon-practice__photos {
    position: relative;
    top: auto;
    display: grid;
    width: var(--full-bleed-width);
    height: clamp(280px, 42.7vw, 564px);
    margin-left: calc((100% - var(--full-bleed-width)) / 2);
    grid-template-columns: minmax(0, 42.5758fr) minmax(0, 32.1212fr) minmax(
            0,
            25.303fr
        );
    overflow: hidden;
}
.carbon-practice__photos img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    object-fit: cover;
}
.carbon-practice__photos img:first-child {
    object-position: center;
}

.carbon-practice__cards {
    position: relative;
    top: auto;
    display: grid;
    width: 1320px;
    grid-template-columns: 650px 648px;
    gap: 24px 22px;
}
.carbon-practice__cards article {
    position: relative;
    height: 390px;
    background: var(--carbon-mist);
}
.carbon-practice__cards article:nth-child(3) {
    /* height:335px; */
}
.carbon-practice__cards article:nth-child(4) {
    background: #fff;
}
.carbon-practice__cards article:not(:last-child)::after {
    position: absolute;
    top: 100px;
    left: 48px;
    width: 321px;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    content: "";
}
.carbon-practice__cards article:nth-child(2)::after {
    top: 101px;
}
.carbon-practice__cards article:nth-child(3)::after {
    top: 121px;
}
.carbon-practice__cards article:not(:last-child) h3 {
    position: absolute;
    top: 45px;
    left: 48px;
    width: 282px;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
}
.carbon-practice__cards article:not(:last-child) p {
    position: absolute;
    top: 131px;
    left: 48px;
    width: 311px;
    margin: 0;
    font-size: 17px;
    line-height: 24px;
}
.carbon-practice__cards article:nth-child(2) p {
    top: 132px;
}
.carbon-practice__cards article:nth-child(3) p {
    top: 152px;
}
.carbon-practice__cards article:last-child p {
    position: absolute;
    top: 85px;
    left: 48px;
    width: 331px;
    margin: 0;
    font-size: 24px;
    line-height: 29px;
}
.carbon-practice__cards img {
    position: absolute;
    object-fit: contain;
}
.carbon-practice__cards article:nth-child(1) img {
    top: 67px;
    right: 29px;
    width: 194px;
    height: 194px;
}
.carbon-practice__cards article:nth-child(2) img {
    top: 60px;
    right: 32px;
    width: 208px;
    height: 208px;
}
.carbon-practice__cards article:nth-child(3) img {
    top: 77px;
    right: 39px;
    width: 182px;
    height: 182px;
}
.carbon-practice__cards article:nth-child(4) img {
    top: 56px;
    right: 40px;
    width: 192px;
    height: 192px;
}

.carbon-closing {
    position: relative;
    height: 842px;
    color: #fff;
}
.carbon-closing > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carbon-closing__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 46, 69, 0.68) 0%,
        rgba(0, 46, 69, 0.4) 42%,
        rgba(0, 46, 69, 0.12) 72%,
        rgba(0, 46, 69, 0) 100%
    );
}
.carbon-closing__content h2 {
    position: absolute;
    top: var(--section-space);
    left: 0;
    width: 648px;
    margin: 0;
}
.carbon-closing__content p {
    position: absolute;
    bottom: var(--section-space);
    left: 0;
    width: 424px;
    margin: 0;
    font-size: 24px;
}

/* =========================================
   RESPONSIVE BREAKPOINTS (FIXED)
   ========================================= */

/* 1. ULTRAWIDE & 4K (>= 1920px) */
@media (min-width: 1920px) {
    .carbon-container,
    .demo-footer__inner {
        width: 1440px;
    }
    .demo-header__inner {
        width: min(1440px, calc(100% - 80px));
    }
    .carbon-hero h1 {
        width: 720px;
    }
    .carbon-hero__caption {
        width: 520px;
    }
    .carbon-intro__copy {
        grid-template-columns: 320px 720px;
        gap: 60px;
    }
    .carbon-intro__summary {
        grid-template-columns: 720px 480px;
    }
    .carbon-climate-card--emissions {
        width: 1440px;
    }
    .carbon-climate-card--targets {
        width: 1340px;
    }
    .carbon-compare__stage {
        width: 1438px;
    }
}

/* 2. SMALL DESKTOP / LAPTOP (1181px - 1439px) */
@media (min-width: 1320px) and (max-width: 1439px) {
    .carbon {
        --layout-scale: 0.94;
        --full-bleed-width: 106.38vw;
    }
    .carbon-container,
    .demo-footer__inner {
        zoom: 0.94;
    }
    .carbon-lab {
        --lab-gutter: calc((100vw - 1240.8px) / 2);
    }
}

@media (min-width: 1240px) and (max-width: 1319px) {
    .carbon {
        --layout-scale: 0.88;
        --full-bleed-width: 113.64vw;
    }
    .carbon-container,
    .demo-footer__inner {
        zoom: 0.88;
    }
    .carbon-lab {
        --lab-gutter: calc((100vw - 1161.6px) / 2);
    }
}

@media (min-width: 1181px) and (max-width: 1239px) {
    .carbon {
        --layout-scale: 0.83;
        --full-bleed-width: 120.48vw;
    }
    .carbon-container,
    .demo-footer__inner {
        zoom: 0.83;
    }
    .carbon-lab {
        --lab-gutter: calc((100vw - 1095.6px) / 2);
    }
}

@media (min-width: 1181px) and (max-width: 1279px) {
    .carbon-climate__viewport {
        overflow-x: auto;
    }
    .carbon-climate-track {
        transform: none;
    }
    .carbon-lab__viewport {
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }
    .carbon-lab__viewport::-webkit-scrollbar {
        display: none;
    }
    .carbon-lab__track {
        transform: none;
    }
    .carbon-product-nav button:first-child {
        left: 40px;
    }
    .carbon-product-nav button:last-child {
        right: 40px;
        left: auto;
    }
    .carbon-solutions {
        height: clamp(760px, 62vw, 895px);
    }
    .carbon-closing {
        height: clamp(720px, 58vw, 842px);
    }
}

/* 3. TABLET & MOBILE BASE (<= 1279px) - Disable sticky scroll */
@media (max-width: 1279px) {
    .carbon-climate {
        height: auto;
    }
    .carbon-climate__pin {
        height: auto;
    }
    .carbon-climate__sticky {
        position: relative;
        height: auto;
    }
    .carbon-climate__pin .carbon-container {
        display: grid;
        height: auto;
        padding-top: var(--section-space);
        gap: 20px;
    }
    .carbon-climate__heading {
        position: relative;
        top: auto;
        left: auto;
        display: grid;
        width: 100%;
        grid-template-columns: 289px 647px;
        gap: 48px;
    }
    .carbon-climate__heading .carbon-label,
    .carbon-climate__heading h2 {
        position: static;
        width: auto;
        margin: 0;
    }
    .carbon-climate__viewport {
        position: relative;
        top: auto;
        left: auto;
    }
    .carbon-climate__measure {
        top: auto;
        left: auto;
        padding: var(--section-space) 0;
    }

    .carbon-lab {
        height: auto;
    }
    .carbon-lab__sticky {
        position: relative;
        display: grid;
        height: auto;
        overflow: hidden;
        grid-template-columns: 100%;
        grid-template-rows: auto var(--lab-image-height);
    }
    .carbon-lab__heading {
        position: relative;
        display: grid;
        height: auto;
        padding: var(--section-space) 0;
        grid-template-columns: 648px 440px;
        justify-content: space-between;
        align-items: start;
    }
    .carbon-lab__heading h2,
    .carbon-lab__heading p {
        position: static;
        width: auto;
        margin: 0;
    }
    .carbon-lab__heading p {
        margin-top: 14px;
    }
    .carbon-lab__sticky::after,
    .carbon-lab__image,
    .carbon-lab__viewport {
        top: 0;
        left: 0;
        grid-row: 2;
        grid-column: 1;
    }
    .carbon-lab__sticky::after {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .carbon-lab__image {
        /* position: relative; */ /* width: 100%; */ /* height: var(--lab-image-height); */
    }
    .carbon-lab__viewport {
        position: relative;
        width: 100vw;
        margin-top: var(--lab-track-offset, 301px);
        align-self: start;
    }
}

/* 4. TABLET & MOBILE BASE (<= 1180px) */
@media (max-width: 1180px) {
    .demo-page,
    .carbon {
        overflow-x: hidden;
    }
    .carbon {
        --section-space: 48px;
        width: 100%;
        max-width: 100%;
        --mobile-content: min(352px, calc(100vw - 40px));
    }
    .carbon > section {
        max-width: 100%;
    }

    .demo-header {
        height: 60px;
    }
    .demo-header__inner,
    .demo-footer__inner {
        width: calc(100% - 40px);
    }
    .demo-header__top {
        height: 60px;
    }
    .demo-header .demo-logo {
        width: 153px;
        height: 29px;
    }
    .demo-logo__desktop {
        display: none;
    }
    .demo-logo__mobile {
        display: block;
    }
    .demo-nav,
    .demo-header__actions,
    .demo-header__breadcrumbs {
        display: none;
    }
    .demo-header__mobile-actions {
        display: flex;
        margin-left: auto;
        align-items: center;
        gap: 18px;
    }
    .demo-header__mobile-actions button {
        width: 24px;
        height: 24px;
    }
    .demo-header__mobile-actions svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }

    .demo-footer .demo-logo {
        font-size: 20px;
    }
    .demo-footer {
        height: 789px;
    }
    .demo-footer__inner {
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 80px;
        text-align: center;
    }
    .demo-footer p {
        text-align: center;
    }

    .carbon {
        font-size: 16px;
    }
    .carbon h1 {
        font-size: 28px;
    }
    .carbon h2 {
        font-size: 32px;
    }
    .carbon h3 {
        font-size: 20px;
    }
    .carbon-container {
        width: var(--mobile-content);
    }
    .carbon-label {
        font-size: 14px;
    }

    .carbon-hero {
        height: clamp(620px, 47.92vw, 690px);
    }
    .carbon-hero__content {
        padding-top: var(--section-space);
    }
    .carbon-hero h1 {
        width: 234px;
    }
    .carbon-hero__caption {
        width: 232px;
        gap: 24px;
    }
    .carbon-hero__icon {
        width: 56px;
        height: 56px;
        margin-left: -9px;
    }
    .carbon-hero p {
        width: 100%;
        font-size: 20px;
    }

    .carbon-intro {
        height: auto;
    }
    .carbon-intro__copy {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .carbon-intro__copy > .carbon-label {
        width: 235px;
    }
    .carbon-intro__body {
        width: 100%;
    }
    .carbon-intro__body p {
        margin-bottom: 20px;
        font-size: 20px;
        line-height: 1.2;
    }
    .carbon-intro__photos {
        height: 140px;
        grid-template-columns: 42% 58%;
    }
    .carbon-intro__summary {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .carbon-intro__summary h2 {
        width: 100%;
    }
    .carbon-intro__summary p {
        width: 100%;
        margin: 0;
        font-size: 16px;
    }

    .carbon-solutions {
        height: 852px;
    }
    .carbon-solutions__content > .carbon-label {
        top: var(--section-space);
        width: 227px;
    }
    .carbon-solutions__lead {
        top: calc(var(--section-space) + 30px);
        left: 0;
        width: 100%;
        font-size: 20px;
        line-height: 1.2;
    }
    .carbon-products {
        top: auto;
        bottom: var(--section-space);
        left: 0;
        display: grid;
        width: 100%;
        gap: 24px;
    }
    .carbon-product-card,
    .carbon-product-card:nth-child(2) {
        width: 100%;
        height: 130px;
        padding: 24px 20px 15px 130px;
    }
    .carbon-product-card__visual {
        width: 130px;
    }
    .carbon-product-card__visual--can img {
        top: -13px;
        left: 32px;
        width: 87px;
        height: 143px;
    }
    .carbon-product-card__visual--entec img:first-child {
        top: -23px;
        left: 39px;
        width: 95px;
        height: 153px;
    }
    .carbon-product-card__visual--entec img:last-child {
        top: 54px;
        left: 21px;
        width: 47px;
        height: 77px;
    }
    .carbon-product-card strong {
        font-size: 14px;
    }
    .carbon-product-card small {
        width: auto;
        font-size: 14px;
    }

    .carbon-product-close {
        top: 45px;
        right: 22px;
        font-size: 0;
    }
    .carbon-product-close span {
        width: 24px;
        height: 24px;
    }
    .carbon-product-slide {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }
    .carbon-product-slide::-webkit-scrollbar {
        display: none;
    }
    .carbon-product-slide > .carbon-label {
        top: 48px;
        left: 22px;
        width: 227px;
    }
    .carbon-product-slide__copy {
        top: 448px;
        left: 22px;
        width: calc(100% - 44px);
        padding-bottom: 48px;
    }
    .carbon-product-slide__copy h3 {
        margin: 0 0 17px;
        font-size: 24px;
        line-height: 1.2;
    }
    .carbon-product-slide__details {
        width: calc(100% - 13px);
        margin-left: 13px;
        font-size: 16px;
        line-height: 1.35;
    }
    .carbon-product-slide__details p {
        margin-bottom: 11px;
    }
    .carbon-product-slide--entec .carbon-product-slide__big-bag {
        top: 121px;
        left: calc(50% - 44.5px);
        width: 155px;
        height: 250px;
    }
    .carbon-product-slide--entec .carbon-product-slide__bag {
        top: 233px;
        left: calc(50% - 97.5px);
        width: 84px;
        height: 138px;
    }
    .carbon-product-slide--entec .carbon-product-slide__pile {
        top: 306px;
        left: calc(50% - 79.5px);
        width: 190px;
        height: 108px;
    }
    .carbon-product-nav button {
        top: 214px;
        width: 48px;
        height: 48px;
    }
    .carbon-product-nav button:first-child {
        left: calc(50% - 161.5px);
    }
    .carbon-product-nav button:last-child {
        left: calc(50% + 113.5px);
    }
    .carbon-product-nav svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.5;
    }
    .carbon-product-nav {
        transition:
            opacity 0.2s ease-out,
            visibility 0.2s;
    }
    .carbon-product-view.is-product-scrolled .carbon-product-nav {
        opacity: 0;
        visibility: hidden;
    }

    .carbon-climate__heading h2 {
        font-size: 24px;
    }
    .carbon-climate__viewport {
        width: calc(100% + 20px);
        max-width: calc(100vw - 20px);
        height: 602px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }
    .carbon-climate__viewport::-webkit-scrollbar {
        display: none;
    }
    .carbon-climate-track {
        width: calc(var(--mobile-content) + var(--mobile-content) + 10px);
        height: 602px;
        gap: 10px;
        transform: none;
    }
    .carbon-climate-card {
        width: var(--mobile-content);
        height: 602px;
        scroll-snap-align: start;
    }
    .carbon-climate-card--emissions,
    .carbon-climate-card--targets {
        width: var(--mobile-content);
    }
    .carbon-climate-card__copy {
        top: 32px;
        left: 24px;
    }

    /* ФИКС: Делаем ширины динамическими, чтобы не было вылетов */
    .carbon-climate-card__copy h3,
    .carbon-climate-card--targets .carbon-climate-card__copy h3 {
        width: calc(100% - 48px);
        font-size: 20px;
    }
    .carbon-climate-card__copy h3::after {
        top: 44px;
        width: calc(100% - 48px);
    }
    .carbon-climate-card--targets .carbon-climate-card__copy h3::after {
        top: 116px;
        width: calc(100% - 48px);
    }

    .carbon-climate-card__copy p {
        width: calc(100% - 48px);
        margin-top: 40px;
        font-size: 16px;
        line-height: 1.3;
    }

    /* ФИКС: Увеличиваем отступ, чтобы текст не налезал на линию h3::after */
    .carbon-climate-card--targets .carbon-climate-card__copy p {
        width: calc(100% - 48px);
    }

    .carbon-climate-card__metric strong {
        font-size: 30px;
    }
    .carbon-climate-card__metric span {
        font-size: 12px;
    }
    .carbon-climate-card--emissions .carbon-climate-card__metric {
        top: 238px;
        left: 24px;
        width: 93px;
    }

    /* ФИКС: Сдвигаем метрику 71% ниже, чтобы она не наслаивалась на длинный текст */
    .carbon-climate-card--targets .carbon-climate-card__metric {
        top: 530px;
        left: 24px;
        width: 233px;
    }

    .carbon .carbon-climate-card__emissions-image {
        top: 190px;
        left: 50%;
        width: 735px;
        height: 491px;
        max-width: none;
        transform: translateX(-50%);
    }
    .carbon-emissions-chart h4 {
        top: 258px;
        left: 167px;
        width: 157px;
        font-size: 14px;
    }
    .carbon-emissions-chart__pie {
        top: 310px;
        left: 165px;
        width: 71px;
        height: 71px;
    }
    .carbon-emissions-chart__pie strong {
        font-size: 20px;
    }
    .carbon-emissions-chart__pie span {
        top: 21px;
        left: 83px;
        width: 53px;
        font-size: 12px;
    }
    .carbon-emissions-chart dl {
        --legend-marker-x: 50px;
        top: 407px;
        left: 151px;
        width: 205px;
        font-size: 12px;
    }
    .carbon-emissions-chart dl div {
        grid-template-columns: 63px 142px;
        min-height: 29px;
    }
    .carbon-emissions-chart dl div:nth-child(3) {
        min-height: 42px;
    }
    .carbon-emissions-chart dl div::before {
        width: 12px;
        height: 12px;
    }

    .carbon-climate-card__transition {
        top: 271px;
        left: -60px;
        width: 614px;
        height: 384px;
    }
    .carbon-climate-card__transition img {
        top: 68px;
        left: 84px;
        width: 433px;
        height: 433px;
    }
    .carbon-climate-card__sky {
        top: 335px;
        left: 187px;
        width: 120px;
        height: 119px;
    }
    .carbon-climate__measure h2 {
        font-size: 24px;
    }

    .carbon-compare {
        --compare-image-width: clamp(500px, 90vw, 667px);
        --compare-image-height: clamp(342px, 61.65vw, 457px);
        --compare-layer-offset: clamp(12px, 2.16vw, 16px);
        --compare-stage-height: calc(346px + var(--compare-image-height));
        height: var(--compare-stage-height);
    }
    .carbon-compare__stage {
        top: 0;
        left: 50%;
        width: 100vw;
        height: var(--compare-stage-height);
        transform: translateX(-50%);
    }
    .carbon-compare__copy {
        top: 32px;
        left: calc((100vw - var(--mobile-content)) / 2 + 24px);
        width: calc(var(--mobile-content) - 48px);
    }
    .carbon-compare__copy h2 {
        padding-bottom: 20px;
        font-size: 20px;
    }
    .carbon-compare__copy p {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.3;
    }
    .carbon .carbon-compare__image {
        width: var(--compare-image-width);
        height: var(--compare-image-height);
    }
    .carbon-compare__image--high {
        top: 346px;
        left: 50%;
        transform: translateX(-50%);
    }
    .carbon-compare__image--low {
        top: 346px;
        left: calc(50% + var(--compare-layer-offset));
        transform: translateX(-50%);
    }
    .carbon-compare__metric {
        top: 328px;
        right: calc((100vw - var(--mobile-content)) / 2 + 16px);
        left: auto;
        width: 130px;
    }
    .carbon-compare__fraction {
        width: 68px;
        height: 92px;
    }
    .carbon-compare__metric span {
        top: 16px;
        left: 54px;
        width: 76px;
        font-size: 11px;
    }
    .carbon-compare__handle {
        top: 492px;
        width: 48px;
        height: 48px;
    }
    .carbon-compare__handle svg {
        width: 32px;
        height: 24px;
    }

    .carbon-lab {
        --lab-card-visual-height: clamp(220px, 62vw, 344px);
        --lab-image-height: calc(721px + var(--lab-card-visual-height));
        --lab-gutter: calc((100vw - var(--mobile-content)) / 2);
    }
    .carbon-lab__heading p {
        font-size: 16px;
    }
    .carbon-lab__viewport {
        height: calc(414px + var(--lab-card-visual-height));
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }
    .carbon-lab__viewport::-webkit-scrollbar {
        display: none;
    }
    .carbon-lab__track {
        width: calc(var(--mobile-content) * 2 + 10px + var(--lab-gutter));
        height: calc(414px + var(--lab-card-visual-height));
        padding-left: var(--lab-gutter);
        gap: 10px;
        transform: none;
    }
    .carbon-lab-card {
        width: var(--mobile-content);
        height: calc(414px + var(--lab-card-visual-height));
    }
    .carbon-lab-card--leaching,
    .carbon-lab-card--emissions {
        width: var(--mobile-content);
    }
    .carbon-lab-card__visual,
    .carbon-lab-card--emissions .carbon-lab-card__visual {
        width: 100%;
        height: var(--lab-card-visual-height);
    }
    .carbon-lab-card--leaching .carbon-lab-card__scene,
    .carbon-lab-card--emissions .carbon-lab-card__scene {
        inset: 0;
        width: 100%;
        height: var(--lab-card-visual-height);
        object-fit: cover;
        object-position: center 82%;
    }
    .carbon-lab-card__logo {
        top: 25px;
        left: 24px;
        width: 69px;
        height: 30px;
    }
    .carbon-lab-card__impact strong {
        left: 11px;
        bottom: 67px;
        font-size: 40px;
    }
    .carbon-lab-card__impact span {
        left: 24px;
        bottom: 22px;
        width: calc(100% - 48px);
        font-size: 14px;
        line-height: 18px;
    }
    .carbon-lab-card--emissions .carbon-lab-card__impact strong:first-child {
        bottom: 67px;
    }
    .carbon-lab-card--emissions .carbon-lab-card__impact strong:nth-child(2) {
        left: 101px;
        bottom: 67px;
    }
    .carbon-lab-card--emissions .carbon-lab-card__impact span {
        bottom: 22px;
        width: calc(100% - 48px);
    }
    .carbon-lab-card__content,
    .carbon-lab-card--emissions .carbon-lab-card__content {
        top: var(--lab-card-visual-height);
        left: 0;
        width: 100%;
        height: 414px;
        padding: 24px;
        color: rgba(0, 0, 0, 0.8);
    }
    .carbon-lab-card__header {
        width: min(304px, 100%);
        height: auto;
        min-height: 111px;
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    .carbon-lab-card__content h3 {
        width: min(304px, 100%);
        font-size: 20px;
        line-height: 1.2;
    }
    .carbon .carbon-lab-card__subtitle,
    .carbon .carbon-lab-card--emissions .carbon-lab-card__subtitle {
        margin-top: 8px;
        padding-left: 14px;
        font-size: 12px;
        line-height: 15px;
    }
    .carbon-lab-bars {
        position: relative;
        inset: auto;
        width: min(304px, 100%);
        height: 239px;
        margin-top: 16px;
    }
    .carbon-lab-bar {
        height: 54px;
    }
    .carbon-lab-bar__fill {
        height: 28px;
    }
    .carbon-lab-bar__fill strong {
        top: 7px;
        font-size: 12px;
    }
    .carbon-lab-bar > p {
        top: 36px;
        font-size: 12px;
    }
    .carbon-lab-bar > b {
        top: -28px;
        font-size: 12px;
    }
    .carbon-lab-bar > b::before {
        top: 0;
    }
    .carbon-lab-bars--leaching {
        --leaching-green-width: 37%;
    }
    .carbon-lab-bars--leaching .carbon-lab-bar:first-child {
        top: 96px;
    }
    .carbon-lab-bars--leaching
        .carbon-lab-bar:first-child
        .carbon-lab-bar__fill {
        width: 100%;
    }
    .carbon-lab-bars--leaching .carbon-lab-bar:first-child > b {
        left: calc(var(--leaching-green-width) + 7px);
    }
    .carbon-lab-bars--leaching .carbon-lab-bar:first-child > b::before {
        top: 1px;
        right: calc(100% + 6px);
        width: 1px;
        height: 124px;
        max-width: none;
    }
    .carbon-lab-bars--leaching .carbon-lab-bar:last-child {
        top: 165px;
    }
    .carbon-lab-bars--leaching
        .carbon-lab-bar:last-child
        .carbon-lab-bar__fill {
        width: var(--leaching-green-width);
    }
    .carbon-lab-bars--emissions {
        --emissions-blue-width: 73.5%;
        --emissions-blue-tail-width: 80%;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) {
        top: 27px;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(1)
        .carbon-lab-bar__fill {
        width: 20%;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(1)
        .carbon-lab-bar__fill::after {
        width: 135%;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) > b {
        top: 44px;
        left: calc(var(--emissions-blue-width) + 5px);
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) > b::before {
        right: calc(100% + 4px);
        width: 1px;
        height: 38px;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) {
        top: 96px;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(2)
        .carbon-lab-bar__fill {
        width: var(--emissions-blue-width);
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(2)
        .carbon-lab-bar__fill::after {
        width: 108.843537%;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) > b {
        top: 33px;
        left: calc(var(--emissions-blue-tail-width) + 9px);
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) > b::before {
        top: -19px;
        right: calc(100% + 8px);
        height: 38px;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(3) {
        top: 166px;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(3)
        .carbon-lab-bar__fill {
        width: 44.5%;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(3)
        .carbon-lab-bar__fill::after {
        width: 116.85%;
    }

    .carbon-practice {
        height: auto;
    }
    .carbon-practice__heading {
        display: block;
    }
    .carbon-practice__heading h2 {
        width: 100%;
    }
    .carbon-practice__heading p {
        width: 100%;
        margin: 24px 0 0;
        font-size: 16px;
    }

    /* FIX: резиновая сетка фото — aspect-ratio + fr-строки вместо фиксированных px */
    .carbon-practice__photos {
        position: relative;
        top: auto;
        height: auto;
        aspect-ratio: 352 / 300;
        max-height: 520px;
        grid-template-columns: minmax(0, 63fr) minmax(0, 37fr);
        grid-template-rows: minmax(0, 167fr) minmax(0, 133fr);
    }
    .carbon-practice__photos img:first-child {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }
    .carbon-practice__photos img:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: 100%;
    }
    .carbon-practice__photos img:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 100%;
        height: 100%;
    }

    .carbon-practice__cards {
        position: relative;
        top: auto;
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }
    .carbon-practice__cards article {
        flex: none;
        width: 100%;
        padding: 0;
    }

    /* ФИКС: Увеличиваем высоты карточек, чтобы длинные тексты физически влезали */
    .carbon-practice__cards article:first-child {
        order: 1;
        height: 340px;
        min-height: 340px;
    }
    .carbon-practice__cards article:nth-child(3) {
        order: 2;
        height: 390px;
        min-height: 390px;
    }
    .carbon-practice__cards article:nth-child(2) {
        order: 3;
        height: 340px;
        min-height: 340px;
    }
    .carbon-practice__cards article:nth-child(4) {
        order: 4;
        height: 320px;
        min-height: 320px;
    }

    /* ФИКС: Заменяем фиксированные 300px на calc, чтобы текст не вылезал за границы узких колонок */
    .carbon-practice__cards article:not(:last-child) h3 {
        top: 32px;
        left: 24px;
        width: calc(100% - 100px);
        font-size: 20px;
        line-height: 24px;
    }
    .carbon-practice__cards article:nth-child(2) h3 {
        left: 24px;
        width: calc(100% - 48px);
    }
    .carbon-practice__cards article:nth-child(3) h3 {
        width: calc(100% - 100px);
    }

    /* ФИКС: Сдвигаем линии и тексты ниже, чтобы заголовки из 3-4 строк не перекрывали их */
    .carbon-practice__cards article:not(:last-child)::after {
        top: 110px;
        left: 24px;
        width: calc(100% - 48px);
    }
    .carbon-practice__cards article:nth-child(2)::after {
        top: 110px;
        left: 24px;
        width: calc(100% - 48px);
    }
    .carbon-practice__cards article:nth-child(3)::after {
        top: 130px;
    }

    .carbon-practice__cards article:not(:last-child) p {
        top: 130px;
        left: 24px;
        width: calc(100% - 48px);
        font-size: 16px;
        line-height: 21px;
    }
    .carbon-practice__cards article:nth-child(2) p {
        top: 130px;
        left: 24px;
        width: calc(100% - 48px);
    }
    .carbon-practice__cards article:nth-child(3) p {
        top: 150px;
        width: calc(100% - 48px);
    }
    .carbon-practice__cards article:last-child p {
        top: 33px;
        left: 25px;
        width: calc(100% - 80px);
        font-size: 20px;
        line-height: 24px;
    }

    .carbon-practice__cards article:nth-child(1) img {
        top: 17px;
        right: 15px;
        width: 47px;
        height: 47px;
    }
    .carbon-practice__cards article:nth-child(2) img {
        top: 14px;
        right: 18px;
        width: 50px;
        height: 50px;
    }
    .carbon-practice__cards article:nth-child(3) img {
        top: 23px;
        right: 25px;
        width: 44px;
        height: 44px;
    }
    .carbon-practice__cards article:nth-child(4) img {
        top: 26px;
        right: 18px;
        width: 50px;
        height: 50px;
    }

    .carbon-closing {
        height: 522px;
    }
    .carbon-closing__content h2 {
        top: var(--section-space);
        width: 100%;
    }
    .carbon-closing__content p {
        bottom: var(--section-space);
        width: 100%;
        font-size: 16px;
    }

    .carbon-climate__heading {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .carbon-climate__viewport {
        left: 50%;
        width: 100vw;
        max-width: none;
        transform: translateX(-50%);
    }
    .carbon-climate-track {
        width: calc(200vw + 10px);
    }
    .carbon-climate-card--emissions,
    .carbon-climate-card--targets {
        width: 100vw;
    }
    .carbon-climate__measure {
        width: var(--mobile-content);
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .carbon-climate__measure .carbon-label,
    .carbon-climate__measure h2 {
        width: 100%;
        margin: 0;
    }

    .carbon-lab {
        --lab-track-offset: 259px;
    }
    .carbon-lab__heading {
        display: block;
    }
    .carbon-lab__heading p {
        margin-top: 24px;
    }
}

/* 5. TABLET SPECIFIC (768px - 1180px) */
@media (min-width: 768px) and (max-width: 1180px) {
    .carbon {
        --section-space: 72px;
    }
    .demo-header {
        height: 80px;
    }
    .demo-header__top {
        height: 80px;
    }
    .demo-header .demo-logo {
        width: 219px;
        height: 50px;
    }
    .demo-header__mobile-actions {
        gap: 24px;
    }
    .demo-header__mobile-actions button {
        width: 34px;
        height: 34px;
    }

    .carbon-hero {
        height: clamp(620px, 47.92vw, 690px);
    }
    .carbon-hero__content {
        padding-top: var(--section-space);
    }
    .carbon-hero__caption {
        bottom: var(--section-space);
    }

    .carbon-intro {
        height: auto;
    }
    .carbon-intro__copy {
        grid-template-columns: 30% 65%;
        gap: 5%;
    }
    .carbon-intro__copy > .carbon-label,
    .carbon-intro__body {
        width: 100%;
    }
    .carbon-intro__photos {
        height: 320px;
    }
    .carbon-intro__summary {
        grid-template-columns: 48% 45%;
        gap: 7%;
    }
    .carbon-intro__summary h2,
    .carbon-intro__summary p {
        width: 100%;
    }
    .carbon-intro__summary p {
        margin-top: 4px;
    }

    .carbon-solutions {
        height: 760px;
    }
    .carbon-products {
        top: auto;
        bottom: var(--section-space);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .carbon-product-card,
    .carbon-product-card:nth-child(2) {
        height: 150px;
    }
    .carbon-product-slide__copy {
        top: 430px;
    }
    .carbon-product-nav button {
        top: 210px;
        width: 64px;
        height: 64px;
    }
    .carbon-product-nav button:first-child {
        left: 32px;
    }
    .carbon-product-nav button:last-child {
        right: 32px;
        left: auto;
    }

    .carbon-climate__heading h2,
    .carbon-climate__measure h2 {
        font-size: 34px;
    }

    .carbon-compare {
        height: 821px;
    }
    .carbon-compare__stage {
        height: 821px;
    }
    .carbon-compare__copy {
        width: min(620px, calc(var(--mobile-content) - 48px));
    }
    .carbon .carbon-compare__image {
        top: 291px;
        width: 760px;
        height: 521px;
    }
    .carbon-compare__image--high {
        left: 50%;
    }
    .carbon-compare__image--low {
        left: calc(50% + 18px);
    }
    /* .carbon-compare__metric { top: 273px; } */
    .carbon-compare__handle {
        top: 431px;
        width: 64px;
        height: 64px;
    }

    .carbon-lab {
        --lab-image-height: 852px;
    }
    .carbon-lab__viewport {
        height: 499px;
    }
    .carbon-lab__track {
        width: calc(2063px + var(--lab-gutter));
        height: 499px;
        gap: 24px;
    }
    .carbon-lab-card {
        height: 499px;
    }
    .carbon-lab-card--leaching {
        width: 984px;
    }
    .carbon-lab-card--emissions {
        width: 1055px;
    }
    .carbon-lab-card__visual {
        width: 400px;
        height: 499px;
    }
    .carbon-lab-card--emissions .carbon-lab-card__visual {
        width: 401px;
        height: 499px;
    }
    .carbon-lab-card--leaching .carbon-lab-card__scene {
        top: -150px;
        right: auto;
        bottom: auto;
        left: -72px;
        width: 494px;
        height: 649px;
    }
    .carbon-lab-card--emissions .carbon-lab-card__scene {
        top: -127px;
        right: auto;
        bottom: auto;
        left: -56px;
        width: 467px;
        height: 626px;
    }
    .carbon-lab-card__logo {
        top: 46px;
        left: 48px;
        width: 112px;
        height: 49px;
    }
    .carbon-lab-card__impact strong {
        left: 28px;
        bottom: 18px;
        font-size: 70px;
    }
    .carbon-lab-card__impact span {
        left: 48px;
        bottom: 108px;
        width: 190px;
        font-size: 20px;
        line-height: 1.2;
    }
    .carbon-lab-card--emissions .carbon-lab-card__impact strong:first-child {
        bottom: 94px;
    }
    .carbon-lab-card--emissions .carbon-lab-card__impact strong:nth-child(2) {
        left: 28px;
        bottom: 18px;
    }
    .carbon-lab-card--emissions .carbon-lab-card__impact span {
        bottom: 185px;
        width: 190px;
        white-space: normal;
    }
    .carbon-lab-card__content,
    .carbon-lab-card--emissions .carbon-lab-card__content {
        top: 0;
        left: 448px;
        width: 466px;
        height: 499px;
        padding: 0;
        color: #000;
    }
    .carbon-lab-card--emissions .carbon-lab-card__content {
        left: 449px;
    }
    .carbon-lab-card__header {
        width: auto;
        height: 175px;
        padding-top: 47px;
    }
    .carbon-lab-card--emissions .carbon-lab-card__header {
        padding-top: 44px;
    }
    .carbon-lab-card__content h3 {
        width: auto;
        font-size: 24px;
        line-height: 1;
    }
    .carbon .carbon-lab-card__subtitle {
        margin-top: 18px;
        padding-left: 18px;
        font-size: 17px;
        line-height: 24px;
    }
    .carbon .carbon-lab-card--emissions .carbon-lab-card__subtitle {
        margin-top: 17px;
    }
    .carbon-lab-bars {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        margin-top: 0;
    }
    .carbon-lab-bar {
        height: 62px;
    }
    .carbon-lab-bar__fill {
        height: 32px;
    }
    .carbon-lab-bar__fill strong {
        top: 6px;
        font-size: 17px;
    }
    .carbon-lab-bar > p {
        top: 39px;
        font-size: 17px;
    }
    .carbon-lab-bar > b {
        top: -30px;
        font-size: 17px;
    }
    .carbon-lab-bars--leaching .carbon-lab-bar:first-child {
        top: 303px;
    }
    .carbon-lab-bars--leaching
        .carbon-lab-bar:first-child
        .carbon-lab-bar__fill {
        width: 466px;
    }
    .carbon-lab-bars--leaching .carbon-lab-bar:first-child > b {
        left: 165px;
    }
    .carbon-lab-bars--leaching .carbon-lab-bar:first-child > b::before {
        top: 0;
        right: calc(100% + 6px);
        width: 1px;
        height: 145px;
        max-width: none;
    }
    .carbon-lab-bars--leaching .carbon-lab-bar:last-child {
        top: 386px;
    }
    .carbon-lab-bars--leaching
        .carbon-lab-bar:last-child
        .carbon-lab-bar__fill {
        width: 159px;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) {
        top: 230px;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(1)
        .carbon-lab-bar__fill {
        width: 80px;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(1)
        .carbon-lab-bar__fill::after {
        width: 110px;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) > b {
        top: 51px;
        left: 421px;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(1) > b::before {
        top: 0;
        right: calc(100% + 4px);
        width: 1px;
        height: 44px;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) {
        top: 309px;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(2)
        .carbon-lab-bar__fill {
        width: 417px;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(2)
        .carbon-lab-bar__fill::after {
        width: 454px;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) > b {
        top: 38px;
        left: 462px;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(2) > b::before {
        top: -22px;
        right: calc(100% + 8px);
        height: 44px;
    }
    .carbon-lab-bars--emissions .carbon-lab-bar:nth-child(3) {
        top: 389px;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(3)
        .carbon-lab-bar__fill {
        width: 177px;
    }
    .carbon-lab-bars--emissions
        .carbon-lab-bar:nth-child(3)
        .carbon-lab-bar__fill::after {
        width: 207px;
    }

    .carbon-practice {
        height: auto;
    }
    .carbon-practice__heading {
        grid-template-columns: 48% 45%;
        gap: 7%;
    }
    .carbon-practice__heading h2 {
        width: 100%;
    }
    .carbon-practice__heading p {
        width: 100%;
        margin-top: 8px;
    }

    /* FIX: на планшете пропорции вместо фиксированной высоты */
    .carbon-practice__photos {
        aspect-ratio: 16 / 9;
        max-height: none;
    }

    .carbon-practice__cards {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
    .carbon-practice__cards article:nth-child(1),
    .carbon-practice__cards article:nth-child(2),
    .carbon-practice__cards article:nth-child(3),
    .carbon-practice__cards article:nth-child(4) {
        order: initial;
    }

    .carbon-closing {
        height: 650px;
    }

    .carbon-lab {
        --lab-track-offset: 220px;
    }
    .carbon-lab__heading {
        display: grid;
        grid-template-columns: 48% 45%;
        gap: 7%;
    }
    .carbon-lab__heading p {
        margin-top: 8px;
    }
}

/* 6. MOBILE SPECIFIC (<= 767px) */
@media (max-width: 767px) {
    .carbon-product-background[data-product-background="entec"] {
        background-image: url("../images/product-entec-background-mobile.svg");
    }
    .carbon-product-can-stage {
        aspect-ratio: 393 / 448;
    }
    .carbon-product-can-stage__bag {
        left: 31.8066%;
        top: 27.2321%;
        width: 35.8779%;
    }
    .carbon-product-can-stage__pile {
        left: 26.4631%;
        top: 68.75%;
        width: 50.1272%;
    }
    .carbon-product-slide--can .carbon-product-slide__copy {
        top: calc(113.995vw + 24px);
    }
    .carbon-product-view[data-product="can"] .carbon-product-nav button {
        top: 54.453vw;
    }
    .carbon-product-card__visual--entec img:first-child {
        left: 31px;
    }
    .carbon-product-card__visual--entec img:last-child {
        left: 13px;
    }

    .carbon-intro > .carbon-container {
        height: auto;
        padding: var(--section-space) 0;
    }
    .carbon-intro__copy {
        position: relative;
        top: auto;
    }
    .carbon-intro__copy > .carbon-label {
        position: relative;
        top: auto;
        left: auto;
    }
    .carbon-intro__body {
        position: relative;
        top: auto;
        left: auto;
    }
    .carbon-intro__body p:last-child {
        margin-bottom: 0;
    }
    .carbon-intro__photos {
        position: relative;
        top: auto;
        margin-top: 0;
    }
    .carbon-intro__summary {
        position: relative;
        top: auto;
        margin-top: 0;
    }
    .carbon-intro__summary p {
        position: relative;
        top: auto;
        left: auto;
        margin: 0;
    }

    .carbon-climate__heading h2 {
        font-size: clamp(26px, 4.5vw, 32px);
    }
    .carbon-climate__measure h2 {
        font-size: 24px;
    }
    .carbon-compare__metric {
        display: none;
    }

    .carbon-climate__viewport {
        left: auto;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        transform: none;
    }
    .carbon-climate-track {
        width: calc(var(--mobile-content) * 2 + 10px);
    }
    .carbon-climate-card--emissions,
    .carbon-climate-card--targets {
        width: var(--mobile-content);
    }

    .carbon-lab__viewport {
        scroll-padding-left: 0;
    }
    .carbon-lab__track {
        width: calc(var(--mobile-content) * 2 + 10px);
        padding-left: 0;
    }
}

/* 7. FLUID TYPOGRAPHY & SPACING (431px - 1180px) */
@media (min-width: 431px) and (max-width: 1180px) {
    .carbon {
        --mobile-content: calc(100vw - clamp(40px, 8vw, 64px));
    }
    .demo-header__inner,
    .demo-footer__inner {
        width: var(--mobile-content);
    }
    .carbon h1 {
        font-size: clamp(32px, 5vw, 42px);
    }
    .carbon h2 {
        font-size: clamp(32px, 4.4vw, 44px);
    }
    .carbon-hero h1 {
        width: min(620px, 72vw);
    }
    .carbon-hero p {
        width: min(420px, 62vw);
    }
    .carbon-intro__body p {
        font-size: clamp(24px, 3.4vw, 32px);
    }
    .carbon-intro__photos {
        height: clamp(180px, 38vw, 320px);
    }
    .carbon-product-card small {
        max-width: 34ch;
    }
    .carbon-climate__heading h2 {
        width: min(680px, 100%);
    }
    .carbon-climate__viewport {
        width: calc(100% + clamp(20px, 4vw, 32px));
        max-width: calc(100vw - clamp(20px, 4vw, 32px));
    }
    .carbon .carbon-climate-card__emissions-image {
        left: 50%;
        width: 735px;
        max-width: none;
        transform: translateX(-50%);
    }
    .carbon-climate-card__transition {
        left: 50%;
        transform: translateX(-50%);
    }
    .carbon-climate-card__sky {
        left: calc(50% + 10px);
    }
}

/* 8. SMALL MOBILE (<= 430px) */
@media (max-width: 430px) {
    .carbon-intro__photos {
        height: 180px;
    }
    .carbon-lab {
        --lab-card-visual-height: 240px;
    }
}

/* 9. ACCESSIBILITY (Prefers Reduced Motion) */
@media (prefers-reduced-motion: reduce) {
    .carbon-product-card,
    .carbon-product-card__visual img {
        transition: none;
    }
    .carbon-product-card:hover,
    .carbon-product-card:active {
        transform: none;
    }
    .carbon-product-card:hover .carbon-product-card__visual img {
        transform: none;
    }
    .carbon-climate {
        height: auto;
    }
    .carbon-climate__pin {
        height: 877px;
    }
    .carbon-climate__sticky {
        position: relative;
        height: 877px;
    }
    .carbon-climate__viewport {
        overflow-x: auto;
    }
    .carbon-climate-track {
        transform: none;
    }
    .carbon-lab {
        height: var(--lab-sticky-height);
    }
    .carbon-lab__sticky {
        position: relative;
    }
    .carbon-lab__viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .carbon-lab__track {
        transform: none;
    }
}

/* =========================================
   FIX: Ограничение слайдера рамками картинки
   ========================================= */

/* 1. ДЕСКТОП (>= 1181px): Текст слева, картинки справа */
@media (min-width: 1181px) {
    .carbon .carbon-compare__image {
        width: 642px;
    }

    /* Центрируем в свободной зоне справа от текста (489px до 1318px) */
    .carbon-compare__image--high {
        left: 573px;
    }
    .carbon-compare__image--low {
        left: 593px; /* Смещение +20px для эффекта глубины */
    }

    /* Зажимаем ползунок и шторку в пределах 573px — 1215px (573 + 642) */
    .carbon-compare__handle {
        left: clamp(573px, var(--position), 1215px);
    }
    .carbon-compare__reveal {
        clip-path: inset(0 0 0 clamp(573px, var(--position), 1215px));
    }
}

/* 2. ПЛАНШЕТ (768px — 1180px): Текст сверху, картинка снизу (ширина 760px) */
@media (min-width: 768px) and (max-width: 1180px) {
    /* Ширина stage 1318px, ширина картинки 760px.
     Левый край картинки: (1318 - 760) / 2 = 279px.
     Правый край: 279 + 760 = 1039px. */
    .carbon-compare__handle {
        left: clamp(279px, var(--position), 1039px);
    }
    .carbon-compare__reveal {
        clip-path: inset(0 0 0 clamp(279px, var(--position), 1039px));
    }
}

/* 3. МОБИЛЬНЫЕ (<= 1180px): Stage во всю ширину, картинка центрирована */
@media (max-width: 1180px) {
    /* Картинка имеет ширину var(--compare-image-width) и центрирована через left: 50%; transform: translateX(-50%);
     Левый край: (100vw - var(--compare-image-width)) / 2
     Правый край: (100vw + var(--compare-image-width)) / 2 */
    .carbon-compare__handle {
        left: clamp(
            calc((100vw - var(--compare-image-width)) / 2),
            var(--position),
            calc((100vw + var(--compare-image-width)) / 2)
        );
    }
    .carbon-compare__reveal {
        clip-path: inset(
            0 0 0
                clamp(
                    calc((100vw - var(--compare-image-width)) / 2),
                    var(--position),
                    calc((100vw + var(--compare-image-width)) / 2)
                )
        );
    }
}

/* 4. МАЛЕНЬКИЕ МОБИЛЬНЫЕ (<= 767px): Уменьшаем ширину слайдера для компактности */
@media (max-width: 767px) {
    /* На самых маленьких экранах оставляем запас по краям,
     чтобы ползунок не прилипал к границам экрана */
    .carbon-compare__handle {
        left: clamp(
            calc((100vw - var(--compare-image-width)) / 2 + 24px),
            var(--position),
            calc((100vw + var(--compare-image-width)) / 2 - 24px)
        );
    }
    .carbon-compare__reveal {
        clip-path: inset(
            0 0 0
                clamp(
                    calc((100vw - var(--compare-image-width)) / 2),
                    var(--position),
                    calc((100vw + var(--compare-image-width)) / 2)
                )
        );
    }
}

/* ===== Climate slider with arrows ===== */
.carbon-climate__nav {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.carbon-climate__nav[hidden] {
    display: none !important;
}
.carbon-climate__arrow {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--carbon-deep, #002e45);
    border-radius: 50%;
    background: #fff;
    color: var(--carbon-deep, #002e45);
    cursor: pointer;
    transition:
        background-color 0.2s,
        color 0.2s,
        opacity 0.2s;
}
.carbon-climate__arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: square;
    stroke-linejoin: miter;
}
.carbon-climate__arrow:hover:not(:disabled) {
    background: var(--carbon-deep, #002e45);
    color: #fff;
}
.carbon-climate__arrow:focus-visible {
    outline: 2px solid var(--carbon-cyan, #00a4d3);
    outline-offset: 3px;
}
.carbon-climate__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}
.carbon-climate__viewport:focus-visible {
    outline: 2px solid var(--carbon-cyan, #00a4d3);
    outline-offset: -2px;
}

/* Desktop (>=1181px): отключаем sticky и ставим блок в обычный поток */
@media (min-width: 1181px) {
    .carbon-climate__pin {
        height: auto;
    }
    .carbon-climate__sticky {
        position: relative;
        height: auto;
    }
    .carbon-climate__pin .carbon-container {
        display: grid;
        height: auto;
        padding-top: var(--section-space);
        gap: 20px;
    }
    .carbon-climate__heading {
        position: relative;
        top: auto;
        left: auto;
        display: grid;
        width: 100%;
        grid-template-columns: 289px 647px;
        gap: 48px;
    }
    .carbon-climate__heading .carbon-label,
    .carbon-climate__heading h2 {
        position: static;
        width: auto;
        margin: 0;
    }

    .carbon-climate__viewport {
        position: relative;
        top: auto;
        left: auto;
        height: 572px;
        max-width: 100vw;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .carbon-climate__viewport::-webkit-scrollbar {
        display: none;
    }
    .carbon-climate-track {
        width: max-content;
        transform: none;
    }
    .carbon-climate-card {
        scroll-snap-align: start;
    }
}

/* Tablet / mobile: меньшие кнопки, остальное уже работает через нативный скролл */
@media (max-width: 1180px) {
    .carbon-climate__nav {
        justify-content: center;
    }
    .carbon-climate__arrow {
        width: 48px;
        height: 48px;
    }
    .carbon-climate__arrow svg {
        width: 18px;
        height: 18px;
    }
}
@media (max-width: 767px) {
    .carbon-climate__nav {
        width: var(--mobile-content);
        margin-inline: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .carbon-climate__arrow {
        transition: none;
    }
}

@media (min-width: 1181px) {
    .carbon-product-slide {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }
    .carbon-product-slide::-webkit-scrollbar {
        display: none;
    }
    .carbon-product-slide__copy {
        padding-bottom: 64px; /* запас снизу, чтобы последний абзац не прилипал к краю */
    }
}

.carbon-product-background[data-product-background="entec"] {
    /* фон не короче контента (880px), иначе внизу пропадёт диагональ */
    background-size: calc(100% - 4px) max(100dvh, 880px);
    transform: translateY(calc(-1 * var(--product-scroll, 0px)));
    will-change: transform;
}

/* область картинок = весь контент + запас под pile (top 577 + height 237 = 814) */
.carbon-product-slide--entec .carbon-product-slide__visual {
    min-height: 880px;
}