/* Signal Up Appliances — shared design tokens & components */
:root{
  --bg:#F2F5F3; --surface:#FFFFFF; --surface-2:#E7EDEA; --ink:#0E1E27; --muted:#54666E;
  --line:rgba(14,30,39,0.13); --accent:#0AA0AE; --accent-ink:#043B41; --cta:#FF7A29; --cta-ink:#4A1F00;
  --ok:#2C9E5E; --shadow:0 1px 2px rgba(14,30,39,0.07), 0 8px 24px rgba(14,30,39,0.05);
  --panel-bg:#101B24; --panel-line:#25333D; --panel-ink:#C9E8E4; --panel-digit:#35E7B8; --panel-digit-dim:#1E7A63;
  --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1319; --surface:#111C24; --surface-2:#16232C; --ink:#E7EFEC; --muted:#93A8AC;
    --line:rgba(231,239,236,0.13); --accent:#3BD9DE; --accent-ink:#DBFAF9; --cta:#FF9152; --cta-ink:#2C1300;
    --ok:#49CC7E; --shadow:0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0A1319; --surface:#111C24; --surface-2:#16232C; --ink:#E7EFEC; --muted:#93A8AC;
  --line:rgba(231,239,236,0.13); --accent:#3BD9DE; --accent-ink:#DBFAF9; --cta:#FF9152; --cta-ink:#2C1300;
  --ok:#49CC7E; --shadow:0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
}
img{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 18px;} }
h1,h2,h3{font-family:var(--font-display); text-transform:uppercase; text-wrap:balance; margin:0; line-height:0.98; letter-spacing:0.2px;}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 16%, transparent); display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border-radius:3px; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-mono); font-weight:600; font-size:14px;
  letter-spacing:0.04em; text-transform:uppercase; padding:14px 22px; border-radius:3px; cursor:pointer;
  text-decoration:none; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-cta{background:var(--cta); color:var(--cta-ink); box-shadow:var(--shadow);}
.btn-cta:hover{box-shadow:0 2px 4px rgba(14,30,39,0.1), 0 12px 28px rgba(255,122,41,0.28);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent-ink);}
.btn-ghost-dark{background:transparent; color:var(--panel-ink); border-color:var(--panel-line);}
.btn-ghost-dark:hover{border-color:var(--panel-digit); color:var(--panel-digit);}
.btn-sm{padding:10px 16px; font-size:12.5px;}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); display:inline-block; box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); flex:none;}

header.site{padding:18px 0; border-bottom:1px solid var(--line); background:var(--bg); position:relative; z-index:40;}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand .mark{width:38px; height:38px; flex:none;}
.brand .word{font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:0.01em; line-height:1;}
.brand .word .up{color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 20%, transparent); padding:0 6px; margin-left:2px; border-radius:2px;}
.brand .tag{font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); display:block; margin-top:2px;}
nav.main{display:flex; align-items:center; gap:24px;}
nav.main a{font-size:14px; font-weight:600; text-decoration:none; color:var(--muted); white-space:nowrap;}
nav.main a:hover, nav.main a[aria-current="page"]{color:var(--ink);}
.navcta{display:flex; align-items:center; gap:14px;}
.phonebtn{font-family:var(--font-mono); font-weight:600; font-size:14.5px; text-decoration:none; color:var(--ink); white-space:nowrap;}
.navtoggle{display:none; background:none; border:1px solid var(--line); border-radius:4px; width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.navtoggle span, .navtoggle span::before, .navtoggle span::after{content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:transform .15s ease, opacity .15s ease;}
.navtoggle span::before{position:absolute; top:-6px;} .navtoggle span::after{position:absolute; top:6px;}
.navtoggle[aria-expanded="true"] span{background:transparent;}
.navtoggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:900px){
  nav.main{position:fixed; inset:61px 0 auto 0; background:var(--surface); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; padding:10px 24px 22px; gap:4px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:transform .15s ease, opacity .15s ease; box-shadow:var(--shadow);}
  nav.main[data-open="true"]{transform:translateY(0); opacity:1; pointer-events:auto;}
  nav.main a{padding:11px 0; width:100%; border-bottom:1px solid var(--line); font-size:15px;}
  .navtoggle{display:inline-flex;}
  .navcta .btn-cta{display:none;}
  body{padding-bottom:64px;}
}

