:root{--blue:#04428d;--ink:#102d50;--light:#eaf1f8;--white:#fff;--line:#c5d5e8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:1rem/1.65 Arial,sans-serif;color:var(--ink);background:var(--white);overflow-wrap:anywhere}
a{color:inherit;text-underline-offset:.24em}
a:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.wrap{width:min(100% - 48px,1120px);margin-inline:auto}
.skip{position:absolute;left:12px;top:-100px;padding:8px 16px;background:white;color:var(--ink);z-index:2}.skip:focus{top:12px}
.top{border-bottom:1px solid var(--line)}
.bar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:12px}
.brand{font-weight:700;text-decoration:none}
nav{display:flex;gap:8px 24px;flex-wrap:wrap}
nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
nav a:hover{text-decoration:underline}
.hero{background:var(--blue);color:var(--white)}
.intro{padding-block:clamp(56px,10vw,120px)}
.kicker,.tag{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
h1,h2,h3{line-height:1.13;margin:0}
h1{font-size:clamp(2.5rem,8vw,5.5rem);letter-spacing:-.045em}
h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.025em}
h3{font-size:1.35rem}
.lead{font-size:clamp(1.05rem,2vw,1.375rem);max-width:42ch;margin:24px 0}
.button{display:inline-flex;align-items:center;gap:16px;min-height:48px;padding:8px 16px;background:var(--white);color:var(--blue);font-weight:700;text-decoration:none;border-radius:4px}
.button:focus-visible{outline-color:var(--white)}
.block{padding-block:clamp(48px,8vw,88px)}
.projects{background:var(--light)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin-top:32px}
article{padding:24px;background:var(--white);border-top:4px solid var(--blue);min-width:0}
.tag{color:var(--blue)} article p:last-child{margin-bottom:0}
footer{padding-block:24px;border-top:1px solid var(--line)}
.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.contact a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
  background: var(--blue);
  color: var(--white);
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
}
.contact a:focus-visible {
  outline-color: var(--blue);
}
@media(max-width:480px){.wrap{width:calc(100% - 32px)}.bar{gap:0}.brand{width:100%}nav{gap:0 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}