/* venture.css — /venture · Te Raranga final presentation pass
   ------------------------------------------------------------------
   THE IDEA: the page is a kete being woven. Every surface is cloth —
   crossed harakeke strands (raranga) over warm cream paper, with ink-
   dark type and brand teal owning every point of authority. Panels are
   woven panels; arriving at one is watching that panel complete on the
   loom. This is not a redesign — it is the existing weaving system,
   deepened into one coherent, bilingual presentation.

   Calibrated live with Tobias across 2026-08-10:
     · "I just wanted off-whites/creams for more luxury feel" — cream
       paper, ink type, teal authority. Never flat white, never dark.
     · "teal not green" — accent is the BRAND teal, not kawakawa.
     · "goes through almost like slides" — full-height panels, proximity
       snap (upgraded to mandatory + auto-fallback this pass).
     · "no plain backgrounds" — the raranga weave is felt on every panel.

   TRAPS HELD:
     · snap is PROXIMITY whenever any in-view panel overshoots the
       viewport, and is dropped entirely on short/small screens. The
       .is-overshoot class on the stage drives the fallback.
     · every colour is claimed DIRECTLY on the element; typography.css
       sets h1 colour on the element and inheritance loses.
     · reveals fail VISIBLE (failsafe in venture.html).
     · never put a max-width on .content-area, it is flex-grow:1; the
       measure lives on .vwrap.
     · the static scan-demo state is truthful (128/128) in the HTML; JS
       only re-runs the animation for effect.
   ------------------------------------------------------------------ */

body[data-current-page="venture"] {
    --v-paper: #F6F1E7;
    --v-panel: #EFE7D8;
    --v-panel-warm: #F2EBDD;
    --v-ink: #14201E;
    --v-ink-soft: #465653;
    --v-ink-faint: #7A8985;
    --v-rule: #DCD2BE;
    --v-rule-lit: #C3B59A;
    --v-teal: #0E7F73;
    --v-teal-bright: #14b8a6;
    --v-teal-deep: #0A5F56;

    /* The weave, dark thread on light cloth. */
    --v-raranga:
        repeating-linear-gradient(45deg, rgba(14, 127, 115, .085) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(-45deg, rgba(20, 32, 30, .055) 0 1px, transparent 1px 15px);

    --v-warp:
        repeating-linear-gradient(90deg, rgba(20, 32, 30, .040) 0 1px, transparent 1px 96px);

    /* Slide geometry — one authoritative height rule. */
    --v-slide-h: calc(100svh - var(--header-height, 75px));

    background: var(--v-paper);
    color: var(--v-ink);
}

body[data-current-page="venture"] .content-area {
    background: var(--v-paper);
    color: var(--v-ink);
    position: relative;
}

/* Grain must MULTIPLY on a light ground; overlay silvers it. Scoped to the
   content area only (absolute, not fixed) so it never covers the header,
   sidebar, or footer. */
body[data-current-page="venture"] .content-area::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .22;
    mix-blend-mode: multiply;
    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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* Venture content sits above the grain. The panels are what needs lifting;
   the two chrome elements carry their own positioning and must keep it —
   this rule outranks .vindex/.vprogress on specificity, so it excludes them
   rather than being restored afterwards. */
body[data-current-page="venture"] .content-area > *:not(.vindex):not(.vprogress) {
    position: relative;
    z-index: 1;
}

/* ── Mandatory snap (desktop), with auto-fallback ──────────────────────────
   The stage is mandatory so the deck rhythm reads. When the active panel
   overshoots the viewport (.is-overshoot, set by the active-panel runner),
   the whole stage drops to proximity so a tall merged panel never traps.
   Position/z-index/background are set in THE SHELL section below. */
body[data-current-page="venture"] .main-container {
    scroll-snap-type: y mandatory;
}

body[data-current-page="venture"] .main-container.is-overshoot {
    scroll-snap-type: y proximity;
}

/* ── Panels ─────────────────────────────────────────────────────────────── */
.vband,
.vhero {
    position: relative;
    isolation: isolate;
    background-color: var(--v-paper);
    background-image: var(--v-raranga), var(--v-warp);
    border-bottom: 1px solid var(--v-rule);
}

.vband.vslide {
    scroll-snap-align: start;
    min-height: var(--v-slide-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4.5vw, 3.5rem) 0;
}

.vband--alt {
    background-color: var(--v-panel);
    background-image: var(--v-raranga), var(--v-warp);
}

/* A panel allowed to flow past the viewport (rare, content-heavy merge). */
.vband--flow {
    min-height: 0;
}

/* ── THE ART, one photograph per slide ──────────────────────────────────────
   Own layer, inset 0, cover — so it always fills, never gutters. Held low
   and scrimmed toward the ink column so type keeps its contrast. */
.vband::after,
.vhero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--v-art, none);
    background-size: cover;
    background-position: var(--v-art-pos, 50% 50%);
    background-repeat: no-repeat;
    opacity: .24;
    filter: saturate(.82) contrast(.96);
    pointer-events: none;
    transform-origin: center;
}

