/* =========================================================
   PCG COMPANY PROFILE
   MAIN DESIGN SYSTEM
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --navy:
        #061a2a;

    --navy-2:
        #09243a;

    --navy-3:
        #0d304b;

    --blue:
        #1676c5;

    --blue-light:
        #4da3e8;

    --accent:
        #f6a800;

    --accent-light:
        #ffc14d;

    --white:
        #ffffff;

    --white-soft:
        rgba(255,255,255,.72);

    --white-muted:
        rgba(255,255,255,.48);

    --border:
        rgba(255,255,255,.12);


    --text-dark:
        #101c2d;


    --font-display:
        "Manrope",
        sans-serif;

    --font-body:
        "DM Sans",
        sans-serif;


    --container:
        1240px;

    --padding:
        32px;


    --transition:
        350ms cubic-bezier(.22,1,.36,1);

}



/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    scroll-behavior:
        smooth;

    scroll-padding-top:
        90px;

}


body {

    min-height:
        100vh;

    overflow-x:
        hidden;

    background:
        var(--white);

    color:
        var(--text-dark);

    font-family:
        var(--font-body);

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;

}


img {

    display:
        block;

    max-width:
        100%;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    border:
        0;

    font:
        inherit;

    cursor:
        pointer;

}


ul,
ol {

    list-style:
        none;

}



.container {

    width:
        min(
            calc(100% - (var(--padding) * 2)),
            var(--container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   PAGE LOADER
========================================================= */

.page-loader {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        grid;

    place-items:
        center;

    background:
        var(--navy);

    transition:
        opacity .6s ease,
        visibility .6s ease;

}


.page-loader.loaded {

    opacity:
        0;

    visibility:
        hidden;

}


.loader-content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        12px;

}


.loader-brand {

    color:
        var(--white);

    font-family:
        var(--font-display);

    font-size:
        30px;

    font-weight:
        800;

    letter-spacing:
        .18em;

}


.loader-line {

    width:
        100px;

    height:
        2px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.12);

}


.loader-line::after {

    content:
        "";

    display:
        block;

    width:
        45%;

    height:
        100%;

    background:
        var(--accent);

    animation:
        loaderMove 1.1s ease-in-out infinite;

}


.loader-caption {

    color:
        rgba(255,255,255,.35);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .2em;

}


@keyframes loaderMove {

    from {
        transform:
            translateX(-120%);
    }

    to {
        transform:
            translateX(320%);
    }

}



/* =========================================================
   HEADER
========================================================= */

.site-header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        1000;

    transition:
        background var(--transition),
        box-shadow var(--transition);

}


.site-header.scrolled {

    background:
        rgba(6,26,42,.88);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 10px 35px rgba(0,0,0,.12);

}


.navbar {

    height:
        88px;

    display:
        flex;

    align-items:
        center;

    gap:
        40px;

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

}


.brand img {

    width:
        52px;

    height:
        52px;

    object-fit:
        contain;

}


.brand-text {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;

}


.brand-text strong {

    color:
        var(--white);

    font-family:
        var(--font-display);

    font-size:
        16px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


.brand-text span {

    margin-top:
        5px;

    color:
        rgba(255,255,255,.42);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        32px;

    margin-left:
        auto;

}


.nav-link {

    position:
        relative;

    padding:
        8px 0;

    color:
        rgba(255,255,255,.7);

    font-size:
        13px;

    font-weight:
        600;

    transition:
        color var(--transition);

}


.nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        2px;

    background:
        var(--accent);

    transition:
        width var(--transition);

}


.nav-link:hover,
.nav-link.active {

    color:
        var(--white);

}


.nav-link:hover::after,
.nav-link.active::after {

    width:
        100%;

}


.nav-cta {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 12px 10px 18px;

    border:
        1px solid rgba(255,255,255,.2);

    border-radius:
        999px;

    color:
        var(--white);

    font-size:
        12px;

    font-weight:
        700;

    transition:
        var(--transition);

}


.nav-cta:hover {

    background:
        var(--white);

    color:
        var(--navy);

    transform:
        translateY(-2px);

}


.nav-cta-arrow {

    display:
        grid;

    place-items:
        center;

    width:
        26px;

    height:
        26px;

    border-radius:
        50%;

    background:
        var(--accent);

    color:
        var(--navy);

}


.menu-toggle {

    display:
        none;

}



/* =========================================================
   HERO
========================================================= */

.hero {

    position:
        relative;

    min-height:
        100svh;

    overflow:
        hidden;

    background:
        var(--navy);

    color:
        var(--white);

}


.hero-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .45;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            transparent 90%
        );

}


.hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(20px);

}


.hero-glow-one {

    width:
        650px;

    height:
        650px;

    top:
        -300px;

    right:
        -120px;

    background:
        radial-gradient(
            circle,
            rgba(22,118,197,.32),
            transparent 70%
        );

}


.hero-glow-two {

    width:
        500px;

    height:
        500px;

    left:
        -250px;

    bottom:
        -300px;

    background:
        radial-gradient(
            circle,
            rgba(246,168,0,.11),
            transparent 70%
        );

}


.hero-container {

    position:
        relative;

    z-index:
        2;

    min-height:
        100svh;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(440px,.82fr);

    align-items:
        center;

    gap:
        70px;

    padding-top:
        115px;

    padding-bottom:
        125px;

}


.hero-content {

    position:
        relative;

    z-index:
        3;

}


.hero-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        25px;

    color:
        rgba(255,255,255,.56);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


.eyebrow-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 18px rgba(246,168,0,.7);

}


.eyebrow-divider {

    width:
        30px;

    height:
        1px;

    background:
        rgba(255,255,255,.22);

}


.hero-title {
    max-width: 700px;
    font-family: var(--font-display);
    font-size: clamp(45px, 5vw, 75px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.055em;
}


.hero-title span {

    display:
        block;

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.62);

}


.hero-description {

    max-width:
        590px;

    margin-top:
        30px;

    color:
        rgba(255,255,255,.62);

    font-size:
        16px;

    line-height:
        1.8;

}


.hero-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        34px;

}


.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        54px;

    padding:
        0 20px;

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        var(--transition);

}


.btn-primary {

    background:
        var(--accent);

    color:
        var(--navy);

    box-shadow:
        0 15px 40px rgba(246,168,0,.18);

}


.btn-primary:hover {

    background:
        var(--accent-light);

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 50px rgba(246,168,0,.28);

}


.btn-secondary {

    border:
        1px solid rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.035);

    color:
        var(--white);

}


.btn-secondary:hover {

    border-color:
        rgba(255,255,255,.4);

    background:
        rgba(255,255,255,.08);

    transform:
        translateY(-3px);

}


.btn-icon {

    display:
        grid;

    place-items:
        center;

    width:
        28px;

    height:
        28px;

    border-radius:
        50%;

    background:
        rgba(6,26,42,.15);

}


.btn-secondary .btn-icon {

    background:
        rgba(255,255,255,.08);

}


.hero-meta {

    display:
        flex;

    align-items:
        center;

    margin-top:
        54px;

}


.hero-meta-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.hero-meta-item strong {

    color:
        var(--white);

    font-family:
        var(--font-display);

    font-size:
        13px;

    font-weight:
        700;

}


