@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Montserrat:wght@300;400;500;600&display=swap');


/* =========================================================
   HOUR SCOUT
   HOME PAGE V1
========================================================= */

:root {
    --black: #050505;
    --black-soft: #0b0b0b;

    --ivory: #f3efe7;
    --white: #ffffff;

    --bronze-light: #bc9b6f;
    --bronze: #a9875e;
    --bronze-dark: #745331;

    --border: rgba(188, 155, 111, 0.28);

    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Montserrat", Arial, sans-serif;
}


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


html {
    scroll-behavior: smooth;
}


body {
    background: var(--black);
    color: var(--white);
    font-family: var(--sans);
    overflow-x: hidden;
}


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


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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    border-bottom: 1px solid transparent;

    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        backdrop-filter 0.4s ease;
}


.site-header.scrolled {
    background: rgba(5, 5, 5, 0.88);
    border-color: rgba(188, 155, 111, 0.18);
    backdrop-filter: blur(16px);
}


.header-inner {
    width: min(92%, 1500px);
    height: 105px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}




/* =========================================================
   NAVIGATION
========================================================= */

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 42px;
}


.desktop-nav a {
    position: relative;

    padding: 12px 0;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    color: rgba(255,255,255,0.78);

    transition: color 0.3s ease;
}


.desktop-nav a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 3px;

    width: 0;
    height: 1px;

    background: var(--bronze-light);

    transition: width 0.3s ease;
}


.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--white);
}


.desktop-nav a:hover::after,
.desktop-nav a.active::after {
    width: 100%;
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.menu-button {
    display: none;

    width: 44px;
    height: 44px;

    border: 0;
    background: transparent;

    cursor: pointer;
}


.menu-button span {
    display: block;

    width: 26px;
    height: 1px;

    margin: 7px auto;

    background: var(--bronze-light);

    transition: 0.3s ease;
}


.mobile-menu {
    display: none;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 72% 48%,
            rgba(116,83,49,0.15),
            transparent 36%
        ),
        linear-gradient(
            90deg,
            #030303 0%,
            #060606 42%,
            #090704 100%
        );
}


/* subtle luxury texture */

.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.012) 1px,
            transparent 1px
        );

    background-size: 100% 5px;

    opacity: 0.35;
}


/* =========================================================
   LIGHT
========================================================= */

.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}


.hero-glow-one {
    width: 440px;
    height: 440px;

    right: 17%;
    top: 20%;

    background: rgba(188,155,111,0.11);

    animation: glowMove 8s ease-in-out infinite alternate;
}


.hero-glow-two {
    width: 220px;
    height: 220px;

    right: 43%;
    bottom: 8%;

    background: rgba(116,83,49,0.08);
}


@keyframes glowMove {

    from {
        transform: translate3d(-20px,-10px,0);
        opacity: 0.55;
    }

    to {
        transform: translate3d(30px,20px,0);
        opacity: 1;
    }

}


/* =========================================================
   WATCH MOVEMENT
========================================================= */

.movement-wrap {
    position: absolute;

    width: min(67vw, 1040px);
    aspect-ratio: 1;

    right: -7vw;
    top: 50%;

    transform: translateY(-50%);

    opacity: 0;

    animation: movementReveal 1.8s ease 0.35s forwards;
}


@keyframes movementReveal {

    from {
        opacity: 0;
        transform: translateY(-50%) scale(1.08);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        filter: blur(0);
    }

}


.movement {
    position: absolute;
    inset: 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 48% 46%,
            #30281e 0%,
            #16130f 31%,
            #080706 62%,
            #020202 74%
        );

    border: 1px solid rgba(188,155,111,0.25);

    box-shadow:
        inset 0 0 80px rgba(188,155,111,0.13),
        0 0 120px rgba(0,0,0,0.9);
}


.outer-ring {
    position: absolute;
    inset: 3%;

    border-radius: 50%;

    border:
        2px solid rgba(188,155,111,0.25);

    box-shadow:
        inset 0 0 30px rgba(188,155,111,0.09);
}


.inner-ring {
    position: absolute;
    inset: 14%;

    border-radius: 50%;

    border:
        1px solid rgba(188,155,111,0.22);
}


/* =========================================================
   GEARS
========================================================= */

.gear {
    position: absolute;

    border-radius: 50%;

    border: 8px dashed rgba(188,155,111,0.63);

    box-shadow:
        0 0 25px rgba(188,155,111,0.08),
        inset 0 0 18px rgba(188,155,111,0.12);
}


.gear::before,
.gear::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 72%;
    height: 7px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(188,155,111,0.7),
            transparent
        );

    transform: translate(-50%,-50%);
}


.gear::after {
    transform:
        translate(-50%,-50%)
        rotate(90deg);
}


.gear-inner {
    position: absolute;
    inset: 31%;

    border-radius: 50%;

    border: 4px solid rgba(188,155,111,0.55);

    background: #090806;
}


.gear-large {
    width: 31%;
    height: 31%;

    top: 16%;
    right: 18%;

    animation:
        gearForwardReverse 13s ease-in-out infinite alternate;
}


.gear-medium {
    width: 22%;
    height: 22%;

    top: 39%;
    left: 19%;

    animation:
        gearReverseForward 9s ease-in-out infinite alternate;
}


.gear-small {
    width: 15%;
    height: 15%;

    top: 27%;
    left: 37%;

    animation:
        gearForwardReverse 6s ease-in-out infinite alternate;
}


@keyframes gearForwardReverse {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(220deg);
    }

}


@keyframes gearReverseForward {

    from {
        transform: rotate(160deg);
    }

    to {
        transform: rotate(-80deg);
    }

}


/* =========================================================
   BALANCE WHEEL
========================================================= */

.balance-wheel {
    position: absolute;

    width: 24%;
    height: 24%;

    right: 14%;
    bottom: 19%;

    border-radius: 50%;

    border:
        3px solid rgba(188,155,111,0.55);

    box-shadow:
        inset 0 0 0 12px rgba(188,155,111,0.05);

    animation:
        balanceMotion 2.2s ease-in-out infinite alternate;
}


.balance-wheel::before,
.balance-wheel::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 10%;

    width: 80%;
    height: 2px;

    background: rgba(188,155,111,0.5);
}


.balance-wheel::after {
    transform: rotate(90deg);
}


.balance-center {
    position: absolute;

    width: 17%;
    height: 17%;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background: var(--bronze-light);

    box-shadow: 0 0 20px rgba(188,155,111,0.4);
}


@keyframes balanceMotion {

    from {
        transform: rotate(-32deg);
    }

    to {
        transform: rotate(32deg);
    }

}


/* =========================================================
   ROTOR
========================================================= */

.rotor {
    position: absolute;

    width: 72%;
    height: 36%;

    left: 14%;
    bottom: 9%;

    border-radius: 0 0 400px 400px;

    border:
        1px solid rgba(188,155,111,0.45);

    background:
        linear-gradient(
            160deg,
            rgba(188,155,111,0.12),
            rgba(116,83,49,0.72)
        );

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.14),
        0 20px 40px rgba(0,0,0,0.4);

    transform-origin: 50% 0%;

    animation:
        rotorSwing 8s ease-in-out infinite alternate;
}


@keyframes rotorSwing {

    from {
        transform: rotate(-8deg);
    }

    to {
        transform: rotate(12deg);
    }

}


.rotor-logo {
    position: absolute;

    top: 32%;
    left: 50%;

    transform: translateX(-50%);

    font-family: var(--serif);
    font-size: clamp(30px,4vw,62px);

    color: rgba(240,218,186,0.88);
}


.rotor-copy {
    position: absolute;

    bottom: 18%;

    font-size: 7px;
    letter-spacing: 3px;

    color: rgba(255,255,255,0.46);
}


.rotor-copy-left {
    left: 11%;
}


.rotor-copy-right {
    right: 11%;
}


.movement-center {
    position: absolute;

    width: 7%;
    height: 7%;

    top: 47%;
    left: 49%;

    transform: translate(-50%,-50%);

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #d6b486,
            #745331 55%,
            #21170e 58%
        );

    box-shadow:
        0 0 28px rgba(188,155,111,0.25);
}


.movement-center span {
    width: 32%;
    height: 32%;

    border-radius: 50%;

    background: #070605;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 10;

    width: min(88%, 1420px);

    margin: 50px auto 0;

    pointer-events: none;
}


.hero-content > * {
    pointer-events: auto;
}


.hero-number {
    margin-bottom: 38px;

    font-size: 9px;
    letter-spacing: 4px;

    color: rgba(255,255,255,0.42);
}


.eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 24px;

    font-size: 9px;
    letter-spacing: 4.5px;
    text-transform: uppercase;

    color: var(--bronze-light);
}


.eyebrow span {
    width: 32px;
    height: 1px;

    background: var(--bronze-light);
}


.hero h1 {
    max-width: 680px;

    font-family: var(--serif);

    font-size: clamp(70px,8.2vw,135px);
    font-weight: 400;

    line-height: 0.73;
    letter-spacing: 2px;

    color: var(--ivory);

    opacity: 0;

    animation:
        titleReveal 1.2s ease 0.25s forwards;
}


.hero h1 span {
    display: block;

    margin-left: 1.05em;

    color: var(--bronze-light);
}


@keyframes titleReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

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

}


.hero-tagline {
    margin-top: 38px;

    font-family: var(--serif);
    font-size: clamp(25px,2.3vw,38px);
    font-weight: 400;

    color: var(--ivory);
}


.hero-description {
    max-width: 500px;

    margin-top: 18px;

    font-size: 11px;
    line-height: 2;
    letter-spacing: 1.2px;

    color: rgba(255,255,255,0.55);
}


