:root {
    --about-dark: #021c17;
    --about-deep: #06352a;
    --about-blue: #081e3f;
    --about-green: #50df69;
    --about-gold: #ffc400;
    --about-white: #fff;
    --about-light: #eef4ef;
    --about-text: #182820;
    --about-muted: #66766e;
    --about-border: rgba(255,255,255,.15);
    --about-shadow: 0 25px 70px rgba(0,35,25,.16)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--about-text);
    background: var(--about-light);
    font-family: Arial,"Helvetica Neue",sans-serif;
    overflow-x: hidden
}

    body.about-menu-open {
        overflow: hidden
    }

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

.about-container {
    width: min(1180px,calc(100% - 40px));
    margin: 0 auto
}

.about-top-strip {
    position: relative;
    z-index: 60;
    color: #d8ebe2;
    background: #011712;
    font-size: 12px
}

.about-top-strip-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

    .about-top-strip-inner > span {
        color: var(--about-green);
        font-weight: 700
    }

    .about-top-strip-inner > div {
        display: flex;
        gap: 25px
    }

.about-top-strip a:hover {
    color: var(--about-gold)
}

.about-header {
    position: absolute;
    z-index: 50;
    top: 38px;
    left: 0;
    width: 100%;
    border-bottom: 1px solid var(--about-border);
    transition: background .3s,box-shadow .3s
}

    .about-header.about-header-fixed {
        position: fixed;
        top: 0;
        background: rgba(2,28,23,.96);
        box-shadow: 0 12px 35px rgba(0,0,0,.28);
        backdrop-filter: blur(12px)
    }

.about-navbar {
    height: 92px;
    display: flex;
    align-items: center;
    gap: 34px
}

.about-brand {
    margin-right: auto;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 21px;
    font-weight: 800
}

    .about-brand img {
        width: 82px;
        height: 65px;
        padding: 3px;
        object-fit: contain;
        background: #fff;
        border-radius: 10px
    }

    .about-brand > span {
        margin-left: 10px
    }

    .about-brand small {
        display: block;
        color: var(--about-green);
        font-size: 8px;
        letter-spacing: 1.5px;
        text-transform: uppercase
    }

.about-desktop-menu {
    display: flex;
    gap: 31px
}

    .about-desktop-menu a {
        position: relative;
        color: rgba(255,255,255,.76);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase
    }

        .about-desktop-menu a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -11px;
            width: 0;
            height: 2px;
            background: var(--about-gold);
            transition: .25s
        }

        .about-desktop-menu a:hover, .about-desktop-menu .about-active {
            color: #fff
        }

            .about-desktop-menu a:hover::after, .about-desktop-menu .about-active::after {
                width: 100%
            }

.about-nav-quote, .about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 999px;
    transition: transform .25s,box-shadow .25s
}

.about-nav-quote {
    padding: 14px 20px;
    color: #05261d;
    background: var(--about-gold)
}

    .about-nav-quote:hover, .about-button:hover {
        transform: translateY(-3px)
    }

.about-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--about-border);
    border-radius: 11px;
    font-size: 21px
}

.about-mobile-menu {
    display: none
}

.about-hero {
    position: relative;
    min-height: 830px;
    display: flex;
    align-items: center;
    color: #fff;
    background: var(--about-dark);
    overflow: hidden
}

.about-hero-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    animation: aboutHeroZoom 18s ease-in-out infinite alternate
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(1,23,18,.97),rgba(2,40,29,.89) 43%,rgba(2,28,23,.38) 72%),linear-gradient(0deg,rgba(2,25,20,.96),transparent 45%)
}

.about-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: .17;
    background-image: radial-gradient(rgba(91,255,112,.9) 1px,transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg,#000,transparent 75%)
}

.about-hero-layout {
    position: relative;
    z-index: 2;
    padding-top: 95px;
    display: grid;
    grid-template-columns: 1.2fr .62fr;
    gap: 95px;
    align-items: center
}

