/* =========================================

   RESET

========================================= */



* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}





html {



    scroll-behavior: smooth;



}





body {



    font-family: Arial, Helvetica, sans-serif;



    background: #ffffff;



    color: #111111;



}







/* =========================================

   HEADER / NAVBAR

========================================= */



.site-header {



    width: 100%;



    background: #ffffff;



    border-bottom: 1px solid #eeeeee;



    position: relative;



    z-index: 100;



}





.header-container {



    width: 90%;



    max-width: 1400px;



    margin: auto;



    min-height: 80px;



    display: flex;



    align-items: center;



    justify-content: space-between;



}





.logo {



    text-decoration: none;



    font-size: 20px;



    font-weight: 800;



    letter-spacing: -0.5px;



    color: #111111;



}





.navbar {



    display: flex;



    align-items: center;



    gap: 38px;



}





.navbar a {



    text-decoration: none;



    font-size: 14px;



    font-weight: 600;



    color: #222222;



    transition: 0.3s;



}





.navbar a:hover,



.navbar a.active {



    color: #f5a623;



}





.menu-toggle {



    display: none;



    border: none;



    background: none;



    font-size: 28px;



    cursor: pointer;



}



.website-logo {
    display: block;
    width: 150px;
    height: auto;
    max-height: 55px;
    object-fit: contain;
}





/* =========================================

   HERO SECTION

========================================= */



.hero-section {



    width: 100%;



    overflow: hidden;



    background: #ffffff;



}







/* =========================================

   HERO TOP

========================================= */



.hero-top {



    width: 82%;



    margin: 0 auto;



    padding-top: 38px;



    display: flex;



    justify-content: space-between;



    align-items: center;



}





.hero-company {



    font-size: 13px;



    font-weight: 800;



    letter-spacing: 0.3px;



}





.hero-year {



    display: flex;



    align-items: center;



    gap: 12px;



    font-size: 13px;



}





.hero-year span {



    display: block;



    width: 110px;



    height: 12px;



    background: #f5ae38;



}







/* =========================================

   HERO CONTENT

========================================= */



.hero-content {



    width: 82%;



    margin: 0 auto;



    padding-top: 80px;



    padding-bottom: 78px;



}





.hero-content h1 {



    font-size: clamp(65px, 9vw, 140px);



    line-height: 0.95;



    font-weight: 900;



    letter-spacing: -7px;



    color: #f5ae38;



}





.hero-content p {



    margin-top: 65px;



    font-size: 17px;



    letter-spacing: 8px;



    font-weight: 500;



    color: #111111;



}





/* =========================================

   HERO IMAGE

========================================= */



.hero-visual {

    width: 100%;

    height: 600px;

    overflow: hidden;

}



.building-full-image {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}





/* =========================================

   NAVY DIAGONAL

========================================= */



.navy-shape {



    position: absolute;



    right: 0;



    top: 0;



    width: 60%;



    height: 100%;



    background: #193c73;



    clip-path: polygon(100% 0, 100% 100%, 0 100%);



}







/* =========================================

   WEBSITE URL

========================================= */



.website-url {



    position: absolute;



    right: 70px;



    bottom: 30px;



    color: #ffffff;



    font-size: 14px;



}







/* =========================================

   CONTENT SECTIONS

========================================= */



.content-section {



    padding: 90px 8%;



    text-align: center;



}





.content-section h2 {



    font-size: 36px;



    margin-bottom: 20px;



}





.content-section p {



    font-size: 17px;



    color: #555555;



}







/* =========================================

   RESPONSIVE DESIGN

========================================= */



@media (max-width: 768px) {





    .header-container {



        min-height: 65px;



    }





    .navbar {



        display: none;



        position: absolute;



        top: 65px;



        left: 0;



        width: 100%;



        background: #ffffff;



        flex-direction: column;



        align-items: flex-start;



        padding: 25px;



        gap: 22px;



        border-bottom: 1px solid #eeeeee;



    }





    .navbar.show {



        display: flex;



    }





    .menu-toggle {



        display: block;



    }





    .hero-top {



        width: 85%;



        padding-top: 28px;



    }





    .hero-year span {



        width: 60px;



    }





    .hero-content {



        width: 85%;



        padding-top: 70px;



        padding-bottom: 65px;



    }





    .hero-content h1 {



        font-size: clamp(48px, 12vw, 90px);



        letter-spacing: -3px;



    }





    .hero-content p {



        margin-top: 40px;



        font-size: 11px;



        letter-spacing: 4px;



    }





    .hero-visual {



        height: 350px;



    }





    .building-image {



        width: 100%;



    }





    .navy-shape {



        width: 65%;



    }





    .website-url {



        right: 20px;



        bottom: 20px;



        font-size: 11px;



    }



}



/* =========================================

   GENERATED BUILDING IMAGE

========================================= */



.hero-visual {



    width: 100%;



    height: 600px;



    overflow: hidden;



}





.building-full-image {



    width: 100%;



    height: 100%;



    display: block;



    object-fit: cover;



    object-position: center;



}



/* about */



/* =========================================

   ABOUT US SECTION

========================================= */



.about-section {



    width: 100%;



    background: #ffffff;



    padding-bottom: 35px;



    overflow: hidden;



}





/* Top Design */



.about-top-design {



    position: relative;



    height: 350px;



    background: #193c73;



}





.about-image {



    position: absolute;



    top: 35px;



    left: 4%;



    width: 82%;



    height: 270px;



    overflow: hidden;



}





.about-image img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}





.about-orange-box {



    position: absolute;



    right: 10%;



    bottom: -45px;



    width: 95px;



    height: 150px;



    background: #f5ae38;



}





/* =========================================

   ABOUT US SECTION

========================================= */



