/*
 * LoopCalTech — Warm, Minimalist & Dark (Onyx & Champagne Gold Theme)
 * VISUAL MASTERCLASS — VERSION 4.0 (theme-modern.css)
 * 100% Scoped to Custom Classes to completely bypass legacy styling conflicts
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@100;200;300;400;500;600&display=swap');

:root {
    --bg-dark: #0a0909;             /* Organic, deep Obsidian base */
    --bg-dark-card: rgba(22, 20, 19, 0.45); /* Elegant translucent glass backing */
    --bg-card-hover: rgba(28, 25, 23, 0.7);
    --border-thin: rgba(229, 193, 133, 0.08);  /* Fine Champagne Gold Outline */
    --border-thin-hover: rgba(229, 193, 133, 0.3); /* Glowing Gold Border */
    --border-accent: rgba(224, 122, 104, 0.15);  /* Muted Terracotta Outline */
    
    --text-sand: #f7f5f3;           /* Champagne Sand Title */
    --text-warm-gray: #cfc7c0;     /* Muted Warm Gray Body */
    --text-muted: #7d756e;         /* Muted Earth Charcoal */
    
    /* =========================================================================
       PRIMARY ACCENT COLOR SYSTEM (To revert or change, simply comment/uncomment)
       ========================================================================= */
    /* --accent-primary: #d6715f; --text-primary-btn: #f7f5f3; --shadow-primary-btn: rgba(214, 113, 95, 0.15); */ /* OPTION A: Classic Terracotta (Sleek Orange - Original) */
    /* --accent-primary: #4a6b82; --text-primary-btn: #f7f5f3; --shadow-primary-btn: rgba(74, 107, 130, 0.15); */ /* OPTION B: Titanium Slate Blue (Cool corporate engineering) */
    --accent-primary: #e5c185; --text-primary-btn: #0a0909; --shadow-primary-btn: rgba(229, 193, 133, 0.2);      /* OPTION C: Luxe Champagne Gold (Solid Gold - ACTIVE) */
    /* --accent-primary: #1b4d3e; --text-primary-btn: #f7f5f3; --shadow-primary-btn: rgba(27, 77, 62, 0.15); */   /* OPTION D: Deep Emerald Teal (Eco & Sustainability) */
    
    /* Backward compatibility mapping to protect legacy references */
    --accent-terracotta: var(--accent-primary);
    
    --accent-gold: #e5c185;          /* Champagne Gold */
    --transition-artistic: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   LCT CUSTOM SCOPED CORE STYLES
   ============================================ */

.lct-body {
    background-color: var(--bg-dark) !important;
    color: var(--text-warm-gray) !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Make the technical blueprint background extremely faint, subtle, and elegant */
body::before, .lct-body::before {
    opacity: 0.02 !important; 
    filter: invert(1) brightness(1.6) contrast(110%) !important;
    transition: var(--transition-artistic) !important;
}

/* Scrollbar - Global application for all scrollable elements */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(229, 193, 133, 0.25); /* Subtle champagne gold */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(229, 193, 133, 0.6); /* Brighter gold on hover */
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(229, 193, 133, 0.3) rgba(0, 0, 0, 0.15);
}

/* Scoped Typography */
.lct-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 200 !important; /* Ultra-light and sophisticated */
    color: var(--text-sand) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
    margin: 0 0 0.5em 0 !important;
}

.lct-section-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 300 !important;
    color: var(--text-sand) !important;
    letter-spacing: -0.02em !important;
    font-size: 1.6em !important; /* Sleek, understated section titles */
    text-align: center !important;
    margin-bottom: 1em !important;
    position: relative !important;
}

.lct-section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--accent-gold);
    margin: 0.8em auto 0 auto;
    opacity: 0.5;
}

.lct-card-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.15em !important; /* Smaller, classy card title scale */
    color: var(--text-sand) !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 0.75em 0 !important;
}

.lct-text {
    font-size: 0.9em !important; /* High-end minimalist font scale */
    line-height: 1.8 !important;
    color: var(--text-warm-gray) !important;
    font-weight: 300 !important;
    margin-bottom: 1.5em !important;
}