.about-eyebrow, .about-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--about-gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase
}

    .about-eyebrow::before {
        content: "";
        width: 40px;
        height: 1px;
        background: var(--about-gold)
    }

.about-hero h1 {
    max-width: 760px;
    margin: 24px 0;
    font-size: clamp(58px,6.2vw,92px);
    line-height: .98;
    letter-spacing: -5px
}

    .about-hero h1 em, .about-story-copy h2 em, .about-heading h2 em, .about-contact h2 em {
        color: var(--about-green);
        font-style: normal
    }

.about-hero-content > p {
    max-width: 670px;
    margin: 0;
    color: rgba(255,255,255,.74);
    font-size: 17px;
    line-height: 1.8
}

.about-hero-buttons {
    margin-top: 35px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.about-button {
    min-height: 53px;
    padding: 0 25px
}

.about-button-gold {
    color: #06271e;
    background: linear-gradient(110deg,var(--about-gold),#ffe37a);
    box-shadow: 0 14px 30px rgba(255,196,0,.18)
}

.about-button-outline {
    color: #fff;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px)
}

.about-authority-card {
    padding: 29px;
    background: linear-gradient(145deg,rgba(9,86,54,.77),rgba(4,29,28,.85));
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 25px;
    box-shadow: 0 30px 70px rgba(0,0,0,.32);
    backdrop-filter: blur(15px)
}

.about-authority-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--about-green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px
}

    .about-authority-top b {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        color: #05271e;
        background: var(--about-gold);
        border-radius: 12px;
        font-size: 20px
    }

.about-authority-card h2 {
    margin: 27px 0 5px;
    font-size: 25px
}

.about-authority-card > p {
    margin: 0;
    color: rgba(255,255,255,.57);
    font-size: 12px
}

.about-authority-card > strong {
    margin-top: 20px;
    padding: 14px;
    display: block;
    color: var(--about-gold);
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    letter-spacing: 1px
}

.about-authority-stats {
    margin-top: 20px;
    padding-top: 17px;
    display: flex;
    gap: 28px;
    border-top: 1px solid var(--about-border)
}

    .about-authority-stats span {
        color: rgba(255,255,255,.6);
        font-size: 9px;
        text-transform: uppercase
    }

    .about-authority-stats b {
        display: block;
        color: #fff;
        font-size: 18px
    }

.about-hero-stats {
    position: absolute;
    z-index: 3;
    bottom: 0;
    width: 100%;
    background: rgba(2,28,22,.85);
    border-top: 1px solid var(--about-border);
    backdrop-filter: blur(12px)
}

.about-hero-stat-grid {
    min-height: 96px;
    display: grid;
    grid-template-columns: repeat(3,1fr)
}

    .about-hero-stat-grid > div {
        padding: 0 25px;
        display: flex;
        align-items: center;
        gap: 15px;
        border-right: 1px solid var(--about-border)
    }

        .about-hero-stat-grid > div:last-child {
            border: 0
        }

.about-stat-icon {
    color: var(--about-gold);
    font-size: 25px
}

.about-hero-stat-grid div > span:last-child {
    color: rgba(255,255,255,.58);
    font-size: 9px;
    text-transform: uppercase
}

.about-hero-stat-grid b {
    display: block;
    color: #fff;
    font-size: 15px;
    text-transform: none
}

.about-section {
    padding: 120px 0
}

.about-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center
}

.about-story-media {
    position: relative;
    min-height: 610px
}

    .about-story-media > img {
        width: 92%;
        height: 585px;
        object-fit: cover;
        border-radius: 5px 95px 5px 5px;
        box-shadow: var(--about-shadow)
    }

.about-founded-card {
    position: absolute;
    top: 35px;
    left: -25px;
    width: 145px;
    padding: 21px;
    color: #05281f;
    background: var(--about-gold);
    border-radius: 4px 24px 4px 4px;
    box-shadow: 0 16px 30px rgba(30,30,0,.18)
}

    .about-founded-card small, .about-founded-card span {
        display: block;
        font-size: 9px
    }

    .about-founded-card strong {
        display: block;
        font-size: 40px;
        line-height: 1.15
    }

