:root {
  --navy: #071b35;
  --navy-2: #0d2949;
  --blue: #174a82;
  --teal: #3f8190;
  --sky: #dfeef3;
  --orange: #f18a22;
  --orange-dark: #cf6810;
  --ink: #122034;
  --muted: #5e6c7d;
  --line: #d8e0e8;
  --paper: #f6f8fb;
  --white: #ffffff;
  --radius: 1.35rem;
  --shadow: 0 24px 70px rgba(6, 26, 53, .14);
  --shell: min(1160px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, select { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: clamp(5rem, 8vw, 8rem); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--white); color: var(--navy); padding: .7rem 1rem; border-radius: .5rem;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.nav-shell {
  width: var(--shell); height: 88px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.96);
  padding: .45rem .65rem; border-radius: .65rem;
  flex: 0 0 auto;
}
.brand img { width: 184px; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 1.7vw, 1.8rem); }
.site-nav a {
  color: rgba(255,255,255,.92); text-decoration: none; font-weight: 650; font-size: .9rem;
  white-space: nowrap;
}
.site-nav a:not(.nav-cta):hover { color: var(--white); }
.nav-cta {
  border: 1px solid rgba(255,255,255,.55); padding: .65rem 1rem; border-radius: 999px;
}
.nav-cta:hover { background: var(--white); color: var(--navy); }
.menu-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35);
  border-radius: .6rem; background: rgba(7,27,53,.55); padding: 10px;
}
.menu-toggle span:not(.sr-only) { display: block; height: 2px; background: white; margin: 5px 0; }

.hero {
  min-height: 880px;
  color: var(--white);
  position: relative;
  display: flex;
  align-items: center;
  padding-block: 8.5rem 10rem;
  background: var(--navy) url("assets/kca-hero.png") center / cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,19,38,.98) 0%, rgba(5,23,45,.91) 32%, rgba(5,23,45,.30) 64%, rgba(5,23,45,.12) 100%),
    linear-gradient(0deg, rgba(4,19,38,.96) 0%, transparent 36%);
}
.hero-content {
  position: relative; z-index: 1;
  max-width: 1160px;
}
.hero-content > * { max-width: 670px; }
.eyebrow {
  margin: 0 0 1rem; color: var(--blue); text-transform: uppercase;
  font-size: .78rem; font-weight: 850; letter-spacing: .16em;
}
.eyebrow.light { color: #9fd5df; }
.hero h1 {
  margin: 0; max-width: 780px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.3rem, 6vw, 5.85rem);
  line-height: .98; letter-spacing: -.05em; font-weight: 500;
  text-wrap: balance;
}
.hero-copy {
  margin: 1.7rem 0 2rem; color: rgba(255,255,255,.82);
  font-size: 1.17rem; line-height: 1.6;
}
.hero-actions, .connect-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.button {
  min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.2rem; border-radius: 999px; text-decoration: none;
  font-weight: 780; transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); color: var(--navy); }
.button-primary:hover { background: #ffa03e; }
.button-ghost { border: 1px solid rgba(255,255,255,.45); color: var(--white); }
.button-ghost:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
.button-dark { background: var(--navy); color: var(--white); }
.button-light { background: var(--white); color: var(--navy); }
.hero-proof {
  position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.96); color: var(--ink); box-shadow: var(--shadow);
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
}
.hero-proof div { padding: 1.25rem 1.5rem 1.35rem; border-right: 1px solid var(--line); }
.hero-proof div:last-child { border-right: 0; }
.hero-proof strong { display: block; color: var(--navy); font-size: 1.55rem; line-height: 1.15; }
.hero-proof span { display: block; color: var(--muted); font-size: .8rem; margin-top: .25rem; }

h2, h3 { overflow-wrap: break-word; }
.intro > *, .audience-card, .service, .approach-heading > *, .process li,
.database-panel > *, .jobs-top > *, .job-card > *, .founder > *,
.connect-inner > *, .footer-grid > * { min-width: 0; }

.intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: end; }
.section-heading h2, .services h2, .database h2, .jobs h2, .founder h2, .connect h2 {
  margin: 0; font-family: Georgia, "Times New Roman", serif; color: var(--navy);
  font-size: clamp(2.5rem, 4.2vw, 4.15rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 500;
}
.intro-copy p { color: var(--muted); font-size: 1.08rem; margin: 0 0 1.3rem; }
.text-link {
  color: var(--blue); text-decoration: none; font-weight: 800; display: inline-flex; gap: .45rem;
  border-bottom: 1px solid rgba(23,74,130,.25); padding-bottom: .2rem;
}
.text-link:hover { color: var(--orange-dark); }

.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.audience-card { position: relative; padding: clamp(2rem, 5vw, 4.5rem); border-radius: var(--radius); overflow: hidden; }
.audience-card h2 {
  margin: 0 0 1.2rem; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 3.7vw, 3.7rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 500;
}
.audience-card > p:not(.eyebrow) { max-width: 35rem; }
.employer-card { background: var(--sky); }
.candidate-card { background: var(--navy); color: rgba(255,255,255,.78); }
.candidate-card h2 { color: var(--white); }
.candidate-card .eyebrow { color: #8fc9d4; }
.card-number {
  position: absolute; right: 1.8rem; top: .2rem; color: rgba(7,27,53,.06);
  font-size: 8rem; line-height: 1; font-weight: 900;
}
.candidate-card .card-number { color: rgba(255,255,255,.06); }
.check-list { list-style: none; padding: 0; margin: 1.6rem 0 2.2rem; display: grid; gap: .7rem; }
.check-list li { position: relative; padding-left: 1.7rem; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 900;
}

.section-heading.wide { max-width: 820px; }
.section-heading.wide > p:last-child { color: var(--muted); max-width: 700px; margin-top: 1.2rem; font-size: 1.06rem; }
.service-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.service { padding: 2.5rem; border-right: 1px solid var(--line); }
.service:first-child { padding-left: 0; }
.service:last-child { border-right: 0; padding-right: 0; }
.service-icon {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  color: var(--orange-dark); background: #fff1e4; font-size: 1.25rem;
}
.service h3 { color: var(--navy); margin: 1.3rem 0 .5rem; font-size: 1.23rem; }
.service p { color: var(--muted); margin: 0; }
.agreement-bar {
  margin-top: 2.2rem; display: flex; gap: 1.3rem; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; background: var(--paper); border-radius: .9rem; color: var(--muted); font-size: .9rem;
}
.agreement-bar > span:first-child { font-weight: 800; color: var(--navy); }
.agreement-bar div { display: flex; gap: .55rem; }
.agreement-bar strong { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .75rem; color: var(--navy); }

.approach { background: var(--navy); color: rgba(255,255,255,.74); }
.approach-heading { display: grid; grid-template-columns: 1.15fr .65fr; gap: 5rem; align-items: end; }
.approach-heading h2 {
  margin: 0; color: var(--white); font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 4.5vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 500;
}
.approach-heading > p { margin: 0; }
.process {
  list-style: none; padding: 0; margin: 4rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.2);
}
.process li { position: relative; padding: 2rem 2rem 0 0; }
.process span { color: var(--orange); font-size: .8rem; font-weight: 900; letter-spacing: .1em; }
.process h3 { margin: .7rem 0 .5rem; color: var(--white); font-size: 1.25rem; }
.process p { margin: 0; font-size: .94rem; }

.database-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 7rem); align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem); border-radius: var(--radius);
  background: linear-gradient(135deg, #edf6f7, #f6f8fb); border: 1px solid #dcebed;
}
.database-panel > div:last-child > p { color: var(--muted); margin: 0 0 1.5rem; }
.data-tags { display: flex; gap: .55rem; flex-wrap: wrap; }
.data-tags span { border: 1px solid #c5d8dc; background: rgba(255,255,255,.7); color: var(--navy); border-radius: 999px; padding: .35rem .7rem; font-size: .82rem; font-weight: 700; }

.jobs { background: var(--paper); }
.jobs-top { display: flex; justify-content: space-between; gap: 3rem; align-items: end; }
.job-filters { display: flex; gap: .8rem; }
.job-filters label { display: grid; gap: .35rem; color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.job-filters select {
  min-width: 175px; color: var(--navy); background: var(--white); border: 1px solid var(--line);
  padding: .72rem 2.2rem .72rem .8rem; border-radius: .7rem;
}
.job-list { margin-top: 2.5rem; display: grid; gap: .8rem; }
.job-card {
  display: grid; grid-template-columns: 1.35fr .7fr auto; gap: 2rem; align-items: center;
  padding: 1.5rem 1.6rem; background: var(--white); border: 1px solid var(--line); border-radius: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.job-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(7,27,53,.08); }
.job-card[hidden] { display: none; }
.job-type { color: var(--orange-dark); font-size: .75rem; text-transform: uppercase; font-weight: 900; letter-spacing: .1em; }
.job-card h3 { margin: .2rem 0; color: var(--navy); font-size: 1.16rem; }
.job-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.job-highlight { color: var(--navy); font-weight: 850; }
.job-card a { color: var(--blue); text-decoration: none; font-weight: 800; white-space: nowrap; }
.empty-jobs { color: var(--muted); padding: 2rem; text-align: center; }
.jobs-all { margin-top: 1.5rem; }

.founder { display: grid; grid-template-columns: 1.08fr .7fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.founder-quote { position: relative; padding: 3rem; background: var(--navy); color: var(--white); border-radius: var(--radius); overflow: hidden; }
.quote-mark { position: absolute; right: 1.5rem; top: -2.5rem; color: rgba(255,255,255,.08); font: 13rem Georgia, serif; }
.founder blockquote { position: relative; margin: 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.65rem); line-height: 1.18; letter-spacing: -.025em; }
.founder-quote p { color: rgba(255,255,255,.65); margin: 2rem 0 0; }
.founder-quote strong { color: var(--white); }
.founder-copy > p:last-child { color: var(--muted); }

.connect { background: linear-gradient(135deg, var(--navy), #123b66); color: rgba(255,255,255,.75); padding-block: clamp(4rem, 7vw, 6.5rem); }
.connect-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.connect h2 { color: var(--white); }
.connect-inner > div:first-child { max-width: 650px; }
.connect-inner > div:first-child > p:last-child { margin-bottom: 0; }

.site-footer { padding: 4rem 0 1.5rem; background: #041426; color: rgba(255,255,255,.62); }
.footer-grid { display: grid; grid-template-columns: 1.25fr .7fr .7fr 1.1fr; gap: 3rem; }
.footer-brand { align-self: start; width: fit-content; }
.footer-grid > div { display: grid; align-content: start; gap: .45rem; }
.footer-grid strong { color: var(--white); font-size: .9rem; margin-bottom: .4rem; }
.footer-grid a { text-decoration: none; font-size: .88rem; }
.footer-grid a:hover { color: var(--white); }
.footer-note p { margin: 0; font-size: .88rem; }
.footer-bottom { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; font-size: .78rem; }

@media (max-width: 1080px) {
  .site-header { position: absolute; }
  .nav-shell { height: 78px; }
  .brand img { width: 166px; }
  .menu-toggle { display: block; }
  .site-nav {
    position: absolute; inset: 78px 20px auto; display: none; padding: 1.2rem;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); border-radius: 1rem; box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .8rem; }
  .nav-cta { margin-top: .4rem; text-align: center; }
  .hero {
    min-height: 850px;
    padding-block: 8rem 12rem;
    background-position: 58% center;
  }
  .hero h1 { max-width: 680px; font-size: clamp(3.35rem, 8vw, 5rem); }
  .hero-copy { max-width: 610px; }
  .hero-proof { grid-template-columns: repeat(2, 1fr); }
  .hero-proof div:nth-child(2) { border-right: 0; }
  .hero-proof div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .intro, .database-panel, .founder { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .service, .service:first-child, .service:last-child { padding: 1.8rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .service:last-child { border-bottom: 0; }
  .agreement-bar { align-items: flex-start; flex-direction: column; }
  .approach-heading { grid-template-columns: 1fr; gap: 2rem; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .jobs-top { align-items: flex-start; flex-direction: column; }
  .job-card { grid-template-columns: 1fr 1fr; }
  .job-card a { justify-self: end; }
  .job-highlight { grid-row: 2; }
  .connect-inner { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --shell: min(100% - 28px, 1160px); }
  .section { padding-block: 4.5rem; }
  .nav-shell { height: 70px; }
  .brand { padding: .35rem .5rem; border-radius: .5rem; }
  .brand img { width: 138px; }
  .menu-toggle { width: 40px; height: 40px; }
  .site-nav { inset: 70px 14px auto; }
  .hero {
    min-height: 820px;
    padding-block: 7rem 11.5rem;
    background-position: 67% center;
  }
  .hero-overlay { background: linear-gradient(90deg, rgba(4,19,38,.96), rgba(4,19,38,.58)), linear-gradient(0deg, rgba(4,19,38,.97), transparent 45%); }
  .hero .eyebrow {
    max-width: 18rem;
    margin-bottom: .8rem;
    font-size: .7rem;
    line-height: 1.45;
    letter-spacing: .12em;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(2.75rem, 12vw, 3.8rem);
    line-height: 1;
    letter-spacing: -.045em;
  }
  .hero-copy { margin-block: 1.2rem 1.5rem; font-size: 1rem; line-height: 1.52; }
  .hero-actions .button { width: 100%; }
  .hero-proof div { padding: .9rem 1rem; }
  .hero-proof strong { font-size: 1.25rem; }
  .hero-proof span { font-size: .7rem; }
  .intro { gap: 2rem; }
  .audience-card { padding: 2.1rem 1.5rem; }
  .card-number { font-size: 6rem; }
  .process { grid-template-columns: 1fr; }
  .process li { border-bottom: 1px solid rgba(255,255,255,.13); padding-bottom: 1.5rem; }
  .database-panel { padding: 2rem 1.4rem; }
  .job-filters { width: 100%; display: grid; grid-template-columns: 1fr; }
  .job-filters select { width: 100%; }
  .job-card { grid-template-columns: 1fr; gap: 1rem; }
  .job-highlight { grid-row: auto; }
  .job-card a { justify-self: start; }
  .founder-quote { padding: 2rem 1.5rem; }
  .connect-actions .button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
