/* ── Stand Back flagship banner ── dark, centred, links to /stand-back ── */
.flagship {
  display: block;
  background-color: var(--color-black);
  color: var(--color-off-white);
  padding: var(--space-lg) var(--pad-h);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out);
}

.flagship:hover {
  background-color: #050505;
}

.flagship-intro {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Brush-script wordmark (orange SVG) — centred */
.flagship-wordmark {
  width: clamp(200px, 32vw, 380px);
  height: auto;
  display: block;
  margin: 0 auto var(--space-md);
}

.flagship-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--color-off-white);
  opacity: 0.85;
  max-width: 44ch;
}

.flagship-cta {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-orange);
  margin-top: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: gap 0.2s var(--ease-out);
}

.flagship:hover .flagship-cta {
  gap: 0.7em;
}

@media (min-width: 768px) {
  .flagship {
    padding: var(--space-xl) var(--pad-h);
  }
}