/* ============================================ */
/*           Principals Message                 */
/* ============================================ */

/* Mobile - 360px */
@media only screen and (min-width: 0px) {
  #principals-message {
    background: var(--white);
    padding: var(--sectionPadding);
  }

  #principals-message .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  #principals-message .cs-message-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #principals-message .cs-message-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  #principals-message .cs-quote-mark {
    font-family: Georgia, serif;
    font-size: 4.5rem;
    line-height: 0.6;
    color: var(--signingGold);
    opacity: 0.3;
    flex-shrink: 0;
  }

  #principals-message .cs-message-content {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  #principals-message .cs-message-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #principals-message .cs-topper {
    font-family: var(--headerFont);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signingGold);
    display: block;
    margin: 0;
  }

  #principals-message .cs-title {
    font-family: var(--headerFont);
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
    font-weight: 900;
    line-height: 1.2;
    color: var(--navy);
    margin: 0;
  }

  #principals-message .cs-message-body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  #principals-message .cs-text {
    font-family: var(--bodyFont);
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--charcoal);
    margin: 0;
  }

  #principals-message .cs-message-divider {
    height: 0.5px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0.25rem 0;
  }

  #principals-message .cs-signature {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  #principals-message .cs-sig-name {
    font-family: var(--headerFont);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
  }

  #principals-message .cs-sig-role {
    font-family: var(--bodyFont);
    font-size: 0.75rem;
    color: var(--silver);
    margin: 0;
  }

  #principals-message .cs-message-right {
    width: 100%;
  }

  #principals-message .cs-principal-photo {
    max-width: 16.25rem;
    margin: 0 auto;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  #principals-message .cs-principal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #principals-message .cs-container {
    padding: 0 2.5rem;
  }

  #principals-message .cs-message-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }

  #principals-message .cs-message-left {
    flex: 1;
    min-width: 0;
  }

  #principals-message .cs-message-right {
    width: 17.5rem;
    flex-shrink: 0;
  }

  #principals-message .cs-principal-photo {
    position: sticky;
    top: calc(var(--nav-offset, 7rem) + 2rem);
  }

  #principals-message .cs-principal-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #principals-message {
    padding: 2rem clamp(2rem, 4vw, 3.5rem) clamp(3rem, 5vw, 4.5rem);
  }

  #principals-message .cs-container {
    max-width: 100%;
    padding: 0;
  }

  #principals-message .cs-message-content {
    gap: 3.5rem;
  }

  #principals-message .cs-message-right {
    width: 20rem;
  }

  #principals-message .cs-principal-photo {
    max-width: 480px;
  }
}

/* Mobile only — 480px and below */
@media only screen and (max-width: 30rem) {
  #principals-message .cs-container {
    padding: 0 1rem;
  }

  #principals-message .cs-quote-mark {
    font-size: 3.25rem;
  }
}

/* ============================================ */
/*             Principals Video                 */
/* ============================================ */

/* Mobile - 360px */
@media only screen and (min-width: 0px) {
  #principals-video {
    padding: var(--sectionPadding);
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #principals-video .cs-container {
    width: 100%;
    max-width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }

  #principals-video .cs-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
  }

  #principals-video .cs-topper {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-align: center;
  }

  #principals-video .cs-topper-line {
    display: block;
    width: 1.5rem;
    height: 0.09375rem;
    background: var(--signingGold);
    flex-shrink: 0;
  }

  #principals-video .cs-topper-text {
    font-size: var(--topperFontSize);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signingGold);
  }

  #principals-video .cs-subtitle {
    font-family: var(--bodyFont);
    font-size: 0.8125rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
    margin: 0;
  }

  #principals-video .cs-video-wrap {
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--navy);
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    aspect-ratio: 16 / 9;
  }

  #principals-video .cs-video-wrap iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
  }

  #principals-video .cs-caption {
    font-family: var(--bodyFont);
    font-size: 0.6875rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.25);
    text-align: center;
    margin: 0;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #principals-video {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  #principals-video .cs-container {
    max-width: 47.5rem;
    margin: 0 auto;
  }
}

/* ============================================ */
/*         Principals At A Glance               */
/* ============================================ */

