/* Source About composition, using native media, columns and disclosure blocks. */
body.page-id-31 .cn-minimal-main:has(.cn-reference-about) {
    width: 100%;
    max-width: none;
    /* Start at the midpoint of the 48px navigation, which sits 8px from the top. */
    padding: 32px 0 0;
}

.cn-reference-about {
    width: 100%;
    max-width: 1920px !important;
    margin: 0 auto !important;
    padding: 0;

    & :is(.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-details) {
        box-sizing: border-box;
    }

    & p {
        margin: 0 0 1rem;
        font-size: clamp(16px, 1.4vw, 20px);
        font-weight: 300;
        line-height: 1.7;
    }

    & .cn-about-hero {
        width: calc(100% - 32px);
        min-height: 0;
        aspect-ratio: 16 / 8;
        margin: 0 16px 64px;
        border-radius: 48px;
        box-shadow: 0 25px 50px rgb(0 0 0 / 20%);
        overflow: hidden;
        color: #fff;
        text-align: center;

        & .one-202x-media-cover__inner-container {
            padding: 48px 16px;
        }

        & .cn-about-hero-copy {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        & h1 {
            margin: 0 0 24px;
            color: #fff;
            font-size: 65px;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.03em;
        }

        & .cn-about-hero-lead {
            width: 100%;
            max-width: 672px;
            margin: 0 0 48px;
            padding: 8px 0 4px;
        }

        & .cn-about-hero-lead p {
            margin: 0 0 24px;
            color: #fff;
            font-size: 24px;
            line-height: 1.3;
            font-weight: 300;
        }

        & .cn-about-hero-lead p:last-child {
            margin-bottom: 0;
        }

        & .cn-about-hero-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 19.2px;

            & > * {
                margin: 0 !important;
            }
        }
    }

    & .cn-about-editorial {
        width: 100%;
        max-width: 1688px;
        margin: 64px auto;
        padding: 0 64px;

        & > .wp-block-columns {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 64px;
            align-items: center;
            margin: 0;
            padding: 0 16px;
        }

        & .cn-about-editorial-copy {
            grid-column: 1 / span 5;
            margin: 0;
            padding: 16px 0;
        }

        & .cn-about-editorial-media {
            grid-column: 6 / span 7;
            margin: 0;
        }

        &.is-reversed .cn-about-editorial-copy {
            grid-column: 8 / span 5;
            grid-row: 1;
        }

        &.is-reversed .cn-about-editorial-media {
            grid-column: 1 / span 7;
            grid-row: 1;
        }

        & h2 {
            margin: 0 0 13.6px;
            font-size: 36px;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.015em;
        }

        & .cn-about-section-lead {
            color: #949aa2;
            font-size: 20px;
            font-weight: 300;
            line-height: 1.5;
            padding-top: 8px;
            margin-bottom: 4px;
        }

        & .cn-about-editorial-copy > p:not(.cn-about-section-lead) {
            padding-top: 8px;
            margin-bottom: 4px;
            font-size: clamp(0.9rem, 1.3vw, 1.15rem);
            font-weight: 300;
            line-height: 1.7;
        }

        & .wp-block-image {
            margin: 0;
        }

        & .cn-about-editorial-media img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 48px;
        }

        & .cn-about-service-icon {
            width: 64px;
            height: 64px;
            margin: 0 0 34px;
        }

        & .cn-about-service-icon img {
            border-radius: 0;
            object-fit: contain;
            filter: brightness(0);
        }
    }

    & .cn-about-timeline {
        width: calc(100% - 32px);
        margin: 32px 16px;
        padding: clamp(32px, 4vw, 72px);
        border-radius: 48px;
        background: #f4f2ef;

        & > h2 {
            margin: 0 0 clamp(24px, 3vw, 40px);
            text-align: center;
            font-size: clamp(28px, 2.6vw, 38.4px);
            font-weight: 700;
            letter-spacing: -0.01em;
            scroll-margin-top: 110px;
        }
    }

    & .cn-about-timeline-list {
        position: relative;
        max-width: 1100px;
        margin: 0 auto;

        &::before {
            position: absolute;
            inset: 0 auto 0 50%;
            width: 3px;
            transform: translateX(-50%);
            background: #007afb;
            content: "";
        }
    }

    & .cn-about-timeline-item {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        margin: 8px 0 0;
        padding: clamp(14px, 1.8vw, 22.4px) 0;

        &::before {
            position: absolute;
            top: clamp(14px, 1.8vw, 22.4px);
            left: 50%;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            transform: translateX(-50%);
            background: #007afb;
            box-shadow: 0 0 0 6px rgb(0 122 251 / 20%), 0 8px 18px rgb(0 0 0 / 10%);
            content: "";
        }

        &.is-left .cn-about-timeline-card {
            grid-column: 1;
        }

        &.is-right .cn-about-timeline-card {
            grid-column: 2;
        }

        &.is-mini,
        &.is-small {
            padding-block: 4px;
        }

        &.is-mini::before,
        &.is-small::before {
            top: 8px;
        }
    }

    & .cn-about-timeline-card {
        min-width: 0;
        margin: 0;
    }

    & .cn-about-timeline-date {
        display: inline-flex;
        margin: 0 0 9.6px;
        padding: 5.6px 14.4px;
        border-radius: 999px;
        background: #007afb;
        color: #fff;
        font-size: 13.6px;
        letter-spacing: 0.04em;
        line-height: 1.7;
        box-shadow: 0 14px 30px rgb(0 0 0 / 14%);
    }

    & .cn-about-timeline-card-inner,
    & .cn-about-timeline-details {
        margin: 0;
        padding: 16px 20px;
        border: 1px solid rgb(148 154 162 / 28%);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 18px 40px rgb(0 0 0 / 12%);
    }

    & .cn-about-timeline-card-inner h3 {
        margin: 0;
        font-size: 17.6px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: -0.01em;
    }

    & .cn-about-timeline-details > summary {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-height: 38px;
        padding: 0 50px 0 0;
        font-size: 17.6px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: -0.01em;
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker {
            display: none;
        }

        &::after {
            position: absolute;
            top: 50%;
            right: 0;
            display: grid;
            flex: none;
            width: 32px;
            height: 32px;
            inline-size: 32px;
            block-size: 32px;
            place-items: center;
            border-radius: 50%;
            transform: translateY(-50%);
            background-color: #007afb;
            background-image: url("../icons/timeline-expand.svg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100%;
            mask: none;
            -webkit-mask: none;
            content: "";
        }
    }

    & .cn-about-timeline-details[open] {
        padding-bottom: 16px;
    }

    & .cn-about-timeline-details[open] > summary {
        padding-top: 0;
    }

    & .cn-about-timeline-details[open] > summary::after {
        background-image: url("../icons/timeline-collapse.svg");
        mask: none;
        -webkit-mask: none;
    }

    & .cn-about-timeline-details > summary:focus-visible {
        outline: 2px solid #007afb;
        outline-offset: 5px;
        border-radius: 4px;
    }

    & .cn-about-timeline-detail-body {
        margin: 10px 0 0;
    }

    & .is-mini .cn-about-timeline-details {
        padding: 3px 6px;
        border: 0;
        box-shadow: none;
    }

    & .is-mini .cn-about-timeline-details > summary {
        gap: 4px;
        min-height: 25.4px;
        padding: 0 28px 0 0;
        font-size: 13.76px;

        &::after {
            width: 22px;
            height: 22px;
            inline-size: 22px;
            block-size: 22px;
            background-size: 100%;
        }
    }

    & .is-mini .cn-about-timeline-details[open] > summary::after {
        background-image: url("../icons/timeline-collapse.svg");
    }

    & .is-mini .cn-about-timeline-details[open] {
        padding: 3px 6px;
    }

    & .cn-about-timeline-inline-date {
        flex: 0 0 auto;
        max-width: 40%;
        padding: 2px 10px;
        border-radius: 999px;
        background: rgb(117 90 255 / 8%);
        color: #007afb;
        font-size: 12.48px;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: 0.02em;
    }

    & .is-mini .cn-about-timeline-detail-body {
        padding: 0 10px 12px;
    }

    & .cn-about-timeline-description {
        margin: 14px 0 0;

        & p {
            margin: 0 0 12px;
            font-size: 14px;
            line-height: 1.7;
        }
    }

    & .cn-about-timeline-link {
        margin: 8px 0 0;
        font-size: 14px;

        & a {
            color: #007afb;
            font-weight: 600;
        }
    }

    & .cn-about-timeline-techs {
        display: flex;
        flex-wrap: wrap;
        gap: 5.6px;
        margin: 10px 0;
    }

    & .cn-about-tech {
        position: relative;
        display: inline-flex;
        flex: 0 0 28px;
        align-items: center;
        justify-content: center;
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        height: 28px;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 9px;
        box-shadow: 0 6px 12px rgb(0 0 0 / 12%);

        & .wp-block-image {
            margin: 0 !important;
        }

        & .cn-about-tech-glyph img {
            display: block;
            width: 16px;
            height: 16px;
            padding: 0;
            border: 0;
            border-radius: 0;
            object-fit: contain;
        }

        & .cn-about-tech-glyph img[src*="fa-"] {
            width: 14px;
            height: 14px;
        }

        & .cn-about-tech-fallback {
            margin: 0;
            color: #fff;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0;
        }

        & .cn-about-tech-label {
            position: absolute;
            z-index: 5;
            bottom: calc(100% + 6px);
            left: 50%;
            width: 1px;
            height: 1px;
            max-width: 160px;
            margin: 0;
            padding: 0;
            border-radius: 8px;
            transform: translateX(-50%);
            background: #fff;
            color: #080808;
            display: block;
            clip-path: inset(50%);
            overflow: hidden;
            pointer-events: none;
            font-size: 11.5px;
            line-height: 1.4;
            box-shadow: 0 10px 20px rgb(0 0 0 / 12%);
        }

        &:hover .cn-about-tech-label {
            width: max-content;
            height: auto;
            padding: 4px 8px;
            clip-path: none;
            overflow: visible;
        }
    }

    & .cn-about-timeline-media,
    & .cn-about-timeline-video {
        margin: 10px 0 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;

        & figure {
            margin: 0;
        }

        & img,
        & video {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 12px;
        }
    }
}

