:root {
    --navy: #092d49;
    --navy-2: #10466e;
    --blue: #1c79b6;
    --cyan: #1c79b6;
    --orange: #e97e1e;
    --brand-primary: #1c79b6;
    --brand-secondary: #e97e1e;
    --brand-dark: #092d49;
    --brand-light: #eef6fb;
    --text: #173147;
    --muted: #657786;
    --light: #f3f8fb;
    --white: #fff
}

/* Final About hero overrides (kept last to beat legacy banner rules) */
.about-page-banner {
    position: relative;
    min-height: 560px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: #f7f5ef;
    text-align: left
}

.about-page-banner .about-banner-media {
    position: absolute;
    inset: 0 0 auto auto;
    width: 69%;
    height: 88%;
    background: linear-gradient(rgba(5, 35, 35, .05), rgba(5, 35, 35, .05)), url('../assets/a1.jpeg') center/cover no-repeat;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 6% 53%);
    z-index: -3
}

.about-hero-green-shape {
    position: absolute;
    top: 7%;
    left: -10%;
    width: 65%;
    height: 105%;
    border: 10px solid #fff;
    border-radius: 0 52% 48% 0 / 0 58% 46% 0;
    background: linear-gradient(145deg, #053e31 0%, #064b3a 54%, #075943 100%);
    box-shadow: inset 0 13px 0 rgba(39, 118, 91, .48), 16px 20px 50px rgba(4, 35, 31, .2);
    transform: rotate(-1.5deg);
    z-index: -1
}

.about-page-banner .container {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    z-index: 2
}

.about-page-banner .about-banner-content {
    width: min(42%, 520px);
    max-width: none;
    margin: 22px 0 0;
    padding-left: clamp(8px, 2vw, 30px)
}

.about-hero-kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: #9ee3c7;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: capitalize
}

.about-page-banner .about-banner-content h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 950;
    line-height: .82;
    letter-spacing: -.055em;
    text-transform: capitalize;
    -webkit-text-stroke: 2px #c39432;
    paint-order: stroke fill;
    text-shadow: 0 6px 0 #163e34, 0 18px 30px rgba(0, 0, 0, .3)
}

.about-page-banner .about-banner-content p {
    max-width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.94rem, 1.3vw, 1.06rem);
    line-height: 1.7
}

.about-hero-seal {
    position: absolute;
    left: 56%;
    bottom: -76px;
    display: grid;
    width: 172px;
    aspect-ratio: 1;
    place-items: start center;
    padding-top: 37px;
    border: 9px solid #fff;
    border-radius: 50%;
    background: #087052;
    box-shadow: 0 -8px 24px rgba(2, 40, 31, .2);
    z-index: 3
}

.about-hero-seal span {
    color: #fff;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .16em
}

@media(max-width:991.98px) {
    .about-page-banner,
    .about-page-banner .container {
        min-height: 540px
    }

    .about-page-banner {
        padding: 0;
        text-align: left
    }

    .about-page-banner .about-banner-media {
        width: 72%;
        height: 78%
    }

    .about-hero-green-shape {
        left: -18%;
        width: 76%
    }

    .about-page-banner .about-banner-content {
        width: 49%;
        margin: 12px 0 0;
        text-align: left
    }

    .about-hero-seal {
        left: 61%;
        width: 145px;
        bottom: -67px
    }
}

@media(max-width:767.98px) {
    .about-page-banner {
        min-height: 680px;
        padding: 0
    }

    .about-page-banner .about-banner-media {
        inset: 0 0 auto;
        width: 100%;
        height: 47%;
        clip-path: none;
        background-position: center 28%
    }

    .about-hero-green-shape {
        top: 39%;
        left: -8%;
        width: 116%;
        height: 67%;
        border-radius: 50% 50% 0 0 / 18% 18% 0 0;
        transform: none;
        box-shadow: inset 0 10px 0 rgba(39, 118, 91, .48), 0 -12px 35px rgba(4, 35, 31, .2)
    }

    .about-page-banner .container {
        display: flex;
        align-items: flex-end;
        min-height: 680px;
        padding-bottom: 62px
    }

    .about-page-banner .about-banner-content {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        padding: 0 16px;
        text-align: center
    }

    .about-page-banner .about-banner-content h1 {
        margin-bottom: 16px;
        font-size: clamp(3.5rem, 17vw, 5.4rem);
        line-height: .86
    }

    .about-page-banner .about-banner-content p {
        margin-inline: auto;
        line-height: 1.6
    }

    .about-hero-seal {
        display: none
    }
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    font-family: 'Manrope', sans-serif;
    color: var(--text);
    overflow-x: hidden;
    background: #fff
}

a {
    text-decoration: none
}

p {
    color: var(--muted);
    line-height: 1.8
}

h1,
h2,
h3 {
    font-weight: 700;
    letter-spacing: -.035em
}

.section-pad {
    padding: 100px 0
}

.navbar {
    padding: 10px 0;
    transition: .3s;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 30px rgba(5, 29, 48, .08)
}

.navbar.scrolled {
    padding: 5px 0
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 1rem;
    padding: 0
}

.navbar-brand img {
    width: 75px;
    height: 75px;
    object-fit: contain
}

.brand-name {
    display: flex;
    flex-direction: column;
    min-width: max-content;
    color: #db6e07;
    font-family: "Karla", sans-serif;
    line-height: 1.05
}

.brand-name strong {
    display: block;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    text-transform: none;
    white-space: nowrap
}

.brand-name small {
    display: block;
    margin-top: 4px;
    color: #0e81c2;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.15;
    white-space: nowrap;
}

@media (max-width: 1399.98px) and (min-width: 992px) {
    .navbar-brand {
        gap: 7px;
        margin-right: .5rem
    }

    .navbar-brand img {
        width: 75px;
        height: 75px
    }

    .brand-name strong {
        font-size: 34px
    }

    .brand-name small {
        font-size: 17px
    }

    .nav-link {
        font-size: 14px;
        padding-inline: .55rem !important
    }
}

.nav-link {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy) !important;
    padding: 16px .8rem !important;
    position: relative
}

.nav-link:after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    right: 50%;
    height: 2px;
    background: var(--orange);
    transition: .3s
}

.nav-link:hover:after,
.nav-link.active:after {
    left: .8rem;
    right: .8rem
}

.btn {
    font-weight: 700;
    border-radius: 9px;
    padding: 16px 1.25rem
}

.btn-brand {
    color: #fff !important;
    border: 0;
    background: linear-gradient(135deg, var(--orange), #ffad38);
    box-shadow: 0 10px 25px rgba(242, 138, 23, .27);
    transition: .3s
}

.btn-brand:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(242, 138, 23, .4)
}

.hero {
    min-height: 780px;
    padding: 140px 0 70px;
    background: #061725;
    color: #fff;
    position: relative;
    overflow: hidden
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(2, 17, 28, .92) 0%, rgba(4, 28, 44, .76) 52%, rgba(5, 33, 50, .35) 100%);
    box-shadow: inset 0 -120px 120px rgba(2, 17, 28, .3)
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    filter: saturate(.85) contrast(1.08)
}

.hero>.container {
    z-index: 3
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: linear-gradient(rgba(71, 184, 213, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(71, 184, 213, .08) 1px, transparent 1px);
    background-size: 42px 42px;
    transform: perspective(500px) rotateX(62deg) scale(1.5);
    transform-origin: center bottom;
    opacity: .4
}

.orb {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    filter: blur(5px);
    animation: drift 7s ease-in-out infinite
}

.orb-one {
    width: 260px;
    height: 260px;
    border: 1px solid rgba(56, 185, 210, .25);
    right: 7%;
    top: 18%
}

.orb-two {
    width: 80px;
    height: 80px;
    background: rgba(242, 138, 23, .1);
    left: 6%;
    bottom: 12%;
    animation-delay: -3s
}

@keyframes drift {
    50% {
        transform: translateY(-22px) rotate(20deg)
    }
}

.eyebrow,
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: capitalize;
    letter-spacing: .17em;
    font-size: .74rem;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 18px
}

.hero h1 {
    font-size: ;
    line-height: 1.03;
    max-width: 850px;
    text-shadow: 0 5px 30px rgba(0, 0, 0, .28)
}

.hero h1 span {
    background: linear-gradient(90deg, #55d1e6, #1b91c5);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.hero-copy {
    font-size: 1.08rem;
    color: #d3e2ea;
    max-width: 690px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35)
}

.hero-stats strong {
    display: block;
    font-size: 1.65rem;
    color: #fff
}

.hero-stats span {
    font-size: 16px;
    color: #b4c8d3;
    text-transform: capitalize;
    letter-spacing: .08em
}

.geo-scene {
    height: 470px;
    position: relative;
    perspective: 1000px
}

.core-card {
    position: absolute;
    width: 290px;
    height: 310px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(-8deg) rotateX(5deg);
    background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 26px;
    backdrop-filter: blur(10px);
    box-shadow: 30px 35px 60px rgba(0, 0, 0, .35), inset 0 0 45px rgba(55, 190, 215, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: cardFloat 5s ease-in-out infinite
}

.core-card img {
    width: 220px;
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .3))
}

.core-card small {
    color: #a9c4d5;
    margin-top: 22px
}

.pulse-line {
    width: 70%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    margin-top: 18px;
    animation: pulse 2s infinite
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 18px var(--cyan)
    }
}

@keyframes cardFloat {
    50% {
        transform: translate(-50%, -54%) rotateY(5deg) rotateX(1deg)
    }
}

.geo-ring {
    position: absolute;
    border: 1px solid rgba(57, 192, 216, .28);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(70deg);
    animation: spin 12s linear infinite
}

.ring-a {
    width: 440px;
    height: 440px
}

.ring-b {
    width: 340px;
    height: 340px;
    animation-direction: reverse;
    animation-duration: 9s
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg)
    }
}

.float-tag {
    position: absolute;
    padding: 10px 14px;
    background: #fff;
    color: var(--navy);
    font-size: .8rem;
    font-weight: 700;
    border-radius: 9px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
    animation: drift 4s ease-in-out infinite
}

.float-tag i {
    color: var(--orange)
}

.tag-one {
    left: 0;
    top: 24%
}

.tag-two {
    right: -5%;
    bottom: 23%;
    animation-delay: -2s
}

h2 {
    font-size: clamp(2.1rem, 4vw, 3.35rem);
    line-height: 1.12
}

.image-panel {
    min-height: 430px;
    border-radius: 24px;
    padding: 12px;
    background: linear-gradient(135deg, var(--blue), var(--cyan), var(--orange));
    box-shadow: 0 30px 60px rgba(10, 56, 85, .18);
    position: relative
}

.blueprint {
    height: 406px;
    border-radius: 17px;
    background-color: #08263b;
    background-image: linear-gradient(rgba(58, 177, 204, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 177, 204, .1) 1px, transparent 1px);
    background-size: 25px 25px;
    color: #62c8dc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.blueprint i {
    font-size: 7rem
}

.blueprint span {
    text-align: center;
    font-weight: 700;
    letter-spacing: .25em;
    font-size: .75rem
}

.experience-badge {
    position: absolute;
    right: -18px;
    bottom: 30px;
    background: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(5, 27, 44, .18);
    font-size: .8rem
}

.experience-badge strong {
    font-size: 1.6rem;
    color: var(--orange);
    display: block
}

.check-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 25px 0
}

.check-grid span {
    font-weight: 700;
    font-size: .9rem
}

.check-grid i {
    color: var(--blue);
    margin-right: 7px
}

.text-link {
    font-weight: 700;
    color: var(--blue)
}

.section-dark {
    background: var(--light);
    position: relative
}

.section-heading {
    max-width: 720px
}

.service-card {
    height: 100%;
    padding: 32px;
    border-radius: 17px;
    background: #fff;
    border: 1px solid #e0ebf0;
    box-shadow: 0 13px 30px rgba(8, 39, 61, .06);
    position: relative;
    overflow: hidden;
    transition: .4s;
    transform-style: preserve-3d
}

.service-card:before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(120deg, transparent 30%, rgba(48, 186, 212, .35), transparent 70%);
    transform: translateX(-100%);
    transition: .7s
}

.service-card:hover:before {
    transform: translateX(100%)
}

.service-card:hover {
    transform: translateY(-10px) rotateX(2deg);
    box-shadow: 0 25px 50px rgba(9, 54, 81, .14);
    border-color: #86cddd
}

.card-number {
    position: absolute;
    right: 22px;
    top: 18px;
    color: #dce8ed;
    font-size: 2rem;
    font-weight: 700
}

.icon-box {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, #e6f6fa, #fff);
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    box-shadow: 0 10px 25px rgba(12, 127, 178, .13);
    margin-bottom: 25px
}

.service-card h3,
.programme-card h3 {
    font-size: 1.18rem
}

.service-card p {
    font-size: 16px
}

.service-card>a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--light);
    color: var(--blue);
    transition: .3s
}

.service-card:hover>a {
    background: var(--orange);
    color: #fff;
    transform: rotate(-35deg)
}

.programme-card {
    height: 100%;
    padding: 35px;
    border: 1px solid #dbe7ed;
    border-radius: 18px;
    position: relative;
    transition: .35s;
    box-shadow: 0 10px 30px rgba(7, 41, 64, .05)
}

.programme-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 45px rgba(7, 41, 64, .12)
}

.programme-card>i {
    font-size: 2.1rem;
    color: var(--blue);
    display: block;
    margin-bottom: 22px
}

.programme-card>span:not(.popular) {
    font-size: 16px;
    color: var(--orange);
    text-transform: capitalize;
    font-weight: 700;
    letter-spacing: .15em
}

.programme-card h3 {
    font-size: 1.35rem;
    margin-top: 10px
}

.programme-card a {
    font-size: .85rem;
    font-weight: 700;
    color: var(--blue)
}

.programme-card.featured {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    transform: translateY(-12px)
}

.programme-card.featured:hover {
    transform: translateY(-18px)
}

.programme-card.featured p {
    color: #a9becb
}

.programme-card.featured>i {
    color: var(--cyan)
}

.popular {
    position: absolute;
    right: 18px;
    top: 18px;
    background: var(--orange);
    color: #fff;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: .6rem;
    font-weight: 700
}

.cert-section {
    padding-top: 20px
}

.cert-box {
    padding: 55px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(120deg, #0c75a9, #0b3451);
    box-shadow: 0 30px 60px rgba(9, 73, 109, .22);
    position: relative;
    overflow: hidden
}

.cert-box:after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border: 35px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
    right: -60px;
    top: -85px
}

.cert-box p {
    color: #c3dbe6
}