/* ============================================
   LCT FLOATING HEADER
   ============================================ */

.lct-header {
    background: rgba(10, 9, 9, 0.75) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-bottom: 1px solid rgba(244, 241, 238, 0.03) !important;
    /* padding: 0 4rem !important; */ /* ORIGINAL: Reserved in case you want to revert */
    padding: 0 2rem 0 4rem !important; /* NEW: Moved menu slightly to the right */
    height: 5.5em !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

.lct-header .logo {
    display: flex !important;
    align-items: center !important;
    border: none !important;
    padding: 0 !important;
}

.lct-header .logo img {
    height: 64px !important; /* Elegant, larger corporate scale */
    width: auto !important;
    opacity: 0.95 !important;
    transition: var(--transition-artistic) !important;
}

.lct-header .logo:hover img {
    transform: scale(1.02);
    opacity: 1 !important;
}

#header nav a, #header nav a[href="#menu"], .lct-menu-trigger {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 300 !important; /* Dainty and sophisticated */
    font-size: 0.85em !important; /* Slightly larger, classy scale */
    letter-spacing: 0.16em !important; /* High-end tracking */
    text-transform: uppercase !important;
    height: 36px !important; /* Perfectly proportioned pill height */
    line-height: 34px !important;
    padding: 0 1.6rem !important;
    border-radius: 30px !important;
    border: 1px solid rgba(229, 193, 133, 0.22) !important; /* Brushed gold outline */
    color: var(--accent-gold) !important; /* Elegant gold text color */
    background: rgba(255, 255, 255, 0.01) !important;
    transition: var(--transition-artistic) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#header nav a[href="#menu"]::before,
.lct-menu-trigger::before {
    font-size: 0.9em !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    opacity: 0.85 !important;
    color: var(--accent-gold) !important;
}

#header nav a:hover, #header nav a[href="#menu"]:hover, .lct-menu-trigger:hover {
    border-color: var(--text-sand) !important;
    color: var(--text-sand) !important;
    background: rgba(244, 241, 238, 0.05) !important;
    box-shadow: 0 4px 15px rgba(229, 193, 133, 0.1) !important;
}

/* ============================================
   LCT HERO BANNER
   ============================================ */

.lct-hero {
    position: relative !important;
    height: 100vh !important;
    min-height: 40rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--bg-dark) !important;
    overflow: hidden !important;
}

.lct-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Soft warm vignette layering */
    background: radial-gradient(circle at center, rgba(10, 9, 9, 0.2) 0%, rgba(10, 9, 9, 0.75) 85%),
                linear-gradient(to bottom, rgba(10, 9, 9, 0.2), var(--bg-dark)) !important;
    z-index: 2 !important;
}

.lct-hero-inner {
    position: relative !important;
    z-index: 3 !important;
    max-width: 58rem !important;
    text-align: center !important;
    padding: 0 2.5rem !important;
}

.lct-hero h1 {
    font-size: 2.5em !important; /* Minimalist, classy title size */
    margin-bottom: 0.35em !important;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

.lct-hero p {
    font-size: 0.95em !important; /* Highly balanced, readable subtitle */
    line-height: 1.7 !important;
    color: var(--text-warm-gray) !important;
    max-width: 28rem !important;
    margin: 0 auto !important;
    font-weight: 200 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.lct-hero video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    opacity: 0.6 !important;
    filter: grayscale(50%) sepia(10%) brightness(90%) contrast(105%) !important;
}

/* ============================================
   LCT SPARK GRADIATED SECTIONS
   ============================================ */

.lct-section {
    padding: 9rem 0 !important;
    position: relative !important;
}

.lct-section-inner {
    max-width: 82rem !important;
    margin: 0 auto !important;
    padding: 0 2.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.lct-section.style-1 {
    background: radial-gradient(circle at 12% 20%, rgba(229, 193, 133, 0.02) 0%, transparent 45%),
                radial-gradient(circle at 88% 80%, rgba(224, 122, 104, 0.02) 0%, transparent 45%),
                var(--bg-dark) !important;
    border-top: 1px solid var(--border-thin) !important;
}

.lct-section.style-2 {
    background: radial-gradient(circle at 85% 15%, rgba(229, 193, 133, 0.02) 0%, transparent 48%),
                radial-gradient(circle at 15% 85%, rgba(224, 122, 104, 0.02) 0%, transparent 48%),
                var(--bg-dark-alt) !important;
    border-top: 1px solid var(--border-thin) !important;
    border-bottom: 1px solid var(--border-thin) !important;
}

/* ============================================
   LCT LUXURY GLASS CARDS
   ============================================ */

.lct-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3.5rem !important;
    margin-top: 2rem !important;
}

.lct-card {
    background: var(--bg-dark-card) !important;
    border: 1px solid var(--border-thin) !important;
    border-radius: 16px !important;
    padding: 4.5rem 3.5rem !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: var(--transition-artistic) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.lct-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--border-thin-hover) !important;
    background: var(--bg-card-hover) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 50px rgba(229, 193, 133, 0.03) !important;
}

