/* ===========================================================================
   SECTIONS — page-level composition
   The distinctive layouts live here: the hero, the pillar spreads, the
   editorial work index, the client marquee and the contact desk.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   SCROLL-VIDEO HERO
   The hero is a pinned scroll-video section, so its copy is positioned inside
   the sticky viewport rather than by the generic .pc-hero rules below: aligned
   to the bottom, clear of the fixed header.
   ------------------------------------------------------------------------ */
[data-hero] .pc-scrollvideo__sticky {
  align-content: end;
  padding-block: calc(var(--pc-header-h) + 2rem) clamp(2.5rem, 7vh, 6rem);
}

[data-hero] .pc-scrollvideo__content {
  align-self: end;
}

/* ---------------------------------------------------------------------------
   HERO (static variant, kept for pages without a video band)
   ------------------------------------------------------------------------ */
.pc-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-block: calc(var(--pc-header-h) + 4rem) clamp(3rem, 8vh, 7rem);
  overflow: hidden;
}

.pc-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pc-hero__media video,
.pc-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The linear layer carries the copy. Its middle stops were raised (0.15@45%
   -> 0.58@32% / 0.20@64%) when the clips stopped being letterboxed on narrow
   viewports: the copy then sat over the lit floor of the about clip rather
   than over a black bar, and the 12px gold eyebrow measured 3.76:1 against a
   4.5 requirement. These stops put it at 5.23:1 across the whole clip.
   Re-measure if you touch them — worst local patch, never a frame average. */
.pc-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.9) 100%),
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.58) 32%,
      rgba(0, 0, 0, 0.2) 64%,
      rgba(0, 0, 0, 0.5) 100%
    );
}

.pc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.pc-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: var(--pc-s-6);
}

.pc-hero__eyebrow::after {
  content: '';
  flex: 1;
  max-width: 8rem;
  height: var(--pc-hairline);
  background: var(--pc-line-strong);
}

.pc-hero__title {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-hero);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: var(--pc-weight-regular);
  max-width: 16ch;
}

.pc-hero__title em {
  font-style: italic;
  color: var(--pc-gold);
}

/* A headline the copy sets on its own lines rather than leaving to the wrap.
 *
 * The lines are plain blocks in normal flow, which is the only way to break
 * this heading: it carries .pc-gold-gradient, and a line-splitting reveal
 * moves the words into transformed descendants that fall outside the painted
 * box, rendering it invisible. A block child stays inside the box, so the gold
 * still clips to it.
 *
 * 22ch because the longer of the two lines measures about 18ch once the
 * -0.04em tracking is accounted for. Below that it wraps again and the whole
 * point is lost; the base .pc-hero__title is 16ch, which was exactly the
 * problem. */
.pc-hero__title--stacked {
  max-width: 22ch;
  /* Only the floor moves: --pc-t-hero is clamp(2.6rem, 6.6vw, 6.25rem), and at
     its 2.6rem floor "WE ARE THE FUTURE" measures 409px inside a 335px column
     on a 375px screen — so both lines wrapped again and the heading came out
     on four. 1.95rem brings it to 307px and holds the two lines. The vw term
     and the ceiling are untouched, so from about 472px up this is the same
     size as the h1 it alternates with. */
  font-size: clamp(1.95rem, 6.6vw, 6.25rem);
}

.pc-hero__title-line {
  display: block;
}

/* Two copy stages inside one pinned hero ---------------------------------
   Default is normal flow, one stage after the other, so the section is
   complete with scripting off. hero-stages.js sets data-hero-stages="overlaid"
   immediately before it builds the crossfade, which pins both stages into the
   same grid cell. Nothing is hidden by CSS. */
.pc-hero__stage + .pc-hero__stage {
  margin-block-start: var(--pc-s-7);
}

.pc-hero__inner[data-hero-stages='overlaid'] {
  display: grid;
}

