/*
 * Industrial Theme CSS
 * A dark, professional theme for pneumatics and tanker repair websites
 *
 * Table of Contents:
 * 1. Variables - Custom properties for colors, spacing, typography
 * 2. Base - Reset and foundational styles
 * 3. Animations - Keyframes and animation utilities
 * 4. Navigation - Header, mobile menu, emergency banner
 * 5. Hero - Parallax hero section
 * 6. Services - Service cards with 3D effects
 * 7. Stats - Counter section
 * 8. Portfolio - Portfolio cards and before/after slider
 * 9. Footer - Industrial footer
 * 10. Utilities - Helper classes
 */

/* ==========================================================================
   1. Variables
   ========================================================================== */

/* Industrial Theme CSS Variables */
:root {
    /* Color Palette */
    --ind-primary: #BA0E0B;
    --ind-primary-dark: #8B0A08;
    --ind-primary-light: #D41F1C;
    --ind-primary-glow: rgba(186, 14, 11, 0.4);

    --ind-bg-dark: #1A1A1A;
    --ind-charcoal: #272727;
    --ind-graphite: #3D3D3D;
    --ind-steel: #4A4A4A;

    --ind-text-primary: #FFFFFF;
    --ind-text-secondary: #B8B8B8;
    --ind-text-muted: #888888;

    --ind-emergency: #EF4444;
    --ind-success: #22C55E;
    --ind-warning: #F59E0B;

    /* Typography */
    --ind-font-body: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
    --ind-font-display: 'Barlow Condensed', 'Barlow', sans-serif;

    /* Font Weights */
    --ind-fw-light: 300;
    --ind-fw-normal: 400;
    --ind-fw-medium: 500;
    --ind-fw-semibold: 600;
    --ind-fw-bold: 700;
    --ind-fw-black: 900;

    /* Spacing Scale */
    --ind-space-xs: 0.25rem;
    --ind-space-sm: 0.5rem;
    --ind-space-md: 1rem;
    --ind-space-lg: 1.5rem;
    --ind-space-xl: 2rem;
    --ind-space-2xl: 3rem;
    --ind-space-3xl: 4rem;
    --ind-space-4xl: 6rem;

    /* Border Radius */
    --ind-radius-sm: 4px;
    --ind-radius-md: 8px;
    --ind-radius-lg: 12px;
    --ind-radius-xl: 16px;

    /* Shadows */
    --ind-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --ind-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --ind-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --ind-shadow-glow: 0 0 20px var(--ind-primary-glow);

    /* Transitions */
    --ind-transition-fast: 150ms ease;
    --ind-transition-normal: 250ms ease;
    --ind-transition-slow: 400ms ease;
    --ind-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-Index Scale */
    --ind-z-base: 0;
    --ind-z-dropdown: 100;
    --ind-z-sticky: 200;
    --ind-z-fixed: 300;
    --ind-z-modal-backdrop: 400;
    --ind-z-modal: 500;
    --ind-z-popover: 600;
    --ind-z-tooltip: 700;

    /* Header Heights */
    --ind-header-height: 80px;
    --ind-header-height-scrolled: 64px;
    --ind-emergency-banner-height: 40px;

    /* Container Widths */
    --ind-container-sm: 640px;
    --ind-container-md: 768px;
    --ind-container-lg: 1024px;
    --ind-container-xl: 1280px;
    --ind-container-2xl: 1536px;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    :root {
        --ind-header-height: 64px;
        --ind-header-height-scrolled: 56px;
        --ind-space-3xl: 3rem;
        --ind-space-4xl: 4rem;
    }
}

/* ==========================================================================
   2. Base
   ========================================================================== */

/* Dark Theme Base Styles */

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.industrial-theme {
    font-family: var(--ind-font-body);
    font-weight: var(--ind-fw-normal);
    line-height: 1.6;
    color: var(--ind-text-primary);
    background-color: var(--ind-bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
.industrial-theme h1,
.industrial-theme h2,
.industrial-theme h3,
.industrial-theme h4,
.industrial-theme h5,
.industrial-theme h6,
.industrial-theme .ind-heading {
    font-family: var(--ind-font-display);
    font-weight: var(--ind-fw-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.industrial-theme h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
.industrial-theme h2 { font-size: clamp(2rem, 4vw, 3rem); }
.industrial-theme h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.industrial-theme h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.industrial-theme h5 { font-size: 1.25rem; }
.industrial-theme h6 { font-size: 1rem; }

/* Links */
.industrial-theme a {
    color: var(--ind-text-primary);
    text-decoration: none;
    transition: color var(--ind-transition-fast);
}

.industrial-theme a:hover {
    color: var(--ind-primary);
}

/* Focus States */
.industrial-theme *:focus-visible {
    outline: 2px solid var(--ind-primary);
    outline-offset: 2px;
}

/* Selection */
.industrial-theme ::selection {
    background-color: var(--ind-primary);
    color: var(--ind-text-primary);
}

/* Scrollbar Styling */
.industrial-theme ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.industrial-theme ::-webkit-scrollbar-track {
    background: var(--ind-bg-dark);
}

.industrial-theme ::-webkit-scrollbar-thumb {
    background: var(--ind-graphite);
    border-radius: 5px;
}

.industrial-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--ind-steel);
}

/* Container */
.ind-container {
    width: 100%;
    max-width: var(--ind-container-xl);
    margin: 0 auto;
    padding-left: var(--ind-space-lg);
    padding-right: var(--ind-space-lg);
}

@media (max-width: 768px) {
    .ind-container {
        padding-left: var(--ind-space-md);
        padding-right: var(--ind-space-md);
    }
}

/* Sections */
.ind-section {
    padding: var(--ind-space-4xl) 0;
}

.ind-section--dark {
    background-color: var(--ind-bg-dark);
}

.ind-section--charcoal {
    background-color: var(--ind-charcoal);
}

.ind-section--graphite {
    background-color: var(--ind-graphite);
}

/* Cards */
.ind-card {
    background-color: var(--ind-charcoal);
    border-radius: var(--ind-radius-lg);
    overflow: hidden;
    transition: transform var(--ind-transition-normal), box-shadow var(--ind-transition-normal);
}

.ind-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ind-shadow-lg);
}

/* Buttons */
.ind-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ind-space-sm);
    padding: var(--ind-space-md) var(--ind-space-xl);
    font-family: var(--ind-font-display);
    font-weight: var(--ind-fw-semibold);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--ind-radius-sm);
    cursor: pointer;
    transition: all var(--ind-transition-normal);
}

.ind-btn--primary {
    background-color: var(--ind-primary);
    color: var(--ind-text-primary);
}

.ind-btn--primary:hover {
    background-color: var(--ind-primary-dark);
    box-shadow: var(--ind-shadow-glow);
    transform: translateY(-2px);
}

.ind-btn--outline {
    background-color: transparent;
    color: var(--ind-text-primary);
    border: 2px solid var(--ind-primary);
}

.ind-btn--outline:hover {
    background-color: var(--ind-primary);
    box-shadow: var(--ind-shadow-glow);
}

.ind-btn--large {
    padding: var(--ind-space-lg) var(--ind-space-2xl);
    font-size: 1.125rem;
}

.ind-btn--pulse {
    animation: btnPulse 2s infinite;
}

/* Dividers */
.ind-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ind-graphite), transparent);
    border: none;
    margin: var(--ind-space-xl) 0;
}

