/* ==========================================================================
   Just in time Watches - the front page
   ==========================================================================

   The homepage, rebuilt from the reference the shopkeeper supplied: a clone of
   the Vacheron Constantin front page captured at 1440 / 1024 / 390 with the
   computed styles recorded. Every measurement below came off that capture
   rather than out of anyone's judgement, which is why the numbers are odd -
   713px, 4.0625rem, 12.7656px. They are the source's.

   Three things are deliberately NOT copied.

   The footer: the shopkeeper asked for it to stay ours.

   The breakpoints: 769px and 1281px, which are the source's and not the ones
   the rest of this stylesheet uses. Mixing them would be worse - a section
   built to a 769px cut that reflows at 900px is a section that reflows twice.

   The typefaces: Prelo and Sohne are licensed faces, supplied with the
   reference. They are installed here because the shopkeeper supplied them and
   asked for the page to match; whether this shop is licensed to serve them is
   the shopkeeper's to settle with the foundries, and the theme still falls
   back to its own stack if the files are ever pulled.

   Sections:
     1.  Faces
     2.  Tokens
     3.  Grid
     4.  Eyebrow, links, glyphs
     5.  The opening film
     6.  The collections carousel
     7.  Full-bleed banners
     8.  Text and image
     9.  The boutique list
     10. Motion and reduced motion
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Faces

   Loaded from disk rather than a CDN: these are the files the reference
   shipped with, and a request to a foundry's server is a request this shop
   has no account for. font-display: swap so a slow face never blanks the
   page - the fallback stacks are chosen to be close in width so the reflow
   when the real face lands is small.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Prelo';
    src: url('../fonts/vc/prelo-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prelo';
    src: url('../fonts/vc/prelo-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sohne Buch';
    src: url('../fonts/vc/sohne-buch-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sohne Buch';
    src: url('../fonts/vc/sohne-buch-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sohne Kraftig';
    src: url('../fonts/vc/sohne-kraftig-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sohne Leicht';
    src: url('../fonts/vc/sohne-leicht-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* The brand glyph font. Codepoints are the originals, so the malt arrow, the
   maltese cross and the carousel arrows are the shapes the reference draws
   rather than lookalikes from an icon set.

   font-display: block, not swap: a glyph font has no sensible fallback -
   swapping would paint a tofu box or a stray letter where an arrow belongs. */
@font-face {
    font-family: 'vac-icomoon';
    src: url('../fonts/vc/vac-icomoon.woff') format('woff'),
         url('../fonts/vc/vac-icomoon.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}


/* --------------------------------------------------------------------------
   2. Tokens

   The palette is already the theme's - it was derived from this same source
   earlier in the build, so --jt-ground is the reference's cream to the byte.
   What is new here is the geometry: the header height the fixed bar animates
   by, the grid inset and gutter, and the two easing curves.
   -------------------------------------------------------------------------- */

:root {
    /* The reference's two whites. --jt-paper is pure white; this one is the
       warm white it sets type in over imagery. */
    --vc-white: #FFFDFB;

    /* Hairlines here are translucent brown rather than the theme's solid
       cream-brown, because they cross both the cream ground and photographs. */
    --vc-rule: rgba(119, 98, 81, 0.3);
    --vc-rule-strong: rgb(119, 98, 81);

    --vc-header-h: 86px;
    --vc-header-h-mobile: 71px;

    --vc-gutter: 20px;
    --vc-inset: 48px;

    /* Two curves, both the source's. --vc-ease is the general one; the card
       curve is flatter for longer and then snaps, which is what makes the
       carousel hover read as a cross-fade rather than a slide. */
    --vc-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --vc-ease-card: cubic-bezier(0, 0, 0, 0.95);

    /* Carousel slide width. One value, two breakpoints, so the arrow step and
       the snap width can never disagree with the card. */
    --vc-slide: 320px;
}

@media (min-width: 769px) and (max-width: 1280px) {
    :root {
        --vc-gutter: 42px;
        --vc-inset: 25px;
    }
}

@media (max-width: 768px) {
    :root {
        --vc-gutter: 16px;
        --vc-inset: 20px;
    }
}

@media (min-width: 769px) {
    :root { --vc-slide: 380px; }
}


/* --------------------------------------------------------------------------
   3. Grid

   Twelve columns above 769px, six below. Content width is the viewport less
   twice the inset; the max-width is the source's and only bites on displays
   wider than about 2700px.
   -------------------------------------------------------------------------- */

.vc-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--vc-gutter);
    padding-inline: var(--vc-inset);
    max-width: 2660px;
    margin-inline: auto;
    width: 100%;
}

