/* ==================================================================
   NUEVA VIDA — flagship brand page
   nueva-vida.css   ·   pairs with public/nueva-vida.html + js/nueva-vida.js
   ------------------------------------------------------------------
   Self-contained: this page deliberately does NOT load style.css or the
   global Fair Ford loader, so the NUEVA VIDA identity stays intact and
   nothing here can leak into the rest of the site. Every rule is scoped
   under .nv / .nv-* to keep it that way.

   Palette is fixed by the brand brief — do not substitute.
   ================================================================== */

:root {
    /* ---- Brand palette (fixed) ---- */
    --nv-primary: #0F4F4A;
    --nv-secondary: #7C9A82;
    --nv-bg: #F8F6F0;
    --nv-text: #18201F;
    --nv-accent: #C9A84E;
    --nv-white: #FFFFFF;

    /* ---- Derived tones ---- */
    --nv-primary-deep: #0A3A36;
    --nv-primary-ink: #06231F;
    --nv-muted: #5C6A67;
    --nv-line: rgba(15, 79, 74, .13);
    --nv-line-soft: rgba(15, 79, 74, .07);
    --nv-gold-soft: rgba(201, 168, 78, .16);
    --nv-sage-soft: rgba(124, 154, 130, .14);

    /* ---- Type ---- */
    --nv-display: 'Cormorant Garamond', 'Times New Roman', serif;
    --nv-sans: 'Jost', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Elevation ---- */
    --nv-sh-sm: 0 2px 10px rgba(10, 58, 54, .05);
    --nv-sh-md: 0 18px 44px -22px rgba(10, 58, 54, .30), 0 2px 10px rgba(10, 58, 54, .04);
    --nv-sh-lg: 0 44px 90px -40px rgba(10, 58, 54, .42), 0 6px 20px rgba(10, 58, 54, .06);

    /* ---- Motion ---- */
    --nv-ease: cubic-bezier(.22, .61, .36, 1);
    --nv-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* ---- Rhythm ---- */
    --nv-gutter: clamp(20px, 5vw, 64px);
    --nv-max: 1280px;
    --nv-section: clamp(72px, 11vw, 148px);
}

/* ==================================================================
   RESET
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html.nv-html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Locked while the loader is up. Cleared by nueva-vida.js in every exit path. */
html.nv-loading, html.nv-loading body { overflow: hidden; }

body.nv {
    margin: 0;
    background: var(--nv-bg);
    color: var(--nv-text);
    font-family: var(--nv-sans);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Wrapped in :where() so the reset carries ZERO specificity. It still beats
   the browser's own defaults (author origin wins over UA origin) but can never
   out-rank a component class — otherwise a bare ".nv button" rule would flatten
   every .nv-btn and .nv-card back to a transparent, borderless box. */
:where(.nv) :where(h1, h2, h3, h4, p, figure, ul) { margin: 0; }
:where(.nv) :where(ul) { padding: 0; list-style: none; }
:where(.nv) :where(img) { max-width: 100%; display: block; }
:where(.nv) :where(a) { color: inherit; text-decoration: none; }
:where(.nv) :where(button) { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.nv :focus-visible {
    outline: 2px solid var(--nv-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.nv-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.nv-shell {
    width: 100%;
    max-width: var(--nv-max);
    margin-inline: auto;
    padding-inline: var(--nv-gutter);
}

/* Warm paper grain — one tiny data-URI, no network cost. Sits above the
   background and below all content, and never intercepts pointer events. */
body.nv::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.nv > * { position: relative; z-index: 1; }

/* ==================================================================
   1 · LOADER
   White field · centred wordmark · progress rail
   ================================================================== */
#nvLoader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--nv-white);
    opacity: 1;
    transition: opacity .6s var(--nv-ease), visibility .6s;
}

#nvLoader.is-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.nv-load__inner {
    width: min(420px, 78vw);
    text-align: center;
    transform: translateY(0);
    transition: transform .6s var(--nv-ease);
}
#nvLoader.is-out .nv-load__inner { transform: translateY(-14px); }

.nv-load__mark {
    font-family: var(--nv-sans);
    font-weight: 700;
    font-size: clamp(26px, 6.4vw, 46px);
    letter-spacing: .16em;
    line-height: 1;
    color: var(--nv-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .32em;
}

/* Each word rises independently so the wordmark "assembles". */
.nv-load__w {
    display: inline-block;
    opacity: 0;
    transform: translateY(16px);
    animation: nvRise .8s var(--nv-ease-out) forwards;
}
.nv-load__w--2 { animation-delay: .13s; color: var(--nv-primary); }

.nv-load__glyph {
    width: .62em;
    height: .62em;
    color: var(--nv-primary);
    opacity: 0;
    transform: translateY(10px) scale(.7);
    animation: nvGlyph .7s var(--nv-ease-out) .28s forwards;
}

@keyframes nvRise { to { opacity: 1; transform: translateY(0); } }
@keyframes nvGlyph { to { opacity: 1; transform: translateY(0) scale(1); } }

.nv-load__tag {
    margin-top: 16px;
    font-size: clamp(9px, 2.1vw, 11px);
    font-weight: 500;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--nv-muted);
    opacity: 0;
    animation: nvFade .7s var(--nv-ease) .42s forwards;
}
@keyframes nvFade { to { opacity: 1; } }

/* Progress rail */
.nv-load__rail {
    position: relative;
    margin: 34px auto 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: rgba(15, 79, 74, .10);
    overflow: hidden;
}

.nv-load__bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg,
            var(--nv-primary) 0%,
            var(--nv-secondary) 46%,
            var(--nv-accent) 100%);
    transition: width .28s linear;
}

/* Gold sheen that runs ahead of the fill. */
.nv-load__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    animation: nvSheen 1.15s linear infinite;
}
@keyframes nvSheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.nv-load__pct {
    margin-top: 12px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .3em;
    color: var(--nv-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
   2 · PAGE REVEAL
   The whole page lifts in once the loader clears.
   ================================================================== */
.nv-page {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .8s var(--nv-ease), transform .8s var(--nv-ease);
}
body.nv.is-ready .nv-page { opacity: 1; transform: none; }

/* ==================================================================
   3 · MASTHEAD — brand name, top centre
   ================================================================== */
.nv-masthead {
    position: relative;
    padding: clamp(34px, 6vw, 66px) 0 clamp(26px, 4vw, 42px);
    text-align: center;
    overflow: hidden;
}

/* Two soft brand-tinted lifts so the cream reads as lit, not flat. */
.nv-masthead::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -46%;
    width: min(1100px, 130vw);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background:
        radial-gradient(closest-side, rgba(124, 154, 130, .22), transparent 70%),
        radial-gradient(closest-side at 62% 58%, rgba(201, 168, 78, .14), transparent 68%);
    pointer-events: none;
}

.nv-masthead__back {
    position: absolute;
    left: var(--nv-gutter);
    top: clamp(30px, 5vw, 50px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nv-muted);
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--nv-line-soft);
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(6px);
    transition: color .3s var(--nv-ease), border-color .3s var(--nv-ease), transform .3s var(--nv-ease);
}
.nv-masthead__back:hover {
    color: var(--nv-primary);
    border-color: rgba(15, 79, 74, .28);
    transform: translateX(-3px);
}
.nv-masthead__back svg { width: 14px; height: 14px; }

