@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700;900&display=swap');

/* ============================================================
   ROOT VARIABLES
   ============================================================ */


:root {
    --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    --leather-hi: #8a5a32;
    --leather-mid: #4a2e18;
    --leather-lo: #2a180c;
    --leather-deep: #120804;
    --stitch: #f0d49a;
    --brass-hi: #fff2cf;
    --brass-mid: #d4b46a;
    --brass-lo: #8a6d33;
    --brass-dark: #3a2c12;
    --gold: #d4af73;
    --bg-dark: #05070a;
    --luxury-red: #e11d48;
    --luxury-green: #10b981;
    --text-main: #ffffff;
    --text-muted: #64748b;
    --primary: #055d53;
    --primary-soft: #0c6e3d;
    --secondary: #002b68;
    --ink: #16202e;
    --muted: #5c6675;
    --line: #e6e9ee;
    --bg-alt: #f7f8f9;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 10px 30px -12px rgba(16, 24, 40, .18);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Barlow", sans-serif;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container {
    max-width: 1360px;
}

.bg-f4f4f4 {
    background: var(--bg-alt);
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

p,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--ink);
}

.flex-center-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

img {
    border-radius: var(--radius);
}




/* ============================================================
   MEDIA ICONS (SIDEBAR) — WOVEN FABRIC TAG
   ============================================================ */
.media-icons-wrapper {
    position: fixed;
    top: 50%;
    right: -2px;
    transform: translateY(-50%) rotate(-1.2deg);
    z-index: 999;
    padding: 22px 10px 22px 14px;
    /* Tag shape — one side stitched, other "torn" / angled */
    border-radius: 14px 0 0 14px;
    /* Fabric body — warm off-white, slight gradient for weave depth */
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 3px), linear-gradient(160deg, #fdfbf6 0%, #f4f0e6 100%);
    color: #2a2a2a;
    /* Paper/cloth tag edges */
    border: 1px solid rgba(0, 0, 0, .08);
    border-right: 0;
    /* Soft shadow + inner highlight like real cloth */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .04), -8px 6px 18px -10px rgba(0, 0, 0, .28);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

    /* Stitched seam just inside the tag edge — the "sewn-on" line */
    .media-icons-wrapper::before {
        content: "";
        position: absolute;
        inset: 6px 8px 6px 8px;
        border: 1.5px dashed rgba(0, 0, 0, .35);
        border-radius: 10px 0 0 10px;
        border-right: 0;
        pointer-events: none;
        opacity: .9;
    }

    /* small hanging thread at the top */
    .media-icons-wrapper::after {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 1.5px;
        height: 10px;
        background: rgba(0, 0, 0, .35);
        transform: translateX(-50%) rotate(8deg);
        border-radius: 2px;
        opacity: .7;
    }

.media-icon-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 2;
}

/* ============================================================
   MEDIA ICONS — BASE DOT
   ============================================================ */
.media-icon-link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    background-color: #fbfaf6;
    color: #333;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .12);
    outline: 1px dashed rgba(0, 0, 0, .22);
    outline-offset: -4px;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), background-color .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease, outline-color .35s ease;
}

    .media-icon-link .bi {
        font-size: 15px;
        line-height: 1;
        color: inherit;
        background: transparent;
    }

    .media-icon-link:hover {
        color: #fff;
        transform: scale(1.12) translateX(-4px) rotate(-3deg);
        outline-color: rgba(255, 255, 255, .55);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    }

    /* ============================================================
   BRAND COLORS — via bootstrap icon classes
   ============================================================ */

    /* LinkedIn */
    .media-icon-link:has(.bi-linkedin) {
        color: #0A66C2;
    }

        .media-icon-link:has(.bi-linkedin):hover {
            background-color: #0A66C2 !important;
            background-image: none !important;
            color: #fff !important;
            box-shadow: 0 6px 16px rgba(10, 102, 194, .5) !important;
            outline-color: rgba(255, 255, 255, .55);
        }

    /* X / Twitter */
    .media-icon-link:has(.bi-twitter-x) {
        color: #000;
    }

        .media-icon-link:has(.bi-twitter-x):hover {
            background-color: #000 !important;
            background-image: none !important;
            color: #fff !important;
            box-shadow: 0 6px 16px rgba(0, 0, 0, .5) !important;
            outline-color: rgba(255, 255, 255, .55);
        }

    /* Instagram */
    .media-icon-link:has(.bi-instagram) {
        color: #E4405F;
    }

        .media-icon-link:has(.bi-instagram):hover {
            background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4) !important;
            color: #fff !important;
            box-shadow: 0 6px 16px rgba(221, 42, 123, .5) !important;
            outline-color: rgba(255, 255, 255, .55);
        }

    /* Facebook */
    .media-icon-link:has(.bi-facebook) {
        color: #1877F2;
    }

        .media-icon-link:has(.bi-facebook):hover {
            background-color: #1877F2 !important;
            background-image: none !important;
            color: #fff !important;
            box-shadow: 0 6px 16px rgba(24, 119, 242, .5) !important;
            outline-color: rgba(255, 255, 255, .55);
        }

    /* YouTube */
    .media-icon-link:has(.bi-youtube) {
        color: #FF0000;
    }

        .media-icon-link:has(.bi-youtube):hover {
            background-color: #FF0000 !important;
            background-image: none !important;
            color: #fff !important;
            box-shadow: 0 6px 16px rgba(255, 0, 0, .5) !important;
            outline-color: rgba(255, 255, 255, .55);
        }

    /* Threads */
    .media-icon-link:has(.bi-threads) {
        color: #000;
    }

        .media-icon-link:has(.bi-threads):hover {
            background-color: #000 !important;
            background-image: none !important;
            color: #fff !important;
            box-shadow: 0 6px 16px rgba(0, 0, 0, .5) !important;
            outline-color: rgba(255, 255, 255, .55);
        }

    /* WeChat */
    .media-icon-link:has(.bi-wechat) {
        color: #07C160;
    }

        .media-icon-link:has(.bi-wechat):hover {
            background-color: #07C160 !important;
            background-image: none !important;
            color: #fff !important;
            box-shadow: 0 6px 16px rgba(7, 193, 96, .5) !important;
            outline-color: rgba(255, 255, 255, .55);
        }

    /* LinkedIn */
    .media-icon-link:has(.bi-linkedin) {
        color: #0A66C2;
    }

        .media-icon-link:has(.bi-linkedin):hover {
            background-color: #0A66C2;
            color: #fff;
            box-shadow: 0 6px 16px rgba(10, 102, 194, .5);
        }

    /* X / Twitter */
    .media-icon-link:has(.bi-twitter-x) {
        color: #000000;
    }

        .media-icon-link:has(.bi-twitter-x):hover {
            background-color: #000000;
            color: #fff;
            box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
        }

    /* Instagram */
    .media-icon-link:has(.bi-instagram) {
        color: #E4405F;
    }

        .media-icon-link:has(.bi-instagram):hover {
            background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
            color: #fff;
            box-shadow: 0 6px 16px rgba(221, 42, 123, .5);
        }

    /* Facebook */
    .media-icon-link:has(.bi-facebook) {
        color: #1877F2;
    }

        .media-icon-link:has(.bi-facebook):hover {
            background-color: #1877F2;
            color: #fff;
            box-shadow: 0 6px 16px rgba(24, 119, 242, .5);
        }

    /* YouTube */
    .media-icon-link:has(.bi-youtube) {
        color: #FF0000;
    }

        .media-icon-link:has(.bi-youtube):hover {
            background-color: #FF0000;
            color: #fff;
            box-shadow: 0 6px 16px rgba(255, 0, 0, .5);
        }

    /* Threads */
    .media-icon-link:has(.bi-threads) {
        color: #000000;
    }

        .media-icon-link:has(.bi-threads):hover {
            background-color: #000000;
            color: #fff;
            box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
        }

    /* WeChat */
    .media-icon-link:has(.bi-wechat) {
        color: #07C160;
    }

        .media-icon-link:has(.bi-wechat):hover {
            background-color: #07C160;
            color: #fff;
            box-shadow: 0 6px 16px rgba(7, 193, 96, .5);
        }