/* Badge */
.ind-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ind-space-xs);
    padding: var(--ind-space-xs) var(--ind-space-sm);
    font-size: 0.75rem;
    font-weight: var(--ind-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--ind-radius-sm);
    background-color: var(--ind-primary);
    color: var(--ind-text-primary);
}

.ind-badge--emergency {
    background-color: var(--ind-emergency);
    animation: emergencyPulse 1.5s infinite;
}

/* Text Colors */
.ind-text-primary { color: var(--ind-text-primary); }
.ind-text-secondary { color: var(--ind-text-secondary); }
.ind-text-muted { color: var(--ind-text-muted); }
.ind-text-accent { color: var(--ind-primary); }

/* Background Colors */
.ind-bg-dark { background-color: var(--ind-bg-dark); }
.ind-bg-charcoal { background-color: var(--ind-charcoal); }
.ind-bg-graphite { background-color: var(--ind-graphite); }

/* MudBlazor Overrides for Dark Theme */
.industrial-theme .mud-theme-primary {
    color: var(--ind-primary) !important;
}

.industrial-theme .mud-paper {
    background-color: var(--ind-charcoal);
    color: var(--ind-text-primary);
}

.industrial-theme .mud-input-control {
    color: var(--ind-text-primary);
}

.industrial-theme .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ind-graphite);
}

.industrial-theme .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--ind-primary);
}

.industrial-theme .mud-input-control-input-container input,
.industrial-theme .mud-input-control-input-container textarea {
    color: var(--ind-text-primary) !important;
}

.industrial-theme .mud-input-label {
    color: var(--ind-text-secondary) !important;
}

/* ==========================================================================
   3. Animations
   ========================================================================== */

/* Industrial Theme Animations */

/* Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes bounceOnce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes btnPulse {
    0% {
        box-shadow: 0 0 0 0 var(--ind-primary-glow);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(186, 14, 11, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(186, 14, 11, 0);
    }
}

@keyframes emergencyPulse {
    0%, 100% {
        background-color: var(--ind-emergency);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        background-color: #DC2626;
        box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.3);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--ind-primary-glow);
    }
    50% {
        box-shadow: 0 0 20px var(--ind-primary-glow), 0 0 30px var(--ind-primary-glow);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-10px) rotate(5deg);
    }
    66% {
        transform: translateY(5px) rotate(-3deg);
    }
}

@keyframes scrollIndicator {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes borderGrow {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Animation Classes */
.ind-animate {
    opacity: 0;
    transition: opacity var(--ind-transition-slow), transform var(--ind-transition-slow);
}

.ind-animate.is-visible {
    opacity: 1;
}

.ind-animate--fade-up {
    transform: translateY(30px);
}

.ind-animate--fade-up.is-visible {
    transform: translateY(0);
}

.ind-animate--fade-down {
    transform: translateY(-30px);
}

.ind-animate--fade-down.is-visible {
    transform: translateY(0);
}

.ind-animate--fade-left {
    transform: translateX(-30px);
}

.ind-animate--fade-left.is-visible {
    transform: translateX(0);
}

.ind-animate--fade-right {
    transform: translateX(30px);
}

.ind-animate--fade-right.is-visible {
    transform: translateX(0);
}

.ind-animate--scale {
    transform: scale(0.9);
}

.ind-animate--scale.is-visible {
    transform: scale(1);
}

/* Stagger Delays */
.ind-stagger-1 { transition-delay: 100ms; }
.ind-stagger-2 { transition-delay: 200ms; }
.ind-stagger-3 { transition-delay: 300ms; }
.ind-stagger-4 { transition-delay: 400ms; }
.ind-stagger-5 { transition-delay: 500ms; }
.ind-stagger-6 { transition-delay: 600ms; }

/* Hover Animations */
.ind-hover-lift {
    transition: transform var(--ind-transition-normal);
}

.ind-hover-lift:hover {
    transform: translateY(-4px);
}

.ind-hover-scale {
    transition: transform var(--ind-transition-normal);
}

.ind-hover-scale:hover {
    transform: scale(1.05);
}

.ind-hover-glow {
    transition: box-shadow var(--ind-transition-normal);
}

.ind-hover-glow:hover {
    box-shadow: var(--ind-shadow-glow);
}

/* Continuous Animations */
.ind-bounce {
    animation: bounce 2s infinite;
}

.ind-pulse {
    animation: pulse 2s infinite;
}

.ind-spin {
    animation: spin 3s linear infinite;
}

.ind-float {
    animation: float 6s ease-in-out infinite;
}

.ind-glow {
    animation: glow 2s ease-in-out infinite;
}

/* Word Reveal Animation */
.ind-word-reveal {
    display: inline-block;
    overflow: hidden;
}

.ind-word-reveal span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.ind-word-reveal.is-visible span {
    transform: translateY(0);
}

/* Counter Animation Helper */
.ind-counter {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ind-animate {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   4. Navigation
   ========================================================================== */

/* Industrial Navigation Styles */

/* Emergency Banner */
.ind-emergency-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--ind-z-fixed);
    background: linear-gradient(90deg, var(--ind-bg-dark) 0%, var(--ind-charcoal) 50%, var(--ind-bg-dark) 100%);
    border-bottom: 1px solid var(--ind-graphite);
    height: var(--ind-emergency-banner-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ind-space-md);
    font-size: 0.875rem;
}

.ind-emergency-indicator {
    display: flex;
    align-items: center;
    gap: var(--ind-space-sm);
}

.ind-emergency-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ind-emergency);
    animation: emergencyPulse 1.5s infinite;
}

.ind-emergency-text {
    color: var(--ind-text-primary);
    font-weight: var(--ind-fw-semibold);
}

.ind-emergency-phone {
    color: var(--ind-primary);
    font-weight: var(--ind-fw-bold);
    text-decoration: none;
    transition: color var(--ind-transition-fast);
}

.ind-emergency-phone:hover {
    color: var(--ind-primary-light);
}

/* Header */
.ind-header {
    position: fixed;
    top: var(--ind-emergency-banner-height);
    left: 0;
    right: 0;
    z-index: var(--ind-z-sticky);
    height: var(--ind-header-height);
    transition: all var(--ind-transition-normal);
}

.ind-header--no-banner {
    top: 0;
}

.ind-header--transparent {
    background-color: transparent;
}

.ind-header--solid {
    background-color: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--ind-shadow-md);
    height: var(--ind-header-height-scrolled);
}

.ind-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--ind-space-lg);
    max-width: var(--ind-container-xl);
    margin: 0 auto;
}

/* Logo */
.ind-logo {
    display: flex;
    align-items: center;
    gap: var(--ind-space-sm);
    text-decoration: none;
    color: var(--ind-text-primary);
    transition: opacity var(--ind-transition-fast);
}

.ind-logo:hover {
    opacity: 0.9;
    color: var(--ind-text-primary);
}

.ind-logo__image {
    height: 48px;
    width: auto;
    transition: height var(--ind-transition-normal);
}

.ind-header--solid .ind-logo__image {
    height: 40px;
}