/* The cream scrim over the art — a wash, not a curtain. */
.vband::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, var(--v-paper) 4%, rgba(246, 241, 231, .93) 40%, rgba(246, 241, 231, .70) 100%);
    pointer-events: none;
}

.vband--alt::before {
    background:
        linear-gradient(260deg, var(--v-panel) 4%, rgba(239, 231, 216, .93) 40%, rgba(239, 231, 216, .70) 100%);
}

/* The cloths, in scroll order — one photograph per panel, drawn from the
   least-used of the 64. Each inspected; rejected ones are pale overcast. */
.vband:nth-of-type(1)  { --v-art: url("/assets/images/subjects/backgrounds/arts-piha.jpg");        --v-art-pos: 50% 58%; }
.vband:nth-of-type(2)  { --v-art: url("/assets/images/subjects/backgrounds/health-red-peaks.jpg"); --v-art-pos: 50% 62%; }
.vband:nth-of-type(3)  { --v-art: url("/assets/images/subjects/backgrounds/cross-aoraki.jpg");     --v-art-pos: 50% 44%; }
.vband:nth-of-type(4)  { --v-art: url("/assets/images/subjects/backgrounds/pe-kaikoura.jpg");      --v-art-pos: 50% 72%; }
.vband:nth-of-type(5)  { --v-art: url("/assets/images/subjects/backgrounds/arts-wanaka.jpg");      --v-art-pos: 50% 46%; }
.vband:nth-of-type(6)  { --v-art: url("/assets/images/subjects/backgrounds/arts-paint.jpg");       --v-art-pos: 50% 50%; }
.vband:nth-of-type(7)  { --v-art: url("/assets/images/subjects/backgrounds/pe-beach.jpg");         --v-art-pos: 50% 55%; }
.vband:nth-of-type(8)  { --v-art: url("/assets/images/subjects/backgrounds/arts-piha.jpg");        --v-art-pos: 70% 65%; }
.vband:nth-of-type(9)  { --v-art: url("/assets/images/subjects/backgrounds/pe-beach.jpg");         --v-art-pos: 25% 60%; }
.vband:nth-of-type(10) { --v-art: url("/assets/images/subjects/backgrounds/health-red-peaks.jpg"); --v-art-pos: 78% 50%; }
.vband:nth-of-type(11) { --v-art: url("/assets/images/subjects/backgrounds/pe-kaikoura.jpg");      --v-art-pos: 22% 60%; }
.vband:nth-of-type(12) { --v-art: url("/assets/images/subjects/backgrounds/arts-wanaka.jpg");      --v-art-pos: 78% 52%; }

/* Plate panels hold the art at higher strength — the screenshot is the point. */
.vband--plate::after { opacity: .70; }
.vband--plate::before {
    background: linear-gradient(100deg, rgba(246, 241, 231, .96) 0%, rgba(246, 241, 231, .74) 34%, rgba(246, 241, 231, .30) 100%);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.vhero {
    background-color: var(--v-panel-warm);
    scroll-snap-align: start;
}

/* The hero photograph. Golden-hour Taranaki coast — warm, and the closest
   to portrait in the set, so a tall column crops it least. */
.vhero__art {
    background-image: url("/assets/images/subjects/backgrounds/english-cliffs.jpg");
    background-position: 58% 52%;
    filter: saturate(1.04) contrast(1.07) brightness(.97);
    border-left: 1px solid var(--v-rule);
}

.vhero__art::before {
    background: linear-gradient(90deg, var(--v-panel-warm) 0%, rgba(242, 235, 221, .52) 30%, rgba(242, 235, 221, 0) 66%);
}

.vhero__art::after {
    opacity: .18;
}

.vhero__artcap {
    background: rgba(246, 241, 231, .86);
    border-color: var(--v-rule-lit);
    color: var(--v-ink-soft);
}

@media (max-width: 900px) {
    .vhero__art::before {
        background: linear-gradient(180deg, var(--v-panel-warm) 0%, rgba(242, 235, 221, 0) 45%);
    }
}

/* ── Type and furniture on the light ground ─────────────────────────────── */
.vhero__title,
.vh2,
.vp--emph,
.vcol__h,
.vplate__cap,
.vfull__quote {
    color: var(--v-ink);
}

.vp,
.vlist,
.vcol__p,
.vnote,
.vhero__lead {
    color: var(--v-ink-soft);
}

.vlabel,
.vhero__mark,
.vcol__h--teal,
.vscan__state {
    color: var(--v-teal);
}

/* ── Typographic scale — violent contrast, luxury editorial ─────────────── */
.vhero__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.4rem, 7vw, 6rem);
    line-height: .92;
    letter-spacing: -.045em;
    text-transform: uppercase;
    color: var(--v-ink);
    margin: 0 0 clamp(1.35rem, 3vw, 2rem);
    max-width: 14ch;
}

