@font-face{font-family:Kanit;src:url('./Kanit-Regular.ttf')}@font-face{font-family:Kanit;src:url('./Kanit-Medium.ttf');font-weight:500}@font-face{font-family:Kanit;src:url('./Kanit-SemiBold.ttf');font-weight:600}
    :root{--ink:#1c2a32;--orange:#f97121;--pale:#fff3eb;--muted:#66757e;--line:#e1e7ea;--surface:#f6f8f9}*{box-sizing:border-box}html,body{margin:0}body{font-family:Kanit,Tahoma,sans-serif;color:var(--ink);background:#fff;font-size:14px;line-height:1.55}h1,h2,h3,p{margin-top:0}a{text-decoration:none;color:inherit}.container{width:min(1300px,calc(100% - 64px));margin:auto}.sample-note{background:#eff3f5;color:#62737c;text-align:center;font-size:11px;padding:7px}.site-header{height:72px;background:#fff;box-shadow:0 1px 10px #19202310}.header-inner{display:flex;align-items:center;height:100%;gap:22px}.brand{width:145px;height:auto;margin-right:auto}.nav{display:flex;align-items:center;gap:5px}.nav span{padding:10px 12px;border-radius:8px;font-size:14px}.nav .active{color:#c65312;background:#fff0e7}.header-cta{padding:11px 17px;background:var(--orange);border-radius:24px;color:#fff;font-size:13px}.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:28px 0 60px}.hero:before{content:"";position:absolute;width:800px;height:800px;border:1px solid #ffffff13;border-radius:50%;right:-170px;top:-430px;box-shadow:0 0 0 42px #ffffff08,0 0 0 112px #ffffff05}.crumb{display:flex;gap:11px;color:#cbd4d8;font-size:12px;margin-bottom:31px}.hero-grid{display:grid;grid-template-columns:1.08fr .82fr;align-items:center;gap:8%;min-height:332px;position:relative}.eyebrow,.section-kicker{font-size:10px;letter-spacing:1.4px;color:#cb5b1e;font-weight:600}.eyebrow{color:#ffab7c}.eyebrow:before,.section-kicker:before{content:"";display:inline-block;width:23px;height:2px;margin:0 9px 3px 0;background:var(--orange)}.hero h1{font-size:55px;line-height:1.18;font-weight:600;letter-spacing:-.5px;margin:15px 0 20px}.hero h1 em{font-style:normal;color:#ff873d}.hero p{color:#d0d8dc;font-size:15px;max-width:650px;line-height:1.8;margin-bottom:24px}.buttons{display:flex;gap:11px}.button{display:inline-flex;align-items:center;gap:18px;padding:12px 20px;border-radius:6px;font-size:13px;font-weight:500}.button.primary{background:var(--orange);color:#fff}.button.outline{border:1px solid #ffffff72;color:#fff}.hero-card{min-height:295px;border:1px solid #ffffff29;border-radius:12px;background:linear-gradient(145deg,#ffffff12,#ffffff05);padding:27px 29px;display:flex;flex-direction:column;justify-content:space-between}.hero-card small{color:#ffad7b;letter-spacing:1.2px}.hero-card strong{font-size:35px;line-height:1.3;font-weight:500}.hero-card strong em{font-style:normal;color:#ff873d}.hero-card-bottom{border-top:1px solid #ffffff28;padding-top:15px;color:#d8e0e4;font-size:12px}.section{padding:54px 0}.section.alt{background:var(--surface)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:24px}.section-head h2{font-size:30px;line-height:1.25;font-weight:600;margin:9px 0 0}.section-head p{color:var(--muted);max-width:400px;margin:0}.number{color:var(--orange);font-size:11px;margin-right:7px}.grid{display:grid;gap:15px}.g5{grid-template-columns:repeat(5,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px;min-height:135px}.card h3{font-size:17px;font-weight:500;margin:8px 0 8px}.card p{color:var(--muted);font-size:12px;margin:0;line-height:1.6}.mini{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--pale);color:#d35d1e;font-size:12px;font-weight:600}.system-card{min-height:190px;border-top:3px solid var(--orange)}.system-card small{color:#b45b2d;font-size:10px;letter-spacing:1px}.camera-card{min-height:155px}.camera-icon{height:48px;display:flex;align-items:center}.camera-icon i{display:block;width:61px;height:26px;border:3px solid #e58750;border-radius:9px;transform:skew(-10deg);position:relative}.camera-icon i:after{content:"";position:absolute;width:12px;height:12px;background:#e58750;border-radius:50%;right:7px;top:4px}.feature-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}.feature-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.feature-pills div{padding:15px 16px;background:#fff;border:1px solid var(--line);border-radius:9px;font-size:13px}.feature-pills b{display:block;color:var(--orange);font-size:11px;margin-bottom:4px}.feature-note{padding:20px 24px;background:#eaf0f3;border-left:3px solid var(--orange);border-radius:5px;color:#53636d;font-size:13px}.recording{display:grid;grid-template-columns:1fr 1fr;gap:28px}.diagram{background:#1c2a32;color:#fff;border-radius:10px;padding:23px;display:grid;grid-template-columns:1fr 35px 1fr 35px 1fr;gap:7px;align-items:center}.diagram div{background:#ffffff13;border:1px solid #ffffff25;border-radius:7px;padding:15px 8px;text-align:center;font-size:13px}.diagram span{text-align:center;color:#ff995b;font-size:23px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.checks div{border-bottom:1px solid var(--line);padding:0 0 9px;font-size:13px}.checks div:before{content:"•";color:var(--orange);margin-right:9px}.survey{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px}.survey .card{min-height:105px}.sectors{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.sector{background:#fff;border:1px solid var(--line);border-radius:9px;padding:18px;min-height:120px}.sector b{display:block;font-size:16px;margin-bottom:5px}.sector small{color:var(--muted)}.process{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.step{border-top:2px solid var(--orange);padding:15px 12px;background:#fff;border-radius:0 0 8px 8px;box-shadow:0 5px 22px #1d2a3209}.step small{color:#d65f20}.step b{display:block;margin:7px 0;font-size:15px;font-weight:500}.step p{font-size:11px;color:var(--muted);margin:0}.care{background:#202d35;color:#fff}.care .section-kicker{color:#ffab7c}.care h2{color:#fff}.care .section-head p{color:#bdcbd1}.care .card{background:#ffffff0d;border-color:#ffffff24;min-height:120px}.care .card h3{color:#fff}.care .card p{color:#c5d0d4}.faq{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}.faq div{padding:15px 17px;background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;justify-content:space-between;font-size:13px}.faq div span{color:var(--orange);font-size:20px;line-height:1}.final{background:#1c2a32;color:#fff;padding:54px 0}.final-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px}.final h2{font-size:35px;line-height:1.25;margin:10px 0 15px}.final p{color:#ced8dc;margin-bottom:0}.form-preview{border:1px solid #ffffff2d;border-radius:10px;background:#ffffff0e;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.field{padding:12px 14px;border-radius:6px;background:#fff;color:#7c898f;font-size:12px}.field.wide{grid-column:1/-1}.form-preview .button{justify-content:center;grid-column:1/-1}.site-footer{background:#1d2327;color:#9eaaaf;padding:24px 0;font-size:11px}.site-footer .container{display:flex;justify-content:space-between}
    @media(max-width:800px){.nav{display:none}.container{width:calc(100% - 36px)}.hero-grid,.feature-wrap,.recording,.final-grid{grid-template-columns:1fr}.g5,.g4,.g3,.sectors,.process,.survey{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:39px}.section-head{display:block}.section-head p{margin-top:10px}.hero-card{min-height:240px}.faq{grid-template-columns:1fr}}
  
/* Published CCTV service page: imagery sits in content, never in the shared inner-page banner. */
.cctv-page .hero { padding: 30px 0 62px; }
.cctv-page main section[id] { scroll-margin-top: 86px; }
.cctv-page .hero-grid { min-height: 338px; }
.cctv-page .hero .button:focus-visible,.cctv-page .faq summary:focus-visible,.cctv-page .button:focus-visible { outline: 3px solid #ffad7b; outline-offset: 3px; }
.cctv-page .card>svg { width: 34px; height: 34px; padding: 6px; color: #cf5a20; border-radius: 8px; background: #fff3eb; }
.cctv-page .camera-icon svg { width: 48px; height: 48px; color: #d65f20; }
.cctv-page .feature-pills div { display: flex; align-items: center; gap: 11px; }
.cctv-page .feature-pills b { margin: 0; }
.cctv-page .feature-pills svg { width: 22px; height: 22px; flex: 0 0 22px; color: #d65f20; }
.cctv-page figure { margin: 0; }
.cctv-page .service-photo { position: relative; height: 300px; margin-top: 22px; overflow: hidden; border-radius: 11px; }
.cctv-page .service-photo img,.cctv-page .system-photo img,.cctv-page .planning-photo img,.cctv-page .sector-photos img,.cctv-page .care-photo img { width: 100%; height: 100%; object-fit: cover; }
.cctv-page .service-photo img { object-position: center 45%; }
.cctv-page .service-photo:after,.cctv-page .system-photo:after,.cctv-page .planning-photo:after,.cctv-page .care-photo:after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent,#0f1b22af); pointer-events: none; }
.cctv-page figcaption { position: absolute; z-index: 1; left: 22px; bottom: 17px; color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 1px 5px #0008; }
.cctv-page .system-photo { position: relative; height: 270px; margin-top: 20px; overflow: hidden; border-radius: 11px; }
.cctv-page .planning-photo { position: relative; height: 330px; margin-top: 20px; overflow: hidden; border-radius: 11px; }
.cctv-page .sector-photos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 16px; }
.cctv-page .sector-photos figure { position: relative; height: 220px; overflow: hidden; border-radius: 9px; background: #dce3e7; }
.cctv-page .sector-photos figure:after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent,#0f1b22ad); }
.cctv-page .sector-photos figcaption { left: 16px; bottom: 12px; }
.cctv-page .care-photo { position: relative; height: 300px; margin-top: 22px; overflow: hidden; border-radius: 10px; }
.cctv-page .faq details { display: block; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.cctv-page .faq summary { display: block; position: relative; padding: 15px 38px 15px 17px; cursor: pointer; list-style: none; }
.cctv-page .faq summary::-webkit-details-marker { display: none; }
.cctv-page .faq summary:after { content: "+"; position: absolute; right: 16px; top: 10px; color: var(--orange); font: 24px Arial,sans-serif; }
.cctv-page .faq details[open] summary:after { content: "−"; }
.cctv-page .faq details p { padding: 0 17px 15px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.cctv-page .contact-brief { border: 1px solid #ffffff2d; border-radius: 10px; background: #ffffff0e; padding: 25px; }
.cctv-page .contact-brief strong { display: block; font-size: 19px; font-weight: 500; }
.cctv-page .contact-brief ul { padding: 0; margin: 18px 0 22px; list-style: none; }
.cctv-page .contact-brief li { padding: 7px 0; border-top: 1px solid #ffffff25; color: #d4dee1; font-size: 13px; }
.cctv-page .contact-brief li:before { content: "✓"; margin-right: 12px; color: #ff995b; }
.cctv-page .contact-brief .button { width: 100%; justify-content: center; }
@media(max-width:800px){.cctv-page .service-photo,.cctv-page .planning-photo,.cctv-page .care-photo{height:240px}.cctv-page .system-photo{height:220px}.cctv-page .sector-photos{grid-template-columns:1fr 1fr}.cctv-page .sector-photos figure{height:180px}}
@media(max-width:560px){.cctv-page .section{padding:42px 0}.cctv-page .service-photo,.cctv-page .planning-photo,.cctv-page .care-photo{height:200px}.cctv-page .system-photo{height:190px}.cctv-page .sector-photos{grid-template-columns:1fr}.cctv-page .sector-photos figure{height:190px}.cctv-page .feature-pills{grid-template-columns:1fr 1fr}.cctv-page .process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cctv-page .hero h1{font-size:34px;line-height:1.19}}

/* Editorial rhythm for the published CCTV page. */
.cctv-page .section { padding: 86px 0; }
.cctv-page .section-head { gap: 56px; margin-bottom: 32px; }
.cctv-page .section-head h2 { max-width: 800px; margin-top: 13px; font-size: clamp(33px,3.15vw,44px); line-height: 1.2; letter-spacing: -.45px; }
.cctv-page .section-head>p { max-width: 370px; font-size: 15px; line-height: 1.75; }
.cctv-page .section-kicker { display: inline-flex; align-items: center; gap: 10px; letter-spacing: 1.9px; }
.cctv-page .section-kicker:before { margin: 0; }
.cctv-page .number { display: inline-block; margin-right: 13px; font-size: 13px; font-weight: 500; vertical-align: 4px; }
.cctv-page .card { box-shadow: 0 8px 24px #182d3b08; }
.cctv-page .hero { padding-bottom: 76px; }
.cctv-page .hero h1 { font-size: clamp(48px,4.4vw,65px); }
.cctv-page .hero-card { position: relative; overflow: hidden; min-height: 320px; padding: 31px 36px; background: linear-gradient(145deg,#ffffff16,#ffffff05); }
.cctv-page .hero-card:after { position: absolute; right: -66px; top: -68px; width: 220px; height: 220px; content: ""; border: 1px solid #f9712159; border-radius: 50%; box-shadow: 0 0 0 30px #f9712112,0 0 0 65px #f9712108; pointer-events: none; }
.cctv-page .hero-card>* { position: relative; z-index: 1; }
.cctv-page .hero-card strong { font-size: clamp(34px,3vw,43px); }

/* The scope reads as a visual service overview, not another card strip. */
.cctv-page #cctv-scope>.container { display: grid; grid-template-columns: minmax(0,1.03fr) minmax(0,.97fr); gap: 0 24px; }
.cctv-page #cctv-scope .section-head { grid-column: 1/-1; }
.cctv-page #cctv-scope .service-photo { grid-column: 1; grid-row: 2; height: 100%; min-height: 580px; margin: 0; }
.cctv-page #cctv-scope .service-photo img { object-position: 55% center; }
.cctv-page #cctv-scope .grid.g5 { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; gap: 9px; }
.cctv-page #cctv-scope .card { display: grid; grid-template-columns: 50px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 16px; align-content: center; min-height: 105px; padding: 15px 20px; transition: transform .2s,border-color .2s,box-shadow .2s; }
.cctv-page #cctv-scope .card:hover { transform: translateX(4px); border-color: #f9712160; box-shadow: 0 12px 24px #182d3b10; }
.cctv-page #cctv-scope .card>svg { grid-row: 1/3; width: 46px; height: 46px; padding: 10px; align-self: center; }
.cctv-page #cctv-scope .card h3 { margin: 0 0 3px; font-size: 18px; }
.cctv-page #cctv-scope .card p { font-size: 13px; }

/* System options keep their comparison role while the image acts as context. */
.cctv-page #cctv-systems>.container { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 0 28px; }
.cctv-page #cctv-systems .section-head { grid-column: 1/-1; }
.cctv-page #cctv-systems .grid.g4 { grid-column: 1; grid-row: 2; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.cctv-page #cctv-systems .system-card { min-height: 195px; padding: 23px; border-top: 0; border-left: 3px solid #f97121; }
.cctv-page #cctv-systems .system-card h3 { margin: 13px 0 7px; font-size: 21px; }
.cctv-page #cctv-systems .system-card p { font-size: 13px; }
.cctv-page #cctv-systems .system-photo { grid-column: 2; grid-row: 2; height: 100%; min-height: 400px; margin: 0; }
.cctv-page #cctv-systems .system-photo img { object-position: 58% center; }

.cctv-page #cctv-cameras .grid.g4 { gap: 16px; }
.cctv-page #cctv-cameras .camera-card { position: relative; min-height: 218px; padding: 25px; overflow: hidden; }
.cctv-page #cctv-cameras .camera-card:after { position: absolute; right: -40px; top: -45px; width: 155px; height: 155px; content: ""; border: 1px solid #f9712124; border-radius: 50%; box-shadow: 0 0 0 22px #f9712108; }
.cctv-page #cctv-cameras .camera-icon { height: 72px; }
.cctv-page #cctv-cameras .camera-icon svg { width: 60px; height: 60px; padding: 11px; border-radius: 13px; background: #fff0e8; }
.cctv-page #cctv-cameras .camera-card h3 { font-size: 21px; }
.cctv-page #cctv-cameras .camera-card p { font-size: 13px; }

/* A deliberate dark technical chapter breaks up the run of white sections. */
.cctv-page #cctv-features { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #21313a; }
.cctv-page #cctv-features:before { position: absolute; z-index: -1; right: -140px; top: -220px; width: 650px; height: 650px; content: ""; border: 1px solid #ffffff12; border-radius: 50%; box-shadow: 0 0 0 55px #ffffff06,0 0 0 120px #ffffff04; }
.cctv-page #cctv-features .section-kicker,.cctv-page #cctv-features .number { color: #ffab7c; }
.cctv-page #cctv-features .section-head h2 { color: #fff; }
.cctv-page #cctv-features .section-head>p { color: #c8d5db; }
.cctv-page #cctv-features .feature-wrap { grid-template-columns: 1.35fr .65fr; gap: 22px; }
.cctv-page #cctv-features .feature-pills { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.cctv-page #cctv-features .feature-pills>div { min-height: 84px; padding: 17px 18px; border: 1px solid #ffffff26; border-radius: 10px; color: #fff; background: #ffffff0b; font-size: 15px; }
.cctv-page #cctv-features .feature-pills svg { width: 27px; height: 27px; flex-basis: 27px; color: #ff9b61; }
.cctv-page #cctv-features .feature-pills b { color: #ff9b61; }
.cctv-page #cctv-features .feature-note { display: flex; align-items: center; min-height: 276px; padding: 35px; border: 1px solid #ffae7f66; border-left: 4px solid #f97121; border-radius: 10px; color: #f6e2d5; background: linear-gradient(145deg,#f9712129,#ffffff08); font-size: 19px; line-height: 1.7; }

.cctv-page #cctv-recording { background: #eaf0f3; }
.cctv-page #cctv-recording .recording { grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: stretch; }
.cctv-page #cctv-recording .diagram { min-height: 275px; padding: 30px; grid-template-columns: 1fr 27px 1fr 27px 1fr; border-radius: 14px; background: #1c2a32; }
.cctv-page #cctv-recording .diagram div { display: grid; place-items: center; min-height: 140px; padding: 22px 12px; border-radius: 9px; font-size: 15px; line-height: 1.55; }
.cctv-page #cctv-recording .checks { align-content: center; gap: 5px 18px; }
.cctv-page #cctv-recording .checks div { display: flex; align-items: center; min-height: 62px; padding: 10px 0; font-size: 14px; }

.cctv-page #cctv-planning>.container { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 0 24px; }
.cctv-page #cctv-planning .section-head { grid-column: 1/-1; }
.cctv-page #cctv-planning .survey { grid-column: 1; grid-row: 2; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.cctv-page #cctv-planning .survey .card { display: flex; flex-direction: column; justify-content: center; min-height: 172px; padding: 21px; }
.cctv-page #cctv-planning .survey .card h3 { font-size: 18px; }
.cctv-page #cctv-planning .survey .card p { font-size: 13px; }
.cctv-page #cctv-planning .planning-photo { grid-column: 2; grid-row: 2; height: 100%; min-height: 356px; margin: 0; }

.cctv-page #cctv-sectors .sectors { display: flex; flex-wrap: wrap; gap: 9px; }
.cctv-page #cctv-sectors .sector { flex: 1 1 170px; min-height: 0; padding: 12px 15px; border-radius: 7px; background: transparent; }
.cctv-page #cctv-sectors .sector b { margin: 0; font-size: 15px; }
.cctv-page #cctv-sectors .sector small { display: block; font-size: 11px; }
.cctv-page #cctv-sectors .sector-photos { grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; margin-top: 14px; }
.cctv-page #cctv-sectors .sector-photos figure { height: 325px; }
.cctv-page #cctv-sectors .sector-photos img { transition: transform .45s ease; }
.cctv-page #cctv-sectors .sector-photos figure:hover img { transform: scale(1.045); }

/* The six delivery stages form one directional track instead of six small cards. */
.cctv-page #cctv-process { position: relative; overflow: hidden; background: #eef3f5; }
.cctv-page #cctv-process .section-head { margin-bottom: 38px; }
.cctv-page #cctv-process .section-head h2 { font-size: clamp(42px,4.5vw,62px); }
.cctv-page #cctv-process .process { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; filter: drop-shadow(0 22px 20px #1c2a3220); }
.cctv-page #cctv-process .step { position: relative; z-index: 1; min-height: 230px; padding: 33px 30px 24px 28px; border: 0; border-radius: 0; color: #fff; background: #243641; box-shadow: none; clip-path: polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%,20px 50%); }
.cctv-page #cctv-process .step:first-child { padding-left: 25px; clip-path: polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%); background: #e76420; }
.cctv-page #cctv-process .step:nth-child(2) { background: #2b414e; }
.cctv-page #cctv-process .step:nth-child(3) { background: #314957; }
.cctv-page #cctv-process .step:nth-child(4) { background: #38515d; }
.cctv-page #cctv-process .step:nth-child(5) { background: #3e5964; }
.cctv-page #cctv-process .step:last-child { background: #e76420; }
.cctv-page #cctv-process .step small { display: block; color: #ffffffb8; font: 600 39px/1 Kanit,Tahoma,sans-serif; letter-spacing: -2px; }
.cctv-page #cctv-process .step b { display: block; margin: 25px 0 8px; color: #fff; font-size: clamp(16px,1.4vw,21px); font-weight: 600; line-height: 1.3; }
.cctv-page #cctv-process .step p { max-width: 145px; color: #dbe5e9; font-size: 13px; line-height: 1.6; }
.cctv-page #cctv-process .step:first-child p,.cctv-page #cctv-process .step:last-child p { color: #fff2e8; }
.cctv-page #cctv-process .step { transition: transform .22s ease,filter .22s ease; }
@media(hover:hover) and (min-width:621px){
  .cctv-page #cctv-process .step:hover { z-index: 2; transform: translateY(-7px); filter: brightness(1.08); }
  .cctv-page #cctv-features .feature-pills>div { transition: background .2s,border-color .2s; }
  .cctv-page #cctv-features .feature-pills>div:hover { border-color: #ff995b88; background: #ffffff18; }
}
@media(prefers-reduced-motion:reduce){
  .cctv-page #cctv-process .step,.cctv-page #cctv-features .feature-pills>div,.cctv-page #cctv-sectors .sector-photos img { transition: none; }
}

.cctv-page #cctv-care>.container { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 0 25px; }
.cctv-page #cctv-care .section-head { grid-column: 1/-1; }
.cctv-page #cctv-care .grid.g3 { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: 11px; }
.cctv-page #cctv-care .card { display: flex; flex-direction: column; justify-content: center; min-height: 115px; padding: 18px 24px; border-left: 3px solid #f97121; }
.cctv-page #cctv-care .card h3 { margin: 0 0 4px; font-size: 19px; }
.cctv-page #cctv-care .card p { font-size: 13px; }
.cctv-page #cctv-care .care-photo { grid-column: 2; grid-row: 2; height: 100%; min-height: 365px; margin: 0; }
.cctv-page #cctv-care .care-photo img { object-position: 70% center; }
.cctv-page #cctv-faq .faq { gap: 12px 18px; }
.cctv-page #cctv-faq .faq details { border-radius: 9px; }
.cctv-page #cctv-faq .faq summary { padding: 19px 42px 19px 21px; font-size: 15px; }
.cctv-page #cctv-faq .faq summary:after { top: 15px; }
.cctv-page #cctv-faq .faq details p { padding: 0 21px 20px; font-size: 13px; }

@media(max-width:1100px){
  .cctv-page #cctv-scope .service-photo { min-height: 600px; }
  .cctv-page #cctv-systems .system-photo { min-height: 430px; }
  .cctv-page #cctv-process .process { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .cctv-page #cctv-process .step { min-height: 200px; }
}
@media(max-width:800px){
  .cctv-page .section { padding: 66px 0; }
  .cctv-page .section-head { display: block; margin-bottom: 25px; }
  .cctv-page .section-head>p { max-width: 600px; margin-top: 13px; }
  .cctv-page #cctv-scope>.container,.cctv-page #cctv-systems>.container,.cctv-page #cctv-planning>.container,.cctv-page #cctv-care>.container { display: block; }
  .cctv-page #cctv-scope .grid.g5 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cctv-page #cctv-scope .service-photo { height: 320px; min-height: 0; margin-top: 16px; }
  .cctv-page #cctv-systems .grid.g4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cctv-page #cctv-systems .system-photo { height: 300px; min-height: 0; margin-top: 16px; }
  .cctv-page #cctv-planning .survey { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cctv-page #cctv-planning .planning-photo { height: 300px; min-height: 0; margin-top: 16px; }
  .cctv-page #cctv-care .grid.g3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cctv-page #cctv-care .care-photo { height: 280px; min-height: 0; margin-top: 16px; }
  .cctv-page #cctv-sectors .sector-photos figure { height: 230px; }
}
@media(max-width:620px){
  .cctv-page .section { padding: 52px 0; }
  .cctv-page .section-head h2 { font-size: 32px; }
  .cctv-page .section-head>p { font-size: 13px; }
  .cctv-page #cctv-scope .grid.g5 { grid-template-columns: 1fr; }
  .cctv-page #cctv-scope .card { min-height: 85px; padding: 12px 15px; }
  .cctv-page #cctv-scope .service-photo { height: 230px; }
  .cctv-page #cctv-systems .system-card { min-height: 175px; padding: 17px; }
  .cctv-page #cctv-systems .system-card h3 { font-size: 18px; }
  .cctv-page #cctv-systems .system-photo { height: 220px; }
  .cctv-page #cctv-cameras .grid.g4 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .cctv-page #cctv-cameras .camera-card { min-height: 190px; padding: 18px; }
  .cctv-page #cctv-features .feature-wrap { grid-template-columns: 1fr; }
  .cctv-page #cctv-features .feature-pills { grid-template-columns: 1fr 1fr; }
  .cctv-page #cctv-features .feature-pills>div { min-height: 80px; padding: 11px; font-size: 12px; }
  .cctv-page #cctv-features .feature-pills b { display: none; }
  .cctv-page #cctv-features .feature-note { min-height: 0; padding: 22px; font-size: 15px; }
  .cctv-page #cctv-recording .recording { grid-template-columns: 1fr; }
  .cctv-page #cctv-recording .diagram { min-height: 0; padding: 17px; grid-template-columns: 1fr 18px 1fr 18px 1fr; }
  .cctv-page #cctv-recording .diagram div { min-height: 112px; padding: 10px 5px; font-size: 12px; }
  .cctv-page #cctv-planning .survey .card { min-height: 150px; padding: 16px; }
  .cctv-page #cctv-planning .planning-photo { height: 230px; }
  .cctv-page #cctv-sectors .sector-photos { grid-template-columns: 1fr; }
  .cctv-page #cctv-sectors .sector-photos figure { height: 210px; }
  .cctv-page #cctv-process .process { grid-template-columns: 1fr; gap: 0; filter: none; }
  .cctv-page #cctv-process .step,.cctv-page #cctv-process .step:first-child { min-height: 0; margin-left: 17px; padding: 17px 18px 20px 27px; border-left: 3px solid #ef7a3f; border-bottom: 1px solid #dce5e9; color: #21313a; background: #fff; clip-path: none; }
  .cctv-page #cctv-process .step:first-child { border-radius: 10px 10px 0 0; }
  .cctv-page #cctv-process .step:last-child { border-radius: 0 0 10px 10px; background: #fff; }
  .cctv-page #cctv-process .step:nth-child(n) { background: #fff; }
  .cctv-page #cctv-process .step:before { position: absolute; left: -11px; top: 22px; width: 19px; height: 19px; content: ""; border: 4px solid #f97121; border-radius: 50%; background: #fff; }
  .cctv-page #cctv-process .step small { display: inline-block; color: #d65f20; font-size: 25px; }
  .cctv-page #cctv-process .step b { display: inline-block; margin: 0 0 0 15px; color: #21313a; font-size: 19px; }
  .cctv-page #cctv-process .step p,.cctv-page #cctv-process .step:first-child p,.cctv-page #cctv-process .step:last-child p { max-width: none; margin: 4px 0 0 45px; color: #66757e; }
  .cctv-page #cctv-care .grid.g3 { grid-template-columns: 1fr; }
  .cctv-page #cctv-care .card { min-height: 95px; }
  .cctv-page #cctv-care .care-photo { height: 220px; }
}

/* Refinement: functional hierarchy instead of isolated accent strokes. */
.cctv-page .section-kicker:before,.cctv-page .eyebrow:before { display: none; }
.cctv-page .section-head h2 .number,.cctv-page .final h2 .number {
  display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center;
  margin: 0 15px 0 0; border-radius: 11px; background: #f97121; color: #fff;
  font-size: 19px; font-weight: 600; line-height: 1; letter-spacing: 0; vertical-align: middle;
}
.cctv-page #cctv-systems .system-card {
  border: 1px solid #dce4e8; background: linear-gradient(145deg,#fff,#f8fafb);
  box-shadow: 0 12px 26px #182d3b0b; transition: transform .2s,box-shadow .2s;
}
.cctv-page #cctv-systems .system-card:hover { transform: translateY(-4px); box-shadow: 0 18px 30px #182d3b16; }
.cctv-page #cctv-systems .system-card small {
  display: inline-block; padding: 7px 10px; border-radius: 5px; color: #a84715;
  background: #fff0e8; font-size: 10px; font-weight: 600; letter-spacing: .65px;
}
.cctv-page #cctv-care .card { border-left: 1px solid #ffffff24; }
.cctv-page #cctv-features .feature-pills b {
  display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center;
  border-radius: 10px; color: #fff; background: #e86a2b; font-size: 17px; font-weight: 600;
}
.cctv-page #cctv-features .feature-pills svg { color: #f5b38f; }
.cctv-page #cctv-features .feature-note { border-left: 1px solid #ffae7f66; }

/* A single connected route makes the six work stages feel like one project. */
.cctv-page #cctv-process .process {
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 0; padding: 41px 25px 38px; border-radius: 18px; background: #21343f; filter: none;
  box-shadow: 0 24px 42px #14263320;
}
.cctv-page #cctv-process .process:before {
  position: absolute; z-index: 0; top: 76px; right: 74px; left: 74px; height: 4px;
  content: ""; border-radius: 4px; background: #ef7a3e;
}
.cctv-page #cctv-process .process:after {
  position: absolute; top: 69px; right: 68px; width: 15px; height: 15px;
  content: ""; border-top: 4px solid #ef7a3e; border-right: 4px solid #ef7a3e; transform: rotate(45deg);
}
.cctv-page #cctv-process .step,.cctv-page #cctv-process .step:nth-child(n) {
  display: flex; min-height: 200px; flex-direction: column; align-items: center; padding: 0 9px;
  border: 0; border-radius: 0; color: #fff; background: transparent; box-shadow: none;
  clip-path: none; text-align: center; transform: none;
}
.cctv-page #cctv-process .step small {
  position: relative; z-index: 1; display: grid; width: 74px; height: 74px; flex: 0 0 74px;
  place-items: center; border: 5px solid #21343f; border-radius: 50%;
  color: #fff; background: #ed7134; box-shadow: 0 0 0 2px #ffa16d;
  font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: 0;
}
.cctv-page #cctv-process .step b { margin: 24px 0 6px; color: #fff; font-size: 20px; line-height: 1.35; }
.cctv-page #cctv-process .step p,.cctv-page #cctv-process .step:first-child p,.cctv-page #cctv-process .step:last-child p {
  max-width: 155px; margin: 0; color: #c9d7de; font-size: 13px; line-height: 1.6;
}
.cctv-page #cctv-process .step:before { display: none; }
@media(hover:hover) and (min-width:1101px){
  .cctv-page #cctv-process .step:hover small { background: #ff8b4d; transform: scale(1.06); }
}
@media(max-width:1100px){
  .cctv-page #cctv-process .process { display: block; padding: 25px 28px 25px 30px; }
  .cctv-page #cctv-process .process:before { top: 65px; bottom: 65px; left: 65px; width: 4px; height: auto; }
  .cctv-page #cctv-process .process:after { display: none; }
  .cctv-page #cctv-process .step,.cctv-page #cctv-process .step:nth-child(n) {
    display: grid; min-height: 108px; grid-template-columns: 74px minmax(0,1fr); grid-template-rows: auto auto;
    align-items: start; padding: 12px 10px; text-align: left;
  }
  .cctv-page #cctv-process .step small { width: 62px; height: 62px; flex-basis: 62px; grid-row: 1/3; font-size: 22px; }
  .cctv-page #cctv-process .step b { margin: 6px 0 2px; font-size: 20px; }
  .cctv-page #cctv-process .step p,.cctv-page #cctv-process .step:first-child p,.cctv-page #cctv-process .step:last-child p {
    max-width: none; margin: 0; font-size: 13px;
  }
}
@media(max-width:620px){
  .cctv-page .section-head h2 .number,.cctv-page .final h2 .number {
    width: 42px; height: 42px; margin-right: 9px; border-radius: 9px; font-size: 16px;
  }
  .cctv-page #cctv-features .feature-pills { grid-template-columns: 1fr; }
  .cctv-page #cctv-features .feature-pills>div { min-height: 70px; font-size: 14px; }
  .cctv-page #cctv-features .feature-pills b { width: 39px; height: 39px; flex-basis: 39px; font-size: 16px; }
  .cctv-page #cctv-process .process { padding: 21px 15px; }
  .cctv-page #cctv-process .process:before { top: 54px; bottom: 54px; left: 48px; width: 3px; }
  .cctv-page #cctv-process .step,.cctv-page #cctv-process .step:nth-child(n) {
    min-height: 92px; grid-template-columns: 61px minmax(0,1fr); padding: 12px 0;
  }
  .cctv-page #cctv-process .step small { width: 56px; height: 56px; flex-basis: 56px; font-size: 20px; }
  .cctv-page #cctv-process .step b { margin: 4px 0 1px; font-size: 18px; }
}