/* Layout: containers, header, heroes, section grids and footer. Mobile-first. */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Header */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

.site-header__home {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

.logo {
  width: 120px;
  height: auto;
  fill: var(--ink);
}

.site-nav__list {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav__link[aria-current="page"] span {
  border-bottom: 1.5px solid var(--ink);
}

.site-nav__link:hover {
  color: var(--white);
}

/* Hero (home, investors, careers, roles) */
.hero {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 48px;
  min-height: min(84vh, 820px);
  padding-block: 48px;
}

/* A hero without the tall opening space, for reference pages such as the FAQ. */
.hero--compact {
  grid-template-rows: none;
  gap: 32px;
  min-height: 0;
  padding-block: 32px 64px;
}

.hero--compact .hero__title {
  align-self: start;
}

.hero__title {
  align-self: center;
  max-width: 9ch;
  font-size: clamp(72px, 13.5vw, 220px);
}

.hero__title--home {
  max-width: none;
  /* Shrink on small screens so the longest line, CUSTOMER, always fits the width. */
  font-size: min(clamp(72px, 13.5vw, 220px), calc((100vw - 48px) / 5.6));
  text-wrap: nowrap;
}

.hero__title--role {
  max-width: 14ch;
  font-size: clamp(48px, 7.5vw, 128px);
}

.hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.hero-meta__action {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Speedway hero */
.fl-hero {
  display: grid;
  gap: 64px;
  padding-block: 32px 64px;
}

.fl-hero__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}

.fl-hero__meta .btn {
  justify-self: start;
}

/* Phones show "Get in touch" under the intro; wider screens show it top right.
   Scoped to .fl-hero so these beat .btn, which loads later in components.css. */
.fl-hero .fl-hero__cta--top {
  display: none;
}

.fl-hero .fl-hero__cta--bottom {
  justify-self: start;
  margin-top: 8px;
}

.fl-hero__win {
  display: grid;
  gap: 24px;
  max-width: 900px;
}

.fl-hero__win .lead {
  max-width: 52ch;
  color: var(--ink);
  font-weight: 500;
}

.fl-hero__line {
  margin: 0;
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Sections */
.block {
  padding-block: clamp(72px, 9vw, 128px);
}

.rule {
  border-top: 1px solid var(--line);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 64px;
}

.section-head .display {
  font-size: clamp(52px, 7.5vw, 128px);
}

.section-head--stack .display {
  max-width: 14ch;
}

/* Home: the Speedway slab */
.slab__inner {
  display: grid;
  gap: 96px;
  padding-block: 48px;
}

.slab__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}

.slab__line {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.slab__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

/* Home: investors + careers */
.duo {
  display: grid;
  grid-template-columns: 1fr;
}

.duo__item {
  display: grid;
  gap: 40px;
  align-content: start;
  padding-block: 96px;
}

.duo__item + .duo__item {
  border-top: 1px solid var(--line);
}

.duo__item .display {
  font-size: clamp(56px, 7vw, 120px);
}

/* Investors: copy + form */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

.split__copy {
  display: grid;
  gap: 32px;
}

.split__copy .display {
  font-size: clamp(52px, 7vw, 120px);
}

/* Footer: brand, three link columns, then a slim legal line. */
.site-footer__inner {
  display: grid;
  gap: 64px;
  padding-block: 96px 32px;
  border-top: 1px solid var(--line);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.site-footer__brand {
  display: grid;
  gap: 16px;
  align-content: start;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}

/* Studio and Legal sit side by side on small screens; Contact runs full width below. */
.site-footer__columns .footer-col:last-child {
  grid-column: 1 / -1;
}

.footer-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

.footer-nav__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 14px/1.2 var(--font);
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.footer-nav__link:hover {
  color: var(--white);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.copyright {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* sm: 576px */
@media (min-width: 576px) {

}

/* md: 768px */
@media (min-width: 768px) {
  .site-nav__list {
    gap: 48px;
  }

  .site-nav__link {
    font-size: 14px;
  }

  .hero-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-meta__action {
    grid-column: 4;
    align-self: start;
    justify-self: end;
  }

  .fl-hero__meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fl-hero__meta .label {
    grid-column: 1 / span 2;
  }

  .fl-hero__meta .btn {
    grid-column: 4;
    justify-self: end;
  }

  .fl-hero .fl-hero__cta--top {
    display: inline-flex;
  }

  .fl-hero .fl-hero__cta--bottom {
    display: none;
  }

  .section-head {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .section-head .label {
    grid-column: 1;
  }

  .section-head .display {
    grid-column: 2 / span 3;
  }

  .section-head--stack {
    grid-template-columns: 1fr;
  }

  .section-head--stack .label,
  .section-head--stack .display {
    grid-column: 1;
  }

  .slab__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .slab__line {
    grid-column: 1 / span 2;
  }

  .slab__actions {
    grid-column: 3 / span 2;
    justify-content: flex-end;
  }
}

/* lg: 992px */
@media (min-width: 992px) {
  .site-footer__top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .site-footer__columns {
    grid-column: 2 / span 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .site-footer__columns .footer-col:last-child {
    grid-column: auto;
  }

  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .duo__item:first-child {
    padding-right: 48px;
  }

  .duo__item + .duo__item {
    padding-left: 48px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}