.vh2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.038em;
    text-transform: uppercase;
    color: var(--v-ink);
    margin: 0 0 var(--space-lg);
    max-width: 18ch;
}

.vh2--wide,
.vp--wide {
    max-width: 46ch;
}

.vlabel,
.vhero__mark {
    font-family: 'Outfit', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

.vhero__lead,
.vp {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    line-height: 1.72;
    max-width: 60ch;
    margin: 0 0 var(--space-md);
}

.vp:last-child {
    margin-bottom: 0;
}

.vp strong {
    color: var(--v-ink);
    font-weight: 600;
}

.vp em {
    color: var(--v-teal);
    font-style: italic;
}

.vp a,
.vcol__p a,
.vlist a {
    color: var(--v-teal);
}

.vp--emph {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.028em;
    color: var(--v-ink);
    max-width: 24ch;
}

/* ── Numbered rail + content ────────────────────────────────────────────── */
.vrow {
    display: grid;
    grid-template-columns: minmax(7rem, 13%) 1fr;
    gap: clamp(1.25rem, 4vw, 3.5rem);
    align-items: start;
}

@media (max-width: 720px) {
    .vrow {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

/* ── Micro-tags ─────────────────────────────────────────────────────────── */
.vtags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 var(--space-lg);
    padding: 0;
    list-style: none;
}

.vtag {
    display: inline-block;
    border: 1px solid var(--v-rule-lit);
    padding: 0.3rem 0.6rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--v-ink-soft);
    white-space: nowrap;
}

.vtag--mark {
    border-color: var(--v-teal);
    color: var(--v-teal);
}

.vtag--mark::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--v-teal);
    margin-right: 0.4rem;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.vactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.vbtn {
    display: inline-block;
    padding: 0.85rem 1.6rem;
    border: 1px solid var(--v-ink);
    border-radius: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--v-ink);
    background: transparent;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

.vbtn:hover,
.vbtn:focus-visible {
    background: var(--v-ink);
    border-color: var(--v-ink);
    color: var(--v-paper);
}

.vbtn--solid {
    background: var(--v-teal);
    border-color: var(--v-teal);
    color: #FFFFFF;
}

.vbtn--solid:hover,
.vbtn--solid:focus-visible {
    background: var(--v-ink);
    border-color: var(--v-ink);
    color: var(--v-paper);
}

/* ── Stats ──────────────────────────────────────────────────────────────── */
.vstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    border-top: 1px solid var(--v-teal);
    margin: 0;
}

.vstat {
    padding: var(--space-lg) var(--space-md) var(--space-md) 0;
    border-bottom: 1px solid var(--v-rule);
    background-image: linear-gradient(180deg, rgba(14, 127, 115, .07), transparent 62%);
}

.vstat__value {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -0.035em;
    color: var(--v-teal);
    margin: 0 0 .55rem;
}

.vstat__label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
    margin: 0;
}

/* ── Column sets ────────────────────────────────────────────────────────── */
.vcols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0;
    border-top: 1px solid var(--v-rule);
    margin: var(--space-md) 0 0;
}

.vcol {
    padding: var(--space-lg) clamp(1rem, 2.5vw, 2rem) var(--space-md) 0;
    border-right: 1px solid var(--v-rule);
}

.vcol:last-child {
    border-right: 0;
}

@media (max-width: 720px) {
    .vcol {
        border-right: 0;
        border-bottom: 1px solid var(--v-rule);
        padding-right: 0;
    }

    .vcol:last-child {
        border-bottom: 0;
    }
}

.vcol__h {
    font-family: 'Outfit', sans-serif;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--v-ink);
    margin: 0 0 var(--space-sm);
}

.vcol__h--teal {
    color: var(--v-teal);
}

.vcol__p {
    font-size: .94rem;
    line-height: 1.6;
    color: var(--v-ink-soft);
    margin: 0;
}

/* ── Why-now block (merged into the problem panel) ───────────────────────── */
.vwhy {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--v-rule);
}

.vwhy__label {
    font-family: 'Outfit', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--v-teal);
    margin: 0 0 var(--space-sm);
}

/* ── Four-ways strip (merged into product panel) ─────────────────────────── */
.vways {
    margin: var(--space-md) 0;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--v-rule);
    border-bottom: 1px solid var(--v-rule);
}