/* sticky mobile call/chat bar */
.mobilebar{display:none;}
@media (max-width:900px){
  .mobilebar{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:50;
    border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(14,30,39,0.12);
  }
  .mobilebar a{padding:15px 10px; text-align:center; font-family:var(--font-mono); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.04em; text-decoration:none;}
  .mobilebar .call{background:var(--cta); color:var(--cta-ink);}
  .mobilebar .text{background:var(--panel-bg); color:var(--panel-digit);}
}

section{padding:64px 0;}
@media (max-width:640px){ section{padding:44px 0;} }
section.alt{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:34px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px,3.2vw,38px); font-weight:800;}
.section-head p{color:var(--muted); max-width:46ch; margin:10px 0 0;}
.num{font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:0.1em;}

/* HERO (shared shape, homepage + city pages) */
.hero{padding:52px 0 60px; border-bottom:1px solid var(--line);}
.hero .grid{display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center;}
@media (max-width:900px){ .hero .grid{grid-template-columns:1fr;} .hero{padding:36px 0 40px;} }
.hero h1{font-size:clamp(32px,4.6vw,58px); font-weight:900;}
.hero h1 span{color:var(--accent-ink);}
.hero p.lede{font-size:17px; color:var(--muted); max-width:52ch; margin:20px 0 26px;}
.hero .ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px;}
.telemetry{display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); border-top:1px dashed var(--line); padding-top:18px;}
.telemetry span{display:flex; align-items:center; gap:7px;}
.telemetry b{color:var(--ink); font-weight:600;}
.hero-photo{position:relative; border-radius:6px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; border:1px solid var(--line);}
.hero-photo img{width:100%; height:100%; object-fit:cover;}
.hero-photo video{display:block; width:100%; height:100%; object-fit:cover; background:#F2F5F3;}
.hero-sound{position:absolute; right:12px; bottom:12px; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff; background:rgba(14,30,39,0.72);}
.hero-sound:hover{background:rgba(14,30,39,0.9);}
.hero-sound:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.hero-sound svg{width:22px; height:22px;}
.hero-sound .ic-on{display:none;}
.hero-sound[aria-pressed="true"] .ic-on{display:block;}
.hero-sound[aria-pressed="true"] .ic-off{display:none;}
.hero-photo .tag-strip{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top, rgba(9,16,21,0.88), rgba(9,16,21,0));
  color:#fff; padding:38px 18px 16px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;}
.bars{display:flex; align-items:flex-end; gap:3px; position:absolute; top:16px; right:16px;}
.bars i{display:block; width:6px; background:var(--accent); border-radius:1px; opacity:.55;}
.bars i:nth-child(1){height:8px;} .bars i:nth-child(2){height:14px;} .bars i:nth-child(3){height:20px; opacity:.78;}
.bars i:nth-child(4){height:26px; opacity:1;}

/* breadcrumb for city pages */
.crumb{font-family:var(--font-mono); font-size:12px; color:var(--muted); padding:16px 0 0;}
.crumb a{color:var(--accent-ink); text-decoration:none;}
.crumb a:hover{text-decoration:underline;}

/* SERVICES */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.svc{background:var(--surface); padding:26px 22px; display:flex; flex-direction:column; gap:12px; min-height:150px;}
.svc svg{width:30px; height:30px; color:var(--accent-ink);}
.svc h3{font-family:var(--font-body); text-transform:none; font-weight:700; font-size:16px; letter-spacing:0;}
.svc p{margin:0; font-size:13px; color:var(--muted);}
@media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr;} }

