/* ============================================================
   Homepage — candlelit room treatment
   ============================================================ */

/* --- HERO --- */
.vlj-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    text-align: center;
    padding: 140px clamp(20px, 5vw, 64px) 100px;
    isolation: isolate;
    background: var(--vlj-bg);
}

/* Out-of-focus dish photo as warm backdrop — heavily darkened so the
   visitor's eye reads "room, not plate". Acts as the noscript / video-load
   fallback layer; sits behind .vlj-hero__video at the same z-index slot. */
.vlj-hero__photo {
    position: absolute;
    inset: -10%;
    background-position: center;
    background-size: cover;
    filter: blur(34px) saturate(70%) brightness(.35) sepia(.22);
    opacity: .85;
    transform: scale(1.15);
    z-index: 0;
    animation: vljHeroDrift 24s ease-in-out infinite alternate;
}
@keyframes vljHeroDrift {
    0%   { transform: scale(1.15) translate(0, 0); }
    100% { transform: scale(1.22) translate(-1.5%, -1%); }
}

/* Wine-pour cinematic — replaces the still photo as the active backdrop.
   IMPORTANT: keep this element minimal. iOS Safari freezes <video> to a
   poster texture when filter / transform / will-change / animation are
   stacked on it. The warm-dim grade now lives on .vlj-hero__video-tint
   instead, and any subtle motion goes on the photo backdrop. */
.vlj-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: 0;
    pointer-events: none;
    /* Cinematic fade-in: poster (dish photo) sits underneath; once the
       video actually starts decoding frames, the .is-ready class triggers
       a 1.4s opacity + slight scale-in cross-fade to the wine pour.
       Reduce-motion users skip it entirely. */
    opacity: 0;
    -webkit-transform: translateZ(0) scale(1.025);
    transform: translateZ(0) scale(1.025);
    transition:
        opacity   1.4s cubic-bezier(.16, .68, .25, 1),
        transform 1.6s cubic-bezier(.16, .68, .25, 1);
}
.vlj-hero__video.is-ready {
    opacity: 1;
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .vlj-hero__video {
        opacity: 1;
        transform: translateZ(0);
        transition: none;
    }
}

/* Warm-dim tint sits above the video, below the sconces/veil/grain.
   Two passes: a warm mahogany wash (color-mix) + a darken/dim layer. */
.vlj-hero__video-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        /* warm wash — pulls red into garnet/brass territory */
        linear-gradient(180deg, rgba(60, 30, 12, .35) 0%, rgba(40, 20, 8, .25) 100%),
        /* dim layer — reduces overall brightness */
        rgba(8, 6, 10, .42);
    mix-blend-mode: multiply;
}

/* Respect motion preference */
@media (prefers-reduced-motion: reduce) {
    .vlj-hero__photo { animation: none; }
}

/* Sconces — warm radial pools, like wall lamps in the room */
.vlj-hero__sconces {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 30% 24% at 10% 12%,  rgba(232, 195, 106, .25) 0%, transparent 65%),
        radial-gradient(ellipse 32% 26% at 90% 14%,  rgba(255, 231, 168, .18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 28% at 50% 100%, rgba(194, 69, 30, .22)  0%, transparent 70%),
        radial-gradient(ellipse 18% 14% at 15% 86%,  rgba(232, 195, 106, .18) 0%, transparent 70%),
        radial-gradient(ellipse 18% 14% at 85% 84%,  rgba(232, 195, 106, .14) 0%, transparent 70%);
    mix-blend-mode: screen;
}

/* Center vignette — dim the edges so the wordmark sits in light */
.vlj-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 55% 45% at 50% 50%, transparent 0%, transparent 35%, rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, .82) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, .55) 100%);
}

.vlj-hero__inner {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
}

.vlj-hero__eyebrow {
    margin-bottom: 22px;
    color: var(--vlj-candle);
    opacity: .85;
}

