/* Section 00 — MISSION: solid black hero.
 *
 * The design sources render this block white with black type. It is inverted to
 * a black field with ivory type, which joins it cleanly to the black showroom
 * panel directly beneath — those two previously met on a hard white/black seam.
 *
 * The block carried a generated line-art loop for a while; that was removed and
 * the field is plain black. The generator and its key frames are still in the
 * repo (build/hero-loop.js, concepts/) if it is ever wanted back.
 *
 * Everything is !important because the design sources set these colours as
 * inline style attributes.
 */

.tdf-hero {
  background-color: #0a0a0a !important;
}

.tdf-hero h1 {
  color: #f1f0ea !important;
}

.tdf-hero p {
  color: #c9c7bf !important;
}

/* The eyebrow's trailing location span is a dimmer step in the source. */
.tdf-hero p span {
  color: #8a8880 !important;
}

/* Primary button: ivory fill, black label — the design system's primary. */
.tdf-hero a.scp2 {
  background: #f1f0ea !important;
  color: #0a0a0a !important;
}

/* Tertiary button: rule outline, ivory label. */
.tdf-hero a.scp3 {
  border-color: rgba(241, 240, 234, 0.4) !important;
  color: #f1f0ea !important;
}

.tdf-hero a.scp3:hover {
  border-color: #8977ff !important;
  color: #8977ff !important;
}

/* The section rule below the hero was drawn for a white ground. */
#ch0 {
  border-bottom-color: rgba(241, 240, 234, 0.18) !important;
}

/* Focus rings need to read against black. */
.tdf-hero a:focus-visible {
  outline: 2px solid #8977ff !important;
  outline-offset: 2px;
}