.klccp-netzero-section {
    background: var(--color-white, #ffffff);
    overflow: hidden;
}

.klccp-netzero-section .klccp-netzero {
    gap: var(--gap48, 48px);
}

.klccp-netzero-section .klccp-netzero__intro {
    width: 100%;
    max-width: var(--medium-width, 800px);
}

.klccp-netzero-section .klccp-netzero__title {
    margin: 0;
    font-family: var(--font-family-heading, "Museo Sans", "Inter", Verdana, sans-serif);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-brand-blue, #204a8a);
}

.klccp-netzero-section .klccp-netzero__body {
    margin: 0;
    font-family: var(--font-family-body, Verdana, sans-serif);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text, #333333);
}

.klccp-netzero-section .netzero-timeline {
    width: 100%;
    padding: 0;
}

.klccp-netzero-section .netzero-timeline .netzero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.klccp-netzero-section .netzero-timeline .netzero-title {
    font-family: var(--font-family-heading, "Museo Sans", "Inter", Verdana, sans-serif);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.6rem);
    text-align: center;
    color: var(--color-brand-blue, #204a8a);
}

.klccp-netzero-section .netzero-timeline .netzero-intro {
    max-width: 760px;
    margin: 12px auto 40px;
    text-align: center;
    line-height: 1.6;
    color: var(--color-text, #333333);
}

.klccp-netzero-section .netzero-timeline .netzero-track {
    display: flex;
    gap: var(--gap24, 24px);
    align-items: flex-start;
    justify-content: space-between;
}

.klccp-netzero-section .netzero-timeline .netzero-milestone {
    flex: 1;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.klccp-netzero-section .netzero-timeline .netzero-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: var(--gap48, 48px);
}

.klccp-netzero-section .netzero-timeline .netzero-year {
    font-family: var(--font-family-heading, "Museo Sans", "Inter", Verdana, sans-serif);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-brand-blue, #204a8a);
}

.klccp-netzero-section .netzero-timeline .netzero-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
}

.klccp-netzero-section .netzero-timeline .netzero-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--netzero-accent);
    background: var(--color-white, #ffffff);
}

.klccp-netzero-section .netzero-timeline .netzero-line {
    width: 2px;
    height: 24px;
    border-radius: 2px;
    background: var(--netzero-accent);
    transform-origin: top center;
}

.klccp-netzero-section .netzero-timeline .netzero-bar {
    width: 100%;
    height: 14px;
    border-radius: 8px;
    background: var(--netzero-accent);
    transform-origin: left center;
}

.klccp-netzero-section .netzero-timeline .netzero-details {
    align-self: stretch;
    text-align: left;
    margin-top: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
}

.klccp-netzero-section .netzero-timeline .netzero-item {
    display: block;
    position: relative;
    padding-left: 14px;
    line-height: 1.35;
    color: var(--color-text, #333333);
}

.klccp-netzero-section .netzero-timeline .netzero-item::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--netzero-accent);
}

.klccp-netzero-section .netzero-timeline .netzero-final {
    padding-left: 0;
    margin-bottom: 10px;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    text-align: center;
}

.klccp-netzero-section .netzero-timeline .netzero-final::before {
    content: "";
}

.klccp-netzero-section .netzero-timeline .netzero-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--netzero-accent);
    color: var(--netzero-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.klccp-netzero-section .netzero-timeline .netzero-icon-below {
    margin-top: 8px;
    width: 44px;
    height: 44px;
    background: var(--netzero-accent);
    color: var(--color-white, #ffffff);
    border: none;
    align-self: center;
}

.klccp-netzero-section .netzero-timeline .netzero-icon-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.klccp-netzero-section .netzero-timeline .netzero-milestone[data-step="2023"] {
    --netzero-accent: #c43d32;
}

.klccp-netzero-section .netzero-timeline .netzero-milestone[data-step="2024-2030"] {
    --netzero-accent: #e74c3c;
}

.klccp-netzero-section .netzero-timeline .netzero-milestone[data-step="2030"] {
    --netzero-accent: #f0b429;
}

.klccp-netzero-section .netzero-timeline .netzero-milestone[data-step="2030-2050"] {
    --netzero-accent: #7bc043;
}

.klccp-netzero-section .netzero-timeline .netzero-milestone[data-step="2050"] {
    --netzero-accent: #0b7d6b;
}

@media (max-width: 1024px) {
    .klccp-netzero-section .netzero-timeline .netzero-track {
        flex-wrap: wrap;
    }

    .klccp-netzero-section .netzero-timeline .netzero-milestone {
        flex: 1 1 45%;
    }
}