/* Atelier scenes — dimensional layer for the release candidate (design pass, 11 Nov 2026).
   Loads after atelier.css. Layers, light and motion are decorative: aria-hidden, no pointer events,
   transform/opacity only, paused off-screen, and replaced by finished still states under reduced motion. */

body.va { overflow-x: clip; }
.va .la-nb-stage, .va .atelier-hero-stage, .va .la-desk-stage { overflow-x: clip; }
.va { --chrome-frame: linear-gradient(135deg, #fbfcfe, #aab3c3 18%, #4d5568 42%, #eef1f6 60%, #8a93a6 80%, #3f4659); --chrome-ring: #c3c9d5; --chrome-mid: #8d97ab; --chrome-dark: #5b6478; --chrome-a: #f4f6fb; --chrome-b: #8d97ab; --chrome-c: #3c4457; --night: #0c111b; --petal: #fffaf0; }

/* ── 1. Scene layers ─────────────────────────────────────────────── */
.va-scene { position: relative; isolation: isolate; overflow: clip; }
.va-layer { position: absolute; pointer-events: none; will-change: transform; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.va-light { position: absolute; inset: -10% -5% 0 18%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background:
    linear-gradient(112deg, transparent 38%, #ffd9a033 44%, transparent 50%),
    linear-gradient(112deg, transparent 52%, #ffe7bf26 56%, transparent 61%),
    linear-gradient(112deg, transparent 66%, #ffd9a01f 69%, transparent 73%); }
.va-glow { position: absolute; z-index: 1; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; scale: 1.35; /* feathered by the gradient itself: no blur filter to repaint */ }
.va-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.va-dust i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe9c4; box-shadow: 0 0 6px 1px #ffd59a; opacity: 0; }

/* ── 2. Jasmine: layered, swaying from the stem ────────────────── */
.va-jasmine { position: absolute; z-index: 5; height: auto; pointer-events: none; transform-origin: 70% 0; }
.va-jasmine.is-left { transform: scaleX(-1); transform-origin: 30% 0; }
.va-petals { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.va-petals i { position: absolute; top: -6%; width: 14px; height: 9px; border-radius: 80% 10% 80% 10%; background: radial-gradient(circle at 30% 30%, #fff, var(--petal) 55%, #ecdcbf); box-shadow: 0 2px 4px #0003; opacity: 0; }

/* ── 3. Chrome thresholds ─────────────────────────────────────── */
.va-edge { position: absolute; inset: auto 0 -1px; z-index: 4; width: 100%; height: clamp(46px, 6vw, 92px); pointer-events: none; overflow: visible; }
.va-edge .chrome { fill: none; stroke: url(#va-chrome); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.va-edge .fill { fill: var(--va-edge-fill, #f2e9dd); }
.va-edge .glint { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; stroke-dasharray: .06 1; stroke-dashoffset: 1.06; }
.va-star { position: absolute; z-index: 5; left: var(--star-x, 52%); bottom: clamp(18px, 2.6vw, 40px); translate: -50% 0; color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.6rem); text-shadow: 0 0 10px #fff, 0 0 22px #9fb4ff; pointer-events: none; }

/* ── 4. Gallery frames for project tiles ──────────────────────── */
.va-framed .atelier-media:has(> img) { position: relative; border: 0 !important; padding: 7px; background:
    var(--chrome-frame) !important;
  box-shadow: 0 1px 0 #fff8 inset, 0 24px 34px -24px #0a0d1480, 0 0 0 1px #2b3242; }
.va-framed .atelier-media:has(> img) img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 0 0 1px #1c2230, 0 0 18px #0008 inset; }
.va-framed .atelier-media:has(> img)::after { content: ''; position: absolute; inset: 7px; pointer-events: none; background: linear-gradient(105deg, transparent 35%, #ffffff40 48%, transparent 60%); background-size: 260% 100%; background-position: 130% 0; transition: background-position 1.1s ease; }
.va-framed:hover .atelier-media:has(> img)::after, .va-framed:focus-visible .atelier-media:has(> img)::after { background-position: -40% 0; }
.va-framed { transition: translate .4s ease; }
.va-framed:hover { translate: 0 -4px; }
.va-plaque { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; padding: 3px 10px; border: 1px solid #9aa3b5; background: linear-gradient(#f6f7fa, #d7dce6); color: #2b3242; font: .6rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ── 5. Featured-project slot (visible, labeled) ───────────────── */
.va-feature-slot { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 46px); align-items: center; margin-top: clamp(28px, 4vw, 54px); padding: clamp(18px, 2.6vw, 34px); background: radial-gradient(ellipse at 30% -10%, #fff4d6 0, transparent 60%), linear-gradient(#efe4d1, #e7dac3); border: 1px solid #c3c9d5; }
.va-feature-slot::before { content: ''; position: absolute; left: 6%; top: -1px; width: 42%; height: 70%; pointer-events: none; background: linear-gradient(180deg, #fff7e2a6, transparent); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); opacity: .7; }
.va-feature-frame { position: relative; aspect-ratio: 16 / 9; padding: 10px; background: var(--chrome-frame); box-shadow: 0 30px 40px -28px #0a0d1499; }
.va-feature-frame > div { height: 100%; display: grid; place-content: center; gap: 8px; text-align: center; padding: 16px; background: repeating-linear-gradient(135deg, #1a2235 0 14px, #18202f 14px 28px); outline: 1px dashed #c3c9d5; outline-offset: -12px; color: #e6e9f0; }
.va-feature-frame strong { font: 500 clamp(1.3rem, 2.2vw, 2rem)/1.1 var(--serif); color: #ffffff; }
.va-feature-frame span { font: .62rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #c9d0dc; }
.va-feature-copy h3 { margin: 6px 0 10px; font: 600 clamp(1.6rem, 2.6vw, 2.4rem)/1.05 var(--serif); }
.va-feature-copy p { margin: 0 0 10px; color: var(--subtle); max-width: 46ch; }
.va-feature-copy dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0 0; font-size: .9rem; }
.va-feature-copy dt { font: .62rem/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.va-feature-copy dd { margin: 0; }

/* ── 6. Notebook: leather binding, film strip, scene "develop" ───── */
.va .la-nb-sheet { position: relative; border-inline-start: 0; padding-inline-start: clamp(34px, 4.6vw, 70px); box-shadow: 0 40px 60px -40px #0b0f1a, 0 2px 0 #fff inset; }
.va .la-nb-sheet::before { content: ''; position: absolute; inset: -1px auto -1px -1px; width: clamp(18px, 2.4vw, 34px); background:
    repeating-linear-gradient(180deg, transparent 0 18px, #e2723f 18px 26px, transparent 26px 34px) center / 2px 100% no-repeat,
    linear-gradient(90deg, #0d1322, #24304f 40%, #121a2c 75%, #070b14); box-shadow: 4px 0 10px -4px #0009; }
.va .la-strip { padding: 10px 8px; background: #11151e; border-block: 8px solid transparent; border-image: repeating-linear-gradient(90deg, #11151e 0 6px, #e9dfcb 6px 12px, #11151e 12px 20px) 8; }
.va .la-strip button { border-color: #2c3445; background: #191e29; color: #efe6d4; }
.va .la-strip button i { color: #b9b1a1; }
.va .la-strip button[aria-selected="true"] { background: #232a3a; border-color: #ff9a62; box-shadow: inset 0 0 0 2px #ff9a62, 0 0 18px #ff9a6255; }
.va .la-strip button img { filter: saturate(.85) brightness(.9); transition: filter .3s; }
.va .la-strip button:hover img, .va .la-strip button[aria-selected="true"] img { filter: none; }
.va .la-frame { box-shadow: 0 0 0 1px #1a1f2b, 0 0 0 8px #eef0f4, 0 0 0 9px #9aa3b5, 0 30px 40px -26px #0d1119; }

/* ── 7. Guided review (CreatiSync) ─────────────────────────────── */
.va-desk-surface { position: relative; padding: clamp(18px, 3vw, 46px); background:
    radial-gradient(ellipse at 20% 0, #33456f66, transparent 60%),
    linear-gradient(160deg, #1a2032, #0b0f18 70%),
    var(--paper-grain);
  border-top: 2px solid #8d97ab; box-shadow: inset 0 1px 0 #ffffff1c; }
.va-desk-surface::after { content: ''; position: absolute; inset: auto 0 0; height: 16px; background: linear-gradient(#d5dae3, #5b6478 60%, #12161f); box-shadow: 0 10px 18px -8px #000a; }
.va-desk-sprig { position: absolute; z-index: 3; top: -36px; right: -10px; width: clamp(80px, 11vw, 160px); height: auto; pointer-events: none; transform-origin: 70% 0; }
.va-gr { position: relative; z-index: 2; background: var(--paper-grain), #fbf5ea; color: var(--ink); border: 1px solid #cdbfa9; padding: clamp(18px, 2.8vw, 40px); box-shadow: 0 34px 46px -30px #000; rotate: -.25deg; }
.va-gr-head { display: grid; gap: 10px; }
.va-gr-head .atelier-heading { margin: 0; font-size: clamp(1.9rem, 3.4vw, 3rem); }
.va-gr-steps { display: flex; flex-wrap: wrap; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: s; }
.va-gr-steps li { flex: 1 1 0; min-width: 0; }
.va-gr-steps button { width: 100%; min-height: 48px; display: grid; gap: 2px; justify-items: start; padding: 6px 18px 6px 22px; border: 1px solid #b9a888; border-inline-start-width: 0; background: #f6eedd; color: var(--ink); text-align: start; font: inherit; cursor: pointer; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); margin-inline-start: -6px; }
.va-gr-steps li:first-child button { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); margin: 0; border-inline-start-width: 1px; padding-inline-start: 12px; }
.va-gr-steps small { font: .56rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.va-gr-steps b { font: 600 1.02rem/1.1 var(--serif); }
.va-gr-steps button[aria-selected="true"] { background: #163c91; color: #fff; border-color: #163c91; }
.va-gr-steps button[aria-selected="true"] small { color: #cfdaff; }
.va-gr-steps button.is-done:not([aria-selected="true"]) { background: #e7efe1; }
.va-gr-steps button.is-done small::after { content: ' ✓'; color: #2f6b38; }
.va-gr-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: start; margin-top: clamp(16px, 2.4vw, 30px); }
.va-gr-stage { position: relative; margin: 0; }
.va-gr-canvas { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0d13; box-shadow: 0 0 0 1px #1a1f2b, 0 0 0 7px #eef0f4, 0 0 0 8px #9aa3b5, 0 24px 30px -22px #0d1119; transition: width .5s ease, translate .5s ease; }
.va-gr-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease, clip-path .1s linear; }
.va-gr-canvas .is-b { opacity: 0; }
.va-gr[data-step="4"] .va-gr-canvas .is-b, .va-gr[data-step="5"] .va-gr-canvas .is-b { opacity: 1; clip-path: inset(0 0 0 var(--pos, 50%)); }
.va-gr-tag { position: absolute; z-index: 3; top: 10px; padding: 3px 9px; background: #0c111bd9; color: #fff; font: .6rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.va-gr-tag.is-a { left: 10px; }
.va-gr-tag.is-b { right: 10px; opacity: 0; }
.va-gr[data-step="4"] .va-gr-tag.is-b, .va-gr[data-step="5"] .va-gr-tag.is-b { opacity: 1; }
.va-gr-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; box-shadow: 0 0 10px #000a; display: none; }
.va-gr[data-step="4"] .va-gr-line, .va-gr[data-step="5"] .va-gr-line { display: block; }
.va-gr-range { display: none; width: 100%; margin: 14px 0 0; accent-color: #163c91; min-height: 32px; }
.va-gr[data-step="4"] .va-gr-range, .va-gr[data-step="5"] .va-gr-range { display: block; }
.va-spot { position: absolute; z-index: 4; left: var(--x); top: var(--y); translate: -50% -50%; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; background: #ad3c1bd9; color: #fff; font: 700 .95rem/1 var(--mono); cursor: pointer; display: none; place-items: center; box-shadow: 0 0 0 0 #ff9a6299; }
.va-gr[data-step="2"] .va-spot.on-a { display: grid; }
.va-gr[data-step="4"] .va-spot.on-b { display: grid; background: #2f6b38e6; cursor: default; }
.va-spot.is-pass { background: #2f6b38e6; animation: none !important; }
.va-spot.is-fail { background: #ad3c1b; animation: none !important; }
.va-spot[aria-pressed="true"] { outline: 3px solid #ff9a62; outline-offset: 2px; }
.va-gr-phone { margin-top: 14px; }
.va-gr.is-phone .va-gr-canvas { width: 180px; translate: calc((100% - 180px) / 2) 0; box-shadow: 0 0 0 6px #10131b, 0 0 0 8px #575d6c, 0 20px 30px -16px #000; border-radius: 4px; }
.va-gr.is-phone .va-spot { width: 22px; height: 22px; font-size: .62rem; }
.va-gr-panel { display: grid; gap: 10px; }
.va-gr-panel[hidden] { display: none; }
.va-gr-panel h3 { margin: 0; font: 600 clamp(1.4rem, 2.2vw, 1.9rem)/1.1 var(--serif); }
.va-gr-panel p { margin: 0; }
.va-gr-panel .va-k { font: .6rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.va-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.va-rules li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid #ddd0b9; }
.va-rules li::before { content: '◇'; color: #7d8698; text-align: center; }
.va-rules li.is-pass::before { content: '✓'; color: #2f6b38; font-weight: 700; }
.va-rules li.is-fail::before { content: '✕'; color: #ad3c1b; font-weight: 700; }
.va-rules li small { display: block; grid-column: 2; color: var(--subtle); font-size: .86rem; }
.va-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.va-choice button { min-height: 44px; padding: 8px 18px; border: 1px solid #7d8698; background: #fff8ec; color: var(--ink); font: 600 1.05rem/1 var(--serif); cursor: pointer; }
.va-choice button[aria-pressed="true"] { background: #163c91; border-color: #163c91; color: #fff; }
.va-feedback { padding: 10px 12px; border-inline-start: 3px solid #7d8698; background: #f3ead9; }
.va-feedback.is-right { border-color: #2f6b38; background: #e8f0e2; }
.va-feedback.is-wrong { border-color: #ad3c1b; background: #f8e6dc; }
.va-record { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; border: 1px solid #cdbfa9; background: #fffaf1; }
.va-record li { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 10px; padding: 8px 12px; border-top: 1px solid #e3d7c2; }
.va-record li:first-child { border-top: 0; }
.va-record b { font: .6rem/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.va-rule-card { padding: 12px 14px; background: #0f1524; color: #f3ead9; border-inline-start: 3px solid #ff9a62; font: 500 1.15rem/1.3 var(--serif); }
.va-gr-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: clamp(16px, 2.4vw, 28px); padding-top: 14px; border-top: 1px solid #ddd0b9; }
.va-gr-nav button { min-height: 44px; }
.va-gr-nav [data-gr="prev"][disabled] { visibility: hidden; }
.va-gr-progress { align-self: center; font: .62rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
/* Without JavaScript every panel reads in order and both images show. */
.va-gr:not(.is-live) .va-gr-steps, .va-gr:not(.is-live) .va-gr-nav, .va-gr:not(.is-live) .va-spot, .va-gr:not(.is-live) .va-gr-phone, .va-gr:not(.is-live) .va-gr-range, .va-gr:not(.is-live) .va-gr-line { display: none !important; }
.va-gr:not(.is-live) .va-gr-panel[hidden] { display: grid; }
.va-gr:not(.is-live) .va-gr-canvas .is-b { opacity: 1; clip-path: inset(0 0 0 50%); }

/* ── 8. Review marks (local review only; remove the toggle script before release) ── */
.va-mark { position: absolute; z-index: 30; display: inline-flex; align-items: center; gap: 6px; max-width: min(280px, 80vw); padding: 4px 9px; border: 1px dashed #7a5a00; background: #fff1b8; color: #3d2c00; font: 600 .62rem/1.35 'DM Sans', system-ui, sans-serif; letter-spacing: .02em; text-decoration: none; box-shadow: 0 4px 12px #0004; }
.va-mark::before { content: 'Asset'; padding: 1px 5px; background: #7a5a00; color: #fff1b8; font: .52rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.va-mark.is-decision { background: #ffd9bf; border-color: #ad3c1b; color: #5b1d08; }
.va-mark.is-decision::before { content: 'Decide'; background: #ad3c1b; color: #fff; }
.va-mark.is-inline { position: static; margin: 8px 0 0; }
html:not(.va-marks-on) :is(.va-mark, .va-review-only) { display: none !important; }
.va-marks-toggle { position: fixed; z-index: 60; left: 12px; bottom: 12px; min-height: 40px; padding: 6px 12px; border: 1px solid #7a5a00; background: #fff1b8; color: #3d2c00; font: 600 .7rem/1.2 'DM Sans', system-ui, sans-serif; cursor: pointer; box-shadow: 0 6px 16px #0005; }

/* ── 9. Reveal on scroll ───────────────────────────────────────── */
.va-reveal { opacity: 0; translate: 0 26px; filter: blur(3px); transition: opacity .9s ease, translate .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.va-reveal.is-in { opacity: 1; translate: 0 0; filter: none; }

/* ── 10. Per-page compositions ─────────────────────────────────── */
/* Home: the threshold. Muses at the drafting table, jasmine falling into the page. */
.va-home .atelier-hero-stage { --va-edge-fill: #f2e9dd; }
.va-home .va-hero-glow { left: 58%; top: 48%; width: 32vw; height: 18vw; background: radial-gradient(closest-side, #5b8cff80, #5b8cff33 55%, transparent); }
.va-home .va-hero-candle { left: 86%; top: 60%; width: 9vw; height: 9vw; background: radial-gradient(closest-side, #ffb45a8c, #ffb45a33 55%, transparent); }
.va-home .atelier-hero-foliage { transform-origin: 70% 0; }
.va-home .va-jasmine.is-top { right: -1vw; top: 70px; width: clamp(120px, 17vw, 260px); }
.va-home .la-decision .la-frame { box-shadow: 0 0 0 1px #1a1f2b, 0 0 0 4px #eef1f6, 0 0 0 7px #8d97ab, 0 0 0 10px #d5dae3, 0 0 0 11px #4d5568, 0 34px 44px -28px #0d1119; }
.va-home .la-desk { background: var(--paper-grain), radial-gradient(ellipse at 78% 18%, #314a86, #10172a 70%); }
.va-home .la-desk .va-glow { right: 8%; top: 12%; width: 30vw; height: 20vw; background: radial-gradient(closest-side, #4f78ff4d, #4f78ff1f 55%, transparent); }

/* Film pages: the screening room. Portal light breathes behind the hero art. */
.va-film .la-nb-hero { min-height: clamp(440px, 44vw, 640px); }
.va-film .va-portal { left: 52%; top: 8%; width: 36%; height: 72%; background: radial-gradient(closest-side, #ffcf7a5e, #5b8cff2e 50%, transparent); }
.va-film .va-jasmine.is-top { left: -1vw; top: -10px; width: clamp(110px, 14vw, 220px); z-index: 3; }
.va-film .la-notebook { position: relative; z-index: 3; margin-top: clamp(-70px, -5vw, -36px); }
.va-oit .va-route { position: absolute; z-index: 3; inset: auto 0 clamp(64px, 6vw, 96px); width: 100%; height: clamp(70px, 8vw, 120px); pointer-events: none; }
.va-oit .va-route path { fill: none; stroke: #ffb35c; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff9a3c); stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.va-oit .va-moon { right: 9%; top: 10%; width: 14vw; height: 14vw; background: radial-gradient(closest-side, #e9f0ff6e, #e9f0ff22 55%, transparent); }

/* Work: the gallery wall. */
.va-work .atelier-work-opening { overflow: clip; }
.va-work .va-jasmine.is-top { right: 0; top: -6px; width: clamp(110px, 15vw, 230px); z-index: 4; }
.va-work .va-light { inset: 0 0 0 40%; opacity: .7; }
.va-work .atelier-sketchbook .atelier-tile:nth-child(odd), .va-work .la-sketch li:nth-child(odd) { rotate: -.6deg; }
.va-work .atelier-sketchbook .atelier-tile:nth-child(even), .va-work .la-sketch li:nth-child(even) { rotate: .5deg; }

/* CreatiSync: the review desk at night. */
.va-cs .va-hero-glow { right: 12%; top: 18%; width: 26vw; height: 26vw; background: radial-gradient(closest-side, #ffcf7a4d, #ffcf7a1a 55%, transparent); }

/* ── 13. Services: a bound practice book, pinned scopes on the desk ── */
.va .la-nb-sheet::before, .va-book::before { content: ''; position: absolute; inset: -1px auto -1px -1px; width: clamp(18px, 2.4vw, 34px); background:
    repeating-linear-gradient(180deg, transparent 0 18px, #e2723f 18px 26px, transparent 26px 34px) center / 2px 100% no-repeat,
    linear-gradient(90deg, #0d1322, #24304f 40%, #121a2c 75%, #070b14); box-shadow: 4px 0 10px -4px #0009; }
.va-services .va-book { position: relative; z-index: 3; margin-top: clamp(-64px, -4.4vw, -28px); background: var(--paper-grain), #fbf5ea; border: 1px solid #cdbfa9; padding: clamp(24px, 3.4vw, 52px) clamp(18px, 3vw, 48px) clamp(18px, 2.6vw, 40px) clamp(40px, 5.4vw, 82px); box-shadow: 0 40px 60px -40px #0b0f1a, 0 2px 0 #fff inset; }
.va-services .atelier-service { align-items: start; }
.va-services .atelier-service-index { font: italic 600 clamp(1.5rem, 2.4vw, 2.2rem)/1 var(--serif); color: var(--orange); }
.va-services .atelier-practice .va-samples { display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 7vw, 104px); gap: 10px; align-self: stretch; }
.va-services .atelier-practice .va-samples .atelier-service-image { grid-area: auto; }
.va-sample { padding: 6px !important; border: 0 !important; background: var(--chrome-frame) !important; box-shadow: 0 22px 28px -22px #0a0d1499, 0 0 0 1px #2b3242; }
.va-sample > img, .va-sample > .atelier-mark-strip { box-shadow: 0 0 0 1px #1c2230; }
.va-sample-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.va-sample-slot { display: grid; place-content: center; justify-items: center; gap: 2px; padding: 6px; text-align: center; border: 1px dashed #8d97ab; background: repeating-linear-gradient(135deg, #f3eadb 0 8px, #efe4d2 8px 16px); color: #6b5a3f; font: .52rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.va-sample-slot span { font: 600 1.3rem/1 var(--serif); color: #5b6478; }
html:not(.va-marks-on) .va-services .atelier-practice .va-samples { grid-template-columns: minmax(0, 1fr); }
.va-desk-band { position: relative; margin-top: clamp(30px, 4vw, 60px); padding-block: clamp(50px, 6vw, 96px) clamp(54px, 6vw, 100px); background: radial-gradient(ellipse at 18% 0, #33456f99, transparent 60%), linear-gradient(160deg, #1a2032, #0b0f18 75%); border-top: 2px solid #8d97ab; color: #f6eedd; }
.va-desk-band::after { content: ''; position: absolute; inset: auto 0 0; height: 14px; background: linear-gradient(#d5dae3, #5b6478 60%, #12161f); }
.va-desk-band .atelier-heading { color: #fbf3e2; }
.va-desk-band .atelier-chapter::after { background: #8d97ab; }
.va-desk-band .atelier-offer-grid { margin-top: clamp(20px, 3vw, 40px); gap: clamp(16px, 2.4vw, 34px) !important; }
.va-desk-band .atelier-offer { position: relative; rotate: var(--tilt, 0deg); box-shadow: 0 30px 34px -22px #000, 0 0 0 1px #cdbfa9; border: 0 !important; transition: rotate .4s ease, translate .4s ease; }
.va-desk-band .atelier-offer:nth-child(1) { --tilt: -.9deg; }
.va-desk-band .atelier-offer:nth-child(2) { --tilt: .6deg; }
.va-desk-band .atelier-offer:nth-child(3) { --tilt: -.4deg; }
.va-desk-band .atelier-offer:hover, .va-desk-band .atelier-offer:focus-within { rotate: 0deg; translate: 0 -5px; }
.va-desk-band .atelier-offer::after { content: ''; position: absolute; z-index: 3; top: -9px; left: 50%; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c3cad8 38%, #4a5266 80%); box-shadow: 0 4px 5px #0009; }
.va-ribbon { position: relative; }
.va-ribbon::before { content: ''; position: absolute; z-index: 2; right: clamp(24px, 7vw, 110px); top: -7px; width: 28px; height: 70px; background: linear-gradient(90deg, #8d2f14, #c94f26 45%, #8d2f14); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); filter: drop-shadow(0 4px 4px #0005); }
.va-services .atelier-services-close .va-jasmine.is-top { right: 0; top: -24px; width: clamp(90px, 11vw, 170px); }
.va-services .atelier-services-opening .va-jasmine.is-top { left: -1vw; top: -6px; width: clamp(110px, 14vw, 210px); }
.va-services .atelier-services-opening .va-light { inset: 0 0 0 30%; }

@media (max-width: 850px) { .va-services .atelier-practice .va-samples { grid-area: 1 / 3 / span 2; } }
@media (max-width: 700px) { .va-services .atelier-practice .va-samples { grid-area: auto / 2; } }

/* ── 14. Work: room to add under every filter ─────────────────── */
.va-add-slot { display: none; }
#work-projects[data-view="all"] .va-add-slot[data-slot~="all"], #work-projects[data-view="films"] .va-add-slot[data-slot~="films"],
#work-projects[data-view="brand"] .va-add-slot[data-slot~="brand"], #work-projects[data-view="product"] .va-add-slot[data-slot~="product"],
#work-projects[data-view="systems"] .va-add-slot[data-slot~="systems"], #work-projects[data-view="lab"] .va-add-slot[data-slot~="lab"],
#work-projects[data-view="commercial"] .va-add-slot[data-slot~="commercial"] { display: grid; }
.va-add-slot { grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-height: 120px; padding: 14px 18px; border: 1px dashed #8d97ab; background: repeating-linear-gradient(135deg, #f3eadb 0 10px, #efe4d2 10px 20px); color: #2b3242; }
.va-add-slot > span { font: 600 2.6rem/1 var(--serif); color: #5b6478; }
.va-add-slot p { margin: 0; font-size: .86rem; }
.va-add-slot strong { display: block; margin-bottom: 2px; font: 600 1.25rem/1.1 var(--serif); }
.atelier-work-grid > .va-feature-slot { grid-column: 1 / -1; margin-top: 0; }
.va-work .atelier-work-grid .va-framed .atelier-media:has(> img) { border: 0 !important; }
@media (max-width: 940px) {
  .va-services .atelier-practice .va-samples { grid-template-columns: minmax(0, 1fr); }
  .va-sample-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .va-sample-slot { min-height: 54px; }
  .va-desk-band .atelier-offer { rotate: none; }
}

/* ══ Chrome pass (11 Nov 2026): concept ideas, About / Contact / Shop, asset placeholders ══ */

/* Chrome binder rings replace the leather spine (notebooks, Services book, Contact form). */
.va .la-nb-sheet::before, .va-book::before, .va-contact .contact-right::before {
  content: ''; position: absolute; z-index: 3; inset: 24px auto 24px -16px; width: 40px; box-shadow: none;
  background: radial-gradient(ellipse 15px 8px at 50% 50%, transparent 8px, #3f4659 8.5px, #f4f6fb 10.5px, #8d97ab 12.5px, #2b3242 14px, transparent 15px) 0 0 / 40px 74px repeat-y; }
.va .la-nb-sheet, .va-book, .va-contact .contact-right { background-image: var(--paper-grain), radial-gradient(circle at 12px 37px, #0c111b55 4px, transparent 5px) !important; background-size: auto, 100% 74px !important; background-repeat: repeat, repeat-y !important; }
.va .la-nb-sheet, .va-services .va-book { padding-inline-start: clamp(38px, 5vw, 76px); }
/* Pencil compass-rose sketch in the notebook margin. */
.va .la-nb-head { position: relative; }
.va .la-nb-head::after { content: ''; position: absolute; right: 0; top: -10px; width: clamp(70px, 9vw, 130px); aspect-ratio: 1; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%235b6478' stroke-width='.7'%3E%3Ccircle cx='50' cy='50' r='38'/%3E%3Ccircle cx='50' cy='50' r='26' stroke-dasharray='2 3'/%3E%3Cpath d='M50 4 56 44 96 50 56 56 50 96 44 56 4 50 44 44Z'/%3E%3Cpath d='M50 20 53 47 80 50 53 53 50 80 47 53 20 50 47 47Z' stroke='%23ad3c1b'/%3E%3C/svg%3E") center / contain no-repeat; }
/* "Watch the moment": the scene link becomes a clear button. */
.va .la-beat-watch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; padding: 10px 18px; background: #0f1524; color: #fbf3e2 !important; text-decoration: none !important; box-shadow: 0 0 0 1px #3c4457, 0 10px 18px -12px #000; }
.va .la-beat-watch::after { content: '→'; transition: translate .3s; }
.va .la-beat-watch:hover::after { translate: 4px 0; }

/* Work: filters as centered pills on the paper; a dashed "Future project" in the sketchbook. */
.va-work .atelier-filters { justify-content: center; gap: 6px 4px; border: 0; }
.va-work .atelier-filters a { min-height: 44px; padding: 8px 18px; border-radius: 3px; border: 0; font: 500 1.08rem/1.2 var(--serif); }
.va-work .atelier-filters a + a { box-shadow: -1px 0 0 #c3b9a8; }
.va-work .atelier-filters a[aria-current="true"] { background: #b9c8ff; color: #10172a; box-shadow: none; }
.va-future { display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 200px; border: 1px dashed #8d97ab; background: #f6f1e7; text-align: center; color: #2b3242; }
.va-future span { font-size: 1.8rem; color: #8d97ab; }
.va-future strong { font: .72rem/1.4 var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.va-future small { color: var(--subtle); font-size: .8rem; }

/* Services: practice areas as dark image banners; one "Work samples" band. */
.va-services .atelier-service-list { border: 0; display: grid; gap: 10px; }
.va-services .atelier-service { position: relative; overflow: hidden; padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px); border: 0; border-radius: 4px; background: #0f1524; color: #e9edf5; box-shadow: 0 0 0 1px #2b3242, 0 18px 24px -18px #0b0f1a; }
.va-services .atelier-service h3 { color: #fbf3e2; position: relative; z-index: 2; }
.va-services .atelier-service-index { position: relative; z-index: 2; color: #ff9a62; }
.va-services .atelier-service-text { position: relative; z-index: 2; }
.va-services .atelier-service .atelier-copy { color: #cdd4e2; }
.va-services .atelier-service .atelier-link { color: #b9c8ff; }
.va-services .atelier-practice .va-samples { display: block; }
.va-services .va-sample { padding: 0 !important; background: none !important; box-shadow: none; aspect-ratio: auto !important; height: 100%; min-height: 150px; border: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%); mask-image: linear-gradient(90deg, transparent, #000 28%); }
.va-services .va-sample > img { height: 100%; object-fit: cover; }
.va-services .va-sample.is-marks { display: grid; place-items: center; }
.va-services .va-sample figcaption { right: 8px; left: auto; }
.va-services .atelier-service:hover .va-sample > img { scale: 1.03; }
.va-services .va-sample > img { transition: scale .8s ease; }
.va-sample-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 22px; align-items: center; margin-top: 14px; padding: 18px clamp(16px, 2.4vw, 28px); background: #0f1524; color: #e9edf5; border-radius: 4px; }
.va-sample-band .atelier-kicker { margin: 0; color: #c9d0dc; letter-spacing: .3em; }
.va-sample-band ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.va-sample-band li { display: grid; place-items: center; gap: 2px; min-height: 76px; border: 1px dashed #5b6478; color: #aeb6c6; font: .6rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.va-sample-band li span { font: 300 1.6rem/1 var(--serif); color: #c9d0dc; }
.va-sample-note { grid-column: 2; margin: 0; color: #8d97ab; font-size: .8rem; }

/* CreatiSync: side-by-side first pass and revision, with a handwritten note. */
.va-gr-tools { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.va-gr-view { display: none; }
.va-gr[data-step="4"] .va-gr-view, .va-gr[data-step="5"] .va-gr-view { display: inline-flex; }
.va-gr-pair { display: none; position: relative; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 14px 46px; background: var(--paper-grain), #fffaf1; border: 1px solid #cdbfa9; }
.va-gr.is-side[data-step="4"] .va-gr-pair, .va-gr.is-side[data-step="5"] .va-gr-pair { display: grid; }
.va-gr.is-side[data-step="4"] .va-gr-canvas, .va-gr.is-side[data-step="5"] .va-gr-canvas,
.va-gr.is-side[data-step="4"] .va-gr-range, .va-gr.is-side[data-step="5"] .va-gr-range,
.va-gr.is-side[data-step="4"] .va-gr-phone, .va-gr.is-side[data-step="5"] .va-gr-phone { display: none; }
.va-gr-pair figure { margin: 0; }
.va-gr-pair img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 0 0 1px #1a1f2b, 0 0 0 5px #eef0f4, 0 0 0 6px #9aa3b5, 0 16px 20px -14px #0d1119; }
.va-gr-pair figure:first-child { rotate: -1.2deg; }
.va-gr-pair figure:nth-child(2) { rotate: .8deg; }
.va-gr-pair figcaption { margin-top: 12px; text-align: center; font: italic 500 1.25rem/1.1 var(--serif); }
.va-hand { position: absolute; right: 10px; bottom: 6px; display: flex; align-items: flex-end; gap: 4px; margin: 0; max-width: 62%; color: #163c91; font: italic 600 1.08rem/1.15 var(--serif); }
.va-hand svg { flex: none; width: 54px; height: 28px; fill: none; stroke: #ad3c1b; stroke-width: 2; stroke-linecap: round; }

/* Asset placeholders: dashed silhouettes that show where a missing asset would sit. */
.va-ph { position: absolute; z-index: 20; display: grid; align-content: end; gap: 2px; padding: 10px; border: 2px dashed #ffd76a; background: repeating-linear-gradient(135deg, #ffd76a1f 0 10px, #ffd76a0a 10px 20px); color: #fff4c8; text-decoration: none; font: 600 .66rem/1.3 'DM Sans', system-ui, sans-serif; }
.va-ph small { font: .55rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.va-ph-arch { left: 0; top: 0; bottom: 0; width: clamp(44px, 5vw, 74px); border-radius: 0 100% 0 0 / 0 14% 0 0; border-left: 0; align-content: center; }
.va-ph-arch span, .va-ph-arch small { writing-mode: vertical-rl; rotate: 180deg; }
.va-ph-pen { right: clamp(14px, 3vw, 44px); bottom: 26px; width: clamp(140px, 16vw, 230px); aspect-ratio: 1; border-radius: 6px; color: #fff4c8; }
.va-ph-pen.is-ink { position: relative; right: auto; bottom: auto; display: inline-grid; margin: 14px 0 0; width: clamp(140px, 14vw, 200px); aspect-ratio: 4 / 3; color: #5b4500; border-color: #c9a227; background: repeating-linear-gradient(135deg, #f6e7a8 0 10px, #fbf3d2 10px 20px); }

.va-services .va-sample.is-marks { -webkit-mask-image: none; mask-image: none; background: #f4efe6 !important; padding: 8px !important; box-shadow: 0 0 0 1px #c3c9d5 !important; }

/* Shared hero backdrop. */
.va-hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }

/* Line icons drawn as masks so they take the text color. */
.va-icon { display: inline-block; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: middle; }
.va-icon.is-cert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='3' y='4' width='18' height='12' rx='1'/%3E%3Cpath d='M7 8h10M7 11h6'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3Cpath d='M14.5 18.5 14 22l2-1 2 1-.5-3.5'/%3E%3C/svg%3E"); }
.va-icon.is-ux { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M3 8h18M9 8v13'/%3E%3C/svg%3E"); }
.va-icon.is-pen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M12 2 18 9l-6 13-6-13Z'/%3E%3Cpath d='M12 9v6'/%3E%3Ccircle cx='12' cy='15.5' r='1'/%3E%3C/svg%3E"); }
.va-icon.is-layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='m12 3 9 5-9 5-9-5Z'/%3E%3Cpath d='m3 12 9 5 9-5M3 16l9 5 9-5'/%3E%3C/svg%3E"); }
.va-icon.is-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M12 1 14 10 23 12 14 14 12 23 10 14 1 12 10 10Z'/%3E%3C/svg%3E"); }
.va-icon.is-rings { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='9' cy='12' r='6'/%3E%3Ccircle cx='15' cy='12' r='6'/%3E%3C/svg%3E"); }

/* About: the founder in an arched chrome frame, inside the study. */
.va-about .va-about-hero { position: relative; overflow: clip; padding-block: clamp(40px, 5vw, 80px) clamp(80px, 9vw, 130px); }
.va-about .va-about-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0c111b 30%, #0c111bd9 48%, #0c111b66 72%, #0c111b33), linear-gradient(0deg, #0c111bcc, transparent 40%); }
.va-about .atelier-about-lead { position: relative; z-index: 4; }
.va-about .atelier-founder .atelier-copy { color: #dfe4ee; }
.va-about .atelier-founder .atelier-link { color: #c9d7ff; }
.va-about .va-arch { position: relative; padding: 9px; background: var(--chrome-frame); border-radius: 50% 50% 4px 4px / 34% 34% 4px 4px; box-shadow: 0 30px 46px -24px #000, 0 0 30px #9fb4ff33; }
.va-about .va-arch > img:not(.va-arch-sprig) { display: block; border-radius: 50% 50% 0 0 / 33% 33% 0 0; aspect-ratio: 4 / 5; object-fit: cover; }
.va-about .va-arch figcaption { color: #c9d0dc; text-align: center; }
.va-about .va-arch-sprig { background: none !important; border: 0 !important; box-shadow: none !important; position: absolute; z-index: 3; left: -18%; top: -6%; width: 46%; height: auto; transform: scaleX(-1); transform-origin: 70% 0; pointer-events: none; }
.va-about .va-about-hero .va-jasmine.is-top { right: -1vw; top: -8px; width: clamp(100px, 13vw, 200px); }
.va-about .va-hire .atelier-band { box-shadow: 0 0 0 1px #c3c9d5, 0 26px 34px -28px #0d1119; border-top: 3px solid #8d97ab; }
.va-creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(16px, 2vw, 28px); border-block: 1px solid var(--line); }
.va-creds .atelier-scope { display: block; padding: 18px clamp(12px, 1.6vw, 22px); border: 0 !important; }
.va-creds .atelier-scope + .atelier-scope { border-inline-start: 1px solid var(--line) !important; }
.va-creds .va-icon { color: #163c91; margin-bottom: 8px; }
.va-creds h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem) !important; }
.va-creds .atelier-copy { font-size: .92rem; }
.va-about .atelier-editorial-art img { box-shadow: 0 0 0 1px #1a1f2b, 0 0 0 7px #eef0f4, 0 0 0 8px #9aa3b5, 0 30px 40px -26px #0d1119; }

/* Contact: the twilight balcony, two clear paths, the form as a ringed sheet. */
.va-contact .atelier-contact-lead { position: relative; overflow: clip; min-height: clamp(380px, 36vw, 520px); display: grid; align-items: center; padding-block: clamp(40px, 5vw, 70px) clamp(80px, 8vw, 120px); }
.va-contact .atelier-contact-lead .va-hero-bg { object-position: 70% 40%; }
.va-contact .atelier-contact-lead::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0c111b 28%, #0c111bcc 50%, #0c111b33 80%), linear-gradient(0deg, #0c111bb3, transparent 40%); }
.va-contact .atelier-contact-intro { position: relative; z-index: 4; }
.va-contact .va-path { display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 22px; font-size: 1rem; }
.va-contact .va-path:not(.is-primary) { background: #f6f1e7; color: #10172a; border-color: #c3c9d5; }
.va-contact .va-path .va-icon { width: 26px; height: 26px; }
.va-contact .atelier-contact-threshold { display: none; }
.va-contact .contact-right { position: relative; box-shadow: 0 40px 60px -40px #0b0f1a, 0 0 0 1px #cdbfa9; }
.va-contact .contact-page { position: relative; z-index: 3; margin-top: clamp(-60px, -4vw, -30px); }
.va-contact .atelier-contact-lead .va-jasmine.is-top { left: -1vw; top: -6px; width: clamp(100px, 12vw, 190px); }

/* Shop: the print room. */
.va-shop-hero { position: relative; overflow: clip; padding-block: clamp(46px, 6vw, 90px) clamp(90px, 9vw, 140px); }
.va-shop-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0c111b 26%, #0c111bcc 48%, #0c111b40 80%), linear-gradient(0deg, #0c111bcc, transparent 45%); }
.va-shop-hero .shop-hero { position: relative; z-index: 4; padding-block: 0 !important; }
.va-shop-hero .atelier-title, .va-shop-hero .atelier-copy { color: #fbf3e2; }
.va-shop-hero .va-jasmine.is-top { right: 0; top: -10px; width: clamp(90px, 11vw, 170px); }
.va-shop .atelier-print-preview img, .va-shop .atelier-print-display { box-shadow: 0 0 0 1px #1a1f2b, 0 0 0 8px #eef0f4, 0 0 0 9px #9aa3b5, 0 34px 44px -28px #0d1119; }
.va-shop .shop-crewneck { position: relative; z-index: 3; margin-top: clamp(-50px, -3.6vw, -26px); }
.va-shop .shop-card { box-shadow: 0 0 0 1px #c3c9d5, 0 24px 32px -26px #0d1119; border-top: 3px solid #8d97ab !important; transition: translate .4s ease, box-shadow .4s ease; }
.va-shop .shop-card:hover { translate: 0 -4px; box-shadow: 0 0 0 1px #8d97ab, 0 30px 40px -26px #0d1119; }
.va-shop .atelier-edition { box-shadow: inset 0 0 0 1px #ffffff40, 0 0 0 1px #8d97ab; }

@media (max-width: 940px) {
  .va-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .va-creds .atelier-scope:nth-child(3) { border-inline-start: 0 !important; }
  .va-sample-band { grid-template-columns: minmax(0, 1fr); }
  .va-sample-note { grid-column: 1; }
  .va-ph-arch { width: 40px; padding: 6px 4px; }
}
@media (max-width: 640px) {
  .va-creds { grid-template-columns: minmax(0, 1fr); }
  .va-creds .atelier-scope + .atelier-scope { border-inline-start: 0 !important; border-top: 1px solid var(--line) !important; }
  .va-sample-band ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .va-gr-pair { grid-template-columns: minmax(0, 1fr); padding-bottom: 60px; }
  .va-hand { max-width: 90%; }
  .va-ph-arch { display: none; }
  .va-ph-pen:not(.is-ink) { position: relative; right: auto; bottom: auto; display: inline-grid; width: 140px; margin: 0 0 10px; }
  .va .la-nb-sheet::before, .va-book::before, .va-contact .contact-right::before { left: -12px; width: 30px; background-size: 30px 64px; }
  .va-about .va-arch-sprig { display: none; }
  .va-services .va-sample { min-height: 120px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
}

/* ── 11. Motion (only when the visitor allows it) ──────────────── */
@media (min-width: 641px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .va-gr[data-step="2"] .va-spot.on-a { animation: va-ping 2.2s ease-out infinite; }
  .va-light { animation: va-shafts 16s ease-in-out infinite alternate; }
  .va-glow { animation: va-breathe 7s ease-in-out infinite alternate; }
  .va-jasmine, .va-home .atelier-hero-foliage, .va-desk-sprig, .la-nb-jasmine, .la-desk-jasmine { animation: va-sway 9s ease-in-out infinite alternate; }
  .va-jasmine.is-left { animation-name: va-sway-left; }
  .va-petals i { animation: va-fall var(--d, 14s) linear var(--delay, 0s) infinite; }
  .va-dust i { animation: va-mote var(--d, 11s) ease-in-out var(--delay, 0s) infinite; }
  .va-edge.is-in .glint { animation: va-glint 2.2s .3s cubic-bezier(.4,.1,.3,1) 1 both; }
  .va-star.is-in { animation: va-twinkle 2.4s .6s ease 1 both; }
  .va-oit .va-route.is-drawing path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: va-draw 2.6s .2s cubic-bezier(.5,.1,.2,1) forwards; }
  .va .la-beat:not([hidden]) .la-frame > img { animation: va-develop .9s ease both; }
  .va .la-beat:not([hidden]) .la-beat-text { animation: va-rise .7s .1s ease both; }
  .va-gr-panel:not([hidden]) { animation: va-rise .5s ease both; }
  .is-paused, .is-paused * { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: reduce) {
  .va-petals, .va-dust { display: none; }
  .va-reveal { opacity: 1; translate: none; filter: none; transition: none; }
  .va-layer { transition: none; }
}
@keyframes va-shafts { from { translate: -2% 0; opacity: .4; } to { translate: 3% 0; opacity: .7; } }
@keyframes va-breathe { from { opacity: .6; } to { opacity: 1; } }
@keyframes va-sway { from { rotate: -1.4deg; } to { rotate: 1.6deg; } }
@keyframes va-sway-left { from { rotate: 1.4deg; } to { rotate: -1.6deg; } }
@keyframes va-fall { 0% { opacity: 0; translate: 0 0; rotate: 0deg; } 8% { opacity: .95; } 85% { opacity: .9; } 100% { opacity: 0; translate: var(--dx, -12vw) 110vh; rotate: var(--r, 540deg); } }
@keyframes va-mote { 0%, 100% { opacity: 0; translate: 0 0; } 40% { opacity: .8; } 60% { opacity: .5; translate: var(--dx, 20px) -40px; } }
@keyframes va-glint { to { stroke-dashoffset: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } }
@keyframes va-twinkle { 0% { opacity: .4; scale: .6; } 45% { opacity: 1; scale: 1.45; } 100% { opacity: 1; scale: 1; } }
@keyframes va-draw { to { stroke-dashoffset: 0; } }
@keyframes va-develop { from { filter: brightness(.55) blur(5px) saturate(.6); scale: 1.03; } to { filter: none; scale: 1; } }
@keyframes va-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes va-ping { 0% { box-shadow: 0 0 0 0 #ff9a6299; } 80%, 100% { box-shadow: 0 0 0 16px #ff9a6200; } }

/* ── 12. Small screens ─────────────────────────────────────────── */
@media (max-width: 940px) {
  .va-gr-body, .va-feature-slot { grid-template-columns: minmax(0, 1fr); }
  .va-gr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .va-gr-steps button, .va-gr-steps li:first-child button { clip-path: none; margin: 0; border-inline-start-width: 1px; padding: 6px 8px; }
  .va-film .la-notebook { margin-top: -28px; }
  .va-home .va-jasmine.is-top { width: 110px; top: 60px; }
}
@media (max-width: 640px) {
  .va-petals i:nth-child(n+5), .va-dust i:nth-child(n+5) { display: none; }
  .va-light { opacity: .35; }
  .va-gr { rotate: none; padding: 14px; }
  .va-gr-steps b { font-size: .92rem; }
  .va-gr-steps small { font-size: .5rem; }
  .va-record li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .va-spot { width: 32px; height: 32px; font-size: .8rem; }
  .va-framed:hover { translate: none; }
  .va-mark { font-size: .58rem; max-width: 70vw; }
  .va-desk-surface > .va-mark { position: relative; inset: auto !important; display: inline-flex; margin: 0 6px 10px 0; }
  .va-jasmine.is-top { width: 84px !important; }
}
@media (max-width: 380px) { .va-jasmine, .va-desk-sprig { display: none; } }


/* ══ Review pass (12 Nov 2026) ══ */
/* No binder rings: a clean sheet with a thin chrome edge. */
.va .la-nb-sheet::before, .va-book::before, .va-contact .contact-right::before {
  inset: 0 auto 0 0 !important; width: 3px !important; background: linear-gradient(180deg, #eef1f6, #8d97ab 30%, #f4f6fb 55%, #5b6478 80%, #c3c9d5) !important; box-shadow: none !important; }
.va .la-nb-sheet, .va-book, .va-contact .contact-right { background-image: var(--paper-grain) !important; background-size: auto !important; background-repeat: repeat !important; }
.va .la-nb-sheet, .va-services .va-book { padding-inline-start: clamp(22px, 3.4vw, 52px); }
/* Work banner: keep the original crop so the title painted into the art stays out of view. */
.va .atelier-work-opening-art img { max-width: none; }
/* Featured slot sits after existing work and only in the All view. */
#work-projects:not([data-view="all"]) .va-feature-slot { display: none; }
.va-slot-section { padding-block: clamp(20px, 3vw, 44px) 0; }
.va-slot-section .va-feature-slot { margin-top: 0; }
/* CreatiSync: supporting detail folded under one summary. */
.va-more { margin: 0; padding: 0; }
.va-more > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 0; cursor: pointer; font: 600 clamp(1.2rem, 2vw, 1.6rem)/1.2 var(--serif); color: var(--ink); border-block: 1px solid var(--line); }
.va-more > summary::marker { color: var(--orange); }
.va-more[open] > summary { margin-bottom: clamp(16px, 2vw, 28px); }
.va-cs .la-cs-lists { padding-block: clamp(30px, 4vw, 60px); }
/* About: process note. */
.va-process-lede { margin: 12px 0 4px; max-width: 60ch; color: var(--subtle); }
/* Contact: show the balcony at its own proportions instead of stretching it across the banner. */
.va-contact .atelier-contact-lead .va-hero-bg { left: auto; right: 0; width: min(62%, 760px); object-position: center; }
.va-contact .atelier-contact-lead::before { background: linear-gradient(90deg, #0c111b 38%, #0c111bcc 52%, #0c111b33 72%, transparent 92%), linear-gradient(0deg, #0c111bb3, transparent 40%); }
/* Phone navigation: more room between labels. */
@media (max-width: 680px) {
  .atelier .atelier-nav { column-gap: 2px; }
  .atelier .atelier-nav a { padding-inline: 4px; font-size: clamp(.84rem, 3.9vw, 1rem); letter-spacing: .01em; }
  .atelier .atelier-nav a + a { box-shadow: -1px 0 0 #ffffff24; }
  .va-contact .atelier-contact-lead .va-hero-bg { width: 100%; }
}

/* Home: the jasmine cascade hangs over the chrome border instead of floating above the table. */
.va-home .atelier-hero-foliage { bottom: clamp(-230px, -15vw, -80px); }
@media (max-width: 940px) { .va-home .atelier-hero-foliage { bottom: clamp(-120px, -18vw, -50px); } }

/* Project tiles use the same layered chrome ring as the "One decision" frame. */
.va-framed .atelier-media:has(> img) { padding: 0 !important; background: #0b0d13 !important;
  box-shadow: 0 0 0 1px #1a1f2b, 0 0 0 4px #eef1f6, 0 0 0 7px #8d97ab, 0 0 0 10px #d5dae3, 0 0 0 11px #4d5568, 0 30px 40px -28px #0d1119 !important; }
.va-framed .atelier-media:has(> img) img { box-shadow: none; }
.va-framed .atelier-media:has(> img)::after { inset: 0; }
/* Desk jasmine starts at the wave and hangs over the desk edge. */
.va-home .la-desk-jasmine { top: -14px; width: clamp(78px, 7vw, 100px); }

/* Special tiles keep their own composition inside the chrome ring. */
.va .atelier-home-work .va-framed .atelier-media.atelier-home-marks { display: grid !important; place-items: center; background: #142038 url("images/atelier-brand-paper.webp") center / cover !important; }
.va .atelier-home-work .va-framed .atelier-home-marks img { width: 46%; height: auto; object-fit: initial; mix-blend-mode: multiply; }
.va .atelier-home-work .va-framed .atelier-media.atelier-home-aura { background: #11121a !important; }
.va .atelier-home-work .va-framed .atelier-home-aura img { object-fit: contain; }

/* ══ Living light (12 Nov 2026): a light that travels the chrome border every few seconds.
   Home and Work only. Pauses off-screen; under reduced motion the border stays still. ══ */
@media (min-width: 641px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .va.va-home .atelier-hero-sheen, .va.va-work .va-edge .glint {
    stroke: url(#va-beam); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: .16 1.2; stroke-dashoffset: .17; opacity: 0;
    filter: drop-shadow(0 0 3px #dfe6ff) drop-shadow(0 0 10px #5b8cffcc) drop-shadow(0 0 18px #ff8a4c99) drop-shadow(0 0 30px #5b8cff55);
    animation: va-living-light 9s 1.2s cubic-bezier(.45,0,.25,1) infinite;
  }
  .va.va-home .atelier-edge-star { animation: va-star-pass 9s 1.2s ease-in-out infinite; }
  .va.va-work .va-star { animation: va-star-pass-62 9s 1.2s ease-in-out infinite; }
}
@keyframes va-living-light {
  0% { stroke-dashoffset: .17; opacity: 0; }
  7% { opacity: 1; }
  33% { opacity: 1; }
  42%, 100% { stroke-dashoffset: -1.02; opacity: 0; }
}
@keyframes va-star-pass { 0%, 9%, 26%, 100% { scale: 1; text-shadow: 0 1px 2px #241914, 0 0 12px #4a3b30; }
  16.4% { scale: 1.35; color: #ffffff; text-shadow: 0 0 6px #ffffff, 0 0 16px #e6eaf2, 0 0 30px #aeb6c6, 0 0 44px #8d97ab; } }
@keyframes va-star-pass-62 { 0%, 11%, 28%, 100% { scale: 1; }
  18% { scale: 1.45; color: #ffffff; text-shadow: 0 0 6px #ffffff, 0 0 16px #e6eaf2, 0 0 30px #aeb6c6, 0 0 44px #8d97ab; } }

/* Optional art can be placed directly in a scene as an image. */
.va-scene > .va-flower {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 auto;
  width: clamp(70px, 14vw, 200px);
  height: auto;
  pointer-events: none;
}
@media (max-width: 380px) {
  .va-scene > .va-flower { display: none; }
}
.va-service-slot, .va-take-slot {
  margin: 10px 0 0;
  padding: 10px;
  border: 1px dashed currentColor;
  font-size: .8rem;
}
.va-service-slot span { display: block; }
.va-marks-on .va-services .va-samples > .va-sample { height: auto; }
.va-services .va-samples > .atelier-service-image + .atelier-service-image { margin-top: 10px; }

/* ══ Living motion, part 2 (12 Nov 2026): lights that answer something real.
   Ring light on Work filter change and tile hover, a film-strip light on scene change,
   a reveal light on the CreatiSync "Revise" decision, quieter border beams on the other pages.
   All motion sits inside prefers-reduced-motion: no-preference. ══ */

/* Chrome borders: a touch heavier and easier to see, with a soft contact shadow. */
.va .atelier-hero-edge path:not(.atelier-hero-sheen) { stroke-width: 3.6; filter: drop-shadow(0 1px 1.5px #0b0f1a8c) drop-shadow(0 0 2px #ffffff40); }
.va .va-edge .chrome { stroke-width: 3.6; filter: drop-shadow(0 1px 1.5px #0b0f1a8c) drop-shadow(0 0 2px #ffffff40); }

@property --va-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.va-framed .atelier-media:has(> img)::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  border: 5px solid transparent; filter: drop-shadow(0 0 5px #8fb0ff);
  border-image: conic-gradient(from var(--va-a), transparent 0deg 250deg, #6f95ff 292deg, #ffffff 322deg, #ff8a4c 346deg, transparent 360deg) 1;
}
.va .la-strip { position: relative; }
.va-strip-light { position: absolute; z-index: 2; bottom: 2px; left: 0; width: 0; height: 4px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, #6f95ff, #ffffff 50%, #ff8a4c); box-shadow: 0 0 8px #6f95ffcc, 0 0 16px #ff8a4c80; }

@media (min-width: 641px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Work: tiles settle into the new selection and a light circles each chrome ring. */
  .va-framed.va-lit { animation: va-settle .7s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 90ms) both; }
  .va-framed.va-lit .atelier-media:has(> img)::before { animation: va-ring-run 1.3s cubic-bezier(.45,0,.25,1) calc(var(--i, 0) * 90ms + 150ms) both; }
  @media (hover: hover) and (pointer: fine) {
    .va-framed:hover .atelier-media:has(> img)::before, .va-framed:focus-visible .atelier-media:has(> img)::before { animation: va-ring-run 1.3s cubic-bezier(.45,0,.25,1) both; }
  }
  /* Film strip: the light glides to the chosen frame. */
  .va-strip-light { transition: left .75s cubic-bezier(.45,0,.25,1), width .75s cubic-bezier(.45,0,.25,1); }
  .va-strip-light.is-moving { animation: va-strip-flare .75s ease-out both; }
  /* CreatiSync: choosing Revise sends a light across the first pass and reveals the revision behind it. */
  .va-gr[data-step="3"].is-revising .va-gr-canvas .is-b { opacity: 1; clip-path: inset(0 0 0 0); animation: va-wipe 1.4s cubic-bezier(.45,0,.25,1) both; transition: none; }
  .va-gr[data-step="3"].is-revising .va-gr-tag.is-b { opacity: 1; transition: opacity .4s 1.1s; }
  .va-gr[data-step="3"].is-revising .va-gr-canvas::after { content: ''; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 3px;
    background: linear-gradient(#6f95ff, #ffffff 50%, #ff8a4c); box-shadow: 0 0 12px #8fb0ff, 0 0 26px #ff8a4c99; pointer-events: none;
    animation: va-scan 1.4s cubic-bezier(.45,0,.25,1) both; }
  /* Other pages: the border beam, quieter and on each page's own timing. */
  .va-beam-page .va-edge .glint.va-beam-live {
    stroke: url(#va-beam); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: .16 1.2; stroke-dashoffset: .17; opacity: 0;
    filter: drop-shadow(0 0 3px #dfe6ff) drop-shadow(0 0 8px #5b8cffaa) drop-shadow(0 0 14px #ff8a4c77);
    animation: va-living-soft var(--beam-dur, 12s) var(--beam-delay, 2s) cubic-bezier(.45,0,.25,1) infinite; }
  .va-beam-page .va-star.is-in { animation: none; }
  .va-star.va-flash { animation: va-star-flash .9s ease-in-out both; }
}
.va-film { --beam-dur: 11.5s; --beam-delay: 2.2s; }
.va-cs { --beam-dur: 12s; --beam-delay: 1.8s; }
.va-services { --beam-dur: 13s; --beam-delay: 2.6s; }
.va-about { --beam-dur: 12.5s; --beam-delay: 2s; }
.va-contact { --beam-dur: 11s; --beam-delay: 2.4s; }
.va-shop { --beam-dur: 13.5s; --beam-delay: 2s; }
@keyframes va-settle { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes va-ring-run { 0% { --va-a: 0deg; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { --va-a: 360deg; opacity: 0; } }
@keyframes va-strip-flare { 0% { filter: brightness(1); } 40% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
@keyframes va-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes va-scan { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes va-living-soft { 0% { stroke-dashoffset: .17; opacity: 0; } 5% { opacity: .8; } 26% { opacity: .8; } 32%, 100% { stroke-dashoffset: -1.02; opacity: 0; } }
@keyframes va-star-flash { 0%, 100% { scale: 1; } 45% { scale: 1.4; color: #ffffff; text-shadow: 0 0 6px #ffffff, 0 0 16px #e6eaf2, 0 0 30px #aeb6c6, 0 0 44px #8d97ab; } }

/* Phones and touch screens: the newer light effects stay off (follows the phone limits above). */
@media not ((min-width: 641px) and (hover: hover) and (pointer: fine)) {
  .va-strip-light { display: none; }
}

/* ══ Services offers (refinement, 12 Nov 2026): the offers lead after the opening.
   A quiet paper surface, no motion, price and scope first, one action per tier. ══ */
.va-services .va-offers { position: relative; z-index: 3; padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 80px); background: #f6f0e4; border-top: 1px solid #ddd2bf; }
.va-services .va-offers-head { max-width: 46rem; margin-bottom: clamp(20px, 3vw, 36px); }
.va-services .va-offers-head .atelier-heading { margin: 6px 0 10px; }
.va-offers-lede { margin: 0; color: var(--subtle); font-size: 1.02rem; }
.va-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.va-tier { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(20px, 2.2vw, 28px); background: #fffaf2; border: 1px solid #d9cdb8; border-radius: 8px; box-shadow: 0 1px 0 #fff inset, 0 14px 24px -22px #0d111966; scroll-margin-top: 90px; }
.va-tier h3 { margin: 0; font: 600 clamp(1.7rem, 2.4vw, 2.1rem)/1.05 var(--serif); color: var(--ink); }
.va-tier-index { margin: 0; font: .62rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.va-tier-for { margin: 0; color: var(--subtle); font-size: .98rem; }
.va-tier-facts { display: grid; gap: 12px; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid #e6dcc9; }
.va-tier-facts div { display: grid; gap: 2px; }
.va-tier-facts dt { font: .6rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6b6f78; }
.va-tier-facts dd { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.5; }
.va-tier-facts .va-tier-price { font: 600 clamp(1.35rem, 1.9vw, 1.6rem)/1.15 var(--serif); color: var(--ink); }
.va-tier-sprint { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #c3c9d5; border-left: 3px solid #163c91; border-radius: 6px; background: #f1f3f8; color: var(--ink); text-decoration: none; }
.va-tier-sprint span { font: .58rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #163c91; }
.va-tier-sprint strong { font: 600 1.15rem/1.2 var(--serif); }
.va-tier-sprint small { color: var(--subtle); font-size: .86rem; }
.va-tier-sprint:hover strong, .va-tier-sprint:focus-visible strong { text-decoration: underline; text-underline-offset: .2em; }
.va-tier-cta { margin-top: auto; justify-content: center; text-align: center; min-height: 48px; }
.va-tier .va-tier-facts { margin-bottom: 8px; }
.va-sprint { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); margin-top: clamp(18px, 2.4vw, 28px); padding: clamp(22px, 3vw, 36px); background: #fffaf2; border: 1px solid #d9cdb8; border-top: 3px solid #163c91; border-radius: 8px; scroll-margin-top: 90px; }
.va-sprint .atelier-heading { margin: 6px 0 10px; font-size: clamp(2rem, 3.4vw, 2.8rem); }
.va-sprint .atelier-copy { margin: 0 0 12px; color: var(--ink); }
.va-sprint-scope { display: flex; flex-direction: column; gap: 12px; }
.va-sprint-scope ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.va-sprint-scope li { padding: 10px 0 10px 28px; border-top: 1px solid #e6dcc9; position: relative; color: var(--ink); }
.va-sprint-scope li:last-child { border-bottom: 1px solid #e6dcc9; }
.va-sprint-scope li::before { content: '✓'; position: absolute; left: 4px; color: #163c91; font-weight: 700; }
.va-sprint-scope .va-tier-cta { margin-top: 6px; align-self: start; }
/* The practice areas follow the offers; give them room to separate. */
.va-services .va-offers + .atelier-practice.va-book { margin-top: clamp(36px, 5vw, 70px); }
@media (max-width: 940px) {
  .va-tiers { grid-template-columns: minmax(0, 1fr); }
  .va-sprint { grid-template-columns: minmax(0, 1fr); }
  .va-sprint-scope .va-tier-cta { align-self: stretch; }
}
@media (max-width: 640px) {
  .va-services .va-offers { padding-block: 28px 36px; }
  .va-tier { padding: 18px; gap: 8px; }
  .va-tier-facts { gap: 10px; }
}
@media (max-width: 640px) {
  .va-tier-cta, .va-sprint-scope .va-tier-cta { align-self: stretch; }
}

/* Home: the border star becomes a white VA monogram (same silver pulse as the light passes). */
.va-home .atelier-edge-star.va-edge-mark { color: #ffffff; font: 600 clamp(1rem, 2vw, 1.85rem)/1 var(--serif); letter-spacing: -.14em; padding-right: .14em; translate: -50% 0; left: 50%;
  text-shadow: 0 1px 2px #0b0f1a99, 0 0 10px #ffffff66; }
@media (min-width: 641px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .va.va-home .atelier-edge-star.va-edge-mark { animation: va-va-pass 9s 1.2s ease-in-out infinite; }
}
@keyframes va-va-pass {
  0%, 9%, 26%, 100% { scale: 1; text-shadow: 0 1px 2px #0b0f1a99, 0 0 10px #ffffff66; }
  16.4% { scale: 1.3; text-shadow: 0 0 6px #ffffff, 0 0 16px #e6eaf2, 0 0 30px #aeb6c6, 0 0 44px #8d97ab; }
}
/* On the stacked phone layout the candle glow lands beside the text instead of the lamp. */
@media (max-width: 940px) { .va-home .va-hero-candle { display: none; } }

/* A lighter version of the Home scene for phones. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .va-home .atelier-hero-stage .va-petals,
  .va-home .atelier-hero-stage .va-dust { top: auto; bottom: 0; height: clamp(270px, 72vw, 460px); }
  .va-home .atelier-hero-stage .va-petals i {
    width: 8px;
    height: 5px;
    animation: va-fall 8s linear var(--delay, 0s) infinite;
  }
  .va-home .atelier-hero-stage .va-dust i {
    width: 4px;
    height: 4px;
    background: #fff4db;
    box-shadow: 0 0 5px 2px #ffd59a;
    animation: va-mote 9s ease-in-out var(--delay, 0s) infinite;
  }
  .va-home .atelier-hero-foliage { animation: va-sway 12s ease-in-out infinite alternate; }
  .va-home .atelier-hero-sheen {
    stroke: url(#va-beam);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: .16 1.2;
    stroke-dashoffset: .17;
    opacity: 0;
    animation: va-living-light 12s 1.2s cubic-bezier(.45,0,.25,1) infinite;
  }
  .va-home .atelier-edge-star.va-edge-mark { animation: va-va-pass 12s 1.2s ease-in-out infinite; }
  .va-home .atelier-hero-stage.is-paused .va-petals i,
  .va-home .atelier-hero-stage.is-paused .va-dust i,
  .va-home .atelier-hero-stage.is-paused .atelier-hero-foliage,
  .va-home .atelier-hero-stage.is-paused .atelier-hero-sheen,
  .va-home .atelier-hero-stage.is-paused .atelier-edge-star { animation-play-state: paused; }
}