/* ==========================================================================
   LKP CONSTRUCTION | projects page additions
   Scoped to the projects page only. Loaded AFTER css/style.css.
   Everything here is prefixed .pj- or scoped under .gallery.pj-strip so it
   cannot leak into the shared design system.

   World is unchanged: asphalt-black + hi-vis amber, Clash / General Sans /
   JetBrains Mono, surveyor's setting-out motif carried through as station
   stamps (STA 01 / 07) and square peg ticks.
   ========================================================================== */

/* ---- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: calc(var(--z-nav) + 1);
  transform: translateY(-160%);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  background: var(--amber);
  color: var(--amber-ink);
  font-weight: 600;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ---- Page head additions -------------------------------------------------- */
.pj-head-datum { margin-top: 1.6rem; }

/* ---- Provenance panel ----------------------------------------------------- */
/* The honest frame for the whole page. Kept plain on purpose. */
.pj-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.15rem, 3.4vw, 1.9rem);
}
.pj-note h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  line-height: 1.4;
}
.pj-note ul {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.85rem;
}
.pj-note li {
  display: grid;
  grid-template-columns: 0.5rem 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pj-note li::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55rem;
  background: var(--amber);
}
.pj-note li b { color: var(--ink); font-weight: 600; }

/* ---- Crew index ----------------------------------------------------------- */
.pj-index {
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pj-index a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.pj-index a:hover { border-color: var(--amber); color: var(--ink); }
.pj-index a .n { color: var(--amber); font-weight: 500; }
.pj-index a .c {
  color: var(--muted);
  font-size: 0.7rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--line);
}

