/* Live SkyCams */
.camgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
@media (max-width: 420px) { .camgrid { grid-template-columns: 1fr; } }
.cam { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.cam:focus-visible { outline: 3px solid var(--green); }
.cam .vid { position: relative; aspect-ratio: 16 / 9; background: #0b1530; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam .msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 600; text-align: center; padding: 10px; }
.cam .name { position: absolute; left: 0; right: 0; top: 0; padding: 8px 12px 18px; background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent); font: 700 20px var(--head); text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.cam .name small, .camview-head small { display: block; font: 600 13px var(--body); text-transform: none; letter-spacing: 0; color: var(--dim); margin-top: 1px; }
.cam .name small:empty, .camview-head small:empty { display: none; }
.cam .name { align-items: flex-start; }
.cam .name i { margin-top: 8px; }
.cam .name i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; flex: none; box-shadow: 0 0 0 3px rgba(255, 59, 59, .25); }
.cam.off .name i { background: #777; box-shadow: none; }
.cam .wx { display: flex; gap: 14px; flex-wrap: wrap; padding: 9px 12px; background: linear-gradient(180deg, var(--cell), var(--cell2)); font: 700 16px var(--head); text-transform: uppercase; }
.cam .wx:empty { display: none; }
.cam .wx b { font-size: 22px; } .cam .wx span { color: var(--dim); }
.camview { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .85); display: grid; place-items: center; padding: 20px; }
.camview-in { width: min(1280px, 100%); }
.camview-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; font: 700 24px var(--head); text-transform: uppercase; }
.camview-head .ib { margin-left: auto; }
.camview video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; }
.ib { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; font-size: 18px; }

/* Risher Roofing SkyCam Network branding (their red and navy) */
:root { --rr-red: #e8383b; --rr-navy: #353a7a; }
.rr-hero { background: #fff; color: #1b1f45; border-bottom: 6px solid var(--rr-red); box-shadow: inset 0 6px 0 var(--rr-navy); }
.rr-in { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: 34px; align-items: center; padding-top: 30px; padding-bottom: 30px; }
.rr-logo { width: 100%; height: auto; }
.rr-kicker { font: 700 16px var(--head); text-transform: uppercase; letter-spacing: .14em; color: var(--rr-red); }
.rr-text h1 { color: var(--rr-navy); margin: 4px 0 10px; }
.rr-text p { color: #3a3f63; font-size: 17px; max-width: 640px; }
.rr-cta { margin: 6px 0 0; }
.rr-btn { display: inline-block; background: var(--rr-red); color: #fff; text-decoration: none; font: 700 19px var(--head); text-transform: uppercase; letter-spacing: .03em; padding: 11px 18px; border-radius: 10px; box-shadow: 0 6px 16px rgba(232, 56, 59, .3); }
.rr-btn:hover { background: #cf2629; color: #fff; }
@media (max-width: 760px) { .rr-in { grid-template-columns: 1fr; gap: 16px; text-align: center; } .rr-logo { max-width: 320px; margin: 0 auto; } .rr-text p { margin-left: auto; margin-right: auto; } }
.cam { border-top: 4px solid var(--rr-red); }
.camview-in { border-top: 5px solid var(--rr-red); border-radius: 10px; }
.cp-credit { font: 700 15px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin: 10px 0 0; }
.cp-credit a { color: var(--green); text-decoration: none; text-transform: none; letter-spacing: .02em; }
.cp-credit a:hover { text-decoration: underline; }
.cp-top { margin: 0 0 0 auto; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, .25); }
@media (max-width: 760px) { .cp-top { margin-left: 0; } }