:root {
    --bg: #0D0D0D; --text: #F2F2F2; --accent: #FF3E00;
    --font-main: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace;
}
body.light-mode { --bg: #F2F2F2; --text: #0D0D0D; }
body { background: var(--bg); color: var(--text); font-family: var(--font-main); padding: 5vw; transition: 0.3s; }
h1 { font-size: clamp(2rem, 8vw, 6rem); text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9; margin: 10vh 0; }
.label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; color: #666; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 15vh; }
.client-row { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 2rem 0; border-top: 1px solid #333; text-decoration: none; color: inherit; transition: 0.3s; }
.client-row:hover { color: var(--accent); transform: translateX(15px); }
#hover-container { position: fixed; width: 400px; height: 250px; pointer-events: none; opacity: 0; z-index: 10; background-size: cover; transition: opacity 0.3s; }
/* ADD THIS TO YOUR CSS FOR THE SUBVERSIF FEEL */

h1 {
    font-size: clamp(4rem, 15vw, 12rem); /* Massive, aggressive scale */
    line-height: 0.85;
    letter-spacing: -0.06em;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20vh;
}

.client-row {
    border-top: 2px solid var(--text); /* Thick, brutalist lines */
    padding: 3rem 0;
    mix-blend-mode: difference; /* Inverts color over images */
}

.client-row .name {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 700;
}

/* The Cursor Image (The "Subversif" Reveal) */
#hover-container {
    width: 450px; /* Larger, more immersive */
    height: 300px;
    filter: grayscale(100%) contrast(120%); /* High-fashion edit */
    border: 1px solid var(--accent);
}