/* Réalisations, rebuilt 24 Sept. Swiss grid, one accent, the cobalt plate
   and the stepped pixel cut as our own marks. Labels 14px and up. */
.rw { --rw-max: 75rem; --rw-g: clamp(1.25rem, 4vw, 3rem); --rw-ink: var(--ed-ink, #121417); --rw-muted: var(--ed-muted, #51565e); --rw-line: var(--ed-line, #d8dce1); --px: .875rem; color: var(--rw-ink); }
.rw-wrap { width: min(100% - var(--rw-g) * 2, var(--rw-max)); margin-inline: auto; }
.rw h1, .rw h2, .rw h3 { font-weight: 500; letter-spacing: -.035em; }

/* Header */
.rw-head { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 4vw, 3.5rem); }
.rw-head__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem 4rem; align-items: end; }
.rw-head h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.02; max-width: 14ch; }
.rw-head__lede { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.55; color: var(--rw-muted); }
.rw-head__figures { display: grid; margin: 0; border-top: 1px solid var(--rw-line); }
.rw-head__figures div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .875rem; border-bottom: 1px solid var(--rw-line); }
.rw-head__figures dt { font-size: .9375rem; color: var(--rw-muted); }
.rw-head__figures dd { margin: 0; font-size: 1.75rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* Media: the cobalt plate */
.rw-card__media, .rw-featured__media { position: relative; overflow: hidden; border-radius: 8px; background: #0b2a8a; }
.rw-card__media img, .rw-featured__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .8, .2, 1); }

/* Featured */
.rw-featured { padding-bottom: clamp(4rem, 7vw, 6rem); }
.rw-featured__card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; color: inherit; text-decoration: none; }
.rw-featured__body h2 { margin-top: .75rem; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.05; }
.rw-featured__desc { margin-top: 1rem; font-size: 1.125rem; line-height: 1.55; color: var(--rw-muted); max-width: 30rem; }

/* Shared card text */
.rw-card__type { font-size: .9375rem; color: var(--rw-muted); }
.rw-card__kpi { display: grid; gap: .125rem; margin-top: 1.25rem; padding-left: .875rem; border-left: 2px solid var(--brand); }
.rw-card__kpi b { font-size: 1.75rem; line-height: 1; letter-spacing: -.035em; font-weight: 500; font-variant-numeric: tabular-nums; }
.rw-card__kpi span { font-size: .9375rem; color: var(--rw-muted); }
.rw-card__kpi--lg b { font-size: clamp(2.5rem, 4vw, 3.5rem); }
.rw-card__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-size: 1rem; font-weight: 500; color: var(--brand); }
.rw-card__more svg { width: 1.125rem; height: 1.125rem; transition: transform 250ms ease; }

/* Work: filter row and an asymmetric grid (7/5, then 5/7) */
.rw-work { padding-bottom: clamp(4rem, 7vw, 6rem); }
.rw-work__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rw-line); }
.rw-work__bar h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; }
.rw-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.rw-filter button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--rw-line); border-radius: 999px; background: #fff; color: var(--rw-ink); font: inherit; font-size: .9375rem; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.rw-filter button span { font-size: .875rem; color: var(--rw-muted); font-variant-numeric: tabular-nums; }
.rw-filter button[aria-pressed="true"] { background: var(--rw-ink); border-color: var(--rw-ink); color: #fff; }
.rw-filter button[aria-pressed="true"] span { color: #b7bcc4; }
.rw-filter button:hover:not([aria-pressed="true"]) { border-color: var(--rw-ink); }
.rw-filter button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rw-work__count { min-height: 1.5rem; margin-top: 1rem; font-size: .9375rem; color: var(--rw-muted); }

.rw-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.rw-card { grid-column: span 5; }
.rw-card--big { grid-column: span 7; }
/* Rows share one image height: the narrow card's picture is taller in ratio. */
.rw-card:not(.rw-card--big):not(.rw-card--wide) .rw-card__media img { aspect-ratio: 8 / 7; }
.rw-card--wide { grid-column: 1 / -1; }
.rw-card--wide .rw-card__link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.rw-card--wide .rw-card__body { padding-top: 0; }
.rw-grid[data-filtered="1"] .rw-card { grid-column: span 6; }
.rw-grid[data-filtered="1"] .rw-card .rw-card__media img { aspect-ratio: 16 / 10; }
.rw-grid[data-filtered="1"] .rw-card--wide .rw-card__link { display: block; }
.rw-grid[data-filtered="1"] .rw-card--wide .rw-card__body { padding-top: 1.25rem; }
.rw-card__link { display: block; color: inherit; text-decoration: none; }
.rw-card__body { padding-top: 1.25rem; }
.rw-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rw-card__head h3 { font-size: 1.5rem; line-height: 1.15; }
.rw-card__desc { margin-top: .5rem; font-size: 1rem; line-height: 1.55; color: var(--rw-muted); max-width: 34rem; }
.rw-card__sector { margin-top: 1rem; font-size: .875rem; color: var(--rw-muted); }
@media (hover: hover) and (pointer: fine) {
  a.rw-card__link:hover .rw-card__media img, .rw-featured__card:hover img { transform: scale(1.03); }
  a.rw-card__link:hover .rw-card__more svg, .rw-featured__card:hover .rw-card__more svg { transform: translateX(4px); }
  a.rw-card__link:hover h3 { color: var(--brand); }
}
a.rw-card__link:focus-visible, .rw-featured__card:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: 6px; }

/* Clients: a ruled wall */
.rw-clients { padding-block: clamp(3.5rem, 6vw, 5rem); border-top: 1px solid var(--rw-line); }
.rw-clients h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; }
.rw-clients__wall { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rw-line); border-left: 1px solid var(--rw-line); }
.rw-clients__wall li { display: grid; place-items: center; min-height: 8rem; padding: 1.5rem; border-right: 1px solid var(--rw-line); border-bottom: 1px solid var(--rw-line); }
.rw .rw-clients__wall img { height: calc(var(--logo-h, 1.4rem) * 1.2); width: auto; max-width: 100%; filter: brightness(0); opacity: .58; }
.rw .rw-clients__wall img[data-logo-tone="detail"] { filter: grayscale(1) contrast(1.15) brightness(.7); opacity: .7; }