.pc-hero__inner[data-hero-stages='overlaid'] > .pc-hero__stage {
  grid-area: 1 / 1;
  margin-block-start: 0;
}

.pc-hero__lede {
  margin-block-start: var(--pc-s-5);
}

.pc-hero__foot {
  margin-block-start: var(--pc-s-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-s-6);
}

/* Scroll cue ------------------------------------------------------------- */
.pc-scrollcue {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--pc-t-label);
  letter-spacing: var(--pc-ls-wide);
  text-transform: uppercase;
  color: var(--pc-text-dim);
}

.pc-scrollcue__line {
  position: relative;
  display: block;
  width: 1px;
  height: 3rem;
  background: var(--pc-line);
  overflow: hidden;
}

.pc-scrollcue__line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 45%;
  background: var(--pc-gold);
  animation: pc-cue 2.6s var(--pc-ease-in-out) infinite;
}

@keyframes pc-cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(320%); }
}

/* ---------------------------------------------------------------------------
   PAGE HERO (interior pages)
   ------------------------------------------------------------------------ */
.pc-pagehero {
  position: relative;
  padding-block: calc(var(--pc-header-h) + clamp(5rem, 14vh, 10rem)) var(--pc-section-y-tight);
}

.pc-pagehero__title {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d1);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: var(--pc-weight-regular);
  max-width: 18ch;
}

.pc-pagehero__sub {
  margin-block-start: var(--pc-s-6);
  max-width: var(--pc-measure);
  font-size: var(--pc-t-lead);
  color: var(--pc-text-muted);
  font-weight: var(--pc-weight-light);
}

/* ---------------------------------------------------------------------------
   PILLARS — the three services as alternating editorial spreads
   ------------------------------------------------------------------------ */
.pc-pillar {
  position: relative;
  border-block-start: var(--pc-hairline) solid var(--pc-line);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.pc-pillar__grid {
  display: grid;
  gap: var(--pc-s-6);
  grid-template-columns: 1fr;
  align-items: start;
  /* The hover preview is absolutely positioned inside .pc-pillar. A positioned
     element paints above unpositioned siblings whatever their source order, so
     without a stacking position of its own the copy would sit *under* the
     image. Both layers are given an explicit z-index instead of relying on
     paint order. */
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .pc-pillar__grid {
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--pc-grid-gap);
    align-items: center;
  }
}

.pc-pillar__num {
  font-family: var(--pc-font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1;
  color: var(--pc-gold);
  opacity: 0.75;
  font-variant-numeric: lining-nums;
}

.pc-pillar__title {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d2);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: var(--pc-weight-regular);
  transition: color var(--pc-dur-base) var(--pc-ease);
}

.pc-pillar:hover .pc-pillar__title {
  color: var(--pc-gold);
}

.pc-pillar__body {
  display: grid;
  gap: var(--pc-s-5);
  max-width: 46ch;
}

/* Hover preview image, desktop only. */
.pc-pillar__preview {
  display: none;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .pc-pillar__preview {
    display: block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--pc-page-x);
    width: min(26vw, 22rem);
    aspect-ratio: 16 / 10;
    translate: 0 -50%;
    opacity: 0;
    scale: 0.94;
    pointer-events: none;
    transition: opacity var(--pc-dur-base) var(--pc-ease),
      scale var(--pc-dur-base) var(--pc-ease);
    z-index: 0;
    overflow: hidden;
  }

  /* The copy overlaps the preview, so the image has to stay a backdrop: dimmed,
     and carrying its own gradient so the left edge — the side the text runs
     into — is darkest. Without this the body copy sits on mid-tone photography
     and falls under the AA threshold.

     This is the same ::after the blur-up placeholder uses, and .pc-figure fades
     that one to opacity 0 once its image loads (components.css). At (0,2,2)
     that rule outranked a bare `.pc-pillar__preview::after`, so until
     2026-09-21 the gradient vanished the moment the photo arrived and the copy
     measured 0.87:1. This selector outranks it, and drops the placeholder's
     blur so the photo stays sharp under the gradient. Worst 6x6 patch under the
     copy at the 0.78 middle stop: 5.13, 5.35 and 4.87:1 across the three rows
     (0.72 left the third at 4.46:1). */
  .pc-pillar .pc-figure.pc-pillar__preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.78) 45%,
      rgba(0, 0, 0, 0.45) 100%
    );
    opacity: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }

  .pc-pillar:hover .pc-pillar__preview,
  .pc-pillar:focus-within .pc-pillar__preview {
    opacity: 0.7;
    scale: 1;
  }
}

