/* =========================================================
   RESET + GLOBAL
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: #171717;
    background: #ffffff;
    line-height: 1.5;
    overflow-x: hidden;
}

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

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

button {
    font-family: inherit;
}

.container {
    width: calc(100% - 136px);
    max-width: 1216px;
    margin: 0 auto;
}


/* =========================================================
   COLORS / COMMON
========================================================= */

:root {
    --gold: #d6960b;
    --gold-dark: #bd8108;
    --black: #181818;
    --dark: #191919;
    --text: #171717;
    --gray-text: #626b7b;
    --light-gray: #f0f1f2;
    --border: #d9dde2;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    width: 100%;
    height: 64px;

    background: #ffffff;

    position: relative;
    z-index: 1000;
}

.nav-container {
    width: calc(100% - 136px);
    max-width: 1216px;
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;
}


/* LOGO */

.logo {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.logo img {
    width: 235px;
    height: auto;
}


/* LINKS */

.nav-links {
    display: flex;
    align-items: center;

    gap: 29px;

    margin-left: auto;
    margin-right: 55px;
}

.nav-links a {
    color: #494949;

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

    white-space: nowrap;

    transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--gold);
}


/* CONTACT */

.nav-contact {
    background: var(--gold);

    color: #ffffff;

    padding: 10px 15px;

    border-radius: 7px;

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

    flex-shrink: 0;

    box-shadow: 0 8px 25px rgba(214, 150, 11, 0.16);

    transition: 0.2s;
}

.nav-contact:hover {
    background: var(--gold-dark);
}


/* MOBILE */

.menu-button {
    display: none;

    margin-left: auto;

    border: none;
    background: transparent;

    color: #111;

    font-size: 27px;

    cursor: pointer;
}


/* MOBILE MENU BUTTON - HIDDEN ON DESKTOP */

.mobile-menu-btn {
    display: none;
}


/* =========================================================
   COMMON LABEL
========================================================= */

.section-label {
    display: block;

    color: var(--gold);

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

    letter-spacing: 3px;

    margin-bottom: 15px;
}


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

.hero {
    min-height: 536px;

    position: relative;

    background-image: url("../assets/hero-main.jpg");
    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(16, 17, 18, 0.98) 0%,
            rgba(16, 17, 18, 0.93) 34%,
            rgba(16, 17, 18, 0.72) 62%,
            rgba(16, 17, 18, 0.48) 100%
        );
}

.hero-inner {
    position: relative;
    z-index: 2;

    padding-top: 24px;
    padding-bottom: 28px;
}


/* BADGE */

.hero-badge {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 16px;

    margin-bottom: 32px;

    border: 1px solid rgba(214, 150, 11, 0.5);
    border-radius: 30px;

    background: rgba(121, 84, 4, 0.12);

    color: #eeeeee;

    font-size: 14px;
}

.hero-badge span {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 50%;

    background: var(--gold);
}


/* HERO TITLE */

.hero h1 {
    max-width: 790px;

    color: #ffffff;

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

    line-height: 1;

    letter-spacing: -2.8px;

    margin-bottom: 32px;
}

.hero h1 strong {
    color: var(--gold);
    font-weight: 700;
}


/* HERO TEXT */

.hero-text {
    max-width: 670px;

    color: #d1d1d1;

    font-size: 20px;

    line-height: 1.38;

    margin-bottom: 40px;
}


/* HERO BUTTONS */

.hero-actions {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 64px;
}

.gold-button,
.outline-dark-button,
.light-button {
    min-height: 48px;

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

    border-radius: 6px;

    font-size: 14px;

    transition: 0.2s ease;
}

.gold-button {
    min-width: 248px;

    padding: 0 31px;

    gap: 20px;

    background: var(--gold);
    color: #ffffff;

    box-shadow: 0 13px 30px rgba(214, 150, 11, 0.16);
}

.gold-button:hover {
    background: var(--gold-dark);
}

.gold-button span {
    font-size: 22px;
    line-height: 1;
}

.outline-dark-button {
    min-width: 207px;

    padding: 0 25px;

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

    color: #ffffff;

    background: rgba(255, 255, 255, 0.02);
}

.outline-dark-button:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* HERO STATS */

.hero-stats {
    display: flex;
    gap: 23px;
}

.hero-stat {
    width: 151px;
    height: 91px;

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

    padding: 15px;

    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 12px;

    background: rgba(25, 25, 25, 0.15);
}

.hero-stat strong {
    color: #dfa014;

    font-size: 31px;

    line-height: 1;

    margin-bottom: 8px;
}

.hero-stat span {
    color: #c7c7c7;

    font-size: 12px;
}


/* =========================================================
   COMPANY OVERVIEW
========================================================= */

.company-overview {
    padding: 120px 0;
}

.section-white {
    background: #ffffff;
}

.overview-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 56px;

    align-items: center;
}

.overview-image {
    position: relative;
}

.overview-image > img {
    width: 100%;
    height: 390px;

    object-fit: cover;

    border-radius: 20px;
}


/* ESTABLISHED CARD */

.established-card {
    position: absolute;

    right: -16px;
    bottom: -31px;

    width: 274px;
    min-height: 90px;

    padding: 20px 24px;

    display: flex;
    align-items: center;

    gap: 15px;

    background: #f7f4f2;

    border: 1px solid #ddd7d2;
    border-radius: 17px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.09);
}

.established-icon {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: var(--gold);

    color: #ffffff;

    font-size: 24px;
}

.established-card strong {
    display: block;

    font-size: 16px;

    margin-bottom: 2px;
}

.established-card span {
    display: block;

    color: var(--gray-text);

    font-size: 14px;
}


/* OVERVIEW CONTENT */

.overview-content h2 {
    font-size: 38px;

    line-height: 1.08;

    letter-spacing: -1px;

    margin-bottom: 24px;
}

.overview-content h2 strong {
    color: var(--gold);
}

.overview-content p {
    color: var(--gray-text);

    font-size: 16px;

    line-height: 1.62;

    margin-bottom: 18px;
}

.small-button {
    min-width: 157px;

    min-height: 41px;

    padding: 0 16px;

    margin-top: 14px;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-us {
    background: #f0f1f2;

    padding: 33px 0 105px;
}

.center-heading {
    text-align: center;

    margin-bottom: 54px;
}

.center-heading .section-label {
    margin-bottom: 15px;
}

.center-heading h2 {
    font-size: 38px;

    line-height: 1.1;

    letter-spacing: -1px;
}


/* CARDS */

.why-grid {
    display: grid;

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

    gap: 25px;
}

.why-card {
    min-height: 265px;

    padding: 32px;

    background: #ffffff;

    border-radius: 17px;

    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.05);
}

.gold-icon {
    width: 49px;
    height: 49px;

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

    margin-bottom: 25px;

    border-radius: 11px;

    background: var(--gold);

    color: #ffffff;

    font-size: 20px;
    font-weight: 700;
}

.why-card h3 {
    font-size: 16px;

    margin-bottom: 15px;
}

.why-card p {
    color: var(--gray-text);

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   CORE CAPABILITIES
========================================================= */

.capabilities {
    background: #191919;

    color: #ffffff;

    padding: 77px 0;
}

.capabilities-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 56px;

    align-items: center;
}

.capabilities-content h2 {
    max-width: 560px;

    font-size: 37px;

    line-height: 1.1;

    letter-spacing: -1px;

    margin-bottom: 24px;
}

.capabilities-content > p {
    max-width: 570px;

    color: #c8c8c8;

    font-size: 16px;

    line-height: 1.6;

    margin-bottom: 34px;
}


/* CAPABILITY BOXES */

.capability-list {
    display: grid;

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

    gap: 16px;
}

.capability-item {
    min-height: 56px;

    padding: 12px 16px;

    display: flex;
    align-items: center;

    gap: 14px;

    border: 1px solid #414141;
    border-radius: 12px;

    background: #242424;

    color: #efefef;

    font-size: 14px;
}

.capability-item span {
    width: 18px;
    height: 18px;

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

    flex-shrink: 0;

    border: 2px solid var(--gold);
    border-radius: 50%;

    color: var(--gold);

    font-size: 10px;
    font-weight: 700;
}


/* IMAGE */

.capabilities-image img {
    width: 100%;
    height: 440px;

    object-fit: cover;

    border-radius: 22px;
}


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

.featured-services {
    padding: 32px 0 90px;
}

.section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 55px;
}

.section-heading-row h2 {
    font-size: 38px;

    line-height: 1.08;

    letter-spacing: -1px;
}

.light-button {
    min-width: 140px;

    gap: 23px;

    padding: 0 16px;

    color: #222;

    background: #ffffff;

    border: 1px solid #d8dde2;
}

.light-button:hover {
    background: #f5f5f5;
}


/* SERVICES GRID */

.services-grid {
    display: grid;

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

    gap: 24px;
}

.service-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d8dde2;
    border-radius: 16px;
}

.service-card > img {
    width: 100%;
    height: 192px;

    object-fit: cover;
}

.service-content {
    min-height: 130px;

    padding: 24px;
}

.service-content h3 {
    font-size: 18px;

    margin-bottom: 9px;
}

.service-content p {
    color: var(--gray-text);

    font-size: 14px;

    line-height: 1.6;
}


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

.major-projects {
    padding: 25px 0 95px;

    background: #ffffff;
}

.projects-grid {
    display: grid;

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

    gap: 24px;
}

.project-card {
    min-height: 307px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    border: 1px solid #d8dde2;
    border-radius: 16px;

    background: #ffffff;
}

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

    margin-bottom: 17px;
}

.project-client {
    color: #616a79;

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

    letter-spacing: 0.5px;
}

.project-status {
    padding: 4px 13px;

    border-radius: 30px;

    background: #fbf6e9;

    color: var(--gold);

    font-size: 12px;
}

.project-card h3 {
    font-size: 18px;

    line-height: 1.35;

    margin-bottom: 15px;
}

.project-card > p {
    color: var(--gray-text);

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 20px;
}

.project-info {
    margin-top: auto;

    padding-top: 16px;

    border-top: 1px solid #d8dde2;
}

.project-info div {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--gray-text);

    font-size: 14px;

    margin-bottom: 7px;
}

.project-info span {
    color: var(--gold);
}


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

.clients-section {
    padding: 36px 0 12px;

    background: #f0f1f2;
}

.clients-grid {
    display: grid;

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

    gap: 16px;

    margin-bottom: 40px;
}

.client-logo {
    height: 110px;

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

    padding: 20px;

    background: rgba(255, 255, 255, 0.65);

    border: 1px solid #d6dbe0;
    border-radius: 15px;

    filter: grayscale(1);

    opacity: 0.7;

    transition: 0.25s ease;
}

.client-logo img {
    max-width: 150px;
    max-height: 65px;

    object-fit: contain;
}

.client-logo:hover,
.client-logo.highlighted {
    filter: grayscale(0);
    opacity: 1;
}

.client-logo.highlighted {
    border-color: #e3b13b;
}

.center-button {
    display: flex;
    justify-content: center;
}


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

.industries {
    padding: 66px 0 92px;

    background: #f0f1f2;
}

.industries-grid {
    display: grid;

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

    gap: 21px;
}

.industry-card {
    min-height: 96px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 24px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.05);
}

.industry-icon {
    width: 44px;
    height: 44px;

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

    flex-shrink: 0;

    border-radius: 11px;

    background: #fbf6e9;

    color: var(--gold);

    font-size: 20px;
}

.industry-card strong {
    font-size: 16px;

    line-height: 1.45;
}


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

.vision-mission {
    padding: 5px 0 0;

    background: #ffffff;
}

.vision-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 32px;
}

.vision-card {
    min-height: 530px;

    padding: 40px;

    border: 1px solid #d8dde2;
    border-radius: 22px;
}

.vision-card h2 {
    font-size: 25px;

    margin-bottom: 16px;
}

.vision-card > p {
    max-width: 500px;

    color: var(--gray-text);

    font-size: 16px;

    line-height: 1.65;
}


/* MISSION */

.mission-list {
    list-style: none;
}

.mission-list li {
    display: flex;

    gap: 13px;

    color: var(--gray-text);

    font-size: 16px;

    line-height: 1.6;

    margin-bottom: 18px;
}

.mission-list li span {
    width: 18px;
    height: 18px;

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

    flex-shrink: 0;

    margin-top: 4px;

    border: 2px solid var(--gold);
    border-radius: 50%;

    color: var(--gold);

    font-size: 9px;
}


/* =========================================================
   ISO
========================================================= */

.iso-section {
    padding: 22px 0 128px;

    background: #ffffff;
}

.iso-wrapper {
    max-width: 805px;

    margin: 0 auto;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px;
}

.iso-pill {
    min-height: 45px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 0 22px;

    background: #f1f2f3;

    border: 1px solid #d8dde2;
    border-radius: 30px;

    color: #222;

    font-size: 14px;
}

.iso-pill span {
    color: var(--gold);
}


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

.cta-section {
    padding: 128px 0 10px;

    background: #191919;
}

.cta-box {
    min-height: 405px;

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

    text-align: center;

    padding: 50px;

    border: 1px solid rgba(214, 150, 11, 0.30);
    border-radius: 23px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(214, 150, 11, 0.22),
            transparent 30%
        ),
        #242424;
}

.cta-box h2 {
    color: #ffffff;

    font-size: 37px;

    line-height: 1.1;

    letter-spacing: -1px;

    margin-bottom: 24px;
}

.cta-box p {
    color: #c8c8c8;

    font-size: 16px;

    line-height: 1.5;

    margin-bottom: 40px;
}

.cta-button {
    min-width: 166px;
}


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

.footer {
    padding: 64px 0 0;
    background: #191919;
    color: #ffffff;
}

.footer-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    gap: 60px;

    padding-bottom: 55px;
    border-bottom: none;
}


/* FOOTER COMPANY */

.footer-logo {
    width: 260px;
    max-width: 260px;
    height: 55px;
    max-height: 55px;

    margin-bottom: 25px;

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

    filter: brightness(0) invert(1);
}

