@font-face {
    font-family: 'DIN Alternate';
    src: url('../fonts/DIN Alternate Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Acta Display';
    src: url('../fonts/Acta Display Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

        body { font-family: 'Lato', sans-serif; }
        .font-serif-custom { font-family: 'Acta Display', serif; }
        .font-din-numbers { font-family: 'DIN Alternate'; }
        .bg-brand { background-color: #C41E3A; }
        .text-brand { color: #C41E3A; }
        .border-brand { border-color: #C41E3A; }
        
        /* Active navbar link */
        nav a.active { color: #C41E3A !important; }
        
        /* Custom scroll behavior */
        html { scroll-behavior: smooth; }
        
        /* Hide mobile menu by default */
        #mobile-menu {
            transform: translateY(-100%);
            transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }
        #mobile-menu.active {
            transform: translateY(0);
        }

        .reveal { opacity: 0; transform: translateY(30px); }

        /* Burger Animation utility classes */
        .burger-active-1 { transform: translateY(8px) rotate(45deg); }
        .burger-active-2 { opacity: 0; }
        .burger-active-3 { transform: translateY(-8px) rotate(-45deg); }
        
        /* Dropdown Menu Styles */
        .dropdown {
            position: relative;
        }
        
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            pointer-events: none;
            z-index: 1000;
            min-width: 320px;
            margin-top: 20px;
        }
        
        .dropdown:hover .dropdown-menu,
        .dropdown-menu:hover {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }
        
        .dropdown-menu::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            right: 0;
            height: 20px;
        }
        
        .dropdown-item {
            transition: all 0.2s ease;
        }
        
        .dropdown-item:hover {
            background-color: #f9fafb;
            transform: translateX(5px);
        }

        /* Mobile Dropdown Styles */
        .mobile-dropdown-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .mobile-dropdown-content.active {
            max-height: 600px;
        }
        
        .mobile-dropdown-toggle svg {
            transition: transform 0.3s ease;
        }
        
        .mobile-dropdown-toggle.active svg {
            transform: rotate(90deg);
        }

        /* Mobile responsive grid */
        @media (max-width: 1023px) {
            .parent {
                display: flex !important;
                flex-direction: column !important;
                min-height: auto !important;
            }
            .div1, .div2, .div3, .div4, .reveal {
                grid-area: unset !important;
            }
        }

        /* Contact Overlay Styles */
        #contact-overlay {
            position: fixed;
            top: 0;
            right: -450px;
            width: 450px;
            height: 100vh;
            background: white;
            box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
            z-index: 200;
            transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            display: flex;
            flex-direction: column;
        }
        
        #contact-overlay.active {
            right: 0;
        }
        
        .overlay-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 199;
        }
        
        .overlay-backdrop.active {
            opacity: 1;
            visibility: visible;
        }
        
        @media (max-width: 480px) {
            #contact-overlay {
                width: 100%;
                right: -100%;
            }
        }

        /* Detail Page & Blog Content Styles */
        .detail-page {
            font-size: 16px;
            line-height: 1.8;
            color: #333;
        }

        .blog-content {
            max-width: 100%;
        }

        /* Blog Content Typography */
        .blog-content .prose {
            color: #333;
        }

        .blog-content .prose h2 {
            font-size: 2rem;
            font-weight: 700;
            color: #C41E3A;
            margin-top: 2.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.3;
        }

        .blog-content .prose h2:first-child {
            margin-top: 0;
        }

        .blog-content .prose h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-top: 2rem;
            margin-bottom: 1rem;
            line-height: 1.4;
        }

        .blog-content .prose p {
            margin-bottom: 1.25rem;
            font-size: 1rem;
            line-height: 1.8;
            color: #4a4a4a;
        }

        .blog-content .prose p.lead {
            font-size: 1.125rem;
            line-height: 1.75;
            color: #666;
            margin-bottom: 2rem;
        }

        /* Bold text styling */
        .blog-content .prose strong,
        .blog-content .prose b {
            font-weight: 700;
            color: #1a1a1a;
        }

        /* Blockquote styling */
        .blog-content .prose blockquote {
            border-left: 4px solid #C41E3A;
            background-color: #f9f9f9;
            padding: 1.5rem 1.5rem 1.5rem 2rem;
            margin: 2rem 0;
            font-style: italic;
            position: relative;
        }

        .blog-content .prose blockquote p {
            margin-bottom: 0;
            color: #2a2a2a;
            font-size: 1.0625rem;
            line-height: 1.75;
        }

        .blog-content .prose blockquote::before {
            content: '"';
            position: absolute;
            left: 1rem;
            top: 0.5rem;
            font-size: 3rem;
            color: #C41E3A;
            opacity: 0.2;
            font-family: Georgia, serif;
            line-height: 1;
        }

        /* List styling - scoped to blog-content */
        .blog-content .prose ul {
            list-style: none;
            padding-left: 0;
            margin: 1.5rem 0;
        }

        .blog-content .prose ul li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 0.875rem;
            line-height: 1.8;
            color: #4a4a4a;
        }

        .blog-content .prose ul li::before {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0.75rem;
            width: 6px;
            height: 6px;
            background-color: #C41E3A;
            border-radius: 50%;
        }

        .blog-content .prose ul li strong {
            color: #1a1a1a;
        }

        /* Ordered lists */
        .blog-content .prose ol {
            counter-reset: item;
            list-style: none;
            padding-left: 0;
            margin: 1.5rem 0;
        }

        .blog-content .prose ol li {
            position: relative;
            padding-left: 2.5rem;
            margin-bottom: 0.875rem;
            line-height: 1.8;
            color: #4a4a4a;
            counter-increment: item;
        }

        .blog-content .prose ol li::before {
            content: counter(item) ".";
            position: absolute;
            left: 0;
            top: 0;
            font-weight: 700;
            color: #C41E3A;
            font-size: 1rem;
        }

        /* Featured Image */
        .blog-content img {
            border-radius: 0;
            margin-bottom: 2rem;
        }

        /* Related Section */
        .blog-content .related-section h3 {
            font-size: 1.75rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 2rem;
        }

        /* Responsive adjustments for blog content */
        @media (max-width: 768px) {
            .blog-content .prose h2 {
                font-size: 1.625rem;
            }

            .blog-content .prose h3 {
                font-size: 1.25rem;
            }

            .blog-content .prose blockquote {
                padding: 1.25rem 1.25rem 1.25rem 1.75rem;
            }

            .blog-content .prose ul li,
            .blog-content .prose ol li {
                padding-left: 1.75rem;
            }
        }