:root {
  --navy: #073a7d;
  --navy-dark: #031f45;
  --blue: #1766d5;
  --lime: #9cff00;
  --line: #cdd9e6;
  --muted: #5c6f84;
  --display: "Barlow Condensed", sans-serif;
  --body: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { background: #f4f8fd; }
body { margin: 0; color: var(--navy-dark); font-family: var(--body); }
a { color: inherit; }
main { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 3rem; }
header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
header img { width: 112px; height: auto; display: block; }
header span, .kicker { color: var(--blue); font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.intro { max-width: 680px; padding: clamp(3.5rem, 8vw, 7rem) 0 2.5rem; }
.intro h1 { margin: .35rem 0 1rem; color: var(--navy); font: 800 clamp(4.5rem, 10vw, 8rem)/.82 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.intro > p:last-child { max-width: 620px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.8; }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: white; }
.roles a { min-height: 118px; padding: 1.35rem; display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; grid-template-rows: auto auto; align-items: center; column-gap: .8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; transition: background .2s, transform .2s; }
.roles a:hover, .roles a:focus-visible { position: relative; z-index: 1; background: #edf5ff; outline: 2px solid var(--blue); outline-offset: -2px; }
.roles span { grid-row: 1 / 3; color: var(--blue); font: 700 .8rem var(--display); }
.roles strong { align-self: end; color: var(--navy); font: 800 1.65rem var(--display); text-transform: uppercase; }
.roles small { align-self: start; color: var(--muted); font-size: .68rem; }
.roles i { grid-column: 3; grid-row: 1 / 3; color: var(--blue); font-style: normal; font-size: 1.2rem; }
.roles a:first-child { grid-column: 1 / -1; background: var(--navy-dark); }
.roles a:first-child strong { color: white; }
.roles a:first-child small { color: #9db7d4; }
.roles a:first-child span { color: var(--lime); }
footer { padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .65rem; }
footer p { margin: 0; }
footer a { color: var(--blue); font-weight: 800; text-decoration: none; text-transform: uppercase; }

@media (max-width: 680px) {
  main { width: min(100% - 1.5rem, 520px); }
  header { min-height: 64px; }
  header img { width: 92px; }
  .intro { padding: 3.25rem 0 2rem; }
  .intro h1 { font-size: clamp(4rem, 21vw, 6rem); }
  .roles { grid-template-columns: 1fr; }
  .roles a:first-child { grid-column: auto; }
  .roles a { min-height: 92px; padding: 1rem; }
  footer { flex-direction: column; }
}