/* The complete production-style editor moves as one screen. Its photograph
   and native masks stay together, then settle flat for precise interaction. */
.rd-scroll-story {
  position: relative;
  width: 100%;
  max-width: 125rem;
  height: auto;
  margin-inline: auto;
  --reveal-progress: 0;
  --frame-progress: 1;
  --deconstruct-progress: 0;
  --scene-photo-opacity: 1;
  --scene-piece-opacity: 0;
  --opening-photo-opacity: 0;
  --model-spread: 1;
  --dock-top: 110px;
}
.rd-frame-rig { position: relative; width: 100%; }
.rd-frame-housing { display: none; }
.rd-segment-lift { display: none; pointer-events: none; }

.hp_hero_visual.hero-showcase {
  position: relative;
  display: block;
  width: 100%;
  max-width: 125rem;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border: 10px solid #090909;
  border-radius: 32px;
  background: #0a0a0a;
  box-shadow: 0 28px 70px #30243b33, 0 5px 10px #0002;
  color: #eee;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  scroll-margin-top: 110px;
}

.hero-showcase * { box-sizing: border-box; font-family: inherit; }
.hero-showcase button,
.hero-showcase a { -webkit-tap-highlight-color: transparent; }
.hero-showcase button { font: inherit; color: inherit; cursor: pointer; }
.hero-showcase button:disabled { cursor: default; }
.hero-showcase button:focus-visible,
.hero-showcase a:focus-visible { outline: 2px solid #c5a9ff; outline-offset: 3px; }
.hero-showcase svg { width: 17px; height: 17px; flex-shrink: 0; }

.rd-app {
  display: grid;
  grid-template-columns: minmax(170px, 18%) minmax(0, 1fr) minmax(215px, 22%);
  height: clamp(460px, calc(100svh - 190px), 760px);
  min-width: 0;
  background: #0a0a0a;
}

/* Give large displays a properly sized workspace while keeping the native
   editor panels at readable widths. Height must not depend on --dock-top. */
@media (min-width: 1800px) and (min-height: 1000px) {
  .section_hp-hero .container-large { max-width: min(88vw, 1880px); }
  .rd-scroll-story,
  .hp_hero_visual.hero-showcase { max-width: none; }
  .rd-app {
    grid-template-columns: clamp(215px, 15%, 270px) minmax(0, 1fr) clamp(260px, 19%, 330px);
    height: min(calc(100svh - 240px), 1040px);
  }
}
@media (min-width: 3000px) and (min-height: 1400px) {
  .section_hp-hero .container-large { max-width: min(80vw, 2400px); }
  .rd-app { height: min(calc(100svh - 320px), 1280px); }
}

.rd-left,
.rd-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #0d0d0d;
}
.rd-left { border-right: 1px solid #ffffff0d; }
.rd-right { border-left: 1px solid #ffffff0d; }
.rd-project {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  border-bottom: 1px solid #ffffff0d;
  font-size: 12px;
  font-weight: 500;
}
.rd-project > span { color: #888; font-size: 24px; font-weight: 300; }
.rd-project small { display: block; color: #777; font-size: 10px; font-weight: 400; }
.rd-settings {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 16px 12px;
  overflow: hidden;
}
.rd-field { display: grid; gap: 7px; }
.rd-label { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: #999; font-size: 10px; }
.rd-label > span { color: #737373; }
.rd-model,
.rd-select { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 9px 10px; border: 1px solid #ffffff06; border-radius: 8px; background: #171717; color: #bababa; font-size: 10px; white-space: nowrap; }
.rd-model small { margin-left: 4px; padding: 3px; border-radius: 3px; background: #242424; color: #999; font-size: 8px; }
.rd-base-thumb { display: block; width: 100%; height: auto; aspect-ratio: 2048 / 1373; object-fit: cover; border-radius: 8px; }
.rd-image-pair { position: relative; display: block; }
.rd-image-pair .rd-opening-thumb { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.rd-prompt { min-height: 76px; padding: 10px; border: 1px solid #ffffff06; border-radius: 8px; background: #171717; color: #aaa; font-size: 11px; line-height: 1.6; }
.rd-empty { display: flex; align-items: center; gap: 8px; padding: 11px 9px; border: 1px solid #ffffff05; border-radius: 8px; background: #161616; color: #858585; font-size: 10px; }
.rd-empty small { margin-left: auto; color: #777; font-size: 8px; }
.rd-setting-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 9px; }
.rd-setting-grid .rd-label { margin-bottom: 7px; }
.rd-advanced { display: flex; justify-content: space-between; margin-top: 8px; color: #888; font-size: 10px; }
.rd-render { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px; margin: 10px 12px 12px; padding: 10px 6px; border: 1px solid #ffffff08; border-radius: 8px; background: #222; color: #ccc; font-size: 11px; font-weight: 500; text-decoration: none; transition: background .18s ease, color .18s ease; }
.rd-render:hover { background: #7f56d9; color: #fff; }
.rd-render svg { width: 15px; height: 15px; }

.rd-editor { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0a0a0a; }
.rd-toolbar { position: absolute; z-index: 3; top: 14px; left: 50%; display: flex; align-items: center; gap: 3px; padding: 5px; transform: translateX(-50%); border: 1px solid #ffffff12; border-radius: 10px; background: #1b1b1bf2; box-shadow: 0 4px 14px #0003; white-space: nowrap; }
.rd-tool { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #b2b2b2; }
.rd-tool-active { background: #3a3a3a; color: #fff; }
button.rd-tool:hover:not(:disabled),
button.rd-fit:hover:not(:disabled) { background: #333; color: #fff; }
.rd-tool:disabled { opacity: .35; }
.rd-toolbar-divider { width: 1px; height: 19px; margin: 0 3px; background: #383838; }
.rd-fit { display: flex; align-items: center; justify-content: center; min-width: 45px; height: 30px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: #c7c7c7; font-size: 11px !important; font-variant-numeric: tabular-nums; }
.rd-stage { position: absolute; inset: 58px 0 76px; overflow: hidden; background: #0a0a0a; touch-action: pan-y; }
.rd-viewport { position: absolute; inset: 0; transform: none; transform-origin: 50% 50%; transition: transform .18s ease; }
.rd-scene-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; transform: none; object-fit: contain; object-position: center; pointer-events: none; user-select: none; }
.rd-opening-photo { z-index: 2; opacity: 0; background: #0a0a0a; }
.rd-segment-canvas { position: absolute; z-index: 1; inset: 0; touch-action: pan-y; }
.rd-segment-canvas canvas,
.hero-segment-canvas { display: block; width: 100%; height: 100%; outline: none; }
.rd-flat-overlay { position: absolute; z-index: 2; inset: 0; opacity: 0; pointer-events: none; background: #7f56d964; mask-mode: luminance; mask-size: contain; mask-position: center; mask-repeat: no-repeat; }
.hero-showcase[data-flat-selection=true] .rd-flat-overlay { opacity: 1; }
.rd-scene-hint { position: absolute; right: 12px; bottom: 62px; left: 12px; color: #999; font-size: 10px; text-align: center; pointer-events: none; }
.rd-version-strip { position: absolute; bottom: 13px; left: 50%; padding: 4px; transform: translateX(-50%); border: 1px solid #ffffff13; border-radius: 8px; background: #1a1a1a; }
.rd-version-strip img { display: block; width: 45px; height: 30px; object-fit: cover; border: 1px solid #c9b5fb; border-radius: 4px; }

.rd-panel-title { display: flex; align-items: center; flex-shrink: 0; min-height: 54px; padding: 14px 13px; border-bottom: 1px solid #ffffff05; color: #ddd; font-size: 12px; }
.rd-segmap { display: grid; flex-shrink: 0; gap: 7px; padding: 14px 12px; }
.rd-segments-label { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 6px; padding: 5px 13px 10px; color: #999; font-size: 11px; }
.rd-segment-actions { display: flex; align-items: center; gap: 4px; }
.rd-segment-actions button { display: flex; align-items: center; justify-content: center; min-width: 26px; height: 28px; padding: 4px; border: 0; border-radius: 5px; background: transparent; color: #aaa; font-size: 10px; }
.rd-segment-actions button:hover:not(:disabled) { background: #ffffff0d; color: #fff; }
.rd-segment-actions button:disabled { opacity: .35; }
.rd-segment-actions svg { width: 15px; height: 15px; }
.rd-segments { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; padding: 0 12px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.rd-segment { display: flex; flex: 0 0 auto; flex-direction: column; gap: 5px; width: 100%; min-width: 0; min-height: 62px; padding: 12px; border: 1px solid #ffffff0d; border-radius: 8px; background: #ffffff0d; color: #aaa !important; font-size: 12px !important; text-align: left; transition: border-color .16s ease, background .16s ease, opacity .2s ease; }
.rd-segments { position: relative; }
.rd-segment[hidden], .rd-search-empty[hidden] { display: none; }
.rd-segment-search { flex-shrink: 0; display: block; margin: 0 12px 12px; }
.hero-showcase .rd-segment-search input { width: 100%; min-width: 0; height: 38px; padding: 8px 11px; border: 1px solid #ffffff18; border-radius: 7px; background: #161616; color: #eee; font: inherit; font-size: 11px; outline: none; }
.hero-showcase .rd-segment-search input:focus-visible { border-color: #bca1f5; box-shadow: 0 0 0 2px #7f56d92b; }
.rd-segment-search input::placeholder { color: #8b8b8b; }
.rd-search-empty { padding: 12px; color: #aaa; font-size: 11px; }
.rd-segment-heading { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; font-size: 12px; line-height: 16px; }
.rd-segment-heading > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-segment-grip { flex-shrink: 0; color: #5f5f5f; font-size: 13px; }
.rd-segment-swatch { flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px; background: #7f56d9; }
.rd-segment-detail { padding-left: 23px; color: #818181; font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums; }
.rd-segment:hover:not(:disabled) { border-color: #444; color: #eee !important; }
.rd-segment[aria-pressed=true] { border-color: #555; background: #ffffff12; color: #eee !important; }
.rd-segment[data-revealed=false] { opacity: .55; }
.rd-segment[data-revealed=true],
.rd-segment[aria-pressed=true],
.rd-segment[data-hovered=true] { opacity: 1; }
.rd-segment[data-hovered=true] { border-color: #a38acb; box-shadow: inset 0 0 0 1px #7f56d92b; color: #eee !important; }
.rd-selection-note { display: flex; align-items: flex-start; flex-shrink: 0; gap: 7px; padding: 12px 14px; color: #858585; font-size: 10px; }
.rd-note-dot { flex-shrink: 0; width: 4px; height: 4px; margin-top: 6px; border-radius: 50%; background: #7f56d9; }

.rd-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-showcase:not([data-enhanced]) .rd-segment,
.hero-showcase:not([data-enhanced]) button.rd-tool,
.hero-showcase:not([data-enhanced]) button.rd-fit { pointer-events: none; opacity: .55; }

/* The controller opts into the hold only when motion is permitted. An explicit
   ?showcase-motion=on preview can enable it without changing device settings. */
/* The cinematic hold adds scroll distance during enhancement. Preserve the
   visitor's restored scroll position instead of anchoring a later section. */
html:has(.rd-scroll-story[data-scroll-hold=true]) { overflow-anchor: none; }
@media (min-width: 1000px) and (min-height: 720px) {
  .rd-scroll-story[data-scroll-hold=true] {
    /* Complete the breakdown, hold it for 30vh, then let the intact scene
       scroll away naturally as the next section enters. */
    height: calc(var(--frame-height, 650px) + 190vh);
    isolation: isolate;
  }
  /* Stage light remains behind the physical screen and moves with its approach. */
  .rd-scroll-story[data-scroll-hold=true]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: min(80vh, 850px);
    background: radial-gradient(ellipse at 50% 38%, #dac8ff9e, transparent 67%);
    mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
    transform: translateY(calc(var(--frame-progress) * 180px));
    opacity: calc(.2 + (1 - var(--frame-progress)) * .8);
    pointer-events: none;
  }
  .rd-scroll-story[data-scroll-hold=true] > .rd-frame-rig {
    --frame-depth: calc(1 - var(--frame-progress));
    position: sticky;
    top: var(--dock-top, 110px);
    transform-origin: 50% 48%;
    /* Do not add opacity/filter/isolation/overflow clipping here: it flattens the shell. */
    overflow: visible;
    transform-style: preserve-3d;
    transform: perspective(1400px)
      translate3d(var(--camera-x, 0px), var(--camera-y, 0px), var(--camera-z, 0px))
      rotateX(var(--camera-rx, 0deg))
      rotateY(var(--camera-ry, 0deg))
      rotateZ(var(--camera-rz, 0deg))
      scale(var(--camera-scale, 1));
  }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase {
    opacity: calc(1 - var(--deconstruct-progress) * .24);
    box-shadow:
      0 0 0 1px #ddd6e9,
      0 calc(24px + var(--frame-depth) * 70px) calc(65px + var(--frame-depth) * 60px) #30243b45,
      0 5px 10px #0002;
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-frame-housing {
    display: block;
    position: absolute;
    inset: 0;
    border: 1px solid #82798f;
    border-radius: 32px;
    background: linear-gradient(130deg, #554a62, #26212d 35%, #0e0c12 62%, #695970);
    transform: translateZ(calc(var(--housing-z) * var(--frame-depth)));
    backface-visibility: hidden;
    pointer-events: none;
  }
  .rd-frame-housing-back { --housing-z: -64px; }
  .rd-frame-housing-mid { --housing-z: -44px; }
  .rd-frame-housing-edge { --housing-z: -24px; }
  .rd-frame-housing-lip { --housing-z: -8px; }
  .rd-scroll-story[data-scroll-hold=true] > .rd-frame-rig[data-frame-ready=false] {
    will-change: transform;
  }
  .hero-showcase[data-frame-ready=false] {
    cursor: pointer;
  }
  .hero-showcase[data-frame-ready=false] .rd-app,
  .hero-showcase[data-frame-ready=false] .rd-app * { pointer-events: none !important; }
  /* No transform or transition at rest: native mask coordinates stay exact. */
  .rd-scroll-story[data-scroll-hold=true] > .rd-frame-rig[data-frame-ready=true] {
    transform: none;
    transform-style: flat;
  }
  .rd-frame-rig[data-frame-ready=true] .rd-frame-housing { display: none; }
  /* The first stop is the real, flat editor. Only further page scrolling
     reveals the source photograph as an exploded set of architectural cutouts. */
  .rd-scroll-story[data-scroll-hold=true] .rd-viewport { transition: none; }
  .rd-scroll-story[data-scroll-hold=true] .rd-scene-image,
  .rd-scroll-story[data-scroll-hold=true] .rd-segment-canvas,
  .rd-scroll-story[data-scroll-hold=true] .rd-flat-overlay {
    opacity: var(--scene-photo-opacity);
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-flat-overlay { opacity: 0; }
  .rd-scroll-story[data-scroll-hold=true] .rd-opening-photo,
  .rd-scroll-story[data-scroll-hold=true] .rd-opening-thumb { opacity: var(--opening-photo-opacity); }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase[data-opening-active=true] .rd-segment-canvas,
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase[data-opening-active=true] .rd-flat-overlay { visibility: hidden; }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase[data-flat-selection=true] .rd-flat-overlay {
    opacity: var(--scene-photo-opacity);
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-left,
  .rd-scroll-story[data-scroll-hold=true] .rd-right,
  .rd-scroll-story[data-scroll-hold=true] .rd-toolbar,
  .rd-scroll-story[data-scroll-hold=true] .rd-version-strip {
    opacity: calc(1 - var(--deconstruct-progress) * .86);
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 54% 62%, #3b342e 0%, #211d25 42%, #0a0a0a 82%);
    opacity: var(--deconstruct-progress);
    pointer-events: none;
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-frame-rig[data-deconstruct-active=true] .rd-segment-lift[data-ready=true][data-positioned=true] {
    display: block;
    position: absolute;
    transform-style: preserve-3d;
  }
  .rd-lift-piece {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--scene-piece-opacity);
    transform: translate3d(calc(var(--piece-lift) * var(--piece-x) * var(--model-spread)), calc(var(--piece-lift) * var(--piece-y) * var(--model-spread)), calc(var(--piece-lift) * var(--piece-z) * var(--model-spread)))
      rotateX(calc(var(--piece-lift) * var(--piece-rx))) rotateY(calc(var(--piece-lift) * var(--piece-ry))) rotateZ(calc(var(--piece-lift) * var(--piece-rz)));
    --piece-rx: 0deg; --piece-ry: 0deg; --piece-rz: 0deg;
  }
  .rd-lift-piece.is-roof { --piece-lift: var(--lift-roof, 0); --piece-x: 0px; --piece-y: -86px; --piece-z: 560px; --piece-rx: -6deg; --piece-ry: 4deg; }
  .rd-lift-piece.is-balcony { --piece-lift: var(--lift-balcony, 0); --piece-x: 10px; --piece-y: -25px; --piece-z: 365px; --piece-rx: -6deg; --piece-ry: 4deg; }
  .rd-lift-piece.is-glazing { --piece-lift: var(--lift-glazing, 0); --piece-x: 45px; --piece-y: 32px; --piece-z: 320px; --piece-ry: 4deg; }
  .rd-lift-piece.is-garage { --piece-lift: var(--lift-garage, 0); --piece-x: -25px; --piece-y: 108px; --piece-z: 255px; --piece-rx: 4deg; --piece-ry: 4deg; }
  .rd-lift-piece.is-retaining-wall { --piece-lift: var(--lift-retaining-wall, 0); --piece-x: -95px; --piece-y: 75px; --piece-z: 160px; --piece-ry: 14deg; }
  .rd-lift-piece.is-stair-wall { --piece-lift: var(--lift-stair-wall, 0); --piece-x: 85px; --piece-y: 78px; --piece-z: 165px; --piece-ry: -8deg; }
  .rd-lift-piece.is-forecourt { --piece-lift: var(--lift-forecourt, 0); --piece-x: 0px; --piece-y: 55px; --piece-z: 0px; --piece-rx: -2deg; }
  .rd-lift-piece.is-front-louvers { --piece-lift: var(--lift-surface-076, 0); --piece-x: -16px; --piece-y: -74px; --piece-z: 400px; --piece-ry: 4deg; }
  .rd-lift-piece.is-concrete-pier { --piece-lift: var(--lift-surface-089, 0); --piece-x: -10px; --piece-y: 58px; --piece-z: 245px; --piece-ry: 4deg; }
  .rd-lift-piece.is-corner-louvers { --piece-lift: var(--lift-surface-090, 0); --piece-x: -38px; --piece-y: -55px; --piece-z: 360px; --piece-ry: 10deg; }
  .rd-lift-piece.is-wing-roof { --piece-lift: var(--lift-surface-094, 0); --piece-x: 45px; --piece-y: -5px; --piece-z: 345px; --piece-rx: -6deg; --piece-ry: 4deg; }
  .rd-lift-piece.is-entry { --piece-lift: var(--lift-surface-099, 0); --piece-x: 45px; --piece-y: 90px; --piece-z: 230px; --piece-ry: 4deg; }
  /* Rotate each cutout around its recorded foreground centroid. */
  .rd-lift-piece.is-roof { transform-origin: 57.42042% 38.999835%; }
  .rd-lift-piece.is-balcony { transform-origin: 63.999498% 51.570733%; }
  .rd-lift-piece.is-glazing { transform-origin: 62.499369% 60.821568%; }
  .rd-lift-piece.is-garage { transform-origin: 39.885914% 78.986518%; }
  .rd-lift-piece.is-retaining-wall { transform-origin: 6.354189% 83.992331%; }
  .rd-lift-piece.is-stair-wall { transform-origin: 84.869171% 75.310929%; }
  .rd-lift-piece.is-forecourt { transform-origin: 53.794947% 93.560388%; }
  .rd-lift-piece.is-front-louvers { transform-origin: 58.737297% 44.39593%; }
  .rd-lift-piece.is-concrete-pier { transform-origin: 47.64835% 59.478491%; }
  .rd-lift-piece.is-corner-louvers { transform-origin: 46.92824% 45.063835%; }
  .rd-lift-piece.is-wing-roof { transform-origin: 86.728262% 58.811801%; }
  .rd-lift-piece.is-entry { transform-origin: 74.586282% 78.760572%; }
  .rd-lift-piece.is-upper-lintel { --piece-lift: var(--lift-surface-026, 0); --piece-x: 45px; --piece-y: -86px; --piece-z: 455px; --piece-rx: -6deg; --piece-ry: 4deg; transform-origin: 65.656063% 42.34401%; }
  .rd-lift-piece.is-upper-middle-window { --piece-lift: var(--lift-surface-039, 0); --piece-x: 4px; --piece-y: -82px; --piece-z: 410px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 53.327866% 44.139148%; }
  .rd-lift-piece.is-upper-right-window { --piece-lift: var(--lift-surface-052, 0); --piece-x: 45px; --piece-y: -66px; --piece-z: 390px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 65.645057% 46.216195%; }
  .rd-lift-piece.is-garage-left-pier { --piece-lift: var(--lift-surface-065, 0); --piece-x: -65px; --piece-y: 110px; --piece-z: 270px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 14.400019% 78.36867%; }
  .rd-lift-piece.is-garage-right-pier { --piece-lift: var(--lift-surface-048, 0); --piece-x: 5px; --piece-y: 110px; --piece-z: 270px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 67.947906% 78.620294%; }
  .rd-lift-piece.is-stair-recess { --piece-lift: var(--lift-surface-069, 0); --piece-x: 90px; --piece-y: 115px; --piece-z: 210px; --piece-rx: 0deg; --piece-ry: -8deg; transform-origin: 90.38548% 82.248605%; }
  .rd-lift-piece.is-wing-louvers { --piece-lift: var(--lift-surface-070, 0); --piece-x: 60px; --piece-y: 48px; --piece-z: 290px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 83.179917% 64.339459%; }
  .rd-lift-piece.is-boundary-wall { --piece-lift: var(--lift-surface-098, 0); --piece-x: 115px; --piece-y: 95px; --piece-z: 125px; --piece-rx: 0deg; --piece-ry: -8deg; transform-origin: 96.623911% 82.241527%; }
  .rd-lift-piece.is-west-facade { --piece-lift: var(--lift-surface-081, 0); --piece-x: -80px; --piece-y: 45px; --piece-z: 245px; --piece-rx: 0deg; --piece-ry: 10deg; transform-origin: 40.573952% 59.27307%; }
  .rd-lift-piece.is-west-upper-panel { --piece-lift: var(--lift-surface-022, 0); --piece-x: -75px; --piece-y: -22px; --piece-z: 325px; --piece-rx: 0deg; --piece-ry: 10deg; transform-origin: 39.579436% 52.277889%; }
  .rd-lift-piece.is-west-steps { --piece-lift: var(--lift-surface-035, 0); --piece-x: -95px; --piece-y: 88px; --piece-z: 170px; --piece-rx: 0deg; --piece-ry: 10deg; transform-origin: 32.823599% 63.955293%; }
  .rd-lift-piece.is-parapet-end { --piece-lift: var(--lift-surface-023, 0); --piece-x: 115px; --piece-y: 70px; --piece-z: 180px; --piece-rx: -6deg; --piece-ry: -8deg; transform-origin: 98.440057% 72.906805%; }
  .rd-cutout-skin {
    position: absolute; inset: 0;
    filter: drop-shadow(0 1px 0 #fff0dcaa) drop-shadow(0 16px 12px #14101c66);
    pointer-events: none;
  }
  .rd-lift-photo {
    position: absolute;
    inset: 0;
    background: url('../images/hero-depth/demo-house.webp') center / 100% 100% no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-mode: luminance;
    pointer-events: none;
  }
  .rd-lift-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(128deg, #fff2da22, transparent 38%, #57436514); }
  /* Explicitly opted-in material study. These procedural finishes are visual
     mockups; replace them with verified same-view Rendero outputs for launch.
     Effects stay inside each masked leaf, preserving the shared 3D scene. */
  [data-material-study=true] :is(.is-roof, .is-balcony, .is-wing-roof, .is-concrete-pier) .rd-lift-photo::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(4deg, transparent 0 4px, #69563a24 4.5px, transparent 5px 11px),
      linear-gradient(#d7cdb9, #d7cdb9),
      url('../images/hero-depth/demo-house.webp');
    background-size: 100% 100%;
    background-blend-mode: soft-light, color, normal;
    filter: brightness(1.52) contrast(.8);
    opacity: var(--material-stone, 0);
  }
  [data-material-study=true] :is(.is-front-louvers, .is-corner-louvers, .is-wing-louvers, .is-garage) .rd-lift-photo::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(90deg, #160f0966 0 1px, transparent 1px 5px, #e7cfa629 6px, transparent 7px 12px),
      linear-gradient(#655447cc, #655447cc),
      url('../images/hero-depth/demo-house.webp');
    background-size: 100% 100%;
    background-blend-mode: soft-light, multiply, normal;
    filter: saturate(.45) brightness(.95);
    opacity: var(--material-timber, 0);
  }
  [data-material-study=true] .is-garage .rd-lift-photo::before {
    opacity: var(--material-garage, 0);
  }
  /* Drawing annotations are explicitly illustrative. Dimensions stay on the
     original piece; the connecting gaps are never labelled as physical sizes. */
  .rd-model-datum {
    position: absolute; left: -9%; top: 77%; width: 118%; height: 45%;
    border: 1px solid #c8c0b466;
    background: linear-gradient(#ded3bd30 1px, transparent 1px), linear-gradient(90deg, #ded3bd30 1px, transparent 1px);
    background-size: 12.5% 25%;
    transform-origin: 50% 0;
    transform: translate3d(0, calc(var(--deconstruct-progress) * 55px * var(--model-spread)), -34px) rotateX(52deg);
    opacity: calc(var(--deconstruct-progress) * .5);
    pointer-events: none;
  }
  .rd-assembly-link {
    display: none; position: absolute; width: 1px;
    transform-origin: 50% 0;
    background: #c9bdd7;
    opacity: calc(var(--annotation-progress, 0) * .62);
    pointer-events: none;
  }
  .rd-assembly-link[data-connection-ready=true] { display: block; }
  .rd-assembly-link::before,
  .rd-assembly-link::after {
    content: ""; position: absolute; left: -1px; width: 3px; height: 3px;
    border-radius: 50%; background: #eee3ce;
  }
  .rd-assembly-link::before { top: -1px; }
  .rd-assembly-link::after { bottom: -1px; }
  .rd-piece-dimensions {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    overflow: visible; opacity: var(--annotation-progress, 0); pointer-events: none;
  }
  .rd-piece-dimensions path { fill: none; vector-effect: non-scaling-stroke; }
  .rd-dimension-extension { stroke: #e0d4baaa; stroke-width: .6; }
  .rd-dimension-line { stroke: #eee2c8; stroke-width: .8; }
  .rd-dimension-tick { stroke: #f4e6c8; stroke-width: 1; }
  .rd-dimension-label text {
    fill: #f4ead8; font: 300 16px "Segoe UI", Arial, sans-serif;
    font-variant-numeric: tabular-nums; letter-spacing: .5px;
    stroke: none;
    /* Local Y stays below the dimension line even when its label is rotated. */
    transform: translateY(calc(.5em + 8px));
  }
  .is-roof .rd-dimension-label text { fill: #645b6d; }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase::before,
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase::after {
    content: "";
    position: absolute;
    z-index: 5;
    pointer-events: none;
  }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase::before {
    inset: 0;
    border-radius: 20px;
    box-shadow: inset 1px 1px 0 #e5d4ff80, inset -1px -1px 0 #b29ac03b;
    background: radial-gradient(ellipse at 50% 0%, #d4b4ff18, transparent 65%);
    opacity: var(--frame-depth);
  }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase::after {
    inset: -45%;
    background: linear-gradient(180deg, transparent 35%, #f9efff18 48%, #ffffff06 54%, transparent 65%);
    transform: translateY(calc(40% - var(--frame-progress) * 100%));
    opacity: calc(var(--frame-depth) * .65);
  }
}

@media (min-width: 3000px) and (min-height: 1400px) {
  /* The taller workspace places the roof annotation over the dark tablet. */
  .is-roof .rd-dimension-label text { fill: #f4ead8; }
}

@media (min-width: 1000px) and (max-width: 1300px) {
  .rd-scroll-story { --model-spread: .76; }
  .rd-piece-dimensions [data-dimension-priority="2"] { display: none; }
  .rd-dimension-label text { font-size: 20px; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .rd-scroll-story { --model-spread: .72; }
}
@media (min-width: 1000px) and (max-width: 1099px) {
  .rd-scroll-story { --model-spread: .64; }
}

@media (max-width: 1099px) and (min-width: 768px) {
  .rd-app { grid-template-columns: 155px minmax(0, 1fr) 200px; }
  .rd-settings { gap: 11px; padding: 12px 10px; }
  .rd-reference,
  .rd-advanced { display: none; }
  .rd-empty { gap: 5px; font-size: 9px; }
  .rd-empty svg { width: 14px; height: 14px; }
  .rd-setting-grid { gap: 8px; }
  .rd-segmap { padding: 12px 10px; }
  .rd-segment-heading { gap: 6px; }
  .rd-segment-detail { padding-left: 20px; }
}

@media (max-width: 767px) {
  .hp_hero_visual.hero-showcase { border-width: 6px; border-radius: 20px; }
  .hero-showcase button { min-height: 44px; }
  .rd-app { display: block; height: auto; }
  .rd-left { display: none; }
  .rd-editor { height: calc(max(260px, 75vw) + 104px); }
  .rd-stage { inset: 66px 0 38px; }
  .rd-toolbar { top: 7px; gap: 3px; padding: 3px; border-radius: 8px; }
  .rd-tool,
  .rd-fit { height: 44px; }
  .rd-tool { width: 44px; }
  .rd-fit { min-width: 44px; font-size: 10px !important; }
  .rd-scene-hint { bottom: 13px; left: 52px; right: 9px; color: #a1a1a1; font-size: 9px; line-height: 1.4; }
  .rd-version-strip { bottom: 7px; left: 11px; padding: 3px; transform: none; border-radius: 6px; }
  .rd-version-strip img { width: 28px; height: 19px; border-radius: 3px; }
  .rd-right { padding: 11px; border-top: 1px solid #ffffff12; border-left: 0; }
  .rd-panel-title,
  .rd-segmap,
  .rd-selection-note,
  .rd-right > .rd-render { display: none; }
  .rd-segments-label { padding: 0 2px 8px; font-size: 10px; }
  .rd-segment-actions { gap: 3px; }
  .rd-segment-actions button { min-width: 44px; height: 44px; }
  .rd-segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: initial; align-content: start; gap: 7px; max-height: 245px; padding: 0 3px 0 0; overflow: auto; }
  .rd-segment-search { margin: 0 0 10px; }
  .hero-showcase .rd-segment-search input { height: 44px; font-size: 12px; }
  .rd-search-empty { grid-column: 1 / -1; }
  .rd-segment { gap: 2px; min-height: 44px; padding: 7px 8px; font-size: 11px !important; }
  .rd-segment-heading { gap: 6px; font-size: 11px; line-height: 14px; }
  .rd-segment-grip { display: none; }
  .rd-segment-swatch { width: 12px; height: 12px; border-radius: 3px; }
  .rd-segment-detail { padding-left: 18px; font-size: 9px; line-height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-showcase:not([data-motion-preference=full]) * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}