/* =========================================================
   SAN ENGINEERING
   GLOBAL STYLESHEET

   DESIGN:
   Clean Industrial
   Graphite / Charcoal
   Teal + Cyan
   Engineering Background
========================================================= */


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    --black: #071012;
    --black-soft: #0c1719;
    --black-card: #101d1f;
    --black-light: #162629;

    --teal: #28b8b0;
    --teal-dark: #159b96;

    --cyan: #00e5d8;
    --cyan-soft: #78f5ee;

    --white: #ffffff;

    --text-primary: #f4f8f8;
    --text-secondary: #b8c4c5;
    --text-muted: #829596;

    --ivory: #e6e2d8;
    --gold: #f2c94c;
    --orange: #ed7d31;

    --paragraph: #cbd4d5;

    --icon-bg: rgba(10, 20, 22, 0.78);
    --icon-border: rgba(40, 184, 176, 0.30);
    --icon-color: #57ecd4;

    --border:
        rgba(40, 184, 176, 0.28);

    --border-light:
        rgba(255, 255, 255, 0.12);

    --container-width: 1200px;

    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 18px;

    --shadow-soft:
        0 10px 40px rgba(0, 0, 0, 0.18);

    --shadow-teal:
        0 15px 45px rgba(40, 184, 176, 0.14);

    --transition:
        0.3s ease;
}


/* =========================================================
   02. RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {

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

    background-color:
        var(--black);

    background-image:
        url("../assets/images/san-engineering-bg.jpg");

    background-size:
        cover;

    background-position:
        center top;

    background-repeat:
        no-repeat;

    background-attachment:
        fixed;

    color:
        var(--text-primary);

    line-height:
        1.6;

    overflow-x:
        hidden;
}

img {
    max-width:
        100%;

    height:
        auto;

    display:
        block;
}

a {
    color:
        inherit;

    text-decoration:
        none;
}

button {
    font:
        inherit;
}

ul,
ol {
    list-style:
        none;
}


/* =========================================================
   03. GLOBAL CONTAINER
========================================================= */

.container {

    width:
        min(92%, var(--container-width));

    margin:
        0 auto;
}


/* =========================================================
   04. HEADER
========================================================= */

.header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        1000;

    background:
        rgba(7, 16, 18, 0.70);

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

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.header-container {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}


/* =========================================================
   05. LOGO
========================================================= */

.logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--white);

    font-size:
        1.35rem;

    font-weight:
        800;

    letter-spacing:
        1px;
}

.logo span {

    color:
        var(--teal);

    font-size:
        0.85rem;

    letter-spacing:
        2px;
}


/* =========================================================
   06. NAVIGATION
========================================================= */

.navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;
}

.navigation a {

    position:
        relative;

    color:
        #ffffff !important;

    font-size:
        0.9rem;

    font-weight:
        500;

    opacity:
        1 !important;

    visibility:
        visible !important;

    text-decoration:
        none;

    transition:
        color 0.3s ease;
}

.navigation a strong {

    color:
        inherit !important;

    font-weight:
        500;
}

.navigation a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        2px;

    background:
        var(--orange);

    transition:
        width 0.3s ease;
}

.navigation a:hover,
.navigation a.active {

    color:
        var(--orange) !important;
}

.navigation a:hover::after,
.navigation a.active::after {

    width:
        100%;
}


/* =========================================================
   07. MOBILE MENU BUTTON
========================================================= */

.menu-button {

    display:
        none;

    width:
        42px;

    height:
        42px;

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

    border-radius:
        var(--radius-small);

    background:
        rgba(16, 29, 31, 0.75);

    cursor:
        pointer;
}

.menu-button span {

    display:
        block;

    width:
        20px;

    height:
        2px;

    margin:
        4px auto;

    background:
        var(--teal);

    transition:
        var(--transition);
}


/* =========================================================
   08. HERO — CONTENT STARTS FROM EXACT TOP
========================================================= */

.hero {

    position: relative;

    min-height: 100vh;

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent;

    background-image: none !important;

    overflow: hidden;
}


/* Hero readability layer */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 10, 11, 0.18) 0%,
            rgba(5, 10, 11, 0.07) 50%,
            rgba(5, 10, 11, 0.02) 100%
        );

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   09. HERO INDUSTRIAL VIDEO
========================================================= */

.hero .home-industrial-video {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

    opacity: 1;

    pointer-events: none;

    z-index: 0;

    transform: translateZ(0);
}


/* =========================================================
   10. HERO CONTAINER — EXACT TOP
========================================================= */

