/* Self-hosted Inter (variable, latin). Replaces the render-blocking Google
   Fonts @import so text paints without a third-party round trip. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

:root {
  --color-primary: #1F4E79;
  --color-navy: #16354F;
  --color-slate: #5B6570;
  --color-light-gray: #D9E1E8;
  --color-white: #FFFFFF;
  --color-bg: #F7F9FA;
  --color-text: #1C2733;
  --font-sans: 'Inter', 'Roboto', 'Open Sans', Arial, Helvetica, sans-serif;
  --max-width: 1180px;
  --radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Inline prose links are underlined so they're distinguishable without relying
   on color alone (WCAG). Buttons and card links are excluded. */
main p a:not(.btn):not(.card), main li a:not(.btn):not(.card) { text-decoration: underline; }

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

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 16px;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 16px; }

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 12px;
}

/* Header */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-light-gray);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--color-navy);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: var(--radius);
  letter-spacing: 0.03em;
}
.brand-name { font-size: 0.95rem; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.primary-nav > a,
.nav-group > a {
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 500;
}
.primary-nav > a:hover,
.nav-group > a:hover { color: var(--color-primary); text-decoration: none; }
.nav-cta {
  background: var(--color-primary);
  color: var(--color-white) !important;
  padding: 8px 16px;
  border-radius: var(--radius);
}
.nav-cta:hover { background: var(--color-navy); text-decoration: none; }

/* Nav groups with submenus */
.nav-group { position: relative; display: flex; align-items: center; gap: 4px; }
.submenu-toggle {
  background: none; border: none; cursor: pointer; padding: 4px;
  width: 20px; height: 20px; position: relative;
}
.submenu-toggle::before {
  content: ""; display: block; width: 7px; height: 7px;
  border-right: 2px solid var(--color-slate); border-bottom: 2px solid var(--color-slate);
  transform: rotate(45deg); margin: -2px auto 0; transition: transform 0.2s;
}
.submenu {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  background: var(--color-white); border: 1px solid var(--color-light-gray);
  border-radius: var(--radius); box-shadow: 0 14px 34px rgba(22,53,79,0.12);
  padding: 8px; margin-top: 10px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
  z-index: 120;
}
.submenu a {
  color: var(--color-text); font-size: 0.9rem; font-weight: 500;
  padding: 9px 12px; border-radius: 6px; white-space: nowrap;
}
.submenu a:hover { background: var(--color-light-gray); color: var(--color-primary); text-decoration: none; }
/* Nested submenu (e.g. Professional Services > Service Packages) */
.submenu .nav-group { width: 100%; justify-content: space-between; }
/* Desktop: reveal on hover/focus. Use the direct-child combinator so a nested
   nav-group's submenu only opens on its own hover, not its parent's. */
@media (min-width: 861px) {
  .nav-group:hover > .submenu,
  .nav-group:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-group:hover > .submenu-toggle::before { transform: rotate(225deg); }
  .submenu > .nav-group > .submenu { top: -8px; left: 100%; margin: 0 0 0 6px; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-light-gray);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 24px 20px;
    gap: 0;
    display: none;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .primary-nav.open { display: flex; }
  .primary-nav > a,
  .nav-group > a { padding: 14px 0; font-size: 1rem; border-bottom: 1px solid var(--color-light-gray); }
  .nav-group { flex-wrap: wrap; justify-content: space-between; }
  .nav-group > a { flex: 1; }
  .submenu-toggle { width: 44px; height: 52px; }
  .submenu-toggle::before { border-color: var(--color-navy); width: 9px; height: 9px; }
  .nav-group.open > .submenu-toggle::before { transform: rotate(225deg); }
  /* Mobile: submenu is an inline accordion, collapsed until opened. A nested
     nav-group (e.g. Professional Services > Service Packages) only opens its
     own submenu — the > combinator keeps a parent's "open" from also
     revealing a nested submenu that hasn't been toggled. */
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0; margin: 0;
    width: 100%; padding: 0 0 8px 12px;
    display: none;
  }
  .nav-group.open > .submenu { display: flex; }
  .submenu a { padding: 12px 8px; font-size: 0.95rem; }
  .submenu .submenu { padding-left: 20px; }
  .nav-cta { margin-top: 16px; text-align: center; border-bottom: none !important; }
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-primary) 100%);
  color: var(--color-white);
  padding: 88px 0 72px;
}
.hero h1, .hero p { color: var(--color-white); }
.hero .eyebrow { color: var(--color-light-gray); }
.hero-lead {
  font-size: 1.15rem;
  max-width: 640px;
  color: var(--color-light-gray);
}
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

/* Trust bar: CAGE/UEI/contract credentials + certifications, above the fold beside the CTAs */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  list-style: none;
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-light-gray);
}
.hero-trust li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hero-trust svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: var(--color-accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-trust img { width: 22px; height: 22px; border-radius: 4px; }
.hero-trust a { color: var(--color-light-gray); text-decoration: underline; text-underline-offset: 2px; }
.hero-trust a:hover { color: var(--color-white); }
@media (max-width: 600px) {
  .hero-trust { gap: 8px 16px; margin-top: 22px; padding-top: 14px; font-size: 0.78rem; }
}

/* Centered hero variant (image background) */
.hero-centered { text-align: center; padding: 104px 0 96px; }
.hero-centered .hero-lead { margin-left: auto; margin-right: auto; }
.hero-centered .hero-actions { justify-content: center; }
.hero-centered .hero-trust { justify-content: center; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-white);
  color: var(--color-navy) !important;
}
.btn-primary:hover { background: var(--color-light-gray); text-decoration: none; }
.btn-outline {
  border-color: rgba(255,255,255,0.6);
  color: var(--color-white) !important;
}
.btn-outline:hover { border-color: var(--color-white); text-decoration: none; }
/* Outline button for light backgrounds — .btn-outline is white-on-white there. */
.btn-outline-dark {
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
}
.btn-outline-dark:hover { background: var(--color-primary); color: var(--color-white) !important; text-decoration: none; }
.btn-solid {
  background: var(--color-primary);
  color: var(--color-white) !important;
}
.btn-solid:hover { background: var(--color-navy); text-decoration: none; }