/* ============================================
   LCT ARTISTIC GRID & IMAGE HARMONY
   ============================================ */

.lct-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3rem !important;
    width: 100% !important;
}

.lct-grid-card {
    background: var(--bg-dark-card) !important;
    border: 1px solid var(--border-thin) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: var(--transition-artistic) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.lct-grid-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--border-thin-hover) !important;
    background: var(--bg-card-hover) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 50px rgba(229, 193, 133, 0.03) !important;
}

/* High-fidelity photography treatment overlay */
.lct-img-wrap {
    width: 100% !important;
    height: 135px !important; /* Shrimped down snapshot size */
    overflow: hidden !important;
    border-radius: 10px !important;
    margin-bottom: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
}

.lct-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: grayscale(100%) sepia(20%) brightness(75%) contrast(110%) !important;
    mix-blend-mode: luminosity !important;
    opacity: 0.88 !important;
    transition: var(--transition-artistic) !important;
}

.lct-grid-card:hover .lct-img-wrap img {
    filter: grayscale(15%) sepia(5%) brightness(92%) contrast(100%) !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    transform: scale(1.03) !important;
}

/* ============================================
   LCT EDITORIAL SPOTLIGHT
   ============================================ */

.lct-spotlight-card {
    background: linear-gradient(135deg, rgba(20, 18, 17, 0.8) 0%, rgba(26, 23, 21, 0.9) 100%) !important;
    border: 1px solid var(--border-accent) !important;
    border-left: 3px solid var(--accent-primary) !important;
    border-radius: 16px !important;
    padding: 3.5rem 3rem !important; /* Reduced padding for cleaner proportions */
    text-align: center !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
    transition: var(--transition-artistic) !important;
    max-width: 46rem !important; /* Constrains card width */
    margin: 0 auto !important;    /* Centers it on the page */
}

.lct-spotlight-card:hover {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 35px 80px rgba(229, 193, 133, 0.08) !important;
    transform: translateY(-2px) !important;
}

.lct-spotlight-card h3 {
    font-size: 1.8em !important;
    font-weight: 300 !important;
    color: var(--text-sand) !important;
    margin-bottom: 0.5em !important;
}

.lct-spotlight-card p {
    font-size: 1.1em !important;
    line-height: 1.8 !important;
    max-width: 44rem !important;
    margin: 0 auto 2rem auto !important;
    color: var(--text-warm-gray) !important;
    font-weight: 300 !important;
}

/* ============================================
   LCT ELEGANT STATS
   ============================================ */

.lct-stat-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
    margin-top: 2rem !important;
}

.lct-stat-card {
    background: var(--bg-dark-card) !important;
    border: 1px solid var(--border-thin) !important;
    border-radius: 10px !important;
    padding: 2.2rem 1.2rem !important; /* Shrimped down stat cards padding */
    text-align: center !important;
    transition: var(--transition-artistic) !important;
}

.lct-stat-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--border-thin-hover) !important;
    background: var(--bg-card-hover) !important;
}

.lct-stat-card h3 {
    font-size: 1.75em !important; /* Shrimped down stat font size */
    font-weight: 200 !important;
    color: var(--accent-gold) !important;
    margin: 0 0 0.15em 0 !important;
    letter-spacing: -0.03em !important;
}