.hero-meta-item span {

    color:
        rgba(255,255,255,.4);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

}


.hero-meta-divider {

    width:
        1px;

    height:
        32px;

    margin:
        0 24px;

    background:
        rgba(255,255,255,.14);

}



/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

    position:
        relative;

    display:
        flex;

    justify-content:
        flex-end;

}


.hero-image-wrapper {

    position:
        relative;

    width:
        min(100%,520px);

}


.hero-image-frame {

    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        .9 / 1;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:
        8px;

    background:
        var(--navy-2);

    box-shadow:
        0 40px 100px rgba(0,0,0,.32);

}


.hero-image-frame::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            transparent 35%
        );

    pointer-events:
        none;

}


.hero-image-frame img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.04);

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);

}


.hero-image-wrapper:hover
.hero-image-frame img {

    transform:
        scale(1.09);

}


.hero-image-shade {

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    background:
        linear-gradient(
            to bottom,
            transparent 35%,
            rgba(6,26,42,.78)
        );

    pointer-events:
        none;

}



/* IMAGE LABEL */

.hero-image-label {

    position:
        absolute;

    left:
        -25px;

    bottom:
        62px;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        13px 17px;

    border:
        1px solid rgba(255,255,255,.12);

    background:
        rgba(6,26,42,.88);

    backdrop-filter:
        blur(16px);

}


.label-number {

    color:
        var(--accent);

    font-family:
        var(--font-display);

    font-size:
        13px;

    font-weight:
        800;

}


.hero-image-label strong,
.hero-image-label span {

    display:
        block;

}


.hero-image-label strong {

    color:
        var(--white);

    font-size:
        9px;

    letter-spacing:
        .14em;

}


.hero-image-label div span {

    margin-top:
        3px;

    color:
        rgba(255,255,255,.4);

    font-size:
        8px;

    letter-spacing:
        .14em;

}



/* FLOATING CARD */

.hero-floating-card {

    position:
        absolute;

    right:
        -30px;

    bottom:
        28px;

    z-index:
        6;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    width:
        245px;

    padding:
        15px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:
        6px;

    background:
        rgba(11,38,61,.82);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.3);

    animation:
        floatCard 5s ease-in-out infinite;

}


@keyframes floatCard {

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

    50% {
        transform:
            translateY(-8px);
    }

}


.floating-icon {

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    width:
        42px;

    height:
        42px;

    background:
        rgba(246,168,0,.1);

}


.floating-icon span {

    width:
        11px;

    height:
        11px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 18px rgba(246,168,0,.7);

}


.floating-content {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

}


.floating-caption {

    color:
        rgba(255,255,255,.38);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .14em;

}


.floating-content strong {

    margin-top:
        4px;

    color:
        var(--white);

    font-family:
        var(--font-display);

    font-size:
        11px;

    line-height:
        1.4;

}


.floating-arrow {

    color:
        var(--accent);

    font-size:
        16px;

}



/* CORNER */

.hero-corner {

    position:
        absolute;

    right:
        -20px;

    top:
        -20px;

    z-index:
        5;

    width:
        80px;

    height:
        80px;

}


.hero-corner span {

    position:
        absolute;

    display:
        block;

    background:
        var(--accent);

}


.hero-corner span:nth-child(1) {

    width:
        55px;

    height:
        1px;

    right:
        0;

    top:
        0;

}


.hero-corner span:nth-child(2) {

    width:
        1px;

    height:
        55px;

    right:
        0;

    top:
        0;

}


.hero-corner span:nth-child(3) {

    width:
        20px;

    height:
        1px;

    right:
        18px;

    top:
        18px;

}



/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll {

    position:
        absolute;

    left:
        34px;

    bottom:
        115px;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        rgba(255,255,255,.35);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .16em;

    writing-mode:
        vertical-rl;

}


.hero-scroll-line {

    width:
        1px;

    height:
        52px;

    background:
        linear-gradient(
            to bottom,
            var(--accent),
            transparent
        );

}



/* =========================================================
   MARQUEE
========================================================= */

.hero-marquee {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        7;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    border-top:
        1px solid rgba(255,255,255,.09);

    background:
        rgba(4,19,31,.72);

    backdrop-filter:
        blur(10px);

}


.marquee-track {

    display:
        flex;

    align-items:
        center;

    gap:
        32px;

    width:
        max-content;

    color:
        rgba(255,255,255,.4);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    white-space:
        nowrap;

    animation:
        marquee 30s linear infinite;

}


.marquee-track i {

    color:
        var(--accent);

    font-style:
        normal;

}


@keyframes marquee {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-30%);
    }

}



/* =========================================================
   PLACEHOLDER
========================================================= */

.placeholder-section {

    min-height:
        70vh;

    display:
        flex;

    align-items:
        center;

    border-bottom:
        1px solid #e5e9ee;

    background:
        var(--white);

}


.placeholder-section .container {

    display:
        grid;

    grid-template-columns:
        70px 1fr;

    align-items:
        center;

    gap:
        20px;

}


.placeholder-section span {

    color:
        var(--blue);

    font-family:
        var(--font-display);

    font-size:
        13px;

    font-weight:
        700;

}


.placeholder-section h2 {
    color: var(--text-dark);

    font-family: var(--font-display);

    font-size: clamp(44px, 4.5vw, 62px);

    line-height: 0.98;

    letter-spacing: -0.055em;
}



/* =========================================================
   REVEAL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(28px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

}


.reveal.revealed {

    opacity:
        1;

    transform:
        translateY(0);

}


/* Make hero visible if JS is delayed */

.hero .reveal {

    animation:
        heroFallback .01s linear 1.5s forwards;

}


@keyframes heroFallback {

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}
/* =========================================================
   PHASE 2
   COMPANY OVERVIEW
========================================================= */

.company-overview {
    padding: 140px 0 0;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(15, 84, 132, 0.22),
            transparent 32%
        ),
        #061b2b;
    position: relative;
    overflow: hidden;
}


/* subtle grid */

.company-overview::before,
.vision-mission::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    pointer-events: none;
}


.section-heading {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 30px;
    align-items: start;

    margin-bottom: 80px;

    position: relative;
    z-index: 1;
}


.section-number {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #f6a500;

    padding-top: 12px;
}


.section-eyebrow {
    display: block;

    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;

    color: #8c9aa7;
}


.section-heading h2 {
    max-width: 700px;
    margin: 0;
    font-size: clamp(38px, 3.5vw, 55px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: #ffffff;
}

.section-heading h2 span {
    color: #8c9aa7;
}



/* =========================================================
   OVERVIEW GRID
========================================================= */

.overview-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 90px;

    align-items: center;

    position: relative;
    z-index: 1;
}


.overview-intro {
    max-width: 620px;
}


.overview-lead {
    margin: 0 0 28px;

    font-size: 20px;
    line-height: 1.5;

    color: #ffffff;
}


.overview-intro > p:not(.overview-lead) {
    margin-bottom: 35px;

    font-size: 16px;
    line-height: 1.9;

    color: #91a0ad;
}