.about-section {

    width: 100%;

    background: #ffffff;

    overflow: hidden;

    padding-bottom: 40px;

}





/* =========================================

   ABOUT TOP DESIGN

========================================= */



.about-top-design {

    position: relative;

    width: 100%;

    height: 370px;

    background: #193c73;

}



.about-image {

    position: absolute;

    top: 35px;

    left: 5%;

    width: 82%;

    height: 270px;

    overflow: hidden;

}



.about-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}



.about-orange-box {

    position: absolute;

    right: 10%;

    bottom: -45px;

    width: 95px;

    height: 150px;

    background: #f5ae38;

}





/* =========================================

   ABOUT CONTENT

========================================= */



.about-content {

    width: 80%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 85px 0 55px;

}



.about-content h2 {

    margin: 0 0 40px;

    font-size: clamp(48px, 6vw, 78px);

    line-height: 1.1;

    font-weight: 800;

    color: #193c73;

}



.about-content h4 {

    margin: 0 0 12px;

    font-size: 15px;

    font-weight: 700;

    color: #193c73;

}



.about-content p {

    max-width: 900px;

    margin: 0 0 24px;

    font-size: 14px;

    line-height: 1.8;

    color: #222222;

}



.about-content p:last-child {

    margin-bottom: 0;

}





/* =========================================

   ABOUT FOOTER

========================================= */



.about-footer {

    width: 80%;

    max-width: 1200px;

    margin: 0 auto;

    padding-top: 12px;

    border-top: 1px solid #193c73;



    display: flex;

    justify-content: space-between;



    font-size: 11px;

    color: #222222;

}







/* =========================================

   CERTIFICATIONS SECTION

========================================= */



.certifications-section {

    width: 100%;

    background: #193c73;

    overflow: hidden;

    padding-bottom: 40px;

}





/* =========================================

   TOP DESIGN

========================================= */



.certifications-top-design {

    position: relative;

    width: 100%;

    height: 370px;

    background: #193c73;

}



.certifications-image {

   position: absolute;

  top: 35px;

  left: 5%;

  width: 82%;

  height: 600px;

  overflow: hidden;

}



.certifications-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}



.certifications-orange-box {

    position: absolute;

    right: 10%;

    bottom: -45px;

    width: 95px;

    height: 150px;

    background: #f5ae38;

}





/* =========================================

   CONTENT

========================================= */



.certifications-content {

    width: 80%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 85px 0 55px;

}



.certifications-content h2 {

    margin: 0 0 40px;

    font-size: clamp(48px, 6vw, 78px);

    line-height: 1.1;

    font-weight: 800;

    color: #193c73;

}



.certifications-content h4 {

    margin: 0 0 12px;

    font-size: 15px;

    font-weight: 700;

    color: #193c73;

}



.certifications-content p {

    max-width: 900px;

    margin: 0 0 35px;

    font-size: 14px;

    line-height: 1.8;

    color: #222222;

}





/* =========================================

   CERTIFICATE IMAGE SPACES

========================================= */



.certificate-gallery {



    display: flex;



    flex-direction: column;



    gap: 35px;



    margin-top: 35px;



}





/* =========================================

   CERTIFICATE CARD

========================================= */



.certificate-card {



    width: 100%;



    min-height: 220px;



    border: 1px solid #d8dce5;



    background: #f7f8fa;



    overflow: hidden;



}





/* =========================================

   FIRST IMAGE OVERLAP

========================================= */



.certificate-card:first-child {



    position: relative;



    z-index: 5;



    margin-top: -100px;



}





/* =========================================

   CERTIFICATE IMAGES

========================================= */



.certificate-card img {



    width: 100%;



    height: 100%;



    min-height: 220px;



    display: block;



    object-fit: contain;



}





/* =========================================

   SECOND IMAGE

========================================= */



.certificate-card:nth-child(2) {



    position: relative;



    z-index: 2;



}





/* =========================================

   RESPONSIVE

========================================= */



@media (max-width: 768px) {



    .certificate-gallery {



        gap: 25px;



        margin-top: 25px;



    }



    .certificate-card {



        min-height: 300px;



    }



    .certificate-card img {



        min-height: 300px;



    }



    .certificate-card:first-child {



        margin-top: -60px;



    }



}

/* =========================================

   FOOTER

========================================= */



.certifications-footer {

    width: 80%;

    max-width: 1200px;

    margin: 0 auto;

    padding-top: 12px;

    border-top: 1px solid #193c73;



    display: flex;

    justify-content: space-between;



    font-size: 11px;

    color: #222222;

}









/* =========================================

   OUR SERVICES SECTION

========================================= */



.services-section {



    width: 100%;



    max-width: 1200px;



    margin: 0 auto;



    background: #ffffff;



    overflow: hidden;



    padding-bottom: 35px;



}





/* =========================================

   TOP IMAGE

========================================= */



.services-image {



    width: 100%;



    height: 100%;



    overflow: hidden;



}





.services-image img {



    width: 100%;



    height: 100%;



    display: block;



    object-fit: cover;



    object-position: center;



}







/* =========================================

   SERVICES CONTENT

========================================= */



.services-content {



    width: 80%;



    margin: 0 auto;



    padding-top: 30px;



    padding-bottom: 20px;



}





.services-content h2 {



    margin: 0 0 30px;



    font-size: clamp(38px, 5vw, 62px);



    line-height: 1.1;



    font-weight: 800;



    color: #193c73;



}







/* =========================================

   SERVICE ITEM

========================================= */



.service-item {



    display: flex;



    align-items: flex-start;



    gap: 22px;



    margin-bottom: 28px;



}





.service-item:last-child {



    margin-bottom: 0;



}







/* =========================================

   SERVICE ICON

========================================= */



