/* ===================================================================
   Vega S17: page-scoped styles.
   Linked ONLY from product-vega-s17.html and vega-s17.html, never from
   the shared sheet: main.css is the design system for every page, and
   the 3D stage and the film are two pages' business.

   Ported from the US site, where these rules live in
   site/src/pages/printers/vega-s17.astro (<style is:global>, the .v3d
   block) and site/src/pages/vega-s17.astro (the .vr block). The only
   edits: the US `.gs` body scope is dropped (main.css here is unscoped
   too), the film's `.hero` classes are `.vr-hero` because main.css owns
   `.hero`, and the product-hero overrides below replace the US page's
   scoped rules. Keep the two sites diffable: change a rule on both.
   =================================================================== */

/* ---------- product page: the hero art becomes a 3D stage ----------
   main.css caps `.phero-art img` at 620 x 460 (260 tall on a phone). The
   poster inside the stage is absolutely positioned at inset:0 and sizes
   itself, so those caps must not reach it. */
.phero-art.phero-art-3d { display: block; place-items: unset; }
/* "Explore in 3D" in the sub-nav jumps here; clear the nav and the sub-nav */
.phero-art.phero-art-3d { scroll-margin-top: calc(var(--nav-h) + 54px + 12px); }
.phero-art img.v3d-poster { max-width: none; max-height: none; }
@media (max-width: 900px) { .phero-art img.v3d-poster { max-height: none; } }

/* the one line across to the reveal film */
.reveal-link { margin: 0; text-align: center; }
.reveal-link a {
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 500;
  letter-spacing: var(--track-heading); color: var(--accent-ink);
  text-decoration: none;
}
.reveal-link a:hover { text-decoration: underline; }

/* if the model fails to load, the photograph stays and says so */
.v3d-err {
  position: absolute; left: 14px; bottom: 14px; right: 14px; z-index: 5; margin: 0;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); text-align: center;
}
.v3d-err[hidden] { display: none; }

/* On a phone the part card is a bottom sheet, but it lives inside
   .phero-art, whose `isolation: isolate` traps its z-index: the chat
   launcher (fixed, z 900, bottom right) drew on top of the card's text.
   While a card is open the launcher steps aside; it returns on close. */
@media (max-width: 900px) {
  body:has(.v3d.has-active:not(.is-full)) .dtfa-launcher { opacity: 0; pointer-events: none; }
}

/* ===================================================================
   VEGA S17: INTERACTIVE 3D  (product page hero, full screen, AR)
   Markup is the hero in product-vega-s17.html, behaviour is
   assets/vega/vega-3d.js. Three states on .v3d: the photograph (default)
   with one "See it in 3D" button; .is-3d, the live model with dots, chips
   and a toolbar; .is-full, the same model over the whole viewport.
   =================================================================== */
.v3d {
  --v3d-h: clamp(300px, 34vw, 520px);
  position: relative; width: 100%; max-width: 680px; margin: 0 auto;
  display: grid; grid-template-rows: 1fr auto; gap: 10px; font-family: var(--font);
}
.v3d-stage {
  position: relative; height: var(--v3d-h); border-radius: 22px; overflow: hidden;
  isolation: isolate; touch-action: pan-y;
}
.v3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; cursor: grab; }
.v3d-canvas:active { cursor: grabbing; }
.v3d-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; max-width: none; object-fit: contain;
  filter: var(--shadow-product-lg); transition: opacity .7s ease; z-index: 2; pointer-events: none;
}
.v3d-poster.is-hidden { opacity: 0; }

/* the one button on the photograph */
.v3d-open {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink);
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 9px 16px 9px 12px; cursor: pointer; box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.v3d-open svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v3d-open:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.v3d-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.v3d.is-3d .v3d-open, .v3d-off .v3d-open { display: none; }

.v3d-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 6; background: var(--line-soft); --p: 0; }
.v3d-progress::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); background: var(--accent); transition: transform .2s linear; }

