/* MainUnit Enterprise Brand Identity System */
/* Technical reliability • Financial precision • B2B trust */

:root {
    /* Primary Palette */
    --mainunit-blue: #0040A0;
    --structural-navy: #002B6F;
    --interface-blue: #2A6BE0;

    /* Neutral System (Critical for professionalism) */
    --carbon: #111318;
    --graphite: #2B2F38;
    --steel: #5A6270;
    --mist: #D9DEE7;
    --panel: #F4F6FA;
    --white: #FFFFFF;

    /* Accent System (controlled use) */
    --emerald: #00A878;
    --amber: #F2A900;
    --signal-red: #D7263D;
    --cyan: #0099CC;

    /* Legacy compatibility */
    --primary-color: var(--mainunit-blue);
    --navy-color: var(--structural-navy);
    --footer-bg: var(--structural-navy);

    /* 8pt Grid System */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Source Sans 3', sans-serif;
    color: var(--steel);
    line-height: 1.6;
    font-weight: 400;
    font-feature-settings: 'tnum' 1; /* Tabular numbers */
}

/* Container - Enterprise standard */
.container {
    max-width: 1080px;
}

/* Typography System */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--structural-navy);
    letter-spacing: -0.02em; /* Tight tracking for headlines */
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--structural-navy);
}

h2 {
    font-size: 2.5rem;
    color: var(--structural-navy);
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.lead {
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--steel);
}

/* No centered paragraphs - left aligned for professionalism */
p {
    text-align: left;
    color: var(--steel);
}

/* Navigation - Enterprise Interface */
.navbar {
    padding: var(--space-sm) 0;
    transition: all 0.2s ease;
    background: var(--white) !important;
    border-bottom: 1px solid var(--mist);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--graphite);
    font-weight: 500;
    margin: 0 var(--space-sm);
    padding: var(--space-xs) 0;
    transition: color 0.2s ease;
    position: relative;
}

.navbar-light .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--structural-navy);
    transition: width 0.2s ease;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--structural-navy);
}

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

/* Hero Section - Technical Authority */
.hero-section {
    background: linear-gradient(180deg, var(--panel) 0%, var(--white) 100%);
    padding-top: 120px;
    padding-bottom: var(--space-xl);
}

.hero-section h1 {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--structural-navy);
}

.hero-section .hero-subtitle {
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--steel);
    letter-spacing: -0.01em;
}

/* Buttons - Rectangular, Enterprise UI */
.btn {
    font-weight: 500;
    padding: 12px var(--space-md);
    border-radius: 4px; /* 4px max per spec */
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    border: none;
    box-shadow: none; /* No shadows per spec */
}

.btn-primary {
    background-color: var(--structural-navy);
    border-color: var(--structural-navy);
    color: var(--white);
}

.btn-primary:hover {
    background-color: #001a4d;
    border-color: #001a4d;
    transform: none; /* No lift effect - enterprise style */
    box-shadow: none;
}

.btn-lg {
    padding: var(--space-sm) var(--space-lg);
    font-size: 1rem;
}

/* Sections - 8pt Grid Spacing */
section {
    position: relative;
}

.py-5 {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
}

/* About Section - Operational Realism */
#about {
    background: var(--white);
}

#about h5 {
    color: var(--mainunit-blue);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    font-weight: 600;
}

#about h2 {
    font-weight: 700;
    color: var(--graphite);
}

#about img {
    border-radius: 4px; /* Sharp, minimal rounding */
}

/* Services Section - Modular Blocks */
#services {
    background: var(--panel);
}

#services .service-card {
    transition: all 0.2s ease;
    border-radius: 4px;
    border: 1px solid var(--mist);
    background: var(--white);
}

#services .service-card:hover {
    transform: translateY(-4px); /* Subtle, 8pt grid aligned */
    box-shadow: 0 8px 24px rgba(17, 19, 24, 0.08);
    border-color: var(--mainunit-blue);
}

#services .card-title {
    color: var(--graphite);
    font-weight: 600;
}

