/* ==========================================================================
   components.css — Precision B2B Application Terminal Engine
   ========================================================================== */

/* --- High-Density Layout Compression Matrix --- */
.gap-1 {
    gap: calc(var(--space-xs) / 2) !important;
}

.gap-2 {
    gap: var(--space-xs) !important;
}

.gap-3 {
    gap: var(--space-sm) !important;
}

.h-100 {
    height: 100% !important;
}

.w-100 {
    width: 100% !important;
}

.border-bottom-light {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.border-top-light {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.font-weight-bold {
    font-weight: 700 !important;
}

.tracking-tight {
    letter-spacing: -0.03em !important;
}

.uppercase-heading {
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* ==========================================================================
   HIGH-IMPACT APPLICATION MENU (Restructured Top Bar Console)
   ========================================================================== */
.navbar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-color: rgba(10, 12, 16, 0.88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 0 !important; /* Compressed low-profile spatial footprint */
    position: relative;
}

    /* 8% Surge Accent Indicator Running Edge-to-Edge at the Absolute Top of Viewport */
    .navbar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--primary) 0%, rgba(0, 255, 102, 0.3) 100%);
        z-index: 10;
    }

.navbar-item.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px !important; /* Clean separation gap between image frame and typography block */
    padding: 0.4rem 0.75rem;
}

.brand-logo img {
    height: 60px !important; /* Low-profile hardware instrumentation scale */
    width: auto;
    border: none !important; /* Strips structural bounding boxes from branding asset */
}

.brand-text strong {
    font-size: 0.88rem;
    color: var(--text-light);
    font-weight: 700;
}

.brand-text span {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* --- High-Density Navigation Menu Interaction Controls --- */
.navbar-start .navbar-item {
    position: relative;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0 1.25rem !important;
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: var(--text-main) !important;
    transition: color 0.15s ease;
}

.navbar-start a.navbar-item:hover {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--primary) !important;
}

/* Underline Indicator Strip for Active Platform Navigation Nodes */
.navbar-start .navbar-item.is-active {
    color: var(--primary) !important;
    background: transparent !important;
}

    .navbar-start .navbar-item.is-active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 1.25rem;
        right: 1.25rem;
        height: 2px;
        background-color: var(--primary);
        box-shadow: 0 0 8px var(--primary);
    }

/* ==========================================================================
   RESTORED FONTAWESOME MATRIX ACCENTS
   ========================================================================== */