/* ---- Crew sections -------------------------------------------------------- */
.pj-crews { padding-top: 0; }
.pj-crew {
  position: relative;
  padding-block: clamp(2.8rem, 7vw, 5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: clamp(80px, 12vh, 108px);
}
.pj-crew:first-child { border-top: 0; padding-top: clamp(1.6rem, 4vw, 2.4rem); }

.pj-crew-head { max-width: 60rem; }
.pj-station {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.pj-station .peg {
  width: 8px;
  height: 8px;
  background: var(--amber);
  flex: none;
}
.pj-station .n { color: var(--amber); }
.pj-crew h2 { margin-top: 0.85rem; }
.pj-crew-lead {
  margin-top: 1rem;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.16rem);
}

/* his words, as a proper description list (not headings) */
.pj-spec {
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.pj-spec > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.pj-spec dt {
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  line-height: 1.5;
}
.pj-spec dd { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }
.pj-spec dd + dd { margin-top: 0.35rem; }
@media (min-width: 760px) {
  .pj-spec > div {
    grid-template-columns: 17rem 1fr;
    gap: 1.8rem;
    align-items: start;
    padding: 1.05rem 0;
  }
}

/* ---- Photo strip (masonry, full frames, captions always visible) ---------- */
/* .gallery keeps the existing lightbox hook in js/main.js; every rule below
   is doubled up on .pj-strip so it out-specifies the base .gallery grid. */
.gallery.pj-strip {
  display: block;
  columns: 2;
  column-gap: 0.7rem;
  margin-top: clamp(1.7rem, 4vw, 2.4rem);
}
.gallery.pj-strip figure {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 0.7rem;
  aspect-ratio: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  cursor: default;
  position: relative;
}
.gallery.pj-strip figure::after { content: none; }

.pj-shot-btn {
  display: block;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: zoom-in;
}
.gallery.pj-strip img {
  width: 100%;
  height: auto;
  filter: saturate(0.86) brightness(0.9);
  transition: transform .6s var(--ease-out), filter .4s ease;
}
.gallery.pj-strip figure:hover img { transform: none; filter: saturate(0.86) brightness(0.9); }
.gallery.pj-strip .pj-shot-btn:hover img,
.gallery.pj-strip .pj-shot-btn:focus-visible img {
  transform: scale(1.035);
  filter: saturate(1) brightness(1);
}
.pj-shot-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.pj-shot-zoom {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  color: var(--amber-ink);
  background: color-mix(in oklch, var(--amber) 88%, transparent);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.pj-shot-btn:hover .pj-shot-zoom,
.pj-shot-btn:focus-visible .pj-shot-zoom { opacity: 1; transform: translateY(0); }
.pj-shot-zoom svg { width: 15px; height: 15px; }
/* touch has no hover, so the tap affordance has to be permanently on */
@media (hover: none) {
  .pj-shot-zoom { opacity: 1; transform: none; }
}

.gallery.pj-strip figcaption {
  position: static;
  opacity: 1;
  transform: none;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.gallery.pj-strip figure:hover figcaption { opacity: 1; transform: none; }

@media (min-width: 720px) {
  .gallery.pj-strip { columns: 3; column-gap: 0.9rem; }
  .gallery.pj-strip figure { margin-bottom: 0.9rem; }
}
@media (min-width: 1180px) {
  .gallery.pj-strip { column-gap: 1rem; }
  .gallery.pj-strip figure { margin-bottom: 1rem; }
}

/* ---- Survey schematic (the one crew with no photograph) ------------------- */
.pj-survey {
  margin-top: clamp(1.8rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  padding: clamp(1rem, 3vw, 1.6rem);
}
.pj-survey svg { width: 100%; max-width: 720px; height: auto; display: block; margin-inline: auto; }
.pj-survey figcaption {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}
.pj-ground { fill: color-mix(in oklch, var(--bg-deep) 70%, transparent); }
.pj-hatch { stroke: var(--line); stroke-width: 1; }
.pj-surface { stroke: var(--amber); stroke-width: 1.5; }
.pj-setout { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 6; }
.pj-kit { fill: var(--amber); }
.pj-duct { stroke: var(--amber-bright); stroke-width: 2; fill: none; }
.pj-duct-core { fill: color-mix(in oklch, var(--amber) 28%, transparent); }
.pj-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  fill: var(--muted);
}
.pj-label--amber { fill: var(--amber); }
.pj-wave { fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0; }
.pj-wave-1 { animation: pjSweep 3.4s linear infinite; }
.pj-wave-2 { animation: pjSweep 3.4s linear infinite 1.13s; }
.pj-wave-3 { animation: pjSweep 3.4s linear infinite 2.26s; }
@keyframes pjSweep {
  0%   { r: 10px;  opacity: 0; }
  12%  { opacity: 0.75; }
  100% { r: 210px; opacity: 0; }
}

/* ---- Enquiry routes (his two, quotes and partnerships) -------------------- */
.pj-routes {
  margin-top: clamp(1.8rem, 4vw, 2.4rem);
  display: grid;
  gap: 0.7rem;
}
@media (min-width: 760px) { .pj-routes { grid-template-columns: 1fr 1fr; gap: 0.9rem; } }
.pj-route {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.2rem, 3vw, 1.7rem);
  display: block;
  transition: border-color .25s ease, background-color .25s ease, transform .35s var(--ease-out);
}
.pj-route:hover { border-color: var(--amber); background: var(--surface-2); }
.pj-route .k {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.pj-route h3 { margin-top: 0.7rem; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); }
.pj-route p { margin-top: 0.55rem; color: var(--ink-soft); font-size: 0.96rem; }
.pj-route .go {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--amber);
  font-size: 0.95rem;
}
.pj-route .go svg { width: 17px; height: 17px; transition: transform .3s var(--ease-out); }
.pj-route:hover .go svg { transform: translateX(4px); }

/* ---- Motion + narrow-screen safety --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pj-wave-1, .pj-wave-2, .pj-wave-3 { animation: none; opacity: 0.4; r: 62px; }
  .gallery.pj-strip img,
  .pj-shot-zoom,
  .pj-route,
  .pj-route .go svg { transition: none; }
  .gallery.pj-strip .pj-shot-btn:hover img,
  .gallery.pj-strip .pj-shot-btn:focus-visible img { transform: none; }
}

@media (max-width: 400px) {
  .pj-index a { font-size: 0.7rem; padding-inline: 0.85rem; }
  .gallery.pj-strip figcaption { font-size: 0.8rem; }
}


/* ==========================================================================
   VERIFIABLE CREDENTIALS LAYER
   Two blocks, both built so a buyer can leave this page having checked
   something rather than having admired something.
   1. .pj-check  sits directly under the hero datum bar. Each line is a claim
      plus the thing in the frame that proves it, and the link lands on that
      frame. Claims that are only on the published LKP service list are
      labelled that way, never dressed as photographed evidence.
   2. .pq        prequalification slots. Deliberately, visibly empty until
      Luke supplies the documents. No value here is ever invented.
   ========================================================================== */

/* ---- What you can check --------------------------------------------------- */
.pj-check {
  margin-top: clamp(1.7rem, 4.5vw, 2.6rem);
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.15rem, 3.4vw, 1.9rem);
}
.pj-check-head h2 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pj-check-head p {
  margin-top: 0.8rem;
  max-width: 68ch;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pj-check-list {
  margin-top: clamp(1.2rem, 3.2vw, 1.7rem);
  border-top: 1px solid var(--line);
}
.pj-check-list > li { border-bottom: 1px solid var(--line); }

.pj-check-row {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  grid-template-areas:
    "n     claim claim"
    "blank src   src"
    "blank tag   go";
  column-gap: 0.7rem;
  row-gap: 0.5rem;
  align-items: center;
  padding: 0.95rem 0.6rem 1rem;
  transition: background-color .22s ease, box-shadow .22s ease;
}
.pj-check-row:hover,
.pj-check-row:focus-visible {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--amber);
}
.pj-check-row:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.pj-check-row .n {
  grid-area: n;
  align-self: start;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--amber);
  padding-top: 0.12rem;
}
.pj-check-row .claim {
  grid-area: claim;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}