/* Sections */
.section { padding: 64px 0; }
.section-alt { background: var(--color-bg); }
.section-header { max-width: 720px; margin-bottom: 40px; }

.grid {
  display: grid;
  gap: 28px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius);
  padding: 28px;
}
.card h3 { margin-bottom: 10px; }
/* Cards with an icon: icon and heading share a row, body spans full width below */
.card:has(.card-icon) { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-content: start; }
.card:has(.card-icon) h3 { grid-row: 1; grid-column: 2; align-self: center; margin: 0; }
.card:has(.card-icon) > :not(.card-icon):not(h3) { grid-column: 1 / -1; margin-top: 0; }
.card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-primary); background: rgba(31, 78, 121, 0.08); border-radius: 10px; grid-row: 1; grid-column: 1; align-self: center; }
.card-icon svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Narrow phones: stack the icon above the heading. Beside the icon, a long
   heading's min-content can push the card wider than a 320px viewport and
   force horizontal scrolling (WCAG reflow). */
@media (max-width: 400px) {
  .card:has(.card-icon) { grid-template-columns: 1fr; }
  .card:has(.card-icon) .card-icon { grid-row: 1; grid-column: 1; }
  .card:has(.card-icon) h3 { grid-row: 2; grid-column: 1; }
}
/* Centered variant: icon above heading above body, all centered — for compact
   4-up card rows where the default left-aligned icon+heading row reads lopsided. */
.card.card-centered:has(.card-icon) { display: block; text-align: center; }
.card-centered .card-icon { margin: 0 auto 14px; }
.card-centered h3 { margin: 0 0 8px; }

/* Readiness cards (Explore / Plan / Prove / Transform / Scale). A colored rule
   and icon tint deepen with the depth of engagement. Deliberately unnumbered:
   these are alternative entry points, not compulsory steps. */
.card-step {
  position: relative; padding-top: 30px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.card-step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--step); border-radius: var(--radius) var(--radius) 0 0;
}
.card-step .card-icon { color: var(--step-ink); background: var(--step-tint); }
.card-step h3 { color: var(--color-navy); }
.card-step:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(22,53,79,0.13); border-color: var(--step); }
@media (prefers-reduced-motion: reduce) {
  .card-step { transition: none; }
  .card-step:hover { transform: none; }
}
.card-step.step-1 { --step: #20A0E0; --step-ink: #1479B0; --step-tint: rgba(32,160,224,0.12); }
.card-step.step-2 { --step: #1B8CC6; --step-ink: #136A9B; --step-tint: rgba(27,140,198,0.12); }
.card-step.step-3 { --step: #1479B0; --step-ink: #115F8C; --step-tint: rgba(20,121,176,0.12); }
.card-step.step-4 { --step: #1F4E79; --step-ink: #1F4E79; --step-tint: rgba(31,78,121,0.12); }
.card-step.step-5 { --step: #16354F; --step-ink: #16354F; --step-tint: rgba(22,53,79,0.12); }

.pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--color-light-gray);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 16px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 860px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-num { font-size: 2rem; font-weight: 800; color: var(--color-primary); }
.stat-label { font-size: 0.85rem; color: var(--color-slate); text-transform: uppercase; letter-spacing: 0.05em; }

/* Compact "pop-out" variant of .stat-row: same card look as .card (white
   panel, border, hover lift) but sized to just fit a number + label. */
.stat-row.stat-boxed > div {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius);
  padding: 20px 14px;
  box-shadow: 0 1px 2px rgba(22,53,79,0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-row.stat-boxed > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(22,53,79,0.14);
  border-color: var(--color-accent);
}

.cta-band {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 56px 0;
  text-align: center;
}
.cta-band h2 { color: var(--color-white); }

table.id-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}
table.id-table th, table.id-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-light-gray);
  font-size: 0.95rem;
  /* "anywhere" (not "break-word") so long unbreakable values — email
     addresses, contract numbers — also shrink the table's min-content and
     don't force horizontal scrolling at a 320px viewport (WCAG reflow). */
  overflow-wrap: anywhere;
}
table.id-table th { color: var(--color-slate); font-weight: 600; width: 40%; }

/* FAQ accordion — native <details>, so it works with no JS and stays
   keyboard-operable and readable to crawlers when collapsed. */
.faq { border-top: 1px solid var(--color-light-gray); }
.faq details { border-bottom: 1px solid var(--color-light-gray); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-weight: 600; color: var(--color-navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.faq details > p { margin: 0 0 18px; max-width: 68ch; }

/* Flow: a simple labelled sequence on a connector rail. Built from real text
   rather than an image, so it stays selectable, scales with the user's font
   size, and reflows on narrow screens. */
.flow { margin: 0; }
.flow-step { position: relative; padding: 0 0 22px 34px; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--color-white);
  border: 3px solid var(--color-accent); box-sizing: border-box;
}
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; left: 6px; top: 20px; bottom: 2px;
  width: 2px; background: var(--color-light-gray);
}
.flow-label { font-weight: 700; color: var(--color-navy); margin-bottom: 4px; }
.flow-step p { margin: 0; font-size: 0.94rem; }
/* The step where a person, not the model, makes the call. */
.flow-step.is-gate::before { background: var(--color-primary); border-color: var(--color-primary); }
.flow-step.is-gate .flow-label { color: var(--color-primary); }

/* Small labelled chips (measures, sectors). */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  border: 1px solid var(--color-light-gray); background: var(--color-bg);
  color: var(--color-text); border-radius: 999px;
  padding: 5px 13px; font-size: 0.85rem; font-weight: 600;
}

