.teams-page {
  --teams-ink: #050505;
  --teams-paper: #f3f0e8;
  --teams-gold: #f0ca70;
  --teams-line: rgba(240, 202, 112, 0.28);
  background: var(--teams-ink);
}

.teams-page main {
  overflow: hidden;
}

.teams-page .section-kicker,
.teams-eyebrow {
  letter-spacing: 0;
}

.teams-hero-premium {
  position: relative;
  display: flex;
  height: calc(100svh - 44px);
  min-height: 650px;
  max-height: 860px;
  align-items: flex-end;
  isolation: isolate;
}

.teams-hero-premium__media,
.teams-hero-premium__media::after {
  position: absolute;
  inset: 0;
}

.teams-hero-premium__media {
  z-index: -1;
  margin: 0;
}

.teams-hero-premium__media::after {
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.48) 53%, rgba(0, 0, 0, 0.12) 78%),
    linear-gradient(0deg, #050505 0%, transparent 42%);
}

.teams-hero-premium__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.teams-hero-premium__content {
  width: min(100% - 48px, var(--content-width));
  margin: 0 auto;
  padding: 0 0 76px;
}

.teams-hero-premium h1 {
  max-width: 980px;
  margin: 18px 0 24px;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: 7rem;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: 0;
}

.teams-hero-premium__content > p:not(.section-kicker) {
  max-width: 560px;
  margin: 0;
  color: #fff;
  font-size: 1.04rem;
  line-height: 1.65;
}

.teams-hero-premium__actions,
.teams-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.teams-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid var(--teams-gold);
  color: #050505;
  background: var(--teams-gold);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
}

.teams-button--ghost {
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}

.teams-button:hover,
.teams-button:focus-visible {
  color: #050505;
  background: #fff;
  border-color: #fff;
}

.teams-intro {
  padding: 112px 24px 84px;
  background: #080808;
}

.teams-intro__grid,
.team-finder__inner,
.teams-crosslinks__inner,
.teams-final-premium__inner {
  width: min(100%, var(--content-width));
  margin: 0 auto;
}

.teams-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(420px, 1.16fr);
  gap: 72px;
  align-items: end;
}

.teams-intro h2,
.team-finder h2,
.teams-crosslinks h2,
.teams-final-premium h2 {
  margin: 12px 0 20px;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: 4.8rem;
  line-height: 0.92;
  letter-spacing: 0;
}

.teams-intro__copy > p:not(.section-kicker),
.team-finder__copy > p:not(.section-kicker),
.teams-crosslinks__heading > p:not(.section-kicker),
.teams-final-premium__inner > p:not(.section-kicker) {
  max-width: 650px;
  color: var(--muted-white);
  line-height: 1.7;
}

.teams-intro__visual {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.teams-intro__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teams-intro__visual figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  color: #050505;
  background: var(--teams-gold);
  font-size: 0.66rem;
  font-weight: 900;
}

.team-index-wrap {
  width: min(100%, var(--content-width));
  margin: 72px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--teams-line);
}

.team-index-label {
  margin: 0 0 14px;
  color: var(--teams-gold);
  font-size: 0.66rem;
  font-weight: 900;
}

.team-index {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-color: var(--teams-gold) #191919;
}

.team-index a {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 800;
}

.team-index a:hover,
.team-index a:focus-visible {
  border-color: var(--teams-gold);
  color: var(--teams-gold);
}

.team-catalog {
  padding: 0 24px 108px;
  background: #080808;
}

.team-filter-bar-premium {
  display: flex;
  width: min(100%, var(--content-width));
  gap: 8px;
  margin: 0 auto 54px;
  overflow-x: auto;
  padding: 2px 0 12px;
  scrollbar-color: var(--teams-gold) #191919;
}

.team-filter-bar-premium button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(240, 202, 112, 0.34);
  color: #dedbd3;
  background: transparent;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
}