.about-company-number {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    background: var(--about-deep);
    border: 5px solid var(--about-light);
    border-radius: 17px
}

    .about-company-number .about-symbol {
        color: var(--about-gold);
        font-size: 28px
    }

    .about-company-number span:last-child {
        font-size: 9px;
        text-transform: uppercase
    }

    .about-company-number b {
        display: block;
        font-size: 13px
    }

.about-story-copy h2, .about-heading h2 {
    margin: 15px 0 22px;
    color: var(--about-deep);
    font-size: clamp(39px,4vw,59px);
    line-height: 1.05;
    letter-spacing: -2.6px
}

.about-story-copy p, .about-heading p {
    color: var(--about-muted);
    font-size: 14px;
    line-height: 1.85
}

.about-story-copy .about-lead {
    color: #173b30;
    font-size: 18px;
    font-weight: 600
}

.about-feature-row {
    margin-top: 30px;
    padding-top: 25px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 13px;
    border-top: 1px solid #d8e3dc
}

    .about-feature-row > div {
        display: grid;
        grid-template-columns: 30px 1fr
    }

    .about-feature-row span {
        grid-row: 1/3;
        color: var(--about-deep);
        font-size: 22px
    }

    .about-feature-row b, .about-feature-row small {
        display: block
    }

    .about-feature-row b {
        font-size: 11px
    }

    .about-feature-row small {
        color: #859189;
        font-size: 9px
    }

.about-credentials {
    background: #e6eee9
}

.about-heading {
    max-width: 770px;
    margin: 0 auto 55px;
    text-align: center
}

    .about-heading > p {
        max-width: 620px;
        margin: auto
    }

.about-three-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 19px
}

.about-credential-card {
    position: relative;
    min-height: 300px;
    padding: 38px 32px;
    background: #fff;
    border: 1px solid #dbe6df;
    border-radius: 21px;
    box-shadow: 0 15px 45px rgba(0,42,30,.07);
    overflow: hidden;
    transition: .35s
}

    .about-credential-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--about-shadow)
    }

.about-card-number {
    position: absolute;
    right: 25px;
    top: 20px;
    color: #e9efeb;
    font-size: 45px;
    font-weight: 800
}

.about-card-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: var(--about-deep);
    background: #e8f7ec;
    border-radius: 17px;
    font-size: 25px
}

.about-credential-card small {
    margin-top: 28px;
    display: block;
    color: #89978f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px
}

.about-credential-card h3 {
    margin: 9px 0;
    color: var(--about-deep);
    font-size: 22px
}

.about-credential-card p {
    color: var(--about-muted);
    font-size: 12px;
    line-height: 1.7
}

.about-featured-card {
    color: #fff;
    background: linear-gradient(145deg,#087045,#043c31);
    border-color: transparent
}

    .about-featured-card .about-card-icon {
        background: var(--about-gold)
    }

    .about-featured-card h3 {
        color: #fff
    }

    .about-featured-card small, .about-featured-card p {
        color: rgba(255,255,255,.65)
    }

    .about-featured-card .about-card-number {
        color: rgba(255,255,255,.09)
    }

.about-purpose {
    color: #fff;
    background: radial-gradient(circle at 10% 10%,rgba(47,216,88,.18),transparent 27%),radial-gradient(circle at 90% 90%,rgba(41,86,190,.2),transparent 30%),#031f1a
}

.about-heading-light h2 {
    color: #fff
}

.about-heading-light p {
    color: rgba(255,255,255,.62)
}

.about-purpose-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 20px
}

.about-purpose-card {
    position: relative;
    min-height: 350px;
    padding: 42px;
    background: linear-gradient(140deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
    border: 1px solid var(--about-border);
    border-radius: 24px;
    overflow: hidden
}

    .about-purpose-card::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg,var(--about-green),transparent)
    }

.about-mission-card::after {
    background: linear-gradient(90deg,var(--about-gold),transparent)
}

