/* ==========================================================================
   AVIZ STUDIO PORTFOLIO SYSTEM - DESIGN 3 (LUXURY EDITORIAL)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Metrophobic&family=Inter:wght@300;400;500;600&display=swap');

/* --- DESIGN TOKENS --- */
/* Default Light Theme (White, Blue, Gray) */
:root {
    --bg-primary: #F4F6F9;        /* Light blue-tinted cool gray background */
    --bg-secondary: #FFFFFF;      /* Clean solid white card backdrops */
    --bg-tertiary: #E8ECF2;       /* Light border gray */
    --accent-gold: #1800AD;       /* Brand Blue */
    --accent-gold-rgb: 24, 0, 173;
    --text-primary: #121216;      /* Off-black for premium readability */
    --text-muted: #555562;        /* Slate gray for secondary descriptions */
    --white: #FFFFFF;
    --border-color: rgba(24, 0, 173, 0.12); /* Blue-tinted soft gold border */
    --transition-premium: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- RESET & GLOBAL DEFAULTS --- */
* {
    margin: 0;                                                  /* Set margins for external block spacing */
    padding: 0;                                                 /* Set inner padding spacing boundaries */
    box-sizing: border-box;                                     /* Calculate element dimensions including border and padding */
}

html {
    scroll-behavior: smooth;                                    /* Set auto scroll page transition behavior style */
    background-color: var(--bg-primary);                        /* Apply background theme color */
    color: var(--text-primary);                                 /* Apply text foreground color */
    font-family: 'Manrope', sans-serif;                         /* Apply typographic font family design */
    -webkit-font-smoothing: antialiased;                        /* Configure webkit rendering font smoothing antialiasing */
}

body {
    overflow-x: hidden;                                         /* Enforce boundary clipping on horizontal flow axis */
    background-color: var(--bg-primary);                        /* Apply background theme color */
    line-height: 1.6;                                           /* Set vertical typographic line spacing height */
}

/* Typography Rules */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;                     /* Apply typographic font family design */
    font-weight: 500;                                           /* Set font character stroke weight */
    color: var(--text-primary);                                 /* Apply text foreground color */
    letter-spacing: -0.01em;                                    /* Set horizontal character gap spacing */
}

p {
    font-size: 16px;                                            /* Apply typographic character render size */
    font-weight: 400;                                           /* Set font character stroke weight */
    color: var(--text-muted);                                   /* Apply text foreground color */
}

a {
    color: inherit;                                             /* Apply text foreground color */
    text-decoration: none;                                      /* Enforce typographic underline decoration defaults */
}

img {
    pointer-events: none;                                       /* Toggle mouse hover and click interaction handling */
    -webkit-touch-callout: none;                                /* Toggle iOS long-press callout preview menu display */
    -webkit-user-select: none;                                  /* Toggle WebKit specific user selection selection highlight ability */
    user-select: none;                                          /* Toggle user text/image selection highlight ability */
}

/* Page Section Base */
section {
    min-height: 100vh;                                          /* Set minimum layout height */
    width: 100%;                                                /* Set layout width span */
    position: relative;                                         /* Set positioning layout scheme */
    padding: 120px 80px;                                        /* Set inner padding spacing boundaries */
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    overflow: hidden;                                           /* Enforce clipping boundary rules for overflow content */
    border-bottom: 1px solid var(--border-color);               /* Apply bottom border stroke parameters */
}

.section-container {
    width: 100%;                                                /* Set layout width span */
    max-width: 1360px;                                          /* Set maximum boundary width */
    margin: 0 auto;                                             /* Set margins for external block spacing */
    position: relative;                                         /* Set positioning layout scheme */
    z-index: 10;                                                /* Set stack order layer depth */
}

/* Section Header Typography */
.section-meta-tag {
    font-size: 13px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    letter-spacing: 0.25em;                                     /* Set horizontal character gap spacing */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    margin-bottom: 16px;                                        /* Set bottom external spacing */
    display: block;                                             /* Define element layout container type */
}

.section-title {
    font-size: clamp(48px, 6.5vw, 84px);                        /* Apply typographic character render size */
    line-height: 1.05;                                          /* Set vertical typographic line spacing height */
    margin-bottom: 60px;                                        /* Set bottom external spacing */
    font-weight: 400;                                           /* Set font character stroke weight */
}

.section-title span {
    font-family: 'Playfair Display', serif;                     /* Apply typographic font family design */
    font-style: italic;
    color: var(--accent-gold);                                  /* Apply text foreground color */
}

/* --- PREMIUM PAGE LOADER --- */
#loader {
    position: fixed;                                            /* Set positioning layout scheme */
    inset: 0;                                                   /* Position shorthand for all edges */
    background-color: #0A0A0A;                                  /* Set dark cinematic canvas background */
    z-index: 99999;                                             /* Set stack order layer depth */
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    justify-content: center;                                    /* Align flex items along main layout axis */
    align-items: center;                                        /* Align flex items along cross layout axis */
    transition: opacity 0.8s ease, visibility 0.8s;             /* Configure smooth state transition animation rules */
    overflow: hidden;                                           /* Clip any absolute child overflow */
}

/* Background image & gradient container */
.loader-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.15;                                              /* Keep background image subtle */
    pointer-events: none;                                       /* Disable click interactions */
}

/* Atmospheric loader background image with zoom animation */
.loader-bg-img {
    position: absolute;
    inset: 0;
    background-image: url('../images/home/loader_bg.jpg');           /* Reference downloaded local asset */
    background-size: cover;                                     /* Span image dimensions to fill */
    background-position: center;                                /* Center background image alignment */
    animation: slowZoom 20s linear infinite alternate;           /* Continuous slow-zoom animation */
}

/* Gradient overlay to fade edges smoothly */
.loader-bg-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 20%, #0A0A0A 80%); /* Blend radial edges into the background */
}

/* Loader content container */
.loader-content-cluster {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 90%;                                             /* Responsive boundary padding */
    padding: 0 24px;
}

/* Logo container styling */
.loader-logo-svg {
    width: 90px;                                                /* Responsive width */
    height: 112px;                                              /* Responsive height */
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(20px);
    animation: loaderReveal 1.2s forwards cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.loader-svg {
    width: 100%;
    height: 100%;
}

/* Brand Text title under loader */
.loader-brand-title {
    font-family: 'Metrophobic', sans-serif;
    font-size: 32px;                                            /* Balanced text size */
    font-weight: 400;
    letter-spacing: 0.25em;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(20px);
    animation: loaderReveal 1.2s forwards cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

/* Muted divider line */
.loader-divider {
    width: 48px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    margin-bottom: 20px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    animation: dividerReveal 1.2s forwards cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}

/* Brand Subtitle / tags */
.loader-brand-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 10px;                                            /* Small neat tag format */
    font-weight: 300;
    letter-spacing: 0.3em;
    color: #A3A3A3;
    text-transform: uppercase;
    max-width: 500px;
    line-height: 1.8;
    opacity: 0;
    transform: translateY(15px);
    animation: loaderReveal 1.2s forwards cubic-bezier(0.16, 1, 0.3, 1) 1s;
}

.loader-brand-subtitle span {
    color: rgba(255, 255, 255, 0.15);
    margin: 0 6px;
}

/* Loading progress bar container */
.loader-bar {
    position: absolute;
    bottom: 40px;                                               /* Align near the bottom boundary */
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 2;
    overflow: hidden;
}

.loader-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    transform: translateX(-100%);
    animation: loaderProgress 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animations declarations */
@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

@keyframes dividerReveal {
    0% { opacity: 0; transform: scaleX(0); }
    100% { opacity: 1; transform: scaleX(1); }
}

@keyframes loaderReveal {
    to {
        opacity: 1;                                             /* Set element opacity alpha visibility level */
        transform: translateY(0);                               /* Apply dimensional transformations and rotations */
    }
}

@keyframes loaderProgress {
    to {
        transform: translateX(0);
    }
}

/* Responsive adjustment media queries */
@media (max-width: 768px) {
    .loader-logo-svg {
        width: 75px;
        height: 93px;
        margin-bottom: 24px;
    }
    .loader-brand-title {
        font-size: 24px;
        letter-spacing: 0.2em;
        margin-bottom: 12px;
    }
    .loader-brand-subtitle {
        font-size: 8px;
        letter-spacing: 0.2em;
        max-width: 280px;
    }
    .loader-brand-subtitle span {
        margin: 0 3px;
    }
}

body.loading-active {
    overflow: hidden;                                           /* Enforce clipping boundary rules for overflow content */
}

/* Anti-Flash Session Loader Skip overrides */
.loader-skipped #loader {
    display: none !important;                                   /* Define element layout container type */
}

.loader-skipped body.loading-active {
    overflow: visible !important;                               /* Enforce clipping boundary rules for overflow content */
}

/* --- NAVIGATION MENU SYSTEM --- */
nav {
    position: fixed;                                            /* Set positioning layout scheme */
    top: 0;                                                     /* Position offset from top edge */
    left: 0;                                                    /* Position offset from left edge */
    width: 100%;                                                /* Set layout width span */
    padding: 30px 80px;                                         /* Set inner padding spacing boundaries */
    display: flex;                                              /* Define element layout container type */
    justify-content: space-between;                             /* Align flex items along main layout axis */
    align-items: center;                                        /* Align flex items along cross layout axis */
    z-index: 9999;                                              /* Set stack order layer depth */
    transition: background 0.4s, padding 0.4s;                  /* Configure smooth state transition animation rules */
    background: linear-gradient(to bottom, rgba(15, 15, 16, 0.8), transparent);    /* Configure background color and image parameters */
    backdrop-filter: blur(10px);
}

nav.nav-scrolled {
    padding: 20px 80px;                                         /* Set inner padding spacing boundaries */
    background-color: rgba(15, 15, 16, 0.95);                   /* Apply background theme color */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);         /* Apply bottom border stroke parameters */
}

