:root{
  --void:#080B11;
  --substrate:#0C1119;
  --panel:#111A26;
  --panel-2:#16202E;
  --line:#1E2A3A;
  --line-2:#28384B;
  --copper:#E8933A;
  --copper-bright:#FFB24D;
  --copper-deep:#B96C22;
  --cyan:#3AD5E0;
  --cyan-dim:#1B8B94;
  --text:#E8EFF7;
  --muted:#93A0B2;
  --muted-2:#7E8B9C;
  --maxw:1220px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.08;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.navcta:focus-visible{outline-color:var(--copper-bright)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--copper-bright);color:#1a0e02;
  padding:12px 18px;font-weight:600;border-radius:0 0 8px 0}
.skip:focus{left:0}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.mono{font-family:'JetBrains Mono',monospace}

/* ---------- ambient background field ---------- */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(232,147,58,.10), transparent 60%),
    radial-gradient(1000px 800px at 8% 12%, rgba(58,213,224,.07), transparent 55%),
    var(--void);
}
.field::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, #000 20%, transparent 75%);
}
.content{position:relative;z-index:1}

/* ---------- top bar ---------- */
.topline{border-bottom:1px solid var(--line);background:rgba(8,11,17,.6);backdrop-filter:blur(6px)}
.topline .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.topline .stat{display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.topline a.tel{color:var(--copper-bright);letter-spacing:.02em}

header.nav{position:sticky;top:0;z-index:50;background:rgba(8,11,17,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
@media(max-width:960px){header.nav .wrap{height:76px}}
@media(max-width:560px){header.nav .wrap{height:68px}}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:38px;height:38px;position:relative;flex:none}
.brand .mark svg{width:100%;height:100%}
.brand .name{font-family:'Space Grotesk';font-weight:700;font-size:17px;letter-spacing:.01em;line-height:1;align-self:center;margin-left:4px}
.brand .name b{color:var(--copper-bright);font-weight:700}
.brand .name span{display:block;font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.28em;color:var(--muted-2);margin-top:4px}
nav.links{display:flex;align-items:center;gap:28px}
nav.links a{font-size:14px;color:var(--muted);font-weight:500;transition:color .2s}
nav.links a:hover{color:var(--text)}
.navcta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;
  background:linear-gradient(180deg,var(--copper-bright),var(--copper));color:#1a0e02;font-weight:600;font-size:14px;
  box-shadow:0 6px 20px -8px rgba(232,147,58,.7);transition:transform .2s,box-shadow .2s}
.navcta:hover{transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(232,147,58,.8)}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:8px;padding:9px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--text);margin:3px 0;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* mobile menu panel */
.mobile-menu{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);z-index:120;
  background:var(--substrate);border-left:1px solid var(--line-2);
  transform:translateX(100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;padding:88px 30px 34px;box-shadow:-30px 0 80px -30px #000}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{font-family:'Space Grotesk';font-size:20px;font-weight:600;color:var(--text);
  padding:15px 0;border-bottom:1px solid var(--line);transition:color .2s}