/* ---------- tag sways slightly on hover (like swinging cloth) ---------- */
.media-icons-wrapper:hover {
    transform: translateY(-50%) rotate(-2deg) translateX(-4px);
}

/* ---------- mobile ---------- */
@media (max-width: 768px) {
    .media-icons-wrapper {
        display: none;
    }
}

/* ============================================================
   HEADER — BLACK LEATHER
   ============================================================ */
.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 12px 22px;
    /* Black leather body */
    background: var(--grain), radial-gradient(circle at 18% 24%, rgba(0, 0, 0, .5) 0 1px, transparent 1.8px), radial-gradient(circle at 72% 58%, rgba(0, 0, 0, .45) 0 1px, transparent 1.8px), radial-gradient(circle at 38% 82%, rgba(0, 0, 0, .4) 0 1px, transparent 1.8px), radial-gradient(circle at 88% 30%, rgba(0, 0, 0, .35) 0 1px, transparent 1.8px), radial-gradient(140% 100% at 50% 0%, rgba(120, 120, 120, .18), transparent 55%), radial-gradient(140% 100% at 50% 100%, rgba(0, 0, 0, .85), transparent 60%), linear-gradient(160deg, #2a2a2a 0%, #1e1e1e 30%, #141414 60%, #0a0a0a 100%);
    background-size: 140px 140px, 5px 5px, 7px 7px, 6px 6px, 8px 8px, auto, auto, auto;
    background-blend-mode: multiply, normal, normal, normal, normal, normal, normal, normal;
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 4px 20px -10px rgba(0, 0, 0, .8);
    corner-shape: scoop;
    border-radius: 0 0 15px 15px;
}

    /* stitched seam along the bottom — warm thread on black */
    .header-wrapper::after {
        content: "";
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 6px;
        height: 0;
        border-bottom: 1.5px dashed rgba(255, 235, 200, .35);
        pointer-events: none;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
    }

    /* faint inner stitch frame */
    .header-wrapper::before {
        content: "";
        position: absolute;
        inset: 6px 8px 12px 8px;
        border: 1px dashed rgba(255, 235, 200, .14);
        border-radius: 10px;
        corner-shape: scoop;
        pointer-events: none;
        opacity: .7;
    }

    .header-wrapper .container {
        position: relative;
    }

    .header-wrapper .btn-group {
        gap: 10px;
    }

        .header-wrapper .btn-group * {
            border-radius: 20px !important;
        }

/* ============================================================
   HAMBURGER TOGGLE
   ============================================================ */
#checkbox-mobile,
#checkbox-desktop {
    display: none;
}

.toggle {
    position: relative;
    width: 40px;
    cursor: pointer;
    margin: auto;
    display: block;
    height: calc(4px * 3 + 11px * 2);
    z-index: 99999;
}

.bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: calc(4px / 2);
    background: #1cff56;
    color: inherit;
    opacity: 1;
    transition: none 0.35s cubic-bezier(.5, -0.35, .35, 1.5) 0s;
    z-index: 99999;
}

.bar--top {
    bottom: calc(50% + 11px + 4px / 2);
    transition-property: bottom, transform;
    transition-delay: calc(0s + 0.35s), 0s;
}

.bar--middle {
    top: calc(50% - 4px / 2);
    transition-property: opacity;
    transition-delay: calc(0s + 0.35s);
}

.bar--bottom {
    top: calc(50% + 11px + 4px / 2);
    transition-property: top, transform;
    transition-delay: calc(0s + 0.35s), 0s;
}

#checkbox-mobile:checked + .toggle .bar--top,
#checkbox-desktop:checked + .toggle .bar--top {
    bottom: calc(50% - 4px / 2);
    transform: rotate(135deg);
    transition-delay: 0s, calc(0s + 0.35s);
    background: #df2127;
}

#checkbox-mobile:checked + .toggle .bar--middle,
#checkbox-desktop:checked + .toggle .bar--middle {
    opacity: 0;
    transition-duration: 0s;
    transition-delay: calc(0s + 0.35s);
}

#checkbox-mobile:checked + .toggle .bar--bottom,
#checkbox-desktop:checked + .toggle .bar--bottom {
    top: calc(50% - 4px / 2);
    transform: rotate(225deg);
    transition-delay: 0s, calc(0s + 0.35s);
    background: #df2127;
}

/* ============================================================
   INNER HEADER
   ============================================================ */