.vways__label {
    font-family: 'Outfit', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--v-teal);
    margin: 0 0 var(--space-sm);
}

.vways__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vways__list li {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--v-ink);
}

.vways__list li:not(:last-child)::after {
    content: "·";
    margin-left: 1.25rem;
    color: var(--v-ink-faint);
}

/* ── Competitor matrix (compact, not a giant table) ──────────────────────── */
.vmatrix {
    margin-top: var(--space-lg);
    border-top: 1px solid var(--v-teal);
    font-size: .85rem;
}

.vmatrix__head,
.vmatrix__row {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr 1.1fr 1fr 1fr;
    gap: .5rem;
    align-items: center;
}

.vmatrix__head {
    padding: .6rem 0;
    border-bottom: 1px solid var(--v-rule);
}

.vmatrix__head span {
    font-family: 'Outfit', sans-serif;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
}

.vmatrix__row {
    padding: .65rem 0;
    border-bottom: 1px solid var(--v-rule);
}

.vmatrix__row span {
    color: var(--v-ink-soft);
}

.vmatrix__row [role="rowheader"] {
    font-weight: 600;
    color: var(--v-ink);
}

.vmatrix__row--us {
    background: rgba(14, 127, 115, .07);
}

.vmatrix__row--us span,
.vmatrix__row--us [role="rowheader"] {
    color: var(--v-teal);
    font-weight: 600;
}

/* On a 390px screen a five-column comparison grid is unreadable and
   overflows. Each row becomes a stacked card: the alternative name as a
   header, the attributes below as a compact definition list. The header
   row hides entirely on mobile — the cards are self-labelling. */
@media (max-width: 720px) {
    .vmatrix__head { display: none; }

    .vmatrix__row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: var(--space-sm) 0;
    }

    /* The first cell (rowheader) is the card title. */
    .vmatrix__row [role="rowheader"] {
        font-size: .9rem;
        margin-bottom: .3rem;
    }

    /* Remaining cells flow inline with their visually-hidden labels. */
    .vmatrix__row span:not([role="rowheader"]) {
        font-size: .78rem;
        line-height: 1.5;
        color: var(--v-ink-soft);
    }

    .vmatrix__row span:not([role="rowheader"])::before {
        content: attr(data-label);
        font-family: 'Outfit', sans-serif;
        font-size: .58rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--v-ink-faint);
        margin-right: .4rem;
    }
}

/* ── Business model — progressive ladder ─────────────────────────────────── */
.vladder {
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: ladder;
    border-top: 1px solid var(--v-rule);
}

.vladder__step {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--v-rule);
    position: relative;
}

/* the connecting rise between rungs */
.vladder__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    bottom: -1px;
    width: 1px;
    height: var(--space-md);
    background: var(--v-rule-lit);
    transform: translateX(-0.5px);
}

.vladder__num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--v-teal);
    line-height: 1;
}

.vladder__h {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--v-ink);
    margin: 0 0 .35rem;
}

.vladder__h a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.vladder__h a:hover,
.vladder__h a:focus-visible {
    color: var(--v-teal);
    border-bottom-color: var(--v-teal);
}

.vladder__p {
    font-size: .94rem;
    line-height: 1.6;
    color: var(--v-ink-soft);
    margin: 0;
}

/* ── Scale — sequenced hypotheses, certainty recedes ─────────────────────── */
.vhyp {
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--v-rule);
}

.vhyp__item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--v-rule);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
}

.vhyp__tag {
    font-family: 'Outfit', sans-serif;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v-teal);
}

.vhyp__item--if .vhyp__tag { color: var(--v-ink-soft); }
.vhyp__item--later .vhyp__tag { color: var(--v-ink-faint); }

.vhyp__h {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--v-ink);
    margin: 0;
}

/* certainty recedes: later hypotheses type slightly quieter */
.vhyp__item--if .vhyp__h { color: var(--v-ink-soft); }
.vhyp__item--later .vhyp__h { color: var(--v-ink-faint); }

.vhyp__p {
    font-size: .94rem;
    line-height: 1.6;
    color: var(--v-ink-soft);
    margin: 0;
}

.vhyp__item--later .vhyp__p { color: var(--v-ink-faint); }

/* ── Founder — build chain side panel ────────────────────────────────────── */
.vbuild {
    margin: var(--space-lg) 0 0;
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
    border-left: 2px solid var(--v-teal);
    background: rgba(14, 127, 115, .05);
}

.vbuild__label {
    font-family: 'Outfit', sans-serif;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--v-teal);
    margin: 0 0 var(--space-sm);
}

.vbuild__chain {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 0;
    margin: 0 0 var(--space-sm);
    padding: 0;
    list-style: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    color: var(--v-ink);
}