.ind-logo__text {
    font-family: var(--ind-font-display);
    font-size: 1.5rem;
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ind-logo__text span {
    color: var(--ind-primary);
}

/* Desktop Navigation */
.ind-nav {
    display: flex;
    align-items: center;
    gap: var(--ind-space-xl);
}

.ind-nav__list {
    display: flex;
    align-items: center;
    gap: var(--ind-space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ind-nav__link {
    position: relative;
    padding: var(--ind-space-sm) 0;
    font-family: var(--ind-font-display);
    font-size: 0.9rem;
    font-weight: var(--ind-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ind-text-primary);
    text-decoration: none;
    transition: color var(--ind-transition-fast);
}

.ind-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--ind-primary);
    transition: width var(--ind-transition-normal);
}

.ind-nav__link:hover,
.ind-nav__link--active {
    color: var(--ind-primary);
}

.ind-nav__link:hover::after,
.ind-nav__link--active::after {
    width: 100%;
}

/* CTA Button in Nav */
.ind-nav__cta {
    margin-left: var(--ind-space-md);
}

/* Mobile Menu Button (Hamburger) */
.ind-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: calc(var(--ind-z-modal) + 1);
}

.ind-hamburger__line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--ind-text-primary);
    border-radius: 1px;
    transition: all var(--ind-transition-normal);
}

.ind-hamburger__line:nth-child(1) {
    transform: translateY(-6px);
}

.ind-hamburger__line:nth-child(3) {
    transform: translateY(6px);
}

/* Hamburger to X Animation */
.ind-hamburger--open .ind-hamburger__line:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

.ind-hamburger--open .ind-hamburger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.ind-hamburger--open .ind-hamburger__line:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
}

/* Mobile Menu Overlay */
.ind-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background-color: var(--ind-charcoal);
    z-index: var(--ind-z-modal);
    transform: translateX(100%);
    transition: transform var(--ind-transition-slow);
    overflow-y: auto;
    padding: calc(var(--ind-header-height) + var(--ind-emergency-banner-height) + var(--ind-space-xl)) var(--ind-space-xl) var(--ind-space-xl);
}

.ind-mobile-menu--open {
    transform: translateX(0);
}

.ind-mobile-menu__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: calc(var(--ind-z-modal) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ind-transition-normal), visibility var(--ind-transition-normal);
}

.ind-mobile-menu__backdrop--visible {
    opacity: 1;
    visibility: visible;
}

.ind-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ind-mobile-menu__item {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity var(--ind-transition-normal), transform var(--ind-transition-normal);
}

.ind-mobile-menu--open .ind-mobile-menu__item {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered animation for menu items */
.ind-mobile-menu--open .ind-mobile-menu__item:nth-child(1) { transition-delay: 100ms; }
.ind-mobile-menu--open .ind-mobile-menu__item:nth-child(2) { transition-delay: 150ms; }
.ind-mobile-menu--open .ind-mobile-menu__item:nth-child(3) { transition-delay: 200ms; }
.ind-mobile-menu--open .ind-mobile-menu__item:nth-child(4) { transition-delay: 250ms; }
.ind-mobile-menu--open .ind-mobile-menu__item:nth-child(5) { transition-delay: 300ms; }
.ind-mobile-menu--open .ind-mobile-menu__item:nth-child(6) { transition-delay: 350ms; }
.ind-mobile-menu--open .ind-mobile-menu__item:nth-child(7) { transition-delay: 400ms; }

.ind-mobile-menu__link {
    display: block;
    padding: var(--ind-space-md) 0;
    font-family: var(--ind-font-display);
    font-size: 1.5rem;
    font-weight: var(--ind-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ind-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--ind-graphite);
    transition: color var(--ind-transition-fast), padding-left var(--ind-transition-fast);
}

.ind-mobile-menu__link:hover,
.ind-mobile-menu__link--active {
    color: var(--ind-primary);
    padding-left: var(--ind-space-md);
}

.ind-mobile-menu__cta {
    margin-top: var(--ind-space-xl);
    width: 100%;
}

/* Contact Info in Mobile Menu */
.ind-mobile-menu__contact {
    margin-top: var(--ind-space-2xl);
    padding-top: var(--ind-space-xl);
    border-top: 1px solid var(--ind-graphite);
}

.ind-mobile-menu__contact-item {
    display: flex;
    align-items: center;
    gap: var(--ind-space-sm);
    margin-bottom: var(--ind-space-md);
    color: var(--ind-text-secondary);
    font-size: 0.9rem;
}

.ind-mobile-menu__contact-item a {
    color: var(--ind-text-secondary);
}

.ind-mobile-menu__contact-item a:hover {
    color: var(--ind-primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .ind-nav {
        display: none;
    }

    .ind-hamburger {
        display: flex;
    }
}

@media (max-width: 768px) {
    .ind-emergency-banner {
        font-size: 0.75rem;
        padding: 0 var(--ind-space-sm);
    }

    .ind-header__container {
        padding: 0 var(--ind-space-md);
    }

    .ind-logo__text {
        font-size: 1.25rem;
    }

    .ind-mobile-menu {
        max-width: 100%;
    }
}

/* Hide scrollbar when mobile menu open */
body.mobile-menu-open {
    overflow: hidden;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

/* Industrial Hero Section Styles */

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

/* Parallax Layers */
.ind-hero__parallax-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.ind-hero__parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

.ind-hero__parallax-layer--base {
    z-index: 1;
}

.ind-hero__parallax-layer--mid {
    z-index: 2;
}

.ind-hero__parallax-layer--top {
    z-index: 3;
}

/* Dark Overlay */
.ind-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(26, 26, 26, 0.85) 0%,
        rgba(26, 26, 26, 0.7) 50%,
        rgba(26, 26, 26, 0.85) 100%
    );
    z-index: 4;
}

/* Gradient Overlay - Bottom */
.ind-hero__gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, var(--ind-bg-dark) 0%, transparent 100%);
    z-index: 5;
}

/* Particles Canvas */
.ind-hero__particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
}

/* Content */
.ind-hero__content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: var(--ind-space-2xl);
    max-width: 900px;
}

/* Headline */
.ind-hero__headline {
    font-family: var(--ind-font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: var(--ind-fw-black);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-lg);
}

.ind-hero__headline span {
    display: inline-block;
    overflow: hidden;
}

.ind-hero__headline-word {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s ease;
}

.ind-hero--loaded .ind-hero__headline-word {
    transform: translateY(0);
    opacity: 1;
}

/* Stagger headline words */
.ind-hero--loaded .ind-hero__headline-word:nth-child(1) { transition-delay: 200ms; }
.ind-hero--loaded .ind-hero__headline-word:nth-child(2) { transition-delay: 300ms; }
.ind-hero--loaded .ind-hero__headline-word:nth-child(3) { transition-delay: 400ms; }
.ind-hero--loaded .ind-hero__headline-word:nth-child(4) { transition-delay: 500ms; }
.ind-hero--loaded .ind-hero__headline-word:nth-child(5) { transition-delay: 600ms; }
.ind-hero--loaded .ind-hero__headline-word:nth-child(6) { transition-delay: 700ms; }

/* Accent text */
.ind-hero__headline .ind-text-accent {
    color: var(--ind-primary);
    text-shadow: 0 0 40px var(--ind-primary-glow);
}

/* Subheadline */
.ind-hero__subheadline {
    font-family: var(--ind-font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: var(--ind-fw-normal);
    line-height: 1.6;
    color: var(--ind-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--ind-space-2xl);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 700ms;
}

.ind-hero--loaded .ind-hero__subheadline {
    opacity: 1;
    transform: translateY(0);
}

/* CTA Buttons */
.ind-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ind-space-md);
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 900ms;
}

