* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #121212;
      color: #f5f5f5;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-weight: 400;
      line-height: 1.6;
      min-height: 100vh;
    }

    .container {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 5vw;
    }

    /* ─── Header / Logo ─── */
    header {
      padding: 60px 0 140px;
      text-align: center;
    }

    .logo {
      font-size: 3.8rem;
      font-weight: 700;
      letter-spacing: -0.08em;
      margin-bottom: 0.2em;
      color: white;
    }

    .logo span {
      color: #c9a96e;           /* subtle gold/bronze accent */
      font-weight: 300;
    }

    .tagline {
      font-size: 1.25rem;
      font-weight: 300;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      opacity: 0.7;
      margin-top: 0.8em;
    }

    /* ─── Hero / Main Text ─── */
    .hero {
      min-height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 80px 0;
    }

    .hero-content {
      max-width: 780px;
    }

    h1 {
      font-size: clamp(3.2rem, 8vw, 7.2rem);
      font-weight: 300;
      line-height: 0.92;
      letter-spacing: -0.04em;
      margin-bottom: 1.4rem;
    }

    .hero p {
      font-size: 1.48rem;
      font-weight: 300;
      opacity: 0.88;
      margin-bottom: 2.8rem;
    }

    .btn {
      display: inline-block;
      padding: 16px 48px;
      border: 1px solid #c9a96e;
      color: #c9a96e;
      text-decoration: none;
      font-size: 1.1rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: all 0.28s ease;
    }

    .btn:hover {
      background: #c9a96e;
      color: #0f0f0f;
    }

    /* ─── Contact ─── */
    footer {
      padding: 140px 0 100px;
      text-align: center;
      border-top: 1px solid #1a1a1a;
    }

    .contact-title {
      font-size: 2.2rem;
      font-weight: 400;
      margin-bottom: 2.5rem;
      letter-spacing: 0.06em;
    }

    .contact-info {
      font-size: 1.28rem;
      font-weight: 300;
      opacity: 0.85;
      line-height: 2.1;
      max-width: 520px;
      margin: 0 auto;
    }

    .contact-info a {
      color: #c9a96e;
      text-decoration: none;
      transition: opacity 0.2s;
    }

    .contact-info a:hover {
      opacity: 0.7;
    }

    .social {
      margin-top: 3rem;
      font-size: 1.6rem;
      letter-spacing: 1.2em;
    }

 .map-section {
  padding: 140px 0 100px;
  text-align: center;
}

.map-section h2 {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  margin-bottom: 0.6em;
}

.map-wrapper {
  max-width: 1000px;           /* adjust to your preference */
  margin: 0 auto;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;         /* force dark bg in case */
  box-shadow: 0 10px 40px rgba(0,0,0,0.7);
}

.osm-iframe {
  width: 100%;
  height: 500px;
  border: none;
  background: #0a0a0a;         /* fallback dark */
}

/* ─── Inversion filter: turns light map → dark with white/light streets ─── */
.inverted-map {
  filter: invert(100%) hue-rotate(180deg) brightness(0.95) contrast(0.95);
  /* Optional fine-tuning: */
  /* brightness(0.9) → slightly darker overall */
  /* contrast(1.1)   → sharper whites if needed */
}


    @media (max-width: 768px) {
    .osm-iframe { height: 380px; }
  .map-section { padding: 100px 0 80px; }
      header { padding: 50px 0 100px; }
      .logo { font-size: 2.8rem; }
      h1 { font-size: clamp(2.8rem, 10vw, 5.5rem); }
      .hero { min-height: 50vh; padding: 60px 0; }
      footer { padding: 100px 0 80px; }
    }