/*
  Rev Republic
  Built against Brand Book v1.0. Flat surfaces, sharp corners, three
  colours. If you add a gradient, a shadow or a border radius here, you
  have left the brand.
*/

/* =================================================================
   1. Reset
   ================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* =================================================================
   2. Type
   ================================================================= */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}

.display--mega {
  font-size: var(--t-mega);
  font-weight: 900;
  line-height: 0.86;
}

.display--hero {
  font-size: var(--t-hero);
  font-weight: 900;
  line-height: 0.9;
}

.display--h2 {
  font-size: var(--t-h2);
}

.display--h3 {
  font-size: var(--t-h3);
}

/*
  Throttle Red and small text do not mix.

  Measured against both brand surfaces: #ED1C24 scores 4.49:1 on Asphalt
  Black and 4.38:1 on Lane White. WCAG AA wants 4.5:1 for normal text, so
  red fails as body or label text on either one. It clears the 3:1 bar for
  large text and for UI accents comfortably.

  So the rule across this site: red carries display type, rules, borders,
  dots and fills. It never carries a small word. That is also closer to
  Brand Book 11, which puts red on "one key word in a headline" and on
  "accent rules, dividers, or callout dots", not on labels.
*/
.hot {
  color: var(--red);
}

.fold-red .hot {
  color: var(--black);
}

/* Mono is for specs, times, distances and codes. Not decoration. */
.eyebrow,
.spec {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  margin: 0;
  line-height: 1.4;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  color: var(--muted);
}

.eyebrow::before {
  content: '';
  width: 1.75em;
  height: 2px;
  background: var(--red);
  flex: none;
}

.fold-red .eyebrow::before {
  background: var(--black);
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  max-width: var(--measure);
  margin: 0;
  color: var(--muted);
}

.fold-red .lede {
  color: var(--white);
}

.prose {
  max-width: var(--measure);
  color: var(--muted);
}

.prose > * + * {
  margin-top: var(--s2);
}

.prose p {
  margin: 0;
}

a {
  color: inherit;
}

/* =================================================================
   3. Layout
   ================================================================= */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--tight {
  max-width: 860px;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

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

/*
  Red band, not a red page. Brand Book 11 rules out "large flat fields of
  red", and every small size on red fails contrast, so this holds display
  type and one button and stays short.
*/
.section--band {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.fold-red .lede {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: 500;
  line-height: 1.3;
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

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

/* =================================================================
   4. Navigation
   ================================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.nav__brand {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

/* Brand Book 06: the wordmark is the navigation mark. */
.nav__wordmark {
  height: 42px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  text-decoration: none;
  color: var(--muted);
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--white);
}

.nav__link[aria-current='page'] {
  color: var(--white);
  border-bottom-color: var(--red);
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  /* The links become absolutely positioned below, so the <nav> that
     wraps them collapses to zero width. Without this the toggle lands
     in the middle of the bar instead of at the right edge. */
  .nav__toggle {
    display: block;
    margin-left: auto;
  }

  .nav__links {
    position: absolute;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--black);
    border-bottom: 1px solid var(--line);
    padding: var(--s2) var(--gutter) var(--s4);
  }

  .nav__links[hidden] {
    display: none;
  }

  /* An inline <a> ignores vertical padding for layout, so its underline
     lands on top of the next item's text. Block fixes both. */
  .nav__link {
    display: block;
    padding-block: 1rem;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-small);
  }

  .nav__link[aria-current='page'] {
    border-bottom-color: var(--red);
  }

  .nav__links .btn {
    display: flex;
    width: 100%;
    margin-top: var(--s3);
    justify-content: center;
    border-bottom-color: var(--red);
  }
}

/* =================================================================
   5. Buttons
   ================================================================= */

/*
  19px, not 14px. White on Throttle Red measures 4.38:1, which passes the
  3:1 large-text bar but fails the 4.5:1 normal-text bar. Bold type counts
  as large from 18.66px up, so the red CTA only clears AA at this size.
  It also reads more like the brand.
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
  line-height: 1;
  padding: 0.95em 1.7em;
  min-height: 3rem;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* The small button cannot reach large-text size, so it never fills with
   red. It outlines in red instead: the border is a UI accent at 4.49:1
   and the label stays white on black at 19.68:1. */
.btn--sm {
  padding: 0.85em 1.4em;
  font-size: var(--t-micro);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  min-height: 2.75rem;
}

.btn--sm.btn--primary {
  background: transparent;
  border-color: var(--red);
  color: var(--white);
}

