/* AI window preview. Opener: edge-to-edge before/after of a real customer window, title block bottom right. */
.wf .vz-card, .wf .vz-tag { visibility: hidden; }

/* ---------- opener ---------- */
.vz-open { position: relative; min-height: 84vh; display: flex; align-items: flex-end; padding: calc(var(--hdr) + 40px) 0 clamp(24px, 3vw, 44px); overflow: clip; isolation: isolate; background: var(--graphite); }
.vz-open__ba { position: absolute; inset: 0; z-index: -1; touch-action: pan-y; user-select: none; cursor: ew-resize; }
.vz-open__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; pointer-events: none; }
.vz-open__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x, 50%)); }
.vz-open__ba::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(20, 24, 27, .55), transparent 45%); }
.vz-open__knob { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateX(var(--x, 50%)); }
.vz-open__knob .vz-open__handle { pointer-events: auto; left: 0; }
.vz-open__line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); z-index: 2; }
.vz-open__handle, .vz-stage__handle { position: absolute; top: 50%; left: var(--x, 50%); z-index: 3; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 0; border-radius: var(--rb); background: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); cursor: ew-resize; }
.vz-open__handle svg, .vz-stage__handle svg { width: 22px; height: 12px; } .vz-open__handle path, .vz-stage__handle path { fill: none; stroke: var(--graphite); stroke-width: 1.8; }
.vz-tag { position: absolute; top: calc(var(--hdr) + 18px); z-index: 2; padding: 7px 11px; border-radius: calc(var(--r) - 3px); background: rgba(28, 33, 37, .88); color: #fff; font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-stretch: 85%; }
.vz-tag--b { left: clamp(16px, 2.4vw, 36px); } .vz-tag--a { right: clamp(16px, 2.4vw, 36px); }
.vz-open__in { display: flex; justify-content: flex-end; pointer-events: none; }
.vz-card { pointer-events: auto; width: min(640px, 100%); background: rgba(28, 33, 37, .93); border: 1px solid rgba(183, 192, 198, .3); border-radius: var(--r); padding: clamp(22px, 2.6vw, 38px); backdrop-filter: blur(6px); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.vz-h { font-size: clamp(2.3rem, 3.6vw, 3.9rem); color: #fff; margin-bottom: .32em; }
.vz-h em { color: var(--oak-hi); }
.vz-lede { color: var(--silver-hi); font-size: clamp(1.04rem, 1.15vw, 1.15rem); margin-bottom: 22px; }
.vz-note { margin: 16px 0 0; font-size: .92rem; color: var(--muted-d); }
@media (max-width: 800px) {
  .vz-open { display: block; min-height: 0; padding: 0 0 26px; }
  .vz-open__ba { position: relative; inset: auto; height: 54svh; min-height: 320px; z-index: 0; margin-top: var(--hdr); }
  .vz-tag { top: 14px; }
  .vz-open__in { margin-top: -40px; position: relative; z-index: 2; }
}

/* ---------- tool ---------- */
.btn--line-d { --bg: transparent; --fg: var(--silver-hi); border-color: rgba(227, 232, 235, .4); }
.btn--line-d::before { background: var(--silver-hi); }
.btn--line-d:hover, .btn--line-d:focus-visible { color: var(--graphite); }
.vz-tool { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.vz-rail { position: relative; position: sticky; top: calc(var(--hdr) + 24px); }
.vz-rail__line { position: absolute; left: 20px; top: 20px; bottom: 20px; width: 1.5px; margin-left: -.75px; background: rgba(183, 205, 225, .25); }
.vz-rail__line i { position: absolute; inset: 0; background: var(--oak-hi); transform-origin: top; transform: scaleY(var(--prog, 0)); transition: transform .8s var(--ease); }
.vz-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; position: relative; }
.vz-steps li { display: flex; align-items: center; gap: 14px; color: var(--muted-d); }
.vz-steps b { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1.4px solid rgba(183, 205, 225, .4); border-radius: var(--rb); background: var(--ink); font: 400 1.2rem/1 var(--f-d); color: var(--silver-hi); position: relative; z-index: 1; transition: background .4s, border-color .4s, color .4s; }
.vz-steps span { font: 400 1.2rem/1.2 var(--f-d); transition: color .4s; }
.vz-steps li.is-on b { background: var(--oak); border-color: var(--oak); color: var(--graphite); }
.vz-steps li.is-on span { color: #fff; }
.vz-steps li.is-done b { border-color: var(--oak-hi); color: var(--oak-hi); }
.vz-panel { background: rgba(14, 33, 51, .72); border: 1px solid rgba(183, 205, 225, .25); border-radius: var(--r); padding: clamp(22px, 3vw, 42px); min-height: 440px; position: relative; }
.vz-step[hidden] { display: none !important; }
.vz-step__h { color: #fff; font-size: clamp(1.5rem, 2vw, 2rem); margin-bottom: .35em; }
.vz-step__p { color: var(--muted-d); margin: 0 0 22px; }
.vz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vz-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.vz-go--wrap { margin-top: 16px; }
.vz-small { color: var(--muted-d); font-size: .95rem; }
.vz-err { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r); background: rgba(246, 227, 224, .95); color: #6E2219; font-weight: 500; }
.vz-err[hidden] { display: none; }
#vz-details[hidden], .vz-quote[hidden] { display: none; }

/* upload */
.vz-drop { display: grid; place-items: center; position: relative; min-height: 230px; border: 1.5px dashed rgba(183, 205, 225, .5); border-radius: var(--r); background: rgba(255, 255, 255, .03); cursor: pointer; overflow: hidden; transition: border-color .3s, background .3s; }
.vz-drop:hover, .vz-drop.is-over, .vz-drop:focus-within { border-color: var(--oak-hi); background: rgba(201, 150, 104, .07); }
.vz-drop__in { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 24px; color: var(--muted-d); }
.vz-drop__in svg { width: 46px; height: 46px; } .vz-drop__in path { fill: none; stroke: var(--oak-hi); stroke-width: 2; }
.vz-drop__in b { color: #fff; font: 400 1.4rem/1.2 var(--f-d); }
.vz-drop__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0d1d2c; }
.vz-drop__pic[hidden] { display: none; }
.vz-or { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; color: var(--muted-d); font-size: .95rem; }
.vz-or::before, .vz-or::after { content: ''; flex: 1; height: 1px; background: rgba(183, 205, 225, .22); }
.vz-samples { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.vz-sample { cursor: pointer; display: grid; gap: 6px; }
.vz-sample__ph { display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--r) - 2px); overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .3s; }
.vz-sample__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.vz-sample:hover img { transform: scale(1.06); }
.vz-sample__t { font-size: .92rem; color: var(--silver-hi); }
.vz-sample input:checked + .vz-sample__ph { outline-color: var(--oak-hi); }
.vz-sample input:focus-visible + .vz-sample__ph { outline-color: var(--silver-hi); }

/* choose */
.vz-choose { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: start; }
.vz-set { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.vz-set legend { padding: 0; margin-bottom: 10px; font-size: .875rem; font-weight: 600; font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.vz-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vz-opt { cursor: pointer; }
.vz-opt__in { display: grid; gap: 4px; height: 100%; padding: 12px; border: 1px solid rgba(183, 205, 225, .28); border-radius: var(--r); background: rgba(255, 255, 255, .03); transition: border-color .3s, background .3s; }
.vz-opt__in svg { width: 34px; height: 34px; margin-bottom: 4px; } .vz-opt__in path { fill: none; stroke: var(--silver-hi); stroke-width: 1.5; }
.vz-opt__in b { color: #fff; font-weight: 600; }
.vz-opt__in small { font-size: .875rem; color: var(--muted-d); line-height: 1.35; }
.vz-opt input:checked + .vz-opt__in { border-color: var(--oak); background: rgba(181, 129, 79, .14); }
.vz-opt input:focus-visible + .vz-opt__in, .vz-sw input:focus-visible + .vz-sw__in, .vz-pill input:focus-visible + span { outline: 2px solid var(--oak-hi); outline-offset: 2px; }
.vz-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vz-sw { cursor: pointer; }
.vz-sw__in { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border: 1px solid rgba(183, 205, 225, .28); border-radius: var(--r); color: var(--silver-hi); transition: border-color .3s, background .3s; }
.vz-sw__in small { font-size: .875rem; color: var(--oak-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.vz-sw__in i { flex: none; width: 26px; height: 32px; background-size: cover; border-radius: calc(var(--r) - 4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.vz-sw input:checked + .vz-sw__in { border-color: var(--oak); background: rgba(181, 129, 79, .14); color: #fff; }
.vz-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vz-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.vz-pill { cursor: pointer; }
.vz-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(183, 205, 225, .28); border-radius: var(--rb); color: var(--silver-hi); transition: border-color .3s, background .3s, color .3s; }
.vz-pill input:checked + span { border-color: var(--oak); background: var(--oak); color: var(--graphite); font-weight: 600; }
[data-tiltset].is-off { opacity: .4; pointer-events: none; }
.vz-sketch { margin: 0; position: sticky; top: calc(var(--hdr) + 30px); }
.vz-sketch svg { width: 100%; height: auto; overflow: visible; }
.vz-sketch .sk-frame { fill: rgba(227, 232, 235, .04); stroke: var(--silver-hi); stroke-width: 1.6; }
.vz-sketch .sk-glass { fill: rgba(150, 190, 220, .12); }
.vz-sketch .sk-panel { stroke: rgba(20, 24, 27, .6); stroke-width: 1; }
.vz-sketch .sk-lv { stroke: rgba(20, 24, 27, .45); }
.vz-sketch .sk-dim { fill: none; stroke: var(--oak-hi); stroke-width: 1.2; }
.vz-sketch figcaption { margin-top: 10px; font-size: .92rem; color: var(--muted-d); line-height: 1.4; }

/* result */
.vz-result { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.vz-stage { position: relative; border-radius: var(--r); overflow: hidden; background: #0d1d2c; touch-action: pan-y; user-select: none; }
.vz-stage__before { display: block; width: 100%; height: auto; max-height: var(--media-cap); object-fit: contain; }
.vz-stage__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x, 50%)); }
.vz-stage__after img { width: 100%; height: 100%; object-fit: cover; }
.vz-stage__after[hidden], .vz-stage__line[hidden], .vz-stage__handle[hidden], .vz-tag[hidden], .vz-work[hidden] { display: none; }
.vz-stage__line { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: #fff; z-index: 2; }
.vz-stage .vz-tag { top: 12px; }
.vz-stage .vz-tag--b { left: 12px; } .vz-stage .vz-tag--a { right: 12px; }
.vz-work { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; background-color: rgba(14, 33, 51, .8); background-image: linear-gradient(rgba(183, 205, 225, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 205, 225, .1) 1px, transparent 1px); background-size: 24px 24px; }
.vz-work svg { width: min(220px, 50%); height: auto; overflow: visible; }
.vz-work path, .vz-work rect { fill: none; stroke: var(--silver-hi); stroke-width: 1.4; }
.vz-work .w-l { stroke-width: .8; opacity: .7; }
.vz-work .w-d { stroke: var(--oak-hi); }
.vz-work p { margin: 0; color: #fff; font: 400 1.3rem/1.2 var(--f-d); }
.vz-quote { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(183, 205, 225, .22); display: grid; gap: 14px; }
.vz-quote h4 { margin: 0; font: 400 1.4rem/1.2 var(--f-d); color: #fff; }
.vz-est { margin: 0; padding: 14px 16px; border: 1px solid rgba(183, 205, 225, .28); border-radius: var(--r); background: rgba(10, 26, 41, .55); display: grid; gap: 2px; }
.vz-est b { font: 400 clamp(1.7rem, 2.4vw, 2.3rem)/1.1 var(--f-d); color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.vz-est small { font-size: .92rem; color: var(--muted-d); }
.vz-done { margin-top: 22px; padding: 22px; border-radius: var(--r); background: rgba(227, 240, 230, .96); color: #1E4A2A; }
.vz-done[hidden] { display: none; }
.vz-done h4 { margin: 0 0 8px; font: 400 1.5rem/1.2 var(--f-d); }
.vz-done p { margin: 0 0 16px; }

@media (max-width: 1100px) { .vz-tool { grid-template-columns: 1fr; } .vz-rail { position: relative; top: 0; }
  .vz-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .vz-steps li { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .vz-steps span { font-size: 1rem; }
  .vz-rail__line { left: 12.5%; right: 12.5%; top: 20px; bottom: auto; width: auto; height: 1.5px; margin: -.75px 0 0; }
  .vz-rail__line i { transform-origin: left; transform: scaleX(var(--prog, 0)); }
  .vz-result { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vz-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vz-cards { grid-template-columns: 1fr 1fr; }
  .vz-choose { grid-template-columns: 1fr; }
  .vz-sketch { position: relative; top: 0; max-width: 220px; }
  .vz-twin, .vz-grid2 { grid-template-columns: 1fr; }
  .vz-swatches { grid-template-columns: 1fr 1fr; }
}

/* questions */
.vz-q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.vz-q__fig .ph { aspect-ratio: 3 / 2.2; max-height: var(--media-cap); }
.acc { margin-top: 24px; border-top: 1px solid rgba(26, 31, 35, .2); }
.acc details { border-bottom: 1px solid rgba(26, 31, 35, .2); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 2px; min-height: 44px; font: 400 clamp(1.15rem, 1.45vw, 1.4rem)/1.25 var(--f-d); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--oak-deep), var(--oak-deep)) center / 14px 1.6px no-repeat, linear-gradient(var(--oak-deep), var(--oak-deep)) center / 1.6px 14px no-repeat; transition: transform .4s var(--ease); }
.acc details[open] summary::after { transform: rotate(135deg); }
.acc details p { margin: 0 0 18px; color: var(--muted); padding-right: 30px; }
@media (max-width: 900px) { .vz-q { grid-template-columns: 1fr; } }

/* book band */
.vz-book { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 80px); align-items: end; }
.vz-book .lede { margin: 0; }
.vz-book .btns { grid-column: 2; }
.vz-book .btn--ghost { --bg: rgba(20, 24, 27, .62); }
@media (max-width: 900px) { .vz-book { grid-template-columns: 1fr; } .vz-book .btns { grid-column: auto; } }

.vz-go[hidden], .vz-quote[hidden], .vz-done[hidden], .vz-step[hidden], .btn[hidden] { display: none !important; }
/* light through louvres drifting across the panel at rest */
.vz-panel { overflow: clip; isolation: isolate; }
.vz-panel::before { content: ''; position: absolute; inset: -30% -40%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(-28deg, rgba(201, 150, 104, 0) 0 30px, rgba(201, 150, 104, .07) 30px 46px);
  -webkit-mask: radial-gradient(ellipse 45% 55% at 50% 50%, #000 20%, transparent 70%); mask: radial-gradient(ellipse 45% 55% at 50% 50%, #000 20%, transparent 70%);
  animation: vzLight 9s ease-in-out infinite alternate; }
@keyframes vzLight { from { transform: translate3d(-22%, -6%, 0); } to { transform: translate3d(22%, 6%, 0); } }
.rm .vz-panel::before { animation: none; transform: none; }

/* the save link shows only once a preview exists (its href is set then) */
[data-download][hidden] { display: none; }