.service-icon {



    flex: 0 0 38px;



    width: 38px;



    height: 50px;



    display: flex;



    align-items: center;



    justify-content: center;



    color: #111111;



}





.service-icon svg {



    width: 38px;



    height: 38px;



    fill: none;



    stroke: currentColor;



    stroke-width: 1.8;



    stroke-linecap: round;



    stroke-linejoin: round;



}







/* =========================================

   SERVICE TEXT

========================================= */



.service-text {



    flex: 1;



}





.service-text h3 {



    margin: 0 0 8px;



    font-size: 22px;



    line-height: 1.25;



    font-weight: 700;



    color: #111111;



}





.service-text p {



    max-width: 850px;



    margin: 0;



    font-size: 14px;



    line-height: 1.55;



    color: #222222;



}







/* =========================================

   FOOTER

========================================= */



.services-footer {



    width: 80%;



    margin: 15px auto 0;



    padding-top: 12px;



    border-top: 1px solid #a5afbd;



    display: flex;



    justify-content: space-between;



    font-size: 11px;



    color: #222222;



}







/* =========================================

   RESPONSIVE

========================================= */



@media (max-width: 768px) {



    .services-image {



        height: 200px;



    }





    .services-content {



        width: 85%;



        padding-top: 25px;



    }





    .services-content h2 {



        font-size: 40px;



        margin-bottom: 25px;



    }





    .service-item {



        gap: 15px;



        margin-bottom: 25px;



    }





    .service-icon {



        flex: 0 0 30px;



        width: 30px;



    }





    .service-icon svg {



        width: 30px;



        height: 30px;



    }





    .service-text h3 {



        font-size: 17px;



    }





    .service-text p {



        font-size: 12px;



        line-height: 1.6;



    }





    .services-footer {



        width: 85%;



    }



}







/* =========================================

   INDUSTRIES SECTION

========================================= */



.industries-section {



    position: relative;



    width: 100%;



    max-width: 1200px;



    margin: 0 auto;



    background: #ffffff;



    overflow: hidden;



    padding: 65px 0 35px;



}





/* =========================================

   CONTENT

========================================= */



.industries-content {



    width: 80%;



    margin: 0 auto;



}





.industries-content h2 {



    margin: 0 0 40px;



    font-size: clamp(36px, 5vw, 62px);



    line-height: 1.1;



    font-weight: 800;



    color: #193c73;



}







/* =========================================

   INDUSTRY TABLE

========================================= */



.industry-table-wrapper {



    width: 100%;



    overflow-x: auto;



}





.industry-table {



    width: 100%;



    border-collapse: collapse;



    table-layout: fixed;



    font-family: Arial, Helvetica, sans-serif;



}





.industry-table th {



    height: 35px;



    background: #193c73;



    border: 1px solid #111111;



}





.industry-table th:first-child {



    width: 28%;



}





.industry-table th:last-child {



    width: 72%;



}





.industry-table td {



    border: 1px solid #222222;



    padding: 9px 10px;



    font-size: 12px;



    line-height: 1.3;



    color: #111111;



    vertical-align: middle;



}





.industry-table td:first-child {



    text-align: center;



    font-size: 11px;



}





.industry-table td:last-child {



    text-align: left;



}







/* =========================================

   ORANGE DECORATIVE BLOCKS

========================================= */



.industry-orange-block {



    position: absolute;



    left: 0;



    width: 22px;



    height: 110px;



    background: #f5ae38;



}





.top-block {



    top: 160px;



}





.bottom-block {



    top: 375px;



}







/* =========================================

   FOOTER

========================================= */



.industries-footer {



    width: 80%;



    margin: 25px auto 0;



    padding-top: 12px;



    border-top: 1px solid #a5afbd;



    display: flex;



    justify-content: space-between;



    font-size: 11px;



    color: #222222;



}







/* =========================================

   RESPONSIVE

========================================= */



@media (max-width: 768px) {



    .industries-section {



        padding: 45px 0 30px;



    }





    .industries-content {



        width: 85%;



    }





    .industries-content h2 {



        font-size: 40px;



        margin-bottom: 28px;



    }





    .industry-table td {



        padding: 7px 6px;



        font-size: 10px;



    }





    .industry-table td:first-child {



        font-size: 9px;



    }





    .industry-orange-block {



        width: 14px;



        height: 85px;



    }





    .top-block {



        top: 130px;



    }





    .bottom-block {



        top: 310px;



    }





    .industries-footer {



        width: 85%;



    }



}









/* =========================================

   MANPOWER CATEGORY SECTION

========================================= */



.manpower-section {



    position: relative;



    width: 100%;



    max-width: 1200px;



    margin: 0 auto;



    background: #ffffff;



    overflow: hidden;



    padding: 65px 0 35px;



}





/* =========================================

   CONTENT

========================================= */



.manpower-content {



    width: 80%;



    margin: 0 auto;



}





.manpower-content h2 {



    margin: 0 0 40px;



    font-size: clamp(36px, 5vw, 62px);



    line-height: 1.1;



    font-weight: 800;



    color: #193c73;



}







/* =========================================

   TABLE

========================================= */



.manpower-table-wrapper {



    width: 100%;



    overflow-x: auto;



}





.manpower-table {



    width: 100%;



    border-collapse: collapse;



    table-layout: fixed;



    font-family: Arial, Helvetica, sans-serif;



}





.manpower-table th {



    height: 35px;



    background: #193c73;



    border: 1px solid #111111;



}





.manpower-table td {



    width: 33.333%;



    border: 1px solid #222222;



    padding: 9px 6px;



    height: 31px;



    font-size: 11px;



    line-height: 1.25;



    color: #111111;



    text-align: center;



    vertical-align: middle;



}







/* =========================================

   ORANGE DECORATIVE BLOCKS

========================================= */