/* ---------------------------------------------------------------------------
   STATEMENT — an oversized pull quote band
   ------------------------------------------------------------------------ */
.pc-statement {
  font-family: var(--pc-font-display);
  font-size: clamp(1.8rem, 4.4vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: var(--pc-weight-regular);
  max-width: 22ch;
}

.pc-statement em {
  font-style: italic;
  color: var(--pc-gold);
}

/* ---------------------------------------------------------------------------
   WORK INDEX
   Desktop: a typographic index; hovering a row floats its image beside the
   cursor. Mobile: the same markup renders as a normal card grid, so there is
   no duplicated DOM and no hover-only content.
   ------------------------------------------------------------------------ */
.pc-index {
  display: grid;
  gap: var(--pc-s-7);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.pc-index__item {
  position: relative;
}

.pc-index__link {
  display: grid;
  gap: var(--pc-s-4);
}

.pc-index__media {
  display: block;
}

.pc-index__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
}

.pc-index__num {
  font-size: var(--pc-t-label);
  letter-spacing: var(--pc-ls-wide);
  color: var(--pc-gold);
  font-variant-numeric: tabular-nums;
}

.pc-index__title {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d4);
  line-height: 1.15;
  transition: color var(--pc-dur-fast) var(--pc-ease);
}

.pc-index__link:hover .pc-index__title,
.pc-index__link:focus-visible .pc-index__title {
  color: var(--pc-gold);
}

.pc-index__tag {
  font-size: var(--pc-t-label);
  letter-spacing: var(--pc-ls-wide);
  text-transform: uppercase;
  color: var(--pc-text-dim);
}

/* Editorial list mode ---------------------------------------------------- */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .pc-index[data-mode='editorial'] {
    display: block;
    border-block-start: var(--pc-hairline) solid var(--pc-line);
  }

  .pc-index[data-mode='editorial'] .pc-index__item {
    border-block-end: var(--pc-hairline) solid var(--pc-line);
  }

  .pc-index[data-mode='editorial'] .pc-index__link {
    grid-template-columns: 5rem minmax(0, 1fr) 14rem 6rem;
    align-items: center;
    gap: var(--pc-grid-gap);
    padding-block: clamp(1.4rem, 2.4vw, 2.2rem);
    transition: padding-inline-start var(--pc-dur-base) var(--pc-ease),
      background-color var(--pc-dur-base) var(--pc-ease);
  }

  .pc-index[data-mode='editorial'] .pc-index__link:hover,
  .pc-index[data-mode='editorial'] .pc-index__link:focus-visible {
    padding-inline-start: 1.5rem;
  }

  /* The image leaves the flow and is positioned against the cursor by JS. */
  .pc-index[data-mode='editorial'] .pc-index__media {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 20rem;
    z-index: var(--pc-z-raised);
    pointer-events: none;
    opacity: 0;
    scale: 0.9;
    transition: opacity var(--pc-dur-fast) var(--pc-ease),
      scale var(--pc-dur-fast) var(--pc-ease);
    will-change: transform;
  }

  .pc-index[data-mode='editorial'] .pc-index__item[data-active='true'] .pc-index__media {
    opacity: 1;
    scale: 1;
  }

  .pc-index[data-mode='editorial'] .pc-index__title {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  }

  /* Everything except the hovered row recedes. */
  .pc-index[data-mode='editorial'][data-hovering='true'] .pc-index__item:not([data-active='true']) .pc-index__title {
    opacity: 0.35;
  }

  .pc-index[data-mode='editorial'] .pc-index__title {
    transition: opacity var(--pc-dur-base) var(--pc-ease),
      color var(--pc-dur-fast) var(--pc-ease);
  }
}

