Navbar 02

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<nav class="nav_component">
  <div class="nav_inner">
    <a class="nav_logo" href="#">
      <h2 class="nav_logo_word">Meridian</h2>
      <p class="nav_logo_meta">48°N / EST</p>
    </a>
    <ul class="nav_links">
      <li class="nav_item_mega">
        <a class="nav_link_trigger" href="#">Studio</a>
        <div class="nav_mega">
          <div class="nav_mega_col">
            <p class="nav_mega_head">(01) Services</p>
            <ul class="nav_mega_list">
              <li class="nav_mega_li">
                <a class="nav_mega_link" href="#">Brand Strategy</a>
              </li>
              <li class="nav_mega_li">
                <a class="nav_mega_link" href="#">Art Direction</a>
              </li>
              <li class="nav_mega_li">
                <a class="nav_mega_link" href="#">Editorial Design</a>
              </li>
              <li class="nav_mega_li">
                <a class="nav_mega_link" href="#">Motion & Film</a>
              </li>
            </ul>
          </div>
          <div class="nav_mega_col">
            <p class="nav_mega_head">(02) Practice</p>
            <ul class="nav_mega_list">
              <li class="nav_mega_li">
                <a class="nav_mega_link" href="#">Our Manifesto</a>
              </li>
              <li class="nav_mega_li">
                <a class="nav_mega_link" href="#">The Team</a>
              </li>
              <li class="nav_mega_li">
                <a class="nav_mega_link" href="#">Process & Ethos</a>
              </li>
              <li class="nav_mega_li">
                <a class="nav_mega_link" href="#">Careers</a>
              </li>
            </ul>
          </div>
          <a class="nav_mega_card" href="#">
            <img class="nav_mega_img" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/navbar-cream-editorial-02-1-12.webp" alt="Featured case study spread on a studio desk" />
            <div class="nav_mega_card_body">
              <p class="nav_mega_card_tag">Featured / 2026</p>
              <h3 class="nav_mega_card_title">Rebrand: Verano Coffee Co.</h3>
              <p class="nav_mega_card_link">View the case study →</p>
            </div>
          </a>
        </div>
      </li>
      <li class="nav_item">
        <a class="nav_link" href="#">Work</a>
      </li>
      <li class="nav_item">
        <a class="nav_link" href="#">Journal</a>
      </li>
      <li class="nav_item">
        <a class="nav_link" href="#">Contact</a>
      </li>
    </ul>
    <a class="nav_cta" href="#">Start a Project</a>
  </div>
</nav>

<style>
.nav_component {
  position:relative;
  width:100%;
  background:#f5f4f0;
  border-bottom:1px solid #e3ded3;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.nav_inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
  height:76px;
}

.nav_logo {
  display:flex;
  align-items:baseline;
  gap:6px;
  text-decoration:none;
  color:#3a2c22;
}

.nav_logo_word {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1;
  text-transform:uppercase;
  color:#3a2c22;
  margin:0;
}

.nav_logo_meta {
  font-family:'Courier New',monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#c0392b;
  margin:0;
}

.nav_links {
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav_item_mega {
  position:relative;
  display:flex;
  align-items:center;
}

.nav_link_trigger {
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:#3a2c22;
  text-decoration:none;
  padding:28px 0;
  cursor:pointer;
}

.nav_mega {
  position:absolute;
  left:0;
  top:100%;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s;
  width:720px;
  background:#faf9f6;
  border:1px solid #e3ded3;
  box-shadow:0 24px 60px rgba(58,44,34,0.12);
  padding:32px;
  display:grid;
  grid-template-columns:1fr 1fr 1.1fr;
  gap:32px;
  z-index:50;
}

.nav_mega_col {
  display:flex;
  flex-direction:column;
}

.nav_mega_head {
  font-family:'Courier New',monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#c0392b;
  margin:0 0 16px 0;
}

.nav_mega_list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.nav_mega_link {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  font-weight:500;
  color:#3a2c22;
  text-decoration:none;
  transition:color 0.15s ease;
}

.nav_mega_card {
  display:flex;
  flex-direction:column;
  text-decoration:none;
  background:#f5f4f0;
  border:1px solid #e3ded3;
  overflow:hidden;
}

.nav_mega_img {
  width:100%;
  height:130px;
  object-fit:cover;
  display:block;
}

.nav_mega_card_body {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
}

.nav_mega_card_tag {
  font-family:'Courier New',monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#c0392b;
  margin:0;
}

.nav_mega_card_title {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:#3a2c22;
  margin:0;
}

.nav_mega_card_link {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  color:#3a2c22;
  margin:4px 0 0 0;
}

.nav_item {
  display:flex;
  align-items:center;
}

.nav_link {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:#3a2c22;
  text-decoration:none;
  transition:color 0.15s ease;
}

.nav_cta {
  display:inline-flex;
  align-items:center;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#f5f4f0;
  background:#c0392b;
  text-decoration:none;
  padding:13px 24px;
  transition:background 0.18s ease;
}
</style>