/* ==========================================================================
   Global Reset & Base Styling
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

/* ==========================================================================
   Header & Fixed Navigation System
   ========================================================================== */

/* Master Container */
.site-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 41px; /* Creates headroom space so fixed top bar doesn't overlay your nav on load */
}

/* Top Bar Styling (Gray Part) - Persistent Viewport Tracker */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ededed;
    padding: 8px 55px;
    
    /* Lock to the viewport absolutely independent of parent tags */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 41px;
    box-sizing: border-box;
    z-index: 2100; /* Keeps it above everything else on the page */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dmca-container {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 160px;
}

/* Hide the scrolling header replacement copyright by default */
.top-bar .copyright-replacement {
    position: absolute;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.35s ease;
}

.top-bar .dmca-badge {
    transition: all 0.35s ease;
}

/* Social Icon Layout Adjustments - Safe 28px Spacing Hooks */
.social-links {
    display: flex;
    gap: 28px; 
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Enforces solid black branding colors perfectly */
.social-links a {
    color: #000000 !important;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.social-links a:hover {
    opacity: 0.6;
}

.local-icon {
    height: auto;
    display: block;
}
a[title="Bluesky"] .local-icon { width: 1.1rem; }
a[title="Substack"] .local-icon { width: 1.35rem; }

/* Main Navigation Bar Styling (White Part) - Scrolls Naturally Away */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 20px 55px;
    position: relative;
    z-index: 1900; /* Layered slightly lower so it passes underneath the gray bar smoothly */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Typography Base Styles */
.copyright a {
    font-family: 'Mea Culpa', cursive;
    font-size: 1.6rem; 
    color: #000000;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.copyright a:hover {
    opacity: 0.6;
}

.nav-links {
    display: flex;
    gap: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
}

.nav-links li a {
    font-family: 'Mea Culpa', cursive;
    text-decoration: none;
    color: #000000;
    font-size: 1.6rem; 
    display: block;
    position: relative;
    transition: color 0.2s ease; 
}

.nav-links li a::before {
    content: '';
    position: absolute;
    top: -4px; 
    left: -12px; 
    right: -12px; 
    height: 1px;
    background-color: #004433;
    transition: height 0.25s ease;
}

.nav-links li a:hover { color: #20697F; }
.nav-links li a:hover::before { height: 3px; }


/* ==========================================================================
   ACTIVE SCROLL STATES (Triggered when scrolled past lower header fold)
   ========================================================================== */

/* 1. Animate out the DMCA Badge and fade in the Copyright link in the gray bar */
.header-collapsed .top-bar .dmca-badge {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}

.header-collapsed .top-bar .copyright-replacement {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 2. Pull the social links away from the edge closer toward the horizontal center */
.header-collapsed .social-links {
    transform: translateX(-48vw); 
}

/* 3. Give the floating bar a sleek design pop once active */
.header-collapsed .top-bar {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: rgba(237, 237, 237, 0.98);
}

.header-collapsed .main-nav {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

/* Hide the inner top-bar nav links completely under normal conditions */
.top-bar-nav-links {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: absolute;
    right: 20px; /* Anchors it to the right side instead of the left */
}

.top-bar-nav-links li a {
    font-family: 'Mea Culpa', cursive;
    text-decoration: none;
    color: #000000;
    font-size: 1.4rem; /* Sized down slightly to sit elegantly inside the thin gray bar */
    transition: color 0.2s ease;
}

.top-bar-nav-links li a:hover {
    color: #20697F;
}

/* Reveal the navigation links inside the top bar on scroll */
.header-collapsed .top-bar-nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ==========================================================================
   Banner Section Layout
   ========================================================================== */
.banner-section {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;               
    padding: 45px 65px;    
    background-color: #000000; 
}

.banner-content {
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 145px; 
    background-color: #004433; 
    border-radius: 4px; 
    overflow: visible; 
}

/* Translucent Background Image Layer */
.banner-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('Vinezyl Banner.png') center center no-repeat;
    background-size: cover;
    opacity: 0.05; 
    border-radius: 8px; 
    pointer-events: none; 
}

/* Banner Typography */
.banner-title {
    font-family: 'Mea Culpa', cursive !important; 
    color: #ffffff !important;                   
    font-size: 8rem; 
    font-weight: 550;
    margin: 0;
    padding: 0;
    line-height: 1; 
    letter-spacing: 0.7px;   
    position: relative; 
    z-index: 2; 
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
    user-select: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Responsive adjustment for smaller viewports */
@media (max-width: 992px) {
    .banner-section {
        margin-top: 0;      
        padding: 20px 40px; 
    }
    .banner-title {
        font-size: 4.5rem;
    }
    .banner-content {
        height: 82px;
    }
}


/* ==========================================================================
   FEATURED SECTION STYLES (HARDWARE ANTIALIASING BUG-FIX)
   ========================================================================== */
.featured-section {
    width: 100%;
    box-sizing: border-box;
    padding: 50px 155px;
    background-color: #000000;
}

.featured-main-heading {
    font-family: 'Mea Culpa', cursive;
    color: #00A86B; 
    font-size: 5rem;
    margin: 0 0 35px 0;
    font-weight: 500;
    line-height: 1;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
    align-items: start;
}

.featured-card {
    display: flex;
    flex-direction: column;
}

.featured-title {
    font-family: 'Cinzel', serif;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 400;
    margin: 0 0 12px 0;
    letter-spacing: 1.5px;
}

.featured-desc {
    font-family: Arial, sans-serif;
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0 0 25px 0;
    min-height: 60px; 
}

/* Base Card Container */
.featured-box {
    width: 100%;
    aspect-ratio: 10 / 12;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 30px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: #000000;
    
    /* Strict rendering boundaries to lock layout items to their own paint layers */
    isolation: isolate; 
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
}

/* Layer 1: Clean, unblended background image file */
.featured-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
}

/* Layer 2: Separated Ambient Tint/Gradient Shield Overlay */
.featured-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
}

.featured-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 168, 107, 0.25);
}