.irsocial-media {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

    .irsocial-media .menu-item, .irsocial-media .menu-item > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

.fa-stack {
    width: 1.85em !important;
    height: 1.85em !important;
    line-height: 1.85em !important;
    position: relative !important;
}

.fa-stack-2x {
    font-size: 1.85em !important;
    width: 100% !important;
    height: 100% !important;
}

.fa-stack-1x {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.irsocial-media .fa-circle {
    color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    transition: all 0.15s ease;
}

.irsocial-media a:hover .fa-circle {
    color: rgba(0, 255, 102, 0.12) !important;
    border-color: var(--primary) !important;
}

.irsocial-media .fa-stack-1x {
    color: var(--text-muted) !important;
    transition: color 0.15s ease;
}

.irsocial-media a:hover .fa-stack-1x {
    color: var(--primary) !important;
}

/* ==========================================================================
   CURE FOR DUAL-NESTED RAZOR VIEW COMPONENT CARD BUG (.card .card)
   ========================================================================== */
/* Erases double structural visual stacks on the outer shell block wrapper layout */
.card.block-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}

/* ==========================================================================
   NATIVE PLATFORM CORE CARD CONSOLE MODULES (Clean Layered Tone Panels)
   ========================================================================== */
.card .card, .soft-container, .process-card, .team-profile-card {
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Silver technical frame line outline */
    border-radius: 4px !important; /* Precise, uniform tool frame radius */
    background: linear-gradient(180deg, #12161f 0%, #0d1017 100%) !important; /* Integrated depth base */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    padding: var(--space-sm) !important; /* High-density interior compression metrics */
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

    /* 8% App Asset Accent Polish: Vivid Green Console Top Bar Running Exactly Across Header */
    .card .card::before, .process-card::before, .team-profile-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-color: var(--primary); /* Anchors stock images and anchors header content geometry cleanly */
        opacity: 0.85;
        z-index: 5;
    }



    /* Interactive Dev-Console Cursor Hover System Glow Trigger mapping */
    .card .card:hover, .soft-container:hover, .process-card:hover, .team-profile-card:hover {
        border-color: rgba(0, 255, 102, 0.3) !important; /* Converts wireframe outline to subtle green glow border */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 255, 102, 0.12) !important; /* Low-profile hardware luminescence overlay */
    }

    /* Corrects the interior padding distribution flow beneath the top banner line */
    .card .card .content, .process-card-content, .content {
        padding-top: calc(var(--space-xs) / 1.5) !important;
    }

/* --- Precision Pill Controls --- */
.button {
    border-radius: 50px !important; /* Smooth pill geometry matching deployment modules */
    padding: 0.35rem 0.85rem !important;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.15s ease;
}

    .button.is-primary, button[type="submit"] {
        background-color: var(--primary) !important;
        border: 1px solid var(--primary) !important;
        color: #000000 !important;
    }

        .button.is-primary:hover, button[type="submit"]:hover {
            background-color: var(--primary-dark) !important;
            border-color: var(--primary-dark) !important;
            box-shadow: 0 0 10px rgba(0, 255, 102, 0.35) !important;
        }

    .button:not(.is-primary):not([type="submit"]) {
        background-color: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: var(--text-main) !important;
    }

        .button:not(.is-primary):not([type="submit"]):hover {
            border-color: var(--primary) !important;
            color: var(--primary) !important;
            background-color: rgba(0, 255, 102, 0.02) !important;
        }

/* ==========================================================================
   HIGH-SECURITY COMPACT CONTROLS OVERRIDES
   ========================================================================== */
.embedded-form-component-wrapper .card {
    background: #090c12 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.embedded-form-component-wrapper .form-component-banner-header {
    background: rgba(0, 255, 102, 0.03) !important;
    border: 1px solid rgba(0, 255, 102, 0.12) !important;
    border-radius: 3px !important;
}

/* --- Automated CMS Feature Check Rows --- */
.feature-check-mark,
.block-wrapper h2 + ul li::before,
.block-wrapper h3 + ul li::before,
.block-wrapper p + ul li::before {
    color: var(--primary) !important;
    text-shadow: 0 0 4px rgba(0, 255, 102, 0.3);
}




/* ==========================================================================MICRO SPACING OVERRIDES & OBJECTS========================================================================== */

section.section {
    padding: var(--space-md) var(--space-sm) !important;
}

.columns {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Image Framework Synchronization 
    */
img, .image img, figure.image img {border-radius: 3px !important; /* Uniform structural boundary fitting tight card layout limits */
border: 1px solid rgba(255, 255, 255, 0.04);
} /* Low-profile Back To Top UI box trigger toggle */

/* ==========================================================================
   FLOATING VIEWPORT BACK TO TOP TRIGGER (Fixed Horizontal Stretching Bug)
   ========================================================================== */
#backToTop,
.back-to-top-button {
    /* Locks the element x pixels off the physical browser window boundaries */
    position: fixed !important;
    bottom: 40px !important; /* Fixed 40px offset from the very bottom of the screen */
    right: 40px !important; /* Fixed 40px offset from the very right of the screen */
    /* Hard-locked explicit bounding dimensions */
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    /* Technical application alignment defaults */
    display: inline-flex !important; /* Prevents container rules from pulling it wide */
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background: #12161f !important; /* Low-profile slate core resting fill */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-muted) !important;
    z-index: 999999 !important; /* Layers it safely on top of everything */
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    /* Smooth opacity animation properties driven by javascript scroll hooks */
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, color 0.15s ease !important;
}

    /* --- Active Visibility State Injection Overrides --- */
    #backToTop.visible,
    .back-to-top-button.visible {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        display: inline-flex !important; /* Locks layout boundaries firmly in place */
    }

    /* --- High-Velocity Action Hover Glow States --- */
    #backToTop:hover,
    .back-to-top-button:hover {
        background: var(--primary) !important; /* Instantly flashes into vivid cyber green */
        border-color: var(--primary) !important;
        color: #000000 !important; /* High-contrast black icon mapping on green */
        box-shadow: 0 0 10px rgba(0, 255, 102, 0.45) !important;
        transform: translateY(-2px) !important; /* Responsive micro-lift physics feedback loop */
    }

    /* Micro Adjustment for Internal Material Icon Placement */
    #backToTop .material-icons-round,
    .back-to-top-button .material-icons-round {
        font-size: 18px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }



/* ==========================================================================
   HIGH-IMPACT APPLICATION MENU (Partial Top-Line Gradient)
   ========================================================================== */
.navbar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-color: rgba(10, 12, 16, 0.90) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    padding: 0 !important;
    position: relative;
}

    /* MODIFIED: Top Line now runs only PARTIALLY along the top menu bar, fading out */
    .navbar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 45%; /* Limits the line so it covers the branding/start, dissolving before the end */
        height: 2px;
        background: linear-gradient(90deg, var(--primary) 0%, /* Solid vivid green over logo */
        rgba(0, 255, 102, 0.4) 50%, /* Fading green trace */
        transparent 100% /* Dissolves completely into darkness */
        );
        z-index: 10;
    }

    /* Translucent Down-Glow Environmental Shadow Effect */
    .navbar::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;
        height: 10px;
        background: linear-gradient(to bottom, rgba(0, 255, 102, 0.02) 0%, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }

/* ==========================================================================
   NAVBAR BRAND LOGO GLOW INTEGRATION
   ========================================================================== */
.brand-text {
    line-height: 1.1;
    position: relative;
    padding-bottom: 4px; /* Micro cushion space for the telemetry accent line */
}

    .brand-text strong {
        font-size: 0.88rem;
        color: var(--text-light);
        font-weight: 700;
        letter-spacing: -0.01em;
        transition: color 0.15s ease, text-shadow 0.15s ease;
    }

    .brand-text span {
        font-size: 0.72rem;
        color: var(--text-muted);
        position: relative;
        display: inline-block;
        transition: color 0.15s ease, text-shadow 0.15s ease;
    }

    /* 8% Surge Accent Indicator running partially right under the branding subtitle */
    .brand-text::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 65%; /* Restricts the neon glow line to a clean, partial visual accent anchor */
        height: 1px;
        background: linear-gradient(90deg, var(--primary) 0%, rgba(0, 255, 102, 0.3) 70%, transparent 100% );
        box-shadow: 0 1px 4px rgba(0, 255, 102, 0.4); /* Subdued hardware console glow */
        transition: background 0.15s ease, box-shadow 0.15s ease;
    }

/* --- Interactive Core Branding Link Hover States --- */
/* Forces BOTH text lines to cleanly transition into the matching cyber green glow system */
a.navbar-item.brand-logo:hover .brand-text strong {
    color: var(--primary) !important; /* Main title turns Cyber Lime green */
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.6) !important; /* Full neon text radiance */
}

a.navbar-item.brand-logo:hover .brand-text span {
    color: var(--primary) !important; /* Subtitle also turns Cyber Lime green */
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.6) !important; /* Full uniform glow sync */
}

a.navbar-item.brand-logo:hover .brand-text::after {
    background: linear-gradient(90deg, var(--primary) 0%, rgba(0, 255, 102, 0.6) 70%, transparent 100% ) !important;
    box-shadow: 0 1px 8px rgba(0, 255, 102, 0.7) !important; /* Intensifies the underline wire brightness */
}


/* ==========================================================================
   NATIVE MODULE CONTAINER FRAMES (Partial Green Accents & Micro-Lift)
   ========================================================================== */
.card .card, .soft-container, .process-card, .catalog-pricing-card, .team-profile-card {
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #131722 0%, #0c0f16 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    /* Added transition targets to cleanly animate the physical movement loops */
    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

    /* MODIFIED: The accent bar now runs ONLY PARTIALLY across the top-left edge of cards */
    .card .card::before, .process-card::before, .catalog-pricing-card::before, .team-profile-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 35%; /* Snatched back to just a partial 35% indicator highlight strip */
        height: 3px;
        background: linear-gradient(90deg, var(--primary) 0%, rgba(0, 255, 102, 0.2) 100%);
        z-index: 5;
    }

    /* Keeps feature matrix card styling isolated if inline styles dictate */
    .catalog-pricing-card[style*="--card-accent"]::before {
        background: linear-gradient(90deg, var(--card-accent) 0%, transparent 100%) !important;
        width: 45%;
    }

    /* Interior Cushion Pad Separation */
    .card .card .content,
    .process-card-content,
    .catalog-pricing-card-content {
        padding: var(--space-sm) !important;
    }

    /* Sharp focus wireframe toggle loop mapping with Restored Micro-Lift Physics */
    .card .card:hover, .soft-container:hover, .process-card:hover, .catalog-pricing-card:hover, .team-profile-card:hover {
        transform: translateY(-2px) !important; /* The card bounce effect is active */
        border-color: rgba(0, 255, 102, 0.25) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 255, 102, 0.12) !important; /* Deepened shadow gap */
    }


/* Image alignment synchronization */
img, .image img, figure.image img {
    border-radius: 3px 3px 0 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}


/* ==========================================================================
   PRICING CARDS
   ========================================================================== */


