/* ===========================================================================
   Future Dynamics — home page
   ---------------------------------------------------------------------------
   Only what is unique to this page. Anything a second page would also want
   belongs in base.css instead.
   =========================================================================== */

/* --- Hero -----------------------------------------------------------------
   The wordmark is the vector lockup, right aligned, with the strapline sitting
   under its right edge. Nothing here is type except the strapline. */

.fd-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: var(--fd-space-11);
  padding-bottom: var(--fd-space-8);
}
.fd-hero__lockup { width: 605px; max-width: 100%; }
.fd-hero__strapline {
  margin-top: var(--fd-space-5);
  font-size: var(--fd-text-xl);
  font-style: italic;
  line-height: var(--fd-leading-tight);
  text-align: right;
}

/* --- Mission panel --------------------------------------------------------
   Six centred columns on the warm surface. Padding is one space step on every
   side, so the button's bottom edge and the text's top edge are the same
   distance from the panel wall. */

.fd-mission {
  padding-top: var(--fd-space-10);
  padding-bottom: var(--fd-space-11);
}
.fd-mission__panel {
  background: var(--fd-surface);
  border-radius: var(--fd-radius-lg);
  padding: var(--fd-space-6);
}
.fd-mission__text { margin-bottom: var(--fd-space-9); }
.fd-mission__cta { width: 100%; max-width: 320px; }

@media (max-width: 1000px) {
  .fd-hero { align-items: stretch; }
  .fd-hero__lockup { width: 100%; max-width: 605px; margin-left: auto; }
}

@media (max-width: 640px) {
  .fd-hero { padding-top: var(--fd-space-8); }
  .fd-hero__strapline { font-size: var(--fd-text-lg); }
  .fd-mission__panel { padding: var(--fd-space-5); }
  .fd-mission__cta { max-width: none; }
}