.team-filter-bar-premium button:hover,
.team-filter-bar-premium button.is-active {
  color: #050505;
  background: var(--teams-gold);
}

.team-roster {
  width: min(100%, var(--content-width));
  margin: 0 auto;
}

.team-roster-group {
  margin: 0 0 86px;
  scroll-margin-top: 100px;
}

.team-roster-group[hidden] {
  display: none;
}

.team-roster-group__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.48fr);
  gap: 32px;
  align-items: end;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--teams-gold);
}

.team-roster-group__heading h2 {
  margin: 0;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0;
}

.team-roster-group__heading p {
  justify-self: end;
  max-width: 380px;
  margin: 0;
  color: var(--muted-white);
  font-size: 0.8rem;
  line-height: 1.55;
}

.team-roster-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  padding-top: 12px;
}

.team-roster-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 320px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: #101010;
  scroll-margin-top: 116px;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.team-roster-card:nth-child(4n + 1) {
  grid-column: span 7;
  background: #12120f;
}

.team-roster-card:nth-child(4n + 2) {
  grid-column: span 5;
  min-height: 370px;
}

.team-roster-card:nth-child(4n + 3) {
  grid-column: span 5;
  min-height: 370px;
}

.team-roster-card:nth-child(4n + 4) {
  grid-column: span 7;
  background: #0c0c0c;
}

.team-roster-card:hover,
.team-roster-card:focus-within {
  border-color: var(--teams-gold);
  background: #171610;
  transform: translateY(-3px);
}

.team-roster-card__number {
  color: var(--teams-gold);
  font-size: 0.74rem;
  font-weight: 900;
}

.team-roster-card__main {
  align-self: center;
  padding: 34px 0;
}

.team-roster-card__main h3 {
  max-width: 100%;
  margin: 0 0 16px;
  color: #fff;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: 4.4rem;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.team-roster-card__category {
  margin: 0;
  color: var(--teams-gold);
  font-size: 0.76rem;
  font-weight: 900;
}

.team-roster-card__facts {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 14px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.team-roster-card__facts div {
  min-width: 0;
}

.team-roster-card__facts dt {
  margin: 0 0 6px;
  color: #8f8f8f;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.team-roster-card__facts dd {
  margin: 0;
  color: #f4f1e9;
  font-size: 0.78rem;
  line-height: 1.35;
}

.team-roster-card__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  color: var(--teams-gold);
  font-size: 0.7rem;
  font-weight: 900;
}

.team-roster-card__link:hover,
.team-roster-card__link:focus-visible {
  color: #fff;
}

.team-catalog__note {
  width: min(100%, var(--content-width));
  margin: -34px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #aaa;
  font-size: 0.76rem;
  line-height: 1.6;
}

.teams-mid-cta {
  padding: 76px 24px;
  color: #080808;
  background: var(--teams-gold);
}

.teams-mid-cta__inner {
  display: grid;
  width: min(100%, var(--content-width));
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  margin: 0 auto;
}

.teams-mid-cta p {
  margin: 0 0 12px;
  font-size: 0.68rem;
  font-weight: 900;
}

.teams-mid-cta h2 {
  max-width: 900px;
  margin: 0;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: 4.2rem;
  line-height: 0.92;
  letter-spacing: 0;
}

.teams-mid-cta .teams-button {
  border-color: #080808;
  color: #fff;
  background: #080808;
}

.teams-story-band {
  position: relative;
  min-height: 610px;
  isolation: isolate;
}

.teams-story-band picture,
.teams-story-band picture::after {
  position: absolute;
  inset: 0;
}

.teams-story-band picture {
  z-index: -1;
}

.teams-story-band picture::after {
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.18) 72%);
}

.teams-story-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.teams-story-band__copy {
  width: min(100% - 48px, var(--content-width));
  margin: 0 auto;
  padding-top: 190px;
}

