:root {
  --red: #e30613;
  --red-dark: #a8000a;
  --yellow: #ffd400;
  --ink: #191919;
  --muted: #60646c;
  --paper: #ffffff;
  --soft: #f4f5f7;
  --line: #e1e4e8;
  --shadow:
    0 16px 40px
    rgba(25, 25, 25, 0.12);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  color: var(--ink);
  background: var(--soft);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  line-height: 1.65;
}


a {
  color: inherit;
}


img {
  display: block;
  max-width: 100%;
}


button,
input {
  font: inherit;
}


.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* ================================================
   HEADER
================================================= */

.siteHeader {
  position: relative;
  z-index: 20;
  box-shadow:
    0 3px 14px
    rgba(0, 0, 0, 0.18);
}


.brandHeader {
  min-height: 122px;
  padding:
    14px
    clamp(22px, 5vw, 88px);

  display: grid;

  grid-template-columns:
    100px
    1fr
    auto;

  align-items: center;
  gap: 22px;

  color: #ffffff;

  background:
    linear-gradient(
      110deg,
      var(--red-dark),
      var(--red) 58%,
      #ef101d
    );
}


.crestLink {
  width: 90px;
}


.schoolCrest {
  width: 100%;
  max-height: 98px;
  object-fit: contain;
}


.brandText h1 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2rem, 4vw, 3.6rem);

  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}


.brandEstablished {
  display: flex;
  align-items: center;
  gap: 12px;

  max-width: 480px;
  margin-top: 7px;
}


.brandEstablished span {
  height: 2px;
  flex: 1;
  background: var(--yellow);
}


.brandEstablished p {
  margin: 0;
  color: var(--yellow);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}


.brandMotto {
  margin: 5px 0 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}


.legacyText {
  margin: 0;
  text-align: right;
  color: var(--yellow);

  font-family:
    Georgia,
    serif;

  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.2;
}


.legacyText span {
  font-size: 1.55rem;
}



/* ================================================
   MAIN NAVIGATION
================================================= */

.mainNavigation {
  min-height: 52px;

  padding:
    0
    clamp(22px, 5vw, 88px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  background: var(--yellow);
}


.navigationLinks {
  display: flex;
  align-items: stretch;

  gap:
    clamp(12px, 1.65vw, 28px);
}


.navigationLinks a {
  display: grid;
  place-items: center;

  min-height: 52px;

  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 800;

  border-bottom:
    3px solid transparent;
}


.navigationLinks a:hover,
.navigationLinks a:focus-visible {
  color: var(--red-dark);
  border-bottom-color: var(--red);
}


.registryButton,
.contactButton {
  border: 0;
  border-radius: 7px;

  background: var(--red);
  color: #ffffff;

  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}


.registryButton {
  padding: 10px 17px;
  white-space: nowrap;
}


.mobileMenuButton {
  display: none;

  width: 44px;
  height: 40px;
  padding: 9px;

  border: 0;
  border-radius: 5px;
  background: transparent;
}


.mobileMenuButton span:not(.srOnly) {
  display: block;

  height: 3px;
  margin: 4px 0;

  background: var(--ink);
}



/* ================================================
   PAGE BANNER
================================================= */

.pageBanner {
  min-height: 220px;

  padding:
    42px
    clamp(22px, 7vw, 120px);

  display: flex;
  align-items: end;

  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      rgba(20, 20, 20, 0.92),
      rgba(168, 0, 10, 0.83)
    ),
    linear-gradient(
      135deg,
      #3c0004,
      #e30613
    );

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


.pageBanner div {
  width: min(1180px, 100%);
  margin: 0 auto;
}


.pageBanner p,
.sectionLabel {
  margin: 0 0 6px;

  color: var(--yellow);

  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


.pageBanner h2 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.25rem, 5vw, 4.8rem);

  line-height: 1.05;
}


.pageBanner h2 span {
  color: var(--yellow);
}



/* ================================================
   PRINCIPAL MESSAGE
================================================= */

main {
  overflow: hidden;
}


.principalSection,
.directorySection {
  width:
    min(
      1320px,
      calc(100% - 40px)
    );

  margin-inline: auto;
}


.principalSection {
  margin-top: 64px;

  display: grid;

  grid-template-columns:
    minmax(280px, 410px)
    1fr;

  gap:
    clamp(34px, 5vw, 72px);

  align-items: start;
}


.principalPhotoWrap {
  position: sticky;
  top: 24px;

  overflow: hidden;

  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}


.principalPhoto {
  width: 100%;
  aspect-ratio: 4 / 5;

  object-fit: cover;
  object-position: center 28%;
}