/* Hover inverts to white rather than filling red, because an 11px label
   on red would land back at 4.38:1. */
.btn--sm.btn--primary:hover,
.btn--sm.btn--primary:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.fold-white .btn--sm.btn--primary {
  color: var(--black);
}

.fold-white .btn--sm.btn--primary:hover,
.fold-white .btn--sm.btn--primary:focus-visible {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.fold-white .btn--primary:hover,
.fold-white .btn--primary:focus-visible {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.fold-red .btn--primary {
  background: var(--black);
  border-color: var(--black);
}

.fold-red .btn--primary:hover,
.fold-red .btn--primary:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: currentColor;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: currentColor;
  background: currentColor;
}

.fold-black .btn--ghost:hover,
.fold-black .btn--ghost:focus-visible {
  color: var(--black);
}

.fold-white .btn--ghost:hover,
.fold-white .btn--ghost:focus-visible {
  color: var(--white);
}

.fold-red .btn--ghost:hover,
.fold-red .btn--ghost:focus-visible {
  color: var(--red);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* On a phone, buttons of different widths stacked on top of each other
   read as untidy rather than editorial. Match them. */
@media (max-width: 520px) {
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =================================================================
   6. Hero
   ================================================================= */

.hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: var(--s7) var(--s6);
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  display: grid;
  gap: var(--s4);
  width: 100%;
}

.hero__title {
  margin-block: var(--s1) 0;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.hero__meta .spec {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}

.hero__meta b {
  color: var(--white);
  font-weight: 500;
}

/* =================================================================
   7. Pillars
   ================================================================= */

/*
  Three items, so this is deliberately not auto-fit. Auto-fit gave two
  columns on a tablet and left the third item alone in a half empty row,
  which reads as a mistake rather than a layout. Three across or one
  down, nothing in between.
*/
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

@media (min-width: 900px) {
  .pillars {
    /* minmax(0, 1fr), not 1fr. Plain 1fr will not shrink a column below
       its own content, so three items with different amounts of copy come
       out three different widths. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pillar {
  background: var(--black);
  padding: var(--s5) var(--s4) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.fold-white .pillar,
.fold-white .step {
  background: var(--white);
}

.pillar__index {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--red);
  margin: 0 0 var(--s3);
}

.pillar__title {
  margin: 0;
}

.pillar__role {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  margin: 0;
}

.pillar__body {
  margin: var(--s1) 0 0;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.7;
}

/* =================================================================
   8. Cards, used by apps and the partner block
   ================================================================= */

/* Three apps. Same reasoning as .pillars: three across or one down. */
.cards {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .cards {
    /* minmax(0, 1fr), not 1fr. Plain 1fr will not shrink a column below
       its own content, so three items with different amounts of copy come
       out three different widths. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  border: 1px solid var(--line);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: border-color var(--dur) var(--ease);
}

.card:hover {
  border-color: var(--line-strong);
}

.card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s1);
}

.card__title {
  margin: 0;
}

.card__body {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.7;
  flex: 1;
}

.card__actions {
  margin-top: var(--s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

/* Status chips. These state what is true today and nothing more. */
.chip {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  padding: 0.4em 0.7em;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
  flex: none;
}

/* A red fill behind an 11px label is 4.38:1. Red border plus a red dot
   carries the same "this one is live" signal as pure UI accent, and the
   label stays white on black. */
.chip--live {
  border-color: var(--red);
  color: var(--white);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.chip--live::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  background: var(--red);
  border-radius: 50%;
  flex: none;
}

/* =================================================================
   9. The code, used on About
   ================================================================= */

.code-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 54rem;
}

/* Each row is its own grid, so the label column is a declared width
   rather than content-sized. Two-digit indices want a narrow one, word
   labels like "Relationship" want a wide one. */
.code-list {
  --code-label: 3.5rem;
}

.code-list--wide {
  --code-label: 7.5rem;
}

.code-list li {
  display: grid;
  grid-template-columns: var(--code-label) 1fr;
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s3) 0 var(--s3) var(--s2);
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.code-list li:hover {
  border-left-color: var(--red);
}

/* The label was red at 11px (4.49:1, fails AA). Muted white reads at
   7.71:1; the red now lives in the rule on the left edge. */
.code-list .spec {
  color: var(--muted);
}

/* =================================================================
   10. Steps, used on Join
   ================================================================= */

/* Apply, Review, Ride. Three, so the same rule applies. */
.steps {
  display: grid;
  gap: 1px;
  background: var(--line);
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
}

@media (min-width: 900px) {
  .steps {
    /* minmax(0, 1fr), not 1fr. Plain 1fr will not shrink a column below
       its own content, so three items with different amounts of copy come
       out three different widths. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  background: var(--black);
  padding: var(--s4);
}

/* Index was red at 11px (4.49:1, fails). The number takes the fold's own
   foreground now and the red moved to a rule above it, where it is an
   accent rather than text. currentColor matters here: these steps sit on
   a white fold, and a hardcoded white would have been invisible. */
.step__index {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  color: currentColor;
  margin: 0 0 var(--s2);
  padding-top: var(--s2);
  border-top: 2px solid var(--red);
  display: inline-block;
}

.step__title {
  margin: 0 0 var(--s1);
}

.step__body {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.7;
}

/* =================================================================
   12. Form
   ================================================================= */

.form {
  display: grid;
  gap: var(--s4);
  max-width: 44rem;
}

.field {
  display: grid;
  gap: 0.6rem;
}

.field__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
}

/* The asterisk is decorative repetition: the `required` attribute is what
   actually tells assistive tech, and it is aria-hidden in the markup. It
   stays white because red at this size fails AA. */
.field__label .req,
.check .req {
  color: var(--white);
}

.field__hint {
  font-size: var(--t-small);
  color: var(--muted);
  margin: 0;
}

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='url'],
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--line-strong);
  padding: 0.95rem 1rem;
  font-size: var(--t-body);
  transition: border-color var(--dur) var(--ease);
}

/* Was 0.34 alpha, which resolved to 3.04:1 and failed AA. At 0.62 it
   reads as 7.71:1 and still sits clearly below the pure white of a
   real value. */
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--white);
}

/* Flat chevron as an SVG, because the brand has no gradients and the
   usual CSS arrow trick is two of them. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}

.field select option {
  background: var(--black);
  color: var(--white);
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.fieldset {
  border: 1px solid var(--line);
  padding: var(--s3);
  margin: 0;
  display: grid;
  gap: var(--s2);
}

.fieldset legend {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--white);
  padding-inline: 0.5rem;
}

.check {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: var(--t-small);
  color: var(--muted);
  cursor: pointer;
  /* Keeps 8px between adjacent targets, per touch spacing guidance. */
  padding-block: 0.25rem;
}

/* WCAG 2.2 Target Size (Minimum) wants 24 CSS px. This was 20. */
.check input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  accent-color: var(--red);
  flex: none;
}

