/* =========================================================
   FUEL SECURITY CO. LTD.
   MAIN STYLESHEET
   ========================================================= */

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

:root {

    /* Brand Colors */
    --black: #000000;
    --black-soft: #080808;
    --black-card: #101010;
    --black-light: #171717;

    --gold: #FFD700;
    --gold-deep: #FFCC00;
    --gold-soft: rgba(255, 215, 0, 0.14);

    --green: #1E5A3A;
    --green-dark: #123B28;

    --sky: #87CEEB;

    --blue: #1A3B70;
    --blue-dark: #0C1D39;

    --grey: #808080;
    --grey-dark: #5A5A5A;
    --grey-light: #A8A8A8;

    --white: #FFFFFF;
    --off-white: #F5F5F1;
    --text: #D8D8D8;
    --text-dark: #666666;

    /* Layout */
    --container: 1320px;
    --section-padding: 120px;

    /* Typography */
    --font-main: "Inter", sans-serif;
    --font-display: "Manrope", sans-serif;

    /* Effects */
    --border: rgba(255, 255, 255, 0.10);
    --border-dark: rgba(0, 0, 0, 0.10);

    --shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);

    --shadow-gold:
        0 15px 50px rgba(255, 215, 0, 0.15);

    --transition:
        0.35s cubic-bezier(0.22, 1, 0.36, 1);

    --transition-fast:
        0.2s ease;
}


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

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: var(--font-main);
    background: var(--off-white);
    color: var(--black);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

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

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}


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

.container {
    width: min(
        calc(100% - 60px),
        var(--container)
    );

    margin-inline: auto;
}


/* =========================================================
   04. PRELOADER
   ========================================================= */

.preloader {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: grid;
    place-items: center;

    background: var(--black);

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

.preloader.hide {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
}

.loader-mark {
    width: 58px;
    height: 58px;

    margin-inline: auto;
    margin-bottom: 20px;

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

    gap: 5px;
}

.loader-mark span {
    display: block;

    width: 7px;

    background: var(--gold);

    animation:
        loaderBar 1s infinite
        cubic-bezier(0.45, 0, 0.55, 1);
}

.loader-mark span:nth-child(1) {
    height: 35%;
    animation-delay: 0s;
}

.loader-mark span:nth-child(2) {
    height: 75%;
    animation-delay: 0.12s;
}

.loader-mark span:nth-child(3) {
    height: 50%;
    animation-delay: 0.24s;
}

.loader-content p {
    color: var(--white);

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

    letter-spacing: 0.32em;
}

@keyframes loaderBar {

    0%,
    100% {
        transform: scaleY(0.55);
        opacity: 0.45;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}


/* =========================================================
   05. HEADER
   ========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    border-bottom: 1px solid transparent;

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

.site-header.scrolled {
    background: rgba(0, 0, 0, 0.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-color: rgba(255, 215, 0, 0.13);

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.25);
}

.nav-container {
    min-height: 92px;

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

    gap: 40px;

    transition: min-height var(--transition);
}

.site-header.scrolled .nav-container {
    min-height: 76px;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}

.brand-logo {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    overflow: hidden;
}

.brand-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.brand-text strong {
    color: var(--white);

    font-family: var(--font-display);

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

    letter-spacing: 0.08em;
}

.brand-text span {
    margin-top: 5px;

    color: var(--gold);

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

    letter-spacing: 0.28em;
}


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

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

    gap: 34px;

    margin-left: auto;
}

.nav-link {
    position: relative;

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

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

    letter-spacing: 0.08em;

    text-transform: uppercase;

    padding: 10px 0;

    transition:
        color var(--transition-fast);
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 3px;

    width: 0;
    height: 2px;

    background: var(--gold);

    transition: width var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: var(--white);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


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

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

    gap: 18px;
}

.nav-cta {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    color: var(--black);

    background: var(--gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

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

.nav-cta:hover {
    background: var(--white);

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(255, 215, 0, 0.18);
}

.nav-cta i {
    font-size: 10px;
}


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

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    position: relative;

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

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

    flex-direction: column;

    gap: 5px;
}

.menu-toggle span {
    display: block;

    width: 20px;
    height: 1.5px;

    background: var(--white);

    transition: transform var(--transition);
}

.menu-toggle.active span:nth-child(1) {
    transform:
        translateY(6.5px)
        rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform:
        translateY(-6.5px)
        rotate(-45deg);
}


/* =========================================================
   06. HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    align-items: center;

    background: var(--black);

    overflow: hidden;
}


/* HERO BACKGROUND */

.hero-background {
    position: absolute;

    inset: 0;

    transform: scale(1.03);

    background: var(--black);
}

.hero-slides,
.hero-slide,
.hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-slides {
    overflow: hidden;
}

.hero-slide {
    z-index: 1;
    transform: translateX(100%);
    will-change: transform;
}

.hero-slide img {
    object-fit: cover;
    object-position: center;
}

.hero-slide.is-active {
    z-index: 2;
    animation: heroSlideIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-slide.is-leaving {
    z-index: 1;
    animation: heroSlideOut 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heroSlideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes heroSlideOut {
    from {
        transform: translateX(0);
    }

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

@keyframes heroImage {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }
}

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

    z-index: 3;

    background:
        radial-gradient(
            circle at 70% 45%,
            rgba(255, 215, 0, 0.08),
            transparent 30%
        );
}

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

    z-index: 4;

    opacity: 0.12;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 80%
        );
}


/* HERO CONTENT */

.hero-container {
    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 60px),
        var(--container)
    );

    padding-top: 120px;
    padding-bottom: 170px;
}

.hero-content {
    width: min(850px, 80%);
}


/* EYEBROW */

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

    gap: 14px;

    margin-bottom: 28px;

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

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

    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.eyebrow-line {
    width: 42px;
    height: 1px;

    background: var(--gold);
}


/* HERO TITLE */

.hero-title {
    display: flex;
    flex-direction: column;

    color: var(--white);

    font-family: var(--font-display);

    font-size:
        clamp(52px, 7.2vw, 108px);

    line-height: 0.93;

    font-weight: 800;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}

.hero-title .accent-text {
    color: var(--gold);
}


/* HERO DESCRIPTION */

.hero-description {
    width: min(650px, 100%);

    margin-top: 32px;

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

    font-size: 16px;

    line-height: 1.8;
}


/* HERO BUTTONS */

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

    gap: 14px;

    margin-top: 38px;
}


/* BUTTONS */

.btn {
    min-height: 54px;

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

    gap: 14px;

    padding: 0 24px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

.btn-primary {
    color: var(--black);

    background: var(--gold);
}

.btn-primary:hover {
    background: var(--white);

    transform: translateY(-3px);

    box-shadow:
        0 15px 40px rgba(255, 215, 0, 0.16);
}

.btn-outline {
    color: var(--white);

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

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

.btn-outline:hover {
    border-color: var(--gold);

    color: var(--gold);

    background: rgba(255, 215, 0, 0.05);

    transform: translateY(-3px);
}

.btn-gold {
    color: var(--black);

    background: var(--gold);
}

.btn-gold:hover {
    background: var(--white);

    transform: translateY(-3px);

    box-shadow:
        0 15px 45px rgba(255, 215, 0, 0.18);
}


/* HERO SIDE */

.hero-side {
    position: absolute;

    right: 0;
    top: 50%;

    transform:
        translateY(-50%)
        translateX(-5px);

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

    flex-direction: column;

    width: 150px;

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

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

    letter-spacing: 0.2em;

    line-height: 1.6;
}

.hero-side-line {
    width: 1px;
    height: 90px;

    margin-bottom: 18px;

    background:
        linear-gradient(
            to bottom,
            var(--gold),
            transparent
        );
}

.hero-side strong {
    margin-top: 8px;

    color: var(--white);

    font-size: 10px;

    line-height: 1.5;
}


/* HERO BOTTOM */

.hero-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    z-index: 3;

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

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72),
            rgba(0, 0, 0, 0.28)
        );
}

.hero-bottom-container {
    min-height: 92px;

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

    gap: 40px;
}

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

    gap: 14px;
}

.hero-location > i {
    color: var(--gold);

    font-size: 15px;
}

.hero-location div {
    display: flex;
    flex-direction: column;
}

.hero-location span {
    color: rgba(255, 255, 255, 0.42);

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

    letter-spacing: 0.18em;
}

.hero-location strong {
    margin-top: 4px;

    color: var(--white);

    font-size: 11px;
    font-weight: 600;
}

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

    gap: 10px;

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

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

    letter-spacing: 0.12em;
}

.hero-industries .separator {
    color: var(--gold);
}

.scroll-indicator {
    display: flex;
    align-items: center;

    gap: 12px;

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

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

    letter-spacing: 0.16em;

    transition: color var(--transition-fast);
}

.scroll-indicator i {
    color: var(--gold);

    animation:
        scrollArrow 1.6s infinite;
}

.scroll-indicator:hover {
    color: var(--white);
}

@keyframes scrollArrow {

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

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


/* =========================================================
   07. GENERAL SECTIONS
========================================================= */

.section {
    padding-block: var(--section-padding);
}

.section-dark {
    position: relative;

    padding-block: var(--section-padding);

    color: var(--white);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(26, 59, 112, 0.25),
            transparent 32%
        ),
        var(--black);
}


/* SECTION LABEL */

.section-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: var(--text-dark);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.section-label span:first-child {
    color: var(--gold);

    font-family: var(--font-display);

    font-size: 13px;

    letter-spacing: 0;
}

.section-label.light {
    color: rgba(255, 255, 255, 0.42);
}


/* =========================================================
   08. ABOUT PREVIEW
========================================================= */

.about-preview {
    background: var(--off-white);
}

.section-header {
    max-width: 900px;

    margin-bottom: 70px;
}

.section-header h2,
.capabilities-heading h2,
.locations-header h2,
.gallery-heading h2 {
    color: var(--black);

    font-family: var(--font-display);

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

    line-height: 0.98;

    font-weight: 800;

    letter-spacing: -0.05em;

    text-transform: uppercase;
}

.section-header h2 span,
.capabilities-heading h2 span,
.locations-header h2 span,
.gallery-heading h2 span {
    color: var(--gold-deep);
}


/* ABOUT GRID */

.about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: 90px;

    align-items: center;
}

.about-visual {
    position: relative;
}

.image-frame {
    position: relative;

    aspect-ratio: 1 / 1.05;

    overflow: hidden;

    background: var(--grey-dark);
}

.image-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(255, 215, 0, 0.15)
        );

    pointer-events: none;
}

.image-frame img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-visual:hover .image-frame img {
    transform: scale(1.04);
}

.image-badge {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 2;

    min-width: 190px;

    padding: 24px;

    display: flex;
    align-items: center;

    gap: 16px;

    background: var(--gold);

    color: var(--black);
}

.badge-number {
    font-family: var(--font-display);

    font-size: 30px;
    font-weight: 800;
}

.badge-text {
    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.15em;

    line-height: 1.5;
}

.about-content {
    max-width: 590px;
}

.content-kicker {
    color: var(--green);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.about-content h3 {
    margin-top: 18px;

    color: var(--black);

    font-family: var(--font-display);

    font-size:
        clamp(30px, 3.2vw, 48px);

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -0.045em;
}

.about-content p {
    margin-top: 22px;

    color: #5F5F5F;

    font-size: 14px;

    line-height: 1.85;
}

.about-content p + p {
    margin-top: 12px;
}

.text-link {
    display: inline-flex;
    align-items: center;

    gap: 16px;

    margin-top: 32px;

    color: var(--black);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.text-link i {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    color: var(--black);

    border: 1px solid rgba(0, 0, 0, 0.2);

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

.text-link:hover i {
    color: var(--black);

    background: var(--gold);

    border-color: var(--gold);

    transform: translateX(5px);
}


/* =========================================================
   09. PILLARS
========================================================= */

.pillars {
    background:
        linear-gradient(
            115deg,
            #030303 0%,
            #090909 50%,
            #101010 100%
        );
}

.pillars-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;
}

.pillars-top p {
    width: min(480px, 100%);

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

    font-size: 14px;

    line-height: 1.8;
}

.pillars-grid {
    display: grid;

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

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

    border-left:
        1px solid rgba(255, 255, 255, 0.1);
}

.pillar-card {
    position: relative;

    min-height: 500px;

    padding: 40px;

    display: flex;
    flex-direction: column;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.02),
            transparent
        );

    overflow: hidden;

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

.pillar-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 3px;

    background: var(--gold);

    transition: width var(--transition);
}

.pillar-card:hover::before {
    width: 100%;
}

.pillar-card:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 215, 0, 0.055),
            transparent 65%
        );

    transform: translateY(-5px);
}

.pillar-number {
    color: rgba(255, 255, 255, 0.2);

    font-family: var(--font-display);

    font-size: 12px;
    font-weight: 800;
}

.pillar-icon {
    width: 58px;
    height: 58px;

    margin-top: 75px;

    display: grid;
    place-items: center;

    color: var(--gold);

    border:
        1px solid rgba(255, 215, 0, 0.3);

    background:
        rgba(255, 215, 0, 0.04);
}

.pillar-icon i {
    font-size: 20px;
}

.pillar-card h3 {
    margin-top: 25px;

    color: var(--white);

    font-family: var(--font-display);

    font-size: 30px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.04em;

    text-transform: uppercase;
}

.pillar-card p {
    margin-top: 20px;

    max-width: 390px;

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

    font-size: 13px;

    line-height: 1.8;
}

.pillar-card > a {
    width: 40px;
    height: 40px;

    margin-top: auto;

    display: grid;
    place-items: center;

    color: var(--gold);

    border:
        1px solid rgba(255, 215, 0, 0.25);

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

.pillar-card > a:hover {
    color: var(--black);

    background: var(--gold);

    transform: translate(4px, -4px);
}

.pillar-featured {
    background:
        linear-gradient(
            145deg,
            rgba(255, 215, 0, 0.08),
            rgba(30, 90, 58, 0.06)
        );
}


/* =========================================================
   10. STATEMENT SECTION
========================================================= */

.statement-section {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    color: var(--white);

    background: var(--black);

    overflow: hidden;
}

.statement-background {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.95),
            rgba(0, 0, 0, 0.62),
            rgba(0, 0, 0, 0.78)
        ),
        url("../images/security.jpg")
        center / cover no-repeat;
}

.statement-overlay {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(255, 215, 0, 0.12),
            transparent 30%
        );
}

.statement-container {
    position: relative;

    z-index: 2;
}

.statement-title {
    max-width: 1080px;

    margin-top: 30px;

    font-family: var(--font-display);

    font-size:
        clamp(48px, 7vw, 100px);

    line-height: 0.95;

    font-weight: 800;

    letter-spacing: -0.06em;

    text-transform: uppercase;
}

.statement-title span {
    color: var(--gold);
}

.statement-bottom {
    width: min(780px, 100%);

    margin-top: 55px;

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

    gap: 40px;
}

.statement-bottom p {
    max-width: 540px;

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

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   11. CAPABILITIES
========================================================= */

.capabilities {
    background: var(--off-white);
}

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

    gap: 80px;

    margin-bottom: 70px;
}

.capabilities-heading > div {
    flex: 1;
}

.capabilities-heading p {
    width: min(480px, 100%);

    color: #666;

    font-size: 14px;

    line-height: 1.85;
}

.capabilities-list {
    border-top:
        1px solid rgba(0, 0, 0, 0.14);
}

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

    display: grid;

    grid-template-columns:
        100px
        1fr
        40px;

    align-items: center;

    gap: 30px;

    border-bottom:
        1px solid rgba(0, 0, 0, 0.14);

    transition:
        padding var(--transition),
        background var(--transition);
}

.capability-item:hover {
    padding-inline: 25px;

    background: var(--white);
}

.capability-index {
    color: var(--grey);

    font-family: var(--font-display);

    font-size: 12px;
    font-weight: 800;
}

.capability-title h3 {
    color: var(--black);

    font-family: var(--font-display);

    font-size: 25px;
    font-weight: 800;

    letter-spacing: -0.03em;

    text-transform: uppercase;
}

.capability-title p {
    margin-top: 7px;

    color: #777;

    font-size: 12px;
}

.capability-item > i {
    color: var(--gold-deep);

    font-size: 16px;

    transition:
        transform var(--transition);
}

.capability-item:hover > i {
    transform: translateX(6px);
}


