/* =========================================================
   SLIPFORM GLOBAL CONSTRUCTION
   SAFETY & QUALITY PAGE
   PART 3A
========================================================= */

/* =========================================================
   PAGE VARIABLES
========================================================= */

:root {
    --safety-navy: #061a2f;
    --safety-navy-soft: #0b2f50;
    --safety-blue: #1565c0;
    --safety-blue-light: #3d91e8;
    --safety-gold: #f5a623;
    --safety-gold-light: #ffd477;
    --safety-green: #21aa73;
    --safety-red: #dc3545;
    --safety-white: #ffffff;
    --safety-surface: #f3f7fa;
    --safety-border: #dce6ef;
    --safety-text: #16283a;
    --safety-text-soft: #66798c;
    --safety-shadow: 0 28px 70px rgba(6, 26, 47, 0.14);
}

/* =========================================================
   COMMON PAGE ELEMENTS
========================================================= */

.safety-section-title {
    max-width: 820px;
    margin-bottom: 24px;
    color: var(--sgc-primary-dark);
    font-size: clamp(40px, 4.5vw, 65px);
    line-height: 1.08;
    letter-spacing: -2.8px;
}

    .safety-section-title span {
        color: var(--sgc-secondary);
    }

.safety-section-heading {
    max-width: 880px;
    margin: 0 auto 58px;
    text-align: center;
}

    .safety-section-heading > p {
        max-width: 720px;
        margin: 0 auto;
        color: var(--sgc-text-soft);
        font-size: 15px;
        line-height: 1.9;
    }

    .safety-section-heading .safety-section-title {
        margin-right: auto;
        margin-left: auto;
    }

.safety-section-heading-light .safety-section-title {
    color: var(--sgc-white);
}

    .safety-section-heading-light .safety-section-title span {
        color: var(--sgc-accent);
    }

.safety-section-heading-light > p {
    color: rgba(255, 255, 255, 0.62);
}

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

.safety-hero {
    position: relative;
    min-height: 830px;
    overflow: hidden;
    color: var(--sgc-white);
    background: var(--safety-navy);
}

.safety-hero-media {
    position: absolute;
    inset: 0;
}

.safety-hero-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #061a2e;
    transform: none;
}

.safety-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(4, 17, 31, 0.99) 0%, rgba(5, 27, 48, 0.95) 45%, rgba(5, 30, 52, 0.72) 76%, rgba(4, 20, 36, 0.82) 100% ), linear-gradient( to top, rgba(4, 18, 34, 0.85), transparent 62% );
}

.safety-hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: linear-gradient( rgba(255, 255, 255, 0.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px );
    background-size: 76px 76px;
    mask-image: linear-gradient( to bottom, black, transparent 94% );
}

.safety-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
}

.safety-hero-glow-one {
    top: -180px;
    right: 8%;
    width: 530px;
    height: 530px;
    background: rgba(21, 101, 192, 0.17);
}

.safety-hero-glow-two {
    bottom: -310px;
    left: -180px;
    width: 620px;
    height: 620px;
    background: rgba(245, 166, 35, 0.1);
}

.safety-hero-lines {
    position: absolute;
    top: -15%;
    right: 9%;
    width: 29%;
    height: 135%;
    opacity: 0.47;
    transform: skewX(-9deg);
}

    .safety-hero-lines span {
        position: absolute;
        width: 1px;
        height: 100%;
        background: linear-gradient( to bottom, transparent, rgba(245, 166, 35, 0.54), transparent );
    }

        .safety-hero-lines span:nth-child(1) {
            left: 5%;
        }

        .safety-hero-lines span:nth-child(2) {
            left: 52%;
        }

        .safety-hero-lines span:nth-child(3) {
            right: 4%;
        }

.safety-hero-rings {
    position: absolute;
    top: -220px;
    right: -120px;
    width: 590px;
    height: 590px;
    pointer-events: none;
}

    .safety-hero-rings span {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 50%;
    }

        .safety-hero-rings span:nth-child(1) {
            inset: 0;
        }

        .safety-hero-rings span:nth-child(2) {
            inset: 65px;
            border-color: rgba(245, 166, 35, 0.12);
        }

        .safety-hero-rings span:nth-child(3) {
            inset: 130px;
        }

.safety-hero-container {
    position: relative;
    z-index: 4;
    display: flex;
    min-height: 740px;
    align-items: center;
    padding-top: 88px;
    padding-bottom: 126px;
}

.safety-hero-content {
    max-width: 850px;
}

.safety-breadcrumb {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

    .safety-breadcrumb a:hover {
        color: var(--sgc-accent);
    }

    .safety-breadcrumb i {
        color: var(--sgc-accent);
        font-size: 7px;
    }

    .safety-breadcrumb span {
        color: rgba(255, 255, 255, 0.83);
    }

.safety-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 23px;
    color: var(--safety-gold-light);
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.safety-hero-label-icon {
    display: inline-flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(245, 166, 35, 0.3);
    border-radius: 12px;
    color: var(--sgc-accent);
    background: rgba(245, 166, 35, 0.09);
}

.safety-hero-title {
    max-width: 890px;
    margin-bottom: 29px;
    color: var(--sgc-white);
    font-size: clamp(58px, 6.5vw, 98px);
    line-height: 0.98;
    letter-spacing: -5.3px;
}

    .safety-hero-title span {
        display: block;
        color: var(--sgc-accent);
    }

.safety-hero-description {
    max-width: 760px;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 17px;
    line-height: 1.9;
}

.safety-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    margin-bottom: 44px;
}

.safety-hero-secondary-action {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--sgc-white);
}

    .safety-hero-secondary-action:hover {
        color: var(--sgc-accent);
        transform: translateX(5px);
    }

.safety-hero-secondary-icon {
    display: inline-flex;
    width: 51px;
    height: 51px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: var(--sgc-accent);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}

.safety-hero-secondary-content {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

    .safety-hero-secondary-content small {
        color: rgba(255, 255, 255, 0.45);
        font-size: 9px;
    }

    .safety-hero-secondary-content strong {
        margin-top: 5px;
        font-size: 13px;
    }

.safety-hero-assurance {
    display: flex;
    align-items: center;
    gap: 21px;
}

.safety-hero-assurance-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .safety-hero-assurance-item > span {
        display: inline-flex;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: var(--sgc-accent);
        background: rgba(245, 166, 35, 0.1);
    }

    .safety-hero-assurance-item > div {
        display: flex;
        flex-direction: column;
    }

    .safety-hero-assurance-item strong {
        color: rgba(255, 255, 255, 0.88);
        font-size: 11px;
    }

    .safety-hero-assurance-item small {
        margin-top: 4px;
        color: rgba(255, 255, 255, 0.44);
        font-size: 8px;
    }

.safety-hero-assurance-divider {
    width: 1px;
    height: 43px;
    background: rgba(255, 255, 255, 0.13);
}

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

.safety-hero-visual {
    position: relative;
    min-height: 570px;
    margin-left: 20px;
}

.safety-hero-card {
    position: absolute;
    z-index: 3;
    top: 40px;
    right: 0;
    width: 410px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: rgba(5, 25, 45, 0.74);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
}

    .safety-hero-card::before {
        position: absolute;
        top: -90px;
        right: -90px;
        width: 240px;
        height: 240px;
        border: 1px solid rgba(245, 166, 35, 0.14);
        border-radius: 50%;
        content: "";
    }

.safety-hero-card-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 26px 12px;
}

.safety-hero-card-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    font-size: 22px;
    box-shadow: 0 13px 30px rgba(245, 166, 35, 0.3);
}

.safety-hero-card-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.05);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

    .safety-hero-card-status i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--safety-green);
        box-shadow: 0 0 0 5px rgba(33, 170, 115, 0.12);
        animation: safetyStatusPulse 2s infinite;
    }

@keyframes safetyStatusPulse {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(33, 170, 115, 0.12);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(33, 170, 115, 0);
    }
}

.safety-hero-card-body {
    position: relative;
    z-index: 2;
    padding: 17px 27px 30px;
}

    .safety-hero-card-body small {
        color: rgba(255, 255, 255, 0.44);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .safety-hero-card-body strong {
        display: block;
        margin: 8px 0 15px;
        color: var(--sgc-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 59px;
        line-height: 1;
        letter-spacing: -2px;
    }

    .safety-hero-card-body p {
        max-width: 330px;
        margin: 0;
        color: rgba(255, 255, 255, 0.57);
        font-size: 11px;
        line-height: 1.78;
    }

.safety-hero-card-footer {
    position: relative;
    z-index: 2;
    display: grid;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    grid-template-columns: repeat(3, 1fr);
}

    .safety-hero-card-footer > div {
        min-height: 95px;
        padding: 20px 15px;
        border-right: 1px solid rgba(255, 255, 255, 0.09);
    }

        .safety-hero-card-footer > div:last-child {
            border-right: 0;
        }

    .safety-hero-card-footer span {
        display: block;
        margin-bottom: 8px;
        color: var(--sgc-accent);
        font-family: "Space Grotesk", sans-serif;
        font-size: 15px;
        font-weight: 700;
    }

    .safety-hero-card-footer small {
        color: rgba(255, 255, 255, 0.48);
        font-size: 8px;
        line-height: 1.45;
    }

.safety-hero-floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    width: 240px;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 17px;
    color: var(--sgc-white);
    background: rgba(4, 21, 38, 0.75);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.27);
    backdrop-filter: blur(15px);
}

.safety-hero-floating-card-one {
    top: 5px;
    left: -35px;
}

.safety-hero-floating-card-two {
    right: 17px;
    bottom: 25px;
}

.safety-hero-floating-card > span {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
}

.safety-hero-floating-card > div {
    display: flex;
    flex-direction: column;
}

.safety-hero-floating-card small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 8px;
}

.safety-hero-floating-card strong {
    margin-top: 4px;
    color: var(--sgc-white);
    font-family: "Space Grotesk", sans-serif;
    font-size: 10px;
}

.safety-hero-rotating-badge {
    position: absolute;
    z-index: 6;
    bottom: 60px;
    left: -15px;
    width: 132px;
    height: 132px;
    border: 1px solid rgba(245, 166, 35, 0.3);
    border-radius: 50%;
    background: rgba(5, 24, 43, 0.83);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);
}

.safety-rotating-text {
    position: absolute;
    inset: 7px;
    color: var(--sgc-accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-align: center;
    animation: safetyBadgeRotate 14s linear infinite;
}

.safety-rotating-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    transform: translate(-50%, -50%);
}

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

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

.safety-hero-bottom {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(4, 18, 34, 0.46);
    backdrop-filter: blur(16px);
}

.safety-hero-bottom-wrap {
    display: flex;
    min-height: 90px;
    align-items: center;
    gap: 48px;
}

.safety-hero-bottom-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .safety-hero-bottom-item > span {
        display: inline-flex;
        width: 41px;
        height: 41px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: var(--sgc-accent);
        background: rgba(245, 166, 35, 0.1);
    }

    .safety-hero-bottom-item > div {
        display: flex;
        flex-direction: column;
    }

    .safety-hero-bottom-item small {
        color: rgba(255, 255, 255, 0.4);
        font-size: 8px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .safety-hero-bottom-item strong {
        margin-top: 4px;
        color: rgba(255, 255, 255, 0.84);
        font-size: 10px;
    }

.safety-scroll-indicator {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.56);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

    .safety-scroll-indicator i {
        display: inline-flex;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        color: var(--sgc-accent);
        animation: safetyScrollBounce 1.8s ease-in-out infinite;
    }

    .safety-scroll-indicator:hover {
        color: var(--sgc-accent);
    }

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

    50% {
        transform: translateY(5px);
    }
}