.hero-container {

    position: relative !important;

    z-index: 5;

    display: block !important;

    width: 100% !important;

    height: 100vh !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* =========================================================
   11. HERO CONTENT — SLIGHTLY BELOW TOP
========================================================= */

.hero-content {
    position: absolute !important;

    top: 80px !important;
    left: 5% !important;

    z-index: 6;

    width: 100% !important;
    max-width: 760px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

/* =========================================================
   12. HERO LABEL
========================================================= */

.hero .hero-label {

    margin-bottom:
        22px;

    color:
        var(--cyan);

    font-size:
        1.4rem !important;

    font-weight:
        700;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   13. HERO HEADING
========================================================= */

.hero h1 {

    max-width:
        800px;

    font-family:
        "Space Grotesk",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(3.2rem, 7vw, 6.5rem);

    line-height:
        0.98;

    font-weight:
        500;

    letter-spacing:
        -0.035em;

    color:
        #d8d5cc;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.18);
}

.hero h1 span {

    display:
        block;

    margin-top:
        12px;

    font-family:
        "Space Grotesk",
        Arial,
        Helvetica,
        sans-serif;

    font-weight:
        400;

    letter-spacing:
        -0.025em;

    color:
        #c8c5bc;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   14. HERO DESCRIPTION
========================================================= */

.hero .hero-description {

    max-width:
        620px;

    margin-top:
        30px;

    font-family:
        "Space Grotesk",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        1.5rem !important;

    font-weight:
        400;

    letter-spacing:
        0.005em;

    line-height:
        1.7;

    color:
        var(--paragraph) !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   15. HERO BUTTONS
========================================================= */

.hero-buttons {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        38px;
}


/* =========================================================
   16. BUTTONS
========================================================= */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:
        0 26px;

    border-radius:
        var(--radius-small);

    font-size:
        0.88rem;

    font-weight:
        700;

    letter-spacing:
        0.4px;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.btn:hover {

    transform:
        translateY(-3px);
}


/* =========================================================
   17. PRIMARY BUTTON
========================================================= */

.btn-primary {

    color:
        #031010;

    background:
        var(--cyan);

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

    box-shadow:
        0 10px 30px rgba(0, 229, 216, 0.16);
}

.btn-primary:hover {

    color:
        var(--white);

    background:
        var(--teal);

    border-color:
        var(--teal);

    box-shadow:
        0 14px 35px rgba(40, 184, 176, 0.20);
}


/* =========================================================
   18. OUTLINE BUTTON
========================================================= */

.btn-outline {

    color:
        var(--white);

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

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

    backdrop-filter:
        blur(6px);
}

.btn-outline:hover {

    color:
        var(--cyan);

    background:
        rgba(0, 229, 216, 0.08);

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


/* =========================================================
   19. HERO VISUAL
========================================================= */

.hero-visual {
    display:
        none;
}


/* =========================================================
   20. GLOBAL SECTIONS
========================================================= */

.section {

    position:
        relative;

    padding:
        110px 0;

    background:
        rgba(7, 16, 18, 0.28);
}


/* =========================================================
   21. SECTION HEADING
========================================================= */

.section-heading {

    max-width:
        800px;

    margin-bottom:
        55px;
}

.section-label {

    margin-bottom:
        14px;

    color:
        var(--cyan);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}

.section-heading h2 {

    color:
        #ffffff;

    font-size:
        clamp(2.2rem, 5vw, 4rem);

    line-height:
        1.08;

    letter-spacing:
        -1.5px;
}

.section-heading h2 span {

    color:
        var(--gold);
}


/* =========================================================
   22. INTRODUCTION / WHO WE ARE
========================================================= */

.intro {

    background:
        rgba(7, 16, 18, 0.28);
}

.intro-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr 0.5fr;

    gap:
        80px;

    align-items:
        start;
}


/* =========================================================
   23. HORIZONTAL INTRO IMAGE
========================================================= */

.intro-horizontal {

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;
}

.intro-horizontal .intro-image {

    width:
        100vw;

    max-width:
        100vw;

    margin-left:
        calc(50% - 50vw);

    margin-right:
        calc(50% - 50vw);

    margin-bottom:
        32px;
}

.intro-horizontal .intro-image img {

    display:
        block;

    width:
        100%;

    max-width:
        100%;

    height:
        700px;

    object-fit:
        cover;

    object-position:
        center;
}


/* =========================================================
   24. INTRO TEXT
========================================================= */

.intro-horizontal .intro-text {

    width:
        100%;

    max-width:
        100%;
}

.intro-text {

    max-width:
        720px;
}


/* =========================================================
   25. ANIMATED ENGINEERING DESCRIPTION
========================================================= */

.animated-description {

    width:
        100%;

    max-width:
        100%;
}


/* =========================================================
   ENGINEERING POINT
========================================================= */

.description-point {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        28px;

    margin-bottom:
        32px;

    opacity:
        0;

    transform:
        translateY(30px);

    animation:
        pointReveal 0.8s ease-out forwards;
}


/* Animation timing */

.description-point:nth-child(1) {
    animation-delay:
        0.2s;
}

.description-point:nth-child(2) {
    animation-delay:
        1s;
}

.description-point:nth-child(3) {
    animation-delay:
        1.8s;
}

.description-point:nth-child(4) {
    animation-delay:
        2.6s;
}

/* =========================================================
   26. POINT ICON CONTAINER
   Keep the original black industrial icon appearance
========================================================= */

.point-icon {

    flex: 0 0 68px;

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: var(--icon-bg);

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

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.28);

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


/* =========================================================
   27. POINT SVG
   RESTORE BLACK ICON DETAILS
========================================================= */

.point-icon svg {

    width: 42px;

    height: 42px;

    stroke: var(--icon-color);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


/* =========================================================
   28. LOCOMOTIVE ICON
========================================================= */

.locomotive-icon {

    background: var(--icon-bg);

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

.locomotive-icon svg {

    stroke: var(--icon-color);
}

.description-point:hover .locomotive-icon {

    background:
        rgba(40, 184, 176, 0.13);

    border-color: var(--teal);

    box-shadow:
        0 12px 35px rgba(40, 184, 176, 0.18);
}


/* =========================================================
   29. TRANSMISSION ICON
========================================================= */

.transmission-icon {

    background: var(--icon-bg);

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

.transmission-icon svg {

    stroke: var(--icon-color);
}

.description-point:hover .transmission-icon {

    background:
        rgba(40, 184, 176, 0.13);

    border-color: var(--teal);

    box-shadow:
        0 12px 35px rgba(40, 184, 176, 0.18);
}


/* =========================================================
   30. MANUFACTURING ICON
========================================================= */

.manufacturing-icon {

    background: var(--icon-bg);

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

.manufacturing-icon svg {

    stroke: var(--icon-color);
}

.description-point:hover .manufacturing-icon {

    background:
        rgba(40, 184, 176, 0.13);

    border-color: var(--teal);

    box-shadow:
        0 12px 35px rgba(40, 184, 176, 0.18);
}


/* =========================================================
   31. QUALITY ICON
========================================================= */

.quality-icon {

    background: var(--icon-bg);

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

.quality-icon svg {

    stroke: var(--icon-color);
}

.description-point:hover .quality-icon {

    background:
        rgba(40, 184, 176, 0.13);

    border-color: var(--teal);

    box-shadow:
        0 12px 35px rgba(40, 184, 176, 0.18);
}

/* =========================================================
   32. ICON HOVER
========================================================= */

.description-point:hover .point-icon {

    transform:
        translateY(-5px) scale(1.04);
}

.description-point:hover .point-icon svg {

    transform:
        scale(1.08);

    filter:
        drop-shadow(0 0 8px currentColor);
}


/* =========================================================
   33. POINT CONTENT
========================================================= */

.point-content {

    flex:
        1;
}


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

.point-content h3 {

    margin-bottom:
        10px;

    color:
        var(--ivory);

    font-size:
        1.35rem;

    line-height:
        1.3;

    font-weight:
        700;

    letter-spacing:
        0.5px;
}


/* =========================================================
   POINT DESCRIPTION
   Same color as Navigation Hover
========================================================= */

.point-content p {

    width:
        100%;

    max-width:
        100%;

    margin:
        0;

    color:
        var(--orange) !important;

    font-size:
        1.18rem !important;

    line-height:
        1.8 !important;

    text-align:
        left !important;
}

/* =========================================================
   34. POINT REVEAL ANIMATION
========================================================= */

@keyframes pointReveal {

    0% {

        opacity:
            0;

        transform:
            translateY(30px);
    }

    75% {

        opacity:
            1;

        transform:
            translateY(-3px);
    }

    100% {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   35. OLD NUMBER — HIDDEN
========================================================= */

.point-number {

    display:
        none !important;
}


/* =========================================================
   36. INTRO STAT
========================================================= */

.intro-horizontal .intro-stat {

    width:
        100%;

    max-width:
        100%;

    margin-top:
        24px;
}

.intro-stat {

    padding-left:
        30px;

    border-left:
        1px solid var(--border);
}

.intro-stat strong {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--teal);

    font-size:
        3.2rem;

    line-height:
        1;

    font-weight:
        800;
}

.intro-stat p {

    color:
        var(--paragraph);

    font-size:
        1.05rem !important;

    line-height:
        1.8 !important;
}


/* =========================================================
   37. TEXT LINK
========================================================= */

.text-link {

    display:
        inline-flex;

    margin-top:
        28px;

    color:
        var(--cyan);

    font-size:
        0.95rem;

    font-weight:
        700;

    transition:
        color var(--transition),
        transform var(--transition);
}

.text-link:hover {

    color:
        var(--white);

    transform:
        translateX(5px);
}


/* =========================================================
   38. CAPABILITIES
========================================================= */

.capabilities {

    background:
        rgba(9, 20, 22, 0.34);
}

.capability-grid {

    display:
        grid;

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

    gap:
        22px;
}


/* =========================================================
   39. CAPABILITY CARD
========================================================= */

.capability-card {

    position:
        relative;
}


/* =========================================================
   CAPABILITY IMAGE
========================================================= */

.capability-card > img {

    width:
        100%;

    height:
        220px;

    object-fit:
        cover;

    display:
        block;

    margin-bottom:
        22px;
}


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

.capability-card .card-number {

    display:
        block;

    margin-bottom:
        50px;

    color:
        var(--teal);

    font-size:
        0.9rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;
}


/* =========================================================
   CAPABILITY DETAILS
========================================================= */

.capability-card details {

    width:
        100%;
}

.capability-card summary {

    list-style:
        none;

    text-align:
        center;

    color:
        var(--ivory);

    font-size:
        1.45rem !important;

    line-height:
        1.3;

    font-weight:
        600;

    cursor:
        pointer;

    user-select:
        none;

    padding:
        8px 0;

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

.capability-card summary:hover {

    color:
        var(--cyan);
}

.capability-card details[open] summary {

    color:
        var(--cyan);
}

.capability-card summary::-webkit-details-marker {

    display:
        none;
}

.capability-card summary::marker {

    content:
        "";
}

.capability-card summary::after {

    content:
        none !important;
}


/* =========================================================
   40. CAPABILITY DESCRIPTION
========================================================= */

.capability-card .card-description {

    display:
        block;

    margin-top:
        15px;

    text-align:
        center;
}

.capability-card .card-description p {

    max-width:
        100%;

    margin:
        0;

    color:
        var(--paragraph) !important;

    font-size:
        1.18rem !important;

    line-height:
        1.85 !important;
}


/* =========================================================
   41. CAPABILITY LINK
========================================================= */

.capability-card > a {

    display:
        block;

    text-align:
        center;

    margin-top:
        22px;

    color:
        var(--cyan);

    font-size:
        0.95rem !important;

    font-weight:
        700;

    transition:
        color var(--transition),
        transform var(--transition);
}

.capability-card > a:hover {

    color:
        var(--white);

    transform:
        translateX(5px);
}


/* =========================================================
   42. CTA
========================================================= */

.cta {

    background:
        rgba(7, 16, 18, 0.42);

    border-top:
        1px solid var(--border-light);

    border-bottom:
        1px solid var(--border-light);
}

.cta-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;
}

.cta h2 {

    max-width:
        650px;

    color:
        var(--white);

    font-size:
        clamp(2.2rem, 5vw, 4rem);

    line-height:
        1.08;

    letter-spacing:
        -1.5px;
}

.cta h2 span {

    color:
        var(--gold);
}


/* =========================================================
   43. FOOTER
========================================================= */

.footer {

    background:
        rgba(5, 12, 14, 0.72);

    border-top:
        1px solid var(--border-light);
}

.footer-container {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        60px;

    padding:
        70px 0;
}


/* =========================================================
   44. FOOTER BRAND
========================================================= */

.footer-brand {

    max-width:
        360px;
}

.footer-brand p {

    margin-top:
        18px;

    color:
        var(--paragraph);

    font-size:
        0.9rem;

    line-height:
        1.7;
}


/* =========================================================
   45. FOOTER LINKS
========================================================= */

.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        25px;
}

.footer-links a {

    color:
        var(--text-secondary);

    font-size:
        0.85rem;

    transition:
        color var(--transition);
}

.footer-links a:hover {

    color:
        var(--cyan);
}


/* =========================================================
   46. COPYRIGHT
========================================================= */

.copyright {

    padding:
        20px 0 28px;

    border-top:
        1px solid var(--border-light);
}

.copyright p {

    color:
        var(--text-muted);

    font-size:
        0.75rem;

    text-align:
        center;
}


/* =========================================================
   47. TEXT SELECTION
========================================================= */

::selection {

    color:
        #031010;

    background:
        var(--cyan);
}


/* =========================================================
   48. SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width:
        8px;
}

::-webkit-scrollbar-track {

    background:
        #071012;
}

::-webkit-scrollbar-thumb {

    background:
        var(--teal-dark);

    border-radius:
        10px;
}

::-webkit-scrollbar-thumb:hover {

    background:
        var(--teal);
}


/* =========================================================
   49. PRODUCTS PAGE
========================================================= */

.products-section .capability-grid {

    display:
        grid;

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

    gap:
        22px;
}

.products-section .capability-card {

    position:
        relative;

    overflow:
        hidden;
}

.products-section .capability-card > img {

    display:
        block !important;

    width:
        100% !important;

    height:
        220px !important;

    max-width:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    visibility:
        visible !important;

    opacity:
        1 !important;
}

.products-section .capability-card .card-number {

    display:
        block;
}

.products-section .capability-card details {

    width:
        100%;
}

.products-section .capability-card details summary {

    display:
        block;

    text-align:
        center;

    list-style:
        none;

    cursor:
        pointer;

    color:
        var(--ivory);

    font-size:
        1.2rem;

    font-weight:
        600;

    padding:
        8px 0;
}

.products-section .capability-card details summary::-webkit-details-marker {

    display:
        none;
}

.products-section .capability-card details summary::marker {

    content:
        "";
}

.products-section .capability-card details summary::after {

    content:
        none !important;
}

.products-section .capability-card .card-description {

    display:
        block;

    margin-top:
        15px;

    text-align:
        center;
}

.products-section .capability-card .card-description p {

    color:
        var(--paragraph) !important;

    line-height:
        1.7;

    margin:
        0;
}


/* =========================================================
   50. TABLET
========================================================= */

@media (max-width: 1000px) {

    .navigation {

        gap:
            18px;
    }

    .hero-container {

        grid-template-columns:
            1fr;
    }

    .hero-content {

        max-width:
            800px;
    }

    .capability-grid {

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

    .intro-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    .intro-stat {

        padding-left:
            0;

        padding-top:
            25px;

        border-left:
            none;

        border-top:
            1px solid var(--border);
    }

    .products-section .capability-grid {

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


/* =========================================================
   51. MOBILE
========================================================= */

@media (max-width: 768px) {

    .header-container {

        min-height:
            70px;
    }

    .navigation {

        display:
            none;
    }

    .menu-button {

        display:
            block;
    }


    /* Mobile background */

    body {

        background-attachment:
            scroll;

        background-position:
            center top;

        background-size:
            auto 100%;
    }


    /* Hero */

    .hero {

        min-height:
            850px;

        padding:
            130px 0 80px;
    }

    .hero h1 {

        font-size:
            clamp(2.8rem, 12vw, 4.5rem);

        letter-spacing:
            -2px;
    }

    .hero .hero-description {

        font-size:
            1rem !important;
    }


    /* Hero buttons */

    .hero-buttons {

        align-items:
            stretch;

        flex-direction:
            column;

        max-width:
            300px;
    }

    .btn {

        width:
            100%;
    }


    /* Sections */

    .section {

        padding:
            80px 0;

        background:
            rgba(7, 16, 18, 0.34);
    }

    .section-heading {

        margin-bottom:
            40px;
    }


    /* Capabilities */

    .capability-grid {

        grid-template-columns:
            1fr;
    }

    .capability-card {

        min-height:
            auto;

        padding:
            30px;
    }

    .capability-card summary {

        font-size:
            1.3rem !important;
    }

    .capability-card .card-description p {

        font-size:
            1.08rem !important;

        line-height:
            1.75 !important;
    }


    /* Who We Are image */

    .intro-horizontal .intro-image img {

        height:
            420px;
    }


    /* Engineering points */

    .description-point {

        gap:
            18px;
    }

    .point-icon {

        flex:
            0 0 56px;

        width:
            56px;

        height:
            56px;

        border-radius:
            11px;
    }

    .point-icon svg {

        width:
            34px;

        height:
            34px;
    }

    .point-content h3 {

        font-size:
            1.15rem;
    }

    .point-content p {

        font-size:
            1.08rem !important;

        line-height:
            1.75 !important;
    }


    /* Intro text */

    .intro-text p {

        font-size:
            1.15rem !important;

        line-height:
            1.8 !important;
    }


    /* CTA */

    .cta-container {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            30px;
    }


    /* Footer */

    .footer-container {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            55px 0;
    }

    .footer-links {

        gap:
            18px;
    }


    /* Products */

    .products-section .capability-grid {

        grid-template-columns:
            1fr;
    }

    .products-section .capability-card > img {

        height:
            220px !important;
    }
}


/* =========================================================
   52. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .container {

        width:
            min(90%, var(--container-width));
    }

    .logo {

        font-size:
            1.15rem;
    }

    .logo span {

        font-size:
            0.7rem;
    }

    .hero {

        padding-top:
            115px;
    }

    .hero-label {

        font-size:
            0.65rem !important;

        letter-spacing:
            2px;
    }

    .hero h1 {

        font-size:
            2.8rem;
    }

    .hero-description {

        margin-top:
            22px;
    }

    .section-heading h2 {

        font-size:
            2.2rem;
    }

    .capability-card {

        padding:
            25px;
    }

    .capability-card summary {

        font-size:
            1.2rem !important;
    }

    .capability-card .card-description p {

        font-size:
            1rem !important;

        line-height:
            1.7 !important;
    }

    .cta h2 {

        font-size:
            2.3rem;
    }

    .intro-horizontal .intro-image img {

        height:
            300px;
    }

    .intro-text p {

        font-size:
            1.05rem !important;

        line-height:
            1.75 !important;
    }


    /* Small mobile engineering points */

    .description-point {

        gap:
            14px;

        margin-bottom:
            22px;
    }

    .point-icon {

        flex:
            0 0 48px;

        width:
            48px;

        height:
            48px;
    }

    .point-icon svg {

        width:
            29px;

        height:
            29px;
    }

    .point-content h3 {

        font-size:
            1rem;
    }

    .point-content p {

        font-size:
            1rem !important;

        line-height:
            1.7 !important;
    }
}















/* =========================================================
   SAN ENGINEERING
   CORPORATE FOOTER
   ONLY FOOTER STYLES
========================================================= */

.footer {
    background:
        rgba(5, 12, 14, 0.94);

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

    position:
        relative;

    overflow:
        hidden;
}


/* =========================================================
   FOOTER MAIN CONTAINER
========================================================= */

.footer-container {

    display:
        grid;

    grid-template-columns:
        1.6fr 1fr 1.25fr 1fr 1fr;

    gap:
        55px;

    padding:
        75px 0 65px;

    align-items:
        start;
}


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

.footer-about {

    max-width:
        390px;
}


.footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #ffffff;

    font-size:
        1.45rem;

    font-weight:
        800;

    letter-spacing:
        1px;
}


.footer-logo span {

    color:
        var(--teal);

    font-size:
        0.85rem;

    letter-spacing:
        2px;
}


.footer-about-text {

    margin-top:
        22px;

    color:
        #cbd4d5;

    font-size:
        0.92rem;

    line-height:
        1.8;
}


.footer-about-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        22px;

    color:
        var(--cyan);

    font-size:
        0.88rem;

    font-weight:
        700;

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


.footer-about-link:hover {

    color:
        #ffffff;

    transform:
        translateX(4px);
}


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

.footer-column {

    min-width:
        0;
}


.footer-column h3 {

    margin-bottom:
        22px;

    color:
        #ffffff;

    font-size:
        0.82rem;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.footer-column ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;
}


.footer-column li {

    margin:
        0;
}


.footer-column a {

    display:
        inline-block;

    color:
        #9eacad;

    font-size:
        0.84rem;

    line-height:
        1.5;

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


.footer-column a:hover {

    color:
        var(--cyan);

    transform:
        translateX(3px);
}


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

.footer-contact-strip {

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

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

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


.footer-contact-container {

    display:
        grid;

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

    gap:
        30px;

    padding:
        26px 0;
}


.footer-contact-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.footer-contact-label {

    color:
        var(--teal);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.footer-contact-value {

    color:
        #d1d9da;

    font-size:
        0.85rem;

    line-height:
        1.5;
}


.footer-contact-link {

    color:
        var(--cyan);

    transition:
        color 0.3s ease;
}


.footer-contact-link:hover {

    color:
        #ffffff;
}


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

.copyright {

    padding:
        22px 0;

    border-top:
        none;
}


.copyright-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;
}


.copyright p {

    color:
        #758486;

    font-size:
        0.72rem;

    text-align:
        left;
}


.copyright-links {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #59686a;

    font-size:
        0.72rem;
}


.copyright-links a {

    color:
        #758486;

    transition:
        color 0.3s ease;
}


.copyright-links a:hover {

    color:
        var(--cyan);
}


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

@media (max-width: 1000px) {

    .footer-container {

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

        gap:
            45px;
    }

    .footer-about {

        grid-column:
            1 / -1;

        max-width:
            650px;
    }
}


@media (max-width: 768px) {

    .footer-container {

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

        gap:
            40px 30px;

        padding:
            60px 0 50px;
    }

    .footer-about {

        grid-column:
            1 / -1;
    }

    .footer-contact-container {

        grid-template-columns:
            1fr;

        gap:
            20px;

        padding:
            25px 0;
    }

    .copyright-container {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;
    }

    .copyright p {

        text-align:
            left;
    }
}


@media (max-width: 480px) {

    .footer-container {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding:
            50px 0 40px;
    }

    .footer-about {

        grid-column:
            auto;
    }

    .footer-about-text {

        font-size:
            0.88rem;

        line-height:
            1.75;
    }

    .footer-column h3 {

        margin-bottom:
            17px;
    }

    .footer-column ul {

        gap:
            9px;
    }

    .footer-column a {

        font-size:
            0.82rem;
    }

    .copyright-links {

        flex-wrap:
            wrap;
    }
}




/* Image Card Title — Normal */
.capability-card summary {
    color: #FFFFFF !important;
}

/* Image Card Title — Hover */
.capability-card summary:hover {
    color: #F7C85C !important;

    text-shadow:
        0 0 3px #F7C85C,
        0 0 8px rgba(247, 200, 92, 0.6),
        0 0 16px rgba(247, 200, 92, 0.35);
}

/* Image Card Title — Open */
.capability-card details[open] summary {
    color: #F7C85C !important;

    text-shadow:
        0 0 3px #F7C85C,
        0 0 8px rgba(247, 200, 92, 0.6),
        0 0 16px rgba(247, 200, 92, 0.35);
}






/* =========================================================
   FINAL — PERSISTENT ENGINEERING ICON HIGHLIGHT
========================================================= */

/* Normal icon box */
.description-point .point-icon {
    background: var(--icon-bg) !important;
    border: 1px solid var(--icon-border) !important;

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


/* =========================================================
   AFTER FIRST HOVER
   Box stays filled permanently
========================================================= */

.description-point.icon-highlighted .point-icon {

    background: #E73F1E !important;

    border-color: #E73F1E !important;

    box-shadow:
        0 0 12px rgba(231, 63, 30, 0.55),
        0 0 28px rgba(231, 63, 30, 0.30);

    transform:
        translateY(-5px) scale(1.04);
}


/* =========================================================
   ICON ITSELF — HIGHLIGHT
========================================================= */

.description-point.icon-highlighted .point-icon svg {

    stroke: #ffffff !important;

    fill: none !important;

    transform:
        scale(1.15);

    filter:
        drop-shadow(0 0 5px #ffffff)
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.75))
        drop-shadow(0 0 16px rgba(231, 63, 30, 0.80));
}


/* =========================================================
   PREVENT OLD HOVER RULES FROM CHANGING THE BOX
========================================================= */

.description-point.icon-highlighted:hover .point-icon {

    background: #E73F1E !important;

    border-color: #E73F1E !important;

    box-shadow:
        0 0 12px rgba(231, 63, 30, 0.55),
        0 0 28px rgba(231, 63, 30, 0.30);

    transform:
        translateY(-5px) scale(1.04);
}


/* =========================================================
   KEEP ICON HIGHLIGHTED AFTER MOUSE LEAVES
========================================================= */

.description-point.icon-highlighted:hover .point-icon svg {

    stroke: #ffffff !important;

    transform:
        scale(1.15);

    filter:
        drop-shadow(0 0 5px #ffffff)
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.75))
        drop-shadow(0 0 16px rgba(231, 63, 30, 0.80));
}






 /* =========================================================
   SAN ENGINEERING — CONTACT FORM
   ENLARGED FORM VERSION
   Keep existing layout / 2-column structure
========================================================= */

.contact-form {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


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

.contact-form .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}


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

.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

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


/* =========================================================
   LABEL — LARGER
========================================================= */

.contact-form .form-group label {

    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0;

    color: #ffffff;

    font-size: 0.95rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


/* =========================================================
   ICON — LARGER
   Colour remains #E5CB90
========================================================= */

.contact-form .form-group label .form-icon {

    width: 26px;
    height: 26px;

    min-width: 26px;

    padding: 9px;

    box-sizing: content-box;

    background: #E5CB90;

    border: 1px solid #E5CB90;

    border-radius: 2px;

    color: #ffffff;

    stroke: currentColor;

    box-shadow:
        0 0 10px rgba(229, 203, 144, 0.25);

    transform: none;

    filter: none;

    transition: none;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA — LARGER
========================================================= */

.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 19px 21px;

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

    border-radius: 0;

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

    color: #ffffff;

    font-family: inherit;

    font-size: 1.05rem;

    line-height: 1.6;

    outline: none;

    transition: none;
}


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

.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {

    color: rgba(255, 255, 255, 0.48);

    opacity: 1;
}


/* =========================================================
   SELECT
========================================================= */

.contact-form .form-group select {

    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;

    padding-right: 55px;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #E5CB90 50%
        ),
        linear-gradient(
            135deg,
            #E5CB90 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 15px) 50%;

    background-size:
        7px 7px,
        7px 7px;

    background-repeat: no-repeat;
}


/* =========================================================
   SELECT OPTIONS
========================================================= */

.contact-form .form-group select option {

    background: #061525;

    color: #ffffff;
}


/* =========================================================
   TEXTAREA — LARGER
========================================================= */

.contact-form .form-group textarea {

    min-height: 200px;

    resize: vertical;

    line-height: 1.75;
}


/* =========================================================
   NO HOVER EFFECT
========================================================= */

.contact-form .form-group input:hover,
.contact-form .form-group select:hover,
.contact-form .form-group textarea:hover {

    border-color: rgba(255, 255, 255, 0.20);

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


/* =========================================================
   FOCUS — SIMPLE
========================================================= */

.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus {

    border-color: #E5CB90;

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

    box-shadow: none;

    transform: none;
}


/* =========================================================
   ICON NEVER CHANGES
========================================================= */

.contact-form .form-group label:hover .form-icon,
.contact-form .form-group:focus-within .form-icon {

    background: #E5CB90;

    border-color: #E5CB90;

    color: #ffffff;

    transform: none;

    filter: none;

    box-shadow:
        0 0 10px rgba(229, 203, 144, 0.25);
}


/* =========================================================
   SVG
========================================================= */

.contact-form .form-icon * {

    stroke: #ffffff !important;

    fill: none !important;
}


/* =========================================================
   SEND ENQUIRY
========================================================= */

.contact-form > .btn {

    display: inline-flex;

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

    margin-top: 32px;

    padding: 17px 34px;

    border: 1px solid #E5CB90;

    border-radius: 0;

    background: #E5CB90;

    color: #061525;

    font-size: 0.85rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    cursor: pointer;

    transition: none;
}


/* =========================================================
   BUTTON — NO HOVER ANIMATION
========================================================= */

.contact-form > .btn:hover {

    background: #E5CB90;

    color: #061525;

    border-color: #E5CB90;

    box-shadow: none;

    transform: none;
}


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

@media (max-width: 900px) {

    .contact-form .form-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contact-form .form-group-full {
        grid-column: auto;
    }
}


@media (max-width: 768px) {

    .contact-form .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-form .form-group label {
        font-size: 0.88rem;
    }

    .contact-form .form-group label .form-icon {
        width: 23px;
        height: 23px;
        min-width: 23px;
        padding: 8px;
    }

    .contact-form .form-group input,
    .contact-form .form-group select,
    .contact-form .form-group textarea {
        padding: 17px;
    }

    .contact-form .form-group textarea {
        min-height: 170px;
    }

    .contact-form > .btn {
        width: 100%;
        margin-top: 24px;
    }
}







/* =========================================================
   SAN ENGINEERING
   PAGE INTRODUCTION DESCRIPTION
   Applies ONLY to the small description below the
   main page heading/title
========================================================= */

.hero .hero-description {
    color: #E2D784 !important;
}






/* =========================================================
   HOME HERO — SPECIFIC DESCRIPTION COLOR
   Only "Advanced engineering solutions..." text
========================================================= */

.hero .hero-content .home-hero-description {
    color: #E06B80 !important;
}



 /* =========================================================
    MAIN HEADING DESCRIPTIONS — ALL PAGES
    Color: #E68457
    Larger / Maximum readable size
 ========================================================= */

.intro-grid > .intro-text > p,
.intro-text > p {
    color: #E68457 !important;
    font-size: 1.35rem !important;
    line-height: 1.8 !important;
    max-width: 1000px !important;
}




/* =========================================================
   FOOTER / CONTACT HEADINGS
   Exact color: #E68457
========================================================= */

.footer h3,
.footer h4,
.footer strong,
.footer .company-name,
.footer .contact-heading,
.footer .contact-title {
    color: #E68457 !important;
}










/* =========================================================
SAN ENGINEERING
FINAL VIDEO-STYLE IMAGE CARDS
========================================================= */

/* REMOVE NUMBERING */

.capability-card .card-number,
.industry-card .card-number,
.service-card .card-number,
.project-card .card-number,
.contact-card .card-number,
.quality-card .card-number,
.investor-card .card-number {


display: none !important;


}

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

.capability-card,
.industry-card,
.service-card,
.project-card,
.contact-card,
.quality-card,
.investor-card {


width: 100%;

min-width: 0;

display: flex;

flex-direction: column;

overflow: hidden;

background: #000000 !important;

border: none !important;

border-radius: 0 !important;

box-shadow: none !important;

transform: none !important;


}

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

.capability-card > img,
.industry-card > img,
.service-card > img,
.project-card > img,
.contact-card > img,
.quality-card > img,
.investor-card > img {


display: block !important;

width: 100% !important;

height: 300px !important;

margin: 0 !important;

object-fit: cover !important;

object-position: center !important;

transform: none !important;

filter: none !important;


}

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

.capability-card::after,
.industry-card::after,
.service-card::after,
.project-card::after,
.contact-card::after,
.quality-card::after,
.investor-card::after {


display: none !important;

content: none !important;


}

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

.capability-card details,
.industry-card .card-content,
.service-card .card-content,
.project-card .card-content,
.contact-card .card-content,
.quality-card .card-content,
.investor-card .card-content {


width: 100%;

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

padding: 28px 25px 32px !important;

background: #ffffff !important;


}

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

.capability-card summary,
.industry-card h3,
.service-card h3,
.project-card h3,
.contact-card h3,
.quality-card h3,
.investor-card h3 {


width: 100%;

margin: 0 0 14px 0 !important;

padding: 0 !important;

color: #111111 !important;

font-size: 1.35rem !important;

font-weight: 700;

line-height: 1.3;

text-align: center !important;

text-shadow: none !important;


}

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

.capability-card .card-description,
.industry-card .card-description,
.service-card .card-description,
.project-card .card-description,
.contact-card .card-description,
.quality-card .card-description,
.investor-card .card-description {


width: 100%;

margin: 0 !important;

padding: 0 !important;

text-align: center !important;


}

.capability-card .card-description p,
.industry-card .card-description p,
.service-card .card-description p,
.project-card .card-description p,
.contact-card .card-description p,
.quality-card .card-description p,
.investor-card .card-description p {


width: 100%;

max-width: 650px;

margin: 0 auto !important;

color: #555555 !important;

font-size: 1rem !important;

line-height: 1.7 !important;

text-align: center !important;

}

/* =========================================================
READ MORE
========================================================= */

.card-read-more,
.industry-card > a,
.service-card > a,
.project-card > a,
.quality-card > a,
.investor-card > a {


display: flex !important;

align-items: center;

justify-content: center;

width: 100%;

margin: 22px 0 0 0 !important;

color: #111111 !important;

font-size: 0.82rem !important;

font-weight: 700;

letter-spacing: 0.08em;

text-align: center !important;

text-transform: uppercase;

transform: none !important;


}

/* =========================================================
NO HOVER CHANGES
========================================================= */

.capability-card:hover,
.industry-card:hover,
.service-card:hover,
.project-card:hover,
.contact-card:hover,
.quality-card:hover,
.investor-card:hover {

transform: none !important;

border: none !important;

box-shadow: none !important;


}

.capability-card:hover > img,
.industry-card:hover > img,
.service-card:hover > img,
.project-card:hover > img,
.contact-card:hover > img,
.quality-card:hover > img,
.investor-card:hover > img {


transform: none !important;

filter: none !important;


}

/* =========================================================
REMOVE GOLD TITLE EFFECT
========================================================= */

.capability-card summary:hover,
.capability-card details[open] summary {


color: #111111 !important;

text-shadow: none !important;


}

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

.capability-grid,
.industry-grid,
.service-grid,
.project-grid,
.contact-grid,
.quality-grid,
.investor-grid {


display: grid;

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

gap: 28px;

align-items: start;


}

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

@media (max-width: 1000px) {


.capability-grid,
.industry-grid,
.service-grid,
.project-grid,
.contact-grid,
.quality-grid,
.investor-grid {

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

    gap: 24px;
}


.capability-card > img,
.industry-card > img,
.service-card > img,
.project-card > img,
.contact-card > img,
.quality-card > img,
.investor-card > img {

    height: 280px !important;
}


}

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

@media (max-width: 768px) {


.capability-grid,
.industry-grid,
.service-grid,
.project-grid,
.contact-grid,
.quality-grid,
.investor-grid {

    grid-template-columns: 1fr;

    gap: 24px;
}


.capability-card > img,
.industry-card > img,
.service-card > img,
.project-card > img,
.contact-card > img,
.quality-card > img,
.investor-card > img {

    width: 100% !important;

    height: 280px !important;

    object-fit: cover !important;
}


.capability-card details,
.industry-card .card-content,
.service-card .card-content,
.project-card .card-content,
.contact-card .card-content,
.quality-card .card-content,
.investor-card .card-content {

    padding: 25px 20px 30px !important;
}


}

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

@media (max-width: 480px) {


.capability-card > img,
.industry-card > img,
.service-card > img,
.project-card > img,
.contact-card > img,
.quality-card > img,
.investor-card > img {

    height: 240px !important;
}


.capability-card details,
.industry-card .card-content,
.service-card .card-content,
.project-card .card-content,
.contact-card .card-content,
.quality-card .card-content,
.investor-card .card-content {

    padding: 22px 18px 28px !important;
}


}









/* =========================================================
   IMAGE CARD COLORS
========================================================= */

/* Card Heading */
.capability-card summary,
.industry-card h3,
.service-card h3,
.project-card h3,
.contact-card h3,
.quality-card h3,
.investor-card h3 {
    color: #092328 !important;
}

/* Card Description */
.capability-card .card-description p,
.industry-card .card-description p,
.service-card .card-description p,
.project-card .card-description p,
.contact-card .card-description p,
.quality-card .card-description p,
.investor-card .card-description p {
    color: #4E220F !important;
}







/* =========================================================
   EXPLORE / DISCOVER
   MOVE SLIGHTLY UP — KEEP CENTERED
   NO COLOR CHANGES
========================================================= */

.card-read-more,
.capability-card > a,
.industry-card > a,
.service-card > a,
.project-card > a,
.contact-card > a,
.quality-card > a,
.investor-card > a {

    position: relative !important;

    top: -12px !important;

    text-align: center !important;

    margin-left: auto !important;
    margin-right: auto !important;

    /* keep existing color */
}




/* =========================================================
   SAN ENGINEERING
   FINAL SLIGHT COMPACT SPACING
   Keeps ALL content + images
   Makes section headings visible sooner
========================================================= */


/* =========================================================
   01. SECTIONS
========================================================= */

.section {
    padding: 55px 0;
}


/* =========================================================
   02. SECTION HEADINGS
========================================================= */

.section-heading {
    margin-bottom: 28px;
}

.section-label {
    margin-bottom: 7px;
}

.section-heading h2 {
    line-height: 1.05;
}


/* =========================================================
   03. HERO
========================================================= */

.hero {
    min-height: 100vh;
    padding: 110px 0 55px;
}

.hero-content {
    top: -55px;
}


/* =========================================================
   04. HERO CONTENT SPACING
========================================================= */

.hero .hero-label {
    margin-bottom: 12px;
}

.hero .hero-description {
    margin-top: 18px;
}

.hero-buttons {
    margin-top: 22px;
}


/* =========================================================
   05. WHO WE ARE
========================================================= */

.intro-grid {
    gap: 35px;
}

.intro-horizontal .intro-image {
    margin-bottom: 18px;
}

.intro-horizontal .intro-image img {
    height: 460px;
}


/* =========================================================
   06. ENGINEERING DESCRIPTION
========================================================= */

.description-point {
    gap: 18px;
    margin-bottom: 18px;
}

.point-content h3 {
    margin-bottom: 5px;
}

.intro-horizontal .intro-stat {
    margin-top: 14px;
}


/* =========================================================
   07. IMAGE CARD GRID
========================================================= */

.capability-grid,
.industry-grid,
.service-grid,
.project-grid,
.contact-grid,
.quality-grid,
.investor-grid {
    gap: 20px;
}


/* =========================================================
   08. IMAGE CARDS
========================================================= */

.capability-card > img,
.industry-card > img,
.service-card > img,
.project-card > img,
.contact-card > img,
.quality-card > img,
.investor-card > img {
    height: 235px !important;
}


/* =========================================================
   09. CARD CONTENT
========================================================= */

.capability-card details,
.industry-card .card-content,
.service-card .card-content,
.project-card .card-content,
.contact-card .card-content,
.quality-card .card-content,
.investor-card .card-content {
    padding: 17px 20px 20px !important;
}


/* =========================================================
   10. CARD HEADING
========================================================= */

.capability-card summary,
.industry-card h3,
.service-card h3,
.project-card h3,
.contact-card h3,
.quality-card h3,
.investor-card h3 {
    margin-bottom: 7px !important;
}


/* =========================================================
   11. CARD DESCRIPTION
========================================================= */

.capability-card .card-description,
.industry-card .card-description,
.service-card .card-description,
.project-card .card-description,
.contact-card .card-description,
.quality-card .card-description,
.investor-card .card-description {
    margin: 0 !important;
}


/* =========================================================
   12. READ MORE
========================================================= */

.card-read-more,
.capability-card > a,
.industry-card > a,
.service-card > a,
.project-card > a,
.contact-card > a,
.quality-card > a,
.investor-card > a {
    top: -3px !important;
    margin-top: 10px !important;
}


/* =========================================================
   13. CTA
========================================================= */

.cta-container {
    gap: 28px;
}


/* =========================================================
   14. FOOTER
========================================================= */

.footer-container {
    padding: 42px 0 38px;
    gap: 35px;
}

.footer-about-text {
    margin-top: 13px;
}

.footer-about-link {
    margin-top: 13px;
}

.footer-column h3 {
    margin-bottom: 13px;
}


/* =========================================================
   15. FOOTER CONTACT
========================================================= */

.footer-contact-container {
    padding: 17px 0;
}


/* =========================================================
   16. COPYRIGHT
========================================================= */

.copyright {
    padding: 14px 0 18px;
}


/* =========================================================
   17. TABLET
========================================================= */

@media (max-width: 1000px) {

    .section {
        padding: 50px 0;
    }

    .intro-horizontal .intro-image img {
        height: 420px;
    }

    .capability-card > img,
    .industry-card > img,
    .service-card > img,
    .project-card > img,
    .contact-card > img,
    .quality-card > img,
    .investor-card > img {
        height: 225px !important;
    }
}


/* =========================================================
   18. MOBILE
========================================================= */

@media (max-width: 768px) {

    .section {
        padding: 44px 0;
    }

    .section-heading {
        margin-bottom: 25px;
    }

    .hero {
        min-height: 740px;
        padding: 105px 0 50px;
    }

    .hero-content {
        top: 0;
        left: 0;
    }

    .hero .hero-label {
        margin-bottom: 12px;
    }

    .hero .hero-description {
        margin-top: 16px;
    }

    .hero-buttons {
        margin-top: 20px;
    }

    .intro-horizontal .intro-image {
        margin-bottom: 17px;
    }

    .intro-horizontal .intro-image img {
        height: 340px;
    }

    .description-point {
        gap: 14px;
        margin-bottom: 16px;
    }

    .capability-card > img,
    .industry-card > img,
    .service-card > img,
    .project-card > img,
    .contact-card > img,
    .quality-card > img,
    .investor-card > img {
        height: 225px !important;
    }

    .capability-card details,
    .industry-card .card-content,
    .service-card .card-content,
    .project-card .card-content,
    .contact-card .card-content,
    .quality-card .card-content,
    .investor-card .card-content {
        padding: 16px 17px 19px !important;
    }

    .footer-container {
        padding: 40px 0 32px;
    }
}


/* =========================================================
   19. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .section {
        padding: 38px 0;
    }

    .section-heading {
        margin-bottom: 22px;
    }

    .hero {
        min-height: 680px;
        padding: 100px 0 45px;
    }

    .intro-horizontal .intro-image img {
        height: 290px;
    }

    .capability-card > img,
    .industry-card > img,
    .service-card > img,
    .project-card > img,
    .contact-card > img,
    .quality-card > img,
    .investor-card > img {
        height: 210px !important;
    }

    .capability-card details,
    .industry-card .card-content,
    .service-card .card-content,
    .project-card .card-content,
    .contact-card .card-content,
    .quality-card .card-content,
    .investor-card .card-content {
        padding: 15px 15px 18px !important;
    }
}




/* =========================================================
   QUALITY + INVESTORS
   FULL SCREEN FEATURE ROWS
   ---------------------------------------------------------
   ONLY affects:
   .quality-principles
   .investor-focus
========================================================= */


/* =========================================================
   SECTION
   REMOVE ALL TOP/BOTTOM EXTRA SPACE
========================================================= */

.quality-principles,
.investor-focus {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}


/* =========================================================
   REMOVE CONTAINER SIDE + TOP LIMITS
========================================================= */

.quality-principles > .container,
.investor-focus > .container {
    width: 100%;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.quality-feature-list,
.investor-feature-list {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   FEATURE ROW
   EXACTLY FULL SCREEN
========================================================= */

.quality-feature,
.investor-feature {
    display: grid;

    grid-template-columns: 50% 50%;

    width: 100vw;
    max-width: 100vw;

    min-height: 480px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border: 0 !important;
}


/* =========================================================
   REVERSE ROW
========================================================= */

.quality-feature-reverse,
.investor-feature-reverse {
    grid-template-columns: 50% 50%;
}


/* =========================================================
   IMAGE LEFT
========================================================= */

.quality-feature-image,
.investor-feature-image {
    position: relative;

    width: 100%;
    height: 480px;
    min-height: 480px;

    overflow: hidden;

    order: 1;
}


/* =========================================================
   IMAGE RIGHT
========================================================= */

.quality-feature-reverse .quality-feature-image,
.investor-feature-reverse .investor-feature-image {
    order: 2;
}


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

.quality-feature-image img,
.investor-feature-image img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 480px;

    object-fit: cover;

    transition: transform 0.7s ease;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.quality-feature:hover .quality-feature-image img,
.investor-feature:hover .investor-feature-image img {
    transform: scale(1.045);
}


/* =========================================================
   WHITE DESCRIPTION BOX
========================================================= */

.quality-feature-content,
.investor-feature-content {
    display: flex;

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

    width: 100%;
    min-height: 480px;

    box-sizing: border-box;

    padding: 55px 60px;

    background: #ffffff;

    order: 2;
}


/* =========================================================
   REVERSE TEXT
========================================================= */

.quality-feature-reverse .quality-feature-content,
.investor-feature-reverse .investor-feature-content {
    order: 1;
}


/* =========================================================
   REMOVE NUMBERS
========================================================= */

.quality-feature-number,
.investor-feature-number {
    display: none !important;
}


/* =========================================================
   CENTER HEADINGS
========================================================= */

.quality-feature-content h3,
.investor-feature-content h3 {
    width: 100%;

    margin: 0 0 24px;

    text-align: center;

    font-size: clamp(2rem, 3vw, 3.2rem);

    line-height: 1.08;

    color: #061525;
}


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

.quality-feature-description,
.investor-feature-description {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;

    font-size: 1.05rem;

    line-height: 1.85;

    text-align: left;

    color: #333333;
}


/* =========================================================
   KEY POINTS
========================================================= */

.quality-key-points,
.investor-key-points {
    display: flex;

    flex-wrap: wrap;

    gap: 12px 24px;

    width: 100%;

    margin: 30px 0 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   KEY POINT ITEMS
========================================================= */

.quality-key-points li,
.investor-key-points li {
    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 0.82rem;

    font-weight: 600;

    color: #061525;
}


/* =========================================================
   KEY POINT ICON
========================================================= */

.quality-key-points li span,
.investor-key-points li span {
    color: #28b8b0;
}


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

@media (max-width: 900px) {

    .quality-feature,
    .investor-feature,
    .quality-feature-reverse,
    .investor-feature-reverse {
        grid-template-columns: 1fr;

        width: 100%;
        max-width: 100%;
    }


    /* IMAGE */

    .quality-feature-image,
    .investor-feature-image {
        width: 100%;

        height: 400px;
        min-height: 400px;
    }


    .quality-feature-image img,
    .investor-feature-image img {
        width: 100%;

        height: 400px;
        min-height: 400px;
    }


    /* CONTENT */

    .quality-feature-content,
    .investor-feature-content {
        width: 100%;

        min-height: auto;

        padding: 45px 40px;
    }


    /* REVERSE */

    .quality-feature-reverse .quality-feature-image,
    .investor-feature-reverse .investor-feature-image {
        order: 1;
    }


    .quality-feature-reverse .quality-feature-content,
    .investor-feature-reverse .investor-feature-content {
        order: 2;
    }
}


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

@media (max-width: 600px) {

    /* IMAGE */

    .quality-feature-image,
    .investor-feature-image {
        width: 100%;

        height: 280px;
        min-height: 280px;
    }


    .quality-feature-image img,
    .investor-feature-image img {
        width: 100%;

        height: 280px;
        min-height: 280px;
    }


    /* CONTENT */

    .quality-feature-content,
    .investor-feature-content {
        width: 100%;

        padding: 32px 24px;
    }


    /* HEADING */

    .quality-feature-content h3,
    .investor-feature-content h3 {
        font-size: 2rem;

        line-height: 1.1;

        margin-bottom: 18px;
    }


    /* DESCRIPTION */

    .quality-feature-description,
    .investor-feature-description {
        width: 100%;

        font-size: 0.96rem;

        line-height: 1.75;
    }


    /* KEY POINTS */

    .quality-key-points,
    .investor-key-points {
        flex-direction: column;

        gap: 12px;

        margin-top: 24px;
    }
}


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

@media (max-width: 400px) {

    .quality-feature-content,
    .investor-feature-content {
        padding: 28px 20px;
    }


    .quality-feature-content h3,
    .investor-feature-content h3 {
        font-size: 1.75rem;
    }


    .quality-feature-description,
    .investor-feature-description {
        font-size: 0.92rem;

        line-height: 1.7;
    }


    .quality-key-points li,
    .investor-key-points li {
        font-size: 0.78rem;
    }
}


/* =========================================================
   FINAL ENGINEERING BACKGROUND FIX
   ---------------------------------------------------------
   Background stays fixed to the viewport.
   Engineering objects stay behind ALL content.
   Headings and sections remain clearly visible.
   ========================================================= */

/* PAGE BASE */
html,
body {
    position: relative;
    min-height: 100%;
}

/* Keep the existing engineering background image fixed */
body {
    background-attachment: fixed !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    overflow-x: hidden !important;
}


/* =========================================================
   FIXED ENGINEERING OBJECT LAYER
========================================================= */

.engineering-fixed-layer {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    overflow: hidden !important;

    pointer-events: none !important;

    /* IMPORTANT — NOT -1 */
    z-index: 0 !important;

    transform: none !important;
    isolation: auto !important;
}


/* =========================================================
   ENGINEERING OBJECTS
   Behind content, never above text
========================================================= */

.engineering-object {
    position: absolute !important;

    z-index: 0 !important;

    pointer-events: none !important;

    opacity: 0.38 !important;

    color: rgba(205, 218, 218, 0.13) !important;
}


/* =========================================================
   WEBSITE CONTENT
   Always above engineering background
========================================================= */

header,
.header,
main,
footer,
.footer,
#site-footer,
section,
.hero,
.section,
.cta {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION HEADINGS
   EXTRA VISIBILITY
========================================================= */

.section-heading,
.section-label,
.section-heading h2,
.section-heading h2 span {
    position: relative;
    z-index: 3;
}


/* =========================================================
   INTRO / WHO WE ARE
========================================================= */

.intro,
.intro-grid,
.intro-horizontal,
.intro-text,
.intro-image,
.animated-description,
.description-point {
    position: relative;
    z-index: 2;
}


/* =========================================================
   IMPORTANT:
   CONTAINERS MUST NOT COVER THE BACKGROUND
========================================================= */

.container {
    position: relative;
    z-index: auto;
}


/* =========================================================
   KEEP SECTIONS TRANSPARENT ENOUGH
   Engineering background remains visible
========================================================= */

.section {
    background: rgba(7, 16, 18, 0.20) !important;
}

.intro {
    background: rgba(7, 16, 18, 0.20) !important;
}

.capabilities {
    background: rgba(9, 20, 22, 0.24) !important;
}

.cta {
    background: rgba(7, 16, 18, 0.30) !important;
}


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

.hero {
    position: relative;
    z-index: 2;
    background: transparent !important;
}


/* =========================================================
   MOBILE
   DO NOT CHANGE FIXED BACKGROUND TO SCROLL
========================================================= */

@media (max-width: 768px) {

    body {
        background-attachment: fixed !important;
        background-position: center top !important;
        background-size: cover !important;
    }

    .engineering-fixed-layer {
        position: fixed !important;
        z-index: 0 !important;
    }

    .engineering-object {
        opacity: 0.25 !important;
    }

    .section,
    .intro,
    .capabilities,
    .cta {
        background: rgba(7, 16, 18, 0.24) !important;
    }
}


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

@media (max-width: 480px) {

    .engineering-object {
        opacity: 0.20 !important;
    }

    .section,
    .intro,
    .capabilities,
    .cta {
        background: rgba(7, 16, 18, 0.26) !important;
    }
}









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


/* =====================================================
   ABOUT HERO
   FULL-WIDTH IMAGE + CONTENT OVER IMAGE
   SAME STYLE AS SERVICES / CAPABILITIES
====================================================== */

.about-hero {
    position: relative;
    width: 100%;
    min-height: 850px;
    overflow: hidden;
}


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

.about-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    z-index: 0;
}


/* =====================================================
   DARK ENGINEERING OVERLAY
   SAME AS SERVICES / CAPABILITIES
====================================================== */

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

    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.78) 45%,
        rgba(0, 0, 0, 0.45) 75%,
        rgba(0, 0, 0, 0.18) 100%
    );
}


/* =====================================================
   HERO CONTENT
   SAME POSITIONING AS SERVICES / CAPABILITIES
====================================================== */

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

    width: min(1200px, 90%);
    min-height: 850px;

    margin: 0 auto;
    padding: 20px 0 60px;

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


/* =====================================================
   HERO HEADING
   SAME AS SERVICES / CAPABILITIES
====================================================== */

.about-hero-content .section-heading {
    margin-bottom: 24px;
}


.about-hero-content .section-label {
    margin-bottom: 12px;

    color: #00e5d8;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;
}


.about-hero-content h2 {
    max-width: 850px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(2.2rem, 5vw, 4rem);

    line-height: 1.08;
    letter-spacing: -1.5px;
}


.about-hero-content h2 span {
    display: block;

    color: #f2c94c;
}


/* =====================================================
   ABOUT HERO DESCRIPTION
   SAME AS SERVICES / CAPABILITIES
====================================================== */

.about-hero-text {
    max-width: 850px;
    margin-bottom: 24px;
}


.about-hero-text p {
    margin: 0 0 20px;

    color: #f4f8f8 !important;

    font-size: 1.2rem;
    line-height: 1.75;
}


.about-hero-text p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   OUR APPROACH
   KEEP EXISTING GLOBAL SECTION BEHAVIOUR
====================================================== */

.capabilities {
    width: 100%;
}


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

@media (max-width: 1024px) {

    .about-hero {
        min-height: 800px;
    }


    .about-hero-content {
        min-height: 800px;

        width: 90%;

        padding: 20px 0 55px;
    }


    .about-hero-content .section-heading {
        margin-bottom: 22px;
    }


    .about-hero-text {
        margin-bottom: 22px;
    }


    .about-hero-text p {
        font-size: 1.1rem;
        line-height: 1.7;
    }

}


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

@media (max-width: 768px) {

    .about-hero {
        min-height: auto;
    }


    .about-hero-image {
        object-position: center center;
    }


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

    .about-hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.92) 100%
        );
    }


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

    .about-hero-content {
        min-height: auto;

        width: 88%;

        padding: 60px 0 65px;
    }


    .about-hero-content .section-heading {
        margin-bottom: 24px;
    }


    .about-hero-content .section-label {
        margin-bottom: 12px;
    }


    .about-hero-content h2 {
        max-width: 100%;
    }


    .about-hero-text {
        max-width: 100%;
        margin-bottom: 22px;
    }


    .about-hero-text p {
        margin-bottom: 18px;

        font-size: 1.05rem;
        line-height: 1.7;
    }

}


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

@media (max-width: 480px) {

    .about-hero-content {
        width: 90%;

        padding: 55px 0 60px;
    }


    .about-hero-content .section-heading {
        margin-bottom: 20px;
    }


    .about-hero-text {
        margin-bottom: 20px;
    }


    .about-hero-text p {
        margin-bottom: 16px;

        font-size: 1rem;
        line-height: 1.7;
    }

}


/* =====================================================
   CAPABILITIES HERO
   FULL-WIDTH IMAGE + CONTENT OVER IMAGE
====================================================== */

.capabilities-hero-section {
    position: relative;
    width: 100%;
    min-height: 850px;
    overflow: hidden;
}


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

.capabilities-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;
}


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

.capabilities-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.78) 45%,
        rgba(0, 0, 0, 0.45) 75%,
        rgba(0, 0, 0, 0.18) 100%
    );
}

/* =====================================================
   HERO CONTENT
   TOP-ALIGNED WITH CONTROLLED SPACING
====================================================== */
.capabilities-hero-content {
    position: relative;
    z-index: 2;

    width: min(1200px, 90%);
    min-height: 850px;

    margin: 0 auto;
    padding: 20px 0 60px;

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

/* =====================================================
   HEADING
   EXACT SERVICES / GLOBAL TREATMENT
====================================================== */

.capabilities-hero-content .section-label {
    margin-bottom: 12px;

    color: #00e5d8;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.capabilities-hero-content h1 {
    max-width: 850px;

    margin: 0 0 24px;

    color: #ffffff;

    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.capabilities-hero-content h1 span {
    display: block;
    color: #f2c94c;
}


/* =====================================================
   INTRO TEXT
   EXACT SERVICES TREATMENT
====================================================== */

.capabilities-hero-text {
    max-width: 850px;
    margin-bottom: 24px;
}

.capabilities-hero-text p {
    margin: 0;

    font-size: 1.2rem;
    line-height: 1.75;

    color: #f4f8f8;
}


/* =====================================================
   CAPABILITY FOCUS
====================================================== */

.capability-focus {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    column-gap: 55px;
    row-gap: 0;

    max-width: 1050px;

    margin-top: 0;
}


/* =====================================================
   FOCUS ITEM
====================================================== */

.focus-item {
    display: grid;
    grid-template-columns: 35px 1fr;

    align-items: start;

    gap: 8px;

    padding: 14px 0;
}


/* =====================================================
   FOCUS NUMBER
====================================================== */

.focus-number {
    font-size: 1rem;
    letter-spacing: 1.5px;
    font-weight: 400;
    line-height: 1.2;

    padding-top: 1px;
}


/* =====================================================
   FOCUS HEADING
   EXACT SERVICES HEADING TREATMENT
====================================================== */

.focus-item h3 {
    margin: 0 0 8px;

    color: #D99B21;

    font-size: 1.25rem;
    font-weight: 600;

    line-height: 1.3;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* =====================================================
   FOCUS DESCRIPTION
   EXACT SERVICES DESCRIPTION TREATMENT
====================================================== */

.focus-item p {
    margin: 0;

    font-size: 1.15rem;
    line-height: 1.7;

    max-width: 550px;

    color: #f4f8f8;
}


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

@media (max-width: 1024px) {

    .capabilities-hero-section {
        min-height: 800px;
    }

    .capabilities-hero-content {
        min-height: 800px;
        width: 90%;
        padding: 55px 0 55px;
    }

    .capabilities-hero-text {
        margin-bottom: 22px;
    }

    .capabilities-hero-text p {
        font-size: 1.1rem;
        line-height: 1.7;
    }

    .capability-focus {
        gap: 0 35px;
    }

    .focus-item {
        padding: 13px 0;
    }

}


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

@media (max-width: 768px) {

    .capabilities-hero-section {
        min-height: auto;
    }

    .capabilities-hero-image {
        object-position: center center;
    }

    .capabilities-hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.92) 100%
        );
    }

    .capabilities-hero-content {
        min-height: auto;
        width: 88%;
        padding: 60px 0 65px;
    }

    .capabilities-hero-content h1 {
        margin-bottom: 24px;
    }

    .capabilities-hero-text {
        max-width: 100%;
        margin-bottom: 22px;
    }

    .capabilities-hero-text p {
        font-size: 1.05rem;
        line-height: 1.7;
    }

    .capability-focus {
        grid-template-columns: 1fr;

        gap: 0;

        max-width: 100%;
    }

    .focus-item {
        grid-template-columns: 35px 1fr;

        gap: 8px;

        padding: 16px 0;
    }

    .focus-item h3 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .focus-item p {
        font-size: 1.05rem;
        line-height: 1.7;
    }

}


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

@media (max-width: 480px) {

    .capabilities-hero-content {
        width: 90%;
        padding: 55px 0 60px;
    }

    .capabilities-hero-text {
        margin-bottom: 20px;
    }

    .capabilities-hero-text p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .focus-item {
        grid-template-columns: 35px 1fr;

        gap: 8px;

        padding: 15px 0;
    }

    .focus-item h3 {
        font-size: 1rem;
        line-height: 1.3;
    }

    .focus-item p {
        font-size: 1rem;
        line-height: 1.7;
    }

}








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

.products-hero {
    width: 100%;
    height: 650px;

    margin: 0;
    padding: 0;

    position: relative;
    overflow: hidden;

    background: #000;
}


/* =========================================================
   PRODUCTS HERO IMAGE
========================================================= */

.products-hero-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;
}


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

@media (max-width: 992px) {

    .products-hero {
        height: 540px;
    }

}


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

@media (max-width: 768px) {

    .products-hero {
        height: 460px;
    }

}


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

@media (max-width: 480px) {

    .products-hero {
        height: 390px;
    }

}








/* =========================================================
   INDUSTRIES HERO
   SAME FULL-WIDTH HERO AS PREVIOUS PRODUCTS PAGE
   ========================================================= */

.products-hero {
    width: 100%;
    height: 650px;
    overflow: hidden;
    background: #000;
}

.products-hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    object-position: center center;
}
/* TABLET */

@media (max-width: 992px) {
    .products-hero {
        height: 540px;
    }
}


/* MOBILE */

@media (max-width: 768px) {
    .products-hero {
        height: 460px;
    }
}


/* SMALL MOBILE */

@media (max-width: 480px) {
    .products-hero {
        height: 390px;
    }
}










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

.services-hero {
    position: relative;
    width: 100%;
    min-height: 850px;
    overflow: hidden;
}


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

.services-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.services-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}


/* =====================================================
   DARK ENGINEERING OVERLAY
====================================================== */

.services-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.78) 45%,
        rgba(0, 0, 0, 0.45) 75%,
        rgba(0, 0, 0, 0.18) 100%
    );
}


/* =====================================================
   HERO CONTENT
   TOP-ALIGNED WITH CONTROLLED SPACING
====================================================== */

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

    width: min(1200px, 90%);
    min-height: 850px;

    margin: 0 auto;
    padding: 20px 0 60px;

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

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

.services-hero-content .section-heading {
    margin-bottom: 24px;
}

.services-hero-content .section-label {
    margin-bottom: 12px;
}

.services-hero-content h2 {
    max-width: 850px;
    margin: 0;
}

.services-hero-content h2 span {
    display: block;
}


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

.services-hero-content .intro-text {
    max-width: 850px;
    margin-bottom: 24px;
}


/* =====================================================
   SERVICES HERO INTRO DESCRIPTION COLOR
====================================================== */

.services-hero-content .intro-text p {
    color: #f4f8f8 !important;
}


/* =====================================================
   SERVICE FOCUS GRID
====================================================== */

.service-focus {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    column-gap: 55px;
    row-gap: 0;

    max-width: 1050px;

    margin-top: 0;
}


/* =====================================================
   SERVICE ITEM
====================================================== */

.service-item {
    display: grid;
    grid-template-columns: 42px 1fr;

    align-items: start;

    gap: 10px;

    padding: 14px 0;
}


/* =====================================================
   SERVICE ICONS
====================================================== */

.service-icon {
    width: 35px;
    min-width: 35px;

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

    font-size: 1.65rem;
    line-height: 1;

    padding-top: 0;
}


/* INDIVIDUAL TOOL COLORS */

.service-icon-wrench {
    color: #D99B21;
}

.service-icon-ruler {
    color: #B8C7A0;
}

.service-icon-inspection {
    color: #C58B5A;
}

.service-icon-tools {
    color: #8FA9A0;
}


/* =====================================================
   SERVICE HEADINGS
====================================================== */

.service-item h3 {
    margin: 0 0 8px;

    color: #D99B21;

    font-size: 1.25rem;
    font-weight: 600;

    line-height: 1.3;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* =====================================================
   SERVICE DESCRIPTIONS
====================================================== */

.service-item p {
    margin: 0;

    font-size: 1.15rem;
    line-height: 1.7;

    max-width: 550px;
}


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

@media (max-width: 1024px) {

    .services-hero {
        min-height: 800px;
    }

    .services-hero-content {
        min-height: 800px;
        width: 90%;
        padding: 55px 0 55px;
    }

    .services-hero-content .intro-text {
        margin-bottom: 22px;
    }

    .services-hero-content .intro-text p {
        font-size: 1.1rem;
        line-height: 1.7;
    }

    .service-focus {
        gap: 0 35px;
    }

    .service-item {
        padding: 13px 0;
    }
}


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

@media (max-width: 768px) {

    .services-hero {
        min-height: auto;
    }

    .services-hero-image img {
        object-position: center center;
    }


    /* MOBILE OVERLAY */

    .services-hero::after {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.92) 100%
        );
    }


    /* MOBILE CONTENT */

    .services-hero-content {
        min-height: auto;
        width: 88%;
        padding: 60px 0 65px;
    }

    .services-hero-content .section-heading {
        margin-bottom: 24px;
    }

    .services-hero-content .intro-text {
        max-width: 100%;
        margin-bottom: 22px;
    }

    .services-hero-content .intro-text p {
        font-size: 1.05rem;
        line-height: 1.7;
    }


    /* ONE COLUMN */

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

        gap: 0;

        max-width: 100%;

        margin-top: 0;
    }


    /* SERVICE ITEM */

    .service-item {
        grid-template-columns: 42px 1fr;

        gap: 10px;

        padding: 16px 0;
    }


    /* ICON */

    .service-icon {
        font-size: 1.55rem;
    }


    /* HEADING */

    .service-item h3 {
        font-size: 1.1rem;
        line-height: 1.3;
    }


    /* DESCRIPTION */

    .service-item p {
        font-size: 1.05rem;
        line-height: 1.7;
    }
}


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

