/* ========================================
   Golden Vision Premium Industrial Styles v3.0
   Production-Ready Design System
   ======================================== */

/* CSS Variables - Enhanced Color Palette */
:root {
    /* Primary Colors */
    --gvco-navy: var(--bg-base);
    --gvco-navy-light: var(--bg-raised);
    --gvco-navy-mid: var(--bg-inset);

    /* Accent Colors */
    --gvco-blue: #1E4D8C;
    --gvco-blue-light: #2E7DD1;
    --gvco-blue-bright: #4DA3FF;
    --gvco-blue-glow: rgb(var(--c-blue-light) / 0.5);

    /* Gold Accent */
    --gvco-gold: #D4AF37;
    --gvco-gold-light: #E8C547;
    --gvco-gold-dark: #B8962E;
    --gvco-gold-glow: rgb(var(--c-accent) / 0.4);

    /* Steel/Metal */
    --gvco-steel: #4A5568;
    --gvco-steel-light: #718096;
    --gvco-silver: #C4D0DC;
    --gvco-chrome: #E8ECF0;

    /* Gradients */
    --gradient-premium: linear-gradient(135deg, #1E4D8C 0%, #2E7DD1 50%, #D4AF37 100%);
    --gradient-gold: linear-gradient(135deg, #B8962E 0%, #D4AF37 50%, #E8C547 100%);
    --gradient-card: linear-gradient(145deg, rgb(var(--c-bg-raised) / 0.9) 0%, rgb(var(--c-bg-base) / 0.95) 100%);
    --gradient-glass: linear-gradient(135deg, rgb(var(--c-ink) / 0.1) 0%, rgb(var(--c-ink) / 0.02) 100%);
}

/* ========================================
   Official Corporate Pass
   Inspired by public-sector industrial sites: calmer surfaces,
   stronger real imagery, and static partner presentation.
   ======================================== */

#navbar {
    background: rgb(var(--c-bg-base) / 0.92);
    border-bottom: 1px solid rgb(var(--c-ink) / 0.08);
}

#navbar.scrolled {
    background: rgb(var(--c-bg-base) / 0.98);
}

#navbar .h-\[80px\] {
    height: 78px;
}

.nav-link-clean {
    font-size: 0.9rem;
    color: rgb(var(--c-ink) / 0.78);
}

.nav-link-clean::after {
    height: 2px;
    border-radius: 0;
}

.nav-btn-quote,
.hero-btn-primary,
.hero-btn-secondary,
.btn-primary,
.btn-secondary {
    border-radius: 0.25rem !important;
}

@media (min-width: 1024px) {
    #home {
        min-height: 92vh;
        background: var(--bg-base);
    }

    #home .hero-desktop-layout {
        min-height: 92vh;
    }

    #home .hero-video {
        display: none !important;
    }

    #home .hero-image-container {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 92vh;
        background: var(--bg-base);
    }

    #home .hero-image-container > div:first-child {
        z-index: 0;
    }

    #home .hero-image-container .hero-image {
        z-index: 0;
        object-position: center center !important;
        filter: brightness(0.82) contrast(1.06) saturate(0.98);
    }

    #home .hero-image-container::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(90deg, rgb(var(--c-bg-base) / 0.06) 0%, rgb(var(--c-bg-base) / 0.42) 40%, rgb(var(--c-bg-base) / 0.92) 78%, rgb(var(--c-bg-base) / 0.98) 100%),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.54) 0%, rgb(var(--c-bg-base) / 0.05) 38%, rgb(var(--c-bg-base) / 0.88) 100%);
    }

    html[dir="ltr"] #home .hero-image-container::after {
        background:
            linear-gradient(270deg, rgb(var(--c-bg-base) / 0.06) 0%, rgb(var(--c-bg-base) / 0.42) 40%, rgb(var(--c-bg-base) / 0.92) 78%, rgb(var(--c-bg-base) / 0.98) 100%),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.54) 0%, rgb(var(--c-bg-base) / 0.05) 38%, rgb(var(--c-bg-base) / 0.88) 100%);
    }

    #home .hero-content-container {
        width: 100% !important;
        min-height: 92vh;
        background: transparent !important;
    }

    #home .hero-content-inner {
        width: min(640px, 48vw);
        margin-right: clamp(4rem, 7vw, 7.5rem) !important;
        margin-left: auto !important;
        padding: 0;
        text-align: right;
    }

    html[dir="ltr"] #home .hero-content-inner {
        margin-left: clamp(4rem, 7vw, 7.5rem) !important;
        margin-right: auto !important;
        text-align: left;
    }

    #home .hero-heading-premium [data-typewriter] {
        white-space: normal;
        max-width: 12ch;
    }

    #home .hero-heading-premium span {
        font-size: clamp(3.1rem, 4.8vw, 4.85rem);
        line-height: 1.08;
        font-weight: 800;
    }

    #home .hero-description {
        max-width: 560px;
        color: rgb(var(--c-ink) / 0.84) !important;
        font-size: 1.1rem !important;
    }

    #home .hero-stats {
        width: min(610px, 100%);
        padding-top: 1.35rem;
        border-top: 1px solid rgb(var(--c-ink) / 0.14);
        justify-content: flex-start;
    }
}

@media (max-width: 1023px) {
    #home .hero-video {
        display: none !important;
    }

    #home .lg\:hidden .hero-video + img {
        object-position: center center;
        filter: brightness(0.54) contrast(1.05) saturate(0.98) !important;
    }
}

.logo-marquee-container {
    display: none !important;
}

.official-client-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: rgb(var(--c-ink) / 0.08);
    border: 1px solid rgb(var(--c-ink) / 0.08);
    margin-top: 2.5rem;
}

.official-client-item {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.35rem;
    background: rgb(var(--c-ink) / 0.965);
}

.official-client-item img {
    max-width: 150px;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.trust-indicators {
    border-radius: 0 !important;
    background: rgb(var(--c-ink) / 0.035);
    border-color: rgb(var(--c-ink) / 0.09);
}

.facility-gallery-secondary {
    display: none !important;
}

#gallery .mt-16.grid {
    margin-top: 2rem !important;
}

#gallery .mt-16.grid > div {
    border-radius: 0.25rem !important;
    background: rgb(var(--c-ink) / 0.035) !important;
    border-color: rgb(var(--c-ink) / 0.09) !important;
}

#clients,
#gallery,
#catalog,
#contact {
    background: var(--bg-base) !important;
}

.section-divider {
    display: none;
}

@media (max-width: 1023px) {
    .official-client-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .official-client-item {
        min-height: 96px;
        padding: 1rem;
    }

    .official-client-item img {
        max-width: 124px;
        max-height: 48px;
    }
}

@media (max-width: 639px) {
    .official-client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #home .hero-heading-premium [data-typewriter] {
        white-space: normal;
        max-width: 11ch;
    }
}

/* ========================================
   Base Reset & Global Styles
   ======================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    font-size: 16px;
}

body {
    overflow-x: hidden;
    overflow-x: clip;
    background: var(--gvco-navy);
    min-height: 100vh;
    font-family: 'Tajawal', 'Cairo', 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* LTR English Mode Override */
html[dir="ltr"] body {
    font-family: 'Inter', sans-serif;
}

/* ========================================
   Visual Consistency - Unified System
   ======================================== */

/* Unified Transition Timing */
a, button, input, textarea, select,
.service-card, .industry-card, .executive-card,
.logo-marquee-item, .cert-card, .nav-link-clean {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Consistent Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Consistent Opacity Scale */
.opacity-subtle { opacity: 0.35; }
.opacity-muted { opacity: 0.5; }
.opacity-soft { opacity: 0.7; }
.opacity-full { opacity: 1; }

/* Consistent Border Radius Scale */
.radius-sm { border-radius: 0.5rem; }
.radius-md { border-radius: 0.75rem; }
.radius-lg { border-radius: 1rem; }
.radius-xl { border-radius: 1.25rem; }

/* Consistent Shadow Scale */
.shadow-subtle { box-shadow: 0 2px 8px rgb(var(--c-shadow) / 0.1); }
.shadow-soft { box-shadow: 0 4px 16px rgb(var(--c-shadow) / 0.15); }
.shadow-medium { box-shadow: 0 8px 24px rgb(var(--c-shadow) / 0.2); }
.shadow-strong { box-shadow: 0 12px 32px rgb(var(--c-shadow) / 0.3); }

/* Image Consistency */
img {
    max-width: 100%;
    height: auto;
}

/* Link Reset */
a {
    color: inherit;
    text-decoration: none;
}

/* ========================================
   RTL Support - Premium Arabic Typography
   ======================================== */

html[dir="rtl"],
html[dir="rtl"] body {
    font-family: 'Tajawal', 'Cairo', 'Inter', sans-serif;
    letter-spacing: 0;
    word-spacing: 0.05em;
}

/* Arabic Headings - Optimized for readability */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    letter-spacing: 0;
    line-height: 1.6;
    font-weight: 700;
    font-feature-settings: 'kern' 1;
}

html[dir="rtl"] h1 {
    font-size: 2.5rem;
    line-height: 1.4;
    font-weight: 700;
}

html[dir="rtl"] h2 {
    font-size: 2rem;
    line-height: 1.5;
}

html[dir="rtl"] h3 {
    font-size: 1.5rem;
    line-height: 1.5;
}

html[dir="rtl"] p {
    line-height: 2;
    font-weight: 400;
    word-spacing: 0.02em;
}

/* Arabic Section Headlines */
html[dir="rtl"] .section-headline {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.4;
}

html[dir="rtl"] .section-subheadline {
    line-height: 1.9;
    font-weight: 400;
}

/* Arabic Enterprise Labels */
html[dir="rtl"] .enterprise-label {
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Arabic Card Text */
html[dir="rtl"] .card-title {
    line-height: 1.5;
    font-weight: 600;
}

html[dir="rtl"] .card-description {
    line-height: 1.9;
}

/* Arabic Buttons */
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-secondary,
html[dir="rtl"] .btn-corporate,
html[dir="rtl"] .btn-corporate-primary,
html[dir="rtl"] .btn-corporate-outline {
    letter-spacing: 0;
    font-weight: 600;
}

/* RTL - Hero Section Layout */
html[dir="rtl"] #home .absolute.inset-0.flex,
html[dir="rtl"] .hero-split-layout {
    flex-direction: row-reverse;
}

/* CRITICAL: Do NOT flip hero image in RTL */
html[dir="rtl"] #home img,
html[dir="rtl"] .hero-image {
    transform: none !important;
}

/* RTL Hero Content Positioning */
html[dir="rtl"] #home .lg\:ml-auto,
html[dir="rtl"] .hero-content-wrapper {
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 3rem;
}

html[dir="rtl"] #home .lg\:pl-16,
html[dir="rtl"] #home .lg\:pl-12 {
    padding-left: 0;
    padding-right: 3rem;
}

/* RTL Text Alignment */
html[dir="rtl"] #home h1,
html[dir="rtl"] #home p,
html[dir="rtl"] .hero-heading,
html[dir="rtl"] .hero-description {
    text-align: right;
}

html[dir="rtl"] #home .flex.items-center,
html[dir="rtl"] .hero-metadata {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

/* RTL Hero Metadata */
html[dir="rtl"] .hero-metadata {
    flex-direction: row-reverse;
}

/* RTL Hero Stats */
html[dir="rtl"] .hero-stats {
    flex-direction: row-reverse;
}

/* RTL Hero Accent Bar */
html[dir="rtl"] .hero-accent-bar {
    margin-left: auto;
    margin-right: 0;
}

/* RTL Button alignment */
html[dir="rtl"] #home .flex.flex-col.sm\:flex-row,
html[dir="rtl"] .hero-cta {
    align-items: flex-end;
}

html[dir="rtl"] .btn-corporate-primary svg,
html[dir="rtl"] .btn-corporate-outline svg,
html[dir="rtl"] .btn-primary svg {
    transform: rotate(180deg);
    margin-left: 0;
    margin-right: 0.75rem;
}

/* RTL Credentials */
html[dir="rtl"] #home .flex.flex-wrap.gap-3,
html[dir="rtl"] .hero-credentials {
    justify-content: flex-end;
}

/* RTL - Section Content Alignment */
html[dir="rtl"] section {
    text-align: right;
}

html[dir="rtl"] section .text-center {
    text-align: center;
}

/* RTL - Grid Order Reversal */
html[dir="rtl"] .lg\:order-1 {
    order: 2;
}

html[dir="rtl"] .lg\:order-2 {
    order: 1;
}

/* RTL - Service Cards */
html[dir="rtl"] .service-card {
    text-align: right;
}

html[dir="rtl"] .service-icon {
    margin-left: auto;
    margin-right: 0;
}

/* RTL - Executive Cards */
html[dir="rtl"] .executive-card {
    text-align: center;
}

/* RTL - Footer */
html[dir="rtl"] footer {
    text-align: right;
}

html[dir="rtl"] footer .text-center {
    text-align: center;
}

/* RTL - Contact Form */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

/* RTL - Lists */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 1.5rem;
}

/* RTL - Navigation */
html[dir="rtl"] #navbar .space-x-8,
html[dir="rtl"] #navbar .space-x-4 {
    flex-direction: row-reverse;
}

/* RTL - Marquee stays same direction */
html[dir="rtl"] .logo-marquee-track {
    /* Keep marquee direction consistent */
}

/* ========================================
   Premium Enterprise Typography
   Authoritative Industrial Branding
   ======================================== */

/* Base Heading Styles - Enterprise Level */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

h2 {
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Enterprise Section Headlines */
.section-headline {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.section-subheadline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.6;
    opacity: 0.8;
}

/* Hero Headline - Maximum Impact */
.hero-headline {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-transform: none;
}

.hero-headline-accent {
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Enterprise Label Typography */
.enterprise-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gvco-gold);
}

/* Statistics Typography - Bold Numbers */
.stat-number {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Premium Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, var(--gvco-blue-bright) 0%, var(--gvco-gold) 50%, var(--gvco-blue-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Gold Gradient Text */
.text-gradient-gold {
    background: linear-gradient(135deg, var(--gvco-gold-dark) 0%, var(--gvco-gold) 50%, var(--gvco-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Body Text - Professional Readability */
.body-text {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.7;
}

.body-text-large {
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.75;
}

/* Card Typography */
.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.card-description {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.65;
    opacity: 0.75;
}

/* Navigation Typography */
.nav-text {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Button Typography */
.btn-text {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Footer Typography */
.footer-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gvco-gold);
}

.footer-text {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.6;
}

/* ========================================
   Premium Buttons
   ======================================== */

.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--gvco-blue) 0%, var(--gvco-blue-light) 100%);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border-radius: 0.75rem;
    border: 1px solid rgb(var(--c-ink) / 0.1);
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgb(var(--c-blue) / 0.4);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgb(var(--c-ink) / 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgb(var(--c-blue) / 0.6);
}

.btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: rgb(var(--c-ink) / 0.03);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border-radius: 0.75rem;
    border: 1px solid rgb(var(--c-ink) / 0.15);
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    border-color: rgb(var(--c-accent) / 0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgb(var(--c-shadow) / 0.3);
}

/* ========================================
   Premium Corporate Navigation
   ======================================== */

#navbar {
    background: transparent;
    transition: all 0.4s ease;
}

#navbar.scrolled {
    background: rgb(var(--c-bg-base) / 0.95);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgb(var(--c-ink) / 0.04);
    box-shadow: 0 4px 30px rgb(var(--c-shadow) / 0.2);
}

/* Navbar - RTL First */
.nav-link-clean {
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

html[dir="ltr"] .nav-link-clean {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.nav-btn-quote {
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
}

html[dir="ltr"] .nav-btn-quote {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.nav-link {
    position: relative;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 0;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 1px;
    background: var(--gvco-gold);
    transition: width 0.3s ease;
    margin: 0 auto;
}

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

/* ========================================
   Clean Corporate Navigation v2.0
   ======================================== */

/* Navbar Quote Button */
.nav-btn-quote {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.5rem;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgb(var(--c-ink) / 0.35);
    transition: all 0.25s ease;
}

.nav-btn-quote:hover {
    background: white;
    color: var(--gvco-navy);
    border-color: var(--text-primary);
}

.nav-link-clean {
    position: relative;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(var(--c-ink) / 0.7);
    padding: 0.75rem 0;
    text-decoration: none;
    transition: color 0.25s ease;
}

.nav-link-clean:hover {
    color: var(--text-primary);
}

.nav-link-clean::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gvco-gold);
    opacity: 1;
    transition: width 0.25s ease;
}

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

/* Corporate Button Styles - Premium */
.btn-corporate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgb(var(--c-ink) / 0.15);
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-corporate:hover {
    background: white;
    color: var(--gvco-navy);
    border-color: var(--text-primary);
}

.btn-corporate-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: var(--gvco-blue);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-corporate-primary:hover {
    background: var(--gvco-blue-light);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgb(var(--c-blue) / 0.25);
}

.btn-corporate-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: transparent;
    color: rgb(var(--c-ink) / 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgb(var(--c-ink) / 0.2);
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-corporate-outline:hover {
    color: var(--text-primary);
    border-color: rgb(var(--c-ink) / 0.4);
    background: rgb(var(--c-ink) / 0.03);
}

/* Credential Tags - Premium Minimal */
.credential-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgb(var(--c-ink) / 0.03);
    border: 1px solid rgb(var(--c-ink) / 0.1);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--c-ink) / 0.5);
}

/* ========================================
   Hero Section - Premium Corporate
   ======================================== */

/* Hide all old HUD/cyber elements */
.hero-rings-container,
.hero-ring,
.hero-glow-core,
.hero-hud-overlay,
.hud-bracket,
.hud-scan-line,
.hud-data-point,
.hero-particles,
.particle,
.hero-accent-lines,
.accent-line,
.hero-badge {
    display: none !important;
}

/* ========================================
   Hero Section - Premium Cinematic Layout
   ======================================== */

/* Hero Image - Never Flip */
.hero-image {
    transform: none !important;
}

/* Desktop Layout - RTL First (Arabic Default) */
.hero-desktop-layout {
    flex-direction: row-reverse;
}

/* ========================================
   LTR English Hero - Independent Design
   Image LEFT, Content RIGHT (Natural LTR Flow)
   ======================================== */
html[dir="ltr"] .hero-desktop-layout {
    flex-direction: row;
}

/* LTR Image Container - Left Side, Larger */
html[dir="ltr"] .hero-image-container {
    width: 50%;
}

/* LTR Image - Better Visibility */
html[dir="ltr"] .hero-image-container .hero-image {
    filter: brightness(0.75) contrast(1.1) saturate(0.95);
}

/* LTR Content Container - Right Side */
html[dir="ltr"] .hero-content-container {
    width: 50%;
}

/* LTR Overlay Gradients - Flow from Image to Content (Left to Right) */
html[dir="ltr"] .hero-image-container > div:nth-child(2) {
    background: rgb(var(--c-bg-base) / 0.3);
}

html[dir="ltr"] .hero-image-container > div:nth-child(3) {
    background: linear-gradient(to right, transparent 0%, rgb(var(--c-bg-base) / 0.4) 60%, rgb(var(--c-bg-base) / 0.95) 100%);
}

html[dir="ltr"] .hero-image-container > div:nth-child(4) {
    background: linear-gradient(to bottom, rgb(var(--c-bg-base) / 0.3) 0%, transparent 30%, transparent 70%, rgb(var(--c-bg-base) / 0.5) 100%);
}

/* Image Container - Reduced Width for Balance */
.hero-image-container {
    position: relative;
    overflow: hidden;
}

.hero-image-container .hero-image {
    filter: brightness(0.7) contrast(1.1) saturate(0.95);
    transition: transform 8s ease-out, filter 0.5s ease;
}

.hero-image-container:hover .hero-image {
    transform: scale(1.02);
    filter: brightness(0.75) contrast(1.1) saturate(0.95);
}

/* Stronger Cinematic Overlays */
.hero-image-overlay-dark {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgb(var(--c-bg-base) / 0.3) 0%,
        rgb(var(--c-bg-base) / 0.5) 50%,
        rgb(var(--c-bg-base) / 0.95) 100%
    );
    pointer-events: none;
}

.hero-image-overlay-navy {
    position: absolute;
    inset: 0;
    background: rgb(var(--c-bg-base) / 0.45);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Content Container - RTL First */
.hero-content-container {
    background: var(--gvco-navy);
    position: relative;
}

.hero-content-container::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 120px;
    background: linear-gradient(to left, var(--gvco-navy), transparent);
    pointer-events: none;
}

/* LTR Content Container - Clean Blend */
html[dir="ltr"] .hero-content-container::before {
    display: none;
}

.hero-content-inner {
    position: relative;
    text-align: right;
    padding-right: 5rem;
    padding-left: 3rem;
}

/* LTR Content Inner - Proper English Layout */
html[dir="ltr"] .hero-content-inner {
    text-align: left;
    padding-left: 5rem;
    padding-right: 3rem;
    max-width: 540px;
    margin-left: 0;
}

/* Hero Typography - RTL Arabic First */
.hero-heading-premium {
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-align: right;
}

.hero-heading-premium span {
    display: block;
    font-size: 2.75rem;
    color: var(--text-primary);
    text-shadow: 0 2px 30px rgb(var(--c-shadow) / 0.2);
}

@media (min-width: 1280px) {
    .hero-heading-premium span {
        font-size: 3.25rem;
    }
}

@media (min-width: 1536px) {
    .hero-heading-premium span {
        font-size: 3.5rem;
    }
}

/* LTR English Typography - Premium Cinematic */
html[dir="ltr"] .hero-heading-premium {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-align: left;
}

html[dir="ltr"] .hero-heading-premium span {
    font-size: 2.75rem;
    font-weight: 700;
}

@media (min-width: 1280px) {
    html[dir="ltr"] .hero-heading-premium span {
        font-size: 3.25rem;
    }
}

@media (min-width: 1536px) {
    html[dir="ltr"] .hero-heading-premium span {
        font-size: 3.5rem;
    }
}

/* Premium Metadata Subtitle */
.hero-metadata-premium {
    opacity: 0.9;
}

.hero-metadata-premium span {
    font-family: 'Tajawal', 'Cairo', sans-serif;
}

html[dir="ltr"] .hero-metadata-premium {
    margin-bottom: 1.5rem;
}

html[dir="ltr"] .hero-metadata-premium span {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Hero Buttons - Premium */
.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 1.75rem;
    background: var(--gvco-blue);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgb(var(--c-blue) / 0.2);
}

.hero-btn-primary:hover {
    background: var(--gvco-blue-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(var(--c-blue) / 0.35);
}

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 1.75rem;
    background: transparent;
    color: rgb(var(--c-ink) / 0.75);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgb(var(--c-ink) / 0.2);
    transition: all 0.3s ease;
}

.hero-btn-secondary:hover {
    color: var(--text-primary);
    border-color: rgb(var(--c-ink) / 0.4);
    background: rgb(var(--c-ink) / 0.04);
    transform: translateY(-2px);
}

/* Credential Tags - Premium */
.credential-tag-clean {
    display: inline-block;
    padding: 0.4rem 0.875rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--c-ink) / 0.55);
    border: 1px solid rgb(var(--c-ink) / 0.12);
    background: rgb(var(--c-ink) / 0.02);
    transition: all 0.3s ease;
}

.credential-tag-clean:hover {
    color: rgb(var(--c-ink) / 0.75);
    border-color: rgb(var(--c-accent) / 0.35);
    background: rgb(var(--c-accent) / 0.04);
}

/* Stat Blocks - Premium with Glow */
.stat-block {
    text-align: left;
    position: relative;
}

.stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow: 0 0 30px rgb(var(--c-accent) / 0.15);
}

.stat-number .gold-plus {
    color: var(--gvco-gold);
    text-shadow: 0 0 25px rgb(var(--c-accent) / 0.4);
}

.stat-label {
    font-size: 0.65rem;
    color: rgb(var(--c-ink) / 0.5);
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

/* Stats Divider */
.stats-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgb(var(--c-ink) / 0.12),
        transparent
    );
}

/* ========================================
   RTL-First Layout (Arabic Default)
   ======================================== */

/* Hero Metadata - RTL Default */
.hero-metadata {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Hero Metadata Premium - RTL Default */
.hero-metadata-premium {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Hero Accent Bar - RTL Default */
.hero-accent-bar {
    margin-left: auto;
    margin-right: 0;
}

/* Hero Description - RTL Default */
.hero-description {
    text-align: right;
    line-height: 1.95;
    margin-left: auto;
    margin-right: 0;
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-size: 1rem;
    color: rgb(var(--c-ink) / 0.55);
}

/* Hero Credentials - RTL Default */
.hero-credentials {
    justify-content: flex-start;
}

/* Credential Tags - RTL Default */
.credential-tag-clean {
    font-family: 'Tajawal', 'Cairo', sans-serif;
}

/* Hero CTA - RTL Default */
.hero-cta {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 1.25rem;
}

/* ========================================
   LTR English Mode - Independent Design
   Proper left-to-right visual hierarchy
   ======================================== */

html[dir="ltr"] .hero-metadata {
    flex-direction: row;
    justify-content: flex-start;
}

html[dir="ltr"] .hero-metadata-premium {
    flex-direction: row;
    justify-content: flex-start;
}

html[dir="ltr"] .hero-accent-bar {
    margin-left: 0;
    margin-right: auto;
    width: 3.5rem;
    height: 3px;
    margin-bottom: 1.5rem;
}

html[dir="ltr"] .hero-description {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.85;
    max-width: 460px;
}

html[dir="ltr"] .hero-credentials {
    justify-content: flex-start;
    gap: 0.625rem;
    margin-bottom: 2rem;
}

html[dir="ltr"] .credential-tag-clean {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.08em;
    font-size: 0.6rem;
    padding: 0.375rem 0.75rem;
}

html[dir="ltr"] .hero-cta {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.25rem;
    margin-bottom: 3rem;
}

/* Hero Buttons - RTL Default */
.hero-btn-primary,
.hero-btn-secondary {
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

html[dir="ltr"] .hero-btn-primary,
html[dir="ltr"] .hero-btn-secondary {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding: 0.875rem 1.5rem;
}

/* Hero Button Arrow - RTL Default */
.hero-btn-primary svg {
    transform: rotate(180deg);
    margin-left: 0;
    margin-right: 0.625rem;
}

html[dir="ltr"] .hero-btn-primary svg {
    transform: none;
    margin-right: 0;
    margin-left: 0.625rem;
}

/* Hero Stats - RTL Default */
.hero-stats {
    flex-direction: row-reverse;
}

html[dir="ltr"] .hero-stats {
    flex-direction: row;
    gap: 0;
}

html[dir="ltr"] .stat-number {
    font-size: 2rem;
    font-weight: 700;
}

/* Stat Block - RTL Default */
.stat-block {
    text-align: right;
}

html[dir="ltr"] .stat-block {
    text-align: left;
}

/* Stat Label - RTL Default */
.stat-label {
    font-family: 'Tajawal', 'Cairo', sans-serif;
    letter-spacing: 0.05em;
}

html[dir="ltr"] .stat-label {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.12em;
    font-size: 0.6rem;
}

/* LTR Stats Spacing */
html[dir="ltr"] .hero-stats .stat-block {
    padding: 0 2rem;
}

html[dir="ltr"] .hero-stats .stat-block:first-child {
    padding-left: 0;
}

html[dir="ltr"] .hero-stats .stat-block:last-child {
    padding-right: 0;
}

/* Mobile Layout - Centered for Both RTL & LTR */
@media (max-width: 1024px) {
    .hero-content-inner,
    .hero-heading,
    .hero-heading-premium,
    .hero-description {
        text-align: center;
    }

    .hero-heading span,
    .hero-heading-premium span {
        font-size: 2.25rem;
    }

    .hero-metadata,
    .hero-metadata-premium {
        flex-direction: row;
        justify-content: center;
    }

    .hero-accent-bar {
        margin: 0 auto;
    }

    .hero-description {
        margin: 0 auto;
        font-size: 0.95rem;
    }

    .hero-credentials {
        justify-content: center;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .hero-stats {
        flex-direction: row;
        justify-content: center;
    }

    .stat-block {
        text-align: center;
    }
}

/* Hero Background - Legacy fallback (not used in new cinematic layout) */
.hero-bg-fallback {
    background:
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / 0.85) 0%,
            rgb(var(--c-bg-base) / 0.7) 30%,
            rgb(var(--c-bg-base) / 0.75) 70%,
            rgb(var(--c-bg-base) / 0.95) 100%),
        radial-gradient(ellipse 120% 60% at 50% 0%, rgb(var(--c-blue) / 0.4) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 85%, rgb(var(--c-accent) / 0.15) 0%, transparent 50%),
        url('https://images.unsplash.com/photo-1565043666747-69f6646db940?w=1920&q=85&auto=format&fit=crop') center center / cover no-repeat;
    filter: saturate(1.1) contrast(1.05);
}

/* Remove old gear elements - replaced by new cinematic rings */
.gear-element {
    display: none;
}

/* Industrial Grid Pattern - Subtle */
.grid-pattern {
    display: none; /* Removed for clean corporate look */
}

/* Industrial Gear Elements */
.gear-element {
    position: absolute;
    border: 1px solid rgb(var(--c-blue-light) / 0.15);
    border-radius: 50%;
    background: radial-gradient(circle at center, rgb(var(--c-blue-light) / 0.05) 0%, transparent 70%);
}

.gear-element::before {
    content: '';
    position: absolute;
    inset: 20%;
    border: 1px solid rgb(var(--c-accent) / 0.1);
    border-radius: 50%;
}

.gear-element::after {
    content: '';
    position: absolute;
    inset: 40%;
    border: 1px solid rgb(var(--c-blue-light) / 0.2);
    border-radius: 50%;
}

.gear-1 {
    width: 500px;
    height: 500px;
    top: -10%;
    right: -15%;
    animation: rotateGear 120s linear infinite;
}

.gear-2 {
    width: 400px;
    height: 400px;
    bottom: -5%;
    left: -10%;
    animation: rotateGear 90s linear infinite reverse;
}

.gear-3 {
    width: 300px;
    height: 300px;
    top: 50%;
    right: 10%;
    animation: rotateGear 60s linear infinite;
}

@keyframes rotateGear {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Hero Badge */
.hero-badge {
    position: relative;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: rgb(var(--c-ink) / 0.03);
    border: 1px solid rgb(var(--c-ink) / 0.08);
    border-radius: 100px;
    backdrop-filter: blur(10px);
}

/* ========================================
   Cinematic Hero Section - Asymmetrical Layout
   Premium Industrial Visual Design
   ======================================== */

/* Left Side Visual Background - Industrial Manufacturing */
.hero-visual-bg {
    position: absolute;
    inset: 0;
    /* Welding sparks / Industrial manufacturing - NOT automotive */
    background:
        url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=1400&q=85&auto=format&fit=crop') center center / cover no-repeat;
    filter: saturate(0.7) contrast(1.05) brightness(0.6);
}

/* Rotating Industrial Rings Container - More Subtle */
.hero-rings-container {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    pointer-events: none;
    opacity: 0.7;
}

/* Individual Rotating Rings */
.hero-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid transparent;
}

.hero-ring-1 {
    width: 450px;
    height: 450px;
    border-color: rgb(var(--c-blue-light) / 0.3);
    animation: ringRotate 25s linear infinite;
}

.hero-ring-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: var(--gvco-blue-light);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--gvco-blue-light), 0 0 40px var(--gvco-blue-light);
}

.hero-ring-2 {
    width: 350px;
    height: 350px;
    border-color: rgb(var(--c-accent) / 0.25);
    border-style: dashed;
    animation: ringRotate 18s linear infinite reverse;
}

.hero-ring-2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--gvco-gold);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--gvco-gold), 0 0 30px var(--gvco-gold);
}

.hero-ring-3 {
    width: 250px;
    height: 250px;
    border-color: rgb(var(--c-ink) / 0.1);
    animation: ringRotate 12s linear infinite;
}

.hero-ring-3::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px white;
}

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

/* Glowing Core Element - Industrial, Subtle */
.hero-glow-core {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle,
        rgb(var(--c-accent) / 0.3) 0%,
        rgb(var(--c-accent) / 0.15) 30%,
        rgb(var(--c-blue-light) / 0.1) 60%,
        transparent 70%);
    border-radius: 50%;
    animation: corePulse 4s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.8;
}

.hero-glow-core::before {
    content: '';
    position: absolute;
    inset: 30%;
    background: radial-gradient(circle,
        rgb(var(--c-ink) / 0.3) 0%,
        rgb(var(--c-blue-light) / 0.5) 50%,
        transparent 70%);
    border-radius: 50%;
    animation: coreInnerPulse 2s ease-in-out infinite;
}

@keyframes corePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

@keyframes coreInnerPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* HUD/Blueprint Overlay */
.hero-hud-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Corner Brackets */
.hud-bracket {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgb(var(--c-blue-light) / 0.4);
}

.hud-bracket-tl {
    top: 15%;
    left: 10%;
    border-right: none;
    border-bottom: none;
}

.hud-bracket-tr {
    top: 15%;
    right: 55%;
    border-left: none;
    border-bottom: none;
}

.hud-bracket-bl {
    bottom: 15%;
    left: 10%;
    border-right: none;
    border-top: none;
}

.hud-bracket-br {
    bottom: 15%;
    right: 55%;
    border-left: none;
    border-top: none;
}

/* Scanning Line */
.hud-scan-line {
    position: absolute;
    top: 0;
    left: 5%;
    width: 45%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(var(--c-blue-light) / 0.8) 50%,
        transparent 100%);
    animation: scanMove 4s ease-in-out infinite;
}

@keyframes scanMove {
    0%, 100% { top: 20%; opacity: 0; }
    10% { opacity: 1; }
    50% { top: 80%; opacity: 1; }
    90% { opacity: 1; }
    100% { top: 20%; opacity: 0; }
}

/* HUD Data Points */
.hud-data-point {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-family: 'Courier New', monospace;
    color: rgb(var(--c-blue-light) / 0.8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hud-dot {
    width: 6px;
    height: 6px;
    background: var(--gvco-blue-light);
    border-radius: 50%;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.hud-label {
    padding: 0.25rem 0.5rem;
    background: rgb(var(--c-bg-base) / 0.6);
    border: 1px solid rgb(var(--c-blue-light) / 0.3);
    border-radius: 2px;
}

.hud-data-1 {
    top: 25%;
    left: 15%;
    animation: fadeInOut 3s ease-in-out infinite;
}

.hud-data-2 {
    top: 50%;
    left: 8%;
    animation: fadeInOut 3s ease-in-out infinite 1s;
}

.hud-data-3 {
    bottom: 25%;
    left: 20%;
    animation: fadeInOut 3s ease-in-out infinite 2s;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Floating Particles */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgb(var(--c-accent) / 0.6);
    border-radius: 50%;
    animation: particleFloat 8s ease-in-out infinite;
}

.particle::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: inherit;
    border-radius: 50%;
    filter: blur(4px);
    opacity: 0.5;
}

.particle-1 { top: 20%; left: 10%; animation-delay: 0s; animation-duration: 7s; }
.particle-2 { top: 40%; left: 25%; animation-delay: 1s; animation-duration: 9s; background: rgb(var(--c-blue-light) / 0.6); }
.particle-3 { top: 60%; left: 15%; animation-delay: 2s; animation-duration: 6s; }
.particle-4 { top: 30%; left: 35%; animation-delay: 0.5s; animation-duration: 8s; background: rgb(var(--c-blue-light) / 0.6); }
.particle-5 { top: 70%; left: 30%; animation-delay: 1.5s; animation-duration: 10s; }
.particle-6 { top: 50%; left: 5%; animation-delay: 3s; animation-duration: 7s; background: rgb(var(--c-ink) / 0.4); }
.particle-7 { top: 80%; left: 20%; animation-delay: 2.5s; animation-duration: 9s; background: rgb(var(--c-blue-light) / 0.6); }
.particle-8 { top: 15%; left: 40%; animation-delay: 4s; animation-duration: 8s; }

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% { opacity: 1; }
    50% {
        transform: translateY(-30px) translateX(15px);
        opacity: 0.8;
    }
    90% { opacity: 1; }
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
}

/* Metallic Accent Lines */
.hero-accent-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.accent-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(var(--c-accent) / 0.5) 20%,
        rgb(var(--c-accent) / 0.8) 50%,
        rgb(var(--c-accent) / 0.5) 80%,
        transparent 100%);
}

.accent-line-1 {
    top: 30%;
    left: 0;
    width: 40%;
    animation: lineGlow 3s ease-in-out infinite;
}

.accent-line-2 {
    top: 50%;
    left: 5%;
    width: 35%;
    animation: lineGlow 3s ease-in-out infinite 1s;
}

.accent-line-3 {
    top: 70%;
    left: 0;
    width: 45%;
    animation: lineGlow 3s ease-in-out infinite 2s;
}

@keyframes lineGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Enterprise Credential Badges */
.enterprise-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgb(var(--c-accent) / 0.1);
    border: 1px solid rgb(var(--c-accent) / 0.3);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gvco-gold);
}

/* Hero Stats - Compact Row Style */
.hero-stat-item {
    text-align: left;
}

.hero-stat-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgb(var(--c-accent) / 0.4) 50%,
        transparent 100%);
}

/* Responsive Adjustments for Cinematic Hero */
@media (max-width: 1024px) {
    .hero-rings-container {
        left: 50%;
        width: 400px;
        height: 400px;
    }

    .hero-ring-1 { width: 350px; height: 350px; }
    .hero-ring-2 { width: 260px; height: 260px; }
    .hero-ring-3 { width: 180px; height: 180px; }

    .hero-glow-core {
        left: 50%;
        width: 100px;
        height: 100px;
    }

    .hud-bracket-tr,
    .hud-bracket-br {
        display: none;
    }

    .hud-data-point {
        font-size: 0.6rem;
    }
}