/* Archive: every project since 2018, each row a link to its page */
.rw-archive { padding-block: clamp(3.5rem, 6vw, 5rem) clamp(4rem, 7vw, 6rem); border-top: 1px solid var(--rw-line); }
.rw-archive__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 4rem; align-items: start; }
.rw-archive__head { position: sticky; top: 7rem; }
.rw-archive__head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; }
.rw-archive__head p { margin-top: 1rem; font-size: 1rem; line-height: 1.55; color: var(--rw-muted); }
.rw-arch { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; border-top: 1px solid var(--rw-line); }
.rw-arch a { display: grid; grid-template-columns: 2.25rem 6.25rem 1fr auto; align-items: center; gap: .5rem; min-height: 3.25rem; border-bottom: 1px solid var(--rw-line); color: inherit; text-decoration: none; font-size: 1rem; }
/* A mark for every project (25 Sept, Hulusi): the client's logo where we
   have one, otherwise its initials in a neutral square, a placeholder and
   not a logo. */
.rw-arch__logo { display: flex; align-items: center; height: 2.25rem; }
.rw-arch__logo img { width: auto; max-width: 5.5rem; max-height: 1.5rem; object-fit: contain; object-position: left; }
.rw-arch__logo img[src*="life-in"], .rw-arch__logo img[src*="linework"] { filter: brightness(0); opacity: .8; }
.rw-arch__logo--mono { justify-content: center; width: 2.25rem; border-radius: 8px; background: #f1f3f6; font-size: .8125rem; font-weight: 500; letter-spacing: -.01em; color: var(--rw-muted); }
.rw-arch a:hover .rw-arch__logo--mono { color: var(--brand); }
.rw-arch a { min-height: 3.75rem !important; }
.rw-arch__n { font-size: .875rem; color: var(--rw-muted); font-variant-numeric: tabular-nums; }
.rw-arch svg { width: 1rem; height: 1rem; color: var(--rw-muted); transition: transform 200ms ease, color 200ms ease; }
.rw-arch a:hover .rw-arch__name, .rw-arch a:hover svg { color: var(--brand); }
.rw-arch a:hover svg { transform: translate(2px, -2px); }
.rw-arch a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 899px) {
  .rw-head__grid, .rw-featured__card, .rw-archive__grid { grid-template-columns: 1fr; }
  .rw-archive__head { position: static; }
  .rw-card, .rw-card--big, .rw-card--wide, .rw-grid[data-filtered="1"] .rw-card { grid-column: 1 / -1; }
  .rw-card .rw-card__media img { aspect-ratio: 16 / 10 !important; }
  .rw-card--wide .rw-card__link { display: block; }
  .rw-card--wide .rw-card__body { padding-top: 1.25rem; }
  .rw-clients__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-arch { grid-template-columns: 1fr; }
  .rw { --px: .625rem; }
}
@media (prefers-reduced-motion: reduce) { .rw * { transition: none !important; } }

/* ================= Round 2: Vercel x Galadrim, ours ================= */
.rv-head { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 3.5vw, 3rem); }
.rv-head h1 { font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1; letter-spacing: -.045em; max-width: 16ch; }

/* Stories: a large carousel, the next story peeking (Vercel). */
.rv-stories { --gut: max(var(--rw-g), (100% - var(--rw-max)) / 2); }
.rv-stories__track { list-style: none; margin: 0; padding: 0 var(--gut); display: grid; grid-auto-flow: column; grid-auto-columns: min(68vw, 58rem); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.rv-stories__track::-webkit-scrollbar { display: none; }
.rv-stories__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.rv-slide { scroll-snap-align: start; }
.rv-slide a { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #0b2a8a; color: #fff; text-decoration: none; }
.rv-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(.2, .8, .2, 1); }
.rv-slide a::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgb(10 14 24 / .72), rgb(10 14 24 / 0)); }
.rv-slide__cap { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.25rem; z-index: 1; font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.35; max-width: 34rem; }
@media (hover: hover) and (pointer: fine) { .rv-slide a:hover img { transform: scale(1.03); } }
.rv-stories__nav { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.rv-stories__nav button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--rw-line); border-radius: 50%; background: #fff; color: var(--rw-ink); cursor: pointer; }
.rv-stories__nav button:disabled { opacity: .35; cursor: default; }
.rv-stories__nav button svg { width: 1.125rem; height: 1.125rem; }
.rv-stories__bar { flex: 1; height: 2px; margin-left: 1rem; background: var(--rw-line); position: relative; }
.rv-stories__bar i { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--rw-ink); transition: left 300ms ease, width 300ms ease; }

