.public-hero.public-hero-interactive {
    --watch-shift-x: 0px;
    --watch-shift-y: 0px;
    min-height: clamp(650px, calc(100vh - 92px), 900px);
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 80px clamp(24px, 7vw, 110px);
    color: #f7f2e8;
    background: #080706;
    isolation: isolate;
}

.hero-watch-background {
    position: absolute;
    z-index: -3;
    inset: 0;
    overflow: hidden;
    background: #060606;
    transform: translate3d(var(--watch-shift-x), var(--watch-shift-y), 0);
    transition: transform .7s cubic-bezier(.2, .75, .25, 1);
    will-change: transform;
}

.hero-watch-ambient {
    position: absolute;
    inset: -4%;
    width: 108%;
    height: 108%;
    object-fit: cover;
    object-position: right center;
    filter: blur(24px) brightness(.42) saturate(.72);
    transform: scale(1.04);
}

.hero-watch-face {
    position: absolute;
    inset: 0 0 0 6%;
}

.hero-watch-photo,
.hero-watch-live-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-watch-photo {
    object-fit: cover;
    object-position: right center;
}

.hero-watch-live-layer {
    overflow: visible;
}

.live-watch-hand {
    filter: url(#rw-hand-shadow);
}

.watch-hand-raster { pointer-events: none; }
.watch-hand-raster-hour { filter: contrast(1.08) brightness(.9); }
.watch-hand-raster-minute { filter: contrast(1.12) brightness(.94); }

.live-watch-seconds {
    filter: url(#rw-seconds-shadow);
}

.watch-hand-raster-seconds { filter: contrast(1.14) brightness(1.12); }

.live-watch-pinion circle:first-child {
    fill: url(#rw-hand-light);
    stroke: #191b1c;
    stroke-width: 1.3;
    filter: url(#rw-hand-shadow);
}

.live-watch-pinion circle:last-child {
    fill: #202124;
    stroke: rgba(222, 221, 215, .62);
    stroke-width: .9;
}

.hero-watch-live-layer [data-live-watch-date] {
    fill: #e7e6e2;
    font: italic 600 47px/1 "Helvetica Neue", Arial, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
    letter-spacing: -2.5px;
    paint-order: stroke fill;
    stroke: rgba(0, 0, 0, .94);
    stroke-width: 1.75px;
    stroke-linejoin: round;
    opacity: .9;
    filter: blur(.22px) drop-shadow(0 0 .72px rgba(0, 0, 0, .95)) drop-shadow(.55px 1.15px 1.35px rgba(0, 0, 0, .82));
}

.hero-watch-shade {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 5, 4, .96) 0%, rgba(5, 5, 4, .88) 30%, rgba(5, 5, 4, .55) 49%, rgba(5, 5, 4, .08) 76%), linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 48%);
    pointer-events: none;
}

.public-hero-interactive .hero-copy {
    position: relative;
    z-index: 2;
    width: min(690px, 58vw);
    max-width: 690px;
}

.public-hero-interactive .public-kicker { color: #d3af70; }
.public-hero-interactive h1 { color: #f5efe4; text-shadow: 0 3px 28px rgba(0, 0, 0, .48); }
.public-hero-interactive .hero-copy > p:not(.public-kicker) { color: #d2ccc1; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.public-hero-interactive .public-primary { background: #b58d4d; color: #12100d; }
.public-hero-interactive .public-secondary { border-color: #d0ae72; color: #f7f2e8; background: rgba(10, 9, 7, .28); backdrop-filter: blur(8px); }
.public-hero-interactive .public-trust { color: #c6beb2; }

.hero-live-date-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .public-hero.public-hero-interactive { min-height: 720px; padding: 72px 6vw; }
    .public-hero-interactive .hero-copy { width: min(570px, 64vw); }
    .hero-watch-shade { background: linear-gradient(90deg, rgba(5, 5, 4, .96) 0%, rgba(5, 5, 4, .84) 44%, rgba(5, 5, 4, .24) 78%), linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 60%); }
}

@media (max-width: 620px) {
    .public-hero.public-hero-interactive { min-height: 760px; align-items: flex-end; padding: 78px 20px 70px; }
    .public-hero-interactive .hero-copy { width: 100%; max-width: none; }
    .hero-watch-face { left: 0; }
    .hero-watch-shade { background: linear-gradient(0deg, rgba(5, 5, 4, .98) 5%, rgba(5, 5, 4, .88) 45%, rgba(5, 5, 4, .18) 88%), linear-gradient(90deg, rgba(5, 5, 4, .5), transparent 70%); }
    .public-hero-interactive h1 { font-size: 47px; }
    .public-hero-interactive .hero-copy > p:not(.public-kicker) { font-size: 16px; }
    .public-hero-interactive .hero-ctas > a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-watch-background { transition: none; }
}