@media (max-width: 768px) {
    .hero-rings-container,
    .hero-glow-core,
    .hero-hud-overlay,
    .hero-accent-lines {
        opacity: 0.5;
    }

    .hero-ring-1 { width: 280px; height: 280px; }
    .hero-ring-2 { width: 200px; height: 200px; }
    .hero-ring-3 { width: 140px; height: 140px; }

    .hero-stat-divider {
        display: none;
    }

    .hero-stat-item {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .hero-rings-container {
        width: 300px;
        height: 300px;
        top: 30%;
    }

    .hero-ring-1 { width: 220px; height: 220px; }
    .hero-ring-2 { width: 160px; height: 160px; }
    .hero-ring-3 { width: 100px; height: 100px; }

    .hero-glow-core {
        width: 60px;
        height: 60px;
        top: 30%;
    }

    .particle {
        width: 3px;
        height: 3px;
    }
}

/* ========================================
   Premium Stat Cards
   ======================================== */

.stat-card {
    position: relative;
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgb(var(--c-ink) / 0.02);
    border: 1px solid rgb(var(--c-ink) / 0.06);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gvco-gold), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.stat-card:hover {
    background: rgb(var(--c-ink) / 0.04);
    border-color: rgb(var(--c-accent) / 0.3);
    transform: translateY(-8px);
}

.stat-card:hover::before {
    opacity: 1;
}

/* ========================================
   Premium Service Cards
   ======================================== */

.service-card {
    position: relative;
    padding: 2.5rem 2rem;
    background: var(--gradient-card);
    border: 1px solid rgb(var(--c-ink) / 0.05);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-premium);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

html[dir="rtl"] .service-card::before {
    transform-origin: right;
}

.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgb(var(--c-blue-light) / 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.service-card:hover {
    border-color: rgb(var(--c-blue-light) / 0.3);
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgb(var(--c-shadow) / 0.4);
}

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

.service-card:hover::after {
    opacity: 1;
}

.service-icon {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgb(var(--c-blue-light) / 0.15) 0%, rgb(var(--c-blue-light) / 0.05) 100%);
    border: 1px solid rgb(var(--c-blue-light) / 0.2);
    border-radius: 1rem;
    margin-bottom: 1.75rem;
    color: var(--gvco-blue-light);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-icon {
    background: linear-gradient(135deg, var(--gvco-blue) 0%, var(--gvco-blue-light) 100%);
    color: var(--text-primary);
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgb(var(--c-blue-light) / 0.4);
}

/* Service Card Background Images - Real Industrial Photography */

/* CNC Machining - Industrial lathe/milling */
.service-card[data-service="cnc"] {
    background:
        linear-gradient(135deg,
            rgb(var(--c-bg-raised) / 0.96) 0%,
            rgb(var(--c-bg-raised) / 0.9) 50%,
            rgb(var(--c-bg-base) / 0.85) 100%),
        url('https://images.unsplash.com/photo-1567789884554-0b844b597180?w=800&q=80&auto=format&fit=crop') right center / cover no-repeat;
}

/* Laser Cutting - Metal cutting sparks */
.service-card[data-service="laser"] {
    background:
        linear-gradient(135deg,
            rgb(var(--c-bg-raised) / 0.96) 0%,
            rgb(var(--c-bg-raised) / 0.9) 50%,
            rgb(var(--c-bg-base) / 0.85) 100%),
        url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?w=800&q=80&auto=format&fit=crop') right center / cover no-repeat;
}

/* Welding - Industrial welding sparks */
.service-card[data-service="welding"] {
    background:
        linear-gradient(135deg,
            rgb(var(--c-bg-raised) / 0.96) 0%,
            rgb(var(--c-bg-raised) / 0.9) 50%,
            rgb(var(--c-bg-base) / 0.85) 100%),
        url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=800&q=80&auto=format&fit=crop') right center / cover no-repeat;
}

/* Sheet Metal - Steel fabrication */
.service-card[data-service="sheet"] {
    background:
        linear-gradient(135deg,
            rgb(var(--c-bg-raised) / 0.96) 0%,
            rgb(var(--c-bg-raised) / 0.9) 50%,
            rgb(var(--c-bg-base) / 0.85) 100%),
        url('https://images.unsplash.com/photo-1586864387967-d02ef85d93e8?w=800&q=80&auto=format&fit=crop') right center / cover no-repeat;
}

/* Turnkey Projects - Industrial facility/Oil & Gas */
.service-card[data-service="project"] {
    background:
        linear-gradient(135deg,
            rgb(var(--c-bg-raised) / 0.96) 0%,
            rgb(var(--c-bg-raised) / 0.9) 50%,
            rgb(var(--c-bg-base) / 0.85) 100%),
        url('https://images.unsplash.com/photo-1586953208270-767fc7b8a150?w=800&q=80&auto=format&fit=crop') right center / cover no-repeat;
}

/* Industrial Maintenance - Heavy machinery */
.service-card[data-service="maintenance"] {
    background:
        linear-gradient(135deg,
            rgb(var(--c-bg-raised) / 0.96) 0%,
            rgb(var(--c-bg-raised) / 0.9) 50%,
            rgb(var(--c-bg-base) / 0.85) 100%),
        url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&q=80&auto=format&fit=crop') right center / cover no-repeat;
}

/* RTL Support */
html[dir="rtl"] .service-card[data-service] {
    background-position: left center;
}

/* Service card hover enhancement with visible photo */
.service-card[data-service]:hover {
    background-blend-mode: normal;
}

.service-card[data-service]::after {
    background: radial-gradient(ellipse at 80% 50%, rgb(var(--c-blue-light) / 0.2) 0%, transparent 70%);
}

html[dir="rtl"] .service-card[data-service]::after {
    background: radial-gradient(ellipse at 20% 50%, rgb(var(--c-blue-light) / 0.2) 0%, transparent 70%);
}

/* Service Tags */
.service-tag {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background: rgb(var(--c-ink) / 0.03);
    border: 1px solid rgb(var(--c-ink) / 0.08);
    border-radius: 100px;
    font-size: 0.875rem;
    color: rgb(var(--c-ink) / 0.6);
    transition: all 0.3s ease;
}

.service-tag:hover {
    border-color: rgb(var(--c-blue-light) / 0.3);
    color: var(--text-primary);
}

/* ========================================
   Industry Cards
   ======================================== */

.industry-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: rgb(var(--c-bg-raised) / 0.6);
    border: 1px solid rgb(var(--c-ink) / 0.05);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

.industry-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgb(var(--c-accent) / 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.industry-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background: var(--gradient-gold);
    opacity: 0;
    transition: all 0.5s ease;
}

.industry-card:hover {
    background: rgb(var(--c-bg-raised) / 0.9);
    border-color: rgb(var(--c-accent) / 0.4);
    transform: translateY(-8px) scale(1.02);
}

.industry-card:hover::before {
    opacity: 1;
}

.industry-card:hover::after {
    opacity: 1;
    width: 80%;
}

.industry-icon {
    position: relative;
    color: var(--gvco-steel-light);
    margin-bottom: 1.25rem;
    transition: all 0.5s ease;
}

.industry-card:hover .industry-icon {
    color: var(--gvco-gold);
    transform: scale(1.15);
}

/* ========================================
   Client Logo Cards - Professional Style
   ======================================== */

.client-logo-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 1.75rem 1.5rem;
    background: rgb(var(--c-bg-raised) / 0.7);
    border: 1px solid rgb(var(--c-ink) / 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.client-logo-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--gradient-gold);
    transition: width 0.4s ease;
}

.client-logo-card:hover {
    background: rgb(var(--c-bg-raised) / 0.8);
    border-color: rgb(var(--c-accent) / 0.3);
    transform: translateY(-4px);
}

.client-logo-card:hover::after {
    width: 60%;
}

.client-logo-text {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgb(var(--c-ink) / 0.5);
    text-transform: uppercase;
    transition: all 0.4s ease;
}

.client-logo-card:hover .client-logo-text {
    color: var(--gvco-gold);
}

/* Client Logo Images - Premium Monochrome Style */
.client-logo-img {
    max-width: 90%;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.75;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Grayscale + brightness for monochrome white/silver look */
    filter: grayscale(100%) brightness(1.3) contrast(0.9);
}

.client-logo-card:hover .client-logo-img {
    opacity: 1;
    /* Restore color on hover with golden glow */
    filter: grayscale(0%) brightness(1.1) contrast(1) drop-shadow(0 0 12px rgb(var(--c-accent) / 0.4));
    transform: scale(1.05);
}

/* SVG logos specific styling */
.client-logo-img[src$=".svg"] {
    filter: grayscale(100%) brightness(2) contrast(0.8) invert(0);
}

.client-logo-card:hover .client-logo-img[src$=".svg"] {
    filter: grayscale(0%) brightness(1) contrast(1) drop-shadow(0 0 12px rgb(var(--c-accent) / 0.4));
}

/* ========================================
   Premium Animated Logo Marquee
   Infinite Scrolling Brand Wall
   ======================================== */

.logo-marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 2rem 0;
}

/* Gradient fade overlays for smooth edges */
.logo-marquee-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 10;
    pointer-events: none;
}

.logo-marquee-fade-left {
    left: 0;
    background: linear-gradient(90deg,
        var(--gvco-navy) 0%,
        rgb(var(--c-bg-base) / 0.8) 30%,
        transparent 100%);
}

.logo-marquee-fade-right {
    right: 0;
    background: linear-gradient(270deg,
        var(--gvco-navy) 0%,
        rgb(var(--c-bg-base) / 0.8) 30%,
        transparent 100%);
}

/* Marquee Row Container */
.logo-marquee-row {
    display: flex;
    width: 100%;
    overflow: hidden;
}

/* Marquee Track - Contains all logos */
.logo-marquee-track {
    display: flex;
    gap: 1.35rem;
    padding: 1rem 0;
    width: fit-content;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Keyframe Animation - Right to Left (Seamless) */
@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 1rem));
    }
}

/* Keyframe Animation - Left to Right (Seamless) */
@keyframes marqueeScrollReverse {
    from {
        transform: translateX(calc(-50% - 1rem));
    }
    to {
        transform: translateX(0);
    }
}

/* Animation Classes - Smooth Infinite Scroll */
.logo-marquee-animate {
    animation: marqueeScroll 78s linear infinite;
}

.logo-marquee-animate-reverse {
    animation: marqueeScrollReverse 84s linear infinite;
}

/* Animation continues on hover - only card styling changes */

/* Individual Logo Item - Premium Card */
.logo-marquee-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    height: 88px;
    padding: 1rem 1.45rem;
    background: linear-gradient(145deg, rgb(var(--c-bg-raised) / 0.7) 0%, rgb(var(--c-bg-base) / 0.85) 100%);
    border: 1px solid rgb(var(--c-ink) / 0.08);
    border-radius: 0.5rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

/* Subtle gradient overlay on items */
.logo-marquee-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgb(var(--c-ink) / 0.02) 0%,
        transparent 50%,
        rgb(var(--c-shadow) / 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Golden accent line at bottom */
.logo-marquee-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--gvco-gold-dark),
        var(--gvco-gold),
        var(--gvco-gold-light));
    border-radius: 3px 3px 0 0;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Effects - Premium Lift */
.logo-marquee-item:hover {
    background: linear-gradient(145deg, rgb(var(--c-bg-inset) / 0.95) 0%, rgb(var(--c-bg-base) / 0.98) 100%);
    border-color: rgb(var(--c-ink) / 0.15);
    transform: scale(1.06) translateY(-4px);
    box-shadow:
        0 15px 35px rgb(var(--c-shadow) / 0.35),
        0 0 0 1px rgb(var(--c-ink) / 0.05);
    z-index: 20;
}

.logo-marquee-item:hover::before {
    opacity: 1;
}

.logo-marquee-item:hover::after {
    width: 60%;
}

/* Logo Images - Full Color Display */
.logo-marquee-item img {
    max-width: 150px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.95;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* Full vibrant color - no filters that reduce saturation */
    filter: none;
}

/* Logo hover - enhanced visibility with subtle glow */
.logo-marquee-item:hover img {
    opacity: 1;
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px rgb(var(--c-ink) / 0.2));
}

/* SVG logos - vibrant colors on dark background */
.logo-marquee-item img[src$=".svg"] {
    filter: none;
    opacity: 1;
}

.logo-marquee-item:hover img[src$=".svg"] {
    filter: drop-shadow(0 0 15px rgb(var(--c-ink) / 0.25)) brightness(1.1);
}

/* PNG logos - slight brightness boost for visibility */
.logo-marquee-item img[src$=".png"] {
    filter: brightness(1.05);
    opacity: 0.9;
}

.logo-marquee-item:hover img[src$=".png"] {
    opacity: 1;
    filter: brightness(1.15) drop-shadow(0 0 12px rgb(var(--c-ink) / 0.2));
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .logo-marquee-fade {
        width: 80px;
    }

    .logo-marquee-track {
        gap: 1.5rem;
    }

    .logo-marquee-item {
        min-width: 150px;
        height: 85px;
        padding: 1.25rem 1.5rem;
    }

    .logo-marquee-item img {
        max-width: 120px;
        max-height: 45px;
    }

    .logo-marquee-animate {
        animation-duration: 40s;
    }

    .logo-marquee-animate-reverse {
        animation-duration: 45s;
    }
}

@media (max-width: 640px) {
    .logo-marquee-fade {
        width: 40px;
    }

    .logo-marquee-track {
        gap: 1.25rem;
    }

    .logo-marquee-item {
        min-width: 120px;
        height: 70px;
        padding: 0.875rem 1rem;
        border-radius: 0.75rem;
    }

    .logo-marquee-item img {
        max-width: 90px;
        max-height: 35px;
    }

    .logo-marquee-animate {
        animation-duration: 35s;
    }

    .logo-marquee-animate-reverse {
        animation-duration: 40s;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .logo-marquee-track {
        animation: none;
    }

    .logo-marquee-item:hover {
        transform: scale(1.02);
    }
}

/* Premium Shimmer Effect on Logo Items */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.logo-marquee-item {
    background-image: linear-gradient(
        110deg,
        rgb(var(--c-bg-raised) / 0.6) 0%,
        rgb(var(--c-bg-raised) / 0.6) 40%,
        rgb(var(--c-ink) / 0.03) 50%,
        rgb(var(--c-bg-raised) / 0.6) 60%,
        rgb(var(--c-bg-raised) / 0.6) 100%
    );
    background-size: 200% 100%;
}

.logo-marquee-item:hover {
    animation: shimmer 1.5s ease-in-out;
}

/* Floating ambient particles effect (subtle) */
.logo-marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgb(var(--c-accent) / 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgb(var(--c-blue-light) / 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 5;
}

/* Active state glow pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow:
            0 20px 40px rgb(var(--c-shadow) / 0.4),
            0 0 30px rgb(var(--c-accent) / 0.15);
    }
    50% {
        box-shadow:
            0 25px 50px rgb(var(--c-shadow) / 0.5),
            0 0 40px rgb(var(--c-accent) / 0.25);
    }
}

.logo-marquee-item:hover {
    animation: shimmer 1.5s ease-in-out, glowPulse 2s ease-in-out infinite;
}

/* Trust Indicators */
.trust-indicators {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.trust-item {
    text-align: center;
    padding: 1rem 2rem;
}

.trust-divider {
    width: 1px;
    height: 48px;
    background: rgb(var(--c-ink) / 0.1);
    display: none;
}

@media (min-width: 1024px) {
    .trust-divider {
        display: block;
    }
}

/* ========================================
   About Section Visual
   ======================================== */

/* About Section - Industrial Manufacturing Photography */
.about-visual {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgb(var(--c-ink) / 0.08);
    box-shadow:
        0 25px 50px -12px rgb(var(--c-shadow) / 0.6),
        inset 0 0 60px rgb(var(--c-accent) / 0.05);
}

/* About visual with embedded image */
.about-visual.industrial-image-card {
    background: transparent;
}

.about-visual.industrial-image-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.7) contrast(1.1) brightness(0.9);
}

.about-visual.industrial-image-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(145deg,
            rgb(var(--c-bg-base) / 0.5) 0%,
            rgb(var(--c-bg-base) / 0.4) 40%,
            rgb(var(--c-bg-base) / 0.6) 100%);
    z-index: 1;
}

.about-visual-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-icon-grid {
    position: relative;
}

.about-icon-item {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--c-blue-light) / 0.3);
    animation: rotateGear 30s linear infinite;
}

.about-stat {
    position: absolute;
    background: rgb(var(--c-bg-base) / 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgb(var(--c-ink) / 0.1);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.about-stat-1 {
    top: 2rem;
    right: 2rem;
}

.about-stat-2 {
    bottom: 2rem;
    left: 2rem;
}

html[dir="rtl"] .about-stat-1 {
    right: auto;
    left: 2rem;
}

html[dir="rtl"] .about-stat-2 {
    left: auto;
    right: 2rem;
}

/* Certification Cards */
.cert-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgb(var(--c-ink) / 0.02);
    border: 1px solid rgb(var(--c-ink) / 0.05);
    border-radius: 0.875rem;
    transition: all 0.3s ease;
}

.cert-card:hover {
    border-color: rgb(var(--c-blue-light) / 0.3);
}

.cert-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgb(var(--c-blue-light) / 0.2) 0%, rgb(var(--c-blue-light) / 0.05) 100%);
    border-radius: 0.75rem;
    flex-shrink: 0;
}

/* ========================================
   Contact Section
   ======================================== */

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

.contact-info-grid .contact-info-card:first-child {
    grid-column: 1 / -1;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgb(var(--c-blue-light) / 0.08) 0%, rgb(var(--c-ink) / 0.04) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(var(--c-ink) / 0.1);
    border-radius: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgb(var(--c-shadow) / 0.15);
}

.contact-info-card:hover {
    border-color: rgb(var(--c-blue-light) / 0.4);
    background: linear-gradient(135deg, rgb(var(--c-blue-light) / 0.12) 0%, rgb(var(--c-ink) / 0.06) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgb(var(--c-shadow) / 0.2), 0 0 20px rgb(var(--c-blue-light) / 0.1);
}

.contact-info-card h4 {
    color: var(--text-primary);
    font-size: 1.125rem;
}

.contact-info-card p,
.contact-info-card a {
    color: rgb(var(--c-ink) / 0.7);
    overflow-wrap: anywhere;
}

.contact-info-card a:hover {
    color: var(--gvco-blue-bright);
}

.contact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgb(var(--c-blue-light) / 0.3) 0%, rgb(var(--c-blue-light) / 0.1) 100%);
    border: 1px solid rgb(var(--c-blue-light) / 0.2);
    border-radius: 0.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgb(var(--c-blue-light) / 0.15);
}

.contact-form-wrapper {
    background: linear-gradient(160deg, rgb(var(--c-bg-raised) / 0.85) 0%, rgb(var(--c-bg-base) / 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgb(var(--c-ink) / 0.08);
    border-radius: 0.75rem;
    padding: 2.5rem;
    box-shadow: 0 20px 50px rgb(var(--c-shadow) / 0.3);
}

.contact-form-wrapper h3 {
    color: var(--text-primary);
}

.contact-form-head {
    position: relative;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgb(var(--c-ink) / 0.08);
}

.contact-form-head::after {
    content: '';
    position: absolute;
    bottom: -1px;
    inset-inline-start: 0;
    width: 5rem;
    height: 1px;
    background: linear-gradient(90deg, var(--gvco-blue-light), var(--gvco-gold));
}

.contact-form-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.9rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgb(var(--c-accent-hi) / 0.22);
    border-radius: 999px;
    background: rgb(var(--c-accent-hi) / 0.08);
    color: var(--gvco-gold);
    font-size: 0.78rem;
    font-weight: 700;
}

.contact-form-head h3 {
    margin-bottom: 0.6rem;
    line-height: 1.2;
}

.contact-form-head p {
    color: rgb(var(--c-ink) / 0.55);
    font-size: 0.95rem;
    line-height: 1.8;
}

.contact-form-note {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgb(var(--c-blue-light) / 0.18);
    border-radius: 0.55rem;
    background: rgb(var(--c-blue-light) / 0.08);
    color: rgb(var(--c-ink) / 0.66);
    font-size: 0.88rem;
    line-height: 1.7;
}

.contact-form-note::before {
    content: '';
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--gvco-blue-light);
    box-shadow: 0 0 0 0.25rem rgb(var(--c-blue-light) / 0.12);
}

/* ========================================
   Form Styles
   ======================================== */

.form-input {
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgb(var(--c-ink) / 0.05);
    border: 1px solid rgb(var(--c-ink) / 0.12);
    border-radius: 0.75rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input::placeholder {
    color: rgb(var(--c-ink) / 0.45);
}

.form-input:focus {
    outline: none;
    border-color: var(--gvco-blue-light);
    background: rgb(var(--c-ink) / 0.08);
    box-shadow: 0 0 0 4px rgb(var(--c-blue-light) / 0.15);
}

.contact-form-wrapper label {
    color: rgb(var(--c-ink) / 0.66);
    letter-spacing: 0;
}

select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23718096'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
    padding-right: 3rem;
}

html[dir="rtl"] select.form-input {
    background-position: left 1rem center;
    padding-right: 1.25rem;
    padding-left: 3rem;
}

html[dir="rtl"] .form-input {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .form-input::placeholder {
    text-align: right;
}

/* Preserve LTR for phone/email inputs in RTL */
html[dir="rtl"] input[type="tel"].form-input,
html[dir="rtl"] input[type="email"].form-input {
    direction: ltr;
    text-align: left;
}

/* Select dropdown option text RTL */
html[dir="rtl"] select.form-input option {
    direction: rtl;
    text-align: right;
}

/* Textarea RTL */
html[dir="rtl"] textarea.form-input {
    text-align: right;
    direction: rtl;
}

/* ========================================
   Section Backgrounds & Dividers
   ======================================== */

/* Section Backgrounds with Real Industrial Photography */

.section-gradient-1 {
    background:
        /* Dark overlay for readability */
        linear-gradient(180deg,
            rgb(var(--c-bg-raised) / 0.97) 0%,
            rgb(var(--c-bg-raised) / 0.92) 50%,
            rgb(var(--c-bg-raised) / 0.97) 100%),
        /* Blue accent glow */
        radial-gradient(ellipse 80% 50% at 0% 50%, rgb(var(--c-blue-light) / 0.15) 0%, transparent 50%),
        /* Real industrial factory environment */
        url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1600&q=75&auto=format&fit=crop') center center / cover no-repeat fixed;
}

.section-gradient-2 {
    background:
        /* Dark overlay with gold accent */
        linear-gradient(180deg,
            rgb(var(--c-bg-raised) / 0.95) 0%,
            rgb(var(--c-bg-raised) / 0.88) 50%,
            rgb(var(--c-bg-raised) / 0.95) 100%),
        /* Gold accent glow */
        radial-gradient(ellipse 80% 50% at 100% 50%, rgb(var(--c-accent) / 0.12) 0%, transparent 50%),
        /* Real steel processing / industrial environment */
        url('https://images.unsplash.com/photo-1567789884554-0b844b597180?w=1600&q=75&auto=format&fit=crop') center center / cover no-repeat fixed;
}

/* Industrial Pattern Background - Real machinery */
.industrial-pattern {
    background:
        linear-gradient(180deg, rgb(var(--c-bg-base) / 0.95) 0%, rgb(var(--c-bg-base) / 0.9) 100%),
        url('https://images.unsplash.com/photo-1565043666747-69f6646db940?w=1200&q=70&auto=format&fit=crop') center center / cover no-repeat;
}

.section-divider {
    position: relative;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(var(--c-blue-light) / 0.3) 25%,
        rgb(var(--c-accent) / 0.3) 50%,
        rgb(var(--c-blue-light) / 0.3) 75%,
        transparent 100%
    );
}

/* ========================================
   Loading Screen
   ======================================== */

.loading {
    position: fixed;
    inset: 0;
    background: var(--gvco-navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loading.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-spinner {
    position: relative;
    width: 80px;
    height: 80px;
}

.loading-spinner::before,
.loading-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 50%;
}

.loading-spinner::before {
    border-top-color: var(--gvco-blue-light);
    animation: spin 1.2s linear infinite;
}

.loading-spinner::after {
    border-bottom-color: var(--gvco-gold);
    animation: spin 1.2s linear infinite reverse;
    animation-delay: 0.4s;
}

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

/* ========================================
   Glass Morphism
   ======================================== */

.glass {
    background: rgb(var(--c-ink) / 0.03);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgb(var(--c-ink) / 0.05);
}

.glass-dark {
    background: rgb(var(--c-bg-base) / 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgb(var(--c-ink) / 0.05);
}

/* ========================================
   Scrollbar
   ======================================== */

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

::-webkit-scrollbar-track {
    background: var(--gvco-navy);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--gvco-navy-mid), var(--gvco-blue));
    border-radius: 4px;
}

::selection {
    background: rgb(var(--c-blue-light) / 0.3);
    color: var(--text-primary);
}

/* ========================================
   Counter Animation
   ======================================== */

.counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ========================================
   RTL Comprehensive Fixes
   ======================================== */

/* Button Icons RTL */
html[dir="rtl"] .btn-primary svg,
html[dir="rtl"] .btn-secondary svg {
    transform: rotate(180deg);
}

/* Flex Direction RTL */
html[dir="rtl"] .cert-card,
html[dir="rtl"] .contact-info-card {
    flex-direction: row-reverse;
}

/* Text Alignment RTL */
html[dir="rtl"] .cert-card span,
html[dir="rtl"] .contact-info-card h4,
html[dir="rtl"] .contact-info-card p,
html[dir="rtl"] .contact-info-card a {
    text-align: right;
}

/* Contact Section RTL Enhancements */
html[dir="rtl"] .contact-info-card > div:last-child {
    text-align: right;
    width: 100%;
}

/* Form Labels RTL */
html[dir="rtl"] .contact-form-wrapper label {
    text-align: right;
    display: block;
}

/* Form Title RTL */
html[dir="rtl"] .contact-form-wrapper h3 {
    text-align: right;
}

/* Contact Section Heading RTL */
html[dir="rtl"] #contact .section-headline,
html[dir="rtl"] #contact p {
    text-align: right;
}

/* Contact Badge RTL */
html[dir="rtl"] #contact .enterprise-label {
    text-align: right;
}

/* Contact Section LTR Overrides (for English) */
html[dir="ltr"] .contact-info-card {
    flex-direction: row;
}

html[dir="ltr"] .contact-info-card > div:last-child {
    text-align: left;
}

html[dir="ltr"] .contact-info-card h4,
html[dir="ltr"] .contact-info-card p,
html[dir="ltr"] .contact-info-card a {
    text-align: left;
}

html[dir="ltr"] .contact-form-wrapper label {
    text-align: left;
}

html[dir="ltr"] .contact-form-wrapper h3 {
    text-align: left;
}

html[dir="ltr"] #contact .section-headline,
html[dir="ltr"] #contact p {
    text-align: left;
}

html[dir="ltr"] #contact .enterprise-label {
    text-align: left;
}

html[dir="ltr"] .form-input {
    text-align: left;
    direction: ltr;
}

html[dir="ltr"] .form-input::placeholder {
    text-align: left;
}

/* Footer RTL */
html[dir="rtl"] footer ul {
    text-align: right;
}

/* Mobile Menu RTL */
html[dir="rtl"] #mobileMenu a {
    text-align: right;
}

/* Gear Animation Direction RTL */
html[dir="rtl"] .gear-1,
html[dir="rtl"] .gear-2,
html[dir="rtl"] .gear-3 {
    animation-direction: reverse;
}

/* About Section Order RTL */
html[dir="rtl"] .order-1.lg\\:order-2 {
    order: 1;
}

html[dir="rtl"] .order-2.lg\\:order-1 {
    order: 2;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 1024px) {
    .gear-1 {
        width: 350px;
        height: 350px;
        right: -20%;
    }

    .gear-2 {
        width: 280px;
        height: 280px;
    }

    .gear-3 {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .gear-element {
        opacity: 0.3;
    }

    .gear-1 {
        width: 250px;
        height: 250px;
        top: 5%;
        right: -30%;
    }

    .gear-2 {
        width: 200px;
        height: 200px;
        bottom: 10%;
        left: -25%;
    }

    .gear-3 {
        display: none;
    }

    .stat-card {
        padding: 1.25rem 1rem;
    }

    .service-card {
        padding: 1.75rem 1.5rem;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }

    .about-visual {
        aspect-ratio: 1;
    }

    .about-stat-1,
    .about-stat-2 {
        padding: 1rem;
    }

    .contact-form-wrapper {
        padding: 1.5rem;
    }

    /* RTL Mobile */
    html[dir="rtl"] h1 {
        font-size: 2.5rem;
    }

    html[dir="rtl"] h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .gear-element {
        display: none;
    }

    .stat-card {
        padding: 1rem 0.75rem;
    }

    .industry-card {
        padding: 1.5rem 1rem;
    }

    .client-logo-card {
        min-height: 85px;
        padding: 1.25rem 1rem;
    }

    .client-logo-img {
        max-height: 45px;
    }

    .client-logo-text {
        font-size: 0.75rem;
    }
}

/* ========================================
   Accessibility
   ======================================== */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .no-print,
    .gear-element,
    .loading {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}

/* ========================================
   Animation Utilities
   ======================================== */

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Premium Gold Glow Animation */
@keyframes goldGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgb(var(--c-accent) / 0.3);
    }
    50% {
        text-shadow: 0 0 40px rgb(var(--c-accent) / 0.6), 0 0 60px rgb(var(--c-accent) / 0.3);
    }
}

.gold-plus {
    animation: goldGlow 3s ease-in-out infinite;
}

/* Stat Number Hover Effect */
.stat-block:hover .stat-number {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.stat-block:hover .gold-plus {
    animation: goldGlow 1.5s ease-in-out infinite;
}

/* ========================================
   Premium Industrial Visual Effects
   Cinematic Styling & Color Grading
   ======================================== */

/* Cinematic Film Grain Overlay (subtle) */
.hero-bg-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Remove old vignette - using clean split layout now */
#home::after {
    display: none;
}

/* Premium Color Grading Variables */
:root {
    /* Industrial Color Temperature */
    --industrial-blue-tint: rgb(var(--c-blue) / 0.08);
    --industrial-orange-tint: rgb(var(--c-accent) / 0.05);
    --cinematic-shadow: rgb(var(--c-bg-base) / 0.9);
    --cinematic-highlight: rgb(var(--c-ink) / 0.02);
}

/* Hero Section Enhanced Parallax Background */
#home {
    position: relative;
}

#home .hero-bg-fallback {
    position: absolute;
    inset: 0;
    transform: translateZ(0);
    will-change: transform;
}

/* Premium Industrial Image Cards */
.industrial-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
}

.industrial-image-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgb(var(--c-bg-base) / 0.3) 50%,
        rgb(var(--c-bg-base) / 0.8) 100%
    );
    z-index: 1;
}

.industrial-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.1);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.industrial-image-card:hover img {
    transform: scale(1.05);
}

/* Oil & Gas Industry Visual Enhancement */
.industry-card[data-industry="oil-gas"] {
    background:
        linear-gradient(180deg, rgb(var(--c-bg-raised) / 0.9) 0%, rgb(var(--c-bg-base) / 0.95) 100%),
        url('https://images.unsplash.com/photo-1586953208270-767fc7b8a150?w=400&q=75&auto=format&fit=crop') center / cover no-repeat;
}

/* Steel Processing Visual */
.steel-visual {
    background:
        linear-gradient(135deg, rgb(var(--c-blue) / 0.2) 0%, rgb(var(--c-bg-base) / 0.9) 100%),
        url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=600&q=80&auto=format&fit=crop') center / cover no-repeat;
}

/* Enhanced Contact Section Background */
#contact {
    position: relative;
}

#contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Reduced darkness for better readability */
        linear-gradient(180deg, rgb(var(--c-bg-raised) / 0.88) 0%, rgb(var(--c-bg-raised) / 0.82) 50%, rgb(var(--c-bg-raised) / 0.88) 100%),
        /* Subtle blue glow on left side for visual interest */
        radial-gradient(ellipse 60% 80% at 20% 50%, rgb(var(--c-blue-light) / 0.12) 0%, transparent 60%),
        url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1400&q=70&auto=format&fit=crop') center / cover no-repeat fixed;
    z-index: -1;
}

/* Premium Hover Effects for Cards with Photos */
.service-card[data-service] {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: saturate(0.9);
}

.service-card[data-service]:hover {
    filter: saturate(1.1) brightness(1.05);
    box-shadow:
        0 30px 60px rgb(var(--c-shadow) / 0.5),
        0 0 80px rgb(var(--c-blue-light) / 0.1);
}

/* Industrial Photo Gallery Style */
.photo-gallery-item {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 1rem;
    cursor: pointer;
}

.photo-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: saturate(0.85) contrast(1.05);
}

.photo-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 40%,
        rgb(var(--c-bg-base) / 0.7) 100%
    );
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

.photo-gallery-item:hover img {
    transform: scale(1.08);
    filter: saturate(1) contrast(1.1);
}

.photo-gallery-item:hover::after {
    opacity: 0.5;
}

/* Real facility exterior feature */
.facility-feature-panel {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 360px;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid rgb(var(--c-ink) / 0.08);
    background: var(--bg-raised);
    box-shadow: 0 24px 60px rgb(var(--c-shadow) / 0.32);
}

.facility-feature-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(0.98) contrast(1.04) brightness(0.96);
}

.facility-feature-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(var(--c-bg-base) / 0.04) 0%, rgb(var(--c-bg-base) / 0.26) 100%),
        linear-gradient(180deg, transparent 52%, rgb(var(--c-bg-base) / 0.72) 100%);
    pointer-events: none;
}

.facility-feature-caption {
    position: absolute;
    right: clamp(1rem, 4vw, 2rem);
    bottom: clamp(1rem, 4vw, 2rem);
    z-index: 2;
    max-width: min(34rem, calc(100% - 2rem));
    text-align: right;
}

.facility-feature-caption .premium-badge {
    border-radius: 0.45rem;
    letter-spacing: 0;
    text-transform: none;
}

.facility-feature-caption p {
    margin-top: 0.85rem;
    color: rgb(var(--c-ink) / 0.78);
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.7;
    text-shadow: 0 2px 16px rgb(var(--c-shadow) / 0.72);
}

html[dir="ltr"] .facility-feature-panel::after {
    background:
        linear-gradient(90deg, rgb(var(--c-bg-base) / 0.26) 0%, rgb(var(--c-bg-base) / 0.04) 100%),
        linear-gradient(180deg, transparent 52%, rgb(var(--c-bg-base) / 0.72) 100%);
}

html[dir="ltr"] .facility-feature-caption {
    right: auto;
    left: clamp(1rem, 4vw, 2rem);
    text-align: left;
}

/* Gallery Grid Aspect Ratios */
.photo-gallery-item.col-span-2.row-span-2 {
    aspect-ratio: 1;
}

.photo-gallery-item.col-span-2:not(.row-span-2) {
    aspect-ratio: 2/1;
}

/* Responsive Gallery */
@media (max-width: 1024px) {
    .photo-gallery-item {
        aspect-ratio: 4/3;
    }

    .photo-gallery-item.col-span-2.row-span-2 {
        aspect-ratio: 4/3;
    }

    .photo-gallery-item.col-span-2:not(.row-span-2) {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 640px) {
    .facility-feature-panel {
        aspect-ratio: 4 / 3;
        min-height: 280px;
    }

    .facility-feature-panel img {
        object-position: center center;
    }

    .facility-feature-caption {
        right: 1rem;
        left: 1rem;
        max-width: none;
    }

    html[dir="ltr"] .facility-feature-caption {
        right: 1rem;
        left: 1rem;
    }

    .facility-feature-caption p {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .photo-gallery-item {
        aspect-ratio: 3/2;
    }
}

/* Cinematic Text Shadow for Headlines */
.cinematic-heading {
    text-shadow:
        0 2px 4px rgb(var(--c-shadow) / 0.3),
        0 4px 20px rgb(var(--c-bg-base) / 0.5);
}

/* Industrial Glow Effects */
.industrial-glow {
    box-shadow:
        0 0 40px rgb(var(--c-blue-light) / 0.15),
        0 0 80px rgb(var(--c-blue-light) / 0.08);
}

.gold-glow {
    box-shadow:
        0 0 40px rgb(var(--c-accent) / 0.2),
        0 0 80px rgb(var(--c-accent) / 0.1);
}

/* Clients Section - Premium Animated Brand Wall */
#clients {
    position: relative;
    background: var(--gvco-navy);
}

#clients::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Subtle industrial texture */
        linear-gradient(180deg, rgb(var(--c-bg-base) / 0.98) 0%, rgb(var(--c-bg-base) / 0.95) 100%),
        url('https://images.unsplash.com/photo-1565043666747-69f6646db940?w=1400&q=60&auto=format&fit=crop') center / cover no-repeat fixed;
    opacity: 0.3;
    z-index: 0;
}

/* Ambient glow effects behind marquee */
#clients::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 300px;
    background: radial-gradient(ellipse at center,
        rgb(var(--c-blue-light) / 0.08) 0%,
        rgb(var(--c-accent) / 0.05) 30%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Industries Section Industrial Background */
#industries {
    position: relative;
}

#industries::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(var(--c-bg-raised) / 0.97) 0%, rgb(var(--c-bg-raised) / 0.95) 100%),
        url('https://images.unsplash.com/photo-1586953208270-767fc7b8a150?w=1400&q=60&auto=format&fit=crop') center / cover no-repeat fixed;
    z-index: -1;
}

/* Premium Badge with Industrial Style */
.premium-badge {
    display: inline-block;
    background:
        linear-gradient(135deg, rgb(var(--c-accent) / 0.2) 0%, rgb(var(--c-accent) / 0.1) 100%);
    border: 1px solid rgb(var(--c-accent) / 0.4);
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gvco-gold);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgb(var(--c-shadow) / 0.3);
}

/* RTL Support for Premium Badge */
html[dir="rtl"] .about-visual .premium-badge {
    left: auto;
    right: 1.5rem;
}

/* Industrial Worker Visual Accent */
.worker-accent {
    position: relative;
}

.worker-accent::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background:
        linear-gradient(90deg, transparent 0%, rgb(var(--c-bg-base) / 0.7) 100%),
        url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?w=600&q=75&auto=format&fit=crop') right center / cover no-repeat;
    border-radius: 0 1.5rem 1.5rem 0;
    opacity: 0.3;
}

/* Enhanced Stats with Industrial Photography */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgb(var(--c-accent) / 0.05) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.stat-card:hover::after {
    opacity: 1;
}

/* ========================================
   Executive Leadership Cards - Premium Corporate
   ======================================== */

.executive-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgb(var(--c-bg-raised) / 0.4);
    border: 1px solid rgb(var(--c-ink) / 0.06);
    overflow: hidden;
    transition: all 0.4s ease;
}

.executive-card:hover {
    background: rgb(var(--c-bg-raised) / 0.6);
    border-color: rgb(var(--c-ink) / 0.1);
    transform: translateY(-4px);
}

/* Executive Photo Frame - Rectangular Portrait */
.executive-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: linear-gradient(180deg, rgb(var(--c-bg-raised) / 0.3) 0%, rgb(var(--c-bg-base) / 0.6) 100%);
}

.executive-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: all 0.5s ease;
    filter: grayscale(15%) contrast(1.02);
}

.executive-card:hover .executive-photo {
    transform: scale(1.03);
    filter: grayscale(0%) contrast(1.05);
}