/* =========================================================
   12. LOCATIONS
========================================================= */

.locations {
    background:
        radial-gradient(
            circle at 15% 80%,
            rgba(30, 90, 58, 0.2),
            transparent 35%
        ),
        #050505;
}

.locations-header {
    max-width: 800px;

    margin-bottom: 70px;
}

.locations-header h2 {
    color: var(--white);
}

.locations-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.1fr;

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

    border-left:
        1px solid rgba(255, 255, 255, 0.1);
}

.location-card {
    min-height: 380px;

    padding: 35px;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent
        );

    transition:
        background var(--transition);
}

.location-card:hover {
    background:
        rgba(255, 215, 0, 0.035);
}

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

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

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.18em;
}

.location-card-top i {
    color: var(--gold);

    font-size: 14px;
}

.location-card h3 {
    margin-top: 90px;

    color: var(--white);

    font-family: var(--font-display);

    font-size: 48px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.05em;

    text-transform: uppercase;
}

.location-card p {
    margin-top: 16px;

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

    font-size: 13px;

    line-height: 1.8;
}

.location-line {
    width: 40px;
    height: 2px;

    margin-top: 30px;

    background: var(--gold);
}

.location-type {
    display: block;

    margin-top: 13px;

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

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.18em;
}

.location-featured {
    background:
        linear-gradient(
            145deg,
            rgba(255, 215, 0, 0.08),
            rgba(26, 59, 112, 0.08)
        );
}

.location-message {
    padding: 50px;

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

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

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

.location-message h3 {
    margin-top: 15px;

    color: var(--white);

    font-family: var(--font-display);

    font-size: 37px;

    line-height: 1.03;

    letter-spacing: -0.04em;
}

.location-message p {
    margin-top: 22px;

    max-width: 430px;

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

    font-size: 13px;

    line-height: 1.85;
}

.light-link {
    color: var(--white);
}

.light-link i {
    color: var(--white);

    border-color:
        rgba(255, 255, 255, 0.22);
}

.light-link:hover i {
    color: var(--black);

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


/* =========================================================
   13. GALLERY
========================================================= */

.gallery-preview {
    background: var(--off-white);
}

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

    gap: 50px;

    margin-bottom: 60px;
}

.gallery-grid {
    display: grid;

    grid-template-columns:
        1.35fr
        0.825fr
        0.825fr;

    gap: 14px;

    height: 620px;
}

.gallery-item {
    position: relative;

    min-height: 0;

    overflow: hidden;

    background: var(--grey-dark);
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-overlay {
    position: absolute;

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

    padding: 24px;

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

    color: var(--white);

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.78),
            transparent
        );

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.15em;

    opacity: 0;

    transform: translateY(10px);

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

.gallery-item:hover .gallery-overlay {
    opacity: 1;

    transform: translateY(0);
}

.gallery-overlay i {
    color: var(--gold);
}


/* =========================================================
   14. FINAL CTA
========================================================= */

.final-cta {
    position: relative;

    padding-block: 130px;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            #030303 0%,
            #0A0A0A 50%,
            #101B16 100%
        );

    overflow: hidden;
}

.cta-pattern {
    position: absolute;

    inset: 0;

    opacity: 0.12;

    background-image:
        linear-gradient(
            45deg,
            transparent 48%,
            rgba(255, 215, 0, 0.18) 49%,
            transparent 50%
        );

    background-size: 80px 80px;
}

.cta-container {
    position: relative;

    z-index: 2;
}

.final-cta h2 {
    margin-top: 28px;

    font-family: var(--font-display);

    font-size:
        clamp(58px, 9vw, 125px);

    line-height: 0.87;

    font-weight: 800;

    letter-spacing: -0.07em;

    text-transform: uppercase;
}

.final-cta h2 span {
    color: var(--gold);
}

.final-cta p {
    width: min(620px, 100%);

    margin-top: 35px;

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

    font-size: 14px;

    line-height: 1.8;
}

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

    gap: 28px;

    margin-top: 38px;
}

.cta-phone {
    display: inline-flex;
    align-items: center;

    gap: 12px;

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

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

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.cta-phone i {
    color: var(--gold);
}


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

.site-footer {
    color: rgba(255, 255, 255, 0.55);

    background: #030303;
}

.footer-main {
    display: grid;

    grid-template-columns:
        1.7fr
        0.75fr
        0.9fr
        0.9fr;

    gap: 70px;

    padding-block: 85px;

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

.footer-brand {
    max-width: 390px;
}

.footer-logo .brand-text strong {
    color: var(--white);
}

.footer-brand > p {
    margin-top: 25px;

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

    font-size: 12px;

    line-height: 1.8;
}

.footer-location {
    margin-top: 25px;

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

    gap: 12px;

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

    font-size: 11px;

    line-height: 1.7;
}

.footer-location i {
    margin-top: 4px;

    color: var(--gold);
}

.footer-column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}

.footer-column h4 {
    margin-bottom: 25px;

    color: var(--white);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.2em;
}

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

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

    font-size: 11px;

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

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

    transform: translateX(4px);
}

.footer-contact > a {
    color: var(--white);
}

.footer-socials {
    display: flex;

    gap: 8px;

    margin-top: 17px;
}

.footer-socials a {
    width: 36px;
    height: 36px;

    margin: 0;

    display: grid;
    place-items: center;

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

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

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

.footer-socials a:hover {
    color: var(--black);

    background: var(--gold);

    border-color: var(--gold);

    transform: none;
}

.footer-bottom {
    min-height: 78px;

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

    gap: 30px;
}

.footer-bottom p,
.footer-bottom span {
    color: rgba(255, 255, 255, 0.3);

    font-size: 9px;

    letter-spacing: 0.04em;
}


/* =========================================================
   16. WHATSAPP FLOAT
========================================================= */

.whatsapp-float {
    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 900;

    display: flex;
    align-items: center;

    gap: 0;

    filter:
        drop-shadow(
            0 12px 30px rgba(0, 0, 0, 0.28)
        );
}

.whatsapp-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    color: var(--white);

    background:
        linear-gradient(
            145deg,
            #25D366,
            #128C7E
        );

    border:
        3px solid rgba(255, 255, 255, 0.9);

    border-radius: 50%;

    box-shadow:
        0 0 0 7px rgba(37, 211, 102, 0.08);

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

.whatsapp-icon i {
    font-size: 27px;
}

.whatsapp-float:hover .whatsapp-icon {
    transform: scale(1.08);

    box-shadow:
        0 0 0 10px rgba(37, 211, 102, 0.1),
        0 15px 40px rgba(0, 0, 0, 0.3);
}

.whatsapp-tooltip {
    position: absolute;

    right: 70px;

    padding: 10px 14px;

    color: var(--white);

    background: var(--black);

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

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

    letter-spacing: 0.1em;

    text-transform: uppercase;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    transform: translateX(8px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}


/* =========================================================
   17. BACK TO TOP
========================================================= */

.back-to-top {
    position: fixed;

    right: 28px;
    bottom: 100px;

    z-index: 850;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: var(--black);

    background: var(--gold);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition),
        background var(--transition);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--white);
}


/* =========================================================
   18. SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   19. SELECTION
========================================================= */

::selection {
    color: var(--black);

    background: var(--gold);
}


/* =========================================================
   20. SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #080808;
}

::-webkit-scrollbar-thumb {
    background: var(--grey-dark);

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}


/* =========================================================
   21. RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    :root {
        --section-padding: 95px;
    }

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

    .main-nav {
        gap: 22px;
    }

    .nav-cta span {
        display: none;
    }

    .nav-cta {
        width: 42px;
        height: 42px;

        padding: 0;

        justify-content: center;
    }

    .hero-content {
        width: 85%;
    }

    .hero-side {
        display: none;
    }

    .about-grid {
        gap: 55px;
    }

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

    .pillar-card {
        min-height: 400px;
    }

    .pillar-icon {
        margin-top: 45px;
    }

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

    .location-message {
        grid-column: 1 / -1;

        min-height: 330px;
    }

    .footer-main {
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap: 50px;
    }

    .footer-contact {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   22. RESPONSIVE — TABLET / MOBILE NAV
========================================================= */

@media (max-width: 900px) {

    :root {
        --section-padding: 85px;
    }

    .container {
        width: min(
            calc(100% - 40px),
            var(--container)
        );
    }

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

    .main-nav {
        position: fixed;

        top: 0;
        right: 0;

        width: min(380px, 88vw);
        height: 100dvh;

        padding:
            110px
            35px
            40px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 0;

        background:
            linear-gradient(
                145deg,
                #050505,
                #111111
            );

        border-left:
            1px solid rgba(255, 215, 0, 0.15);

        box-shadow:
            -30px 0 70px rgba(0, 0, 0, 0.4);

        transform: translateX(105%);

        transition:
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

        overflow-y: auto;
    }

    .main-nav.open {
        transform: translateX(0);
    }

    .main-nav::before {
        content: "MENU";

        position: absolute;

        top: 42px;
        left: 35px;

        color: var(--gold);

        font-size: 9px;
        font-weight: 800;

        letter-spacing: 0.25em;
    }

    .nav-link {
        width: 100%;

        padding: 18px 0;

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

        font-size: 13px;
    }

    .nav-link::after {
        display: none;
    }

    .nav-link.active {
        color: var(--gold);
    }

    .menu-toggle {
        display: flex;
    }

    .nav-actions {
        margin-left: auto;
    }

    .hero-content {
        width: 100%;
    }

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

    .hero-industries,
    .scroll-indicator {
        display: none;
    }

    .hero-location {
        width: 100%;
    }

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

        gap: 55px;
    }

    .about-content {
        max-width: 720px;
    }

    .capabilities-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .capabilities-heading p {
        width: min(650px, 100%);
    }

    .gallery-grid {
        height: auto;

        grid-template-columns: 1fr 1fr;

        grid-template-rows:
            450px
            320px;
    }

    .gallery-large {
        grid-column: 1 / -1;
    }

    .gallery-heading {
        align-items: flex-start;

        flex-direction: column;
    }
}


/* =========================================================
   23. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    :root {
        --section-padding: 72px;
    }

    .container {
        width: calc(100% - 30px);
    }

    .site-header.scrolled .nav-container,
    .nav-container {
        min-height: 72px;
    }

    .brand-logo {
        width: 43px;
        height: 43px;
    }

    .brand-text strong {
        font-size: 11px;
    }

    .brand-text span {
        font-size: 7px;

        letter-spacing: 0.22em;
    }

    .nav-cta {
        display: none;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }

    .hero {
        min-height: 850px;
    }

    .hero-background {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.86),
                rgba(0, 0, 0, 0.72) 45%,
                rgba(0, 0, 0, 0.94)
            ),
            url("../images/hero.jpg")
            center / cover no-repeat;
    }

    .hero-container {
        padding-top: 115px;
        padding-bottom: 155px;
    }

    .hero-eyebrow {
        font-size: 8px;

        letter-spacing: 0.14em;
    }

    .hero-title {
        font-size:
            clamp(46px, 14vw, 70px);

        line-height: 0.94;
    }

    .hero-description {
        margin-top: 25px;

        font-size: 13px;

        line-height: 1.75;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 30px;
    }

    .btn {
        width: 100%;
    }

    .hero-bottom {
        background:
            rgba(0, 0, 0, 0.86);
    }

    .hero-bottom-container {
        min-height: 85px;
    }

    .hero-location strong {
        font-size: 10px;
    }

    .section-header,
    .locations-header {
        margin-bottom: 48px;
    }

    .section-header h2,
    .capabilities-heading h2,
    .locations-header h2,
    .gallery-heading h2 {
        font-size:
            clamp(34px, 11vw, 52px);
    }

    .about-content h3 {
        font-size: 32px;
    }

    .image-frame {
        aspect-ratio: 1 / 1.1;
    }

    .image-badge {
        min-width: 150px;

        padding: 18px;
    }

    .badge-number {
        font-size: 24px;
    }

    .badge-text {
        font-size: 7px;
    }

    .pillars-top {
        flex-direction: column;
        align-items: flex-start;

        margin-bottom: 45px;
    }

    .pillar-card {
        min-height: 390px;

        padding: 30px;
    }

    .pillar-card h3 {
        font-size: 27px;
    }

    .statement-section {
        min-height: 650px;
    }

    .statement-title {
        font-size:
            clamp(45px, 13vw, 70px);
    }

    .statement-bottom {
        flex-direction: column;
        align-items: flex-start;

        margin-top: 40px;
    }

    .statement-bottom .btn {
        width: auto;
    }

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

        grid-template-columns:
            40px
            1fr
            20px;

        gap: 14px;
    }

    .capability-title h3 {
        font-size: 17px;
    }

    .capability-title p {
        font-size: 10px;

        line-height: 1.6;
    }

    .capability-item:hover {
        padding-inline: 10px;
    }

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

    .location-card {
        min-height: 320px;

        padding: 28px;
    }

    .location-card h3 {
        margin-top: 70px;

        font-size: 42px;
    }

    .location-message {
        grid-column: auto;

        min-height: 360px;

        padding: 32px;
    }

    .location-message h3 {
        font-size: 32px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;

        grid-template-rows:
            380px
            280px
            280px;
    }

    .gallery-large {
        grid-column: auto;
    }

    .gallery-overlay {
        opacity: 1;

        transform: translateY(0);
    }

    .final-cta {
        padding-block: 90px;
    }

    .final-cta h2 {
        font-size:
            clamp(52px, 15vw, 78px);
    }

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

    .cta-actions .btn {
        width: auto;
    }

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

        gap: 42px;

        padding-block: 65px;
    }

    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom {
        min-height: 100px;

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

        gap: 7px;
    }

    .whatsapp-float {
        right: 17px;
        bottom: 18px;
    }

    .whatsapp-icon {
        width: 53px;
        height: 53px;
    }

    .whatsapp-icon i {
        font-size: 24px;
    }

    .whatsapp-tooltip {
        display: none;
    }

    .back-to-top {
        right: 18px;
        bottom: 82px;

        width: 38px;
        height: 38px;
    }
}


/* =========================================================
   24. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;

        transform: none;
    }
}
/* =========================================================
   LANGUAGE SWITCHER
   Add this at the END of css/style.css
========================================================= */

.language-switcher {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1005;
}


/* ---------------------------------------------------------
   LANGUAGE TOGGLE
--------------------------------------------------------- */

.language-toggle {
    height: 44px;
    min-width: 78px;
    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 6px;

    background: rgba(0, 0, 0, 0.28);
    color: #ffffff;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;

    cursor: pointer;

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

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


.language-toggle:hover {
    background: rgba(255, 215, 0, 0.10);
    border-color: rgba(255, 215, 0, 0.65);
    color: #FFD700;
}


.language-toggle:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 3px;
}


.language-toggle > i:first-child {
    color: #FFD700;
    font-size: 14px;
}


.language-chevron {
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.65) !important;

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


.language-toggle.active .language-chevron {
    transform: rotate(180deg);
    color: #FFD700 !important;
}


/* ---------------------------------------------------------
   LANGUAGE DROPDOWN
--------------------------------------------------------- */

.language-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 180px;

    padding: 7px;

    background: rgba(8, 12, 14, 0.97);

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

    border-radius: 10px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.02);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-8px)
        scale(0.98);

    transform-origin: top right;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}


