/* p4 - property intelligence (film ST2), round 3 focus stage: one solid dark glass pane at a time - search, photos scored
   by condition, comps map, then the Property Intelligence Report lands with a flash and a shockwave.
   Placed by p4.js in a 640x520 (wide) or 358x392 (phone) design box scaled to fit .pvis. */
.p4s{position:absolute;inset:0;pointer-events:none;overflow:hidden;--chrome-n:linear-gradient(180deg,#ffffff 0,#ffffff 55%,#dde4ee 100%)}
.p4s .st{position:absolute;left:0;top:0;transform-origin:0 0}
.p4s .pw{position:absolute;transform-origin:50% 50%}
.p4s .pn.glass{position:absolute;inset:0;padding:0;background:rgba(8,10,14,.88);border:1px solid rgba(47,107,255,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.p4s .pn.glass.on{border-color:rgba(47,107,255,.75);box-shadow:0 0 0 1px rgba(47,107,255,.35),0 0 34px rgba(47,107,255,.3),0 24px 70px rgba(0,0,0,.55)}
.p4s .glw{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.p4s .gl{position:absolute;top:-20%;bottom:-20%;left:0;width:34%;transform:translateX(-140%) skewX(-14deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.075) 50%,rgba(255,255,255,0))}
.p4s .lab{position:absolute;white-space:nowrap;font-family:var(--tech);font-size:12.5px;letter-spacing:.2em;color:rgba(225,229,229,.85)}

/* 1. search */
.p4s .q{position:absolute;left:24px;top:0;bottom:0;display:flex;align-items:center;font-family:var(--display);font-weight:600;
  font-size:24px;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.p4s .q i{display:inline-block;width:2px;height:1.05em;margin-left:2px;background:#fff;opacity:0}
.p4s .go{position:absolute;right:18px;top:50%;height:46px;margin-top:-23px;padding:0 24px;border-radius:2px;background:var(--blue);color:#fff;
  font-family:var(--tech);font-weight:600;font-size:16px;letter-spacing:.14em;line-height:46px}

/* 2. the six photos */
.p4s .grid{position:absolute;perspective:900px;perspective-origin:50% 40%}
.p4s .tile{position:absolute;left:0;top:0;transform-style:preserve-3d;opacity:0}
.p4s .fl{position:absolute;inset:0;transform-style:preserve-3d}
.p4s .fr,.p4s .bk{position:absolute;inset:0;border-radius:2px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.p4s .fr{box-shadow:0 0 0 1px rgba(225,229,229,.3),0 10px 26px rgba(0,0,0,.5);background:#111}
.p4s .fr img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.p4s .fr img.g{filter:grayscale(1) contrast(1.06) brightness(.92)}
.p4s .chip{position:absolute;right:8px;bottom:8px;min-width:40px;height:28px;padding:0 8px;border-radius:2px;background:rgba(8,10,14,.92);
  box-shadow:0 0 0 1px rgba(225,229,229,.55);font-family:var(--tech);font-weight:600;font-size:16px;letter-spacing:.06em;line-height:28px;
  text-align:center;color:#fff;opacity:0;transition:box-shadow .5s}
.p4s .chip.on{box-shadow:0 0 0 1.5px var(--blue),0 0 14px rgba(90,140,255,.6)}
.p4s .bk{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(8,10,14,.96);box-shadow:inset 0 0 0 1px rgba(225,229,229,.55),0 10px 26px rgba(0,0,0,.5);transition:box-shadow .25s}
.p4s .bk.on{box-shadow:inset 0 0 0 2px var(--blue),inset 0 0 30px rgba(47,107,255,.35),0 0 26px rgba(47,107,255,.5)}
.p4s .bk b{font-size:60px;line-height:1;color:#fff}
.p4s .bk span{position:static}
.p4s .bk.on span{color:var(--blue-t)}
.p4s .plane{position:absolute;top:-12px;width:3px;margin-left:-1.5px;border-radius:2px;background:#9DB9FF;opacity:0;z-index:5;
  box-shadow:0 0 0 1px var(--blue),0 0 18px 4px rgba(47,107,255,.85),0 0 46px 10px rgba(47,107,255,.35)}
.p4s .plane::before{content:"";position:absolute;right:2px;top:0;bottom:0;width:70px;background:linear-gradient(90deg,rgba(47,107,255,0),rgba(47,107,255,.22))}

/* 3. comps map */
.p4s .map svg{position:absolute;left:0;top:0;overflow:visible}
.p4s .map .sts path{stroke:rgba(225,229,229,.1);stroke-width:8;fill:none}
.p4s .map .sts path.h{stroke:rgba(225,229,229,.26);stroke-width:1}
.p4s .map .lk path{stroke:rgba(245,247,247,.85);stroke-width:1.6;fill:none;filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}
.p4s .mk{left:24px;top:22px}
.p4s .pin{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 35% 30%,#fff 0,#dfe3e6 25%,#7d8389 70%,#2a2d31 100%);box-shadow:0 0 14px 3px rgba(255,255,255,.5)}
.p4s .subj{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--blue);opacity:0;
  box-shadow:0 0 0 4px rgba(47,107,255,.3),0 0 26px 6px rgba(90,140,255,.85)}
.p4s .subj i{position:absolute;inset:-2px;border-radius:50%;border:1.5px solid rgba(90,140,255,.9);opacity:0}
.p4s .mv{position:absolute;right:24px;bottom:20px;text-align:right}
.p4s .mv .num{display:block;font-size:44px;line-height:1.05;color:#fff}
.p4s .mv .lab{position:static;display:block;margin-top:6px}

/* 4. the report */
.p4s .rp{position:absolute;inset:0;padding:22px 26px}
.p4s .tt{overflow:hidden;padding-bottom:2px;font-family:var(--display);font-weight:600;font-size:30px;line-height:1.16;letter-spacing:-.02em;margin:0 0 12px}
.p4s .tt .w,.p4s .tt .ch{display:inline-block}
.p4s .rr{position:relative;height:98px}
.p4s .rr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(225,229,229,.3);transform-origin:0 0;transform:scaleX(var(--d,0))}
.p4s .rr.on::before{background:var(--blue);box-shadow:0 0 10px rgba(47,107,255,.9)}
.p4s .rr .lab{left:0;top:14px}
.p4s .rr.on > .lab:first-child{color:var(--blue-t)}
.p4s .rr .rs{left:auto;right:0;color:rgba(225,229,229,.7)}
.p4s .rr .rv{position:absolute;left:0;top:38px;font-size:40px;line-height:1.08;white-space:nowrap;color:#fff}
.p4s .pl{position:absolute;left:10px;right:10px;height:2px;opacity:0;background:linear-gradient(90deg,rgba(47,107,255,0),#cfe0ff 50%,rgba(47,107,255,0));
  box-shadow:0 0 12px rgba(90,140,255,.9)}

/* the landing payoff */
.p4s .lf{position:absolute;width:420px;height:420px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(143,176,255,.6) 10%,rgba(47,107,255,.32) 30%,rgba(47,107,255,0) 60%)}
.p4s .sw{position:absolute;width:300px;height:300px;border-radius:50%;opacity:0;pointer-events:none;border:2px solid #8fb0ff;
  box-shadow:0 0 24px rgba(47,107,255,.9),inset 0 0 18px rgba(90,140,255,.55)}

/* phone: the same story, one pane filling the 358 x 392 gap */
.p4s.ph .lab{font-size:12px;letter-spacing:.14em}
.p4s.ph .q{left:16px;top:14px;bottom:auto;height:40px;font-size:18px}
.p4s.ph .go{right:14px;top:auto;bottom:14px;margin-top:0;height:40px;line-height:40px;padding:0 20px;font-size:14px}
.p4s.ph .chip{right:5px;bottom:5px;min-width:32px;height:24px;font-size:14px;line-height:24px;padding:0 5px}
.p4s.ph .bk b{font-size:44px}
.p4s.ph .mk{left:16px;top:16px}
.p4s.ph .mv{right:16px;bottom:16px}
.p4s.ph .mv .num{font-size:36px}
.p4s.ph .rp{padding:16px 16px}
.p4s.ph .tt{font-size:22px;margin-bottom:8px}
.p4s.ph .rr{height:78px}
.p4s.ph .rr .lab{top:10px}
.p4s.ph .rr .rv{top:30px;font-size:30px}
.p4s.ph .lf{width:300px;height:300px}
.p4s.ph .sw{width:220px;height:220px}