@media (max-width: 768px) {
    .vc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   4. Eyebrow, links, glyphs
   -------------------------------------------------------------------------- */

/* The eyebrow above every section heading. 2.4px of tracking on 12px type is
   a fifth of an em - wide enough to read as a label rather than as small
   body copy. */
.vc-tagline {
    font-family: 'Sohne Kraftig', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 13.2px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

/* One glyph from the brand font. The caller sets the size and the colour is
   inherited, so the same span works white over a photograph and brown on the
   cream ground. */
.vc-icon::before {
    font-family: 'vac-icomoon';
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vc-icon--malt::before      { content: '\e902'; }  /* the downward malt arrow */
.vc-icon--arrow-left::before  { content: '\e903'; }
.vc-icon--arrow-right::before { content: '\e906'; }

/* The house mark.

   What stood here was one glyph of the reference's own icon font - the
   maltese cross, the emblem of the maison the front page was drawn from. It
   is their trademark and not ours to print, so it is gone from the font map
   above and nothing can reach it any more.

   This is the shop's own: the four indices at twelve, three, six and nine
   from the dial inside the logo's pin. Same job as the cross - a small
   geometric flourish that fades in beside a link or over a card - and at
   ten pixels it reads more clearly than the cross did.

   Drawn as a mask rather than a background image so it takes currentColor
   exactly as the font glyph did. The same span has to work white over a
   photograph and brown on the cream ground, and a two-colour SVG would need
   two files and a rule to choose between them.

   Named for the dial index it is, not "mark": .jt-mark is already the header's
   logo anchor, and a second rule of that name would have given the logo a
   one-em mask. */
:root {
    --jt-index: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10.5 0h3v7.2h-3zM10.5 16.8h3V24h-3zM0 10.5h7.2v3H0zM16.8 10.5H24v3h-7.2z'/%3E%3C/svg%3E");
}

.jt-index {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--jt-index) center / contain no-repeat;
            mask: var(--jt-index) center / contain no-repeat;
}

/* The lower of the two arrows on a card is the same glyph turned over. */
.vc-icon--flip { display: inline-block; transform: rotate(180deg); }

/* The CTA underline: a rail at 30% with a full-strength bar growing over it.
   The source animates width 0 -> 100%; this scales a full-width bar from the
   left instead - identical for a 1px rule, but composited rather than
   re-laid-out on every frame of an 800ms transition. */
.vc-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 12px;
    padding-left: 0;
    text-decoration: none;
    color: inherit;
    transition: padding-left 0.8s var(--vc-ease);
}

.vc-link::before,
.vc-link::after {
    content: '';
    position: absolute;
    left: -1px;
    bottom: -1px;
    height: 1px;
    right: 1px;
    background-color: currentColor;
}

.vc-link::before { opacity: 0.3; }

.vc-link::after {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s var(--vc-ease);
}

.vc-link:hover::after,
.vc-link:focus-visible::after { transform: scaleX(1); }

/* On hover the label slides right and uncovers the cross parked under it. */
.vc-link__cross {
    position: absolute;
    left: 0;
    font-size: 10.8px;
    line-height: 13.2px;
    opacity: 0;
    transition: opacity 0.8s var(--vc-ease);
}

.vc-link:hover,
.vc-link:focus-visible { padding-left: 16px; }

.vc-link:hover .vc-link__cross,
.vc-link:focus-visible .vc-link__cross { opacity: 1; }

.vc-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
}


/* --------------------------------------------------------------------------
   5. The opening film

   One viewport tall, a looping muted video behind a scrim that is dark at
   both ends and clear across the middle. The copy sits on the bottom edge.
   -------------------------------------------------------------------------- */

.vc-hero {
    position: relative;
    height: 100svh;
    width: 100%;
    overflow: hidden;
}

.vc-hero__media,
.vc-hero__media video,
.vc-hero__media img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Two gradients rather than one three-stop: the source's own declaration, and
   it keeps the clear band exactly in the middle whatever the height. */
.vc-hero__scrim {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%),
        linear-gradient(360deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%);
}

.vc-hero__copy,
.vc-banner__copy {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--vc-white);
    padding: 56px 20px;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 769px) {
    .vc-hero__copy,
    .vc-banner__copy {
        max-width: 50%;
        width: 50%;
        padding: 56px;
    }
}

.vc-eyebrow {
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
    font-weight: 400;
}

.vc-eyebrow .vc-icon {
    display: block;
    font-size: 12px;
    padding-bottom: 16px;
}

.vc-hero__heading,
.vc-banner__heading {
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 33.6px;
    font-weight: 400;
    margin: 0;
    color: inherit;
}

@media (min-width: 769px) {
    .vc-hero__heading,
    .vc-banner__heading {
        font-size: 48px;
        line-height: 50.4px;
    }
}