/* Dark Gradient Overlay */
.executive-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 50%,
        rgb(var(--c-bg-base) / 0.4) 75%,
        rgb(var(--c-bg-base) / 0.8) 100%
    );
    transition: opacity 0.4s ease;
}

.executive-card:hover .executive-photo-overlay {
    opacity: 0.7;
}

/* Executive Info Section */
.executive-info {
    padding: 1.5rem;
    text-align: center;
    position: relative;
}

/* Gold Accent Line */
.executive-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: var(--gvco-gold);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.executive-card:hover .executive-info::before {
    width: 50px;
    opacity: 1;
}

/* Executive Name */
.executive-name {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
}

/* English Title */
.executive-title-en {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--c-ink) / 0.5);
    margin-bottom: 0.25rem;
}

/* Arabic Title */
.executive-title-ar {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgb(var(--c-ink) / 0.35);
    font-family: 'Tajawal', 'Cairo', sans-serif;
}

/* Leadership Section - Clean */
#leadership {
    position: relative;
}

/* Responsive Executive Cards */
@media (max-width: 768px) {
    .executive-card {
        max-width: 280px;
        margin: 0 auto;
    }

    .executive-info {
        padding: 1.25rem;
    }

    .executive-name {
        font-size: 1.1rem;
    }
}

/* RTL Support */
html[dir="rtl"] .executive-title-ar {
    font-family: 'Tajawal', 'Cairo', sans-serif;
}

footer {
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(var(--c-bg-raised) / 0.99) 0%, rgb(var(--c-bg-raised) / 0.97) 100%),
        url('https://images.unsplash.com/photo-1567789884554-0b844b597180?w=1400&q=50&auto=format&fit=crop') center / cover no-repeat;
    opacity: 0.3;
    z-index: -1;
}

/* ========================================
   COMPREHENSIVE RESPONSIVE DESIGN
   Mobile-First Premium Industrial Experience
   ======================================== */

/* ----------------------------------------
   BASE MOBILE STYLES (max-width: 639px)
   ---------------------------------------- */
@media (max-width: 639px) {
    /* Root Typography */
    html {
        font-size: 14px;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
        overflow-x: clip;
    }

    /* Section Padding */
    section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .py-28 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .py-32 { padding-top: 4rem; padding-bottom: 4rem; }
    .lg\\:py-36 { padding-top: 4rem; padding-bottom: 4rem; }

    /* Container Padding */
    .px-4 { padding-left: 1rem; padding-right: 1rem; }
    .sm\\:px-6, .lg\\:px-8 { padding-left: 1rem; padding-right: 1rem; }

    /* Mobile Navigation */
    nav {
        padding: 0.75rem 0;
    }

    nav img {
        height: 2.25rem;
    }

    #mobileMenuBtn {
        padding: 0.75rem;
    }

    #mobileMenu {
        padding: 1rem 0;
    }

    #mobileMenu a {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        font-weight: 500;
    }

    #mobileMenu .flex.items-center.gap-4 {
        padding: 1rem 1.5rem;
        flex-direction: column;
        gap: 1rem;
    }

    /* Mobile Hero */
    .hero-mobile-layout {
        min-height: 100vh;
        padding-top: 4rem;
    }

    .hero-mobile-image {
        height: 45vh;
        min-height: 280px;
    }

    .hero-mobile-image img {
        object-position: center 30%;
    }

    .hero-mobile-content {
        padding: 2rem 1.25rem 2.5rem;
    }

    .hero-mobile-content .hero-metadata-premium {
        margin-bottom: 1rem;
        gap: 0.5rem;
    }

    .hero-mobile-content .hero-metadata-premium span {
        font-size: 0.7rem;
    }

    .hero-mobile-content h1 {
        font-size: 1.75rem;
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }

    .hero-mobile-content h1 span {
        font-size: 1.75rem !important;
    }

    .hero-mobile-content p {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    /* Mobile Hero Buttons */
    .hero-mobile-content .hero-cta {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .hero-mobile-content .btn-primary,
    .hero-mobile-content .btn-secondary,
    .hero-mobile-content .hero-btn-primary,
    .hero-mobile-content .hero-btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
    }

    /* Mobile Hero Stats */
    .hero-mobile-stats {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgb(var(--c-ink) / 0.08);
    }

    .hero-mobile-stats .grid {
        gap: 1rem;
    }

    .hero-mobile-stats .stat-block {
        text-align: center;
        padding: 0.75rem 0.5rem;
    }

    .hero-mobile-stats .stat-number {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .hero-mobile-stats .stat-label {
        font-size: 0.65rem;
    }

    /* Section Headlines */
    .section-headline {
        font-size: 1.5rem;
        line-height: 1.35;
        margin-bottom: 1rem;
    }

    .section-headline span {
        font-size: 1.5rem;
    }

    h2.section-headline {
        font-size: 1.5rem;
    }

    /* Enterprise Label/Badge */
    .enterprise-label {
        font-size: 0.7rem;
        padding: 0.5rem 1rem;
    }

    /* Cards - General */
    .stat-card {
        padding: 1.25rem 1rem;
    }

    .stat-card .text-4xl,
    .stat-card .text-3xl {
        font-size: 1.75rem;
    }

    .stat-card .text-sm {
        font-size: 0.75rem;
    }

    /* Service Cards */
    .service-card {
        padding: 1.5rem 1.25rem;
    }

    .service-card h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .service-card p {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .service-card .service-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }

    /* Industry Cards */
    .industry-card {
        padding: 1.25rem 1rem;
    }

    .industry-card h4 {
        font-size: 0.95rem;
    }

    /* Client Logo Cards */
    .client-logo-card {
        min-height: 70px;
        padding: 1rem 0.75rem;
    }

    .client-logo-img {
        max-height: 35px;
    }

    /* Contact Section */
    .contact-info-card {
        padding: 1.25rem 1rem;
        gap: 1rem;
    }

    .contact-icon {
        width: 44px;
        height: 44px;
    }

    .contact-icon svg {
        width: 20px;
        height: 20px;
    }

    .contact-info-card h4 {
        font-size: 1rem;
    }

    .contact-info-card p,
    .contact-info-card a {
        font-size: 0.85rem;
    }

    .contact-form-wrapper {
        padding: 1.5rem 1.25rem;
    }

    .contact-form-wrapper h3 {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }

    /* Forms - Touch Friendly */
    .form-input {
        padding: 1rem 1rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .form-input::placeholder {
        font-size: 0.9rem;
    }

    textarea.form-input {
        min-height: 120px;
    }

    label {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    /* Buttons - Touch Friendly */
    .btn-primary,
    .btn-secondary {
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
        min-height: 48px;
    }

    button[type="submit"] {
        min-height: 52px;
        font-size: 1rem;
    }

    /* About Section */
    .about-visual {
        aspect-ratio: 4/3;
        margin-bottom: 1.5rem;
    }

    .about-stat-1,
    .about-stat-2 {
        padding: 0.75rem 1rem;
    }

    .about-stat-1 .text-2xl,
    .about-stat-2 .text-2xl {
        font-size: 1.25rem;
    }

    /* Executive/Leadership Cards */
    .executive-card {
        max-width: 100%;
        margin: 0;
    }

    .executive-photo {
        height: 200px;
    }

    .executive-info {
        padding: 1rem;
    }

    .executive-name {
        font-size: 1rem;
    }

    .executive-title {
        font-size: 0.75rem;
    }

    /* Footer */
    footer {
        padding-top: 3rem;
        padding-bottom: 1.5rem;
    }

    footer .grid {
        gap: 2rem;
    }

    footer h4 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    footer p, footer a, footer li {
        font-size: 0.85rem;
    }

    footer img {
        height: 2.5rem;
    }

    /* Grid Adjustments */
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\\:grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\\:grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\\:grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .gap-6 { gap: 1rem; }
    .gap-8 { gap: 1.25rem; }
    .gap-12 { gap: 1.5rem; }
    .gap-16 { gap: 2rem; }
    .lg\\:gap-24 { gap: 2rem; }

    /* Marquee/Slider */
    .marquee-content {
        gap: 1.5rem;
    }

    /* Certification Cards */
    .cert-card {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .cert-card img {
        height: 32px;
    }

    .cert-card span {
        font-size: 0.75rem;
    }

    /* Hide decorative elements */
    .gear-element,
    .grid-pattern {
        display: none;
    }

    /* Typography RTL Mobile */
    html[dir="rtl"] h1,
    html[dir="rtl"] .hero-mobile-content h1 {
        font-size: 1.75rem;
    }

    html[dir="rtl"] h2,
    html[dir="rtl"] .section-headline {
        font-size: 1.5rem;
    }

    html[dir="rtl"] h3 {
        font-size: 1.125rem;
    }

    html[dir="rtl"] p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

/* ----------------------------------------
   TABLET STYLES (640px - 1023px)
   ---------------------------------------- */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Root Typography */
    html {
        font-size: 15px;
    }

    /* Section Padding */
    section {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    /* Container */
    .max-w-7xl {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Mobile Hero */
    .hero-mobile-layout {
        min-height: 100vh;
    }

    .hero-mobile-image {
        height: 50vh;
    }

    .hero-mobile-content {
        padding: 2.5rem 2rem 3rem;
    }

    .hero-mobile-content h1 {
        font-size: 2.25rem;
    }

    .hero-mobile-content h1 span {
        font-size: 2.25rem !important;
    }

    .hero-mobile-content p {
        font-size: 1rem;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-mobile-content .hero-cta {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }

    .hero-mobile-content .btn-primary,
    .hero-mobile-content .btn-secondary {
        width: auto;
        min-width: 180px;
    }

    /* Section Headlines */
    .section-headline {
        font-size: 2rem;
    }

    /* Grid Layouts */
    .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .gap-6 { gap: 1.25rem; }
    .gap-8 { gap: 1.5rem; }

    /* Cards */
    .stat-card {
        padding: 1.5rem 1.25rem;
    }

    .service-card {
        padding: 2rem 1.5rem;
    }

    /* Contact Section */
    .contact-form-wrapper {
        padding: 2rem;
    }

    /* Executive Cards */
    .executive-card {
        max-width: 320px;
        margin: 0 auto;
    }

    /* Form Grid */
    .grid.sm\\:grid-cols-2.gap-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    /* RTL Tablet */
    html[dir="rtl"] h1 {
        font-size: 2.25rem;
    }

    html[dir="rtl"] h2 {
        font-size: 2rem;
    }
}

/* ----------------------------------------
   LAPTOP STYLES (1024px - 1279px)
   ---------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Container */
    .max-w-7xl {
        max-width: 960px;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Desktop Hero */
    .hero-desktop-layout {
        padding: 0 1.5rem;
    }

    .hero-image-container {
        width: 48%;
    }

    .hero-content-container {
        width: 52%;
    }

    .hero-heading-premium span {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    /* Stats */
    .hero-stats .stat-block {
        padding: 0 1.25rem;
    }

    .stat-number {
        font-size: 1.75rem;
    }

    /* Section Headlines */
    .section-headline {
        font-size: 2.25rem;
    }

    /* Grid */
    .lg\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\\:grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Service Cards */
    .service-card {
        padding: 2rem 1.5rem;
    }

    /* Contact Layout */
    .lg\\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\\:gap-24 {
        gap: 2.5rem;
    }
}

/* ----------------------------------------
   DESKTOP STYLES (1280px - 1535px)
   ---------------------------------------- */
@media (min-width: 1280px) and (max-width: 1535px) {
    .max-w-7xl {
        max-width: 1200px;
    }

    .hero-heading-premium span {
        font-size: 2.75rem;
    }

    /* Full 4-column grids */
    .lg\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------------
   LARGE DESKTOP STYLES (1536px+)
   ---------------------------------------- */
@media (min-width: 1536px) {
    .max-w-7xl {
        max-width: 1400px;
    }

    .hero-heading-premium span {
        font-size: 3.25rem;
    }

    .section-headline {
        font-size: 2.75rem;
    }
}

/* ----------------------------------------
   TOUCH DEVICE OPTIMIZATIONS
   ---------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn-primary,
    .btn-secondary,
    button,
    a.inline-flex {
        min-height: 44px;
    }

    /* Remove hover effects that don't work on touch */
    .service-card:hover,
    .stat-card:hover,
    .contact-info-card:hover,
    .client-logo-card:hover {
        transform: none;
    }

    /* Form inputs */
    .form-input {
        font-size: 16px; /* Prevents iOS zoom */
    }

    /* Navigation links spacing */
    #mobileMenu a {
        padding: 1rem 1.5rem;
    }
}

/* ----------------------------------------
   RESPONSIVE RTL/LTR SPECIFIC
   ---------------------------------------- */

/* Mobile RTL Alignment */
@media (max-width: 1023px) {
    html[dir="rtl"] .hero-mobile-content {
        text-align: center;
    }

    html[dir="rtl"] .hero-mobile-content h1,
    html[dir="rtl"] .hero-mobile-content p,
    html[dir="rtl"] .hero-mobile-content .hero-metadata-premium {
        text-align: center;
    }

    html[dir="rtl"] .hero-mobile-stats .stat-block {
        text-align: center;
    }

    /* Section centering on mobile */
    html[dir="rtl"] .section-headline,
    html[dir="ltr"] .section-headline {
        text-align: center;
    }

    html[dir="rtl"] #contact .section-headline,
    html[dir="rtl"] #contact p {
        text-align: center;
    }

    html[dir="ltr"] #contact .section-headline,
    html[dir="ltr"] #contact p {
        text-align: center;
    }

    /* Contact info cards stack centered */
    html[dir="rtl"] .contact-info-card,
    html[dir="ltr"] .contact-info-card {
        flex-direction: row;
        justify-content: flex-start;
    }

    /* Form labels centered */
    html[dir="rtl"] .contact-form-wrapper label,
    html[dir="ltr"] .contact-form-wrapper label {
        text-align: left;
    }

    html[dir="rtl"] .contact-form-wrapper label {
        text-align: right;
    }
}

/* Desktop RTL - Restore alignment */
@media (min-width: 1024px) {
    html[dir="rtl"] #contact .section-headline,
    html[dir="rtl"] #contact p {
        text-align: right;
    }

    html[dir="ltr"] #contact .section-headline,
    html[dir="ltr"] #contact p {
        text-align: left;
    }
}

/* ----------------------------------------
   LANDSCAPE MOBILE ADJUSTMENTS
   ---------------------------------------- */
@media (max-width: 896px) and (orientation: landscape) {
    .hero-mobile-layout {
        min-height: auto;
    }

    .hero-mobile-image {
        height: 35vh;
        min-height: 200px;
    }

    .hero-mobile-content {
        padding: 1.5rem 1.25rem 2rem;
    }

    .hero-mobile-content h1 {
        font-size: 1.5rem;
    }

    .hero-mobile-stats {
        margin-top: 1rem;
        padding-top: 1rem;
    }
}

/* ----------------------------------------
   HIGH DPI / RETINA DISPLAYS
   ---------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders */
    .contact-info-card,
    .service-card,
    .stat-card,
    .form-input {
        border-width: 0.5px;
    }
}

/* ----------------------------------------
   PREVENT OVERFLOW GLOBALLY
   ---------------------------------------- */
* {
    max-width: 100%;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent text overflow */
h1, h2, h3, h4, h5, h6, p, span, a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ----------------------------------------
   SAFE AREA INSETS (Notched Devices)
   ---------------------------------------- */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    footer {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
}

/* ----------------------------------------
   ADDITIONAL MOBILE REFINEMENTS
   ---------------------------------------- */
@media (max-width: 639px) {
    /* About Section Stats */
    .about-stat {
        padding: 0.875rem 1rem;
        border-radius: 0.75rem;
    }

    .about-stat-1 {
        top: 1rem;
        right: 1rem;
    }

    .about-stat-2 {
        bottom: 1rem;
        left: 1rem;
    }

    html[dir="rtl"] .about-stat-1 {
        right: auto;
        left: 1rem;
    }

    html[dir="rtl"] .about-stat-2 {
        left: auto;
        right: 1rem;
    }

    .about-stat .stat-number {
        font-size: 1.5rem !important;
    }

    .about-stat .stat-label {
        font-size: 0.65rem;
    }

    .about-visual .premium-badge {
        bottom: 0.75rem;
        left: 0.75rem;
        font-size: 0.6rem;
        padding: 0.375rem 0.625rem;
    }

    /* Industry Cards Mobile */
    .industry-card {
        padding: 1.25rem 0.75rem;
    }

    .industry-card .industry-icon svg {
        width: 2.5rem;
        height: 2.5rem;
    }

    .industry-card span {
        font-size: 0.75rem;
    }

    /* Service Tags */
    .service-tag {
        font-size: 0.7rem;
        padding: 0.375rem 0.75rem;
    }

    /* Section Headers Spacing */
    .mb-20 {
        margin-bottom: 2.5rem;
    }

    .mb-16 {
        margin-bottom: 2rem;
    }

    /* Certification Cards Mobile */
    .cert-card {
        padding: 0.875rem;
    }

    .cert-icon {
        width: 36px;
        height: 36px;
    }

    .cert-icon svg {
        width: 18px;
        height: 18px;
    }

    .cert-card span {
        font-size: 0.8rem;
    }

    /* Footer Mobile */
    footer .grid {
        grid-template-columns: 1fr;
    }

    footer .lg\\:col-span-1 {
        text-align: center;
    }

    footer img {
        margin-left: auto;
        margin-right: auto;
    }

    footer .text-gvco-gold {
        text-align: center;
    }

    /* Navigation Mobile Enhancement */
    #mobileMenu {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    /* Section Badge/Label Mobile */
    .inline-flex.items-center.px-5.py-2\\.5 {
        padding: 0.5rem 1rem;
    }
}

/* ----------------------------------------
   TABLET ABOUT SECTION
   ---------------------------------------- */
@media (min-width: 640px) and (max-width: 1023px) {
    .about-stat-1 {
        top: 1.5rem;
        right: 1.5rem;
    }

    .about-stat-2 {
        bottom: 1.5rem;
        left: 1.5rem;
    }

    html[dir="rtl"] .about-stat-1 {
        right: auto;
        left: 1.5rem;
    }

    html[dir="rtl"] .about-stat-2 {
        left: auto;
        right: 1.5rem;
    }

    .about-stat .stat-number {
        font-size: 1.75rem !important;
    }
}

/* ----------------------------------------
   MOBILE INDUSTRY CARDS 2-COLUMN GRID
   ---------------------------------------- */
@media (max-width: 639px) {
    #industries .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

/* ----------------------------------------
   LEADERSHIP SECTION MOBILE
   ---------------------------------------- */
@media (max-width: 767px) {
    #leadership .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .executive-card {
        max-width: 320px;
        margin: 0 auto;
    }

    #leadership .text-center.mb-20 {
        margin-bottom: 2.5rem;
    }

    #leadership h2 {
        font-size: 1.75rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #leadership .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .executive-card {
        max-width: none;
    }

    .executive-photo {
        height: 180px;
    }
}

/* ----------------------------------------
   CLIENTS SECTION MOBILE
   ---------------------------------------- */
@media (max-width: 639px) {
    #clients .text-center.mb-16 {
        margin-bottom: 2rem;
    }

    #clients h2 {
        font-size: 1.5rem;
    }

    .logo-marquee-row {
        margin-bottom: 1rem;
    }
}

/* ----------------------------------------
   STATS SECTION MOBILE
   ---------------------------------------- */
@media (max-width: 639px) {
    /* Stats with numbers */
    .stat-number,
    [class*="text-4xl"],
    [class*="text-5xl"] {
        font-size: 2rem !important;
    }

    /* Stats with counters */
    .counter {
        font-size: 2rem;
    }
}

/* ----------------------------------------
   FIX HORIZONTAL SCROLL ISSUES
   ---------------------------------------- */
/* `overflow-x: hidden` is a trap here. Per CSS spec, when one overflow axis is
   not `visible`, the other axis computes from `visible` to `auto` — so each of
   these elements silently became a VERTICAL scroll container.

   It went unnoticed while content happened to fit exactly. The moment anything
   overflowed by a pixel (a reveal transform, a hover lift) every section grew
   its own scrollbar, which stole ~15px of width and shoved the layout sideways,
   and nested scroll containers made wheel scrolling stutter.

   `clip` does the same visual job without creating a scroll container, and
   without touching the other axis. `hidden` is kept first as a fallback for
   engines that do not know `clip`. */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}

.max-w-7xl,
.max-w-6xl,
section {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Ensure grids don't cause overflow */
.grid {
    max-width: 100%;
}

/* ----------------------------------------
   SMOOTH SCROLLING
   ---------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ----------------------------------------
   MOBILE MENU RTL SUPPORT
   ---------------------------------------- */
html[dir="rtl"] #mobileMenu a {
    text-align: right;
}

html[dir="ltr"] #mobileMenu a {
    text-align: left;
}

/* ----------------------------------------
   RESPONSIVE NAV BAR
   ---------------------------------------- */
@media (max-width: 639px) {
    nav .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    nav img {
        height: 2rem;
    }
}

/* ----------------------------------------
   RESPONSIVE FOOTER
   ---------------------------------------- */
@media (max-width: 639px) {
    footer .grid.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    footer .lg\\:col-span-1 {
        text-align: center;
    }

    footer ul {
        padding: 0;
    }

    html[dir="rtl"] footer h4,
    html[dir="rtl"] footer p,
    html[dir="rtl"] footer li,
    html[dir="rtl"] footer a {
        text-align: center;
    }

    html[dir="ltr"] footer h4,
    html[dir="ltr"] footer p,
    html[dir="ltr"] footer li,
    html[dir="ltr"] footer a {
        text-align: center;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    footer .grid.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* ----------------------------------------
   CONTACT SECTION MOBILE
   ---------------------------------------- */
@media (max-width: 1023px) {
    #contact .grid.lg\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Show contact info first on mobile */
    #contact .order-2.lg\\:order-1 {
        order: 1;
    }

    #contact .order-1.lg\\:order-2 {
        order: 2;
    }

    #contact .section-headline,
    #contact > div > div > p {
        text-align: center;
    }

    #contact .inline-flex.items-center {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-info-card {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ----------------------------------------
   ABOUT SECTION MOBILE
   ---------------------------------------- */
@media (max-width: 1023px) {
    #about .grid.lg\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Show visual first on mobile */
    #about .order-2.lg\\:order-1 {
        order: 2;
    }

    #about .order-1.lg\\:order-2 {
        order: 1;
    }

    #about .section-headline,
    #about > div > div > div > p {
        text-align: center;
    }

    #about .inline-flex.items-center {
        margin-left: auto;
        margin-right: auto;
    }

    #about .btn-primary {
        margin-left: auto;
        margin-right: auto;
        display: flex;
    }

    .about-visual {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 4/3;
    }

    /* Center certifications grid */
    #about .grid.sm\\:grid-cols-2.gap-4 {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ----------------------------------------
   SERVICES SECTION MOBILE
   ---------------------------------------- */
@media (max-width: 639px) {
    #services .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-card {
        text-align: center;
    }

    .service-card .service-icon {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    #services .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* ----------------------------------------
   ENSURE BUTTONS NEVER OVERFLOW
   ---------------------------------------- */
.btn-primary,
.btn-secondary,
.hero-btn-primary,
.hero-btn-secondary,
.btn-corporate {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 639px) {
    .btn-primary,
    .btn-secondary,
    .hero-btn-primary,
    .hero-btn-secondary {
        white-space: normal;
        text-align: center;
    }
}

/* ========================================
   Golden Vision UI Refinement Pass
   Cleaner corporate surface, stronger readability
   ======================================== */

:root {
    --gvco-navy: var(--bg-base);
    --gvco-navy-light: var(--bg-raised);
    --gvco-navy-mid: var(--bg-inset);
    --gvco-blue: #245a9d;
    --gvco-blue-light: #3b82d6;
    --gvco-gold: #d7b35a;
    --gvco-gold-light: #e5c874;
    --text-primary: rgb(var(--c-ink) / 0.96);
    --text-secondary: rgb(var(--c-ink) / 0.78);
    --text-muted: rgb(var(--c-ink) / 0.64);
    --border-quiet: rgb(var(--c-ink) / 0.1);
}

body {
    background:
        radial-gradient(circle at 80% 0%, rgb(var(--c-blue-light) / 0.12), transparent 34rem),
        linear-gradient(180deg, var(--bg-base) 0%, var(--bg-raised) 42%, var(--bg-base) 100%);
}

#navbar {
    background: rgb(var(--c-bg-base) / 0.76);
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid rgb(var(--c-ink) / 0.05);
}

#navbar.scrolled {
    background: rgb(var(--c-bg-base) / 0.94);
}

#navbar .h-\[80px\] {
    height: 72px;
}

#navbar .site-logo,
#navbar img[alt="Golden Vision Metal Industry Factory Logo"] {
    height: 52px;
}

.nav-link-clean {
    color: rgb(var(--c-ink) / 0.74);
    font-size: 0.86rem;
    letter-spacing: 0;
    text-transform: none;
}

.nav-link-clean.active,
.nav-link-clean:hover {
    color: var(--text-primary);
}

.nav-btn-quote {
    border-color: rgb(var(--c-accent) / 0.5);
    color: var(--text-primary);
    letter-spacing: 0;
    text-transform: none;
    background: rgb(var(--c-accent) / 0.08);
}

#langToggle,
#mobileLangToggle {
    color: rgb(var(--c-ink) / 0.72);
}

.hero-content-inner {
    max-width: 620px;
    padding-right: clamp(2rem, 5vw, 5rem);
    padding-left: clamp(1.5rem, 3vw, 3rem);
    margin-top: 0 !important;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.72) contrast(1.08) saturate(0.95);
    z-index: 0;
}

.hero-video + .hero-image,
.hero-video + img {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-image-container > div:first-child {
    background: var(--bg-base);
}

.hero-heading-premium span {
    color: var(--text-primary);
    font-weight: 800;
    font-size: clamp(2.85rem, 4.2vw, 3.7rem);
    line-height: 1.22;
}

.hero-description,
.section-subheadline,
.card-description {
    color: var(--text-secondary) !important;
    opacity: 1;
}

.hero-description {
    font-size: 1.05rem !important;
    max-width: 520px;
}

.hero-metadata-premium span {
    color: var(--text-muted) !important;
    letter-spacing: 0.06em !important;
}

.credential-tag-clean {
    color: rgb(var(--c-ink) / 0.78);
    border-color: rgb(var(--c-accent) / 0.24);
    background: rgb(var(--c-ink) / 0.045);
}

.hero-btn-primary,
.btn-primary {
    background: linear-gradient(135deg, #245a9d 0%, #2f70bd 100%);
    border-radius: 0.45rem;
    box-shadow: 0 14px 34px rgb(var(--c-blue-light) / 0.24);
}

.hero-btn-secondary,
.btn-secondary {
    border-radius: 0.45rem;
    border-color: rgb(var(--c-ink) / 0.22);
    color: rgb(var(--c-ink) / 0.88);
}

.stat-number {
    color: var(--text-primary);
}

.stat-label {
    color: var(--text-muted);
    opacity: 1;
    letter-spacing: 0;
    text-transform: none;
}

section.py-28,
#about,
#services,
#industries,
#clients,
#gallery,
#contact {
    padding-top: clamp(4.5rem, 7vw, 6rem) !important;
    padding-bottom: clamp(4.5rem, 7vw, 6rem) !important;
}

.text-white\/50,
.text-white\/40 {
    color: var(--text-secondary) !important;
}

.text-white\/30 {
    color: var(--text-muted) !important;
}

.section-headline {
    color: var(--text-primary);
    font-size: clamp(2.35rem, 4vw, 3.55rem);
    line-height: 1.22;
}

.text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, var(--gvco-gold-light) 64%, #8bbdf1 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.grid-pattern {
    opacity: 0.045 !important;
}

.section-divider {
    opacity: 0.35;
}

[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0.2s !important;
}

.text-center.mb-20,
.text-center.mb-16 {
    margin-bottom: 3rem !important;
}

.service-card,
.industry-card,
.cert-card,
.contact-info-card,
.contact-form-wrapper,
.executive-card,
.trust-indicators,
.logo-marquee-item,
#gallery .grid + .grid > div,
.photo-gallery-item {
    border-radius: 0.5rem !important;
}

.service-card {
    padding: 2rem;
    border-color: var(--border-quiet);
    background:
        linear-gradient(135deg, rgb(var(--c-bg-base) / 0.92), rgb(var(--c-bg-base) / 0.94)),
        var(--service-bg, none) !important;
    min-height: 250px;
}

.service-card:hover,
.industry-card:hover,
.executive-card:hover,
.logo-marquee-item:hover,
.photo-gallery-item:hover img {
    transform: none;
}

.service-icon,
.industry-icon,
.contact-icon,
.cert-icon {
    border-radius: 0.45rem;
}

.logo-marquee-item {
    background: rgb(var(--c-ink) / 0.045);
    border-color: rgb(var(--c-ink) / 0.08);
}

.photo-gallery-item::after {
    background: linear-gradient(180deg, transparent 42%, rgb(var(--c-bg-base) / 0.76) 100%);
}

.form-input {
    border-radius: 0.45rem;
    background: rgb(var(--c-ink) / 0.065);
    border-color: rgb(var(--c-ink) / 0.16);
}

.executive-photo-frame {
    aspect-ratio: 1 / 1;
    background:
        linear-gradient(180deg, rgb(var(--c-bg-inset) / 0.55), rgb(var(--c-bg-base) / 0.78)),
        radial-gradient(circle at 50% 18%, rgb(var(--c-ink) / 0.08), transparent 18rem);
}

.executive-photo {
    object-fit: contain;
    object-position: center bottom;
    padding: 0.5rem 0.5rem 0;
}

@media (max-width: 1023px) {
    #navbar .h-\[80px\] {
        height: 68px;
    }

    #navbar .site-logo,
    #navbar img[alt="Golden Vision Metal Industry Factory Logo"] {
        height: 46px;
    }

    .hero-heading-premium span {
        font-size: clamp(2.2rem, 9.4vw, 3rem) !important;
        line-height: 1.22 !important;
    }

    .hero-description {
        font-size: 0.95rem !important;
        max-width: 22rem !important;
    }

    .credential-tag-clean {
        font-size: 0.68rem;
        padding: 0.45rem 0.7rem;
    }

    .hero-cta {
        margin-bottom: 2rem !important;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: auto !important;
        min-width: 9.5rem;
        padding: 0.85rem 1.35rem;
    }

    .hero-stats {
        gap: 1.25rem !important;
    }

    .stat-number {
        font-size: 1.65rem !important;
    }

    section.py-28,
    #about,
    #services,
    #industries,
    #clients,
    #gallery,
    #contact {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .text-center.mb-20,
    .text-center.mb-16 {
        margin-bottom: 2.25rem !important;
    }
}

@media (max-width: 639px) {
    .lg\:hidden.min-h-screen,
    #home {
        min-height: 100svh;
    }

    #home .relative.z-10.flex-1 {
        padding-top: 6rem;
        padding-bottom: 3.5rem;
        align-items: center;
    }

    .hero-metadata-premium {
        margin-bottom: 1rem;
    }

    .hero-credentials {
        margin-bottom: 1.25rem !important;
    }

    .hero-cta {
        flex-direction: row !important;
        gap: 0.75rem !important;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        min-width: 0;
        flex: 1 1 0;
        padding: 0.85rem 0.8rem;
        font-size: 0.88rem;
    }

    .section-headline {
        font-size: clamp(2rem, 9vw, 2.65rem);
    }

    .service-card {
        min-height: auto;
        padding: 1.5rem;
    }

.photo-gallery-item.col-span-2,
    .photo-gallery-item.col-span-2.row-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* ----------------------------------------
   HERO VIDEO FULL-BLEED RECOMPOSITION
   ---------------------------------------- */
@media (min-width: 1024px) {
    #home .hero-desktop-layout {
        position: relative;
        isolation: isolate;
    }

    #home .hero-image-container {
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        height: 100%;
        z-index: 0;
    }

    #home .hero-image-container::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            radial-gradient(circle at 20% 58%, rgb(var(--c-accent) / 0.16), transparent 22rem),
            linear-gradient(90deg, rgb(var(--c-bg-base) / 0.18) 0%, rgb(var(--c-bg-base) / 0.68) 48%, rgb(var(--c-bg-base) / 0.96) 100%),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.72) 0%, transparent 26%, rgb(var(--c-bg-base) / 0.9) 100%);
    }

    #home .hero-video {
        object-position: center center;
        filter: brightness(0.84) contrast(1.12) saturate(1.02);
    }

    #home .hero-content-container {
        width: 100% !important;
        min-height: 100vh;
        z-index: 2;
        background: transparent;
    }

    #home .hero-content-container::before {
        display: none;
    }

    #home .hero-content-inner {
        width: min(610px, 46vw);
        max-width: none;
        margin-right: clamp(4rem, 7vw, 7.5rem) !important;
        margin-left: auto !important;
        padding: 0;
        text-align: right;
    }

    #home .hero-heading-premium {
        margin-bottom: 1.25rem;
    }

    #home .hero-heading-premium span {
        font-size: clamp(3.25rem, 4.8vw, 4.65rem);
        line-height: 1.12;
        letter-spacing: 0;
        text-wrap: balance;
    }

    #home .hero-description {
        max-width: 510px;
        font-size: 1.12rem !important;
        line-height: 1.9;
    }

    #home .hero-credentials {
        margin-bottom: 1.75rem !important;
    }

    #home .hero-cta {
        margin-bottom: 2.75rem !important;
    }
}

/* Keep the portrait video readable instead of cropping it aggressively. */
@media (min-width: 1024px) {
    #home .hero-image-container {
        width: 56% !important;
        left: 0;
        right: auto;
        background:
            radial-gradient(circle at 30% 45%, rgb(var(--c-accent) / 0.12), transparent 22rem),
            linear-gradient(90deg, rgb(var(--c-bg-base) / 0.08), rgb(var(--c-bg-base) / 0.42) 72%, rgb(var(--c-bg-base) / 0.9));
    }

    #home .hero-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
        filter: brightness(0.98) contrast(1.08) saturate(1.05);
    }

    #home .hero-image-container::after {
        background:
            linear-gradient(90deg, transparent 0%, rgb(var(--c-bg-base) / 0.08) 38%, rgb(var(--c-bg-base) / 0.82) 82%, rgb(var(--c-bg-base) / 0.98) 100%),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.68) 0%, transparent 30%, rgb(var(--c-bg-base) / 0.78) 100%);
    }

    #home .hero-content-inner {
        width: min(560px, 43vw);
        margin-right: clamp(3.5rem, 6vw, 6.5rem) !important;
    }
}

@media (max-width: 1023px) {
    #home .hero-video {
        object-fit: contain;
        object-position: center center;
        filter: brightness(0.92) contrast(1.08) saturate(1.05);
        background: var(--bg-base);
    }
}

/* ----------------------------------------
   HERO FINAL: COHERENT SPLIT LAYOUT
   The current source video is portrait, so keep it as a cinematic visual panel
   instead of stretching it across the full hero.
   ---------------------------------------- */
@media (min-width: 1024px) {
    #home .hero-desktop-layout {
        flex-direction: row-reverse;
        isolation: isolate;
    }

    #home .hero-image-container {
        position: relative !important;
        inset: auto;
        width: 48% !important;
        min-height: 100vh;
        z-index: 0;
        background: var(--bg-base);
    }

    #home .hero-image-container::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            linear-gradient(90deg, rgb(var(--c-bg-base) / 0.96) 0%, rgb(var(--c-bg-base) / 0.46) 32%, rgb(var(--c-bg-base) / 0.14) 100%),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.38) 0%, transparent 38%, rgb(var(--c-bg-base) / 0.58) 100%);
    }

    #home .hero-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        filter: brightness(0.78) contrast(1.08) saturate(0.98);
    }

    #home .hero-content-container {
        width: 52% !important;
        min-height: 100vh;
        z-index: 2;
        background:
            radial-gradient(circle at 70% 36%, rgb(var(--c-blue-light) / 0.12), transparent 22rem),
            linear-gradient(180deg, var(--bg-base) 0%, var(--bg-raised) 100%);
    }

    #home .hero-content-container::before {
        display: block;
        right: auto;
        left: -120px;
        width: 160px;
        background: linear-gradient(90deg, transparent, var(--bg-base) 78%);
    }

    #home .hero-content-inner {
        width: min(590px, 82%);
        margin-right: clamp(3rem, 5vw, 5.5rem) !important;
        margin-left: auto !important;
        padding: 0;
    }
}

@media (max-width: 1023px) {
    #home .hero-video {
        object-fit: cover;
        object-position: center center;
        filter: brightness(0.58) contrast(1.08) saturate(0.95);
    }
}

/* ----------------------------------------
   HERO FINAL MERGED SCENE
   Video and copy live in one continuous cinematic surface.
   ---------------------------------------- */
@media (min-width: 1024px) {
    #home .hero-desktop-layout {
        position: relative !important;
        display: flex;
        flex-direction: row-reverse;
        isolation: isolate;
    }

    #home .hero-image-container {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh;
        z-index: 0;
        background: var(--bg-base);
    }

    #home .hero-image-container::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            radial-gradient(circle at 16% 62%, rgb(var(--c-accent) / 0.14), transparent 24rem),
            linear-gradient(90deg, rgb(var(--c-bg-base) / 0.24) 0%, rgb(var(--c-bg-base) / 0.5) 42%, rgb(var(--c-bg-base) / 0.93) 76%, rgb(var(--c-bg-base) / 0.98) 100%),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.76) 0%, rgb(var(--c-bg-base) / 0.1) 35%, rgb(var(--c-bg-base) / 0.86) 100%);
    }

    #home .hero-image-container > .absolute.inset-0:nth-child(n+2) {
        display: none;
    }

    #home .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 28% center;
        filter: brightness(0.82) contrast(1.08) saturate(1.02);
        z-index: 1;
    }

    #home .hero-content-container {
        width: 100% !important;
        min-height: 100vh;
        z-index: 3;
        background: transparent !important;
    }

    #home .hero-content-container::before {
        display: none !important;
    }

    #home .hero-content-inner {
        width: min(560px, 43vw);
        max-width: none;
        margin-right: clamp(4rem, 7vw, 7rem) !important;
        margin-left: auto !important;
        padding: 0;
        text-align: right;
    }

    #home .hero-heading-premium span {
        font-size: clamp(3.35rem, 4.85vw, 4.7rem);
        line-height: 1.12;
        text-shadow: 0 16px 42px rgb(var(--c-shadow) / 0.42);
    }

    #home .hero-description {
        max-width: 520px;
        color: rgb(var(--c-ink) / 0.84) !important;
    }

    #home .hero-credentials,
    #home .hero-cta,
    #home .hero-stats {
        position: relative;
        z-index: 4;
    }
}

