*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* ========================================== */
/* GLOBAL COLOR CONFIGURATION VARIABLES      */
/* ========================================== */
:root {
    /* Main Accent Tone (Your Yellow Token) */
    --accent-color: #fbbc05;       
    --accent-hover: #e0a300;       
    --accent-glow: rgba(251, 188, 5, 0.25);

    /* Dark Mode Theme Colors (Hero Section) */
    --dark-bg: #2b2d31;            /* Premium Smooth Cement / Ash Gray Background */
    --dark-text-main: #ffffff;     /* White for High Contrast Content Text */
    --dark-text-sub: #fbbc05;      /* Yellow Accents for Sub-headings */

    /* Component & Elements Container (Your Dark Charcoal Token) */
    --component-bg: #1b1b1e;       /* Deep Jet Black Card Space */
    
    /* Light Mode Theme Colors (Scroll Section) */
    --light-bg: #f4f4f6;           /* Crisp Light Ash/Cement Floor Backing */
    --light-text-main: #1b1b1e;    /* Jet Black for crisp readable typography */
    --light-text-sub: #555861;     /* Charcoal muted body text */
    --border-color: #dcdde1;       /* Light Cement panel dividers */
}

/* ========================================== */
/* CORE RESETS & GLOBAL VARIABLES             */
/* ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--dark-bg);
    color: var(--dark-text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

/* ========================================== */
/* SITE HEADER HEADER NAVIGATION              */
/* ========================================== */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: linear-gradient(to bottom, var(--component-bg), transparent);
}

.logo {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.logo-accent {
    color: var(--accent-color);
}

.nav-links a {
    color: #dddddd;
    text-decoration: none;
    margin: 0 20px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--accent-color);
}

