/* ============ TOKENS ============ */
:root {
    --bg: #F8F3E8;
    --bg-2: #F2EBDA;
    --card: #FFFDF6;
    --ink: #13203B;
    --ink-2: #4A5568;
    --ink-dim: rgba(19,32,59,.6);
    --gold: #D9910A;
    --gold-2: #B97A05;
    --gold-soft: #F5E5C0;
    --gold-faint: rgba(217,145,10,.1);
    --line: #E4D9BF;
    --serif: 'Fraunces',serif;
    --sans: 'Jost',sans-serif;
    --shadow: 0 20px 50px rgba(19,32,59,.08);
    --shadow-lg: 0 34px 80px rgba(19,32,59,.14);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html.lenis, html.lenis body {
    height: auto
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

::selection {
    background: var(--gold);
    color: #fff
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font-family: inherit;
    cursor: pointer
}

img {
    max-width: 100%;
    display: block
}

body::after {
    content: "";
    position: fixed;
    inset: -50%;
    z-index: 2000;
    pointer-events: none;
    opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 7s steps(10) infinite
}

@keyframes grain {
    0%,100% {
        transform: translate(0,0)
    }

    20% {
        transform: translate(-3%,2%)
    }

    40% {
        transform: translate(2%,-3%)
    }

    60% {
        transform: translate(-2%,-2%)
    }

    80% {
        transform: translate(3%,3%)
    }
}

/* ============ PRELOADER ============ */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem
}

    #preloader .pl-coin {
        width: 88px;
        height: 88px;
        animation: spinY 1.6s cubic-bezier(.6,.05,.3,.95) infinite
    }

    #preloader .pl-count {
        font-family: var(--serif);
        font-size: clamp(3rem,8vw,6rem);
        color: var(--gold);
        letter-spacing: .05em;
        line-height: 1
    }

    #preloader .pl-word {
        font-size: .72rem;
        letter-spacing: .55em;
        text-transform: uppercase;
        color: var(--ink-dim);
    }

        #preloader .pl-word span {
            font-size: 1.15rem;
            letter-spacing: .35em;
            text-transform: uppercase;
            color: var(--ink-dim);
            font-weight: bold;
        }

    #preloader .pl-bar {
        width: 180px;
        height: 1px;
        background: var(--line);
        position: relative;
        overflow: hidden
    }

        #preloader .pl-bar i {
            position: absolute;
            inset: 0;
            background: var(--gold);
            transform: scaleX(0);
            transform-origin: left
        }

@keyframes spinY {
    to {
        transform: rotateY(360deg)
    }
}

/* ============================================================
   NAVIGATION — MUDRA AUCTIONS
============================================================ */

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(248,243,232,.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background .45s ease, box-shadow .45s ease, padding .45s ease, border-color .45s ease;
}

    nav.scrolled {
        background: rgba(248,243,232,.94);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-color: var(--line);
        box-shadow: 0 10px 40px rgba(19,32,59,.07);
    }

.nav-inner {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 1.05rem clamp(1.2rem,3vw,3rem);
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: padding .45s ease;
}

nav.scrolled .nav-inner {
    padding-top: .72rem;
    padding-bottom: .72rem;
}

body.nav-menu-open {
    overflow: hidden;
}


/* ================= BRAND ================= */

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-shrink: 0;
}

    .brand .brand-coin {
        width: 38px;
        height: 38px;
        flex: none;
        transition: transform .5s ease, width .4s ease, height .4s ease;
    }

    .brand:hover .brand-coin {
        transform: rotate(8deg);
    }

nav.scrolled .brand .brand-coin {
    width: 34px;
    height: 34px;
}

.brand-name {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: .2em;
    color: var(--ink);
    white-space: nowrap;
}

    .brand-name em {
        color: var(--gold);
        font-style: normal;
    }


/* ================= MAIN MENU ================= */

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(1rem,1.8vw,1.65rem);
    list-style: none;
    margin: auto;
}

    .nav-links > li {
        position: relative;
    }

        .nav-links > li > a,
        .nav-dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: .38rem;
            border: 0;
            background: transparent;
            font-family: var(--sans);
            font-size: .67rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--ink-2);
            position: relative;
            padding: .45rem 0;
            font-weight: 500;
            white-space: nowrap;
            transition: color .3s ease, transform .3s ease;
        }

            .nav-links > li > a::after,
            .nav-dropdown-toggle::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1.5px;
                background: var(--gold);
                transform: scaleX(0);
                transform-origin: right;
                transition: transform .4s cubic-bezier(.65,0,.35,1);
            }

            .nav-links > li > a:hover,
            .nav-dropdown-toggle:hover {
                color: var(--gold-2);
                transform: translateY(-1px);
            }

                .nav-links > li > a:hover::after,
                .nav-dropdown-toggle:hover::after {
                    transform: scaleX(1);
                    transform-origin: left;
                }

            .nav-dropdown-toggle svg {
                transition: transform .3s ease;
            }

.nav-dropdown:hover .nav-dropdown-toggle svg,
.nav-dropdown.open .nav-dropdown-toggle svg {
    transform: rotate(180deg);
}


/* ================= DROPDOWN ================= */

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + .45rem);
    left: 50%;
    width: 310px;
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding: .65rem;
    background: rgba(255,253,246,.98);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(19,32,59,.14);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.3,1), visibility .25s;
}

    .nav-dropdown-menu::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 50%;
        width: 13px;
        height: 13px;
        background: var(--card);
        border-left: 1px solid var(--line);
        border-top: 1px solid var(--line);
        transform: translateX(-50%) rotate(45deg);
    }

    /* Invisible hover bridge.
   Keeps the dropdown open while the cursor travels
   from the menu button into the dropdown panel. */
    .nav-dropdown-menu::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -.55rem;
        height: .55rem;
        background: transparent;
    }

.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown.open > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}


/* ================= DROPDOWN HEADER ================= */

.dropdown-heading {
    padding: .8rem .85rem .65rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: .35rem;
}

    .dropdown-heading span {
        display: block;
        font-family: var(--serif);
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--ink);
    }

    .dropdown-heading small {
        display: block;
        margin-top: .2rem;
        font-size: .63rem;
        letter-spacing: .05em;
        color: var(--ink-dim);
    }


/* ================= DROPDOWN LINKS ================= */

.nav-dropdown-menu > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem .8rem;
    border-radius: 10px;
    color: var(--ink);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

    .nav-dropdown-menu > a:hover {
        background: var(--gold-faint);
        color: var(--gold-2);
        transform: translateX(3px);
    }

    .nav-dropdown-menu > a span {
        display: flex;
        flex-direction: column;
        gap: .18rem;
    }

        .nav-dropdown-menu > a span small {
            color: var(--ink-dim);
            font-size: .65rem;
            letter-spacing: .02em;
        }

    .nav-dropdown-menu > a b {
        color: var(--gold);
        font-size: 1rem;
        font-weight: 400;
        transition: transform .25s ease;
    }

    .nav-dropdown-menu > a:hover b {
        transform: translateX(4px);
    }


/* ================= MEGA MENU ================= */

.nav-mega {
    width: 510px;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .35rem;
}

    .mega-grid a {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        padding: .8rem;
        border-radius: 10px;
        transition: background .25s ease, transform .25s ease;
    }

        .mega-grid a:hover {
            background: var(--gold-faint);
            transform: translateY(-2px);
        }

    .mega-grid strong {
        font-family: var(--serif);
        font-size: .92rem;
        font-weight: 600;
        color: var(--ink);
    }

    .mega-grid small {
        color: var(--ink-dim);
        font-size: .62rem;
        line-height: 1.5;
    }


/* ================= SMALL MORE MENU ================= */

.nav-dropdown-small {
    width: 190px;
}

    .nav-dropdown-small > a {
        justify-content: flex-start;
        font-size: .72rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }


/* ================= RIGHT ACTIONS ================= */