@media (min-width: 1360px) {
    .cn-reference-about .cn-about-editorial {
        padding-inline: 144px;
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .cn-reference-about .cn-about-service-icon {
        transform: scale(0.8);
    }
}

@media (max-width: 1023px) {
    .cn-reference-about .cn-about-hero {
        aspect-ratio: 16 / 13;
    }

    .cn-reference-about .cn-about-editorial {
        padding-inline: 16px;

        & > .wp-block-columns {
            gap: 16px;
        }
    }
}

@media (max-width: 767px) {
    .cn-reference-about {
        & .cn-about-hero {
            aspect-ratio: 9 / 16;
            min-height: 620px;
            margin-bottom: 32px;

            & h1 {
                font-size: 40px;
            }

            & .cn-about-hero-lead p {
                font-size: 20px;
            }
        }

        & .cn-about-editorial {
            margin-block: 32px;
            padding: 0 32px;

            & > .wp-block-columns {
                display: flex;
                flex-direction: column;
                gap: 24px;
                padding: 0;
            }

            & .cn-about-editorial-copy {
                padding: 16px 0 0;
            }
        }

        & .cn-about-timeline {
            padding: 32px 20px;
            border-radius: 32px;
        }

        & .cn-about-timeline-list::before {
            left: 10px;
        }

        & .cn-about-timeline-item {
            grid-template-columns: minmax(0, 1fr);
            padding-left: 32px;

            &::before {
                left: 10px;
            }

            &:is(.is-left, .is-right) .cn-about-timeline-card {
                grid-column: 1;
            }
        }

        & .cn-about-timeline-card-inner,
        & .cn-about-timeline-details {
            padding-inline: 14px;
        }
    }
}

@media (max-width: 380px) {
    .cn-reference-about {
        & .cn-about-editorial {
            padding-inline: 24px;
        }

        & .cn-about-timeline {
            padding-inline: 12px;
        }

        & .cn-about-timeline-item {
            padding-left: 28px;
        }

        & .cn-about-timeline-inline-date {
            padding-inline: 6px;
        }

        & .cn-about-timeline-media,
        & .cn-about-timeline-video {
            padding: 0;
        }
    }
}