/* =========================================================
   TRUST STRIP
========================================================= */

.safety-trust-strip {
    position: relative;
    z-index: 7;
    padding: 30px 0;
    border-bottom: 1px solid var(--sgc-border);
    background: var(--sgc-white);
    box-shadow: 0 15px 40px rgba(11, 42, 74, 0.04);
}

.safety-trust-strip-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 43px;
}

.safety-trust-intro {
    display: flex;
    min-width: 235px;
    flex-direction: column;
    padding-right: 35px;
    border-right: 1px solid var(--sgc-border);
}

    .safety-trust-intro span {
        color: var(--sgc-text-muted);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .safety-trust-intro strong {
        margin-top: 5px;
        color: var(--sgc-primary-dark);
        font-family: "Space Grotesk", sans-serif;
        font-size: 16px;
    }

.safety-trust-list {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.safety-trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .safety-trust-item > span {
        display: inline-flex;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        color: var(--sgc-accent-dark);
        background: var(--sgc-accent-soft);
    }

    .safety-trust-item > div {
        display: flex;
        flex-direction: column;
    }

    .safety-trust-item strong {
        color: var(--sgc-primary-dark);
        font-size: 10px;
    }

    .safety-trust-item small {
        margin-top: 3px;
        color: var(--sgc-text-muted);
        font-size: 8px;
    }

/* =========================================================
   MANAGEMENT COMMITMENT
========================================================= */

.safety-commitment {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    background: var(--sgc-white);
}

.safety-commitment-pattern {
    position: absolute;
    top: 40px;
    right: -210px;
    width: 510px;
    height: 510px;
    border: 1px solid rgba(21, 101, 192, 0.07);
    border-radius: 50%;
}

    .safety-commitment-pattern::before,
    .safety-commitment-pattern::after {
        position: absolute;
        border: 1px solid rgba(21, 101, 192, 0.07);
        border-radius: 50%;
        content: "";
    }

    .safety-commitment-pattern::before {
        inset: 62px;
    }

    .safety-commitment-pattern::after {
        inset: 125px;
    }

.safety-commitment-visual {
    position: relative;
    min-height: 675px;
    padding-right: 56px;
}

.safety-commitment-main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 82%;
    height: 580px;
    overflow: hidden;
    border-radius: 30px 130px 30px 30px;
    box-shadow: var(--safety-shadow);
}

    .safety-commitment-main-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.safety-commitment-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(4, 18, 34, 0.78), transparent 54% );
}

.safety-commitment-image-caption {
    position: absolute;
    right: 27px;
    bottom: 26px;
    left: 27px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--sgc-white);
}

    .safety-commitment-image-caption > span {
        display: inline-flex;
        width: 47px;
        height: 47px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(245, 166, 35, 0.45);
        border-radius: 13px;
        color: var(--sgc-accent);
        background: rgba(4, 18, 34, 0.58);
        backdrop-filter: blur(11px);
    }

    .safety-commitment-image-caption > div {
        display: flex;
        flex-direction: column;
    }

    .safety-commitment-image-caption small {
        color: rgba(255, 255, 255, 0.48);
        font-size: 8px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .safety-commitment-image-caption strong {
        margin-top: 5px;
        font-family: "Space Grotesk", sans-serif;
        font-size: 12px;
    }

.safety-commitment-small-image {
    position: absolute;
    z-index: 4;
    right: 15px;
    bottom: 0;
    width: 275px;
    height: 310px;
    overflow: hidden;
    border: 9px solid var(--sgc-white);
    border-radius: 28px;
    box-shadow: var(--safety-shadow);
}

    .safety-commitment-small-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.safety-commitment-stat-card {
    position: absolute;
    z-index: 5;
    top: 56px;
    right: 0;
    width: 180px;
    padding: 24px;
    border-radius: 22px;
    color: var(--sgc-white);
    background: linear-gradient( 145deg, var(--sgc-primary), var(--sgc-primary-dark) );
    box-shadow: var(--safety-shadow);
}

.safety-commitment-stat-value {
    display: flex;
    align-items: flex-start;
}

    .safety-commitment-stat-value strong {
        color: var(--sgc-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 51px;
        line-height: 1;
    }

    .safety-commitment-stat-value span {
        margin: 3px 0 0 4px;
        color: var(--sgc-accent);
        font-size: 23px;
        font-weight: 800;
    }

.safety-commitment-stat-card p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.57);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.safety-commitment-outline {
    position: absolute;
    top: 31px;
    left: -30px;
    width: 175px;
    height: 175px;
    border-top: 2px solid var(--sgc-accent);
    border-left: 2px solid var(--sgc-accent);
}

.safety-commitment-content {
    max-width: 700px;
    padding-left: 20px;
}

.safety-commitment-lead {
    margin-bottom: 18px;
    color: var(--sgc-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
}

.safety-commitment-text {
    margin-bottom: 27px;
    color: var(--sgc-text-soft);
    font-size: 14px;
    line-height: 1.9;
}

.safety-commitment-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 35px;
}

.safety-commitment-point {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

    .safety-commitment-point > span {
        display: inline-flex;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
        border-radius: 10px;
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent);
        font-size: 11px;
    }

    .safety-commitment-point strong {
        color: var(--sgc-primary-dark);
        font-family: "Space Grotesk", sans-serif;
        font-size: 14px;
    }

    .safety-commitment-point p {
        margin: 6px 0 0;
        color: var(--sgc-text-soft);
        font-size: 11px;
        line-height: 1.7;
    }

.safety-commitment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 27px;
}

.safety-commitment-signature {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

    .safety-commitment-signature > span {
        display: inline-flex;
        width: 45px;
        height: 45px;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: var(--sgc-accent-dark);
        background: var(--sgc-accent-soft);
    }

    .safety-commitment-signature > div {
        display: flex;
        flex-direction: column;
    }

    .safety-commitment-signature small {
        color: var(--sgc-text-muted);
        font-size: 8px;
    }

    .safety-commitment-signature strong {
        margin-top: 4px;
        color: var(--sgc-primary-dark);
        font-size: 10px;
    }

/* =========================================================
   ZERO HARM
========================================================= */

.safety-zero-harm {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    color: var(--sgc-white);
    background: radial-gradient( circle at 13% 38%, rgba(21, 101, 192, 0.24), transparent 33% ), var(--sgc-primary-dark);
}

.safety-zero-harm-grid {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: linear-gradient( rgba(255, 255, 255, 0.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px );
    background-size: 78px 78px;
}

.safety-zero-harm-circle {
    position: absolute;
    top: -220px;
    right: -120px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(245, 166, 35, 0.12);
    border-radius: 50%;
}

    .safety-zero-harm-circle::before,
    .safety-zero-harm-circle::after {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 50%;
        content: "";
    }

    .safety-zero-harm-circle::before {
        inset: 70px;
    }

    .safety-zero-harm-circle::after {
        inset: 140px;
    }

.safety-zero-harm .container {
    position: relative;
    z-index: 2;
}

.safety-zero-harm-content {
    max-width: 600px;
}

    .safety-zero-harm-content h2 {
        margin-bottom: 25px;
        color: var(--sgc-white);
        font-size: clamp(45px, 5vw, 70px);
        letter-spacing: -3.2px;
    }

        .safety-zero-harm-content h2 span {
            color: var(--sgc-accent);
        }

    .safety-zero-harm-content > p {
        margin-bottom: 16px;
        color: rgba(255, 255, 255, 0.62);
        font-size: 14px;
        line-height: 1.9;
    }

.safety-zero-harm-message {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 30px 0 35px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--sgc-accent);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.05);
}

    .safety-zero-harm-message > span {
        color: var(--sgc-accent);
        font-size: 18px;
    }

    .safety-zero-harm-message p {
        margin: 0;
        color: rgba(255, 255, 255, 0.72);
        font-family: "Space Grotesk", sans-serif;
        font-size: 14px;
        line-height: 1.75;
    }

.safety-zero-harm-wheel {
    position: relative;
    min-height: 590px;
    margin-left: 35px;
}

.safety-zero-harm-center {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    display: flex;
    width: 190px;
    height: 190px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid rgba(245, 166, 35, 0.32);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(21, 101, 192, 0.23), rgba(5, 24, 43, 0.95) );
    box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.025), 0 30px 65px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
}

    .safety-zero-harm-center > span {
        display: inline-flex;
        width: 57px;
        height: 57px;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        border-radius: 17px;
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent);
        font-size: 22px;
    }

    .safety-zero-harm-center strong {
        color: var(--sgc-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 23px;
    }

    .safety-zero-harm-center small {
        margin-top: 5px;
        color: rgba(255, 255, 255, 0.46);
        font-size: 8px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }

.safety-zero-harm-node {
    position: absolute;
    z-index: 6;
    display: flex;
    width: 225px;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    transition: all 0.35s ease;
}

    .safety-zero-harm-node:hover {
        border-color: rgba(245, 166, 35, 0.36);
        background: rgba(255, 255, 255, 0.09);
        transform: translateY(-5px);
    }

.safety-zero-harm-node-one {
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
}

    .safety-zero-harm-node-one:hover {
        transform: translateX(-50%) translateY(-5px);
    }

.safety-zero-harm-node-two {
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
}

    .safety-zero-harm-node-two:hover {
        transform: translateY(-50%) translateX(5px);
    }

.safety-zero-harm-node-three {
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
}

    .safety-zero-harm-node-three:hover {
        transform: translateX(-50%) translateY(-5px);
    }

.safety-zero-harm-node-four {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
}

    .safety-zero-harm-node-four:hover {
        transform: translateY(-50%) translateX(-5px);
    }

.safety-zero-harm-node-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
}

.safety-zero-harm-node > div {
    display: flex;
    flex-direction: column;
}

.safety-zero-harm-node strong {
    color: var(--sgc-white);
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
}

.safety-zero-harm-node small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 8px;
}

.safety-zero-harm-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.safety-zero-harm-orbit-one {
    width: 365px;
    height: 365px;
    animation: safetyOrbitRotate 30s linear infinite;
}

.safety-zero-harm-orbit-two {
    width: 500px;
    height: 500px;
    border-color: rgba(245, 166, 35, 0.09);
    animation: safetyOrbitReverse 38s linear infinite;
}

