:root {
    --about-navy: #081120;
    --about-black: #02050a;
    --about-blue: #168cff;
    --about-gold: #d4af37;
    --about-white: #f8fbff;
    --about-muted: #a7b2c4;
    --about-glass: rgba(255, 255, 255, .07);
    --about-border: rgba(255, 255, 255, .15)
}

/* Full-screen About hero */
.about-page-banner {
    position: relative;
    display: grid;
    min-height: 620px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 76% 45%, rgba(12, 118, 255, .2), transparent 28%),
        radial-gradient(circle at 45% 100%, rgba(212, 175, 55, .08), transparent 33%),
        linear-gradient(120deg, var(--about-black), var(--about-navy) 48%, #020713);
    text-align: left
}

.about-page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 5, 10, .99) 0%, rgba(2, 5, 10, .91) 36%, rgba(2, 5, 10, .3) 68%, rgba(2, 5, 10, .15)),
        url('../assets/corporate-globe-hero.png') 73% center/cover no-repeat;
    z-index: -4
}

.about-page-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to right, #000, transparent 82%);
    z-index: -3
}

.about-hero-glow {
    position: absolute;
    top: 50%;
    right: 9%;
    width: min(48vw, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(18, 125, 255, .08);
    filter: blur(80px);
    transform: translateY(-50%);
    z-index: -2
}

.about-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: clamp(2rem, 5vw, 7rem);
    align-items: center;
    width: min(calc(100% - 3rem), 1440px);
    min-height: 620px;
    margin-inline: auto;
    padding: 105px 0 32px
}

/* Left content */
.about-page-banner .about-banner-content {
    width: 100%;
    max-width: 720px;
    margin: 0;
    padding: 0;
    animation: aboutContentReveal 1s cubic-bezier(.2, .7, .2, 1) both
}

.about-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
    padding: .65rem 1rem;
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 999px;
    background: rgba(212, 175, 55, .08);
    color: #ecd377;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: capitalize;
    backdrop-filter: blur(14px)
}

.about-hero-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--about-gold);
    box-shadow: 0 0 14px var(--about-gold)
}

.about-page-banner .about-banner-content h1 {
    margin: 1.55rem 0 0;
    color: var(--about-white);
    font-size: clamp(2.9rem, 4.7vw, 5.1rem);
    font-weight: 750;
    line-height: .96;
    letter-spacing: -.06em;
    text-transform: none;
    -webkit-text-stroke: 0;
    text-shadow: 0 18px 36px rgba(0, 0, 0, .22)
}

.about-page-banner .about-banner-content h1 span {
    /* color: transparent; */
    background: linear-gradient(100deg, #fff 5%, #9dcaff 55%, var(--about-gold));
    background-clip: text;
    -webkit-background-clip: text
}

.about-page-banner .about-banner-content p {
    max-width: 650px;
    margin: 1.65rem 0 0;
    color: var(--about-muted);
    font-size: 16px;
    line-height: 1.65
}

/* Calls to action */
.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 50px
}

.about-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: .85rem 1.55rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--about-white);
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease
}

.about-hero-btn:hover {
    color: var(--about-white);
    transform: translateY(-3px)
}

.about-hero-btn-primary {
    background: linear-gradient(120deg, #c99c22, #e0c25d);
    color: #101010;
    box-shadow: 0 15px 35px rgba(212, 175, 55, .22)
}

.about-hero-btn-primary:hover {
    color: #101010;
    box-shadow: 0 20px 45px rgba(212, 175, 55, .34)
}

.about-hero-btn-secondary {
    border-color: var(--about-border);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(16px)
}

.about-hero-btn-secondary:hover {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .11)
}

/* Globe and glass cards */
.about-hero-visual {
    position: relative;
    min-height: 470px
}

.about-globe-photo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(29vw, 365px);
    aspect-ratio: 1;
    border: 8px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    background: url('../assets/a1.jpeg') center/cover no-repeat;
    box-shadow: 0 30px 65px rgba(0, 0, 0, .42), 0 0 55px rgba(22, 140, 255, .2);
    transform: translate(-50%, -50%);
    z-index: 1
}

.about-globe-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(36vw, 455px);
    aspect-ratio: 1;
    border: 1px solid rgba(58, 154, 255, .28);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: aboutGlobeRotation 28s linear infinite
}

.about-globe-ring::before,
.about-globe-ring::after {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(212, 175, 55, .19);
    border-radius: 50%;
    transform: rotate(58deg)
}

