/* about_us/styles.css */
.journey [role="heading"][aria-level="2"] {
    margin-top: 0%;
}
.journey {
    padding-top: 140px;
}
.our-stories {
    background-color: #F7F7F7;
}
.about-hero .aboutus-container {
    position: relative;
    z-index: 2; /* above bg and overlay */
}

.about-hero h1,
.about-hero__title {
    color: white;
    font-size: 56px;
    font-weight: 700;
}

.about-page {
    background: #fdfdfd;
}

.section-pad {
    padding: 100px 0;
}

.container {
    max-width: var(--max-width, 1180px); /* 1220? Figma said 1220 width content */
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1.6rem;
}

/* Who We Are */
.who-we-are-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.who-we-are h2.section-title {
    text-align: center;
    margin-bottom: 24px;
    font-weight: 700;
    font-style: Bold;
    font-size: 46px;
    line-height: 100%;
    letter-spacing: 0%;
}

.core-values h2.section-title {
    margin-bottom: 4rem;
    font-weight: 700;
    font-style: Bold;
    font-size: 46px;
    line-height: 100%;
    letter-spacing: 0%;
}

.who-we-are .section-desc {
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0%;
    text-align: left;
    max-width: 1220px;
    margin: 0;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 32px;
    color: #27201F;
    padding: 0 140px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .who-we-are .section-desc { padding: 0 72px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .who-we-are .section-desc { padding: 0 36px; }
}
@media (max-width: 767px) {
    .who-we-are .section-desc { padding: 0 24px; }
}

.who-we-are-visuals {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 60px;
}
.who-we-are-visuals video {
    width: 880px;
    border-radius: 20px;
}
@media screen and (max-width: 1279px) and (min-width: 768px) {
    .who-we-are-visuals video {
        max-width: 616px;
    }
}

/* ✅ 小于768px */
@media screen and (max-width: 767px) {
    .who-we-are-visuals video {
        max-width: min(767px, calc(100% - 48px));
    }
}

/* Our Stories */
.our-stories .stories-header {
    max-width: 1220px;
    margin: 0 auto 40px;
}

.our-stories .section-title {
    text-align: left;
    margin-left: 0;
    margin-bottom: 70px;
    font-weight: 700;
    font-style: Bold;
    font-size: 46px;
    line-height: 100%;
    letter-spacing: 0%;
}


.journey [role="heading"][aria-level="2"] {
    font-size: 46px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .our-stories.section-pad {
        padding: 60px 24px;
    }

    .story-content-container {
        max-width: 100%;
        height: 300px;
    }

        .story-content-container .story-content-card,
        .story-content-card {
            gap: 36px;
        }

    .story-img-wrap {
        width: 450px !important;
        height: 300px !important;
        flex-shrink: 0;
    }

    .story-details {
        width: auto;
        flex: 1 1 auto;
    }
}

.story-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.story-content-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: transparent;
    box-shadow: none;
    max-width: 1220px;
    margin: 0 auto;
    gap: 64px;
}

/* Responsive: center hero title on small screens */
@media (max-width: 768px) {
    .about-hero .aboutus-container {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 24px; /* keep some horizontal padding on small screens */
    }

    .about-hero__title {
        font-size: 36px; /* scale down from 56px */
        line-height: 1.1;
        max-width: 100%;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .about-hero__title {
        font-size: 28px;
    }
}

/* Story content container: multiple cards stacked, only active visible */
.story-content-container {
    position: relative;
    max-width: 1220px;
    height: 390px; /* Force height to match card height to prevent jumping */
    margin: 0 auto;
    overflow: hidden; /* Hide cards sliding in/out */
}

    .story-content-container .story-content-card {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        opacity: 0;
        /* Start position for incoming cards: from right */
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
        /* Default transition */
        -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
        -moz-transition: -moz-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
        -ms-transition: -ms-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
        -o-transition: -o-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
        transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
        display: flex;
        gap: 36px;
        z-index: 1;
    }

        .story-content-container .story-content-card.active {
            opacity: 1;
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0);
            z-index: 2;
        }

        /* We need a 'prev' state for cards leaving. 
   Usually we can't easily distinguish 'prev' vs 'next' direction without JS classes like .leave-up or .leave-down.
   But user asked for "roll up". Usually means new one comes from bottom, old one goes to top? 
   Or simply "scroll up effect".
   Let's assume standard carousel direction: new enters from bottom, old leaves to top. */

        .story-content-container .story-content-card.leaving {
            -webkit-transform: translateX(-100%);
            -moz-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            -o-transform: translateX(-100%);
            transform: translateX(-100%);
            opacity: 0;
        }