/* --- Asset & Gradient Maps Separated across Layer 1 and Layer 2 --- */
.box-zzz::before { background-image: url('Guides Banner.png'); }
.box-zzz::after { background-image: linear-gradient(180deg, rgba(18, 18, 20, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%); }

.box-ampersand::before { background-image: url('Ampersand Banner.png'); }
.box-ampersand::after { background-image: linear-gradient(180deg, rgba(28, 82, 109, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%); }

.box-fyre::before { background-image: url('Fyre Nexus Banner.png'); }
.box-fyre::after { background-image: linear-gradient(180deg, rgba(129, 102, 29, 0.15) 0%, rgba(0, 0, 0, 0.9) 100%); }


/* Center aligned textured buttons styling hook */
.featured-btn {
    font-family: 'Mea Culpa', cursive;
    text-decoration: none;
    color: #00A86B;
    background-color: #001f18;
    padding: 4px 32px;
    font-size: 1.8rem;
    border-radius: 8px;
    border: 1px solid #004433;
    
    /* Crucial layer fix: forces button safely above the image and tint shield overlays */
    position: relative;
    z-index: 10; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    
    /* Hardware acceleration rules specifically for the button */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.featured-btn:hover {
    color: #ffffff;
    background-color: #004433;
    box-shadow: 0 0 15px #00A86B, 0 4px 12px rgba(0, 0, 0, 0.5);
    transform: scale(1.03); 
}

/* Responsive configurations for Featured Section */
@media (max-width: 1200px) {
    .featured-section {
        padding: 40px 65px;
    }
    .featured-grid {
        gap: 25px;
    }
}

@media (max-width: 992px) {
    .featured-section {
        padding: 30px 40px;
    }
    .featured-main-heading {
        font-size: 3.8rem;
        text-align: center;
        margin-bottom: 25px;
    }
    .featured-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .featured-desc {
        min-height: auto;
    }
    .featured-box {
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================================
   PROJECTS SECTION STYLES
   ========================================================================== */
.projects-section {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 155px 60px 155px; 
    background-color: #000000;      
}

/* Centered Top Banner Positioning */
.features-top-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;                    
    max-width: 600px;              
    height: 150px;                 
    margin: 0 auto 50px auto;      
    border-radius: 8px;            
    overflow: hidden;              
}

.top-banner-img {
    width: 100%;                   
    height: 100%;
    display: block;
    object-fit: cover;             
    object-position: center;       
}

/* Features Rows Grid */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; 
    row-gap: 40px;                  
    column-gap: 50px;
    align-items: center;            
}

/* Script Typography Styling */
.feature-label {
    font-family: 'Mea Culpa', cursive;
    color: #ffffff;
    font-size: 4.5rem;
    line-height: 1.1;
    text-align: left;
    user-select: none;
    padding-left: 10px;
    text-decoration: none;
}

.feature-label:hover {
    transition: color 0.3s ease-in-out;
    color: #00A86B;
}

/* Card Container Setup - Less Tall Layout */
.feature-card-wrapper {
    width: 100%;
    max-width: 450px;               
    aspect-ratio: 22.5 / 9;          
    justify-self: end;              
    border-radius: 16px;             
    overflow: hidden;               
    background-color: #000000;
    transition: transform 0.17s ease-in-out; 
}

.feature-card-wrapper:hover {
    transform: scale(0.88);
}

/* Crops slightly from top/bottom while preserving full width sides */
.feature-card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;              
    object-position: center 50%;    
}

/* Responsive adjustments matching your 992px breakpoint rule */
@media (max-width: 992px) {
    .projects-section {
        padding: 20px 40px 40px 40px;
    }

    .features-top-banner {
        width: 100%;               
        height: auto;
        aspect-ratio: 16 / 5;
        margin-bottom: 30px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;  
        row-gap: 25px;
        justify-items: center;
    }
    
    .feature-label {
        text-align: center;
        padding-left: 0;
        font-size: 2.8rem;
    }
    
    .feature-card-wrapper {
        max-width: 100%;            
    }
}


/* ==========================================================================
   ALT PROJECTS SECTION LAYOUT (Project Vista, Liminal)
   ========================================================================== */
.alt-projects-section {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 155px 80px 155px; /* Aligns with sections layout fold */
    background-color: #000000;      
}

.projects-shared-container {
    display: flex;
    flex-direction: column;
    background-color: #ffffff; /* Single, unified white box layout */
    border-radius: 8px;
    padding: 20px 60px;
    box-sizing: border-box;
}

/* Individual Project Row Layout */
.project-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    width: 100%;
}

/* Left Typography Styling */
.project-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-subtitle {
    font-family: 'Cinzel', serif;
    color: #004433; 
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.project-title-link {
    text-decoration: none;
    display: inline-block;
}

.project-title {
    font-family: 'Mea Culpa', cursive;
    color: #004433; 
    font-size: 5rem;
    line-height: 1;
    margin: 0 0 15px 0;
    font-weight: 500;
    transition: color 0.25s ease;
}

.project-title-link:hover .project-title {
    color: #00A86B; 
}

.project-description {
    font-family: Arial, sans-serif;
    color: #004433;
    font-size: 0.95rem;
    margin: 0;
}

/* Right Side Card Styling */
.project-card-wrapper {
    width: 100%;
    max-width: 450px; 
    aspect-ratio: 22.5 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.17s ease-in-out;
}

.project-card-wrapper:hover {
    transform: scale(0.96); 
}

.project-card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Subtle horizontal line to elegantly break up the shared space */
.project-divider {
    border: 0;
    height: 1px;
    background-color: #e0e0e0;
    margin: 0;
    width: 100%;
}

/* Responsive adjustment for the unified multi-row view */
@media (max-width: 992px) {
    .alt-projects-section {
        padding: 20px 40px 40px 40px;
    }

    .projects-shared-container {
        padding: 10px 20px;
    }

    .project-row {
        flex-direction: column;
        text-align: center;
        gap: 25px;
        padding: 40px 0;
    }

    .project-text-block {
        align-items: center;
    }

    .project-title {
        font-size: 3.5rem;
    }

    .project-card-wrapper {
        max-width: 100%;
    }
}

/* ==========================================================================
   CUSTOM PROGRESS BAR & SCROLLBAR TRACK SYSTEM
   ========================================================================== */

/* 1. HIDE DEFAULT BROWSER SCROLLBARS */
html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer/Edge */
}
html::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

/* 2. THE HEADER UNDERLINE PROGRESS BAR */
.main-nav {
    position: relative; 
}

/* ENHANCED HEADER UNDERLINE PROGRESS BAR */
.scroll-progress-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--scroll-progress, 0%); 
    
    /* Thickness configuration for high visibility */
    height: 6px; 
    border-radius: 3px;
    
    /* Vibrant, high-contrast gradient focusing lighter accent in center */
    background: linear-gradient(90deg, #004433 0%, #00A86B 50%, #004433 100%);
    background-size: 100% auto;
    
    /* Amplified Glow Effects: Creates multi-layered neon radiation look */
    box-shadow: 0 0 18px #00A86B, 
                0 0 8px #00A86B, 
                0 0 4px #004433;
    
    z-index: 2000;
    pointer-events: none;
    transition: width 0.1s ease-out;
}

