/* ==========================================================================
   Réalisations page
   ==========================================================================
   Six full-bleed sections, each with its own container. The page used to wrap
   everything in one container, but the marquees and the dark band both have to
   break out, so it follows the same pattern the homepage sections use.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero: the cover rail, then the heading and the agency numbers, flush
   left like every other section on the site.

   The centred version (2026-09-07 to 2026-09-08) was a deliberate exception to
   the rule in CLAUDE.md that was never agreed. It is gone, and so is the
   filled card the numbers sat in, which only existed to hold the centring.
   -------------------------------------------------------------------------- */
.realisations-hero {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .realisations-hero { gap: 4rem; padding-top: 3rem; }
}

.realisations-hero__lede {
  max-width: 42rem;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--muted-foreground);
}

.realisations-hero__intro { display: flex; flex-direction: column; gap: 1.5rem; }

/* Covers, not photographs. The stock business imagery that stood here until
   2026-09-08 was shown under real client names and real numbers, which is a
   fabricated claim, so it is gone. The client is named in text for the same
   reason: we hold no wordmark for any of the six. */
.cover-tile {
  position: relative;
  display: block;
  aspect-ratio: var(--aspect-tile);
  height: 14rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--color-neutral-0);
}

@media (min-width: 640px) { .cover-tile { height: 18rem; } }
@media (min-width: 1024px) { .cover-tile { height: 24rem; } }

.cover-tile:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.cover-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The scrim is not decoration. White type over a light composition is
   unreadable without it, so it does real work here. It stops at half height so
   the top of the mockup stays as the client made it. */
.cover-tile__scrim {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 50%;
  background-image: var(--image-scrim);
}

.cover-tile__meta {
  position: absolute;
  inset-inline: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  text-shadow: var(--text-shadow-scrim);
}

.cover-tile__id { display: flex; min-width: 0; flex-direction: column; }

.cover-tile__client {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
  letter-spacing: var(--text-h5-tracking);
  font-weight: 500;
  color: #ffffff;
}

.cover-tile__sector {
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: color-mix(in oklab, #ffffff 80%, transparent);
}

.cover-tile__kpi {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.cover-tile__kpi-value {
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: #ffffff;
}

@media (min-width: 1024px) {
  .cover-tile__kpi-value {
    font-size: var(--text-display-xl-size);
    line-height: var(--text-display-xl-line);
  }
}

.cover-tile__kpi-label {
  max-width: 14rem;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   2. À la une. The heading names the count, so it is tied to the four
   highlight slugs: change one and change the other.

   Plain 2x2 with one 24px gap everywhere, row and column alike (main designer,
   2026-09-08, replacing a masonry tried earlier the same day). A grid is what
   guarantees the heights match: items stretch to their row, so a card fills to
   the tallest and the numbers still sit on the floor.
   -------------------------------------------------------------------------- */
.realisations-featured { padding-block: 8rem 5rem; }

@media (min-width: 768px) { .realisations-featured { padding-block: 11rem 6rem; } }

.realisations-featured__inner { display: flex; flex-direction: column; gap: 3rem; }

.realisations-featured__title {
  max-width: 48rem;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
  text-wrap: pretty;
}

.realisations-featured__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

@media (min-width: 768px) {
  .realisations-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   3. The client wall, one slow ribbon full bleed.

   It separates the four highlights from the numbers rather than trailing the
   numbers, and it is the page's only full-width rule. Hairlines above and
   below come from this section's border plus the next section's own, so the
   ribbon reads as a band without either doubling up.
   -------------------------------------------------------------------------- */
.realisations-clients {
  border-top: 1px solid var(--border-subtle);
  padding-block: 3rem;
}

@media (min-width: 768px) { .realisations-clients { padding-block: 3.5rem; } }

/* Centred, and at the body scale rather than a heading one: the band is a
   divider, and a title that announced itself would compete with the sections
   either side. */
.realisations-clients__title {
  text-align: center;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  letter-spacing: -0.025em;
  font-weight: var(--text-body-weight);
  color: var(--foreground);
}

.realisations-clients .marquee { margin-top: 2rem; }
.realisations-clients .marquee img { height: 1.5rem; width: auto; opacity: 0.8; }
/* Sized by shape like the hero strip: stacked lockups taller, wide wordmarks shorter. */
.realisations-clients .marquee .client-logo--stacked { height: 2.07rem; }
.realisations-clients .marquee .client-logo--wide { height: 1.24rem; }
.realisations-clients .marquee li { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   4. The numbers
   -------------------------------------------------------------------------- */
.realisations-numbers {
  border-top: 1px solid var(--border-subtle);
  padding-block: 5rem;
}

@media (min-width: 768px) { .realisations-numbers { padding-block: 6rem; } }

.realisations-numbers__inner { display: flex; flex-direction: column; gap: 3rem; }
.realisations-numbers__intro { display: flex; flex-direction: column; gap: 1.25rem; }

.realisations-numbers__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .realisations-numbers__title {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line);
  }
}

.realisations-numbers__lede {
  max-width: 42rem;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   5. Browse all, inverted.

   .dark sets the semantic tokens on this element and they inherit, which is
   what makes the whole subtree follow. color-scheme keeps native focus rings
   and scrollbars dark too. data-navbar-theme tells the sticky navbar to flip
   dark once this band is scrolled in behind it, so the two read as one
   continuous surface instead of a light bar sitting on a dark page.
   -------------------------------------------------------------------------- */
.realisations-all {
  background-color: var(--background);
  color: var(--foreground);
  color-scheme: dark;
}

.realisations-all__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-block: 5rem;
}

@media (min-width: 768px) { .realisations-all__inner { padding-block: 6rem; } }

.realisations-all__intro { display: flex; flex-direction: column; gap: 1.25rem; }

.realisations-all__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
}

.realisations-all__lede {
  max-width: 42rem;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--muted-foreground);
}