#services .card-text {
    color: var(--steel);
    font-weight: 400;
}

/* Gallery Section - Modular Grid */
#gallery {
    background: var(--white);
}

/* Gallery Filters - Enterprise UI */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.filter-btn {
    background: var(--white);
    color: var(--graphite);
    border: 1px solid var(--mist);
    padding: 10px var(--space-md);
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.filter-btn:hover {
    border-color: var(--structural-navy);
    color: var(--structural-navy);
}

.filter-btn.active {
    background: var(--structural-navy);
    color: var(--white);
    border-color: var(--structural-navy);
}

/* Gallery Item Wrapper */
.gallery-item-wrapper {
    transition: all 0.3s ease;
}

.gallery-item-wrapper.hide {
    display: none;
    opacity: 0;
}

.gallery-item-wrapper.show {
    display: block;
    opacity: 1;
    animation: fadeInGallery 0.4s ease;
}

@keyframes fadeInGallery {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    aspect-ratio: 4/3;
    background: var(--panel);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 4px;
}

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

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 43, 111, 0.9) 0%, rgba(0, 43, 111, 0) 100%);
    padding: var(--space-md);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.gallery-overlay h5 {
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gallery-overlay p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    margin: 0;
}

/* Contact Section - System Interface */
#contact {
    background: var(--panel);
}

#contact .card {
    border-radius: 4px;
    border: 1px solid var(--mist);
    background: var(--white);
    box-shadow: none;
}

#contact h2 {
    color: var(--carbon);
    font-weight: 700;
}

/* Form Styles - Enterprise UI Standard */
.form-label {
    color: var(--graphite);
    font-weight: 500;
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
}

.form-control {
    border: 1px solid var(--mist);
    border-radius: 4px;
    padding: 12px var(--space-sm);
    font-size: 1rem;
    transition: all 0.15s ease;
    font-family: 'Inter', sans-serif;
    background: var(--white);
    color: var(--carbon);
}

.form-control:focus {
    border-color: var(--mainunit-blue);
    box-shadow: 0 0 0 3px rgba(0, 64, 160, 0.1);
    outline: none;
    background: var(--white);
}

.form-control-lg {
    padding: 14px var(--space-sm);
    font-size: 1rem;
}

.form-control::placeholder {
    color: var(--steel);
    opacity: 0.6;
}

textarea.form-control {
    resize: vertical;
}

/* Required field indicator */
.text-danger {
    color: var(--signal-red) !important;
}

