/* ===========================================================================
   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);
}

/* 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. */
  .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.72) 45%,
      rgba(0, 0, 0, 0.45) 100%
    );
    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);
  max-width: 22ch;
}

/* 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;
}