/* Tracked N Solved WordPress service-page modules. Scoped, prefix .tnsx-. Built 2026-10-09.
   Used on /security-surveillance/ (template: /root/claude-kb/tns-page-template.md). Palette = city pages (tns.css). */
.tnsx{--navy:#00007C;--navy-d:#0A1F44;--gold:#c9a227;--ink:#2c2c2c;--text:#4a4a4a;--line:#dfe2e8;--green:#1e8e3e;
  --tan:#f7f3ea;--gray:#f3f4f6;font-family:"Source Sans Pro","Source Sans 3",Arial,sans-serif;line-height:1.5;color:var(--text);box-sizing:border-box}
.tnsx *,.tnsx *::before,.tnsx *::after{box-sizing:border-box}
.tnsx img{max-width:100%;height:auto;display:block}
.tnsx .tnsx-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnsx .tnsx-hp{position:absolute!important;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none}   /* honeypot: hidden without a far-off-screen offset */

/* The critical no-sideways-movement rules (html/section overflow clip, images, long words, off-canvas, entrance animations, Turnstile/map clipping) live in assets/tns-wp-head.css,
   which is stored in the page's Elementor custom CSS and loads in the <head>. This file only holds module styling. */
/* ---- full-bleed Elementor wrappers (module sections: no boxed width, no gaps, no padding) ---- */
.elementor-section.tnsx-full{padding:0!important;margin:0!important}
.elementor-section.tnsx-full>.elementor-container{max-width:none!important;width:100%!important;padding:0!important}
.elementor-section.tnsx-full .elementor-column,.elementor-section.tnsx-full .elementor-widget-wrap,.elementor-section.tnsx-full .elementor-element-populated{padding:0!important;margin:0!important;width:100%!important}
.elementor-section.tnsx-full .elementor-widget,.elementor-section.tnsx-full .elementor-widget-container{margin:0!important;padding:0!important}

/* ---- light section backgrounds (painted by CSS so they run full viewport width) ---- */
.elementor-section.tnsx-sec{padding-top:64px!important;padding-bottom:64px!important;background-image:none!important}
.elementor-section.tnsx-sec>.elementor-background-overlay,.elementor-section.tnsx-sec>.elementor-background-video-container{display:none!important}
.elementor-section.tnsx-tan{background-color:#f7f3ea!important}
.elementor-section.tnsx-gray{background-color:#f3f4f6!important}
.elementor-section.tnsx-sec .elementor-widget-text-editor,.elementor-section.tnsx-sec .elementor-widget-text-editor p,.elementor-section.tnsx-sec .elementor-icon-list-text{color:#2c2c2c}
.elementor-section.tnsx-sec .elementor-heading-title{color:#2c2c2c}
.elementor-section.tnsx-intro .elementor-widget-text-editor,.elementor-section.tnsx-intro .elementor-widget-text-editor p{font-size:19px;line-height:1.7;color:#2c2c2c}
.elementor-section.tnsx-intro .elementor-container{max-width:980px}

.elementor-section.tnsx-ctawrap>.elementor-container{max-width:none!important;width:100%!important;padding:0!important}
.elementor-section.tnsx-ctawrap>.elementor-container>.elementor-column,.elementor-section.tnsx-ctawrap>.elementor-container>.elementor-column>.elementor-widget-wrap{padding:0!important;width:100%!important}
/* inner dark-photo CTA sits in a light wrapper, rounded like the modules */
.elementor-section.tnsx-ctawrap .elementor-inner-section.tnsx-ctapanel{border-radius:12px;overflow:hidden;width:97%;margin-inline:auto}
.elementor-section.tnsx-ctawrap .elementor-inner-section.tnsx-ctapanel .elementor-heading-title,.elementor-section.tnsx-ctawrap .elementor-inner-section.tnsx-ctapanel .elementor-widget-text-editor,.elementor-section.tnsx-ctawrap .elementor-inner-section.tnsx-ctapanel .elementor-widget-text-editor p{color:#fff!important}

/* ---- 3-column CTA (type and field heights 1.2x, as the city pages) ---- */
.tnsx-cta{background:#F5F5F5;padding:70px 0}
.tnsx-cta .tnsx-grid{width:97%;margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.tnsx-cta .tnsx-col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px 30px 30px;display:flex;flex-direction:column;box-shadow:0 6px 22px rgba(10,31,68,.07)}
.tnsx-cta .tnsx-col h2{font-family:"Bebas Neue",Impact,sans-serif!important;font-weight:400!important;font-size:45.6px!important;line-height:1.1!important;letter-spacing:.2px;text-transform:none!important;color:var(--navy)!important;margin:0 0 18px!important;padding:0 0 10px!important;border-bottom:3px solid var(--gold);text-align:left!important}
.tnsx-cta .tnsx-pic{width:100%;height:150px;object-fit:cover;border-radius:8px;margin:0 0 18px}
.tnsx-cta .tnsx-lead{font-size:20.4px;line-height:1.5;color:var(--ink);margin:0 0 16px;font-weight:600}
.tnsx-cta .tnsx-ticks{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:12px}
.tnsx-cta .tnsx-ticks li{display:flex;gap:13px;align-items:flex-start;font-size:18.6px;line-height:1.4;margin:0;padding:0;list-style:none}
.tnsx-cta .tnsx-ticks li>i{color:var(--green);margin-top:4px;font-size:18px;flex:none}
.tnsx-cta .tnsx-ticks li b{display:block;color:var(--ink);font-weight:700;font-size:19.2px}
.tnsx-cta .tnsx-ticks li b a{color:var(--ink);text-decoration:none}
.tnsx-cta .tnsx-ticks li b a:hover{color:var(--navy);text-decoration:underline}
.tnsx-cta .tnsx-ticks li span{display:block;color:var(--text);font-size:17.4px}
.tnsx-cta form{display:flex;flex-direction:column;gap:12px;margin:0}
.tnsx-cta .tnsx-intro{margin:0 0 14px;font-size:18.6px;color:var(--text)}
.tnsx-cta input[type=text],.tnsx-cta input[type=email],.tnsx-cta input[type=tel],.tnsx-cta select,.tnsx-cta textarea{width:100%;max-width:none;font:400 19.2px/1.2 "Source Sans Pro",Arial,sans-serif;padding:0 16px;border:1px solid #b9bfca!important;border-radius:6px!important;background:#fff!important;color:var(--ink)!important;margin:0;box-shadow:none!important}
.tnsx-cta input[type=text],.tnsx-cta input[type=email],.tnsx-cta input[type=tel]{height:54.2px}
.tnsx-cta select{height:57.6px}
.tnsx-cta textarea{height:60px;max-height:60px;min-height:60px;resize:none;line-height:1.3;padding-top:12px;padding-bottom:12px}
.tnsx-cta input:focus,.tnsx-cta select:focus,.tnsx-cta textarea:focus{border-color:var(--navy);outline:2px solid rgba(0,0,124,.25)}
.tnsx-cta .cf-turnstile{width:100%;min-height:65px}
.tnsx-cta .tnsx-send{display:block;width:100%;height:54px;border:0;border-radius:3px;cursor:pointer;text-align:center;padding:0;font:700 18px/1 "Source Sans Pro",Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;background:var(--navy);color:#fff;transition:background .25s}
.tnsx-cta .tnsx-send:hover{background:#0b0bb0}
.tnsx-cta .tnsx-steps{list-style:none!important;margin:20px 0 0!important;padding:0!important;display:flex;flex-direction:column;gap:12px;counter-reset:s;flex:1;justify-content:space-evenly}
.tnsx-cta .tnsx-steps li{display:flex;gap:13px;font-size:18px;line-height:1.4;align-items:flex-start;margin:0;list-style:none}
.tnsx-cta .tnsx-steps li::before{counter-increment:s;content:counter(s);flex:none;width:28.8px;height:28.8px;border-radius:50%;background:var(--navy);color:#fff;font:700 15.6px/28.8px "Source Sans Pro",sans-serif;text-align:center;margin-top:1px}
.tnsx-cta .tnsx-formfill{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.tnsx-cta .tnsx-formfill>div{flex:1;display:flex;flex-direction:column}
.tnsx-cta .tnsx-secure{display:flex;gap:12px;align-items:center;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:16.8px;color:var(--text)}
.tnsx-cta .tnsx-secure i{color:var(--green);font-size:28.8px;flex:none}

/* ---- hotline (city-page design: navy gradient, gold number) inside a light wrapper ---- */
.tnsx-hotline{width:97%;margin-inline:auto;background:linear-gradient(135deg,var(--navy-d),var(--navy));color:#fff;text-align:center;padding:60px 20px 64px;border-radius:12px}
.tnsx-hotline h2{font-family:"Bebas Neue",Impact,sans-serif!important;font-weight:400!important;text-transform:none!important;color:#fff!important;font-size:clamp(48px,7.2vw,91.2px)!important;line-height:1.1!important;margin:0!important;padding:0!important}
.tnsx-hotline .tnsx-tel{display:inline-block;font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(52px,12vw,153.6px);line-height:1.05;color:var(--gold)!important;text-decoration:none!important;letter-spacing:1px;margin:6px 0}
.tnsx-hotline .tnsx-tel:hover,.tnsx-hotline .tnsx-tel:focus{color:#f0cb55!important}
.tnsx-hotline p{margin:6px 0 0!important;font-size:21.6px;color:#e9ecf7!important}

/* ---- map module: navy banner + map hugging its bottom edge ---- */
.tnsx-map{width:100%;margin:0;padding:0;background:var(--navy-d)}
.tnsx-map .tnsx-banner{background:var(--navy-d);color:#fff;text-align:center;padding:44px 20px 40px}
.tnsx-map .tnsx-banner h2{font-family:"Bebas Neue",Impact,sans-serif!important;font-weight:400!important;text-transform:none!important;color:#fff!important;font-size:clamp(34px,4.6vw,60px)!important;line-height:1.1!important;margin:0 auto!important;padding:0!important;max-width:1100px;text-wrap:balance}
.tnsx-map .tnsx-canvas{display:block;width:100%;height:600px;margin:0;background:#dfe6ee;position:relative;z-index:0}
.tnsx-map .tnsx-fallback{padding:24px;text-align:center;color:#2c2c2c;font-size:18px}
.tnsx-map .tnsx-fallback a{color:var(--navy)}
.tnsx-map .tnsx-skip{display:inline-block;margin-top:14px;color:#fff;font-size:17px;text-decoration:underline;text-underline-offset:3px;padding:6px 4px}
.tnsx-map .tnsx-skip:hover{color:#f0cb55}
.tnsx-map .tnsx-skip:focus-visible,.tnsx-map summary:focus-visible,.tnsx-map .tnsx-alllist a:focus-visible{outline:3px solid #c9a227;outline-offset:3px}
.tnsx-map .tnsx-alllist{background:#0A1F44;color:#fff;padding:18px 3%;border-top:1px solid rgba(255,255,255,.18)}
.tnsx-map .tnsx-alllist summary{cursor:pointer;font-size:19px;font-weight:700;padding:8px 0;color:#fff}
.tnsx-map .tnsx-alllist ul{list-style:none;margin:14px 0 6px;padding:0;columns:4;column-gap:28px}
.tnsx-map .tnsx-alllist li{break-inside:avoid;margin:0 0 4px;padding:0;font-size:16px;line-height:1.5}
.tnsx-map .tnsx-alllist a{color:#fff;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:3px 0}
.tnsx-map .tnsx-alllist a:hover{color:#f0cb55}
.tnsx-map .tnsx-alllist .tnsx-of{color:#f0cb55;font-weight:700}
.tnsx-map .marker-cluster.tnsx-cluster{background:none}
.tnsx-map .tnsx-cluster div{width:36px;height:36px;margin:2px;border-radius:50%;background:#3b6fd4;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);color:#fff;font:700 15px/30px "Source Sans Pro",Arial,sans-serif;text-align:center}
.tnsx-map .tnsx-cluster:focus-visible div,.tnsx-map .tnsx-cluster:focus div{outline:3px solid #c9a227;outline-offset:2px}
.tnsx-pin{background:none;border:0}
.tnsx-pin svg{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.tnsx-pin:focus-visible,.leaflet-marker-icon.tnsx-pin:focus{outline:3px solid #c9a227;outline-offset:2px;border-radius:6px}
.tnsx-pop{font-family:"Source Sans Pro",Arial,sans-serif;font-size:16px;line-height:1.4;color:#2c2c2c}
.tnsx-pop strong{display:block;font-size:19px;color:#00007C;margin-bottom:2px}
.tnsx-pop .tnsx-tag{display:inline-block;background:#c9a227;color:#0A1F44;font-weight:700;font-size:12px;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:3px;margin-bottom:6px}
.tnsx-pop p{margin:2px 0!important;font-size:16px}
.tnsx-map .tnsx-pop a{color:#00007C!important;font-weight:700}
.tnsx-map .tnsx-pop a.tnsx-go{display:inline-block;margin-top:8px;background:#00007C;color:#fff!important;text-decoration:none;padding:8px 14px;border-radius:3px;font-size:14px;letter-spacing:.5px;text-transform:uppercase}
.tnsx-map .tnsx-pop a.tnsx-go:hover{background:#0b0bb0}

@media (min-width:1600px){.tnsx-map .tnsx-canvas{height:640px}}
@media (min-width:1700px){.tnsx-map .tnsx-canvas{height:720px}}
#tnsx-bottom-cta{scroll-margin-top:24px}
#tnsx-bottom-cta:focus{outline:none}
@media (max-width:1100px){.tnsx-map .tnsx-alllist ul{columns:2}}
@media (max-width:1100px){.tnsx-cta .tnsx-grid{grid-template-columns:minmax(0,1fr)}}   /* minmax(0,..): a plain 1fr track grows to its content (the 300px Turnstile) and widened the page at 320px */
.tnsx-cta .tnsx-col,.tnsx-cta .tnsx-col>*,.tnsx-cta form,.tnsx-cta .tnsx-formfill,.tnsx-cta .tnsx-formfill>div{min-width:0;max-width:100%}
.tnsx-cta .tnsx-col,.tnsx-pop,.tnsx-alllist a,.tnsx-cta input,.tnsx-cta select,.tnsx-cta textarea{overflow-wrap:anywhere}
.tnsx-cta .cf-turnstile{overflow:hidden;max-width:100%}   /* tns-wp-modules.js scales the 300px widget down when the box is narrower */
.tnsx-hotline,.tnsx-hotline *{max-width:100%}
@media (max-width:600px){
  .tnsx-map .tnsx-canvas.leaflet-container{touch-action:pan-y!important}   /* one finger scrolls the page over the map; two fingers pinch/pan the map; +/- buttons and keys also work */
  .tnsx-cta{padding:48px 0}
  .tnsx-cta .tnsx-col{padding:22px 18px}
  .tnsx-cta .tnsx-col h2{font-size:40px!important}
  .elementor-section.tnsx-sec{padding-top:44px!important;padding-bottom:44px!important}
  .tnsx-hotline{padding:44px 14px 48px}
  .tnsx-map .tnsx-banner{padding:34px 18px 30px}
  .tnsx-map .tnsx-canvas{height:480px}
  .tnsx-map .tnsx-cluster div{width:28px;height:28px;margin:2px;font-size:13px;line-height:22px;border-width:2px}
  .tnsx-map .tnsx-alllist ul{columns:1}
}
@media (prefers-reduced-motion:reduce){.tnsx *{transition:none!important;animation:none!important}}