.contact-section {
    background: linear-gradient(180deg, #fff, var(--light))
}

.contact-item {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 20px
}

.contact-item>i {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #e1f3f7;
    color: var(--blue)
}

.contact-item small,
.contact-item a {
    display: block
}

.contact-item a {
    color: var(--navy);
    font-weight: 700
}

.contact-form {
    padding: 35px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(7, 42, 64, .1);
    border: 1px solid #e2edf2
}

.contact-form label {
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: 7px
}

.form-control,
.form-select {
    padding: .8rem 1rem;
    border-color: #d9e5ea;
    background: #f9fbfc
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 .25rem rgba(56, 185, 210, .12)
}

.site-footer {
    padding: 65px 0 25px;
    background: #061725;
    color: #fff
}

.footer-logo {
    width: 160px;
    filter: brightness(0) invert(1);
    opacity: .9
}

.site-footer p {
    color: #91a9b8;
    font-size: .86rem
}

.site-footer h6 {
    color: var(--orange);
    text-transform: capitalize;
    letter-spacing: .12em;
    font-size: 16px
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px
}

.footer-links a {
    color: #c3d1da;
    font-size: .85rem
}

.social-links {
    display: flex;
    gap: 10px
}

.social-links a {
    width: 38px;
    height: 38px;
    border: 1px solid #244158;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    transition: .3s
}

.social-links a:hover {
    background: var(--orange);
    border-color: var(--orange);
    transform: translateY(-3px)
}

.site-footer hr {
    border-color: #243b4d;
    margin: 35px 0 20px
}

.copyright {
    text-align: center
}

@media(max-width:991.98px) {
    .navbar-collapse {
        background: #fff;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 15px 40px rgba(4, 29, 47, .12);
        margin-top: 8px
    }

    .navbar-brand img {
        width: 125px;
        height: 58px
    }

    .brand-name strong {
        font-size: 30px
    }

    .brand-name small {
        font-size: 18px
    }

    .hero {
        min-height: auto;
        padding-top: 145px
    }

    .section-pad {
        padding: 75px 0
    }

    .programme-card.featured {
        transform: none
    }

    .programme-card.featured:hover {
        transform: translateY(-8px)
    }
}

@media(max-width:575.98px) {
    .hero h1 {
        font-size: 2.75rem
    }

    .hero {
        padding-top: 125px
    }

    .hero-stats strong {
        font-size: 1.3rem
    }

    .hero-stats span {
        font-size: .6rem
    }

    .section-pad {
        padding: 60px 0
    }

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

    .image-panel {
        min-height: 350px
    }

    .blueprint {
        height: 326px
    }

    .experience-badge {
        right: 5px
    }

    .cert-box {
        padding: 36px 25px
    }

    .contact-form {
        padding: 24px
    }

    .btn-lg {
        font-size: .9rem
    }

    .navbar-brand img {
        width: 100%;
        height: 48px
    }

    .navbar-brand {
        gap: 4px;
        margin-right: .35rem
    }

    .brand-name strong {
        font-size: 28px
    }

    .brand-name small {
        margin-top: 3px;
        font-size: 16px;
        letter-spacing: .015em
    }
}

/* About hero — curved venue-inspired composition */
.about-page-banner {
    position: relative;
    min-height: 560px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: #f7f5ef;
    text-align: left
}

.about-page-banner .about-banner-media {
    position: absolute;
    inset: 0 0 auto auto;
    width: 69%;
    height: 88%;
    background: linear-gradient(rgba(5, 35, 35, .05), rgba(5, 35, 35, .05)), url('../assets/a1.jpeg') center/cover no-repeat;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 6% 53%);
    z-index: -3
}

.about-hero-green-shape {
    position: absolute;
    top: 7%;
    left: -10%;
    width: 65%;
    height: 105%;
    border: 10px solid #fff;
    border-radius: 0 52% 48% 0 / 0 58% 46% 0;
    background: linear-gradient(145deg, #053e31 0%, #064b3a 54%, #075943 100%);
    box-shadow: inset 0 13px 0 rgba(39, 118, 91, .48), 16px 20px 50px rgba(4, 35, 31, .2);
    transform: rotate(-1.5deg);
    z-index: -1
}

.about-page-banner .container {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    z-index: 2
}

.about-page-banner .about-banner-content {
    width: min(42%, 520px);
    margin: 22px 0 0;
    padding-left: clamp(8px, 2vw, 30px)
}

.about-hero-kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: #9ee3c7;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: capitalize
}

.about-page-banner .about-banner-content h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 950;
    line-height: .82;
    letter-spacing: -.055em;
    text-transform: capitalize;
    -webkit-text-stroke: 2px #c39432;
    paint-order: stroke fill;
    text-shadow: 0 6px 0 #163e34, 0 18px 30px rgba(0, 0, 0, .3)
}

.about-page-banner .about-banner-content p {
    max-width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.94rem, 1.3vw, 1.06rem);
    line-height: 1.7
}

.about-hero-seal {
    position: absolute;
    left: 56%;
    bottom: -76px;
    display: grid;
    width: 172px;
    aspect-ratio: 1;
    place-items: start center;
    padding-top: 37px;
    border: 9px solid #fff;
    border-radius: 50%;
    background: #087052;
    box-shadow: 0 -8px 24px rgba(2, 40, 31, .2);
    z-index: 3
}

.about-hero-seal span {
    color: #fff;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .16em
}

@media(max-width:991.98px) {
    .about-page-banner,
    .about-page-banner .container {
        min-height: 540px
    }

    .about-page-banner .about-banner-media {
        width: 72%;
        height: 78%
    }

    .about-hero-green-shape {
        left: -18%;
        width: 76%
    }

    .about-page-banner .about-banner-content {
        width: 49%;
        margin-top: 12px;
        text-align: left
    }

    .about-hero-seal {
        left: 61%;
        width: 145px;
        bottom: -67px
    }
}

@media(max-width:767.98px) {
    .about-page-banner {
        min-height: 680px
    }

    .about-page-banner .about-banner-media {
        inset: 0 0 auto;
        width: 100%;
        height: 47%;
        clip-path: none;
        background-position: center 28%
    }

    .about-hero-green-shape {
        top: 39%;
        left: -8%;
        width: 116%;
        height: 67%;
        border-radius: 50% 50% 0 0 / 18% 18% 0 0;
        transform: none;
        box-shadow: inset 0 10px 0 rgba(39, 118, 91, .48), 0 -12px 35px rgba(4, 35, 31, .2)
    }

    .about-page-banner .container {
        align-items: flex-end;
        min-height: 680px;
        padding-bottom: 62px
    }

    .about-page-banner .about-banner-content {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        padding: 0 16px;
        text-align: center
    }

    .about-page-banner .about-banner-content h1 {
        font-size: clamp(3.5rem, 17vw, 5.4rem);
        line-height: .86
    }

    .about-page-banner .about-banner-content p {
        margin-inline: auto;
        line-height: 1.6
    }

    .about-hero-seal {
        display: none
    }
}

/* Hero video visibility and professional contrast balance */
.hero:before {
    background: linear-gradient(90deg, rgba(2, 17, 28, .82) 0%, rgba(4, 28, 44, .58) 52%, rgba(5, 33, 50, .18) 100%);
    box-shadow: inset 0 -130px 130px rgba(2, 17, 28, .32), inset 0 80px 100px rgba(2, 17, 28, .14)
}

.hero-video {
    opacity: 1;
    filter: brightness(1.08) saturate(1.02) contrast(1.06)
}

/* Circular hero story inspired by editorial climate graphics */
.hero-visual {
    position: relative;
    width: min(100%, 500px);
    aspect-ratio: 1;
    isolation: isolate
}

.hero-visual-ring {
    position: absolute;
    inset: 7%;
    border: 9px solid rgba(255, 255, 255, .88);
    border-radius: 50%;
    overflow: hidden;
    background: #dfe9d8;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .25)
}

.hero-visual-ring:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 38%, rgba(6, 43, 38, .2));
    pointer-events: none
}

.hero-visual-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 53% center;
    transform: scale(1.04);
    transition: transform 1.1s ease
}

.hero-visual:hover .hero-visual-image {
    transform: scale(1.09)
}

.hero-visual:before,
.hero-visual:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none
}

.hero-visual:before {
    inset: 2%;
    z-index: -1;
    border: 1px solid rgba(105, 218, 185, .38);
    box-shadow: 0 0 55px rgba(56, 185, 210, .16)
}

.hero-visual:after {
    inset: 0;
    z-index: -2;
    background: radial-gradient(circle, rgba(77, 193, 170, .2), transparent 68%)
}

.hero-brand-seal {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 154px;
    height: 154px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .94);
    border: 7px solid rgba(225, 242, 232, .92);
    box-shadow: 0 18px 45px rgba(3, 31, 37, .32);
    backdrop-filter: blur(8px)
}

.hero-brand-seal img {
    width: 112px;
    height: 62px;
    object-fit: contain
}

.hero-brand-seal span {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: capitalize;
    color: #27755e;
    margin-top: 2px
}

.hero-fact {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .95);
    color: var(--navy);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .25);
    font-size: 16px;
    line-height: 1.25;
    backdrop-filter: blur(8px);
    animation: drift 5s ease-in-out infinite
}

.hero-fact i {
    font-size: 1.05rem;
    color: #268464
}

.hero-fact strong {
    display: block;
    font-size: .8rem
}

.hero-fact-one {
    left: 0;
    top: 19%
}

.hero-fact-two {
    right: -1%;
    top: 23%;
    animation-delay: -1.7s
}

.hero-fact-three {
    right: 8%;
    bottom: 8%;
    animation-delay: -3.4s
}

.hero-grid {
    opacity: .22
}

@media(max-width:991.98px) {
    .hero .row {
        justify-content: center
    }

    .hero .col-lg-7 {
        text-align: center
    }

    .hero-copy {
        margin-inline: auto
    }

    .hero .d-flex,
    .hero-stats {
        justify-content: center
    }

    .hero-visual {
        width: min(92vw, 460px);
        margin-top: 20px
    }

    .hero {
        padding-bottom: 90px
    }
}

@media(max-width:575.98px) {
    .hero-visual {
        width: min(88vw, 360px);
        margin-top: 8px
    }

    .hero-visual-ring {
        inset: 9%;
        border-width: 6px
    }

    .hero-brand-seal {
        width: 112px;
        height: 112px;
        border-width: 5px
    }

    .hero-brand-seal img {
        width: 82px;
        height: 45px
    }

    .hero-brand-seal span {
        font-size: .45rem
    }

    .hero-fact {
        padding: 7px 9px;
        gap: 6px;
        font-size: .58rem;
        border-radius: 9px
    }

    .hero-fact strong {
        font-size: .65rem
    }

    .hero-fact i {
        font-size: .85rem
    }

    .hero-fact-one {
        left: 0;
        top: 13%
    }

    .hero-fact-two {
        right: 0;
        top: 18%
    }

    .hero-fact-three {
        right: 5%;
        bottom: 4%
    }
}

/* Four-part responsive circle matching the supplied reference */
.hero-visual {
    width: min(100%, 520px)
}

.hero-visual-ring {
    inset: 3%;
    border: 8px solid rgba(255, 255, 255, .96);
    background: #fff;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .4), 0 0 0 7px rgba(150, 211, 131, .2), 0 0 0 8px rgba(255, 255, 255, .35)
}

.hero-visual-ring:after {
    z-index: 5;
    background: radial-gradient(circle at 36% 24%, rgba(255, 255, 255, .18), transparent 28%), linear-gradient(135deg, transparent 55%, rgba(4, 39, 32, .13));
    border-radius: 50%
}

.hero-segment {
    position: absolute;
    inset: 0;
    background-image: url('../assets/banner.png');
    background-repeat: no-repeat;
    background-size: 185% 185%;
    transform: scale(.987);
    transform-origin: center;
    transition: filter .45s ease, transform .65s ease
}

.hero-segment-top {
    clip-path: polygon(0 0, 100% 0, 50% 50%);
    background-position: 50% 8%;
    filter: saturate(1.08) brightness(1.06)
}

.hero-segment-right {
    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
    background-position: 88% 50%;
    filter: saturate(.9) contrast(1.1)
}

.hero-segment-bottom {
    clip-path: polygon(100% 100%, 0 100%, 50% 50%);
    background-position: 50% 94%;
    filter: saturate(1.12) brightness(.9)
}

.hero-segment-left {
    clip-path: polygon(0 100%, 0 0, 50% 50%);
    background-position: 7% 52%;
    filter: saturate(.98) brightness(.96)
}

.hero-visual:hover .hero-segment {
    transform: scale(1.015);
    filter: saturate(1.12) brightness(1.02)
}

.hero-brand-seal {
    width: 34%;
    height: auto;
    aspect-ratio: 1;
    border-width: 6px;
    background: #f7fbed;
    box-shadow: 0 15px 35px rgba(1, 42, 29, .35), 0 0 0 2px rgba(96, 156, 75, .35)
}

.hero-brand-seal img {
    width: 70%;
    height: 46%;
    object-fit: contain
}

.hero-brand-seal span {
    font-size: clamp(.42rem, 1vw, .62rem)
}

@media(max-width:575.98px) {
    .hero-visual {
        width: min(92vw, 370px)
    }

    .hero-visual-ring {
        border-width: 5px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, .35), 0 0 0 5px rgba(150, 211, 131, .18)
    }

    .hero-brand-seal {
        width: 35%;
        height: auto;
        border-width: 4px
    }

    .hero-brand-seal img {
        width: 72%;
        height: 45%
    }
}

/* Interactive image hero */
.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../assets/banner.png');
    background-size: cover;
    background-position: 50% 30%;
    opacity: 0;
    transform: scale(1.035);
    transition: opacity .45s ease, transform 6s ease, background-position .55s ease;
    will-change: opacity, transform
}

.hero-background.is-visible {
    opacity: 1;
    transform: scale(1)
}

.hero-content-copy {
    transition: opacity .22s ease, transform .22s ease
}

.hero-content-copy.is-changing {
    opacity: 0;
    transform: translateY(8px)
}

.hero-visual:before {
    inset: -1%;
    z-index: -1;
    border: 3px dashed rgba(142, 225, 177, .72);
    box-shadow: 0 0 30px rgba(71, 197, 160, .28);
    animation: heroOrbit 15s linear infinite
}

.hero-visual:after {
    inset: -5%;
    background: radial-gradient(circle, rgba(77, 193, 170, .2), transparent 69%)
}

@keyframes heroOrbit {
    to {
        transform: rotate(360deg)
    }
}

.hero-segment {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.hero-segment:focus-visible {
    outline: 4px solid var(--orange);
    outline-offset: -7px
}

.hero-segment.active {
    filter: saturate(1.16) brightness(1.08)
}

.hero-brand-seal {
    pointer-events: none
}

.hero-brand-seal:after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(100, 170, 82, .45);
    animation: sealPulse 2.8s ease-in-out infinite
}

@keyframes sealPulse {
    50% {
        transform: scale(1.055);
        opacity: .35
    }
}

@media(max-width:575.98px) {
    .hero-background {
        background-position: center
    }

    .hero-visual:before {
        border-width: 2px
    }

    .hero-content-copy {
        min-height: 285px
    }
}

/* Four-image responsive hero */
.hero-background {
    background-image: url('../assets/hero-slide-1.png');
    background-position: center
}

.hero-segment {
    background-size: cover;
    background-position: center
}

.hero-segment-top {
    background-image: url('../assets/hero-slide-1.png')
}

.hero-segment-right {
    background-image: url('../assets/hero-slide-2.jpeg')
}

.hero-segment-bottom {
    background-image: url('../assets/hero-slide-3.jpg')
}

.hero-segment-left {
    background-image: url('../assets/hero-slide-4.jpg')
}

@media(max-width:575.98px) {
    .hero-background {
        background-position: 62% center !important
    }
}

/* Fixed-image hero with scrolling content */
.hero-background {
    background-image: url('../assets/hero-slide-1.png') !important;
    background-position: center !important;
    opacity: 1 !important;
    transform: scale(1) !important
}

.hero-visual-ring {
    isolation: isolate
}

.hero-circle-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
    transform: scale(1.01);
    transition: transform .8s ease;
    z-index: 0
}

.hero-visual:hover .hero-circle-image {
    transform: scale(1.055)
}

.hero-visual-ring:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 42%, rgba(3, 34, 42, .22));
    pointer-events: none
}

.hero-slider-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px
}

.hero-arrow {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    backdrop-filter: blur(8px);
    transition: background .25s ease, border-color .25s ease, transform .25s ease
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
    background: var(--orange);
    border-color: var(--orange);
    transform: translateY(-2px)
}

.hero-dots {
    display: flex;
    align-items: center;
    gap: 8px
}

.hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
    transition: width .3s ease, background .3s ease
}

.hero-dot.active {
    width: 34px;
    background: var(--orange)
}