/* Honeypot. Hidden from people, visible to the robots that fill it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  font-size: var(--t-small);
  border-left: 2px solid var(--red);
  padding-left: var(--s2);
  margin: 0;
}

.form__status[hidden],
.form__errors[hidden] {
  display: none;
}

/*
  Error summary. Sits at the top of the form, takes focus after a failed
  submit, and links to each invalid field. Inline errors stay in place
  underneath; this complements them rather than replacing them.
*/
.form__errors {
  border: 2px solid var(--red);
  padding: var(--s3);
  display: grid;
  gap: var(--s2);
}

.form__errors h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: var(--t-h3);
  margin: 0;
}

.form__errors ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
  font-size: var(--t-small);
}

.form__errors a {
  color: var(--white);
}

/* Per-field error. White text, red rule. Red text at this size would
   measure 4.49:1 and fail, so the colour cue is the border. */
.field__error {
  font-size: var(--t-small);
  color: var(--white);
  border-left: 2px solid var(--red);
  padding-left: 0.75rem;
  margin: 0;
}

.field__error[hidden] {
  display: none;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--red);
  border-width: 2px;
}

/* =================================================================
   13. Footer
   ================================================================= */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s6) var(--s4);
}

.footer__grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: auto 1fr 1fr;
    gap: var(--s6);
  }
}

/* Brand Book 08: never below 64px. */
.footer__badge {
  width: var(--badge-min);
  height: auto;
}

.footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  margin: 0 0 var(--s2);
  font-weight: 500;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer__col a {
  text-decoration: none;
  color: var(--white);
  font-size: var(--t-small);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.footer__col a:hover,
.footer__col a:focus-visible {
  border-bottom-color: var(--red);
}

.footer__base {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: space-between;
  color: var(--muted);
}

/* =================================================================
   14. Focus and skip link
   ================================================================= */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.fold-red :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--black);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--red);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
}

/* Spacing utilities. Deliberately few, so they do not become a system
   of their own competing with the tokens. */
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}