/* =====================================================
   NORTHBRIDGE BUSINESS ANALYTICS GROUP
   Main Stylesheet — styles.css

   Table of Contents:
   1. CSS Variables
   2. Reset & Base
   3. Container & Layout Utilities
   4. Typography Utilities
   5. Buttons
   6. Navigation
   7. Hero Section
   8. About Section
   9. Services Section
   10. Projects Section
   11. Experience Section
   12. Contact Section
   13. Footer
   14. Scroll Animations
   15. Responsive Breakpoints
===================================================== */


/* =====================================================
   1. CSS VARIABLES — edit here to retheme the site
===================================================== */
:root {
    /* Brand colors */
    --navy:          #1a3560;
    --navy-dark:     #0d2137;
    --navy-mid:      #1e4070;
    --blue:          #1d5fa6;
    --blue-hover:    #164d8a;
    --blue-light:    #eff6ff;
    --gold:          #c4922a;
    --gold-light:    #fdf4e3;

    /* Neutral palette */
    --white:         #ffffff;
    --off-white:     #f7f9fc;
    --gray-50:       #f8fafc;
    --gray-100:      #f0f4f8;
    --gray-200:      #e2e8f0;
    --gray-300:      #cbd5e0;
    --gray-400:      #a0aec0;
    --gray-500:      #718096;
    --gray-600:      #4a5568;
    --gray-700:      #2d3748;
    --gray-900:      #1a202c;

    /* Semantic text */
    --text-primary:   #1a202c;
    --text-secondary: #4a5568;
    --text-muted:     #718096;

    /* Typography */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.07);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg:  0 10px 40px rgba(0, 0, 0, 0.11);
    --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.16);

    /* Border radius */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;

    /* Transitions */
    --transition:      all 0.25s ease;
    --transition-fast: all 0.15s ease;
}


/* =====================================================
   2. RESET & BASE
===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img  { max-width: 100%; display: block; }
ul   { list-style: none; }
a    { text-decoration: none; color: inherit; }
button { font-family: var(--font); }


/* =====================================================
   3. CONTAINER & LAYOUT UTILITIES
===================================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}

/* Base section padding */
.section { padding: 92px 0; }

/* Light gray background sections (Services, Contact) */
.section-alt { background: var(--gray-50); }

/* Dark navy background sections (Projects) */
.section-dark { background: var(--navy-dark); }


/* =====================================================
   4. SECTION HEADERS — shared across all sections
===================================================== */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px;
}

/* Small colored label above the heading */
.section-label {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--blue);
    background: var(--blue-light);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.section-label--gold {
    color: var(--gold);
    background: rgba(196, 146, 42, 0.15);
}

.section-header h2 {
    font-size: clamp(28px, 3.8vw, 40px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

/* Light variant for dark backgrounds */
.section-header--light h2 { color: var(--white); }

.section-desc {
    font-size: 16.5px;
    color: var(--text-secondary);
    line-height: 1.72;
}
.section-desc--light { color: rgba(255, 255, 255, 0.72); }


/* =====================================================
   5. BUTTONS
===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 15px;
    font-family: var(--font);
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
}

/* Solid blue — primary CTA */
.btn-primary {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
.btn-primary:hover {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(29, 95, 166, 0.28);
}

/* Ghost outline — secondary CTA (used on dark bg) */
.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.45);
}
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
}

/* Full-width button (contact form) */
.btn-full { width: 100%; }


/* =====================================================
   6. NAVIGATION
===================================================== */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Transparent over hero */
#navbar.transparent { background: transparent; }

/* Solid white after scrolling */
#navbar.scrolled {
    background: var(--white);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

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

/* --- Logo --- */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logo-icon {
    width: 38px;
    height: 38px;
    background: var(--blue);
    color: var(--white);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-primary {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    transition: color 0.3s ease;
}
.logo-secondary {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.04em;
    margin-top: 2px;
    transition: color 0.3s ease;
}

/* Logo text color changes when nav scrolls to white */
#navbar.scrolled .logo-primary  { color: var(--navy); }
#navbar.scrolled .logo-secondary { color: var(--gray-500); }

/* --- Nav Links --- */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-link {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    padding: 8px 13px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}
.nav-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

/* Link colors when nav is white */
#navbar.scrolled .nav-link              { color: var(--gray-700); }
#navbar.scrolled .nav-link:hover        { color: var(--navy); background: var(--gray-100); }
#navbar.scrolled .nav-link.active       { color: var(--navy); background: var(--gray-100); }

/* Active link (set by JS on scroll) */
.nav-link.active {
    color: var(--white);
    background: rgba(255, 255, 255, 0.15);
}

/* Contact CTA button in nav */
.nav-cta {
    background: var(--blue) !important;
    color: var(--white) !important;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
}
.nav-cta:hover {
    background: var(--blue-hover) !important;
    transform: none;
}

/* --- Hamburger (hidden on desktop) --- */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 10;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: var(--transition);
}
#navbar.scrolled .hamburger span { background: var(--gray-700); }

/* Hamburger → X animation when open */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =====================================================
   7. HERO SECTION