.pj-check-row .src {
  grid-area: src;
  font-family: var(--mono);
  font-size: 0.665rem;
  font-weight: 400;
  letter-spacing: 0.055em;
  line-height: 1.75;
  color: var(--muted);
  overflow-wrap: break-word;
}
.pj-check-row .src .tick { color: var(--amber); padding-inline: 0.12em; }

.pj-check-row .tag {
  grid-area: tag;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.635rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3rem 0.62rem;
  border-radius: 100px;
}
.pj-check-row .tag--frame { background: var(--amber); color: var(--amber-ink); }
.pj-check-row .tag--list {
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
}

.pj-check-row .go {
  grid-area: go;
  justify-self: end;
  display: inline-flex;
  color: var(--amber);
}
.pj-check-row .go svg {
  width: 17px;
  height: 17px;
  transition: transform .3s var(--ease-out);
}
.pj-check-row:hover .go svg,
.pj-check-row:focus-visible .go svg { transform: translateX(4px); }

.pj-check-foot {
  margin-top: 1.05rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}
.pj-check-foot a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 900px) {
  /* head reads as a drawing title block: name left, the note beside it */
  .pj-check-head {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    column-gap: clamp(2rem, 4vw, 3.4rem);
    align-items: start;
  }
  .pj-check-head p { margin-top: 0.2rem; max-width: 62ch; }

  .pj-check-row {
    grid-template-columns: 2.4rem minmax(0, 1.02fr) minmax(0, 1.12fr) 7.9rem 1.5rem;
    grid-template-areas: "n claim src tag go";
    column-gap: 1.3rem;
    row-gap: 0;
    padding: 1.05rem 0.7rem;
  }
  .pj-check-row .n { align-self: center; padding-top: 0; }
  .pj-check-row .tag { justify-self: start; }
}

/* the frame a line points at, marked when you land on it */
.gallery.pj-strip figure[id] { scroll-margin-top: clamp(92px, 15vh, 132px); }
.gallery.pj-strip figure[id]:target .pj-shot-btn {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}
.gallery.pj-strip figure[id]:target img { filter: saturate(1) brightness(1); }
.gallery.pj-strip figure[id]:target figcaption { color: var(--ink-soft); }

/* ---- Public record panel (Companies House extract) ------------------------ */
.pq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  padding: clamp(1.2rem, 3.6vw, 2.1rem);
}
.pq-head h2 { max-width: 20ch; }
.pq-lead {
  margin-top: 1.05rem;
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.08rem);
  line-height: 1.6;
}

.pq-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

