Here is a clean, corrected, production‑ready version of your entire styles.css file.
It removes the broken nested media query, fixes the mobile logo sizing, and keeps everything else exactly as you intended.
You can delete your old CSS file completely and paste this in.

✅ Corrected styles.css (full file)
:root {
  --vk-black: #000000;
  --vk-near-white: #F5F5F5;
  --vk-graphite: #2F2F2F;
  --vk-deep-violet: #1C1026;
  --vk-steel: #5C6A7B;
  --vk-warm-neutral: #C6BBB9;
  --vk-mid-grey: #A8A8A8;

  --vk-font-main: "Barlow Condensed", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--vk-black);
  color: var(--vk-near-white);
  font-family: var(--vk-font-main);
}

body {
  -webkit-font-smoothing: antialiased;
}

.vk-header {
  background-color: var(--vk-black);
  padding-top: 4.5rem;
  padding-bottom: 2.5rem;
}

.vk-header-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.vk-logo {
  max-width: 360px;
  width: 100%;
  height: auto;
  display: block;
  margin: 40px auto 20px auto;
  object-fit: contain;
}

.vk-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.vk-hero {
  text-align: left;
  margin-bottom: 3.5rem;
}

.vk-hero-line {
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  max-width: 40rem;
}

.vk-hero-line-1 {
  font-size: 2.1rem;
  color: var(--vk-near-white);
}

.vk-hero-line-2 {
  font-size: 2.1rem;
  margin-top: 0.75rem;
  color: var(--vk-steel);
}

.vk-section {
  margin-top: 3rem;
  border-top: 1px solid var(--vk-graphite);
  padding-top: 2rem;
}

.vk-section-title {
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vk-mid-grey);
  margin: 0 0 1.25rem;
}

.vk-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--vk-near-white);
  max-width: 40rem;
  margin: 0 0 1rem;
}

.vk-section-rd .vk-body:nth-of-type(2) {
  color: var(--vk-warm-neutral);
}

.vk-section-collab .vk-body:nth-of-type(2) {
  color: var(--vk-steel);
}

.vk-section-contact {
  margin-top: 3.5rem;
}

.vk-contact-line {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  color: var(--vk-near-white);
}

.vk-contact-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
  color: var(--vk-mid-grey);
  margin-right: 0.75rem;
}

.vk-contact-value {
  color: var(--vk-near-white);
}

.vk-footnote {
  margin-top: 1.75rem;
  font-size: 0.85rem;
  color: var(--vk-mid-grey);
}

/* Small screens */
@media (max-width: 600px) {
  .vk-header {
    padding-top: 3.5rem;
    padding-bottom: 2rem;
  }

  .vk-logo {
    max-width: 260px;
    height: auto;
  }

  .vk-hero-line-1,
  .vk-hero-line-2 {
    font-size: 1.7rem;
  }

  .vk-main {
    padding: 0 1.25rem 3rem;
  }
}



✅ What this fixes
- Removes the broken nested media query that was invalidating your mobile CSS.
- Ensures the .vk-logo rule actually applies on mobile.
- Keeps the desktop logo at 360px max-width.
- Ensures mobile logo is 260px max-width, not crushed to 48px.
- Preserves all your typography, spacing, and colour system.

Next step
Paste this into your styles.css, save, redeploy the folder, and hard-refresh your browser.
Once that’s done, tell me how the logo looks — if it still feels small, the PNG itself likely needs cropping, and I’ll guide you through that cleanly.