:root{
      --bg: #0b0c10;
      --panel: rgba(255,255,255,.06);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --line: rgba(255,255,255,.14);
      --maxw: 1100px;
      --radius: 18px;
    }
    * { box-sizing: border-box; }
    html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    a { color: inherit; text-decoration: none; }
    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

    /* HERO */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 560px;
      overflow: hidden;
      background: #000;
    }
    .slides {
      position:absolute; inset:0;
    }
    .slide {
      position:absolute; inset:0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transform: scale(1.03);
      transition: opacity 1.2s ease, transform 6s ease;
      will-change: opacity, transform;
    }
    .slide.active {
      opacity: 1;
      transform: scale(1.00);
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(60% 60% at 50% 35%, rgba(0,0,0,.25), rgba(0,0,0,.7)),
        linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.75));
      pointer-events:none;
    }
    .hero-center {
      position:absolute; inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index: 2;
      padding: 24px;
      text-align:center;
    }
    .logo-box {
      display:inline-flex;
      flex-direction:column;
      gap: 14px;
      align-items:center;
      justify-content:center;
      padding: 18px 22px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 22px;
      background: rgba(0,0,0,.25);
      backdrop-filter: blur(8px);
    }
    .logo {
      width: min(420px, 70vw);
      height: auto;
      display:block;
      filter: drop-shadow(0 10px 20px rgba(0,0,0,.55));
    }
    .tagline {
      font-size: 14px;
      color: var(--muted);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    /* NAV */
    .nav {
      position: sticky;
      top: 0;
      z-index: 5;
      backdrop-filter: blur(10px);
      background: rgba(10,10,12,.55);
      border-bottom: 1px solid var(--line);
    }
    .nav-inner {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 0;
    }
    .nav-title { font-weight: 650; letter-spacing: .02em; }
    .nav-links { display:flex; flex-wrap:wrap; gap: 10px 14px; font-size: 14px; color: var(--muted); }
    .nav-links a { padding: 6px 8px; border-radius: 10px; }
    .nav-links a:hover { background: rgba(255,255,255,.06); color: var(--text); }

    /* SECTIONS */
    section {
      padding: 76px 0;
      border-top: 1px solid var(--line);
    }
    h2 {
      margin: 0 0 14px;
      font-size: 28px;
      letter-spacing: .01em;
    }
    p { margin: 0 0 12px; color: var(--muted); line-height: 1.65; }
    .grid {
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
      margin-top: 18px;
    }
    .card {
      grid-column: span 6;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
    }
    .card h3 { margin: 0 0 8px; font-size: 18px; }
    .pill {
      display:inline-block;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--muted);
      margin-top: 6px;
    }

    /* RIDERS + SPONSORS */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

/* Make the <a> tiles behave like blocks (no underline, etc.) */
.tiles a.tile {
  text-decoration: none;
  color: inherit;
}

/* Uniform square cards with background image + overlay */
.tile.tile-bg {
  position: relative;
  overflow: hidden;

  aspect-ratio: 1 / 1;     /* <-- uniform squares */
  min-height: 0;           /* important when using aspect-ratio */

  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 16px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* text at bottom looks better on photos */
  gap: 6px;

  background-image:
    linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.20)),
    var(--bg);
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,.06); /* fallback if no image */
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

.tile.tile-bg strong {
  font-size: 15px;
  text-shadow: 0 10px 20px rgba(0,0,0,.55);
}
.tile.tile-bg span {
  color: rgba(255,255,255,.78);
  font-size: 13px;
  text-shadow: 0 10px 20px rgba(0,0,0,.55);
}

/* subtle sheen */
.tile.tile-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 35%, rgba(255,255,255,.08), rgba(0,0,0,0));
  pointer-events: none;
}

/* hover */
.tile.tile-bg:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  filter: saturate(1.05);
}

/* Responsive */
@media (max-width: 900px){
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .tiles { grid-template-columns: 1fr; }
}

/* Sponsor grid: same layout behavior as .tiles, but you can tweak counts if you want */
.tiles.tiles-sponsors{
  /* optional: make sponsors a bit “tighter” than riders */
  gap: 14px;
}

/* Uniform card */
.tile.tile-sponsor{
  position: relative;
  overflow: hidden;

  aspect-ratio: 1 / 1;
  min-height: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;

  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);

  /* premium glass */
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.06);
  backdrop-filter: blur(10px);

  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

/* Make <a> behave like a card */
.tiles a.tile.tile-sponsor{
  text-decoration: none;
  color: inherit;
}

/* Subtle sheen */
.tile.tile-sponsor::after{
  content:"";
  position:absolute; inset:-40%;
  background: linear-gradient(110deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 60%);
  transform: rotate(10deg) translateX(-35%);
  opacity: .35;
  pointer-events:none;
}

/* Title */
.tile.tile-sponsor strong{
  font-size: 15px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.88);
}

/* Logo stage: centers logo horizontally + vertically */
.sponsor-logo{
  flex: 1;
  display: grid;
  place-items: center;

  border-radius: calc(var(--radius) - 6px);

  /* darker “stage” so transparent logos pop */
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);

  /* consistent inner space */
  padding: 18px;
}

/* Force all logos into the same visual box */
.sponsor-logo img{
  display: block;

  /* bounding box inside the stage */
  max-width: 78%;
  max-height: 78%;

  width: auto;
  height: auto;
  object-fit: contain;

  /* premium clarity */
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,.35))
    drop-shadow(0 3px 10px rgba(0,0,0,.25));
  transform: translateZ(0);
}

/* Hover: lift + slightly brighter stage */
.tile.tile-sponsor:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.26);
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.07);
}
.tile.tile-sponsor:hover .sponsor-logo{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.14);
}




/* Contact panel tweaks */
.contact-panel {
  max-width: 920px; /* slightly wider feels premium */
}

.contact-panel .lead {
  margin: 8px 0 0 0;
  opacity: 0.9;
}

/* Form layout */
.contact-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px) {
  .contact-form .row { grid-template-columns: 1fr; }
}

.contact-form label span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.72);
  padding: 12px 12px;
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  outline: none;
}

.contact-form textarea {
  min-height: 110px;
  resize: none; /* keeps it tidy and non-scrollable vibe */
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(0,0,0,0.35);
}

/* Honeypot hidden (but still in DOM) */
.contact-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Actions */
.contact-form .actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-form button {
  position: relative;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 650;
  cursor: pointer;
  background: rgba(0,0,0,0.92);
  color: white;
}

.contact-form button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Tiny spinner */
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.95);
  animation: spin 0.9s linear infinite;
}

button.is-loading .btn-spinner { display: inline-block; }
button.is-loading .btn-text { opacity: 0.9; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.status {
  font-size: 14px;
  opacity: 0.85;
}

.status.ok { color: rgba(255,255,255,.92); }
.status.err { color: rgba(140,0,0,0.75); }

.fineprint {
  font-size: 13px;
  opacity: 0.75;
}

.fineprint a {
  font-weight: 650;
}

    footer {
      padding: 34px 0 50px;
      color: rgba(255,255,255,.55);
      font-size: 13px;
      border-top: 1px solid var(--line);
    }

    /* Responsive */
    @media (max-width: 900px){
      .card { grid-column: span 12; }
      .tiles { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px){
      .tiles { grid-template-columns: 1fr; }
      .nav-inner { flex-direction: column; align-items:flex-start; }
    }

    /* Smooth scroll */
    html { scroll-behavior: smooth; }