.nav-logo {
    display: flex;                                              /* Align logo image and text side-by-side */
    align-items: center;                                        /* Center align items vertically */
    gap: 12px;                                                  /* Set spacing gap between logo image and text */
    text-decoration: none;                                      /* Remove underline */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.nav-logo-text {
    font-family: 'Metrophobic', sans-serif !important;          /* Force Metrophobic branding font */
    font-size: 20px !important;                                 /* Force balanced text size next to logo image */
    font-weight: 400 !important;                                 /* Force font weight thickness */
    letter-spacing: 0.25em !important;                           /* Force letter-spacing matching the preloader */
    color: #FFFFFF !important;                                  /* Force logo text pure white for light theme */
    text-transform: uppercase !important;                       /* Force uppercase typography rendering */
    transition: var(--transition-premium);                      /* Configure hover transition animations */
}

.dark-theme .nav-logo-text {
    color: var(--accent-gold) !important;                       /* Force logo text gold in dark theme */
}

.nav-logo:hover {
    opacity: 0.85;                                              /* Set element opacity alpha visibility level */
}

.nav-logo-img {
    height: 52px;                                               /* Constrain logo height to be larger and highly visible */
    width: auto;                                                /* Auto calculate proportional width */
    object-fit: contain;                                        /* Maintain aspect ratio */
    display: block;                                             /* Define element layout container type */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    filter: brightness(0) invert(1);                            /* Convert logo to clean solid white silhouette on dark header */
}

.nav-links {
    display: flex;                                              /* Define element layout container type */
    gap: 48px;                                                  /* Define spacing gap between sibling child elements */
    list-style: none;                                           /* Configure list item bullet decorators overrides */
}

.nav-links a {
    font-size: 14px;                                            /* Apply typographic character render size */
    font-weight: 500;                                           /* Set font character stroke weight */
    letter-spacing: 0.15em;                                     /* Set horizontal character gap spacing */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    color: var(--text-muted);                                   /* Apply text foreground color */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    position: relative;                                         /* Set positioning layout scheme */
    padding-bottom: 4px;                                        /* Set bottom internal padding spacing */
}

.nav-links a::after {
    content: '';                                                /* Define generated pseudo-element marker content */
    position: absolute;                                         /* Set positioning layout scheme */
    bottom: 0;                                                  /* Position offset from bottom edge */
    left: 0;                                                    /* Position offset from left edge */
    width: 0;                                                   /* Set layout width span */
    height: 1px;                                                /* Set layout height span */
    background-color: var(--accent-gold);                       /* Apply background theme color */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.nav-links a:hover {
    color: var(--text-primary);                                 /* Apply text foreground color */
}

.nav-links a:hover::after {
    width: 100%;                                                /* Set layout width span */
}

/* Hamburger toggle for mobile/tablets */
.hamburger-btn {
    display: none;                                              /* Define element layout container type */
    background: none;                                           /* Configure background color and image parameters */
    border: none;                                               /* Apply border stroke parameters */
    cursor: pointer;                                            /* Define mouse cursor visual pointer style */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    gap: 6px;                                                   /* Define spacing gap between sibling child elements */
    z-index: 10000;                                             /* Set stack order layer depth */
    width: 30px;                                                /* Set layout width span */
    height: 24px;                                               /* Set layout height span */
    justify-content: center;                                    /* Align flex items along main layout axis */
}

.hamburger-bar {
    width: 100%;                                                /* Set layout width span */
    height: 1.5px;                                              /* Set layout height span */
    background-color: var(--text-primary);                      /* Apply background theme color */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

/* --- HERO SECTION --- */
#home {
    padding: 0;                                                 /* Set inner padding spacing boundaries */
    min-height: 100vh;                                          /* Set minimum layout height */
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    position: relative;                                         /* Set positioning layout scheme */
}

.hero-background {
    position: absolute;                                         /* Set positioning layout scheme */
    inset: 0;                                                   /* Position shorthand for all edges */
    z-index: 1;                                                 /* Set stack order layer depth */
    overflow: hidden;                                           /* Enforce clipping boundary rules for overflow content */
}

.hero-background::after {
    content: '';                                                /* Define generated pseudo-element marker content */
    position: absolute;                                         /* Set positioning layout scheme */
    inset: 0;                                                   /* Position shorthand for all edges */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.6) 100%) !important;    /* Configure background color and image parameters */
    z-index: 2;                                                 /* Set stack order layer depth */
}

.hero-bg-img {
    width: 100%;                                                /* Set layout width span */
    height: 100%;                                               /* Set layout height span */
    object-fit: cover;                                          /* Determine image fill resize mapping behavior */
    opacity: 0.85 !important;                                   /* Set element opacity alpha visibility level */
    transform: scale(1.05);                                     /* Apply dimensional transformations and rotations */
    animation: zoomBg 10s ease-out forwards;                    /* Apply keyframe animation timeline rules */
}

@keyframes zoomBg {
    to {
        transform: scale(1);                                    /* Apply dimensional transformations and rotations */
    }
}

.hero-content {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    align-items: flex-start;                                    /* Align flex items along cross layout axis */
    padding: 0 80px;                                            /* Set inner padding spacing boundaries */
    width: 100%;                                                /* Set layout width span */
    max-width: 1360px;                                          /* Set maximum boundary width */
    margin: 0 auto;                                             /* Set margins for external block spacing */
    position: relative;                                         /* Set positioning layout scheme */
    z-index: 10;                                                /* Set stack order layer depth */
}

.hero-badge {
    font-size: 13px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    letter-spacing: 0.3em;                                      /* Set horizontal character gap spacing */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    margin-bottom: 24px;                                        /* Set bottom external spacing */
}

.hero-title {
    font-size: clamp(40px, 5.5vw, 85px);                         /* Apply typographic character render size */
    line-height: 0.95;                                          /* Set vertical typographic line spacing height */
    font-weight: 400;                                           /* Set font character stroke weight */
    margin-bottom: 36px;                                        /* Set bottom external spacing */
    max-width: 900px;                                           /* Set maximum boundary width */
}

.hero-title span {
    font-family: 'Playfair Display', serif;                     /* Apply typographic font family design */
    font-style: italic;
    color: var(--accent-gold);                                  /* Apply text foreground color */
}

.hero-sub-text {
    font-size: 18px;                                            /* Apply typographic character render size */
    color: var(--text-muted);                                   /* Apply text foreground color */
    max-width: 580px;                                           /* Set maximum boundary width */
    margin-bottom: 48px;                                        /* Set bottom external spacing */
}

.hero-scroll-btn {
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    gap: 16px;                                                  /* Define spacing gap between sibling child elements */
    font-size: 12px;                                            /* Apply typographic character render size */
    letter-spacing: 0.2em;                                      /* Set horizontal character gap spacing */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    cursor: pointer;                                            /* Define mouse cursor visual pointer style */
}

.hero-scroll-line {
    width: 40px;                                                /* Set layout width span */
    height: 1px;                                                /* Set layout height span */
    background-color: var(--accent-gold);                       /* Apply background theme color */
    position: relative;                                         /* Set positioning layout scheme */
    overflow: hidden;                                           /* Enforce clipping boundary rules for overflow content */
}

.hero-scroll-line::after {
    content: '';                                                /* Define generated pseudo-element marker content */
    position: absolute;                                         /* Set positioning layout scheme */
    top: 0;                                                     /* Position offset from top edge */
    left: 0;                                                    /* Position offset from left edge */
    width: 100%;                                                /* Set layout width span */
    height: 100%;                                               /* Set layout height span */
    background-color: var(--text-primary);                      /* Apply background theme color */
    transform: translateX(-100%);                               /* Apply dimensional transformations and rotations */
    animation: animateLine 2s infinite cubic-bezier(0.16, 1, 0.3, 1);    /* Apply keyframe animation timeline rules */
}

@keyframes animateLine {
    0% {
        transform: translateX(-100%);                           /* Apply dimensional transformations and rotations */
    }
    50% {
        transform: translateX(0);                               /* Apply dimensional transformations and rotations */
    }
    100% {
        transform: translateX(100%);                            /* Apply dimensional transformations and rotations */
    }
}

/* --- ABOUT SECTION --- */
/* Simple and elegant asymmetric block layout for company presentation */
.about-grid {
    display: grid;                                              /* Define element layout container type */
    grid-template-columns: 1fr 1.2fr;                           /* Define column grid track columns rules */
    gap: 80px;                                                  /* Define spacing gap between sibling child elements */
    align-items: flex-start;                                    /* Align flex items along cross layout axis */
}

/* Typographic values layout on the left */
.about-values-col {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    gap: 40px;                                                  /* Define spacing gap between sibling child elements */
}

/* Asymmetric highlight quote styling */
.about-lead-quote {
    font-family: 'Playfair Display', serif;                     /* Apply typographic font family design */
    font-size: clamp(32px, 4vw, 48px);                          /* Apply typographic character render size */
    line-height: 1.15;                                          /* Set vertical typographic line spacing height */
    font-weight: 400;                                           /* Set font character stroke weight */
    color: var(--text-primary);                                 /* Apply text foreground color */
    margin: 0;                                                  /* Set margins for external block spacing */
}

/* Compact stats list container */
.about-stats-grid {
    display: grid;                                              /* Define element layout container type */
    grid-template-columns: repeat(2, 1fr);                      /* Define column grid track columns rules */
    gap: 24px;                                                  /* Define spacing gap between sibling child elements */
    border-top: 1px solid var(--border-color);                  /* Apply top border stroke parameters */
    padding-top: 32px;                                          /* Set top internal padding spacing */
}

/* Individual statistical metrics container */
.about-stat-item {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    gap: 8px;                                                   /* Define spacing gap between sibling child elements */
}

/* Bold stats count label */
.about-stat-num {
    font-family: 'Playfair Display', serif;                     /* Apply typographic font family design */
    font-size: clamp(40px, 5vw, 56px);                          /* Apply typographic character render size */
    font-weight: 500;                                           /* Set font character stroke weight */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    line-height: 1.0;                                           /* Set vertical typographic line spacing height */
}

/* Descriptive metrics explanation label */
.about-stat-label {
    font-size: 13px;                                            /* Apply typographic character render size */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    letter-spacing: 0.15em;                                     /* Set horizontal character gap spacing */
    color: var(--text-muted);                                   /* Apply text foreground color */
    font-weight: 600;                                           /* Set font character stroke weight */
}

/* Narrative content layout column on the right */
.about-desc-col {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    align-items: flex-start;                                    /* Align flex items along cross layout axis */
    gap: 24px;                                                  /* Define spacing gap between sibling child elements */
}

/* Narrative paragraph styling */
.about-desc-col p {
    font-size: 17px;                                            /* Apply typographic character render size */
    line-height: 1.8;                                           /* Set vertical typographic line spacing height */
    color: var(--text-muted);                                   /* Apply text foreground color */
    margin: 0;                                                  /* Set margins for external block spacing */
}

/* Signature block */
.about-signature {
    font-family: 'Playfair Display', serif;                     /* Apply typographic font family design */
    font-style: italic;                                         /* Apply italic typography font styling */
    font-size: 20px;                                            /* Apply typographic character render size */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    border-top: 1px solid var(--border-color);                  /* Apply top border stroke parameters */
    padding-top: 16px;                                          /* Set top internal padding spacing */
    width: 100%;                                                /* Set layout width span */
    max-width: 240px;                                           /* Set maximum boundary width */
    margin-top: 16px;                                           /* Set top external spacing */
}


/* --- SERVICES SECTION --- */
/* Grid container holding three premium service cards */
.services-grid {
    display: grid;                                              /* Define element layout container type */
    grid-template-columns: repeat(3, 1fr);                      /* Define column grid track columns rules */
    gap: 40px;                                                  /* Define spacing gap between sibling child elements */
    width: 100%;                                                /* Set layout width span */
}

/* Individual services visual card */
.services-card {
    background-color: var(--bg-secondary);                      /* Apply background theme color */
    border: 1px solid var(--border-color);                      /* Apply border stroke parameters */
    padding: 60px 48px;                                         /* Set inner padding spacing boundaries */
    position: relative;                                         /* Set positioning layout scheme */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    justify-content: space-between;                             /* Align flex items along main layout axis */
    min-height: 380px;                                          /* Set minimum layout height */
}