.lct-stat-card p {
    font-size: 0.62em !important; /* Shrimped down label */
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
}

.lct-stat-card:hover p {
    color: var(--text-warm-gray) !important;
}

/* ============================================
   LCT PREMIUM PILL BUTTONS (.LCT-BTN)
   ============================================ */

.lct-btn-group {
    display: flex !important;
    gap: 1.5rem !important;
    margin-top: auto !important;
    padding-top: 1.5rem !important;
}

.lct-card .lct-btn-group {
    justify-content: center !important; /* Horizontally center all buttons in cards */
    gap: 1.2rem !important; /* Classy, tight spacing for card buttons */
}

.lct-btn-group.center {
    justify-content: center !important;
}

.lct-btn {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.8em !important; /* Dainty and sophisticated scale */
    font-weight: 400 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0 1.8rem !important; /* Elegantly compact padding to prevent side-by-side overflow */
    height: 3.6em !important;
    line-height: 3.6em !important;
    border-radius: 30px !important; /* Perfect rounded luxury pill shape */
    border: 1px solid rgba(229, 193, 133, 0.4) !important; /* Elegant gold outline */
    background: transparent !important;
    color: var(--accent-gold) !important;
    transition: var(--transition-artistic) !important;
    text-decoration: none !important;
    display: inline-flex !important; /* High-end flex alignment */
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important; /* Never wrap button text */
    cursor: pointer !important;
}

.lct-btn:hover {
    background: rgba(229, 193, 133, 0.05) !important;
    color: var(--text-sand) !important;
    border-color: var(--text-sand) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(229, 193, 133, 0.05) !important;
}

.lct-btn.primary {
    background: var(--accent-primary) !important;
    border: 1px solid var(--accent-primary) !important;
    color: var(--text-primary-btn) !important;
    font-weight: 500 !important; /* Premium semi-bold weights for high contrast */
}

.lct-btn.primary:hover {
    background: transparent !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 8px 30px var(--shadow-primary-btn) !important;
}

/* ============================================
   LCT VALUE PROP & CTA
   ============================================ */

.lct-cta-wrap {
    text-align: center !important;
    background: radial-gradient(circle at center, rgba(224, 122, 104, 0.02) 0%, transparent 70%),
                var(--bg-dark-alt) !important;
    border-top: 1px solid var(--border-thin) !important;
    border-bottom: 1px solid var(--border-thin) !important;
}

.lct-cta-wrap .lct-title {
    font-size: 2.4em !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.8em !important;
}

.lct-cta-wrap p {
    font-size: 1.15em !important;
    line-height: 1.85 !important;
    color: var(--text-warm-gray) !important;
    max-width: 48rem !important;
    margin: 0 auto 2rem auto !important;
    font-weight: 300 !important;
}

.lct-cta-wrap p strong {
    color: var(--accent-gold) !important;
}

/* ============================================
   LCT MINIMALIST FOOTER
   ============================================ */

.lct-footer {
    background: var(--bg-dark) !important;
    border-top: 1px solid var(--border-thin) !important;
    padding: 8rem 0 5rem 0 !important;
}

.lct-footer-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 4rem !important;
    margin-bottom: 4rem !important;
}

.lct-footer-col h3 {
    font-size: 1.05em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--text-sand) !important;
    margin-bottom: 2rem !important;
    font-weight: 500 !important;
}

.lct-footer-col p {
    font-size: 0.95em !important;
    line-height: 1.8 !important;
    color: var(--text-warm-gray) !important;
    font-weight: 300 !important;
}

.lct-footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.lct-footer-links li {
    padding: 0.5rem 0 !important;
    border-top: 1px solid rgba(244, 241, 238, 0.02) !important;
}

.lct-footer-links li:first-child {
    border-top: none !important;
}

.lct-footer-links li a {
    color: var(--text-warm-gray) !important;
    text-decoration: none !important;
    font-size: 0.95em !important;
    transition: var(--transition-artistic) !important;
    display: inline-block !important;
}

.lct-footer-links li a:hover {
    color: var(--accent-gold) !important;
    transform: translateX(4px) !important;
}

