/* Author-maintained homepage. Bump the HTML version query when changing this file. */
:root{
  --ink:#151b19;
  --paper:#f5f6f3;
  --white:#fff;
  --slate:#52605a;
  --forest:#245b49;
  --mist:#c7d8cd;
  --line:#d7ded8;
  --page:clamp(24px,5.5vw,100px);
  color-scheme:light;
  font-family:Manrope,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper)
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body{
  margin:0
}
body.menu-open{
  overflow:hidden
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
img,svg{
  display:block;
  max-width:100%
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3{
  font-family:Sora,Arial,sans-serif;
  font-weight:400
}
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid #5da788;
  outline-offset:6px
}
button:disabled{
  cursor:default
}
::selection{
  background:var(--mist);
  color:var(--ink)
}
[hidden]{
  display:none!important
}
.skip-link{
  position:fixed;
  z-index:100;
  left:20px;
  top:14px;
  background:white;
  color:var(--ink);
  padding:14px 22px;
  transform:translateY(-150%)
}
.skip-link:focus{
  transform:none
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.site-header{
  height:86px;
  position:absolute;
  z-index:20;
  inset:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--page);
  color:white;
  border-bottom:1px solid #ffffff29
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-family:Sora,Arial,sans-serif;
  font-size:17px;
  font-weight:500;
  letter-spacing:.16em
}
.brand svg{
  width:30px;
  height:33px
}
.desktop-nav{
  display:flex;
  align-items:center;
  gap:32px;
  font-size:13px;
  font-weight:600
}
.desktop-nav a{
  padding:12px 0;
  position:relative
}
.desktop-nav a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s
}
.desktop-nav a:hover:after{
  transform:scaleX(1)
}
.header-actions{
  display:flex;
  align-items:center;
  gap:20px
}
.header-cta{
  font-size:12px;
  font-weight:700;
  background:white;
  color:var(--ink);
  padding:13px 22px;
  border-radius:3px;
  transition:background .2s
}
.header-cta:hover{
  background:var(--mist)
}
.menu-toggle{
  display:none;
  border:1px solid #ffffff60;
  border-radius:3px;
  color:white;
  background:transparent;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center
}
.menu-toggle svg{
  width:22px
}
.mobile-nav{
  position:fixed;
  inset:86px 0 0;
  background:var(--ink);
  color:white;
  z-index:19;
  padding:36px var(--page);
  overflow:auto
}
.mobile-nav a{
  display:block;
  font-size:clamp(22px,6vw,36px);
  padding:18px 0;
  border-bottom:1px solid #ffffff29
}
.mobile-nav p{
  font-size:14px;
  margin-top:28px;
  color:var(--mist)
}
.hero{
  position:relative;
  min-height:740px;
  height:100svh;
  max-height:1100px;
  overflow:hidden;
  color:white;
  background:#152e48;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:55% 55%;
  animation:hero-settle 1.6s cubic-bezier(.2,.6,.2,1) both
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#051a2aa8 0%,#051a2a40 57%,#051a2a10 100%),linear-gradient(0deg,#05121be6 0%,transparent 35%,#051a2a25 80%,#051a2a50 100%)
}
.hero-content{
  position:relative;
  z-index:1;
  padding:130px var(--page) 150px;
  max-width:1000px
}
.hero-location{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:500;
  margin-bottom:24px
}
.hero-location:before{
  content:"";
  width:20px;
  height:1px;
  background:currentColor
}
.hero h1{
  font-size:clamp(48px,5.8vw,88px);
  line-height:1.1;
  letter-spacing:-.055em;
  max-width:850px;
  text-wrap:balance
}
.hero-description{
  font-size:15px;
  line-height:1.8;
  max-width:450px;
  margin-top:25px;
  color:#f0f4f6
}
.button-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px
}
.button{
  min-height:49px;
  padding:15px 25px;
  border:1px solid transparent;
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  transition:background .2s,color .2s,border-color .2s
}
.button-light{
  background:white;
  color:var(--ink)
}
.button-light:hover{
  background:var(--mist)
}
.button-outline{
  border-color:#ffffff80;
  color:white;
  background:#0c233830;
  backdrop-filter:blur(6px)
}
.button-outline:hover{
  background:#ffffff20;
  border-color:white
}
.button-dark{
  background:var(--ink);
  color:white
}
.button-dark:hover{
  background:var(--forest)
}
.hero-bottom{
  position:absolute;
  bottom:0;
  left:var(--page);
  right:var(--page);
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:26px 0;
  border-top:1px solid #ffffff45
}
.hero-bottom p{
  font-size:12px;
  color:#e5ebed
}
.hero-services{
  display:flex;
  gap:34px;
  font-size:12px;
  font-weight:600
}
.hero-services a{
  padding:10px 0
}
.hero-services a:hover{
  text-decoration:underline;
  text-underline-offset:6px
}
.scroll-cue{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ffffff55;
  border-radius:50%
}
.scroll-cue svg{
  width:15px
}
.section{
  padding:110px var(--page)
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:48px
}
.section-heading h2,.systems h2,.digital h2,.consultation h2{
  font-size:clamp(32px,3.4vw,50px);
  line-height:1.2;
  letter-spacing:-.045em;
  text-wrap:balance
}
.section-heading h2{
  max-width:650px
}
.section-heading>p{
  max-width:345px;
  font-size:14px;
  line-height:1.8;
  color:var(--slate)
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.service-card{
  display:block
}
.service-image{
  overflow:hidden;
  background:#d9dcd7;
  aspect-ratio:4/4.5;
  position:relative
}
.service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.6,.2,1)
}
.service-card:hover img{
  transform:scale(1.035)
}
.service-image:after{
  content:"";
  position:absolute;
  inset:55% 0 0;
  background:linear-gradient(transparent,#00000030)
}
.service-icon{
  position:absolute;
  bottom:20px;
  right:20px;
  width:40px;
  height:40px;
  border:1px solid #ffffff70;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  z-index:1
}
.service-icon svg{
  width:18px
}
.service-card h3{
  font-size:20px;
  letter-spacing:-.04em;
  margin-top:23px;
  line-height:1.35
}
.service-card p{
  font-size:13px;
  color:var(--slate);
  line-height:1.8;
  margin-top:10px;
  max-width:320px
}
.text-link{
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid currentColor;
  margin-top:15px
}
.text-link svg{
  width:16px;
  height:16px;
  transition:transform .2s
}
.service-card:hover .text-link svg,.text-link:hover svg{
  transform:translateX(3px)
}
.systems{
  background:#e9ede7;
  padding:95px var(--page) 85px;
  overflow:hidden
}
.systems-intro{
  max-width:650px;
  margin:auto;
  text-align:center
}
.systems-intro>p{
  font-size:14px;
  line-height:1.8;
  color:var(--slate);
  max-width:450px;
  margin:20px auto 0
}
.systems-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);
  align-items:center;
  gap:60px;
  margin-top:55px
}
.building-visual{
  position:relative;
  min-width:0
}
.building-visual>svg{
  width:100%;
  height:auto;
  overflow:visible
}
.building-caption{
  font-size:11px;
  color:var(--slate);
  text-align:center;
  margin-top:8px
}
.signal-path{
  fill:none;
  stroke:#598c71;
  stroke-width:2;
  stroke-dasharray:5 5;
  opacity:.2;
  transition:opacity .3s,stroke-width .3s
}
.system-point{
  transition:opacity .3s;
  opacity:.25
}
.building-visual[data-system="cameras"] .for-cameras,.building-visual[data-system="access"] .for-access,.building-visual[data-system="network"] .for-network,.building-visual[data-system="automation"] .for-automation{
  opacity:1
}
.building-visual[data-system="cameras"] .signal-path.for-cameras,.building-visual[data-system="access"] .signal-path.for-access,.building-visual[data-system="network"] .signal-path.for-network,.building-visual[data-system="automation"] .signal-path.for-automation{
  stroke-width:3
}
.system-tabs{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:32px
}
.systems-enhanced .system-tabs{
  display:grid
}
.system-tab{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  text-align:left;
  padding:12px;
  border:1px solid #b7c4b9;
  background:transparent;
  border-radius:3px;
  font-size:12px;
  color:var(--ink)
}
.system-tab svg{
  width:17px;
  height:17px;
  flex:none
}
.system-tab[aria-selected="true"]{
  background:var(--forest);
  border-color:var(--forest);
  color:white
}
.system-tab:hover:not([aria-selected="true"]){
  background:#dbe3d9
}
.system-panel{
  padding:14px 0 26px;
  border-bottom:1px solid #becbc1
}
.systems-enhanced .system-panel{
  border:0;
  min-height:235px;
  padding:0
}
.system-panel h3{
  font-size:25px;
  letter-spacing:-.04em;
  line-height:1.3
}
.system-panel p{
  font-size:14px;
  line-height:1.85;
  color:var(--slate);
  margin-top:15px;
  max-width:350px
}
.system-panel .text-link{
  margin-top:16px;
  color:var(--forest)
}
.digital{
  background:var(--ink);
  color:white;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:670px
}
.digital-picture{
  position:relative;
  min-height:540px;
  overflow:hidden
}
.digital-picture>img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  object-position:center 55%
}
.digital-picture:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#151b1960,transparent 40%)
}
.digital-copy{
  padding:90px clamp(32px,5.5vw,100px);
  align-self:center
}
.digital-copy>p{
  font-size:14px;
  line-height:1.85;
  color:#c4cec6;
  margin-top:23px
}
.digital-features{
  margin:32px 0 20px;
  display:grid;
  gap:0
}
.digital-features div{
  border-top:1px solid #ffffff26;
  padding:17px 0;
  display:grid;
  grid-template-columns:100px 1fr;
  gap:18px
}
.digital-features dt{
  font-size:12px;
  font-weight:700
}
.digital-features dd{
  margin:0;
  font-size:12px;
  line-height:1.65;
  color:#c4cec6
}
.digital .text-link{
  color:white
}
.consultation{
  padding:110px var(--page);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start
}
.consultation-intro>p{
  font-size:14px;
  line-height:1.85;
  color:var(--slate);
  margin-top:23px;
  max-width:410px
}
.consultation-contact{
  font-size:12px;
  color:var(--slate);
  margin-top:20px
}
.consultation-contact a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
  display:inline-block;
  min-height:30px;
  padding-top:5px
}
.consultation-steps{
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:steps
}
.consultation-steps li{
  counter-increment:steps;
  display:grid;
  grid-template-columns:36px 1fr;
  gap:16px;
  padding:25px 0;
  border-top:1px solid var(--line)
}
.consultation-steps li:before{
  content:"0" counter(steps);
  color:var(--forest);
  font-size:12px;
  padding-top:3px
}
.consultation-steps h3{
  font-size:19px;
  letter-spacing:-.03em
}
.consultation-steps p{
  font-size:13px;
  line-height:1.8;
  color:var(--slate);
  margin-top:9px;
  max-width:380px
}
.site-footer{
  padding:55px var(--page) 25px;
  background:#e9ede7
}
.footer-main{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:45px;
  padding-bottom:50px
}
.footer-brand p{
  max-width:280px;
  font-size:12px;
  line-height:1.8;
  color:var(--slate);
  margin-top:17px
}
.footer-links h2{
  font:600 12px Manrope,Arial,sans-serif;
  margin-bottom:13px
}
.footer-links a{
  display:block;
  font-size:12px;
  padding:7px 0;
  color:var(--slate);
  overflow-wrap:anywhere
}
.footer-links a:hover{
  text-decoration:underline;
  text-underline-offset:4px
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #ccd6cd;
  padding-top:22px;
  font-size:10px;
  color:var(--slate)
}
[tabindex]:focus-visible{
  outline:3px solid #5da788;
  outline-offset:6px
}
@keyframes hero-settle{
  from{
    transform:scale(1.045)
  }
  to{
    transform:scale(1)
  }
}
@media(min-width:1600px){
  .hero-content{
    max-width:1150px
  }
  .service-image{
    aspect-ratio:1/1
  }
  .systems-layout{
    max-width:1350px;
    margin-left:auto;
    margin-right:auto
  }
}
@media(max-width:1100px){
  .desktop-nav{
    gap:20px
  }
  .hero{
    min-height:700px
  }
  .hero h1{
    font-size:65px
  }
  .hero-bottom>p{
    display:none
  }
  .section{
    padding-top:80px;
    padding-bottom:80px
  }
  .section-heading{
    align-items:flex-start
  }
  .section-heading h2{
    max-width:480px
  }
  .systems-layout{
    gap:30px;
    grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr)
  }
  .digital-copy{
    padding:65px 35px
  }
  .consultation{
    gap:55px
  }
  .footer-main{
    grid-template-columns:1fr 1fr 1fr;
    gap:28px
  }
}
@media(max-width:800px){
  .site-header{
    height:76px
  }
  .desktop-nav{
    display:none
  }
  .menu-toggle{
    display:flex
  }
  .header-actions{
    gap:12px
  }
  .header-cta{
    padding:13px 16px
  }
  .mobile-nav{
    top:76px
  }
  .hero{
    height:90svh;
    min-height:680px;
    max-height:950px
  }
  .hero-content{
    padding-top:120px;
    padding-bottom:145px
  }
  .hero h1{
    font-size:clamp(46px,7.5vw,65px)
  }
  .hero-image{
    object-position:62% center
  }
  .hero:after{
    background:linear-gradient(90deg,#051a2aaa,#051a2a30),linear-gradient(0deg,#05121bee,transparent 60%)
  }
  .hero-services{
    gap:22px;
    font-size:11px
  }
  .hero-bottom{
    padding:19px 0
  }
  .section-heading{
    display:block
  }
  .section-heading>p{
    max-width:460px;
    margin-top:22px
  }
  .section-heading h2{
    max-width:540px
  }
  .service-grid{
    gap:17px
  }
  .service-card h3{
    font-size:17px
  }
  .service-card p{
    font-size:12px
  }
  .service-image{
    aspect-ratio:3/4
  }
  .systems{
    padding-top:75px;
    padding-bottom:65px
  }
  .systems-layout{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:25px
  }
  .building-visual{
    max-width:610px;
    width:100%;
    margin:auto
  }
  .system-copy{
    max-width:550px;
    margin:auto;
    width:100%
  }
  .system-tabs{
    grid-template-columns:repeat(4,1fr);
    margin:15px 0 25px
  }
  .system-tab{
    justify-content:center;
    padding:10px 8px;
    font-size:11px
  }
  .system-tab svg{
    width:16px
  }
  .system-panel p{
    max-width:none
  }
  .systems-enhanced .system-panel{
    min-height:175px
  }
  .digital{
    grid-template-columns:1fr 1fr;
    min-height:600px
  }
  .digital-picture{
    min-height:550px
  }
  .digital-copy{
    padding:50px 28px
  }
  .digital h2{
    font-size:32px
  }
  .digital-features div{
    grid-template-columns:1fr;
    gap:6px
  }
  .consultation{
    padding-top:80px;
    padding-bottom:80px;
    gap:35px;
    grid-template-columns:1fr 1fr
  }
  .footer-main{
    grid-template-columns:1fr 1fr
  }
  .footer-brand{
    grid-column:1/-1
  }
  .footer-brand p{
    max-width:400px
  }
}
@media(max-width:580px){
  .brand{
    font-size:15px;
    gap:8px
  }
  .brand svg{
    width:25px
  }
  .header-cta{
    font-size:10px;
    padding:12px
  }
  .header-actions{
    gap:9px
  }
  .menu-toggle{
    width:42px;
    height:42px
  }
  .hero{
    height:94svh;
    min-height:700px
  }
  .hero-content{
    padding-top:130px;
    padding-bottom:135px
  }
  .hero h1{
    font-size:clamp(39px,10vw,56px);
    letter-spacing:-.052em
  }
  .hero-location{
    margin-bottom:22px
  }
  .hero-description{
    font-size:13px;
    max-width:320px;
    margin-top:23px
  }
  .hero-image{
    object-position:59% center
  }
  .button-row{
    gap:10px;
    margin-top:25px
  }
  .button{
    font-size:11px;
    padding:14px 18px;
    min-height:48px
  }
  .hero-services{
    width:100%;
    justify-content:space-between;
    gap:12px;
    font-size:10px
  }
  .hero-services a{
    max-width:90px;
    line-height:1.65
  }
  .scroll-cue{
    display:none
  }
  .hero-bottom{
    padding:18px 0
  }
  .section{
    padding-top:66px;
    padding-bottom:70px
  }
  .section-heading{
    margin-bottom:32px
  }
  .section-heading h2,.systems h2,.consultation h2{
    font-size:33px
  }
  .section-heading>p{
    font-size:13px
  }
  .service-grid{
    grid-template-columns:1fr;
    gap:39px
  }
  .service-image{
    aspect-ratio:1.1/1
  }
  .service-image img{
    object-position:center 49%
  }
  .service-card h3{
    font-size:23px;
    margin-top:20px
  }
  .service-card p{
    font-size:13px;
    max-width:none
  }
  .service-card .text-link{
    margin-top:10px
  }
  .systems{
    padding:65px 20px 45px
  }
  .systems-intro{
    padding:0 4px
  }
  .systems-intro>p{
    font-size:13px
  }
  .systems-layout{
    margin-top:20px;
    gap:12px
  }
  .building-visual{
    margin-left:-6px;
    width:calc(100% + 12px)
  }
  .building-caption{
    font-size:10px;
    margin-top:0
  }
  .system-tabs{
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-bottom:25px
  }
  .system-tab{
    font-size:12px;
    justify-content:flex-start;
    padding-left:15px;
    gap:10px
  }
  .system-panel h3{
    font-size:24px
  }
  .system-panel p{
    font-size:13px;
    line-height:1.8
  }
  .systems-enhanced .system-panel{
    min-height:220px
  }
  .digital{
    grid-template-columns:1fr
  }
  .digital-picture{
    min-height:0;
    height:390px
  }
  .digital-picture>img{
    object-position:center 47%
  }
  .digital-copy{
    padding:50px 24px 60px
  }
  .digital h2{
    font-size:35px;
    max-width:340px
  }
  .digital-copy>p{
    font-size:13px
  }
  .digital-features div{
    grid-template-columns:90px 1fr;
    gap:15px
  }
  .consultation{
    padding:65px 24px;
    grid-template-columns:1fr;
    gap:38px
  }
  .consultation-intro>p{
    font-size:13px
  }
  .consultation-steps li{
    padding:22px 0
  }
  .site-footer{
    padding:45px 24px 25px
  }
  .footer-main{
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:35px
  }
  .footer-brand{
    grid-column:auto
  }
  .footer-bottom{
    display:block;
    font-size:10px;
    line-height:1.8
  }
  .footer-bottom p+p{
    margin-top:5px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
  .hero-image,.service-card:hover img{
    transform:none
  }
}