:root {
    --primary: #0A2647;
    --primary-light: #1A3A5C;
    --secondary: #D4AF37;
    --secondary-hover: #F59E0B;
    --white: #FFFFFF;
    --light-grey: #F8F9FA;
    --dark-grey: #333333;
    --text-color: #4A5568;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
}

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

html {
    scroll-behavior: smooth;
    /* FIX: lock horizontal overflow at the root level too,
       not just on body — this is what was leaving the blank
       strip on mobile when any descendant (e.g. the fixed-attachment
       hero background, or the deployment marquee) computed a width
       fractionally larger than the device viewport. */
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    /* Responsive Body Text */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    /* Less padding on mobile */
}

/* Utilities */
.bg-light {
    background-color: var(--light-grey);
}

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

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

.text-gold {
    color: var(--secondary);
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mt-5 {
    margin-top: 3rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    min-height: 44px;
    /* Touch target size */
    text-align: center;
    width: 100%;
    /* Full width on mobile */
}

.btn-primary {
    background-color: var(--secondary);
    color: var(--white);
}

/* BUTTON HOVER */
.btn-primary:hover {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: var(--white);
    transform: scale(1.03);
    box-shadow: 0 12px 24px rgba(212, 175, 55, 0.4);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
    color: var(--white);
    backdrop-filter: blur(5px);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: var(--white);
    transform: scale(1.03);
    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.2);
}

.btn-outline {
    border-color: var(--secondary);
    color: var(--secondary);
}

.btn-outline:hover {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: var(--white);
    transform: scale(1.03);
    box-shadow: 0 12px 24px rgba(212, 175, 55, 0.4);
}

.btn-block {
    display: block;
    width: 100%;
}

/* Section Title */
.section-title h2 {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 2.5rem);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.line {
    height: 4px;
    width: 60px;
    background-color: var(--secondary);
    margin: 0 auto 1.5rem;
    border-radius: 2px;
}

.line-white {
    background-color: var(--white);
}

