.hero {
  background: linear-gradient(rgba(18, 38, 32, 0.6), rgba(18, 38, 32, 0.8)),
    url("/img/choba-road.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Ensure the card stands out on the dark background but matches the theme */
.card {
  /* Inherits from styles.css .card:
     background: var(--surface);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-lg);
  */
  background-color: rgba(255, 255, 255, 0.95); /* Slight transparency for effect */
  border: 1px solid var(--border-color);
}

.label {
    color: var(--ink-primary);
}

/* Make the title white on the hero background? No, it's inside the card. */
/* The card content will use standard theme colors. */