/* nothing but the photograph until the model is asked for */
.v3d:not(.is-3d) .v3d-tools, .v3d:not(.is-3d) .v3d-hs-layer, .v3d:not(.is-3d) .v3d-chips,
.v3d:not(.is-3d) .v3d-hint, .v3d:not(.is-3d) .v3d-canvas, .v3d:not(.is-3d) .v3d-progress { display: none; }
.v3d:not(.v3d-ready) .v3d-hs, .v3d:not(.v3d-ready) .v3d-hint { display: none; }
.v3d:not(.v3d-ready) .v3d-chips { visibility: hidden; }

/* hotspot dots, projected onto the model each frame */
.v3d-hs-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.v3d-hs {
  position: absolute; left: 0; top: 0; margin: -14px 0 0 -14px; width: 28px; height: 28px;
  border: 0; background: transparent; padding: 0; cursor: pointer; pointer-events: auto;
  opacity: 0; transition: opacity .25s ease; will-change: transform;
}
.v3d-hs-dot {
  position: absolute; inset: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 2px 10px rgba(20, 24, 26, .35); transition: transform .18s ease, background .18s ease;
}
.v3d-hs::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(73, 191, 188, .7); animation: v3d-pulse 2.4s ease-out infinite; }
@keyframes v3d-pulse { 0% { transform: scale(.55); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
.v3d-hs:hover .v3d-hs-dot, .v3d-hs.is-on .v3d-hs-dot { background: var(--accent); transform: scale(1.15); }
.v3d-hs.is-on::before { animation: none; opacity: 0; }
.v3d-hs:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 50%; }
.v3d-hs-label {
  position: absolute; left: 34px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--ink);
  background: rgba(255, 255, 255, .92); padding: 4px 9px; border-radius: 999px; box-shadow: var(--edge), 0 2px 8px rgba(20, 24, 26, .12);
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.v3d-hs:hover .v3d-hs-label, .v3d-hs.is-on .v3d-hs-label, .v3d-hs:focus-visible .v3d-hs-label { opacity: 1; }
.has-active .v3d-hs:not(.is-on)::before { animation: none; opacity: 0; }
.has-active .v3d-hs:not(.is-on) .v3d-hs-dot { opacity: .55; }

/* toolbar: reset (when a part is open) · AR · full screen · close */
.v3d-tools { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; gap: 6px; align-items: center; }
.v3d-tools button, .v3d-ar-end {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px;
  font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: .01em; color: var(--ink);
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line-soft); border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .15s, border-color .15s;
}
.v3d-tools button svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v3d-tools button:hover { border-color: var(--accent); background: #fff; }
.v3d-tools button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.v3d-tools .v3d-close { width: 34px; padding: 0; justify-content: center; }
.v3d-tools .v3d-home { display: none; }
.has-active .v3d-tools .v3d-home { display: inline-flex; }
.v3d-ar-end { display: none; }
.v3d-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5; margin: 0;
  font-size: 11.5px; letter-spacing: .04em; color: var(--ink-faint); background: rgba(255, 255, 255, .8);
  padding: 4px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap;
}
.has-active .v3d-hint { display: none; }

/* the chip legend under the stage — every part, without hunting for a dot */
.v3d-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 34px; }
.v3d-chips button {
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.v3d-chips button:hover { color: var(--ink); border-color: #c4c7c5; }
.v3d-chips button[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-tint); }
.v3d-chips button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* the card for the open part — a strip along the foot of the stage, so the
   part stays in view above it; a floating card when full screen */
.v3d-card {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  background: rgba(255, 255, 255, .80);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-top: 1px solid rgba(255, 255, 255, .5); padding: 12px 44px 12px 18px; animation: v3d-in .32s ease both;
  transition: transform .34s cubic-bezier(.4, 0, .6, 1), opacity .3s ease;
}
/* leaving: slides down out of the stage and fades, then hidden */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v3d-card { background: rgba(255, 255, 255, .96); }
}
.v3d-card.is-leaving { animation: none; transform: translateY(110%); opacity: 0; pointer-events: none; }
@keyframes v3d-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.v3d-card .eyebrow { font-size: 10.5px; display: block; }
.v3d-card h3 { font-size: 15.5px; line-height: 1.25; margin: 3px 0 5px; letter-spacing: var(--track-heading); text-wrap: balance; }
.v3d-card p { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.v3d-more { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--link); text-decoration: none; }
.v3d-more::after { content: ' ↓'; }
.v3d-more:hover { text-decoration: underline; }
.v3d-card-close, .v3d-qr-close {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--bg-alt); color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer;
}
.v3d-card-close:hover, .v3d-qr-close:hover { background: var(--line-soft); color: var(--ink); }
.v3d-qr[hidden], .v3d-card[hidden], .v3d-card [hidden] { display: none; }

