/* new-home - PROOF (owner: agent 6)
   Calm after the energy: one big fact in rings, a refined awards row, one real voice in a ring,
   and a slow client marquee. Semantic tokens only (css/tokens.css). Motion = transform/opacity. */

#nh-proof.pf-host { background: var(--nh-bg); }

.pf {
  width: 100%;
  max-width: calc(var(--nh-container) + 2 * var(--nh-gutter));
  margin-inline: auto;
  padding: var(--nh-section-y) var(--nh-gutter);
  display: grid;
  gap: clamp(4rem, 2.5rem + 7vw, 10rem);
}

/* shared small heading for the three blocks */
.pf-kicker {
  margin: 0;
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-xs);
  font-weight: var(--nh-weight-medium);
  letter-spacing: var(--nh-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nh-text-subtle);
  line-height: 1.4;
}

/* ---------- head ---------- */
.pf-head { text-align: center; display: grid; justify-items: center; gap: var(--nh-space-4); }
.pf-eyebrow {
  margin: 0;
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-xs);
  font-weight: var(--nh-weight-medium);
  letter-spacing: var(--nh-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nh-accent);
}
.pf-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-3xl);
  font-weight: var(--nh-weight-medium);
  line-height: var(--nh-lh-heading);
  letter-spacing: var(--nh-tracking-display);
  color: var(--nh-heading);
  text-wrap: balance;
}
.pf-lede {
  margin: 0;
  max-width: 46ch;
  font-size: var(--nh-fs-lg);
  line-height: 1.55;
  color: var(--nh-text-muted);
  text-wrap: pretty;
}

/* ---------- the one big fact, inside rings ---------- */
.pf-stat {
  --p: 0.5;
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--nh-space-4);
  padding-block: clamp(4rem, 2rem + 7vw, 8rem);
}
.pf-stat__rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 0; }
.pf-stat__rings span {
  grid-area: 1 / 1;
  width: clamp(19rem, 13rem + 22vw, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--nh-border);
  transform: scale(calc(1 + (var(--k) - 1) * (0.7 + var(--p) * 0.6 * var(--nh-move))));
  will-change: transform;
}
.pf-stat__rings span:nth-child(1) { --k: 0.8; border-color: var(--nh-accent-strong); opacity: 0.55; }
.pf-stat__rings span:nth-child(2) { --k: 1; }
.pf-stat__rings span:nth-child(3) { --k: 1.24; border-style: dashed; opacity: 0.7; }
.pf-stat__big {
  position: relative; z-index: 1;
  margin: 0;
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-mega);
  font-weight: var(--nh-weight-light);
  line-height: 0.9;
  letter-spacing: var(--nh-tracking-mega);
  color: var(--nh-heading);
  font-variant-numeric: tabular-nums;
}
.pf-stat__text {
  position: relative; z-index: 1;
  margin: 0;
  max-width: 30ch;
  font-size: var(--nh-fs-lg);
  line-height: 1.45;
  color: var(--nh-text);
  text-wrap: balance;
}
.pf-stat__years {
  display: block;
  margin-top: var(--nh-space-2);
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-sm);
  letter-spacing: 0.12em;
  color: var(--nh-accent);
}

/* ---------- awards row ---------- */
.pf-awards { display: grid; gap: var(--nh-space-6); justify-items: center; }
.pf-awards__list {
  list-style: none; margin: 0; padding: var(--nh-space-6) 0 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--nh-space-7) var(--nh-space-5);
  border-top: 1px solid var(--nh-divider);
}
@media (min-width: 1100px) { .pf-awards__list { grid-template-columns: repeat(6, 1fr); gap: var(--nh-space-6); } }
@media (min-width: 640px) and (max-width: 1099px) { .pf-awards__list { grid-template-columns: repeat(3, 1fr); } }
.pf-award { display: grid; justify-items: center; align-content: start; text-align: center; gap: var(--nh-space-2); }
.pf-award__img {
  width: 100%; max-width: 9.5rem; height: auto; aspect-ratio: 512 / 355;
  margin-bottom: var(--nh-space-2);
  transition: opacity var(--nh-dur-base) var(--nh-ease-out), transform var(--nh-dur-slow) var(--nh-ease-out);
}
.pf-award:hover .pf-award__img { opacity: 1; transform: translateY(calc(-3px * var(--nh-move))); }
.pf-award__org {
  margin: 0;
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-sm);
  font-weight: var(--nh-weight-semibold);
  line-height: 1.3;
  color: var(--nh-text);
}
.pf-award__what { margin: 0; font-size: var(--nh-fs-2xs); line-height: 1.45; color: var(--nh-text-muted); max-width: 22ch; }