.vc-cta {
    display: flex;
    justify-content: center;
    padding-top: 56px;
    padding-bottom: 8px;
}


/* --------------------------------------------------------------------------
   6. The collections carousel

   A scroll-snapping track rather than a carousel library. The source ships
   Swiper but uses none of it beyond click-to-step and native dragging, both
   of which overflow-x plus scroll-snap already do - and do with a real
   scrollbar gesture on a trackpad, which Swiper does not.
   -------------------------------------------------------------------------- */

.vc-collections {
    position: relative;
    width: 100%;
    overflow-x: clip;
}

@media (min-width: 769px) {
    .vc-collections { min-height: 100vh; }
}

/* The one grid on the page with no gutter. */
.vc-collections__grid {
    gap: 0;
    padding-block: 24px;
}

@media (min-width: 769px) {
    .vc-collections__grid { padding-block: 96px; }
}

.vc-collections__head {
    grid-column: span 6;
    margin-bottom: 16px;
    text-align: center;
}

@media (min-width: 769px) {
    .vc-collections__head {
        grid-column: 4 / span 6;
        margin-bottom: 0;
        padding-bottom: 96px;
    }
}

.vc-collections__head .vc-eyebrow {
    align-items: center;
    color: var(--jt-ink-muted);
}

.vc-collections__heading {
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 26.4px;
    font-weight: 400;
    color: var(--jt-ink);
    margin: 0;
}

@media (min-width: 769px) {
    .vc-collections__heading { font-size: 32px; line-height: 33.6px; }
}

@media (min-width: 1281px) {
    .vc-collections__heading { font-size: 40px; line-height: 42px; }
}

.vc-collections__slider {
    position: relative;
    grid-column: span 6;
    width: 100%;
}

@media (min-width: 769px) {
    .vc-collections__slider { grid-column: span 12; }
}

/* The two rules bleed past the grid inset to the full page width. */
.vc-collections__rule {
    pointer-events: none;
    position: absolute;
    left: calc(-1 * var(--vc-inset));
    width: calc(100% + 2 * var(--vc-inset));
    height: 1px;
    background: var(--vc-rule);
    display: none;
}

@media (min-width: 769px) {
    .vc-collections__rule { display: block; }
}

.vc-collections__rule--top { top: 0; }
.vc-collections__rule--bottom { bottom: 0; }

/* Above 769px the arrows float over the top rule at the right-hand end;
   below it they drop into flow and gain the named slide between them. */
.vc-collections__nav { z-index: 10; width: 100%; }

@media (min-width: 769px) {
    .vc-collections__nav {
        position: absolute;
        top: -4.0625rem;
        right: 0;
        width: 4.1875rem;
    }
}

.vc-collections__nav-row {
    display: flex;
    justify-content: space-between;
    padding-block: 24px;
}

.vc-collections__arrow {
    display: flex;
    height: 68px;
    width: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: var(--jt-ink);
    cursor: pointer;
    transition: opacity 300ms var(--vc-ease);
}

@media (min-width: 769px) {
    .vc-collections__arrow { height: 17px; }
}

.vc-collections__arrow[disabled] { opacity: 0.5; cursor: default; }
.vc-collections__arrow .vc-icon { font-size: 16px; line-height: 1; }

/* The name of the slide the track has settled on. Mobile only. */
.vc-collections__current {
    display: flex;
    flex: 1;
    justify-content: center;
}

@media (min-width: 769px) {
    .vc-collections__current { display: none; }
}