.nav-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-shrink: 0;
    margin-left: .5rem;
}

.nav-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}

    .nav-icon-btn:hover,
    .nav-icon-btn.active {
        background: var(--card);
        border-color: var(--line);
        color: var(--gold-2);
        transform: translateY(-1px);
    }

.nav-login {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: .67rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: .72rem .55rem;
    transition: color .3s ease, transform .3s ease;
}

    .nav-login:hover {
        color: var(--gold-2);
        transform: translateY(-1px);
    }

.nav-register {
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    padding: .72rem 1.25rem;
    border-radius: 99px;
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

    .nav-register:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(217,145,10,.25);
    }


/* ================= MOBILE TOGGLE ================= */

#menuToggle {
    display: none;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: .4rem;
    flex-shrink: 0;
    transition: background .3s ease, border-color .3s ease;
}

    #menuToggle:hover {
        background: var(--card);
        border-color: var(--line);
    }

    #menuToggle span {
        display: block;
        width: 23px;
        height: 1.5px;
        background: var(--ink);
        transition: transform .35s ease, opacity .35s ease;
    }

    #menuToggle.open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

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

    #menuToggle.open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }


/* ============================================================
   SEARCH PANEL
============================================================ */

.nav-search-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 890;
    background: rgba(248,243,232,.98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 70px rgba(19,32,59,.12);
    transform: translateY(-105%);
    opacity: 0;
    visibility: hidden;
    transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .3s ease, visibility .3s;
}

    .nav-search-panel.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

.nav-search-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 6.2rem clamp(1.2rem,4vw,3rem) 2rem;
}

.nav-search-top {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .25rem 1rem;
    box-shadow: 0 10px 35px rgba(19,32,59,.06);
    transition: border-color .25s ease, box-shadow .25s ease;
}

    .nav-search-input-wrap:focus-within {
        border-color: rgba(217,145,10,.55);
        box-shadow: 0 12px 35px rgba(19,32,59,.09);
    }

    .nav-search-input-wrap svg {
        color: var(--gold);
        flex-shrink: 0;
    }

    .nav-search-input-wrap input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--ink);
        font-family: var(--sans);
        font-size: 1rem;
        padding: .85rem 0;
    }

        .nav-search-input-wrap input::placeholder {
            color: var(--ink-dim);
        }

    .nav-search-input-wrap kbd {
        border: 1px solid var(--line);
        background: var(--bg);
        color: var(--ink-dim);
        font-size: .58rem;
        letter-spacing: .08em;
        padding: .3rem .45rem;
        border-radius: 5px;
    }

.nav-search-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 50%;
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

    .nav-search-close:hover {
        background: var(--ink);
        color: #fff;
        transform: rotate(90deg);
    }


/* ================= SEARCH TOOLS ================= */

.nav-search-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.advanced-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
    padding: .45rem 0;
}

    .advanced-filter-toggle svg {
        color: var(--gold);
    }

.filter-chevron {
    transition: transform .25s ease;
}

.advanced-filter-toggle[aria-expanded="true"] .filter-chevron {
    transform: rotate(180deg);
}

.clear-search-filters {
    border: 0;
    background: transparent;
    color: var(--ink-dim);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .clear-search-filters:hover {
        color: var(--gold-2);
    }


/* ================= FILTER PANEL ================= */

.advanced-filter-panel {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .8rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height .35s ease, opacity .3s ease, margin .35s ease;
}

    .advanced-filter-panel.open {
        max-height: 180px;
        opacity: 1;
        margin-top: .8rem;
    }

.filter-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .filter-field label {
        font-size: .59rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-dim);
    }

    .filter-field select {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: var(--card);
        color: var(--ink);
        font-family: var(--sans);
        font-size: .78rem;
        padding: .7rem .75rem;
        outline: none;
    }

        .filter-field select:focus {
            border-color: var(--gold);
        }


/* ================= SEARCH RESULTS ================= */

.nav-search-results {
    margin-top: 1.2rem;
    max-height: 330px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.search-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ink-dim);
}

.search-empty-icon {
    display: block;
    font-family: var(--serif);
    font-size: 2.5rem;
    color: var(--gold);
    margin-bottom: .4rem;
}

.search-empty h4 {
    font-family: var(--serif);
    color: var(--ink);
    font-size: 1.2rem;
    margin-bottom: .3rem;
}

.search-empty p {
    font-size: .75rem;
}

.search-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem;
    border-top: 1px solid var(--line);
    transition: background .2s ease, transform .2s ease;
}

    .search-result:hover {
        background: rgba(255,253,246,.8);
        transform: translateX(3px);
    }

    .search-result img {
        width: 54px;
        height: 54px;
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0;
    }

.search-result-copy {
    flex: 1;
}

    .search-result-copy small {
        display: block;
        color: var(--gold-2);
        font-size: .57rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        margin-bottom: .18rem;
    }

    .search-result-copy strong {
        display: block;
        font-family: var(--serif);
        font-size: .9rem;
        color: var(--ink);
        font-weight: 600;
        line-height: 1.35;
    }

    .search-result-copy span {
        display: block;
        color: var(--ink-dim);
        font-size: .65rem;
        margin-top: .2rem;
    }

.search-result-arrow {
    color: var(--gold);
    font-size: 1rem;
}


/* ============================================================
   LOGIN / REGISTER MODAL
============================================================ */

.account-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

    .account-modal.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.account-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19,32,59,.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.account-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(100%,460px);
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 2rem;
    box-shadow: 0 40px 100px rgba(19,32,59,.28);
    transform: translateY(22px) scale(.97);
    transition: transform .4s cubic-bezier(.2,.7,.3,1);
    perspective: 1400px;
}

.account-modal.open .account-modal-dialog {
    transform: translateY(0) scale(1);
}

/* ============================================================
   ACCOUNT LOGIN / PASSWORD RECOVERY FLIP
============================================================ */

.account-flip {
    position: relative;
    width: 100%;
    min-height: 500px;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2,.75,.25,1);
}

    .account-flip.is-flipped {
        transform: rotateY(180deg);
    }

.account-face {
    position: absolute;
    inset: 0;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.account-face-front {
    transform: rotateY(0deg);
}

.account-face-back {
    transform: rotateY(180deg);
}

/* Slight depth during flip */
.account-modal-dialog:has(.account-flip.is-flipped) {
    perspective: 1400px;
}

.account-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1;
    transition: background .25s ease, color .25s ease, transform .25s ease;
    z-index: 99;
}

    .account-modal-close:hover {
        background: var(--ink);
        color: #fff;
        transform: rotate(90deg);
    }

.account-modal-head {
    padding-right: 2rem;
    margin-bottom: 1.7rem;
}

.account-modal-kicker {
    display: block;
    color: var(--gold-2);
    font-size: .62rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: .55rem;
}

.account-modal-head h2 {
    font-family: var(--serif);
    font-size: clamp(1.8rem,5vw,2.4rem);
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: .55rem;
}

    .account-modal-head h2 span {
        color: var(--gold);
    }

.account-modal-head p {
    color: var(--ink-dim);
    font-size: .78rem;
    line-height: 1.7;
}


/* ================= ACCOUNT FORM ================= */

.account-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

    .account-field label,
    .field-label-row label {
        color: var(--ink);
        font-size: .64rem;
        letter-spacing: .11em;
        text-transform: uppercase;
        font-weight: 500;
    }

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .field-label-row a {
        color: var(--gold-2);
        font-size: .62rem;
    }

.account-field input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: .82rem;
    padding: .78rem .85rem;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}

    .account-field input:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(217,145,10,.08);
    }

.password-input {
    position: relative;
}

    .password-input input {
        padding-right: 4.2rem;
    }

.password-toggle {
    position: absolute;
    top: 50%;
    right: .55rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--gold-2);
    font-size: .61rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ============================================================
   REMEMBER ME + FORGOT PASSWORD
