/* ===========================================================
   J3 LLC — Site stylesheet
   =========================================================== */

:root {
  /* Blue channel boosted 30% across the palette (site colors were
     leaning teal/green — this shifts them noticeably bluer while
     keeping the same overall hue family). */
  --navy: #003b52;
  --navy-deep: #001924;
  --blue: #0d8bba;
  --blue-light: #57d6ff;
  --ink: #16232f;
  --slate: #4a5a68;
  --line: #e2e8ee;
  --paper: #ffffff;
  --fog: #f4f7fa;
  --gold: #c9a24b;

  --font-head: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --radius: 10px;
  --shadow: 0 10px 30px -12px rgba(0, 25, 28, 0.22);
  --shadow-sm: 0 4px 14px -6px rgba(0, 25, 28, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1em; color: var(--slate); }

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}

.section {
  padding: 88px 0;
}
.section--tight { padding: 56px 0; }
.section--fog { background: var(--fog); }
.section--navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: rgba(255,255,255,0.78); }

.section-head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head p { font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--blue-light); }

.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.btn--outline-navy {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline-navy:hover { background: var(--navy); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,25,28,0.08);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Any scrolling — up or down — drops the header to 50% transparent
   (see main.js); it's only fully opaque right at the top of the
   page. The shadow lightens at the same time so the change still
   reads clearly even when the section behind the header happens to
   be white (white-on-white alpha blending alone can look identical). */
.site-header.header-transparent {
  background: rgba(255,255,255,0.5);
  box-shadow: 0 4px 16px rgba(0,25,28,0.04);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 36px;
  max-width: 1160px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Real logo file (see assets/) — sized by height, width follows
   automatically, so it never wraps or overflows like the old
   CSS-built text lockup could at crowded widths. */
.brand-logo {
  height: 58px;
  width: auto;
  display: block;
}
@media (max-width: 480px) {
  .brand-logo { height: 48px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
}

/* Top-level menu items only (not the dropdown-menu links nested
   inside them, which stay mixed-case for readability). */
.nav-links > li > a {
  color: var(--ink);
  padding: 8px 2px;
  position: relative;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.86rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--blue);
  transition: right 0.2s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--navy); }

.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-cta .btn { padding: 11px 22px; font-size: 0.88rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Open state morphs the three bars into an X — the same control
   that opened the menu visibly doubles as the way to close it,
   rather than leaving a hamburger icon that still means "open". */
.site-header.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.site-header.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(0,25,36,0.86) 0%, rgba(0,59,82,0.68) 45%, rgba(0,25,36,0.82) 100%),
    url("../assets/hero/hero-skyline.jpg") center 38% / cover no-repeat;
  color: #fff;
  padding: 110px 0 100px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(87,214,255,0.35) 0%, rgba(87,214,255,0) 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: -12%; bottom: -30%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(201,162,75,0.18) 0%, rgba(201,162,75,0) 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  margin-bottom: 0.4em;
}
.hero .lede {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin-bottom: 2em;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 76px 0 64px;
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: 0.3em; }
.page-hero p { color: rgba(255,255,255,0.8); max-width: 620px; margin: 0 auto; font-size: 1.08rem; }

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: -56px;
  position: relative;
  z-index: 2;
}
.stat-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 20px;
  text-align: center;
}
.stat-card .num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--navy);
  display: block;
}
.stat-card .label {
  font-size: 0.82rem;
  color: var(--slate);
  font-weight: 600;
}

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 28px;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.icon-badge svg { width: 24px; height: 24px; }

.card h3 { font-size: 1.15rem; margin-bottom: 0.5em; }
.card p { font-size: 0.96rem; margin-bottom: 1.1em; }
.card .link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.card .link::after { content: " →"; }

/* Certification badge tiles (About page) */
.cert-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cert-logo {
  height: 108px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
}
.cert-card p { margin-bottom: 0; }

/* ---------- Why / pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pillar {
  text-align: center;
  padding: 8px;
}
.pillar .icon-badge { margin: 0 auto 16px; }
.pillar h3 { font-size: 1.05rem; }
.pillar p { font-size: 0.92rem; }

/* ---------- Split section ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split-media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  position: relative;
}
.split-media .pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 0, transparent 45%);
}

/* "Our Mission" split-media (About page) — data-particle photo standing
   in for the flat navy gradient, with a navy wash kept over it so the
   J3 glyph and the surrounding brand palette still read consistently. */
