/* Greenwich Mercantile · homepage hero: the brand-motion film (clean cut) behind the header and first section.
   Colours: navy #0A1628 and cream #FAFAF8 only (internal-tools/shared/base.css). The film is progressive
   enhancement: the navy field + poster always render; hero-video.js adds the video when motion and data allow. */
:root { --gm-nav-h: 80px; }
@media (max-width: 560px) { :root { --gm-nav-h: 72px; } }

/* --- hero --- */
.hero.hero--video {
    background: var(--gm-navy);
    color: var(--gm-cream);
    min-height: 100vh !important; min-height: 100svh !important;
    margin-top: calc(-1 * var(--gm-nav-h));
    padding: calc(var(--gm-nav-h) + 4rem) 2rem 4.5rem;
    border-bottom: 1px solid rgba(250,250,248,0.08);
}
.hero.hero--video::before { display: none; }          /* the film replaces the drifting gradient */
.hero.hero--video .hero__grid { display: none; }       /* the film carries its own 60px grid */
.hero__media {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background: var(--gm-navy) url("/assets/brand/motion/hero-loop-v1-poster.webp") center / cover no-repeat;
}
.hero__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
    opacity: 0; transition: opacity 0.9s ease;
}
.hero--video.is-playing .hero__video { opacity: 1; }
.hero__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(10,22,40,0.66) 0%, rgba(10,22,40,0.24) 30%, rgba(10,22,40,0.24) 62%, rgba(10,22,40,0.74) 100%),
        radial-gradient(ellipse 60% 56% at 50% 52%, rgba(10,22,40,0.50), rgba(10,22,40,0) 72%);
}
.hero.hero--video .hero__inner { position: relative; z-index: 1; }
.hero.hero--video h1 { color: var(--gm-cream); }
.hero.hero--video h1 em {
    color: var(--gm-cream);
    background-image: linear-gradient(90deg, rgba(250,250,248,0.85), rgba(250,250,248,0.85));
}
.hero.hero--video .hero__tag { color: rgba(250,250,248,0.82) !important; }
.hero.hero--video .gm-hero-book__btn { background: var(--gm-cream); color: var(--gm-navy); border-color: var(--gm-cream); }
.hero.hero--video .gm-hero-book__btn:hover { background: #ffffff; color: var(--gm-navy); box-shadow: 0 18px 36px -18px rgba(0,0,0,0.65); }
.hero.hero--video .gm-hero-google { background: rgba(250,250,248,0.05); color: var(--gm-cream); border-color: rgba(250,250,248,0.38); }
.hero.hero--video .gm-hero-google:hover { background: rgba(250,250,248,0.1); border-color: var(--gm-cream); box-shadow: none; }
.hero.hero--video .gm-hero-book__note { color: rgba(250,250,248,0.62); }
@media (max-width: 560px) {
    .hero.hero--video { padding: calc(var(--gm-nav-h) + 3rem) 1.25rem 3.5rem !important; }
    .hero__video { object-position: 50% 48%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }                    /* the poster still stands in */
}

/* --- header over the film: transparent, cream, until the hero has scrolled past --- */
html.gm-hero-video nav {
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, padding 0.4s var(--gm-ease, ease);
}
html.gm-hero-video:not(.gm-hero-past) nav,
html.gm-hero-video:not(.gm-hero-past) nav.is-scrolled {
    background: transparent; border-bottom-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.gm-hero-video:not(.gm-hero-past) .nav-link:not(.cta-button-nav) { color: var(--gm-cream); }
html.gm-hero-video:not(.gm-hero-past) .nav-link:not(.cta-button-nav)::after { background: var(--gm-cream); }
html.gm-hero-video:not(.gm-hero-past) .cta-button-nav { background: var(--gm-cream); color: var(--gm-navy); border-color: var(--gm-cream); }
html.gm-hero-video:not(.gm-hero-past) .gm-hamburger { color: var(--gm-cream); }
.nav-logo img.nav-logo__light { display: none; }
html.gm-hero-video:not(.gm-hero-past) .nav-logo img.nav-logo__dark { display: none; }
html.gm-hero-video:not(.gm-hero-past) .nav-logo img.nav-logo__light { display: block; }

/* --- light film review: ?film=light --- */
html.gm-hero-light .hero.hero--video {
    background: var(--gm-cream);
    color: var(--gm-navy);
    border-bottom-color: rgba(10,22,40,0.10);
}
html.gm-hero-light .hero__media {
    background-color: var(--gm-cream);
    background-image: url("/assets/brand/motion/hero-loop-v1-light-poster.webp");
}
html.gm-hero-light .hero__scrim {
    background:
        linear-gradient(180deg, rgba(250,250,248,0.54) 0%, rgba(250,250,248,0.12) 30%, rgba(250,250,248,0.10) 62%, rgba(250,250,248,0.64) 100%),
        radial-gradient(ellipse 60% 56% at 50% 52%, rgba(250,250,248,0.24), rgba(250,250,248,0) 72%);
}
html.gm-hero-light .hero.hero--video h1,
html.gm-hero-light .hero.hero--video h1 em { color: var(--gm-navy); }
html.gm-hero-light .hero.hero--video h1 em {
    background-image: linear-gradient(90deg, rgba(10,22,40,0.78), rgba(10,22,40,0.78));
}
html.gm-hero-light .hero.hero--video .hero__tag { color: rgba(10,22,40,0.78) !important; }
html.gm-hero-light .hero.hero--video .gm-hero-book__btn {
    background: var(--gm-navy); color: var(--gm-cream); border-color: var(--gm-navy);
}
html.gm-hero-light .hero.hero--video .gm-hero-book__btn:hover {
    background: #000000; color: var(--gm-cream); box-shadow: 0 18px 36px -18px rgba(10,22,40,0.48);
}
html.gm-hero-light .hero.hero--video .gm-hero-google {
    background: rgba(250,250,248,0.42); color: var(--gm-navy); border-color: rgba(10,22,40,0.30);
}
html.gm-hero-light .hero.hero--video .gm-hero-google:hover {
    background: rgba(250,250,248,0.72); border-color: var(--gm-navy);
}
html.gm-hero-light .hero.hero--video .gm-hero-book__note { color: rgba(10,22,40,0.62); }
html.gm-hero-light.gm-hero-video:not(.gm-hero-past) .nav-link:not(.cta-button-nav),
html.gm-hero-light.gm-hero-video:not(.gm-hero-past) .gm-hamburger { color: var(--gm-navy); }
html.gm-hero-light.gm-hero-video:not(.gm-hero-past) .nav-link:not(.cta-button-nav)::after { background: var(--gm-navy); }
html.gm-hero-light.gm-hero-video:not(.gm-hero-past) .cta-button-nav {
    background: var(--gm-navy); color: var(--gm-cream); border-color: var(--gm-navy);
}
html.gm-hero-light.gm-hero-video:not(.gm-hero-past) .nav-logo img.nav-logo__light { display: none; }
html.gm-hero-light.gm-hero-video:not(.gm-hero-past) .nav-logo img.nav-logo__dark { display: block; }