/* --- Color Palette Constants & Layout Tokens --- */
:root {
    --slate-grey: #2c3539;       /* Deep premium industrial corporate slate */
    --slate-dark: #1e2426;       /* Darker tone for backgrounds and canvas */
    --sage-green: #8fa89b;       /* Accent 1: Soft metallic sophisticated sage */
    --sage-light: #f2f5f4;      /* Clean contrast tone for background grids */
    --copper: #c87d55;           /* Accent 2: Energetic high-end closing copper */
    --copper-hover: #b06b46;     /* Shift copper tone for modern buttons */
    --text-main: #333d42;        /* High-readability dark slate body prose text */
    --text-muted: #6b777d;       /* Secondary structural metadata text style */
    --white: #ffffff;
    
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --transition-smooth: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    --shadow-premium: 0 10px 30px rgba(44, 53, 57, 0.08);
    --border-radius: 8px;
}

/* --- Core Resets & Global System Defaults --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
}

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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Reusable Components (Buttons & Typography) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background-color: var(--slate-grey);
    color: var(--white);
}
.btn-primary:hover {
    background-color: var(--sage-green);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--slate-grey);
    color: var(--slate-grey);
}
.btn-secondary:hover {
    background-color: var(--slate-grey);
    color: var(--white);
}

.btn-copper-solid {
    background-color: var(--copper);
    color: var(--white);
}
.btn-copper-solid:hover {
    background-color: var(--copper-hover);
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}

.text-gradient {
    background: linear-gradient(135deg, var(--slate-grey), var(--copper));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-copper { color: var(--copper) !important; }
.text-sage { color: var(--sage-green) !important; }
.text-white { color: var(--white) !important; }
.text-center { text-align: center; }

.section-title {
    font-size: 2.2rem;
    margin-bottom: 48px;
    position: relative;
}

.page-padding {
    padding: 80px 0;
}

/* --- Sticky Modern Navigation Header System --- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.03);
    z-index: 1000;
    transition: var(--transition-smooth);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Premium Branding Mark */
.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 140px;
    height: 140px;
    object-fit: contain; /* Keeps your logo perfectly proportioned */
}

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

.brand-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 1px;
    color: var(--slate-grey);
    line-height: 1;
}

.brand-tagline {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--copper);
    margin-top: 2px;
}

/* Nav Actions */
.desktop-nav {
    display: flex;
    gap: 8px;
}

.nav-link {
    background: none;
    border: none;
    padding: 8px 16px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.nav-link:hover, .nav-link.active {
    color: var(--slate-grey);
    background-color: var(--sage-light);
}

/* Hamburger Trigger */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.hamburger-menu .bar {
    width: 100%;
    height: 2px;
    background-color: var(--slate-grey);
    transition: var(--transition-smooth);
}

/* Mobile Nav Drawer overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--slate-grey);
    z-index: 999;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-overlay.open {
    left: 0;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.mobile-nav-link {
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: var(--transition-smooth);
}

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

/* Hamburger State Shifts */
.hamburger-menu.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); background-color: var(--white); }
.hamburger-menu.open .bar:nth-child(2) { opacity: 0; }
.hamburger-menu.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background-color: var(--white); }


/* --- Tab Layout Handling Mechanics --- */
.content-wrapper {
    margin-top: 80px; /* Aligns below the modern fixed navigation block */
    min-height: calc(100vh - 80px - 300px);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: contentFadeIn 0.5s ease forwards;
}

@keyframes contentFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-header-context {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px auto;
}

.tab-header-context h1 {
    font-size: 2.6rem;
    margin-bottom: 16px;
}

.tab-header-context p {
    color: var(--text-muted);
    font-size: 1.1rem;
}


