.about-hub-section {
    position: relative;
    z-index: 2;
}

.about-hub-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(160deg, #ffffff, #f8fafc);
    box-shadow: 0 24px 40px -30px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
    overflow: hidden;
}

.about-hub-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(440px 220px at 12% 16%, rgba(148, 46, 135, 0.08), transparent 72%),
            radial-gradient(420px 220px at 86% 18%, rgba(79, 70, 229, 0.08), transparent 74%);
    pointer-events: none;
}

.about-hub-col {
    --hub-pad: 1rem;
    position: relative;
    z-index: 1;
    padding: var(--hub-pad);
    display: grid;
    gap: 0.58rem;
}

.about-hub-col--map {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.88), rgba(255, 255, 255, 0.98));
}

.about-hub-col--about {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 247, 255, 0.94));
}

.about-hub-col + .about-hub-col {
    border-left: 1px solid rgba(148, 163, 184, 0.16);
}

.about-hub-col + .about-hub-col::after {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: -1px;
    width: 1px;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0), rgba(148, 46, 135, 0.28), rgba(99, 102, 241, 0.28), rgba(148, 163, 184, 0));
}

.about-hub-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7c3a9c;
    font-weight: 700;
    padding-bottom: 0.42rem;
}

.about-hub-kicker::after {
    content: "";
    display: block;
    width: 62px;
    height: 2px;
    margin-top: 0.34rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(124, 58, 159, 0.82), rgba(99, 102, 241, 0.28));
}

.about-hub-col:hover {
    transform: translateY(-1px);
    transition: transform 0.22s ease;
}

.about-hub-col h3 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    font-weight: 700;
    line-height: 1.22;
}

.about-hub-text {
    margin: 0;
    color: #475569;
    line-height: 1.52;
    font-size: 0.92rem;
}

.about-hub-map {
    position: relative;
    border-radius: 1.05rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: #e2e8f0;
    aspect-ratio: 16 / 11;
}

.about-hub-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.about-hub-about-visual {
    position: relative;
    margin-left: calc(-1 * var(--hub-pad));
    margin-right: calc(-1 * var(--hub-pad));
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
    border-top: 0;
    box-shadow: none;
    background: transparent;
}

.about-hub-about-visual img {
    width: 100%;
    height: 100%;
    max-height: clamp(180px, 18vw, 270px);
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

.about-hub-cta {
    margin-top: 0.48rem;
    width: 100%;
    justify-content: center;
    min-height: 2.36rem;
    padding-inline: 0.92rem;
    font-size: 0.96rem;
    box-shadow: 0 14px 22px -16px rgba(82, 39, 120, 0.64);
}

.about-hub-cta:hover {
    transform: translateY(-1px);
}

@media (max-width: 1180px) {
    .about-hub-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-hub-col + .about-hub-col {
        border-left: 0;
        border-top: 0;
    }

    .about-hub-col + .about-hub-col::after {
        left: -1px;
        top: 8%;
        bottom: 8%;
        width: 1px;
        height: auto;
        right: auto;
        background: linear-gradient(180deg, rgba(148, 163, 184, 0), rgba(148, 46, 135, 0.34), rgba(99, 102, 241, 0.34), rgba(148, 163, 184, 0));
    }

    .about-hub-col {
        --hub-pad: 0.78rem;
        padding: var(--hub-pad);
        gap: 0.46rem;
    }

    .about-hub-kicker {
        font-size: 0.6rem;
        letter-spacing: 0.12em;
        padding-bottom: 0.34rem;
    }

    .about-hub-kicker::after {
        width: 48px;
        height: 2px;
        margin-top: 0.3rem;
    }

    .about-hub-col h3 {
        font-size: 0.92rem;
        line-height: 1.2;
    }

    .about-hub-text {
        font-size: 0.74rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .about-hub-col--about .about-hub-text {
        display: -webkit-box;
    }

    .about-hub-map {
        aspect-ratio: 1 / 1;
    }

    .about-hub-cta {
        min-height: 2rem;
        font-size: 0.82rem;
        padding-inline: 0.6rem;
    }
}

@media (max-width: 767px) {
    .about-hub-shell {
        grid-template-columns: 1fr;
    }

    .about-hub-col + .about-hub-col {
        border-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.16);
    }

    .about-hub-col + .about-hub-col::after {
        top: -1px;
        left: 8%;
        right: 8%;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(148, 46, 135, 0.34), rgba(99, 102, 241, 0.34), rgba(148, 163, 184, 0));
    }

    .about-hub-section {
        padding-bottom: 2rem;
    }

    .about-hub-col {
        --hub-pad: 0.64rem;
        padding: 0.64rem;
        gap: 0.42rem;
    }

    .about-hub-kicker {
        font-size: 0.52rem;
        letter-spacing: 0.1em;
        padding-bottom: 0.26rem;
    }

    .about-hub-kicker::after {
        width: 36px;
        margin-top: 0.22rem;
    }

    .about-hub-col h3 {
        font-size: 0.78rem;
    }

    .about-hub-text {
        font-size: 0.68rem;
        -webkit-line-clamp: 3;
    }

    .about-hub-map {
        aspect-ratio: 1 / 1;
        min-height: 180px;
    }

    .about-hub-about-visual img {
        max-height: clamp(130px, 28vw, 180px);
    }

    .about-hub-cta {
        min-height: 1.8rem;
        font-size: 0.72rem;
        padding-inline: 0.42rem;
    }

    .about-hub-col--about .about-hub-text {
        display: none;
    }
}