.about-globe-ring::after {
    inset: 18%;
    border-color: rgba(43, 145, 255, .28);
    transform: rotate(-48deg)
}

.about-globe-ring i {
    position: absolute;
    top: 12%;
    left: 19%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #58adff;
    box-shadow: 0 0 18px 6px rgba(39, 145, 255, .48)
}

.about-glass-card {
    position: absolute;
    width: clamp(145px, 12vw, 205px);
    padding: 1rem;
    border: 1px solid var(--about-border);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035));
    box-shadow: 0 22px 50px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
    animation: aboutCardFloat 6s ease-in-out infinite
}

.about-glass-card b {
    display: block;
    color: #fff;
    font-size: .88rem
}

.about-glass-card span {
    display: block;
    margin-top: .35rem;
    color: #9ba8ba;
    font-size: 16px;
    line-height: 1.45
}

.card-innovation { top: 10%; left: -5% }
.card-technology { top: 20%; right: -4%; animation-delay: -1.7s }
.card-consulting { bottom: 11%; left: 0; animation-delay: -3.2s }
.card-transformation { right: 2%; bottom: 7%; animation-delay: -4.5s }

@keyframes aboutContentReveal {
    from { opacity: 0; transform: translateY(28px) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes aboutGlobeRotation {
    from { transform: translate(-50%, -50%) rotate(0) }
    to { transform: translate(-50%, -50%) rotate(360deg) }
}

@keyframes aboutCardFloat {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-14px) }
}

/* Tablet */
@media(max-width:1024px) {
    .about-hero-container {
        grid-template-columns: 1fr .75fr;
        gap: 2rem
    }

    .about-hero-visual { min-height: 430px }
    .about-globe-photo { width: min(31vw, 320px) }
    .about-glass-card { width: 145px }
}

/* Mobile */
@media(max-width:767.98px) {
    .about-page-banner { min-height: 760px; padding: 0; text-align: center }

    .about-page-banner::before {
        background:
            linear-gradient(rgba(2, 5, 10, .96), rgba(2, 5, 10, .72)),
            url('../assets/corporate-globe-hero.png') 58% center/cover no-repeat
    }

    .about-hero-container {
        grid-template-columns: 1fr;
        width: min(calc(100% - 2rem), 600px);
        min-height: 760px;
        padding: 95px 0 30px
    }

    .about-page-banner .about-banner-content { text-align: center }
    .about-hero-kicker, .about-hero-actions { justify-content: center }
    .about-page-banner .about-banner-content p { margin-inline: auto }
    .about-page-banner .about-banner-content h1 { font-size: clamp(3rem, 14vw, 5rem) }
    .about-hero-visual { min-height: 390px }
    .about-globe-photo { width: min(68vw, 285px) }
    .about-globe-ring { width: min(88vw, 420px) }
    .card-innovation, .card-consulting { left: 0 }
    .card-technology, .card-transformation { right: 0 }
}

@media(max-width:480px) {
    .about-hero-actions { flex-direction: column }
    .about-hero-btn { width: 100% }
    .about-glass-card { width: 125px; padding: .75rem }
    .about-glass-card span { display: none }
}

@media(prefers-reduced-motion:reduce) {
    .about-page-banner *,
    .about-page-banner *::before,
    .about-page-banner *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

/* Premium company overview below the hero */
.about-company-premium {
    position: relative;
    padding: clamp(82px, 9vw, 140px) 24px 0;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 20%, rgba(28, 121, 182, .09), transparent 28%),
        radial-gradient(circle at 88% 74%, rgba(212, 175, 55, .08), transparent 30%),
        linear-gradient(145deg, #fff, #f7fafc 52%, #fffdf8);
    color: #0c1a2b
}

.about-company-map {
    position: absolute;
    inset: 0;
    opacity: .3;
    background-image:
        radial-gradient(circle, rgba(35, 94, 135, .16) 1px, transparent 1.4px),
        linear-gradient(90deg, transparent 49.8%, rgba(16, 63, 96, .04) 50%, transparent 50.2%);
    background-size: 34px 34px, 180px 100%;
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    z-index: -2
}

.about-company-glow {
    position: absolute;
    top: 17%;
    left: 37%;
    width: 420px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(19, 117, 188, .12);
    filter: blur(90px);
    z-index: -1
}

.about-company-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 4vw, 64px);
    align-items: center;
    width: min(100%, 1320px);
    margin-inline: auto
}

