﻿/* Native overlapping pins. Every content channel is a function of scroll only. */
.ph-cctv .cc-scroll-scene { position:relative;margin:0;overflow:visible; }
.ph-cctv .cc-scroll-scene+.cc-scroll-scene { margin-top:-100vh; }
.ph-cctv .cc-sticky-stage { position:sticky;top:0;height:100vh;overflow:visible; }
.ph-cctv .cc-setpiece { height:100vh;min-height:0;width:100%;padding:0;overflow:visible;transform:translateY(var(--stage-shift,0px));background:rgb(11,12,9); }
/* Wide windows: an incoming scene is already pinned while it fades in over the outgoing one. Its stage starts its
   sticky pin early by that hand-off window (flow-root keeps the negative margin inside its own scroll scene), so the
   browser holds it in step with the scroll; a script hold lagged a frame and shook the text. */
@media (min-width:900px) and (min-aspect-ratio:10001/10000) {
 .ph-cctv .cc-scroll-scene { display:flow-root; }
 .ph-cctv .cc-scroll-scene>.cc-sticky-stage { margin-top:-30vh;pointer-events:none; }
 .ph-cctv .cc-sticky-stage>.cc-setpiece { pointer-events:auto; }
 .ph-cctv .cc-scroll-scene[data-cc-sticky="cc-hero"]>.cc-sticky-stage { margin-top:0; }
 .ph-cctv .cc-scroll-scene[data-cc-sticky="cc-statement"]>.cc-sticky-stage { margin-top:-100vh; }
 .ph-cctv .cc-scroll-scene[data-cc-sticky="cc-finale"]>.cc-sticky-stage { margin-top:-45vh; }
}
.ph-cctv .cc-flow { position:absolute;left:6vw;top:calc(var(--cc-nav) + 24px);width:32vw;bottom:100px;display:flex;flex-direction:column;gap:18px; }
.ph-cctv .cc-flow>.cc-section-head { opacity:var(--head-in,1);transform:translateY(calc((1 - var(--head-in,1))*18px));flex:none; }
.ph-cctv .cc-flow-body { min-height:0;flex:1;overflow:clip;opacity:var(--intro-in,1); }
.ph-cctv .cc-flow-inner { display:flex;flex-direction:column;gap:20px;transform:translateY(var(--read-shift,0px)); }
.ph-cctv .cc-flow { opacity:var(--leave,1); }
.ph-cctv .cc-feature-stage,.ph-cctv .cc-monitor-stage,.ph-cctv .cc-environment-stage,.ph-cctv .cc-network-film,.ph-cctv .cc-process,.ph-cctv .cc-visual { opacity:calc(var(--body-in,1)*var(--leave,1)); }
.ph-cctv .cc-rig-mount { position:absolute;left:58%;top:22%;width:36%;height:42%;pointer-events:none; }
.ph-cctv .cc-hero { height:100vh;min-height:100vh;overflow:clip; }
.ph-cctv .cc-hero::before { content:'VISIBILITY';position:absolute;left:50%;top:17vh;transform:translate(-50%,calc(var(--p,0)*-60vh));font:400 20vw/1 var(--font-body,Arial,sans-serif);color:transparent;-webkit-text-stroke:1px #eee8d9;opacity:calc(.075*var(--watermark,1));pointer-events:none; }
.ph-cctv .cc-visibility-particles { position:absolute;left:0;top:0;width:100%;pointer-events:none;transform:translateY(calc(var(--p,0)*-60vh)); }
.ph-cctv .cc-hero-copy { display:contents; }
.ph-cctv .cc-hero-left,.ph-cctv .cc-hero-right { position:absolute;bottom:40px;display:flex;flex-direction:column;gap:12px;opacity:var(--hero-out,1); }
.ph-cctv .cc-hero-left { left:6vw;width:35vw; }
.ph-cctv .cc-hero-right { left:64vw;width:30vw;padding-bottom:58px; }
.ph-cctv .cc-hero h1 { font:400 12px/1.4 var(--font-body,Arial,sans-serif);color:#d5cdb8; }
.ph-cctv .cc-headline { font-size:clamp(30px,min(4vw,6vh),64px);line-height:1.01;color:#ead9ab; }
.ph-cctv .cc-title-line { display:block; }
.ph-cctv .cc-hero .cc-lead { font-size:17px;line-height:1.35;color:var(--cc-ivory); }
.ph-cctv .cc-hero-right>p:not(.cc-lead) { font-size:13px;line-height:1.5; }
.ph-cctv .cc-hero-foot { position:absolute;left:44vw;bottom:38px;font:12px monospace;opacity:var(--hero-out,1); }
.ph-cctv .cc-hero-foot>span { display:none; }
.ph-cctv .cc-camera-stage { position:absolute;left:22vw;top:max(calc(var(--cc-nav) + 12px),17vh);width:56vw;height:58vh;pointer-events:none; }
.ph-cctv .cc-camera { position:absolute;inset:0;transform:none; }
.ph-cctv .cc-camera img { width:100%;height:100%;object-fit:contain; }
.ph-cctv .cc-camera-label,.ph-cctv .cc-camera-corner { position:fixed;left:0;top:0;font:11px/1.4 monospace;letter-spacing:.05em;color:#d6bc80;max-width:215px;z-index:6;pointer-events:none; }
.ph-cctv .cc-3d-canvas { position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:5; }
.ph-cctv.cc-3d-ready .cc-camera { opacity:0;transition:opacity .18s; }
.ph-cctv .cc-rig-graphics { position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;fill:none;stroke:#c9b477;stroke-width:1;z-index:4; }
.ph-cctv .cc-rig-graphics .cc-wedge { fill:#c9b477;fill-opacity:.1; }
.ph-cctv .cc-statement .cc-flow { width:40vw; }
.ph-cctv .cc-statement h2 { font-size:clamp(38px,min(5.2vw,8vh),90px);line-height:1.04; }
.ph-cctv .cc-statement .cc-section-head { border:0;padding:0; }
.ph-cctv #cc-2 { background:rgb(calc(11 - var(--night,0)*6),calc(12 - var(--night,0)*7),calc(9 - var(--night,0)*5)); }
.ph-cctv #cc-2>.cc-kicker { position:absolute;left:6vw;top:calc(var(--cc-nav) + 24px);opacity:calc(var(--head-in,1)*var(--leave,1));z-index:2; }
.ph-cctv .cc-feature-stage { position:absolute;inset:0;background:transparent; }
.ph-cctv #cc-2 .cc-rig-mount { left:34%;top:16%;width:32%;height:34%; }
.ph-cctv .cc-feature-visual { position:absolute;left:calc(50% - min(13vw,21.33vh));top:53vh;width:min(26vw,42.66vh);height:min(14.625vw,24vh);border:1px solid var(--cc-line);overflow:hidden; }
.ph-cctv .cc-r13-feeds,.ph-cctv .cc-r13-feed { position:absolute;inset:0; }
.ph-cctv .cc-r13-feed { opacity:0;visibility:hidden; }
.ph-cctv .cc-r13-feed img { width:100%;height:100%;object-fit:cover;filter:blur(calc(var(--focus,0)*1px)) saturate(calc(1 - var(--scan,0)*.75)); }
.ph-cctv .cc-r13-feed:last-child img { filter:grayscale(1) sepia(.25) hue-rotate(55deg) contrast(1.4) brightness(.48); }
.ph-cctv .cc-r13-feed figcaption { position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;gap:8px;font:12px/1.2 monospace;opacity:var(--scan,0); }
.ph-cctv .cc-r13-feed figcaption span { background:#0b0c09e8;padding:4px; }
.ph-cctv .cc-object { position:absolute;left:calc(25% + var(--scan,0)*30%);top:40%;width:20%;height:32%;border:1px solid #d4b566;display:none; }
.ph-cctv [data-item="1"] .cc-object { display:block; }
.ph-cctv .cc-object span { display:block;margin:6px;background:#0b0c09e8;font:12px monospace;padding:3px; }
.ph-cctv .cc-focus-brackets { position:absolute;inset:calc(8% + var(--scan,0)*10%);border:1px dashed #bba36a; }
.ph-cctv .cc-feature-cards { position:absolute;left:6vw;right:6vw;bottom:38px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-right:180px; }
.ph-cctv .cc-feature-card { padding:14px;border-top:1px solid var(--cc-line);border-right:1px solid var(--cc-line);opacity:.35; }
.ph-cctv .cc-feature-card.is-active { opacity:1; }
.ph-cctv .cc-feature-card h3 { margin:8px 0; }
.ph-cctv .cc-feature-card p { font-size:clamp(12px,1vw,16px); }
.ph-cctv .cc-pan-arc { position:absolute;left:25vw;top:42vh;width:50vw;height:36vh;fill:none;stroke:#bdab7e;stroke-width:1;stroke-dasharray:4 7;z-index:2;pointer-events:none; }
.ph-cctv .cc-live-phone { position:absolute;left:78vw;top:51vh;width:9vw;height:20vh;border:1px solid #b49c66;border-radius:12px;padding:12px 7px;font:12px monospace;opacity:0; }
.ph-cctv [data-item="2"] .cc-live-phone { opacity:1; }
.ph-cctv .cc-live-phone img { width:100%;height:80%;object-fit:cover;margin-top:8px; }
.ph-cctv #cc-3 .cc-rig-mount { left:70%;top:57%;width:24%;height:30%; }
.ph-cctv .cc-monitor-stage { position:absolute;left:40vw;top:57vh;width:29vw;height:27vh;border:1px solid var(--cc-line); }
.ph-cctv .cc-monitor-single,.ph-cctv .cc-monitor-grid { position:absolute;inset:0;width:100%;height:100%;overflow:hidden; }
.ph-cctv .cc-monitor-photo { width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--scan,0)*.025)); }
.ph-cctv .cc-monitor-grid { display:block;visibility:hidden; }
.ph-cctv .cc-monitor-grid .cc-feed { aspect-ratio:auto; }
.ph-cctv .cc-monitor-hud { position:absolute;left:0;right:0;bottom:calc(100% + 8px);display:flex;justify-content:space-between;gap:8px;font:12px monospace; }
.ph-cctv .cc-monitor-hud span { padding:5px;background:#11130e; }
.ph-cctv .cc-monitor-zone { position:absolute;inset:30% 18% 15%;border:1px dashed #c3a868; }
.ph-cctv .cc-monitor-zone span { display:none; }
.ph-cctv .cc-monitor-box { position:absolute;left:calc(20% + var(--scan,0)*30%);top:35%;width:24%;height:35%;border:1px dashed #d4b566; }
.ph-cctv .cc-monitor-box span { display:block;margin:6px;padding:3px;background:#0b0c09e8;font:12px monospace; }
.ph-cctv .cc-monitor-event { position:absolute;right:10px;bottom:10px;font:12px monospace;background:#0b0c09e8;padding:8px; }
.ph-cctv .cc-monitor-event span { display:none; }
.ph-cctv .cc-monitor-ruler { position:absolute;left:10%;right:10%;bottom:18%;font:12px monospace;border-bottom:1px solid #c6a66a;padding-bottom:8px; }
.ph-cctv .cc-feed-timeline { position:absolute;left:0;right:0;bottom:-18px;height:10px;border-top:1px solid #bca16a;background:repeating-linear-gradient(90deg,transparent 0 9px,#a38d5566 9px 10px); }
.ph-cctv .cc-feed-timeline i { position:absolute;left:calc(var(--scan,0)*100%);height:100%;width:2px;background:#ead5a0; }
.ph-cctv .cc-capabilities { display:flex;flex-direction:column;gap:12px; }
.ph-cctv .cc-capability { opacity:.55;padding:8px 0;border-top:1px solid var(--cc-line); }
.ph-cctv .cc-capability.is-active { opacity:1; }
.ph-cctv .cc-capability p { display:none;margin-top:8px; }
.ph-cctv .cc-capability.is-active p { display:block; }
.ph-cctv #cc-4 .cc-flow { width:30vw; }
.ph-cctv #cc-4 .cc-rig-mount { left:70%;top:38%;width:24%;height:28%; }
.ph-cctv .cc-environment-stage { position:absolute;inset:0;pointer-events:none; }
.ph-cctv .cc-apps { position:absolute;inset:0; }
.ph-cctv .cc-apps article { position:absolute;inset:0;opacity:0;visibility:hidden; }
.ph-cctv .cc-apps .cc-env-picture { position:absolute;left:40vw;top:38vh;width:29vw;height:34vh; }
.ph-cctv .cc-apps article>p { position:absolute;left:40vw;top:75vh;width:29vw; }
.ph-cctv .cc-env-tabs { display:flex;flex-direction:column;gap:0;pointer-events:auto; }
.ph-cctv .cc-env-tabs button { width:100%;text-align:left;display:block;padding:12px 0;border:0;border-bottom:1px solid var(--cc-line);opacity:.55;font-size:16px; }
.ph-cctv .cc-env-tabs button.is-active { opacity:1; }
.ph-cctv #cc-5 .cc-flow { left:58vw;width:36vw; }
.ph-cctv #cc-5 .cc-rig-mount { left:5%;top:35%;width:40%;height:40%; }
.ph-cctv .cc-network-film { position:absolute;inset:0;pointer-events:none; }
.ph-cctv .cc-network-map,.ph-cctv .cc-network-status { display:none; }
.ph-cctv .cc-network-nodes { position:absolute;inset:0; }
.ph-cctv .cc-network-nodes>div { position:absolute;left:35vw;top:calc(18vh + var(--node-row,0)*11vh);width:19vw;min-height:8vh;padding:12px;border:1px solid var(--cc-line);font:13px/1.35 monospace;background:#0b0c09; }
.ph-cctv .cc-network-nodes span { display:block;font-size:12px;margin-top:5px;color:#b5b09e; }
.ph-cctv .cc-network-nodes>div:first-child { left:6vw;top:79vh;width:25vw;border:0; }
.ph-cctv .cc-network-copy ul { display:flex;flex-direction:column;gap:0; }
.ph-cctv .cc-network-copy li { padding:8px 0;border-bottom:1px solid var(--cc-line);opacity:.55; }
.ph-cctv .cc-network-copy li.is-active { opacity:1; }
.ph-cctv #cc-6 .cc-flow { width:30vw; }
.ph-cctv #cc-6 .cc-rig-mount { left:34%;top:32.5%;width:44%;height:55%; }
.ph-cctv .cc-process { position:absolute;left:6vw;bottom:24px;width:70vw;display:grid;grid-template-columns:repeat(5,1fr);list-style:none;border-top:1px solid var(--cc-line); }
.ph-cctv .cc-process li { opacity:.55;padding:10px; }
.ph-cctv .cc-process li.is-active { opacity:1; }
.ph-cctv .cc-process h3 { font-size:15px;margin-top:6px; }
.ph-cctv .cc-process p { display:none; }
.ph-cctv .cc-step-detail { font-size:16px;line-height:1.5; }
.ph-cctv .cc-room-plan { position:absolute;left:35vw;top:65vh;width:40vw;height:17vh;fill:none;stroke:#b99c61;opacity:0; }
.ph-cctv .cc-part-labels { position:absolute;inset:0;pointer-events:none;opacity:0; }
.ph-cctv .cc-part-labels span { position:absolute;left:0;top:0;font:12px monospace;color:#d0b77b; }
.ph-cctv .cc-health-ring { position:absolute;left:44vw;top:66vh;width:22vw;height:7vh;border:1px solid #cbb276;border-radius:50%;opacity:0;transform:rotate(calc(var(--step,0)*180deg)); }
.ph-cctv #cc-7 .cc-flow { width:38vw; }
.ph-cctv #cc-7 .cc-rig-mount { left:60%;top:max(calc(var(--cc-nav) + 12px),10vh);width:38%;height:50%; }
.ph-cctv #cc-7 .cc-visual { position:absolute;left:61vw;top:67vh;width:31vw; }
.ph-cctv .cc-priority { padding:10px 0;opacity:.55;border-top:1px solid var(--cc-line); }
.ph-cctv .cc-priority.is-active { opacity:1; }
.ph-cctv .cc-priority p { display:none;margin-top:8px; }
.ph-cctv .cc-priority.is-active p { display:block; }
.ph-cctv .cc-services,.ph-cctv .cc-faq { padding:80px 48vw 80px 6vw; }
.ph-cctv .cc-services { margin-top:-100vh; }
.ph-cctv .cc-services>.cc-section-head,.ph-cctv .cc-faq>h2 { margin-bottom:28px; }
.ph-cctv .cc-reading-mount { position:sticky;top:25vh;float:right;margin-right:-40vw;margin-bottom:-42vh;width:34vw;height:42vh; }
.ph-cctv .cc-finale .cc-rig-mount { left:30%;top:max(calc(var(--cc-nav) + 12px),9vh);width:40%;height:50%; }
.ph-cctv .cc-finale-copy { position:absolute;left:6vw;right:6vw;bottom:100px;width:auto;display:flex;align-items:center;flex-direction:column;gap:12px;padding:20px 24px 0;text-align:center;opacity:var(--converged,0); }
.ph-cctv .cc-finale-copy>.cc-index { display:none; }
.ph-cctv .cc-finale-copy h2 { font-size:clamp(26px,min(3.6vw,5vh),62px); }
.ph-cctv .cc-finale-copy>p { display:block;max-width:850px; }
.ph-cctv .cc-finale-copy .cc-actions { justify-content:center; }
.ph-cctv .cc-feeds-final { position:absolute;left:6vw;right:6vw;top:25vh;height:45vh;display:grid;grid-template-columns:16vw 16vw;grid-template-rows:19vh 19vh;justify-content:space-between;gap:16px;mask:none;transform:none; }
.ph-cctv .cc-feeds-final .cc-feed { overflow:visible; }
.ph-cctv .cc-feeds-final .cc-feed figcaption { display:none; }
.ph-cctv .cc-feeds-final .cc-feed img { display:block; }
@media(min-width:900px) and (max-height:600px) { .ph-cctv .cc-flow { top:calc(var(--cc-nav) + 12px);bottom:96px;gap:12px; } .ph-cctv h2 { font-size:clamp(24px,3vw,32px); } .ph-cctv .cc-section-head { gap:8px;padding-bottom:10px; } .ph-cctv .cc-hero-left,.ph-cctv .cc-hero-right { bottom:28px;gap:8px; } .ph-cctv .cc-hero-right { padding-bottom:65px; } .ph-cctv .cc-headline { font-size:30px; } .ph-cctv .cc-hero .cc-lead { font-size:14px; } .ph-cctv .cc-hero-right>p:not(.cc-lead) { font-size:12px; } .ph-cctv .cc-feature-card { padding:8px; } .ph-cctv .cc-feature-card h3 { font-size:15px; } .ph-cctv .cc-feature-card p { font-size:12px; } .ph-cctv .cc-finale-copy { gap:6px;bottom:90px; } .ph-cctv .cc-finale-copy>p { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .ph-cctv .cc-word { opacity:1!important; } }
.ph-cctv [data-cc-sticky="cc-finale"] { margin-top:calc(45vh - var(--cc-nav)); }
.ph-cctv .cc-phone-priorities { display:none; }