.vc-collections__current-inner {
    display: flex;
    height: 68px;
    width: 288.4px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.vc-collections__current-inner .vc-icon { font-size: 7px; line-height: 1; }

.vc-collections__current-name {
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 400;
    color: var(--jt-ink);
}

.vc-collections__track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.vc-collections__track::-webkit-scrollbar { display: none; }

.vc-slide {
    position: relative;
    display: flex;
    width: var(--vc-slide);
    flex-shrink: 0;
    flex-direction: column;
    scroll-snap-align: start;
    margin-right: 8px;
    height: 600.594px;
}

.vc-slide:last-child { margin-right: 0; }

@media (min-width: 769px) {
    .vc-slide {
        padding-block: 24px;
        margin-inline: 16px;
        height: 648.594px;
    }
    .vc-slide:first-child { margin-left: 0; }
    .vc-slide:last-child { margin-right: 0; }
}

/* --- one collection ---------------------------------------------------- */

.vc-card {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    background: var(--jt-ground-raised);
    padding: 8px 8px 32px;
}

@media (min-width: 769px) {
    .vc-card { padding: 16px; }
}

/* The whole card is the link, laid over everything but sitting under nothing. */
.vc-card__hit {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.vc-card__hit:focus-visible {
    outline: 2px solid var(--jt-ink);
    outline-offset: -4px;
}

/* The packshot floats in the space above the copy and fades out on hover. */
.vc-card__packshot {
    position: relative;
    min-height: 0;
    flex: 1;
    padding: 24px;
    opacity: 1;
    backface-visibility: hidden;
    transition: transform 0.6s var(--vc-ease-card), opacity 0.4s var(--vc-ease-card);
}

/* Centred and capped rather than absolutely positioned at 50%.

   The reference pins its packshot with `top: 50%` and `max-height: 100%`,
   which works there because its packshots are transparent PNGs cut to a known
   ratio. A shop photographs its own stock at whatever ratio the supplier sent,
   and max-height on the picture does not constrain an <img> inside it - the
   tallest watch in the catalogue grew straight through the collection name
   underneath. A flex box with the cap on the image itself cannot. */
.vc-card__packshot {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A definite height, not max-height.

   `max-height: 100%` on the image resolves against this element, and an
   element whose own height is auto gives a percentage nothing to resolve
   against - so the tallest packshot in the catalogue ignored the cap and grew
   through the collection name. Making this box exactly the space the flex
   parent hands it gives the cap something real to measure. */
.vc-card__packshot picture {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    min-height: 0;
}

/* width and height auto, so a small photograph is never blown up to fill the
   card - the same rule every other image on this site follows. */
.vc-card__packshot img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    /* The cut-out is transparent, so no blend mode: multiply dulled every
       watch into the cream. Instead the watch glows in its own colour
       (--jt-glow, read off its cut-out) and casts a soft shadow. */
    filter: drop-shadow(0 0 26px color-mix(in srgb, var(--jt-glow, #e8c89a) 60%, transparent))
            drop-shadow(0 22px 20px rgba(40, 28, 16, 0.14));
}

/* The mood shot sits full-bleed behind everything and fades up on hover. */
.vc-card__mood {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: transform 1000ms var(--vc-ease-card), opacity 1000ms var(--vc-ease-card);
}

.vc-card__mood img { height: 100%; width: 100%; object-fit: cover; }

/* The scrim that makes the copy readable on whatever photograph is behind it.

   The reference puts white copy straight onto its mood shots and gets away
   with it because it commissions them dark and shoots the copy into the
   frame. A shop's second photograph is whatever the supplier sent - much of
   this catalogue is shot on white, and white copy on white is what the hover
   looked like.

   A gradient makes the contrast a property of the card. It is tall enough to
   cover the name, the mark and the CTA, opaque enough at the foot to clear
   4.5:1 against white text on the brightest photograph in the catalogue, and
   transparent at the top so the watch above it is not dimmed. */
.vc-card__scrim {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 62%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(10, 10, 12, 0.88) 0%,
        rgba(10, 10, 12, 0.72) 34%,
        rgba(10, 10, 12, 0.34) 68%,
        rgba(10, 10, 12, 0) 100%
    );
    transition: opacity 1000ms var(--vc-ease-card);
}

/* With no mood shot there is nothing to fade up to, so the packshot stays and
   the whole card darkens under it - the same treatment, reached differently,
   rather than a card that does nothing when every card beside it moves. */
.vc-card--nomood .vc-card__scrim {
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(10, 10, 12, 0.88) 0%,
        rgba(10, 10, 12, 0.72) 38%,
        rgba(10, 10, 12, 0.46) 72%,
        rgba(10, 10, 12, 0.34) 100%
    );
}

.vc-card__copy {
    position: relative;
    z-index: 1;
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 8px;
    text-align: center;
}

.vc-card__name {
    display: block;
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 22px;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--jt-ink);
    transition: opacity 600ms var(--vc-ease-card), color 600ms var(--vc-ease-card);
}

@media (min-width: 769px) {
    .vc-card__name { font-size: 24px; line-height: 25.2px; }
}

@media (min-width: 1281px) {
    .vc-card__name { font-size: 32px; line-height: 33.6px; }
}

/* Malt arrow at rest, maltese cross on hover, both pinned to the same top. */
.vc-card__mark {
    position: relative;
    margin-top: 2.5rem;
    display: flex;
    height: 1rem;
    width: 100%;
    justify-content: center;
}

.vc-card__mark .vc-icon,
.vc-card__mark .jt-index {
    position: absolute;
    top: 0;
    transition: opacity 1000ms var(--vc-ease-card);
}

.vc-card__mark .vc-icon--malt { display: block; font-size: 0.4375rem; opacity: 1; }
.vc-card__mark .jt-index       { font-size: 14px; opacity: 0; color: var(--vc-white); }

/* Parked 32px past the clipped bottom edge until hover lifts it into view. */
.vc-card__cta {
    width: 100%;
    padding-top: 32px;
    text-align: center;
    text-transform: uppercase;
    color: var(--jt-ink);
    font-family: 'Sohne Leicht', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 15.4px;
    font-weight: 500;
    letter-spacing: 1.4px;
    transform: translate3d(0, 32px, 0);
    transition: transform 600ms var(--vc-ease-card), color 600ms var(--vc-ease-card);
}

@media (min-width: 769px) {
    .vc-card__cta { position: absolute; bottom: 0; }

    .vc-card:hover .vc-card__packshot { opacity: 0; }
    .vc-card:hover .vc-card__mood { opacity: 1; transform: scale(1.05); }
    .vc-card:hover .vc-card__scrim { opacity: 1; }
    .vc-card:hover .vc-card__name { color: var(--vc-white); }
    .vc-card:hover .vc-card__mark .vc-icon--malt { opacity: 0; }
    .vc-card:hover .vc-card__mark .jt-index        { opacity: 1; }
    .vc-card:hover .vc-card__cta { transform: translateZ(0); color: var(--vc-white); }

    /* The packshot is the picture here, so it stays - lifted slightly, the way
       a piece is lifted out of a case to be looked at. Multiply has to go with
       it: the ground underneath is now dark, and multiply on a dark ground
       does not drop white out, it turns the whole watch to soot. */
    .vc-card--nomood:hover .vc-card__packshot {
        opacity: 1;
        transform: translate3d(0, -1.25rem, 0);
    }
}

/* Touch has no hover, so the copy never turns white and the scrim never
   arrives. Both stay as they are - the name reads dark on the card, which is
   the state the card was designed to be read in. */
@media (hover: none) {
    .vc-card__scrim { display: none; }
}

/* --- the terminal card ------------------------------------------------- */

.vc-card--all {
    background: var(--jt-ground-raised);
    padding: 16px;
    height: 100%;
    width: 100%;
    position: relative;
}

.vc-card--all .vc-card__frame {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(119, 98, 81, 0.5);
    padding: 24px;
    transition: border-color 600ms var(--vc-ease-card);
}

.vc-card--all:hover .vc-card__frame { border-color: var(--vc-rule-strong); }

.vc-card--all .vc-icon { display: block; font-size: 12px; }

.vc-card--all__title {
    margin-block: 72px;
    max-width: 298px;
    text-align: center;
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 35.2px;
    font-weight: 400;
    color: var(--jt-ink);
}

/* The two arrows drift apart on hover - wide screens only, where there is
   room for the movement to read as intent rather than as a jitter. */
.vc-card--all__top,
.vc-card--all__bottom { transition: transform 600ms var(--vc-ease-card); }

@media (min-width: 1281px) {
    .vc-card--all:hover .vc-card--all__top { transform: translateY(1.875rem); }
    .vc-card--all:hover .vc-card--all__bottom { transform: translateY(-1.875rem); }
}


/* --------------------------------------------------------------------------
   7. Full-bleed banners

   Art-directed media behind a scrim that darkens towards the bottom, with the
   copy anchored to the bottom edge. The image overfills by 15% and is moved
   against the scroll, so the frame never shows an edge.
   -------------------------------------------------------------------------- */

.vc-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: var(--vc-banner-h-m);
}

@media (min-width: 769px) {
    .vc-banner { height: var(--vc-banner-h-d); }
}

.vc-banner__media {
    position: absolute;
    inset: 0;
}

.vc-banner__media picture {
    position: absolute;
    inset: 0;
    display: block;
    height: 100%;
    width: 100%;
    transform: scale(1.15);
    will-change: transform;
}

.vc-banner__media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.vc-banner__scrim {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6));
}