.footer-company p {
    max-width: 290px;

    margin: 0 0 24px;

    color: #ffffff;

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

.footer-slogan {
    display: block;

    color: #e1a00e;

    font-size: 16px;
}


/* FOOTER COLUMNS */

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

.footer-column h3,
.footer-affiliates h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.footer-column a {
    margin-bottom: 12px;

    color: #d6d6d6;

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

    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: var(--gold);
}

.footer-office p {
    margin: 0 0 16px;

    color: #ffffff;

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


/* AFFILIATES */

.footer-affiliates {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 40px 0 55px;

    border-top: 1px solid #363636;
}

.affiliate-links {
    display: flex;
    flex-wrap: wrap;

    column-gap: 27px;
    row-gap: 12px;
}

.affiliate-links a {
    margin: 0;

    color: #d6d6d6;

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

    transition: color 0.2s ease;
}

.affiliate-links a:hover {
    color: var(--gold);
}



/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {
    width: 49px;
    height: 49px;

    position: fixed;

    right: 33px;
    bottom: 24px;

    z-index: 999;

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

    border: none;
    border-radius: 50%;

    background: var(--gold);

    color: #ffffff;

    font-size: 24px;
    font-weight: 300;

    cursor: pointer;

    box-shadow: 0 10px 30px rgba(214, 150, 11, 0.25);

    transition: 0.2s;
}

.back-to-top:hover {
    background: var(--gold-dark);

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .container,
    .nav-container {
        width: calc(100% - 50px);
    }

    .nav-links {
        gap: 18px;

        margin-right: 25px;
    }

    .nav-links a {
        font-size: 13px;
    }

    .logo img {
        width: 200px;
    }

    .hero h1 {
        font-size: 62px;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 850px) {

    /* =========================================
       UNIVERSAL MOBILE NAVIGATION
    ========================================= */

    .navbar,
    .header,
    .clients-header,
    .hse-page .site-header,
    .ora-holding-page .ora-header,
    .contact-header {
        position: relative;
        z-index: 1000;
    }

    .nav-links,
    .nav,
    .clients-nav,
    .hse-page .main-nav,
    .ora-holding-page .ora-nav,
    .contact-menu,
    .projects-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 72px);
        margin: 0 !important;
        padding: 8px 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.10);
        z-index: 9999;
    }

    .nav-links.mobile-open,
    .nav.mobile-open,
    .clients-nav.mobile-open,
    .hse-page .main-nav.mobile-open,
    .ora-holding-page .ora-nav.mobile-open,
    .contact-menu.mobile-open,
    .projects-menu.mobile-open {
        display: flex !important;
    }

    .nav-links a,
    .nav a,
    .clients-nav a,
    .hse-page .main-nav a,
    .ora-holding-page .ora-nav a,
    .contact-menu a,
    .projects-menu a {
        width: 100% !important;
        margin: 0 !important;
        padding: 13px 18px !important;
        display: block !important;
        flex-shrink: 0;
        color: #181818 !important;
        text-align: left;
        border-bottom: 1px solid #eeeeee;
    }

    .nav-links a:last-child,
    .nav a:last-child,
    .clients-nav a:last-child,
    .hse-page .main-nav a:last-child,
    .ora-holding-page .ora-nav a:last-child,
    .contact-menu a:last-child,
    .projects-menu a:last-child {
        border-bottom: 0;
    }

    .menu-button,
    .menu-btn,
    .mobile-menu-btn {
        width: 42px;
        height: 42px;
        margin-left: auto;
        padding: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #181818;
        font-size: 27px;
        line-height: 1;
        cursor: pointer;
        box-shadow: none !important;
        z-index: 10001;
    }

    .nav-contact,
    .touch-btn,
    .clients-header-button,
    .hse-page .gold-button,
    .ora-holding-page .ora-contact-btn,
    .contact-touch-btn {
        display: none !important;
    }

    /* HOME TABLET FLOW */

    .hero {
        width: 100%;
        min-height: auto;
    }

    .hero h1 {
        font-size: 52px;
    }

    .hero-stats {
        width: 100%;
        max-width: 410px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .hero-stat {
        width: 100%;
    }

    .overview-grid,
    .capabilities-grid,
    .vision-grid {
        grid-template-columns: 1fr;
    }

    .services-grid,
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 600px) {

    .container,
    .nav-container {
        width: calc(100% - 32px);
        max-width: none;
    }

    .navbar {
        height: 72px;
        min-height: 72px;
    }

    .nav-container {
        height: 72px;
        min-height: 72px;
    }

    .logo img {
        width: 180px;
        max-width: 180px;
    }

    /* HERO */

    .hero {
        width: 100%;
        min-height: auto;
        background-position: center;
    }

    .hero-inner {
        width: calc(100% - 32px);
        padding-top: 28px;
        padding-bottom: 38px;
    }

    .hero-badge {
        max-width: 100%;
        margin-bottom: 23px;
        padding: 8px 11px;
        font-size: 11px;
        line-height: 1.35;
        white-space: normal;
    }

    .hero h1 {
        max-width: 100%;
        margin-bottom: 24px;
        font-size: 38px;
        line-height: 1.03;
        letter-spacing: -1.2px;
    }

    .hero h1 br {
        display: none;
    }

    .hero-text {
        max-width: 100%;
        margin-bottom: 28px;
        font-size: 15px;
        line-height: 1.5;
    }

    .hero-actions {
        width: 100%;
        margin-bottom: 32px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .gold-button,
    .outline-dark-button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero-stats {
        width: 100%;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hero-stat {
        width: 100%;
        height: auto;
        min-height: 82px;
        padding: 13px;
    }

    .hero-stat strong {
        font-size: 27px;
    }

    /* COMMON */

    .section-label {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .center-heading h2,
    .section-heading-row h2,
    .overview-content h2,
    .capabilities-content h2,
    .cta-box h2 {
        font-size: 29px;
        line-height: 1.12;
    }

    /* OVERVIEW */

    .company-overview {
        padding: 60px 0;
        overflow: hidden;
    }

    .overview-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .overview-image {
        width: 100%;
        min-width: 0;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .overview-image > img {
        width: 100%;
        height: 235px;
        object-fit: cover;
        border-radius: 16px;
    }

    .established-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: calc(100% - 20px);
        min-height: 78px;
        margin: -24px auto 0;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 2;
    }

    .established-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .established-card strong {
        font-size: 15px;
        line-height: 1.3;
    }

    .established-card span {
        font-size: 13px;
        line-height: 1.4;
    }

    .overview-content {
        width: 100%;
        min-width: 0;
        margin-top: 0;
    }

    .overview-content h2 {
        margin-bottom: 19px;
        font-size: 29px;
        line-height: 1.12;
        letter-spacing: -0.5px;
    }

    .overview-content h2 br {
        display: none;
    }

    .overview-content p {
        width: 100%;
        max-width: 100%;
        font-size: 15px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .overview-content .small-button {
        width: auto;
        min-width: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* WHY */

    .why-us {
        padding: 60px 0;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .why-card {
        min-height: 0;
        padding: 26px 22px;
    }

    /* CAPABILITIES */

    .capabilities {
        padding: 60px 0;
    }

    .capabilities-grid,
    .vision-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .capability-list {
        grid-template-columns: 1fr;
    }

    .capabilities-image img {
        height: 260px;
    }

    /* HEADINGS */

    .section-heading-row {
        margin-bottom: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    /* SERVICES */

    .featured-services {
        padding: 60px 0;
    }

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

    /* PROJECTS */

    .major-projects {
        padding: 60px 0;
    }

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

    /* CLIENTS */

    .clients-section {
        padding: 60px 0;
    }

    .clients-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .client-logo {
        height: 96px;
        padding: 15px;
    }

    /* INDUSTRIES */

    .industries {
        padding: 60px 0;
    }

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

    /* VISION */

    .vision-card {
        min-height: auto;
        padding: 25px 22px;
    }

    /* ISO */

    .iso-section {
        padding: 45px 0 70px;
    }

    .iso-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .iso-pill {
        width: 100%;
        min-width: 0;
        padding: 10px 16px;
        font-size: 12px;
        line-height: 1.4;
    }

    /* CTA */

    .cta-section {
        padding: 60px 0 10px;
    }

    .cta-box {
        min-height: 0;
        padding: 34px 18px;
    }

    .cta-box br {
        display: none;
    }

    /* FOOTER */

    .footer {
        padding-top: 52px;
    }

    .footer-grid,
    .footer-affiliates,
    .copyright {
        width: calc(100% - 32px);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-bottom: 42px;
    }

    .footer-logo,
    .footer-about img {
        width: 225px;
        max-width: 100%;
        height: auto;
    }

    .affiliate-links {
        gap: 10px 18px;
    }

    /* BACK TO TOP */

    .back-to-top,
    .back-top,
    .scroll-top,
    .clients-top-button {
        width: 44px;
        height: 44px;
        right: 14px;
        bottom: 14px;
    }
}

@media (max-width: 420px) {

    .container,
    .nav-container,
    .hero-inner {
        width: calc(100% - 24px);
    }

    .logo img {
        width: 162px;
        max-width: 162px;
    }

    .menu-button,
    .menu-btn,
    .mobile-menu-btn {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 25px;
    }

    .hero-inner {
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .hero-badge {
        font-size: 10px;
        padding: 7px 9px;
    }

    .hero h1 {
        font-size: 34px;
        line-height: 1.04;
    }

    .hero-text {
        font-size: 14px;
        line-height: 1.52;
    }

    .hero-stat {
        min-height: 76px;
    }

    .hero-stat strong {
        font-size: 24px;
    }

    .center-heading h2,
    .section-heading-row h2,
    .overview-content h2,
    .capabilities-content h2,
    .cta-box h2 {
        font-size: 27px;
    }

    .overview-image > img {
        height: 215px;
    }

    .established-card {
        width: calc(100% - 12px);
        padding: 13px 14px;
    }

    .client-logo {
        height: 88px;
    }
}




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

.about-page {
    width: 100%;
    overflow: hidden;
}

.about-page .section-label {
    display: block;
    margin-bottom: 20px;
    color: #d99a0b;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


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

.about-page-hero {
    position: relative;
    min-height: 492px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(18, 18, 18, 0.96) 0%,
            rgba(18, 18, 18, 0.84) 45%,
            rgba(18, 18, 18, 0.45) 100%
        ),
        url("../assets/hero-substation.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.about-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
}

.about-page-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.about-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 14px;
    color: #bdbdbd;
}

.about-breadcrumb a {
    color: #bdbdbd;
    text-decoration: none;
}

.about-breadcrumb a:hover {
    color: #ffffff;
}

.about-breadcrumb span:last-child {
    color: #d99a0b;
}

.about-page-hero h1 {
    max-width: 820px;
    margin: 0 0 25px;
    color: #ffffff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.about-page-hero p {
    max-width: 720px;
    margin: 0;
    color: #c7c7c7;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.65;
}


/* =========================================================
   COMPANY INTRODUCTION
========================================================= */

.about-introduction {
    padding: 60px 0 95px;
    background: #ffffff;
}

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

.about-introduction-content h2 {
    margin: 0 0 24px;
    color: #181818;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1px;
}

.about-introduction-content p {
    margin: 0;
    color: #606978;
    font-size: 16px;
    line-height: 1.62;
}

.about-introduction-image {
    width: 100%;
    height: 380px;
    overflow: hidden;
    border-radius: 23px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

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


/* =========================================================
   COMPANY HISTORY
========================================================= */

.about-history {
    min-height: 535px;
    display: flex;
    align-items: center;
    padding: 80px 0;
    background: #f0f1f2;
}

.about-history-content {
    max-width: 800px;
}

.about-history-content h2 {
    margin: 0 0 25px;
    color: #181818;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1px;
}

.about-history-content p {
    margin: 0;
    color: #606978;
    font-size: 16px;
    line-height: 1.62;
}


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

.about-vision-section {
    padding: 10px 0;
    background: #ffffff;
}

.about-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.about-vm-card {
    min-height: 520px;
    padding: 40px;
    background: #ffffff;
    border: 1px solid #d8dde2;
    border-radius: 23px;
}

.about-vm-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 11px;
    background: #d6960b;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

.about-vm-card h2 {
    margin: 0 0 16px;
    color: #181818;
    font-size: 25px;
    font-weight: 700;
}

.about-vm-card > p {
    margin: 0;
    color: #606978;
    font-size: 16px;
    line-height: 1.65;
}

.about-mission-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-mission-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 18px;
}

.about-mission-list li > span {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    border: 2px solid #dfa014;
    border-radius: 50%;
    color: #dfa014;
    font-size: 9px;
    font-weight: 700;
}

.about-mission-list p {
    margin: 0;
    color: #606978;
    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   CORE VALUES
========================================================= */

.about-values {
    padding: 55px 0 145px;
    background: #f0f1f2;
}

.about-center-heading {
    margin-bottom: 56px;
    text-align: center;
}

.about-center-heading .section-label {
    margin-bottom: 20px;
}

.about-center-heading h2 {
    margin: 0;
    color: #181818;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
}

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

.about-value-card {
    min-height: 200px;
    padding: 30px 32px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.about-value-card h3 {
    margin: 0 0 15px;
    color: #181818;
    font-size: 20px;
    font-weight: 700;
}

.about-value-card p {
    margin: 0;
    color: #606978;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   ORGANIZATIONAL HIGHLIGHTS
========================================================= */

.about-highlights {
    padding: 10px 0 100px;
    background: #f0f1f2;
}

.about-highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 49px;
}

.about-highlights h2 {
    margin: 0 0 35px;
    color: #181818;
    font-size: 37px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.8px;
}

.about-awards h3 {
    margin: 10px 0 24px;
    color: #181818;
    font-size: 21px;
    font-weight: 700;
}

.about-info-list {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.about-info-box {
    min-height: 55px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 22px;
    background: #ffffff;
    border-radius: 12px;
}

.about-info-box p {
    margin: 0;
    color: #596271;
    font-size: 14px;
    line-height: 1.45;
}

.about-info-icon {
    flex-shrink: 0;
    color: #dfa014;
    font-size: 20px;
}


/* =========================================================
   COMPANY AFFILIATES - THE ORA GROUP
========================================================= */

.about-affiliates {
    padding: 22px 0 90px;
    background: #ffffff;
}

.about-affiliates .about-center-heading {
    margin-bottom: 55px;
}

.about-affiliates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.about-affiliate-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #d8dde2;
    border-radius: 16px;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.about-affiliate-card:hover {
    transform: translateY(-4px);
    border-color: #d6960b;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07);
}


/* LOGO AREA */

.about-affiliate-logo {
    width: 100%;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.about-affiliate-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 190px;
    max-height: 72px;
    object-fit: contain;
    object-position: left center;
}

.about-affiliate-card h3 {
    margin: auto 0 7px;
    color: #181818;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.about-affiliate-card > span {
    color: #68717f;
    font-size: 12px;
}


/* ORA Holding placeholder */

.about-holding-placeholder {
    width: 82px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf4e5;
    border-radius: 10px;
    color: #d6960b;
    font-size: 20px;
    font-weight: 700;
}


/* =========================================================
   MANAGING DIRECTOR MESSAGE
========================================================= */

.about-director {
    padding: 84px 0 38px;
    background: #181818;
}

.about-director-card {
    width: min(896px, 100%);
    margin: 0 auto;
    padding: 55px 56px 52px;
    background: #232323;
    border: 1px solid #3b3b3b;
    border-radius: 24px;
}

.about-director .section-label {
    color: #dfa014;
}

.about-quote {
    margin-bottom: 27px;
    color: #dfa014;
    font-size: 60px;
    font-weight: 700;
    line-height: 0.7;
}

.about-director-card h2 {
    margin: 0 0 26px;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
}

.about-director-text p {
    margin: 0 0 21px;
    color: #cccccc;
    font-size: 16px;
    line-height: 1.6;
}

.about-director-signature {
    display: flex;
    flex-direction: column;
    margin-top: 41px;
    padding-top: 31px;
    border-top: 1px solid #414141;
}

.about-director-signature strong {
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 16px;
}

.about-director-signature span {
    color: #dfa014;
    font-size: 14px;
}


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

.about-cta {
    padding: 38px 0 85px;
    background: #181818;
}

.about-cta-box {
    min-height: 405px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    text-align: center;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(214, 150, 11, 0.20),
            transparent 32%
        ),
        #242424;

    border: 1px solid rgba(214, 150, 11, 0.30);
    border-radius: 23px;
}

.about-cta-box .section-label {
    margin-bottom: 20px;
}

.about-cta-box h2 {
    margin: 0 0 23px;
    color: #ffffff;
    font-size: 37px;
    font-weight: 700;
    line-height: 1.1;
}

.about-cta-box p {
    margin: 0 0 38px;
    color: #c5c5c5;
    font-size: 16px;
    line-height: 1.55;
}

.about-cta-btn {
    min-width: 166px;
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 20px;
    background: #d6960b;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.about-cta-btn:hover {
    background: #bd8108;
}


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

@media (max-width: 1100px) {

    .about-affiliates-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 900px) {

    .about-introduction-grid,
    .about-vision-grid,
    .about-highlights-grid {
        grid-template-columns: 1fr;
    }

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

    .about-page-hero h1 {
        font-size: 42px;
    }

    .about-introduction-image {
        order: 2;
    }

    .about-vm-card {
        min-height: auto;
    }

}


@media (max-width: 600px) {

    .about-page-hero {
        min-height: 460px;
    }

    .about-page-hero h1 {
        font-size: 35px;
        line-height: 1.1;
    }

    .about-page-hero p {
        font-size: 15px;
    }

    .about-page-hero h1 br,
    .about-page-hero p br,
    .about-introduction h2 br,
    .about-history h2 br,
    .about-highlights h2 br,
    .about-cta h2 br,
    .about-cta p br {
        display: none;
    }

    .about-introduction {
        padding: 65px 0;
    }

    .about-history {
        min-height: auto;
        padding: 65px 0;
    }

    .about-values,
    .about-highlights,
    .about-affiliates {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .about-introduction-content h2,
    .about-history-content h2,
    .about-highlights h2 {
        font-size: 30px;
    }

    .about-introduction-image {
        height: 280px;
    }

    .about-vision-section {
        padding: 35px 0;
    }

    .about-vm-card {
        padding: 28px 24px;
    }

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

    .about-affiliate-card {
        min-height: 190px;
    }

    .about-director {
        padding-top: 60px;
    }

    .about-director-card {
        padding: 35px 25px;
        border-radius: 18px;
    }

    .about-director-card h2 {
        font-size: 27px;
    }

    .about-director-text p {
        font-size: 15px;
    }

    .about-cta-box {
        min-height: 380px;
        padding: 40px 22px;
    }

    .about-cta-box h2 {
        font-size: 29px;
    }

}


/* =========================================================
   PA COST - SERVICES PAGE
   Scoped so it does NOT change the Home page
   Supports both services HTML class-name versions
========================================================= */

.services-page {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: #171717;
    background: #ffffff;
    overflow-x: hidden;
}

.services-container,
.services-page .container {
    width: calc(100% - 136px);
    max-width: 1216px;
    margin-left: auto;
    margin-right: auto;
}

/* HERO */
.services-hero,
.services-page-hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(12, 12, 12, 0.94) 0%,
            rgba(12, 12, 12, 0.82) 48%,
            rgba(12, 12, 12, 0.60) 100%
        ),
        url("../assets/service-engineering.jpg") center / cover no-repeat;
}

.services-hero::before,
.services-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.08);
    pointer-events: none;
}

.services-hero-content,
.services-page-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.services-breadcrumb,
.services-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 14px;
    color: #bfc3c8;
}

.services-breadcrumb a,
.services-page-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.services-breadcrumb a:hover,
.services-page-breadcrumb a:hover {
    color: #d6960b;
}

.services-breadcrumb .active,
.services-page-breadcrumb strong,
.services-page-breadcrumb span:last-child {
    color: #d6960b;
}

.services-hero h1,
.services-page-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -1.5px;
}

.services-hero p,
.services-page-hero p {
    max-width: 720px;
    margin: 26px 0 0;
    color: #d2d5d9;
    font-size: 18px;
    line-height: 1.6;
}

/* SERVICE LIST */
.services-list,
.services-page-list {
    padding: 70px 0 90px;
    background: #ffffff;
}

.services-list > .services-container,
.services-page-list > .container,
.services-page-list > .services-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Cards: scoped to Services only */
.services-page .service-card,
.services-page-card {
    width: 100%;
    min-height: 390px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9dee5;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,.04);
}

.services-page .service-image,
.services-page-card-image {
    width: 100%;
    height: 100%;
    min-height: 390px;
    overflow: hidden;
}

.services-page .service-image img,
.services-page-card-image img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    display: block;
    object-fit: cover;
}

.services-page .service-content,
.services-page-card-content {
    min-height: 0;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Label / icon */
.services-page .service-label,
.services-page-service-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    color: #586170;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
}

.services-page .service-icon,
.services-page-icon {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #d6960b;
    color: #ffffff;
    font-size: 23px;
    line-height: 1;
    letter-spacing: 0;
}

.services-page .service-label > span {
    color: #586170;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
}

.services-page .service-content h2,
.services-page-card h2 {
    margin: 0 0 12px;
    color: #171717;
    font-size: 31px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.8px;
}

.services-page .service-highlight,
.services-page-highlight {
    margin: 0 0 22px;
    color: #dc9400;
    font-size: 16px;
    line-height: 1.55;
}

.services-page .service-description,
.services-page-card-content > p {
    max-width: 540px;
    margin: 0;
    color: #606978;
    font-size: 16px;
    line-height: 1.6;
}

/* Feature points */
.services-page .service-points,
.services-page-features,
.services-page-feature-grid {
    margin-top: 24px;
    color: #606978;
    font-size: 14px;
}

.services-page .service-points {
    display: grid;
}

.services-page .service-points.two-columns,
.services-page .testing-points,
.services-page-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    column-gap: 27px;
    row-gap: 12px;
}

.services-page-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.services-page .service-points span {
    line-height: 1.45;
}

/* Alternating image order */
.services-page .image-right .service-content,
.services-page-card.services-page-image-right .services-page-card-content {
    order: 1;
}

.services-page .image-right .service-image,
.services-page-card.services-page-image-right .services-page-card-image {
    order: 2;
}

/* CTA */
.services-cta,
.services-page .cta-section {
    padding: 58px 0 72px;
    background: #191919;
}

.services-cta-box,
.services-page .cta-box {
    min-height: 405px;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    border: 1px solid rgba(211,150,15,.35);
    border-radius: 25px;
    background:
        radial-gradient(circle at 95% 10%, rgba(210,150,15,.20), transparent 30%),
        #242424;
}

.services-page .cta-small,
.services-page .cta-box .section-label {
    margin-bottom: 20px;
    color: #e0a00b;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
}

.services-cta-box h2,
.services-page .cta-box h2 {
    margin: 0;
    color: #ffffff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1px;
}

.services-cta-box p,
.services-page .cta-box p {
    margin: 25px 0 40px;
    color: #c5c5c5;
    font-size: 16px;
    line-height: 1.55;
}

.services-contact-btn,
.services-page .cta-button {
    min-width: 166px;
    min-height: 45px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    border-radius: 7px;
    background: #d39108;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: .25s ease;
}

.services-contact-btn:hover,
.services-page .cta-button:hover {
    background: #b97d00;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1000px) {
    .services-container,
    .services-page .container {
        width: calc(100% - 60px);
    }

    .services-hero h1,
    .services-page-hero h1 {
        font-size: 42px;
    }

    .services-page .service-content,
    .services-page-card-content {
        padding: 38px;
    }

    .services-page .service-content h2,
    .services-page-card h2 {
        font-size: 27px;
    }
}

@media (max-width: 800px) {
    .services-container,
    .services-page .container {
        width: calc(100% - 32px);
    }

    .services-hero,
    .services-page-hero {
        min-height: 430px;
    }

    .services-hero h1,
    .services-page-hero h1 {
        font-size: 36px;
        line-height: 1.05;
    }

    .services-hero p,
    .services-page-hero p {
        font-size: 16px;
    }

    .services-list,
    .services-page-list {
        padding: 45px 0 60px;
    }

    .services-page .service-card,
    .services-page-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 18px;
    }

    .services-page .service-image,
    .services-page-card-image,
    .services-page .service-image img,
    .services-page-card-image img {
        height: 280px;
        min-height: 280px;
    }

    .services-page .service-content,
    .services-page-card-content {
        padding: 32px 25px;
    }

    .services-page .image-right .service-image,
    .services-page .image-left .service-image,
    .services-page-card.services-page-image-right .services-page-card-image {
        order: 1;
    }

    .services-page .image-right .service-content,
    .services-page .image-left .service-content,
    .services-page-card.services-page-image-right .services-page-card-content {
        order: 2;
    }

    .services-page .service-points.two-columns,
    .services-page .testing-points,
    .services-page-feature-grid {
        grid-template-columns: 1fr;
    }

    .services-page-features {
        flex-direction: column;
    }

    .services-cta,
    .services-page .cta-section {
        padding: 40px 0;
    }

    .services-cta-box,
    .services-page .cta-box {
        min-height: 350px;
        padding: 45px 22px;
    }

    .services-cta-box h2,
    .services-page .cta-box h2 {
        font-size: 29px;
    }
}

@media (max-width: 480px) {
    .services-hero,
    .services-page-hero {
        min-height: 390px;
    }

    .services-hero h1,
    .services-page-hero h1 {
        font-size: 31px;
    }

    .services-page .service-image,
    .services-page-card-image,
    .services-page .service-image img,
    .services-page-card-image img {
        height: 230px;
        min-height: 230px;
    }

    .services-page .service-content,
    .services-page-card-content {
        padding: 28px 20px;
    }

    .services-page .service-content h2,
    .services-page-card h2 {
        font-size: 24px;
    }

    .services-page .service-highlight,
    .services-page .service-description,
    .services-page-highlight,
    .services-page-card-content > p {
        font-size: 14px;
    }

    .services-cta-box h2,
    .services-page .cta-box h2 {
        font-size: 25px;
    }
}







/* =====================================================
   GLOBAL
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #171717;
    background: #ffffff;
}

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

button,
input {
    font-family: inherit;
}


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

.header {
    width: 100%;
    height: 80px;
    background: #ffffff;
    position: relative;
    z-index: 100;
}

.header-container {
    width: calc(100% - 136px);
    max-width: 1220px;
    height: 100%;
    margin: auto;

    display: flex;
    align-items: center;
}

.logo {
    width: 290px;
    display: flex;
    align-items: center;
}

.logo img {
    width: 235px;
    max-height: 48px;
    object-fit: contain;
    object-position: left center;
}

.nav {
    flex: 1;

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

    gap: 30px;
}

.nav a {
    font-size: 14px;
    color: #4c4c4c;
    transition: .2s;
    white-space: nowrap;
}

.nav a:hover,
.nav a.active {
    color: #d59409;
}

.touch-btn {
    background: #d59409;
    color: #ffffff;

    padding: 11px 16px;
    border-radius: 7px;

    font-size: 14px;

    white-space: nowrap;
}

.menu-btn {
    display: none;
}


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

.projects-hero {
    height: 448px;

    position: relative;

    background:
        url("../assets/projects-hero.jpg")
        center center / cover no-repeat;

    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(15,15,15,.97) 0%,
            rgba(15,15,15,.91) 38%,
            rgba(15,15,15,.68) 70%,
            rgba(15,15,15,.72) 100%
        );
}

.hero-content {
    position: relative;
    z-index: 2;

    width: calc(100% - 136px);
    max-width: 1220px;

    height: 100%;
    margin: auto;

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

.breadcrumb {
    display: flex;
    gap: 13px;
    align-items: center;

    margin-bottom: 23px;

    color: #ffffff;
    font-size: 14px;
}

.breadcrumb span:last-child {
    color: #e0a111;
}

.projects-hero h1 {
    color: #ffffff;

    font-size: 48px;
    line-height: 1.03;

    letter-spacing: -1.4px;

    max-width: 800px;

    margin-bottom: 25px;
}

.projects-hero p {
    color: #e0e0e0;

    font-size: 18px;
    line-height: 1.65;

    max-width: 700px;
}


/* =====================================================
   PROJECT MAIN
===================================================== */

.projects-main {
    width: calc(100% - 136px);
    max-width: 1220px;

    margin: 40px auto 80px;
}


/* =====================================================
   FILTER BOX
===================================================== */

.filter-box {
    border: 1px solid #d7dde3;
    border-radius: 17px;

    padding: 24px;

    box-shadow: 0 8px 20px rgba(0,0,0,.04);

    margin-bottom: 42px;
}

.search-wrapper {
    height: 48px;

    border: 1px solid #d5dbe2;
    border-radius: 6px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    margin-bottom: 20px;
}

.search-icon {
    font-size: 23px;
    color: #596576;

    margin-right: 10px;
}

.search-wrapper input {
    border: none;
    outline: none;

    width: 100%;
    height: 100%;

    font-size: 14px;

    color: #4f5968;
    background: transparent;
}

.search-wrapper input::placeholder {
    color: #596576;
}

.filters {
    display: flex;
    align-items: center;

    gap: 24px;

    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}

.filter-label {
    color: #657080;

    font-size: 13px;

    margin-right: 5px;
}

.filter-btn,
.status-filter {
    border: 1px solid #d4dae1;
    background: #ffffff;

    color: #242424;

    border-radius: 6px;

    padding: 9px 13px;

    cursor: pointer;

    font-size: 14px;

    transition: .2s;
}

.filter-btn:hover,
.status-filter:hover {
    border-color: #d59409;
}

.filter-btn.active,
.status-filter.active {
    background: #d59409;
    border-color: #d59409;
    color: #ffffff;
}


/* =====================================================
   COUNT
===================================================== */

.project-count {
    color: #344b65;

    font-size: 14px;

    margin-bottom: 34px;
}


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

.projects-grid {
    display: grid;

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

    gap: 24px;
}


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

.project-card {
    min-height: 350px;

    border: 1px solid #d7dde3;

    border-radius: 16px;

    padding: 25px 24px;

    background: #ffffff;

    display: flex;
    flex-direction: column;

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

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

    border-color: #c8cfd7;

    box-shadow: 0 10px 25px rgba(0,0,0,.06);
}


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

.card-top {
    display: flex;

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

    gap: 12px;

    margin-bottom: 18px;
}

.client {
    color: #626c7c;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .5px;
}

.status {
    display: inline-flex;

    align-items: center;

    border-radius: 50px;

    padding: 5px 13px;

    font-size: 12px;

    white-space: nowrap;
}

.status.completed {
    color: #009c77;
    background: #e4f7f1;
}

.status.ongoing {
    color: #d79708;
    background: #fcf5e6;
}


/* =====================================================
   CARD TITLE
===================================================== */

.project-card h2 {
    color: #191919;

    font-size: 18px;
    line-height: 1.35;

    font-weight: 700;

    margin-bottom: 14px;
}


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

.description {
    color: #5d6878;

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 20px;
}


/* =====================================================
   CARD BOTTOM
===================================================== */

.card-bottom {
    border-top: 1px solid #d8dde3;

    padding-top: 14px;

    margin-top: auto;
}

.card-bottom p {
    color: #e09a05;

    display: flex;

    align-items: flex-start;

    gap: 8px;

    font-size: 16px;

    margin: 8px 0;
}

.card-bottom p span {
    color: #5c6777;

    font-size: 14px;

    line-height: 1.4;
}


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

.cta-section {
    background: #181818;

    padding: 60px 68px;
}

.cta-box {
    max-width: 1220px;

    min-height: 405px;

    margin: auto;

    border-radius: 25px;

    border: 1px solid rgba(211,150,11,.3);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(213,148,9,.23),
            transparent 38%
        ),
        #242424;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    padding: 50px;
}

.cta-small {
    color: #e0a00e;

    font-size: 14px;

    letter-spacing: 3px;

    font-weight: 700;

    margin-bottom: 20px;
}

.cta-box h2 {
    color: #ffffff;

    font-size: 36px;
    line-height: 1.08;

    margin-bottom: 25px;
}

.cta-box p {
    color: #bfbfbf;

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

    margin-bottom: 40px;
}

.cta-btn {
    min-width: 166px;

    padding: 14px 25px;

    background: #d59308;

    color: #ffffff;

    border-radius: 7px;

    display: flex;

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

    gap: 25px;

    font-size: 14px;

    box-shadow: 0 8px 18px rgba(213,147,8,.15);
}


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

.footer {
    padding: 64px 0 0;

    background: #191919;
    color: #ffffff;
}

.footer-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    gap: 60px;

    padding-bottom: 55px;
    border-bottom: none;
}

