/* ============================================================================
   VV SECTIONS — design_handoff drop-in stylesheet.  Veteran Vends.
   ----------------------------------------------------------------------------
   Every <style id="vv-*"> block from design_handoff/, in section order, verbatim.
   Nothing here was rewritten, reformatted or "improved".

   Loaded AFTER site.css in video.html and about.html so the handful of rules
   that intentionally override shipping selectors (the trust strip's read-head
   colour, the FAQ hairline) win on source order rather than on specificity.

   The <style id="vv-shipping"> blocks that shipped alongside these in the
   preview files were site.css reproduced for standalone viewing. They are NOT
   here — they already exist in site.css / video.css.

   To revert the entire handoff: delete this file and its two <link> tags.
   Reference copies with their full DROP-IN NOTE headers: design_handoff/.
   ========================================================================== */

/* footer layout vars, hoisted — :root can never be section-scoped */
:root{--vv-brand-w:262px;--vv-nav-gap:46px;--vv-nav-top:106px;--vv-lift:64px;--vv-plate-h:820px;--vv-scrim:0.86}

/* DROPPED from vv-footer — preview scaffolding that pinned the standalone footer
   to the viewport bottom. On the real page it would flex the whole document:
   body{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end} */

/* ===== vv-trust  (from design_handoff/trust-strip.html) ===== */
/* scoped to #trust with a zero-specificity :where() subject guard */
/* everything here is INSIDE the existing box — see the height warning above */.trust-strip .marquee:where(#trust, #trust *){z-index:1}
/* read head: a faint gold centre line the claims pass through */
.vv-head:where(#trust, #trust *){position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,rgba(var(--gold-rgb),0) 0%,rgba(var(--gold-rgb),0.34) 50%,rgba(var(--gold-rgb),0) 100%);pointer-events:none;z-index:3;opacity:0}#trust.is-pulse .vv-head:where(#trust, #trust *){opacity:1;transition:opacity .8s var(--ease-fade) .3s}
/* each phrase is lit by JS as it crosses — the lift is a transition so it reads as a glow,
   not a snap. --lit is written per span, 0 at the edges, 1 at the centre. */
.trust-strip .marquee__track span:where(#trust, #trust *){--lit:0;color:color-mix(in oklab,var(--steel),var(--silver) calc(var(--lit) * 100%));transition:color .25s linear,text-shadow .25s linear}#trust.is-read .marquee__track span:where(#trust, #trust *){text-shadow:0 1px 8px rgba(10,9,8,0.8),0 0 calc(var(--lit) * 14px) rgba(var(--gold-rgb),calc(var(--lit) * 0.55))}#trust.is-read .marquee__track span:where(#trust, #trust *)::before{color:color-mix(in oklab,var(--gold),var(--silver) calc(var(--lit) * 70%))}
/* slow gold light pass */
.vv-sheen:where(#trust, #trust *){position:absolute;top:0;bottom:0;left:0;width:180px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),0.05) 40%,rgba(var(--gold-rgb),0.16) 50%,rgba(var(--gold-rgb),0.05) 60%,transparent);pointer-events:none;z-index:0;opacity:0;transform:translateX(-180px)}#trust.is-pulse .vv-sheen:where(#trust, #trust *){opacity:1;animation:vv-pass 9s var(--ease-fade) 1s infinite}
/* 1px gold rule, drawn once on arrival */
.vv-rule:where(#trust, #trust *){position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),0.75),transparent);pointer-events:none;z-index:3;transform:scaleX(0);transform-origin:50% 50%}#trust.is-pulse .vv-rule:where(#trust, #trust *){transform:scaleX(1);transition:transform 1.1s var(--ease-out-quart) .15s}
/* dot ripple — source's own keyframes, delayed per index. Delete this block for source's
   simultaneous pulse. */
#trust.is-pulse .marquee__track span:nth-child(1):where(#trust, #trust *)::before{animation-delay:0s}#trust.is-pulse .marquee__track span:nth-child(2):where(#trust, #trust *)::before{animation-delay:.05s}#trust.is-pulse .marquee__track span:nth-child(3):where(#trust, #trust *)::before{animation-delay:.1s}#trust.is-pulse .marquee__track span:nth-child(4):where(#trust, #trust *)::before{animation-delay:.15s}#trust.is-pulse .marquee__track span:nth-child(5):where(#trust, #trust *)::before{animation-delay:.2s}#trust.is-pulse .marquee__track span:nth-child(6):where(#trust, #trust *)::before{animation-delay:.25s}#trust.is-pulse .marquee__track span:nth-child(7):where(#trust, #trust *)::before{animation-delay:.3s}#trust.is-pulse .marquee__track span:nth-child(8):where(#trust, #trust *)::before{animation-delay:.35s}#trust.is-pulse .marquee__track span:nth-child(9):where(#trust, #trust *)::before{animation-delay:.4s}#trust.is-pulse .marquee__track span:nth-child(10):where(#trust, #trust *)::before{animation-delay:.45s}#trust.is-pulse .marquee__track span:nth-child(11):where(#trust, #trust *)::before{animation-delay:.5s}#trust.is-pulse .marquee__track span:nth-child(12):where(#trust, #trust *)::before{animation-delay:.55s}
@media (prefers-reduced-motion:reduce){#trust.is-pulse .vv-sheen:where(#trust, #trust *){animation:none;opacity:0}#trust.is-pulse .vv-rule:where(#trust, #trust *){transform:scaleX(1);transition:none}#trust.is-pulse .vv-head:where(#trust, #trust *){opacity:1;transition:none}.trust-strip .marquee__track span:where(#trust, #trust *){--lit:0;transition:none}#trust.is-pulse .marquee__track span:where(#trust, #trust *)::before{animation:none}
}

/* ===== vv-worlds  (from design_handoff/two-worlds.html) ===== */
/* deliberately UNSCOPED — styles .tc, the target-cursor reticle on <body> */
/* target-cursor handshake. This section's whole interaction IS the pointer, and
   target-cursor.js has hidden the OS cursor — so over the canvas the reticle drops its
   orbit and tightens: shorter arms, smaller footprint, still four separated corner
   brackets. Orbit, offsets and arm length are authored per-frame in the cursor's own loop
   and unreachable from CSS, so they go through its brush() API. CSS here does colour only,
   and PER SIDE — the border-color shorthand would opacify the two sides each modifier
   deliberately leaves transparent, closing every bracket into a square. */
.tc.vv-brush .tc__c--tl{border-top-color:var(--silver);border-left-color:var(--silver)}
.tc.vv-brush .tc__c--tr{border-top-color:var(--silver);border-right-color:var(--silver)}
.tc.vv-brush .tc__c--bl{border-bottom-color:var(--silver);border-left-color:var(--silver)}
.tc.vv-brush .tc__c--br{border-bottom-color:var(--silver);border-right-color:var(--silver)}
.tc.vv-brush .tc__dot{opacity:1;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--silver);box-shadow:0 0 8px 2px rgba(var(--gold-rgb),0.9)}

/* ===== vv-slump  (from design_handoff/three-pm-slump.html) ===== */
/* scoped to #what with a zero-specificity :where() subject guard */
#what:where(#what, #what *){overflow:hidden}
/* ── the comparison panel ─────────────────────────────────────────────── */
.vv-fig:where(#what, #what *){margin:0 0 var(--spacing-32);padding:clamp(20px,2.6vw,32px);display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:clamp(20px,2.6vw,36px);align-items:start}.vv-fig > *:where(#what, #what *){position:relative;z-index:1}.vv-fig:where(#what, #what *)::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(var(--steel-rgb),0.05) 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,rgba(var(--steel-rgb),0.05) 0 1px,transparent 1px 14px);pointer-events:none;z-index:0;opacity:0;transition:opacity 1s var(--ease-fade)}.is-on .vv-fig:where(#what, #what *)::after{opacity:1}
@media (max-width:820px){.vv-fig:where(#what, #what *){grid-template-columns:1fr}}.vv-fig__title:where(#what, #what *){font-family:"Jost",sans-serif;font-weight:500;font-size:var(--text-body);letter-spacing:0.083em;text-transform:uppercase;color:var(--silver);margin-bottom:var(--spacing-24);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}.vv-fig__title em:where(#what, #what *){font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:0.14em;color:rgba(var(--steel-rgb),0.6)}
/* ── the race ─────────────────────────────────────────────────────────── */
.vv-race:where(#what, #what *){list-style:none;display:grid;gap:var(--spacing-24)}.vv-row__head:where(#what, #what *){display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:9px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.7)}.vv-row__head b:where(#what, #what *){font-family:"Jost",sans-serif;font-size:22px;line-height:1;letter-spacing:0.03em;font-variant-numeric:tabular-nums;font-weight:500}.vv-row--fast .vv-row__head:where(#what, #what *){color:var(--silver)}.vv-row--fast .vv-row__head b:where(#what, #what *){color:var(--gold)}.vv-row--slow .vv-row__head b:where(#what, #what *){color:rgba(var(--steel-rgb),0.85)}.vv-track:where(#what, #what *){position:relative;height:28px;background:rgba(196,179,159,0.05);box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.14)}.vv-fill:where(#what, #what *){position:absolute;left:0;top:0;bottom:0;width:0}.vv-row--fast .vv-fill:where(#what, #what *){background:linear-gradient(90deg,rgba(var(--gold-rgb),0.95),rgba(var(--gold-rgb),0.55))}.vv-row--slow .vv-fill:where(#what, #what *){background:linear-gradient(90deg,rgba(var(--steel-rgb),0.5),rgba(var(--steel-rgb),0.2))}.is-on .vv-row--fast .vv-fill:where(#what, #what *){width:var(--w);transition:width .55s var(--ease-out-quart) .35s}.is-on .vv-row--slow .vv-fill:where(#what, #what *){width:var(--w);transition:width 2.6s linear .35s}.vv-pip:where(#what, #what *){position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--silver);right:-1px;box-shadow:0 0 9px 1px rgba(var(--gold-rgb),0.8);opacity:0}.is-on .vv-pip:where(#what, #what *){opacity:1;transition:opacity .3s var(--ease-fade) .35s}.vv-row--slow .vv-pip:where(#what, #what *){background:rgba(var(--silver-rgb),0.7);box-shadow:0 0 8px 1px rgba(var(--steel-rgb),0.5)}
/* ── axis ─────────────────────────────────────────────────────────────── */
.vv-axis:where(#what, #what *){position:relative;height:26px;margin-top:var(--spacing-10);border-top:1px solid rgba(var(--steel-rgb),0.2)}.vv-axis span:where(#what, #what *){position:absolute;top:7px;transform:translateX(-50%);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9px;letter-spacing:0.1em;color:rgba(var(--steel-rgb),0.5);white-space:nowrap}.vv-axis span:where(#what, #what *)::before{content:"";position:absolute;left:50%;top:-7px;width:1px;height:5px;background:rgba(var(--steel-rgb),0.28)}.vv-axis span:first-child:where(#what, #what *){transform:none}.vv-axis span:first-child:where(#what, #what *)::before{left:0}.vv-axis span:last-child:where(#what, #what *){transform:translateX(-100%)}.vv-axis span:last-child:where(#what, #what *)::before{left:100%}
/* ── the per-employee cost ────────────────────────────────────────────── */
.vv-lost:where(#what, #what *){margin-top:var(--spacing-24);padding-top:var(--spacing-16);border-top:1px solid rgba(var(--steel-rgb),0.14);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.65)}.vv-lost b:where(#what, #what *){font-family:"Jost",sans-serif;font-size:clamp(24px,3vw,34px);line-height:1;letter-spacing:0.02em;color:var(--scarlet);font-variant-numeric:tabular-nums;font-weight:500}
/* ── machine ──────────────────────────────────────────────────────────── */
.vv-rig:where(#what, #what *){display:grid;gap:var(--spacing-10)}
@media (max-width:820px){.vv-rig:where(#what, #what *){max-width:210px;margin-inline:auto}}.vv-rig__label:where(#what, #what *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.55);display:flex;justify-content:space-between;gap:10px}.vv-rig__label b:where(#what, #what *){color:var(--gold);font-weight:500}.vv-rig__slot:where(#what, #what *){position:relative;aspect-ratio:4/5;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.18)}.vv-rig__slot img:where(#what, #what *){display:block;width:100%;height:100%;object-fit:cover}.vv-rig__slot:where(#what, #what *)::after{content:"";position:absolute;left:0;right:0;top:-30%;height:22%;background:linear-gradient(180deg,transparent,rgba(var(--gold-rgb),0.16),transparent);pointer-events:none;opacity:0}.is-on .vv-rig__slot:where(#what, #what *)::after{opacity:1;animation:vv-scan 6s var(--ease-fade) 1.2s infinite}.vv-figcap:where(#what, #what *){margin-top:var(--spacing-24);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;line-height:1.9;letter-spacing:0.1em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.42)}.vv-figcap b:where(#what, #what *){color:var(--gold);font-weight:500}
@media (prefers-reduced-motion:reduce){.is-on .vv-row--fast .vv-fill:where(#what, #what *),.is-on .vv-row--slow .vv-fill:where(#what, #what *){transition:none}.vv-pip:where(#what, #what *){display:none}.is-on .vv-rig__slot:where(#what, #what *)::after{animation:none;opacity:0}.is-on .vv-fig:where(#what, #what *)::after{opacity:1;transition:none}
}

/* ===== vv-board  (from design_handoff/four-machines.html) ===== */
/* scoped to #machines with a zero-specificity :where() subject guard */
#machines:where(#machines, #machines *){overflow:hidden}.vv-board:where(#machines, #machines *){position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.vv-board:where(#machines, #machines *)::before{content:"";position:absolute;inset:0;background:radial-gradient(75% 60% at 50% 46%,rgba(var(--gold-rgb),0.10) 0%,rgba(10,9,8,0) 72%),repeating-linear-gradient(0deg,rgba(var(--steel-rgb),0.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(90deg,rgba(var(--steel-rgb),0.05) 0 1px,transparent 1px 13px),repeating-linear-gradient(0deg,rgba(var(--steel-rgb),0.09) 0 1px,transparent 1px 65px),repeating-linear-gradient(90deg,rgba(var(--steel-rgb),0.09) 0 1px,transparent 1px 65px);opacity:0;transition:opacity 1.1s var(--ease-fade)}.is-on .vv-board:where(#machines, #machines *)::before{opacity:1}
/* traces live in bands pinned to the GRID, not the section, so they can never cross the
   header text; each band is full-bleed and terminates on a pad at the card edge */
.vv-band:where(#machines, #machines *){position:absolute;left:calc(50% - 50vw);width:100vw;z-index:0;pointer-events:none}.vv-band--top:where(#machines, #machines *){bottom:100%;height:clamp(70px,8vw,112px)}.vv-band--bot:where(#machines, #machines *){top:100%;height:clamp(96px,11vw,150px)}.vv-board polyline:where(#machines, #machines *){fill:none;stroke-linejoin:round;stroke-linecap:round}.vv-band polyline:where(#machines, #machines *){fill:none;stroke-linejoin:round;stroke-linecap:round}.vv-trace:where(#machines, #machines *){stroke:rgba(var(--steel-rgb),0.3);stroke-width:1.1}.vv-pad:where(#machines, #machines *){fill:rgba(var(--steel-rgb),0.35)}.vv-flow:where(#machines, #machines *){stroke:var(--gold);stroke-width:1.7;opacity:0;stroke-dasharray:9 91;stroke-dashoffset:100;filter:drop-shadow(0 0 3px rgba(var(--gold-rgb),0.9))}.is-on .vv-flow:where(#machines, #machines *){opacity:1;animation:vv-power 4.6s linear infinite;transition:opacity .8s var(--ease-fade) .4s}.vv-flow:nth-of-type(2):where(#machines, #machines *){animation-delay:-.6s}.vv-flow:nth-of-type(3):where(#machines, #machines *){animation-delay:-1.2s}.vv-flow:nth-of-type(4):where(#machines, #machines *){animation-delay:-1.9s}.vv-flow:nth-of-type(5):where(#machines, #machines *){animation-delay:-2.6s}.vv-flow:nth-of-type(6):where(#machines, #machines *){animation-delay:-3.3s}.vv-flow:nth-of-type(7):where(#machines, #machines *){animation-delay:-3.9s}.vv-flow:nth-of-type(8):where(#machines, #machines *){animation-delay:-4.4s}.vv-ecg:where(#machines, #machines *){stroke:rgba(var(--silver-rgb),0.62);stroke-width:2.2;filter:drop-shadow(0 0 7px rgba(var(--silver-rgb),0.35))}.vv-ecg-flow:where(#machines, #machines *){stroke:var(--scarlet);stroke-width:3;opacity:0;stroke-dasharray:13 87;stroke-dashoffset:100;filter:drop-shadow(0 0 4px rgba(179,16,5,1)) drop-shadow(0 0 14px rgba(179,16,5,0.7))}.is-on .vv-ecg-flow:where(#machines, #machines *){opacity:1;animation:vv-power 3.4s linear infinite;transition:opacity .8s var(--ease-fade) .6s}.vv-ecg-wake:where(#machines, #machines *){stroke:var(--gold);stroke-width:2;opacity:0;stroke-dasharray:26 74;stroke-dashoffset:100;filter:drop-shadow(0 0 8px rgba(var(--gold-rgb),0.75))}.is-on .vv-ecg-wake:where(#machines, #machines *){opacity:.5;animation:vv-power 7.2s linear infinite;transition:opacity 1s var(--ease-fade) .9s}
/* the heartbeat is pinned to the card rows, not the section, so it stays BEHIND the
   machines when the grid stacks instead of drifting onto the row seam */
.vv-gridwrap:where(#machines, #machines *){position:relative}.vv-pulse:where(#machines, #machines *){position:absolute;left:calc(50% - 50vw);right:auto;height:210px;transform:translateY(-50%);z-index:0;pointer-events:none;width:100vw}.vv-pulse--r1:where(#machines, #machines *){top:50%}.vv-pulse--r2:where(#machines, #machines *){top:75%;display:none}
@media (max-width:1080px){.vv-pulse--r1:where(#machines, #machines *){top:25%}.vv-pulse--r2:where(#machines, #machines *){display:block}}
/* the base wave sits behind the cards; a second copy rides ON TOP carrying only the
   travelling pulses, so the beat sweeps across the machines instead of dying behind them */
.vv-pulse--over:where(#machines, #machines *){z-index:3;mix-blend-mode:screen}.vv-pulse--over .vv-ecg:where(#machines, #machines *){display:none}.vv-pulse--over .vv-ecg-flow:where(#machines, #machines *){stroke-width:2.6;opacity:0}.is-on .vv-pulse--over .vv-ecg-flow:where(#machines, #machines *){opacity:.85}.is-on .vv-pulse--over .vv-ecg-wake:where(#machines, #machines *){opacity:.18}.vv-head:where(#machines, #machines *){position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(78px,9vw,120px)}.vv-title:where(#machines, #machines *){font-family:"Jost",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;font-size:clamp(30px,4.2vw,56px);line-height:1;color:var(--silver);margin:0}.vv-lab:where(#machines, #machines *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.62)}.vv-lab--live:where(#machines, #machines *){display:inline-flex;align-items:center;gap:8px;color:var(--silver)}.vv-dot:where(#machines, #machines *){width:6px;height:6px;border-radius:9999px;background:var(--gold);flex:none}.is-on .vv-dot:where(#machines, #machines *){animation:vv-pulse 2.4s var(--ease-fade) infinite}.machine-grid:where(#machines, #machines *){position:relative;z-index:1}.machine-card:focus-visible:where(#machines, #machines *){outline:2px solid var(--gold);outline-offset:3px}.machine-card:where(#machines, #machines *){display:flex;flex-direction:column;padding:0;background-color:rgba(43,39,35,0.42);background-image:linear-gradient(var(--scarlet),var(--scarlet));background-repeat:no-repeat;background-size:100% 3px;background-position:top;background-blend-mode:normal}.machine-card:focus:not(:focus-visible):where(#machines, #machines *){outline:none}.vv-plate__head:where(#machines, #machines *){position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 4px}.vv-plate__name:where(#machines, #machines *){font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(15px,1.4vw,19px);letter-spacing:0.07em;text-transform:uppercase;color:var(--silver);transition:letter-spacing .5s var(--ease-out-quart),color .4s var(--ease-out-quart)}.machine-card:hover .vv-plate__name:where(#machines, #machines *),.machine-card:focus-within .vv-plate__name:where(#machines, #machines *){letter-spacing:0.1em;color:var(--gold)}.vv-sw:where(#machines, #machines *){position:relative;width:40px;height:18px;border-radius:9999px;background:rgba(10,9,8,0.75);box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.22);flex:none}.vv-sw i:where(#machines, #machines *){position:absolute;top:3px;right:4px;width:7px;height:12px;background:var(--gold);display:block}.is-on .vv-sw i:where(#machines, #machines *){animation:vv-pulse 2.4s var(--ease-fade) infinite}.machine-card:nth-child(2) .vv-sw i:where(#machines, #machines *){animation-delay:.3s}.machine-card:nth-child(3) .vv-sw i:where(#machines, #machines *){animation-delay:.6s}.machine-card:nth-child(4) .vv-sw i:where(#machines, #machines *){animation-delay:.9s}.machine-card__media:where(#machines, #machines *){position:relative;z-index:2;flex:1;aspect-ratio:4/5;padding:6px 14px 0;display:grid;place-items:center}.machine-card__media img:where(#machines, #machines *){object-fit:contain}.vv-scan--board:where(#machines, #machines *){position:absolute;left:0;right:0;top:-30%;height:22%;background:linear-gradient(180deg,transparent,rgba(var(--gold-rgb),0.22),transparent);pointer-events:none;opacity:0;z-index:3}.machine-card:hover .vv-scan--board:where(#machines, #machines *),.machine-card:focus-within .vv-scan--board:where(#machines, #machines *){opacity:1;animation:vv-scan--board 2.6s var(--ease-fade) infinite}.vv-plate__foot:where(#machines, #machines *){position:relative;z-index:3;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 16px 16px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:12px;letter-spacing:0.1em;text-transform:uppercase}.vv-plate__foot span:where(#machines, #machines *){color:rgba(var(--steel-rgb),0.5)}.vv-plate__foot b:where(#machines, #machines *){color:var(--gold);font-weight:500}.vv-ret:where(#machines, #machines *){position:absolute;width:13px;height:13px;pointer-events:none;z-index:5;opacity:.2;transition:opacity .45s var(--ease-out-quart),transform .45s var(--ease-out-quart)}.vv-ret:where(#machines, #machines *)::before,.vv-ret:where(#machines, #machines *)::after{content:"";position:absolute;background:var(--gold)}.vv-ret:where(#machines, #machines *)::before{width:100%;height:1px;top:0}.vv-ret:where(#machines, #machines *)::after{height:100%;width:1px;left:0}.vv-ret--tl:where(#machines, #machines *){top:8px;left:5px}.vv-ret--tr:where(#machines, #machines *){top:8px;right:5px;transform:scaleX(-1)}.vv-ret--bl:where(#machines, #machines *){bottom:5px;left:5px;transform:scaleY(-1)}.vv-ret--br:where(#machines, #machines *){bottom:5px;right:5px;transform:scale(-1)}.machine-card:hover .vv-ret:where(#machines, #machines *),.machine-card:focus-within .vv-ret:where(#machines, #machines *){opacity:1}.machine-card:hover .vv-ret--tl:where(#machines, #machines *),.machine-card:focus-within .vv-ret--tl:where(#machines, #machines *){transform:translate(-3px,-3px)}.machine-card:hover .vv-ret--tr:where(#machines, #machines *),.machine-card:focus-within .vv-ret--tr:where(#machines, #machines *){transform:scaleX(-1) translate(-3px,-3px)}.machine-card:hover .vv-ret--bl:where(#machines, #machines *),.machine-card:focus-within .vv-ret--bl:where(#machines, #machines *){transform:scaleY(-1) translate(-3px,-3px)}.machine-card:hover .vv-ret--br:where(#machines, #machines *),.machine-card:focus-within .vv-ret--br:where(#machines, #machines *){transform:scale(-1) translate(-3px,-3px)}.vv-foot:where(#machines, #machines *){position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:clamp(24px,3vw,40px)}.vv-readout:where(#machines, #machines *){display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:4px 44px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase}.vv-readout div:where(#machines, #machines *){display:flex;justify-content:space-between;gap:20px}.vv-readout span:where(#machines, #machines *){color:rgba(var(--steel-rgb),0.5)}.vv-readout b:where(#machines, #machines *){color:var(--gold);font-weight:500}
@media (max-width:600px){.vv-readout:where(#machines, #machines *){grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.vv-board:where(#machines, #machines *)::before{opacity:1;transition:none}.is-on .vv-flow:where(#machines, #machines *),.is-on .vv-ecg-flow:where(#machines, #machines *){animation:none;opacity:.5;stroke-dasharray:none}
  /* the overlay carries only travelling pulses — with the dash removed it would paint the
     whole wave solid over the renders, so it is dropped entirely here and the base wave
     behind the cards carries the read */
  .vv-pulse--over:where(#machines, #machines *){display:none}.is-on .vv-ecg-wake:where(#machines, #machines *){animation:none;opacity:.25;stroke-dasharray:none}.is-on .vv-dot:where(#machines, #machines *),.is-on .vv-sw i:where(#machines, #machines *){animation:none}.machine-card:hover .vv-scan--board:where(#machines, #machines *),.machine-card:focus-within .vv-scan--board:where(#machines, #machines *){animation:none;opacity:0}
}

/* ===== vv-statement  (from design_handoff/not-corporate-vending.html) ===== */
/* scoped to #statement with a zero-specificity :where() subject guard */
#statement:where(#statement, #statement *){background:var(--blackout)}.vv-plate:where(#statement, #statement *),.vv-topo:where(#statement, #statement *),.vv-scrim:where(#statement, #statement *),.vv-stencil:where(#statement, #statement *),.vv-survey:where(#statement, #statement *),.vv-grain:where(#statement, #statement *){position:absolute;inset:0;pointer-events:none}
/* The art carries contours in its left third, but at tall/narrow viewports that region is
   cropped away — this generated layer (marching squares over a summed-gaussian field) keeps
   the texture present under the copy at every size. Masked out before it reaches the art. */
.vv-topo:where(#statement, #statement *){z-index:1;background:url(assets/topo-contours.webp) 0 0/1500px auto repeat;opacity:0;transition:opacity 1.6s var(--ease-fade) .3s;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 34%,transparent 58%);mask-image:linear-gradient(90deg,#000 0%,#000 34%,transparent 58%)}.is-on .vv-topo:where(#statement, #statement *){opacity:.4;animation:topo-drift 150s linear infinite}.vv-plate:where(#statement, #statement *){z-index:0;overflow:hidden}.vv-plate img:where(#statement, #statement *){width:100%;height:100%;object-fit:cover;object-position:78% 50%;display:block;transform:scale(1.06);opacity:0;transition:opacity 1.4s var(--ease-fade)}.is-on .vv-plate img:where(#statement, #statement *){opacity:1;animation:plate-drift 42s var(--ease-fade) infinite alternate}.vv-scrim:where(#statement, #statement *){z-index:1;background:linear-gradient(90deg,rgba(10,9,8,0.97) 0%,rgba(10,9,8,0.92) 26%,rgba(10,9,8,0.68) 46%,rgba(10,9,8,0.18) 62%,rgba(10,9,8,0) 76%),linear-gradient(0deg,rgba(10,9,8,0.55) 0%,rgba(10,9,8,0) 26%)}.vv-grain:where(#statement, #statement *){z-index:1;background:linear-gradient(104deg,rgba(233,228,220,0.035) 0%,rgba(233,228,220,0) 22%,rgba(233,228,220,0.022) 44%,rgba(233,228,220,0) 62%,rgba(233,228,220,0.03) 84%,rgba(233,228,220,0) 100%);mix-blend-mode:overlay}.vv-stencil:where(#statement, #statement *){z-index:1;display:grid;place-items:center;overflow:hidden}.vv-stencil span:where(#statement, #statement *){font-family:"Jost",sans-serif;font-weight:600;font-size:clamp(60px,13vw,190px);letter-spacing:0.16em;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(var(--silver-rgb),0.05);opacity:0;transform:rotate(-4deg) scale(1.04)}.is-on .vv-stencil span:where(#statement, #statement *){opacity:1;transition:opacity 2.4s var(--ease-fade) .5s;animation:stencil-breathe 14s var(--ease-fade) infinite}.vv-survey:where(#statement, #statement *){z-index:1;overflow:hidden}.vv-survey i:where(#statement, #statement *){position:absolute;top:0;bottom:0;width:190px;left:-190px;display:block;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),0.11) 44%,rgba(var(--gold-rgb),0.5) 50%,rgba(var(--gold-rgb),0.11) 56%,transparent);opacity:0}.is-on .vv-survey i:where(#statement, #statement *){opacity:1;animation:survey-sweep 9s var(--ease-fade) 1.4s infinite}
/* Authored for THIS slide — the quote is short and the art full-bleed, so the headline runs
   smaller than the shipping .statement-headline. These live here, not in vv-shipping, so
   they survive when that block is deleted on paste. */
.statement-copy:where(#statement, #statement *){z-index:2}.vv-statement-headline:where(#statement, #statement *){font-size:clamp(34px,5.4vw,72px) !important;max-width:14ch !important;line-height:0.98 !important;margin-bottom:0 !important}.statement-copy .who-close:where(#statement, #statement *){margin-top:0}.statement-copy > *:where(#statement, #statement *){max-width:min(46ch,50%)}.vv-eyebrow:where(#statement, #statement *){display:inline-flex;align-items:center;gap:12px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:var(--text-caption);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}.vv-eyebrow .rule:where(#statement, #statement *){width:26px;height:1px;background:var(--scarlet);display:inline-block}.vv-quote:where(#statement, #statement *){margin:30px 0 0}.vv-quote p:where(#statement, #statement *){font-family:"Jost",sans-serif;font-weight:400;font-size:clamp(21px,2.5vw,34px);line-height:1.22;color:var(--silver);text-wrap:pretty;opacity:0;transform:translateY(20px)}.is-on .vv-quote p:where(#statement, #statement *){opacity:1;transform:none;transition:opacity .85s var(--ease-out-quart) .35s,transform .85s var(--ease-out-quart) .35s}.vv-quote b:where(#statement, #statement *){font-weight:500;color:var(--gold)}.vv-close:where(#statement, #statement *){display:flex;align-items:center;gap:16px;margin-top:34px}.vv-close__rule:where(#statement, #statement *){height:1px;flex:0 0 0;background:linear-gradient(90deg,var(--scarlet),var(--gold));transition:flex-basis 1s var(--ease-out-quart) .85s}.is-on .vv-close__rule:where(#statement, #statement *){flex-basis:64px}
@media (max-width:860px){.statement-copy > *:where(#statement, #statement *){max-width:100%}.vv-plate img:where(#statement, #statement *){object-position:72% 50%}.vv-topo:where(#statement, #statement *){-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 66%);mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 66%)}.vv-scrim:where(#statement, #statement *){background:linear-gradient(180deg,rgba(10,9,8,0.94) 0%,rgba(10,9,8,0.88) 48%,rgba(10,9,8,0.6) 100%)}
}
@media (prefers-reduced-motion:reduce){.is-on .vv-plate img:where(#statement, #statement *){animation:none}.is-on .vv-topo:where(#statement, #statement *){animation:none}.is-on .vv-stencil span:where(#statement, #statement *){animation:none}.vv-survey:where(#statement, #statement *){display:none}.vv-quote p:where(#statement, #statement *){opacity:1;transform:none;transition:none}.vv-close__rule:where(#statement, #statement *){flex-basis:64px;transition:none}
}

/* ===== vv-process  (from design_handoff/the-process.html) ===== */
/* scoped to #qualify with a zero-specificity :where() subject guard */
#qualify:where(#qualify, #qualify *){overflow:hidden}.vv-flow:where(#qualify, #qualify *){position:relative;margin-top:clamp(48px,6vw,74px)}
/* the milestone line sits in the gutter band above the cards and draws left to right */
.vv-circuit:where(#qualify, #qualify *){position:absolute;top:0;left:0;width:100%;height:96px;pointer-events:none;z-index:0;overflow:visible}.vv-circuit line:where(#qualify, #qualify *),.vv-circuit polyline:where(#qualify, #qualify *){fill:none;stroke-linecap:round}.vv-rail:where(#qualify, #qualify *){stroke:rgba(var(--steel-rgb),0.22);stroke-width:1.5;stroke-dasharray:9 11}.vv-live:where(#qualify, #qualify *){stroke:var(--gold);stroke-width:2;stroke-dasharray:9 11;filter:drop-shadow(0 0 5px rgba(var(--gold-rgb),0.85))}[data-anim] .vv-live:where(#qualify, #qualify *){stroke-dashoffset:1200}.is-on .vv-live:where(#qualify, #qualify *){stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease-out-quart) .3s}.vv-spark:where(#qualify, #qualify *){stroke:var(--silver);stroke-width:3;stroke-dasharray:4 1196;stroke-dashoffset:1200;opacity:0;filter:drop-shadow(0 0 7px rgba(var(--silver-rgb),1))}.is-on .vv-spark:where(#qualify, #qualify *){opacity:1;animation:vv-travel 4.6s linear 2.7s infinite;transition:opacity .4s var(--ease-fade) 2.7s}.vv-node:where(#qualify, #qualify *){fill:var(--blackout);stroke:rgba(var(--steel-rgb),0.35);stroke-width:1.5}.vv-node-lit:where(#qualify, #qualify *){fill:var(--gold);opacity:0;filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),0.9))}.is-on .vv-node-lit:where(#qualify, #qualify *){opacity:1;transition:opacity .5s var(--ease-fade)}.is-on .vv-node-lit--1:where(#qualify, #qualify *){transition-delay:.75s}.is-on .vv-node-lit--2:where(#qualify, #qualify *){transition-delay:1.5s}.is-on .vv-node-lit--3:where(#qualify, #qualify *){transition-delay:2.25s}

/* four overrides on the shipping strip: drop its two outer rules + the column border-left,
   and add a gap, so the columns read as discrete panels. Grid stays source's. */
.vv-steps:where(#qualify, #qualify *){border-top:0;border-bottom:0;gap:clamp(16px,2vw,26px);padding-top:96px;position:relative;z-index:1;opacity:1;transform:none}.vv-steps .qualify-strip__col:where(#qualify, #qualify *){border-left:0}/* the strip's :first-child:where(#qualify, #qualify *){padding-left:0} is right for a bordered strip flush to the wrap
   edge, but wrong once the columns become discrete panels — match its (0,3,0) and re-inset */
.vv-steps.qualify-strip--steps .qualify-strip__col:first-child:where(#qualify, #qualify *){padding-left:clamp(22px,2.4vw,30px)}
@media (max-width:980px){.vv-steps:where(#qualify, #qualify *){padding-top:0;padding-left:38px}.vv-steps .qualify-strip__col:where(#qualify, #qualify *){border-top:0;padding-left:clamp(22px,2.4vw,30px);padding-right:clamp(22px,2.4vw,30px)}.vv-circuit:where(#qualify, #qualify *){display:none}
}
/* stacked variant — the same progression rotated into the left gutter */
.vv-railv:where(#qualify, #qualify *){display:block;position:absolute;left:11px;top:26px;bottom:26px;width:1px;z-index:0;background-image:repeating-linear-gradient(180deg,rgba(var(--steel-rgb),0.28) 0 9px,transparent 9px 20px)}
@media (min-width:981px){.vv-railv:where(#qualify, #qualify *){display:none}}.vv-railv:where(#qualify, #qualify *)::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,var(--gold) 0 9px,transparent 9px 20px);transform:scaleY(0);transform-origin:50% 0;filter:drop-shadow(0 0 5px rgba(var(--gold-rgb),0.85))}.is-on .vv-railv:where(#qualify, #qualify *)::after{transform:scaleY(1);transition:transform 2.4s var(--ease-out-quart) .3s}.vv-step:where(#qualify, #qualify *){padding:clamp(22px,2.4vw,30px);position:relative;opacity:0;transform:translateY(18px)}
@media (max-width:980px){.vv-step:where(#qualify, #qualify *){overflow:visible}.vv-step:where(#qualify, #qualify *)::before{content:"";position:absolute;left:-32px;top:calc(clamp(22px,2.4vw,30px) + 7px);width:13px;height:13px;border-radius:9999px;background:var(--blackout);box-shadow:inset 0 0 0 1.5px rgba(var(--steel-rgb),0.35);z-index:2}.vv-steps .vv-step:where(#qualify, #qualify *)::after{inset:auto;left:-28px;top:calc(clamp(22px,2.4vw,30px) + 10.5px);width:6px;height:6px;border-radius:9999px;background:var(--gold);box-shadow:none;opacity:0;filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),0.9));z-index:3;transition:opacity .5s var(--ease-fade)}.is-on .vv-steps .vv-step:nth-child(1):where(#qualify, #qualify *)::after{opacity:1;transition-delay:.75s}.is-on .vv-steps .vv-step:nth-child(2):where(#qualify, #qualify *)::after{opacity:1;transition-delay:1.5s}.is-on .vv-steps .vv-step:nth-child(3):where(#qualify, #qualify *)::after{opacity:1;transition-delay:2.25s}.vv-steps .vv-step:hover:where(#qualify, #qualify *)::after{box-shadow:none}
}.is-on .vv-step:where(#qualify, #qualify *){opacity:1;transform:none;transition:opacity .6s var(--ease-out-quart),transform .6s var(--ease-out-quart)}.is-on .vv-step:nth-child(1):where(#qualify, #qualify *){transition-delay:.6s}.is-on .vv-step:nth-child(2):where(#qualify, #qualify *){transition-delay:1.35s}.is-on .vv-step:nth-child(3):where(#qualify, #qualify *){transition-delay:2.1s}.vv-step > *:where(#qualify, #qualify *){position:relative;z-index:1}.vv-step:where(#qualify, #qualify *)::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),0);transition:box-shadow .45s var(--ease-out-quart);z-index:3}.vv-step:hover:where(#qualify, #qualify *)::after{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),0.42)}.vv-icon:where(#qualify, #qualify *){display:block;width:clamp(96px,11vw,132px);height:auto;margin:6px auto 20px;opacity:0;transform:scale(.86);filter:drop-shadow(0 0 18px rgba(var(--gold-rgb),0.18))}.is-on .vv-step:nth-child(1) .vv-icon:where(#qualify, #qualify *){opacity:1;transform:none;transition:opacity .7s var(--ease-out-quart) .8s,transform .9s var(--ease-out-quart) .8s,filter .5s var(--ease-out-quart)}.is-on .vv-step:nth-child(2) .vv-icon:where(#qualify, #qualify *){opacity:1;transform:none;transition:opacity .7s var(--ease-out-quart) 1.55s,transform .9s var(--ease-out-quart) 1.55s,filter .5s var(--ease-out-quart)}.is-on .vv-step:nth-child(3) .vv-icon:where(#qualify, #qualify *){opacity:1;transform:none;transition:opacity .7s var(--ease-out-quart) 2.3s,transform .9s var(--ease-out-quart) 2.3s,filter .5s var(--ease-out-quart)}.vv-step:hover .vv-icon:where(#qualify, #qualify *){filter:drop-shadow(0 0 26px rgba(var(--gold-rgb),0.45))}.vv-wp:where(#qualify, #qualify *){display:inline-flex;align-items:center;gap:9px;position:relative;padding:5px 11px 5px 12px;margin-bottom:18px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);background:rgba(10,9,8,0.6);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),0.28)}.vv-wp:where(#qualify, #qualify *)::before,.vv-wp:where(#qualify, #qualify *)::after{content:"";position:absolute;width:5px;height:5px;border:1px solid var(--gold)}.vv-wp:where(#qualify, #qualify *)::before{top:-2px;left:-2px;border-right:0;border-bottom:0}.vv-wp:where(#qualify, #qualify *)::after{bottom:-2px;right:-2px;border-left:0;border-top:0}.vv-wp i:where(#qualify, #qualify *){width:5px;height:5px;border-radius:9999px;background:var(--gold);font-style:normal;flex:none;opacity:.35}.is-on .vv-step:nth-child(1) .vv-wp i:where(#qualify, #qualify *){animation:vv-blip 2.6s var(--ease-fade) .9s infinite}.is-on .vv-step:nth-child(2) .vv-wp i:where(#qualify, #qualify *){animation:vv-blip 2.6s var(--ease-fade) 1.65s infinite}.is-on .vv-step:nth-child(3) .vv-wp i:where(#qualify, #qualify *){animation:vv-blip 2.6s var(--ease-fade) 2.4s infinite}.vv-step__n:where(#qualify, #qualify *){position:absolute;top:clamp(18px,2vw,24px);right:clamp(20px,2.2vw,28px);font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:0.03em;color:rgba(var(--steel-rgb),0.16);font-variant-numeric:tabular-nums;z-index:0;transition:color .45s var(--ease-out-quart)}.vv-step:hover .vv-step__n:where(#qualify, #qualify *){color:rgba(var(--gold-rgb),0.5)}

@media (prefers-reduced-motion:reduce){.vv-live:where(#qualify, #qualify *){stroke-dashoffset:0 !important;transition:none}.is-on .vv-spark:where(#qualify, #qualify *){animation:none;opacity:0}.is-on .vv-node-lit:where(#qualify, #qualify *){transition:none}.vv-icon:where(#qualify, #qualify *){opacity:1;transform:none;transition:none}.vv-step:where(#qualify, #qualify *){opacity:1;transform:none;transition:none}.vv-railv:where(#qualify, #qualify *)::after{transform:scaleY(1);transition:none}.is-on .vv-wp i:where(#qualify, #qualify *){animation:none;opacity:1}
}

/* ===== vv-area  (from design_handoff/service-area.html) ===== */
/* scoped to #area with a zero-specificity :where() subject guard */
/* source's .marquee uses -5.5vw side margins, which widen the section past the viewport.
   On the live site body-level clipping absorbs that; standalone it shifted .wrap off-centre,
   so the section clips its own overflow here. */#area:where(#area, #area *){overflow-x:clip}
/* the convoy: same path as .area-route__line, running the corridor on a loop after the
   source draw-in finishes. This is the animation the section was missing. */
.vv-convoy:where(#area, #area *){fill:none;stroke:var(--silver);stroke-width:3;stroke-linecap:round;stroke-dasharray:5 95;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 6px rgba(var(--silver-rgb),1)) drop-shadow(0 0 12px rgba(var(--gold-rgb),0.8))}#area.is-route .vv-convoy:where(#area, #area *){opacity:1;animation:vv-run 5.2s linear 2.7s infinite;transition:opacity .5s var(--ease-fade) 2.7s}.vv-convoy--wake:where(#area, #area *){stroke:var(--gold);stroke-width:1.5;stroke-dasharray:20 80;opacity:0;filter:drop-shadow(0 0 5px rgba(var(--gold-rgb),0.8))}#area.is-route .vv-convoy--wake:where(#area, #area *){opacity:.45;animation:vv-run 5.2s linear 2.55s infinite;transition:opacity .6s var(--ease-fade) 2.55s}.vv-ping:where(#area, #area *){fill:none;stroke:var(--gold);stroke-width:1.2;opacity:0}#area.is-route .vv-ping:where(#area, #area *){animation:vv-ping 5.2s var(--ease-fade) infinite}#area.is-route .vv-ping--la:where(#area, #area *){animation-delay:2.85s}#area.is-route .vv-ping--oc:where(#area, #area *){animation-delay:3.9s}#area.is-route .vv-ping--riv:where(#area, #area *){animation-delay:4.95s}#area.is-route .vv-ping--sd:where(#area, #area *){animation-delay:6s}.vv-dot:where(#area, #area *){fill:var(--gold);opacity:0}#area.is-route .vv-dot:where(#area, #area *){opacity:1;transition:opacity .4s var(--ease-fade)}#area.is-route .vv-dot--la:where(#area, #area *){transition-delay:.15s}#area.is-route .vv-dot--oc:where(#area, #area *){transition-delay:.55s}#area.is-route .vv-dot--riv:where(#area, #area *){transition-delay:.95s}#area.is-route .vv-dot--sd:where(#area, #area *){transition-delay:1.35s}.area-map:where(#area, #area *){position:relative}.area-map img:where(#area, #area *){transform:scale(1.04);transition:transform 1.2s var(--ease-out-quart)}#area.is-route .area-map img:where(#area, #area *){animation:vv-drift 48s var(--ease-fade) infinite alternate}.vv-scan:where(#area, #area *){position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}.vv-scan i:where(#area, #area *){position:absolute;top:0;bottom:0;width:150px;left:-150px;display:block;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),0.1) 45%,rgba(var(--gold-rgb),0.42) 50%,rgba(var(--gold-rgb),0.1) 55%,transparent)}#area.is-route .vv-scan i:where(#area, #area *){animation:vv-sweep 11s var(--ease-fade) 1.5s infinite}.vv-corridor:where(#area, #area *){position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.75);background:linear-gradient(0deg,rgba(10,9,8,0.82),rgba(10,9,8,0));display:flex;justify-content:space-between;gap:12px;z-index:2}.vv-corridor b:where(#area, #area *){color:var(--gold);font-weight:500}.vv-corridor i:where(#area, #area *){font-style:normal;display:inline-flex;align-items:center;gap:7px}.vv-corridor i:where(#area, #area *)::before{content:"";width:5px;height:5px;border-radius:9999px;background:var(--gold);flex:none}#area.is-route .vv-corridor i:where(#area, #area *)::before{animation:vv-blip--area 2.6s var(--ease-fade) infinite}.vv-reason > li:where(#area, #area *){opacity:0;transform:translateY(14px)}#area.is-reasons .vv-reason > li:where(#area, #area *){opacity:1;transform:none;transition:opacity .55s var(--ease-out-quart),transform .55s var(--ease-out-quart)}#area.is-reasons .vv-reason > li:nth-child(1):where(#area, #area *){transition-delay:.05s}#area.is-reasons .vv-reason > li:nth-child(2):where(#area, #area *){transition-delay:.11s}#area.is-reasons .vv-reason > li:nth-child(3):where(#area, #area *){transition-delay:.17s}#area.is-reasons .vv-reason > li:nth-child(4):where(#area, #area *){transition-delay:.23s}#area.is-reasons .vv-reason > li:nth-child(5):where(#area, #area *){transition-delay:.29s}#area.is-reasons .vv-reason > li:nth-child(6):where(#area, #area *){transition-delay:.35s}#area.is-reasons .vv-reason > li:nth-child(7):where(#area, #area *){transition-delay:.41s}#area.is-reasons .vv-reason > li:nth-child(8):where(#area, #area *){transition-delay:.47s}#area.is-reasons .vv-reason > li:nth-child(9):where(#area, #area *){transition-delay:.53s}#area.is-reasons .vv-reason > li:nth-child(10):where(#area, #area *){transition-delay:.59s}.vv-reason > li:where(#area, #area *)::before{transition:color .45s var(--ease-out-quart)}.vv-reason > li:hover:where(#area, #area *)::before{color:var(--silver)}
@media (prefers-reduced-motion:reduce){#area.is-route .vv-convoy:where(#area, #area *),#area.is-route .vv-convoy--wake:where(#area, #area *),#area.is-route .vv-ping:where(#area, #area *){animation:none;opacity:0}#area.is-route .area-map img:where(#area, #area *){animation:none}.vv-scan:where(#area, #area *){display:none}#area.is-route .vv-corridor i:where(#area, #area *)::before{animation:none;opacity:1}.vv-reason > li:where(#area, #area *){opacity:1;transform:none;transition:none}
}

/* ===== vv-faq  (from design_handoff/faq-contact.html) ===== */
/* scoped to #faq with a zero-specificity :where() subject guard */
/* dossier numbering — sits in the summary, ahead of the question */.vv-qnum:where(#faq, #faq *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.16em;color:var(--gold);margin-right:12px;font-variant-numeric:tabular-nums}.faq-item[open] .vv-qnum:where(#faq, #faq *){color:var(--silver)}
/* ANSWERED stencil, stamped on open */
/* the stamp lives INSIDE .faq-answer:where(#faq, #faq *),bottom-right of the answer body. In the summary it ran through the tail of the longest question:where(#faq, #faq *),and .faq-item:where(#faq, #faq *){overflow:hidden} clipped its
   rotated corner. Here it has empty space and nothing to collide with. */
.vv-stamp:where(#faq, #faq *){position:absolute;right:var(--spacing-24);bottom:var(--spacing-24);font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:clamp(14px,2vw,19px);letter-spacing:0.3em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.16);border:2px solid rgba(var(--steel-rgb),0.14);padding:4px 10px;transform:rotate(-8deg) scale(1.5);transform-origin:100% 100%;opacity:0;pointer-events:none;z-index:1;white-space:nowrap}.faq-item[open] .vv-stamp:where(#faq, #faq *){opacity:1;transform:rotate(-8deg) scale(1);transition:opacity .34s var(--ease-fade) .22s,transform .42s var(--ease-out-quart) .22s}
@media (max-width:860px){.vv-stamp:where(#faq, #faq *){display:none}}
/* the spine: a rail down the list with a dot that tracks the open item */
.vv-spinewrap:where(#faq, #faq *){position:relative;padding-left:26px}.vv-spine:where(#faq, #faq *){position:absolute;left:0;top:var(--spacing-32);bottom:0;width:1px;background:linear-gradient(180deg,rgba(var(--steel-rgb),0) 0%,rgba(var(--steel-rgb),0.22) 8%,rgba(var(--steel-rgb),0.22) 92%,rgba(var(--steel-rgb),0) 100%)}.vv-spine b:where(#faq, #faq *){position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:9999px;background:var(--gold);opacity:0;transform:translateY(-50%);transition:top .55s var(--ease-out-quart),opacity .4s var(--ease-fade);box-shadow:0 0 10px 0 rgba(var(--gold-rgb),0.7)}.vv-spine.is-live b:where(#faq, #faq *){opacity:1}.vv-spine i:where(#faq, #faq *){position:absolute;left:0;top:0;width:1px;background:var(--gold);opacity:0;transition:top .55s var(--ease-out-quart),height .55s var(--ease-out-quart),opacity .4s var(--ease-fade)}.vv-spine.is-live i:where(#faq, #faq *){opacity:.7}
@media (max-width:720px){.vv-spinewrap:where(#faq, #faq *){padding-left:0}.vv-spine:where(#faq, #faq *){display:none}}
/* filter — the only piece here that does work */
.vv-filter:where(#faq, #faq *){display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--spacing-24)}.vv-filter label:where(#faq, #faq *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.7)}.vv-filter input:where(#faq, #faq *){flex:1 1 220px;min-width:0;font-family:"Inter",system-ui,sans-serif;font-size:15px;color:var(--silver);background:rgba(10,9,8,0.65);border:1px solid rgba(196,179,159,0.28);padding:11px 14px;border-radius:0;background-image:linear-gradient(var(--gold),var(--gold));background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--ease-out-quart)}.vv-filter input:focus:where(#faq, #faq *){outline:none;background-size:100% 1px}.vv-filter input:where(#faq, #faq *)::placeholder{color:rgba(var(--steel-rgb),0.45)}.vv-count:where(#faq, #faq *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.55);font-variant-numeric:tabular-nums}.vv-count b:where(#faq, #faq *){color:var(--gold);font-weight:500}.faq-item[hidden]:where(#faq, #faq *){display:none}.vv-empty:where(#faq, #faq *){display:none;margin-top:var(--spacing-32);padding:var(--spacing-24)}.vv-empty > *:where(#faq, #faq *){position:relative;z-index:1}.vv-empty.is-on:where(#faq, #faq *){display:block}.vv-empty p:where(#faq, #faq *){font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(17px,2vw,22px);letter-spacing:0.03em;text-transform:uppercase;color:var(--silver);margin-bottom:var(--spacing-10)}.vv-empty span:where(#faq, #faq *){display:block;font-size:15px;line-height:1.7;color:var(--steel);margin-bottom:var(--spacing-16)}.vv-asklinks:where(#faq, #faq *){display:flex;flex-wrap:wrap;gap:var(--spacing-10) var(--spacing-24)}.vv-asklinks a:where(#faq, #faq *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:var(--text-body-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px;transition:color .35s var(--ease-out-quart)}.vv-asklinks a:where(#faq, #faq *)::before{content:"";width:16px;height:1px;background:currentColor}.vv-asklinks a:hover:where(#faq, #faq *){color:var(--silver)}
/* YOUR COST / $0 — no figure but $0, because none is claimed */
/* it is a <p>:where(#faq, #faq *),so it inherits .faq-item p:where(#faq, #faq *){padding:0 24px 24px} — zero that, then use the
   same 24px as horizontal margin, so the label lines up with the answer text below it. */
.vv-cost:where(#faq, #faq *){display:flex;align-items:baseline;gap:14px;margin:0 var(--spacing-24) var(--spacing-16);padding:0 0 var(--spacing-16);border-bottom:1px solid rgba(var(--steel-rgb),0.16)}.vv-cost em:where(#faq, #faq *){font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.7)}.vv-cost b:where(#faq, #faq *){font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(30px,4.4vw,44px);line-height:1;letter-spacing:0.02em;color:var(--gold);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.faq-item[open] .vv-stamp:where(#faq, #faq *){opacity:1;transform:rotate(-8deg);transition:none}.vv-spine b:where(#faq, #faq *),.vv-spine i:where(#faq, #faq *){transition:none}
}

/* ===== vv-contact  (from design_handoff/faq-contact.html) ===== */
/* scoped to #contact with a zero-specificity :where() subject guard */
.vv-contact-grid:where(#contact, #contact *){display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:var(--spacing-32);align-items:start}
@media (max-width:900px){.vv-contact-grid:where(#contact, #contact *){grid-template-columns:1fr}}.place-form:where(#contact, #contact *){max-width:none}
/* the allocation board — a claim, so the count lives in one attribute */
.vv-board:where(#contact, #contact *){padding:var(--spacing-20);margin-top:var(--spacing-32)}.vv-board > *:where(#contact, #contact *){position:relative;z-index:1}.vv-board__head:where(#contact, #contact *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.7);display:flex;justify-content:space-between;gap:10px;padding-bottom:var(--spacing-16);border-bottom:1px solid rgba(var(--steel-rgb),0.16);margin-bottom:var(--spacing-16)}.vv-board__head b:where(#contact, #contact *){color:var(--gold);font-weight:500;font-variant-numeric:tabular-nums}.vv-slots:where(#contact, #contact *){list-style:none;display:grid;gap:8px}.vv-slot:where(#contact, #contact *){display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;padding:11px 12px;background:rgba(196,179,159,0.04);box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.14);font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.6);opacity:0;transform:translateX(-10px)}.is-board .vv-slot:where(#contact, #contact *){opacity:1;transform:none;transition:opacity .5s var(--ease-out-quart),transform .5s var(--ease-out-quart)}.is-board .vv-slot:nth-child(1):where(#contact, #contact *){transition-delay:.05s}.is-board .vv-slot:nth-child(2):where(#contact, #contact *){transition-delay:.13s}.is-board .vv-slot:nth-child(3):where(#contact, #contact *){transition-delay:.21s}.is-board .vv-slot:nth-child(4):where(#contact, #contact *){transition-delay:.29s}.is-board .vv-slot:nth-child(5):where(#contact, #contact *){transition-delay:.37s}.vv-slot__id:where(#contact, #contact *){color:rgba(var(--steel-rgb),0.45);font-variant-numeric:tabular-nums}.vv-slot__pip:where(#contact, #contact *){width:9px;height:9px;border-radius:9999px;box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.4);justify-self:end}.vv-slot--open:where(#contact, #contact *){color:var(--silver)}.vv-slot--open .vv-slot__pip:where(#contact, #contact *){background:var(--gold);box-shadow:0 0 8px 0 rgba(var(--gold-rgb),0.65)}.is-board .vv-slot--open .vv-slot__pip:where(#contact, #contact *){animation:vv-avail 2.6s var(--ease-fade) infinite}.vv-slot--open:nth-child(even) .vv-slot__pip:where(#contact, #contact *){animation-delay:-1.3s}.vv-slot--taken:where(#contact, #contact *){color:rgba(var(--steel-rgb),0.38)}.vv-slot--taken .vv-slot__pip:where(#contact, #contact *){background:rgba(var(--steel-rgb),0.22)}.vv-slot--taken b:where(#contact, #contact *){font-weight:500;color:rgba(var(--steel-rgb),0.5);letter-spacing:0.18em}
/* mini machine: one row per field, lit as it is completed */
.vv-rows:where(#contact, #contact *){padding:var(--spacing-20);margin-top:var(--spacing-16)}.vv-rows > *:where(#contact, #contact *){position:relative;z-index:1}.vv-rows__head:where(#contact, #contact *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.7);display:flex;justify-content:space-between;gap:10px;margin-bottom:var(--spacing-16)}.vv-rows__head b:where(#contact, #contact *){color:var(--gold);font-weight:500;font-variant-numeric:tabular-nums}.vv-rows ol:where(#contact, #contact *){list-style:none;display:grid;gap:6px;counter-reset:row}.vv-rows li:where(#contact, #contact *){counter-increment:row;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:9px 11px;background:rgba(196,179,159,0.04);box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.12);font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.5);transition:color .4s var(--ease-out-quart),box-shadow .4s var(--ease-out-quart),background .4s var(--ease-out-quart)}.vv-rows li:where(#contact, #contact *)::after{content:"";width:22px;height:2px;background:rgba(var(--steel-rgb),0.2);transition:background .4s var(--ease-out-quart),box-shadow .4s var(--ease-out-quart)}.vv-rows li.is-lit:where(#contact, #contact *){color:var(--silver);background:rgba(196,179,159,0.09);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),0.45)}.vv-rows li.is-lit:where(#contact, #contact *)::after{background:var(--gold);box-shadow:0 0 8px 0 rgba(var(--gold-rgb),0.7)}.vv-rows li em:where(#contact, #contact *){font-style:normal;color:rgba(var(--steel-rgb),0.4);letter-spacing:0.1em}.vv-ready:where(#contact, #contact *){margin-top:var(--spacing-16);font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.5);transition:color .4s var(--ease-out-quart)}.vv-ready.is-on:where(#contact, #contact *){color:var(--gold)}
/* texting route */
.vv-text:where(#contact, #contact *){display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-16) var(--spacing-24);margin-top:var(--spacing-16)}.vv-text a:where(#contact, #contact *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:var(--text-body-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:9px;transition:color .35s var(--ease-out-quart)}.vv-text a:where(#contact, #contact *)::before{content:"";width:18px;height:1px;background:currentColor;transition:width .35s var(--ease-out-quart)}.vv-text a:hover:where(#contact, #contact *){color:var(--silver)}.vv-text a:hover:where(#contact, #contact *)::before{width:28px}.vv-text span:where(#contact, #contact *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.45)}
/* the receipt */
.vv-receipt:where(#contact, #contact *){position:relative;margin-top:var(--spacing-16);max-width:340px;padding:var(--spacing-16);background:rgba(233,228,220,0.94);color:var(--blackout);font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.13em;text-transform:uppercase;opacity:0;transform:translateY(-14px);pointer-events:none;clip-path:inset(0 0 100% 0)}.vv-receipt.is-out:where(#contact, #contact *){opacity:1;transform:none;clip-path:inset(0 0 0 0);transition:clip-path .75s var(--ease-out-quart),opacity .3s var(--ease-fade),transform .6s var(--ease-out-quart)}.vv-receipt b:where(#contact, #contact *){display:block;font-family:"Jost",sans-serif;font-size:15px;letter-spacing:0.1em;margin-bottom:7px}.vv-receipt i:where(#contact, #contact *){font-style:normal;display:block;color:rgba(10,9,8,0.6);margin-top:7px;padding-top:7px;border-top:1px dashed rgba(10,9,8,0.28)}
/* P.S. as a Two Worlds split — source DOM order kept, told apart by treatment */
.vv-ps:where(#contact, #contact *){display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:var(--spacing-24)}
@media (max-width:760px){.vv-ps:where(#contact, #contact *){grid-template-columns:1fr}}.vv-ps > div:where(#contact, #contact *){padding:var(--spacing-20);position:relative;opacity:0;transform:translateY(16px)}.is-ps .vv-ps > div:where(#contact, #contact *){opacity:1;transform:none;transition:opacity .6s var(--ease-out-quart),transform .6s var(--ease-out-quart)}.is-ps .vv-ps > div:nth-child(2):where(#contact, #contact *){transition-delay:.14s}.vv-ps__tag:where(#contact, #contact *){display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:var(--spacing-10)}.vv-ps p:where(#contact, #contact *){font-size:15px;line-height:1.7}.vv-ps--best:where(#contact, #contact *){background:rgba(var(--gold-rgb),0.07);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),0.28)}.vv-ps--best .vv-ps__tag:where(#contact, #contact *){color:var(--gold)}.vv-ps--best p:where(#contact, #contact *){color:var(--silver)}.vv-ps--worst:where(#contact, #contact *){background:rgba(196,179,159,0.03);box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.14)}.vv-ps--worst .vv-ps__tag:where(#contact, #contact *){color:rgba(var(--steel-rgb),0.6)}.vv-ps--worst p:where(#contact, #contact *){color:rgba(var(--steel-rgb),0.72)}.vv-ps--best:where(#contact, #contact *)::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0}.is-ps .vv-ps--best:where(#contact, #contact *)::after{opacity:1;transition:opacity .6s var(--ease-fade) .5s}
@media (prefers-reduced-motion:reduce){.vv-slot:where(#contact, #contact *),.vv-ps > div:where(#contact, #contact *){opacity:1;transform:none;transition:none}.is-board .vv-slot--open .vv-slot__pip:where(#contact, #contact *){animation:none}.vv-receipt.is-out:where(#contact, #contact *){transition:none;clip-path:none}.vv-rows li:where(#contact, #contact *),.vv-rows li:where(#contact, #contact *)::after,.vv-ready:where(#contact, #contact *){transition:none}
}

/* ===== vv-footer  (from design_handoff/footer.html) ===== */
/* scoped to .overlay-card--footer with a zero-specificity :where() subject guard */
/* ── TWEAKABLE ────────────────────────────────────────────────────────────────
   The five values below are what the preview panel writes. The defaults ARE the
   approved layout — paste this block as-is and delete the panel markup/script at
   the bottom of the file. Nothing else reads these vars. */.overlay-card--footer:where(.overlay-card--footer, .overlay-card--footer *){position:relative;min-height:var(--vv-plate-h);display:flex;flex-direction:column;justify-content:flex-end;margin-top:0;border-top:0 !important}
/* authored delta over site.css §5.7's 118px — the text group sits closer to the bottom
   edge so more of the photograph is clear above it. Driven by --vv-lift. */
.overlay-card--footer:where(.overlay-card--footer, .overlay-card--footer *){padding-bottom:calc(var(--vv-lift) + env(safe-area-inset-bottom,0px))}
/* the shipping ::before wash is built for about.html's sunrise loop; .vv-scrim below is the
   plate-specific replacement, so the source wash is switched off rather than stacked. */
.overlay-card--footer:where(.overlay-card--footer, .overlay-card--footer *)::before{display:none}
/* the plate is the footer's ground, not a decoration — it defines the block's height */
.vv-plate:where(.overlay-card--footer, .overlay-card--footer *),.vv-scrim:where(.overlay-card--footer, .overlay-card--footer *),.vv-glow:where(.overlay-card--footer, .overlay-card--footer *),.vv-lamp:where(.overlay-card--footer, .overlay-card--footer *),.vv-sheen:where(.overlay-card--footer, .overlay-card--footer *){position:absolute;left:calc(50% - 50vw);width:100vw;top:0;bottom:0;pointer-events:none}.vv-plate:where(.overlay-card--footer, .overlay-card--footer *){z-index:0;overflow:hidden}.vv-plate img:where(.overlay-card--footer, .overlay-card--footer *){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 100%;transform-origin:66% 60%}.is-on .vv-plate img:where(.overlay-card--footer, .overlay-card--footer *){animation:plate-drift--footer 54s var(--ease-fade) infinite alternate}.vv-scrim:where(.overlay-card--footer, .overlay-card--footer *){z-index:1;opacity:var(--vv-scrim);background:linear-gradient(180deg,rgba(10,9,8,0.86) 0%,rgba(10,9,8,0.28) 14%,rgba(10,9,8,0.16) 46%,rgba(10,9,8,0.38) 78%,rgba(10,9,8,0.78) 100%),linear-gradient(96deg,rgba(10,9,8,0.58) 0%,rgba(10,9,8,0.42) 24%,rgba(10,9,8,0.2) 46%,rgba(10,9,8,0.03) 66%,rgba(10,9,8,0) 80%)}
/* the copy now sits ON the photograph rather than beside it, so every text run carries its
   own shadow — that buys legibility without darkening the picture back into a black panel */
.footer-top:where(.overlay-card--footer, .overlay-card--footer *),.vv-legal:where(.overlay-card--footer, .overlay-card--footer *),.footer-machine:where(.overlay-card--footer, .overlay-card--footer *){text-shadow:0 1px 14px rgba(10,9,8,0.92),0 1px 3px rgba(10,9,8,0.8)}.vv-glow:where(.overlay-card--footer, .overlay-card--footer *){z-index:1;background:radial-gradient(30% 26% at 65.2% 41.4%,rgba(var(--gold-rgb),0.3) 0%,rgba(var(--gold-rgb),0.09) 45%,rgba(var(--gold-rgb),0) 72%);mix-blend-mode:screen;opacity:.55}.is-on .vv-glow:where(.overlay-card--footer, .overlay-card--footer *){animation:glow-breathe 7s var(--ease-fade) infinite}.vv-lamp:where(.overlay-card--footer, .overlay-card--footer *){z-index:1;mix-blend-mode:screen;background:radial-gradient(9% 13% at 57.6% 39%,rgba(var(--gold-rgb),0.34) 0%,rgba(var(--gold-rgb),0) 70%),radial-gradient(9% 13% at 72% 39%,rgba(var(--gold-rgb),0.34) 0%,rgba(var(--gold-rgb),0) 70%);opacity:.7}.is-on .vv-lamp:where(.overlay-card--footer, .overlay-card--footer *){animation:lamp-flicker 9s steps(1,end) infinite}.vv-sheen:where(.overlay-card--footer, .overlay-card--footer *){z-index:1;overflow:hidden}.vv-sheen i:where(.overlay-card--footer, .overlay-card--footer *){position:absolute;left:-40%;top:62%;bottom:0;width:38%;display:block;background:linear-gradient(100deg,transparent,rgba(var(--gold-rgb),0.05) 40%,rgba(var(--gold-rgb),0.13) 52%,rgba(var(--gold-rgb),0.04) 64%,transparent);filter:blur(14px);opacity:0}.is-on .vv-sheen i:where(.overlay-card--footer, .overlay-card--footer *){opacity:1;animation:sheen-pass 14s var(--ease-fade) 2s infinite}.overlay-card--footer > .footer-top:where(.overlay-card--footer, .overlay-card--footer *),.overlay-card--footer > .footer-machine:where(.overlay-card--footer, .overlay-card--footer *),.overlay-card--footer > .vv-legal:where(.overlay-card--footer, .overlay-card--footer *){position:relative;z-index:2}
/* nav pulled in beside the brand rather than out at 0.85fr, so the whole text group
   occupies the bottom-left corner and the lit half of the plate stays clear */
.footer-top:where(.overlay-card--footer, .overlay-card--footer *){max-width:none;display:grid;grid-template-columns:minmax(0,var(--vv-brand-w)) minmax(0,auto);justify-content:start;gap:var(--vv-nav-gap);align-items:start;opacity:0;transform:translateY(18px)}.footer-tag:where(.overlay-card--footer, .overlay-card--footer *){max-width:var(--vv-brand-w)}
/* nav drops so "About" lines up with the VETERAN VENDS · Marine-owned line rather than
   with the wordmark above it — the offset clears the logo, its margin and the gold rule */
.footer-nav:where(.overlay-card--footer, .overlay-card--footer *){margin-top:var(--vv-nav-top)}.is-on .footer-top:where(.overlay-card--footer, .overlay-card--footer *){opacity:1;transform:none;transition:opacity .7s var(--ease-out-quart) .15s,transform .7s var(--ease-out-quart) .15s}.footer-logo img:where(.overlay-card--footer, .overlay-card--footer *){display:block;height:52px;width:auto}.vv-rule:where(.overlay-card--footer, .overlay-card--footer *){display:block;width:0;height:1px;background:linear-gradient(90deg,var(--scarlet),var(--gold));margin:4px 0 2px}.is-on .vv-rule:where(.overlay-card--footer, .overlay-card--footer *){width:58px;transition:width .9s var(--ease-out-quart) .5s}.footer-nav a:where(.overlay-card--footer, .overlay-card--footer *){position:relative;padding-bottom:3px}.footer-nav a:where(.overlay-card--footer, .overlay-card--footer *)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out-quart)}.overlay-card--footer .footer-nav a:hover:where(.overlay-card--footer, .overlay-card--footer *)::after{transform:scaleX(1)}.footer-nav a:focus-visible:where(.overlay-card--footer, .overlay-card--footer *){outline:2px solid var(--gold);outline-offset:3px}.built-by a:focus-visible:where(.overlay-card--footer, .overlay-card--footer *),.footer-brand a:focus-visible:where(.overlay-card--footer, .overlay-card--footer *){outline:2px solid var(--gold);outline-offset:3px}.vv-legal:where(.overlay-card--footer, .overlay-card--footer *){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px 32px;opacity:0}.built-by:where(.overlay-card--footer, .overlay-card--footer *){justify-self:end}.is-on .vv-legal:where(.overlay-card--footer, .overlay-card--footer *){opacity:1;transition:opacity .7s var(--ease-fade) .8s}.overlay-card--footer .footer-copy:where(.overlay-card--footer, .overlay-card--footer *){margin-top:0;border-top:0;padding-top:0}.vv-legal:where(.overlay-card--footer, .overlay-card--footer *)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(var(--steel-rgb),0.22),rgba(var(--steel-rgb),0.02) 62%,transparent)}.vv-legal:where(.overlay-card--footer, .overlay-card--footer *){padding-top:var(--spacing-20);margin-top:clamp(40px,5vw,72px)}
/* the legal strip sits over the wet-floor reflections, so it carries its own full-bleed
   wash rather than darkening the whole plate to suit one line of 10px type */
.vv-legal:where(.overlay-card--footer, .overlay-card--footer *)::after{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;top:-20px;bottom:calc(-1 * clamp(40px,4.5vw,72px) - 118px - env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(10,9,8,0) 0%,rgba(10,9,8,0.82) 26%,rgba(10,9,8,0.93) 100%);z-index:-1;pointer-events:none}.built-by:where(.overlay-card--footer, .overlay-card--footer *){margin-top:0}
/* Divine Built placement variant — the panel toggles data-db on .vv-legal */
.vv-legal[data-db="inline"]:where(.overlay-card--footer, .overlay-card--footer *){grid-template-columns:1fr;justify-items:start}.vv-legal[data-db="inline"] .built-by:where(.overlay-card--footer, .overlay-card--footer *){justify-self:start}

/* ── B4 easter egg: additive motion layer ─────────────────────────────
   B4 now HOPS before it vends: arms sprout, grab its own bottom corners, lift the body 16px
   to expose telescoping legs, then set it down with a squash and a puff of dust — and only
   then does source's vend fire. Source keeps its own shake, chip drop and ticket slide
   untouched; they are simply gated behind the hop by a capture-phase listener. Everything
   below is new and namespaced vv-*, driven by a `vv-fired` class the additive
   script adds alongside site.js's IIFE — separate listener, no shared state. */
.footer-machine:where(.overlay-card--footer, .overlay-card--footer *){max-width:min(760px,52%);position:relative;z-index:2}
/* the vend line sits over the lit half of the photograph, where source's flat-ground
   values (10px hint at 0.55 steel, ticket fill at 0.07 steel) go illegible. Local wash
   plus three scoped contrast bumps — same approach as .vv-legal's own wash. */
.footer-machine:where(.overlay-card--footer, .overlay-card--footer *)::before{content:"";position:absolute;left:-18px;right:-28px;top:-14px;bottom:-12px;background:radial-gradient(105% 92% at 22% 58%,rgba(10,9,8,0.62) 0%,rgba(10,9,8,0.34) 46%,rgba(10,9,8,0) 78%),0) 100%);pointer-events:none;z-index:0}.footer-machine .vend-line:where(.overlay-card--footer, .overlay-card--footer *){position:relative;z-index:1}.footer-machine .vend-line__hint:where(.overlay-card--footer, .overlay-card--footer *){color:rgba(var(--steel-rgb),0.85)}
/* the machine is CUT OUT over the photograph: source fills it with opaque metal, which reads
   as a black box on a picture. Restyled through the gradient stops so the source SVG markup
   stays untouched — delete this group to get the shipping opaque machine back. */
.footer-machine linearGradient#vmBody stop:nth-of-type(1):where(.overlay-card--footer, .overlay-card--footer *){stop-color:rgba(61,54,46,0.4)}.footer-machine linearGradient#vmBody stop:nth-of-type(2):where(.overlay-card--footer, .overlay-card--footer *){stop-color:rgba(43,39,35,0.3)}.footer-machine linearGradient#vmBody stop:nth-of-type(3):where(.overlay-card--footer, .overlay-card--footer *){stop-color:rgba(26,23,19,0.44)}.footer-machine linearGradient#vmGlass stop:nth-of-type(1):where(.overlay-card--footer, .overlay-card--footer *){stop-color:rgba(20,17,14,0.44)}.footer-machine linearGradient#vmGlass stop:nth-of-type(2):where(.overlay-card--footer, .overlay-card--footer *){stop-color:rgba(10,9,8,0.6)}.footer-machine .vend-machine rect[fill="rgba(10,9,8,0.95)"]:where(.overlay-card--footer, .overlay-card--footer *),.footer-machine .vend-machine rect[fill="rgba(10,9,8,0.9)"]:where(.overlay-card--footer, .overlay-card--footer *){fill:rgba(10,9,8,0.58)}.footer-machine .vend-machine:where(.overlay-card--footer, .overlay-card--footer *){filter:drop-shadow(0 5px 16px rgba(10,9,8,0.6))}.footer-machine .vend-machine:hover:where(.overlay-card--footer, .overlay-card--footer *){filter:drop-shadow(0 5px 16px rgba(10,9,8,0.6)) drop-shadow(0 0 14px rgba(var(--gold-rgb),0.3))}.footer-machine .vend-tag:where(.overlay-card--footer, .overlay-card--footer *){background:rgba(10,9,8,0.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);position:relative;overflow:hidden}.footer-machine .vend-line__key:where(.overlay-card--footer, .overlay-card--footer *){background:linear-gradient(180deg,rgba(196,179,159,0.32),rgba(196,179,159,0.14));border-color:rgba(196,179,159,0.72)}.vend-machine:where(.overlay-card--footer, .overlay-card--footer *){perspective:220px}
/* interior life: the three shelf light-bars breathe. Selected by their filter attribute,
   so the source SVG needs no new markup or classes. */
.vend-machine svg rect[filter]:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-shelf 5.2s var(--ease-fade) infinite}.vend-machine svg rect[filter]:nth-of-type(5):where(.overlay-card--footer, .overlay-card--footer *){animation-delay:-1.7s}.vend-machine svg rect[filter]:nth-of-type(6):where(.overlay-card--footer, .overlay-card--footer *){animation-delay:-3.4s}
/* idle attract — B4 breathes until pressed once, then never again */
.vv-key-halo:where(.overlay-card--footer, .overlay-card--footer *),.vv-ring:where(.overlay-card--footer, .overlay-card--footer *){position:absolute;right:7px;top:52px;width:28px;height:28px;border-radius:4px;pointer-events:none}.vv-key-halo:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-attract 5.4s var(--ease-fade) 2s infinite}.vend-line.has-vended .vv-key-halo:where(.overlay-card--footer, .overlay-card--footer *){animation:none;opacity:0}.vv-ring:where(.overlay-card--footer, .overlay-card--footer *){border:1px solid var(--scarlet);opacity:0}.vv-fired .vv-ring:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-ring-out .62s var(--ease-out-quart)}
/* ── B4 hop: arms sprout, grab the bottom corners, lift, drop ──────────
   Geometry is read off source's own SVG (viewBox 0 0 100 150): body rect x2 y2 w96 h142, so
   the bottom corners sit at (2,144) and (98,144), and the two stub feet at x8/x82 y144 h4 put
   the ground line at y=148. The hands land just inside the rounded corners; the legs telescope
   down from the existing feet by exactly the 16px the body rises, so the feet come back down
   on the original ground line rather than floating.
   The limb overlay is its own SVG with a TALLER viewBox (176 vs 150) because the legs extend
   below the body — same 1 unit = 1px scale, so nothing else shifts.
   Sequenced against source's vend, not over it: the whole hop runs BEFORE source's click
   handler is allowed to fire, so the existing shake, chip drop and ticket slide land after the
   machine touches down. See the gate in the script. */
.vv-limbs:where(.overlay-card--footer, .overlay-card--footer *){position:absolute;left:0;top:0;width:100px;height:176px;pointer-events:none;z-index:1;overflow:visible}.vv-arm:where(.overlay-card--footer, .overlay-card--footer *){fill:none;stroke:var(--steel);stroke-width:3.2;stroke-linecap:round;stroke-dashoffset:1;opacity:0}.vv-hand:where(.overlay-card--footer, .overlay-card--footer *){fill:var(--steel);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}.vv-leg:where(.overlay-card--footer, .overlay-card--footer *){fill:var(--gunmetal);stroke:rgba(196,179,159,0.5);stroke-width:1.2;transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}.vv-hop .vv-arm:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-arm-out 1060ms var(--ease-out-quart) both}.vv-hop .vv-hand:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-hand-out 1060ms var(--ease-out-quart) both}.vv-hop .vv-leg:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-leg-out 1060ms var(--ease-out-quart) both}.vend-machine:where(.overlay-card--footer, .overlay-card--footer *){transform-origin:50% 100%}.vv-hop .vend-machine:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-hop 760ms var(--ease-out-quart) 300ms both}.vv-dust:where(.overlay-card--footer, .overlay-card--footer *){position:absolute;left:50%;bottom:-7px;width:60px;height:11px;margin-left:-30px;border-radius:9999px;background:radial-gradient(ellipse at center,rgba(var(--steel-rgb),0.42),transparent 70%);opacity:0;pointer-events:none;z-index:0}.vv-hop .vv-dust:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-dust-out 440ms var(--ease-fade) 880ms}
/* the shelf the chip leaves flashes white-hot */
.vv-shelf-hit:where(.overlay-card--footer, .overlay-card--footer *){position:absolute;left:10px;top:41px;width:48px;height:2px;background:var(--silver);opacity:0;pointer-events:none;filter:drop-shadow(0 0 5px rgba(var(--silver-rgb),0.95))}.vv-fired .vv-shelf-hit:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-flash .55s var(--ease-out-quart)}
/* delivery flap kicks open as the chip lands, then settles */
.vv-flap:where(.overlay-card--footer, .overlay-card--footer *){position:absolute;left:10px;top:122px;width:48px;height:14px;background:rgba(10,9,8,0.95);border:1.2px solid rgba(var(--gold-rgb),0.6);transform-origin:50% 100%;pointer-events:none}.vv-fired .vv-flap:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-flap-kick .8s var(--ease-out-quart) .28s}
/* impact puff at the flap when the chip hits */
.vv-puff:where(.overlay-card--footer, .overlay-card--footer *){position:absolute;left:24px;top:126px;width:16px;height:16px;border-radius:9999px;background:radial-gradient(circle,rgba(var(--silver-rgb),0.5),transparent 70%);opacity:0;pointer-events:none}.vv-fired .vv-puff:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-puff-out .55s var(--ease-fade) .4s}
/* gold sweep crosses the ticket as it lands */
.footer-machine .vend-tag.is-in:where(.overlay-card--footer, .overlay-card--footer *)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(var(--gold-rgb),0.34) 50%,transparent 62%);animation:vv-tag-sweep .85s var(--ease-out-quart) .22s}
/* mission-log counter + rack reload notice */
.vv-meta:where(.overlay-card--footer, .overlay-card--footer *){display:flex;align-items:center;gap:14px;min-height:12px}.vv-count:where(.overlay-card--footer, .overlay-card--footer *),.vv-restock:where(.overlay-card--footer, .overlay-card--footer *){font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap}.vv-count:where(.overlay-card--footer, .overlay-card--footer *){color:rgba(var(--gold-rgb),0.8);opacity:0;transition:opacity .4s var(--ease-fade)}.vend-line.has-vended .vv-count:where(.overlay-card--footer, .overlay-card--footer *){opacity:1}.vv-count b:where(.overlay-card--footer, .overlay-card--footer *){font-weight:500;color:var(--silver);font-variant-numeric:tabular-nums}.vv-restock:where(.overlay-card--footer, .overlay-card--footer *){color:var(--scarlet);opacity:0}.vv-restock.is-on:where(.overlay-card--footer, .overlay-card--footer *){animation:vv-restock-blink 2.6s var(--ease-fade)}
@media (max-width:900px){.footer-machine:where(.overlay-card--footer, .overlay-card--footer *){max-width:100%}.footer-top:where(.overlay-card--footer, .overlay-card--footer *){max-width:100%;grid-template-columns:1fr;gap:36px}.vv-scrim:where(.overlay-card--footer, .overlay-card--footer *){background:linear-gradient(180deg,rgba(10,9,8,0.9) 0%,rgba(10,9,8,0.52) 18%,rgba(10,9,8,0.56) 62%,rgba(10,9,8,0.86) 100%)}.vv-plate img:where(.overlay-card--footer, .overlay-card--footer *){object-position:66% 100%}.vv-legal:where(.overlay-card--footer, .overlay-card--footer *){grid-template-columns:1fr;justify-items:start}.built-by:where(.overlay-card--footer, .overlay-card--footer *){justify-self:start}
}
@media (prefers-reduced-motion:reduce){.is-on .vv-plate img:where(.overlay-card--footer, .overlay-card--footer *),.is-on .vv-glow:where(.overlay-card--footer, .overlay-card--footer *),.is-on .vv-lamp:where(.overlay-card--footer, .overlay-card--footer *){animation:none}.is-on .vv-sheen i:where(.overlay-card--footer, .overlay-card--footer *){animation:none;opacity:0}.footer-top:where(.overlay-card--footer, .overlay-card--footer *),.vv-legal:where(.overlay-card--footer, .overlay-card--footer *){opacity:1;transform:none;transition:none}.vv-rule:where(.overlay-card--footer, .overlay-card--footer *){width:58px;transition:none}.footer-nav a:where(.overlay-card--footer, .overlay-card--footer *)::after{transition:none}.vend-machine svg rect[filter]:where(.overlay-card--footer, .overlay-card--footer *){animation:none}.vv-key-halo:where(.overlay-card--footer, .overlay-card--footer *){animation:none;opacity:0}.vv-fired .vv-ring:where(.overlay-card--footer, .overlay-card--footer *),.vv-fired .vv-shelf-hit:where(.overlay-card--footer, .overlay-card--footer *),.vv-fired .vv-flap:where(.overlay-card--footer, .overlay-card--footer *),.vv-fired .vv-puff:where(.overlay-card--footer, .overlay-card--footer *){animation:none}
  /* the hop never runs under reduced motion — the script skips the gate entirely, so the
     press behaves exactly as source's does today */
  .vv-hop .vv-arm:where(.overlay-card--footer, .overlay-card--footer *),.vv-hop .vv-hand:where(.overlay-card--footer, .overlay-card--footer *),.vv-hop .vv-leg:where(.overlay-card--footer, .overlay-card--footer *),.vv-hop .vend-machine:where(.overlay-card--footer, .overlay-card--footer *),.vv-hop .vv-dust:where(.overlay-card--footer, .overlay-card--footer *){animation:none}.footer-machine .vend-tag.is-in:where(.overlay-card--footer, .overlay-card--footer *)::after{animation:none;opacity:0}.vv-restock.is-on:where(.overlay-card--footer, .overlay-card--footer *){animation:none;opacity:1}
}

/* ===== vv-about  (from design_handoff/about.html) ===== */
/* scoped to .about-page main with a zero-specificity :where() subject guard.
   NOT bare `main` — video.html has its own <main>, and bare `main` leaked
   .vv-node onto #qualify's circuit nodes and .vv-ret onto #machines' card
   reticles. Caught by the Codex audit, 2026-08-17. */
/* ── the owner's one-liners, made visible ─────────────────────────────── */.about-copy p.about-beat:where(.about-page main, .about-page main *){font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(19px,2.1vw,27px);line-height:1.3;letter-spacing:0.015em;color:var(--silver);margin:var(--spacing-32) 0;padding-left:var(--spacing-20);border-left:2px solid rgba(var(--gold-rgb),0.55);text-wrap:pretty}.about-copy p.about-beat:first-of-type:where(.about-page main, .about-page main *){margin-top:0}.about-shout:where(.about-page main, .about-page main *){font-weight:500;color:var(--gold);letter-spacing:0.04em}.about-beat .about-shout:where(.about-page main, .about-page main *){color:var(--gold)}
/* ── rail down the story, node per beat ───────────────────────────────── */
.vv-storywrap:where(.about-page main, .about-page main *){position:relative;padding-left:28px}.vv-rail:where(.about-page main, .about-page main *){position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,rgba(var(--steel-rgb),0) 0%,rgba(var(--steel-rgb),0.2) 6%,rgba(var(--steel-rgb),0.2) 94%,rgba(var(--steel-rgb),0) 100%)}.vv-rail i:where(.about-page main, .about-page main *){position:absolute;left:0;top:0;width:1px;height:0;background:linear-gradient(180deg,rgba(var(--gold-rgb),0.9),rgba(var(--gold-rgb),0.35));box-shadow:0 0 8px 0 rgba(var(--gold-rgb),0.5)}.vv-node:where(.about-page main, .about-page main *){position:absolute;left:-3.5px;width:8px;height:8px;border-radius:9999px;background:var(--blackout);box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.45);transform:scale(0.8);transition:background .45s var(--ease-out-quart),box-shadow .45s var(--ease-out-quart),transform .45s var(--ease-out-quart)}.vv-node.is-lit:where(.about-page main, .about-page main *){background:var(--gold);box-shadow:0 0 10px 1px rgba(var(--gold-rgb),0.6);transform:scale(1)}
@media (max-width:900px){.vv-storywrap:where(.about-page main, .about-page main *){padding-left:0}.vv-rail:where(.about-page main, .about-page main *),.vv-node:where(.about-page main, .about-page main *){display:none}
  /* not sticky below 900px, so the viewport cap and the shrink both come off */
  .about-portraits:where(.about-page main, .about-page main *){max-height:none}.about-portrait:where(.about-page main, .about-page main *){flex:0 0 auto}.about-portrait img:where(.about-page main, .about-page main *){height:auto;max-height:none}
}
/* ── portrait: reticles + a slow scale ────────────────────────────────── */
.about-portrait:where(.about-page main, .about-page main *){overflow:hidden}.about-portrait img:where(.about-page main, .about-page main *){transform:scale(1.03);transition:transform 1.4s var(--ease-out-quart)}.about-portrait:hover img:where(.about-page main, .about-page main *){transform:scale(1.08)}.vv-ret:where(.about-page main, .about-page main *){position:absolute;width:15px;height:15px;pointer-events:none;z-index:3;opacity:0.35;transition:opacity .45s var(--ease-out-quart),transform .45s var(--ease-out-quart)}.vv-ret:where(.about-page main, .about-page main *)::before,.vv-ret:where(.about-page main, .about-page main *)::after{content:"";position:absolute;background:var(--gold)}.vv-ret:where(.about-page main, .about-page main *)::before{width:100%;height:1px;top:0}.vv-ret:where(.about-page main, .about-page main *)::after{height:100%;width:1px;left:0}.vv-ret--tl:where(.about-page main, .about-page main *){top:7px;left:7px}.vv-ret--tr:where(.about-page main, .about-page main *){top:7px;right:7px;transform:scaleX(-1)}.vv-ret--bl:where(.about-page main, .about-page main *){bottom:7px;left:7px;transform:scaleY(-1)}.vv-ret--br:where(.about-page main, .about-page main *){bottom:7px;right:7px;transform:scale(-1)}.about-portrait:hover .vv-ret:where(.about-page main, .about-page main *){opacity:1}.about-portrait:hover .vv-ret--tl:where(.about-page main, .about-page main *){transform:translate(-3px,-3px)}.about-portrait:hover .vv-ret--tr:where(.about-page main, .about-page main *){transform:scaleX(-1) translate(-3px,-3px)}.about-portrait:hover .vv-ret--bl:where(.about-page main, .about-page main *){transform:scaleY(-1) translate(-3px,-3px)}.about-portrait:hover .vv-ret--br:where(.about-page main, .about-page main *){transform:scale(-1) translate(-3px,-3px)}
/* ── the machine that stocks as you read ─────────────────────────────── */
/* The gauge is the point of the page:where(.about-page main, .about-page main *),so it sits FIRST in the sticky column — above the portrait:where(.about-page main, .about-page main *),where it is on screen for the whole read. Previously it was the last child of a sticky block taller than the viewport:where(.about-page main, .about-page main *),so it lived below the fold until sticky released and was only ever seen already near full. The column is also bounded to the viewport and the portrait allowed to shrink:where(.about-page main, .about-page main *),so the pair can never again overflow the sticky window. */ .about-portraits:where(.about-page main, .about-page main *){max-height:calc(100vh - var(--nav-h) - var(--spacing-24) - var(--spacing-16));display:flex;flex-direction:column;gap:var(--spacing-16)}.about-portrait:where(.about-page main, .about-page main *){min-height:0;flex:1 1 auto}.about-portrait img:where(.about-page main, .about-page main *){height:100%;max-height:100%;object-fit:cover;object-position:50% 22%}.vv-stock:where(.about-page main, .about-page main *){flex:0 0 auto;padding:var(--spacing-16)}.vv-stock > *:where(.about-page main, .about-page main *){position:relative;z-index:1}.vv-stock__head:where(.about-page main, .about-page main *){display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.65);margin-bottom:var(--spacing-10)}.vv-stock__head b:where(.about-page main, .about-page main *){color:var(--gold);font-weight:500;font-variant-numeric:tabular-nums;font-family:"Jost",sans-serif;font-size:17px;letter-spacing:0.04em}.vv-stock__rows:where(.about-page main, .about-page main *){display:grid;gap:4px}.vv-stock__row:where(.about-page main, .about-page main *){height:9px;background:rgba(196,179,159,0.05);box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.12);position:relative;overflow:hidden}.vv-stock__row:where(.about-page main, .about-page main *)::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--gold-rgb),0.85),rgba(var(--gold-rgb),0.45));transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out-quart)}.vv-stock__row.is-full:where(.about-page main, .about-page main *)::after{transform:scaleX(1)}.vv-stock__row.is-full:where(.about-page main, .about-page main *){box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),0.4)}.vv-stock__foot:where(.about-page main, .about-page main *){margin-top:var(--spacing-10);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9px;letter-spacing:0.13em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.42)}
@media (prefers-reduced-motion:reduce){.about-portrait img:where(.about-page main, .about-page main *),.about-portrait:hover img:where(.about-page main, .about-page main *){transform:none;transition:none}.vv-stock__row:where(.about-page main, .about-page main *)::after{transition:none}.vv-node:where(.about-page main, .about-page main *){transition:none}
}


/* ===== @keyframes — global by definition, so they sit outside every scope.
   Three names were reused across blocks for different animations and carry a
   per-block suffix: plate-drift--footer, vv-blip--area, vv-scan--board. ===== */

@keyframes vv-pass{0%{transform:translateX(-180px)}70%,100%{transform:translateX(calc(100vw + 180px))}}
@keyframes vv-scan{0%{transform:translateY(0)}100%{transform:translateY(600%)}}
@keyframes vv-power{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes vv-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--gold-rgb),0.55)}55%{opacity:.55;box-shadow:0 0 0 6px rgba(var(--gold-rgb),0)}}
@keyframes vv-scan--board{0%{transform:translateY(0)}100%{transform:translateY(600%)}}
@keyframes topo-drift{to{background-position:1500px 0}}
@keyframes plate-drift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-0.8%,0)}}
@keyframes stencil-breathe{0%,100%{-webkit-text-stroke-color:rgba(233,228,220,0.045)}50%{-webkit-text-stroke-color:rgba(var(--gold-rgb),0.085)}}
@keyframes survey-sweep{0%{transform:translateX(0)}55%,100%{transform:translateX(calc(100vw + 190px))}}
@keyframes vv-travel{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
@keyframes vv-blip{0%,100%{opacity:.35;box-shadow:0 0 0 0 rgba(var(--gold-rgb),0.5)}50%{opacity:1;box-shadow:0 0 0 5px rgba(var(--gold-rgb),0)}}
@keyframes vv-run{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes vv-ping{0%{r:3;opacity:.9}22%{r:16;opacity:0}100%{r:16;opacity:0}}
@keyframes vv-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,1%,0)}}
@keyframes vv-sweep{0%{transform:translateX(0)}60%,100%{transform:translateX(calc(100% + 150px + 100vw))}}
@keyframes vv-blip--area{0%,100%{opacity:.4;box-shadow:0 0 0 0 rgba(var(--gold-rgb),0.5)}50%{opacity:1;box-shadow:0 0 0 5px rgba(var(--gold-rgb),0)}}
@keyframes vv-avail{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--gold-rgb),0.5)}55%{opacity:.55;box-shadow:0 0 0 7px rgba(var(--gold-rgb),0)}}
@keyframes plate-drift--footer{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(-1.2%,-0.8%,0)}}
@keyframes glow-breathe{0%,100%{opacity:.42}50%{opacity:.78}}
@keyframes lamp-flicker{0%,86%,100%{opacity:.7}87%{opacity:.52}88%{opacity:.74}89.5%{opacity:.58}91%{opacity:.72}}
@keyframes sheen-pass{0%{transform:translateX(0)}62%,100%{transform:translateX(370%)}}
@keyframes vv-shelf{0%,100%{opacity:.45}48%{opacity:1}}
@keyframes vv-attract{0%,70%,100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),0)}79%{box-shadow:0 0 0 7px rgba(var(--gold-rgb),0.3)}88%{box-shadow:0 0 0 13px rgba(var(--gold-rgb),0)}}
@keyframes vv-ring-out{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
@keyframes vv-arm-out{0%{opacity:0;stroke-dashoffset:1}5%{opacity:1;stroke-dashoffset:1}24%{opacity:1;stroke-dashoffset:0}84%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:1}}
@keyframes vv-hand-out{0%,17%{opacity:0;transform:scale(0)}25%{opacity:1;transform:scale(1.35)}31%{opacity:1;transform:scale(1)}84%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
@keyframes vv-leg-out{0%,26%{transform:scaleY(0)}56%{transform:scaleY(1)}72%{transform:scaleY(1)}86%,100%{transform:scaleY(0)}}
@keyframes vv-hop{
  0%{transform:translateY(0) rotate(0deg) scaleY(1)}
  7%{transform:translateY(1.5px) rotate(0deg) scaleY(0.975)}
  45%{transform:translateY(-16px) rotate(0deg) scaleY(1.008)}
  55%{transform:translateY(-15px) rotate(-0.7deg) scaleY(1)}
  63%{transform:translateY(-16px) rotate(0.7deg) scaleY(1)}
  70%{transform:translateY(-15.5px) rotate(0deg) scaleY(1)}
  84%{transform:translateY(0) rotate(0deg) scaleY(0.955)}
  92%{transform:translateY(-2px) rotate(0deg) scaleY(1.015)}
  100%{transform:translateY(0) rotate(0deg) scaleY(1)}
}
@keyframes vv-dust-out{0%{opacity:.7;transform:scaleX(.35)}100%{opacity:0;transform:scaleX(1.6)}}
@keyframes vv-flash{0%{opacity:1}100%{opacity:0}}
@keyframes vv-flap-kick{0%,100%{transform:rotateX(0)}34%{transform:rotateX(62deg)}62%{transform:rotateX(14deg)}}
@keyframes vv-puff-out{0%{opacity:.85;transform:scale(.35)}100%{opacity:0;transform:scale(2.5)}}
@keyframes vv-tag-sweep{0%{transform:translateX(-115%)}100%{transform:translateX(115%)}}
@keyframes vv-restock-blink{0%,100%{opacity:0}10%,70%{opacity:1}}

/* ═══════════════════════════════════════════════════════════════════════════
   DIVINE BUILT ADJUSTMENTS
   Not from design_handoff/. Everything above this line is the partner's work,
   verbatim; everything below is ours. Delete this whole block to get their
   layout back exactly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* #contact — the receipt that used to sit here is gone; it lives on thanks.html
   now. The gap fix that collapsed its reserved height went with it, and the
   partner's own .vv-receipt rules scoped to #contact are simply unused. Left
   in place rather than edited, so their block stays byte-identical to source. */
/* P.S. as a Two Worlds split — source DOM order kept, told apart by treatment */
.vv-ps:where(#contact, #contact *){display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:var(--spacing-24)}
@media (max-width:760px){.vv-ps:where(#contact, #contact *){grid-template-columns:1fr}}.vv-ps > div:where(#contact, #contact *){padding:var(--spacing-20);position:relative;opacity:0;transform:translateY(16px)}.is-ps .vv-ps > div:where(#contact, #contact *){opacity:1;transform:none;transition:opacity .6s var(--ease-out-quart),transform .6s var(--ease-out-quart)}.is-ps .vv-ps > div:nth-child(2):where(#contact, #contact *){transition-delay:.14s}.vv-ps__tag:where(#contact, #contact *){display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:var(--spacing-10)}.vv-ps p:where(#contact, #contact *){font-size:15px;line-height:1.7}.vv-ps--best:where(#contact, #contact *){background:rgba(var(--gold-rgb),0.07);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),0.28)}.vv-ps--best .vv-ps__tag:where(#contact, #contact *){color:var(--gold)}.vv-ps--best p:where(#contact, #contact *){color:var(--silver)}.vv-ps--worst:where(#contact, #contact *){background:rgba(196,179,159,0.03);box-shadow:inset 0 0 0 1px rgba(var(--steel-rgb),0.14)}.vv-ps--worst .vv-ps__tag:where(#contact, #contact *){color:rgba(var(--steel-rgb),0.6)}.vv-ps--worst p:where(#contact, #contact *){color:rgba(var(--steel-rgb),0.72)}.vv-ps--best:where(#contact, #contact *)::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0}.is-ps .vv-ps--best:where(#contact, #contact *)::after{opacity:1;transition:opacity .6s var(--ease-fade) .5s}
@media (prefers-reduced-motion:reduce){.vv-slot:where(#contact, #contact *),.vv-ps > div:where(#contact, #contact *){opacity:1;transform:none;transition:none}.is-board .vv-slot--open .vv-slot__pip:where(#contact, #contact *){animation:none}.vv-receipt.is-out:where(#contact, #contact *){transition:none;clip-path:none}.vv-rows li:where(#contact, #contact *),.vv-rows li:where(#contact, #contact *)::after,.vv-ready:where(#contact, #contact *){transition:none}
}

/* #contact — the submit receipt was holding open a hole it never filled.
   .vv-receipt ships position:relative + opacity:0 + clip-path:inset(0 0 100% 0),
   so it paints nothing but still reserves its full box: 121px plus a 16px margin
   on a phone, 102px plus 16px on desktop. That is the empty band under the Apply
   button, and it is the whole of it.

   Collapsed to zero height while hidden rather than pulled out of flow, so the
   receipt keeps the normal-flow position it was authored with — it is a sibling
   after the form, sharing the left edge of .form-note and .vv-text rather than
   of the button inside the form's padding. It takes its space back at the moment
   it prints, ~1.1s before the form submits and the page leaves, so the push
   costs nothing the visitor is still reading. */
.vv-receipt:where(#contact, #contact *){height:0;margin-top:0;padding-top:0;padding-bottom:0;overflow:hidden}
.vv-receipt.is-out:where(#contact, #contact *){height:auto;margin-top:var(--spacing-16);padding-top:var(--spacing-16);padding-bottom:var(--spacing-16);box-shadow:0 18px 40px rgba(10,9,8,0.55)}

/* The spinning corner monogram is the link home on every page — Scott
   2026-08-17: it is now the ONLY clickable wordmark, the footer one having
   become decoration.

   video.css sets .corner-mark to pointer-events:none so the 140px box can
   never eat a click meant for the snack pile or the hero underneath it. That
   stays true; only the artwork inside it takes the pointer, which is a 110px
   frame rather than the full box.

   The mark is fixed and z-index 20, so at the bottom of the page it lands on
   top of the "built by Divine Built" line and swallows clicks on it. Stacking
   cannot fix that: .vv-legal is position:relative z-index:2, which is a
   stacking context, so no z-index on the link inside it can climb past 20,
   and raising .vv-legal itself would bury the monogram behind the legal
   strip's own wash. They are simply moved apart — the credit is given as
   much right-hand clearance as the mark occupies, which also ends the spinning
   V sitting across the words, and both stay clickable. */
.corner-mark{pointer-events:none}
.corner-mark__frame{pointer-events:auto;cursor:pointer}
a.corner-mark:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:4px}
a.corner-mark:hover .corner-mark__frame,
a.corner-mark:focus-visible .corner-mark__frame{filter:drop-shadow(0 0 14px rgba(var(--gold-rgb),0.55));transition:filter .35s var(--ease-out-quart)}
/* 200px, not the 160px the mark actually occupies: clearing it exactly left
   the credit reading as if it were still tucked behind the monogram. The
   extra 40px is Scott's eye, not geometry. */
#siteFooter .built-by{padding-right:max(0px,200px - 5.5vw)}
@media (max-width:720px){#siteFooter .built-by{padding-right:86px}}

/* The footer wordmark is no longer a link, so it must not answer to the
   cursor like one either — target-cursor.js reticles `a[href]`, and the
   Pixel Drift canvas is already pointer-events:none. */
.footer-logo{cursor:default}

/* #machines — the four corner reticles were stacked down the left edge instead of
   pinned to the card's corners. site.css's `.machine-card > :not(img){position:relative}`
   is (0,1,1); the handoff's `.vv-ret{position:absolute}` is (0,1,0), so site.css won and
   the top/left/right/bottom offsets shifted each mark from its static position instead
   of anchoring it. Measured before the fix: tl(5,8) tr(-5,21) bl(5,21) br(-5,34) — a
   vertical stack, not four corners. Pre-existing; the zero-specificity guard neither
   caused it nor could fix it. One id raises this to (1,1,0) so absolute wins. */
#machines .vv-ret{position:absolute}
/* Same shape on the About portrait, in case a future site.css rule reaches it too. */
.about-page .about-portrait .vv-ret{position:absolute}

/* thanks.html — where FormSubmit lands people after it accepts the form.
   .vv-receipt is scoped to #contact, so the card needs its own hook here. Same
   look, no animation to wait for: it is already printed when the page loads,
   because by the time you are on this URL the send actually happened. */
.thanks-page .thanks-hero{min-height:auto;padding-top:calc(var(--nav-h) + var(--spacing-32))}
.thanks-page .thanks-title{font-family:"Jost",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:0.02em;font-size:clamp(32px,5vw,64px);line-height:1.02;color:var(--silver);margin:var(--spacing-16) 0 var(--spacing-32)}
.thanks-page .vv-receipt{position:relative;height:auto;margin:0 0 var(--spacing-32);max-width:340px;padding:var(--spacing-16);background:rgba(233,228,220,0.94);color:var(--blackout);font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:0.13em;text-transform:uppercase;opacity:1;transform:none;clip-path:none;box-shadow:0 18px 40px rgba(10,9,8,0.55)}
.thanks-page .vv-receipt b{display:block;font-family:"Jost",sans-serif;font-size:15px;letter-spacing:0.1em;margin-bottom:7px}
.thanks-page .vv-receipt i{font-style:normal;display:block;color:rgba(10,9,8,0.6);margin-top:7px;padding-top:7px;border-top:1px dashed rgba(10,9,8,0.28)}
.thanks-page .thanks-sooner{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--steel-rgb),0.6);margin-top:var(--spacing-32)}
.thanks-page .contact-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-16);margin-top:var(--spacing-16)}
@media (max-width:560px){.thanks-page .contact-actions{flex-direction:column;align-items:stretch}}

/* ── Footer: full bleed, top and bottom ───────────────────────────────
   Two separate faults made the photograph look cropped out of the page.

   BOTTOM. .vv-legal::after is the full-width wash that darkens the ground
   behind the legal strip. Its bottom was written as
   `-1 * clamp(40px,4.5vw,72px) - 118px` — site.css §5.7's footer padding,
   which vv-footer replaces with --vv-lift. So the wash overshot the footer's
   real bottom edge by 119px on desktop and ~126px on a phone, and because it
   is an absolutely positioned 100vw box it grew the document by exactly that
   much: a flat black band below the photograph that read as the plate being
   cut off short of the page bottom. Re-tied to the padding the footer
   actually uses, so it stops on the footer's own bottom edge.

   TOP. Every .vv-section carries a 64px rim of rgba(43,39,35,0.28) at its
   bottom edge, plus .video-framed::after's 48px of 0.22 on top of that —
   the site's section separator. Between two flat sections it reads as a soft
   seam. Against the footer, whose scrim opens at 0.86 black, it put a light
   band immediately above a near-black one: measured rgb(24,21,19) on the last
   row of #contact against rgb(7,6,6) on the first row of the footer, which is
   the hard horizontal line. #contact is the only section that butts onto the
   footer, so the rim is dropped there and nowhere else; the two now meet at
   the same value and the photograph bleeds up into the section above it.

   The plate itself is not moved. At 1440x820 the 1672x941 source is already
   showing whole (cover is height-constrained by 17px of width), so making the
   footer taller would not reveal more picture — it would zoom in. */
#siteFooter .vv-legal::after{bottom:calc(-1 * var(--vv-lift) - env(safe-area-inset-bottom,0px))}
#contact{background-image:linear-gradient(180deg,rgba(43,39,35,0.28) 0%,rgba(10,9,8,0) 64px,rgba(10,9,8,0) 100%)}
#contact.video-framed::after{opacity:0}

/* The same seam exists on about.html, where the section above the footer is a
   lit desert photograph rather than flat black — there the hard edge is loud.
   Rather than special-case each page, the footer's own top edge is dissolved:
   plate and scrim carry the same top fade, so the first --vv-bleed of the
   footer goes progressively transparent and whatever the page has above it
   shows through. On video.html that is black, so nothing changes there beyond
   the join already being invisible; on about.html the breakroom now cross-fades
   out of the desert. The plate is masked, not moved, so the photograph keeps
   its 1:1 crop. */
:root{--vv-bleed:150px}
#siteFooter .vv-plate,#siteFooter .vv-scrim{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--vv-bleed));mask-image:linear-gradient(180deg,transparent 0,#000 var(--vv-bleed))}

/* ── Footer wordmark: Pixel Drift ─────────────────────────────────────
   Replaces the 3D stagger flip in the footer only — the nav wordmark still
   flips, and site.js still finds it, because that IIFE selects .logo-flip
   and this host is .vv-drift.

   The host keeps the flip's exact layout box (321 x 34) so nothing in the
   brand column moves. The canvas is absolutely positioned and bleeds 28px
   past that box on every side, which is where particles pushed out by the
   cursor go; it is pointer-events:none so the bigger box cannot swallow
   clicks meant for the rule and tagline underneath. The <img> is what a
   visitor with JS off sees, and vv-pixeldrift.js adds .is-live to retire it
   once the canvas has sampled the artwork. */
/* The width is stated in vw, not %, on purpose: this span is a flex item whose
   only children are absolutely positioned, so it has no intrinsic width, and a
   percentage would resolve against a parent that is itself sized by this item —
   circular, and it collapses to 0. */
.vv-drift{position:relative;display:block;width:min(321px,calc(100vw - 88px));height:34px}
.vv-drift__fallback{position:absolute;left:50%;top:50%;width:100%;height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none}
.vv-drift.is-live .vv-drift__fallback{display:none}
.vv-drift__canvas{position:absolute;display:block;pointer-events:none}

/* ── The corner monogram stays put on phones ──────────────────────────
   video.css fades .corner-mark to nothing under 720px as soon as #trust
   crosses into view, so on a phone the spinning VV vanished a screen into
   the page and never came back. Scott wants it held for the whole of the
   main page, so only the opacity is overridden — the .is-faded class and
   the vv:sections-cover-hero event it rides along with are left alone,
   because video.js uses that same signal for the hero copy. The mark is
   pointer-events:none, so keeping it visible cannot cost a tap. */
@media (max-width:720px){
  .corner-mark.is-faded{opacity:1}
}

/* ── The breakroom plate is the main page's footer, not every footer ──
   Scott 2026-08-17: the photograph belongs to video.html. On about.html it
   was covering the sunrise loop the page is built around, and on thanks.html
   it was doing the same to a page that is really just a receipt.

   Dropping the plate is not enough on its own — the handoff switched off
   site.css's own footer wash when it added the photo ("the shipping ::before
   is built for about.html's sunrise loop; .vv-scrim is the plate-specific
   replacement"). With the photo gone, that comment describes exactly the
   footer these two pages should have, so the wash and the hairline come
   back and the shipping footer is whole again. .vv-legal's extra wash goes
   too: it exists to hold the legal line legible over lit wet concrete, and
   over 0.88 of flat black it is just a darker rectangle.

   video.html is untouched — it still gets the plate, the scrim and the
   top bleed. */
.about-page #siteFooter .vv-plate,.about-page #siteFooter .vv-scrim,
.about-page #siteFooter .vv-glow,.about-page #siteFooter .vv-lamp,
.about-page #siteFooter .vv-sheen,
.thanks-page #siteFooter .vv-plate,.thanks-page #siteFooter .vv-scrim,
.thanks-page #siteFooter .vv-glow,.thanks-page #siteFooter .vv-lamp,
.thanks-page #siteFooter .vv-sheen{display:none}
.about-page #siteFooter::before,.thanks-page #siteFooter::before{display:block}
.about-page #siteFooter,.thanks-page #siteFooter{border-top:1px solid rgba(var(--steel-rgb),0.2) !important}
.about-page #siteFooter .vv-legal::after,.thanks-page #siteFooter .vv-legal::after{display:none}

/* ── Copyright line, centred on the page ──────────────────────────────
   The legal strip ships as a two-column row: copyright left, Divine Built
   credit right. Centring the copyright inside its own column would only have
   moved it to the middle of the left half, so the row is unstacked — the
   copyright gets a full-width line of its own and the credit drops beneath
   it, keeping the right-hand position and the clearance it needs from the
   spinning monogram.

   It had to unstack. At 1440 the sentence is ~606px wide, so centred on the
   page it runs 417 to 1023, and the credit's artwork starts at 937. They
   cannot share a line. The footer's margins are 5.5vw on both sides, so the
   centre of its content box is the centre of the page. */
#siteFooter .vv-legal{grid-template-columns:minmax(0,1fr);gap:var(--spacing-10) 0}
#siteFooter .footer-copy{text-align:center;justify-self:stretch}
/* Right-aligned only where the strip was a two-column row to begin with.
   Below 900px the handoff already stacks it left, and forcing end here
   pushed the credit into the monogram and wrapped it onto two lines. */
@media (min-width:901px){#siteFooter .built-by{justify-self:end}}

/* Phone: the legal block needs to clear the fixed Call Now pill. site.css
   shipped 118px of footer bottom padding for exactly that reason — "bottom
   padding keeps the legal line clear of the fixed Call Now pill" — and the
   handoff replaced it with --vv-lift, which the mobile layer sets to 32px.
   Measured on a 390px phone: the pill occupies y615-663 and the Divine Built
   credit sat at y603-643, so the pill covered the coin and the first third of
   the line. Centring the copyright fixed the same collision on desktop by
   moving it out from behind the pill; on a phone there is no sideways room,
   so the clearance is given back vertically. */
/* Set on the id: vv-mobile.css declares --vv-lift:32px at the same
   specificity and loads after this file, so a class selector loses.

   128px, sized off the taller of the two things parked in that corner. The
   monogram's box is 92px high sitting 12px off the bottom, so it reaches
   104px up; the Call Now pill and its bloom reach about 80px. Clearing 104
   puts the credit above both with room to spare, at any screen height —
   both are fixed to the bottom of the viewport, so the gap does not change
   with the phone.

   With the vertical clearance there, the credit no longer has to dodge the
   monogram sideways, so the right-hand padding that was making it wrap onto
   two lines comes off and it reads on one line again. */
@media (max-width:560px){
  #siteFooter{--vv-lift:128px}
  #siteFooter .built-by{padding-right:0}
}

/* ── Hold the page to vertical on touch ───────────────────────────────
   Scott 2026-08-17: on a phone, a drag that is not perfectly vertical pulls
   the page sideways.

   I could not reproduce it in an emulated iPhone — the page does not pan
   horizontally there, there is no element wide enough to make it, and no
   child is a horizontal scroll container. What the emulator does show is a
   6px phantom: documentElement.scrollWidth reports 396 against a 390px
   client width, because body carries overflow-x:hidden while html is left
   visible, so the viewport becomes a horizontal scroll container that is
   merely not user-scrollable. Safari has never been reliable about that
   distinction. So this closes the question from both ends.

   touch-action states the intent outright: on a touch screen a drag may pan
   this page vertically and nothing else. pinch-zoom is kept — dropping it
   would take zoom away from anyone who needs it. Nothing here wants a
   horizontal drag: the trust-strip marquee is CSS-animated inside an
   overflow:hidden frame, not scrolled, and the snack pile reads pointer
   events rather than gestures. overscroll-behavior-x stops any sideways
   rubber-band.

   NOT overflow-x:clip on html, which is where I went first and which broke
   the About page. body already carries overflow-x:hidden, and the root
   propagates body's overflow to the viewport only while html's own overflow
   is visible. Setting anything else on html stops that propagation, so body
   becomes a real scroll container that never scrolls — and .about-portraits
   is position:sticky inside it, so it stopped locking and rode the page
   down instead. The 6px it was there to remove turned out to be an emulated
   scrollbar gutter and not a real pan, so nothing is lost. */
html,body{overscroll-behavior-x:none}
@media (pointer:coarse){
  html{touch-action:pan-y pinch-zoom}
}


/* ── #machines: restore the board header's scale, close the dead band ──
   Scott 2026-08-18, from a screenshot of the gap under "FOUR MACHINES". Two
   separate faults, one symptom.

   1. `.vv-title` was authored at clamp(30px,4.2vw,56px) — deliberately the
      largest section header on the page, because #machines reads as a console
      board rather than a prose section. It has never actually applied:
      `.vv-title` is (0,1,0) and site.css's `.vv-section h2` is (0,1,1), so the
      shipping rule always won (same specificity trap as `.vv-ret`). That was
      invisible while both were Jost at similar sizes; the site-wide stencil
      switch dropped the winning rule's cap to 40px and the header visibly
      shrank against the space under it. This restores the intended hierarchy
      at stencil scale — ~15% under the Jost numbers, the same trim every other
      heading took — and carries an id so it beats site.css AND vv-mobile.css,
      both of which load after this file. margin:0 was the authored intent too,
      and lost to the same rule's 16px.
   2. `.vv-head`'s margin-bottom was clamp(78px,9vw,120px) = 115px at 1280.
      Measured every element intersecting the band between the header and the
      first paragraph: only `.vv-board` (the grid, which spans the whole
      section) and `.wrap`. The ECG pulse overlays sit lower. So it was empty
      floor. Roughly halved — still far more air than the 16px every other
      section h2 gets, which is the point: the board header wants separating
      from its body copy, just not by that much. */
#machines .vv-title {
  font-size: clamp(26px, 3.6vw, 47px);
  line-height: 1.05;
  margin: 0;
}
#machines .vv-head {
  margin-bottom: clamp(40px, 4.4vw, 60px);
}

/* ── FAQ page background ──────────────────────────────────────────────
   faq.html reuses the About shell, but its content is text-over-video for
   the whole page where About's copy sits in its own column. The shared
   .about-bg scrim (0.6) leaves the search field and the first question
   washed out on a phone, so this page gets a deeper one. Scoped to
   .faq-page — the About page is untouched. Delete this block to revert. */
@media (max-width:720px){.faq-page .about-bg__scrim{background:rgba(10,9,8,0.88)}.faq-page .about-bg__fade{height:280px}}

/* ── Lockup: Payton's final logo, reassembled from crops of itself ─────
   Payton signed off one mark on 2026-08-25: a solid vending machine, a
   vertical divider bar, then VETERAN over a letterspaced VENDS in his
   gold. It replaces the Oswald-and-line-art version that stood in for it.

   Nothing here draws a logo. tools/make-logo-assets.py cuts his master
   into fourteen crops, vv-lockup.js stamps each one back at the fraction
   of the box it held in the file, and the result is pixel-identical to
   his artwork while still being twelve separate letters. That is the
   whole point: the nav has to be able to turn ONE of them.

   --lock-w is the only knob. Width comes from it, height from the
   aspect-ratio, and every piece is a percentage of that box, so a page
   resizes the mark by setting one length.

   --fh on a letter is that letter's own height measured against --lock-w;
   the 3D turn has to translateZ by half of it and CSS cannot read a
   percentage box back as a length. vv-lockup.js writes it per letter.

   To revert: see the history for the type-based .vv-wordmark block that
   stood here, and put vv-wordmark.js back in the three page footers.
   ==================================================================== */
.vv-lock{
  position:relative;display:block;
  /* Height is computed, not left to aspect-ratio: the footer host is a flex
     item and its parent stretched it back to the old 34px line box, which
     squashed the whole mark. 0.377242 is 736/1951, the master's own ratio. */
  width:var(--lock-w);height:calc(var(--lock-w) * 0.377242);
  flex:0 0 auto;align-self:flex-start;
  perspective:900px;
  filter:drop-shadow(0 2px 6px rgba(10,9,8,0.55));
}
.vv-lock__pc,.vv-lock__ch{position:absolute;display:block}
.vv-lock__pc{background-repeat:no-repeat;background-position:center;background-size:100% 100%}
/* the turn: 0deg -> 90deg, then snapped back with the transition off */
.vv-lock__ch{transform-style:preserve-3d;transform:translateZ(calc(var(--fh) / -2)) rotateX(0deg)}
.vv-lock__face{
  position:absolute;inset:0;display:block;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  transform:translateZ(calc(var(--fh) / 2));
}
.vv-lock__face--alt{transform:rotateX(-90deg) translateZ(calc(var(--fh) / 2))}

/* nav — 118px reads 44px tall, which is the height the old mark occupied,
   so the bar does not move. */
.logo-flip-solo{--lock-w:118px}
@media (max-width:720px){.logo-flip-solo{--lock-w:92px}}

/* footer — the mark is the brand statement down here, so it runs bigger
   than the nav. The drift canvas it feeds was 321px wide; this holds the
   same weight without crowding the address block beside it. */
.vv-wordmark--footer{--lock-w:240px}
@media (max-width:560px){.vv-wordmark--footer{--lock-w:180px}}

/* no-JS / failed-script fallback. One flat copy of the same master, so the
   brand slot is never empty even if every script on the page dies. */
html:not(.js) [data-vv-lockup],
html.js-static [data-vv-lockup]:empty{
  display:block;width:var(--lock-w);height:calc(var(--lock-w) * 0.377242);
  background:url("assets/logo-lockup.webp") center / 100% 100% no-repeat;
}

/* Pixel Drift over the footer mark. The crops below the canvas are the
   fallback, so they stay in the layout and only go invisible once the
   particles are up. Hide the PIECES, never the canvas — the canvas is a
   child of the same host, so a blanket "> *" takes the particles with it. */
.vv-wordmark--footer.vv-drift{position:relative}
.vv-wordmark--footer.vv-drift.is-live > .vv-lock__pc,
.vv-wordmark--footer.vv-drift.is-live > .vv-lock__ch{visibility:hidden}