/* Gold filigree above the wordmark */
.nv-crest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: clamp(14px, 2.4vw, 22px);
}
.nv-crest__rule {
    width: clamp(34px, 9vw, 92px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nv-accent));
}
.nv-crest__rule--r { background: linear-gradient(90deg, var(--nv-accent), transparent); }
.nv-crest__gem {
    width: 7px; height: 7px;
    transform: rotate(45deg);
    background: var(--nv-accent);
    box-shadow: 0 0 0 4px var(--nv-gold-soft);
}

.nv-wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3em;
    font-family: var(--nv-sans);
    font-weight: 700;
    font-size: clamp(34px, 8.6vw, 82px);
    line-height: .98;
    letter-spacing: .14em;
    color: var(--nv-text);
    text-indent: .14em;
}
.nv-wordmark em { font-style: normal; color: var(--nv-primary); }
.nv-wordmark__glyph {
    width: .58em;
    height: .58em;
    color: var(--nv-primary);
    flex: none;
}

.nv-masthead__tag {
    margin-top: clamp(14px, 2.4vw, 20px);
    font-size: clamp(9.5px, 2.2vw, 12px);
    font-weight: 500;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--nv-primary);
}
.nv-masthead__tag span { color: var(--nv-accent); margin-inline: .5em; }

.nv-masthead__lede {
    margin: clamp(16px, 2.6vw, 22px) auto 0;
    max-width: 46ch;
    font-family: var(--nv-display);
    font-size: clamp(19px, 3.2vw, 27px);
    line-height: 1.45;
    color: var(--nv-muted);
}

/* ==================================================================
   4 · STICKY MINI BAR — appears once the masthead scrolls away
   ================================================================== */
.nv-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px var(--nv-gutter);
    background: rgba(248, 246, 240, .86);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--nv-line-soft);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .5s var(--nv-ease), opacity .4s var(--nv-ease);
}
.nv-bar.is-pinned { transform: none; opacity: 1; }

.nv-bar__mark {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .17em;
}
.nv-bar__mark em { font-style: normal; color: var(--nv-primary); }
.nv-bar__mark svg { width: 13px; height: 13px; color: var(--nv-primary); }

.nv-bar__nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.nv-bar__nav a {
    position: relative;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nv-muted);
    transition: color .3s var(--nv-ease);
}
.nv-bar__nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: var(--nv-accent);
    transform: scaleX(0);
    transition: transform .35s var(--nv-ease);
}
.nv-bar__nav a:hover { color: var(--nv-primary); }
.nv-bar__nav a:hover::after { transform: scaleX(1); }

@media (max-width: 720px) { .nv-bar__nav { display: none; } }

/* ==================================================================
   5 · HERO SLIDER — four banners, one at a time
   ------------------------------------------------------------------
   Shape. All four supplied banners are 1536x1024, so the stage is a
   3:2 box and object-fit: contain is exact: no crop, no letterbox
   field, no distortion, and the same ratio on every slide. Should a
   future banner arrive at a different ratio, contain still protects
   it — it will simply sit inside the box with a little of the frame
   showing, rather than being cut.

   Width. The stage is fluid to the viewport and only stops at
   --nvs-max. Going truly edge-to-edge is possible but not free: 3:2
   artwork spanning a 1900px screen stands 1267px tall, far past one
   screenful, and the only ways to shorten it are to crop the artwork
   or to pad the sides with a field — both ruled out here. 1440px is
   the widest this composition still reads as designed rather than as
   a poster. Raise --nvs-max to push it wider.

   Type. Clash Display and Satoshi, scoped to .nvs alone so the rest
   of the page keeps its Cormorant / Jost identity.
   ================================================================== */
.nvs {
    --nvs-max: 1440px;
    --nvs-display: 'Clash Display', 'Cormorant Garamond', Georgia, serif;
    --nvs-sans: 'Satoshi', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nvs-hold: 6500ms;
}

.nv-hero { padding: clamp(8px, 2vw, 22px) 0 clamp(48px, 7vw, 92px); }

.nvs__wrap {
    width: min(100% - (var(--nv-gutter) * 2), var(--nvs-max));
    margin-inline: auto;
}

/* The white mount, its gold hairline and the halo below it are the page's
   own hero furniture, kept exactly as they were - they are what makes the
   artwork read as a framed piece rather than a banner. The class is still
   .nv-hero__frame as well as .nvs__frame, because the no-JS and
   reduced-motion blocks further down this file target the older name. */
.nv-hero__frame {
    position: relative;
    border-radius: clamp(16px, 2.4vw, 28px);
    background: var(--nv-white);
    padding: clamp(8px, 1.4vw, 16px);
    box-shadow: var(--nv-sh-lg);
    opacity: 0;
    transform: translateY(34px) scale(.985);
    transition: opacity 1.1s var(--nv-ease-out), transform 1.1s var(--nv-ease-out);
}
body.nv.is-ready .nv-hero__frame { opacity: 1; transform: none; }

/* Gold hairline just inside the white frame. */
.nv-hero__frame::before {
    content: "";
    position: absolute;
    inset: clamp(8px, 1.4vw, 16px);
    border: 1px solid var(--nv-gold-soft);
    border-radius: clamp(10px, 1.6vw, 18px);
    pointer-events: none;
    /* Above the slides (2), below the arrows (5), so the hairline never
       draws a line across a chevron. */
    z-index: 4;
}

/* Soft brand halo grounding the frame. */
.nv-hero__glow {
    position: absolute;
    left: 6%; right: 6%;
    bottom: -26px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(15, 79, 74, .22), transparent 72%);
    filter: blur(16px);
    z-index: -1;
    pointer-events: none;
}

.nvs__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: clamp(10px, 1.6vw, 18px);
    overflow: hidden;
    background: var(--nv-bg);
    cursor: zoom-in;
    touch-action: pan-y;            /* horizontal swipe is ours, scrolling is not */
}

/* ---- Slides ---- */
.nvs__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 1150ms var(--nv-ease-out),
        visibility 1150ms;
}
.nvs__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