.inner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    position: relative;
    width: 100%;
    max-width: 100%;
    gap: 10px;
}

.header-logo {
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px 15px 0 0;
    flex-grow: 0;
    flex-shrink: 0;
}

    /* invert logo on black */
    .header-logo img,
    .navbar-brand img {
        filter: brightness(0) invert(1);
    }

.header-content {
    width: 100%;
    max-width: fit-content;
}

    .header-content p:nth-child(1):not(span p:nth-child(1)) {
        border-bottom: 1px dashed rgb(223 33 39);
        padding-bottom: 10px;
        padding-inline: 0;
        margin-bottom: 0;
    }

    .header-content span {
        display: flex;
    }

        .header-content span p:nth-child(1) {
            border-right: 1px dashed rgba(12, 128, 115, .7);
            padding-left: 0;
        }

        .header-content span p {
            margin-bottom: 0px;
            padding-top: 10px;
        }

    .header-content p {
        font-family: "Tahoma", Sans-serif;
        font-size: 17px;
        font-weight: 500;
        color: #fdf6ec;
        line-height: 20px;
        margin-bottom: 15px;
        padding-inline: 10px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    }

        .header-content p:last-child {
            font-size: 16px;
            font-weight: 600;
            padding-right: 0;
            color: #e6c988;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 18px rgba(230, 201, 136, .25);
        }

.header-btns-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    width: 100%;
    max-width: 470px;
}

    .header-btns-group .btn {
        flex-shrink: 0;
    }

/* ============================================================
   BUTTONS
   ============================================================ */


.white-btn {
    position: relative;
    text-align: center;
    background-color: #df2127;
    font-family: "Roboto", Sans-serif;
    font-weight: 500;
    fill: #000000;
    color: #fff;
    border-style: solid;
    border-width: 2px;
    border-color: #df2127;
    border-radius: 21px;
    overflow: hidden;
    z-index: 2;
}

    /* inner dashed stitch ring */
    .white-btn::before {
        content: "";
        position: absolute;
        inset: 5px;
        border: 1.5px dashed rgba(255, 255, 255, .55);
        border-radius: 16px;
        pointer-events: none;
        transition: border-color .35s ease;
    }

    /* sheen sweep */
    .white-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -80%;
        width: 50%;
        height: 100%;
        background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
        transform: skewX(-20deg);
        transition: left .7s cubic-bezier(.16, 1, .3, 1);
        pointer-events: none;
    }

    .white-btn:hover {
        background-color: #000;
        border-color: #df2127;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -10px rgba(223, 33, 39, .55);
    }

        .white-btn:hover::before {
            border-color: rgba(223, 33, 39, .85);
        }

        .white-btn:hover::after {
            left: 130%;
        }



.tranparent {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.menu-btn {
    z-index: 99999;
    position: relative;
}

/* ============================================================
   MENU / NAVIGATION — PREMIUM GLASS LIGHT (FINAL)
   ============================================================ */

/* ---- wrapper ---- */
.menu-wrapper {
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    overflow-x: hidden;
    background: radial-gradient(1200px 600px at 12% -10%, rgba(5, 93, 83, .16), transparent 60%), radial-gradient(1000px 500px at 100% 110%, rgb(0 0 0 / 14%), transparent 60%), rgb(0 0 0 / 82%);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    opacity: 0;
    border-radius: 40px;
    outline-offset: -20px;
    transform: none !important;
    padding-bottom: 25px;
    transition: opacity .5s cubic-bezier(.85, 0, .15, 1), visibility 0s linear .5s;
    outline: 3px dashed rgb(255 235 200 / 25%);
    corner-shape: scoop;
    border: 3px dashed rgba(5, 93, 83, .8);
}

    .menu-wrapper::-webkit-scrollbar {
        display: none;
    }


    .menu-wrapper.show {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
        transition: opacity .5s cubic-bezier(.85, 0, .15, 1), visibility 0s linear 0s;
    }

        .menu-wrapper.show::before {
            opacity: 1;
        }

/* ---- nav list ---- */
.navbar-nav {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 125px clamp(24px, 8vw, 120px);
    margin: 0;
    list-style: none;
    gap: 6px;
    overflow: visible !important;
    transform: none !important;
}

    /* ---------- top-level items ---------- */
    .navbar-nav > .nav-item {
        position: relative;
        z-index: 1;
        width: auto;
        text-align: right;
        overflow: visible !important;
        opacity: 0;
        top: 20px;
        transition: opacity .5s cubic-bezier(.2, .8, .2, 1), top .55s cubic-bezier(.2, .8, .2, 1);
    }

.menu-wrapper.show .navbar-nav > .nav-item {
    opacity: 1;
    top: 0;
}

    .menu-wrapper.show .navbar-nav > .nav-item:nth-child(1) {
        transition-delay: .10s;
    }

    .menu-wrapper.show .navbar-nav > .nav-item:nth-child(2) {
        transition-delay: .16s;
    }

    .menu-wrapper.show .navbar-nav > .nav-item:nth-child(3) {
        transition-delay: .22s;
    }

    .menu-wrapper.show .navbar-nav > .nav-item:nth-child(4) {
        transition-delay: .28s;
    }

    .menu-wrapper.show .navbar-nav > .nav-item:nth-child(5) {
        transition-delay: .34s;
    }

    .menu-wrapper.show .navbar-nav > .nav-item:nth-child(6) {
        transition-delay: .40s;
    }

    .menu-wrapper.show .navbar-nav > .nav-item:nth-child(7) {
        transition-delay: .46s;
    }

    .menu-wrapper.show .navbar-nav > .nav-item:nth-child(8) {
        transition-delay: .52s;
    }

    /* elevate open dropdown item ABOVE all siblings */
    .menu-wrapper.show .navbar-nav > .nav-item.dropdown:has(.dropdown-menu.show),
    .menu-wrapper.show .navbar-nav > .nav-item.dropdown:has(.dropdown-toggle.show),
    .menu-wrapper.show .navbar-nav > .nav-item.dropdown:has(.dropdown-toggle[aria-expanded="true"]) {
        z-index: 100 !important;
    }

/* ---------- top-level link ---------- */
.navbar-nav > .nav-item > .nav-link {
    position: relative;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    font-family: "Tahoma", sans-serif;
    font-size: clamp(1.5rem, 3.2vh, 2.25rem);
    font-weight: 700;
    letter-spacing: .015em;
    color: var(--brass-hi);
    padding: 8px 4px;
    line-height: 1.2;
    transition: color .3s ease, letter-spacing .45s cubic-bezier(.2, .8, .2, 1);
}

    /* stitched underline — for both regular links AND dropdown toggles */
    .navbar-nav > .nav-item > .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 4px;
        bottom: 2px;
        height: 2px;
        background-image: linear-gradient(90deg, #0cceb8 0 6px, transparent 6px 12px);
        background-size: 12px 2px;
        background-repeat: repeat-x;
        opacity: 0;
        transform: scaleX(.4);
        transform-origin: right center;
        transition: opacity .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
        animation: navStitchSlide 1.6s linear infinite;
        border: 0 !important;
        width: auto;
        margin: 0;
        display: block;
    }

    /* hover state */
    .navbar-nav > .nav-item > .nav-link:hover {
        color: #0cceb8;
        letter-spacing: .035em;
    }

        .navbar-nav > .nav-item > .nav-link:hover::after {
            opacity: 1;
            transform: scaleX(1);
        }

    /* active state */
    .navbar-nav > .nav-item > .nav-link.active {
        color: #0cceb8 !important;
    }

        .navbar-nav > .nav-item > .nav-link.active::after {
            opacity: 1;
            transform: scaleX(1);
        }

    /* dropdown toggle — show stitch on hover OR when open */
    .navbar-nav > .nav-item > .nav-link.dropdown-toggle:hover::after,
    .navbar-nav > .nav-item > .nav-link.dropdown-toggle.show::after,
    .navbar-nav > .nav-item > .nav-link.dropdown-toggle[aria-expanded="true"]::after {
        opacity: 1;
        transform: scaleX(1);
    }

    /* ============================================================
   CARET — custom chevron BEFORE the label (top-level toggles)
   ============================================================ */
    .navbar-nav > .nav-item > .nav-link.dropdown-toggle::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transform-origin: center;
        transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
        opacity: .7;
    }

    .navbar-nav > .nav-item > .nav-link.dropdown-toggle:hover::before {
        opacity: 1;
    }

    .navbar-nav > .nav-item > .nav-link.dropdown-toggle.show::before,
    .navbar-nav > .nav-item > .nav-link.dropdown-toggle[aria-expanded="true"]::before {
        transform: rotate(-135deg) translateY(-2px);
        opacity: 1;
    }