.story-img-wrap {
    z-index: 2;
}

.story-details {
    z-index: 2;
}

.story-img-wrap {
    width: 600px;
    height: 390px;
    flex-shrink: 0;
    border-radius: 24px;
    overflow: hidden;
}

    .story-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Ensure .visual-mask keeps consistent margins and scales cleanly on very small screens */
@media (max-width: 700px) {
    .visual-mask {
        /* on small screens use full width minus comfortable horizontal padding */
        width: calc(100% - 48px);
        max-width: 100%;
        margin: 0 auto;
        height: auto;
        aspect-ratio: 880 / 500;
    }
}



.story-details {
    width: 531px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically center year + points beside image */
}

.year-title {
    font-size: 40px;
    color: #27201F;
    font-weight: 700;
    margin-bottom: 20px;
}

.story-points p {
    font-size: 18px;
    line-height: 32px;
    color: #27201F;
    margin-bottom: 12px;
    font-weight: 400;
}

/* Timeline */
.timeline-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 60px;
    padding: 0 15%;
    position: relative;
}

.timeline-nav {
    position: relative;
    flex: 1;
    padding: 24px 0;
    margin: 0 20px;
    background: transparent;
    overflow: hidden;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .timeline-nav::-webkit-scrollbar {
        display: none;
    }

.timeline-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #E6E6E6;
    z-index: 1;
    transform: translateY(-50%);
    border-radius: 2px;
}

/* Faded edge overlays to mimic the "mask near edges" effect in the prototype */
.timeline-nav::before,
.timeline-nav::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* Reduced width slightly for better visibility */
    pointer-events: none;
    z-index: 3;
}

.timeline-nav::before {
    left: 0;
}

.timeline-nav::after {
    right: 0;
}

.timeline-points {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: flex-start; /* Changed from space-between to allow sliding */
    flex-wrap: nowrap;
    align-items: flex-start;
    height: 80px; /* increased height */
    width: max-content; /* Allow it to grow */
    will-change: transform;
    cursor: grab;
    padding: 0 50%; /* Padding to allow centering first/last items */
    transition: transform 0.1s linear; /* Default transition, effectively overridden by JS usually */
}

    .timeline-points:active {
        cursor: grabbing;
    }

