/* =========================================================================
   BeaconESS — site.css
   Additive layer on top of the shared Beacon Mid-Atlantic styles.css
   (dark slate + glassmorphism). Everything here is the product-marketing
   furniture the base theme does not have: the mock "screenshots" of FireHUD,
   FirePortal and Turnout, the station-box cards, the run-ticket, and the
   contact form. Built to sit on the same #0f172a ground and glass cards.
   ========================================================================= */

:root {
  --ess-red:    #ef4444;
  --ess-red-dk: #b91c1c;
  --ess-amber:  #f59e0b;
  --ess-green:  #34d399;
  --ess-blue:   #3b82f6;
  --ess-cyan:   #38bdf8;
  --ess-ink:    #0a0f1a;
  --ess-line:   rgba(255,255,255,.08);
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- Nav wordmark (product brand; footer still carries the Beacon org logo) */
.ess-mark { display:flex; align-items:center; gap:.6rem; }
.ess-mark .beacon {
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ess-mark .beacon img {
  width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 0 9px rgba(59,130,246,.4));
}
.ess-mark .word { font-weight:800; letter-spacing:-.01em; font-size:1.35rem; color:#fff; line-height:1; }
.ess-mark .word b { color:#6f95ea; font-weight:800; }
.ess-mark .sub { display:block; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:#94a3b8; margin-top:3px; }

/* Active nav link underline */
.navbar a.active { color:#fff !important; }
.navbar a.active::after {
  content:""; display:block; height:2px; margin-top:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--ess-red), var(--ess-amber));
}

/* ---- Eyebrow chip used across pages ---- */
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem;
  border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; backdrop-filter:blur(6px);
}
.eyebrow-red   { background:rgba(239,68,68,.12);  border:1px solid rgba(239,68,68,.3);  color:#fecaca; }
.eyebrow-blue  { background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.3); color:#bfdbfe; }
.eyebrow-amber { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); color:#fde68a; }
.eyebrow-green { background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); color:#a7f3d0; }

/* ---- Generic screenshot frame (monitor / browser chrome) ---- */
.screen-frame {
  border-radius:16px; overflow:hidden; background:#0b1220;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.screen-bar {
  display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem;
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--ess-line);
}
.screen-bar .dot { width:11px; height:11px; border-radius:50%; }
.screen-bar .dot.r{background:#ef4444}.screen-bar .dot.y{background:#f59e0b}.screen-bar .dot.g{background:#22c55e}
.screen-bar .url {
  margin-left:.6rem; font-family:var(--mono); font-size:.72rem; color:#64748b;
  background:rgba(0,0,0,.25); padding:.2rem .7rem; border-radius:6px; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mock-tag {
  position:absolute; top:14px; right:14px; z-index:5;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:#cbd5e1; background:rgba(2,6,23,.75); border:1px solid var(--ess-line);
  padding:.25rem .6rem; border-radius:999px; backdrop-filter:blur(4px);
}

/* =========================================================================
   FireHUD mock — the station dispatch screen
   ========================================================================= */
.hud {
  background:#111827; color:#f9fafb; padding:22px 22px 0;
  display:flex; flex-direction:column; min-height:372px;
  font-family:"Arial Black","Arial Bold",Arial,sans-serif;
}
.hud-type { font-size:2.55rem; font-weight:900; line-height:.95; letter-spacing:-.02em; text-transform:uppercase; }
.hud-type.sub { color:#e5e7eb; }
.hud-box { display:flex; align-items:baseline; gap:14px; margin-top:16px; }
.hud-box-l { font-family:Arial,Helvetica,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#6b7280; }
.hud-box-v { font-family:Impact,"Arial Narrow",Arial,sans-serif; font-size:2.5rem; line-height:1; color:#f9fafb; letter-spacing:.02em; }
.hud-addr { font-size:1.55rem; font-weight:900; color:#e5e7eb; line-height:1.1; text-transform:uppercase; margin-top:16px; }
.hud-muni { font-size:1.2rem; font-weight:900; color:#cbd5e1; line-height:1.1; text-transform:uppercase; }
.hud-units { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.hud .unit-pill {
  background:#c0392b; color:#fff; font-family:"Arial Black","Arial Bold",Arial,sans-serif;
  font-weight:900; font-size:.98rem; letter-spacing:.06em; text-transform:uppercase;
  padding:7px 18px; border-radius:999px; line-height:1;
}
.hud-eid { font-family:"Courier New",monospace; font-size:.66rem; color:#4b5563; margin-top:auto; padding:16px 0 12px; }
.hud-foot {
  margin:0 -22px; background:#c0392b; display:flex; align-items:center; justify-content:space-between;
  padding:11px 22px; animation:hudflash 1.1s ease-in-out infinite;
}
@keyframes hudflash { 0%,100%{background:#c0392b} 50%{background:#7f1d1d} }
.hud-foot-time { font-family:"Courier New",monospace; font-size:1.4rem; font-weight:700; color:#fff; letter-spacing:.06em; }
.hud-foot-brand { font-family:Arial,Helvetica,sans-serif; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.88); }

/* =========================================================================
   FirePortal mock — records / admin dashboard
   ========================================================================= */
.portal { display:grid; grid-template-columns:180px 1fr; font-size:.8rem; color:#cbd5e1; background:#0b1220; min-height:340px; }
.portal-side { background:#0d1626; border-right:1px solid var(--ess-line); padding:1rem .8rem; }
.portal-side .brand { font-weight:800; color:#fff; font-size:.95rem; margin-bottom:1rem; display:flex; align-items:center; gap:.4rem; }
.portal-side a { display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:7px; color:#94a3b8; margin-bottom:.15rem; }
.portal-side a.on { background:rgba(59,130,246,.16); color:#fff; }
.portal-side a i { width:16px; text-align:center; }
.portal-main { padding:1.1rem 1.2rem; }
.portal-main h5 { color:#fff; font-weight:700; font-size:1rem; margin-bottom:.1rem; }
.portal-main .muted { color:#64748b; font-size:.72rem; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1rem 0; }
.stat { background:rgba(255,255,255,.03); border:1px solid var(--ess-line); border-radius:10px; padding:.8rem; }
.stat .n { font-size:1.5rem; font-weight:800; color:#fff; line-height:1; }
.stat .l { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#64748b; margin-top:.3rem; }
.stat .n.red{color:#fca5a5}.stat .n.green{color:#6ee7b7}.stat .n.amber{color:#fcd34d}
.ptable { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.72rem; }
.ptable th { text-align:left; color:#64748b; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.4rem .5rem; border-bottom:1px solid var(--ess-line); font-size:.6rem;}
.ptable td { padding:.45rem .5rem; border-bottom:1px solid rgba(255,255,255,.05); color:#cbd5e1; }
.ptable tr:hover td { background:rgba(255,255,255,.02); }
.badge-p { font-weight:700; padding:.1rem .45rem; border-radius:4px; font-size:.62rem; }
.badge-p.p1{ background:rgba(239,68,68,.2); color:#fca5a5 }
.badge-p.p2{ background:rgba(245,158,11,.2); color:#fcd34d }
.badge-p.p3{ background:rgba(52,211,153,.16); color:#6ee7b7 }

/* =========================================================================
   Turnout mock — phone
   ========================================================================= */
.phone {
  width:290px; max-width:100%; border-radius:36px; padding:11px;
  background:#05070c; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 60px -15px rgba(0,0,0,.8); position:relative; margin:0 auto;
}
.phone::before { content:""; position:absolute; top:19px; left:50%; transform:translateX(-50%); width:64px; height:5px; border-radius:3px; background:rgba(255,255,255,.16); z-index:2; }
/* Faithful to the real Turnout incident screen: night ground #16191F, red accent,
   response types direct=amber / station=blue, Navigate + Respond action bar. */
.phone-screen { border-radius:26px; overflow:hidden; background:#16191F; display:flex; flex-direction:column; min-height:532px; font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; }
.app-nav { background:#1B1F26; padding:26px 14px 11px; display:flex; align-items:center; gap:9px; border-bottom:1px solid #3B4250; }
.app-nav .chev { color:#FF3B30; font-size:1.1rem; line-height:1; }
.app-nav .ttl { color:#F4F6FA; font-weight:700; font-size:.9rem; letter-spacing:.01em; }
.app-body { padding:14px; flex:1 1 auto; }
.app-loc { color:#F4F6FA; font-size:1.18rem; font-weight:700; line-height:1.15; }
.app-meta { color:#A7B0BE; font-size:.72rem; margin-top:5px; }
.app-units { display:flex; flex-wrap:wrap; gap:5px; margin-top:13px; }
.app-pill { font-size:.64rem; font-weight:800; letter-spacing:.5px; padding:3px 10px; border-radius:999px; border:1px solid #FF3B30; background:#FF3B30; color:#fff; }
.app-pill.aid { background:transparent; color:#FF6a62; }
.app-timer { margin-top:16px; }
.app-timer .l { color:#8A93A3; font-size:.58rem; font-weight:700; letter-spacing:.16em; }
.app-timer .v { color:#F4F6FA; font-size:1.7rem; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums; }
.app-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; background:#232830; border:1px solid #3B4250; border-radius:10px; padding:11px 13px; margin-top:12px; }
.app-row .counts { display:flex; align-items:center; gap:7px; font-size:.76rem; font-weight:700; flex-shrink:0; white-space:nowrap; }
.app-row .direct { color:#FF9F0A; } .app-row .station { color:#3B9EFF; } .app-row .dot { color:#8A93A3; font-weight:400; }
.app-row .mlbl { color:#F4F6FA; font-weight:700; font-size:.78rem; }
.app-row .lnk { color:#A7B0BE; font-size:.7rem; white-space:nowrap; flex-shrink:0; }
.app-raw { background:#232830; border:1px solid #3B4250; border-radius:10px; padding:11px 13px; margin-top:12px; font-size:.62rem; color:#A7B0BE; line-height:1.55; }
.app-raw b { color:#F4F6FA; font-weight:700; }
.app-bar { display:flex; gap:10px; padding:11px 13px 13px; background:#1B1F26; border-top:1px solid #3B4250; }
.app-btn { flex:1; text-align:center; padding:12px; border-radius:10px; font-weight:800; font-size:.82rem; }
.app-btn.nav { border:1.5px solid #FF3B30; color:#FF3B30; }
.app-btn.respond { background:#FF3B30; color:#fff; }

/* =========================================================================
   Station boxes + run-ticket
   ========================================================================= */
.devbox { text-align:center; }
.devbox .unitface {
  height:150px; border-radius:14px; margin-bottom:1.2rem; position:relative; overflow:hidden;
  border:1px solid var(--ess-line); display:flex; align-items:center; justify-content:center;
  background:#0a0f1a;
}
.devbox.display .unitface { background:radial-gradient(circle at 50% 40%, rgba(239,68,68,.18), transparent 60%), #0a0f1a; }
.devbox.display .mini { font-family:var(--mono); text-align:center; }
.devbox.display .mini .t { font-family:"Barlow Semi Condensed",var(--mono); font-weight:800; color:#fff; font-size:1.1rem; }
.devbox.display .mini .u { color:#fca5a5; font-size:.7rem; letter-spacing:.1em; }
.devbox.audio .unitface { background:#0a0f1a; }
.devbox.audio .wave { display:flex; align-items:center; gap:4px; height:44px; }
.devbox.audio .wave span { width:5px; border-radius:3px; background:var(--ess-cyan); animation:eq 1s ease-in-out infinite; }
@keyframes eq { 0%,100%{height:10px}50%{height:44px} }
.devbox.alert .unitface { background:#0a0f1a; }
.devbox.alert .beam { width:70px; height:70px; border-radius:50%; background:radial-gradient(circle, rgba(245,158,11,.9), rgba(245,158,11,.05) 70%); animation:flash 1.2s infinite; }
@keyframes flash { 0%,100%{opacity:.3}50%{opacity:1} }

.run-ticket {
  background:#f8fafc; color:#0f172a; font-family:var(--mono); font-size:.72rem; line-height:1.5;
  border-radius:6px; padding:1.1rem 1rem; max-width:280px; margin:0 auto;
  box-shadow:0 20px 45px -15px rgba(0,0,0,.6);
  background-image:repeating-linear-gradient(transparent, transparent 22px, rgba(0,0,0,.03) 23px);
}
.run-ticket .center { text-align:center; }
.run-ticket .big { font-family:"Barlow Semi Condensed",var(--mono); font-weight:800; font-size:1.05rem; letter-spacing:.02em; }
.run-ticket .rule { border-top:1px dashed #94a3b8; margin:.5rem 0; }
.run-ticket .lbl { font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.62rem; color:#475569; }
.run-ticket .qr { width:70px; height:70px; margin:.4rem auto 0; background:
   conic-gradient(#000 90deg, #fff 0 180deg, #000 0 270deg, #fff 0) 0 0/14px 14px; opacity:.85; border-radius:3px; }
.run-ticket .zig { text-align:center; letter-spacing:2px; color:#94a3b8; }

/* =========================================================================
   Small shared pieces
   ========================================================================= */
.flow-step { display:flex; gap:1rem; align-items:flex-start; }
.flow-num {
  flex-shrink:0; width:40px; height:40px; border-radius:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono);
  background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.35); color:#fca5a5;
}
.tick { color:var(--ess-green); margin-right:.6rem; }
.feature-ico {
  width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:1rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}

/* ---- Contact form ---- */
.field label { display:block; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; margin-bottom:.4rem; }
.field input, .field select, .field textarea {
  width:100%; background:rgba(2,6,23,.5); border:1px solid rgba(255,255,255,.12); color:#f1f5f9;
  border-radius:10px; padding:.75rem .9rem; font-size:.95rem; font-family:inherit; transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color:#475569; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--ess-blue); box-shadow:0 0 0 3px rgba(59,130,246,.2);
}
.field textarea { resize:vertical; min-height:130px; }
.form-note { font-size:.75rem; color:#64748b; }
#form-success { display:none; }
.was-sent #contact-form { display:none; }
.was-sent #form-success { display:block; }

/* =========================================================================
   Mobile fit. Mock components have a wide intrinsic size; without this they
   force the hero grid column wider than the phone, and hero-modern (overflow
   hidden) then clips the headline. Let the children and mocks shrink.
   ========================================================================= */
@media (max-width: 1023.98px) { .hero-modern .grid { grid-template-columns: minmax(0, 1fr) !important; } }
.hero-modern .grid > * { min-width: 0; }
.screen-frame { max-width: 100%; }
.portal { min-width: 0; }
.portal-main { min-width: 0; overflow: hidden; }
.hud, .phone, .run-ticket { max-width: 100%; }