.team-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.team-card .headshot { margin-left: auto; margin-right: auto; }
.headshot.placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy); color: var(--color-white);
  font-weight: 700; font-size: 2rem; letter-spacing: 0.02em;
}
.team-card .role { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; }
.team-card p { text-align: left; }
.team-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-white) !important;
  margin-top: 12px;
}
.team-social:hover { background: var(--color-navy); text-decoration: none; }
.team-social svg { width: 17px; height: 17px; fill: currentColor; }

/* Footer */
.site-footer {
  background: var(--color-navy);
  color: var(--color-light-gray);
  padding: 56px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-bottom: 40px;
}
@media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-col a, .footer-col address {
  display: block;
  color: var(--color-light-gray);
  margin-bottom: 8px;
  font-size: 0.92rem;
}
.footer-col h3 {
  color: var(--color-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.footer-brand p { color: var(--color-light-gray); font-size: 0.9rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 20px 0 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-light-gray);
}
.footer-bottom a { color: var(--color-light-gray); text-decoration: underline; }

/* Contact form */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--color-navy);
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.form-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  display: none;
}
.form-status.success { display: block; background: #E4F3E7; color: #1E5A2E; }
.form-status.error { display: block; background: #FBE5E5; color: #8A1F1F; }

.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 10px;
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* Careers / jobs */
.jobs-status { color: var(--color-slate); }
.job-card .role { margin-bottom: 12px; }
.job-card .btn { margin-top: 8px; }

/* Jobs: filter bar */
.jobs-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.jobs-search, .jobs-select {
  font: inherit; color: var(--color-text); background: var(--color-white);
  border: 1px solid var(--color-light-gray); border-radius: var(--radius);
  padding: 10px 12px;
}
.jobs-search { flex: 1 1 240px; min-width: 200px; }
.jobs-select { flex: 0 0 auto; cursor: pointer; }
.jobs-search:focus, .jobs-select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31,78,121,0.12);
}
.jobs-count { margin-left: auto; color: var(--color-slate); font-size: 0.9rem; }

/* Jobs: cards now link to their own page */
.job-card { display: flex; flex-direction: column; }
.job-card .job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.job-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-primary); background: var(--color-bg);
  border: 1px solid var(--color-light-gray); border-radius: 999px;
  padding: 3px 10px;
}
.job-tag-new { color: #1E5A2E; background: #E4F3E7; border-color: #BFE3C8; }
.job-card .job-posted { color: var(--color-slate); font-size: 0.85rem; margin-top: 4px; }
.job-card .job-card-link {
  margin-top: auto; padding-top: 14px; color: var(--color-primary); font-weight: 600;
}
.job-card:hover .job-card-link { text-decoration: underline; }

/* Jobs: individual posting page */
.job-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.job-detail-body { max-width: 720px; }
.job-lead { font-size: 1.15rem; color: var(--color-navy); font-weight: 500; }
.job-detail-body h2 { margin-top: 32px; }
.job-detail-body ul { padding-left: 20px; }
.job-detail-body li { margin-bottom: 8px; }
.job-apply-band {
  margin-top: 40px; padding: 28px; background: var(--color-bg);
  border: 1px solid var(--color-light-gray); border-radius: 8px;
}
.job-apply-band h2 { margin-top: 0; }
.job-detail-facts {
  position: sticky; top: 140px;
  background: var(--color-white); border: 1px solid var(--color-light-gray);
  border-radius: 8px; padding: 24px 26px;
}
.job-detail-facts dl { margin: 0; display: grid; gap: 16px; }
.job-detail-facts dt {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-slate); margin-bottom: 2px;
}
.job-detail-facts dd { margin: 0; color: var(--color-navy); font-weight: 600; }
@media (max-width: 800px) {
  .job-detail { grid-template-columns: 1fr; gap: 28px; }
  .job-detail-facts { position: static; order: -1; }
  .jobs-count { margin-left: 0; width: 100%; }
}

/* Home: client logo wall */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 28px 32px;
  align-items: center;
}
.logo-grid .logo {
  max-height: 54px;
  max-width: 100%;
  margin: 0 auto;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter .2s, opacity .2s;
}
.logo-grid .logo:hover { filter: grayscale(0); opacity: 1; }

/* Client logo carousel: continuously scrolling marquee. The logo set is
   duplicated in the markup so the -50% translate loops seamlessly. Works with
   CSS alone (no JS required); when the visitor prefers reduced motion the
   auto-scroll is disabled and it becomes a single, manually scrollable strip
   (not a giant wrapped grid). */
.logo-carousel {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-track {
  display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
  gap: 26px 46px; width: max-content;
  animation: logo-scroll 55s linear infinite;
}
.logo-carousel:hover .logo-track { animation-play-state: paused; }
.logo-link {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  opacity: 0.78; transition: opacity .2s, transform .2s;
}
.logo-link:hover { opacity: 1; transform: translateY(-2px); }
.logo-track .logo {
  height: 104px; width: auto; flex: 0 0 auto; margin: 0;
}
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* No auto-scroll — but stay a single-row strip the visitor can scroll by
     hand, rather than wrapping the whole set into a large grid. */
  .logo-carousel { overflow-x: auto; }
  .logo-track { animation: none; }
  .logo-track [aria-hidden="true"] { display: none; }
}