/* ---------- one real voice ---------- */
.pf-quote { display: grid; gap: var(--nh-space-6); }
.pf-quote > .pf-kicker { text-align: center; }
.pf-quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 5vw, 7rem);
  align-items: center;
}
.pf-quote__visual { position: relative; display: grid; place-items: center; padding: 12%; }
.pf-quote__rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pf-quote__rings span { grid-area: 1 / 1; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--nh-border); }
.pf-quote__rings span:nth-child(1) { width: 88%; border-color: var(--nh-border-strong); }
.pf-quote__frame {
  width: 100%; max-width: 26rem; aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: var(--nh-shadow-3);
  --nh-kenburns-duration: 22s;
}
.pf-quote__frame img { border-radius: 50%; }
.pf-quote__body { margin: 0; display: grid; gap: var(--nh-space-6); }
.pf-quote__text { margin: 0; position: relative; padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.pf-quote__text::before {
  content: "\201C";
  position: absolute;
  left: -0.06em; top: -0.12em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(5rem, 3rem + 6vw, 9rem);
  line-height: 1;
  color: var(--nh-accent-strong);
  opacity: 0.35;
  pointer-events: none;
}
.pf-quote__text p {
  position: relative;
  margin: 0;
  font-family: var(--nh-font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  font-weight: var(--nh-weight-light);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--nh-heading);
  text-wrap: pretty;
}
.pf-quote__cite { display: grid; gap: 2px; font-style: normal; padding-left: var(--nh-space-5); border-left: 2px solid var(--nh-accent-strong); }
.pf-quote__name { font-family: var(--nh-font-display); font-weight: var(--nh-weight-semibold); font-size: var(--nh-fs-base); color: var(--nh-text); }
.pf-quote__role { font-size: var(--nh-fs-sm); color: var(--nh-text-muted); }
.pf-quote__about { font-size: var(--nh-fs-2xs); color: var(--nh-text-subtle); margin-top: var(--nh-space-1); letter-spacing: 0.02em; }

@media (max-width: 760px) {
  .pf-quote__grid { grid-template-columns: 1fr; }
  .pf-quote__visual { width: min(100%, 22rem); margin-inline: auto; padding: 10%; }
}

/* ---------- client marquee ---------- */
.pf-clients { display: grid; gap: var(--nh-space-6); }
.pf-clients__head {
  display: flex; align-items: center; justify-content: center; gap: var(--nh-space-4);
  text-align: center;
}
.pf-clients__toggle {
  flex: none;
  display: inline-grid; place-items: center;
  width: var(--nh-tap); height: var(--nh-tap);
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--nh-border-strong);
  background: transparent;
  color: var(--nh-text);
  cursor: pointer;
  transition: background-color var(--nh-dur-fast) var(--nh-ease-out), border-color var(--nh-dur-fast) var(--nh-ease-out);
}
.pf-clients__toggle:hover { background: var(--nh-accent-soft); border-color: var(--nh-accent); }
.pf-clients__toggle:focus-visible { border-radius: 50%; }
.pf-ico { display: inline-grid; place-items: center; grid-area: 1 / 1; }
.pf-clients__toggle .pf-ico--play { display: none; }
.pf-clients__toggle[aria-pressed="true"] .pf-ico--play { display: inline-grid; }
.pf-clients__toggle[aria-pressed="true"] .pf-ico--pause { display: none; }