.about-company-visual {
    position: relative;
    min-height: 620px
}

.about-company-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    background: #081522;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .42), 0 0 0 10px rgba(255, 255, 255, .018);
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), border-color .4s ease
}

.about-company-visual:hover .about-company-image {
    border-color: rgba(212, 175, 55, .33);
    transform: translateY(-7px)
}

.about-company-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 57% center;
    filter: saturate(.86) contrast(1.04);
    transition: transform 1s cubic-bezier(.2, .7, .2, 1)
}

.about-company-visual:hover .about-company-image img {
    transform: scale(1.035)
}

.about-company-image-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(2, 8, 15, .72)), linear-gradient(120deg, rgba(8, 30, 48, .25), transparent)
}

.about-company-float {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 164px;
    min-height: 108px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
    box-shadow: 0 24px 55px rgba(0, 0, 0, .34);
    backdrop-filter: blur(18px);
    animation: aboutCompanyFloat 5.5s ease-in-out infinite;
    z-index: 3
}

.about-company-float span {
    color: #fff;
    font-size: 116px;
    font-weight: 700
}

.about-company-float small {
    margin-top: 6px;
    color: #aab8c9;
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: capitalize
}

.about-company-float-one { right: 0; top: 65px }
.about-company-float-two { left: -28px; bottom: 44px; animation-delay: -2.7s }

.about-company-content {
    max-width: 690px
}

.about-company-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(212, 175, 55, .3);
    border-radius: 999px;
    background: rgba(212, 175, 55, .07);
    color: #e6ca70;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: capitalize
}

.about-company-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 14px rgba(212, 175, 55, .8)
}

.about-company-content h2 {
    margin: 24px 0 0;
    color: #0a1d32;
    font-size: 40px;
    font-weight: 760;
    line-height: 1.02;
    letter-spacing: -.05em
}

.about-company-content h2 em {
    color: transparent;
    font-style: normal;
    background: linear-gradient(100deg, #0b3153, #187ebc 58%, #b58a16);
    background-clip: text;
    -webkit-background-clip: text
}

.about-company-description {
    max-width: 650px;
    margin: 25px 0 0
}

.about-company-description p {
    margin: 0;
    color: #5e6d7d;
    font-size: 16px;
    line-height: 1.72
}

.about-company-description p+p {
    margin-top: 15px
}

.about-company-description strong {
    color: #0b3656;
    font-weight: 700
}

.about-company-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none
}

.about-company-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 14px;
    border: 1px solid #dfe7ee;
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    color: #24384b;
    box-shadow: 0 10px 28px rgba(18, 53, 78, .06);
    font-size: .9rem;
    transition: transform .3s ease, border-color .3s ease, background .3s ease
}

.about-company-features li:hover {
    border-color: rgba(72, 157, 222, .35);
    background: #f5faff;
    transform: translateY(-3px)
}

.about-company-features i {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(145deg, #176fae, #0a416d);
    color: #fff;
    font-style: normal;
    box-shadow: 0 8px 20px rgba(18, 113, 177, .25)
}

.about-company-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 32px
}

.about-company-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease
}

.about-company-btn:hover { color: #fff; transform: translateY(-3px) }

.about-company-btn-primary {
    background: linear-gradient(115deg, #f18219, #f18219);
    color: #101010;
    box-shadow: 0 16px 35px rgba(212, 175, 55, .2)
}

.about-company-btn-primary:hover { color: #101010; box-shadow: 0 20px 45px rgba(212, 175, 55, .3) }

.about-company-btn-secondary {
    border-color: #cfd9e2;
    background: #fff;
    color: #15344f;
    box-shadow: 0 12px 28px rgba(18, 53, 78, .07);
    backdrop-filter: blur(14px)
}

.about-company-btn-secondary:hover { background: #f2f7fb; color: #15344f }

.about-company-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(100%, 1320px);
    margin: clamp(70px, 8vw, 110px) auto 0;
    overflow: hidden;
    border: 1px solid #dfe7ee;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 -18px 55px rgba(18, 53, 78, .07);
    backdrop-filter: blur(18px)
}

.about-company-stats>div {
    position: relative;
    min-height: 142px;
    padding: 31px;
    border-right: 1px solid #e3eaf0;
    transition: background .3s ease
}

.about-company-stats>div:last-child { border-right: 0 }
.about-company-stats>div:hover { background: #f5f9fc }

.about-company-stats strong {
    display: block;
    color: #0b2e4a;
    font-size: clamp(1.8rem, 2.7vw, 3rem);
    line-height: 1
}

.about-company-stats span {
    display: block;
    margin-top: 12px;
    color: #68798a;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: capitalize
}

.about-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1)
}

.about-reveal.is-visible { opacity: 1; transform: translateY(0) }

@keyframes aboutCompanyFloat {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-12px) }
}