/* ---------------------------------------------------------------------------
   FEATURED WORK STRIP (home) — offset editorial collage
   ------------------------------------------------------------------------ */
.pc-collage {
  display: grid;
  gap: var(--pc-s-6);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .pc-collage {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--pc-grid-gap) var(--pc-grid-gap);
  }

  .pc-collage > *:nth-child(1) { grid-column: 1 / span 5; }
  .pc-collage > *:nth-child(2) { grid-column: 7 / span 4; margin-block-start: 6rem; }
  .pc-collage > *:nth-child(3) { grid-column: 2 / span 4; }
  .pc-collage > *:nth-child(4) { grid-column: 7 / span 5; margin-block-start: -3rem; }
  .pc-collage > *:nth-child(5) { grid-column: 1 / span 4; margin-block-start: 2rem; }
  .pc-collage > *:nth-child(6) { grid-column: 6 / span 5; }
}

/* ---------------------------------------------------------------------------
   CLIENT MARQUEE
   Two rows drifting in opposite directions. The track is duplicated and the
   copy is aria-hidden so screen readers hear each client once.
   ------------------------------------------------------------------------ */
.pc-marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--pc-s-5);
  border-block: var(--pc-hairline) solid var(--pc-line);
  /* Fade the ends so items dissolve rather than clip. */
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.pc-marquee + .pc-marquee {
  border-block-start: 0;
}

.pc-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: max-content;
  will-change: transform;
}

.pc-marquee__item {
  font-family: var(--pc-font-display);
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-text-dim);
  white-space: nowrap;
  transition: color var(--pc-dur-base) var(--pc-ease);
}

/* The chip carries the logo, so the resting treatment moves to the chip: it is
   the whole tile that recedes, not the artwork inside a bright white box. */
.pc-marquee__item .pc-client__chip {
  opacity: 0.62;
  filter: grayscale(1);
  transition: opacity var(--pc-dur-base) var(--pc-ease),
    filter var(--pc-dur-base) var(--pc-ease);
}

.pc-marquee__item:hover {
  color: var(--pc-gold);
}

.pc-marquee__item:hover .pc-client__chip {
  opacity: 1;
  filter: grayscale(0);
}

/* Static grid of clients on the Clients page. */
/* The column floor is set by the artwork, not by taste: a logo at
   --pc-client-logo-h needs 2.75x that in width (see .pc-client__chip), plus
   the cell padding and the chip's own. At the 4.4rem ceiling that is roughly
   17rem, so 16rem keeps every column within a hair of full size and the
   max-width guard absorbs the rest. Fewer, larger cells is the point. */
.pc-clientwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--pc-hairline);
  background: var(--pc-line);
  border: var(--pc-hairline) solid var(--pc-line);
}

/* 16:8 rather than the old 16:10. The logo box is 2.75:1, so a taller cell
   only adds dead ground above and below a mark that cannot grow into it. */
.pc-clientwall__cell {
  background: var(--pc-surface);
  aspect-ratio: 16 / 8;
  display: grid;
  place-items: center;
  padding: var(--pc-s-4);
  text-align: center;
  transition: background-color var(--pc-dur-base) var(--pc-ease);
}

.pc-clientwall__cell:hover {
  background: var(--pc-surface-raised);
}

/* On the wall the chip fills its cell, so the grid reads as a sheet of logos
   rather than as 47 floating cards. Desaturated at rest, true colour on hover
   — the same treatment as the marquee. */