.catalog-pricing-card {
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 4px !important;
    background: linear-gradient( 180deg, #131722 0%, #0c0f16 100% ) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55) !important;
    padding: var(--space-md) !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

    /* --------------------------------------------------------------------------
   Accent Bar
   -------------------------------------------------------------------------- */

    .catalog-pricing-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        height: 3px;
        background: linear-gradient( 90deg, var(--card-accent, var(--primary)) 0%, transparent 100% );
        z-index: 5;
    }

    /* --------------------------------------------------------------------------
   Hover
   -------------------------------------------------------------------------- */

    .catalog-pricing-card:hover {
        border-color: rgba(0,255,102,0.25) !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.65), 0 0 12px rgba(0,255,102,0.12) !important;
    }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.catalog-card-header {
    margin-bottom: var(--space-md);
}

.catalog-pricing-card .tier-title {
    font-size: 1.2rem !important;
    color: var(--text-light) !important;
    letter-spacing: 0.05em;
    margin: var(--space-md) !important;

}

/* --------------------------------------------------------------------------
   Price
   -------------------------------------------------------------------------- */

.price-icon-badge {
    font-size: var(--space-xl) !important;
}

.pricing-display-group {
    margin-bottom: var(--space-lg);
}

.price-expression-row {
    display: flex;
    align-items: baseline;
}

