/* ==========================================================
   HCG INDUSTRIES / TECHNICAL SKILLS SECTION
   Executive Corporate Visual System
   Approved Palette: Black / Gold / Gray / White

   The 12 technical-skill icon mappings are retained in their
   original order. Do not change card order without updating
   the corresponding nth-child() icon.
   ========================================================== */


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

.hcg-industries-section {
    position: relative;
    overflow: hidden;

    padding: 72px 0 68px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F7F7F7 100%
        );
}


/* ==========================================================
   TECHNICAL BACKGROUND
   ========================================================== */

.hcg-industries-section::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 64px 64px;

    mask-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.55) 20%,
            rgba(0,0,0,.28) 78%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.55) 20%,
            rgba(0,0,0,.28) 78%,
            transparent
        );

    pointer-events: none;
}


/* ==========================================================
   ABSTRACT GOLD GEOMETRY
   ========================================================== */

.hcg-industries-section::after {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -230px;
    top: -170px;

    border: 1px solid rgba(198,161,91,.18);
    border-radius: 50%;

    box-shadow:
        0 0 0 42px rgba(198,161,91,.025),
        0 0 0 84px rgba(17,17,17,.018);

    pointer-events: none;
}


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

.hcg-industries-section .hcg-container {
    position: relative;
    z-index: 2;

    max-width: 1280px;
}


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

.hcg-industries-header {
    max-width: 850px;

    margin: 0 auto 42px;

    text-align: center;
}

.hcg-industries-header::before {
    content: "TECHNICAL CAPABILITIES";

    display: block;

    margin-bottom: 13px;

    color: #9D7A2F;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
    line-height: 1.4;
    text-transform: uppercase;
}

.hcg-industries-header::after {
    content: "";

    display: block;

    width: 44px;
    height: 2px;

    margin: 18px auto 0;

    background: #C6A15B;
}

