@font-face {
  font-family: Figtree;
  src: url("assets/figtree-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --navy: #041e42;
  --ink: #122944;
  --blue: #005eb8;
  --signal: #0066ff;
  --muted: #495d73;
  --surface: #f5f7fa;
  --line: #d6dee8;
  --gutter: clamp(22px, 5vw, 76px);
  font-family: Figtree, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--surface);
}

*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; }
main { flex: 1; }
p, h1, h2 { margin: 0; }
a { color: inherit; }
a:focus-visible, #notices:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.container { width: min(1160px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.skip-link { position: absolute; z-index: 2; inset: 12px auto auto var(--gutter); padding: 12px 16px; background: white; color: var(--navy); }
.skip-link:not(:focus) { clip-path: inset(50%); }

.masthead { background: #fff; }
.masthead__inner, .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.masthead__inner { min-height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: var(--navy); font-size: 18px; font-weight: 700; text-decoration: none; }
.brand img { display: block; }
.footer a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #fff; border-bottom: 4px solid var(--signal); }
.hero__image {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 46%;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(110deg, #041e424a, #041e4205 70%), url("assets/aerial-roads.webp") center 55% / cover no-repeat;
}
.hero__inner { min-height: 310px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 42px; }
.hero__eyebrow { display: flex; align-items: center; gap: 11px; color: #d5e7ff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero__eyebrow::before { content: ""; width: 22px; height: 2px; background: #69a8ff; }
.hero h1 { margin-top: 14px; font-size: clamp(46px, 5.6vw, 82px); line-height: 1.01; font-weight: 700; letter-spacing: -.048em; }
.hero__intro { margin-top: 18px; color: #e2ebf7; font-size: clamp(16px, 1.55vw, 21px); line-height: 1.45; }

.notices { display: grid; grid-template-columns: 1fr 2.1fr; align-items: start; gap: clamp(32px, 6vw, 92px); padding-block: 62px 72px; }
.notices h2 { color: var(--navy); font-size: clamp(28px, 3.15vw, 42px); line-height: 1.07; font-weight: 700; letter-spacing: -.034em; }
.notices__intro { padding-top: 23px; }
.notices__intro p { max-width: 27ch; margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.notice-list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line); }
.notice-list li { border-block-end: 1px solid var(--line); }
.notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 17px; min-height: 97px; padding: 16px 2px 16px 16px; text-decoration: none; }
.notice:hover, .notice:focus-visible { background: #eaf1fa; }
.notice__icon { display: grid; place-items: center; width: 48px; height: 48px; background: #e7eef7; color: var(--blue); border-radius: 3px; font-size: 23px; }
.notice__label { display: grid; gap: 4px; line-height: 1.2; }
.notice__label strong { color: var(--navy); font-size: clamp(17px, 1.7vw, 23px); font-weight: 700; letter-spacing: -.018em; }
.notice__label > span { color: var(--muted); font-size: 14px; }
.notice__action { display: flex; align-items: center; gap: 9px; color: var(--blue); font-size: 14px; font-weight: 700; white-space: nowrap; }
.notice:hover .notice__action > span { text-decoration: underline; text-underline-offset: 4px; }

.footer { background: var(--navy); color: #d5e2f2; }
.footer__inner { min-height: 80px; }
.footer p { font-size: 14px; }
.footer a { color: #fff; }

@media (max-width: 850px) {
  .hero__inner { min-height: 278px; }
  .hero__image { inset-inline-start: 50%; }
  .notices { gap: 30px; padding-block: 50px 60px; }
  .notice { gap: 12px; padding-inline: 10px 2px; }
}

@media (max-width: 650px) {
  .masthead__inner { min-height: 70px; }
  .brand { gap: 9px; font-size: 16px; }
  .brand img { width: 43px; height: 43px; }
  .hero { display: flex; flex-direction: column-reverse; }
  .hero__inner { min-height: 0; padding-block: 33px 30px; }
  .hero__image { position: static; height: 68px; clip-path: none; background-position: center 51%; }
  .hero__eyebrow { gap: 8px; font-size: 10px; }
  .hero__eyebrow::before { width: 17px; }
  .hero h1 { margin-top: 11px; }
  .hero__intro { margin-top: 11px; }
  .notices { grid-template-columns: 1fr; gap: 21px; padding-block: 28px 38px; }
  .notices__intro { padding: 0; }
  .notices__intro p { margin-top: 7px; max-width: none; font-size: 15px; }
  .notice { min-height: 80px; padding: 12px 1px; }
  .notice__icon { width: 38px; height: 42px; font-size: 20px; }
  .notice__label { gap: 3px; }
  .notice__label > span, .notice__action { font-size: 13px; }
  .notice__action { gap: 4px; }
  .notice__verb { display: none; }
  .footer__inner { flex-wrap: wrap; column-gap: 20px; row-gap: 0; padding-block: 12px; }
  .footer p, .footer a { font-size: 13px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 42px; }
  .hero__intro { font-size: 15px; }
  .notice { gap: 8px; }
  .notice__icon { width: 34px; }
}