.nvs__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;            /* never crop the composition */
    object-position: center;
    /* The settle: an incoming slide relaxes from 1.4% over to rest.
       Slow enough to be felt rather than seen. */
    transform: scale(1.014);
    transition: transform 1600ms var(--nv-ease-out);
    will-change: opacity, transform;
}
.nvs__slide.is-active .nvs__img { transform: scale(1); }

/* ---- Optional copy panel ----
   Off for all four current banners; see NV_HERO_SLIDES. */
.nvs__copy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: clamp(24px, 5.5%, 76px);
    pointer-events: none;           /* only the CTA is clickable */
}
.nvs__copy--center { justify-content: center; text-align: center; }
.nvs__copy--left { justify-content: flex-start; }

.nvs__copyIn {
    max-width: min(46ch, 52%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 1.4vw, 18px);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 900ms var(--nv-ease-out) 260ms,
                transform 900ms var(--nv-ease-out) 260ms;
}
.nvs__copy--center .nvs__copyIn { align-items: center; max-width: min(52ch, 74%); }
.nvs__slide.is-active .nvs__copyIn { opacity: 1; transform: none; }

.nvs__eyebrow {
    margin: 0;
    font-family: var(--nvs-sans);
    font-size: clamp(9px, .78vw, 11px);
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    opacity: .78;
}
.nvs__title {
    margin: 0;
    font-family: var(--nvs-display);
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 58px);
    line-height: 1.04;
    letter-spacing: -.012em;
}
.nvs__desc {
    margin: 0;
    font-family: var(--nvs-sans);
    font-weight: 400;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.62;
    max-width: 42ch;
    opacity: .86;
}

.nvs__copy--dark { color: var(--nv-text); }
.nvs__copy--light { color: #fff; }

/* ---- CTA ---- */
.nvs__cta {
    pointer-events: auto;
    margin-top: clamp(4px, .6vw, 10px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 6px;             /* minimal, not a pill */
    font-family: var(--nvs-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--nv-white);
    background: var(--nv-primary);
    border: 1px solid var(--nv-primary);
    transition: background .45s var(--nv-ease), color .45s var(--nv-ease),
                border-color .45s var(--nv-ease), transform .45s var(--nv-ease);
}
.nvs__cta:hover {
    background: var(--nv-primary-deep);
    border-color: var(--nv-primary-deep);
    transform: translateY(-1px);
}
.nvs__copy--light .nvs__cta {
    color: var(--nv-primary-ink);
    background: var(--nv-white);
    border-color: var(--nv-white);
}
.nvs__copy--light .nvs__cta:hover { background: #f3efe4; border-color: #f3efe4; }

.nvs__ctaArrow { display: inline-flex; transition: transform .45s var(--nv-ease); }
.nvs__ctaArrow svg { width: 15px; height: 15px; display: block; }
.nvs__cta:hover .nvs__ctaArrow { transform: translateX(4px); }

/* ---- Arrows ----
   Thin, small and quiet: they rest at 0 opacity until the hero is
   hovered or something inside it takes focus, so the artwork is never
   competing with two chevrons. */
.nvs__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: clamp(38px, 3.4vw, 46px);
    height: clamp(38px, 3.4vw, 46px);
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--nv-line-soft);
    color: var(--nv-primary-deep);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%) scale(.94);
    transition: opacity .5s var(--nv-ease), transform .5s var(--nv-ease),
                background .35s var(--nv-ease);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.nvs__arrow--prev { left: clamp(14px, 1.8vw, 26px); }
.nvs__arrow--next { right: clamp(14px, 1.8vw, 26px); }
.nvs__arrow svg { width: 18px; height: 18px; display: block; }

.nvs:hover .nvs__arrow,
.nvs:focus-within .nvs__arrow { opacity: .82; transform: translateY(-50%) scale(1); }
.nvs__arrow:hover { opacity: 1; background: #fff; }
.nvs__arrow:focus-visible { opacity: 1; outline: 2px solid var(--nv-accent); outline-offset: 3px; }

/* Touch has no hover, so leave them visible but quiet. */
@media (hover: none) {
    .nvs__arrow { opacity: .7; transform: translateY(-50%) scale(1); }
}

/* ---- Enlarge hint ---- */
.nvs__hint {
    position: absolute;
    right: clamp(20px, 2.4vw, 30px);
    bottom: clamp(20px, 2.4vw, 30px);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    font-family: var(--nvs-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nv-primary-deep);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--nv-gold-soft);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s var(--nv-ease), transform .4s var(--nv-ease);
    pointer-events: none;
}
.nvs:hover .nvs__hint { opacity: 1; transform: none; }
.nvs__hint svg { width: 12px; height: 12px; }
@media (hover: none) { .nvs__hint { opacity: 1; transform: none; } }

/* ---- Rail: ticks + counter ---- */
.nvs__rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: clamp(16px, 2vw, 26px);
    padding-inline: clamp(2px, .6vw, 8px);
}

.nvs__ticks { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); }

/* A tick is a hairline that fills left to right while its slide holds. */
.nvs__tick {
    position: relative;
    width: clamp(30px, 4.2vw, 54px);
    height: 2px;
    padding: 14px 0;                /* invisible 30px tap target */
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.nvs__tick::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--nv-line);
    transition: background .4s var(--nv-ease);
}
.nvs__tick:hover::before { background: rgba(15, 79, 74, .3); }
.nvs__tick:focus-visible { outline: 2px solid var(--nv-accent); outline-offset: 4px; border-radius: 3px; }

.nvs__tickFill {
    position: absolute;
    left: 0; top: 50%;
    height: 2px;
    margin-top: -1px;
    width: 0;
    border-radius: 2px;
    background: var(--nv-primary);
    z-index: 1;
}
/* Only the active tick animates. The fill is cosmetic and the advance is
   a timer, so a renderer that withholds animation still changes slides. */
.nvs__tick.is-active .nvs__tickFill { animation: nvsFill var(--nvs-hold) linear forwards; }
.nvs:hover .nvs__tick.is-active .nvs__tickFill,
.nvs.is-paused .nvs__tick.is-active .nvs__tickFill { animation-play-state: paused; }

@keyframes nvsFill { from { width: 0; } to { width: 100%; } }

