@font-face {
  font-family: "Museo Sans";
  src: url("video/fonts/MuseoSansCyrl-300.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("video/fonts/MuseoSansCyrl-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("video/fonts/MuseoSansCyrl-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("video/fonts/MuseoSansCyrl-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --metro-navy: #0b2b68;
  --metro-navy-dark: #082050;
  --metro-yellow: #ffec00;
  --ink: #17263c;
  --muted: #4d5c6e;
  --rule: #d9e1e8;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  min-width: 320px;
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Museo Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid #0072d8; outline-offset: 4px; }

.screen {
  display: grid;
  grid-template-rows: 78px minmax(0, 1fr);
  min-height: 100dvh;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px clamp(24px, 4vw, 72px);
  border-bottom: 1px solid var(--rule);
  background: #fff;
}
.brand-lockup { display: flex; align-items: center; gap: 16px; }
.brand-lockup a { display: inline-flex; align-items: center; border-radius: 4px; }
.metro-logo { display: block; width: 58px; height: 58px; object-fit: contain; }
.mapi-logo { display: block; width: 73px; height: 36px; object-fit: contain; }
.brand-separator { display: block; width: 1px; height: 27px; background: #c5d0db; }
.header-context { color: var(--metro-navy); font-size: 13px; font-weight: 700; }

.landing {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr);
  min-height: 0;
}
.story {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: clamp(24px, 4.5vh, 54px) clamp(30px, 5.3vw, 92px);
  background: #fff;
}
.story-inner { width: 100%; max-width: 790px; margin-inline: auto; }
.eyebrow, .conversion-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow { color: var(--metro-navy); }
h1, h2, h3, p { letter-spacing: 0; }
h1 {
  max-width: 15ch;
  margin: clamp(12px, 2vh, 22px) 0 0;
  color: var(--metro-navy);
  font-size: clamp(35px, 5.8vh, 68px);
  font-weight: 800;
  line-height: 1.06;
  text-wrap: balance;
}
.lead {
  max-width: 63ch;
  margin: clamp(14px, 2.1vh, 24px) 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.9vh, 18px);
  line-height: 1.55;
}
.mobile-cta { display: none; }
.projects { margin-top: clamp(20px, 4.5vh, 48px); }
.projects h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(14px, 1.8vh, 17px);
  line-height: 1.3;
}
.projects ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.projects li { min-width: 0; padding-top: 13px; border-top: 3px solid var(--metro-yellow); }
.project-number { display: block; color: var(--metro-navy); font-size: 11px; font-weight: 800; }
.projects h3 {
  margin: 8px 0 0;
  font-size: clamp(14px, 1.9vh, 18px);
  line-height: 1.2;
  font-weight: 800;
}
.projects li p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: clamp(12px, 1.52vh, 14px);
  line-height: 1.4;
}
.audience {
  margin: clamp(18px, 3.5vh, 38px) 0 0;
  color: #657487;
  font-size: 12px;
  line-height: 1.4;
}