.language-switcher.active .language-dropdown {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* ---------------------------------------------------------
   LANGUAGE OPTION
--------------------------------------------------------- */

.language-option {
    width: 100%;

    min-height: 44px;

    padding: 0 11px;

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

    border: 0;
    border-radius: 6px;

    background: transparent;

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

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}


.language-option:hover {
    background: rgba(255, 215, 0, 0.08);
    color: #FFD700;
    padding-left: 15px;
}


.language-option.active {
    background: rgba(255, 215, 0, 0.10);
    color: #FFD700;
}


.language-flag {
    width: 22px;

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

    font-size: 16px;
}


.language-check {
    margin-left: auto;

    color: #FFD700;

    font-size: 10px;

    opacity: 0;
    transform: scale(0.5);

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


.language-option.active .language-check {
    opacity: 1;
    transform: scale(1);
}


/* =========================================================
   NAVIGATION SPACING
========================================================= */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* =========================================================
   LANGUAGE SWITCHER — SCROLLED HEADER
========================================================= */

.site-header.scrolled .language-toggle {
    background: rgba(0, 0, 0, 0.72);

    border-color:
        rgba(255, 215, 0, 0.35);
}


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

@media (max-width: 900px) {

    .nav-actions {
        gap: 8px;
    }


    .language-toggle {
        height: 42px;
        min-width: 68px;

        padding: 0 10px;

        gap: 6px;
    }


    .language-toggle > i:first-child {
        font-size: 13px;
    }


    .language-dropdown {
        right: 0;

        width: 170px;
    }

}


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

@media (max-width: 600px) {

    .nav-actions {
        gap: 6px;
    }


    .language-toggle {
        min-width: 45px;

        width: 45px;

        padding: 0;

        gap: 0;
    }


    .language-toggle > i:first-child {
        font-size: 15px;
    }


    #currentLanguage {
        display: none;
    }


    .language-chevron {
        display: none;
    }


    .language-dropdown {
        top: calc(100% + 9px);
        right: -5px;

        width: 175px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .language-toggle {
        width: 40px;
        min-width: 40px;
    }


    .language-dropdown {
        width: 165px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .language-dropdown,
    .language-toggle,
    .language-chevron,
    .language-option,
    .language-check {
        transition: none;
    }

}
/* =========================================================
   FUEL SECURITY CO. LTD.
   ABOUT PAGE STYLES
   Premium Industrial Security Design
========================================================= */


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

.about-page {

    --fs-black: #000000;
    --fs-yellow: #FFD700;
    --fs-yellow-dark: #d9b900;

    --fs-green: #1E5A3A;
    --fs-blue: #1A3B70;
    --fs-sky: #87CEEB;

    --fs-white: #ffffff;
    --fs-off-white: #f5f6f3;
    --fs-light: #eef0ed;

    --fs-grey: #808080;
    --fs-dark-grey: #5A5A5A;

    --fs-border: rgba(0, 0, 0, 0.10);

    --fs-dark: #07100d;
    --fs-dark-2: #0b1713;

    overflow: hidden;
}


/* =========================================================
   GLOBAL ABOUT UTILITIES
========================================================= */

.about-page img {

    display: block;
    width: 100%;

}

.about-page a {

    text-decoration: none;

}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page p {

    margin-top: 0;

}

.about-page .light-kicker {

    color: var(--fs-yellow);

}


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

.about-hero {

    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--fs-black);

    color: var(--fs-white);

}


.about-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.about-hero-bg img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    filter:
        grayscale(35%)
        contrast(1.12)
        brightness(.52);

    transform: scale(1.02);

}


.about-hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.78) 38%,
            rgba(0,0,0,.38) 72%,
            rgba(0,0,0,.72) 100%
        );

}


.about-hero-grid {

    position: absolute;

    inset: 0;

    opacity: .16;

    background-image:

        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent
        );

}


.about-hero-container {

    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: 110px;
    padding-bottom: 150px;

}


.about-hero-content {

    max-width: 900px;

}


.about-hero .section-label {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 34px;

}


.about-hero .section-label span:first-child {

    color: var(--fs-yellow);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .12em;

}


.about-hero .section-label span:last-child {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .18em;

}


.about-hero h1 {

    max-width: 1000px;

    margin-bottom: 32px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(52px, 7vw, 104px);

    line-height: .93;

    letter-spacing: -.055em;

    font-weight: 800;

    text-transform: uppercase;

}


.about-hero h1 span {

    display: block;

    color: var(--fs-yellow);

}


.about-hero-content > p {

    max-width: 690px;

    margin-bottom: 0;

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

    font-size: 17px;

    line-height: 1.8;

}


.about-hero-meta {

    position: absolute;

    right: 0;

    bottom: 155px;

    display: flex;

    align-items: center;

    gap: 15px;

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

    font-size: 10px;

    letter-spacing: .16em;

    font-weight: 700;

    writing-mode: horizontal-tb;

}


.about-hero-meta div {

    width: 45px;

    height: 1px;

    background: var(--fs-yellow);

}


.about-hero-bottom {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    z-index: 3;

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

}


.about-scroll {

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 18px;

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

    font-size: 10px;

    letter-spacing: .18em;

    font-weight: 700;

}


.about-scroll i {

    color: var(--fs-yellow);

    font-size: 14px;

    animation: aboutScroll 1.8s ease-in-out infinite;

}


@keyframes aboutScroll {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(6px);

    }

}


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

.about-introduction {

    position: relative;

    background: var(--fs-off-white);

}


.about-intro-grid {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 110px;

    align-items: start;

}


.about-intro-heading {

    position: sticky;

    top: 130px;

}


.about-intro-heading .section-label,
.identity-header .section-label,
.presence-header .section-label {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 28px;

}


.about-intro-heading .section-label span:first-child,
.identity-header .section-label span:first-child,
.presence-header .section-label span:first-child {

    color: var(--fs-green);

    font-size: 12px;

    font-weight: 800;

}


.about-intro-heading .section-label span:last-child,
.identity-header .section-label span:last-child,
.presence-header .section-label span:last-child {

    color: var(--fs-dark-grey);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .17em;

}


.about-intro-heading h2,
.identity-header h2,
.presence-header h2 {

    max-width: 680px;

    margin: 0;

    font-family: "Manrope", sans-serif;

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

    line-height: .98;

    letter-spacing: -.045em;

    font-weight: 800;

    text-transform: uppercase;

    color: var(--fs-black);

}


.about-intro-heading h2 span,
.identity-header h2 span,
.presence-header h2 span {

    color: var(--fs-green);

}


.about-intro-content {

    padding-top: 8px;

}


.content-kicker {

    display: block;

    margin-bottom: 25px;

    color: var(--fs-green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .18em;

}


.about-intro-content p {

    max-width: 720px;

    color: #4d514e;

    font-size: 16px;

    line-height: 1.9;

}


.about-intro-content .intro-large {

    margin-bottom: 30px;

    color: var(--fs-black);

    font-family: "Manrope", sans-serif;

    font-size: 25px;

    line-height: 1.5;

    font-weight: 600;

    letter-spacing: -.015em;

}


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

.about-statement {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--fs-black);

    color: var(--fs-white);

}


.about-statement-image {

    position: absolute;

    inset: 0;

}


.about-statement-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    filter:
        grayscale(30%)
        contrast(1.1)
        brightness(.55);

}


.about-statement-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.82) 38%,
            rgba(0,0,0,.36) 100%
        );

}


.about-statement .container {

    position: relative;

    z-index: 2;

    width: 100%;

}


.about-statement-content {

    max-width: 900px;

    padding: 100px 0;

}


.statement-number {

    margin-bottom: 35px;

    color: var(--fs-yellow);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .15em;

}


.about-statement-content h2 {

    max-width: 900px;

    margin-bottom: 35px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(45px, 6vw, 88px);

    line-height: .95;

    letter-spacing: -.05em;

    font-weight: 800;

    text-transform: uppercase;

}


.about-statement-content h2 span {

    color: var(--fs-yellow);

}


.about-statement-content p {

    max-width: 650px;

    margin: 0;

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

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================================
   COMPANY IDENTITY
========================================================= */

.company-identity {

    background: var(--fs-white);

}


.identity-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin-bottom: 80px;

}


.identity-header h2 {

    max-width: 800px;

}


.identity-grid {

    display: grid;

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

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

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

}


.identity-card {

    position: relative;

    min-height: 400px;

    padding: 42px;

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

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

    background: var(--fs-white);

    transition:
        background .4s ease,
        transform .4s ease;

}


.identity-card:hover {

    background: #f6f7f4;

    transform: translateY(-5px);

}


.identity-card.identity-featured {

    background: var(--fs-dark);

    color: var(--fs-white);

}


.identity-card.identity-featured:hover {

    background: #101d18;

}


.identity-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 70px;

}


.identity-top > span {

    font-size: 11px;

    font-weight: 800;

    color: var(--fs-grey);

    letter-spacing: .1em;

}


.identity-featured .identity-top > span {

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

}


.identity-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(30,90,58,.22);

    color: var(--fs-green);

}


.identity-featured .identity-icon {

    border-color: rgba(255,215,0,.28);

    color: var(--fs-yellow);

}


.identity-card h3 {

    margin-bottom: 18px;

    font-family: "Manrope", sans-serif;

    font-size: 25px;

    letter-spacing: -.025em;

    font-weight: 800;

}


.identity-card p {

    max-width: 360px;

    margin: 0;

    color: #606460;

    font-size: 14px;

    line-height: 1.8;

}


.identity-featured p {

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

}


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

.understanding-section {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(30,90,58,.25),
            transparent 32%
        ),
        var(--fs-dark);

    color: var(--fs-white);

}


.understanding-section::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -250px;

    bottom: -300px;

    border: 1px solid rgba(255,215,0,.14);

    border-radius: 50%;

}


.understanding-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 120px;

}


.understanding-heading {

    position: sticky;

    top: 130px;

    align-self: start;

}


.understanding-heading .section-label {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 30px;

}


.understanding-heading .section-label span:first-child {

    color: var(--fs-yellow);

    font-size: 12px;

    font-weight: 800;

}


.understanding-heading .section-label span:last-child {

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .18em;

}


.understanding-heading h2 {

    max-width: 650px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(42px, 5vw, 70px);

    line-height: .98;

    letter-spacing: -.045em;

    text-transform: uppercase;

}


.understanding-heading h2 span {

    color: var(--fs-yellow);

}


.understanding-content {

    padding-top: 8px;

}


.understanding-large {

    max-width: 700px;

    margin-bottom: 65px;

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

    font-family: "Manrope", sans-serif;

    font-size: 21px;

    line-height: 1.65;

}


.understanding-points {

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

}


.understanding-point {

    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 30px;

    padding: 32px 0;

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

}


.understanding-point > span {

    color: var(--fs-yellow);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .08em;

}


.understanding-point h3 {

    margin-bottom: 9px;

    font-family: "Manrope", sans-serif;

    font-size: 19px;

    font-weight: 700;

}


.understanding-point p {

    max-width: 520px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   PRESENCE
========================================================= */

.about-presence {

    background: var(--fs-off-white);

}


.presence-header {

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 100px;

    margin-bottom: 80px;

}


.presence-header .section-label {

    grid-column: 1 / -1;

}


.presence-header h2 {

    max-width: 600px;

}


.presence-header > p {

    align-self: end;

    max-width: 500px;

    margin: 0;

    color: #646865;

    font-size: 15px;

    line-height: 1.85;

}


.presence-grid {

    display: grid;

    grid-template-columns: 1fr 1fr .9fr;

    min-height: 440px;

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

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

}


.presence-location,
.presence-message {

    position: relative;

    padding: 42px;

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

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

}


.presence-location {

    background: var(--fs-white);

    transition:
        transform .35s ease,
        background .35s ease;

}


.presence-location:hover {

    transform: translateY(-5px);

}


.presence-location.presence-main {

    background: var(--fs-green);

    color: var(--fs-white);

}


.presence-number {

    position: absolute;

    top: 42px;

    right: 42px;

    color: rgba(0,0,0,.2);

    font-size: 11px;

    font-weight: 800;

}


.presence-main .presence-number {

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

}


.presence-icon {

    width: 52px;

    height: 52px;

    margin-bottom: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(30,90,58,.2);

    color: var(--fs-green);

}


.presence-main .presence-icon {

    border-color: rgba(255,215,0,.35);

    color: var(--fs-yellow);

}


.presence-label {

    display: block;

    margin-bottom: 12px;

    color: var(--fs-green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .17em;

}


.presence-main .presence-label {

    color: var(--fs-yellow);

}


.presence-location h3 {

    margin-bottom: 13px;

    font-family: "Manrope", sans-serif;

    font-size: 34px;

    letter-spacing: -.035em;

}


.presence-location p {

    margin: 0;

    color: #666b67;

    font-size: 13px;

    line-height: 1.8;

}


.presence-main p {

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

}


.presence-message {

    display: flex;

    flex-direction: column;

    justify-content: center;

    background: var(--fs-black);

    color: var(--fs-white);

}


.presence-message .content-kicker {

    color: var(--fs-yellow);

}


.presence-message h3 {

    max-width: 300px;

    margin-bottom: 20px;

    font-family: "Manrope", sans-serif;

    font-size: 30px;

    line-height: 1.05;

    letter-spacing: -.035em;

}


.presence-message p {

    max-width: 330px;

    margin-bottom: 0;

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

    font-size: 13px;

    line-height: 1.8;

}


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

.about-final-cta {

    position: relative;

    overflow: hidden;

    padding: 125px 0;

    background:

        linear-gradient(
            135deg,
            #000000 0%,
            #07100d 55%,
            #10291e 100%
        );

    color: var(--fs-white);

}


.about-cta-pattern {

    position: absolute;

    inset: 0;

    opacity: .12;

    background-image:

        linear-gradient(
            30deg,
            rgba(255,215,0,.2) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(255,215,0,.2) 87.5%
        ),

        linear-gradient(
            150deg,
            rgba(255,215,0,.2) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(255,215,0,.2) 87.5%
        );

    background-size: 80px 140px;

}


.about-final-cta::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: -420px;

    right: -250px;

    border: 1px solid rgba(255,215,0,.18);

    border-radius: 50%;

}


.about-final-cta .container {

    position: relative;

    z-index: 2;

}


.about-cta-content {

    max-width: 1000px;

}


.about-cta-content .section-label {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 35px;

}


.about-cta-content .section-label span:first-child {

    color: var(--fs-yellow);

    font-size: 12px;

    font-weight: 800;

}


.about-cta-content .section-label span:last-child {

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .18em;

}


.about-cta-content h2 {

    max-width: 1000px;

    margin-bottom: 30px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(50px, 7vw, 100px);

    line-height: .91;

    letter-spacing: -.055em;

    font-weight: 800;

    text-transform: uppercase;

}


.about-cta-content h2 span {

    color: var(--fs-yellow);

}


.about-cta-content > p {

    max-width: 620px;

    margin-bottom: 40px;

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

    font-size: 16px;

    line-height: 1.8;

}


.about-cta-actions {

    display: flex;

    align-items: center;

    gap: 30px;

    flex-wrap: wrap;

}


.about-cta-actions .btn-gold {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 17px 25px;

    background: var(--fs-yellow);

    color: var(--fs-black);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .02em;

    transition:
        transform .3s ease,
        background .3s ease;

}


.about-cta-actions .btn-gold:hover {

    transform: translateY(-3px);

    background: #ffe54d;

}


.about-cta-actions .btn-gold i {

    font-size: 12px;

}


.about-cta-actions .cta-phone {

    display: inline-flex;

    align-items: center;

    gap: 12px;

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

    font-size: 13px;

    font-weight: 700;

}


.about-cta-actions .cta-phone i {

    color: var(--fs-yellow);

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.about-page .reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);

}


.about-page .reveal.active {

    opacity: 1;

    transform: translateY(0);

}


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

@media (max-width: 1100px) {


    .about-hero {

        min-height: 700px;

    }


    .about-hero-meta {

        right: 25px;

    }


    .about-intro-grid,
    .understanding-grid {

        gap: 60px;

    }


    .identity-card {

        padding: 32px;

    }


    .presence-grid {

        grid-template-columns: 1fr 1fr;

    }


    .presence-message {

        grid-column: 1 / -1;

        min-height: 300px;

    }

}


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

@media (max-width: 900px) {


    .about-hero-container {

        padding-top: 100px;

    }


    .about-hero h1 {

        font-size: clamp(48px, 9vw, 75px);

    }


    .about-intro-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .about-intro-heading {

        position: static;

    }


    .identity-header {

        display: block;

        margin-bottom: 55px;

    }


    .identity-header h2 {

        margin-top: 20px;

    }


    .identity-grid {

        grid-template-columns: 1fr;

    }


    .identity-card {

        min-height: auto;

    }


    .identity-top {

        margin-bottom: 45px;

    }


    .understanding-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .understanding-heading {

        position: static;

    }


    .presence-header {

        display: block;

    }


    .presence-header > p {

        margin-top: 30px;

    }

}


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