============================================================ */

.remember-row-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: -.1rem;
}

.remember-row {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink-dim);
    font-size: .68rem;
    cursor: pointer;
    user-select: none;
}

    /* Hide native checkbox */
    .remember-row input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

/* Custom checkbox */
.remember-check {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid rgba(19,32,59,.22);
    border-radius: 5px;
    background: var(--bg);
    box-shadow: inset 0 1px 2px rgba(19,32,59,.05), 0 1px 2px rgba(19,32,59,.04);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}

    .remember-check::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 2px;
        width: 5px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg) scale(0);
        opacity: 0;
        transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
    }

/* Checked */
.remember-row input:checked + .remember-check {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(217,145,10,.25), 0 0 0 3px rgba(217,145,10,.08);
}

    .remember-row input:checked + .remember-check::after {
        transform: rotate(45deg) scale(1);
        opacity: 1;
    }

/* Keyboard accessibility */
.remember-row input:focus-visible + .remember-check {
    box-shadow: 0 0 0 3px rgba(217,145,10,.16), 0 4px 12px rgba(19,32,59,.08);
}

.remember-row:hover .remember-check {
    border-color: var(--gold);
    transform: translateY(-1px);
}

.remember-text {
    transition: color .2s ease;
}

.remember-row:hover .remember-text {
    color: var(--ink);
}

.forgot-password-link {
    color: var(--gold-2);
    font-size: .62rem;
    letter-spacing: .03em;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, transform .2s ease;
}

    .forgot-password-link:hover {
        color: var(--gold);
        transform: translateX(2px);
    }

/* ============================================================
   REMEMBER ME + FORGOT PASSWORD
============================================================ */

.account-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    border: 0;
    border-radius: 99px;
    background: var(--ink);
    color: #fff;
    padding: .85rem 1rem;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: .25rem;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

    .account-submit:hover {
        background: var(--gold);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(217,145,10,.22);
    }

.account-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--ink-dim);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: .2rem 0;
}

    .account-divider::before,
    .account-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line);
    }

.account-register-prompt {
    text-align: center;
    color: var(--ink-dim);
    font-size: .7rem;
    line-height: 1.6;
}

    .account-register-prompt button {
        border: 0;
        background: transparent;
        color: var(--gold-2);
        font: inherit;
        font-weight: 500;
        padding: 0;
        cursor: pointer;
    }


/* ============================================================
   NAV RESPONSIVE
============================================================ */

@media(max-width:1180px) {

    .nav-inner {
        gap: 1rem;
    }

    .nav-links {
        gap: .9rem;
    }

        .nav-links > li > a,
        .nav-dropdown-toggle {
            font-size: .62rem;
            letter-spacing: .1em;
        }

    .nav-register {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


@media(max-width:1020px) {

    .nav-inner {
        padding: .9rem clamp(1rem,4vw,2rem);
    }

    .nav-actions {
        margin-left: auto;
    }

    .nav-login,
    .nav-register {
        display: none;
    }

    #menuToggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100dvh;
        margin: 0;
        padding: 7rem 1.5rem 3rem;
        overflow-y: auto;
        background: rgba(248,243,232,.98);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: .35rem;
        transform: translateY(-105%);
        transition: transform .5s cubic-bezier(.7,0,.3,1);
    }

        .nav-links.open {
            transform: translateY(0);
        }

        .nav-links > li > a,
        .nav-dropdown-toggle {
            /*width: 100%;*/
            justify-content: space-between;
            font-size: .85rem;
            letter-spacing: .13em;
            padding: .9rem .3rem;
        }

            .nav-links > li > a::after,
            .nav-dropdown-toggle::after {
                display: none;
            }

    .nav-dropdown-menu {
        position: static;
        width: 100%;
        transform: none !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
        box-shadow: none;
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        padding: .35rem 0 .6rem;
    }

        .nav-dropdown-menu::before,
        .nav-dropdown-menu::after {
            display: none;
        }

    .nav-dropdown.open > .nav-dropdown-menu {
        display: block;
    }

    .nav-mega {
        width: 100%;
    }

    .mega-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dropdown-heading {
        padding-left: .3rem;
    }

    .nav-dropdown-small {
        width: 100%;
    }

        .nav-dropdown-small > a {
            padding-left: .3rem;
        }

    .nav-dropdown-menu > a {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .nav-search-inner {
        padding-top: 5.8rem;
    }

    .mobile-menu-actions {
        display: flex;
        gap: 0.7rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.10);
    }

    .mobile-login-btn,
    .mobile-register-btn {
        flex: 1;
        min-height: 46px;
        padding: 0.75rem 1rem;
        border-radius: 999px;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .mobile-login-btn {
        border: 1px solid var(--ink);
        background: var(--ink);
        color: #fff;
    }

    .mobile-register-btn {
        border: 1px solid transparent;
        background: var(--accent, #c9a227);
        color: #111;
    }

        .mobile-login-btn:hover,
        .mobile-register-btn:hover {
            transform: translateY(-1px);
        }
}

/* Hide on desktop */
@media(min-width:1021px) {

    .mobile-menu-actions {
        display: none;
    }
}

@media(max-width:600px) {

    .brand-name {
        font-size: .92rem;
        letter-spacing: .14em;
    }

    .brand .brand-coin,
    nav.scrolled .brand .brand-coin {
        width: 32px;
        height: 32px;
    }

    .nav-icon-btn {
        width: 38px;
        height: 38px;
    }

    .nav-search-inner {
        padding: 5.5rem 1rem 1.2rem;
    }

    .nav-search-input-wrap {
        gap: .6rem;
    }

        .nav-search-input-wrap kbd {
            display: none;
        }

    .nav-search-close {
        width: 38px;
        height: 38px;
    }

    .nav-search-tools {
        margin-top: .75rem;
    }

    .advanced-filter-panel {
        grid-template-columns: 1fr 1fr;
    }

        .advanced-filter-panel.open {
            max-height: 300px;
        }

    .search-result-copy strong {
        font-size: .8rem;
    }

    .account-modal-dialog {
        padding: 1.5rem;
        border-radius: 18px;
    }

    .account-modal-head {
        margin-bottom: 1.3rem;
    }

    .mega-grid {
        grid-template-columns: 1fr;
    }

    .account-flip {
        min-height: 510px;
    }

    .remember-row-wrap {
        align-items: center;
    }
}

.mobile-menu-brand {
    display: none;
}

@media(max-width:400px) {

    .brand-name em {
        /*display: none;*/
    }

    .nav-inner {
        gap: .4rem;
    }

    .nav-icon-btn {
        width: 35px;
        height: 35px;
    }

    #menuToggle {
        width: 38px;
        height: 38px;
    }

    .advanced-filter-panel {
        grid-template-columns: 1fr;
    }

    .account-flip {
        min-height: 525px;
    }

    .remember-row-wrap {
        gap: .6rem;
    }

    .forgot-password-link {
        font-size: .58rem;
    }
}


/* ============================================================
   PREVENT PAGE SCROLL WHEN ACCOUNT MODAL IS OPEN
============================================================ */

body.account-modal-open {
    overflow: hidden;
}

/* ============================================================
   NAVIGATION — MUDRA AUCTIONS
============================================================ */

/* ============ SHARED ============ */
.wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 clamp(1.2rem,4vw,3.5rem)
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .68rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold-2);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: .55rem 1.3rem;
    box-shadow: 0 6px 20px rgba(19,32,59,.05)
}

    .pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold)
    }

.eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .7rem;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--gold-2);
    margin-bottom: 1.6rem;
    font-weight: 500
}

    .eyebrow::before {
        content: "";
        width: 44px;
        height: 1px;
        background: var(--gold)
    }

.h-display {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.08;
    color: var(--ink);
    letter-spacing: -.01em
}

    .h-display .gld {
        color: var(--gold);
        font-style: italic;
        font-weight: 400
    }

