/* ============================================================================
   Vision, Mission and Values — page-specific styles.
   Every rule is scoped to .page-mission-vision-values.

   The live page is a single centred 960px column: Inter headings, Arial body
   copy, eight icons, then the full-bleed "THE EDGE" banner row. Duda tuned the
   vertical rhythm block by block, so the gaps below are the measured live
   deltas (reference/spec/mission-vision-values.desktop.json), not a scale.
   ========================================================================== */

/* Courgette carries the gold script line. The shared head partial loads Inter
   but not Courgette, so this page pulls its one extra family in itself. */
@import url("https://fonts.googleapis.com/css2?family=Courgette&display=swap");

/* ---------- the body column ---------- */
.page-mission-vision-values .mvv-intro {
  position: relative;
  padding: 102px 40px 110px;
}

.page-mission-vision-values .mvv-title,
.page-mission-vision-values .mvv-h2,
.page-mission-vision-values .mvv-h3,
.page-mission-vision-values .mvv-q,
.page-mission-vision-values .mvv-copy,
.page-mission-vision-values .mvv-script {
  margin: 0;
  text-align: center;
}

.page-mission-vision-values .mvv-title {
  font-family: var(--font-display);
  font-size: 70px;
  font-weight: 700;
  color: #000;
}

.page-mission-vision-values .mvv-script {
  font-family: Courgette, cursive;
  font-size: 48px;
  font-weight: 700;
  color: var(--gold);
}

.page-mission-vision-values .mvv-h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: #000;
}

.page-mission-vision-values .mvv-h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

.page-mission-vision-values .mvv-q {
  font-size: 16px;
  font-weight: 700;
  color: var(--body-text);
}

.page-mission-vision-values .mvv-copy {
  font-size: 16px;
  font-weight: 400;
  color: var(--body-text);
}

/* ---------- icons ---------- */
.page-mission-vision-values .mvv-icon {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.page-mission-vision-values .mvv-icon--a { width: 101px; }
.page-mission-vision-values .mvv-icon--b { width: 100px; }
.page-mission-vision-values .mvv-icon--c { width: 100px; }
.page-mission-vision-values .mvv-icon--d { width: 100px; }
.page-mission-vision-values .mvv-icon--e { width: 100px; }
.page-mission-vision-values .mvv-icon--f { width: 101px; }
.page-mission-vision-values .mvv-icon--g { width: 102px; }
.page-mission-vision-values .mvv-icon--h { width: 103px; }

/* ---------- measured vertical rhythm, block by block ---------- */
.page-mission-vision-values .mvv-g1 { margin-top: 32px; }
.page-mission-vision-values .mvv-g2 { margin-top: 44px; }
.page-mission-vision-values .mvv-g3 { margin-top: 12px; }
.page-mission-vision-values .mvv-g4 { margin-top: 30px; }
.page-mission-vision-values .mvv-g5 { margin-top: 36px; }
.page-mission-vision-values .mvv-g6 { margin-top: 18px; }
.page-mission-vision-values .mvv-g7 { margin-top: 44px; }
.page-mission-vision-values .mvv-g8 { margin-top: 12px; }
.page-mission-vision-values .mvv-g9 { margin-top: 12px; }
.page-mission-vision-values .mvv-g10 { margin-top: 18px; }
.page-mission-vision-values .mvv-g11 { margin-top: 62px; }
.page-mission-vision-values .mvv-g12 { margin-top: 12px; }
.page-mission-vision-values .mvv-g13 { margin-top: 24.895px; }
.page-mission-vision-values .mvv-g14 { margin-top: 17px; }
.page-mission-vision-values .mvv-g15 { margin-top: 12px; }
.page-mission-vision-values .mvv-g16 { margin-top: 18px; }
.page-mission-vision-values .mvv-g17 { margin-top: 18px; }
.page-mission-vision-values .mvv-g18 { margin-top: 43.005px; }
.page-mission-vision-values .mvv-g19 { margin-top: 17px; }
.page-mission-vision-values .mvv-g20 { margin-top: 12px; }
.page-mission-vision-values .mvv-g21 { margin-top: 18px; }
.page-mission-vision-values .mvv-g22 { margin-top: 18px; }
.page-mission-vision-values .mvv-g23 { margin-top: 43.145px; }
.page-mission-vision-values .mvv-g24 { margin-top: 17px; }
.page-mission-vision-values .mvv-g25 { margin-top: 12px; }
.page-mission-vision-values .mvv-g26 { margin-top: 18px; }
.page-mission-vision-values .mvv-g27 { margin-top: 18px; }
.page-mission-vision-values .mvv-g28 { margin-top: 25.015px; }
.page-mission-vision-values .mvv-g29 { margin-top: 10px; }
.page-mission-vision-values .mvv-g30 { margin-top: 12px; }
.page-mission-vision-values .mvv-g31 { margin-top: 18px; }
.page-mission-vision-values .mvv-g32 { margin-top: 18px; }
.page-mission-vision-values .mvv-g33 { margin-top: 28.005px; }
.page-mission-vision-values .mvv-g34 { margin-top: 10px; }
.page-mission-vision-values .mvv-g35 { margin-top: 12px; }
.page-mission-vision-values .mvv-g36 { margin-top: 18px; }
.page-mission-vision-values .mvv-g37 { margin-top: 18px; }
.page-mission-vision-values .mvv-g38 { margin-top: 44px; }
.page-mission-vision-values .mvv-g39 { margin-top: 12px; }
.page-mission-vision-values .mvv-g40 { margin-top: 24.685px; }
.page-mission-vision-values .mvv-g41 { margin-top: 10px; }
.page-mission-vision-values .mvv-g42 { margin-top: 12px; }
.page-mission-vision-values .mvv-g43 { margin-top: 24.475px; }
.page-mission-vision-values .mvv-g44 { margin-top: 10px; }
.page-mission-vision-values .mvv-g45 { margin-top: 12px; }
.page-mission-vision-values .mvv-g46 { margin-top: 25.835px; }
.page-mission-vision-values .mvv-g47 { margin-top: 10px; }
.page-mission-vision-values .mvv-g48 { margin-top: 12px; }

/* ============================================================================
   "THE EDGE" banner row — full-bleed photo with a translucent, gold-edged
   panel pinned to the right half of the 960px container.
   ========================================================================== */
.page-mission-vision-values .mvv-edge {
  position: relative;
  padding: 15px 40px;
  background-image: url("../assets/Carl-Page-website-2880w.png");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.page-mission-vision-values .mvv-panel {
  padding-bottom: 30px;
  background: rgba(255, 255, 255, .7);
  border: 4px solid var(--gold-btn);
  border-radius: 10px;
  text-align: center;
}

.page-mission-vision-values .mvv-edge-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: #000;
}
.page-mission-vision-values .mvv-edge-kicker {
  display: block;
  margin-top: 30px;
  font-size: 24px;
}
/* The live headline is pulled up into the kicker's leading. */
.page-mission-vision-values .mvv-edge-big {
  display: block;
  margin-top: -15px;
  font-size: 67px;
}

.page-mission-vision-values .mvv-edge-event {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #000;
}
.page-mission-vision-values .mvv-edge-event span { display: block; }

.page-mission-vision-values .mvv-edge-copy {
  margin: 24px 0 0;
  font-size: 16px;
  color: var(--body-text);
}

.page-mission-vision-values .mvv-edge-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 47px;
  margin: 30px auto 0;
  background: var(--gold-btn);
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, .25) 0 3px 11px 0;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.page-mission-vision-values .mvv-edge-btn:hover,
.page-mission-vision-values .mvv-edge-btn:focus-visible {
  background: var(--gold-btn-hover);
}