.mobile-menu a:hover{color:var(--copper-bright)}
.mobile-menu .mm-cta{margin-top:26px;text-align:center;border:0;
  background:linear-gradient(180deg,var(--copper-bright),var(--copper));color:#1a0e02;border-radius:10px;padding:16px}
.mobile-menu .mm-tel{margin-top:14px;text-align:center;font-family:'JetBrains Mono';font-size:13px;
  color:var(--cyan);border:0;letter-spacing:.06em}
.mm-close{position:absolute;top:22px;right:24px;background:none;border:1px solid var(--line-2);
  border-radius:8px;width:38px;height:38px;color:var(--text);cursor:pointer;font-size:20px;line-height:1}
.scrim{position:fixed;inset:0;z-index:110;background:rgba(4,6,10,.6);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.open{opacity:1;visibility:visible}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(52px,8vw,96px) 0 clamp(60px,7vw,90px)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono';font-size:12px;
  letter-spacing:.18em;color:var(--cyan);border:1px solid var(--line-2);border-radius:100px;
  padding:7px 14px;background:rgba(58,213,224,.05);margin-bottom:26px}
.eyebrow .sq{width:6px;height:6px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
h1.headline{font-size:clamp(38px,5.6vw,68px);font-weight:700;letter-spacing:-.03em}
h1.headline .wire{color:var(--copper-bright);position:relative;white-space:nowrap}
.subhead{color:var(--muted);font-size:clamp(16px,1.5vw,18.5px);max-width:44ch;margin:22px 0 34px;line-height:1.65}
.subhead b{color:var(--text);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;border-radius:10px;padding:15px 24px;transition:transform .2s,box-shadow .2s,border-color .2s}
.btn-primary{background:linear-gradient(180deg,var(--copper-bright),var(--copper));color:#1a0e02;box-shadow:0 10px 30px -10px rgba(232,147,58,.65)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(232,147,58,.75)}
.btn-ghost{border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--cyan);color:#fff}
.hero-meta{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero-meta .m{border-left:2px solid var(--copper);padding-left:14px}
.hero-meta .m .n{font-family:'Space Grotesk';font-weight:700;font-size:26px;color:#fff;line-height:1}
.hero-meta .m .l{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.1em;color:var(--muted-2);margin-top:6px;text-transform:uppercase}

/* framed hero visual */
.viewport{position:relative;aspect-ratio:4/4.3;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(232,147,58,.16), transparent 55%),
    linear-gradient(160deg,#12202e,#0b131d);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.02)}
.viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(1.02) brightness(.96)}
.viewport .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,17,.05) 30%,rgba(8,11,17,.62) 92%);z-index:2}
.viewport .scan{position:absolute;left:0;right:0;height:2px;top:0;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(58,213,224,.9),transparent);
  box-shadow:0 0 16px var(--cyan);animation:scan 5.5s var(--ease) infinite}
@keyframes scan{0%{top:2%}50%{top:96%}100%{top:2%}}
.corner{position:absolute;width:22px;height:22px;border:2px solid var(--copper-bright);z-index:4;opacity:.85}
.corner.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.corner.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.corner.bl{bottom:12px;left:12px;border-right:0;border-top:0}
.corner.br{bottom:12px;right:12px;border-left:0;border-top:0}
.viewport .hud{position:absolute;z-index:5;font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.12em;color:var(--cyan)}
.viewport .hud.br{bottom:16px;right:16px;text-align:right;color:var(--copper-bright)}
.viewport .hud.bl{bottom:16px;left:16px;color:var(--muted)}
.viewport .hud.tr{top:16px;right:18px;color:var(--muted)}
.chip-live{position:absolute;top:14px;left:14px;z-index:6;display:flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.14em;color:#0b131d;font-weight:700;
  background:var(--cyan);padding:5px 10px;border-radius:5px}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--substrate);overflow:hidden}