/* ============================================================
   LEVEL 1 — DROPDOWN CARD
   ============================================================ */
.navbar-nav .nav-item.dropdown {
    position: relative;
}

.navbar-nav .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    inset: auto auto auto auto !important;
    float: none !important;
    display: none;
    min-width: 320px;
    max-width: 460px;
    width: max-content;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(5, 93, 83, .18);
    border-radius: 14px;
    box-shadow: 0 30px 60px -20px rgba(0, 43, 104, .35), 0 10px 30px -15px rgba(0, 43, 104, .22);
    padding: 14px 18px 14px 24px;
    text-align: left;
    z-index: 9999 !important;
    overflow: visible;
    opacity: 1;
    filter: none;
}

    .navbar-nav .dropdown-menu.show {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        animation: menuDropIn .4s cubic-bezier(.2, .8, .2, 1) both;
    }

        /* dashed teal rail — L1 signature */
        .navbar-nav .dropdown-menu.show::before {
            content: "";
            position: absolute;
            left: 10px;
            top: 16px;
            bottom: 16px;
            width: 0;
            border-left: 2px dashed rgba(5, 93, 83, .38);
            border-radius: 2px;
            pointer-events: none;
        }

    .navbar-nav .dropdown-menu > li {
        list-style: none;
    }

    .navbar-nav .dropdown-menu .dropdown-item {
        position: relative;
        display: block;
        width: 100%;
        font-family: "Tahoma", sans-serif;
        font-size: .92rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #23324a;
        padding: 11px 18px 11px 26px;
        background: transparent;
        border-radius: 10px;
        text-align: left;
        text-decoration: none;
        transition: color .28s ease, background-color .3s ease, padding-left .35s cubic-bezier(.2, .8, .2, 1), letter-spacing .35s ease;
    }

        .navbar-nav .dropdown-menu .dropdown-item::before {
            content: "";
            position: absolute;
            left: 12px;
            top: 50%;
            width: 6px;
            height: 6px;
            background: rgba(5, 93, 83, .35);
            transform: translateY(-50%) rotate(45deg);
            transition: background .3s ease, transform .35s ease;
        }

        .navbar-nav .dropdown-menu .dropdown-item:hover {
            color: #055d53;
            background-color: rgba(5, 93, 83, .09);
            letter-spacing: .12em;
            padding-left: 32px;
        }

            .navbar-nav .dropdown-menu .dropdown-item:hover::before {
                background: #055d53;
                transform: translateY(-50%) rotate(45deg) scale(1.2);
            }

        /* hide ONLY bootstrap's ::after triangle inside dropdown items */
        .navbar-nav .dropdown-menu .dropdown-toggle::after,
        .navbar-nav .dropdown-menu .dropdown-item::after {
            border: 0 !important;
            display: none !important;
            content: none !important;
        }

    /* ============================================================
   SUB-DROPDOWN TOGGLE — custom chevron for L2 toggles
   (Post Show Report, India Pavilion - CLE, etc.)
   ============================================================ */
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu) > .dropdown-item::before,
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu) > .dropdown-item.sub-toggle::before,
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu) > .dropdown-item.sub-dropdown-toggle::before,
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu) > .dropdown-item[data-bs-toggle="dropdown"]::before {
        content: "";
        position: static;
        display: inline-block;
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        margin-right: 10px;
        margin-left: 0;
        background: none;
        border: 0;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transform-origin: center;
        transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
        opacity: .75;
        vertical-align: middle;
    }

    /* rotate + brighten on hover */
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu) > .dropdown-item:hover::before {
        opacity: 1;
        transform: rotate(45deg) translateY(-2px) scale(1.12);
    }

    /* rotate to point up when open */
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu.show) > .dropdown-item::before,
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu.show) > .dropdown-item.show::before,
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu.show) > .dropdown-item[aria-expanded="true"]::before {
        transform: rotate(-135deg) translateY(-2px);
        opacity: 1;
    }

    /* remove the diamond bullet on submenu-toggle rows (caret replaces it) */
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu) > .dropdown-item {
        padding-left: 12px;
    }

    /* indent the submenu items to align with the parent's text */
    .navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu) > .dropdown-item {
        padding-left: 12px;
    }

    /* ============================================================
   LEVEL 2 — SUB DROPDOWN (nested)
   ============================================================ */
    .navbar-nav .dropdown-menu .sub-dropdown-menu {
        position: relative !important;
        display: none;
        height: 0;
        overflow: hidden;
        margin: 4px 0 6px 22px;
        padding: 0;
        min-width: 0;
        width: auto;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
        backdrop-filter: none !important;
        float: none;
        transform: none !important;
        inset: auto !important;
        z-index: 200;
    }

        .navbar-nav .dropdown-menu .sub-dropdown-menu.show {
            display: block !important;
            height: auto;
            overflow: visible;
            padding: 4px 0 4px 14px;
            border-left: 1px dotted rgba(5, 93, 83, .4) !important;
        }

