/* ===== داستان زی‌نو — About page v2 =======================================
   Layout & spacing → Bootstrap utilities in About.cshtml.
   This file: fluid type, decorative art, ribbons, hover states, swiper skin. */

.about-page {
    overflow-x: clip;
    color: var(--zino-text);
    padding-top: clamp(var(--space-4), 3vw, var(--space-6));
    padding-bottom: var(--space-6);
}

.about-page__inner {
    max-width: 1223.5px;
    margin-inline: auto;
}

/* highlighter ribbon — multi-line safe (box-decoration-break) */
.about-page .zino-highlight {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 1px 0.5rem;
    background: var(--zino-green-light);
    color: var(--zino-text);
    line-height: inherit;
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

/* ── Company-history timeline (Figma 110:24267) — SHIPPED; do not edit unless asked ── */
.about-timeline {
    margin-bottom: var(--zino-section-gap);
}

.about-timeline .container-fluid {
    padding-inline-start: clamp(2.5rem, 4vw, 3.5rem);
}

.about-timeline__wrap {
    position: relative;
    overflow: visible;
}

.about-timeline__hero {
    position: relative;
    max-width: 1197px;
    margin-inline: auto;
}

.about-timeline__hero-photo {
    display: block;
    width: 100%;
    height: auto;
}

.about-timeline__hero-photo--desktop {
    aspect-ratio: 1197 / 460;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.35s ease;
}

.about-timeline__hero-photo--desktop:hover {
    filter: grayscale(0);
}

.about-timeline__hero-photo--mobile {
    max-width: 22.3125rem; /* 357px native */
    margin-inline: auto;
    aspect-ratio: 357 / 254;
    object-fit: cover;
}

.about-timeline__band {
    position: relative;
    z-index: 2;
    margin-top: clamp(-1.5rem, -2.5vw, -0.5rem);
    min-height: clamp(4.5rem, 12vw, 8.75rem);
    padding-top: var(--space-4);
    padding-inline: clamp(1rem, 4vw, 4.5rem) clamp(4.25rem, 6vw, 6rem);
}

.about-timeline__tagline {
    color: var(--zino-text);
    font-size: clamp(0.875rem, 1.04vw + 0.636rem, 1.375rem);
    font-weight: 600;
    line-height: normal;
    padding-bottom: clamp(0.5rem, 1vw, 0.875rem);
    margin-inline-start: auto;
    margin-inline-end: clamp(4rem, 9vw, 8rem);
}

.about-timeline__track {
    margin-top: var(--space-2);
    min-height: 44rem;
    padding-top: clamp(4.75rem, 6vw, 5.75rem);
    overflow: visible;
}

.about-timeline__items {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 7vw, 6rem);
}

.about-timeline__item {
    position: relative;
}

.about-timeline__art {
    position: absolute;
    z-index: 1;
    top: clamp(-14.5rem, -16vw, -12.5rem);
    inset-inline: 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 760;
    overflow: visible;
    pointer-events: none;
    user-select: none;
}

.about-timeline__star {
    fill: var(--zino-green);
    opacity: 0.55;
}

.about-timeline__star--small {
    opacity: 0.38;
}

