@font-face {
  font-family: Grift;
  src: url("fonts/grift-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --dark: #111111;
  --blue: #092344;
  --white: #f2f2f2;
  --muted: #848484;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--blue); }
body { margin: 0; min-height: 100vh; color: var(--white); background: var(--blue); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body.is-home { height: 100vh; height: 100dvh; overflow: hidden; background: var(--dark); }
a { color: inherit; }
a:focus-visible { outline: 1px solid var(--white); outline-offset: 6px; }
::selection { background: var(--white); color: var(--blue); }
.skip { position: fixed; top: -5rem; left: 1rem; z-index: 30; padding: .7rem 1rem; color: var(--dark); background: var(--white); }
.skip:focus { top: 1rem; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 18px 28px; background: var(--blue); }
.is-home .site-header { background: transparent; }
.site-nav { display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem, 2.8vw, 3rem); max-width: 100%; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { flex: none; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 400; text-decoration: none; transition: color .18s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"], .is-home .site-nav a { color: var(--white); }

h1, h2, p { margin-top: 0; }
h1, h2 { font-family: Grift, Arial, sans-serif; font-weight: 400; letter-spacing: -.065em; }
h1 a, h2 a { color: inherit; text-decoration: none; }
h1 a:hover, h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }

.home-page { display: grid; place-items: center; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 140px 28px 70px; background-image: linear-gradient(rgba(9,35,68,.72), rgba(9,35,68,.72)), url("hero.jpg"); background-size: cover; background-position: center 54%; text-align: center; }
.home-inner { width: 100%; margin-top: -2vh; }
.home-kicker { margin-bottom: 2.5rem; font-size: clamp(.85rem, 1.2vw, 1.05rem); }
.home-page h1 { max-width: 1200px; margin: 0 auto; font-size: clamp(2.9rem, 5vw, 5.5rem); line-height: 1.08; text-wrap: balance; }
.home-subtitle { max-width: 700px; margin: 2.7rem auto 0; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.6; }

.content-page { width: min(calc(100% - 96px), 800px); min-height: 100vh; margin: 0 auto; padding: clamp(145px, 13vw, 180px) 0 5rem; }
.content-page h1 { margin: 0 0 2.5rem; font-size: clamp(2.4rem, 3.8vw, 3.6rem); line-height: 1.08; overflow-wrap: anywhere; }
.copy p { margin: 0 0 1.6em; font-size: clamp(1.05rem, 1.45vw, 1.35rem); font-weight: 350; letter-spacing: -.015em; line-height: 1.65; hyphens: auto; }
.copy p:last-child { margin-bottom: 0; }
.inline-link { display: inline-block; margin-top: 2.7rem; padding-bottom: .3rem; border-bottom: 1px solid currentColor; font-size: clamp(1rem, 1.3vw, 1.2rem); text-decoration: none; }
.inline-link:hover { color: var(--muted); }
.date-line { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(242,242,242,.25); font-size: 1rem; }
.date-line span { color: var(--muted); }
.contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; font-size: clamp(1.2rem, 2vw, 1.8rem); }
.contact-details p { margin: 0; }
.content-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 7rem; padding-top: 1.5rem; border-top: 1px solid rgba(242,242,242,.2); color: var(--muted); font-size: .8rem; }
.content-footer a { text-decoration: none; }
.content-footer a:hover { color: var(--white); }

@media (max-width: 700px) {
  .site-header { min-height: 76px; padding: 14px 18px; }
  .site-nav { justify-content: flex-start; }
  .home-page { padding: 120px 25px 60px; }
  .home-kicker { margin-bottom: 1.8rem; }
  .home-page h1 { font-size: clamp(2.7rem, 10vw, 4.5rem); }
  .home-subtitle { margin-top: 2rem; }
  .content-page { width: calc(100% - 48px); padding-top: 130px; }
  .content-page h1 { font-size: clamp(2.2rem, 8vw, 3rem); margin-bottom: 2rem; }
  .copy p { font-size: clamp(1rem, 4vw, 1.2rem); line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) { .site-nav a { transition: none; } }