@media (max-width: 480px) {

    .services-hero-content {
        width: 90%;
        padding: 55px 0 60px;
    }

    .services-hero-content .intro-text {
        margin-bottom: 20px;
    }

    .services-hero-content .intro-text p {
        font-size: 1rem;
        line-height: 1.7;
    }


    /* SERVICE ITEM */

    .service-item {
        grid-template-columns: 40px 1fr;
        gap: 9px;
        padding: 15px 0;
    }


    /* ICON */

    .service-icon {
        font-size: 1.45rem;
    }


    /* HEADING */

    .service-item h3 {
        font-size: 1rem;
        line-height: 1.3;
    }


    /* DESCRIPTION */

    .service-item p {
        font-size: 1rem;
        line-height: 1.7;
    }
}






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


/* =====================================================
   PROJECTS HERO
   SAME STYLE AS SERVICES / CAPABILITIES / ABOUT
====================================================== */

.projects-hero {
    position: relative;
    width: 100%;
    min-height: 850px;
    overflow: hidden;
}


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

.projects-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    z-index: 0;
}


/* =====================================================
   DARK ENGINEERING OVERLAY
   SAME AS SERVICES
====================================================== */

.projects-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.78) 45%,
        rgba(0, 0, 0, 0.45) 75%,
        rgba(0, 0, 0, 0.18) 100%
    );
}


