:root{
        --nav-h: 105px;
    --nav-h-small: 78px;
    --logo-h: 105px;
    --logo-h-small: 75px;
 }

 /* ── HEADER ── */
#header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--nav-h);
background: var(--black);
transition: height 0.4s cubic-bezier(0.4,0,0.2,1),
background 0.4s ease,
border-color 0.4s ease;
border-bottom: 1px solid transparent;
}
#header.scrolled {
height: var(--nav-h-small);
background: var(--black);
border-bottom-color: var(--gold-dim);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* ── NAV INNER ── */
.nav-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2.5em 3.5em; 
margin: 0 auto;
}
/* ── LOGO ── */
.nav-logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
z-index: 10;
}
.nav-logo img {
height: var(--logo-h);
width: auto;
transition: height 0.4s cubic-bezier(0.4,0,0.2,1),
opacity 0.3s ease;
display: block;
}
#header.scrolled .nav-logo img {
height: var(--logo-h-small);
}
/* Fallback text logo if no image */
.logo-text {
font-family: var(--font-display);
font-size: 1.6em;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--cream);
transition: font-size 0.4s cubic-bezier(0.4,0,0.2,1), color 0.3s;
}
.logo-text span { color: var(--gold); }
#header.scrolled .logo-text { font-size: 1.25em; }
/* ── DESKTOP NAV LINKS ── */
.nav-links {
display: flex;
align-items: center;
gap: 0;
list-style: none;
}
.nav-links > li {
position: relative;
padding-top: 13px;
}
.nav-links > li > a {
display: flex;
align-items: center;
gap: 0.35em;
padding: 0.5em 1.2em;
font-family: var(--font-display);
font-size: 0.9em;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cream-dim);
text-decoration: none;
transition: color 0.3s ease, opacity 0.3s ease;
white-space: nowrap;
position: relative;
}
.nav-links > li > a::after {
content: '';
position: absolute;
bottom: -2px; left: 1.2em; right: 1.2em;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.nav-links > li > a:hover,
.nav-links > li > a.active {
color: var(--gold);
}
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after {
transform: scaleX(1);
}
/* Arrow chevron */
.nav-arrow {
display: inline-block;
width: 8px; height: 8px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.3s ease;
flex-shrink: 0;
opacity: 0.6;
}
.nav-dropdown:hover .nav-arrow {
transform: rotate(-135deg) translateY(-2px);
opacity: 1;
}
/* CTA button */
#header .nav-cta {
margin-left: 0.8em;
padding: 1em 1.6em !important;
background: transparent !important;
color: var(--gold) !important;
border-radius: 0px;
border: 0.5px solid var(--gold-dark);
font-weight: 600 !important;
letter-spacing: 0.18em !important;
transition: background 0.3s ease, color 0.3s ease !important;
}
#header .nav-cta::after { display: none !important; }
#header .nav-cta:hover {
background: var(--gold) !important;
color: var(--black) !important;
}
/* ── DROPDOWN ── */
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 0px);
left: 50%;
transform: translateX(-50%) translateY(15px);
background: rgba(12,12,12,0.98);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--gold-dim);
min-width: 200px;
padding: 0.6em 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease,
visibility 0.3s ease,
transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
/* Triangle tip */
.nav-dropdown-menu::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 10px; height: 10px;
background: rgba(12,12,12,0.98);
border-left: 1px solid var(--gold-dim);
border-top: 1px solid var(--gold-dim);
transform: translateX(-50%) rotate(45deg);
}
.nav-dropdown:hover .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
display: flex;
align-items: center;
gap: 0.75em;
padding: 0.65em 1.4em;
font-family: var(--font-body);
font-size: 1em !important;
font-weight: 400;  
color: var(--cream-dim);
text-decoration: none;
transition: color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
position: relative;
}
.nav-dropdown-menu a::before {
content: '';
display: inline-block;
width: 14px; height: 1px;
background: var(--gold);
opacity: 0;
transform: scaleX(0);
transform-origin: left;
transition: opacity 0.25s, transform 0.25s ease;
flex-shrink: 0;
}
.nav-dropdown-menu a:hover {
color: var(--gold);
padding-left: 1.8em;
background: var(--gold-dim2);
}
.nav-dropdown-menu a:hover::before {
opacity: 1;
transform: scaleX(1);
}
.nav-dropdown-menu .dd-divider {
height: 1px;
background: var(--gold-dim);
margin: 0.4em 1.4em;
}
/* ── HAMBURGER ── */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 6px;
cursor: pointer;
padding: 8px;
background: none;
border: none;
z-index: 1100;
position: relative;
}
.hamburger span {
display: block;
height: 1.5px;
background: var(--cream);
border-radius: 2px;
transition: width 0.3s ease,
transform 0.4s cubic-bezier(0.4,0,0.2,1),
opacity 0.3s ease,
background 0.3s ease;
}
.hamburger span:nth-child(1) { width: 26px; }
.hamburger span:nth-child(2) { width: 18px; }
.hamburger span:nth-child(3) { width: 22px; }
/* Open state — X */
.hamburger.open span { background: var(--gold); }
.hamburger.open span:nth-child(1) {
width: 24px;
transform: translateY(7.5px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger.open span:nth-child(3) {
width: 24px;
transform: translateY(-7.5px) rotate(-45deg);
}
/* ── MOBILE NAV — slides left to right ── */
.mobile-nav {
position: fixed;
top: 0; left: 0;
width: min(300px, 85vw);
height: 100vh;
background: var(--black);
border-right: 1px solid var(--gold-dim);
z-index: 1050;
display: flex;
flex-direction: column;
padding: 0;
transform: translateX(-100%);
transition: transform 0.5s cubic-bezier(0.77,0,0.175,1);
overflow-y: auto;
}
.mobile-nav.open {
transform: translateX(0);
}
@media (max-width: 480px) {
 .nav-logo img{
    height: 65px;
}
#header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height:75px; 
}   
}

/* Overlay */
.mobile-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 1040;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.mobile-overlay.open {
opacity: 1;
pointer-events: auto;
}
/* Mobile nav top logo area */
.mobile-nav-top {
padding: 1em 1.5em 0em 1.5em;
border-bottom: 1px solid var(--gold-dim);
display: flex;
align-items: center;
gap: 1em;
}
 
.mobile-nav-logo img{
    height: 65px;
}
.mobile-nav-logo span { color: var(--gold); }
.mobile-nav-tagline {
font-size: 0.6em;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cream-dim);
margin-top: 2px;
}
/* Mobile links */
.mobile-nav-links {
flex: 1;
padding: 1.5em 0;
list-style: none;
}
.mobile-nav-links > li {
border-bottom: 1px solid rgba(201,169,110,0.06);
}
.mobile-nav-links > li > a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1em 2em;
font-family: var(--font-body);
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cream-dim);
text-decoration: none;
transition: color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
}
.mobile-nav-links > li > a:hover,
.mobile-nav-links > li > a.active {
color: var(--gold);
padding-left: 2.4em;
background: var(--gold-dim2);
}
.mobile-nav-links > li > a .m-arrow {
width: 7px; height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform 0.3s ease;
flex-shrink: 0;
opacity: 0.5;
}
.mobile-nav-links > li.open > a .m-arrow {
transform: rotate(45deg) translateY(-3px);
}
/* Mobile accordion */
.mobile-sub {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
background: rgba(201,169,110,0.03);
}
.mobile-nav-links > li.open .mobile-sub {
max-height: 400px;
}
.mobile-sub a {
display: flex;
align-items: center;
gap: 0.8em;
padding: 0.7em 2em 0.7em 2.5em;
font-size: 0.65em;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,240,232,0.45);
text-decoration: none;
transition: color 0.25s ease, padding-left 0.25s ease;
border-bottom: 1px solid rgba(201,169,110,0.04);
}
.mobile-sub a::before {
content: '';
display: inline-block;
width: 16px; height: 1px;
background: var(--gold);
opacity: 0.4;
flex-shrink: 0;
}
.mobile-nav-bottom a:hover{
    text-decoration: none;
}
.mobile-sub a:hover {
color: var(--gold);
text-decoration: none;
padding-left: 3em;
}
.mobile-sub a:hover::before { opacity: 1; }
/* Mobile bottom contact */
.mobile-nav-bottom {
padding: 1.5em 1em 2.5em 1em;
border-top: 1px solid var(--gold-dim);
}
.mobile-nav-bottom .m-label {
font-size: 0.58em;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.8em;
font-weight: 600;
}
.mobile-contact-item {
display: flex;
align-items: center;
gap: 0.8em;
margin-bottom: 0.75em;
text-decoration: none;
}
.mobile-contact-icon {
width: 32px; height: 32px;
border: 1px solid var(--gold-dim);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.25s, border-color 0.25s;
}
.mobile-contact-item:hover .mobile-contact-icon {
background: var(--gold-dim);
border-color: var(--gold);
}
.mobile-contact-icon svg {
width: 13px; height: 13px;
stroke: var(--gold);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.mobile-contact-text .val {
font-size: 0.78em;
font-weight: 500;
color: var(--cream);
letter-spacing: 0.05em;
}
.mobile-contact-text .sub {
font-size: 0.58em;
color: var(--cream-dim);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 1px;
}
.mobile-cta {
display: flex;
align-items: center;
justify-content: center;
margin-top: 1.5em;
padding: 1em 1.5em;
background: transparent;
border: 1px solid var(--gold);
color: var(--gold);
font-family: var(--font-body);
font-size: 0.7em;
font-weight: 600;
border-radius: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.3s ease, color 0.3s ease;
}
.mobile-cta:hover {
background: var(--gold);
color: var(--black);
}
/* Desktop contact strip in nav */
.nav-contact-strip {
display: flex;
align-items: center;
gap: 1.8em;
margin-right: 0.5em;
}
.nav-contact-item {
display: flex;
align-items: center;
gap: 0.5em;
text-decoration: none;
transition: opacity 0.3s;
}
.nav-contact-item:hover { opacity: 1 !important; }
.nav-contact-item svg {
width: 13px; height: 13px;
stroke: var(--gold);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.nav-contact-item span {
font-size: 0.65em;
font-weight: 500;
color: var(--cream-dim);
letter-spacing: 0.08em;
transition: color 0.3s;
}
.nav-contact-item:hover span { color: var(--gold); }
.nav-contact-separator {
width: 1px;
height: 16px;
background: var(--gold-dim);
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.nav-links { display: none; }
.hamburger { display: flex; }
.nav-inner { padding: 0 1.5em; }
.nav-contact-strip { display: none; }
}
/* ── DEMO CONTENT ── */
.demo-hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
gap: 1em;
padding-top: var(--nav-h);
}
.demo-hero h1 {
font-family: var(--font-display);
font-size: clamp(2.5em, 6vw, 5em);
font-weight: 300;
letter-spacing: 0.06em;
color: var(--cream);
line-height: 1.1;
}
.demo-hero h1 em {
font-style: italic;
color: var(--gold);
}
.demo-hero p {
font-size: 0.75em;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--cream-dim);
}
.demo-scroll-hint {
position: absolute;
bottom: 2em;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5em;
font-size: 0.58em;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--cream-dim);
animation: nudge 2s ease infinite;
}
@keyframes nudge {
0%,100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
.demo-scroll-hint::before {
content: '';
display: block;
width: 1px;
height: 32px;
background: linear-gradient(to bottom, transparent, var(--gold));
}