.reveal {
    opacity: 0;
    transform: translateY(46px)
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    background: var(--gold);
    color: #fff;
    border: none;
    font-size: .72rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1.05rem 2.1rem;
    border-radius: 99px;
    transition: transform .3s,box-shadow .35s,background .3s
}

    .btn-gold:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(217,145,10,.4);
        background: var(--gold-2)
    }

    .btn-gold svg {
        transition: transform .35s
    }

    .btn-gold:hover svg {
        transform: translateX(5px)
    }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    font-size: .72rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 1.05rem 2.1rem;
    border-radius: 99px;
    transition: border-color .35s,color .35s,transform .3s
}

    .btn-ghost:hover {
        border-color: var(--gold);
        color: var(--gold-2);
        transform: translateY(-2px)
    }

/* ============ HERO (synced carousel) ============ */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8.5rem 0 4rem;
    overflow: hidden;
    background: radial-gradient(900px 550px at 85% 15%,var(--gold-faint),transparent 60%), radial-gradient(700px 500px at 5% 95%,rgba(217,145,10,.07),transparent 60%),var(--bg)
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem,4vw,4.5rem);
    align-items: center;
    width: 100%
}

.hero-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.5rem,5.2vw,4.6rem);
    line-height: 1.05;
    letter-spacing: -.015em;
    margin: 1.8rem 0 0;
    min-height: 2.1em
}

    .hero-title .ht-line {
        display: block;
        overflow: hidden
    }

        .hero-title .ht-line > span {
            display: inline-block
        }

    .hero-title .ital {
        font-style: italic;
        color: var(--gold);
        font-weight: 400
    }

.hero-sub {
    max-width: 32rem;
    margin: 1.6rem 0 2.2rem;
    color: var(--ink-2);
    font-size: 1.05rem;
    line-height: 1.85;
    min-height: 4.4em
}

.hero-timer-label {
    font-size: .68rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 500
}

    .hero-timer-label .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold);
        animation: pulse 1.6s infinite
    }

.timer {
    display: flex;
    gap: .9rem;
    margin-bottom: 2.2rem
}

.tcell {
    flex: 1;
    max-width: 108px;
    text-align: center;
    padding: 1.1rem .4rem .95rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden
}

    .tcell::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,transparent,var(--gold),transparent)
    }

    .tcell b {
        display: block;
        font-family: var(--serif);
        font-size: clamp(1.7rem,2.8vw,2.4rem);
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
        line-height: 1
    }

    .tcell small {
        display: block;
        margin-top: .5rem;
        font-size: .58rem;
        letter-spacing: .38em;
        text-transform: uppercase;
        color: var(--ink-dim)
    }

.hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}
/* carousel */
.hero-carousel {
    position: relative
}

.hc-frame {
    position: relative;
    aspect-ratio: 4/4.4;
    /* Removed all backgrounds, borders, overlays, and box-shadows */
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hc-frame::after {
        display: none;
    }

.hc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    /*transform: scale(1.02);
    transition: opacity .9s ease,transform 1.4s ease*/
    transform: scale(0.94);
    transition: opacity .8s ease, transform .8s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem; /* Prevents coins from touching frame edges */
}

    .hc-slide.on {
        opacity: 1;
        transform: scale(1)
    }

    .hc-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        transform: scale(1);
        transition: transform 6s ease
    }

    .hc-slide.on img {
        transform: scale(1)
    }

.hc-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 65%, rgba(11, 13, 18, 0.85) 100%);
    pointer-events: none;
}

.hc-cap {
    position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    bottom: 1.3rem;
    z-index: 3;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem
}

    .hc-cap .hc-t {
        font-family: var(--serif);
        font-size: 1.05rem;
        font-weight: 500;
        line-height: 1.3
    }

        .hc-cap .hc-t small {
            display: block;
            font-family: var(--sans);
            font-size: .62rem;
            letter-spacing: .34em;
            text-transform: uppercase;
            opacity: .75;
            margin-bottom: .35rem
        }

.hc-count {
    font-family: var(--serif);
    font-size: .85rem;
    letter-spacing: .1em;
    white-space: nowrap
}

.hc-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.3rem
}

.hc-dots {
    display: flex;
    gap: .55rem
}

    .hc-dots button {
        width: 34px;
        height: 3px;
        border: none;
        border-radius: 2px;
        background: var(--line);
        transition: background .3s
    }

        .hc-dots button.on {
            background: var(--gold)
        }

.hc-arrows {
    display: flex;
    gap: .6rem
}

    .hc-arrows button {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: var(--card);
        color: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .3s,color .3s,border-color .3s,transform .3s
    }

        .hc-arrows button:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff;
            transform: translateY(-2px)
        }

.hc-badge {
    position: absolute;
    top: -1.6rem;
    right: -1.2rem;
    z-index: 4;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .58rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow: 0 18px 40px rgba(217,145,10,.4);
    animation: spinBadge 14s linear infinite
}

    .hc-badge b {
        font-family: var(--serif);
        font-size: 1.25rem;
        letter-spacing: 0;
        margin: .2rem 0
    }

@keyframes spinBadge {
    0%,100% {
        transform: rotate(-6deg)
    }

    50% {
        transform: rotate(6deg)
    }
}

@keyframes pulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(217,145,10,.5)
    }

    50% {
        box-shadow: 0 0 0 8px rgba(217,145,10,0)
    }
}

@media(max-width:1020px) {

    /* ==========================================================
       MOBILE / TABLET MENU
       Keep the existing menu positioning/design.
    ========================================================== */

    .nav-links {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        /* Use the available viewport */
        /*max-height: calc(100dvh - 72px);*/
        /* Remove unnecessary space before Home */
        padding-top: 0 !important;
    }

        .nav-links > li:first-child {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }


        /* ----------------------------------------------------------
       MENU SCROLLBAR
    ---------------------------------------------------------- */

        .nav-links::-webkit-scrollbar {
            width: 5px;
        }

        .nav-links::-webkit-scrollbar-thumb {
            border-radius: 999px;
        }


    /* ----------------------------------------------------------
       LOCK BACKGROUND WHEN MENU IS OPEN
    ---------------------------------------------------------- */

    body.menu-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* ==========================================================
   MOBILE / TABLET MENU BRAND
========================================================== */

    .mobile-menu-brand {
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }

        .mobile-menu-brand > a {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            text-decoration: none;
        }

    .mobile-menu-brand-mark {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
    }

        .mobile-menu-brand-mark svg {
            width: 100%;
            height: 100%;
            display: block;
        }

    .mobile-menu-brand-text {
        font-family: "Fraunces", serif;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }


    /* ==========================================================
   HIDE MOBILE BRAND ON DESKTOP
========================================================== */

    @media(min-width:1021px) {

        .mobile-menu-brand {
            display: none;
        }
    }

    /* ==========================================================
       EXISTING RESPONSIVE PAGE
    ========================================================== */

    .hero-grid {
        grid-template-columns: 1fr
    }

    .hero-carousel {
        order: -1
    }

    .hc-frame {
        aspect-ratio: 4/3
    }

    .hc-badge {
        width: 88px;
        height: 88px;
        top: -1rem;
        right: .4rem
    }

    .hero-title {
        min-height: 0
    }

    .hero-sub {
        min-height: 0
    }
}

/* ============ MARQUEE ============ */
.marquee {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 1.4rem 0;
    overflow: hidden;
    background: var(--bg-2)
}

.marquee-track {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: mq 46s linear infinite
}

.marquee:hover .marquee-track {
    animation-play-state: paused
}

.marquee-track span {
    font-family: var(--serif);
    font-size: 1rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(19,32,59,.42);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4rem
}

    .marquee-track span::after {
        content: "✦";
        color: var(--gold);
        font-size: .8rem
    }

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

/* ============ WHO WE ARE (scroll word-reveal) ============ */
#about {
    padding: 8.5rem 0;
    background: var(--bg)
}