===================================================== */
.hero {
    background: linear-gradient(140deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-mid) 100%);
    padding-top: 140px;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}

/* Subtle dot-grid pattern overlay */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

/* Two-column layout */
.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 80px;
    position: relative;
    z-index: 1;
}

/* Small badge above headline */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(196, 146, 42, 0.35);
    background: rgba(196, 146, 42, 0.1);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 22px;
}

.hero-text h1 {
    font-size: clamp(28px, 3.8vw, 50px);
    font-weight: 800;
    color: var(--white);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
}

.hero-sub {
    font-size: 16.5px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.72;
    margin-bottom: 36px;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* --- Dashboard Mockup Visual --- */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.dashboard-mockup {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    width: 100%;
    max-width: 430px;
    animation: float 7s ease-in-out infinite;
}

/* Gentle floating animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}

/* macOS window chrome (traffic-light dots) */
.dash-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}
.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }
.dash-title-bar {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
}

.dash-body { padding: 18px; }

/* KPI metric mini-cards */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 16px;
}
.kpi {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.kpi-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gray-500);
    margin-bottom: 4px;
}
.kpi-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}
.kpi-trend {
    font-size: 11px;
    font-weight: 600;
}
.kpi-trend.up   { color: #16a34a; }
.kpi-trend.down { color: #dc2626; }
.kpi-trend i    { font-size: 9px; margin-right: 2px; }

/* Mini bar chart area */
.dash-chart-area {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 13px;
    margin-bottom: 12px;
}
.chart-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
}
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 68px;
}
.bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    height: 100%;
    justify-content: flex-end;
}
.bar-fill {
    width: 100%;
    height: var(--h);
    background: var(--blue);
    border-radius: 3px 3px 0 0;
    opacity: 0.65;
}
.bar-group.active .bar-fill {
    opacity: 1;
    background: var(--gold);
}
.bar-label {
    font-size: 9px;
    color: var(--gray-400);
    font-weight: 500;
}

/* Bottom status row */
.dash-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dash-tag {
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 5px;
}
.dash-tag i { font-size: 8px; }
.dash-updated {
    font-size: 10px;
    color: var(--gray-400);
}

/* Wave SVG that transitions hero into the white About section */
.hero-wave {
    position: relative;
    height: 64px;
    margin-top: -1px;
}
.hero-wave svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}


/* =====================================================
   8. ABOUT SECTION
===================================================== */
.about-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: start;
    margin-bottom: 56px;
}

/* Left text column */
.about-text p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.78;
    margin-bottom: 18px;
}
.about-text p:last-of-type { margin-bottom: 0; }

.about-highlights {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}
.highlight {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 500;
}
.highlight i {
    color: var(--blue);
    font-size: 16px;
    flex-shrink: 0;
}

/* Right cards column */
.about-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mission-card,
.vision-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.mission-card:hover,
.vision-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.mission-card { border-top: 4px solid var(--blue); }
.vision-card  { border-top: 4px solid var(--gold); }

.card-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 15px;
}
.card-icon-blue { background: var(--blue-light); color: var(--blue); }
.card-icon-gold { background: var(--gold-light);  color: var(--gold); }

.mission-card h3,
.vision-card h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.mission-card p,
.vision-card p {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.68;
}

/* "Who We Work With" tag cloud */
.clients-row {
    text-align: center;
    padding-top: 44px;
    border-top: 1px solid var(--gray-200);
}
.clients-row h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}
.client-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.client-tag {
    display: inline-block;
    padding: 7px 17px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    transition: var(--transition-fast);
    cursor: default;
}
.client-tag:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}


/* =====================================================
   9. SERVICES SECTION
===================================================== */
/*
   6-column grid: each card spans 2 cols → 3 per row.
   Cards 4 & 5 are explicitly placed to center them in row 2.
*/
.services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

.service-card {
    grid-column: span 2;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* Center the two cards in row 2 */
.service-card--row2-left  { grid-column: 2 / span 2; }
.service-card--row2-right { grid-column: 4 / span 2; }

.service-icon-wrap {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--blue-light) 0%, #dbeafe 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: var(--blue);
    margin-bottom: 18px;
}

.service-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.3;
}
.service-card p {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.72;
}


/* =====================================================
   10. PROJECTS / CASE STUDIES SECTION
===================================================== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.project-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: var(--transition);
}
.project-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-3px);
}

/* Large faded number */
.project-num {
    font-size: 38px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.08);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums;
}

.project-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1.3;
}
.project-card p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.72;
    margin-bottom: 20px;
}

/* Tool pill tags */
.project-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
}
.tool-tag {
    display: inline-block;
    padding: 4px 11px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.04em;
}

/* Business impact callout */
.project-impact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(196, 146, 42, 0.1);
    border: 1px solid rgba(196, 146, 42, 0.22);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.project-impact i {
    color: var(--gold);
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}
.project-impact span {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}
.project-impact strong { color: var(--white); }


/* =====================================================
   11. ANALYST EXPERIENCE SECTION
===================================================== */
.experience-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: start;
}