.vc-banner__copy { z-index: 1; }


/* --------------------------------------------------------------------------
   8. Text and image

   Two columns above 769px, stacked below. The copy column holds two blocks
   back to back, centred as a pair rather than individually - which is why the
   title block carries the top padding and the content block the rest.
   -------------------------------------------------------------------------- */

.vc-feature {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    padding: 24px 20px;
}

@media (min-width: 769px) {
    .vc-feature {
        grid-template-columns: 1fr 1fr;
        padding: 0;
        height: 800px;
    }
}

@media (min-width: 1281px) {
    .vc-feature { height: 900px; }
}

.vc-feature__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vc-feature__block {
    margin-inline: auto;
    width: 100%;
    max-width: 460px;
    padding-inline: 20px;
}

@media (min-width: 769px) {
    .vc-feature__title { padding-top: 56px; }
}

.vc-feature__copy .vc-eyebrow {
    align-items: center;
    text-align: center;
    color: var(--jt-ink-muted);
}

.vc-feature__heading {
    text-align: center;
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 33.6px;
    font-weight: 400;
    color: var(--jt-ink);
    margin: 0;
}

@media (min-width: 769px) {
    .vc-feature__heading { font-size: 48px; line-height: 50.4px; }
}

.vc-feature__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-block: 40px;
}