.text-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    border-bottom: 1px solid rgba(255,255,255,0.35);

    padding-bottom: 8px;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.text-link span {
    color: #f6a500;
    font-size: 20px;
}


.text-link:hover {
    gap: 22px;
    color: #f6a500;
}



/* =========================================================
   OVERVIEW IMAGE
========================================================= */

.overview-visual {
    position: relative;
}


.overview-image-card {
    position: relative;

    min-height: 520px;

    overflow: hidden;

    border-radius: 4px;

    background: #102b3f;

    border: 1px solid rgba(255,255,255,0.1);
}


.overview-image-card::before {
    content: "";

    position: absolute;

    top: -20px;
    right: -20px;

    width: 100px;
    height: 100px;

    border-top: 1px solid #f6a500;
    border-right: 1px solid #f6a500;

    z-index: 3;
}


.overview-image-card img {
    width: 100%;
    height: 100%;

    min-height: 520px;

    object-fit: cover;

    display: block;

    transition: transform 0.8s ease;
}


.overview-image-card:hover img {
    transform: scale(1.04);
}


.overview-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(6,27,43,0.05) 20%,
            rgba(6,27,43,0.85) 100%
        );

    z-index: 1;
}


.overview-image-label {
    position: absolute;

    left: 30px;
    bottom: 30px;

    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 6px;
}


.overview-image-label span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;

    color: #f6a500;
}


.overview-image-label small {
    font-size: 13px;

    color: #ffffff;
}



/* =========================================================
   STATS
========================================================= */

.company-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 110px;

    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);

    position: relative;
    z-index: 1;
}


.stat-item {
    min-height: 170px;

    padding: 38px 35px;

    border-right: 1px solid rgba(255,255,255,0.12);

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.stat-item:last-child {
    border-right: none;
}


.stat-item:hover {
    background: rgba(255,255,255,0.035);
    transform: translateY(-3px);
}


.stat-number {
    display: block;

    margin-bottom: 8px;

    font-size: clamp(36px, 4vw, 58px);
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.04em;

    color: #ffffff;
}


.stat-label {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #7f8e9b;
}



/* =========================================================
   ABOUT PCG
========================================================= */

.about-pcg {
    padding: 150px 0;

    background: #f5f6f7;

    position: relative;
    overflow: hidden;
}


.about-pcg-grid {
    display: grid;
    grid-template-columns: 100px 1fr;

    gap: 50px;
}


.about-pcg-index {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.about-pcg-index > span {
    font-size: 13px;
    font-weight: 800;

    color: #1264a3;
}


.vertical-line {
    width: 1px;

    flex: 1;

    margin-top: 20px;

    background:
        linear-gradient(
            to bottom,
            #1264a3,
            rgba(18,100,163,0)
        );
}


.section-eyebrow.dark {
    color: #1264a3;
}


.about-pcg-content h2 {
    max-width: 800px;
    margin: 0 0 38px;
    font-size: clamp(40px, 3.5vw, 55px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: #111a2d;
}


.about-pcg-content h2 span {
    color: #8b949e;
}


/* .about-pcg-description {
    max-width: 850px;

    margin-left: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 32px;
} */

.about-pcg-description {
    max-width: 100%;

    margin-left: 0;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 50px;

    margin-top: 10px;
}


.about-pcg-description p {
    margin: 0;

    font-size: 15.5px;
    line-height: 1.8;

    color: #566170;
}


.about-pcg-description p:first-child {
    font-size: 18px;
    line-height: 1.75;
    color: #182236;
}




/* =========================================================
   ABOUT HIGHLIGHTS
========================================================= */

.about-highlights {
    margin-top: 80px;

    border-top: 1px solid #d8dde2;
}


.about-highlight {
    display: grid;
    grid-template-columns: 55px 1fr;

    gap: 20px;

    padding: 28px 0;

    border-bottom: 1px solid #d8dde2;

    transition:
        padding-left 0.3s ease,
        background 0.3s ease;
}


.about-highlight:hover {
    padding-left: 15px;
}


.highlight-icon {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #f6a500;

    border-radius: 50%;

    color: #f6a500;

    font-size: 18px;
}


.about-highlight strong {
    display: block;

    margin-bottom: 5px;

    font-size: 16px;

    color: #172034;
}


.about-highlight p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    color: #687381;
}



/* =========================================================
   VISION & MISSION
========================================================= */

.vision-mission {
    padding: 150px 0;

    background:
        radial-gradient(
            circle at 15% 80%,
            rgba(246,165,0,0.08),
            transparent 28%
        ),
        #061b2b;

    position: relative;
    overflow: hidden;
}

.vision-mission .section-heading h2 {
    font-size: 46px;
}


.vision-mission .container {
    position: relative;
    z-index: 1;
}


.vm-grid {
    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 25px;
}


.vm-card {
    min-height: 500px;

    padding: 40px;

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.13);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.015)
        );

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}


.vm-card:hover {
    transform: translateY(-8px);

    border-color: rgba(246,165,0,0.5);
}


.vm-card-large {
    background:
        linear-gradient(
            145deg,
            rgba(18,100,163,0.22),
            rgba(255,255,255,0.02)
        );
}


.vm-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(255,255,255,0.1);
}


.vm-label {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.18em;

    color: #f6a500;
}


.vm-number {
    font-size: 12px;
    font-weight: 700;

    color: #73808d;
}


.vm-card-content {
    position: relative;
    z-index: 2;

    padding-top: 70px;
}


.vm-card-content h3 {
    max-width: 500px;
    margin: 0 0 24px;

    font-size: clamp(30px, 3vw, 50px);

    line-height: 1.02;
    letter-spacing: -0.045em;

    color: #ffffff;
}


.vm-card-content h3 span {
    color: #7f8d99;
}


.vm-card-content > p {
    max-width: 600px;

    margin: 0;

    font-size: 16px;
    line-height: 1.9;

    color: #9ba8b3;
}


.vm-card-decoration {
    position: absolute;

    right: -100px;
    bottom: -100px;

    width: 300px;
    height: 300px;

    border: 1px solid rgba(246,165,0,0.25);

    border-radius: 50%;
}


.vm-card-decoration::before {
    content: "";

    position: absolute;

    inset: 40px;

    border: 1px solid rgba(246,165,0,0.2);

    border-radius: 50%;
}



/* =========================================================
   MISSION LIST
========================================================= */

.mission-list {
    list-style: none;

    margin: 0;
    padding: 0;
}


.mission-list li {
    display: grid;

    grid-template-columns: 35px 1fr;

    gap: 15px;

    padding: 17px 0;

    border-bottom: 1px solid rgba(255,255,255,0.1);
}


.mission-list li:last-child {
    border-bottom: none;
}


.mission-list li > span {
    font-size: 10px;
    font-weight: 700;

    color: #f6a500;

    padding-top: 4px;
}


.mission-list p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #9ba8b3;
}

/* =========================================================
   PHASE 3
   CAPABILITIES
========================================================= */

.capabilities-section {
    padding: 150px 0;

    background: #f5f6f7;

    position: relative;
    overflow: hidden;
}


/* =========================================================
   CAPABILITIES HEADING
========================================================= */

.capabilities-heading {
    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 30px;

    margin-bottom: 70px;

    position: relative;
}