.hcg-industries-header h2 {
    margin: 0 0 12px;

    color: #111111;

    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.hcg-industries-header p {
    max-width: 780px;

    margin: 0 auto;

    color: #666666;

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


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

.hcg-industries-grid {
    display: grid;

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

    gap: 18px;
}


/* ==========================================================
   TECHNICAL SKILL CARD
   ========================================================== */

.hcg-industries-card {
    position: relative;

    min-height: 210px;
    padding: 28px 20px 24px;

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

    text-align: center;

    background: #FFFFFF;

    border: 1px solid #DDDDDD;
    border-radius: 4px;

    text-decoration: none !important;

    box-shadow: 0 3px 14px rgba(17,17,17,.045);

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

.hcg-industries-card:hover {
    transform: translateY(-4px);

    border-color: #C6A15B;

    background: #FFFFFF;

    box-shadow: 0 12px 28px rgba(17,17,17,.09);
}


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

.hcg-industries-card::before {
    content: "";

    display: block;

    width: 64px;
    height: 64px;

    margin-bottom: 18px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    flex: 0 0 64px;

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

.hcg-industries-card:hover::before {
    transform: translateY(-2px) scale(1.035);
}


/* ==========================================================
   ORIGINAL 12 ICON DEFINITIONS — RETAINED
   ========================================================== */

.hcg-industries-card:nth-child(1)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 70h60'/%3E%3Cpath d='M25 62h28l8-8H35z'/%3E%3Cpath d='M52 62l18-18'/%3E%3Cpath d='M64 32l10 10'/%3E%3Cpath d='M70 38l8-8'/%3E%3Cpath d='M24 70v-8M34 70v-8M44 70v-8'/%3E%3C/g%3E%3Cpath d='M76 22v8M72 26h8M68 22l-3-3M68 30l-3 3' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   02 — MARINE MECHANICAL MAINTENANCE
   Icon: marine engine + gear
========================================================== */

.hcg-industries-card:nth-child(2)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 68h60'/%3E%3Cpath d='M25 68V43h31v25M31 43v-9h17v9M56 51h12v17M37 51h12v10H37z'/%3E%3Cpath d='M25 57h-7v11M68 57h8v11'/%3E%3Ccircle cx='70' cy='32' r='10'/%3E%3Cpath d='M70 25v14M63 32h14'/%3E%3C/g%3E%3Cpath d='M41 39h5' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   03 — ELECTRICAL INSTALLATION & MAINTENANCE
   Icon: electrical panel + lightning
========================================================== */

.hcg-industries-card:nth-child(3)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='22' y='20' width='40' height='54' rx='3'/%3E%3Cpath d='M31 31h22M31 42h22M31 53h8M48 53h5M31 64h22'/%3E%3Ccircle cx='69' cy='62' r='9'/%3E%3Cpath d='M69 53v-7M60 62h-7M78 62h7M69 71v7'/%3E%3C/g%3E%3Cpath d='M76 20l-9 17h8l-6 14' stroke='%23D4AF37' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   04 — INDUSTRIAL AUTOMATION & PLC/SCADA
   Icon: PLC/control panel
========================================================== */

.hcg-industries-card:nth-child(4)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='22' width='60' height='50' rx='4'/%3E%3Crect x='27' y='31' width='20' height='14' rx='2'/%3E%3Ccircle cx='59' cy='34' r='4'/%3E%3Ccircle cx='70' cy='34' r='4'/%3E%3Cpath d='M27 54h44M34 54v9M48 54v9M62 54v9'/%3E%3C/g%3E%3Cpath d='M55 42h18' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   05 — MARINE PIPING & HVAC SYSTEMS
   Icon: pipe network + ventilation fan
========================================================== */

.hcg-industries-card:nth-child(5)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 66h25V43h18v23h17'/%3E%3Cpath d='M25 66v-9M35 66v-9M61 43V29h13v14'/%3E%3Ccircle cx='67' cy='57' r='12'/%3E%3Cpath d='M67 45v12l9 7M67 57l-10 5M67 57l6-10'/%3E%3C/g%3E%3Cpath d='M43 43h18' stroke='%23D4AF37' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   06 — MARINE ELECTRICAL & POWER SYSTEMS
   Icon: marine generator + power
========================================================== */

.hcg-industries-card:nth-child(6)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 70h60'/%3E%3Crect x='22' y='38' width='43' height='29' rx='3'/%3E%3Cpath d='M30 38v-8h27v8M34 48h19M34 57h7M48 57h5'/%3E%3Ccircle cx='72' cy='51' r='10'/%3E%3Cpath d='M72 43v16M64 51h16'/%3E%3C/g%3E%3Cpath d='M73 21l-9 16h8l-6 13' stroke='%23D4AF37' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   07 — INSTRUMENTATION & CONTROL SYSTEMS
   Icon: process gauge / instrument
========================================================== */

.hcg-industries-card:nth-child(7)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='45' r='24'/%3E%3Cpath d='M32 50a17 17 0 0 1 32 0M48 45l12-10M27 67h42M35 73h26'/%3E%3Cpath d='M48 21v6M28 30l4 4M68 30l-4 4'/%3E%3C/g%3E%3Ccircle cx='48' cy='45' r='4' fill='%23D4AF37'/%3E%3Cpath d='M48 61v6' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   08 — CNC MACHINING & ADVANCED MANUFACTURING
   Icon: CNC machine / precision manufacturing
========================================================== */

.hcg-industries-card:nth-child(8)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='24' width='60' height='47' rx='3'/%3E%3Cpath d='M27 34h28v22H27zM61 34h9v22h-9zM34 56l10-12 9 12M27 63h43'/%3E%3Cpath d='M45 34v-8M39 26h12M45 18v8'/%3E%3Ccircle cx='65' cy='43' r='3'/%3E%3C/g%3E%3Cpath d='M62 63h10' stroke='%23D4AF37' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   09 — CAD / 3D DESIGN & ENGINEERING DRAFTING
   Icon: blueprint + 3D engineering geometry
========================================================== */

.hcg-industries-card:nth-child(9)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='19' y='20' width='58' height='55' rx='2'/%3E%3Cpath d='M29 31h38M29 39h24M29 66h38M29 48l14-8 15 9-14 8zM44 48v9'/%3E%3Cpath d='M58 31v8M64 31v8'/%3E%3C/g%3E%3Cpath d='M58 57l9 5-9 5-9-5zM58 57v10' stroke='%23D4AF37' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   10 — NDT, INSPECTION & QUALITY CONTROL
   Icon: inspection magnifier + quality check
========================================================== */

.hcg-industries-card:nth-child(10)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='43' cy='42' r='21'/%3E%3Cpath d='M58 57l17 17'/%3E%3Cpath d='M31 42l8 8 16-18'/%3E%3Cpath d='M22 70h35M28 77h23'/%3E%3C/g%3E%3Cpath d='M67 25v10M62 30h10' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   11 — MARINE ELECTRONICS, EMBEDDED SYSTEMS & IoT
   Icon: circuit board / embedded electronics
========================================================== */

.hcg-industries-card:nth-child(11)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='25' y='25' width='46' height='46' rx='4'/%3E%3Crect x='38' y='38' width='20' height='20' rx='2'/%3E%3Cpath d='M38 45H29M38 51H29M58 45h9M58 51h9M45 38v-9M51 38v-9M45 58v9M51 58v9'/%3E%3Ccircle cx='19' cy='45' r='3'/%3E%3Ccircle cx='77' cy='45' r='3'/%3E%3C/g%3E%3Cpath d='M63 27l7-5M63 69l7 5' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   12 — MARINE ROBOTICS, ROV & AUTONOMOUS SYSTEMS
   Icon: underwater ROV / autonomous robot
========================================================== */

.hcg-industries-card:nth-child(12)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cg stroke='%230A2E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='25' y='31' width='46' height='30' rx='5'/%3E%3Ccircle cx='39' cy='46' r='6'/%3E%3Ccircle cx='57' cy='46' r='6'/%3E%3Cpath d='M32 61v9M64 61v9M25 70h14M57 70h14M48 31V21M48 21l9-6M48 21l-9-6'/%3E%3Cpath d='M18 52h7M71 52h7'/%3E%3C/g%3E%3Cpath d='M33 25h30M39 77h18' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

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

.hcg-industries-card span {
    display: block;

    max-width: 250px;

    color: #222222;

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

    line-height: 1.45;

    transition: color .22s ease;
}

.hcg-industries-card:hover span {
    color: #9D7A2F;
}


/* ==========================================================
   GOLD UNDERLINE
   ========================================================== */

.hcg-industries-card::after {
    content: "";

    width: 30px;
    height: 2px;

    margin-top: 15px;

    background: #C6A15B;

    border-radius: 0;

    transition: width .25s ease;
}

.hcg-industries-card:hover::after {
    width: 46px;
}


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

.hcg-industries-footer {
    margin-top: 36px;

    text-align: center;
}

.hcg-industries-button {
    position: relative;

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

    min-height: 48px;

    padding: 0 27px;

    border: 1px solid #111111;
    border-radius: 3px;

    background: #111111;
    color: #FFFFFF !important;

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

    text-decoration: none !important;

    box-shadow: none;

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

.hcg-industries-button::after {
    content: "→";

    margin-left: 11px;

    color: #C6A15B;

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

    transition: transform .22s ease;
}

.hcg-industries-button:hover {
    transform: translateY(-2px);

    background: #C6A15B;
    border-color: #C6A15B;

    color: #111111 !important;
}

.hcg-industries-button:hover::after {
    color: #111111;
    transform: translateX(4px);
}


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

@media (max-width: 1100px) {

    .hcg-industries-section {
        padding: 62px 0;
    }

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


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

@media (max-width: 768px) {

    .hcg-industries-section {
        padding: 54px 0;
    }

    .hcg-industries-section .hcg-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .hcg-industries-header {
        margin-bottom: 32px;
    }

    .hcg-industries-header h2 {
        font-size: 32px;
    }

    .hcg-industries-header p {
        font-size: 16px;
    }

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

    .hcg-industries-card {
        min-height: 180px;
        padding: 22px 14px;
    }

    .hcg-industries-card::before {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }
}


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

@media (max-width: 540px) {

    .hcg-industries-section {
        padding: 46px 0;
    }

    .hcg-industries-section::after {
        right: -280px;
        top: -100px;
    }

    .hcg-industries-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hcg-industries-card {
        min-height: 150px;
        padding: 22px 18px;
    }

    .hcg-industries-header h2 {
        font-size: 28px;
    }

    .hcg-industries-header p {
        font-size: 15px;
    }

    .hcg-industries-button {
        width: 100%;
        max-width: 320px;
    }
}