@keyframes safetyOrbitRotate {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes safetyOrbitReverse {
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* =========================================================
   POLICY OBJECTIVES
========================================================= */

.safety-policy-objectives {
    position: relative;
    overflow: hidden;
    padding: 125px 0;
    background: var(--sgc-surface);
}

.safety-policy-bg-text {
    position: absolute;
    top: 0;
    right: 2%;
    color: rgba(11, 42, 74, 0.025);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(140px, 22vw, 350px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -18px;
    pointer-events: none;
}

.safety-policy-objectives .container {
    position: relative;
    z-index: 2;
}

.safety-policy-card {
    position: relative;
    height: 100%;
    min-height: 285px;
    overflow: hidden;
    padding: 34px 30px 31px;
    border: 1px solid var(--sgc-border);
    border-radius: 23px;
    background: var(--sgc-white);
    box-shadow: 0 10px 32px rgba(11, 42, 74, 0.045);
    transition: all 0.42s ease;
}

    .safety-policy-card::before {
        position: absolute;
        right: -65px;
        bottom: -65px;
        width: 165px;
        height: 165px;
        border: 1px solid rgba(21, 101, 192, 0.07);
        border-radius: 50%;
        content: "";
        transition: all 0.45s ease;
    }

    .safety-policy-card:hover {
        border-color: rgba(245, 166, 35, 0.5);
        box-shadow: var(--sgc-shadow-lg);
        transform: translateY(-9px);
    }

        .safety-policy-card:hover::before {
            width: 220px;
            height: 220px;
            border-color: rgba(245, 166, 35, 0.18);
        }

.safety-policy-number {
    position: absolute;
    top: 27px;
    right: 28px;
    color: var(--sgc-text-muted);
    font-size: 10px;
    font-weight: 800;
}

.safety-policy-icon {
    display: inline-flex;
    width: 59px;
    height: 59px;
    align-items: center;
    justify-content: center;
    margin-bottom: 29px;
    border-radius: 17px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    font-size: 21px;
    box-shadow: 0 12px 28px rgba(245, 166, 35, 0.23);
}

.safety-policy-card h3 {
    margin-bottom: 14px;
    font-size: 23px;
    letter-spacing: -0.7px;
}

.safety-policy-card p {
    margin-bottom: 27px;
    color: var(--sgc-text-soft);
    font-size: 11px;
    line-height: 1.8;
}

.safety-policy-line {
    position: absolute;
    right: 30px;
    bottom: 27px;
    left: 30px;
    height: 2px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--sgc-border);
}

    .safety-policy-line::after {
        display: block;
        width: 34%;
        height: 100%;
        border-radius: inherit;
        background: var(--sgc-accent);
        content: "";
        transition: width 0.4s ease;
    }

.safety-policy-card:hover
.safety-policy-line::after {
    width: 100%;
}

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

.safety-pillars {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    color: var(--sgc-white);
    background: radial-gradient( circle at 12% 38%, rgba(21, 101, 192, 0.22), transparent 34% ), var(--sgc-primary-dark);
}

.safety-pillars-grid {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: linear-gradient( rgba(255, 255, 255, 0.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px );
    background-size: 76px 76px;
}

.safety-pillars::after {
    position: absolute;
    top: -210px;
    right: -140px;
    width: 540px;
    height: 540px;
    border: 1px solid rgba(245, 166, 35, 0.13);
    border-radius: 50%;
    content: "";
}

.safety-pillars .container {
    position: relative;
    z-index: 2;
}

.safety-pillars-layout {
    display: grid;
    align-items: stretch;
    grid-template-columns: 0.92fr 1.45fr;
    gap: 28px;
}

.safety-pillars-navigation {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.safety-pillar-tab {
    display: grid;
    min-height: 92px;
    align-items: center;
    grid-template-columns: 35px 50px 1fr 22px;
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    color: var(--sgc-white);
    background: rgba(255, 255, 255, 0.045);
    text-align: left;
    cursor: pointer;
    transition: all 0.35s ease;
}

    .safety-pillar-tab:hover,
    .safety-pillar-tab.active {
        border-color: rgba(245, 166, 35, 0.36);
        background: rgba(255, 255, 255, 0.09);
        transform: translateX(7px);
    }

.safety-pillar-tab-number {
    color: rgba(255, 255, 255, 0.34);
    font-size: 10px;
    font-weight: 800;
}

.safety-pillar-tab:hover
.safety-pillar-tab-number,
.safety-pillar-tab.active
.safety-pillar-tab-number {
    color: var(--sgc-accent);
}

.safety-pillar-tab-icon {
    display: inline-flex;
    width: 49px;
    height: 49px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--sgc-accent);
    background: rgba(245, 166, 35, 0.1);
    transition: all 0.35s ease;
}

.safety-pillar-tab:hover
.safety-pillar-tab-icon,
.safety-pillar-tab.active
.safety-pillar-tab-icon {
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
}

.safety-pillar-tab-content {
    display: flex;
    flex-direction: column;
}

    .safety-pillar-tab-content strong {
        color: var(--sgc-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 13px;
    }

    .safety-pillar-tab-content small {
        margin-top: 4px;
        color: rgba(255, 255, 255, 0.43);
        font-size: 8px;
    }

.safety-pillar-tab-arrow {
    color: rgba(255, 255, 255, 0.23);
    font-size: 11px;
    transition: all 0.3s ease;
}

.safety-pillar-tab:hover
.safety-pillar-tab-arrow,
.safety-pillar-tab.active
.safety-pillar-tab-arrow {
    color: var(--sgc-accent);
    transform: translateX(4px);
}

.safety-pillars-content {
    position: relative;
    min-height: 610px;
}

.safety-pillar-panel {
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
}

    .safety-pillar-panel[hidden] {
        display: none !important;
    }

.safety-pillar-panel-image {
    position: relative;
    height: 310px;
    overflow: hidden;
}

    .safety-pillar-panel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.75s ease;
    }

.safety-pillar-panel:hover
.safety-pillar-panel-image img {
    transform: scale(1.055);
}

.safety-pillar-panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(4, 18, 34, 0.78), transparent 62% );
}

.safety-pillar-panel-label {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    color: var(--sgc-white);
    background: rgba(4, 18, 34, 0.58);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.safety-pillar-panel-body {
    position: relative;
    padding: 43px 35px 37px;
}

.safety-pillar-panel-icon {
    position: absolute;
    top: -30px;
    left: 35px;
    display: inline-flex;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    border: 6px solid var(--sgc-primary-dark);
    border-radius: 18px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    font-size: 20px;
}

.safety-pillar-panel-body > small {
    color: var(--sgc-accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.safety-pillar-panel-body h3 {
    max-width: 620px;
    margin: 9px 0 15px;
    color: var(--sgc-white);
    font-size: 28px;
    letter-spacing: -0.9px;
}

.safety-pillar-panel-body > p {
    margin-bottom: 23px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
    line-height: 1.8;
}

.safety-pillar-panel-body ul {
    display: grid;
    list-style: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 18px;
}

.safety-pillar-panel-body li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 9px;
    font-weight: 700;
}

    .safety-pillar-panel-body li i {
        display: inline-flex;
        width: 23px;
        height: 23px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent);
        font-size: 8px;
    }

/* =========================================================
   PART 3A ENDS HERE
   PART 3B CONTINUES BELOW
========================================================= */
/* =========================================================
   DAILY SAFETY PRACTICES
========================================================= */

.safety-practices {
    position: relative;
    overflow: hidden;
    padding: 125px 0;
    background: var(--sgc-white);
}

.safety-practices-pattern {
    position: absolute;
    top: -170px;
    left: -190px;
    width: 510px;
    height: 510px;
    border: 1px solid rgba(21, 101, 192, 0.07);
    border-radius: 50%;
}

    .safety-practices-pattern::before,
    .safety-practices-pattern::after {
        position: absolute;
        border: 1px solid rgba(21, 101, 192, 0.07);
        border-radius: 50%;
        content: "";
    }

    .safety-practices-pattern::before {
        inset: 62px;
    }

    .safety-practices-pattern::after {
        inset: 125px;
    }

.safety-practices .container {
    position: relative;
    z-index: 2;
}

.safety-practice-card {
    position: relative;
    height: 100%;
    min-height: 355px;
    overflow: hidden;
    padding: 32px 30px 31px;
    border: 1px solid var(--sgc-border);
    border-radius: 23px;
    background: linear-gradient( 145deg, var(--sgc-white), #f8fbfd );
    box-shadow: 0 11px 34px rgba(11, 42, 74, 0.05);
    transition: all 0.42s ease;
}

    .safety-practice-card::before {
        position: absolute;
        right: -72px;
        bottom: -72px;
        width: 180px;
        height: 180px;
        border: 1px solid rgba(21, 101, 192, 0.07);
        border-radius: 50%;
        content: "";
        transition: all 0.45s ease;
    }

    .safety-practice-card::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 4px;
        background: linear-gradient( 90deg, var(--sgc-accent), var(--sgc-secondary) );
        content: "";
        transition: width 0.45s ease;
    }

    .safety-practice-card:hover {
        border-color: rgba(245, 166, 35, 0.48);
        box-shadow: var(--sgc-shadow-lg);
        transform: translateY(-9px);
    }

        .safety-practice-card:hover::before {
            width: 235px;
            height: 235px;
            border-color: rgba(245, 166, 35, 0.18);
        }

        .safety-practice-card:hover::after {
            width: 100%;
        }

.safety-practice-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.safety-practice-number {
    color: var(--sgc-text-muted);
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.safety-practice-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    font-size: 20px;
    box-shadow: 0 12px 27px rgba(245, 166, 35, 0.24);
    transition: all 0.4s ease;
}

.safety-practice-card:hover
.safety-practice-icon {
    color: var(--sgc-white);
    background: var(--sgc-secondary);
    transform: rotate(-5deg) scale(1.05);
}

.safety-practice-card h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 14px;
    font-size: 24px;
    letter-spacing: -0.75px;
}

.safety-practice-card > p {
    position: relative;
    z-index: 2;
    margin-bottom: 22px;
    color: var(--sgc-text-soft);
    font-size: 11px;
    line-height: 1.8;
}

.safety-practice-card ul {
    position: relative;
    z-index: 2;
    list-style: none;
}

.safety-practice-card li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--sgc-primary);
    font-size: 9px;
    font-weight: 700;
}

    .safety-practice-card li + li {
        margin-top: 11px;
    }

    .safety-practice-card li i {
        display: inline-flex;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent-soft);
        font-size: 7px;
    }

/* =========================================================
   PPE STANDARDS
========================================================= */

.safety-ppe {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    color: var(--sgc-white);
    background: radial-gradient( circle at 13% 35%, rgba(21, 101, 192, 0.24), transparent 34% ), var(--sgc-primary-dark);
}

.safety-ppe-grid {
    position: absolute;
    inset: 0;
    opacity: 0.21;
    background-image: linear-gradient( rgba(255, 255, 255, 0.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px );
    background-size: 76px 76px;
}

.safety-ppe-circle {
    position: absolute;
    top: -230px;
    right: -120px;
    width: 580px;
    height: 580px;
    border: 1px solid rgba(245, 166, 35, 0.12);
    border-radius: 50%;
}

    .safety-ppe-circle::before,
    .safety-ppe-circle::after {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 50%;
        content: "";
    }

    .safety-ppe-circle::before {
        inset: 72px;
    }

    .safety-ppe-circle::after {
        inset: 145px;
    }

.safety-ppe .container {
    position: relative;
    z-index: 2;
}

.safety-ppe-visual {
    position: relative;
    min-height: 670px;
    padding-right: 40px;
}

.safety-ppe-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 86%;
    height: 620px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 145px 28px 28px 28px;
    box-shadow: 0 35px 85px rgba(0, 0, 0, 0.34);
}

    .safety-ppe-image::after {
        position: absolute;
        z-index: 3;
        inset: 17px;
        border: 1px solid rgba(255, 255, 255, 0.17);
        border-radius: 130px 19px 19px 19px;
        content: "";
        pointer-events: none;
    }

    .safety-ppe-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

.safety-ppe-visual:hover
.safety-ppe-image img {
    transform: scale(1.045);
}

.safety-ppe-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(4, 18, 34, 0.7), transparent 55% ), linear-gradient( 105deg, rgba(4, 18, 34, 0.22), transparent );
}