.pc-clientwall__cell .pc-client__chip {
  width: 100%;
  height: 100%;
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity var(--pc-dur-base) var(--pc-ease),
    filter var(--pc-dur-base) var(--pc-ease);
}

.pc-clientwall__cell:hover .pc-client__chip {
  opacity: 1;
  filter: grayscale(0);
}

.pc-clientwall__name {
  font-family: var(--pc-font-display);
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pc-text-muted);
  transition: color var(--pc-dur-base) var(--pc-ease);
  line-height: 1.3;
}

.pc-clientwall__cell:hover .pc-clientwall__name {
  color: var(--pc-gold);
}

.pc-clientwall__sector {
  display: block;
  margin-block-start: 0.5rem;
  font-family: var(--pc-font-body);
  font-size: 0.62rem;
  letter-spacing: var(--pc-ls-wide);
  color: var(--pc-text-dim);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   SPLIT — text beside a tall image
   ------------------------------------------------------------------------ */
.pc-split {
  display: grid;
  gap: var(--pc-s-8);
  align-items: center;
}

@media (min-width: 900px) {
  .pc-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 6vw, 6rem);
  }

  .pc-split--reverse > *:first-child {
    order: 2;
  }
}

/* ---------------------------------------------------------------------------
   FACT ROW — the credentials strip
   ------------------------------------------------------------------------ */
.pc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--pc-s-7);
  border-block-start: var(--pc-hairline) solid var(--pc-line);
  padding-block-start: var(--pc-s-7);
}

.pc-fact__value {
  font-family: var(--pc-font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--pc-gold);
}

.pc-fact__label {
  margin-block-start: 0.7rem;
  font-size: var(--pc-t-small);
  color: var(--pc-text-muted);
  max-width: 22ch;
}

/* ---------------------------------------------------------------------------
   DEPARTMENT DESK (contact)
   ------------------------------------------------------------------------ */
.pc-desks {
  display: grid;
  gap: var(--pc-hairline);
  background: var(--pc-line);
  border: var(--pc-hairline) solid var(--pc-line);
}

@media (min-width: 760px) {
  .pc-desks {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pc-desk {
  background: var(--pc-surface);
  padding: var(--pc-s-7) var(--pc-s-6);
  display: grid;
  gap: var(--pc-s-3);
  align-content: start;
  transition: background-color var(--pc-dur-base) var(--pc-ease);
}

.pc-desk:hover {
  background: var(--pc-surface-raised);
}

.pc-desk__name {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d4);
}

.pc-desk__intent {
  font-size: var(--pc-t-small);
  color: var(--pc-text-muted);
  min-height: 3em;
}

.pc-desk__email {
  font-size: var(--pc-t-small);
  color: var(--pc-gold);
  word-break: break-word;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--pc-line-strong);
  padding-block: 0.4rem;
  transition: text-decoration-color var(--pc-dur-fast) var(--pc-ease);
}

.pc-desk__email:hover {
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
   FAQ ACCORDION
   Built on <details>, so it works with zero JS and is announced correctly.
   ------------------------------------------------------------------------ */
.pc-faq {
  border-block-start: var(--pc-hairline) solid var(--pc-line);
}

.pc-faq__item {
  border-block-end: var(--pc-hairline) solid var(--pc-line);
}

.pc-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pc-s-5);
  padding-block: var(--pc-s-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d4);
  color: var(--pc-text);
  transition: color var(--pc-dur-fast) var(--pc-ease);
  min-height: 44px;
}

.pc-faq__q::-webkit-details-marker {
  display: none;
}

.pc-faq__q:hover {
  color: var(--pc-gold);
}

.pc-faq__icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  position: relative;
  align-self: center;
}

.pc-faq__icon::before,
.pc-faq__icon::after {
  content: '';
  position: absolute;
  background: var(--pc-gold);
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: var(--pc-hairline);
  transition: transform var(--pc-dur-base) var(--pc-ease);
}

.pc-faq__icon::after {
  transform: rotate(90deg);
}

