:root {
  --bg: #08101a;
  --panel: #101923;
  --panel-2: #14202b;
  --text: #f4efe4;
  --muted: #b9b4aa;
  --line: #2c3947;
  --gold: #d3a446;
  --gold-2: #f0c66d;
  --danger: #d64f45;
  --max: 1120px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(211,164,70,.14), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

body::before {
  content: "";
  position: fixed;
  inset: 72px 0 0 0;
  z-index: -1;
  background:
    linear-gradient(rgba(8,13,20,.91), rgba(8,13,20,.94)),
    url("bih-support-emblem.png") center 30% / min(82vw, 760px) no-repeat;
  opacity: .92;
  pointer-events: none;
}

a { color: inherit; }
.skip-link {
  position: absolute; left: -999px; top: 8px;
}
.skip-link:focus {
  left: 8px; z-index: 1000; background: #fff; color: #000; padding: 10px 14px; border-radius: 8px;
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(8,16,26,.94);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(10px);
}
.brand {
  width: min(var(--max), calc(100% - 32px));
  margin: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
}
.brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(240,198,109,.7);
  box-shadow: 0 0 0 3px rgba(211,164,70,.08);
}
.brand-name { font-weight: 900; letter-spacing: .08em; font-size: .96rem; }
.brand-tagline { color: var(--muted); font-size: .75rem; margin-top: 2px; }

.hero, .section {
  width: min(var(--max), calc(100% - 32px));
  margin: auto;
}
.hero { padding: 76px 0 40px; }
.hero-kicker, .eyebrow {
  display: inline-block;
  color: var(--gold-2);
  font-weight: 800;
  letter-spacing: .15em;
  font-size: .78rem;
}
h1, h2, h3 { line-height: 1.08; margin-top: 0; }
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 12vw, 6.8rem);
  margin: 10px 0 18px;
  letter-spacing: -.035em;
}
.hero-copy {
  max-width: 760px;
  font-size: clamp(1.05rem, 3.7vw, 1.35rem);
  color: var(--muted);
  margin: 0 0 34px;
}
.urgent-panel {
  display: grid;
  gap: 24px;
  background: linear-gradient(135deg, rgba(214,79,69,.13), rgba(18,20,25,.95));
  border: 1px solid rgba(214,79,69,.55);
  border-left: 5px solid var(--danger);
  padding: 24px;
  border-radius: var(--radius);
}
.urgent-panel h2 { margin: 6px 0 8px; font-size: clamp(1.7rem, 7vw, 2.5rem); }
.urgent-panel p { color: var(--muted); margin: 0; max-width: 720px; }
.urgent-label {
  color: #ff8b81;
  font-size: .78rem;
  letter-spacing: .14em;
  font-weight: 900;
}
.urgent-actions, .action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 850;
  border-radius: 12px;
  padding: 12px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
}
.button-primary {
  background: var(--gold);
  color: #111;
}
.button-primary:hover, .button-primary:focus-visible { background: var(--gold-2); }
.button-secondary {
  border-color: #555862;
  background: #17191e;
  color: var(--text);
}
.button-secondary:hover, .button-secondary:focus-visible { border-color: var(--gold); }
.button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.section {
  padding: 68px 0;
  border-top: 1px solid var(--line);
}
.section-dark {
  width: 100%;
  max-width: none;
  padding-left: max(16px, calc((100vw - var(--max)) / 2));
  padding-right: max(16px, calc((100vw - var(--max)) / 2));
  background: rgba(255,255,255,.025);
}
.section-heading { max-width: 760px; margin-bottom: 28px; }
.section-heading h2, .about h2, .reassurance h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 8vw, 3.5rem);
  margin: 8px 0 10px;
}
.section-heading p, .about p, .reassurance p { color: var(--muted); font-size: 1.05rem; }
.centered { text-align: center; margin-left: auto; margin-right: auto; }

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(211,164,70,.55);
  color: var(--gold-2);
  border-radius: 50%;
  margin-bottom: 18px;
  font-weight: 900;
}
.card h3 { margin: 0 0 8px; font-size: 1.28rem; }
.card p { color: var(--muted); margin: 0 0 16px; }
.card-link {
  color: var(--gold-2);
  font-weight: 800;
  text-decoration: none;
}
.card-link:hover { text-decoration: underline; }