/* Enforces thicker bar to sit nicely when header collapses */
.header-collapsed .scroll-progress-line {
    position: fixed;
    top: 41px; /* Latches exactly to the bottom of the gray top-bar */
    bottom: auto;
}

/* DIAMOND RUNIC SIDE SCROLLBAR SYSTEM WITH POPUPS */

/* Compact layout framework fixed on right margin center */
.runic-scroll-container {
    position: fixed;
    right: 35px; /* Shifted left slightly to make room for popups */
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 250px; 
    z-index: 9999; 
    pointer-events: none; 
}

/* Elegant baseline line lane */
.runic-track {
    position: relative;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.15); 
    margin: 0 auto;
}

/* Polished gold progress element driven via script */
.runic-progress {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 0%; 
    background: #dfb26c; 
    box-shadow: 0 0 12px #dfb26c, 0 0 4px rgba(223, 178, 108, 0.5);
    border-radius: 3px;
    transition: height 0.1s ease-out;
}

/* Stylistic milestone indicator pins transformed into DIAMONDS */
.runic-node {
    position: absolute;
    left: 50%;
    /* Centers node, then rotates square 45 degrees to form perfect diamond */
    transform: translate(-50%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.5);
    cursor: pointer;
    pointer-events: auto; /* Re-enables clicking on diamonds */
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Interactive hover state for diamonds */
.runic-node:hover {
    background: #dfb26c;
    box-shadow: 0 0 8px #dfb26c;
    transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
}

/* THE POPUP TOOLTIP TEXT */
.runic-tooltip {
    position: absolute;
    /* Un-rotates text so it renders right-side up instead of sideways */
    transform: rotate(-45deg); 
    
    /* Absolute alignment anchors it to left side of diamond */
    right: 20px;
    top: -6px;
    
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #dfb26c;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(223, 178, 108, 0.3);
    white-space: nowrap;
    
    /* Animation hooks: hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Reveals popup gracefully when user hovers over diamond node */
.runic-node:hover .runic-tooltip {
    opacity: 1;
    visibility: visible;
}

/* BACK TO TOP BUTTON */
.back-to-top {
    position: fixed;
    bottom: 35px;
    right: 35px; 
    width: 52px;
    height: 52px;
    background-color: #004433; 
    border: none;
    border-radius: 50%; 
    cursor: pointer;
    z-index: 9998; 
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Vector icon scaling and alignment */
.back-to-top-icon {
    width: 22px;
    height: 22px;
    display: block;
}

/* Active Show State */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover Effects */
.back-to-top:hover {
    background-color: #00A86B; 
    box-shadow: 0 0 18px #00A86B, 0 6px 20px rgba(0, 0, 0, 0.4);
    transform: scale(1.08);
}

@media (max-width: 992px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 46px;
        height: 46px;
    }
}

/* ==========================================================================
   SOCIALS INTERACTIVE GRID SYSTEM (Matches image_d1ca04.png Layout)
   ========================================================================== */
.socials-section {
    width: 100%;
    box-sizing: border-box;
    padding: 60px 155px;
    background-color: #000000;
}

.socials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; /* Proportional gap margins from reference images */
}

/* Base Card Styles */
.social-grid-box {
    aspect-ratio: 1.15 / 1; /* Squarish rounded profile card framework */
    border-radius: 28px;    /* Smooth corners seen in image_d1ca04.png */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Distinct alternating tone palette presets */
.bg-dark-emerald {
    background-color: #044933;
}

.bg-light-emerald {
    background-color: #01a86c;
}

/* Core Content alignment cluster */
.social-box-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}

/* Brand Graphic Rules with 3D Interaction space */
.social-grid-icon {
    font-size: 1.6rem;
    color: #000000;
    margin-bottom: 24px;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center center;
}

/* Local asset image controller setup */
.local-svg-icon {
    height: 1.6rem;
    width: auto;
    object-fit: contain;
}

/* Custom Ampersand dual-diamond layout handler */
.ampersand-diamonds {
    display: flex;
    gap: 4px;
}
.ampersand-diamonds .fa-diamond {
    font-size: 0.95rem;
}

/* Custom Signature Script Text settings */
.social-grid-title {
    font-family: 'Mea Culpa', cursive;
    color: #000000;
    font-size: 2.8rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.1;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hidden Dynamic Action Button Configured directly from image_d177ab.png */
.social-grid-btn {
    font-family: 'Mea Culpa', cursive;
    text-decoration: none;
    color: #ffffff;
    background-color: #000000;
    padding: 6px 36px;
    font-size: 1.3rem;
    border-radius: 50px; /* High radius pill styling matching reference sample */
    position: absolute;
    bottom: 22%;
    
    /* Animation initial configurations: tucked transparently out of view */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
}

/* ==========================================================================
   HOVER ACTIONS (Icon Tilt + Button Reveal Sequence)
   ========================================================================== */
.social-grid-box:hover {
    /* Slight card presence lift hint */
    transform: translateY(-2px);
}

/* 1. Rotates and tilts brand icon elegantly on hover */
.social-grid-box:hover .social-grid-icon {
    transform: scale(1.1) rotate(-12deg);
}

/* 2. Moves script titles upward to balance typography space */
.social-grid-box:hover .social-grid-title {
    transform: translateY(-16px);
}

/* 3. Reveals and floats pill navigation buttons upwards from base line */
.social-grid-box:hover .social-grid-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Inner Action Hover Enhancement */
.social-grid-btn:hover {
    background-color: #111111;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Responsive Grid Adapters */
@media (max-width: 1200px) {
    .socials-section {
        padding: 40px 65px;
    }
}

@media (max-width: 992px) {
    .socials-section {
        padding: 30px 40px;
    }
    .socials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .socials-grid {
        grid-template-columns: 1fr;
    }
    .social-grid-box {
        aspect-ratio: 1.3 / 1;
    }
}

/* ==========================================================================
   SITE FOOTER SYSTEM (Matches image_d16869.png Layout)
   ========================================================================== */
.site-footer {
    width: 100%;
    background-color: #000000;
    box-sizing: border-box;
    padding: 40px 155px; /* Keeps consistent safety gutters with page blocks */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* --- Left Column: Social Clusters --- */
.footer-socials {
    display: flex;
    align-items: center;
    gap: 18px; /* Proportional compact tracking from reference image */
    flex: 1;
}

.footer-socials a {
    color: #ffffff !important; /* Vivid white monochrome style seen in image_d16869.png */
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.footer-socials a:hover {
    opacity: 0.7;
}

/* Ensures custom local png assets match white icon fill cleanly */
.footer-local-icon {
    height: 1.1rem;
    width: auto;
    display: block;
    filter: invert(1); /* Flips asset colors to clean white matching font awesome */
}

/* Precise proportional adjustments for specific local assets */
.local-icon-substack {
    height: 1.25rem;
}

/* --- Center Column: Underlined Text link --- */
.footer-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.footer-brand-link {
    font-family: 'Cinzel', serif; /* Minimal serif look to mirror image style */
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
}

/* Creates the crisp structural underline border baseline from layout shot */
.footer-brand-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #ffffff;
    transition: opacity 0.2s ease;
}

.footer-brand-link:hover::after {
    background-color: #00A86B; /* Optional soft brand pop if hovered */
}

.footer-brand-link:hover {
    color: #00A86B;
    transition: color 0.2s ease;
}

/* --- Right Column: White Pill Contact Button --- */
.footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
}

.footer-contact-btn {
    font-family: Arial, sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #000000 !important;
    background-color: #ffffff;
    text-decoration: none;
    padding: 12px 64px; /* Broad width padding creates identical wide pill profile */
    border-radius: 50px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-contact-btn:hover {
    background-color: #e5e5e5;
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   RESPONSIVE FOOTER ADAPTERS
   ========================================================================== */
@media (max-width: 1200px) {
    .site-footer {
        padding: 40px 65px;
    }
}

@media (max-width: 992px) {
    .footer-container {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .footer-socials {
        justify-content: center;
        order: 2; /* Drops socials underneath if view narrows */
    }
    
    .footer-brand {
        order: 1;
    }
    
    .footer-actions {
        justify-content: center;
        order: 3;
        width: 100%;
    }
    
    .footer-contact-btn {
        width: 80%; /* Expand to tap-friendly layout block on mobile elements */
        max-width: 320px;
    }
}

/* ==========================================================================
   GLITCH-FREE MORPHING FOOTER CONTACT BUTTON SYSTEM
   ========================================================================== */

/* 1. Structural Anchor: Keeps a fixed size so the footer grid never moves */
.footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
}

.footer-morph-trigger-wrapper {
    position: relative;
    width: 240px;  /* Matches your wide button width exactly */
    height: 46px; /* Matches your wide button height exactly */
}

/* 2. The Morphing Element: Positioned absolutely relative to the stable anchor */
.footer-contact-morph-btn {
    position: absolute;
    bottom: 0;   /* Pins growth vector to expand upwards natively */
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    
    /* Starting Dimensions */
    width: 240px;
    height: 46px;
    background-color: #ffffff;
    border-radius: 50px;
    padding: 0 20px;
    overflow: hidden;
    
    /* Hardware acceleration layer flags to prevent browser paint stuttering */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: width, height, background-color, border-radius;
    
    /* Smooth transition layout configurations for entering and closing loops */
    transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                height 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                background-color 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                border-radius 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                padding 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 2200;
}

/* Text Label Initial Baseline Tracking */
.morph-btn-label {
    font-family: Arial, sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #000000;
    white-space: nowrap;
    text-align: center;
    transition: color 0.3s ease, margin-top 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    order: 2;
    line-height: 46px; 
}

/* Hidden Dropdown Links Wrapper */
.morph-menu-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    order: 1;
    
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.morph-menu-links a {
    font-family: Arial, sans-serif;
    font-size: 1.85rem;
    font-weight: 500;
    color: #ffffff !important;
    text-decoration: none;
    text-align: right;
    transition: color 0.2s ease, transform 0.2s ease;
    display: block;
    line-height: 1.2;
    padding-right: 15px;
}

.morph-menu-links a:hover {
    color: #00A86B !important;
    transform: translateX(-4px);
}

/* ==========================================================================
   ACTIVE HOVER TRIGGER (Targets wrapper cleanly without altering document flow)
   ========================================================================== */
.footer-morph-trigger-wrapper:hover .footer-contact-morph-btn {
    width: 290px;
    height: 300px;
    background-color: #939393;
    border-radius: 24px;
    padding: 25px 20px 15px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.footer-morph-trigger-wrapper:hover .morph-btn-label {
    color: #000000;
    margin-top: 10px;
    line-height: 1.2;
}

.footer-morph-trigger-wrapper:hover .morph-menu-links {
    max-height: 250px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.3s ease 0.05s, 
                visibility 0.3s ease 0.05s;
}

/* ==========================================================================
   RESPONSIVE ADAPTERS
   ========================================================================== */
@media (max-width: 992px) {
    .footer-actions {
        justify-content: center;
        width: 100%;
    }
    .footer-morph-trigger-wrapper:hover .footer-contact-morph-btn {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }
    .morph-menu-links a {
        text-align: center;
        padding-right: 0;
    }
}

/* ==========================================================================
   Mobile Hamburger Menu Layout Hooks
   ========================================================================== */

/* Hide toggle button on desktop views */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #000000;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 2500;
    transition: color 0.2s ease;
}

/* Mobile Configurations */
@media (max-width: 992px) {
    .menu-toggle {
        display: block; /* Show hamburger button */
    }

    /* Transform menu links container into a sliding overlay drawer */
    .main-nav .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Keeps it hidden off-screen natively */
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background-color: #ffffff;
        box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
        
        /* Layout configuration to list items vertically */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        padding: 40px;
        box-sizing: border-box;
        
        z-index: 2400;
        transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Target state when menu is toggled active */
    .main-nav .nav-links.active {
        right: 0; /* Slide into viewport seamlessly */
    }

    /* Ensure text styling pops nicely on mobile elements */
    .main-nav .nav-links li a {
        font-size: 2.2rem; 
    }
    
    .main-nav .nav-links li a::before {
        display: none; /* Hide desktop top-lines layout element */
    }
}

/* ==========================================================================
   MOBILE HAMBURGER MENU & SCROLL FREEZE LAYOUT
   ========================================================================== */

/* Hamburger Button Icon Styling Hooks */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #000000;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 2500;
    padding: 5px;
    transition: color 0.2s ease;
}

/* Page Constraints when Hamburger Drawer is Active */
/* Page Constraints when Menu View is Active */
body.menu-open {
    overflow: hidden !important; 
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0; /* Ensures viewport context matches coordinate systems properly */
}

/* Hides custom runic scrollbar system cleanly when menu is active */
body.menu-open .runic-scroll-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 992px) {
    /* 1. Force header area to only render lower navigation part layout */
    .site-header {
        margin-top: 0 !important; /* Pulls header content flush to the top edge */
    }
    
    .top-bar {
        display: none !important; /* Hides top bar container on mobile viewports */
    }

    .main-nav {
        position: fixed; /* Locks your main lower header to screen top naturally */
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        box-sizing: border-box;
        padding: 10px 24px;
        z-index: 2300;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Shift main background sections downward so they don't slide under your fixed header */
    .banner-section {
        margin-top: 70px !important;
    }

    /* 2. Reveal Hamburger Icon Hook */
    .menu-toggle {
        display: block;
    }

    /* 3. Transform Navigation System link elements into full screen slide out menu */
    .main-nav .nav-links {
        position: fixed;
        top: 70px; /* Aligns flush beneath the lower header bar baseline */
        right: -100%; /* Keeps container off-screen cleanly by default */
        width: 100%;
        height: calc(100vh - 70px);
        background-color: #ffffff;
        
        /* Flex configuration stack links vertically */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        padding: 40px;
        box-sizing: border-box;
        
        z-index: 2400;
        transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Toggle Slide-in active state framework hook */
    .main-nav .nav-links.active {
        right: 0; /* Slides inside target viewport boundaries smoothly */
    }

    /* Format typography adjustments beautifully inside fullscreen mobile view */
    .main-nav .nav-links li a {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    /* Deactivates desktop hover underline layouts causing offsets on touch devices */
    .main-nav .nav-links li a::before {
        display: none !important;
    }

    /* Freeze header progress line from jumping around on mobile scrolling */
    .scroll-progress-line {
        bottom: 0 !important;
        top: auto !important;
    }
}

/* ==========================================================================
   MOBILE EXPANDED NAVIGATION MODIFIERS & INTERACTION LAYERS
   ========================================================================== */

/* Hamburger Trigger Baseline Layout Elements */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #000000;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 2500;
    padding: 5px;
    transition: color 0.2s ease;
}

/* Structural Backdrop Interceptor & Outside Blur Layer */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 2350; /* Sits cleanly between header navbar layout and responsive drawer */
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: opacity 0.4s ease, visibility 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(8px); /* Controls background glass blur strength value */
    -webkit-backdrop-filter: blur(8px);
}

/* Page Constraints when Menu View is Active */
body.menu-open {
    overflow: hidden !important; /* Disables viewport scrolling completely */
    position: fixed;
    width: 100%;
    height: 100%;
}

@media (max-width: 992px) {
    /* 1. COMPLETELY HIDE THE RUNIC SCROLLBAR TRACK ON MOBILE DEVICES */
    .runic-scroll-container,
    #runicProgress,
    .runic-track,
    .runic-node {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Force mobile top header structures to standard layout boundaries */
    .site-header {
        margin-top: 0 !important;
    }
    
    .top-bar {
        display: none !important;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        box-sizing: border-box;
        padding: 10px 24px;
        z-index: 2400; /* Elevated above background elements */
        background-color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .banner-section {
        margin-top: 70px !important;
    }

    .menu-toggle {
        display: block;
    }

    /* 2. Responsive Sliding Target Menu Drawer container block layout */
    .main-nav .nav-links {
        position: fixed;
        top: 70px;
        right: -100%; /* Keeps container hidden off-canvas */
        width: 75%;
        max-width: 340px;
        height: calc(100vh - 70px);
        background-color: #ffffff;
        box-shadow: -6px 0 20px rgba(0, 0, 0, 0.08);
        
        /* Flex alignment stacks nav routes vertically */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 36px;
        padding: 40px;
        box-sizing: border-box;
        
        z-index: 2450;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Activated Sliding Framework Target States */
    .main-nav .nav-links.active {
        right: 0; /* Brings mobile nav items smoothly into screen space view */
    }

    .main-nav .nav-links li a {
        font-size: 2rem;
        line-height: 1.2;
    }

    /* Clean desktop anchor indicator elements layout overrides */
    .main-nav .nav-links li a::before {
        display: none !important;
    }

    .scroll-progress-line {
        bottom: 0 !important;
        top: auto !important;
    }
}