.nvs__count {
    margin: 0;
    font-family: var(--nvs-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    color: var(--nv-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .nvs__copyIn { max-width: min(46ch, 62%); }
    .nvs__arrow { width: 38px; height: 38px; }
}

@media (max-width: 640px) {
    /* A copy panel over a 3:2 image is only ~180px tall on a phone, so the
       overlay comes out from over the artwork and sits beneath it, where it
       has room to breathe and covers nothing. */
    .nvs__copy {
        position: static;
        padding: clamp(18px, 5vw, 26px) 2px 0;
        display: block;
    }
    .nvs__copyIn { max-width: none; transform: none; }
    .nvs__copy--center .nvs__copyIn { max-width: none; }
    .nvs__slide:not(.is-active) .nvs__copy { display: none; }
    .nvs__copy--light { color: var(--nv-text); }   /* no longer over the image */
    .nvs__copy--light .nvs__cta {
        color: var(--nv-white);
        background: var(--nv-primary);
        border-color: var(--nv-primary);
    }
    .nvs__cta { width: 100%; justify-content: center; }

    .nvs__tick { width: clamp(22px, 7vw, 40px); }
    .nvs__hint { display: none; }              /* tap to enlarge still works */
}

/* Reduced motion: no autoplay (handled in JS), no dissolve, no scale. */
@media (prefers-reduced-motion: reduce) {
    .nvs__slide,
    .nvs__img,
    .nvs__copyIn,
    .nvs__arrow { transition-duration: .01ms !important; }
    .nvs__img { transform: none !important; }
    .nvs__tick.is-active .nvs__tickFill { animation: none; width: 100%; }
}

/* ==================================================================
   6 · TRUST STRIP
   ================================================================== */
.nv-trust {
    border-block: 1px solid var(--nv-line);
    background: rgba(255, 255, 255, .5);
}
.nv-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--nv-line-soft);
}
.nv-trust__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: clamp(20px, 3.2vw, 32px) 14px;
    background: var(--nv-bg);
    text-align: left;
}
.nv-trust__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--nv-gold-soft);
    color: var(--nv-primary);
}
.nv-trust__ico svg { width: 17px; height: 17px; }
.nv-trust__txt {
    font-size: clamp(10px, 1.5vw, 11.5px);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--nv-primary-deep);
}

@media (max-width: 760px) { .nv-trust__grid { grid-template-columns: repeat(2, 1fr); } }

/* ==================================================================
   7 · SECTION FURNITURE
   ================================================================== */
.nv-section { padding-block: var(--nv-section); }
.nv-section--tight { padding-block: clamp(56px, 8vw, 104px); }

.nv-head { text-align: center; margin-bottom: clamp(44px, 6vw, 76px); }

.nv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--nv-accent);
}
.nv-eyebrow::before,
.nv-eyebrow::after {
    content: "";
    width: 22px; height: 1px;
    background: currentColor;
    opacity: .55;
}

.nv-head h2 {
    margin-top: 16px;
    font-family: var(--nv-display);
    font-weight: 600;
    font-size: clamp(32px, 5.6vw, 58px);
    line-height: 1.1;
    letter-spacing: -.005em;
    color: var(--nv-primary-deep);
}
.nv-head h2 em { font-style: italic; color: var(--nv-primary); }

.nv-head p:not(.nv-eyebrow) {
    margin: 18px auto 0;
    max-width: 58ch;
    font-size: clamp(14.5px, 2vw, 16.5px);
    color: var(--nv-muted);
}

/* ==================================================================
   8 · PRODUCT SHOWCASE — alternating editorial rows
   ================================================================== */
.nv-showcases { display: grid; gap: clamp(72px, 10vw, 140px); }

.nv-show {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5.5vw, 84px);
}
/* Alternating: even rows put the copy first without touching source order,
   so the DOM stays image-then-copy for screen readers on every row. */
.nv-show--flip .nv-show__media { order: 2; }
.nv-show--flip .nv-show__body { order: 1; }

.nv-show__media { position: relative; }

/* Oversized ghost numeral behind the pack shot. */
.nv-show__index {
    position: absolute;
    top: -.34em;
    inset-inline-start: -.12em;
    z-index: 0;
    font-family: var(--nv-display);
    font-weight: 600;
    font-size: clamp(110px, 17vw, 210px);
    line-height: 1;
    color: var(--nv-primary);
    opacity: .07;
    pointer-events: none;
    user-select: none;
}
.nv-show--flip .nv-show__index { inset-inline-start: auto; inset-inline-end: -.12em; }

/* ---- Category poster ----
   One still image per category — the showcase used to hold a front/back
   pack-shot slider and now holds a single poster.

   The box is 2:3 because all four posters are 1024x1536, so the artwork
   fills it exactly: no crop, no letterbox strip, no distortion. `contain`
   rather than `cover` is deliberate even though the ratios match today —
   these posters carry a headline, a benefit column and a footer strip hard
   against all four edges, so a replacement at a slightly different ratio
   must letterbox onto the white panel rather than lose copy.

   Height is capped against the viewport instead of being left to the column
   width. At 2:3 a full-width column stands ~930px tall on a wide screen and
   swamps the copy beside it; deriving the WIDTH from a height budget keeps
   the box the artwork's own shape — so still no bands — while the row stays
   readable. The white panel, gold hairline, radius and shadow are the same
   furniture the slider had, so the section's look is unchanged. */
.nv-show__shot {
    --nv-shot-h: clamp(440px, 76vh, 760px);

    position: relative;
    z-index: 1;
    width: min(100%, calc(var(--nv-shot-h) * 2 / 3));
    margin: 0 auto;
    aspect-ratio: 2 / 3;
    border-radius: clamp(14px, 2vw, 22px);
    background: var(--nv-white);
    box-shadow: var(--nv-sh-md);
    border: 1px solid var(--nv-line-soft);
    overflow: hidden;
}

.nv-show__shot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    border: 1px solid var(--nv-gold-soft);
    pointer-events: none;
}

.nv-show__shot img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    /* Deliberately NO mix-blend-mode: multiply. That belongs to the pack
       shots, which sit on a white studio card; these posters have full-colour
       backgrounds and multiply would muddy every one of them. */
}

/* ---- Slider ---- */
.nv-slider {
    position: relative;
    z-index: 1;
    border-radius: clamp(14px, 2vw, 22px);
    background: var(--nv-white);
    box-shadow: var(--nv-sh-md);
    overflow: hidden;
    border: 1px solid var(--nv-line-soft);
}
.nv-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    border: 1px solid var(--nv-gold-soft);
    pointer-events: none;
}

.nv-slider__track {
    position: relative;
    aspect-ratio: 4 / 3.4;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(124, 154, 130, .10), transparent 62%),
        var(--nv-white);
    touch-action: pan-y;
}

.nv-slide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(14px, 2.6vw, 34px);
    opacity: 0;
    transform: scale(1.035);
    transition: opacity .85s var(--nv-ease), transform 1.1s var(--nv-ease);
    pointer-events: none;
}
.nv-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }

.nv-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;   /* pack shots are never cropped or stretched */
    mix-blend-mode: multiply; /* drops the white studio card into the panel */
}

/* ---- Slider controls ---- */
.nv-slider__nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    color: var(--nv-primary-deep);
    background: rgba(255, 255, 255, .84);
    border: 1px solid var(--nv-line);
    box-shadow: var(--nv-sh-sm);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .35s var(--nv-ease), background .3s var(--nv-ease),
                color .3s var(--nv-ease), transform .3s var(--nv-ease);
}
.nv-slider__nav svg { width: 15px; height: 15px; }
.nv-slider__nav--prev { left: 12px; transform: translateX(-6px); }
.nv-slider__nav--next { right: 12px; transform: translateX(6px); }
.nv-slider:hover .nv-slider__nav,
.nv-slider:focus-within .nv-slider__nav { opacity: 1; transform: none; }
.nv-slider__nav:hover {
    background: var(--nv-primary);
    color: var(--nv-white);
    border-color: var(--nv-primary);
}
/* Touch devices have no hover state to reveal them. */
@media (hover: none) {
    .nv-slider__nav { opacity: 1; transform: none; }
}

.nv-slider__dots {
    position: absolute;
    left: 0; right: 0; bottom: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.nv-dot {
    width: 7px; height: 7px;
    padding: 0;
    border-radius: 50%;
    background: rgba(15, 79, 74, .2);
    transition: background .3s var(--nv-ease), width .35s var(--nv-ease);
}
.nv-dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: var(--nv-accent);
}

/* Face caption (Front / Back), so the pack view is always legible. */
.nv-slider__face {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 4;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--nv-primary-deep);
    background: rgba(248, 246, 240, .9);
    border: 1px solid var(--nv-line-soft);
}

/* Autoplay progress hairline along the bottom edge. */
.nv-slider__timer {
    position: absolute;
    left: 0; bottom: 0;
    z-index: 4;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--nv-secondary), var(--nv-accent));
    transition: width .18s linear, opacity .3s var(--nv-ease);
}
.nv-slider.is-paused .nv-slider__timer { opacity: .25; }

/* ---- Showcase copy column ---- */
.nv-show__kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--nv-secondary);
}
.nv-show__kicker i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--nv-pill, var(--nv-primary));
}

.nv-show__name {
    margin-top: 14px;
    font-family: var(--nv-sans);
    font-weight: 600;
    font-size: clamp(26px, 4.1vw, 42px);
    line-height: 1.12;
    letter-spacing: .015em;
    color: var(--nv-primary-deep);
}
.nv-show__name em { font-style: normal; color: var(--nv-primary); }

.nv-show__claim {
    margin-top: 12px;
    font-family: var(--nv-display);
    font-size: clamp(18px, 2.5vw, 24px);
    font-style: italic;
    line-height: 1.4;
    color: var(--nv-primary);
}

.nv-show__rule {
    width: 58px; height: 1px;
    margin: 22px 0;
    background: linear-gradient(90deg, var(--nv-accent), transparent);
}

.nv-show__copy {
    font-size: clamp(14.5px, 1.9vw, 16px);
    line-height: 1.78;
    color: var(--nv-muted);
    max-width: 52ch;
}

/* Highlight list */
.nv-show__list { margin-top: 24px; display: grid; gap: 12px; }
.nv-show__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--nv-text);
}
.nv-show__list svg {
    flex: none;
    width: 17px; height: 17px;
    margin-top: 3px;
    color: var(--nv-primary);
}

/* Spec chips */
.nv-specs {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.nv-spec {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--nv-white);
    border: 1px solid var(--nv-line-soft);
    box-shadow: var(--nv-sh-sm);
}
.nv-spec dt {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--nv-secondary);
}
.nv-spec dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--nv-primary-deep);
}

/* ---- Buttons ---- */
.nv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: transform .35s var(--nv-ease), box-shadow .35s var(--nv-ease),
                background .35s var(--nv-ease), color .35s var(--nv-ease),
                border-color .35s var(--nv-ease);
}
.nv-btn svg { width: 14px; height: 14px; }

.nv-btn--solid {
    color: var(--nv-white);
    background: var(--nv-primary);
    box-shadow: 0 12px 26px -14px rgba(15, 79, 74, .8);
}
.nv-btn--solid:hover {
    background: var(--nv-primary-deep);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -14px rgba(15, 79, 74, .85);
}

.nv-btn--ghost {
    color: var(--nv-primary-deep);
    border: 1px solid var(--nv-line);
    background: rgba(255, 255, 255, .6);
}
.nv-btn--ghost:hover {
    border-color: var(--nv-accent);
    color: var(--nv-primary);
    transform: translateY(-2px);
}

.nv-show__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Showcase responsive ---- */
@media (max-width: 980px) {
    .nv-show {
        grid-template-columns: 1fr;
        gap: clamp(28px, 6vw, 44px);
    }
    /* Stacked: image always leads, on every row. */
    .nv-show--flip .nv-show__media { order: 1; }
    .nv-show--flip .nv-show__body { order: 2; }
    .nv-show__index { font-size: clamp(88px, 22vw, 140px); }
    .nv-show__copy { max-width: none; }
}

/* ==================================================================
   9 · PRODUCT CARDS
   ================================================================== */
.nv-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 28px);
}

.nv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    border-radius: 18px;
    background: var(--nv-white);
    border: 1px solid var(--nv-line-soft);
    box-shadow: var(--nv-sh-sm);
    overflow: hidden;
    transition: transform .5s var(--nv-ease), box-shadow .5s var(--nv-ease),
                border-color .5s var(--nv-ease);
}
.nv-card:hover {
    transform: translateY(-8px);
    border-color: var(--nv-gold-soft);
    box-shadow: var(--nv-sh-lg);
}

/* Brand-colour hairline that draws across on hover. */
.nv-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--nv-pill, var(--nv-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--nv-ease);
}
.nv-card:hover::after { transform: scaleX(1); }

.nv-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(110% 80% at 50% 0%, var(--nv-tint, rgba(124, 154, 130, .12)), transparent 65%),
        var(--nv-white);
    overflow: hidden;
}
.nv-card__media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .7s var(--nv-ease);
}
.nv-card:hover .nv-card__media img { transform: scale(1.07); }

.nv-card__spin {
    position: absolute;
    right: 12px; top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nv-primary-deep);
    background: rgba(248, 246, 240, .92);
    border: 1px solid var(--nv-gold-soft);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .4s var(--nv-ease), transform .4s var(--nv-ease);
}
.nv-card:hover .nv-card__spin { opacity: 1; transform: none; }
.nv-card__spin svg { width: 12px; height: 12px; }
@media (hover: none) { .nv-card__spin { opacity: 1; transform: none; } }