/* services card slide-up float and shadow transitions */
.services-card:hover {
    transform: translateY(-8px);                                /* Apply dimensional transformations and rotations */
    border-color: var(--accent-gold);                           /* Apply borders color scheme value */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);                 /* Apply outer box shadow dimensional depth */
}

/* services card header containing indicator badge */
.services-card-header {
    display: flex;                                              /* Define element layout container type */
    justify-content: space-between;                             /* Align flex items along main layout axis */
    align-items: flex-start;                                    /* Align flex items along cross layout axis */
    margin-bottom: 30px;                                        /* Set bottom external spacing */
}

/* Services card serial index badge */
.services-card-badge {
    font-size: 14px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    letter-spacing: 0.1em;                                      /* Set horizontal character gap spacing */
}

/* Title text inside services card */
.services-card-title {
    font-size: 28px;                                            /* Apply typographic character render size */
    line-height: 1.2;                                           /* Set vertical typographic line spacing height */
    margin-bottom: 16px;                                        /* Set bottom external spacing */
    font-weight: 500;                                           /* Set font character stroke weight */
    color: var(--text-primary);                                 /* Apply text foreground color */
}

/* Body description inside services card */
.services-card-desc {
    font-size: 15px;                                            /* Apply typographic character render size */
    line-height: 1.6;                                           /* Set vertical typographic line spacing height */
    color: var(--text-muted);                                   /* Apply text foreground color */
}

/* --- PROJECT CATEGORIES SHOWCASE --- */
#projects {
    padding-bottom: 80px;                                       /* Set bottom internal padding spacing */
}

.categories-grid {
    display: grid;                                              /* Define element layout container type */
    grid-template-columns: repeat(3, 1fr);                      /* Define column grid track columns rules */
    gap: 30px;                                                  /* Define spacing gap between sibling child elements */
    margin-top: 20px;                                           /* Set top external spacing */
}