.point {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* cursor: pointer; -- handled by container mostly, but keep for click */
    cursor: pointer;
    position: relative;
    flex: 0 0 auto; /* Don't shrink */
    width: 100px; /* Fixed width for calculation simplicity */
    margin: 0 20px; /* Spacing between points */
    /* push the point content down so the dot sits on the track center */
    padding-top: 32px;
    user-select: none;
    -webkit-user-drag: none;
}

    .point img {
        -webkit-user-drag: none;
    }
    /* prevent image drag if any */

    .point .dot {
        width: 14px;
        height: 14px;
        background: #CCCCCC;
        border: 2px solid #FFFFFF;
        border-radius: 50%;
        margin: 0 0 10px 0;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 5;
        position: relative;
        flex: 0 0 auto;
    }
    /* Connect line extension for active feels? optional */

    .point.active .dot {
        border-color: var(--clr-accent, #DA291C);
        background: var(--clr-accent, #DA291C);
        transform: scale(1.4);
        box-shadow: 0 0 0 4px #FFFFFF; /* white outer ring */
        z-index: 6;
    }

    .point .label {
        margin-top: 8px;
        font-size: 16px;
        color: #999;
        font-weight: 500;
        text-align: center;
        line-height: 1.1;
        width: 100%;
        white-space: normal;
    }

@media screen and (min-width: 1024px) {
    .point .label {
        white-space: nowrap;
    }
}


    .point.active .label {
        color: #27201F;
        font-weight: 600;
        font-size: 24px;
    }

.timeline-arrow {
    background: none;
    border: none;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: #666;
}


.timeline-arrow:hover {
    background: #f5f5f5;
    color: var(--clr-accent);
}

.timeline-undo {
    margin-left: 20px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: #27201F;
}

    .timeline-undo:hover {
        color: var(--clr-accent);
    }

/* E2E Section */
.e2e-section.contrast-bg {
    background: white;
    padding-bottom: 100px;
}

.e2e-flowchart {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    position: relative;
}
/* Simplified visual placement of boxes */
.flow-step {
    border: none; /* Remove border to look like graphic */
    padding: 10px;
    width: 200px; /* Reduced width to fit more */
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align */
    position: relative;
    text-align: center;
}

    .flow-step h3 {
        font-size: 16px;
        font-weight: 600;
        margin: 12px 0 0 0;
        color: #333;
    }

.step-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-box {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .icon-box img {
        max-width: 100%;
        max-height: 100%;
    }

/* Red dots for connection nodes */
.flow-step::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: #DA291C; /* Red dot */
    border-radius: 50%;
    margin-top: 10px;
}

/* Core Values */
.values-wrapper {
    width: fit-content;
    margin: 0 auto;
    max-width: 100%;
}

.core-values .section-title {
    text-align: left;
    margin-bottom: 24px;
}

.values-flex {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 20px;
}

.value-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 390px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

    .value-card.wide {
        width: 364px;
        flex: 0 0 364px;
    }

    .value-card.narrow {
        width: 198px;
        flex: 0 0 198px;
    }

    /* Background Image positioning */
    .value-card .card-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .value-card:hover .card-bg {
        -webkit-transform: scale(1.05) translateZ(0);
        transform: scale(1.05) translateZ(0);
    }

    /* Gradient Overlay */
    .value-card .card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.95) 100%); /*linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.8) 100%)*/
        z-index: 2;
    }

    .value-card.is-active .card-overlay {
        background: rgba(0, 0, 0, 0.65);
    }

    /* Content */
    .value-card .card-content {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 30px 24px;
        color: white;
    }

    .value-card h3 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 0;
        color: white;
    }

    /* Wide card specific text */
    .value-card.wide p {
        font-size: 14px;
        line-height: 1.6;
        margin-top: 16px;
        color: rgba(255, 255, 255, 0.9);
    }

    /* Spacing logic for narrow cards with breaks */
    .value-card.narrow h3 {
        font-size: 20px;
        word-break: break-word;
    }

    .value-card .card-content h3,
    .value-card .card-content p {
        text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    }


/* ===== Interactive hover expansion (JS-activated) ===== */
.values-flex--interactive {
    overflow: hidden;
}