/* =====================================================
   HERO CONTENT
   SAME TOP POSITION AS SERVICES / CAPABILITIES
====================================================== */

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

    width: min(1200px, 90%);
    min-height: 850px;

    margin: 0 auto;
    padding: 20px 0 60px;

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


/* =====================================================
   HERO HEADING
   EXACT SERVICES STYLE
====================================================== */

.projects-hero-content .section-heading {
    margin-bottom: 24px;
}


.projects-hero-content .section-label {
    margin-bottom: 12px;

    color: #00e5d8;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;
}


.projects-hero-content h2 {
    max-width: 850px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(2.2rem, 5vw, 4rem);

    line-height: 1.08;
    letter-spacing: -1.5px;
}


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

    color: #f2c94c;
}


/* =====================================================
   HERO DESCRIPTION
   EXACT SERVICES STYLE
====================================================== */

.projects-hero-text {
    max-width: 850px;
    margin-bottom: 24px;
}


.projects-hero-text p {
    margin: 0 0 20px;

    color: #f4f8f8 !important;

    font-size: 1.2rem;
    line-height: 1.75;
}


.projects-hero-text p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   PROJECT AREAS
====================================================== */

.capabilities {
    width: 100%;
}


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

@media (max-width: 1024px) {

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


    .projects-hero-content {
        min-height: 800px;

        width: 90%;

        padding: 20px 0 55px;
    }


    .projects-hero-content .section-heading {
        margin-bottom: 22px;
    }


    .projects-hero-text {
        margin-bottom: 22px;
    }


    .projects-hero-text p {
        font-size: 1.1rem;
        line-height: 1.7;
    }

}


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