.manpower-orange-block {



    position: absolute;



    left: 0;



    width: 22px;



    height: 130px;



    background: #f5ae38;



}





.manpower-section .top-block {



    top: 160px;



}





.manpower-section .bottom-block {



    top: 420px;



}







/* =========================================

   FOOTER

========================================= */



.manpower-footer {



    width: 80%;



    margin: 35px auto 0;



    padding-top: 12px;



    border-top: 1px solid #a5afbd;



    display: flex;



    justify-content: space-between;



    font-size: 11px;



    color: #222222;



}







/* =========================================

   RESPONSIVE

========================================= */



@media (max-width: 768px) {



    .manpower-section {



        padding: 45px 0 30px;



    }





    .manpower-content {



        width: 85%;



    }





    .manpower-content h2 {



        font-size: 40px;



        margin-bottom: 28px;



    }





    .manpower-table td {



        padding: 7px 4px;



        font-size: 9px;



    }





    .manpower-table th {



        height: 28px;



    }





    .manpower-orange-block {



        width: 14px;



        height: 100px;



    }





    .manpower-section .top-block {



        top: 130px;



    }





    .manpower-section .bottom-block {



        top: 350px;



    }





    .manpower-footer {



        width: 85%;



        margin-top: 25px;



    }



}



/* =========================================

   CLIENTS SECTION

========================================= */



.clients-section {



    width: 100%;



    max-width: 1200px;



    margin: 0 auto;



    background: #ffffff;



    overflow: hidden;



    padding: 65px 0 35px;



}





/* =========================================

   CONTENT

========================================= */



.clients-content {



    width: 80%;



    margin: 0 auto;



}





.clients-content h2 {



    margin: 0 0 30px;



    font-size: clamp(40px, 5vw, 62px);



    line-height: 1.1;



    font-weight: 800;



    color: #193c73;



}







/* =========================================

   CLIENTS TABLE

========================================= */



.clients-table-wrapper {



    width: 100%;



    overflow-x: auto;



}





.clients-table {



    width: 100%;



    border-collapse: collapse;



    table-layout: fixed;



    font-family: Arial, Helvetica, sans-serif;



}





.clients-table th {



    height: 35px;



    background: #193c73;



    border: 1px solid #111111;



}





.clients-table th:first-child {



    width: 12%;



}





.clients-table th:last-child {



    width: 88%;



}





.clients-table td {



    border: 1px solid #222222;



    padding: 9px 12px;



    font-size: 12px;



    line-height: 1.3;



    color: #222222;



    vertical-align: middle;



}





.clients-table td:first-child {



    text-align: center;



    font-size: 11px;



}





.clients-table td:last-child {



    text-align: left;



}







/* =========================================

   LAST ROW

========================================= */



.clients-more td {



    background: #193c73;



    color: #f5ae38;



    font-weight: 500;



}







/* =========================================

   FOOTER

========================================= */



.clients-footer {



    width: 80%;



    margin: 25px auto 0;



    padding-top: 12px;



    border-top: 1px solid #a5afbd;



    display: flex;



    justify-content: space-between;



    font-size: 11px;



    color: #222222;



}







/* =========================================

   RESPONSIVE

========================================= */



@media (max-width: 768px) {



    .clients-section {



        padding: 45px 0 30px;



    }





    .clients-content {



        width: 85%;



    }





    .clients-content h2 {



        font-size: 40px;



        margin-bottom: 25px;



    }





    .clients-table td {



        padding: 7px 6px;



        font-size: 10px;



    }





    .clients-table td:first-child {



        font-size: 9px;



    }





    .clients-footer {



        width: 85%;



    }



}





/* =========================================

   PROJECTS SECTION

========================================= */



.projects-section {



    position: relative;



    width: 100%;



    max-width: 1200px;



    margin: 0 auto;



    background: #ffffff;



    overflow: hidden;



    padding: 65px 0 0;



}





/* =========================================

   CONTENT

========================================= */



.projects-content {



    width: 80%;



    margin: 0 auto;



}





.projects-content h2 {



    margin: 0 0 35px;



    font-size: clamp(40px, 5vw, 62px);



    line-height: 1.1;



    font-weight: 800;



    color: #193c73;



}







/* =========================================

   PROJECT ITEM

========================================= */



.project-item {



    width: 78%;



    margin: 0 auto 30px;



    text-align: center;



}





.project-item img {



    width: 100%;



    height: 170px;



    display: block;



    object-fit: cover;



}





.project-item h4 {



    margin-top: 7px;



    font-size: 12px;



    line-height: 1.3;



    font-weight: 700;



    color: #111111;



}







/* =========================================

   BOTTOM DESIGN

========================================= */



.projects-bottom-design {



    display: flex;



    width: 100%;



    height: 22px;



    margin-top: 35px;



}





.projects-navy {



    width: 70%;



    background: #193c73;



}





.projects-orange {



    flex: 1;



    background: #f5ae38;



}







/* =========================================

   RESPONSIVE

========================================= */



@media (max-width: 768px) {



    .projects-section {



        padding-top: 45px;



    }





    .projects-content {



        width: 85%;



    }





    .projects-content h2 {



        font-size: 40px;



        margin-bottom: 28px;



    }





    .project-item {



        width: 90%;



        margin-bottom: 25px;



    }





    .project-item img {



        height: 140px;



    }





    .project-item h4 {



        font-size: 10px;



    }



}







/* =========================================

   STANDARD SECTION GAP

========================================= */



.homepage > section:last-child {

    margin-bottom: 0;

}





/* =========================================

   RESPONSIVE SECTION GAP

========================================= */



@media (max-width: 768px) {



    .homepage > section {

        margin-bottom: 25px;

    }



    .homepage > section:last-child {

        margin-bottom: 0;

    }



}