.teams-story-band h2 {
  max-width: 760px;
  margin: 12px 0 0;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: 5rem;
  line-height: 0.9;
  letter-spacing: 0;
}

.team-finder {
  padding: 112px 24px;
  color: #0a0a0a;
  background: var(--teams-paper);
}

.team-finder__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(480px, 1.2fr);
  gap: 84px;
  align-items: start;
}

.team-finder .section-kicker {
  color: #7b5818;
}

.team-finder__copy > p:not(.section-kicker) {
  color: #454545;
}

.team-finder__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  padding: 34px 0;
  border-top: 1px solid #8e784e;
  border-bottom: 1px solid #8e784e;
}

.team-finder__field {
  display: grid;
  gap: 9px;
}

.team-finder__field--wide,
.team-finder__submit,
.team-finder__result {
  grid-column: 1 / -1;
}

.team-finder__field label {
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.team-finder__field input,
.team-finder__field select {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid #837a67;
  border-radius: 0;
  color: #080808;
  background: #fff;
  font: inherit;
}

.team-finder__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.team-finder__submit p {
  max-width: 420px;
  margin: 0;
  color: #555;
  font-size: 0.73rem;
  line-height: 1.5;
}

.team-finder__submit button {
  border-color: #080808;
  color: #fff;
  background: #080808;
  cursor: pointer;
}

.team-finder__result {
  padding: 24px;
  color: #fff;
  background: #0a0a0a;
}

.team-finder__result[hidden] {
  display: none;
}

.team-finder__result h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}

.team-finder__result p {
  margin: 0;
  color: #d5d5d5;
  line-height: 1.55;
}

.team-finder__result .teams-button {
  margin-top: 20px;
}

.teams-crosslinks {
  padding: 108px 24px;
  background: #0a0a0a;
}

.teams-crosslinks__heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
  gap: 50px;
  align-items: end;
  margin-bottom: 52px;
}

.teams-crosslinks__heading h2 {
  font-size: 3.8rem;
}

.teams-crosslinks__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--teams-line);
}

.teams-crosslinks__list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 900;
}

.teams-crosslinks__list a:nth-child(odd) {
  padding-right: 28px;
}