.ind-hero--loaded .ind-hero__cta {
    opacity: 1;
    transform: translateY(0);
}

.ind-hero__cta-primary {
    background-color: var(--ind-primary);
    color: var(--ind-text-primary);
    animation: btnPulse 2s infinite;
    animation-delay: 1.5s;
}

.ind-hero__cta-primary:hover {
    background-color: var(--ind-primary-dark);
    animation: none;
    box-shadow: var(--ind-shadow-glow);
}

/* Scroll Indicator */
.ind-hero__scroll-indicator {
    position: absolute;
    bottom: var(--ind-space-2xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ind-space-sm);
    opacity: 0;
    animation: fadeIn 0.6s ease 2s forwards;
}

.ind-hero__scroll-text {
    font-family: var(--ind-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ind-text-muted);
}

.ind-hero__scroll-icon {
    width: 24px;
    height: 40px;
    border: 2px solid var(--ind-text-muted);
    border-radius: 12px;
    position: relative;
}

.ind-hero__scroll-icon::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background-color: var(--ind-primary);
    border-radius: 2px;
    animation: scrollIndicator 2s infinite;
}

/* Stats Bar (optional in hero) */
.ind-hero__stats {
    display: flex;
    justify-content: center;
    gap: var(--ind-space-3xl);
    margin-top: var(--ind-space-3xl);
    padding-top: var(--ind-space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 1100ms;
}

.ind-hero--loaded .ind-hero__stats {
    opacity: 1;
    transform: translateY(0);
}

.ind-hero__stat {
    text-align: center;
}

.ind-hero__stat-value {
    font-family: var(--ind-font-display);
    font-size: 2.5rem;
    font-weight: var(--ind-fw-bold);
    color: var(--ind-primary);
    line-height: 1;
}

.ind-hero__stat-label {
    font-size: 0.875rem;
    color: var(--ind-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--ind-space-xs);
}

/* Responsive */
@media (max-width: 768px) {
    .ind-hero {
        min-height: calc(100vh - var(--ind-emergency-banner-height));
    }

    .ind-hero__content {
        padding: var(--ind-space-lg);
    }

    .ind-hero__stats {
        flex-direction: column;
        gap: var(--ind-space-lg);
    }

    .ind-hero__scroll-indicator {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ind-hero__headline-word {
        transform: none;
        opacity: 1;
        transition: none;
    }

    .ind-hero__subheadline,
    .ind-hero__cta,
    .ind-hero__stats {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ind-hero__scroll-icon::before {
        animation: none;
    }

    .ind-hero__cta-primary {
        animation: none;
    }
}

/* ==========================================================================
   6. Services
   ========================================================================== */

/* Industrial Service Cards Styles */

.ind-services {
    padding: var(--ind-space-4xl) 0;
    background-color: var(--ind-bg-dark);
}

.ind-services__header {
    text-align: center;
    margin-bottom: var(--ind-space-3xl);
}

.ind-services__title {
    font-family: var(--ind-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-md);
}

.ind-services__subtitle {
    font-size: 1.125rem;
    color: var(--ind-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.ind-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--ind-space-xl);
}

/* Service Card - 3D Tilt Effect */
.ind-service-card {
    position: relative;
    background-color: var(--ind-charcoal);
    border-radius: var(--ind-radius-lg);
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform var(--ind-transition-normal), box-shadow var(--ind-transition-normal);
}

.ind-service-card:hover {
    box-shadow: var(--ind-shadow-lg);
}

.ind-service-card__inner {
    transform-style: preserve-3d;
    transition: transform var(--ind-transition-fast);
}

/* Red accent border */
.ind-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--ind-primary);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--ind-transition-normal);
    z-index: 2;
}

.ind-service-card:hover::before {
    transform: scaleY(1);
}

/* Emergency card styling */
.ind-service-card--emergency::before {
    background-color: var(--ind-emergency);
    transform: scaleY(1);
}

.ind-service-card--emergency {
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Image */
.ind-service-card__image-container {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.ind-service-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ind-transition-slow);
}

.ind-service-card:hover .ind-service-card__image {
    transform: scale(1.05);
}

.ind-service-card__image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 50%, var(--ind-charcoal) 100%);
}

/* Emergency Badge */
.ind-service-card__badge {
    position: absolute;
    top: var(--ind-space-md);
    right: var(--ind-space-md);
    display: flex;
    align-items: center;
    gap: var(--ind-space-xs);
    padding: var(--ind-space-xs) var(--ind-space-sm);
    background-color: var(--ind-emergency);
    color: var(--ind-text-primary);
    font-size: 0.75rem;
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--ind-radius-sm);
    animation: emergencyPulse 1.5s infinite;
}

.ind-service-card__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ind-text-primary);
}

/* Content */
.ind-service-card__content {
    padding: var(--ind-space-lg);
}

/* Icon */
.ind-service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: var(--ind-graphite);
    border-radius: var(--ind-radius-md);
    margin-bottom: var(--ind-space-md);
    color: var(--ind-primary);
    transition: transform var(--ind-transition-normal), box-shadow var(--ind-transition-normal);
}

.ind-service-card:hover .ind-service-card__icon {
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--ind-primary-glow);
}

.ind-service-card__icon svg,
.ind-service-card__icon .mud-icon-root {
    font-size: 1.75rem;
}

/* Title */
.ind-service-card__title {
    font-family: var(--ind-font-display);
    font-size: 1.25rem;
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-sm);
    transition: color var(--ind-transition-fast);
}

.ind-service-card:hover .ind-service-card__title {
    color: var(--ind-primary);
}

/* Description */
.ind-service-card__description {
    font-size: 0.9rem;
    color: var(--ind-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--ind-space-lg);
}

/* Features List */
.ind-service-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ind-space-lg);
}

.ind-service-card__feature {
    display: flex;
    align-items: center;
    gap: var(--ind-space-sm);
    padding: var(--ind-space-xs) 0;
    font-size: 0.85rem;
    color: var(--ind-text-secondary);
}

.ind-service-card__feature-icon {
    color: var(--ind-primary);
    font-size: 1rem;
}

/* Link */
.ind-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ind-space-sm);
    font-family: var(--ind-font-display);
    font-size: 0.9rem;
    font-weight: var(--ind-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ind-primary);
    text-decoration: none;
    transition: gap var(--ind-transition-fast);
}

.ind-service-card__link:hover {
    gap: var(--ind-space-md);
}

.ind-service-card__link-icon {
    transition: transform var(--ind-transition-fast);
}

.ind-service-card:hover .ind-service-card__link-icon {
    transform: translateX(4px);
}

/* Service Detail Page */
.ind-service-detail {
    padding: var(--ind-space-4xl) 0;
}

.ind-service-detail__hero {
    position: relative;
    height: 400px;
    margin-bottom: var(--ind-space-3xl);
    border-radius: var(--ind-radius-lg);
    overflow: hidden;
}

.ind-service-detail__hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ind-service-detail__hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, var(--ind-bg-dark) 0%, transparent 60%);
}

.ind-service-detail__content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--ind-space-3xl);
}

@media (max-width: 768px) {
    .ind-service-detail__content {
        grid-template-columns: 1fr;
    }
}