.pq-card {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

/* --- masthead plate --- */
.pq-plate {
  position: relative;
  display: grid;
  gap: 0.5rem;
  grid-template-areas: "k" "name" "no" "status" "go";
  padding: clamp(1.15rem, 3.4vw, 1.7rem);
  background: linear-gradient(170deg, color-mix(in oklch, var(--amber) 6%, var(--bg-deep)), var(--bg-deep) 62%);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.pq-plate-k {
  grid-area: k;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--muted);
}
.pq-plate-name {
  grid-area: name;
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.15rem + 0.95vw, 1.95rem);
  font-weight: 600;
  line-height: 1.08;
  color: var(--ink);
}
.pq-plate-no {
  grid-area: no;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin-top: 0.35rem;
}
.pq-plate-no-k {
  font-family: var(--mono);
  font-size: 0.645rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pq-plate-no-v {
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 2.3vw, 3rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.pq-plate-status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pq-plate-status .peg {
  width: 8px; height: 8px;
  flex: none;
  background: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-glow);
}
.pq-plate-go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.665rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.pq-plate-go svg { width: 13px; height: 13px; flex: none; transition: transform 0.35s var(--ease-out); }
.pq-plate:hover .pq-plate-go { text-decoration: underline; text-underline-offset: 4px; }
.pq-plate:hover .pq-plate-go svg { transform: translate(2px, -2px); }
.pq-plate:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }

/* --- ledger --- */
.pq-ledger { margin: 0; }
.pq-row {
  display: grid;
  grid-template-areas: "k" "v" "s" "a";
  gap: 0.42rem;
  padding: 1.1rem clamp(1.05rem, 3.2vw, 1.7rem) 1.15rem;
  border-top: 1px solid var(--line);
  border-left: 2px solid transparent;
  min-width: 0;
}
.pq-row:first-child { border-top: 0; }
.pq-row:has(a:hover),
.pq-row:has(a:focus-visible) {
  border-left-color: var(--amber);
  background: color-mix(in oklch, var(--amber) 4%, transparent);
}
.pq-row dt {
  grid-area: k;
  font-family: var(--mono);
  font-size: 0.655rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--muted);
}
.pq-row dd { margin: 0; min-width: 0; }
.pq-v {
  grid-area: v;
  font-size: clamp(1.02rem, 0.98rem + 0.28vw, 1.16rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: break-word;
}
.pq-v-sub {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
}
.pq-s {
  grid-area: s;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: break-word;
}
.pq-a { grid-area: a; margin-top: 0.3rem; }
.pq-a a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid color-mix(in oklch, var(--amber) 40%, transparent);
  border-radius: 3px;
  background: color-mix(in oklch, var(--amber) 6%, transparent);
  font-family: var(--mono);
  font-size: 0.645rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--amber);
  text-decoration: none;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.pq-a a svg { width: 13px; height: 13px; flex: none; transition: transform 0.35s var(--ease-out); }
.pq-a a:hover {
  background: color-mix(in oklch, var(--amber) 13%, transparent);
  border-color: var(--amber);
}
.pq-a a:hover svg { transform: translate(2px, -2px); }
.pq-a a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* --- foot --- */
.pq-foot {
  margin-top: clamp(1.15rem, 3vw, 1.5rem);
  padding-top: clamp(1.05rem, 2.8vw, 1.35rem);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.9rem;
}
.pq-after {
  max-width: 62ch;
  font-size: clamp(0.95rem, 0.92rem + 0.16vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.pq-stamp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--muted);
}
.pq-stamp .peg { width: 7px; height: 7px; flex: none; background: var(--amber); }
.pq-stamp .tick { color: var(--amber); padding-inline: 0.12em; }

@media (min-width: 700px) {
  .pq-plate {
    grid-template-areas:
      "k     no"
      "name  no"
      "status go";
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
  .pq-plate-no { justify-self: end; align-self: center; margin-top: 0; text-align: right; }
  .pq-plate-go { justify-self: end; margin-top: 0.6rem; }
  .pq-plate-status { align-self: end; }

  .pq-row {
    grid-template-areas:
      "k v"
      "k s"
      "k a";
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    column-gap: clamp(1.2rem, 3vw, 2.2rem);
    align-items: start;
  }
  .pq-row dt { padding-top: 0.28rem; }
}
@media (min-width: 1000px) {
  .pq-row {
    grid-template-areas:
      "k v a"
      "k s a";
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 244px);
  }
  .pq-a { margin-top: 0; justify-self: end; align-self: start; }
  .pq-a a { width: 100%; }
  .pq-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(2rem, 4vw, 3.4rem);
  }
  .pq-stamp { justify-self: end; }
}
@media (min-width: 900px) {
  .pq-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 4vw, 3.4rem);
    align-items: start;
  }
  .pq-head h2 { max-width: none; }
  .pq-lead { margin-top: 0.3rem; max-width: 58ch; }
}