/* --- 1. HOME VIEW INTERFACE STYLES --- */
.hero-section {
    background: linear-gradient(145deg, #ffffff 0%, var(--sage-light) 100%);
    padding: 100px 0;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.hero-badge {
    display: inline-block;
    padding: 6px 14px;
    background-color: rgba(143, 168, 155, 0.15);
    color: var(--slate-grey);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 20px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.hero-text-content h1 {
    font-size: 3.5rem;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.hero-text-content p {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 36px;
    max-width: 540px;
}

.hero-actions {
    display: flex;
    gap: 16px;
}

/* Premium Visual Mockup Card CSS */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.abstract-card-ui {
    background-color: var(--slate-grey);
    color: var(--white);
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 400px;
    position: relative;
}

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

.ui-dot-accent {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 12px;
    height: 12px;
    background-color: var(--copper);
    border-radius: 50%;
}

.bar-chart-placeholder {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    height: 140px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
}

.bar-chart-placeholder .bar {
    flex: 1;
    background: linear-gradient(to top, var(--sage-green), var(--copper));
    border-radius: 4px 4px 0 0;
    transform-origin: bottom;
    transform: scaleY(0);
}

.bar-chart-placeholder .bar.animate-bar {
    transform: scaleY(1);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-stats-row {
    display: flex;
    justify-content: space-between;
}

.ui-stats-row span {
    display: block;
    font-size: 0.75rem;
    color: var(--sage-green);
}

.ui-stats-row strong {
    font-size: 1.1rem;
    font-family: var(--font-heading);
}

/* --- Enterprise Slideshow Section --- */
.carousel-section {
    padding: 100px 0;
    background-color: var(--white);
}

.carousel-viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 20px 0;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    gap: 24px;
}

.carousel-slide {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 280px;
}

.slide-inner {
    background-color: var(--white);
    border: 1px solid #eef2f0;
    padding: 40px 32px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-premium);
    height: 100%;
    transition: var(--transition-smooth);
}

.slide-inner:hover {
    transform: translateY(-5px);
    border-color: var(--sage-green);
}

.slide-icon {
    font-size: 2.5rem;
    color: var(--copper);
    margin-bottom: 24px;
}

.slide-inner h3 {
    font-size: 1.3rem;
    margin-bottom: 14px;
}

.slide-inner p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 40px;
}

.carousel-arrow {
    background-color: var(--slate-grey);
    color: var(--white);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.carousel-arrow:hover {
    background-color: var(--copper);
}

.carousel-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cbd5e1;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.dot.active {
    background-color: var(--copper);
    transform: scale(1.2);
}

/* Why Choose Grid */
.why-choose-section {
    padding: 100px 0;
    background-color: var(--sage-light);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.feature-card {
    background-color: var(--white);
    padding: 48px 32px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-premium);
}

.feature-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: rgba(44, 53, 57, 0.05);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--slate-grey);
    margin-bottom: 24px;
}

.feature-card h3 {
    margin-bottom: 14px;
}

.feature-card p {
    color: var(--text-muted);
}

/* Metrics Section & Counters */
.metrics-section {
    padding: 80px 0;
    background-color: var(--slate-grey);
    color: var(--white);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    text-align: center;
}

.metric-box {
    font-family: var(--font-heading);
}

.metric-box .counter, .metric-box .counter-suffix, .metric-box .counter-prefix {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--sage-green);
}

.metric-box p {
    color: rgba(255,255,255,0.7);
    margin-top: 8px;
    font-size: 1rem;
}

/* Testimonials */
.testimonials-section {
    padding: 100px 0;
    background-color: var(--white);
}

.testimonial-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    background-color: var(--sage-light);
    padding: 48px;
    border-radius: 12px;
}

.rating-stars {
    color: var(--copper);
    margin-bottom: 24px;
    font-size: 1.1rem;
}

.testimonial-card p {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--slate-grey);
    margin-bottom: 28px;
}