@media (max-width: 640px) {


    .about-hero {

        min-height: 690px;

    }


    .about-hero-bg img {

        object-position: 62% center;

    }


    .about-hero-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(0,0,0,.94),
                rgba(0,0,0,.66)
            );

    }


    .about-hero-container {

        padding-top: 80px;

        padding-bottom: 120px;

    }


    .about-hero .section-label {

        margin-bottom: 25px;

    }


    .about-hero h1 {

        margin-bottom: 25px;

        font-size: clamp(42px, 13vw, 64px);

        line-height: .94;

    }


    .about-hero-content > p {

        font-size: 14px;

        line-height: 1.75;

    }


    .about-hero-meta {

        display: none;

    }


    .about-scroll {

        height: 65px;

        justify-content: flex-start;

        padding-left: 20px;

    }


    .about-intro-heading h2,
    .identity-header h2,
    .presence-header h2,
    .understanding-heading h2 {

        font-size: 39px;

    }


    .about-intro-content .intro-large {

        font-size: 20px;

    }


    .about-intro-content p {

        font-size: 14px;

    }


    .about-statement {

        min-height: 650px;

    }


    .about-statement-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(0,0,0,.94),
                rgba(0,0,0,.58)
            );

    }


    .about-statement-content {

        padding: 80px 0;

    }


    .about-statement-content h2 {

        font-size: 43px;

    }


    .about-statement-content p {

        font-size: 14px;

    }


    .identity-card {

        padding: 30px;

    }


    .identity-card h3 {

        font-size: 22px;

    }


    .identity-card p {

        font-size: 13px;

    }


    .understanding-large {

        font-size: 18px;

    }


    .understanding-point {

        grid-template-columns: 38px 1fr;

        gap: 15px;

    }


    .understanding-point h3 {

        font-size: 17px;

    }


    .understanding-point p {

        font-size: 13px;

    }


    .presence-grid {

        grid-template-columns: 1fr;

    }


    .presence-location,
    .presence-message {

        min-height: 330px;

        padding: 30px;

    }


    .presence-message {

        grid-column: auto;

    }


    .presence-icon {

        margin-bottom: 50px;

    }


    .about-final-cta {

        padding: 90px 0;

    }


    .about-cta-content h2 {

        font-size: 47px;

    }


    .about-cta-content > p {

        font-size: 14px;

    }


    .about-cta-actions {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

    }


}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {


    .about-hero h1 {

        font-size: 39px;

    }


    .about-intro-heading h2,
    .identity-header h2,
    .presence-header h2,
    .understanding-heading h2 {

        font-size: 34px;

    }


    .about-statement-content h2 {

        font-size: 38px;

    }


    .about-cta-content h2 {

        font-size: 41px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


    .about-page *,
    .about-page *::before,
    .about-page *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

    }

}
/* =========================================================
   SERVICES PAGE — PREMIUM INDUSTRIAL SECURITY
========================================================= */

.services-page {
    background: #f7f8f5;
}

/* ---------------------------------------------------------
   SERVICES HERO
--------------------------------------------------------- */

.services-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #07110d;
    color: #fff;
}

.services-hero-bg,
.services-hero-overlay,
.services-hero-grid {
    position: absolute;
    inset: 0;
}

.services-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .58;
    transform: scale(1.03);
    animation: servicesHeroZoom 12s ease-out forwards;
}

@keyframes servicesHeroZoom {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1.03);
    }
}

.services-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(3, 9, 7, .97) 0%,
            rgba(3, 9, 7, .88) 35%,
            rgba(3, 9, 7, .52) 70%,
            rgba(3, 9, 7, .78) 100%
        );
    z-index: 1;
}

.services-hero-grid {
    opacity: .12;
    z-index: 2;
    background-image:
        linear-gradient(rgba(255,215,0,.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,215,0,.28) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to right, transparent, black 55%, transparent);
}

.services-hero-container {
    position: relative;
    z-index: 4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 150px;
    padding-bottom: 150px;
}

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

.services-hero-kicker {
    margin: 25px 0 18px;
    color: #FFD700;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .2em;
}

.services-hero-kicker span {
    margin: 0 8px;
    opacity: .45;
}

.services-hero h1 {
    margin: 0;
    max-width: 900px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(3.4rem, 7vw, 7rem);
    line-height: .91;
    letter-spacing: -.055em;
    font-weight: 800;
    text-transform: uppercase;
}

.services-hero h1 span {
    display: block;
    color: #FFD700;
}

.services-hero-content > p {
    max-width: 690px;
    margin: 35px 0 0;
    color: rgba(255,255,255,.76);
    font-size: 1.08rem;
    line-height: 1.8;
}

.services-hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 42px;
}

.services-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: .3s ease;
}

.services-hero-link i {
    color: #FFD700;
    transition: .3s ease;
}

.services-hero-link:hover {
    color: #FFD700;
}

.services-hero-link:hover i {
    transform: translateX(6px);
}

.services-hero-side {
    width: 210px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-right: 20px;
    padding-left: 28px;
    border-left: 1px solid rgba(255,215,0,.45);
}

.services-hero-side span {
    color: rgba(255,255,255,.48);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.services-hero-side strong {
    color: #FFD700;
    font-size: 1.1rem;
    letter-spacing: .12em;
}

.services-hero-side div {
    width: 45px;
    height: 2px;
    margin: 8px 0;
    background: #FFD700;
}

.services-hero-bottom {
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
}

.services-hero-bottom-inner {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 22px;
    color: rgba(255,255,255,.55);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.services-hero-bottom-inner span:nth-child(odd) {
    color: rgba(255,255,255,.8);
}

.services-hero-bottom-inner span:nth-child(even) {
    color: #FFD700;
}


/* ---------------------------------------------------------
   SERVICES INTRO
--------------------------------------------------------- */

.services-intro {
    background: #f7f8f5;
}

.services-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: start;
}

.services-intro-heading h2 {
    margin: 28px 0 0;
    max-width: 550px;
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    line-height: .98;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.services-intro-heading h2 span {
    color: #1E5A3A;
    display: block;
}

.services-intro-content {
    padding-top: 60px;
    max-width: 650px;
}

.services-intro-content .intro-large {
    margin: 18px 0 25px;
    color: #111;
    font-size: 1.55rem;
    line-height: 1.45;
    font-weight: 600;
}

.services-intro-content > p:last-child {
    margin: 0;
    color: #626762;
    font-size: 1rem;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   CORE SERVICES
--------------------------------------------------------- */

.core-services {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(30,90,58,.22), transparent 30%),
        #07110d;
    color: #fff;
}

.core-services::after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -220px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255,215,0,.13);
    border-radius: 50%;
}

.core-services-header {
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 65px;
}

.core-services-header h2 {
    max-width: 700px;
    margin: 28px 0 0;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.core-services-header h2 span {
    color: #FFD700;
}

.core-services-header > p {
    max-width: 480px;
    margin: 0;
    color: rgba(255,255,255,.58);
    line-height: 1.8;
}

.core-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.service-main-card {
    position: relative;
    min-height: 540px;
    padding: 45px;
    overflow: hidden;
    background: #111b17;
    border: 1px solid rgba(255,255,255,.07);
    transition: .45s ease;
}

.service-main-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #FFD700;
    transform: scaleX(0);
    transform-origin: left;
    transition: .45s ease;
}

.service-main-card:hover {
    transform: translateY(-8px);
    background: #15231c;
}

.service-main-card:hover::before {
    transform: scaleX(1);
}

.service-card-featured {
    background:
        linear-gradient(145deg, rgba(30,90,58,.6), rgba(10,22,16,.95));
}

.service-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.service-card-top > span {
    color: rgba(255,255,255,.4);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.service-card-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #07110d;
    background: #FFD700;
    font-size: 1.25rem;
}

.service-card-content {
    position: relative;
    z-index: 2;
    margin-top: 70px;
}

.service-card-content h3 {
    margin: 0 0 25px;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    line-height: .95;
    letter-spacing: -.045em;
}

.service-card-content h3 span {
    display: block;
    color: #FFD700;
}

.service-card-content > p {
    max-width: 530px;
    color: rgba(255,255,255,.62);
    line-height: 1.75;
}

.service-card-content ul {
    display: grid;
    gap: 13px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.service-card-content li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.78);
    font-size: .82rem;
}

.service-card-content li i {
    color: #FFD700;
    font-size: .7rem;
}

.service-card-number {
    position: absolute;
    right: 25px;
    bottom: -25px;
    color: rgba(255,255,255,.025);
    font-size: 12rem;
    font-weight: 800;
    line-height: 1;
}


/* ---------------------------------------------------------
   SUPPORTING CAPABILITIES
--------------------------------------------------------- */

.service-capabilities {
    background: #fff;
}

.capabilities-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 60px;
}

.capabilities-header h2 {
    max-width: 600px;
    margin: 25px 0 0;
    font-size: clamp(2.5rem, 5vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.05em;
}

.capabilities-header h2 span {
    color: #1E5A3A;
    display: block;
}

.service-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #dfe3df;
    border-left: 1px solid #dfe3df;
}

.service-capability {
    position: relative;
    min-height: 350px;
    padding: 38px;
    border-right: 1px solid #dfe3df;
    border-bottom: 1px solid #dfe3df;
    transition: .35s ease;
}

.service-capability:hover {
    background: #f5f7f3;
}

.capability-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 50px;
    color: #fff;
    background: #1E5A3A;
}

.capability-number {
    position: absolute;
    top: 42px;
    right: 35px;
    color: #aab0ab;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.service-capability h3 {
    max-width: 260px;
    margin: 0 0 18px;
    font-size: 1.55rem;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.service-capability p {
    max-width: 300px;
    margin: 0;
    color: #6b716c;
    font-size: .9rem;
    line-height: 1.75;
}


/* ---------------------------------------------------------
   SERVICE ENVIRONMENT
--------------------------------------------------------- */

.service-environment {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #07110d;
    color: #fff;
}

.service-environment-image {
    position: absolute;
    inset: 0;
}

.service-environment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-environment-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3,10,7,.96),
            rgba(3,10,7,.83) 42%,
            rgba(3,10,7,.3)
        );
}

.service-environment .container {
    position: relative;
    z-index: 2;
}

.service-environment-content {
    max-width: 700px;
}

.service-environment-content h2 {
    margin: 28px 0;
    font-size: clamp(2.8rem, 5.5vw, 5.4rem);
    line-height: .95;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.service-environment-content h2 span {
    color: #FFD700;
    display: block;
}

.service-environment-content p {
    max-width: 650px;
    margin: 0 0 38px;
    color: rgba(255,255,255,.67);
    font-size: 1rem;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   SERVICE PROCESS
--------------------------------------------------------- */

.service-process {
    background: #f7f8f5;
}

.service-process-header {
    max-width: 800px;
    margin-bottom: 70px;
}

.service-process-header h2 {
    margin: 25px 0 0;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: .98;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.service-process-header h2 span {
    color: #1E5A3A;
}

.service-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #d9ded9;
}

.process-step {
    position: relative;
    padding: 45px 40px;
    min-height: 280px;
    border-right: 1px solid #d9ded9;
}

.process-step:first-child {
    border-left: 1px solid #d9ded9;
}

.process-step > span {
    color: #1E5A3A;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.process-step i {
    display: block;
    margin: 30px 0 22px;
    color: #FFD700;
    font-size: 1.5rem;
}

.process-step h3 {
    margin: 0 0 12px;
    font-size: 1.4rem;
}

.process-step p {
    max-width: 300px;
    margin: 0;
    color: #6c716d;
    font-size: .88rem;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   FINAL CTA
--------------------------------------------------------- */

.services-final-cta {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    background:
        linear-gradient(135deg, #07110d, #123b28);
    color: #fff;
}

.services-cta-pattern {
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image:
        linear-gradient(30deg, transparent 48%, #FFD700 49%, #FFD700 50%, transparent 51%);
    background-size: 90px 90px;
}

.services-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.services-cta-content h2 {
    margin: 30px 0 20px;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: .9;
    letter-spacing: -.06em;
    text-transform: uppercase;
}

.services-cta-content h2 span {
    color: #FFD700;
}

.services-cta-content > p {
    max-width: 650px;
    color: rgba(255,255,255,.65);
    line-height: 1.8;
}

.services-cta-actions {
    display: flex;
    align-items: center;
    gap: 35px;
    margin-top: 40px;
}

.services-cta-actions .cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 700;
}

.services-cta-actions .cta-phone i {
    color: #FFD700;
}


/* ---------------------------------------------------------
   SERVICE PAGE RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1100px) {

    .services-hero-container {
        padding-top: 130px;
        padding-bottom: 130px;
    }

    .services-hero-side {
        display: none;
    }

    .services-intro-grid {
        gap: 60px;
    }

    .core-services-header {
        gap: 50px;
    }

}


@media (max-width: 800px) {

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

    .services-hero-container {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .services-hero h1 {
        font-size: clamp(3rem, 13vw, 5rem);
    }

    .services-hero-content > p {
        font-size: .95rem;
    }

    .services-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .services-hero-bottom-inner {
        overflow-x: auto;
        white-space: nowrap;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .services-intro-grid,
    .core-services-header {
        grid-template-columns: 1fr;
    }

    .services-intro-content {
        padding-top: 0;
    }

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

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

    .process-step,
    .process-step:first-child {
        border-left: 1px solid #d9ded9;
    }

    .capabilities-header {
        align-items: flex-start;
    }

    .service-environment {
        min-height: 600px;
    }

}


@media (max-width: 560px) {

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

    .services-hero-container {
        padding-top: 105px;
        padding-bottom: 100px;
    }

    .services-hero-kicker {
        font-size: .58rem;
        letter-spacing: .13em;
    }

    .services-hero-content > p {
        margin-top: 25px;
        line-height: 1.7;
    }

    .services-hero-bottom-inner {
        gap: 12px;
        font-size: .52rem;
        letter-spacing: .1em;
    }

    .services-intro-content .intro-large {
        font-size: 1.2rem;
    }

    .service-main-card {
        min-height: auto;
        padding: 30px;
    }

    .service-card-content {
        margin-top: 45px;
    }

    .service-card-content h3 {
        font-size: 2.5rem;
    }

    .service-card-number {
        font-size: 8rem;
    }

    .service-capability,
    .process-step {
        min-height: auto;
        padding: 32px 28px;
    }

    .capability-icon {
        margin-bottom: 35px;
    }

    .service-environment-content h2 {
        font-size: 3rem;
    }

    .services-final-cta {
        padding: 90px 0;
    }

    .services-cta-content h2 {
        font-size: 3.5rem;
    }

    .services-cta-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .services-hero-bg img {
        animation: none;
    }

    .service-main-card,
    .service-capability,
    .services-hero-link {
        transition: none;
    }

}
/* =========================================================
   FUEL SECURITY CO. LTD.
   PREMIUM GALLERY PAGE
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {
    --fs-black: #07100f;
    --fs-black-2: #0b1715;
    --fs-dark: #101d1a;
    --fs-dark-2: #142522;

    --fs-gold: #c9a45c;
    --fs-gold-light: #e2c985;
    --fs-gold-dark: #967536;

    --fs-white: #ffffff;
    --fs-offwhite: #f4f1e9;
    --fs-muted: #9ba7a3;
    --fs-border: rgba(255,255,255,.10);

    --fs-shadow: 0 25px 80px rgba(0,0,0,.28);

    --font-primary: "Inter", sans-serif;
    --font-heading: "Manrope", sans-serif;

    --container: 1240px;
}


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

.gallery-page {
    background: var(--fs-black);
    color: var(--fs-white);
    font-family: var(--font-primary);
    overflow-x: hidden;
}

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

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

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

.gallery-page button {
    font-family: inherit;
}

.gallery-page .container {
    width: min(var(--container), calc(100% - 48px));
    margin-inline: auto;
}


/* =========================================================
   PRELOADER
========================================================= */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050b0a;
}

.loader-content {
    text-align: center;
}

.loader-mark {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
}

.loader-mark span {
    width: 5px;
    height: 38px;
    background: var(--fs-gold);
    animation: loaderBars 1s ease-in-out infinite;
}

.loader-mark span:nth-child(2) {
    animation-delay: .15s;
}

.loader-mark span:nth-child(3) {
    animation-delay: .3s;
}

.loader-content p {
    margin: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .28em;
}

@keyframes loaderBars {
    0%, 100% {
        transform: scaleY(.45);
        opacity: .45;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}


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

.gallery-page .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    height: 86px;

    background: rgba(5, 12, 11, .72);
    border-bottom: 1px solid rgba(255,255,255,.07);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        height .35s ease;
}

.gallery-page .site-header.scrolled {
    height: 72px;
    background: rgba(5, 12, 11, .94);
    box-shadow: 0 15px 50px rgba(0,0,0,.25);
}

.gallery-page .nav-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


/* =========================================================
   BRAND
========================================================= */

.gallery-page .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    flex-shrink: 0;
}

.gallery-page .brand-logo {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-page .brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-page .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.gallery-page .brand-text strong {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .13em;
}

.gallery-page .brand-text span {
    margin-top: 5px;
    color: var(--fs-gold);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .34em;
}


/* =========================================================
   NAVIGATION
========================================================= */

.gallery-page .main-nav {
    display: flex;
    align-items: center;
    gap: 7px;
}

.gallery-page .nav-link {
    position: relative;
    padding: 10px 14px;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    font-weight: 600;
    transition: color .25s ease;
}

.gallery-page .nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 1px;
    background: var(--fs-gold);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform .3s ease;
}

.gallery-page .nav-link:hover,
.gallery-page .nav-link.active {
    color: #fff;
}

.gallery-page .nav-link:hover::after,
.gallery-page .nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}


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

.gallery-page .nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gallery-page .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 12px 17px;

    background: var(--fs-gold);
    color: #10100c;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;

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

.gallery-page .nav-cta:hover {
    background: var(--fs-gold-light);
    transform: translateY(-2px);
}

.gallery-page .nav-cta i {
    font-size: 10px;
}


/* =========================================================
   LANGUAGE
========================================================= */

.gallery-page .language-switcher {
    position: relative;
}

.gallery-page .language-toggle {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 0 11px;

    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);

    color: #fff;
    cursor: pointer;

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

    transition: .25s ease;
}