.who-top {
    text-align: center;
    max-width: 64rem;
    margin: 0 auto 5rem
}

.who-big {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.8rem,3.7vw,3.1rem);
    line-height: 1.35;
    margin-top: 1.8rem;
    letter-spacing: -.01em
}

    .who-big .w {
        opacity: .14;
        transition: none
    }

        .who-big .w.gd {
            color: var(--gold);
            font-style: italic
        }

.who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem,5vw,5.5rem);
    align-items: center
}

.who-copy p {
    color: var(--ink-2);
    line-height: 1.9;
    font-size: 1rem;
    margin-bottom: 1.4rem
}

.who-stats {
    display: flex;
    gap: 2.8rem;
    margin: 2.4rem 0;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    flex-wrap: wrap
}

    .who-stats .stat b {
        display: block;
        font-family: var(--serif);
        font-size: 2.1rem;
        font-weight: 600;
        color: var(--ink)
    }

    .who-stats .stat small {
        font-size: .62rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--ink-dim)
    }

.who-collage {
    position: relative;
    padding-bottom: 4.5rem
}

.wc-main {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 6px solid var(--card);
    aspect-ratio: 4/4.4
}

    .wc-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.2s ease
    }

.who-collage:hover .wc-main img {
    transform: scale(1.05)
}

.wc-small {
    position: absolute;
    bottom: 0;
    left: -2.5rem;
    width: 52%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 6px solid var(--card);
    aspect-ratio: 4/3
}

    .wc-small img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.wc-badge {
    position: absolute;
    top: -2rem;
    right: -1rem;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .56rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    box-shadow: var(--shadow-lg);
    animation: spinBadge 12s linear infinite
}

    .wc-badge b {
        font-family: var(--serif);
        font-size: 1.05rem;
        letter-spacing: .05em;
        margin: .25rem 0;
        color: var(--gold)
    }

@media(max-width:900px) {
    .who-grid {
        grid-template-columns: 1fr
    }

    .wc-small {
        left: 0
    }
}

/* ============ COLLECTIONS RAIL (auto-scroll) ============ */
#collections {
    padding: 8.5rem 0;
    background: var(--bg-2);
    overflow: hidden
}

.rail-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 3.5rem;
    gap: 2rem;
    flex-wrap: wrap
}

.rail-nav {
    display: flex;
    gap: .6rem
}

    .rail-nav button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: var(--card);
        color: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .3s,color .3s,transform .3s,border-color .3s
    }

        .rail-nav button:hover {
            background: var(--ink);
            color: #fff;
            border-color: var(--ink);
            transform: translateY(-2px)
        }

.rail {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    padding: 0 clamp(1.2rem,4vw,3.5rem) 1rem;
    scrollbar-width: none
}

    .rail::-webkit-scrollbar {
        display: none
    }

.rcard {
    flex: 0 0 clamp(250px,22vw,310px);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 3/4.1;
    box-shadow: var(--shadow);
    transition: transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s;
    background: var(--ink)
}

    .rcard:hover {
        transform: translateY(-10px) scale(1.015);
        box-shadow: var(--shadow-lg)
    }

    .rcard img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.1s ease,opacity .5s
    }

    .rcard:hover img {
        transform: scale(1.08);
        opacity: .85
    }

    .rcard::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(19,32,59,.04) 34%,rgba(19,32,59,.82));
        pointer-events: none
    }

    .rcard .rc-idx {
        position: absolute;
        top: 1.15rem;
        left: 1.25rem;
        z-index: 2;
        font-family: var(--serif);
        font-size: .95rem;
        color: #fff;
        opacity: .9;
        font-weight: 600
    }

    .rcard .rc-tag {
        position: absolute;
        top: 1.1rem;
        right: 1.15rem;
        z-index: 2;
        font-size: .58rem;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: #fff;
        border: 1px solid rgba(255,255,255,.45);
        border-radius: 99px;
        padding: .32rem .75rem;
        backdrop-filter: blur(6px)
    }

    .rcard .rc-body {
        position: absolute;
        left: 1.4rem;
        right: 1.4rem;
        bottom: 1.4rem;
        z-index: 2;
        color: #fff
    }

        .rcard .rc-body h4 {
            font-family: var(--serif);
            font-size: 1.4rem;
            font-weight: 500;
            line-height: 1.2
        }

        .rcard .rc-body small {
            display: block;
            font-size: .6rem;
            letter-spacing: .28em;
            text-transform: uppercase;
            opacity: .78;
            margin: .5rem 0 .9rem
        }

        .rcard .rc-body .rc-lots {
            font-family: var(--serif);
            font-size: 1.05rem;
            color: var(--gold-soft);
            border-top: 1px dashed rgba(255,255,255,.32);
            padding-top: .75rem;
            display: flex;
            justify-content: space-between;
            align-items: center
        }

            .rcard .rc-body .rc-lots svg {
                opacity: 0;
                transform: translateX(-8px);
                transition: opacity .35s,transform .35s
            }

    .rcard:hover .rc-lots svg {
        opacity: 1;
        transform: translateX(0)
    }

.rail-hint {
    text-align: center;
    margin-top: 1.6rem;
    font-size: .66rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ink-dim)
}

/* ============ STACKED ERA CARDS (pinned, egenslab-style) ============ */
#eras {
    padding: 8.5rem 0 6rem;
    background: var(--bg);
    position: relative;
}

.stack {
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.stack-card {
    position: sticky;
    top: 100px;
    border-radius: 26px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 66vh;
    will-change: transform;
    margin-bottom: 10vh;
}

.sc-copy {
    padding: clamp(2rem,4vw,4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.3rem
}

.sc-tag {
    font-size: .66rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--gold-2);
    font-weight: 600
}

.sc-copy h3 {
    font-family: var(--serif);
    font-size: clamp(1.7rem,3.2vw,2.7rem);
    font-weight: 500;
    line-height: 1.15
}

.sc-copy p {
    color: var(--ink-2);
    line-height: 1.85;
    font-size: .98rem;
    max-width: 30rem
}

.sc-counters {
    display: flex;
    gap: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px dashed var(--line);
    flex-wrap: wrap
}

    .sc-counters b {
        display: block;
        font-family: var(--serif);
        font-size: 1.9rem;
        font-weight: 600;
        color: var(--gold)
    }

    .sc-counters small {
        font-size: .62rem;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--ink-dim);
        display: block;
        margin-top: .3rem;
        max-width: 11rem;
        line-height: 1.6
    }

.sc-img {
    position: relative;
    overflow: hidden;
}

    .sc-img img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .sc-img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,var(--card) 0%,transparent 22%)
    }

.sc-no {
    position: absolute;
    bottom: 1.4rem;
    right: 1.6rem;
    font-family: var(--serif);
    font-size: clamp(3rem,6vw,5rem);
    font-weight: 600;
    color: rgba(255,253,246,.9);
    text-shadow: 0 4px 30px rgba(19,32,59,.5);
    line-height: 1
}

@media(max-width:860px) {
    .stack-card {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .sc-img {
        aspect-ratio: 16/10
    }

        .sc-img::after {
            background: linear-gradient(180deg,var(--card) 0%,transparent 26%)
        }
}

/* ============ AUCTIONS ============ */
#auctions {
    padding: 8.5rem 0;
    background: var(--bg-2)
}

.auction-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.6rem;
    margin-top: 3.8rem
}

.acard {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--card);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,border-color .4s;
    display: flex;
    flex-direction: column
}

    .acard:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(217,145,10,.5)
    }

    .acard::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg,var(--gold),var(--gold-soft));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .55s cubic-bezier(.65,0,.35,1);
        z-index: 3
    }

    .acard:hover::before {
        transform: scaleX(1)
    }

    .acard .a-fig {
        position: relative;
        aspect-ratio: 16/9;
        overflow: hidden
    }

        .acard .a-fig img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1s ease
        }

    .acard:hover .a-fig img {
        transform: scale(1.08)
    }

    .acard .a-fig::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,transparent 50%,rgba(19,32,59,.45))
    }