.hero-content-copy {
    min-height: 365px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media(max-width:991.98px) {
    .hero-slider-controls {
        justify-content: center;
        margin-bottom: 28px
    }

    .hero-content-copy {
        min-height: 330px
    }

    .hero-background {
        background-position: 58% center !important
    }
}

@media(max-width:575.98px) {
    .hero-content-copy {
        min-height: 340px
    }

    .hero-background {
        background-position: 66% center !important
    }

    .hero-slider-controls {
        margin-top: 20px;
        gap: 11px
    }

    .hero-arrow {
        width: 40px;
        height: 40px
    }

    .hero-dot.active {
        width: 27px
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-circle-image,
    .hero-content-copy,
    .hero-dot,
    .hero-arrow {
        transition: none !important
    }
}

/* Classic animated hero portrait */
.hero-visual-ring {
    border: 6px solid rgba(255, 255, 255, .96);
    background: #0c2834;
    box-shadow: 0 28px 75px rgba(0, 0, 0, .44), 0 0 0 1px rgba(216, 177, 94, .7), 0 0 0 12px rgba(255, 255, 255, .06)
}

.hero-visual-ring:before {
    inset: 10px;
    border: 1px solid rgba(238, 205, 135, .6);
    background: linear-gradient(135deg, rgba(255, 255, 255, .13), transparent 38%, rgba(5, 30, 38, .24));
    box-shadow: inset 0 0 45px rgba(0, 0, 0, .18)
}

.hero-visual-ring:after {
    z-index: 3;
    background: linear-gradient(110deg, transparent 26%, rgba(255, 255, 255, .16) 46%, transparent 63%);
    transform: translateX(-120%);
    animation: portraitSheen 8s ease-in-out infinite
}

.hero-circle-image {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.05s ease, transform 6.5s cubic-bezier(.2, .65, .3, 1);
    will-change: opacity, transform
}

.hero-circle-image.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1
}

.hero-visual:hover .hero-circle-image.active {
    transform: scale(1.035)
}

.hero-visual:before {
    inset: -4%;
    border: 3px dashed rgba(112, 218, 170, .82);
    box-shadow: 0 0 0 7px rgba(255, 255, 255, .035), 0 0 45px rgba(91, 211, 158, .22);
    animation: classicOrbit 12s linear infinite
}

.hero-visual:after {
    inset: -9%;
    background: radial-gradient(circle, rgba(215, 179, 94, .15), transparent 67%)
}

@keyframes classicOrbit {
    to {
        transform: rotate(360deg)
    }
}

@keyframes portraitSheen {

    0%,
    58% {
        transform: translateX(-120%)
    }

    78%,
    100% {
        transform: translateX(130%)
    }
}

@media(max-width:575.98px) {
    .hero-visual-ring {
        border-width: 4px;
        box-shadow: 0 20px 48px rgba(0, 0, 0, .4), 0 0 0 1px rgba(216, 177, 94, .65), 0 0 0 7px rgba(255, 255, 255, .05)
    }

    .hero-visual-ring:before {
        inset: 6px
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-visual:before,
    .hero-visual-ring:after {
        animation: none !important
    }

    .hero-circle-image {
        transform: none !important
    }
}

/* Classic transparent colour treatment over hero imagery */
.hero:before {
    background: linear-gradient(90deg, rgba(2, 16, 27, .95) 0%, rgba(4, 25, 38, .82) 45%, rgba(7, 31, 40, .52) 74%, rgba(16, 34, 39, .34) 100%), linear-gradient(180deg, rgba(15, 39, 48, .08), rgba(2, 13, 22, .48));
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), inset 0 -150px 150px rgba(1, 12, 20, .48)
}

.hero-visual-ring:before {
    background: linear-gradient(135deg, rgba(11, 42, 50, .2), rgba(255, 244, 215, .06) 46%, rgba(7, 28, 35, .28));
    box-shadow: inset 0 0 55px rgba(2, 18, 24, .22)
}

/* Animated engineering details around the hero portrait */
.hero-orbit-lights {
    position: absolute;
    inset: -4%;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    animation: orbitLights 14s linear infinite
}

.hero-orbit-lights i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8ce1bb;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 6px rgba(91, 211, 158, .11), 0 0 18px rgba(91, 211, 158, .85)
}

.hero-orbit-lights i:nth-child(1) {
    top: -3px;
    left: 50%
}

.hero-orbit-lights i:nth-child(2) {
    right: 5%;
    bottom: 19%
}

.hero-orbit-lights i:nth-child(3) {
    left: 5%;
    bottom: 19%
}

.hero-image-badge {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 170px;
    padding: 11px 15px 11px 11px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 247, 241, .9));
    color: #0b2c3b;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .27), inset 0 1px #fff;
    backdrop-filter: blur(12px);
    animation: badgeFloat 5s ease-in-out infinite
}

.hero-image-badge>span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: linear-gradient(135deg, #0b6178, #218e78);
    color: #fff;
    box-shadow: 0 7px 16px rgba(20, 112, 111, .24)
}

.hero-image-badge small,
.hero-image-badge strong {
    display: block;
    white-space: nowrap
}

.hero-image-badge small {
    color: #65767b;
    font-size: .58rem;
    text-transform: capitalize;
    letter-spacing: .12em
}

.hero-image-badge strong {
    font-size: 16px;
    letter-spacing: .01em
}

.hero-image-badge-one {
    left: -5%;
    top: 17%
}

.hero-image-badge-two {
    right: -4%;
    bottom: 12%;
    animation-delay: -2.4s
}

@keyframes orbitLights {
    to {
        transform: rotate(360deg)
    }
}

@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@media(max-width:1199.98px) {
    .hero-image-badge-one {
        left: -1%
    }

    .hero-image-badge-two {
        right: -1%
    }
}

@media(max-width:575.98px) {
    .hero-image-badge {
        min-width: 0;
        padding: 8px 10px 8px 8px;
        border-radius: 11px;
        gap: 7px
    }

    .hero-image-badge>span {
        width: 30px;
        height: 30px;
        border-radius: 8px
    }

    .hero-image-badge small {
        font-size: .45rem
    }

    .hero-image-badge strong {
        font-size: .62rem
    }

    .hero-image-badge-one {
        left: -1%;
        top: 12%
    }

    .hero-image-badge-two {
        right: -1%;
        bottom: 7%
    }

    .hero-orbit-lights i {
        width: 7px;
        height: 7px
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-orbit-lights,
    .hero-image-badge {
        animation: none !important
    }
}

/* Responsive hero background video */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: 1;
    filter: brightness(.82) saturate(.9) contrast(1.06)
}

@media(max-width:991.98px) {
    .hero-video {
        object-position: 58% center
    }
}

@media(max-width:575.98px) {
    .hero-video {
        object-position: 62% center
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-video {
        filter: brightness(.78) saturate(.85)
    }
}

/* Staggered hero typography animation */
.hero h1 {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-wrap: balance
}

.hero h1 span {
    display: inline;
    background-size: 220% 100%;
    background-position: 0 50%
}

.hero-content-copy .eyebrow,
.hero-content-copy h1,
.hero-content-copy .hero-copy {
    will-change: opacity, transform, filter
}

.hero-content-copy.is-changing .eyebrow,
.hero-content-copy.is-changing h1,
.hero-content-copy.is-changing .hero-copy {
    animation: none
}

.hero-content-copy.is-entering .eyebrow {
    animation: heroEyebrowIn .7s cubic-bezier(.2, .75, .25, 1) both
}

.hero-content-copy.is-entering h1 {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none
}

.hero-content-copy.is-entering h1 span {
    animation: none
}

.hero-content-copy.is-entering .hero-copy {
    animation: heroCopyIn .8s .38s cubic-bezier(.2, .75, .25, 1) both
}

@keyframes heroEyebrowIn {
    0% {
        opacity: 0;
        transform: translateY(14px);
        letter-spacing: .3em
    }

    100% {
        opacity: 1;
        transform: none;
        letter-spacing: .17em
    }
}

@keyframes heroTitleIn {
    0% {
        opacity: 0;
        transform: translateY(48px);
        filter: blur(8px);
        clip-path: inset(0 0 100% 0)
    }

    55% {
        opacity: 1;
        filter: blur(0)
    }

    100% {
        opacity: 1;
        transform: none;
        filter: blur(0);
        clip-path: inset(0)
    }
}

@keyframes heroAccentSweep {
    0% {
        background-position: 100% 50%;
        filter: brightness(.82)
    }

    100% {
        background-position: 0 50%;
        filter: brightness(1)
    }
}

@keyframes heroCopyIn {
    0% {
        opacity: 0;
        transform: translateY(24px);
        filter: blur(4px)
    }

    100% {
        opacity: 1;
        transform: none;
        filter: blur(0)
    }
}

@media(max-width:575.98px) {
    .hero h1 {
        letter-spacing: -.045em
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-content-copy.is-entering .eyebrow,
    .hero-content-copy.is-entering h1,
    .hero-content-copy.is-entering h1 span,
    .hero-content-copy.is-entering .hero-copy {
        animation: none !important
    }

    .hero-content-copy .eyebrow,
    .hero-content-copy h1,
    .hero-content-copy .hero-copy {
        will-change: auto
    }
}

/* Real typewriter headline */
.hero h1.is-typing:after {
    content: "";
    display: inline-block;
    width: 4px;
    height: .82em;
    margin-left: 9px;
    border-radius: 2px;
    background: var(--orange);
    vertical-align: -.04em;
    box-shadow: 0 0 14px rgba(242, 138, 23, .48);
    animation: typeCursorBlink .72s steps(1, end) infinite
}

.hero h1.is-typing span {
    background-position: 0 50%;
    filter: none
}

@keyframes typeCursorBlink {

    0%,
    48% {
        opacity: 1
    }

    49%,
    100% {
        opacity: 0
    }
}

@media(max-width:575.98px) {
    .hero h1.is-typing:after {
        width: 3px;
        margin-left: 6px
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero h1.is-typing:after {
        animation: none
    }
}

/* Premium 3D About section */
.about-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 12% 52%, rgba(36, 157, 177, .08), transparent 34%), linear-gradient(180deg, #fff, #f7faf9)
}

.about-section:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(12, 82, 103, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 82, 103, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, #000, transparent 58%)
}

.about-section>.container {
    position: relative;
    z-index: 1
}

.about-visual-shell {
    --about-rotate-x: 0deg;
    --about-rotate-y: 0deg;
    position: relative;
    min-height: 540px;
    perspective: 1200px;
    isolation: isolate
}

.about-ambient-glow {
    position: absolute;
    inset: 14% 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49, 182, 193, .3), rgba(18, 107, 130, .08) 48%, transparent 70%);
    filter: blur(20px);
    animation: aboutGlow 5s ease-in-out infinite
}

.about-3d-card {
    position: absolute;
    inset: 5% 8% 7%;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(8, 48, 67, .98), rgba(5, 29, 44, .98));
    box-shadow: 35px 42px 70px rgba(5, 35, 50, .27), inset 0 1px rgba(255, 255, 255, .13), inset 0 -70px 90px rgba(1, 15, 26, .28);
    transform-style: preserve-3d;
    transform: rotateX(var(--about-rotate-x)) rotateY(var(--about-rotate-y));
    transition: transform .18s ease-out, box-shadow .4s ease
}

.about-3d-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(76, 194, 208, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 194, 208, .09) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(#000, transparent 92%)
}

.about-3d-card:after {
    content: "";
    position: absolute;
    inset: -70% -30%;
    background: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, .1) 50%, transparent 57%);
    transform: translateX(-55%) rotate(8deg);
    animation: aboutSheen 7s ease-in-out infinite
}

.about-visual-shell:hover .about-3d-card {
    box-shadow: 42px 50px 85px rgba(5, 35, 50, .34), inset 0 1px rgba(255, 255, 255, .15), inset 0 -70px 90px rgba(1, 15, 26, .28)
}

.about-card-head,
.about-card-foot {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #84cbd3;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .18em
}

.about-card-head i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f29a2e;
    box-shadow: 0 0 0 5px rgba(242, 154, 46, .12), 0 0 15px rgba(242, 154, 46, .6)
}

.about-card-foot {
    margin-top: auto;
    justify-content: flex-start;
    gap: 24px;
    color: rgba(181, 219, 222, .58)
}

.about-depth-model {
    position: absolute;
    z-index: 1;
    left: 13%;
    right: 13%;
    top: 25%;
    height: 225px;
    transform-style: preserve-3d;
    transform: rotateX(62deg) rotateZ(-8deg);
    animation: modelFloat 6s ease-in-out infinite
}

.depth-layer {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(114, 215, 220, .55);
    border-radius: 22px;
    clip-path: polygon(8% 0, 100% 8%, 91% 100%, 0 88%);
    box-shadow: inset 0 0 35px rgba(83, 207, 210, .08)
}

.depth-layer-one {
    background: linear-gradient(145deg, rgba(47, 179, 183, .32), rgba(11, 75, 91, .3));
    transform: translateZ(58px)
}

.depth-layer-two {
    background: linear-gradient(145deg, rgba(47, 142, 169, .26), rgba(8, 57, 76, .36));
    transform: translateZ(18px)
}

.depth-layer-three {
    background: linear-gradient(145deg, rgba(229, 155, 62, .22), rgba(7, 43, 60, .42));
    transform: translateZ(-24px)
}

.depth-core-line {
    position: absolute;
    left: 52%;
    top: -18%;
    width: 3px;
    height: 150%;
    background: linear-gradient(#f4b05c, #62d1cb);
    transform: translateZ(90px);
    box-shadow: 0 0 18px rgba(100, 218, 207, .55)
}

.depth-core-point {
    position: absolute;
    left: calc(52% - 8px);
    top: 46%;
    width: 18px;
    height: 18px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #f29a2e;
    transform: translateZ(92px);
    box-shadow: 0 0 0 9px rgba(242, 154, 46, .16), 0 0 25px rgba(242, 154, 46, .65);
    animation: corePulse 2.2s ease-in-out infinite
}

.about-model-mark {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 15px;
    background: rgba(248, 252, 248, .93);
    color: #0a3546;
    box-shadow: 0 22px 38px rgba(1, 18, 29, .3);
    transform: translate(-50%, -50%) translateZ(100px);
    backdrop-filter: blur(12px)
}

.about-model-mark>span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #1384a6, #34a98b);
    color: #fff;
    font-size: 1.3rem
}

.about-model-mark small,
.about-model-mark strong {
    display: block;
    white-space: nowrap
}

.about-model-mark small {
    font-size: .52rem;
    text-transform: capitalize;
    letter-spacing: .13em;
    color: #718086
}

.about-model-mark strong {
    font-size: .8rem
}

.about-orbit {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(24, 140, 156, .2);
    animation: aboutOrbit 15s linear infinite
}

.about-orbit-one {
    inset: 0 2% 2% 0
}

.about-orbit-two {
    inset: 9% 12% 12% 8%;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 11s
}

.about-float-card {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    color: #17394a;
    box-shadow: 0 17px 35px rgba(7, 45, 61, .17);
    backdrop-filter: blur(12px);
    animation: aboutBadge 5s ease-in-out infinite
}

.about-float-card>i {
    color: #178cab;
    font-size: 1.15rem
}

.about-float-card span {
    font-size: 16px;
    line-height: 1.3;
    text-transform: capitalize;
    letter-spacing: .1em
}

.about-float-card strong {
    font-size: 16px
}

.about-float-one {
    left: 0;
    top: 20%
}

.about-float-two {
    right: 0;
    bottom: 18%;
    animation-delay: -2.5s
}

.about-experience {
    z-index: 7;
    right: 4%;
    bottom: 2%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-left: 3px solid var(--orange)
}

.about-experience strong {
    margin: 0
}

.about-experience span {
    font-size: .65rem;
    line-height: 1.25;
    text-transform: capitalize;
    letter-spacing: .1em;
    color: #536a74
}

.about-tag {
    position: relative;
    padding-left: 38px
}

.about-tag:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 26px;
    height: 1px;
    background: var(--orange)
}

.about-title {
    font-size: clamp(2.5rem, 4.5vw, 4.1rem);
    letter-spacing: -.045em
}

.about-title span {
    color: #1685a4
}

.about-section .col-lg-6:last-child>p {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.9;
    color: #5c707b
}

@keyframes aboutGlow {
    50% {
        transform: scale(1.12);
        opacity: .68
    }
}

@keyframes aboutSheen {

    0%,
    58% {
        transform: translateX(-55%) rotate(8deg)
    }

    82%,
    100% {
        transform: translateX(55%) rotate(8deg)
    }
}

@keyframes modelFloat {
    50% {
        transform: rotateX(62deg) rotateZ(-5deg) translateY(-9px)
    }
}

@keyframes corePulse {
    50% {
        transform: translateZ(105px) scale(1.12)
    }
}

@keyframes aboutOrbit {
    to {
        transform: rotate(360deg)
    }
}