.vbuild__chain li {
    position: relative;
    padding-right: 1.6rem;
}

.vbuild__chain li:not(:last-child)::after {
    content: "↓";
    position: absolute;
    right: .35rem;
    color: var(--v-teal);
}

.vbuild__note {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--v-ink-soft);
    margin: 0;
}

/* ── What is still open — risk register ──────────────────────────────────── */
.vrisks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0;
    margin-top: var(--space-md);
    border-top: 1px solid var(--v-rule);
}

.vrisk {
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
    border-bottom: 1px solid var(--v-rule);
    border-right: 1px solid var(--v-rule);
}

.vrisk:nth-child(2n) { border-right: 0; }
.vrisk:nth-child(2n) { padding-left: var(--space-md); padding-right: 0; }

@media (max-width: 720px) {
    .vrisk { border-right: 0; padding-left: 0; }
}

.vrisk__h {
    font-family: 'Outfit', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--v-teal);
    margin: 0 0 var(--space-sm);
}

.vrisk__dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .15rem .75rem;
}

.vrisk__dl dt {
    font-family: 'Outfit', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
    padding-top: .15rem;
}

.vrisk__dl dd {
    font-size: .88rem;
    line-height: 1.5;
    color: var(--v-ink-soft);
    margin: 0;
}

/* ── Notes and lists ────────────────────────────────────────────────────── */
.vnote {
    font-size: .86rem;
    line-height: 1.6;
    color: var(--v-ink-faint);
    max-width: 58ch;
    border-left: 2px solid var(--v-rule-lit);
    padding-left: var(--space-md);
    margin: var(--space-lg) 0 0;
}

.vlist {
    max-width: 62ch;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--v-rule);
}

.vlist li {
    font-size: .98rem;
    line-height: 1.6;
    color: var(--v-ink-soft);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--v-rule);
}

.vlist li strong {
    color: var(--v-ink);
    font-weight: 600;
}

/* ── Spec plates ────────────────────────────────────────────────────────── */
.vsplit {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.vsplit--flip .vsplit__text { order: 2; }
.vsplit--flip .vplate { order: 1; }

@media (max-width: 900px) {
    .vsplit { grid-template-columns: 1fr; }
    .vsplit--flip .vsplit__text,
    .vsplit--flip .vplate { order: initial; }
}

.vplate {
    margin: 0;
}

.vplate__frame {
    position: relative;
    border: 1px solid var(--v-rule);
    background-color: rgba(255, 253, 248, .86);
    background-image: var(--v-raranga);
    padding: clamp(.6rem, 1.5vw, 1rem);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .4);
}

.vplate__frame img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--v-rule);
}

.vplate__tick {
    position: absolute;
    width: 11px;
    height: 11px;
    border-color: var(--v-teal);
    border-style: solid;
    border-width: 0;
}

.vplate__tick--tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.vplate__tick--tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.vplate__tick--bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.vplate__tick--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.vplate__rule {
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    border-top: 1px dashed rgba(14, 127, 115, .5);
    pointer-events: none;
}

.vplate__pin {
    position: absolute;
    background: var(--v-paper);
    border: 1px solid var(--v-teal);
    padding: .22rem .5rem;
    font-family: 'Outfit', sans-serif;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--v-teal);
    white-space: nowrap;
    pointer-events: none;
}

.vplate__pin--a { top: calc(38% - .72rem); left: -.4rem; }
.vplate__pin--b { top: calc(38% - .72rem); right: -.4rem; }

@media (max-width: 560px) {
    .vplate__pin--a,
    .vplate__pin--b { display: none; }
}

.vplate__cap {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: .55rem;
    font-family: 'Outfit', sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
}

/* ── Progress rule ──────────────────────────────────────────────────────── */
.vprogress {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 2px;
    background: var(--v-rule);
}

.vprogress__bar {
    display: block;
    height: 100%;
    background: var(--v-teal);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .08s linear;
}

/* ── Reveal ─────────────────────────────────────────────────────────────── */
.js-vreveal .vreveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .66s cubic-bezier(.22, .61, .36, 1) var(--vd, 0ms),
        transform .66s cubic-bezier(.22, .61, .36, 1) var(--vd, 0ms);
    will-change: opacity, transform;
}

.js-vreveal .vreveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .js-vreveal .vreveal,
    .js-vreveal .vreveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    body[data-current-page="venture"] .main-container {
        scroll-snap-type: none;
    }

    .vprogress__bar {
        transition: none;
    }
}

/* Snap is dropped where height is scarce. */
@media (max-height: 720px),
(max-width: 900px) {
    body[data-current-page="venture"] .main-container {
        scroll-snap-type: none;
    }

    .vband.vslide {
        min-height: 0;
    }
}