/* Wordmark — brass plate / candle-lit signage */
.vlj-hero__wordmark {
    margin: 0 0 .1em;
    font-size: clamp(96px, 17vw, 220px);
    line-height: .88;
    color: var(--vlj-cream);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .35),
        0 14px 60px rgba(232, 195, 106, .35),
        0 30px 90px rgba(0, 0, 0, .8);
    filter: drop-shadow(0 0 24px rgba(232, 195, 106, .12));
}
.vlj-hero__wordmark .vlj-script {
    background: linear-gradient(180deg, #FFE7A8 0%, #E8C36A 38%, #C29849 70%, #7E5E22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 400;
    letter-spacing: -.012em;

    /* Brush-sweep entrance — the wordmark "draws" itself left-to-right
       like ink running across the page. CSS mask animates from 0%→100%
       width, revealing the brass gradient one stroke at a time. */
    display: inline-block;
    -webkit-mask: linear-gradient(90deg, black 0 100%) no-repeat 0 0;
            mask: linear-gradient(90deg, black 0 100%) no-repeat 0 0;
    -webkit-mask-size: 0% 100%;
            mask-size: 0% 100%;
    transition:
        -webkit-mask-size 1.8s cubic-bezier(.4, 0, .15, 1) .3s,
                mask-size 1.8s cubic-bezier(.4, 0, .15, 1) .3s;
}
.vlj-hero__wordmark.is-revealed .vlj-script {
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
    /* Reduce-motion users see the wordmark instantly, no sweep. */
    .vlj-hero__wordmark .vlj-script {
        -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
        transition: none;
    }
}

.vlj-hero__tagline {
    margin: 18px auto 14px;
    color: var(--vlj-candle);
    font-size: clamp(18px, 1.8vw, 24px);
    letter-spacing: .01em;
    max-width: 620px;
    opacity: .92;
}

.vlj-hero__lede {
    max-width: 600px;
    margin: 8px auto 36px;
    font-size: clamp(15px, 1.3vw, 17px);
    color: var(--vlj-cream-3);
    line-height: 1.75;
    opacity: .85;
}

.vlj-hero__ctas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.vlj-hero__scroll {
    display: block;
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--vlj-body);
    font-size: 11px;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--vlj-mute);
    z-index: 4;
}
.vlj-hero__scroll span {
    display: inline-block;
    animation: vljPulse 2.6s ease-in-out infinite;
}
@keyframes vljPulse {
    0%, 100% { opacity: .4; transform: translateY(0); }
    50%      { opacity: 1;  transform: translateY(4px); }
}

/* --- WELCOME interstitial --- */
.vlj-welcome {
    background: var(--vlj-bg);
    padding: clamp(80px, 9vw, 140px) var(--vlj-gutter);
}
.vlj-welcome__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.vlj-welcome__inner .vlj-eyebrow {
    margin-bottom: 24px;
    color: var(--vlj-gold-2);
}
.vlj-welcome__copy {
    font-family: var(--vlj-display);
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.5;
    color: var(--vlj-cream);
    font-style: italic;
    margin: 0 0 22px;
}
.vlj-dropcap {
    float: left;
    font-family: var(--vlj-script);
    font-size: clamp(80px, 9vw, 130px);
    line-height: .82;
    padding-right: 14px;
    padding-top: 4px;
    background: linear-gradient(180deg, #E8C36A 0%, #C29849 70%, #7E5E22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vlj-welcome__sig {
    color: var(--vlj-gold-2);
    font-size: 15px;
    letter-spacing: .04em;
    margin: 32px 0 0;
}

/* --- Slim accolade bar — sits under hero, before A Tavola --- */
.vlj-acclaim-bar {
    position: relative;
    z-index: 4;
    padding: clamp(20px, 3vw, 32px) clamp(20px, 5vw, 64px);
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(232, 195, 106, .07), transparent 70%),
        linear-gradient(180deg, var(--vlj-bg) 0%, var(--vlj-bg-2) 50%, var(--vlj-bg) 100%);
    border-top: 1px solid var(--vlj-line);
    border-bottom: 1px solid var(--vlj-line);
    overflow: hidden;
    isolation: isolate;
}
.vlj-acclaim-bar::before, .vlj-acclaim-bar::after {
    /* hairline brass underline-glow — adds the "fancy" touch */
    content: "";
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: clamp(120px, 28vw, 360px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vlj-gold-2), transparent);
    opacity: .55;
    pointer-events: none;
}
.vlj-acclaim-bar::before { top: 0; }
.vlj-acclaim-bar::after  { bottom: 0; }

.vlj-acclaim-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3vw, 32px);
    flex-wrap: wrap;
}