.gallery-page .language-toggle:hover {
    border-color: rgba(201,164,92,.6);
    background: rgba(201,164,92,.08);
}

.gallery-page .language-toggle > i:first-child {
    color: var(--fs-gold);
}

.gallery-page .language-chevron {
    font-size: 8px;
    transition: transform .25s ease;
}

.gallery-page .language-toggle[aria-expanded="true"]
.language-chevron {
    transform: rotate(180deg);
}

.gallery-page .language-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    width: 170px;
    padding: 7px;

    background: rgba(11,23,21,.98);
    border: 1px solid rgba(255,255,255,.10);

    box-shadow: var(--fs-shadow);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);

    transition: .25s ease;
}

.gallery-page .language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gallery-page .language-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 10px;

    border: 0;
    background: transparent;

    color: rgba(255,255,255,.68);
    cursor: pointer;

    font-size: 12px;
    text-align: left;
}

.gallery-page .language-option:hover,
.gallery-page .language-option.active {
    background: rgba(201,164,92,.09);
    color: #fff;
}

.gallery-page .language-flag {
    font-size: 15px;
}

.gallery-page .language-check {
    margin-left: auto;
    color: var(--fs-gold);
    opacity: 0;
}

.gallery-page .language-option.active .language-check {
    opacity: 1;
}


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

.gallery-page .menu-toggle {
    width: 43px;
    height: 43px;

    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;

    border: 1px solid rgba(255,255,255,.12);
    background: transparent;

    cursor: pointer;
}

.gallery-page .menu-toggle span {
    width: 19px;
    height: 1px;
    background: #fff;
    transition: .3s ease;
}


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

.gallery-page .gallery-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;

    overflow: hidden;
    background: #07100f;
}

.gallery-page .gallery-hero-bg {
    position: absolute;
    inset: 0;
}

.gallery-page .gallery-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(1.04);
    animation: heroZoom 14s ease-out forwards;
}

@keyframes heroZoom {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }
}

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

    background:
        linear-gradient(
            90deg,
            rgba(4,11,10,.96) 0%,
            rgba(4,11,10,.84) 38%,
            rgba(4,11,10,.43) 68%,
            rgba(4,11,10,.75) 100%
        );
}

.gallery-page .gallery-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .13;

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

    background-size: 75px 75px;

    mask-image: linear-gradient(
        90deg,
        black,
        transparent 85%
    );
}

.gallery-page .gallery-hero-container {
    position: relative;
    z-index: 2;

    min-height: 100vh;

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

    padding-top: 100px;
    padding-bottom: 100px;
}

.gallery-page .gallery-hero-content {
    width: min(760px, 75%);
}

.gallery-page .section-label {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 26px;

    color: var(--fs-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
}

.gallery-page .section-label span:first-child {
    color: var(--fs-gold);
}

.gallery-page .section-label.light {
    color: rgba(255,255,255,.65);
}

.gallery-page .section-label span:first-child::after {
    content: "";
    display: inline-block;

    width: 35px;
    height: 1px;

    margin-left: 13px;
    vertical-align: middle;

    background: currentColor;
    opacity: .45;
}

.gallery-page .gallery-hero-kicker {
    margin-bottom: 20px;

    color: var(--fs-gold-light);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
}

.gallery-page .gallery-hero h1 {
    max-width: 850px;

    margin: 0;

    color: #fff;

    font-family: var(--font-heading);
    font-size: clamp(48px, 6.4vw, 91px);
    line-height: .93;
    font-weight: 800;
    letter-spacing: -.055em;
}

.gallery-page .gallery-hero h1 span {
    color: var(--fs-gold);
}

.gallery-page .gallery-hero-content > p {
    max-width: 620px;

    margin: 28px 0 0;

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

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

.gallery-page .gallery-hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;

    margin-top: 38px;
}


/* =========================================================
   BUTTONS
========================================================= */

.gallery-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 51px;
    padding: 0 23px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;

    transition: .3s ease;
}

.gallery-page .btn-gold {
    background: var(--fs-gold);
    color: #11100b;
}

.gallery-page .btn-gold:hover {
    background: var(--fs-gold-light);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(201,164,92,.18);
}

.gallery-page .btn i {
    transition: transform .3s ease;
}

.gallery-page .btn:hover i {
    transform: translateX(4px);
}

.gallery-page .services-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

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

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;

    transition: .25s ease;
}

.gallery-page .services-hero-link i {
    color: var(--fs-gold);
    transition: transform .25s ease;
}

.gallery-page .services-hero-link:hover {
    color: #fff;
}

.gallery-page .services-hero-link:hover i {
    transform: translateX(5px);
}


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

.gallery-page .gallery-hero-side {
    width: 150px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;

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

    text-align: right;
}

.gallery-page .gallery-hero-side span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .24em;
}

.gallery-page .gallery-hero-side strong {
    color: #fff;

    font-family: var(--font-heading);
    font-size: 16px;
    letter-spacing: .1em;
}

.gallery-page .gallery-hero-side div {
    width: 65px;
    height: 1px;
    margin: 10px 0;

    background: var(--fs-gold);
}


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

.gallery-page .gallery-hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;

    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(3,9,8,.36);

    backdrop-filter: blur(10px);
}

.gallery-page .gallery-hero-bottom-inner {
    min-height: 58px;

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

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

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em;
}

.gallery-page .gallery-hero-bottom-inner span:nth-child(even) {
    color: var(--fs-gold);
}


/* =========================================================
   INTRO
========================================================= */

.gallery-page .section {
    padding: 115px 0;
}

.gallery-page .gallery-intro {
    background: var(--fs-offwhite);
    color: var(--fs-black);
}

.gallery-page .gallery-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: start;
}

.gallery-page .gallery-intro-heading h2,
.gallery-page .gallery-highlights-header h2,
.gallery-page .gallery-section-header h2 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(40px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 800;
}

.gallery-page .gallery-intro-heading h2 span,
.gallery-page .gallery-highlights-header h2 span,
.gallery-page .gallery-section-header h2 span {
    color: var(--fs-gold-dark);
}

.gallery-page .content-kicker {
    display: block;

    margin-bottom: 22px;

    color: var(--fs-gold-dark);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

.gallery-page .gallery-intro-content .intro-large {
    margin: 0;

    max-width: 650px;

    font-family: var(--font-heading);
    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.38;
    font-weight: 600;
    letter-spacing: -.025em;
}

.gallery-page .gallery-intro-content > p:last-child {
    max-width: 610px;

    margin-top: 27px;

    color: #626c68;

    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   DARK SHOWCASE
========================================================= */

.gallery-page .section-dark {
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(201,164,92,.055),
            transparent 32%
        ),
        var(--fs-black);
    color: #fff;
}

.gallery-page .gallery-section-header {
    display: grid;
    grid-template-columns: 1fr .65fr;
    gap: 80px;

    align-items: end;

    margin-bottom: 50px;
}

.gallery-page .gallery-section-header > p {
    margin: 0;

    color: var(--fs-muted);

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


/* =========================================================
   FILTERS
========================================================= */

.gallery-page .gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 35px;
}

.gallery-page .gallery-filter {
    padding: 12px 18px;

    border: 1px solid rgba(255,255,255,.11);
    background: rgba(255,255,255,.025);

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

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;

    cursor: pointer;

    transition: .25s ease;
}

.gallery-page .gallery-filter:hover,
.gallery-page .gallery-filter.active {
    border-color: var(--fs-gold);
    background: var(--fs-gold);
    color: #11100b;
}


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

.gallery-page .gallery-grid {
    display: grid;

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

    grid-auto-rows: 260px;

    gap: 14px;
}

.gallery-page .gallery-item {
    position: relative;

    min-height: 260px;

    overflow: hidden;

    background: #14211f;

    cursor: pointer;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.gallery-page .gallery-item.gallery-large {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery-page .gallery-item.gallery-wide {
    grid-column: span 1;
}

.gallery-page .gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .6s ease;
}

.gallery-page .gallery-item video {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.gallery-page .gallery-item::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(0,0,0,.08) 45%,
            rgba(0,0,0,.90) 100%
        );

    pointer-events: none;
}

.gallery-page .gallery-item:hover img {
    transform: scale(1.07);
    filter: saturate(.88) contrast(1.08);
}


/* =========================================================
   GALLERY OVERLAY
========================================================= */

.gallery-page .gallery-item-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    padding: 27px;

    transform: translateY(4px);

    transition: transform .35s ease;
}

.gallery-page .gallery-item:hover .gallery-item-overlay {
    transform: translateY(0);
}

.gallery-page .gallery-item-overlay span {
    display: block;

    margin-bottom: 8px;

    color: var(--fs-gold-light);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.gallery-page .gallery-item-overlay h3 {
    margin: 0;

    color: #fff;

    font-family: var(--font-heading);
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.1;
    font-weight: 700;
}

.gallery-page .gallery-item-overlay i {
    position: absolute;
    right: 25px;
    bottom: 27px;

    width: 39px;
    height: 39px;

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

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

    color: #fff;

    font-size: 11px;

    opacity: 0;
    transform: translateY(10px);

    transition: .3s ease;
}

.gallery-page .gallery-item:hover .gallery-item-overlay i {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.gallery-page .gallery-item-hidden {
    opacity: 0;
    transform: scale(.94);
}


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

.gallery-page .gallery-highlights {
    background: #f7f5ef;
    color: var(--fs-black);
}

.gallery-page .gallery-highlights-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: 60px;
}

.gallery-page .gallery-highlights-header h2 {
    max-width: 520px;
}

.gallery-page .gallery-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;

    background: rgba(7,16,15,.13);
    border: 1px solid rgba(7,16,15,.13);
}

.gallery-page .gallery-highlight {
    position: relative;

    min-height: 320px;
    padding: 40px;

    background: #f7f5ef;
}

.gallery-page .gallery-highlight-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 35px;

    border: 1px solid rgba(150,117,54,.4);

    color: var(--fs-gold-dark);

    font-size: 17px;
}

.gallery-page .gallery-highlight > span {
    position: absolute;
    top: 40px;
    right: 40px;

    color: rgba(7,16,15,.2);

    font-family: var(--font-heading);
    font-size: 35px;
    font-weight: 800;
}

.gallery-page .gallery-highlight h3 {
    max-width: 240px;

    margin: 0 0 17px;

    font-family: var(--font-heading);
    font-size: 23px;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.gallery-page .gallery-highlight p {
    max-width: 300px;

    margin: 0;

    color: #66706c;

    font-size: 13px;
    line-height: 1.8;
}


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

.gallery-page .gallery-feature {
    position: relative;
    min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.gallery-page .gallery-feature-image {
    position: absolute;
    inset: 0;
}

.gallery-page .gallery-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-page .gallery-feature-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,11,10,.96),
            rgba(4,11,10,.70) 48%,
            rgba(4,11,10,.28)
        );
}

.gallery-page .gallery-feature .container {
    position: relative;
    z-index: 2;
}

.gallery-page .gallery-feature-content {
    width: min(680px, 100%);
}

.gallery-page .gallery-feature h2 {
    margin: 0;

    color: #fff;

    font-family: var(--font-heading);
    font-size: clamp(45px, 6vw, 76px);
    line-height: .96;
    letter-spacing: -.055em;
}

.gallery-page .gallery-feature h2 span {
    color: var(--fs-gold);
}

.gallery-page .gallery-feature p {
    max-width: 590px;

    margin: 28px 0 35px;

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

    font-size: 15px;
    line-height: 1.85;
}


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

.gallery-page .gallery-final-cta {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(201,164,92,.10),
            transparent 30%
        ),
        #091310;
}

.gallery-page .gallery-cta-pattern {
    position: absolute;
    inset: 0;

    opacity: .12;

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

    background-size: 70px 70px;

    mask-image: linear-gradient(
        90deg,
        transparent,
        black,
        transparent
    );
}

.gallery-page .gallery-cta-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.gallery-page .gallery-cta-content h2 {
    margin: 0;

    color: #fff;

    font-family: var(--font-heading);
    font-size: clamp(45px, 6vw, 82px);
    line-height: .94;
    letter-spacing: -.06em;
}

.gallery-page .gallery-cta-content h2 span {
    color: var(--fs-gold);
}

.gallery-page .gallery-cta-content > p {
    max-width: 650px;

    margin: 28px 0 35px;

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

    font-size: 15px;
    line-height: 1.85;
}

.gallery-page .gallery-cta-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.gallery-page .cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;

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

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

.gallery-page .cta-phone i {
    color: var(--fs-gold);
}


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

.gallery-page .site-footer {
    padding: 80px 0 25px;

    background: #050b0a;

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

.gallery-page .footer-main {
    display: grid;
    grid-template-columns: 1.5fr .7fr .9fr .9fr;
    gap: 65px;

    padding-bottom: 60px;
}

.gallery-page .footer-brand > p {
    max-width: 310px;

    margin: 25px 0;

    color: var(--fs-muted);

    font-size: 13px;
    line-height: 1.8;
}

.gallery-page .footer-location {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    max-width: 300px;

    color: #7e8985;

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

.gallery-page .footer-location i {
    margin-top: 3px;
    color: var(--fs-gold);
}

.gallery-page .footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.gallery-page .footer-column h4 {
    margin: 0 0 12px;

    color: #fff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

.gallery-page .footer-column > a {
    color: #77827e;

    font-size: 12px;

    transition: .25s ease;
}

.gallery-page .footer-column > a:hover {
    color: var(--fs-gold);
    transform: translateX(3px);
}

.gallery-page .footer-socials {
    display: flex;
    gap: 8px;

    margin-top: 12px;
}

.gallery-page .footer-socials a {
    width: 34px;
    height: 34px;

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

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

    color: #84908c;

    font-size: 12px;

    transition: .25s ease;
}

.gallery-page .footer-socials a:hover {
    border-color: var(--fs-gold);
    color: var(--fs-gold);
}

.gallery-page .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 23px;

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

    color: #59635f;

    font-size: 10px;
}

.gallery-page .footer-bottom p {
    margin: 0;
}

.gallery-page .footer-bottom div {
    color: #59635f;
}


/* =========================================================
   WHATSAPP
========================================================= */

.gallery-page .whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 4500;

    display: flex;
    align-items: center;
    gap: 10px;
}

.gallery-page .whatsapp-icon {
    width: 53px;
    height: 53px;

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

    border-radius: 50%;

    background: #19a95b;
    color: #fff;

    font-size: 24px;

    box-shadow: 0 12px 35px rgba(0,0,0,.25);

    transition: transform .25s ease;
}

.gallery-page .whatsapp-float:hover .whatsapp-icon {
    transform: translateY(-4px) scale(1.04);
}

.gallery-page .whatsapp-tooltip {
    padding: 9px 13px;

    border-radius: 3px;

    background: #fff;
    color: #18211f;

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

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

    opacity: 0;
    transform: translateX(8px);

    transition: .25s ease;
}

.gallery-page .whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}


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