.primary-button {
    width: fit-content;

    margin-top: 38px;

    display: flex;
    align-items: center;
    gap: 45px;

    padding: 17px 22px;

    border: 1px solid var(--bronze);

    font-size: 9px;
    letter-spacing: 2.3px;
    text-transform: uppercase;

    color: var(--ivory);

    background: rgba(0,0,0,0.25);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.primary-button:hover {
    background: var(--bronze);
    color: #080604;

    transform: translateY(-2px);
}


.button-arrow {
    font-size: 17px;
}


/* =========================================================
   SCROLL
========================================================= */

.scroll-indicator {
    position: absolute;

    z-index: 20;

    left: 6%;
    bottom: 38px;

    display: flex;
    align-items: center;
    gap: 14px;

    color: rgba(255,255,255,0.4);
}


.scroll-indicator > span {
    font-size: 7px;
    letter-spacing: 3px;
}


.mouse {
    position: relative;

    width: 16px;
    height: 27px;

    border: 1px solid rgba(188,155,111,0.65);
    border-radius: 10px;
}


.mouse-wheel {
    position: absolute;

    width: 2px;
    height: 5px;

    top: 5px;
    left: 6px;

    border-radius: 4px;

    background: var(--bronze-light);

    animation:
        mouseScroll 1.5s ease infinite;
}


@keyframes mouseScroll {

    0% {
        opacity: 0;
        transform: translateY(0);
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(9px);
    }

}


/* =========================================================
   RIGHT SIDE COPY
========================================================= */

.hero-side-copy {
    position: absolute;

    z-index: 15;

    right: 30px;
    top: 50%;

    display: flex;
    align-items: center;
    gap: 13px;

    transform: rotate(90deg) translateX(50%);
    transform-origin: right center;

    font-size: 6px;
    letter-spacing: 4px;

    color: rgba(255,255,255,0.3);
}


.side-line {
    display: block;

    width: 45px;
    height: 1px;

    background: rgba(188,155,111,0.45);
}


/* =========================================================
   INTRODUCTION
========================================================= */

.introduction {
    min-height: 70vh;

    display: flex;
    align-items: center;

    background: var(--ivory);
    color: #20170f;
}


.introduction-inner {
    width: min(88%, 1300px);
    margin: auto;
}


.section-kicker {
    font-size: 9px;
    letter-spacing: 5px;

    color: var(--bronze-dark);
}


.introduction h2 {
    max-width: 700px;

    margin-top: 20px;

    font-family: var(--serif);
    font-size: clamp(50px,6vw,90px);
    font-weight: 400;

    line-height: 0.95;
}


.introduction h2 em {
    color: var(--bronze);
    font-weight: 400;
}


.introduction p {
    max-width: 550px;

    margin-top: 28px;

    font-size: 13px;
    line-height: 2;

    color: #655a50;
}


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

@media (max-width: 1050px) {

    .desktop-nav {
        display: none;
    }

    .menu-button {
        display: block;
    }

    .mobile-menu {
        position: absolute;

        top: 105px;
        left: 0;

        width: 100%;

        padding: 25px 6% 35px;

        background: rgba(5,5,5,0.98);
        border-top: 1px solid var(--border);
    }

    .mobile-menu.open {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .mobile-menu a {
        font-family: var(--serif);
        font-size: 25px;

        color: var(--ivory);
    }


    .movement-wrap {
        width: 95vw;

        right: -43vw;

        opacity: 0.62;
    }


    .hero-content {
        margin-top: 70px;
    }


    .hero h1 {
        font-size: clamp(65px,13vw,105px);
    }

}


@media (max-width: 650px) {

    .header-inner {
        height: 84px;
    }

    .brand-name {
        font-size: 20px;
    }

    .brand-tag {
        display: none;
    }

    .brand-mark {
        width: 38px;
        height: 50px;
    }


    .mobile-menu {
        top: 84px;
    }


    .hero {
        min-height: 100svh;
    }


    .movement-wrap {
        width: 120vw;

        right: -68vw;
        top: 39%;

        opacity: 0.47;
    }


    .hero-content {
        width: 88%;

        margin-top: 80px;
    }


    .hero-number {
        margin-bottom: 25px;
    }


    .eyebrow {
        font-size: 7px;
        letter-spacing: 3px;
    }


    .hero h1 {
        font-size: clamp(58px,20vw,90px);
    }


    .hero h1 span {
        margin-left: 0.45em;
    }


    .hero-tagline {
        max-width: 310px;

        margin-top: 28px;

        font-size: 25px;
    }


    .hero-description {
        max-width: 290px;

        font-size: 9px;
        line-height: 1.8;
    }


    .primary-button {
        gap: 25px;

        margin-top: 28px;
    }


    .hero-side-copy {
        display: none;
    }


    .scroll-indicator {
        left: auto;
        right: 6%;
        bottom: 25px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }


}



/* =========================================================
   OFFICIAL HOUR SCOUT LOGO
========================================================= */

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

.brand-logo {
    display: block;

    width: 275px;
    max-width: 100%;
    height: 78px;

    object-fit: contain;
    object-position: left center;
}


/* TABLET */

@media (max-width: 1050px) {

    .brand-logo {
        width: 245px;
        height: 70px;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .brand-logo {
        width: 205px;
        height: 58px;
    }

}

/* =========================================================
   ROTATING WATCH SHOWCASE
========================================================= */

.watch-showcase {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 72% 48%,
            rgba(188,155,111,0.13),
            transparent 30%
        ),
        linear-gradient(
            115deg,
            #050505 0%,
            #090806 48%,
            #110d08 100%
        );

    border-top: 1px solid rgba(188,155,111,0.12);
}

.showcase-inner {
    position: relative;
    z-index: 5;

    width: min(88%, 1420px);
    min-height: 760px;
    margin: auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
}


/* LARGE BACKGROUND WORD */

.showcase-background-text {
    position: absolute;
    z-index: 0;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    font-family: var(--serif);
    font-size: clamp(130px, 18vw, 320px);
    font-weight: 400;
    letter-spacing: 0.03em;

    color: rgba(188,155,111,0.025);

    white-space: nowrap;
    pointer-events: none;
}


/* DECORATIVE RINGS */

.showcase-ring {
    position: absolute;

    border-radius: 50%;
    border: 1px solid rgba(188,155,111,0.12);

    pointer-events: none;
}

.showcase-ring-one {
    width: 650px;
    height: 650px;

    right: -180px;
    top: -200px;
}

.showcase-ring-two {
    width: 420px;
    height: 420px;

    left: -170px;
    bottom: -170px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.showcase-content {
    position: relative;
    z-index: 10;
}

.showcase-kicker {
    display: block;

    margin-bottom: 28px;

    font-size: 8px;
    font-weight: 500;
    letter-spacing: 5px;

    color: var(--bronze-light);
}

.showcase-counter {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 42px;

    font-size: 9px;
    letter-spacing: 3px;

    color: rgba(255,255,255,0.42);
}

.showcase-counter #showcaseCurrent {
    color: var(--bronze-light);
}

.counter-line {
    width: 42px;
    height: 1px;

    background: rgba(188,155,111,0.45);
}


/* TEXT SLIDES */

.showcase-copy {
    display: none;
}

.showcase-copy.active {
    display: block;
    animation: showcaseTextReveal 0.7s ease both;
}

@keyframes showcaseTextReveal {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

.showcase-category {
    display: block;

    margin-bottom: 16px;

    font-size: 8px;
    letter-spacing: 3.5px;

    color: rgba(255,255,255,0.42);
}

.showcase-copy h2 {
    max-width: 520px;

    font-family: var(--serif);
    font-size: clamp(58px, 6vw, 96px);
    font-weight: 400;

    line-height: 0.88;

    color: var(--ivory);
}

.showcase-copy h2 em {
    display: block;

    font-weight: 400;
    color: var(--bronze-light);
}

.showcase-copy p {
    max-width: 480px;

    margin-top: 28px;

    font-size: 11px;
    line-height: 2;
    letter-spacing: 1px;

    color: rgba(255,255,255,0.5);
}


/* COLLECTION LINK */

.showcase-link {
    width: fit-content;

    margin-top: 38px;

    display: flex;
    align-items: center;
    gap: 42px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(188,155,111,0.65);

    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: var(--ivory);

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

.showcase-link:hover {
    color: var(--bronze-light);
    gap: 52px;
}


/* CONTROLS */

.showcase-controls {
    margin-top: 45px;

    display: flex;
    align-items: center;
    gap: 20px;
}

.showcase-arrow {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(188,155,111,0.35);
    border-radius: 50%;

    background: transparent;
    color: var(--ivory);

    font-size: 17px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.showcase-arrow:hover {
    background: var(--bronze);
    border-color: var(--bronze);

    color: #050505;
}

.showcase-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.showcase-dot {
    width: 6px;
    height: 6px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,0.22);

    cursor: pointer;

    transition:
        width 0.3s ease,
        border-radius 0.3s ease,
        background 0.3s ease;
}

.showcase-dot.active {
    width: 25px;

    border-radius: 10px;

    background: var(--bronze-light);
}


/* =========================================================
   WATCH VISUAL
========================================================= */

.showcase-visual {
    position: relative;

    min-height: 680px;

    display: grid;
    place-items: center;
}

.watch-stage {
    position: relative;
    z-index: 5;

    width: min(100%, 620px);
    height: 680px;

    display: grid;
    place-items: center;
}


/* WATCH SLIDES */

.watch-slide {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    opacity: 0;
    visibility: hidden;

    transform: scale(0.84) rotate(-8deg);

    transition:
        opacity 0.8s ease,
        transform 1.1s cubic-bezier(.2,.8,.2,1),
        visibility 0.8s;
}

.watch-slide.active {
    opacity: 1;
    visibility: visible;

    transform: scale(1) rotate(0deg);
}

.watch-slide img {
    position: relative;
    z-index: 3;

    display: block;

    width: auto;
    max-width: 88%;
    max-height: 650px;

    object-fit: contain;

    filter:
        drop-shadow(0 45px 45px rgba(0,0,0,0.7))
        drop-shadow(0 0 28px rgba(188,155,111,0.08));

    animation: watchFloat 5s ease-in-out infinite;
}

@keyframes watchFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}


/* WATCH GOLDEN HALO */

.watch-halo {
    position: absolute;
    z-index: 1;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(188,155,111,0.16) 0%,
            rgba(188,155,111,0.07) 36%,
            transparent 70%
        );

    filter: blur(8px);

    animation: haloPulse 4s ease-in-out infinite alternate;
}

@keyframes haloPulse {

    from {
        transform: scale(0.92);
        opacity: 0.6;
    }

    to {
        transform: scale(1.08);
        opacity: 1;
    }
}


/* ORBITS */

.showcase-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.orbit-one {
    width: 570px;
    height: 570px;

    border: 1px solid rgba(188,155,111,0.22);

    animation: showcaseOrbit 24s linear infinite;
}

.orbit-one::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 11%;
    left: 18%;

    border-radius: 50%;

    background: var(--bronze-light);

    box-shadow: 0 0 18px rgba(188,155,111,0.7);
}

.orbit-two {
    width: 455px;
    height: 455px;

    border: 1px dashed rgba(188,155,111,0.12);

    animation: showcaseOrbitReverse 30s linear infinite;
}

@keyframes showcaseOrbit {

    to {
        transform: rotate(360deg);
    }
}

@keyframes showcaseOrbitReverse {

    to {
        transform: rotate(-360deg);
    }
}


/* PRECISION TEXT */

.showcase-precision {
    position: absolute;

    right: 3%;
    top: 50%;

    transform: rotate(90deg) translateX(50%);
    transform-origin: right center;

    font-size: 6px;
    letter-spacing: 4px;

    color: rgba(255,255,255,0.26);
}


/* VERTICAL COPY */

.showcase-vertical-copy {
    position: absolute;

    left: 1%;
    bottom: 7%;

    display: flex;
    align-items: center;
    gap: 12px;

    transform: rotate(-90deg);
    transform-origin: left center;

    font-size: 6px;
    letter-spacing: 3px;

    color: rgba(255,255,255,0.26);
}

.vertical-line {
    width: 40px;
    height: 1px;

    background: rgba(188,155,111,0.35);
}


/* =========================================================
   AUTO ROTATION PROGRESS
========================================================= */

.showcase-progress {
    position: absolute;

    z-index: 20;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: rgba(255,255,255,0.05);
}

.showcase-progress span {
    display: block;

    width: 0;
    height: 100%;

    background: var(--bronze-light);
}


/* =========================================================
   SHOWCASE RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .showcase-inner {
        min-height: auto;

        grid-template-columns: 1fr 1fr;

        gap: 20px;

        padding: 120px 0 80px;
    }

    .showcase-visual {
        min-height: 570px;
    }

    .watch-stage {
        height: 570px;
    }

    .watch-slide img {
        max-width: 100%;
        max-height: 530px;
    }

    .orbit-one {
        width: 470px;
        height: 470px;
    }

    .orbit-two {
        width: 380px;
        height: 380px;
    }

}


@media (max-width: 750px) {

    .watch-showcase {
        min-height: auto;
    }

    .showcase-inner {
        width: 88%;

        grid-template-columns: 1fr;

        padding: 100px 0 85px;
    }

    .showcase-content {
        order: 2;
    }

    .showcase-visual {
        order: 1;

        min-height: 470px;
    }

    .watch-stage {
        width: 100%;
        height: 470px;
    }

    .watch-slide img {
        max-width: 82%;
        max-height: 440px;
    }

    .watch-halo {
        width: 330px;
        height: 330px;
    }

    .orbit-one {
        width: 390px;
        height: 390px;
    }

    .orbit-two {
        width: 310px;
        height: 310px;
    }

    .showcase-copy h2 {
        font-size: clamp(52px, 15vw, 78px);
    }

    .showcase-precision,
    .showcase-vertical-copy {
        display: none;
    }

}


@media (max-width: 480px) {

    .showcase-visual {
        min-height: 400px;
    }

    .watch-stage {
        height: 400px;
    }

    .watch-slide img {
        max-width: 88%;
        max-height: 370px;
    }

    .watch-halo {
        width: 270px;
        height: 270px;
    }

    .orbit-one {
        width: 330px;
        height: 330px;
    }

    .orbit-two {
        width: 260px;
        height: 260px;
    }

}

/* =========================================================
   PREMIUM REALISTIC HERO
   FINAL VERSION
========================================================= */

.hero-premium {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 73% 48%,
            rgba(188,155,111,0.13),
            transparent 35%
        ),
        linear-gradient(
            90deg,
            #030303 0%,
            #050505 42%,
            #090704 100%
        );
}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.hero-premium-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(
            circle at 74% 45%,
            rgba(188,155,111,0.08),
            transparent 34%
        );

    pointer-events: none;
}