.capabilities-number {
    color: #1264a3;
}


.capabilities-heading h2 {
    max-width: 800px;
    margin: 0 0 24px;
    font-size: clamp(40px, 3.5vw, 55px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: #111a2d;
}


.capabilities-heading h2 span {
    color: #929ba4;
}


.capabilities-intro {
    max-width: 650px;

    margin: 0;

    font-size: 18px;

    line-height: 1.8;

    color: #687381;
}



/* =========================================================
   CAPABILITIES LIST
========================================================= */

.capabilities-list {
    border-top: 1px solid #d5dbe0;
}


.capability-card {
    display: grid;

    grid-template-columns: 80px 70px 1fr 60px;

    gap: 30px;

    align-items: center;

    min-height: 210px;

    padding: 35px 20px 35px 0;

    border-bottom: 1px solid #d5dbe0;

    position: relative;

    transition:
        padding-left 0.4s ease,
        background 0.4s ease;
}


.capability-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: #f6a500;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform 0.4s ease;
}


.capability-card:hover {
    padding-left: 25px;

    background:
        linear-gradient(
            90deg,
            rgba(246,165,0,0.06),
            transparent 60%
        );
}


.capability-card:hover::before {
    transform: scaleY(1);
}



/* =========================================================
   CAPABILITY NUMBER
========================================================= */

.capability-number {
    align-self: start;

    padding-top: 8px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.1em;

    color: #1264a3;
}



/* =========================================================
   CAPABILITY ICON
========================================================= */

.capability-icon {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #cdd4da;

    border-radius: 50%;

    color: #1264a3;

    font-size: 22px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.capability-card:hover .capability-icon {
    background: #f6a500;

    border-color: #f6a500;

    color: #111a2d;

    transform: rotate(10deg);
}



/* =========================================================
   CAPABILITY CONTENT
========================================================= */

.capability-content {
    max-width: 850px;
}


.capability-label {
    display: block;

    margin-bottom: 10px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.16em;

    color: #8a949e;
}


.capability-content h3 {
    margin: 0 0 14px;

    font-size: clamp(28px, 3.2vw, 42px);

    line-height: 1;

    letter-spacing: -0.04em;

    color: #111a2d;
}


.capability-content h3 span {
    color: #8c969f;
}


.capability-content p {
    max-width: 700px;

    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    color: #687381;
}



/* =========================================================
   CAPABILITY ARROW
========================================================= */

.capability-arrow {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #d0d6db;

    border-radius: 50%;

    font-size: 18px;

    color: #1264a3;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.capability-card:hover .capability-arrow {
    background: #111a2d;

    border-color: #111a2d;

    color: #ffffff;

    transform: translateX(5px);
}



/* =========================================================
   CAPABILITIES FOOTER
========================================================= */

.capabilities-footer {
    display: grid;

    grid-template-columns: 1fr auto auto;

    align-items: center;

    gap: 30px;

    padding-top: 45px;
}


.capabilities-footer-line {
    height: 1px;

    background: #d5dbe0;
}


.capabilities-footer p {
    margin: 0;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #8b949d;
}


.capabilities-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 7px;

    border-bottom: 1px solid #111a2d;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    color: #111a2d;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.capabilities-link span {
    color: #f6a500;

    font-size: 18px;
}


.capabilities-link:hover {
    gap: 18px;

    color: #1264a3;
}

/* =========================================================
   PHASE 4
   PRODUCT PORTFOLIO
========================================================= */

.products-section {
    padding: 150px 0;

    background: #ffffff;

    position: relative;

    overflow: hidden;
}


/* =========================================================
   PRODUCTS HEADING
========================================================= */

.products-heading {
    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 30px;

    margin-bottom: 65px;
}


.products-heading-content {
    max-width: 1000px;
}


.products-heading h2 {
    max-width: 800px;
    margin: 0 0 24px;
    font-size: clamp(40px, 3.5vw, 55px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: #111a2d;
}


.products-heading h2 span {
    display: block;

    color: #929ba4;
}


.products-heading p {
    max-width: 700px;

    margin: 0;

    font-size: 18px;

    line-height: 1.8;

    color: #687381;
}



/* =========================================================
   PRODUCTS META
========================================================= */

.products-meta {
    display: grid;

    grid-template-columns: 160px 160px 1fr;

    gap: 20px;

    align-items: stretch;

    margin-bottom: 70px;

    padding: 25px 0;

    border-top: 1px solid #d8dde1;

    border-bottom: 1px solid #d8dde1;
}


.products-meta-item {
    display: flex;

    align-items: center;

    gap: 15px;

    padding-right: 30px;

    border-right: 1px solid #d8dde1;
}


.products-meta-item strong {
    font-size: 42px;

    line-height: 1;

    letter-spacing: -0.05em;

    color: #1264a3;
}


.products-meta-item span {
    font-size: 9px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: 0.12em;

    color: #7c8790;
}


.products-meta-description {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-left: 20px;
}


.products-meta-description > span {
    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.14em;

    color: #f0a000;

    white-space: nowrap;
}


.products-meta-description p {
    max-width: 470px;

    margin: 0;

    font-size: 13px;

    line-height: 1.7;

    color: #687381;
}



/* =========================================================
   PRODUCTS GRID
========================================================= */

.products-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 30px;
}



/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    position: relative;

    background: #f4f5f6;

    border: 1px solid #e1e5e8;

    overflow: hidden;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}


.product-card:hover {
    transform: translateY(-8px);

    border-color: #cdd4d9;

    box-shadow:
        0 25px 60px rgba(17, 26, 45, 0.10);
}



/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #eef2f4 0%,
            #e5eaed 100%
        );
}

/* Main product image sizes */

.product-image-wide {
    height: 430px;
}

.product-image-tall {
    height: 500px;
}

.product-image-reel {
    height: 430px;
}

.product-image-ibc {
    height: 520px;
}


/* Actual image */

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    padding: 18px;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1);
}

.product-image-reel {
    cursor: pointer;
}

.product-image-reel img {
    transition:
        transform .5s ease;
}


.product-image-reel:hover img {
    transform:
        scale(1.03);
}


/* Subtle hover */

.product-card:hover .product-image img {
    transform: scale(1.025);
}



/* =========================================================
   IMAGE OVERLAY
========================================================= */

.product-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(10, 20, 30, 0.02) 0%,
            rgba(10, 20, 30, 0) 65%,
            rgba(10, 20, 30, 0.12) 100%
        );

    pointer-events: none;
}

/* =========================================================
   PRODUCT IMAGE BUTTON
========================================================= */

.product-image-button {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    padding: 0;
    border: 0;

    background: transparent;

    cursor: pointer;

    overflow: hidden;
}


.product-image-button img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    padding: 18px;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.product-image-button:hover img {
    transform: scale(1.035);
}


/* =========================================================
   PRODUCT IMAGE EXPAND
========================================================= */