.category-card {
    position: relative;                                         /* Set positioning layout scheme */
    aspect-ratio: 3 / 4;                                        /* Enforce fixed proportional aspect ratio */
    overflow: hidden;                                           /* Enforce clipping boundary rules for overflow content */
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    justify-content: flex-end;                                  /* Align flex items along main layout axis */
    padding: 48px;                                              /* Set inner padding spacing boundaries */
    border: 1px solid var(--border-color);                      /* Apply border stroke parameters */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.category-card::after {
    content: '';                                                /* Define generated pseudo-element marker content */
    position: absolute;                                         /* Set positioning layout scheme */
    inset: 0;                                                   /* Position shorthand for all edges */
    background: linear-gradient(to bottom, rgba(15, 15, 16, 0) 40%, rgba(15, 15, 16, 0.95) 95%);    /* Configure background color and image parameters */
    z-index: 2;                                                 /* Set stack order layer depth */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.category-card-img-wrap {
    position: absolute;                                         /* Set positioning layout scheme */
    inset: 0;                                                   /* Position shorthand for all edges */
    z-index: 1;                                                 /* Set stack order layer depth */
    overflow: hidden;                                           /* Enforce clipping boundary rules for overflow content */
}

.category-card-img-wrap img {
    width: 100%;                                                /* Set layout width span */
    height: 100%;                                               /* Set layout height span */
    object-fit: cover;                                          /* Determine image fill resize mapping behavior */
    filter: grayscale(100%);                                    /* Apply graphics adjustments filter overlays */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.category-card:hover {
    border-color: var(--accent-gold);                           /* Apply borders color scheme value */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);                 /* Apply outer box shadow dimensional depth */
}

.category-card:hover .category-card-img-wrap img {
    filter: grayscale(0%);                                      /* Apply graphics adjustments filter overlays */
    transform: scale(1.05);                                     /* Apply dimensional transformations and rotations */
}

.category-card:hover::after {
    background: linear-gradient(to bottom, rgba(15, 15, 16, 0.2) 30%, rgba(15, 15, 16, 0.98) 95%);    /* Configure background color and image parameters */
}

.category-card-content {
    position: relative;                                         /* Set positioning layout scheme */
    z-index: 10;                                                /* Set stack order layer depth */
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    align-items: flex-start;                                    /* Align flex items along cross layout axis */
}

.category-card-count {
    font-size: 12px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    letter-spacing: 0.2em;                                      /* Set horizontal character gap spacing */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    margin-bottom: 12px;                                        /* Set bottom external spacing */
}

.category-card-title {
    font-size: 36px;                                            /* Apply typographic character render size */
    line-height: 1.1;                                           /* Set vertical typographic line spacing height */
    font-weight: 400;                                           /* Set font character stroke weight */
    margin-bottom: 24px;                                        /* Set bottom external spacing */
    color: var(--text-primary);                                 /* Apply text foreground color */
}

.category-card-link {
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    gap: 12px;                                                  /* Define spacing gap between sibling child elements */
    font-size: 11px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    letter-spacing: 0.15em;                                     /* Set horizontal character gap spacing */
    color: var(--white);                                        /* Apply text foreground color */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.category-card-link svg {
    width: 16px;                                                /* Set layout width span */
    height: 16px;                                               /* Set layout height span */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.category-card:hover .category-card-link {
    color: var(--accent-gold);                                  /* Apply text foreground color */
}

.category-card:hover .category-card-link svg {
    transform: translateX(4px);                                 /* Apply dimensional transformations and rotations */
    stroke: var(--accent-gold);                                 /* Define SVG outline stroke color */
}

/* --- CONTACT SECTION --- */
#contact {
    background-color: var(--bg-secondary);                      /* Apply background theme color */
    padding: 120px 80px;                                        /* Set inner padding spacing boundaries */
    min-height: 70vh;                                           /* Set minimum layout height */
}

.contact-wrap {
    display: grid;                                              /* Define element layout container type */
    grid-template-columns: 1fr 1.2fr;                           /* Define column grid track columns rules */
    gap: 100px;                                                 /* Define spacing gap between sibling child elements */
    align-items: center;                                        /* Align flex items along cross layout axis */
}

.contact-left-col h2 {
    font-size: clamp(38px, 5.5vw, 68px);                        /* Apply typographic character render size */
    line-height: 1.05;                                          /* Set vertical typographic line spacing height */
    margin-bottom: 30px;                                        /* Set bottom external spacing */
}

.contact-left-col h2 span {
    font-family: 'Playfair Display', serif;                     /* Apply typographic font family design */
    font-style: italic;
    color: var(--accent-gold);                                  /* Apply text foreground color */
}

.contact-left-col p {
    font-size: 16px;                                            /* Apply typographic character render size */
    max-width: 450px;                                           /* Set maximum boundary width */
}

.contact-right-col {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    gap: 48px;                                                  /* Set vertical gap spacing between primaries and socials */
}

.contact-primaries {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    gap: 32px;                                                  /* Define spacing gap between sibling primary contact items */
}

.contact-socials-block {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    gap: 20px;                                                  /* Set spacing gap between label and icon row */
    border-top: 1px solid var(--border-color);                  /* Apply separator line above social section */
    padding-top: 40px;                                          /* Set spacing below separator */
}

.socials-label {
    font-size: 12px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    letter-spacing: 0.15em;                                     /* Set horizontal character gap spacing */
    color: var(--text-muted);                                   /* Apply text foreground color */
}

.social-icons-row {
    display: flex;                                              /* Define element layout container type */
    gap: 16px;                                                  /* Set horizontal gap spacing between icons */
    align-items: center;                                        /* Align icons vertically centered */
}

.social-icon-btn {
    width: 52px;                                                /* Set layout width span */
    height: 52px;                                               /* Set layout height span */
    border-radius: 50%;                                         /* Apply circular curvature radius */
    background: var(--bg-tertiary);                             /* Configure background color */
    border: 1px solid var(--border-color);                      /* Apply border stroke parameters */
    display: flex;                                              /* Center align contents */
    align-items: center;                                        /* Align items vertically centered */
    justify-content: center;                                    /* Align items horizontally centered */
    color: var(--text-muted);                                   /* Default muted icon color */
    transition: var(--transition-premium);                      /* Configure premium hover animations */
}

.social-icon-btn svg {
    width: 20px;                                                /* Set layout width span */
    height: 20px;                                               /* Set layout height span */
}


.social-icon-btn:hover {
    background-color: var(--accent-gold);                       /* Change background color on hover */
    color: var(--bg-primary);                                   /* Change SVG color on hover */
    border-color: var(--accent-gold);                           /* Sync border color on hover */
    transform: translateY(-4px);                                /* Subtle micro-lift on hover */
    box-shadow: 0 10px 20px rgba(var(--accent-gold-rgb), 0.15); /* Soft premium gold drop shadow */
}

.contact-item {
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    gap: 24px;                                                  /* Define spacing gap between sibling child elements */
}

.contact-icon-box {
    width: 60px;                                                /* Set layout width span */
    height: 60px;                                               /* Set layout height span */
    border-radius: 50%;                                         /* Apply border corner curvature radius */
    background: var(--bg-tertiary);                             /* Configure background color and image parameters */
    border: 1px solid var(--border-color);                      /* Apply border stroke parameters */
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    justify-content: center;                                    /* Align flex items along main layout axis */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    flex-shrink: 0;                                             /* Enforce shrink index factor under pressure */
}

.contact-icon-box svg {
    width: 20px;                                                /* Set layout width span */
    height: 20px;                                               /* Set layout height span */
}

.contact-item-info {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
}

.contact-item-label {
    font-size: 12px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    letter-spacing: 0.15em;                                     /* Set horizontal character gap spacing */
    color: var(--text-muted);                                   /* Apply text foreground color */
    margin-bottom: 4px;                                         /* Set bottom external spacing */
}

.contact-item-value {
    font-size: 18px;                                            /* Apply typographic character render size */
    font-weight: 500;                                           /* Set font character stroke weight */
    color: var(--text-primary);                                 /* Apply text foreground color */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    border-bottom: 1px solid transparent;                       /* Apply bottom border stroke parameters */
    padding-bottom: 2px;                                        /* Set bottom internal padding spacing */
}

.contact-item:hover .contact-icon-box {
    background-color: var(--accent-gold);                       /* Apply background theme color */
    color: var(--bg-primary);                                   /* Apply text foreground color */
    transform: scale(1.05);                                     /* Apply dimensional transformations and rotations */
}

.contact-item:hover .contact-item-value {
    color: var(--accent-gold);                                  /* Apply text foreground color */
    border-bottom-color: var(--accent-gold);
}

/* --- FOOTER SECTION --- */
footer {
    background-color: var(--bg-primary);                        /* Apply background theme color */
    padding: 40px 80px;                                         /* Set inner padding spacing boundaries */
    border-top: 1px solid var(--border-color);                  /* Apply top border stroke parameters */
}

.footer-content {
    display: flex;                                              /* Define element layout container type */
    justify-content: space-between;                             /* Align flex items along main layout axis */
    align-items: center;                                        /* Align flex items along cross layout axis */
    width: 100%;                                                /* Set layout width span */
    max-width: 1360px;                                          /* Set maximum boundary width */
    margin: 0 auto;                                             /* Set margins for external block spacing */
}

.footer-copy {
    font-size: 14px;                                            /* Apply typographic character render size */
    color: var(--text-muted);                                   /* Apply text foreground color */
}

.footer-dev {
    font-size: 14px;                                            /* Apply typographic character render size */
    color: var(--text-muted);                                   /* Apply text foreground color */
}

.footer-dev a {
    color: var(--accent-gold);                                  /* Apply text foreground color */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.footer-dev a:hover {
    border-bottom: 1px solid var(--accent-gold);                /* Apply bottom border stroke parameters */
}

/* --- LIGHTBOX (PHOTO VIEWER SYSTEM) --- */
#lightbox {
    position: fixed;                                            /* Set positioning layout scheme */
    inset: 0;                                                   /* Position shorthand for all edges */
    background-color: rgba(15, 15, 16, 0.98);                   /* Apply background theme color */
    z-index: 999999;                                            /* Set stack order layer depth */
    display: none;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    justify-content: center;                                    /* Align flex items along main layout axis */
    opacity: 0;                                                 /* Set element opacity alpha visibility level */
    transition: opacity 0.5s ease;                              /* Configure smooth state transition animation rules */
}

#lightbox.active {
    display: flex;                                              /* Define element layout container type */
    opacity: 1;                                                 /* Set element opacity alpha visibility level */
}

.lightbox-content-wrapper {
    position: relative;                                         /* Set positioning layout scheme */
    width: 90%;                                                 /* Set layout width span */
    height: 85%;                                                /* Set layout height span */
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    justify-content: center;                                    /* Align flex items along main layout axis */
    z-index: 10;                                                /* Set stack order layer depth */
}

.lightbox-img {
    max-width: 90vw;                                            /* Constrain image width directly relative to viewport width */
    max-height: 80vh;                                           /* Constrain image height directly relative to viewport height */
    width: auto;                                                /* Allow auto scaling width */
    height: auto;                                               /* Allow auto scaling height */
    object-fit: contain;                                        /* Determine image fill resize mapping behavior */
    border: 1px solid var(--border-color);                      /* Apply border stroke parameters */
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);                 /* Apply outer box shadow dimensional depth */
    transition: opacity 0.3s ease;                              /* Configure smooth state transition animation rules */
}

.lightbox-close-btn {
    position: absolute;                                         /* Set positioning layout scheme */
    top: -50px;                                                 /* Position offset from top edge */
    right: 0;                                                   /* Position offset from right edge */
    background: none;                                           /* Configure background color and image parameters */
    border: none;                                               /* Apply border stroke parameters */
    cursor: pointer;                                            /* Define mouse cursor visual pointer style */
    color: var(--white);                                        /* Apply text foreground color */
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    justify-content: center;                                    /* Align flex items along main layout axis */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    width: 44px;                                                /* Set layout width span */
    height: 44px;                                               /* Set layout height span */
    z-index: 20;                                                /* Set stack order layer depth */
}

.lightbox-close-btn:hover {
    color: var(--accent-gold);                                  /* Apply text foreground color */
    transform: rotate(90deg) scale(1.1);                        /* Apply dimensional transformations and rotations */
}

.lightbox-close-btn svg {
    width: 26px;                                                /* Set layout width span */
    height: 26px;                                               /* Set layout height span */
}

/* Lightbox Navigation Buttons */
.lightbox-arrow {
    position: fixed;                                            /* Set positioning layout scheme */
    top: 50%;                                                   /* Position offset from top edge */
    transform: translateY(-50%);                                /* Apply dimensional transformations and rotations */
    background: rgba(22, 22, 24, 0.5);                          /* Configure background color and image parameters */
    border: 1px solid rgba(255, 255, 255, 0.1);                 /* Apply border stroke parameters */
    color: var(--white);                                        /* Apply text foreground color */
    width: 56px;                                                /* Set layout width span */
    height: 56px;                                               /* Set layout height span */
    border-radius: 50%;                                         /* Apply border corner curvature radius */
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    justify-content: center;                                    /* Align flex items along main layout axis */
    cursor: pointer;                                            /* Define mouse cursor visual pointer style */
    z-index: 9999999;                                           /* Set stack order layer depth */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    backdrop-filter: blur(10px);
}

.lightbox-arrow:hover {
    background: var(--accent-gold);                             /* Configure background color and image parameters */
    color: var(--bg-primary);                                   /* Apply text foreground color */
    border-color: var(--accent-gold);                           /* Apply borders color scheme value */
    transform: translateY(-50%) scale(1.1);                     /* Apply dimensional transformations and rotations */
}

.lightbox-arrow.prev-btn {
    left: 40px;                                                 /* Position offset from left edge */
}

.lightbox-arrow.next-btn {
    right: 40px;                                                /* Position offset from right edge */
}

.lightbox-arrow svg {
    width: 24px;                                                /* Set layout width span */
    height: 24px;                                               /* Set layout height span */
}

/* Lightbox Dots Indicator */
.lightbox-dots {
    position: absolute;                                         /* Set positioning layout scheme */
    bottom: 30px;                                               /* Position offset from bottom edge */
    left: 50%;                                                  /* Position offset from left edge */
    transform: translateX(-50%);                                /* Apply dimensional transformations and rotations */
    display: flex;                                              /* Define element layout container type */
    gap: 12px;                                                  /* Define spacing gap between sibling child elements */
    z-index: 9999999;                                           /* Set stack order layer depth */
}

.lightbox-dot {
    width: 8px;                                                 /* Set layout width span */
    height: 8px;                                                /* Set layout height span */
    border-radius: 50%;                                         /* Apply border corner curvature radius */
    background-color: rgba(255, 255, 255, 0.35);                /* Apply background theme color */
    cursor: pointer;                                            /* Define mouse cursor visual pointer style */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.lightbox-dot.active {
    background-color: var(--accent-gold);                       /* Apply background theme color */
    transform: scale(1.25);                                     /* Apply dimensional transformations and rotations */
}

/* --- DETAIL SUBPAGES (RESIDENTIAL / COMMERCIAL / EXTERIOR MASONRY) --- */
.subpage-hero {
    padding-top: 180px;                                         /* Set top internal padding spacing */
    padding-bottom: 80px;                                       /* Set bottom internal padding spacing */
    background-color: var(--bg-secondary);                      /* Apply background theme color */
}

.subpage-title-wrap {
    display: flex;                                              /* Define element layout container type */
    justify-content: space-between;                             /* Align flex items along main layout axis */
    align-items: flex-end;                                      /* Align flex items along cross layout axis */
    flex-wrap: wrap;                                            /* Set flex children wrapping constraints */
    gap: 40px;                                                  /* Define spacing gap between sibling child elements */
}

.subpage-title-wrap h1 {
    font-size: clamp(44px, 6vw, 76px);                          /* Apply typographic character render size */
    line-height: 1.05;                                          /* Set vertical typographic line spacing height */
    font-weight: 400;                                           /* Set font character stroke weight */
}

.subpage-title-wrap h1 span {
    font-style: italic;
    color: var(--accent-gold);                                  /* Apply text foreground color */
}

.subpage-description {
    font-size: 18px;                                            /* Apply typographic character render size */
    color: var(--text-muted);                                   /* Apply text foreground color */
    max-width: 520px;                                           /* Set maximum boundary width */
    line-height: 1.7;                                           /* Set vertical typographic line spacing height */
}

.back-home-link {
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    gap: 12px;                                                  /* Define spacing gap between sibling child elements */
    font-size: 13px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    letter-spacing: 0.15em;                                     /* Set horizontal character gap spacing */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    margin-bottom: 24px;                                        /* Set bottom external spacing */
}

.back-home-link svg {
    width: 18px;                                                /* Set layout width span */
    height: 18px;                                               /* Set layout height span */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.back-home-link:hover svg {
    transform: translateX(-4px);                                /* Apply dimensional transformations and rotations */
}

/* Portfolio Masonry Blocks */
.portfolio-wall {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    gap: 120px;                                                 /* Define spacing gap between sibling child elements */
    padding: 100px 80px;                                        /* Set inner padding spacing boundaries */
}

.project-block {
    display: grid;                                              /* Define element layout container type */
    grid-template-columns: 1fr 1.3fr;                           /* Define column grid track columns rules */
    gap: 80px;                                                  /* Define spacing gap between sibling child elements */
    align-items: flex-start;                                    /* Align flex items along cross layout axis */
    border-bottom: 1px solid var(--border-color);               /* Apply bottom border stroke parameters */
    padding-bottom: 100px;                                      /* Set bottom internal padding spacing */
}

.project-block:last-child {
    border-bottom: none;                                        /* Apply bottom border stroke parameters */
    padding-bottom: 0;                                          /* Set bottom internal padding spacing */
}

.project-info-panel {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    align-items: flex-start;                                    /* Align flex items along cross layout axis */
    position: sticky;                                           /* Set positioning layout scheme */
    top: 140px;                                                 /* Position offset from top edge */
}

.project-id-badge {
    font-size: 13px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    letter-spacing: 0.15em;                                     /* Set horizontal character gap spacing */
    margin-bottom: 16px;                                        /* Set bottom external spacing */
}

.project-name {
    font-size: 38px;                                            /* Apply typographic character render size */
    line-height: 1.15;                                          /* Set vertical typographic line spacing height */
    margin-bottom: 20px;                                        /* Set bottom external spacing */
    font-weight: 400;                                           /* Set font character stroke weight */
}

.project-desc-text {
    font-size: 16px;                                            /* Apply typographic character render size */
    color: var(--text-muted);                                   /* Apply text foreground color */
    line-height: 1.75;                                          /* Set vertical typographic line spacing height */
    margin-bottom: 32px;                                        /* Set bottom external spacing */
}

.project-palette-wrap {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    gap: 16px;                                                  /* Define spacing gap between sibling child elements */
    margin-bottom: 32px;                                        /* Set bottom external spacing */
}

.project-palette-label {
    font-size: 11px;                                            /* Apply typographic character render size */
    font-weight: 600;                                           /* Set font character stroke weight */
    text-transform: uppercase;                                  /* Apply text character casing transformation */
    letter-spacing: 0.15em;                                     /* Set horizontal character gap spacing */
    color: var(--text-muted);                                   /* Apply text foreground color */
}

.project-palette-list {
    display: flex;                                              /* Define element layout container type */
    gap: 12px;                                                  /* Define spacing gap between sibling child elements */
}

.project-swatch {
    width: 32px;                                                /* Set layout width span */
    height: 32px;                                               /* Set layout height span */
    border-radius: 50%;                                         /* Apply border corner curvature radius */
    border: 2px solid var(--bg-primary);                        /* Apply border stroke parameters */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);                 /* Apply outer box shadow dimensional depth */
}

/* --- SUBPAGE IMAGE CAROUSEL (LUXURY CAROUSEL) --- */
.project-carousel-col {
    display: flex;                                              /* Define element layout container type */
    flex-direction: column;                                     /* Set layout flex axis flow direction */
    width: 100%;                                                /* Set layout width span */
    position: relative;                                         /* Set positioning layout scheme */
}

.project-carousel-wrapper {
    display: flex;                                              /* Define element layout container type */
    flex-direction: row;                                        /* Set layout flex axis flow direction */
    overflow-x: auto;                                           /* Enforce boundary clipping on horizontal flow axis */
    -webkit-overflow-scrolling: touch;                          /* Configure WebKit specific inertial touch scrolling behavior */
    scroll-snap-type: x mandatory;                              /* Configure horizontal container scroll snap behaviors */
    scrollbar-width: none; /* Firefox */
    width: 100%;                                                /* Set layout width span */
    border-radius: 8px;                                         /* Apply border corner curvature radius */
    border: 1px solid var(--border-color);                      /* Apply border stroke parameters */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);                /* Apply outer box shadow dimensional depth */
}

.project-carousel-wrapper::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.project-carousel-item {
    flex: 0 0 100%;                                             /* Configure layout flex resizing properties */
    width: 100%;                                                /* Set layout width span */
    aspect-ratio: 16 / 10;                                      /* Enforce fixed proportional aspect ratio */
    scroll-snap-align: start;
    overflow: hidden;                                           /* Enforce clipping boundary rules for overflow content */
    cursor: zoom-in;                                            /* Define mouse cursor visual pointer style */
    position: relative;                                         /* Set positioning layout scheme */
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    justify-content: center;                                    /* Align flex items along main layout axis */
}

.project-carousel-item img {
    width: 100%;                                                /* Set layout width span */
    height: 100%;                                               /* Set layout height span */
    object-fit: cover;                                          /* Determine image fill resize mapping behavior */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
}

.project-carousel-item:hover img {
    transform: scale(1.02);                                     /* Apply dimensional transformations and rotations */
}

/* Carousel Navigation Controls */
.carousel-nav-arrows {
    display: flex;                                              /* Define element layout container type */
    justify-content: flex-end;                                  /* Align flex items along main layout axis */
    gap: 16px;                                                  /* Define spacing gap between sibling child elements */
    margin-top: 20px;                                           /* Set top external spacing */
}

.carousel-arrow {
    width: 48px;                                                /* Set layout width span */
    height: 48px;                                               /* Set layout height span */
    border-radius: 50%;                                         /* Apply border corner curvature radius */
    border: 1px solid var(--accent-gold);                       /* Apply border stroke parameters */
    background: transparent;                                    /* Configure background color and image parameters */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    justify-content: center;                                    /* Align flex items along main layout axis */
    cursor: pointer;                                            /* Define mouse cursor visual pointer style */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    padding: 0;                                                 /* Set inner padding spacing boundaries */
}

.carousel-arrow:hover {
    background: var(--accent-gold);                             /* Configure background color and image parameters */
    color: var(--bg-primary);                                   /* Apply text foreground color */
}

.carousel-arrow svg {
    width: 18px;                                                /* Set layout width span */
    height: 18px;                                               /* Set layout height span */
}

/* --- SCROLL REVEAL ANIMATIONS (GLOBAL CINEMATIC STYLES) --- */
/* 1. Smooth Slide Up Translate (Headers, Titles, Text lines) */
.reveal-mask-up {
    opacity: 0;                                                 /* Set element opacity alpha visibility level */
    transform: translateY(40px);                                /* Apply dimensional transformations and rotations */
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-mask-up.active {
    opacity: 1;                                                 /* Set element opacity alpha visibility level */
    transform: translateY(0);                                   /* Apply dimensional transformations and rotations */
}

/* 2. Cinematic Image Zoom Slide (Portraits, Category Cards, Carousels) */
.reveal-img-wipe {
    opacity: 0;                                                 /* Set element opacity alpha visibility level */
    transform: scale(1.06) translateY(30px);                    /* Apply dimensional transformations and rotations */
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-img-wipe.active {
    opacity: 1;                                                 /* Set element opacity alpha visibility level */
    transform: scale(1) translateY(0);                          /* Apply dimensional transformations and rotations */
}

/* 3. Smooth Fade Up Translate (Cards, Timeline items) */
.reveal {
    opacity: 0;                                                 /* Set element opacity alpha visibility level */
    transform: translateY(40px);                                /* Apply dimensional transformations and rotations */
    transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;                                                 /* Set element opacity alpha visibility level */
    transform: translateY(0);                                   /* Apply dimensional transformations and rotations */
}

/* 4. Smooth Fade Left Translate */
.reveal-fade-left {
    opacity: 0;                                                 /* Set element opacity alpha visibility level */
    transform: translateX(-50px);                               /* Apply dimensional transformations and rotations */
    transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-left.active {
    opacity: 1;                                                 /* Set element opacity alpha visibility level */
    transform: translateX(0);                                   /* Apply dimensional transformations and rotations */
}

/* 5. Smooth Fade Right Translate */
.reveal-fade-right {
    opacity: 0;                                                 /* Set element opacity alpha visibility level */
    transform: translateX(50px);                                /* Apply dimensional transformations and rotations */
    transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-right.active {
    opacity: 1;                                                 /* Set element opacity alpha visibility level */
    transform: translateX(0);                                   /* Apply dimensional transformations and rotations */
}

/* 6. Cinematic Scale In Zoom */
.reveal-scale-in {
    opacity: 0;                                                 /* Set element opacity alpha visibility level */
    transform: scale(0.9) translateY(20px);                     /* Apply dimensional transformations and rotations */
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale-in.active {
    opacity: 1;                                                 /* Set element opacity alpha visibility level */
    transform: scale(1) translateY(0);                          /* Apply dimensional transformations and rotations */
}

/* Deluxe Staggered Transition Delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }



/* ==========================================================================
   RESPONSIVE DESIGN OVERRIDES (TABLETS & PHONES)
   ========================================================================== */

/* --- TABLET OVERRIDES (max-width: 1024px) --- */
@media (max-width: 1024px) {
    section {
        padding: 100px 40px;                                    /* Set inner padding spacing boundaries */
    }

    nav {
        padding: 24px 40px;                                     /* Set inner padding spacing boundaries */
    }

    nav.nav-scrolled {
        padding: 16px 40px;                                     /* Set inner padding spacing boundaries */
    }

    .about-grid {
        grid-template-columns: 1fr;                             /* Define column grid track columns rules */
        gap: 60px;                                              /* Define spacing gap between sibling child elements */
    }

    .about-photo-col {
        display: flex;                                          /* Define element layout container type */
        justify-content: center;                                /* Align flex items along main layout axis */
    }

    .edu-skills-grid {
        grid-template-columns: 1fr;                             /* Define column grid track columns rules */
        gap: 60px;                                              /* Define spacing gap between sibling child elements */
    }

    .exp-timeline {
        grid-template-columns: 1fr;                             /* Define column grid track columns rules */
        gap: 40px;                                              /* Define spacing gap between sibling child elements */
    }

    .exp-card {
        min-height: auto;                                       /* Set minimum layout height */
        padding: 48px 36px;                                     /* Set inner padding spacing boundaries */
    }

    .categories-grid {
        grid-template-columns: 1fr;                             /* Define column grid track columns rules */
        gap: 40px;                                              /* Define spacing gap between sibling child elements */
    }

    .category-card {
        aspect-ratio: 16 / 10;                                  /* Enforce fixed proportional aspect ratio */
    }

    .contact-wrap {
        grid-template-columns: 1fr;                             /* Define column grid track columns rules */
        gap: 60px;                                              /* Define spacing gap between sibling child elements */
    }

    .portfolio-wall {
        padding: 80px 40px;                                     /* Set inner padding spacing boundaries */
        gap: 80px;                                              /* Define spacing gap between sibling child elements */
    }

    .project-block {
        grid-template-columns: 1fr;                             /* Define column grid track columns rules */
        gap: 40px;                                              /* Define spacing gap between sibling child elements */
        padding-bottom: 60px;                                   /* Set bottom internal padding spacing */
    }

    .project-info-panel {
        position: relative;                                     /* Set positioning layout scheme */
        top: 0;                                                 /* Position offset from top edge */
    }
}

/* --- MOBILE PHONE OVERRIDES (max-width: 768px) --- */
@media (max-width: 768px) {
    section {
        padding: 80px 24px;                                     /* Set inner padding spacing boundaries */
    }


    nav {
        padding: 20px 24px;                                     /* Set inner padding spacing boundaries */
    }

    nav.nav-scrolled {
        padding: 14px 24px;                                     /* Set inner padding spacing boundaries */
    }

    .nav-logo {
        font-size: 18px !important;                             /* Apply typographic character render size */
        white-space: nowrap !important;                         /* Manage inline word wrapping rules */
    }

    /* Solid Dark Graphite Background Menu on Mobile (both themes) */
    .nav-links {
        position: fixed;                                        /* Set positioning layout scheme */
        top: 0;                                                 /* Position offset from top edge */
        right: -100%;                                           /* Position offset from right edge */
        width: 75%;                                             /* Set layout width span */
        height: 100vh;                                          /* Set layout height span */
        background-color: #161618 !important; /* Force dark background */
        flex-direction: column;                                 /* Set layout flex axis flow direction */
        justify-content: center;                                /* Align flex items along main layout axis */
        align-items: center;                                    /* Align flex items along cross layout axis */
        gap: 32px;                                              /* Define spacing gap between sibling child elements */
        z-index: 9998;                                          /* Set stack order layer depth */
        transition: right 0.7s cubic-bezier(0.16, 1, 0.3, 1);    /* Configure smooth state transition animation rules */
        border-left: 1px solid rgba(255, 255, 255, 0.08) !important;    /* Apply left border stroke parameters */
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);            /* Apply outer box shadow dimensional depth */
    }

    .nav-links.active {
        right: 0 !important;                                    /* Position offset from right edge */
    }

    .nav-links a {
        color: rgba(255, 255, 255, 0.8) !important; /* Force readable white link text */
        font-size: 20px !important;                             /* Apply typographic character render size */
    }

    .nav-links a:hover {
        color: var(--accent-gold) !important;                   /* Apply text foreground color */
    }

    /* Hide desktop toggle, show mobile switcher item in slide-out menu */
    #navbar > .theme-toggle-btn {
        display: none !important;                               /* Define element layout container type */
    }

    .mobile-theme-item {
        display: flex !important;                               /* Define element layout container type */
        margin-top: 16px;                                       /* Set top external spacing */
    }

    .theme-toggle-btn-mobile {
        background: none;                                       /* Configure background color and image parameters */
        border: 1px solid rgba(255, 255, 255, 0.15);            /* Apply border stroke parameters */
        width: 46px;                                            /* Set layout width span */
        height: 46px;                                           /* Set layout height span */
        border-radius: 50%;                                     /* Apply border corner curvature radius */
        cursor: pointer;                                        /* Define mouse cursor visual pointer style */
        display: flex;                                          /* Define element layout container type */
        align-items: center;                                    /* Align flex items along cross layout axis */
        justify-content: center;                                /* Align flex items along main layout axis */
        color: var(--accent-gold);                              /* Apply text foreground color */
        transition: var(--transition-premium);                  /* Configure smooth state transition animation rules */
    }

    .theme-toggle-btn-mobile:hover {
        background: var(--accent-gold);                         /* Configure background color and image parameters */
        color: #161618;                                         /* Apply text foreground color */
        border-color: var(--accent-gold);                       /* Apply borders color scheme value */
    }

    .theme-toggle-btn-mobile svg {
        width: 22px;                                            /* Set layout width span */
        height: 22px;                                           /* Set layout height span */
        fill: none;                                             /* Define SVG inner fill area coloring */
    }

    .hamburger-btn {
        display: flex;                                          /* Define element layout container type */
    }

    /* Transform hamburger into close state on active menu */
    .hamburger-btn.active .hamburger-bar:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);             /* Apply dimensional transformations and rotations */
    }
    
    .hamburger-btn.active .hamburger-bar:nth-child(2) {
        opacity: 0;                                             /* Set element opacity alpha visibility level */
    }

    .hamburger-btn.active .hamburger-bar:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);           /* Apply dimensional transformations and rotations */
    }

    .hero-content {
        padding: 0 24px;                                        /* Set inner padding spacing boundaries */
    }

    .hero-bg-img {
        object-position: 35% center !important; /* Center best parts of furniture on vertical screens */
    }

    .hero-title {
        font-size: clamp(38px, 10vw, 56px);                     /* Apply typographic character render size */
        margin-bottom: 24px;                                    /* Set bottom external spacing */
    }

    .hero-sub-text {
        font-size: 15px;                                        /* Apply typographic character render size */
        margin-bottom: 36px;                                    /* Set bottom external spacing */
    }

    .about-photo-frame {
        padding: 16px;                                          /* Set inner padding spacing boundaries */
    }

    .about-desc-col h3 {
        font-size: 24px;                                        /* Apply typographic character render size */
    }

    .about-desc-col p {
        font-size: 15px;                                        /* Apply typographic character render size */
        line-height: 1.7;                                       /* Set vertical typographic line spacing height */
    }

    .edu-degree {
        font-size: 20px;                                        /* Apply typographic character render size */
    }

    .exp-card-role {
        font-size: 26px;                                        /* Apply typographic character render size */
    }

    .category-card {
        padding: 30px;                                          /* Set inner padding spacing boundaries */
        aspect-ratio: 4 / 3;                                    /* Enforce fixed proportional aspect ratio */
    }

    .category-card-title {
        font-size: 28px;                                        /* Apply typographic character render size */
        margin-bottom: 16px;                                    /* Set bottom external spacing */
    }

    #contact {
        padding: 80px 24px;                                     /* Set inner padding spacing boundaries */
    }

    .contact-left-col h2 {
        font-size: 32px;                                        /* Apply typographic character render size */
    }

    .contact-icon-box {
        width: 50px;                                            /* Set layout width span */
        height: 50px;                                           /* Set layout height span */
    }

    .contact-item-value {
        font-size: 16px;                                        /* Apply typographic character render size */
    }

    footer {
        padding: 30px 24px;                                     /* Set inner padding spacing boundaries */
    }

    .footer-content {
        flex-direction: column;                                 /* Set layout flex axis flow direction */
        gap: 16px;                                              /* Define spacing gap between sibling child elements */
        text-align: center;                                     /* Align block content flow alignment */
    }

    /* Category Subpage Mobile Adjustments */
    .subpage-hero {
        padding-top: 110px !important;                          /* Set top internal padding spacing */
        padding-bottom: 24px !important;                        /* Set bottom internal padding spacing */
    }

    .subpage-title-wrap h1 {
        font-size: clamp(28px, 8vw, 36px) !important;           /* Apply typographic character render size */
    }

    .subpage-description {
        font-size: 14px !important;                             /* Apply typographic character render size */
        line-height: 1.6 !important;                            /* Set vertical typographic line spacing height */
        max-width: 100% !important;                             /* Set maximum boundary width */
    }

    .back-home-link {
        display: none !important;                               /* Define element layout container type */
    }

    .carousel-nav-arrows {
        display: none !important;                               /* Define element layout container type */
    }

    .portfolio-wall {
        padding: 40px 24px !important;                          /* Set inner padding spacing boundaries */
        gap: 50px !important;                                   /* Define spacing gap between sibling child elements */
    }

    .project-block {
        gap: 24px !important;                                   /* Define spacing gap between sibling child elements */
        padding-bottom: 40px !important;                        /* Set bottom internal padding spacing */
        border-bottom: 1px solid var(--border-color) !important;    /* Apply bottom border stroke parameters */
    }

    .project-name {
        font-size: 22px !important;                             /* Apply typographic character render size */
        margin-top: 8px !important;                             /* Set top external spacing */
        margin-bottom: 12px !important;                         /* Set bottom external spacing */
    }

    .project-desc-text {
        font-size: 14px !important;                             /* Apply typographic character render size */
        line-height: 1.6 !important;                            /* Set vertical typographic line spacing height */
        margin-bottom: 18px !important;                         /* Set bottom external spacing */
    }

    .project-swatch {
        width: 38px !important;                                 /* Set layout width span */
        height: 38px !important;                                /* Set layout height span */
    }

    .project-palette-list {
        gap: 12px !important;                                   /* Define spacing gap between sibling child elements */
    }

    .project-palette-wrap {
        margin-bottom: 16px !important;                         /* Set bottom external spacing */
    }

    .project-carousel-item {
        aspect-ratio: 16 / 10 !important;                       /* Enforce fixed proportional aspect ratio */
    }

    .lightbox-content-wrapper {
        max-width: 95%;                                         /* Set maximum boundary width */
        max-height: 95%;                                        /* Set maximum boundary height */
    }
}