/* ---- Motion + narrow-screen safety for both blocks ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pj-check-row,
  .pj-check-row .go svg { transition: none; }
  .pj-check-row:hover .go svg,
  .pj-check-row:focus-visible .go svg { transform: none; }
  .pq-plate-go svg,
  .pq-a a,
  .pq-a a svg { transition: none; }
  .pq-plate:hover .pq-plate-go svg,
  .pq-a a:hover svg { transform: none; }
}

@media (max-width: 400px) {
  .pj-check { padding-inline: 0.95rem; }
  .pj-check-row { padding-inline: 0.15rem; column-gap: 0.55rem; }
  .pj-check-row .src { font-size: 0.635rem; letter-spacing: 0.04em; }
  .pj-check-row .claim { font-size: 0.94rem; }
  .pq-row { padding-inline: 0.95rem; }
  .pq-plate { padding-inline: 0.95rem; }
  .pq-a a { padding-inline: 0.7rem; letter-spacing: 0.06em; }
}


/* ==========================================================================
   THIRD-PARTY CHECKS BAND (.tp)
   The third proof band, sitting between "What you can check" and the
   Companies House panel. Same labelled-honesty machinery as .pj-check:
   every row names a credential a buyer needs, and carries an explicit
   state chip rather than a soft deferral sentence.

   STATES. Only .tp-state--none is in use, because LKP publishes none of
   these yet. When a real number is supplied:
     1. swap .tp-state--none for .tp-state--held and change the text to
        "Supplied" (or "Verified" once checked against the issuer),
     2. put the real value in .tp-blank .v and add .tp-blank--filled,
     3. update the .tp-meter and .tp-stamp counts.
   Never fill a row from inference. A blank row is worth more than a
   guessed one, which is the whole argument of this page.
   ========================================================================== */

.tp {
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  padding: clamp(1.2rem, 3.6vw, 2.1rem);
}

.tp-head h2 { max-width: 18ch; }
.tp-lead {
  margin-top: 1.05rem;
  max-width: 66ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.08rem);
  line-height: 1.6;
}

/* honest counter, same mono device as the hero datum bar */
.tp-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.15rem;
  margin-top: clamp(1.2rem, 3.2vw, 1.7rem);
  padding-bottom: clamp(1.05rem, 2.8vw, 1.4rem);
  border-bottom: 1px solid var(--line);
}
.tp-meter .datum {
  font-family: var(--mono);
  font-size: 0.665rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--muted);
}
.tp-meter .datum--amber { color: var(--amber); }

/* ---- rows ---- */
.tp-list { margin: 0; }

.tp-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "n     state"
    "name  name"
    "body  body";
  column-gap: 0.8rem;
  row-gap: 0.55rem;
  padding: clamp(1.15rem, 3.2vw, 1.5rem) 0 clamp(1.25rem, 3.4vw, 1.65rem);
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  min-width: 0;
  transition: background-color .22s ease, border-color .22s ease;
}
.tp-row:last-child { border-bottom: 0; }
.tp-row:hover {
  border-left-color: var(--amber);
  background: color-mix(in oklch, var(--amber) 3%, transparent);
}