.about-timeline__rail {
    stroke: var(--zino-border-strong);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.about-timeline__item-photo {
    display: block;
    width: 100%;
    height: auto;
}

.about-timeline__item--left .about-timeline__item-copy {
    max-width: 28rem;
}

.about-timeline__item--right {
    margin-top: clamp(1rem, 2.5vw, 2rem);
}

.about-timeline__item-head {
    padding: 0;
    text-align: end;
}

@media (min-width: 1200px) {
    .about-timeline__item-col {
        position: relative;
        top: clamp(-2rem, -3vw, -1.25rem);
    }

    .about-timeline__item--left .about-timeline__item-col {
        margin-inline-end: var(--space-3) !important;
    }

    .about-timeline__item--right .about-timeline__item-col {
        margin-left: auto !important;
        margin-right: clamp(2rem, 4vw, 3rem) !important;
        transform: translate(-180px, -120px);
    }

    .about-timeline__item--right .about-timeline__item-copy {
        display: flex;
        flex-direction: column;
        margin-left: auto;
        max-width: 31rem;
    }

    .about-timeline__item--left .about-timeline__item-copy {
        transform: none;
    }

    .about-timeline__item--left .about-timeline__item-head {
        transform: translateX(clamp(-2.25rem, -4vw, -1.75rem));
    }

    .about-timeline__item--left .about-timeline__item-body {
        transform: translateX(clamp(-5rem, -8vw, -4.25rem));
    }

    .about-timeline__item--right .about-timeline__item-head {
        position: relative;
        align-self: flex-start;
        text-align: start;
        transform: translateX(clamp(-1.5rem, -2.5vw, -1rem));
    }

    .about-timeline__item--right .about-timeline__item-body {
        align-self: flex-start;
        width: 100%;
        transform: translateX(clamp(1rem, 2vw, 1.5rem));
    }
}

.about-timeline__item-years {
    color: var(--zino-text-muted);
    font-size: clamp(1rem, 0.95vw + 0.78rem, 1.5rem);
    font-weight: 600;
    line-height: normal;
}

.about-timeline__item-label {
    color: var(--zino-text);
    font-size: clamp(0.75rem, 0.2vw + 0.703rem, 0.875rem);
    font-weight: 600;
    line-height: normal;
}

.about-timeline__item-title {
    color: var(--zino-text);
    font-size: clamp(0.75rem, 0.2vw + 0.703rem, 0.875rem);
    font-weight: 600;
    line-height: normal;
}

.about-timeline__item-years-badge {
    display: inline-block;
    margin-top: var(--space-1);
    padding: 2px 10px;
    background: var(--zino-green-light);
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 600;
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

.about-timeline__item-body {
    font-size: clamp(0.5625rem, 0.47vw + 0.45rem, 0.8125rem);
    font-weight: 400;
    line-height: 2;
}

.about-timeline__item-body p {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.about-timeline__item--left .about-timeline__item-body,
.about-timeline__item--left .about-timeline__item-body p {
    text-align: end !important;
}

.about-timeline__item--right .about-timeline__item-body,
.about-timeline__item--right .about-timeline__item-body p {
    text-align: start !important;
    line-height: 1.75;
}

.about-timeline__item--right .about-timeline__item-body {
    margin-top: var(--space-2) !important;
}

.about-timeline__item--right .about-timeline__item-body p.about-timeline__item-lead + p {
    margin-top: var(--space-3);
}

.about-timeline__item--right .about-timeline__item-body p.about-timeline__item-lead {
    max-width: 29rem;
}

.about-timeline__item-body p.about-timeline__item-lead {
    font-size: clamp(0.8125rem, 0.7vw + 0.6rem, 1.0625rem);
    font-weight: 700;
    line-height: 1.75;
    margin-bottom: 0;
}

.about-timeline__item-body p.about-timeline__item-lead + p {
    margin-top: var(--space-4);
}

/* Figma 110:24474 — decorative bridge beside timeline item 2 */
.about-timeline__bridge {
    display: none;
    pointer-events: none;
    user-select: none;
}

@media (min-width: 1200px) {
    .about-timeline {
        overflow: visible;
    }

    .about-timeline__bridge {
        display: block;
        position: absolute;
        z-index: 1;
        top: clamp(21rem, 38vw, 29.5rem);
        left: calc(clamp(4.5rem, 10vw, 8rem) - 15px);
        width: min(30.75rem, 45vw);
        max-width: 492px;
        height: auto;
        margin: 0;
        overflow: visible;
    }

    .about-timeline__bridge-art {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 492 / 429;
        overflow: visible;
    }

    .about-timeline__bridge-label {
        position: absolute;
        top: calc(498 / 429 * 100%);
        left: calc(163.734 / 492 * 100% + var(--space-3));
        transform: translateY(-100%);
        z-index: 2;
        display: block;
        width: clamp(4.5rem, 8vw, 5rem);
        max-width: 80px;
        height: auto;
        pointer-events: none;
    }

    .about-timeline__track {
        --bridge-top: clamp(21rem, 38vw, 29.5rem);
        --bridge-width: min(30.75rem, 45vw, 30.75rem);
        --bridge-left: calc(clamp(4.5rem, 10vw, 8rem) - 15px);
        --intro-video-top: calc(var(--bridge-top) + var(--bridge-width) * 498 / 492 + var(--space-3));
        --intro-video-left: calc(var(--bridge-left) + var(--bridge-width) * 163.734 / 492 - clamp(7.5rem, 18vw, 11rem));
        --intro-video-width: min(56.5rem, 58vw, 56.5rem);
        --chapter-bridge-top: calc(var(--intro-video-top) + var(--intro-video-width) * 54.58 / 904);
        --chapter-bridge-left: calc(var(--intro-video-left) + var(--intro-video-width) * 482.38 / 904);
        --chapter-bridge-width: calc(var(--intro-video-width) * 519 / 904);
        --chapter-head-left: calc(var(--chapter-bridge-left) - var(--chapter-bridge-width) * 220 / 519);
        --chapter-head-top: calc(
            var(--chapter-bridge-top)
            + var(--chapter-bridge-width) * 670.46 / 519
        );
        --penex-video-top: calc(var(--chapter-head-top) + var(--chapter-bridge-width) * 798 / 519);
        --penex-video-left: calc(var(--chapter-head-left) - var(--chapter-bridge-width) * 262 / 519);
        --penex-video-width: var(--intro-video-width);
        --penex-eco-bridge-top: calc(var(--penex-video-top) + var(--penex-video-width) * 588.03 / 904);
        --penex-eco-bridge-left: calc(var(--penex-video-left) - var(--penex-video-width) * 18.76 / 904);
        --penex-eco-bridge-width: calc(var(--penex-video-width) * 711.06 / 904);
        --penex-eco-bridge-height: calc(var(--penex-eco-bridge-width) * 263.45 / 711.06);
        --eco-masthead-top: calc(var(--penex-eco-bridge-top) + var(--penex-eco-bridge-height) * 0.52 - var(--space-6) - 5px);
        --eco-masthead-left: calc(var(--penex-eco-bridge-left) + var(--penex-eco-bridge-width) * 0.17 + 100px);
        min-height: max(
            calc(var(--chapter-head-top) + var(--chapter-bridge-width) * 1050 / 519),
            calc(var(--penex-video-top) + var(--penex-video-width) * 851 / 904),
            calc(var(--eco-masthead-top) + 10rem)
        );
        padding-bottom: var(--space-8);
    }

    /* Figma 110:24495 / 110:24579 / 110:24581 — 3 layers on track (no wrapper) */
    .about-digital-penex-bridge__markers,
    .about-digital-penex-bridge__swoosh-small,
    .about-digital-penex-bridge__swoosh {
        display: block;
        position: absolute;
        height: auto;
        overflow: visible;
        object-fit: contain;
        pointer-events: none;
        user-select: none;
        mix-blend-mode: multiply;
    }

    .about-digital-penex-bridge__swoosh {
        top: calc(var(--chapter-head-top) + var(--chapter-bridge-width) * 499 / 519);
        left: calc(var(--chapter-head-left) + var(--chapter-bridge-width) * 286 / 519);
        width: calc(var(--chapter-bridge-width) * 526 / 519);
        max-width: 526px;
        aspect-ratio: 526 / 203;
        z-index: 1;
    }

    .about-digital-penex-bridge__swoosh-small {
        top: calc(var(--chapter-head-top) + var(--chapter-bridge-width) * 410 / 519);
        left: calc(var(--chapter-head-left) + var(--chapter-bridge-width) * 429 / 519);
        width: calc(var(--chapter-bridge-width) * 296 / 519);
        max-width: 296px;
        aspect-ratio: 296 / 106;
        z-index: 1;
    }

    .about-digital-penex-bridge__markers {
        top: calc(var(--chapter-head-top) + var(--chapter-bridge-width) * 379 / 519);
        left: calc(var(--chapter-head-left) + var(--chapter-bridge-width) * 522 / 519);
        width: calc(var(--chapter-bridge-width) * 190 / 519);
        max-width: 190px;
        aspect-ratio: 190 / 313;
        z-index: 4;
    }

    .about-video--intro {
        position: absolute;
        z-index: 2;
        top: var(--intro-video-top);
        left: var(--intro-video-left);
        width: var(--intro-video-width);
        max-width: 904px;
        margin: 0;
        background: none;
        overflow: visible;
    }

    .about-video--intro .about-video__shell {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 904 / 440;
        background-color: var(--zino-surface-2);
        overflow: hidden;
    }

    .about-video--intro .about-video__player {
        display: block;
        width: 100%;
        height: 100%;
        margin-inline: 0;
        object-fit: cover;
        background-color: var(--zino-surface-2);
    }

    /* Figma 110:24446 / 110:24494 — IRAN PENEX 7 video */
    .about-video--penex {
        position: absolute;
        z-index: 3;
        top: var(--penex-video-top);
        left: var(--penex-video-left);
        width: var(--penex-video-width);
        max-width: 904px;
        margin: 0;
        background: none;
        overflow: visible;
        isolation: isolate;
    }

    .about-video--penex .about-video__title--penex {
        position: absolute;
        bottom: calc(100% + var(--space-2));
        left: calc(var(--intro-video-width) * 586 / 904);
        width: calc(var(--intro-video-width) * 302 / 904);
        max-width: 302px;
        margin: 0;
        text-align: start;
        line-height: 1.5;
    }

    .about-video--penex .about-video__shell {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 904 / 440;
        background-color: var(--zino-surface-2);
        overflow: hidden;
        transform: translateZ(0);
    }

    .about-video--penex .about-video__player {
        display: block;
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: var(--zino-surface-2);
        transform: translate3d(0, 0, 1px);
    }

    /* Figma 110:24322 / 110:24631 — swooshes above + below IRAN PENEX 7 video */
    .about-penex-video-bridge__swoosh-above,
    .about-penex-video-bridge__swoosh-below {
        display: block;
        position: absolute;
        height: auto;
        overflow: visible;
        object-fit: contain;
        pointer-events: none;
        user-select: none;
        z-index: 0;
    }

    .about-penex-video-bridge__swoosh-above {
        top: calc(var(--penex-video-top) - var(--penex-video-width) * 90.01 / 904);
        left: calc(var(--penex-video-left) + var(--penex-video-width) * 65.61 / 904);
        width: calc(var(--penex-video-width) * 545.13 / 904);
        max-width: 545px;
        aspect-ratio: 545.13 / 218.36;
    }

    .about-penex-video-bridge__swoosh-below {
        top: calc(var(--penex-video-top) + var(--penex-video-width) * 318.59 / 904);
        left: calc(var(--penex-video-left) + var(--penex-video-width) * 215.78 / 904);
        width: calc(var(--penex-video-width) * 819.88 / 904);
        max-width: 820px;
        aspect-ratio: 819.88 / 323.22;
    }

    /* Figma 110:24647 — swoosh from IRAN PENEX 7 to اکوسیستم زی‌نو */
    .about-penex-eco-bridge__art {
        display: block;
        position: absolute;
        height: auto;
        overflow: visible;
        pointer-events: none;
        user-select: none;
        z-index: 1;
        top: var(--penex-eco-bridge-top);
        left: var(--penex-eco-bridge-left);
        width: var(--penex-eco-bridge-width);
        max-width: 711px;
        aspect-ratio: 711.06 / 263.45;
    }

    /* Figma — eco chapter head at swoosh tip (left spine) */
    .about-eco__masthead {
        position: absolute;
        z-index: 0;
        top: var(--eco-masthead-top);
        left: var(--eco-masthead-left);
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: var(--space-3);
        direction: ltr;
        max-width: min(100%, 30rem);
        margin: 0;
        transform: translateY(-48%);
    }

    .about-eco__masthead .about-section-marker {
        position: relative;
        inset: auto;
        top: auto;
        flex-shrink: 0;
        width: clamp(2.25rem, 3.5vw, 3rem);
        align-self: flex-start;
        transform: translateY(46px);
    }

    .about-eco__masthead .about-section-marker__rail {
        flex: 0 0 auto;
        min-height: calc(clamp(4rem, 6.15vw, 5.625rem) + 1.875rem);
    }

    .about-eco__copy {
        direction: rtl;
        flex: 1 1 auto;
        text-align: left;
        padding-top: calc(var(--space-6) + 5px);
        margin-left: -20px;
    }

    .about-eco__head,
    .about-eco__head .about-timeline__item-years,
    .about-eco__head .about-timeline__item-label {
        text-align: left;
    }

    .about-eco__head {
        padding-top: 0;
    }

    .about-eco__title {
        text-align: left;
    }

    /* Figma 110:24328 — swoosh from intro video to digital chapter */
    .about-video-chapter-bridge {
        display: block;
        position: absolute;
        z-index: 1;
        top: calc(var(--intro-video-top) + var(--intro-video-width) * 54.58 / 904);
        left: calc(var(--intro-video-left) + var(--intro-video-width) * 482.38 / 904);
        width: calc(var(--intro-video-width) * 519 / 904);
        max-width: 519px;
        overflow: visible;
        pointer-events: none;
        user-select: none;
    }

    .about-video-chapter-bridge__art {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 519 / 698;
        overflow: visible;
    }

    .about-timeline__track .about-chapter--digital {
        position: absolute;
        z-index: 2;
        top: calc(var(--chapter-head-top) - var(--space-6) + 5px);
        left: calc(var(--chapter-head-left) - var(--space-10) - 30px);
        width: max-content;
        max-width: calc(100% - var(--space-4));
        margin-top: 0;
        margin-bottom: 0;
    }

    .about-timeline__track .about-chapter--digital .about-chapter__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: none;
        margin-inline: 0;
    }

    .about-chapter__head--digital {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-bottom: 0;
        line-height: 1;
    }

    .about-chapter__head--digital .about-chapter__years-lg {
        font-weight: 700;
        margin-bottom: 0.25rem !important;
        line-height: 1.1;
    }

    .about-chapter__head--digital .about-chapter__title {
        margin-top: 0;
        line-height: 1.2;
    }

    .about-chapter--digital .about-chapter__subhead {
        margin-top: 0;
        margin-bottom: 0;
        color: var(--zino-green-chapter);
        font-size: clamp(0.875rem, 0.35vw + 0.8rem, 1.25rem);
        font-weight: 700;
        line-height: normal;
    }

    .about-timeline__track .about-chapter--digital .about-chapter__subhead:first-of-type {
        margin-top: 0;
        line-height: 1.1;
    }

    .about-timeline__track .about-chapter--digital .about-chapter__head--digital,
    .about-timeline__track .about-chapter--digital .about-chapter__subhead {
        position: relative;
        transform: translateX(-15.625rem); /* ~250px left */
    }

    .about-timeline__track .about-chapter--digital .about-chapter__subhead:not(:first-of-type) {
        margin-top: var(--space-4);
        margin-bottom: var(--space-3);
    }

    .about-timeline__track .about-chapter--digital .about-chapter__panel {
        position: relative;
        width: calc(var(--chapter-bridge-width) * 528 / 519);
        margin-inline-start: calc(-1 * var(--chapter-bridge-width) * 247 / 519);
        margin-top: calc(var(--space-4) + 5px); /* 21px below subhead */
        margin-bottom: var(--space-4);
        transform: translateX(-25.125rem); /* ~402px left */
    }

    .about-timeline__track .about-chapter--digital .about-chapter__panel-inner {
        padding-top: 2rem; /* ~32px — raised within green panel */
        padding-bottom: calc(var(--chapter-bridge-width) * 16 / 519);
        padding-inline-start: calc(var(--chapter-bridge-width) * 68 / 519);
        padding-inline-end: calc(var(--chapter-bridge-width) * 22 / 519);
    }

    .about-timeline__track .about-chapter--digital .about-chapter__body {
        position: relative;
        max-width: calc(var(--chapter-bridge-width) * 520 / 519 + 10px);
        transform: translateX(calc(-10.5rem + 10px));
    }
}

.about-chapter__head--flow .about-chapter__years-lg {
    font-weight: 700;
}

.about-chapter__head--flow .about-chapter__title {
    display: inline-block;
    margin-top: var(--space-1);
    padding: 2px 10px;
    background: var(--zino-green-light);
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

.about-chapter {
    position: relative;
    margin-bottom: var(--zino-section-gap);
}

.about-chapter__head {
    margin-bottom: var(--space-2);
}

.about-timeline__track .about-chapter--digital .about-chapter__head--digital {
    margin-bottom: 0 !important;
}

.about-chapter__years-lg {
    color: var(--zino-text-muted);
    font-size: clamp(1rem, 0.95vw + 0.78rem, 1.5rem); /* 16 → 24px */
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0.625rem !important;
}

.about-chapter__title {
    color: var(--zino-text);
    display: inline-block;
    margin-top: 0.25rem;
    padding: 2px 10px;
    background: var(--zino-green-light);
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
    font-size: clamp(0.75rem, 0.2vw + 0.703rem, 0.875rem); /* 12 → 14px */
    font-weight: 600;
    line-height: normal;
}

.about-chapter__years {
    display: inline-block;
    margin-top: var(--space-1);
    padding: 2px 10px;
    background: var(--zino-green-light);
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.47vw + 0.4525rem, 0.875rem);
    font-weight: 600;
    clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

.about-chapter__content {
    position: relative;
    z-index: 1;
    max-width: 1197px;
    margin-inline: auto;
}

.about-chapter__body {
    font-size: clamp(0.625rem, 0.52vw + 0.5rem, 0.875rem); /* 10 → 14px */
    font-weight: 400;
    line-height: 2;
    text-align: justify;
    max-width: 28.16rem;
}

.about-chapter__marker img {
    display: block;
    width: clamp(76px, 13vw, 188.87px);
    height: auto;
}

.about-chapter__subhead {
    color: var(--zino-text);
    font-size: clamp(0.6875rem, 0.55vw + 0.56rem, 1rem); /* 11 → 16px */
    font-weight: 600;
    margin-bottom: var(--space-3);
}

/* Figma 110:24324 — green stepped panel */
.about-chapter__panel {
    position: relative;
    isolation: isolate;
    margin-bottom: var(--space-4);
}

.about-chapter__panel-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 0;
    pointer-events: none;
}

.about-chapter__panel-bg-cap {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 528 / 162;
    flex-shrink: 0;
}

.about-chapter__panel-bg-fill {
    flex: 1 1 auto;
    margin-top: -1px;
    background: var(--zino-green);
}

.about-chapter__panel-inner {
    padding-top: 2rem;
    padding-bottom: var(--space-3);
    padding-inline-start: var(--space-6);
    padding-inline-end: var(--space-3);
}

.about-chapter__panel-body,
.about-chapter__panel-item {
    position: relative;
    color: #fff;
    text-align: right;
    font-size: 0.875rem; /* 14px — slightly above Figma 13px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.about-chapter__panel-item + .about-chapter__panel-item {
    margin-top: var(--space-2);
}

.about-chapter__panel-body + .about-chapter__panel-item {
    margin-top: var(--space-5);
}

/* ── Video blocks ───────────────────────────────────────────────────── */
.about-video {
    background: var(--zino-surface-2);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: var(--zino-section-gap);
}

.about-video--intro {
    background: none;
    overflow: visible;
    margin-bottom: 0;
    padding-inline: var(--space-3);
    margin-top: var(--space-6);
}

.about-video--penex {
    background: none;
    overflow: visible;
    margin-bottom: 0;
    padding-inline: var(--space-3);
    margin-top: var(--space-6);
}

.about-video--intro .about-video__shell {
    width: 100%;
    max-width: 904px;
    margin-inline: auto;
    aspect-ratio: 904 / 440;
    background-color: var(--zino-surface-2);
    overflow: hidden;
}

.about-video--penex .about-video__shell {
    position: relative;
    z-index: 2;
    isolation: isolate;
    transform: translateZ(0);
    width: 100%;
    max-width: 904px;
    margin-inline: auto;
    aspect-ratio: 904 / 440;
    background-color: var(--zino-surface-2);
    overflow: hidden;
}

.about-video--intro .about-video__player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--zino-surface-2);
}

.about-video--penex .about-video__player {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--zino-surface-2);
    transform: translate3d(0, 0, 1px);
}

.about-video--penex .about-video__title--penex {
    margin-bottom: var(--space-4);
    text-align: center;
}

.about-video__frame {
    position: relative;
    width: 100%;
    max-width: 904px;
    margin-inline: auto;
    aspect-ratio: 904 / 440;
    background: var(--zino-surface-2);
}