.lct-footer-copyright {
    border-top: 1px solid rgba(244, 241, 238, 0.03) !important;
    padding-top: 2.5rem !important;
    color: var(--text-muted) !important;
    font-size: 0.85em !important;
    text-align: center !important;
}

/* ============================================
   LCT RESPONSIVE ENGINE
   ============================================ */

@media screen and (max-width: 1280px) {
    .lct-hero h1 { font-size: 4.2em !important; }
    .lct-section { padding: 7rem 0 !important; }
}

@media screen and (max-width: 980px) {
    .lct-hero h1 { font-size: 3.5em !important; }
    .lct-hero p { font-size: 1.2em !important; }
    .lct-grid-2 { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
    .lct-grid-3 { grid-template-columns: 1fr 1fr !important; gap: 2.5rem !important; }
    .lct-stat-row { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
    .lct-footer-grid { grid-template-columns: 1fr !important; gap: 3rem !important; }
    .lct-section { padding: 6rem 0 !important; }
}

@media screen and (max-width: 736px) {
    .lct-hero h1 { font-size: 2.5em !important; }
    .lct-hero p { font-size: 1.1em !important; }
    .lct-grid-3 { grid-template-columns: 1fr !important; }
    .lct-stat-row { grid-template-columns: 1fr !important; }
    .lct-card { padding: 3rem 2rem !important; }
    .lct-spotlight-card { padding: 3.5rem 2rem !important; }
    .lct-btn-group { flex-direction: column !important; gap: 1rem !important; }
    .lct-btn { width: 100% !important; box-sizing: border-box !important; }
}

/* ============================================
   LCT SUBPAGE & DYNAMIC MODULES HARMONY
   ============================================ */

/* 1. Subpage Heading Overrides */
#heading, .lct-heading {
    position: relative !important;
    padding: 8rem 0 4rem 0 !important;
    text-align: center !important;
    background: radial-gradient(circle at center, rgba(224, 122, 104, 0.05) 0%, rgba(10, 9, 9, 0.95) 80%),
                linear-gradient(to bottom, rgba(10, 9, 9, 0.6), var(--bg-dark)) !important;
    border-bottom: 1px solid transparent !important;
    /* Glowing fading gold bottom border (Option 1) */
    border-image: linear-gradient(to right, transparent, rgba(229, 193, 133, 0.45) 25%, rgba(229, 193, 133, 0.45) 75%, transparent) 1 !important;
}
#heading h1, .lct-heading h1 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 200 !important;
    font-size: 2.8em !important;
    letter-spacing: -0.02em !important;
    color: var(--text-sand) !important;
    margin: 0 !important;
}
#heading h1::after, .lct-heading h1::after {
    content: '' !important;
    display: block !important;
    width: 45px !important;
    height: 1px !important;
    background: #e5c185 !important; /* Gold accent matching your Champagne Gold theme */
    margin: 1.2rem auto 0 auto !important;
    opacity: 0.85 !important;
    box-shadow: 0 0 6px rgba(229, 193, 133, 0.5) !important; /* Soft premium gold glow */
    transition: all 0.5s ease !important;
}
#heading p, .lct-heading p {
    font-size: 1.05em !important;
    color: var(--text-warm-gray) !important;
    margin-top: 1rem !important;
    font-weight: 300 !important;
}



/* 2. Global Subpage Layout Adjustments */
.wrapper, #main.wrapper {
    background-color: transparent !important;
    color: var(--text-warm-gray) !important;
    padding: 5rem 0 !important;
}
.content, #main .content, #main > .inner > .content {
    background: rgba(22, 20, 19, 0.45) !important;
    border: 1px solid rgba(229, 193, 133, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
    border-radius: 16px !important;
    color: var(--text-warm-gray) !important;
    padding: 4rem 3.5rem !important;
}
.wrapper h2, #main.wrapper h2 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 300 !important;
    font-size: 1.8em !important;
    color: var(--text-sand) !important;
    letter-spacing: -0.01em !important;
}
.wrapper h3, #main.wrapper h3 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.35em !important;
    color: var(--text-sand) !important;
}
.wrapper h4, #main.wrapper h4 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.1em !important;
    color: var(--text-sand) !important;
}
.wrapper p, .wrapper li, #main.wrapper p, #main.wrapper li {
    font-size: 0.92em !important;
    line-height: 1.75 !important;
    color: var(--text-warm-gray) !important;
    font-weight: 300 !important;
}

