/* Clear View - Residential tint section (staging). Scoped to #residential; nav/before/after only style the standalone preview. */


#residential{--hot:#ff6a2b;--cool:#49c8ff;--cy:#3fe6f0;--mono:"JB Mono",ui-monospace,Menlo,monospace;--sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  position:relative;height:100vh;height:100svh;overflow:hidden;background:#07080a;color:#fff;font-family:var(--sans)}
#residential .rs-stage{position:absolute;left:0;top:0;width:100vw;height:56.25vw;overflow:hidden}
#residential .rs-room,#residential .rs-ext{position:absolute;inset:0;transform-origin:30% 50%;will-change:transform,opacity,filter}
#residential .rs-img,#residential .rs-cv,#residential .rs-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#residential .rs-img{object-fit:fill}
#rs-s2,#rs-cv,#residential .rs-ext{opacity:0}
#residential .rs-cv{opacity:0;pointer-events:none}
#residential .rs-fx{pointer-events:none;overflow:visible}
#rs-films .cool,#rs-films .hl{mix-blend-mode:screen}
#residential.rs-dbg .rs-copy,#residential.rs-dbg .rs-cv,#residential.rs-dbg .rs-scan,#residential.rs-dbg .rs-hint{visibility:hidden}
#rs-maskdbg polygon{fill:rgba(0,240,255,.14);stroke:#00f6ff;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#rs-maskdbg text{font:600 15px "JB Mono",monospace;fill:#fff;paint-order:stroke;stroke:#000;stroke-width:3px}

/* thermal scanlines + sweep bar */
#residential .rs-scan{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,rgba(0,0,0,0) 1px 3px);mix-blend-mode:multiply}
#rs-scanbar{position:absolute;left:0;right:0;top:0;height:18%;background:linear-gradient(rgba(255,170,90,0),rgba(255,170,90,.10) 70%,rgba(255,220,170,.22) 98%,rgba(255,170,90,0));mix-blend-mode:screen;will-change:transform}
#residential .rs-flash{position:absolute;inset:0;background:#fff7ec;opacity:0;pointer-events:none}
#residential .rs-vign{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,8,0) 52%,rgba(5,6,8,.55) 100%),linear-gradient(0deg,rgba(5,6,8,.78) 0,rgba(5,6,8,.25) 30%,rgba(5,6,8,0) 48%),linear-gradient(180deg,rgba(5,6,8,.55) 0,rgba(5,6,8,0) 16%)}