/* Responsive */
@media (max-width: 640px) {
    .ind-services__grid {
        grid-template-columns: 1fr;
    }

    .ind-service-card__image-container {
        height: 180px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ind-service-card,
    .ind-service-card__inner,
    .ind-service-card__image,
    .ind-service-card__icon,
    .ind-service-card::before {
        transition: none;
    }

    .ind-service-card:hover .ind-service-card__image {
        transform: none;
    }

    .ind-service-card:hover .ind-service-card__icon {
        transform: none;
    }
}

/* ==========================================================================
   7. Stats
   ========================================================================== */

/* Industrial Stats Counter Styles */

.ind-stats {
    padding: var(--ind-space-4xl) 0;
    background-color: var(--ind-charcoal);
    position: relative;
    overflow: hidden;
}

/* Diagonal background accent */
.ind-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 45%,
        rgba(186, 14, 11, 0.05) 45%,
        rgba(186, 14, 11, 0.05) 55%,
        transparent 55%
    );
    pointer-events: none;
}

.ind-stats__container {
    position: relative;
    z-index: 1;
}

.ind-stats__header {
    text-align: center;
    margin-bottom: var(--ind-space-3xl);
}

.ind-stats__title {
    font-family: var(--ind-font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-sm);
}

.ind-stats__subtitle {
    font-size: 1rem;
    color: var(--ind-text-secondary);
}

/* Stats Grid */
.ind-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ind-space-xl);
}

/* Individual Stat */
.ind-stat {
    text-align: center;
    padding: var(--ind-space-xl);
    background-color: var(--ind-graphite);
    border-radius: var(--ind-radius-lg);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow var(--ind-transition-normal);
}

.ind-stat.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animations */
.ind-stat:nth-child(1) { transition-delay: 0ms; }
.ind-stat:nth-child(2) { transition-delay: 100ms; }
.ind-stat:nth-child(3) { transition-delay: 200ms; }
.ind-stat:nth-child(4) { transition-delay: 300ms; }
.ind-stat:nth-child(5) { transition-delay: 400ms; }

.ind-stat:hover {
    box-shadow: var(--ind-shadow-lg);
}

/* Accent line */
.ind-stat::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--ind-primary);
    border-radius: 2px;
}

/* Icon */
.ind-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ind-space-md);
    background-color: rgba(186, 14, 11, 0.1);
    border-radius: 50%;
    color: var(--ind-primary);
    font-size: 1.75rem;
}

.ind-stat.is-visible .ind-stat__icon {
    animation: bounceOnce 0.5s ease 0.3s;
}

/* Value */
.ind-stat__value {
    font-family: var(--ind-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--ind-fw-black);
    color: var(--ind-text-primary);
    line-height: 1;
    margin-bottom: var(--ind-space-sm);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.ind-stat__suffix {
    font-size: 0.6em;
    color: var(--ind-primary);
}

/* Label */
.ind-stat__label {
    font-family: var(--ind-font-display);
    font-size: 0.875rem;
    font-weight: var(--ind-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ind-text-secondary);
}

/* Minimal variant (no cards) */
.ind-stats--minimal {
    background-color: transparent;
    padding: var(--ind-space-2xl) 0;
}

.ind-stats--minimal::before {
    display: none;
}

.ind-stats--minimal .ind-stat {
    background-color: transparent;
    padding: var(--ind-space-md);
}

.ind-stats--minimal .ind-stat::after {
    display: none;
}

.ind-stats--minimal .ind-stat__icon {
    display: none;
}

/* Inline variant */
.ind-stats--inline .ind-stats__grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ind-space-3xl);
}

.ind-stats--inline .ind-stat {
    flex: 0 0 auto;
    background-color: transparent;
    padding: var(--ind-space-md);
}

.ind-stats--inline .ind-stat::after {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .ind-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ind-stat {
        padding: var(--ind-space-lg);
    }

    .ind-stat__icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .ind-stats__grid {
        grid-template-columns: 1fr;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ind-stat {
        opacity: 1;
        transform: none;
        transition: box-shadow var(--ind-transition-normal);
    }

    .ind-stat.is-visible .ind-stat__icon {
        animation: none;
    }
}

/* ==========================================================================
   8. Portfolio
   ========================================================================== */

/* Industrial Portfolio & Before/After Slider Styles */

.ind-portfolio {
    padding: var(--ind-space-4xl) 0;
    background-color: var(--ind-bg-dark);
}

.ind-portfolio__header {
    text-align: center;
    margin-bottom: var(--ind-space-3xl);
}

.ind-portfolio__title {
    font-family: var(--ind-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-md);
}

.ind-portfolio__subtitle {
    font-size: 1.125rem;
    color: var(--ind-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Portfolio Grid */
.ind-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--ind-space-xl);
}

/* Portfolio Card */
.ind-portfolio-card {
    position: relative;
    background-color: var(--ind-charcoal);
    border-radius: var(--ind-radius-lg);
    overflow: hidden;
    transition: transform var(--ind-transition-normal), box-shadow var(--ind-transition-normal);
}

.ind-portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ind-shadow-lg);
}

.ind-portfolio-card__image-container {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.ind-portfolio-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ind-transition-slow);
}

.ind-portfolio-card:hover .ind-portfolio-card__image {
    transform: scale(1.05);
}

.ind-portfolio-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--ind-charcoal) 100%);
}

.ind-portfolio-card__content {
    padding: var(--ind-space-lg);
}

.ind-portfolio-card__title {
    font-family: var(--ind-font-display);
    font-size: 1.25rem;
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-sm);
}

.ind-portfolio-card__description {
    font-size: 0.9rem;
    color: var(--ind-text-secondary);
    line-height: 1.6;
}

/* Before/After Slider */
.ind-before-after {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: var(--ind-radius-lg);
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
}

.ind-before-after__container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--ind-charcoal);
}

/* Before Image (full width, underneath) */
.ind-before-after__before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ind-before-after__before img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* After Image (clipped, on top) */
.ind-before-after__after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: inset(0 50% 0 0);
}

.ind-before-after__after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider Handle */
.ind-before-after__slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background-color: var(--ind-primary);
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 10;
}

.ind-before-after__slider::before,
.ind-before-after__slider::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border: 3px solid var(--ind-primary);
    background-color: var(--ind-bg-dark);
    border-radius: 50%;
}

.ind-before-after__slider::before {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Handle Icon */
.ind-before-after__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background-color: var(--ind-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ind-shadow-md);
    transition: transform var(--ind-transition-fast), box-shadow var(--ind-transition-fast);
    z-index: 11;
}

.ind-before-after__handle:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: var(--ind-shadow-glow);
}

.ind-before-after__handle-icon {
    color: var(--ind-text-primary);
    font-size: 1.5rem;
}

/* Labels */
.ind-before-after__labels {
    position: absolute;
    bottom: var(--ind-space-md);
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 var(--ind-space-lg);
    pointer-events: none;
    z-index: 5;
}

.ind-before-after__label {
    padding: var(--ind-space-xs) var(--ind-space-md);
    background-color: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(4px);
    border-radius: var(--ind-radius-sm);
    font-family: var(--ind-font-display);
    font-size: 0.75rem;
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ind-text-primary);
}

.ind-before-after__label--before {
    border-left: 3px solid var(--ind-text-secondary);
}

