/* VIVA FUTURE: the client's navy and teal strategy chapter, isolated from the shopping pages. */
.vf-page {
  --vf-night: #071923;
  --vf-surface: #0c2531;
  --vf-teal: #77e3ce;
  --vf-text: #f3f8f8;
  --vf-muted: #b3c7cc;
  --vf-line: #28434d;
  background: var(--vf-night);
  color: var(--vf-text);
  margin-top: -80px;
  padding-top: 80px;
}
.vf-page .vf-wrap { max-width: 1072px; margin: 0 auto; padding: 0 32px; }
.vf-page h1, .vf-page h2, .vf-page h3 { color: inherit; text-wrap: balance; }
.vf-page p { text-wrap: pretty; }
.vf-page a:focus-visible, .vf-page video:focus-visible { outline: 2px solid var(--vf-teal); outline-offset: 8px; }
.vf-page .vf-kicker { display: block; color: var(--vf-teal); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .12em; }
.vf-page .vf-hero { padding: 96px 0 80px; text-align: center; }
.vf-page .vf-brand { font-size: 20px; line-height: 28px; letter-spacing: .16em; margin-bottom: 16px; }
.vf-page h1 { max-width: 680px; margin: 32px auto; font-size: 60px; line-height: 60px; font-weight: 500; letter-spacing: -.04em; }
.vf-page h1 span { color: var(--vf-teal); }
.vf-page .vf-intro { max-width: 680px; margin: 0 auto; color: var(--vf-muted); font-size: 18px; line-height: 28px; }
.vf-page .vf-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 24px; border-radius: 9999px; text-decoration: none; background: var(--vf-teal); color: var(--vf-night); font-size: 16px; line-height: 24px; font-weight: 600; transition: background-color 300ms var(--ease), transform 300ms var(--ease); }
.vf-page .vf-action:hover { background: #a3f1e2; transform: translateY(-2px); }
.vf-page .vf-action:active { transform: translateY(1px); }
.vf-page .vf-hero .vf-action { margin-top: 32px; }
.vf-page .vf-strategy { padding: 64px 0; border-top: 1px solid var(--vf-line); scroll-margin-top: 96px; }
.vf-page .vf-strategy h2 { margin: 16px 0 32px; max-width: 880px; font-size: 48px; line-height: 48px; font-weight: 500; letter-spacing: -.03em; }
.vf-page .vf-film { margin: 0; }
.vf-page .vf-video { display: block; width: 100%; height: auto; aspect-ratio: 848 / 464; object-fit: contain; background: #000; border: 1px solid var(--vf-line); border-radius: 16px; }
.vf-page .vf-film figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; color: var(--vf-muted); font-size: 14px; line-height: 20px; }
.vf-page .vf-film figcaption a { text-underline-offset: 4px; }
.vf-page .vf-film figcaption a:hover { color: var(--vf-teal); }
.vf-page .vf-statement { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; margin-top: 32px; align-items: start; }
.vf-page blockquote { margin: 0; padding: 0; border: 0; color: var(--vf-text); font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -.02em; }
.vf-page blockquote p { font-style: normal; }
.vf-page .vf-explanation { color: var(--vf-muted); font-size: 18px; line-height: 28px; }
.vf-page .vf-explanation p + p { margin-top: 12px; }
.vf-page .vf-translation { color: var(--vf-teal); }
.vf-page .vf-pending { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 48px; background: var(--vf-surface); border: 1px solid var(--vf-line); border-radius: 16px; }
.vf-page .vf-pending strong { display: block; margin: 12px 0; font-size: 30px; line-height: 36px; font-weight: 500; }
.vf-page .vf-pending p { max-width: 560px; color: var(--vf-muted); font-size: 16px; line-height: 24px; }
.vf-page .vf-pending-number { font-size: 72px; line-height: 72px; font-weight: 400; color: #5c858d; }
.vf-page .vf-roadmap { padding: 80px 0; border-top: 1px solid var(--vf-line); scroll-margin-top: 96px; }
.vf-page .vf-roadmap h2 { margin: 24px 0 48px; max-width: 680px; font-size: 48px; line-height: 48px; font-weight: 500; letter-spacing: -.03em; }
.vf-page .vf-years { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; gap: 32px; }
.vf-page .vf-year { display: block; color: var(--vf-teal); font-size: 60px; line-height: 60px; font-weight: 400; letter-spacing: -.04em; }
.vf-page .vf-years h3 { margin: 24px 0 12px; font-size: 20px; line-height: 28px; font-weight: 600; }
.vf-page .vf-years p { color: var(--vf-muted); font-size: 16px; line-height: 24px; }
.vf-page .vf-note { margin-top: 32px; color: var(--vf-muted); font-size: 14px; line-height: 20px; max-width: 680px; }
.vf-page .vf-finale { padding: 80px 0 96px; text-align: center; border-top: 1px solid var(--vf-line); }
.vf-page .vf-finale h2 { max-width: 680px; margin: 24px auto; font-size: 60px; line-height: 60px; font-weight: 500; letter-spacing: -.04em; }
.vf-page .vf-finale p { color: var(--vf-muted); font-size: 18px; line-height: 28px; }
.vf-page .vf-finale .vf-action { margin-top: 32px; }
@media (max-width: 767px) {
  .vf-page .vf-wrap { padding: 0 16px; }
  .vf-page .vf-hero { padding: 64px 0 48px; }
  .vf-page .vf-brand { font-size: 18px; line-height: 28px; }
  .vf-page h1 { margin: 24px auto; font-size: 36px; line-height: 40px; letter-spacing: -.03em; }
  .vf-page .vf-intro { font-size: 16px; line-height: 24px; }
  .vf-page .vf-strategy { padding: 48px 0; }
  .vf-page .vf-strategy h2 { font-size: 30px; line-height: 36px; margin-bottom: 24px; }
  .vf-page .vf-film figcaption { flex-wrap: wrap; gap: 8px; }
  .vf-page .vf-statement { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .vf-page blockquote { font-size: 24px; line-height: 32px; }
  .vf-page .vf-explanation { font-size: 16px; line-height: 24px; }
  .vf-page .vf-pending { padding: 24px; gap: 16px; }
  .vf-page .vf-pending strong { font-size: 24px; line-height: 32px; }
  .vf-page .vf-pending-number { display: none; }
  .vf-page .vf-roadmap { padding: 48px 0; }
  .vf-page .vf-roadmap h2 { font-size: 30px; line-height: 36px; margin-bottom: 32px; }
  .vf-page .vf-years { grid-template-columns: 1fr; gap: 32px; }
  .vf-page .vf-year { font-size: 48px; line-height: 48px; }
  .vf-page .vf-years h3 { margin-top: 12px; }
  .vf-page .vf-finale { padding: 48px 0 64px; }
  .vf-page .vf-finale h2 { font-size: 36px; line-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-page .vf-action { transition: none; }
  .vf-page .vf-action:hover, .vf-page .vf-action:active { transform: none; }
}