.conversion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 24px clamp(25px, 4vw, 64px);
  background: var(--metro-navy);
  color: #fff;
}
.conversion-inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 410px; text-align: center; }
.conversion-eyebrow { color: var(--metro-yellow); }
.conversion h2 {
  max-width: 18ch;
  margin: clamp(7px, 1.2vh, 12px) 0 0;
  font-size: clamp(24px, 3.65vh, 36px);
  line-height: 1.12;
  font-weight: 800;
  text-wrap: balance;
}
.conversion-copy {
  max-width: 36ch;
  margin: clamp(9px, 1.3vh, 16px) 0 0;
  color: #dbe6f7;
  font-size: clamp(13px, 1.62vh, 15px);
  line-height: 1.43;
}
.qr-link {
  display: block;
  width: clamp(185px, 36vh, 315px);
  height: clamp(185px, 36vh, 315px);
  max-width: 100%;
  margin-top: clamp(14px, 2.8vh, 28px);
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .22);
}
.qr-link img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr-caption { margin: 10px 0 0; color: #fff; font-size: 12px; font-weight: 700; }
.primary-cta, .mobile-cta {
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 5px;
  background: var(--metro-yellow);
  color: var(--metro-navy-dark);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.primary-cta { display: flex; width: min(100%, 330px); margin-top: clamp(14px, 2.2vh, 24px); }
.primary-cta:hover, .mobile-cta:hover { background: #fff66b; transform: translateY(-1px); }
.destination {
  display: block;
  margin-top: 12px;
  color: #dbe6f7;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.conversion-note { margin: 14px 0 0; color: #c0cfe5; font-size: 11px; line-height: 1.35; }

@media (min-width: 900px) {
  html, body { height: 100%; overflow: hidden; }
  .screen { height: 100vh; height: 100dvh; overflow: hidden; }
}

@media (min-width: 900px) and (max-height: 660px) {
  .screen { grid-template-rows: 64px minmax(0, 1fr); }
  .site-header { padding-top: 3px; padding-bottom: 3px; }
  .metro-logo { width: 49px; height: 49px; }
  .story { padding-top: 20px; padding-bottom: 20px; }
  .projects { margin-top: 18px; }
  .projects h2 { margin-bottom: 8px; }
  .projects li { padding-top: 8px; }
  .projects h3 { margin-top: 5px; }
  .projects li p { margin-top: 4px; }
  .audience { margin-top: 14px; }
  .qr-link { width: clamp(165px, 30vh, 220px); height: clamp(165px, 30vh, 220px); margin-top: 10px; }
  .qr-caption { margin-top: 7px; }
  .primary-cta { margin-top: 10px; min-height: 44px; }
  .destination { margin-top: 8px; }
  .conversion-note { margin-top: 8px; }
}

@media (min-width: 900px) and (max-height: 580px) {
  .conversion h2 { font-size: 22px; }
  .conversion-copy { font-size: 12px; }
  .conversion-note { display: none; }
}

@media (min-width: 900px) and (max-height: 530px) {
  .screen { grid-template-rows: 54px minmax(0, 1fr); }
  .site-header { padding-top: 0; padding-bottom: 0; }
  .metro-logo { width: 44px; height: 44px; }
  .story { padding-top: 10px; padding-bottom: 10px; }
  .eyebrow { display: none; }
  h1 { font-size: 30px; margin-top: 0; }
  .lead { font-size: 13px; margin-top: 9px; line-height: 1.35; }
  .projects { margin-top: 12px; }
  .projects li p { display: none; }
  .audience { margin-top: 10px; }
  .conversion { padding-top: 10px; padding-bottom: 10px; }
  .conversion h2 { font-size: 22px; }
  .conversion-copy { display: none; }
  .qr-link { width: 150px; height: 150px; }
  .conversion-note { display: none; }
}

@media (max-width: 899px) {
  .screen { display: block; }
  .site-header { min-height: 72px; }
  .landing { display: block; }
  .story { padding: 42px clamp(22px, 6vw, 56px) 36px; }
  h1 { font-size: 44px; }
  .lead { font-size: 17px; }
  .mobile-cta { display: inline-flex; width: min(100%, 320px); margin-top: 24px; }
  .projects { margin-top: 42px; }
  .conversion { padding: 52px 24px 56px; }
  .qr-link { width: min(64vw, 292px); height: min(64vw, 292px); }
}

@media (max-width: 600px) {
  .site-header { min-height: 68px; padding: 7px 18px; }
  .brand-lockup { gap: 10px; }
  .metro-logo { width: 50px; height: 50px; }
  .brand-separator { height: 22px; }
  .mapi-logo { width: 60px; height: 30px; }
  .header-context { display: none; }
  .story { padding: 34px 22px 36px; }
  .eyebrow { font-size: 10px; }
  h1 { max-width: 16ch; margin-top: 14px; font-size: 36px; }
  .lead { font-size: 16px; line-height: 1.5; }
  .mobile-cta { width: 100%; }
  .projects { margin-top: 42px; }
  .projects ul { grid-template-columns: 1fr; gap: 14px; }
  .projects li { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; padding-top: 12px; border-top-width: 2px; }
  .project-number { grid-row: 1 / 3; padding-top: 2px; }
  .projects h3 { margin: 0; font-size: 16px; }
  .projects li p { margin-top: 3px; font-size: 14px; }
  .audience { margin-top: 24px; }
  .conversion h2 { font-size: 30px; }
  .conversion-copy { font-size: 15px; }
  .qr-link { width: min(72vw, 280px); height: min(72vw, 280px); }
}

@media (max-width: 360px) {
  h1 { font-size: 32px; }
  .story { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-cta, .mobile-cta { transition: none; }
}