.hero-premium-shade {
    position: absolute;
    inset: 0;
    z-index: 4;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,1) 0%,
            rgba(5,5,5,0.98) 31%,
            rgba(5,5,5,0.72) 43%,
            rgba(5,5,5,0.16) 62%,
            rgba(5,5,5,0) 82%
        );
}


/* =========================================================
   HERO LEFT CONTENT
========================================================= */

.hero-content.hero-premium-content {
    position: absolute;
    z-index: 10;

    left: 6%;
    top: 50%;

    width: 40%;
    max-width: 620px;

    margin: 0;

    transform: translateY(-45%);

    text-align: left;

    pointer-events: none;
}


.hero-content.hero-premium-content > * {
    pointer-events: auto;
}


.hero-number {
    margin-bottom: 38px;

    font-size: 9px;
    letter-spacing: 4px;

    color: rgba(255,255,255,0.42);
}


.hero-premium-content .eyebrow {
    justify-content: flex-start;

    margin-bottom: 28px;
}


.premium-title {
    max-width: 520px;

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(76px, 7vw, 126px);
    font-weight: 400;

    line-height: 0.76;
    letter-spacing: 1px;

    color: var(--ivory);

    text-align: left;
}


.hero-premium-content .hero-tagline {
    margin-top: 42px;

    text-align: left;
}


.hero-premium-content .hero-description {
    max-width: 520px;

    margin-top: 22px;

    text-align: left;
}


.hero-premium-content .primary-button {
    margin-top: 38px;
    margin-left: 0;
}


/* =========================================================
   PREMIUM MECHANISM CONTAINER
========================================================= */

.premium-mechanism {
    position: absolute;

    z-index: 2;

    width: min(61vw, 930px);
    aspect-ratio: 1 / 1;

    right: -4vw;
    top: 52%;

    transform: translateY(-50%);

    pointer-events: none;
}


/* =========================================================
   COMPLETE STATIC MECHANISM
   THIS NEVER ROTATES
========================================================= */

.mechanism-static {
    position: absolute;

    inset: 0;

    z-index: 2;
}


.mechanism-static img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: none;

    animation: none;

    filter:
        drop-shadow(
            0 30px 60px
            rgba(0,0,0,0.72)
        )
        drop-shadow(
            0 0 28px
            rgba(188,155,111,0.09)
        );
}


/* =========================================================
   INTERNAL MECHANICAL MOTION
========================================================= */

/* =========================================================
   INTERNAL MECHANICAL MOTION
   V2 - CLEAR VISIBLE ROTATION
========================================================= */

.mechanism-motion {
    position: absolute;

    /*
       Upper gold mechanical wheel.
       Main mechanism remains completely stationary.
    */
    width: 25%;
    height: 25%;

    left: 59%;
    top: 17%;

    z-index: 3;

    border-radius: 50%;
    overflow: hidden;

    opacity: 1;

    -webkit-mask-image:
        radial-gradient(
            circle,
            #000 0%,
            #000 68%,
            rgba(0,0,0,0.9) 78%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            circle,
            #000 0%,
            #000 68%,
            rgba(0,0,0,0.9) 78%,
            transparent 100%
        );
}


.mechanism-motion img {
    position: absolute;

    /*
       100 / 25 = 4
       Reconstruct full mechanism inside this window.
    */
    width: 400%;
    height: 400%;

    max-width: none;

    /*
       Align duplicate image with original mechanism.
    */
    left: -236%;
    top: -68%;

    object-fit: contain;

    transform-origin: 71% 29%;

    animation:
        hourScoutInternalRotation
        8s
        linear
        infinite;
}


/* =========================================================
   INTERNAL ROTATION
========================================================= */

@keyframes hourScoutInternalRotation {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* =========================================================
   INTERNAL MOTION ANIMATION
========================================================= */

@keyframes hourScoutMechanicalPulse {

    0% {
        transform:
            rotate(-2deg)
            scale(1);
    }

    45% {
        transform:
            rotate(2.5deg)
            scale(1.005);
    }

    70% {
        transform:
            rotate(0deg)
            scale(1);
    }

    100% {
        transform:
            rotate(-1.5deg)
            scale(1.004);
    }
}


/* =========================================================
   PREMIUM LIGHT OVER MECHANISM
========================================================= */

.mechanism-light {
    position: absolute;

    z-index: 5;

    width: 45%;
    height: 45%;

    left: 29%;
    top: 24%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(220,183,130,0.08) 0%,
            rgba(188,155,111,0.025) 45%,
            transparent 72%
        );

    filter: blur(22px);

    opacity: 0.75;

    pointer-events: none;

    animation:
        hourScoutLightPulse
        5s
        ease-in-out
        infinite
        alternate;
}


@keyframes hourScoutLightPulse {

    from {
        opacity: 0.48;
        transform: scale(0.96);
    }

    to {
        opacity: 0.82;
        transform: scale(1.04);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hero-content.hero-premium-content {
        left: 5%;

        width: 48%;
    }


    .premium-title {
        font-size:
            clamp(68px, 8vw, 100px);
    }


    .premium-mechanism {
        width: 78vw;

        right: -25vw;

        opacity: 0.82;
    }


    .hero-premium-shade {
        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,1) 0%,
                rgba(5,5,5,0.96) 42%,
                rgba(5,5,5,0.38) 70%,
                rgba(5,5,5,0) 100%
            );
    }
}


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

@media (max-width: 760px) {

    .hero-premium {
        min-height: 100svh;
    }


    .hero-content.hero-premium-content {
        position: relative;

        left: auto;
        top: auto;

        width: auto;
        max-width: none;

        margin: 0 24px;

        transform: none;
    }


    .premium-title {
        font-size:
            clamp(58px, 18vw, 86px);

        line-height: 0.82;
    }


    .premium-mechanism {
        width: 118vw;

        right: -66vw;
        top: 43%;

        opacity: 0.46;
    }


    .hero-premium-shade {
        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,1) 0%,
                rgba(5,5,5,0.92) 58%,
                rgba(5,5,5,0.38) 100%
            );
    }


    .mechanism-motion {
        display: none;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mechanism-motion img,
    .mechanism-light {
        animation: none !important;
    }
}

/* =========================================================
   HOUR SCOUT HERO
   STATIC MECHANISM + SUBTLE INTERNAL GEAR MOTION
========================================================= */

/* MAIN MECHANISM CONTAINER */

.premium-mechanism {
    position: absolute !important;

    z-index: 3 !important;

    width: 900px !important;
    height: 900px !important;

    right: -80px !important;
    top: 52% !important;

    transform: translateY(-50%) !important;

    pointer-events: none;

    overflow: visible;
}


/* =========================================================
   COMPLETE MECHANISM — NEVER ROTATES
========================================================= */

.mechanism-static {
    position: absolute;

    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;
}


.mechanism-static img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: none !important;
    animation: none !important;

    filter:
        drop-shadow(0 25px 60px rgba(0,0,0,0.65))
        drop-shadow(0 0 30px rgba(188,155,111,0.10));
}


/* =========================================================
   REMOVE OLD CROPPED ROTATION
========================================================= */

.mechanism-inner-rotation {
    display: none !important;
}


/* =========================================================
   ARTIFICIAL PRECISION GEAR
========================================================= */

.hero-gear {
    position: absolute;

    z-index: 4;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.78;
}


/* gear teeth */

.hero-gear::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(194,153,92,0.95) 0deg 4deg,
            transparent 4deg 8deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 56%,
            #000 57% 72%,
            transparent 73%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 56%,
            #000 57% 72%,
            transparent 73%
        );
}


/* gear inner ring */

.hero-gear::after {
    content: "";

    position: absolute;

    inset: 22%;

    border-radius: 50%;

    border: 2px solid rgba(194,153,92,0.70);

    box-shadow:
        inset 0 0 10px rgba(188,155,111,0.20),
        0 0 12px rgba(188,155,111,0.10);
}


/* gear centre */

.hero-gear span {
    position: absolute;

    width: 13%;
    height: 13%;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #9f7444;

    box-shadow:
        0 0 0 3px rgba(25,18,12,0.9),
        0 0 8px rgba(188,155,111,0.35);
}


/* =========================================================
   MAIN GOLD GEAR
========================================================= */

.hero-gear-main {

    /*
       Gold gear visible around centre-right
       of mechanism.
    */

    width: 132px;
    height: 132px;

    left: 64%;
    top: 40%;

    transform: translate(-50%, -50%);

    animation:
        hourScoutGearForward
        11s
        linear
        infinite;
}


/* =========================================================
   SMALL LOWER GOLD GEAR
========================================================= */

.hero-gear-small {

    width: 74px;
    height: 74px;

    left: 71%;
    top: 55%;

    transform: translate(-50%, -50%);

    opacity: 0.70;

    animation:
        hourScoutGearReverse
        7s
        linear
        infinite;
}


/* =========================================================
   ROTATION
========================================================= */

@keyframes hourScoutGearForward {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


@keyframes hourScoutGearReverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }
}


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

@media (max-width: 1100px) {

    .premium-mechanism {
        width: 760px !important;
        height: 760px !important;

        right: -230px !important;
    }

}