/* ==========================================================================
   THEME TOGGLE SYSTEM & LIGHT MODE STYLING
   ========================================================================== */

/* Optional Dark Theme Override (Obsidian, Gold) */
.dark-theme {
    --bg-primary: #0F0F10;        /* Deep obsidian black */
    --bg-secondary: #161618;      /* Rich graphite */
    --bg-tertiary: #1D1D20;       /* Muted gray-black */
    --accent-gold: #C5A880;       /* Champagne/Bronze gold */
    --accent-gold-rgb: 197, 168, 128;
    --text-primary: #F5F5F7;      /* Warm white */
    --text-muted: #8A8A8F;        /* Muted slate gray */
    --border-color: rgba(197, 168, 128, 0.15); /* Soft gold border */
}

/* ==========================================================================
   VISIBILITY, TAG REMOVAL, AND CARD REFINEMENTS OVERRIDES
   ========================================================================== */

/* 1. Header Navigation Link & Logo Colors */
nav {
    border-bottom: 1px solid transparent;                       /* Apply bottom border stroke parameters */
}
nav:not(.nav-scrolled) .nav-logo {
    color: var(--white) !important;                             /* Apply text foreground color */
}
nav:not(.nav-scrolled) .nav-links a {
    color: rgba(255, 255, 255, 0.8) !important;                 /* Apply text foreground color */
}
nav:not(.nav-scrolled) .nav-links a:hover {
    color: var(--white) !important;                             /* Apply text foreground color */
}
nav:not(.nav-scrolled) .hamburger-bar {
    background-color: var(--white) !important;                  /* Apply background theme color */
}