.client-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.client-avatar-placeholder {
    width: 50px;
    height: 50px;
    background-color: var(--slate-grey);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-info h4 {
    font-size: 1.1rem;
}

.client-info span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Call to Action Banner Section */
.cta-banner-section {
    padding: 80px 0;
    background-color: var(--white);
}

.cta-banner-inner {
    background: linear-gradient(135deg, var(--slate-grey) 0%, var(--slate-dark) 100%);
    padding: 64px;
    border-radius: 16px;
    color: var(--white);
    text-align: center;
    max-width: 1000px;
}

.cta-banner-inner h2 {
    color: var(--white);
    font-size: 2.4rem;
    margin-bottom: 16px;
}

.cta-banner-inner p {
    color: rgba(255,255,255,0.8);
    max-width: 600px;
    margin: 0 auto 32px auto;
    font-size: 1.1rem;
}


/* --- 2. SERVICES ACCORDION & KPI ARCHITECTURE --- */
.services-accordion-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.accordion-item {
    border: 1px solid #e2e8f0;
    background-color: var(--white);
    margin-bottom: 16px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.01);
    transition: var(--transition-smooth);
}

.accordion-header {
    width: 100%;
    padding: 24px 32px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
}

.accordion-header:hover {
    background-color: var(--sage-light);
}

.accordion-title-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--slate-grey);
    display: flex;
    align-items: center;
    gap: 16px;
}

.accordion-title-text i {
    color: var(--copper);
    width: 24px;
}

.accordion-icon-toggle {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

/* Accordion Open Engine */
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.accordion-item.open .accordion-body {
    max-height: 600px; /* Safe performance bound */
}

.accordion-item.open .accordion-icon-toggle {
    transform: rotate(45deg);
    color: var(--copper);
}

.accordion-inner-grid {
    padding: 8px 32px 40px 32px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    border-top: 1px solid #f1f5f9;
}

.service-details-prose p {
    color: var(--text-main);
    margin-bottom: 20px;
}

.service-details-prose ul {
    list-style: none;
}

.service-details-prose ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.service-details-prose ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--sage-green);
    font-size: 0.85rem;
}

.service-kpi-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-content: center;
}

.kpi-mini-card {
    background-color: var(--sage-light);
    padding: 20px;
    border-radius: 6px;
    text-align: center;
}

.kpi-mini-card h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.kpi-metric-val {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.8rem;
}


/* --- 3. INTERACTIVE CHRONOLOGY TIMELINE --- */
.timeline-container {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 0;
}

.timeline-line {
    position: absolute;
    left: 40px;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: var(--sage-light);
    border-radius: 2px;
}

.timeline-milestone {
    position: relative;
    padding-left: 100px;
    margin-bottom: 64px;
    opacity: 0;
    transform: translateY(20px);
}

.timeline-milestone.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.milestone-marker {
    position: absolute;
    left: 22px;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--white);
    border: 4px solid var(--copper);
    color: var(--slate-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    z-index: 2;
}

.milestone-card {
    background-color: var(--white);
    border: 1px solid #eef2f0;
    padding: 32px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-premium);
    position: relative;
}

.milestone-card::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 14px;
    width: 14px;
    height: 14px;
    background-color: var(--white);
    border-left: 1px solid #eef2f0;
    border-bottom: 1px solid #eef2f0;
    transform: rotate(45deg);
}

.milestone-date {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--copper);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.milestone-card h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.milestone-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.milestone-visual-placeholder {
    background-color: var(--sage-light);
    border: 1px dashed var(--sage-green);
    padding: 16px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate-grey);
}


/* --- 4. SECURE CONTACT INTERFACE SYSTEM --- */
.contact-split-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: start;
}

.contact-form-container {
    background-color: var(--white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--shadow-premium);
    border: 1px solid #f1f5f9;
}

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

.form-row-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: var(--slate-grey);
}

.label-optional {
    color: var(--text-muted);
    font-weight: 400;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-main);
    background-color: var(--sage-light);
    border: 1px solid transparent;
    border-radius: 6px;
    transition: var(--transition-smooth);
}

.form-control:focus {
    outline: none;
    border-color: var(--sage-green);
    background-color: var(--white);
    box-shadow: 0 0 0 4px rgba(143, 168, 155, 0.15);
}

/* Validation Visual Alerts */
.form-control.input-error {
    border-color: #e11d48;
    background-color: #fff1f2;
}

.error-msg {
    display: none;
    color: #e11d48;
    font-size: 0.8rem;
    margin-top: 6px;
    font-weight: 600;
}

