:root {
    --red: #c84b18;
    --red-dark: #a83c12;
    --navy: #062c4c;
    --navy-2: #1e7a8c;
    --blue: #1e7a8c;
    --cream: #f9fafb;
    --cream-2: #eaecef;
    --ink: #0B1215;
    --muted: #4d5f7e;
    --white: #FFFFFF;
    --gold: #1e7a8c;
    --display: 'Oswald', 'Arial Narrow', sans-serif;
    --body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
    --radius: 6px;
}

.public, .public *, .public *::before, .public *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.public { margin: 0; padding: 0; font-family: var(--body); color: var(--ink); background: var(--cream-2); line-height: 1.55; font-size: 16px; }

/* Portable chrome: header/footer usable inside non-marketing (USWDS) layouts without disturbing page content */
.sfs-chrome { display: contents; font-family: var(--body); }
.sfs-chrome *, .sfs-chrome *::before, .sfs-chrome *::after { box-sizing: border-box; }
.sfs-chrome ul { list-style: none; margin: 0; padding: 0; }
.sfs-chrome li { margin: 0; }
.sfs-chrome h1, .sfs-chrome h2, .sfs-chrome h3, .sfs-chrome h4, .sfs-chrome p { margin: 0; }
.sfs-chrome button { font-family: inherit; }
.sfs-chrome a { text-decoration: none; }
body.public-home { background: var(--cream); }

.public a { color: var(--blue); }
.public a:hover { color: var(--red); }
.public h1, .public h2, .public h3 { font-family: var(--display); line-height: 1.05; letter-spacing: .01em; }
.public h1 { text-transform: uppercase; }
.public-home h2, .public-home h3 { text-transform: uppercase; }
.public-sub h2, .public-sub h3 { text-transform: none; line-height: 1.1; letter-spacing: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.eyebrow { font-family: var(--display); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; color: var(--red); }

.btn { display: inline-block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding: 15px 34px; border-radius: var(--radius); font-size: 16px; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,23,31,.18); }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-dark); color: var(--white); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost-white { border: 2px solid var(--white); color: var(--white); background: transparent; }
.btn-ghost-white:hover { background: rgba(255,255,255,.1); color: var(--white); }

.sfs-nav { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
@media (max-width: 1100px) { .sfs-nav { flex-wrap: wrap; } }

.nav-link-top { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; color: var(--ink); text-decoration: none; padding: 6px 2px; border-bottom: 3px solid transparent; white-space: nowrap; transition: border-color .15s, color .15s; }
.nav-link-top:hover { border-bottom-color: var(--red); color: var(--ink); }
.nav-link-top.active { border-bottom-color: var(--red); color: var(--ink); }

.path-card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 26px 24px; position: relative; text-decoration: none; color: var(--ink); display: block; transition: transform .15s ease, box-shadow .15s ease, color .15s ease; }
.path-card:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--red); color: var(--ink); }
.path-card h3 { font-family: var(--display); font-size: 1.2rem; margin-bottom: 10px; }
.path-card p { font-size: .92rem; color: var(--muted); }
.path-tag { position: absolute; top: -12px; left: 20px; color: var(--white); font-family: var(--display); text-transform: uppercase; font-size: .68rem; letter-spacing: .12em; padding: 3px 10px; border-radius: 3px; }

.public .card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 28px; transition: box-shadow .15s, transform .15s; }
.public .card:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--red); }