@keyframes aboutBadge {
    50% {
        transform: translateY(-10px)
    }
}

@media(max-width:991.98px) {
    .about-visual-shell {
        min-height: 500px;
        max-width: 650px;
        margin-inline: auto
    }

    .about-section .col-lg-6:last-child {
        text-align: center
    }

    .about-section .col-lg-6:last-child>p {
        margin-inline: auto
    }

    .about-section .check-grid {
        max-width: 650px;
        margin-inline: auto;
        margin-block: 25px
    }

    .about-tag {
        padding-left: 0
    }

    .about-tag:before {
        display: none
    }
}

@media(max-width:575.98px) {
    .about-visual-shell {
        min-height: 400px
    }

    .about-3d-card {
        inset: 5% 4% 8%;
        padding: 18px;
        border-radius: 22px
    }

    .about-depth-model {
        left: 8%;
        right: 8%;
        top: 26%;
        height: 170px
    }

    .about-model-mark {
        padding: 10px 12px;
        gap: 8px
    }

    .about-model-mark>span {
        width: 36px;
        height: 36px
    }

    .about-float-card {
        padding: 8px 10px
    }

    .about-float-card span {
        font-size: .45rem
    }

    .about-float-one {
        left: -1%;
        top: 16%
    }

    .about-float-two {
        right: -1%;
        bottom: 15%
    }

    .about-experience {
        right: 2%;
        bottom: 1%;
        padding: 10px 12px
    }

    .about-card-foot {
        gap: 12px;
        font-size: .48rem
    }

    .about-title {
        font-size: 2.45rem
    }
}

@media(prefers-reduced-motion:reduce) {

    .about-ambient-glow,
    .about-3d-card:after,
    .about-depth-model,
    .depth-core-point,
    .about-orbit,
    .about-float-card {
        animation: none !important
    }

    .about-3d-card {
        transform: none !important
    }
}

/* Refined corporate About layout */
.about-section {
    background: linear-gradient(180deg, #fbfcfc 0%, #f2f7f6 100%)
}

.about-photo-stage {
    min-height: 560px;
    perspective: 1200px
}

.about-photo-card {
    position: absolute;
    inset: 3% 7% 8% 2%;
    overflow: hidden;
    border-radius: 28px;
    background: #082c3a;
    box-shadow: 0 35px 75px rgba(8, 48, 63, .24), 0 0 0 1px rgba(17, 99, 118, .12);
    transform: rotateX(var(--about-rotate-x)) rotateY(var(--about-rotate-y));
    transform-style: preserve-3d;
    transition: transform .2s ease-out, box-shadow .4s ease
}

.about-photo-card:before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 19px;
    pointer-events: none
}

.about-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% center;
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
    filter: saturate(.88) contrast(1.04)
}

.about-photo-stage:hover .about-photo-card img {
    transform: scale(1.035)
}

.about-photo-stage:hover .about-photo-card {
    box-shadow: 0 42px 90px rgba(8, 48, 63, .3), 0 0 0 1px rgba(17, 99, 118, .16)
}

.about-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 25, 34, .04) 28%, rgba(3, 24, 33, .88) 100%), linear-gradient(90deg, rgba(4, 29, 39, .2), transparent 58%)
}

.about-photo-caption {
    position: absolute;
    z-index: 4;
    left: 38px;
    right: 38px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    transform: translateZ(35px)
}

.about-caption-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 1.2rem;
    backdrop-filter: blur(9px)
}

.about-photo-caption small,
.about-photo-caption strong {
    display: block
}

.about-photo-caption small {
    margin-bottom: 3px;
    color: #8fe0ce;
    font-size: .6rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .16em
}

.about-photo-caption strong {
    font-size: .88rem;
    letter-spacing: .01em
}

.about-photo-lines {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none
}

.about-photo-lines span {
    position: absolute;
    border: 1px solid rgba(24, 139, 155, .2);
    border-radius: 50%;
    animation: aboutPhotoOrbit 16s linear infinite
}

.about-photo-lines span:nth-child(1) {
    inset: 0 1% 3% 0
}

.about-photo-lines span:nth-child(2) {
    inset: 8% 9% 11% 7%;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 12s
}

.about-photo-lines span:nth-child(3) {
    width: 12px;
    height: 12px;
    right: 2%;
    top: 24%;
    border: 0;
    background: #ec9630;
    box-shadow: 0 0 0 7px rgba(236, 150, 48, .13), 0 0 20px rgba(236, 150, 48, .45)
}

.about-photo-experience {
    z-index: 6;
    right: 0;
    bottom: 5%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 15px;
    border-left: 3px solid var(--orange);
    animation: aboutPhotoBadge 5s ease-in-out infinite
}

.about-photo-experience strong {
    margin: 0;
    font-size: 2rem
}

.about-photo-experience span {
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: capitalize;
    letter-spacing: .1em;
    color: #536a74
}

.about-title {
    max-width: 700px;
    margin-bottom: 24px;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -.045em;
    color: #e87d1d
}

.about-title .about-company {
    display: inline;
    color: #a75735;
    font-family: "Karla", sans-serif;
    font-weight: 800;
    letter-spacing: -.025em
}

.about-section .about-lead {
    max-width: 720px;
    margin-bottom: 10px;
    color: #506873;
    font-size: 1rem;
    line-height: 1.85
}

.about-profile-panel {
    max-width: 720px;
    margin-bottom: 30px;
    padding: 0;
    color: #506873
}

.about-profile-panel p {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    text-align: justify
}

.about-profile-panel p+p {
    margin-top: 18px
}

.about-profile-panel strong {
    color: #164b63;
    
}

.about-capabilities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 30px
}

.about-capabilities span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid rgba(18, 94, 112, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .7);
    color: #163c4d;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(10, 65, 80, .05)
}

.about-capabilities i {
    color: #1689a6;
    font-size: 1rem
}

.about-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 19px;
    border-radius: 10px;
    background: #0d5269;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    box-shadow: 0 12px 25px rgba(13, 82, 105, .2);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease
}

.about-cta:hover {
    color: #fff;
    background: #0a4053;
    transform: translateY(-3px);
    box-shadow: 0 17px 30px rgba(13, 82, 105, .27)
}

@keyframes aboutPhotoOrbit {
    to {
        transform: rotate(360deg)
    }
}

@keyframes aboutPhotoBadge {
    50% {
        transform: translateY(-9px)
    }
}

@media(max-width:991.98px) {
    .about-photo-stage {
        min-height: 520px
    }

    .about-title {
        margin-inline: auto
    }

    .about-capabilities {
        max-width: 650px;
        margin-inline: auto;
        margin-bottom: 30px
    }

    .about-photo-card {
        inset: 3% 5% 8%
    }
}

@media(max-width:575.98px) {
    .about-photo-stage {
        min-height: 430px
    }

    .about-photo-card {
        inset: 3% 3% 10%;
        border-radius: 21px
    }

    .about-photo-card:before {
        inset: 9px;
        border-radius: 14px
    }

    .about-photo-caption {
        left: 24px;
        right: 24px;
        bottom: 26px
    }

    .about-caption-icon {
        width: 38px;
        height: 38px
    }

    .about-photo-caption strong {
        font-size: 16px
    }

    .about-photo-experience {
        right: 0;
        bottom: 3%;
        padding: 11px 13px
    }

    .about-photo-experience strong {
        font-size: 1.55rem
    }

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

    .about-title {
        font-size: 2.2rem
    }
}

@media(prefers-reduced-motion:reduce) {

    .about-photo-lines span,
    .about-photo-experience {
        animation: none !important
    }

    .about-photo-card {
        transform: none !important
    }
}

/* Professional field-services showcase */
.service-showcase {
    position: relative;
    overflow: hidden;
    background: #061d2a;
    color: #fff
}

.service-showcase:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 8% 15%, rgba(38, 151, 169, .2), transparent 30%), linear-gradient(rgba(96, 187, 198, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 187, 198, .045) 1px, transparent 1px);
    background-size: auto, 42px 42px, 42px 42px;
    pointer-events: none
}

.service-showcase>.container {
    position: relative;
    z-index: 1
}

.service-showcase-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 42px
}

.service-showcase-head>div:first-child {
    max-width: 760px
}

.service-showcase-head h2 {
    margin-bottom: 16px;
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    letter-spacing: -.045em
}

.service-showcase-head h2 span {
    color: #58c4d0
}

.service-showcase-head p {
    max-width: 650px;
    margin: 0;
    color: #a9c1ca;
    line-height: 1.75
}

.service-showcase-nav {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto
}

.service-showcase-nav>span {
    margin-right: 12px;
    color: #78949e;
    font-size: .67rem;
    letter-spacing: .1em
}

.service-showcase-nav>span strong {
    color: #f2a044;
    font-size: 1.05rem
}

.service-showcase-nav button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    transition: background .25s ease, border-color .25s ease, transform .25s ease
}

.service-showcase-nav button:hover {
    background: #e99435;
    border-color: #e99435;
    transform: translateY(-2px)
}

.service-showcase-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px)/3);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    padding: 4px 2px 25px
}

.service-showcase-track::-webkit-scrollbar {
    display: none
}

.service-showcase-card {
    position: relative;
    height: 470px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 22px;
    background: #0b2a38;
    scroll-snap-align: start;
    isolation: isolate;
    box-shadow: 0 24px 45px rgba(0, 0, 0, .24);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .35s ease
}

.service-showcase-card:after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 15px;
    pointer-events: none
}

.service-showcase-card>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.78) contrast(1.05);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s ease
}

.service-card-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(4, 25, 34, .16) 10%, rgba(4, 25, 34, .48) 48%, rgba(3, 20, 29, .98) 100%)
}

.service-card-top {
    position: absolute;
    z-index: 3;
    top: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.service-card-top span {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .72)
}

.service-card-top i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: rgba(5, 35, 45, .3);
    color: #8ce0d0;
    font-size: 1.05rem;
    backdrop-filter: blur(8px);
    transition: background .3s ease, color .3s ease
}

.service-card-copy {
    position: absolute;
    z-index: 3;
    left: 31px;
    right: 31px;
    bottom: 30px;
    transform: translateY(58px);
    transition: transform .45s cubic-bezier(.2, .75, .25, 1)
}

.service-card-copy small {
    display: block;
    margin-bottom: 10px;
    color: #f2a044;
    font-size: .58rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .14em
}

.service-card-copy h3 {
    min-height: 58px;
    margin-bottom: 12px;
    color: #fff;
    font-size: 20px;
    line-height: 1.2
}

.service-card-copy p {
    min-height: 66px;
    margin-bottom: 17px;
    color: #bfd0d6;
    font-size: .8rem;
    line-height: 1.65;
    opacity: 0;
    transition: opacity .35s ease
}

.service-card-copy a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    opacity: 0;
    transition: opacity .35s ease, color .25s ease
}

.service-card-copy a:hover {
    color: #f2a044
}

.service-showcase-card:hover,
.service-showcase-card:focus-within {
    transform: translateY(-9px);
    border-color: rgba(113, 213, 199, .45);
    box-shadow: 0 33px 60px rgba(0, 0, 0, .34)
}

.service-showcase-card:hover>img,
.service-showcase-card:focus-within>img {
    transform: scale(1.065);
    filter: saturate(.95) contrast(1.05)
}

.service-showcase-card:hover .service-card-copy,
.service-showcase-card:focus-within .service-card-copy {
    transform: translateY(0)
}

.service-showcase-card:hover .service-card-copy p,
.service-showcase-card:hover .service-card-copy a,
.service-showcase-card:focus-within .service-card-copy p,
.service-showcase-card:focus-within .service-card-copy a {
    opacity: 1
}

.service-showcase-card:hover .service-card-top i {
    background: #e99435;
    color: #fff
}

@media(max-width:991.98px) {
    .service-showcase-track {
        grid-auto-columns: calc((100% - 24px)/2)
    }

    .service-showcase-head {
        align-items: flex-end
    }

    .service-showcase-card {
        height: 450px
    }
}

@media(max-width:767.98px) {
    .service-showcase-head {
        display: block
    }

    .service-showcase-nav {
        margin-top: 26px
    }

    .service-showcase-track {
        grid-auto-columns: 84%
    }
}

@media(max-width:575.98px) {
    .service-showcase-track {
        grid-auto-columns: 92%;
        gap: 16px
    }

    .service-showcase-card {
        height: 430px
    }

    .service-card-copy {
        left: 26px;
        right: 26px
    }

    .service-showcase-head {
        margin-bottom: 30px
    }

    .service-showcase-nav button {
        width: 43px;
        height: 43px
    }
}

@media(hover:none) {
    .service-card-copy {
        transform: none
    }

    .service-card-copy p,
    .service-card-copy a {
        opacity: 1
    }
}

@media(prefers-reduced-motion:reduce) {
    .service-showcase-track {
        scroll-behavior: auto
    }

    .service-showcase-card,
    .service-showcase-card>img,
    .service-card-copy {
        transition: none !important
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }
}

/* Premium 3D Service Carousel */
.premium-service-section {
    background: #04121d;
    /* Very dark rich blue */
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 120px 0;
}

.premium-service-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(56, 185, 210, 0.1) 0%, transparent 50%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    pointer-events: none;
}

.premium-service-head {
    max-width: 800px;
}

.premium-service-head h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.text-gradient {
    background: linear-gradient(135deg, var(--cyan), #8fe0ce);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.premium-service-carousel-wrapper {
    width: 100%;
    padding-left: max(15px, calc((100vw - 1320px) / 2 + 15px));
}

@media (max-width: 1399.98px) {
    .premium-service-carousel-wrapper {
        padding-left: max(15px, calc((100vw - 1140px) / 2 + 15px));
    }
}

@media (max-width: 1199.98px) {
    .premium-service-carousel-wrapper {
        padding-left: max(15px, calc((100vw - 960px) / 2 + 15px));
    }
}

@media (max-width: 991.98px) {
    .premium-service-carousel-wrapper {
        padding-left: max(15px, calc((100vw - 720px) / 2 + 15px));
    }
}

@media (max-width: 767.98px) {
    .premium-service-carousel-wrapper {
        padding-left: max(15px, calc((100vw - 540px) / 2 + 15px));
    }
}

.premium-service-track {
    display: flex;
    gap: 35px;
    overflow-x: auto;
    padding: 50px 30px 60px 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.premium-service-track::-webkit-scrollbar {
    display: none;
}

.premium-3d-card {
    position: relative;
    flex: 0 0 360px;
    height: 480px;
    border-radius: 24px;
    scroll-snap-align: start;
    transform-style: preserve-3d;
    perspective: 1500px;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 575.98px) {
    .premium-3d-card {
        flex: 0 0 85vw;
        height: 440px;
    }
}

.card-image-bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    transform: translateZ(0);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: box-shadow 0.6s ease, border-color 0.6s ease;
}

.card-image-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.6s ease;
    filter: brightness(0.8) contrast(1.1);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 18, 29, 0.2) 0%, rgb(4 18 29 / 9%) 50%, rgba(4, 18, 29, 0.95) 100%);
    transition: background 0.6s ease;
}

.card-content-3d {
    position: absolute;
    inset: 0;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform-style: preserve-3d;
    pointer-events: none;
}

.card-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transform: translateZ(40px);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-num {
    font-size: 2.5rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
    line-height: 1;
}

.card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: var(--cyan);
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
}

.card-bottom-info {
    transform: translateZ(60px);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-bottom-info small {
    color: var(--cyan);
    text-transform: capitalize;
    letter-spacing: 0.15em;
    font-size: 0.65rem;
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
}

.card-bottom-info h3 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.3;
}

.card-bottom-info p {
    color: #aebfd0;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--orange);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(242, 138, 23, 0.3);
    pointer-events: auto;
    transition: all 0.4s ease;
}

.premium-3d-card:hover {
    transform: translateY(-15px) rotateX(5deg) rotateY(-5deg);
    z-index: 10;
}

.premium-3d-card:hover .card-image-bg {
    box-shadow: 20px 40px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(56, 185, 210, 0.4);
}

.premium-3d-card:hover .card-image-bg img {
    transform: scale(1.1);
    filter: brightness(1) contrast(1.15);
}