nav.nav-scrolled {
    background-color: #0F0F10 !important; /* Always solid black scrolled background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;    /* Apply bottom border stroke parameters */
}
nav.nav-scrolled .nav-logo {
    color: var(--white) !important; /* Logo text is white */
}
nav.nav-scrolled .nav-links a {
    color: rgba(255, 255, 255, 0.8) !important; /* Links are white */
}
nav.nav-scrolled .nav-links a:hover {
    color: var(--white) !important;                             /* Apply text foreground color */
}
nav.nav-scrolled .hamburger-bar {
    background-color: var(--white) !important;                  /* Apply background theme color */
}

/* 2. Hero Text & Background Blending Overlay */
#home .hero-title {
    color: var(--white) !important;                             /* Apply text foreground color */
}
#home .hero-title span {
    color: var(--accent-gold) !important;                       /* Apply text foreground color */
}
#home .hero-sub-text {
    color: rgba(255, 255, 255, 0.85) !important;                /* Apply text foreground color */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;     /* Apply typographic character shadow depth */
}
#home .hero-scroll-btn {
    color: var(--accent-gold) !important;                       /* Apply text foreground color */
}
#home .hero-scroll-line {
    background-color: var(--accent-gold) !important;            /* Apply background theme color */
}
#home .hero-scroll-line::after {
    background-color: var(--white) !important;                  /* Apply background theme color */
}

.hero-background::after {
    content: '' !important;                                     /* Define generated pseudo-element marker content */
    position: absolute !important;                              /* Set positioning layout scheme */
    inset: 0 !important;                                        /* Position shorthand for all edges */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.6) 100%) !important;    /* Configure background color and image parameters */
    z-index: 2 !important;                                      /* Set stack order layer depth */
}

/* 3. Global Section Meta Tag Removal */
.section-meta-tag {
    display: none !important;                                   /* Define element layout container type */
}

/* 4. Projects Category Cards override */
.category-card-count {
    display: none !important;                                   /* Define element layout container type */
}
.category-card-title {
    color: var(--white) !important;                             /* Apply text foreground color */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;      /* Apply typographic character shadow depth */
}

/* 5. Fixed Circular Back-to-Projects Button */
.back-home-link {
    position: fixed !important;                                 /* Set positioning layout scheme */
    top: 110px !important;                                      /* Position offset from top edge */
    left: 24px !important;                                      /* Position offset from left edge */
    z-index: 999 !important;                                    /* Set stack order layer depth */
    background: var(--accent-gold) !important;                  /* Configure background color and image parameters */
    width: 48px !important;                                     /* Set layout width span */
    height: 48px !important;                                    /* Set layout height span */
    border-radius: 50% !important;                              /* Apply border corner curvature radius */
    display: inline-flex !important;                            /* Define element layout container type */
    align-items: center !important;                             /* Align flex items along cross layout axis */
    justify-content: center !important;                         /* Align flex items along main layout axis */
    color: var(--bg-primary) !important;                        /* Apply text foreground color */
    transition: var(--transition-premium) !important;           /* Configure smooth state transition animation rules */
    font-size: 0 !important; /* Hide text label completely */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;      /* Apply outer box shadow dimensional depth */
    border: 1px solid var(--border-color) !important;           /* Apply border stroke parameters */
}

.back-home-link:hover {
    background: var(--text-primary) !important;                 /* Configure background color and image parameters */
    color: var(--bg-primary) !important;                        /* Apply text foreground color */
    transform: translateX(-4px) !important;                     /* Apply dimensional transformations and rotations */
}