.safety-ppe-marker {
    position: absolute;
    z-index: 5;
    display: flex;
    width: 230px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    color: var(--sgc-white);
    background: rgba(4, 21, 38, 0.76);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
    transition: all 0.35s ease;
}

    .safety-ppe-marker:hover {
        border-color: rgba(245, 166, 35, 0.4);
        transform: translateX(5px);
    }

    .safety-ppe-marker > span {
        display: inline-flex;
        width: 43px;
        height: 43px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent);
        font-size: 10px;
        font-weight: 800;
    }

    .safety-ppe-marker > div {
        display: flex;
        flex-direction: column;
    }

    .safety-ppe-marker strong {
        color: var(--sgc-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 10px;
    }

    .safety-ppe-marker small {
        margin-top: 4px;
        color: rgba(255, 255, 255, 0.45);
        font-size: 8px;
    }

.safety-ppe-marker-one {
    top: 75px;
    right: 0;
}

.safety-ppe-marker-two {
    top: 295px;
    left: -22px;
}

.safety-ppe-marker-three {
    right: 5px;
    bottom: 85px;
}

.safety-ppe-compliance {
    position: absolute;
    z-index: 6;
    bottom: 0;
    left: 34px;
    display: flex;
    width: 285px;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    color: var(--sgc-white);
    background: linear-gradient( 135deg, var(--sgc-accent), #ffbe3f );
    box-shadow: 0 22px 50px rgba(245, 166, 35, 0.28);
}

    .safety-ppe-compliance > span {
        display: inline-flex;
        width: 49px;
        height: 49px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: var(--sgc-white);
        background: rgba(6, 26, 47, 0.2);
        font-size: 19px;
    }

    .safety-ppe-compliance > div {
        display: flex;
        flex-direction: column;
    }

    .safety-ppe-compliance small {
        color: rgba(6, 26, 47, 0.57);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .safety-ppe-compliance strong {
        margin-top: 4px;
        color: var(--sgc-primary-dark);
        font-family: "Space Grotesk", sans-serif;
        font-size: 12px;
    }

.safety-ppe-content {
    max-width: 680px;
    padding-left: 20px;
}

    .safety-ppe-content h2 {
        margin-bottom: 25px;
        color: var(--sgc-white);
        font-size: clamp(45px, 5vw, 70px);
        line-height: 1.07;
        letter-spacing: -3.1px;
    }

        .safety-ppe-content h2 span {
            color: var(--sgc-accent);
        }

    .safety-ppe-content > p {
        margin-bottom: 31px;
        color: rgba(255, 255, 255, 0.62);
        font-size: 14px;
        line-height: 1.9;
    }

.safety-ppe-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.safety-ppe-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.045);
    transition: all 0.35s ease;
}

    .safety-ppe-item:hover {
        border-color: rgba(245, 166, 35, 0.35);
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-4px);
    }

    .safety-ppe-item > span {
        display: inline-flex;
        width: 43px;
        height: 43px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent);
    }

    .safety-ppe-item > div {
        display: flex;
        flex-direction: column;
    }

    .safety-ppe-item strong {
        color: var(--sgc-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 11px;
    }

    .safety-ppe-item small {
        margin-top: 5px;
        color: rgba(255, 255, 255, 0.45);
        font-size: 8px;
        line-height: 1.55;
    }

/* =========================================================
   HIGH-RISK WORK CONTROLS
========================================================= */

.safety-high-risk {
    position: relative;
    overflow: hidden;
    padding: 125px 0;
    background: var(--sgc-surface);
}

    .safety-high-risk::before {
        position: absolute;
        top: -210px;
        right: -180px;
        width: 500px;
        height: 500px;
        border: 1px solid rgba(21, 101, 192, 0.07);
        border-radius: 50%;
        content: "";
    }

.safety-risk-layout {
    display: grid;
    align-items: stretch;
    grid-template-columns: 0.82fr 1.5fr;
    gap: 27px;
}

.safety-risk-navigation {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.safety-risk-tab {
    display: grid;
    min-height: 97px;
    align-items: center;
    grid-template-columns: 51px 1fr 20px;
    gap: 15px;
    padding: 18px;
    border: 1px solid var(--sgc-border);
    border-radius: 18px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-white);
    text-align: left;
    box-shadow: 0 8px 26px rgba(11, 42, 74, 0.035);
    cursor: pointer;
    transition: all 0.35s ease;
}

    .safety-risk-tab:hover,
    .safety-risk-tab.active {
        border-color: rgba(245, 166, 35, 0.5);
        box-shadow: var(--sgc-shadow-md);
        transform: translateX(7px);
    }

    .safety-risk-tab > span {
        display: inline-flex;
        width: 50px;
        height: 50px;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: var(--sgc-accent-dark);
        background: var(--sgc-accent-soft);
        transition: all 0.35s ease;
    }

    .safety-risk-tab:hover > span,
    .safety-risk-tab.active > span {
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent);
    }

    .safety-risk-tab > div {
        display: flex;
        flex-direction: column;
    }

    .safety-risk-tab strong {
        color: var(--sgc-primary-dark);
        font-family: "Space Grotesk", sans-serif;
        font-size: 13px;
    }

    .safety-risk-tab small {
        margin-top: 4px;
        color: var(--sgc-text-muted);
        font-size: 8px;
    }

    .safety-risk-tab > i {
        color: var(--sgc-text-muted);
        font-size: 10px;
        transition: all 0.3s ease;
    }

    .safety-risk-tab:hover > i,
    .safety-risk-tab.active > i {
        color: var(--sgc-accent-dark);
        transform: translateX(4px);
    }

.safety-risk-content {
    min-height: 650px;
}

.safety-risk-panel {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--sgc-border);
    border-radius: 25px;
    background: var(--sgc-white);
    box-shadow: var(--sgc-shadow-lg);
}

    .safety-risk-panel[hidden] {
        display: none !important;
    }

.safety-risk-panel-image {
    position: relative;
    height: 335px;
    overflow: hidden;
}

    .safety-risk-panel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.75s ease;
    }

.safety-risk-panel:hover
.safety-risk-panel-image img {
    transform: scale(1.055);
}

.safety-risk-panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(4, 18, 34, 0.78), transparent 60% );
}

.safety-risk-panel-badge {
    position: absolute;
    top: 22px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: var(--sgc-white);
    background: rgba(4, 18, 34, 0.62);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

    .safety-risk-panel-badge i {
        color: var(--sgc-accent);
    }

.safety-risk-panel-body {
    padding: 36px 35px 38px;
}

    .safety-risk-panel-body > small {
        color: var(--sgc-accent-dark);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.3px;
        text-transform: uppercase;
    }

    .safety-risk-panel-body h3 {
        max-width: 660px;
        margin: 9px 0 15px;
        color: var(--sgc-primary-dark);
        font-size: 29px;
        letter-spacing: -0.95px;
    }

    .safety-risk-panel-body > p {
        margin-bottom: 23px;
        color: var(--sgc-text-soft);
        font-size: 12px;
        line-height: 1.82;
    }

.safety-risk-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 18px;
}

    .safety-risk-checks span {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--sgc-primary);
        font-size: 9px;
        font-weight: 700;
    }

    .safety-risk-checks i {
        display: inline-flex;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent);
        font-size: 8px;
    }

/* =========================================================
   EMERGENCY PREPAREDNESS
========================================================= */

.safety-emergency {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    color: var(--sgc-white);
    background: var(--sgc-primary-dark);
}

.safety-emergency-background {
    position: absolute;
    inset: 0;
}

    .safety-emergency-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.safety-emergency-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(4, 18, 34, 0.98) 0%, rgba(5, 24, 43, 0.92) 48%, rgba(6, 31, 54, 0.72) 100% ), linear-gradient( to top, rgba(4, 18, 34, 0.75), transparent );
}

.safety-emergency-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: linear-gradient( rgba(255, 255, 255, 0.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px );
    background-size: 75px 75px;
}

.safety-emergency .container {
    position: relative;
    z-index: 2;
}

.safety-emergency-wrap {
    display: grid;
    min-height: 720px;
    align-items: center;
    grid-template-columns: 0.85fr 1.35fr;
    gap: 70px;
    padding: 95px 0;
}

.safety-emergency-content {
    max-width: 600px;
}

    .safety-emergency-content h2 {
        margin-bottom: 24px;
        color: var(--sgc-white);
        font-size: clamp(45px, 5vw, 70px);
        line-height: 1.07;
        letter-spacing: -3.1px;
    }

        .safety-emergency-content h2 span {
            color: var(--sgc-accent);
        }

    .safety-emergency-content > p {
        margin-bottom: 33px;
        color: rgba(255, 255, 255, 0.62);
        font-size: 14px;
        line-height: 1.9;
    }

.safety-emergency-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.safety-emergency-step {
    display: grid;
    min-height: 112px;
    align-items: center;
    grid-template-columns: 38px 53px 1fr;
    gap: 16px;
    padding: 20px 21px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(12px);
    transition: all 0.35s ease;
}

    .safety-emergency-step:hover {
        border-color: rgba(245, 166, 35, 0.36);
        background: rgba(255, 255, 255, 0.09);
        transform: translateX(8px);
    }

.safety-emergency-step-number {
    color: rgba(255, 255, 255, 0.36);
    font-size: 10px;
    font-weight: 800;
}

.safety-emergency-step-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    font-size: 18px;
}

.safety-emergency-step strong {
    color: var(--sgc-white);
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
}

.safety-emergency-step p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    line-height: 1.65;
}

/* =========================================================
   QUALITY ASSURANCE
========================================================= */

.quality-assurance {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    background: var(--sgc-white);
}

.quality-assurance-pattern {
    position: absolute;
    top: 50px;
    left: -220px;
    width: 510px;
    height: 510px;
    border: 1px solid rgba(21, 101, 192, 0.07);
    border-radius: 50%;
}

    .quality-assurance-pattern::before,
    .quality-assurance-pattern::after {
        position: absolute;
        border: 1px solid rgba(21, 101, 192, 0.07);
        border-radius: 50%;
        content: "";
    }

    .quality-assurance-pattern::before {
        inset: 62px;
    }

    .quality-assurance-pattern::after {
        inset: 125px;
    }

.quality-assurance .container {
    position: relative;
    z-index: 2;
}

.quality-assurance-content {
    max-width: 700px;
    padding-right: 20px;
}

.quality-assurance-lead {
    margin-bottom: 18px;
    color: var(--sgc-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
}

.quality-assurance-text {
    margin-bottom: 28px;
    color: var(--sgc-text-soft);
    font-size: 14px;
    line-height: 1.9;
}

.quality-assurance-features {
    display: grid;
    margin-bottom: 35px;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.quality-assurance-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--sgc-border);
    border-radius: 15px;
    background: var(--sgc-surface);
    transition: all 0.35s ease;
}

    .quality-assurance-feature:hover {
        border-color: rgba(245, 166, 35, 0.45);
        background: var(--sgc-white);
        box-shadow: var(--sgc-shadow-md);
        transform: translateY(-4px);
    }

    .quality-assurance-feature > span {
        display: inline-flex;
        width: 43px;
        height: 43px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent);
    }

    .quality-assurance-feature strong {
        color: var(--sgc-primary-dark);
        font-family: "Space Grotesk", sans-serif;
        font-size: 11px;
    }

    .quality-assurance-feature small {
        display: block;
        margin-top: 5px;
        color: var(--sgc-text-soft);
        font-size: 8px;
        line-height: 1.55;
    }

.quality-assurance-visual {
    position: relative;
    min-height: 670px;
    padding-left: 35px;
}

.quality-assurance-main-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 84%;
    height: 575px;
    overflow: hidden;
    border-radius: 130px 30px 30px 30px;
    box-shadow: var(--safety-shadow);
}

    .quality-assurance-main-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.quality-assurance-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(4, 18, 34, 0.72), transparent 56% );
}