.premium-3d-card:hover .card-overlay {
    background: linear-gradient(180deg, rgba(4, 18, 29, 0.1) 0%, rgba(4, 18, 29, 0.5) 40%, rgba(4, 18, 29, 0.9) 100%);
}

.premium-3d-card:hover .card-top-bar {
    transform: translateZ(70px);
}

.premium-3d-card:hover .card-bottom-info {
    transform: translateZ(90px);
}

.premium-3d-card:hover .card-icon {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 15px 30px rgba(242, 138, 23, 0.4);
}

.premium-3d-card:hover .card-bottom-info p {
    opacity: 1;
    color: #fff;
}

.premium-3d-card:hover .explore-btn {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(242, 138, 23, 0.5);
    background: #ff9d33;
}

/* Heading-free services on a clean white background */
.premium-service-section {
    padding: 46px 0 90px;
    background: #fff;
    color: var(--navy);
    border-top: 1px solid rgba(13, 82, 105, .08)
}

.premium-service-section::before {
    display: none
}

.premium-service-toolbar {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 8px
}

.premium-toolbar-rule {
    display: flex;
    align-items: center;
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(13, 82, 105, .16))
}

.premium-toolbar-rule span {
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 6px rgba(242, 138, 23, .1)
}

.premium-service-nav {
    display: flex;
    align-items: center;
    gap: 9px
}

.premium-service-nav>span {
    margin-right: 12px;
    color: #7a919a;
    font-size: 16px;
    letter-spacing: .1em
}

.premium-service-nav>span strong {
    color: var(--orange);
    font-size: 1.05rem
}

.premium-service-nav button {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(13, 82, 105, .17);
    border-radius: 50%;
    background: #fff;
    color: #16475a;
    box-shadow: 0 8px 20px rgba(11, 70, 88, .07);
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease
}

.premium-service-nav button:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: translateY(-2px)
}

.premium-service-track {
    padding-top: 34px;
    padding-bottom: 35px
}

.card-image-bg {
    box-shadow: 0 20px 42px rgba(8, 48, 63, .17)
}

@media(max-width:575.98px) {
    .premium-service-section {
        padding: 34px 0 65px
    }

    .premium-toolbar-rule {
        display: none
    }

    .premium-service-nav {
        width: 100%;
        justify-content: flex-end
    }

    .premium-service-track {
        padding-top: 24px
    }

    .premium-service-toolbar {
        margin-bottom: 0
    }
}

/* Connected consultancy infographic */
.consultancy-infographic {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    background: #f8fbfa;
    color: #102f43
}

.consultancy-infographic:before,
.consultancy-infographic:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none
}

.consultancy-infographic:before {
    width: 430px;
    height: 430px;
    left: -260px;
    top: -230px;
    background: radial-gradient(circle, rgba(81, 174, 83, .14), transparent 69%)
}

.consultancy-infographic:after {
    width: 480px;
    height: 480px;
    right: -300px;
    bottom: -260px;
    background: radial-gradient(circle, rgba(20, 135, 165, .12), transparent 69%)
}

.consultancy-heading {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto 52px
}

.consultancy-heading>span {
    display: block;
    margin-bottom: 8px;
    color: #16805e;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .2em
}

.consultancy-heading h2 {
    margin-bottom: 8px;
    color: #0b2d45;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.045em;
    text-transform: capitalize
}

.consultancy-heading h2 em {
    display: block;
    color: #247d45;
    font-family: "Karla", sans-serif;
    font-weight: 700;
    text-transform: none
}

.consultancy-heading p {
    color: #536d77
}

.consultancy-heading-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 380px;
    max-width: 80%;
    margin: 20px auto 0;
    color: #2f9653
}

.consultancy-heading-rule:before,
.consultancy-heading-rule:after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, #7aa994)
}

.consultancy-heading-rule:after {
    background: linear-gradient(90deg, #7aa994, transparent)
}

.consultancy-map {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(320px, 390px) minmax(250px, 1fr);
    grid-template-areas: "structural structural structural" "geo core ndt" "highway core estimation" "dpr core survey" "laboratory core inspection";
    align-items: center;
    gap: 20px 62px;
    perspective: 1300px
}

@property --consultancy-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false
}

.consultancy-card {
    position: relative;
    min-height: 132px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(23, 119, 75, .22);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 13px 30px rgba(11, 67, 72, .08);
    isolation: isolate;
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.2, .75, .25, 1), box-shadow .4s ease, border-color .4s ease
}

.consultancy-card:before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -2;
    border-radius: 19px;
    background: conic-gradient(from var(--consultancy-angle), transparent 0 68%, rgba(42, 151, 82, .75) 79%, rgba(28, 139, 164, .75) 88%, transparent 100%);
    opacity: 0;
    transition: opacity .35s ease
}

.consultancy-card:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 17px;
    background: #fff
}

.consultancy-card:hover {
    z-index: 4;
    border-color: transparent;
    box-shadow: 0 23px 45px rgba(11, 67, 72, .16);
    transform: translateY(-7px) rotateX(3deg)
}

.consultancy-card:hover:before {
    opacity: 1;
    animation: consultancyBorder 2.4s linear infinite
}

.consultancy-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #16835e, #2ba07b);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 9px 20px rgba(25, 133, 94, .22);
    transition: transform .4s ease
}

.consultancy-card:hover .consultancy-icon {
    transform: translateZ(25px) rotate(-7deg) scale(1.08)
}

.consultancy-card h3 {
    margin: 1px 0 7px;
    color: #154b39;
    font-size: .88rem;
    line-height: 1.25;
    text-transform: capitalize;
    letter-spacing: .01em
}

.consultancy-card p {
    margin: 0;
    color: #61757d;
    font-size: 16px;
    line-height: 1.55
}

.consultancy-card>b {
    position: absolute;
    top: 50%;
    width: 64px;
    height: 1px;
    background: #7eaa96;
    pointer-events: none
}

.consultancy-card>b:after {
    content: "";
    position: absolute;
    top: -6px;
    width: 13px;
    height: 13px;
    border: 3px solid #f8fbfa;
    border-radius: 50%;
    background: #2a9a59;
    box-shadow: 0 0 0 1px #2a9a59
}

.consultancy-geo>b,
.consultancy-highway>b,
.consultancy-dpr>b,
.consultancy-laboratory>b {
    right: -64px
}

.consultancy-geo>b:after,
.consultancy-highway>b:after,
.consultancy-dpr>b:after,
.consultancy-laboratory>b:after {
    right: -5px
}

.consultancy-ndt>b,
.consultancy-estimation>b,
.consultancy-survey>b,
.consultancy-inspection>b {
    left: -64px
}

.consultancy-ndt>b:after,
.consultancy-estimation>b:after,
.consultancy-survey>b:after,
.consultancy-inspection>b:after {
    left: -5px
}

.consultancy-structural>b {
    left: 50%;
    top: auto;
    bottom: -43px;
    width: 1px;
    height: 43px
}

.consultancy-structural>b:after {
    left: -6px;
    bottom: -5px;
    top: auto
}

.consultancy-structural {
    grid-area: structural;
    width: min(430px, 100%);
    justify-self: center
}

.consultancy-geo {
    grid-area: geo
}

.consultancy-ndt {
    grid-area: ndt
}

.consultancy-highway {
    grid-area: highway
}

.consultancy-estimation {
    grid-area: estimation
}

.consultancy-dpr {
    grid-area: dpr
}

.consultancy-survey {
    grid-area: survey
}

.consultancy-laboratory {
    grid-area: laboratory
}

.consultancy-inspection {
    grid-area: inspection
}

.consultancy-core {
    grid-area: core;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    align-self: center;
    border-radius: 50%;
    filter: drop-shadow(0 25px 35px rgba(10, 69, 74, .15))
}

.consultancy-core:before,
.consultancy-core:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none
}

.consultancy-core:before {
    inset: -12px;
    border: 1px solid rgba(29, 135, 83, .58)
}

.consultancy-core:after {
    inset: -27px;
    border: 1px solid rgba(25, 133, 162, .22)
}

.consultancy-core-image {
    position: absolute;
    inset: 5%;
    overflow: hidden;
    border: 9px solid #fff;
    border-radius: 50%;
    background: #dcece5;
    box-shadow: 0 0 0 1px rgba(20, 119, 74, .45), inset 0 0 35px rgba(4, 40, 42, .2)
}

.consultancy-core-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(4, 35, 38, .84) 100%)
}

.consultancy-core-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% center;
    animation: consultancyImage 9s ease-in-out infinite alternate
}

.consultancy-core-image>div {
    position: absolute;
    z-index: 2;
    left: 10%;
    right: 10%;
    bottom: 12%;
    color: #fff;
    text-align: center
}

.consultancy-core-image small,
.consultancy-core-image strong {
    display: block
}

.consultancy-core-image small {
    margin-bottom: 5px;
    color: #83deb4;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .2em
}

.consultancy-core-image strong {
    font-family: "Karla", sans-serif;
    font-size: 1.05rem;
    line-height: 1.25
}

.consultancy-core-orbit {
    position: absolute;
    inset: -27px;
    border-radius: 50%;
    animation: consultancyOrbit 14s linear infinite
}

.consultancy-core-orbit i {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 3px solid #f8fbfa;
    border-radius: 50%;
    background: #228c4f;
    box-shadow: 0 0 0 1px #228c4f, 0 0 14px rgba(34, 140, 79, .4)
}

.consultancy-core-orbit i:nth-child(1) {
    top: -6px;
    left: 50%
}

.consultancy-core-orbit i:nth-child(2) {
    right: -6px;
    top: 50%
}

.consultancy-core-orbit i:nth-child(3) {
    bottom: -6px;
    left: 50%
}

.consultancy-core-orbit i:nth-child(4) {
    left: -6px;
    top: 50%
}

.consultancy-statement {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 950px;
    margin: 48px auto 0;
    padding: 17px 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, #176e42, #238a50);
    color: #fff;
    box-shadow: 0 15px 32px rgba(24, 113, 66, .18)
}

.consultancy-statement>i {
    font-size: 1.35rem
}

.consultancy-statement p {
    margin: 0;
    font-size: 16px
}

.consultancy-statement a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap
}

@keyframes consultancyBorder {
    to {
        --consultancy-angle: 360deg
    }
}

@keyframes consultancyOrbit {
    to {
        transform: rotate(360deg)
    }
}

@keyframes consultancyImage {
    to {
        transform: scale(1.08)
    }
}

@media(max-width:1199.98px) {
    .consultancy-map {
        grid-template-columns: minmax(220px, 1fr) 300px minmax(220px, 1fr);
        gap: 18px 45px
    }

    .consultancy-card {
        min-height: 145px
    }

    .consultancy-card>b {
        width: 47px
    }

    .consultancy-geo>b,
    .consultancy-highway>b,
    .consultancy-dpr>b,
    .consultancy-laboratory>b {
        right: -47px
    }

    .consultancy-ndt>b,
    .consultancy-estimation>b,
    .consultancy-survey>b,
    .consultancy-inspection>b {
        left: -47px
    }
}

@media(max-width:991.98px) {
    .consultancy-infographic {
        padding: 80px 0
    }

    .consultancy-map {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "core core" "structural structural" "geo ndt" "highway estimation" "dpr survey" "laboratory inspection";
        gap: 18px
    }

    .consultancy-core {
        width: min(370px, 80vw);
        justify-self: center;
        margin-bottom: 28px
    }

    .consultancy-card>b {
        display: none
    }

    .consultancy-card {
        min-height: 135px
    }

    .consultancy-structural {
        width: 100%
    }
}

@media(max-width:575.98px) {
    .consultancy-infographic {
        padding: 65px 0
    }

    .consultancy-heading {
        margin-bottom: 38px
    }

    .consultancy-heading h2 {
        font-size: 2.35rem
    }

    .consultancy-map {
        display: flex;
        flex-direction: column
    }

    .consultancy-core {
        order: -1;
        width: min(310px, 82vw)
    }

    .consultancy-card {
        width: 100%;
        min-height: 0
    }

    .consultancy-statement {
        align-items: flex-start;
        flex-wrap: wrap;
        border-radius: 20px
    }

    .consultancy-statement a {
        width: 100%;
        margin-left: 0;
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .22)
    }
}

@media(prefers-reduced-motion:reduce) {

    .consultancy-card:hover:before,
    .consultancy-core-orbit,
    .consultancy-core-image img {
        animation: none !important
    }

    .consultancy-card:hover {
        transform: none
    }
}

/* Premium 3D Projects */
.projects-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #061c29 0%, #0a2d3b 58%, #092633 100%);
    color: #fff
}

.projects-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 14% 15%, rgba(45, 174, 185, .18), transparent 30%), linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: auto, 46px 46px, 46px 46px;
    pointer-events: none
}

.projects-section:after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -270px;
    bottom: -310px;
    border: 1px solid rgba(97, 207, 193, .15);
    border-radius: 50%;
    box-shadow: 0 0 0 45px rgba(97, 207, 193, .025), 0 0 0 90px rgba(97, 207, 193, .018)
}

.projects-section>.container {
    position: relative;
    z-index: 2
}

.projects-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 48px
}

.projects-heading>div {
    max-width: 760px
}

.projects-heading h2 {
    margin: 0;
    font-size: 40px;
    line-height: 1.04;
    letter-spacing: -.05em
}

.projects-heading h2 em {
    color: #6dd2c1;
    font-family: "Karla", sans-serif;
    font-weight: 700
}

.projects-heading>p {
    max-width: 480px;
    margin: 0 0 6px;
    color: #aec3ca;
    font-size: .9rem;
    line-height: 1.8
}

.projects-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: repeat(2, 310px);
    gap: 22px;
    perspective: 1400px
}

.project-3d-card {
    --project-angle: 0deg;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 22px;
    background: #0a2835;
    isolation: isolate;
    transform-style: preserve-3d;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .26);
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .4s ease
}

.project-featured {
    grid-row: span 2
}

.project-image {
    position: absolute;
    inset: 0
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.82) contrast(1.05);
    transition: transform .9s cubic-bezier(.2, .75, .2, 1), filter .5s ease
}

.project-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(3, 20, 29, .18) 12%, rgba(3, 20, 29, .34) 42%, rgba(3, 19, 28, .96) 100%);
    transition: background .45s ease
}

.project-border {
    position: absolute;
    inset: 10px;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 15px;
    pointer-events: none
}

.project-border:before {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    top: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #75d8c5, transparent);
    transform: scaleX(0);
    transition: transform .5s ease
}

.project-top {
    position: absolute;
    z-index: 3;
    left: 28px;
    right: 28px;
    top: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateZ(35px)
}

.project-top span {
    font-family: "Karla", sans-serif;
    font-size: 1.65rem;
    color: rgba(255, 255, 255, .56)
}

.project-top i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(6, 34, 44, .26);
    color: #8ce1ce;
    backdrop-filter: blur(8px);
    transition: background .3s ease, color .3s ease, transform .4s ease
}

.project-copy {
    position: absolute;
    z-index: 3;
    left: 29px;
    right: 29px;
    bottom: 27px;
    transform: translateZ(48px);
    transition: transform .5s ease
}

.project-copy small {
    display: block;
    margin-bottom: 7px;
    color: #f1a04a;
    font-size: .58rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .15em
}

.project-copy h3 {
    margin-bottom: 9px;
    color: #fff;
    font-size: 1.35rem
}

.project-copy p {
    max-width: 520px;
    margin: 0;
    color: #b8cbd1;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease
}

.project-featured .project-copy {
    left: 38px;
    right: 38px;
    bottom: 38px
}

.project-featured .project-copy h3 {
    font-size: clamp(1.8rem, 3vw, 2.6rem)
}

.project-featured .project-copy p {
    font-size: .82rem;
    opacity: 1;
    transform: none
}

.project-featured .project-top {
    left: 38px;
    right: 38px;
    top: 36px
}