.page-mission-vision-values .mvv-intro::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--header-h));
  left: 0;
  right: 0;
  height: var(--header-h);
  box-shadow: 0 0 16px rgba(0, 0, 0, .33);
  pointer-events: none;
}

@media (min-width: 768px) {
  .page-mission-vision-values .footer-main { padding-top: 94px; }
}

/* ============================================================================
   MOBILE — the same content and imagery, stacked. Sizes match the live
   mobile render (body copy drops to 14px, icons run the full column).
   ========================================================================== */
@media (max-width: 767px) {
  .page-mission-vision-values .mvv-intro { padding: 10px 0 40px; }

  .page-mission-vision-values .mvv-title { font-size: 30px; }
  .page-mission-vision-values .mvv-script { font-size: 38px; }
  .page-mission-vision-values .mvv-h2 { font-size: 30px; }
  .page-mission-vision-values .mvv-h3 { font-size: 14px; }
  .page-mission-vision-values .mvv-q,
  .page-mission-vision-values .mvv-copy { font-size: 14px; }

  .page-mission-vision-values .mvv-icon { width: 100% !important; }

  /* Desktop's hand-tuned gaps are far too tight once the icons go full width. */
  .page-mission-vision-values .mvv-g13,
  .page-mission-vision-values .mvv-g18,
  .page-mission-vision-values .mvv-g23,
  .page-mission-vision-values .mvv-g28,
  .page-mission-vision-values .mvv-g33,
  .page-mission-vision-values .mvv-g40,
  .page-mission-vision-values .mvv-g43,
  .page-mission-vision-values .mvv-g46 { margin-top: 25.835px; }
  .page-mission-vision-values .mvv-g14,
  .page-mission-vision-values .mvv-g19,
  .page-mission-vision-values .mvv-g24,
  .page-mission-vision-values .mvv-g29,
  .page-mission-vision-values .mvv-g34,
  .page-mission-vision-values .mvv-g41,
  .page-mission-vision-values .mvv-g44,
  .page-mission-vision-values .mvv-g47 { margin-top: 12px; }

  .page-mission-vision-values .mvv-edge { padding: 15px 0; }
  .page-mission-vision-values .mvv-edge__spacer { display: none; }
  .page-mission-vision-values .mvv-panel { padding: 0 19px 20px; }
  .page-mission-vision-values .mvv-edge-kicker { margin-top: 14px; font-size: 19px; }
  .page-mission-vision-values .mvv-edge-big { margin-top: -12px; font-size: 54px; }
  .page-mission-vision-values .mvv-edge-event { margin-top: 12px; font-size: 14px; }
  .page-mission-vision-values .mvv-edge-copy { margin-top: 12px; font-size: 14px; }
  .page-mission-vision-values .mvv-edge-btn { width: 100%; max-width: 352px; margin-top: 12px; }
}