.metro-directory-page { background: #f3f0e9; }

.metro-directory-hero {
  min-height: 430px;
  padding: 68px 0 62px;
  color: #fffefa;
  background:
    radial-gradient(circle at 82% 15%, rgba(111, 167, 163, .19), transparent 31%),
    linear-gradient(135deg, #14222d 0%, #111d26 72%, #182d36 100%);
  position: relative;
  overflow: hidden;
}
.metro-directory-hero::before {
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 50%;
  position: absolute;
  top: -310px;
  right: -80px;
  content: "";
}
.metro-directory-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: end;
  gap: 80px;
  position: relative;
  z-index: 2;
}
.metro-breadcrumbs { margin-bottom: 43px; display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .46); font-size: 9px; }
.metro-breadcrumbs a { transition: color 160ms ease; }
.metro-breadcrumbs a:hover { color: #fff; }
.metro-directory-kicker { margin: 0 0 16px; color: #8eb9b5; display: flex; align-items: center; gap: 10px; font-size: 8px; font-weight: 780; letter-spacing: .14em; text-transform: uppercase; }
.metro-directory-kicker i { width: 30px; height: 1px; background: currentColor; }
.metro-directory-hero h1 { max-width: 850px; margin: 0; font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-size: clamp(47px, 6vw, 78px); font-weight: 400; line-height: .93; letter-spacing: -.045em; }
.metro-directory-hero h1 em { color: #8eb9b5; font-weight: 400; }
.metro-directory-lead { max-width: 660px; margin: 25px 0 0; color: rgba(255, 255, 255, .63); font-size: 12px; line-height: 1.75; }
.metro-directory-count { min-height: 250px; padding: 30px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .045); backdrop-filter: blur(7px); display: flex; flex-direction: column; justify-content: flex-end; }
.metro-directory-count > span { font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-size: 74px; font-weight: 400; line-height: .85; letter-spacing: -.06em; }
.metro-directory-count p { margin: 12px 0 25px; color: rgba(255, 255, 255, .55); font-size: 9px; line-height: 1.5; text-transform: uppercase; letter-spacing: .1em; }
.metro-directory-count a { padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; justify-content: space-between; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.metro-directory-count a b { color: #8eb9b5; font-size: 16px; font-weight: 400; }
.metro-route-art { width: 38%; height: 2px; background: linear-gradient(90deg, transparent, rgba(111, 167, 163, .52)); position: absolute; right: 0; bottom: 30px; }
.metro-route-art i { width: 9px; height: 9px; border: 2px solid #8eb9b5; border-radius: 50%; background: #14222d; position: absolute; top: -4px; }
.metro-route-art i:nth-child(1) { left: 12%; }.metro-route-art i:nth-child(2) { left: 38%; }.metro-route-art i:nth-child(3) { left: 68%; }.metro-route-art i:nth-child(4) { right: 2%; }

.metro-directory-intro { padding: 42px 0 35px; background: #fffefa; }
.metro-directory-intro__heading { display: grid; grid-template-columns: 180px minmax(280px, .9fr) minmax(300px, 1fr); align-items: end; gap: 30px; }
.metro-directory-intro__heading > p { margin: 0; color: #245e67; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.metro-directory-intro__heading h2 { margin: 0; font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-size: clamp(29px, 3.5vw, 45px); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.metro-directory-intro__heading > span { max-width: 520px; color: #69737b; font-size: 10px; line-height: 1.7; }
.metro-line-jumps { margin-top: 32px; border-top: 1px solid rgba(17, 26, 34, .1); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metro-line-jumps a { min-height: 47px; padding: 10px 12px; border-bottom: 1px solid rgba(17, 26, 34, .1); display: flex; align-items: center; gap: 9px; color: #4f5961; font-size: 8px; transition: color 160ms ease, background 160ms ease; }
.metro-line-jumps a:not(:nth-child(5n + 1)) { border-left: 1px solid rgba(17, 26, 34, .1); }
.metro-line-jumps a:hover { color: #111a22; background: #f3f0e9; }
.metro-line-jumps i { width: 24px; height: 24px; border: 2px solid var(--line-color); border-radius: 50%; display: grid; place-items: center; color: #111a22; font-size: 7px; font-style: normal; font-weight: 800; flex: 0 0 auto; }

.metro-directory { padding: 42px 0 68px; }
.metro-directory__list { display: grid; gap: 14px; }
.metro-line-card { border: 1px solid rgba(17, 26, 34, .11); background: #fffefa; box-shadow: 0 14px 40px rgba(17, 26, 34, .055); display: grid; grid-template-columns: 265px minmax(0, 1fr); scroll-margin-top: 18px; overflow: hidden; }
.metro-line-card__heading { min-height: 100%; padding: 25px 24px; border-left: 4px solid var(--line-color); border-right: 1px solid rgba(17, 26, 34, .1); background: linear-gradient(145deg, rgba(17, 26, 34, .025), transparent); display: flex; align-items: flex-start; gap: 16px; }
.metro-line-card__heading > span { width: 39px; height: 39px; border: 2px solid var(--line-color); border-radius: 50%; display: grid; place-items: center; color: #111a22; font-size: 9px; font-weight: 800; flex: 0 0 auto; }
.metro-line-card__heading p { margin: 1px 0 6px; color: #8a9298; font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.metro-line-card__heading h2 { margin: 0; font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-size: 20px; font-weight: 500; line-height: 1.08; }
.metro-line-card__heading small { margin-top: 11px; color: #707980; display: block; font-size: 8px; }
.metro-station-links { padding: 11px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; }
.metro-station-links a { min-height: 61px; padding: 10px 11px; border: 1px solid transparent; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.metro-station-links a:hover { border-color: rgba(17, 26, 34, .1); background: #f5f2eb; transform: translateY(-1px); }
.metro-station-links a > i { width: 7px; height: 7px; border: 2px solid var(--line-color); border-radius: 50%; }
.metro-station-links strong { display: block; font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-size: 14px; font-weight: 600; line-height: 1.12; }
.metro-station-links small { margin-top: 4px; color: #81898f; display: block; font-size: 6px; letter-spacing: .045em; text-transform: uppercase; }
.metro-station-links a > b { color: #245e67; font-size: 13px; font-weight: 400; opacity: 0; transform: translate(-3px, 3px); transition: 160ms ease; }
.metro-station-links a:hover > b { opacity: 1; transform: none; }

.metro-directory-cta { padding: 0 0 70px; }
.metro-directory-cta__inner { min-height: 175px; padding: 34px 38px; color: #fffefa; background: linear-gradient(118deg, #245e67, #17313b); display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(260px, .8fr) auto; align-items: center; gap: 44px; }
.metro-directory-cta p { margin: 0; color: rgba(255, 255, 255, .62); font-size: 9px; line-height: 1.65; }
.metro-directory-cta__inner > div > p { margin-bottom: 8px; color: #9bc2be; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.metro-directory-cta h2 { margin: 0; font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-size: 30px; font-weight: 400; line-height: 1.05; }
.metro-directory-cta a { min-height: 43px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .32); display: flex; align-items: center; gap: 24px; font-size: 8px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; transition: color 160ms ease, background 160ms ease; }
.metro-directory-cta a:hover { color: #17313b; background: #fff; }
.metro-directory-cta a span { font-size: 16px; font-weight: 400; }

@media (max-width: 1180px) {
  .metro-station-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metro-line-jumps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metro-line-jumps a:not(:nth-child(5n + 1)) { border-left: 0; }
  .metro-line-jumps a:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(17, 26, 34, .1); }
}

@media (max-width: 850px) {
  .metro-directory-hero { min-height: 0; padding: 45px 0; }
  .metro-directory-hero__grid { grid-template-columns: minmax(0, 1fr) 190px; gap: 35px; }
  .metro-breadcrumbs { margin-bottom: 30px; }
  .metro-directory-count { min-height: 205px; padding: 23px; }
  .metro-directory-count > span { font-size: 59px; }
  .metro-directory-intro__heading { grid-template-columns: 1fr 1.4fr; }
  .metro-directory-intro__heading > p { grid-column: 1 / -1; }
  .metro-line-card { grid-template-columns: 215px minmax(0, 1fr); }
  .metro-station-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metro-directory-cta__inner { grid-template-columns: 1fr auto; gap: 25px; }
  .metro-directory-cta__inner > p { grid-column: 1 / -1; grid-row: 2; }
  .metro-directory-cta__inner > a { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 620px) {
  .metro-directory-hero { padding: 34px 0 38px; }
  .metro-directory-hero__grid { display: block; }
  .metro-directory-hero h1 { font-size: 46px; }
  .metro-directory-lead { font-size: 11px; }
  .metro-directory-count { min-height: 0; margin-top: 30px; padding: 18px 0 0; border-width: 1px 0 0; background: transparent; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 14px; backdrop-filter: none; }
  .metro-directory-count > span { font-size: 44px; }
  .metro-directory-count p { margin: 0; }
  .metro-directory-count a { padding: 0; border: 0; align-self: center; gap: 12px; }
  .metro-directory-count a b { display: none; }
  .metro-route-art { display: none; }
  .metro-directory-intro { padding: 32px 0 26px; }
  .metro-directory-intro__heading { display: block; }
  .metro-directory-intro__heading h2 { margin: 9px 0 13px; font-size: 32px; }
  .metro-line-jumps { margin-top: 23px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metro-line-jumps a:not(:nth-child(3n + 1)) { border-left: 0; }
  .metro-line-jumps a:nth-child(even) { border-left: 1px solid rgba(17, 26, 34, .1); }
  .metro-line-jumps span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .metro-directory { padding: 27px 0 45px; }
  .metro-line-card { display: block; }
  .metro-line-card__heading { padding: 19px; border-right: 0; border-bottom: 1px solid rgba(17, 26, 34, .1); }
  .metro-station-links { padding: 7px; grid-template-columns: 1fr; }
  .metro-station-links a { min-height: 55px; }
  .metro-station-links a > b { opacity: .55; transform: none; }
  .metro-directory-cta { padding-bottom: 45px; }
  .metro-directory-cta__inner { padding: 27px 22px; display: block; }
  .metro-directory-cta h2 { font-size: 27px; }
  .metro-directory-cta__inner > p { margin-top: 15px; }
  .metro-directory-cta a { width: fit-content; margin-top: 23px; }
}