.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 240, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(45, 45, 45, 0.08);
}

.header-content {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 235px;
  flex-shrink: 0;
}

.brand img {
  width: 100%;
  height: auto;
  display: block;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.desktop-nav a {
  color: var(--color-charcoal);
  transition: 0.2s ease;
}

.desktop-nav a:hover {
  color: #c8a57a;
}

.hero {
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  padding: 38px 0 64px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: center;
}

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

.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: #c8a57a;
}

.hero-content p {
  max-width: 650px;
  margin-top: 20px;
  font-size: 1.04rem;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.hero-card {
  min-height: 420px;
  border-radius: var(--radius);
  background:
    linear-gradient(
      135deg,
      #8f8478 0%,
      #6e665f 55%,
      #4f4a45 100%
    );
  display: flex;
  align-items: flex-end;
  padding: 56px;
  color: var(--color-offwhite);
}

.hero-card p {
  color: var(--color-offwhite);
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
  line-height: 1.05;
}