.success-alert {
    display: none;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 16px;
    border-radius: 6px;
    margin-top: 20px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Info Side Panel Info blocks */
.contact-info-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.info-card-block {
    background-color: var(--sage-light);
    padding: 32px;
    border-radius: var(--border-radius);
}

.info-card-block h3 {
    margin-bottom: 16px;
    font-size: 1.25rem;
}

.info-card-block p {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-icon {
    color: var(--copper);
    width: 16px;
}

.map-placeholder-frame {
    height: 200px;
    background-color: var(--slate-grey);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

.map-inner-canvas {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    gap: 12px;
    background: radial-gradient(circle at center, #3a464b 0%, var(--slate-dark) 100%);
}

.map-globe-icon {
    font-size: 2.2rem;
    color: var(--sage-green);
    animation: rotateGlobe 20s linear infinite;
}

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


/* --- UNIFIED FOOTER ARCHITECTURE --- */
.main-footer {
    background-color: var(--slate-grey);
    color: rgba(255, 255, 255, 0.7);
    padding: 64px 0 40px 0;
    border-top: 4px solid var(--copper);
    margin-top: 80px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr;
    gap: 48px;
}

.footer-brand-column p {
    margin-top: 16px;
    font-size: 0.9rem;
    max-width: 320px;
}

.footer-grid h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.footer-nav-list {
    list-style: none;
}

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

.footer-nav-list button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-family: var(--font-body);
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.footer-nav-list button:hover {
    color: var(--copper);
}

.social-icon-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.social-icon-row a {
    color: var(--white);
    background-color: rgba(255,255,255,0.05);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition-smooth);
    text-decoration: none;
}

.social-icon-row a:hover {
    background-color: var(--copper);
    transform: translateY(-2px);
}

.copyright-notice {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
}


/* --- COMPREHENSIVE RESPONSIVE ADAPTATION LAYERS --- */
@media (max-width: 992px) {
    .hero-grid, .contact-split-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .hero-text-content {
        text-align: center;
    }
    
    .hero-text-content p {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .carousel-slide {
        flex: 0 0 calc(50% - 12px);
    }
    
    .accordion-inner-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    
    .hamburger-menu {
        display: flex;
    }
    
    .hero-text-content h1 {
        font-size: 2.6rem;
    }
    
    .carousel-slide {
        flex: 0 0 100%;
    }
    
    .timeline-line {
        left: 20px;
    }
    
    .timeline-milestone {
        padding-left: 54px;
    }
    
    .milestone-marker {
        left: 2px;
    }
    
    .form-row-two {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
/* --- Clickable Branding Reset & Pointer Styling --- */
.brand-logo-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
}

.brand-logo-btn:focus {
    outline: none; /* Keeps focus rings clean and professional */
}

/* --- Edge-to-Edge Fluid Header Overrides --- */
.main-header .header-container {
    max-width: 100% !important; /* Breaks out of the 1200px limit to go all the way left/right */
    padding: 0 40px;            /* Gives a clean, premium 40px padding safety breathing buffer */
}

@media (max-width: 768px) {
    .main-header .header-container {
        padding: 0 20px;        /* Slightly tighter padding on mobile displays for safety screens */
    }
}
/* --- Trustpilot Ribbon Styling --- */
.trustpilot-ribbon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: -15px auto 45px auto;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 24px;
    border-radius: 50px;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tp-brand {
    font-weight: 700;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tp-star {
    color: #00b67a; /* Signature Trustpilot Green */
}

.tp-score {
    color: var(--text-muted, #a0a0a0);
    font-size: 0.95rem;
}

/* --- Dynamic Slider Window Layout --- */
.testimonials-slider {
    overflow: hidden; /* Clips cards out of view perfectly */
    width: 100%;
    position: relative;
    padding: 15px 0;
}

.testimonials-track {
    display: flex;
    gap: 30px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Elite smooth slide animation */
    width: max-content;
}

.testimonial-card {
    width: 380px; /* Precise fixed card viewport width */
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .testimonial-card {
        width: 290px; /* Adapts card profiles safely on tight mobile screens */
    }
    .trustpilot-ribbon {
        flex-direction: column;
        gap: 8px;
        border-radius: 16px;
        text-align: center;
    }
}
/* ==========================================================================
   PREMIUM ENTERPRISE VISUAL UPGRADES (SAFE OVERRIDES)
   ========================================================================== */

/* 1. Frosted Glass Header Effect on Active States */
.main-header {
    border-bottom: 1px solid rgba(44, 53, 57, 0.06);
}

.nav-link {
    position: relative;
    overflow: hidden;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--copper);
    transition: var(--transition-smooth);
    transform: translateX(-50%);
}

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

/* 2. Glassmorphism Upgrades for the Hero Dashboard UI */
.abstract-card-ui {
    background: linear-gradient(135deg, rgba(44, 53, 57, 0.95) 0%, rgba(30, 36, 38, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    transform: perspective(1000px) rotateX(4deg) rotateY(-8deg) rotateZ(2deg);
    transition: transform 0.5s ease;
}

.abstract-card-ui:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

/* 3. Luxury Smooth Gradient Shadow on Service/Feature Cards */
.slide-inner, .feature-card, .testimonial-card, .milestone-card {
    border: 1px solid rgba(143, 168, 155, 0.12) !important;
    box-shadow: 0 15px 35px rgba(44, 53, 57, 0.03), 0 5px 15px rgba(0, 0, 0, 0.01) !important;
    background: linear-gradient(to bottom right, #ffffff, #fcfdfe);
}

.slide-inner:hover, .feature-card:hover {
    box-shadow: 0 25px 50px rgba(200, 125, 85, 0.08) !important;
}

/* 4. Luxury Trustpilot Green Accent Integration */
.trustpilot-ribbon {
    background: var(--sage-light) !important;
    border: 1px solid rgba(143, 168, 155, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.trustpilot-ribbon .rating-stars i {
    color: #00b67a !important; /* Forces official Trustpilot green across stars */
}

/* 5. Inputs Focus Ring Premiumization */
.form-control:focus {
    border-color: var(--copper) !important;
    box-shadow: 0 0 0 4px rgba(200, 125, 85, 0.12) !important;
}

/* 6. Continuous Smooth Flow Animation for Map Globe */
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(143, 168, 155, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(143, 168, 155, 0); }
    100% { box-shadow: 0 0 0 0 rgba(143, 168, 155, 0); }
}

.map-inner-canvas {
    border: 1px solid rgba(255, 255, 255, 0.05);
}
/* ==========================================================================
   DYNAMIC TESTIMONIAL AVATARS UPGRADE (SAFE OVERRIDES)
   ========================================================================== */

/* Hide the generic user icon inside the placeholder safely */
.client-avatar-placeholder .fa-user-tie {
    display: none !important;
}

/* Transform the empty circular placeholder into a styled initials badge */
.client-avatar-placeholder {
    background: linear-gradient(135deg, var(--slate-grey) 0%, var(--slate-dark) 100%) !important;
    border: 2px solid rgba(200, 125, 85, 0.4) !important; /* Elegant copper rim border */
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    color: var(--copper) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Dynamically inject corporate initials per client sequence without touching HTML templates */
.testimonial-card:nth-child(1) .client-avatar-placeholder::after { content: 'MV'; }
.testimonial-card:nth-child(2) .client-avatar-placeholder::after { content: 'SJ'; }
.testimonial-card:nth-child(3) .client-avatar-placeholder::after { content: 'DC'; }
.testimonial-card:nth-child(4) .client-avatar-placeholder::after { content: 'ER'; }
.testimonial-card:nth-child(5) .client-avatar-placeholder::after { content: 'JB'; }
.testimonial-card:nth-child(6) .client-avatar-placeholder::after { content: 'AO'; }
.testimonial-card:nth-child(7) .client-avatar-placeholder::after { content: 'CM'; }
.testimonial-card:nth-child(8) .client-avatar-placeholder::after { content: 'CB'; }
.testimonial-card:nth-child(9) .client-avatar-placeholder::after { content: 'TA'; }
Fantastic! Those testimonial avatars are going to look remarkably sharp and human now, with zero risk to your slider functionality.  Let’s move on to Step 3, focusing on the Careers Form and Selection Elements inside your Index.html panels.  Right now, standard dropdown browser selection arrows (like the ones on your English Level and Experience inputs) look basic and plain. When users click them, they feel a bit rigid. We can turn those inputs into ultra-modern, slick executive form fields by styling their typography, giving them a cleaner border radius, and sharpening their layout transitions.  Open your style.css file, go right to the very bottom under your new avatar styles, and paste this single block:  CSS/* ==========================================================================
   FORM OPTIMIZATION & PREMIUM DROPDOWN VISUALS (SAFE OVERRIDES)
   ========================================================================== */

/* Modernize form field rows to look unified and upscale */
.form-control {
    font-size: 0.9rem !important;
    letter-spacing: 0.3px;
    border: 1px solid rgba(44, 53, 57, 0.08) !important;
    padding: 14px 18px !important; /* Slightly taller for an executive look */
    border-radius: var(--border-radius) !important;
}

/* Specific premium styling for selection inputs */
select.form-control {
    cursor: pointer;
    color: var(--text-main);
    font-weight: 500;
    /* Clean custom background style override for modern web viewports */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c87d55'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px !important;
}

/* Highlight input field labels with subtle premium scaling */
.form-group label {
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--slate-grey);
    margin-bottom: 10px;
}
/* ==========================================================================
   INTERACTIVE SERVICES ACCORDION HIGHLIGHTS (SAFE OVERRIDES)
   ========================================================================== */

/* Add a clean, crisp left border highlight to headers when hovered */
.accordion-header {
    border-left: 3px solid transparent;
    transition: var(--transition-smooth) !important;
}

.accordion-header:hover {
    border-left-color: var(--sage-green);
    background-color: rgba(143, 168, 155, 0.04) !important;
}

/* Transform the active accordion item with a luxury enterprise glow */
.accordion-item.open {
    border-color: var(--sage-green) !important;
    box-shadow: 0 10px 25px rgba(143, 168, 155, 0.06) !important;
    background: linear-gradient(to bottom right, #ffffff, var(--sage-light)) !important;
}

/* Give the active header an authoritative look */
.accordion-item.open .accordion-header {
    border-left-color: var(--copper);
    background-color: rgba(200, 125, 85, 0.02) !important;
}

/* Add a premium border-radius to the inner KPI mini-cards */
.kpi-mini-card {
    border: 1px solid rgba(44, 53, 57, 0.04);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01);
    transition: transform 0.3s ease;
}

.kpi-mini-card:hover {
    transform: translateY(-2px);
}
/* ==========================================================================
   EXECUTIVE METRICS COUNTER DECK UPGRADE (SAFE OVERRIDES)
   ========================================================================== */

/* Turn the metrics grid into an elegant, floating premium layout deck */
.metrics-section {
    background: linear-gradient(135deg, var(--slate-dark) 0%, var(--slate-grey) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

/* Individual metric box polishing */
.metric-box {
    padding: 20px;
    border-radius: var(--border-radius);
    transition: var(--transition-smooth);
    position: relative;
}

/* Add a premium glowing focal underscore accent underneath the numbers */
.metric-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background-color: transparent;
    border-radius: 2px;
    transition: var(--transition-smooth);
}

.metric-box:hover::after {
    width: 60px;
    background-color: var(--copper);
    box-shadow: 0 0 12px var(--copper);
}

/* Make the giant numbers look incredibly sharp and crisp */
.metric-box .counter, 
.metric-box .counter-suffix, 
.metric-box .counter-prefix {
    font-weight: 700 !important;
    letter-spacing: -1px;
    background: linear-gradient(180deg, #ffffff 0%, var(--sage-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Micro-interaction to lift the container on hover */
.metric-box:hover {
    transform: translateY(-5px);
}
/* ==========================================================================
   MAGNETIC INTERACTIVE BUTTON POLISHING (SAFE OVERRIDES)
   ========================================================================== */

/* Upgrade the structural baseline of all core primary action buttons */
.btn, .btn-submit {
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(200, 125, 85, 0.15);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.3s ease !important;
}

/* Luxury hover effect with an elegant copper glow expansion */
.btn:hover, .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(200, 125, 85, 0.35);
}

/* Clean tactile click response depth when pushed down */
.btn:active, .btn-submit:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(200, 125, 85, 0.2);
}

/* Premium micro-sheen reflection animation on top of buttons */
.btn::before, .btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: none;
}

.btn:hover::before, .btn-submit:hover::before {
    left: 150%;
    transition: left 0.8s ease-in-out;
}
/* ==========================================================================
   ENTERPRISE FOOTER TEXT & LINK REFINEMENTS (SAFE OVERRIDES)
   ========================================================================== */

/* Clean structural border for the footer to match the dark slate theme */
.main-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    background-color: var(--slate-dark) !important;
}

/* Elegant transition effect for footer link hover states */
.footer-links a {
    color: var(--text-muted) !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--copper) !important;
    transform: translateX(4px); /* Subtle slide-right indicator effect */
}

/* Polishing the copyright legal text row at the base */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    padding-top: 20px !important;
}

.footer-bottom p {
    font-size: 0.78rem !important;
    letter-spacing: 0.5px;
    color: rgba(143, 168, 155, 0.5) !important; /* Soft, readable sage-muted legal text */
}
/* ==========================================================================
   TARGETED "ABOUT US" SYSTEM UPGRADE (HTML ELEMENT SPECIFIC)
   ========================================================================== */

/* Target the main text paragraphs inside your About pane/container */
#about-panel p, 
.about-section p {
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
    color: var(--text-main) !important;
}

/* Target the first introductory paragraph to make it look editorial */
#about-panel p:first-of-type,
.about-section p:first-of-type {
    border-left: 3px solid var(--sage-green);
    padding-left: 20px;
    font-size: 1.08rem !important;
    color: var(--slate-grey) !important;
}

/* Target any grid boxes or feature cards inside your About layout */
#about-panel .grid > div,
.about-features-grid > div,
.about-card {
    background: #ffffff !important;
    border: 1px solid rgba(44, 53, 57, 0.06) !important;
    border-radius: var(--border-radius) !important;
    padding: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Apply the luxury smooth lift effect on hover */
#about-panel .grid > div:hover,
.about-features-grid > div:hover,
.about-card:hover {
    transform: translateY(-5px);
    border-color: rgba(200, 125, 85, 0.25) !important;
    box-shadow: 0 20px 40px rgba(44, 53, 57, 0.05) !important;
}

/* Target Font Awesome icons specifically inside the About section */
#about-panel i, 
.about-section i {
    color: var(--copper) !important;
    transition: transform 0.4s ease;
}

#about-panel .grid > div:hover i,
.about-features-grid > div:hover i {
    transform: scale(1.15);
}
/* ==========================================================================
   HIGH-CONVERSION CONTACT SECTION POLISHING (SAFE OVERRIDES)
   ========================================================================== */

/* Turn the contact info details area into a crisp, high-authority panel */
.contact-info-block, 
#contact-panel .info-side,
.contact-details-wrap {
    background: linear-gradient(135deg, var(--slate-dark) 0%, var(--slate-grey) 100%) !important;
    color: #ffffff !important;
    padding: 40px !important;
    border-radius: var(--border-radius) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ensure headings inside the dark contact info panel remain pristine and legible */
.contact-info-block h3, 
#contact-panel .info-side h3,
.contact-details-wrap h3 {
    color: #ffffff !important;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

/* Add an elegant subtle hover animation to direct contact detail links (Email, Phone) */
.contact-item a {
    color: var(--sage-light) !important;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.contact-item a:hover {
    color: var(--copper) !important;
    transform: translateX(3px);
}

/* Polish textarea message input boxes to prevent messy layout stretching */
textarea.form-control {
    min-height: 120px;
    resize: vertical; /* Restricts users from breaking horizontal layouts */
    line-height: 1.5;
}