.about-purpose-icon {
    width: 61px;
    height: 61px;
    display: grid;
    place-items: center;
    color: #05281e;
    background: var(--about-green);
    border-radius: 19px;
    font-size: 27px
}

.about-mission-card .about-purpose-icon {
    background: var(--about-gold)
}

.about-purpose-card small {
    margin-top: 28px;
    display: block;
    color: var(--about-gold);
    font-weight: 800;
    letter-spacing: 1.5px
}

.about-purpose-card h3 {
    margin: 10px 0;
    font-size: 27px
}

.about-purpose-card p {
    color: rgba(255,255,255,.63);
    font-size: 13px;
    line-height: 1.8
}

.about-values-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    background: rgba(255,255,255,.045);
    border: 1px solid var(--about-border);
    border-radius: 22px;
    overflow: hidden
}

.about-value-card {
    padding: 31px;
    display: flex;
    gap: 18px;
    border-right: 1px solid var(--about-border)
}

    .about-value-card:last-child {
        border: 0
    }

    .about-value-card > span {
        color: var(--about-gold);
        font-size: 24px
    }

    .about-value-card small {
        color: var(--about-green);
        font-weight: 800
    }

    .about-value-card h3 {
        margin: 5px 0 8px
    }

    .about-value-card p {
        margin: 0;
        color: rgba(255,255,255,.55);
        font-size: 11px;
        line-height: 1.7
    }

.about-engineering-layout {
    grid-template-columns: .9fr 1.1fr
}

.about-check-list {
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    list-style: none
}

    .about-check-list li {
        padding: 14px;
        color: #405149;
        background: #fff;
        border: 1px solid #dde8e1;
        border-radius: 11px;
        font-size: 11px;
        font-weight: 700;
        box-shadow: 0 9px 20px rgba(0,40,25,.04)
    }

    .about-check-list span {
        width: 22px;
        height: 22px;
        margin-right: 7px;
        display: inline-grid;
        place-items: center;
        color: #fff;
        background: #087247;
        border-radius: 50%;
        font-size: 9px
    }

.about-engineering-media {
    position: relative
}

    .about-engineering-media > img {
        width: 100%;
        height: 600px;
        object-fit: cover;
        border-radius: 80px 5px 5px 5px;
        box-shadow: var(--about-shadow)
    }

    .about-engineering-media > div {
        position: absolute;
        right: -20px;
        bottom: 30px;
        padding: 18px 22px;
        display: flex;
        gap: 14px;
        align-items: center;
        color: #fff;
        background: var(--about-blue);
        border: 5px solid var(--about-light);
        border-radius: 17px
    }

        .about-engineering-media > div > span {
            color: var(--about-gold);
            font-size: 27px
        }

    .about-engineering-media p {
        margin: 0;
        font-size: 9px
    }

    .about-engineering-media b {
        display: block;
        font-size: 13px
    }

