:root{
  --topbar-bg:rgba(14,12,10,0.72);
  --topbar-bg-scrolled:rgba(14,12,10,0.94);
  --topbar-drawer-bg:rgba(14,12,10,1);
  --topbar-drawer-blur:14px;
  --topbar-drawer-padding:16px var(--gut) 28px;
  --topbar-drawer-border:none;
  --topbar-frame-transition:width 0.6s cubic-bezier(0.16,1,0.3,1);
  --topbar-brand-align:center;
  --topbar-brand-gap:0;
  --topbar-brand-color:var(--ink);
  --topbar-amp-padding:0 0.22em;
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  padding:18px var(--gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--topbar-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:0;
  transition:transform .35s ease, border-color .3s ease, background .3s ease;
}

.topbar.scrolled{
  border-color:var(--rule);
  background:var(--topbar-bg-scrolled);
}

.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(184,146,74,.5);
}

.brand{
  display:flex;
  align-items:var(--topbar-brand-align);
  gap:var(--topbar-brand-gap);
  font-family:var(--serif);
  font-size:27px;
  letter-spacing:0.02em;
  color:var(--topbar-brand-color);
}

.brand .amp{
  font-style:italic;
  color:var(--accent-cocoa);
  padding:var(--topbar-amp-padding);
}

.brand-back{
  display:none;
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
  color:var(--accent-cocoa);
  margin-right:10px;
  opacity:0.85;
  letter-spacing:0;
}

.brand small{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.34em;
  color:var(--ink-soft);
  text-transform:uppercase;
  margin-left:20px;
  padding-left:20px;
  border-left:1px solid var(--rule);
}

.nav-links{
  display:flex;
  gap:36px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
}

.nav-links a{
  color:var(--ink);
  padding:5px 0 4px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}

.nav-links a:hover{
  color:var(--accent-cocoa);
  border-color:var(--accent-cocoa);
}

.nav-links a[aria-current="page"]{
  border-color:var(--ink);
}

.nav-cta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
  padding:5px 0 4px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}

.nav-cta:hover{
  color:var(--accent-cocoa);
  border-color:var(--accent-cocoa);
}

.nav-inquire-mobile{
  display:none;
}

.nav-burger{
  display:none;
  position:relative;
  font-family:var(--mono);
  font-size:15px;
  font-weight:800;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#f4f0ea;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(213,169,106,0.9);
  border-radius:999px;
  cursor:pointer;
  padding:5px 14px 4px;
  gap:7px;
  align-items:center;
  transition:color .2s, opacity .12s ease, border-color .2s, width .6s cubic-bezier(0.16,1,0.3,1);
  animation:nav-rise .6s .15s ease-out backwards, burger-breathe 3s 1s ease-in-out infinite;
}

.nav-burger::before{
  content:"";
  position:relative;
  z-index:1;
  display:block;
  width:7px;
  height:1px;
  background:currentColor;
  box-shadow:0 -4px 0 currentColor, 0 4px 0 currentColor;
  opacity:0.7;
  flex-shrink:0;
}

@media (hover:hover){
  .nav-burger:hover{
    color:#e5d3b3;
    animation:none;
  }
}

.nav-burger:active{
  transform:scale(.95);
  opacity:.65;
}

@keyframes nav-rise{
  from{ opacity:0; transform:translateY(7px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes burger-breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}

.text-frame{
  position:relative;
  display:inline-block;
  height:18px;
  overflow:hidden;
  vertical-align:middle;
  transition:var(--topbar-frame-transition);
}

.word{
  position:absolute;
  left:0;
  top:0;
  width:100%;
}

.word-sizer{
  display:inline-block;
  visibility:hidden;
  white-space:nowrap;
  pointer-events:none;
}

.char{
  display:inline-block;
  opacity:0;
  transform:translateY(5px);
  transition:opacity 0.35s ease, transform 0.35s ease;
  text-shadow:0 0 12px rgba(213,169,106,0.3);
}

@media (max-width:880px){
  .brand-back{ display:inline; }

  .nav-burger{
    display:flex;
    justify-content:center;
    font-size:13px;
  }

  .nav-cta{ display:none; }

  .nav-inquire-mobile{
    display:block;
    color:var(--accent-gold);
    font-size:13px;
    padding:14px 0;
    border-top:1px solid rgba(217,138,43,0.2);
    margin-top:8px;
  }

  .brand small{ display:none; }

  .nav-links{
    display:none;
    position:absolute;
    top:61px;
    left:0;
    right:0;
    background:var(--topbar-drawer-bg);
    backdrop-filter:blur(var(--topbar-drawer-blur));
    -webkit-backdrop-filter:blur(var(--topbar-drawer-blur));
    flex-direction:column;
    gap:0;
    padding:var(--topbar-drawer-padding);
    border-bottom:var(--topbar-drawer-border);
    box-sizing:border-box;
    z-index:49;
  }

  .nav-links.open{ display:flex; }

  main{
    transition:margin-top .35s ease;
  }

  body.drawer-open main{
    margin-top:var(--topbar-drawer-offset, 0px);
  }

  .nav-links a{
    padding:14px 0;
    border-bottom:none;
    font-size:13px;
    color:var(--accent-cocoa);
  }

  .nav-links a[aria-current="page"]{
    display:none;
  }
}