/* Contact block: WhatsApp, a short form and the email address, shared by the
   dark motorsport pages and the light athletics page. The form composes the
   message and hands it to WhatsApp or to the visitor's mail app, so it needs
   no backend and stores nothing. */
.rl-contact { width: min(660px, calc(100% - 40px)); margin: 40px auto 0; text-align: left; }

/* The form leads; the direct channels sit under it.
   .contact .btn--solid still carries the margin from the single-button layout
   that used to live here, and in a stretch row that margin set the line height
   and left the email button taller. */
.rl-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: center; margin: 0; }
.rl-contact .btn { margin: 0; }   /* every button in the block, not just the direct pair */
.rl-contact-direct { margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.12); }
.theme-light .rl-contact-direct { border-top-color: rgba(10,10,14,.14); }
.rl-contact-direct > p { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; opacity: .66; text-align: center; margin: 0 0 16px; }
.rl-wa { display: inline-flex; align-items: center; gap: 10px; }
.rl-wa svg { width: 19px; height: 19px; flex-shrink: 0; }

.rl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.rl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rl-field--wide { grid-column: 1 / -1; }
.rl-field > label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; opacity: .72;
}
.rl-field :is(input, select, textarea) {
  width: 100%; min-height: 46px; padding: 11px 13px;
  font: 400 15px/1.5 var(--font-text); color: inherit;
  background-color: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px; transition: border-color .2s, background .2s;
}
.rl-field textarea { min-height: 88px; resize: vertical; }
.rl-field :is(input, select, textarea):focus-visible {
  outline: none; border-color: var(--engine, #8d83ff); background-color: rgba(255,255,255,.07);
}
.rl-field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
/* The light athletics page needs its own contrast. */
.theme-light .rl-field :is(input, select, textarea) { background-color: rgba(10,10,14,.04); border-color: rgba(10,10,14,.2); }
.theme-light .rl-field :is(input, select, textarea):focus-visible { border-color: var(--coral, #ff4d2e); background-color: rgba(10,10,14,.06); }

.rl-form-send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 12px; margin-top: 14px; }
.rl-form-note { font-size: 13px; line-height: 1.6; opacity: .66; margin: 14px auto 0; max-width: 54ch;
  text-align: center; grid-column: 1 / -1; }
.rl-form-note a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .rl-form { grid-template-columns: 1fr; }
  /* The two ways to send stay side by side on a phone: they are a choice,
     and stacking them read as one action above another. */
  .rl-form-send, .rl-contact-actions { flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .rl-form-send .btn, .rl-contact-actions .btn {
    flex: 1 1 0; min-width: 0; padding-inline: 12px;
    font-size: 11px; letter-spacing: .06em;
  }
  .rl-wa svg { width: 16px; height: 16px; }
}

/* .btn carries no colour of its own, so an anchor inherits the page's while a
   button falls back to the black the browser paints. */
.rl-form button.btn { color: inherit; font-family: var(--font-mono); }
.rl-form button.btn--solid { color: #fff; }
.theme-light .rl-form button.btn:not(.btn--solid) { color: var(--ink, #0a0a0e); }

/* The last single field would otherwise dangle beside an empty half. */
.rl-field--last { grid-column: 1 / -1; }

/* A link that jumps to #contact used to land with the header covering the
   kicker, so the section opened on a cut line. The id beats the blanket
   .ms2 [id] { scroll-margin-top: 0 } that the motorsport page sets. */
#contact { scroll-margin-top: 96px; }

/* The promise sits above the small print: it is the reason to press send. */
.rl-form-promise { grid-column: 1 / -1; max-width: 54ch; margin: 16px auto 0; text-align: center;
  font-size: 14.5px; line-height: 1.6; }
.rl-form-promise strong { display: block; color: var(--engine, #8d83ff); }
.theme-light .rl-form-promise strong { color: var(--coral, #ff4d2e); }
/* All that is left of the note is the link, so it recedes. */
.rl-form-note { font-size: 12.5px; opacity: .5; }