.nv-card__body {
    padding: 20px 22px 24px;
    border-top: 1px solid var(--nv-line-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.nv-card__cat {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--nv-secondary);
}
.nv-card__name {
    font-size: clamp(15px, 1.7vw, 17px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--nv-primary-deep);
}
.nv-card__meta {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--nv-muted);
}
.nv-card__meta span:last-child {
    color: var(--nv-primary);
    font-weight: 500;
    letter-spacing: .06em;
}

@media (max-width: 1000px) { .nv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .nv-cards { grid-template-columns: 1fr; } }

/* ==================================================================
   10 · 360 VIEWER MODAL
   ================================================================== */
.nv-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 40px);
    visibility: hidden;
    opacity: 0;
    transition: opacity .45s var(--nv-ease), visibility .45s;
}
.nv-modal.is-open { visibility: visible; opacity: 1; }

.nv-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(6, 35, 31, .62);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.nv-modal__panel {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    max-height: min(880px, 92vh);
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
    /* One row, capped at the panel height. Without this the row is sized to
       the taller column and the stage (with its control bar) overflows the
       panel, which clips it. Each column manages its own overflow instead. */
    grid-template-rows: minmax(0, 1fr);
    border-radius: clamp(16px, 2vw, 26px);
    overflow: hidden;
    /* Glass: translucent cream over the blurred scrim. */
    background: linear-gradient(160deg, rgba(255, 255, 255, .93), rgba(248, 246, 240, .88));
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 60px 120px -40px rgba(6, 35, 31, .7);
    transform: translateY(22px) scale(.965);
    opacity: 0;
    transition: transform .55s var(--nv-ease-out), opacity .45s var(--nv-ease);
}
.nv-modal.is-open .nv-modal__panel { transform: none; opacity: 1; }

.nv-modal__close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    color: var(--nv-primary-deep);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--nv-line);
    backdrop-filter: blur(8px);
    transition: background .3s var(--nv-ease), color .3s var(--nv-ease), transform .3s var(--nv-ease);
}
.nv-modal__close:hover {
    background: var(--nv-primary);
    color: var(--nv-white);
    transform: rotate(90deg);
}
.nv-modal__close svg { width: 16px; height: 16px; }

/* ---- Rotation stage ---- */
.nv-stage {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;   /* product · control bar */
    justify-items: center;
    align-items: center;
    /* Gap doubles as the window the floor reflection shows through. */
    row-gap: clamp(26px, 5vh, 52px);
    min-height: min(58vh, 520px);
    min-width: 0;
    padding: clamp(22px, 3.4vw, 44px);
    background:
        radial-gradient(120% 90% at 50% 8%, var(--nv-tint, rgba(124, 154, 130, .16)), transparent 62%),
        var(--nv-white);
    cursor: grab;
    touch-action: none;              /* we own the horizontal drag */
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.nv-stage.is-dragging { cursor: grabbing; }

/* The rotating object. perspective on the parent, transform on the child. */
.nv-stage__persp {
    perspective: 1400px;
    width: min(100%, 380px);
    max-height: 100%;
    aspect-ratio: 3 / 3.6;
    display: grid;
    place-items: center;
}
.nv-stage__obj {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}
.nv-stage__face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.nv-stage__face--back { transform: rotateY(180deg); }
.nv-stage__face img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* ==================================================================
   TURNTABLE MODE  (.nv-spin)
   Used when a product ships real photographs from several angles.

   The photographs are NOT edited — but they are framed inconsistently
   (the front shot is a different crop and renders the bottle ~14%
   smaller than the side shots). Each frame therefore carries the
   measured bounding box of the bottle inside it, and nueva-vida.js
   converts that into a uniform scale + centre offset so the product
   sits in exactly the same place in every frame. Scaling is always
   uniform: the bottle is never stretched to fit.

   .nv-spin is sized to the bottle itself — its bottom edge IS the
   base of the jar, which is what lets the reflection meet it exactly.
   ================================================================== */
.nv-spin {
    position: relative;
    height: min(52vh, 430px);
    max-height: 100%;
    aspect-ratio: 52 / 100;          /* the widest normalised frame */
    margin-inline: auto;
    transform: translateZ(0);        /* own compositor layer — the crossfade stays smooth */
}

/* Both stacks blend as ONE group: the frames cross-dissolve normally
   inside the group, and only the flattened result multiplies onto the
   stage. Blending each frame separately would double-darken the overlap
   and make the dissolve look like a ghost. */
.nv-spin__stack,
.nv-spin__reflect {
    position: absolute;
    inset: 0;
    isolation: isolate;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.nv-spin__f {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    max-width: none;                 /* the page-wide img reset would cap this */
    opacity: 0;
    will-change: opacity, transform;
    -webkit-user-drag: none;
    user-select: none;
}

/* Mirrored copy, hinged on the base line so it meets the jar exactly. */
.nv-spin__reflect {
    transform: scaleY(-1);
    transform-origin: center bottom;
    filter: blur(1.2px);
    opacity: .5;
    /* Local bottom == the contact line after the flip, so the gradient
       runs to the top to fade away from the base. */
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .16) 12%, transparent 34%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .16) 12%, transparent 34%);
}

/* Contact shadow, tucked under the base line. */
.nv-spin__contact {
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 78%;
    height: 26px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(10, 58, 54, .34), transparent 76%);
    filter: blur(7px);
    pointer-events: none;
}

/* Preload gate — drag is pointless until every frame is decoded. */
.nv-spin__loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 14px;
    align-content: center;
    background: var(--nv-white);
    z-index: 3;
    transition: opacity .45s var(--nv-ease), visibility .45s;
}
.nv-spin__loading[hidden] { display: grid; opacity: 0; visibility: hidden; }

.nv-spin__ring {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(15, 79, 74, .14);
    border-top-color: var(--nv-accent);
    animation: nvSpinRing .9s linear infinite;
}
@keyframes nvSpinRing { to { transform: rotate(360deg); } }

.nv-spin__loading p {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--nv-secondary);
}

/* ==================================================================
   VIEW CHIPS — 360 spin / Top / Base
   The top-down and base photographs are on a different axis to the
   turntable, so they are offered as separate views rather than being
   dropped into the rotation where they would read as a glitch.
   ================================================================== */
.nv-stage__views {
    position: absolute;
    left: 16px; top: 16px;
    z-index: 5;
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(248, 246, 240, .86);
    border: 1px solid var(--nv-line-soft);
    backdrop-filter: blur(8px);
}
.nv-view-chip {
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nv-muted);
    transition: background .3s var(--nv-ease), color .3s var(--nv-ease);
}
.nv-view-chip:hover { color: var(--nv-primary); }
.nv-view-chip.is-active {
    background: var(--nv-primary);
    color: var(--nv-white);
}