/* desktop AR: the QR popover */
.v3d-qr {
  position: absolute; inset: auto 12px 12px auto; z-index: 7; width: min(420px, calc(100% - 24px));
  display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center;
  background: #fff; border-radius: 18px; padding: 18px; box-shadow: var(--shadow-lift), var(--edge); animation: v3d-in .32s ease both;
}
.v3d-qr-img { width: 132px; height: 132px; }
.v3d-qr-img svg { width: 100%; height: 100%; display: block; }
.v3d-qr h3 { font-size: 15.5px; margin: 0 0 6px; line-height: 1.25; }
.v3d-qr p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0; padding-right: 20px; }

/* full screen */
.v3d.is-full {
  position: fixed; inset: 0; z-index: 1200; max-width: none; margin: 0; gap: 0;
  grid-template-rows: 1fr auto; background: var(--bg); background-image: var(--brand-wash); --v3d-h: 100%;
}
.v3d.is-full .v3d-stage { height: auto; border-radius: 0; min-height: 0; }
.v3d.is-full .v3d-chips {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .82);
  border-top: 1px solid var(--line-soft); backdrop-filter: blur(8px);
}
.v3d.is-full .v3d-card {
  left: 16px; right: auto; bottom: 16px; width: min(380px, calc(100% - 32px));
  border: 0; border-radius: 18px; padding: 18px 20px 16px; box-shadow: var(--shadow-lift), var(--edge);
}
.v3d.is-full .v3d-card, .v3d.is-full .v3d-chips { background: rgba(255, 255, 255, .82); }
.v3d.is-full .v3d-card h3 { font-size: 17px; }
.v3d.is-full .v3d-card p { font-size: 13.5px; }
.v3d.is-full .v3d-tools { top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; }
.v3d.is-full .v3d-hint { bottom: 14px; }
.v3d-lock { overflow: hidden; }

/* in-page AR (Android): the canvas is the camera view, the chrome hides */
.v3d.is-ar .v3d-tools, .v3d.is-ar .v3d-hs-layer, .v3d.is-ar .v3d-card, .v3d.is-ar .v3d-chips, .v3d.is-ar .v3d-hint { display: none; }
.v3d.is-ar .v3d-ar-end { display: inline-flex; position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2000; }

.pnav-3d::before { content: '◈ '; color: var(--accent-ink); }