#home [data-typewriter].is-typing::after {
    content: '';
    display: inline-block;
    width: 0.08em;
    height: 0.82em;
    margin-inline-start: 0.12em;
    background: var(--gvco-gold);
    vertical-align: -0.04em;
    animation: typeCaretBlink 0.82s steps(1, end) infinite;
}

@keyframes typeCaretBlink {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

@media (max-width: 1023px) {
    #home .hero-video {
        object-fit: cover;
        object-position: 34% center;
        filter: brightness(0.6) contrast(1.08) saturate(0.98);
    }
}

/* Keep the hero headline as one controlled phrase. */
#home .hero-heading-premium [data-typewriter] {
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

@media (min-width: 1024px) {
    #home .hero-content-inner {
        width: min(720px, 56vw);
    }

    #home .hero-heading-premium span {
        font-size: clamp(2.9rem, 4.25vw, 4.15rem);
    }
}

@media (max-width: 639px) {
    #home .hero-heading-premium [data-typewriter] {
        font-size: clamp(1.9rem, 8vw, 2.35rem) !important;
    }
}

/* Show the hero instantly while the remote video buffers. */
.loading {
    pointer-events: none;
}

.loading.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transition-duration: 0.01s;
}

#home .hero-video {
    opacity: 0;
    transition: opacity 0.45s ease;
}

#home .hero-video.is-ready {
    opacity: 1;
}

#home .hero-video + .hero-image,
#home .hero-video + img {
    z-index: 0;
    opacity: 1;
}

/* Mobile hero: apply the same cinematic video + typewriter direction. */
@media (max-width: 1023px) {
    #home {
        min-height: 100svh;
        isolation: isolate;
    }

    #home .lg\:hidden.min-h-screen {
        position: relative;
        min-height: 100svh;
        overflow: hidden;
        background: var(--bg-base);
    }

    #home .lg\:hidden > .absolute.inset-0 {
        z-index: 0;
        overflow: hidden;
        background: var(--bg-base);
    }

    #home .lg\:hidden > .absolute.inset-0::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background:
            radial-gradient(circle at 72% 24%, rgb(var(--c-accent) / 0.14), transparent 12rem),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.62) 0%, rgb(var(--c-bg-base) / 0.18) 34%, rgb(var(--c-bg-base) / 0.88) 74%, rgb(var(--c-bg-base) / 0.98) 100%),
            linear-gradient(90deg, rgb(var(--c-bg-base) / 0.18), rgb(var(--c-bg-base) / 0.52));
    }

    #home .lg\:hidden .hero-video {
        z-index: 1;
        object-fit: cover;
        object-position: 34% center;
        filter: brightness(0.78) contrast(1.1) saturate(1.02);
    }

    #home .lg\:hidden .hero-video + img {
        z-index: 0;
        object-position: 44% center;
        filter: brightness(0.62) contrast(1.08) saturate(0.98) !important;
    }

    #home .lg\:hidden > .relative.z-10 {
        z-index: 4;
        align-items: flex-end;
        min-height: 100svh;
        padding: 6.2rem 1.25rem 5.8rem;
    }

    #home .lg\:hidden > .relative.z-10 > div {
        max-width: 34rem;
        margin-inline: auto;
        text-align: right;
    }

    html[dir="ltr"] #home .lg\:hidden > .relative.z-10 > div {
        text-align: left;
    }

    #home .lg\:hidden .hero-metadata-premium {
        justify-content: flex-start;
        margin-bottom: 0.9rem;
    }

    #home .lg\:hidden .hero-heading-premium {
        margin-bottom: 0.9rem;
    }

    #home .lg\:hidden .hero-heading-premium [data-typewriter] {
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        color: var(--text-primary);
        font-size: clamp(2rem, 8.6vw, 3.15rem) !important;
        line-height: 1.16 !important;
        text-shadow: 0 14px 36px rgb(var(--c-shadow) / 0.55);
    }

    #home .lg\:hidden .hero-accent-bar {
        margin-inline-start: 0;
        margin-inline-end: auto;
        margin-bottom: 1.05rem;
    }

    html[dir="ltr"] #home .lg\:hidden .hero-accent-bar {
        margin-inline-start: 0;
        margin-inline-end: auto;
    }

    #home .lg\:hidden .hero-description {
        max-width: 24rem !important;
        margin-inline: 0 auto;
        color: rgb(var(--c-ink) / 0.84) !important;
        font-size: clamp(0.95rem, 3.5vw, 1.08rem) !important;
        line-height: 1.85 !important;
    }

    #home .lg\:hidden .hero-credentials,
    #home .lg\:hidden .hero-cta,
    #home .lg\:hidden .hero-stats {
        justify-content: flex-start;
    }

    #home .lg\:hidden .hero-cta {
        margin-bottom: 1.85rem !important;
    }

    #home .lg\:hidden .hero-stats {
        gap: clamp(1.1rem, 5vw, 2rem) !important;
    }
}

@media (max-width: 420px) {
    #home .lg\:hidden > .relative.z-10 {
        padding-inline: 1rem;
        padding-bottom: 5.4rem;
    }

    #home .lg\:hidden .hero-heading-premium [data-typewriter] {
        font-size: clamp(1.74rem, 7.6vw, 2.25rem) !important;
    }

    #home .lg\:hidden .hero-description {
        max-width: 21rem !important;
    }

    #home .lg\:hidden .hero-cta {
        gap: 0.65rem !important;
    }
}

/* ========================================
   Golden Vision AI Assistant
   ======================================== */

.ai-bot {
    position: fixed;
    left: clamp(1rem, 2.2vw, 1.75rem);
    bottom: clamp(1rem, 2.2vw, 1.75rem);
    z-index: 80;
    direction: inherit;
}

.ai-bot-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    padding: 0.7rem 1rem 0.7rem 0.75rem;
    border: 1px solid rgb(var(--c-accent) / 0.44);
    border-radius: 999px;
    color: var(--text-primary);
    background:
        linear-gradient(135deg, rgb(var(--c-blue-light) / 0.96), rgb(var(--c-bg-base) / 0.96)),
        rgb(var(--c-bg-base) / 0.92);
    box-shadow: 0 18px 45px rgb(var(--c-shadow) / 0.36), 0 0 0 1px rgb(var(--c-ink) / 0.04) inset;
    backdrop-filter: blur(18px);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-bot-toggle:hover {
    transform: translateY(-2px);
    border-color: rgb(var(--c-accent) / 0.72);
    box-shadow: 0 22px 55px rgb(var(--c-shadow) / 0.42), 0 0 26px rgb(var(--c-accent) / 0.14);
}

.ai-bot-toggle-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--gvco-gold-light);
    background: rgb(var(--c-ink) / 0.08);
}

.ai-bot-toggle-icon svg,
.ai-bot-close svg,
.ai-bot-form button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.ai-bot-toggle-text {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.ai-bot-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.85rem);
    width: min(390px, calc(100vw - 2rem));
    max-height: min(620px, calc(100vh - 7rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgb(var(--c-ink) / 0.12);
    border-radius: 0.85rem;
    background:
        linear-gradient(180deg, rgb(var(--c-bg-base) / 0.96), rgb(var(--c-bg-base) / 0.98)),
        rgb(var(--c-bg-base) / 0.96);
    box-shadow: 0 28px 80px rgb(var(--c-shadow) / 0.48);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem) scale(0.98);
    transform-origin: bottom left;
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}

.ai-bot.is-open .ai-bot-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ai-bot-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.15rem 0.95rem;
    border-bottom: 1px solid rgb(var(--c-ink) / 0.08);
}

.ai-bot-kicker {
    color: var(--gvco-gold-light);
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.ai-bot-header h3 {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
}

.ai-bot-close {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.45rem;
    color: rgb(var(--c-ink) / 0.72);
    background: rgb(var(--c-ink) / 0.06);
    transition: color 0.2s ease, background 0.2s ease;
}

.ai-bot-close:hover {
    color: var(--text-primary);
    background: rgb(var(--c-ink) / 0.11);
}

.ai-bot-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.95rem 1.15rem 0;
}

.ai-bot-prompts button {
    min-height: 2.05rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgb(var(--c-accent) / 0.22);
    border-radius: 999px;
    color: rgb(var(--c-ink) / 0.82);
    background: rgb(var(--c-accent) / 0.08);
    font-size: 0.78rem;
    font-weight: 700;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ai-bot-prompts button:hover {
    color: var(--text-primary);
    border-color: rgb(var(--c-accent) / 0.48);
    background: rgb(var(--c-accent) / 0.13);
}

.ai-bot-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 220px;
    overflow-y: auto;
    padding: 1rem 1.15rem;
}

.ai-bot-message {
    max-width: 86%;
    padding: 0.78rem 0.9rem;
    border-radius: 0.75rem;
    color: rgb(var(--c-ink) / 0.88);
    font-size: 0.9rem;
    line-height: 1.65;
}

.ai-bot-message.is-assistant {
    align-self: flex-start;
    background: rgb(var(--c-ink) / 0.065);
    border: 1px solid rgb(var(--c-ink) / 0.08);
}

.ai-bot-message.is-user {
    align-self: flex-end;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgb(var(--c-blue-light) / 0.95), rgba(47, 112, 189, 0.95));
}

.ai-bot-action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.45rem;
    color: var(--bg-raised);
    background: var(--gvco-gold-light);
    font-size: 0.82rem;
    font-weight: 800;
}

.ai-bot-form {
    display: flex;
    gap: 0.55rem;
    padding: 0.9rem;
    border-top: 1px solid rgb(var(--c-ink) / 0.08);
    background: rgb(var(--c-shadow) / 0.14);
}

.ai-bot-form input {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 0.9rem;
    border: 1px solid rgb(var(--c-ink) / 0.12);
    border-radius: 0.55rem;
    color: var(--text-primary);
    background: rgb(var(--c-ink) / 0.06);
    font-size: 0.9rem;
    outline: none;
}

.ai-bot-form input::placeholder {
    color: rgb(var(--c-ink) / 0.45);
}

.ai-bot-form input:focus {
    border-color: rgba(59, 130, 214, 0.72);
    box-shadow: 0 0 0 3px rgba(59, 130, 214, 0.16);
}

.ai-bot-form button {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    color: var(--text-primary);
    background: var(--gvco-blue);
    transition: background 0.2s ease, transform 0.2s ease;
}

.ai-bot-form button:hover {
    background: var(--gvco-blue-light);
    transform: translateY(-1px);
}

html[dir="rtl"] .ai-bot {
    left: auto;
    right: clamp(1rem, 2.2vw, 1.75rem);
}

html[dir="rtl"] .ai-bot-panel {
    left: auto;
    right: 0;
    transform-origin: bottom right;
}

html[dir="rtl"] .ai-bot-message.is-assistant,
html[dir="rtl"] .ai-bot-action {
    align-self: flex-start;
}

html[dir="rtl"] .ai-bot-message.is-user {
    align-self: flex-end;
}

html[dir="ltr"] .ai-bot-message.is-assistant,
html[dir="ltr"] .ai-bot-action {
    align-self: flex-start;
}

html[dir="ltr"] .ai-bot-message.is-user {
    align-self: flex-end;
}

@media (max-width: 639px) {
    .ai-bot {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
    }

    html[dir="rtl"] .ai-bot {
        right: 0.75rem;
        left: 0.75rem;
    }

    .ai-bot-toggle {
        margin-inline-start: auto;
        min-height: 3rem;
        padding: 0.65rem 0.85rem;
    }

    .ai-bot-panel {
        width: 100%;
        max-height: calc(100vh - 5.75rem);
        border-radius: 0.75rem;
    }

    .ai-bot-messages {
        min-height: 190px;
    }
}

/* Compact final assistant pass. Keeps the widget from overpowering the hero. */
.ai-bot {
    font-size: 16px;
}

.ai-bot-panel {
    position: fixed !important;
    right: clamp(0.75rem, 2.2vw, 1.75rem);
    left: auto !important;
    bottom: 5.2rem;
    width: min(360px, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem) !important;
    max-height: min(500px, calc(100vh - 6rem));
}

html[dir="rtl"] .ai-bot-panel {
    right: clamp(0.75rem, 2.2vw, 1.75rem) !important;
    left: auto !important;
}

html[dir="ltr"] .ai-bot-panel {
    right: auto;
    left: clamp(0.75rem, 2.2vw, 1.75rem) !important;
}

.ai-bot-header {
    align-items: center;
    padding: 0.9rem 0.95rem 0.75rem;
}

.ai-bot-kicker {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
}

.ai-bot-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem !important;
    font-weight: 800;
    line-height: 1.35 !important;
    letter-spacing: 0;
}

.ai-bot-prompts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.8rem 0.95rem 0;
}

.ai-bot-prompts button {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.6rem;
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    white-space: nowrap;
}

.ai-bot-messages {
    min-height: 155px;
    padding: 0.8rem 0.95rem;
}

.ai-bot-message {
    width: fit-content;
    max-width: 100%;
    padding: 0.7rem 0.8rem;
    font-size: 0.86rem !important;
    line-height: 1.7 !important;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.ai-bot-message.is-assistant {
    align-self: stretch;
    width: 100%;
}

.ai-bot-message.is-user {
    max-width: 88%;
}

.ai-bot-form {
    padding: 0.75rem;
}

.ai-bot-form input {
    min-height: 2.55rem;
    font-size: 0.86rem !important;
}

.ai-bot-form button {
    width: 2.55rem;
    height: 2.55rem;
}

.ai-bot-toggle {
    min-height: 3rem;
    padding: 0.62rem 0.9rem 0.62rem 0.68rem;
}

.ai-bot-toggle-text {
    font-size: 0.88rem !important;
}

@media (max-width: 900px) {
    .ai-bot {
        right: 0.75rem;
        left: auto;
        bottom: 0.9rem;
    }

    html[dir="rtl"] .ai-bot {
        right: 0.75rem;
        left: auto;
    }

    .ai-bot-panel {
        right: 0.75rem;
        left: auto !important;
        width: min(330px, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem) !important;
        max-height: min(470px, calc(100vh - 5.5rem));
    }

    html[dir="ltr"] .ai-bot-panel {
        left: 0.75rem !important;
        right: auto;
    }

    html[dir="rtl"] .ai-bot-panel {
        right: 0.75rem !important;
        left: auto !important;
    }
}

@media (max-width: 420px) {
    .ai-bot,
    html[dir="rtl"] .ai-bot {
        right: 0.65rem;
        left: 0.65rem;
    }

    .ai-bot-panel {
        right: 0.65rem;
        left: 0.65rem !important;
        width: auto;
        max-width: calc(100vw - 1.3rem) !important;
    }

    html[dir="rtl"] .ai-bot-panel,
    html[dir="ltr"] .ai-bot-panel {
        right: 0.65rem !important;
        left: 0.65rem !important;
    }

    .ai-bot-toggle {
        margin-inline-start: auto;
    }
}

/* Direct WhatsApp contact */
.whatsapp-direct {
    position: fixed;
    left: clamp(1rem, 2.2vw, 1.75rem);
    bottom: clamp(1rem, 2.2vw, 1.75rem);
    z-index: 79;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.62rem 0.95rem;
    color: var(--text-primary);
    background: linear-gradient(135deg, #128c4a, #075e36);
    border: 1px solid rgb(var(--c-ink) / 0.16);
    border-radius: 999px;
    box-shadow: 0 18px 45px rgb(var(--c-shadow) / 0.34), 0 0 0 1px rgb(var(--c-ink) / 0.06) inset;
    backdrop-filter: blur(14px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.whatsapp-direct:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 22px 55px rgb(var(--c-shadow) / 0.42), 0 0 24px rgba(18, 140, 74, 0.24);
}

.whatsapp-direct-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgb(var(--c-ink) / 0.12);
}

.whatsapp-direct-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.whatsapp-direct-text {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
}

html[dir="ltr"] .whatsapp-direct {
    right: clamp(1rem, 2.2vw, 1.75rem);
    left: auto;
}

@media (max-width: 900px) {
    .whatsapp-direct {
        left: 0.75rem;
        bottom: 0.9rem;
        min-width: 3rem;
        width: 3rem;
        height: 3rem;
        justify-content: center;
        padding: 0;
    }

    html[dir="ltr"] .whatsapp-direct {
        right: 0.75rem;
        left: auto;
    }

    .whatsapp-direct-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .whatsapp-direct {
        left: 0.65rem;
        bottom: 0.9rem;
    }

    html[dir="ltr"] .whatsapp-direct {
        right: 0.65rem;
        left: auto;
    }
}

/* ========================================
   Service Detail Pages
   ======================================== */

.service-detail-page {
    background:
        radial-gradient(circle at 82% 8%, rgb(var(--c-blue-light) / 0.14), transparent 34rem),
        linear-gradient(180deg, var(--bg-base) 0%, var(--bg-raised) 48%, var(--bg-base) 100%);
}

.service-detail-container {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.service-detail-hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    padding: 8rem 0 5rem;
    background: var(--bg-base);
}

.service-detail-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.service-detail-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.72) contrast(1.08) saturate(0.95);
}

.service-detail-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    filter: brightness(0.74) contrast(1.1) saturate(1.02);
    transition: opacity 0.45s ease;
}

.service-detail-video.is-ready {
    opacity: 1;
}

.service-detail-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 20% 64%, rgb(var(--c-accent) / 0.16), transparent 25rem),
        linear-gradient(90deg, rgb(var(--c-bg-base) / 0.98) 0%, rgb(var(--c-bg-base) / 0.82) 44%, rgb(var(--c-bg-base) / 0.28) 100%),
        linear-gradient(180deg, rgb(var(--c-bg-base) / 0.62), rgb(var(--c-bg-base) / 0.88));
}

html[dir="ltr"] .service-detail-overlay {
    background:
        radial-gradient(circle at 80% 64%, rgb(var(--c-accent) / 0.16), transparent 25rem),
        linear-gradient(270deg, rgb(var(--c-bg-base) / 0.98) 0%, rgb(var(--c-bg-base) / 0.82) 44%, rgb(var(--c-bg-base) / 0.28) 100%),
        linear-gradient(180deg, rgb(var(--c-bg-base) / 0.62), rgb(var(--c-bg-base) / 0.88));
}

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

.service-detail-copy {
    width: min(720px, 100%);
}

.service-breadcrumb {
    display: inline-flex;
    margin-bottom: 1.5rem;
    color: rgb(var(--c-ink) / 0.64);
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.service-breadcrumb:hover {
    color: var(--text-primary);
}

.service-detail-copy h1 {
    color: var(--text-primary);
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1.08;
    font-weight: 900;
    margin-bottom: 1.5rem;
    letter-spacing: 0;
}

.service-detail-lead {
    max-width: 620px;
    color: rgb(var(--c-ink) / 0.82);
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    line-height: 1.9;
    margin-bottom: 2rem;
}

.service-detail-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.service-detail-section {
    padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.service-detail-band {
    background:
        radial-gradient(circle at 22% 50%, rgb(var(--c-blue-light) / 0.14), transparent 28rem),
        rgb(var(--c-ink) / 0.025);
    border-block: 1px solid rgb(var(--c-ink) / 0.06);
}

.service-detail-grid,
.service-detail-split {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.service-detail-heading {
    color: var(--text-primary);
    font-size: clamp(2rem, 4.2vw, 3.7rem);
    line-height: 1.14;
    font-weight: 850;
    letter-spacing: 0;
}

.service-detail-richtext {
    color: rgb(var(--c-ink) / 0.78);
    font-size: 1.05rem;
    line-height: 1.95;
}

.service-detail-richtext p + p {
    margin-top: 1.25rem;
}

.service-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.service-detail-card {
    min-height: 250px;
    padding: 1.65rem;
    border: 1px solid rgb(var(--c-ink) / 0.1);
    border-radius: 0.55rem;
    background: linear-gradient(160deg, rgb(var(--c-bg-base) / 0.84), rgb(var(--c-bg-base) / 0.92));
}

.service-detail-card span {
    display: inline-flex;
    color: var(--gvco-gold-light);
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 1.4rem;
}

.service-detail-card h3 {
    color: var(--text-primary);
    font-size: 1.28rem;
    font-weight: 800;
    margin-bottom: 0.85rem;
}

.service-detail-card p {
    color: rgb(var(--c-ink) / 0.72);
    line-height: 1.8;
}

.service-list-panel,
.quote-checklist {
    display: grid;
    gap: 0.7rem;
}

.service-list-panel div,
.quote-checklist div {
    position: relative;
    padding: 1rem 1.15rem;
    border: 1px solid rgb(var(--c-ink) / 0.1);
    border-radius: 0.5rem;
    color: rgb(var(--c-ink) / 0.84);
    background: rgb(var(--c-ink) / 0.045);
}

.service-list-panel div::before,
.quote-checklist div::before {
    content: '';
    display: inline-block;
    width: 0.46rem;
    height: 0.46rem;
    margin-inline-end: 0.65rem;
    border-radius: 999px;
    background: var(--gvco-gold);
    vertical-align: 0.08em;
}

.service-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(2rem, 4vw, 3rem);
    border: 1px solid rgb(var(--c-ink) / 0.09);
    background: rgb(var(--c-ink) / 0.09);
}

.service-related-link {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1.15rem;
    color: var(--text-primary);
    background: rgb(var(--c-bg-base) / 0.98);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.service-related-link:hover {
    color: var(--gvco-gold-light);
    background: rgb(var(--c-bg-raised) / 0.98);
}

.service-related-link span {
    color: rgb(var(--c-accent) / 0.76);
    font-size: 0.72rem;
    font-weight: 800;
}

.service-related-link strong {
    color: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.45;
}

.service-detail-gallery {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    grid-template-rows: repeat(2, minmax(190px, 1fr));
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.service-detail-gallery figure {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid rgb(var(--c-ink) / 0.1);
    border-radius: 0.65rem;
    background: var(--bg-raised);
}

.service-detail-gallery figure.is-large {
    grid-row: span 2;
}

.service-detail-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.82) contrast(1.08) saturate(0.96);
    transition: transform 0.45s ease, filter 0.45s ease;
}

.service-detail-gallery figure:hover img {
    transform: scale(1.035);
    filter: brightness(0.92) contrast(1.08) saturate(1.02);
}

.service-detail-gallery figcaption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    width: fit-content;
    max-width: calc(100% - 2rem);
    padding: 0.55rem 0.75rem;
    border: 1px solid rgb(var(--c-accent) / 0.24);
    border-radius: 0.45rem;
    color: rgb(var(--c-ink) / 0.88);
    background: rgb(var(--c-bg-base) / 0.78);
    backdrop-filter: blur(12px);
    font-size: 0.82rem;
    font-weight: 800;
}

html[dir="ltr"] .service-detail-gallery figcaption {
    right: auto;
}

.service-detail-cta {
    padding: 0 0 clamp(5rem, 8vw, 7rem);
}

.service-cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.6rem, 4vw, 3rem);
    border: 1px solid rgb(var(--c-accent) / 0.22);
    border-radius: 0.7rem;
    background:
        radial-gradient(circle at 18% 50%, rgb(var(--c-accent) / 0.14), transparent 22rem),
        linear-gradient(135deg, rgb(var(--c-bg-base) / 0.94), rgb(var(--c-bg-base) / 0.98));
}

.service-cta-panel h2 {
    color: var(--text-primary);
    font-size: clamp(1.75rem, 3vw, 2.8rem);
    font-weight: 850;
    line-height: 1.18;
    margin-bottom: 0.8rem;
}

.service-cta-panel p {
    max-width: 620px;
    color: rgb(var(--c-ink) / 0.72);
    line-height: 1.85;
}

.service-card-link {
    color: var(--gvco-gold-light);
    font-size: 0.9rem;
    font-weight: 800;
}

.service-card-link::after {
    content: '→';
    display: inline-block;
    transform: scaleX(-1);
}

html[dir="ltr"] .service-card-link::after {
    transform: none;
}

@media (max-width: 1023px) {
    .service-detail-hero {
        min-height: 78vh;
        padding: 7rem 0 4rem;
    }

    .service-detail-grid,
    .service-detail-split,
    .service-capability-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

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

    .service-detail-gallery figure,
    .service-detail-gallery figure.is-large {
        grid-row: auto;
        min-height: 260px;
    }

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

@media (max-width: 639px) {
    .service-detail-container {
        width: min(100% - 1.5rem, 1180px);
    }

    .service-detail-hero {
        min-height: 82svh;
        padding: 6.4rem 0 3.5rem;
    }

    .service-detail-overlay,
    html[dir="ltr"] .service-detail-overlay {
        background:
            radial-gradient(circle at 70% 22%, rgb(var(--c-accent) / 0.13), transparent 13rem),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.58), rgb(var(--c-bg-base) / 0.94));
    }

    .service-detail-copy h1 {
        font-size: clamp(2.3rem, 12vw, 3.6rem);
    }

    .service-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .service-detail-actions .hero-btn-primary,
    .service-detail-actions .hero-btn-secondary {
        justify-content: center;
        width: 100%;
    }

    .service-detail-card {
        min-height: auto;
    }

    .service-related-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-gallery figure {
        min-height: 220px;
    }
}

/* Contact form polish */
#contact .contact-form-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem !important;
    border-color: rgb(var(--c-ink) / 0.11);
    background:
        linear-gradient(145deg, rgb(var(--c-bg-raised) / 0.96), rgb(var(--c-bg-base) / 0.98)),
        radial-gradient(circle at 16% 0%, rgb(var(--c-blue-light) / 0.16), transparent 18rem);
}

#contact .contact-form-wrapper::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gvco-blue-light), var(--gvco-gold), transparent);
    pointer-events: none;
}

#contact .form-input {
    min-height: 4.15rem;
    border-radius: 0.55rem;
    border-color: rgb(var(--c-ink) / 0.14);
    background: rgb(var(--c-ink) / 0.07);
}

#contact textarea.form-input {
    min-height: 10.25rem;
    line-height: 1.8;
}

#contact .form-input:hover {
    border-color: rgb(var(--c-ink) / 0.24);
    background: rgb(var(--c-ink) / 0.085);
}

#contact .form-input:focus {
    border-color: rgb(var(--c-blue-light) / 0.9);
    background: rgb(var(--c-ink) / 0.095);
    box-shadow:
        0 0 0 4px rgb(var(--c-blue-light) / 0.16),
        0 14px 30px rgb(var(--c-shadow) / 0.16);
}

#contact .contact-form-head,
#contact .contact-form-note,
#contact #contactForm,
#contact .contact-form-wrapper h3 {
    position: relative;
    z-index: 1;
}

@media (max-width: 639px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-grid .contact-info-card:first-child {
        grid-column: auto;
    }

    .contact-info-card {
        padding: 1.1rem;
    }

    #contact .contact-form-wrapper {
        padding: 1.35rem;
    }

    #contact .contact-form-head {
        margin-bottom: 1.5rem;
        padding-bottom: 1.15rem;
    }

    #contact .form-input {
        min-height: 3.85rem;
    }

    #contact textarea.form-input {
        min-height: 9rem;
    }

    #contact .contact-form-note {
        align-items: flex-start;
    }
}

/* ========================================
   Official Corporate Pass - Final Cascade
   Keep this block last so the institutional layout wins.
   ======================================== */

#navbar {
    background: rgb(var(--c-bg-base) / 0.94) !important;
    border-bottom: 1px solid rgb(var(--c-ink) / 0.08) !important;
}

#navbar .h-\[80px\] {
    height: 78px !important;
}

#navbar .site-logo,
#navbar img[alt="Golden Vision Metal Industry Factory Logo"] {
    height: 54px !important;
}

.nav-link-clean {
    font-size: 0.9rem !important;
    color: rgb(var(--c-ink) / 0.78) !important;
}

.nav-btn-quote,
.hero-btn-primary,
.hero-btn-secondary,
.btn-primary,
.btn-secondary {
    border-radius: 0.25rem !important;
}

#home .hero-video {
    display: none !important;
}

@media (min-width: 1024px) {
    #home,
    #home .hero-desktop-layout,
    #home .hero-content-container {
        min-height: 92vh !important;
    }

    #home .hero-image-container {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 92vh !important;
        background: var(--bg-base) !important;
    }

    #home .hero-image-container .hero-image {
        object-position: center center !important;
        filter: brightness(0.82) contrast(1.06) saturate(0.98) !important;
        z-index: 0 !important;
    }

    #home .hero-image-container > div:nth-child(n+2) {
        display: none !important;
    }

    #home .hero-image-container::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(90deg, rgb(var(--c-bg-base) / 0.06) 0%, rgb(var(--c-bg-base) / 0.42) 40%, rgb(var(--c-bg-base) / 0.92) 78%, rgb(var(--c-bg-base) / 0.98) 100%),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.54) 0%, rgb(var(--c-bg-base) / 0.05) 38%, rgb(var(--c-bg-base) / 0.88) 100%);
    }

    html[dir="ltr"] #home .hero-image-container::after {
        background:
            linear-gradient(270deg, rgb(var(--c-bg-base) / 0.06) 0%, rgb(var(--c-bg-base) / 0.42) 40%, rgb(var(--c-bg-base) / 0.92) 78%, rgb(var(--c-bg-base) / 0.98) 100%),
            linear-gradient(180deg, rgb(var(--c-bg-base) / 0.54) 0%, rgb(var(--c-bg-base) / 0.05) 38%, rgb(var(--c-bg-base) / 0.88) 100%);
    }

    #home .hero-content-container {
        width: 100% !important;
        background: transparent !important;
        z-index: 3 !important;
    }

    #home .hero-content-container::before {
        display: none !important;
    }

    #home .hero-content-inner {
        width: min(640px, 48vw) !important;
        margin-right: clamp(4rem, 7vw, 7.5rem) !important;
        margin-left: auto !important;
        padding: 0 !important;
        text-align: right !important;
    }

    html[dir="ltr"] #home .hero-content-inner {
        margin-left: clamp(4rem, 7vw, 7.5rem) !important;
        margin-right: auto !important;
        text-align: left !important;
    }

    #home .hero-heading-premium [data-typewriter] {
        white-space: normal !important;
        max-width: 12ch !important;
    }

    #home .hero-heading-premium span {
        font-size: clamp(3.1rem, 4.8vw, 4.85rem) !important;
        line-height: 1.08 !important;
        font-weight: 800 !important;
    }

    #home .hero-description {
        max-width: 560px !important;
        color: rgb(var(--c-ink) / 0.84) !important;
        font-size: 1.1rem !important;
    }

    #home .hero-stats {
        width: min(610px, 100%) !important;
        padding-top: 1.35rem !important;
        border-top: 1px solid rgb(var(--c-ink) / 0.14) !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 1023px) {
    #home .lg\:hidden .hero-video + img {
        object-position: center center !important;
        filter: brightness(0.54) contrast(1.05) saturate(0.98) !important;
    }
}

.logo-marquee-container {
    display: none !important;
}

.official-client-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: rgb(var(--c-ink) / 0.08);
    border: 1px solid rgb(var(--c-ink) / 0.08);
    margin-top: 2.5rem;
}

.official-client-item {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.35rem;
    background: rgb(var(--c-ink) / 0.965);
}

.official-client-item img {
    max-width: 150px;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.facility-gallery-secondary {
    display: none !important;
}

#gallery .mt-16.grid {
    margin-top: 2rem !important;
}

#gallery .mt-16.grid > div {
    border-radius: 0.25rem !important;
    background: rgb(var(--c-ink) / 0.035) !important;
    border-color: rgb(var(--c-ink) / 0.09) !important;
}

#clients,
#gallery,
#contact {
    background: var(--bg-base) !important;
}

.section-divider {
    display: none !important;
}

.trust-indicators {
    border-radius: 0 !important;
    background: rgb(var(--c-ink) / 0.035) !important;
    border-color: rgb(var(--c-ink) / 0.09) !important;
}

@media (max-width: 1023px) {
    .official-client-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .official-client-item {
        min-height: 96px;
        padding: 1rem;
    }

    .official-client-item img {
        max-width: 124px;
        max-height: 48px;
    }
}

@media (max-width: 639px) {
    .official-client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #home .hero-heading-premium [data-typewriter] {
        white-space: normal !important;
        max-width: 11ch !important;
    }
}

/* Restore hero video while keeping the factory image as fallback. */
#home .hero-video {
    display: block !important;
    opacity: 0;
    z-index: 1 !important;
}

#home .hero-video.is-ready {
    opacity: 1 !important;
}

#home .hero-video + .hero-image,
#home .hero-video + img {
    z-index: 0 !important;
    opacity: 1;
}

/* Source clip is landscape 1920x1080. The old 28%/34% offsets framed the
   earlier portrait footage and would push a landscape source off-centre, so
   both axes are centred and the crop is left to object-fit. */
@media (min-width: 1024px) {
    #home .hero-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        filter: brightness(0.78) contrast(1.08) saturate(0.98) !important;
    }
}

@media (max-width: 1023px) {
    #home .lg\:hidden .hero-video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        filter: brightness(0.6) contrast(1.08) saturate(0.98) !important;
    }
}

/* ----------------------------------------
   HERO: two-clip alternating background
   Both clips occupy the same slot and crossfade via .is-active. The 700ms
   opacity transition is inherited from `.hero .hero-video` further down.

   These selectors carry #id + 3 classes deliberately, so they outrank
   `#home .hero-video.is-ready { opacity: 1 !important }` above — otherwise
   `is-ready` lights up both clips at once and the second permanently covers
   the first.
   ---------------------------------------- */
#home .hero-media .hero-clip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#home .hero-video.hero-clip:not(.is-active) {
    opacity: 0 !important;
}

#home .hero-video.hero-clip.is-active {
    opacity: 1 !important;
}

/* Corporate overview strip */
.official-overview {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    background: var(--bg-base);
    border-top: 1px solid rgb(var(--c-ink) / 0.08);
    border-bottom: 1px solid rgb(var(--c-ink) / 0.08);
}

.official-overview::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgb(var(--c-blue-light) / 0.12), transparent 34%),
        linear-gradient(180deg, rgb(var(--c-ink) / 0.035), transparent 52%);
}

html[dir="ltr"] .official-overview::before {
    background:
        linear-gradient(270deg, rgb(var(--c-blue-light) / 0.12), transparent 34%),
        linear-gradient(180deg, rgb(var(--c-ink) / 0.035), transparent 52%);
}

.official-overview-header {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.official-overview-title {
    max-width: 760px;
    color: var(--text-primary);
    font-size: clamp(1.8rem, 3vw, 2.85rem);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: 0;
}

.official-overview-lead {
    color: rgb(var(--c-ink) / 0.66);
    font-size: 1rem;
    line-height: 1.95;
    margin: 0;
}

.official-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgb(var(--c-ink) / 0.09);
    border: 1px solid rgb(var(--c-ink) / 0.09);
}

.official-overview-item {
    min-height: 220px;
    padding: clamp(1.4rem, 2vw, 1.8rem);
    background: rgb(var(--c-bg-base) / 0.98);
}

.official-overview-index {
    display: block;
    color: rgb(var(--c-accent) / 0.72);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 1.1rem;
}

.official-overview-item h3 {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 0.9rem;
}

.official-overview-item p {
    color: rgb(var(--c-ink) / 0.62);
    font-size: 0.95rem;
    line-height: 1.85;
    margin: 0;
}

#about .industrial-image-card img {
    object-position: center center;
    filter: brightness(0.72) contrast(1.06) saturate(0.98);
}

#about .premium-badge {
    direction: ltr;
}

/* Defense products section */
.defense-products-section {
    position: relative;
}

.defense-products-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgb(var(--c-blue) / 0.14), transparent 38%),
        radial-gradient(circle at 18% 28%, rgb(var(--c-accent) / 0.08), transparent 32%);
}

html[dir="ltr"] .defense-products-section::before {
    background:
        linear-gradient(225deg, rgb(var(--c-blue) / 0.14), transparent 38%),
        radial-gradient(circle at 82% 28%, rgb(var(--c-accent) / 0.08), transparent 32%);
}

.defense-heading-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.72fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
}

.defense-heading-grid .section-subheadline {
    max-width: 620px;
    margin: 0;
}

.defense-products-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
}

.defense-visual {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgb(var(--c-ink) / 0.1);
    border-radius: 0.5rem;
    background: rgb(var(--c-bg-base) / 0.95);
}

.defense-visual img {
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.62) contrast(1.08) saturate(0.96);
}

.defense-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgb(var(--c-bg-base) / 0.05), rgb(var(--c-bg-base) / 0.66)),
        linear-gradient(90deg, rgb(var(--c-bg-base) / 0.78), transparent 62%);
}

html[dir="ltr"] .defense-visual::after {
    background:
        linear-gradient(180deg, rgb(var(--c-bg-base) / 0.05), rgb(var(--c-bg-base) / 0.66)),
        linear-gradient(270deg, rgb(var(--c-bg-base) / 0.78), transparent 62%);
}

.defense-visual-panel {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 2;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgb(var(--c-ink) / 0.12);
    border-radius: 0.5rem;
    background: rgb(var(--c-bg-base) / 0.76);
    backdrop-filter: blur(14px);
}

.defense-visual-panel span {
    display: block;
    color: rgb(var(--c-accent) / 0.82);
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.defense-visual-panel strong {
    display: block;
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.35;
}

.defense-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    align-self: stretch;
    border: 1px solid rgb(var(--c-ink) / 0.09);
    background: rgb(var(--c-ink) / 0.09);
}

.defense-product-card {
    min-height: 206px;
    padding: clamp(1.25rem, 2vw, 1.7rem);
    background:
        linear-gradient(145deg, rgb(var(--c-bg-raised) / 0.96), rgb(var(--c-bg-base) / 0.98));
}

.defense-product-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.3rem;
    height: 2.1rem;
    margin-bottom: 1.1rem;
    color: rgb(var(--c-accent) / 0.88);
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid rgb(var(--c-accent) / 0.24);
    border-radius: 0.35rem;
    background: rgb(var(--c-accent) / 0.08);
}

.defense-product-card h3 {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}

.defense-product-card p {
    color: rgb(var(--c-ink) / 0.58);
    font-size: 0.92rem;
    line-height: 1.8;
    margin: 0;
}

.defense-assurance-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 1px;
    align-items: stretch;
    margin-top: 1.5rem;
    border: 1px solid rgb(var(--c-ink) / 0.09);
    background: rgb(var(--c-ink) / 0.09);
}

.defense-assurance-bar > div,
.defense-assurance-bar > a {
    background: rgb(var(--c-bg-base) / 0.98);
}

.defense-assurance-bar > div {
    padding: 1.15rem 1.25rem;
}

.defense-assurance-bar strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.defense-assurance-bar span {
    display: block;
    color: rgb(var(--c-ink) / 0.52);
    font-size: 0.84rem;
    line-height: 1.6;
}