@media (max-width: 768px) {

    .projects-hero {
        min-height: auto;
    }


    .projects-hero-image {
        object-position: center center;
    }


    /* MOBILE OVERLAY */

    .projects-hero::after {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.92) 100%
        );
    }


    /* MOBILE CONTENT */

    .projects-hero-content {
        min-height: auto;

        width: 88%;

        padding: 60px 0 65px;
    }


    .projects-hero-content .section-heading {
        margin-bottom: 24px;
    }


    .projects-hero-content .section-label {
        margin-bottom: 12px;
    }


    .projects-hero-content h2 {
        max-width: 100%;
    }


    .projects-hero-text {
        max-width: 100%;
        margin-bottom: 22px;
    }


    .projects-hero-text p {
        margin-bottom: 18px;

        font-size: 1.05rem;
        line-height: 1.7;
    }

}


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

@media (max-width: 480px) {

    .projects-hero-content {
        width: 90%;

        padding: 55px 0 60px;
    }


    .projects-hero-content .section-heading {
        margin-bottom: 20px;
    }


    .projects-hero-text {
        margin-bottom: 20px;
    }


    .projects-hero-text p {
        margin-bottom: 16px;

        font-size: 1rem;
        line-height: 1.7;
    }

}












/* =====================================================
   SAN ENGINEERING
   CONTACT PAGE CSS
====================================================== */


