:root {
    --hdr-bg-scroll:   rgba(10, 10, 10, 0.92);
    --hdr-border:      rgba(255, 255, 255, 0.07);
    --hdr-accent:      #d97c20;
    --hdr-accent2:     #f0a040;
    --hdr-text:        #e8e4dc;
    --hdr-muted:       rgba(232, 228, 220, 0.6);
    --hdr-wa-green:    #25d366;
    --hdr-height-desk: 80px;
    --hdr-height-mob:  60px;
    --ff-display:      'Barlow Condensed', sans-serif;
    --ff-body:         'DM Sans', sans-serif;
}

/* =============================================
    DESKTOP HEADER
============================================= */
.hdr-outer {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--hdr-height-desk);
    display: flex;
    align-items: center;
    z-index: 9000;
    transition: background 0.4s ease, border-color 0.4s ease;
    border-bottom: 1px solid transparent;
}

.hdr-outer.scrolled {
    background: var(--hdr-bg-scroll);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--hdr-border);
}

.hdr-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1880px;
    margin: 0 auto;
    position: relative;
}

/* Logo */
.hdr-logo img {
    height: 42px;
    display: block;
    filter: brightness(0.65);
    transition: filter 0.25s;
}
.hdr-logo:hover img { filter: brightness(1); }

/* Nav links — centred absolutely */
.hdr-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2.5rem;
    white-space: nowrap;
}

.hdr-nav a {
    font-family: var(--ff-display);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hdr-muted);
    text-decoration: none;
    position: relative;
    transition: color 0.25s;
}

.hdr-nav a::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 100%; height: 1.5px;
    background: var(--hdr-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.hdr-nav a:hover { color: #fff; }
.hdr-nav a:hover::after { transform: scaleX(1); }

/* WhatsApp CTA button */
.hdr-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ff-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--hdr-text);
    padding: 0.6rem 1.2rem;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, color 0.3s;
}

.hdr-whatsapp::before {
    content: '';
    position: absolute; inset: -2px;
    background: var(--hdr-wa-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 0;
}

.hdr-whatsapp span,
.hdr-whatsapp i { position: relative; z-index: 1; }

.hdr-whatsapp:hover { border-color: var(--hdr-wa-green); color: #fff; }
.hdr-whatsapp:hover::before { transform: scaleX(1); }
.hdr-whatsapp i { font-size: 1rem; }

/* =============================================
    MOBILE HEADER
============================================= */
.hdr-mob-outer {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: var(--hdr-height-mob);
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hdr-border);
    z-index: 9000;
    box-sizing: border-box;
}

.hdr-mob-logo img { height: 32px; display: block; filter: brightness(0.65); transition: filter 0.25s; }
.hdr-mob-logo:hover img { filter: brightness(1); }

/* Hamburger */
.hdr-mob-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px; height: 36px;
    background: transparent; border: none;
    cursor: pointer; padding: 0;
    z-index: 9100;
    -webkit-tap-highlight-color: transparent;
}

.hdr-mob-toggle span {
    display: block; width: 100%; height: 1.5px;
    background: var(--hdr-text);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s, background 0.3s;
    transform-origin: center;
}

/* Morphs to × when open */
.hdr-mob-outer.is-open .hdr-mob-toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
    background: var(--hdr-accent);
}
.hdr-mob-outer.is-open .hdr-mob-toggle span:nth-child(2) {
    opacity: 0; transform: scaleX(0);
}
.hdr-mob-outer.is-open .hdr-mob-toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
    background: var(--hdr-accent);
}

/* =============================================
    MOBILE DRAWER
============================================= */
.hdr-mob-drawer {
    position: fixed;
    top: var(--hdr-height-mob); left: 0;
    width: 100%; height: calc(100dvh - var(--hdr-height-mob));
    background: rgba(8, 8, 8, 0.98);
    display: flex; flex-direction: column;
    padding: 0 24px 40px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 8900;
    pointer-events: none;
    /* Slide from top */
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s ease;
    border-top: 1px solid var(--hdr-border);
}

.hdr-mob-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

/* Staggered nav links */
.hdr-mob-nav { display: flex; flex-direction: column; margin-top: 8px; }

.hdr-mob-nav a {
    font-family: var(--ff-display);
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--hdr-text);
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--hdr-border);
    text-decoration: none;
    /* Entrance anim state */
    opacity: 0;
    transform: translateX(-16px);
    transition:
        color 0.25s,
        padding-left 0.25s,
        opacity 0.35s ease,
        transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-tap-highlight-color: transparent;
}

.hdr-mob-drawer.is-open .hdr-mob-nav a { opacity: 1; transform: translateX(0); }
.hdr-mob-drawer.is-open .hdr-mob-nav a:nth-child(1) { transition-delay: 0.07s; }
.hdr-mob-drawer.is-open .hdr-mob-nav a:nth-child(2) { transition-delay: 0.13s; }
.hdr-mob-drawer.is-open .hdr-mob-nav a:nth-child(3) { transition-delay: 0.19s; }

.hdr-mob-nav a:hover,
.hdr-mob-nav a:focus { color: var(--hdr-accent); padding-left: 12px; outline: none; }

/* WhatsApp CTA in drawer */
.hdr-mob-whatsapp {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-top: 2.5rem; padding: 1.1rem 1.5rem;
    font-family: var(--ff-display); font-size: 1rem;
    font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--hdr-text);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    text-decoration: none;
    position: relative; overflow: hidden;
    /* Entrance anim state */
    opacity: 0; transform: translateX(-16px);
    transition:
        opacity 0.35s 0.27s ease,
        transform 0.35s 0.27s cubic-bezier(0.23, 1, 0.32, 1),
        color 0.3s,
        border-color 0.3s;
    -webkit-tap-highlight-color: transparent;
}

.hdr-mob-drawer.is-open .hdr-mob-whatsapp { opacity: 1; transform: translateX(0); }

.hdr-mob-whatsapp::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--hdr-wa-green);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s ease; z-index: 0;
}
.hdr-mob-whatsapp span,
.hdr-mob-whatsapp i { position: relative; z-index: 1; }
.hdr-mob-whatsapp:hover,
.hdr-mob-whatsapp:active { color: #fff; border-color: var(--hdr-wa-green); }
.hdr-mob-whatsapp:hover::before,
.hdr-mob-whatsapp:active::before { transform: scaleX(1); }

/* Body scroll lock */
body.hdr-nav-open { overflow: hidden; }

/* =============================================
    MEDIA QUERIES
============================================= */
@media (max-width: 800px) {
    .hdr-outer    { display: none; }
    .hdr-mob-outer { display: flex; }
}