.defense-assurance-bar > a {
    min-width: 240px;
    justify-content: center;
    border-radius: 0;
}

@media (max-width: 1023px) {
    .official-overview-header {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: start;
    }

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

    .official-overview-item {
        min-height: 190px;
    }

    .defense-heading-grid,
    .defense-products-layout,
    .defense-assurance-bar {
        grid-template-columns: 1fr;
    }

    .defense-visual,
    .defense-visual img {
        min-height: 430px;
    }

    .defense-assurance-bar > a {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 639px) {
    .official-overview {
        padding: 3rem 0;
    }

    .official-overview-grid {
        grid-template-columns: 1fr;
    }

    .official-overview-item {
        min-height: auto;
    }

    .defense-product-grid {
        grid-template-columns: 1fr;
    }

    .defense-product-card {
        min-height: auto;
    }

    .defense-visual,
    .defense-visual img {
        min-height: 330px;
    }

    .defense-visual-panel {
        right: 0.9rem;
        bottom: 0.9rem;
        left: 0.9rem;
        padding: 1rem;
    }
}

/* Company catalog section */
.catalog-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.55fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

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

.catalog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 2rem;
}

.catalog-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    max-width: 620px;
    border: 1px solid rgb(var(--c-ink) / 0.09);
    background: rgb(var(--c-ink) / 0.09);
}

.catalog-meta div {
    padding: 1rem;
    background: rgb(var(--c-bg-base) / 0.98);
}

.catalog-meta strong {
    display: block;
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.45rem;
}

.catalog-meta span {
    color: rgb(var(--c-ink) / 0.56);
    font-size: 0.86rem;
    line-height: 1.5;
}

.catalog-feature {
    position: relative;
    max-width: 420px;
    justify-self: end;
    padding: 0.65rem;
    border: 1px solid rgb(var(--c-ink) / 0.1);
    background:
        linear-gradient(145deg, rgb(var(--c-ink) / 0.09), rgb(var(--c-ink) / 0.025)),
        rgb(var(--c-bg-base) / 0.9);
    box-shadow: 0 30px 80px rgb(var(--c-shadow) / 0.34);
}

.catalog-feature::before {
    content: '';
    position: absolute;
    inset: 0.65rem;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgb(var(--c-ink) / 0.08);
    z-index: 2;
}

.catalog-feature img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4.5;
    object-fit: cover;
    object-position: top center;
}

.catalog-page-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.catalog-page-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 230px;
    border: 1px solid rgb(var(--c-ink) / 0.09);
    background: rgb(var(--c-ink) / 0.035);
}

.catalog-page-card img {
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
    object-position: top center;
    filter: brightness(0.92) contrast(1.03);
    transition: transform 0.35s ease, filter 0.35s ease;
}

.catalog-page-card span {
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    z-index: 2;
    padding: 0.4rem 0.65rem;
    color: rgb(var(--c-ink) / 0.88);
    font-size: 0.78rem;
    font-weight: 700;
    background: rgb(var(--c-bg-base) / 0.78);
    border: 1px solid rgb(var(--c-ink) / 0.1);
    backdrop-filter: blur(8px);
}

html[dir="ltr"] .catalog-page-card span {
    right: auto;
    left: 0.8rem;
}

.catalog-page-card:hover img {
    transform: scale(1.025);
    filter: brightness(1) contrast(1.04);
}

@media (max-width: 1199px) {
    .catalog-page-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .catalog-feature {
        justify-self: start;
        max-width: min(420px, 100%);
    }
}

@media (max-width: 639px) {
    .catalog-actions {
        align-items: stretch;
    }

    .catalog-actions .btn-primary,
    .catalog-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .catalog-meta {
        grid-template-columns: 1fr;
    }

    .catalog-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .catalog-page-card,
    .catalog-page-card img {
        min-height: 190px;
    }
}

/* Quote request form enhancements */
.quote-form {
    position: relative;
}

.quote-file-field {
    position: relative;
}

.quote-file-drop {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 112px;
    padding: 1.25rem;
    cursor: pointer;
    background: rgb(var(--c-ink) / 0.055);
    border: 1px dashed rgb(var(--c-ink) / 0.22);
    border-radius: 0.5rem;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.quote-file-drop:hover,
.quote-file-field.is-focused .quote-file-drop,
.quote-file-field.is-dragging .quote-file-drop,
.quote-file-field.has-files .quote-file-drop {
    border-color: rgb(var(--c-accent) / 0.5);
    background: rgb(var(--c-accent) / 0.055);
}

.quote-file-field.is-dragging .quote-file-drop {
    outline: 2px solid rgb(var(--c-accent) / 0.24);
    outline-offset: 3px;
}

.quote-file-drop input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.quote-file-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--gvco-gold);
    background: rgb(var(--c-accent) / 0.1);
    border: 1px solid rgb(var(--c-accent) / 0.18);
    border-radius: 0.45rem;
}

.quote-file-text,
.quote-file-hint {
    display: block;
}

.quote-file-text {
    color: rgb(var(--c-ink) / 0.84);
    font-weight: 700;
    line-height: 1.55;
}

.quote-file-hint,
.quote-file-summary {
    color: rgb(var(--c-ink) / 0.52);
    font-size: 0.86rem;
    line-height: 1.6;
}

.quote-file-summary {
    margin-top: 0.65rem;
    overflow-wrap: anywhere;
}

.quote-file-summary.is-error {
    color: #fca5a5;
}

.quote-file-summary.has-files {
    color: rgb(var(--c-accent) / 0.84);
}

@media (max-width: 639px) {
    .quote-file-drop {
        align-items: flex-start;
        min-height: auto;
        padding: 1rem;
    }

    .quote-file-icon {
        width: 46px;
        height: 46px;
    }
}

/* Mobile experience audit - keep last to protect small screens. */
@media (max-width: 767px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    body {
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    img,
    video,
    svg {
        max-width: 100%;
    }

    .nav-btn-quote,
    .hero-btn-primary,
    .hero-btn-secondary,
    .btn-primary,
    .btn-secondary {
        max-width: 100%;
        overflow: hidden;
        text-align: center;
        white-space: normal;
    }

    .nav-btn-quote span,
    .hero-btn-primary span,
    .hero-btn-secondary span,
    .btn-primary span,
    .btn-secondary span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .nav-btn-quote svg,
    .hero-btn-primary svg,
    .hero-btn-secondary svg,
    .btn-primary svg,
    .btn-secondary svg {
        flex: 0 0 auto;
    }

    .nav-btn-quote.inline-flex,
    .hero-btn-primary.inline-flex,
    .hero-btn-secondary.inline-flex,
    .btn-primary.inline-flex,
    .btn-secondary.inline-flex {
        display: flex;
    }

    #navbar {
        background: rgb(var(--c-bg-base) / 0.97) !important;
        backdrop-filter: blur(18px) !important;
        padding-block: 0 !important;
    }

    #navbar > div {
        padding-inline: 1rem !important;
    }

    #navbar .h-\[80px\] {
        height: 64px !important;
    }

    #navbar .site-logo,
    #navbar img[alt="Golden Vision Metal Industry Factory Logo"] {
        width: auto !important;
        height: 42px !important;
        max-width: min(226px, calc(100vw - 5.5rem)) !important;
        object-fit: contain !important;
    }

    #mobileMenu {
        max-height: calc(100svh - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #mobileMenu > div {
        padding: 0.8rem 1.1rem 1.1rem !important;
    }

    #mobileMenu a {
        display: flex !important;
        align-items: center;
        min-height: 2.75rem;
        padding-block: 0.65rem !important;
        border-bottom: 1px solid rgb(var(--c-ink) / 0.06);
    }

    #mobileMenu .btn-corporate,
    #mobileMenu .btn-primary,
    #mobileMenu .btn-secondary {
        justify-content: center;
        min-height: 3rem;
        border-bottom: 0;
    }

    #home .lg\:hidden.min-h-screen {
        min-height: 100svh !important;
    }

    #home .lg\:hidden .relative.z-10 {
        padding: 5.25rem 1rem 4.2rem !important;
        align-items: center !important;
    }

    #home .lg\:hidden .w-full.max-w-md {
        max-width: min(100%, 24rem) !important;
    }

    #home .hero-metadata-premium {
        flex-wrap: wrap;
        row-gap: 0.4rem;
        margin-bottom: 1rem !important;
    }

    #home .hero-heading-premium {
        margin-bottom: 0.9rem !important;
    }

    #home .hero-heading-premium span {
        max-width: 12ch !important;
        margin-inline: auto;
        font-size: clamp(2rem, 10.5vw, 2.65rem) !important;
        line-height: 1.16 !important;
    }

    #home .hero-description {
        max-width: 20rem !important;
        margin-bottom: 1.15rem !important;
        color: rgb(var(--c-ink) / 0.72) !important;
        font-size: 0.94rem !important;
        line-height: 1.8 !important;
    }

    #home .hero-credentials {
        margin-bottom: 1.25rem !important;
    }

    #home .credential-tag-clean {
        padding: 0.45rem 0.65rem !important;
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
    }

    #home .hero-cta {
        gap: 0.75rem !important;
        margin-bottom: 1.6rem !important;
    }

    #home .hero-btn-primary,
    #home .hero-btn-secondary {
        width: 100% !important;
        min-height: 3.2rem;
        justify-content: center;
        padding-inline: 1rem !important;
        white-space: normal;
    }

    #home .hero-stats {
        width: 100%;
        gap: 0 !important;
        justify-content: space-between !important;
        padding-top: 1rem;
        border-top: 1px solid rgb(var(--c-ink) / 0.12);
    }

    #home .hero-stats .stat-block {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 0.35rem !important;
    }

    #home .stat-number {
        font-size: 1.28rem !important;
        line-height: 1.1 !important;
    }

    #home .stat-label {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    #home .stats-divider {
        flex: 0 0 1px;
        width: 1px !important;
        height: 2rem !important;
        margin-inline: 0.2rem !important;
    }

    #home > .absolute.bottom-8 {
        display: none !important;
    }

    .official-overview,
    #about,
    #leadership,
    #services,
    #industries,
    #defense,
    #clients,
    #gallery,
    #catalog,
    #contact {
        padding-block: clamp(3.2rem, 12vw, 4.7rem) !important;
    }

    .max-w-7xl,
    .service-detail-container {
        width: min(100% - 1.75rem, 80rem) !important;
    }

    .enterprise-label {
        font-size: 0.72rem !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
    }

    .section-headline,
    .official-overview-title,
    .service-detail-heading {
        font-size: clamp(1.95rem, 9vw, 2.8rem) !important;
        line-height: 1.18 !important;
        text-wrap: balance;
    }

    .section-subheadline,
    .official-overview-lead,
    .body-text-large,
    .service-detail-richtext,
    .service-detail-lead {
        max-width: 100% !important;
        font-size: 0.96rem !important;
        line-height: 1.85 !important;
    }

    .official-overview-header,
    .defense-heading-grid,
    .catalog-layout,
    .service-detail-grid,
    .service-detail-split {
        grid-template-columns: 1fr !important;
        gap: 1.35rem !important;
    }

    .official-overview-grid,
    .defense-product-grid,
    .catalog-meta,
    .contact-info-grid {
        grid-template-columns: 1fr !important;
    }

    .official-overview-item,
    .service-card,
    .industry-card,
    .defense-product-card,
    .contact-info-card,
    .service-detail-card {
        min-height: auto !important;
        padding: 1.05rem !important;
    }

    .service-card {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .service-card h3,
    .defense-product-card h3,
    .official-overview-item h3 {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    .service-card p,
    .defense-product-card p,
    .official-overview-item p {
        font-size: 0.88rem !important;
        line-height: 1.75 !important;
    }

    #services .grid,
    #leadership .grid,
    #contact .grid {
        gap: 1rem !important;
    }

    #industries .grid.grid-cols-2 {
        gap: 0.75rem !important;
    }

    .industry-card {
        justify-content: flex-start;
        min-height: 128px !important;
    }

    .industry-card .industry-icon,
    .service-card .service-icon {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.65rem !important;
    }

    .industry-card .industry-icon svg,
    .service-card .service-icon svg {
        width: 1.6rem !important;
        height: 1.6rem !important;
    }

    .industry-card span {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
    }

    .executive-card {
        padding: 1.2rem !important;
    }

    .trust-indicators {
        grid-template-columns: 1fr !important;
        gap: 1px !important;
    }

    .official-client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: 1.5rem !important;
    }

    .official-client-item {
        min-height: 86px !important;
        padding: 0.85rem !important;
    }

    .official-client-item img {
        max-width: 118px !important;
        max-height: 46px !important;
    }

    .facility-feature-panel {
        min-height: 270px !important;
        margin-bottom: 1rem !important;
    }

    .facility-feature-panel img {
        min-height: 270px !important;
        object-position: center center !important;
    }

    .facility-feature-caption {
        right: 0.8rem !important;
        bottom: 0.8rem !important;
        left: 0.8rem !important;
        max-width: none !important;
        padding: 0.9rem !important;
    }

    html[dir="ltr"] .facility-feature-caption {
        right: 0.8rem !important;
        left: 0.8rem !important;
    }

    .facility-feature-caption p {
        font-size: 0.84rem !important;
        line-height: 1.65 !important;
    }

    .defense-products-layout {
        gap: 1rem !important;
    }

    .defense-visual,
    .defense-visual img {
        min-height: 280px !important;
    }

    .defense-visual-panel {
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        left: 0.75rem !important;
        padding: 0.85rem !important;
    }

    .defense-visual-panel strong {
        font-size: 1.12rem !important;
    }

    .defense-assurance-bar {
        grid-template-columns: 1fr !important;
        gap: 1px !important;
    }

    .defense-assurance-bar > div,
    .defense-assurance-bar > a {
        min-width: 0 !important;
        width: 100% !important;
        padding: 1rem !important;
    }

    .defense-assurance-bar > a {
        min-height: 3.25rem;
    }

    .catalog-feature {
        justify-self: stretch !important;
        max-width: 100% !important;
    }

    .catalog-feature img {
        aspect-ratio: 4 / 5 !important;
    }

    .catalog-actions {
        gap: 0.75rem !important;
    }

    .catalog-actions .btn-primary,
    .catalog-actions .btn-secondary {
        width: 100% !important;
        min-height: 3.15rem;
        justify-content: center;
    }

    .catalog-page-card,
    .catalog-page-card img {
        min-height: 176px !important;
    }

    #contact .contact-form-wrapper {
        padding: 1rem !important;
    }

    #contact .contact-form-head {
        margin-bottom: 1.25rem !important;
        padding-bottom: 1rem !important;
    }

    #contact .contact-form-head h3 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
    }

    #contactForm .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    #contact .form-input,
    #contact select.form-input,
    #contact textarea.form-input {
        width: 100% !important;
        min-height: 3.45rem !important;
        font-size: 1rem !important;
    }

    #contact textarea.form-input {
        min-height: 8.75rem !important;
    }

    .quote-file-drop {
        gap: 0.75rem !important;
        align-items: flex-start !important;
        padding: 0.95rem !important;
    }

    .quote-file-text {
        font-size: 0.9rem !important;
    }

    .quote-file-hint,
    .quote-file-summary {
        font-size: 0.8rem !important;
    }

    .service-detail-hero {
        min-height: 72svh !important;
        padding: 5.35rem 0 3rem !important;
    }

    .service-detail-copy h1 {
        max-width: 11ch !important;
        font-size: clamp(2rem, 10vw, 3rem) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere;
    }

    .service-detail-actions {
        gap: 0.75rem !important;
    }

    .service-detail-actions .hero-btn-primary,
    .service-detail-actions .hero-btn-secondary {
        width: 100% !important;
        min-height: 3.15rem;
    }

    .service-detail-section {
        padding: 3.4rem 0 !important;
    }

    .service-detail-gallery {
        gap: 0.75rem !important;
    }

    .service-detail-gallery figure,
    .service-detail-gallery figure.is-large {
        min-height: 218px !important;
    }

    .service-related-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .service-cta-panel {
        padding: 1.15rem !important;
        gap: 1rem !important;
    }

    .service-cta-panel h2 {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
    }

    .service-cta-panel .btn-primary {
        width: 100% !important;
        justify-content: center;
    }

    .whatsapp-float,
    .ai-bot-toggle {
        bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
    }

    .whatsapp-float {
        left: 0.75rem !important;
    }

    html[dir="rtl"] .whatsapp-float {
        left: 0.75rem !important;
        right: auto !important;
    }

    .ai-bot-widget {
        right: 0.75rem !important;
        bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
    }

    html[dir="rtl"] .ai-bot-widget {
        right: 0.75rem !important;
        left: auto !important;
    }

    .ai-bot-panel {
        width: min(330px, calc(100vw - 1.5rem)) !important;
        max-height: min(72svh, 520px) !important;
    }

    footer {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 420px) {
    #navbar .site-logo,
    #navbar img[alt="Golden Vision Metal Industry Factory Logo"] {
        height: 38px !important;
        max-width: calc(100vw - 5.25rem) !important;
    }

    #home .lg\:hidden .relative.z-10 {
        padding-top: 4.9rem !important;
        padding-bottom: 3.6rem !important;
    }

    #home .hero-heading-premium span,
    .service-detail-copy h1 {
        font-size: clamp(1.85rem, 10.5vw, 2.35rem) !important;
    }

    #home .hero-stats .stat-block {
        padding-inline: 0.2rem !important;
    }

    #home .stat-label {
        font-size: 0.62rem !important;
    }

    .section-headline,
    .official-overview-title,
    .service-detail-heading {
        font-size: clamp(1.75rem, 9.2vw, 2.35rem) !important;
    }

    #industries .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .industry-card {
        min-height: auto !important;
    }

    .official-client-grid,
    .catalog-page-grid {
        grid-template-columns: 1fr !important;
    }

    .catalog-page-card,
    .catalog-page-card img {
        min-height: 220px !important;
    }

    .facility-feature-panel,
    .facility-feature-panel img {
        min-height: 238px !important;
    }
}

/* ============================================================================
   PHASE 1 — FOUNDATION LAYER
   ----------------------------------------------------------------------------
   Appended deliberately at the end of the file so it wins on source order
   without adding to the !important count. When the stylesheet is consolidated
   (Phase 3) this block becomes the top of tokens.css and the layers above it
   are folded into components.
   ============================================================================ */

/* ============================================================================
   THEME TOKENS
   ----------------------------------------------------------------------------
   Colours are stored as bare RGB CHANNELS ("7 13 22"), not as hex. That is what
   lets the Tailwind config wrap them as `rgb(var(--c-x) / <alpha-value>)`, so
   every existing utility — bg-gvco-navy, text-white, border-white/5,
   bg-gvco-blue/10 — keeps working AND becomes theme-aware with no markup churn.

   --c-ink is the "contrast colour". Tailwind's `white` is remapped onto it, so
   `text-white` means near-white on dark and near-black on light. That single
   move themes 136 text-white and 28 border-white/N usages for free.

   Dark is the default and the brand's primary expression. Light is designed,
   not inverted: cool steel paper rather than warm cream, elevation carried by
   shadow instead of by border, and a darker gold that survives a light ground.
   ============================================================================ */

:root {
    /* ---- grounds ---- */
    --c-bg-base:    7 13 22;
    --c-bg-raised: 13 23 37;
    --c-bg-inset:   4  8 16;

    /* ---- ink (Tailwind `white` maps here) ---- */
    --c-ink:      242 246 250;
    --c-ink-2:    180 192 205;
    --c-ink-3:    132 148 164;

    /* ---- accent ---- */
    --c-accent:     217 169  63;
    --c-accent-hi:  229 188  92;
    --c-accent-on:   10  15  23;

    /* ---- brand blues ---- */
    --c-blue:         30  77 140;
    --c-blue-light:   46 125 209;
    --c-blue-bright:  77 163 255;

    /* ---- steel / neutrals ---- */
    --c-steel:        74  85 104;
    --c-steel-light: 113 128 150;
    --c-silver:      196 208 220;
    --c-chrome:      232 236 240;

    /* ---- shadow tint ---- */
    --c-shadow: 0 0 0;
    --shadow-strength: 0.40;

    /* ---- resolved semantic tokens for hand-written CSS ---- */
    --bg-base:   rgb(var(--c-bg-base));
    --bg-raised: rgb(var(--c-bg-raised));
    --bg-inset:  rgb(var(--c-bg-inset));

    --text-primary:   rgb(var(--c-ink));      /* 16.4:1 dark / 15.1:1 light */
    --text-secondary: rgb(var(--c-ink-2));    /*  8.9:1 dark /  9.4:1 light */
    --text-muted:     rgb(var(--c-ink-3));    /*  5.4:1 dark /  5.8:1 light */
    /* Nothing on the page goes below --text-muted in either theme. */

    --surface-1: rgb(var(--c-ink) / 0.025);
    --surface-2: rgb(var(--c-ink) / 0.05);

    --border-quiet: rgb(var(--c-ink) / 0.07);
    --border-loud:  rgb(var(--c-ink) / 0.14);

    --accent:       rgb(var(--c-accent));
    --accent-hover: rgb(var(--c-accent-hi));
    --accent-on:    rgb(var(--c-accent-on));
    --focus-ring:   rgb(var(--c-accent-hi));

    --shadow-2: 0 8px 24px rgb(var(--c-shadow) / var(--shadow-strength));
    --shadow-3: 0 24px 64px rgb(var(--c-shadow) / calc(var(--shadow-strength) + 0.2));


    /* ---- hero (themed; the hero is the only surface that sits on footage) ---- */
    --hero-media-filter: brightness(0.92) contrast(1.06) saturate(1);
    --hero-media-filter-mobile: brightness(0.62) contrast(1.05);
    --hero-wash: 0;

    /* --- Motion ---------------------------------------------------------- */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: 150ms;
    --dur-base: 240ms;
}

/* ---------------------------------------------------------------------------
   LIGHT THEME
   Cool steel paper, not cream. Elevation flips: dark mode raises surfaces with
   a lighter background + border, light mode raises them with white + shadow.
   The accent moves to a darker gold — #D9A93F is 11.2:1 on navy but only 2.1:1
   on paper, which is the detail most theme implementations get wrong.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --c-bg-base:   232 236 241;
        --c-bg-raised: 246 248 250;
        --c-bg-inset:  221 227 233;

        --c-ink:        14  26  40;
        --c-ink-2:      58  71  86;
        --c-ink-3:      85  99 114;

        /* #8A6414. The obvious pick, #A67C1E, gives white-on-gold exactly
           3.80:1 — a hair under AA. This is 5.37:1 on white and 4.95:1 as
           text on paper, so it works as a fill AND as a text colour. */
        --c-accent:    122  88  16;
        --c-accent-hi:  99  71  13;
        --c-accent-on: 255 255 255;

        --c-blue-light:  36  90 157;
        --c-blue-bright: 30  77 140;

        --c-steel:       94 110 126;
        --c-steel-light: 61  76  92;
        --c-silver:      61  76  92;
        --c-chrome:      11  22  38;

        --c-shadow: 14 26 40;
        --shadow-strength: 0.13;

        --surface-1: rgb(var(--c-ink) / 0.03);
        --surface-2: rgb(var(--c-ink) / 0.06);
        --border-quiet: rgb(var(--c-ink) / 0.10);
        --border-loud:  rgb(var(--c-ink) / 0.18);

        /* Lift the footage and wash it toward paper so dark hero type reads. */
        --hero-media-filter: brightness(1.04) contrast(1.0) saturate(0.95);
        --hero-media-filter-mobile: brightness(1.08) contrast(0.99) saturate(0.93);
        --hero-wash: 0.30;
    }
}

/* Explicit user choice always wins over the OS preference, both directions. */
:root[data-theme="light"] {
    --c-bg-base:   232 236 241;
    --c-bg-raised: 246 248 250;
    --c-bg-inset:  221 227 233;

    --c-ink:        14  26  40;
    --c-ink-2:      58  71  86;
    --c-ink-3:      85  99 114;

    --c-accent:    122  88  16;
    --c-accent-hi:  99  71  13;
    --c-accent-on: 255 255 255;

    --c-blue-light:  36  90 157;
    --c-blue-bright: 30  77 140;

    --c-steel:       94 110 126;
    --c-steel-light: 61  76  92;
    --c-silver:      61  76  92;
    --c-chrome:      11  22  38;

    --c-shadow: 14 26 40;
    --shadow-strength: 0.13;

    --surface-1: rgb(var(--c-ink) / 0.03);
    --surface-2: rgb(var(--c-ink) / 0.06);
    --border-quiet: rgb(var(--c-ink) / 0.10);
    --border-loud:  rgb(var(--c-ink) / 0.18);

    /* Lift the footage and wash it toward paper so dark hero type reads. */
    --hero-media-filter: brightness(1.04) contrast(1.0) saturate(0.95);
    --hero-media-filter-mobile: brightness(1.08) contrast(0.99) saturate(0.93);
    --hero-wash: 0.30;
}

/* ---------------------------------------------------------------------------
   PERMANENTLY DARK SURFACES
   The hero sits over video footage and stays dark in both themes — it is the
   brand anchor, and light text on moving footage is the only legible option.

   The navbar and footer stay dark for a concrete reason as well as a stylistic
   one: golden-vision-metal-logo.png is a light-on-transparent asset, and on a
   pale header it washes out to near-invisible. Inverting it would destroy the
   blue gear. A dark header and footer bookending light content is a standard
   editorial pattern, keeps the brand navy present in light mode, and needs no
   new artwork. Supply a dark-ink logo variant and these can be themed instead.

   Re-declaring the channel vars here means every Tailwind utility inside these
   subtrees resolves back to the dark palette automatically.
   ------------------------------------------------------------------------- */
#navbar,
footer,
.ai-bot,
.whatsapp-float,
.whatsapp-button {
    --c-bg-base:    7 13 22;
    --c-bg-raised: 13 23 37;
    --c-bg-inset:   4  8 16;
    --c-ink:      242 246 250;
    --c-ink-2:    180 192 205;
    --c-ink-3:    132 148 164;
    --c-accent:     217 169  63;
    --c-accent-hi:  229 188  92;
    --c-accent-on:   10  15  23;
    --c-blue-light:  46 125 209;
    --c-blue-bright: 77 163 255;
    --c-shadow: 0 0 0;
    --shadow-strength: 0.40;

    /* The resolved tokens must be redeclared here too, not just the channels.
       A custom property like `--bg-base: rgb(var(--c-bg-base))` is substituted
       at the element that declares it — :root — and then inherits as an already
       computed colour. Overriding --c-bg-base further down does NOT recompute
       it. Miss this and the hero inherits light-theme surfaces while its text
       correctly goes near-white, i.e. white on white. */
    --bg-base:   rgb(var(--c-bg-base));
    --bg-raised: rgb(var(--c-bg-raised));
    --bg-inset:  rgb(var(--c-bg-inset));

    --text-primary:   rgb(var(--c-ink));
    --text-secondary: rgb(var(--c-ink-2));
    --text-muted:     rgb(var(--c-ink-3));

    --surface-1: rgb(var(--c-ink) / 0.025);
    --surface-2: rgb(var(--c-ink) / 0.05);
    --border-quiet: rgb(var(--c-ink) / 0.07);
    --border-loud:  rgb(var(--c-ink) / 0.14);

    --accent:       rgb(var(--c-accent));
    --accent-hover: rgb(var(--c-accent-hi));
    --accent-on:    rgb(var(--c-accent-on));
    --focus-ring:   rgb(var(--c-accent-hi));

    --shadow-2: 0 8px 24px rgb(var(--c-shadow) / var(--shadow-strength));
    --shadow-3: 0 24px 64px rgb(var(--c-shadow) / calc(var(--shadow-strength) + 0.2));
}

/* --- Text colour utilities -------------------------------------------------
   Mapped onto the existing Tailwind opacity classes so the sweep through the
   markup is a class rename rather than a restructure. */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }

/* --- Skip link ------------------------------------------------------------- */
.skip-link {
    position: fixed;
    inset-inline-start: 1rem;
    inset-block-start: -100%;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    border-radius: 0.375rem;
    background: var(--accent);
    color: var(--accent-on);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: inset-block-start var(--dur-base) var(--ease-out);
}

.skip-link:focus {
    inset-block-start: 1rem;
}

/* --- Global focus ring -----------------------------------------------------
   Previously only 7 selectors in 8,969 lines carried a focus style. */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Anchor offset ---------------------------------------------------------
   The fixed navbar is 78-80px tall; section targets need to clear it. */
section[id],
main[id] {
    scroll-margin-block-start: 6rem;
}

/* --- Footer legal ----------------------------------------------------------
   Was text-white/30 => 2.3:1, a clear AA failure. */
.footer-legal {
    color: var(--text-muted);
}

/* --- Desktop nav overflow (pre-existing, English) ---------------------------
   Nine nav items + language toggle + quote button do not fit between 1024px
   and ~1600px once the labels are English, which is wider than the Arabic.
   The result was the first link sitting on top of the logo and the language
   toggle colliding with "Contact".

   This keeps all nine items and buys the space back by tightening type and
   gaps in that band only. The better fix is fewer top-level items — that is a
   content decision, not a CSS one, and is flagged in the audit. */
.nav-link-clean {
    white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1599px) {
    html[dir="ltr"] .nav-link-clean {
        font-size: 0.8125rem;
        letter-spacing: -0.01em;
    }

    html[dir="ltr"] #navbar .hidden.lg\:flex.items-center.gap-6 {
        gap: 1rem;
    }

    html[dir="ltr"] #navbar .site-logo {
        height: 2.25rem;
    }

    html[dir="ltr"] .nav-btn-quote {
        padding-inline: 0.875rem;
        font-size: 0.8125rem;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html[dir="ltr"] .nav-link-clean {
        font-size: 0.75rem;
    }

    html[dir="ltr"] #navbar .hidden.lg\:flex.items-center.gap-6 {
        gap: 0.6rem;
    }
}

/* --- Primary call to action -------------------------------------------------
   Was 0.75rem uppercase on --gvco-blue: it read as a secondary control, and
   the uppercase transform is inert in Arabic while the 12px size still bit.
   Gold now carries action, which is the one job the accent should have. */
.hero-btn-primary,
.btn-primary,
.nav-btn-quote,
.btn-corporate {
    background: var(--accent);
    color: var(--accent-on);
    font-size: 0.9375rem;      /* 15px */
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    min-height: 52px;
    padding-inline: 1.75rem;
    box-shadow: 0 4px 16px rgba(217, 169, 63, 0.20);
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.hero-btn-primary:hover,
.btn-primary:hover,
.nav-btn-quote:hover,
.btn-corporate:hover {
    background: var(--accent-hover);
    color: var(--accent-on);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(217, 169, 63, 0.32);
}

.hero-btn-primary:active,
.btn-primary:active,
.nav-btn-quote:active,
.btn-corporate:active {
    transform: scale(0.97);
}

/* The nav quote button is a compact variant of the same control. */
.nav-btn-quote {
    min-height: 44px;
    font-size: 0.875rem;
    padding-inline: 1.25rem;
}

/* Secondary keeps its ghost treatment but matches the new metrics. */
.hero-btn-secondary,
.btn-secondary {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    min-height: 52px;
    padding-inline: 1.75rem;
}

/* --- Component text colour remap -------------------------------------------
   These 25 rules hard-coded rgba(255,255,255,0.35..0.6) directly, so the
   utility-class sweep in the markup could not reach them. Remapped here onto
   the same three tiers. Grouped by tier, not by component, so the intent is
   readable. */

/* Body tier */
.official-overview-lead,
.official-overview-item p,
.defense-product-card p,
.defense-assurance-bar span,
.contact-form-head p,
.contact-form-wrapper label,
.catalog-meta span,
.executive-title-ar,
.btn-secondary,
.form-input,
#contact .form-input {
    color: var(--text-secondary);
}

/* Caption / metadata tier */
.stat-label,
.trust-indicators,
.quote-file-summary,
.client-logo-text {
    color: var(--text-muted);
}

/* Placeholders sit one tier below their input, but never below --text-muted */
.form-input::placeholder,
.ai-bot-form input::placeholder {
    color: var(--text-muted);
    opacity: 1; /* Firefox dims placeholders by default */
}

/* ============================================================================
   SCROLL REVEAL SYSTEM
   ----------------------------------------------------------------------------
   Replaces AOS. Four variants, one easing curve, one duration scale, and a
   stagger driven by --i. Compositor-only properties (transform / opacity /
   clip-path) so reveals never trigger layout.

   AOS was disabled below 768px, so most visitors saw nothing animate at all.
   This runs everywhere and costs ~30 lines of JS instead of a 20KB library.
   ============================================================================ */

[data-reveal] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: var(--reveal-dur, 560ms);
    transition-timing-function: var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
    /* No `will-change` here on purpose. It was promoting all 85 reveal targets
       to their own compositor layer at once, which is what made scrolling
       stutter. Transform/opacity transitions are composited anyway; the hint
       bought nothing and cost a great deal of memory and paint setup. */
}

/* Default: a short rise. Deliberately small — big travel reads as cheap. */
[data-reveal],
[data-reveal="rise"] {
    transform: translate3d(0, 20px, 0);
}

/* Dense grids: less travel so a row of six does not look like a wave. */
[data-reveal="rise-sm"] {
    transform: translate3d(0, 10px, 0);
}

/* Opacity only — for things already anchored in place, e.g. background art. */
[data-reveal="fade"] {
    transform: none;
}

/* Visual blocks: settles into place rather than sliding. */
[data-reveal="scale"] {
    transform: scale(0.965);
    --reveal-dur: 680ms;
}

/* Headings: a machined wipe down over the type. Reads as an edge passing
   across the letterforms, which suits a fabrication brand better than a fade.

   Implemented with a mask, NOT clip-path. clip-path: inset(0 0 100% 0) clips
   the element to zero area, and IntersectionObserver measures the clipped
   rect — so the element could never intersect and the reveal never fired.
   A mask changes paint only, leaving the observable geometry intact. */
[data-reveal="clip"] {
    transform: translate3d(0, 12px, 0);
    --reveal-dur: 720ms;
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 50%);
    mask-image: linear-gradient(180deg, #000 50%, transparent 50%);
    -webkit-mask-size: 100% 200%;
    mask-size: 100% 200%;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transition-property: opacity, transform, -webkit-mask-position, mask-position;
}