/* ==================================================================
   HUD — one control bar: step back · rotation rail · step forward · zoom
   ================================================================== */
.nv-hud {
    position: relative;
    grid-row: 2;
    z-index: 5;
    width: min(100%, 460px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.nv-hud__label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--nv-primary-deep);
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(248, 246, 240, .9);
    border: 1px solid var(--nv-line-soft);
    white-space: nowrap;
}
.nv-hud__label svg { width: 13px; height: 13px; color: var(--nv-secondary); }
/* The nudge stops once the user takes over, so the prompt goes with it. */
.nv-hud__label .nv-hud__prompt { color: var(--nv-secondary); }
.nv-stage.is-touched .nv-hud__prompt { display: none; }
.nv-stage.is-touched .nv-hud__label svg { display: none; }

.nv-hud__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(248, 246, 240, .88);
    border: 1px solid var(--nv-line-soft);
    backdrop-filter: blur(10px);
    box-shadow: var(--nv-sh-sm);
}

/* Rotation rail — doubles as the "this is interactive" indicator and a scrubber. */
.nv-rail {
    position: relative;
    flex: 1;
    height: 26px;
    display: flex;
    align-items: center;
    cursor: ew-resize;
    touch-action: none;
}
.nv-rail__track {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    border-radius: 2px;
    background: rgba(15, 79, 74, .13);
}
.nv-rail__ticks {
    position: absolute;
    left: 0; right: 0;
    height: 100%;
    pointer-events: none;
}
.nv-rail__tick {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 7px;
    margin-top: -3.5px;
    background: rgba(15, 79, 74, .26);
}
.nv-rail__thumb {
    position: absolute;
    top: 50%;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--nv-accent);
    box-shadow: 0 0 0 4px rgba(201, 168, 78, .2), 0 2px 6px rgba(10, 58, 54, .3);
    pointer-events: none;
}
/* Filled portion behind the thumb. */
.nv-rail__fill {
    position: absolute;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nv-primary), var(--nv-secondary), var(--nv-accent));
    pointer-events: none;
}

.nv-hud .nv-tool { flex: none; }

.nv-hud__sep {
    width: 1px;
    height: 18px;
    background: var(--nv-line-soft);
    flex: none;
}

/* Narrow stages: let the bar wrap rather than crush the rail. */
@media (max-width: 560px) {
    .nv-hud { width: calc(100% - 24px); }
    .nv-hud__row { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
    .nv-rail { flex: 1 0 100%; order: -1; }
    .nv-hud__sep { display: none; }
}

/* The lightbox has nothing to rotate. */
.nv-modal--image .nv-hud,
.nv-modal--image .nv-stage__views { display: none; }

/* Contact shadow under the pack. */
.nv-stage__shadow {
    position: absolute;
    left: 50%;
    bottom: clamp(28px, 5vw, 56px);
    width: min(60%, 260px);
    height: 22px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(10, 58, 54, .26), transparent 74%);
    filter: blur(9px);
    pointer-events: none;
}

/* The drag prompt now lives in the HUD label (.nv-hud__prompt). */

/* ---- Stage toolbar (zoom / reset) ---- */
/* Zoom controls now live inside .nv-hud__row, so this is layout-free. */
.nv-stage__tools { display: contents; }
.nv-tool {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--nv-primary-deep);
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--nv-line-soft);
    transition: background .3s var(--nv-ease), color .3s var(--nv-ease);
}
.nv-tool:hover { background: var(--nv-primary); color: var(--nv-white); }
.nv-tool[disabled] { opacity: .4; cursor: not-allowed; }
.nv-tool svg { width: 14px; height: 14px; }

/* ---- Modal info column ---- */
.nv-modal__info {
    padding: clamp(26px, 3.4vw, 44px);
    min-height: 0;
    overflow-y: auto;
    border-left: 1px solid var(--nv-line-soft);
    background: rgba(255, 255, 255, .45);
}
.nv-modal__cat {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--nv-secondary);
}
.nv-modal__name {
    margin-top: 10px;
    font-family: var(--nv-sans);
    font-weight: 600;
    font-size: clamp(21px, 2.6vw, 28px);
    line-height: 1.18;
    color: var(--nv-primary-deep);
}
.nv-modal__claim {
    margin-top: 10px;
    font-family: var(--nv-display);
    font-style: italic;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.45;
    color: var(--nv-primary);
}
.nv-modal__copy {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--nv-muted);
}
.nv-modal__facts {
    margin-top: 22px;
    display: grid;
    gap: 1px;
    background: var(--nv-line-soft);
    border: 1px solid var(--nv-line-soft);
    border-radius: 12px;
    overflow: hidden;
}
.nv-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 15px;
    background: var(--nv-white);
    font-size: 13px;
}
.nv-fact dt { color: var(--nv-muted); }
.nv-fact dd { margin: 0; font-weight: 500; color: var(--nv-primary-deep); text-align: right; }

.nv-modal__note {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--nv-line-soft);
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--nv-muted);
}

/* ---- Image-lightbox variant (hero zoom) ---- */
.nv-modal--image .nv-modal__panel { grid-template-columns: 1fr; width: min(1400px, 100%); }
.nv-modal--image .nv-modal__info { display: none; }
.nv-modal--image .nv-stage { min-height: min(72vh, 760px); background: var(--nv-white); }
.nv-modal--image .nv-stage__persp { width: 100%; aspect-ratio: auto; height: 100%; }
.nv-modal--image .nv-lightbox {
    max-width: 100%;
    max-height: min(72vh, 760px);
    width: auto;
    object-fit: contain;
    transition: transform .35s var(--nv-ease);
    -webkit-user-drag: none;
}

/* ---- Modal responsive ---- */
@media (max-width: 900px) {
    .nv-modal__panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto;   /* panel itself scrolls when stacked */
        max-height: 94vh;
        overflow-y: auto;
    }
    .nv-modal__info { border-left: 0; border-top: 1px solid var(--nv-line-soft); }
    .nv-stage { min-height: 48vh; }
    .nv-stage__persp { width: min(100%, 300px); }
}

/* ==================================================================
   11 · CLOSING BAND
   ================================================================== */