/* Footer - Enterprise Navy */
footer {
    background: var(--structural-navy) !important;
    padding: var(--space-xl) 0 var(--space-md) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer h5 {
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-md);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

footer .text-light-muted {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 400;
}

footer a {
    transition: color 0.15s ease;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
}

footer a:hover {
    color: var(--white) !important;
}

footer hr {
    border-color: rgba(255, 255, 255, 0.1);
    margin: var(--space-lg) 0;
}

footer .small {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Utilities */
.text-primary {
    color: var(--mainunit-blue) !important;
}

.bg-light {
    background-color: var(--panel) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

.shadow-sm {
    box-shadow: 0 2px 8px rgba(17, 19, 24, 0.04) !important;
}

.shadow {
    box-shadow: 0 4px 16px rgba(17, 19, 24, 0.06) !important;
}

.shadow-lg {
    box-shadow: 0 8px 24px rgba(17, 19, 24, 0.08) !important;
}

.rounded-3 {
    border-radius: 4px !important; /* Enterprise standard */
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Grid System - Modular Blocks Motif */
.row {
    --bs-gutter-x: var(--space-md);
    --bs-gutter-y: var(--space-md);
}

/* Tables (if needed) - Technical Dashboard Style */
table {
    font-variant-numeric: tabular-nums;
}

/* Responsive Design - Maintain Enterprise Standards */
@media (max-width: 991px) {
    .hero-section h1 {
        font-size: 3rem;
    }

    .hero-section .hero-subtitle {
        font-size: 1.25rem;
    }

    .navbar-collapse {
        padding: var(--space-sm) 0;
    }

    .navbar-light .navbar-nav .nav-link {
        margin: var(--space-xs) 0;
    }
}

@media (max-width: 767px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section .hero-subtitle {
        font-size: 1.125rem;
    }

    .display-5 {
        font-size: 2rem;
    }

    section {
        padding-top: var(--space-lg) !important;
        padding-bottom: var(--space-lg) !important;
    }
}

/* Form Validation - System Feedback */
.was-validated .form-control:valid {
    border-color: var(--emerald);
}

.was-validated .form-control:invalid {
    border-color: var(--signal-red);
}

/* Loading States */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Custom Scrollbar - MainUnit Blue */
::-webkit-scrollbar {
    width: 8px; /* 8pt grid */
}

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

::-webkit-scrollbar-thumb {
    background: var(--mainunit-blue);
    border-radius: 4px;
}

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

/* Text Selection */
::selection {
    background: var(--mainunit-blue);
    color: var(--white);
}

::-moz-selection {
    background: var(--mainunit-blue);
    color: var(--white);
}

/* Links - Interface Blue */
a {
    color: var(--interface-blue);
    text-decoration: none;
}

a:hover {
    color: var(--mainunit-blue);
}

/* Enterprise Typography Rules */
strong, b {
    font-weight: 600; /* Use weight instead of bold */
}

em, i {
    font-style: normal; /* No italics per spec */
    font-weight: 500; /* Use weight instead */
}

/* Card System - Modular Blocks */
.card {
    border: 1px solid var(--mist);
    border-radius: 4px;
    background: var(--white);
}

.card-body {
    padding: var(--space-md);
}

/* Iconography - 2px stroke, square terminals */
svg {
    stroke-width: 2px;
}

/* Dividers */
hr {
    border-color: var(--mist);
    opacity: 1;
}

/* Numbers - Always tabular */
.numeric {
    font-variant-numeric: tabular-nums;
}

/* Display headings */
.display-2 {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.display-5 {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Professional spacing */
.mb-3 {
    margin-bottom: var(--space-md) !important;
}

.mb-4 {
    margin-bottom: var(--space-lg) !important;
}

.mb-5 {
    margin-bottom: var(--space-xl) !important;
}

.p-5 {
    padding: var(--space-lg) !important;
}

/* Enterprise color utilities */
.text-carbon {
    color: var(--carbon);
}

.text-graphite {
    color: var(--graphite);
}

.text-steel {
    color: var(--steel);
}

.bg-panel {
    background-color: var(--panel);
}

/* ============================================================
   Services Section - Expanded
   ============================================================ */
#services .service-card {
    background: var(--white);
    border: 1px solid var(--mist) !important;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#services .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(17, 19, 24, 0.08);
    border-color: var(--mainunit-blue) !important;
}

.service-icon-wrap {
    width: 64px;
    height: 64px;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-num {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--mainunit-blue);
}

.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-list li {
    font-size: 0.875rem;
    color: var(--steel);
    padding: 6px 0;
    border-top: 1px solid var(--mist);
    padding-left: 16px;
    position: relative;
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--mainunit-blue);
    border-radius: 50%;
}

/* ============================================================
   How We Work - Process Steps
   ============================================================ */
#how-we-work {
    background: var(--panel);
}

.process-steps {
    border: 1px solid var(--mist);
    border-radius: 4px;
    overflow: hidden;
    background: var(--white);
}

.process-step {
    border-right: 1px solid var(--mist);
}

.process-step:last-child {
    border-right: none;
}

.process-step-inner {
    padding: 32px 24px;
    height: 100%;
    transition: background 0.2s ease;
}

.process-step:hover .process-step-inner {
    background: var(--panel);
}

.process-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--mist);
    line-height: 1;
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.process-step:hover .process-number {
    color: var(--mainunit-blue);
    transition: color 0.2s ease;
}

@media (max-width: 767px) {
    .process-step {
        border-right: none;
        border-bottom: 1px solid var(--mist);
    }
    .process-step:last-child {
        border-bottom: none;
    }
}

/* ============================================================
   Mid-Page B2B CTA Banner
   ============================================================ */
.cta-mid-banner {
    background: var(--structural-navy);
    padding: 64px 0;
}

.cta-mid-banner h2 {
    color: var(--white);
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}

.cta-mid-sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.cta-mid-banner .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--white);
    background: transparent;
}

