/* The site's header and footer on a page that keeps its own stylesheets, here the construction site monitoring app.
   Those stylesheets style bare elements and short class names (footer, h2, a, button, .brand), and site.css would do the same to the app, so these are site.css's
   rules for the two pieces, in its order, each under .cws-host: they outrank the app's rules, and nothing here reaches the app. Change them together with site.css.
   Fonts come from the app's own @font-face rules, which use the same family names and the same files. */
.cws-host{
  --paper:#FFFFFF; --backing:#ECEDEF; --rule:#D3D6DB;
  --ink:#1E2126; --ink-2:#3B4049; --ink-3:#5C626C;
  --blue:#1649FF; --blue-deep:#0E35C4;
  --label:'Barlow Condensed','Arial Narrow',sans-serif;
  --read:'Barlow','Helvetica Neue',Arial,sans-serif;
  --gutter:max(20px, env(safe-area-inset-left,0px));
  --gutter-r:max(20px, env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.16,1,.3,1);
  --sh-label:0 1px 2px rgba(20,24,32,.14), 0 0 0 1px rgba(20,24,32,.04);
  color:var(--ink); font:400 17px/1.6 var(--read); color-scheme:light; scrollbar-color:#9AA0AA var(--backing);
}
.cws-host :focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
.cws-host svg{display:block; max-width:100%}
.cws-host a{color:var(--blue-deep); text-decoration-thickness:2px; text-underline-offset:4px}
.cws-host a:hover{color:var(--blue)}
.cws-host a[href^="tel:"]{white-space:nowrap}
.cws-host .inner{max-width:1240px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter-r)}
.cws-host p{margin:0; text-wrap:pretty}
.cws-host ul{margin:0; padding:0}

/* ---------- brand ---------- */
.cws-host .brand{display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; white-space:nowrap; font:inherit; letter-spacing:normal; text-transform:none}
.cws-host .brand svg{width:48px; height:auto; flex:none}
.cws-host .brand span{font:800 21px/1 var(--label); letter-spacing:.05em; text-transform:uppercase}
.cws-host .brand:hover{color:var(--ink)}
.cws-host .brand .short{display:none}

