/* ===== CITY SCAN — Refined edition · sober editorial styling ===== */
:root{
  --navy:#1B2A5E;
  --navy-2:#16234e;
  --red:#D72E3C;
  --red-soft:#b92d39;
  --cream:#F7F6F0;
  --paper:#FCFBF8;
  --ink:#26282d;
  --muted:#73767d;
  --line:#E3E1D8;
  --line-2:#D8D6CC;
  --maxw:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.7;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:'Roboto Mono',ui-monospace,monospace}
h1,h2,h3,h4{font-family:'Spectral',Georgia,'Times New Roman',serif;color:var(--navy);
  font-weight:600;line-height:1.15;letter-spacing:-.2px}

/* ---- eyebrow / rule ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.72rem;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--red)}
.eyebrow.light{color:#b9c0da}
.rule{width:46px;height:2px;background:var(--red);margin:0 0 22px}
.center .rule{margin-left:auto;margin-right:auto}
.center{text-align:center}

/* ---- buttons (restrained) ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Lato',sans-serif;
  font-weight:700;font-size:.84rem;letter-spacing:.6px;padding:13px 26px;border-radius:3px;
  border:1.5px solid transparent;cursor:pointer;transition:.18s;line-height:1;text-transform:uppercase}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-outline{border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-text{padding:0;color:var(--navy);font-weight:700;letter-spacing:.4px;border-bottom:1.5px solid var(--red);border-radius:0;padding-bottom:3px;text-transform:none;font-size:.92rem}
.btn-text:hover{color:var(--red)}

/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(247,246,240,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:40px;width:auto;border-radius:4px}
.brand .bt{font-family:'Spectral',serif;font-weight:700;color:var(--navy);font-size:1.2rem;letter-spacing:.5px;line-height:1}
.brand .bs{display:block;font-family:'Lato',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:3.5px;color:var(--muted);margin-top:4px}
.menu{display:flex;align-items:center;gap:4px}
.menu a{font-weight:700;font-size:.82rem;letter-spacing:.4px;color:var(--navy);padding:10px 16px;border-radius:3px;transition:.16s;text-transform:uppercase}
.menu a:hover{color:var(--red)}
.menu a.active{color:var(--red)}
.menu .cta{border:1.5px solid var(--navy);color:var(--navy)!important}
.menu .cta:hover{background:var(--navy);color:#fff!important}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.menu-toggle span{width:23px;height:2px;background:var(--navy);border-radius:2px}

/* ---- sections ---- */
.section{padding:96px 0}
.section.tight{padding:64px 0}
.section.paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2.big{font-size:clamp(1.8rem,3.3vw,2.6rem);margin:6px 0 16px;font-weight:600}
.lead{color:var(--muted);font-size:1.08rem;max-width:660px;line-height:1.75}
.center .lead{margin-left:auto;margin-right:auto}