@media(max-width:991.98px) {
    .about-company-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
        max-width: none
    }
    .about-company-visual { min-height: 520px }
    .about-company-image { right: 0 }
    .about-company-content { max-width: none }
    .about-company-stats { grid-template-columns: repeat(2, 1fr) }
    .about-company-stats>div:nth-child(2) { border-right: 0 }
    .about-company-stats>div:nth-child(-n+2) { border-bottom: 1px solid #e3eaf0 }
}

@media(max-width:767.98px) {
    .about-company-container {
        grid-template-columns: 1fr;
        max-width: 620px
    }

    .about-company-visual { min-height: 500px }

}

@media(max-width:575.98px) {
    .about-company-premium { padding-inline: 16px }
    .about-company-visual { min-height: 410px }
    .about-company-image { inset: 0; border-radius: 20px }
    .about-company-float { min-width: 132px; min-height: 88px; padding: 14px }
    .about-company-float-one { right: -5px; top: 25px }
    .about-company-float-two { left: -5px; bottom: 20px }
    .about-company-float span { font-size: 1.35rem }
    .about-company-features { grid-template-columns: 1fr }
    .about-company-actions { flex-direction: column }
    .about-company-btn { width: 100% }
    .about-company-stats { grid-template-columns: 1fr 1fr }
    .about-company-stats>div { min-height: 120px; padding: 23px 18px }
}

@media(prefers-reduced-motion:reduce) {
    .about-company-premium *,
    .about-company-premium *::before,
    .about-company-premium *::after {
        animation: none !important;
        transition-duration: .01ms !important
    }

    .about-reveal { opacity: 1; transform: none }
}

/* Classic-modern History section */
.about-history {
    position: relative;
    padding: clamp(78px, 8vw, 125px) 24px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(rgba(15, 64, 91, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 64, 91, .035) 1px, transparent 1px),
        linear-gradient(145deg, #f9fcfe, #fff 54%, #f6f2e9);
    background-size: 54px 54px, 54px 54px, auto
}

.about-history-orbit {
    position: absolute;
    top: -150px;
    right: -110px;
    width: 420px;
    aspect-ratio: 1;
    border: 1px solid rgba(13, 103, 145, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(13, 103, 145, .025), 0 0 0 96px rgba(181, 138, 22, .02);
    z-index: -1
}

.about-history-container {
    width: min(100%, 1320px);
    margin-inline: auto;
    perspective: 1400px
}

.about-history-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(18, 72, 105, .14);
    border-radius: 26px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 38px 80px rgba(20, 55, 77, .14), 0 8px 24px rgba(20, 55, 77, .06), inset 0 1px #fff;
    transform: rotateX(1.2deg) rotateY(-1deg);
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s ease
}

.about-history-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #d4af37, #0e78aa, #0a3c61)
}

.about-history-card:hover {
    box-shadow: 0 46px 95px rgba(20, 55, 77, .18), 0 10px 28px rgba(20, 55, 77, .08);
    transform: rotateX(0) rotateY(0) translateY(-6px)
}

.about-history-copy {
    position: relative;
    align-self: center;
    padding: clamp(38px, 5vw, 72px);
    transform: translateZ(38px);
    z-index: 2
}

.about-history-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #b08318;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: capitalize
}

.about-history-kicker::before {
    content: "";
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, #0b6f9d, #d4af37)
}

.about-history-copy h2 {
    margin: 14px 0 20px;
    color: #073a5a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px;
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.035em;
    text-transform: capitalize
}

.about-history-copy p {
    max-width: 760px;
    margin: 0;
    color: #536777;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    line-height: 1.85
}

.about-history-copy strong {
    color: #082f4a;
    font-family: inherit;
    font-weight: 700
}

.about-history-visual {
    position: relative;
    min-height: 430px;
    background: #eaf2f5;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%)
}

.about-history-image {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .62), rgba(6, 42, 63, .08)),
        url('../assets/a2.png') center/cover no-repeat;
    filter: saturate(.72) contrast(.96)
}