.navbar-nav .sub-dropdown-menu .dropdown-item {
    position: relative;
    display: block;
    width: 100%;
    font-family: "Tahoma", sans-serif;
    font-size: .84rem !important;
    font-weight: 400 !important;
    font-style: italic;
    letter-spacing: .02em;
    text-transform: none;
    color: #6b7686 !important;
    padding: 6px 14px 6px 22px !important;
    background: transparent !important;
    border-radius: 0;
    text-align: left;
    opacity: 0;
    transform: translateX(-6px);
    animation: subItemIn .35s cubic-bezier(.2, .8, .2, 1) forwards;
    transition: color .28s ease, padding-left .35s cubic-bezier(.2, .8, .2, 1), letter-spacing .35s ease;
}

    .navbar-nav .sub-dropdown-menu .dropdown-item::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        width: 8px;
        height: 0;
        border-top: 1px dashed rgba(5, 93, 83, .55);
        transform: translateY(-50%);
        transition: width .3s ease, border-color .3s ease;
    }

    .navbar-nav .sub-dropdown-menu .dropdown-item:hover {
        color: #055d53 !important;
        padding-left: 28px !important;
        letter-spacing: .04em;
        background: transparent !important;
    }

        .navbar-nav .sub-dropdown-menu .dropdown-item:hover::before {
            width: 14px;
            border-color: #055d53;
        }

    .navbar-nav .sub-dropdown-menu .dropdown-item:nth-child(1) {
        animation-delay: .04s;
    }

    .navbar-nav .sub-dropdown-menu .dropdown-item:nth-child(2) {
        animation-delay: .09s;
    }

    .navbar-nav .sub-dropdown-menu .dropdown-item:nth-child(3) {
        animation-delay: .14s;
    }

    .navbar-nav .sub-dropdown-menu .dropdown-item:nth-child(4) {
        animation-delay: .19s;
    }

    .navbar-nav .sub-dropdown-menu .dropdown-item:nth-child(5) {
        animation-delay: .24s;
    }

.navbar-nav .dropdown-menu > li:has(.sub-dropdown-menu.show) {
    position: relative;
    z-index: 100;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes navStitchSlide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 12px 0;
    }
}

@keyframes menuDropIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes subItemIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .navbar-nav > .nav-item > .nav-link::after {
        animation: none;
    }

    .navbar-nav > .nav-item,
    .navbar-nav > .nav-item > .nav-link,
    .navbar-nav .dropdown-menu .dropdown-item,
    .navbar-nav .sub-dropdown-menu .dropdown-item {
        transition: none;
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 1200px) {
    .navbar-nav {
        padding: 270px 24px 40px;
        justify-content: flex-start !important;
    }
}

@media (max-width: 991px) {
    body:has(.menu-wrapper.show) .header-content.d-lg-block.d-none {
        display: block !important;
    }

    body:has(.menu-wrapper.show) .header-btns-group.d-none.d-lg-flex {
        display: flex !important;
        width: 100%;
    }

    .header-content-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        display: none !important;
    }

    body:has(.menu-wrapper.show) .header-content-wrapper {
        display: flex !important;
        justify-content: center;
    }

    .navbar-nav {
        padding: 270px 24px 40px;
        justify-content: flex-start !important;
    }

        .navbar-nav > .nav-item > .nav-link {
            font-size: 1.5rem;
        }

        .navbar-nav .dropdown-menu {
            min-width: 260px;
        }
}

@media (max-width: 767px) {
    .navbar-nav {
        padding: 270px 24px 40px;
    }
}

@media (max-width: 571px) {
    .navbar-nav {
        padding: 260px 24px 40px;
    }

    .header-wrapper .btn-group .btn {
        width: fit-content !important;
        max-width: fit-content !important;
        font-size: 12px !important;
    }
}

@media (max-width: 552px) {
    .navbar-nav {
        padding: 270px 24px 40px;
    }
}

@media (max-width: 400px) {

    .navbar-nav {
        padding: 240px 24px 40px;
    }

    body:has(.menu-wrapper.show) .header-btns-group.d-none.d-lg-flex {
        margin: 5px 0;
    }

    .navbar-nav > .nav-item > .nav-link {
        font-size: 1.2rem;
    }
}