.split-media--mission {
  background:
    linear-gradient(135deg, rgba(0,59,82,0.45) 0%, rgba(0,25,36,0.7) 100%),
    url("../assets/about/mission-particles.jpg") center / cover no-repeat;
}
.split-media--mission .pattern { display: none; }
.split-media .glyph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.9);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 5rem;
  letter-spacing: 0.02em;
}
/* Real logo image variant of .glyph (e.g. the AWS partner mark) —
   inset:0 + margin:auto centers a sized replaced element the same
   way the flex centering above does for text. */
.split-media .glyph--img {
  display: block;
  margin: auto;
  width: 52%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.3));
}

.check-list { list-style: none; margin: 0 0 1.4em; padding: 0; }
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 0.98rem;
}
.check-list li svg {
  width: 20px; height: 20px;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Service detail blocks ---------- */
.service-block {
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
}
.service-block:last-child { border-bottom: none; }
/* A number + heading side by side on one line, instead of a
   number stranded above a heading in its own narrow column with a
   tall empty gap underneath (which read like a page-number). */
.service-block .service-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.service-block .service-tag {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--line);
  flex-shrink: 0;
}
.service-block .service-body { max-width: 900px; }
.service-block h2 { font-size: 1.5rem; margin: 0; }
.service-block .bullets {
  list-style: none;
  padding: 0;
  margin: 1.4em 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.service-block .bullets li {
  display: flex;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink);
}
.service-block .bullets li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 8px;
  flex-shrink: 0;
}

/* ---------- Badges / certifications ---------- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.badge-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.badge-pill .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

.sector-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
}
.sector-card h3 { font-size: 1.1rem; }

.quote-block {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.quote-block p {
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.5;
}
.quote-block .attribution {
  font-size: 0.85rem;
  color: var(--slate);
  font-weight: 600;
  font-family: var(--font-body);
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 20px;
  padding: 56px;
  text-align: center;
  color: #fff;
}
.cta-banner h2 { color: #fff; margin-bottom: 0.3em; }
.cta-banner p { color: rgba(255,255,255,0.8); max-width: 520px; margin: 0 auto 1.6em; }
.cta-banner .hero-actions { justify-content: center; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.office-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.office-card h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.office-card .row {
  display: flex;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.office-card .row svg { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; margin-top: 2px; }

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--navy);
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--fog);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
}
.password-field { position: relative; }
.password-field input { padding-right: 44px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--slate);
}
.password-toggle:hover { background: var(--line); color: var(--navy); }
.password-toggle svg { width: 19px; height: 19px; }
.password-toggle .eye-off { display: none; }
.password-toggle[aria-pressed="true"] .eye { display: none; }
.password-toggle[aria-pressed="true"] .eye-off { display: block; }

.form-note {
  font-size: 0.8rem;
  color: var(--slate);
  margin-top: 10px;
}
.form-success {
  display: none;
  background: #eaf6ee;
  border: 1px solid #bfe6cc;
  color: #1f6b3a;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  margin-bottom: 18px;
  font-weight: 600;
}

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 20px;
}
.map-embed iframe { width: 100%; height: 220px; border: 0; display: block; }
/* Nested inside an office card, the map sits right under the street
   address rather than leading the card — margin on both sides keeps
   it clear of the address above and whatever row follows below. */
.office-card .map-embed { margin: 14px 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.75);
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-brand .brand { margin-bottom: 12px; }
.brand-logo--footer { height: 34px; }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.92rem; }
.footer-cta-link {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--blue-light);
}
.footer-cta-link:hover { color: #fff; text-decoration: underline; }
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  transition: background 0.2s ease, color 0.2s ease;
}
.footer-social a:hover { background: var(--blue); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }

/* ---------- Footer site role login (News/Blog permission demo) ---------- */
.footer-role-login {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
}
.footer-role-login > svg {
  width: 22px; height: 22px;
  color: var(--blue-light);
  flex-shrink: 0;
}
.role-login-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 200px;
}
.role-login-text strong {
  font-family: var(--font-head);
  font-size: 0.86rem;
  color: #fff;
}
.role-login-text span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
}
.footer-role-login select {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.footer-role-login select option { color: var(--ink); }
@media (max-width: 560px) {
  .footer-role-login { flex-wrap: wrap; }
  .footer-role-login select { width: 100%; }
}

/* ---------- Utility bar (above the main header) ---------- */
.utility-bar {
  background: #000;
  border-bottom: 1px solid #000;
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding: 7px 24px;
  min-height: 32px;
  position: relative;
}
.utility-bar a {
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}
.utility-bar a:hover { color: var(--blue-light); }
/* Careers/Contact were moved here from the main nav — kept 10%
   smaller than News/Blog so they read as secondary utility links. */
.utility-bar a.util-link--sm { font-size: 0.684rem; }
@media (max-width: 480px) {
  .utility-bar .container { justify-content: center; gap: 16px; }
}

/* ---------- Utility bar site search ---------- */
.search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  color: #fff;
  cursor: pointer;
  line-height: 0;
}
.search-toggle svg { width: 15px; height: 15px; }
.search-toggle:hover { color: var(--blue-light); }
.search-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 24px;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow);
  z-index: 200;
  overflow: hidden;
}
.search-panel.open { display: block; }
.search-panel input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  outline: none;
}
.search-panel input:focus { border-bottom-color: var(--blue); }
.search-results { max-height: 320px; overflow-y: auto; }
.search-results a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.search-results a:last-child { border-bottom: none; }
.search-results a:hover { background: var(--fog); }
.search-results .result-title {
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy);
}
.search-results .result-desc {
  font-size: 0.78rem;
  color: var(--slate);
}
.search-results .no-results {
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--slate);
}
@media (max-width: 480px) {
  .search-panel { right: 8px; left: 8px; width: auto; }
}
.footer-col h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}
.footer-bottom a:hover { color: #fff; }

/* ---------- Reveal animation ----------
   Content is fully visible by default so the page never depends on
   JavaScript to be readable. The fade-in only activates when the
   early inline <head> script confirms JS actually ran (adds
   "js-reveal" to <html>), and self-heals if the observer ever fails
   to fire (see the safety-net timer in main.js). */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Nav collapses to the hamburger menu earlier than the phone-only
   content breakpoint below — this header is dense (7 links + a
   dropdown chevron + a pill CTA) and gets visually tight well
   before 720px, so give it its own, wider threshold. */
@media (max-width: 1100px) {
  .nav-links, .nav-cta .btn--outline-navy { display: none; }
  .nav-toggle { display: flex; }
  .site-header.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%; left: 0; right: 0;
    /* 30% transparent (70% opaque) rather than solid, so a hint of
       the page shows through behind the open panel; the blur keeps
       the nav links themselves legible over whatever's underneath. */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 24px 28px;
    border-bottom: 1px solid var(--line);
    gap: 16px;
  }
}

@media (max-width: 720px) {
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .service-block .bullets { grid-template-columns: 1fr; }
  .cta-banner { padding: 40px 24px; }
  .section { padding: 64px 0; }
  .hero { padding: 72px 0 120px; }
}

/* ===========================================================
   Extended components — dropdown nav, breadcrumbs, resources,
   service detail sidebar, placeholder callouts
   =========================================================== */

/* ---------- Dropdown nav ---------- */
.nav-links li.has-dropdown { position: relative; }
.nav-links li.has-dropdown > a { display: flex; align-items: center; gap: 5px; }
.nav-links li.has-dropdown > a::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  order: 2;
  margin-left: 2px;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 260px;
  padding: 10px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}
.nav-links li.has-dropdown:hover .dropdown-menu,
.nav-links li.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.dropdown-menu li a::after { content: none; }
.dropdown-menu li a:hover { background: var(--fog); color: var(--navy); }
.dropdown-menu li a span.sub {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--slate);
  margin-top: 2px;
}

/* Mobile: dropdowns become inline stacked lists */
@media (max-width: 1100px) {
  .dropdown-menu {
    position: static;
    display: none;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    border: none;
    padding: 4px 0 4px 14px;
    min-width: 0;
  }
  .nav-links li.has-dropdown.open .dropdown-menu { display: block; }
  .nav-links li.has-dropdown > a::before { margin-left: auto; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255,255,255,0.85); }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Service detail layout (sidebar) ---------- */