.about-history-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, transparent 35%, rgba(4, 44, 68, .38))
}

.about-history-year {
    position: absolute;
    right: clamp(20px, 3vw, 42px);
    bottom: clamp(20px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    min-width: 145px;
    padding: 19px 22px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 16px;
    background: rgba(4, 35, 55, .78);
    box-shadow: 0 22px 45px rgba(0, 0, 0, .24);
    backdrop-filter: blur(16px);
    transform: translateZ(55px);
    z-index: 2
}

.about-history-year small {
    color: #c7d5de;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: capitalize
}

.about-history-year strong {
    margin-top: 5px;
    color: #fff;
    font-size: 2rem;
    line-height: 1
}

@media(max-width:991.98px) {
    .about-history-card { grid-template-columns: 1fr minmax(280px, .72fr) }
    .about-history-copy { padding: 42px }
}

@media(max-width:767.98px) {
    .about-history { padding-inline: 16px }
    .about-history-card { grid-template-columns: 1fr; transform: none }
    .about-history-copy { padding: 38px 28px; transform: none }
    .about-history-visual { min-height: 330px; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%) }
}

@media(max-width:480px) {
    .about-history-copy { padding: 34px 22px }
    .about-history-copy p { font-size: .96rem; line-height: 1.72 }
    .about-history-visual { min-height: 285px }
    .about-history-year { min-width: 125px; padding: 15px 18px }
}

@media(prefers-reduced-motion:reduce) {
    .about-history-card { transform: none; transition: none }
}

/* Mission, Vision and Approach */
.about-principles {
    position: relative;
    padding: clamp(85px, 9vw, 140px) 24px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 8% 18%, rgba(27, 122, 165, .09), transparent 27%),
        radial-gradient(circle at 92% 82%, rgba(212, 175, 55, .08), transparent 28%),
        linear-gradient(145deg, #fff, #f7fafc 54%, #fffdf7);
    color: #102b40
}

.about-principles::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(rgba(15, 77, 112, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 77, 112, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    z-index: -2
}

.about-principles-glow {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 520px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(20, 128, 178, .11);
    filter: blur(110px);
    transform: translateX(-50%);
    z-index: -1
}

.about-principles-container {
    width: min(100%, 1320px);
    margin-inline: auto
}

.about-principles-head {
    max-width: 830px;
    margin: 0 auto clamp(48px, 6vw, 78px);
    text-align: center
}

.about-principles-head>span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #e2c25a;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: capitalize
}

.about-principles-head>span::before,
.about-principles-head>span::after {
    content: "";
    width: 30px;
    height: 1px;
    background: rgba(212, 175, 55, .7)
}

.about-principles-head h2 {
    margin: 18px 0 0;
    color: #0a314c;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px;
    line-height: 1.02;
    letter-spacing: -.04em
}

.about-principles-head h2 em {
    color: transparent;
    font-style: normal;
    background: linear-gradient(95deg, #0b4266, #1886ba 55%, #b88b17);
    background-clip: text;
    -webkit-background-clip: text
}

.about-principles-head p {
    max-width: 680px;
    margin: 20px auto 0;
    color: #627587;
    font-size: 1rem;
    line-height: 1.7
}

.about-principles-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 42px);
    perspective: 1700px;
    isolation: isolate
}

.about-principles-grid::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12%;
    right: 12%;
    height: 3px;
    background: linear-gradient(90deg, #f18219, #0e81c2 50%, #f18219);
    opacity: .5;
    transform: translateY(-50%);
    z-index: -1
}

.about-principle-card {
    --principle-accent: #f18219;
    position: relative;
    display: flex;
    min-height: 520px;
    padding: clamp(42px, 4vw, 58px) clamp(25px, 3vw, 38px) 74px;
    overflow: visible;
    flex-direction: column;
    align-items: center;
    border: 2px solid color-mix(in srgb, var(--principle-accent) 78%, white);
    border-radius: 26px;
    background: linear-gradient(155deg, #fff, #fbfcfd 72%, #f4f7f9);
    box-shadow: 0 28px 65px rgba(17, 62, 88, .14), inset 0 0 0 12px #fff, inset 0 0 0 13px rgba(19, 65, 91, .08), inset 0 -18px 32px rgba(12, 48, 70, .035);
    text-align: center;
    transform: rotateX(2deg) rotateY(-1deg) translateZ(0);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, border-color .4s ease
}

.about-principle-card:nth-child(2) { --principle-accent: #0e81c2; transform: rotateX(2deg) translateZ(0) }
.about-principle-card:nth-child(3) { --principle-accent: #f18219; transform: rotateX(2deg) rotateY(1deg) translateZ(0) }

.about-principle-card::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 46%;
    height: 13px;
    border-radius: 2px 2px 7px 7px;
    background: var(--principle-accent);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--principle-accent) 24%, transparent);
    transform: translateX(-50%) translateZ(20px)
}