.principalIdentity {
  position: relative;

  padding: 22px 24px;

  color: #ffffff;
  background: var(--red);
}


.principalIdentity::before {
  content: "";

  position: absolute;
  top: 0;
  left: 24px;

  width: 60px;
  height: 5px;

  background: var(--yellow);
}


.principalIdentity strong,
.principalIdentity span {
  display: block;
}


.principalIdentity strong {
  font-family:
    Georgia,
    serif;

  font-size: 1.45rem;
}


.principalIdentity span {
  color: #fff6bd;
  font-weight: 700;
}


.principalMessage {
  padding: 6px 0 30px;
}


.principalMessage h2,
.directoryHeading h2 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2rem, 3.6vw, 3.5rem);

  line-height: 1.12;
}


.goldRule {
  width: 74px;
  height: 5px;

  margin: 20px 0 30px;

  background: var(--yellow);
}


.principalMessage
> p:not(.sectionLabel) {
  margin: 0 0 20px;

  color: #363a40;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      1.05rem,
      1.35vw,
      1.25rem
    );
}


.principalSignature {
  margin-top: 34px;

  padding:
    22px
    0
    0
    24px;

  border-left:
    5px solid var(--red);
}


.principalSignature strong,
.principalSignature span,
.principalSignature small {
  display: block;
}


.principalSignature strong {
  font-family:
    Georgia,
    serif;

  font-size: 1.4rem;
}


.principalSignature span {
  color: var(--red);
  font-weight: 800;
}


.principalSignature small {
  margin-top: 4px;
  color: var(--muted);
}



/* ================================================
   SCHOOL DIRECTORY
================================================= */

.directorySection {
  margin-top: 68px;
  margin-bottom: 80px;

  padding:
    clamp(26px, 4vw, 52px);

  border-top:
    7px solid var(--red);

  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}


.directoryHeading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}


.directorySearch {
  display: flex;
  width: min(570px, 100%);
}


.directorySearch input {
  width: 100%;

  padding: 13px 16px;

  border:
    1px solid var(--line);

  border-radius:
    7px 0 0 7px;

  background: #f1f2f4;
  color: #8a8f98;
}


.directorySearch button {
  padding: 13px 24px;

  border: 0;

  border-radius:
    0 7px 7px 0;

  background: #d5d8dd;
  color: #7a7e85;

  font-weight: 800;
}


.directoryComingSoon {
  margin-top: 32px;

  padding:
    clamp(28px, 5vw, 54px);

  display: flex;
  align-items: center;
  justify-content: center;

  gap:
    clamp(25px, 5vw, 60px);

  border:
    1px solid var(--line);

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #fafafa,
      #f1f2f4
    );

  text-align: left;
}


.directoryComingSoon img {
  width: 125px;
  max-height: 138px;

  object-fit: contain;
  filter: grayscale(0.1);
}


.directoryComingSoon h3 {
  margin: 0 0 7px;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(1.5rem, 2.5vw, 2.2rem);
}


.directoryComingSoon p {
  max-width: 650px;
  margin: 0 0 22px;
  color: var(--muted);
}


.contactButton {
  display: inline-block;
  padding: 11px 18px;
}


.contactButton:hover,
.contactButton:focus-visible {
  background: var(--red-dark);
}


.schoolEmail {
  display: block;
  width: fit-content;

  margin-top: 12px;

  color: var(--red-dark);
  font-weight: 800;
}



/* ================================================
   FOOTER
================================================= */

.siteFooter {
  padding:
    27px
    clamp(22px, 5vw, 88px);

  display: grid;

  grid-template-columns:
    1fr
    auto
    auto;

  align-items: center;
  gap: 35px;

  color: #ffffff;
  background: #17191d;
}


.siteFooter > div {
  display: flex;
  align-items: center;
  gap: 15px;
}


.siteFooter img {
  width: 48px;
  height: 58px;
  object-fit: contain;
}


.siteFooter strong,
.siteFooter span {
  display: block;
}


.siteFooter strong {
  font-family:
    Georgia,
    serif;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}


.siteFooter span,
.siteFooter p {
  margin: 0;
  color: #b9bcc2;
  font-size: 0.78rem;
}


.siteFooter nav {
  display: flex;
  gap: 22px;
}


.siteFooter a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.86rem;
}


.siteFooter a:hover {
  color: var(--yellow);
}



/* ================================================
   BACK TO TOP
================================================= */