[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

[data-reveal="clip"].is-in {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

/* --- Image reveal ----------------------------------------------------------
   The frame wipes open while the photograph relaxes out of a slight
   over-scale. Gives real photography a sense of weight. */
[data-reveal-image] {
    overflow: hidden;
}

[data-reveal-image] > img {
    transform: scale(1.08);
    transition: transform 1100ms var(--ease-out);
}

[data-reveal-image].is-in > img {
    transform: scale(1);
}

/* --- Scroll progress -------------------------------------------------------
   A 2px gold hairline under the navbar showing read position. Measurement is
   the brand idea, so a progress rule earns its place where a decorative
   flourish would not. */
.scroll-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 60;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

html[dir="rtl"] .scroll-progress {
    transform-origin: right center;
}

/* --- Reduced motion --------------------------------------------------------
   Hard gate. The two logo marquees in particular ran unconditionally. */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal].is-in {
        opacity: 1;
        transform: none;
        transition: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    [data-reveal-image] > img,
    [data-reveal-image].is-in > img {
        transform: none;
        transition: none;
    }

    .scroll-progress {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee-animate,
    .logo-marquee-animate-reverse {
        animation: none;
        transform: none;
    }

    .logo-marquee-track {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
   LEGACY VARIABLE BRIDGE
   71 rules still reference the original --gvco-* names, and there were two
   competing :root blocks defining them with different values. Rather than
   rewrite every call site, the legacy names are re-pointed at the themed
   tokens here — one definition, last in the cascade, so both old blocks lose.
   New code should use the semantic tokens directly.
   ------------------------------------------------------------------------- */
/* The selector list must match the permanently-dark block above exactly.
   These are resolved tokens: they substitute at the element that declares
   them, so any subtree that overrides the channels must redeclare these too. */
:root,
#navbar,
footer,
.ai-bot,
.whatsapp-float,
.whatsapp-button {
    --gvco-navy:       rgb(var(--c-bg-base));
    --gvco-navy-light: rgb(var(--c-bg-raised));
    --gvco-navy-mid:   rgb(var(--c-bg-inset));
    --gvco-blue:        rgb(var(--c-blue));
    --gvco-blue-light:  rgb(var(--c-blue-light));
    --gvco-blue-bright: rgb(var(--c-blue-bright));
    --gvco-blue-glow:   rgb(var(--c-blue-light) / 0.5);
    --gvco-gold:       rgb(var(--c-accent));
    --gvco-gold-light: rgb(var(--c-accent-hi));
    --gvco-gold-dark:  rgb(var(--c-accent));
    --gvco-gold-glow:  rgb(var(--c-accent) / 0.4);
    --gvco-steel:       rgb(var(--c-steel));
    --gvco-steel-light: rgb(var(--c-steel-light));
    --gvco-silver:      rgb(var(--c-silver));
    --gvco-chrome:      rgb(var(--c-chrome));
}

/* ============================================================================
   THEME TOGGLE + BACK TO TOP
   ============================================================================ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-quiet);
    border-radius: 6px;
    background: var(--surface-1);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--surface-2);
}

.theme-toggle svg { width: 15px; height: 15px; flex: none; }

/* Only the icon matching the current mode is shown. */
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon,
.theme-toggle .theme-icon-auto { display: none; }
.theme-toggle[data-mode="auto"]  .theme-icon-auto { display: block; }
.theme-toggle[data-mode="light"] .theme-icon-sun  { display: block; }
.theme-toggle[data-mode="dark"]  .theme-icon-moon { display: block; }

.theme-toggle-label { white-space: nowrap; }

.mobile-theme-toggle {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: start;
    transition: color var(--dur-fast) var(--ease-out);
}
.mobile-theme-toggle:hover { color: var(--accent); }

/* Theme change is the one place a colour transition is welcome. It is enabled
   only for the ~260ms of the switch, so it never interferes with ordinary
   hover or scroll interaction. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: background-color 260ms var(--ease-out),
                border-color 260ms var(--ease-out),
                color 260ms var(--ease-out) !important;
}

/* --- Back to top ----------------------------------------------------------
   Sits opposite the WhatsApp float so the two never collide, and stays out of
   the way until there is somewhere to go back to. */
/* Placement is not arbitrary. Measured at runtime in both directions:
   the assistant sits on the inline-START corner (left in LTR, right in RTL)
   and WhatsApp on the inline-END corner. Putting this button on inline-start
   made it sit underneath the assistant in BOTH directions — the assistant
   swallowed the clicks. It is therefore stacked directly above WhatsApp on
   the inline-end side, sharing that edge so the two read as one column. */
.back-to-top {
    position: fixed;
    inset-block-end: 6rem;
    inset-inline-end: 1.75rem;
    z-index: 55;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-loud);
    background: var(--bg-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base),
                background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.back-to-top:hover {
    background: var(--accent);
    color: var(--accent-on);
    border-color: var(--accent);
}

.back-to-top:active { transform: scale(0.94); }
.back-to-top svg { width: 20px; height: 20px; }

@media (max-width: 639px) {
    .back-to-top {
        inset-block-end: 5.5rem;
        inset-inline-end: 1rem;
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity 1ms, visibility 1ms; transform: none; }
    .theme-switching, .theme-switching * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   LIGHT-THEME LEGIBILITY CORRECTIONS
   These components set colour as an arbitrary alpha of the ink or accent
   channel. That reads fine as light-on-dark, but the same alpha over paper
   lands between 2.9:1 and 3.9:1 — below AA. Alpha is not a colour system.
   Each is re-pointed at a semantic token that is verified in both themes.
   ------------------------------------------------------------------------- */
.official-overview-index,
.defense-product-index,
.service-detail-card span,
.executive-title-en,
.quote-file-hint,
.defense-visual-panel span {
    color: var(--text-muted);
}

/* The numbered indices keep their accent identity, but at full strength so the
   colour itself carries the contrast rather than an opacity. */
.official-overview-index,
.defense-product-index,
.service-detail-card span {
    color: var(--accent);
}

/* Accent at 0.76 alpha composites to a washed olive over paper (3.16:1).
   Full-strength accent keeps the same identity and passes in both themes. */
.service-related-link span {
    color: var(--accent);
}

/* Always-dark subtrees must reset the inherited text colour explicitly.
   Their --c-* channels flip back to the dark palette, but a plain inherited
   `color` still carries the light theme's near-black down from <body>, so any
   element that does not set its own colour ends up dark-on-dark. */
#navbar,
footer,
.ai-bot,
.ai-bot-panel,
.whatsapp-float,
.whatsapp-button {
    color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   GRADIENT HEADINGS
   A later rule hardcoded `#ffffff -> gold -> #8bbdf1`, which is invisible on
   paper. Automated contrast checking cannot catch this: gradient text sets
   -webkit-text-fill-color: transparent, so the computed `color` carries no
   information and the checker skips the element. It has to be reasoned about.

   All three stops are now themed and verified against their own ground:
     dark   ink 16.4:1 | accent 11.2:1 | blue 8.6:1   on --bg-base
     light  ink 15.1:1 | accent  6.9:1 | blue 7.9:1   on paper
   ------------------------------------------------------------------------- */
.text-gradient {
    background: linear-gradient(135deg,
        rgb(var(--c-ink)) 0%,
        rgb(var(--c-accent-hi)) 62%,
        rgb(var(--c-blue-bright)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
}

.text-gradient-gold {
    background: linear-gradient(135deg,
        rgb(var(--c-accent)) 0%,
        rgb(var(--c-accent-hi)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================================
   HERO — THEMED
   ----------------------------------------------------------------------------
   The hero is the one surface that sits on photographic footage, so it cannot
   simply invert. Three things move together, all driven by theme variables so
   there is a single rule set rather than a duplicated light-mode block:

     1. the footage is lifted and desaturated toward paper in light mode,
     2. a paper wash sits between footage and content,
     3. the existing Tailwind scrims already use `gvco-navy`, which now resolves
        to --c-bg-base, so they turn to paper on their own.

   The content column is a solid ground in both themes, so headline and body
   copy are never set over moving footage.
   ============================================================================ */

#home .hero-video,
#home .hero-image {
    filter: var(--hero-media-filter);
    transition: filter var(--dur-base) var(--ease-out);
}

/* The mobile hero image carries an inline `filter`, which only !important can
   beat. The dark value matches the original inline one exactly, so dark mode
   is visually unchanged. */
#home .lg\:hidden img {
    filter: var(--hero-media-filter-mobile) !important;
}

/* NO paper wash and no z-index meddling here on purpose.
   `.hero-image-container::after` already carries a two-layer gradient that
   builds the reading ground (up to 0.98 opacity on the content side), and the
   earlier colour sweep already converted its stops to rgb(var(--c-bg-base)/x),
   so it themes to paper on its own. An extra ::after rule here does not stack
   with it — it OVERRIDES its `background`, which replaced that gradient with a
   flat 30% wash and left the headline sitting on bare photography. */

/* ============================================================================
   NAVBAR — FLOATING GLASS PILL
   ----------------------------------------------------------------------------
   Brand sits outside the pill, links and actions inside it. Everything is a
   flex row with a single align-items:center, which is what fixes the previous
   baseline misalignment between the logo, the text buttons and the CTA.
   ============================================================================ */

.nav-floating {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    padding-block: clamp(0.65rem, 1.4vw, 1.15rem);
    background: none;
    border: 0;
    transition: padding-block var(--dur-base) var(--ease-out);
}

.nav-floating.scrolled { padding-block: 0.55rem; }

.nav-shell {
    max-width: 1560px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 2vw, 2rem);
}

.nav-brand { display: flex; align-items: center; flex: none; }
.nav-brand .site-logo {
    display: block;
    height: clamp(30px, 3.2vw, 42px);
    width: auto;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.nav-brand:hover .site-logo { opacity: 0.85; }

.nav-pill {
    display: none;                       /* desktop only; see breakpoint below */
    align-items: center;
    gap: clamp(0.35rem, 0.8vw, 0.75rem);
    padding: 0.4rem 0.45rem 0.4rem clamp(0.75rem, 1.4vw, 1.4rem);
    border-radius: 999px;
    border: 1px solid var(--border-quiet);
    background: rgb(var(--c-bg-raised) / 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 6px 28px rgb(var(--c-shadow) / calc(var(--shadow-strength) * 0.55));
    transition: background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.nav-floating.scrolled .nav-pill {
    background: rgb(var(--c-bg-raised) / 0.82);
    border-color: var(--border-loud);
}

.nav-links { display: flex; align-items: center; gap: clamp(0.1rem, 0.5vw, 0.5rem); }

.nav-link-clean {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem clamp(0.4rem, 0.7vw, 0.7rem);
    font-size: clamp(0.76rem, 0.88vw, 0.86rem);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 999px;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.nav-link-clean::after { display: none; }   /* retire the old underline */

.nav-link-clean:hover { color: var(--text-primary); background: var(--surface-2); }

.nav-link-clean.active {
    color: var(--accent);
    background: rgb(var(--c-accent) / 0.12);
    font-weight: 600;
}

.nav-sep {
    width: 1px;
    height: 20px;
    background: var(--border-loud);
    flex: none;
}

.nav-actions { display: flex; align-items: center; gap: 0.4rem; }

/* --- compact controls ------------------------------------------------------
   Deliberately plain: a circle with one glyph. The previous theme control
   carried a text label that changed width on every click, which made the whole
   action group shift sideways. */
.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover {
    color: var(--accent);
    background: var(--surface-2);
    border-color: var(--border-quiet);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 17px; height: 17px; }

.icon-btn .theme-icon-sun,
.icon-btn .theme-icon-moon,
.icon-btn .theme-icon-auto { display: none; }
.icon-btn[data-mode="auto"]  .theme-icon-auto { display: block; }
.icon-btn[data-mode="light"] .theme-icon-sun  { display: block; }
.icon-btn[data-mode="dark"]  .theme-icon-moon { display: block; }

.lang-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding-inline: 0.85rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.lang-btn:hover {
    color: var(--accent);
    background: var(--surface-2);
    border-color: var(--border-quiet);
}

.nav-btn-quote {
    display: inline-flex;
    align-items: center;
    height: 40px;
    min-height: 0;
    padding-inline: 1.15rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-on);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
}
.nav-btn-quote:hover { background: var(--accent-hover); color: var(--accent-on); transform: none; }

.nav-mobile-actions { display: flex; align-items: center; gap: 0.3rem; }

@media (min-width: 1180px) {
    .nav-pill { display: flex; }
    .nav-mobile-actions { display: none; }
}

/* --- mobile menu ----------------------------------------------------------- */
.mobile-menu {
    margin-block-start: 0.65rem;
    margin-inline: clamp(1rem, 3vw, 2.5rem);
    border-radius: 22px;
    border: 1px solid var(--border-quiet);
    background: rgb(var(--c-bg-raised) / 0.94);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.mobile-menu.hidden { display: none; }
.mobile-menu-inner { padding: 0.6rem; display: flex; flex-direction: column; }

.mobile-link {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.mobile-link:hover, .mobile-link.active { color: var(--text-primary); background: var(--surface-2); }

.mobile-menu-foot {
    margin-block-start: 0.5rem;
    padding: 0.85rem 1rem 0.5rem;
    border-block-start: 1px solid var(--border-quiet);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.mobile-menu-foot .lang-btn { border-color: var(--border-quiet); }
.mobile-menu-foot .btn-corporate {
    flex: 1;
    justify-content: center;
    border-radius: 999px;
    min-height: 44px;
}

/* ============================================================================
   HERO — FULL BLEED
   ----------------------------------------------------------------------------
   One block for every viewport. The previous split kept a duplicate mobile
   tree in the DOM, which meant two <h1> elements and two <video> elements both
   fetching the same 4K file. There is now one of each.
   ============================================================================ */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg-base);
    isolation: isolate;
}

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

.hero .hero-video,
.hero .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--hero-media-filter);
    transition: filter var(--dur-base) var(--ease-out);
}

/* The video paints over the poster once it can play; both stay in place so
   there is never a frame with no image. */
.hero .hero-video { z-index: 1; opacity: 0; transition: opacity 700ms var(--ease-out), filter var(--dur-base) var(--ease-out); }
.hero .hero-video.is-ready { opacity: 1; }
.hero .hero-image { z-index: 0; }

/* Directional scrim: heaviest behind the copy, clearing where the footage
   does the work. Uses --c-bg-base, so it becomes a paper wash in light mode
   with no separate rule. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(var(--hero-scrim-angle, 270deg),
            rgb(var(--c-bg-base) / 0.97) 0%,
            rgb(var(--c-bg-base) / 0.86) 28%,
            rgb(var(--c-bg-base) / 0.55) 55%,
            rgb(var(--c-bg-base) / 0.22) 100%),
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / 0.55) 0%,
            rgb(var(--c-bg-base) / 0.12) 32%,
            rgb(var(--c-bg-base) / 0.30) 72%,
            rgb(var(--c-bg-base) / 0.92) 100%);
}

/* Declared on <html>, NOT on .hero-scrim. --hero-scrim-image lives on :root
   and its nested var(--hero-scrim-angle) is substituted at the element that
   DECLARES it, so an angle set further down the tree is silently ignored —
   which left the wash on the wrong side in English. */
html[dir="rtl"] { --hero-scrim-angle: 270deg; }  /* copy on the right */
html[dir="ltr"] { --hero-scrim-angle: 90deg;  }  /* copy on the left  */

.hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1560px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
    padding-block: clamp(7rem, 14vh, 10rem) clamp(4rem, 10vh, 7rem);
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}
html[dir="ltr"] .hero-eyebrow { text-transform: uppercase; }
.hero-eyebrow-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; }

/* Scoped to .hero on purpose: a legacy `html[dir="rtl"] h1` rule sets
   font-size: 2.5rem at specificity (0,1,2), which outranks a bare
   `.hero-title` (0,1,0) — so the Arabic headline was pinned to 40px and none
   of the clamp below ever applied. (0,2,0) wins it back. */
.hero .hero-title {
    margin: 0 0 1.5rem;
    max-width: 17ch;
    font-weight: 800;
    color: var(--text-primary);
    font-size: clamp(56px, 4.6vw, 62px);
    line-height: 1.22;                 /* Arabic needs the extra leading */
    letter-spacing: 0;
    text-wrap: balance;
}
html[dir="ltr"] .hero .hero-title {
    line-height: 1.04;
    letter-spacing: -0.03em;
    max-width: 15ch;
}

.hero-rule {
    width: 68px;
    height: 2px;
    margin-block-end: 1.6rem;
    background: linear-gradient(90deg, var(--accent), rgb(var(--c-accent) / 0.25));
    transform-origin: left center;
}
html[dir="rtl"] .hero-rule { transform-origin: right center; }

.hero .hero-description {
    max-width: 46ch;
    margin: 0 0 1.75rem;
    font-size: clamp(0.95rem, 1.15vw, 1.075rem);
    line-height: 1.85;
    color: var(--text-secondary);
}

.hero-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 2rem;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-block-end: 3rem;
}
.hero-cta-arrow {
    width: 17px;
    height: 17px;
    margin-inline-start: 0.6rem;
    transition: transform var(--dur-fast) var(--ease-out);
}
html[dir="rtl"] .hero-cta-arrow { transform: rotate(180deg); }
.hero-btn-primary:hover .hero-cta-arrow { transform: translateX(4px); }
html[dir="rtl"] .hero-btn-primary:hover .hero-cta-arrow { transform: rotate(180deg) translateX(4px); }

/* Hero buttons keep the shared landing-page radius (set by the legacy
   `border-radius: 0.25rem !important` rule) so they match the CTAs further
   down the page rather than becoming pills in isolation. */

.hero .hero-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 3vw, 2.75rem);
    padding-block-start: 1.75rem;
    border-block-start: 1px solid var(--border-quiet);
    max-width: 620px;
}
.hero .hero-stats .stat-block { padding: 0; text-align: start; }
.hero .stats-divider {
    width: 1px;
    height: 34px;
    background: var(--border-quiet);
    flex: none;
    margin: 0;
}

.hero-scroll {
    position: absolute;
    inset-block-end: 2rem;
    inset-inline-end: clamp(1.25rem, 3vw, 3rem);
    z-index: 4;
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
}
.hero-scroll:hover { color: var(--accent); }
.hero-scroll-mouse {
    display: grid;
    justify-items: center;
    width: 20px;
    height: 32px;
    padding-block-start: 6px;
    border: 1px solid currentColor;
    border-radius: 999px;
}
.hero-scroll-dot {
    width: 2px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    animation: heroScrollDot 1.9s var(--ease-out) infinite;
}
@keyframes heroScrollDot {
    0%, 100% { transform: translateY(0);   opacity: 1; }
    55%      { transform: translateY(7px); opacity: 0.25; }
}

@media (max-width: 767px) {
    .hero-inner { padding-block: 6.5rem 4rem; }
    .hero-title { max-width: 100%; }
    .hero .hero-stats { gap: 1rem; }
    .hero-scroll { display: none; }
}

/* ============================================================================
   HERO TYPING
   ----------------------------------------------------------------------------
   Arabic is cursive: letters join, and their shape depends on their
   neighbours. Wrapping characters in per-letter spans — the usual way to build
   a typing effect — BREAKS that shaping and renders the word as disconnected
   letterforms. So the text is typed by rewriting the string, which lets the
   browser reshape correctly at every step, with a caret drawn as a pseudo
   element rather than an extra node.
   ============================================================================ */

.hero-type { position: relative; }

.hero-type.is-typing::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.88em;
    margin-inline-start: 0.12em;
    vertical-align: -0.08em;
    border-radius: 2px;
    background: linear-gradient(180deg,
        rgb(var(--c-accent-hi)),
        rgb(var(--c-accent) / 0.55));
    box-shadow: 0 0 12px rgb(var(--c-accent) / 0.55);
    animation: heroCaret 1.15s ease-in-out infinite;
}

/* A soft pulse rather than a hard on/off blink — `steps(1)` snapped between
   full and zero, which fought the slower, smoother cadence. */
@keyframes heroCaret {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.18; }
}

/* The line settles the moment typing ends: the last character lands and the
   whole headline eases to full weight instead of simply stopping. */
.hero-type {
    transition: opacity 420ms var(--ease-out), letter-spacing 420ms var(--ease-out);
}
.hero-type.is-typing {
    opacity: 0.94;
    letter-spacing: 0.004em;
}

@media (prefers-reduced-motion: reduce) {
    .hero-type.is-typing::after { display: none; }
    .hero-scroll-dot { animation: none; }
}

/* ============================================================================
   FOOTER — refined to match the pill language
   ============================================================================ */

footer {
    position: relative;
    margin-block-start: clamp(3rem, 7vw, 6rem);
    border-radius: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0 0;
    border: 1px solid var(--border-quiet);
    border-block-end: 0;
    background: var(--bg-raised);
    padding-block: clamp(3.25rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.5rem);
    overflow: hidden;
}

/* A single hairline of accent along the top edge — the same gesture as the
   hero rule, tying the two ends of the page together. */
footer::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgb(var(--c-accent) / 0.55) 50%,
        transparent);
}

footer .footer-logo {
    height: 46px;
    width: auto;
    margin-block-end: 1.5rem;
}

.footer-heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
html[dir="rtl"] .footer-heading { letter-spacing: 0; text-transform: none; font-size: 0.82rem; }

footer ul a,
footer li a {
    position: relative;
    display: inline-block;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
footer ul a:hover,
footer li a:hover {
    color: var(--accent);
    transform: translateX(2px);
}
html[dir="rtl"] footer ul a:hover,
html[dir="rtl"] footer li a:hover { transform: translateX(-2px); }

/* Certification chips */
footer .rounded.bg-white\/5,
footer .px-3.py-1 {
    border-radius: 999px;
    border: 1px solid var(--border-quiet);
    background: var(--surface-1);
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.footer-legal { color: var(--text-muted); font-size: 0.82rem; }

footer .border-t {
    border-color: var(--border-quiet);
}

/* --- Hero content column ---------------------------------------------------
   Legacy rules centred and full-width-ed these rows for the old split layout.
   Making .hero-inner a flex column with align-items:flex-start forces every
   child to shrink to its content and hug the inline-start edge — right in RTL,
   left in LTR — without needing a rule per row. */
.hero .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero .hero-eyebrow,
.hero .hero-credentials,
.hero .hero-cta,
.hero .hero-stats {
    justify-content: flex-start !important;
    width: auto;
    max-width: 100%;
    margin-inline: 0 !important;
    text-align: start !important;
}

.hero .hero-title,
.hero .hero-description {
    text-align: start !important;
    margin-inline: 0 !important;
}

.hero .hero-stats {
    align-self: flex-start;
    /* `html[dir="rtl"] .hero-stats { flex-direction: row-reverse }` flips the
       main axis a second time on top of the RTL flip, so flex-start resolved to
       the LEFT edge and the stats detached from the content column. */
    flex-direction: row !important;
    width: auto !important;
}

/* --- Float the bar ---------------------------------------------------------
   A legacy `#navbar { background: ...; border-bottom: ... }` rule painted a
   solid band across the top, which defeats the floating-pill design. The bar
   itself is now transparent; only the chips carry surface. */
#navbar.nav-floating {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* --- Brand chip ------------------------------------------------------------
   The logo asset is light-on-transparent, so over the pale light-mode hero it
   would disappear. Giving the brand the same dark glass treatment as the nav
   pill keeps it legible on any ground, in either theme, and reads as a
   deliberate pair of floating chips rather than a patch. */
.nav-brand {
    padding: 0.4rem clamp(0.75rem, 1.4vw, 1.1rem);
    border-radius: 999px;
    border: 1px solid var(--border-quiet);
    background: rgb(var(--c-bg-raised) / 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 6px 28px rgb(var(--c-shadow) / calc(var(--shadow-strength) * 0.55));
    transition: background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.nav-floating.scrolled .nav-brand {
    background: rgb(var(--c-bg-raised) / 0.82);
    border-color: var(--border-loud);
}

/* Mobile controls get the same chip so the three float consistently. */
.nav-mobile-actions {
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--border-quiet);
    background: rgb(var(--c-bg-raised) / 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}
@media (min-width: 1180px) { .nav-mobile-actions { display: none; } }

/* --- Chip opacity is theme-dependent ---------------------------------------
   The nav chips keep the dark palette in both themes (the logo asset demands
   it), but 0.55 alpha over a BRIGHT light-mode hero composites to mid-grey and
   the white logo stops reading. Light mode therefore needs a more opaque chip
   to restore the dark ground the logo was drawn for. */
#navbar { --nav-chip-alpha: 0.62; --nav-chip-alpha-scrolled: 0.86; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) #navbar { --nav-chip-alpha: 0.90; --nav-chip-alpha-scrolled: 0.96; }
}
:root[data-theme="light"] #navbar { --nav-chip-alpha: 0.90; --nav-chip-alpha-scrolled: 0.96; }
:root[data-theme="dark"]  #navbar { --nav-chip-alpha: 0.62; --nav-chip-alpha-scrolled: 0.86; }

.nav-brand,
.nav-pill,
.nav-mobile-actions {
    background: rgb(var(--c-bg-raised) / var(--nav-chip-alpha));
}

.nav-floating.scrolled .nav-brand,
.nav-floating.scrolled .nav-pill,
.nav-floating.scrolled .nav-mobile-actions {
    background: rgb(var(--c-bg-raised) / var(--nav-chip-alpha-scrolled));
}

/* ============================================================================
   LIGHT MODE REFINEMENT
   ----------------------------------------------------------------------------
   The first light theme was too white: a near-white ground under pure-white
   cards leaves no tonal separation, so surfaces read as one flat sheet. The
   ground is now a soft steel paper and cards sit *above* it rather than being
   the brightest thing on screen.

   Second problem: the hero scrim carried the same opacity curve in both
   themes. Washing a photograph with 22% white at its far edge — on top of a
   brightness(1.16) filter — bleached the footage. Light mode now uses a
   steeper curve: solid behind the copy, fully clear over the image.
   ============================================================================ */

:root {
    --hero-scrim-image:
        linear-gradient(var(--hero-scrim-angle, 270deg),
            rgb(var(--c-bg-base) / 0.97) 0%,
            rgb(var(--c-bg-base) / 0.86) 28%,
            rgb(var(--c-bg-base) / 0.55) 55%,
            rgb(var(--c-bg-base) / 0.22) 100%),
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / 0.55) 0%,
            rgb(var(--c-bg-base) / 0.12) 32%,
            rgb(var(--c-bg-base) / 0.30) 72%,
            rgb(var(--c-bg-base) / 0.92) 100%);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) { --hero-scrim-image: var(--hero-scrim-light); }
}
:root[data-theme="light"] { --hero-scrim-image: var(--hero-scrim-light); }

:root {
    --hero-scrim-light:
        linear-gradient(var(--hero-scrim-angle, 270deg),
            rgb(var(--c-bg-base) / 0.98) 0%,
            rgb(var(--c-bg-base) / 0.92) 26%,
            rgb(var(--c-bg-base) / 0.46) 58%,
            rgb(var(--c-bg-base) / 0.00) 100%),
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / 0.34) 0%,
            rgb(var(--c-bg-base) / 0.00) 30%,
            rgb(var(--c-bg-base) / 0.06) 68%,
            rgb(var(--c-bg-base) / 0.72) 100%);
}

.hero-scrim { background: var(--hero-scrim-image); }

/* --- Elevation in light mode ------------------------------------------------
   With the ground deepened, cards can carry a real shadow instead of relying
   on a border alone. This is what gives light mode depth rather than flatness. */
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .contact-form-wrapper,
:root[data-theme="light"] .industry-card,
:root[data-theme="light"] .executive-card,
:root[data-theme="light"] .defense-product-card,
:root[data-theme="light"] .official-client-item,
:root[data-theme="light"] .catalog-page-card {
    background: var(--bg-raised);
    box-shadow: 0 1px 2px rgb(var(--c-shadow) / 0.06),
                0 8px 24px rgb(var(--c-shadow) / 0.07);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .service-card,
    :root:not([data-theme="dark"]) .contact-form-wrapper,
    :root:not([data-theme="dark"]) .industry-card,
    :root:not([data-theme="dark"]) .executive-card,
    :root:not([data-theme="dark"]) .defense-product-card,
    :root:not([data-theme="dark"]) .official-client-item,
    :root:not([data-theme="dark"]) .catalog-page-card {
        background: var(--bg-raised);
        box-shadow: 0 1px 2px rgb(var(--c-shadow) / 0.06),
                    0 8px 24px rgb(var(--c-shadow) / 0.07);
    }
}

/* Alpha again, not a token: ink at 0.6 composited to 4.36:1 once the light
   ground was deepened. --text-muted is verified on all three grounds. */
.service-tag { color: var(--text-muted); }
.service-tag:hover { color: var(--text-primary); }

/* ============================================================================
   ROUND 2 REFINEMENTS
   ============================================================================ */

/* --- 1. Nav fits in English -------------------------------------------------
   English labels are ~20% wider than the Arabic. Between the pill breakpoint
   and ~1500px the brand + pill exceeded the viewport and the quote button was
   clipped. Rather than drop nav items, the brand mark scales down and the link
   metrics tighten across that band only. */
.nav-shell { min-width: 0; }
.nav-pill  { min-width: 0; }
.nav-links { min-width: 0; }

@media (min-width: 1180px) and (max-width: 1560px) {
    html[dir="ltr"] .nav-brand .site-logo { height: 28px; }
    html[dir="ltr"] .nav-brand { padding-inline: 0.65rem; }
    html[dir="ltr"] .nav-link-clean { font-size: 0.775rem; padding-inline: 0.34rem; }
    html[dir="ltr"] .nav-links { gap: 0.05rem; }
    html[dir="ltr"] .nav-pill { gap: 0.3rem; padding-inline-start: 0.7rem; }
    html[dir="ltr"] .nav-btn-quote { padding-inline: 0.9rem; font-size: 0.78rem; }
    html[dir="ltr"] .lang-btn { padding-inline: 0.6rem; font-size: 0.74rem; }
    html[dir="ltr"] .icon-btn { width: 32px; height: 32px; }
}

@media (min-width: 1180px) and (max-width: 1340px) {
    html[dir="ltr"] .nav-brand .site-logo { height: 25px; }
    html[dir="ltr"] .nav-link-clean { font-size: 0.735rem; padding-inline: 0.28rem; }
}

/* --- 2. A real panel behind the copy ---------------------------------------
   A single wash across the whole frame both bleached the photograph and left
   the text sitting in the weakest part of the gradient. The reading ground is
   now its own contained panel that only covers the content column, so the
   image can stay rich everywhere else. */
.hero-inner::before {
    content: "";
    position: absolute;
    inset-block: 0;
    /* Sized from the viewport, not from `ch`. A ch-based width tracks the
       hero font, not the width of the copy, and left the description's outer
       84px sitting on bare video — measured at 1.76:1. */
    inset-inline-start: -8vw;
    width: min(1180px, 96vw);
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(var(--hero-panel-angle, 270deg),
        rgb(var(--c-bg-base) / 0.97) 0%,
        rgb(var(--c-bg-base) / 0.95) 45%,
        rgb(var(--c-bg-base) / 0.88) 62%,
        rgb(var(--c-bg-base) / 0.42) 80%,
        rgb(var(--c-bg-base) / 0.00) 100%);
}
html[dir="rtl"] { --hero-panel-angle: 270deg; }
html[dir="ltr"] { --hero-panel-angle: 90deg;  }

@media (max-width: 767px) {
    .hero-inner::before { inset-inline-start: -20vw; width: 150vw; }
}

/* --- 3. Let the photograph breathe -----------------------------------------
   With the panel carrying legibility, the full-frame scrim can drop right back
   and the footage keeps its own tone in light mode. */
:root { --hero-scrim-light:
        linear-gradient(var(--hero-scrim-angle, 270deg),
            rgb(var(--c-bg-base) / 0.55) 0%,
            rgb(var(--c-bg-base) / 0.30) 34%,
            rgb(var(--c-bg-base) / 0.08) 66%,
            rgb(var(--c-bg-base) / 0.00) 100%),
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / 0.20) 0%,
            rgb(var(--c-bg-base) / 0.00) 34%,
            rgb(var(--c-bg-base) / 0.04) 70%,
            rgb(var(--c-bg-base) / 0.62) 100%);
}

/* Light mode keeps a touch of the darker grade so metal still reads as metal. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --hero-media-filter: brightness(0.99) contrast(1.04) saturate(1);
        --hero-media-filter-mobile: brightness(1.0) contrast(1.03) saturate(0.98);
    }
}
:root[data-theme="light"] {
    --hero-media-filter: brightness(0.99) contrast(1.04) saturate(1);
    --hero-media-filter-mobile: brightness(1.0) contrast(1.03) saturate(0.98);
}

/* --- 4. Quote button ------------------------------------------------------- */
.nav-btn-quote {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.005em;
    box-shadow: 0 2px 10px rgb(var(--c-accent) / 0.28);
    transition: background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.nav-btn-quote:hover {
    box-shadow: 0 6px 20px rgb(var(--c-accent) / 0.40);
    transform: translateY(-1px);
}
.nav-btn-quote:active { transform: translateY(0) scale(0.97); }

/* ============================================================================
   FLOATING ACTION DOCK
   ----------------------------------------------------------------------------
   The assistant, WhatsApp and back-to-top used to sit in opposite corners, so
   the eye had two places to look and the buttons collided with content on
   small screens. They now stack as one column on the inline-end edge.

   Each collapses to a circle and reveals its label on hover/focus. The label
   animates from the button edge rather than fading in place, so the motion
   reads as the control naming itself.
   ============================================================================ */

.gv-dock {
    position: fixed;
    inset-block-end: clamp(1rem, 2.2vw, 1.75rem);
    inset-inline-end: clamp(1rem, 2.2vw, 1.75rem);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    pointer-events: none;
}
.gv-dock > * { pointer-events: auto; }

/* Shared pill-that-collapses-to-a-circle */
.dock-btn {
    --dock-size: 52px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    height: var(--dock-size);
    padding: 0;
    border: 1px solid var(--border-quiet);
    border-radius: 999px;
    background: var(--dock-bg, var(--bg-raised));
    color: var(--dock-fg, var(--text-primary));
    box-shadow: 0 6px 22px rgb(var(--c-shadow) / calc(var(--shadow-strength) * 0.9));
    text-decoration: none;
    overflow: hidden;
    transition: gap var(--dur-base) var(--ease-out),
                padding var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.dock-btn-icon {
    display: grid;
    place-items: center;
    width: var(--dock-size);
    height: var(--dock-size);
    flex: none;
}
.dock-btn-icon svg { width: 22px; height: 22px; }

/* The label is laid out but clipped to zero width until hover, so the button
   grows from the circle instead of popping a detached tooltip. */
.dock-btn-label {
    display: block;
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    transition: max-width 320ms var(--ease-out),
                opacity 200ms var(--ease-out),
                margin var(--dur-base) var(--ease-out);
}

.dock-btn:hover,
.dock-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgb(var(--c-shadow) / calc(var(--shadow-strength) * 1.2));
}

.dock-btn:hover .dock-btn-label,
.dock-btn:focus-visible .dock-btn-label {
    max-width: 220px;
    opacity: 1;
    margin-inline-end: 1.15rem;
}

/* WhatsApp keeps its brand green in both themes. */
.dock-btn.is-whatsapp {
    --dock-bg: #1FA855;
    --dock-fg: #FFFFFF;
    border-color: rgb(255 255 255 / 0.16);
}
.dock-btn.is-whatsapp:hover { --dock-bg: #1B934A; }

/* The assistant carries the brand blue. */
.dock-btn.is-assistant {
    --dock-bg: rgb(var(--c-blue));
    --dock-fg: #FFFFFF;
    border-color: rgb(255 255 255 / 0.14);
}
.dock-btn.is-assistant:hover { --dock-bg: rgb(var(--c-blue-light)); }

/* Back to top is the quiet one — it only appears once there is somewhere to
   go back to, and it never grows a label. */
.gv-dock .back-to-top {
    position: static;
    width: 44px;
    height: 44px;
    inset: auto;
    margin: 0;
}

@media (max-width: 639px) {
    .dock-btn { --dock-size: 48px; }
    .dock-btn-label { font-size: 0.8rem; }
    .gv-dock { gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dock-btn, .dock-btn-label { transition: none; }
    .dock-btn:hover, .dock-btn:focus-visible { transform: none; }
}

/* --- Assistant inside the dock ---------------------------------------------
   #aiBot was fixed-positioned in its own corner. Inside the dock it becomes a
   normal flow item, but it must stay `relative` so the chat panel keeps
   anchoring to it — the panel is absolutely positioned against this element,
   and making it static would send the panel to the page corner. */
.gv-dock .ai-bot {
    position: relative;
    inset: auto;
    z-index: auto;
}

/* The toggle now inherits .dock-btn, so drop the old bespoke pill metrics. */
.gv-dock .ai-bot-toggle {
    position: relative;
    inset: auto;
    box-shadow: 0 6px 22px rgb(var(--c-shadow) / calc(var(--shadow-strength) * 0.9));
}

/* Panel opens upward from the button, aligned to the dock edge. */
.gv-dock .ai-bot-panel {
    inset-block-end: calc(100% + 0.7rem);
    inset-inline-end: 0;
    inset-inline-start: auto;
    transform-origin: bottom right;
}
html[dir="rtl"] .gv-dock .ai-bot-panel { transform-origin: bottom left; }

@media (max-width: 480px) {
    .gv-dock .ai-bot-panel {
        position: fixed;
        inset-inline: 0.75rem;
        inset-block-end: 5.5rem;
        width: auto;
    }
}

/* ============================================================================
   FOOTER — matched to the pill language
   ----------------------------------------------------------------------------
   The footer stays dark in both themes, so in light mode it reads as a single
   deep card closing the page — the same gesture as the floating nav chips at
   the top, bookending the content.
   ============================================================================ */

footer {
    border-radius: clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px) 0 0;
    padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(1.5rem, 2.5vw, 2rem);
    box-shadow: 0 -18px 50px rgb(var(--c-shadow) / calc(var(--shadow-strength) * 0.5));
}

/* Soften the accent hairline into a wider, quieter gradient. */
footer::before {
    inset-inline: 8%;
    background: linear-gradient(90deg,
        transparent,
        rgb(var(--c-accent) / 0.10) 18%,
        rgb(var(--c-accent) / 0.60) 50%,
        rgb(var(--c-accent) / 0.10) 82%,
        transparent);
}

footer .footer-heading {
    position: relative;
    padding-block-end: 0.65rem;
    margin-block-end: 0.35rem;
}
footer .footer-heading::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: rgb(var(--c-accent) / 0.7);
}

/* Links sit on a quiet rail that lights up on hover. */
footer ul a,
footer li a {
    padding-block: 0.15rem;
    font-size: 0.9rem;
}

/* Certification chips as pills, matching the credential tags in the hero. */
footer .px-3.py-1 {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding-inline: 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-quiet);
    background: var(--surface-1);
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Bottom bar reads as a separate quiet row. */
footer .border-t {
    border-color: var(--border-quiet);
    margin-block-start: clamp(2rem, 4vw, 3rem);
    padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
}

footer .footer-logo {
    height: clamp(38px, 4vw, 50px);
    margin-block-end: 1.35rem;
}

/* The Arabic brand line under the description is the one warm note down here. */
footer .text-gvco-gold {
    color: var(--accent);
    font-size: 1rem;
    line-height: 1.7;
}

/* --- Dock order ------------------------------------------------------------
   The three controls are appended by different init functions, so DOM order is
   an accident of call sequence. Flex order pins the intent: the two
   conversational actions sit together, the utility last. */
.gv-dock .ai-bot          { order: 1; }
.gv-dock .dock-btn.is-whatsapp { order: 2; }
.gv-dock .back-to-top     { order: 3; }

/* --- Scroll cue clears the dock --------------------------------------------
   It previously shared the inline-end edge with the dock and landed between
   two buttons. Centring it keeps it out of the way in both directions. */
.hero-scroll {
    /* inset-inline:0 sets BOTH sides; an inset-inline-end:auto after it
       re-anchors the element to the start edge instead of centring it. */
    inset-inline: 0;
    margin-inline: auto;
    width: -moz-fit-content;
    width: fit-content;
}

/* --- Chat panel anchoring --------------------------------------------------
   The panel inherited `position: fixed` from its old corner placement. Inside
   the dock that made `inset-block-end: calc(100% + …)` resolve against the
   VIEWPORT — 911px from the bottom — so the panel opened completely off the
   top of the screen. It must be absolute against .ai-bot to anchor to the
   button it belongs to. */
.gv-dock .ai-bot {
    position: relative !important;
    inset: auto !important;
}

.gv-dock .ai-bot-panel {
    position: absolute !important;
    inset-block-end: calc(100% + 0.75rem) !important;
    inset-block-start: auto !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
}

/* Below the fold of a phone the panel is taller than the space above the
   button, so it goes back to being viewport-anchored with explicit bounds. */
@media (max-width: 560px) {
    .gv-dock .ai-bot-panel {
        position: fixed !important;
        inset-inline: 0.75rem !important;
        inset-block-end: 5.75rem !important;
        inset-block-start: auto !important;
        width: auto !important;
        max-height: min(70vh, 460px);
    }
}

/* Panel opens toward the page interior, away from whichever edge the dock is
   pinned to. Physical sides here on purpose: the logical mapping resolved
   against the wrong edge and pushed the panel off-screen. */
html[dir="rtl"] .gv-dock .ai-bot-panel { left: 0 !important;  right: auto !important; }
html[dir="ltr"] .gv-dock .ai-bot-panel { right: 0 !important; left: auto !important; }

/* ============================================================================
   ROUND 3
   ============================================================================ */

/* --- Dock buttons match the back-to-top size -------------------------------
   52px made the two conversational actions read heavier than the utility they
   sit beside. All three are now the same 44px circle. */
.dock-btn { --dock-size: 44px; }
.dock-btn-icon svg { width: 19px; height: 19px; }
.dock-btn-label { font-size: 0.8rem; }
.dock-btn:hover .dock-btn-label,
.dock-btn:focus-visible .dock-btn-label { margin-inline-end: 1rem; }

@media (max-width: 639px) {
    .dock-btn { --dock-size: 42px; }
}

/* --- Theme chip on the opposite edge ---------------------------------------
   Moved out of the nav for two reasons: it frees width in the English pill,
   and a display preference is a page-level utility rather than navigation.
   It sits on the inline-start edge so it never competes with the contact
   actions on the other side. */
.gv-dock.is-start {
    inset-inline-end: auto;
    inset-inline-start: clamp(1rem, 2.2vw, 1.75rem);
    align-items: flex-start;
}

/* Its label grows the other way, away from the screen edge. */
.gv-dock.is-start .dock-btn:hover .dock-btn-label,
.gv-dock.is-start .dock-btn:focus-visible .dock-btn-label {
    margin-inline-end: 0;
    margin-inline-start: 1rem;
}
.gv-dock.is-start .dock-btn { flex-direction: row-reverse; }

/* Glass, matching the nav chips rather than the solid contact buttons —
   it is a setting, not a call to action. */
.dock-btn.is-theme {
    --dock-bg: rgb(var(--c-bg-raised) / 0.62);
    --dock-fg: var(--text-primary);
    border-color: var(--border-quiet);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}
.dock-btn.is-theme:hover {
    --dock-bg: rgb(var(--c-bg-raised) / 0.85);
    --dock-fg: var(--accent);
    border-color: var(--border-loud);
}

.dock-btn.is-theme .theme-icon-sun,
.dock-btn.is-theme .theme-icon-moon,
.dock-btn.is-theme .theme-icon-auto { display: none; }
.dock-btn.is-theme[data-mode="dark"]  .theme-icon-moon { display: block; }
.dock-btn.is-theme[data-mode="light"] .theme-icon-sun  { display: block; }
.dock-btn.is-theme[data-mode="auto"]  .theme-icon-auto { display: block; }

/* On a light page the chip needs a more opaque ground, same reason as the
   nav chips: 0.62 over bright content composites to near-invisible. */
:root[data-theme="light"] .dock-btn.is-theme { --dock-bg: rgb(var(--c-bg-raised) / 0.92); }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .dock-btn.is-theme { --dock-bg: rgb(var(--c-bg-raised) / 0.92); }
}

