/* 3D CCTV feature presentation at the top of cctv.html (#cctv-3d), driven by js/cam3d-story.js */
/* z-index lifts it above the pinned hero grid/background layers (.hero__grid is z-index:1) */
/* own colour tokens: the homepage's --grey (#888) is far too light for body text on white */
.c3 { --ink:#1A2124; --body:#3d4549; --green-d:#3F6B12; --green:#7AB23A; color:var(--ink); position:relative; z-index:2; background:#fff; transition:background-color .6s ease; }
.c3.is-night { background:#0e1417; }
.c3__inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); max-width:1240px; margin:0 auto; padding:0 24px; }
/* pinned just under the fixed site header (--qh-h from css/site-header.css) */
.c3__stage { grid-column:2; grid-row:1; position:sticky; top:var(--qh-h, 68px); height:calc(100vh - var(--qh-h, 68px)); height:calc(100svh - var(--qh-h, 68px)); }
.c3__stage canvas { display:block; width:100%; height:100%; touch-action:pan-y; outline:none;
  /* fade the side edges so the soft floor shadow never ends in a hard line */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.c3__poster { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none; }
.c3--static .c3__poster { display:block; }
.c3__steps { grid-column:1; grid-row:1; position:relative; z-index:1; }
.c3__step { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:48px 0; max-width:440px; transition:opacity .5s ease; }
.c3--ready .c3__step { opacity:.35; }
.c3--ready .c3__step.is-active { opacity:1; }
.c3__kicker { font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--green-d); }
.c3__title { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.4vw,44px); line-height:1.08; margin:10px 0 14px; color:var(--ink); }
.c3__body { font-size:17px; line-height:1.6; color:var(--body); }
.c3__chips { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.c3__chips li { font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; background:#f1f6ea; color:var(--green-d); border:1px solid rgba(122,178,58,.35); transition:background-color .3s, color .3s; }
.c3__chips li.is-on { background:var(--green); color:var(--ink); }
.c3__cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.c3__btn { font-family:var(--font-display); font-weight:700; font-size:16px; padding:14px 22px; border-radius:12px; border:0; cursor:pointer; background:var(--green); color:var(--ink); text-decoration:none; }
.c3__btn--ghost { background:#fff; border:1px solid rgba(26,33,36,.15); }
.c3__progress { position:absolute; left:0; right:0; bottom:28px; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.c3__progress i { width:7px; height:7px; border-radius:4px; background:rgba(26,33,36,.18); transition:width .3s, background-color .3s; }
.c3__progress i.is-on { width:22px; background:var(--green); }
.c3.is-night .c3__title { color:#fff; }
.c3.is-night .c3__body { color:rgba(255,255,255,.85); }
.c3.is-night .c3__kicker { color:#a6d66b; }
.c3.is-night .c3__progress i { background:rgba(255,255,255,.25); }
.c3.is-night .c3__progress i.is-on { background:var(--green); }
.c3__title, .c3__body, .c3__kicker { transition:color .6s ease; }

@media (max-width: 899px) {
  .c3__inner { display:block; padding:0 16px; }
  .c3__stage { height:52vh; height:52svh; z-index:2; }
  .c3__stage { background:#fff; transition:background-color .6s ease; }
  .c3.is-night .c3__stage { background:#0e1417; }
  .c3__steps { margin-top:-4vh; }
  .c3__step { min-height:72vh; min-height:72svh; justify-content:flex-start; padding:20px 0 40px; max-width:none; }
  .c3__title { font-size:clamp(24px,7vw,32px); margin:8px 0 10px; }
  .c3__body { font-size:15.5px; }
  .c3__progress { bottom:10px; }
}
@media (prefers-reduced-motion: reduce) { .c3--ready .c3__step { opacity:1; } }