section {
    padding: 50px 0;
    /* Reduced padding for mobile */
    overflow-x: hidden;
    /* FIX: prevents any inner marquee / wide grid from pushing
       the section itself (and therefore the page) wider than
       the viewport on small screens */
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
    padding: 8px 0; /* Reduced padding to keep navbar slim */
    background-color: rgba(10, 38, 71, 0.95);
    /* Solid on mobile by default */
    box-shadow: var(--shadow-md);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Styling */
.logo a {
    display: flex;
    align-items: center;
}

.site-logo {
    max-height: 60px; /* Adjusted for better navbar proportion */
    width: auto;
    transition: var(--transition);
}

.logo-text {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-text h1 {
    color: var(--white);
    font-size: clamp(1.1rem, 1vw + 0.8rem, 1.4rem);
    margin: 0;
    line-height: 1.1;
}

.logo-text h1 span {
    color: var(--secondary);
}

.logo-text .tagline {
    font-size: 0.7rem;
    color: var(--light-grey);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Hover effect */
.site-logo:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Tablet */
@media (max-width: 992px) {
    .site-logo {
        max-height: 50px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .site-logo {
        max-height: 40px;
    }
}

/* Mobile Navigation (Default) */
.nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    max-width: 80%;
    height: 100vh;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 999;
}

.nav-links.active {
    right: 0;
}

.nav-links li {
    width: 100%;
    text-align: center;
}

.nav-links li a {
    color: var(--white);
    font-weight: 500;
    font-size: 1.1rem;
    position: relative;
    display: block;
    padding: 10px;
}

/* Contact Us button inside nav - don't stretch full width */
.nav-links li a.btn {
    display: inline-flex;
    width: auto;
    padding: 10px 22px;
    font-size: 0.85rem;
}

.hamburger {
    display: block;
    /* Shown by default on mobile */
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001;
}

/* Hero Section */
.hero {
    height: 100vh;
    min-height: 500px;
    background: url('https://images.unsplash.com/photo-1585801705663-8260a95ff24d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

/* FIX: background-attachment: fixed is unreliable on mobile browsers
   (iOS Safari ignores it, and on some Android/Chrome devices it forces
   the browser to recalculate viewport width incorrectly, which is what
   was causing the blank strip down the side of the page). We disable
   the "fixed" parallax effect only on mobile widths and let it scroll
   normally instead — desktop/tablet keep the original parallax look. */
@media (max-width: 1024px) {
    .hero {
        background-attachment: scroll;
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(10, 38, 71, 0.8), rgba(10, 38, 71, 0.6));
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    width: 100%;
    padding-top: 60px;
    /* Offset for sticky nav on mobile */
}

.hero-title {
    color: var(--white);
    font-size: clamp(2rem, 1.5rem + 4vw, 4rem);
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    color: var(--light-grey);
    font-size: clamp(1rem, 0.8rem + 1.5vw, 1.5rem);
    margin-bottom: 40px;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    /* Stack on mobile */
    gap: 15px;
    justify-content: center;
}

/* Highlights Grid */
.highlights {
    position: relative;
    z-index: 2;
    margin-top: 0;
    /* Reset for mobile */
    padding-top: 50px;
    background: var(--light-grey);
}

.grid-6 {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 column mobile */
    gap: 20px;
}

.highlight-card {
    background-color: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition);
    border-bottom: 4px solid transparent;
}

.highlight-card .icon {
    font-size: 2.5rem;
    color: var(--secondary);
    margin-bottom: 15px;
    transition: var(--transition);
}

.highlight-card h3 {
    margin-bottom: 10px;
    font-size: 1.25rem;
}

/* About Us */
.ceo-message {
    margin-bottom: 40px;
}

.quote-card {
    background-color: var(--light-grey);
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid var(--secondary);
    position: relative;
    font-size: 1rem;
    font-style: italic;
    color: var(--dark-grey);
}

.quote-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 2rem;
    color: rgba(212, 175, 55, 0.1);
}

.ceo-info {
    margin-top: 15px;
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 col mobile */
    gap: 20px;
    margin-bottom: 40px;
}

.vm-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    padding: 30px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vm-card h3 {
    color: var(--secondary);
    margin: 15px 0;
    font-size: 1.3rem;
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--secondary);
}

.principles-culture-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 col mobile */
    gap: 30px;
}

.icon-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

.icon-list li i {
    color: var(--secondary);
    margin-right: 15px;
    margin-top: 5px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.center-tags {
    justify-content: center;
}

.tag {
    background-color: var(--light-grey);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(10, 38, 71, 0.1);
}

.tag-alt {
    background-color: var(--primary);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ORGANOGRAM */
.organogram {
    padding: 60px 0;
}

/* Tree wrapper */
.org-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    width: 100%;
}

/* --- CEO tier --- */
.tier-ceo {
    display: flex;
    justify-content: center;
    width: 100%;
}

.org-card-ceo {
    min-width: 280px;
    padding: 25px 40px;
    border-top-width: 5px;
}

/* Vertical stem from CEO down */
.org-connector-stem {
    width: 2px;
    height: 40px;
    background-color: var(--primary);
    opacity: 0.4;
}

/* Horizontal bar connecting the three drop lines */
.org-connector-bar {
    height: 2px;
    background-color: var(--primary);
    opacity: 0.4;
    width: 66%;
    /* spans across all 3 columns */
    max-width: 680px;
}

/* --- Second tier (row of 3) --- */
.tier-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 900px;
}

.org-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 260px;
}

/* Vertical drop from bar to each card */
.org-connector-drop {
    width: 2px;
    height: 40px;
    background-color: var(--primary);
    opacity: 0.4;
}

/* --- Card base --- */
.org-card {
    background-color: var(--white);
    padding: 22px 24px;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    border-top: 4px solid var(--secondary);
    width: 100%;
    transition: var(--transition);
}

.org-card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

/* Avatar circle */
.org-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.5rem;
    color: var(--secondary);
}

.org-card-ceo .org-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
}