/* ---- hero (calm) ---- */
.hero{background:var(--cream);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:84px;padding-bottom:84px}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem);font-weight:600;letter-spacing:-1px;color:var(--navy)}
.hero h1 em{font-style:italic;color:var(--red);font-weight:500}
.hero p{color:var(--muted);font-size:1.12rem;margin:22px 0 32px;max-width:500px;line-height:1.75}
.hero-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:0;margin-top:46px;border-top:1px solid var(--line)}
.hero-stats .s{padding:20px 28px 0 0;margin-right:28px;border-right:1px solid var(--line)}
.hero-stats .s:last-child{border-right:0}
.hero-stats .s b{display:block;font-family:'Spectral',serif;font-size:1.7rem;font-weight:600;color:var(--navy)}
.hero-stats .s span{font-size:.72rem;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;font-weight:700}
.hero-visual{display:flex;justify-content:center;align-items:center;
  background:linear-gradient(160deg,#fff,#efeee6);border:1px solid var(--line);border-radius:6px;padding:46px;min-height:380px}
.hero-visual img{width:80%;max-width:360px;filter:drop-shadow(0 18px 30px rgba(27,42,94,.16))}

/* ---- page head (sober) ---- */
.page-head{background:var(--navy);color:#fff;border-bottom:3px solid var(--red)}
.page-head .wrap{padding:66px 28px}
.page-head h1{color:#fff;font-size:clamp(2rem,3.8vw,2.9rem);font-weight:600;margin:14px 0 16px}
.page-head .lead{color:#c4cae0}
.page-head .eyebrow{color:#9aa3c6}
.page-head .eyebrow::before{background:var(--red)}

/* ---- trust strip (light, ruled) ---- */
.trust{background:var(--paper);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;align-items:center;justify-content:center;gap:18px 36px;flex-wrap:wrap;padding:22px 28px}
.trust span{font-weight:700;letter-spacing:1.5px;font-size:.74rem;text-transform:uppercase;color:var(--muted)}
.trust .dot{color:var(--red)}

/* ---- feature columns ---- */
.grid{display:grid;gap:0}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-3 .feat{padding:0 30px;border-left:1px solid var(--line)}
.cols-3 .feat:first-child{padding-left:0;border-left:0}
.feat .fnum{font-family:'Roboto Mono',monospace;font-size:.78rem;color:var(--red);font-weight:700;letter-spacing:1px}
.feat h3{font-size:1.25rem;margin:12px 0 9px;font-weight:600}
.feat p{color:var(--muted);font-size:.96rem}

/* ---- split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.alt .txt{order:2}
.figure{background:linear-gradient(160deg,#fff,#eeede5);border:1px solid var(--line);border-radius:6px;
  padding:42px;display:flex;align-items:center;justify-content:center;min-height:330px}
.figure img{max-height:300px;width:auto}
.tick{list-style:none;margin-top:22px}
.tick li{padding-left:26px;position:relative;margin:13px 0;color:var(--ink);font-size:.98rem}
.tick li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;
  border:1.5px solid var(--red);border-radius:50%}

/* ---- series rows / product cards ---- */
.series-band{display:flex;align-items:baseline;gap:18px;margin:62px 0 26px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.series-band .tag{font-family:'Spectral',serif;font-weight:600;color:var(--navy);font-size:1.35rem}
.series-band .note{color:var(--muted);font-size:.86rem;margin-left:auto;text-align:right}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.p-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:5px;overflow:hidden;transition:.18s}
.p-card:hover{border-color:var(--navy);box-shadow:0 14px 34px rgba(27,42,94,.08)}
.p-thumb{position:relative;background:linear-gradient(160deg,#fff,#efeee6);padding:26px;
  display:flex;align-items:center;justify-content:center;height:196px;border-bottom:1px solid var(--line)}
.p-thumb img{max-height:150px;width:auto;filter:drop-shadow(0 12px 20px rgba(27,42,94,.14))}
.p-tag{position:absolute;top:14px;left:14px;font-family:'Roboto Mono',monospace;font-size:.64rem;
  letter-spacing:1.5px;color:var(--navy);background:rgba(255,255,255,.85);border:1px solid var(--line);
  padding:4px 9px;border-radius:3px;font-weight:700}
.p-tag.r{left:auto;right:14px;color:var(--red)}
.p-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.p-body .code{font-family:'Roboto Mono',monospace;font-weight:700;color:var(--red);font-size:.72rem;letter-spacing:1.5px}
.p-body h3{font-size:1.22rem;margin:7px 0 9px;font-weight:600}
.p-body p{color:var(--muted);font-size:.9rem;flex:1;line-height:1.6}
.spec-list{list-style:none;margin:16px 0 20px;border-top:1px solid var(--line);padding-top:14px}
.spec-list li{display:flex;justify-content:space-between;font-size:.82rem;padding:4px 0;color:var(--ink)}
.spec-list li span{color:var(--muted)}
.p-card .btn-text{align-self:flex-start}
.aside-card{background:var(--cream);border:1px solid var(--line);border-radius:5px;padding:26px;
  display:flex;flex-direction:column;justify-content:center}
.aside-card.dark{background:var(--navy)}
.aside-card.dark h3,.aside-card.dark p{color:#fff}
.aside-card.dark p{color:#c4cae0}
.aside-card h4{font-size:.74rem;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-family:'Lato',sans-serif;font-weight:700;margin-bottom:8px}
.aside-card p{color:var(--muted);font-size:.92rem}

/* ---- table ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px;background:var(--paper)}
table.cmp{width:100%;border-collapse:collapse;min-width:780px}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;font-size:.86rem;border-bottom:1px solid var(--line)}
table.cmp thead th{background:var(--cream);color:var(--navy);font-family:'Lato',sans-serif;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;font-size:.72rem;border-bottom:2px solid var(--navy)}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody tr:hover{background:var(--cream)}
table.cmp td .code{font-family:'Roboto Mono',monospace;font-weight:700;color:var(--red);font-size:.76rem}

/* ---- store ---- */
.store-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.quote-list{background:var(--paper);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.quote-item{display:flex;align-items:center;gap:18px;padding:18px 22px;border-bottom:1px solid var(--line)}
.quote-item:last-child{border-bottom:0}
.quote-item .qi-img{width:62px;height:62px;background:#fff;border:1px solid var(--line);border-radius:4px;
  display:flex;align-items:center;justify-content:center;flex:none}
.quote-item .qi-img img{max-height:46px;width:auto}
.quote-item .qi-meta{flex:1}
.quote-item .qi-meta .code{font-family:'Roboto Mono',monospace;font-weight:700;color:var(--red);font-size:.68rem;letter-spacing:1.5px}
.quote-item .qi-meta h4{font-family:'Spectral',serif;color:var(--navy);font-size:1.02rem;margin:3px 0;font-weight:600}
.quote-item .qi-meta span{color:var(--muted);font-size:.8rem}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.qty button{width:34px;height:36px;border:0;background:var(--cream);color:var(--navy);font-size:1.05rem;font-weight:700;cursor:pointer}
.qty button:hover{background:#eceadf}
.qty input{width:46px;height:36px;border:0;text-align:center;font-weight:700;color:var(--navy);
  font-family:'Roboto Mono',monospace;background:#fff;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.summary{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:28px;position:sticky;top:100px}
.summary h3{font-size:1.3rem;margin-bottom:5px;font-weight:600}
.summary .sub{color:var(--muted);font-size:.85rem;margin-bottom:20px}
.field{margin-bottom:15px}
.field label{display:block;font-weight:700;font-size:.74rem;letter-spacing:.6px;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:4px;font-family:inherit;font-size:.92rem;color:var(--ink);background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--navy)}
.field textarea{resize:vertical;min-height:84px}
.note-line{display:flex;justify-content:space-between;padding:9px 0;font-size:.88rem;color:var(--muted);border-top:1px solid var(--line)}
.note-line b{color:var(--navy);font-weight:700}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.info-card{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:22px;
  display:flex;gap:16px;align-items:flex-start;margin-bottom:14px}
.info-card .ic{width:42px;height:42px;border-radius:4px;background:var(--cream);border:1px solid var(--line);
  color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none}
.info-card h4{font-size:1rem;margin-bottom:3px;font-weight:600}
.info-card p,.info-card a{color:var(--muted);font-size:.92rem}
.info-card a:hover{color:var(--red)}
.map-embed{border:1px solid var(--line);border-radius:5px;overflow:hidden;height:270px;margin-top:10px}
.map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(.35)}

/* ---- alert ---- */
.alert{display:none;background:#fff;border:1px solid var(--navy);border-left:4px solid var(--red);
  color:var(--navy);padding:15px 18px;border-radius:4px;font-weight:600;font-size:.92rem;margin-bottom:22px}
.alert.show{display:block}

/* ---- quiet CTA ---- */
.cta-quiet{border:1px solid var(--line-2);border-radius:6px;background:var(--paper);
  padding:54px 40px;text-align:center}
.cta-quiet h2{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:600}
.cta-quiet p{color:var(--muted);max-width:540px;margin:14px auto 26px}

/* ---- footer (sober light) ---- */
.site-foot{background:var(--cream);color:var(--muted);padding:60px 0 0;border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px}
.site-foot .brand .bt{color:var(--navy)}
.site-foot p{font-size:.92rem;margin-top:16px;max-width:300px;color:var(--muted);line-height:1.7}
.foot-col h5{color:var(--navy);font-family:'Lato',sans-serif;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:15px;font-weight:700}
.foot-col a{display:block;font-size:.92rem;margin:9px 0;color:var(--muted);transition:.15s}
.foot-col a:hover{color:var(--red)}
.foot-bar{border-top:1px solid var(--line);margin-top:48px;padding:22px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);letter-spacing:.3px}

/* ---- responsive ---- */
@media(max-width:960px){
  .hero .wrap,.split,.store-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{order:-1}.split.alt .txt{order:0}
  .cols-3{grid-template-columns:1fr;gap:30px}
  .cols-3 .feat{padding:0 0 26px;border-left:0;border-bottom:1px solid var(--line)}
  .cols-3 .feat:last-child{border-bottom:0;padding-bottom:0}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
  .summary{position:static}
}
@media(max-width:680px){
  .menu{position:fixed;inset:78px 0 auto 0;background:var(--cream);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 20px 20px;border-bottom:1px solid var(--line);display:none}
  .menu.open{display:flex}
  .menu a{padding:13px 8px}
  .menu-toggle{display:flex}
  .pgrid{grid-template-columns:1fr}
  .series-band{flex-direction:column;gap:6px}.series-band .note{margin-left:0;text-align:left}
  .hero-stats{flex-wrap:wrap}
  .foot-top{grid-template-columns:1fr}
  .section{padding:64px 0}
}

/* ============================================================
   MOBILE RESPONSIVE OVERHAUL — global guards + 768 / 480
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;height:auto}
.tablewrap{max-width:100%}

/* ---------- Tablets & phones ---------- */
@media(max-width:768px){
  .wrap{width:100%;padding-left:20px;padding-right:20px}
  /* collapse EVERY multi-column grid (class-based or inline) to one column */
  .hero .wrap,.split,.store-grid,.contact-grid,.cols-3,.pgrid,.foot-top{grid-template-columns:1fr!important}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .split.alt .txt{order:0}
  .cols-3 .feat{padding:0 0 26px;border-left:0;border-bottom:1px solid var(--line)}
  .cols-3 .feat:last-child{border-bottom:0;padding-bottom:0}

  /* header -> hamburger menu */
  .menu{position:fixed;inset:78px 0 auto 0;background:var(--cream);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 20px 22px;border-bottom:1px solid var(--line);display:none}
  .menu.open{display:flex}
  .menu a{padding:13px 8px}
  .menu .cta{text-align:center;margin-top:6px}
  .menu-toggle{display:flex}

  /* hero: centered & stacked */
  .hero .wrap{padding-top:52px;padding-bottom:52px;text-align:center;gap:28px}
  .hero h1{font-size:clamp(2rem,7.5vw,2.7rem)}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center;flex-wrap:wrap}
  .hero-stats{justify-content:center;border-top:0;flex-wrap:wrap}
  .hero-stats .s{border-right:0;padding-right:0;margin-right:0;padding-top:8px}
  .hero-visual{padding:34px}
  .hero-visual img{max-width:64%}

  /* detail-page hero (page-head) + inline-grid intros: center content */
  .wrap[style*="grid-template-columns"]{text-align:center;justify-items:center}
  .wrap[style*="grid-template-columns"] [style*="display:flex"]{justify-content:center}

  /* sections / bands */
  .section{padding:60px 0}
  .section.tight{padding:44px 0}
  .series-band{flex-direction:column;gap:6px}
  .series-band .note{margin-left:0;text-align:left}

  /* store / quote */
  .quote-item{flex-wrap:wrap}
  .quote-item .qi-meta{flex:1 1 60%}
  .summary{position:static}

  /* footer */
  .foot-top{gap:26px}
  .foot-bar{justify-content:center;text-align:center}

  .cta-quiet{padding:42px 24px}

  /* trust strip: clean centered vertical stack, hide floating dot separators */
  .trust .wrap{flex-direction:column;gap:10px;text-align:center}
  .trust .dot{display:none}
}

/* ---------- Small phones ---------- */
@media(max-width:480px){
  .wrap{padding-left:16px;padding-right:16px}
  h1{font-size:1.8rem}
  h2.big{font-size:1.5rem}
  .lead{font-size:1rem}
  .hero h1{font-size:2rem}
  .hero p{font-size:1rem}
  .hero-stats{gap:14px 26px}
  .hero-stats .s b{font-size:1.4rem}

  /* buttons become full-width, centered & stacked */
  .btn{width:100%;justify-content:center}
  .hero-cta,.p-foot{flex-direction:column;width:100%;align-items:stretch}
  .p-foot .btn{width:100%}

  .foot-top{text-align:center}
  .section{padding:46px 0}
  .section.tight{padding:36px 0}
  .cta-quiet{padding:34px 18px}
  table.cmp th,table.cmp td{padding:11px 12px}
}

/* ============================================================
   HEADER BRAND — 2x logo + centred "TECH · CCTV" sub-line
   Scoped to .site-head so the footer logo is unaffected.
   ============================================================ */
:root{--head-h:100px}                         /* one source of truth: header height (80px logo + 2x10px air) */
html{scroll-padding-top:var(--head-h)}        /* #specs-style anchors land below the taller sticky header */

/* 1. Header height follows the variable instead of the old fixed 78px */
.site-head .nav{height:var(--head-h)}

/* 2. Logo at 2x: 40px -> 80px. width:auto preserves the 2:1 aspect ratio */
.site-head .brand{flex-shrink:0}              /* brand never gets squeezed by the menu */
.site-head .brand img{height:80px;width:auto;border-radius:6px}

/* 3. Wordmark becomes a centred column: CITY SCAN on top, TECH · CCTV centred beneath */
.site-head .brand .bt{display:inline-flex;flex-direction:column;align-items:center;text-align:center}
.site-head .brand .bs{padding-left:3.5px}     /* = its letter-spacing; cancels the trailing gap so the line is optically centred */

/* 4. At <=1024px the 2x logo + full menu no longer fit side by side, so the nav
      collapses into the hamburger earlier (was 768px). The dropdown opens flush
      under the taller header via --head-h (replaces the old hard-coded inset:78px). */
@media(max-width:1024px){
  .menu{position:fixed;inset:var(--head-h) 0 auto 0;background:var(--cream);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 20px 22px;border-bottom:1px solid var(--line);display:none}
  .menu.open{display:flex}
  .menu a{padding:13px 8px}
  .menu .cta{text-align:center;margin-top:6px}
  .menu-toggle{display:flex}
}

/* 5. Small phones: logo steps down to 60px so logo + wordmark + hamburger fit side by side at 320–480px */
@media(max-width:480px){
  :root{--head-h:80px}
  .site-head .brand{gap:10px}
  .site-head .brand img{height:60px}
}

/* 6. Homepage hero: wide range image (LandingPageimage.png, 1600x671, ~2.4:1).
   Fills the hero-visual panel instead of the old 360px single-camera cap; height follows width so the ratio never distorts. */
.hero-visual{padding:32px 24px;min-height:0}
.hero-visual a{display:block;width:100%}
.hero-visual img{display:block;width:100%;max-width:none;height:auto;margin:0 auto}
@media(max-width:960px){
  .hero-visual{padding:28px 20px}
  .hero-visual img{max-width:680px}
}
@media(max-width:480px){
  .hero-visual{padding:18px 10px}
  .hero-visual img{max-width:100%}
}

/* 7. Desktop hero (961px+): image column widened and bled to the right screen edge so the wide range image
   grows as tall as possible; the column stretches to the full height of the text (badge to stats) with the
   image centred inside it at its natural ratio. Below 961px the earlier stacked layout applies unchanged. */
@media(min-width:961px){
  .hero{overflow:hidden}
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:stretch}
  .hero-visual{align-items:center;justify-content:center;
    margin-right:calc(-1 * ((100vw - min(100vw, var(--maxw))) / 2 + 28px))}
  .hero-visual a{width:100%}
  .hero-visual img{width:100%;height:auto;max-height:100%;object-fit:contain}
  /* panel runs off the right edge: square off that side */
  .hero-visual{padding:28px 20px;border-right:0;border-radius:6px 0 0 6px}
  /* keep the text column at its original width so the headline stays on two lines */
  .hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px}
}

/* 8. Desktop hero (961px+): image box = top of the text block down to the stats divider line,
   extending up to 260px past the content edge but always stopping ~96px short of the screen edge.
   .hero-txt becomes display:contents so its children share grid rows with the image box; the box spans
   rows 1-4 (badge to buttons) and ends exactly where the stats row begins. Mobile/tablet unchanged. */
@media(min-width:961px){
  .hero .wrap{align-items:start;row-gap:0}
  .hero-txt{display:contents}
  .hero-txt>*{grid-column:1}
  .hero-cta{margin-bottom:46px}
  .hero-stats{margin-top:0}
  .hero-visual{grid-column:2;grid-row:1 / 5;align-self:stretch;
    margin-right:calc(-1 * max(0px, min((100vw - min(100vw, var(--maxw))) / 2 + 28px - 96px, 260px)))}
  .hero-visual{padding:24px 20px;border-right:1px solid var(--line);border-radius:6px}
}

/* 9. Products page comparison tables: every row on a single line (no wrapping inside cells).
   On narrower screens the table scrolls sideways inside its own box (.tablewrap) instead of wrapping. */
.tablewrap table.cmp th,.tablewrap table.cmp td{white-space:nowrap;padding-left:12px;padding-right:12px;}

/* 10. Datasheet PDF download: white hero button (.btn-dl) + datasheet row in the Ordering card (.dl-row). */
.btn-dl{background:#fff;color:var(--navy);border-color:#fff}
.btn-dl:hover{background:#e9ecf7;color:var(--navy);border-color:#e9ecf7}
.btn-dl svg{flex:none}
.dl-row{display:flex;align-items:center;gap:14px;margin-top:18px;padding:12px 16px;border:1px solid var(--navy);
  border-radius:5px;color:var(--navy);text-decoration:none;transition:background .15s,color .15s}
.dl-row:hover{background:var(--navy);color:#fff}
.dl-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border-radius:3px;background:var(--red);color:#fff}
.dl-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.dl-txt strong{font-weight:700;font-size:.95rem}
.dl-txt small{font-size:.76rem;opacity:.75;overflow-wrap:anywhere}

/* 11. Logo: transparent logo-v2.svg (no cream box; viewBox cropped to the artwork, 1032x410) and
   logo image (incl. its CITY SCAN TECH lettering) 25% larger, then another 25% (x1.5625 overall); the separate
   CITY SCAN / TECH · CCTV text next to it was removed from the HTML. Old visible logo = img height x 410/600; new heights = that x 1.5625.
   Footer logo height is set inline. */
.brand img,.site-head .brand img{border-radius:0}
.brand img{height:43px}
:root{--head-h:105px}                         /* taller logo + 2x10px air (phones keep 80px from block 5) */
.site-head .brand img{height:85px}
.summary{top:calc(var(--head-h) + 20px)}   /* quote-page sticky summary clears the taller header */
@media(max-width:480px){
  :root{--head-h:80px}
  .site-head .brand img{height:64px}
}