/* ============================================================
   HEADER RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .inner-header {
        flex-wrap: wrap;
        align-items: center;
    }

    .menu-btn {
        margin-left: auto;
        order: 2;
    }

    .header-content-wrapper {
        order: 3;
        flex-basis: 100%;
        justify-content: space-between;
        padding-bottom: 10px;
    }

    .header-content {
        width: fit-content;
        max-width: fit-content;
    }

    .header-btns-group {
        order: 4;
        width: 50%;
        justify-content: end;
    }

        .header-btns-group .btn-group .btn {
            white-space: nowrap;
        }
}

@media (max-width: 768px) {
    .header-wrapper {
        padding: 10px;
    }

    .tranparent {
        display: none;
    }

    .header-btns-group {
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .header-logo {
        width: 90px;
        padding-block: 0;
    }

    .header-content {
        max-width: 100%;
        margin-top: 0;
    }

        .header-content p,
        .header-content span p {
            font-size: 15px;
            line-height: 18px;
            padding-inline: 5px;
        }

            .header-content p:last-child {
                font-size: 14px;
            }

    .header-btns-group {
        gap: 5px;
    }
}

@media (max-width: 400px) {
    .header-content-wrapper {
        gap: 0 !important;
    }

    .header-content p,
    .header-content span p {
        font-size: 12px !important;
        padding: 5px !important;
    }

    .header-wrapper .btn-group .btn {
        font-size: 12px !important;
        padding: 5px !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    .header-logo {
        width: 100px;
    }
}

/* ============================================================
   BANNER RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {



    .header-content-wrapper .menu-btn {
        order: 2;
    }

    .header-content-wrapper .header-content {
        order: 3;
    }

    .header-wrapper .btn-group {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 0;
        gap: 5px;
    }

        .header-wrapper .btn-group .btn {
            width: 115px;
            max-width: 150px;
            font-size: 14px;
        }
}

@media (max-width: 767px) {
    .warp-up-wrapper iframe {
        width: 100%;
        height: auto;
    }

    .navbar-brand img {
        max-width: 102px;
    }
}

@media (max-width: 768px) {
    .sub-menu .sub-dropdown-menu {
        position: static;
        box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
        background: #f4f4f4;
        display: none;
        top: 0;
        right: -176px;
        width: 100%;
        padding-left: 15px;
    }
}

/* ============================================================
   HEADER CONTENT WRAPPER
   ============================================================ */
.header-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* ============================================================
   PREMIUM ENHANCEMENT v2.0 — header.css
   Global polish + woven fabric upgrade + nav smoothing
   ============================================================ */


html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(5, 93, 83, .18);
    color: #055d53;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f4f0e6;
    background-image: var(--grain);
    background-blend-mode: multiply;
    border-inline: 1px dashed rgba(0, 0, 0, .12);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b8895c, #8c6238);
    border-radius: 8px;
    border: 2px solid #f4f0e6;
    box-shadow: inset 0 1px 0 rgba(255, 236, 210, .55);
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #c99a6b, #9a6d3f);
    }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px dashed rgba(5, 93, 83, .6);
    outline-offset: 3px;
    border-radius: 6px;
}

img {
    -webkit-backface-visibility: hidden;
}



/* ---------------------------------------------------------
   Sidebar media tag — fuller cloth feel
   --------------------------------------------------------- */
.media-icons-wrapper {
    background: var(--grain), repeating-linear-gradient(90deg, rgba(0, 0, 0, .028) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(120, 95, 60, .022) 0 1px, transparent 1px 3px), linear-gradient(160deg, #fdfcf8 0%, #f5f1e7 60%, #efe9db 100%);
    background-size: 140px 140px, auto, auto, auto;
    background-blend-mode: multiply, normal, normal, normal;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .05), -10px 8px 24px -12px rgba(60, 40, 15, .45), -2px 0 0 rgba(255, 255, 255, .5);
    transition: transform .5s var(--ease-out);
}

    .media-icons-wrapper::before {
        border-color: rgba(120, 80, 35, .4) !important;
    }

    .media-icons-wrapper:hover {
        transform: translateY(-50%) rotate(-2.2deg) translateX(-6px);
    }

/* each dot — pressed washer with real stitch ring */
.media-icon-link {
    background: linear-gradient(160deg, #f6f6f6, #ffffff);
    background-size: 60px 60px, auto;
    background-blend-mode: multiply, normal;
    outline: 1.5px dashed rgba(120, 80, 35, .4) !important;
    outline-offset: -5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(60, 40, 15, .18);
}

    .media-icon-link:hover {
        transform: scale(1.14) rotate(-4deg);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 2px rgba(0, 0, 0, .25), 0 10px 22px -8px rgba(60, 40, 15, .5);
    }

/* ============================================================
   NAV MENU — final smoothing
   ============================================================ */
.menu-wrapper {
    transition: opacity .6s var(--ease-io), visibility 0s linear .6s;
}

    .menu-wrapper.show {
        transition: opacity .6s var(--ease-io), visibility 0s linear 0s;
    }

.navbar-nav > .nav-item {
    transition: opacity .6s var(--ease-out), top .65s var(--ease-out);
}

.navbar-nav .dropdown-menu.show {
    animation: menuDropIn .5s var(--ease-out) both;
}

.navbar-nav > .nav-item > .nav-link::after {
    background-image: linear-gradient(90deg, rgba(5, 93, 83, .85) 0 6px, transparent 6px 12px) !important;
    filter: drop-shadow(0 .5px 0 rgba(255, 255, 255, .55));
}

/* ============================================================
   MOBILE FINESSE + REDUCED MOTION
   ============================================================ */
@media (max-width: 767px) {
    .header-wrapper::after {
        left: 14px;
        right: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ============================================================
   MAIN BANNER
   ============================================================ */
.main-banner-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

    .main-banner-wrapper .container {
        height: 100%;
    }




/* ============================================================
   VIDEO BACKGROUND
   ============================================================ */
.video-background {
    position: absolute;
    background-color: black;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

    .video-background iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        aspect-ratio: 16 / 9;
        width: auto;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        pointer-events: none;
    }

    .video-background video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }

/* ============================================================
   BANNER CONTENT WRAPPER — BOOK A STAND + COUNTDOWN
   Black leather panel, warm cream thread, stitched details.
   ============================================================ */

.banner-content-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    width: 100%;
    margin-inline: auto;
    height: 100%;
    min-height: 90vh;
    z-index: 3;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* ============================================================
   BOOK A STAND BUTTON — warm cream leather pill
   ============================================================ */
.book-btn-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.book-a-stand-btn {
    position: relative;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    z-index: 2;
    font-family: "Barlow", "Roboto", sans-serif;
    font-size: clamp(1.125rem, 0.9659rem + 0.7955vw, 1.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 18px 52px;
    border-radius: 50px;
    /* Warm cream leather body */
    background-color: #e6c988;
    background-image: var(--grain), radial-gradient(circle at 18% 24%, rgba(120, 80, 35, .15) 0 1px, transparent 1.6px), radial-gradient(circle at 72% 58%, rgba(120, 80, 35, .12) 0 1px, transparent 1.6px), radial-gradient(circle at 38% 82%, rgba(120, 80, 35, .1) 0 1px, transparent 1.6px), radial-gradient(circle at 88% 30%, rgba(120, 80, 35, .08) 0 1px, transparent 1.6px), radial-gradient(circle at 55% 12%, rgba(120, 80, 35, .06) 0 1px, transparent 1.6px);
    background-size: 140px 140px, 5px 5px, 7px 7px, 6px 6px, 8px 8px, 5px 5px;
    background-blend-mode: multiply, normal, normal, normal, normal, normal;
    color: #2e1c0a;
    border: 2px solid #e6c988;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(120, 80, 35, .2), 0 8px 22px -12px rgba(0, 0, 0, .7), 0 0 0 0 rgba(230, 201, 136, .4);
    animation: bookBtnPulse 3.2s ease-in-out infinite;
    transition: color .35s ease, background-color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

    /* Inner stitched ring — warm brown thread */
    .book-a-stand-btn::before {
        content: "";
        position: absolute;
        inset: 6px;
        border: 1.5px dashed rgba(120, 80, 35, .55);
        border-radius: 45px;
        pointer-events: none;
        filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5));
        transition: border-color .35s ease;
    }

    /* Sheen sweep */
    .book-a-stand-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -80%;
        width: 50%;
        height: 100%;
        background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .6), transparent);
        transform: skewX(-20deg);
        transition: left .7s cubic-bezier(.16, 1, .3, 1);
        pointer-events: none;
    }