/* 3. Form inputs (for Employment, Contact, and Portals) */
input[type="text"], input[type="password"], input[type="email"], select, textarea {
    background: rgba(22, 20, 19, 0.45) !important;
    border: 1px solid rgba(229, 193, 133, 0.12) !important;
    color: var(--text-sand) !important;
    border-radius: 6px !important;
    padding: 0.75rem 1rem !important;
    transition: var(--transition-artistic) !important;
    font-family: 'Inter', sans-serif !important;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 10px rgba(229, 193, 133, 0.1) !important;
    background: rgba(28, 25, 23, 0.7) !important;
    outline: none !important;
}

/* 4. Custom Box & Table styling */
.box {
    background: rgba(22, 20, 19, 0.45) !important;
    border: 1px solid var(--border-thin) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}
.table-wrapper table.alt tbody td {
    background: rgba(22, 20, 19, 0.3) !important;
    color: var(--text-warm-gray) !important;
    border-bottom: 1px solid rgba(229, 193, 133, 0.05) !important;
    padding: 1rem 1.25rem !important;
}
.table-wrapper table.alt thead th {
    background: rgba(22, 20, 19, 0.05) !important;
    color: var(--text-sand) !important;
    border-bottom: 2px solid rgba(229, 193, 133, 0.15) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 500 !important;
}

/* 5. Custom Horizontal Rules */
hr {
    border: 0 !important;
    border-bottom: 1px solid rgba(229, 193, 133, 0.08) !important;
    margin: 3rem 0 !important;
}

/* ============================================
   LCT ADMINISTRATIVE & CLIENT PORTAL SYSTEM
   ============================================ */

.admin-container, .portal-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2em;
}

.upload-box {
    background: rgba(22, 20, 19, 0.45) !important;
    border: 1px solid rgba(229, 193, 133, 0.08) !important;
    padding: 2.5rem !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.tree-container, .file-list {
    margin-top: 2em;
    background: rgba(22, 20, 19, 0.3) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(229, 193, 133, 0.08) !important;
    padding: 1.5em !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.folder-details {
    margin-bottom: 0.25em;
}

.folder-summary {
    padding: 0.4em 0.5em;
    font-weight: 500;
    color: var(--accent-gold) !important;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    transition: background 0.1s;
    border-radius: 4px;
}

.folder-summary::-webkit-details-marker {
    display: none;
}

.folder-summary:hover {
    background: rgba(244, 241, 238, 0.05) !important;
}

.tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    border: 1px dotted #888;
    font-size: 10px;
    color: #555;
    font-weight: normal;
    background: #fff;
    margin-right: 15px;
    position: relative;
}

.tree-toggle::after {
    content: "+";
    position: relative;
    top: -0.5px;
}

.folder-details[open] .tree-toggle::after {
    content: "-";
    top: -1px;
}

.folder-icon {
    color: #f39c12;
    font-size: 1.15em;
    margin-right: 10px;
}

.folder-details[open] .folder-icon::before {
    content: "\f07c";
}

.folder-content {
    padding-left: 2.2em;
    margin-top: 0.3em;
    border-left: 1px dotted #ccc;
    margin-left: 0.8em;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6em 0.8em;
    margin: 0.2em 0;
    border-bottom: 1px solid rgba(229, 193, 133, 0.05);
}

.file-item:last-child {
    border-bottom: none;
}

.file-item:hover {
    background: rgba(244, 241, 238, 0.05) !important;
    border-radius: 4px;
}

.file-item-name {
    color: var(--text-warm-gray);
    font-size: 0.95em;
    display: flex;
    align-items: center;
}

.file-item-name i {
    color: var(--accent-gold);
    margin-right: 8px;
}

.status-message {
    margin-top: 1em;
    padding: 1em;
    border-radius: 4px;
}

.status-success {
    background: rgba(46, 125, 50, 0.15) !important;
    border: 1px solid #2e7d32 !important;
    color: #81c784 !important;
}

.status-error {
    background: rgba(198, 40, 40, 0.15) !important;
    border: 1px solid #c62828 !important;
    color: #e57373 !important;
}

.error-message {
    display: block;
    margin-top: 0.8em;
    padding: 0.6em 1em;
    background: rgba(198, 40, 40, 0.15) !important;
    border: 1px solid #c62828 !important;
    border-left: 3px solid #c62828 !important;
    border-radius: 0 4px 4px 0;
    color: #e57373 !important;
    font-size: 0.88em;
    font-weight: bold;
}

/* ============================================
   LCT UTILITY & DISCIPLINE PORTAL OVERRIDES
   ============================================ */

/* 1. Equal height row flex card layouts */
section.wrapper .row:has(.box) {
    display: flex !important;
    flex-wrap: wrap !important;
}

section.wrapper .row:has(.box) > [class*="col-"] {
    display: flex !important;
}

section.wrapper .row:has(.box) > [class*="col-"] > .box {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

section.wrapper .row:has(.box) > [class*="col-"] > .box ul {
    flex-grow: 1 !important;
}

/* 2. Solutions & Deliverables Components */
.solution-card {
    background: rgba(22, 20, 19, 0.45) !important;
    border: 1px solid rgba(229, 193, 133, 0.08) !important;
    border-left: 3px solid var(--accent-gold) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: var(--transition-artistic) !important;
    box-sizing: border-box !important;
}

.solution-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(229, 193, 133, 0.3) !important;
    background: rgba(28, 25, 23, 0.7) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35) !important;
}

