/* ══ THE PIN ══════════════════════════════════════════════════  11 Sep 2026 ══
   Sir: "center the pin and make it navy."

   AND THE ANSWER WAS ALREADY IN THE BUILD, THIRTEEN TIMES. `404`, `about`,
   `complaints`, `how-it-works`, `inspect-release-homeowner`,
   `list-service-tradesperson`, `pay-norm`, `payment-protection`,
   `pricing-pros`, `pricing`, `quote`, `settings-homeowner` and
   `settings-tradesperson` each carry the same twenty-two pixel navy dome,
   centred on its board, with a specular highlight rotated -24deg. Byte for
   byte identical in all thirteen — checked before moving anything, because a
   set of copies that has already drifted is a merge and not an extraction.

   I drew a fourteenth one in pass S. That was the mistake Sir is correcting,
   and it is the one Mason writes down most often: a component defined twice
   will differ. Mine was 15px, cream, and pinned at the left margin, which is
   three disagreements with a component the site had already settled.

   SO THIS FILE IS THE ONE DEFINITION, lifted verbatim rather than re-derived,
   and the thirteen inline copies are replaced by a link to it. Nothing here is
   new and nothing here is improved: an extraction that also changes a value
   cannot prove it changed nothing.

   THE FIVE SCOPED COPIES STAY WHERE THEY ARE, for now. `my-jobs`,
   `dashboard-tradesperson`, `job-tradesperson`, `post-a-job` and `service`
   draw `.pjm-board .pin` at their own sizes for a modal that sits at a
   different scale. They are a deliberate variant rather than a duplicate, and
   folding them in is a pass about itself.
   ═══════════════════════════════════════════════════════════════════════════ */
.pin{position:absolute; z-index:4; top:22px; left:50%; margin-left:-11px;
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 33% 28%, #46536A 0 18%, var(--navy) 52%, #04090F 100%);
  box-shadow:0 1px 0 rgba(250,248,243,.22), 0 6px 9px -3px rgba(0,0,0,.66)}
.pin::after{content:''; position:absolute; left:4px; top:3.5px; width:6px; height:5px;
  border-radius:50%; background:rgba(250,248,243,.62); transform:rotate(-24deg)}

/* ── THE SHEET'S OWN MOTION ────────────────────────────────────────────────
   The board hangs its sheet at -1.4deg and straightens it on hover over
   340ms on the house's own curve. Neither number is on the ladder in
   `hyyryn-motion.css`, and they are not being moved onto it: 340 sits between
   the 240 rung and the 400 rung, and this component has behaved this way on
   thirteen pages since August. A settled component keeps its own motion, and
   the tokens exist so that the SHEET agrees with itself across pages rather
   than so that every component agrees with every other one.

   What does move is the curve, which had no name outside the pages that
   declared it. `--stone` is the house easing; it belongs beside the thing it
   eases. */
:root {
  --dur-sheet: 340ms;
  --ease-stone: cubic-bezier(.16, 1, .3, 1);
}