/* Gentle pulse so the primary CTA feels alive */
@keyframes bookBtnPulse {

    0%, 100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(120, 80, 35, .2), 0 8px 22px -12px rgba(0, 0, 0, .7), 0 0 0 0 rgba(230, 201, 136, .5);
    }

    50% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 8px rgba(120, 80, 35, .25), 0 14px 32px -14px rgba(0, 0, 0, .75), 0 0 0 12px rgba(230, 201, 136, 0);
    }
}

/* Hover — inverts to deep teal leather */
.book-a-stand-btn:hover {
    background-color: #055d53;
    background-image: var(--grain), radial-gradient(circle at 18% 24%, rgba(0, 0, 0, .2) 0 1px, transparent 1.6px), radial-gradient(circle at 72% 58%, rgba(0, 0, 0, .17) 0 1px, transparent 1.6px), radial-gradient(circle at 38% 82%, rgba(0, 0, 0, .15) 0 1px, transparent 1.6px), radial-gradient(circle at 88% 30%, rgba(0, 0, 0, .12) 0 1px, transparent 1.6px);
    background-size: 140px 140px, 5px 5px, 7px 7px, 6px 6px, 8px 8px;
    background-blend-mode: multiply, normal, normal, normal, normal;
    color: #fdf6ec;
    border-color: #055d53;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    animation: none;
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 6px rgba(0, 0, 0, .4), 0 14px 32px -12px rgba(5, 93, 83, .75);
}

    .book-a-stand-btn:hover::before {
        border-color: rgba(255, 235, 200, .85);
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
    }

    .book-a-stand-btn:hover::after {
        left: 130%;
    }

/* ============================================================
   COUNTDOWN — leather plate with 4 stitched tiles
   ============================================================ */