@media (max-width: 760px) {

    .premium-mechanism {
        width: 680px !important;
        height: 680px !important;

        right: -390px !important;

        opacity: 0.55;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-gear {
        animation: none !important;
    }

}


/* =========================================================
   HOUR SCOUT
   REAL MECHANISM GEARS
   STATIC MASTER IMAGE + REAL IMAGE CROPS
========================================================= */

/* Disable old artificial CSS gears */
.hero-gear {
    display: none !important;
}


/* ---------------------------------------------------------
   COMMON REAL GEAR WINDOW
--------------------------------------------------------- */

.real-gear {
    position: absolute;
    z-index: 8;

    border-radius: 50%;
    overflow: hidden;

    pointer-events: none;
}


/*
   IMPORTANT:
   Each real gear contains another copy of mechanism.png.

   Because premium-mechanism is 900 x 900 in the current
   desktop layout, the duplicate image is also kept at
   exactly 900 x 900.

   We then move that image underneath the circular mask
   until the original gear lines up perfectly.
*/

.real-gear img {
    position: absolute;

    width: 900px !important;
    height: 900px !important;
    max-width: none !important;

    object-fit: contain;

    display: block;
}


/* =========================================================
   MAIN GOLD GEAR
   Large gold gear at centre-right
========================================================= */

.real-gear-main {
    /*
       Approximate starting coordinates.
       We will fine-tune from the next screenshot.
    */

    width: 190px;
    height: 190px;

    left: 52.2%;
    top: 35.1%;

    transform: translate(-50%, -50%);

    animation:
        hourScoutRealGearMain 12s linear infinite;
}


/*
   Counter-position complete image underneath mask.
*/

.real-gear-main img {
    left: calc(-52.2% * 900 / 100 + 95px);
    top: calc(-35.1% * 900 / 100 + 95px);
}


/* =========================================================
   SMALL GOLD GEAR
   Lower-right gear
========================================================= */

.real-gear-small {
    width: 112px;
    height: 112px;

    left: 60.7%;
    top: 51.5%;

    transform: translate(-50%, -50%);

    animation:
        hourScoutRealGearSmall 8s linear infinite reverse;
}


.real-gear-small img {
    left: calc(-60.7% * 900 / 100 + 56px);
    top: calc(-51.5% * 900 / 100 + 56px);
}


/* =========================================================
   REAL GEAR ROTATION
========================================================= */

@keyframes hourScoutRealGearMain {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


@keyframes hourScoutRealGearSmall {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* =========================================================
   MOBILE / TABLET
   Hide real crop animation temporarily.
   Desktop positioning first.
========================================================= */

@media (max-width: 1100px) {

    .real-gear {
        display: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .real-gear {
        animation: none !important;
    }

}

/* =========================================================
   HOUR SCOUT
   HERO REAL MECHANICAL MOVEMENT V2
   ========================================================= */


/*
   IMPORTANT

   The original mechanism.png remains underneath.

   Every mechanism-part contains another copy of the
   SAME original image.

   The circular container acts as a precision mask.

   FIRST STAGE:
   animation intentionally OFF.

   We first align every component perfectly.
*/


.premium-mechanism {
    --mechanism-size: 900px;
}


/* =========================================================
   COMMON MOVING PART
========================================================= */

.mechanism-part {

    position: absolute;

    z-index: 8;

    border-radius: 50%;

    overflow: hidden;

    pointer-events: none;

    /*
       IMPORTANT:
       no visible border
       because this must disappear into original image.
    */

    border: 0;

    /*
       Animation OFF during calibration.
    */

    animation: none;
}


/* =========================================================
   IMAGE INSIDE EVERY MASK

   Must remain EXACTLY same dimensions as master mechanism.
========================================================= */

.mechanism-part img {

    position: absolute;

    display: block;

    width: var(--mechanism-size) !important;
    height: var(--mechanism-size) !important;

    max-width: none !important;

    object-fit: contain;

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   01
   TOP BALANCE WHEEL
========================================================= */

.part-balance {

    width: 230px;
    height: 230px;

    left: 400px;
    top: 92px;
}

.part-balance img {

    left: -400px;
    top: -92px;
}


/* =========================================================
   02
   LEFT LARGE SILVER GEAR
========================================================= */

.part-silver-large {

    width: 185px;
    height: 185px;

    left: 185px;
    top: 330px;
}

.part-silver-large img {

    left: -185px;
    top: -330px;
}


/* =========================================================
   03
   LOWER LEFT SILVER GEAR
========================================================= */

.part-silver-small {

    width: 120px;
    height: 120px;

    left: 270px;
    top: 485px;
}

.part-silver-small img {

    left: -270px;
    top: -485px;
}


/* =========================================================
   04
   LARGE GOLD GEAR
========================================================= */

.part-gold-large {

    width: 205px;
    height: 205px;

    left: 500px;
    top: 310px;
}

.part-gold-large img {

    left: -500px;
    top: -310px;
}


/* =========================================================
   05
   UPPER GOLD GEAR
========================================================= */

.part-gold-upper {

    width: 130px;
    height: 130px;

    left: 560px;
    top: 245px;
}

.part-gold-upper img {

    left: -560px;
    top: -245px;
}


/* =========================================================
   06
   LOWER RIGHT GOLD GEAR
========================================================= */

.part-gold-lower {

    width: 115px;
    height: 115px;

    left: 615px;
    top: 475px;
}

.part-gold-lower img {

    left: -615px;
    top: -475px;
}


/* =========================================================
   07
   SMALL RIGHT GEAR
========================================================= */

.part-gold-small {

    width: 92px;
    height: 92px;

    left: 655px;
    top: 525px;
}

.part-gold-small img {

    left: -655px;
    top: -525px;
}


/* =========================================================
   08
   MICRO GEAR
========================================================= */

.part-micro {

    width: 72px;
    height: 72px;

    left: 585px;
    top: 545px;
}

.part-micro img {

    left: -585px;
    top: -545px;
}


/* =========================================================
   MOBILE / TABLET

   Do not show precision crop animation yet on smaller screens.
   Master mechanism continues displaying normally.
========================================================= */

@media (max-width: 1050px) {

    .mechanism-part {
        display: none;
    }

}

/* =========================================================
   HOUR SCOUT HERO TITLE
   OFFICIAL LUXURY COLOUR PATTERN
========================================================= */

.hero-content h1 {
    color: #F3EFE7 !important;
}

/* HOUR */
.hero-content h1 .title-hour {
    display: block;
    color: #F3EFE7 !important;
}

/* SCOUT */
.hero-content h1 .title-scout {
    display: block;

    margin-left: 0 !important;
    margin-top: 0 !important;

    color: #BC9B6F !important;

    background: linear-gradient(
        90deg,
        #8B633A 0%,
        #C7A574 28%,
        #E1C291 50%,
        #B88B54 72%,
        #7A542F 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================================
   HOUR SCOUT HERO
   COMPLETE WATCH - VISIBLE LUXURY DANCE
   NO ROTATION
========================================================= */

.hero-premium .premium-mechanism,
.premium-mechanism {
    animation-name: hourScoutDance !important;
    animation-duration: 4s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: normal !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;

    transform-origin: center center !important;
    will-change: transform !important;
}

@keyframes hourScoutDance {
    0%, 100% {
        transform: translateY(-50%) translateX(0px) scale(1) !important;
    }

    20% {
        transform: translateY(calc(-50% - 15px)) translateX(8px) scale(1.01) !important;
    }

    40% {
        transform: translateY(calc(-50% - 5px)) translateX(14px) scale(1.018) !important;
    }

    60% {
        transform: translateY(calc(-50% + 12px)) translateX(4px) scale(1.01) !important;
    }

    80% {
        transform: translateY(calc(-50% + 5px)) translateX(-8px) scale(0.995) !important;
    }
}

/* =========================================================
   FIRST HERO: KEEP THE WATCH IMAGE STATIC INTERNALLY
   ONLY THE COMPLETE WATCH CONTAINER DANCES
========================================================= */

.mechanism-image,
.mechanism-static,
.mechanism-static img,
.mechanism-inner-rotation,
.mechanism-inner-rotation img,
.mechanism-test-image,
.mechanism-motion,
.mechanism-motion img,
.mechanism-part,
.mechanism-part img,
.hero-gear,
.hero-gear::before,
.hero-gear::after {
    animation: none !important;
}


/* =========================================================
   HOUR SCOUT — THREE INTERNAL MOVING PARTS
   STEP 2
========================================================= */

/* Keep the complete mechanism stationary */
.hero-premium .premium-mechanism {
    animation: none !important;
    transform: translateY(-50%) !important;
}

/* Keep the master photograph stationary */
.hero-premium .mechanism-static,
.hero-premium .mechanism-static img {
    animation: none !important;
}

/* Hide the five unused component layers */
.hero-premium .part-silver-small,
.hero-premium .part-gold-upper,
.hero-premium .part-gold-lower,
.hero-premium .part-gold-small,
.hero-premium .part-micro {
    display: none !important;
}

/* Show only the three selected parts */
.hero-premium .part-balance,
.hero-premium .part-silver-large,
.hero-premium .part-gold-large {
    display: block !important;
    animation-play-state: running !important;
    transform-origin: center center;
    will-change: transform;
}

/* 01 — TOP BALANCE WHEEL: BACK AND FORTH */
.hero-premium .part-balance {
    animation: hsBalanceSwing 1.2s ease-in-out infinite
        alternate !important;
}

/* 02 — LEFT SILVER GEAR: ANTICLOCKWISE */
.hero-premium .part-silver-large {
    animation: hsSilverTurn 9s linear infinite !important;
}

/* 03 — LARGE GOLD GEAR: CLOCKWISE */
.hero-premium .part-gold-large {
    animation: hsGoldTurn 12s linear infinite !important;
}

@keyframes hsBalanceSwing {
    from { transform: rotate(-12deg); }
    to   { transform: rotate(12deg); }
}

@keyframes hsSilverTurn {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes hsGoldTurn {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Respect reduced-motion accessibility settings */
@media (prefers-reduced-motion: reduce) {
    .hero-premium .part-balance,
    .hero-premium .part-silver-large,
    .hero-premium .part-gold-large {
        animation: none !important;
    }
}

/* =========================================================
   IMPORTANT OVERRIDE
   Earlier stylesheet has a global reduced-motion rule using
   !important. Keep this requested hero dance running.
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .hero-premium .premium-mechanism,
    .premium-mechanism {
        animation-name: hourScoutDance !important;
        animation-duration: 4s !important;
        animation-timing-function: ease-in-out !important;
        animation-iteration-count: infinite !important;
        animation-direction: normal !important;
        animation-fill-mode: both !important;
        animation-play-state: running !important;
    }
}


/* =========================================================
   HOME / SECTION 03 — A PASSION FOR TIMEPIECES
========================================================= */
.introduction.introduction-v2{
    position:relative;
    min-height:720px;
    padding:0;
    overflow:hidden;
    background:#f3eee5;
    border-top:1px solid rgba(174,130,76,.45);
}

.introduction-v2 .introduction-visual{
    position:absolute;
    inset:0 0 105px 44%;
    z-index:1;
    overflow:hidden;
}

.introduction-v2 .introduction-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#f3eee5 0%,rgba(243,238,229,.96) 8%,rgba(243,238,229,.55) 28%,rgba(243,238,229,0) 55%);
    pointer-events:none;
}

.introduction-v2 .introduction-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.introduction-v2 .introduction-inner{
    position:relative;
    z-index:3;
    width:min(48%,680px);
    margin:0;
    padding:125px 0 150px clamp(70px,6vw,120px);
}

.introduction-v2 .section-kicker{
    display:block;
    margin-bottom:30px;
    color:#9c7548;
    font-size:11px;
    font-weight:600;
    letter-spacing:.48em;
}

.introduction-v2 h2{
    margin:0;
    color:#21160f;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:clamp(64px,6vw,104px);
    font-weight:400;
    line-height:.86;
    letter-spacing:-.035em;
}

.introduction-v2 h2 em{
    display:block;
    margin-top:13px;
    color:#b18a58;
    font-weight:400;
}

.introduction-v2 p{
    max-width:590px;
    margin:42px 0 0;
    color:#6d655e;
    font-size:16px;
    line-height:1.8;
}

.introduction-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:300px;
    margin-top:42px;
    padding:20px 24px;
    border:1px solid rgba(177,138,88,.72);
    color:#33271e;
    text-decoration:none;
    font-size:11px;
    letter-spacing:.25em;
    transition:background .3s ease,color .3s ease;
}

.introduction-link:hover{
    background:#21160f;
    color:#f3eee5;
}

.introduction-arrow{
    font-size:22px;
    line-height:1;
    letter-spacing:0;
}

.introduction-number{
    position:absolute;
    z-index:2;
    left:48%;
    top:42px;
    color:rgba(135,105,71,.07);
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:280px;
    font-style:italic;
    line-height:1;
    pointer-events:none;
}

.introduction-values{
    position:absolute;
    z-index:4;
    left:0;
    right:0;
    bottom:0;
    min-height:105px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:center;
    background:rgba(248,244,237,.97);
    border-top:1px solid rgba(177,138,88,.35);
    padding:0 clamp(45px,5vw,90px);
}

.introduction-values > div{
    min-height:54px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 34px;
    border-right:1px solid rgba(93,73,54,.18);
}

.introduction-values > div:first-child{padding-left:0;}
.introduction-values > div:last-child{
    border-right:0;
    padding-right:0;
}

.introduction-values strong{
    color:#4b4037;
    font-size:10px;
    font-weight:600;
    letter-spacing:.22em;
}

.introduction-values span{
    margin-top:8px;
    color:#968d84;
    font-size:12px;
}

@media (max-width:1050px){
    .introduction.introduction-v2{min-height:820px;}
    .introduction-v2 .introduction-visual{inset:0 0 160px 38%;}
    .introduction-v2 .introduction-inner{
        width:58%;
        padding-left:50px;
    }
    .introduction-values{
        min-height:160px;
        grid-template-columns:repeat(2,1fr);
        row-gap:18px;
        padding-top:18px;
        padding-bottom:18px;
    }
}

@media (max-width:760px){
    .introduction.introduction-v2{
        min-height:0;
        padding-bottom:0;
    }
    .introduction-v2 .introduction-visual{
        position:relative;
        inset:auto;
        height:430px;
        order:2;
    }
    .introduction-v2 .introduction-visual::after{
        background:linear-gradient(180deg,#f3eee5 0%,rgba(243,238,229,0) 34%);
    }
    .introduction-v2 .introduction-inner{
        width:auto;
        padding:80px 28px 45px;
    }
    .introduction-v2 h2{font-size:62px;}
    .introduction-v2 p{margin-top:30px;}
    .introduction-link{width:100%;box-sizing:border-box;}
    .introduction-number{
        left:auto;
        right:15px;
        top:25px;
        font-size:150px;
    }
    .introduction-values{
        position:relative;
        grid-template-columns:1fr;
        padding:25px 28px;
    }
    .introduction-values > div,
    .introduction-values > div:first-child,
    .introduction-values > div:last-child{
        min-height:65px;
        padding:0;
        border-right:0;
        border-bottom:1px solid rgba(93,73,54,.14);
    }
    .introduction-values > div:last-child{border-bottom:0;}
}


/* =========================================================
   HOME / SECTION 04 — EXPLORE OUR BRANDS
========================================================= */
.home-brands{
    position:relative;
    overflow:hidden;
    padding:110px 0 95px;
    background:#090909;
    color:#f2ede5;
    border-top:1px solid rgba(190,148,91,.28);
    border-bottom:1px solid rgba(190,148,91,.28);
}

.home-brands::before{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    left:50%;
    top:46%;
    transform:translate(-50%,-50%);
    border:1px solid rgba(190,148,91,.08);
    border-radius:50%;
    pointer-events:none;
}

.home-brands-heading{
    position:relative;
    z-index:2;
    max-width:760px;
    margin:0 auto 70px;
    padding:0 30px;
    text-align:center;
}

.home-brands .section-kicker{
    display:block;
    margin-bottom:22px;
    color:#b58b57;
    font-size:10px;
    font-weight:600;
    letter-spacing:.48em;
}

.home-brands h2{
    margin:0;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:clamp(54px,5vw,82px);
    font-weight:400;
    line-height:.95;
    letter-spacing:-.025em;
    color:#f1ece4;
}

.home-brands h2 em{
    color:#b99262;
    font-weight:400;
}

.home-brands-heading p{
    margin:25px auto 0;
    color:#8f8a83;
    font-size:14px;
    line-height:1.8;
}

.brand-marquee{
    position:relative;
    z-index:2;
    width:100%;
    overflow:hidden;
    padding:29px 0;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.brand-marquee::before,
.brand-marquee::after{
    content:"";
    position:absolute;
    z-index:3;
    top:0;
    bottom:0;
    width:12vw;
    pointer-events:none;
}

.brand-marquee::before{
    left:0;
    background:linear-gradient(90deg,#090909 10%,rgba(9,9,9,0));
}

.brand-marquee::after{
    right:0;
    background:linear-gradient(270deg,#090909 10%,rgba(9,9,9,0));
}

.brand-marquee-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation:hourScoutBrands 70s linear infinite;
    will-change:transform;
}

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

.brand-scroll-item{
    position:relative;
    flex:0 0 auto;
    padding:0 42px;
    color:#d8d2c9;
    text-decoration:none;
    white-space:nowrap;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:30px;
    font-weight:400;
    letter-spacing:.07em;
    transition:color .25s ease,transform .25s ease;
}

.brand-scroll-item::after{
    content:"";
    position:absolute;
    right:-3px;
    top:50%;
    width:5px;
    height:5px;
    transform:translateY(-50%) rotate(45deg);
    background:#9e7749;
}

.brand-scroll-item:hover{
    color:#c8a06d;
    transform:translateY(-2px);
}

@keyframes hourScoutBrands{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(-50%,0,0);}
}

.home-brands-action{
    position:relative;
    z-index:2;
    margin-top:54px;
    text-align:center;
}

.home-brands-action a{
    display:inline-flex;
    align-items:center;
    gap:20px;
    padding:17px 25px;
    border-bottom:1px solid #a77d4d;
    color:#ddd6cc;
    text-decoration:none;
    font-size:10px;
    letter-spacing:.28em;
}

.home-brands-action a span{
    color:#c69a63;
    font-size:18px;
    letter-spacing:0;
}

@media (max-width:760px){
    .home-brands{padding:80px 0 70px;}
    .home-brands-heading{margin-bottom:50px;}
    .home-brands h2{font-size:54px;}
    .brand-marquee{
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }
    .brand-marquee::-webkit-scrollbar{display:none;}
    .brand-marquee-track{animation-duration:85s;}
    .brand-scroll-item{
        padding:0 28px;
        font-size:24px;
    }
}


/* =========================================================
   HOME / SECTION 05 — CURATED COLLECTIONS
========================================================= */
.home-collections{
    position:relative;
    padding:115px clamp(38px,6vw,105px) 120px;
    background:#eee8df;
    overflow:hidden;
}

.collections-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:70px;
    margin-bottom:65px;
}

.collections-head > div{max-width:760px;}

.home-collections .section-kicker{
    display:block;
    margin-bottom:22px;
    color:#a37b4c;
    font-size:10px;
    font-weight:600;
    letter-spacing:.45em;
}

.home-collections h2{
    margin:0;
    color:#211710;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:clamp(58px,5.4vw,88px);
    font-weight:400;
    line-height:.92;
    letter-spacing:-.03em;
}

.home-collections h2 em{
    color:#b18a58;
    font-weight:400;
}

.collections-head p{
    width:min(360px,100%);
    margin:0 0 8px;
    color:#756d65;
    font-size:14px;
    line-height:1.8;
}

.collections-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.collection-card{
    position:relative;
    min-height:500px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding:34px;
    text-decoration:none;
    background:#171411;
    border:1px solid rgba(169,129,79,.3);
    isolation:isolate;
}

.collection-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    opacity:.82;
    transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s ease;
    background:
        radial-gradient(circle at 68% 35%,rgba(204,164,111,.32) 0 9%,transparent 10%),
        radial-gradient(circle at 68% 35%,transparent 0 17%,rgba(202,167,120,.25) 18% 19%,transparent 20%),
        radial-gradient(circle at 68% 35%,transparent 0 28%,rgba(255,255,255,.08) 29% 30%,transparent 31%),
        linear-gradient(145deg,#2b251f 0%,#0d0c0b 62%,#1d1712 100%);
}

.collection-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,transparent 28%,rgba(6,6,6,.25) 56%,rgba(5,5,5,.94) 100%);
}

.collection-women::before{
    background:
        radial-gradient(circle at 68% 34%,rgba(232,213,190,.34) 0 9%,transparent 10%),
        radial-gradient(circle at 68% 34%,transparent 0 17%,rgba(218,189,153,.3) 18% 19%,transparent 20%),
        linear-gradient(145deg,#3a3029 0%,#151210 62%,#261c17 100%);
}
.collection-sport::before{
    background:
        radial-gradient(circle at 68% 34%,rgba(165,176,180,.25) 0 9%,transparent 10%),
        radial-gradient(circle at 68% 34%,transparent 0 17%,rgba(186,151,102,.25) 18% 19%,transparent 20%),
        linear-gradient(145deg,#202326 0%,#090a0b 62%,#181512 100%);
}
.collection-classic::before{
    background:
        radial-gradient(circle at 68% 34%,rgba(201,155,91,.38) 0 9%,transparent 10%),
        radial-gradient(circle at 68% 34%,transparent 0 17%,rgba(193,151,95,.3) 18% 19%,transparent 20%),
        linear-gradient(145deg,#34271b 0%,#100d0a 62%,#21170f 100%);
}

.collection-card:hover::before{
    transform:scale(1.06);
    opacity:1;
}

.collection-index{
    position:absolute;
    top:27px;
    right:27px;
    color:rgba(222,190,148,.58);
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:16px;
    letter-spacing:.12em;
}

.collection-copy > span{
    color:#ad895e;
    font-size:9px;
    letter-spacing:.3em;
}

.collection-copy h3{
    margin:12px 0 27px;
    color:#f0ebe4;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:37px;
    font-weight:400;
    line-height:1;
}

.collection-copy strong{
    display:inline-flex;
    align-items:center;
    gap:15px;
    color:#d8d0c6;
    font-size:9px;
    font-weight:500;
    letter-spacing:.27em;
}

.collection-copy strong b{
    color:#c69a63;
    font-size:17px;
    font-weight:400;
    transition:transform .25s ease;
}

.collection-card:hover strong b{transform:translateX(6px);}

@media (max-width:1100px){
    .collections-grid{grid-template-columns:repeat(2,1fr);}
    .collection-card{min-height:430px;}
}

@media (max-width:760px){
    .home-collections{padding:80px 24px;}
    .collections-head{
        display:block;
        margin-bottom:45px;
    }
    .collections-head p{margin-top:28px;}
    .home-collections h2{font-size:54px;}
    .collections-grid{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        gap:12px;
        scrollbar-width:none;
    }
    .collections-grid::-webkit-scrollbar{display:none;}
    .collection-card{
        flex:0 0 82vw;
        min-height:460px;
        scroll-snap-align:start;
    }
}

/* ==========================================
   HOUR SCOUT — WHITE HERO PREVIEW
   ========================================== */

.hero-premium {
    background: #ffffff !important;
}

.hero-premium-bg {
    background: #ffffff !important;
}

.hero-premium-shade {
    background: none !important;
    
}


/* =========================================================
   HOUR SCOUT — WHITE & GOLD HERO
   CUSTOMER PREVIEW
========================================================= */

/* White hero background */
.hero.hero-premium,
.hero-premium .hero-premium-bg {
    background: #ffffff !important;
}

.hero-premium .hero-premium-shade {
    background: none !important;
}

/* HOUR = BLACK */
.hero-premium .hero-premium-content h1 .title-hour {
    color: #111111 !important;
}

/* SCOUT = GOLD */
.hero-premium .hero-premium-content h1 .title-scout {
    color: #b48a4d !important;
}

/* Headline and description */
.hero-premium .hero-tagline {
    color: #171717 !important;
}

.hero-premium .hero-description {
    color: #555555 !important;
}

/* Section number and eyebrow */
.hero-premium .hero-number {
    color: #777777 !important;
}

.hero-premium .eyebrow {
    color: #a7804c !important;
}

/* Header navigation while hero is visible */
.site-header:not(.scrolled) .desktop-nav a {
    color: #222222 !important;
}

.site-header:not(.scrolled) .desktop-nav a:hover,
.site-header:not(.scrolled) .desktop-nav a.active {
    color: #a7804c !important;
}

/* Collection button */
.hero-premium .primary-button {
    background: #ffffff !important;
    color: #171717 !important;
    border: 1px solid #b48a4d !important;
}

.hero-premium .primary-button:hover {
    background: #b48a4d !important;
    color: #ffffff !important;
}

/* Scroll label */
.hero-premium .scroll-indicator {
    color: #333333 !important;
}

/* Keep navigation readable after scrolling
   into the existing dark sections */
.site-header.scrolled .desktop-nav a {
    color: rgba(255,255,255,0.82) !important;
}

.site-header.scrolled .desktop-nav a:hover,
.site-header.scrolled .desktop-nav a.active {
    color: #ffffff !important;
}

/* Mobile menu on white hero */
.site-header:not(.scrolled) .mobile-menu.open {
    background: #ffffff !important;
}

.site-header:not(.scrolled) .mobile-menu.open a {
    color: #171717 !important;
}


/* =========================================================
   HOUR SCOUT — BLACK & GOLD MIXED HERO
   STEP 1: BACKGROUND ONLY
========================================================= */

/* Main background: black on left, bronze on right */
.hero.hero-premium {
    background:
        radial-gradient(
            ellipse 55% 75% at 91% 48%,
            rgba(195, 133, 48, 0.55) 0%,
            rgba(112, 69, 24, 0.34) 43%,
            rgba(0, 0, 0, 0) 78%
        ),
        linear-gradient(
            112deg,
            #080706 0%,
            #0b0907 39%,
            #21170d 65%,
            #4b3017 100%
        ) !important;
}

/* Prevent the old white background from covering it */
.hero-premium .hero-premium-bg {
    background: transparent !important;
}

/* Soft golden illumination behind the mechanism */
.hero-premium .hero-premium-shade {
    background:
        radial-gradient(
            ellipse 42% 60% at 82% 45%,
            rgba(239, 181, 86, 0.20) 0%,
            rgba(168, 105, 35, 0.08) 53%,
            transparent 80%
        ) !important;

    pointer-events: none;
}

/* =========================================================
   HOUR SCOUT — BLACK & GOLD MIXED HERO
   STEP 2: TYPOGRAPHY AND BUTTON
========================================================= */

/* HOUR = IVORY WHITE */
.hero-premium .hero-premium-content h1 .title-hour {
    color: #f8f5ef !important;
}

/* SCOUT = GOLD */
.hero-premium .hero-premium-content h1 .title-scout {
    color: #c9a16b !important;
}

/* Main tagline */
.hero-premium .hero-tagline {
    color: #f8f5ef !important;
}

/* Supporting description */
.hero-premium .hero-description {
    color: #c7c0b6 !important;
}

/* Small section number */
.hero-premium .hero-number {
    color: #a9a198 !important;
}

/* Gold eyebrow */
.hero-premium .eyebrow {
    color: #c9a16b !important;
}

.hero-premium .eyebrow > span {
    background: #c9a16b !important;
}

/* Desktop navigation */
.site-header:not(.scrolled) .desktop-nav a {
    color: #f8f5ef !important;
}

.site-header:not(.scrolled) .desktop-nav a:hover,
.site-header:not(.scrolled) .desktop-nav a.active {
    color: #e3bc80 !important;
}

/* Collection button: black with gold outline */
.hero-premium .primary-button {
    background: rgba(8, 7, 6, 0.75) !important;
    color: #f8f5ef !important;
    border: 1px solid #c9a16b !important;
}

.hero-premium .primary-button:hover {
    background: #c9a16b !important;
    color: #111111 !important;
}

/* Scroll indicator */
.hero-premium .scroll-indicator {
    color: #f8f5ef !important;
}

/* Mobile navigation */
.site-header:not(.scrolled) .mobile-menu.open {
    background: #100c08 !important;
}

.site-header:not(.scrolled) .mobile-menu.open a {
    color: #f8f5ef !important;
}


/* =========================================================
   HOUR SCOUT — CINEMATIC BLACK & GOLD
   CUSTOMER DESIGN 03
========================================================= */

/* 01 — Main black background with diagonal gold lighting */
.hero.hero-premium {
    background:
        /* Bright upper-right gold highlight */
        radial-gradient(
            ellipse 42% 42% at 100% 0%,
            rgba(255, 189, 83, 0.62) 0%,
            rgba(175, 101, 27, 0.28) 46%,
            transparent 90%
        ),

        /* Gold halo behind the watch */
        radial-gradient(
            ellipse 43% 65% at 82% 50%,
            rgba(196, 119, 32, 0.38) 0%,
            rgba(116, 65, 20, 0.20) 52%,
            transparent 100%
        ),

        /* Narrow diagonal metallic light */
        linear-gradient(
            133deg,
            transparent 0%,
            transparent 53.8%,
            rgba(121, 71, 22, 0.12) 54.1%,
            rgba(255, 192, 96, 0.52) 54.35%,
            rgba(255, 218, 143, 0.84) 54.5%,
            rgba(167, 93, 29, 0.34) 54.75%,
            transparent 55.3%
        ),

        /* Wider bronze diagonal sweep */
        linear-gradient(
            133deg,
            transparent 0%,
            transparent 51%,
            rgba(80, 45, 15, 0.12) 54%,
            rgba(174, 103, 35, 0.24) 63%,
            rgba(74, 39, 12, 0.13) 76%,
            transparent 90%
        ),

        /* Deep-black base */
        linear-gradient(
            110deg,
            #080706 0%,
            #0b0907 35%,
            #171008 62%,
            #39200d 100%
        ) !important;
}

/* 02 — Stop previous background layers hiding the design */
.hero-premium .hero-premium-bg {
    background: transparent !important;
}

.hero-premium .hero-premium-shade {
    background: transparent !important;
    pointer-events: none;
}

/* 03 — Approved ivory and champagne-gold headline */
.hero-premium .hero-premium-content h1 .title-hour {
    color: #f8f5ef !important;
}

.hero-premium .hero-premium-content h1 .title-scout {
    color: #e2b979 !important;
}

/* 04 — Supporting text */
.hero-premium .hero-tagline {
    color: #f8f5ef !important;
}

.hero-premium .hero-description {
    color: #d5cfc6 !important;
}

.hero-premium .eyebrow {
    color: #d4a764 !important;
}

/* 05 — Collection button */
.hero-premium .primary-button {
    background: rgba(8, 7, 6, 0.82) !important;
    color: #ffffff !important;
    border: 1px solid #d4a764 !important;
}

.hero-premium .primary-button:hover {
    background: #d4a764 !important;
    color: #111111 !important;
}


/* =========================================================
   HOUR SCOUT — CINEMATIC GOLD V2
   APPROVED CUSTOMER PREVIEW
========================================================= */

/* 01 — Black base, golden light and warm watch halo */
.hero.hero-premium {
    position: relative;
    isolation: isolate;

    background:
        /* Bright gold glow in the top-right corner */
        radial-gradient(
            ellipse 45% 55% at 105% -5%,
            rgba(255, 197, 102, 0.68) 0%,
            rgba(179, 103, 31, 0.32) 42%,
            transparent 85%
        ),

        /* Warm illumination behind the mechanism */
        radial-gradient(
            ellipse 45% 70% at 83% 51%,
            rgba(218, 143, 52, 0.38) 0%,
            rgba(121, 66, 21, 0.20) 55%,
            transparent 100%
        ),

        /* Main bright diagonal streak */
        linear-gradient(
            133deg,
            transparent 0%,
            transparent 51.8%,
            rgba(161, 91, 25, 0.15) 52.0%,
            rgba(255, 186, 75, 0.52) 52.15%,
            rgba(255, 231, 163, 0.96) 52.28%,
            rgba(244, 167, 57, 0.58) 52.42%,
            transparent 52.8%
        ),

        /* Wider metallic bronze sweep */
        linear-gradient(
            133deg,
            transparent 0%,
            transparent 47%,
            rgba(116, 65, 23, 0.13) 52%,
            rgba(198, 119, 39, 0.27) 65%,
            rgba(87, 46, 16, 0.13) 81%,
            transparent 94%
        ),

        /* Main dark background */
        linear-gradient(
            110deg,
            #070605 0%,
            #0b0806 34%,
            #1c1108 62%,
            #4c2a0f 100%
        ) !important;
}

/* 02 — Keep existing background elements transparent */
.hero-premium .hero-premium-bg {
    background: transparent !important;
}

.hero-premium .hero-premium-shade {
    background: transparent !important;
    pointer-events: none;
}

/* 03 — Additional fine diagonal golden light */
.hero.hero-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            133deg,
            transparent 0%,
            transparent 38.7%,
            rgba(221, 139, 49, 0.14) 38.9%,
            rgba(255, 214, 133, 0.72) 39.02%,
            rgba(255, 188, 79, 0.28) 39.15%,
            transparent 39.4%
        ),

        radial-gradient(
            ellipse 36% 30% at 72% 100%,
            rgba(225, 143, 49, 0.20),
            transparent 100%
        );
}

/* 04 — Subtle gold illumination around the watch */
.hero.hero-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background: radial-gradient(
        ellipse 42% 58% at 79% 53%,
        rgba(255, 184, 77, 0.12) 0%,
        rgba(188, 105, 29, 0.06) 55%,
        transparent 100%
    );
}

/* 05 — Keep hero content and mechanism above the light */
.hero-premium .hero-premium-content,
.hero-premium .premium-mechanism,
.hero-premium .scroll-indicator {
    z-index: 2;
}

/* 06 — Ivory HOUR and champagne-gold SCOUT */
.hero-premium .hero-premium-content h1 .title-hour {
    color: #fffaf2 !important;
}

.hero-premium .hero-premium-content h1 .title-scout {
    color: #e8bd7b !important;
}

.hero-premium .hero-tagline {
    color: #fffaf2 !important;
}

.hero-premium .hero-description {
    color: #d8d0c5 !important;
}

.hero-premium .eyebrow {
    color: #d9ab68 !important;
}

/* 07 — Gold-outline collection button */
.hero-premium .primary-button {
    background: rgba(8, 7, 6, 0.82) !important;
    color: #fffaf2 !important;
    border: 1px solid #d9ab68 !important;
}

.hero-premium .primary-button:hover {
    background: #d9ab68 !important;
    color: #111111 !important;
}


/* =========================================================
   HOUR SCOUT — BLACK & GOLD WITHOUT DIAGONAL LINES
========================================================= */

/* Remove both diagonal light effects */
.hero.hero-premium::before,
.hero.hero-premium::after {
    content: none !important;
    background: none !important;
}

/* Keep only the black background and warm gold glow */
.hero.hero-premium {
    background:
        radial-gradient(
            ellipse 45% 55% at 105% -5%,
            rgba(255, 197, 102, 0.48) 0%,
            rgba(179, 103, 31, 0.26) 42%,
            transparent 85%
        ),
        radial-gradient(
            ellipse 45% 70% at 83% 51%,
            rgba(218, 143, 52, 0.30) 0%,
            rgba(121, 66, 21, 0.16) 55%,
            transparent 100%
        ),
        linear-gradient(
            110deg,
            #070605 0%,
            #0b0806 34%,
            #1c1108 62%,
            #4c2a0f 100%
        ) !important;
}

/* Prevent older background overlays from reappearing */
.hero-premium .hero-premium-bg,
.hero-premium .hero-premium-shade {
    background: transparent !important;
}

/* =========================================================
   HOUR SCOUT — SECTION 2 BLACK & GOLD
   Precision in Motion / Watch Showcase
   No diagonal golden lines
========================================================= */

.watch-showcase {
    background:
        /* Warm champagne light in the top-right */
        radial-gradient(
            ellipse 45% 55% at 105% -5%,
            rgba(255, 197, 102, 0.48) 0%,
            rgba(179, 103, 31, 0.26) 42%,
            transparent 85%
        ),

        /* Soft bronze glow behind the watch */
        radial-gradient(
            ellipse 45% 70% at 83% 51%,
            rgba(218, 143, 52, 0.30) 0%,
            rgba(121, 66, 21, 0.16) 55%,
            transparent 100%
        ),

        /* Black-to-bronze base */
        linear-gradient(
            110deg,
            #070605 0%,
            #0b0806 34%,
            #1c1108 62%,
            #4c2a0f 100%
        ) !important;

    border-top: 1px solid rgba(188, 155, 111, 0.12);
}

/* Keep watch and content above the background */
.watch-showcase .showcase-inner {
    position: relative;
    z-index: 2;
}

/* Preserve the existing champagne-gold title */
.watch-showcase .showcase-copy h2 em {
    color: #e8bd7b;
}

/* Mobile: softer glow for better text readability */
@media (max-width: 750px) {
    .watch-showcase {
        background:
            radial-gradient(
                ellipse 75% 40% at 85% 25%,
                rgba(218, 143, 52, 0.23),
                transparent 100%
            ),
            linear-gradient(
                145deg,
                #070605 0%,
                #130d08 60%,
                #39210e 100%
            ) !important;
    }
}


/* =========================================================
   HOUR SCOUT — PATTERN 3: WHITE + CHAMPAGNE GOLD
   Sections 1 and 2
========================================================= */

/* SECTION 1 — HERO */
.hero-premium {
    background:
        radial-gradient(
            ellipse 58% 72% at 91% 43%,
            rgba(203, 155, 89, 0.32) 0%,
            rgba(229, 201, 157, 0.17) 50%,
            transparent 100%
        ),
        linear-gradient(
            110deg,
            #ffffff 0%,
            #fcfaf6 37%,
            #f0e4d0 75%,
            #d7b98d 100%
        ) !important;
}

/* Replace the previous dark overlay with a light one */
.hero-premium .hero-premium-shade {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.98) 0%,
        rgba(255,255,255,0.93) 28%,
        rgba(255,255,255,0.62) 43%,
        rgba(255,255,255,0.08) 65%,
        transparent 85%
    ) !important;
}

.hero-premium .hero-premium-bg {
    background: transparent !important;
}

/* HERO TEXT — BLACK WITH GOLD SCOUT */
.hero-premium .premium-title,
.hero-premium .premium-title > span:first-child,
.hero-premium .hero-tagline {
    color: #17120e !important;
}

.hero-premium .premium-title > span:last-child,
.hero-premium .premium-title em {
    color: #b88b50 !important;
}

.hero-premium .hero-number,
.hero-premium .hero-description {
    color: #51483e !important;
}

.hero-premium .eyebrow {
    color: #9e7543 !important;
}

.hero-premium .primary-button {
    color: #17120e !important;
    background: rgba(255,255,255,0.65) !important;
    border-color: #b88b50 !important;
}

.hero-premium .primary-button:hover {
    background: #c9a16a !important;
    color: #17120e !important;
}

.hero-premium .scroll-indicator {
    color: #6e5a43 !important;
}

/* HEADER — DARK LINKS ON LIGHT BACKGROUND */
.site-header:not(.scrolled) .desktop-nav a {
    color: #292017;
}

.site-header:not(.scrolled) .desktop-nav a:hover,
.site-header:not(.scrolled) .desktop-nav a.active {
    color: #a67b43;
}

/* Keep navigation readable when the header becomes dark */
.site-header.scrolled .desktop-nav a {
    color: rgba(255,255,255,0.82);
}

.site-header.scrolled .desktop-nav a:hover,
.site-header.scrolled .desktop-nav a.active {
    color: #ffffff;
}

/* SECTION 2 — WATCH SHOWCASE */
.watch-showcase {
    background:
        radial-gradient(
            ellipse 48% 62% at 83% 47%,
            rgba(197, 143, 72, 0.31) 0%,
            rgba(226, 193, 144, 0.15) 55%,
            transparent 100%
        ),
        linear-gradient(
            110deg,
            #ffffff 0%,
            #fcfaf6 35%,
            #f1e6d6 68%,
            #d9bc91 100%
        ) !important;

    border-top: 1px solid rgba(166, 123, 67, 0.20);
}

/* SECTION 2 — BLACK TEXT, GOLD ACCENTS */
.watch-showcase .showcase-copy h2 {
    color: #17120e !important;
}

.watch-showcase .showcase-copy h2 em {
    color: #b18449 !important;
}

.watch-showcase .showcase-copy p,
.watch-showcase .showcase-category {
    color: #60554a !important;
}

.watch-showcase .showcase-counter,
.watch-showcase .showcase-precision,
.watch-showcase .showcase-vertical-copy {
    color: #76685a !important;
}

.watch-showcase .showcase-link,
.watch-showcase .showcase-arrow {
    color: #17120e !important;
}

.watch-showcase .showcase-arrow:hover {
    background: #c9a16a !important;
}

.watch-showcase .showcase-background-text {
    color: rgba(166, 123, 67, 0.07) !important;
}

/* MOBILE */
@media (max-width: 750px) {
    .hero-premium {
        background: linear-gradient(
            145deg,
            #ffffff 0%,
            #f8f1e6 65%,
            #dfc49e 100%
        ) !important;
    }

    .hero-premium .hero-premium-shade {
        background: linear-gradient(
            90deg,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.85) 55%,
            rgba(255,255,255,0.25) 100%
        ) !important;
    }

    .watch-showcase {
        background: linear-gradient(
            145deg,
            #ffffff 0%,
            #f8f1e6 60%,
            #dfc49e 100%
        ) !important;
    }
}


/* =========================================================
   HOUR SCOUT — WHITE & GOLD TEXT CORRECTION
   SECTION 1
========================================================= */

/* HOUR — BLACK */
.hero-premium .hero-premium-content h1 .title-hour {
    color: #17120e !important;
}

/* SCOUT — CHAMPAGNE GOLD */
.hero-premium .hero-premium-content h1 .title-scout {
    color: #b48a4d !important;
}

/* Main tagline */
.hero-premium .hero-tagline {
    color: #211b15 !important;
}

/* Description */
.hero-premium .hero-description {
    color: #554a3e !important;
}

/* Small heading and section number */
.hero-premium .eyebrow {
    color: #9b713e !important;
}

.hero-premium .hero-number {
    color: #6b6055 !important;
}

/* Collection button */
.hero-premium .primary-button {
    background: #ffffff !important;
    color: #17120e !important;
    border: 1px solid #b48a4d !important;
}

.hero-premium .primary-button:hover {
    background: #b48a4d !important;
    color: #ffffff !important;
}

/* Scroll label */
.hero-premium .scroll-indicator {
    color: #514538 !important;
}

/* Navigation */
.site-header:not(.scrolled) .desktop-nav a {
    color: #211b15 !important;
}

.site-header:not(.scrolled) .desktop-nav a:hover,
.site-header:not(.scrolled) .desktop-nav a.active {
    color: #a77b43 !important;
}


/* HOUR SCOUT — FINAL WHITE & GOLD HERO TEXT FIX */

/* Apply colour to the exact HOUR and SCOUT spans */
body .hero.hero-premium .hero-content h1 > span.title-hour {
    color: #17120e !important;
    -webkit-text-fill-color: #17120e !important;
}

body .hero.hero-premium .hero-content h1 > span.title-scout {
    color: #b48a4d !important;
    -webkit-text-fill-color: #b48a4d !important;
}

/* Supporting text */
body .hero.hero-premium .hero-content .hero-tagline {
    color: #211b15 !important;
    -webkit-text-fill-color: #211b15 !important;
}

body .hero.hero-premium .hero-content .hero-description {
    color: #554a3e !important;
}

body .hero.hero-premium .hero-content .eyebrow {
    color: #9b713e !important;
}

body .hero.hero-premium .hero-content .hero-number {
    color: #6b6055 !important;
}

/* Button and scroll text */
body .hero.hero-premium .primary-button,
body .hero.hero-premium .primary-button span {
    color: #17120e !important;
}

body .hero.hero-premium .scroll-indicator {
    color: #514538 !important;
}

/* Preserve the dark lettering after title animation */
body .hero.hero-premium .hero-content h1 {
    opacity: 1;
}


/* =========================================================
   HOUR SCOUT — SECTION 01 / 02 LIGHT THEME
   Matched to the current index.html; keep this block last.
========================================================= */
body .hero.hero-premium .hero-content.hero-premium-content h1 {
    color: #17120e !important;
    -webkit-text-fill-color: #17120e !important;
}
body .hero.hero-premium .hero-content.hero-premium-content h1 > .title-hour {
    color: #17120e !important;
    -webkit-text-fill-color: #17120e !important;
    margin-left: 1.05em;
}
body .hero.hero-premium .hero-content.hero-premium-content h1 > .title-scout {
    color: #b48a4d !important;
    -webkit-text-fill-color: #b48a4d !important;
    margin-left: 0 !important;
}
body .hero.hero-premium .hero-content.hero-premium-content .hero-tagline {
    color: #211b15 !important;
    -webkit-text-fill-color: #211b15 !important;
}
body .hero.hero-premium .hero-content.hero-premium-content .hero-description {
    color: #554a3e !important;
    -webkit-text-fill-color: #554a3e !important;
}
body .hero.hero-premium .hero-content.hero-premium-content .hero-number {
    color: #665849 !important;
}
body .hero.hero-premium .hero-content.hero-premium-content .eyebrow {
    color: #91672f !important;
}
body .hero.hero-premium .hero-content.hero-premium-content .primary-button {
    background: #fff !important;
    color: #17120e !important;
    border-color: #b48a4d !important;
}
body .hero.hero-premium .hero-content.hero-premium-content .primary-button:hover {
    background: #b48a4d !important;
    color: #fff !important;
}
body .hero.hero-premium .scroll-indicator {
    color: #514538 !important;
}
body .site-header:not(.scrolled) .desktop-nav a {
    color: #211b15 !important;
}
body .site-header:not(.scrolled) .desktop-nav a:is(:hover, .active) {
    color: #a77b43 !important;
}
body .site-header.scrolled .desktop-nav a {
    color: rgba(255,255,255,.82) !important;
}
body .site-header.scrolled .desktop-nav a:is(:hover, .active) {
    color: #fff !important;
}
body .watch-showcase .showcase-copy h2 {
    color: #17120e !important;
}
body .watch-showcase .showcase-copy h2 em {
    color: #b18449 !important;
}
body .watch-showcase .showcase-copy p,
body .watch-showcase .showcase-category {
    color: #60554a !important;
}
body .watch-showcase .showcase-link,
body .watch-showcase .showcase-arrow {
    color: #17120e !important;
}
@media (max-width: 760px) {
    body .hero.hero-premium .hero-content.hero-premium-content h1 > .title-hour {
        margin-left: .45em;
    }
}


/* =========================================================
   CUSTOMER APPROVED: STATIC BLACK/GOLD HERO + PEARL MIDDLE
   FINAL OVERRIDES — DO NOT ADD WHITE HERO RULES AFTER THIS
========================================================= */
body .hero.hero-premium {
    background: radial-gradient(ellipse 48% 65% at 102% 3%,rgba(212,142,58,.42),transparent 82%),
                radial-gradient(ellipse 58% 68% at 88% 86%,rgba(143,79,27,.30),transparent 88%),
                linear-gradient(110deg,#080706 0%,#0c0907 39%,#20150d 68%,#4b2d14 100%) !important;
}
body .hero.hero-premium::before,body .hero.hero-premium::after {content:none !important;display:none !important;}
body .hero.hero-premium .hero-premium-bg,body .hero.hero-premium .hero-premium-shade {background:none !important;}
body .hero.hero-premium .premium-mechanism {animation:none !important;transform:translateY(-50%) !important;will-change:auto !important;}
body .hero.hero-premium .mechanism-static,body .hero.hero-premium .mechanism-static img {animation:none !important;transform:none !important;}
body .hero.hero-premium .mechanism-part,body .hero.hero-premium .mechanism-motion,
body .hero.hero-premium .mechanism-inner-rotation,body .hero.hero-premium .hero-gear {display:none !important;animation:none !important;}
body .hero.hero-premium .hero-content.hero-premium-content h1 > .title-hour {color:#f8f5ef !important;-webkit-text-fill-color:#f8f5ef !important;}
body .hero.hero-premium .hero-content.hero-premium-content h1 > .title-scout {color:#c9a16b !important;-webkit-text-fill-color:#c9a16b !important;}
body .hero.hero-premium .hero-content.hero-premium-content .hero-tagline {color:#f8f5ef !important;-webkit-text-fill-color:#f8f5ef !important;}
body .hero.hero-premium .hero-content.hero-premium-content .hero-description {color:#c7c0b6 !important;-webkit-text-fill-color:#c7c0b6 !important;}
body .hero.hero-premium .hero-content.hero-premium-content .hero-number {color:#aaa095 !important;}
body .hero.hero-premium .hero-content.hero-premium-content .eyebrow {color:#c9a16b !important;}
body .hero.hero-premium .hero-content.hero-premium-content .primary-button {background:rgba(8,7,6,.75) !important;color:#f8f5ef !important;border-color:#c9a16b !important;}
body .hero.hero-premium .hero-content.hero-premium-content .primary-button span {color:inherit !important;}
body .hero.hero-premium .hero-content.hero-premium-content .primary-button:hover {background:#c9a16b !important;color:#111 !important;}
body .hero.hero-premium .scroll-indicator {color:#f8f5ef !important;}
body .site-header:not(.scrolled) .desktop-nav a {color:rgba(255,255,255,.85) !important;}
body .site-header:not(.scrolled) .desktop-nav a:is(:hover,.active) {color:#e3bc80 !important;}
body .watch-showcase,body .introduction,body .home-brands,body .home-collections {background:#f8f6f1 !important;}
body .watch-showcase .showcase-copy h2,body .home-brands h2,body .home-collections h2 {color:#17120e !important;}
@media (prefers-reduced-motion:reduce) {body .hero.hero-premium .premium-mechanism {animation:none !important;}}



/* HOUR SCOUT — move hero watch inward */
@media (min-width: 1051px) {
    body .hero.hero-premium .premium-mechanism {
        right: 15px !important;
    }
}


/* HOUR SCOUT — MOBILE HERO WATCH FIX */
@media (max-width: 650px) {

    .hero.hero-premium .premium-mechanism {
        width: 430px !important;
        height: 430px !important;

        top: 49% !important;
        right: -245px !important;

        transform: translateY(-50%) !important;

        opacity: 0.38 !important;
        pointer-events: none !important;
    }

    .hero.hero-premium .hero-premium-content {
        position: relative;
        z-index: 20;
    }
}

/* HOUR SCOUT | FINAL PEARL WHITE INTERIOR + BLACK GOLD FRAME */
:root { --hs-pearl:#f8f6f1; --hs-ink:#211a14; --hs-gold:#b58a53; }
body { background:var(--hs-pearl); color:var(--hs-ink); }
body .watch-showcase, body .introduction, body .home-brands, body .home-collections { background:var(--hs-pearl) !important; color:var(--hs-ink) !important; }
body .home-brands h2,body .home-brands-heading p,body .brand-scroll-item,body .home-brands-action a {color:var(--hs-ink) !important;}
body .home-brands-heading p {color:#74695d !important;}
body .home-brands .section-kicker,body .home-brands h2 em {color:var(--hs-gold) !important;}
body .brand-marquee {border-color:rgba(150,111,66,.18) !important;}
body .brand-marquee::before {background:linear-gradient(90deg,var(--hs-pearl) 10%,rgba(248,246,241,0)) !important;}
body .brand-marquee::after {background:linear-gradient(270deg,var(--hs-pearl) 10%,rgba(248,246,241,0)) !important;}
body .brand-scroll-item:hover {color:var(--hs-gold) !important;}
body .home-brands-action a {border-color:var(--hs-gold) !important;}
body .home-collections .collections-head p {color:#74695d !important;}
body .site-header {background:rgba(6,5,4,.95);border-bottom:1px solid rgba(201,161,107,.22);}
body .site-header.scrolled {background:rgba(6,5,4,.96) !important;}
body .hero.hero-premium {color:#f8f5ef !important;}
body .hs-site-footer {background:radial-gradient(ellipse at 80% 20%,rgba(137,89,40,.24),transparent 52%),linear-gradient(120deg,#080706,#1d130c 70%,#080706);color:#f4eee5;padding:75px max(6%,calc((100vw - 1420px)/2)) 30px;border-top:1px solid rgba(201,161,107,.38);}
.hs-footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:55px;align-items:start;}
.hs-footer-title {font-family:var(--serif);font-size:clamp(32px,3vw,47px);font-weight:500;letter-spacing:.08em;color:#d0a66d;}
.hs-footer-tagline {font-family:var(--serif);font-size:22px;color:#f0e8de;margin:8px 0 15px;}
.hs-footer-heading {color:#d0a66d;font-size:10px;letter-spacing:.26em;margin:12px 0 22px;}
.hs-footer-text,.hs-footer-links a {font-size:12px;line-height:2.4;color:#c6b9a9;}
.hs-footer-links {display:flex;flex-direction:column;align-items:start;}
.hs-footer-links a:hover {color:#d0a66d;}
.hs-footer-bottom {border-top:1px solid rgba(201,161,107,.2);margin-top:60px;padding-top:23px;font-size:10px;letter-spacing:.08em;color:#a89b8d;}
@media(max-width:700px){.hs-footer-grid{grid-template-columns:1fr;gap:25px}.hs-site-footer{padding:55px 7% 25px}.hs-footer-bottom{margin-top:35px}}



/* HOUR SCOUT - SECTION 2 ABOUT US */
.hs-about {
  background: #f7f4ee;
  color: #221a14;
  padding: 115px 7%;
  position: relative;
  overflow: hidden;
}

.hs-about-inner {
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px 90px;
}

.hs-about-label {
  color: #a77b42;
  font-size: 11px;
  letter-spacing: 4px;
  font-weight: 600;
}

.hs-about h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px, 5.5vw, 86px);
  font-weight: 400;
  line-height: 1.05;
  margin: 25px 0 0;
  color: #221a14;
}

.hs-about h2 em {
  color: #b18a55;
  font-weight: 400;
}

.hs-about-content {
  align-self: center;
}

.hs-about-content p {
  font-size: 15px;
  line-height: 2;
  color: #51483e;
  margin: 0 0 20px;
}

.hs-about-stats {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d5c4ac;
  padding-top: 35px;
  margin-top: 25px;
}

.hs-about-stats div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hs-about-stats strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 52px;
  font-weight: 400;
  color: #a77b42;
}

.hs-about-stats span {
  font-size: 10px;
  letter-spacing: 2px;
  color: #665c50;
}

@media (max-width: 768px) {
  .hs-about {
    padding: 75px 7%;
  }

  .hs-about-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hs-about-stats {
    grid-column: 1;
    gap: 15px;
  }

  .hs-about-stats strong {
    font-size: 36px;
  }

  .hs-about-stats span {
    font-size: 8px;
    letter-spacing: 1px;
  }
}


/* HOUR SCOUT - ABOUT US MAIN TITLE */
.hs-about-title {
    text-align: center;
    width: 100%;
    margin: 0 auto 75px;
}

.hs-about .hs-about-title h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(65px, 8vw, 115px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 5px;
    color: #211b17;
    margin: 0;
}

.hs-about-title h2 span {
    color: #b18a55;
}

.hs-about-title-line {
    width: 75px;
    height: 1px;
    background: #b18a55;
    margin: 25px auto 0;
}

@media (max-width: 768px) {
    .hs-about-title {
        margin-bottom: 45px;
    }
}
/* HOUR SCOUT - FOUR WATCH PHOTO SHOWCASE */

.watch-stage .watch-slide {
    overflow: hidden;
    border-radius: 20px;
}

.watch-stage .watch-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 20px;
}

/* Hide old transparent-watch glow */
.watch-stage .watch-halo {
    display: none !important;
}



/* ==========================================
   HOUR SCOUT — PREMIUM COLLECTION CARDS
   ========================================== */

.home-collections .collections-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.home-collections .collection-card {
    min-height: 540px;
    padding: 30px;
    border: 1px solid rgba(188,155,111,0.28);
    background-color: #151210;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

/* Remove old circular placeholder artwork */
.home-collections .collection-card::before {
    background: none !important;
}

/* Keep the bottom text readable */
.home-collections .collection-card::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 43%,
        rgba(0,0,0,0.35) 62%,
        rgba(0,0,0,0.94) 100%
    );
    pointer-events: none;
}

/* Watch photos */
.home-collections .collection-card img {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 86%;
    height: 330px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 18px 18px rgba(0,0,0,0.35));
    transition: transform 0.5s ease;
}

/* Elegant hover */
.home-collections .collection-card:hover {
    transform: translateY(-8px);
    border-color: #bc9b6f;
    box-shadow: 0 22px 45px rgba(0,0,0,0.18);
}

.home-collections .collection-card:hover img {
    transform: translateX(-50%) scale(1.06);
}

/* Text always in front */
.home-collections .collection-copy {
    position: relative;
    z-index: 3;
}

.home-collections .collection-index {
    z-index: 4;
}

/* Tablet */
@media (max-width: 1100px) {
    .home-collections .collections-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 760px) {
    .home-collections .collections-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        overflow: visible;
    }

    .home-collections .collection-card {
        min-height: 480px;
    }

    .home-collections .collection-card img {
        height: 290px;
    }
}


/* HOUR SCOUT — OUR STORES */

.hs-our-stores {
    background: #f8f5f0;
    padding: 110px 6%;
}

.hs-stores-heading {
    text-align: center;
    margin-bottom: 65px;
}

.hs-stores-kicker {
    color: #ad8550;
    font-size: 11px;
    letter-spacing: 5px;
    font-weight: 600;
}

.hs-stores-heading h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(56px, 7vw, 100px);
    font-weight: 400;
    color: #211a15;
    margin: 15px 0;
    line-height: 1.1;
}

.hs-stores-heading h2 em {
    color: #b48b55;
    font-weight: 400;
}

.hs-stores-gold-line {
    width: 75px;
    height: 1px;
    background: #b48b55;
    margin: 25px auto;
}

.hs-stores-heading p {
    color: #746b61;
    font-size: 16px;
    line-height: 1.8;
}

.hs-stores-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px;
    max-width: 1400px;
    margin: 0 auto;
}

.hs-store-card {
    background: #fff;
    border: 1px solid #e8dfd3;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hs-store-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(40, 30, 20, 0.12);
}

.hs-store-photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.hs-store-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hs-store-card:hover img {
    transform: scale(1.04);
}

.hs-store-details {
    padding: 27px 30px 32px;
}

.hs-store-details span {
    font-size: 10px;
    letter-spacing: 3px;
    color: #b48b55;
}

.hs-store-details h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #211a15;
    margin: 10px 0 0;
}

@media (max-width: 700px) {
    .hs-our-stores {
        padding: 70px 5%;
    }

    .hs-stores-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hs-store-details {
        padding: 22px;
    }

    .hs-store-details h3 {
        font-size: 27px;
    }
}


/* HOUR SCOUT — FOOTER CONTACT */

.hs-footer-contact a {
    color: #c9beb0;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.hs-footer-contact a:hover {
    color: #c7a16a;
}

.hs-footer-contact p {
    margin: 0 0 14px;
}

.hs-footer-contact {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hs-site-footer .hs-footer-contact {
    margin-top: 24px;
}

.hs-site-footer .hs-footer-contact h3 {
    color: #c7a16a;
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.hs-site-footer .hs-footer-contact a {
    color: #c9beb0;
    text-decoration: none;
}

.hs-site-footer .hs-footer-contact a:hover {
    color: #c7a16a;
}


/* HOUR SCOUT — 5 Collections in One Row */
@media (min-width: 1100px) {
    .home-collections .collections-grid {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .home-collections .collection-card {
        min-width: 0;
    }

    .home-collections .hs-collection-watch {
        max-width: 90%;
        object-fit: contain;
    }

    .home-collections .collection-copy h3 {
        font-size: clamp(22px, 2vw, 32px);
    }
}


/* HOUR SCOUT — HEADER NAVIGATION FIX */
.site-header .header-inner {
    display: flex;
    align-items: center;
}

.site-header .desktop-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 38px;
}

.site-header .desktop-nav a {
    white-space: nowrap;
}