.org-card h4 {
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.org-card-ceo h4 {
    font-size: 1.15rem;
}

.org-badge {
    display: inline-block;
    background-color: var(--secondary);
    color: var(--white);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Mobile: stack everything vertically */
@media (max-width: 767px) {
    .org-connector-bar {
        display: none;
    }

    .tier-row {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .org-col {
        max-width: 300px;
        width: 100%;
    }

    .org-connector-drop {
        height: 20px;
    }
}

/* Services */
.stratagem {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 col mobile */
    gap: 20px;
    margin-bottom: 40px;
}

.strat-card {
    background-color: var(--white);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.strat-icon {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 col mobile */
    gap: 20px;
}

.service-card {
    background-color: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--primary);
}

.service-card .icon {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.service-card ul {
    color: var(--text-color);
}

.service-card ul li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.service-card ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--secondary);
}

/* Strength Section */
.strength {
    background: linear-gradient(135deg, var(--primary) 0%, #061121 100%);
    position: relative;
}

.stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 cols mobile for stats */
    gap: 15px;
    text-align: center;
    margin-bottom: 40px;
}

.stat-item {
    padding: 10px;
}

.counter {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    font-weight: 800;
    color: var(--secondary);
    line-height: 1;
    margin-bottom: 5px;
}

.stat-item span {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.strength-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 col mobile */
    gap: 20px;
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 12px;
}

.glass-card h3 {
    color: var(--white);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.icon-gold {
    font-size: 2rem;
    color: var(--secondary);
    margin-bottom: 15px;
}

.progress-list li {
    margin-bottom: 12px;
}

.prog-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background-color: var(--secondary);
    border-radius: 4px;
}

.welfare-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
}

.w-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    font-size: 0.8rem;
}

.w-item i {
    font-size: 1.2rem;
    color: var(--secondary);
    margin-bottom: 8px;
}

/* Clients */
.client-categories {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.category-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--dark-grey);
}

.logo-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.logo-placeholder {
    width: 100px;
    /* slightly smaller on mobile */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--white);
    font-weight: bold;
    font-size: 1rem;
    transition: var(--transition);
}

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

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

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

/* Credentials */
.cred-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.cred-badge {
    background-color: var(--white);
    border: 1px solid #e2e8f0;
    padding: 10px 15px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.85rem;
    box-shadow: var(--shadow-sm);
}

.cred-badge i {
    color: var(--secondary);
    font-size: 1rem;
}

.license-banner {
    background-color: var(--light-grey);
    padding: 15px;
    border-radius: 8px;
    border-left: 5px solid var(--secondary);
}

.quote-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    font-style: italic;
    font-size: 1rem;
    color: var(--dark-grey);
}

.author {
    display: block;
    margin-top: 15px;
    font-weight: 600;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--primary);
}

/* Contact */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 col mobile */
    gap: 30px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.icon-circle {
    width: 40px;
    height: 40px;
    background-color: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    margin-right: 15px;
    flex-shrink: 0;
}