.values-flex--interactive .value-card {
    cursor: pointer;
    will-change: flex-basis, width, transform;
    -webkit-transition: flex-basis 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                        width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: flex-basis 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    contain: layout style;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.values-flex--interactive .value-card:hover .card-bg {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.values-flex--interactive .value-card.wide,
.values-flex--interactive .value-card.narrow {
    flex: 0 0 198px;
    width: 198px;
}

.values-flex--interactive .value-card.is-active {
    flex: 0 0 364px;
    width: 364px;
}

.values-flex--interactive .value-card h3 {
    font-size: 20px;
    -webkit-transition: font-size 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: font-size 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .values-flex--interactive .value-card p {
        opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    -webkit-transition: opacity 0.25s ease 0s, max-height 0s linear 0s;
    transition: opacity 0.25s ease 0s, max-height 0s linear 0s;
    }

    .values-flex--interactive .value-card.is-active h3 {
        font-size: 24px;
    }

    .values-flex--interactive .value-card.is-active p {
        opacity: 1;
    max-height: 200px;
    overflow: visible;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
    color: rgba(255,255,255,0.9);
    -webkit-transition: opacity 0.2s ease 0.18s, max-height 0s linear 0.15s;
    transition: opacity 0.2s ease 0.18s, max-height 0s linear 0.15s;
    font-weight: 400;
    }

@media (max-width: 1023px) {
    .story-content-card {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .story-img-wrap, .story-details {
        width: 100%;
        max-width: 600px;
    }


    .timeline-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Tablet range specific adjustments */
@media (min-width: 768px) and (max-width: 1023px) {


    .journey [role="heading"][aria-level="2"] {
        font-size: 28px;
    }

    .journey {
        padding-top: 70px;
    }
    .our-stories.section-pad {
        padding: 60px 24px;
    }

    .our-stories .container {
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

    .our-stories .stories-header {
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .story-content-container {
        width: calc(100% - 20%);
        max-width: none;
        height: auto;
        min-height: 620px;
        margin: 0;
        overflow: hidden;
    }

    .story-content-container .story-content-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        width: 100%;
        max-width: 100%;
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 0;
    }

    .story-content-container .story-content-card.active {
        pointer-events: auto;
    }

    .story-img-wrap {
        width: 100%;
        max-width: 100%;
        height: 300px;
        aspect-ratio: 1.6;
    }

    .story-details {
        width: 100%;
        max-width: 100%;
        padding-top: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* Vertical Timeline Sidebar */
    .timeline-wrapper {
        position: absolute;
        z-index: 5;
        top: 140px; /* Align near top of image */
        right: 0;
        width: 15%;
        height: auto;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .timeline-nav {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        height: 485px !important; /* Force height for 5 items */
        flex: none; /* Prevent flex growth */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .timeline-nav::-webkit-scrollbar {
            display: none;
        }

        .timeline-nav::before,
        .timeline-nav::after {
            display: none;
        }

    .timeline-track {
        display: none;
    }

    .timeline-points {
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0;
        transform: none !important;
        align-items: flex-start;
        position: relative;
    }

        .timeline-points::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 21px; /* Center of dot (15px padding + 14px/2 approx + borders) */
            width: 4px;
            background: #E6E6E6;
        }

    .point {
        width: 100%;
        flex-direction: row;
        align-items: center;
        margin: 0 0 100px 0; /* Increase spacing */
        padding: 0 0 0 15px;
        transform: none !important;
    }

        .point .dot {
            margin: 0 10px 0 0;
        }

        .point .label {
            font-size: 16px;
            text-align: left;
            width: auto;
            margin: 0;
        }

    .timeline-arrow {
        display: none;
    }

    .timeline-undo {
        margin: 10px 0 0 3px;
    }
}

@media (max-width: 1897px) {
    .timeline-wrapper {
        padding: 0;
    }
}

/* Medium-large screens: 1280px ~ 1897px
   Adjust hero layout and tracking panel without affecting normal (larger) pages */
@media (min-width:1280px) and (max-width:1897px) {

    /* Header layout: Logo far left, Lang switch far right */
    .site-header {
        padding-left: 32px;
    }

    .who-we-are h2.section-title {
        font-size: 40px;
    }

    .our-stories h2.section-title {
        font-size: 40px;
    }

    .core-values h2.section-title {
        font-size: 40px;
    }

    .journey [role="heading"][aria-level="2"] {
        font-size: 40px;
    }
}

@media (max-width: 1279px) {
    .site-header {
        padding-left: 1.25rem;
    }

    .who-we-are h2.section-title {
        font-size: 28px;
    }

    .our-stories h2.section-title {
        font-size: 28px;
    }

    .core-values h2.section-title {
        font-size: 28px;
    }
}

/* Mobile specific overrides for vertical timeline layout (360px - 767px) */
@media (min-width: 360px) and (max-width: 767px) {

    .year-title {
        font-size: 28px;
    }

    .journey [role="heading"][aria-level="2"] {
        margin-bottom: 70px;
        font-size: 28px;
    }

    .core-values h2.section-title {
        font-size: 28px;
    }

    .our-stories.section-pad {
        padding: 40px 16px;
    }

    .our-stories .stories-header {
        margin: 0% 0%;
        width: 100%; /* Force header onto its own flex line so the timeline wrap position doesn't depend on title text width */
        flex: 0 0 100%;
    }

    .our-stories .container {
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

    .story-content-container {
        /* Make room for timeline on the right */
        width: calc(100% - 20%);
        max-width: none;
        height: auto;
        min-height: 500px; /* Allow height to grow */
        margin: 0;
        overflow: hidden;
    }

    .story-content-container .story-content-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 0;
    }

    .story-content-container .story-content-card.active {
        pointer-events: auto;
    }

    .story-img-wrap {
        width: 100%;
        height: auto;
        max-height: 300px;
    }

    .story-details {
        width: 100%;
        max-width: 100%;
        padding-top: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* Reuse Vertical Timeline Sidebar styles roughly */
    .timeline-wrapper {
        position: relative;
        z-index: 5;
        width: 20%; /* Increased from 60px to fit label */
        height: 602px; /* fixed height requested for this range */
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .timeline-undo {
        margin-left: 0;
        margin-right: 0;
    }

    .timeline-nav {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        height: 400px !important;
        flex: 1 1 auto;
        height: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        display: block; /* Ensure it is not hidden */
    }

        .timeline-nav::-webkit-scrollbar {
            display: none;
        }

        .timeline-nav::before,
        .timeline-nav::after {
            display: none;
        }

    .timeline-track {
        display: none;
    }

    .timeline-points {
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0;
        transform: none !important;
        align-items: center; /* Center dots in the 60px strip */
        position: relative;
    }

    /* On narrow screens keep the timeline column narrow and consistent */
    .timeline-points {
        width: 100%; /* requested fixed width */
        box-sizing: border-box;
        padding: 8px;
    }

        .timeline-points::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 21px; /* Center of dot */
            width: 4px;
            background: #E6E6E6;
        }

    .point {
        width: 100%;
        flex-direction: column; /* Stack dot and label? Or just dot? Labels might be too wide */
        align-items: center;
        margin: 0 0 100px 0;
        padding: 0;
        transform: none !important;
    }

    /* In mobile, maybe hide labels or make them small? 
       The user picture shows right sidebar. The text "2026", "2025" is visible alongside dots. */
    .point {
        flex-direction: row;
        padding-left: 8px;
        align-items: center;
    }

        .point .dot {
            margin: 0 5px 0 0;
            flex-shrink: 0;
        }

        .point .label {
            font-size: 16px; /* Smaller font */
            text-align: left;
            width: auto;
            /*white-space: nowrap;*/
            overflow: visible;
            text-overflow: clip;
            margin: 0 0 0 7px;
        }

    .timeline-arrow {
        display: none;
    }
    /* push undo button to bottom of the timeline column */
    .timeline-undo {
        margin-top: auto;
        margin-bottom: 12px;
        align-self: flex-start;
        position: relative;
        left: 23px;
        transform: translateX(-50%);
    }

    .our-stories.section-pad {
        height: 802px; /* set whole section height on narrow screens */
        box-sizing: border-box; /* ensure internal padding doesn't grow the height */
    }
}

/* Core Values Vertical Layout (360px - 1279px) */
@media (min-width: 360px) and (max-width: 1279px) {
    .container {
        padding: 0;
    }

    .values-wrapper {
        width: 100%;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .values-flex {
        flex-direction: column;
        padding: 0;
        gap: 16px;
        overflow-x: visible;
        justify-content: flex-start;
        margin-top: 24px;
    }

    .value-card.wide,
    .value-card.narrow {
        flex: none;
        width: 100%;
        max-width: none;
    }

    .value-card.wide {
        height: 390px;
    }

    .value-card.narrow {
        height: 150px;
    }

        /* Adjust content alignment for shorter cards */
        .value-card.narrow .card-content {
            justify-content: center;
            padding: 0 40px;
        }

        /* Vertically center text in wide cards when stacked */
        .value-card.wide .card-content {
            justify-content: center;
            padding: 0 40px;
        }

    /* Interactive mode on RWD: all cards start narrow, active expands */
    .values-flex--interactive .value-card.wide,
    .values-flex--interactive .value-card.narrow {
        flex: none;
        width: 100%;
        height: 150px;
        -webkit-transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .values-flex--interactive .value-card.is-active {
        height: 390px;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .values-flex--interactive .value-card .card-content {
        justify-content: center;
        padding: 0 24px;
    }

    .values-flex--interactive .value-card.is-active .card-content {
        justify-content: center;
        padding: 0 24px;
    }
}

@media (min-width: 451px) and (max-width: 500px) {
    .story-content-container {
        width: calc(100% - 25%);
    }

    .timeline-wrapper {
        width: 25%;
    }

    .timeline-undo {
        margin-right: 70px
    }
}
@media (min-width: 360px) and (max-width: 450px) {
    .story-content-container {
        width: calc(100% - 30%);
    }

    .timeline-wrapper {
        width: 30%;
    }

    .timeline-undo {
        margin-right: 70px
    }
}
@media (max-width: 1023px) {
    .our-stories .section-title {
        margin-bottom: 38px;
        margin-top: 0;
    }
    .timeline-undo {
        width: 30px !important;
        height: 30px !important;
        margin: 10px 0 0 0 !important;
        position: relative;
        left: 23px;
        transform: translateX(-50%);
    }
    .story-img-wrap img {
        height: 300px !important;
    }
}

@-webkit-keyframes valueH3Fade {
    0%   { opacity: 1; }
    10%  { opacity: 0; }
    70%  { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes valueH3Fade {
    0%   { opacity: 1; }
    10%  { opacity: 0; }
    70%  { opacity: 0; }
    100% { opacity: 1; }
}

/* Desktop-only: smooth opacity fade-in for value card p */
@media (min-width: 1280px) {
    .values-flex--interactive .value-card h3 {
        opacity: 1;
        -webkit-transition: font-size 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
        transition: font-size 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .values-flex--interactive .value-card.is-active h3 {
        -webkit-animation: valueH3Fade 0.65s ease forwards;
        animation: valueH3Fade 0.65s ease forwards;
    }
    .values-flex--interactive .value-card p {
        -webkit-transition: opacity 0.5s ease 0s, max-height 0s linear 0s;
        transition: opacity 0.5s ease 0s, max-height 0s linear 0s;
    }
    .values-flex--interactive .value-card.is-active p {
        -webkit-transition: opacity 0.45s ease 0.45s, max-height 0s linear 0.15s;
        transition: opacity 0.45s ease 0.45s, max-height 0s linear 0.15s;
    }
}

@media (max-width: 1023px) {
    .story-content-container .story-content-card {
        -webkit-transform: translateY(100%) !important;
        -moz-transform: translateY(100%) !important;
        -ms-transform: translateY(100%) !important;
        -o-transform: translateY(100%) !important;
        transform: translateY(100%) !important;
    }
    .story-content-container .story-content-card.enter-from-top {
        -webkit-transform: translateY(-100%) !important;
        -moz-transform: translateY(-100%) !important;
        -ms-transform: translateY(-100%) !important;
        -o-transform: translateY(-100%) !important;
        transform: translateY(-100%) !important;
    }
    .story-content-container .story-content-card.active {
        -webkit-transform: translateY(0) !important;
        -moz-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
        -o-transform: translateY(0) !important;
        transform: translateY(0) !important;
    }
    .story-content-container .story-content-card.leaving-up {
        -webkit-transform: translateY(-100%) !important;
        -moz-transform: translateY(-100%) !important;
        -ms-transform: translateY(-100%) !important;
        -o-transform: translateY(-100%) !important;
        transform: translateY(-100%) !important;
    }
    .story-content-container .story-content-card.leaving-down {
        -webkit-transform: translateY(100%) !important;
        -moz-transform: translateY(100%) !important;
        -ms-transform: translateY(100%) !important;
        -o-transform: translateY(100%) !important;
        transform: translateY(100%) !important;
    }
}

@media (max-width: 1023px) {
    .story-content-container {
        margin-top: 4rem;
    }
}