.product-image-expand {
    position: absolute;

    right: 22px;
    bottom: 22px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(17,26,45,.88);

    color: #ffffff;

    font-size: 17px;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.product-image-button:hover
.product-image-expand {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   PRODUCT INDEX
========================================================= */

.product-index {
    position: absolute;

    top: 22px;
    left: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #ffffff;

    color: #111a2d;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.05em;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);
}



/* =========================================================
   PRODUCT CONTENT
========================================================= */

.product-content {
    padding: 32px;
}


.product-category {
    margin-bottom: 13px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.16em;

    color: #1264a3;
}


.product-content h3 {
    margin: 0 0 14px;

    font-size: clamp(25px, 2.35vw, 36px);

    line-height: 1.02;
    letter-spacing: -0.04em;

    color: #111a2d;
}


.product-content h3 span {
    color: #858f99;
}


.product-content p {
    max-width: 650px;

    margin: 0;

    font-size: 14px;

    line-height: 1.75;

    color: #687381;
}

/* =========================================================
   PRODUCT GALLERY TRIGGER
========================================================= */

.product-gallery-trigger {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

    padding-top: 20px;

    border-top:
        1px solid #d9dee2;
}


.product-gallery-trigger > span {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;

    color: #8a949d;
}


.product-gallery-trigger button {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #111a2d;

    font-family: var(--font-body);

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    transition:
        gap .3s ease,
        color .3s ease;
}


.product-gallery-trigger button span {
    color: var(--accent);

    font-size: 17px;
}


.product-gallery-trigger button:hover {
    gap: 16px;

    color: #1264a3;
}

/* =========================================================
   PRODUCT LIGHTBOX
========================================================= */

.product-lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.product-lightbox.open {
    visibility: visible;

    opacity: 1;
}


.product-lightbox-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(4, 12, 20, .92);

    backdrop-filter:
        blur(12px);
}


.product-lightbox-dialog {
    position: relative;

    z-index: 2;

    width: min(1100px, 100%);

    max-height: 90vh;

    display: flex;

    flex-direction: column;

    border:
        1px solid rgba(255,255,255,.14);

    background:
        #0b1d2b;

    box-shadow:
        0 30px 100px rgba(0,0,0,.45);
}


.product-lightbox-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 20px 24px;

    border-bottom:
        1px solid rgba(255,255,255,.10);
}


.product-lightbox-info {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.product-lightbox-category {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;

    color: var(--accent);
}


.product-lightbox-info strong {
    font-size: 18px;

    color: var(--white);
}


.product-lightbox-counter {
    display: flex;

    gap: 7px;

    font-size: 11px;

    font-weight: 800;

    color:
        rgba(255,255,255,.55);
}


.product-lightbox-close {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 50%;

    background: transparent;

    color: var(--white);

    font-size: 22px;

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease;
}


.product-lightbox-close:hover {
    background: var(--accent);

    border-color: var(--accent);

    color: var(--navy);
}


/* =========================================================
   PRODUCT LIGHTBOX STAGE
========================================================= */

.product-lightbox-stage {
    position: relative;

    height: 520px;
    min-height: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px 80px;

    overflow: hidden;

    box-sizing: border-box;
}


.product-lightbox-image-wrap {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    box-sizing: border-box;
}


.product-lightbox-image-wrap img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    transition:
        opacity .25s ease;
}


.product-lightbox-nav {
    position: absolute;

    top: 50%;

    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: var(--white);

    font-size: 18px;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        background .3s ease,
        border-color .3s ease;
}


.product-lightbox-nav:hover {
    background:
        var(--accent);

    border-color:
        var(--accent);

    color:
        var(--navy);
}


.product-lightbox-prev {
    left: 20px;
}


.product-lightbox-next {
    right: 20px;
}


/* =========================================================
   PRODUCT LIGHTBOX BOTTOM
========================================================= */

.product-lightbox-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 16px 24px;

    border-top:
        1px solid rgba(255,255,255,.10);

    font-size: 10px;

    color:
        rgba(255,255,255,.45);
}


.product-lightbox-bottom span:last-child {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;
}



/* =========================================================
   SMALL PRODUCT GALLERY
========================================================= */

.product-gallery-small {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 125px;
    height: 95px;

    margin-top: 25px;

    overflow: hidden;

    border: 1px solid #d9dee2;
    background: #f1f4f5;
}

.product-gallery-small img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    padding: 6px;

    background: #f1f4f5;

    transition: transform 0.4s ease;
}

.product-card:hover .product-gallery-small img {
    transform: scale(1.03);
}



/* =========================================================
   PRODUCT GALLERY
========================================================= */

.product-gallery {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 125px;
    height: 95px;

    margin-top: 25px;

    overflow: hidden;

    border: 1px solid #d9dee2;
    background: #f1f4f5;
}

.product-gallery img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    padding: 6px;

    background: #f1f4f5;

    transition: transform 0.4s ease;
}

.product-card:hover .product-gallery img {
    transform: scale(1.03);
}



/* =========================================================
   SPECIAL CARD SIZING
========================================================= */

.product-card-large {
    grid-column: span 2;

    display: grid;

    grid-template-columns: 1.25fr 0.75fr;
}


.product-card-large .product-image {
    height: 520px;
}


.product-card-large .product-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px;
}


.product-card-wide {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;
}


.product-card-wide .product-content {
    display: flex;

    flex-direction: column;

    justify-content: center;
}


.product-card-ibc {
    grid-column: span 2;

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;
}


.product-card-ibc .product-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px;
}



/* =========================================================
   PRODUCTS FOOTER
========================================================= */

.products-footer {
    display: grid;

    grid-template-columns: 1fr auto auto;

    align-items: center;

    gap: 30px;

    padding-top: 55px;
}


.products-footer-line {
    height: 1px;

    background: #d8dde1;
}


.products-footer p {
    margin: 0;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    color: #8a949d;
}


.products-footer-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 7px;

    border-bottom: 1px solid #111a2d;

    color: #111a2d;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.products-footer-link span {
    color: #f6a500;

    font-size: 18px;
}


.products-footer-link:hover {
    gap: 18px;

    color: #1264a3;
}

/* =========================================================
   PROJECTS & CONTACT SECTION SPACING
========================================================= */

.projects-section,
.contact-section {
    min-height: auto;
    padding: 105px 0;
}


/* =========================================================
   CONTACT SECTION BASE LAYOUT
========================================================= */

.contact-section .container {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 35px;
    align-items: start;
}


.contact-section .section-number {
    font-size: 14px;
    font-weight: 700;
    color: #0066cc;
    padding-top: 8px;
}


.contact-section .placeholder-content {
    max-width: 850px;
}


.contact-section .placeholder-content h2 {
    margin: 12px 0 22px;
    max-width: 760px;

    font-size: clamp(44px, 4.5vw, 62px);
    line-height: 0.98;
    letter-spacing: -0.055em;
}


.contact-section .placeholder-content h2 span {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: #8a98a8;
}


.contact-section .placeholder-content p {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.8;
    color: #607080;
}

/* =========================================================
   PHASE 5
   PROJECTS
========================================================= */

.projects-section {
    position: relative;

    padding: 145px 0 120px;

    background:
        #ffffff;

    overflow: hidden;
}


/* =========================================================
   PROJECTS HEADING
========================================================= */

.projects-heading {
    display: grid;

    grid-template-columns:
        70px 1fr;

    gap:
        35px;

    margin-bottom:
        45px;
}