.pc-faq__item[open] .pc-faq__icon::after {
  transform: rotate(0deg);
}

.pc-faq__a {
  padding-block-end: var(--pc-s-6);
  max-width: var(--pc-measure);
  color: var(--pc-text-muted);
  font-size: var(--pc-t-body);
}

/* ---------------------------------------------------------------------------
   CASE STUDY CHAPTERS
   ------------------------------------------------------------------------ */
.pc-chapter {
  display: grid;
  gap: var(--pc-s-5);
  padding-block: var(--pc-s-8);
  border-block-start: var(--pc-hairline) solid var(--pc-line);
}

@media (min-width: 900px) {
  .pc-chapter {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--pc-s-8);
  }
}

/* ---------------------------------------------------------------------------
   NEXT / PREV PAGER
   ------------------------------------------------------------------------ */
.pc-pager {
  display: grid;
  gap: var(--pc-hairline);
  background: var(--pc-line);
  border-block: var(--pc-hairline) solid var(--pc-line);
}

@media (min-width: 760px) {
  .pc-pager {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pc-pager__link {
  background: var(--pc-surface);
  padding: var(--pc-s-8) var(--pc-s-6);
  display: grid;
  gap: var(--pc-s-3);
  transition: background-color var(--pc-dur-base) var(--pc-ease);
}

.pc-pager__link:hover {
  background: var(--pc-surface-raised);
}

.pc-pager__link--next {
  text-align: right;
}

/* ---------------------------------------------------------------------------
   BIG CTA BAND
   ------------------------------------------------------------------------ */
.pc-cta {
  position: relative;
  padding-block: clamp(5rem, 12vw, 10rem);
  border-block-start: var(--pc-hairline) solid var(--pc-line);
  text-align: center;
  overflow: hidden;
}

.pc-cta__title {
  font-family: var(--pc-font-display);
  font-size: clamp(2.2rem, 6.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: var(--pc-weight-regular);
  margin-inline: auto;
  max-width: 16ch;
}

.pc-cta__mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: min(60vw, 34rem);
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}

/* ---------------------------------------------------------------------------
   ERROR PAGES
   ------------------------------------------------------------------------ */
.pc-error {
  min-height: 78svh;
  display: grid;
  align-content: center;
  gap: var(--pc-s-6);
  padding-block: calc(var(--pc-header-h) + 4rem) var(--pc-s-11);
}

.pc-error__code {
  font-family: var(--pc-font-display);
  font-size: clamp(5rem, 22vw, 16rem);
  line-height: 0.85;
  color: var(--pc-gold);
  opacity: 0.16;
}

/* ---------------------------------------------------------------------------
   LEGAL / LONG-FORM PROSE
   ------------------------------------------------------------------------ */
.pc-prose {
  max-width: var(--pc-measure);
  color: var(--pc-text-muted);
}

.pc-prose h2 {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d3);
  color: var(--pc-text);
  margin-block: var(--pc-s-8) var(--pc-s-4);
}

.pc-prose h3 {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d4);
  color: var(--pc-text);
  margin-block: var(--pc-s-6) var(--pc-s-3);
}

.pc-prose p {
  margin-block-end: 1.3em;
}

.pc-prose ul {
  list-style: none;
  margin-block-end: 1.4em;
  display: grid;
  gap: 0.6rem;
}

.pc-prose ul li {
  position: relative;
  padding-inline-start: 1.4rem;
}

.pc-prose ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--pc-gold);
  rotate: 45deg;
}

.pc-prose strong {
  color: var(--pc-text);
  font-weight: var(--pc-weight-semi);
}

/* ---------------------------------------------------------------------------
   HERO KICKER
   "We are Prestige. We are the Future." — set at display size rather than at
   label size, at the client's request. It is the only gold line on the About
   hero and was previously lost at 0.72rem.
   ------------------------------------------------------------------------ */