.back-home-link svg {
    width: 20px !important;                                     /* Set layout width span */
    height: 20px !important;                                    /* Set layout height span */
    margin: 0 !important;                                       /* Set margins for external block spacing */
}

/* 6. Larger Circular Color Palettes with Outline */
.project-swatch {
    width: 46px !important;                                     /* Set layout width span */
    height: 46px !important;                                    /* Set layout height span */
    border-radius: 50% !important;                              /* Apply border corner curvature radius */
    border: 2px solid var(--bg-primary) !important;             /* Apply border stroke parameters */
    box-shadow: 0 0 0 2px var(--border-color) !important;       /* Apply outer box shadow dimensional depth */
    cursor: pointer !important;                                 /* Define mouse cursor visual pointer style */
    transition: var(--transition-premium) !important;           /* Configure smooth state transition animation rules */
}

.project-swatch:hover {
    transform: scale(1.15) !important;                          /* Apply dimensional transformations and rotations */
    box-shadow: 0 0 0 3px var(--accent-gold) !important;        /* Apply outer box shadow dimensional depth */
}

.project-palette-list {
    display: flex !important;                                   /* Define element layout container type */
    gap: 16px !important;                                       /* Define spacing gap between sibling child elements */
}

.project-palette-wrap {
    margin-top: 10px !important;                                /* Set top external spacing */
    margin-bottom: 24px !important;                             /* Set bottom external spacing */
}

.mobile-theme-item {
    display: none;                                              /* Define element layout container type */
}

/* Theme toggle button styling in navbar */
.theme-toggle-btn {
    background: none;                                           /* Configure background color and image parameters */
    border: 1px solid var(--border-color);                      /* Apply border stroke parameters */
    width: 44px;                                                /* Set layout width span */
    height: 44px;                                               /* Set layout height span */
    border-radius: 50%;                                         /* Apply border corner curvature radius */
    cursor: pointer;                                            /* Define mouse cursor visual pointer style */
    display: flex;                                              /* Define element layout container type */
    align-items: center;                                        /* Align flex items along cross layout axis */
    justify-content: center;                                    /* Align flex items along main layout axis */
    color: var(--accent-gold);                                  /* Apply text foreground color */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    margin-left: 24px;                                          /* Set left external spacing */
    position: relative;                                         /* Set positioning layout scheme */
    z-index: 10001;                                             /* Set stack order layer depth */
}

.theme-toggle-btn:hover {
    background: var(--accent-gold);                             /* Configure background color and image parameters */
    color: var(--bg-primary);                                   /* Apply text foreground color */
    border-color: var(--accent-gold);                           /* Apply borders color scheme value */
}

.theme-toggle-btn svg {
    width: 20px;                                                /* Set layout width span */
    height: 20px;                                               /* Set layout height span */
    fill: none;                                                 /* Define SVG inner fill area coloring */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;    /* Configure smooth state transition animation rules */
}

.theme-toggle-btn:hover svg {
    transform: rotate(45deg);                                   /* Apply dimensional transformations and rotations */
}

.theme-toggle-btn:active svg {
    transform: scale(0.8) rotate(180deg);                       /* Apply dimensional transformations and rotations */
}

/* Sun icon is hidden by default in the theme switcher (shown only in dark mode) */
.sun-icon {
    display: none;                                              /* Define element layout container type */
}

/* --- SMOOTH LIGHT SWITCH THEME TRANSITIONS --- */
.theme-transitioning,
.theme-transitioning * {
    transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important,
                color 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important,
                border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important,
                box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important,
                fill 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important,
                stroke 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body, section, nav, footer, .exp-card, .skill-pill, .category-card, .contact-icon-box, .theme-toggle-btn, .carousel-arrow, .back-home-link {
    transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

h1, h2, h3, h4, h5, h6, p, a, span, .nav-logo {
    transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);       /* Configure smooth state transition animation rules */
}



@media (max-width: 1024px) {
    /* Hide circular back button on tablet/mobile screens */
    .back-home-link {
        display: none !important;                               /* Define element layout container type */
    }

    /* Horizontal scrollable carousel for services on tablet/mobile */
    .services-grid {
        display: flex !important;                               /* Switch from grid to flex row */
        flex-direction: row !important;
        flex-wrap: nowrap !important;                           /* Prevent vertical wrapping of service items */
        overflow-x: scroll !important;                          /* Force horizontal scroll capability */
        overflow-y: visible !important;                         /* Prevent vertical swipe lockups on touch screens */
        scroll-snap-type: x mandatory !important;               /* Enable smooth mandatory snapping */
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;           /* iOS smooth inertial scroll */
        gap: 20px !important;                                   /* Balanced spacing gap */
        padding: 10px 4px 20px 4px !important;                  /* Bottom padding to prevent shadow clipping */
        width: 100% !important;
        touch-action: pan-x pan-y !important;                   /* Permit multi-directional swipe gestures */
        scrollbar-width: none !important;                       /* Hide scrollbar on Firefox */
    }

    .services-grid::-webkit-scrollbar {
        display: none !important;                               /* Hide scrollbar on Chrome/Safari/Edge */
    }

    .services-card {
        flex: 0 0 85% !important;                               /* Width of cards so next card is partially visible */
        scroll-snap-align: center !important;                   /* Snap cards to screen center */
        min-height: auto !important;                            /* Reset high desktop height limits */
        height: auto !important;                                /* Auto height based on contents */
        padding: 30px 24px !important;                          /* Reduced compact padding */
    }

    /* Mobile-only line break helper */
    .mobile-br {
        display: block !important;
    }
    
    /* Reduced padding and custom typography for mobile SEO cross-links */
    .category-cross-links {
        padding: 40px 24px !important;                          /* Prevents boxy layout on mobile viewports */
    }
    
    .cross-links-text {
        font-size: 14px !important;                             /* Fits text neatly on two lines */
        line-height: 1.8 !important;                            /* Proper vertical line rhythm spacing */
    }

    .pc-only-links {
        display: none !important;                               /* Hide PC text on tablet/mobile */
    }
    
    .mobile-only-links {
        display: inline !important;                             /* Show mobile text on tablet/mobile */
    }
}

@media (max-width: 768px) {
    /* Prevent loading logo from wrapping to two lines */
    .loader-logo {
        white-space: nowrap !important;                         /* Manage inline word wrapping rules */
        font-size: 24px !important;                             /* Apply typographic character render size */
        letter-spacing: 0.05em !important;                      /* Set horizontal character gap spacing */
    }

    /* Provide horizontal spacing for subpage hero to prevent text touching screen edges */
    .subpage-hero {
        padding-left: 24px !important;                          /* Set left internal padding spacing */
        padding-right: 24px !important;                         /* Set right internal padding spacing */
    }

    /* Hide carousel navigation arrows on mobile viewports (use finger swiping) */
    .carousel-nav-arrows {
        display: none !important;                               /* Define element layout container type */
    }

    /* Mobile menu background and links dynamically adapt to Light/Dark theme variables */
    .nav-links {
        background-color: var(--bg-secondary) !important;       /* Apply background theme color */
        border-left: 1px solid var(--border-color) !important;    /* Apply left border stroke parameters */
    }
    
    /* Specificity fix: override PC transparent and scrolled nav link colors on mobile menu */
    nav .nav-links a,
    nav:not(.nav-scrolled) .nav-links a,
    nav.nav-scrolled .nav-links a {
        color: var(--text-primary) !important;                  /* Apply text foreground color */
    }
    
    .nav-links.active {
        right: 0 !important;                                    /* Position offset from right edge */
    }

    /* Mobile menu theme toggle button colors & hover styles for both Light and Dark Themes */
    .theme-toggle-btn-mobile {
        color: #121216 !important; /* Black icon in light theme */
        border: 1px solid rgba(18, 18, 22, 0.15) !important; /* Dark border in light theme */
        transition: var(--transition-premium) !important;       /* Configure smooth state transition animation rules */
    }

    .theme-toggle-btn-mobile:hover {
        background: #121216 !important; /* Black background on hover */
        color: #FFFFFF !important; /* White icon on hover */
        border-color: #121216 !important;                       /* Apply borders color scheme value */
    }

    .dark-theme .theme-toggle-btn-mobile {
        color: var(--accent-gold) !important; /* Gold icon in dark theme */
        border: 1px solid rgba(197, 168, 128, 0.25) !important; /* Gold border in dark theme */
    }

    .dark-theme .theme-toggle-btn-mobile:hover {
        background: var(--accent-gold) !important; /* Gold background on hover */
        color: #161618 !important; /* Dark graphite icon on hover */
        border-color: var(--accent-gold) !important;            /* Apply borders color scheme value */
    }

    /* Prevent mobile tap target glitches by ignoring mouse events on the SVG paths */
    .theme-toggle-btn svg,
    .theme-toggle-btn-mobile svg {
        pointer-events: none !important;                        /* Toggle mouse hover and click interaction handling */
    }

    /* Lightbox mobile adjustments: hide arrows and maximize image view sizing */
    .lightbox-arrow {
        display: none !important;                               /* Define element layout container type */
    }
    
    .lightbox-content-wrapper {
        max-width: 100% !important;                             /* Set maximum boundary width */
        width: 100% !important;                                 /* Set layout width span */
        padding: 0 10px !important;                             /* Set inner padding spacing boundaries */
    }
    
    #lightbox-img {
        width: 100% !important;                                 /* Set layout width span */
        height: auto !important;                                /* Set layout height span */
        max-height: 80vh !important;                            /* Set maximum boundary height */
        object-fit: contain !important;                         /* Determine image fill resize mapping behavior */
    }

    .lightbox-close-btn {
        top: 20px !important;                                   /* Position offset from top edge */
        right: 20px !important;                                 /* Position offset from right edge */
        background: rgba(0, 0, 0, 0.5) !important;              /* Configure background color and image parameters */
        border-color: rgba(255, 255, 255, 0.25) !important;     /* Apply borders color scheme value */
    }

    /* Active mobile close button (hamburger X) color adapts to theme text color */
    .hamburger-btn.active .hamburger-bar {
        background-color: var(--text-primary) !important;       /* Apply background theme color */
    }

}