.gallery-page .back-to-top {
    position: fixed;
    right: 25px;
    bottom: 90px;
    z-index: 4000;

    width: 43px;
    height: 43px;

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

    border: 1px solid rgba(201,164,92,.35);

    background: rgba(7,16,15,.85);
    color: var(--fs-gold);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    transition: .3s ease;
}

.gallery-page .back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gallery-page .back-to-top:hover {
    background: var(--fs-gold);
    color: #111;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.gallery-page .reveal {
    opacity: 0;
    transform: translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.gallery-page .reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media (max-width: 1100px) {

    .gallery-page .main-nav {
        gap: 0;
    }

    .gallery-page .nav-link {
        padding-inline: 9px;
    }

    .gallery-page .nav-cta {
        padding-inline: 13px;
    }

    .gallery-page .gallery-intro-grid {
        gap: 55px;
    }

    .gallery-page .footer-main {
        gap: 35px;
    }
}


/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (max-width: 900px) {

    .gallery-page .main-nav {
        position: fixed;
        top: 86px;
        left: 16px;
        right: 16px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        padding: 15px;

        background: rgba(7,16,15,.98);
        border: 1px solid rgba(255,255,255,.10);

        box-shadow: var(--fs-shadow);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);

        transition: .3s ease;
    }

    .gallery-page .main-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .gallery-page .nav-link {
        padding: 15px;
    }

    .gallery-page .nav-link::after {
        display: none;
    }

    .gallery-page .menu-toggle {
        display: flex;
    }

    .gallery-page .nav-cta {
        display: none;
    }

    .gallery-page .gallery-hero-content {
        width: 90%;
    }

    .gallery-page .gallery-hero-side {
        display: none;
    }

    .gallery-page .gallery-intro-grid,
    .gallery-page .gallery-section-header {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .gallery-page .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 250px;
    }

    .gallery-page .gallery-item,
    .gallery-page .gallery-item.gallery-large,
    .gallery-page .gallery-item.gallery-wide,
    .gallery-page .gallery-item:nth-child(2),
    .gallery-page .gallery-item:nth-child(3),
    .gallery-page .gallery-item:nth-child(4),
    .gallery-page .gallery-item:nth-child(5) {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-page .gallery-highlights-grid {
        grid-template-columns: 1fr;
    }

    .gallery-page .footer-main {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   RESPONSIVE — 650px
========================================================= */

@media (max-width: 650px) {

    .gallery-page .container {
        width: min(100% - 32px, var(--container));
    }

    .gallery-page .site-header {
        height: 74px;
    }

    .gallery-page .site-header.scrolled {
        height: 68px;
    }

    .gallery-page .brand-logo {
        width: 37px;
        height: 37px;
    }

    .gallery-page .brand-text strong {
        font-size: 11px;
    }

    .gallery-page .brand-text span {
        font-size: 7px;
    }

    .gallery-page .language-toggle {
        padding-inline: 9px;
    }

    .gallery-page .language-toggle .language-chevron {
        display: none;
    }

    .gallery-page .gallery-hero-container {
        padding-top: 110px;
        padding-bottom: 90px;
    }

    .gallery-page .gallery-hero-content {
        width: 100%;
    }

    .gallery-page .gallery-hero h1 {
        font-size: clamp(43px, 13vw, 68px);
    }

    .gallery-page .gallery-hero-content > p {
        font-size: 14px;
        line-height: 1.75;
    }

    .gallery-page .gallery-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .gallery-page .gallery-hero-bottom-inner {
        min-height: 50px;

        overflow: hidden;
        white-space: nowrap;

        font-size: 7px;
    }

    .gallery-page .section {
        padding: 80px 0;
    }

    .gallery-page .gallery-intro-grid {
        gap: 35px;
    }

    .gallery-page .gallery-intro-heading h2,
    .gallery-page .gallery-highlights-header h2 {
        font-size: 43px;
    }

    .gallery-page .gallery-intro-content .intro-large {
        font-size: 22px;
    }

    .gallery-page .gallery-section-header h2 {
        font-size: 45px;
    }

    .gallery-page .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 270px;
    }

    .gallery-page .gallery-item.gallery-large,
    .gallery-page .gallery-item.gallery-wide {
        grid-column: span 1;
    }

    .gallery-page .gallery-item {
        min-height: 270px;
    }

    .gallery-page .gallery-item-overlay {
        padding: 20px;
    }

    .gallery-page .gallery-item-overlay i {
        right: 20px;
        bottom: 20px;
    }

    .gallery-page .gallery-filters {
        overflow-x: auto;
        flex-wrap: nowrap;

        padding-bottom: 5px;

        scrollbar-width: none;
    }

    .gallery-page .gallery-filter {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .gallery-page .gallery-highlights-header {
        display: block;
        margin-bottom: 35px;
    }

    .gallery-page .gallery-highlight {
        min-height: 290px;
        padding: 30px;
    }

    .gallery-page .gallery-feature {
        min-height: 560px;
    }

    .gallery-page .gallery-feature-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4,11,10,.95),
                rgba(4,11,10,.68)
            );
    }

    .gallery-page .gallery-feature h2 {
        font-size: 50px;
    }

    .gallery-page .gallery-final-cta {
        padding: 85px 0;
    }

    .gallery-page .gallery-cta-content h2 {
        font-size: 48px;
    }

    .gallery-page .gallery-cta-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .gallery-page .footer-main {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 45px;
    }

    .gallery-page .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .gallery-page .whatsapp-float {
        right: 16px;
        bottom: 17px;
    }

    .gallery-page .whatsapp-tooltip {
        display: none;
    }

    .gallery-page .back-to-top {
        right: 16px;
        bottom: 80px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .gallery-page *,
    .gallery-page *::before,
    .gallery-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}
/* =========================================================
   FUEL SECURITY CO. LTD.
   PREMIUM CONTACT PAGE
========================================================= */

:root {
    --navy: #07111f;
    --navy-2: #0b1727;
    --navy-3: #101f33;
    --gold: #c9a45c;
    --gold-light: #e3c77f;
    --white: #ffffff;
    --ivory: #f7f5ef;
    --text: #172333;
    --muted: #6b7583;
    --border: rgba(7, 17, 31, 0.10);
    --dark-border: rgba(255,255,255,0.10);
    --shadow: 0 25px 70px rgba(7,17,31,.10);

    --font-primary: "Inter", sans-serif;
    --font-display: "Manrope", sans-serif;

    --container: 1240px;
    --transition: all .35s cubic-bezier(.22,.61,.36,1);
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
}

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

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

.container {
    width: min(100% - 48px, var(--container));
    margin-inline: auto;
}

.section {
    padding: 120px 0;
}

.section-dark {
    background: var(--navy);
    color: var(--white);
}


/* =========================================================
   PRELOADER
========================================================= */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--navy);
    display: grid;
    place-items: center;
    transition: opacity .6s ease, visibility .6s ease;
}

.preloader.hide {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
}

.loader-content p {
    margin-top: 18px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
}

.loader-mark {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.loader-mark span {
    width: 4px;
    height: 32px;
    background: var(--gold);
    animation: loaderBars 1s infinite ease-in-out;
}

.loader-mark span:nth-child(2) {
    animation-delay: .15s;
}

.loader-mark span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes loaderBars {
    0%,100% {
        transform: scaleY(.35);
        opacity: .5;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}


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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(7,17,31,.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: var(--transition);
}

.site-header.scrolled {
    background: rgba(7,17,31,.96);
    box-shadow: 0 15px 45px rgba(0,0,0,.18);
}

.nav-container {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


/* LOGO */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-text strong {
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1.5px;
}

.brand-text span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-top: 5px;
}


/* NAVIGATION */

.main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto;
}

.nav-link {
    position: relative;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
    padding: 34px 0;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 24px;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


/* NAV ACTIONS */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}


/* =========================================================
   LANGUAGE SWITCHER
========================================================= */

.language-switcher {
    position: relative;
}

.language-toggle {
    height: 40px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    transition: var(--transition);
}

.language-toggle:hover {
    border-color: rgba(201,164,92,.55);
    background: rgba(201,164,92,.08);
}

.language-toggle > i:first-child {
    color: var(--gold);
    font-size: 13px;
}

#currentLanguage {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.language-chevron {
    font-size: 9px;
    transition: transform .3s ease;
}

.language-toggle[aria-expanded="true"] .language-chevron {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 165px;
    padding: 7px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
}

.language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-option {
    width: 100%;
    padding: 11px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.language-option:hover {
    background: var(--ivory);
}

.language-option.active {
    background: rgba(201,164,92,.12);
}

.language-flag {
    font-size: 16px;
}

.language-check {
    margin-left: auto;
    color: var(--gold);
    opacity: 0;
}

.language-option.active .language-check {
    opacity: 1;
}


/* NAV CTA */

.nav-cta {
    min-height: 42px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--navy);
    background: var(--gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    border-radius: 3px;
    transition: var(--transition);
}

.nav-cta:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(201,164,92,.25);
}

.nav-cta i {
    font-size: 10px;
}


/* MOBILE MENU */

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    cursor: pointer;
    padding: 10px;
}

.menu-toggle span {
    display: block;
    height: 2px;
    background: #fff;
    margin: 5px 0;
    transition: .3s ease;
}


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

.contact-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
}

.contact-hero-bg {
    position: absolute;
    inset: 0;
}

.contact-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.75);
    transform: scale(1.03);
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(4,11,21,.96) 0%,
            rgba(4,11,21,.87) 38%,
            rgba(4,11,21,.50) 70%,
            rgba(4,11,21,.75) 100%
        );
}

.contact-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to right, black, transparent 80%);
}

.contact-hero-container {
    position: relative;
    z-index: 2;
    padding-top: 100px;
    display: grid;
    grid-template-columns: minmax(0, 760px) 1fr;
    align-items: center;
    gap: 80px;
}

.contact-hero-content {
    max-width: 780px;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 22px;
}

.section-label span:first-child {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 9px;
}

.section-label.light {
    color: var(--gold-light);
}

.contact-hero-kicker {
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.contact-hero-kicker span {
    color: var(--gold);
    margin: 0 8px;
}

.contact-hero h1 {
    max-width: 850px;
    font-family: var(--font-display);
    font-size: clamp(60px, 7vw, 105px);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -5px;
    margin-bottom: 30px;
}

.contact-hero h1 span {
    display: block;
    color: var(--gold);
}

.contact-hero p {
    max-width: 650px;
    color: rgba(255,255,255,.70);
    font-size: 16px;
    line-height: 1.85;
}

.contact-hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 38px;
}

.btn {
    min-height: 54px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    transition: var(--transition);
    cursor: pointer;
}

.btn-gold {
    color: var(--navy);
    background: var(--gold);
}

.btn-gold:hover {
    background: var(--gold-light);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(201,164,92,.24);
}

.contact-hero-phone {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.contact-hero-phone i {
    color: var(--gold);
    width: 36px;
    height: 36px;
    border: 1px solid rgba(201,164,92,.4);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.contact-hero-side {
    justify-self: end;
    padding: 40px;
    width: 220px;
    border-left: 1px solid rgba(201,164,92,.4);
    border-right: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-hero-side span {
    color: rgba(255,255,255,.48);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-hero-side strong {
    font-family: var(--font-display);
    font-size: 27px;
    letter-spacing: 1px;
}

.contact-hero-side div {
    width: 35px;
    height: 2px;
    margin: 12px 0;
    background: var(--gold);
}

.contact-hero-bottom {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(4,11,21,.55);
    backdrop-filter: blur(10px);
}

.contact-hero-bottom-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 17px;
    color: rgba(255,255,255,.55);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-hero-bottom-inner span:nth-child(even) {
    color: var(--gold);
}


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

.contact-info {
    background: var(--ivory);
}

.contact-info-header {
    max-width: 700px;
    margin-bottom: 55px;
}

.contact-info-header h2,
.contact-location-header h2 {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 65px);
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 22px;
}

.contact-info-header h2 span,
.contact-location-header h2 span {
    color: var(--gold);
}

.contact-info-header p,
.contact-location-header p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 15px;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(7,17,31,.10);
    border: 1px solid rgba(7,17,31,.10);
}

.contact-info-card {
    position: relative;
    min-height: 275px;
    padding: 34px 30px;
    background: #fff;
    overflow: hidden;
    transition: var(--transition);
}

.contact-info-card::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.contact-info-card:hover {
    transform: translateY(-8px);
    z-index: 2;
    box-shadow: 0 25px 50px rgba(7,17,31,.12);
}

.contact-info-card:hover::before {
    transform: scaleX(1);
}

.contact-info-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: var(--gold);
    border: 1px solid rgba(201,164,92,.35);
    margin-bottom: 30px;
    transition: var(--transition);
}

.contact-info-card:hover .contact-info-icon {
    color: var(--navy);
    background: var(--gold);
}

.contact-info-card > span {
    color: #8a919b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.contact-info-card h3 {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.contact-info-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin-top: 9px;
}

.contact-card-arrow {
    position: absolute;
    right: 28px;
    bottom: 30px;
    color: var(--gold);
    font-size: 13px;
    transition: var(--transition);
}

.contact-info-card:hover .contact-card-arrow {
    transform: translateX(5px);
}


/* =========================================================
   CONTACT FORM SECTION
========================================================= */

.contact-main {
    position: relative;
    overflow: hidden;
}

.contact-main::before {
    content: "";
    position: absolute;
    top: -250px;
    right: -200px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(201,164,92,.08);
    border-radius: 50%;
}

.contact-main::after {
    content: "";
    position: absolute;
    bottom: -300px;
    left: -200px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(201,164,92,.07);
    border-radius: 50%;
}

.contact-main-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: start;
}

.contact-main-content {
    padding-top: 20px;
}

.contact-main-content h2 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 67px);
    line-height: .98;
    letter-spacing: -3px;
    margin-bottom: 25px;
}

.contact-main-content h2 span {
    color: var(--gold);
}

.contact-main-content > p {
    max-width: 490px;
    color: rgba(255,255,255,.58);
    font-size: 15px;
    line-height: 1.85;
}

.contact-assurance {
    margin-top: 45px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-assurance > div {
    display: flex;
    gap: 16px;
    align-items: center;
}

.contact-assurance > div > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--gold);
    background: rgba(201,164,92,.08);
    border: 1px solid rgba(201,164,92,.20);
}

.contact-assurance strong,
.contact-assurance span {
    display: block;
}

.contact-assurance strong {
    color: #fff;
    font-size: 12px;
    margin-bottom: 5px;
}

.contact-assurance span {
    color: rgba(255,255,255,.42);
    font-size: 11px;
}


/* FORM */

.contact-form-wrapper {
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(201,164,92,.45),
        rgba(255,255,255,.06),
        rgba(201,164,92,.15)
    );
}

.contact-form {
    padding: 42px;
    background: #0c1828;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.75);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    color: #fff;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.11);
    outline: none;
    border-radius: 0;
    transition: var(--transition);
}

.form-group input,
.form-group select {
    height: 52px;
    padding: 0 16px;
}

.form-group textarea {
    padding: 15px 16px;
    min-height: 135px;
    resize: vertical;
    line-height: 1.6;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,.28);
}

.form-group select {
    color: rgba(255,255,255,.7);
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gold) 50%),
        linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 22px,
        calc(100% - 13px) 22px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form-group select option {
    color: var(--text);
    background: #fff;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--gold);
    background: rgba(201,164,92,.045);
    box-shadow: 0 0 0 3px rgba(201,164,92,.07);
}

.contact-submit {
    width: 100%;
    margin-top: 4px;
}

.form-note {
    margin-top: 16px;
    color: rgba(255,255,255,.35);
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}


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

.contact-location {
    background: #fff;
}

.contact-location-header {
    max-width: 720px;
    margin-bottom: 55px;
}

.contact-location-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    min-height: 530px;
    background: var(--navy);
    box-shadow: var(--shadow);
}

.contact-map {
    min-height: 530px;
    overflow: hidden;
    position: relative;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 530px;
    filter: grayscale(.15) contrast(1.05);
}

.contact-location-details {
    position: relative;
    padding: 55px 45px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.contact-location-details::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(201,164,92,.12);
    border-radius: 50%;
    right: -170px;
    top: -100px;
}

