/* ========================================================================
   Federal Group Talent Partners — Brand CSS
   Colors derived directly from the FG logo:
     Deep navy   #0c2d6b   (lettermark navy, "FEDERAL GROUP" type, navy stars)
     Mid navy    #14418a   (highlight/transition tone)
     Crimson red #c8102e   (eagle head, swoosh)
     Bright red  #e02233   (rim light on swoosh)
     White       #ffffff   (background, eagle highlights)
     Cream       #f7f6f1   (off-white surface)
     Stone-100   #efeae0
     Stone-300   #c9c2b3
     Stone-700   #4d473a   (body text on cream)
     Steel       #6b7280   (muted UI)
   ======================================================================== */

:root {
  /* Brand palette */
  --fg-navy-deep: #0c2d6b;
  --fg-navy: #14418a;
  --fg-navy-light: #1f5fb4;
  --fg-red: #c8102e;
  --fg-red-bright: #e02233;
  --fg-red-deep: #9c0a22;
  --fg-white: #ffffff;
  --fg-cream: #f7f6f1;
  --fg-cream-deep: #efeae0;
  --fg-stone-100: #efeae0;
  --fg-stone-300: #c9c2b3;
  --fg-stone-500: #8b8270;
  --fg-stone-700: #4d473a;
  --fg-ink: #1a2536;
  --fg-ink-soft: #2a3548;
  --fg-steel: #6b7280;
  --fg-gold: #c8a04d;     /* badge highlight */
  --fg-success: #1c7a4a;
  --fg-danger: #b3122a;

  /* Semantic */
  --bg: var(--fg-cream);
  --bg-paper: var(--fg-white);
  --bg-dark: var(--fg-navy-deep);
  --ink: var(--fg-ink);
  --ink-soft: var(--fg-ink-soft);
  --muted: var(--fg-stone-700);
  --line: rgba(12, 45, 107, 0.12);
  --line-strong: rgba(12, 45, 107, 0.22);

  /* Type */
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;

  /* Spacing scale */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(12, 45, 107, .05), 0 1px 3px rgba(12, 45, 107, .06);
  --shadow-md: 0 4px 6px -1px rgba(12, 45, 107, .08), 0 2px 4px -1px rgba(12, 45, 107, .04);
  --shadow-lg: 0 10px 15px -3px rgba(12, 45, 107, .1), 0 4px 6px -2px rgba(12, 45, 107, .04);
  --shadow-xl: 0 20px 25px -5px rgba(12, 45, 107, .12), 0 10px 10px -5px rgba(12, 45, 107, .04);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms cubic-bezier(.2,.8,.2,1);
}

/* ============ Base reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--fg-navy); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--fg-red); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
:focus-visible { outline: 3px solid var(--fg-gold); outline-offset: 2px; }

/* ============ Typography ============ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-navy-deep);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
}
h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); margin-top: var(--s-6); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); margin-top: var(--s-5); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 var(--s-4); }
strong, b { color: var(--fg-navy-deep); font-weight: 700; }
em { font-style: italic; }
small { font-size: 0.88rem; color: var(--muted); }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.4em; }
li { margin: 0 0 var(--s-2); }
blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--fg-red);
  background: var(--bg-paper);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-soft);
  font-style: italic;
}

/* ============ Layout ============ */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.container--narrow { max-width: 820px; }
.container--wide { max-width: 1380px; }

.section { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-6) 0; }
.section--hero { padding: var(--s-9) 0 var(--s-8); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ============ Skip link ============ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--fg-navy-deep);
  color: var(--fg-white);
  padding: var(--s-3) var(--s-5);
  z-index: 1000;
  text-decoration: underline;
}
.skip-link:focus { top: 0; }