/* --- PROJECT SWATCH DYNAMIC COLORS --- */
.swatch-bg-15130a {
    background-color: #15130A;    /* Apply project color palette swatch color */
}
.swatch-bg-1f2027 {
    background-color: #1F2027;    /* Apply project color palette swatch color */
}
.swatch-bg-21412c {
    background-color: #21412C;    /* Apply project color palette swatch color */
}
.swatch-bg-25201e {
    background-color: #25201E;    /* Apply project color palette swatch color */
}
.swatch-bg-282018 {
    background-color: #282018;    /* Apply project color palette swatch color */
}
.swatch-bg-282521 {
    background-color: #282521;    /* Apply project color palette swatch color */
}
.swatch-bg-28281f {
    background-color: #28281F;    /* Apply project color palette swatch color */
}
.swatch-bg-291d15 {
    background-color: #291D15;    /* Apply project color palette swatch color */
}
.swatch-bg-3b2a19 {
    background-color: #3B2A19;    /* Apply project color palette swatch color */
}
.swatch-bg-3f3e3e {
    background-color: #3F3E3E;    /* Apply project color palette swatch color */
}
.swatch-bg-41322c {
    background-color: #41322C;    /* Apply project color palette swatch color */
}
.swatch-bg-444444 {
    background-color: #444444;    /* Apply project color palette swatch color */
}
.swatch-bg-494f25 {
    background-color: #494F25;    /* Apply project color palette swatch color */
}
.swatch-bg-544639 {
    background-color: #544639;    /* Apply project color palette swatch color */
}
.swatch-bg-544f4d {
    background-color: #544F4D;    /* Apply project color palette swatch color */
}
.swatch-bg-564c38 {
    background-color: #564C38;    /* Apply project color palette swatch color */
}
.swatch-bg-5b5351 {
    background-color: #5B5351;    /* Apply project color palette swatch color */
}
.swatch-bg-608d29 {
    background-color: #608D29;    /* Apply project color palette swatch color */
}
.swatch-bg-644630 {
    background-color: #644630;    /* Apply project color palette swatch color */
}
.swatch-bg-655d4f {
    background-color: #655D4F;    /* Apply project color palette swatch color */
}
.swatch-bg-6e3f1f {
    background-color: #6E3F1F;    /* Apply project color palette swatch color */
}
.swatch-bg-6e6056 {
    background-color: #6E6056;    /* Apply project color palette swatch color */
}
.swatch-bg-6f6f3c {
    background-color: #6F6F3C;    /* Apply project color palette swatch color */
}
.swatch-bg-6f7a3b {
    background-color: #6F7A3B;    /* Apply project color palette swatch color */
}
.swatch-bg-6f804f {
    background-color: #6F804F;    /* Apply project color palette swatch color */
}
.swatch-bg-724c2c {
    background-color: #724C2C;    /* Apply project color palette swatch color */
}
.swatch-bg-745133 {
    background-color: #745133;    /* Apply project color palette swatch color */
}
.swatch-bg-799a42 {
    background-color: #799A42;    /* Apply project color palette swatch color */
}
.swatch-bg-7e7367 {
    background-color: #7E7367;    /* Apply project color palette swatch color */
}
.swatch-bg-80754b {
    background-color: #80754B;    /* Apply project color palette swatch color */
}
.swatch-bg-817d7b {
    background-color: #817D7B;    /* Apply project color palette swatch color */
}
.swatch-bg-824b29 {
    background-color: #824B29;    /* Apply project color palette swatch color */
}
.swatch-bg-8d5937 {
    background-color: #8D5937;    /* Apply project color palette swatch color */
}
.swatch-bg-8d5e38 {
    background-color: #8D5E38;    /* Apply project color palette swatch color */
}
.swatch-bg-8f8e4b {
    background-color: #8F8E4B;    /* Apply project color palette swatch color */
}
.swatch-bg-915b43 {
    background-color: #915B43;    /* Apply project color palette swatch color */
}
.swatch-bg-93663f {
    background-color: #93663F;    /* Apply project color palette swatch color */
}
.swatch-bg-976c44 {
    background-color: #976C44;    /* Apply project color palette swatch color */
}
.swatch-bg-9b9289 {
    background-color: #9B9289;    /* Apply project color palette swatch color */
}
.swatch-bg-a0948a {
    background-color: #A0948A;    /* Apply project color palette swatch color */
}
.swatch-bg-a0a19e {
    background-color: #A0A19E;    /* Apply project color palette swatch color */
}
.swatch-bg-a48667 {
    background-color: #A48667;    /* Apply project color palette swatch color */
}
.swatch-bg-a5a4a6 {
    background-color: #A5A4A6;    /* Apply project color palette swatch color */
}
.swatch-bg-a5aeb9 {
    background-color: #A5AEB9;    /* Apply project color palette swatch color */
}
.swatch-bg-a89f9a {
    background-color: #A89F9A;    /* Apply project color palette swatch color */
}
.swatch-bg-ae9b87 {
    background-color: #AE9B87;    /* Apply project color palette swatch color */
}
.swatch-bg-b29f88 {
    background-color: #B29F88;    /* Apply project color palette swatch color */
}
.swatch-bg-b48c51 {
    background-color: #B48C51;    /* Apply project color palette swatch color */
}
.swatch-bg-b6aca2 {
    background-color: #B6ACA2;    /* Apply project color palette swatch color */
}
.swatch-bg-b8a280 {
    background-color: #B8A280;    /* Apply project color palette swatch color */
}
.swatch-bg-bdb09f {
    background-color: #BDB09F;    /* Apply project color palette swatch color */
}
.swatch-bg-c1b5a8 {
    background-color: #C1B5A8;    /* Apply project color palette swatch color */
}
.swatch-bg-c39765 {
    background-color: #C39765;    /* Apply project color palette swatch color */
}
.swatch-bg-c6c1bf {
    background-color: #C6C1BF;    /* Apply project color palette swatch color */
}
.swatch-bg-c9baa5 {
    background-color: #C9BAA5;    /* Apply project color palette swatch color */
}
.swatch-bg-cbbfad {
    background-color: #CBBFAD;    /* Apply project color palette swatch color */
}
.swatch-bg-cccbc5 {
    background-color: #CCCBC5;    /* Apply project color palette swatch color */
}
.swatch-bg-cda57a {
    background-color: #CDA57A;    /* Apply project color palette swatch color */
}
.swatch-bg-ceb08c {
    background-color: #CEB08C;    /* Apply project color palette swatch color */
}
.swatch-bg-d0a879 {
    background-color: #D0A879;    /* Apply project color palette swatch color */
}
.swatch-bg-d0c5b8 {
    background-color: #D0C5B8;    /* Apply project color palette swatch color */
}
.swatch-bg-d4cdc6 {
    background-color: #D4CDC6;    /* Apply project color palette swatch color */
}
.swatch-bg-d9d1c9 {
    background-color: #D9D1C9;    /* Apply project color palette swatch color */
}
.swatch-bg-dcc7a8 {
    background-color: #DCC7A8;    /* Apply project color palette swatch color */
}
.swatch-bg-dce1dd {
    background-color: #DCE1DD;    /* Apply project color palette swatch color */
}
.swatch-bg-e0d462 {
    background-color: #E0D462;    /* Apply project color palette swatch color */
}
.swatch-bg-e0d9ce {
    background-color: #E0D9CE;    /* Apply project color palette swatch color */
}
.swatch-bg-e17a37 {
    background-color: #E17A37;    /* Apply project color palette swatch color */
}
.swatch-bg-e1ddda {
    background-color: #E1DDDA;    /* Apply project color palette swatch color */
}
.swatch-bg-e3d9cc {
    background-color: #E3D9CC;    /* Apply project color palette swatch color */
}
.swatch-bg-e3dbd1 {
    background-color: #E3DBD1;    /* Apply project color palette swatch color */
}
.swatch-bg-e5c8b6 {
    background-color: #E5C8B6;    /* Apply project color palette swatch color */
}
.swatch-bg-e7ded7 {
    background-color: #E7DED7;    /* Apply project color palette swatch color */
}
.swatch-bg-e9dfd5 {
    background-color: #E9DFD5;    /* Apply project color palette swatch color */
}
.swatch-bg-e9e6d4 {
    background-color: #E9E6D4;    /* Apply project color palette swatch color */
}
.swatch-bg-eae5dc {
    background-color: #EAE5DC;    /* Apply project color palette swatch color */
}
.swatch-bg-ebdac6 {
    background-color: #EBDAC6;    /* Apply project color palette swatch color */
}
.swatch-bg-eee5d8 {
    background-color: #EEE5D8;    /* Apply project color palette swatch color */
}
.swatch-bg-f0eae0 {
    background-color: #F0EAE0;    /* Apply project color palette swatch color */
}
.swatch-bg-f0ece6 {
    background-color: #F0ECE6;    /* Apply project color palette swatch color */
}
.swatch-bg-f1eae0 {
    background-color: #F1EAE0;    /* Apply project color palette swatch color */
}
.swatch-bg-f2ebdf {
    background-color: #F2EBDF;    /* Apply project color palette swatch color */
}
.swatch-bg-f5f3f0 {
    background-color: #F5F3F0;    /* Apply project color palette swatch color */
}

/* --- PREMIUM PAGE CROSS-TRANSITIONS (FADE IN/OUT) --- */
/* Base opacity state for fluid transitions */
body {
    opacity: 1;                                                 /* Set initial element visibility level */
    transition: opacity 0.5s ease-in-out;                       /* Configure smooth opacity fade transitions */
}

/* Page fade-out transition state class applied on click intercepts */
body.page-transitioning-out {
    opacity: 0 !important;                                      /* Force transparent state for transition out */
}

/* Keyframe for smooth page load slide-up fade-in */
@keyframes fadeInPageContent {
    from {
        opacity: 0;                                             /* Start fully transparent */
        transform: translateY(10px);                            /* Start slightly shifted down */
    }
    to {
        opacity: 1;                                             /* Fade in to full opacity */
        transform: translateY(0);                               /* Slide up to original coordinate */
    }
}

/* Ensure main content is initially transparent to prevent a flash of un-animated content */
#main-content {
    opacity: 0;                                                 /* Start fully transparent before animations run */
}

/* Apply load-in animation to the main content container once loading screen finishes */
body:not(.loading-active) #main-content {
    animation: fadeInPageContent 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;    /* Trigger smooth slide fade-in entry */
}

/* --- CATEGORY CROSS-LINKS SECTION (SEO) --- */
.mobile-br {
    display: none;                                              /* Hide mobile line break by default on desktop */
}

.pc-only-links {
    display: inline;                                            /* Show PC text by default */
}

.mobile-only-links {
    display: none;                                              /* Hide mobile text by default */
}

.category-cross-links {
    padding: 60px 80px 20px 80px;                              /* Set inner padding spacing boundaries */
    text-align: center;                                         /* Align block content flow alignment */
    border-top: 1px solid var(--border-color);                  /* Apply top border stroke parameters */
    background-color: var(--bg-secondary);                      /* Apply background theme color */
}

.cross-links-text {
    font-size: 16px;                                            /* Apply typographic character render size */
    color: var(--text-muted);                                   /* Apply text foreground color */
    font-family: 'Manrope', sans-serif;                         /* Apply typographic font family design */
}

.cross-links-text a {
    color: var(--accent-gold);                                  /* Apply text foreground color */
    font-weight: 600;                                           /* Set font character stroke weight */
    text-decoration: none;                                      /* Enforce typographic underline decoration defaults */
    transition: var(--transition-premium);                      /* Configure smooth state transition animation rules */
    border-bottom: 1px solid transparent;                       /* Apply bottom border stroke parameters */
    padding-bottom: 2px;                                        /* Set bottom internal padding spacing */
}

.cross-links-text a:hover {
    border-color: var(--accent-gold);                           /* Apply borders color scheme value */
    opacity: 0.85;                                              /* Set element opacity alpha visibility level */
}