.deliverables-list {
    font-size: 0.88em !important;
    line-height: 1.8 !important;
    color: var(--text-warm-gray) !important;
    font-weight: 300 !important;
    list-style-type: none !important;
    padding-left: 0 !important;
}

.deliverables-list li {
    margin-bottom: 0.3em !important;
    position: relative !important;
    padding-left: 1.25em !important;
}

.deliverables-list li::before {
    content: "▪" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--accent-gold) !important;
}

/* 3. Centralized accent highlight box */
.lct-accent-box {
    border-left: 4px solid var(--accent-gold) !important;
    padding: 2.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    background: var(--bg-dark-card) !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important;
}

/* 4. Table Alignment & Padding Custom Override */
.table-wrapper table.alt thead th {
    text-align: left !important;
    vertical-align: middle !important;
    padding: 1em 1.25em !important;
}
.table-wrapper table.alt tbody td {
    text-align: left !important;
    vertical-align: middle !important;
    padding: 0.9em 1.25em !important;
}

/* 5. Custom Equal Height Rows for "How It Works" and other dynamic layouts */
.lct-equal-height-row {
    display: flex !important;
    flex-wrap: wrap !important;
}
.lct-equal-height-row > [class*="col-"] {
    display: flex !important;
}
.lct-equal-height-row .box {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}
@media screen and (max-width: 980px) {
    .lct-equal-height-row > [class*="col-"] {
        display: block !important;
    }
    .lct-equal-height-row .box {
        height: auto !important;
    }
}

/* 6. Career Submission Confirmation & Status Boxes */
.confirmation-box {
    background: var(--bg-dark-card) !important;
    border: 1px solid rgba(40, 167, 69, 0.4) !important;
    border-left: 4px solid #28a745 !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    margin-top: 2rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
.confirmation-box h4 {
    color: #28a745 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    font-family: 'Outfit', sans-serif !important;
}
.confirmation-box p {
    color: var(--text-warm-gray) !important;
    margin-bottom: 0.5rem !important;
}

/* 7. Contact Page Success Banner */
.lct-success-box {
    background: rgba(40, 167, 69, 0.08) !important;
    border: 1px solid rgba(40, 167, 69, 0.3) !important;
    border-left: 4px solid #28a745 !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
.lct-success-box h4 {
    color: #28a745 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    font-family: 'Outfit', sans-serif !important;
}

/* 8. Contact & HR Info Monospace Styling */
.lct-monospace {
    font-family: 'Courier New', Courier, monospace !important;
}