/* ---- hero focal point -----------------------------------------------------
   The About portrait has her high in the frame, so a centre crop cut the top
   of her face off. Pulling the anchor up keeps her head in shot and leaves the
   piano and the keys reading underneath. This file is only linked on
   about.html, so the override cannot leak to another page. */

.yp-hero-media img { --yp-hero-focus: center 18%; }

/* ==========================================================================
   About page sections

   Companies, the introduction video, Values and Book a Call. All four build on
   _shared.css, so they inherit the section header, the grounds and the reveal
   without restating any of it.

   Three of the four are holding structure open for content that has not
   arrived: the company marks, the film and the scheduler. Each is built so the
   real thing drops in without the layout moving.
   ========================================================================== */

/* ---- collaboration, the scrolling name wall --------------------------------
   Port of terragroup.com/collaboration. Their numbers, measured live:
     52.46px type, line-height 1.0, white-space nowrap, overflow hidden
     six rows here against their seven
     each row offset independently, which is the point: a single animation on
     the parent would slide the whole block as one slab and the wall would read
     as a picture rather than as movement.

   Two departures, both deliberate: their orange goes to her ink, and their
   Austin News Text goes to her serif. No script face, per the brief.

   The rows are duplicated in the script rather than the markup, so the copy
   stays a single readable string and the seam is computed from the real
   rendered width instead of guessed. */

.yp-collab-wall {
  overflow: hidden;
  padding: clamp(10px, 1.6vw, 22px) 0 0;
  /* Fades at both edges, so names enter and leave rather than being chopped
     off against a hard boundary. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.yp-collab-row {
  display: flex;
  white-space: nowrap;
  /* Their 52.46px, held as a ratio so it survives a narrow screen. */
  font-family: var(--yp-serif);
  font-size: clamp(1.5rem, 3.5vw, 3.28rem);
  line-height: 1.06;
  font-weight: var(--yp-w-section, 540);
  letter-spacing: -0.005em;
  color: var(--yp-ink);
  will-change: transform;
}

/* The duplicate the script appends, so the row can wrap seamlessly. */
.yp-collab-row > span { padding-right: 0.5em; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  /* Static, and let the row simply overflow its mask: a name wall that jerks
     is worse than one that sits still. */
  .yp-collab-row { transform: none !important; }
}

/* ---- introduction video --------------------------------------------------- */

.yp-video-frame { margin: 0; }

.yp-video-el {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  /* The poster is a tall portrait in a 16:9 well, so cover crops it hard.
     Anchoring high keeps her face in the frame instead of centring on the
     middle of the picture, which is her waist. */
  object-position: center 20%;
  background: var(--yp-ink);
}

.yp-video-note {
  margin: 14px 0 0;
  font-family: var(--yp-serif);
  font-size: 0.875rem;
  letter-spacing: var(--yp-track-sub, 0.09em);
  text-transform: uppercase;
  color: rgb(var(--yp-ink-rgb) / 0.55);
}


/* Core values and Book a call used to live here. Both were rebuilt against
   the client's own reference sources and now own their sections outright in
   sections/values.css and sections/booking.css. Rules left here would only
   race those sheets for the same selectors. */