header { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 900; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gut); transition: background .4s var(--ease),border-color .4s,padding .4s var(--ease); border-bottom: 1px solid transparent; background: rgba(6, 26, 12, 0.76); backdrop-filter: blur(12px); }

header.stuck { background: rgba(6, 26, 12, 0.92); backdrop-filter: blur(14px); border-bottom-color: var(--line); padding: 11px var(--gut); }

.brand { line-height: 1; }

.logo { height: 40px; width: auto; filter: brightness(0) invert(1); transition: filter .3s var(--ease); }

.brand:hover .logo { filter: brightness(0) invert(1) drop-shadow(rgba(224, 164, 74, 0.5) 0px 0px 8px); }

nav { display: flex; gap: 30px; align-items: center; }

nav a { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); transition: color 0.25s; position: relative; padding: 4px 0px; display: inline-block; }

nav a::after { content: ""; position: absolute; left: 0px; bottom: 0px; height: 1px; width: 0px; background: var(--maple); transition: width .35s var(--ease); }

nav a:hover { color: var(--paper); }

nav a:hover::after { width: 100%; }

.nav-item.has-dropdown > a::after { content: " ▾"; position: static; height: auto; width: auto; background: none; margin-left: 6px; font-size: 9px; }

.tel { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; border: 1px solid var(--line); padding: 10px 16px 8px; transition: .3s var(--ease); }

.tel:hover { background: var(--maple); border-color: var(--maple); color: var(--ink); }

.hdr-right { display: flex; align-items: center; gap: 12px; }

.cta-btn { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; background: var(--maple); color: var(--ink); padding: 10px 16px 8px; transition: .3s var(--ease); }

.cta-btn:hover { background: var(--paper); }

.hamburger { display: none; position: fixed; top: 18px; right: var(--gut); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 10px; z-index: 1001; transition: top .4s var(--ease); }

.hamburger.scrolled { top: 13px; }

.hamburger span { display: block; width: 24px; height: 2px; background: var(--paper); margin: 5px 0px; transition: .3s var(--ease); }

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }

.hamburger.open span:nth-child(2) { opacity: 0; }

.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-nav { position: fixed; inset: 0px; z-index: 9999; background: var(--ink); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: .4s var(--ease); overflow-y: auto; padding: 80px 20px 180px; }

.mobile-nav.open { opacity: 1; visibility: visible; }

.mobile-nav nav { display: flex; flex-direction: column; align-items: stretch; gap: 0px; width: 100%; max-width: 500px; margin: 0px auto; }

.mobile-nav nav a { font-family: var(--display); font-weight: 700; text-transform: uppercase; color: var(--paper); transition: .3s var(--ease); display: block; }

.mobile-nav nav a:hover { color: var(--maple); }

.mobile-nav-section { border-bottom: 1px solid var(--line); }

.mobile-nav-section:first-child { border-top: 1px solid var(--line); }

.mobile-nav-section h3 { font-family: var(--display); font-size: clamp(1.4rem, 4.5vw, 1.8rem); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--paper); margin: 0px; padding: 18px 0px; cursor: pointer; position: relative; transition: 0.3s; user-select: none; }

.mobile-nav-section h3:hover { color: var(--maple); }

.mobile-nav-section h3::after { content: "+"; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 400; transition: .3s var(--ease); }

.mobile-nav-section.expanded h3::after { content: "−"; }

.mobile-nav-section-content { max-height: 0px; overflow: hidden; transition: max-height .4s var(--ease); }

.mobile-nav-section.expanded .mobile-nav-section-content { max-height: 800px; }

.mobile-nav-section a { display: block; font-family: var(--body); font-weight: 400; color: var(--paper-dim); font-size: clamp(1rem, 3.5vw, 1.15rem) !important; padding: 12px 0px 12px 16px !important; opacity: 1 !important; transform: none !important; }

.mobile-nav-section a:hover { color: var(--maple); }

.mobile-nav-main { border-bottom: 1px solid var(--line); font-size: clamp(1.4rem, 4.5vw, 1.8rem) !important; padding: 18px 0px !important; opacity: 1 !important; transform: none !important; font-family: var(--display) !important; font-weight: 700 !important; color: var(--paper) !important; }

.mobile-nav-cta { background: var(--maple); margin-top: 24px; display: inline-block; font-weight: 700; text-align: center; width: 100%; color: var(--ink) !important; padding: 18px 24px !important; font-size: clamp(1.2rem, 4vw, 1.5rem) !important; opacity: 1 !important; transform: none !important; font-family: var(--display) !important; }

.mobile-nav-cta:hover { background: var(--paper); }

.mobile-nav-footer { margin-top: 40px; text-align: center; width: 100%; }

.mobile-phone { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 5vw, 24px); color: var(--maple); display: block; margin-bottom: 8px; }

.mobile-nav-close { position: absolute; top: 20px; right: 20px; z-index: 10000; width: 44px; height: 44px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 0px; display: flex; align-items: center; justify-content: center; }

.mobile-nav-close::before, .mobile-nav-close::after { content: ""; position: absolute; width: 24px; height: 2px; background: var(--paper); transition: 0.3s; }

.mobile-nav-close::before { transform: rotate(45deg); }

.mobile-nav-close::after { transform: rotate(-45deg); }

.mobile-nav-close:hover::before, .mobile-nav-close:hover::after { background: var(--maple); }

.mobile-nav-footer p { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--paper-faint); }

@media (max-width: 1000px) {
  .mobile-sticky-bar { position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 9997; background: var(--ink); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 12px; }
  .mobile-sticky-phone { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 4vw, 18px); color: var(--maple); text-decoration: none; white-space: nowrap; }
  .mobile-sticky-quote { background: var(--maple); color: var(--ink); padding: 12px 24px; font-family: var(--display); font-weight: 700; font-size: clamp(14px, 3.5vw, 16px); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: 0.3s; }
  .mobile-sticky-quote:hover { background: var(--paper); }
  body { padding-bottom: 60px; }
}

@media (min-width: 1001px) {
  .mobile-sticky-bar { display: none; }
  body { padding-bottom: 0px; }
}

.main-nav { display: flex; gap: 24px; align-items: center; }

.nav-item { position: relative; }

.nav-item.has-dropdown > a { cursor: pointer; }

.dropdown { position: absolute; top: 100%; left: -12px; min-width: 240px; background: var(--brand-deep); border: 1px solid var(--line); padding: 16px 0px 12px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .3s var(--ease); z-index: 1000; margin-top: 0; pointer-events: none; }

.nav-item:hover .dropdown, .nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0px); pointer-events: auto; }

/* Extend hover area to prevent dropdown from closing when moving mouse */
.nav-item.has-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }

.dropdown a { display: block; padding: 10px 20px; font-size: 12px; color: var(--paper-dim); transition: 0.2s; white-space: nowrap; }

.dropdown a:hover { background: var(--brand); color: var(--maple); }

@media (max-width: 1000px) {
  nav#nav { display: none; }
  .hdr-right { display: none; }
  .hamburger { display: block; }
  .mobile-bar { display: flex; }
}