.about-video__frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-video__title {
    margin-bottom: var(--space-4);
    color: var(--zino-text);
    font-size: clamp(0.6875rem, 0.55vw + 0.56rem, 1rem);
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}

.about-video__shell {
    width: 100%;
    max-width: 56.5rem;
    margin-inline: auto;
    aspect-ratio: 904 / 440;
    background-color: var(--zino-surface-2);
    overflow: hidden;
}

.about-video__player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--zino-surface-2);
}

/* ── Post-timeline flow sections ─────────────────────────────────────── */
.about-page__flow {
    position: relative;
    padding-top: var(--space-6);
}

.about-flow-section {
    position: relative;
    margin-bottom: var(--zino-section-gap);
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.about-flow-section__head {
    padding-inline-end: clamp(3.5rem, 8vw, 5.5rem);
}

.about-flow-section__body {
    padding-inline-end: clamp(3.5rem, 8vw, 5.5rem);
}

.about-section-marker {
    position: absolute;
    top: 0;
    inset-inline-end: clamp(0.5rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(2.75rem, 4vw, 3.5rem);
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.about-section-marker__star {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 52.87 / 51.88;
}

.about-section-marker__rail {
    display: block;
    width: 2px;
    min-height: clamp(4rem, 8vw, 6rem);
    margin-top: var(--space-2);
    background: var(--zino-border-strong);
    opacity: 0.55;
}

.about-section-marker--eco {
    top: var(--space-2);
}

.about-section-marker--rebrand {
    top: calc(-1 * var(--space-8));
}

.about-section-marker--penex-8 {
    top: var(--space-3);
    inset-inline-end: clamp(1rem, 3vw, 2rem);
}

.about-section-marker--vision,
.about-section-marker--brands,
.about-section-marker--customers,
.about-section-marker--zinocamp,
.about-section-marker--iranpenex404 {
    top: var(--space-3);
}

/* Figma 110:24714+ — 11 green dash / ribbon accents from IRAN PENEX 8 onward */
.about-flow-deco {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.about-flow-deco__art {
    display: block;
    width: 100%;
    height: auto;
}

.about-flow-deco--dash {
    width: clamp(2rem, 2.5vw, 2.5rem);
}

.about-flow-deco--dash-tall {
    width: clamp(1.5rem, 2vw, 1.75rem);
}

.about-flow-deco--ribbon {
    width: clamp(2.25rem, 3.5vw, 3rem);
}

.about-flow-deco--ribbon-sm {
    width: clamp(1.5rem, 2.5vw, 2rem);
}

.about-flow-deco--ribbon-wide {
    width: clamp(3.5rem, 6vw, 5.5rem);
}

.about-flow-deco--ribbon-lg {
    width: clamp(3rem, 5vw, 4.75rem);
}

.about-flow-deco--penex-8-ribbon {
    top: 0;
    inset-inline-end: clamp(2rem, 16vw, 12.5rem);
}

.about-flow-deco--team-dash-start {
    top: 38%;
    inset-inline-start: 0;
}

.about-flow-deco--team-ribbon-end {
    top: 52%;
    inset-inline-end: clamp(0.5rem, 3vw, 2rem);
}

.about-flow-deco--team-dash-end {
    bottom: var(--space-2);
    inset-inline-end: clamp(-0.5rem, 1vw, 1rem);
}

.about-flow-swoosh-wrap {
    position: relative;
}

.about-flow-deco--swoosh-dash-start {
    top: 18%;
    inset-inline-start: clamp(0.5rem, 5vw, 3.5rem);
}

.about-flow-deco--penex-9-ribbon {
    top: 0;
    inset-inline-end: clamp(2rem, 14vw, 11rem);
}

.about-flow-deco--brands-ribbon-lg {
    top: 0;
    inset-inline-end: clamp(1rem, 10vw, 7rem);
}

.about-flow-deco--brands-dash-end {
    top: 18%;
    inset-inline-end: clamp(-0.5rem, 1vw, 1rem);
}

.about-flow-deco--gallery-dash-end {
    top: 28%;
    inset-inline-end: clamp(-0.5rem, 1vw, 1rem);
}

.about-flow-deco--gallery-dash-start {
    bottom: var(--space-6);
    inset-inline-start: clamp(0.5rem, 6vw, 4rem);
}

.about-flow-swoosh {
    display: block;
    width: min(100%, 55rem);
    max-width: 882px;
    height: auto;
    margin-inline: auto;
    margin-block: var(--space-6);
    aspect-ratio: 882.32 / 249.93;
    pointer-events: none;
    user-select: none;
}

.about-flow-swoosh--eco-rebrand {
    margin-top: calc(var(--space-4) - 200px);
    margin-bottom: var(--space-8);
    transform: translateX(50px);
}

/* Figma — eco grid swoosh + rebrand chapter marker at curve tip */
.about-rebrand-group {
    transform: translate(3.125rem, -9.375rem);
    margin-bottom: 0;
}

.about-rebrand-block {
    position: relative;
}

.about-eco-rebrand-bridge,
.about-rebrand-block__stage {
    position: relative;
    width: min(100%, 55rem);
    max-width: 882px;
    margin-inline: auto;
    margin-top: calc(var(--space-4) - 200px);
    margin-bottom: var(--space-4);
    transform: translateX(50px);
}

.about-eco-rebrand-bridge .about-flow-swoosh--eco-rebrand,
.about-rebrand-block__stage .about-flow-swoosh--eco-rebrand {
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
}

.about-rebrand__masthead {
    position: absolute;
    top: 100%;
    left: calc(100% * 789.56 / 882.32);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-3);
    direction: ltr;
    max-width: min(100%, 26rem);
    transform: translate(calc(-100% + 25px), calc(-52% + 45px));
    z-index: 2;
}

.about-rebrand__masthead .about-section-marker--rebrand {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    transform: translateY(10px);
    flex-shrink: 0;
    width: clamp(2.25rem, 3.5vw, 3rem);
    align-self: flex-start;
}

.about-rebrand__masthead .about-section-marker__rail {
    flex: 0 0 auto;
    min-height: clamp(4.5rem, 7.5vw, 6.75rem);
}

.about-rebrand__copy {
    direction: rtl;
    flex: 0 1 auto;
    min-width: max-content;
    text-align: right;
    padding-top: calc(var(--space-6) + 5px);
    transform: translate(25px, 5px);
}

.about-rebrand__head,
.about-rebrand__head .about-timeline__item-years,
.about-rebrand__head .about-timeline__item-label,
.about-rebrand__title {
    text-align: right;
}

.about-rebrand__head .about-timeline__item-years {
    margin-top: 25px;
}

.about-rebrand__head .about-timeline__item-label,
.about-rebrand__title {
    white-space: nowrap;
}

.about-rebrand__title {
    margin-top: var(--space-2);
    color: var(--zino-text-sub);
    font-family: 'yekan-bold', var(--main-font), sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.about-rebrand__title {
    text-align: right;
}

.about-eco__title {
    margin-top: var(--space-2);
    color: var(--zino-text-sub);
    font-family: 'yekan-bold', var(--main-font), sans-serif;
    font-size: clamp(0.9375rem, 0.55vw + 0.82rem, 1.1875rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.about-flow-swoosh--team-vision {
    margin-top: var(--space-5);
    margin-bottom: var(--space-6);
}

.about-rebrand-end-cap {
    position: relative;
    isolation: isolate;
    width: min(100%, calc(26.5rem + 25px));
    max-width: 449px;
    margin-top: 2px;
    margin-inline-start: auto;
    overflow: hidden;
    transform: translate(17.8125rem, -1.875rem);
    margin-bottom: -1.875rem;
}

/* Solid fill + clip-path step (398/424 → notch); no layered SVG/fill seam */
.about-rebrand-end-cap__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--zino-green-light);
    opacity: 0.7;
    clip-path: polygon(
        0 0,
        calc(100% * 398.24 / 424) 0,
        calc(100% * 398.24 / 424) 3.4375rem,
        100% 3.4375rem,
        100% 100%,
        0 100%
    );
}

.about-rebrand-end-cap__inner {
    box-sizing: border-box;
    width: 100%;
    padding-top: calc(1.75rem - 10px);
    padding-bottom: var(--space-3);
    padding-inline-start: var(--space-8);
    padding-inline-end: var(--space-4);
}

.about-rebrand-end-cap__body {
    color: var(--zino-text);
    font-size: clamp(0.625rem, 0.52vw + 0.5rem, 0.875rem);
    font-weight: 400;
    line-height: 2;
    text-align: right;
    margin: 0;
}

.about-chapter--rebrand {
    padding-top: clamp(5rem, 10vw, 8rem);
    transform: translateX(-200px);
}

.about-chapter--rebrand .about-flow-section__body,
.about-chapter--rebrand .about-rebrand__body {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline-end: 0;
}

.about-rebrand__body--right {
    max-width: 28.16rem;
    margin-left: auto;
    margin-right: 30px;
    text-align: right;
}

.about-rebrand__body--left {
    max-width: 28.16rem;
    margin-right: auto;
    margin-left: 0;
    text-align: right;
    transform: translate(17.8125rem, -1.875rem);
}

.about-video--flow {
    background: none;
    overflow: visible;
    margin-bottom: var(--zino-section-gap);
}

.about-video--flow .about-video__shell {
    max-width: 56.5rem;
}

.about-video--flow .about-video__player {
    margin-inline: 0;
}

.about-video__title--flow {
    max-width: 18.875rem;
    margin-inline-start: auto;
    font-size: clamp(0.75rem, 0.35vw + 0.68rem, 1rem);
    font-weight: 600;
    line-height: 1.5;
    text-align: start;
}

.about-team .about-flow-section__head {
    margin-bottom: var(--space-5);
}

.about-team__inner {
    width: 100%;
    max-width: 56.5rem;
    margin-inline: auto;
}

.about-team__masthead {
    direction: rtl;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: -0.9375rem;
}

.about-team__masthead .about-section-marker--team {
    position: relative;
    inset: auto;
    top: auto;
    flex-shrink: 0;
    width: clamp(2.25rem, 3.5vw, 3rem);
    align-self: stretch;
}

.about-team__masthead .about-section-marker__rail {
    flex: 1 1 auto;
    min-height: clamp(3rem, 5vw, 4.5rem);
}

.about-team__copy {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: calc(var(--space-5) + 2.8125rem);
    text-align: right;
}

.about-team__copy .about-chapter__title {
    text-align: right;
}

.about-team__subtitle {
    color: var(--zino-text-sub);
    font-size: clamp(0.625rem, 0.52vw + 0.5rem, 0.9375rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
}

.about-vision .about-chapter__subhead {
    color: var(--zino-green-chapter);
    font-weight: 700;
}

.about-vision__inner {
    width: 100%;
    max-width: 56.5rem;
    margin-inline: auto;
}

.about-vision__panel {
    direction: rtl;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: -0.9375rem;
    transform: translate(-130px, -100px);
}

.about-vision__panel .about-section-marker--vision {
    position: relative;
    inset: auto;
    top: auto;
    flex-shrink: 0;
    width: clamp(2.25rem, 3.5vw, 3rem);
    align-self: stretch;
}

.about-vision__panel .about-section-marker__rail {
    flex: 1 1 auto;
    min-height: clamp(6rem, 12vw, 9rem);
}

.about-vision__content {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 27.75rem;
    padding-top: var(--space-2);
    text-align: right;
}

.about-vision__title {
    color: var(--zino-text-muted);
    font-size: clamp(1rem, 0.95vw + 0.78rem, 1.5rem);
    font-weight: 600;
    line-height: normal;
    text-align: right;
}

.about-vision__content .about-chapter__title {
    margin-top: var(--space-1);
    text-align: right;
    white-space: nowrap;
}

.about-vision__content .about-chapter__subhead {
    margin-top: var(--space-4);
}

.about-vision__list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--zino-text);
    font-size: clamp(0.625rem, 0.52vw + 0.5rem, 0.9375rem);
    font-weight: 400;
    line-height: 2;
    text-align: justify;
}

.about-vision__list li {
    position: relative;
    padding-inline-start: var(--space-4);
}

.about-vision__list li + li {
    margin-top: var(--space-2);
}

.about-vision__list li::before {
    content: "–";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: var(--zino-text-sub);
    font-weight: 600;
}

.about-video.about-video--flow.about-video--penex-9 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-video__head--penex-9 {
    direction: rtl;
    width: 100%;
    max-width: 56.5rem;
    margin: 0 0 var(--space-4);
}

.about-video__title--penex-9 {
    text-align: right;
    font-size: clamp(0.75rem, 0.35vw + 0.68rem, 1rem);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.about-brands__masthead,
.about-gallery__masthead {
    direction: rtl;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: -0.9375rem;
}

.about-brands__masthead .about-section-marker,
.about-gallery__masthead .about-section-marker {
    position: relative;
    inset: auto;
    top: auto;
    flex-shrink: 0;
    width: clamp(2.25rem, 3.5vw, 3rem);
    align-self: stretch;
}

.about-brands__masthead .about-section-marker__rail,
.about-gallery__masthead .about-section-marker__rail {
    flex: 1 1 auto;
    min-height: clamp(3rem, 5vw, 4.5rem);
}

.about-brands__copy,
.about-gallery__copy {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: calc(var(--space-5) + 2.8125rem);
    text-align: right;
}

.about-brands__copy .about-chapter__title,
.about-gallery__copy .about-chapter__title {
    text-align: right;
}

.about-brands__subtitle,
.about-gallery__subtitle {
    color: var(--zino-text-sub);
    font-size: clamp(0.625rem, 0.52vw + 0.5rem, 0.9375rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
}

.about-brands .partners-grid {
    padding-inline-start: clamp(2rem, 5vw, 3.5rem);
}

.about-gallery__video {
    max-width: 56.5rem;
    margin-inline: auto;
    margin-bottom: var(--space-4);
}

@media (min-width: 1200px) {
    .about-eco-block {
        transform: none;
        margin-bottom: 0;
    }

    .about-eco-block__stage {
        display: block;
        position: static;
    }

    .about-eco-block .about-eco__masthead {
        position: absolute;
        z-index: 0;
        top: var(--eco-masthead-top);
        left: var(--eco-masthead-left);
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: var(--space-3);
        direction: ltr;
        max-width: min(100%, 30rem);
        margin: 0;
        transform: translateY(-48%);
    }

    .about-eco-block .about-eco__masthead .about-section-marker {
        display: flex;
        position: relative;
        inset: auto;
        top: auto;
        flex-shrink: 0;
        width: clamp(2.25rem, 3.5vw, 3rem);
        align-self: flex-start;
        transform: translateY(46px);
        float: none;
        margin: 0;
    }

    .about-eco-block .about-eco__masthead .about-section-marker__rail {
        flex: 1 1 auto;
        min-height: 14rem;
    }

    .about-eco-block .about-eco__copy {
        direction: rtl;
        flex: 1 1 auto;
        text-align: left;
        padding-top: calc(var(--space-6) + 5px);
        margin-left: -20px;
        transform: none;
    }

    .about-eco-block .about-eco__head {
        position: static;
        max-width: none;
        padding-top: 0;
        text-align: left;
    }

    .about-eco-block .about-eco__head::before {
        content: none;
    }

    .about-eco-block .about-eco__head .about-timeline__item-years,
    .about-eco-block .about-eco__head .about-timeline__item-label {
        margin-inline: 0;
        text-align: left;
    }

    .about-eco-block .about-eco__head .about-timeline__item-years {
        margin-top: 130px;
    }

    .about-eco-block .about-eco__title {
        text-align: left;
    }

    .about-eco-block > .about-eco__story {
        position: absolute;
        top: calc(var(--eco-masthead-top) + 8rem);
        left: calc(
            var(--eco-masthead-left)
            + clamp(2.25rem, 3.5vw, 3rem)
            + var(--space-3)
            - 20px
        );
        max-width: 28.16rem;
        margin: 0;
        transform: none;
        text-align: left;
        z-index: 2;
    }

    .about-eco-block .about-eco__body--left {
        max-width: none;
        margin-right: 0;
        margin-left: 0;
        text-align: left;
        transform: none;
    }

    .about-eco.about-flow-section--eco {
        max-width: calc(56.5rem + 6.25rem);
        margin-top: 1.5rem;
        margin-bottom: 3.75rem;
        padding-top: 0;
        position: static;
        z-index: auto;
    }

    .about-eco.about-flow-section--eco .about-eco__grid {
        padding-block: var(--space-6);
    }

    .about-rebrand-group {
        transform: translate(3.125rem, 0);
    }

    .about-rebrand-block__stage {
        display: block;
        position: relative;
        width: min(100%, 55rem);
        max-width: 882px;
        margin-inline: auto;
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
        transform: translateX(50px);
    }

    .about-rebrand-block .about-rebrand__masthead {
        position: absolute;
        top: 100%;
        left: calc(100% * 789.56 / 882.32);
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: var(--space-3);
        direction: ltr;
        max-width: min(100%, 26rem);
        transform: translate(calc(-100% + 25px), calc(-52% + 45px));
        z-index: 2;
    }

    .about-rebrand-block .about-rebrand__masthead .about-section-marker,
    .about-rebrand-block .about-rebrand__masthead .about-section-marker--rebrand {
        display: flex;
    }

    .about-rebrand-block .about-rebrand__copy {
        padding-top: calc(var(--space-6) + 5px);
        transform: translate(25px, 5px);
        min-width: max-content;
        text-align: right;
    }

    .about-rebrand-block .about-rebrand__head {
        max-width: none;
        margin-inline: 0;
        padding-inline-start: 0;
        text-align: right;
    }

    .about-rebrand-block .about-rebrand__head::before {
        content: none;
    }

    .about-rebrand-block .about-rebrand__head .about-timeline__item-years,
    .about-rebrand-block .about-rebrand__head .about-timeline__item-label,
    .about-rebrand-block .about-rebrand__head .about-rebrand__title {
        margin-inline: 0;
        white-space: nowrap;
    }

    .about-rebrand-block .about-rebrand__head .about-timeline__item-years {
        margin-top: 25px;
    }

    .about-rebrand-block .about-rebrand__title {
        font-size: 1.25rem;
        line-height: normal;
    }

    .about-rebrand-block > .about-chapter--rebrand {
        margin-top: 0;
        padding-top: clamp(5rem, 10vw, 8rem);
        transform: translateX(-200px);
    }

    .about-rebrand-block .about-rebrand__body--right {
        max-width: 28.16rem;
        margin-left: auto;
        margin-right: 30px;
        text-align: right;
        transform: none;
    }

    .about-rebrand-block .about-rebrand__body--left {
        max-width: 28.16rem;
        margin-right: auto;
        margin-left: 0;
        text-align: right;
        transform: translate(17.8125rem, -1.875rem);
    }

    .about-page__flow {
        padding-top: var(--space-8);
    }

    .about-flow-section__head,
    .about-flow-section__body {
        padding-inline-end: clamp(4.5rem, 10vw, 7rem);
    }

    .about-section-marker--eco {
        inset-inline-end: clamp(2rem, 6vw, 4rem);
    }

    .about-flow-swoosh--eco-rebrand {
        transform: translateX(50px);
    }

    .about-eco__grid > .row > .col:nth-child(n + 4) {
        margin-top: var(--space-6);
        padding-top: var(--space-6);
    }

    .about-eco-rebrand-bridge,
    .about-rebrand-block__stage {
        transform: translateX(50px);
    }

    .about-rebrand-block {
        transform: none;
    }

    .about-chapter--rebrand {
        margin-bottom: 0;
    }
}

/* ── Ecosystem grid ─────────────────────────────────────────────────── */
.about-eco.about-flow-section--eco {
    width: 100%;
    max-width: calc(56.5rem + 6.25rem);
    margin-inline: auto;
    margin-top: 1.5rem;
    margin-bottom: 3.75rem;
    padding-top: 0;
}

.about-flow-section--eco {
    padding-top: 0;
}

.about-eco__head .about-timeline__item-years {
    margin-top: 130px;
}

.about-chapter--eco-story {
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
}

.about-chapter--eco-story .about-flow-section__body,
.about-chapter--eco-story .about-eco__story {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline-end: 0;
}

.about-eco__story {
    max-width: 28.16rem;
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

.about-eco__body--left {
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
    transform: none;
}

.about-eco__head .about-timeline__item-label {
    text-align: left;
}

.about-chapter--eco-story {
    --penex-eco-rail-left: 23%;
}

.about-eco-block {
    --penex-eco-rail-left: 23%;
    --eco-copy-inset: calc(var(--penex-eco-rail-left) + 1px + 0.625rem);
    --eco-copy-width: calc(100% - var(--eco-copy-inset));
}

.about-eco__grid {
    margin-top: 0;
    margin-bottom: 0;
    padding-block: var(--space-6);
    border-top: 1px solid var(--zino-border-strong);
    border-bottom: 1px solid var(--zino-border-strong);
}

.about-video.about-video--flow.about-video--penex-8.about-flow-section {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 3.75rem;
}

/* چشم‌انداز به بعد — فاصله عمودی فشرده‌تر */
.about-vision.about-flow-section,
.about-video.about-video--flow.about-video--penex-9.about-flow-section,
.about-brands.about-flow-section,
.about-gallery.about-flow-section {
    padding-top: 0;
    margin-bottom: var(--space-6);
}

.about-vision.about-flow-section {
    margin-top: 0;
}

.about-brands {
    margin-bottom: var(--space-6);
}

.about-brands__masthead,
.about-gallery__masthead {
    margin-bottom: var(--space-4);
}

.about-team.about-flow-section {
    padding-top: 0;
    margin-top: 0;
}

.about-video__head--penex-8 {
    direction: rtl;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    transform: translateX(-4.375rem);
}

.about-video__head--penex-8 .about-section-marker--penex-8 {
    position: relative;
    inset: auto;
    top: auto;
    flex-shrink: 0;
    width: clamp(2.25rem, 3.5vw, 3rem);
    transform: translateY(-2.375rem);
}

.about-video__title--penex-8 {
    text-align: right;
    font-size: clamp(0.75rem, 0.35vw + 0.68rem, 1rem);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.about-eco__grid > .row + .row {
    margin-top: var(--space-6);
}

.about-eco__card {
    height: 100%;
    text-align: start;
}

.about-eco__brand {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: clamp(1.25rem, 1.1vw + 0.9rem, 1.5rem);
    margin-bottom: var(--space-3);
}

.about-eco__brand--spacer {
    visibility: hidden;
}

.about-eco__badge {
    display: block;
    width: auto;
    max-width: min(100%, 12.875rem);
    height: clamp(1.125rem, 0.9vw + 0.75rem, 1.5rem);
    object-fit: contain;
    object-position: right center;
}

.about-eco__subtitle {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--zino-surface-3);
    color: var(--zino-text-sub);
    font-size: clamp(0.6875rem, 0.4vw + 0.6rem, 0.9375rem);
    font-weight: 400;
    line-height: 1.45;
    text-align: start;
}

.about-eco__list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--zino-text);
    font-size: clamp(0.625rem, 0.4vw + 0.55rem, 0.875rem);
    font-weight: 400;
    line-height: 1.85;
    text-align: start;
}

.about-eco__list li + li {
    margin-top: var(--space-2);
}

.about-eco__list li {
    position: relative;
    padding-inline-start: var(--space-4);
}

.about-eco__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.72em;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--zino-text-sub);
}

/* ── Team grid ────────────────────────────────────────────────────────── */
.about-team {
    margin-bottom: var(--zino-section-gap);
}

.about-team__card {
    transition: transform 0.25s ease;
}

.about-team__card:hover {
    transform: translateY(-4px);
}

.about-team__photo-wrap {
    aspect-ratio: 187 / 250;
    background: var(--zino-surface);
    overflow: hidden;
}

.about-team__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-team__name {
    margin-top: var(--space-2);
    color: var(--zino-text);
    font-size: clamp(0.6875rem, 0.4vw + 0.62rem, 0.875rem);
    font-weight: 600;
    line-height: 1.4;
}

.about-team__role {
    color: var(--zino-text-sub);
    font-size: clamp(0.5625rem, 0.35vw + 0.5rem, 0.75rem);
    font-weight: 400;
    line-height: 1.4;
}

.about-team__phone {
    display: inline-block;
    margin-top: var(--space-1);
    color: var(--zino-text-sub);
    font-size: clamp(0.5625rem, 0.35vw + 0.5rem, 0.75rem);
    transition: color 0.2s ease;
}

.about-team__phone:hover {
    color: var(--zino-green);
}

/* ── Brand / customer grids (reuse partners language) ─────────────────── */

/* ── Photo swiper ─────────────────────────────────────────────────────── */
.about-gallery-swiper {
    width: 100%;
    margin-top: var(--space-4);
}

.about-gallery-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.about-gallery-swiper .swiper-slide img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.about-gallery-swiper .swiper-slide img:hover {
    transform: scale(1.03);
}

.about-gallery-swiper .swiper-button-next,
.about-gallery-swiper .swiper-button-prev {
    color: var(--zino-green);
}

.about-gallery-swiper .swiper-pagination-bullet-active {
    background: var(--zino-green);
}

/* ── Mobile decorative art (Figma 135:11589) — flow-positioned assets ── */
.about-mobile-deco {
    display: block;
    max-width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* Figma 135:11726 — tagline above band; marker + swoosh below */
.about-timeline__hero-mobile {
    position: relative;
    width: 100%;
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.about-timeline__hero-composite {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 402 / 240;
}

.about-timeline__tagline--mobile {
    position: relative;
    z-index: 4;
    margin: 0 auto var(--space-2);
    padding: 0;
    padding-bottom: 0;
    width: fit-content;
    max-width: 100%;
    font-size: clamp(0.6875rem, 3.2vw + 0.45rem, 0.875rem);
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.about-timeline__mobile-bridge {
    position: relative;
    z-index: 3;
    overflow: visible;
    margin-block: var(--space-3);
    pointer-events: none;
}

.about-mobile-deco--swoosh-1 {
    display: block;
    width: min(48%, 11.75rem);
    height: auto;
}

/* Figma 135:11769 + 135:11765 — swoosh left, star + rail right between items 1–2 */
.about-timeline__mobile-bridge--items-1-2 {
    --timeline-item2-rail-right: clamp(3rem, 9vw, 3.75rem);
    position: relative;
    min-height: clamp(5.5rem, 32vw, 7rem);
    margin-block: var(--space-3) 0;
    overflow: visible;
}

.about-timeline__mobile-bridge--items-1-2 .about-mobile-deco--swoosh-1 {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
}

.about-timeline__mobile-bridge--items-1-2 .about-mobile-deco--star {
    position: absolute;
    top: clamp(0.5rem, 4vw, 1.25rem);
    right: calc(var(--timeline-item2-rail-right) - clamp(1.375rem, 7.5vw, 1.6875rem));
    left: auto;
    width: clamp(2.5rem, 14vw, 3.4375rem);
    opacity: 1;
}

.about-timeline__mobile-bridge--star {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(-1 * var(--space-6));
    margin-bottom: var(--space-2);
}

.about-mobile-deco--star {
    width: clamp(2rem, 12vw, 3.25rem);
}

/* Figma 135:11771 — swoosh + star + rail + label between item 2 and intro video */
.about-timeline__mobile-bridge--video {
    --timeline-item2-rail-right: clamp(3rem, 9vw, 3.75rem);
    --video-bridge-rail-right: calc(var(--timeline-item2-rail-right) - 2.5rem);
    --video-bridge-swoosh-scale: min(44%, 10.875rem);
    --video-bridge-rail-top: calc(var(--video-bridge-swoosh-scale) * 1.345 + clamp(1.75rem, 8vw, 2.5rem) - 3.125rem);
    --video-bridge-rail-height: clamp(2.75rem, 12vw, 3.95rem);
    position: relative;
    min-height: calc(var(--video-bridge-rail-top) + var(--video-bridge-rail-height) + clamp(3.5rem, 16vw, 4.5rem));
    margin-block: calc(-1 * var(--space-2)) 0;
    overflow: visible;
}

.about-timeline__mobile-bridge--video .about-mobile-deco--video-bridge {
    position: absolute;
    top: -11.25rem;
    right: calc(-1 * var(--space-2) - 8.4375rem);
    left: auto;
    display: block;
    width: min(44%, 10.875rem);
    height: auto;
    margin: 0;
}

.about-timeline__mobile-bridge--video .about-mobile-deco--video-star {
    position: absolute;
    top: calc(var(--video-bridge-rail-top) - clamp(1.25rem, 6vw, 1.5rem) - 0.3125rem);
    right: calc(var(--video-bridge-rail-right) - clamp(0.4375rem, 2.5vw, 0.5625rem));
    left: auto;
    display: block;
    width: clamp(1.125rem, 5.5vw, 1.375rem);
    height: auto;
    margin: 0;
}

.about-timeline__mobile-bridge--video .about-video-bridge-label {
    position: absolute;
    top: calc(var(--video-bridge-rail-top) + var(--video-bridge-rail-height) + var(--space-2) - 1.875rem);
    right: calc(var(--video-bridge-rail-right) + 1px + 0.625rem);
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    width: clamp(2.375rem, 12vw, 3rem);
    margin: 0;
    pointer-events: none;
}

.about-timeline__mobile-bridge--video .about-mobile-deco--video-intro {
    display: block;
    width: 51%;
    height: auto;
    margin: 0;
}

.about-timeline__mobile-bridge--video .about-mobile-deco--video-zino-logo {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.about-timeline__mobile-bridge--video::after {
    content: "";
    position: absolute;
    top: var(--video-bridge-rail-top);
    right: var(--video-bridge-rail-right);
    left: auto;
    width: 1px;
    height: var(--video-bridge-rail-height);
    background: var(--zino-border-strong);
    pointer-events: none;
}

.about-timeline__mobile-bridge--chapter {
    position: relative;
    z-index: 1;
    margin-top: -6.25rem;
    margin-bottom: var(--space-2);
    overflow: visible;
    pointer-events: none;
}

.about-timeline__mobile-bridge--chapter .about-mobile-deco--chapter-bridge {
    display: block;
    width: min(48%, 7.5rem);
    height: auto;
    margin: 0;
    margin-inline: auto var(--space-4);
    transform: translateX(-3.125rem);
}

.about-timeline__mobile-bridge--digital {
    position: relative;
    width: min(88%, 17.9375rem);
    aspect-ratio: 286.77 / 175.8;
    /* physical left — avoid margin-inline-start:auto (RTL flips side) */
    margin-left: 0;
    margin-right: auto;
    margin-block: var(--space-2) 0;
    transform: translate(3.125rem, 0.625rem);
    overflow: visible;
    pointer-events: none;
}

.about-timeline__mobile-bridge--digital > img {
    position: absolute;
    display: block;
    height: auto;
    margin: 0;
}

/* Figma 135:11894 / 11892 / 11808 — composite bbox 286.77×175.8 */
.about-mobile-deco--digital-markers {
    top: 0;
    left: 44.9%;
    width: 36.2%;
    z-index: 3;
}

.about-mobile-deco--digital-swoosh-small {
    top: 9.5%;
    left: 27.2%;
    width: 56.4%;
    z-index: 2;
}

.about-mobile-deco--digital-swoosh {
    top: 37.1%;
    left: 0;
    width: 100%;
    z-index: 1;
}

.about-timeline__mobile-bridge--penex {
    position: relative;
    z-index: 0;
    margin-top: 0;
    margin-bottom: var(--space-4);
    transform: translate(-5.625rem, calc(-1 * clamp(2rem, 10vw, 2.75rem) - 12.5rem));
    overflow: visible;
    pointer-events: none;
}

.about-mobile-deco--penex-swoosh {
    display: block;
    width: min(88%, 18.0625rem);
    height: auto;
    margin: 0;
    /* physical left — margin-inline-end:auto sits on the RIGHT in RTL */
    margin-left: 0;
    margin-right: auto;
}

/* Figma 135:12301 / 12303 / 12305 — mobile bridge PENEX 7 → اکوسیستم (bbox 467×236) */
.about-timeline__mobile-bridge--penex-eco {
    --penex-eco-rail-left: 23%;
    --penex-eco-rail-top: 96.1%;
    --penex-eco-rail-height: 14%;
    position: relative;
    width: min(100%, 29.2rem);
    aspect-ratio: 467.18 / 236.11;
    margin-block: 0 var(--space-2);
    margin-left: 0;
    margin-right: auto;
    overflow: visible;
    pointer-events: none;
}

.about-timeline__mobile-bridge--penex-eco > img {
    position: absolute;
    display: block;
    height: auto;
    margin: 0;
}

.about-mobile-deco--penex-eco-video-swoosh {
    top: 0;
    left: 22.3%;
    width: 77.8%;
    z-index: 0;
}

.about-mobile-deco--penex-eco-bridge {
    top: 50.6%;
    left: 0;
    width: 67.4%;
    z-index: 0;
}

.about-mobile-deco--penex-eco-star {
    top: 54.7%;
    left: 20.6%;
    width: 5.2%;
    z-index: 3;
}

/* Figma 135:12310 / 135:12312 — mobile bridge eco story → ریبرندینگ ۱۴۰۵ (bbox 399×127) */
.about-timeline__mobile-bridge--eco-rebrand {
    --rebrand-rail-right: 6.4%;
    position: relative;
    /* Figma 135:12310 — nearly full width from left (x≈32, w≈398 of 425) */
    width: min(100%, 25rem);
    aspect-ratio: 399.24 / 126.61;
    margin-block: 0;
    margin-left: 0;
    margin-right: auto;
    overflow: visible;
    pointer-events: none;
}

.about-timeline__mobile-bridge--eco-rebrand > img {
    position: absolute;
    display: block;
    height: auto;
    margin: 0;
}

.about-mobile-deco--eco-rebrand-swoosh {
    top: 0;
    left: 0;
    width: 99.8%;
    z-index: 1;
}

.about-mobile-deco--eco-rebrand-star {
    top: 78.5%;
    left: 85.3%;
    width: 6.9%;
    z-index: 3;
}

.about-timeline__mobile-bridge--penex-eco::after {
    content: "";
    position: absolute;
    top: var(--penex-eco-rail-top);
    left: var(--penex-eco-rail-left);
    width: 1px;
    height: var(--penex-eco-rail-height);
    background: var(--zino-border-strong);
    pointer-events: none;
    transform: translateX(-50%);
}

.about-flow-swoosh--mobile {
    width: 100%;
    max-width: 100%;
    margin-block: var(--space-3);
    aspect-ratio: auto;
}

.about-flow-swoosh--eco-rebrand-mobile {
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
}

.about-flow-swoosh--team-vision-mobile {
    display: block;
    width: min(100%, 24.8125rem);
    max-width: 100%;
    aspect-ratio: 397 / 150;
    height: auto;
    margin-block: var(--space-3) var(--space-4);
    margin-inline: auto;
}

.about-rebrand__mobile-deco {
    margin-block: var(--space-3);
}

.about-mobile-deco--rebrand-end {
    width: min(96%, 25rem);
    margin-inline: auto;
}

@media (max-width: 1199.98px) {
    .about-timeline .container-fluid {
        padding-inline: clamp(1rem, 5vw, 1.5rem);
    }

    /* Figma 135:11589 — deco + item 1 up; tagline stays in place */
    .about-timeline__hero-mobile {
        z-index: 3;
    }

    .about-timeline__hero-composite {
        margin-top: -5.625rem;
        z-index: 3;
    }

    .about-timeline__track {
        position: relative;
        z-index: 2;
        min-height: 0;
        margin-top: -5.625rem;
        padding-top: var(--space-1);
        padding-inline-start: var(--space-5);
        padding-inline-end: var(--space-3);
        padding-bottom: 0;
    }

    .about-timeline__items > .about-timeline__item:first-child ~ .about-timeline__mobile-bridge,
    .about-timeline__items > .about-timeline__item:first-child ~ .about-timeline__item {
        margin-top: 0;
    }

    .about-timeline__item {
        padding-inline-end: var(--space-4);
    }

    .about-timeline__item--left::before,
    .about-timeline__item--right::before {
        display: none;
    }

    /* Figma 135:11698 / 135:11762 — rail on head only (not body) */
    .about-timeline__item--left .about-timeline__item-head {
        --timeline-rail-pos: calc(1.875rem - var(--space-5));
        position: relative;
        margin-inline-end: 2.1875rem;
    }

    .about-timeline__item--left .about-timeline__item-years,
    .about-timeline__item--left .about-timeline__item-label {
        margin-inline-end: calc(var(--timeline-rail-pos) + 1px + 0.625rem);
        text-align: end;
    }

    .about-timeline__item--left .about-timeline__item-head::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--timeline-rail-pos);
        right: auto;
        width: 1px;
        background: var(--zino-border-strong);
        pointer-events: none;
    }

    .about-timeline__items > .about-timeline__item--left:first-child .about-timeline__item-head {
        transform: translateY(-1.25rem);
    }

    .about-timeline__items > .about-timeline__item--left:first-child .about-timeline__item-head::before {
        top: calc(9.625rem - clamp(10.5rem, 58vw, 14.75rem));
    }

    .about-timeline__item--right .about-timeline__item-head {
        --timeline-item2-rail-right: clamp(3rem, 9vw, 3.75rem);
        position: relative;
        margin-inline-end: auto;
        margin-inline-start: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
        padding-inline-start: calc(var(--timeline-item2-rail-right) + 1px + 10px);
        padding-inline-end: 0;
    }

    .about-timeline__item--right .about-timeline__item-years,
    .about-timeline__item--right .about-timeline__item-label {
        margin-inline: 0;
        width: 100%;
        text-align: start;
    }

    .about-timeline__item--right .about-timeline__item-years {
        margin-bottom: var(--space-2);
    }

    /* بخش ۱ و ۲ — سال درشت‌تر */
    .about-timeline__items > .about-timeline__item:first-child .about-timeline__item-years,
    .about-timeline__items > .about-timeline__item--right .about-timeline__item-years {
        font-size: clamp(1.25rem, 1.25vw + 1rem, 1.75rem);
    }

    .about-timeline__item--right .about-timeline__item-head::before {
        content: "";
        position: absolute;
        top: calc(-1 * clamp(3.25rem, 20vw, 4.75rem));
        bottom: 0;
        right: var(--timeline-item2-rail-right);
        left: auto;
        width: 1px;
        background: var(--zino-border-strong);
        pointer-events: none;
    }

    .about-video--intro {
        position: relative;
        z-index: 2;
        margin-top: var(--space-6);
        padding-inline: 0;
    }

    .about-video--penex {
        position: relative;
        z-index: 4;
        margin-top: var(--space-6);
        padding-inline: 0;
    }

    .about-penex-7-block {
        position: relative;
        z-index: 5;
        transform: translateY(-1.25rem);
    }

    .about-video--penex .about-video__title--penex {
        position: static;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        margin-bottom: var(--space-3);
        text-align: start;
        line-height: 1.5;
    }

    .about-video-chapter-bridge {
        display: none;
    }

    .about-penex-video-bridge__swoosh-above,
    .about-penex-video-bridge__swoosh-below,
    .about-penex-eco-bridge__art {
        display: none;
    }

    /* Figma 135:11589 — mobile flow layout from IRAN PENEX 8 onward */
    .about-page__inner.about-page__flow,
    .about-brands .about-page__inner,
    .about-gallery .about-page__inner {
        padding-inline: clamp(1rem, 7.5vw, 2rem);
    }

    .about-flow-section {
        padding-top: var(--space-4);
        margin-bottom: var(--space-5);
        overflow-x: clip;
    }

    /* دکوری‌های پراکنده — در موبایل مخفی؛ absolute روی محتوا می‌افتند */
    .about-flow-deco {
        display: none;
    }

    .about-flow-swoosh-wrap {
        width: 100%;
        overflow-x: clip;
        margin-block: var(--space-3);
    }

    .about-team + .about-flow-swoosh-wrap {
        margin-inline: calc(-1 * clamp(1rem, 7.5vw, 2rem));
        width: auto;
    }

    .about-flow-swoosh--team-vision-mobile {
        width: min(100%, 24.8125rem);
        max-width: none;
        aspect-ratio: 397 / 150;
        margin-inline: auto;
        transform: translateX(-20px);
    }

    .about-eco-rebrand-bridge {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        margin-block: var(--space-3);
        transform: none;
    }

    .about-rebrand-end-cap {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        overflow-x: clip;
    }

    .about-team__masthead .about-section-marker,
    .about-vision__panel .about-section-marker,
    .about-brands__masthead .about-section-marker,
    .about-gallery__masthead .about-section-marker,
    .about-video__head .about-section-marker {
        float: none;
        margin: 0;
    }

    .about-section-marker {
        width: 1.75rem;
        flex-shrink: 0;
    }

    .about-section-marker__star {
        width: 1.75rem;
    }

    .about-section-marker__rail {
        min-height: 2.5rem;
    }

    .about-eco.about-flow-section--eco {
        max-width: none;
        margin-top: var(--space-4);
        margin-bottom: var(--space-5);
        position: relative;
        z-index: 1;
    }

    .about-eco__head .about-timeline__item-years {
        margin-top: 0;
    }

    .about-eco__body--left {
        transform: none;
    }

    .about-eco__story {
        max-width: none;
        margin-inline: 0;
        text-align: end;
        transform: none;
    }

    .about-eco-block {
        --penex-eco-rail-left: 23%;
        --eco-copy-inset: calc(var(--penex-eco-rail-left) + 1px + 0.625rem);
        --eco-copy-width: calc(100% - var(--eco-copy-inset));
        margin-bottom: var(--space-5);
        transform: translateY(-11.875rem);
    }

    .about-eco-block__stage {
        display: grid;
        grid-template-columns: 1fr;
    }

    .about-eco-block__stage > .about-timeline__mobile-bridge--penex-eco,
    .about-eco-block__stage > .about-eco__masthead {
        grid-area: 1 / 1;
    }

    .about-eco-block__stage > .about-timeline__mobile-bridge--penex-eco {
        z-index: 2;
        transform: translateY(calc(-1 * var(--space-3)));
    }

    .about-eco-block__stage > .about-eco__masthead {
        z-index: 0;
        align-self: start;
        margin-top: calc(100% * 236.11 / 467.18 * 0.695);
    }

    .about-eco-block > .about-eco__story {
        max-width: var(--eco-copy-width);
        margin-inline-end: var(--eco-copy-inset);
        margin-inline-start: auto;
        margin-top: 0.9375rem;
    }

    .about-eco-block .about-eco__title {
        margin-top: 0;
        margin-bottom: var(--space-2);
        font-size: clamp(0.6875rem, 3vw + 0.55rem, 0.8125rem);
        line-height: 1.35;
        text-align: end;
    }

    .about-eco-block .about-eco__body--left {
        max-width: 100%;
        text-align: end;
        overflow-wrap: break-word;
    }

    .about-eco__grid {
        padding-block: var(--space-4);
    }

    .about-eco__grid > .row > .col {
        min-width: 0;
    }

    .about-eco__grid > .row + .row {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid var(--zino-border-strong);
    }

    .about-eco__card {
        min-width: 0;
    }

    .about-eco__badge {
        max-width: 5.5rem;
        height: 1.125rem;
    }

    .about-eco__subtitle {
        font-size: clamp(0.625rem, 0.4vw + 0.55rem, 0.875rem);
        padding: var(--space-1) var(--space-2);
    }

    .about-eco__list {
        font-size: clamp(0.625rem, 0.4vw + 0.55rem, 0.875rem);
        line-height: 1.6;
    }

    .about-video.about-video--flow.about-video--penex-8.about-flow-section,
    .about-video.about-video--flow.about-video--penex-9.about-flow-section,
    .about-vision.about-flow-section,
    .about-team.about-flow-section,
    .about-brands.about-flow-section,
    .about-gallery.about-flow-section {
        margin-bottom: var(--space-5);
    }

    .about-page__inner.about-page__flow {
        padding-top: 0;
    }

    .about-rebrand-group {
        transform: none;
        margin-top: calc(-1 * var(--space-2));
        margin-bottom: 0;
    }

    .about-rebrand-block {
        --rebrand-rail-right: 6.4%;
        --rebrand-bridge-lift: 12.5rem;
        --rebrand-bridge-shift-x: 50px;
        --rebrand-bridge-shift-y: 10px;
        --rebrand-masthead-lift: 10rem;
        --rebrand-masthead-shift-x: 10px;
        --rebrand-masthead-shift-y: 60px;
        --rebrand-head-visual-offset: calc(var(--rebrand-masthead-lift) - var(--rebrand-masthead-shift-y));
        --rebrand-story-gap: calc(var(--space-2) - 20px);
        --rebrand-end-cap-pull: 5.5rem;
        --rebrand-copy-inset: calc(var(--rebrand-rail-right) + var(--space-2) + 1px + 0.625rem);
        --rebrand-copy-width: calc(100% - var(--rebrand-copy-inset));
        transform: translateY(calc(-1 * var(--space-5)));
    }

    .about-rebrand-block__stage {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        margin: 0 0 calc(-1 * var(--space-5));
        transform: none;
    }

    .about-rebrand-block__stage > .about-timeline__mobile-bridge--eco-rebrand,
    .about-rebrand-block__stage > .about-rebrand__masthead {
        grid-area: 1 / 1;
    }

    .about-rebrand-block__stage > .about-timeline__mobile-bridge--eco-rebrand {
        z-index: 3;
        transform: translate(var(--rebrand-bridge-shift-x), calc(-1 * var(--rebrand-bridge-lift) - var(--rebrand-bridge-shift-y)));
    }

    .about-rebrand-block__stage > .about-rebrand__masthead {
        z-index: 1;
        align-self: start;
        margin-top: calc(100% * 109 / 399.24);
        transform: translate(var(--rebrand-masthead-shift-x), calc(-1 * var(--rebrand-masthead-lift) + var(--rebrand-masthead-shift-y)));
    }

    .about-rebrand-block .about-rebrand__masthead .about-section-marker {
        display: none;
    }

    .about-rebrand-block .about-rebrand__masthead {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        max-width: none;
        margin: 0;
        padding-inline-start: 0;
    }

    .about-rebrand-block .about-rebrand__copy {
        padding-top: 0;
        transform: none;
        min-width: 0;
        text-align: end;
    }

    .about-rebrand-block .about-rebrand__head {
        max-width: var(--rebrand-copy-width);
        margin-inline-start: auto;
        margin-inline-end: var(--rebrand-copy-inset);
        padding-inline-start: calc(1px + 0.625rem);
        text-align: end;
    }

    .about-rebrand-block .about-rebrand__head::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        height: auto;
        right: 0;
        left: auto;
        width: 1px;
        background: var(--zino-border-strong);
        pointer-events: none;
        transform: translateX(50%);
    }

    .about-rebrand-block .about-rebrand__head .about-timeline__item-years,
    .about-rebrand-block .about-rebrand__head .about-timeline__item-label,
    .about-rebrand-block .about-rebrand__head .about-rebrand__title {
        margin-inline: 0;
        white-space: normal;
    }

    .about-rebrand-block .about-rebrand__head .about-timeline__item-years {
        margin-top: 0;
    }

    .about-rebrand-block .about-rebrand__title {
        font-size: clamp(0.6875rem, 3vw + 0.55rem, 0.8125rem);
        line-height: 1.35;
    }

    .about-rebrand-block > .about-chapter--rebrand {
        padding-top: 0;
        margin-top: calc(var(--rebrand-story-gap) - var(--rebrand-head-visual-offset));
        transform: none;
    }

    .about-rebrand-block .about-rebrand__body--right,
    .about-rebrand-block .about-rebrand__body--left,
    .about-rebrand-block .about-chapter--rebrand .about-chapter__body {
        max-width: var(--rebrand-copy-width);
        margin-inline-start: auto;
        margin-inline-end: var(--rebrand-copy-inset);
        text-align: start;
        transform: none;
    }

    .about-rebrand-block .about-chapter--rebrand .about-rebrand__body .about-chapter__body:last-child {
        margin-bottom: var(--space-1) !important;
    }

    .about-rebrand-block .about-chapter--rebrand .about-rebrand__mobile-deco {
        margin-top: var(--space-1);
        margin-bottom: calc(-1 * var(--space-6));
    }

    .about-rebrand-block .about-chapter--rebrand .about-rebrand-end-cap {
        width: 100%;
        max-width: 100%;
        margin-top: calc(var(--space-2) - var(--rebrand-end-cap-pull));
        margin-inline: 0;
        transform: none;
        margin-bottom: 0;
    }

    .about-eco-rebrand-bridge {
        width: 100%;
        max-width: 100%;
        margin-block: var(--space-3);
        transform: none;
    }

    .about-rebrand__masthead {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        max-width: none;
        margin: var(--space-4) 0;
        margin-right: auto;
        margin-left: 0;
    }

    .about-eco-rebrand-bridge .about-section-marker--rebrand,
    .about-rebrand__masthead .about-section-marker--rebrand {
        position: relative;
        top: auto;
        left: auto;
        inset-inline: auto;
        transform: none;
        float: inline-end;
        margin-inline: auto var(--space-3);
        margin-top: var(--space-3);
    }

    .about-rebrand-block .about-rebrand__masthead .about-section-marker,
    .about-rebrand-block .about-rebrand__masthead .about-section-marker--rebrand {
        display: none;
        float: none;
        margin: 0;
    }

    .about-rebrand-block .about-rebrand__head .about-timeline__item-years,
    .about-rebrand-block .about-rebrand__head .about-timeline__item-label,
    .about-rebrand-block .about-rebrand__head .about-rebrand__title {
        margin-inline: 0;
    }

    .about-rebrand__copy {
        padding-top: var(--space-4);
    }

    .about-section-marker {
        position: relative;
        inset-inline: auto;
        margin-inline: auto var(--space-3);
        margin-bottom: var(--space-3);
        float: inline-end;
    }

    .about-section-marker__rail {
        min-height: 3rem;
    }

    .about-flow-section__head,
    .about-flow-section__body {
        padding-inline-end: 0;
        clear: both;
    }

    /* Figma 135:11589 — PENEX 7 → اکوسیستم: bridge + masthead در یک stage */
    .about-eco__masthead .about-section-marker {
        float: none;
        margin: 0;
        transform: none;
        display: none;
    }

    .about-eco__masthead {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        display: block;
        max-width: none;
        margin: 0;
        margin-inline: 0;
        padding-inline-start: 0;
    }

    .about-eco__head {
        position: relative;
        max-width: none;
        text-align: end;
    }

    .about-eco__head::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: auto;
        height: clamp(2.75rem, 12vw, 3.25rem);
        left: var(--penex-eco-rail-left, 23%);
        width: 1px;
        background: var(--zino-border-strong);
        pointer-events: none;
        transform: translateX(-50%);
    }

    .about-eco__head .about-timeline__item-years,
    .about-eco__head .about-timeline__item-label {
        margin-inline-end: calc(var(--penex-eco-rail-left, 23%) + 1px + 0.625rem);
    }

    .about-eco__head .about-timeline__item-years {
        margin-top: 0;
    }

    .about-video__title--flow {
        max-width: none;
        margin-inline: 0;
        text-align: center;
    }

    .about-video__head--penex-8 {
        width: 100%;
        justify-content: flex-start;
        transform: none;
        margin-bottom: calc(1.5rem - 30px) !important;
    }

    .about-video__head--penex-8 .about-section-marker--penex-8 {
        transform: none;
        width: 1.75rem;
    }

    .about-video__title--penex-8 {
        white-space: normal;
        text-align: end;
        font-size: clamp(0.5625rem, 2.8vw + 0.4rem, 0.75rem);
    }

    .about-video__head--penex-9 {
        width: 100%;
        margin-right: 0;
        transform: none;
        margin-bottom: calc(1.5rem - 30px) !important;
        text-align: start;
    }

    .about-video__title--penex-9 {
        white-space: normal;
        text-align: start;
        font-size: clamp(0.5625rem, 2.8vw + 0.4rem, 0.75rem);
    }

    .about-vision.about-flow-section {
        margin-top: -30px;
    }

    .about-vision__panel .about-section-marker--vision {
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 1.75rem;
        margin: 0;
        padding: 0;
        transform: translateX(50%);
    }

    .about-vision__panel .about-section-marker--vision .about-section-marker__rail {
        display: none;
    }

    .about-vision__panel .about-section-marker--vision .about-section-marker__star {
        width: 1.75rem;
    }

    .about-vision__panel {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        transform: translateX(-50px);
        gap: 0;
    }

    .about-vision__content {
        position: relative;
        flex: none;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding-top: 1.75rem;
        padding-inline-start: calc(1px + 0.625rem);
        align-items: flex-start;
        text-align: start;
    }

    .about-vision__content::before {
        content: "";
        position: absolute;
        top: 1.75rem;
        bottom: 0;
        right: 0;
        left: auto;
        width: 1px;
        background: var(--zino-border-strong);
        pointer-events: none;
        transform: translateX(50%);
    }

    .about-vision__content .about-chapter__subhead,
    .about-vision__list {
        margin-inline: 0;
        width: 100%;
    }

    .about-vision__content .about-vision__title {
        width: auto;
        max-width: calc(100% - var(--space-6));
        margin-inline: 0;
        text-align: start;
    }

    .about-vision__content .about-chapter__title {
        white-space: normal;
        display: inline-block;
        width: auto;
        max-width: 100%;
        align-self: flex-start;
        text-align: start;
        font-size: clamp(0.6875rem, 3vw + 0.55rem, 0.8125rem);
        line-height: 1.35;
        margin-top: 0;
    }

    .about-vision__content .about-chapter__subhead {
        margin-top: var(--space-1);
        margin-bottom: var(--space-1) !important;
        text-align: start;
        font-size: clamp(0.625rem, 2.5vw + 0.45rem, 0.75rem);
        width: auto;
    }

    .about-vision__title {
        text-align: start;
        font-size: clamp(0.875rem, 3.25vw + 0.625rem, 1.25rem);
        line-height: 1.3;
        margin-top: 0;
    }

    .about-vision__list {
        text-align: start;
        font-size: clamp(0.625rem, 0.4vw + 0.55rem, 0.875rem);
        line-height: 1.6;
    }

    .about-brands__masthead,
    .about-gallery__masthead {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        margin-right: 0;
        margin-bottom: calc(1.5rem - 30px) !important;
    }

    .about-brands__copy,
    .about-gallery__copy {
        padding-top: var(--space-4);
    }

    .about-brands .partners-grid {
        padding-inline-start: 0;
    }

    .about-team__inner {
        align-items: stretch;
    }

    .about-team__masthead {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        margin-right: 0;
        margin-bottom: calc(1.5rem - 30px) !important;
    }

    .about-team__copy {
        padding-top: var(--space-4);
    }

    .about-team__photo-wrap {
        aspect-ratio: 122 / 163;
    }

    .about-team__name {
        margin-top: var(--space-1);
        margin-inline-start: 0 !important;
        font-size: 0.5625rem;
        line-height: 1.3;
    }

    .about-team__role {
        margin-inline-start: 0 !important;
        font-size: 0.5rem;
        line-height: 1.3;
    }

    .about-video--flow .about-video__shell {
        max-width: 100%;
    }

    .about-chapter--rebrand {
        transform: none;
    }

    .about-chapter--rebrand .about-flow-section__body {
        max-width: none;
    }

    .about-rebrand__body--right,
    .about-rebrand__body--left {
        max-width: none;
        margin-inline: 0;
        text-align: start;
        transform: none;
    }

    .about-eco__body--left {
        max-width: none;
        margin-inline: 0;
        text-align: end;
        transform: none;
    }

    .about-rebrand-end-cap {
        transform: none;
        margin-bottom: 0;
    }

    .about-digital-penex-bridge__markers,
    .about-digital-penex-bridge__swoosh-small,
    .about-digital-penex-bridge__swoosh {
        display: none;
    }

    .about-timeline__track .about-chapter--digital {
        position: static;
        margin-top: calc(var(--space-6) - 4.3125rem);
        padding-inline-end: var(--space-4);
        width: auto;
        max-width: none;
    }

    .about-chapter--digital .about-chapter__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .about-chapter--digital .about-chapter__head--flow {
        position: relative;
        z-index: 3;
        margin-inline-start: 1.25rem;
        margin-bottom: 0;
        text-align: start;
    }

    .about-chapter--digital .about-chapter__head--flow::before {
        display: none;
    }

    .about-chapter--digital .about-chapter__head--flow .about-chapter__years-lg {
        margin-bottom: 0 !important;
    }

    .about-chapter--digital .about-chapter__head--flow .about-chapter__title {
        margin-top: 0;
    }

    .about-chapter--digital .about-chapter__years-lg {
        font-size: clamp(1.25rem, 1.25vw + 1rem, 1.75rem);
    }

    .about-chapter--digital .about-chapter__subhead {
        text-align: start;
    }

    .about-chapter--digital .about-chapter__subhead:first-of-type {
        position: relative;
        z-index: 3;
        align-self: flex-start;
        width: auto;
        max-width: 100%;
        margin-top: calc(var(--space-1) - 0.9375rem);
        margin-inline-start: 1.25rem;
        font-size: clamp(1.125rem, 1.75vw + 0.8rem, 1.5rem);
        line-height: 1.2;
    }

    .about-chapter--digital .about-chapter__subhead:not(:first-of-type) {
        font-size: clamp(1rem, 1vw + 0.75rem, 1.375rem);
    }

    .about-chapter--digital .about-chapter__panel {
        width: 100%;
    }

    .about-chapter--digital .about-chapter__panel-body,
    .about-chapter--digital .about-chapter__panel-item {
        font-size: clamp(0.625rem, 0.52vw + 0.48rem, 0.8125rem);
        line-height: 1.45;
    }

    .about-chapter--digital .about-chapter__body {
        text-align: justify;
    }

    .about-rebrand__head {
        position: relative;
        margin-inline-start: 2.1875rem;
        text-align: end;
    }

    .about-rebrand-block .about-rebrand__head {
        margin-inline-start: auto;
        padding-inline-start: calc(1px + 0.625rem);
    }

    .about-rebrand-block .about-rebrand__head::before {
        right: 0;
        left: auto;
        transform: translateX(50%);
    }

    .about-rebrand__head::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: calc(-1 * var(--space-2));
        left: auto;
        width: 1px;
        background: var(--zino-border-strong);
        pointer-events: none;
    }

    .about-rebrand__head .about-timeline__item-years,
    .about-rebrand__head .about-timeline__item-label,
    .about-rebrand__title {
        margin-inline-start: calc(var(--space-2) + 1px + 0.625rem);
    }

    .about-rebrand-block .about-rebrand__head .about-timeline__item-years,
    .about-rebrand-block .about-rebrand__head .about-timeline__item-label,
    .about-rebrand-block .about-rebrand__head .about-rebrand__title {
        margin-inline: 0;
    }

    .about-chapter__body .zino-highlight,
    .about-rebrand-end-cap__body .zino-highlight {
        position: relative;
        z-index: 4;
    }

    .about-rebrand-end-cap__inner {
        padding-top: var(--space-5);
        padding-bottom: var(--space-6);
        padding-inline: calc(var(--space-4) + 20px);
    }

    .about-timeline__items > .about-timeline__item:first-child ~ .about-timeline__mobile-bridge--items-1-2 {
        margin-top: calc(var(--space-3) + 1.25rem);
        margin-bottom: 0;
        z-index: 3;
    }

    .about-timeline__items > .about-timeline__item--right {
        margin-top: calc(-1 * var(--space-2));
    }

    .about-timeline__items > .about-timeline__item--right .about-timeline__item-copy {
        margin-inline-end: auto;
        margin-inline-start: 0;
    }

    .about-timeline__mobile-bridge--video {
        margin-block: calc(-1 * var(--space-3)) 0;
    }

    .about-video--intro {
        margin-top: var(--space-4);
    }

    .about-video--intro .about-video__shell {
        max-width: 100%;
        margin-inline: 0;
    }

    .about-video--intro .about-video__player {
        margin-inline: auto;
    }

    .about-timeline__items {
        gap: var(--space-4);
    }

    .about-timeline__items > .about-timeline__item:first-child {
        margin-top: 3.125rem;
    }

    .about-timeline__item-copy {
        max-width: 100%;
    }

    .about-timeline__item-body,
    .about-timeline__item-body p {
        font-size: clamp(0.625rem, 0.55vw + 0.5rem, 0.875rem);
        line-height: 1.8;
    }

    .about-timeline__item-body .zino-highlight {
        position: relative;
        z-index: 4;
    }

    .about-chapter__content {
        padding-inline: 0;
        margin-top: 0;
    }

    .about-gallery-swiper .swiper-slide img {
        height: 220px;
    }

    .about-gallery-swiper .swiper-button-next,
    .about-gallery-swiper .swiper-button-prev {
        display: none;
    }

    .about-chapter--digital .about-chapter__subhead {
        color: var(--zino-green-chapter);
        font-weight: 700;
    }

    .about-chapter__body {
        line-height: 1.8;
        text-align: justify;
    }
}

/*
 * Tablet / mid — flow layout + desktop hero.
 * RTL gotcha: a block narrower than its parent with zero margins sits on
 * inline-start (= physical RIGHT). Pin left/right with physical margins.
 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .about-timeline .container-fluid {
        padding-inline: clamp(1.5rem, 4vw, 2.5rem);
    }

    .about-timeline__band {
        margin-top: clamp(-1rem, -1.5vw, -0.5rem);
        min-height: clamp(3.5rem, 8vw, 5.5rem);
        padding-inline: clamp(1rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
    }

    .about-timeline__tagline {
        margin-inline-end: clamp(2rem, 6vw, 4rem);
    }

    /* Pencil + curve — physical left under desktop hero/band */
    .about-timeline__hero-composite {
        width: min(72%, 28rem);
        max-width: 28rem;
        margin-top: clamp(-2.5rem, -4vw, -1.25rem);
        margin-left: 0;
        margin-right: auto;
        aspect-ratio: 402 / 240;
    }

    .about-timeline__track {
        margin-top: clamp(-7.5rem, -11vw, -5rem);
        padding-top: var(--space-4);
        padding-inline-start: var(--space-6);
        padding-inline-end: var(--space-4);
    }

    .about-timeline__items > .about-timeline__item:first-child {
        margin-top: var(--space-2);
    }

    /* Left-rail / left-column content — pin physical left (RTL block default is right) */
    .about-timeline__item--left .about-timeline__item-copy,
    .about-chapter--digital .about-chapter__panel,
    .about-chapter__body,
    .about-eco__body--left,
    .about-eco__story,
    .about-rebrand__body--left,
    .about-rebrand-end-cap__body {
        margin-left: 0;
        margin-right: auto;
    }

    /* Right-rail content (دوران تحول، …) — pin physical right */
    .about-timeline__item--right .about-timeline__item-copy,
    .about-rebrand__body--right {
        margin-right: 0;
        margin-left: auto;
    }

    .about-timeline__item--left .about-timeline__item-copy {
        max-width: min(36rem, 92%);
    }

    .about-timeline__item--left .about-timeline__item-head {
        margin-inline-end: 0;
    }

    .about-timeline__item--left .about-timeline__item-years,
    .about-timeline__item--left .about-timeline__item-label {
        margin-left: calc(var(--timeline-rail-pos, 0.375rem) + 1px + 0.625rem);
        margin-right: 0;
        text-align: left;
    }

    .about-timeline__item--left .about-timeline__item-body,
    .about-timeline__item--left .about-timeline__item-body p {
        text-align: left !important;
    }

    .about-timeline__items > .about-timeline__item:first-child .about-timeline__item-head {
        transform: translateY(clamp(-1.5rem, -2.5vw, -0.75rem));
    }

    .about-timeline__items > .about-timeline__item:first-child .about-timeline__item-head::before {
        top: clamp(-2.5rem, -4vw, -1rem);
    }

    /*
     * IRAN PENEX 7 — Figma 135:11808 / 11894 / 11936 / 12032
     * Digital markers sit above the (right-aligned) title; V-swoosh on the left.
     * Phone uses a huge translate from below the video — retune for mid width.
     */
    .about-penex-7-block {
        position: relative;
        z-index: 5;
        transform: none;
    }

    /* Composite starts ~x=100/425; markers land near right-aligned title */
    .about-timeline__mobile-bridge--digital {
        width: min(68%, 28rem);
        margin-left: 23.5%;
        margin-right: auto;
        margin-block: 0 calc(-1 * var(--space-3));
        transform: none;
    }

    .about-video--penex {
        position: relative;
        z-index: 4;
        margin-top: var(--space-4);
        overflow: visible;
    }

    .about-video--penex .about-video__title--penex {
        position: relative;
        z-index: 2;
        padding-top: clamp(1.5rem, 4vw, 2.5rem);
    }

    /* V-swoosh (135:11936) — left, level with title; not translated from below video */
    .about-timeline__mobile-bridge--penex {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        z-index: 1;
        width: min(62%, 24rem);
        margin: 0;
        transform: none;
    }

    .about-mobile-deco--penex-swoosh {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /*
     * Eco / rebrand / vision — unstack phone grid overlaps on tablet.
     * Phone uses negative lifts + 100%-of-row margin-top; that collides at mid width.
     */
    .about-eco-block {
        --penex-eco-bridge-width: min(90%, 34rem);
        --penex-eco-rail-left: clamp(1.25rem, 4vw, 2rem);
        transform: none;
        margin-top: var(--space-4);
        margin-bottom: var(--space-6);
    }

    .about-eco-block__stage {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .about-eco-block__stage > .about-timeline__mobile-bridge--penex-eco,
    .about-eco-block__stage > .about-eco__masthead {
        grid-area: auto;
        position: relative;
    }

    .about-timeline__mobile-bridge--penex-eco {
        width: var(--penex-eco-bridge-width);
        margin-left: 0;
        margin-right: auto;
        transform: none;
    }

    .about-eco-block__stage > .about-timeline__mobile-bridge--penex-eco {
        transform: none;
        z-index: 2;
    }

    .about-eco-block__stage > .about-eco__masthead {
        z-index: 0;
        align-self: stretch;
        width: 100%;
        max-width: min(36rem, 100%);
        margin-top: calc(-1 * clamp(1.25rem, 3vw, 2rem));
        transform: none;
    }

    .about-eco__head {
        text-align: end;
        padding-top: var(--space-2);
    }

    .about-eco__head::before {
        left: var(--penex-eco-rail-left);
        right: auto;
        height: 100%;
        bottom: 0;
    }

    .about-eco__head .about-timeline__item-years,
    .about-eco__head .about-timeline__item-label {
        margin-inline-start: 0;
        margin-inline-end: calc(var(--penex-eco-rail-left) + 1px + 0.625rem);
        text-align: end;
    }

    .about-eco__head .about-timeline__item-years {
        position: relative;
        z-index: 0;
        background: #fff;
        width: fit-content;
        margin-inline-start: auto;
        padding-block: 2px;
    }

    .about-eco-block > .about-eco__story {
        max-width: min(36rem, 100%);
        margin-inline-start: auto;
        margin-inline-end: 0;
        margin-top: var(--space-4);
    }

    .about-eco-block .about-eco__title,
    .about-eco-block .about-eco__body--left {
        text-align: end;
    }

    /* Rebrand — no negative story pull; bridge above head, not on top of copy */
    .about-rebrand-block {
        --rebrand-bridge-width: min(92%, 34rem);
        --rebrand-bridge-lift: 0px;
        --rebrand-bridge-shift-x: 0px;
        --rebrand-bridge-shift-y: 0px;
        --rebrand-masthead-lift: 0px;
        --rebrand-masthead-shift-x: 0px;
        --rebrand-masthead-shift-y: 0px;
        --rebrand-end-cap-pull: 0px;
        --rebrand-head-visual-offset: 0px;
        --rebrand-story-gap: var(--space-4);
        --rebrand-copy-inset: clamp(1.25rem, 4vw, 2rem);
        --rebrand-copy-width: min(36rem, calc(100% - var(--rebrand-copy-inset)));
        /* body column = copy width − 50px */
        --rebrand-body-width: calc(var(--rebrand-copy-width) - 3.125rem);
        transform: none;
    }

    .about-rebrand-block__stage {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0 0 var(--space-3);
    }

    .about-rebrand-block__stage > .about-timeline__mobile-bridge--eco-rebrand,
    .about-rebrand-block__stage > .about-rebrand__masthead {
        grid-area: auto;
        transform: none;
    }

    .about-timeline__mobile-bridge--eco-rebrand {
        width: var(--rebrand-bridge-width);
        margin-left: 0;
        margin-right: auto;
        margin-bottom: calc(-1 * var(--space-3));
    }

    .about-rebrand-block__stage > .about-rebrand__masthead {
        z-index: 2;
        align-self: stretch;
        width: 100%;
        max-width: var(--rebrand-copy-width);
        margin-top: 0;
        margin-inline-start: auto;
        margin-inline-end: 0;
        /* هد ۲۰۰px به چپ */
        transform: translateX(-12.5rem);
    }

    .about-rebrand-block .about-rebrand__head {
        max-width: 100%;
        margin-inline-start: auto;
        margin-inline-end: 0;
        padding-inline-start: calc(var(--rebrand-copy-inset) + 1px + 0.625rem);
        padding-inline-end: 0;
        text-align: start;
    }

    .about-rebrand-block .about-rebrand__head::before {
        right: 0;
        left: auto;
        transform: translateX(50%);
    }

    .about-rebrand-block .about-rebrand__title {
        margin-bottom: var(--space-2);
    }

    .about-rebrand-block > .about-chapter--rebrand {
        margin-top: var(--space-4);
        padding-top: 0;
        transform: none;
    }

    .about-rebrand-block .about-rebrand__body--right,
    .about-rebrand-block .about-rebrand__body--left,
    .about-rebrand-block .about-chapter--rebrand .about-chapter__body {
        max-width: var(--rebrand-body-width);
        margin-inline-start: auto;
        margin-inline-end: 0;
        text-align: start;
    }

    .about-rebrand-block .about-chapter--rebrand .about-rebrand__mobile-deco {
        margin-top: var(--space-2);
        margin-bottom: 0;
    }

    /* End-cap — فاصله از متن توضیح ۵۰px کمتر */
    .about-rebrand-block .about-chapter--rebrand .about-rebrand-end-cap {
        width: var(--rebrand-body-width);
        max-width: var(--rebrand-body-width);
        margin-top: calc(var(--space-4) - 3.125rem);
        margin-inline-start: auto;
        margin-inline-end: 0;
        margin-bottom: 0;
        transform: none;
        overflow: hidden;
    }

    .about-rebrand-end-cap__inner {
        padding-top: clamp(2.5rem, 5vw, 3.25rem);
        padding-bottom: var(--space-5);
        padding-inline: var(--space-5);
    }

    .about-rebrand-end-cap__body {
        text-align: start;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .about-timeline__track .about-chapter--digital {
        margin-top: var(--space-5);
        padding-inline-end: var(--space-5);
    }

    .about-chapter--digital .about-chapter__panel {
        max-width: 36rem;
    }

    .about-page__inner.about-page__flow,
    .about-brands .about-page__inner,
    .about-gallery .about-page__inner {
        padding-inline: clamp(1.5rem, 4vw, 2.5rem);
    }

    /* Vision + team→vision swoosh */
    .about-flow-swoosh-wrap {
        overflow: visible;
    }

    .about-flow-swoosh--team-vision-mobile {
        width: min(70%, 28rem);
        max-width: 28rem;
        margin-left: 0;
        margin-right: auto;
        margin-inline: 0 auto;
        transform: none;
    }

    .about-vision.about-flow-section {
        margin-top: var(--space-2);
        overflow: visible;
        padding-inline-end: var(--space-4);
    }

    .about-vision__panel {
        transform: none;
        max-width: min(40rem, 100%);
        width: 100%;
        margin-inline-start: auto;
        margin-inline-end: 0;
        gap: var(--space-3);
    }

    .about-vision__panel .about-section-marker--vision {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
        flex-shrink: 0;
        width: 1.75rem;
    }

    .about-vision__content {
        padding-inline-start: 0;
        padding-top: 0;
        text-align: start;
    }

    .about-vision__content::before {
        display: none;
    }

    .about-vision__content .about-vision__title,
    .about-vision__content .about-chapter__title,
    .about-vision__content .about-chapter__subhead,
    .about-vision__list {
        text-align: start;
        max-width: 100%;
    }

    .about-video__title--penex-9 {
        text-align: start;
        padding-inline-end: var(--space-2);
    }

    .about-team__name {
        font-size: 0.75rem;
    }

    .about-team__role {
        font-size: 0.625rem;
    }

    .about-video__title--penex-8,
    .about-video__title--penex-9 {
        font-size: clamp(0.75rem, 1vw + 0.55rem, 0.9375rem);
    }

    .about-video__head--penex-8,
    .about-video__head--penex-9,
    .about-team__masthead,
    .about-brands__masthead,
    .about-gallery__masthead {
        margin-bottom: var(--space-4) !important;
    }

    .about-gallery-swiper .swiper-slide img {
        height: 240px;
    }

    .about-gallery-swiper .swiper-button-next,
    .about-gallery-swiper .swiper-button-prev {
        display: flex;
    }
}

@media (max-width: 575.98px) {
    .about-gallery-swiper .swiper-slide img {
        height: 190px;
    }
}