.a-tag {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 2;
    font-size: .6rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 600;
    padding: .42rem .9rem;
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
    backdrop-filter: blur(8px);
    background: rgba(19,32,59,.35)
}

.acard.live .a-tag {
    background: var(--gold);
    border-color: var(--gold);
    animation: pulse 1.6s ease infinite
}

.acard .a-body {
    padding: 1.9rem 2rem 2.1rem;
    display: flex;
    flex-direction: column;
    flex: 1
}

.acard .a-no {
    font-size: .64rem;
    letter-spacing: .4em;
    color: var(--gold-2);
    text-transform: uppercase;
    font-weight: 600
}

.acard h4 {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 500;
    margin: .9rem 0 .8rem;
    line-height: 1.25
}

.acard p {
    color: var(--ink-2);
    font-size: .9rem;
    line-height: 1.8;
    flex: 1
}

.acard .a-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 1.7rem;
    padding-top: 1.3rem;
    border-top: 1px dashed var(--line);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-dim)
}

    .acard .a-meta b {
        color: var(--gold-2);
        font-weight: 600
    }

.acard .a-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.4rem;
    font-size: .68rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
    transition: color .3s
}

    .acard .a-link svg {
        transition: transform .35s
    }

.acard:hover .a-link {
    color: var(--gold-2)
}

    .acard:hover .a-link svg {
        transform: translateX(6px)
    }

@media(max-width:960px) {
    .auction-cards {
        grid-template-columns: 1fr
    }
}

/* ============ FEATURED LOTS ============ */
#lots {
    padding: 8.5rem 0;
    background: var(--bg)
}

.lots-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 3.8rem;
    gap: 2rem;
    flex-wrap: wrap
}

.lots-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.8rem
}

.lot {
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--shadow);
    transition: transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,border-color .4s;
    display: flex;
    flex-direction: column;
    position: relative
}

    .lot:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(217,145,10,.55)
    }

.lot-fig {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-2)
}

    .lot-fig img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1s ease
    }

.lot:hover .lot-fig img {
    transform: scale(1.09)
}

.lot-fig::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
    transform: skewX(-18deg);
    transition: left .8s ease
}

.lot:hover .lot-fig::before {
    left: 130%
}

.lot-fig::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(19,32,59,.14),transparent 32%);
    pointer-events: none
}

.lot-no {
    position: absolute;
    bottom: 1rem;
    left: 1.1rem;
    z-index: 3;
    font-family: var(--serif);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .14em;
    background: var(--gold);
    color: #fff;
    border-radius: 10px;
    padding: .5rem 1rem;
    box-shadow: 0 10px 24px rgba(217,145,10,.45)
}

.lot-live {
    position: absolute;
    top: 1.05rem;
    right: 1.1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .6rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-weight: 600;
    background: rgba(19,32,59,.88);
    backdrop-filter: blur(8px);
    border-radius: 99px;
    padding: .45rem .9rem;
    color: #fff
}

    .lot-live .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold);
        animation: pulse 1.4s infinite
    }

.lot-body {
    padding: 1.5rem 1.5rem 1.7rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    flex: 1
}

.lot-cat-row {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.lot-cat {
    font-size: .62rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold-2);
    font-weight: 600
}

.lot-interval {
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-dim)
}

.lot-title {
    font-family: var(--serif);
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.45;
    min-height: 3em
}
/* full lot timer */
.lot-timer {
    display: flex;
    gap: .55rem;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    transition: background .4s,border-color .4s
}

.lt-cell {
    flex: 1;
    text-align: center;
    position: relative
}

    .lt-cell + .lt-cell::before {
        content: ":";
        position: absolute;
        left: -.35rem;
        top: .1rem;
        font-family: var(--serif);
        font-weight: 700;
        color: var(--line);
        font-size: 1.05rem
    }

    .lt-cell b {
        display: block;
        font-family: var(--serif);
        font-size: 1.35rem;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
        line-height: 1
    }

    .lt-cell small {
        display: block;
        margin-top: .35rem;
        font-size: .52rem;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--ink-dim)
    }

.lot-timer.urgent {
    background: #FBEDEA;
    border-color: #E5B8B0
}

    .lot-timer.urgent .lt-cell b {
        color: #B4342A
    }

.lot-timer.extended {
    animation: extFlash .7s ease
}

@keyframes extFlash {
    0% {
        background: var(--gold-soft);
        border-color: var(--gold)
    }

    100% {
    }
}

.lot-rows {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .85rem;
    color: var(--ink-2);
    margin-top: auto
}

    .lot-rows div {
        display: flex;
        justify-content: space-between
    }

    .lot-rows b {
        color: var(--ink);
        font-weight: 500;
        font-variant-numeric: tabular-nums
    }

    .lot-rows .cur b {
        color: var(--gold-2);
        font-size: 1.02rem;
        font-weight: 600
    }

.bid-btn {
    margin-top: .5rem;
    width: 100%;
    background: var(--ink);
    border: 1px solid var(--ink);
    color: #fff;
    font-size: .7rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 500;
    padding: .95rem;
    border-radius: 12px;
    transition: background .3s,border-color .3s,transform .2s
}

    .bid-btn:hover {
        background: var(--gold);
        border-color: var(--gold);
        transform: translateY(-1px)
    }

    .bid-btn.bid-flash {
        animation: bidFlash .5s ease
    }

@keyframes bidFlash {
    0% {
        background: var(--gold);
        border-color: var(--gold);
        transform: scale(.97)
    }

    100% {
    }
}

@media(max-width:1024px) {
    .lots-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:640px) {
    .lots-grid {
        grid-template-columns: 1fr
    }
}

/* ============ PROMO / AD BANNERS ============ */
.promo {
    padding: 0
}

.promo-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 4rem clamp(1.2rem,4vw,3.5rem)
}

.promo-slot {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px dashed rgba(217,145,10,.55);
    background: linear-gradient(120deg,var(--gold-soft),#FBF3DF 55%,var(--gold-soft));
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.4rem clamp(1.6rem,4vw,3.2rem);
    transition: box-shadow .4s,transform .4s
}

    .promo-slot:hover {
        box-shadow: var(--shadow);
        transform: translateY(-3px)
    }

    .promo-slot .ps-label {
        position: absolute;
        top: .9rem;
        right: 1.3rem;
        font-size: .56rem;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: var(--gold-2);
        opacity: .8
    }

    .promo-slot h4 {
        font-family: var(--serif);
        font-size: clamp(1.15rem,2.2vw,1.6rem);
        font-weight: 500;
        color: var(--ink);
        max-width: 30rem;
        line-height: 1.35
    }

        .promo-slot h4 em {
            color: var(--gold-2)
        }

    .promo-slot .ps-sub {
        font-size: .8rem;
        color: var(--ink-2);
        margin-top: .5rem;
        letter-spacing: .06em
    }

    .promo-slot .ps-cta {
        flex: none
    }

    .promo-slot.dark {
        background: var(--ink);
        border-color: rgba(245,229,192,.35)
    }

        .promo-slot.dark h4 {
            color: var(--bg)
        }

            .promo-slot.dark h4 em {
                color: var(--gold)
            }

        .promo-slot.dark .ps-sub {
            color: rgba(248,243,232,.6)
        }

        .promo-slot.dark .ps-label {
            color: var(--gold)
        }

@media(max-width:720px) {
    .promo-slot {
        flex-direction: column;
        align-items: flex-start
    }
}

/* ============ PAST RESULTS ============ */
#results {
    padding: 8.5rem 0;
    background: var(--bg)
}

.res-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2.5rem,5vw,5rem);
    align-items: start
}