.zip-form {
  max-width: 680px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.zip-form label { display: block; font-weight: 800; margin-bottom: 8px; }
.zip-row { display: grid; gap: 10px; }
.zip-form input {
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  background: #09121c;
  border: 1px solid #565a64;
  color: #fff;
  padding: 12px 14px;
  font-size: 1.1rem;
}
.fine-print { color: var(--muted); font-size: .86rem; margin: 10px 0 0; }
.form-error { color: #ff9d95; font-weight: 700; }
.source-box {
  max-width: 680px;
  margin-top: 16px;
  border-left: 3px solid var(--gold);
  padding: 16px 18px;
  background: rgba(211,164,70,.06);
}
.source-box p { color: var(--muted); }

.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.role-grid div {
  min-height: 68px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  font-weight: 750;
}
.center-note {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: center;
  color: var(--muted);
}
.about-grid { display: grid; gap: 32px; }
.reassurance { text-align: center; padding-bottom: 90px; }
.reassurance p { margin-bottom: 22px; }

.site-footer {
  border-top: 1px solid var(--line);
  background: #050b12;
  padding: 36px 16px 20px;
}
.footer-inner {
  max-width: var(--max);
  margin: auto;
  display: grid;
  gap: 22px;
}
.footer-inner strong {
  color: var(--gold-2);
  letter-spacing: .08em;
}
.footer-inner p { color: var(--muted); }
.footer-note { font-size: .88rem; }
.footer-bottom {
  max-width: var(--max);
  margin: 22px auto 0;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: #8f8b84;
  font-size: .82rem;
}

@media (min-width: 720px) {
  .hero { padding-top: 96px; }
  .urgent-panel { grid-template-columns: 1.5fr 1fr; align-items: center; }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zip-row { grid-template-columns: 1fr auto; }
  .role-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .about-grid, .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .role-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


.contact-support {
  border-top: 1px solid var(--line);
}
.contact-grid {
  display: grid;
  gap: 22px;
}
.contact-note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px;
}
.contact-note strong {
  color: var(--gold-2);
}
.contact-note p {
  color: var(--muted);
  margin-bottom: 0;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links a {
  color: var(--gold-2);
  text-decoration: none;
  font-weight: 800;
}
.footer-links a:hover {
  text-decoration: underline;
}
.footer-social {
  color: var(--muted);
  font-size: .92rem;
}

@media (min-width: 720px) {
  .contact-grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
  }
  .footer-inner {
    grid-template-columns: 1fr .8fr 1.4fr;
  }
}


/* V10: judgment-free navigation + specialized resource paths */
.issue-cards {
  grid-template-columns: 1fr;
}
.resource-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.resource-card {
  background: rgba(16,25,35,.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.resource-card h3 {
  font-size: 1.35rem;
  margin: 8px 0 10px;
}
.resource-card p {
  color: var(--muted);
  margin: 0 0 18px;
}
.resource-label {
  color: var(--gold-2);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
}
.resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.safety-disclaimer {
  padding-top: 32px;
}
.disclaimer-box {
  background: rgba(16,25,35,.97);
  border: 1px solid #5b6570;
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px;
}
.disclaimer-box h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 7vw, 2.7rem);
  margin: 8px 0 14px;
}
.disclaimer-box p {
  color: var(--muted);
}
.disclaimer-box strong {
  color: var(--text);
}
.review-date {
  color: #777f88;
}

/* Defensive mobile overflow fix without changing the visual layout. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.button, .card-link {
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .issue-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .resource-card-wide {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1000px) {
  .issue-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* V11: access/cost transparency and stronger safety distinction */
.safety-strip {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto 30px;
  padding: 14px 16px;
  border: 1px solid #465363;
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  background: rgba(10,20,31,.96);
  display: grid;
  gap: 4px;
  font-size: .9rem;
}
.safety-strip span {
  color: var(--muted);
}
.resource-standard {
  padding-top: 42px;
  padding-bottom: 42px;
}
.standard-box {
  background: linear-gradient(135deg, rgba(211,164,70,.08), rgba(16,25,35,.97));
  border: 1px solid rgba(211,164,70,.45);
  border-radius: var(--radius);
  padding: 24px;
}
.standard-box h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 8vw, 3.3rem);
  margin: 8px 0 12px;
}
.standard-box p {
  color: var(--muted);
}
.standard-note {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-bottom: 0;
}
.access-badge {
  display: inline-block;
  margin: 9px 0 3px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(120,190,145,.55);
  background: rgba(80,150,105,.10);
  color: #bfe4c9;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.access-badge.access-limited {
  border-color: rgba(211,164,70,.55);
  background: rgba(211,164,70,.08);
  color: var(--gold-2);
}
.email-warning {
  margin-top: 14px;
  max-width: 650px;
  color: #d0c9bd !important;
  font-size: .9rem !important;
}
.email-warning strong {
  color: #ff9d95;
}