.ind-before-after__label--after {
    border-left: 3px solid var(--ind-primary);
}

/* Before/After in Portfolio Grid */
.ind-portfolio-card--before-after {
    grid-column: span 2;
}

.ind-portfolio-card--before-after .ind-portfolio-card__image-container {
    height: auto;
}

/* Project Details */
.ind-portfolio-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ind-space-md);
    margin-top: var(--ind-space-md);
}

.ind-portfolio-card__detail {
    display: flex;
    align-items: center;
    gap: var(--ind-space-xs);
    font-size: 0.8rem;
    color: var(--ind-text-muted);
}

.ind-portfolio-card__detail-icon {
    color: var(--ind-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .ind-portfolio__grid {
        grid-template-columns: 1fr;
    }

    .ind-portfolio-card--before-after {
        grid-column: span 1;
    }

    .ind-before-after__handle {
        width: 40px;
        height: 40px;
    }

    .ind-before-after__labels {
        padding: 0 var(--ind-space-md);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ind-portfolio-card,
    .ind-portfolio-card__image,
    .ind-before-after__handle {
        transition: none;
    }

    .ind-portfolio-card:hover .ind-portfolio-card__image {
        transform: none;
    }

    .ind-portfolio-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

/* Industrial Footer Styles */

.ind-footer {
    background-color: var(--ind-charcoal);
    color: var(--ind-text-primary);
    padding-top: var(--ind-space-4xl);
}

/* Top accent line */
.ind-footer::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg,
        var(--ind-primary) 0%,
        var(--ind-primary) 30%,
        var(--ind-graphite) 30%,
        var(--ind-graphite) 100%
    );
}

.ind-footer__container {
    max-width: var(--ind-container-xl);
    margin: 0 auto;
    padding: 0 var(--ind-space-lg);
}

/* Main Content Grid */
.ind-footer__grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--ind-space-3xl);
    padding-bottom: var(--ind-space-3xl);
}

/* Company Info Column */
.ind-footer__company {
    padding-right: var(--ind-space-xl);
}

.ind-footer__logo {
    display: flex;
    align-items: center;
    gap: var(--ind-space-sm);
    margin-bottom: var(--ind-space-lg);
    text-decoration: none;
    color: var(--ind-text-primary);
}

.ind-footer__logo-image {
    height: 48px;
    width: auto;
}

.ind-footer__logo-text {
    font-family: var(--ind-font-display);
    font-size: 1.5rem;
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ind-footer__logo-text span {
    color: var(--ind-primary);
}

.ind-footer__description {
    font-size: 0.9rem;
    color: var(--ind-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--ind-space-lg);
}

/* Social Links */
.ind-footer__social {
    display: flex;
    gap: var(--ind-space-sm);
}

.ind-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--ind-graphite);
    border-radius: var(--ind-radius-md);
    color: var(--ind-text-secondary);
    text-decoration: none;
    transition: all var(--ind-transition-normal);
}

.ind-footer__social-link:hover {
    background-color: var(--ind-primary);
    color: var(--ind-text-primary);
    transform: translateY(-2px);
}

/* Column Headers */
.ind-footer__heading {
    font-family: var(--ind-font-display);
    font-size: 1rem;
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-lg);
    position: relative;
    padding-bottom: var(--ind-space-sm);
}

.ind-footer__heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--ind-primary);
}

/* Navigation Links */
.ind-footer__nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ind-footer__nav-item {
    margin-bottom: var(--ind-space-sm);
}

.ind-footer__nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ind-space-xs);
    font-size: 0.9rem;
    color: var(--ind-text-secondary);
    text-decoration: none;
    transition: color var(--ind-transition-fast), padding-left var(--ind-transition-fast);
}

.ind-footer__nav-link:hover {
    color: var(--ind-primary);
    padding-left: var(--ind-space-sm);
}

/* Contact Info */
.ind-footer__contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ind-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ind-space-sm);
    margin-bottom: var(--ind-space-md);
    font-size: 0.9rem;
    color: var(--ind-text-secondary);
}

.ind-footer__contact-icon {
    color: var(--ind-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.ind-footer__contact-link {
    color: var(--ind-text-secondary);
    text-decoration: none;
    transition: color var(--ind-transition-fast);
}

.ind-footer__contact-link:hover {
    color: var(--ind-primary);
}

/* Operating Hours */
.ind-footer__hours {
    font-size: 0.85rem;
    color: var(--ind-text-muted);
    line-height: 1.8;
}

.ind-footer__hours-emergency {
    display: inline-flex;
    align-items: center;
    gap: var(--ind-space-xs);
    color: var(--ind-emergency);
    font-weight: var(--ind-fw-semibold);
}

.ind-footer__hours-emergency .ind-emergency-dot {
    width: 6px;
    height: 6px;
}

/* Certifications */
.ind-footer__certifications {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ind-space-md);
    margin-top: var(--ind-space-md);
}

.ind-footer__cert {
    height: 48px;
    width: auto;
    opacity: 0.8;
    transition: opacity var(--ind-transition-fast);
    filter: grayscale(100%);
}

.ind-footer__cert:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Bottom Bar */
.ind-footer__bottom {
    border-top: 1px solid var(--ind-graphite);
    padding: var(--ind-space-lg) 0;
}

.ind-footer__bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ind-space-md);
}

.ind-footer__copyright {
    font-size: 0.85rem;
    color: var(--ind-text-muted);
}

.ind-footer__credits {
    font-size: 0.85rem;
    color: var(--ind-text-muted);
}

.ind-footer__credits a {
    color: var(--ind-text-secondary);
    text-decoration: none;
    transition: color var(--ind-transition-fast);
}

.ind-footer__credits a:hover {
    color: var(--ind-primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .ind-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ind-space-2xl);
    }

    .ind-footer__company {
        grid-column: span 2;
        padding-right: 0;
    }
}

@media (max-width: 640px) {
    .ind-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--ind-space-xl);
    }

    .ind-footer__company {
        grid-column: span 1;
    }

    .ind-footer__bottom-content {
        flex-direction: column;
        text-align: center;
    }
}