.about-management {
    color: #fff;
    background: linear-gradient(145deg,#071b39,#032e27)
}

.about-leader-list {
    display: grid;
    gap: 14px
}

.about-leader-card {
    padding: 25px;
    display: grid;
    grid-template-columns: 70px 250px 1fr;
    gap: 20px;
    align-items: center;
    background: rgba(255,255,255,.065);
    border: 1px solid var(--about-border);
    border-radius: 18px;
    transition: .3s
}

    .about-leader-card:hover {
        transform: translateX(7px);
        border-color: rgba(255,196,0,.55)
    }

.about-initials {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    color: #06271f;
    background: linear-gradient(145deg,var(--about-gold),#fff0a4);
    border-radius: 17px;
    font-weight: 800
}

.about-leader-name small {
    color: var(--about-green);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px
}

.about-leader-name h3 {
    margin: 5px 0;
    font-size: 16px
}

.about-leader-card p {
    margin: 0;
    color: rgba(255,255,255,.6);
    font-size: 11px;
    line-height: 1.75
}

.about-admin-team {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid var(--about-border)
}

    .about-admin-team > div {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 10px
    }

    .about-admin-team span {
        padding: 16px;
        color: rgba(255,255,255,.48);
        background: rgba(255,255,255,.045);
        border-radius: 10px;
        font-size: 9px
    }

    .about-admin-team b {
        display: block;
        margin-bottom: 6px;
        color: #fff;
        font-size: 10px
    }

.about-contact {
    background: #e6eee9
}

.about-contact-panel {
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    align-items: center;
    color: #fff;
    background: radial-gradient(circle at 100% 0,rgba(62,224,95,.2),transparent 30%),linear-gradient(125deg,#042c23,#081f43);
    border-radius: 30px;
    box-shadow: var(--about-shadow)
}

.about-contact h2 {
    margin: 14px 0;
    font-size: 48px;
    line-height: 1.05
}

.about-contact-intro > p {
    color: rgba(255,255,255,.63);
    font-size: 13px;
    line-height: 1.8
}

.about-contact-list {
    display: grid;
    gap: 11px
}

    .about-contact-list a {
        padding: 16px;
        display: flex;
        gap: 15px;
        align-items: center;
        background: rgba(255,255,255,.075);
        border: 1px solid var(--about-border);
        border-radius: 13px;
        transition: .25s
    }

        .about-contact-list a:hover {
            background: rgba(255,255,255,.12);
            transform: translateX(5px)
        }

        .about-contact-list a > span {
            width: 44px;
            height: 44px;
            display: grid;
            flex: 0 0 auto;
            place-items: center;
            color: #05251c;
            background: var(--about-gold);
            border-radius: 12px;
            font-size: 20px
        }

    .about-contact-list p {
        margin: 0
    }

    .about-contact-list small, .about-contact-list b {
        display: block
    }

    .about-contact-list small {
        color: rgba(255,255,255,.45);
        font-size: 8px
    }

    .about-contact-list b {
        margin-top: 4px;
        font-size: 11px
    }

.about-footer {
    color: #b8cac2;
    background: #011713
}

.about-footer-grid {
    padding: 70px 0;
    display: grid;
    grid-template-columns: 1.8fr repeat(3,1fr);
    gap: 50px
}

.about-footer-brand img {
    width: 120px;
    padding: 5px;
    background: #fff;
    border-radius: 10px
}

.about-footer-brand h3 {
    margin: 16px 0 8px;
    color: #fff
}

.about-footer p {
    max-width: 330px;
    font-size: 11px;
    line-height: 1.8
}

.about-footer h4 {
    margin: 0 0 18px;
    color: var(--about-gold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px
}

.about-footer-grid > div:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.about-footer a, .about-footer span {
    font-size: 10px
}

    .about-footer a:hover {
        color: var(--about-green)
    }

.about-footer-bottom {
    padding: 19px 0;
    border-top: 1px solid rgba(255,255,255,.09)
}

    .about-footer-bottom > div {
        display: flex;
        justify-content: space-between
    }

.about-back-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40;
    width: 47px;
    height: 47px;
    color: #06271e;
    background: var(--about-gold);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: .3s
}

    .about-back-top.about-show {
        opacity: 1;
        visibility: visible;
        transform: none
    }

.about-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s ease,transform .75s ease
}

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

@keyframes aboutHeroZoom {
    to {
        transform: scale(1.09) translateX(-1.5%)
    }
}

@media(max-width:1000px) {
    .about-desktop-menu, .about-nav-quote {
        display: none
    }

    .about-menu-button {
        display: block
    }

    .about-mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 80;
        width: min(350px,88vw);
        height: 100vh;
        padding: 105px 35px;
        display: flex;
        flex-direction: column;
        color: #fff;
        background: #032a22;
        box-shadow: -20px 0 50px rgba(0,0,0,.3);
        transition: .35s
    }

        .about-mobile-menu.about-open {
            right: 0
        }

        .about-mobile-menu a {
            padding: 17px 0;
            border-bottom: 1px solid var(--about-border);
            font-weight: 700
        }

    .about-hero-layout {
        grid-template-columns: 1fr
    }

    .about-authority-card {
        display: none
    }

    .about-two-columns, .about-engineering-layout {
        grid-template-columns: 1fr;
        gap: 60px
    }

    .about-three-cards {
        grid-template-columns: 1fr 1fr
    }

        .about-three-cards article:last-child {
            grid-column: 1/-1
        }

    .about-purpose-grid {
        grid-template-columns: 1fr
    }

    .about-admin-team > div {
        grid-template-columns: repeat(3,1fr)
    }

    .about-contact-panel {
        grid-template-columns: 1fr
    }

    .about-footer-grid {
        grid-template-columns: 2fr 1fr 1fr
    }

        .about-footer-grid > div:last-child {
            grid-column: 2/4
        }

    .about-leader-card {
        grid-template-columns: 70px 1fr
    }

        .about-leader-card > p {
            grid-column: 2
        }
}

@media(max-width:700px) {
    .about-container {
        width: min(100% - 28px,1180px)
    }

    .about-top-strip {
        display: none
    }

    .about-header {
        top: 0
    }

    .about-navbar {
        height: 76px
    }

    .about-brand img {
        width: 68px;
        height: 54px
    }

    .about-brand > span {
        display: none
    }

    .about-hero {
        min-height: 790px;
        align-items: flex-end;
        padding-bottom: 120px
    }

    .about-hero-picture {
        object-position: 63% center
    }

    .about-hero-overlay {
        background: linear-gradient(180deg,rgba(1,23,18,.25),rgba(1,23,18,.75) 40%,#011d17 75%)
    }

    .about-hero-layout {
        padding-top: 150px
    }

    .about-hero h1 {
        font-size: 48px;
        letter-spacing: -3px
    }

    .about-hero-content > p {
        font-size: 14px
    }

    .about-hero-buttons {
        display: grid
    }

    .about-button {
        width: 100%
    }

    .about-hero-stat-grid {
        grid-template-columns: 1fr 1fr
    }

        .about-hero-stat-grid > div {
            padding: 14px 8px
        }

            .about-hero-stat-grid > div:last-child {
                display: none
            }

    .about-stat-icon {
        font-size: 18px
    }

    .about-hero-stat-grid b {
        font-size: 11px
    }

    .about-section {
        padding: 80px 0
    }

    .about-story-media {
        min-height: 475px
    }

        .about-story-media > img {
            width: 100%;
            height: 455px;
            border-radius: 4px 50px 4px 4px
        }

    .about-founded-card {
        left: -7px
    }

    .about-feature-row {
        grid-template-columns: 1fr
    }

    .about-story-copy h2, .about-heading h2 {
        font-size: 38px
    }

    .about-three-cards, .about-values-grid {
        grid-template-columns: 1fr
    }

        .about-three-cards article:last-child {
            grid-column: auto
        }

    .about-value-card {
        border-right: 0;
        border-bottom: 1px solid var(--about-border)
    }

    .about-check-list {
        grid-template-columns: 1fr
    }

    .about-engineering-media > img {
        height: 430px;
        border-radius: 45px 5px 5px
    }

    .about-engineering-media > div {
        right: 5px
    }

    .about-purpose-card {
        padding: 30px
    }

    .about-leader-card {
        grid-template-columns: 55px 1fr;
        padding: 20px
    }

    .about-initials {
        width: 52px;
        height: 52px
    }

    .about-leader-card > p {
        grid-column: 1/-1
    }

    .about-admin-team > div {
        grid-template-columns: 1fr 1fr
    }

    .about-contact-panel {
        padding: 35px 22px;
        gap: 35px
    }

    .about-contact h2 {
        font-size: 38px
    }

    .about-contact-list b {
        overflow-wrap: anywhere
    }

    .about-footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .about-footer-brand {
        grid-column: 1/-1
    }

    .about-footer-grid > div:last-child {
        grid-column: auto
    }

    .about-footer-bottom > div {
        flex-direction: column;
        gap: 8px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .about-hero-picture {
        animation: none
    }

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