/* GeoProcess Consulting — reusable hero footage panel with animated LiDAR HUD. */
.footage {
  --footage-cyan: #5fe3ff;
  position: relative; z-index: 1; width: 100%; max-width: 560px; min-width: 0;
  margin: 8px auto 0; padding: 12px; overflow: hidden;
  border: 1px solid rgba(95,227,255,.22); border-radius: 23px;
  background: linear-gradient(145deg,rgba(9,26,39,.94),rgba(3,10,17,.96));
  box-shadow: 0 26px 75px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.045);
  isolation: isolate;
}
.footage-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px; padding:1px 7px 11px; color:#7897a7; font:800 .58rem/1.35 "Space Grotesk",Inter,sans-serif; letter-spacing:.12em; }
.footage-live { display:flex; align-items:center; gap:7px; white-space:nowrap; color:#b3e9d3; }
.footage-live i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#54dca4; box-shadow:0 0 11px rgba(84,220,164,.75); animation:footageLivePulse 2s ease-in-out infinite; }
.footage-frame { position:relative; width:100%; aspect-ratio:1.16/1; min-height:250px; overflow:hidden; border:1px solid rgba(95,227,255,.17); border-radius:15px; background:#07131d; }
.footage-media { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.75; filter:saturate(.85) contrast(1.08); }
.footage-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(2,9,16,.08),rgba(2,9,16,.22) 45%,rgba(2,9,16,.64)),linear-gradient(90deg,rgba(3,12,20,.3),transparent 55%,rgba(3,12,20,.18)); pointer-events:none; }
.footage-reticle { position:absolute; z-index:2; left:50%; top:48%; width:min(74%,330px); aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(95,227,255,.35); border-radius:50%; box-shadow:0 0 42px rgba(95,227,255,.08),inset 0 0 35px rgba(95,227,255,.06); pointer-events:none; }
.footage-reticle-ring { position:absolute; left:50%; top:50%; border:1px solid rgba(95,227,255,.24); border-radius:50%; transform:translate(-50%,-50%); }
.footage-reticle-ring.ring-a { width:76%;height:76%; }
.footage-reticle-ring.ring-b { width:52%;height:52%;border-color:rgba(95,227,255,.2); }
.footage-reticle-ring.ring-c { width:25%;height:25%;border-color:rgba(95,227,255,.14); }
.footage-reticle-cross { position:absolute; display:block; background:rgba(95,227,255,.2); }
.footage-reticle-cross.cross-x { left:0;right:0;top:50%;height:1px; }
.footage-reticle-cross.cross-y { top:0;bottom:0;left:50%;width:1px; }
.footage-reticle::before { content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(95,227,255,.02) 250deg,rgba(95,227,255,.36) 315deg,transparent 360deg);animation:footageRadarSweep 7s linear infinite; }
.footage-reticle-core { position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 22px rgba(255,255,255,.8),0 0 38px rgba(95,227,255,.6); }
.footage-node { position:absolute;width:11px;height:11px;border-radius:50%;background:#5fe3ff;box-shadow:0 0 0 7px rgba(95,227,255,.12),0 0 21px rgba(95,227,255,.75);animation:footageNodePulse 2.6s ease-in-out infinite; }
.footage-node.node-a { left:19%;top:28%; }
.footage-node.node-b { right:23%;top:20%;background:#54dca4;box-shadow:0 0 0 7px rgba(84,220,164,.12),0 0 21px rgba(84,220,164,.7);animation-delay:.5s; }
.footage-node.node-c { right:16%;bottom:28%;animation-delay:1s; }
.footage-node.node-d { left:31%;bottom:17%;background:#54dca4;box-shadow:0 0 0 7px rgba(84,220,164,.12),0 0 21px rgba(84,220,164,.7);animation-delay:1.5s; }
.footage-label { position:absolute;z-index:3;max-width:48%;padding:9px 12px;border:1px solid rgba(95,227,255,.2);border-radius:9px;background:rgba(3,13,22,.88);backdrop-filter:blur(8px);color:#e9f7fc;font:800 clamp(.49rem,.7vw,.61rem)/1.3 Inter,sans-serif;letter-spacing:.01em;box-shadow:0 7px 18px rgba(0,0,0,.18); }
.footage-label-a { left:3%;top:15%; }
.footage-label-b { right:3%;top:40%; }
.footage-label-c { left:9%;bottom:18%; }
.footage-scan { position:absolute;z-index:4;left:0;right:0;top:-3px;height:2px;background:linear-gradient(90deg,transparent,rgba(95,227,255,.9),transparent);box-shadow:0 0 14px rgba(95,227,255,.6);animation:footageScanLine 5.5s ease-in-out infinite;pointer-events:none; }
.footage-bottomline { position:absolute;z-index:5;left:3%;right:3%;bottom:3%;padding:9px 12px;border:1px solid rgba(95,227,255,.24);border-radius:9px;background:rgba(4,16,26,.84);color:#d9f5fb;font:800 .58rem/1.35 "Space Grotesk",Inter,sans-serif;letter-spacing:.07em; }
.footage figcaption { display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 6px 3px; }
.footage figcaption span { flex:0 0 auto;color:#5fe3ff;font:800 .55rem/1.5 "Space Grotesk",Inter,sans-serif;letter-spacing:.1em; }
.footage figcaption strong { max-width:65%;color:#e5f1f7;font:700 .8rem/1.5 "Space Grotesk",Inter,sans-serif;text-align:right; }
@keyframes footageRadarSweep { to { transform:rotate(360deg); } }
@keyframes footageNodePulse { 0%,100% { opacity:.76;scale:.88; } 50% { opacity:1;scale:1.12; } }
@keyframes footageScanLine { 0% { transform:translateY(0);opacity:0; } 12% {opacity:1} 85% {opacity:.9} 100% { transform:translateY(340px);opacity:0; } }
@keyframes footageLivePulse { 0%,100% { opacity:.65; } 50% {opacity:1;} }
@media(max-width:1000px) { .footage { max-width:700px; } .footage-frame { aspect-ratio:1.5/1; } .footage-reticle { width:min(58%,290px); } }
@media(max-width:560px) { .footage { padding:8px;border-radius:17px; } .footage-topline { font-size:.5rem; } .footage-frame { min-height:235px;aspect-ratio:.98/1; } .footage-label { padding:7px 8px;font-size:.48rem; } .footage-label-b { right:2%;top:42%; } .footage-label-c { left:4%;bottom:18%; } .footage figcaption { display:block; } .footage figcaption strong { display:block;max-width:none;text-align:left;margin-top:5px; } }
@media(prefers-reduced-motion:reduce) { .footage-live i,.footage-reticle::before,.footage-node,.footage-scan { animation:none!important; } }

/* Service pages: compact the footage card to approximately half its previous footprint.
   Booking keeps the larger visual card; radar, labels and scan effects remain intact. */
.services-page .footage,
.service-detail-page .footage {
  width: 100%;
  max-width: 280px;
  padding: 6px;
  border-radius: 16px;
}
.services-page .footage-frame,
.service-detail-page .footage-frame {
  min-height: 0;
  aspect-ratio: 1.16 / 1;
  border-radius: 10px;
}
.services-page .footage-topline,
.service-detail-page .footage-topline {
  min-height: 22px;
  padding: 1px 5px 7px;
  gap: 7px;
  font-size: .48rem;
}
.services-page .footage-label,
.service-detail-page .footage-label {
  padding: 6px 8px;
  font-size: clamp(.43rem, .56vw, .52rem);
  border-radius: 7px;
}
.services-page .footage-bottomline,
.service-detail-page .footage-bottomline {
  padding: 6px 8px;
  font-size: .49rem;
  border-radius: 7px;
}
.services-page .footage figcaption,
.service-detail-page .footage figcaption {
  gap: 8px;
  padding: 9px 4px 2px;
}
.services-page .footage figcaption span,
.service-detail-page .footage figcaption span {
  font-size: .47rem;
}
.services-page .footage figcaption strong,
.service-detail-page .footage figcaption strong {
  max-width: 62%;
  font-size: .66rem;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .services-page .footage,
  .service-detail-page .footage { max-width: 280px; }
  .services-page .footage-frame,
  .service-detail-page .footage-frame { min-height: 0; aspect-ratio: 1.16 / 1; }
  .services-page .footage figcaption strong,
  .service-detail-page .footage figcaption strong { max-width: none; }
}