/* --- Experience item list --- */
.experience-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.exp-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.exp-icon {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, var(--blue-light) 0%, #dbeafe 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--blue);
    flex-shrink: 0;
}
.exp-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 7px;
}
.exp-content p {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.72;
}

/* --- Stats + Tools card --- */
.experience-visual { position: sticky; top: 90px; }

.exp-stat-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* 2×2 grid of stats */
.exp-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.exp-stat {
    padding: 28px;
    text-align: center;
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}
.exp-stat:nth-child(2n)   { border-right: none; }
.exp-stat:nth-child(n+3)  { border-bottom: none; }

.stat-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}
.stat-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* Tools section below stats */
.exp-tools-section {
    padding: 22px 24px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}
.exp-tools-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--gray-500);
    margin-bottom: 14px;
}
.exp-tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.exp-tool {
    display: inline-block;
    padding: 5px 13px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-700);
}


/* =====================================================
   12. CONTACT SECTION
===================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 60px;
    align-items: start;
}

/* --- Info panel --- */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.contact-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.contact-icon {
    width: 42px;
    height: 42px;
    background: var(--blue);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 15px;
    flex-shrink: 0;
}
.contact-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gray-400);
    margin-bottom: 3px;
}
.contact-val {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.55;
}
.contact-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--blue-light);
    border: 1px solid #dbeafe;
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 4px;
}
.contact-note i {
    color: var(--blue);
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}
.contact-note p {
    font-size: 13.5px;
    color: #1d4ed8;
    line-height: 1.62;
}

/* --- Contact form --- */
.contact-form {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 20px;
}
.form-group:last-of-type { margin-bottom: 0; }

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
}
.form-group input,
.form-group textarea {
    padding: 12px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    resize: vertical;
    outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--gray-400);
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(29, 95, 166, 0.1);
}


/* =====================================================
   13. FOOTER
===================================================== */
.footer {
    background: var(--navy-dark);
    padding: 68px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Brand column */
.footer-brand {}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.footer-logo .logo-icon { background: var(--blue); }
.footer-logo-primary {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
}
.footer-logo-secondary {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.footer-tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.72;
    max-width: 290px;
    margin-bottom: 12px;
}

/* Navigation and Services columns */
.footer-links-col h4,
.footer-services-col h4 {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-bottom: 20px;
}

.footer-links-col ul,
.footer-services-col ul {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.footer-links-col a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s ease;
}
.footer-links-col a:hover { color: var(--white); }

.footer-services-col li {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* Bottom bar */
.footer-bottom {
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-bottom p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
}
.footer-bottom-tag {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.03em;
}


/* =====================================================
   14. SCROLL ANIMATIONS
   Elements start invisible; JS adds .visible to trigger.
===================================================== */
.fade-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =====================================================
   15. RESPONSIVE BREAKPOINTS
===================================================== */

/* --- Tablet: ≤ 1024px --- */
@media (max-width: 1024px) {
    /* Services: 2×2 + 1 row */
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .service-card            { grid-column: span 2; }
    .service-card--row2-left  { grid-column: span 2; }
    .service-card--row2-right { grid-column: span 2; }

    /* Projects: 1 column */
    .projects-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: 0 auto;
    }
}

/* --- Small tablet / large mobile: ≤ 900px --- */
@media (max-width: 900px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 44px;
        padding-bottom: 60px;
    }
    .hero-visual { justify-content: center; }
    .hero-sub    { max-width: 100%; }

    .about-grid       { grid-template-columns: 1fr; gap: 40px; }
    .experience-grid  { grid-template-columns: 1fr; gap: 44px; }
    .contact-grid     { grid-template-columns: 1fr; gap: 40px; }

    .experience-visual { position: static; }

    /* Footer: 2 columns, brand spans full width */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-brand { grid-column: 1 / -1; }
}

/* --- Mobile: ≤ 768px --- */
@media (max-width: 768px) {
    .section { padding: 68px 0; }

    /* Show hamburger, hide nav links by default */
    .hamburger { display: flex; }

    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px 20px;
        box-shadow: var(--shadow-lg);
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
        gap: 3px;
    }
    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }
    /* Force dark text in mobile menu */
    .nav-link,
    #navbar.scrolled .nav-link { color: var(--gray-700) !important; }
    .nav-link:hover,
    #navbar.scrolled .nav-link:hover {
        background: var(--gray-100) !important;
        color: var(--navy) !important;
    }
    .nav-cta { text-align: center; justify-content: center; }

    /* Services: 1 per row on mobile */
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card,
    .service-card--row2-left,
    .service-card--row2-right {
        grid-column: 1 / -1;
    }

    /* Form: stack name + email */
    .form-row { grid-template-columns: 1fr; }

    .contact-form { padding: 28px 20px; }

    /* Footer: single column */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* --- Small mobile: ≤ 480px --- */
@media (max-width: 480px) {
    .container { padding: 0 18px; }

    .hero-text h1 { font-size: 26px; }
    .hero-badge   { font-size: 10.5px; }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    .hero-buttons .btn { width: 100%; }

    /* KPIs stack on very small screens */
    .dash-kpis { grid-template-columns: 1fr; gap: 8px; }

    .section-header { margin-bottom: 40px; }
}