/* SecureTech universal responsive sizing standard — websites, customer apps and internal platforms.
   Goal: automatic sizing from small phones through laptops, large monitors, TVs and 4K screens
   without requiring manual browser zoom. Reading widths stay controlled while dashboards,
   maps, camera walls and operational grids use additional screen real estate. */
:root{
  --ui-shell-max:1760px;
  --ui-reading-max:76ch;
  --ui-gutter:clamp(14px,2.2vw,40px);
  --ui-section-gap:clamp(18px,2.2vw,36px);
  --ui-card-gap:clamp(10px,1.25vw,22px);
  --ui-radius:clamp(12px,.8vw,18px);
  --ui-touch:clamp(42px,2.7vw,52px);
  --ui-text:clamp(14px,.18vw + 13px,17px);
  --ui-small:clamp(11px,.12vw + 10px,14px);
  --ui-h1:clamp(30px,2.6vw,72px);
  --ui-h2:clamp(22px,1.8vw,46px);
  --ui-h3:clamp(17px,1vw,26px);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:var(--ui-text)}
img,video,canvas,svg{max-width:100%;height:auto}
iframe{max-width:100%}
button,input,select,textarea{min-height:min(var(--ui-touch),56px)}

/* Public website shells */
.wrap{width:min(calc(100% - (var(--ui-gutter) * 2)),var(--ui-shell-max));margin-inline:auto}
.section-head p,.premium-copy p,.platform-title p,.about-grid p,.cta-strip p{max-width:var(--ui-reading-max)}

/* Product/customer/internal application shells */
body[data-product] .main,
.product-customer-wide .main{
  width:100%;
  max-width:var(--ui-shell-max);
  margin-inline:auto;
  padding-left:var(--ui-gutter);
  padding-right:var(--ui-gutter);
}
body[data-product] .card{border-radius:var(--ui-radius)}
body[data-product] .grid{gap:var(--ui-card-gap)}
body[data-product] .two,
body[data-product] .setup-grid,
body[data-product] .video-layout,
body[data-product] .visual-dashboard{gap:var(--ui-card-gap)}
body[data-product] .notice,
body[data-product] .row small,
body[data-product] .setup-form p{font-size:var(--ui-small);line-height:1.5}

/* Full-width operational platforms on desktop. */
@media (min-width:1100px){
  body[data-product],body[data-product] #customerApp{width:100%;max-width:none}
  body[data-product] .app{width:100%;max-width:none;grid-template-columns:clamp(228px,15vw,270px) minmax(0,1fr)}
  body[data-product] .main{max-width:none!important;margin:0!important;width:100%!important;padding-left:clamp(24px,2.5vw,50px)!important;padding-right:clamp(24px,2.5vw,50px)!important}
  body[data-product] .view,body[data-product] .view.active{width:100%;max-width:none}
  body[data-product] .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-product] .two{grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr)}
  body[data-product] .setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-product] .video-layout{grid-template-columns:minmax(0,1.6fr) minmax(330px,.65fr)}
  body[data-product] .card,body[data-product] .notice,body[data-product] .list{max-width:none}
}

/* Large laptops and standard desktop monitors */
@media (min-width:1280px){
  .wrap{width:min(94vw,1540px)}
  .premium-hero,.premium-hero-content{min-height:clamp(540px,35vw,700px)}
  .premium-copy{max-width:780px}
  .premium-copy h1{font-size:clamp(54px,4vw,76px)}
  .section-head.centered,.platform-title{max-width:940px}
  .solution-card>img{height:clamp(220px,15vw,285px)}
  #platforms .platform-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .team-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-card-gap)}
  .person-card img{height:clamp(280px,19vw,350px)}
  .quote-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)}
  .quote-form{max-width:1160px}
  body[data-product] .app{grid-template-columns:clamp(236px,15vw,276px) minmax(0,1fr)}
  body[data-product] .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-product] .kpi strong{font-size:clamp(1.65rem,1.5vw,2.25rem)}
  body[data-product] .video-screen{min-height:clamp(360px,28vw,520px)}
  body[data-product] .fleet-map,
  body[data-product] .security-wall{min-height:clamp(360px,27vw,520px)}
}