.ticker-track{display:flex;gap:0;white-space:nowrap;animation:marq 32s linear infinite;font-family:'JetBrains Mono';font-size:13px;letter-spacing:.14em;color:var(--muted);padding:14px 0}
.ticker-track span{padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.ticker-track b{color:var(--copper-bright);font-weight:500}
.ticker-track .sep{color:var(--cyan)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- section scaffolding ---------- */
section{position:relative;padding:clamp(64px,9vw,120px) 0}
.sec-head{max-width:660px;margin-bottom:52px}
.tag{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono';font-size:11.5px;letter-spacing:.2em;
  color:var(--copper-bright);text-transform:uppercase;margin-bottom:18px}
.tag::before{content:"";width:26px;height:1px;background:var(--copper)}
.sec-head h2{font-size:clamp(28px,3.6vw,44px)}
.sec-head p{color:var(--muted);margin-top:16px;font-size:16.5px;max-width:56ch}

/* ---------- services ---------- */
.modules{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.modules > .module:nth-child(5):last-child{grid-column:1/-1}
.module{position:relative;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--substrate));
  padding:32px 30px;overflow:hidden;transition:border-color .3s,transform .3s}
.module::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(400px 200px at 20% 0%, rgba(232,147,58,.10), transparent 70%)}
.module:hover{border-color:var(--line-2);transform:translateY(-3px)}
.module:hover::before{opacity:1}
.module .idx{position:absolute;top:22px;right:26px;font-family:'JetBrains Mono';font-size:12px;color:var(--muted-2);letter-spacing:.1em}
.module .ic{width:46px;height:46px;margin-bottom:22px;color:var(--cyan)}
.module:hover .ic{color:var(--copper-bright)}
.module .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;transition:color .3s}
.module h3{font-size:21px;margin-bottom:9px}
.module p{color:var(--muted);font-size:14.5px;line-height:1.6}
.module .go{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:12px;
  letter-spacing:.1em;color:var(--copper-bright);text-transform:uppercase}
.module .go svg{width:14px;height:14px;transition:transform .3s}
.module:hover .go svg{transform:translateX(4px)}