/* HUD */
#residential .rs-hud{position:absolute;inset:86px 40px 40px 40px;pointer-events:none;opacity:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#ffd9bf}
.rs-hud .br{position:absolute;width:26px;height:26px;border:1.5px solid currentColor;opacity:.75}
.rs-hud .tl{left:0;top:0;border-right:0;border-bottom:0}.rs-hud .tr{right:0;top:0;border-left:0;border-bottom:0}
.rs-hud .bl{left:0;bottom:0;border-right:0;border-top:0}.rs-hud .brr{right:0;bottom:0;border-left:0;border-top:0}
.rs-hud-top{position:absolute;right:40px;top:6px;display:flex;align-items:center;gap:9px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.rs-hud-top .rec{width:7px;height:7px;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot)}
.rs-hud-top .sep{opacity:.5}
.rs-legend{position:absolute;right:40px;top:30px;display:flex;align-items:center;gap:10px;font-size:9px;opacity:.9}
.rs-legend .bar{position:relative;width:180px;height:6px;border-radius:3px;background:linear-gradient(90deg,#062a66,#1f6fd1 14%,#5fc8ff 28%,#1a0604 36%,#5a0a06 48%,#b8200a 62%,#f2600c 76%,#ffc53a 89%,#fff7dc);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.rs-legend .bar b{position:absolute;top:-5px;left:0;width:2px;height:16px;margin-left:-1px;background:#fff;box-shadow:0 0 8px #fff}

/* copy */
#residential .rs-copy{position:absolute;right:max(64px,5vw);bottom:max(64px,9vh);width:min(600px,40vw);opacity:0;pointer-events:none;will-change:transform,opacity}
#residential .rs-copy.on{pointer-events:auto}
#residential .rs-eyebrow{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ffc59e}
#rs-c1 .rs-eyebrow,#rs-c2 .rs-eyebrow{color:#9fe4ff}
#rs-c3 .rs-eyebrow{color:#ffd7a8}
#residential .rs-copy h2{margin:0;font-weight:800;font-size:clamp(34px,4.1vw,74px);line-height:.98;letter-spacing:-.045em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.45)}
#residential .rs-sub{margin:16px 0 0;font-size:clamp(15px,1.15vw,19px);line-height:1.4;font-weight:500;opacity:.86;max-width:30em;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.rs-meters{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;max-width:440px}
.rs-meters li{display:grid;grid-template-columns:130px 1fr 18px;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.rs-meters .m{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.rs-meters .m b{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#1f6fd1,#49c8ff 70%,#bdf0ff);box-shadow:0 0 12px rgba(73,200,255,.6)}
.rs-meters .ck{width:16px;height:16px;fill:none;stroke:#7fdcff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16}
.rs-bul{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:auto auto;gap:9px 26px;width:max-content;max-width:100%}
.rs-bul li{display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.05vw,17px);font-weight:600}
.rs-bul li::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffd7a8;box-shadow:0 0 10px rgba(255,200,140,.7)}
.rs-cta-row{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.rs-cta{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;background:#fff;color:#0a0b0c !important;font-weight:800;font-size:16px;letter-spacing:-.01em;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.rs-cta::after{content:"→";font-weight:600}
.rs-tel{font-family:var(--mono);font-size:13px;letter-spacing:.12em;opacity:.9}

/* step rail */
#residential .rs-steps{position:absolute;left:40px;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:grid;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:0}
.rs-steps li{display:flex;align-items:center;gap:10px;opacity:.42;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.rs-steps li i{width:16px;height:2px;background:currentColor}
.rs-steps li.on{opacity:1}.rs-steps li.on i{width:30px}
#residential .rs-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;opacity:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.rs-hint i{width:1px;height:26px;background:linear-gradient(#fff,transparent)}

/* portrait / mobile */
@media (max-aspect-ratio:1/1){
  #residential .rs-copy{left:20px;right:20px;bottom:calc(74px + env(safe-area-inset-bottom));width:auto}
  #residential .rs-copy h2{font-size:clamp(30px,8.6vw,44px)}
  #residential .rs-sub{font-size:15px}
  #residential .rs-vign{background:linear-gradient(0deg,rgba(5,6,8,.94) 0,rgba(5,6,8,.6) 40%,rgba(5,6,8,0) 64%),linear-gradient(180deg,rgba(5,6,8,.72) 0,rgba(5,6,8,.35) 17%,rgba(5,6,8,0) 26%)}
  #residential .rs-hud{inset:66px 12px 12px 12px;font-size:12px;letter-spacing:.12em}
  .rs-hud .br{width:18px;height:18px}
  .rs-hud-top{left:14px;right:auto;top:8px;font-weight:500}
  .rs-hud-top .sep{display:none}
  .rs-hud-top #rs-hud-sub{display:block}
  .rs-hud-top{flex-wrap:wrap;max-width:calc(100% - 28px);row-gap:3px}
  .rs-legend{left:14px;right:auto;top:52px;font-size:11px;gap:9px}.rs-legend .bar{width:170px;height:7px}
  #residential .rs-steps{display:flex;top:auto;left:20px;right:20px;bottom:calc(24px + env(safe-area-inset-bottom));transform:none;justify-content:space-between;font-size:11.5px;letter-spacing:.14em;gap:0}
  .rs-steps li{flex-direction:column;align-items:flex-start;gap:6px;opacity:.5}
  .rs-steps li i{width:22px}.rs-steps li.on i{width:22px;background:#3fe6f0}
  #residential .rs-hint{display:none}
  .rs-meters li{grid-template-columns:118px 1fr 16px;font-size:11.5px}
  .rs-bul{grid-template-columns:1fr 1fr;width:auto}
}
@media (prefers-reduced-motion:reduce){#rs-scanbar{display:none}}

/* ---- R3 stage 2: the room stage is moved by a JS matrix (push toward the window), origin top-left ---- */
#residential .rs-stage{transform-origin:0 0;will-change:transform}
#residential .rs-scan{z-index:auto}