:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, sans-serif;
  color: #f6f4ed;
  background: #111d2b;
  --muted: #b3c0ce;
  --line: #344457;
  --gold: #efce74;
  --teal: #a1e0d4;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; border-radius: 4px; }
.wrap { width: min(100% - 48px, 1040px); margin-inline: auto; }
.header, .footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.header { min-height: 82px; border-bottom: 1px solid var(--line); }
.brand, nav a { display: inline-flex; align-items: center; text-decoration: none; }
.brand { gap: 10px; font-weight: 750; white-space: nowrap; }
nav { display: flex; gap: clamp(12px, 3vw, 30px); }
nav a { min-height: 44px; color: var(--muted); font-size: .93rem; }
nav a:hover { color: var(--gold); }
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(42px, 8vw, 76px) 0 48px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--gold); font-size: .76rem; font-weight: 750; letter-spacing: .16em; }
.eyebrow span { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; }
h1 { font-size: clamp(3.2rem, 9vw, 6.7rem); line-height: .95; letter-spacing: -.075em; margin: 0; }
h1 em { color: var(--gold); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.07em; }
.intro { max-width: 35ch; color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin: 22px 0 0; }
.blueprint { position: absolute; z-index: -1; width: min(43%, 390px); right: 0; top: 50%; transform: translateY(-50%); stroke: #51637b; }
.four { stroke: #efce74; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .68; }
h2 { font-size: 1.17rem; margin: 0 0 14px; }
.subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.subject {
  --accent: var(--gold);
  --wash: #efce7412;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  min-height: 182px;
  padding: 21px 23px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 16px;
  background: radial-gradient(ellipse at top left, var(--wash), transparent 70%), #19283a;
  text-decoration: none;
  transition: border-color .16s, transform .16s;
}
.subject.projects { --accent: var(--teal); --wash: #a1e0d414; }
.subject:hover { border-color: var(--accent); transform: translateY(-2px); }
.subject:focus-visible { border-radius: 16px; }
.symbol {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-self: start;
  width: 62px;
  height: 62px;
  border-radius: 15px;
  background: var(--accent);
  color: #111d2b;
}
.symbol svg { width: 39px; height: 39px; }
.subject-copy { min-width: 0; display: grid; gap: 4px; }
.subject-copy strong { font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.12; }
.subject-copy span { color: var(--muted); font-size: .92rem; }
.subject-action { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: .88rem; font-weight: 700; }
.subject-action span { font-size: 1.2rem; line-height: 1; }
.contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin: 48px 0 36px; padding: 22px 0; border-top: 1px solid var(--line); }
.contact h2 { margin-bottom: 5px; }
.contact p { color: var(--muted); margin: 0; }
.contact a { color: var(--gold); text-underline-offset: 4px; overflow-wrap: anywhere; }
.footer { border-top: 1px solid var(--line); padding: 19px 0 24px; font-size: .82rem; color: var(--muted); }
@media (max-width: 620px) {
  .wrap { width: calc(100% - 32px); }
  .header { min-height: 67px; gap: 9px; flex-wrap: wrap; }
  .brand img { width: 31px; height: 31px; }
  .brand { font-size: .92rem; }
  nav a { font-size: .82rem; }
  .hero { padding-bottom: 35px; }
  .blueprint { width: 54%; right: -6%; top: 37%; opacity: .31; }
  .subjects { grid-template-columns: 1fr; }
  .subject { min-height: 158px; padding: 16px; }
  .symbol { width: 52px; height: 52px; }
  .symbol svg { width: 33px; height: 33px; }
  .contact { margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) { .subject { transition: none; } .subject:hover { transform: none; } }