.location-detail-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    color: var(--gold);
    border: 1px solid rgba(201,164,92,.35);
    margin-bottom: 28px;
}

.contact-location-details > span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.contact-location-details h3 {
    position: relative;
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 26px;
}

.contact-location-details > p {
    position: relative;
    margin-top: 12px;
    color: rgba(255,255,255,.55);
    font-size: 13px;
    line-height: 1.8;
}

.location-detail-list {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.location-detail-list > div {
    display: flex;
    align-items: center;
    gap: 13px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
}

.location-detail-list i {
    width: 18px;
    color: var(--gold);
}

.location-detail-list a {
    transition: var(--transition);
}

.location-detail-list a:hover {
    color: var(--gold);
}

.location-directions {
    position: relative;
    width: fit-content;
    margin-top: 35px;
    padding: 14px 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--navy);
    background: var(--gold);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    transition: var(--transition);
}

.location-directions:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
}


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

.contact-final-cta {
    position: relative;
    padding: 125px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(201,164,92,.12),
            transparent 35%
        ),
        var(--navy);
    color: #fff;
}

.contact-cta-pattern {
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 70px 70px;
}

.contact-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.contact-cta-content h2 {
    font-family: var(--font-display);
    font-size: clamp(45px, 6vw, 82px);
    line-height: .95;
    letter-spacing: -4px;
    margin-bottom: 25px;
}

.contact-cta-content h2 span {
    color: var(--gold);
}

.contact-cta-content > p {
    max-width: 650px;
    color: rgba(255,255,255,.58);
    font-size: 15px;
    line-height: 1.8;
}

.contact-cta-actions {
    margin-top: 38px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.cta-email {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}

.cta-email i {
    color: var(--gold);
}

.cta-email:hover {
    color: #fff;
}


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

.site-footer {
    background: #040b14;
    color: #fff;
    padding-top: 85px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr .8fr .9fr 1fr;
    gap: 65px;
    padding-bottom: 65px;
}

.footer-logo {
    margin-bottom: 25px;
}

.footer-brand > p {
    max-width: 330px;
    color: rgba(255,255,255,.45);
    font-size: 12px;
    line-height: 1.8;
}

.footer-location {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
    line-height: 1.7;
}

.footer-location i {
    color: var(--gold);
    margin-top: 3px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-column h4 {
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.footer-column a {
    width: fit-content;
    color: rgba(255,255,255,.5);
    font-size: 12px;
    transition: var(--transition);
}

.footer-column a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-contact a {
    color: rgba(255,255,255,.72);
}

.footer-socials {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.65);
    border: 1px solid rgba(255,255,255,.10);
}

.footer-socials a:hover {
    color: var(--navy);
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-3px);
}

.footer-bottom {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.32);
    font-size: 10px;
}

.footer-bottom span {
    color: rgba(255,255,255,.5);
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 900;
}

.whatsapp-icon {
    width: 57px;
    height: 57px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #168c45;
    border: 3px solid rgba(255,255,255,.85);
    border-radius: 50%;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
    font-size: 25px;
    transition: var(--transition);
}

.whatsapp-float:hover .whatsapp-icon {
    transform: translateY(-5px) scale(1.04);
}

.whatsapp-tooltip {
    position: absolute;
    right: 68px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    color: #fff;
    background: var(--navy);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
}


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

.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 95px;
    z-index: 800;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--navy);
    background: var(--gold);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--gold-light);
    transform: translateY(-3px);
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {

    .main-nav {
        gap: 18px;
    }

    .nav-cta {
        padding-inline: 13px;
    }

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

    .contact-hero-side {
        display: none;
    }

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

    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-main-content {
        max-width: 750px;
    }

    .contact-location-grid {
        grid-template-columns: 1fr;
    }

    .contact-location-details {
        min-height: 480px;
    }

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


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 820px) {

    .container {
        width: min(100% - 30px, var(--container));
    }

    .section {
        padding: 80px 0;
    }


    /* HEADER */

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

    .brand-logo {
        width: 42px;
        height: 42px;
    }

    .brand-text strong {
        font-size: 13px;
    }

    .main-nav {
        position: fixed;
        top: 72px;
        left: 15px;
        right: 15px;
        margin: 0;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(7,17,31,.98);
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 25px 50px rgba(0,0,0,.25);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: var(--transition);
    }

    .main-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-link {
        padding: 15px 12px;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .nav-link::after {
        display: none;
    }

    .nav-actions {
        margin-left: auto;
    }

    .nav-cta {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* LANGUAGE */

    .language-toggle {
        height: 38px;
    }


    /* HERO */

    .contact-hero {
        min-height: 700px;
    }

    .contact-hero-container {
        padding-top: 70px;
    }

    .contact-hero h1 {
        font-size: clamp(52px, 15vw, 78px);
        letter-spacing: -3px;
    }

    .contact-hero p {
        font-size: 14px;
    }

    .contact-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .contact-hero-bottom {
        display: none;
    }


    /* INFO */

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        min-height: 245px;
    }


    /* FORM */

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form {
        padding: 27px 20px;
    }


    /* LOCATION */

    .contact-map,
    .contact-map iframe {
        min-height: 390px;
    }

    .contact-location-details {
        padding: 45px 28px;
    }


    /* CTA */

    .contact-final-cta {
        padding: 90px 0;
    }

    .contact-cta-content h2 {
        letter-spacing: -2px;
    }

    .contact-cta-actions {
        flex-direction: column;
        align-items: flex-start;
    }


    /* FOOTER */

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

    .footer-bottom {
        padding: 20px 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }


    /* FLOATING */

    .whatsapp-float {
        right: 15px;
        bottom: 15px;
    }

    .whatsapp-tooltip {
        display: none;
    }

    .back-to-top {
        right: 15px;
        bottom: 85px;
    }
}


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

@media (max-width: 480px) {

    .container {
        width: min(100% - 24px, var(--container));
    }

    .brand-text {
        display: none;
    }

    .contact-hero {
        min-height: 650px;
    }

    .contact-hero h1 {
        font-size: 50px;
    }

    .contact-hero-kicker {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .contact-info-header h2,
    .contact-location-header h2,
    .contact-main-content h2 {
        font-size: 39px;
        letter-spacing: -2px;
    }

    .contact-form {
        padding: 24px 17px;
    }

    .location-directions {
        width: 100%;
        justify-content: center;
    }

    .contact-cta-content h2 {
        font-size: 43px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   MOBILE NAVIGATION COMPATIBILITY
========================================================= */

@media (max-width: 900px) {

    body.menu-open {
        overflow: hidden;
    }

    .main-nav.open,
    .main-nav.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) translateX(0) !important;
        z-index: 1001 !important;
    }

    .menu-toggle {
        position: relative;
        z-index: 1002;
    }

}
/* =========================================================
   FUEL SECURITY
   SERVICES PAGE ONLY
   ========================================================= */


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

.services-page .services-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #050505;
    color: #fff;
}

.services-page .services-hero-bg {
    position: absolute;
    inset: 0;
}

.services-page .services-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-page .services-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.78) 45%,
            rgba(0,0,0,.38) 100%
        );
    z-index: 1;
}

.services-page .services-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .08;
    background-image:
        linear-gradient(rgba(255,215,0,.8) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,215,0,.8) 1px, transparent 1px);
    background-size: 70px 70px;
}

.services-page .services-hero-container {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    align-items: center;
    gap: 70px;
    padding-top: 120px;
    padding-bottom: 120px;
}

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

.services-page .services-hero-kicker {
    margin: 28px 0 15px;
    color: #FFD700;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .22em;
}

.services-page .services-hero h1 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(3.3rem, 7vw, 7.2rem);
    line-height: .91;
    letter-spacing: -.055em;
    font-weight: 800;
}

.services-page .services-hero h1 span {
    display: block;
    color: #FFD700;
}

.services-page .services-hero p {
    max-width: 650px;
    margin: 30px 0 0;
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgba(255,255,255,.78);
}

.services-page .services-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 38px;
}

.services-page .services-hero-side {
    border-left: 1px solid rgba(255,215,0,.45);
    padding-left: 35px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.services-page .services-hero-side span {
    font-size: .7rem;
    letter-spacing: .2em;
    color: rgba(255,255,255,.6);
}

.services-page .services-hero-side strong {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: .95;
    color: #FFD700;
}

.services-page .services-hero-side div {
    width: 45px;
    height: 2px;
    margin: 12px 0;
    background: #FFD700;
}

.services-page .services-hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(12px);
}

.services-page .services-hero-bottom-inner {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.services-page .services-hero-bottom-inner span {
    font-size: .68rem;
    letter-spacing: .17em;
    font-weight: 700;
    color: rgba(255,255,255,.68);
}


/* =========================================================
   INTRO
========================================================= */

.services-page .services-intro {
    background: #f6f6f3;
}

.services-page .services-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: start;
}

.services-page .services-intro-heading h2,
.services-page .services-capabilities-content h2,
.services-page .services-coverage-header h2,
.services-page .services-quality-heading h2 {
    margin: 25px 0 0;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.services-page .services-intro-heading h2 span,
.services-page .services-capabilities-content h2 span,
.services-page .services-coverage-header h2 span,
.services-page .services-quality-heading h2 span {
    display: block;
}

.services-page .services-intro-content {
    padding-top: 15px;
}

.services-page .services-intro-content .content-kicker {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    color: #1E5A3A;
}

.services-page .services-intro-content .intro-large {
    margin: 22px 0;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.5;
    font-weight: 600;
}

.services-page .services-intro-content p:not(.intro-large) {
    max-width: 700px;
    line-height: 1.85;
    color: #555;
}


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

.services-page .services-showcase {
    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #0b0d0c 55%,
            #111 100%
        );
    position: relative;
    overflow: hidden;
}

.services-page .services-showcase::before {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    right: -220px;
    top: -220px;
    border: 1px solid rgba(255,215,0,.15);
    border-radius: 50%;
}

.services-page .services-section-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr .65fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 65px;
}

.services-page .services-section-header h2 {
    margin: 25px 0 0;
    max-width: 700px;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: .95;
    letter-spacing: -.045em;
}

.services-page .services-section-header h2 span {
    display: block;
    color: #FFD700;
}

.services-page .services-section-header > p {
    color: rgba(255,255,255,.62);
    line-height: 1.8;
}


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

.services-page .services-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.12);
}

.services-page .service-card {
    position: relative;
    min-height: 370px;
    padding: 42px;
    background: #0b0c0c;
    overflow: hidden;
    transition:
        transform .35s ease,
        background .35s ease;
}

.services-page .service-card:hover {
    background: #101312;
    transform: translateY(-5px);
}

.services-page .service-card-featured {
    background:
        linear-gradient(
            145deg,
            rgba(30,90,58,.35),
            #0b0c0c 65%
        );
}

.services-page .service-card-wide {
    grid-column: span 2;
    min-height: 300px;
}

.services-page .service-card-number {
    position: absolute;
    top: 25px;
    right: 30px;
    font-size: .7rem;
    letter-spacing: .18em;
    color: rgba(255,255,255,.3);
}

.services-page .service-card-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,215,0,.35);
    color: #FFD700;
    font-size: 1.3rem;
    margin-bottom: 45px;
}

.services-page .service-card-content > span {
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .17em;
    color: #87CEEB;
}

.services-page .service-card h3 {
    margin: 13px 0 18px;
    color: #fff;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    letter-spacing: -.025em;
}

.services-page .service-card p {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.62);
    line-height: 1.8;
}

.services-page .service-card-line {
    width: 50px;
    height: 2px;
    background: #FFD700;
    margin-top: 30px;
}


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

.services-page .services-capabilities {
    background: #fff;
}

.services-page .services-capabilities-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 100px;
    align-items: center;
}

.services-page .services-capabilities-content .intro-large {
    max-width: 720px;
    margin: 30px 0 20px;
    font-size: 1.45rem;
    line-height: 1.6;
    font-weight: 600;
}

.services-page .services-capabilities-content > p:not(.intro-large) {
    max-width: 680px;
    line-height: 1.85;
    color: #5d5d5d;
}

.services-page .services-capabilities-content .btn {
    margin-top: 28px;
}

.services-page .services-capabilities-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid #ddd;
}

.services-page .capability-stat {
    min-height: 210px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.services-page .capability-stat:nth-child(2n) {
    border-right: 0;
}

.services-page .capability-stat:nth-last-child(-n+2) {
    border-bottom: 0;
}

.services-page .capability-stat strong {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -.06em;
    color: #1E5A3A;
}

.services-page .capability-stat span {
    max-width: 150px;
    margin-top: 15px;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.5;
    color: #555;
}


/* =========================================================
   OPERATIONS
========================================================= */

.services-page .services-operations {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.services-page .services-operations-image {
    position: absolute;
    inset: 0;
}

.services-page .services-operations-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-page .services-operations-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94),
            rgba(0,0,0,.76) 55%,
            rgba(0,0,0,.35)
        );
}

.services-page .services-operations .container {
    position: relative;
    z-index: 2;
}

.services-page .services-operations-content {
    max-width: 760px;
}

.services-page .services-operations h2 {
    margin: 25px 0;
    font-size: clamp(2.7rem, 5vw, 5.5rem);
    line-height: .94;
    letter-spacing: -.05em;
}

.services-page .services-operations h2 span {
    display: block;
    color: #FFD700;
}

.services-page .services-operations-content > p {
    max-width: 650px;
    color: rgba(255,255,255,.7);
    line-height: 1.85;
}

.services-page .operations-features {
    margin-top: 40px;
    display: grid;
    gap: 18px;
}

.services-page .operation-feature {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(10px);
}

.services-page .operation-feature > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: #FFD700;
    border: 1px solid rgba(255,215,0,.3);
}

.services-page .operation-feature strong {
    display: block;
    margin-bottom: 5px;
    font-size: .73rem;
    letter-spacing: .12em;
}

.services-page .operation-feature span {
    display: block;
    color: rgba(255,255,255,.58);
    font-size: .9rem;
    line-height: 1.6;
}


/* =========================================================
   COVERAGE
========================================================= */

.services-page .services-coverage {
    background: #f5f5f2;
}

.services-page .services-coverage-header {
    max-width: 850px;
    margin-bottom: 55px;
}

.services-page .services-coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.services-page .coverage-card {
    background: #fff;
    border: 1px solid #e1e1dc;
    overflow: hidden;
}

.services-page .coverage-card-image {
    height: 360px;
    overflow: hidden;
}

.services-page .coverage-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.services-page .coverage-card:hover img {
    transform: scale(1.05);
}

.services-page .coverage-card-content {
    padding: 32px;
}

.services-page .coverage-card-content > span {
    color: #1E5A3A;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.services-page .coverage-card h3 {
    margin: 10px 0;
    font-size: 2rem;
}

.services-page .coverage-card p {
    margin: 0;
    color: #666;
    line-height: 1.8;
}


/* =========================================================
   WHY FUEL SECURITY
========================================================= */

.services-page .services-why {
    background: #06100b;
    color: #fff;
    padding: 110px 0;
}

.services-page .services-why-header {
    max-width: 800px;
    margin-bottom: 60px;
}

.services-page .services-why-header h2 {
    margin-top: 25px;
    font-size: clamp(2.6rem, 5vw, 5rem);
    line-height: .95;
    letter-spacing: -.05em;
}

.services-page .services-why-header h2 span {
    display: block;
    color: #FFD700;
}

.services-page .services-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.12);
}

.services-page .why-card {
    min-height: 330px;
    padding: 35px;
    background: #08110c;
    transition: background .3s ease;
}

.services-page .why-card:hover {
    background: #0d1b13;
}

.services-page .why-card > i {
    color: #FFD700;
    font-size: 1.6rem;
}

.services-page .why-card > span {
    display: block;
    margin-top: 45px;
    font-size: .67rem;
    color: rgba(255,255,255,.35);
    letter-spacing: .15em;
}

.services-page .why-card h3 {
    margin: 12px 0;
    font-size: 1.35rem;
}

.services-page .why-card p {
    margin: 0;
    color: rgba(255,255,255,.58);
    line-height: 1.75;
    font-size: .9rem;
}


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

.services-page .services-quality {
    background: #fff;
}

.services-page .services-quality-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 100px;
}

.services-page .services-quality-content {
    max-width: 750px;
}