.about-principle-card::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 38%;
    height: 13px;
    border-radius: 7px 7px 2px 2px;
    background: var(--principle-accent);
    box-shadow: 0 -7px 18px color-mix(in srgb, var(--principle-accent) 20%, transparent);
    transform: translateX(-50%) translateZ(20px)
}

.about-principle-card:hover {
    border-color: var(--principle-accent);
    box-shadow: 0 40px 90px rgba(17, 62, 88, .2), 0 0 38px color-mix(in srgb, var(--principle-accent) 12%, transparent), inset 0 0 0 12px #fff, inset 0 0 0 13px color-mix(in srgb, var(--principle-accent) 18%, transparent);
    transform: rotateX(0) rotateY(0) translateY(-12px) translateZ(34px)
}

.about-principle-number {
    position: absolute;
    right: 0;
    bottom: 27px;
    left: 0;
    color: #102c3f;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    transform: translateZ(22px)
}

.about-principle-icon {
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--principle-accent) 30%, white);
    border-radius: 50%;
    background: color-mix(in srgb, var(--principle-accent) 8%, white);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--principle-accent) 14%, transparent), inset 0 0 0 7px #fff;
    transform: translateZ(34px)
}

.about-principle-icon i {
    font-size: 2rem;
    line-height: 1;
    color: var(--principle-accent);
}

.about-principle-card h3 {
    margin: 26px 0 18px;
    color: var(--principle-accent);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: .035em;
    text-transform: capitalize;
    transform: translateZ(27px)
}

.about-principle-card p {
    position: relative;
    margin: 0;
    color: #627584;
    font-size: .94rem;
    line-height: 1.7;
    transform: translateZ(20px);
    z-index: 1
}

@media(max-width:991.98px) {
    .about-principles-grid { grid-template-columns: 1fr 1fr; max-width: 900px; margin-inline: auto }
    .about-principles-grid::before { display: none }
    .about-principle-card { min-height: 500px }
    .about-principle-card:last-child { grid-column: 1 / -1; width: min(100%, 430px); min-height: auto; margin-inline: auto }
}

@media(max-width:767.98px) {
    .about-principles { padding-inline: 16px }
    .about-principles-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto }
    .about-principle-card,
    .about-principle-card:last-child { grid-column: auto; width: 100%; min-height: auto; transform: none }
}

@media(max-width:480px) {
    .about-principles-head h2 { font-size: 2.45rem }
    .about-principle-card { padding: 39px 22px 68px; border-radius: 21px }
    .about-principle-icon { width: 68px; height: 68px }
    .about-principle-card p { font-size: .91rem; line-height: 1.65 }
}

@media(prefers-reduced-motion:reduce) {
    .about-principle-card { transform: none; transition: none }
}

/* Match the Home page typography system across the complete About page */
.about-page-banner,
.about-company-premium,
.about-history,
.about-principles {
    font-family: "Mulish", sans-serif
}

.about-page-banner :is(h1, h2, h3, h4, h5, h6, strong, b, button, a),
.about-company-premium :is(h1, h2, h3, h4, h5, h6, button, a),
.about-history :is(h1, h2, h3, h4, h5, h6, button, a),
.about-principles :is(h1, h2, h3, h4, h5, h6, button, a),
.about-hero-kicker,
.about-company-badge,
.about-history-kicker,
.about-principles-head>span {
    font-family: "Karla", sans-serif
}

.about-page-banner :is(p, li, small, span),
.about-company-premium :is(p, li, small),
.about-history :is(p, li, small),
.about-principles :is(p, li, small) {
    font-family: "Mulish", sans-serif
}

.about-history-copy h2,
.about-principles-head h2,
.about-principle-number,
.about-principle-icon,
.about-principle-card h3 {
    font-family: "Karla", sans-serif
}

.about-history-copy p,
.about-history-copy strong,
.about-principle-card p {
    font-family: "Mulish", sans-serif
}