:root {
  --school-teal: #006d7d;
  --school-gold: #a79250;
  --school-ink: #15383e;
  --school-bg: #f6f7f4;
  --school-line: #d5e1e1;
}
.school-header {
  background: #fff;
  border-block-start: 4px solid var(--school-gold);
  border-block-end: 1px solid var(--school-line);
}
.school-bar {
  max-width: 1040px;
  margin-inline: auto;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.school-brand { display: inline-flex; max-width: 100%; }
.school-brand img { display: block; width: min(250px, 65vw); height: auto; }
.school-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.school-nav a, .school-nav button {
  margin: 0;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--school-teal);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.school-nav a:hover, .school-nav button:hover { background: #eef5f5; }
.school-nav a[aria-current="page"] { background: #e5f0f1; border-color: var(--school-line); }
.school-header :focus-visible { outline: 3px solid var(--school-gold); outline-offset: 2px; }
.school-intro { margin-block-end: 22px; border-inline-start: 4px solid var(--school-gold); padding-inline-start: 14px; }
.school-intro h1 { font-size: clamp(23px, 5vw, 34px); line-height: 1.25; margin: 0; }
.school-intro p { margin: 5px 0 0; color: #52676b; }