/* --- Quote button: glass, matching the navbar flow -------------------------
   Tinted glass rather than clear: this is still the primary conversion action,
   so it keeps an accent ground dense enough to hold AA against its label. */
.nav-btn-quote {
    border-radius: 999px;
    border: 1px solid rgb(var(--c-accent-hi) / 0.55);
    /* Longhands, not the `background` shorthand: the shorthand resets
       background-color to transparent, which leaves the button with no solid
       ground at all if the gradient does not paint, and makes automated
       contrast tooling read straight through to whatever is behind it. */
    background-color: rgb(var(--c-accent) / 0.9);
    background-image: linear-gradient(135deg,
        rgb(var(--c-accent) / 0.55),
        rgb(var(--c-accent-hi) / 0.45));
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow: 0 2px 12px rgb(var(--c-accent) / 0.26),
                inset 0 1px 0 rgb(255 255 255 / 0.18);
}

.nav-btn-quote:hover {
    background-color: rgb(var(--c-accent));
    background-image: linear-gradient(135deg,
        rgb(var(--c-accent) / 0.6),
        rgb(var(--c-accent-hi) / 0.55));
    border-color: rgb(var(--c-accent-hi) / 0.85);
    box-shadow: 0 6px 22px rgb(var(--c-accent) / 0.38),
                inset 0 1px 0 rgb(255 255 255 / 0.22);
}

/* The mobile-menu quote button gets the same treatment. */
.mobile-menu-foot .btn-corporate {
    border-radius: 999px;
    border: 1px solid rgb(var(--c-accent-hi) / 0.55);
    background-color: rgb(var(--c-accent) / 0.94);
    background-image: linear-gradient(135deg,
        rgb(var(--c-accent) / 0.5),
        rgb(var(--c-accent-hi) / 0.45));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
}

/* The assistant toggle carries its own legacy height; pin it to the dock size
   so all four floating controls are the same circle. */
.gv-dock .ai-bot-toggle.dock-btn {
    height: var(--dock-size) !important;
    min-height: 0 !important;
    padding: 0 !important;
}
.gv-dock .ai-bot-toggle .dock-btn-icon {
    width: var(--dock-size) !important;
    height: var(--dock-size) !important;
}

/* ============================================================================
   ROUND 4
   ============================================================================ */

/* --- Quote button: actually a pill -----------------------------------------
   A legacy rule near the top of this file forces
   `border-radius: 0.25rem !important` onto every button class, which is why
   the pill radius never took. Beaten here with a higher-specificity selector
   rather than by editing that rule, which other pages still rely on. */
#navbar .nav-btn-quote,
.mobile-menu-foot .btn-corporate {
    border-radius: 14px !important;
}

/* More glass: the tint drops so the blur actually reads, with the label held
   above AA by a denser inner layer rather than by raw opacity. */
#navbar .nav-btn-quote {
    background-color: rgb(var(--c-accent) / 0.88);
    background-image:
        linear-gradient(135deg,
            rgb(255 255 255 / 0.22) 0%,
            rgb(255 255 255 / 0.04) 42%,
            rgb(var(--c-accent-hi) / 0.30) 100%);
    border: 1px solid rgb(255 255 255 / 0.28);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 4px 18px rgb(var(--c-accent) / 0.30),
        inset 0 1px 0 rgb(255 255 255 / 0.35),
        inset 0 -1px 0 rgb(var(--c-accent-hi) / 0.35);
    padding-inline: 1.35rem;
    height: 42px;
}

#navbar .nav-btn-quote:hover {
    background-color: rgb(var(--c-accent) / 0.95);
    border-color: rgb(255 255 255 / 0.42);
    box-shadow:
        0 8px 26px rgb(var(--c-accent) / 0.42),
        inset 0 1px 0 rgb(255 255 255 / 0.45);
}

/* ============================================================================
   UNIFIED SECTION HEADER
   ----------------------------------------------------------------------------
   Five sections centred their header and six ran it down the inline-start edge
   inside a grid column, so the page had no consistent entry rhythm. Every
   section now opens the same way: eyebrow, title, lead — centred, at the top,
   above whatever layout follows.
   ============================================================================ */

.section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    max-width: 60rem;
    margin-inline: auto;
    margin-block-end: clamp(3rem, 5vw, 4.5rem);
}

/* Eyebrow: a hairline-bounded chip, quieter than the old filled pill. */
.section-head .enterprise-label,
.section-head > .inline-flex {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--border-quiet);
    background: var(--surface-1);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    white-space: nowrap;
}
html[dir="ltr"] .section-head .enterprise-label { text-transform: uppercase; }

/* The chip is sometimes a wrapper around the label; avoid double-chipping. */
.section-head > .inline-flex .enterprise-label {
    padding: 0;
    border: 0;
    background: none;
}

/* A short accent tick above the title ties the header to the hero rule. */
.section-head::before {
    content: "";
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgb(var(--c-accent) / 0.15),
        var(--accent),
        rgb(var(--c-accent) / 0.15));
    order: -1;
}

.section-head .section-headline,
.section-head .official-overview-title,
.section-head h2 {
    margin: 0 !important;
    max-width: 22ch;
    text-align: center !important;
    text-wrap: balance;
}

.section-head .section-subheadline,
.section-head .official-overview-lead,
.section-head > p:last-child {
    margin: 0 !important;
    max-width: 62ch;
    text-align: center !important;
    color: var(--text-secondary);
}

/* Overview and Defense used bespoke two-column header grids. */
.section-head.official-overview-header,
.section-head.defense-section-head,
.section-head .defense-heading-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center !important;
    grid-template-columns: none !important;
}

/* The old centred heads carried their own bottom margin utilities. */
.section-head.mb-20, .section-head.mb-16 { margin-block-end: clamp(3rem, 5vw, 4.5rem) !important; }

@media (max-width: 639px) {
    .section-head { gap: 1rem; }
    .section-head .section-headline,
    .section-head h2 { max-width: 100%; }
}

/* ============================================================================
   FOOTER — rebuilt
   ----------------------------------------------------------------------------
   Four aligned columns on a shared baseline, social row under the brand,
   contact entries as icon + value pairs so the column scans as data rather
   than as more links.
   ============================================================================ */

.site-footer {
    position: relative;
    margin-block-start: clamp(3rem, 7vw, 6rem);
    padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2rem);
    border-radius: clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px) 0 0;
    border: 1px solid var(--border-quiet);
    border-block-end: 0;
    background: var(--bg-raised);
    box-shadow: 0 -18px 50px rgb(var(--c-shadow) / calc(var(--shadow-strength) * 0.5));
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent,
        rgb(var(--c-accent) / 0.55) 50%, transparent);
}

.footer-inner {
    max-width: 1440px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;          /* one shared baseline across all four */
}

.footer-brand { display: flex; flex-direction: column; gap: 1.1rem; }
.footer-logo  { height: clamp(38px, 4vw, 48px); width: auto; }
.footer-about {
    margin: 0;
    max-width: 42ch;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.footer-social { display: flex; gap: 0.6rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.footer-social li { margin: 0; }
.footer-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border-quiet);
    background: var(--surface-1);
    color: var(--text-secondary);
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.footer-social a svg { width: 17px; height: 17px; }
.footer-social a:hover {
    color: var(--accent-on);
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.footer-col { display: flex; flex-direction: column; gap: 1rem; }
.footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col li { margin: 0; }

.site-footer .footer-heading {
    position: relative;
    margin: 0 0 0.35rem;
    padding-block-end: 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
}
html[dir="rtl"] .site-footer .footer-heading { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
.site-footer .footer-heading::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.footer-col a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--accent); }

/* Contact rows read as icon + value, aligned on the icon. */
.footer-contact-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: 0.7rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.footer-contact-row svg { width: 17px; height: 17px; margin-block-start: 2px; color: var(--accent); }

.footer-certs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.4rem; }
.footer-cert {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding-inline: 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border-quiet);
    background: var(--surface-1);
    color: var(--text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.footer-bottom {
    max-width: 1440px;
    margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
    padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
    border-block-start: 1px solid var(--border-quiet);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}
.footer-bottom .footer-legal { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.footer-since strong { color: var(--accent); font-weight: 700; margin-inline: 0.25rem; }

@media (max-width: 1023px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
    .footer-inner { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Quote button: tinted glass, softened corners -------------------------
   A solid accent fill read as a yellow block against the dark glass pill it
   sits in. It is now genuinely translucent — a gold tint over the pill's own
   blur — with the label in gold rather than dark, which is what lets the
   background stay transparent and still clear AA.

   Radius is 14px: softened, deliberately not a pill, so it reads as part of
   the navbar's rounded language without becoming a lozenge. */
#navbar .nav-btn-quote {
    /* Gold-on-gold is self-defeating: the tint lightens the very ground the
       gold label needs to contrast against (measured 4.37:1). The tint drops
       and the label moves to the lighter accent, which keeps the glass look
       while clearing AA. */
    background-color: rgb(var(--c-accent) / 0.09);
    background-image: linear-gradient(135deg,
        rgb(255 255 255 / 0.08) 0%,
        rgb(255 255 255 / 0.01) 45%,
        rgb(var(--c-accent) / 0.07) 100%);
    border: 1px solid rgb(var(--c-accent) / 0.60);
    color: var(--accent-hover);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 2px 12px rgb(var(--c-accent) / 0.16),
        inset 0 1px 0 rgb(255 255 255 / 0.16);
}

#navbar .nav-btn-quote:hover {
    background-color: rgb(var(--c-accent) / 0.30);
    border-color: rgb(var(--c-accent) / 0.85);
    color: var(--accent-hover);
    box-shadow:
        0 6px 20px rgb(var(--c-accent) / 0.28),
        inset 0 1px 0 rgb(255 255 255 / 0.24);
}

.mobile-menu-foot .btn-corporate {
    background-color: rgb(var(--c-accent) / 0.18);
    background-image: none;
    border: 1px solid rgb(var(--c-accent) / 0.55);
    color: var(--accent);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
}

/* ============================================================================
   ROUND 5
   ============================================================================ */

/* --- Footer logo was being stretched ---------------------------------------
   .footer-brand is a flex column, and the default `align-items: stretch` sizes
   children across the cross axis — so an <img> with a set height and auto
   width got forced to the full column width (377px instead of 206px) and
   distorted. Nothing was setting `width`; the flex default was. */
.footer-brand { align-items: flex-start; }

.site-footer .footer-logo {
    align-self: flex-start;
    height: clamp(38px, 4vw, 50px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ============================================================================
   FLOATING RAIL
   ----------------------------------------------------------------------------
   Two bottom-corner clusters were covering content and reading as clutter.
   Everything is now one vertical rail, centred on the inline-end edge and
   tucked tight against it, where the page's centred max-width leaves a gutter.

   Labels are tooltips that slide out of the rail rather than the buttons
   growing — that keeps the rail's geometry fixed, so nothing shifts and the
   group always reads as one deliberate object.
   ============================================================================ */

.gv-dock {
    position: fixed;
    inset-block-start: 50%;
    inset-block-end: auto;
    inset-inline-end: clamp(0.4rem, 1vw, 0.85rem);
    inset-inline-start: auto;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--border-quiet);
    background: rgb(var(--c-bg-raised) / var(--nav-chip-alpha, 0.62));
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 10px 34px rgb(var(--c-shadow) / calc(var(--shadow-strength) * 0.8));
    pointer-events: auto;
}

/* The separate start-side dock is retired. */
.gv-dock.is-start { display: none !important; }

:root[data-theme="light"] .gv-dock { --nav-chip-alpha: 0.90; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .gv-dock { --nav-chip-alpha: 0.90; }
}

.gv-dock .ai-bot { order: 1; }
.gv-dock .dock-btn.is-whatsapp { order: 2; }
.gv-dock .dock-btn.is-theme { order: 3; }
.gv-dock .back-to-top { order: 4; }

/* Buttons are fixed-size circles inside the rail. */
.gv-dock .dock-btn,
.gv-dock .back-to-top {
    --dock-size: 40px;
    width: var(--dock-size);
    height: var(--dock-size);
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    overflow: visible;          /* let the tooltip escape the button */
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.gv-dock .dock-btn:hover,
.gv-dock .back-to-top:hover { transform: scale(1.06); box-shadow: none; }
.gv-dock .dock-btn:active { transform: scale(0.94); }

.gv-dock .dock-btn-icon { width: var(--dock-size); height: var(--dock-size); }
.gv-dock .dock-btn-icon svg { width: 18px; height: 18px; }

/* --- Tooltip labels -------------------------------------------------------- */
.gv-dock .dock-btn-label {
    position: absolute;
    inset-inline-end: calc(100% + 0.6rem);
    inset-block-start: 50%;
    max-width: none;
    margin: 0 !important;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--border-quiet);
    background: rgb(var(--c-bg-inset) / 0.96);
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(6px);
    transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
    box-shadow: 0 6px 18px rgb(var(--c-shadow) / 0.35);
}
html[dir="rtl"] .gv-dock .dock-btn-label { transform: translateY(-50%) translateX(-6px); }

.gv-dock .dock-btn:hover .dock-btn-label,
.gv-dock .dock-btn:focus-visible .dock-btn-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Separator above the utility pair. */
.gv-dock .dock-btn.is-theme::before {
    content: "";
    position: absolute;
    inset-block-start: -0.32rem;
    inset-inline: 20%;
    height: 1px;
    background: var(--border-quiet);
}

/* --- Chat panel opens beside the rail -------------------------------------- */
.gv-dock .ai-bot-panel {
    inset-block-end: auto !important;
    inset-block-start: 50% !important;
    transform: translateY(-50%);
    transform-origin: center right;
}
html[dir="rtl"] .gv-dock .ai-bot-panel { transform-origin: center left; }
html[dir="rtl"] .gv-dock .ai-bot-panel { left: calc(100% + 0.7rem) !important;  right: auto !important; }
html[dir="ltr"] .gv-dock .ai-bot-panel { right: calc(100% + 0.7rem) !important; left: auto !important; }

.gv-dock .ai-bot.is-open .ai-bot-panel { transform: translateY(-50%) scale(1); }

@media (max-width: 639px) {
    .gv-dock .dock-btn,
    .gv-dock .back-to-top { --dock-size: 36px; }
    .gv-dock .dock-btn-icon svg { width: 16px; height: 16px; }
    .gv-dock { gap: 0.2rem; padding: 0.28rem; }
    .gv-dock .ai-bot-panel {
        position: fixed !important;
        inset-inline: 0.75rem !important;
        inset-block-start: auto !important;
        inset-block-end: 1rem !important;
        transform: none !important;
        width: auto !important;
        max-height: min(70vh, 460px);
    }
}

/* --- Portalled chat panel --------------------------------------------------
   Moved to <body> by initAiBot() so its fixed positioning resolves against the
   viewport instead of the 40px rail. Visibility keys off its own .is-open,
   since it is no longer a descendant of .ai-bot. */
.ai-bot-panel--portal {
    position: fixed;
    z-index: 61;
    inset-block-start: 50%;
    inset-block-end: auto;
    transform: translateY(-50%) scale(0.98);
    transform-origin: center center;
    width: min(390px, calc(100vw - 2rem));
    max-height: min(560px, calc(100dvh - 4rem));
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease-out), visibility .22s var(--ease-out),
                transform .22s var(--ease-out);
}

/* Opens beside the rail, toward the page interior.

   ONE logical rule, not a pair of physical left/right rules per direction:
   the rail is pinned to inset-inline-end, so the panel simply starts its own
   inline-end there too and grows inward. The earlier physical rules were also
   losing to a leftover  declaration further up the cascade, which is
   why the panel opened on the far side of the screen. */
/* `html[dir]` is load-bearing, not decoration. A legacy rule
   `html[dir="rtl"] .ai-bot-panel { right: ... !important; left: auto !important }`
   has specificity (0,2,1); a bare `.ai-bot-panel--portal` is (0,1,0), so even
   with !important it lost and the panel opened on the far side of the screen.
   Matching (0,2,1) and coming later in the file wins the tie — and `[dir]`
   with no value matches both directions, so this stays one rule. */
html[dir] .ai-bot-panel--portal {
    inset-inline-end: calc(clamp(0.4rem, 1vw, 0.85rem) + 3.4rem) !important;
    inset-inline-start: auto !important;
}

.ai-bot-panel--portal.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* Phones: a bottom sheet, which is the only thing that fits beside a rail on
   a 390px screen. */
@media (max-width: 700px) {
    html[dir] .ai-bot-panel--portal {
        inset-block-start: auto;
        inset-block-end: 1rem;
        inset-inline-start: 0.75rem !important;
        inset-inline-end: 0.75rem !important;
        width: auto;
        max-height: min(70dvh, 460px);
        transform: translateY(12px) scale(0.99);
    }
    .ai-bot-panel--portal.is-open { transform: translateY(0) scale(1); }
}

/* ============================================================================
   AMBIENT SCROLL GLOW
   ----------------------------------------------------------------------------
   A single soft light that eases toward whichever section holds the viewport
   centre, drifting side to side as you move down the page. It reads as a lamp
   travelling across metal rather than as a decorative blob.

   Architecture note: this is one fixed, blurred element moved only by
   transform, so scrolling never repaints or relayouts. It sits above the body
   ground and below all content, which is why the section grounds below have to
   stop being opaque — an opaque section would simply hide it.
   ============================================================================ */

:root {
    --c-glow: 46 125 209;     /* brand blue-light */
    --glow-alpha: 0.34;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) { --c-glow: 30 77 140; --glow-alpha: 0.13; }
}
:root[data-theme="light"] { --c-glow: 30 77 140; --glow-alpha: 0.13; }
:root[data-theme="dark"]  { --c-glow: 46 125 209; --glow-alpha: 0.34; }

.bg-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;          /* the glow can never affect layout */
}

.bg-glow-orb {
    position: absolute;
    /* PHYSICAL top/left on purpose, not logical insets.
       `inset-inline-start: 0` resolves to `right: 0` under RTL, which flipped
       the orb's anchor to the opposite edge — the JS then added its vw offset
       from that flipped origin and pushed the light off the right of the
       screen (measured centre 1563px on a 1440px viewport).
       This is ambient lighting, not content: it should sit in the same place
       regardless of reading direction, so the origin must not flip. */
    top: 0;
    left: 0;
    width: clamp(360px, 54vw, 780px);
    aspect-ratio: 1;
    border-radius: 50%;
    /* NO filter: blur() here, deliberately.
       A blurred layer this large has to be re-rasterised by the compositor on
       every frame it moves: measured median frame time went 16.7ms -> 33-50ms
       and janky frames 15% -> 100% at 4x CPU throttle. A multi-stop radial
       gradient is already soft, costs one cheap paint, and moves for free
       because only the transform changes. */
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--c-glow) / var(--glow-alpha)) 0%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.72)) 22%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.38)) 44%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.14)) 64%,
        rgb(var(--c-glow) / 0) 82%);
    will-change: transform;
    transform: translateZ(0);
}

/* A second, smaller counter-light keeps the field from reading as one flat
   circle. It trails the first and leans on the accent instead of the blue. */
.bg-glow-orb.is-trail {
    width: clamp(220px, 30vw, 460px);
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--c-accent) / calc(var(--glow-alpha) * 0.30)) 0%,
        rgb(var(--c-accent) / calc(var(--glow-alpha) * 0.12)) 40%,
        rgb(var(--c-accent) / 0) 78%);
}

/* --- Let the glow through ---------------------------------------------------
   These sections painted the base ground opaquely, which is identical to what
   <body> already paints, so dropping it costs nothing visually and is what
   makes the glow visible at all. */
main > section.bg-gvco-navy,
main > section.official-overview {
    background-color: transparent !important;
}

/* The two alternating grounds stay, just translucent enough to read the light
   behind them. */
.section-gradient-1, .section-gradient-2 { position: relative; }

/* Content must sit above the glow layer. */
main > section > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    /* Keep the atmosphere, drop the travel. */
    .bg-glow-orb { transition: none; }
}

/* --- Footer list alignment in RTL ------------------------------------------
   A global `html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.5rem }`
   indents lists for Arabic prose. Its specificity (0,1,2) outranks
   `.footer-col ul` (0,1,1), so the footer's navigation lists were pushed 24px
   off the inline-start edge while their headings stayed put — the headings
   read as "not under" their links.

   These are navigation lists, not prose, so the indent should not apply.
   Scoped selectors here match (0,2,2) and win cleanly. */
html[dir="rtl"] .footer-col ul,
html[dir="rtl"] .footer-social,
html[dir="ltr"] .footer-col ul,
html[dir="ltr"] .footer-social {
    padding-inline: 0;
    margin-inline: 0;
}

/* Contact rows are a grid, so their icon column defines the edge; make sure
   the list itself starts flush with the heading too. */
html[dir="rtl"] .footer-contact ul,
html[dir="ltr"] .footer-contact ul {
    padding-inline: 0;
}

/* ============================================================================
   SMALL-SCREEN FIXES
   ============================================================================ */

/* --- 1. Hero read as three bands on phones ---------------------------------
   .hero-inner::before is a reading panel sized to the CONTENT box. On desktop
   it is a horizontal gradient beside the copy, which is invisible as a shape.
   On a phone the copy is full width, so the panel became an opaque rectangle
   with the raw photo showing above and below it — the "extra space" top and
   bottom.

   On phones it becomes a full-bleed vertical wash instead: one continuous
   image with legibility over it, no visible edges. */
@media (max-width: 767px) {
    .hero-inner::before {
        inset-block: -30vh;          /* clipped by .hero's overflow */
        inset-inline: -25vw;
        width: 150vw;
        background: linear-gradient(180deg,
            rgb(var(--c-bg-base) / 0.42) 0%,
            rgb(var(--c-bg-base) / 0.78) 22%,
            rgb(var(--c-bg-base) / 0.86) 50%,
            rgb(var(--c-bg-base) / 0.80) 76%,
            rgb(var(--c-bg-base) / 0.55) 100%);
    }

    /* The media must fill the whole hero, poster included — the video itself
       is hidden below 1024px by an earlier rule, which is intended. */
    .hero { min-height: 100svh; }
    .hero-media, .hero .hero-image { position: absolute; inset: 0; }
    .hero .hero-image { width: 100%; height: 100%; object-fit: cover; }
}

/* --- 2. Hero buttons shrank unevenly ---------------------------------------
   They were flex items with different content lengths, so one wrapped to two
   lines and the pair ended up mismatched. Equal-width and non-wrapping. */
@media (max-width: 639px) {
    .hero .hero-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
        width: 100%;
    }
    .hero .hero-btn-primary,
    .hero .hero-btn-secondary {
        width: 100%;
        min-height: 50px;
        padding-inline: 0.5rem;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        font-size: 0.82rem;
    }
    .hero .hero-cta-arrow { margin-inline-start: 0.35rem; width: 15px; height: 15px; }
}

@media (max-width: 380px) {
    .hero .hero-cta { grid-template-columns: 1fr; }
}

/* --- 3. Assistant button overflowed the rail -------------------------------
   Only its height was pinned to the dock size, so its legacy width still
   applied and it bulged out of the rail's rounded container. */
.gv-dock .ai-bot-toggle.dock-btn {
    width: var(--dock-size) !important;
    height: var(--dock-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    flex: none;
}
.gv-dock .ai-bot { width: var(--dock-size); display: flex; }

/* --- 5. Quote button clipped in the mobile menu ----------------------------
   A fixed 44px height plus a nowrap label wider than the remaining space cut
   the text. It now sizes to its content and wraps as a block instead. */
.mobile-menu-foot {
    flex-wrap: wrap;
    gap: 0.6rem;
}
.mobile-menu-foot .btn-corporate {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    min-height: 46px;
    height: auto;
    padding: 0.7rem 1.1rem;
    white-space: nowrap;
    font-size: 0.86rem;
    line-height: 1.2;
    text-align: center;
}
.mobile-menu-foot .lang-btn { flex: 0 0 auto; }

@media (max-width: 360px) {
    .mobile-menu-foot .btn-corporate { flex: 1 1 100%; }
}

/* Tablets sit between the phone grid and the desktop hero, so the CTA pair
   fell back to natural widths and went uneven again (180px vs 143px). Equal
   columns, capped so they do not stretch across the whole tablet width. */
@media (min-width: 640px) and (max-width: 1023px) {
    .hero .hero-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        width: 100%;
        max-width: 430px;
    }
    .hero .hero-btn-primary,
    .hero .hero-btn-secondary {
        width: 100%;
        min-height: 52px;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
    }
}

/* ============================================================================
   CLIENT LOGO WALL — theme-aware
   ----------------------------------------------------------------------------
   Goal: the section ground should be the dark page colour in dark mode.

   Constraint found in the assets, not the CSS: 8 of the 14 marks are PNG
   colour-type 2 — no alpha channel, white background baked into the file
   (arabian-cement, pte, national-paper, ncms, syntech, rajhi-steel, sgn,
   city-cement). Only 6 are transparent.

   That rules out the usual dark-wall treatment. `filter: brightness(0)
   invert(1)` transforms the whole opaque rectangle rather than the mark, so
   those eight rendered as blank white blocks.

   What works with these files: the TILE takes the dark page surface, and each
   mark sits on its own small light plate sized to the logo. The section reads
   dark, the eight baked-in backgrounds merge invisibly into their plate, and
   every mark stays legible in full brand colour.

   To go fully dark — marks directly on the tile with no plate — the eight PNGs
   need re-exporting with transparency (or a white/mono variant supplied).
   ============================================================================ */

.official-client-item,
.logo-marquee-item {
    background: rgb(var(--c-bg-raised) / 0.55);
    border: 1px solid var(--border-quiet);
    border-radius: 12px;
    transition: background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.official-client-item img,
.logo-marquee-item img {
    background: #FFFFFF;
    padding: 0.5rem 0.65rem;
    border-radius: 7px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
    transition: transform var(--dur-fast) var(--ease-out);
}

.official-client-item:hover,
.logo-marquee-item:hover {
    background: rgb(var(--c-bg-raised) / 0.85);
    border-color: var(--border-loud);
}
.official-client-item:hover img,
.logo-marquee-item:hover img { transform: scale(1.03); }

/* Light mode: the tile itself is already light, so the plate is redundant —
   the marks sit straight on the card. */
:root[data-theme="light"] .official-client-item,
:root[data-theme="light"] .logo-marquee-item {
    background: #FFFFFF;
    border-color: rgb(var(--c-ink) / 0.10);
}
:root[data-theme="light"] .official-client-item img,
:root[data-theme="light"] .logo-marquee-item img {
    background: none;
    padding: 0;
    box-shadow: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .official-client-item,
    :root:not([data-theme="dark"]) .logo-marquee-item {
        background: #FFFFFF;
        border-color: rgb(var(--c-ink) / 0.10);
    }
    :root:not([data-theme="dark"]) .official-client-item img,
    :root:not([data-theme="dark"]) .logo-marquee-item img {
        background: none;
        padding: 0;
        box-shadow: none;
    }
}

/* Each tile carries its own border now, so the grid's shared hairlines go. */
.official-client-grid { gap: 0.6rem; background: none; border: 0; }

/* ============================================================================
   CONTACT CARDS + RAIL CLEARANCE ON SMALL SCREENS
   ============================================================================ */

/* --- Ragged card widths ----------------------------------------------------
   A mobile rule set `margin-left/right: auto` on the cards. Auto margins on a
   GRID ITEM override the default `stretch`, so each card sized to its own
   content and centred — producing widths of 323/191/148/197/183 instead of one
   column width. Giving them an explicit width restores a single edge. */
@media (max-width: 1023px) {
    .contact-info-grid .contact-info-card {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        justify-self: stretch;
    }
}

/* --- Content must clear the floating rail ----------------------------------
   The rail is fixed to the inline-end edge and overlays the page. On phones
   the section containers only had 16px of padding there, so cards ran under
   it. This adds a gutter just wide enough for the rail, on the inline-end
   side only — in RTL that is the left, in LTR the right, which is where the
   rail actually sits in each direction. */
@media (max-width: 1023px) {
    /* Tablets carry the rail too, so the gutter runs to the desktop
       breakpoint, not just to the phone one. */
    main > section > .max-w-7xl,
    main > section > .max-w-6xl,
    main > section > .max-w-5xl {
        /* Derived from the rail, not guessed: its own inset + width + a gap.
           A rem-based guess fell 6px short because the tablet root font size
           is not 16px. */
        padding-inline-end: var(--rail-clearance);
    }
}

@media (max-width: 767px) {

    /* The hero USED to edge-align its copy, so it cleared the rail on its own.
       Now that the phone layout centres a full-width stack, it needs the same
       gutter as every other section or the chips run under the rail. */
    .hero .hero-inner { padding-inline-end: var(--rail-clearance); }

    /* Keep the rail as compact as possible so the gutter stays small. */
    .gv-dock { inset-inline-end: 0.35rem; padding: 0.25rem; gap: 0.18rem; }
    .gv-dock .dock-btn,
    .gv-dock .back-to-top { --dock-size: 34px; }
    :root { --rail-clearance: 62px; }   /* 34 + padding + inset + gap */
    .gv-dock .dock-btn-icon svg { width: 15px; height: 15px; }
}

/* Rail clearance token: the gutter sections leave for the floating rail.
   Tablet keeps the 40px buttons, phones drop to 34px (set above). */
:root { --rail-clearance: 76px; }

/* Phones run the smaller 34px buttons, so they need less clearance than the
   tablet default. This must come AFTER the base declaration: media-query rules
   carry no extra specificity, so source order decides. */
@media (max-width: 767px) {
    :root { --rail-clearance: 60px; }
}

/* --- Assistant toggle escaped the rail --------------------------------------
   A legacy rule left `position: relative; top: -11.9px` on the toggle from its
   old free-floating placement, so it sat 12px above its own wrapper and broke
   out of the top of the rail capsule. Reset all offsets inside the dock. */
.gv-dock .ai-bot-toggle,
.gv-dock .ai-bot-toggle.dock-btn {
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset-block: 0 !important;
    inset-inline: auto !important;
    margin: 0 !important;
    align-self: center;
}

/* Keep every rail child on the same axis so none can drift out of the capsule. */
.gv-dock > * { flex: none; align-self: center; }

/* ============================================================================
   MOBILE HERO
   ----------------------------------------------------------------------------
   The phone hero inherited the desktop column: start-aligned copy hugging one
   edge, with a large unused band above it. On a narrow screen a centred stack
   reads better and lets the type grow.
   ============================================================================ */
@media (max-width: 767px) {
    .hero { min-height: 100svh; }

    .hero .hero-inner {
        align-items: center;
        text-align: center;
        justify-content: center;
        padding-block: 6rem 4.5rem;
        /* Symmetric clearance, not just on the rail side: the copy is centred
           now, so padding only one edge would shift the optical centre off the
           middle of the screen. Equal padding keeps it centred AND clear. */
        padding-inline: var(--rail-clearance);
        gap: 0;
    }

    .hero .hero-eyebrow {
        justify-content: center !important;
        margin-block-end: 1.1rem;
        font-size: 0.66rem;
        letter-spacing: 0.16em;
    }

    .hero .hero-title {
        max-width: 100%;
        text-align: center !important;
        font-size: clamp(34px, 10vw, 51px);
        line-height: 1.28;
        margin-block-end: 1.15rem;
    }
    html[dir="ltr"] .hero .hero-title { line-height: 1.08; }

    .hero .hero-rule {
        margin-inline: auto;
        margin-block-end: 1.5rem;
        width: 56px;
        transform-origin: center;
    }

    .hero .hero-description {
        text-align: center !important;
        margin-inline: auto !important;
        max-width: 34ch;
        margin-block-end: 1.75rem;
        font-size: 1rem;
        line-height: 1.8;
    }

    .hero .hero-credentials {
        justify-content: center !important;
        margin-inline: auto;
        margin-block-end: 2rem;
        gap: 0.4rem;
    }

    .hero .hero-cta {
        justify-content: center !important;
        margin-inline: auto;
        margin-block-end: 2.5rem;
        max-width: 340px;
    }

    /* Stats become an even three-up band that anchors the bottom of the hero
       rather than trailing off to one side. */
    .hero .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        width: 100%;
        max-width: 340px;
        margin-inline: auto !important;
        padding-block-start: 1.5rem;
        justify-items: center;
        text-align: center !important;
    }
    .hero .hero-stats .stat-block { text-align: center; padding: 0 0.25rem; }
    .hero .hero-stats .stats-divider { display: none; }
    .hero .hero-stats .stat-number { font-size: 1.6rem; }
    .hero .hero-stats .stat-label { font-size: 0.66rem; line-height: 1.4; }

    .hero-scroll { display: none; }
}

@media (max-width: 380px) {
    .hero .hero-title { font-size: clamp(32px, 9.4vw, 40px); }
    .hero .hero-credentials .credential-tag-clean:last-child { display: none; }
}

/* Back-to-top hides with `scale(.9) translateY(12px)`. Inside the rail that
   transform pushed its box past the capsule edge even though the element is
   `visibility: hidden`. Dropping the transform keeps the rail's geometry fixed
   — and keeps its height stable when the button appears, so the vertically
   centred rail does not jump. */
.gv-dock .back-to-top { transform: none !important; }

/* With the rail gutter applied on both sides the phone content column is
   ~270px, which is too narrow for two side-by-side CTAs — the primary label
   wrapped to two lines. Stack them full width instead. */
@media (max-width: 767px) {
    .hero .hero-cta {
        grid-template-columns: 1fr !important;
        gap: 0.7rem;
        width: 100%;
        max-width: 300px;
    }
    .hero .hero-btn-primary,
    .hero .hero-btn-secondary {
        width: 100%;
        white-space: nowrap;
        font-size: 0.9rem;
        min-height: 52px;
    }
}

/* ============================================================================
   FOOTER — CENTRED ON SMALL SCREENS
   ----------------------------------------------------------------------------
   On one column the four blocks kept their desktop start-alignment, so the
   brand copy ran ragged down one edge, the gold ticks sat under the far end of
   their centred headings, and the contact rows drifted. Everything centres
   together below the tablet breakpoint.
   ============================================================================ */
@media (max-width: 1023px) {
    .footer-inner {
        justify-items: center;
        text-align: center;
    }

    /* Brand block */
    .footer-brand {
        align-items: center;
        text-align: center;
    }
    .site-footer .footer-logo { align-self: center; }
    .footer-about {
        text-align: center;
        margin-inline: auto;
        max-width: 38ch;
    }
    .footer-social { justify-content: center; }

    /* Link columns */
    .footer-col {
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .footer-col ul {
        align-items: center;
        width: 100%;
    }

    /* The heading rule moves under the middle of the centred label. */
    .site-footer .footer-heading {
        text-align: center;
        width: 100%;
    }
    .site-footer .footer-heading::after {
        inset-inline-start: 50%;
        transform: translateX(-50%);
    }
    html[dir="rtl"] .site-footer .footer-heading::after { transform: translateX(50%); }

    /* Contact rows: icon and value stay together as one centred pair rather
       than a two-column grid stretched across the block. */
    .footer-contact-row {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        text-align: center;
        width: 100%;
    }
    .footer-contact-row svg { margin-block-start: 0; flex: none; }

    .footer-certs { justify-content: center; }

    /* Bottom bar */
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.6rem;
    }
    .footer-bottom .footer-legal { text-align: center; }
}

/* Tablets fell between the phone clamp and the desktop clamp, so the headline
   dropped from 51px at 767px to 36px at 768px. This bridges the two so the
   size only ever grows with the viewport. */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero .hero-title { font-size: clamp(50px, 6.6vw, 56px); }
}

/* ============================================================================
   LIGHT MODE — ROUND 3
   ----------------------------------------------------------------------------
   Three light-mode-only corrections. Dark mode is untouched: every rule below
   is either scoped to a light selector, or driven by a knob whose dark value is
   the identity (x1 / none), so the dark declarations compute to exactly the
   values they compute to today.

     1. Media was over-washed. Every scrim on this site is written as
        `rgb(var(--c-bg-base) / a)` — navy in dark mode, PAPER in light. The
        same alpha that deepens footage on navy bleaches it on paper, so photos
        and video arrived as pale grey rectangles. The washes now scale back in
        light mode, the media filters stop darkening footage that no longer has
        a dark ground to sit on, and the copy that sits on top carries its own
        weight plus a paper halo instead of leaning on the wash.

     2. Navbar and footer stay dark by design — golden-vision-metal-logo.png is
        a light-on-transparent asset — but near-black beside paper reads as a
        hole punched in the page. They lift to a navy slate: still clearly the
        dark bookends, just seated in the theme rather than dropped onto it.

     3. The ambient scroll glow was tuned for a navy ground. A dark blue at 13%
        over paper is a grey smudge, and the trail orb leaned on --c-accent,
        which in light mode is a dark olive gold at 4% — invisible. Light mode
        now gets its own saturated azure/amber pair at an alpha that tints.
   ============================================================================ */

/* --- The knobs --------------------------------------------------------------
   Declared dark-first at the identity value, overridden once per light
   selector. Everything downstream is a single theme-neutral rule. */