.res-big {
    font-family: var(--serif);
    font-size: clamp(3rem,6.5vw,5.2rem);
    font-weight: 600;
    color: var(--gold);
    line-height: 1
}

.res-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.6rem;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left .35s,background .35s
}

    .res-row:hover {
        padding-left: .8rem;
        background: rgba(217,145,10,.04)
    }

    .res-row:first-child {
        border-top: 1px solid var(--line)
    }

    .res-row .rr-no {
        font-family: var(--serif);
        color: transparent;
        -webkit-text-stroke: 1px rgba(217,145,10,.7);
        font-size: 1.3rem;
        min-width: 3.2rem
    }

    .res-row .rr-name {
        font-size: .96rem;
        font-weight: 400
    }

        .res-row .rr-name small {
            display: block;
            color: var(--ink-dim);
            font-size: .72rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            margin-top: .3rem
        }

    .res-row .rr-price {
        font-family: var(--serif);
        font-weight: 600;
        color: var(--gold-2);
        font-size: 1.12rem;
        white-space: nowrap
    }

@media(max-width:900px) {
    .res-grid {
        grid-template-columns: 1fr
    }
}

/* ============ SERVICES ============ */
#services {
    padding: 8.5rem 0;
    background: var(--bg-2)
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.5rem;
    margin-top: 3.5rem
}

.svc {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2.3rem 1.9rem;
    background: var(--card);
    box-shadow: var(--shadow);
    transition: transform .4s,border-color .4s,box-shadow .4s
}

    .svc:hover {
        transform: translateY(-7px);
        border-color: rgba(217,145,10,.5);
        box-shadow: var(--shadow-lg)
    }

    .svc .svc-ic {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--gold-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        color: var(--gold-2);
        transition: background .4s,color .4s,transform .4s
    }

    .svc:hover .svc-ic {
        background: var(--gold);
        color: #fff;
        transform: rotate(-8deg) scale(1.08)
    }

    .svc h5 {
        font-family: var(--serif);
        font-size: 1.08rem;
        font-weight: 600;
        margin-bottom: .8rem
    }

    .svc p {
        font-size: .86rem;
        color: var(--ink-2);
        line-height: 1.8
    }

@media(max-width:1000px) {
    .svc-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:560px) {
    .svc-grid {
        grid-template-columns: 1fr
    }
}

/* ============ TESTIMONIALS ============ */
#voices {
    padding: 8.5rem 0;
    background: var(--bg);
    text-align: center
}

.quote-stage {
    max-width: 58rem;
    margin: 3rem auto 0;
    position: relative;
    min-height: 14rem
}

.quote {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s,transform .7s;
    pointer-events: none
}

    .quote.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto
    }

    .quote p {
        font-family: var(--serif);
        font-size: clamp(1.2rem,2.3vw,1.65rem);
        font-style: italic;
        line-height: 1.65;
        color: var(--ink)
    }

    .quote .q-who {
        margin-top: 1.8rem;
        font-size: .7rem;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: var(--gold-2);
        font-weight: 600
    }

.q-dots {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin-top: 2.4rem
}

    .q-dots button {
        width: 36px;
        height: 3px;
        border: none;
        border-radius: 2px;
        background: var(--line);
        transition: background .3s
    }

        .q-dots button.on {
            background: var(--gold)
        }

/* ============ FAQ ============ */
#faq {
    padding: 8.5rem 0;
    background: var(--bg-2)
}

.faq-list {
    max-width: 56rem;
    margin: 3rem auto 0
}

.faq-item {
    border-bottom: 1px solid var(--line)
}

    .faq-item:first-child {
        border-top: 1px solid var(--line)
    }

.faq-q {
    width: 100%;
    background: none;
    border: none;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    text-align: left;
    padding: 1.7rem .4rem;
    font-family: var(--serif);
    font-size: 1.06rem;
    font-weight: 500;
    transition: color .3s
}

    .faq-q:hover {
        color: var(--gold-2)
    }

    .faq-q .fi {
        flex: none;
        width: 32px;
        height: 32px;
        border: 1px solid var(--line);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold-2);
        background: var(--card);
        transition: transform .4s,background .4s,color .4s
    }

.faq-item.open .fi {
    transform: rotate(45deg);
    background: var(--gold);
    color: #fff;
    border-color: var(--gold)
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.4,0,.2,1)
}

    .faq-a p {
        padding: 0 .4rem 1.8rem;
        color: var(--ink-2);
        line-height: 1.85;
        font-size: .94rem;
        max-width: 46rem
    }

/* ============ CONTACT ============ */
#contact {
    padding: 8.5rem 0;
    background: radial-gradient(800px 500px at 85% 10%,var(--gold-faint),transparent 60%),var(--bg)
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem,5vw,5rem);
    margin-top: 3.5rem
}

.c-info {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.c-line {
    display: flex;
    gap: 1.3rem;
    align-items: flex-start
}

    .c-line .ci {
        width: 48px;
        height: 48px;
        flex: none;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold-2);
        box-shadow: var(--shadow)
    }

    .c-line b {
        display: block;
        font-size: .66rem;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--ink-dim);
        margin-bottom: .4rem;
        font-weight: 600
    }

    .c-line span {
        font-size: 1rem;
        color: var(--ink)
    }

form.c-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem
}

.field.full {
    grid-column: 1/-1
}

.field input, .field textarea {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: .95rem;
    padding: 1.05rem 1.2rem;
    outline: none;
    transition: border-color .3s,box-shadow .3s;
    resize: vertical
}

    .field input:focus, .field textarea:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 4px rgba(217,145,10,.12)
    }

    .field input::placeholder, .field textarea::placeholder {
        color: rgba(19,32,59,.38)
    }

.form-note {
    grid-column: 1/-1;
    font-size: .78rem;
    color: var(--ink-dim)
}

@media(max-width:900px) {
    .contact-grid {
        grid-template-columns: 1fr
    }

    form.c-form {
        grid-template-columns: 1fr
    }
}

/* newsletter */
.news-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 4.5rem 0;
    background: var(--bg-2)
}

.news-in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap
}

    .news-in h4 {
        font-family: var(--serif);
        font-size: clamp(1.4rem,2.6vw,2rem);
        font-weight: 500
    }

.news-form {
    display: flex;
    gap: .8rem;
    flex: 1;
    max-width: 32rem;
    min-width: 18rem
}

    .news-form input {
        flex: 1;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 99px;
        color: var(--ink);
        padding: 1rem 1.5rem;
        font-family: var(--sans);
        outline: none;
        transition: border-color .3s,box-shadow .3s
    }

        .news-form input:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 4px rgba(217,145,10,.12)
        }

/* ============ FOOTER ============ */
footer {
    padding: 5rem 0 2.5rem;
    background: var(--bg)
}

.f-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid var(--line)
}

    .f-grid h6 {
        font-size: .66rem;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: var(--gold-2);
        margin-bottom: 1.3rem;
        font-weight: 600
    }

    .f-grid ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: .7rem
    }

        .f-grid ul a {
            font-size: .9rem;
            color: var(--ink-2);
            transition: color .3s,padding-left .3s
        }

            .f-grid ul a:hover {
                color: var(--gold-2);
                padding-left: .4rem
            }

.f-about {
    color: var(--ink-2);
    font-size: .9rem;
    line-height: 1.85;
    max-width: 22rem;
    margin-top: 1.2rem
}

.f-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 2.2rem;
    font-size: .74rem;
    letter-spacing: .12em;
    color: var(--ink-dim)
}

@media(max-width:900px) {
    .f-grid {
        grid-template-columns: 1fr 1fr
    }
}

/* toast */
#toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%,140%);
    z-index: 2500;
    background: var(--ink);
    color: #fff;
    font-size: .76rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 1rem 2rem;
    border-radius: 99px;
    transition: transform .5s cubic-bezier(.2,.9,.3,1.2);
    box-shadow: 0 20px 50px rgba(19,32,59,.3);
}

    #toast.show {
        transform: translate(-50%,0);
    }

