:root { --brand-color: #1a314f; --brand-color-light: #e7e9ed; --brand-color-hover: #1a3a75; }
        body { font-family: 'Roboto', sans-serif; background-color: #ffffff; font-weight: 400; }
        h1, h2, h3, h4, .font-bold { font-weight: 400; }
        .font-extrabold { font-weight: 700; }
        .font-semibold { font-weight: 500; }
        html { scroll-behavior: smooth; }
        .hero-bg { background-image: url("/static/images/cut01.webp"); background-size: cover; background-position: center; }
        .swiper-button-next, .swiper-button-prev { color: var(--brand-color); transition: transform 0.2s ease; }
        .swiper-button-next:hover, .swiper-button-prev:hover { transform: scale(1.1); }
        .swiper-pagination-bullet-active { background-color: var(--brand-color) !important; }
        .solid-btn { background-color: var(--brand-color); transition: background-color 0.3s ease; }
        .solid-btn:hover { background-color: var(--brand-color-hover); }
        .text-brand { color: var(--brand-color); }
        .bg-brand { background-color: var(--brand-color); }
        .bg-brand-light { background-color: var(--brand-color-light); }
        #mobile-menu { max-height: 0; overflow-y: auto; transition: max-height 0.5s ease-in-out; }
        #lightbox { cursor: pointer; transition: opacity 0.3s ease-in-out; }
        #lightbox-img { cursor: default; max-width: 95vw; max-height: 95vh; }
        #message-container {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            opacity: 1;
            transition: opacity 0.5s ease-in-out;
        }
        #message-container.fade-out {
            opacity: 0;
        }
        .dropdown-menu-content {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .main-service-item.active > a {
            background-color: #f3f4f6; /* gray-100 */
            color: var(--brand-color);
        }
        .border-brand-hover {
            border-color: var(--brand-color-hover);
        }

        #progress-container {
            width: 100%;
            height: 4px;
            position: fixed;
            left: 0;
            z-index: 60;
            background-color: transparent;
            transition: top 0.3s ease-in-out;
        }
        #progress-bar {
            height: 100%;
            background-color: var(--brand-color-hover);
            width: 0%;
            transition: width 0.1s linear;
        }


#bio-page #bio-page .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; transition-timing-function: cubic-bezier(0.17, 0.55, 0.55, 1); }
#bio-page #bio-page .reveal.visible { opacity: 1; transform: translateY(0); }
#bio-page .hero-image-mask { mask-image: linear-gradient(to bottom, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 95%, transparent 100%); }
#bio-page #bio-page .text-gradient-accent { color: var(--brand-color); }
#bio-page #bio-page .text-accent-color { color: var(--brand-color-hover); }
#bio-page #bio-page .bg-gradient-line { background: linear-gradient(to right, var(--brand-color), var(--brand-color-hover)); }
#bio-page #bio-page .bg-gradient-circle { background: linear-gradient(135deg, var(--brand-color), var(--brand-color-hover)); }

#bio-page 

       
        #bio-page .text-gradient-accent { color: var(--brand-color); }
        #bio-page .text-accent-color { color: var(--brand-color-hover); }
        #bio-page .bg-gradient-line { background: linear-gradient(to right, var(--brand-color), var(--brand-color-hover)); }
        #bio-page .bg-gradient-circle { background: linear-gradient(135deg, var(--brand-color), var(--brand-color-hover)); }

      

         #bio-page ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

        
        #bio-page .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; transition-timing-function: cubic-bezier(0.17, 0.55, 0.55, 1); }
        #bio-page .reveal.visible { opacity: 1; transform: translateY(0); }
        .hero-image-mask {
            mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
        }

       
#blog-page .prose blockquote {
            border-left: 4px solid #1a314f; 
            padding-left: 1rem;
            margin-left: 0;
            font-style: italic;
            color: #555;
        }
        
        #blog-page .prose p, .prose ul, .prose ol, .prose blockquote {
            font-size: 1.125rem; 
            line-height: 1.77; 
            color: #333; 
        }


#subservice-page .prose blockquote {
    border-left: 4px solid var(--brand-color);
    padding-left: 1rem;
    margin-left: 0;
    font-style: italic;
    color: #555;
}