/* CALCULATOR */
.calc-wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
@media (max-width:940px){ .calc-wrap{grid-template-columns:1fr;} }
.calc-copy h2{font-size:clamp(26px,3.2vw,38px); font-weight:800;}
.calc-copy p{color:var(--muted); max-width:44ch;}
.calc-copy ul{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.calc-copy li{display:flex; gap:10px; font-size:14.5px;}
.calc-copy li::before{content:"›"; color:var(--accent-ink); font-weight:700; font-family:var(--font-mono);}
.panel{background:var(--panel-bg); color:var(--panel-ink); border-radius:10px; padding:24px; box-shadow:var(--shadow); border:1px solid var(--panel-line);}
.panel-head{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#7E9895; padding-bottom:14px; border-bottom:1px solid var(--panel-line); margin-bottom:20px;}
.panel-head .led{display:flex; align-items:center; gap:6px;}
.panel-head .led i{width:6px; height:6px; border-radius:50%; background:var(--panel-digit); box-shadow:0 0 6px var(--panel-digit);}
.field{margin-bottom:14px;}
.field label{display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#7E9895; margin-bottom:6px;}
.field select{
  width:100%; background:#0B141B; color:var(--panel-ink); border:1px solid var(--panel-line); border-radius:4px;
  padding:11px 12px; font-family:var(--font-body); font-size:14.5px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237E9895'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.field select:focus-visible{outline:2px solid var(--panel-digit); outline-offset:1px;}
.calc-btn{width:100%; margin-top:6px; background:var(--panel-digit); color:#04231A; border:none; padding:13px; border-radius:4px; font-family:var(--font-mono); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; font-size:13.5px;}
.calc-btn:hover{filter:brightness(1.08);}
.readout{margin-top:20px; border-top:1px dashed var(--panel-line); padding-top:18px;}
.readout .caption{font-family:var(--font-mono); font-size:10.5px; color:#557872; letter-spacing:0.04em;}
.readout .price{font-family:var(--font-mono); font-size:42px; font-weight:600; color:var(--panel-digit); letter-spacing:0.01em; margin:6px 0 2px; text-shadow:0 0 18px rgba(53,231,184,0.35);}
.readout .price small{font-size:16px; font-weight:500; color:#7E9895; text-shadow:none; text-transform:uppercase; letter-spacing:0.06em;}
.readout .subrange{font-family:var(--font-mono); font-size:12px; color:#7E9895; margin-bottom:10px;}
.readout .row{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-mono); font-size:12.5px; color:#7E9895; padding:3px 0;}
.readout .row b{color:var(--panel-ink); font-weight:500;}
.example-flag{display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:#04231A; background:var(--panel-digit); padding:2px 7px; border-radius:2px; margin-bottom:8px;}
.notlocked{margin-top:16px; padding:12px 14px; border:1px solid #4A3418; background:rgba(255,145,82,0.09); border-radius:5px; font-size:12px; line-height:1.55; color:#F4C79A;}
.notlocked b{color:#FFD9B0;}
.panel-ctas{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.disclaimer{margin-top:14px; font-size:11px; color:#7E9895; line-height:1.5;}

/* GALLERY */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr);} }
figure{margin:0; position:relative; border-radius:5px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); aspect-ratio:3/4;}
figure img{width:100%; height:100%; object-fit:cover; filter:saturate(1.03) contrast(1.03);}
figcaption{position:absolute; left:0; right:0; bottom:0; padding:10px 10px 8px; background:linear-gradient(to top, rgba(9,16,21,0.9), rgba(9,16,21,0)); color:#EAF3F1; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;}
figcaption .case{opacity:.65; display:block; font-size:9.5px;}
.video-tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px dashed var(--line); background:var(--surface-2);}
.video-tile .play{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--accent-ink); display:flex; align-items:center; justify-content:center;}
.video-tile .play svg{width:16px; height:16px; color:var(--accent-ink);}
.video-tile span{font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); text-align:center; padding:0 16px;}

/* SERVICE AREA */
.area-wrap{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
@media (max-width:900px){ .area-wrap{grid-template-columns:1fr;} }
.radar{width:100%; height:auto;}
.area-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.area-list li{border-bottom:1px solid var(--line);}
.area-list li a{display:flex; justify-content:space-between; padding:14px 2px; font-size:15px; text-decoration:none; color:var(--ink);}
.area-list li a:hover b{color:var(--accent-ink);}
.area-list li b{font-weight:600;}
.area-list li span{font-family:var(--font-mono); font-size:12px; color:var(--muted);}

/* COMMERCIAL */
.commercial-wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:center;}
@media (max-width:940px){ .commercial-wrap{grid-template-columns:1fr;} }
.commercial-copy p{color:var(--muted); max-width:56ch; font-size:15.5px; margin:16px 0 20px;}
.commercial-copy ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.commercial-copy li{display:flex; gap:10px; font-size:14.5px; padding-left:0;}
.commercial-copy li::before{content:"›"; color:var(--accent-ink); font-weight:700; font-family:var(--font-mono); flex:none;}
.commercial-photos{display:flex; flex-direction:column; gap:12px;}
.commercial-photos figure{margin:0; position:relative; border-radius:5px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9;}
.commercial-photos img{width:100%; height:100%; object-fit:cover;}
.commercial-photos figcaption{position:absolute; left:0; right:0; bottom:0; padding:9px 12px; background:linear-gradient(to top, rgba(9,16,21,0.88), rgba(9,16,21,0)); color:#EAF3F1; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;}

/* TRUST */
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.trust{background:var(--surface); padding:24px 20px;}
.trust .big{font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--accent-ink);}
.trust .lbl{font-size:12.5px; color:var(--muted); margin-top:4px;}
@media (max-width:900px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }

/* ERROR CODES page */
.code-toc{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px;}
.code-toc a{font-family:var(--font-mono); font-size:12.5px; text-decoration:none; color:var(--ink); border:1px solid var(--line); padding:7px 13px; border-radius:20px;}
.code-toc a:hover{border-color:var(--accent); color:var(--accent-ink);}
.brand-block{padding:36px 0; border-top:1px solid var(--line);}
.brand-block:first-of-type{border-top:none; padding-top:0;}
.brand-block h2{font-size:24px; font-weight:800; margin-bottom:4px;}
.brand-block .sub{color:var(--muted); font-size:13.5px; margin-bottom:18px;}
.code-table{width:100%; border-collapse:collapse; font-size:14px;}
.code-table th{text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); padding:8px 12px 8px 0; border-bottom:1px solid var(--line);}
.code-table td{padding:11px 12px 11px 0; border-bottom:1px solid var(--line); vertical-align:top;}
.code-table td:first-child{font-family:var(--font-mono); font-weight:600; color:var(--accent-ink); white-space:nowrap;}
.code-table .appl{color:var(--muted); font-size:12.5px;}
.code-wrap-scroll{overflow-x:auto;}
.codes-cta{margin-top:18px; padding:22px; border:1px dashed var(--line); border-radius:8px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:var(--surface-2);}
.codes-cta p{margin:0; max-width:48ch; font-size:14px; color:var(--muted);}

/* city cross-links */
.city-links{display:flex; flex-wrap:wrap; gap:10px;}
.city-links a{font-family:var(--font-mono); font-size:12.5px; text-decoration:none; color:var(--ink); border:1px solid var(--line); padding:8px 14px; border-radius:20px;}
.city-links a:hover, .city-links a[aria-current="page"]{border-color:var(--accent); color:var(--accent-ink);}

footer{padding:36px 0; border-top:1px solid var(--line);}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--muted);}
footer .fbrand{font-family:var(--font-mono); color:var(--ink); font-weight:600;}
footer .flinks{display:flex; gap:16px; flex-wrap:wrap;}
footer .flinks a{text-decoration:none; color:var(--muted);}
footer .flinks a:hover{color:var(--ink);}

@media (prefers-reduced-motion:no-preference){
  .btn, .svc, figure img{transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;}
  .svc:hover{transform:translateY(-2px);}
}