/* ==========================================================
   CONTACT / RIGHT SIDEBAR BUTTON
========================================================== */

.right-sidebar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex: 0 0 auto;
    transition: opacity .2s ease, transform .2s ease;
}

    .right-sidebar-button:hover {
        opacity: .7;
    }

    .right-sidebar-button:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
    }

    .right-sidebar-button svg {
        display: block;
        width: 16px;
        height: 16px;
    }


/* ==========================================================
   CONTACT OFFCANVAS (LUXURY NUMISMATIC THEME)
========================================================== */

.contact-offcanvas {
    --bs-offcanvas-width: 420px;
    width: min(420px, 92vw) !important;
    z-index: 1080 !important;
    background: #131211 !important;
    color: #F4F1EA !important;
    border-left: 1px solid rgba(217, 145, 10, 0.25) !important;
    box-shadow: -25px 0 80px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    /* ------------------------------------------
   HEADER
------------------------------------------ */

    .contact-offcanvas .offcanvas-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2.25rem 2rem 1.5rem;
        border-bottom: 1px solid rgba(217, 145, 10, 0.15);
        background: linear-gradient(180deg, rgba(217, 145, 10, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
    }

.contact-offcanvas-heading {
    min-width: 0;
}

.contact-offcanvas-kicker {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--gold, #D9910A);
}

.contact-offcanvas .offcanvas-title {
    margin: 0;
    font-family: 'Fraunces', serif, Georgia;
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

/* CLOSE BUTTON */

.contact-offcanvas .btn-close {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.6rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .contact-offcanvas .btn-close:hover {
        opacity: 1;
        background-color: var(--gold, #D9910A);
        border-color: var(--gold, #D9910A);
        filter: none;
        transform: rotate(90deg) scale(1.05);
    }

/* ------------------------------------------
   BODY & CONTENT
------------------------------------------ */

.contact-offcanvas .offcanvas-body {
    padding: 2rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 145, 10, 0.3) transparent;
}

.contact-offcanvas-intro {
    margin: 0 0 1.75rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #A3A09A;
    font-weight: 400;
}

/* ------------------------------------------
   CONTACT DETAIL ROWS
------------------------------------------ */

.contact-detail {
    position: relative;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

    .contact-detail:hover {
        border-bottom-color: rgba(217, 145, 10, 0.3);
        transform: translateX(4px);
    }

.contact-detail-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold, #D9910A);
}

.contact-detail a {
    display: inline-block;
    color: #F4F1EA;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
    transition: color 0.25s ease, transform 0.25s ease;
}

    .contact-detail a:hover {
        color: var(--gold, #D9910A);
        text-decoration: none;
    }

.contact-detail p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #D6D3CC;
}

/* ------------------------------------------
   ACTION CTA BUTTON
------------------------------------------ */

.contact-offcanvas-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 2.25rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #D9910A 0%, #B57707 100%);
    color: #000000;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(217, 145, 10, 0.25);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

    .contact-offcanvas-cta svg {
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .contact-offcanvas-cta:hover {
        background: linear-gradient(135deg, #ECC157 0%, #D9910A 100%);
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(217, 145, 10, 0.4);
    }

        .contact-offcanvas-cta:hover svg {
            transform: translateX(4px);
        }

    .contact-offcanvas-cta:active {
        transform: translateY(0);
    }

/* ------------------------------------------
   BOOTSTRAP BACKDROP & MOBILE
------------------------------------------ */

.offcanvas-backdrop {
    z-index: 1070 !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 1020px) {
    .contact-offcanvas {
        --bs-offcanvas-width: min(420px, 92vw);
        width: min(420px, 92vw) !important;
    }

        .contact-offcanvas .offcanvas-header {
            padding: 1.75rem 1.5rem 1.25rem;
        }

        .contact-offcanvas .offcanvas-body {
            padding: 1.5rem;
        }
}

/* ==========================================================
   CONTACT / 2×2 DOTS BUTTON (COMPACT 30px CIRCLE)
========================================================== */

.right-sidebar-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Reduced outer circle width */
    height: 30px; /* Reduced outer circle height */
    padding: 0;
    margin-left: 0.35rem;
    border: 1px solid rgba(217, 145, 10, 0.25);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(248, 245, 240, 0.8));
    color: var(--gold, #D9910A);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(217, 145, 10, 0.08);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

    /* ------------------------------------------
   INNER SVG ICON SIZING
------------------------------------------ */

    .right-sidebar-button svg {
        width: 14px; /* Scaled proportionately for a 30px container */
        height: 14px;
        display: block;
        position: relative;
        z-index: 1;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

        .right-sidebar-button svg path {
            transition: transform 0.3s ease, opacity 0.3s ease;
            transform-box: fill-box;
            transform-origin: center;
        }

    /* ------------------------------------------
   HOVER STATE
------------------------------------------ */

    .right-sidebar-button:hover {
        color: var(--gold-dark, #B57707);
        border-color: rgba(217, 145, 10, 0.55);
        background: #ffffff;
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 4px 14px rgba(217, 145, 10, 0.2);
    }

        .right-sidebar-button:hover svg {
            transform: rotate(90deg);
        }

    /* ------------------------------------------
   ACTIVE / OPEN STATE
------------------------------------------ */

    .right-sidebar-button[aria-expanded="true"],
    .right-sidebar-button.is-active {
        background: #1a1918;
        color: #D9910A;
        border-color: #D9910A;
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(217, 145, 10, 0.2);
    }

        .right-sidebar-button[aria-expanded="true"] svg,
        .right-sidebar-button.is-active svg {
            transform: rotate(135deg);
        }

/* ------------------------------------------
   MOBILE RESPONSIVE
------------------------------------------ */

@media (max-width: 991px) {
    .right-sidebar-button {
        width: 28px;
        height: 28px;
    }

        .right-sidebar-button svg {
            width: 12px;
            height: 12px;
        }
}

/* ==========================================================
   LUXURY BACK TO TOP BUTTON WITH PROGRESS RING
========================================================== */

.back-to-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(19, 18, 17, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--gold, #D9910A);
    cursor: pointer;
    z-index: 990;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(217, 145, 10, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
}

    /* Show State Triggered by JS */
    .back-to-top-btn.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    /* Hover Micro-Interactions */
    .back-to-top-btn:hover {
        background: #191817;
        color: #FFFFFF;
        transform: translateY(-4px) scale(1.06);
        box-shadow: 0 14px 36px rgba(217, 145, 10, 0.3), 0 0 0 1px rgba(217, 145, 10, 0.5);
    }

    .back-to-top-btn:active {
        transform: translateY(-1px) scale(0.96);
    }

    /* SVG Progress Ring Positioning */
    .back-to-top-btn .progress-ring {
        position: absolute;
        inset: 2px;
        transform: rotate(-90deg); /* Start progress from 12 o'clock */
        pointer-events: none;
    }

    .back-to-top-btn .progress-ring-track {
        fill: none;
        stroke: rgba(255, 255, 255, 0.08);
        stroke-width: 2.5;
    }

    .back-to-top-btn .progress-ring-bar {
        fill: none;
        stroke: var(--gold, #D9910A);
        stroke-width: 2.5;
        stroke-dasharray: 125.66; /* 2 * PI * r (2 * 3.14159 * 20) */
        stroke-dashoffset: 125.66;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
    }

    .back-to-top-btn:hover .progress-ring-bar {
        stroke: #FFFFFF;
    }

    /* Arrow Icon Motion */
    .back-to-top-btn .arrow-icon {
        position: relative;
        z-index: 2;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .back-to-top-btn:hover .arrow-icon {
        transform: translateY(-3px);
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 46px;
        height: 46px;
    }

        .back-to-top-btn .progress-ring {
            width: 42px;
            height: 42px;
        }
}