/*
 * Mission and Vision.
 *
 * The page carries very little content, so the statements are given room rather than
 * decoration: one full band each, an oversized ghost word behind, and a single gold
 * rule closing it. Type, colour and radii come from the existing system.
 */

.pp {
  position: relative;
  width: 100%;
  background: var(--cream);
  overflow: hidden;
}

/* ------------------------------------------------------------------ title */

.pp-head {
  position: relative;
  padding: 150px 48px 8px;
  text-align: center;
  background: var(--cream);
}
/* The mark is drawn beak-left, so it is left unmirrored and sits to the right of the
   kicker: it looks back at the words. A slight tilt drops the beak toward them. */
.pp-head-bird {
  position: absolute;
  top: 118px;
  left: 57%;
  width: 78px;
  opacity: .26;
  transform: rotate(8deg);
  pointer-events: none;
}

.pp-head-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}

.pp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.pp-kicker-rule {
  width: 22px;
  height: 1px;
  background: rgba(201, 162, 75, .55);
}

.pp-h1 {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--blue-deep);
  margin: 20px 0 0;
}

.pp-lede {
  font-family: 'Bricolage Grotesque';
  font-weight: 500;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 18px auto 0;
}

/* ------------------------------------------------------------------ bands */

.pp-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 84px;
  padding: 96px 48px;
}

.pp-band--mission { background: var(--cream-2); }

/* The second statement inverts, so the two read as a pair rather than a list. */
.pp-band--vision { background: var(--blue-deep); }

/* The statement word, set oversized behind its own band. Anton is the display face
   for large figures and words in this system. */
.pp-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Anton', 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: clamp(140px, 26vw, 380px);
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
  user-select: none;
}

.pp-band--mission .pp-ghost { color: rgba(22, 48, 127, .055); }
.pp-band--vision .pp-ghost { color: rgba(251, 245, 233, .07); }

.pp-band-inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.pp-num {
  display: block;
  font-family: 'Anton', 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--gold-dark);
}

.pp-band-title {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin: 14px 0 0;
}

.pp-band--mission .pp-band-title { color: var(--gold-text); }
.pp-band--vision .pp-band-title { color: #F2C879; }

/* The statement itself. Sized to sit between a heading and body copy: it is the page. */
.pp-statement {
  font-family: 'Bricolage Grotesque';
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 46px);
  line-height: 1.32;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 26px 0 0;
}

.pp-band--mission .pp-statement { color: var(--blue-deep); }
.pp-band--vision .pp-statement { color: var(--cream); }

.pp-rule {
  display: block;
  width: 78px;
  height: 2px;
  margin: 40px auto 0;
  background: var(--gold-dark);
}

/* ------------------------------------------------------------------ onward */

.pp-onward {
  position: relative;
  padding: 96px 48px 110px;
  text-align: center;
  background: var(--cream);
}

.pp-onward-inner {
  max-width: 640px;
  margin: 0 auto;
}

.pp-onward-title {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--blue-deep);
  margin: 18px 0 0;
}

.pp-onward-body {
  font-family: 'Bricolage Grotesque';
  font-weight: 500;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

.pp-onward-link {
  display: inline-block;
  margin-top: 26px;
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: var(--gold-text);
  border-bottom: 2px solid rgba(201, 162, 75, .5);
  padding-bottom: 3px;
  transition: border-color .2s ease;
}

.pp-onward-link:hover { border-bottom-color: var(--gold-dark); }

.pp-onward-link:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 4px;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .pp-head { padding: 128px 40px 8px; }
  .pp-head-bird { top: 92px; left: 68%; width: 100px; }
  .pp-band { margin-top: 68px; padding: 78px 40px; }
  .pp-onward { padding: 78px 40px 92px; }
}

@media (max-width: 900px) {
  .pp-head { padding: 116px 32px 6px; }
  .pp-head-bird { display: none; }
  .pp-band { margin-top: 56px; padding: 64px 32px; }
  .pp-statement { line-height: 1.36; }
  .pp-onward { padding: 64px 32px 78px; }
}

@media (max-width: 640px) {
  .pp-head { padding: 104px 22px 4px; }
  .pp-band { margin-top: 44px; padding: 54px 22px; }
  /* The ghost word is set in viewport units, so on a narrow screen it grows past the
     band and reads as a stripe rather than a word. Held back to something legible. */
  .pp-ghost { font-size: clamp(96px, 34vw, 190px); }
  .pp-rule { margin-top: 30px; }
  .pp-onward { padding: 54px 22px 66px; }
}

@media (max-width: 520px) {
  .pp-head { padding: 96px 18px 4px; }
  .pp-band { padding: 46px 18px; }
  .pp-ghost { font-size: clamp(84px, 36vw, 150px); }
  .pp-statement { font-size: 21px; }
  .pp-onward { padding: 46px 18px 58px; }
}