:root {
    --media-wash:   1;     /* washes laid over photography and video          */
    --copy-wash:    1;     /* the reading grounds that sit behind headline copy */
    --copy-wash-sm: 1;     /* ditto, phones — see the note on the ≤767px rule  */
    --media-lift:   1;     /* multiplier on the media's own brightness()       */
    --media-halo:   none;  /* legibility halo for copy set over media          */

    --c-glow-trail:     var(--c-accent);
    --glow-trail-alpha: calc(var(--glow-alpha) * 0.30);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --media-wash:   0.52;
        --copy-wash:    0.82;
        --copy-wash-sm: 0.92;
        --media-lift:   1.28;
        --media-halo: 0 1px 2px rgb(var(--c-bg-base) / 0.9),
                      0 0 18px rgb(var(--c-bg-base) / 0.8);

        --c-glow:            24 118 214;
        --glow-alpha:        0.26;
        --c-glow-trail:     226 142  26;
        --glow-trail-alpha:  0.20;
    }
}

:root[data-theme="light"] {
    --media-wash:   0.52;
    --copy-wash:    0.82;
    --copy-wash-sm: 0.92;
    --media-lift:   1.28;
    --media-halo: 0 1px 2px rgb(var(--c-bg-base) / 0.9),
                  0 0 18px rgb(var(--c-bg-base) / 0.8);

    --c-glow:            24 118 214;
    --glow-alpha:        0.26;
    --c-glow-trail:     226 142  26;
    --glow-trail-alpha:  0.20;
}

:root[data-theme="dark"] {
    --media-wash:   1;
    --copy-wash:    1;
    --copy-wash-sm: 1;
    --media-lift:   1;
    --media-halo:   none;

    --c-glow:            46 125 209;
    --glow-alpha:        0.34;
    --c-glow-trail:     var(--c-accent);
    --glow-trail-alpha: calc(var(--glow-alpha) * 0.30);
}

/* ----------------------------------------------------------------------------
   1a. The washes over media
   ------------------------------------------------------------------------- */

/* Home hero. This token is light-only, so the reduction is written straight
   into the stops rather than through --media-wash. */
:root {
    --hero-scrim-light:
        linear-gradient(var(--hero-scrim-angle, 270deg),
            rgb(var(--c-bg-base) / 0.30) 0%,
            rgb(var(--c-bg-base) / 0.15) 34%,
            rgb(var(--c-bg-base) / 0.03) 66%,
            rgb(var(--c-bg-base) / 0.00) 100%),
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / 0.10) 0%,
            rgb(var(--c-bg-base) / 0.00) 34%,
            rgb(var(--c-bg-base) / 0.02) 70%,
            rgb(var(--c-bg-base) / 0.42) 100%);
}

/* The hero reading panel keeps more of its ground than the free image area —
   it is the only thing standing between a 56px headline and moving footage —
   so it runs on --copy-wash (0.82) rather than --media-wash (0.52). */
.hero-inner::before {
    background: linear-gradient(var(--hero-panel-angle, 270deg),
        rgb(var(--c-bg-base) / calc(0.97 * var(--copy-wash))) 0%,
        rgb(var(--c-bg-base) / calc(0.95 * var(--copy-wash))) 45%,
        rgb(var(--c-bg-base) / calc(0.88 * var(--copy-wash))) 62%,
        rgb(var(--c-bg-base) / calc(0.42 * var(--copy-wash))) 80%,
        rgb(var(--c-bg-base) / 0) 100%);
}

@media (max-width: 767px) {
    /* Phones use the full-bleed vertical wash, not the side panel — the copy is
       centred across the whole frame, so there is no clear part of the image to
       push the wash off onto. It therefore comes back only a little (0.92, not
       0.82): the photograph reads, but the headline is not competing with the
       factory signage it happens to land on. */
    .hero-inner::before {
        background: linear-gradient(180deg,
            rgb(var(--c-bg-base) / calc(0.42 * var(--copy-wash-sm))) 0%,
            rgb(var(--c-bg-base) / calc(0.78 * var(--copy-wash-sm))) 22%,
            rgb(var(--c-bg-base) / calc(0.86 * var(--copy-wash-sm))) 50%,
            rgb(var(--c-bg-base) / calc(0.80 * var(--copy-wash-sm))) 76%,
            rgb(var(--c-bg-base) / calc(0.55 * var(--copy-wash-sm))) 100%);
    }
}

/* Service page heroes. The copy end of the sweep and the bottom of the vertical
   gradient are the reading ground; the far end is bare footage. */
.service-detail-overlay {
    background:
        radial-gradient(circle at 20% 64%, rgb(var(--c-accent) / 0.16), transparent 25rem),
        linear-gradient(90deg,
            rgb(var(--c-bg-base) / calc(0.98 * var(--copy-wash))) 0%,
            rgb(var(--c-bg-base) / calc(0.82 * var(--copy-wash))) 44%,
            rgb(var(--c-bg-base) / calc(0.28 * var(--media-wash))) 100%),
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / calc(0.62 * var(--media-wash))),
            rgb(var(--c-bg-base) / calc(0.88 * var(--copy-wash))));
}

html[dir="ltr"] .service-detail-overlay {
    background:
        radial-gradient(circle at 80% 64%, rgb(var(--c-accent) / 0.16), transparent 25rem),
        linear-gradient(270deg,
            rgb(var(--c-bg-base) / calc(0.98 * var(--copy-wash))) 0%,
            rgb(var(--c-bg-base) / calc(0.82 * var(--copy-wash))) 44%,
            rgb(var(--c-bg-base) / calc(0.28 * var(--media-wash))) 100%),
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / calc(0.62 * var(--media-wash))),
            rgb(var(--c-bg-base) / calc(0.88 * var(--copy-wash))));
}

@media (max-width: 639px) {
    /* Phones drop the directional sweep for a single vertical one; re-emitted
       here so the desktop rules above cannot clobber it from further down. */
    .service-detail-overlay,
    html[dir="ltr"] .service-detail-overlay {
        background:
            radial-gradient(circle at 70% 22%, rgb(var(--c-accent) / 0.13), transparent 13rem),
            linear-gradient(180deg,
                rgb(var(--c-bg-base) / calc(0.58 * var(--media-wash))),
                rgb(var(--c-bg-base) / calc(0.94 * var(--copy-wash))));
    }
}

/* Defense visual — its caption sits on its own panel, so the whole overlay is
   free to drop back to the media wash. */
.defense-visual::after {
    background:
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / calc(0.05 * var(--media-wash))),
            rgb(var(--c-bg-base) / calc(0.66 * var(--media-wash)))),
        linear-gradient(90deg,
            rgb(var(--c-bg-base) / calc(0.78 * var(--media-wash))),
            transparent 62%);
}

html[dir="ltr"] .defense-visual::after {
    background:
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / calc(0.05 * var(--media-wash))),
            rgb(var(--c-bg-base) / calc(0.66 * var(--media-wash)))),
        linear-gradient(270deg,
            rgb(var(--c-bg-base) / calc(0.78 * var(--media-wash))),
            transparent 62%);
}

/* Facility feature panel — the caption sits in the bottom stop, so that one
   stop keeps the copy wash. */
.facility-feature-panel::after {
    background:
        linear-gradient(90deg,
            rgb(var(--c-bg-base) / calc(0.04 * var(--media-wash))) 0%,
            rgb(var(--c-bg-base) / calc(0.26 * var(--media-wash))) 100%),
        linear-gradient(180deg, transparent 52%,
            rgb(var(--c-bg-base) / calc(0.72 * var(--copy-wash))) 100%);
}

html[dir="ltr"] .facility-feature-panel::after {
    background:
        linear-gradient(90deg,
            rgb(var(--c-bg-base) / calc(0.26 * var(--media-wash))) 0%,
            rgb(var(--c-bg-base) / calc(0.04 * var(--media-wash))) 100%),
        linear-gradient(180deg, transparent 52%,
            rgb(var(--c-bg-base) / calc(0.72 * var(--copy-wash))) 100%);
}

/* Gallery tiles */
.photo-gallery-item::after {
    background: linear-gradient(180deg,
        transparent 40%,
        rgb(var(--c-bg-base) / calc(0.7 * var(--media-wash))) 100%);
}

/* Generic image cards */
.industrial-image-card::before {
    background: linear-gradient(180deg,
        transparent 0%,
        rgb(var(--c-bg-base) / calc(0.3 * var(--media-wash))) 50%,
        rgb(var(--c-bg-base) / calc(0.8 * var(--media-wash))) 100%);
}

.about-visual.industrial-image-card::before {
    background: linear-gradient(145deg,
        rgb(var(--c-bg-base) / calc(0.5 * var(--media-wash))) 0%,
        rgb(var(--c-bg-base) / calc(0.4 * var(--media-wash))) 40%,
        rgb(var(--c-bg-base) / calc(0.6 * var(--media-wash))) 100%);
}

/* Leadership portraits */
.executive-photo-overlay {
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgb(var(--c-bg-base) / calc(0.4 * var(--media-wash))) 75%,
        rgb(var(--c-bg-base) / calc(0.8 * var(--media-wash))) 100%);
}

/* ----------------------------------------------------------------------------
   1b. The media's own grade
   Those brightness() values were chosen to sink footage into a navy page. With
   the wash pulled back they left the photo darker than the paper around it, so
   light mode lifts them back toward the footage's own tone.
   ------------------------------------------------------------------------- */
.service-detail-media img {
    filter: brightness(calc(0.72 * var(--media-lift))) contrast(1.08) saturate(0.95);
}

.service-detail-video {
    filter: brightness(calc(0.74 * var(--media-lift))) contrast(1.1) saturate(1.02);
}

.defense-visual img {
    filter: brightness(calc(0.62 * var(--media-lift))) contrast(1.08) saturate(0.96);
}

#about .industrial-image-card img {
    object-position: center center;
    filter: brightness(calc(0.72 * var(--media-lift))) contrast(1.06) saturate(0.98);
}

/* ----------------------------------------------------------------------------
   1c. Copy set over media
   The halo is `none` in dark mode, so this is a no-op there. It is what lets
   the wash come off without the type going soft: dark ink keeps a thin paper
   edge wherever the photograph runs light behind it.
   ------------------------------------------------------------------------- */
.hero .hero-eyebrow,
.hero .hero-title,
.hero .hero-description,
.hero .credential-tag-clean,
.hero .stat-label,
.service-detail-hero .enterprise-label,
.service-detail-hero .service-breadcrumb,
.service-detail-copy h1,
.service-detail-lead,
.facility-feature-caption .premium-badge,
.photo-gallery-item .premium-badge,
.defense-visual-panel span,
.defense-visual-panel strong,
.about-stat .stat-label {
    text-shadow: var(--media-halo);
}
/* .stat-number is deliberately absent from that list: it already carries an
   accent glow, and `text-shadow: none` in dark mode would strip it. It is
   replaced light-side only, below. */

/* Weight and colour cannot ride a multiplier, so these are the one genuinely
   duplicated pair of blocks — light-only, in both directions. */
:root[data-theme="light"] .hero .hero-title,
:root[data-theme="light"] .service-detail-copy h1 { font-weight: 900; }

:root[data-theme="light"] .hero .hero-description,
:root[data-theme="light"] .service-detail-lead {
    color: var(--text-primary);
    font-weight: 500;
}

:root[data-theme="light"] .hero .hero-eyebrow,
:root[data-theme="light"] .hero .stat-label,
:root[data-theme="light"] .service-detail-hero .service-breadcrumb {
    color: var(--text-secondary);
    font-weight: 700;
}

:root[data-theme="light"] .hero .credential-tag-clean {
    color: var(--text-secondary);
    font-weight: 700;
    border-color: rgb(var(--c-ink) / 0.22);
    background: rgb(var(--c-bg-base) / 0.5);
}
:root[data-theme="light"] .hero .credential-tag-clean:hover {
    color: var(--text-primary);
    border-color: rgb(var(--c-accent) / 0.5);
}

/* These two already carry a text-shadow of their own — a dark glow, which over
   paper muddies the very type it was meant to lift — so they are replaced
   outright rather than picking up var(--media-halo). */
:root[data-theme="light"] .hero .stat-number,
:root[data-theme="light"] .about-stat .stat-number {
    text-shadow: 0 1px 2px rgb(var(--c-bg-base) / 0.9),
                 0 0 18px rgb(var(--c-bg-base) / 0.8);
}
:root[data-theme="light"] .facility-feature-caption p {
    color: var(--text-primary);
    font-weight: 600;
    text-shadow: 0 1px 2px rgb(var(--c-bg-base) / 0.9),
                 0 0 18px rgb(var(--c-bg-base) / 0.8);
}

:root[data-theme="light"] .defense-visual-panel { background: rgb(var(--c-bg-base) / 0.86); }
:root[data-theme="light"] .defense-visual-panel span { color: rgb(var(--c-accent)); font-weight: 800; }
:root[data-theme="light"] .defense-visual-panel strong { font-weight: 900; }
:root[data-theme="light"] .photo-gallery-item .text-primary { font-weight: 700; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .hero .hero-title,
    :root:not([data-theme="dark"]) .service-detail-copy h1 { font-weight: 900; }

    :root:not([data-theme="dark"]) .hero .hero-description,
    :root:not([data-theme="dark"]) .service-detail-lead {
        color: var(--text-primary);
        font-weight: 500;
    }

    :root:not([data-theme="dark"]) .hero .hero-eyebrow,
    :root:not([data-theme="dark"]) .hero .stat-label,
    :root:not([data-theme="dark"]) .service-detail-hero .service-breadcrumb {
        color: var(--text-secondary);
        font-weight: 700;
    }

    :root:not([data-theme="dark"]) .hero .credential-tag-clean {
        color: var(--text-secondary);
        font-weight: 700;
        border-color: rgb(var(--c-ink) / 0.22);
        background: rgb(var(--c-bg-base) / 0.5);
    }
    :root:not([data-theme="dark"]) .hero .credential-tag-clean:hover {
        color: var(--text-primary);
        border-color: rgb(var(--c-accent) / 0.5);
    }

    :root:not([data-theme="dark"]) .hero .stat-number,
    :root:not([data-theme="dark"]) .about-stat .stat-number {
        text-shadow: 0 1px 2px rgb(var(--c-bg-base) / 0.9),
                     0 0 18px rgb(var(--c-bg-base) / 0.8);
    }
    :root:not([data-theme="dark"]) .facility-feature-caption p {
        color: var(--text-primary);
        font-weight: 600;
        text-shadow: 0 1px 2px rgb(var(--c-bg-base) / 0.9),
                     0 0 18px rgb(var(--c-bg-base) / 0.8);
    }

    :root:not([data-theme="dark"]) .defense-visual-panel { background: rgb(var(--c-bg-base) / 0.86); }
    :root:not([data-theme="dark"]) .defense-visual-panel span { color: rgb(var(--c-accent)); font-weight: 800; }
    :root:not([data-theme="dark"]) .defense-visual-panel strong { font-weight: 900; }
    :root:not([data-theme="dark"]) .photo-gallery-item .text-primary { font-weight: 700; }
}

/* ----------------------------------------------------------------------------
   2. Navbar and footer, lifted
   Both subtrees re-declare the dark palette wholesale (see PERMANENTLY DARK
   SURFACES). In light mode those channels move up to a navy slate instead of
   near-black — enough to sit inside the theme, not so much that the
   light-on-transparent logo loses its ground.

   As up there, the RESOLVED tokens have to move with the channels: --bg-raised
   was already substituted at :root, so overriding --c-bg-raised alone would
   change nothing. Contrast is unaffected — ink stays 12.0:1 and the gold accent
   6.0:1 on the new raised surface.
   ------------------------------------------------------------------------- */
:root[data-theme="light"] #navbar,
:root[data-theme="light"] footer {
    --c-bg-base:   20 32 48;
    --c-bg-raised: 29 43 62;
    --c-bg-inset:  14 24 38;

    --bg-base:   rgb(var(--c-bg-base));
    --bg-raised: rgb(var(--c-bg-raised));
    --bg-inset:  rgb(var(--c-bg-inset));
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) #navbar,
    :root:not([data-theme="dark"]) footer {
        --c-bg-base:   20 32 48;
        --c-bg-raised: 29 43 62;
        --c-bg-inset:  14 24 38;

        --bg-base:   rgb(var(--c-bg-base));
        --bg-raised: rgb(var(--c-bg-raised));
        --bg-inset:  rgb(var(--c-bg-inset));
    }
}

/* ----------------------------------------------------------------------------
   3. The ambient glow
   Same two orbs, same transforms — only the paint changes, and only through
   the variables set at the top of this block. The trail orb stops borrowing
   --c-accent so light mode can give it a warm hue that survives paper.
   ------------------------------------------------------------------------- */
.bg-glow-orb {
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--c-glow) / var(--glow-alpha)) 0%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.72)) 22%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.38)) 44%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.14)) 64%,
        rgb(var(--c-glow) / 0) 82%);
}

.bg-glow-orb.is-trail {
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--c-glow-trail) / var(--glow-trail-alpha)) 0%,
        rgb(var(--c-glow-trail) / calc(var(--glow-trail-alpha) * 0.4)) 40%,
        rgb(var(--c-glow-trail) / 0) 78%);
}

/* The stop profile itself has to change, not just the hue. That curve reaches
   zero at 82% of the orb, which on navy is invisible — the last 10% of alpha
   is below the noise floor of a dark ground. On paper the eye resolves it, and
   the orb stopped reading as light and started reading as a disc with an edge.

   Light mode spreads the same energy over a wider orb and carries a long, very
   low tail all the way to 100%, so there is no radius at which the gradient
   visibly ends. Light-only, so dark keeps the curve it was tuned with. */
:root[data-theme="light"] .bg-glow-orb {
    width: clamp(460px, 74vw, 1120px);
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--c-glow) / var(--glow-alpha)) 0%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.78)) 26%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.46)) 46%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.20)) 64%,
        rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.06)) 82%,
        rgb(var(--c-glow) / 0) 100%);
}

:root[data-theme="light"] .bg-glow-orb.is-trail {
    width: clamp(300px, 44vw, 680px);
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--c-glow-trail) / var(--glow-trail-alpha)) 0%,
        rgb(var(--c-glow-trail) / calc(var(--glow-trail-alpha) * 0.52)) 34%,
        rgb(var(--c-glow-trail) / calc(var(--glow-trail-alpha) * 0.20)) 58%,
        rgb(var(--c-glow-trail) / calc(var(--glow-trail-alpha) * 0.05)) 80%,
        rgb(var(--c-glow-trail) / 0) 100%);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .bg-glow-orb {
        width: clamp(460px, 74vw, 1120px);
        background: radial-gradient(circle at 50% 50%,
            rgb(var(--c-glow) / var(--glow-alpha)) 0%,
            rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.78)) 26%,
            rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.46)) 46%,
            rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.20)) 64%,
            rgb(var(--c-glow) / calc(var(--glow-alpha) * 0.06)) 82%,
            rgb(var(--c-glow) / 0) 100%);
    }

    :root:not([data-theme="dark"]) .bg-glow-orb.is-trail {
        width: clamp(300px, 44vw, 680px);
        background: radial-gradient(circle at 50% 50%,
            rgb(var(--c-glow-trail) / var(--glow-trail-alpha)) 0%,
            rgb(var(--c-glow-trail) / calc(var(--glow-trail-alpha) * 0.52)) 34%,
            rgb(var(--c-glow-trail) / calc(var(--glow-trail-alpha) * 0.20)) 58%,
            rgb(var(--c-glow-trail) / calc(var(--glow-trail-alpha) * 0.05)) 80%,
            rgb(var(--c-glow-trail) / 0) 100%);
    }
}

/* --- Uniform logo plates in dark mode --------------------------------------
   The white plate IS the <img>, so with `width: auto` each one took its own
   logo's aspect ratio and the plates ranged from near-square (Pepsi) to very
   wide (National Paper). Giving the image a FIXED box and letting the artwork
   scale inside it with object-fit: contain makes every plate identical while
   each mark keeps its own proportions.

   Dark mode only — light mode has no plate (the tile is already the white
   card), so the marks stay at their natural size there. */
.official-client-item img,
.logo-marquee-item img {
    width: 100%;
    max-width: 184px;
    height: 68px;
    max-height: none;
    object-fit: contain;
    /* Tight padding on purpose: object-fit already letterboxes the mark, and
       most of these files carry their own white margin baked in. Generous
       padding on top of that shrinks the artwork twice over. */
    padding: 4px 7px;
    border-radius: 8px;
}

:root[data-theme="light"] .official-client-item img,
:root[data-theme="light"] .logo-marquee-item img {
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 58px;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .official-client-item img,
    :root:not([data-theme="dark"]) .logo-marquee-item img {
        width: auto;
        height: auto;
        max-width: 150px;
        max-height: 58px;
    }
}

@media (max-width: 639px) {
    .official-client-item img,
    .logo-marquee-item img { max-width: 140px; height: 56px; padding: 3px 5px; }
}

/* ============================================================================
   PAGE LOADER
   ----------------------------------------------------------------------------
   A curtain over the whole viewport carrying the gear emblem on a circular
   plate, two counter-rotating blue-to-gold rings, and a soft field of the same
   two brand lights behind it. It lifts on window.load with a focus pull — the
   page behind it comes out of blur as the curtain fades.

   Why this page needs one at all: Tailwind arrives from a CDN as a SCRIPT, not
   a stylesheet, so it cannot block first paint the way css/styles.css does. The
   markup therefore paints once unstyled before the utility classes exist. The
   curtain covers that window.

   VISIBILITY IS INVERTED ON PURPOSE. The curtain is hidden by default and only
   shown while <html> carries .is-loading, which the pre-paint script in <head>
   adds. So the failure mode with JavaScript off or broken is "no loader ever
   appears", not "a curtain nobody can dismiss". There is no arrangement of
   events that can leave a visitor stuck behind it.

   The brand blue and gold are hard-declared here rather than read from
   --c-accent / --c-blue-light: light mode resolves the accent to a dark olive
   gold (#7A5810) that is correct as text on paper and quite wrong as a light.
   The curtain's GROUND still follows the theme, so a light-mode visitor gets a
   paper curtain lifting off a paper page rather than a navy flash.
   ============================================================================ */

.gv-loader {
    /* Dark-palette brand channels, fixed in both themes — these are lights. */
    --gv-blue:    46 125 209;
    --gv-blue-hi: 77 163 255;
    --gv-gold:   217 169  63;
    --gv-gold-hi:229 188  92;

    /* Field strength. Same lesson as the ambient scroll glow: an alpha that
       reads as a light on navy is invisible on paper, because paper has no
       headroom left to lighten into. Light mode needs roughly twice the value
       to arrive at the same perceived presence. */
    --gv-field: 1;

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 2rem;

    background: var(--bg-base);

    /* Hidden unless <html>.is-loading says otherwise — see the note above. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

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

    /* The lift: 520ms of fade while the page behind sharpens from blur(18px)
       to zero. `visibility` is stepped at the end of the same duration so the
       element stays hittable-free but painted for the whole transition. */
    transition: opacity 520ms var(--ease-out),
                visibility 0s linear 520ms,
                -webkit-backdrop-filter 520ms var(--ease-out),
                backdrop-filter 520ms var(--ease-out);
}

html.is-loading .gv-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
    transition-delay: 0s;
}

/* Nothing scrolls behind the curtain. Both elements, because which one owns the
   viewport scrollbar differs between engines. */
html.is-loading,
html.is-loading body {
    overflow: hidden;
}

/* --- The field ------------------------------------------------------------
   Three soft lights, blue and gold, drifting behind the emblem.

   NO filter: blur() on these, for the same reason the ambient scroll glow
   avoids it (see AMBIENT SCROLL GLOW): a blurred layer this size has to be
   re-rasterised on every frame it moves. Multi-stop radial gradients are
   already soft, cost one paint, and drift for free on a transform. That matters
   more here than anywhere else on the site — this thing is on screen exactly
   when the main thread is busiest. */
.gv-loader-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.gv-loader-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(340px, 58vw, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    will-change: transform;
}

/* The two lights are deliberately kept on opposite sides of the emblem and
   never fully overlap. Stacked concentrically they average out to one grey
   haze; held apart they stay legible as blue AND gold, and it is the seam
   between them that reads as a mixture. */
/* Five stops each, and the last two matter more than the first three. A stop
   list that ramps straight from a mid alpha to zero decays at a CONSTANT rate
   and then stops dead, and the eye reads that termination as the edge of a
   disc — which is exactly how the ambient scroll glow failed on paper. A long
   near-zero tail makes the falloff convex and the boundary disappears. */
.gv-loader-blob.is-blue {
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--gv-blue) / calc(0.42 * var(--gv-field))) 0%,
        rgb(var(--gv-blue) / calc(0.24 * var(--gv-field))) 32%,
        rgb(var(--gv-blue) / calc(0.10 * var(--gv-field))) 56%,
        rgb(var(--gv-blue) / calc(0.03 * var(--gv-field))) 76%,
        rgb(var(--gv-blue) / 0) 100%);
    animation: gv-drift-a 7s var(--ease-out) infinite alternate;
}

.gv-loader-blob.is-gold {
    width: clamp(280px, 48vw, 600px);
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--gv-gold) / calc(0.36 * var(--gv-field))) 0%,
        rgb(var(--gv-gold) / calc(0.19 * var(--gv-field))) 34%,
        rgb(var(--gv-gold) / calc(0.08 * var(--gv-field))) 58%,
        rgb(var(--gv-gold) / calc(0.022 * var(--gv-field))) 78%,
        rgb(var(--gv-gold) / 0) 100%);
    animation: gv-drift-b 9s var(--ease-out) infinite alternate;
}

.gv-loader-blob.is-deep {
    width: clamp(460px, 88vw, 1100px);
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--gv-blue-hi) / calc(0.18 * var(--gv-field))) 0%,
        rgb(var(--gv-blue-hi) / calc(0.09 * var(--gv-field))) 34%,
        rgb(var(--gv-blue-hi) / calc(0.035 * var(--gv-field))) 58%,
        rgb(var(--gv-blue-hi) / calc(0.01 * var(--gv-field))) 78%,
        rgb(var(--gv-blue-hi) / 0) 100%);
    animation: gv-drift-c 11s var(--ease-out) infinite alternate;
}

/* Blue sits low-start, gold sits high-end; each travels toward the centre and
   back without ever taking the other's place. */
@keyframes gv-drift-a {
    from { transform: translate(-78%, -70%) scale(1); }
    to   { transform: translate(-58%, -46%) scale(1.14); }
}
@keyframes gv-drift-b {
    from { transform: translate(-24%, -34%) scale(1.1); }
    to   { transform: translate(-44%, -58%) scale(0.92); }
}
@keyframes gv-drift-c {
    from { transform: translate(-50%, -56%) scale(0.94); }
    to   { transform: translate(-50%, -44%) scale(1.1); }
}

/* --- The emblem ------------------------------------------------------------ */
.gv-loader-core {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.9rem;
    text-align: center;
}

.gv-loader-mark {
    position: relative;
    width: clamp(108px, 26vw, 138px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* The plate. golden-vision-metal-icon.png is PNG colour-type 2 — no alpha, and
   its background is measured pure #000000 baked into the file — so the artwork
   cannot simply be dropped onto a coloured ground. `mix-blend-mode: screen`
   solves it without touching the asset: screen against black is the identity,
   so the baked background falls away and the plate's own navy shows through,
   while the silver gears and the blue arc composite at full strength.

   The navy gradient is therefore gated behind @supports, not applied blindly.
   Without blend support a black square would sit inside a navy circle, which
   is a worse artefact than the thing being fixed — so in that case the plate
   goes flat #000 and the seam disappears instead. */
.gv-loader-plate {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #000;
    box-shadow:
        0 0 0 1px rgb(var(--gv-blue-hi) / 0.16),
        0 18px 44px rgb(0 0 0 / 0.5),
        inset 0 1px 0 rgb(255 255 255 / 0.06);
}

@supports (mix-blend-mode: screen) {
    .gv-loader-plate {
        background: radial-gradient(circle at 50% 32%, #16263F 0%, #070D16 74%);
    }
}

/* 80%, and the number is measured rather than eyeballed: the gear's ink reaches
   131px from centre in a 256px-wide file, i.e. 51.2% of the width — it fills
   the frame edge to edge. So the largest it can be drawn without the circular
   plate biting into a tooth is width x 0.512 <= plate radius, or about 97%.
   80% clears that with a real margin, so the emblem sits inside its badge
   rather than straining against it. */
.gv-loader-plate img {
    width: 80%;
    height: auto;
    display: block;
    mix-blend-mode: screen;
}

/* Two rings, opposite directions. `mask` with a farthest-side radial is what
   turns a filled conic gradient into a ring: transparent up to the last N
   pixels, opaque from there out. */
.gv-loader-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Two layers per ring, both masked together: a flat track underneath so the
   ring is a continuous object rather than a floating arc, and the conic comet
   over it. Without the track the eye reads a detached streak; with it, a ring
   with a light running around it. */
.gv-loader-ring.is-lead {
    inset: -16px;
    background:
        conic-gradient(from 0deg,
            rgb(var(--gv-blue) / 0) 0deg,
            rgb(var(--gv-blue) / 0.6) 40deg,
            rgb(var(--gv-blue-hi)) 100deg,
            rgb(var(--gv-gold-hi)) 168deg,
            rgb(var(--gv-gold)) 212deg,
            rgb(var(--gv-gold) / 0.45) 262deg,
            rgb(var(--gv-blue) / 0) 360deg),
        linear-gradient(rgb(var(--gv-blue) / 0.22), rgb(var(--gv-blue) / 0.22));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    animation: gv-spin 1.5s linear infinite;
}

.gv-loader-ring.is-trail {
    inset: -31px;
    background:
        conic-gradient(from 210deg,
            rgb(var(--gv-gold) / 0) 0deg,
            rgb(var(--gv-gold) / 0.75) 66deg,
            rgb(var(--gv-blue-hi) / 0.8) 156deg,
            rgb(var(--gv-blue) / 0.2) 250deg,
            rgb(var(--gv-gold) / 0) 360deg),
        linear-gradient(rgb(var(--gv-gold) / 0.14), rgb(var(--gv-gold) / 0.14));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    animation: gv-spin 3.4s linear infinite reverse;
}

/* A breathing light under the whole mark, so the emblem sits IN the field
   rather than on top of it. */
.gv-loader-mark::before {
    content: "";
    position: absolute;
    inset: -58%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgb(var(--gv-blue) / 0.30) 0%,
        rgb(var(--gv-gold) / 0.12) 38%,
        rgb(var(--gv-blue) / 0) 72%);
    animation: gv-breathe 2.6s ease-in-out infinite;
}

@keyframes gv-spin {
    to { transform: rotate(1turn); }
}

@keyframes gv-breathe {
    0%, 100% { opacity: 0.55; transform: scale(0.94); }
    50%      { opacity: 1;    transform: scale(1.06); }
}

/* --- Wordmark and progress ------------------------------------------------- */
.gv-loader-word {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--text-primary);
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    font-weight: 800;
    letter-spacing: 0.02em;
}

html[dir="ltr"] .gv-loader-word {
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.gv-loader-word .gv-loader-sub {
    font-size: 0.66em;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: none;
}
html[dir="ltr"] .gv-loader-word .gv-loader-sub { text-transform: uppercase; }

/* Indeterminate, because there is nothing honest to measure — a fake percentage
   is worse than an obvious "working". The sweep is the same blue-to-gold. */
.gv-loader-bar {
    position: relative;
    display: block;
    width: clamp(112px, 30vw, 168px);
    height: 2px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(var(--c-ink) / 0.12);
}

.gv-loader-bar i {
    position: absolute;
    inset-block: 0;
    width: 58%;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgb(var(--gv-blue) / 0) 0%,
        rgb(var(--gv-blue-hi)) 32%,
        rgb(var(--gv-gold-hi)) 68%,
        rgb(var(--gv-gold) / 0) 100%);
    animation: gv-sweep 1.4s var(--ease-out) infinite;
}

/* Travel is kept just wide enough to clear the track at both ends. A longer
   throw leaves the bar empty for most of the cycle, which reads as stalled. */
@keyframes gv-sweep {
    from { transform: translateX(-105%); }
    to   { transform: translateX(178%); }
}

/* --- Field strength on paper ------------------------------------------------
   The ground is the one part of the curtain that follows the theme, so it is
   the one part that needs the light-mode correction. The mark, the rings and
   the bar are all fixed brand colour and need nothing. */
:root[data-theme="light"] .gv-loader { --gv-field: 1.6; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .gv-loader { --gv-field: 1.6; }
}
:root[data-theme="dark"] .gv-loader { --gv-field: 1; }

/* --- Reduced motion --------------------------------------------------------
   The curtain still does its job, it just stops moving: the rings hold a static
   blue-to-gold arc and the fade-out is the only motion left. */
@media (prefers-reduced-motion: reduce) {
    .gv-loader-blob,
    .gv-loader-mark::before,
    .gv-loader-ring,
    .gv-loader-bar i {
        animation: none;
    }
    .gv-loader-blob.is-blue { transform: translate(-50%, -50%); }
    .gv-loader-blob.is-gold { transform: translate(-50%, -50%); }
    .gv-loader-blob.is-deep { transform: translate(-50%, -50%); }
    .gv-loader-mark::before { opacity: 0.8; }
    .gv-loader-bar i { position: relative; width: 100%; }
}

/* ============================================================================
   HERO — DARK MODE COMES BACK OFF THE FOOTAGE
   ----------------------------------------------------------------------------
   Light mode had its washes pulled back in LIGHT MODE — ROUND 3; this is the
   same correction for the dark side of the hero, and only the hero. Four
   separate layers were stacking on the footage, which is why it read as opaque
   rather than merely dark:

     1. the video's own brightness(0.78),
     2. the poster's brightness(0.92),
     3. .hero-scrim, up to 0.97 navy on the copy side,
     4. .hero-inner::before, another 0.97 navy reading panel on top of that.

   Multiplied together the footage was arriving at roughly a fifth of its own
   luminance behind the copy. Each layer now comes back a step. Legibility is
   unaffected: the headline sits on a compositor result around rgb(47,52,60)
   even over the brightest frame, which is still better than 12:1 against
   near-white type.

   The light values are re-asserted verbatim below rather than left to inherit.
   They have to be: these tokens are declared on :root, which IS the dark
   expression, and this block sits after the light theme's own declarations —
   so without restating them, dark's new values would win in light mode too.
   ============================================================================ */

:root {
    /* Dark scrim: was 0.97/0.86/0.55/0.22 and 0.55/0.12/0.30/0.92. */
    --hero-scrim-image:
        linear-gradient(var(--hero-scrim-angle, 270deg),
            rgb(var(--c-bg-base) / 0.88) 0%,
            rgb(var(--c-bg-base) / 0.70) 28%,
            rgb(var(--c-bg-base) / 0.36) 55%,
            rgb(var(--c-bg-base) / 0.10) 100%),
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / 0.40) 0%,
            rgb(var(--c-bg-base) / 0.05) 32%,
            rgb(var(--c-bg-base) / 0.18) 72%,
            rgb(var(--c-bg-base) / 0.80) 100%);

    /* The hero reading panel gets its own token rather than sharing --copy-wash
       with the service-page overlay: this change is scoped to the home hero,
       and one variable that means one thing is easier to reason about than a
       shared one multiplied twice. */
    --hero-panel-wash:    0.82;
    --hero-panel-wash-sm: 0.86;

    --hero-media-filter: brightness(1) contrast(1.06) saturate(1);

    /* Desktop pins the video's filter with !important (see the landscape-crop
       rule around line 7720), so the themed --hero-media-filter never reached
       it — the video has always graded independently of the poster beside it.
       Routing that !important through a variable is the least invasive way to
       make it themeable without unpicking the specificity. */
    --hero-video-filter: brightness(0.9) contrast(1.06) saturate(0.98);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --hero-scrim-image:   var(--hero-scrim-light);
        --hero-panel-wash:    0.82;
        --hero-panel-wash-sm: 0.92;
        --hero-media-filter:  brightness(0.99) contrast(1.04) saturate(1);
        --hero-video-filter:  brightness(0.78) contrast(1.08) saturate(0.98);
    }
}

:root[data-theme="light"] {
    --hero-scrim-image:   var(--hero-scrim-light);
    --hero-panel-wash:    0.82;
    --hero-panel-wash-sm: 0.92;
    --hero-media-filter:  brightness(0.99) contrast(1.04) saturate(1);
    --hero-video-filter:  brightness(0.78) contrast(1.08) saturate(0.98);
}

:root[data-theme="dark"] {
    --hero-scrim-image:
        linear-gradient(var(--hero-scrim-angle, 270deg),
            rgb(var(--c-bg-base) / 0.88) 0%,
            rgb(var(--c-bg-base) / 0.70) 28%,
            rgb(var(--c-bg-base) / 0.36) 55%,
            rgb(var(--c-bg-base) / 0.10) 100%),
        linear-gradient(180deg,
            rgb(var(--c-bg-base) / 0.40) 0%,
            rgb(var(--c-bg-base) / 0.05) 32%,
            rgb(var(--c-bg-base) / 0.18) 72%,
            rgb(var(--c-bg-base) / 0.80) 100%);
    --hero-panel-wash:    0.82;
    --hero-panel-wash-sm: 0.86;
    --hero-media-filter:  brightness(1) contrast(1.06) saturate(1);
    --hero-video-filter:  brightness(0.9) contrast(1.06) saturate(0.98);
}

/* --- The reading panel ------------------------------------------------------
   Same stops as before, now on the hero's own token. Light mode lands on
   exactly the numbers it had (0.82 / 0.92), so nothing there moves. */
.hero-inner::before {
    background: linear-gradient(var(--hero-panel-angle, 270deg),
        rgb(var(--c-bg-base) / calc(0.97 * var(--hero-panel-wash))) 0%,
        rgb(var(--c-bg-base) / calc(0.95 * var(--hero-panel-wash))) 45%,
        rgb(var(--c-bg-base) / calc(0.88 * var(--hero-panel-wash))) 62%,
        rgb(var(--c-bg-base) / calc(0.42 * var(--hero-panel-wash))) 80%,
        rgb(var(--c-bg-base) / 0) 100%);
}

@media (max-width: 767px) {
    .hero-inner::before {
        background: linear-gradient(180deg,
            rgb(var(--c-bg-base) / calc(0.42 * var(--hero-panel-wash-sm))) 0%,
            rgb(var(--c-bg-base) / calc(0.78 * var(--hero-panel-wash-sm))) 22%,
            rgb(var(--c-bg-base) / calc(0.86 * var(--hero-panel-wash-sm))) 50%,
            rgb(var(--c-bg-base) / calc(0.80 * var(--hero-panel-wash-sm))) 76%,
            rgb(var(--c-bg-base) / calc(0.55 * var(--hero-panel-wash-sm))) 100%);
    }
}

/* --- The video's grade ------------------------------------------------------
   Beats the pinned rule by matching its media query and carrying !important
   from later in the sheet. The value is now the themed token. */
@media (min-width: 1024px) {
    #home .hero-video {
        filter: var(--hero-video-filter) !important;
    }
}