.service-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}
.service-sidebar {
  position: sticky;
  top: 96px;
  background: var(--fog);
  border-radius: var(--radius);
  padding: 22px;
}
.service-sidebar h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  margin-bottom: 14px;
}
.service-sidebar ul { list-style: none; margin: 0 0 20px; padding: 0; }
.service-sidebar li { margin-bottom: 4px; }
.service-sidebar a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.service-sidebar a:hover { background: #fff; color: var(--navy); }
.service-sidebar a.active { background: var(--navy); color: #fff; }
.service-sidebar .btn { width: 100%; justify-content: center; }

.detail-lede { font-size: 1.1rem; color: var(--ink); }

.process-steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.process-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}
.process-steps li::before {
  content: counter(step);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
}
.process-steps li h4,
.process-steps li p {
  /* Without this, the ::before counter circle counts as a grid item
     too, and auto-placement pushes <p> into the 44px column instead
     of alongside <h4> — this pins both to the text column. */
  grid-column: 2;
  min-width: 0;
}
.process-steps li h4 { margin-bottom: 0.25em; font-size: 1rem; color: var(--navy); }
.process-steps li p { margin-bottom: 0; font-size: 0.92rem; }

.mini-cta {
  background: var(--fog);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.mini-cta h4 { font-size: 0.98rem; margin-bottom: 0.4em; }
.mini-cta p { font-size: 0.85rem; margin-bottom: 1em; }

/* ---------- Resource cards ---------- */
.resource-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.resource-card .icon-badge { background: linear-gradient(135deg, var(--gold) 0%, #a9843a 100%); }
.resource-card h3 { font-size: 1.15rem; }
.resource-card .link { margin-top: auto; }

.vehicle-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.vehicle-table th, .vehicle-table td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.vehicle-table th {
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  background: var(--fog);
}
.vehicle-table tr:last-child td { border-bottom: none; }
.vehicle-table td.tbd { color: var(--slate); font-style: italic; }

/* ---------- Placeholder / to-verify callout ---------- */
.placeholder-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff8e8;
  border: 1px solid #f0dfa8;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 24px 0;
}
.placeholder-note svg { width: 22px; height: 22px; color: #b8860b; flex-shrink: 0; margin-top: 2px; }
.placeholder-note p { margin: 0; font-size: 0.88rem; color: #6b5a20; }
.placeholder-note strong { color: #4d3f14; }
.placeholder-note.note--info { background: #eef6f6; border-color: var(--blue-light); }
.placeholder-note.note--info svg { color: var(--blue); }
.placeholder-note.note--info p { color: var(--slate); }
.placeholder-note.note--info strong { color: var(--navy); }

/* ---------- Job listing placeholder slots (Jobs page) ---------- */
.job-slot {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.job-field {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.job-field:last-child { border-bottom: none; }
.job-field-label {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--slate);
}
.job-field-value { color: var(--line); font-weight: 700; }

/* ---------- Applicant form (Jobs page) ---------- */
.sample-listing-tag {
  display: inline-block;
  background: var(--gold);
  color: #3a2e0a;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* ---------- Local content CRUD (News / Blog) ---------- */
.btn--sm { padding: 9px 18px; font-size: 0.82rem; }
.btn--outline-danger {
  background: transparent;
  border-color: #c94b3f;
  color: #c94b3f;
}
.btn--outline-danger:hover { background: #c94b3f; color: #fff; }

.content-admin-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
/* Manage/role controls are entirely JS-driven (see content-crud.js
   and the footer role login in main.js); with JavaScript off, hide
   them rather than show an inert indicator and a login that can't
   do anything — the <noscript> fallback below already covers
   reading the articles. */
html:not(.js-reveal) .content-admin-bar,
html:not(.js-reveal) .role-note,
html:not(.js-reveal) .footer-role-login { display: none; }
.role-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--slate);
}
.role-indicator strong { color: var(--navy); }
.role-indicator-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .role-indicator { margin-left: 0; width: 100%; }
}
.admin-note {
  background: #eef6f6;
  border: 1px solid var(--blue-light);
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 0.85rem;
  color: var(--slate);
  margin-bottom: 28px;
}
.admin-note strong { color: var(--navy); }

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.content-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.content-card-img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--fog);
}
.content-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.content-card-meta {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.content-card-body h3 { font-size: 1.05rem; margin-bottom: 8px; line-height: 1.35; }
.content-card-body p { font-size: 0.9rem; color: var(--slate); margin-bottom: 14px; flex: 1; }
.content-card-body .link { font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: var(--blue); }
.content-card-admin {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.btn-icon {
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--fog);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--navy);
}
.btn-icon:hover { background: var(--line); }
.btn-icon--danger { color: #c94b3f; }
.btn-icon--danger:hover { background: #fbe9e7; border-color: #c94b3f; }
.content-empty { color: var(--slate); font-style: italic; grid-column: 1 / -1; }

@media (max-width: 960px) {
  .content-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .content-grid { grid-template-columns: 1fr; }
}

/* Modal (shared: article read view + add/edit form) */
.content-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,25,28,0.6);
  z-index: 500;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.content-modal.open { display: flex; }
.content-modal-inner {
  background: #fff;
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  position: relative;
  padding: 32px;
  box-shadow: var(--shadow);
}
.content-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--fog);
  color: var(--navy);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.content-modal-close:hover { background: var(--line); }
.content-modal-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 18px;
}
.content-modal-meta {
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue);
  margin-bottom: 8px;
}
.content-modal-text p { margin-bottom: 1em; color: var(--ink); font-size: 0.96rem; }
.content-form .form-field input,
.content-form .form-field textarea { font-size: 0.9rem; }
.content-form-actions { display: flex; gap: 12px; margin-top: 8px; }

/* ---------- FAQ accordion ---------- */
.faq-group { margin-bottom: 40px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}
/* The question text is a flex child sized to its own content, so the
   inline editor's pencil (positioned just outside the target's own
   top-right corner) would otherwise land on top of the last word or two -
   this reserves a little breathing room for it without affecting layout
   when signed out. */
.faq-question > span { padding-right: 24px; }
.faq-question .chev {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--blue);
  transition: transform 0.2s ease;
}
.faq-item.open .faq-question .chev { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-answer p { padding: 0 4px 18px; color: var(--slate); font-size: 0.95rem; max-width: 760px; }
.faq-item.open .faq-answer { max-height: 400px; }

/* ---------- Info list (capability statement) ---------- */
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.info-list li:last-child { border-bottom: none; }
.info-list li .k { font-weight: 700; color: var(--navy); font-family: var(--font-head); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.info-list li .v { color: var(--ink); text-align: right; }

@media (max-width: 900px) {
  .service-layout { grid-template-columns: 1fr; }
  .service-sidebar { position: static; }
}

/* ---------- Highlights strip (recognition banner) ---------- */
.highlights-strip {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.92);
  padding: 12px 0;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
}
.highlights-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 0;
}
.highlights-strip .item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}
.highlights-strip .item:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.2);
}
.highlights-strip .item svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }
.highlights-strip .item img.aws-mark { width: 26px; height: auto; flex-shrink: 0; display: block; }