.services-page .services-quality-content .intro-large {
    margin: 0 0 20px;
    font-size: 1.4rem;
    line-height: 1.65;
    font-weight: 600;
}

.services-page .services-quality-content > p:not(.intro-large) {
    color: #666;
    line-height: 1.85;
}

.services-page .quality-points {
    margin-top: 35px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.services-page .quality-points > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1px solid #e1e1dc;
}

.services-page .quality-points i {
    color: #1E5A3A;
}

.services-page .quality-points span {
    font-size: .86rem;
    line-height: 1.5;
}


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

.services-page .services-final-cta {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #020403,
            #0d2418
        );
    color: #fff;
    padding: 120px 0;
}

.services-page .services-cta-pattern {
    position: absolute;
    width: 650px;
    height: 650px;
    right: -280px;
    top: -250px;
    border: 1px solid rgba(255,215,0,.2);
    border-radius: 50%;
}

.services-page .services-cta-pattern::after {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px solid rgba(255,215,0,.12);
    border-radius: 50%;
}

.services-page .services-cta-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.services-page .services-cta-content h2 {
    margin: 25px 0;
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: .9;
    letter-spacing: -.06em;
}

.services-page .services-cta-content h2 span {
    color: #FFD700;
}

.services-page .services-cta-content > p {
    max-width: 650px;
    color: rgba(255,255,255,.67);
    line-height: 1.8;
}

.services-page .services-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 35px;
}


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

@media (max-width: 1100px) {

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

    .services-page .services-hero-side {
        display: none;
    }

    .services-page .services-intro-grid,
    .services-page .services-capabilities-grid,
    .services-page .services-quality-grid {
        gap: 55px;
    }

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

}


@media (max-width: 800px) {

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

    .services-page .services-hero-container {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .services-page .services-hero h1 {
        font-size: clamp(3rem, 13vw, 5.5rem);
    }

    .services-page .services-hero-bottom-inner {
        overflow-x: auto;
        justify-content: flex-start;
        white-space: nowrap;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .services-page .services-intro-grid,
    .services-page .services-capabilities-grid,
    .services-page .services-quality-grid {
        grid-template-columns: 1fr;
    }

    .services-page .services-section-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

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

    .services-page .service-card-wide {
        grid-column: auto;
    }

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

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

}


@media (max-width: 560px) {

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

    .services-page .services-hero-actions,
    .services-page .services-cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .services-page .services-hero-actions .btn,
    .services-page .services-cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .services-page .service-card {
        min-height: auto;
        padding: 30px 25px;
    }

    .services-page .service-card-icon {
        margin-bottom: 35px;
    }

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

    .services-page .capability-stat,
    .services-page .capability-stat:nth-child(2n),
    .services-page .capability-stat:nth-last-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid #ddd;
    }

    .services-page .capability-stat:last-child {
        border-bottom: 0;
    }

    .services-page .services-operations {
        min-height: 800px;
    }

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

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

    .services-page .coverage-card-image {
        height: 270px;
    }

}
/* =========================================================
   FUEL SECURITY — SERVICES EXTENSION
   Premium Industrial Security Design
========================================================= */


/* =========================================================
   04 — CAPABILITIES
========================================================= */

.services-capabilities {
    position: relative;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 215, 0, 0.055), transparent 30%),
        #f5f6f7;
    overflow: hidden;
}

.services-capabilities::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    background:
        linear-gradient(
            135deg,
            transparent 0%,
            rgba(30, 90, 58, 0.035) 100%
        );
    pointer-events: none;
}

.services-capabilities-header {
    max-width: 900px;
    margin-bottom: 70px;
    position: relative;
    z-index: 1;
}

.services-capabilities-header h2 {
    margin: 20px 0 0;
    font-size: clamp(2.6rem, 5vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 800;
    max-width: 850px;
}

.services-capabilities-header h2 span {
    display: block;
    color: #1e5a3a;
}


/* MAIN GRID */

.services-capabilities-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 90px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}


/* LEFT CONTENT */

.services-capabilities-content {
    max-width: 760px;
}

.services-capabilities-content .content-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: #1e5a3a;
}

.services-capabilities-content .content-kicker::before {
    content: "";
    width: 35px;
    height: 2px;
    background: #ffd700;
}

.services-capabilities-content p {
    color: #5f646a;
    font-size: 1rem;
    line-height: 1.9;
    max-width: 720px;
}

.services-capabilities-content .intro-large {
    color: #151719;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.55;
    font-weight: 600;
    margin-bottom: 28px;
}


/* RIGHT STATS */

.services-capabilities-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: #07100d;
    border: 1px solid rgba(255, 215, 0, 0.22);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.16);
}

.services-capabilities-stats::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    top: -100px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 50%;
}

.services-capabilities-stats::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(30, 90, 58, 0.14),
            transparent 50%
        );
    pointer-events: none;
}

.capability-stat {
    min-height: 220px;
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    transition: 0.35s ease;
}

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

.capability-stat:nth-child(n+3) {
    border-bottom: none;
}

.capability-stat:hover {
    background: rgba(255, 215, 0, 0.045);
}

.capability-stat strong {
    display: block;
    color: #ffd700;
    font-size: clamp(2.8rem, 4vw, 4.4rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.06em;
    margin-bottom: 16px;
}

.capability-stat span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.68rem;
    line-height: 1.6;
    letter-spacing: 0.14em;
    font-weight: 700;
}


/* =========================================================
   05 — RESPONSE OPERATIONS
========================================================= */

.services-feature {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #050807;
}

.services-feature-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.services-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.8) contrast(1.08);
}

.services-feature-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(3, 8, 6, 0.97) 0%,
            rgba(3, 8, 6, 0.88) 42%,
            rgba(3, 8, 6, 0.5) 72%,
            rgba(3, 8, 6, 0.65) 100%
        );
}

.services-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(255, 215, 0, 0.025),
            transparent 30%
        );
}

.services-feature .container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.services-feature-content {
    max-width: 760px;
    padding: 90px 0;
}

.services-feature-content h2 {
    color: #fff;
    font-size: clamp(3rem, 6vw, 6.5rem);
    line-height: 0.92;
    letter-spacing: -0.055em;
    font-weight: 800;
    margin: 22px 0 30px;
}

.services-feature-content h2 span {
    display: block;
    color: #ffd700;
}

.services-feature-content > p {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 35px;
}


/* FEATURE POINTS */

.services-feature-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 30px;
    margin-bottom: 40px;
}

.services-feature-points > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.6;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.services-feature-points i {
    flex-shrink: 0;
    color: #ffd700;
    margin-top: 3px;
}


/* =========================================================
   06 — INDUSTRY FOCUS
========================================================= */

.services-focus {
    position: relative;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(30, 90, 58, 0.18),
            transparent 30%
        ),
        #050807;
    overflow: hidden;
}

.services-focus::before {
    content: "FUEL";
    position: absolute;
    right: -40px;
    top: 20%;
    font-size: clamp(10rem, 22vw, 25rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.08em;
    color: rgba(255, 255, 255, 0.018);
    pointer-events: none;
}

.services-focus-header {
    max-width: 850px;
    margin-bottom: 65px;
    position: relative;
    z-index: 1;
}

.services-focus-header h2 {
    color: #fff;
    margin: 20px 0 25px;
    font-size: clamp(2.8rem, 5vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
    font-weight: 800;
}

.services-focus-header h2 span {
    color: #ffd700;
}

.services-focus-header > p {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.85;
    font-size: 1rem;
}


/* FOCUS GRID */

.services-focus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

.services-focus-item {
    min-height: 330px;
    padding: 42px 30px;
    position: relative;
    background: rgba(7, 16, 13, 0.92);
    transition:
        transform 0.35s ease,
        background 0.35s ease;
    overflow: hidden;
}

.services-focus-item::before {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    left: 0;
    bottom: 0;
    background: #ffd700;
    transition: width 0.35s ease;
}

.services-focus-item:hover {
    background: #0b1712;
    transform: translateY(-7px);
}

.services-focus-item:hover::before {
    width: 100%;
}

.services-focus-item i {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #ffd700;
    font-size: 1.25rem;
    margin-bottom: 45px;
    transition: 0.3s ease;
}

.services-focus-item:hover i {
    background: #ffd700;
    color: #07100d;
    transform: translateY(-4px);
}

.services-focus-item h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 14px;
}

.services-focus-item p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
    line-height: 1.75;
    margin: 0;
}


/* =========================================================
   07 — SERVICE STANDARD
========================================================= */

.services-standard {
    position: relative;
    background: #f7f7f5;
    overflow: hidden;
}

.services-standard::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(30, 90, 58, 0.08);
    right: -180px;
    bottom: -180px;
}

.services-standard-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 100px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.services-standard-heading h2 {
    font-size: clamp(3rem, 5vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.055em;
    font-weight: 800;
    margin: 22px 0 0;
}

.services-standard-heading h2 span {
    display: block;
    color: #1e5a3a;
}

.services-standard-content {
    max-width: 760px;
}

.services-standard-content .intro-large {
    color: #16191a;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.55;
    font-weight: 600;
    margin: 0 0 25px;
}

.services-standard-content > p:not(.intro-large) {
    color: #656a6e;
    line-height: 1.85;
    margin-bottom: 35px;
}


/* STANDARD LIST */

.standard-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #d8dadb;
}

.standard-list > div {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 70px;
    padding: 15px 20px 15px 0;
    border-bottom: 1px solid #d8dadb;
    color: #222628;
    font-size: 0.9rem;
    font-weight: 600;
}

.standard-list i {
    color: #1e5a3a;
    font-size: 0.85rem;
}


/* =========================================================
   08 — FINAL CTA
========================================================= */

.services-final-cta {
    position: relative;
    background:
        linear-gradient(
            135deg,
            #07100d 0%,
            #0c1b14 55%,
            #050807 100%
        );
    overflow: hidden;
    padding: 120px 0;
}

.services-cta-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    pointer-events: none;
    background-image:
        linear-gradient(
            45deg,
            rgba(255, 215, 0, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 45px 45px;
}

.services-final-cta::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.035);
    right: -250px;
    top: -250px;
    filter: blur(10px);
}

.services-cta-content {
    position: relative;
    z-index: 2;
    max-width: 920px;
}

.services-cta-content h2 {
    color: #fff;
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 0.88;
    letter-spacing: -0.06em;
    font-weight: 800;
    margin: 22px 0 30px;
}

.services-cta-content h2 span {
    display: block;
    color: #ffd700;
}

.services-cta-content > p {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.85;
    font-size: 1.05rem;
    margin-bottom: 38px;
}


/* CTA ACTIONS */

.services-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
}

.services-cta-actions .cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: 0.3s ease;
}

.services-cta-actions .cta-phone:hover {
    color: #ffd700;
}

.services-cta-actions .cta-phone i {
    color: #ffd700;
    font-size: 1.1rem;
}


/* =========================================================
   PREMIUM BUTTON SUPPORT
   Only affects buttons inside these sections
========================================================= */

.services-feature .btn-gold,
.services-final-cta .btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 27px;
    background: #ffd700;
    color: #07100d;
    border: 1px solid #ffd700;
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.services-feature .btn-gold:hover,
.services-final-cta .btn-gold:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.services-feature .btn-gold i,
.services-final-cta .btn-gold i {
    transition: transform 0.3s ease;
}

.services-feature .btn-gold:hover i,
.services-final-cta .btn-gold:hover i {
    transform: translateX(5px);
}


/* =========================================================
   RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .services-capabilities-grid {
        gap: 55px;
    }

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

    .services-focus-item {
        min-height: 300px;
    }

    .services-standard-grid {
        gap: 60px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 850px) {

    .services-capabilities-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .services-capabilities-header {
        margin-bottom: 50px;
    }

    .services-capabilities-stats {
        max-width: 700px;
    }


    .services-feature {
        min-height: 680px;
    }

    .services-feature-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 8, 6, 0.96),
                rgba(3, 8, 6, 0.78)
            );
    }

    .services-feature-content {
        max-width: 650px;
    }


    .services-standard-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .services-standard-heading {
        max-width: 700px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    /* CAPABILITIES */

    .services-capabilities-header {
        margin-bottom: 38px;
    }

    .services-capabilities-header h2 {
        font-size: 2.7rem;
        line-height: 0.98;
    }

    .services-capabilities-content .intro-large {
        font-size: 1.25rem;
    }

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

    .capability-stat {
        min-height: 165px;
        padding: 25px 18px;
    }

    .capability-stat strong {
        font-size: 2.5rem;
    }

    .capability-stat span {
        font-size: 0.6rem;
        letter-spacing: 0.08em;
    }


    /* RESPONSE */

    .services-feature {
        min-height: 760px;
    }

    .services-feature-content {
        padding: 75px 0;
    }

    .services-feature-content h2 {
        font-size: 3.3rem;
        line-height: 0.93;
    }

    .services-feature-content > p {
        font-size: 0.92rem;
        line-height: 1.75;
    }

    .services-feature-points {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .services-feature-points > div {
        font-size: 0.82rem;
    }

    .services-feature .btn-gold {
        width: 100%;
    }


    /* INDUSTRY FOCUS */

    .services-focus-header {
        margin-bottom: 45px;
    }

    .services-focus-header h2 {
        font-size: 2.9rem;
    }

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

    .services-focus-item {
        min-height: auto;
        padding: 35px 25px;
    }

    .services-focus-item i {
        margin-bottom: 30px;
    }


    /* STANDARD */

    .services-standard-grid {
        gap: 35px;
    }

    .services-standard-heading h2 {
        font-size: 3rem;
    }

    .services-standard-content .intro-large {
        font-size: 1.2rem;
    }

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

    .standard-list > div {
        min-height: 60px;
    }


    /* FINAL CTA */

    .services-final-cta {
        padding: 85px 0;
    }

    .services-cta-content h2 {
        font-size: 3.5rem;
    }

    .services-cta-content > p {
        font-size: 0.92rem;
    }

    .services-cta-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .services-cta-actions .btn-gold {
        width: 100%;
    }

    .services-cta-actions .cta-phone {
        justify-content: center;
    }

}


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

@media (max-width: 390px) {

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

    .capability-stat {
        min-height: 145px;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    }

    .capability-stat:last-child {
        border-bottom: none !important;
    }

    .services-feature-content h2 {
        font-size: 2.9rem;
    }

    .services-focus-header h2,
    .services-standard-heading h2 {
        font-size: 2.65rem;
    }

    .services-cta-content h2 {
        font-size: 3rem;
    }

}
/* =========================================================
   PREMIUM ADMIN PORTAL
========================================================= */

.footer-bottom-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex-wrap: wrap;
}


/* ADMIN PORTAL LINK */

.admin-portal-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 16px;

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

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

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

    border-radius: 6px;

    text-decoration: none;

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

    letter-spacing: 0.9px;
    text-transform: uppercase;

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

    overflow: hidden;
}


/* GOLD TOP LINE */

.admin-portal-link::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background: #FFD700;

    transition: width 0.35s ease;
}


/* ICON */

.admin-portal-link i {
    width: 26px;
    height: 26px;

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

    color: #FFD700;

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

    border: 1px solid rgba(255, 215, 0, 0.18);

    border-radius: 4px;

    font-size: 10px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


/* TEXT */

.admin-portal-link span {
    position: relative;
    z-index: 2;
}


/* HOVER */

.admin-portal-link:hover {
    color: #ffffff;

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

    border-color: rgba(255, 215, 0, 0.38);

    transform: translateY(-2px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22),
        0 0 20px rgba(255, 215, 0, 0.06);
}


.admin-portal-link:hover::before {
    width: 100%;
}


.admin-portal-link:hover i {
    color: #07110d;

    background: #FFD700;

    border-color: #FFD700;

    transform: rotate(-5deg);
}


/* ACTIVE / CLICK */

.admin-portal-link:active {
    transform: translateY(0);
}


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

@media (max-width: 900px) {

    .footer-bottom-right {
        justify-content: center;
    }

}


@media (max-width: 600px) {

    .footer-bottom {
        gap: 18px;
    }

    .footer-bottom-right {
        width: 100%;

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

        gap: 14px;

        text-align: center;
    }

    .admin-portal-link {
        padding: 9px 14px;

        font-size: 10px;
        letter-spacing: 0.7px;
    }

    .admin-portal-link i {
        width: 24px;
        height: 24px;
    }

}