/* Animation - Fade in columns on scroll */
.ind-footer__column {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.ind-footer__column.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ind-footer__column:nth-child(1) { transition-delay: 0ms; }
.ind-footer__column:nth-child(2) { transition-delay: 100ms; }
.ind-footer__column:nth-child(3) { transition-delay: 200ms; }
.ind-footer__column:nth-child(4) { transition-delay: 300ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ind-footer__column {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ind-footer__social-link,
    .ind-footer__nav-link,
    .ind-footer__cert {
        transition: none;
    }
}

/* ==========================================================================
   10. Utilities
   ========================================================================== */

/* Industrial Theme Utility Classes */

/* Display */
.ind-d-none { display: none !important; }
.ind-d-block { display: block !important; }
.ind-d-flex { display: flex !important; }
.ind-d-inline-flex { display: inline-flex !important; }
.ind-d-grid { display: grid !important; }

/* Flexbox */
.ind-flex-row { flex-direction: row !important; }
.ind-flex-column { flex-direction: column !important; }
.ind-flex-wrap { flex-wrap: wrap !important; }
.ind-flex-1 { flex: 1 !important; }

.ind-justify-start { justify-content: flex-start !important; }
.ind-justify-center { justify-content: center !important; }
.ind-justify-end { justify-content: flex-end !important; }
.ind-justify-between { justify-content: space-between !important; }
.ind-justify-around { justify-content: space-around !important; }

.ind-align-start { align-items: flex-start !important; }
.ind-align-center { align-items: center !important; }
.ind-align-end { align-items: flex-end !important; }
.ind-align-stretch { align-items: stretch !important; }

.ind-gap-xs { gap: var(--ind-space-xs) !important; }
.ind-gap-sm { gap: var(--ind-space-sm) !important; }
.ind-gap-md { gap: var(--ind-space-md) !important; }
.ind-gap-lg { gap: var(--ind-space-lg) !important; }
.ind-gap-xl { gap: var(--ind-space-xl) !important; }
.ind-gap-2xl { gap: var(--ind-space-2xl) !important; }

/* Text Alignment */
.ind-text-left { text-align: left !important; }
.ind-text-center { text-align: center !important; }
.ind-text-right { text-align: right !important; }

/* Font Sizes */
.ind-text-xs { font-size: 0.75rem !important; }
.ind-text-sm { font-size: 0.875rem !important; }
.ind-text-base { font-size: 1rem !important; }
.ind-text-lg { font-size: 1.125rem !important; }
.ind-text-xl { font-size: 1.25rem !important; }
.ind-text-2xl { font-size: 1.5rem !important; }
.ind-text-3xl { font-size: 2rem !important; }
.ind-text-4xl { font-size: 2.5rem !important; }

/* Font Weights */
.ind-fw-light { font-weight: var(--ind-fw-light) !important; }
.ind-fw-normal { font-weight: var(--ind-fw-normal) !important; }
.ind-fw-medium { font-weight: var(--ind-fw-medium) !important; }
.ind-fw-semibold { font-weight: var(--ind-fw-semibold) !important; }
.ind-fw-bold { font-weight: var(--ind-fw-bold) !important; }
.ind-fw-black { font-weight: var(--ind-fw-black) !important; }

/* Text Transform */
.ind-uppercase { text-transform: uppercase !important; }
.ind-lowercase { text-transform: lowercase !important; }
.ind-capitalize { text-transform: capitalize !important; }

/* Spacing - Margin */
.ind-m-0 { margin: 0 !important; }
.ind-m-auto { margin: auto !important; }
.ind-mx-auto { margin-left: auto !important; margin-right: auto !important; }

.ind-mt-xs { margin-top: var(--ind-space-xs) !important; }
.ind-mt-sm { margin-top: var(--ind-space-sm) !important; }
.ind-mt-md { margin-top: var(--ind-space-md) !important; }
.ind-mt-lg { margin-top: var(--ind-space-lg) !important; }
.ind-mt-xl { margin-top: var(--ind-space-xl) !important; }
.ind-mt-2xl { margin-top: var(--ind-space-2xl) !important; }
.ind-mt-3xl { margin-top: var(--ind-space-3xl) !important; }
.ind-mt-4xl { margin-top: var(--ind-space-4xl) !important; }

.ind-mb-xs { margin-bottom: var(--ind-space-xs) !important; }
.ind-mb-sm { margin-bottom: var(--ind-space-sm) !important; }
.ind-mb-md { margin-bottom: var(--ind-space-md) !important; }
.ind-mb-lg { margin-bottom: var(--ind-space-lg) !important; }
.ind-mb-xl { margin-bottom: var(--ind-space-xl) !important; }
.ind-mb-2xl { margin-bottom: var(--ind-space-2xl) !important; }
.ind-mb-3xl { margin-bottom: var(--ind-space-3xl) !important; }
.ind-mb-4xl { margin-bottom: var(--ind-space-4xl) !important; }

/* Spacing - Padding */
.ind-p-0 { padding: 0 !important; }

.ind-pt-xs { padding-top: var(--ind-space-xs) !important; }
.ind-pt-sm { padding-top: var(--ind-space-sm) !important; }
.ind-pt-md { padding-top: var(--ind-space-md) !important; }
.ind-pt-lg { padding-top: var(--ind-space-lg) !important; }
.ind-pt-xl { padding-top: var(--ind-space-xl) !important; }
.ind-pt-2xl { padding-top: var(--ind-space-2xl) !important; }

.ind-pb-xs { padding-bottom: var(--ind-space-xs) !important; }
.ind-pb-sm { padding-bottom: var(--ind-space-sm) !important; }
.ind-pb-md { padding-bottom: var(--ind-space-md) !important; }
.ind-pb-lg { padding-bottom: var(--ind-space-lg) !important; }
.ind-pb-xl { padding-bottom: var(--ind-space-xl) !important; }
.ind-pb-2xl { padding-bottom: var(--ind-space-2xl) !important; }

.ind-px-md { padding-left: var(--ind-space-md) !important; padding-right: var(--ind-space-md) !important; }
.ind-px-lg { padding-left: var(--ind-space-lg) !important; padding-right: var(--ind-space-lg) !important; }
.ind-px-xl { padding-left: var(--ind-space-xl) !important; padding-right: var(--ind-space-xl) !important; }

.ind-py-md { padding-top: var(--ind-space-md) !important; padding-bottom: var(--ind-space-md) !important; }
.ind-py-lg { padding-top: var(--ind-space-lg) !important; padding-bottom: var(--ind-space-lg) !important; }
.ind-py-xl { padding-top: var(--ind-space-xl) !important; padding-bottom: var(--ind-space-xl) !important; }
.ind-py-2xl { padding-top: var(--ind-space-2xl) !important; padding-bottom: var(--ind-space-2xl) !important; }
.ind-py-3xl { padding-top: var(--ind-space-3xl) !important; padding-bottom: var(--ind-space-3xl) !important; }
.ind-py-4xl { padding-top: var(--ind-space-4xl) !important; padding-bottom: var(--ind-space-4xl) !important; }

/* Width */
.ind-w-full { width: 100% !important; }
.ind-w-auto { width: auto !important; }
.ind-max-w-sm { max-width: var(--ind-container-sm) !important; }
.ind-max-w-md { max-width: var(--ind-container-md) !important; }
.ind-max-w-lg { max-width: var(--ind-container-lg) !important; }
.ind-max-w-xl { max-width: var(--ind-container-xl) !important; }

/* Position */
.ind-relative { position: relative !important; }
.ind-absolute { position: absolute !important; }
.ind-fixed { position: fixed !important; }
.ind-sticky { position: sticky !important; }

/* Overflow */
.ind-overflow-hidden { overflow: hidden !important; }
.ind-overflow-auto { overflow: auto !important; }
.ind-overflow-visible { overflow: visible !important; }

/* Border Radius */
.ind-rounded-none { border-radius: 0 !important; }
.ind-rounded-sm { border-radius: var(--ind-radius-sm) !important; }
.ind-rounded-md { border-radius: var(--ind-radius-md) !important; }
.ind-rounded-lg { border-radius: var(--ind-radius-lg) !important; }
.ind-rounded-full { border-radius: 9999px !important; }

/* Visibility */
.ind-visible { visibility: visible !important; }
.ind-invisible { visibility: hidden !important; }
.ind-opacity-0 { opacity: 0 !important; }
.ind-opacity-50 { opacity: 0.5 !important; }
.ind-opacity-100 { opacity: 1 !important; }

/* Cursor */
.ind-cursor-pointer { cursor: pointer !important; }
.ind-cursor-default { cursor: default !important; }
.ind-cursor-grab { cursor: grab !important; }

/* User Select */
.ind-select-none { user-select: none !important; -webkit-user-select: none !important; }
.ind-select-text { user-select: text !important; }

/* Responsive Utilities */
@media (max-width: 640px) {
    .ind-sm-d-none { display: none !important; }
    .ind-sm-d-block { display: block !important; }
    .ind-sm-d-flex { display: flex !important; }
    .ind-sm-flex-column { flex-direction: column !important; }
    .ind-sm-text-center { text-align: center !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .ind-md-d-none { display: none !important; }
    .ind-md-d-block { display: block !important; }
    .ind-md-d-flex { display: flex !important; }
}

@media (min-width: 1025px) {
    .ind-lg-d-none { display: none !important; }
    .ind-lg-d-block { display: block !important; }
    .ind-lg-d-flex { display: flex !important; }
}

/* Screen Reader Only */
.ind-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   Additional Styles (from original industrial-theme.css)
   ========================================================================== */

/*
 * Additional CTA Section Styling
 * Diagonal background with animations
 */
.ind-cta {
    position: relative;
    padding: var(--ind-space-4xl) 0;
    background-color: var(--ind-charcoal);
    overflow: hidden;
}

.ind-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        -15deg,
        var(--ind-charcoal) 0%,
        var(--ind-charcoal) 40%,
        var(--ind-graphite) 40%,
        var(--ind-graphite) 60%,
        var(--ind-charcoal) 60%,
        var(--ind-charcoal) 100%
    );
    z-index: 0;
}

.ind-cta__container {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: var(--ind-container-md);
    margin: 0 auto;
    padding: 0 var(--ind-space-lg);
}

.ind-cta__title {
    font-family: var(--ind-font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-md);
}

.ind-cta__text {
    font-size: 1.125rem;
    color: var(--ind-text-secondary);
    margin-bottom: var(--ind-space-xl);
}

.ind-cta__button {
    display: inline-flex;
    align-items: center;
    gap: var(--ind-space-sm);
    padding: var(--ind-space-lg) var(--ind-space-2xl);
    background-color: var(--ind-primary);
    color: var(--ind-text-primary);
    font-family: var(--ind-font-display);
    font-size: 1rem;
    font-weight: var(--ind-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: none;
    border-radius: var(--ind-radius-sm);
    cursor: pointer;
    transition: all var(--ind-transition-normal);
}

.ind-cta__button:hover {
    background-color: var(--ind-primary-dark);
    box-shadow: var(--ind-shadow-glow);
    transform: translateY(-2px);
}

/* About Section Styling */
.ind-about {
    padding: var(--ind-space-4xl) 0;
    background-color: var(--ind-bg-dark);
}

.ind-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ind-space-3xl);
    align-items: center;
}