/* Clickable cards */
a.card { text-decoration: none; color: inherit; display: block; transition: border-color .2s, transform .2s; }
a.card:hover { border-color: var(--color-primary); text-decoration: none; transform: translateY(-2px); }
a.card h3 { color: var(--color-navy); }

/* Imagery treatments */
.hero { background-size: cover; background-position: center; }
.headshot {
  width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
  object-position: center top;
  margin-bottom: 14px; border: 3px solid var(--color-light-gray);
}
.media-img { width: 100%; border-radius: 8px; display: block; }
.media-banner {
  width: 100%; max-height: 340px; object-fit: cover;
  border-radius: 8px; margin: 8px 0 8px;
}
/* Nudge the crop toward the bottom of the source photo: a plain center
   crop clips the chins of the row nearest the camera, but anchoring fully
   to the bottom clips the eyes of the far row instead. This split keeps
   both rows' faces fully in frame. */
.team-photo-banner { object-position: center 75%; }
/* On narrow screens the fixed 340px height crops group photos side-to-side
   instead of top-to-bottom; drop the cap so nobody gets cropped out. */
@media (max-width: 520px) {
  .team-photo-banner { max-height: none; aspect-ratio: 1024 / 769; }
}
.figure-card { padding: 0; overflow: hidden; }
.figure-card img { width: 100%; display: block; }
.figure-card .figure-body { padding: 22px 28px; }

/* Brand logos */
.brand-logo { height: 92px; width: auto; max-width: 440px; display: block; }
.footer-logo { height: 44px; width: auto; margin-bottom: 14px; }
.footer-social { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.footer-social-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: rgba(255,255,255,0.75); }
.footer-social-link svg { width: 18px; height: 18px; fill: currentColor; }
.footer-social-link:hover { color: var(--color-white); text-decoration: none; }

/* Image gallery grid */
.figure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.figure-grid figure { margin: 0; }
.figure-grid img { width: 100%; border-radius: 8px; display: block; border: 1px solid var(--color-light-gray); }
.figure-grid figcaption { font-size: 0.85rem; color: var(--color-slate); margin-top: 8px; }
.img-credit { font-size: 0.78rem; color: var(--color-slate); margin-top: 8px; text-align: right; }

/* Interleaved media rows (text beside image, alternating) */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin: 56px 0; }
.media-row:first-child { margin-top: 0; }
.media-row .media-row-media img {
  width: 100%; border-radius: 10px; display: block;
  border: 1px solid var(--color-light-gray); box-shadow: 0 12px 30px rgba(22,53,79,0.08);
}
/* The rule above is for full-width photos and graphics. A headshot inside a
   media-row card keeps its own circular sizing instead of being stretched. */
.media-row .media-row-media img.headshot {
  width: 128px; height: 128px; border-radius: 50%;
  border: 3px solid var(--color-light-gray); box-shadow: none;
}
.media-row .media-row-text h3 { margin-top: 0; }
.media-row.reverse .media-row-text { order: 2; }
.media-row.reverse .media-row-media { order: 1; }
@media (max-width: 800px) {
  .media-row { grid-template-columns: 1fr; gap: 24px; margin: 36px 0; }
  .media-row.reverse .media-row-text, .media-row.reverse .media-row-media { order: initial; }
}

/* Blog */
.blog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.blog-search {
  font: inherit; color: var(--color-text); background: var(--color-white);
  border: 1px solid var(--color-light-gray); border-radius: var(--radius);
  padding: 10px 12px; flex: 1 1 240px; min-width: 200px;
}
.blog-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(31,78,121,0.12); }
.blog-count { margin-left: auto; color: var(--color-slate); font-size: 0.9rem; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-card img { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--color-light-gray); }
.post-card .post-body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-size: 0.8rem; color: var(--color-slate); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.post-card h3 { font-size: 1.15rem; margin: 0 0 10px; }
.post-card p { flex: 1; }
.post-article { max-width: 760px; margin: 0 auto; }
.post-article img { width: 100%; border-radius: 8px; margin: 24px 0; border: 1px solid var(--color-light-gray); }
.post-article figure { margin: 24px 0; }
.post-article h2 { margin-top: 40px; }
.post-article pre { background: #0f2233; color: #e6eef5; padding: 20px; border-radius: 8px; overflow-x: auto; font-size: 0.86rem; }
.post-hero { width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.hero-post { padding-bottom: 32px; }
.hero-post .post-meta { color: rgba(255,255,255,0.8); margin-top: 8px; }
.post-article .post-meta { color: var(--color-slate); }
.post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-light-gray); font-weight: 600; font-size: 0.9rem; }

/* Full-bleed color bands inside the width-constrained post body, for
   home-page-style alternating sections (section-alt / section-dark / cta-band). */
.post-article .breakout { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-bottom: 32px; }
.post-article .breakout-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.post-article > .grid { margin-bottom: 32px; }
.post-article .breakout .grid { margin-top: 0; }
.post-article .pull-quote {
  margin: 32px 0;
  padding: 2px 0 2px 24px;
  border-left: 4px solid var(--color-primary);
  font-size: 1.2rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-navy);
}
.post-nav a { max-width: 46%; }
.post-nav span { flex: 1; }

/* ============================================================
   Visual refresh (scoped prototype under .vfx + a few safe globals)
   ============================================================ */
:root {
  --color-accent: #20A0E0;        /* light blue from the logo cube (graphics/fills) */
  --color-accent-dark: #1479B0;   /* deeper shade for text/links (accessible on white) */
  --color-accent-soft: rgba(32,160,224,0.10);
}