/* =====================================================
   CONTACT TOP HERO
====================================================== */

.contact-hero {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
}


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

.contact-hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}


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

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

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.68) 42%,
        rgba(0, 0, 0, 0.25) 75%,
        rgba(0, 0, 0, 0.12) 100%
    );
}


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

.contact-hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;

    width: min(1200px, 90%);
    margin: 0 auto;

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

    padding: 70px 0;
}


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

.contact-hero-content .section-label {
    margin-bottom: 15px;
}


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

.contact-hero-content h1 {
    max-width: 720px;
    margin: 0 0 45px;
}


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

.contact-hero-details {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 65px;

    max-width: 1050px;
}


/* =====================================================
   COMPANY INFORMATION
====================================================== */

.contact-hero-company {
    padding-right: 50px;

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

.contact-hero-company h2 {
    margin: 0 0 18px;
}

.contact-hero-company p {
    margin: 0 0 22px;

    line-height: 1.8;
}


/* =====================================================
   LOCATION LINKS
====================================================== */

.contact-hero-location-links {
    display: flex;
    align-items: center;

    gap: 25px;
    flex-wrap: wrap;
}

.contact-hero-location,
.contact-hero-map {
    text-decoration: none;

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

.contact-hero-location:hover,
.contact-hero-map:hover {
    color: var(--teal);
}

.contact-hero-location:hover {
    transform: translateX(3px);
}


/* =====================================================
   GOOGLE MAPS BUTTON
====================================================== */

.contact-hero-map {
    padding: 11px 18px;

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

.contact-hero-map:hover {
    border-color: var(--teal);
}


/* =====================================================
   RIGHT SIDE CONTACT INFORMATION
====================================================== */

.contact-hero-info {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 20px;
}

.contact-hero-item {
    padding-bottom: 17px;

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

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

.contact-hero-item span {
    display: block;

    margin-bottom: 6px;

    font-size: 0.78rem;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.contact-hero-item a {
    text-decoration: none;

    transition: color 0.3s ease;
}

.contact-hero-item a:hover {
    color: var(--teal);
}


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

.contact-capability-card {
    position: relative;
    overflow: hidden;
}

.contact-capability-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.contact-capability-card details {
    position: relative;
    z-index: 2;
}

.contact-capability-card summary {
    cursor: pointer;
}

.contact-capability-card > a {
    position: relative;
    z-index: 3;

    display: inline-block;

    text-decoration: none;

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

.contact-capability-card > a:hover {
    color: var(--teal);
    transform: translateX(4px);
}


/* =====================================================
   CONTACT CARD DESCRIPTION
====================================================== */

.contact-capability-card .card-description {
    position: relative;
    z-index: 2;
}

.contact-capability-card .card-description p {
    line-height: 1.7;
}


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

.contact-form {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}

.form-grid {
    display: grid;

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

    gap: 28px 30px;
}

.form-group {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.form-group-full {
    grid-column: 1 / -1;
}


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

.contact-form .form-group > label {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 10px;

    color: #ffffff !important;

    font-size: 0.9rem;
    font-weight: 600;

    line-height: 1.3;

    letter-spacing: 0.3px;
}


/* =====================================================
   REQUIRED STAR
====================================================== */

.contact-form .form-group > label > span {
    color: #ffffff !important;

    font-weight: 700;
}


/* =====================================================
   FIELD ICON
   WHITE BOX + BLACK ICON
====================================================== */

.contact-form .form-group > label .form-icon {
    width: 23px;
    height: 23px;

    min-width: 23px;
    min-height: 23px;

    flex: 0 0 23px;

    display: inline-block;

    padding: 4px;

    box-sizing: border-box;

    background: #ffffff !important;

    color: #000000 !important;

    border: none;

    border-radius: 2px;

    overflow: hidden;

    vertical-align: middle;
}


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

.contact-form .form-group > label .form-icon,
.contact-form .form-group > label .form-icon * {
    color: #000000 !important;

    stroke: #000000 !important;

    fill: none !important;
}


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

.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #ffffff;

    border-radius: 0;

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

    color: #ffffff;

    font-family: inherit;

    font-size: 0.95rem;

    outline: none;

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


/* =====================================================
   INPUT + SELECT HEIGHT
====================================================== */

.contact-form .form-group input,
.contact-form .form-group select {
    height: 54px;

    padding: 0 17px;
}


/* =====================================================
   TEXTAREA
====================================================== */

.contact-form .form-group textarea {
    min-height: 190px;

    padding: 16px 17px;

    resize: vertical;

    line-height: 1.6;
}


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

.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {
    color: #ffffff;

    opacity: 0.65;
}


/* =====================================================
   ENQUIRY TYPE
   SAME STYLE AS OTHER FIELDS
====================================================== */

.contact-form .form-group select {
    height: 54px;

    padding: 0 45px 0 17px;

    box-sizing: border-box;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color:
        rgba(255, 255, 255, 0.08) !important;

    color: #ffffff !important;

    border: 1px solid #ffffff;

    font-family: inherit;

    font-size: 0.95rem;

    font-weight: 400;

    line-height: normal;

    text-align: left;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #ffffff 50%
        ),
        linear-gradient(
            135deg,
            #ffffff 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px) 23px,
        calc(100% - 15px) 23px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


/* =====================================================
   ENQUIRY OPTIONS
====================================================== */

.contact-form .form-group select option {
    background: #101d1f !important;

    color: #ffffff !important;

    font-family: inherit;

    font-size: 0.95rem;
}


/* =====================================================
   INPUT FOCUS
====================================================== */

.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
    border-color: #ffffff;

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

    color: #ffffff;

    box-shadow:
        0 0 0 2px
        rgba(255, 255, 255, 0.10);
}


/* =====================================================
   SELECT FOCUS
====================================================== */

.contact-form .form-group select:focus {
    border-color: #ffffff;

    background:
        rgba(255, 255, 255, 0.12) !important;

    color: #ffffff !important;

    box-shadow:
        0 0 0 2px
        rgba(255, 255, 255, 0.10);
}


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

.contact-form-submit {
    margin-top: 35px;

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

    gap: 12px;

    cursor: pointer;
}

.contact-form-submit span {
    transition:
        transform 0.3s ease;
}

.contact-form-submit:hover span {
    transform: translateX(5px);
}


/* =====================================================
   HIDDEN BOTCHECK
====================================================== */

.contact-form .hidden {
    display: none !important;
}


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

@media (max-width: 1024px) {

    .contact-hero {
        height: 550px;
    }

    .contact-hero-details {
        gap: 40px;
    }

    .contact-hero-content {
        width: 90%;
    }

    .form-grid {
        gap: 24px;
    }

    .contact-form .form-group select {
        height: 54px;

        padding-left: 15px;
        padding-right: 43px;
    }
}


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

@media (max-width: 768px) {

    .contact-hero {
        height: auto;
        min-height: 650px;
    }

    .contact-hero-image {
        object-position: center center;
    }

    .contact-hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.88) 100%
        );
    }

    .contact-hero-content {
        position: relative;
        inset: auto;

        width: 88%;

        padding: 70px 0;
    }

    .contact-hero-details {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .contact-hero-company {
        padding-right: 0;
        padding-bottom: 28px;

        border-right: none;

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

    .contact-hero-info {
        gap: 18px;
    }


    /* LOCATION LINKS */

    .contact-hero-location-links {
        gap: 15px;
    }


    /* FORM */

    .form-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .form-group-full {
        grid-column: auto;
    }

    .contact-form .form-group input,
    .contact-form .form-group select {
        height: 52px;
    }

    .contact-form .form-group select {
        padding: 0 43px 0 14px;

        line-height: normal;
    }

    .contact-form .form-group textarea {
        min-height: 170px;
    }

    .contact-form-submit {
        width: 100%;
    }
}


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

@media (max-width: 480px) {

    .contact-hero {
        min-height: 680px;
    }

    .contact-hero-content {
        width: 90%;

        padding: 60px 0;
    }

    .contact-hero-content h1 {
        margin-bottom: 35px;
    }

    .contact-hero-company h2 {
        font-size: 1.25rem;
    }

    .contact-hero-location-links {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

    .contact-hero-map {
        padding: 10px 15px;
    }


    /* FORM LABEL */

    .contact-form .form-group > label {
        font-size: 0.85rem;
    }


    /* ICON */

    .contact-form .form-group > label .form-icon {
        width: 22px;
        height: 22px;

        min-width: 22px;
        min-height: 22px;

        flex-basis: 22px;

        padding: 4px;
    }


    /* INPUTS */

    .contact-form .form-group input,
    .contact-form .form-group select {
        height: 50px;

        padding-left: 14px;
        padding-right: 14px;
    }


    /* ENQUIRY */

    .contact-form .form-group select {
        padding-right: 40px;

        line-height: normal;
    }


    /* TEXTAREA */

    .contact-form .form-group textarea {
        padding: 14px;

        min-height: 160px;
    }
}


/* =====================================================
   VERY SMALL MOBILE
====================================================== */

@media (max-width: 360px) {

    .contact-hero {
        min-height: 700px;
    }

    .contact-hero-content {
        width: 92%;

        padding: 50px 0;
    }

    .contact-hero-location {
        font-size: 0.9rem;
    }

    .contact-hero-map {
        font-size: 0.85rem;
    }

    .contact-form .form-group select {
        padding-left: 12px;
        padding-right: 38px;
    }
}
























/* =========================================================
   FORCE ICON ITSELF TO BLACK
   KEEP ALL COLORS STABLE
========================================================= */

.description-point .point-icon {
    background: #E5CB90 !important;
    border-color: #E5CB90 !important;
    color: #000000 !important;
}

/* SVG itself */
.description-point .point-icon,
.description-point .point-icon svg {
    color: #000000 !important;
}

.description-point .point-icon svg * {
    stroke: #000000 !important;
    fill: none !important;
}

/* Override every hover/highlight state */
.description-point:hover .point-icon,
.description-point.icon-highlighted .point-icon,
.description-point.icon-highlighted:hover .point-icon {
    background: #E5CB90 !important;
    border-color: #E5CB90 !important;
    color: #000000 !important;
    transform: none !important;
    box-shadow: none !important;
}

.description-point:hover .point-icon svg,
.description-point.icon-highlighted .point-icon svg,
.description-point.icon-highlighted:hover .point-icon svg {
    color: #000000 !important;
    transform: none !important;
    filter: none !important;
}

.description-point:hover .point-icon svg *,
.description-point.icon-highlighted .point-icon svg *,
.description-point.icon-highlighted:hover .point-icon svg * {
    stroke: #000000 !important;
    fill: none !important;
}

/* Heading */
.description-point h3,
.description-point:hover h3,
.description-point.icon-highlighted h3 {
    color: #D99B21 !important;
}

/* Description */
.description-point p,
.description-point:hover p,
.description-point.icon-highlighted p {
    color: #F4F8F8 !important;
}





/* =========================================================
   HOME HERO DESCRIPTION — FORCE COLOR
========================================================= */

.hero-container .hero-content p.hero-description.home-hero-description {
    color: #E6E2D8 !important;
}

/* =========================================================
   HOME — IMAGE LOAD ONLY
========================================================= */

.capability-card img {
    opacity: 1 !important;
    visibility: visible !important;
}






































/* =========================================================
   SAN ENGINEERING — 7 CLEAR CINEMATIC HERO REVEALS
   ========================================================= */

/* ABOUT — Horizontal */
.about-hero-image {
    animation: aboutHeroReveal 1.5s cubic-bezier(.65,0,.35,1) both;
}
@keyframes aboutHeroReveal {
    from { clip-path: inset(50% 0 50% 0); }
    to   { clip-path: inset(0); }
}


/* CAPABILITIES — Diagonal */
.capabilities-hero-image {
    animation: capabilitiesHeroReveal 1.6s cubic-bezier(.65,0,.35,1) both;
}
@keyframes capabilitiesHeroReveal {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}


/* PRODUCTS — Center Expansion */
.products-hero-image {
    animation: productsHeroReveal 1.6s cubic-bezier(.65,0,.35,1) both;
}
@keyframes productsHeroReveal {
    from { clip-path: inset(0 50% 0 50%); }
    to   { clip-path: inset(0); }
}


/* INDUSTRIES — Vertical */
.industries-hero-image {
    animation: industriesHeroReveal 1.6s cubic-bezier(.65,0,.35,1) both;
}
@keyframes industriesHeroReveal {
    from { clip-path: inset(50% 0 50% 0); }
    to   { clip-path: inset(0); }
}


/* SERVICES — Radial */
.services-hero-image {
    animation: servicesHeroReveal 1.7s cubic-bezier(.65,0,.35,1) both;
}
@keyframes servicesHeroReveal {
    from { clip-path: circle(0% at 50% 50%); }
    to   { clip-path: circle(100% at 50% 50%); }
}


/* PROJECTS — Four-Side Aperture */
.projects-hero-image {
    animation: projectsHeroReveal 1.6s cubic-bezier(.65,0,.35,1) both;
}
@keyframes projectsHeroReveal {
    from { clip-path: inset(50% 50% 50% 50%); }
    to   { clip-path: inset(0); }
}


/* CONTACT — Side Curtain */
.contact-hero-image {
    animation: contactHeroReveal 1.6s cubic-bezier(.65,0,.35,1) both;
}
@keyframes contactHeroReveal {
    from { clip-path: inset(0 50% 0 50%); }
    to   { clip-path: inset(0); }
}








/* =========================================================
   HERO IMAGE — PRESERVE ORIGINAL IMAGE QUALITY
   ========================================================= */

.about-hero-image,
.capabilities-hero-image,
.products-hero-image,
.industries-hero-image,
.services-hero-image,
.projects-hero-image,
.contact-hero-image {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}






/* =========================================================
   ALL HEROES — SLIGHTLY LIGHTER OVERLAY
   ========================================================= */

.about-hero-overlay,
.capabilities-hero-overlay,
.products-hero-overlay,
.industries-hero-overlay,
.services-hero-overlay,
.projects-hero-overlay,
.contact-hero-overlay {
    opacity: 0.75;
}
















/* =========================================================
   QUALITY + INVESTORS
   UNIQUE CINEMATIC IMAGE REVEALS
   ---------------------------------------------------------
   No opacity
   No blur
   No filter
   No zoom
   Existing layout preserved
========================================================= */


/* =========================================================
   QUALITY — 01
   CIRCULAR LENS REVEAL
========================================================= */

.quality-feature:nth-child(1) .quality-feature-image img {
    animation: qualityLensReveal 1.8s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes qualityLensReveal {

    from {
        clip-path: circle(0% at 50% 50%);
    }

    to {
        clip-path: circle(75% at 50% 50%);
    }

}


/* =========================================================
   QUALITY — 02
   HORIZONTAL SHUTTER REVEAL
========================================================= */

.quality-feature:nth-child(2) .quality-feature-image img {
    animation: qualityShutterReveal 1.8s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes qualityShutterReveal {

    from {
        clip-path: inset(0 50% 0 50%);
    }

    50% {
        clip-path: inset(0 20% 0 20%);
    }

    to {
        clip-path: inset(0);
    }

}


/* =========================================================
   QUALITY — 03
   DIAGONAL APERTURE REVEAL
========================================================= */

.quality-feature:nth-child(3) .quality-feature-image img {
    animation: qualityDiagonalReveal 1.9s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes qualityDiagonalReveal {

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

    50% {
        clip-path: polygon(
            0 0,
            55% 0,
            0 100%,
            0 100%
        );
    }

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

}


/* =========================================================
   INVESTORS — 01
   ELLIPTICAL APERTURE REVEAL
========================================================= */

.investor-feature:nth-child(1) .investor-feature-image img {
    animation: investorEllipseReveal 1.9s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes investorEllipseReveal {

    from {
        clip-path: ellipse(0% 0% at 50% 50%);
    }

    to {
        clip-path: ellipse(100% 100% at 50% 50%);
    }

}


/* =========================================================
   INVESTORS — 02
   FOUR-CORNER OPENING
========================================================= */

.investor-feature:nth-child(2) .investor-feature-image img {
    animation: investorCornerReveal 1.9s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes investorCornerReveal {

    from {
        clip-path: polygon(
            50% 50%,
            50% 50%,
            50% 50%,
            50% 50%
        );
    }

    45% {
        clip-path: polygon(
            15% 15%,
            85% 15%,
            85% 85%,
            15% 85%
        );
    }

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

}


/* =========================================================
   INVESTORS — 03
   VERTICAL APERTURE REVEAL
========================================================= */

.investor-feature:nth-child(3) .investor-feature-image img {
    animation: investorVerticalReveal 1.8s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes investorVerticalReveal {

    from {
        clip-path: inset(50% 0 50% 0);
    }

    45% {
        clip-path: inset(15% 0 15% 0);
    }

    to {
        clip-path: inset(0);
    }

}


/* =========================================================
   PRESERVE ORIGINAL IMAGE QUALITY
========================================================= */

.quality-feature-image img,
.investor-feature-image img {
    opacity: 1;
    filter: none;
}








/* =========================================================
   GLOBAL SECTION HEADING COLOUR EFFECT
   ---------------------------------------------------------
   MAIN HEADING  : WHITE
   SPAN HEADING  : WHITE → #f2c94c → WHITE
   NO BLUE
   NO CYAN
   NO NAVY
========================================================= */


/* =========================================================
   MAIN HEADING
   Keeps the normal heading text WHITE
========================================================= */

.section-heading h2 {
    color: #ffffff;
}


/* =========================================================
   HIGHLIGHTED HEADING
   Only the text inside <span> animates
========================================================= */

.section-heading h2 span {
    color: #ffffff;

    animation-name: headingWhiteGold;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}


/* =========================================================
   WHITE → GOLD → WHITE
========================================================= */

@keyframes headingWhiteGold {

    0% {
        color: #ffffff;
    }

    50% {
        color: #f2c94c;
    }

    100% {
        color: #ffffff;
    }

}













/* =========================================================
   WHO WE ARE — ALTERNATING HEADING + FULL-WIDTH DESCRIPTION
========================================================= */

.intro .intro-text {
    width: 100%;
    max-width: none;
}

.intro .animated-description {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Each point uses the complete available width */
.intro .description-point {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* =========================================================
   ICON + HEADING
========================================================= */

.intro .point-content {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Heading stays beside the icon */
.intro .point-content h3 {
    margin: 0 0 18px 0;
    min-height: 68px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* =========================================================
   DESCRIPTION — FULL WIDTH
========================================================= */

.intro .point-content p {
    width: 100%;
    max-width: none !important;
    margin: 0;
    text-align: left;
    box-sizing: border-box;
}

/* =========================================================
   LEFT POINTS
   Icon + heading on LEFT
========================================================= */

.intro .point-locomotive .point-icon,
.intro .point-manufacturing .point-icon {
    float: left;
    margin: 0 24px 0 0;
}

.intro .point-locomotive .point-content h3,
.intro .point-manufacturing .point-content h3 {
    justify-content: flex-start;
    text-align: left;
    padding-left: 0;
}

/* Clear the icon before the paragraph */
.intro .point-locomotive .point-content p,
.intro .point-manufacturing .point-content p {
    clear: both;
}


/* =========================================================
   RIGHT POINTS
   Heading + icon on RIGHT
========================================================= */

.intro .point-transmission .point-icon,
.intro .point-quality .point-icon {
    float: right;
    margin: 0 0 0 24px;
}

.intro .point-transmission .point-content h3,
.intro .point-quality .point-content h3 {
    justify-content: flex-end;
    text-align: right;
    padding-right: 0;
}

/* Description still occupies the COMPLETE WIDTH */
.intro .point-transmission .point-content p,
.intro .point-quality .point-content p {
    clear: both;
    text-align: left;
}


/* =========================================================
   ICON SIZE — KEEP EXISTING DESIGN
========================================================= */

.intro .point-icon {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}


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

@media (max-width: 768px) {

    .intro .animated-description {
        gap: 45px;
    }

    .intro .description-point {
        width: 100%;
    }

    .intro .point-locomotive .point-icon,
    .intro .point-manufacturing .point-icon,
    .intro .point-transmission .point-icon,
    .intro .point-quality .point-icon {
        float: left;
        margin: 0 20px 0 0;
    }

    .intro .point-locomotive .point-content h3,
    .intro .point-manufacturing .point-content h3,
    .intro .point-transmission .point-content h3,
    .intro .point-quality .point-content h3 {
        justify-content: flex-start;
        text-align: left;
    }

    .intro .point-content p {
        clear: both;
        width: 100%;
        max-width: none !important;
        text-align: left;
    }
}





 /* =========================================================
    WHO WE ARE — LARGER DESCRIPTIONS
 ========================================================= */

.intro .intro-text {
    width: 100%;
    max-width: none;
}

.intro .animated-description {
    width: 100%;
    max-width: none;
}

/* Description text */
.intro .point-content p {
    width: 100%;
    max-width: none !important;

    margin: 0;

    font-size: 1.25rem !important;
    line-height: 1.9 !important;
    letter-spacing: 0.01em;

    text-align: left;
}

/* Give every description more horizontal space */
.intro .description-point {
    width: 100%;
    max-width: none;
}

/* Keep paragraphs comfortably separated from headings */
.intro .point-content h3 {
    margin-bottom: 20px;
}

/* Mobile */
@media (max-width: 768px) {

    .intro .point-content p {
        width: 100%;
        max-width: none !important;

        font-size: 1.08rem !important;
        line-height: 1.8 !important;
    }
}










/* =====================================================
   SERVICES — MOVE PROCESS OPTIMIZATION & FIELD SUPPORT
   TO THE RIGHT
===================================================== */
/* Move 2nd and 4th service points further right */

.service-focus .service-item:nth-child(2),
.service-focus .service-item:nth-child(4) {
    transform: translateX(160px);
}