.countdown-box {
    position: relative;
    width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 20px;
    /* Dark leather plate */
    background-color: #0f0f0f;
    background-image: var(--grain), radial-gradient(circle at 18% 24%, rgba(0, 0, 0, .55) 0 1px, transparent 1.6px), radial-gradient(circle at 72% 58%, rgba(0, 0, 0, .5) 0 1px, transparent 1.6px), radial-gradient(circle at 38% 82%, rgba(0, 0, 0, .45) 0 1px, transparent 1.6px), radial-gradient(130% 90% at 50% 0%, rgba(120, 120, 120, .12), transparent 60%), radial-gradient(130% 100% at 50% 100%, rgba(0, 0, 0, .8), transparent 60%);
    background-size: 140px 140px, 5px 5px, 7px 7px, 6px 6px, auto, auto;
    background-blend-mode: multiply, normal, normal, normal, normal, normal;
    border: 1px solid rgba(255, 235, 200, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 10px rgba(0, 0, 0, .7), 0 14px 30px -18px rgba(0, 0, 0, .9);
}

    /* Stitched seam around the plate */
    .countdown-box::before {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1.5px dashed rgba(255, 235, 200, .3);
        border-radius: 14px;
        pointer-events: none;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
    }

/* "Opens in" label */
.countdown-label {
    position: relative;
    z-index: 2;
    font-family: "Tahoma", sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: rgba(255, 235, 200, .65);
    padding-left: .35em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* The countdown row */
.countdown {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(8px, 1.5vw, 14px);
    margin: 0;
    flex-wrap: wrap;
}

/* ---------- each unit = stitched tile ---------- */
.countdown-unit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 18px 10px;
    min-width: 82px;
    border-radius: 12px;
    background-color: #1a1a1a;
    background-image: var(--grain), radial-gradient(circle at 30% 25%, rgba(255, 240, 215, .1), transparent 55%), radial-gradient(circle at 75% 80%, rgba(0, 0, 0, .6), transparent 60%);
    background-size: 100px 100px, auto, auto;
    background-blend-mode: multiply, normal, normal;
    border: 1px solid rgba(255, 235, 200, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 6px rgba(0, 0, 0, .6);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

    .countdown-unit:hover {
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 6px rgba(0, 0, 0, .6), 0 8px 18px -10px rgba(230, 201, 136, .4);
    }

    /* Stitched inner ring on each tile */
    .countdown-unit::before {
        content: "";
        position: absolute;
        inset: 4px;
        border: 1px dashed rgba(255, 235, 200, .3);
        border-radius: 9px;
        pointer-events: none;
        filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
    }

    /* The number */
    .countdown-unit .countdown-num,
    .countdown-unit span {
        position: relative;
        z-index: 2;
        font-family: "Barlow", "Tahoma", sans-serif;
        font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.4rem);
        font-weight: 700;
        line-height: 1;
        color: #fdf6ec;
        display: block;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 -1px 0 rgba(255, 240, 215, .12), 0 2px 10px rgba(0, 0, 0, .6);
    }

    /* The unit label */
    .countdown-unit small {
        position: relative;
        z-index: 2;
        display: block;
        margin-top: 6px;
        font-family: "Tahoma", sans-serif;
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: rgba(255, 235, 200, .6);
        padding-left: .28em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    }

    /* Small gold stud in each tile corner */
    .countdown-unit::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 6px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #fff2d4 0%, #e6c988 40%, #b8894a 80%, #7a5228 100%);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .8), inset 0 1px 1px rgba(255, 255, 255, .9);
        opacity: .7;
        pointer-events: none;
    }

/* ---------- market valued ---------- */
.bordered-heading {
    position: relative;
    font-family: "Barlow", "Tahoma", sans-serif;
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: center;
    margin: 0 auto 44px;
    padding-bottom: 0;
    border-bottom: none;
    width: 100%;
    text-wrap: balance;
}

h3.bordered-heading {
    font-size: clamp(1.125rem, 0.3142rem + 1.6913vw, 1.625rem);
}

/* stitched underline — teal dashes sliding gently */
.bordered-heading::after {
    content: "";
    display: block;
    width: 88px;
    height: 3px;
    margin: 18px auto 0;
    background-image: linear-gradient(90deg, var(--primary) 0 8px, transparent 8px 14px);
    background-size: 14px 3px;
    background-repeat: repeat-x;
    border-radius: 3px;
    animation: headingStitch 3s linear infinite;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
}

/* keyframe for the stitch slide */
@keyframes headingStitch {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 14px 0;
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bordered-heading::after {
        animation: none;
        background-position: 0 0;
    }
}

/* left aligned variant */
.bordered-heading.left {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    border-left: none;
    border-bottom: none;
}

    .bordered-heading.left::after {
        margin-left: 0;
        margin-right: auto;
    }

/* responsive */
@media (max-width: 767px) {
    .bordered-heading {
        font-size: 1.75rem;
        margin-bottom: 32px;
    }

        .bordered-heading::after {
            width: 72px;
            margin-top: 14px;
        }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .banner-content-wrapper {
        min-height: 390px;
        gap: 1.25rem;
    }

    /* Hide countdown on tablet as in your original */
    .countdown-box {
        display: none;
    }
}

@media (max-width: 767px) {
    .banner-content-wrapper {
        min-height: 35vh;
        padding-bottom: 1.25rem;
        gap: 1rem;
    }

    .book-a-stand-btn {
        padding: 12px 32px;
        font-size: 1rem;
        letter-spacing: .1em;
    }

    /* keep the original mobile rule — button stays compact */
    .book-a-stand-btn {
        margin-bottom: 6px;
    }

    .countdown-unit {
        min-width: 68px;
        padding: 10px 12px 8px;
    }

        .countdown-unit .countdown-num,
        .countdown-unit span {
            font-size: 1.5rem;
        }

        .countdown-unit small {
            font-size: .55rem;
            letter-spacing: .22em;
        }
}

/* ============================================================
   PAGE BANNER — AFLEX (BLACK LEATHER)
   ============================================================ */
.page-banner-wrapper {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    padding-inline: clamp(1rem, 3vw, 2rem);
    /* Black leather base — deep charcoal with subtle warm undertone */
    background: var(--grain),
    /* leather pores — tiny dark spots */
    radial-gradient(circle at 22% 28%, rgba(0, 0, 0, .6) 0 1px, transparent 1.5px), radial-gradient(circle at 68% 62%, rgba(0, 0, 0, .55) 0 1px, transparent 1.5px), radial-gradient(circle at 42% 82%, rgba(0, 0, 0, .5) 0 1px, transparent 1.5px),
    /* cool grey sheen — top-left */
    radial-gradient(130% 90% at 18% 8%, rgba(120, 120, 120, .18), transparent 55%),
    /* deep black burnish — bottom-right */
    radial-gradient(130% 100% at 85% 100%, rgba(0, 0, 0, .85), transparent 58%),
    /* mid-tone black gradient */
    linear-gradient(155deg, #2a2a2a 0%, #1e1e1e 35%, #141414 65%, #0a0a0a 100%);
    background-size: 140px 140px, 5px 5px, 7px 7px, 6px 6px, auto, auto, auto;
    background-blend-mode: multiply, normal, normal, normal, normal, normal, normal;
    /* black leather edge */
    border: 1px solid rgba(0, 0, 0, .85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .03), inset 0 -3px 8px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .4), 0 16px 34px -20px rgba(0, 0, 0, .9);
    corner-shape: scoop;
    border-radius: 15px;
}

    /* stitched inner seam — warm off-white thread on black */
    .page-banner-wrapper::before {
        content: "";
        position: absolute;
        inset: 14px;
        border: 2px dashed rgba(255, 235, 200, .35);
        border-radius: calc(var(--radius) - 6px);
        pointer-events: none;
        z-index: 1;
        corner-shape: scoop;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
    }

.page-banner-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* eyebrow — warm cream on black */
.page-banner-eyebrow {
    font-family: "Tahoma", sans-serif;
    font-size: clamp(.66rem, .58rem + .25vw, .78rem);
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 235, 200, .62);
    padding-left: .3em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* title — bright cream, high contrast on black */
.page-banner-title {
    font-family: "Barlow", "Tahoma", sans-serif;
    font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.015em;
    color: #fdf6ec;
    margin: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .9), 0 -1px 0 rgba(255, 240, 215, .12), 0 2px 12px rgba(0, 0, 0, .6);
}

    /* accent word — warm gold, still readable on black */
    .page-banner-title span {
        color: #e6c988;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .9), 0 -1px 0 rgba(255, 240, 215, .2), 0 0 20px rgba(230, 201, 136, .2);
    }

/* lede — soft cream on black */
.page-banner-lede {
    font-family: "Barlow", "Tahoma", sans-serif;
    font-size: clamp(.95rem, .88rem + .35vw, 1.05rem);
    line-height: 1.7;
    color: rgba(255, 235, 200, .75);
    margin: 0;
    max-width: 640px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}

@media (max-width: 767px) {
    .page-banner-wrapper {
        padding-block: 3rem;
    }

        .page-banner-wrapper::before {
            inset: 10px;
        }

    .page-banner-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 1500px) {
    .container:not(.header-wrapper .container) {
        max-width: 90%;
    }
}

.uk-lightbox {
    z-index: 99999 !important;
}