/* Safe globally: lets heroes/CTA bands layer a contour graphic behind content */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }
.cta-band { position: relative; overflow: hidden; }
.cta-band > .container { position: relative; z-index: 1; }
.topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; pointer-events: none; }
.topo path, .topo circle, .topo line, .topo polyline { fill: none; stroke: #8FB4DA; stroke-width: 1.5; }

/* Dark section variant for rhythm/color */
.section-dark { background: linear-gradient(160deg, var(--color-navy) 0%, #0f2942 100%); color: var(--color-white); position: relative; overflow: hidden; }
.section-dark > .container { position: relative; z-index: 1; }
.section-dark h2, .section-dark h3 { color: var(--color-white); }
.section-dark p { color: var(--color-light-gray); }
.section-dark .eyebrow { color: var(--color-accent); }
.section-dark .card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.section-dark .card p { color: var(--color-light-gray); }
.section-dark .card-icon { color: var(--color-accent); background: rgba(28,163,196,0.18); }

/* Branded credential/graphic panel (replaces stock photo) */
.cred-panel { position: relative; overflow: hidden; border-radius: 10px; padding: 40px; color: #fff;
  background: linear-gradient(160deg, var(--color-navy), var(--color-primary)); }
.cred-panel h3 { color: #fff; position: relative; margin: 0 0 6px; }
.cred-panel .cred-sub { position: relative; color: #bcd4e6; font-size: 0.9rem; margin: 0 0 20px; }
.cred-panel .cred-list { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cred-panel .cred-list li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; line-height: 1.3; }
.cred-panel .cred-list svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; stroke: var(--color-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cred-panel .cred-agencies { position: relative; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.cred-panel .cred-agencies span { border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; padding: 5px 13px; font-size: 0.8rem; font-weight: 600; color: #cfe8ef; }

/* Accent + depth, applied site-wide */
.eyebrow { color: var(--color-accent-dark); }
.hero .eyebrow { color: #8fd0f2; }
.section-header h2::after,
.media-row-text h2::after { content: ""; display: block; width: 54px; height: 4px; border-radius: 3px; background: var(--color-accent); margin-top: 18px; }
.section-header[style*="center"] h2::after { margin-left: auto; margin-right: auto; }
.card-icon { color: var(--color-accent-dark); background: var(--color-accent-soft); }
.card { box-shadow: 0 1px 2px rgba(22,53,79,0.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(22,53,79,0.14); border-color: var(--color-accent); }
a.card:hover { text-decoration: none; }
.stat-num { color: var(--color-accent-dark); }

/* Hero + CTA nav-chart texture site-wide (skip the image-background home hero
   and anything that already carries an inline .topo overlay) */
.hero:not(.hero-centered):not(:has(.topo))::before,
.cta-band:not(:has(.topo))::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20560'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cpath%20d='M-20%2060%20C%20260%2020,%20440%20130,%20700%2085%20S%201120%20140,%201460%2070'%20fill='none'%20stroke='%238FB4DA'%20stroke-width='1.5'%20stroke-opacity='0.5'/%3E%3Cpath%20d='M-20%20130%20C%20260%2085,%20440%20200,%20700%20150%20S%201120%20210,%201460%20140'%20fill='none'%20stroke='%238FB4DA'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cpath%20d='M-20%20210%20C%20280%20155,%20460%20280,%20720%20220%20S%201140%20285,%201460%20210'%20fill='none'%20stroke='%238FB4DA'%20stroke-width='1.5'%20stroke-opacity='0.4'/%3E%3Cpath%20d='M-20%20300%20C%20280%20240,%20460%20375,%20720%20305%20S%201140%20375,%201460%20300'%20fill='none'%20stroke='%238FB4DA'%20stroke-width='1.5'%20stroke-opacity='0.35'/%3E%3Cpath%20d='M-20%20395%20C%20280%20330,%20460%20470,%20720%20400%20S%201140%20470,%201460%20395'%20fill='none'%20stroke='%238FB4DA'%20stroke-width='1.5'%20stroke-opacity='0.3'/%3E%3Cpath%20d='M-20%20490%20C%20280%20425,%20460%20565,%20720%20495%20S%201140%20565,%201460%20490'%20fill='none'%20stroke='%238FB4DA'%20stroke-width='1.5'%20stroke-opacity='0.26'/%3E%3C/svg%3E") center/cover no-repeat;
}

/* Sections that carry a nav-chart background overlay */
.has-topo { position: relative; overflow: hidden; }
.has-topo > .container { position: relative; z-index: 1; }

/* Tradewinds "awardable" callout — reuses the branded navy panel look */
.tw-awardable {
  position: relative; overflow: hidden; border-radius: 10px; color: #fff;
  background: linear-gradient(160deg, var(--color-navy), var(--color-primary));
  box-shadow: 0 18px 40px rgba(16,53,79,0.22);
  display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center;
  padding: 40px 44px;
}
.tw-awardable .topo { z-index: 0; }
.tw-awardable-logo, .tw-awardable-body { position: relative; z-index: 1; }
.tw-awardable-logo img {
  display: block; width: 168px; max-width: 100%; height: auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.28));
}
.tw-awardable-body .eyebrow { color: var(--color-accent); }
.tw-awardable-body h3 { color: #fff; margin: 0 0 10px; }
.tw-awardable-body p { color: var(--color-light-gray); margin: 0 0 22px; }
@media (max-width: 760px) {
  .tw-awardable { grid-template-columns: 1fr; gap: 26px; padding: 32px 26px; text-align: center; }
  .tw-awardable-logo img { margin: 0 auto; }
}

/* Cohesive photo treatment: subtle brand tint + rounded corners */
.img-branded { position: relative; border-radius: 8px; overflow: hidden; }
.img-branded img { display: block; width: 100%; }
.img-branded::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(22,53,79,0.30) 0%, rgba(32,160,224,0.12) 100%); pointer-events: none; }

/* Hero background nav-chart variants (assigned per page for variety) */
.hero.hero-aero:not(:has(.topo))::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20560'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Ccircle%20cx='1180'%20cy='170'%20r='120'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.5'/%3E%3Ccircle%20cx='1180'%20cy='170'%20r='92'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1180'%20y1='92'%20x2='1180'%20y2='50'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1196'%20y1='79.4'%20x2='1200.8'%20y2='51.8'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1211.5'%20y1='83.5'%20x2='1221'%20y2='57.2'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1226'%20y1='90.3'%20x2='1240'%20y2='66.1'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1239.1'%20y1='99.5'%20x2='1257.1'%20y2='78.1'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1250.5'%20y1='110.9'%20x2='1271.9'%20y2='92.9'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1259.7'%20y1='124'%20x2='1283.9'%20y2='110'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1266.5'%20y1='138.5'%20x2='1292.8'%20y2='129'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1270.6'%20y1='154'%20x2='1298.2'%20y2='149.2'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1258'%20y1='170'%20x2='1300'%20y2='170'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1270.6'%20y1='186'%20x2='1298.2'%20y2='190.8'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1266.5'%20y1='201.5'%20x2='1292.8'%20y2='211'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1259.7'%20y1='216'%20x2='1283.9'%20y2='230'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1250.5'%20y1='229.1'%20x2='1271.9'%20y2='247.1'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1239.1'%20y1='240.5'%20x2='1257.1'%20y2='261.9'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1226'%20y1='249.7'%20x2='1240'%20y2='273.9'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1211.5'%20y1='256.5'%20x2='1221'%20y2='282.8'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1196'%20y1='260.6'%20x2='1200.8'%20y2='288.2'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1180'%20y1='248'%20x2='1180'%20y2='290'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1164'%20y1='260.6'%20x2='1159.2'%20y2='288.2'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1148.5'%20y1='256.5'%20x2='1139'%20y2='282.8'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1134'%20y1='249.7'%20x2='1120'%20y2='273.9'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1120.9'%20y1='240.5'%20x2='1102.9'%20y2='261.9'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1109.5'%20y1='229.1'%20x2='1088.1'%20y2='247.1'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1100.3'%20y1='216'%20x2='1076.1'%20y2='230'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1093.5'%20y1='201.5'%20x2='1067.2'%20y2='211'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1089.4'%20y1='186'%20x2='1061.8'%20y2='190.8'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1102'%20y1='170'%20x2='1060'%20y2='170'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1089.4'%20y1='154'%20x2='1061.8'%20y2='149.2'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1093.5'%20y1='138.5'%20x2='1067.2'%20y2='129'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1100.3'%20y1='124'%20x2='1076.1'%20y2='110'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1109.5'%20y1='110.9'%20x2='1088.1'%20y2='92.9'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1120.9'%20y1='99.5'%20x2='1102.9'%20y2='78.1'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1134'%20y1='90.3'%20x2='1120'%20y2='66.1'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1148.5'%20y1='83.5'%20x2='1139'%20y2='57.2'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1164'%20y1='79.4'%20x2='1159.2'%20y2='51.8'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.45'/%3E%3Cline%20x1='1180'%20y1='170'%20x2='1180'%20y2='20'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.4'/%3E%3Cline%20x1='1180'%20y1='170'%20x2='1330'%20y2='170'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.4'/%3E%3Cline%20x1='1180'%20y1='170'%20x2='1180'%20y2='320'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.4'/%3E%3Cline%20x1='1180'%20y1='170'%20x2='1030'%20y2='170'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.4'/%3E%3Ccircle%20cx='120'%20cy='520'%20r='120'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.16'/%3E%3Ccircle%20cx='120'%20cy='520'%20r='210'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.16'/%3E%3Ccircle%20cx='120'%20cy='520'%20r='300'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.16'/%3E%3Cline%20x1='-40'%20y1='120'%20x2='900'%20y2='540'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Ccircle%20cx='430'%20cy='330'%20r='4'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.4'/%3E%3Cline%20x1='120'%20y1='-20'%20x2='1440'%20y2='300'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Ccircle%20cx='780'%20cy='140'%20r='4'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.4'/%3E%3Cline%20x1='-40'%20y1='470'%20x2='1120'%20y2='60'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Ccircle%20cx='540'%20cy='265'%20r='4'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.4'/%3E%3C/svg%3E"); }
.hero.hero-marine:not(:has(.topo))::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20560'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cpath%20d='M365%20300%20L367%20306.6%20L367%20313.3%20L365.3%20319.8%20L362.2%20325.8%20L358.3%20331.2%20L354%20336.1%20L349.5%20340.6%20L344.9%20344.9%20L340.1%20348.9%20L335%20352.3%20L329.3%20354.8%20L323.3%20356.2%20L317%20356.1%20L310.9%20354.8%20L305.2%20352.5%20L300%20350%20L295.3%20347.8%20L290.7%20346.6%20L285.9%20346.6%20L280.3%20347.6%20L273.7%20349.3%20L266.1%20350.7%20L258%20351.1%20L250.1%20349.9%20L243.1%20346.7%20L237.9%20341.5%20L234.9%20334.8%20L234.3%20327.2%20L235.7%20319.5%20L238.4%20312.2%20L241.8%20305.7%20L245%20300%20L247.6%20294.8%20L249.3%20289.9%20L250.4%20285%20L251.3%20279.8%20L252.5%20274.6%20L254.2%20269.4%20L256.7%20264.5%20L260.1%20260.1%20L264%20256.1%20L268.3%20252.5%20L272.7%20249%20L277.3%20245.3%20L282.2%20241.3%20L287.5%20237.1%20L293.4%20233.1%20L300%20230%20L307.1%20228.4%20L314.1%20228.9%20L320.7%20231.8%20L326.2%20236.8%20L330.2%20243.4%20L332.8%20250.9%20L334.2%20258.4%20L334.9%20265.1%20L335.9%20270.6%20L337.7%20274.8%20L340.7%20278.2%20L345.1%20281.3%20L350.5%20284.7%20L356.1%20288.8%20L361.2%20294%20L365%20300%20Z'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.3'/%3E%3Cpath%20d='M421.5%20300%20L423.9%20312.2%20L423.4%20324.5%20L420.3%20336.5%20L415%20347.7%20L408.4%20357.9%20L400.9%20367.4%20L393%20376.3%20L384.6%20384.6%20L375.6%20392.2%20L366%20398.8%20L355.6%20403.9%20L344.4%20407.2%20L332.9%20408.3%20L321.4%20407.5%20L310.4%20405.1%20L300%20402%20L290.2%20399%20L280.7%20396.9%20L270.9%20396%20L260.2%20396.1%20L248.3%20396.7%20L235.4%20396.7%20L222%20395.1%20L208.9%20391.1%20L197.4%20384.2%20L188.5%20374.5%20L182.7%20362.7%20L180.4%20349.6%20L180.9%20336.1%20L183.7%20323.1%20L187.5%20311.1%20L191.5%20300%20L195%20289.7%20L197.8%20279.7%20L200.2%20269.7%20L202.6%20259.6%20L205.6%20249.5%20L209.7%20239.7%20L215.2%20230.4%20L221.9%20221.9%20L229.7%20214.4%20L238.2%20207.5%20L247.1%20201.1%20L256.4%20194.7%20L266.1%20188.3%20L276.5%20181.9%20L287.8%20176.2%20L300%20172%20L312.8%20170.1%20L325.6%20171.3%20L337.7%20175.9%20L348.2%20183.6%20L356.8%20193.8%20L363.2%20205.4%20L367.9%20217.3%20L371.6%20228.4%20L375.2%20238.3%20L379.7%20246.7%20L385.6%20254.3%20L392.9%20261.5%20L401%20269.3%20L409.2%20278.3%20L416.4%20288.5%20L421.5%20300%20Z'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.3'/%3E%3Cpath%20d='M483%20300%20L485.8%20318.3%20L484.7%20336.7%20L480.1%20354.6%20L472.5%20371.5%20L462.9%20387.1%20L452%20401.6%20L440.3%20415.1%20L427.7%20427.7%20L414.3%20439.3%20L399.8%20449.4%20L384.1%20457.4%20L367.5%20462.9%20L350.2%20465.4%20L332.8%20465.1%20L316%20462.7%20L300%20459%20L284.7%20455.2%20L269.8%20452.1%20L254.5%20450.1%20L238.2%20449.2%20L220.6%20448.5%20L201.9%20446.8%20L182.7%20442.9%20L164.3%20435.7%20L147.9%20424.8%20L134.9%20410.3%20L126.2%20392.9%20L121.8%20373.8%20L121.5%20354.2%20L124%20335%20L128.2%20316.9%20L133%20300%20L137.5%20284%20L141.4%20268.5%20L145.1%20253%20L149.1%20237.5%20L154.3%20222.1%20L161%20207.1%20L169.7%20193.1%20L180.3%20180.3%20L192.3%20168.8%20L205.4%20158.4%20L219.2%20148.8%20L233.5%20139.5%20L248.6%20130.4%20L264.6%20121.8%20L281.7%20114.4%20L300%20109%20L319%20106.9%20L338%20108.8%20L356.1%20115.2%20L372.1%20125.8%20L385.6%20139.8%20L396.4%20155.8%20L404.8%20172.3%20L411.7%20188.3%20L418.5%20202.8%20L425.9%20215.9%20L434.8%20227.9%20L445.2%20239.9%20L456.4%20252.6%20L467.3%20266.7%20L476.6%20282.6%20L483%20300%20Z'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.3'/%3E%3Cpath%20d='M549%20300%20L551.9%20324.8%20L550.1%20349.7%20L543.8%20374%20L533.9%20396.9%20L521.3%20418.3%20L506.9%20438.2%20L491.1%20456.9%20L474.2%20474.2%20L456%20490.1%20L436.3%20503.9%20L415%20515.1%20L392.4%20523%20L369%20527.3%20L345.4%20528%20L322.3%20525.9%20L300%20522%20L278.6%20517.5%20L257.6%20513.4%20L236.2%20510.2%20L214%20507.7%20L190.4%20505.1%20L165.7%20501%20L140.7%20494.1%20L116.8%20483.2%20L95.5%20467.8%20L78.4%20448%20L66.4%20424.9%20L59.7%20399.5%20L57.9%20373.5%20L59.7%20347.8%20L63.9%20323.3%20L69%20300%20L74.3%20277.8%20L79.3%20256.1%20L84.5%20234.6%20L90.5%20213.2%20L98%20192%20L107.8%20171.6%20L120.1%20152.4%20L134.8%20134.8%20L151.5%20119%20L169.6%20104.8%20L188.7%2091.8%20L208.7%2079.6%20L229.6%2068%20L251.7%2057.3%20L275.2%2048.2%20L300%2042%20L325.6%2039.8%20L351.2%2042.6%20L375.6%2050.8%20L397.7%2064.2%20L416.7%2081.7%20L432.4%20101.9%20L445.2%20123.1%20L456.2%20143.8%20L466.6%20163.3%20L477.5%20181.4%20L489.7%20198.6%20L503.2%20215.8%20L517.2%20234.1%20L530.5%20254.2%20L541.5%20276.2%20L549%20300%20Z'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.3'/%3E%3Cpath%20d='M620%20300%20L623.1%20331.8%20L620.4%20363.7%20L612.4%20394.8%20L599.9%20424.2%20L584.1%20451.9%20L565.9%20477.7%20L545.9%20501.8%20L524.2%20524.2%20L500.8%20544.7%20L475.5%20562.6%20L448.2%20577.3%20L419.2%20587.9%20L389.2%20594%20L358.9%20595.9%20L329%20594.2%20L300%20590%20L272%20584.8%20L244.4%20579.6%20L216.6%20575%20L187.8%20570.8%20L157.8%20566.1%20L126.7%20559.4%20L95.5%20549.2%20L65.8%20534.2%20L39.3%20513.9%20L17.8%20488.6%20L2.2%20459.2%20L-7%20427.2%20L-10.5%20394.2%20L-9.5%20361.6%20L-5.5%20330.1%20L0%20300%20L6%20271%20L12.3%20242.8%20L19.1%20214.8%20L27.1%20187%20L37.3%20159.6%20L50.4%20133.2%20L66.6%20108.5%20L85.8%2085.8%20L107.5%2065.4%20L131%2047.1%20L155.9%2030.5%20L182%2015.1%20L209.2%200.7%20L237.9%20-12.2%20L268.2%20-22.9%20L300%20-30%20L332.7%20-32.2%20L365.3%20-28.5%20L396.6%20-18.3%20L425.1%20-2%20L450%2019.3%20L471.1%2043.9%20L488.8%2069.9%20L504.2%2095.8%20L518.6%20120.6%20L533.3%20144.1%20L549%20166.9%20L565.8%20189.9%20L582.8%20214.2%20L598.6%20240.6%20L611.5%20269.3%20L620%20300%20Z'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.3'/%3E%3Cpath%20d='M1190%20108%20L1199.9%20156%20L1240.9%20129.1%20L1214%20170.1%20L1262%20180%20L1214%20189.9%20L1240.9%20230.9%20L1199.9%20204%20L1190%20252%20L1180.1%20204%20L1139.1%20230.9%20L1166%20189.9%20L1118%20180%20L1166%20170.1%20L1139.1%20129.1%20L1180.1%20156%20Z'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.4'/%3E%3Ccircle%20cx='1190'%20cy='180'%20r='86'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.35'/%3E%3Cline%20x1='1190'%20y1='180'%20x2='1440'%20y2='-253'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.12'/%3E%3Cline%20x1='1190'%20y1='180'%20x2='1682.4'%20y2='93.2'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.12'/%3E%3Cline%20x1='1190'%20y1='180'%20x2='1440'%20y2='613'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.12'/%3E%3Cline%20x1='1190'%20y1='180'%20x2='940'%20y2='613'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.12'/%3E%3Cline%20x1='1190'%20y1='180'%20x2='757'%20y2='-70'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.12'/%3E%3C/svg%3E"); }
.hero.hero-grid:not(:has(.topo))::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20560'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cpath%20d='M-40%2040%20Q%20720%200%201480%2040'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Cpath%20d='M-40%20125%20Q%20720%2085%201480%20125'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Cpath%20d='M-40%20210%20Q%20720%20170%201480%20210'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Cpath%20d='M-40%20295%20Q%20720%20255%201480%20295'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Cpath%20d='M-40%20380%20Q%20720%20340%201480%20380'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Cpath%20d='M-40%20465%20Q%20720%20425%201480%20465'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Cpath%20d='M-40%20550%20Q%20720%20510%201480%20550'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.22'/%3E%3Cpath%20d='M40%20-20%20Q%20-41.6%20280%2040%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M180%20-20%20Q%20115.2%20280%20180%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M320%20-20%20Q%20272%20280%20320%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M460%20-20%20Q%20428.8%20280%20460%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M600%20-20%20Q%20585.6%20280%20600%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M740%20-20%20Q%20742.4%20280%20740%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M880%20-20%20Q%20899.2%20280%20880%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M1020%20-20%20Q%201056%20280%201020%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M1160%20-20%20Q%201212.8%20280%201160%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M1300%20-20%20Q%201369.6%20280%201300%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M1440%20-20%20Q%201526.4%20280%201440%20580'%20stroke='%238FB4DA'%20fill='none'%20stroke-width='1.5'%20stroke-opacity='0.2'/%3E%3C/svg%3E"); }

/* Subtitle + gated-download button, paired tightly on one line (blog posts) */
.section-download { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.section-download h3 { margin: 0; }
.section-download + ul { margin-top: 12px; }

/* Gated download modal: a button opens an overlay with the embedded form */
.form-modal { display: none; position: fixed; inset: 0; background: rgba(22,53,79,0.55); z-index: 1000; align-items: center; justify-content: center; padding: 24px; }
.form-modal.is-open { display: flex; }
.form-modal-inner { position: relative; background: var(--color-white); border-radius: var(--radius); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 40px 32px 32px; }
.form-modal-close { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 1.6rem; line-height: 1; color: var(--color-slate); cursor: pointer; padding: 4px 8px; }
.form-modal-close:hover { color: var(--color-navy); }
.form-modal-success { text-align: center; padding: 12px 0; }
.form-modal-success p { margin: 0 0 16px; }
.form-modal-intro { margin: 0 0 20px; }
.form-modal-intro h3 { margin: 0 0 6px; }
.form-modal-intro p { margin: 0; color: var(--color-slate); }