.pf-marquee {
  --logo-h: clamp(44px, 30px + 2.4vw, 68px);
  --logo-gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  position: relative;
  overflow: hidden;
  /* soft edges: logos drift in and out of the dark, not off a cliff */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  padding-block: var(--nh-space-4);
}
.pf-marquee__track {
  display: flex;
  width: max-content;
  animation: pf-marquee 80s linear infinite;
  will-change: transform;
}
.pf-marquee__list {
  list-style: none; margin: 0; padding: 0 var(--logo-gap) 0 0;
  display: flex; align-items: center; gap: var(--logo-gap);
  flex: none;
}
.pf-marquee:hover .pf-marquee__track,
.pf-marquee:focus-within .pf-marquee__track,
.pf-marquee.is-paused .pf-marquee__track,
.pf-marquee.is-offscreen .pf-marquee__track { animation-play-state: paused; }
@keyframes pf-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* still: reduced motion shows every logo at once, centred, wrapped */
.pf-marquee.is-static { -webkit-mask-image: none; mask-image: none; }
.pf-marquee.is-static .pf-marquee__track { animation: none; width: 100%; justify-content: center; }
.pf-marquee.is-static .pf-marquee__list { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: center; padding: 0; row-gap: var(--nh-space-6); }
.pf-marquee.is-static .pf-marquee__list--clone { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pf-marquee { -webkit-mask-image: none; mask-image: none; }
  .pf-marquee__track { animation: none; width: 100%; justify-content: center; }
  .pf-marquee__list { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: center; padding: 0; row-gap: var(--nh-space-6); }
  .pf-marquee__list--clone { display: none; }
  .pf-clients__toggle { display: none; }
}

/* one logo: cropped to its ink (box from proof.js), sized by aspect ratio for optical balance */
.pf-logo {
  position: relative;
  flex: none;
  height: calc(var(--logo-h) * var(--s, 1));
  aspect-ratio: var(--ar, 1);
  overflow: hidden;
}
.pf-logo .pf-logo__img {
  position: absolute;
  left: var(--ix, 0); top: var(--iy, 0);
  width: var(--iw, 100%); height: var(--ih, 100%);
  max-width: none;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}
/* one colour per theme, whatever colour the source file is (dark = white marks, light = ink marks) */
.pf-logo[data-ink="dark"] .pf-logo__img { filter: grayscale(1) invert(1); opacity: 0.74; }
.pf-logo[data-ink="light"] .pf-logo__img { filter: grayscale(1); opacity: 0.74; }
.pf-logo:hover .pf-logo__img { opacity: 1; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pf-logo[data-ink="dark"] .pf-logo__img { filter: grayscale(1); opacity: 0.7; }
  :root:not([data-theme="dark"]) .pf-logo[data-ink="light"] .pf-logo__img { filter: grayscale(1) invert(1); opacity: 0.7; }
  :root:not([data-theme="dark"]) .pf-logo:hover .pf-logo__img { opacity: 1; }
}
:root[data-theme="light"] .pf-logo[data-ink="dark"] .pf-logo__img { filter: grayscale(1); opacity: 0.7; }
:root[data-theme="light"] .pf-logo[data-ink="light"] .pf-logo__img { filter: grayscale(1) invert(1); opacity: 0.7; }
:root[data-theme="light"] .pf-logo:hover .pf-logo__img { opacity: 1; }

/* award laurels are light grey on transparent: cinema.css .nh-logo inverts them for the light theme */
.pf-award__img.nh-logo { opacity: 0.8; }

@media (max-width: 520px) {
  .pf-awards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nh-space-6) var(--nh-space-4); }
  .pf-clients__head { justify-content: space-between; text-align: left; }
}

@media print {
  .pf-marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
  .pf-marquee__list--clone, .pf-clients__toggle { display: none; }
}

/* QA 2026-09-27: on a phone the 30ch stat line ran across the inner ring (the ring cut through "in the ... Commerce");
   keep the words inside the inner ring (~62 % of the viewport at 390 px). */
@media (max-width: 600px) {
  .pf-stat__text { max-width: min(30ch, 62vw); }
}