.footer h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.footer a {
    display: block;

    margin-bottom: 12px;

    color: #d6d6d6;

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

    text-decoration: none;
}

.footer a:hover {
    color: #d89a0d;
}


/* =====================================================
   FOOTER LOGO + ABOUT
===================================================== */

.footer-about {
    min-width: 0;
}

.footer-about img {
    width: 260px;
    max-width: 100%;
    height: 55px;

    display: block;

    margin: 0 0 25px;

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

    filter: brightness(0) invert(1);
}

.footer-about p {
    max-width: 290px;

    margin: 0 0 24px;

    color: #ffffff;

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

.footer-about strong {
    display: block;

    margin: 0;

    color: #e0a00b;

    font-size: 16px;
}


/* =====================================================
   OFFICE
===================================================== */

.office p {
    margin: 0 0 12px;

    color: #ffffff;

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


/* =====================================================
   AFFILIATES
===================================================== */

.affiliates {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 40px 0 55px;

    border-top: 1px solid #363636;
}

.affiliates h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.affiliates div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    column-gap: 27px;
    row-gap: 12px;
}

.affiliates span,
.affiliates a {
    display: inline-block;

    margin: 0;

    color: #d6d6d6;

    font-size: 14px;
    line-height: 1.5;
}


/* =====================================================
   COPYRIGHT
===================================================== */

.copyright {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 35px 0 38px;

    border-top: 1px solid #363636;

    color: #d1d1d1;

    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}


/* =====================================================
   BACK TO TOP
===================================================== */

.back-top {
    position: fixed;

    right: 25px;
    bottom: 24px;

    width: 49px;
    height: 49px;

    border-radius: 50%;

    background: #d49308;

    color: #ffffff;

    display: flex;

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

    font-size: 25px;

    z-index: 200;

    box-shadow: 0 8px 22px rgba(0,0,0,.15);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .header-container,
    .hero-content,
    .projects-main {
        width: calc(100% - 60px);
    }

    .logo {
        width: auto;
        margin-right: auto;
    }

    .nav {
        display: flex;
        gap: 17px;
    }

    .nav a {
        font-size: 13px;
    }

    .touch-btn {
        margin-left: 24px;
        margin-right: 0;
    }

    .menu-btn {
        display: none;
    }

    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 45px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .header {
        height: 72px;
        min-height: 72px;
    }

    .header-container,
    .hero-content,
    .projects-main {
        width: calc(100% - 32px);
    }

    .logo img {
        width: 180px;
        max-width: 180px;
    }

    .touch-btn {
        display: none;
    }

    .projects-hero {
        height: 355px;
        min-height: 355px;
    }

    .projects-hero h1 {
        font-size: 33px;
        line-height: 1.08;
    }

    .projects-hero p {
        font-size: 15px;
        line-height: 1.55;
    }

    .projects-hero h1 br,
    .projects-hero p br {
        display: none;
    }

    .projects-main {
        margin-top: 24px;
        margin-bottom: 60px;
    }

    .filter-box {
        padding: 15px;
        border-radius: 14px;
    }

    .search-wrapper {
        min-width: 0;
        padding: 0 12px;
    }

    .search-wrapper input {
        min-width: 0;
        font-size: 13px;
    }

    .filters {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .filter-group {
        width: 100%;
        gap: 8px;
    }

    .filter-label {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2px;
    }

    .filter-btn,
    .status-filter {
        padding: 8px 11px;
        font-size: 13px;
    }

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

    .project-card {
        min-height: 0;
        padding: 20px;
    }

    .cta-section {
        padding: 40px 16px;
    }

    .cta-box {
        min-height: 0;
        padding: 34px 18px;
    }

    .cta-box h2 {
        font-size: 27px;
    }

    .cta-box h2 br,
    .cta-box p br {
        display: none;
    }

    .footer {
        padding: 50px 0 0;
    }

    .footer-grid,
    .affiliates,
    .copyright {
        width: calc(100% - 32px);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .footer-about img {
        width: 225px;
        height: auto;
        filter: brightness(0) invert(1);
    }

    .affiliates {
        padding: 35px 0 45px;
    }
}








/* ==========================================================
   PA COST INTERNATIONAL
   CLIENTS PAGE ONLY
========================================================== */


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

.clients-page {
    margin: 0;
    padding: 0;

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

    color: #1d1d1d;
    background: #ffffff;
}

.clients-page * {
    box-sizing: border-box;
}

.clients-page a {
    text-decoration: none;
}

.clients-page img {
    display: block;
}


/* ==========================================================
   GLOBAL WRAPPER
========================================================== */

.clients-wrapper {
    width: calc(100% - 136px);
    max-width: 1216px;

    margin-left: auto;
    margin-right: auto;
}


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

.clients-header {
    width: 100%;
    height: 80px;

    background: #ffffff;

    position: relative;
    z-index: 1000;
}

.clients-header-inner {
    width: calc(100% - 136px);
    max-width: 1216px;

    height: 80px;

    margin: 0 auto;

    display: flex;
    align-items: center;
}


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

.clients-main-logo {
    width: 235px;

    flex: 0 0 235px;

    display: flex;
    align-items: center;
}

.clients-main-logo img {
    width: 235px !important;
    height: 50px !important;

    max-width: 235px !important;
    max-height: 50px !important;

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

    filter: none !important;
    opacity: 1 !important;
}


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

.clients-nav {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 29px;
}

.clients-nav a {
    color: #444444;

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

    white-space: nowrap;

    transition: color 0.2s ease;
}

.clients-nav a:hover,
.clients-nav a.active {
    color: #d99600;
}


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

.clients-header-button {
    margin-left: 46px;

    min-width: 104px;
    height: 40px;

    padding: 0 16px;

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

    background: #d99600;

    color: #ffffff !important;

    border-radius: 7px;

    font-size: 14px;

    white-space: nowrap;

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

.clients-header-button:hover {
    background: #bd8200;

    transform: translateY(-1px);
}


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

.clients-hero {
    width: 100%;
    height: 400px;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image: url("../assets/clients-hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.clients-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(13, 13, 13, 0.98) 0%,
            rgba(15, 15, 15, 0.94) 35%,
            rgba(20, 20, 20, 0.74) 65%,
            rgba(25, 25, 25, 0.50) 100%
        );
}

.clients-hero-inner {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   BREADCRUMB
========================================================== */

.clients-breadcrumb {
    margin-bottom: 22px;

    display: flex;
    align-items: center;

    gap: 14px;

    font-size: 14px;
}

.clients-breadcrumb a {
    color: #ffffff;
}

.clients-breadcrumb span:nth-child(2) {
    color: #9d9d9d;

    font-size: 20px;
}

.clients-breadcrumb span:last-child {
    color: #dfa000;
}


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

.clients-hero h1 {
    margin: 0 0 22px;

    color: #ffffff;

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

    line-height: 1.05;

    letter-spacing: -1px;
}

.clients-hero p {
    width: 630px;
    max-width: 100%;

    margin: 0;

    color: #eeeeee;

    font-size: 18px;

    line-height: 1.65;
}


/* ==========================================================
   CLIENT LOGOS AREA
========================================================== */

.clients-logos-section {
    padding: 54px 0 72px;

    background: #ffffff;
}


/* ==========================================================
   LOGO GRID
========================================================== */

.clients-logo-grid {
    width: 100%;

    display: grid;

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

    gap: 16px;
}


/* ==========================================================
   LOGO CARD
========================================================== */

.clients-logo-card {
    width: 100%;
    height: 112px;

    padding: 18px 20px;

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

    background: #ffffff;

    border: 1px solid #d9dee4;

    border-radius: 15px;

    overflow: hidden;

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


/* ==========================================================
   CLIENT LOGO
========================================================== */

.clients-logo-card img {
    width: auto !important;
    height: auto !important;

    max-width: 78% !important;
    max-height: 62px !important;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: 0.58;

    transition:
        filter 0.30s ease,
        opacity 0.30s ease,
        transform 0.30s ease;
}


/* ==========================================================
   CLIENT HOVER
========================================================== */

.clients-logo-card:hover {
    border-color: #d99a00;

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08),
        0 0 15px rgba(217, 154, 0, 0.08);
}

.clients-logo-card:hover img {
    filter: grayscale(0%);

    opacity: 1;

    transform: scale(1.07);
}


/* ==========================================================
   CERTIFICATIONS / RECOGNITION
========================================================== */

.clients-recognition {
    width: 100%;

    padding: 95px 0 105px;

    background: #eef0f2;
}

.clients-recognition-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 48px;
}

.clients-recognition-column {
    min-width: 0;
}


/* ==========================================================
   GOLD SMALL TITLE
========================================================== */

.clients-section-label {
    margin-bottom: 18px;

    color: #e0a000;

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

    letter-spacing: 4px;

    text-transform: uppercase;
}


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

.clients-recognition-column h2 {
    margin: 0 0 34px;

    color: #1c1c1c;

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

    line-height: 1.2;
}


/* ==========================================================
   INFO LIST
========================================================== */

.clients-info-list {
    display: flex;
    flex-direction: column;

    gap: 17px;
}


/* ==========================================================
   WHITE INFO CARD
========================================================== */

.clients-info-card {
    width: 100%;

    min-height: 57px;

    padding: 14px 20px;

    display: flex;
    align-items: center;

    gap: 15px;

    background: #ffffff;

    border-radius: 11px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.clients-info-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.05);
}

.clients-info-card p {
    margin: 0;

    color: #525a66;

    font-size: 14px;

    line-height: 1.45;
}


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

.clients-info-icon {
    width: 20px;

    flex: 0 0 20px;

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

    color: #dfa000;

    font-size: 18px;
}


/* ==========================================================
   WORK TOGETHER
========================================================== */

.clients-work {
    width: 100%;

    padding: 72px 0 58px;

    background: #191919;
}

.clients-work-box {
    width: 100%;

    min-height: 405px;

    padding: 55px 30px;

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

    text-align: center;

    border: 1px solid rgba(220, 155, 0, 0.30);

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(200, 145, 25, 0.24),
            transparent 36%
        ),
        #232323;
}

.clients-work-box .clients-section-label {
    margin-bottom: 20px;
}

.clients-work-box h2 {
    margin: 0 0 25px;

    color: #ffffff;

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

    line-height: 1.12;
}

.clients-work-box p {
    margin: 0 0 39px;

    color: #bcbcbc;

    font-size: 16px;

    line-height: 1.6;
}


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

.clients-contact-button {
    min-width: 166px;
    height: 46px;

    padding: 0 22px;

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

    gap: 24px;

    background: #d99600;

    color: #ffffff !important;

    border-radius: 7px;

    font-size: 14px;

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

.clients-contact-button:hover {
    background: #bd8200;

    transform: translateY(-2px);
}


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

.clients-footer {
    width: 100%;

    background: #191919;
    color: #ffffff;
}

.clients-footer-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 64px 0 55px;

    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    gap: 60px;
}


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

.clients-footer-logo {
    width: 260px !important;
    max-width: 260px !important;
    height: 55px !important;
    max-height: 55px !important;

    margin: 0 0 25px;

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

    filter:
        grayscale(100%)
        brightness(0)
        invert(100%) !important;

    opacity: 1 !important;
}


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

.clients-footer-company p {
    max-width: 290px;

    margin: 0 0 24px;

    color: #ffffff;

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

.clients-footer-company strong {
    display: block;

    margin: 0;

    color: #e0a00b;

    font-size: 16px;
}


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

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

.clients-footer-column h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.clients-footer-column a {
    margin-bottom: 12px;

    color: #d6d6d6;

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

    transition: color 0.2s ease;
}

.clients-footer-column a:hover {
    color: #dfa000;
}


/* ==========================================================
   OFFICE
========================================================== */

.clients-office p {
    margin: 0 0 16px;

    color: #ffffff;

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

.clients-office a,
.clients-website {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: #d6d6d6;

    font-size: 14px;
    line-height: 1.5;
}

.clients-office i {
    width: 16px;
    color: #d6d6d6;
}

.clients-website {
    margin-top: 0;
}


/* ==========================================================
   AFFILIATES
========================================================== */

.clients-affiliates {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 40px 0 55px;

    border-top: 1px solid #363636;
}

.clients-affiliates h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.clients-affiliate-links {
    display: flex;
    flex-wrap: wrap;

    column-gap: 27px;
    row-gap: 12px;
}

.clients-affiliate-links span {
    color: #d6d6d6;

    font-size: 14px;
    line-height: 1.5;
}


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

.clients-footer-bottom {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    min-height: 0;

    padding: 35px 0 38px;

    border-top: 1px solid #363636;

    display: block;
}

.clients-footer-bottom p {
    margin: 0;

    color: #d1d1d1;

    font-size: 14px;
    line-height: 1.5;
}


/* ==========================================================
   LINKEDIN
========================================================== */

.clients-linkedin {
    width: 40px;
    height: 40px;

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

    background: #303030;

    border-radius: 50%;

    color: #bdbdbd;
}


/* ==========================================================
   BACK TO TOP
========================================================== */

.clients-top-button {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 999;

    width: 49px;
    height: 49px;

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

    background: #d99600;

    color: #ffffff;

    border-radius: 50%;

    font-size: 18px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.16);

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

.clients-top-button:hover {
    background: #bd8200;

    transform: translateY(-3px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .clients-wrapper,
    .clients-header-inner {
        width: calc(100% - 60px);
    }

    .clients-main-logo {
        width: 200px;

        flex-basis: 200px;
    }

    .clients-main-logo img {
        width: 200px !important;
        max-width: 200px !important;
    }

    .clients-nav {
        gap: 17px;
    }

    .clients-nav a {
        font-size: 13px;
    }

    .clients-header-button {
        margin-left: 25px;
    }

    .clients-logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .clients-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================
   SMALL TABLET
========================================================== */

@media (max-width: 850px) {

    .clients-header {
        height: auto;
    }

    .clients-header-inner {
        min-height: 80px;

        padding: 14px 0;

        flex-wrap: wrap;

        gap: 15px;
    }

    .clients-nav {
        width: 100%;

        order: 3;

        justify-content: center;

        flex-wrap: wrap;
    }

    .clients-header-button {
        margin-left: auto;
    }

    .clients-logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .clients-recognition-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    .clients-wrapper,
    .clients-header-inner {
        width: calc(100% - 32px);
    }

    .clients-main-logo {
        width: 185px;

        flex-basis: 185px;
    }

    .clients-main-logo img {
        width: 185px !important;
        max-width: 185px !important;
    }

    .clients-header-button {
        display: none;
    }

    .clients-hero {
        height: 355px;
    }

    .clients-hero h1 {
        font-size: 38px;
    }

    .clients-hero p {
        font-size: 16px;
    }

    .clients-logo-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 12px;
    }

    .clients-logo-card {
        height: 105px;
    }

    .clients-recognition {
        padding: 65px 0;
    }

    .clients-recognition-column h2 {
        font-size: 26px;
    }

    .clients-work {
        padding: 40px 0;
    }

    .clients-work-box {
        min-height: 365px;

        padding: 40px 20px;
    }

    .clients-work-box h2 {
        font-size: 29px;
    }

    .clients-work-box h2 br,
    .clients-work-box p br {
        display: none;
    }

    .clients-footer-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }
}







/* =========================================================
   HSE PAGE
========================================================= */

.hse-page {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #191919;
}

.hse-page *,
.hse-page *::before,
.hse-page *::after {
    box-sizing: border-box;
}

.hse-page a {
    text-decoration: none;
}

.hse-page .main-container {
    width: calc(100% - 136px);
    max-width: 1250px;
    margin: 0 auto;
}


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

.hse-page .site-header {
    width: 100%;
    height: 80px;
    background: #ffffff;
    position: relative;
    z-index: 1000;
}

.hse-page .header-inner {
    height: 80px;
    display: flex;
    align-items: center;
}

.hse-page .header-logo {
    width: 235px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.hse-page .header-logo img {
    display: block;
    width: 235px;
    max-width: 100%;
    height: auto;
}

.hse-page .main-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;

    margin-left: auto;
    margin-right: 65px;
}

.hse-page .main-nav a {
    color: #484848;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.hse-page .main-nav a:hover,
.hse-page .main-nav a.active {
    color: #d99500;
}

.hse-page .gold-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #d99500;
    color: #ffffff;

    min-width: 103px;
    height: 38px;

    padding: 0 16px;

    border-radius: 8px;

    font-size: 14px;
    white-space: nowrap;

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

.hse-page .gold-button:hover {
    background: #bd8200;
    transform: translateY(-1px);
}


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

.hse-page .hse-hero {
    min-height: 448px;

    position: relative;

    display: flex;
    align-items: center;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(15,15,15,0.97) 0%,
            rgba(15,15,15,0.91) 35%,
            rgba(15,15,15,0.75) 58%,
            rgba(15,15,15,0.55) 100%
        ),
        url("../assets/service-testing-2.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hse-page .hse-hero-content {
    position: relative;
    z-index: 2;
}

.hse-page .breadcrumb {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    font-size: 14px;
}

.hse-page .breadcrumb a {
    color: #dddddd;
}

.hse-page .breadcrumb a:hover {
    color: #ffffff;
}

.hse-page .breadcrumb span:nth-child(2) {
    color: #aaaaaa;
}

.hse-page .breadcrumb span:last-child {
    color: #e0a000;
}

.hse-page .hse-hero h1 {
    margin: 0 0 25px;

    max-width: 760px;

    color: #ffffff;

    font-size: 48px;
    font-weight: 700;
    line-height: 1.05;
}

.hse-page .hse-hero p {
    margin: 0;

    max-width: 730px;

    color: #dddddd;

    font-size: 18px;
    line-height: 1.65;
}


/* =========================================================
   LABEL
========================================================= */

.hse-page .hse-label {
    display: block;

    margin-bottom: 14px;

    color: #d99500;

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

    letter-spacing: 4px;
}


/* =========================================================
   CERTIFICATES
========================================================= */

.hse-page .hse-certificates {
    background: #ffffff;
    padding: 30px 0 120px;
}

.hse-page .hse-certificates h2 {
    margin: 0 0 20px;

    color: #1b1b1b;

    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
}

.hse-page .hse-description {
    max-width: 800px;

    margin: 0 0 50px;

    color: #656d7a;

    font-size: 16px;
    line-height: 1.7;
}

.hse-page .hse-certificate-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hse-page .hse-certificate-card {
    min-height: 182px;

    padding: 31px;

    background: #ffffff;

    border: 1px solid #d8dde4;
    border-radius: 17px;

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

.hse-page .hse-certificate-card:hover {
    transform: translateY(-5px);

    border-color: #d99500;

    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.hse-page .hse-icon-box {
    width: 49px;
    height: 49px;

    margin-bottom: 23px;

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

    background: #d29100;
    color: #ffffff;

    border-radius: 11px;

    font-size: 20px;
}

.hse-page .hse-certificate-card h3 {
    margin: 0;

    color: #1b1b1b;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}


/* =========================================================
   SAFETY
========================================================= */

.hse-page .hse-safety {
    background: #f0f1f3;
    padding: 95px 0 55px;
}

.hse-page .hse-safety-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: start;

    gap: 60px;
}

.hse-page .hse-safety-text h2 {
    margin: 0 0 18px;

    color: #1b1b1b;

    font-size: 32px;
    line-height: 1.2;
}

.hse-page .hse-safety-text p {
    max-width: 590px;

    margin: 0;

    color: #646c79;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   HSE POLICY PDF CARD
========================================================= */

.hse-page .hse-policy-card {
    min-height: 153px;

    padding: 32px;

    display: block;

    background: #ffffff;

    border: 1px solid #d8dde4;
    border-radius: 17px;

    color: #191919;

    cursor: pointer;

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

.hse-page .hse-policy-card:hover {
    transform: translateY(-4px);

    border-color: #d99500;

    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
}

.hse-page .hse-policy-title {
    display: flex;
    align-items: center;

    gap: 13px;

    font-size: 16px;
}

.hse-page .hse-policy-title i:first-child {
    color: #d99500;
    font-size: 19px;
}

.hse-page .hse-policy-title strong {
    color: #191919;
}

.hse-page .hse-policy-title i:last-child {
    color: #7b8189;
    font-size: 13px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.hse-page .hse-policy-card:hover .hse-policy-title i:last-child {
    color: #d99500;
    transform: translate(2px, -2px);
}


/* =========================================================
   ISO PILLS
========================================================= */

.hse-page .hse-iso-list {
    max-width: 820px;

    margin: 125px auto 0;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 17px;
}

.hse-page .hse-iso-pill {
    min-height: 45px;

    padding: 10px 21px;

    display: flex;
    align-items: center;

    gap: 13px;

    background: #ffffff;

    border: 1px solid #d8dde4;
    border-radius: 50px;

    color: #252525;

    font-size: 14px;
}

.hse-page .hse-iso-pill i {
    color: #d99500;
}


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

.hse-page .hse-cta-section {
    padding: 72px 0 58px;
    background: #181919;
}

.hse-page .hse-cta {
    min-height: 405px;

    padding: 60px 30px;

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

    text-align: center;

    border: 1px solid rgba(217,149,0,0.35);
    border-radius: 25px;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(217,149,0,0.22),
            transparent 32%
        ),
        #222323;
}

.hse-page .hse-cta > span {
    margin-bottom: 16px;

    color: #e1a100;

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

    letter-spacing: 4px;
}

.hse-page .hse-cta h2 {
    margin: 0 0 24px;

    color: #ffffff;

    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
}

.hse-page .hse-cta p {
    margin: 0 0 38px;

    color: #c4c4c4;

    font-size: 16px;
    line-height: 1.6;
}

.hse-page .hse-cta-button {
    min-width: 166px;
    min-height: 45px;

    padding: 10px 24px;

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

    gap: 25px;

    background: #d99500;
    color: #ffffff;

    border-radius: 7px;

    font-size: 14px;

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

.hse-page .hse-cta-button:hover {
    background: #bc8100;
    transform: translateY(-2px);
}


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

.hse-page .site-footer {
    padding-top: 64px;

    background: #191919;
    color: #ffffff;
}

.hse-page .footer-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    gap: 60px;

    padding-bottom: 55px;
}

.hse-page .footer-logo {
    display: block;

    width: 260px;
    max-width: 260px;
    height: 55px;
    max-height: 55px;

    margin: 0 0 25px;

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

    filter: grayscale(1) brightness(0) invert(1);
}

.hse-page .footer-company p {
    max-width: 290px;

    margin: 0 0 24px;

    color: #ffffff;

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

.hse-page .footer-gold {
    display: block;

    color: #e0a000;

    font-size: 16px;
}

.hse-page .footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hse-page .footer-column h3,
.hse-page .footer-office h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.hse-page .footer-column a {
    margin-bottom: 12px;

    color: #d6d6d6;

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

    transition: color 0.2s ease;
}

.hse-page .footer-column a:hover {
    color: #d99500;
}

.hse-page .footer-office p {
    margin: 0 0 16px;

    color: #ffffff;

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

.hse-page .footer-office a {
    margin-bottom: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #d6d6d6;

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

    transition: color 0.2s ease;
}

.hse-page .footer-office a:hover {
    color: #d99500;
}

.hse-page .footer-office i {
    width: 14px;
}


/* =========================================================
   AFFILIATES
========================================================= */

.hse-page .footer-affiliates {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 40px 0 55px;

    border-top: 1px solid #363636;
}

.hse-page .footer-affiliates h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.hse-page .affiliate-list {
    display: flex;
    flex-wrap: wrap;

    column-gap: 27px;
    row-gap: 12px;
}

.hse-page .affiliate-list span {
    color: #d6d6d6;

    font-size: 14px;
    line-height: 1.5;
}


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

.hse-page .footer-bottom {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 35px 0 38px;

    border-top: 1px solid #363636;

    color: #d1d1d1;

    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.hse-page .back-to-top {
    position: fixed;

    right: 26px;
    bottom: 24px;

    width: 49px;
    height: 49px;

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

    background: #d99500;
    color: #ffffff;

    border-radius: 50%;

    font-size: 27px;

    z-index: 9999;

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

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

.hse-page .back-to-top:hover {
    transform: translateY(-4px);
    background: #bd8200;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hse-page .main-container {
        width: calc(100% - 70px);
    }

    .hse-page .header-logo,
    .hse-page .header-logo img {
        width: 200px;
    }

    .hse-page .main-nav {
        gap: 17px;
        margin-right: 25px;
    }

    .hse-page .hse-certificate-grid {
        grid-template-columns: 1fr;
    }

    .hse-page .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .hse-page .main-container {
        width: calc(100% - 40px);
    }

    .hse-page .site-header,
    .hse-page .header-inner {
        height: auto;
        min-height: 75px;
    }

    .hse-page .header-inner {
        flex-wrap: wrap;
        padding: 12px 0;
    }

    .hse-page .header-logo,
    .hse-page .header-logo img {
        width: 185px;
    }

    .hse-page .main-nav {
        order: 3;

        width: 100%;

        margin: 12px 0 0;
        padding: 10px 0;

        gap: 20px;

        overflow-x: auto;
    }

    .hse-page .hse-hero {
        min-height: 430px;
    }

    .hse-page .hse-hero h1 {
        font-size: 37px;
    }

    .hse-page .hse-hero p {
        font-size: 16px;
    }

    .hse-page .hse-certificates {
        padding: 70px 0;
    }

    .hse-page .hse-certificates h2 {
        font-size: 30px;
    }

    .hse-page .hse-safety-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .hse-page .hse-iso-list {
        margin-top: 70px;
    }

    .hse-page .hse-iso-pill {
        width: 100%;
    }

    .hse-page .hse-cta h2 {
        font-size: 29px;
    }

    .hse-page .hse-cta h2 br,
    .hse-page .hse-cta p br {
        display: none;
    }

    .hse-page .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

    .hse-page .gold-button {
        display: none;
    }

    .hse-page .hse-hero h1 {
        font-size: 32px;
    }

    .hse-page .hse-certificate-card {
        padding: 24px;
    }

    .hse-page .hse-cta {
        padding: 45px 20px;
    }

    .hse-page .hse-cta h2 {
        font-size: 25px;
    }
}







/* =========================================================
   ORA HOLDING PAGE
========================================================= */

.ora-holding-page {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #181818;
    background: #ffffff;
}

.ora-holding-page *,
.ora-holding-page *::before,
.ora-holding-page *::after {
    box-sizing: border-box;
}


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

.ora-holding-page .ora-header {
    width: 100%;
    height: 80px;
    background: #ffffff;
    position: relative;
    z-index: 1000;
}

.ora-holding-page .ora-header-container {
    width: calc(100% - 136px);
    max-width: 1220px;
    height: 80px;
    margin: 0 auto;

    display: flex;
    align-items: center;
}

.ora-holding-page .ora-main-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.ora-holding-page .ora-main-logo img {
    display: block;
    width: 290px;
    height: auto;
    object-fit: contain;
}

.ora-holding-page .ora-nav {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 29px;
}

.ora-holding-page .ora-nav a {
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;

    transition: color 0.25s ease;
}

.ora-holding-page .ora-nav a:hover,
.ora-holding-page .ora-nav a.active {
    color: #d99500;
}

.ora-holding-page .ora-contact-btn {
    margin-left: 42px;

    padding: 11px 16px;

    background: #d89508;
    color: #ffffff;

    border-radius: 7px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;

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

.ora-holding-page .ora-contact-btn:hover {
    background: #b97e00;
    transform: translateY(-2px);
}


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

.ora-holding-page .ora-hero {
    width: 100%;
    height: 428px;

    position: relative;

    background-image: url("../assets/hero-substation.jpg");
    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.ora-holding-page .ora-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(13, 14, 14, 0.97) 0%,
            rgba(14, 15, 15, 0.91) 32%,
            rgba(16, 16, 16, 0.72) 67%,
            rgba(17, 15, 13, 0.58) 100%
        );
}

.ora-holding-page .ora-hero-content {
    position: relative;
    z-index: 2;

    width: calc(100% - 136px);
    max-width: 1220px;
    height: 100%;

    margin: 0 auto;

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

.ora-holding-page .ora-breadcrumb {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 22px;

    font-size: 14px;
}

.ora-holding-page .ora-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.ora-holding-page .ora-breadcrumb a:hover {
    color: #d99a00;
}

.ora-holding-page .ora-breadcrumb span:first-of-type {
    color: #aaaaaa;
    font-size: 22px;
}

.ora-holding-page .ora-breadcrumb span:last-child {
    color: #e4a100;
}

.ora-holding-page .ora-hero h1 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: 52px;
    line-height: 1.08;
    font-weight: 700;
}

.ora-holding-page .ora-hero p {
    width: 680px;
    max-width: 100%;

    margin: 0;

    color: #dedede;

    font-size: 18px;
    line-height: 1.65;
}


/* =========================================================
   COMPANIES
========================================================= */

.ora-holding-page .ora-companies {
    background: #ffffff;
    padding: 22px 0 128px;
}

.ora-holding-page .ora-companies-container {
    width: calc(100% - 136px);
    max-width: 1220px;
    margin: 0 auto;
}

.ora-holding-page .ora-companies-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

    align-items: stretch;
}

.ora-holding-page .ora-company-card {
    height: 188px;

    border: 1px solid #d7dce2;
    border-radius: 16px;

    background: #ffffff;

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

    padding: 25px;

    cursor: default;

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

.ora-holding-page .ora-company-card:hover {
    transform: translateY(-6px);

    border-color: #d79500;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(215, 149, 0, 0.08);
}

.ora-holding-page .ora-company-logo {
    width: 100%;
    height: 100px;

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

    margin-bottom: 8px;
}

.ora-holding-page .ora-company-logo img {
    display: block;

    max-width: 170px;
    max-height: 90px;

    width: auto;
    height: auto;

    object-fit: contain;

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

.ora-holding-page .ora-company-card:hover .ora-company-logo img {
    transform: scale(1.07);

    filter:
        brightness(1.08)
        contrast(1.06)
        drop-shadow(0 5px 10px rgba(0, 0, 0, 0.10));
}

.ora-holding-page .ora-company-card h3 {
    margin: 4px 0 0;

    color: #171717;

    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;

    text-align: center;
}


/* PA COST logo is wider */

.ora-holding-page .ora-company-card:nth-child(5) .ora-company-logo img {
    max-width: 190px;
}


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

.ora-holding-page .ora-footer {
    width: 100%;

    background: #191919;
    color: #ffffff;
}

.ora-holding-page .ora-footer-container {
    width: calc(100% - 136px);
    max-width: 1220px;

    margin: 0 auto;
}

.ora-holding-page .ora-footer-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    gap: 60px;

    padding: 64px 0 55px;
}


/* FOOTER COMPANY */

.ora-holding-page .ora-footer-company {
    min-width: 0;
}

.ora-holding-page .ora-footer-logo {
    display: block;

    width: 260px;
    max-width: 260px;
    height: 55px;
    max-height: 55px;

    margin: 0 0 25px;

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

    filter:
        grayscale(1)
        brightness(0)
        invert(1);
}

.ora-holding-page .ora-footer-company p {
    max-width: 290px;

    margin: 0 0 24px;

    color: #ffffff;

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

.ora-holding-page .ora-footer-company h3 {
    margin: 0;

    color: #e0a00b;

    font-size: 16px;
    font-weight: 700;
}


/* FOOTER COLUMNS */

.ora-holding-page .ora-footer-column h3,
.ora-holding-page .ora-footer-office h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.ora-holding-page .ora-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ora-holding-page .ora-footer-column a {
    display: block;

    margin-bottom: 12px;

    color: #d6d6d6;

    text-decoration: none;

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

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.ora-holding-page .ora-footer-column a:hover {
    color: #e0a000;
}


/* OFFICE */

.ora-holding-page .ora-footer-office p {
    margin: 0 0 16px;

    color: #ffffff;

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

.ora-holding-page .ora-office-line {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0 0 12px;

    color: #d6d6d6;

    font-size: 14px;
    line-height: 1.5;
}

.ora-holding-page .ora-office-line i {
    width: 15px;
    color: #d6d6d6;
}


/* =========================================================
   AFFILIATES
========================================================= */

.ora-holding-page .ora-affiliates {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 40px 0 55px;

    border-top: 1px solid #363636;
}

.ora-holding-page .ora-affiliates h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.ora-holding-page .ora-affiliate-links {
    display: flex;
    flex-wrap: wrap;

    column-gap: 27px;
    row-gap: 12px;
}

.ora-holding-page .ora-affiliate-links span {
    color: #d6d6d6;

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

    transition: color 0.2s ease;
}

.ora-holding-page .ora-affiliate-links span:hover {
    color: #e0a000;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.ora-holding-page .ora-copyright {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 35px 0 38px;

    border-top: 1px solid #363636;

    color: #d1d1d1;

    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.ora-holding-page .ora-back-top {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 49px;
    height: 49px;

    border-radius: 50%;

    background: #d89500;
    color: #ffffff;

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

    text-decoration: none;

    font-size: 17px;

    z-index: 999;

    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);

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

.ora-holding-page .ora-back-top:hover {
    background: #b97e00;
    transform: translateY(-4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .ora-holding-page .ora-header-container,
    .ora-holding-page .ora-hero-content,
    .ora-holding-page .ora-companies-container,
    .ora-holding-page .ora-footer-container {
        width: calc(100% - 60px);
    }

    .ora-holding-page .ora-main-logo img {
        width: 230px;
    }

    .ora-holding-page .ora-nav {
        gap: 17px;
    }

    .ora-holding-page .ora-contact-btn {
        margin-left: 20px;
    }

    .ora-holding-page .ora-companies-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ora-holding-page .ora-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 50px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .ora-holding-page .ora-header {
        height: auto;
    }

    .ora-holding-page .ora-header-container {
        width: calc(100% - 30px);
        height: auto;

        padding: 18px 0;

        flex-wrap: wrap;
        justify-content: space-between;
    }

    .ora-holding-page .ora-main-logo img {
        width: 210px;
    }

    .ora-holding-page .ora-nav {
        order: 3;

        width: 100%;

        margin: 18px 0 0;

        overflow-x: auto;

        gap: 22px;

        padding-bottom: 5px;
    }

    .ora-holding-page .ora-contact-btn {
        margin-left: 10px;
    }

    .ora-holding-page .ora-hero {
        height: 390px;
    }

    .ora-holding-page .ora-hero-content {
        width: calc(100% - 40px);
    }

    .ora-holding-page .ora-hero h1 {
        font-size: 42px;
    }

    .ora-holding-page .ora-hero p {
        font-size: 16px;
    }

    .ora-holding-page .ora-companies {
        padding: 30px 0 80px;
    }

    .ora-holding-page .ora-companies-container {
        width: calc(100% - 40px);
    }

    .ora-holding-page .ora-companies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ora-holding-page .ora-company-card {
        height: 170px;
    }

    .ora-holding-page .ora-company-logo img {
        max-width: 135px;
        max-height: 80px;
    }

    .ora-holding-page .ora-footer-container {
        width: calc(100% - 40px);
    }

    .ora-holding-page .ora-footer-grid {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ora-holding-page .ora-main-logo img {
        width: 175px;
    }

    .ora-holding-page .ora-contact-btn {
        padding: 9px 11px;
        font-size: 12px;
    }

    .ora-holding-page .ora-hero h1 {
        font-size: 36px;
    }

    .ora-holding-page .ora-companies-grid {
        grid-template-columns: 1fr;
    }

    .ora-holding-page .ora-company-card {
        height: 175px;
    }
}






/* =========================================================
   PA COST INTERNATIONAL - CONTACT PAGE
   FULL FIXED CSS
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #171717;
    background: #ffffff;
    line-height: 1.6;
}

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

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

button,
input,
textarea {
    font-family: inherit;
}


/* =========================================================
   COLORS
   ========================================================= */

:root {
    --gold: #d99500;
    --gold-hover: #bf8500;
    --dark: #181919;
    --text: #171717;
    --gray: #667085;
    --border: #d9dee5;
}


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

.contact-page {
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
}


/* =========================================================
   GLOBAL CONTACT CONTAINER
   ========================================================= */

.contact-container {
    width: calc(100% - 136px);
    max-width: 1220px;
    margin: 0 auto;
}


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

.contact-header {
    width: 100%;
    height: 80px;

    background: #ffffff;

    position: relative;
    z-index: 1000;
}

.contact-nav {
    height: 80px;

    display: flex;
    align-items: center;
}


/* HEADER LOGO */

.contact-logo {
    width: 235px;
    flex: 0 0 235px;

    display: flex;
    align-items: center;
}

.contact-logo img {
    width: 235px !important;
    max-width: 235px !important;

    height: 50px !important;
    max-height: 50px !important;

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

    display: block;

    filter: none !important;
}


/* NAVIGATION */

.contact-menu {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 29px;
}

.contact-menu a {
    color: #444444;

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

    white-space: nowrap;

    transition: color 0.2s ease;
}

.contact-menu a:hover,
.contact-menu a.active {
    color: var(--gold);
}


/* GET IN TOUCH */

.contact-touch-btn {
    margin-left: 45px;

    min-width: 104px;
    height: 40px;

    padding: 0 16px;

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

    background: var(--gold);
    color: #ffffff !important;

    border-radius: 7px;

    font-size: 14px;

    white-space: nowrap;

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

.contact-touch-btn:hover {
    background: var(--gold-hover);
    transform: translateY(-1px);
}


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

.contact-hero {
    width: 100%;
    min-height: 370px;

    position: relative;

    display: flex;
    align-items: center;

    background-image: url("../assets/service-testing-2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10, 10, 10, 0.96) 0%,
            rgba(10, 10, 10, 0.88) 38%,
            rgba(10, 10, 10, 0.68) 72%,
            rgba(10, 10, 10, 0.56) 100%
        );
}

.contact-hero-content {
    position: relative;
    z-index: 2;

    color: #ffffff;
}


/* BREADCRUMB */

.contact-breadcrumb {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    font-size: 14px;
}

.contact-breadcrumb a {
    color: #ffffff;
}

.contact-breadcrumb span:nth-child(2) {
    color: #a9adb3;
}

.contact-breadcrumb span:last-child {
    color: #e1a000;
}


/* HERO TITLE */

.contact-hero h1 {
    max-width: 820px;

    margin: 0 0 20px;

    color: #ffffff;

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

    line-height: 1.08;

    letter-spacing: -1px;
}


/* HERO TEXT */

.contact-hero p {
    margin: 0;

    color: #e2e2e2;

    font-size: 18px;
    line-height: 1.65;
}


/* =========================================================
   OFFICES
   ========================================================= */

.contact-offices {
    width: 100%;

    padding: 105px 0 95px;

    background: #ffffff;
}

.contact-office-grid {
    display: grid;

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

    gap: 30px;
}


/* OFFICE CARD */

.contact-office-card {
    min-height: 405px;

    padding: 32px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 20px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.035);

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

.contact-office-card:hover {
    transform: translateY(-5px);

    border-color: var(--gold);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.08);
}


/* LOCATION ICON */

.contact-icon-box {
    width: 45px;
    height: 45px;

    margin-bottom: 24px;

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

    background: #d18d08;
    color: #ffffff;

    border-radius: 12px;

    font-size: 18px;
}


/* OFFICE TITLE */

.contact-office-card h2 {
    margin: 0 0 17px;

    color: #1b1b1b;

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

    line-height: 1.3;
}


/* OFFICE ADDRESS */

.contact-address {
    min-height: 92px;

    margin: 0 0 21px;

    color: var(--gray);

    font-size: 14px;

    line-height: 1.65;
}


/* OFFICE DETAILS */

.contact-office-details {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.contact-office-details p {
    margin: 0;

    display: flex;
    align-items: center;

    gap: 11px;

    color: var(--gray);

    font-size: 14px;

    line-height: 1.4;
}

.contact-office-details i {
    width: 14px;

    color: var(--gold);

    font-size: 13px;

    flex-shrink: 0;
}


/* =========================================================
   ENQUIRY SECTION
   ========================================================= */

.contact-enquiry {
    width: 100%;

    padding: 35px 0 110px;

    background: #ffffff;
}

.contact-enquiry-grid {
    display: grid;

    grid-template-columns: 0.92fr 1.08fr;

    gap: 80px;

    align-items: start;
}


/* LEFT SIDE */

.contact-enquiry-info {
    padding-top: 7px;
}

.contact-small-title {
    display: block;

    margin-bottom: 18px;

    color: var(--gold);

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

    letter-spacing: 4px;

    text-transform: uppercase;
}

.contact-enquiry-info h2 {
    margin: 0 0 23px;

    color: #191919;

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

    line-height: 1.2;
}

.contact-enquiry-description {
    max-width: 525px;

    margin: 0 0 30px;

    color: var(--gray);

    font-size: 16px;

    line-height: 1.7;
}


/* CONTACT LINKS */

.contact-info-links {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.contact-info-links a {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 14px;

    color: var(--gray);

    font-size: 14px;

    transition: color 0.2s ease;
}

.contact-info-links a:hover {
    color: var(--gold);
}

.contact-info-links i {
    width: 18px;

    color: var(--gold);

    font-size: 18px;

    text-align: center;
}


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

.contact-form-card {
    width: 100%;

    padding: 34px 32px 32px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 22px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.045);
}

.contact-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.contact-field {
    margin-bottom: 22px;
}

.contact-field label {
    display: block;

    margin-bottom: 9px;

    color: #232323;

    font-size: 14px;
}

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

    background: #ffffff;

    color: #222222;

    border: 1px solid #d5dae1;
    border-radius: 6px;

    outline: none;

    font-size: 14px;

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

.contact-field input {
    height: 42px;

    padding: 0 13px;
}

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

    padding: 13px;

    resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
    border-color: var(--gold);

    box-shadow:
        0 0 0 3px rgba(217, 149, 0, 0.09);
}


/* SUBMIT */

.contact-submit {
    width: 100%;
    height: 45px;

    border: none;
    border-radius: 6px;

    background: var(--gold);
    color: #ffffff;

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

    gap: 10px;

    font-size: 14px;

    cursor: pointer;

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

.contact-submit:hover {
    background: var(--gold-hover);
    transform: translateY(-1px);
}


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

.contact-footer {
    width: 100%;

    padding-top: 64px;

    background: #191919;
    color: #ffffff;
}

.contact-footer-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    gap: 60px;

    padding-bottom: 55px;
}


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

.contact-footer-company {
    min-width: 0;
}


/* FOOTER LOGO
   IMPORTANT:
   HTML should use:
   assets/Pa_cost_logo_2.png
*/

.contact-footer-logo {
    width: 260px !important;
    max-width: 260px !important;
    height: 55px !important;
    max-height: 55px !important;

    display: block;

    margin: 0 0 25px;

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

    filter: brightness(0) invert(1) !important;

    opacity: 1 !important;
}


/* FOOTER DESCRIPTION */

.contact-footer-company p {
    max-width: 290px;

    margin: 0 0 24px;

    color: #ffffff;

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

.contact-footer-company strong {
    display: block;

    margin: 0;

    color: #e0a00b;

    font-size: 16px;
}


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

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

.contact-footer-column h3,
.contact-footer-office h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.contact-footer-column a {
    margin-bottom: 12px;

    color: #d6d6d6;

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

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.contact-footer-column a:hover {
    color: var(--gold);
}


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

.contact-footer-office p {
    margin: 0 0 16px;

    color: #ffffff;

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

.contact-footer-office a {
    margin-bottom: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #d6d6d6;

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

    transition: color 0.2s ease;
}

.contact-footer-office a:hover {
    color: var(--gold);
}

.contact-footer-office i {
    width: 15px;

    color: #d6d6d6;
}


/* =========================================================
   ORA AFFILIATES
   ========================================================= */

.contact-affiliates {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 40px 0 55px;

    border-top: 1px solid #363636;
}

.contact-affiliates h3 {
    margin: 0 0 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.contact-affiliate-links {
    display: flex;
    flex-wrap: wrap;

    column-gap: 27px;
    row-gap: 12px;
}

.contact-affiliate-links span {
    color: #d6d6d6;

    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.contact-copyright {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;

    padding: 35px 0 38px;

    border-top: 1px solid #363636;

    color: #d1d1d1;

    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.contact-back-top {
    position: fixed;

    right: 26px;
    bottom: 25px;

    z-index: 9999;

    width: 49px;
    height: 49px;

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

    background: var(--gold);

    color: #ffffff;

    border-radius: 50%;

    font-size: 18px;

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.18);

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

.contact-back-top:hover {
    background: var(--gold-hover);

    transform: translateY(-3px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1150px) {

    .contact-container {
        width: calc(100% - 70px);
    }

    .contact-logo,
    .contact-logo img {
        width: 205px !important;
        max-width: 205px !important;

        flex-basis: 205px;
    }

    .contact-menu {
        gap: 17px;
    }

    .contact-touch-btn {
        margin-left: 22px;
    }

    .contact-office-grid {
        gap: 20px;
    }

    .contact-footer-grid {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 50px;
    }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

    .contact-header {
        height: auto;
    }

    .contact-nav {
        min-height: 80px;
        height: auto;

        padding: 13px 0;

        flex-wrap: wrap;

        gap: 15px;
    }

    .contact-menu {
        order: 3;

        width: 100%;

        margin-left: 0;

        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 13px 20px;
    }

    .contact-touch-btn {
        margin-left: auto;
    }

    .contact-office-grid {
        grid-template-columns: 1fr;
    }

    .contact-office-card {
        min-height: auto;
    }

    .contact-address {
        min-height: auto;
    }

    .contact-enquiry-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .contact-container {
        width: calc(100% - 36px);
    }

    .contact-logo,
    .contact-logo img {
        width: 185px !important;
        max-width: 185px !important;

        flex-basis: 185px;
    }

    .contact-touch-btn {
        min-width: auto;

        padding: 9px 12px;

        font-size: 12px;
    }

    .contact-menu {
        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 5px;
    }

    .contact-menu a {
        flex-shrink: 0;
    }


    /* HERO */

    .contact-hero {
        min-height: 345px;
    }

    .contact-hero h1 {
        font-size: 36px;
    }

    .contact-hero p {
        font-size: 16px;
    }


    /* OFFICES */

    .contact-offices {
        padding: 70px 0;
    }

    .contact-office-card {
        padding: 26px;
    }


    /* ENQUIRY */

    .contact-enquiry {
        padding: 25px 0 75px;
    }

    .contact-enquiry-info h2 {
        font-size: 30px;
    }


    /* FORM */

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .contact-form-card {
        padding: 27px 22px;
    }


    /* FOOTER */

    .contact-footer-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .contact-footer-logo {
        width: 235px !important;
        max-width: 235px !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .contact-logo,
    .contact-logo img {
        width: 165px !important;
        max-width: 165px !important;

        flex-basis: 165px;
    }

    .contact-touch-btn {
        display: none;
    }

    .contact-hero h1 {
        font-size: 32px;
    }

    .contact-office-card {
        padding: 23px;
    }

    .contact-form-card {
        padding: 24px 18px;
    }
}

/* =========================================================
   PA COST — UNIFIED INNER-PAGE LAYOUT
   Keeps every internal page aligned with one visual system.
   ========================================================= */

:root {
    --pacost-header-height: 80px;
    --pacost-content-width: 1220px;
    --pacost-side-space: 68px;
    --pacost-hero-height: 448px;
    --pacost-gold: #d99500;
}

/* One desktop content width across all internal pages */
.header-container,
.about-page .container,
.services-container,
.services-page .container,
.hero-content,
.projects-main,
.clients-wrapper,
.clients-header-inner,
.hse-page .main-container,
.ora-holding-page .ora-header-container,
.ora-holding-page .ora-container,
.contact-container {
    width: calc(100% - 136px);
    max-width: var(--pacost-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* One white header rectangle */
.navbar,
.header,
.clients-header,
.hse-page .site-header,
.ora-holding-page .ora-header,
.contact-header {
    width: 100%;
    height: var(--pacost-header-height);
    min-height: var(--pacost-header-height);
    background: #ffffff;
    position: relative;
    z-index: 1000;
}

.nav-container,
.header-container,
.clients-header-inner,
.hse-page .header-inner,
.ora-holding-page .ora-header-container,
.contact-nav {
    height: var(--pacost-header-height);
    min-height: var(--pacost-header-height);
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

/* Same logo footprint */
.logo,
.clients-main-logo,
.hse-page .header-logo,
.contact-logo {
    width: 235px;
    flex: 0 0 235px;
    display: flex;
    align-items: center;
}

.logo img,
.clients-main-logo img,
.hse-page .header-logo img,
.ora-holding-page .ora-main-logo img,
.contact-logo img {
    width: 235px !important;
    max-width: 235px !important;
    height: auto !important;
    max-height: 50px !important;
    object-fit: contain;
    object-position: left center;
}

.ora-holding-page .ora-main-logo {
    width: 235px;
    flex: 0 0 235px;
}

.ora-holding-page .ora-main-logo img {
    width: 235px !important;
    max-width: 235px !important;
    max-height: 50px;
    object-fit: contain;
    object-position: left center;
}

/* Same navigation rhythm */
.nav,
.clients-nav,
.hse-page .main-nav,
.ora-holding-page .ora-nav,
.contact-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 29px;
}

.hse-page .main-nav {
    margin-right: 0;
}

.nav a,
.clients-nav a,
.hse-page .main-nav a,
.ora-holding-page .ora-nav a,
.contact-menu a {
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

/* Same Get in Touch button */
.touch-btn,
.clients-header-button,
.hse-page .gold-button,
.ora-holding-page .ora-contact-btn,
.contact-touch-btn {
    margin-left: 42px;
    width: 111px;
    min-width: 111px;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 7px;
    background: var(--pacost-gold);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

/* Every inner-page hero starts directly under the header
   and uses the same visible height. */
.about-page-hero,
.services-hero,
.services-page-hero,
.projects-hero,
.clients-hero,
.hse-page .hse-hero,
.ora-holding-page .ora-hero,
.contact-hero {
    width: 100%;
    height: var(--pacost-hero-height);
    min-height: var(--pacost-hero-height);
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Same horizontal starting point for hero text */
.about-page-hero-content,
.services-hero-content,
.services-page-hero-content,
.hero-content,
.clients-hero-inner,
.hse-page .hse-hero-content,
.ora-holding-page .ora-hero-content,
.contact-hero-content {
    position: relative;
    z-index: 2;
}

/* Normalize hero typography */
.about-page-hero h1,
.services-hero h1,
.services-page-hero h1,
.projects-hero h1,
.clients-hero h1,
.hse-page .hse-hero h1,
.ora-holding-page .ora-hero h1,
.contact-hero h1 {
    margin-top: 0;
    margin-bottom: 22px;
    max-width: 820px;
    color: #ffffff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
}

.about-page-hero p,
.services-hero p,
.services-page-hero p,
.projects-hero p,
.clients-hero p,
.hse-page .hse-hero p,
.ora-holding-page .ora-hero p,
.contact-hero p {
    margin: 0;
    max-width: 730px;
    color: #dddddd;
    font-size: 18px;
    line-height: 1.65;
}

.about-breadcrumb,
.services-breadcrumb,
.services-page-breadcrumb,
.breadcrumb,
.clients-breadcrumb,
.hse-page .breadcrumb,
.ora-holding-page .ora-breadcrumb,
.contact-breadcrumb {
    margin-bottom: 22px;
    font-size: 14px;
}

/* Prevent page-specific sections from pushing into the hero/header */
.clients-page,
.hse-page,
.ora-holding-page,
.contact-page,
.about-page,
.services-page {
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 1100px) {
    .header-container,
    .about-page .container,
    .services-container,
    .services-page .container,
    .hero-content,
    .projects-main,
    .clients-wrapper,
    .clients-header-inner,
    .hse-page .main-container,
    .ora-holding-page .ora-header-container,
    .ora-holding-page .ora-container,
    .contact-container {
        width: calc(100% - 60px);
    }

    .nav,
    .clients-nav,
    .hse-page .main-nav,
    .ora-holding-page .ora-nav,
    .contact-menu {
        gap: 17px;
    }

    .touch-btn,
    .clients-header-button,
    .hse-page .gold-button,
    .ora-holding-page .ora-contact-btn,
    .contact-touch-btn {
        margin-left: 24px;
    }
}

@media (max-width: 850px) {
    .navbar,
    .header,
    .clients-header,
    .hse-page .site-header,
    .ora-holding-page .ora-header,
    .contact-header {
        height: 72px;
        min-height: 72px;
    }

    .nav-container,
    .header-container,
    .clients-header-inner,
    .hse-page .header-inner,
    .ora-holding-page .ora-header-container,
    .contact-nav {
        height: 72px;
        min-height: 72px;
        padding-top: 8px;
        padding-bottom: 8px;
        flex-wrap: nowrap;
        position: relative;
    }

    .about-page-hero,
    .services-hero,
    .services-page-hero,
    .projects-hero,
    .clients-hero,
    .hse-page .hse-hero,
    .ora-holding-page .ora-hero,
    .contact-hero {
        height: 390px;
        min-height: 390px;
    }

    .about-page-hero h1,
    .services-hero h1,
    .services-page-hero h1,
    .projects-hero h1,
    .clients-hero h1,
    .hse-page .hse-hero h1,
    .ora-holding-page .ora-hero h1,
    .contact-hero h1 {
        font-size: 36px;
        line-height: 1.08;
    }

    .about-page-hero h1 br,
    .services-hero h1 br,
    .services-page-hero h1 br,
    .projects-hero h1 br,
    .clients-hero h1 br,
    .hse-page .hse-hero h1 br,
    .ora-holding-page .ora-hero h1 br,
    .contact-hero h1 br,
    .about-page-hero p br,
    .services-hero p br,
    .services-page-hero p br,
    .projects-hero p br,
    .clients-hero p br,
    .hse-page .hse-hero p br,
    .ora-holding-page .ora-hero p br,
    .contact-hero p br {
        display: none;
    }
}

@media (max-width: 650px) {
    .header-container,
    .about-page .container,
    .services-container,
    .services-page .container,
    .hero-content,
    .projects-main,
    .clients-wrapper,
    .clients-header-inner,
    .hse-page .main-container,
    .ora-holding-page .ora-header-container,
    .ora-holding-page .ora-container,
    .ora-holding-page .ora-hero-content,
    .ora-holding-page .ora-companies-container,
    .ora-holding-page .ora-footer-container,
    .contact-container {
        width: calc(100% - 32px);
        max-width: none;
    }

    .logo,
    .clients-main-logo,
    .hse-page .header-logo,
    .ora-holding-page .ora-main-logo,
    .contact-logo {
        width: 175px;
        flex: 0 0 175px;
    }

    .logo img,
    .clients-main-logo img,
    .hse-page .header-logo img,
    .ora-holding-page .ora-main-logo img,
    .contact-logo img {
        width: 175px !important;
        max-width: 175px !important;
        height: auto !important;
        max-height: 44px !important;
    }

    .touch-btn,
    .clients-header-button,
    .hse-page .gold-button,
    .ora-holding-page .ora-contact-btn,
    .contact-touch-btn {
        display: none !important;
    }

    .about-page-hero,
    .services-hero,
    .services-page-hero,
    .projects-hero,
    .clients-hero,
    .hse-page .hse-hero,
    .ora-holding-page .ora-hero,
    .contact-hero {
        height: 345px;
        min-height: 345px;
    }

    .about-page-hero h1,
    .services-hero h1,
    .services-page-hero h1,
    .projects-hero h1,
    .clients-hero h1,
    .hse-page .hse-hero h1,
    .ora-holding-page .ora-hero h1,
    .contact-hero h1 {
        max-width: 100%;
        font-size: 31px;
        line-height: 1.08;
        letter-spacing: -0.4px;
    }

    .about-page-hero p,
    .services-hero p,
    .services-page-hero p,
    .projects-hero p,
    .clients-hero p,
    .hse-page .hse-hero p,
    .ora-holding-page .ora-hero p,
    .contact-hero p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.55;
    }

    .about-breadcrumb,
    .services-breadcrumb,
    .services-page-breadcrumb,
    .breadcrumb,
    .clients-breadcrumb,
    .hse-page .breadcrumb,
    .ora-holding-page .ora-breadcrumb,
    .contact-breadcrumb {
        margin-bottom: 18px;
        font-size: 13px;
    }

    /* PROJECTS FILTER */
    .filter-box {
        width: 100%;
    }

    .filters,
    .filter-group {
        max-width: 100%;
    }

    /* INNER-PAGE GRIDS */
    .clients-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hse-page .hse-certificate-grid,
    .hse-page .hse-safety-grid,
    .contact-office-grid,
    .contact-enquiry-grid {
        grid-template-columns: 1fr;
    }

    /* FOOTERS */
    .footer-grid,
    .footer-affiliates,
    .affiliates,
    .copyright,
    .clients-footer-grid,
    .clients-affiliates,
    .clients-footer-bottom,
    .hse-page .footer-grid,
    .hse-page .footer-affiliates,
    .hse-page .footer-bottom,
    .ora-holding-page .ora-footer-grid,
    .ora-holding-page .ora-affiliates,
    .ora-holding-page .ora-copyright,
    .contact-footer-grid,
    .contact-affiliates,
    .contact-copyright {
        max-width: 100%;
    }

    .footer-grid,
    .clients-footer-grid,
    .hse-page .footer-grid,
    .ora-holding-page .ora-footer-grid,
    .contact-footer-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .footer-logo,
    .footer-about img,
    .clients-footer-logo,
    .hse-page .footer-logo,
    .ora-holding-page .ora-footer-logo,
    .contact-footer-logo {
        width: 225px !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* FIXED BACK-TO-TOP BUTTONS */
    .back-to-top,
    .back-top,
    .scroll-top,
    .clients-top-button,
    .hse-page .back-to-top,
    .ora-holding-page .ora-back-top,
    .contact-back-top {
        width: 44px;
        height: 44px;
        right: 14px;
        bottom: 14px;
        font-size: 22px;
    }
}

@media (max-width: 420px) {
    .header-container,
    .about-page .container,
    .services-container,
    .services-page .container,
    .hero-content,
    .projects-main,
    .clients-wrapper,
    .clients-header-inner,
    .hse-page .main-container,
    .ora-holding-page .ora-header-container,
    .ora-holding-page .ora-container,
    .ora-holding-page .ora-hero-content,
    .ora-holding-page .ora-companies-container,
    .ora-holding-page .ora-footer-container,
    .contact-container {
        width: calc(100% - 24px);
    }

    .logo,
    .clients-main-logo,
    .hse-page .header-logo,
    .ora-holding-page .ora-main-logo,
    .contact-logo {
        width: 160px;
        flex-basis: 160px;
    }

    .logo img,
    .clients-main-logo img,
    .hse-page .header-logo img,
    .ora-holding-page .ora-main-logo img,
    .contact-logo img {
        width: 160px !important;
        max-width: 160px !important;
        max-height: 42px !important;
    }

    .about-page-hero,
    .services-hero,
    .services-page-hero,
    .projects-hero,
    .clients-hero,
    .hse-page .hse-hero,
    .ora-holding-page .ora-hero,
    .contact-hero {
        height: 325px;
        min-height: 325px;
    }

    .about-page-hero h1,
    .services-hero h1,
    .services-page-hero h1,
    .projects-hero h1,
    .clients-hero h1,
    .hse-page .hse-hero h1,
    .ora-holding-page .ora-hero h1,
    .contact-hero h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    .about-page-hero p,
    .services-hero p,
    .services-page-hero p,
    .projects-hero p,
    .clients-hero p,
    .hse-page .hse-hero p,
    .ora-holding-page .ora-hero p,
    .contact-hero p {
        font-size: 14px;
    }

    .filter-box {
        padding: 13px;
    }

    .filter-btn,
    .status-filter {
        padding: 8px 10px;
        font-size: 12px;
    }

    .ora-holding-page .ora-companies-grid {
        grid-template-columns: 1fr;
    }

    .contact-office-card,
    .contact-form-card,
    .hse-page .hse-certificate-card {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* =========================================================
   PA COST — SITE-WIDE POLISH & MOTION
   Subtle interactions shared across all pages
========================================================= */

:root {
    --pacost-motion-fast: 180ms;
    --pacost-motion: 320ms;
    --pacost-motion-slow: 650ms;
    --pacost-ease: cubic-bezier(.22, .61, .36, 1);
    --pacost-hover-shadow: 0 18px 42px rgba(0, 0, 0, 0.10);
    --pacost-soft-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}

/* Header polish */
.navbar,
.header,
.clients-header,
.hse-page .site-header,
.ora-holding-page .ora-header,
.contact-header {
    transition:
        box-shadow var(--pacost-motion) ease,
        background-color var(--pacost-motion) ease;
}

.navbar.is-scrolled,
.header.is-scrolled,
.clients-header.is-scrolled,
.hse-page .site-header.is-scrolled,
.ora-holding-page .ora-header.is-scrolled,
.contact-header.is-scrolled {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}

/* Desktop navigation underline */
@media (min-width: 851px) {
    .nav-links a,
    .nav a,
    .clients-nav a,
    .hse-page .main-nav a,
    .ora-holding-page .ora-nav a,
    .contact-menu a {
        position: relative;
    }

    .nav-links a::after,
    .nav a::after,
    .clients-nav a::after,
    .hse-page .main-nav a::after,
    .ora-holding-page .ora-nav a::after,
    .contact-menu a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -8px;
        width: 0;
        height: 2px;
        border-radius: 999px;
        background: var(--pacost-gold, var(--gold));
        transform: translateX(-50%);
        transition: width var(--pacost-motion) var(--pacost-ease);
    }

    .nav-links a:hover::after,
    .nav-links a.active::after,
    .nav a:hover::after,
    .nav a.active::after,
    .clients-nav a:hover::after,
    .clients-nav a.active::after,
    .hse-page .main-nav a:hover::after,
    .hse-page .main-nav a.active::after,
    .ora-holding-page .ora-nav a:hover::after,
    .ora-holding-page .ora-nav a.active::after,
    .contact-menu a:hover::after,
    .contact-menu a.active::after {
        width: 100%;
    }
}

/* Hero entrance */
.hero .hero-inner,
.about-page-hero-content,
.services-hero-content,
.services-page-hero-content,
.projects-hero .hero-content,
.clients-hero-inner,
.hse-page .hse-hero-content,
.ora-holding-page .ora-hero-content,
.contact-hero-content {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 700ms var(--pacost-ease),
        transform 700ms var(--pacost-ease);
}

.hero .hero-inner.hero-ready,
.about-page-hero-content.hero-ready,
.services-hero-content.hero-ready,
.services-page-hero-content.hero-ready,
.projects-hero .hero-content.hero-ready,
.clients-hero-inner.hero-ready,
.hse-page .hse-hero-content.hero-ready,
.ora-holding-page .ora-hero-content.hero-ready,
.contact-hero-content.hero-ready {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll reveal used by JavaScript */
.reveal-item {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 620ms var(--pacost-ease),
        transform 620ms var(--pacost-ease);
    will-change: opacity, transform;
}

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

/* Staggered rows */
.reveal-item:nth-child(2) {
    transition-delay: 55ms;
}

.reveal-item:nth-child(3) {
    transition-delay: 110ms;
}

.reveal-item:nth-child(4) {
    transition-delay: 165ms;
}

/* Card polish */
.why-card,
.service-card,
.project-card,
.client-logo,
.industry-card,
.vision-card,
.about-vm-card,
.about-value-card,
.about-affiliate-card,
.about-info-box,
.clients-logo-card,
.clients-info-card,
.hse-page .hse-certificate-card,
.hse-page .hse-policy-card,
.hse-page .hse-iso-pill,
.ora-holding-page .ora-company-card,
.contact-office-card,
.contact-form-card {
    transition:
        transform var(--pacost-motion) var(--pacost-ease),
        box-shadow var(--pacost-motion) var(--pacost-ease),
        border-color var(--pacost-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .why-card:hover,
    .service-card:hover,
    .project-card:hover,
    .client-logo:hover,
    .industry-card:hover,
    .vision-card:hover,
    .about-vm-card:hover,
    .about-value-card:hover,
    .about-affiliate-card:hover,
    .about-info-box:hover,
    .clients-logo-card:hover,
    .clients-info-card:hover,
    .hse-page .hse-certificate-card:hover,
    .hse-page .hse-policy-card:hover,
    .ora-holding-page .ora-company-card:hover,
    .contact-office-card:hover,
    .contact-form-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--pacost-hover-shadow);
    }
}

/* Image zoom inside visual cards */
.service-card,
.about-introduction-image,
.capabilities-image,
.clients-logo-card,
.ora-holding-page .ora-company-logo {
    overflow: hidden;
}

.service-card > img,
.about-introduction-image img,
.capabilities-image img,
.clients-logo-card img,
.ora-holding-page .ora-company-logo img {
    transition: transform 700ms var(--pacost-ease);
}

@media (hover: hover) and (pointer: fine) {
    .service-card:hover > img,
    .about-introduction-image:hover img,
    .capabilities-image:hover img,
    .clients-logo-card:hover img,
    .ora-holding-page .ora-company-card:hover .ora-company-logo img {
        transform: scale(1.045);
    }
}

/* Buttons */
.gold-button,
.nav-contact,
.touch-btn,
.clients-header-button,
.hse-page .gold-button,
.ora-holding-page .ora-contact-btn,
.contact-touch-btn,
.cta-btn,
.cta-button,
.about-cta-btn,
.clients-contact-button,
.hse-page .hse-cta-button,
.contact-submit {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--pacost-motion-fast) ease,
        box-shadow var(--pacost-motion) ease,
        background-color var(--pacost-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .gold-button:hover,
    .nav-contact:hover,
    .touch-btn:hover,
    .clients-header-button:hover,
    .hse-page .gold-button:hover,
    .ora-holding-page .ora-contact-btn:hover,
    .contact-touch-btn:hover,
    .cta-btn:hover,
    .cta-button:hover,
    .about-cta-btn:hover,
    .clients-contact-button:hover,
    .hse-page .hse-cta-button:hover,
    .contact-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(214, 150, 11, 0.24);
    }
}

/* Arrow micro-interaction */
.gold-button span,
.cta-btn span,
.about-cta-btn span,
.clients-contact-button span,
.hse-page .hse-cta-button span {
    display: inline-block;
    transition: transform var(--pacost-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .gold-button:hover span,
    .cta-btn:hover span,
    .about-cta-btn:hover span,
    .clients-contact-button:hover span,
    .hse-page .hse-cta-button:hover span {
        transform: translateX(4px);
    }
}

/* Inputs feel more polished */
.contact-field input,
.contact-field textarea,
.search-wrapper input,
#projectSearch {
    transition:
        border-color var(--pacost-motion-fast) ease,
        box-shadow var(--pacost-motion-fast) ease,
        background-color var(--pacost-motion-fast) ease;
}

.contact-field input:focus,
.contact-field textarea:focus,
.search-wrapper:focus-within,
#projectSearch:focus {
    box-shadow: 0 0 0 4px rgba(217, 149, 0, 0.10);
}

/* Back to top */
.back-to-top,
.back-top,
.scroll-top,
.clients-top-button,
.hse-page .back-to-top,
.ora-holding-page .ora-back-top,
.contact-back-top {
    transition:
        transform var(--pacost-motion-fast) ease,
        box-shadow var(--pacost-motion) ease,
        background-color var(--pacost-motion-fast) ease,
        opacity var(--pacost-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .back-to-top:hover,
    .back-top:hover,
    .scroll-top:hover,
    .clients-top-button:hover,
    .hse-page .back-to-top:hover,
    .ora-holding-page .ora-back-top:hover,
    .contact-back-top:hover {
        transform: translateY(-4px) scale(1.04);
        box-shadow: 0 14px 30px rgba(214, 150, 11, 0.28);
    }
}

/* Accessible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(217, 149, 0, 0.42);
    outline-offset: 3px;
}

/* Keep mobile interactions calm */
@media (max-width: 850px) {
    .reveal-item {
        transform: translateY(16px);
        transition-duration: 480ms;
    }

    .nav-links a::after,
    .nav a::after,
    .clients-nav a::after,
    .hse-page .main-nav a::after,
    .ora-holding-page .ora-nav a::after,
    .contact-menu a::after {
        display: none;
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal-item,
    .hero .hero-inner,
    .about-page-hero-content,
    .services-hero-content,
    .services-page-hero-content,
    .projects-hero .hero-content,
    .clients-hero-inner,
    .hse-page .hse-hero-content,
    .ora-holding-page .ora-hero-content,
    .contact-hero-content {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* PROJECTS */
.projects-hero {
    background:
        linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
        url("../assets/service-transmission.jpg") center/cover no-repeat;
}

/* CLIENTS */
.clients-hero {
    background:
        linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
        url("../assets/hero-substation.jpg") center/cover no-repeat;
}



.footer .footer-linkedin,
.clients-footer .footer-linkedin,
.hse-page .footer-linkedin,
.ora-holding-page .footer-linkedin,
.contact-footer .footer-linkedin,
.footer-linkedin {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;

    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;

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

    background: #303030 !important;
    border-radius: 50% !important;

    color: #bdbdbd !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-decoration: none !important;
}

.footer-linkedin:hover {
    background: #3a3a3a !important;
    color: #ffffff !important;
}

/* =========================================================
   PA COST CONTACT FORM
   LOADING / SUCCESS / ERROR
========================================================= */


/* Submit button */

.contact-submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}


/* Disabled button */

.contact-submit:disabled {

    opacity: 0.75;

    cursor: not-allowed;

}


.contact-submit.loading {

    pointer-events: none;

}


/* =========================================================
   STATUS MESSAGE
========================================================= */

.contact-status {

    margin-top: 18px;

    min-height: 28px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 15px;

    font-weight: 600;

}


/* =========================================================
   LOADING
========================================================= */

.contact-status.loading {

    color: #0b5ed7;

}


/* Blue spinner */

.contact-loader {

    width: 18px;

    height: 18px;

    border:
        3px solid
        rgba(
            11,
            94,
            215,
            0.20
        );

    border-top-color:
        #0b5ed7;

    border-radius:
        50%;

    display:
        inline-block;

    animation:
        contactSpinner
        0.75s
        linear
        infinite;

}


@keyframes contactSpinner {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   SUCCESS
========================================================= */

.contact-status.success {

    color:
        #16803a;

}


.contact-status.success
.contact-response-icon {

    background:
        #16803a;

}


/* =========================================================
   ERROR
========================================================= */

.contact-status.error {

    color:
        #c62828;

}


.contact-status.error
.contact-response-icon {

    background:
        #c62828;

}


/* =========================================================
   SUCCESS / ERROR ROUND ICON
========================================================= */

.contact-response-icon {

    width:
        23px;

    height:
        23px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 23px;

    border-radius:
        50%;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

}