.project-3d-card:hover {
    z-index: 5;
    border-color: rgba(110, 214, 194, .45);
    transform: translateY(-9px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 36px 65px rgba(0, 0, 0, .38)
}

.project-3d-card:hover .project-image img {
    transform: scale(1.07);
    filter: saturate(1) contrast(1.06)
}

.project-3d-card:hover .project-overlay {
    background: linear-gradient(180deg, rgba(3, 20, 29, .08), rgba(3, 20, 29, .26) 42%, rgba(3, 19, 28, .94) 100%)
}

.project-3d-card:hover .project-copy p {
    opacity: 1;
    transform: none
}

.project-3d-card:hover .project-top i {
    background: #ec9630;
    color: #fff;
    transform: translateZ(15px) rotate(8deg)
}

.project-3d-card:hover .project-border {
    animation: projectBorderPulse 2.2s ease-in-out infinite
}

.project-3d-card:hover .project-border:before {
    transform: scaleX(1)
}

@keyframes projectBorderPulse {
    50% {
        border-color: rgba(117, 216, 197, .7);
        box-shadow: inset 0 0 22px rgba(117, 216, 197, .08), 0 0 16px rgba(117, 216, 197, .1)
    }
}

@media(max-width:1199.98px) {
    .projects-grid {
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: repeat(3, 300px)
    }

    .project-featured {
        grid-row: span 2
    }

    .projects-grid .project-3d-card:last-child {
        grid-column: span 2
    }

    .project-copy p {
        opacity: 1;
        transform: none
    }
}

@media(max-width:767.98px) {
    .projects-heading {
        display: block
    }

    .projects-heading>p {
        margin-top: 22px
    }

    .projects-grid {
        display: flex;
        overflow-x: auto;
        gap: 17px;
        padding: 5px 3px 28px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none
    }

    .projects-grid::-webkit-scrollbar {
        display: none
    }

    .project-3d-card,
    .project-featured {
        flex: 0 0 84%;
        height: 470px;
        scroll-snap-align: center
    }

    .projects-grid .project-3d-card:last-child {
        grid-column: auto
    }

    .project-featured .project-copy h3 {
        font-size: 1.8rem
    }
}

@media(max-width:575.98px) {

    .project-3d-card,
    .project-featured {
        flex-basis: 92%;
        height: 440px
    }

    .projects-heading {
        margin-bottom: 34px
    }

    .project-copy,
    .project-featured .project-copy {
        left: 25px;
        right: 25px;
        bottom: 27px
    }

    .project-top,
    .project-featured .project-top {
        left: 25px;
        right: 25px;
        top: 25px
    }
}

@media(prefers-reduced-motion:reduce) {

    .project-3d-card,
    .project-image img,
    .project-copy p,
    .project-border:before {
        transition: none !important
    }

    .project-3d-card:hover {
        transform: none
    }
}

/* Balanced four-over-four project gallery */
.projects-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 360px);
    grid-auto-rows: 360px;
    gap: 20px
}

.project-3d-card,
.project-featured {
    grid-row: auto;
    grid-column: auto
}

.project-copy,
.project-featured .project-copy {
    left: 27px;
    right: 27px;
    bottom: 29px
}

.project-top,
.project-featured .project-top {
    left: 27px;
    right: 27px;
    top: 27px
}

.project-featured .project-copy h3,
.project-copy h3 {
    font-size: 1.35rem
}

.project-featured .project-copy p {
    font-size: 16px;
    opacity: 0;
    transform: translateY(10px)
}

.project-featured:hover .project-copy p {
    opacity: 1;
    transform: none
}

@media(max-width:1199.98px) {
    .projects-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, 350px);
        grid-auto-rows: 350px
    }

    .projects-grid .project-3d-card:last-child {
        grid-column: auto
    }

    .project-3d-card,
    .project-featured {
        height: auto
    }
}

@media(max-width:767.98px) {
    .projects-grid {
        display: flex
    }

    .project-3d-card,
    .project-featured {
        height: 455px
    }
}

@media(max-width:575.98px) {

    .project-3d-card,
    .project-featured {
        height: 435px
    }
}

/* Centred Projects heading */
.projects-heading {
    display: block;
    margin-bottom: 44px;
    text-align: center
}

.projects-heading h2 {
    margin-inline: auto
}

.projects-heading h2 em {
    display: inline
}

@media(max-width:767.98px) {
    .projects-heading {
        text-align: center
    }

    .projects-heading>p {
        display: none
    }
}

/* 3D client testimonial carousel */
.testimonials-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff, #f4f8f7);
    color: #102f43
}

.testimonials-section:before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -320px;
    top: -290px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 143, 119, .11), transparent 69%);
    pointer-events: none
}

.testimonials-section>.container {
    position: relative;
    z-index: 1
}

.testimonials-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 42px
}

.testimonials-heading h2 {
    margin: 0;
    font-size: 40px;
    letter-spacing: -.05em
}

.testimonials-heading h2 em {
    color: #19896b;
    font-family: "Karla", sans-serif
}

.review-platform {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border: 1px solid rgba(16, 83, 99, .11);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(11, 70, 82, .08)
}

.review-g {
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #4285f4
}

.review-platform strong,
.review-platform span,
.review-platform small {
    display: block
}

.review-platform strong {
    font-size: .76rem
}

.review-platform div>span {
    color: #f5a623;
    font-size: 16px;
    letter-spacing: .08em
}

.review-platform small {
    color: #87989e;
    font-size: .48rem;
    text-transform: capitalize;
    letter-spacing: .08em
}

.testimonials-carousel {
    position: relative;
    padding-inline: 66px;
    perspective: 1400px
}

.testimonials-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 44px)/3);
    gap: 22px;
    overflow-x: auto;
    padding: 8px 4px 30px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none
}

.testimonials-track::-webkit-scrollbar {
    display: none
}

.testimonial-3d-card {
    position: relative;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid rgba(18, 103, 94, .14);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 42px rgba(9, 65, 72, .1);
    scroll-snap-align: start;
    isolation: isolate;
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.2, .75, .25, 1), box-shadow .4s ease, border-color .4s ease
}

.testimonial-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 23px
}

.testimonial-stars {
    color: #f5a623;
    font-size: .76rem;
    letter-spacing: .12em
}

.testimonial-card-top i {
    color: rgba(22, 130, 101, .18);
    font-size: 2.3rem
}

.testimonial-3d-card>p {
    margin: 0;
    color: #4f6872;
    font-family: "Karla", sans-serif;
    font-size: 16px;
    line-height: 1.8
}

.testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 25px;
    border-top: 1px solid rgba(17, 94, 100, .09)
}

.testimonial-person>span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #137b93, #229465);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 9px 20px rgba(20, 126, 110, .2)
}

.testimonial-person strong,
.testimonial-person small {
    display: block
}

.testimonial-person strong {
    font-size: 16px
}

.testimonial-person small {
    margin-top: 3px;
    color: #819198;
    font-size: 16px
}

.testimonial-border {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(31, 145, 112, .08);
    border-radius: 14px;
    pointer-events: none;
    transition: border-color .35s ease, box-shadow .35s ease
}

.testimonial-border:before {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    top: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #34ad86, transparent);
    transform: scaleX(0);
    transition: transform .45s ease
}

.testimonial-3d-card:hover {
    z-index: 3;
    border-color: rgba(37, 157, 123, .36);
    transform: translateY(-9px) rotateX(2deg) rotateY(-1.5deg);
    box-shadow: 0 31px 58px rgba(9, 65, 72, .17)
}

.testimonial-3d-card:hover .testimonial-border {
    border-color: rgba(37, 157, 123, .28);
    box-shadow: inset 0 0 24px rgba(39, 159, 124, .04)
}

.testimonial-3d-card:hover .testimonial-border:before {
    transform: scaleX(1)
}

.testimonial-arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(16, 91, 100, .15);
    border-radius: 50%;
    background: #fff;
    color: #174b59;
    box-shadow: 0 11px 25px rgba(8, 64, 75, .11);
    transform: translateY(-50%);
    transition: background .25s ease, color .25s ease, transform .25s ease
}

.testimonial-prev {
    left: 0
}

.testimonial-next {
    right: 0
}

.testimonial-arrow:hover {
    background: #178863;
    color: #fff;
    transform: translateY(-50%) scale(1.07)
}

.testimonial-progress {
    width: 220px;
    height: 3px;
    margin: 5px auto 0;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(19, 113, 95, .12)
}

.testimonial-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #168ba0, #2b9d68);
    transition: width .5s ease
}

@media(max-width:991.98px) {
    .testimonials-track {
        grid-auto-columns: calc((100% - 22px)/2)
    }

    .testimonials-heading {
        align-items: center
    }
}

@media(max-width:767.98px) {
    .testimonials-heading {
        display: block;
        text-align: center
    }

    .review-platform {
        width: max-content;
        max-width: 100%;
        margin: 24px auto 0
    }

    .testimonials-carousel {
        padding-inline: 0;
        padding-bottom: 58px
    }

    .testimonials-track {
        grid-auto-columns: 86%
    }

    .testimonial-arrow {
        top: auto;
        bottom: 0
    }

    .testimonial-prev {
        left: calc(50% - 54px)
    }

    .testimonial-next {
        right: calc(50% - 54px)
    }

    .testimonial-progress {
        margin-top: 18px
    }

    .testimonial-3d-card {
        min-height: 320px
    }
}

@media(max-width:575.98px) {
    .testimonials-track {
        grid-auto-columns: 94%;
        gap: 16px
    }

    .testimonial-3d-card {
        padding: 24px;
        min-height: 335px
    }

    .testimonials-heading {
        margin-bottom: 28px
    }
}

@media(prefers-reduced-motion:reduce) {

    .testimonial-3d-card,
    .testimonial-border:before,
    .testimonial-progress span {
        transition: none !important
    }

    .testimonial-3d-card:hover {
        transform: none
    }
}

/* Professional corporate footer */
.site-footer {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #051b28;
    color: #fff
}

.site-footer:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 8% 18%, rgba(36, 159, 169, .13), transparent 28%), linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    pointer-events: none
}

.site-footer:after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -250px;
    bottom: -270px;
    border: 1px solid rgba(83, 198, 178, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 45px rgba(83, 198, 178, .025), 0 0 0 90px rgba(83, 198, 178, .015)
}

.footer-accent {
    position: relative;
    z-index: 2;
    height: 4px;
    background: linear-gradient(90deg, #1487a5, #56c8b1 42%, #ec9630 72%, transparent)
}

.site-footer>.container {
    position: relative;
    z-index: 2
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr 1.05fr 1.15fr;
    gap: 52px;
    padding: 80px 0 58px
}

.footer-logo-wrap {
    width: 180px;
    /* height: 110px; */
    display: grid;
    place-items: center;
    padding: 8px 14px;
    border-radius: 96px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}

.site-footer .footer-logo {
    width: 150px;
    filter: none;
    opacity: 1;
    border-radius: 80px;
}

.footer-about>p {
    max-width: 390px;
    margin: 24px 0;
    color: #9eb5bf;
    font-size: 16px;
    line-height: 1.9
}

.footer-socials {
    display: flex;
    gap: 9px
}

.footer-socials a {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    color: #cbe0e5;
    transition: background .25s ease, border-color .25s ease, transform .25s ease
}

.footer-socials a:hover {
    background: #e99435;
    border-color: #e99435;
    color: #fff;
    transform: translateY(-3px)
}

.footer-column h3,
.footer-connect h3 {
    position: relative;
    margin-bottom: 24px;
    color: #fff;
    font-size: .93rem
}

.footer-column h3:after,
.footer-connect h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 28px;
    height: 2px;
    background: var(--orange)
}

.footer-column ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.footer-column a {
    display: inline-flex;
    align-items: center;
    color: #a9bec7;
    font-size: 16px;
    transition: color .25s ease, transform .25s ease
}

.footer-column a:before {
    content: "";
    width: 0;
    height: 1px;
    margin-right: 0;
    background: #65cdb7;
    transition: width .25s ease, margin .25s ease
}

.footer-column a:hover {
    color: #fff;
    transform: translateX(3px)
}

.footer-column a:hover:before {
    width: 13px;
    margin-right: 7px
}

.footer-expertise ul {
    grid-template-columns: 1fr
}

.footer-kicker {
    display: block;
    margin-bottom: 9px;
    color: #67d0b8;
    font-size: .58rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .18em
}

.footer-connect h3 {
    font-family: "Karla", sans-serif;
    font-size: 1.2rem
}

.footer-connect>p {
    margin-bottom: 20px;
    color: #9eb5bf;
    font-size: 16px;
    line-height: 1.75
}

.footer-subscribe {
    display: flex;
    overflow: hidden;
    margin-bottom: 22px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    transition: border-color .25s ease, box-shadow .25s ease
}

.footer-subscribe:focus-within {
    border-color: #62cdb7;
    box-shadow: 0 0 0 3px rgba(98, 205, 183, .1)
}

.footer-subscribe input {
    min-width: 0;
    flex: 1;
    padding: 13px 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 16px
}

.footer-subscribe input::placeholder {
    color: #77929e
}

.footer-subscribe button {
    width: 47px;
    border: 0;
    background: linear-gradient(135deg, #1689a5, #279875);
    color: #fff;
    transition: background .25s ease
}

.footer-subscribe button:hover {
    background: #e99435
}

.footer-contact-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 11px;
    color: #63cdb7;
    font-size: 16px
}

.footer-contact-row a {
    color: #bdd0d7
}

.footer-contact-row a:hover {
    color: #fff
}

.footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 28px;
    padding: 22px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, .1)
}

.site-footer .footer-bottom p {
    color: #849da8;
    font-size: 16px
}

.footer-bottom .copyright {
    text-align: left
}

.footer-bottom>div {
    display: flex;
    align-items: center;
    gap: 12px
}

.footer-bottom>div span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #59737e
}

.footer-bottom>div a {
    color: #849da8;
    font-size: .64rem
}

.footer-bottom>div a:hover {
    color: #fff
}

.footer-back-top {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    transition: background .25s ease, transform .25s ease
}

.footer-back-top:hover {
    background: #e99435;
    transform: translateY(-3px)
}

@media(max-width:1199.98px) {
    .footer-main-grid {
        grid-template-columns: 1.2fr .7fr 1fr;
        gap: 42px
    }

    .footer-connect {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 35px;
        align-items: start
    }

    .footer-connect .footer-kicker,
    .footer-connect h3,
    .footer-connect>p {
        grid-column: 1
    }

    .footer-connect .footer-subscribe,
    .footer-connect .footer-contact-row {
        grid-column: 2
    }

    .footer-connect .footer-subscribe {
        grid-row: 1/3;
        margin-top: 4px
    }

    .footer-connect h3 {
        grid-row: 2
    }

    .footer-connect>p {
        grid-row: 3
    }

    .footer-contact-row {
        grid-row: auto
    }
}

@media(max-width:767.98px) {
    .footer-main-grid {
        grid-template-columns: 1fr 1fr;
        padding: 62px 0 42px
    }

    .footer-about,
    .footer-connect {
        grid-column: 1/-1
    }

    .footer-connect {
        display: block
    }

    .footer-bottom {
        grid-template-columns: 1fr auto
    }

    .footer-bottom>div {
        display: none
    }

    .footer-about>p {
        max-width: none
    }
}

@media(max-width:575.98px) {
    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .footer-about,
    .footer-connect {
        grid-column: auto
    }

    .footer-logo-wrap {
        width: 165px
    }

    .footer-bottom {
        gap: 14px
    }

    .site-footer .footer-bottom p {
        line-height: 1.5
    }
}

@media(prefers-reduced-motion:reduce) {

    .footer-back-top,
    .footer-column a,
    .footer-socials a {
        transition: none !important
    }
}

/* Three-column footer with two-column services */
.footer-main-grid {
    grid-template-columns: 1.15fr .55fr 1.35fr;
    gap: 58px
}

.footer-expertise ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 25px;
    row-gap: 12px
}

@media(max-width:991.98px) {
    .footer-main-grid {
        grid-template-columns: 1fr 1fr
    }

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

    .footer-expertise ul {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:575.98px) {
    .footer-main-grid {
        grid-template-columns: 1fr
    }

    .footer-about {
        grid-column: auto
    }

    .footer-expertise ul {
        grid-template-columns: 1fr
    }
}

/* Unified Medini two-blue brand palette */
::selection {
    background: rgba(28, 121, 182, .22);
    color: var(--brand-dark)
}

.nav-link:after,
.about-tag:before {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary))
}