/* ---------- label-roll navigation ---------- */
/* Not pinned on this page, on purpose: the app's cart stays pinned and its anchors stop 24px from the top, where a pinned header would cover them. It still sits above the app's phone cart (z-index 40). */
.cws-host.roll{position:relative; z-index:50; background:var(--backing); border-bottom:1px solid var(--rule)}
.cws-host.roll .bar{display:flex; align-items:center; gap:14px; min-height:68px}
.cws-host .nav{display:flex; align-items:center; gap:8px; margin-left:auto}
.cws-host .labels{display:flex; gap:8px; list-style:none; align-items:center}
.cws-host .lab{display:inline-flex; align-items:center; gap:6px; background:var(--paper); color:var(--ink); text-decoration:none; border:0; border-radius:7px; padding:10px 14px 9px; font:700 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; box-shadow:var(--sh-label); cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s}
.cws-host .lab:hover{transform:translateY(-1px); box-shadow:0 3px 8px rgba(20,24,32,.16), 0 0 0 1px rgba(20,24,32,.05); color:var(--ink)}
.cws-host .lab[aria-current="page"], .cws-host .lab.is-current{background:var(--ink); color:#fff; box-shadow:none}
.cws-host .lab svg{width:10px; height:10px; transition:transform .2s var(--ease)}
.cws-host .has-menu{position:relative}
.cws-host .has-menu.open > .lab svg{transform:rotate(180deg)}
.cws-host .submenu{position:absolute; top:calc(100% + 10px); left:0; width:330px; background:var(--paper); border-radius:9px; padding:8px; list-style:none; box-shadow:0 2px 4px rgba(20,24,32,.1), 0 18px 40px -18px rgba(20,24,32,.45), 0 0 0 1px rgba(20,24,32,.05); display:none}
.cws-host .has-menu.open .submenu{display:block}
html:not(.js) .cws-host .has-menu:focus-within .submenu{display:block}
.cws-host .submenu a{display:block; padding:12px 12px 11px; border-radius:6px; color:var(--ink); text-decoration:none}
.cws-host .submenu a:hover,.cws-host .submenu a:focus-visible{background:var(--backing)}
.cws-host .submenu a[aria-current="page"]{background:var(--ink); color:#fff}
.cws-host .submenu b{display:block; font:800 17px/1.1 var(--label); letter-spacing:.06em; text-transform:uppercase}
.cws-host .tel{display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font:700 15px/1 var(--label); letter-spacing:.08em; white-space:nowrap; padding:10px 6px}
.cws-host .tel svg{width:16px; height:16px; color:var(--blue)}
.cws-host .tel:hover{color:var(--blue-deep)}
.cws-host .pill{display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff; text-decoration:none; border-radius:999px; padding:10px 18px 10px 10px; font:700 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transition:background .2s var(--ease), transform .2s var(--ease)}
.cws-host .pill i,.cws-host .quick i{position:relative; width:18px; height:18px; border-radius:4px; background:#fff; flex:none}
.cws-host .pill i::after,.cws-host .quick i::after{content:""; position:absolute; left:5px; right:5px; top:6px; height:5px; border-radius:1px; background:var(--blue)}
.cws-host .pill:hover{background:var(--blue-deep); color:#fff}
.cws-host .pill:active{transform:scale(.97)}
.cws-host .menu-btn{display:none; align-items:center; gap:8px; background:var(--paper); color:var(--ink); border:0; border-radius:7px; padding:10px 12px 9px; font:700 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; box-shadow:var(--sh-label); cursor:pointer}
.cws-host .menu-btn svg{width:16px; height:16px}

/* ---------- footer ---------- */
footer.cws-host{display:block; padding:0; background:var(--backing); border-top:1px solid var(--rule)}
footer.cws-host .cols{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px; padding-block:48px 32px}
footer.cws-host h2{font:800 15px/1 var(--label); letter-spacing:.1em; color:var(--ink-3); margin:0 0 14px; text-transform:uppercase; text-wrap:balance}
footer.cws-host ul{list-style:none; display:grid; gap:9px}
footer.cws-host li{font-size:15px; color:var(--ink-2)}
footer.cws-host a{color:var(--ink); text-decoration:none; font-size:15px}
footer.cws-host a:hover{color:var(--blue-deep); text-decoration:underline}
footer.cws-host .about p{font-size:15px; color:var(--ink-2); max-width:36ch; margin-top:16px}
footer.cws-host .legal{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; padding-block:18px calc(22px + env(safe-area-inset-bottom,0px)); font-size:14px; color:var(--ink-3); background:linear-gradient(var(--rule),var(--rule)) no-repeat; background-size:calc(100% - var(--gutter) - var(--gutter-r)) 1px; background-position:var(--gutter) 0}
footer.cws-host .legal a{font-size:14px; color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .cws-host .tel span{display:none}
}
@media (max-width:1000px){
  footer.cws-host .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1120px){
  .js .cws-host .menu-btn{display:inline-flex}
  .js .cws-host .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--backing); border-bottom:1px solid var(--rule); padding:12px var(--gutter-r) 20px var(--gutter); box-shadow:0 18px 30px -20px rgba(20,24,32,.4); max-height:calc(100dvh - 68px); overflow-y:auto}
  .js .cws-host .nav.open{display:block}
  .cws-host .nav .labels{flex-direction:column; align-items:stretch; gap:8px}
  .cws-host .nav .lab{width:100%; justify-content:space-between; padding:15px 16px 14px; font-size:17px}
  .cws-host .nav .has-menu .submenu{position:static; width:auto; margin-top:6px; box-shadow:none; background:transparent; padding:0 0 4px 8px}
  .cws-host .nav .has-menu .submenu a{padding:11px 12px}
  html:not(.js) .cws-host .nav .has-menu .submenu{display:block}
  .cws-host .nav .tel{margin-top:10px; font-size:18px}
  .cws-host .nav .tel span{display:inline}
  .cws-host .nav .pill{margin-top:12px; width:100%; justify-content:center; padding:15px 18px; font-size:17px}
  html:not(.js) .cws-host .nav{flex-wrap:wrap; margin-left:0}
  .cws-host.roll .bar{gap:10px; position:relative}
  .cws-host .quick{display:inline-flex; margin-left:auto}
}
@media (min-width:1121px){ .cws-host .quick{display:none!important} }
.cws-host .quick{align-items:center; gap:8px; background:var(--blue); color:#fff; text-decoration:none; border-radius:999px; padding:10px 14px; font:700 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}

.cws-host .quick:hover{background:var(--blue-deep); color:#fff}
@media (max-width:760px){
  .cws-host{--gutter:max(16px, env(safe-area-inset-left,0px)); --gutter-r:max(16px, env(safe-area-inset-right,0px)); font-size:16px}
  .cws-host .brand svg{width:40px}
  .cws-host .brand span{font-size:18px}
  .cws-host .brand .long{display:none}
  .cws-host .brand .short{display:inline}
  footer.cws-host .cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px){
  .cws-host .brand span{display:none}
}
@media print{
  .cws-host{display:none!important}
}