/* ============ Site header / nav ============ */
.site-header {
  background: var(--bg-paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 80px;
  padding: 0 1.25rem;
  max-width: 1380px;
  margin: 0 auto;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-lockup__img { height: 56px; width: auto; }
.brand-lockup__type {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  line-height: 1;
}
.brand-lockup__type-top {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg-navy-deep);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.brand-lockup__type-bottom {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--fg-navy-deep);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
@media (max-width: 720px) {
  .brand-lockup__type { display: none; }
  .brand-lockup__img { height: 44px; }
  .site-header__bar { height: 64px; }
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.nav-menu a {
  color: var(--fg-navy-deep);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-menu a:hover, .nav-menu a.active { color: var(--fg-red); border-bottom-color: var(--fg-red); }

.nav-dropdown { position: relative; }
.nav-dropdown > button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--fg-navy-deep); font-weight: 500; font-size: 0.95rem;
  padding: 0.4rem 0;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.nav-dropdown > button:hover { color: var(--fg-red); }
.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 0.7rem;
  min-width: 280px;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 50;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel { display: flex; }
.nav-dropdown__panel a {
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  border-bottom: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.nav-dropdown__panel a:hover { background: var(--bg); color: var(--fg-red); }
.nav-dropdown__panel a .label { font-weight: 600; color: var(--fg-navy-deep); }
.nav-dropdown__panel a:hover .label { color: var(--fg-red); }
.nav-dropdown__panel a .sub { font-size: 0.83rem; color: var(--muted); font-weight: 400; }

.nav-ctas { display: flex; align-items: center; gap: 0.6rem; }

.nav-toggle {
  display: none;
  border: 0; background: transparent; cursor: pointer;
  padding: 0.4rem; color: var(--fg-navy-deep);
}
@media (max-width: 980px) {
  .nav-menu, .nav-ctas { display: none; }
  .nav-toggle { display: inline-flex; }
}

.nav-drawer {
  display: none;
  flex-direction: column;
  padding: 1.25rem 1.25rem 2rem;
  border-top: 1px solid var(--line);
}
.nav-drawer[data-open] { display: flex; }
.nav-drawer a {
  padding: 0.65rem 0;
  color: var(--fg-navy-deep);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.nav-drawer details summary {
  padding: 0.65rem 0;
  font-weight: 600;
  color: var(--fg-navy-deep);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  list-style: none;
}
.nav-drawer details .sub {
  display: flex; flex-direction: column;
  padding: 0.4rem 0 0.4rem 1rem;
}
.nav-drawer details .sub a { padding: 0.4rem 0; font-weight: 500; border-bottom: 0; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.78rem 1.4rem;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-align: center;
}
.btn-primary { background: var(--fg-red); color: var(--fg-white); border-color: var(--fg-red); }
.btn-primary:hover { background: var(--fg-red-deep); border-color: var(--fg-red-deep); color: var(--fg-white); transform: translateY(-1px); }
.btn-secondary { background: var(--fg-navy-deep); color: var(--fg-white); border-color: var(--fg-navy-deep); }
.btn-secondary:hover { background: var(--fg-navy); border-color: var(--fg-navy); color: var(--fg-white); }
.btn-ghost { background: transparent; color: var(--fg-navy-deep); border-color: var(--fg-navy-deep); }
.btn-ghost:hover { background: var(--fg-navy-deep); color: var(--fg-white); }
.btn-outline-red { background: transparent; color: var(--fg-red); border-color: var(--fg-red); }
.btn-outline-red:hover { background: var(--fg-red); color: var(--fg-white); }
.btn-lg { padding: 1rem 1.85rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }

/* ============ Hero patterns ============ */
.page-hero {
  position: relative;
  padding: var(--s-9) 0 var(--s-7);
  overflow: hidden;
  background:
    radial-gradient(ellipse at top right, rgba(200,16,46,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(12,45,107,0.05) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-paper) 0%, var(--fg-cream) 100%);
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, transparent 60%, rgba(200,16,46,0.04) 100%);
}
.page-hero .container { position: relative; }
.page-hero .eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-red);
  background: rgba(200, 16, 46, 0.1);
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(200, 16, 46, 0.25);
  margin-bottom: var(--s-4);
}
.page-hero .sub, .page-hero .lede {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--ink-soft);
  max-width: 62ch;
  margin: var(--s-4) 0 var(--s-5);
  line-height: 1.55;
}

.hero-dark {
  background:
    radial-gradient(ellipse at top right, rgba(200,16,46,0.18) 0%, transparent 50%),
    linear-gradient(135deg, var(--fg-navy-deep) 0%, #08214f 60%, #051838 100%);
  color: var(--fg-white);
}
.hero-dark h1, .hero-dark h2, .hero-dark h3 { color: var(--fg-white); }
.hero-dark .lede, .hero-dark .sub, .hero-dark p { color: rgba(255,255,255,0.88); }
.hero-dark .eyebrow { color: var(--fg-red-bright); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }

/* ============ Answer capsule (AEO Tier 3) ============ */
.answer-capsule {
  background: rgba(12, 45, 107, 0.04);
  border-left: 4px solid var(--fg-red);
  padding: 1.1rem 1.4rem;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 0 0 var(--s-6);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 78ch;
}
.answer-capsule strong { color: var(--fg-navy-deep); }

/* ============ Cards ============ */
.card {
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--line-strong); }
.card a:hover { color: var(--fg-red); }
.card h3 { color: var(--fg-navy-deep); margin: 0 0 var(--s-3); }
.card p { color: var(--ink-soft); margin: 0 0 var(--s-3); }
.card .card-cta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fg-red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.card-link { display: block; text-decoration: none; color: inherit; }

/* ============ Pills, badges ============ */
.pill {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--bg-paper);
  border: 1px solid var(--line);
  color: var(--fg-navy-deep);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pill--red { background: rgba(200,16,46,0.08); border-color: rgba(200,16,46,0.25); color: var(--fg-red); }
.pill--navy { background: var(--fg-navy-deep); color: var(--fg-white); border-color: var(--fg-navy-deep); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--fg-gold), #d4a850);
  color: var(--fg-navy-deep);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============ Forms ============ */
.field { display: block; margin: 0 0 1.2rem; }
.field > label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--fg-navy-deep);
  margin: 0 0 0.4rem;
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=url],
.field input[type=password],
.field input[type=number],
.field input[type=file],
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--bg-paper);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--fg-red);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.15);
}
.field textarea { resize: vertical; min-height: 120px; }
.field .hint { font-size: 0.85rem; color: var(--muted); margin: 0.35rem 0 0; }

.honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============ Footer ============ */
.site-footer {
  background: var(--fg-navy-deep);
  color: rgba(255,255,255,0.85);
  padding: var(--s-8) 0 var(--s-5);
  margin-top: var(--s-9);
}
.site-footer h3 { color: var(--fg-white); font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--s-4); }
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--fg-red-bright); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
@media (max-width: 980px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin: 0 0 0.55rem; font-size: 0.92rem; }
.site-footer__brand p { font-size: 0.92rem; color: rgba(255,255,255,0.75); margin: 0 0 var(--s-3); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.65);
}

/* ============ Breadcrumb ============ */
.breadcrumb { font-size: 0.9rem; color: var(--muted); margin: var(--s-5) 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 0.4rem; color: var(--fg-stone-500); }
.breadcrumb a { color: var(--fg-navy); }
.breadcrumb [aria-current="page"] { color: var(--fg-navy-deep); font-weight: 600; }

/* ============ Stat / metric block ============ */
.metric {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.2rem;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
}
.metric__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--fg-red);
  line-height: 1;
}
.metric__label {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============ Industry / service chips ============ */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--s-4) 0; }
.chip {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  color: var(--fg-navy-deep);
  font-weight: 500;
  text-decoration: none;
}
.chip:hover { background: var(--fg-navy-deep); color: var(--fg-white); border-color: var(--fg-navy-deep); }

/* ============ FAQ accordion ============ */
.faq details {
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.1rem 1.3rem;
  margin: 0 0 var(--s-3);
  transition: border-color var(--t-fast);
}
.faq details[open] { border-color: var(--fg-red); }
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fg-navy-deep);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--fg-red);
  transition: transform var(--t-fast);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { color: var(--fg-red); }
.faq details > *:not(summary) { margin-top: var(--s-3); color: var(--ink-soft); }

/* ============ Reveal on scroll ============ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============ Utilities ============ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.text-red { color: var(--fg-red); }
.text-navy { color: var(--fg-navy-deep); }
.bg-paper { background: var(--bg-paper); }
.bg-cream { background: var(--fg-cream-deep); }
.bg-navy { background: var(--fg-navy-deep); color: var(--fg-white); }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: var(--fg-white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ============ Phone obfuscation ============ */
.phone-protected { cursor: pointer; color: var(--fg-navy); border-bottom: 1px dashed var(--fg-navy); }
.phone-protected:hover { color: var(--fg-red); border-bottom-color: var(--fg-red); }