.tp-n {
  grid-area: n;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.tp-state {
  grid-area: state;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.635rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3rem 0.62rem;
  border-radius: 100px;
}
.tp-state--none {
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
}
.tp-state--held { background: var(--amber); color: var(--amber-ink); }

.tp-name {
  grid-area: name;
  font-family: var(--display);
  font-size: clamp(1.12rem, 1.02rem + 0.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.tp-body { grid-area: body; min-width: 0; }

.tp-what {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 72ch;
}

.tp-ask {
  margin: 0.9rem 0 0;
  display: grid;
  gap: 0.6rem;
}
.tp-ask > div {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}
.tp-ask dt {
  font-family: var(--mono);
  font-size: 0.645rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--amber);
}
.tp-ask dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: break-word;
}

/* the visibly empty field. It is a form slot, never an ornament. */
.tp-blank {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  margin-top: 0.95rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed color-mix(in oklch, var(--muted) 45%, transparent);
  border-radius: 3px;
  background: color-mix(in oklch, var(--bg-deep) 55%, transparent);
}
.tp-blank .k {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--muted);
}
.tp-blank .v {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tp-blank--filled {
  border-style: solid;
  border-color: color-mix(in oklch, var(--amber) 40%, transparent);
}
.tp-blank--filled .v { color: var(--amber); }

.tp-src {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.645rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--muted);
  overflow-wrap: break-word;
}
.tp-src .tick { color: var(--amber); padding-inline: 0.12em; }

/* ---- foot ---- */
.tp-foot {
  margin-top: clamp(1.2rem, 3vw, 1.6rem);
  padding-top: clamp(1.1rem, 2.8vw, 1.4rem);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.1rem;
  align-items: start;
}
.tp-after {
  max-width: 64ch;
  font-size: clamp(0.95rem, 0.92rem + 0.16vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.tp-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.15rem;
  border: 1px solid color-mix(in oklch, var(--amber) 45%, transparent);
  border-radius: 3px;
  background: color-mix(in oklch, var(--amber) 7%, transparent);
  font-family: var(--mono);
  font-size: 0.665rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--amber);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.tp-cta svg { width: 15px; height: 15px; flex: none; transition: transform 0.35s var(--ease-out); }
.tp-cta:hover {
  background: color-mix(in oklch, var(--amber) 14%, transparent);
  border-color: var(--amber);
}
.tp-cta:hover svg { transform: translateX(4px); }
.tp-cta:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.tp-stamp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1rem, 2.6vw, 1.3rem);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--muted);
}
.tp-stamp .peg { width: 7px; height: 7px; flex: none; background: var(--amber); }
.tp-stamp .tick { color: var(--amber); padding-inline: 0.12em; }

@media (min-width: 700px) {
  .tp-row {
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    grid-template-areas:
      "n  name  state"
      ".  body  body";
    column-gap: 1.1rem;
    row-gap: 0.7rem;
  }
  .tp-n { align-self: start; padding-top: 0.3rem; }
  .tp-state { align-self: start; margin-top: 0.2rem; }

  .tp-ask > div {
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    gap: 0.14rem 1.1rem;
  }
  .tp-ask dt { padding-top: 0.16rem; }
}

@media (min-width: 900px) {
  .tp-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 4vw, 3.4rem);
    align-items: start;
  }
  .tp-head h2 { max-width: none; }
  .tp-lead { margin-top: 0.3rem; max-width: 60ch; }
}

@media (min-width: 1000px) {
  .tp-row {
    grid-template-columns: 2.6rem minmax(0, 15rem) minmax(0, 1fr) 9.2rem;
    grid-template-areas: "n name body state";
    column-gap: clamp(1.2rem, 2.6vw, 2rem);
  }
  .tp-name { align-self: start; padding-top: 0.05rem; }
  .tp-state { justify-self: end; align-self: start; margin-top: 0.3rem; }

  .tp-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 4vw, 3.4rem);
    align-items: center;
  }
  .tp-cta { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-row,
  .tp-cta,
  .tp-cta svg { transition: none; }
  .tp-cta:hover svg { transform: none; }
}

@media (max-width: 400px) {
  .tp { padding-inline: 0.95rem; }
  .tp-row { column-gap: 0.6rem; }
  .tp-src { font-size: 0.625rem; letter-spacing: 0.035em; }
  .tp-what { font-size: 0.92rem; }
  .tp-ask dd { font-size: 0.88rem; }
  .tp-blank { padding-inline: 0.6rem; }
  .tp-cta { padding-inline: 0.85rem; letter-spacing: 0.06em; }
}

/* Anchored proof panels clear the fixed header when you arrive from below,
   the same way the anchored figures above already do. Measured at 390px:
   without this the header (69px) clipped the top 20px of the .tp card and
   sat flush against its heading. */
#thirdparty,
#prequal { scroll-margin-top: clamp(60px, 9vh, 92px); }