/* Uebler case — "engineering blueprint".
   Eigen sfeer: licht technisch papier met blueprint-raster; in dark mode bijna-zwart (#12120D, Uebler-merkkleur).
   Alles is gescoped op body[data-page="uebler"] / .ub zodat niets lekt naar andere pagina's. */

body[data-page="uebler"] {
  --u-red: #e72119;
  --u-paper: #f3f3ef;
  --u-card: #ffffff;
  --u-grid: rgba(18, 18, 13, .055);
  --u-grid-strong: rgba(18, 18, 13, .11);
  --u-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --bg: var(--u-paper);
}
:root[data-theme="dark"] body[data-page="uebler"] {
  --u-paper: #12120d;
  --u-card: #1c1c16;
  --u-grid: rgba(245, 245, 245, .05);
  --u-grid-strong: rgba(245, 245, 245, .1);
}

.ub { position: relative; overflow-x: clip; }
.ub-grid, .ub-cfg-pics, .ub-map-wrap {
  background-image:
    linear-gradient(var(--u-grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--u-grid-strong) 1px, transparent 1px),
    linear-gradient(var(--u-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--u-grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* Rode statusblokjes (knipperen) */
.ub-live { display: inline-block; flex: 0 0 auto; width: .6em; height: .6em; border-radius: 2px; background: var(--red, #ff0000); animation: ub-blink 1.1s steps(2, jump-none) infinite; vertical-align: .05em; }
@keyframes ub-blink { 50% { opacity: .15; } }

/* Mono annotaties */
.ub-meta, .ub-dim span, .ub figcaption, .ub-frame-size, .ub-specs dt, .ub-idx, .ub-block-title, .ub-step-no,
.ub-cfg-kicker, .ub-meter p, .ub-map-tag, .ub-cross span, .ub-note, .ub-map-note {
  font-family: var(--u-mono); font-size: clamp(.68rem, .72vw, .82rem); letter-spacing: .04em; text-transform: uppercase;
}

/* Sectiekop: "01 ■ The brief" */
.ub-head { display: flex; align-items: center; gap: 1rem; margin: 0; }
.ub-head .label { font-size: clamp(1rem, 1.15vw, 1.35rem); }
.ub-idx { display: grid; place-items: center; min-width: 2.6em; height: 2.6em; padding: 0 .4em; border: 1px solid var(--line); border-radius: 4px; }
.ub-h2 { margin: clamp(1.2rem, 2vw, 2rem) 0 0; font-size: clamp(2.2rem, 6.2vw, 7.4rem); line-height: .9; letter-spacing: -.02em; }

/* ---------- Hero ---------- */
.ub-hero { position: relative; padding: clamp(7.5rem, 11vw, 12rem) var(--gutter) clamp(3rem, 6vw, 6rem); isolation: isolate; }
.ub-grid { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 45%, transparent 90%); mask-image: radial-gradient(120% 90% at 50% 30%, #000 45%, transparent 90%); }
.ub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 clamp(1rem, 2vw, 2rem); }
.ub-meta-dwg { margin-left: auto; opacity: .55; }
.ub-title { font-size: clamp(3.4rem, 18.6vw, 22.5rem); line-height: .8; letter-spacing: -.035em; margin: 0 0 0 -.04em; white-space: nowrap; }
.ub-title .split-word > span { transition-duration: 1.3s; }

.ub-dim { position: relative; height: 1px; margin: clamp(1.4rem, 2.4vw, 2.6rem) 0 clamp(1.6rem, 2.6vw, 3rem); background: currentColor; transform: scaleX(0); transition: transform 1.6s var(--ease-in-out) .35s; }
.ub-dim::before, .ub-dim::after { content: ""; position: absolute; top: -8px; width: 1px; height: 17px; background: currentColor; }
.ub-dim::before { left: 0; } .ub-dim::after { right: 0; }
.ub-dim span { position: absolute; left: 50%; top: 50%; padding: 0 1rem; background: var(--bg); transform: translate(-50%, -50%); white-space: nowrap; opacity: 0; transition: opacity .6s 1.5s; }
.is-in .ub-dim { transform: scaleX(1); }
.is-in .ub-dim span { opacity: 1; }

.ub-sub { max-width: 34em; margin: 0; font-size: clamp(1.05rem, 1.35vw, 1.6rem); line-height: 1.3; }
.ub-chips { margin-top: 1.6rem; }
.ub-hero-head { display: grid; grid-template-columns: minmax(0, 1fr); }

.ub-hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(1rem, 3vw, 4rem); align-items: end; margin-top: clamp(3rem, 6vw, 7rem); }
.ub figure { margin: 0; }
.ub figcaption { display: flex; gap: .8rem; margin-top: .9rem; }
.ub figcaption span { color: var(--u-red); }

.ub-fig-product { position: relative; padding: 8% 6% 0; }
.ub-fig-product img { position: relative; width: 100%; height: auto; transform: translate3d(0, var(--py, 0), 0); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .18)); }
.ub-reg { position: absolute; left: 50%; top: 50%; width: 92%; transform: translate(-50%, -52%); fill: none; stroke: var(--fg); stroke-width: .5; opacity: .45; overflow: visible; }
.ub-reg circle, .ub-reg path { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 2.4s var(--ease-in-out) .6s; }
.ub-reg path { stroke-dasharray: 4 4 4 4 4 400; }
.is-in .ub-reg circle, .is-in .ub-reg path { stroke-dashoffset: 0; }
.ub-reg { animation: ub-spin 60s linear infinite; }
@keyframes ub-spin { to { transform: translate(-50%, -52%) rotate(360deg); } }

.ub-frame { position: relative; padding: clamp(.6rem, 1.1vw, 1.2rem); }
.ub-frame-media { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 10; background: #12120d; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-in-out) .5s; }
.is-in .ub-frame-media { clip-path: inset(0 0 0 0); }
.ub-frame video { width: 100%; height: 100%; object-fit: cover; }
.ub-corner { position: absolute; width: clamp(14px, 1.6vw, 26px); aspect-ratio: 1; border: 0 solid var(--u-red); transition: transform 1s var(--ease) .9s; }
.ub-corner.is-tl { top: 0; left: 0; border-width: 2px 0 0 2px; transform: translate(14px, 14px); }
.ub-corner.is-tr { top: 0; right: 0; border-width: 2px 2px 0 0; transform: translate(-14px, 14px); }
.ub-corner.is-bl { bottom: 2.1rem; left: 0; border-width: 0 0 2px 2px; transform: translate(14px, -14px); }
.ub-corner.is-br { bottom: 2.1rem; right: 0; border-width: 0 2px 2px 0; transform: translate(-14px, -14px); }
.is-in .ub-corner { transform: none; }
.ub-frame:hover .ub-corner.is-tl { transform: translate(-5px, -5px); }
.ub-frame:hover .ub-corner.is-tr { transform: translate(5px, -5px); }
.ub-frame:hover .ub-corner.is-bl { transform: translate(-5px, 5px); }
.ub-frame:hover .ub-corner.is-br { transform: translate(5px, 5px); }
.ub-frame:hover .ub-corner { transition-delay: 0s; transition-duration: .5s; }
.ub-frame-size { position: absolute; top: -1.6em; right: clamp(.6rem, 1.1vw, 1.2rem); opacity: .55; }

.ub-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(3rem, 5vw, 5rem) 0 0; border-top: 1px solid var(--fg); }
.ub-specs div { padding: 1rem 1rem 0 0; border-right: 1px solid var(--line); }
.ub-specs div + div { padding-left: 1rem; }
.ub-specs div:last-child { border-right: 0; }
.ub-specs dt { opacity: .55; }
.ub-specs dd { margin: .6rem 0 0; font-size: clamp(1rem, 1.3vw, 1.5rem); }
.ub-specs b { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: clamp(1.6rem, 3vw, 3.6rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- 01 Brief ---------- */
.ub-brief { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 8rem); padding: clamp(5rem, 9vw, 10rem) var(--gutter); }
.ub-brief .ub-head { grid-column: 1 / -1; }
.ub-lead { margin: 0 0 2rem; font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: clamp(1.6rem, 3.2vw, 3.8rem); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; }
.ub-brief-copy .reveal p { max-width: 34em; margin: 0 0 1.2em; }
.ub-block { align-self: end; padding: clamp(1rem, 1.6vw, 1.6rem); border: 1px solid var(--fg); border-radius: 4px; background: var(--u-card); }
.ub-block-title { display: flex; justify-content: space-between; margin: 0 0 1rem; opacity: .6; }
.ub-credits div { transition: background-color .3s, padding .4s var(--ease); }
.ub-credits div:hover { padding-left: .6rem; background: var(--u-grid); }
.ub-credits dd { opacity: .7; }
.ub-block .btn-split { margin-top: 1.6rem; }

/* ---------- 02 Configurator ---------- */
.ub-config { padding: 0 var(--gutter) clamp(5rem, 9vw, 10rem); }
.ub-note { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 0; opacity: .75; text-transform: none; }
.ub-cfg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(2rem, 3.5vw, 3.5rem); }
.ub-cfg-steps { display: grid; align-content: start; gap: clamp(1.2rem, 2vw, 2rem); padding: clamp(1.2rem, 2vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--u-card); }
.ub-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.ub-step legend { display: block; padding: 0; margin-bottom: 1rem; font-size: clamp(1.15rem, 1.5vw, 1.7rem); font-weight: 500; }
.ub-step-no { display: block; margin-bottom: .35rem; color: var(--u-red); }
.ub-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ub-opts.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ub-opt { position: relative; display: block; cursor: pointer; }
.ub-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ub-opt span {
  position: relative; display: grid; place-items: center; height: clamp(3.4rem, 4.6vw, 5rem); border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: clamp(1.1rem, 1.7vw, 2rem); text-transform: uppercase; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.ub-opt span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: translateY(101%); transition: transform .5s var(--ease); }
.ub-opt:hover span { border-color: var(--fg); transform: translateY(-2px); }
.ub-opt input:checked + span { color: var(--bg); border-color: var(--fg); }
.ub-opt input:checked + span::before { transform: none; }
.ub-opt input:checked + span::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 1px; background: var(--u-red); }
.ub-opt input:focus-visible + span { outline: 2px solid var(--u-red); outline-offset: 3px; }
.ub-opt:active span { transform: scale(.96); }

.ub-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.ub-slots i {
  position: relative; aspect-ratio: 1.5; border-radius: 6px; border: 1px dashed var(--line);
  background: center / 74% no-repeat var(--ub-bike);
  --ub-bike: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36' fill='none' stroke='%23999' stroke-width='2.4'%3E%3Ccircle cx='12' cy='24' r='10'/%3E%3Ccircle cx='48' cy='24' r='10'/%3E%3Cpath d='M12 24 22 8h18l8 16M22 8l8 16h-18M30 24 40 8M19 4h8M38 4h6'/%3E%3C/svg%3E");
  opacity: .5; transform: scale(.9); transition: opacity .3s, transform .5s var(--ease), border-color .3s, background-color .3s;
}
.ub-slots i.is-on { opacity: 1; transform: scale(1); border-style: solid; border-color: var(--fg); background-color: var(--u-grid); animation: ub-pop .55s var(--ease); }
.ub-slots i.is-e::after { content: "⚡"; position: absolute; top: -.55rem; right: -.4rem; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--u-red); color: #fff; font-size: .7rem; line-height: 1; }
@keyframes ub-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

.ub-cfg-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background-color: var(--u-card); }
.ub-cfg-pics { position: relative; min-height: clamp(18rem, 30vw, 34rem); background-color: #fff; border-right: 1px solid var(--line); overflow: hidden; --u-grid: rgba(18,18,13,.05); --u-grid-strong: rgba(18,18,13,.1); }
.ub-cfg-pics img {
  mix-blend-mode: multiply;
  position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain;
  opacity: 0; transform: translateX(18%) rotate(4deg) scale(.9); clip-path: inset(0 0 0 100%);
  transition: opacity .5s var(--ease), transform .9s var(--ease), clip-path .8s var(--ease-in-out);
}
.ub-cfg-pics img.is-active { opacity: 1; transform: none; clip-path: inset(0 0 0 0); transition-delay: .15s; }
.ub-cfg-pics img.is-leaving { opacity: 0; transform: translateX(-18%) rotate(-4deg) scale(.9); clip-path: inset(0 100% 0 0); }
.ub-scan { position: absolute; top: 0; bottom: 0; left: -10%; width: 2px; background: var(--u-red); box-shadow: 0 0 18px 2px rgba(231, 33, 25, .45); opacity: 0; pointer-events: none; }
.ub-cfg-pics.is-scanning .ub-scan { animation: ub-scan .9s var(--ease-in-out); }
@keyframes ub-scan { 0% { left: -2%; opacity: 1; } 100% { left: 102%; opacity: 1; } }

.ub-cfg-out { display: grid; align-content: space-between; gap: 1.4rem; padding: clamp(1.2rem, 2vw, 2.2rem); }
.ub-cfg-kicker { margin: 0; display: flex; align-items: center; gap: .5rem; opacity: .6; }
.ub-cfg-name { margin: .5rem 0 0; font-size: clamp(1.8rem, 3.4vw, 4.2rem); line-height: .9; letter-spacing: -.02em; max-width: 100%; overflow-wrap: anywhere; }
.ub-cfg-name.is-swap { animation: ub-name .7s var(--ease); }
@keyframes ub-name { 0% { opacity: 0; transform: translateY(40%); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
.ub-cfg-why { margin: 1rem 0 0; max-width: 24em; opacity: .8; }
.ub-meter p { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; }
.ub-meter b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ub-meter small { opacity: .55; font-size: 1em; }
.ub-meter-bar { position: relative; height: 10px; border: 1px solid var(--fg); border-radius: 2px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--line) calc(10% - 1px) 10%); overflow: hidden; }
.ub-meter-bar i { position: absolute; inset: 0 auto 0 0; width: var(--load, 50%); background: var(--fg); transition: width .9s var(--ease); }
.ub-meter-bar i::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--u-red); }
.ub-cfg-link { margin-top: 0; }