.pc-hero__kicker {
  font-family: var(--pc-font-display);
  font-size: clamp(1.15rem, 2.6vw, 2.15rem);
  font-weight: var(--pc-weight-regular);
  letter-spacing: 0.12em;
  line-height: var(--pc-lh-snug);
  text-transform: uppercase;
  margin-block-end: var(--pc-s-6);
  /* 27ch, not 22ch. The copy is two sentences of 16 and 18 characters, and at
     22ch the longer one could not hold a line — "Future." fell through to a
     third line on its own. 27ch is wide enough for either sentence whole and
     still far too narrow for both, so the break lands between them at every
     size. Measured against the tracking, which `ch` alone does not account
     for: the caps run about 12.4x the font size, or roughly 25ch. */
  max-width: 27ch;
  text-wrap: balance;
}

/* The Portfolio masthead: gold and set larger than a standard page title, both
   at the client's request. Tracking opens up because the word is set in caps —
   at the default -0.03em the letters would collide.

   Flat gold, NOT .pc-gold-gradient. The gradient works by painting a
   background on the element and clipping it to that element's own text
   (`background-clip: text` + a transparent text fill). This heading carries
   data-reveal="lines", and reveal.js splits its text into .pc-line__inner
   descendants — which inherit the transparent fill but sit outside the box the
   gradient is painted on, so the words render as nothing at all. Gradient and
   line-split cannot both own the same element. #bf9b5c measures 8.08:1 on
   black (see tokens.css), so nothing is lost but the sheen. */
.pc-pagehero__title--gold {
  font-size: var(--pc-t-hero);
  letter-spacing: 0.04em;
  line-height: 1;
  max-width: none;
  color: var(--pc-gold);
}

/* ---------------------------------------------------------------------------
   SECTION LEDE — a heading with a "see more" link opposite it
   ------------------------------------------------------------------------ */
.pc-section__lede {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-s-6);
  align-items: end;
  justify-content: space-between;
  margin-block-end: var(--pc-s-9);
}

/* ---------------------------------------------------------------------------
   THE PRESTIGE VALUES
   Eight words that spell P-R-E-S-T-I-G-E, over the gold-dust clip. The initial
   is a separate span so the acrostic can be set in gold; it repeats the first
   letter of the word beside it and is aria-hidden, never announced twice.
   ------------------------------------------------------------------------ */
.pc-values {
  position: relative;
  /* Above the dust canvas, which is a sibling in the same grid cell. Paint
     order alone would not decide this: an absolutely positioned canvas paints
     over unpositioned copy whatever the source order. */
  z-index: 3;
}

/* The copy's own scrim — the same device the framed molten band uses, and for
   the same reason.

   The section scrim already handles the footage: measured in 6x6 blocks across
   all 5s of about-dust.mp4, the worst block leaves cream at 12.2:1 and gold at
   5.3:1. The dust canvas is the problem. It paints ON TOP of that scrim, and a
   mote core peaks at rgb(200,186,161) — over a letter-stroke-sized 4x4 patch,
   relative luminance 0.388. Cream on that patch is 2.1:1 and gold is 1.1:1:
   both clear AA failures, and moving, so a letter drops out for a moment as a
   mote drifts behind it.

   This ellipse sits above the canvas and below the words. At a 0.82 core it
   takes that worst patch to 0.019, which is cream 12.6:1 and gold 6.7:1 — and
   it fades out, so the dust still sparkles at the edges of the frame where no
   type sits. Re-measure per docs/DESIGN-SYSTEM.md before weakening it. */
.pc-values::before {
  content: '';
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 68% 62% at 50% 50%,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.7) 58%,
    rgba(0, 0, 0, 0) 100%
  );
}

.pc-values__list {
  list-style: none;
  margin: var(--pc-s-8) auto 0;
  padding: 0;
  display: grid;
  gap: clamp(0.35rem, 1.1vh, 0.9rem);
  width: fit-content;
}

.pc-values__item {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  align-items: baseline;
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
}