@media (min-width: 769px) {
    .vc-feature__content { gap: 56px; padding-block: 56px; }
}

.vc-feature__body {
    text-align: center;
    font-family: 'Sohne Buch', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 400;
    color: var(--jt-ink);
    margin: 0;
}

.vc-feature__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 8px;
}

.vc-feature__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 5;
}

@media (min-width: 769px) {
    .vc-feature__media { height: 100%; aspect-ratio: auto; }
}

.vc-feature__media picture {
    position: absolute;
    inset: 0;
    display: block;
    height: 100%;
    width: 100%;
    transform: scale(1.15);
    will-change: transform;
}

.vc-feature__media img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/* --------------------------------------------------------------------------
   9. The boutique list

   A 7/5 split inside a ruled frame: a captioned photograph on the left, a
   title and a list of links on the right, pinned to opposite ends of the
   same height.
   -------------------------------------------------------------------------- */

.vc-boutique {
    padding: 24px 20px;
}

@media (min-width: 769px) {
    .vc-boutique { padding: 56px 48px; }
}

.vc-boutique__frame {
    border-block: 1px solid var(--vc-rule);
    padding-block: 56px;
}

@media (min-width: 769px) {
    .vc-boutique__frame { padding: 56px; }
}

.vc-boutique__banner {
    position: relative;
    grid-column: span 12;
    overflow: hidden;
    aspect-ratio: 5 / 4;
}

@media (min-width: 769px) {
    .vc-boutique__banner { grid-column: span 7; }
}

.vc-boutique__banner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* The heading is white, and the photograph under it is a lit shop window:
   without a scrim the words sat on the brightest part of the picture. The
   gradient is only under the copy, so the shopfront above it is not dimmed. */
.vc-boutique__banner-copy {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 24px;
    text-align: left;
    background: linear-gradient(
        to top,
        rgba(10, 10, 12, 0.82) 0%,
        rgba(10, 10, 12, 0.6) 45%,
        rgba(10, 10, 12, 0) 100%
    );
    padding-top: 96px;
}

@media (min-width: 769px) {
    .vc-boutique__banner-copy { padding: 56px; }
}

.vc-boutique__banner-heading {
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 33.6px;
    font-weight: 400;
    color: var(--vc-white);
    margin: 0;
}

@media (min-width: 769px) {
    .vc-boutique__banner-heading { font-size: 48px; line-height: 50.4px; }
}

.vc-boutique__text {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 769px) {
    .vc-boutique__text { grid-column: span 5; padding-top: 56px; }
}

.vc-boutique__title {
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 25.2px;
    font-weight: 400;
    color: var(--jt-ink);
    margin: 0;
}

@media (min-width: 769px) {
    .vc-boutique__title { font-size: 32px; line-height: 33.6px; }
}

.vc-boutique__body {
    font-family: 'Sohne Buch', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 400;
    color: var(--jt-ink);
    margin: 16px 0 0;
}

.vc-boutique__list {
    display: flex;
    flex-direction: column;
    padding: 40px 0 0;
    margin: 0;
    list-style: none;
}

.vc-boutique__row {
    height: 66px;
    border-block: 1px solid var(--vc-rule);
}

.vc-boutique__link {
    display: flex;
    height: 64px;
    align-items: center;
    padding-block: 24px;
    font-family: 'Sohne Buch', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-decoration: none;
    color: inherit;
}

/* Row hover: the two arrows slide in from either end after a beat, the label
   moves right, and the micro-label fades up. Wide screens only - at 1280 and
   below the row is too short for the travel to read as anything but noise. */
.vc-boutique__arrow {
    display: block;
    height: 7px;
    width: 12.7656px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.87, 0, 0.13, 1),
                transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
    color: var(--jt-ink-muted);
}

.vc-boutique__arrow .vc-icon { display: block; font-size: 7px; }
.vc-boutique__arrow--in  { transform: translateX(-12.7656px); padding-right: 4px; }
.vc-boutique__arrow--out { transform: translateX(12.7656px); }

.vc-boutique__label {
    transform: translateX(-11px);
    font-family: 'Sohne Buch', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    color: var(--jt-ink);
    transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

.vc-boutique__indicator {
    margin-left: auto;
    padding-right: 32px;
    font-family: 'Sohne Buch', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    line-height: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--jt-ink-muted);
    opacity: 0;
    transition: opacity 450ms cubic-bezier(0.87, 0, 0.13, 1);
}