.price-value-node {
    font-size: 3.8rem !important;
    line-height: 1 !important;
    color: var(--text-light) !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Features
   -------------------------------------------------------------------------- */

.catalog-card-features-body {
    margin-top: 0;
}

.features-checklist-grid {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.catalog-pricing-card .checklist-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    border: none !important;
    background: transparent !important;
    padding: 0.35rem 0 !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Tick Icon
   -------------------------------------------------------------------------- */

.catalog-pricing-card .feature-check-mark {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    color: var(--card-accent, var(--primary)) !important;
}

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */

.catalog-pricing-card .feature-detail-text {
    color: var(--text-main);
    line-height: 1.4;
}

/* ==========================================================================
   HIGH-DENSITY FOOTER OVERRIDES (Fixed Icon Alignment & Green Balance)
   ========================================================================== */
.footer-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

    .footer-links li {
        margin-bottom: var(--space-xs) !important; /* Compressed item row padding gaps */
    }

        /* 92% Balanced Foundation: Footer links rest as a clean, legible cool silver */
        .footer-links li a {
            display: inline-flex !important; /* Forces layout tracking onto a structural row grid */
            align-items: center !important; /* CRITICAL: Perfect vertical axis center alignment */
            gap: 8px !important; /* Tight, intentional gap spacing between icon and text */
            color: var(--text-main) !important;
            font-size: 0.85rem !important;
            font-weight: 500;
            transition: color 0.15s ease, text-shadow 0.15s ease !important;
        }

            /* 8% Limited Neon Highlight: The vivid green vector assets pop cleanly while layout text rests quiet */
            .footer-links li a .material-icons-round {
                color: var(--primary) !important;
                font-size: 1.1rem !important; /* Scaled to perfectly balance baseline font heights */
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                line-height: 1 !important;
                text-shadow: 0 0 6px rgba(0, 255, 102, 0.2); /* Soft ambient neon telemetry glow */
            }

            /* Comprehensive Hover Focus Glow: The entire element lights up green cleanly upon cursor tracking actions */
            .footer-links li a:hover {
                color: var(--primary) !important;
                text-shadow: 0 0 8px rgba(0, 255, 102, 0.45) !important;
            }

/* ==========================================================================
   POST ARCHIVE & LIVE COMMENT ENTRY CONSOLE
   ========================================================================== */

/* --- High-Density Hero Post Meta Overrides --- */
.hero-post-meta {
    margin-top: var(--space-sm);
    padding: calc(var(--space-xs) / 2) var(--space-md);
    background: rgba(14, 18, 26, 0.65);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    z-index: 5;
}

.post-meta {
    font-size: 0.82rem !important;
    color: var(--primary-vibrant) !important;
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 !important;
}

    .post-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;

    }

    /* Category & Tag Links Hierarchy Settings */
    .post-meta a {
        color: var(--primary);
        font-weight: 600;
        text-decoration: none;
        transition: all 0.15s ease;
    }

        .post-meta a:hover {
            color: var(--primary-dark);
            text-shadow: 0 0 6px rgba(0, 255, 102, 0.4);
        }

/* ==========================================================================
   INTERCEPTING BULMA MESSAGE BOXES (.message.is-info)
   ========================================================================== */
/* Cures the bright default template shapes inside the comment engine */
article.message.is-info.soft-container {
    background: linear-gradient(180deg, #12161f 0%, #0d1017 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

    /* Cleans up the background fill inside Bulma message headers */
    article.message.is-info.soft-container .message-body {
        background-color: transparent !important;
        border: none !important;
        color: var(--text-main) !important;
        padding: var(--space-md) !important;
    }

    /* --- High-Density Comment Form Field Elements --- */
    article.message.is-info.soft-container h3.title {
        color: var(--text-light) !important;
        font-size: 1.2rem !important;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: calc(var(--space-xs) / 2) !important;
    }

    article.message.is-info.soft-container p {
        font-size: 0.82rem !important;
        color: var(--text-muted) !important;
        margin-bottom: var(--space-sm) !important;
        line-height: 1.4;
    }

    /* Forces input controls to stack compactly inside the two-column row block */
    article.message.is-info.soft-container .columns {
        margin-bottom: 0 !important;
        gap: var(--space-xs);
    }

    article.message.is-info.soft-container .column {
        padding: 0 !important; /* Strips default loose spacing around form columns */
    }

    article.message.is-info.soft-container .field {
        margin-bottom: var(--space-xs) !important;
    }

    /* --- Forces Bulma's Success Button to comply with the primary theme color --- */
    article.message.is-info.soft-container .button.is-success {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #000000 !important; /* Extreme black overlay text clarity */
        box-shadow: var(--shadow-badge) !important;
    }

        article.message.is-info.soft-container .button.is-success:hover {
            background-color: var(--primary-dark) !important;
            border-color: var(--primary-dark) !important;
            box-shadow: 0 0 10px rgba(0, 255, 102, 0.35) !important;
            transform: translateY(-2px) !important; /* Micro bounce action mapping */
        }

/* ==========================================================================
   HIGH-IMPACT ARCHIVE TERMINAL RESTRENGTHENING (Perfect Split-Panel Alignment)
   ========================================================================== */

/* --- THE FIRST FEATURED POST OVERHAUL (46/54 Split Desktop Panel) --- */
.archive .column.is-12 article.soft-container {
    display: block !important; /* Strips layout grid rules to block vertical stretching */
    position: relative !important;
    background: linear-gradient(180deg, #131722 0%, #0c0f16 100%) !important;
    min-height: 280px !important;
    overflow: hidden !important;
}

    /* Image Column Anchor (Left Side Matrix - Wider & Responsive) */
    /* FIXED: This rule target applies absolute layout logic ONLY to the immediate first link (the image wrapper) */
    .archive .column.is-12 article.soft-container > a:first-of-type {
        position: absolute !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 46% !important; /* Widened from 38% for high-impact presence */
        height: 100% !important;
        display: block !important;
    }

    .archive .column.is-12 article.soft-container figure.image {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

        .archive .column.is-12 article.soft-container figure.image img {
            border-radius: 4px 0 0 4px !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

    /* ==========================================================================
   VIRTUAL RIGHT WORKSPACE CONTROL (Prevents Vertical Element Stretching)
   ========================================================================== */
    /* We target all direct layout text blocks that trail behind the image link wrapper 
   and bundle them inside a single, tight right-hand layout zone */
    .archive .column.is-12 article.soft-container h3.title,
    .archive .column.is-12 article.soft-container .post-meta,
    .archive .column.is-12 article.soft-container p,
    .archive .column.is-12 article.soft-container a.button.is-primary {
        margin-left: calc(46% + var(--space-md)) !important; /* Margins push past the 46% wide image canvas */
        margin-right: var(--space-md) !important;
        width: auto !important;
    }

    .archive .column.is-12 article.soft-container h3.title {
        margin-top: var(--space-md) !important; /* Fixed padding distance from the top wireframe border */
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        color: var(--text-light) !important;
        line-height: 1.2 !important;
        display: block !important;
    }

    .archive .column.is-12 article.soft-container .post-meta {
        margin-top: var(--space-xs) !important;
        margin-bottom: var(--space-xs) !important;
        display: flex !important;
    }

    .archive .column.is-12 article.soft-container p {
        font-size: 0.88rem !important;
        line-height: 1.45 !important;
        color: var(--text-main) !important;
        margin-bottom: var(--space-md) !important; /* Cushion space before the action pill */
        display: block !important;
    }

    /* HARD-LOCKS BUTTON SIZE: Blocks the button from ever expanding horizontally or vertically */
    /* FIXED: Scoped selector ensures it applies strictly to the action link without breaking layout anchors */
    .archive .column.is-12 article.soft-container a.button.is-primary.is-small,
    .archive .column.is-6 article.soft-container a.button.is-primary.is-small {
        display: inline-flex !important;
        align-self: flex-start !important;
        width: auto !important;
        max-width: 140px !important; /* Locks maximum pill boundaries permanently */
        height: auto !important;
        padding: 0.35rem 0.85rem !important;
        margin-bottom: var(--space-md) !important;
        position: relative !important; /* Rips any inherited absolute positioning bugs away */
        top: auto !important; /* Guarantees it renders inside normal sequence flow */
    }

/* --- THE DUAL GRID POSTS (is-6 Cards Spacing Baseline) --- */
.archive .column.is-6 article.soft-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

    .archive .column.is-6 article.soft-container figure.image {
        width: 100% !important;
        max-height: 200px !important;
        margin: 0 !important;
    }

        .archive .column.is-6 article.soft-container figure.image img {
            border-radius: 4px 4px 0 0 !important;
        }

    .archive .column.is-6 article.soft-container h3.title {
        margin-top: var(--space-sm) !important;
        margin-left: var(--space-sm) !important;
        margin-right: var(--space-sm) !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        color: var(--text-light) !important;
    }

    .archive .column.is-6 article.soft-container .post-meta,
    .archive .column.is-6 article.soft-container p,
    .archive .column.is-6 article.soft-container a.button {
        margin-left: var(--space-sm) !important;
        margin-right: var(--space-sm) !important;
    }

        .archive .column.is-6 article.soft-container a.button.is-primary.is-small {
            margin-bottom: var(--space-sm) !important;
        }

/* ==========================================================================
   ALIGNMENT FIXES FOR POST TAG CLUSTERS (.post-meta)
   ========================================================================== */
.archive .post-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 2px 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
}

    .archive .post-meta span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

        .archive .post-meta span a {
            background: rgba(255, 255, 255, 0.04) !important;
            border: 1px solid rgba(255, 255, 255, 0.06) !important;
            padding: 2px 6px !important;
            border-radius: 3px !important;
            color: var(--primary) !important;
            font-size: 0.72rem !important;
            font-weight: 700 !important;
            text-transform: uppercase;
        }

/* ==========================================================================
   IMAGE SHOWCASE BLOCK
   ========================================================================== */

.pc-image-showcase {
    margin: var(--space-lg) auto;
}

    .pc-image-showcase .title {
        margin-bottom: calc(var(--space-xs) / 2);
    }

    .pc-image-showcase .subtitle {
        color: var(--text-muted);
        margin-bottom: var(--space-md);
    }

    .pc-image-showcase figure {
        margin: 0;
    }

    .pc-image-showcase img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 4px;
    }

.image-caption {
    margin-top: var(--space-sm);
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}


/* ==========================================================================
   OPTIONAL CARD STYLING
   ========================================================================== */

.pc-image-showcase-card {
    padding: var(--space-sm);
    background: linear-gradient(180deg, #131722 0%, #0c0f16 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

    .pc-image-showcase-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 35%;
        height: 3px;
        background: linear-gradient( 90deg, var(--primary) 0%, rgba(var(--primary-rgb), 0.2) 100% );
    }

    .pc-image-showcase-card:hover {
        border-color: rgba(var(--primary-rgb), 0.25);
        box-shadow: 0 10px 24px rgba(0,0,0,0.65), 0 0 12px rgba(var(--primary-rgb), 0.12);
    }

div.pc-image-multi-column h2
{
    padding-bottom: var(--space-lg) !important;
    margin-top: 5px;
}

div.pc-image-full-width h2,
div.pc-image-full h2 {
    padding-bottom: var(--space-lg) !important;
    margin-top:5px;
}

.pc-image-showcase figure {
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/*Bullet Lists*/


.block-wrapper ul li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.01);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

    .block-wrapper ul li:hover {
        border-color: rgba(0,255,102,0.15);
    }

    .block-wrapper ul li::before {
        font-family: 'Material Icons Round';
        content: 'check_circle';
        color: var(--primary);
        font-size: 1.25rem;
        line-height: 1;
        text-shadow: 0 0 6px rgba(0,255,102,0.25);
        flex-shrink: 0;
    }


/*Form*/
/* ==========================================================================
   CTA FORM
   ========================================================================== */

.embedded-form-component-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.form-component-banner-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
}

    .form-component-banner-header .icon-circle-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
    }

    .form-component-banner-header .material-icons-round {
        font-size: 20px !important;
    }

    .form-component-banner-header h2 {
        margin-bottom: 0 !important;
    }

    .form-component-banner-header .subtitle {
        display: block !important;
        margin-top: 0.3rem !important;
        margin-bottom: 0 !important;
        color: var(--text-muted) !important;
    }

/* --------------------------------------------------------------------------
   Remove duplicated internal heading
   -------------------------------------------------------------------------- */

.catalog-section-header {
    display: none !important;
}

/* ==========================================================================
   PORTFOLIO CAT FORM COMPONENT
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */

.embedded-form-component-wrapper {
    width: 100% !important;
    margin: 0 !important;
    max-width: none !important;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.form-component-banner-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--space-sm) !important;
    padding: var(--space-sm) var(--space-md) !important;
}

.banner-divider {
    display: none !important;
}

.form-component-banner-header .icon-circle-wrapper {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.form-component-banner-header .material-icons-round {
    font-size: 18px !important;
    margin: 0 !important;
}

.form-component-banner-header h2 {
    margin: 0 !important;
    line-height: 1 !important;
}

.form-component-banner-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
}

/* --------------------------------------------------------------------------
   Hide Duplicate Header
   -------------------------------------------------------------------------- */

.catalog-section-header {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Card Compression
   -------------------------------------------------------------------------- */

.embedded-form-component-wrapper .card {
    padding: var(--space-sm) !important;
}

.dynamic-action-native-form {
    margin-bottom: 0 !important;
}

    .dynamic-action-native-form .columns {
        margin-bottom: 0 !important;
    }

    .dynamic-action-native-form .field {
        margin-bottom: var(--space-xs) !important;
    }

    /* --------------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------------- */

    .dynamic-action-native-form .label {
        margin-bottom: calc(var(--space-xs) / 2) !important;
    }

    /* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */

    .dynamic-action-native-form .input,
    .dynamic-action-native-form .textarea {
        background: rgba(255,255,255,0.02) !important;
    }

/* Input icon */

.control.has-icons-left .input {
    padding-left: 2.25rem !important;
}

/* Textarea icon */

.control.has-icons-left.is-textarea-control .textarea {
    padding-left: 2rem !important;
}

/* --------------------------------------------------------------------------
   Consent
   -------------------------------------------------------------------------- */

.dynamic-action-native-form .checkbox {
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
}

/* --------------------------------------------------------------------------
   Submit Button
   -------------------------------------------------------------------------- */

.dynamic-action-native-form .field.mt-3 {
    margin-top: var(--space-lg) !important;
}

.dynamic-action-native-form button[type="submit"] {
    width: auto !important;
    min-width: 240px !important;
    padding-left: var(--space-lg) !important;
    padding-right: var(--space-lg) !important;
}

    .dynamic-action-native-form button[type="submit"] .material-icons-round {
        margin-right: var(--space-xs) !important;
    }

/* --------------------------------------------------------------------------
   Toasts / Validation
   -------------------------------------------------------------------------- */

.client-form-toast-alert {
    margin-bottom: var(--space-xs) !important;
}

.error-hint-label {
    margin-top: calc(var(--space-xs) / 2) !important;
}

/* ==========================================================================
   NAV TABS
   ========================================================================== */


    /* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

    .nav-tabs-block > h2 {
        font-size: 2.25rem !important;
        padding-top: var(--space-md);
        margin-bottom: var(--space-lg) !important;
    }
    /* --------------------------------------------------------------------------
   Kill inherited bullets
   -------------------------------------------------------------------------- */

    .nav-tabs-block ul li::before {
        content: none !important;
        display: none !important;
    }
    /* --------------------------------------------------------------------------
   Remove inherited list-card styling
   -------------------------------------------------------------------------- */

    .nav-tabs-block ul li {
        border: none !important;
        background: transparent !important;
        padding: var(--space-xs) 0 !important;
        border-radius: 0 !important;
        margin-bottom: var(--space-xs) !important;
    }
    /* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

    .nav-tabs-block .tabs {
        margin-bottom: var(--space-md);
    }

        .nav-tabs-block .tabs ul {
            border-bottom: 1px solid var(--border-light);
        }

            .nav-tabs-block .tabs ul li {
                margin-bottom: 0 !important;
            }

        .nav-tabs-block .tabs a {
            color: var(--text-muted);
            border-color: transparent !important;
        }

        .nav-tabs-block .tabs li.is-active a {
            background: rgba(0,255,102,0.08) !important;
            border-color: var(--primary) !important;
            color: var(--primary) !important;
            box-shadow: 0 0 8px rgba(0,255,102,0.15);
        }
    /* --------------------------------------------------------------------------
   Tab Behaviour
   -------------------------------------------------------------------------- */

    .nav-tabs-block .tab-pane {
        display: none;
    }

        .nav-tabs-block .tab-pane.is-active {
            display: block;
        }
    /* --------------------------------------------------------------------------
   Content Area
   -------------------------------------------------------------------------- */

    .nav-tabs-block .tab-content {
        padding-top: var(--space-xs);
        min-height: 280px;
    }
    /* --------------------------------------------------------------------------
   Child Item Layout
   -------------------------------------------------------------------------- */

    .nav-tab-child-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 650px;
    }
        /* Pull content block in */

        .nav-tab-child-item > div {
            width: 100%;
        }
    /* --------------------------------------------------------------------------
   Icon
   -------------------------------------------------------------------------- */

    .nav-tab-child-icon {
        display: block;
        margin: 0 0 var(--space-xs) 0 !important;
        color: var(--primary);
        font-size: 1.5rem !important;
        line-height: 1;
    }
    /* --------------------------------------------------------------------------
   Content List
   -------------------------------------------------------------------------- */

    .nav-tab-child-item ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-tab-child-item li {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-xs) 0 !important;
    }
    /* --------------------------------------------------------------------------
   Explicit Material Bullet
   -------------------------------------------------------------------------- */

    .process-card-bullet-icon {
        color: var(--primary);
        font-size: 1rem;
        flex-shrink: 0;
    }
/*Padding, note, at the end. It overrides the card css*/
.nav-tabs-block.soft-container {
    padding: var(--space-md) !important;
}
/* ==========================================================================
   LINK CATALOG HEADER
   ========================================================================== */

.link-catalog-section {
    text-align: left;
}

    .link-catalog-section .catalog-section-header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: left;
    }

        .link-catalog-section .catalog-section-header h2.title.is-2 {
            color: var(--text-light) !important;
            margin-bottom: var(--space-xs) !important;
        }

        .link-catalog-section .catalog-section-header .subtitle {
            color: var(--text-muted) !important;
            margin-top: 0 !important;
            margin-bottom: var(--space-md) !important;
            padding-bottom: 0 !important;
        }