@media (max-width: 720px) {
  .highlights-strip .item { padding: 0 10px; font-size: 0.78rem; }
  .highlights-strip .item:not(:last-child) { border-right: none; }
}

/* ---------- Mission area cards (broad capability groupings) ---------- */
.mission-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mission-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mission-card .icon-badge { width: 60px; height: 60px; border-radius: 14px; }
.mission-card .icon-badge svg { width: 28px; height: 28px; }
.mission-card h3 { font-size: 1.3rem; margin-bottom: 0.5em; }
.mission-card p { font-size: 0.97rem; }
.mission-card .includes {
  list-style: none;
  padding: 14px 0 0;
  margin: 14px 0 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mission-card .includes a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mission-card .includes a:hover { color: var(--blue); }
.mission-card .includes a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.mission-card .link { margin-top: auto; }

/* ---------- Core Services photo tiles (homepage) ---------- */
.service-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-tile {
  position: relative;
  display: block;
  aspect-ratio: 0.62;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, background-size 0.5s ease;
}
.service-tile:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
  background-size: 112%;
}
.service-tile-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,25,28,0.55) 0%, rgba(0,25,28,0.08) 30%, rgba(0,25,28,0.15) 55%, rgba(0,25,28,0.92) 100%),
    linear-gradient(0deg, rgba(0,59,63,0.35), rgba(0,59,63,0.35));
  transition: background 0.25s ease;
}
.service-tile:hover .service-tile-scrim {
  background:
    linear-gradient(180deg, rgba(0,25,28,0.4) 0%, rgba(0,25,28,0.05) 30%, rgba(0,25,28,0.2) 55%, rgba(0,25,28,0.95) 100%),
    linear-gradient(0deg, rgba(0,59,63,0.2), rgba(0,59,63,0.2));
}
.service-tile-num {
  position: absolute;
  top: 18px;
  left: 20px;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--blue-light);
  z-index: 1;
}
.service-tile-text {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.service-tile-title {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.service-tile-caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255,255,255,0.82);
}
@media (max-width: 960px) {
  .service-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .service-tile-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-tile { aspect-ratio: 1.3; }
}