.btn-brand {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: 0 10px 25px rgba(28, 121, 182, .27)
}

.btn-brand:hover {
    box-shadow: 0 15px 35px rgba(28, 121, 182, .36)
}

.eyebrow,
.section-tag,
.footer-kicker {
    color: var(--brand-primary)
}

.hero h1 span {
    background: linear-gradient(90deg, #64b6eb, var(--brand-primary));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.hero-dot.active,
.hero-arrow:hover,
.hero-arrow:focus-visible,
.hero h1.is-typing:after {
    background: var(--brand-primary);
    border-color: var(--brand-primary)
}

.hero-visual:before {
    border-color: rgba(28, 121, 182, .82);
    box-shadow: 0 0 0 7px rgba(27, 120, 181, .05), 0 0 45px rgba(28, 121, 182, .25)
}

.hero-orbit-lights i {
    background: #7fc2ed;
    box-shadow: 0 0 0 6px rgba(28, 121, 182, .12), 0 0 18px rgba(28, 121, 182, .75)
}

.hero-image-badge>span,
.about-caption-icon,
.about-model-mark>span {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary))
}

.about-title .about-company {
    color: var(--brand-primary)
}

.about-photo-experience {
    border-left-color: var(--brand-primary)
}

.about-capabilities i {
    color: var(--brand-primary)
}

.about-cta {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
    box-shadow: 0 12px 25px rgba(28, 121, 182, .2)
}

.about-cta:hover {
    background: var(--brand-primary);
    box-shadow: 0 17px 30px rgba(28, 121, 182, .28)
}

.premium-toolbar-rule span,
.premium-service-nav button:hover,
.card-icon,
.premium-3d-card:hover .card-icon {
    background: var(--brand-primary);
    border-color: var(--brand-primary)
}

.premium-service-nav>span strong,
.card-bottom-info small {
    color: var(--brand-primary)
}

.consultancy-heading>span,
.consultancy-heading h2,
.consultancy-card h3 {
    color: var(--brand-dark)
}

.consultancy-heading h2 {
    background: linear-gradient(90deg, var(--brand-dark), var(--brand-primary));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.consultancy-heading-rule,
.consultancy-icon {
    color: #fff
}

.consultancy-icon {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: 0 9px 20px rgba(28, 121, 182, .22)
}

.consultancy-card {
    border-color: rgba(28, 121, 182, .22)
}

.consultancy-card:before {
    background: conic-gradient(from var(--consultancy-angle), transparent 0 68%, rgba(28, 121, 182, .78) 79%, rgba(27, 120, 181, .78) 88%, transparent 100%)
}

.consultancy-card>b,
.consultancy-core-orbit i {
    background: var(--brand-primary)
}

.consultancy-card>b:after {
    background: var(--brand-primary);
    box-shadow: 0 0 0 1px var(--brand-primary)
}

.consultancy-core:before {
    border-color: rgba(28, 121, 182, .58)
}

.consultancy-core-image small {
    color: #86c5ee
}

.projects-section {
    background: linear-gradient(145deg, #071f33 0%, var(--brand-dark) 58%, #0b395b 100%)
}

.project-copy small {
    color: #77bde9
}

.project-top i {
    color: #78bee9
}

.project-3d-card:hover {
    border-color: rgba(28, 121, 182, .58)
}

.project-3d-card:hover .project-top i {
    background: var(--brand-primary)
}

.project-border:before {
    background: linear-gradient(90deg, transparent, var(--brand-primary), transparent)
}

.testimonials-section {
    background: linear-gradient(180deg, #fff, var(--brand-light))
}

.testimonials-heading h2 {
    color: var(--brand-dark)
}

.review-g,
.testimonial-stars {
    color: var(--brand-primary)
}

.testimonial-person>span {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: 0 9px 20px rgba(28, 121, 182, .2)
}

.testimonial-3d-card:hover {
    border-color: rgba(28, 121, 182, .38)
}

.testimonial-border:before,
.testimonial-progress span {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary))
}

.testimonial-arrow:hover {
    background: var(--brand-primary)
}

.footer-accent {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), #72b8e5, transparent)
}

.footer-column h3:after,
.footer-connect h3:after {
    background: var(--brand-primary)
}

.footer-column a:before {
    background: var(--brand-secondary)
}

.footer-socials a:hover,
.footer-back-top:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary)
}

.experience-badge strong,
.service-card-copy small,
.footer-kicker {
    color: var(--brand-primary)
}

.about-photo-caption small {
    color: #83c4ee
}

.about-photo-lines span:nth-child(3) {
    background: var(--brand-primary);
    box-shadow: 0 0 0 7px rgba(28, 121, 182, .13), 0 0 20px rgba(28, 121, 182, .45)
}

.consultancy-heading-rule:before {
    background: linear-gradient(90deg, transparent, var(--brand-primary))
}

.consultancy-heading-rule:after {
    background: linear-gradient(90deg, var(--brand-secondary), transparent)
}

.consultancy-core:after {
    border-color: rgba(27, 120, 181, .24)
}

.consultancy-core-orbit i {
    box-shadow: 0 0 0 1px var(--brand-primary), 0 0 14px rgba(28, 121, 182, .42)
}

.consultancy-core-image {
    background: var(--brand-light);
    box-shadow: 0 0 0 1px rgba(28, 121, 182, .5), inset 0 0 35px rgba(9, 45, 73, .2)
}

.review-platform div>span {
    color: var(--brand-primary)
}

@keyframes projectBorderPulse {
    50% {
        border-color: rgba(28, 121, 182, .72);
        box-shadow: inset 0 0 22px rgba(28, 121, 182, .09), 0 0 16px rgba(27, 120, 181, .12)
    }
}

/* Blue and orange brand balance: blue structure, orange emphasis */
.btn-brand {
    background: var(--brand-primary)
}

.btn-brand:hover {
    background: var(--brand-secondary)
}

.eyebrow,
.section-tag {
    color: var(--brand-secondary)
}

.hero h1 span {
    background: linear-gradient(90deg, #69b9ec 0%, var(--brand-primary) 68%, var(--brand-secondary) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.hero-dot.active,
.hero h1.is-typing:after {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary)
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
    background: var(--brand-primary);
    border-color: var(--brand-primary)
}

.hero-orbit-lights i {
    border-color: #fff;
    background: var(--brand-secondary);
    box-shadow: 0 0 0 6px rgba(233, 126, 30, .12), 0 0 18px rgba(233, 126, 30, .66)
}

.about-photo-experience {
    border-left-color: var(--brand-secondary)
}

.about-photo-caption small {
    color: #ffc28c
}

.about-photo-lines span:nth-child(3) {
    background: var(--brand-secondary);
    box-shadow: 0 0 0 7px rgba(233, 126, 30, .13), 0 0 20px rgba(233, 126, 30, .45)
}

.premium-toolbar-rule span {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary)
}

.premium-service-nav>span strong,
.card-bottom-info small {
    color: var(--brand-secondary)
}

.premium-service-nav button:hover,
.card-icon,
.premium-3d-card:hover .card-icon {
    background: var(--brand-primary);
    border-color: var(--brand-primary)
}

.consultancy-heading>span {
    color: var(--brand-secondary)
}

.consultancy-icon {
    background: var(--brand-primary);
    box-shadow: 0 9px 20px rgba(28, 121, 182, .22)
}

.consultancy-card:before {
    background: conic-gradient(from var(--consultancy-angle), transparent 0 68%, rgba(28, 121, 182, .78) 79%, rgba(233, 126, 30, .82) 88%, transparent 100%)
}

.consultancy-card>b:after,
.consultancy-core-orbit i {
    background: var(--brand-secondary)
}

.consultancy-heading-rule:after {
    background: linear-gradient(90deg, var(--brand-secondary), transparent)
}

.project-copy small {
    color: #ffad63
}

.project-3d-card:hover .project-top i {
    background: var(--brand-secondary)
}

.project-border:before {
    background: linear-gradient(90deg, transparent, var(--brand-primary), var(--brand-secondary), transparent)
}

.review-g {
    color: var(--brand-primary)
}

.testimonial-stars,
.review-platform div>span {
    color: var(--brand-secondary)
}

.testimonial-person>span {
    background: var(--brand-primary)
}

.testimonial-border:before,
.testimonial-progress span {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary))
}

.testimonial-arrow:hover {
    background: var(--brand-primary)
}

.footer-accent {
    background: linear-gradient(90deg, var(--brand-primary) 0 58%, var(--brand-secondary) 78%, transparent)
}

.footer-column h3:after {
    background: var(--brand-secondary)
}

.footer-column a:before {
    background: var(--brand-primary)
}

.footer-socials a:hover,
.footer-back-top:hover {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary)
}

.experience-badge strong,
.service-card-copy small,
.footer-kicker {
    color: var(--brand-secondary)
}

/* Karla typography for navigation, headings and heading labels */
#mainNav .nav-link,
#mainNav .dropdown-item,
#mainNav .btn,
h1,
h1 *,
h2,
h2 *,
h3,
h3 *,
h4,
h4 *,
h5,
h5 *,
h6,
h6 *,
.eyebrow,
.section-tag,
.consultancy-heading>span,
.footer-kicker {
    font-family: "Karla", sans-serif;
}

/* Mulish is reserved for supporting content, points and footer copy */
main :where(p, li, small),
.hero-copy,
.hero-stats span,
.about-capabilities span,
.experience-badge span,
.testimonial-person strong,
.site-footer :where(p, li, a, span, input, button) {
    font-family: "Mulish", sans-serif;
}

/* Responsive services navigation dropdown */
.services-dropdown-menu {
    left: 50%;
    right: auto;
    top: 100%;
    transform: translateX(-50%);
    width: 500px;
    padding: 12px;
    border: 1px solid rgba(10, 48, 72, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 50px rgba(5, 29, 48, .16);
    column-count: 2;
    column-gap: 8px;
}

.services-dropdown > .services-dropdown-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Keep the dropdown arrow beside the Services label */
.services-dropdown > .dropdown-toggle::after {
    position: static;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .38em;
    vertical-align: .16em;
    border-top: .35em solid currentColor;
    border-right: .35em solid transparent;
    border-bottom: 0;
    border-left: .35em solid transparent;
    background: transparent;
    transition: transform .2s ease;
}

.services-dropdown > .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.services-dropdown-menu li {
    break-inside: avoid;
}

.services-dropdown-menu .dropdown-item {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--navy);
    font-size: .88rem;
    font-weight: 650;
    white-space: normal;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.services-dropdown-menu .dropdown-item:hover,
.services-dropdown-menu .dropdown-item:focus {
    color: #fff;
    background: var(--brand-primary);
    transform: translateX(3px);
}

.projects-dropdown-menu {
    left: 50%;
    right: auto;
    top: 100%;
    width: 255px;
    padding: 10px;
    border: 1px solid rgba(10, 48, 72, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 50px rgba(5, 29, 48, .16);
    transform: translateX(-50%);
}

.projects-dropdown > .dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 7px;
    white-space: nowrap;
}

.projects-dropdown > .dropdown-toggle::after {
    display: none;
}

.projects-dropdown-chevron {
    flex: 0 0 auto;
    font-size: .72rem;
    line-height: 1;
    transition: transform .22s ease;
}

.projects-dropdown > .dropdown-toggle[aria-expanded="true"] .projects-dropdown-chevron,
.projects-dropdown:hover > .dropdown-toggle .projects-dropdown-chevron {
    transform: rotate(180deg);
}

.projects-dropdown-menu .dropdown-item {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--navy);
    font-size: .88rem;
    font-weight: 650;
    white-space: normal;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.projects-dropdown-menu .dropdown-item:hover,
.projects-dropdown-menu .dropdown-item:focus {
    color: #fff;
    background: var(--brand-primary);
    transform: translateX(3px);
}

@media (min-width: 992px) {
    .services-dropdown:hover > .dropdown-menu,
    .projects-dropdown:hover > .dropdown-menu,
    .projects-dropdown:focus-within > .dropdown-menu {
        display: block !important;
        margin-top: 0;
    }
}

@media (max-width: 991.98px) {
    .services-dropdown-menu {
        position: static !important;
        left: auto;
        right: auto;
        width: 100%;
        max-height: 310px;
        margin: 2px 0 8px !important;
        overflow-y: auto;
        transform: none !important;
        column-count: 1;
        border-radius: 10px;
        box-shadow: inset 0 0 0 1px rgba(10, 48, 72, .05);
    }

    .services-dropdown > .services-dropdown-menu {
        left: auto;
        right: auto;
        transform: none;
    }

    .services-dropdown-menu .dropdown-item {
        padding: 9px 12px;
    }

    .projects-dropdown-menu {
        position: static !important;
        left: auto;
        right: auto;
        width: 100%;
        margin: 2px 0 8px !important;
        transform: none !important;
        border-radius: 10px;
        box-shadow: inset 0 0 0 1px rgba(10, 48, 72, .05);
    }

    .projects-dropdown-menu .dropdown-item {
        padding: 9px 12px;
    }

    .projects-dropdown > .dropdown-toggle {
        display: flex;
        width: 100%;
    }
}
/* Shared snake-flow navigation for service and project detail pages */
.process-flow-grid.process-flow-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 64px;
    margin-top: 46px;
    padding: 12px 26px;
    perspective: 1400px
}

body .process-flow-grid.process-flow-grid > a {
    position: relative;
    display: flex;
    min-height: 72px;
    padding: 13px 22px 13px 64px;
    align-items: center;
    border: 1px solid rgba(79, 69, 181, .3);
    border-radius: 5px 13px 13px 5px;
    background: linear-gradient(135deg, #0e81c2, #0e81c2 62%, #0e81c2);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 17px 34px rgba(17, 25, 72, .2), inset 0 1px rgba(255,255,255,.1);
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
    z-index: 2
}

body .process-flow-grid.process-flow-grid > a:hover,
body .process-flow-grid.process-flow-grid > a.active {
    border-color: rgba(174, 81, 255, .66);
    background: linear-gradient(135deg, #17205b, #243278 62%, #151e57);
    color: #fff;
    box-shadow: 0 25px 46px rgba(17, 25, 72, .28), 0 0 26px rgba(154, 70, 245, .12), inset 0 1px rgba(255,255,255,.14);
    transform: translateY(-6px) rotateX(2deg) translateZ(18px)
}

.process-flow-grid > a > strong {
    position: absolute;
    top: 50%;
    left: -26px;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 3px solid #f18219;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #f18219, #f18219 52%, #f18219);
    color: #fff;
    font: 750 1rem/1 "Karla", sans-serif;
    box-shadow: 0 10px 22px rgba(96, 28, 164, .35), 0 0 0 5px rgba(160, 73, 240, .13), inset 0 2px 7px rgba(255,255,255,.42);
    text-shadow: 0 2px 4px rgba(0,0,0,.25);
    transform: translateY(-50%) translateZ(28px);
    z-index: 3
}

.process-flow-grid > a > strong::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%
}

.process-flow-grid > a > span { line-height: 1.35 }

/* Place items in alternating rows so their visual order follows a snake path. */
.process-flow-grid > a:nth-child(1) { grid-area: 1 / 1 }
.process-flow-grid > a:nth-child(2) { grid-area: 1 / 2 }
.process-flow-grid > a:nth-child(3) { grid-area: 1 / 3 }
.process-flow-grid > a:nth-child(4) { grid-area: 2 / 3 }
.process-flow-grid > a:nth-child(5) { grid-area: 2 / 2 }
.process-flow-grid > a:nth-child(6) { grid-area: 2 / 1 }
.process-flow-grid > a:nth-child(7) { grid-area: 3 / 1 }
.process-flow-grid > a:nth-child(8) { grid-area: 3 / 2 }
.process-flow-grid > a:nth-child(9) { grid-area: 3 / 3 }
.process-flow-grid > a:nth-child(10) { grid-area: 4 / 3 }
.process-flow-grid > a:nth-child(11) { grid-area: 4 / 2 }
.process-flow-grid > a:nth-child(12) { grid-area: 4 / 1 }

.process-flow-grid > a::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: .6;
    z-index: -1
}