/* ==========================================================================
   LINK CATALOG
   ========================================================================== */

.link-actions-flex-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.link-action-item-node {
    display: flex;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a.catalog-text-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem;
    padding: 0 !important;
    color: var(--text-main) !important;
    background: transparent !important;
    border: none !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

    a.catalog-text-link:hover {
        color: var(--primary) !important;
    }

/* ==========================================================================
   ICON
   ========================================================================== */

.link-icon-modifier {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .link-icon-modifier .material-icons-round {
        font-size: 20px !important;
        line-height: 1 !important;
        color: var(--primary);
    }

/* ==========================================================================
   TEXT
   ========================================================================== */

.link-text-content {
    display: flex;
    align-items: center;
    line-height: 1;
}
/* ==========================================================================
   ARTICLE TABLES
   ========================================================================== */

table {
    width: 100%;
    margin: var(--space-lg) 0;
    border-collapse: collapse;
    background: var(--bg-alt);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    overflow: hidden;
}

    /* Header Row */

    table thead tr {
        border-bottom: 2px solid var(--primary);
    }

    table th {
        padding: var(--space-md);
        color: var(--primary-vibrant);
        font-weight: 700;
        text-align: left;
        background: rgba(255,255,255,0.01);
    }

    /* Cells */


    table td {
        padding: var(--space-md);
        color: var(--text-main);
        vertical-align: top;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }
            /* Vertical Dividers */

            table th:not(:last-child),
            table td:not(:last-child) {
                border-right: 1px solid rgba(255,255,255,0.05);
            }
        /* Alternating Rows */

        table tbody tr:nth-child(odd) {
            background: rgba(0,255,102,0.03);
        }

        table tbody tr:nth-child(even) {
            background: transparent;
            color: var(--primary);
        }
        /* Make the first body row green */

        table tbody tr:nth-child(odd) td {
            color: var(--primary);
        }
        /* Last Row */

        table tbody tr:last-child td {
            border-bottom: none;
        }
        /* Optional subtle hover */

        table tbody tr:hover {
            background: rgba(255,255,255,0.02);
        }

/* --- Vertical Centering Alignment for Lists with Nested Paragraphs --- */

/* 1. Ensure the list items behave as alignment flex-containers */
.block-wrapper ul li {
    display: flex !important;
    align-items: center !important; /* Force icons and text onto the same horizontal centerline */
    gap: var(--space-xs, 0.35rem) !important; /* Retain clean structural spacing to the text */
}

    /* 2. Flatten out the inner paragraph layout constraints that cause vertical offsets */
    .block-wrapper ul li p {
        margin: 0 !important; /* Strip the paragraph margins forcing the text down */
        padding: 0 !important;
        display: inline !important; /* Ensure it treats text cleanly as an inline stream */
    }