.vlj-acclaim-bar__score {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.vlj-acclaim-bar__score .vlj-stars {
    display: inline-flex;
    gap: 3px;
    color: var(--vlj-gold-2);
    font-size: clamp(16px, 1.6vw, 20px);
    text-shadow: 0 0 10px rgba(232, 195, 106, .35);
    line-height: 1;
}
.vlj-acclaim-bar__num {
    font-family: var(--vlj-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1;
    background: linear-gradient(180deg, #FFE7A8 0%, #E8C36A 55%, #C29849 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.vlj-acclaim-bar__unit {
    color: var(--vlj-gold-2);
    font-size: 18px;
    line-height: 1;
    margin-left: -4px;
    transform: translateY(-3px);
}

.vlj-acclaim-bar__divider {
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, transparent, var(--vlj-line-2), transparent);
    flex-shrink: 0;
}

.vlj-acclaim-bar__lede {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.3;
}
.vlj-acclaim-bar__hed {
    font-family: var(--vlj-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(17px, 1.7vw, 22px);
    color: var(--vlj-cream);
}
.vlj-acclaim-bar__sub {
    font-family: var(--vlj-body);
    font-size: 11.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vlj-mute);
}
.vlj-acclaim-bar__sub a {
    color: var(--vlj-gold-2);
    text-decoration: none;
    transition: color .25s ease;
}
.vlj-acclaim-bar__sub a:hover { color: var(--vlj-candle); }

@media (max-width: 599px) {
    .vlj-acclaim-bar__inner { gap: 14px; flex-direction: column; }
    .vlj-acclaim-bar__divider { width: clamp(80px, 30vw, 140px); height: 1px; background: linear-gradient(90deg, transparent, var(--vlj-line-2), transparent); }
    .vlj-acclaim-bar__lede { align-items: center; text-align: center; }
    .vlj-acclaim-bar__sub { font-size: 11px; letter-spacing: .18em; }
}

/* The five-star row — kept (still used by .vlj-acclaim-bar) */
.vlj-stars {
    display: inline-flex;
    gap: 4px;
    color: var(--vlj-gold-2);
    text-shadow: 0 0 14px rgba(232, 195, 106, .35);
}
.vlj-star { display: inline-block; }

/* --- MARQUEE --- */
.vlj-marquee {
    background: var(--vlj-bg-2);
    border-top: 1px solid var(--vlj-line);
    border-bottom: 1px solid var(--vlj-line);
    overflow: clip;
    padding: 32px 0;
    position: relative;
}
.vlj-marquee::before, .vlj-marquee::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 12vw;
    z-index: 2;
    pointer-events: none;
}
.vlj-marquee::before { left: 0;  background: linear-gradient(90deg, var(--vlj-bg-2), transparent); }
.vlj-marquee::after  { right: 0; background: linear-gradient(270deg, var(--vlj-bg-2), transparent); }

.vlj-marquee__track {
    display: flex;
    width: max-content;
    animation: vljMarquee 60s linear infinite;
    will-change: transform;
}
.vlj-marquee__group {
    display: flex;
    align-items: center;
    gap: 44px;
    padding-right: 44px;
    flex-shrink: 0;
}
.vlj-marquee__item {
    font-family: var(--vlj-display);
    font-style: italic;
    font-size: clamp(24px, 2.6vw, 40px);
    color: var(--vlj-cream-2);
    white-space: nowrap;
}
.vlj-marquee__dot {
    color: var(--vlj-gold);
    font-size: 22px;
}
@keyframes vljMarquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* --- LA CUCINA — editorial featured dishes --- */
.vlj-cucina {
    background: var(--vlj-bg);
    padding-top: clamp(110px, 11vw, 160px);
    padding-bottom: clamp(110px, 11vw, 160px);
}
.vlj-cucina__head { text-align: center; max-width: 760px; margin: 0 auto clamp(64px, 7vw, 90px); }
.vlj-cucina__head h2 { font-size: clamp(34px, 5vw, 64px); }

.vlj-cucina__editorial {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: clamp(80px, 9vw, 140px);
    position: relative;
    z-index: 2;
}
.vlj-feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}
.vlj-feat--offset { direction: rtl; }
.vlj-feat--offset > * { direction: ltr; }

.vlj-feat__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--vlj-bg-3);
    box-shadow: var(--vlj-shadow), var(--vlj-shadow-glow);
    border: 1px solid var(--vlj-line);
    border-radius: 18px;
    transform: rotate(-0.5deg);
    transition: transform .8s cubic-bezier(.2,.65,.25,1), box-shadow .8s ease;
}
.vlj-feat--offset .vlj-feat__media { transform: rotate(0.5deg); }
.vlj-feat:hover .vlj-feat__media { transform: rotate(0deg) scale(1.01); }