.contact-form-container {
    background-color: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.form-group {
    margin-bottom: 15px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    /* Ensure 100% width */
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
    min-height: 44px;
    /* Touch target */
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* Footer */
.footer {
    background-color: var(--primary);
    color: var(--white);
    padding-top: 50px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 col mobile */
    gap: 30px;
    margin-bottom: 30px;
}

.footer-about h2 {
    color: var(--white);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.footer-about h2 span {
    color: var(--secondary);
}

.social-links {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.footer h3 {
    color: var(--white);
    margin-bottom: 15px;
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 8px;
}

.footer h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--secondary);
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-contact p {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    font-size: 0.9rem;
}

.footer-contact p i {
    color: var(--secondary);
    margin-right: 10px;
    margin-top: 4px;
}

.footer-bottom {
    background-color: #061121;
    padding: 15px 0;
    font-size: 0.8rem;
    color: var(--light-grey);
}

/* ==================================================
   RESPONSIVE BREAKPOINTS
   ================================================== */

/* Responsive: Tablet Portrait (576px - 767px) */
@media (min-width: 576px) {
    .container {
        padding: 0 20px;
    }

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

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

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

    .hero-buttons {
        flex-direction: row;
        gap: 20px;
    }

    .btn {
        width: auto;
    }

    .contact-form-container {
        padding: 30px;
    }

    .cred-badge {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* Responsive: Tablet Landscape (768px - 1023px) */
@media (min-width: 768px) {
    section {
        padding: 60px 0;
    }

    /* Reveal Navigation */
    .hamburger {
        display: none;
    }

    .nav-links {
        position: static;
        flex-direction: row;
        width: auto;
        height: auto;
        background-color: transparent;
        box-shadow: none;
        gap: 20px;
        max-width: none;
    }

    .nav-links li {
        width: auto;
    }

    .nav-links li a {
        font-size: 0.9rem;
        padding: 0;
    }

    .nav-links li a:not(.btn)::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--secondary);
        transition: var(--transition);
    }

    .nav-links li a:not(.btn):hover::after {
        width: 100%;
    }

    .navbar {
        background-color: transparent;
        padding: 20px 0;
        box-shadow: none;
    }

    .navbar.scrolled {
        background-color: rgba(10, 38, 71, 0.95);
        padding: 15px 0;
        box-shadow: var(--shadow-md);
    }

    /* Grids */
    .highlights {
        margin-top: -40px;
        padding-top: 0;
        background: transparent;
    }

    .vision-mission-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .principles-culture-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .stats-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .contact-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }


}

/* Responsive: Desktop (1024px - 1439px) */
@media (min-width: 1024px) {
    section {
        padding: 80px 0;
    }

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .strength-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .highlights {
        margin-top: -60px;
    }

    .nav-links {
        gap: 30px;
    }

    .nav-links li a {
        font-size: 0.95rem;
    }

    .contact-form-container {
        padding: 40px;
    }

    .logo-placeholder {
        width: 120px;
        height: 80px;
        font-size: 1.2rem;
    }

    .cred-badge {
        padding: 15px 25px;
        font-size: 1rem;
    }
}

/* Responsive: Large Screens (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
    }

    .hero-title {
        font-size: 4.5rem;
    }
}

/* Hover Effects (Only applied if device supports hover) */
@media (hover: hover) {
    .highlight-card:hover {
        transform: translateY(-10px) scale(1.03);
        border-color: var(--secondary);
    }

    .highlight-card:hover .icon {
        transform: scale(1.1);
    }

    .vm-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }

    .strat-card:hover {
        border-color: var(--secondary);
        box-shadow: var(--shadow-md);
    }

    .service-card:hover {
        transform: scale(1.03);
        box-shadow: var(--shadow-lg);
        border-top-color: var(--secondary);
    }

    .glass-card:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--secondary);
    }

    .logo-placeholder:hover {
        transform: scale(1.1);
        box-shadow: var(--shadow-md);
    }

    .cred-badge:hover {
        border-color: var(--secondary);
        color: var(--primary);
        transform: translateY(-5px);
    }

    .social-links a:hover {
        background-color: var(--secondary);
        transform: translateY(-3px);
    }
}



/* ============================================================
   NEW — OUR DEPLOYMENT SECTION
   ============================================================ */

/* ── Section wrapper ── */
.deployment {
  padding: 80px 0 70px;
  background: #0a0f1e;        /* same deep navy as .strength */
  overflow: hidden;
  width: 100%;
}

/* ── Section heading colours (white on dark bg) ── */
.deployment .section-title h2 {
  color: #ffffff;
}

.deployment .section-title p {
  color: rgba(255, 255, 255, 0.60);
}




/* ── Marquee outer wrapper ──
   Full viewport width, clips the moving belt,
   adds soft fade-out on left & right edges       */
.deployment-track-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-top: 44px;
  padding: 14px 0 24px;      /* breathing room for box-shadows */

  /* Fade edges — pure CSS mask, no extra elements */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 5%,
    #000 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 5%,
    #000 95%,
    transparent 100%
  );
}

/* ── Moving belt ── */
.deployment-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;           /* shrink-wraps all 16 cards */
  animation: dep-scroll 36s linear infinite;
  will-change: transform;
}

/* Pause the whole strip on hover */
.deployment-track-wrapper:hover .deployment-track {
  animation-play-state: paused;
}

/* ── Keyframe — translates exactly one full set (50% of belt) ── */
@keyframes dep-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .deployment-track {
    animation: none;
  }
  .deployment-track-wrapper {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}


/* ── Individual cards ── */
.dep-card {
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #111827;                      /* dark fallback while image loads */
  border: 1px solid rgba(201, 168, 76, 0.20);  /* subtle gold rim */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.50);
  position: relative;
  cursor: pointer;

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