/* ---------- Empty state (News / Blog, before real content exists) ---------- */
.empty-state {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0 8px;
}
.empty-state svg {
  width: 44px; height: 44px;
  color: var(--blue);
  margin: 0 auto 18px;
}
.empty-state h3 { font-size: 1.3rem; }
.empty-state p { margin-bottom: 1.6em; }

.coming-soon-card {
  border-style: dashed;
  background: transparent;
  position: relative;
  opacity: 0.85;
}
.coming-soon-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--fog);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.coming-soon-card h3 { color: var(--slate); }

/* ------------------------------------------------------------------ */
/* Staff Login (real backend auth) + inline content editing            */
/* ------------------------------------------------------------------ */
.footer-staff-login {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  flex-wrap: wrap;
}
.footer-staff-login > svg { width: 22px; height: 22px; color: var(--blue-light); flex-shrink: 0; }
.staff-login-text { flex: 1; min-width: 160px; }
.staff-login-text strong { font-family: var(--font-head); font-size: 0.85rem; display: block; color: #fff; }
.staff-login-text span { font-size: 0.8rem; color: rgba(255,255,255,0.7); }
#staffLoginControls { display: flex; gap: 8px; flex-wrap: wrap; }
#staffLoginControls .btn-icon, #staffLoginControls a.btn-icon {
  color: var(--navy-deep); border-color: rgba(255,255,255,0.3);
}
#staffLoginControls .btn-icon:hover { background: rgba(255,255,255,0.12); color: #fff; }
html:not(.js-reveal) .footer-staff-login { display: none; }

#j3EditModeToggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
#j3EditModeToggle:hover { background: var(--blue); }

.j3-editable-target { outline: 1px dashed transparent; outline-offset: 3px; transition: outline-color .15s; }
body.j3-editing .j3-editable-target:hover { outline-color: var(--blue-light); }

.j3-edit-pencil {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  padding: 0;
}
.j3-edit-pencil svg { width: 14px; height: 14px; }
.j3-edit-pencil:hover { background: var(--blue-light); }

@media (max-width: 640px) {
  .footer-staff-login { flex-wrap: wrap; }
  #staffLoginControls { width: 100%; }
}

/* ---------- Staff Dashboard (staff-dashboard.html) ---------- */
.dashboard-loading { color: var(--slate); font-style: italic; }

.dashboard-guard {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  background: var(--fog);
  border-radius: var(--radius);
  padding: 48px 36px;
}
.dashboard-guard h2 { margin-bottom: 0.4em; }
.dashboard-guard p { margin-bottom: 1.6em; }

.dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 40px;
}
.dashboard-welcome h2 { color: #fff; margin: 2px 0 4px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 1.4rem; }
.dashboard-eyebrow { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue-light); font-weight: 700; }
.dashboard-sub { margin: 0; color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.dashboard-welcome .btn { flex-shrink: 0; }

.dashboard-section { margin-bottom: 48px; }
.dashboard-section-head { margin-bottom: 20px; max-width: 620px; }
.dashboard-section-head h3 { margin-bottom: 0.3em; }
.dashboard-section-head p { margin: 0; font-size: 0.92rem; }

.role-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  vertical-align: middle;
}
.role-badge--owner { background: rgba(201,162,75,0.16); color: #a9843a; }
.role-badge--admin { background: rgba(13,139,186,0.14); color: var(--blue); }
.role-badge--contributor { background: var(--line); color: var(--slate); }

.table-scroll { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.dashboard-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fff;
}
.dashboard-table th, .dashboard-table td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  white-space: nowrap;
}
.dashboard-table th {
  font-family: var(--font-head);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  background: var(--fog);
}
.dashboard-table tr:last-child td { border-bottom: none; }
.dashboard-table td.tabular { font-variant-numeric: tabular-nums; }
.dashboard-row-actions { display: flex; gap: 8px; white-space: nowrap; }
.dashboard-muted { color: var(--slate); font-size: 0.85rem; font-style: italic; }

.dashboard-form-heading { margin: 28px 0 14px; font-size: 1.05rem; }
.dashboard-add-user-form { max-width: 640px; }
.dashboard-error { color: #c94b3f; font-size: 0.88rem; margin-top: 12px; }

@media (max-width: 640px) {
  .dashboard-welcome { flex-direction: column; align-items: flex-start; }
}