.vlj-feat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    /* Cinematic warm filter on every dish photo */
    filter: saturate(96%) contrast(110%) brightness(.92) sepia(.08);
    transition: filter .8s ease;
}
.vlj-feat:hover .vlj-feat__media img { filter: saturate(108%) contrast(112%) brightness(1) sepia(.04); }

/* Slow brass shine that sweeps across the photo on hover. */
.vlj-feat__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 231, 168, .22) 50%, transparent 62%);
    transform: translateX(-110%);
    transition: transform 1.4s cubic-bezier(.2,.65,.25,1);
    pointer-events: none;
    mix-blend-mode: screen;
}
.vlj-feat:hover .vlj-feat__media::after { transform: translateX(110%); }

/* Chef's Pick seal — gold-stroke wax-stamp medallion, top-right of the photo */
.vlj-feat__seal {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #1c1308 0%, #0a0805 70%);
    border: 1px solid rgba(232, 195, 106, .55);
    box-shadow:
        0 0 0 4px rgba(8, 6, 10, .4),
        0 0 0 5px rgba(232, 195, 106, .28),
        0 12px 28px rgba(0, 0, 0, .6),
        0 0 24px rgba(232, 195, 106, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-8deg);
    transition: transform .6s cubic-bezier(.2,.65,.25,1);
}
.vlj-feat:hover .vlj-feat__seal { transform: rotate(0deg) scale(1.04); }
.vlj-feat__seal-inner {
    text-align: center;
    line-height: 1;
    padding: 6px 4px;
}
.vlj-feat__seal-eyebrow {
    display: block;
    font-family: var(--vlj-display);
    font-style: italic;
    font-size: 13px;
    color: var(--vlj-gold-2);
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.vlj-feat__seal-word {
    display: block;
    font-family: var(--vlj-script);
    font-size: 32px;
    color: var(--vlj-candle);
    text-shadow: 0 0 12px rgba(232, 195, 106, .35);
}
@media (max-width: 760px) {
    .vlj-feat__seal { width: 78px; height: 78px; top: 12px; right: 12px; }
    .vlj-feat__seal-eyebrow { font-size: 11px; }
    .vlj-feat__seal-word { font-size: 26px; }
}

.vlj-feat__body { padding: 20px 0; }
.vlj-feat__body .vlj-eyebrow {
    color: var(--vlj-gold-2);
    margin-bottom: 14px;
}
.vlj-feat__name {
    font-family: var(--vlj-display);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    margin: 0 0 18px;
    color: var(--vlj-cream);
    font-weight: 500;
    font-style: italic;
}
.vlj-feat__desc {
    font-family: var(--vlj-display);
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.55;
    color: var(--vlj-cream-2);
    margin: 0 0 22px;
}
.vlj-feat__meta {
    color: var(--vlj-gold-2);
    font-size: 14px;
    letter-spacing: .04em;
}

.vlj-cucina__cta {
    text-align: center;
    margin-top: clamp(70px, 8vw, 110px);
}

@media (max-width: 760px) {
    .vlj-feat,
    .vlj-feat--offset {
        grid-template-columns: 1fr;
        direction: ltr;
    }
    .vlj-feat__media { aspect-ratio: 4 / 3; }
}

/* --- KITCHEN ribbon — full-bleed --- */
.vlj-kitchen--full {
    background: var(--vlj-bg-2);
    padding-bottom: clamp(110px, 11vw, 160px);
    border-top: 1px solid var(--vlj-line);
    border-bottom: 1px solid var(--vlj-line);
}
.vlj-kitchen__head-wrap { text-align: center; margin-bottom: clamp(40px, 5vw, 70px); }
.vlj-kitchen__strip {
    display: flex;
    gap: clamp(18px, 2vw, 28px);
    padding: 0 clamp(20px, 4vw, 56px) 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--vlj-gold) var(--vlj-bg-2);
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
}
.vlj-kitchen__strip::-webkit-scrollbar { height: 6px; }
.vlj-kitchen__strip::-webkit-scrollbar-thumb { background: var(--vlj-gold); border-radius: 4px; }
.vlj-kitchen__strip::-webkit-scrollbar-track { background: var(--vlj-bg-2); }