/* ---------- signature: signal map ---------- */
.signal{background:linear-gradient(180deg,transparent,rgba(11,19,29,.6),transparent)}
.signal .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,64px);align-items:center}
.signal-copy h2{font-size:clamp(28px,3.6vw,42px)}
.signal-copy p{color:var(--muted);margin-top:18px;font-size:16.5px}
.legend{display:flex;gap:22px;margin-top:28px;flex-wrap:wrap}
.legend .li{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono';font-size:12px;color:var(--muted);letter-spacing:.05em}
.legend .li i{width:20px;height:3px;border-radius:2px;display:block}
.map-frame{position:relative;border:1px solid var(--line);border-radius:16px;background:
  radial-gradient(120% 120% at 50% 0%, rgba(58,213,224,.06), transparent 60%),
  linear-gradient(180deg,var(--panel),var(--substrate));padding:12px;box-shadow:0 40px 90px -50px #000}
.map-frame svg{width:100%;height:auto;display:block}
.node-label{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.08em;fill:var(--muted)}
.node-core{font-family:'Space Grotesk';font-size:11px;font-weight:700;fill:#0b131d}
.trace{stroke:var(--line-2);stroke-width:1.5;fill:none}
.trace-live{stroke:var(--copper);stroke-width:2;fill:none;filter:drop-shadow(0 0 4px rgba(232,147,58,.7));
  stroke-dasharray:6 220;animation:flow 3s linear infinite}
.trace-data{stroke:var(--cyan);stroke-width:2;fill:none;filter:drop-shadow(0 0 4px rgba(58,213,224,.6));
  stroke-dasharray:6 220;animation:flow 3.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-226}}
.nd{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1.5}
.nd-on{fill:var(--panel-2);stroke:var(--cyan);stroke-width:1.5}
.pin{animation:pin 2.4s ease-in-out infinite}
@keyframes pin{0%,100%{opacity:.4}50%{opacity:1}}

/* ---------- split residential / commercial ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pane{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:38px 34px;min-height:320px;
  display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,var(--panel),var(--substrate))}
.pane .badge{position:absolute;top:26px;left:34px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;
  color:var(--cyan);border:1px solid var(--line-2);padding:5px 11px;border-radius:6px}
.pane.res .badge{color:var(--copper-bright)}
.pane h3{font-size:26px;margin-bottom:12px}
.pane p{color:var(--muted);font-size:15px;margin-bottom:20px}
.pane ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pane li{font-family:'JetBrains Mono';font-size:11.5px;color:var(--muted);border:1px solid var(--line);padding:6px 11px;border-radius:6px;letter-spacing:.03em}
.pane::after{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.pane.res::after{background:linear-gradient(90deg,var(--copper),transparent)}
.pane.com::after{background:linear-gradient(90deg,var(--cyan),transparent)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border-top:2px solid var(--line-2);padding-top:22px}
.step .num{font-family:'JetBrains Mono';font-size:12px;color:var(--copper-bright);letter-spacing:.14em}
.step h4{font-size:18px;margin:12px 0 8px}
.step p{color:var(--muted);font-size:14px}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:12px}
.tile{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(150deg,var(--panel-2),var(--substrate));display:flex;align-items:center;justify-content:center}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.tall{grid-row:span 2}
.tile .ph{text-align:center;color:var(--muted-2);padding:16px}
.tile .ph svg{width:34px;height:34px;stroke:var(--line-2);fill:none;stroke-width:1.5;margin:0 auto 10px}
.tile .ph .t{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.12em;color:var(--muted-2)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,11,17,.6));z-index:2;opacity:0;transition:opacity .3s}
.tile:hover .ov{opacity:1}
.tile .cap{position:absolute;left:12px;bottom:10px;z-index:3;font-family:'JetBrains Mono';font-size:10.5px;color:var(--cyan);letter-spacing:.08em;opacity:0;transition:opacity .3s}
.tile:hover .cap{opacity:1}
.tile .brk{position:absolute;top:10px;left:10px;width:14px;height:14px;border-top:2px solid var(--copper);border-left:2px solid var(--copper);z-index:3;opacity:.6}

/* ---------- areas ---------- */
.areas .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.area-list{display:flex;flex-wrap:wrap;gap:10px}
.area-list .a{font-family:'JetBrains Mono';font-size:13px;color:var(--muted);border:1px solid var(--line);
  border-radius:100px;padding:9px 16px;transition:.25s}
.area-list .a:hover{border-color:var(--copper);color:var(--copper-bright)}
.area-list .a.hub{background:rgba(232,147,58,.08);border-color:var(--copper-deep);color:var(--copper-bright)}

/* ---------- CTA / contact ---------- */
.contact{background:
  radial-gradient(900px 400px at 80% 0%, rgba(232,147,58,.12), transparent 60%),
  radial-gradient(700px 500px at 0% 100%, rgba(58,213,224,.08), transparent 55%),
  var(--substrate);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact .wrap{display:grid;grid-template-columns:1fr .85fr;gap:clamp(32px,5vw,72px)}
.contact h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.03em}
.contact .big-tel{display:inline-flex;align-items:center;gap:14px;margin:26px 0 8px;
  font-family:'Space Grotesk';font-weight:700;font-size:clamp(26px,3.4vw,40px);color:var(--copper-bright)}
.contact .big-tel svg{width:30px;height:30px;stroke:var(--copper-bright);fill:none;stroke-width:1.8}
.contact .note{color:var(--muted);font-size:15px;max-width:42ch}
.info{border:1px solid var(--line);border-radius:16px;background:rgba(8,11,17,.5);padding:30px}
.info .row{padding:16px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:18px}
.info .row:last-child{border-bottom:0}
.info .k{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase}
.info .v{text-align:right;font-size:14.5px;color:var(--text)}
.info .v .mono{font-size:13px;color:var(--muted)}
.info .social{display:flex;gap:10px;justify-content:flex-end}
.info .social a{width:34px;height:34px;border:1px solid var(--line-2);border-radius:8px;display:grid;place-items:center;transition:.25s}
.info .social a:hover{border-color:var(--cyan);color:var(--cyan)}
.info .social svg{width:16px;height:16px;fill:currentColor}

/* ---------- footer ---------- */
footer{padding:52px 0 40px;position:relative}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
footer .fbrand{max-width:340px}
footer .fbrand p{color:var(--muted);font-size:14px;margin-top:14px}
footer nav{display:flex;gap:60px;flex-wrap:wrap}
footer .col h5{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase;margin-bottom:16px}
footer .col a{display:block;color:var(--muted);font-size:14px;padding:5px 0;transition:color .2s}
footer .col a:hover{color:var(--copper-bright)}
.copy{border-top:1px solid var(--line);margin-top:44px;padding-top:22px;text-align:center;
  font-family:'JetBrains Mono';font-size:11.5px;color:var(--muted-2);letter-spacing:.06em}
.copy .credit{color:var(--muted)}
.copy .credit b{color:var(--cyan)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  nav.links{display:none}
  .burger{display:block}
  .hero .wrap{grid-template-columns:1fr}
  .viewport{max-width:460px;margin:0 auto}
  .signal .wrap{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .areas .wrap,.contact .wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  .modules{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr;grid-auto-rows:200px}
  .tile.big{grid-column:span 1;grid-row:span 1}
  .hero-meta{gap:18px}
  .topline .stat.hide-sm{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- forms (contact) ---------- */
.field-row{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.field-row label{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase}
.field-row input,.field-row select,.field-row textarea{
  background:var(--void);border:1px solid var(--line-2);border-radius:9px;color:var(--text);
  font-family:'Inter',sans-serif;font-size:15px;padding:12px 14px;width:100%;transition:border-color .2s}
.field-row input:focus,.field-row select:focus,.field-row textarea:focus{outline:none;border-color:var(--cyan)}
.field-row textarea{resize:vertical;min-height:100px}
.field-row select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237E8B9C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
@media(max-width:860px){
  #contact .wrap{grid-template-columns:1fr!important}
  #contact .info[style*="order:2"]{order:3!important}
}

/* ---------- real client logo ---------- */
/* Self-hosted PNG with baked-in stroke. Nav bar stays slim; the logo
   intentionally overhangs into the section below (badge treatment). */
header.nav .brand{position:relative;height:100%;display:flex;align-items:flex-start}
.brand .logo-img{height:170px;width:auto;object-fit:contain;display:block;margin-top:-9px;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.brand .brand-fallback[hidden]{display:none!important}
footer .logo-img{height:124px;margin:-10px 0}
@media(max-width:960px){.brand .logo-img{height:136px;margin-top:-7px}}
@media(max-width:560px){.brand .logo-img{height:108px;margin-top:-6px}}

/* ---------- gallery: richer placeholders + tighter rhythm ---------- */
.gal-placeholder .tile{background:
  repeating-linear-gradient(-45deg, transparent 0 14px, rgba(40,56,75,.16) 14px 15px),
  linear-gradient(150deg,var(--panel-2),var(--substrate))}
.gal-placeholder .ph svg{width:44px;height:44px;stroke:var(--muted-2);opacity:.9}
.gal-placeholder .tile.big .ph svg{width:64px;height:64px}
.gal-placeholder .ph .t{color:var(--muted);font-size:11.5px;margin-top:2px}
.gal-placeholder .ph .s{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.14em;color:var(--copper);margin-top:8px;opacity:.85}
.gal .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal .tile:hover img{transform:scale(1.04)}
.gal .tile .cap{max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* tighten the gap between recent work and areas (was double section padding) */
.areas{padding-top:clamp(24px,3vw,44px)}

/* contact form success note */
.sent-note{background:rgba(58,213,224,.08);border:1px solid var(--cyan-dim);color:var(--text);
  border-radius:10px;padding:14px 16px;font-size:14.5px;margin-bottom:18px}

/* ---------- intake form: tiers, chips, segments ---------- */
.intake .fs-label{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;color:var(--copper-bright);
  text-transform:uppercase;margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.intake .fs-label:first-of-type{margin-top:0;padding-top:0;border-top:0}
.intake .fs-label em{color:var(--muted-2);font-style:normal;letter-spacing:.08em;text-transform:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
fieldset.tier{border:0;padding:0;margin:0;min-width:0}

/* segmented project-type toggle */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.seg-opt{position:relative;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{display:flex;align-items:center;justify-content:center;padding:14px 10px;border-radius:10px;
  border:1px solid var(--line-2);font-family:'JetBrains Mono';font-size:12.5px;letter-spacing:.16em;
  color:var(--muted);transition:.2s;background:var(--void)}
.seg-opt:hover span{color:var(--text)}
.seg-opt.res input:checked + span{border-color:var(--copper);color:var(--copper-bright);
  background:rgba(232,147,58,.08);box-shadow:inset 0 0 0 1px var(--copper-deep)}
.seg-opt.com input:checked + span{border-color:var(--cyan-dim);color:var(--cyan);
  background:rgba(58,213,224,.07);box-shadow:inset 0 0 0 1px var(--cyan-dim)}
.seg-opt input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}

/* checkbox chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:9px 14px;border-radius:100px;border:1px solid var(--line-2);
  font-family:'JetBrains Mono';font-size:12px;color:var(--muted);letter-spacing:.03em;transition:.18s;background:var(--void)}
.chips label:hover span{color:var(--text);border-color:var(--muted-2)}
.chips input:checked + span{border-color:var(--copper);color:var(--copper-bright);background:rgba(232,147,58,.10)}
#comFields .chips input:checked + span{border-color:var(--cyan-dim);color:var(--cyan);background:rgba(58,213,224,.08)}
.chips input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}

.form-fine{font-size:12.5px;color:var(--muted-2);text-align:center;margin-top:14px}

/* "Other" custom field slides in under the chips */
.other-row{margin-top:2px;padding:12px;border:1px dashed var(--line-2);border-radius:10px;background:rgba(58,213,224,.03)}

/* footer agency credit link */
.copy .credit a.hcw b{color:var(--cyan);transition:color .2s}
.copy .credit a.hcw:hover b{color:var(--copper-bright)}

/* ---------- breadcrumbs ---------- */
/* De-barred per client: no strip, no background — a single line of microtext
   tucked top-right, opposite corner from the logo (collision impossible). */
.crumbs{position:relative;z-index:5}
.crumbs .wrap{display:flex;justify-content:flex-end}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 0;margin:0;
  font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.06em;opacity:.75}
.crumbs li{display:flex;align-items:center;gap:6px;color:var(--muted-2)}
.crumbs li+li::before{content:"/";color:var(--line-2)}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--copper-bright)}
.crumbs [aria-current]{color:var(--cyan)}

/* ---------- FAQ accordions (native details — JS-free) ---------- */
.faqs{max-width:760px}
.faq{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel),var(--substrate));
  margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 20px;font-family:'Space Grotesk';font-weight:600;font-size:16.5px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'JetBrains Mono';color:var(--copper-bright);font-size:18px;flex:none;
  transition:transform .25s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 20px 18px;color:var(--muted);font-size:15px;line-height:1.65;margin:0}
.faq summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:12px}

/* ---------- location pages ---------- */
.loc-body p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:16px;max-width:68ch}
.loc-body p:first-child{color:var(--text)}
.loc-card{text-decoration:none}
.loc-card h3{margin-bottom:8px}



/* ---------- The Signal (blog) ---------- */
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post-card{text-decoration:none;display:flex;flex-direction:column}
.post-card .post-meta{font-size:11px;letter-spacing:.12em;color:var(--copper-bright);margin-bottom:12px}
.post-card h3{margin-bottom:10px;font-size:19px;line-height:1.25}
.post-card p{flex:1}
@media(max-width:960px){.post-list{grid-template-columns:1fr}}

.post-body h2{font-size:clamp(21px,2.4vw,27px);margin:36px 0 14px;color:var(--text)}
.post-body p{color:var(--muted);font-size:16.5px;line-height:1.75;margin-bottom:18px;max-width:70ch}
.post-body strong{color:var(--text)}
.post-body a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.post-body a:hover{color:var(--copper-bright)}

/* brand chips on service pages */
.brands-row{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.brands-label{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.16em;color:var(--copper-bright)}
.brands-row ul{margin-top:10px}
.brands-row .brand-chip{border-color:var(--line-2);color:var(--text)}
.brands-note{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.55}

/* brand wordmark: centered against the nav bar; hidden on small screens (logo carries it) */
header.nav .brand .name{align-self:center;margin-top:0}
footer .brand .name{align-self:center}
@media(max-width:1100px){header.nav .brand .name{display:none}}


/* ---------- sub-page hero clearance ----------
   The nav logo deliberately overhangs the bar (~77px past it on desktop). Sub-page
   heroes previously started 1px below that overhang — no visual collision, but zero
   breathing room, and any wrap in the eyebrow row closed the gap. These heroes now
   clear the overhang at every breakpoint. Padding lives here (not inline) so the
   media queries can actually win. */
.hero.sub{padding-top:clamp(54px,6vw,84px);padding-bottom:0}
@media(max-width:960px){.hero.sub{padding-top:clamp(46px,7vw,64px)}}
@media(max-width:560px){.hero.sub{padding-top:40px}}

/* Eyebrow: wrap cleanly instead of forcing a wide single line on narrow screens */
.eyebrow{max-width:100%;flex-wrap:wrap;line-height:1.5;row-gap:2px}
@media(max-width:560px){
  .eyebrow{font-size:11px;padding:8px 12px}
  .hero .headline{overflow-wrap:break-word}
}

/* Belt-and-braces: nothing in a sub-page hero can sit under the logo's overhang */
@media(min-width:961px){.hero.sub > .wrap{padding-top:6px}}


/* ---------- MOBILE FIX 1: res/com pane badges ----------
   Badge was position:absolute pinned top while pane content is bottom-anchored;
   on mobile the content grows past min-height and collides with it (client
   screenshots: "RESIDENTIAL" printed through the heading). In-flow on mobile. */
@media(max-width:960px){
  .pane{justify-content:flex-start;min-height:0}
  .pane .badge{position:static;align-self:flex-start;margin-bottom:16px}
}

/* ---------- MOBILE FIX 2: sticky logo shrinks into the bar on scroll ----------
   On mobile, content is left-aligned directly under the logo's overhang, so the
   sticky bolt tail rode on top of everything while scrolling (steps, gallery,
   footer links). Top of page keeps the full-size brand moment; once scrolled,
   the logo eases down to fit inside the bar. Desktop unchanged — its centered
   content never collides. */
.brand .logo-img{transition:height .3s var(--ease), margin .3s var(--ease)}
@media(max-width:960px){
  header.nav.scrolled .brand .logo-img{height:70px;margin-top:0}
}
@media(max-width:560px){
  header.nav.scrolled .brand .logo-img{height:62px;margin-top:0}
}
@media(prefers-reduced-motion:reduce){.brand .logo-img{transition:none}}


/* ---------- two-column content sections ----------
   Was an inline grid-template-columns, which no media query could override
   (inline styles win) — so About's "Our Promise" pane stayed a narrow column
   on phones and its text wrapped to one or two words per line. Class-based
   now, collapsing to a single column on tablet and below. */
.wrap.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.wrap.two-col.wide-first{grid-template-columns:1.2fr .8fr}
@media(max-width:900px){
  .wrap.two-col, .wrap.two-col.wide-first{grid-template-columns:1fr;gap:32px}
}

/* ---------- contact form: signal path (v2) ----------
   Matches the home rack diagram: teal icon nodes alive at rest, discrete
   pulses traveling the wires, orange as the completion/energy color. */
.sig-path{border:1px solid var(--line);border-radius:14px;padding:16px 16px 12px;margin-bottom:26px;
  background:radial-gradient(120% 140% at 50% 0%, rgba(56,208,224,.05), transparent 60%)}
.sig-track{display:flex;align-items:center;gap:0}
.sig-node{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:52px}
.sig-dot{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(56,208,224,.45);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
  background:rgba(56,208,224,.06);transition:all .35s ease;position:relative}
.sig-lbl{font-family:'JetBrains Mono';font-size:9px;letter-spacing:.12em;color:var(--muted);transition:color .3s}

/* wires carry a discrete traveling pulse — teal at rest, orange once the stage is done */
.sig-wire{flex:1;height:2px;margin:0 6px 22px;background:rgba(148,163,184,.16);border-radius:2px;position:relative}
.sig-pulse{position:absolute;top:-1px;left:0;width:14px;height:4px;border-radius:3px;
  background:var(--teal);box-shadow:0 0 8px rgba(56,208,224,.8);opacity:.55;
  animation:sigtravel 2.6s linear infinite}
.sig-wire[data-wire="project"] .sig-pulse{animation-delay:.85s}
.sig-wire[data-wire="details"] .sig-pulse{animation-delay:1.7s}
@keyframes sigtravel{
  0%{left:-14px;opacity:0}
  8%{opacity:.9}
  92%{opacity:.9}
  100%{left:100%;opacity:0}
}
.sig-wire.flow{background:rgba(247,164,66,.22)}
.sig-wire.flow .sig-pulse{background:var(--orange);box-shadow:0 0 10px rgba(247,164,66,.9);
  opacity:1;animation-duration:1.2s;animation-delay:0s}

/* stage states */
.sig-node.live .sig-dot{border-color:var(--teal);box-shadow:0 0 0 4px rgba(56,208,224,.12),0 0 14px rgba(56,208,224,.25)}
.sig-node.live .sig-lbl{color:var(--teal)}
.sig-node.done .sig-dot{border-color:var(--orange);color:var(--orange);
  background:rgba(247,164,66,.1);box-shadow:0 0 12px rgba(247,164,66,.28)}
.sig-node.done .sig-lbl{color:var(--orange)}
.sig-hq .sig-dot{border-color:rgba(247,164,66,.55);color:rgba(247,164,66,.6)}
.sig-hq.ready .sig-dot{border-color:var(--orange);color:var(--orange);background:rgba(247,164,66,.12);
  box-shadow:0 0 16px rgba(247,164,66,.4);animation:hqpulse 1.6s ease-in-out infinite}
@keyframes hqpulse{50%{box-shadow:0 0 26px rgba(247,164,66,.65)}}

/* meter */
.sig-meter{display:flex;align-items:center;gap:10px;margin-top:12px;justify-content:flex-end}
.sig-meter-lbl,.sig-pct{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.12em;color:var(--muted)}
.sig-pct{min-width:34px;text-align:right;color:var(--teal)}
.sig-bars{display:flex;gap:3px}
.sig-bars i{width:10px;height:12px;border-radius:2px;transition:background .3s, box-shadow .3s;
  background:rgba(56,208,224,.28);border:1px solid rgba(56,208,224,.45);
  box-shadow:inset 0 0 4px rgba(56,208,224,.35)}
.sig-bars i.on{background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 8px rgba(247,164,66,.55), inset 0 0 3px rgba(255,220,160,.6)}

/* submit surge */
.sig-path.sending .sig-wire{background:rgba(247,164,66,.35)}
.sig-path.sending .sig-pulse{background:var(--orange);opacity:1;animation-duration:.4s;animation-delay:0s;
  box-shadow:0 0 12px rgba(247,164,66,1)}
.sig-hq.rx .sig-dot{background:rgba(247,164,66,.22);transform:scale(1.12)}

@media(max-width:560px){
  .sig-path{padding:12px 10px 10px}
  .sig-lbl{font-size:8px;letter-spacing:.08em}
  .sig-dot{width:28px;height:28px}
  .sig-dot svg{width:12px;height:12px}
  .sig-wire{margin:0 4px 20px}
}
@media(prefers-reduced-motion:reduce){
  .sig-pulse{animation:none;opacity:0}
  .sig-wire.flow{background:rgba(247,164,66,.5)}
  .sig-hq.ready .sig-dot{animation:none}
}