:root{

    --navy:#1a3b6e;

    --navy-dark:#132c54;

    --orange:#f2a53c;

    --orange-dark:#e5952a;

    --ink:#1c1c1c;

    --paper:#ffffff;

    --line:#111111;

    --muted:#555555;

    box-sizing:border-box;

  }

  *,*::before,*::after{box-sizing:inherit;}

  html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}

  body{

    margin:0;

    font-family:"Helvetica Neue",Arial,sans-serif;

    color:var(--ink);

    background:#e9e9ea;

    padding-top:env(safe-area-inset-top,0px);

    padding-bottom:env(safe-area-inset-bottom,0px);

  }



  /* ---------- shared page shell ---------- */

  .page{

    max-width:900px;

    margin:28px auto;

    background:var(--paper);

    box-shadow:0 4px 24px rgba(0,0,0,.18);

    position:relative;

    overflow:hidden;

    min-height:600px;

  }

  .page-footer{

    position:absolute;

    left:0; right:0; bottom:0;

    display:flex; justify-content:space-between;

    align-items:center;

    padding:14px 48px;

    border-top:1px solid #ddd;

    font-size:12px;

    color:var(--muted);

    letter-spacing:.03em;

  }

  .inner{ padding:48px; }



  img.ph{ display:block; width:100%; height:100%; object-fit:cover; }

  .photo-block{

    background:

      linear-gradient(135deg, #12294e 0%, #1a3b6e 45%, #f2a53c 100%);

    position:relative;

  }

  .photo-block::after{

    content:attr(data-label);

    position:absolute; inset:0;

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

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

    font-size:13px; letter-spacing:.08em;

    text-transform:uppercase;

    text-align:center;

    padding:12px;

    font-weight:600;

  }



  /* ===================== COVER ===================== */

  .cover{ display:flex; flex-direction:column; }

  .cover-top{ padding:56px 48px 0 48px; }

  .cover-tag{

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

  }

  .cover-tag span:first-child{

    font-weight:700; letter-spacing:.06em; font-size:14px;

  }

  .cover-tag .year{ display:flex; align-items:center; gap:14px; }

  .cover-tag .bar{ width:120px; height:8px; background:var(--orange); }

  .cover-tag .yr{ font-weight:700; font-size:20px; }



  .cover-title{

    font-size:96px;

    font-weight:800;

    color:var(--orange);

    line-height:.95;

    margin:70px 0 60px 44px;

    letter-spacing:-.01em;

  }

  .cover-sub{

    margin:0 0 40px 48px;

    font-size:16px;

    letter-spacing:.35em;

    font-weight:600;

  }

  .cover-photo{

    height:430px;

    position:relative;

  }

  .cover-photo .diag{

    position:absolute; inset:0;

    background:linear-gradient(135deg, transparent 46%, #fff 46.6%, #fff 48%, var(--navy-dark) 48.6%);

  }

  .cover-photo .site{

    position:absolute; right:36px; bottom:28px;

    color:#fff; font-size:15px; letter-spacing:.02em;

  }



  /* ===================== TOC ===================== */

  .toc-inner{ padding:80px 64px; }

  .toc-eyebrow{ color:var(--orange); font-weight:800; font-size:32px; line-height:1.05; }

  .toc-title{ color:var(--navy); font-weight:800; font-size:32px; margin:0 0 56px 0; }

  .toc-row{ display:flex; align-items:stretch; margin-bottom:26px; }

  .toc-num{

    width:56px; height:56px;

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

    color:#fff; font-weight:800; font-size:22px;

    flex:none;

  }

  .toc-num.o{ background:var(--orange); }

  .toc-num.n{ background:var(--navy); }

  .toc-label{

    display:flex; align-items:center;

    padding-left:22px; font-size:18px;

  }



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

  .about-photo{ height:260px; }

  .about-photo .tab{

    position:absolute; right:0; bottom:-40px;

    width:130px; height:110px; background:var(--orange);

  }

  .about-inner{ padding:60px 48px 90px 48px; }

  h1.section-title{

    color:var(--navy); font-size:44px; font-weight:800; margin:0 0 28px 0;

  }

  h2.sub-title{ color:var(--navy); font-size:19px; font-weight:700; margin:0 0 10px 0; }

  p.body-text{ font-size:14.5px; line-height:1.7; color:#222; max-width:620px; margin:0 0 22px 0; }



  /* ===================== LICENSES ===================== */

  .license-photo{ height:170px; }

  .cert-wrap{ padding:26px 40px 40px 40px; display:flex; flex-direction:column; gap:22px; }

  .cert-card{

    border:1px solid #ddd;

    border-radius:6px;

    padding:22px 26px;

    display:flex; gap:22px; align-items:center;

    background:#fafafa;

  }

  .cert-qr{

    width:76px; height:76px; flex:none;

    background:

      repeating-linear-gradient(0deg,#111 0 4px,#fff 4px 8px),

      repeating-linear-gradient(90deg,#111 0 4px,transparent 4px 8px);

    background-blend-mode:multiply;

    border:2px solid #111;

  }

  .cert-body{ flex:1; }

  .cert-heading{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}

  .cert-heading h3{ margin:0; font-size:15px; color:var(--navy); }

  .cert-heading .stamp{ font-size:11px; color:#999; text-align:right; }

  .cert-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; font-size:12.5px; color:#333; }

  .cert-grid div span.k{ color:#888; display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; }



  /* ===================== SERVICES ===================== */

  .services-photo{ height:190px; }

  .services-inner{ padding:44px 48px 70px 48px; }

  .service-item{ display:flex; gap:20px; margin-bottom:34px; }

  .service-icon{

    flex:none; width:46px; height:46px;

    border:2px solid var(--ink);

    border-radius:4px;

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

    font-size:20px;

  }

  .service-item h3{ margin:2px 0 8px 0; font-size:19px; color:var(--ink); }

  .service-item p{ margin:0; font-size:14px; line-height:1.65; color:#333; max-width:600px; }



  /* ===================== TABLES (industries / manpower / clients) ===================== */

  .table-inner{ padding:44px 48px 70px 48px; position:relative; }

  .table-inner .side-tab{

    position:absolute; left:0; top:170px; width:14px; height:70px; background:var(--orange);

  }

  table.data{

    width:100%; border-collapse:collapse; margin-top:22px;

  }

  table.data thead tr{ background:var(--navy); height:14px; }

  table.data thead td{ padding:0; }

  table.data td{

    border:1px solid var(--ink);

    padding:12px 16px;

    font-size:13px;

    vertical-align:middle;

  }

  table.data.two td:first-child{ font-weight:600; width:34%; }

  table.data.three td{ width:33.33%; text-align:left; }

  table.clients td:first-child{ width:60px; font-weight:700; color:var(--navy); }

  table.clients tr:last-child td{ background:var(--navy); color:var(--orange); font-weight:700; }

  table.clients tr:last-child td:first-child{ color:#fff; }



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

  .projects-inner{ padding:44px 48px 60px 48px; }

  .proj-card{ margin-bottom:30px; }

  .proj-photo{ height:170px; margin-bottom:10px; }

  .proj-cap{ text-align:center; font-weight:700; font-size:13px; letter-spacing:.02em; }

  .proj-logo-grid{

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

    gap:36px 20px; padding:44px 48px;

  }

  .logo-tile{

    height:70px; display:flex; align-items:center; justify-content:center;

    font-weight:800; color:var(--navy); font-size:15px; text-align:center;

    border-bottom:2px solid #eee;

  }



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

  .contact-inner{ padding:56px 48px 0 48px; }

  h1.contact-title{ color:var(--navy); font-size:40px; font-weight:800; margin:0 0 40px 0; }

  .contact-row{ display:flex; align-items:center; gap:18px; margin-bottom:22px; font-size:15px; color:var(--navy-dark); font-weight:600; }

  .contact-row .ico{

    width:22px; height:22px; flex:none; color:var(--orange); font-size:18px;

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

  }

  .contact-bottom{ display:flex; margin-top:40px; }

  .contact-photo{ width:60%; height:300px; }

  .contact-panel{ width:40%; background:var(--orange); }

  .footer-bar{ height:44px; background:var(--navy); position:relative; }

  .footer-bar::after{

    content:""; position:absolute; right:0; top:0; bottom:0; width:22%;

    background:var(--orange);

  }



  @media (max-width:640px){

    .cover-title{ font-size:56px; margin:44px 0 34px 20px; }

    .cover-sub{ margin-left:20px; font-size:13px; letter-spacing:.25em; }

    .inner, .about-inner, .services-inner, .table-inner, .projects-inner, .contact-inner{ padding:28px 22px 60px 22px; }

    h1.section-title{ font-size:30px; }

    table.data.three{ font-size:11px; }

    table.data.three td{ padding:8px; }

    .proj-logo-grid{ grid-template-columns:repeat(2,1fr); padding:28px 22px; }

    .toc-inner{ padding:48px 26px; }

    .toc-title, .toc-eyebrow{ font-size:26px; }

  }





  :root{

  --navy-950:#0c1c34;

  --navy-900:#122a4d;

  --navy-800:#16345f;

  --navy-700:#1d4173;

  --orange-500:#f2a53c;

  --orange-600:#dd8f22;

  --paper:#f3f5f7;

  --paper-2:#e8ebee;

  --steel:#8b96a5;

  --ink:#101c30;

  --ink-soft:#3c4a5e;

  --line:#dde1e6;

  --radius:2px;

  box-sizing:border-box;

}

*,*::before,*::after{box-sizing:inherit;}

html{scroll-behavior:smooth;}

body{

  margin:0;

  font-family:"IBM Plex Sans",Arial,sans-serif;

  color:var(--ink);

  background:var(--paper);

  -webkit-font-smoothing:antialiased;

}

h1,h2,h3{

  font-family:"Big Shoulders Display",Arial,sans-serif;

  font-weight:800;

  color:var(--navy-900);

  margin:0;

  line-height:1;

}

p{ margin:0; }

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

ul{ margin:0; padding:0; list-style:none; }

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



.section-inner{ max-width:1160px; margin:0 auto; padding:32px 32px; }

.kicker{

  font-family:"IBM Plex Sans",sans-serif;

  font-weight:600;

  font-size:13px;

  color:var(--orange-600);

  margin-bottom:10px;

}

.kicker-light{ color:var(--orange-500); }

.section-title{ font-size:42px; letter-spacing:.01em; margin-bottom:14px; }

.section-title-light{ color:#fff; }

.section-sub{ font-size:15.5px; color:var(--ink-soft); max-width:560px; margin-top:-4px; margin-bottom:8px; }



.btn{

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

  padding:14px 26px;

  font-weight:600; font-size:14.5px;

  border-radius:var(--radius);

  border:2px solid transparent;

  transition:background .15s ease, color .15s ease, border-color .15s ease;

}

.btn-primary{ background:var(--orange-500); color:var(--navy-950); }

.btn-primary:hover{ background:var(--orange-600); }

.btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff; }

.btn-ghost:hover{ border-color:#fff; }

.btn-dark{ background:var(--navy-950); color:#fff; }

.btn-dark:hover{ background:var(--navy-800); }



/* ===================== NAV ===================== */

.nav{

  position:sticky; top:0; z-index:50;

  background:var(--navy-950);

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

}

.nav-inner{

  max-width:1160px; margin:0 auto; padding:0 28px;

  height:68px;

  display:flex; align-items:center; gap:36px;

}

.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }

.brand-mark{ width:14px; height:22px; background:var(--orange-500); flex:none; }

.brand-text{

  font-family:"Big Shoulders Display",sans-serif;

  font-weight:800; font-size:19px; letter-spacing:.04em;

  color:#fff;

}

.brand-text.small{ font-size:15px; }

.nav-links{ display:flex; gap:28px; }

.nav-links a{ color:#c9d2de; font-size:14px; font-weight:500; }

.nav-links a:hover{ color:#fff; }

.nav-cta{

  border:2px solid var(--orange-500);

  color:var(--orange-500);

  padding:9px 18px;

  font-size:13.5px; font-weight:600;

  border-radius:var(--radius);

}

.nav-cta:hover{ background:var(--orange-500); color:var(--navy-950); }

.nav-toggle{ display:none; background:none; border:0; color:#fff; font-size:20px; }



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

.hero {

    position: relative;



    background-image: url('/images/home-image.png');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;



    overflow: hidden;

    padding: 96px 0 0 0;

}

.hero-grid{

  position:absolute; inset:0;

  background-image:

    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 96px),

    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 96px);

  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);

}

.hero::after{

  content:"";

  position:absolute; right:-10%; top:-10%; width:60%; height:130%;

  background:radial-gradient(circle at 60% 40%, rgba(242,165,60,.28), transparent 60%);

  pointer-events:none;

}

.hero-inner{

  position:relative;

  max-width:1160px; margin:0 auto; padding:0 28px 80px 28px;

}

.hero-eyebrow{

  color:var(--orange-500); font-weight:600; font-size:14px;

  letter-spacing:.03em; margin-bottom:22px;

}

.hero-title{

  font-size:76px; color:#fff; letter-spacing:.005em;

  max-width:760px;

}

.hero-title span{ color:var(--orange-500); }

.hero-sub{

  color:#c9d2de; font-size:16.5px; line-height:1.7;

  max-width:520px; margin:28px 0 36px 0;

}

.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-stats{

  position:relative;

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

  background:rgba(6,15,29,.55);

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

}

.stat{

  padding:26px 28px;

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

}

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

.stat-num{

  display:block; font-family:"Big Shoulders Display",sans-serif;

  font-weight:800; font-size:34px; color:#fff;

}

.stat-label{ display:block; font-size:12.5px; color:#9fadc0; margin-top:4px; }



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

.about{ padding:96px 0; background:var(--paper); }

.about-grid{

  display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:start;

}

.about-copy h2{ font-size:38px; margin-bottom:20px; max-width:520px; }

.lede{ font-size:16px; line-height:1.8; color:var(--ink-soft); max-width:520px; }

.capability-list{ border-top:1px solid var(--line); margin-top:4px; }

.capability-list li{

  display:flex; align-items:baseline; gap:16px;

  padding:16px 0;

  border-bottom:1px solid var(--line);

  font-weight:600; font-size:15px; color:var(--navy-900);

}

.cap-index{

  font-family:"Big Shoulders Display",sans-serif;

  font-weight:700; font-size:17px; color:var(--orange-600);

  width:26px; flex:none;

}



/* ===================== SERVICES ===================== */



.service-grid{

 display: grid;

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

  gap: 5px;

  background: var(--line);

  margin-top: 60px;

  border: 1px solid var(--line);

}

.service-card{

  background:var(--paper-2);

  padding:36px 34px;

  border-left:3px solid var(--orange-500);

}

.s-icon{ width:36px; height:36px; color:var(--navy-800); margin-bottom:18px; }

.service-card h3{ font-size:21px; margin-bottom:10px; font-weight:700; font-family:"IBM Plex Sans",sans-serif; color:var(--navy-900); }

.service-card p{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); }



/* ===================== INDUSTRIES ===================== */

.industries{ padding:90px 0; background:var(--navy-950); }

.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }

.chip{

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

  color:#dbe2ec;

  padding:10px 18px;

  font-size:13.5px; font-weight:500;

  border-radius:999px;

}

.chip-accent{

  background:var(--orange-500); color:var(--navy-950);

  border-color:var(--orange-500); font-weight:700;

}



/* ===================== MANPOWER ===================== */

.manpower{ padding:96px 0; background:var(--paper); }

.role-grid{

  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;

  margin-top:44px;

}

.role-group h3{

  font-family:"IBM Plex Sans",sans-serif; font-weight:700;

  font-size:14.5px; color:var(--navy-900);

  text-transform:none;

  padding-bottom:12px; margin-bottom:6px;

  border-bottom:2px solid var(--orange-500);

}

.role-group li{

  font-size:14px; color:var(--ink-soft);

  padding:9px 0; border-bottom:1px solid var(--line);

}



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

.clients{ padding:90px 0 70px 0; background:var(--paper-2); overflow:hidden; }

.marquee{

  margin-top:40px; overflow:hidden;

  border-top:1px solid var(--line); border-bottom:1px solid var(--line);

  padding:26px 0;

}

.marquee-track{

  display:flex; gap:56px; width:max-content;

  animation:scroll 38s linear infinite;

}

.marquee-track span{

  font-family:"Big Shoulders Display",sans-serif;

  font-weight:700; font-size:21px; color:var(--navy-800);

  white-space:nowrap; opacity:.85;

}

@keyframes scroll{

  from{ transform:translateX(0); }

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

}

.marquee:hover .marquee-track{ animation-play-state:paused; }

.clients-note{ margin-top:22px; font-size:13.5px; color:var(--steel); max-width:1160px; }

.clients .section-inner .clients-note{ padding:0; }



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

/* =========================================

   PROJECTS

========================================= */



.projects {

    padding: 96px 0;

    background: var(--paper);

}





/* =========================================

   PROJECT GRID

========================================= */



.project-grid {

    display: grid;

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

    gap: 50px;

    margin-top: 44px;

}





/* First / wide project */



.project-wide {

    grid-column: span 3;

}





/* =========================================

   PROJECT THUMB

========================================= */



.project-thumb {

    position: relative;

    width: 100%;

    height: 170px;



    overflow: hidden;



    /* Important: don't let the gradient cover the image */

    background: none;

}





/* Wide project */



.project-wide .project-thumb {

    height: 100%;

}





/* =========================================

   PROJECT IMAGE

========================================= */



.project-thumb img {

    display: block;



    width: 100%;

    height: 100%;



    margin: 0;

    padding: 0;



    /* object-fit: cover; */

    object-position: center;



    border: 0;

    border-radius: 0;

}





/* =========================================

   PROJECT BODY

========================================= */



/* .project-body {

    padding-top: 10px;

} */



.project-body h3 {

    margin: 0 0 3px;

    color: var(--navy-900);

    font-size: 16px;

    line-height: 1.35;

    font-weight: 700;

}



.project-body p {

    margin: 0;

    color: #8793a5;

    font-size: 13px;

    line-height: 1.4;

}





/* =========================================

   IMAGE HOVER

========================================= */



.project-thumb img {

    transition: transform 0.4s ease;

}



.project-card:hover .project-thumb img {

    transform: scale(1.03);

}





/* =========================================

   TABLET

========================================= */



@media (max-width: 900px) {



    .project-grid {

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

    }



    .project-wide {

        grid-column: span 2;

    }



    .project-wide .project-thumb {

        height: 240px;

    }

}





/* =========================================

   MOBILE

========================================= */



@media (max-width: 600px) {



    .projects {

        padding: 70px 0;

    }



    .project-grid {

        grid-template-columns: 1fr;

        gap: 28px;

    }



    .project-wide {

        grid-column: span 1;

    }



    .project-thumb,

    .project-wide .project-thumb {

        height: 230px;

    }

}

/* ===================== COMPLIANCE ===================== */

.compliance{ padding:90px 0; background:var(--paper-2); }

.compliance-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }

.compliance-grid h2{ font-size:34px; margin-bottom:16px; max-width:480px; }

.badge-row{ display:flex; flex-direction:column; gap:16px; }

.badge{

  background:var(--paper);

  border:1px solid var(--line);

  border-left:3px solid var(--navy-800);

  padding:22px 24px;

  display:flex; flex-direction:column; gap:4px;

}

.badge-tag{ font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--orange-600); text-transform:uppercase; }

.badge strong{ font-size:17px; color:var(--navy-900); }

.badge-meta{ font-size:13px; color:var(--steel); }



/* ===================== CTA BAND ===================== */

.cta-band{ background:var(--orange-500); padding:56px 0; }

.cta-inner{

  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;

}

.cta-inner h2{ font-size:32px; color:var(--navy-950); }



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

.site-footer{ background:var(--navy-950); padding:90px 0 0 0; }

.footer-grid{

  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;

  padding-bottom:70px;

}

.contact-list{ margin-top:26px; display:flex; flex-direction:column; gap:14px; max-width:420px; }

.contact-list li{ display:flex; gap:14px; color:#c9d2de; font-size:14.5px; line-height:1.6; }

.c-ico{ color:var(--orange-500); flex:none; }

.footer-cta{ flex:none; }

.footer-bottom{

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

  padding:22px 28px;

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

  max-width:1160px; margin:0 auto;

  color:#8494ab; font-size:12.5px;

}



/* ===================== RESPONSIVE ===================== */

@media (max-width:920px){

  .about-grid, .compliance-grid{ grid-template-columns:1fr; }

  .service-grid{ grid-template-columns:1fr; }

  .role-grid{ grid-template-columns:1fr 1fr; }

  .hero-title{ font-size:56px; }

  .project-wide{ grid-column:span 2; }

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

}

@media (max-width:680px){

  .nav-links, .nav-cta{ display:none; }

  .nav-toggle{ display:block; }

  .nav-links.open{

    display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0;

    background:var(--navy-950); padding:18px 28px; gap:18px;

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

  }

  .hero-title{ font-size:42px; }

  .hero-stats{ grid-template-columns:1fr 1fr; }

  .stat{ border-right:1px solid rgba(255,255,255,.14); }

  .stat:nth-child(2n){ border-right:none; }

  .stat:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14); }

  .role-grid{ grid-template-columns:1fr; }

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

  .project-wide{ grid-column:span 1; }

  .section-title{ font-size:32px; }

  .footer-grid{ flex-direction:column; align-items:flex-start; }

}



.nav-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}





/* Login Button */



.nav-login {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    height: 44px;

    padding: 0 22px;



    border: 1px solid #ffffff;



    color: #ffffff;



    text-decoration: none;



    font-size: 13px;

    font-weight: 600;



    transition: all 0.3s ease;

}



.nav-login:hover {

    background: #ffffff;

    color: #073474;

}





/* Request Workforce */



.nav-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    height: 44px;

    padding: 0 22px;



    background: #ffb437;



    color: #073474;



    text-decoration: none;



    font-size: 13px;

    font-weight: 700;



    transition: all 0.3s ease;

}



.nav-cta:hover {

    background: #ffffff;

    color: #073474;

}



@media (max-width: 991px) {



    .nav-actions {

        display: none;

    }



}





.project-thumb {

    position: relative;

    overflow: hidden;

}



.project-image-label {

    position: absolute;

    left: 15px;

    bottom: 15px;

    background: rgba(0, 0, 0, 0.7);

    color: #fff;

    padding: 6px 10px;

    border-radius: 4px;

    font-size: 12px;

}