/* ---------- 03 Timeline ---------- */
.ub-time { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ub-time-pin { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: clamp(1rem, 2vw, 2rem); padding: clamp(4rem, 6vw, 6rem) 0 clamp(2rem, 3vw, 3rem); overflow: hidden; }
.ub-time-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 0 var(--gutter); }
.ub-year { font-size: clamp(3.2rem, 11vw, 13rem); line-height: .8; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.ub-time-track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gutter); }
.ub-time-track::-webkit-scrollbar { display: none; }
.ub-time-list { display: flex; gap: clamp(1.2rem, 4vw, 5rem); width: max-content; margin: 0; list-style: none; }
.ub-ms { position: relative; width: clamp(16rem, 34vw, 38rem); scroll-snap-align: start; }
.ub-ms figure { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--u-card); border: 1px solid var(--line); }
.ub-ms img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--ease); }
.ub-ms:hover img { transform: scale(1); }
.ub-ms.is-win figure { background: #fff; }
.ub-ms.is-win img { object-fit: contain; padding: 6%; }
.ub-ms .display { margin: 1.1rem 0 .5rem; font-size: clamp(1.8rem, 3vw, 3.4rem); }
.ub-ms p:last-child { max-width: 24em; margin: 0; }
.ub-ms p:last-child .ub-live { margin-right: .5rem; }
.ub-time-list { position: relative; padding-bottom: 3rem; }
.ub-time-list::after { content: ""; position: absolute; left: 0; right: calc(-1 * var(--gutter)); bottom: 0; height: 22px; pointer-events: none;
  background:
    linear-gradient(var(--fg), var(--fg)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--fg) 0 1px, transparent 1px 80px) 0 0 / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 16px) 0 0 / 100% 7px no-repeat;
}
.ub-ms::before { content: ""; position: absolute; left: -5px; top: calc(100% + 3rem - 27px); width: 11px; height: 11px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 4px var(--bg); }
.ub-ms.is-win::before { background: var(--u-red); }
/* Gepind: verticale scroll stuurt de horizontale baan */
.ub-time.is-pinned { height: 320vh; }
.ub-time.is-pinned .ub-time-pin { position: sticky; top: 0; height: 100svh; align-content: center; grid-template-rows: auto auto; padding-top: clamp(5rem, 8vw, 7rem); }
.ub-time.is-pinned .ub-time-track { overflow: visible; scroll-snap-type: none; }
.ub-time.is-pinned .ub-time-list { transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
.ub-time.is-pinned .ub-ms { transition: opacity .6s var(--ease); opacity: .35; }
.ub-time.is-pinned .ub-ms.is-current { opacity: 1; }

/* ---------- 04 Dealers ---------- */
.ub-dealers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; padding: clamp(5rem, 9vw, 10rem) var(--gutter); }
.ub-dealers-copy > p.reveal { max-width: 30em; margin: 1.6rem 0 0; }
.ub-search { display: flex; align-items: center; gap: .7rem; max-width: 26rem; height: 3.4rem; margin-top: 2rem; padding: 0 1.1rem; border: 1px solid var(--fg); border-radius: 999px; background: var(--u-card); }
.ub-search-icon { width: 1rem; height: 1rem; border: 2px solid currentColor; border-radius: 50%; position: relative; flex: 0 0 auto; }
.ub-search-icon::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: currentColor; transform: rotate(45deg); }
.ub-search-text { white-space: nowrap; overflow: hidden; }
.ub-caret { width: 2px; height: 1.3em; background: var(--u-red); animation: ub-blink 1s steps(2, jump-none) infinite; }
.ub-map-note { margin: 1rem 0 0; opacity: .55; text-transform: none; }
.ub-map-wrap { position: relative; aspect-ratio: 400 / 420; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--u-card); overflow: hidden; }
.ub-map { width: 100%; height: 100%; }
.ub-map-tag { position: absolute; left: 1rem; bottom: 1rem; }
.ub-dot { fill: var(--fg); opacity: 0; transition: opacity .6s; }
.ub-map-wrap.is-in .ub-dot { opacity: .28; transition-delay: var(--d, 0s); }
.ub-dot.is-near { opacity: .9 !important; fill: var(--u-red); transition-delay: 0s !important; }
.ub-pin { opacity: 0; transform: translateY(-60px); transition: transform .8s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; transform-box: fill-box; }
.ub-map-wrap.is-in .ub-pin { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
.ub-pin-head { fill: var(--fg); }
.ub-pin-dot { fill: var(--bg); }
.ub-pin.is-hit .ub-pin-head { fill: var(--u-red); }
.ub-pin-ring { fill: none; stroke: var(--u-red); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ub-pin.is-hit .ub-pin-ring { animation: ub-ring 1.6s var(--ease) infinite; }
@keyframes ub-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }

/* ---------- 05 Screens ---------- */
.ub-screens { padding: 0 var(--gutter) clamp(5rem, 9vw, 10rem); }
.ub-screens-stage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 5rem); }
.ub-browser { grid-column: 1 / 9; grid-row: 1; width: 100%; --rx: 6deg; }
.ub-phones { grid-column: 9 / 13; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, 1rem); align-self: start; margin-top: 12%; }
.ub-phone { aspect-ratio: 780 / 1688; overflow: hidden; border-radius: clamp(10px, 1.2vw, 20px); border: 3px solid var(--fg); background: #fff; transform: translate3d(0, var(--py, 0), 0); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.ub-phone:nth-child(2) { margin-top: 30%; }
.ub-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ub-sheet { grid-column: 2 / 8; grid-row: 2; margin-top: clamp(1rem, 3vw, 3rem); }
.ub-sheet img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); }