/* Project rows (Vercel), with a cover that follows the pointer (ours). */
.rv-list { padding-block: clamp(4rem, 7vw, 6rem); position: relative; }
.rv-rows { list-style: none; margin: .5rem 0 0; padding: 0; }
.rv-row { display: grid; grid-template-columns: 11rem minmax(0, 1.6fr) 9rem 9rem 9rem 8.5rem; align-items: center; gap: 1.5rem; min-height: 5.5rem; padding-block: 1rem; border-bottom: 1px solid var(--rw-line); color: inherit; text-decoration: none; }
.rv-row__name { font-size: 1.0625rem; font-weight: 500; }
.rv-row__line { font-size: 1rem; line-height: 1.45; color: var(--rw-muted); }
.rv-row__logo img { height: var(--logo-h, 1.4rem); width: auto; max-width: 8.5rem; object-fit: contain; filter: brightness(0); opacity: .8; }
.rv-row__word { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; color: var(--rw-ink); opacity: .8; }
.rv-row__fig { font-size: .9375rem; color: var(--rw-muted); }
.rv-row__fig b { display: block; font-size: 1.375rem; font-weight: 500; letter-spacing: -.03em; color: var(--rw-ink); font-variant-numeric: tabular-nums; }
.rv-row__sector { font-size: .9375rem; color: var(--rw-muted); }
.rv-row__go { display: inline-flex; align-items: center; justify-content: flex-end; gap: .375rem; font-size: .9375rem; font-weight: 500; color: var(--rw-ink); }
.rv-row__go svg { width: 1rem; height: 1rem; transition: transform 200ms ease; }
a.rv-row:hover .rv-row__go { color: var(--brand); }
a.rv-row:hover .rv-row__go svg { transform: translateX(3px); }
a.rv-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rv-rows li[hidden] { display: none; }
.rv-peek { position: fixed; left: 0; top: 0; z-index: 30; width: 18rem; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; pointer-events: none;
  box-shadow: 0 24px 48px -20px rgb(10 30 90 / .45); opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(.92); transition: opacity 200ms ease, transform 120ms linear; }
.rv-peek.is-on { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)) scale(1); }
.rv-peek img { width: 100%; height: 100%; object-fit: cover; }