.teams-crosslinks__list a:nth-child(even) {
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.teams-crosslinks__list a span:last-child {
  color: var(--teams-gold);
}

.teams-crosslinks__list a:hover,
.teams-crosslinks__list a:focus-visible {
  color: var(--teams-gold);
}

.teams-final-premium {
  padding: 116px 24px;
  color: #090909;
  background: #f5f3ee;
}

.teams-final-premium h2 {
  max-width: 1050px;
  font-size: 5.6rem;
}

.teams-final-premium__inner > p:not(.section-kicker) {
  color: #474747;
}

.teams-final-premium .teams-button--ghost {
  color: #090909;
  background: transparent;
  border-color: #090909;
}

.teams-page [data-roster-status] {
  width: min(100%, var(--content-width));
  margin: -30px auto 44px;
  color: var(--teams-gold);
  font-size: 0.74rem;
}

@media (max-width: 1100px) {
  .teams-hero-premium h1 {
    font-size: 5.8rem;
  }

  .teams-intro__grid,
  .team-finder__inner {
    gap: 48px;
  }

  .teams-intro h2,
  .team-finder h2 {
    font-size: 4rem;
  }

  .team-roster-card__main h3 {
    font-size: 3.5rem;
  }
}

@media (max-width: 820px) {
  .teams-hero-premium__content,
  .teams-story-band__copy {
    width: min(100% - 40px, var(--content-width));
  }

  .teams-hero-premium h1 {
    font-size: 4.8rem;
  }

  .teams-intro,
  .team-finder,
  .teams-crosslinks,
  .teams-final-premium {
    padding-right: 20px;
    padding-left: 20px;
  }

  .teams-intro__grid,
  .team-finder__inner,
  .teams-crosslinks__heading {
    grid-template-columns: 1fr;
  }

  .teams-intro__visual {
    aspect-ratio: 4 / 3;
  }

  .team-roster-group__heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .team-roster-group__heading p {
    justify-self: start;
  }

  .team-roster-card,
  .team-roster-card:nth-child(n) {
    grid-column: span 6;
    min-height: 330px;
  }

  .team-roster-card__main h3 {
    font-size: 3rem;
  }

  .teams-mid-cta__inner {
    grid-template-columns: 1fr;
  }

  .teams-mid-cta h2,
  .teams-story-band h2 {
    font-size: 3.8rem;
  }
}

@media (max-width: 560px) {
  .teams-hero-premium {
    height: calc(100svh - 34px);
    min-height: 520px;
    max-height: 740px;
  }

  .teams-hero-premium__media::after {
    background: linear-gradient(0deg, #050505 0%, rgba(0, 0, 0, 0.78) 42%, rgba(0, 0, 0, 0.2) 88%);
  }

  .teams-hero-premium__media img {
    object-position: 55% center;
  }

  .teams-hero-premium__content {
    width: calc(100% - 36px);
    padding-bottom: 38px;
  }

  .teams-hero-premium h1 {
    margin: 10px 0 16px;
    font-size: 3.1rem;
    line-height: 0.92;
  }

  .teams-hero-premium__content > p:not(.section-kicker) {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .teams-hero-premium__actions {
    margin-top: 20px;
  }

  .teams-button {
    width: 100%;
  }

  .teams-intro {
    padding-top: 76px;
    padding-bottom: 60px;
  }

  .teams-intro h2,
  .team-finder h2,
  .teams-crosslinks h2,
  .teams-final-premium h2 {
    font-size: 3rem;
  }

  .team-index-wrap {
    margin-top: 48px;
  }

  .team-catalog {
    padding-right: 14px;
    padding-bottom: 82px;
    padding-left: 14px;
  }

  .team-filter-bar-premium {
    margin-bottom: 40px;
  }

  .team-roster-group {
    margin-bottom: 64px;
  }

  .team-roster-group__heading h2 {
    font-size: 2rem;
  }

  .team-roster-list {
    grid-template-columns: 1fr;
  }

  .team-roster-card,
  .team-roster-card:nth-child(n) {
    grid-column: 1;
    min-height: 300px;
    padding: 22px;
  }

  .team-roster-card__main {
    padding: 28px 0;
  }

  .team-roster-card__main h3 {
    font-size: 2.55rem;
    overflow-wrap: normal;
  }

  .team-roster-card__facts {
    grid-template-columns: 0.55fr 1.45fr;
  }

  .teams-mid-cta {
    padding: 64px 20px;
  }

  .teams-mid-cta h2,
  .teams-story-band h2 {
    font-size: 3rem;
  }

  .teams-story-band {
    min-height: 520px;
  }

  .teams-story-band picture::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1) 82%);
  }

  .teams-story-band img {
    object-position: 66% center;
  }

  .teams-story-band__copy {
    width: calc(100% - 40px);
    padding-top: 310px;
  }

  .team-finder,
  .teams-crosslinks,
  .teams-final-premium {
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .team-finder__form {
    grid-template-columns: 1fr;
  }

  .team-finder__field,
  .team-finder__submit,
  .team-finder__result {
    grid-column: 1;
  }

  .team-finder__submit {
    align-items: stretch;
    flex-direction: column;
  }

  .teams-crosslinks__heading {
    gap: 12px;
    margin-bottom: 38px;
  }

  .teams-crosslinks__list {
    grid-template-columns: 1fr;
  }

  .teams-crosslinks__list a:nth-child(n) {
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 340px) {
  .teams-hero-premium h1 {
    font-size: 2.75rem;
  }

  .team-roster-card__main h3 {
    font-size: 2.2rem;
  }

  .team-roster-card__facts {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-roster-card {
    transition: none;
  }
}