.pc-values__initial {
  font-family: var(--pc-font-display);
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  line-height: 1;
  color: var(--pc-gold);
  text-align: center;
}

.pc-values__word {
  font-family: var(--pc-font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.75rem);
  font-weight: var(--pc-weight-light);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--pc-text);
}

/* ---------------------------------------------------------------------------
   GOLD DUST CANVAS
   Painted by assets/js/modules/gold-dust.js over the scroll-driven clip.
   Decorative and aria-hidden: the values above are real text and the section
   reads completely with this canvas absent or unpainted.
   ------------------------------------------------------------------------ */
.pc-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Above the clip and its scrim, below the copy. */
  z-index: 2;
  /* The motes must never eat a click or a hover meant for the text. */
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   CLIENT LOGO CHIPS
   The site's ground is pure black and 23 of the client's 47 logos are dark
   artwork that vanishes on it. Each mark therefore sits on a light chip — the
   background every one of them was drawn to work against — rather than being
   recoloured, which most brand guidelines forbid.
   ------------------------------------------------------------------------ */
.pc-client__chip {
  /* The one number that sizes every client logo on the site — the wall and the
     home marquee both read it. Doubled at the client's request (2026-08-23);
     it was clamp(1.5rem, 2.4vw, 2.2rem).

     bin/build-logos.sh centres each mark inside a fixed 440x160 canvas, so the
     <img> box is always 2.75:1 whatever the logo's own shape. That is
     deliberate — it stops a long wordmark rendering three times the size of a
     roundel — but it means the *width* a given height demands is 2.75x that
     height, and the chip has to be wide enough for it. Raising this value
     without widening .pc-clientwall's columns will just hit max-width below
     and quietly render smaller than asked. */
  --pc-client-logo-h: clamp(3rem, 4.8vw, 4.4rem);

  display: grid;
  place-items: center;
  /* White, not cream: a dozen of the logos are opaque files with a baked-in
     white box, and on cream that box shows as a paler rectangle inside the
     chip. Against white it disappears. */
  background: #ffffff;
  padding: clamp(0.5rem, 1.4vw, 0.9rem) clamp(0.75rem, 2vw, 1.35rem);
  border: var(--pc-hairline) solid transparent;
  transition: border-color var(--pc-dur-base) var(--pc-ease),
    transform var(--pc-dur-base) var(--pc-ease);
}

.pc-client__chip img {
  display: block;
  width: auto;
  height: var(--pc-client-logo-h);
  /* The ceiling, not the size. A narrow column or a short cell shrinks the
     mark rather than letting it bleed over the white chip onto the black. */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pc-client__name {
  font-family: var(--pc-font-display);
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pc-text-muted);
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   PORTFOLIO
   ------------------------------------------------------------------------ */
.pc-portfolio__heading {
  margin-block-end: var(--pc-s-7);
  color: var(--pc-gold);
}

/* The filter row already separates the masthead from the grid, so the first
   category does not need a second full section's padding above it as well. */
.pc-portfolio__group:first-of-type {
  padding-block-start: var(--pc-s-8);
}

/* Masonry via CSS columns rather than grid: the photographs keep their own
   proportions (see bin/build-images.php), and a column flow packs mixed
   portrait and landscape without the row-height quantisation a grid imposes.
   Reading order runs down each column, which for an unordered set of pictures
   is not a problem the way it would be for prose. */
.pc-masonry {
  columns: 1;
  column-gap: var(--pc-grid-gap);
}

@media (min-width: 600px) {
  .pc-masonry {
    columns: 2;
  }
}

@media (min-width: 1000px) {
  .pc-masonry {
    columns: 3;
  }
}

.pc-masonry__item {
  display: block;
  /* break-inside is what stops a photograph being sliced across a column
     boundary; the margin has to be block-end only or the columns misalign. */
  break-inside: avoid;
  margin-block-end: var(--pc-grid-gap);
  cursor: zoom-in;
}