.quality-assurance-small-image {
    position: absolute;
    z-index: 4;
    bottom: 0;
    left: 0;
    width: 270px;
    height: 305px;
    overflow: hidden;
    border: 9px solid var(--sgc-white);
    border-radius: 27px;
    box-shadow: var(--safety-shadow);
}

    .quality-assurance-small-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.quality-assurance-badge {
    position: absolute;
    z-index: 5;
    top: 60px;
    left: 0;
    display: flex;
    width: 235px;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border-radius: 17px;
    color: var(--sgc-white);
    background: linear-gradient( 145deg, var(--sgc-primary), var(--sgc-primary-dark) );
    box-shadow: var(--safety-shadow);
}

    .quality-assurance-badge > span {
        display: inline-flex;
        width: 49px;
        height: 49px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: var(--sgc-primary-dark);
        background: var(--sgc-accent);
    }

    .quality-assurance-badge > div {
        display: flex;
        flex-direction: column;
    }

    .quality-assurance-badge small {
        color: rgba(255, 255, 255, 0.44);
        font-size: 8px;
    }

    .quality-assurance-badge strong {
        margin-top: 4px;
        color: var(--sgc-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 11px;
    }

.quality-assurance-stat {
    position: absolute;
    z-index: 5;
    right: 15px;
    bottom: 25px;
    width: 175px;
    padding: 21px;
    border-radius: 18px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    box-shadow: 0 20px 48px rgba(245, 166, 35, 0.28);
}

    .quality-assurance-stat strong {
        font-family: "Space Grotesk", sans-serif;
        font-size: 43px;
        line-height: 1;
    }

    .quality-assurance-stat > span {
        margin-left: 3px;
        font-size: 22px;
        font-weight: 800;
    }

    .quality-assurance-stat small {
        display: block;
        margin-top: 9px;
        color: rgba(6, 26, 47, 0.6);
        font-size: 7px;
        font-weight: 800;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }

.quality-assurance-outline {
    position: absolute;
    top: 31px;
    right: -30px;
    width: 175px;
    height: 175px;
    border-top: 2px solid var(--sgc-accent);
    border-right: 2px solid var(--sgc-accent);
}

/* =========================================================
   QA/QC WORKFLOW
========================================================= */

.quality-workflow {
    position: relative;
    overflow: hidden;
    padding: 125px 0;
    background: var(--sgc-surface);
}

.quality-workflow-bg-text {
    position: absolute;
    top: 5px;
    right: 1%;
    color: rgba(11, 42, 74, 0.025);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(100px, 16vw, 245px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -13px;
    pointer-events: none;
}

.quality-workflow .container {
    position: relative;
    z-index: 2;
}

.quality-workflow-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.quality-workflow-step {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    padding: 28px 23px;
    border: 1px solid var(--sgc-border);
    border-radius: 21px;
    background: var(--sgc-white);
    box-shadow: 0 10px 30px rgba(11, 42, 74, 0.045);
    transition: all 0.4s ease;
}

    .quality-workflow-step::before {
        position: absolute;
        right: -55px;
        bottom: -55px;
        width: 145px;
        height: 145px;
        border: 1px solid rgba(21, 101, 192, 0.07);
        border-radius: 50%;
        content: "";
    }

    .quality-workflow-step:hover {
        border-color: rgba(245, 166, 35, 0.5);
        box-shadow: var(--sgc-shadow-lg);
        transform: translateY(-8px);
    }

.quality-workflow-number {
    position: absolute;
    top: 24px;
    right: 24px;
    color: var(--sgc-text-muted);
    font-size: 9px;
    font-weight: 800;
}

.quality-workflow-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
    border-radius: 16px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    font-size: 19px;
    box-shadow: 0 11px 26px rgba(245, 166, 35, 0.22);
}

.quality-workflow-content {
    position: relative;
    z-index: 2;
}

    .quality-workflow-content > small {
        color: var(--sgc-accent-dark);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .quality-workflow-content h3 {
        margin: 7px 0 13px;
        font-size: 20px;
        letter-spacing: -0.6px;
    }

    .quality-workflow-content p {
        margin: 0;
        color: var(--sgc-text-soft);
        font-size: 9px;
        line-height: 1.72;
    }

.quality-workflow-arrow {
    position: absolute;
    z-index: 4;
    top: 48%;
    right: -23px;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sgc-border);
    border-radius: 50%;
    color: var(--sgc-accent-dark);
    background: var(--sgc-white);
    font-size: 9px;
    box-shadow: var(--sgc-shadow-sm);
}

.quality-workflow-step:last-child
.quality-workflow-arrow {
    display: none;
}

/* =========================================================
   PART 3B ENDS HERE
   PART 4A CONTINUES BELOW
========================================================= */

/* =========================================================
   CRITICAL QUALITY CONTROLS
========================================================= */

.quality-controls {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    color: var(--sgc-white);
    background: radial-gradient( circle at 12% 38%, rgba(21, 101, 192, 0.24), transparent 34% ), var(--sgc-primary-dark);
}

    .quality-controls::before {
        position: absolute;
        top: -210px;
        right: -130px;
        width: 540px;
        height: 540px;
        border: 1px solid rgba(245, 166, 35, 0.13);
        border-radius: 50%;
        content: "";
    }

    .quality-controls::after {
        position: absolute;
        right: 6%;
        bottom: -250px;
        width: 430px;
        height: 430px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        transform: rotate(45deg);
        content: "";
    }

.quality-controls-grid {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: linear-gradient( rgba(255, 255, 255, 0.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px );
    background-size: 76px 76px;
}

.quality-controls .container {
    position: relative;
    z-index: 2;
}

.quality-controls-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 19px;
}

.quality-control-card {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    padding: 31px 27px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
    transition: all 0.42s ease;
}

    .quality-control-card::before {
        position: absolute;
        right: -66px;
        bottom: -66px;
        width: 170px;
        height: 170px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 50%;
        content: "";
        transition: all 0.45s ease;
    }

    .quality-control-card::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 3px;
        background: linear-gradient( 90deg, var(--sgc-accent), #ffd675 );
        content: "";
        transition: width 0.45s ease;
    }

    .quality-control-card:hover {
        border-color: rgba(245, 166, 35, 0.4);
        background: rgba(255, 255, 255, 0.085);
        box-shadow: 0 24px 55px rgba(0, 0, 0, 0.22);
        transform: translateY(-9px);
    }

        .quality-control-card:hover::before {
            width: 225px;
            height: 225px;
            border-color: rgba(245, 166, 35, 0.16);
        }

        .quality-control-card:hover::after {
            width: 100%;
        }

.quality-control-number {
    position: absolute;
    top: 26px;
    right: 27px;
    color: rgba(255, 255, 255, 0.32);
    font-size: 9px;
    font-weight: 800;
}

.quality-control-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    border-radius: 17px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    font-size: 20px;
    box-shadow: 0 12px 28px rgba(245, 166, 35, 0.24);
    transition: all 0.4s ease;
}

.quality-control-card:hover
.quality-control-icon {
    color: var(--sgc-white);
    background: var(--sgc-secondary);
    transform: rotate(-5deg) scale(1.05);
}

.quality-control-card h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 14px;
    color: var(--sgc-white);
    font-size: 23px;
    letter-spacing: -0.7px;
}

.quality-control-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    line-height: 1.8;
}

/* =========================================================
   ENVIRONMENTAL RESPONSIBILITY
========================================================= */

.safety-environment {
    position: relative;
    overflow: hidden;
    padding: 125px 0;
    background: var(--sgc-surface);
}

    .safety-environment::before {
        position: absolute;
        top: -180px;
        left: -170px;
        width: 490px;
        height: 490px;
        border: 1px solid rgba(33, 170, 115, 0.09);
        border-radius: 50%;
        content: "";
    }

    .safety-environment::after {
        position: absolute;
        right: -180px;
        bottom: -220px;
        width: 470px;
        height: 470px;
        border: 1px solid rgba(21, 101, 192, 0.07);
        border-radius: 50%;
        content: "";
    }

.safety-environment-card {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 650px;
    overflow: hidden;
    border: 1px solid var(--sgc-border);
    border-radius: 32px;
    background: var(--sgc-white);
    box-shadow: var(--sgc-shadow-lg);
    grid-template-columns: 1fr 1fr;
}

.safety-environment-image {
    position: relative;
    min-height: 650px;
    overflow: hidden;
}

    .safety-environment-image > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.85s ease;
    }

.safety-environment-card:hover
.safety-environment-image > img {
    transform: scale(1.045);
}

.safety-environment-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(4, 18, 34, 0.76), transparent 58% ), linear-gradient( 105deg, rgba(4, 18, 34, 0.2), transparent );
}

.safety-environment-badge {
    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    color: var(--sgc-white);
    background: rgba(5, 24, 43, 0.76);
    backdrop-filter: blur(15px);
}

    .safety-environment-badge > i {
        display: inline-flex;
        width: 51px;
        height: 51px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: var(--sgc-white);
        background: var(--safety-green);
        font-size: 19px;
        box-shadow: 0 11px 25px rgba(33, 170, 115, 0.25);
    }

    .safety-environment-badge > span {
        display: flex;
        flex-direction: column;
    }

    .safety-environment-badge small {
        color: rgba(255, 255, 255, 0.46);
        font-size: 8px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .safety-environment-badge strong {
        margin-top: 4px;
        color: var(--sgc-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 14px;
    }

.safety-environment-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 62px;
}

    .safety-environment-content > p {
        margin-bottom: 29px;
        color: var(--sgc-text-soft);
        font-size: 14px;
        line-height: 1.9;
    }

.safety-environment-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

    .safety-environment-list > div {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 15px;
        border: 1px solid var(--sgc-border);
        border-radius: 15px;
        background: var(--sgc-surface);
        transition: all 0.35s ease;
    }

        .safety-environment-list > div:hover {
            border-color: rgba(33, 170, 115, 0.4);
            background: var(--sgc-white);
            box-shadow: var(--sgc-shadow-md);
            transform: translateY(-4px);
        }

        .safety-environment-list > div > span {
            display: inline-flex;
            width: 42px;
            height: 42px;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            color: var(--sgc-white);
            background: var(--safety-green);
            font-size: 15px;
        }

        .safety-environment-list > div > div {
            display: flex;
            flex-direction: column;
        }

    .safety-environment-list strong {
        color: var(--sgc-primary-dark);
        font-family: "Space Grotesk", sans-serif;
        font-size: 11px;
    }

    .safety-environment-list small {
        margin-top: 5px;
        color: var(--sgc-text-soft);
        font-size: 8px;
        line-height: 1.55;
    }

/* =========================================================
   PERFORMANCE NUMBERS
========================================================= */

.safety-performance {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    color: var(--sgc-white);
    background: linear-gradient( 120deg, var(--sgc-primary-dark), var(--sgc-primary) );
}

    .safety-performance::after {
        position: absolute;
        top: -180px;
        right: -150px;
        width: 450px;
        height: 450px;
        border: 1px solid rgba(245, 166, 35, 0.14);
        border-radius: 50%;
        content: "";
    }

.safety-performance-grid {
    position: absolute;
    inset: 0;
    opacity: 0.23;
    background-image: linear-gradient( rgba(255, 255, 255, 0.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px );
    background-size: 68px 68px;
}

.safety-performance-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    align-items: center;
    grid-template-columns: 0.9fr 1.55fr;
    gap: 65px;
}

.safety-performance-heading {
    max-width: 580px;
}

    .safety-performance-heading h2 {
        margin-bottom: 20px;
        color: var(--sgc-white);
        font-size: clamp(40px, 4.5vw, 61px);
        line-height: 1.08;
        letter-spacing: -2.6px;
    }

        .safety-performance-heading h2 span {
            color: var(--sgc-accent);
        }

    .safety-performance-heading > p {
        margin: 0;
        color: rgba(255, 255, 255, 0.56);
        font-size: 13px;
        line-height: 1.85;
    }

.safety-performance-numbers {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.045);
    grid-template-columns: repeat(4, 1fr);
    backdrop-filter: blur(10px);
}

.safety-performance-item {
    position: relative;
    min-height: 245px;
    padding: 30px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

    .safety-performance-item:last-child {
        border-right: 0;
    }

    .safety-performance-item:hover {
        background: rgba(255, 255, 255, 0.075);
    }

.safety-performance-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 31px;
    border-radius: 14px;
    color: var(--sgc-primary-dark);
    background: var(--sgc-accent);
    font-size: 17px;
}