@media (min-width: 1281px) {
    .vc-boutique__link:hover .vc-boutique__arrow,
    .vc-boutique__link:focus-visible .vc-boutique__arrow {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 130ms;
    }

    .vc-boutique__link:hover .vc-boutique__label,
    .vc-boutique__link:focus-visible .vc-boutique__label { transform: translateX(29px); }

    .vc-boutique__link:hover .vc-boutique__indicator,
    .vc-boutique__link:focus-visible .vc-boutique__indicator { opacity: 1; }
}


/* --------------------------------------------------------------------------
   10. Motion and reduced motion

   Everything above that moves does so on hover or on scroll. Someone who has
   asked their system for less of that gets the same page with the travel
   removed - not a different page, and never a page with content missing,
   which is what happens when a reveal is disabled rather than completed.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .vc-banner__media picture,
    .vc-feature__media picture {
        transform: scale(1.15) !important;
    }

    .vc-card__packshot,
    .vc-card__mood,
    .vc-card__scrim,
    .vc-card__name,
    .vc-card__cta,
    .vc-card__mark .vc-icon,
    .vc-card--all .vc-card__frame,
    .vc-card--all__top,
    .vc-card--all__bottom,
    .vc-boutique__arrow,
    .vc-boutique__label,
    .vc-boutique__indicator,
    .vc-link,
    .vc-link::after,
    .vc-link__cross {
        transition-duration: 1ms !important;
    }

    .vc-collections__track { scroll-behavior: auto; }
}


/* --------------------------------------------------------------------------
   11. The header over the film

   The front page opens with a full-viewport video, so the bar has to sit on
   it rather than above it: transparent, white type, no rule. Once the film
   has gone past it becomes the header every other page has.

   The class is added by script, so with JavaScript off the bar stays solid
   from the first frame - which is legible, just not the effect. The reverse
   default would put white type on a cream ground until a script ran.
   -------------------------------------------------------------------------- */

.jt-header--over-hero {
    position: fixed;
    inset-inline: 0;
    top: 0;
    background: transparent;
    border-bottom-color: transparent;
    color: var(--vc-white);
    transition: background-color 0.6s var(--vc-ease),
                border-color 0.6s var(--vc-ease),
                color 0.6s var(--vc-ease);
}

/* The bar is out of flow while it floats, so the film starts at the top of
   the page rather than below an 84px gap. */
.jt-header--over-hero + main .vc-hero,
.jt-header--over-hero ~ main .vc-hero { margin-top: calc(-1 * var(--jt-1)); }

.jt-header--over-hero .jt-nav a,
.jt-header--over-hero .jt-header__bar a,
.jt-header--over-hero .jt-icon-btn {
    color: var(--vc-white);
}

/* The logotype is a dark PNG. Over the film it is inverted to white; the
   filter is dropped the moment the bar turns solid, so the real artwork is
   what shows for the rest of the page. */
.jt-header--over-hero .jt-mark img {
    filter: brightness(0) invert(1);
    transition: filter 0.6s var(--vc-ease);
}

.jt-header--over-hero.is-past-hero {
    background: var(--jt-ground);
    border-bottom-color: var(--jt-hairline);
    color: var(--jt-ink);
}

.jt-header--over-hero.is-past-hero .jt-nav a,
.jt-header--over-hero.is-past-hero .jt-header__bar a,
.jt-header--over-hero.is-past-hero .jt-icon-btn {
    color: var(--jt-ink);
}

.jt-header--over-hero.is-past-hero .jt-mark img { filter: none; }

/* The spacers between sections. Two custom properties rather than a media
   query per instance, so every gap on the page is one rule. */
.vc-sep { height: var(--vc-sep-m); }

@media (min-width: 769px) {
    .vc-sep { height: var(--vc-sep-d); }
}


/* --------------------------------------------------------------------------
   12. The product page's film and closing banner

   Two sections the reference has on a watch's page that the theme did not.
   The film sits in ten of twelve columns rather than full bleed, which is what
   keeps it reading as a piece of film rather than as another banner.
   -------------------------------------------------------------------------- */

.vc-film { width: 100%; }

.vc-film__frame {
    margin-inline: auto;
    width: 100%;
    max-width: 2660px;
    padding-inline: 20px;
}

@media (min-width: 769px) {
    .vc-film__frame { padding-inline: 25px; }
}

@media (min-width: 1281px) {
    .vc-film__frame { padding-inline: 48px; }
}

.vc-film__stage {
    position: relative;
    width: 100%;
    padding-block: 20px;
}

@media (min-width: 769px) {
    .vc-film__stage {
        padding-block: 56px;
        width: 83.3333%;
        margin-inline: auto;
    }
}

.vc-film__video {
    display: block;
    height: 804px;
    width: 100%;
    background: #000;
    object-fit: cover;
}

@media (min-width: 769px) {
    .vc-film__video { height: 788px; }
}

