:root{
  --charcoal:#0F1115; --offwhite:#F6F4EF; --honey:#F2B705; --muted:#8C9098;
}
body{ font-family: sans-serif; background: var(--offwhite); color: var(--charcoal); margin:0; }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.site-header{ background: var(--charcoal); color: white; padding: 20px 0; }
.header-inner{ display: flex; justify-content: space-between; align-items: center; }
.nav a{ color: white; margin-left: 20px; text-decoration: none; font-size: 14px; text-transform: uppercase; }
.section{ padding: 80px 0; }
.section--dark{ background: var(--charcoal); color: white; }
.rule{ width: 50px; height: 2px; background: var(--honey); margin-bottom: 20px; }
h1{ font-size: 48px; }
.hero{ padding: 100px 0; background: #1a1d23; color: white; }
.btn{ background: var(--honey); padding: 12px 24px; display: inline-block; color: black; text-decoration: none; border-radius: 5px; margin-top: 0px !important; }
/* Header Layout Fix */
.site-header {
    background: #0F1115; /* Charcoal background */
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(246,244,239,.1);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Logo Styling */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #F6F4EF !important; /* Off-white color */
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.brand-mark {
    width: 12px;
    height: 12px;
    background: #F2B705; /* Honey yellow */
    border-radius: 3px;
    display: block;
}

/* Navigation - Removing Bullets and making horizontal */
.nav-list {
    display: flex;
    list-style: none !important; /* Removes dots */
    margin: 0;
    padding: 0;
    gap: 24px;
}

.nav-list li {
    margin: 0;
    padding: 0;
}

.nav-list li a {
    color: rgba(246,244,239,.82) !important;
    text-decoration: none !important;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.nav-list li a:hover {
    color: #F2B705 !important;
}

/* Button Styling */
.btn--primary {
    background: #F2B705 !important;
    color: #0F1115 !important;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: transform 0.2s ease;
    border: none;
    display: inline-block;
}

.btn--primary:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Mobile Toggle - Hidden on desktop */
.menu-toggle {
    display: none;
}

/* Mobile Burger Icon CSS */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; }
.hamburger { width: 25px; height: 2px; background: white; display: block; position: relative; }
.hamburger::before, .hamburger::after { content: ''; width: 25px; height: 2px; background: white; position: absolute; left: 0; }
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }






@media (max-width: 960px) {
  .menu-toggle { display: block !important; }
  .nav { 
      display: none; 
      position: absolute; top: 100%; left: 0; width: 100%; 
      background: var(--charcoal); padding: 20px; flex-direction: column; 
  }
  .nav.is-open { display: flex; }

  .nav-list {
    display: block;

}

}