.backToTop {
  position: fixed;
  right: 22px;
  bottom: 22px;

  width: 45px;
  height: 45px;

  border: 0;
  border-radius: 50%;

  background: var(--red);
  color: #ffffff;

  font-size: 1.3rem;

  box-shadow:
    0 8px 20px
    rgba(0, 0, 0, 0.2);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(10px);

  transition:
    0.2s ease;
}


.backToTop.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}



/* ================================================
   TABLET
================================================= */

@media (max-width: 1000px) {

  .legacyText {
    display: none;
  }


  .brandHeader {
    grid-template-columns:
      78px
      1fr;
  }


  .crestLink {
    width: 72px;
  }


  .mobileMenuButton {
    display: block;
  }


  .mainNavigation {
    position: relative;
    min-height: 56px;
  }


  .navigationLinks {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    display: none;

    padding:
      12px
      22px
      20px;

    background: var(--yellow);

    box-shadow:
      0 12px 20px
      rgba(0, 0, 0, 0.18);
  }


  .navigationLinks.open {
    display: grid;
  }


  .navigationLinks a {
    justify-content: start;
    min-height: 42px;
  }


  .principalSection {
    grid-template-columns:
      320px
      1fr;

    gap: 38px;
  }


  .directoryHeading {
    align-items: stretch;
    flex-direction: column;
  }


  .directorySearch {
    width: 100%;
  }


  .siteFooter {
    grid-template-columns:
      1fr
      auto;
  }


  .siteFooter p {
    grid-column: 1 / -1;
  }

}



/* ================================================
   MOBILE
================================================= */

@media (max-width: 720px) {

  .brandHeader {
    min-height: 94px;

    padding:
      12px
      18px;

    grid-template-columns:
      62px
      1fr;

    gap: 13px;
  }


  .crestLink {
    width: 60px;
  }


  .schoolCrest {
    max-height: 68px;
  }


  .brandText h1 {
    font-size:
      clamp(
        1.45rem,
        7vw,
        2.15rem
      );
  }


  .brandEstablished {
    max-width: 300px;
  }


  .brandMotto {
    display: none;
  }


  .mainNavigation {
    padding: 0 16px;
  }


  .registryButton {
    padding: 9px 12px;
    font-size: 0.78rem;
  }


  .pageBanner {
    min-height: 190px;
    padding: 32px 20px;
  }


  .pageBanner h2 span {
    display: block;
  }


  .principalSection {
    width:
      min(
        100% - 28px,
        620px
      );

    margin-top: 38px;
    grid-template-columns: 1fr;
  }


  .principalPhotoWrap {
    position: static;

    width: 100%;
    max-width: 420px;

    margin-inline: auto;
  }


  .principalMessage h2 {
    font-size: 2.25rem;
  }


  .principalMessage
  > p:not(.sectionLabel) {
    font-size: 1.05rem;
  }


  .directorySection {
    width: calc(100% - 28px);

    margin-top: 38px;
    margin-bottom: 45px;
  }


  .directorySearch button {
    padding-inline: 14px;
  }


  .directoryComingSoon {
    flex-direction: column;
    text-align: center;
  }


  .schoolEmail {
    margin-inline: auto;
    overflow-wrap: anywhere;
  }


  .siteFooter {
    grid-template-columns: 1fr;
    text-align: center;
  }


  .siteFooter > div,
  .siteFooter nav {
    justify-content: center;
  }


  .siteFooter p {
    grid-column: auto;
  }

}



/* ================================================
   REDUCED MOTION

================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    transition-duration:
      0.01ms !important;
  }

}
/* =========================================================
   RESPONSIVE FIXES — LAPTOP, TABLET, AND MOBILE
   Paste at the very bottom of the CSS file
========================================================= */


/* =========================================================
   SMALL AND MEDIUM LAPTOPS
========================================================= */

@media (min-width: 1001px) and (max-width: 1180px) {

  .legacyText {
    display: none;
  }

  .brandHeader {
    grid-template-columns: 78px minmax(0, 1fr);
    padding-inline: clamp(22px, 4vw, 48px);
  }

  .crestLink {
    width: 72px;
  }

  .brandText {
    min-width: 0;
  }

  .brandText h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
  }

  .mainNavigation {
    position: relative;
    min-height: 56px;
    padding-inline: clamp(22px, 4vw, 48px);
  }

  .mobileMenuButton {
    display: block;
  }

  .navigationLinks {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 100;

    display: none;

    padding: 12px 22px 20px;

    background: var(--yellow);

    box-shadow:
      0 12px 20px
      rgba(0, 0, 0, 0.18);
  }

  .navigationLinks.open {
    display: grid;
  }

  .navigationLinks a {
    justify-content: start;
    min-height: 42px;
  }

  .principalSection {
    grid-template-columns:
      minmax(270px, 320px)
      minmax(0, 1fr);

    gap: clamp(30px, 4vw, 42px);
  }

  .directoryHeading {
    align-items: stretch;
    flex-direction: column;
  }

  .directorySearch {
    width: 100%;
  }

}