.recruit-card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 24px 26px; display: flex; gap: 18px; align-items: flex-start; transition: box-shadow .15s; }
.recruit-card:hover { box-shadow: 4px 4px 0 var(--red); }
.icon-box { width: 44px; height: 44px; background: var(--cream-2); border: 2px solid var(--ink); border-radius: var(--radius); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.step-num { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1; display: block; margin-bottom: 10px; }
.res-row { border-top: 2px solid var(--ink); padding: 20px 0; }

.public details { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); margin-bottom: 12px; }
.public summary { cursor: pointer; list-style: none; padding: 20px 24px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 1.02rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background-color .15s; }
.public summary::-webkit-details-marker { display: none; }
.public summary::after { content: "+"; font-size: 1.6rem; color: var(--red); flex: none; line-height: 1; }
.public details[open] summary::after { content: "\2013"; }
.faq-answer, .det-body { padding: 0 24px 22px; color: var(--muted); max-width: 60em; font-size: .95rem; line-height: 1.65; }

.aud-panel { border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.aud-head { padding: 22px 24px; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; color: var(--white); }

.footer-link { color: #cfd8e6; text-decoration: none; }
.footer-link:hover { color: var(--white); text-decoration: underline; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 99; font-family: var(--body); }
.skip-link:focus { left: 0; }

.signin-menu { position: absolute; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--red); min-width: 210px; animation: fadeIn .15s ease; z-index: 200; overflow: hidden; }
.signin-menu a { display: block; padding: 12px 18px; color: var(--ink); text-decoration: none; font-size: 14.4px; font-family: var(--body); border-bottom: 1px solid var(--cream-2); }
.signin-menu a:last-child { border-bottom: none; }
.signin-menu a:first-child { font-weight: 600; }

.nav-dd { position: relative; }
button.nav-link-top { background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-menu { position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--red); min-width: 250px; animation: fadeIn .15s ease; z-index: 200; overflow: hidden; }
.nav-menu.nav-menu-right { left: auto; right: 0; }
.nav-menu a { display: block; padding: 11px 18px; color: var(--ink); text-decoration: none; font-family: var(--display); text-transform: uppercase; font-size: 13.12px; letter-spacing: .04em; border-bottom: 1px solid var(--cream-2); }
.nav-menu a:last-child { border-bottom: none; }
.nav-menu a:hover { background: var(--cream-2); color: var(--red); }
.nav-caret { transition: transform .15s ease; }
[data-menu-toggle][aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* Lock chrome link colors so host-page (USWDS) a:link/:visited/:hover rules can't bleed in */
.sfs-chrome a.nav-link-top, .sfs-chrome a.nav-link-top:link, .sfs-chrome a.nav-link-top:visited, .sfs-chrome a.nav-link-top:hover { color: var(--ink); }
.sfs-chrome .nav-menu a, .sfs-chrome .nav-menu a:link, .sfs-chrome .nav-menu a:visited { color: var(--ink); }
.sfs-chrome .nav-menu a:hover { color: var(--red); background: var(--cream-2); }
.sfs-chrome .signin-menu a, .sfs-chrome .signin-menu a:link, .sfs-chrome .signin-menu a:visited { color: var(--ink); }
.sfs-chrome .signin-menu a:hover { color: var(--red); background: var(--cream-2); }
.sfs-chrome .footer-link, .sfs-chrome .footer-link:link, .sfs-chrome .footer-link:visited { color: #cfd8e6; }
.sfs-chrome .footer-link:hover { color: var(--white); }
.sfs-chrome .footer-badge, .sfs-chrome .footer-badge:link, .sfs-chrome .footer-badge:visited { display: inline-block; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 8px 14px; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 11.52px; color: #cfd8e6; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.sfs-chrome .footer-badge:hover { background: rgba(255,255,255,.12); border-color: var(--white); color: var(--white); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.split-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.stat-3 { display: grid; grid-template-columns: repeat(3,1fr); }
.stat-4 { display: grid; grid-template-columns: repeat(4,1fr); }

@media (max-width: 960px) {
    .hero-grid, .main-grid, .split-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .stat-3, .stat-4 { grid-template-columns: repeat(2,1fr); }
    .public-nav { flex-wrap: wrap; }
    aside.public-sidebar { position: static !important; }
}
@media (max-width: 520px) {
    .stat-3, .stat-4 { grid-template-columns: 1fr; }
}