/* Mobile - 360px */
@media only screen and (min-width: 0px) {
  #principal-glance {
    padding: var(--sectionPadding);
    background: #f7f7f6;
  }

  #principal-glance .cs-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 1rem;
  }

  #principal-glance .cs-card {
    background: var(--white);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.875rem;
    overflow: hidden;
  }

  #principal-glance .cs-card-top {
    background: #fcfcfc;
    padding: 1.25rem 1.5rem;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  #principal-glance .cs-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  #principal-glance .cs-avatar-initials {
    font-family: var(--headerFont);
    font-size: 1rem;
    font-weight: 900;
    color: var(--signingGold);
  }

  #principal-glance .cs-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
  }

  #principal-glance .cs-topper {
    font-family: var(--headerFont);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signingGold);
    display: block;
    margin: 0;
  }

  #principal-glance .cs-name {
    font-family: var(--headerFont);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
  }

  #principal-glance .cs-role {
    font-family: var(--bodyFont);
    font-size: 0.6875rem;
    color: var(--silver);
    margin: 0;
  }

  #principal-glance .cs-card-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #principal-glance .cs-text {
    font-family: var(--bodyFont);
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--charcoal);
    margin: 0;
    max-width: 80rem;
  }

  #principal-glance .cs-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #principal-glance .cs-pill {
    font-family: var(--headerFont);
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(15, 47, 91, 0.06);
    border: 0.5px solid rgba(15, 47, 91, 0.12);
    border-radius: 100px;
    padding: 0.25rem 0.75rem;
    color: var(--navy);
    display: inline-block;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #principal-glance .cs-container {
    padding: 0 2.5rem;
  }

  #principal-glance .cs-card-top {
    padding: 1.375rem 1.75rem;
  }

  #principal-glance .cs-card-body {
    padding: 1.375rem 1.75rem;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #principal-glance .cs-container {
    padding: 0 6vw;
  }

  #principal-glance .cs-card-top {
    padding: 1.5rem 2rem;
  }

  #principal-glance .cs-card-body {
    padding: 1.5rem 2rem;
  }
}

/* Mobile only — 480px and below */
@media only screen and (max-width: 30rem) {
  #principal-glance .cs-container {
    padding: 0 1rem;
  }

  #principal-glance .cs-card-top {
    padding: 1rem;
  }

  #principal-glance .cs-card-body {
    padding: 1rem;
  }
}


/* ============================================ */
/*               Core Value                     */
/* ============================================ */

/* Mobile - 360px */
@media only screen and (min-width: 0px) {
  #core-values {
    padding: var(--sectionPadding);
    background: var(--white);
  }

  #core-values .cs-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  #core-values .cs-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #core-values .cs-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  #core-values .cs-topper {
    font-family: var(--headerFont);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signingGold);
    display: block;
    margin: 0;
  }

  #core-values .cs-title {
    font-family: var(--headerFont);
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2;
    color: var(--navy);
    margin: 0;
  }

  #core-values .cs-title em {
    font-style: normal;
    color: var(--signingGold);
  }

  #core-values .cs-text {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: 1.7;
    color: var(--silver);
    margin: 0;
    max-width: 30rem;
  }

  #core-values .cs-card-group {
    width: 100%;
    background: var(--white);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #core-values .cs-card {
    padding: 1.5rem 1.25rem;
    border-right: 0.5px solid rgba(0, 0, 0, 0.07);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #core-values .cs-card:nth-child(even) {
    border-right: none;
  }

  #core-values .cs-card:nth-last-child(-n+2) {
    border-bottom: none;
  }

  #core-values .cs-card-num {
    font-family: var(--headerFont);
    font-size: clamp(2rem, 6vw, 2.4rem);
    font-weight: 900;
    color: rgba(212, 168, 67, 0.18);
    line-height: 1;
    margin: 0;
  }

  #core-values .cs-card-title {
    font-family: var(--headerFont);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin: 0;
  }

  #core-values .cs-card-text {
    font-family: var(--bodyFont);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--silver);
    line-height: 1.6;
    margin: 0;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #core-values .cs-container {
    padding: 0 2.5rem;
  }

  #core-values .cs-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
  }

  #core-values .cs-text {
    text-align: right;
    padding-bottom: 0.25rem;
  }

  #core-values .cs-card-group {
    grid-template-columns: repeat(4, 1fr);
  }

  #core-values .cs-card {
    border-bottom: none;
  }

  #core-values .cs-card:nth-child(even) {
    border-right: 0.5px solid rgba(0, 0, 0, 0.07);
  }

  #core-values .cs-card:last-child {
    border-right: none;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #core-values .cs-container {
    padding: 0 6vw;
  }

  #core-values .cs-card {
    padding: 1.75rem 1.5rem;
  }
}

/* Mobile only — 480px and below */
@media only screen and (max-width: 30rem) {
  #core-values .cs-container {
    padding: 0 1rem;
  }

  #core-values .cs-card {
    padding: 1.25rem 1rem;
  }
}