.vband--close {
    border-bottom: 0;
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {

    body[data-current-page="venture"],
    body[data-current-page="venture"] .content-area,
    .vband,
    .vband--alt,
    .vband--mark {
        background: #fff !important;
        color: #000 !important;
    }

    body[data-current-page="venture"] .content-area::after,
    .vband::after,
    .vband::before,
    .vhero::after { display: none !important; }

    .vh2,
    .vp,
    .vp--emph,
    .vstat__value,
    .vlist li,
    .vcol__h,
    .vcol__p {
        color: #000 !important;
    }

    .vhero__art,
    .vfull,
    .vprogress,
    .vactions,
    .vplate__pin,
    .vplate__rule,
    .vgo {
        display: none !important;
    }

    .vband,
    .vhero {
        min-height: 0 !important;
        break-inside: avoid;
    }

    .js-vreveal .vreveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CLICKABLE DEPTH
   ═══════════════════════════════════════════════════════════════════════ */

.vstat__label a,
.vcol__h a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .14s ease, border-color .14s ease;
}

.vstat__label a:hover,
.vstat__label a:focus-visible,
.vcol__h a:hover,
.vcol__h a:focus-visible {
    color: var(--v-teal);
    border-bottom-color: var(--v-teal);
}

.vplate__frame--link {
    display: block;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.vplate__frame--link:hover,
.vplate__frame--link:focus-visible {
    border-color: var(--v-teal);
    transform: translateY(-3px);
    box-shadow: 0 36px 80px -40px rgba(0, 0, 0, .45);
}

.vplate__frame--link:hover .vplate__tick,
.vplate__frame--link:focus-visible .vplate__tick {
    border-color: var(--v-ink);
}

.vplate__go {
    color: var(--v-teal);
}

.vplate__frame--link:hover + .vplate__cap .vplate__go {
    color: var(--v-ink);
}

/* "Go deeper" rail */
.vgo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    list-style: none;
    margin: var(--space-lg) 0 0;
    padding: var(--space-md) 0 0;
    border-top: 1px solid var(--v-rule);
}

.vgo__lead {
    font-family: 'Outfit', sans-serif;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
}

.vgo__link {
    display: inline-block;
    border: 1px solid var(--v-rule-lit);
    padding: .38rem .7rem;
    font-family: 'Outfit', sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--v-ink-soft);
    transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}

.vgo__link::after {
    content: " \2192";
    color: var(--v-teal);
}

.vgo__link:hover,
.vgo__link:focus-visible {
    border-color: var(--v-teal);
    color: var(--v-ink);
    background: rgba(14, 127, 115, .1);
}