/* ---------- 06 Field + quote ---------- */
.ub-field { position: relative; margin: 0 var(--gutter); min-height: clamp(26rem, 52vw, 56rem); border-radius: var(--radius); overflow: hidden; display: grid; align-items: end; isolation: isolate; color: var(--cream); cursor: crosshair; }
.ub-field-media { position: absolute; inset: 0; z-index: -2; }
.ub-field-media img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; transform: translate3d(0, var(--py, 0), 0); }
.ub-field::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 18, 13, 0) 25%, rgba(18, 18, 13, .85)); pointer-events: none; }
.ub-quote { margin: 0; padding: clamp(1.5rem, 4vw, 4.5rem); }
.ub-quote .display { margin: 0; max-width: 16em; font-size: clamp(1.7rem, 4.2vw, 5rem); line-height: .95; letter-spacing: -.01em; }
.ub-quote footer { margin-top: 1.2rem; font-family: var(--u-mono); text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.ub-cross { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.ub-field.is-tracking .ub-cross { opacity: 1; }
.ub-cross-x, .ub-cross-y { position: absolute; background: rgba(248, 239, 229, .7); }
.ub-cross-x { left: 0; right: 0; top: 0; height: 1px; transform: translate3d(0, var(--cy, 50%), 0); }
.ub-cross-y { top: 0; bottom: 0; left: 0; width: 1px; transform: translate3d(var(--cx, 50%), 0, 0); }
.ub-cross span { position: absolute; left: 0; top: 0; padding: .3rem .5rem; border-radius: 3px; background: var(--u-red); color: #fff; white-space: nowrap; transform: translate3d(calc(var(--cx, 50%) + 12px), calc(var(--cy, 50%) + 12px), 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ub-cfg { grid-template-columns: 1fr; }
  .ub-brief { grid-template-columns: 1fr; }
  .ub-block { max-width: 34rem; }
}
@media (max-width: 760px) {
  .ub-meta-dwg { display: none; }
  .ub-hero-stage { grid-template-columns: 1fr; }
  .ub-fig-product { width: 72%; margin: 0 auto; order: 2; }
  .ub-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ub-specs div { padding: 1rem 0 1rem 0; }
  .ub-specs div + div { padding-left: 0; }
  .ub-specs div:nth-child(odd) { padding-right: 1rem; }
  .ub-specs div:nth-child(even) { padding-left: 1rem; border-right: 0; }
  .ub-specs div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ub-cfg-stage { grid-template-columns: 1fr; }
  .ub-cfg-pics { min-height: 15rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .ub-dealers { grid-template-columns: 1fr; }
  .ub-time-head { flex-direction: column; align-items: flex-start; }
  .ub-ms { width: 78vw; }
  .ub-browser { grid-column: 1 / -1; grid-row: auto; }
  .ub-phones { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .ub-sheet { grid-column: 1 / -1; grid-row: auto; }
  .ub-quote .display { font-size: clamp(1.5rem, 7vw, 2.4rem); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ub-live, .ub-caret, .ub-reg { animation: none; }
  .ub-dim, .ub-frame-media, .ub-corner, .ub-reg circle, .ub-reg path { transition: none; }
  .ub-dim { transform: none; } .ub-dim span { opacity: 1; }
  .ub-frame-media { clip-path: none; } .ub-corner { transform: none; }
  .ub-reg circle, .ub-reg path { stroke-dashoffset: 0; }
  .ub-cfg-pics img, .ub-opt span, .ub-opt span::before, .ub-meter-bar i, .ub-slots i { transition-duration: .01ms; animation: none; }
  .ub-cfg-name.is-swap, .ub-cfg-pics.is-scanning .ub-scan, .ub-pin.is-hit .ub-pin-ring { animation: none; }
  .ub-pin, .ub-dot { transition: none; opacity: 1; transform: none; }
  .ub-dot { opacity: .28; }
  .ub-cross { display: none; }
  .ub-field { cursor: auto; }
}
.ub-meter p { flex-wrap: wrap; min-width: 0; } .ub-meter { min-width: 0; }