/* 1440p / large office monitors */
@media (min-width:1600px){
  :root{--ui-shell-max:1840px;--ui-gutter:clamp(28px,2.5vw,52px)}
  .wrap{width:min(92vw,1660px)}
  .master-nav .wrap{width:min(94vw,1720px)}
  .premium-copy h1{font-size:clamp(64px,3.8vw,82px)}
  .solutions-grid,.platform-grid,.process-grid,.team-grid{gap:24px}
  .about-grid{gap:72px}
  body[data-product] .app{grid-template-columns:clamp(250px,14vw,290px) minmax(0,1fr)}
  body[data-product] .main{padding-left:clamp(36px,2.8vw,60px)!important;padding-right:clamp(36px,2.8vw,60px)!important}
  body[data-product] .grid{gap:18px}
  body[data-product] .card{padding:clamp(18px,1.15vw,24px)}
  body[data-product] .top h1{font-size:clamp(1.4rem,1.2vw,1.8rem)}
  body[data-product] .two{grid-template-columns:minmax(0,1.5fr) minmax(360px,.72fr)}
  body[data-product] .setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-product] .video-layout{grid-template-columns:minmax(0,1.7fr) minmax(360px,.62fr)}
}

/* 2K / 4K and presentation displays */
@media (min-width:1920px){
  :root{--ui-shell-max:2048px;--ui-gutter:clamp(36px,3vw,72px);--ui-card-gap:clamp(18px,1.15vw,28px)}
  .wrap{width:min(90vw,1780px)}
  .master-nav .wrap{width:min(92vw,1840px)}
  body[data-product] .main{max-width:none!important;padding-left:clamp(48px,3vw,78px)!important;padding-right:clamp(48px,3vw,78px)!important}
  body[data-product] .app{grid-template-columns:clamp(270px,13vw,320px) minmax(0,1fr)}
  body[data-product] .grid{grid-template-columns:repeat(4,minmax(240px,1fr))}
  body[data-product] .visual-dashboard{grid-template-columns:minmax(0,1.65fr) minmax(390px,.68fr)}
  body[data-product] .camera-tile{min-height:clamp(190px,11vw,260px)}
}

/* Ultra-wide monitors: use space without stretching readable text */
@media (min-width:2560px){
  :root{--ui-shell-max:2240px}
  .wrap{max-width:2040px}
  body[data-product] .main{max-width:none!important;padding-left:clamp(72px,3.4vw,110px)!important;padding-right:clamp(72px,3.4vw,110px)!important}
  body[data-product] .grid{grid-template-columns:repeat(4,minmax(300px,1fr))}
  body[data-product] .two{grid-template-columns:minmax(0,1.65fr) minmax(440px,.65fr)}
  body[data-product] .video-layout{grid-template-columns:minmax(0,1.8fr) minmax(420px,.55fr)}
}

/* Tablets */
@media (max-width:1050px){
  :root{--ui-gutter:clamp(14px,2.8vw,24px)}
  body[data-product] .two,
  body[data-product] .setup-grid,
  body[data-product] .video-layout{grid-template-columns:1fr}
}

/* Phones */
@media (max-width:800px){
  :root{--ui-gutter:clamp(12px,4vw,18px);--ui-touch:46px}
  body[data-product] .main{padding-left:var(--ui-gutter);padding-right:var(--ui-gutter)}
  body[data-product] .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  :root{--ui-gutter:12px}
  body[data-product] .grid{gap:9px}
  body[data-product] .card{padding:13px}
}

/* SecureTech management: fixed app viewport. Keep the shell on-screen and scroll only the active data pane. */
body:has(#workspace:not(.hidden)){height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
#workspace:not(.hidden){height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
#workspace:not(.hidden)>.mobile-top{flex:0 0 auto!important}
#workspace:not(.hidden)>.app{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden!important}
#workspace:not(.hidden) .side{height:100%!important;max-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important}
#workspace:not(.hidden) .main{height:100%!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;padding-bottom:14px!important}
#workspace:not(.hidden) .toolbar{flex:0 0 auto!important;position:relative!important;top:auto!important;margin-bottom:12px!important}
#workspace:not(.hidden) #content{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-gutter:stable;padding-bottom:14px!important}
@media (min-width:861px) and (min-height:700px){
  #workspace:not(.hidden) .kpi{min-height:88px!important;padding:12px 14px!important}
  #workspace:not(.hidden) .kpi strong{font-size:24px!important;margin:4px 0 1px!important}
  #workspace:not(.hidden) .section-title{margin:14px 0 8px!important}
}
@media (max-width:860px){
  #workspace:not(.hidden) .main{padding-bottom:8px!important}
  #workspace:not(.hidden) #content{padding-bottom:18px!important;-webkit-overflow-scrolling:touch}
  #workspace:not(.hidden) .side{height:100dvh!important;max-height:100dvh!important}
}

/* Respect user accessibility and display preferences. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}