/* 2026 refresh: Our Mission (spec 3.4 rows 1-11). Markup: src/webflow/pages/about/mission.html + src/lib/templates/mission.js,
   behaviour: src/lib/templates/mission-ui.js. Quote, journal and newsletter are the shared partials (styled in refresh.css). */

.mission_container { max-width: 76rem; margin: 0 auto; }
.mission-intro_heading,
.section_mission-letter h2,
.mission-stats_heading,
.mission-team_heading { text-wrap: balance; }

/* 1 Video hero: poster and play button over the Wistia player, 768px under the bar */
.section_mission-video { margin-top: var(--nav-h); background-color: var(--_style-guide-2-0---outset-soft-black); }
.mission-video_component { position: relative; width: 100%; max-height: 48rem; aspect-ratio: 1440 / 768; overflow: hidden; }
.mission-video_component:focus { outline: none; } /* focused only to hand keyboard users on to the player */
.mission-video_player { position: absolute; inset: 0; width: 100%; height: 100%; }
.mission-video_poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.mission-video_poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mission-video_component.is-playing .mission-video_poster { display: none; }
.mission-video_play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(243, 247, 247, .8);
  color: var(--_style-guide-2-0---outset-soft-black);
  cursor: pointer;
  transition: background-color .2s, transform .2s;
  animation: mission-fade-in .3s ease-out;
}
.mission-video_play svg { width: 100%; height: 100%; }
.mission-video_play:hover { background-color: var(--_style-guide-2-0---outset-off-white); transform: scale(1.05); }
.mission-video_play:focus-visible { outline: 3px solid var(--_style-guide-2-0---outset-off-white); outline-offset: 4px; }
@keyframes mission-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 2 Intro band: Sand, breadcrumb + H1 + letter excerpt, staggered photo collage */
.section_mission-intro { overflow: hidden; padding: 3rem 0 10.5rem; background-color: var(--_style-guide-2-0---outset-sand); color: var(--_style-guide-2-0---outset-soft-black); }
.mission-intro_component { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30.625rem); column-gap: 4.875rem; align-items: start; }
.mission-intro_heading { max-width: 40rem; margin-top: 3.25rem; }
.mission-intro_text { max-width: 28.9375rem; margin-top: 3.5rem; }
/* the snapshot's global p{font-size:1rem;line-height:1.5;letter-spacing:-.02em} beats the wrapper's body-large size */
.mission-intro_text p,
.mission-letter_body p { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.mission-intro_text p { margin: 0; }
.mission-intro_text p + p { margin-top: 1.75rem; }
/* 548 x 674 at 1440px, running 58px past the content column like the design, never closer than 16px to the screen edge */
.mission-intro_collage { position: relative; aspect-ratio: 548 / 674; margin-top: 4rem; margin-right: calc(-1 * min(3.625rem, 5vw - 1rem)); }
.mission-intro_photo { position: absolute; display: block; object-fit: cover; border-radius: 4px; }
.mission-intro_photo.is-1 { left: 9.12%; top: 0; width: 48.54%; height: 52.23%; }
.mission-intro_photo.is-2 { left: 61.68%; top: 4.6%; width: 38.32%; height: 41.54%; }
.mission-intro_photo.is-3 { left: 0; top: 45.7%; width: 45.26%; height: 43.62%; }
.mission-intro_photo.is-4 { left: 47.81%; top: 48.07%; width: 47.81%; height: 51.93%; }

/* 3 Founder band: Dark Blue with the turquoise symbol at 66%, photo, pull quote from the letter, letter button */
.section_mission-founder { position: relative; overflow: hidden; padding: 5rem 0 4.25rem; background-color: var(--_style-guide-2-0---outset-dark-blue); color: var(--_style-guide-2-0---outset-off-white); }
.mission-founder_pattern { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mission-founder_component,
.mission-founder_figure { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; }
.mission-founder_photo { width: 16rem; aspect-ratio: 256 / 232; overflow: hidden; border: 2px solid rgba(243, 247, 247, .8); border-radius: .5rem; }
.mission-founder_photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.mission-founder_quote { max-width: 48rem; margin: 1.5rem 0 0; padding: 0; border: 0; font-style: normal; } /* Webflow styles blockquote */
.mission-founder_quote p { color: var(--_style-guide-2-0---outset-off-white); }
.mission-founder_attribution {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .5rem;
  margin-top: 2.75rem;
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3333;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* the design sets the name in Mid Blue, which reaches 3.8:1 on Dark Blue; Turquoise passes (6.6:1) at 12px */
.mission-founder_name { color: var(--_style-guide-2-0---outset-turquoise); }
.mission-founder_button { display: none; min-width: 17.5rem; margin-top: 3rem; cursor: pointer; }
.w-mod-js .mission-founder_button { display: flex; }

/* The founder's letter: expanded in place under the band (without JavaScript it is simply shown) */
.w-mod-js .section_mission-letter:not(.is-open) { display: none; }
.section_mission-letter { padding: 5.5rem 0 6rem; background-color: var(--_style-guide-2-0---white); color: var(--_style-guide-2-0---outset-soft-black); }
.mission-letter_component { max-width: 40rem; margin: 0 auto; }
.mission-letter_byline { margin: 1.5rem 0 0; line-height: 1.5; }
.mission-letter_body { margin-top: 2.5rem; }
.mission-letter_body p { margin: 0; }
.mission-letter_body p + p { margin-top: 1.25rem; }
.mission-letter_body strong { font-weight: 700; }
.mission-letter_body a { color: var(--_style-guide-2-0---outset-mid-blue); text-decoration: underline; text-underline-offset: 2px; }

/* 4 Career Discovery 2-col (P3 values) */
.section_mission-discovery { padding: 7.25rem 0; border-bottom: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); }
.mission-discovery_component { display: grid; grid-template-columns: minmax(0, 37.75rem) minmax(0, 1fr); column-gap: 6.4375rem; align-items: center; }
.mission-discovery_images { position: relative; aspect-ratio: 604 / 433; }
.mission-discovery_image { position: absolute; display: block; width: 56.95%; height: 79.45%; object-fit: cover; }
.mission-discovery_image.is-1 { left: 0; top: 0; }
.mission-discovery_image.is-2 { right: 0; bottom: 0; }
.mission-discovery_text { max-width: 28.9375rem; margin: 2.25rem 0 0; }
.mission-discovery_subheading { margin: 2.25rem 0 0; font-family: Caslonionic Web, Arial, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.mission-discovery_list { display: flex; flex-direction: column; gap: 1.0625rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.mission-discovery_list > li {
  position: relative;
  margin: 0;
  padding-left: 1.25rem;
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.125;
  letter-spacing: -.02em;
}
.mission-discovery_list > li::before { content: ""; position: absolute; top: .4375rem; left: .3125rem; width: 4px; height: 4px; background-color: currentColor; }
.mission-discovery_cta { display: flex; justify-content: center; margin-top: 5.75rem; }
.mission-discovery_button { min-width: 15.6875rem; }

/* 5 Stats: three figures in 248px columns across the content width */
.section_mission-stats { padding: 7rem 0 0; }
.mission-stats_heading { text-align: center; }
.mission-stats_list { display: grid; grid-template-columns: repeat(3, minmax(0, 15.5rem)); justify-content: space-between; margin: 3.5rem 0 0; padding: 0; list-style: none; }
.mission-stats_item { margin: 0; text-align: center; }
.mission-stats_number { margin: 0; color: var(--_style-guide-2-0---outset-mid-blue); font-family: Marrsans Web, Arial, sans-serif; font-size: 3rem; font-weight: 600; line-height: 1.1667; letter-spacing: -.03em; }
.mission-stats_caption { max-width: 15.5rem; margin: .75rem auto 0; font-family: Marrsans Web, Arial, sans-serif; font-size: 1.125rem; font-weight: 500; line-height: 1.5556; letter-spacing: -.01em; }
.section_mission-stats + .section_quote { padding-bottom: 1.5rem; } /* the quote partial is 24px shorter than the design's gap above the campuses band */

/* 7 Campuses band: Orange 66%, four campus cards (full-bleed row, 24px insets) */
.section_mission-campuses { padding: 2.75rem 1.5rem 1.75rem; background-color: #f59632a8; color: var(--_style-guide-2-0---outset-soft-black); }
.mission-campuses_heading { max-width: 36rem; margin: 0 auto; text-align: center; text-wrap: balance; }
.mission-campuses_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.mission-campuses_item { margin: 0; }
.mission-campuses_card { display: flex; flex-direction: column; color: var(--_style-guide-2-0---outset-red-brown); text-decoration: none; }
.mission-campuses_city { font-family: Marrsans Web, Arial, sans-serif; font-size: .75rem; font-weight: 500; line-height: 1; text-transform: uppercase; }
.mission-campuses_image { display: block; aspect-ratio: 336 / 388; margin-top: .875rem; overflow: hidden; border-radius: .5rem; outline: 2px solid transparent; outline-offset: -2px; background-color: var(--_style-guide-2-0---outset-sand); transition: outline-color .2s; }
.mission-campuses_image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mission-campuses_name { margin: 1rem 0 0; font-family: Caslonionic Web, Arial, sans-serif; font-size: 1.3125rem; font-weight: 400; line-height: 1.2; letter-spacing: -.03em; }
.mission-campuses_card:hover .mission-campuses_image,
.mission-campuses_card:focus-visible .mission-campuses_image { outline-color: var(--_style-guide-2-0---outset-off-white); }
.mission-campuses_card:focus-visible { outline: 2px solid var(--_style-guide-2-0---outset-red-brown); outline-offset: 4px; border-radius: .5rem; }
.mission-campuses_cta { display: flex; justify-content: center; margin-top: 3.25rem; }
.mission-campuses_button.button { border-color: var(--_style-guide-2-0---outset-red); background-color: var(--_style-guide-2-0---outset-red); }
.mission-campuses_disclaimer { max-width: 48rem; margin: 2.25rem auto 0; font-family: Marrsans Web, Arial, sans-serif; font-size: 1.125rem; font-weight: 400; line-height: 1.5556; letter-spacing: -.01em; text-align: center; }

/* 8 Team strip: 276 x 368 portraits, centred so the row bleeds off both edges */
.section_mission-team { overflow: hidden; padding: 6.75rem 0 7.5rem; }
.mission-team_heading { text-align: center; }
.mission-team_list { display: flex; justify-content: center; gap: 1rem; margin: 4.75rem 0 0; padding: 0; list-style: none; }
.mission-team_item { flex: none; width: 17.25rem; margin: 0; aspect-ratio: 276 / 368; overflow: hidden; border-radius: 4px; background-color: var(--_style-guide-2-0---outset-grey); }
.mission-team_item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mission-team_cta { display: flex; justify-content: center; margin-top: 5.75rem; }
.mission-team_button { min-width: 15.6875rem; }

/* Laptop (992-1439px): the two-column bands share the width instead of keeping the 1440px column sizes */
@media screen and (min-width: 992px) and (max-width: 1439px) {
  .mission-intro_component { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); column-gap: 3rem; }
  .mission-intro_heading { font-size: clamp(3.5rem, 5.2vw, 4.75rem); }
  .mission-discovery_component { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; }
}
/* Tablet: stack the two-column bands, campus cards two by two, swipeable portraits */
@media screen and (max-width: 991px) {
  .section_mission-intro { padding: 3rem 0 5rem; }
  .mission-intro_component { grid-template-columns: minmax(0, 1fr); }
  .mission-intro_collage { width: 100%; max-width: 34.25rem; margin-top: 3.5rem; margin-right: 0; }
  .section_mission-founder { padding: 4rem 0; }
  .section_mission-letter { padding: 4rem 0 4.5rem; }
  .section_mission-discovery { padding: 5rem 0; }
  .mission-discovery_component { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
  .mission-discovery_images { width: 100%; max-width: 37.75rem; }
  .mission-discovery_cta { justify-content: flex-start; margin-top: 3.5rem; }
  .section_mission-stats { padding-top: 5rem; }
  .mission-campuses_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section_mission-team { padding: 5rem 0; }
  .mission-team_list {
    justify-content: flex-start;
    margin-top: 3rem;
    padding: 0 5%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5%;
    scrollbar-width: none;
  }
  .mission-team_list::-webkit-scrollbar { display: none; }
  .mission-team_item { width: 15rem; scroll-snap-align: start; }
  .mission-team_item:first-child { order: 1; } /* the swipe starts with the designed six; the extra portrait from the left moves to the end */
  .mission-team_cta { margin-top: 3.5rem; }
}
/* Phone */
@media screen and (max-width: 767px) {
  .mission-video_component { aspect-ratio: 16 / 9; }
  .mission-video_play { width: 4rem; height: 4rem; }
  .section_mission-intro { padding: 2rem 0 4rem; }
  .mission-intro_heading { margin-top: 2rem; }
  .mission-intro_text { margin-top: 2rem; font-size: 1rem; }
  .mission-intro_text p + p { margin-top: 1rem; }
  .mission-intro_collage { margin-top: 3rem; }
  .section_mission-founder { padding: 3.5rem 0; }
  .mission-founder_pattern { display: none; }
  .mission-founder_photo { width: 11rem; }
  .mission-founder_quote { margin-top: 1.5rem; }
  .mission-founder_attribution { margin-top: 1.5rem; }
  .mission-founder_button { min-width: 0; margin-top: 2rem; }
  .section_mission-letter { padding: 3rem 0 3.5rem; }
  .mission-letter_body { margin-top: 2rem; font-size: 1rem; }
  .section_mission-discovery { padding: 3.5rem 0 4rem; }
  .mission-discovery_component { row-gap: 2.5rem; }
  .mission-discovery_text { margin-top: 1.5rem; font-size: 1rem; }
  .mission-discovery_subheading { margin-top: 1.75rem; }
  .mission-discovery_list { margin-top: 1.5rem; gap: .875rem; }
  .mission-discovery_cta { margin-top: 2.5rem; }
  .section_mission-stats { padding-top: 3.5rem; }
  .mission-stats_list { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; margin-top: 2rem; }
  .mission-stats_number { font-size: 2.5rem; }
  .mission-stats_caption { font-size: 1rem; }
  .section_mission-campuses { padding: 3.5rem 0 3rem; }
  .mission-campuses_heading { padding: 0 1rem; }
  .mission-campuses_list { display: flex; gap: 1rem; margin-top: 1.5rem; padding: .5rem 1rem; overflow-x: auto; /* padding-block keeps the focus ring inside the scroll box */ scroll-snap-type: x mandatory; scroll-padding-left: 1rem; scrollbar-width: none; }
  .mission-campuses_list::-webkit-scrollbar { display: none; }
  .mission-campuses_item { flex: none; width: 75%; scroll-snap-align: start; }
  .mission-campuses_cta { margin-top: 2rem; padding: 0 1rem; }
  .mission-campuses_disclaimer { margin-top: 1.5rem; padding: 0 1rem; font-size: 1rem; }
  .section_mission-team { padding: 3.5rem 0 4rem; }
  .mission-team_list { margin-top: 2rem; padding: 0 1rem; scroll-padding-left: 1rem; }
  .mission-team_item { width: 11.5rem; }
  .mission-team_cta { margin-top: 2.5rem; }
}