/* =========================================================
   SMALL LAPTOPS AND TABLETS
========================================================= */

@media (max-width: 900px) {

  .brandHeader {
    min-height: 106px;
    padding-inline: clamp(18px, 4vw, 36px);
  }

  .brandText {
    min-width: 0;
  }

  .brandText h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
  }

  .mainNavigation {
    padding-inline: clamp(16px, 4vw, 30px);
  }

  .principalSection {
    width: min(760px, calc(100% - 36px));

    grid-template-columns: 1fr;
    gap: 34px;
  }

  .principalPhotoWrap {
    position: static;

    width: min(100%, 480px);
    margin-inline: auto;
  }

  .principalMessage {
    padding-top: 0;
  }

  .directorySection {
    width: calc(100% - 36px);
  }

}


/* =========================================================
   MOBILE PHONES
========================================================= */

@media (max-width: 720px) {

  .navigationLinks {
    z-index: 100;
  }

  .principalSection,
  .directorySection {
    width: calc(100% - 28px);
  }

  .principalPhotoWrap {
    width: 100%;
    max-width: 420px;
  }

  .principalPhoto {
    width: 100%;
    object-fit: cover;
    object-position: center 28%;
  }

  .directoryHeading {
    align-items: stretch;
    flex-direction: column;
  }

  .directorySearch {
    width: 100%;
  }

  .siteFooter nav {
    flex-wrap: wrap;
  }

}


/* =========================================================
   SMALL MOBILE PHONES
========================================================= */