.ind-about__image {
    position: relative;
    border-radius: var(--ind-radius-lg);
    overflow: hidden;
}

.ind-about__image img {
    width: 100%;
    height: auto;
    display: block;
}

.ind-about__image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: 20px;
    bottom: 20px;
    border: 3px solid var(--ind-primary);
    border-radius: var(--ind-radius-lg);
    z-index: -1;
}

.ind-about__content {
    padding: var(--ind-space-lg) 0;
}

.ind-about__title {
    font-family: var(--ind-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-lg);
}

.ind-about__text {
    font-size: 1rem;
    color: var(--ind-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--ind-space-lg);
}

@media (max-width: 768px) {
    .ind-about__grid {
        grid-template-columns: 1fr;
    }

    .ind-about__image::before {
        display: none;
    }
}

/* Testimonial Cards */
.ind-testimonial {
    background-color: var(--ind-charcoal);
    border-radius: var(--ind-radius-lg);
    padding: var(--ind-space-xl);
    position: relative;
}

.ind-testimonial::before {
    content: '"';
    position: absolute;
    top: var(--ind-space-md);
    left: var(--ind-space-lg);
    font-family: Georgia, serif;
    font-size: 4rem;
    color: var(--ind-primary);
    opacity: 0.3;
    line-height: 1;
}

.ind-testimonial__quote {
    font-size: 1rem;
    color: var(--ind-text-secondary);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: var(--ind-space-lg);
    position: relative;
    z-index: 1;
}

.ind-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--ind-space-md);
}

.ind-testimonial__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ind-primary);
}

.ind-testimonial__name {
    font-family: var(--ind-font-display);
    font-weight: var(--ind-fw-semibold);
    color: var(--ind-text-primary);
}

.ind-testimonial__rating {
    display: flex;
    gap: 2px;
    margin-top: var(--ind-space-xs);
    color: var(--ind-primary);
}

/* FAQ Accordion */
.ind-faq {
    padding: var(--ind-space-4xl) 0;
    background-color: var(--ind-bg-dark);
}

.ind-faq__item {
    background-color: var(--ind-charcoal);
    border-radius: var(--ind-radius-md);
    margin-bottom: var(--ind-space-md);
    overflow: hidden;
}

.ind-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ind-space-lg);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--ind-font-display);
    font-size: 1rem;
    font-weight: var(--ind-fw-semibold);
    text-align: left;
    color: var(--ind-text-primary);
    transition: background-color var(--ind-transition-fast);
}

.ind-faq__question:hover {
    background-color: var(--ind-graphite);
}

.ind-faq__icon {
    color: var(--ind-primary);
    transition: transform var(--ind-transition-normal);
}

.ind-faq__item--open .ind-faq__icon {
    transform: rotate(180deg);
}

.ind-faq__answer {
    padding: 0 var(--ind-space-lg) var(--ind-space-lg);
    font-size: 0.95rem;
    color: var(--ind-text-secondary);
    line-height: 1.7;
}

/* Contact Form */
.ind-contact-form {
    background-color: var(--ind-charcoal);
    border-radius: var(--ind-radius-lg);
    padding: var(--ind-space-2xl);
}

.ind-contact-form__title {
    font-family: var(--ind-font-display);
    font-size: 1.5rem;
    font-weight: var(--ind-fw-bold);
    text-transform: uppercase;
    color: var(--ind-text-primary);
    margin-bottom: var(--ind-space-xl);
}

.ind-form-group {
    margin-bottom: var(--ind-space-lg);
}

.ind-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--ind-fw-medium);
    color: var(--ind-text-secondary);
    margin-bottom: var(--ind-space-sm);
}

.ind-form-input,
.ind-form-textarea {
    width: 100%;
    padding: var(--ind-space-md);
    background-color: var(--ind-graphite);
    border: 2px solid transparent;
    border-radius: var(--ind-radius-md);
    color: var(--ind-text-primary);
    font-family: var(--ind-font-body);
    font-size: 1rem;
    transition: border-color var(--ind-transition-fast);
}

.ind-form-input:focus,
.ind-form-textarea:focus {
    outline: none;
    border-color: var(--ind-primary);
}

.ind-form-textarea {
    min-height: 150px;
    resize: vertical;
}

/* Print Styles */
@media print {
    .ind-hero,
    .ind-emergency-banner,
    .ind-header,
    .ind-footer,
    .ind-cta,
    .ind-mobile-menu,
    .ind-mobile-menu__backdrop {
        display: none !important;
    }

    body.industrial-theme {
        background: white;
        color: black;
    }

    .ind-section {
        padding: 1rem 0;
    }
}