/* Lift + glow on hover */
.dep-card:hover {
  transform: translateY(-7px) scale(1.025);
  box-shadow: 0 18px 44px rgba(201, 168, 76, 0.22);
}

/* Gold shimmer overlay on hover */
.dep-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(201, 168, 76, 0.12) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

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

/* ── Image inside card ── */
.dep-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* keeps faces in frame */
  display: block;
  transition: transform 0.5s ease;
}

.dep-card:hover img {
  transform: scale(1.06);
}


/* ── Card size variants based on actual pixel ratios ──

   Pic_1.png  1502×704  → wide landscape  (aspect ~2.13:1)
   Pic_2.jpg   853×853  → square          (aspect  1:1)
   Pic_3.png  1365×768  → landscape       (aspect ~1.78:1)
   Pic_4.jpg   480×600  → portrait        (aspect  0.8:1)
   Pic_5.png  1365×768  → landscape       (aspect ~1.78:1)
   Pic_6.jpg   756×756  → square          (aspect  1:1)
   Pic_7.jpg   947×947  → square          (aspect  1:1)
   Pic_8.jpg   776×538  → landscape       (aspect ~1.44:1)
                                                            */

/* Wide landscape  — Pic_1 */
.dep-card--wide {
  width: 420px;
  height: 197px;
}

/* Standard landscape — Pic_3, Pic_5 */
.dep-card--landscape {
  width: 355px;
  height: 200px;
}

/* Short landscape — Pic_8 */
.dep-card--landscape-short {
  width: 310px;
  height: 215px;
}

/* Square — Pic_2, Pic_6, Pic_7 */
.dep-card--square {
  width: 260px;
  height: 260px;
}

/* Portrait — Pic_4 */
.dep-card--portrait {
  width: 210px;
  height: 262px;
}


/* ── Responsive scaling ── */
@media (max-width: 1024px) {
  .dep-card--wide         { width: 340px; height: 160px; }
  .dep-card--landscape    { width: 290px; height: 163px; }
  .dep-card--square       { width: 215px; height: 215px; }
  .dep-card--portrait     { width: 172px; height: 215px; }
  .deployment-track       { gap: 16px; }
  .deployment-track       { animation-duration: 30s; }
}

@media (max-width: 768px) {
  .deployment             { padding: 60px 0 50px; }
  .dep-card--wide         { width: 260px; height: 122px; }
  .dep-card--landscape    { width: 220px; height: 124px; }
  .dep-card--square       { width: 165px; height: 165px; }
  .dep-card--portrait     { width: 132px; height: 165px; }
  .deployment-track       { gap: 12px; animation-duration: 24s; }
  .deployment-track-wrapper { margin-top: 28px; }
}

@media (max-width: 480px) {
  .dep-card--wide         { width: 200px; height: 94px; }
  .dep-card--landscape    { width: 170px; height: 96px; }
  .dep-card--square       { width: 128px; height: 128px; }
  .dep-card--portrait     { width: 102px; height: 128px; }
  .deployment-track       { gap: 9px; animation-duration: 20s; }
}

/* ============================================================
   ANCHOR SCROLL OFFSET FIX
   ============================================================
   The navbar is position:fixed, so jumping to a section via the
   menu (especially the mobile hamburger menu) lands the section
   right underneath the navbar, hiding its heading. scroll-margin-top
   pushes the scroll-stop position down by the navbar's real height
   at each breakpoint so the heading is always visible — matching
   how it already behaves correctly on desktop. */
section[id] {
    scroll-margin-top: 90px; /* desktop/tablet navbar height + breathing room */
}

@media (max-width: 768px) {
    section[id] {
        scroll-margin-top: 70px; /* mobile navbar is slimmer (smaller logo, 8px padding) */
    }
}

/* ============================================================
   MOBILE WHITE-STRIP FIX (final safety net)
   ============================================================
   Forces every direct section/container to respect the device
   viewport width on phones, so nothing can silently push the
   page wider than the screen and leave a blank gap on the side. */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100vw;
        max-width: 100vw;
    }

    section,
    .container,
    .navbar,
    .nav-container,
    .hero,
    .hero-content,
    .footer,
    .footer-grid {
        max-width: 100vw;
    }
}