.safety-performance-item > div {
    display: flex;
    align-items: flex-start;
}

.safety-performance-item strong {
    color: var(--sgc-white);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 4vw, 61px);
    line-height: 1;
}

.safety-performance-item > div > span {
    margin: 3px 0 0 4px;
    color: var(--sgc-accent);
    font-size: 22px;
    font-weight: 800;
}

.safety-performance-item p {
    margin: 17px 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* =========================================================
   SAFETY CULTURE STATEMENT
========================================================= */

.safety-culture {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: var(--sgc-white);
}

    .safety-culture::before {
        position: absolute;
        top: -200px;
        right: -150px;
        width: 470px;
        height: 470px;
        border: 1px solid rgba(21, 101, 192, 0.07);
        border-radius: 50%;
        content: "";
    }

    .safety-culture::after {
        position: absolute;
        bottom: -180px;
        left: -150px;
        width: 420px;
        height: 420px;
        border: 1px solid rgba(245, 166, 35, 0.09);
        transform: rotate(45deg);
        content: "";
    }

.safety-culture-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    grid-template-columns: 150px 1fr;
    gap: 48px;
}

.safety-culture-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .safety-culture-icon > span {
        position: relative;
        display: inline-flex;
        width: 130px;
        height: 130px;
        align-items: center;
        justify-content: center;
        border-radius: 35px;
        color: var(--sgc-primary-dark);
        background: linear-gradient( 145deg, var(--sgc-accent), #ffc75a );
        box-shadow: 0 24px 55px rgba(245, 166, 35, 0.28);
        font-size: 42px;
        transform: rotate(-6deg);
    }

        .safety-culture-icon > span::before {
            position: absolute;
            inset: -14px;
            border: 1px solid rgba(245, 166, 35, 0.27);
            border-radius: 42px;
            content: "";
        }

.safety-culture-content > span {
    display: inline-block;
    margin-bottom: 17px;
    color: var(--sgc-accent-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.safety-culture-content blockquote {
    margin: 0 0 27px;
    color: var(--sgc-primary-dark);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(29px, 3.3vw, 45px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1.4px;
}

.safety-culture-signature {
    display: flex;
    align-items: center;
    gap: 15px;
}

.safety-culture-signature-line {
    width: 50px;
    height: 2px;
    border-radius: 5px;
    background: var(--sgc-accent);
}

.safety-culture-signature strong {
    color: var(--sgc-text-soft);
    font-size: 11px;
    font-weight: 700;
}

/* =========================================================
   FINAL CALL TO ACTION
========================================================= */

.safety-final-cta {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    color: var(--sgc-white);
    background: linear-gradient( 110deg, #0b4778, var(--sgc-secondary) );
}

.safety-final-cta-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: linear-gradient( rgba(255, 255, 255, 0.06) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px );
    background-size: 70px 70px;
}

.safety-final-cta-circle {
    position: absolute;
    top: -190px;
    right: 4%;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
}

    .safety-final-cta-circle::before,
    .safety-final-cta-circle::after {
        position: absolute;
        border: 1px solid rgba(245, 166, 35, 0.16);
        border-radius: 50%;
        content: "";
    }

    .safety-final-cta-circle::before {
        inset: 62px;
    }

    .safety-final-cta-circle::after {
        inset: 125px;
    }

.safety-final-cta-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 55px;
}

.safety-final-cta-content > span {
    display: inline-block;
    margin-bottom: 14px;
    color: #d7eaff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.safety-final-cta-content h2 {
    max-width: 830px;
    margin: 0;
    color: var(--sgc-white);
    font-size: clamp(43px, 5vw, 71px);
    line-height: 1.07;
    letter-spacing: -3px;
}

    .safety-final-cta-content h2 strong {
        color: var(--sgc-accent);
    }

.safety-final-cta-actions {
    display: flex;
    min-width: 275px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.safety-final-contact {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--sgc-white);
}

    .safety-final-contact > span {
        display: inline-flex;
        width: 47px;
        height: 47px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.17);
        border-radius: 13px;
        color: var(--sgc-accent);
        background: rgba(255, 255, 255, 0.07);
    }

    .safety-final-contact > div {
        display: flex;
        flex-direction: column;
    }

    .safety-final-contact small {
        color: rgba(255, 255, 255, 0.46);
        font-size: 8px;
    }

    .safety-final-contact strong {
        margin-top: 4px;
        color: var(--sgc-white);
        font-size: 13px;
    }

    .safety-final-contact:hover {
        color: var(--sgc-accent);
        transform: translateX(5px);
    }

/* Hide layout global CTA on this page */
body[data-controller="Home"][data-action="Safety"]
.sgc-global-cta {
    display: none;
}

/* =========================================================
   TAB PANEL TRANSITIONS
========================================================= */

.safety-pillar-panel,
.safety-risk-panel {
    animation: safetyPanelFade 0.48s ease;
}

@keyframes safetyPanelFade {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   IMAGE FALLBACK
========================================================= */

.safety-image-error {
    min-height: 100%;
    padding: 25px;
    background: linear-gradient( 135deg, var(--sgc-primary-dark), var(--sgc-secondary) ) !important;
}

/* =========================================================
   LARGE DESKTOP RESPONSIVE
========================================================= */

@media (max-width: 1499.98px) {

    .safety-hero-title {
        font-size: 86px;
    }

    .safety-hero-card {
        width: 385px;
    }

    .safety-hero-floating-card-one {
        left: -10px;
    }

    .safety-hero-rotating-badge {
        left: 0;
    }

    .safety-commitment-visual {
        padding-right: 35px;
    }

    .quality-controls-grid-layout {
        gap: 16px;
    }

    .quality-control-card {
        padding-right: 23px;
        padding-left: 23px;
    }

    .safety-environment-content {
        padding: 52px;
    }

    .safety-performance-wrap {
        gap: 40px;
    }
}

/* =========================================================
   STANDARD DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1399.98px) {

    .safety-section-title {
        font-size: 57px;
    }

    .safety-hero-title {
        font-size: 78px;
        letter-spacing: -4.2px;
    }

    .safety-hero-description {
        font-size: 15px;
    }

    .safety-hero-assurance {
        gap: 15px;
    }

    .safety-hero-assurance-item small {
        display: none;
    }

    .safety-hero-visual {
        margin-left: 0;
    }

    .safety-hero-card {
        width: 360px;
    }

    .safety-hero-card-body strong {
        font-size: 52px;
    }

    .safety-hero-floating-card {
        width: 210px;
    }

    .safety-hero-floating-card-one {
        left: -5px;
    }

    .safety-trust-strip-wrap {
        gap: 28px;
    }

    .safety-trust-intro {
        min-width: 210px;
        padding-right: 24px;
    }

    .safety-commitment-main-image {
        width: 80%;
    }

    .safety-zero-harm-wheel {
        margin-left: 10px;
    }

    .safety-zero-harm-node {
        width: 205px;
    }

    .safety-pillars-layout {
        grid-template-columns: 0.88fr 1.4fr;
    }

    .safety-pillar-panel-body {
        padding-right: 29px;
        padding-left: 29px;
    }

    .safety-ppe-visual {
        padding-right: 20px;
    }

    .safety-ppe-marker {
        width: 210px;
    }

    .safety-risk-layout {
        grid-template-columns: 0.78fr 1.48fr;
    }

    .quality-assurance-main-image {
        width: 82%;
    }

    .quality-workflow-list {
        gap: 12px;
    }

    .quality-workflow-step {
        padding-right: 19px;
        padding-left: 19px;
    }

    .quality-workflow-content h3 {
        font-size: 18px;
    }

    .quality-controls-grid-layout {
        grid-template-columns: repeat(4, 1fr);
    }

    .quality-control-card {
        min-height: 285px;
    }

    .safety-environment-content {
        padding: 45px;
    }

    .safety-performance-item {
        padding-right: 19px;
        padding-left: 19px;
    }
}

/* =========================================================
   TABLET LANDSCAPE / SMALL LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .safety-hero {
        min-height: 920px;
    }

    .safety-hero-container {
        min-height: 830px;
        padding-top: 70px;
        padding-bottom: 140px;
    }

    .safety-hero-title {
        font-size: 68px;
        letter-spacing: -3.6px;
    }

    .safety-hero-visual {
        min-height: 540px;
    }

    .safety-hero-card {
        top: 55px;
        width: 330px;
    }

    .safety-hero-floating-card-one {
        top: 18px;
        left: -15px;
    }

    .safety-hero-floating-card-two {
        right: 0;
    }

    .safety-hero-rotating-badge {
        width: 115px;
        height: 115px;
    }

    .safety-hero-bottom-wrap {
        gap: 28px;
    }

    .safety-hero-bottom-item:nth-child(3) {
        display: none;
    }

    .safety-trust-strip-wrap {
        align-items: flex-start;
        flex-direction: column;
    }

    .safety-trust-intro {
        width: 100%;
        padding-right: 0;
        padding-bottom: 17px;
        border-right: 0;
        border-bottom: 1px solid var(--sgc-border);
    }

    .safety-commitment-visual {
        min-height: 595px;
    }

    .safety-commitment-main-image {
        height: 510px;
    }

    .safety-commitment-small-image {
        width: 230px;
        height: 260px;
    }

    .safety-commitment-stat-card {
        width: 160px;
    }

    .safety-zero-harm-wheel {
        min-height: 540px;
    }

    .safety-zero-harm-orbit-one {
        width: 330px;
        height: 330px;
    }

    .safety-zero-harm-orbit-two {
        width: 450px;
        height: 450px;
    }

    .safety-zero-harm-node {
        width: 190px;
    }

    .safety-policy-card {
        min-height: 275px;
    }

    .safety-pillars-layout {
        grid-template-columns: 1fr;
    }

    .safety-pillars-navigation {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .safety-pillars-content {
        min-height: 590px;
    }

    .safety-ppe-visual {
        min-height: 600px;
    }

    .safety-ppe-image {
        height: 550px;
    }

    .safety-ppe-marker-one {
        right: 10px;
    }

    .safety-ppe-marker-three {
        right: 10px;
    }

    .safety-risk-layout {
        grid-template-columns: 1fr;
    }

    .safety-risk-navigation {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .safety-risk-content {
        min-height: 630px;
    }

    .safety-emergency-wrap {
        gap: 40px;
    }

    .quality-assurance-visual {
        min-height: 590px;
    }

    .quality-assurance-main-image {
        height: 510px;
    }

    .quality-assurance-small-image {
        width: 230px;
        height: 260px;
    }

    .quality-workflow-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .quality-workflow-step:nth-child(3)
    .quality-workflow-arrow {
        display: none;
    }

    .quality-workflow-step {
        min-height: 285px;
    }

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

    .safety-environment-card {
        min-height: 610px;
    }

    .safety-environment-image {
        min-height: 610px;
    }

    .safety-environment-content {
        padding: 38px;
    }

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

    .safety-performance-wrap {
        grid-template-columns: 1fr;
    }

    .safety-performance-heading {
        max-width: 760px;
    }

    .safety-culture-wrap {
        grid-template-columns: 125px 1fr;
        gap: 35px;
    }

    .safety-culture-icon > span {
        width: 110px;
        height: 110px;
        border-radius: 30px;
    }
}

/* =========================================================
   PART 4A ENDS HERE
   PART 4B CONTINUES BELOW
========================================================= */
/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 991.98px) {

    .safety-section-title {
        font-size: 49px;
        letter-spacing: -2px;
    }

    .safety-section-heading {
        margin-bottom: 48px;
    }

    .safety-hero {
        min-height: 1280px;
    }

    .safety-hero-container {
        min-height: 1185px;
        align-items: flex-start;
        padding-top: 78px;
        padding-bottom: 145px;
    }

        .safety-hero-container > .row {
            width: 100%;
        }

    .safety-hero-content {
        max-width: 820px;
    }

    .safety-hero-title {
        max-width: 850px;
        font-size: 74px;
        letter-spacing: -4px;
    }

    .safety-hero-description {
        max-width: 760px;
    }

    .safety-hero-visual {
        min-height: 565px;
        margin-top: 28px;
    }

    .safety-hero-card {
        top: 45px;
        right: 6%;
        width: 470px;
    }

    .safety-hero-floating-card-one {
        top: 9px;
        left: 8%;
    }

    .safety-hero-floating-card-two {
        right: 4%;
        bottom: 18px;
    }

    .safety-hero-rotating-badge {
        bottom: 40px;
        left: 4%;
    }

    .safety-hero-bottom-item:nth-child(2) {
        display: none;
    }

    .safety-trust-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 25px;
    }

    .safety-commitment,
    .safety-zero-harm,
    .safety-policy-objectives,
    .safety-pillars,
    .safety-practices,
    .safety-ppe,
    .safety-high-risk,
    .quality-assurance,
    .quality-workflow,
    .quality-controls,
    .safety-environment,
    .safety-culture {
        padding-top: 95px;
        padding-bottom: 95px;
    }

    .safety-commitment-content {
        max-width: 820px;
        padding: 30px 0 0;
    }

    .safety-commitment-visual {
        min-height: 650px;
    }

    .safety-commitment-main-image {
        width: 80%;
        height: 555px;
    }

    .safety-commitment-small-image {
        width: 270px;
        height: 300px;
    }

    .safety-zero-harm-content {
        max-width: 820px;
        margin-bottom: 35px;
    }

    .safety-zero-harm-wheel {
        min-height: 610px;
        margin-left: 0;
    }

    .safety-zero-harm-center {
        width: 185px;
        height: 185px;
    }

    .safety-zero-harm-node {
        width: 220px;
    }

    .safety-zero-harm-orbit-one {
        width: 370px;
        height: 370px;
    }

    .safety-zero-harm-orbit-two {
        width: 520px;
        height: 520px;
    }

    .safety-policy-card {
        min-height: 270px;
    }

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

    .safety-pillars-content {
        min-height: 620px;
    }

    .safety-pillar-panel-image {
        height: 330px;
    }

    .safety-practice-card {
        min-height: 345px;
    }

    .safety-ppe-visual {
        min-height: 700px;
        margin-bottom: 25px;
        padding-right: 0;
    }

    .safety-ppe-image {
        width: 82%;
        height: 640px;
    }

    .safety-ppe-marker-one {
        top: 80px;
        right: 5%;
    }

    .safety-ppe-marker-two {
        top: 330px;
        left: 0;
    }

    .safety-ppe-marker-three {
        right: 4%;
        bottom: 105px;
    }

    .safety-ppe-compliance {
        bottom: 8px;
    }

    .safety-ppe-content {
        max-width: 820px;
        padding-left: 0;
    }

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

    .safety-risk-content {
        min-height: 650px;
    }

    .safety-emergency-wrap {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 95px 0;
    }

    .safety-emergency-content {
        max-width: 760px;
    }

    .quality-assurance-content {
        max-width: 820px;
        margin-bottom: 35px;
        padding-right: 0;
    }

    .quality-assurance-visual {
        min-height: 650px;
        padding-left: 0;
    }

    .quality-assurance-main-image {
        width: 82%;
        height: 555px;
    }

    .quality-assurance-small-image {
        width: 270px;
        height: 300px;
    }

    .quality-assurance-badge {
        left: 4%;
    }

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

    .quality-workflow-step:nth-child(2)
    .quality-workflow-arrow,
    .quality-workflow-step:nth-child(4)
    .quality-workflow-arrow {
        display: none;
    }

    .quality-workflow-step:nth-child(3)
    .quality-workflow-arrow {
        display: inline-flex;
    }

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

    .safety-environment-card {
        grid-template-columns: 1fr;
    }

    .safety-environment-image {
        min-height: 520px;
    }

    .safety-environment-content {
        padding: 50px;
    }

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

    .safety-performance {
        padding-top: 90px;
        padding-bottom: 90px;
    }

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

    .safety-performance-item:nth-child(2) {
        border-right: 0;
    }

    .safety-performance-item:nth-child(1),
    .safety-performance-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .safety-culture-wrap {
        grid-template-columns: 110px 1fr;
    }

    .safety-final-cta-wrap {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   MOBILE LANDSCAPE / LARGE MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .safety-section-title {
        font-size: 43px;
        letter-spacing: -1.7px;
    }

    .safety-section-heading > p {
        font-size: 13px;
    }

    .safety-hero {
        min-height: 1240px;
    }

    .safety-hero-container {
        min-height: 1145px;
        padding-top: 68px;
    }

    .safety-breadcrumb {
        margin-bottom: 21px;
    }

    .safety-hero-label {
        font-size: 9px;
        letter-spacing: 1.7px;
    }

    .safety-hero-title {
        font-size: 60px;
        letter-spacing: -3.1px;
    }

    .safety-hero-description {
        font-size: 14px;
    }

    .safety-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .safety-hero-assurance {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .safety-hero-assurance-divider {
        display: none;
    }

    .safety-hero-assurance-item {
        width: calc(50% - 12px);
    }

    .safety-hero-visual {
        min-height: 530px;
    }

    .safety-hero-card {
        top: 55px;
        right: 0;
        width: 86%;
    }

    .safety-hero-floating-card-one {
        left: 0;
    }

    .safety-hero-floating-card-two {
        right: 0;
        bottom: 12px;
    }

    .safety-hero-rotating-badge {
        bottom: 28px;
        left: 0;
        width: 105px;
        height: 105px;
    }

    .safety-hero-card-footer > div {
        min-height: 88px;
        padding: 18px 12px;
    }

    .safety-hero-bottom-wrap {
        min-height: 82px;
    }

    .safety-scroll-indicator span {
        display: none;
    }

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

    .safety-commitment-visual {
        min-height: 540px;
        padding-right: 0;
    }

    .safety-commitment-main-image {
        width: 88%;
        height: 465px;
    }

    .safety-commitment-small-image {
        right: 0;
        width: 210px;
        height: 235px;
    }

    .safety-commitment-stat-card {
        top: 34px;
        width: 145px;
        padding: 18px;
    }

    .safety-commitment-stat-value strong {
        font-size: 42px;
    }

    .safety-commitment-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .safety-zero-harm-wheel {
        min-height: 650px;
    }

    .safety-zero-harm-center {
        width: 165px;
        height: 165px;
    }

        .safety-zero-harm-center strong {
            font-size: 20px;
        }

    .safety-zero-harm-node {
        width: 190px;
    }

    .safety-zero-harm-node-one {
        top: 20px;
    }

    .safety-zero-harm-node-two {
        top: 50%;
        right: -5px;
    }

    .safety-zero-harm-node-three {
        bottom: 20px;
    }

    .safety-zero-harm-node-four {
        left: -5px;
    }

    .safety-zero-harm-orbit-one {
        width: 315px;
        height: 315px;
    }

    .safety-zero-harm-orbit-two {
        width: 455px;
        height: 455px;
    }

    .safety-pillars-navigation {
        grid-template-columns: 1fr;
    }

    .safety-pillar-tab {
        min-height: 86px;
    }

    .safety-pillars-content {
        min-height: 640px;
    }

    .safety-pillar-panel-image {
        height: 300px;
    }

    .safety-pillar-panel-body ul {
        grid-template-columns: 1fr;
    }

    .safety-ppe-visual {
        min-height: 570px;
    }

    .safety-ppe-image {
        width: 90%;
        height: 510px;
        border-radius: 100px 24px 24px 24px;
    }

        .safety-ppe-image::after {
            border-radius: 88px 15px 15px 15px;
        }

    .safety-ppe-marker {
        width: 190px;
    }

    .safety-ppe-marker-one {
        top: 65px;
        right: 0;
    }

    .safety-ppe-marker-two {
        top: 260px;
        left: -5px;
    }

    .safety-ppe-marker-three {
        right: 0;
        bottom: 90px;
    }

    .safety-ppe-compliance {
        bottom: 0;
        left: 20px;
        width: 255px;
    }

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

    .safety-risk-navigation {
        grid-template-columns: 1fr;
    }

    .safety-risk-content {
        min-height: 675px;
    }

    .safety-risk-panel-image {
        height: 300px;
    }

    .safety-risk-checks {
        grid-template-columns: 1fr;
    }

    .safety-emergency-step {
        grid-template-columns: 35px 50px 1fr;
    }

    .quality-assurance-features {
        grid-template-columns: 1fr;
    }

    .quality-assurance-visual {
        min-height: 545px;
    }

    .quality-assurance-main-image {
        width: 89%;
        height: 465px;
        border-radius: 100px 24px 24px 24px;
    }

    .quality-assurance-small-image {
        width: 210px;
        height: 235px;
    }

    .quality-assurance-badge {
        top: 35px;
        left: 0;
        width: 210px;
    }

    .quality-assurance-stat {
        right: 0;
        bottom: 5px;
        width: 150px;
    }

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

    .quality-workflow-step {
        min-height: 260px;
    }

    .quality-workflow-arrow {
        display: none !important;
    }

    .quality-controls-grid-layout {
        grid-template-columns: 1fr;
    }

    .quality-control-card {
        min-height: 270px;
    }

    .safety-environment-image {
        min-height: 430px;
    }

    .safety-environment-content {
        padding: 42px 28px;
    }

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

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

    .safety-performance-item {
        min-height: 215px;
    }

    .safety-culture-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .safety-culture-icon > span {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .safety-culture-signature {
        justify-content: center;
    }

    .safety-final-cta {
        padding-top: 88px;
        padding-bottom: 88px;
    }

    .safety-final-cta-actions {
        width: 100%;
        min-width: 0;
    }
}

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

@media (max-width: 575.98px) {

    .safety-section-title {
        font-size: 36px;
        letter-spacing: -1.25px;
    }

    .safety-section-heading {
        margin-bottom: 40px;
    }

    .safety-hero {
        min-height: 1170px;
    }

    .safety-hero-container {
        min-height: 1075px;
        padding-top: 55px;
        padding-bottom: 130px;
    }

    .safety-breadcrumb {
        font-size: 8px;
    }

    .safety-hero-label {
        gap: 9px;
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .safety-hero-label-icon {
        width: 36px;
        height: 36px;
    }

    .safety-hero-title {
        font-size: 47px;
        letter-spacing: -2.3px;
    }

    .safety-hero-description {
        font-size: 13px;
        line-height: 1.8;
    }

    .safety-hero-actions .sgc-btn {
        width: 100%;
    }

    .safety-hero-assurance-item {
        width: 100%;
    }

    .safety-hero-visual {
        min-height: 470px;
    }

    .safety-hero-card {
        top: 48px;
        width: 92%;
        border-radius: 22px;
    }

    .safety-hero-card-header {
        padding: 20px 20px 10px;
    }

    .safety-hero-card-icon {
        width: 50px;
        height: 50px;
    }

    .safety-hero-card-status {
        font-size: 6px;
    }

    .safety-hero-card-body {
        padding: 15px 21px 24px;
    }

        .safety-hero-card-body strong {
            font-size: 43px;
        }

    .safety-hero-card-footer > div {
        min-height: 80px;
        padding: 15px 9px;
    }

    .safety-hero-card-footer small {
        font-size: 6px;
    }

    .safety-hero-floating-card {
        width: 175px;
        padding: 11px;
    }

        .safety-hero-floating-card > span {
            width: 38px;
            height: 38px;
        }

        .safety-hero-floating-card strong {
            font-size: 8px;
        }

    .safety-hero-floating-card-one {
        top: 8px;
    }

    .safety-hero-floating-card-two {
        bottom: 0;
    }

    .safety-hero-rotating-badge {
        bottom: 25px;
        width: 84px;
        height: 84px;
    }

    .safety-rotating-text {
        display: none;
    }

    .safety-rotating-center {
        width: 42px;
        height: 42px;
    }

    .safety-hero-bottom-item strong {
        font-size: 8px;
    }

    .safety-trust-strip {
        padding: 25px 0;
    }

    .safety-commitment,
    .safety-zero-harm,
    .safety-policy-objectives,
    .safety-pillars,
    .safety-practices,
    .safety-ppe,
    .safety-high-risk,
    .quality-assurance,
    .quality-workflow,
    .quality-controls,
    .safety-environment,
    .safety-culture {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .safety-commitment-visual {
        min-height: 445px;
    }

    .safety-commitment-main-image {
        width: 92%;
        height: 375px;
        border-radius: 24px 78px 24px 24px;
    }

    .safety-commitment-small-image {
        width: 150px;
        height: 170px;
        border-width: 6px;
    }

    .safety-commitment-stat-card {
        top: 20px;
        width: 118px;
        padding: 14px;
    }

    .safety-commitment-stat-value strong {
        font-size: 33px;
    }

    .safety-commitment-stat-card p {
        font-size: 6px;
    }

    .safety-commitment-lead {
        font-size: 15px;
    }

    .safety-commitment-actions .sgc-btn {
        width: 100%;
    }

    .safety-zero-harm-content h2,
    .safety-ppe-content h2,
    .safety-emergency-content h2 {
        font-size: 39px;
        letter-spacing: -1.6px;
    }

    .safety-zero-harm-wheel {
        min-height: 590px;
    }

    .safety-zero-harm-center {
        width: 145px;
        height: 145px;
    }

        .safety-zero-harm-center > span {
            width: 48px;
            height: 48px;
        }

        .safety-zero-harm-center strong {
            font-size: 17px;
        }

    .safety-zero-harm-node {
        width: 165px;
        padding: 11px;
    }

    .safety-zero-harm-node-icon {
        width: 38px;
        height: 38px;
    }

    .safety-zero-harm-node strong {
        font-size: 8px;
    }

    .safety-zero-harm-node small {
        font-size: 6px;
    }

    .safety-zero-harm-node-two {
        right: -10px;
    }

    .safety-zero-harm-node-four {
        left: -10px;
    }

    .safety-zero-harm-orbit-one {
        width: 280px;
        height: 280px;
    }

    .safety-zero-harm-orbit-two {
        width: 395px;
        height: 395px;
    }

    .safety-policy-card {
        min-height: 250px;
        padding: 28px 23px;
    }

        .safety-policy-card h3 {
            font-size: 21px;
        }

    .safety-pillar-tab {
        grid-template-columns: 28px 45px 1fr 18px;
        gap: 11px;
        padding: 14px;
    }

    .safety-pillar-tab-icon {
        width: 44px;
        height: 44px;
    }

    .safety-pillars-content {
        min-height: 670px;
    }

    .safety-pillar-panel {
        border-radius: 20px;
    }

    .safety-pillar-panel-image {
        height: 250px;
    }

    .safety-pillar-panel-body {
        padding: 40px 22px 28px;
    }

    .safety-pillar-panel-icon {
        left: 22px;
        width: 55px;
        height: 55px;
    }

    .safety-pillar-panel-body h3 {
        font-size: 23px;
    }

    .safety-practice-card {
        min-height: 325px;
        padding: 28px 23px;
    }

        .safety-practice-card h3 {
            font-size: 22px;
        }

    .safety-ppe-visual {
        min-height: 460px;
    }

    .safety-ppe-image {
        width: 94%;
        height: 405px;
        border-radius: 78px 20px 20px 20px;
    }

        .safety-ppe-image::after {
            inset: 11px;
            border-radius: 68px 12px 12px 12px;
        }

    .safety-ppe-marker {
        width: 150px;
        padding: 9px;
    }

        .safety-ppe-marker > span {
            width: 34px;
            height: 34px;
        }

        .safety-ppe-marker strong {
            font-size: 7px;
        }

        .safety-ppe-marker small {
            display: none;
        }

    .safety-ppe-marker-one {
        top: 42px;
    }

    .safety-ppe-marker-two {
        top: 205px;
    }

    .safety-ppe-marker-three {
        bottom: 70px;
    }

    .safety-ppe-compliance {
        left: 9px;
        width: 220px;
        padding: 13px;
    }

        .safety-ppe-compliance > span {
            width: 42px;
            height: 42px;
        }

        .safety-ppe-compliance strong {
            font-size: 9px;
        }

    .safety-risk-tab {
        min-height: 88px;
        padding: 15px;
    }

    .safety-risk-content {
        min-height: 650px;
    }

    .safety-risk-panel-image {
        height: 245px;
    }

    .safety-risk-panel-body {
        padding: 29px 22px 30px;
    }

        .safety-risk-panel-body h3 {
            font-size: 23px;
        }

    .safety-emergency-wrap {
        padding: 75px 0;
    }

    .safety-emergency-step {
        grid-template-columns: 46px 1fr;
        padding: 17px;
    }

    .safety-emergency-step-number {
        display: none;
    }

    .safety-emergency-step-icon {
        width: 46px;
        height: 46px;
    }

    .quality-assurance-visual {
        min-height: 450px;
    }

    .quality-assurance-main-image {
        width: 92%;
        height: 375px;
        border-radius: 78px 22px 22px 22px;
    }

    .quality-assurance-small-image {
        width: 150px;
        height: 170px;
        border-width: 6px;
    }

    .quality-assurance-badge {
        top: 20px;
        width: 180px;
        padding: 12px;
    }

        .quality-assurance-badge > span {
            width: 40px;
            height: 40px;
        }

    .quality-assurance-stat {
        right: 0;
        width: 125px;
        padding: 14px;
    }

        .quality-assurance-stat strong {
            font-size: 34px;
        }

    .quality-workflow-step {
        min-height: 250px;
        padding: 25px 22px;
    }

    .quality-control-card {
        min-height: 250px;
        padding: 27px 23px;
    }

    .safety-environment-card {
        border-radius: 23px;
    }

    .safety-environment-image {
        min-height: 380px;
    }

    .safety-environment-badge {
        right: 17px;
        bottom: 17px;
        left: 17px;
    }

    .safety-environment-content {
        padding: 35px 22px;
    }

    .safety-performance {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .safety-performance-heading h2 {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .safety-performance-item {
        min-height: 190px;
        padding: 22px 16px;
    }

        .safety-performance-item strong {
            font-size: 41px;
        }

    .safety-culture-content blockquote {
        font-size: 29px;
        letter-spacing: -0.8px;
    }

    .safety-final-cta-content h2 {
        font-size: 41px;
        letter-spacing: -1.7px;
    }

    .safety-final-cta-actions .sgc-btn {
        width: 100%;
    }
}

/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 389.98px) {

    .safety-section-title {
        font-size: 33px;
    }

    .safety-hero {
        min-height: 1150px;
    }

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

    .safety-hero-card {
        width: 95%;
    }

    .safety-hero-floating-card {
        width: 155px;
    }

    .safety-hero-floating-card-two {
        right: -3px;
    }

    .safety-zero-harm-node {
        width: 145px;
    }

    .safety-zero-harm-node-two {
        right: -15px;
    }

    .safety-zero-harm-node-four {
        left: -15px;
    }

    .safety-zero-harm-orbit-two {
        width: 365px;
        height: 365px;
    }

    .safety-pillar-tab {
        grid-template-columns: 43px 1fr 16px;
    }

    .safety-pillar-tab-number {
        display: none;
    }

    .safety-ppe-marker {
        width: 135px;
    }

    .safety-ppe-compliance {
        width: 205px;
    }

    .safety-performance-numbers {
        grid-template-columns: 1fr;
    }

    .safety-performance-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

        .safety-performance-item:last-child {
            border-bottom: 0;
        }
}

/* =========================================================
   ACCESSIBILITY FOCUS
========================================================= */

.safety-pillar-tab:focus-visible,
.safety-risk-tab:focus-visible,
.safety-scroll-indicator:focus-visible,
.safety-final-contact:focus-visible {
    outline: 3px solid rgba(245, 166, 35, 0.65);
    outline-offset: 4px;
}

.safety-pillar-tab:focus:not(:focus-visible),
.safety-risk-tab:focus:not(:focus-visible) {
    outline: none;
}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .safety-hero-image,
    .safety-rotating-text,
    .safety-scroll-indicator i,
    .safety-zero-harm-orbit,
    .safety-hero-card-status i {
        animation: none !important;
        transform: none;
    }

    .safety-policy-card,
    .safety-practice-card,
    .quality-control-card,
    .quality-workflow-step,
    .safety-pillar-tab,
    .safety-risk-tab,
    .safety-zero-harm-node,
    .safety-emergency-step {
        transition: none !important;
    }
}

/* =========================================================
   PRINT STYLES
========================================================= */

@media print {

    .safety-hero,
    .safety-zero-harm,
    .safety-pillars,
    .safety-ppe,
    .safety-emergency,
    .quality-controls,
    .safety-performance,
    .safety-final-cta {
        color: #000000;
        background: #ffffff !important;
    }

    .safety-hero {
        min-height: auto;
    }

    .safety-hero-media,
    .safety-hero-grid,
    .safety-hero-glow,
    .safety-hero-lines,
    .safety-hero-rings,
    .safety-hero-visual,
    .safety-hero-bottom,
    .safety-trust-strip,
    .safety-final-cta,
    .sgc-header,
    .sgc-footer,
    .sgc-whatsapp,
    .sgc-back-to-top {
        display: none !important;
    }

    .safety-hero-container {
        min-height: auto;
        padding: 20px 0;
    }

    .safety-hero-title,
    .safety-zero-harm-content h2,
    .safety-ppe-content h2,
    .safety-emergency-content h2,
    .safety-performance-heading h2 {
        color: #000000 !important;
    }

    .safety-hero-description,
    .safety-zero-harm-content p,
    .safety-ppe-content p,
    .safety-emergency-content p,
    .safety-performance-heading p {
        color: #333333 !important;
    }

    .safety-policy-card,
    .safety-practice-card,
    .quality-workflow-step,
    .quality-control-card,
    .safety-pillar-panel,
    .safety-risk-panel,
    .safety-environment-card {
        break-inside: avoid;
        box-shadow: none !important;
    }

    .safety-section-title {
        color: #000000 !important;
    }

        .safety-section-title span {
            color: #333333 !important;
        }
}

/* =========================================================
   FINAL PAGE FIXES
========================================================= */

.safety-pillar-tab,
.safety-risk-tab {
    appearance: none;
    -webkit-appearance: none;
}

.safety-pillar-panel.active,
.safety-risk-panel.active {
    display: block;
}

.safety-pillar-panel img,
.safety-risk-panel img,
.safety-environment-image img,
.quality-assurance-visual img,
.safety-ppe-visual img {
    user-select: none;
    -webkit-user-drag: none;
}

.safety-policy-card,
.safety-practice-card,
.quality-control-card,
.quality-workflow-step {
    isolation: isolate;
}

body[data-controller="Home"][data-action="Safety"] {
    background: var(--sgc-white);
}

/* =========================================================
   SAFETY.CSS COMPLETE
========================================================= */