.vband--mark .vgo { border-top-color: rgba(255, 255, 255, .28); }
.vband--mark .vgo__lead { color: #a9d8d2; }
.vband--mark .vgo__link { border-color: rgba(255, 255, 255, .38); color: #eafffb; }
.vband--mark .vgo__link::after { color: #eafffb; }
.vband--mark .vgo__link:hover,
.vband--mark .vgo__link:focus-visible {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}

@media print {
    .vgo { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TE WHATU — the loom canvas lives at body level so it never affects layout.
   ═══════════════════════════════════════════════════════════════════════ */

.vloom {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* Everything above the loom. */
body[data-current-page="venture"] .vhero,
body[data-current-page="venture"] .vband,
body[data-current-page="venture"] .vfull,
body[data-current-page="venture"] .vprogress {
    position: relative;
    z-index: 4;
}

body[data-current-page="venture"] .vindex {
    z-index: 6;
}

body[data-current-page="venture"] .content-area {
    background: transparent;
}

body[data-current-page="venture"] {
    background: #F6F1E7;
}

/* ── Section index rail ─────────────────────────────────────────────────── */
.vindex {
    position: fixed;
    right: clamp(.75rem, 2vw, 1.75rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
}

.vindex__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.vindex__item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    cursor: pointer;
    /* enlarged hit target around the thin tick */
    padding: .6rem 0 .6rem .6rem;
    margin: -.25rem 0;
}

.vindex__dot {
    width: 22px;
    height: 2px;
    background: rgba(20, 32, 30, .28);
    transition: background-color .2s ease, width .2s ease;
}

.vindex__item:hover .vindex__dot,
.vindex__item.is-on .vindex__dot {
    background: var(--v-teal);
    width: 34px;
}

.vindex__tip {
    font-family: 'Outfit', sans-serif;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s ease, transform .2s ease;
    white-space: nowrap;
    order: -1;
    background: rgba(246, 241, 231, .92);
    padding: .2rem .45rem;
    border: 1px solid var(--v-rule);
}

.vindex__item:hover .vindex__tip,
.vindex__item.is-on .vindex__tip {
    opacity: 1;
    transform: none;
    color: var(--v-teal);
}

@media (max-width: 1100px) {
    .vindex {
        display: none;
    }
}

/* The hero's index entry reads "Open". */
.vindex__item:first-child .vindex__tip { font-size: 0; }
.vindex__item:first-child .vindex__tip::after {
    content: "Open";
    font-size: .5625rem;
    letter-spacing: .14em;
}

/* ── Cursor node ────────────────────────────────────────────────────────── */
.vcursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 1px solid var(--v-teal);
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease, width .18s ease, height .18s ease, margin .18s ease, background-color .18s ease;
}

.vcursor.is-on { opacity: .85; }

.vcursor.is-live {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    background: rgba(14, 127, 115, .16);
}

@media (pointer:coarse) {
    .vcursor { display: none; }
}

/* ── Kinetic headlines — words weave up from behind a clip mask ─────────── */
.vsplitwords {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 4.4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: var(--v-ink);
    margin: 0 0 var(--space-lg);
    max-width: 20ch;
}

.vword {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.vword > i {
    display: inline-block;
    font-style: normal;
    transform: translateY(105%);
    opacity: 0;
    transition: transform .78s cubic-bezier(.16, .84, .34, 1) var(--wd, 0ms),
        opacity .5s ease var(--wd, 0ms);
}

.vsplitwords.is-in .vword > i {
    transform: none;
    opacity: 1;
}

/* ── THE CHECK — the signature moment ───────────────────────────────────── */
.vband--scan { background-color: var(--v-panel); }

.vscan {
    border: 1px solid var(--v-rule-lit);
    background: rgba(255, 253, 248, .92);
    background-image: var(--v-raranga);
    padding: clamp(1.1rem, 2.6vw, 2rem);
    margin: var(--space-xl) 0 var(--space-lg);
    max-width: 62rem;
    position: relative;
    transition: border-color .5s ease, box-shadow .5s ease;
}

.vscan.is-running {
    border-color: rgba(14, 127, 115, .55);
}

/* The base markup already carries is-done styling; JS adds the class when
   the animation finishes. Both paths land on the verified look. */
.vscan.is-done {
    border-color: var(--v-teal);
    box-shadow: 0 0 0 1px rgba(14, 127, 115, .22), 0 30px 70px -45px rgba(14, 127, 115, .45);
}

.vscan__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: var(--space-md);
}

.vscan__chip {
    border: 1px solid var(--v-rule-lit);
    padding: .22rem .55rem;
    font-family: 'Outfit', sans-serif;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
}

.vscan__state {
    margin-left: auto;
    font-family: 'Outfit', sans-serif;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v-teal);
}

.vscan__text {
    font-family: 'Merriweather', Georgia, serif;
    font-size: clamp(1.02rem, 2.3vw, 1.5rem);
    line-height: 1.55;
    color: var(--v-ink);
    margin: 0 0 var(--space-lg);
}

.vscan__hit {
    background: transparent;
    color: var(--v-ink);
    box-shadow: inset 0 -.42em 0 rgba(14, 127, 115, .22);
}

.vscan__rest {
    color: var(--v-ink-faint);
    opacity: .55;
}

.vscan__cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: var(--v-teal);
    vertical-align: -.16em;
    animation: vblink .6s steps(2, start) infinite;
}

@keyframes vblink {
    to { opacity: 0; }
}

.vscan__bar {
    height: 2px;
    background: var(--v-rule);
    overflow: hidden;
}

.vscan__fill {
    display: block;
    height: 100%;
    background: var(--v-teal);
    transform-origin: 0 50%;
}

.vscan__foot {
    margin-top: .6rem;
    font-family: 'Outfit', sans-serif;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
}

/* ═══════════════════════════════════════════════════════════════════════
   THE ACCENT PANEL — the one saturated moment, teal ground.
   Specificity match (.vband.vband--mark) beats nth-of-type.
   ═══════════════════════════════════════════════════════════════════════ */

.vband.vband--mark {
    background-color: var(--v-teal-deep);
    background-image:
        radial-gradient(80% 70% at 84% 12%, rgba(226, 255, 250, .20), transparent 68%),
        linear-gradient(135deg, #0A5F56 0%, #073F45 100%),
        var(--v-raranga);
}

.vband.vband--mark::before,
.vband.vband--mark::after { display: none; }

.vband.vband--mark .vh2,
.vband.vband--mark .vp--emph,
.vband.vband--mark .vhero__title { color: #FFFFFF; }
.vband.vband--mark .vp,
.vband.vband--mark .vlist { color: #D6EFEA; }
.vband.vband--mark .vlabel { color: #9BE0D6; }
.vband.vband--mark .vgo__link { color: #BFF0E8; }

.vband.vband--scan {
    background-color: var(--v-panel);
}

/* Statement slides are ink-on-cream unless they are the accent panel. */
.vband--statement:not(.vband--mark) .vh2 {
    color: var(--v-ink);
}

/* The numeral slide — an oversized ghost figure carries the panel. */
.vband--numeral .vrow {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
}

.vband--numeral .vlabel::before {
    content: attr(data-numeral);
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(6rem, 17vw, 15rem);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -.06em;
    color: var(--v-teal);
    opacity: .17;
    margin-bottom: .5rem;
}

@media (max-width: 720px) {
    .vband--numeral .vrow { grid-template-columns: 1fr; }
    .vband--numeral .vlabel::before { font-size: clamp(4.5rem, 26vw, 8rem); }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE BREATH — the one full-bleed photographic beat.
   A deliberate dark moment between the accent panel and the business model.
   ═══════════════════════════════════════════════════════════════════════ */

.vfull {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: #1B2A2E;
    background-image: url("/assets/images/subjects/backgrounds/health-red-peaks.jpg");
    background-position: 60% 62%;
    background-size: cover;
    border-bottom: 1px solid var(--v-rule);
    isolation: isolate;
}

.vfull::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(10, 18, 20, .80) 0%, rgba(10, 18, 20, .46) 34%, rgba(10, 18, 20, .10) 66%, rgba(10, 18, 20, 0) 100%);
}

.vfull::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--v-raranga);
    opacity: .5;
    pointer-events: none;
}

.vfull__inner {
    position: relative;
    z-index: 1;
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(1.5rem, 5vw, 5rem);
    width: 100%;
}

.vfull__quote {
    color: #FFFFFF;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 5.2vw, 4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.035em;
    text-transform: uppercase;
    max-width: 20ch;
    margin: 0 0 var(--space-md);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

.vfull__cap {
    font-family: 'Outfit', sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #C9DAD6;
    margin: 0;
}

/* Desktop only: the hero art holds still while the page moves over it. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .vfull { background-attachment: fixed; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE WOVEN DECK — scroll-driven arrival, the panel completes on the loom.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {

        /* The art scales by transform — never background-size, which gutters. */
        .vband::after {
            animation: v-cloth linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }

        @keyframes v-cloth {
            from { transform: scale(1.14); opacity: .10; }
            45%  { transform: scale(1.02); opacity: .32; }
            to   { transform: scale(1.08); opacity: .16; }
        }

        .vband .vrow,
        .vband .vwrap > * {
            animation: v-arrive linear both;
            animation-timeline: view();
            animation-range: entry 4% entry 56%;
        }

        @keyframes v-arrive {
            from { opacity: 0; transform: translateY(2.6rem); }
            to   { opacity: 1; transform: none; }
        }

        .vhero__art {
            animation: v-hero-drift linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }

        @keyframes v-hero-drift {
            from { background-position: 34% 50%; }
            to   { background-position: 52% 50%; }
        }
    }
}

@media print {
    .vband .vrow,
    .vband .vwrap > *,
    .vhero__art { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE SHELL — venture lives inside the standard TKA chrome.
   The teal-gradient header, the shared sidebar, and the full site footer
   all render here exactly as on every other page. No page-scoped chrome
   suppression. The venture panels compose inside .content-area, which is
   flex-grow:1 by design — so the deck simply fills the stage the sidebar
   leaves for it, and rebalances when the rail expands on hover.
   ═══════════════════════════════════════════════════════════════════════ */

/* The loom canvas sits behind everything; the stage is transparent so it
   reads through. Snap lives here too (mandatory + auto-fallback above). */
body[data-current-page="venture"] .main-container {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* NEVER a max-width on .content-area; the measure lives on .vwrap. */
.vwrap {
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(1.5rem, 5vw, 5rem);
    width: 100%;
}

.vhero__body .vwrap {
    max-width: 90rem;
}

/* The hero fits the viewport. */
.vhero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
    align-items: stretch;
    min-height: min(94vh, 58rem);
}

.vhero__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.vhero__art {
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--v-rule);
}

.vhero__artcap {
    position: absolute;
    left: clamp(0.75rem, 2vw, 1.4rem);
    bottom: clamp(0.75rem, 2vw, 1.4rem);
    border: 1px solid var(--v-rule-lit);
    padding: 0.28rem 0.6rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .vhero__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .vhero__art {
        min-height: 17rem;
        border-left: 0;
        border-top: 1px solid var(--v-rule);
        background-position: 55% 58%;
    }

    .vhero__title {
        font-size: clamp(2.1rem, 10vw, 3.2rem);
    }
}