/* Logo wall (Galadrim's idea): square tiles, crisp logos, client voices inside. */
.rv-wall { padding-block: clamp(4rem, 7vw, 6rem); border-top: 1px solid var(--rw-line); }
.rv-wall h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.08; max-width: 22ch; }
.rv-wall__grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: dense; gap: 6px; }
.rv-wall__logo { aspect-ratio: 1; display: grid; place-items: center; background: #f1f3f6; border-radius: 4px; transition: background-color 200ms ease; }
.rv-wall__logo:hover { background: #e8ecf3; }
.rv .rv-wall__logo img { height: calc(var(--logo-h, 1.4rem) * 1.9); width: auto; max-width: 72%; object-fit: contain; filter: brightness(0); opacity: .85; }
.rv .rv-wall__logo img[data-logo-tone="detail"] { filter: grayscale(1) contrast(1.2) brightness(.55); opacity: .9; }
.rv-wall__quote { position: relative; grid-column: span 2; grid-row: span 2; overflow: hidden; border-radius: 4px; color: #fff; display: grid; align-content: space-between; padding: clamp(1.25rem, 2vw, 1.75rem); background: #121417; }
.rv-wall__quote--a { grid-column: 2 / span 2; grid-row: 2 / span 2; }
.rv-wall__quote--b { grid-column: 4 / span 2; grid-row: 3 / span 2; }
.rv-wall__quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-wall__quote::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(10 14 24 / .7) 0%, rgb(10 14 24 / .15) 45%, rgb(10 14 24 / .75) 100%); }
.rv-wall__quote blockquote, .rv-wall__quote p { position: relative; z-index: 2; margin: 0; }
.rv-wall__quote blockquote { font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.3; letter-spacing: -.015em; max-width: 24ch; }
.rv-wall__quote p { display: grid; font-size: .9375rem; line-height: 1.35; opacity: .9; }
.rv-wall__quote p b { font-weight: 500; }

@media (max-width: 1100px) {
  .rv-row { grid-template-columns: 9rem minmax(0, 1fr) 8rem 7rem; }
  .rv-row__sector, .rv-row__go { display: none; }
}
@media (max-width: 899px) {
  .rv-stories__track { grid-auto-columns: 86vw; }
  .rv-row { grid-template-columns: minmax(0, 1fr) auto; gap: .375rem 1rem; }
  .rv-row__line { grid-column: 1 / -1; order: 3; }
  .rv-row__logo, .rv-row__word { display: none; }
  .rv-wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-wall__quote, .rv-wall__quote--a, .rv-wall__quote--b { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .rv-peek { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rv * { transition: none !important; } }

/* ================= Round 3: project cards, hero-mosaic rhythm ================= */
.rv-cards { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.5rem); }
.rv-card--7 { grid-column: span 7; } .rv-card--5 { grid-column: span 5; } .rv-card--4 { grid-column: span 4; } .rv-card--12 { grid-column: 1 / -1; }
.rv-cards[data-filtered="1"] .rv-card { grid-column: span 6; }
.rv-card[hidden] { display: none; }
.rv-card__in { display: block; color: inherit; text-decoration: none; perspective: 1200px; }
/* The cover: cobalt plate, white logo top-left, the figure in a frosted chip. */
.rv-card__media {
  position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10; background: #0b2a8a url("../../img/backgrounds/dream/figma/card/ai-bg-033.webp") center / cover;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .0), 0 1px 2px rgb(18 32 80 / .06);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(.2, .8, .2, 1), box-shadow 400ms ease;
}
.rv-card--7 .rv-card__media, .rv-card--5 .rv-card__media { aspect-ratio: auto; height: clamp(18rem, 27vw, 25rem); }
.rv-card--12 .rv-card__media { aspect-ratio: 21 / 8; }
.rv-card__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 16 70 / .45) 0%, rgb(4 16 70 / 0) 32%, rgb(4 16 70 / 0) 60%, rgb(4 16 70 / .5) 100%); pointer-events: none; }
.rv-card__brand { position: absolute; left: 1.25rem; top: 1.125rem; z-index: 2; }
.rv-card__logo { height: var(--logo-h, 1.5rem); width: auto; max-width: 10rem; object-fit: contain; filter: brightness(0) invert(1); }
.rv-card__word { font-size: 1.375rem; font-weight: 600; letter-spacing: -.03em; color: #fff; }
.rv-card__kpi {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0; display: grid; gap: .125rem; padding: .75rem 1rem; border-radius: 8px;
  color: #fff; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.rv-card__kpi b { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -.045em; font-weight: 500; font-variant-numeric: tabular-nums; }
.rv-card__kpi span { font-size: .9375rem; opacity: .92; }
/* Cards without a cover: an ink plate with the logo or name large. */
.rv-card--plain .rv-card__media { background: #121417 url("../../img/backgrounds/dream/figma/card/ai-bg-061.webp") center / cover; background-blend-mode: soft-light; }
.rv-card--plain .rv-card__brand { left: 50%; top: 42%; translate: -50% -50%; }
.rv-card--plain .rv-card__logo { height: calc(var(--logo-h, 1.5rem) * 1.5); max-width: 14rem; }
.rv-card--plain .rv-card__word { font-size: 2rem; }
.rv-card__text { padding-top: 1.125rem; }
.rv-card__text h3 { font-size: 1.375rem; line-height: 1.15; }
.rv-card__sec { margin-top: .25rem; font-size: .9375rem; color: var(--rw-muted); }
.rv-card__line { margin-top: .625rem; font-size: 1rem; line-height: 1.5; color: var(--rw-muted); max-width: 34rem; }
.rv-card__go { display: inline-flex; align-items: center; gap: .375rem; margin-top: .875rem; font-size: .9375rem; font-weight: 500; color: var(--rw-ink); }
.rv-card__go svg { width: 1rem; height: 1rem; transition: transform 200ms ease; }
/* Hover: the card leans toward the pointer (rv-card tilt script), a white rim and a deeper shadow. */
@media (hover: hover) and (pointer: fine) {
  .rv-card__in:hover .rv-card__media { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .85), 0 30px 60px -28px rgb(10 30 90 / .55); transition: transform 120ms linear, box-shadow 300ms ease; }
  .rv-card__in:hover .rv-card__go { color: var(--brand); }
  .rv-card__in:hover .rv-card__go svg { transform: translateX(3px); }
}
.rv-card__in:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: 10px; }
@media (max-width: 899px) {
  .rv-card--7, .rv-card--5, .rv-card--4, .rv-card--12, .rv-cards[data-filtered="1"] .rv-card { grid-column: 1 / -1; }
  .rv-card--7 .rv-card__media, .rv-card--5 .rv-card__media, .rv-card--12 .rv-card__media { height: auto; aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .rv-card__media { transform: none !important; } }

/* ================= Round 4: Vercel's calm, our filters ================= */
.rv { background: #fafafa; }
/* Stories: hover plays (video where we have one, a slow push-in otherwise). */
.rv-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms ease; }
.rv-slide.is-playing video { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .rv-slide a:hover img { transform: scale(1.06); transition: transform 6s linear; } }

/* The list */
.rl { padding-block: clamp(4.5rem, 8vw, 7rem) 3rem; }
.rl-title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; }
.rl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.rl-tabs { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: 999px; background: #eef0f3; }
.rl-tabs button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .95rem; border: 0; border-radius: 999px; background: none; color: var(--rw-muted); font: inherit; font-size: .9375rem; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.rl-tabs svg { width: 1.125rem; height: 1.125rem; }
.rl-tabs em { font-style: normal; font-size: .875rem; color: #8a9099; font-variant-numeric: tabular-nums; }
.rl-tabs button[aria-selected="true"] { background: #fff; color: var(--rw-ink); box-shadow: 0 1px 2px rgb(18 20 23 / .08), 0 0 0 1px rgb(18 20 23 / .04); }
.rl-tabs button[aria-selected="true"] svg { color: var(--brand); }
.rl-tabs button:hover:not([aria-selected="true"]) { color: var(--rw-ink); }
.rl-tabs button:focus-visible, .rl-ind-btn:focus-visible, .rl-ind-menu button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rl-ind-pick { position: relative; }
.rl-ind-btn { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; min-width: 13rem; justify-content: space-between; padding: 0 1rem 0 1.125rem; border: 1px solid var(--rw-line); border-radius: 999px; background: #fff; color: var(--rw-ink); font: inherit; font-size: .9375rem; cursor: pointer; }
.rl-ind-btn svg { width: 1rem; height: 1rem; color: var(--rw-muted); transition: transform 200ms ease; }
.rl-ind-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.rl-ind-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20; list-style: none; margin: 0; padding: .375rem; min-width: 15rem; max-height: 22rem; overflow: auto; background: #fff; border: 1px solid var(--rw-line); border-radius: 12px; box-shadow: 0 16px 40px -16px rgb(18 32 80 / .25); }
.rl-ind-menu button { width: 100%; text-align: left; padding: .6rem .75rem; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .9375rem; color: var(--rw-ink); cursor: pointer; }
.rl-ind-menu button:hover, .rl-ind-menu button[aria-selected="true"] { background: #f2f4f7; }
.rl-ind-menu button[aria-selected="true"] { color: var(--brand); }
.rl-rows { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.rl-rows li[hidden] { display: none; }
.rl-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 10rem 9rem 9rem; align-items: center; gap: 2rem; min-height: 5.25rem; padding: 0 1rem; margin-inline: -1rem; border-radius: 8px; color: var(--rw-ink); text-decoration: none; transition: background-color 150ms ease; }
.rl-row:hover { background: #efefef; }
.rl-name { font-size: 1rem; font-weight: 500; }
.rl-line { font-size: .9375rem; line-height: 1.5; color: var(--rw-muted); max-width: 30rem; }
.rl-line b { font-weight: 500; color: var(--rw-ink); }
.rl-logo { display: flex; justify-content: center; }
.rl-logo img { height: var(--logo-h, 1.3rem); width: auto; max-width: 8.5rem; filter: brightness(0); opacity: .82; }
.rl-ind { font-size: .9375rem; color: var(--rw-muted); text-align: center; }
.rl-go { display: inline-flex; justify-content: flex-end; align-items: center; gap: .375rem; font-size: .9375rem; font-weight: 500; }
.rl-go svg { width: 1rem; height: 1rem; transition: transform 200ms ease; }
a.rl-row:hover .rl-go svg { transform: translateX(3px); }
a.rl-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rl-empty { margin-top: 2rem; font-size: 1rem; color: var(--rw-muted); }
.rl-empty a { color: var(--brand); }

/* A single quote, centred, calm (Vercel). */
/* Testimonial, in the homepage's client-story language (25 Sept, Hulusi:
   the centred quote alone did not look like our style): the customer's
   photo with the figure on it, then logo, quote, name and the link, flush
   left. */
.rq { padding-block: clamp(4rem, 8vw, 7rem); }
.rq__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.rq__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--rw-line); }
.rq__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.rq__metric { position: absolute; left: 1.25rem; bottom: 1.25rem; display: grid; gap: .25rem; padding: .875rem 1.125rem; border-radius: 8px; background: rgb(255 255 255 / .88); backdrop-filter: blur(12px); color: var(--rw-ink); }
.rq__metric b { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 400; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.rq__metric span { font-size: .9375rem; color: var(--rw-muted); }
.rq__body { display: grid; justify-items: start; gap: 1.5rem; }
.rq__logo { width: auto; height: 1.75rem; }
.rq__company { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--rw-ink); }
.rq blockquote { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.rq__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; width: 100%; padding-top: 1.25rem; border-top: 1px solid var(--rw-line); }
.rq__foot p { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--rw-muted); }
.rq__foot b { display: block; font-weight: 500; color: var(--rw-ink); }
.rq__scope { margin: 0; font-size: .9375rem; color: var(--rw-muted); }

/* Logo wall: columns ruled by hairlines, logos floating (Vercel), reacting to the sector filter. */
.rt { padding-block: 2rem clamp(5rem, 8vw, 7rem); }
.rt__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.rt__head h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1; letter-spacing: -.045em; }
.rt__note { font-size: .9375rem; color: var(--rw-muted); opacity: 0; transition: opacity 200ms ease; }
.rt__note.is-on { opacity: 1; }
.rt__wall { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rt__wall li { display: grid; place-items: center; height: 10rem; border-right: 1px solid var(--rw-line); }
.rt__wall li:nth-child(6n + 1) { border-left: 1px solid var(--rw-line); }
.rt__wall li img { transition: opacity 300ms ease; }
.rv .rt__wall li.is-dim img { opacity: .12; }
.rv .rt__wall img { height: calc(var(--logo-h, 1.4rem) * 1.25); width: auto; max-width: 70%; filter: brightness(0); opacity: .9; }
.rv .rt__wall img[data-logo-tone="detail"], .rv .rl-logo img[data-logo-tone="detail"] { filter: grayscale(1) contrast(1.2) brightness(.5); }

@media (max-width: 1023px) {
  .rl-row { grid-template-columns: 9rem minmax(0, 1fr) 8rem; }
  .rl-ind, .rl-go { display: none; }
  .rt__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt__wall li:nth-child(6n + 1) { border-left: 0; } .rt__wall li:nth-child(3n + 1) { border-left: 1px solid var(--rw-line); }
}
@media (max-width: 639px) {
  .rl-row { grid-template-columns: 1fr; gap: .25rem; padding-block: 1rem; }
  .rl-logo { display: none; }
  .rl-tabs button span { display: none; }
  .rq__in { grid-template-columns: 1fr; }
}

/* ================= Round 5: one grid, logos that open into their project ================= */
.rl-headrow { display: flex; justify-content: space-between; align-items: end; }
.rg { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rw-line); border-left: 1px solid var(--rw-line); }
.rg-tile { position: relative; border-right: 1px solid var(--rw-line); border-bottom: 1px solid var(--rw-line); aspect-ratio: 5 / 4; }
.rg-in { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; color: var(--rw-ink); text-decoration: none; outline: none; }
.rg-mark { display: grid; place-items: center; transition: transform 600ms cubic-bezier(.2, .8, .2, 1), opacity 400ms ease; }
.rv .rg-logo { height: calc(var(--logo-h, 1.4rem) * 1.25); width: auto; max-width: 11rem; filter: brightness(0); opacity: .88; }
.rv .rg-logo[data-logo-tone="detail"] { filter: grayscale(1) contrast(1.2) brightness(.5); }
.rg-word { font-size: 1.375rem; font-weight: 600; letter-spacing: -.035em; }
.rg-sector { position: absolute; left: 1rem; bottom: .875rem; font-size: .875rem; color: #8a9099; transition: opacity 300ms ease; }
.rg-tile--project .rg-in::before { content: ""; position: absolute; right: .875rem; top: .875rem; width: 6px; height: 6px; background: var(--brand); transition: opacity 300ms ease; }

/* The reveal: the cover rises from the bottom edge as a curtain, the logo lifts away. */
.rg-reveal { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rg-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.12);
  transition: clip-path 650ms cubic-bezier(.7, 0, .2, 1), transform 900ms cubic-bezier(.2, .8, .2, 1); }
.rg-cover--plain { background: #121417 url("../../img/backgrounds/dream/figma/card/ai-bg-033.webp") center / cover; background-blend-mode: soft-light; }
.rg-reveal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(6 14 50 / 0) 30%, rgb(6 14 50 / .78) 100%); opacity: 0; transition: opacity 500ms ease 150ms; }
.rg-info { position: absolute; left: 1.125rem; right: 1.125rem; bottom: 1rem; z-index: 1; display: grid; gap: .25rem; color: #fff; }
.rg-info > * { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2, .8, .2, 1); }
.rg-name { font-size: 1.0625rem; font-weight: 500; transition-delay: 220ms; }
.rg-line { font-size: .9375rem; line-height: 1.35; color: rgb(255 255 255 / .9); transition-delay: 280ms; }
.rg-fig { margin: .375rem 0 0; display: flex; align-items: baseline; gap: .5rem; transition-delay: 340ms; }
.rg-fig b { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.rg-fig span { font-size: .875rem; opacity: .9; }
.rg-go { position: absolute; right: .875rem; top: .875rem; z-index: 1; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--rw-ink);
  opacity: 0; transform: scale(.6) rotate(-45deg); transition: opacity 300ms ease 300ms, transform 500ms cubic-bezier(.2, .8, .2, 1) 300ms; }
.rg-go svg { width: 1rem; height: 1rem; }
/* Brand clients without a project page: a quiet ink sheet with their figure. */
.rg-reveal--brand { background: #121417; clip-path: inset(100% 0 0 0); transition: clip-path 600ms cubic-bezier(.7, 0, .2, 1); }

.rg-in:hover .rg-mark, .rg-in:focus-visible .rg-mark { transform: translateY(-40%) scale(.8); opacity: 0; }
.rg-in:hover .rg-sector, .rg-in:focus-visible .rg-sector, .rg-in:hover::before, .rg-in:focus-visible::before { opacity: 0; }
.rg-in:hover .rg-cover, .rg-in:focus-visible .rg-cover { clip-path: inset(0 0 0 0); transform: scale(1); }
.rg-in:hover .rg-reveal--brand, .rg-in:focus-visible .rg-reveal--brand { clip-path: inset(0 0 0 0); }
.rg-in:hover .rg-reveal::after, .rg-in:focus-visible .rg-reveal::after { opacity: 1; }
.rg-in:hover .rg-info > *, .rg-in:focus-visible .rg-info > * { opacity: 1; transform: none; }
.rg-in:hover .rg-go, .rg-in:focus-visible .rg-go { opacity: 1; transform: none; }
.rg-in:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }

/* Tiles that end the grid: an invitation and the archive. */
.rg-tile--cta .rg-in { background: #f1f3f6; transition: background-color 250ms ease; }
.rg-tile--cta .rg-in:hover { background: var(--brand); color: #fff; }
.rg-cta { display: grid; justify-items: center; gap: .25rem; text-align: center; }
.rg-cta b { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.rg-cta span { font-size: .9375rem; opacity: .75; }

/* Filtered out: the tile stays in place (the grid does not jump), its content fades. */
.rg-tile.is-out .rg-in { pointer-events: none; }
.rg-tile.is-out .rg-mark, .rg-tile.is-out .rg-sector, .rg-tile.is-out .rg-in::before, .rg-tile.is-out .rg-cta { opacity: .1; }
.rg-mark, .rg-cta { transition: transform 600ms cubic-bezier(.2, .8, .2, 1), opacity 350ms ease; }

@media (max-width: 1023px) { .rg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .rg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-sector { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rg * { transition-duration: 1ms !important; transition-delay: 0s !important; } }

/* Round 6 (hover only): every tile opens onto a picture. The product image
   where we have one; otherwise the cobalt plate of the contact form. */
.rg-cover--plain, .rg-reveal--brand { background: #0b2a8a url("../../img/backgrounds/dream/figma/card/ai-bg-033.webp") center / cover; background-image: linear-gradient(rgb(6 30 130 / .45), rgb(6 30 130 / .45)), url("../../img/backgrounds/dream/figma/card/ai-bg-033.webp"); background-blend-mode: normal; }
.rg-tile:nth-child(3n + 2) .rg-reveal--brand, .rg-tile:nth-child(3n + 2) .rg-cover--plain { background-position: 30% 70%; }
.rg-tile:nth-child(3n) .rg-reveal--brand, .rg-tile:nth-child(3n) .rg-cover--plain { background-position: 80% 20%; }
/* 13 Oct: the reveal opens onto the Figma AI_Bg package (Brosam) instead of
   the one cobalt plate, a different ground per tile as on Galadrim, under the
   same dark veil so the white name stays readable. */
.rg-cover--plain, .rg-reveal--brand { --rg-plate: url("../../img/backgrounds/dream/figma/card/ai-bg-033.webp"); background-image: linear-gradient(rgb(6 20 70 / .35), rgb(6 20 70 / .35)), var(--rg-plate); background-size: cover; }
.rg-tile:nth-child(6n + 2) :is(.rg-reveal--brand, .rg-cover--plain) { --rg-plate: url("../../img/backgrounds/dream/figma/card/ai-bg-097.webp"); }
.rg-tile:nth-child(6n + 3) :is(.rg-reveal--brand, .rg-cover--plain) { --rg-plate: url("../../img/backgrounds/dream/figma/card/ai-bg-095.webp"); }
.rg-tile:nth-child(6n + 4) :is(.rg-reveal--brand, .rg-cover--plain) { --rg-plate: url("../../img/backgrounds/dream/figma/card/ai-bg-081.webp"); }
.rg-tile:nth-child(6n + 5) :is(.rg-reveal--brand, .rg-cover--plain) { --rg-plate: url("../../img/backgrounds/dream/figma/card/ai-bg-088.webp"); }
.rg-tile:nth-child(6n) :is(.rg-reveal--brand, .rg-cover--plain) { --rg-plate: url("../../img/backgrounds/dream/figma/card/ai-bg-096.webp"); }
.rg-reveal--brand .rg-info { bottom: 1rem; }
/* Hover (Hulusi, 24 Sept): the logo does not vanish, it travels to the top-left
   corner, turns white and sits above the picture. The name is then implied. */
.rg-mark { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%;
  transition: left 550ms cubic-bezier(.2, .8, .2, 1), top 550ms cubic-bezier(.2, .8, .2, 1), translate 550ms cubic-bezier(.2, .8, .2, 1), transform 550ms cubic-bezier(.2, .8, .2, 1), filter 300ms ease; }
.rg-in:hover .rg-mark, .rg-in:focus-visible .rg-mark { left: 1.125rem; top: 1rem; translate: 0 0; transform: scale(.78); transform-origin: top left; opacity: 1; }
.rv .rg-in:hover .rg-logo, .rv .rg-in:focus-visible .rg-logo { filter: brightness(0) invert(1); opacity: 1; }
.rg-in:hover .rg-word, .rg-in:focus-visible .rg-word { color: #fff; }
.rg-logo, .rg-word { transition: filter 300ms ease, color 300ms ease; }
.rg-tile .rg-name { display: none; }

/* ================= Stories, round 3: people, black and white, figures ================= */
.rv-slide__in { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #111; color: #fff; text-decoration: none; }
.rv-slide__in::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / 0) 28%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .72) 100%); pointer-events: none; }

.rv-slide__in > img, .rv-slide__in > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.rv-slide__in > video { opacity: 0; transition: opacity 500ms ease; }
.rv-slide.is-playing .rv-slide__in > video { opacity: 1; }
.rv-slide__cap { display: none; }
/* The figure: top-left, large, white. */
.rv-slide__kpi { position: absolute; left: 1.5rem; top: 1.25rem; z-index: 2; display: grid; gap: .125rem; }
.rv-slide__kpi b { font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: .95; font-weight: 500; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.rv-slide__kpi span { font-size: .9375rem; opacity: .85; }
/* The foot: the person on the left, what we built on the right, one baseline. */
.rv-slide__foot { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.25rem; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.rv-slide__who { display: grid; font-size: .9375rem; line-height: 1.35; opacity: .85; }
.rv-slide__who b { font-size: 1.0625rem; font-weight: 500; opacity: 1; color: #fff; }
.rv-slide__line { max-width: 22rem; font-size: .9375rem; line-height: 1.4; text-align: right; opacity: .85; }
.rv-slide__in:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .rv-slide__in:hover > img { transform: scale(1.04); transition: transform 6s linear; } }
@media (max-width: 639px) { .rv-slide__line { display: none; } }
/* Stories: a deeper top shade so the white figure always reads on bright photos. */
.rv-slide .rv-slide__in::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .18) 30%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .72) 100%); }
.rv-slide__kpi { text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
/* Grid hover (Hulusi): the logo waits a beat on the picture before it travels to the corner. */
.rg-in:hover .rg-mark, .rg-in:focus-visible .rg-mark { transition-delay: 350ms; }
.rv .rg-in:hover .rg-logo, .rv .rg-in:focus-visible .rg-logo, .rg-in:hover .rg-word { transition-delay: 150ms; }
.rg-in .rg-mark { transition-delay: 0s; }
/* Stories: colour comes back on hover; slides with a film show a play button. */
.rv-slide__in > img, .rv-slide__in > video { transition: filter 600ms ease, transform 6s linear, opacity 500ms ease; }
.rv-slide__in:hover > img, .rv-slide__in:hover > video, .rv-slide__in:focus-visible > img { filter: none; }
.rv-slide__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: inline-flex; align-items: center; gap: .625rem; padding: .5rem 1.125rem .5rem .5rem; border-radius: 999px;
  background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .45); color: #fff; font-size: .9375rem; font-weight: 500;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity 400ms ease, transform 400ms ease; }
.rv-slide__play svg { width: 2.5rem; height: 2.5rem; padding: .7rem; border-radius: 50%; background: #fff; color: #121417; box-sizing: border-box; }
.rv-slide.is-playing .rv-slide__play { opacity: 0; transform: scale(.94); }

/* Laptop tier (24 Sept, Hulusi: most visitors use a 14" MacBook, about
   1350 x 700 of window; this page was tuned on a 27"). Both versions. */
@media (min-width: 1024px) and (max-width: 1600px) {
  .editorial { --ed-title: clamp(2rem, 2.9vw, 2.5rem); --ed-display: clamp(2.25rem, 3.3vw, 3rem); --ed-stat: clamp(2.75rem, 3.8vw, 3.5rem); }
  .rv-head { padding-block: clamp(2rem, 5svh, 3.5rem) clamp(1.5rem, 3svh, 2.25rem); }
  .rv-head h1 { font-size: clamp(2.5rem, 4vw, 3.5rem); }
  /* A whole story fits the window: width from the height left (16:10). */
  .rv-stories__track { grid-auto-columns: min(62vw, calc((100svh - 20rem) * 1.6), 58rem); }
  .closing-contact__title { font-size: var(--ed-title); }
  .ed-faq summary { min-height: 4rem; padding-block: 1rem; font-size: 1.0625rem; }
}

/* Archive, logos only (25 Sept; Hulusi: "Use logos here. Remove the names.").
   Number, the client's logo, arrow. The name stays as the image's alt text
   (link text for screen readers and search). No logo found: the name set in
   type in the same slot, never initials or a drawn mark. */
.rw-arch--logos a { grid-template-columns: 2.25rem minmax(0, 1fr) auto !important; min-height: 4.5rem !important; gap: 1rem; }
.rw-arch--logos .rw-arch__logo { height: 2.75rem; }
.rw-arch--logos .rw-arch__logo img { max-width: 9rem; max-height: 2rem; transition: opacity 200ms ease; }
.rw-arch--logos .rw-arch__logo--invert img { filter: brightness(0); }
.rw-arch--logos .rw-arch__logo--type { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; color: var(--rw-ink); transition: color 200ms ease; }
.rw-arch--logos a:hover .rw-arch__logo--type { color: var(--brand); }
.rw-arch--logos a:hover .rw-arch__logo img { opacity: .75; }
/* Temporary Logoipsum placeholders: grey, so they never pass for a client. */
.rw-arch--logos .rw-arch__logo--placeholder img { filter: grayscale(1); opacity: .45; max-height: 1.5rem; }