.nv-band {
    position: relative;
    overflow: hidden;
    background: var(--nv-primary-deep);
    color: var(--nv-white);
    text-align: center;
    padding-block: clamp(64px, 9vw, 118px);
}
.nv-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 20% 0%, rgba(124, 154, 130, .30), transparent 62%),
        radial-gradient(50% 60% at 84% 100%, rgba(201, 168, 78, .22), transparent 66%);
    pointer-events: none;
}
.nv-band__q {
    position: relative;
    max-width: 24ch;
    margin-inline: auto;
    font-family: var(--nv-display);
    font-size: clamp(30px, 5.4vw, 56px);
    font-weight: 600;
    line-height: 1.16;
}
.nv-band__q em { font-style: italic; color: var(--nv-accent); }
.nv-band__sub {
    position: relative;
    margin: 20px auto 0;
    max-width: 56ch;
    font-size: clamp(14px, 1.9vw, 16px);
    color: rgba(248, 246, 240, .74);
}
.nv-band .nv-btn {
    position: relative;
    margin-top: 32px;
    background: var(--nv-accent);
    color: var(--nv-primary-ink);
    box-shadow: 0 16px 34px -18px rgba(201, 168, 78, .9);
}
.nv-band .nv-btn:hover { background: #d8ba64; transform: translateY(-2px); }

/* ==================================================================
   12 · FOOTER — NUEVA VIDA only
   ================================================================== */
.nv-footer {
    background: var(--nv-primary-ink);
    color: rgba(248, 246, 240, .72);
    padding-top: clamp(56px, 7vw, 86px);
    font-size: 14px;
}
.nv-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(30px, 4.5vw, 64px);
    padding-bottom: clamp(44px, 6vw, 68px);
}

.nv-footer__mark {
    display: flex;
    align-items: center;
    gap: .3em;
    font-weight: 700;
    font-size: clamp(20px, 2.6vw, 26px);
    letter-spacing: .15em;
    color: var(--nv-white);
}
.nv-footer__mark em { font-style: normal; color: var(--nv-secondary); }
.nv-footer__mark svg { width: .6em; height: .6em; color: var(--nv-accent); }

.nv-footer__tag {
    margin-top: 12px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--nv-accent);
}
.nv-footer__about {
    margin-top: 18px;
    max-width: 42ch;
    line-height: 1.8;
    color: rgba(248, 246, 240, .62);
}

.nv-footer h3 {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--nv-white);
    margin-bottom: 18px;
}
.nv-footer__links { display: grid; gap: 11px; }
.nv-footer__links a,
.nv-footer__links span {
    display: inline-block;
    color: rgba(248, 246, 240, .66);
    transition: color .3s var(--nv-ease), transform .3s var(--nv-ease);
}
.nv-footer__links a:hover { color: var(--nv-accent); transform: translateX(3px); }

.nv-footer__contact { display: grid; gap: 12px; }
.nv-footer__contact li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; }
.nv-footer__contact svg {
    flex: none;
    width: 15px; height: 15px;
    margin-top: 4px;
    color: var(--nv-secondary);
}
.nv-footer__contact a { color: rgba(248, 246, 240, .66); transition: color .3s var(--nv-ease); }
.nv-footer__contact a:hover { color: var(--nv-accent); }

.nv-footer__bar {
    border-top: 1px solid rgba(248, 246, 240, .1);
    padding-block: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: rgba(248, 246, 240, .48);
}
.nv-footer__bar nav { display: flex; flex-wrap: wrap; gap: 22px; }
.nv-footer__bar a { transition: color .3s var(--nv-ease); }
.nv-footer__bar a:hover { color: var(--nv-accent); }

.nv-footer__legal {
    padding-bottom: 26px;
    font-size: 11px;
    line-height: 1.7;
    color: rgba(248, 246, 240, .38);
    max-width: 92ch;
}

@media (max-width: 900px) {
    .nv-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nv-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .nv-footer__grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   13 · SCROLL REVEAL
   Elements start shifted; nueva-vida.js adds .is-in via IntersectionObserver.
   --nv-d staggers siblings.
   ================================================================== */
.nv-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .85s var(--nv-ease-out) var(--nv-d, 0ms),
        transform .95s var(--nv-ease-out) var(--nv-d, 0ms);
}
.nv-reveal.is-in { opacity: 1; transform: none; }

.nv-reveal--left  { transform: translateX(-34px); }
.nv-reveal--right { transform: translateX(34px); }
.nv-reveal--scale { transform: translateY(24px) scale(.97); }

/* If the observer never runs (JS off / errors), nothing must stay hidden. */
.no-js .nv-reveal,
.nv-noreveal .nv-reveal { opacity: 1; transform: none; }

/* ==================================================================
   14 · REDUCED MOTION
   Keep the design, drop the movement.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    html.nv-html { scroll-behavior: auto; }

    .nv *,
    .nv *::before,
    .nv *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .nv-reveal,
    .nv-page,
    .nv-hero__frame { opacity: 1 !important; transform: none !important; }
    .nv-load__w,
    .nv-load__glyph,
    .nv-load__tag { opacity: 1; transform: none; }
    .nv-load__bar::after { display: none; }
}

/* ==================================================================
   15 · PRINT
   ================================================================== */
@media print {
    #nvLoader, .nv-bar, .nv-modal, .nv-slider__nav, .nv-slider__dots { display: none !important; }
    body.nv { background: #fff; }
    .nv-slide { position: relative; opacity: 1; transform: none; }
}

/* ==================================================================
   16 · 360 VIEWER — shared shell pieces
   Added alongside the turntable. .nv-stage__zoomwrap is the single
   element that carries the zoom transform, so every mode (turntable,
   two-face flip, still view, lightbox) zooms through one code path.
   ================================================================== */
.nv-stage__zoomwrap {
    position: relative;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    min-height: 0;
    display: grid;
    place-items: center;
    width: 100%;
    transform-origin: center center;
    transition: transform .3s var(--nv-ease);
    will-change: transform;
}

/* Still views (top of cap, base of bottle) — a different camera axis to
   the turntable, so they are presented flat rather than rotated. */
.nv-still {
    display: grid;
    place-items: center;
    height: min(52vh, 430px);
    max-height: 100%;
    width: 100%;
}
.nv-still__img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Nothing to rotate on a still view — keep zoom, drop the rail. */
.nv-hud.is-still .nv-rail,
.nv-hud.is-still [data-step],
.nv-hud.is-still .nv-hud__sep,
.nv-hud.is-still .nv-hud__prompt,
.nv-hud.is-still .nv-hud__label svg { display: none; }
.nv-hud.is-still .nv-hud__row { width: auto; margin-inline: auto; }

/* The turntable is a cross-dissolve, not a 3D flip — no perspective needed. */
@media (max-width: 900px) {
    .nv-spin { height: min(42vh, 340px); }
    .nv-still { height: min(42vh, 340px); }
}