.process-flow-grid > a:nth-child(6n+1)::after,
.process-flow-grid > a:nth-child(6n+2)::after {
    top: 50%;
    right: -65px;
    width: 65px;
    border-top: 2px dotted #ea7e18
}

.process-flow-grid > a:nth-child(6n+4)::after,
.process-flow-grid > a:nth-child(6n+5)::after {
    top: 50%;
    left: -65px;
    width: 65px;
    border-top: 2px dotted #ea7e18
}

.process-flow-grid > a:nth-child(3)::after,
.process-flow-grid > a:nth-child(6)::after,
.process-flow-grid > a:nth-child(9)::after {
    top: 100%;
    left: 50%;
    width: 0;
    height: 35px;
    border-left: 2px dotted #ea7e18
}

@media(max-width:991.98px) {
    .process-flow-grid.process-flow-grid {
        grid-template-columns: 1fr;
        gap: 26px;
        width: min(100%, 650px);
        margin-inline: auto;
        padding: 10px 30px
    }

    .process-flow-grid.process-flow-grid > a {
        grid-area: auto !important;
        width: 100%
    }

    .process-flow-grid.process-flow-grid > a::after {
        top: 100%;
        bottom: auto;
        left: 50%;
        right: auto;
        width: 0;
        height: 27px;
        border: 0;
        border-left: 2px dotted #ea7e18
    }

    .process-flow-grid.process-flow-grid > a:last-child::after { display: none }
}

@media(max-width:575.98px) {
    .process-flow-grid.process-flow-grid { padding: 8px 4px 8px 24px }
    body .process-flow-grid.process-flow-grid > a { min-height: 68px; padding: 12px 15px 12px 52px; font-size: .84rem }
    .process-flow-grid > a > strong { left: -22px; width: 52px; height: 52px; font-size: .9rem }
}

@media(prefers-reduced-motion:reduce) {
    body .process-flow-grid.process-flow-grid > a { transition: none; transform: none }
}

/* About page */
.about-page-hero {
    position: relative;
    overflow: hidden;
    padding: 155px 0 95px;
    background: linear-gradient(135deg, #f9fbfb 0%, #eef7f6 52%, #fff7ed 100%)
}

.about-page-hero:before,
.about-page-story:before,
.about-page-process:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(13, 82, 105, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 82, 105, .04) 1px, transparent 1px);
    background-size: 42px 42px
}

.about-page-hero .container,
.about-page-story .container,
.about-page-process .container {
    position: relative;
    z-index: 1
}

.about-page-hero h1,
.about-page-story h2,
.about-page-capabilities h2,
.about-page-process h2 {
    margin: 14px 0 20px;
    color: #07344b;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em
}

.about-page-hero h1 {
    max-width: 650px;
    font-size: clamp(2.6rem, 5vw, 5rem)
}

.about-page-hero p,
.about-page-process p {
    max-width: 620px;
    color: #516a75;
    font-size: 1.02rem;
    line-height: 1.85
}

.about-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
}

.about-page-primary,
.about-page-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 20px;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease
}

.about-page-primary {
    gap: 9px;
    background: linear-gradient(135deg, #07344b, #147eaa);
    color: #fff;
    box-shadow: 0 18px 34px rgba(20, 126, 170, .22)
}

.about-page-secondary {
    border: 1px solid rgba(7, 52, 75, .16);
    background: rgba(255, 255, 255, .72);
    color: #07344b
}

.about-page-primary:hover,
.about-page-secondary:hover {
    transform: translateY(-3px)
}

.about-page-primary:hover {
    color: #fff;
    box-shadow: 0 24px 44px rgba(20, 126, 170, .3)
}

.about-page-visual {
    position: relative;
    max-width: 590px;
    margin-inline: auto;
    perspective: 1200px
}

.about-page-photo {
    position: relative;
    overflow: hidden;
    min-height: 455px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 26px;
    background: #dce8e8;
    box-shadow: 0 34px 80px rgba(7, 52, 75, .22);
    transform: rotateX(6deg) rotateY(-9deg);
    transform-style: preserve-3d;
    transition: transform .45s ease, box-shadow .45s ease
}

.about-page-photo:before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 2;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(115deg, #e8791a, #1c79b6, #62b256, #e8791a);
    background-size: 220% 220%;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: aboutBorderMove 6s linear infinite;
    pointer-events: none
}

.about-page-photo:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 28, 42, .02), rgba(4, 28, 42, .72));
    pointer-events: none
}

.about-page-photo img {
    width: 100%;
    height: 455px;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform .7s ease
}

.about-page-visual:hover .about-page-photo {
    transform: rotateX(0deg) rotateY(0deg) translateY(-8px);
    box-shadow: 0 42px 95px rgba(7, 52, 75, .3)
}

.about-page-visual:hover .about-page-photo img {
    transform: scale(1.09)
}

.about-page-photo-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff
}

.about-page-photo-caption i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(232, 121, 26, .95);
    box-shadow: 0 12px 25px rgba(0, 0, 0, .22)
}

.about-page-photo-caption small,
.about-page-depth-card small {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: capitalize
}

.about-page-photo-caption strong {
    display: block;
    margin-top: 3px;
    font-size: 1rem
}

.about-page-depth-card {
    position: absolute;
    right: -14px;
    bottom: -24px;
    z-index: 4;
    width: 190px;
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    color: #07344b;
    box-shadow: 0 22px 55px rgba(7, 52, 75, .19);
    backdrop-filter: blur(12px);
    animation: aboutFloat 4.2s ease-in-out infinite
}

.about-page-depth-card span {
    display: block;
    color: #e8791a;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1
}

.about-page-story,
.about-page-process {
    position: relative;
    overflow: hidden;
    background: #fff
}

.about-page-story h2,
.about-page-capabilities h2,
.about-page-process h2 {
    font-size: clamp(2rem, 3.6vw, 3.4rem)
}

.about-page-copy-stack {
    padding-left: 28px;
    border-left: 3px solid #e8791a
}

.about-page-copy-stack p {
    margin: 0;
    color: #506873;
    font-size: 1rem;
    line-height: 1.9;
    text-align: justify
}

.about-page-copy-stack p+p {
    margin-top: 18px
}

.about-page-copy-stack strong {
    color: #07344b;
    font-weight: 900
}

.about-page-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 58px
}

.about-page-stat,
.about-page-capability,
.about-page-process-list>div {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(13, 82, 105, .12);
    background: #fff;
    box-shadow: 0 18px 45px rgba(7, 52, 75, .08);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease
}

.about-page-stat {
    min-height: 178px;
    padding: 24px;
    border-radius: 16px
}

.about-page-stat:before,
.about-page-capability:before,
.about-page-process-list>div:before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 3px solid transparent;
    background: linear-gradient(90deg, #e8791a, #1c79b6, #62b256) top left / 0 3px no-repeat;
    transition: background-size .35s ease;
    pointer-events: none
}

.about-page-stat:hover,
.about-page-capability:hover,
.about-page-process-list>div:hover {
    transform: translateY(-8px);
    border-color: rgba(28, 121, 182, .24);
    box-shadow: 0 26px 60px rgba(7, 52, 75, .14)
}

.about-page-stat:hover:before,
.about-page-capability:hover:before,
.about-page-process-list>div:hover:before {
    background-size: 100% 3px
}

.about-page-stat i,
.about-page-capability i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgba(28, 121, 182, .1);
    color: #1c79b6;
    font-size: 1.25rem
}

.about-page-stat strong,
.about-page-stat span {
    display: block
}

.about-page-stat strong {
    color: #07344b;
    font-size: 1.05rem
}

.about-page-stat span {
    margin-top: 8px;
    color: #647984;
    font-size: .9rem;
    line-height: 1.55
}

.about-page-capabilities {
    background: linear-gradient(180deg, #f6faf9, #fff)
}

.about-page-section-head {
    max-width: 760px;
    margin-bottom: 34px
}

.about-page-capability {
    height: 100%;
    padding: 28px;
    border-radius: 18px
}

.about-page-capability h3 {
    margin-bottom: 12px;
    color: #07344b;
    font-size: 1.15rem;
    font-weight: 850
}

.about-page-capability p {
    margin: 0;
    color: #5e737d;
    font-size: .95rem;
    line-height: 1.75
}

.about-page-process {
    background: linear-gradient(135deg, #fff 0%, #f3f8f8 100%)
}

.about-page-process-list {
    display: grid;
    gap: 16px
}

.about-page-process-list>div {
    padding: 24px 26px 24px 88px;
    border-radius: 18px
}

.about-page-process-list span {
    position: absolute;
    left: 24px;
    top: 24px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #07344b;
    color: #fff;
    font-size: .82rem;
    font-weight: 900
}

.about-page-process-list strong {
    display: block;
    color: #07344b;
    font-size: 1.08rem
}

.about-page-process-list p {
    margin: 8px 0 0;
    color: #5e737d;
    font-size: .94rem;
    line-height: 1.65
}

@keyframes aboutBorderMove {
    to {
        background-position: 220% 0
    }
}

@keyframes aboutFloat {
    50% {
        transform: translateY(-12px)
    }
}

@media(max-width:991.98px) {
    .about-page-hero {
        padding: 130px 0 75px
    }

    .about-page-hero h1,
    .about-page-hero p,
    .about-page-story h2,
    .about-page-section-head,
    .about-page-process h2,
    .about-page-process p {
        max-width: none
    }

    .about-page-photo {
        transform: none
    }

    .about-page-stats {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:575.98px) {
    .about-page-hero {
        padding: 112px 0 60px
    }

    .about-page-actions {
        flex-direction: column
    }

    .about-page-primary,
    .about-page-secondary {
        width: 100%
    }

    .about-page-photo,
    .about-page-photo img {
        min-height: 360px;
        height: 360px
    }

    .about-page-depth-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 16px
    }

    .about-page-copy-stack {
        padding-left: 18px
    }

    .about-page-stats {
        grid-template-columns: 1fr
    }

    .about-page-process-list>div {
        padding: 78px 22px 22px
    }
}

@media(prefers-reduced-motion:reduce) {

    .about-page-photo:before,
    .about-page-depth-card {
        animation: none !important
    }

    .about-page-photo,
    .about-page-photo img,
    .about-page-stat,
    .about-page-capability,
    .about-page-process-list>div,
    .about-page-primary,
    .about-page-secondary {
        transition: none !important
    }
}

/* Classic About page banner */
.about-page-banner {
    min-height: 760px;
    display: flex;
    align-items: center;
    padding: 165px 0 110px;
    background: #061b2a;
    color: #fff
}

.about-banner-media {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 17, 28, .96) 0%, rgba(6, 30, 45, .88) 44%, rgba(7, 45, 58, .62) 72%, rgba(9, 60, 65, .38) 100%), url('../assets/hero-slide-1.png') center/cover no-repeat;
    transform: scale(1.02)
}

.about-page-banner:before {
    z-index: 1;
    opacity: .42;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    mask-image: linear-gradient(90deg, #000, transparent 72%)
}

.about-page-banner:after {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -180px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(232, 121, 26, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 44px rgba(28, 121, 182, .08), 0 0 90px rgba(232, 121, 26, .2);
    pointer-events: none
}

.about-page-banner .container {
    position: relative;
    z-index: 2
}

.about-page-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: capitalize
}

.about-page-breadcrumb a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none
}

.about-page-breadcrumb span {
    color: rgba(255, 255, 255, .38)
}

.about-page-breadcrumb strong {
    color: #f3a650
}

.about-page-banner .section-tag {
    color: #f3a650
}

.about-page-banner h1 {
    max-width: 720px;
    color: #fff;
    text-shadow: 0 18px 45px rgba(0, 0, 0, .28)
}

.about-page-banner p {
    max-width: 640px;
    color: rgba(255, 255, 255, .82)
}

.about-page-banner .about-page-secondary {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    backdrop-filter: blur(10px)
}

.about-banner-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 610px;
    margin-top: 34px
}

.about-banner-highlights div {
    position: relative;
    overflow: hidden;
    min-height: 92px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px)
}

.about-banner-highlights div:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #e8791a, #1c79b6, #62b256) top left/0 3px no-repeat;
    transition: background-size .35s ease
}

.about-banner-highlights div:hover:before {
    background-size: 100% 3px
}

.about-banner-highlights strong,
.about-banner-highlights span {
    display: block
}

.about-banner-highlights strong {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900
}

.about-banner-highlights span {
    margin-top: 7px;
    color: rgba(255, 255, 255, .68);
    font-size: .82rem;
    font-weight: 700
}

.about-page-banner .about-page-photo {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 36px 90px rgba(0, 0, 0, .42);
    transform: rotateX(5deg) rotateY(-8deg) translateZ(0)
}

.about-page-banner .about-page-depth-card {
    background: rgba(255, 255, 255, .94)
}

@media(max-width:991.98px) {
    .about-page-banner {
        min-height: auto;
        padding: 135px 0 80px
    }

    .about-banner-media {
        background-position: 58% center
    }

    .about-page-banner .about-page-photo {
        transform: none
    }
}

@media(max-width:575.98px) {
    .about-page-banner {
        padding: 118px 0 62px
    }

    .about-page-breadcrumb {
        gap: 7px;
        font-size: .68rem
    }

    .about-banner-highlights {
        grid-template-columns: 1fr;
        margin-top: 24px
    }

    .about-banner-highlights div {
        min-height: 78px
    }
}

/* Simplified About banner */
.about-page-banner {
    min-height: 460px;
    padding: 150px 0 95px;
    text-align: left
}

.about-page-banner .container {
    display: block
}

.about-banner-content {
    max-width: 820px;
    margin-inline: 0
}

.about-banner-content h1 {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 20px 48px rgba(0, 0, 0, .32)
}

.about-banner-content p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(1rem, 1.8vw, 1.18rem);
    line-height: 1.85
}

.about-page-banner .about-page-visual {
    max-width: 410px;
    margin-inline: auto
}

.about-page-banner .about-page-visual-empty {
    min-height: 310px
}

.about-page-banner .about-page-photo {
    min-height: 360px
}

.about-page-banner .about-page-photo img {
    height: 360px
}

.about-page-banner .about-page-photo:after {
    background: linear-gradient(180deg, rgba(4, 28, 42, .03), rgba(4, 28, 42, .28))
}

.about-banner-shape {
    position: relative;
    width: min(100%, 410px);
    aspect-ratio: 620 / 470;
    margin-inline: auto;
    filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .3))
}

.about-banner-shape:before {
    display: none
}

.about-banner-shape:after {
    display: none
}

.about-banner-shape-accent {
    display: none
}

.about-banner-shape-photo {
    width: 100%;
    height: 100%;
    transition: transform .45s ease
}

.about-banner-shape-photo:before {
    display: none
}

.about-banner-shape-photo svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible
}

.about-banner-image-border {
    fill: none;
    stroke: rgba(255, 255, 255, .96);
    stroke-width: 9;
    vector-effect: non-scaling-stroke
}

.about-banner-image-border-accent {
    fill: none;
    stroke: #73dfb9;
    stroke-width: 3;
    vector-effect: non-scaling-stroke
}

.about-banner-shape:hover .about-banner-shape-photo {
    transform: translateY(-8px) scale(1.015)
}

@keyframes aboutShapeBorder {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:991.98px) {
    .about-page-banner {
        min-height: 390px;
        padding: 132px 0 78px;
        text-align: center
    }

    .about-banner-content {
        margin-inline: auto
    }

    .about-banner-content p {
        margin-inline: auto
    }

    .about-banner-shape {
        margin: 16px auto 0
    }
}

@media(max-width:575.98px) {
    .about-page-banner {
        min-height: 340px;
        padding: 112px 0 56px
    }

    .about-banner-content p {
        line-height: 1.7
    }

    .about-page-banner .about-page-photo,
    .about-page-banner .about-page-photo img {
        min-height: 300px;
        height: 300px
    }

    .about-banner-shape {
        width: min(90%, 320px);
        aspect-ratio: 620 / 470
    }

    .about-banner-shape-photo {
        width: 100%;
        height: 100%
    }
}