/* ===========================================================================
   Future Dynamics — inner pages
   ---------------------------------------------------------------------------
   About us and Testimonials. Neither carries the lockup, the strapline or the
   rule bar: on an inner page the header mark is the whole of the identity, and
   the page title takes over from the hero.

   As everywhere, no raw values. Read tokens.css.
   =========================================================================== */

/* --- Page head ------------------------------------------------------------
   Where the home page has a lockup, these have a title. It sits on the same
   baseline the lockup would have, so moving between pages does not jump. */

.fd-pagehead {
  padding-top: var(--fd-space-10);
  padding-bottom: var(--fd-space-8);
}
.fd-pagehead__title {
  color: var(--fd-brand);
  font-size: var(--fd-text-display);
  font-style: italic;
  font-weight: var(--fd-weight-bold);
  line-height: var(--fd-leading-tight);
}
.fd-pagehead__lead {
  margin-top: var(--fd-space-4);
  max-width: 46ch;
}

/* --- Profiles -------------------------------------------------------------
   Portrait beside the words. The two bios alternate side, which gives the
   page a rhythm without needing a rule between them. */

.fd-profiles {
  display: grid;
  gap: var(--fd-space-12);
  padding-bottom: var(--fd-space-12);
}

.fd-profile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--fd-space-11);
  align-items: start;
}
.fd-profile:nth-child(even) .fd-profile__media { order: 2; }

/* No crop. The live site shows each portrait at its own proportions, and the
   two sources disagree: David's is landscape, Ruth's is a tall portrait.
   Forcing a shared ratio cut the top of her head off. A tall image is capped
   instead, so neither dominates the row. */
.fd-profile__media { position: relative; }
.fd-profile__portrait {
  width: 100%;
  max-width: var(--fd-portrait-max, none);
  height: auto;
  border-radius: var(--fd-radius-xl);
  box-shadow: var(--fd-shadow-card);
}
.fd-profile--tall { --fd-portrait-max: 340px; }
.fd-profile__name {
  color: var(--fd-brand);
  font-size: var(--fd-text-lg);
  font-weight: var(--fd-weight-medium);
  line-height: var(--fd-leading-snug);
}
/* Under the portrait, flush with its left edge, as on the live site. The
   portrait can be narrower than its column when it is a tall one, so the row
   aligns to the image rather than to the column. */
.fd-profile__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--fd-space-3);
  margin-top: var(--fd-space-4);
  max-width: var(--fd-portrait-max, none);
}
.fd-profile__name + .fd-profile__body { margin-top: var(--fd-space-5); }
.fd-profile__body > p + p { margin-top: var(--fd-space-5); }

/* --- Testimonials ---------------------------------------------------------
   A masonry-ish set of quote cards. The quotes run from 400 to 1100
   characters, so equal-height rows would leave craters; columns let each card
   be its own length. */

.fd-quotes {
  columns: 3;
  column-gap: var(--fd-column-gap);
  padding-bottom: var(--fd-space-12);
}
.fd-quote {
  break-inside: avoid;
  margin-bottom: var(--fd-column-gap);
  background: var(--fd-surface);
  border-radius: var(--fd-radius-lg);
  padding: var(--fd-space-6);
}
.fd-quote__text { margin-bottom: var(--fd-space-5); }
.fd-quote__author {
  color: var(--fd-brand);
  font-weight: var(--fd-weight-medium);
  line-height: var(--fd-leading-snug);
}
.fd-quote__role {
  font-size: var(--fd-text-base);
  line-height: var(--fd-leading-snug);
}

@media (max-width: 1000px) {
  .fd-profile { grid-template-columns: minmax(0, 1fr); gap: var(--fd-space-7); }
  .fd-profile:nth-child(even) .fd-profile__media { order: 0; }
  .fd-profiles { gap: var(--fd-space-10); }
  .fd-quotes { columns: 2; }
}

@media (max-width: 640px) {
  .fd-pagehead { padding-top: var(--fd-space-8); }
  .fd-quotes { columns: 1; }
  .fd-quote { padding: var(--fd-space-5); }
}

/* --- Load more ------------------------------------------------------------
   The collapse is applied by script and never by the markup: the page ships
   all twenty three quotes, and only a browser running JavaScript ever folds
   them. A crawler, a reader mode, or an agent parsing the HTML gets the whole
   set, and the JSON-LD carries all of them regardless of what is on screen.

   Same principle as the scroll reveal, and the same reason. */

.fd-js .fd-quote[data-folded="true"] { display: none; }

.fd-more {
  display: flex;
  justify-content: center;
  padding-bottom: var(--fd-space-12);
}
.fd-more__button[hidden] { display: none; }
.fd-more__count {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* The company a quote belongs to. A hairline that fills in on hover, the same
   gesture the top nav uses, so an outbound link reads as part of the system
   rather than as a stray blue word. */
.fd-quote__company {
  color: var(--fd-brand);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fd-brand) 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--fd-duration-fast) var(--fd-ease);
}
.fd-quote__company:hover { text-decoration-color: currentColor; }