@media (max-width: 900px) {
  .v3d { --v3d-h: min(64vw, 380px); max-width: none; }
  .v3d-open { right: 10px; bottom: 10px; font-size: 13px; padding: 8px 14px 8px 11px; }
  .v3d-tools { top: 8px; right: 8px; gap: 5px; }
  .v3d-tools button { width: 34px; padding: 0; justify-content: center; }
  .v3d-tools button span { display: none; }
  .v3d-hs { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .v3d-hs-dot { inset: 8px; }
  .v3d-hs-label { display: none; }
  /* phones: the stage is small, so the card is a bottom sheet over the page */
  .v3d-card {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; border-radius: 18px 18px 0 0;
    padding: 14px 44px calc(16px + env(safe-area-inset-bottom, 0px)) 18px; box-shadow: 0 -12px 40px rgba(20, 24, 26, .18);
  }
  .v3d-card p { font-size: 13px; }
  .v3d-card.is-leaving { transform: translateY(110%); }
  /* full screen on a phone: the card lives inside the stage, above the chip
     row, and scrolls if the text is longer than the space */
  .v3d.is-full .v3d-card {
    position: absolute; left: 10px; right: 10px; bottom: 10px; width: auto; z-index: 6;
    border-radius: 16px; max-height: 46%; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 40px 14px 16px; box-shadow: var(--shadow-lift), var(--edge);
  }
  .v3d.is-full .v3d-card-close { position: sticky; float: right; top: 0; }
  .v3d-qr { grid-template-columns: 1fr; inset: auto 8px 8px 8px; width: auto; }
  .v3d-chips { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .v3d-chips::-webkit-scrollbar { display: none; }
  .v3d-chips button { flex: 0 0 auto; }
  .v3d.is-full .v3d-chips { flex-wrap: nowrap; }
  .v3d-hint { display: none; }
  .v3d.is-full .v3d-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .v3d-hs::before { animation: none; opacity: 0; }
  .v3d-card, .v3d-qr { animation: none; }
}

/* ===================================================================
   VEGA S17: THE REVEAL FILM (vega-s17.html)
   The one deliberately full-bleed, dark page on the site: a film, not a
   catalogue page. Everything is scoped under .vr (generic names inside it
   are vr- prefixed where main.css already uses them).
   =================================================================== */
.vr {
  --vr-black: #050505; --vr-black-2: #0d0d0e; --vr-hair: rgba(255,255,255,.1);
  --vr-canvas: #f5f4f1; --vr-ink: #231F20;
  /* The nav pins at top:0 on this side — `--anno-h` is a Shopify-only
     offset and setting it here floated the nav 40px down the page once
     already (see sticky-nav-and-layout-audit). So the stage clears the nav
     and nothing else. */
  --vr-top: var(--nav-h);
  background: var(--vr-black); color: #fff; line-height: 1.6; overflow-x: clip;
}
.vr h1, .vr h2 { letter-spacing: -.02em; line-height: 1.06; font-weight: 700; text-wrap: balance; color: #fff; }
.vr .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; }

/* pinned stages */
.vr .scroller { position: relative; }
.vr .vr-hero-scroller { height: 300vh; }
.vr .beat-scroller { height: 230vh; }
.vr .cure-scroller { height: 320vh; }

/* VERSION B (.vr-auto, REVEAL_MODE === 'auto'). The film runs on its own
   clock instead of being dragged by the scroll wheel, so the three tracks
   above -- which exist only to give a scrubbed clip room to play -- become
   dead scrolling: the picture has already finished while the reader is still
   winding the wheel to get out of the section. Each section is therefore
   exactly one screen and the page scrolls normally.
   --hold is the one dial: at 0 the sticky stage has no travel and behaves
   like a plain block; 40vh buys roughly half a second of pause on each
   section before the page moves on. These selectors carry one class more
   than the three above, so they win everywhere, the phone media query
   included. Keep this in step with Vietnam's main.css. */
.vr.vr-auto { --hold: 0vh; }
.vr.vr-auto .vr-hero-scroller,
.vr.vr-auto .beat-scroller,
.vr.vr-auto .cure-scroller { height: calc(100svh - var(--vr-top) + var(--hold)); }
.vr .stage {
  position: sticky; top: var(--vr-top); height: calc(100svh - var(--vr-top)); min-height: 440px;
  overflow: hidden; background: var(--vr-black);
}
.vr .art { position: absolute; inset: 0; z-index: 0; }
.vr .art canvas { display: block; width: 100%; height: 100%; background: var(--vr-black); }
.vr .scrim-l::before, .vr .scrim-r::before, .vr .scrim-t::before, .vr .scrim-light::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vr .scrim-b::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vr .scrim-l::before { background: linear-gradient(100deg, rgba(5,5,5,.84) 0%, rgba(5,5,5,.5) 26%, rgba(5,5,5,0) 54%); }
.vr .scrim-r::before { background: linear-gradient(260deg, rgba(5,5,5,.84) 0%, rgba(5,5,5,.5) 26%, rgba(5,5,5,0) 54%); }
.vr .scrim-t::before { background: linear-gradient(180deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.22) 32%, rgba(5,5,5,0) 58%); }
.vr .scrim-b::after { background: linear-gradient(0deg, rgba(5,5,5,.8) 0%, rgba(5,5,5,.26) 28%, rgba(5,5,5,0) 54%); }
.vr .scrim-light::before { background: linear-gradient(100deg, rgba(245,244,241,.95) 0%, rgba(245,244,241,.72) 30%, rgba(245,244,241,0) 60%); }

/* copy inside the picture */
.vr .copy { position: absolute; z-index: 2; display: grid; align-content: start; max-width: min(430px, 42vw); will-change: transform; }
.vr .copy .eyebrow { margin-bottom: 14px; }
.vr .copy h2 { font-size: clamp(26px, 3.5vw, 44px); margin: 0 0 14px; }
.vr .copy .lede { font-size: 16px; font-weight: 300; color: rgba(255,255,255,.82); line-height: 1.5; margin: 0; max-width: none; }
.vr .figure { display: flex; align-items: baseline; gap: 10px; margin-top: 26px; border-top: 1px solid var(--vr-hair); padding-top: 14px; transition: opacity .5s ease, transform .5s ease; }
.vr .figure b { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.vr .figure span { font-size: 12.5px; line-height: 1.35; max-width: 20ch; color: rgba(255,255,255,.62); }
.vr .at-left { left: clamp(26px, 6vw, 86px); top: 50%; transform: translateY(-50%); }
.vr .at-right { right: clamp(26px, 6vw, 86px); top: 50%; transform: translateY(-50%); text-align: right; justify-items: end; }
.vr .at-right .figure { flex-direction: row-reverse; }
.vr .at-right .figure span { text-align: right; }
.vr .at-topcenter { left: 50%; top: clamp(40px, 9vh, 104px); transform: translateX(-50%); text-align: center; justify-items: center; max-width: min(860px, 80vw); }
.vr .on-light .eyebrow { color: var(--accent-ink); }
.vr .on-light h2 { color: var(--vr-ink); }
.vr .on-light .lede { color: #3c4045; }
.vr .on-light .figure { border-top-color: rgba(35,31,32,.22); }
.vr .on-light .figure b { color: var(--accent-ink); }
.vr .on-light .figure span { color: #4a4f54; }

/* hero */
.vr .vr-hero h1 { font-size: clamp(56px, 9vw, 124px); font-weight: 500; line-height: 1.04; letter-spacing: -.03em; margin: 10px 0 22px; }
.vr .vr-hero .tag { font-size: clamp(17px, 2vw, 26px); font-weight: 300; line-height: 1.3; color: rgba(255,255,255,.86); margin: 0; }
.vr .scrollhint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); display: flex; flex-direction: column; align-items: center; gap: 7px; transition: opacity .4s; }
.vr .scrollhint i { display: block; width: 1px; height: 26px; background: linear-gradient(var(--accent), transparent); }

/* statements: one line, then the picture alone, then the number */
.vr .statement h2 { font-size: clamp(28px, 4.8vw, 60px); line-height: 1.04; margin: 0; }
.vr .statement .lede { margin-top: 16px; font-size: clamp(15px, 1.6vw, 19px); max-width: 44ch; }
.vr .solo { position: absolute; left: 50%; bottom: clamp(34px, 7vh, 72px); transform: translateX(-50%); z-index: 2; display: flex; align-items: baseline; gap: 12px; justify-content: center; border-top: 1px solid var(--vr-hair); padding-top: 14px; min-width: min(430px, 74vw); opacity: 0; transition: opacity .5s ease, transform .5s ease; margin: 0; }
.vr .solo b { font-size: clamp(30px, 4vw, 42px); font-weight: 600; color: var(--accent); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.vr .solo span { font-size: 13px; color: rgba(255,255,255,.66); }

/* static bands */
.vr .vband { padding: 56px 0; }
.vr .stats { background: var(--vr-black-2); border-top: 1px solid var(--vr-hair); border-bottom: 1px solid var(--vr-hair); }
.vr .statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.vr .stat b { display: block; font-size: clamp(38px, 5vw, 58px); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.vr .stat u { display: block; text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin: 9px 0 8px; }
.vr .stat p { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.5; margin: 0; }
.vr .vr-cta { background: var(--vr-ink); text-align: center; padding: 40px 0; }
.vr .ctarow { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* The same two actions above the lockup, so the reader never has to reach
   the foot of a very long page to act — but quiet. At full button weight
   they beat the product name they sit above (Jason, 2026-09-07: "way too
   dominant ... pressing against the other text"). No fill, hairline edge,
   small type, and real air beneath them. */
.vr .ctarow-top { margin-bottom: 44px; gap: 10px; }
.vr .ctarow-top .vbtn,
.vr .ctarow-top .vbtn.ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px; font-weight: 500;
  padding: 7px 16px;
}
.vr .ctarow-top .vbtn:hover,
.vr .ctarow-top .vbtn.ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
@media (max-width: 820px) { .vr .ctarow-top { margin-bottom: 30px; } }

.vr .vbtn { display: inline-block; background: var(--accent); color: var(--vr-ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: 999px; border: 2px solid var(--accent); transition: background .18s, border-color .18s; white-space: nowrap; }
.vr .vbtn:hover { background: #5ad0cd; border-color: #5ad0cd; }
.vr .vbtn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.vr .vbtn.ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.vr .vfoot { background: var(--vr-ink); color: rgba(255,255,255,.44); font-size: 12px; margin: 0; padding: 0 0 44px; text-align: center; }
.vr .vfoot .wrap { display: block; border-top: 1px solid var(--vr-hair); padding-top: 22px; max-width: 760px; line-height: 1.6; }

/* phones: picture on top, words underneath */
@media (max-width: 820px) {
  .vr .vr-hero-scroller { height: 230vh; }
  .vr .beat-scroller { height: 190vh; }
  .vr .cure-scroller { height: 250vh; }
  .vr .vr-hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .vr .stage { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; }
  .vr .art { position: relative; inset: auto; height: 100%; min-height: 0; }
  .vr .scrim-l::before, .vr .scrim-r::before, .vr .scrim-light::before { display: none; }
  .vr .scrim-t::before { height: 60%; bottom: auto; }
  .vr .scrim-b::after { display: none; }
  .vr .copy, .vr .solo { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; max-width: none; width: auto; text-align: left; justify-items: start; padding: 24px clamp(20px, 5vw, 26px) 26px; background: var(--vr-black); }
  .vr .at-right .figure { flex-direction: row; }
  .vr .at-right .figure span { text-align: left; }
  .vr .copy.on-light { background: var(--vr-canvas); }
  .vr .copy h2 { font-size: clamp(24px, 6.2vw, 32px); }
  .vr .statement h2 { font-size: clamp(26px, 7vw, 34px); }
  .vr .solo { min-width: 0; justify-content: flex-start; border-top: none; padding-top: 0; opacity: 1; padding-bottom: 30px; }
  .vr .scrollhint { display: none; }
  .vr .statgrid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

/* Reduced motion: the film becomes a plain illustrated article. Every stage
   unpins, the canvas holds one frame, and the copy sits underneath it. */
@media (prefers-reduced-motion: reduce) {
  .vr .vr-hero-scroller, .vr .beat-scroller, .vr .cure-scroller { height: auto; }
  .vr .stage { position: static; height: auto; min-height: 0; display: grid; grid-template-rows: auto auto auto; }
  .vr .art { position: relative; inset: auto; aspect-ratio: 16 / 9; height: auto; }
  .vr .copy, .vr .solo { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; max-width: none; padding: 26px 28px 34px; background: var(--vr-black); text-align: left; justify-items: start; opacity: 1; }
  .vr .copy.on-light { background: var(--vr-canvas); }
  .vr .scrim-l::before, .vr .scrim-r::before, .vr .scrim-t::before, .vr .scrim-light::before, .vr .scrim-b::after { display: none; }
  .vr .scrollhint { display: none; }
  .vr .figure { opacity: 1 !important; transform: none !important; }
  .vr .solo { min-width: 0; border-top: none; padding-top: 0; justify-content: flex-start; }
}

/* ---------- Global-only fixes, found in the screenshots ----------
   A figure is one thing: "160 °C" and "39.4 × 46.7 cm" must never break
   between the number and its unit (they did on a 390 px phone). */
.vr .figure b, .vr .solo b, .vr .stat b { white-space: nowrap; }
/* no lone last word under a lede ("…from 25 to 50 / cm.") */
.vr .copy .lede, .vr .stat p, .v3d-card p { text-wrap: pretty; }
/* Korean breaks between syllables by default, which split words in two
   ("이 / 미"). Break between words instead, on these two pages. (The rest
   of the site has the same default; fixing it there is a main.css change.) */
:lang(ko) .vr, :lang(ko) .v3d, :lang(ko) .reveal-link { word-break: keep-all; overflow-wrap: break-word; }