@media (max-width: 480px) {

  .brandHeader {
    min-height: 82px;
    padding: 10px 12px;

    grid-template-columns:
      52px
      minmax(0, 1fr);

    gap: 10px;
  }

  .crestLink {
    width: 50px;
  }

  .schoolCrest {
    max-height: 58px;
  }

  .brandText {
    min-width: 0;
  }

  .brandText h1 {
    font-size: clamp(1.22rem, 6.4vw, 1.75rem);
    overflow-wrap: anywhere;
  }

  .brandEstablished {
    gap: 7px;
  }

  .brandEstablished p {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  .mainNavigation {
    min-height: 54px;
    padding-inline: 12px;
    gap: 8px;
  }

  .navigationLinks {
    max-height: calc(100dvh - 136px);

    padding:
      10px
      16px
      18px;

    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .registryButton {
    padding: 8px 10px;
    font-size: 0.72rem;
  }

  .pageBanner {
    min-height: 165px;
    padding: 26px 16px;
  }

  .pageBanner h2 {
    font-size: clamp(1.9rem, 10vw, 2.7rem);
  }

  .principalSection,
  .directorySection {
    width: calc(100% - 22px);
  }

  .principalSection {
    margin-top: 28px;
    gap: 26px;
  }

  .principalPhotoWrap {
    border-radius: 10px;
  }

  .principalIdentity {
    padding: 18px;
  }

  .principalMessage h2,
  .directoryHeading h2 {
    font-size: clamp(1.8rem, 9vw, 2.25rem);
  }

  .goldRule {
    margin: 16px 0 22px;
  }

  .principalMessage > p:not(.sectionLabel) {
    font-size: 1rem;
  }

  .principalSignature {
    padding-left: 16px;
  }

  .directorySection {
    padding: 22px 16px;
  }

  .directorySearch {
    display: grid;
    gap: 8px;
  }

  .directorySearch input,
  .directorySearch button {
    width: 100%;
    min-height: 46px;
    border-radius: 7px;
  }

  .directoryComingSoon {
    margin-top: 24px;
    padding: 24px 16px;

    flex-direction: column;
    text-align: center;
  }

  .directoryComingSoon img {
    width: 96px;
  }

  .schoolEmail {
    margin-inline: auto;
    overflow-wrap: anywhere;
  }

  .siteFooter {
    padding: 24px 16px 78px;
    gap: 22px;
  }

  .siteFooter nav {
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  .backToTop {
    right: 14px;
    bottom: 14px;
  }

}
/* =====================================================
   ABOUT US AND ACADEMICS DROPDOWNS
===================================================== */

.navDropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}

.navigationLinks .navDropdownButton {
  display: flex;
  align-items: center;
  gap: 6px;
}

.navDropdownButton span {
  display: inline-block;
  font-size: 14px;
  transition: transform 0.25s ease;
}

.navDropdown:hover .navDropdownButton span,
.navDropdown:focus-within .navDropdownButton span {
  transform: rotate(180deg);
}

.navDropdownMenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;

  min-width: 210px;
  padding: 8px;

  background: #ffffff;
  border: 1px solid rgba(215, 25, 32, 0.18);
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

.navDropdown:hover .navDropdownMenu,
.navDropdown:focus-within .navDropdownMenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.navigationLinks .navDropdownMenu a {
  display: block;
  width: 100%;
  padding: 11px 14px;

  color: #7b1113;
  background: transparent;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;

  border-radius: 7px;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    padding-left 0.2s ease;
}

.navigationLinks .navDropdownMenu a:hover,
.navigationLinks .navDropdownMenu a:focus-visible {
  color: #ffd400;
  background: #e30613;
  padding-left: 18px;
  outline: none;
}


/* MOBILE */

@media (max-width: 850px) {

  .navDropdown {
    display: block;
    width: 100%;
  }

  .navigationLinks .navDropdownButton {
    width: 100%;
    justify-content: space-between;
  }

  .navDropdownMenu {
    position: static;
    display: none;

    width: 100%;
    min-width: 0;
    margin-top: 4px;
    padding: 6px;

    border-radius: 8px;
    box-shadow: none;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .navDropdown:hover .navDropdownMenu,
  .navDropdown:focus-within .navDropdownMenu {
    display: block;
  }

  .navigationLinks .navDropdownMenu a {
    padding: 11px 18px;
  }
}
/* =========================================================
   UPDATED DIRECTORY GATEWAY
========================================================= */

.directoryGatewayLabel {
  margin: 0 0 7px;
  color: #e30613;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.directorySlogan {
  max-width: 650px;
  margin-bottom: 20px;
  color: #5f646d;
  line-height: 1.65;
}

.directoryMenuButtons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.directoryMenuButtons .contactButton,
.leadershipButton {
  min-height: 46px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 7px;
  font-weight: 800;
  text-decoration: none;
}

.leadershipButton {
  color: #a90009;
  background: #ffffff;
  border: 2px solid #e30613;
}

.leadershipButton:hover {
  color: #ffffff;
  background: #e30613;
}

.directoryAccessMessage {
  margin: 17px 0 0;
  color: #727780;
  font-size: 0.82rem;
}

@media (max-width: 650px) {

  .directoryMenuButtons {
    flex-direction: column;
    align-items: stretch;
  }

  .directoryMenuButtons .contactButton,
  .leadershipButton {
    width: 100%;
  }

}
.contactListModal {
  width: min(900px, 94vw);
  height: min(760px, 90vh);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
}

.contactListModal::backdrop {
  background: rgba(20, 8, 8, 0.75);
  backdrop-filter: blur(4px);
}

.contactListHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  color: #ffffff;
  background: #e30613;
}

.contactListHeader small {
  color: #ffd400;
  font-weight: 700;
  text-transform: uppercase;
}

.contactListHeader h2 {
  margin: 3px 0 0;
}

.contactListClose {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid #ffd400;
  border-radius: 50%;
  color: #ffffff;
  background: #8b0000;
  font-size: 1.8rem;
  cursor: pointer;
}

.contactListActions {
  display: flex;
  gap: 12px;
  padding: 12px 22px;
  background: #fff8d7;
}

.contactListActions a {
  padding: 10px 16px;
  border-radius: 8px;
  color: #ffffff;
  background: #e30613;
  font-weight: 700;
  text-decoration: none;
}

.contactListViewer {
  width: 100%;
  height: calc(100% - 138px);
  border: 0;
}

@media (max-width: 600px) {
  .contactListModal {
    width: 94vw;
    height: 84vh;
  }

  .contactListActions {
    flex-wrap: wrap;
  }

  .contactListActions a {
    flex: 1;
    text-align: center;
  }
}
/* =========================================
   NAV ACTION BUTTONS
========================================= */

.navActionButtons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.staffPortalButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 8px 14px;

  border-radius: 6px;

  background: #8b1018;
  color: #ffffff !important;

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;

  transition:
    background .2s ease,
    transform .2s ease;
}

.staffPortalButton:hover {
  background: #650b12;
  transform: translateY(-1px);
}


/* MOBILE */

@media (max-width: 800px) {

  .navActionButtons {
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
  }

  .staffPortalButton,
  .registryButton {
    flex: 1;
    min-height: 40px;
  }

}