/* Over the film without being in its way: the block ignores the pointer so
   the video's own controls stay reachable, and the link takes it back. */
.vc-film__copy {
    pointer-events: none;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 24px;
    color: var(--vc-white);
}

@media (min-width: 769px) {
    .vc-film__copy {
        bottom: 56px;
        max-width: 50%;
        padding: 56px;
    }
}

.vc-film__link { pointer-events: auto; }

.vc-film__heading {
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 35.2px;
    font-weight: 400;
    margin: 0;
    color: inherit;
}

@media (min-width: 769px) {
    .vc-film__heading { font-size: 48px; line-height: 50.4px; }
}

/* --- the closing banner ------------------------------------------------- */

.vc-contact { width: 100%; }

.vc-contact__rule {
    width: 100%;
    padding: 16px 20px;
}

@media (min-width: 769px) {
    .vc-contact__rule { padding-block: 20px; }
}

@media (min-width: 1281px) {
    .vc-contact__rule { padding-inline: 48px; }
}

.vc-contact__rule span {
    display: block;
    height: 1px;
    width: 100%;
    background: var(--vc-rule);
}

.vc-contact__wrap {
    margin-inline: auto;
    width: 100%;
    max-width: 2660px;
    padding-inline: 20px;
}

@media (min-width: 769px) {
    .vc-contact__wrap { padding-inline: 25px; }
}

@media (min-width: 1281px) {
    .vc-contact__wrap { padding-inline: 48px; }
}

.vc-contact__frame { padding: 20px; }

@media (min-width: 769px) {
    .vc-contact__frame { padding: 56px; }
}

.vc-contact__stage {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.vc-contact__stage img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (min-width: 769px) {
    .vc-contact__stage img {
        aspect-ratio: auto;
        height: 510.3px;
    }
}

/* Lower left, not centred: the reference sets this one flush so it reads as a
   caption on the photograph rather than as another centred banner. */
/* The scrim under the copy.

   White words on whatever photograph the shop has hung here: the boutique
   interior is pale marble and lit cases, and the heading disappeared into it.
   The gradient runs from the lower-left corner the copy sits in, and reaches
   only part-way up, so the picture itself is not dimmed. */
.vc-contact__stage::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 88%;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(10, 10, 12, 0.88) 0%,
        rgba(10, 10, 12, 0.74) 35%,
        rgba(10, 10, 12, 0.34) 68%,
        rgba(10, 10, 12, 0) 100%
    );
}

.vc-contact__copy {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 24px;
    color: var(--vc-white);
}

@media (min-width: 769px) {
    .vc-contact__copy { padding: 56px; max-width: 50%; }
}

.vc-contact__heading {
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 26.4px;
    font-weight: 400;
    margin: 0;
    color: inherit;
}

@media (min-width: 769px) {
    .vc-contact__heading { font-size: 40px; line-height: 42px; }
}

.vc-cta--left { justify-content: flex-start; }


/* The YouTube stand-in.

   A still with a play control over it, and no iframe until it is clicked.
   An embed written into the page on load contacts YouTube and sets its
   cookies for every visitor who scrolls past the section, which for a film
   most people never play is a lot of tracking for nothing. */
.vc-film__facade {
    position: relative;
    display: block;
    width: 100%;
    height: 804px;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}

@media (min-width: 769px) {
    .vc-film__facade { height: 788px; }
}

.vc-film__facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity var(--vc-ease) 400ms, transform 1s var(--vc-ease);
}

.vc-film__facade:hover img { opacity: 1; transform: scale(1.02); }

.vc-film__facade:focus-visible {
    outline: 2px solid var(--vc-white);
    outline-offset: -4px;
}

/* A ring with a triangle in it, drawn rather than shipped as an asset. */
.vc-film__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    transition: background-color 400ms var(--vc-ease), border-color 400ms var(--vc-ease);
}

.vc-film__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--vc-white);
}

.vc-film__facade:hover .vc-film__play,
.vc-film__facade:focus-visible .vc-film__play {
    background: rgba(0, 0, 0, 0.45);
    border-color: var(--vc-white);
}

/* Once swapped, the iframe fills the same box the still had. */
.vc-film__stage iframe {
    display: block;
    width: 100%;
    height: 804px;
    border: 0;
}

@media (min-width: 769px) {
    .vc-film__stage iframe { height: 788px; }
}

/* The carousel arrows were 16px wide: the width of the glyph, which is fine to
   look at and hard to hit with a thumb. 44px of target on touch screens, the
   glyph staying where it was - the negative margin gives back the width the
   row's space-between would otherwise use to push it inward. */
@media (pointer: coarse) {
    .vc-collections__arrow {
        width: 44px;
        margin-inline: -14px;
    }
}