.projects-heading-number {
    padding-top:
        8px;

    font-size:
        14px;

    font-weight:
        800;

    color:
        #0066cc;

    letter-spacing:
        .08em;
}


.projects-heading-content {
    max-width:
        900px;
}


.projects-heading-content h2 {
    max-width:
        800px;

    margin:
        15px 0 25px;

    font-family:
        var(--font-display);

    font-size:
        clamp(40px, 3.5vw, 55px);

    line-height:
        .96;

    letter-spacing:
        -.055em;

    color:
        #111a2d;
}


.projects-heading-content h2 span {
    display:
        block;

    color:
        #929ba4;
}


.projects-heading-content p {
    max-width:
        680px;

    margin:
        0;

    font-size:
        17px;

    line-height:
        1.8;

    color:
        #687381;
}


/* =========================================================
   PROJECT META
========================================================= */

.projects-meta {
    display:
        grid;

    grid-template-columns:
        150px 150px 1fr;

    gap:
        20px;

    align-items:
        stretch;

    margin-bottom:
        65px;

    padding:
        24px 0;

    border-top:
        1px solid #d8dde1;

    border-bottom:
        1px solid #d8dde1;
}


.projects-meta-item {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding-right:
        30px;

    border-right:
        1px solid #d8dde1;
}


.projects-meta-item strong {
    font-family:
        var(--font-display);

    font-size:
        38px;

    line-height:
        1;

    letter-spacing:
        -.05em;

    color:
        #1264a3;
}


.projects-meta-item span {
    font-size:
        9px;

    line-height:
        1.4;

    font-weight:
        800;

    letter-spacing:
        .12em;

    color:
        #7c8790;
}


.projects-meta-description {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding-left:
        20px;
}


.projects-meta-description > span {
    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    color:
        var(--accent);

    white-space:
        nowrap;
}


.projects-meta-description p {
    max-width:
        500px;

    margin:
        0;

    font-size:
        13px;

    line-height:
        1.7;

    color:
        #687381;
}

/* =========================================================
   PROJECT GRID
========================================================= */

.projects-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        30px;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.project-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    background:
        #f4f5f6;

    border:
        1px solid #dfe4e7;

    overflow:
        hidden;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}


.project-card:hover {
    transform:
        translateY(-7px);

    border-color:
        #cbd2d7;

    box-shadow:
        0 25px 60px
        rgba(17,26,45,.10);
}


/* =========================================================
   PROJECT GALLERY
========================================================= */

.project-gallery {
    position:
        relative;

    display:
        grid;

    width:
        100%;

    overflow:
        hidden;

    background:
        #e8ecef;
}


/* Fire Pump */

.project-gallery-4 {
    grid-template-columns:
        repeat(2, 1fr);

    grid-template-rows:
        repeat(2, 220px);
}


/* ANFO */

.project-gallery-2 {
    grid-template-columns:
        1fr 1fr;

    grid-template-rows:
        440px;
}


/* MMT */

.project-gallery-3 {
    grid-template-columns:
        1.05fr .95fr;

    grid-template-rows:
        220px 220px;
}


.project-gallery-3
.project-image-large {
    grid-row:
        span 2;
}


/* Single image */

.project-gallery-1 {
    grid-template-columns:
        1fr;

    grid-template-rows:
        440px;
}


/* =========================================================
   PROJECT IMAGE BUTTON
========================================================= */

.project-image {
    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        100%;

    padding:
        0;

    overflow:
        hidden;

    background:
        #dfe4e7;

    cursor:
        pointer;
}


.project-image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .8s
        cubic-bezier(.2,.7,.2,1);
}


.project-image:hover img {
    transform:
        scale(1.045);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.project-image-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(6,26,42,0) 35%,
            rgba(6,26,42,.48) 100%
        );

    opacity:
        .45;

    transition:
        opacity .35s ease;
}


.project-image:hover
.project-image-overlay {
    opacity:
        .8;
}


/* =========================================================
   IMAGE EXPAND
========================================================= */

.project-image-expand {
    position:
        absolute;

    right:
        18px;

    bottom:
        18px;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(255,255,255,.55);

    border-radius:
        50%;

    background:
        rgba(6,26,42,.35);

    backdrop-filter:
        blur(8px);

    color:
        #ffffff;

    font-size:
        17px;

    opacity:
        0;

    transform:
        translateY(8px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        background .35s ease;
}


.project-image:hover
.project-image-expand {
    opacity:
        1;

    transform:
        translateY(0);
}


.project-image-expand:hover {
    background:
        var(--accent);

    color:
        var(--navy);
}

/* =========================================================
   PROJECT CONTENT
========================================================= */

.project-content {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        32px;
}


/* =========================================================
   PROJECT TOP
========================================================= */

.project-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;
}


.project-number {
    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    color:
        #1264a3;
}


.project-category {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .15em;

    color:
        #8a949d;

    text-align:
        right;
}


/* =========================================================
   PROJECT TITLE
========================================================= */

.project-content h3 {
    margin:
        0 0 15px;

    font-family:
        var(--font-display);

    font-size:
        clamp(30px, 3vw, 42px);

    line-height:
        1;

    letter-spacing:
        -.045em;

    color:
        #111a2d;
}


.project-content h3 span {
    color:
        #8b969f;
}


/* =========================================================
   PROJECT DESCRIPTION
========================================================= */

.project-content > p {
    max-width:
        650px;

    margin:
        0;

    font-size:
        14px;

    line-height:
        1.8;

    color:
        #687381;
}


/* =========================================================
   PROJECT FOOTER
========================================================= */

.project-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        30px;

    padding-top:
        20px;

    border-top:
        1px solid #d8dde1;
}


.project-footer > span {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    color:
        #8b949d;
}


/* =========================================================
   VIEW GALLERY BUTTON
========================================================= */

.project-view-button {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0;

    background:
        transparent;

    color:
        #111a2d;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        gap .3s ease,
        color .3s ease;
}


.project-view-button span {
    color:
        var(--accent);

    font-size:
        17px;
}


.project-view-button:hover {
    gap:
        15px;

    color:
        #1264a3;
}

/* =========================================================
   PROJECTS FOOTER
========================================================= */

.projects-footer {
    display:
        grid;

    grid-template-columns:
        1fr auto auto;

    align-items:
        center;

    gap:
        30px;

    padding-top:
        55px;
}


.projects-footer-line {
    height:
        1px;

    background:
        #d8dde1;
}


.projects-footer p {
    margin:
        0;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

    color:
        #8a949d;
}


.projects-footer-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid #111a2d;

    color:
        #111a2d;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        gap .3s ease,
        color .3s ease;
}


.projects-footer-link span {
    color:
        var(--accent);

    font-size:
        18px;
}


.projects-footer-link:hover {
    gap:
        18px;

    color:
        #1264a3;
}

/* =========================================================
   PROJECT LIGHTBOX
========================================================= */