.vlj-kitchen__item {
    margin: 0;
    flex: 0 0 360px;
    scroll-snap-align: start;
    background: var(--vlj-bg-3);
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--vlj-line);
    transition: transform .5s cubic-bezier(.2,.65,.25,1), box-shadow .5s ease;
    box-shadow: var(--vlj-shadow-2);
}
.vlj-kitchen__item:hover {
    transform: translateY(-6px);
    box-shadow: var(--vlj-shadow), 0 0 60px rgba(232, 195, 106, .18);
}
.vlj-kitchen__item img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    filter: saturate(96%) contrast(108%) brightness(.92) sepia(.08);
    transition: filter .6s ease, transform 8s ease-in-out;
}
.vlj-kitchen__item:hover img {
    filter: saturate(108%) contrast(112%) brightness(1) sepia(.04);
    transform: scale(1.04);
}
.vlj-kitchen__item figcaption {
    padding: 18px 22px 22px;
    font-family: var(--vlj-display);
    font-style: italic;
    font-size: 22px;
    color: var(--vlj-cream-2);
    letter-spacing: .01em;
}

@media (max-width: 1023px) {
    .vlj-kitchen__item { flex-basis: 300px; }
    .vlj-kitchen__item img { height: 300px; }
}
@media (max-width: 600px) {
    .vlj-kitchen__item { flex-basis: 260px; }
    .vlj-kitchen__item img { height: 260px; }
}

/* --- EVENTS teaser --- */
.vlj-events-teaser {
    background: var(--vlj-bg);
}
.vlj-events-teaser__inner {
    display: grid;
    grid-template-columns: 1.05fr .8fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}
.vlj-events-teaser__copy h2 { font-size: clamp(32px, 4.4vw, 56px); }
.vlj-events-teaser__copy p {
    max-width: 520px;
    color: var(--vlj-cream-2);
    margin-bottom: 28px;
}
.vlj-events-teaser__art {
    position: relative;
    aspect-ratio: 1;
    max-width: 420px;
    margin: 0 auto;
}
.vlj-events-teaser__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--vlj-gold);
    background: radial-gradient(circle at 50% 50%, rgba(232, 195, 106, .14) 0%, transparent 70%);
    animation: vljSpin 80s linear infinite;
}
.vlj-events-teaser__ring--inner {
    inset: 14%;
    border-color: rgba(232, 195, 106, .25);
    animation-duration: 120s;
    animation-direction: reverse;
}
@keyframes vljSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 899px) {
    .vlj-events-teaser__inner { grid-template-columns: 1fr; }
    .vlj-events-teaser__art { max-width: 280px; }
}

/* --- RESERVE --- */
.vlj-reserve {
    background: linear-gradient(180deg, var(--vlj-bg-2) 0%, var(--vlj-bg) 100%);
    text-align: center;
    padding-bottom: clamp(120px, 12vw, 180px);
}
.vlj-reserve__head { max-width: 800px; margin: 0 auto clamp(36px, 5vw, 54px); }
.vlj-reserve__head h2 { font-size: clamp(34px, 5vw, 62px); }
.vlj-reserve__head p { color: var(--vlj-mute); margin-top: 14px; }
.vlj-reserve__widget {
    display: flex;
    justify-content: center;
    min-height: 80px;
    align-items: center;
}
.vlj-reserve__fineprint {
    margin-top: 38px;
    color: var(--vlj-gold-2);
    font-size: 14px;
    letter-spacing: .04em;
}

/* --- MOBILE safety --- */
@media (max-width: 767px) {
    .vlj-hero {
        min-height: 100svh;
        padding-top: 110px;
        padding-bottom: 72px;
    }
    .vlj-hero__wordmark { font-size: clamp(78px, 24vw, 124px); }
    .vlj-hero__tagline { font-size: 18px; }
    .vlj-hero__lede { font-size: 15px; }
    .vlj-hero__ctas { width: 100%; flex-direction: column; }
    .vlj-hero__ctas .vlj-btn { width: 100%; }
    /* freeze drift on iOS — keeps the hero stable when URL bar collapses */
    .vlj-hero__photo { animation: none; }
    .vlj-marquee__track { animation-duration: 90s; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .vlj-marquee__track { animation-duration: 75s; }
}