/* Interstate Desk — 2026 shop app. NEVER white/cream type. No terminal mono. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root{
  --ground:#2F3A28;
  --ground-2:#26301F;
  --ground-3:#3C4A34;
  --lime:#B0C810;
  --orange:#F86000;
  --taupe:#C9B89A;
  --stone:#8F7E62;
  --teal:#3D7A6A;
  --on-accent:#1a2a0a;
  --line:rgba(176,200,16,.16);
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:"DM Sans",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:22px;
  --shadow:0 22px 50px rgba(8,12,6,.38);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--ground)}
body{
  background:var(--ground);
  background-image:radial-gradient(1200px 600px at 80% -10%, rgba(176,200,16,.12), transparent 55%);
  color:var(--taupe);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.45;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--lime);text-decoration:none}
a:hover{color:var(--orange)}

.desk-nav{
  position:sticky;top:0;z-index:40;
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 18px;
  background:rgba(38,48,31,.62);
  backdrop-filter:saturate(1.2) blur(18px);
  -webkit-backdrop-filter:saturate(1.2) blur(18px);
  overflow-x:auto;
  flex-wrap:nowrap;
}
body.home .desk-nav{
  position:absolute;left:0;right:0;top:0;
  background:linear-gradient(180deg, rgba(16,20,14,.72), transparent);
  backdrop-filter:none;
}
.desk-nav .brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:4px 14px 4px 0;
  margin-right:6px;
  flex-shrink:0;
}
.desk-nav .brand img{height:42px;width:auto;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.desk-nav .brand span{
  font-family:var(--display);
  font-size:18px;
  letter-spacing:-.03em;
  color:var(--lime);
  font-weight:700;
}
.desk-nav .brand em{font-style:normal;color:var(--orange)}
.desk-nav a.nav-link{
  color:var(--taupe);
  font-size:14px;
  font-weight:600;
  padding:9px 13px;
  border-radius:999px;
  flex-shrink:0;
  white-space:nowrap;
}
.desk-nav a.nav-link:hover{color:var(--lime);background:rgba(176,200,16,.1);text-decoration:none}
.desk-nav a.nav-link.active{
  color:var(--on-accent);
  background:var(--lime);
}
.desk-nav .spacer{flex:1;min-width:12px}
.desk-nav .stamp{
  font-size:12px;
  font-weight:700;
  color:var(--on-accent);
  background:var(--orange);
  padding:6px 12px;
  border-radius:999px;
  flex-shrink:0;
}

main{flex:1;padding:0 0 64px;width:100%}
.page{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
  padding:28px 0 0;
}

h1,h2,h3,.work-body h3,.tile .n,.unit h3,.pin-body h3,.route-step h3,.inbox-row .subj,.panel h2{
  font-family:var(--display);
  letter-spacing:-.03em;
  font-weight:700;
}
h1{
  font-size:clamp(32px, 5vw, 52px);
  margin:0 0 8px;
  color:var(--lime);
}
.sub{color:var(--taupe);margin:0 0 22px;font-size:17px;opacity:.92}
.kicker{
  font-size:13px;
  font-weight:600;
  color:var(--orange);
  margin:0 0 6px;
}

.hero-band{
  position:relative;
  min-height:420px;
  overflow:hidden;
}
.hero-band img{
  width:100%;
  height:520px;
  object-fit:cover;
  display:block;
  filter:saturate(.9) brightness(.62);
}
.hero-copy{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 8vw 56px;
  background:linear-gradient(180deg, rgba(16,20,14,.25) 0%, transparent 28%, rgba(22,28,18,.55) 62%, rgba(22,28,18,.94) 100%);
}
.hero-copy h1{color:var(--lime);max-width:14ch;text-shadow:0 8px 28px rgba(8,12,6,.45)}
.hero-copy .sub{color:var(--taupe);margin:0;max-width:34ch;font-size:18px}

.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:-48px 0 36px;
  position:relative;
  z-index:2;
}
.tile{
  position:relative;
  display:block;
  height:190px;
  border-radius:var(--r);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow);
}
.tile img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .7s var(--ease);
}
.tile:hover img{transform:scale(1.08)}
.tile:hover{text-decoration:none;color:inherit}
.tile > span{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px 18px;
  background:linear-gradient(180deg, transparent 20%, rgba(22,28,18,.88));
}
.tile .n{font-size:34px;color:var(--lime);line-height:1}
.tile .l{color:var(--orange);font-weight:700;margin-top:2px;font-size:16px}
.tile .s{color:var(--taupe);font-size:13px}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 16px;
  flex-wrap:wrap;
}
.section-head h2{margin:0;font-size:28px;color:var(--lime)}

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}

button, .btn{
  background:rgba(176,200,16,.08);
  border:0;
  color:var(--taupe);
  padding:12px 18px;
  font-size:15px;
  font-family:var(--sans);
  font-weight:600;
  cursor:pointer;
  display:inline-block;
  border-radius:14px;
}
button:hover, .btn:hover{background:rgba(176,200,16,.16);color:var(--lime);text-decoration:none}
button.primary, .btn.primary{
  background:var(--orange);
  color:var(--on-accent);
  font-weight:700;
  font-size:16px;
  padding:14px 22px;
  box-shadow:0 10px 24px rgba(248,96,0,.28);
}
button.primary:hover, .btn.primary:hover{
  background:var(--lime);
  color:var(--on-accent);
  box-shadow:0 10px 24px rgba(176,200,16,.28);
}
button.ghost{background:transparent;color:var(--stone)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:0;
  background:rgba(38,48,31,.9);
  color:var(--taupe);
  padding:9px 16px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border-radius:999px;
}
.chip.on{background:var(--lime);color:var(--on-accent)}

.search{flex:1;min-width:200px;max-width:360px}

input,select,textarea{
  background:rgba(22,28,18,.72);
  border:0;
  color:var(--taupe);
  padding:13px 14px;
  font-size:16px;
  font-family:inherit;
  width:100%;
  border-radius:14px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lime)}
::placeholder{color:var(--stone);opacity:1}
label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--orange);
  margin-bottom:6px;
}
.field{margin-bottom:14px}

.work{
  position:relative;
  height:300px;
  border-radius:var(--r);
  overflow:hidden;
  cursor:pointer;
  margin:0 0 16px;
  box-shadow:var(--shadow);
}
.work-pic, .work > img{
  position:absolute;inset:0;
}
.work-pic img, .work > img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.work:hover img{transform:scale(1.06)}
.work-body{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 24px;
  background:linear-gradient(180deg, transparent 28%, rgba(22,28,18,.5) 58%, rgba(22,28,18,.94));
}
.work-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.work-type{color:var(--orange);font-weight:700}
.work-body h3{margin:0 0 6px;font-size:28px;color:var(--lime)}
.work-where{margin:0 0 4px;color:var(--taupe)}
.work-who{margin:0;color:var(--stone);font-size:14px}

.unit{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:end;
  min-height:200px;
  border-radius:var(--r);
  overflow:hidden;
  margin:0 0 16px;
  padding:20px 22px;
  box-shadow:var(--shadow);
}
.unit img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.55) saturate(.9);
}
.unit > div{position:relative;z-index:1}
.unit h3{margin:0 0 4px;color:var(--lime);font-size:24px}
.unit p{margin:0;color:var(--taupe);font-size:15px}
.unit .type{color:var(--orange);font-weight:700}
.unit .rent{color:var(--lime);font-size:26px;font-weight:700;white-space:nowrap}

.pill{
  display:inline-block;
  padding:5px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(176,200,16,.16);
  color:var(--lime);
}
.pill.is-go{background:rgba(176,200,16,.22);color:var(--lime)}
.pill.is-warn{background:rgba(248,96,0,.22);color:var(--orange)}

.mail-compose{
  padding:20px;
  margin:0 0 22px;
  background:rgba(38,48,31,.72);
  border-radius:var(--r);
}
.inbox{display:flex;flex-direction:column;gap:12px}
.inbox-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 16px;
  padding:20px 22px;
  background:rgba(38,48,31,.72);
  border-radius:var(--r);
  cursor:pointer;
}
.inbox-row:hover{background:rgba(50,62,40,.9)}
.inbox-row .from{color:var(--orange);font-weight:700;font-size:14px}
.inbox-row .subj{color:var(--lime);font-size:20px;margin:4px 0 0}
.inbox-row .date{color:var(--stone);font-size:13px}
.inbox-row .snip{grid-column:1/-1;color:var(--taupe);margin:4px 0 0;display:none}
.inbox-row.open .snip{display:block}

.panel{
  padding:24px 26px;
  margin:0 0 16px;
  background:rgba(38,48,31,.72);
  border-radius:var(--r);
}
.panel h2{margin:0 0 6px;font-size:24px;color:var(--lime)}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}

.pin{
  position:relative;
  min-height:240px;
  border-radius:var(--r);
  overflow:hidden;
  margin:0 0 16px;
  box-shadow:var(--shadow);
}
.pin-map{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 62% 44%, var(--orange) 0 10px, transparent 11px),
    url("work/g-lawn.jpg") center/cover;
  filter:saturate(.8) brightness(.55);
}
.pin-body{
  position:relative;z-index:1;
  min-height:240px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 24px;
  background:linear-gradient(180deg, transparent 30%, rgba(22,28,18,.92));
}
.pin-body h3{margin:8px 0 6px;color:var(--lime);font-size:24px}
.pin-body p{margin:0 0 6px;color:var(--taupe)}

.route-step{
  position:relative;
  min-height:220px;
  border-radius:var(--r);
  overflow:hidden;
  margin:0 0 14px;
  box-shadow:var(--shadow);
}
.route-step img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.58);
}
.route-step .n{
  position:absolute;top:16px;left:16px;z-index:2;
  width:48px;height:48px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-size:20px;font-weight:800;
  color:var(--on-accent);background:var(--lime);
}
.route-step .b{
  position:relative;z-index:1;
  min-height:220px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 24px;
  background:linear-gradient(180deg, transparent 28%, rgba(22,28,18,.92));
}
.route-step h3{margin:0 0 4px;color:var(--lime);font-size:24px}
.route-step .t{color:var(--orange);font-weight:700}

dialog.desk-dlg{
  border:0;
  background:var(--ground-2);
  color:var(--taupe);
  padding:0;
  width:min(540px, calc(100vw - 24px));
  border-radius:24px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
dialog.desk-dlg::backdrop{background:rgba(10,14,8,.72);backdrop-filter:blur(8px)}
.dlg-form{padding:26px}
.dlg-detail{padding:0 0 22px}
.dlg-kicker{font-size:13px;font-weight:700;color:var(--orange);margin:0 0 6px}
.dlg-form h2,.dlg-detail h2{margin:0 0 14px;color:var(--lime);font-size:28px}
.dlg-detail .dlg-kicker,.dlg-detail .work-type,.dlg-detail h2,.dlg-detail .dlg-row,.dlg-detail .dlg-actions{
  padding-left:24px;padding-right:24px;
}
.dlg-detail .dlg-kicker{padding-top:18px}
.dlg-pic{width:100%;height:200px;object-fit:cover;display:block;margin:8px 0 14px}
.dlg-row{display:flex;gap:12px;margin:0 0 8px;font-size:15px}
.dlg-row b{color:var(--stone);font-weight:600;min-width:88px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap;padding:0 24px}

.desk-footer{
  padding:22px 16px 28px;
  font-size:13px;
  color:var(--stone);
  text-align:center;
}
.desk-footer .rk{color:var(--lime);font-weight:700}

@media (max-width:880px){
  .tiles{grid-template-columns:1fr 1fr;margin-top:-36px}
  .work{height:240px}
  .hero-band img{height:380px}
  .page{width:calc(100% - 24px)}
  .unit{grid-template-columns:1fr}
  .tile{height:160px}
}