.project-lightbox {
    position:
        fixed;

    inset:
        0;

    z-index:
        9998;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.project-lightbox.open {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* =========================================================
   BACKDROP
========================================================= */

.project-lightbox-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(3,13,23,.94);

    backdrop-filter:
        blur(16px);
}


/* =========================================================
   DIALOG
========================================================= */

.project-lightbox-dialog {
    position:
        relative;

    z-index:
        2;

    width:
        min(1180px, 100%);

    height:
        min(90vh, 900px);

    display:
        flex;

    flex-direction:
        column;

    color:
        #ffffff;
}


/* =========================================================
   TOP
========================================================= */

.project-lightbox-top {
    display:
        grid;

    grid-template-columns:
        1fr auto auto;

    align-items:
        center;

    gap:
        25px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.14);
}


.project-lightbox-info {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.project-lightbox-category {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .16em;

    color:
        var(--accent);
}


.project-lightbox-info strong {
    font-family:
        var(--font-display);

    font-size:
        19px;

    font-weight:
        700;
}


.project-lightbox-counter {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        11px;

    font-weight:
        700;

    color:
        rgba(255,255,255,.5);
}


#lightboxCurrent {
    color:
        #ffffff;
}


.project-lightbox-close {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.2);

    border-radius:
        50%;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        25px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.project-lightbox-close:hover {
    background:
        var(--accent);

    color:
        var(--navy);

    transform:
        rotate(90deg);
}

/* =========================================================
   LIGHTBOX STAGE
========================================================= */

.project-lightbox-stage {
    position:
        relative;

    flex:
        1;

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        25px;

    padding:
        25px 0;
}


.lightbox-image-wrap {
    width:
        min(850px, 78vw);

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.lightbox-image-wrap img {
    max-width:
        100%;

    max-height:
        100%;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    border:
        1px solid
        rgba(255,255,255,.1);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.45);

    transition:
        opacity .25s ease;
}


/* =========================================================
   LIGHTBOX NAVIGATION
========================================================= */

.lightbox-nav {
    flex:
        0 0 auto;

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.2);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.04);

    color:
        #ffffff;

    font-size:
        18px;

    cursor:
        pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.lightbox-nav:hover {
    background:
        var(--accent);

    color:
        var(--navy);
}


.lightbox-prev:hover {
    transform:
        translateX(-3px);
}


.lightbox-next:hover {
    transform:
        translateX(3px);
}


/* =========================================================
   LIGHTBOX BOTTOM
========================================================= */

.project-lightbox-bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(255,255,255,.14);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    color:
        rgba(255,255,255,.45);

    text-transform:
        uppercase;
}


.project-lightbox-bottom
span:first-child {
    color:
        rgba(255,255,255,.75);

    text-transform:
        none;

    letter-spacing:
        .02em;
}


body.lightbox-open {
    overflow:
        hidden;
}

/* =========================================================
   CUSTOMERS SECTION
========================================================= */

.customers-section {
    padding:
        140px 0 150px;

    background:
        #f5f6f7;

    color:
        #111a2d;
}


/* =========================================================
   CUSTOMER HEADING
========================================================= */

.customers-heading {
    display:
        grid;

    grid-template-columns:
        90px 1fr;

    gap:
        40px;

    margin-bottom:
        70px;
}


.customers-index {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    padding-top:
        8px;
}


.customers-index > span {
    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    color:
        #1264a3;
}


.customers-index-line {
    width:
        1px;

    height:
        95px;

    margin-top:
        20px;

    background:
        #1264a3;
}


.customers-heading-content {
    max-width:
        900px;
}


.customers-heading-content h2 {
    max-width:
        800px;

    margin:
        15px 0 25px;

    font-family:
        var(--font-display);

    font-size:
        clamp(40px, 3.5vw, 55px);

    line-height:
        .98;

    letter-spacing:
        -.055em;

    color:
        #111a2d;
}


.customers-heading-content h2 span {
    color:
        #929ca5;
}


.customers-heading-content p {
    max-width:
        700px;

    margin:
        0;

    font-size:
        16px;

    line-height:
        1.8;

    color:
        #687381;
}


/* =========================================================
   CUSTOMER PANEL
========================================================= */

.customers-panel {
    position:
        relative;

    padding:
        48px;

    border:
        1px solid #d7dde2;

    background:
        #ffffff;

    overflow:
        hidden;
}


.customers-panel::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background-image:
        linear-gradient(
            rgba(18,100,163,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(18,100,163,.045) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;
}


.customers-panel > * {
    position:
        relative;

    z-index:
        1;
}


/* =========================================================
   PANEL HEADER
========================================================= */

.customers-panel-header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    padding-bottom:
        32px;

    border-bottom:
        1px solid #d7dde2;
}


.customers-panel-label {
    display:
        block;

    margin-bottom:
        12px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .17em;

    color:
        #1264a3;
}


.customers-panel-header h3 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(28px, 3vw, 42px);

    line-height:
        1;

    letter-spacing:
        -.045em;

    color:
        #111a2d;
}


.customers-panel-header h3 span {
    color:
        #929ca5;
}


.customers-count {
    flex:
        0 0 auto;

    padding:
        10px 14px;

    border:
        1px solid #d7dde2;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    color:
        #7d8790;
}


/* =========================================================
   CUSTOMER LIST
========================================================= */

.customers-list {
    display:
        grid;

    grid-template-columns:
        1fr 1px 1fr;

    gap:
        45px;

    padding:
        38px 0;
}


.customers-divider {
    width:
        1px;

    background:
        #d7dde2;
}


.customer-column {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0;
}


.customer-item {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    min-height:
        48px;

    padding:
        7px 0;

    border-bottom:
        1px solid rgba(215,221,226,.65);

    font-size:
        13px;

    line-height:
        1.45;

    color:
        #3f4a56;

    transition:
        color .25s ease,
        transform .25s ease;
}


.customer-item:last-child {
    border-bottom:
        none;
}


.customer-item:hover {
    color:
        #1264a3;

    transform:
        translateX(5px);
}


.customer-check {
    flex:
        0 0 auto;

    width:
        22px;

    height:
        22px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #1264a3;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;
}


/* =========================================================
   CUSTOMER FOOTER
========================================================= */

.customers-panel-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding-top:
        25px;

    border-top:
        1px solid #d7dde2;
}


.customers-panel-footer > span {
    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    color:
        #8a949d;
}


.customers-panel-footer a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid #111a2d;

    font-size:
        12px;

    font-weight:
        800;

    color:
        #111a2d;

    transition:
        gap .3s ease,
        color .3s ease;
}


.customers-panel-footer a span {
    color:
        var(--accent);

    font-size:
        17px;
}


.customers-panel-footer a:hover {
    gap:
        16px;

    color:
        #1264a3;
}

/* =========================================================
   PHASE 6
   CONTACT / LET'S WORK TOGETHER
========================================================= */

/* =========================================================
   CONTACT / LET'S WORK TOGETHER
========================================================= */

.contact-section {
    position:
        relative;

    padding:
        150px 0 70px;

    overflow:
        hidden;

    background:
        var(--navy);

    color:
        var(--white);
}


/* =========================================================
   CONTACT BACKGROUND
========================================================= */

.contact-grid {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .45;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            transparent 90%
        );
}


/* =========================================================
   GLOW
========================================================= */

.contact-glow {
    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(20px);
}