/* ===== Homepage refresh 2026-06-26: larger logo + crisp readable hero ===== */
.brand-lockup__img { height: 92px; }
.hero-dark {
  background: linear-gradient(155deg, var(--fg-navy) 0%, var(--fg-navy-deep) 55%, #061a3c 100%);
}
.hero-dark .eyebrow { color: #ffffff; background: var(--fg-red); border-color: var(--fg-red); }
.hero-dark .answer-capsule { background: rgba(255,255,255,0.10); border-left-color: var(--fg-red-bright); color: #eef3fa; }
.hero-dark .answer-capsule strong { color: #ffffff; font-weight: 600; }
@media (max-width: 720px) {
  .site-header__bar { height: 72px; }
  .brand-lockup__img { height: 56px; }
}

/* ===== Logo size + header containment fix 2026-06-26 ===== */
.site-header__bar { height: 124px; }
.brand-lockup__img { height: 96px; }
@media (max-width: 720px){ .site-header__bar { height: 72px; } .brand-lockup__img { height: 56px; } }

/* ========================================================================
   TASK T2, 28 July 2026: fit every screen, desktop, tablet, and phone.
   CSS and layout only. No copy changed, no content added, no markup edited.
   Additive and appended last, so it is one block to read and one to revert.

   Measured first, then fixed, then measured again. The audit loaded all 34
   live pages over HTTPS at 320, 375, 390, 414, 768, 1024, 1200, 1280, 1366,
   and 1440 and compared document scrollWidth to clientWidth, naming the
   outermost element that stuck out. Findings are recorded beside each fix.

   DESKTOP IS UNCHANGED BY CONSTRUCTION. Every rule below is bounded to
   1439.98px and narrower, which is the range that measured broken. Nothing
   here applies at 1440 and above, so the width the site was drawn for cannot
   move. That is a deliberate structure, not a coincidence: an earlier draft
   of this block carried three unbounded rules and one of them, an img[width]
   selector, outranked .brand-lockup__img and grew the logo from 144x96 to
   200x133, shifting the entire header on every desktop page. It was caught
   by diffing rendered geometry against the previous stylesheet.
   ======================================================================== */

/* ---- 1. THE HEADER, the defect that hit every page -----------------------
   MEASURED: the desktop header needs 1365px of horizontal room, brand 328 +
   navigation 643 + calls to action 322 plus padding and gaps. The drawer did
   not take over until 980px, so every viewport from 981 to 1365 rendered the
   full desktop header and pushed the document 65 to 364 pixels wide. That is
   all 34 pages at 1024, and it is every 1280 laptop, not only tablets.

   Two bands fix it without touching the wide desktop:

     1200 to 1439  keep the real navigation, drop the brand WORDMARK. The
                   logo mark stays. This is the design's own move, already
                   used below 720px, and it frees 232px, more than enough.
                   The band reaches 1439 rather than stopping at 1366 because
                   between 1366 and 1439 the header clears the viewport by
                   under 15 pixels, and a classic scrollbar is 15 to 17
                   pixels wide, so those widths sit one scrollbar away from
                   the same overflow.

     1199 and under  the drawer, which already exists and already carries
                   every link including the Recruiter Login added by T1. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .brand-lockup__type { display: none; }
  .nav-menu { gap: 1.05rem; }
  .nav-ctas { gap: 0.45rem; }
}
@media (max-width: 1199.98px) {
  .nav-menu, .nav-ctas { display: none; }
  .nav-toggle { display: inline-flex; }
}
/* Above the drawer breakpoint the drawer must be gone even if it was left
   open before a resize, or widening the window shows the drawer and the
   desktop navigation at once. The drawer is already display none there, so
   this changes no pixel; it only makes the state impossible. */
@media (min-width: 1200px) {
  .nav-drawer, .nav-drawer[data-open] { display: none; }
}

/* ---- 2. NOTHING MAY EXCEED THE VIEWPORT ---------------------------------
   Deliberately NOT done: overflow-x hidden or clip on html or body. That
   hides the scrollbar without removing what causes it, so the content is
   still off screen and merely unreachable, it would make this verification
   pass by measuring its own mask, and it puts the sticky header at risk.
   Every rule below removes a cause. */
@media (max-width: 1439.98px) {
  /* Grid and flex children refuse to shrink below their min content size
     unless told otherwise. That single default is what lets one wide child
     push a whole row past the screen edge. */
  .grid > *, .site-footer__grid > *, .nav-drawer > * { min-width: 0; }

  /* Long unbroken strings, a solicitation number or a URL in running text,
     cannot force a horizontal scroll. Prose only, never the navigation, so
     no menu label is ever broken mid word. */
  p, li, dd, .answer-capsule, blockquote { overflow-wrap: break-word; }

  /* All three tables on the site are already wrapped in a scrolling
     container and measured clean at every width, so they are left alone.
     Capping the width is the only addition, and display is deliberately NOT
     changed: setting a table to display block strips its row and column
     semantics from a screen reader, trading a layout problem for an
     accessibility one. A table added later without a wrapper needs the
     wrapper, not a rule here. */
  table { max-width: 100%; }
}

/* MEASURED: /services/ overflowed at 320 by 18 pixels. The cause was seven
   hard coded two column inline grids, grid-template-columns: 1fr 1fr, with
   no narrow fallback, across four pages. Two columns cannot fit a 280 pixel
   content box, so the card grew to 318 and took the page with it. Collapsed
   to one column on phones. The selector matches the inline value exactly and
   needs the priority flag because what it overrides is an inline style,
   which is the only way to fix this without editing markup. */
@media (max-width: 720px) {
  [style*="1fr 1fr"] { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
}

/* ---- 3. TAP TARGETS, at least 44 by 44 where a finger is used -----------
   MEASURED: the menu button was 35 tall on all 34 pages, accordion headers
   37 on 53 measurements, and the one checkbox on the site 13 by 13.

   Bounded to the drawer band, because these are touch ergonomics and the
   desktop layout above 1200 is driven by a pointer. Raising an accordion
   header or a checkbox on a 1440 desktop would be a visual change with no
   one asking for it.

   Inline links inside a sentence are deliberately left alone: they are body
   text, not controls, and padding them to 44 would break every line of
   running copy. That is the standard exception, not an omission. The site
   attribution line is the only place this applies. */
@media (max-width: 1199.98px) {
  .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .faq summary, .nav-drawer details summary { min-height: 44px; align-items: center; }
  .nav-drawer a { min-height: 44px; display: flex; align-items: center; }
  .nav-drawer details .sub a { min-height: 44px; }
  .btn { min-height: 44px; }
  /* The box itself grows to a comfortable 22, and the whole row becomes a 44
     pixel target through the label beside it, which is bound by its for
     attribute and so toggles the box when tapped. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-width: 22px; }
  .field input[type="checkbox"] + label, .field input[type="radio"] + label {
    min-height: 44px; display: flex; align-items: center;
  }
}

/* ---- 4. READABLE TYPE ON PHONES ----------------------------------------
   Body copy is already 17px, which is right, and the headings already use
   clamp so they scale. What needed raising was the small print: footer list
   items, captions, and the site attribution sat at 12.5 to 14 pixels, below
   comfortable reading on a handset held at arm's length. */
@media (max-width: 720px) {
  body { font-size: 17px; line-height: 1.7; }
  small, .pill, .chip, .metric__label { font-size: 0.92rem; }
  .site-footer ul li, .site-footer__brand p { font-size: 1rem; }
  .site-footer__bottom { font-size: 0.95rem; }
  .breadcrumb { font-size: 0.95rem; }
  .card p, .card h3 { line-height: 1.6; }
  .page-hero .eyebrow { font-size: 0.82rem; }
}

/* ---- 5. THE HONEYPOT ----------------------------------------------------
   It was hidden by pushing it 10000 pixels off the left edge, a negative
   offset the layout has to account for and which the audit flagged on the
   three pages that carry a form. Swapped for the clip technique this
   stylesheet already uses for .sr-only, so it is hidden the same way, still
   in the tab order, still filled in and submitted by a naive bot, and no
   longer positioned outside the viewport at all. Bounded like everything
   else, so the desktop rendering is untouched. */
@media (max-width: 1439.98px) {
  .honeypot {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
    left: auto; top: auto;
  }
}

/* ---- 6. MEDIA ----------------------------------------------------------
   No rule here. The base reset already caps every image, picture, svg, and
   video at 100% width with automatic height, and it does so at a LOWER
   specificity than the brand rules that set an explicit logo height, which
   is exactly right. An earlier draft added an img[width] selector to be
   thorough; it outranked .brand-lockup__img, forced height auto, and grew
   the logo on every desktop page. The correct amount of code here is none. */