/* V12: persistent career tabs + stronger disclaimer/data emphasis */
.career-tabs {
  position: sticky;
  top: 72px;
  z-index: 90;
  background: rgba(8,16,26,.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.career-tabs-inner {
  width: min(var(--max), calc(100% - 24px));
  margin: auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.career-tabs-inner a {
  flex: 0 0 auto;
  text-decoration: none;
  border: 1px solid #3e4b59;
  background: rgba(16,25,35,.94);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
}
.career-tabs-inner a:hover,
.career-tabs-inner a:focus-visible {
  border-color: var(--gold);
  color: var(--gold-2);
}

.privacy-strip {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto 18px;
  padding: 14px 16px;
  border: 1px solid #3f5669;
  border-left: 4px solid #6fa4cc;
  border-radius: 12px;
  background: rgba(9,23,34,.96);
  display: grid;
  gap: 4px;
  font-size: .9rem;
}
.privacy-strip strong {
  color: #e8f3fb;
}
.privacy-strip span {
  color: var(--muted);
}

.safety-strip strong,
.disclaimer-box strong,
.email-warning strong,
.standard-box strong {
  font-weight: 950;
}

.resource-card[id] {
  scroll-margin-top: 155px;
}
#general-support,
#community,
#substance,
#veterans {
  scroll-margin-top: 155px;
}

@media (min-width: 900px) {
  .career-tabs-inner {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}


/* ==========================================================
   V13.2 — ONE responsive site, ONE domain, ONE codebase.
   Mobile: swipe + arrows. Desktop: arrows + wider layout.
   ========================================================== */

:root {
  --support-sage: #86a892;
  --support-sage-strong: #a9c6b2;
  --support-sage-bg: rgba(134,168,146,.12);

  /* Service-flag-inspired navigation accents only. */
  --career-fire: #b84b43;
  --career-law: #597fa8;
  --career-dispatch: #c9a74f;
  --career-military: #7f8f67;
  --career-healthcare: #8c6ca8;
  --career-corrections: #737b83;
  --career-tow: #d18445;
  --career-public: #4d9b87;
  --career-general: #b39a68;
}

.career-tabs-shell {
  width: min(var(--max), calc(100% - 14px));
  margin: auto;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 5px;
}

.career-tabs-inner {
  width: 100%;
  margin: 0;
  padding: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

.career-tabs-inner::-webkit-scrollbar {
  display: none;
}

.career-tabs-inner a {
  scroll-snap-align: start;
  border-width: 1px;
  border-bottom-width: 3px;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}

.career-tabs-inner a:hover,
.career-tabs-inner a:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
}

.career-arrow {
  width: 36px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid rgba(211,164,70,.45);
  background: rgba(16,25,35,.96);
  color: var(--gold-2);
  font-size: 1.55rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.career-arrow:disabled {
  opacity: .28;
  cursor: default;
}

.career-swipe-hint {
  width: min(var(--max), calc(100% - 24px));
  margin: -4px auto 8px;
  text-align: center;
  color: #8d98a5;
  font-size: .72rem;
}

/* Career colors are subtle wayfinding accents — not hierarchy. */
.tab-fire { border-bottom-color: var(--career-fire) !important; }
.tab-law { border-bottom-color: var(--career-law) !important; }
.tab-dispatch { border-bottom-color: var(--career-dispatch) !important; }
.tab-military { border-bottom-color: var(--career-military) !important; }
.tab-healthcare { border-bottom-color: var(--career-healthcare) !important; }
.tab-corrections { border-bottom-color: var(--career-corrections) !important; }
.tab-tow { border-bottom-color: var(--career-tow) !important; }
.tab-public { border-bottom-color: var(--career-public) !important; }
.tab-general { border-bottom-color: var(--career-general) !important; }

/* Gold = BIH identity. Sage = calm next step. Red = urgent/crisis. */
.section:not(.hero) .button-primary:not([href^="tel:988"]):not([href^="sms:988"]) {
  background: var(--support-sage);
  color: #08110c;
}
.section:not(.hero) .button-primary:not([href^="tel:988"]):not([href^="sms:988"]):hover,
.section:not(.hero) .button-primary:not([href^="tel:988"]):not([href^="sms:988"]):focus-visible {
  background: var(--support-sage-strong);
}

.access-badge {
  border-color: rgba(134,168,146,.62);
  background: var(--support-sage-bg);
  color: #cbe0d1;
}

.urgent-panel .button-primary,
[href^="tel:988"].button-primary,
[href^="sms:988"].button-primary {
  background: var(--danger);
  color: #fff;
}

.resource-review-note {
  margin: 14px 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: #9eaaa5 !important;
  font-size: .86rem;
}

.back-to-top {
  position: fixed;
  right: 14px;
  bottom: 16px;
  z-index: 120;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(211,164,70,.65);
  background: rgba(8,16,26,.96);
  color: var(--gold-2);
  padding: 9px 13px;
  font-weight: 850;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Desktop uses the SAME site and content; only layout changes. */
@media (min-width: 900px) {
  .career-tabs-shell {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .career-arrow {
    width: 42px;
    height: 44px;
  }

  .career-swipe-hint {
    font-size: .7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .career-tabs-inner {
    scroll-behavior: auto;
  }

  .back-to-top {
    transition: none;
  }
}

/* V14 */
.role-stripes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:24px}.role-stripe{padding:0 2px 10px;border-bottom:4px solid var(--gold);font-weight:800}.role-military{border-color:var(--career-military)}.role-fire{border-color:var(--career-fire)}.role-law{border-color:var(--career-law)}.role-dispatch{border-color:var(--career-dispatch)}.role-healthcare{border-color:var(--career-healthcare)}.role-corrections{border-color:var(--career-corrections)}.role-tow{border-color:var(--career-tow)}.role-public{border-color:var(--career-public)}.role-search{border-color:#8c789e}.role-other{border-color:var(--career-general)}
.career-tabs-inner a.is-active{background:rgba(255,255,255,.075);font-weight:950}.tab-fire.is-active{color:var(--career-fire)}.tab-law.is-active{color:var(--career-law)}.tab-dispatch.is-active{color:var(--career-dispatch)}.tab-military.is-active{color:var(--career-military)}.tab-healthcare.is-active{color:var(--career-healthcare)}.tab-corrections.is-active{color:var(--career-corrections)}.tab-tow.is-active{color:var(--career-tow)}.tab-public.is-active{color:var(--career-public)}.tab-general.is-active{color:var(--career-general)}
.button-copy{background:transparent!important;border:1px dashed rgba(134,168,146,.62)!important;color:#cbe0d1!important;margin-left:6px}.career-collapse-toggle{width:100%;margin:10px 0 14px;padding:9px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;color:#aeb8c2;display:flex;justify-content:space-between;font:inherit;font-size:.82rem;font-weight:800}.career-collapse-content[hidden]{display:none}.career-fallback{display:block;margin-top:15px;color:var(--support-sage-strong);font-size:.86rem;font-weight:800;text-decoration:none}
.floating-access{position:fixed;right:12px;bottom:14px;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.floating-access button{min-height:44px;border-radius:999px;font-weight:900;box-shadow:0 8px 24px rgba(0,0,0,.35)}.crisis-access-button{border:1px solid rgba(200,73,67,.8);background:rgba(92,28,28,.96);color:#fff;padding:10px 14px}.floating-access .back-to-top{position:static!important;display:none;opacity:1;visibility:visible;transform:none}.floating-access .back-to-top.is-visible{display:block}
.crisis-access-panel{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.68);padding:18px;overflow:auto}.crisis-access-panel[hidden]{display:none}.crisis-access-card{position:relative;width:min(560px,100%);margin:max(9vh,54px) auto;padding:24px;border-radius:var(--radius);border:1px solid rgba(200,73,67,.65);border-top:4px solid var(--danger);background:#101923}.crisis-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);font-size:1.5rem}.crisis-quick-actions{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}.button-crisis{background:var(--danger);color:#fff}
@media(min-width:760px){.role-stripes{grid-template-columns:repeat(5,minmax(0,1fr))}}