.contact-glow-one {
    width:
        600px;

    height:
        600px;

    top:
        -250px;

    right:
        -180px;

    background:
        radial-gradient(
            circle,
            rgba(22,118,197,.28),
            transparent 70%
        );
}


.contact-glow-two {
    width:
        500px;

    height:
        500px;

    left:
        -250px;

    bottom:
        -280px;

    background:
        radial-gradient(
            circle,
            rgba(246,168,0,.10),
            transparent 70%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.contact-container {
    position:
        relative;

    z-index:
        2;
}


/* =========================================================
   HEADING
========================================================= */

.contact-heading {
    display:
        grid;

    grid-template-columns:
        90px 1fr;

    gap:
        40px;

    margin-bottom:
        80px;
}


.contact-index {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    padding-top:
        8px;
}


.contact-index > span {
    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    color:
        var(--accent);
}


.contact-index-line {
    width:
        1px;

    height:
        110px;

    margin-top:
        20px;

    background:
        rgba(246,168,0,.65);
}


.contact-heading-content {
    max-width:
        900px;
}


.contact-heading-content h2 {
    max-width:
        900px;

    margin:
        15px 0 28px;

    font-family:
        var(--font-display);

    font-size:
        clamp(54px, 7vw, 92px);

    line-height:
        .94;

    letter-spacing:
        -.06em;

    color:
        var(--white);
}


.contact-heading-content h2 span {
    display:
        block;

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.55);
}


.contact-heading-content p {
    max-width:
        650px;

    margin:
        0;

    color:
        rgba(255,255,255,.58);

    font-size:
        16px;

    line-height:
        1.8;
}


/* =========================================================
   MAIN CONTACT GRID
========================================================= */

.contact-main {
    display:
        grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap:
        70px;

    align-items:
        start;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-information {
    padding-right:
        25px;
}


.contact-info-header {
    margin-bottom:
        25px;
}


.contact-label {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .17em;
}


.contact-info-header h3,
.contact-form-header h3 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(30px, 3vw, 44px);

    line-height:
        1;

    letter-spacing:
        -.045em;

    color:
        var(--white);
}


.contact-info-header h3 span,
.contact-form-header h3 span {
    color:
        rgba(255,255,255,.42);
}


.contact-info-intro {
    max-width:
        560px;

    margin-bottom:
        38px;

    color:
        rgba(255,255,255,.55);

    font-size:
        14px;

    line-height:
        1.8;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.contact-info-item {
    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    padding:
        18px 0;

    border-bottom:
        1px solid rgba(255,255,255,.10);

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.contact-info-item:hover {
    transform:
        translateX(7px);

    border-color:
        rgba(246,168,0,.45);
}


.contact-info-icon {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:
        50%;

    color:
        var(--accent);

    font-size:
        14px;

    transition:
        background .3s ease,
        color .3s ease;
}


.contact-info-item:hover
.contact-info-icon {
    background:
        var(--accent);

    color:
        var(--navy);

    border-color:
        var(--accent);
}


.contact-info-content {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.contact-info-content span {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    color:
        rgba(255,255,255,.38);
}


.contact-info-content strong {
    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.5;

    color:
        rgba(255,255,255,.85);
}


/* =========================================================
   ADDRESS
========================================================= */

.contact-address {
    align-items:
        flex-start;

    cursor:
        default;
}


.contact-address:hover {
    transform:
        none;

    border-color:
        rgba(255,255,255,.10);
}


.contact-address .contact-info-icon {
    margin-top:
        2px;
}


.contact-address .contact-info-content strong {
    max-width:
        460px;

    font-size:
        13px;

    line-height:
        1.65;
}


/* =========================================================
   SECONDARY EMAIL
========================================================= */

.contact-secondary {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    margin-top:
        25px;
}


.contact-secondary span {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    color:
        rgba(255,255,255,.35);
}


.contact-secondary a {
    width:
        fit-content;

    color:
        rgba(255,255,255,.68);

    font-size:
        13px;

    border-bottom:
        1px solid rgba(255,255,255,.18);

    padding-bottom:
        3px;

    transition:
        color .3s ease,
        border-color .3s ease;
}


.contact-secondary a:hover {
    color:
        var(--accent);

    border-color:
        var(--accent);
}


/* =========================================================
   FORM WRAPPER
========================================================= */

.contact-form-wrapper {
    position:
        relative;

    padding:
        42px;

    border:
        1px solid rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.045);

    backdrop-filter:
        blur(12px);
}


.contact-form-wrapper::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        80px;

    height:
        3px;

    background:
        var(--accent);
}


.contact-form-header {
    margin-bottom:
        35px;
}


/* =========================================================
   FORM
========================================================= */

.contact-form {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        24px;
}


.contact-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.contact-field-full {
    grid-column:
        1 / -1;
}


.contact-field label {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.45);
}


.contact-field input,
.contact-field textarea {
    width:
        100%;

    border:
        1px solid rgba(255,255,255,.13);

    outline:
        none;

    border-radius:
        0;

    background:
        rgba(0,0,0,.10);

    color:
        var(--white);

    font-family:
        var(--font-body);

    font-size:
        13px;

    transition:
        border-color .3s ease,
        background .3s ease;
}


.contact-field input {
    height:
        52px;

    padding:
        0 16px;
}


.contact-field textarea {
    min-height:
        140px;

    padding:
        15px 16px;

    resize:
        vertical;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color:
        rgba(255,255,255,.27);
}


.contact-field input:focus,
.contact-field textarea:focus {
    border-color:
        rgba(246,168,0,.65);

    background:
        rgba(255,255,255,.06);
}


/* =========================================================
   FORM FOOTER
========================================================= */

.contact-form-footer {
    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        5px;

    padding-top:
        25px;

    border-top:
        1px solid rgba(255,255,255,.10);
}


.contact-form-footer > span {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .11em;

    color:
        rgba(255,255,255,.30);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        48px;

    padding:
        0 8px 0 18px;

    background:
        var(--accent);

    color:
        var(--navy);

    font-size:
        11px;

    font-weight:
        800;

    transition:
        transform .3s ease,
        background .3s ease;
}


.contact-submit span:last-child {
    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(6,26,42,.15);

    font-size:
        15px;
}


.contact-submit:hover {
    background:
        var(--accent-light);

    transform:
        translateY(-3px);
}


/* =========================================================
   CONTACT FOOTER
========================================================= */

/* .contact-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    margin-top:
        85px;

    padding-top:
        25px;

    border-top:
        1px solid rgba(255,255,255,.10);
}


.contact-footer span {
    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    color:
        rgba(255,255,255,.30);
}


.contact-footer span:last-child {
    text-align:
        right;
} */

/* =========================================================
   CONTACT FOOTER
========================================================= */

.contact-footer {
    width: calc(100% - 116px);
    margin-left: 58px;
    margin-right: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 85px;
    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.10);

    box-sizing: border-box;
}


.contact-footer span {
    display: block;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;

    color: rgba(255,255,255,.30);

    line-height: 1.5;
}


.contact-footer span:first-child {
    flex: 0 0 auto;
}


.contact-footer span:last-child {
    flex: 0 0 auto;

    margin-left: auto;

    text-align: right;

    white-space: nowrap;
}