.cta-mid-banner .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
    color: var(--white);
}

/* ============================================================
   Partner Banner
   ============================================================ */
.partner-banner {
    background: var(--white);
    border-top: 1px solid var(--mist);
    border-bottom: 1px solid var(--mist);
}

.partner-eyebrow {
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
}

.partner-headline {
    color: var(--structural-navy);
    font-size: 2rem;
    letter-spacing: -0.02em;
}

.partner-banner .btn-outline-secondary {
    border-color: var(--mist);
    color: var(--graphite);
    background: transparent;
}

.partner-banner .btn-outline-secondary:hover {
    border-color: var(--structural-navy);
    color: var(--structural-navy);
    background: transparent;
}

/* ============================================================
   Accreditation Product Section
   ============================================================ */
.accred-product-section {
    background: var(--structural-navy);
}

.accred-product-badge {
    background: var(--interface-blue);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
}

.accred-eyebrow {
    color: var(--interface-blue);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.accred-lead {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.1rem;
    line-height: 1.7;
}

.accred-check {
    color: var(--interface-blue);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.accred-feature-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.accred-img {
    border: 4px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 991px) {
    .accred-product-section .order-lg-1 { order: 2; }
    .accred-product-section .order-lg-2 { order: 1; }
}

/* ============================================================
   Typewriter Effect
   ============================================================ */
.typewriter-cursor {
    display: inline-block;
    width: 2px;
    background-color: currentColor;
    margin-left: 2px;
    animation: cursor-blink 0.75s step-end infinite;
    vertical-align: text-bottom;
    height: 1em;
    font-size: inherit;
    color: inherit;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ============================================================
   Utility
   ============================================================ */
.text-structural-navy {
    color: var(--structural-navy) !important;
}

/* ============================================================
   LineIcons
   ============================================================ */
.service-lni {
    font-size: 2rem;
    color: var(--interface-blue);
    line-height: 1;
}

.process-icon {
    font-size: 1.75rem;
    color: var(--mainunit-blue);
    display: block;
}

/* ============================================================
   Hero responsive
   ============================================================ */
.hero-section .btn-outline-secondary {
    border-color: var(--mist);
    color: var(--graphite);
}

.hero-section .btn-outline-secondary:hover {
    border-color: var(--structural-navy);
    color: var(--structural-navy);
    background: transparent;
}

/* ============================================================
   About section - responsive image
   ============================================================ */
#about img {
    width: 100%;
    object-fit: cover;
}

/* ============================================================
   Gallery responsive - 2 col on small, 3 on medium+
   ============================================================ */
@media (max-width: 575px) {
    .col-md-4.gallery-item-wrapper {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ============================================================
   Contact form - full width fields on mobile
   ============================================================ */
@media (max-width: 575px) {
    #contact .card-body {
        padding: 24px 16px !important;
    }
}

/* ============================================================
   Process steps - stack icon above number on mobile
   ============================================================ */
@media (max-width: 767px) {
    .process-step-inner {
        padding: 24px 20px;
    }
    .process-number {
        font-size: 1.75rem;
        margin-bottom: 8px;
    }
}

/* ============================================================
   Partner banner responsive
   ============================================================ */
@media (max-width: 575px) {
    .partner-banner .d-flex {
        flex-direction: column !important;
    }
    .partner-banner .btn {
        width: 100%;
    }
}

/* Mission-critical software aesthetic */
.technical-grid {
    display: grid;
    gap: var(--space-md);
}