/* Security camera property-type pages (/services/security-cameras/<type>/, 17 pages).
   Loaded only by those pages, with cam-props.js. Everything is scoped under
   main.cam so nothing reaches the shared header, footer or mobile call bar.
   Animations use only transform, opacity, stroke-dashoffset and offset-distance.
   A shape whose fill or stroke changes with a widget state comes as one copy per
   state (.msv); the copies fade with opacity (.ms-off). Page-specific rules keep
   their page-code prefix (.as- .ch- .ht- .hw- .md- .mu- .sc- .sf- .th-). */

/* ---- shared with the overview and the residential and commercial pages ---- */
main.cam{display:block;background:#060910;color:#e8edf5;font-family:var(--sans)}
.cam a{color:#4d9eff}.cam a:hover{color:#8bbcff}
.cam .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.cam .m{font-family:var(--mono)}
.cam .sec{position:relative;padding:112px 0;overflow:hidden}
.cam .cam-hero{padding:calc(var(--nav-h) + 16px) 0 104px}
.cam .alt{background:#070b14;border-top:1px solid rgba(120,170,255,.12);border-bottom:1px solid rgba(120,170,255,.12)}
.cam .grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(77,158,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(77,158,255,.07) 1px,transparent 1px),linear-gradient(rgba(77,158,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(77,158,255,.032) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;-webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000 25%,transparent 85%);mask-image:radial-gradient(80% 70% at 50% 40%,#000 25%,transparent 85%)}
.cam .crumb{font-family:var(--mono);font-size:12px;line-height:19.2px;letter-spacing:.08em;color:#7d92b3;margin-bottom:22px;padding-top:4px}
.cam .crumb a{color:#8a95a8;padding:14px 6px;margin:0 -6px}.cam .crumb a:hover{color:#e8edf5}
.cam .kick{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#7d92b3}
.cam .cnt{border:1px solid rgba(120,170,255,.35);padding:2px 7px;color:#e8edf5}
.cam h1{margin:0;font-weight:900;letter-spacing:-.045em;line-height:.98;color:#e8edf5}
.cam .h2{margin:0;font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:#e8edf5}
.cam .cam-lead{margin:0;font-size:17px;line-height:1.65;color:#a3adbd}
.cam .c{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;background:rgba(9,14,24,.82);border:1px solid rgba(120,170,255,.14);border-radius:4px;color:#e8edf5;overflow:hidden;transition:transform .3s}
.cam .c::before,.cam .c::after{content:"";position:absolute;width:12px;height:12px;border-color:#4d9eff;border-style:solid;opacity:.55;pointer-events:none}
.cam .c::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.cam .c::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.cam a.c:hover,.cam .c.hv:hover{border-color:rgba(77,158,255,.6);background:rgba(12,20,36,.92);transform:translateY(-3px);color:#e8edf5}
.cam a.c:hover::before,.cam a.c:hover::after,.cam .c.hv:hover::before,.cam .c.hv:hover::after{width:28px;height:28px;opacity:1}
.cam .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#7d92b3;text-transform:uppercase}
.cam .t{margin:0;font-size:21px;font-weight:700;letter-spacing:-.015em;color:#e8edf5;line-height:1.25}
.cam .p{margin:0;font-size:15px;line-height:1.6;color:#a3adbd}
.cam .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4d9eff}
.cam .p a{text-decoration:underline;text-underline-offset:2px}
.cam .cam-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:6px;font-weight:700;font-size:15px;line-height:1.2;transition:transform .2s}
.cam .cam-btn-p{background:#0060df;color:#fff;box-shadow:0 10px 30px -10px rgba(29,123,255,.7)}
.cam .cam-btn-p:hover{background:#1d7bff;color:#fff;transform:translateY(-2px)}
.cam .cam-btn-g{border:1px solid rgba(120,170,255,.3);color:#e8edf5;background:rgba(9,14,24,.6)}
.cam .cam-btn-g:hover{color:#fff;border-color:#4d9eff}
.cam .pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid rgba(120,170,255,.22);border-radius:999px;font-size:13px;font-weight:600;color:#c9d2e0;background:rgba(5,8,16,.5)}
.cam .pill i{width:6px;height:6px;border-radius:50%;background:#22c55e}
.cam .ill{stroke:#4d9eff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cam .dim{stroke:rgba(120,170,255,.35)}
.cam .lbl{font:600 10px var(--mono);fill:#8bbcff;letter-spacing:.08em}
.cam .lbl2{font:500 9.5px var(--mono);fill:#7d92b3;letter-spacing:.1em}
.cam .tog{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(120,170,255,.25);border-radius:5px;background:rgba(5,8,16,.6);color:#a9bddc;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.cam .tog:hover{border-color:#4d9eff;color:#fff}
.cam .tog.on{border-color:#4d9eff;background:rgba(29,123,255,.18);color:#fff}
.cam .tog.bad.on{border-color:#ff6b6b;background:rgba(255,107,107,.12);color:#ffb4b4}
.cam [hidden]{display:none!important}

@keyframes cam-flow{to{stroke-dashoffset:-48}}
.cam .flow{stroke-dasharray:6 6;animation:cam-flow 1.6s linear infinite}
.cam .flow-r{stroke-dasharray:3 9;animation:cam-flow 1.6s linear infinite reverse}
@keyframes cam-blink{0%,100%{opacity:1}50%{opacity:.15}}
.cam .blink{animation:cam-blink 1.1s step-end infinite}
@keyframes cam-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.cam .ping{transform-box:fill-box;transform-origin:center;animation:cam-ping 2.2s ease-out infinite}

.cam details.rfi{border-top:1px solid rgba(120,170,255,.14)}
.cam details.rfi summary{list-style:none;display:grid;grid-template-columns:90px minmax(0,1fr) 28px;align-items:center;gap:16px;min-height:76px;cursor:pointer;color:#e8edf5;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3;padding:8px 0}
.cam details.rfi summary::-webkit-details-marker{display:none}
.cam details.rfi .pl{width:28px;height:28px;border:1px solid rgba(120,170,255,.35);border-radius:4px;display:grid;place-items:center;color:#4d9eff;transition:transform .3s}
.cam details.rfi[open] .pl{transform:rotate(45deg)}
.cam .ans{margin:0 0 26px 106px;max-width:680px;font-size:15.5px}

/* timeline */
.cam .tl{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.cam .st{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(77,158,255,.5);border-radius:50%;background:#060910;font:700 13px var(--mono);color:#8bbcff;box-shadow:0 0 0 6px rgba(77,158,255,.06)}

/* ---- property pages ---- */
/* widget states: drawing groups fade, copies of a coloured shape cross-fade */
.cam .stage{transition:opacity .45s}
.cam .stage.off{opacity:0}
.cam .msv{transition:opacity .35s}
.cam .ms-off{opacity:0!important}
.cam .st-ok{color:#4ade80}.cam .st-bad{color:#ff8a8a}
.cam .big{font:800 44px/1 var(--sans);letter-spacing:-.03em}

/* small looping drawings */
@keyframes cam-drawl{0%{stroke-dashoffset:400}55%,100%{stroke-dashoffset:0}}
.cam .drawl{stroke-dasharray:400;animation:cam-drawl 3.6s ease-in-out infinite}
@keyframes cam-fadeup{0%,20%{opacity:0;transform:translateY(4px)}35%,85%{opacity:1;transform:none}100%{opacity:0}}
.cam .fadeup{animation:cam-fadeup 3.6s ease infinite}
@keyframes cam-walkin{0%,30%{transform:translate(0,0);opacity:0}40%{opacity:1}70%,100%{transform:translate(0,-34px);opacity:1}}
.cam .walkin{animation:cam-walkin 4s ease-in-out infinite}
@keyframes cam-bell{0%,66%{opacity:0;transform:scale(.6)}72%,95%{opacity:1;transform:scale(1)}100%{opacity:0}}
.cam .bell{transform-box:fill-box;transform-origin:center;animation:cam-bell 4s infinite}
@keyframes cam-conceal{0%,25%{transform:translate(0,0);opacity:1}65%{transform:translate(40px,34px);opacity:1}80%,100%{transform:translate(40px,34px);opacity:0}}
.cam .conceal{animation:cam-conceal 3.6s ease-in-out infinite}
@keyframes cam-truck{0%,10%{transform:translateX(90px)}55%,100%{transform:translateX(0)}}
.cam .truck{animation:cam-truck 6s ease-in-out infinite alternate}
@keyframes cam-steam{0%{transform:translateY(0);opacity:0}30%{opacity:.7}100%{transform:translateY(-18px);opacity:0}}
.cam .steam{animation:cam-steam 2.4s ease-out infinite}
@keyframes cam-bill{0%,30%{transform:translate(0,0)}70%,100%{transform:translate(-8px,-30px)}}
.cam .bill{animation:cam-bill 2.8s ease-in-out infinite alternate}
@keyframes cam-prog{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.cam .prog{transform-box:fill-box;transform-origin:left;animation:cam-prog 2.6s ease-in-out infinite}
@keyframes cam-walk{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes cam-scan{0%{transform:translateY(-100%)}100%{transform:translateY(340%)}}

/* equipment schedule */
.cam .sched{border:1px solid rgba(120,170,255,.16);border-radius:4px;background:rgba(5,8,16,.55);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.cam .shead{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid rgba(120,170,255,.16);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7d92b3}
.cam .srow{display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;padding:22px 20px;border-bottom:1px solid rgba(120,170,255,.1)}
.cam .srow:hover{background:rgba(29,123,255,.05)}
.cam .sno{font-size:11px;letter-spacing:.12em;color:#4d9eff;padding-top:4px}
.cam .stag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid rgba(120,170,255,.28);border-radius:3px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8bbcff}

/* property types strip */
.cam .tc{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid rgba(120,170,255,.14);border-radius:4px;background:rgba(9,14,24,.7);color:#e8edf5;min-height:120px;transition:transform .25s}
.cam .tc svg{width:100%;height:44px}
.cam .tc .tt2{font-size:15px;font-weight:700;letter-spacing:-.01em;color:#e8edf5}
.cam .tc .go{margin-top:auto;font-size:10.5px}
.cam a.tc:hover{border-color:rgba(77,158,255,.6);background:rgba(12,20,36,.92);transform:translateY(-2px)}
.cam .tc.here{border-style:dashed;border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.04)}

/* channel tiles and permission chips (co-ops) */
.cam .tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:84px;padding:10px 12px;border:1px solid rgba(120,170,255,.16);border-radius:4px;background:#070b14;overflow:hidden;transition:opacity .3s}
.cam .tile .tn{font:600 10px var(--mono);letter-spacing:.12em;color:#7d92b3;text-transform:uppercase}
.cam .tile .tt{font-size:14px;font-weight:700;color:#e8edf5}
.cam .tile .lv,.cam .tile .lk{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s}
.cam .tile .lv{color:#4ade80;opacity:0}
.cam .tile .lk{position:absolute;right:12px;bottom:10px;color:#ff8a8a}
.cam .tile .scan{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(rgba(77,158,255,0),rgba(77,158,255,.14));animation:cam-scan 2.4s linear infinite;pointer-events:none;opacity:0;transition:opacity .3s}
.cam .tile.off{opacity:.45}
.cam .tile.on{border-color:rgba(77,158,255,.45);background:rgba(29,123,255,.08)}
.cam .tile.on .lv,.cam .tile.on .scan{opacity:1}
.cam .tile.on .lk{opacity:0}
.cam .perm{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid rgba(120,170,255,.2);border-radius:999px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5d6b82}
.cam .perm i{width:6px;height:6px;border-radius:50%;background:#33415a}
.cam .perm.on{color:#e8edf5;border-color:rgba(74,222,128,.45)}
.cam .perm.on i{background:#4ade80}

/* who sees what (cameras dim, units tinted) */
.cam .vc{transition:opacity .35s}
.cam .vc.off{opacity:.18}
.cam .unit{fill:rgba(0,0,0,0);stroke:none}
.cam .unit.hi1{fill:rgba(45,212,191,.16)}
.cam .unit.hi2{fill:rgba(167,139,250,.16)}
.cam .unit.hi3{fill:rgba(245,196,107,.14)}

/* retention timeline (retail) */
.cam .win{fill:rgba(255,107,107,.16);stroke:rgba(255,107,107,.6)}
.cam .win.ok{fill:rgba(74,222,128,.16);stroke:rgba(74,222,128,.6)}
.cam .inc{fill:#ff6b6b}
.cam .inc.ok{fill:#4ade80}

/* hot zones and the night overlay (restaurants, offices): the hot copy pulses with opacity.
   A pulse runs only on the visible copy: WebKit lets a running opacity animation beat .ms-off. */
.cam .zn{fill:rgba(0,0,0,0)}
.cam .zn.hot{fill:rgba(245,196,107,.22)}
.cam .zn.hot:not(.ms-off){animation:cam-znp 2.4s ease-in-out infinite}
@keyframes cam-znp{0%,100%{opacity:.6}50%{opacity:1}}
.cam .zc{opacity:.3;transition:opacity .5s}
.cam .zc.hot{opacity:1}
.cam .nite{fill:rgba(2,4,8,0);pointer-events:none}
.cam .nite.on{fill:rgba(2,4,8,.85)}
.cam .nite.msv{transition-duration:.6s}

/* recorder drive bays (warehouses) */
.cam .drv{position:relative;display:inline-flex;align-items:center;width:30px;height:44px;border:1px solid rgba(77,158,255,.55);border-radius:3px;background:linear-gradient(rgba(29,123,255,.18),rgba(9,14,24,.9));animation:cam-drvin .4s ease both}
.cam .drv i{position:absolute;left:6px;bottom:6px;width:4px;height:4px;border-radius:50%;background:#4ade80}
.cam .drv.par{border-color:rgba(245,196,107,.6);background:linear-gradient(rgba(245,196,107,.16),rgba(9,14,24,.9))}
.cam .drv.par i{background:#f5c46b}
@keyframes cam-drvin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* access log rows (offices) */
.cam .logrow{fill:rgba(0,0,0,0);stroke:none}
.cam .logrow.on{fill:rgba(255,107,107,.14);stroke:rgba(255,107,107,.5)}

/* auto shops (AS) */
.cam .as-mk{fill:rgba(120,170,255,.45)}
.cam .as-mk.on{fill:#f5c46b}
.cam .as-ev{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px;border:1px solid rgba(120,170,255,.18);border-radius:4px;background:#070b14}
.cam .as-ev.on{border-color:#4d9eff;background:rgba(29,123,255,.14)}
.cam .as-ev-a{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#e8edf5}
.cam .as-ev-t{font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#f5c46b;text-align:right}
.cam .as-ev-c{grid-column:1/-1;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7d92b3}

/* carriage houses (CH) */
@keyframes ch-drive{0%,15%{transform:translateX(150px);opacity:0}30%{opacity:1}70%,100%{transform:translateX(0);opacity:1}}
.cam .ch-car{animation:ch-drive 5s ease-out infinite}
@keyframes ch-glow{50%{opacity:.55}}
.cam .ch-glow{animation:ch-glow 3s ease-in-out infinite}

/* hotels (HT): the floor in work pulses with opacity */
.cam .ht-fl{fill:rgba(77,158,255,.05);stroke:rgba(120,170,255,.35)}
.cam .ht-fl.done{fill:rgba(74,222,128,.2);stroke:#4ade80}
.cam .ht-fl.work{fill:rgba(245,196,107,.24);stroke:#f5c46b}
.cam .ht-fl.work:not(.ms-off){animation:ht-work 1.6s ease-in-out infinite}
@keyframes ht-work{50%{opacity:.45}}
.cam .ht-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid rgba(120,170,255,.1);font-size:13.5px;color:#a3adbd}
.cam .ht-row .ht-n{font:600 10.5px var(--mono);letter-spacing:.12em;color:#7d92b3;text-transform:uppercase}
.cam .ht-s{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid rgba(120,170,255,.25);color:#8bbcff;white-space:nowrap}
.cam .ht-s.done{border-color:rgba(74,222,128,.5);color:#8bf0b0}
.cam .ht-s.work{border-color:rgba(245,196,107,.6);color:#ffd98a;background:rgba(245,196,107,.08)}
.cam .ht-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
@media (max-width:760px){.cam .ht-wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.cam .ht-row{grid-template-columns:56px minmax(0,1fr)}.cam .ht-row .ht-s{grid-column:2;justify-self:start}}

/* houses of worship (HW): the section drawing scrolls sideways in its card on phones */
.cam .hw-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:560px){.cam .hw-sec{min-width:640px}}

/* medical offices (MD) */
.cam .md-pv{opacity:.35;transition:opacity .5s}
.cam .md-pv.on{opacity:1}
.cam .md-log{display:grid;grid-template-columns:62px minmax(0,1fr);gap:4px 12px;padding:9px 12px;border-top:1px solid rgba(120,170,255,.1);font-size:13.5px;line-height:1.45;color:#c9d2e0}
.cam .md-log .md-t{font:600 11px var(--mono);letter-spacing:.06em;color:#7d92b3;padding-top:2px}
.cam .md-log.warn .md-t{color:#ffb4b4}
.cam .md-log.ok .md-t{color:#8bf0b0}
.cam .md-wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:820px){.cam .md-wrap{grid-template-columns:minmax(0,1fr)}}

/* mixed-use (MU) */
.cam .mu-cell{padding:12px 14px;border-top:1px solid rgba(120,170,255,.12);font-size:14px;line-height:1.5;color:#7d8aa0}
.cam .mu-cell.on{background:rgba(29,123,255,.09);color:#e8edf5}
.cam .mu-k{padding:12px 14px;border-top:1px solid rgba(120,170,255,.12);font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7d92b3}
.cam .mu-hd{padding:10px 14px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5d6b82}
.cam .mu-hd.on{color:#8bbcff}
.cam .mu-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);border:1px solid rgba(120,170,255,.14);border-radius:4px;background:rgba(5,8,16,.5)}
@media (max-width:620px){.cam .mu-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cam .mu-grid .mu-k{grid-column:1/-1;padding-bottom:4px;border-top:1px solid rgba(120,170,255,.2)}.cam .mu-grid .mu-k + .mu-cell,.cam .mu-grid .mu-k + .mu-cell + .mu-cell{border-top:0}.cam .mu-grid .mu-blank{display:none}}

/* schools (SC): the current step's border is a lit copy that fades in */
.cam .sc-d{opacity:.22;transition:opacity .5s}
.cam .sc-d.on{opacity:1}
.cam .sc-pg{stroke:rgba(139,188,255,.35)}
.cam .sc-pgl{fill:none;stroke:#4d9eff;opacity:0;transition:opacity .4s}
.cam .sc-d.cur .sc-pgl{opacity:1}
.cam .sc-dh{fill:#1d7bff}
.cam .sc-dd{fill:#33415a}
.cam .sc-dd:not(.ms-off){opacity:.7}
.cam .sc-dn{fill:#ff6b6b}

/* single-family houses (SF) */
.cam .sf-walk{offset-path:path('M436 4 L436 30 L400 66 L304 100 L420 100 L436 118 L436 246 L436 300');offset-rotate:0deg;animation:cam-walk 7s linear infinite}
.cam .sf-cam{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:84px;padding:12px 14px;border:1px dashed rgba(120,170,255,.28);border-radius:4px;background:#070b14;color:#7d92b3;font:inherit;text-align:left;cursor:pointer}
.cam .sf-cam:hover{border-color:#4d9eff;color:#cfe0ff}
.cam .sf-cam .sf-ch{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.cam .sf-cam .sf-nm{font-size:15px;font-weight:700;color:#a3adbd}
.cam .sf-cam .sf-st{margin-top:auto;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4d9eff}
.cam .sf-cam.on{border-style:solid;border-color:rgba(77,158,255,.55);background:rgba(29,123,255,.1);color:#8bbcff}
.cam .sf-cam.on .sf-nm{color:#e8edf5}
.cam .sf-cam.on .sf-st{color:#4ade80}
.cam .sf-nvr{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid rgba(120,170,255,.2);border-radius:4px;background:#070b14}
.cam .sf-nvr.ok{border-color:rgba(74,222,128,.4)}
.cam .sf-nvr.bad{border-color:rgba(255,107,107,.55);background:rgba(255,107,107,.05)}
.cam .sf-ports{display:flex;flex-wrap:wrap;gap:6px}
.cam .sf-port{position:relative;width:30px;height:34px;border:1px solid rgba(120,170,255,.3);border-radius:3px;background:#0b1424}
.cam .sf-port i{position:absolute;left:50%;bottom:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#33415a}
.cam .sf-port.on{border-color:#4d9eff;background:rgba(29,123,255,.22)}
.cam .sf-port.on i{background:#4ade80}
.cam .sf-port.over{border:1px dashed #ff6b6b;background:repeating-linear-gradient(135deg,rgba(255,107,107,.3) 0 3px,rgba(255,107,107,.06) 3px 7px)}
.cam .sf-port.over i{background:#ff6b6b}
.cam .sf-v{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a3adbd}
.cam .sf-v.ok{color:#4ade80}
.cam .sf-v.bad{color:#ff8a8a}
@media (max-width:560px){.cam .sf-port{width:24px;height:30px}.cam .sf-ports{gap:5px}}

/* townhouses (TH) */
@keyframes th-sweep{from{transform:rotate(-38deg)}to{transform:rotate(38deg)}}
.cam .th-ptz{animation:th-sweep 4.6s ease-in-out infinite alternate}
@keyframes th-climb{0%{transform:translateY(0);opacity:0}8%,90%{opacity:1}100%{transform:translateY(-276px);opacity:0}}
.cam .th-climb{animation:th-climb 6s linear infinite}
@keyframes th-climb2{0%{transform:translateY(0);opacity:0}10%,88%{opacity:1}100%{transform:translateY(-88px);opacity:0}}
.cam .th-climb2{animation:th-climb2 4s linear infinite}
.cam .th-row{fill:rgba(0,0,0,0);stroke:rgba(120,170,255,.12)}
.cam .th-row.on{fill:rgba(29,123,255,.14);stroke:rgba(77,158,255,.6)}

/* Off-screen sections pause; reduced motion stops everything. */
.cam .paused,.cam .paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){
  .cam *,.cam *::before,.cam *::after{animation:none!important;transition:none!important}
}
@media (max-width:760px){.cam .tl-line{display:none}}
@media (max-width:700px){
  .cam details.rfi summary{grid-template-columns:minmax(0,1fr) 28px;font-size:17px}
  .cam details.rfi summary .m{display:none}
  .cam .ans{margin-left:0}
  .cam .sec{padding:76px 0}
  .cam .cam-hero{padding:calc(var(--nav-h) + 16px) 0 72px}
}
@media (max-width:560px){.cam .srow{grid-template-columns:1fr;gap:8px}}