/* SS Computers CCTV page-specific styles — extracted from cctv.html. */

/* CCTV banner only: preserve shared SS Computers navigation, body and footer CSS. */
.ss-cctv-banner{background:#fff;padding:0}
.ss-cctv-banner-wrap{width:min(100% - 32px,1240px);margin-inline:auto;overflow:hidden;border-radius:18px}
.ss-cctv-banner-wrap img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
.ss-cctv-intro{padding:32px 0 42px;background:#f5faff}
.ss-cctv-intro .container{max-width:1240px}
.ss-cctv-intro h1{font-size:clamp(28px,3.5vw,44px);line-height:1.18;color:#103a74;margin:12px 0}
.ss-cctv-intro p{max-width:1100px;font-size:21px;line-height:1.7;color:#3b5574}
@media(max-width:767px){.ss-cctv-intro p{font-size:17px}}
.ss-cctv-intro .page-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
@media(max-width:767px){.ss-cctv-banner-wrap{width:calc(100% - 16px);border-radius:12px}.ss-cctv-intro{padding:24px 0 32px}}

/* CCTV service cards: approved design, no decorative numbering */
.cctv-page .cctv-service-grid article > h3{font-size:clamp(21px,1.7vw,25px);line-height:1.3;font-weight:800}
.cctv-page .cctv-service-grid article > span:first-child{display:none}

/* CCTV coverage image and four cards only — shared header/footer unaffected. */
.cctv-page .cctv-coverage .ss-cctv-installation-photo{position:relative;display:block;overflow:hidden;border-radius:24px;background:#eaf4ff;box-shadow:0 16px 42px rgba(18,73,142,.15);min-height:0;aspect-ratio:3/2;padding:0}
.cctv-page .cctv-coverage .ss-cctv-installation-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cctv-page .cctv-coverage .cctv-spec-grid>div{border:1px solid #d7e8ff;box-shadow:0 0 0 1px rgba(39,132,246,.07),0 0 20px rgba(30,122,242,.15),0 10px 28px rgba(21,75,142,.08);transition:box-shadow .2s ease,transform .2s ease}
.cctv-page .cctv-coverage .cctv-spec-grid>div:hover{box-shadow:0 0 26px rgba(30,122,242,.25),0 14px 30px rgba(21,75,142,.12);transform:translateY(-2px)}
/* Four coverage cards: existing page-only CSS; standard header/footer untouched. */
.cctv-page .cctv-coverage .cctv-spec-grid>div:nth-child(1){background:#eff6ff;border-color:#93c5fd;box-shadow:0 0 20px rgba(8,125,255,.17),0 10px 24px rgba(8,125,255,.07)}
.cctv-page .cctv-coverage .cctv-spec-grid>div:nth-child(1) strong{color:#087dff}
.cctv-page .cctv-coverage .cctv-spec-grid>div:nth-child(2){background:#fff5eb;border-color:#fdba74;box-shadow:0 0 20px rgba(234,118,0,.15),0 10px 24px rgba(234,118,0,.06)}
.cctv-page .cctv-coverage .cctv-spec-grid>div:nth-child(2) strong{color:#c45c00}
.cctv-page .cctv-coverage .cctv-spec-grid>div:nth-child(3){background:#effbf4;border-color:#86efac;box-shadow:0 0 20px rgba(22,163,74,.15),0 10px 24px rgba(22,163,74,.06)}
.cctv-page .cctv-coverage .cctv-spec-grid>div:nth-child(3) strong{color:#15803d}
.cctv-page .cctv-coverage .cctv-spec-grid>div:nth-child(4){background:#f7f0ff;border-color:#d8b4fe;box-shadow:0 0 20px rgba(147,51,234,.15),0 10px 24px rgba(147,51,234,.06)}
.cctv-page .cctv-coverage .cctv-spec-grid>div:nth-child(4) strong{color:#7e22ce}
@media(max-width:767px){.cctv-page .cctv-coverage .ss-cctv-installation-photo{border-radius:16px}}

/* CCTV call-to-action only; standard header, footer and other sections remain untouched. */
.cctv-page .cctv-final .cctv-final-card{border:1px solid #d6e7ff;border-radius:24px;box-shadow:0 18px 44px rgba(19,67,133,.11),0 0 22px rgba(29,119,239,.08)}
.cctv-page .cctv-final .cctv-final-card h2{max-width:780px;line-height:1.16}
.cctv-page .cctv-final .cctv-final-card p{max-width:780px;line-height:1.7}
@media(max-width:767px){.cctv-page .cctv-final .cctv-final-card{border-radius:18px}}

/* CCTV service cards: scoped icon colours and compact standard typography. */
.cctv-page .cctv-service-grid article .ss-cctv-card-head{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.cctv-page .cctv-service-grid article .ss-cctv-card-head > div{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;min-width:58px;flex:0 0 58px;
  margin:0;border-radius:16px;
  background:var(--cctv-icon-bg,#edf5ff);
  color:var(--cctv-icon-color,#087dff);
}
.cctv-page .cctv-service-grid article .ss-cctv-card-head svg{
  width:28px;height:28px;stroke:currentColor;fill:none;
}
.cctv-page .cctv-service-grid article .ss-cctv-card-head > h3{
  margin:0;font-size:clamp(18px,1.4vw,22px);line-height:1.25;
  font-weight:800;overflow-wrap:normal;
}
.cctv-page .cctv-service-grid article > p{margin-top:0}
.cctv-page .cctv-service-grid article:nth-child(1){--cctv-icon-color:#087dff;--cctv-icon-bg:#eaf3ff}
.cctv-page .cctv-service-grid article:nth-child(2){--cctv-icon-color:#ea7600;--cctv-icon-bg:#fff3e8}
.cctv-page .cctv-service-grid article:nth-child(3){--cctv-icon-color:#16a34a;--cctv-icon-bg:#eaf9ef}
.cctv-page .cctv-service-grid article:nth-child(4){--cctv-icon-color:#9333ea;--cctv-icon-bg:#f5ebff}
.cctv-page .cctv-service-grid article:nth-child(5){--cctv-icon-color:#0891b2;--cctv-icon-bg:#e9faff}
.cctv-page .cctv-service-grid article:nth-child(6){--cctv-icon-color:#e11d48;--cctv-icon-bg:#fff0f3}
@media(max-width:480px){
  .cctv-page .cctv-service-grid article .ss-cctv-card-head{gap:12px}
  .cctv-page .cctv-service-grid article .ss-cctv-card-head > div{width:52px;height:52px;min-width:52px;flex-basis:52px}
}

/* CCTV six service cards: subtle matching outer glow only. */
.cctv-page .cctv-service-grid article:nth-child(1){--cctv-glow:8,125,255}
.cctv-page .cctv-service-grid article:nth-child(2){--cctv-glow:234,118,0}
.cctv-page .cctv-service-grid article:nth-child(3){--cctv-glow:22,163,74}
.cctv-page .cctv-service-grid article:nth-child(4){--cctv-glow:147,51,234}
.cctv-page .cctv-service-grid article:nth-child(5){--cctv-glow:8,145,178}
.cctv-page .cctv-service-grid article:nth-child(6){--cctv-glow:225,29,72}
.cctv-page .cctv-service-grid article{
  box-shadow:0 0 18px rgba(var(--cctv-glow),.13),0 10px 25px rgba(15,40,75,.05);
  border-color:rgba(var(--cctv-glow),.20);
}
.cctv-page .cctv-service-grid article .ss-cctv-card-head > div{
  box-shadow:0 0 16px rgba(var(--cctv-glow),.25);
}

/* Breathing room between six service cards and the local SEO heading. */
.cctv-page .cctv-local-seo{margin-top:clamp(36px,5vw,64px)}