.btn-order {
    background-color: var(--accent-color);
    color: var(--component-bg) !important; /* High contrast black text inside yellow button */
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px var(--accent-glow);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-order:hover {
    transform: scale(1.05);
    background-color: var(--accent-hover);
}

/* ========================================== */
/* HERO VIEWPORT AND ANGULAR DECKS PANELS     */
/* ========================================== */
.hero-wrapper {
    position: relative;
    width: 100%;
    /* REPLACE height: 100vh; WITH THE LINE BELOW */
    min-height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Add internal breathing room for wrapping text contents on small viewports */
    padding: 60px 20px; 
    box-sizing: border-box;
}


.hero-center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 800px; /* Limits paragraph stretching on ultra-wide screens */
    margin: 0 auto;
}
/* Responsive adjustments for Tablets & Phones (Screen widths under 992px) */
@media (max-width: 991px) {
    .hero-center-content h1, 
    .main-heading {
        font-size: clamp(24px, 5vw, 36px) !important;
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    .hero-center-content p,
    .sub-heading {
        font-size: clamp(14px, 3vw, 18px) !important;
        line-height: 1.5;
        margin-bottom: 25px;
    }
}


.main-heading {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
    color: var(--dark-text-main);
}

.main-heading span {
    color: var(--dark-text-sub); /* Highlight sub-heading sections in yellow */
    font-weight: 700;
    font-size: 1.8rem;
    display: block;
    margin-top: 15px;
}

.sub-heading {
    font-size: 1.15rem;
    color: #e0e0e0;
    margin-bottom: 40px;
    line-height: 1.6;
}
.btn-cta {
    background-color: var(--accent-color);
    color: var(--component-bg);
    border: none;
    padding: 15px 45px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    
    /* 1. Base default fallback shadow matching your image properties */
    box-shadow: 0 4px 15px var(--accent-glow);
    
    /* 2. Fluid transition handling both transform and shadow calculations smoothly */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    
    will-change: transform, box-shadow;
}


.btn-cta:hover {
    transform: scale(1.08);
    background-color: var(--accent-hover);
}

/* 45 Degree Diagonal Dynamic Track Scaffolding */
.portfolio-track {
    position: absolute;
    width: 32vw;
    height: 160vh;
    display: flex;
    flex-direction: column;
    gap: 25px;
    top: -30vh;
    z-index: 1;
    opacity: 0.15; /* Subdued opacity level looks striking against cement grey layout */
    pointer-events: none;
    transition: transform 0.1s ease-out;
}

.track-left {
    left: -8vw;
    transform: rotate(22deg);
}

.track-right {
    right: -8vw;
    transform: rotate(22deg);
}

.slide-card {
    width: 100%;
    height: 240px;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

/* Background Deck Palette Arrays */
.color-blue       { background: linear-gradient(135deg, #1e3c72, #2a5298); }
.color-red        { background: linear-gradient(135deg, #b22222, #8b0000); }
.color-teal       { background: linear-gradient(135deg, #008080, #00ced1); }
.color-purple     { background: linear-gradient(135deg, #4b0082, #8a2be2); }
.color-darkpurple { background: linear-gradient(135deg, #2c1a4d, #4a287a); }
.color-navy       { background: linear-gradient(135deg, #0f2027, #203a43); }
.color-orange     { background: linear-gradient(135deg, #d35400, #e67e22); }
.color-green      { background: linear-gradient(135deg, #134e5e, #71b280); }

/* ========================================== */
/* LIGHT BG CONTENT SECTIONS & COMPONENT BLOCKS*/
/* ========================================== */
.scroll-content-section {
    background-color: var(--light-bg);
    color: var(--light-text-main);
    padding: 100px 24px;
    width: 100%;
    position: relative;
    z-index: 20;
}

/* Trust Metric Grid Panels */
.stats-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto 90px auto;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 50px;
    text-align: center;
}

.stat-box {
    flex: 1;
    padding: 0 20px;
}

.stat-img {
    margin-bottom: 12px;
}

.linkedin-mock {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--component-bg);
}

.linkedin-mock .in-box {
    background: #0077b5;
    color: #ffffff;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 3px;
}

.stat-box h4 {
    font-size: 1.05rem;
    color: var(--accent-color);
    margin: 10px 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-box p {
    font-size: 0.95rem;
    color: var(--light-text-sub);
    line-height: 1.5;
}

.stat-box p span {
    font-size: 0.85rem;
    color: #888888;
}

.stars {
    color: var(--accent-color);
    font-size: 1.3rem;
    margin: 6px 0;
    letter-spacing: 2px;
}

.stat-icon {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.stat-number {
    font-size: 1.8rem !important;
    color: var(--light-text-main) !important;
    font-weight: 900;
}

/* Showcase Descriptor Header Layouts */
.what-we-do {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.section-title {
    font-size: 2.8rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 800;
}

.section-desc {
    font-size: 1.15rem;
    color: var(--light-text-sub);
    max-width: 900px;
    margin: 0 auto 60px auto;
    line-height: 1.7;
}

/* ========================================== */
/* SLIDER VIEWPORTS CAROUSEL FRAMEWORKS        */
/* ========================================== */
.carousel-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
    gap: 15px;
}

.comparison-display {
    display: flex;
    flex: 1;
    gap: 40px;
    justify-content: center;
}

.side-panel {
    position: relative;
    width: 48%;
    max-width: 480px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.badge {
    position: absolute;
    top: -14px;
    left: 24px;
    padding: 5px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1px solid var(--accent-color);
    z-index: 5;
    letter-spacing: 0.5px;
}

.badge-before { background-color: var(--light-bg); color: var(--accent-color); }
.badge-after  { background-color: var(--light-bg); color: var(--accent-color); }

.panel-card {
    height: 310px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.note-card {
    background-color: #eaeaea; /* Muted ash tint card panel for raw context side */
    border: 1px solid var(--border-color);
    padding: 40px;
}

.handwritten-text {
    font-family: "Georgia", serif;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--component-bg);
    line-height: 1.6;
}

.design-card {
    background-color: var(--component-bg); /* Jet black output canvas background layer */
    padding: 25px;
}

.mock-standee {
    background-color: #ffffff;
    width: 150px;
    height: 260px;
    position: relative;
    padding: 15px;
    text-align: left;
    color: #222222;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.standee-accent {
    width: 100%;
    height: 45%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    margin-bottom: 12px;
}

.mock-standee h5 { font-size: 1rem; margin-bottom: 4px; font-weight: bold;}
.mock-standee p { font-size: 0.75rem; color: #777777;}

.arrow-btn {
    background: none;
    border: none;
    font-size: 2.8rem;
    color: var(--accent-color);
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.arrow-btn:hover {
    transform: scale(1.2);
    color: var(--accent-hover);
}

/* Showcase Descriptor Base Text Items */
.category-footer h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.5px;

color: var(--light-text-main);}.category-footer p {font-size: 1rem;color: var(--light-text-sub);margin-bottom: 25px;}.btn-learn-more {background-color: var(--accent-color);color: var(--component-bg); /* Black text on yellow action block buttons */border: none;padding: 14px 40px;border-radius: 25px;font-weight: bold;font-size: 0.95rem;cursor: pointer;box-shadow: 0 4px 15px var(--accent-glow);transition: background-color 0.2s ease, transform 0.2s ease;}.btn-learn-more:hover {background-color: var(--accent-hover);transform: translateY(-1px);}/* ========================================== // LAYOUT BREAK CONFIGURATIONS (RESPONSIVE)   // ========================================== */@media(max-width: 992px) {.main-heading { font-size: 1.9rem; }.main-heading span { font-size: 1.3rem; }.portfolio-track { display: none; }.site-header { padding: 20px; }.nav-links { display: none; }.stats-row { flex-direction: column; gap: 40px; }.comparison-display { flex-direction: column; align-items: center; }.side-panel { width: 100%; }}
/* Metrics Counter & Brand Containers */
.metrics-brand-section {
    background-color: var(--component-bg); /* Deep Jet Black #1b1b1e base */
    padding: 100px 40px;
    margin-top: 80px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

/* Three Columns Flex Layout Framework */
.counters-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto 90px auto;
    gap: 30px;
}

.counter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Circles Layout Borders Rules */
.counter-circle {
    width: 160px;
    height: 160px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark-text-main);
    margin-bottom: 25px;
    position: relative;
    transition: transform 0.3s ease;
}

/* Center Highlight Node Circle Configuration */
.active-center .counter-circle {
    width: 220px;
    height: 220px;
    border: 4px solid var(--accent-color); /* Bright Yellow #fbbc05 Border Halo */
    box-shadow: 0 0 30px var(--accent-glow);
    font-size: 2.4rem;
}

.counter-label {
    font-size: 1.4rem;
    font-weight: 500;
    color: #cccccc;
    letter-spacing: 0.5px;
}

/* Typography styles inside count circles */
.count-number {
    font-variant-numeric: tabular-nums; /* Prevents text from jittering during counting */
}
.count-plus {
    color: var(--accent-color);
}

/* Grid Layout for Corporate Client Logos */
.brands-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.brand-item {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    cursor: default;
}
.brand-item:hover {
    opacity: 1;
}

/* Mimicked Logo Font Treatments matching your snapshot design profiles */
.logo-affirm { font-family: 'Helvetica Neue', sans-serif; font-style: italic; color: #4a4af4; opacity: 0.85; }
.logo-jj { font-family: 'Georgia', serif; color: #cc1111; font-style: italic; opacity: 0.85; }
.logo-xalud { font-size: 1.1rem; letter-spacing: 4px; color: #5bc0be; font-weight: 500; }
.logo-xalud span { display: block; font-size: 0.55rem; letter-spacing: 2px; color: #888; }
.logo-gallaudet { font-size: 1.2rem; font-family: serif; color: #1a365d; letter-spacing: 1px; }
.logo-gallaudet span { display: block; font-size: 0.55rem; letter-spacing: 3px; color: #666; }

@media(max-width: 768px) {
    .counters-grid { flex-direction: column; gap: 50px; }
    .brands-wrapper { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .active-center .counter-circle { width: 160px; height: 160px; font-size: 1.8rem; }
}
/* Container framework layout layer to manage background lines layer placement */
.counters-wrapper-relative {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 90px auto;
}

/* Absolute Vector Line Layout Configuration */
.connection-wave-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to bypass the line layer safely */
    z-index: 1;
}

/* Push counters forward on top of the vector connection wave line */
.counters-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2; /* Sits completely on top of our wave svg path */
    padding: 0 40px;
}

.counter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Counter Circle Item Modifiers */
.counter-circle {
    width: 170px;
    height: 170px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    background-color: var(--component-bg); /* Matches #1b1b1e to block out line behind it */
    margin-bottom: 20px;
}

/* Enhanced Center Yellow Accent Node matching screenshot profile */
.active-center .counter-circle {
    width: 230px;
    height: 230px;
    border: 3.5px solid var(--accent-color); /* Premium #fbbc05 Frame */
    box-shadow: 0 0 35px var(--accent-glow);
    font-size: 2.5rem;
}

.counter-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

/* Hide line element on smaller screen display sizes to avoid overlapping bugs */
@media(max-width: 992px) {
    .connection-wave-svg { display: none; }
    .counters-grid { flex-direction: column; gap: 60px; }
}
/* Process Workflow Styles */
.process-section {
    padding: 100px 0;
    background-color: #ffffff;
    position: relative;
}

.section-title-center {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ea580c; /* High contrast orange style matching your image */
    margin-bottom: 60px;
}

.process-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 50px;
}

.process-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.process-icon {
    font-size: 3.5rem;
    margin-bottom: 24px;
}

.process-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
    color: #0f172a;
}

.process-card p {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 30px;
    flex-grow: 1;
}

/* Rounded step counter markers */
.step-number {
    width: 44px;
    height: 44px;
    border: 2px solid #ea580c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ea580c;
    font-weight: 700;
    font-size: 0.95rem;
    background-color: #ffffff;
}

.button-spacer {
    margin-top: 40px;
}

.btn-orange {
    background: #ea580c !important;
}

.btn-orange:hover {
    background: #c2410c !important;
}

/* NDA Section Banner Layout */
.nda-section {
    background-color: #f1f5f9;
    padding: 80px 0;
    border-top: 1px solid #e2e8f0;
}

.text-left-container {
    max-width: 900px;
    margin: 0 left;
}

.nda-section h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: #ea580c;
    margin-bottom: 20px;
}

.nda-section p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
}

/* Responsive Grid Adjustments */
@media (max-width: 968px) {
    .process-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
/* ========================================== */
/* PROCESS WORKFLOW STEPS GRID COMPONENT      */
/* ========================================== */
.process-wrapper {
    max-width: 1200px;
    margin: 80px auto 40px auto;
    text-align: center;
}

.process-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin: 50px 0;
}

.process-node-card {
    flex: 1;
    background-color: #ffffff; /* Contrast white surfaces resting on cement gray */
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* Clean modern platform shadow */
    transition: transform 0.2s ease;
}

.process-node-card:hover {
    transform: translateY(-4px);
}

.process-visual-icon {
    font-size: 3.2rem;
    margin-bottom: 20px;
}

.process-node-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 18px;
    color: var(--light-text-main);
}

.process-node-card p {
    font-size: 0.95rem;
    color: var(--light-text-sub);
    line-height: 1.6;
    margin-bottom: 35px;
    flex-grow: 1;
}

/* Number Tracker Elements using your token variable properties */
.process-step-circle {
    width: 46px;
    height: 46px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-weight: 800;
    font-size: 1rem;
    background-color: #ffffff;
    box-shadow: 0 4px 10px var(--accent-glow);
}

.process-cta-center {
    margin-top: 20px;
}

/* ========================================== */
/* NDA TRUST STATEMENT SECTION                */
/* ========================================== */
.nda-banner-wrapper {
    max-width: 1200px;
    margin: 90px auto 20px auto;
    padding-top: 60px;
    border-top: 1px solid var(--border-color);
}

.text-left-align {
    text-align: left !important;
    font-size: 2.4rem;
    margin-bottom: 20px;
}

.nda-body-text {
    font-size: 1.1rem;
    color: var(--light-text-sub);
    line-height: 1.7;
    max-width: 950px;
}

/* ========================================== */
/* MEDIA QUERY STRUCTURAL BREAKPOINTS         */
/* ========================================== */
@media (max-width: 968px) {
    .process-grid {
        flex-direction: column;
        gap: 40px;
    }
    .text-left-align {
        text-align: center !important;
    }
}
/* ========================================== */
/* THREE-COLUMN DARK MARKETING SITE FOOTER     */
/* ========================================== */
.site-footer {
    background-color: var(--component-bg); /* Reuses your deep charcoal black token */
    color: #dddddd;
    padding: 80px 24px 30px 24px;
    font-size: 0.95rem;
    line-height: 1.6;
    border-top: 1px solid #2d2d30;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.footer-column {
    flex: 1;
}

.brand-column {
    flex: 1.8; /* Gives the detailed Vision section extra visual horizontal room */
}

.brand-column p {
    margin-bottom: 18px;
    color: #b5b6bc; /* Balanced readable grey accent text */
}

.footer-title {
    color: var(--accent-color); /* Automatically pulls your signature yellow token tint */
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 25px;
}

/* Quick Links Vertical Map Alignment */
.footer-links-list {
    list-style: none;
    padding: 0;
}

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

.footer-links-list a {
    color: #dddddd;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links-list a:hover {
    color: var(--accent-color);
}

/* Local Address Formatting Grid */
.footer-address {
    font-style: normal;
    color: #b5b6bc;
    margin-bottom: 25px;
}

.footer-address p {
    margin-bottom: 4px;
}

.address-bold {
    font-weight: bold;
    color: #ffffff;
}

.footer-email {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}

.footer-email:hover {
    text-decoration: underline;
}

/* Circular Social Target Network Chains */
.footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    border: 1px solid #44464c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

.footer-socials a:hover {
    border-color: var(--accent-color);
    background-color: var(--accent-glow);
    transform: translateY(-2px);
}

/* Horizontal Divider Border Base */
.footer-copyright-bar {
    max-width: 1200px;
    margin: 60px auto 0 auto;
    padding-top: 25px;
    border-top: 1px solid #2d2d30;
    font-size: 0.85rem;
    color: #888888;
}

.brand-highlight {
    color: var(--accent-color);
    font-weight: 600;
}

/* Mobile Component Responsive Flex Breakpoints */
@media (max-width: 968px) {
    .footer-container {
        flex-direction: column;
        gap: 40px;
    }
    .footer-column {
        text-align: center;
    }
    .footer-socials {
        justify-content: center;
    }
}
/* ========================================== */
/* HARDWARE ACCELERATED SCROLL ANIMATIONS     */
/* ========================================== */

/* The initial hidden frame configuration state */
.reveal-hidden {
    opacity: 0 !important;
    transform: translateY(40px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Active visible structural class applied dynamically via Javascript */
.reveal-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Staggered sequential delay patterns for side-by-side card grid layouts */
.process-node-card:nth-child(1), .pillar-node:nth-child(1) { transition-delay: 0.05s; }
.process-node-card:nth-child(2), .pillar-node:nth-child(2) { transition-delay: 0.18s; }
.process-node-card:nth-child(3), .pillar-node:nth-child(3) { transition-delay: 0.32s; }

/* ========================================== */
/* PREMIUM MICROMOTION HOVER ANIMATIONS       */
/* ========================================== */

/* Cards lift micro-movement response on mouse interactions */
.process-node-card, .pillar-node {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-node-card:hover, .pillar-node:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Pop interaction for circular process numbers */
.process-node-card:hover .process-step-circle {
    transform: scale(1.15);
    background-color: var(--accent-color);
    color: var(--component-bg);
    transition: all 0.3s ease;
}

/* Subtle cross-fade wrapper flash adjustment during slide modifications */
.comparison-display {
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.slider-fade-out {
    opacity: 0;
    transform: scale(0.99);
}
/* ========================================== */
/* CONTINUOUS LOOPING BUTTON PULSE KEYFRAMES  */
/* ========================================== */

/* Declaring the looping animation parameters */
@keyframes ctaPulseGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px var(--accent-glow);
    }
    50% {
        transform: scale(1.04);
        /* Expands your signature yellow accent glow outwards */
        box-shadow: 0 8px 25px rgba(251, 188, 5, 0.45);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px var(--accent-glow);
    }
}

/* Attaching the animation to a global modifier class */
.pulse-cta-glow {
    animation: ctaPulseGlow 2s infinite ease-in-out;
    will-change: transform, box-shadow;
}

/* Pause the intense pulsing instantly if the user hovers over it */
.pulse-cta-glow:hover {
    animation-play-state: paused;
    transform: scale(1.08) !important;
    background-color: var(--accent-hover) !important;
}
/* ========================================== */
/* MULTI-DIRECTIONAL MOVING SCROLL ANIMATIONS */
/* ========================================== */

/* Base configuration setup for any moving element */
.move-hidden {
    opacity: 0 !important;
    will-change: transform, opacity;
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Slide In From Left */
.slide-from-left {
    transform: translateX(-80px);
}

/* 2. Slide In From Right */
.slide-from-right {
    transform: translateX(80px);
}

/* 3. Smooth Scale & Grow Upwards */
.scale-grow-up {
    transform: translateY(50px) scale(0.95);
}

/* Active Class dropped by JavaScript to sweep items to home position */
.move-visible {
    opacity: 1 !important;
    transform: translateX(0) translateY(0) scale(1) !important;
}

/* ========================================== */
/* INTERACTIVE MOUSE CLICK RIPPLE ENGINE      */
/* ========================================== */
@keyframes waterRippleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(8);
        opacity: 0;
    }
}

.water-ripple-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 3px solid rgba(56, 189, 248, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    animation: waterRippleExpand 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
/* ========================================== */
/* PIN AND SCRUB INTERACTIVE LAYOUT SYSTEM    */
/* ========================================== */
.pin-scaffold-wrapper {
    background-color: #0f172a; /* Premium dark theme container canvas */
    color: #ffffff;
    width: 100%;
    position: relative;
    z-index: 30;
}

/* Locks items fixed in viewport window while scrolling through buffer space */
.pin-sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    overflow: hidden;
}

.pin-content-panel {
    flex: 1;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pin-badge {
    color: var(--accent-color); /* Reuses your signature yellow token */
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.pin-heading {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.pin-description {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Mock IDE Code Window Formatting Box */
.mock-code-box {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 25px;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e2e8f0;
}
.code-keyword { color: #f43f5e; font-weight: bold; }
.code-number { color: #38bdf8; }
.code-string { color: #acc471; }

/* ========================================== */
/* SCRUBBING WINDMILL GEOMETRIC BLADES ARRAYS */
/* ========================================== */
.pin-visual-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

/* Container shape that JavaScript will physically rotate */
.scrub-windmill-element {
    position: relative;
    width: 260px;
    height: 260px;
    will-change: transform;
}

.windmill-blade {
    position: absolute;
    width: 110px;
    height: 110px;
    /* Soft capsule fluid organic leaf contours */
    border-radius: 80px 0 80px 80px;
}

/* Beautiful color gradient maps mirroring your GSAP sample asset */
.blade-top-left {
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    top: 15px; left: 15px;
    transform: rotate(0deg);
}
.blade-top-right {
    background: linear-gradient(135deg, #f43f5e, #be123c);
    top: 15px; right: 15px;
    transform: rotate(90deg);
}
.blade-bottom-left {
    background: linear-gradient(135deg, #a855f7, #f8d304);
    bottom: 15px; left: 15px;
    transform: rotate(-90deg);
}
.blade-bottom-right {
    background: linear-gradient(135deg, #c084fc, #e879f9);
    bottom: 15px; right: 15px;
    transform: rotate(180deg);
}

/* Provides structural vertical scroll clearance space for tracking scroll bars */
.scroll-buffer-space {
    height: 0vh; /* Adjust height scale to make scrolling through animation longer or shorter */
    background-color: #0f172a;
}
/* Ensure hidden media panels slide down out of view by default */
.tabs_video {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius--medium);
    position: absolute;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Brings the active media node smoothly up into center coordinate focus */
.tabs_video.is-1 {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Clean text transitions */
.tabs_let-content {
    width: 100%;
    height: 100%;
    text-align: center;
    flex-direction: column;
    justify-content: space-around;
    display: flex;
    position: absolute;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.tabs_let-content.is-1 {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
/* ========================================== */
/* PRICING MATRIX CORE CONTENT STYLES         */
/* ========================================== */
.pricing-matrix-section {
    background-color: var(--light-bg); /* Rests smoothly on your light cement floor */
    color: var(--light-text-main);
    padding: 100px 24px;
    width: 100%;
    position: relative;
    z-index: 25;
}

.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
}

.text-center-wrapper {
    text-align: center;
    margin-bottom: 60px;
}

.pricing-badge {
    color: var(--accent-color);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pricing-main-heading {
    font-size: 2.6rem;
    font-weight: 800;
    margin: 10px 0 15px 0;
    letter-spacing: -0.5px;
}

.pricing-lead-desc {
    color: var(--light-text-sub);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ========================================== */
/* INTERACTIVE BILLING FREQUENCY TOGGLE BLOCK */
/* ========================================== */
.billing-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 35px;
}

.toggle-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--light-text-sub);
    transition: color 0.2s ease;
}

.toggle-label.active-toggle {
    color: var(--light-text-main);
}

.discount-pill {
    background-color: var(--green);
    color: var(--gray-900);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 4px;
}

.toggle-switch-btn {
    width: 56px;
    height: 30px;
    background-color: var(--gray-300);
    border-radius: 20px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
}

/* Internal moving dot handle style */
.toggle-switch-handle {
    width: 22px;
    height: 22px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Activated state modifiers managed via JavaScript */
.billing-toggle-wrapper.yearly-active .toggle-switch-btn {
    background-color: var(--accent-color);
}

.billing-toggle-wrapper.yearly-active .toggle-switch-handle {
    transform: translateX(26px);
}



/* ========================================== */
/* INTEGRATED SCROLL-DRIVEN CONTAINER TIMELINE*/
/* ========================================== */
:root {
  --timeline-line-color: var(--gray-700, #424242);
}

.timeline-marketing-wrapper {
  background-color: var(--gray-900, #141414); /* Clean dark matching your theme */
  color: var(--white, white);
  padding: 100px 0;
  width: 100%;
}

.timeline-main-header {
  text-align: center;
  margin-bottom: 80px;
}

.timeline-main-header h1 {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 10px 0;
}

.timeline-badge {
  color: var(--green, #61ffc9);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.timeline-main-header p {
  color: var(--gray-400, #a3a3a3);
  font-size: 1.1rem;
}

.timeline {
  container: timeline-container / inline-size;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* Base Responsive Grid Matrix Layout */
.timeline-group {
  display: grid;
  gap: 1.5rem;
  grid-template-areas:
    "point date"
    "point event";
  margin-inline: 1.5rem;
  margin-bottom: 40px;
}

/* Container query triggers alternating layout over 80 characters wide screens */
@container timeline-container (min-width: 80ch) {
  .timeline-group {
    grid-template-areas: "date point event";
    grid-template-columns: 8fr 1.5fr 8fr;
    place-content: center;
    margin-bottom: 0;
  }

  .timeline-group:nth-child(even) {
    grid-template-areas: "event point date";
  }

  .timeline-group:nth-child(even) .timeline-date {
    --translation: -100px;
    justify-content: flex-start;
  }

  .timeline-group:nth-child(even) .timeline-event {
    --translation: -100px;
    margin-inline-start: auto;
  }
}

/* Event Milestone Card Block */
.timeline-event {
  --border-radius: var(--border-radius--medium, 1.25rem);
  --box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.25);
  --easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --range-start: contain 25%;
  --range-end: contain 45%;
  --translation: 100px;

  grid-area: event;
  background: var(--gray-800, #292929);
  border: 1px solid var(--gray-700, #424242);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 30px;
}

.phase-number-tag {
  font-size: 0.75rem;
  color: var(--green, #61ffc9);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.timeline-event h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #fbbc05;
  margin-bottom: 12px;
}

.timeline-event p {
  font-size: 0.95rem;
  color: var(--gray-400, #a3a3a3);
  line-height: 1.6;
}

@container timeline-container (min-width: 80ch) {
  .timeline-event {
    margin-block: 2.5rem;
    width: min(100% - 1rem, 32cqw);
    position: relative;
  }
}

/* Native CSS Scroll-Driven Animation Hooks */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view(block)) {
    .timeline-event {
      opacity: 0;
      animation: timelineSlideIn var(--easing) both;
      animation-timeline: view(block);
      animation-range: var(--range-start) var(--range-end);
      transform-origin: center center;
      transform: translateX(var(--translation));
    }
  }
}

/* Central Tracker Axis Line and Node Dots */
.timeline-point {
  display: grid;
  grid-area: point;
  place-content: center;
  position: relative;
  width: 100%;
}

.timeline-point span {
  --point-size: 20px;
  --point-color: var(--gray-900, #141414);
  --easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --range-start: contain 25%;
  --range-end: contain 45%;

  align-items: center;
  aspect-ratio: 1;
  height: var(--point-size);
  background: var(--point-color);
  border: 4px solid var(--green, #61ffc9);
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  z-index: 2;

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view(block)) {
      animation: timelineScaleUp var(--easing) both;
      animation-timeline: view(block);
      animation-range: var(--range-start) var(--range-end);
      transform-origin: center center;
    }
  }
}

.timeline-point::after {
  background: var(--timeline-line-color);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  left: calc(50% - (2px / 2));
  margin-inline: auto;
  width: 2px;
  top: 0;
  z-index: 1;
}

/* Chronological Milestone Dates */
.timeline-date {
  --range-start: contain 25%;
  --range-end: contain 45%;
  --translation: -40px;

  grid-area: date;
  color: #fbbc05;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
}

@container timeline-container (min-width: 80ch) {
  .timeline-date {
    align-items: center;
    display: flex;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view(block)) {
    .timeline-date {
      animation: timelineFadeIn linear both;
      animation-timeline: view(block);
      animation-range: var(--range-start) var(--range-end);
      opacity: 0;
      transform: translateY(var(--translation));
    }
  }
}

/* ========================================== */
/* TIMELINE TRANSLATION ANIMATION MATRIX      */
/* ========================================== */
@keyframes timelineSlideIn { to { opacity: 1; transform: translateX(0); } }
@keyframes timelineScaleUp { 0% { transform: scale(0.4); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes timelineFadeIn { 70% { opacity: 0; } 100% { opacity: 1; transform: translateY(0); } }
/* ========================================== */
/* SINGLE PARALLAX WINDOW DISPLAY CARD        */
/* ========================================== */
.parallax-card-scaffold {
    background-color: var(--gray-900, #141414); /* Matches your deep dark canvas theme */
    padding: 80px 24px;
    width: 100%;
}

.parallax-card-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* The Framing Window Container Box */
.parallax-window-box {
    position: relative;
    width: 100%;
    height: 480px; /* Locked presentation landscape viewport height */
    border-radius: var(--border-radius--medium, 1.25rem);
    border: 1px solid var(--gray-700, #424242);
    overflow: hidden;
    margin-top: 25px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

/* The Pinned Image Layer that creates the 3D depth movement */
.parallax-fixed-backing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    
    /* Pins the graphic flat against the background landscape coordinate systems */
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Custom linear template mesh for your presentation slide sample */
.slide-bg-1 {
    background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 58, 138, 0.9)), 
                      url('https://unsplash.com');
}

/* Sliding Translucent Floating Text Wrapper */
.parallax-overlay-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end; /* Places text cleanly at the bottom edge */
    justify-content: flex-start;
    padding: 40px;
    z-index: 2; /* Rides completely over the pinned image layer */
}

/* Premium blurred glass container board */
.glass-text-node {
    background: rgba(41, 41, 41, 0.65); /* Reuses your --gray-800 tone with opacity */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius--medium, 1.25rem);
    padding: 35px;
    max-width: 550px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    
    /* Hardware accelerated entry micro-motion curves */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Interactive lift effect when hovering over the card */
.parallax-window-box:hover .glass-text-node {
    transform: translateY(-5px);
    border-color: var(--green, #61ffc9);
}

.glass-text-node h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.glass-text-node p {
    font-size: 0.95rem;
    color: var(--gray-400, #a3a3a3);
    line-height: 1.6;
    margin: 0;
}

/* Mobile responsive layout optimizations */
@media (max-width: 768px) {
    .parallax-window-box { height: 400px; }
    .parallax-overlay-content { padding: 20px; }
    .glass-text-node { padding: 25px; }
    .glass-text-node h2 { font-size: 1.5rem; }
    /* Mobile browsers can lag with fixed backgrounds, so fall back to scrolling */
    .parallax-fixed-backing { background-attachment: scroll; } 
}

.help-modal {
  position: fixed;
  top: 0;
  z-index: 4000;
  top: calc(var(--vh, 1vh) * 110);
  width: 100vw;
  opacity: 0;
  pointer-events: none;
}

.help-modal.is-active {
  opacity: 1;
  pointer-events: all;
}

.help-modal.is-active .help-modal__close {
  pointer-events: all;
  -webkit-transform: translateY(calc(var(--vh, 1vh) * -110));
  transform: translateY(calc(var(--vh, 1vh) * -110));
}

.help-modal.is-active .help-modal__close:hover {
  -webkit-transform: translateY(calc(var(--vh, 1vh) * -110)) rotate(180deg);
  transform: translateY(calc(var(--vh, 1vh) * -110)) rotate(180deg);
}

.help-modal__close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #1b1c1e;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
  transition:
    transform 0.4s ease-out,
    -webkit-transform 0.4s ease-out;
  z-index: 4000;
  cursor: pointer;
  pointer-events: none;
}
/* ==========================================
   ISOLATED BLACK & YELLOW THEME FOOTER FIXES
   ========================================== */

.site-footer {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  background-color: #0a0a0a !important; /* Premium Dark Background */
}

/* Force email to center block positioning */
.site-footer .form__email {
  display: inline-block !important;
  text-align: center !important;
  color: #ffffff !important; /* Clean White Text */
  width: auto !important;
  height: auto !important;
}

/* Horizontal social tracking bar styling */
.site-footer .form__socials {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: auto !important;
  height: auto !important;
}

.site-footer .form__social-link {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
}

/* Force social buttons to turn vibrant yellow with black text */
.site-footer .form__social,
.site-footer .button.magnetic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  padding: 12px 20px !important;
  background-color: #fbbc05 !important; /* Theme Yellow */
  color: #000000 !important;             /* Crisp Black Text */
  font-weight: bold !important;
  border-radius: 12px !important;
}

/* White contrast theme for the View Portfolio CTA button */
.site-footer a[href="..."] .button.magnetic {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-radius: 25px !important;
}
@media (max-width: 575px) {
    /* Targets code containers/mock presentation layouts */
    .pillars-grid-layout > div,
    .nda-banner-wrapper,
    pre, code {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 12px !important; /* Scale text down so lines don't break clipping layouts */
        padding: 15px !important;
    }
}
@media (max-width: 575px) {
    .pillars-grid-layout h2,
    .pillars-grid-layout h3,
    div.pillars-grid-layout + h2 {
        font-size: clamp(20px, 6vw, 28px) !important;
        text-align: center !important;
        margin-top: 25px !important;
    }
}
/* Responsive fixes for your timeline system */
@media (max-width: 991px) {
    /* 1. Simplify or fix the grid layout ratios */
    .timeline-group {
        grid-template-columns: 1fr !important; /* Switch to 1 clean fluid column layout */
        grid-template-areas: 
            "date"
            "point"
            "event" !important; /* Stack elements neatly underneath one another */
        gap: 15px !important;
        padding: 20px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Fix the central container container limits */
    .timeline-container, 
    article.timeline {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* 3. Center align internal timeline node elements */
    .timeline-group > div {
        text-align: center !important;
        justify-self: center !important;
        width: 100% !important;
    }
}
/* Custom Tablet Optimization (Screens between 576px and 991px wide) */
@media (min-width: 576px) and (max-width: 991px) {
    /* 1. Force the container to display side-by-side horizontally */
    .comparison-display {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* 2. Scale down the side panels to fit 50/50 within the view screen */
    .side-panel {
        flex: 1 !important;
        width: 50% !important;
    }

    /* 3. Keep the inner content cards compact and bounded */
    .panel-card {
        min-height: 240px !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* 4. Adjust the navigation arrow placements so they don't block cards */
    .arrow-btn {
        font-size: 24px !important;
        padding: 5px !important;
        z-index: 10;
    }
}
/* Responsive layout stabilization for the timeline section */
@media (max-width: 991px) {
    /* 1. Clear excessive vertical space from the main block wrapper */
    section.timeline-marketing-wrapper {
        height: auto !important;
        min-height: auto !important;
        padding: 50px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* 2. Fix the interior timeline container layout alignment */
    .timeline-marketing-wrapper .timeline-container,
    .timeline-marketing-wrapper article {
        height: auto !important;
        margin-top: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* 3. Realign the isolated milestone dots and day indicators */
    .timeline-marketing-wrapper .timeline-group,
    .timeline-marketing-wrapper [class*="Day"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
}
/* Precise layout stabilization for small mobile screens (320px - 480px) */
@media (max-width: 575px) {
    /* 1. Fully release the viewport lock and allow natural content streaming */
    div.pin-sticky-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        height: auto !important; /* Unlocks the 100vh compression */
        min-height: 100vh !important;
        padding: 40px 15px !important;
        overflow: visible !important; /* Prevents text clipping on boundaries */
    }

    /* 2. Fluid text formatting to make long words break or scale gracefully */
    .pin-sticky-container h1,
    .pin-sticky-container h2,
    .pin-sticky-container .main-heading {
        font-size: clamp(20px, 7vw, 26px) !important; /* Scaled down for 320px viewports */
        line-height: 1.2 !important;
        white-space: normal !important; /* Forces words to wrap onto new lines */
        word-break: break-word !important; /* Safely breaks massive words */
        text-align: center !important;
        width: 100% !important;
    }

    /* 3. Scale down paragraph text boundaries */
    .pin-sticky-container p,
    .pin-sticky-container .sub-heading {
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    /* 4. Ensure the underlying dark GSAP block stays bounded */
    .pin-sticky-container #slide-overhaul,
    .pin-sticky-container .code-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================
   RESPONSIVE MOBILE & TABLET MEDIA QUERY BREAKPOINT (≤ 992px)
   ========================================================== */
@media screen and (max-width: 992px) {
  
  /* 1. HEADER CORRECTIONS */
  .site-header {
    display: flex !important;
    flex-direction: column !important; /* Stack elements symmetrically */
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: auto !important;
    padding: 20px 15px !important;
    gap: 15px !important;
  }

  /* Force header internal containers to ignore global width/height 100% */
  .site-header .logo,
  .site-header .nav-links,
  .site-header .btn-order,
  .site-header a,
  .site-header span {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }

  .site-header .nav-links {
    display: flex !important;
    flex-direction: row !important; /* Keep menu inline horizontally */
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
  }

  .site-header .btn-order {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    border-radius: 20px !important;
  }

  /* 2. FOOTER CORRECTIONS */
  .site-footer,
  .site-footer .form__container,
  .site-footer .form {
    height: auto !important;
    min-height: auto !important;
    padding: 30px 15px !important;
  }

  /* Shrink text inputs wrapper layout box */
  .site-footer form,
  .site-footer .form__inputs,
  .site-footer div[style*="background-color: #171717"] {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Force social grid to display inside clean 2-column cells */
  .site-footer .form__socials {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
  }

  .site-footer .form__social-link,
  .site-footer .form__social {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Reset input dimensions */
  .site-footer .form__input-inner,
  .site-footer select#form {
    width: 100% !important;
    height: 50px !important;
    box-sizing: border-box !important;
  }
}
/* ==========================================================
   FIXES HEADER OVERLAP AND FOOTER BUTTONS ON MOBILE/TABLET
   ========================================================== */
@media screen and (max-width: 992px) {
  
  /* 1. HEADER RECOVERY */
  .site-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: auto !important;
    padding: 20px 10px !important;
    gap: 15px !important;
  }

  /* Stops nav links and logos from ballooning full-screen on mobile */
  .site-header .logo,
  .site-header .nav-links,
  .site-header .btn-order,
  .site-header a,
  .site-header span {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }

  .site-header .nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
  }

  /* 2. FOOTER INPUTS & BUTTON OVERLAP FIX */
  .site-footer,
  .site-footer .form__container,
  .site-footer .form {
    height: auto !important;
    min-height: auto !important;
    padding: 30px 10px !important;
  }

  /* Shrinks the forms parent wrapper so items stay neat */
  .site-footer form,
  .site-footer .form__inputs {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Resets individual text input dimensions */
  .site-footer .form__input-inner,
  .site-footer select#form {
    width: 100% !important;
    height: 50px !important;
    box-sizing: border-box !important;
  }

  /* Fixes the "How may I help you?" text row and circular submit button */
  .site-footer .form__inputs div[style*="max-width: 1005px"] {
    display: flex !important;
    flex-direction: column !important; /* Stack field above yellow button */
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Keeps the yellow submit arrow button perfectly circular on small screens */
  .site-footer .form__submit.magnetic {
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  .site-footer .form__submit.magnetic svg {
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
  }
}
/* ==========================================================
   TABLET TYPOGRAPHY GRID ALIGNMENT FIX (≤ 992px)
   ========================================================== */
@media screen and (max-width: 992px) {

  /* 1. Restores the central layout container box alignment */
  .hero-center-content,
  .pin-content-panel,
  main,
  section {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    text-align: center !important; /* Force browser text tracking to absolute center */
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    transform: none !important; /* Breaks the 3D parallax clipping shift */
    perspective: none !important;
  }

  /* 2. Forces headings to fit cleanly inside the screen margins */
  h1, h2, .main-heading, .pin-heading {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    font-size: clamp(24px, 5vw, 36px) !important; /* Shrinks fluidly on tablets */
  }

  /* 3. Forces all description paragraphs to align and sit perfectly center */
  p, .sub-heading, .pin-description {
    display: block !important;
    width: 100% !important;
    max-width: 650px !important; /* Prevents long sentences from text-stretching */
    margin: 15px auto !important; /* Auto left/right margins instantly snap text to center */
    text-align: center !important;
    height: auto !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* 4. Keeps decorative phase indicators centered */
  .phase-number-tag,
  span[class*="phase"] {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 10px auto !important;
    text-align: center !important;
  }
}
/* ==========================================================
   MOBILE & TABLET HEADER LINKS COLLAPSE RECOVERY (≤ 992px)
   ========================================================== */
@media screen and (max-width: 992px) {

  /* 1. Forces the header container to stack items cleanly from top to bottom */
  .site-header {
    display: flex !important;
    flex-direction: column !important; /* Changes horizontal links to vertical blocks */
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: auto !important;
    padding: 20px 10px !important;
    gap: 15px !important;
  }

  /* 2. Overrides the * width/height 100% bug so text links regain normal sizing */
  .site-header .logo,
  .site-header .nav-links,
  .site-header .btn-order,
  .site-header a,
  .site-header span {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    position: relative !important;
    transform: none !important;
  }

  /* 3. Forces the menu links to line up side-by-side with breathing room */
  .site-header .nav-links {
    display: flex !important;
    flex-direction: row !important; /* Keeps links horizontal */
    flex-wrap: wrap !important;     /* Allows wrapping if screen gets extra narrow */
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;           /* Space between links */
  }

  /* 4. Keeps individual menu links clean and separated */
  .site-header .nav-links a {
    font-size: 14px !important;
    padding: 4px 8px !important;
    text-decoration: none !important;
  }

  /* 5. Fixes the "Back to Map" button dimensions */
  .site-header .btn-order {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    border-radius: 20px !important;
    margin-top: 5px !important;
  }
}
/* ==========================================================
   MOBILE BOUNDARY CROP PREVENTION & FLUID SCALING (≤ 992px)
   ========================================================== */
@media screen and (max-width: 992px) {

  /* 1. Reset parent padding so content has room on narrow screens */
  .site-header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 5px !important; /* Reduces side padding to maximize text space */
    box-sizing: border-box !important;
  }

  /* 2. Overrides width constraints that were forcing text off-screen */
  .site-header .nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(4px, 1.5vw, 10px) !important; /* Keeps spacing tight on small viewports */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* 3. Scales typography fluidly so words fit on a 320px - 425px layout width */
  .site-header .nav-links a {
    font-size: clamp(10px, 3.1vw, 13px) !important; /* Automatically downsizes text on mobile */
    padding: 4px 3px !important; /* Tightens tap targets to keep menu in one row */
    white-space: nowrap !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
  }
}
/* ==========================================================================
   THE ULTIMATE MASTER RESPONSIVE RECOVERY ENGINE (FOR ALL VIEWPORTS ≤ 992px)
   ========================================================================== */
@media screen and (max-width: 992px) {

  /* 1. MASTER WILDCARD OVERRIDE: Destroys global 100% height pollution everywhere */
  body, main, section, div, form, article, footer, header, nav {
    position: relative !important;   /* Disables all overlapping absolute float bugs */
    height: auto !important;         /* Forces containers to wrap strictly around content text */
    min-height: auto !important;
    max-height: none !important;
    top: auto !important;            /* Stops lower page buttons from flying up to the header */
    left: auto !important;
    transform: none !important;      /* Strips out toxic 3D perspective layout shifts */
    perspective: none !important;
    box-sizing: border-box !important;
  }

  /* 2. RESPONSIVE SITE HEADER FIX (Single-Line Links Alignment) */
  .site-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 5px !important;    /* Minimizes side margins to create maximum link width */
    gap: 12px !important;
    background-color: #0a0a0a !important;
    border-bottom: 1px solid #1c1d21 !important;
  }

  /* Shrinks structural navbar elements down from full-screen limits */
  .site-header .logo,
  .site-header .nav-links,
  .site-header .btn-order,
  .site-header a,
  .site-header span {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }

  /* Forces all 5 menu options to stay strictly on one clean row */
  .site-header .nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;     /* STOPS text from splitting onto a second line */
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(4px, 1.5vw, 10px) !important; /* Tightens gaps dynamically on tiny screens */
    width: 100% !important;
  }

  /* Seamless fluid font downscaling for smaller devices */
  .site-header .nav-links a {
    font-size: clamp(10px, 3.1vw, 13px) !important;
    padding: 4px 3px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  /* 3. GLOBAL TYPOGRAPHY CENTER ALIGNMENT */
  h1, h2, h3, h4, h5, .main-heading, .section-title, .pin-heading {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    text-align: center !important;   /* Snaps headers straight to the absolute center */
    margin: 15px auto !important;
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  p, .sub-heading, .section-desc, .pin-description {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;     /* Keeps lines balanced and prevents paragraph breaking */
    margin: 10px auto !important;
    text-align: center !important;   /* Force center text tracking alignment */
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #a3a3a3 !important;
  }

  /* 4. RESPONSIVE SITE FOOTER & GRID CLEANUP */
  .site-footer {
    background-color: #0a0a0a !important;
    padding: 40px 15px !important;
  }

  /* Stacks input blocks symmetrically on mobile views */
  .site-footer form,
  .site-footer .form__inputs,
  .site-footer div[style*="max-width: 1005px"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    gap: 12px !important;
  }

  .site-footer .form__input-inner,
  .site-footer select#form {
    width: 100% !important;
    height: 48px !important;
    text-align: center !important;
  }

  /* Centers the yellow circular submit button */
  .site-footer .form__submit.magnetic {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Converts the horizontal social buttons into a clean 2x2 grid cell block */
  .site-footer .form__socials {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
  }

  .site-footer .form__social-link,
  .site-footer .form__social {
    width: 100% !important;
  }

  /* 5. RESPONSIVE IMMUNIZED GRID CARD ROW RECOVERY */
  .process-grid, .pillars-grid-layout, .portfolio-grid {
    display: flex !important;
    flex-direction: column !important; /* Safely stacks cards vertically on mobile */
    align-items: center !important;
    gap: 25px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 30px auto !important;
  }

  .process-node-card, .pillar-node, .stat-box {
    width: 100% !important;
    max-width: 360px !important;     /* Restores standard structural panel width metrics */
    margin: 0 auto !important;
  }
}
/* ==========================================================
   RESTORES STICKY STACK LAYOUT EFFECT AND SPACE-Y MATH
   ========================================================== */

/* Fixes the main slide wrapper so the space-y-6 math works perfectly */
.space-y-6 {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
}

/* Immunizes each sticky slide container from collapsing or expanding */
.space-y-6 > .sticky {
  position: sticky !important;
  height: 60vh !important;       /* Forces a clean, standard card window height */
  min-height: 60vh !important;
  margin-bottom: 40px !important; /* Forces physical separation gap between cards */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Explicitly sets separate stacking depths so cards slide over one another */
.space-y-6 > :nth-child(1) { top: 20px !important; z-index: 10 !important; }
.space-y-6 > :nth-child(2) { top: 40px !important; z-index: 20 !important; }
.space-y-6 > :nth-child(3) { top: 60px !important; z-index: 30 !important; }
.space-y-6 > :nth-child(4) { top: 80px !important; z-index: 40 !important; }

/* 1. Main Header Layout Box Setup */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 100;
    padding: 0 4rem;
    
    /* Horizontal Flex row arrangement */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent; /* Keep your beautiful dark page backdrop gradient showing */
}

/* 2. Brand Identity Styling */
.site-header .logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #ffffff; /* Crisp white title font */
}

.site-header .logo-accent {
    color: #fbbc05; /* Bright theme yellow punctuation highlight */
}

/* 3. Outer Menu Block Container Track */
.header__menu-block {
    display: flex;
    align-items: center;
    gap: 2.5rem; /* Large breathing space gap separating menu row from your button */
}

/* 4. Horizontal Navigation Link Row Structure */
.header__menu {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Horizontal spacing tracking between each separate nav item link */
}

/* Menu Text Typography Elements */
.header__menu-item {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85); /* Slightly translucent white for a premium layout style */
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

/* Hover Accent Transition */
.header__menu-item:hover {
    color: #fbbc05; /* Animates to theme yellow on cursor point track */
}

/* 5. Custom Button Layout Reset Overrides */
.header__menu--help {
    background-color: #fbbc05;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    padding: 0.7rem 1.4rem;
    border-radius: 9999px; /* Pill profile matching your theme button styling */
    transition: transform 0.2s ease;
}

.header__menu--help:hover {
    transform: scale(1.05);
}
/* Ensure the mockup frame masks out the overlapping sliding images cleanly */
.presentation-mockup-frame {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 10;
    background-color: #121212;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7);
    
    /* Crops your slide elements automatically when moving off-screen */
    overflow: hidden; 
}

/* Horizontal track container containing all your images side-by-side */
.carousel-slide-track {
    display: flex;
    width: 200%; /* Spans out to comfortably double width to fit images + duplicates */
    height: 100%;
    
    /* Triggers the loop animation. Changes speed via the seconds value (e.g., 12s) */
    animation: infiniteSlideMove 12s linear infinite;
}

/* Freezes slider movement automatically when user cursor hovers over the deck */
.carousel-slide-track:hover {
    animation-play-state: paused;
}

/* Forces individual slide frames to layout uniformly inside the sliding strip track */
.carousel-slide-track .slide-mockup-image {
    width: 16.666%; /* Fits 6 elements perfectly inside your double-width (200%) runway */
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

/* The Core Scrolling Engine Animation Profile */
@keyframes infiniteSlideMove {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translates exactly halfway down the track to link seamlessly back to the first slide */
        transform: translateX(-50%);
    }
}
/* ==================================================== */
/* CORE SPLIT SCREEN HERO & RESPONSIVE SLIDE ENGINE      */
/* ==================================================== */

/* 1. Main Hero Framework Wrapper */
.hero-wrapper-split {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 120px 4rem 6rem 4rem !important; /* Top clearance handles nav track; bottom protects lower pillars */
    background-color: #050505 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    gap: 4rem !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Switches cleanly to an asymmetric side-by-side row split on laptop/desktop views */
@media (min-width: 1024px) {
    .hero-wrapper-split {
        grid-template-columns: 1.1fr 0.9fr !important;
    }
}

/* 2. Left Column Layout (Typography Blocks) */
.hero-left-content {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    position: relative !important;
    z-index: 10 !important;
}

.main-heading-split {
    font-size: 56px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 1.5rem 0 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

.sub-heading-accent {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #fbbc05 !important; /* Highlights your yellow theme statement focus line */
    line-height: 1.4 !important;
    margin: 0 0 1.5rem 0 !important;
    max-width: 580px !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

.paragraph-lead {
    font-size: 15px !important;
    color: #a3a3a3 !important;
    line-height: 1.6 !important;
    margin: 0 0 2.5rem 0 !important;
    max-width: 500px !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

/* 3. Right Column Layout (Carousel Viewport Window Box) */
.hero-right-display {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}

.presentation-mockup-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 480px !important; /* Locks optimal reading scale footprint boundaries */
    aspect-ratio: 16 / 9 !important; /* Strict PowerPoint widescreen proportions */
    background-color: #121212 !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7) !important;
    
    /* Safely clips the slides when traveling past the boundaries */
    overflow: hidden !important; 
}

/* 4. Horizontal Moving Slide Runway Ticker Track */
.carousel-slide-track {
    display: flex !important;
    flex-direction: row !important;
    height: 100% !important;
    width: 200% !important; /* Double horizontal width handles original slides + duplicates */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Triggers the continuous fluid sliding ticker. Alter 14s to adjust pacing speed */
    animation: endlessSlideTickerLoop 14s linear infinite !important;
}

/* Pauses ticker rotation instantly when a user rests their mouse cursor over a layout element */
.carousel-slide-track:hover {
    animation-play-state: paused !important;
}

/* 5. Individual Slide Image Formatting Parameters */
.carousel-slide-track .slide-mockup-image {
    width: 16.666% !important; /* Math allocation: 100% area / 6 image tags = exactly 16.666% width */
    height: 100% !important;
    
    /* CROP FIX: Shows every slide fully complete without trimming text borders */
    object-fit: contain !important; 
    background-color: #121212 !important; /* Pads edge gaps if canvas specs deviate slightly */
    
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 6. Hardware-Accelerated Continuous Carousel Loop Translation */
@keyframes endlessSlideTickerLoop {
    0% {
        transform: translateX(0) !important;
    }
    100% {
        /* Snaps flawless loop precisely halfway across tracking rows */
        transform: translateX(-50%) !important;
    }
}
/* Ensure the mockup frame masks out the overlapping sliding images cleanly */
.presentation-mockup-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 480px !important;
    aspect-ratio: 16 / 9 !important; /* Fixed to standard 16:9 widescreen layout dimensions */
    background-color: #121212 !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7) !important;
    
    /* Crops your slide elements automatically when moving off-screen */
    overflow: hidden !important; 
}

/* Horizontal track container containing all your images side-by-side */
.carousel-slide-track {
    display: flex !important;
    width: 200% !important; /* Spans out to comfortably double width to fit images + duplicates */
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Triggers the loop animation. Changes speed via the seconds value (e.g., 12s) */
    animation: infiniteSlideMove 12s linear infinite !important;
}

/* Freezes slider movement automatically when user cursor hovers over the deck */
.carousel-slide-track:hover {
    animation-play-state: paused !important;
}

/* Forces individual slide frames to layout uniformly inside the sliding strip track */
.carousel-slide-track .slide-mockup-image {
    /* FIXED SIZE: Expanded to 33.333% so each slide takes up the full width of the mockup window */
    width: 33.333% !important; 
    height: 100% !important;
    
    /* FIXED CROP: Shows the complete slide template cleanly without cutting text or borders */
    object-fit: contain !important; 
    background-color: #121212 !important; /* Pads edges if slide canvas specs differ slightly */
    
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* The Core Scrolling Engine Animation Profile */
@keyframes infiniteSlideMove {
    0% {
        transform: translateX(0) !important;
    }
    100% {
        /* Translates exactly halfway down the track to link seamlessly back to the first slide */
        transform: translateX(-50%) !important;
    }
}
/* Ensure the mockup frame masks out the overlapping sliding images cleanly */
.presentation-mockup-frame {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 10;
    background-color: #121212;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7);
    
    /* Crops your slide elements automatically when moving off-screen */
    overflow: hidden; 

    /* NEW: Smooth timing transition rule for interactive hover states */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

/* NEW: Interactive feedback when a user hovers anywhere over the mockup frame */
.presentation-mockup-frame:hover {
    transform: translateY(-4px); /* Physically lifts the card off the canvas */
    box-shadow: 0 50px 100px -20px rgba(251, 188, 5, 0.1); /* Adds a soft golden glow highlight shadow */
    cursor: pointer; /* Changes mouse cursor to a pointing hand indicator */
}

/* Horizontal track container containing all your images side-by-side */
.carousel-slide-track {
    display: flex;
    width: 200%; /* Spans out to comfortably double width to fit images + duplicates */
    height: 100%;
    
    /* Triggers the loop animation. Changes speed via the seconds value (e.g., 12s) */
    animation: infiniteSlideMove 12s linear infinite;
}

/* Freezes slider movement automatically when user cursor hovers over the deck */
.carousel-slide-track:hover {
    animation-play-state: paused;
}

/* Forces individual slide frames to layout uniformly inside the sliding strip track */
.carousel-slide-track .slide-mockup-image {
    width: 16.666%; /* Fits 6 elements perfectly inside your double-width (200%) runway */
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

/* The Core Scrolling Engine Animation Profile */
@keyframes infiniteSlideMove {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translates exactly halfway down the track to link seamlessly back to the first slide */
        transform: translateX(-50%);
    }
}
/* ==================================================== */
/* CASCADING HERO CONTENT ENTRANCE SCROLL ANIMATION    */
/* ==================================================== */

/* 1. Base Keyframe Definition for the Slide-Up Fade Entry */
@keyframes heroFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(25px); /* Starts slightly lower down the page axis */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Glides perfectly up to its resting spot */
    }
}

/* 2. Applying the Smooth Animation properties to your existing classes */
.main-heading-split {
    opacity: 0; /* Hidden initially so it can fade in cleanly */
    animation: heroFadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.1s; /* Enters first */
}

.sub-heading-accent {
    opacity: 0;
    animation: heroFadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.3s; /* Enters second */
}

.paragraph-lead {
    opacity: 0;
    animation: heroFadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.5s; /* Enters third */
}

.cta-action-row {
    opacity: 0;
    animation: heroFadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.7s; /* Enters last */
}

  /* ==================================================== */
/* PREMIUM ANIMATED KINETIC MESH HERO BACKGROUND       */
/* ==================================================== */

.hero-wrapper-split {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 120px 4rem 6rem 4rem !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    gap: 4rem !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    /* 1. Base Dark Theme Tint Layout */
    background-color: #030303 !important;

    /* 2. Layered Ambient Radial Spotlights (Uses your theme yellow at a very subtle 2% to 4% opacity) */
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(251, 188, 5, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(217, 119, 6, 0.03) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(15, 15, 15, 1) 0%, #030303 100%) !important;
    
    background-size: 200% 200% !important; /* Expands background canvas size so it has room to move */
    
    /* 3. Activates the slow, premium background breathing animation */
    animation: kineticMeshGlow 20s ease infinite !important;
    transform: translateZ(0); /* Forces GPU rendering for perfectly fluid transitions */
}

/* Switches cleanly to an asymmetric side-by-side row split on desktop monitors */
@media (min-width: 1024px) {
    .hero-wrapper-split {
        grid-template-columns: 1.1fr 0.9fr !important;
    }
}

/* 4. Core Background Gradient Movement Engine Keyframes */
@keyframes kineticMeshGlow {
    0% {
        background-position: 0% 50% !important;
    }
    50% {
        background-position: 100% 50% !important; /* Gently drifts the light sources across the screen */
    }
    100% {
        background-position: 0% 50% !important; /* Smoothly returns to start for an unnoticeable loop */
    }
}

/* Keep your main text and mockup containers perfectly isolated on top */
.hero-left-content,
.hero-right-display {
    position: relative !important;
    z-index: 10 !important;
}
/* ==================================================== */
/* INJECTING TRANSPARENT BACKGROUND GRAPHIC VIA CSS ONLY */
/* ==================================================== */

/* 1. Updating your main structural container settings */
.hero-wrapper-split {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 120px 4rem 6rem 4rem !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    gap: 4rem !important;
    box-sizing: border-box !important;
    
    /* CRITICAL POSITION ANCHORING FOR PSEUDO-ELEMENTS */
    position: relative !important;
    overflow: hidden !important;
    background-color: #050505 !important; /* The solid dark base backing layer */
}

/* Responsive grid rules for wide desktop viewports */
@media (min-width: 1024px) {
    .hero-wrapper-split {
        grid-template-columns: 1.1fr 0.9fr !important;
    }
}

/* 2. THE CSS-ONLY IMAGE INJECTION ENGINE */
/* This dynamically creates the background layer without needing any HTML changes */
/* ==================================================== */
/* MAXIMUM HIGH-VISIBILITY PHOTO BACKGROUND OVERRIDE    */
/* ==================================================== */

/* 1. Main Structural Section Container Framework */
.hero-wrapper-split {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 120px 4rem 6rem 4rem !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    gap: 4rem !important;
    box-sizing: border-box !important;
    
    position: relative !important;
    overflow: hidden !important;
    background-color: #030303 !important; /* Matte dark baseline backing floor */
}

@media (min-width: 1024px) {
    .hero-wrapper-split {
        grid-template-columns: 1.1fr 0.9fr !important;
    }
}

/* 2. THE BACKGROUND IMAGE LAYER: STEPPED UP VISIBILITY FILTER */
.hero-wrapper-split::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Loads your new presentation background photo asset */
    background-image: url('ppt_img/bg_ppt.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* MODIFIED FIXED OPTION: Boosted to 65% opacity for crisp background details */
    opacity: 0.65 !important; 
    
    z-index: 1 !important; /* Locks background textures beneath text layers */
    pointer-events: none !important;
}

/* 3. LIGHTER CONTRAST DEFENDER MASK: Protects text without washing out the image */
.hero-wrapper-split::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* MODIFIED: Softened dark fade values to let the left side of your image emerge fully */
    background: linear-gradient(to right, 
        rgba(3, 3, 3, 0.75) 0%, 
        rgba(3, 3, 3, 0.45) 45%, 
        rgba(3, 3, 3, 0.1) 100%) !important;
    
    z-index: 2 !important; /* Injected between your raw background photo and your texts */
    pointer-events: none !important;
}

/* 4. Foreground Content Enforcement (Ensures absolute top layering) */
.hero-left-content,
.hero-right-display {
    position: relative !important;
    z-index: 10 !important;
}

/* 3. Ensuring your existing foreground content blocks sit firmly over the image layer */
.hero-left-content,
.hero-right-display {
    position: relative !important;
    z-index: 10 !important; /* Forces your text grids and moving carousel on the absolute top z-layer */
}
/* ==================================================== */
/* HIGH-CONTRAST LIGHT FEATURE CARDS OVERRIDING CSS    */
/* ==================================================== */

/* Outer Flexible Grid Layout Runway Row Track (Kept same) */
.pillars-grid-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Individual Feature Core Card Layout Nodes - FLIPPED TO LIGHT MODE */
.pillar-node {
    flex: 1 1 300px !important;
    max-width: 360px !important;
    box-sizing: border-box !important;
    padding: 35px 30px !important;
    border-radius: 24px !important;
    
    /* MODIFIED: Crisp solid white backing makes your dark png files completely visible */
    background-color: #ffffff !important; 
    border: 2px solid #e5e7eb !important; /* Soft, light gray boundary border line */
    
    /* Handles smooth transition animations on cursor pointer movements */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Premium Card Move Interactions on Cursor Hover */
.pillar-node:hover {
    transform: translateY(-8px) !important; /* Elevates card cleanly off the floorboards */
    
    /* MODIFIED: Shifting hover boundaries and depth shadows to utilize your brand yellow */
    border-color: #fbbc05 !important; 
    box-shadow: 0 20px 40px -15px rgba(251, 188, 5, 0.25) !important; 
    cursor: pointer !important;
}

/* Responsive Image Containers */
.pillar-node .pillar-icon-box, 
.pillar-node div[style*="font-size: 2rem"] {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 20px !important;
}

.pillar-node img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Typography Parameters - RE-CONFIGURED FOR BLACK AND YELLOW CONTRAST */
.pillar-node h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    
    /* MODIFIED: Solid black headings for extreme contrast on white backing surfaces */
    color: #000000 !important; 
}

/* Highlight the secondary focus card title (Bespoke Design) in your signature yellow tone */
.pillar-node.scale-grow-up h3,
.pillar-node:nth-child(2) h3 {
    color: #fbbc05 !important; /* Kept in bright brand yellow to highlight your core service */
    -webkit-text-stroke: 0.5px #000000; /* Subtle boundary stroke keeps yellow readable on white */
}

.pillar-node p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    
    /* MODIFIED: Clean dark charcoal gray text keeps copy easy to read */
    color: #27272a !important; 
}
/* ==================================================== */
/* FIXED SECURE NON-DISCLOSURE AGREEMENT BANNER RULES   */
/* ==================================================== */

/* Target the layout box wrapper cleanly and forcefully */
.nda-banner-wrapper, 
div[style*="dashed"] {
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 60px auto 60px auto !important; /* Centers block with proper spacing clearance */
    padding: 40px 30px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
    
    /* MODIFIED: Crisp dark charcoal base layout container */
    background: #171717 !important; 
    
    /* MODIFIED: Legal shield dashed border styled in your theme yellow accent line */
    border: 1px dashed rgba(251, 188, 5, 0.4) !important; 
    
    /* Standard smooth interactivity curve transition profiles */
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Premium micro-interaction behavior when a user hovers over the legal block */
.nda-banner-wrapper:hover,
div[style*="dashed"]:hover {
    border-color: #fbbc05 !important; /* Illuminates the dashed border line track to solid bright yellow */
    box-shadow: 0 15px 30px -10px rgba(251, 188, 5, 0.1) !important; /* Subtle warm ambient background glow highlight */
    cursor: default !important;
}

/* Typography Parameters - RE-ARCHITECTED FOR BALANCED TEXT CONTRAST */
.nda-banner-wrapper h2,
div[style*="dashed"] h2 {
    margin: 0 0 14px 0 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    width: auto !important;
    height: auto !important;
    
    /* MODIFIED: Bright brand yellow heading title text */
    color: #fbbc05 !important; 
}

.nda-banner-wrapper p,
div[style*="dashed"] p {
    font-size: 15px !important;
    max-width: 850px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    width: auto !important;
    height: auto !important;
    
    /* MODIFIED: Crisp light ash gray text keeps information incredibly readable on dark card fields */
    color: #e5e7eb !important; 
}
/* ==================================================== */
/* HIGH-END ASYMMETRIC BEFORE / AFTER CAROUSEL LAYOUT   */
/* ==================================================== */

/* 1. Main Slider Container Alignment (Ensures proper centering breathing space) */
.what-we-do-slider-wrapper,
div:has(> .presentation-mockup-frame) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
    max-width: 1100px !important;
    margin: 50px auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 2. THE "BEFORE" CARD STYLING (Subtle, Light Ash Draft Treatment) */
.before-card-class, 
div:has(> [class*="before"]),
main .hero-wrapper-split + div .grid > div:first-child {
    background-color: #f4f4f5 !important; /* Soft ash gray background */
    border: 1px solid #e4e4e7 !important;
    border-radius: 24px !important;
    padding: 40px 30px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03) !important;
    
    /* Slightly lower layer position to make the 'After' card dominant */
    position: relative !important;
    z-index: 5 !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 3. THE "AFTER" CARD STYLING (Premium Deep Charcoal & Neon Yellow Pop) */
.after-card-class,
div:has(> [class*="after"]),
main .hero-wrapper-split + div .grid > div:last-child {
    background-color: #121212 !important; /* Solid dark presentation canvas background */
    border: 1px solid rgba(251, 188, 5, 0.25) !important; /* Theme yellow accent border line */
    border-radius: 24px !important;
    padding: 40px 30px !important;
    
    /* ELEVATED DEPTH: Deep micro-glow shadow pushes it forward over the canvas */
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5), 0 15px 30px -10px rgba(251, 188, 5, 0.15) !important;
    
    /* Forces it to sit proudly in front of the layout stacking order */
    position: relative !important;
    z-index: 10 !important;
    
    /* Elegant 3D lift animation profile */
    transform: translateY(-6px) scale(1.02) !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
}

/* High-end hover interaction when mouse moves over the polished result card */
.after-card-class:hover,
div:has(> [class*="after"]):hover {
    transform: translateY(-12px) scale(1.04) !important; /* Lifts higher into active space */
    border-color: #fbbc05 !important; /* Illuminates border to solid bright brand yellow */
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6), 0 20px 40px -10px rgba(251, 188, 5, 0.3) !important;
}

/* 4. PREMIUM FROSTED SLIDER ARROW BUTTONS OVERRIDES */
.arrow-nav-btn,
main .hero-wrapper-split + div button:has(svg, span) {
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    
    /* Frosted glass theme buttons configuration */
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
    
    color: #000000 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.arrow-nav-btn:hover,
main .hero-wrapper-split + div button:has(svg, span):hover {
    background: #fbbc05 !important; /* Flips background instantly to your brand yellow */
    color: #000000 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 15px 30px rgba(251, 188, 5, 0.3) !important;
    cursor: pointer !important;
}
/* ==================================================== */
/* INTERACTIVE BEFORE/AFTER SLIDE WIPING ENGINE         */
/* ==================================================== */

/* 1. Micro-Floating Bounce Loop for the Status Tags (Before/After Badges) */
@keyframes tagFloatBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px); /* Gently bob up and down infinitely */
    }
}

/* Targeting the yellow and orange corner label badges */
.hero-wrapper-split + div span[style*="absolute"],
div:has(> [class*="before"]) > div:first-child,
div:has(> [class*="after"]) > div:first-child {
    animation: tagFloatBounce 3s ease-in-out infinite !important;
}

/* 2. Interactive Page Shifting for the Polished Inside Slide Document Card */
.hero-wrapper-split + div .grid > div:last-child img,
div:has(> [class*="after"]) img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease !important;
    transform: scale(1) rotate(0deg) !important;
    filter: brightness(0.95) !important;
}

/* When a user hovers anywhere over the dark 'After' card, the slide graphics respond interactively */
.hero-wrapper-split + div .grid > div:last-child:hover img,
div:has(> [class*="after"]):hover img {
    /* Slightly zooms and shears the slide layout to feel like an interactive 3D layout template */
    transform: scale(1.06) rotate(1deg) translateY(-2px) !important;
    filter: brightness(1.1) drop-shadow(0 15px 30px rgba(0,0,0,0.3)) !important;
}

/* 3. Smooth Kinetic Entry Wave for the Lower Typography Labels (Graphic Design Header) */
@keyframes subLabelEntrance {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-wrapper-split + div h2,
.hero-wrapper-split + div p {
    animation: subLabelEntrance 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
/* ==================================================== */
/* BRANDED METRICS & LOGO SPOTLIGHT ENGINE INTERACTION   */
/* ==================================================== */

/* 1. Base Container Setup (Ensures absolute placement coordinates work smoothly) */
.metrics-brand-section {
    position: relative !important;
    background-color: #0d0d0d !important; /* Locks background to match your sleek dark mode theme layout */
    padding: 6rem 2rem !important;
}

/* 2. CARD HOVER ELEVATION MECHANICS */
.counter-card {
    position: relative !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
}

/* Physically lifts any metric card box up off the background floor on hover contact */
.counter-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    cursor: pointer !important;
}

/* 3. THE CONTINUOUS ROTATING DIAL ENGINE (Targets your central Happy Clients node) */
@keyframes continuousOrbitSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Programmatically injects a glowing dashed radar ring directly over your active-center class */
.counter-card.active-center .counter-circle::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    
    /* Intentionally padded slightly wider than your 160px large circle footprint dimensions */
    width: 184px !important;
    height: 184px !important;
    
    border: 2px dashed #fbbc05 !important; /* Crisp theme yellow dashed tracking boundary ring */
    border-radius: 50% !important;
    z-index: 1 !important;
    
    /* Triggers hardware-accelerated continuous rotatory timeline tracking loop */
    animation: continuousOrbitSpin 20s linear infinite !important;
    pointer-events: none !important;
}

/* Adds an ambient golden text glow behind your central digits on hover contact */
.counter-card.active-center:hover .count-number,
.counter-card.active-center:hover .count-plus {
    text-shadow: 0 0 25px rgba(251, 188, 5, 0.6) !important;
    transition: text-shadow 0.3s ease !important;
}

/* 4. CLIENT BRAND LOGO TIMELINE SPOTLIGHTS */
.brand-item {
    opacity: 0.3 !important; /* Muted by default so they sit quietly beneath your main numbers */
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease !important;
}

/* High-contrast brand pop trigger when user points their cursor at a logo text item */
.brand-item:hover {
    opacity: 1 !important; /* Instantly snaps to full crisp visibility */
    transform: scale(1.08) translateY(-3px) !important; /* Gives a tiny spring lift response */
    cursor: pointer !important;
    
    /* Dynamically lights up the typography color according to your active client themes */
    color: #ffffff !important;
}

/* Target color adjustments for specific corporate text logo highlights on hover */
.brand-item.logo-affirm:hover { color: #4a4af4 !important; }
.brand-item.logo-jj:hover { color: #ff3b30 !important; }
.brand-item.logo-xalud:hover { color: #00c7ff !important; }
/* ==================================================== */
/* FIXED RELATIVE PATH PORTFOLIO CARD IMAGE REVEAL      */
/* ==================================================== */

/* 1. Main Outer 3D Card Box Frame Base Group */
#interactiveCardContainer {
    position: relative !important;
    background-color: #121214 !important; /* Premium charcoal dashboard slate backing */
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    min-height: 480px !important; /* Forces a solid layout frame height for viewing your slides */
    
    /* Activates deep physical layer spacing for your JS parallax engine */
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
}

#interactiveCardContainer:hover {
    border-color: rgba(251, 188, 5, 0.4) !important;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8), 0 20px 40px -15px rgba(251, 188, 5, 0.15) !important;
}

/* 2. THE BACKGROUND IMAGE LAYER (FIXED STEP-OUT DIRECTORY PATHS) */
.parallax-fixed-backing {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important; /* Securely anchors the portfolio image space to the right side */
    left: auto !important;
    width: 50% !important; /* Constrains the image layer to occupy exactly the empty right half */
    height: 100% !important;
    display: block !important; /* Forces container execution behavior */
    z-index: 1 !important;
    
    /* Sets up physical depth separation behind your text panel container layer */
    transform: translate3d(0, 0, -20px) scale(1.05) !important;
    
    /* FIXED PATH CHANGER: Added '../' to step out of your style sheet folder safely */
    background-image: url('../ppt_img/flower_section_ppt.jpg') !important;
    background-size: contain !important; /* Shows your complete slide template cleanly without stretching */
    background-position: right center !important;
    background-repeat: no-repeat !important;
    
    opacity: 0.75 !important; /* High contrast visibility so you can see all presentation details */
    transition: transform 0.1s ease-out, opacity 0.4s ease !important;
}

/* Forces any leftover raw HTML img tags inside this track to hide so they don't break layout metrics */
.parallax-fixed-backing img {
    display: none !important;
}

/* Brightens the slide presentation artwork completely when a user hovers over the card area */
#interactiveCardContainer:hover .parallax-fixed-backing {
    opacity: 0.95 !important;
}

/* 3. THE FOREGROUND GLASS COPY PANEL (The Yellow Border Card) */
.glass-text-node {
    position: absolute !important;
    bottom: 40px !important;
    left: 40px !important;
    z-index: 10 !important;
    max-width: 440px !important; /* Keeps paragraph columns crisp and clean */
    box-sizing: border-box !important;
    
    /* Pops the information box forward along the Z-axis toward the user's eye */
    transform: translate3d(0, 0, 40px) !important;
    transition: transform 0.1s ease-out, border-color 0.4s ease, background-color 0.4s ease !important;
    
    background-color: rgba(20, 20, 22, 0.85) !important; /* Frosted glass card opacity fill */
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(251, 188, 5, 0.35) !important; /* Fine brand yellow border trace line */
}

#interactiveCardContainer:hover .glass-text-node {
    border-color: #fbbc05 !important;
    background-color: rgba(20, 20, 22, 0.95) !important;
}
/* ==================================================== */
/* INFINITE AUTONOMOUS 3D FLOATING CASE STUDY CAROUSEL  */
/* ==================================================== */

/* 1. Applying the infinite 3D loop directly onto your main card frame */
#interactiveCardContainer {
    position: relative !important;
    background-color: #121214 !important; /* Premium dark charcoal dashboard slate backing */
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    min-height: 400px !important; /* Locks a robust baseline layout height block */
    
    /* Activates structural 3D camera depth space layers */
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
    
    /* TRIGGERS THE INFINITE TILT LOOP: Runs smoothly over a 10-second continuous wave */
    animation: continuousFloat3D 10s ease-in-out infinite !important;
    
    /* Ensures transitions back to base positions look perfectly fluid */
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Freezes the automatic 3D tilting timeline instantly when a user hovers to read text */
#interactiveCardContainer:hover {
    animation-play-state: paused !important;
    border-color: #fbbc05 !important; /* Highlights edge tracking to theme yellow */
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.85), 0 20px 40px -15px rgba(251, 188, 5, 0.2) !important;
    cursor: pointer !important;
}

/* 2. THE CORE INFINITE 3D FLOATING ENGINES KEYFRAMES */
@keyframes continuousFloat3D {
    0% {
        transform: rotateX(0deg) rotateY(0deg) translateY(0px) !important;
    }
    25% {
        /* Tilts subtly down and to the left while lifting slightly higher */
        transform: rotateX(-3deg) rotateY(4deg) translateY(-6px) !important;
    }
    50% {
        /* Gently swings over to the opposite upper quadrant angle */
        transform: rotateX(3deg) rotateY(-4deg) translateY(-12px) !important;
        box-shadow: 0 35px 70px -10px rgba(0, 0, 0, 0.7) !important; /* Shadow expands as card drifts higher */
    }
    75% {
        /* Sways down towards the right baseline before returning */
        transform: rotateX(-2deg) rotateY(-3deg) translateY(-4px) !important;
    }
    100% {
        /* Smoothly lands back onto initial coordinates for a flawless loop integration */
        transform: rotateX(0deg) rotateY(0deg) translateY(0px) !important;
    }
}

/* 3. Keeping your inner yellow text card crisp and clear */
.glass-text-node {
    position: relative !important;
    z-index: 10 !important;
    max-width: 440px !important;
    margin: 40px !important; /* Provides deep safety clearance paddings */
    box-sizing: border-box !important;
    
    background-color: rgba(20, 20, 22, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(251, 188, 5, 0.35) !important; /* Fine brand yellow border trace line */
}
/* Locate your navbar link wrapper element in ppt.css and update it */
.logo a, 
header a[href="../index.html"] {
    background: transparent !important;   /* Obliterates the solid pill box color */
    background-color: transparent !important;
    border: none !important;              /* Strips out the border stroke */
    box-shadow: none !important;          /* Deletes the lower physical button shadow */
    padding: 0 !important;                /* Eliminates excess white layout padding */
}

/* Ensure no hover rules trigger the background color back into view */
.logo a:hover,
header a[href="../index.html"]:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
/* ==========================================================================
   ISOLATED 3D NOTEBOOK FLIP & PAPER TEXTURE STYLES
   ========================================================================== */

/* 1. Setup 3D Depth Context on your existing container */
#services .carousel-container {
  perspective: 2000px;
  position: relative;
}

/* 2. Transform the display frame into an open notebook layout */
#services .comparison-display {
  position: relative;
  display: flex;
  transform-style: preserve-3d;
  background: linear-gradient(to right, #ffffff 50%, #171717 50%); /* Clean layout paper split */
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    inset 0 0 40px rgba(0,0,0,0.02);
  transition: transform 0.6s ease;
}

/* 3. Center Page Spine binding crease shadow element */
#services .comparison-display::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.08));
  z-index: 10;
  pointer-events: none;
}

/* 4. Configure your side panels as 3D layers */
#services .side-panel {
  flex: 1;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Before Panel Canvas Style */
#services .before-side {
  background: #ffffff;
}

/* After Panel Canvas Style */
#services .after-side {
  background: #171717;
}

/* 5. Paper Card Wrapper Animation Transition states */
#services .panel-card {
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.33, 1), opacity 0.4s ease-in-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Smooth content item fading class utilities utilized by the JS script */
#services .fade-out-content {
  opacity: 0 !important;
  transform: scale(0.96);
}

/* ==========================================================================
   PAPER FLIPPING VISUAL INTERACTION EFFECT (Triggers on Arrow click)
   ========================================================================== */
#services .comparison-display.page-turning-active .before-side .panel-card {
  transform: rotateY(35deg) scale(0.97) translateZ(10px);
  opacity: 0.4;
}

#services .comparison-display.page-turning-active .after-side .panel-card {
  transform: rotateY(-35deg) scale(0.97) translateZ(10px);
  opacity: 0.4;
}
#services .text-fade-hide {
  opacity: 0 !important;
  transition: opacity 0.3s ease-in-out;
}
/* Clean up your design card container box */
.panel-card.design-card {
    padding: 0 !important; /* Overrides any padding pushing elements out */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px; /* Adjust this to match the height of your left-side before card */
    box-sizing: border-box;
}

/* Force the webp animation to fit perfectly inside the container frame */
.after-gif-display {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps your original slide preview proportions intact */
    border-radius: inherit;
    display: block;
}
/* Keeps the wrapper box rigid and cleanly proportioned */
.panel-card.design-card {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Forces the fresh injected image element to snap flawlessly within bounds */
.after-gif-display {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps preview dimensions clean and un-stretched */
    border-radius: inherit;
    display: block;
}
/* Fix visibility lock for dynamically injected carousel graphics */
#gifWrapper img.after-gif-display {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* FORCE VISIBILITY FOR CAROUSEL CARDS */
#services .panel-card.design-card {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 280px !important;
    background: #141414 !important; /* Dark card background color matching your design layout */
}

/* FORMAT AND AUTOMATICALLY ANIMATE INJECTED WEBP IMAGES */
#services .after-gif-display {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: inherit !important;
    animation: quickFadeIn 0.4s ease-out forwards; /* Triggers a smooth fade-in each time image loads */
}

@keyframes quickFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}
.after-gif-display {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transition: opacity 0.3s ease-in-out;
}
/* Hide all slide animations by default */
.after-gif-slide {
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Instantly display only the single graphic matching the active card index */
.after-gif-slide.active {
    display: block !important;
}
/* Standard layouts for your reusable picture frame */
.after-gif-display {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
/* Viewport that clips the extra slides out of sight */
.carousel-window {
    width: 100%;
    max-width: 800px; /* Adjust to match your preferred image size */
    overflow: hidden;
    border-radius: 12px;
}

/* Flexbox track carrying images horizontally */
.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 500%; /* Enough room for 5 slides side-by-side */
}

/* Individual image constraints */
.carousel-slide-img {
    width: 20%; /* Each takes exactly 1/5 of the parent track container */
    height: auto;
    object-fit: contain;
    display: block;
}
/* Keeps the window locked to the exact size of your cards and cuts off extra items */
.carousel-window {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Wide track mapping all 5 slide blocks horizontally */
.carousel-track {
    display: flex;
    width: 500%; /* Space for 5 cards side-by-side */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Individual full-size block layout container matching your exact theme */
.carousel-unit {
    width: 20%; /* Exactly 1/5 of the parent track structure layout */
    display: flex;
    gap: 20px; /* Space between your Before and After card blocks */
    box-sizing: border-box;
}

/* Force consistency on image displays inside your layouts */
.carousel-unit .after-gif-display {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* Viewport window container that stays fixed and clips overflows */
.carousel-window-box {
    width: 100%;
    max-width: 800px; /* Adjust this value to perfectly fit your design width bounds */
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

/* Horizontal display track utilizing your animation marquee styles */
.carousel-slide-track {
    display: flex;
    width: max-content; /* Automatically expands to hold all original and cloned images side-by-side */
    animation: seamlessLoopScroll 20s linear infinite; /* Loops automatically without stopping */
}

/* Individual image sizing variables */
.slide-mockup-image {
    width: 400px; /* Adjust this to change how wide each image displays */
    height: auto;
    object-fit: contain;
    display: block;
}

/* Pauses the slider track smoothly when a user hovers over it */
.carousel-slide-track:hover {
    animation-play-state: paused;
}

/* Keyframe rules to slide the track over by exactly 50% (the length of your original images) */
@keyframes seamlessLoopScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Container that locks the view to exactly one card size and crops the rest */
.carousel-window-box {
    width: 100%;
    max-width: 600px; /* Adjust this to match your preferred mockup frame width */
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    margin: 0 auto;
}

/* Horizontal track configured for a full 6-slide asset structure layout */
.carousel-slide-track {
    display: flex;
    width: 600%; /* Space for exactly 6 elements total */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Individual image layout rules splitting the container grid perfectly into 6 */
.slide-mockup-image {
    width: 100%;
    flex: 0 0 16.666%; /* 100% split evenly across 6 images (100 / 6) */
    height: auto;
    object-fit: contain;
    display: block;
}
/* The wide track carrying all 6 images horizontally */
.carousel-slide-track {
    display: flex !important;
    width: 600% !important; /* FIXED: Must be 600% to hold 6 images side-by-side */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Individual image constraints splitting the width cleanly by 6 */
.slide-mockup-image {
    width: 100% !important;
    flex: 0 0 16.666% !important; /* FIXED: Space calculation for exactly 6 images */
    height: auto;
    object-fit: contain;
    display: block;
}
/* Container that locks the view to exactly one card size and crops the rest */
.carousel-window-box {
    width: 100%;
    max-width: 600px; /* The specific base width of your card display frame */
    height: 380px;    /* FIXED: Explicit height so all cards are completely uniform */
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    margin: 0 auto;
}

/* Horizontal display track utilizing your seamless marquee styles */
.carousel-slide-track {
    display: flex !important;
    width: max-content !important; 
    height: 100% !important;
    animation: endlessMarqueeScroll 25s linear infinite !important; 
}

/* Sizing limits forcing every single slide asset to match the frame size exactly */
.slide-mockup-image {
    width: 600px !important;  /* Must match your viewport width precisely */
    height: 380px !important; /* FIXED: Overrides and forces all images to be the exact same height */
    object-fit: cover !important; /* FIXED: Crops uneven background edges cleanly without stretching */
    display: block !important;
    flex-shrink: 0 !important;
}

/* Pauses rotation smoothly when mouse hovers over an image */
.carousel-slide-track:hover {
    animation-play-state: paused !important;
}

/* Keyframe rules to slide the track over by exactly half its length (6 images worth) */
@keyframes endlessMarqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Container that locks the view to exactly one card size and crops the rest */
.carousel-window-box {
    width: 100%;
    max-width: 600px; /* Adjust this to match your preferred mockup frame width */
    height: 380px;    /* Explicit height box limits */
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    margin: 0 auto;
    background-color: #000; /* Dark premium background baseline fallback */
}

/* Horizontal display track carrying all 12 cards side-by-side */
.carousel-slide-track {
    display: flex !important;
    width: 1200% !important; /* Space for exactly 12 cards side-by-side (12 * 100%) */
    height: 100% !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Sizing rules forcing every individual slide asset to fill the viewport box completely */
.slide-mockup-image {
    width: 100% !important;
    flex: 0 0 8.333% !important; /* splits the 1200% track evenly per image (100 / 12 = 8.333%) */
    height: 100% !important;
    object-fit: cover !important; /* Overrides and scales images to fill the box without leaving black gaps */
    display: block !important;
}
/* Container that locks the view to exactly one card size and crops the rest */
.carousel-window-box {
    width: 100%;
    max-width: 600px; 
    height: 380px;    
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    margin: 0 auto;
}

/* Horizontal display track completely driven by JavaScript transitions */
.carousel-slide-track {
    display: flex !important;
    width: 600% !important; /* FIXED: Space for your 6 images side-by-side */
    height: 100% !important;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Smooth sliding movement */
    will-change: transform;
}

/* Sizing rules forcing every individual slide asset to fill the viewport box completely */
.slide-mockup-image {
    width: 100% !important;
    flex: 0 0 16.666% !important; /* Splits the 600% track evenly across 6 images (100 / 6) */
    height: 100% !important;
    object-fit: cover !important; 
    display: block !important;
}
#categorySubtitle {
    max-width: 650px;       /* Keeps the text block cleanly contained */
    margin: 8px auto 0 auto; /* Centers the paragraph underneath the title */
    line-height: 1.6;        /* Adds comfortable spacing between lines */
    font-size: 20px;         /* Keeps the sub-text looking elegant and premium */
    text-align: center;
}