/* ══ THE JOB PAGE, BELOW THE PHOTOGRAPHS ════════════════════════  14 Oct 2026 (rp145), styled 15 Oct (rp147) ══
   rp145, Sir: "beneath the images ... improve it, revamp it." rp147, Sir, on the result: "quite basic. It should
   have a style theme ... where it requires an animation ... symbolism should be quality ... the positioning of
   certain sections should look much better. The price card ... could be glass ... certain sections to be
   interactive ... make it look and stand out. But remember, keep in the theme."

   THE THEME IS THE MONEY PAGES' OWN (payment-protection.html, rp116): cream paper for words, navy wherever money
   is, gold for money, the engraver's rosette under a statement. So:
     their words      a card on the paper, a gold quotation mark, who wrote it and the seal (fingerprint)
     what needs doing a bento of facts (Mason effects T1), each in the trade marks' ring; open ones ask
     the decision    a navy stage (the job's own photograph blurred, two slow discs of light, the rosette drawn
                     once) under a glass card (effects G4, G7, G9, G20, A36): the figure, the share, the working,
                     a price typed or dragged (T30), and the quote at that price
     after you quote the money's path, drawn once on navy, a coin carried to the trade (T19, T31)
     before you quote Find a trade's three doors, each with its mark
   Glass only where something is behind it (Mason 08, G9). One moving moment (the coin). Reduced motion,
   reduced transparency and forced colours each have their way out (G33, G34, M1). Tokens are the page's :root;
   colours with alpha are written as rgba() of those tokens' values. Loaded last, scoped to #jp, #jpFlow,
   .jp-three and the trail; since rp148 also #jpHero, the top beside the photographs (at the end). Research: mason/references/research-job-page-style-2026-10.md. */

/* ── the trail, on the photographs' left edge ── */
.breadcrumbs.jp-crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  max-width: none; margin: 0; padding: clamp(18px, 2vw, 26px) var(--pdp-gutter) 0;
  font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--muted);
}
.breadcrumbs.jp-crumbs a { color: var(--navy); text-decoration: none; }
.breadcrumbs.jp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs.jp-crumbs span { color: var(--muted); }

/* ── the motion ladder (M1) ── */
#jp, #jpFlow, .jp-three {
  --jp-fast: 160ms; --jp-base: 260ms; --jp-slow: 600ms;
  --jp-in: cubic-bezier(.16, .84, .44, 1); --jp-std: cubic-bezier(.4, 0, .2, 1);
  --jp-glass-f: blur(22px) saturate(1.35);
}

/* ── the grid: the job on the left, the decision on the right, held as he reads ── */
/* rp149, Sir: the What you keep card as wide as the quote card above; the script measures that card (--jp-aside-w) */
#jp.services-reviews {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--jp-aside-w, minmax(360px, 430px));
  gap: clamp(40px, 4.4vw, 80px); align-items: start;
  margin: clamp(26px, 3vw, 44px) 0 0; padding: 0;
}
#jp .sr-col { display: block; min-width: 0; margin: 0; padding: 0; }
#jp .jp-aside { position: sticky; top: 88px; }
#jp .jp-sec { margin: 0 0 clamp(48px, 4.6vw, 72px); padding: 0; border: 0; background: none; box-shadow: none; text-align: left; }
#jp .jp-main > .jp-sec:last-child { margin-bottom: 0; }

/* ── the rings: one family with the trade marks (rp144), gold hairline, a lit inside ── */
.jp-ring {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .95), rgba(250, 248, 243, .7));
  box-shadow: inset 0 0 0 1px rgba(131, 99, 44, .45), 0 0 0 5px rgba(212, 169, 67, .1), 0 10px 22px -16px rgba(10, 22, 40, .55);
  color: var(--navy);
}
.jp-ring svg, .jp-i, .jp-li-i, .jp-go {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.jp-ring--s { width: 42px; height: 42px; }
.jp-ring--s svg { width: 19px; height: 19px; }

/* ── the heads ── */
.jp-sh { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
#jp .jp-k, #jpFlow .jp-k, .jp-three .rz-k {
  margin: 0 0 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; line-height: 1.2;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-align: left;
}
#jp .jp-h, #jpFlow .jp-h {
  margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(27px, 2.5vw, 36px);
  line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--navy); text-align: left;
}
#jp .jp-h::before, #jp .jp-h::after { content: none; }

/* ══ THEIR WORDS: a card on the paper ══ */
#jp .jd-body {
  position: relative; margin: 0; padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 42px) clamp(24px, 2.6vw, 32px);
  border: 1px solid rgba(216, 207, 184, .9); border-radius: 22px; transform: none; text-align: left; max-width: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .68));
  box-shadow: 0 1px 2px rgba(10, 22, 40, .04), 0 24px 48px -30px rgba(10, 22, 40, .32);
}
#jp .jd-body[hidden] { display: none; }
#jp .jd-body::after { content: none; display: none; }
/* the quotation mark, a navy seal set into the card's top edge */
#jp .jd-body:not(.jd-body--none)::before {
  content: '\201C' / ""; position: absolute; left: clamp(22px, 2.6vw, 38px); top: -24px; display: block; text-align: center;
  width: 48px; height: 48px; padding: 9px 0 0; box-sizing: border-box; border-radius: 50%;
  font-family: var(--serif-display); font-size: 64px; line-height: 1; color: var(--gold-soft);
  background: var(--navy); box-shadow: 0 0 0 5px var(--cream), 0 10px 20px -10px rgba(10, 22, 40, .6);
  pointer-events: none; transform: none; overflow: hidden;
}
#jp .jd-body--none::before { content: none; display: none; }
#jp .jd-body:hover { transform: none; }
#jp .jd-quote { margin: 0; padding: 0; border: 0; text-align: left; max-width: 64ch; }
#jp .jd-quote p {
  margin: 0 0 14px; font-family: var(--serif); font-size: clamp(18.5px, 1.45vw, 21px); line-height: 1.64;
  color: var(--ink); text-align: left;
}
#jp .jd-quote p:last-child { margin-bottom: 0; }
#jp .jd-quote::before, #jp .jd-quote::after { content: none; }
#jp .jd-more {
  display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 0; border: 0; background: none;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--navy); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
#jp .jd-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
#jp .jd-more[hidden] { display: none; }

/* who wrote it, and the seal */
#jp .jp-who {
  display: flex; align-items: center; gap: 14px; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(216, 207, 184, .7);
}
#jp .jp-av {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--cream); font-family: var(--serif-display); font-size: 19px; line-height: 1;
  box-shadow: 0 0 0 3px rgba(212, 169, 67, .35);
}
#jp .jd-by {
  margin: 0; padding: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--muted); text-align: left; max-width: 62ch;
}
#jp .jd-by::before { content: none; display: none; }
#jp .jd-seal {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: rgba(15, 90, 79, .08); box-shadow: inset 0 0 0 1px rgba(15, 90, 79, .22);
  font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
@media (max-width: 760px) { #jp .jd-seal { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
#jp .jd-seal::before {
  content: ''; width: 13px; height: 13px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4'/%3E%3Cpath d='M14 13.12c0 2.38 0 6.38-1 8.88'/%3E%3Cpath d='M17.29 21.02c.12-.6.43-2.3.5-3.02'/%3E%3Cpath d='M2 12a10 10 0 0 1 18-6'/%3E%3Cpath d='M2 16h.01'/%3E%3Cpath d='M21.8 16c.2-2 .131-5.354 0-6'/%3E%3Cpath d='M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2'/%3E%3Cpath d='M8.65 22c.21-.66.45-1.32.57-2'/%3E%3Cpath d='M9 6.8a6 6 0 0 1 9 5.2v2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4'/%3E%3Cpath d='M14 13.12c0 2.38 0 6.38-1 8.88'/%3E%3Cpath d='M17.29 21.02c.12-.6.43-2.3.5-3.02'/%3E%3Cpath d='M2 12a10 10 0 0 1 18-6'/%3E%3Cpath d='M2 16h.01'/%3E%3Cpath d='M21.8 16c.2-2 .131-5.354 0-6'/%3E%3Cpath d='M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2'/%3E%3Cpath d='M8.65 22c.21-.66.45-1.32.57-2'/%3E%3Cpath d='M9 6.8a6 6 0 0 1 9 5.2v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
#jp .jd-seal:empty { display: none; }
#jp .jd-none { margin: 0; font-family: var(--serif); font-size: clamp(18.5px, 1.45vw, 21px); line-height: 1.6; color: var(--ink); }
#jp .jd-body--none .jd-by { margin-top: 12px; }

/* what their words cover: green is there, gold is a question waiting */
#jp .jp-cover-k {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 26px 0 12px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
#jp .jp-cover-k small { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
#jp .jd-cover { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
#jp .jd-cover li { margin: 0; padding: 0; border: 0; background: none; display: block; }
#jp .jd-cover li::before { content: none; }
#jp .jd-cover .jd-c--in, #jp .jd-c-ask {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin: 0; padding: 0 14px 0 11px; border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.2;
}
#jp .jd-cover .jd-c--in { color: var(--green); background: rgba(15, 90, 79, .07); box-shadow: inset 0 0 0 1px rgba(15, 90, 79, .24); }
#jp .jd-c-ask {
  color: var(--gold); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(131, 99, 44, .45); cursor: pointer;
  transition: background-color var(--jp-fast) var(--jp-std), box-shadow var(--jp-fast) var(--jp-std), transform var(--jp-fast) var(--jp-std);
}
#jp .jd-c-ask small {
  margin-left: 2px; padding-left: 9px; border-left: 1px solid rgba(131, 99, 44, .3);
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 760px) { #jp .jd-c-ask small { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
#jp .jd-c-ask:hover, #jp .jd-c-ask:focus-visible { background: rgba(212, 169, 67, .14); box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-1px); }
#jp .jd-c-ask:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
#jp .jd-cover svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the one action in the job column */
#jp .jd-ask {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 26px 0 0; padding: 0 20px 0 18px;
  border: 0; border-radius: 999px; background: var(--navy); color: var(--cream); box-shadow: 0 12px 24px -16px rgba(10, 22, 40, .8);
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transition: background-color var(--jp-fast) var(--jp-std), transform var(--jp-fast) var(--jp-std);
}
#jp .jd-ask em { font-style: normal; }
#jp .jd-ask .jp-i { width: 18px; height: 18px; color: var(--gold-soft); }
#jp .jd-ask .jp-go { width: 16px; height: 16px; transition: transform var(--jp-base) var(--jp-in); }
#jp .jd-ask:hover, #jp .jd-ask:focus-visible { background: rgb(20, 42, 81); transform: translateY(-1px); }
#jp .jd-ask:hover .jp-go, #jp .jd-ask:focus-visible .jp-go { transform: translateX(4px); }
#jp .jd-ask:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
#jp .jd-ask[hidden] { display: none; }

/* ══ WHAT NEEDS DOING: a bento of facts (T1) ══ */
#jp .js-lead { margin: 0 0 18px; max-width: 62ch; font-family: var(--serif); font-size: 16px; line-height: 1.62; color: var(--muted); }
#jp .jp-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
#jp .js-tally {
  margin: 0; padding: 0; border: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
#jp .js-tally b { font-weight: 600; color: var(--navy); }
#jp .js-tally i { font-style: normal; color: var(--gold); }
#jp .jp-meter { display: inline-flex; gap: 4px; }
#jp .jp-meter i { display: block; width: 26px; height: 6px; border-radius: 3px; background: rgba(131, 99, 44, .2); }
#jp .jp-meter i.on { background: var(--green); }
#jp .js-list {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
  margin: 0; padding: 0; max-width: none; border: 0; background: none; box-shadow: none;
}
#jp .js-list > div {
  position: relative; grid-column: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  column-gap: 14px; row-gap: 4px; align-items: start; margin: 0; padding: 18px 18px 16px; border-radius: 18px;
  border: 1px solid rgba(216, 207, 184, .9); background: rgba(255, 255, 255, .72);
  box-shadow: 0 1px 2px rgba(10, 22, 40, .04), 0 16px 32px -26px rgba(10, 22, 40, .35);
  transition: transform var(--jp-base) var(--jp-in), box-shadow var(--jp-base) var(--jp-in), border-color var(--jp-fast) var(--jp-std);
}
#jp .js-list > div:nth-child(-n+2) { grid-column: span 3; }
#jp .js-list > div::before, #jp .js-list dt::before, #jp .js-list dd::before { content: none; display: none; }
#jp .js-list > div > .jp-ring { grid-row: 1 / span 3; }
#jp .js-list dt {
  margin: 2px 0 0; padding: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); line-height: 1.35;
}
#jp .js-list dd { margin: 0; padding: 0; font-family: var(--serif); font-size: 18px; line-height: 1.3; color: var(--navy); text-align: left; }
#jp .js-list > .js-none { border-style: dashed; border-color: rgba(131, 99, 44, .5); background: rgba(250, 248, 243, .6); box-shadow: none; }
#jp .js-list > .js-none .jp-ring { color: var(--gold); }
#jp .js-list .js-none dd { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
#jp .jp-ask-f {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 6px; padding: 0 12px 0 9px;
  border-radius: 999px; color: var(--navy); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(10, 22, 40, .35);
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color var(--jp-fast) var(--jp-std), color var(--jp-fast) var(--jp-std);
}
#jp .jp-ask-f .jp-i { width: 15px; height: 15px; }
#jp .jp-ask-f:hover, #jp .jp-ask-f:focus-visible { background: var(--navy); color: var(--cream); }
#jp .jp-ask-f:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
#jp .js-list > div:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(10, 22, 40, .05), 0 22px 40px -26px rgba(10, 22, 40, .45); }

/* ══ THE DECISION: a navy stage, the glass card on it ══ */
#jp .jp-stage {
  position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(12px, 1vw, 16px); border-radius: 26px;
  background: radial-gradient(120% 90% at 100% 0%, rgb(20, 42, 81) 0%, var(--navy) 58%);
  box-shadow: 0 2px 4px rgba(10, 22, 40, .12), 0 40px 70px -40px rgba(10, 22, 40, .75), inset 0 0 0 1px rgba(250, 248, 243, .06);
}
#jp .jp-stage[hidden] { display: none; }
/* the gold seam along the top (the bar page's recipe) */
#jp .jp-stage::before {
  content: ''; position: absolute; z-index: 3; left: 28px; right: 28px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(212, 169, 67, 0), rgba(212, 169, 67, .85), rgba(212, 169, 67, 0));
}
/* two slow discs of light: something for the glass to show (G20), moved by transform only */
#jp .jp-stage::after {
  content: ''; position: absolute; z-index: -1; inset: -20%; pointer-events: none;
  background:
    radial-gradient(closest-side at 78% 22%, rgba(212, 169, 67, .42), rgba(212, 169, 67, 0) 70%),
    radial-gradient(closest-side at 18% 82%, rgba(15, 90, 79, .55), rgba(15, 90, 79, 0) 72%);
  animation: jp-drift 22s ease-in-out infinite alternate;
}
@keyframes jp-drift { to { transform: translate(-6%, 5%) scale(1.06); } }
/* the rosette, drawn once (A36) */
#jp .jp-rosette {
  position: absolute; z-index: -1; right: -90px; top: -60px; width: 420px; height: 420px; pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent);
}
#jp .jp-rosette path { fill: none; stroke: var(--gold-soft); stroke-width: .7; opacity: .34; }
#jp .jp-rosette.is-drawing path { animation: jp-draw 3s cubic-bezier(.45, 0, .2, 1) backwards; }
@keyframes jp-draw { from { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); } to { stroke-dasharray: var(--len); stroke-dashoffset: 0; } }

/* the glass (G4, G7): a lit top edge, a dark foot, a hairline ring, the blur */
#jp .jp-keep {
  position: relative; margin: 0; padding: clamp(20px, 1.8vw, 26px); border-radius: 20px; transform: none; rotate: none;
  color: var(--cream); background: linear-gradient(160deg, rgba(250, 248, 243, .15), rgba(250, 248, 243, .04) 55%, rgba(250, 248, 243, .08)), rgba(10, 22, 40, .28);
  -webkit-backdrop-filter: var(--jp-glass-f); backdrop-filter: var(--jp-glass-f);
  border: 1px solid rgba(250, 248, 243, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 30px 60px -30px rgba(0, 0, 0, .65);
}
#jp .jp-keep::before, #jp .jp-keep::after { content: none; display: none; }
#jp .jp-keep-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
/* on the glass the gold is lit a step (measured over the brightest the stage can be) */
#jp .jp-keep .jp-k { margin: 0; color: rgb(232, 196, 112); }
#jp .jp-held {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 11px 5px 9px; border-radius: 999px;
  background: rgba(250, 248, 243, .08); box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .18);
  font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 248, 243, .86);
}
@media (max-width: 760px) { #jp .jp-held { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
#jp .jp-held .jp-i { width: 13px; height: 13px; color: var(--gold-soft); stroke-width: 2; }
#jp .js-fee-body, #jp .js-fee-head { display: block; margin: 0; padding: 0; }
#jp .js-net { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; text-align: left; }
#jp .js-net b {
  position: relative; font-family: var(--serif-display); font-weight: 400; font-size: clamp(52px, 4.4vw, 66px); line-height: .95;
  letter-spacing: -.01em; color: var(--cream); font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
#jp .js-net b i { font-style: normal; font-size: .55em; margin-left: 2px; }
#jp .js-net span {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250, 248, 243, .78); line-height: 1.45;
}
/* a figure that changes says so: a brief warm light behind it (T30's settle), never a count */
#jp .js-net::before {
  content: ''; position: absolute; left: -16px; top: -12px; width: 70%; height: 90px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(212, 169, 67, .45), rgba(212, 169, 67, 0));
}
#jp .js-net.is-new::before { animation: jp-settle 700ms var(--jp-std); }
@keyframes jp-settle { from { opacity: 1; } to { opacity: 0; } }

/* the share, drawn at its true width: his in gold, Hyyryn's at the end */
#jp .js-pie {
  position: relative; display: block; flex: none; width: auto; min-width: 0; height: 10px; aspect-ratio: auto;
  margin: 22px 0 34px; padding: 0; border-radius: 999px; background: none; box-shadow: none;
  overflow: visible; transform: none; text-align: left; place-items: normal;
}
#jp .js-pie::before {
  content: ''; position: absolute; inset: 0; display: block; border-radius: 999px;
  background: linear-gradient(90deg, rgb(181, 139, 52), var(--gold-soft) 70%, rgb(232, 196, 112));
  box-shadow: 0 0 18px rgba(212, 169, 67, .35);
}
#jp .js-pie::after {
  content: 'Yours' / ""; position: absolute; left: 0; top: 18px; display: block; width: auto; height: auto; background: none; box-shadow: none;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--gold-soft); line-height: 1;
}
#jp .js-pie-d {
  position: absolute; inset: 0 0 0 auto; display: block; width: calc(var(--fee, 5) * 1%); min-width: 6px; height: auto;
  aspect-ratio: auto; grid-area: auto; border-radius: 0 999px 999px 0; transform: none;
  background: rgb(220, 224, 232) !important; -webkit-mask: none !important; mask: none !important;
  box-shadow: -2px 0 0 0 var(--navy); transition: width var(--jp-slow) var(--jp-in);
}
#jp .js-pie-d::before, #jp .js-pie-d::after { content: none; display: none; }
#jp .js-pie-m { display: none; }
#jp .js-pie-k {
  position: absolute; left: auto; right: 0; top: 18px; bottom: auto; grid-area: auto;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none;
  color: rgba(250, 248, 243, .78); white-space: nowrap;
}
@media (max-width: 760px) { #jp .js-pie-k { font-size: 12px; } }  /* rp200 phone floor, was 11.5px */
#jp .js-pie-k b { font-size: 11.5px; letter-spacing: 0; font-weight: 600; color: var(--cream); }
@media (max-width: 760px) { #jp .js-pie-k b { font-size: 12px; } }  /* rp200 phone floor, was 11.5px */

/* the working */
#jp .js-fee-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(250, 248, 243, .14); }
#jp .js-fee-l li {
  display: grid; grid-template-columns: 18px 84px minmax(0, 1fr); gap: 12px; align-items: center;
  margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(250, 248, 243, .14);
}
#jp .js-fee-l li::before { content: none; }
#jp .js-fee-l .jp-li-i { width: 17px; height: 17px; color: var(--gold-soft); }
#jp .js-fee-l b { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.2; color: var(--cream); font-variant-numeric: tabular-nums; }
#jp .js-fee-out b { color: rgba(250, 248, 243, .8); }
#jp .js-fee-l span { font-family: var(--sans); font-size: 13px; line-height: 1.45; color: rgba(250, 248, 243, .76); }
/* the stand-in's rows carry no icon */
#jp .js-fee-l li > b:first-child { grid-column: 2; }

/* try your own price (T30): type or drag */
#jp .jp-try { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; margin: 20px 0 0; }
#jp .jp-try[hidden] { display: none; }
#jp .jp-try label {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cream);
}
#jp .jp-try label .jp-i { width: 16px; height: 16px; color: var(--gold-soft); }
#jp .jp-try-f {
  display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0 14px; border-radius: 14px;
  background: rgba(250, 248, 243, .08); box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .26);
  font-family: var(--serif); font-size: 20px; color: var(--cream);
  transition: box-shadow var(--jp-fast) var(--jp-std), background-color var(--jp-fast) var(--jp-std);
}
#jp .jp-try-f:focus-within { background: rgba(250, 248, 243, .13); box-shadow: inset 0 0 0 1px var(--gold-soft), 0 0 0 4px rgba(212, 169, 67, .18); }
#jp .jp-try-f input, #jp .jp-try-f input:focus, #jp .jp-try-f input:focus-visible {
  -webkit-appearance: none; appearance: none; width: 6.5ch; min-width: 0; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; outline: 0; background: none; box-shadow: none;
  font: inherit; color: inherit; text-align: right; font-variant-numeric: tabular-nums;
}
#jp .jp-try-f input::placeholder { color: rgba(250, 248, 243, .5); }
#jp .jp-try-f input[aria-invalid="true"] { color: var(--gold-soft); }
#jp .jp-try-r {
  grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; padding: 0; background: none; cursor: pointer;
  --pct: 0%;
}
#jp .jp-try-r::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-soft) var(--pct), rgba(250, 248, 243, .18) var(--pct));
}
#jp .jp-try-r::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(250, 248, 243, .18); }
#jp .jp-try-r::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--gold-soft); }
#jp .jp-try-r::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 35% 30%, rgb(255, 250, 235), var(--gold-soft) 60%);
  box-shadow: 0 0 0 4px rgba(212, 169, 67, .25), 0 4px 10px rgba(0, 0, 0, .45);
  transition: box-shadow var(--jp-fast) var(--jp-std);
}
#jp .jp-try-r::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--gold-soft);
  box-shadow: 0 0 0 4px rgba(212, 169, 67, .25), 0 4px 10px rgba(0, 0, 0, .45);
}
#jp .jp-try-r:focus-visible { outline: 0; }
#jp .jp-try-r:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--cream), 0 4px 10px rgba(0, 0, 0, .45); }
#jp .jp-try-r:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--cream), 0 4px 10px rgba(0, 0, 0, .45); }
#jp .jp-try-h { grid-column: 1 / -1; margin: -4px 0 0; font-family: var(--sans); font-size: 12px; line-height: 1.45; color: rgba(250, 248, 243, .72); }
#jp .jp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the quote, at this price */
#jp .jp-cta {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 4px 0 0; padding: 0 22px;
  border: 0; border-radius: 999px; cursor: pointer; color: var(--navy);
  background: linear-gradient(180deg, rgb(232, 196, 112), var(--gold-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 28px -14px rgba(212, 169, 67, .7);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: transform var(--jp-fast) var(--jp-std), box-shadow var(--jp-fast) var(--jp-std);
}
#jp .jp-cta[hidden] { display: none; }
#jp .jp-cta .jp-i { width: 17px; height: 17px; stroke-width: 2; }
#jp .jp-cta .jp-go { width: 16px; height: 16px; stroke-width: 2; transition: transform var(--jp-base) var(--jp-in); }
#jp .jp-cta:hover, #jp .jp-cta:focus-visible { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 34px -14px rgba(212, 169, 67, .85); }
#jp .jp-cta:hover .jp-go, #jp .jp-cta:focus-visible .jp-go { transform: translateX(4px); }
#jp .jp-cta:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
#jp .js-fee-p { margin: 18px 0 0; font-family: var(--serif); font-size: 14px; line-height: 1.6; color: rgba(250, 248, 243, .8); }
#jp .js-fee-p a { color: rgb(232, 196, 112); text-decoration: underline; text-underline-offset: 3px; border: 0; }
#jp .js-fee-p a:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* ══ WHERE THE MONEY GOES: a navy band, the path drawn once (T19, T31) ══ */
#jpFlow.jp-flow {
  position: relative; isolation: isolate; overflow: hidden; margin: clamp(56px, 6vw, 96px) 0 0; padding: clamp(30px, 3.6vw, 52px) clamp(22px, 3.6vw, 56px);
  border-radius: 28px; color: var(--cream);
  background: radial-gradient(90% 120% at 0% 0%, rgb(20, 42, 81), var(--navy) 60%);
  box-shadow: 0 2px 4px rgba(10, 22, 40, .12), 0 40px 80px -50px rgba(10, 22, 40, .8);
}
/* a faint drafting ground (T13), faded to the edges */
#jpFlow.jp-flow::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(250, 248, 243, .12) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask: radial-gradient(80% 90% at 50% 40%, #000, transparent); mask: radial-gradient(80% 90% at 50% 40%, #000, transparent);
}
#jpFlow.jp-flow::after {
  content: ''; position: absolute; z-index: 2; left: 40px; right: 40px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(212, 169, 67, 0), rgba(212, 169, 67, .85), rgba(212, 169, 67, 0));
}
#jpFlow .jp-sh { margin-bottom: clamp(26px, 3vw, 40px); }
#jpFlow .jp-ring { background: rgba(250, 248, 243, .08); color: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(212, 169, 67, .55), 0 0 0 5px rgba(212, 169, 67, .08); }
#jpFlow .jp-k { color: var(--gold-soft); }
#jpFlow .jp-h { color: var(--cream); }
#jpFlow .jp-flow-run { position: relative; }
#jpFlow .jp-flow-line { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
#jpFlow .jp-fl-base { fill: none; stroke: rgba(250, 248, 243, .18); stroke-width: 1.5; stroke-dasharray: 4 6; }
#jpFlow .jp-fl-gold { fill: none; stroke: var(--gold-soft); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(212, 169, 67, .55)); }
#jpFlow.jp-wait .jp-fl-gold { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
#jpFlow.jp-wait.is-in .jp-fl-gold { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.65, 0, .35, 1) .2s; }
#jpFlow .jp-coin {
  position: absolute; left: 0; top: 0; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255, 246, 220), var(--gold-soft) 55%, rgb(150, 112, 40));
  box-shadow: 0 0 0 3px rgba(212, 169, 67, .28), 0 0 20px rgba(212, 169, 67, .7);
  font-family: var(--serif-display); font-size: 14px; line-height: 1; color: var(--navy); pointer-events: none; opacity: 0;
}
#jpFlow.is-drawing .jp-coin { opacity: 1; }
/* arrived: the coin goes into the last station, which lights */
#jpFlow.is-paid .jp-coin { opacity: 0; transition: opacity 500ms var(--jp-std); }
#jpFlow .jp-flow-list {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px);
  margin: 0; padding: 0; list-style: none; counter-reset: none;
}
#jpFlow .jp-st { position: relative; display: block; margin: 0; padding: 0; text-align: left; }
#jpFlow .jp-st-d {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin: 0 0 18px;
  background: radial-gradient(120% 120% at 30% 20%, rgb(44, 60, 88), rgb(18, 32, 56));
  box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .22), inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 7px var(--navy), 0 14px 26px -12px rgba(0, 0, 0, .6);
  color: var(--cream); transition: transform var(--jp-base) var(--jp-in), box-shadow var(--jp-base) var(--jp-in), color var(--jp-base) var(--jp-std);
}
#jpFlow .jp-st-d svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#jpFlow .jp-st-n {
  position: absolute; left: 46px; top: -4px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--cream); color: var(--navy); font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
#jpFlow .jp-st b { display: block; font-family: var(--serif-display); font-weight: 400; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.2; color: var(--cream); }
#jpFlow .jp-st > span:last-child { display: block; margin-top: 8px; max-width: 34ch; font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: rgba(250, 248, 243, .74); }
#jpFlow .jp-st--now .jp-st-d { color: var(--navy); background: radial-gradient(circle at 35% 30%, rgb(255, 246, 220), var(--gold-soft) 65%); }
#jpFlow .jp-st--held .jp-st-d { color: var(--gold-soft); }
#jpFlow.is-paid .jp-st--paid .jp-st-d {
  color: var(--navy); background: radial-gradient(circle at 35% 30%, rgb(255, 246, 220), var(--gold-soft) 65%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 7px var(--navy), 0 0 34px rgba(212, 169, 67, .55);
}
#jpFlow .jp-st:hover .jp-st-d { transform: translateY(-3px); }
#jpFlow .jp-next-f {
  position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 10px; margin: clamp(28px, 3vw, 40px) 0 0; padding: 16px 0 0;
  border-top: 1px solid rgba(250, 248, 243, .14); font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: rgba(250, 248, 243, .82);
}
#jpFlow .jp-next-f .jp-i { width: 18px; height: 18px; color: var(--gold-soft); margin-top: 1px; }

/* ══ THREE THINGS WORTH A MINUTE: Find a trade's band (results, rp119), each door with its mark ══ */
.jp-three.rz-before { margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(28px, 3vw, 40px); border-top: 2px solid var(--navy); }
.jp-three .rz-before-h { margin-bottom: clamp(22px, 2.6vw, 34px); }
.jp-three .rz-k { margin: 0; letter-spacing: .2em; }
.jp-three .rz-before-h h2 { margin: 10px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; color: var(--navy); letter-spacing: 0; text-transform: none; }
.jp-three .rz-doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.jp-three .rz-doors li + li { border-left: 1px solid var(--line-2); }
.jp-three .rz-door {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; height: 100%;
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2.2vw, 30px); text-decoration: none; color: inherit;
  transition: background-color 220ms ease;
}
.jp-three .rz-door:hover, .jp-three .rz-door:focus-visible { background: var(--cream-2); }
.jp-three .rz-door:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.jp-three .jp-door-i { position: absolute; right: clamp(18px, 2.2vw, 30px); top: clamp(20px, 2.2vw, 30px); transition: transform 260ms cubic-bezier(.16, .84, .44, 1), box-shadow 260ms ease; }
.jp-three .rz-door:hover .jp-door-i, .jp-three .rz-door:focus-visible .jp-door-i { transform: translateY(-3px) rotate(-4deg); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 6px rgba(212, 169, 67, .16), 0 14px 26px -14px rgba(10, 22, 40, .55); }
.jp-three .rz-n { font-family: var(--serif-display); font-size: 30px; line-height: 1; color: var(--gold); }
.jp-three .rz-t { padding-right: 56px; font-family: var(--serif-display); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; color: var(--navy); }
.jp-three .rz-d { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.jp-three .rz-go {
  justify-self: start; margin-top: 6px; padding-bottom: 3px; border-bottom: 1px solid currentColor;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
}
.jp-three .rz-go::after { content: '\2192' / ""; display: inline-block; margin-left: 8px; transition: transform 220ms ease; }
.jp-three .rz-door:hover .rz-go::after, .jp-three .rz-door:focus-visible .rz-go::after { transform: translateX(3px); }

/* ══ ARRIVALS (M5): only what the script armed waits, and only until it is reached ══ */
.jp-wait.js-list > *, .jp-wait.jd-cover > *, .jp-wait.rz-doors > * { opacity: 0; transform: translateY(14px); }
.jp-wait.is-in.js-list > *, .jp-wait.is-in.jd-cover > *, .jp-wait.is-in.rz-doors > * {
  opacity: 1; transform: none;
  transition: opacity 560ms var(--jp-in), transform 560ms var(--jp-in); transition-delay: calc(var(--i, 0) * 70ms);
}
#jpFlow.jp-wait .jp-st { opacity: 0; transform: translateY(14px); }
#jpFlow.jp-wait.is-in .jp-st { opacity: 1; transform: none; transition: opacity 600ms var(--jp-in), transform 600ms var(--jp-in); }
#jpFlow.jp-wait.is-in .jp-st:nth-child(2) { transition-delay: .5s; }
#jpFlow.jp-wait.is-in .jp-st:nth-child(3) { transition-delay: 1s; }
#jpFlow.jp-wait.is-in .jp-st:nth-child(4) { transition-delay: 1.5s; }

/* ── no job: the page's own rule (html.hy-nojob, rp75) at this sheet's weight ── */
html.hy-nojob #jp { display: none; }

/* ══ narrower ══ */
@media (max-width: 1180px) {
  #jp.services-reviews { grid-template-columns: minmax(0, 1fr) var(--jp-aside-w, minmax(330px, 380px)); gap: 40px; }
  #jp .js-list > div, #jp .js-list > div:nth-child(-n+2) { grid-column: span 3; }
  #jp .js-list > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  #jp.services-reviews { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  #jp .jp-aside { position: static; max-width: 560px; }
  #jpFlow .jp-flow-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 34px; }
  .jp-three .rz-doors { grid-template-columns: minmax(0, 1fr); }
  .jp-three .rz-doors li + li { border-left: 0; border-top: 1px solid var(--line-2); }
}
@media (max-width: 640px) {
  .jp-sh { gap: 12px; }
  .jp-ring { width: 42px; height: 42px; }
  #jp .jp-h, #jpFlow .jp-h { font-size: 26px; }
  #jp .jd-body:not(.jd-body--none)::before { width: 42px; height: 42px; font-size: 56px; padding-top: 8px; top: -21px; }
  #jp .js-list { grid-template-columns: minmax(0, 1fr); }
  #jp .js-list > div, #jp .js-list > div:nth-child(-n+2), #jp .js-list > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #jp .jp-aside { max-width: none; }
  #jp .jp-rosette { right: -150px; }
  /* the path runs down the left */
  #jpFlow .jp-flow-list { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  #jpFlow .jp-st { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; }
  #jpFlow .jp-st-d { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; }
  #jpFlow .jp-st-d svg { width: 22px; height: 22px; }
  #jpFlow .jp-st-n { left: 36px; top: -6px; }
  #jpFlow .jp-st > span:last-child { margin-top: 4px; }
}

/* ══ the ways out ══ */
@media (prefers-reduced-motion: reduce) {
  #jp .jp-stage::after { animation: none; }
  #jp .jd-ask, #jp .jd-c-ask, #jp .js-list > div, #jp .jp-cta, #jp .jp-ask-f, #jp .js-pie-d, #jpFlow .jp-st-d, .jp-three .rz-door, .jp-three .jp-door-i, .jp-three .rz-go::after { transition: none; }
  #jp .js-list > div:hover, #jp .jd-c-ask:hover, #jp .jd-ask:hover, #jp .jp-cta:hover, #jpFlow .jp-st:hover .jp-st-d, .jp-three .rz-door:hover .jp-door-i { transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  #jp .jp-keep { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(24, 40, 66); }
}
@media (forced-colors: active) {
  #jp .jp-stage, #jpFlow.jp-flow, #jp .jp-keep, #jp .jd-body, #jp .js-list > div { border: 1px solid CanvasText; }
  #jp .jp-stage::after, #jp .jp-rosette, #jpFlow.jp-flow::before, #jpFlow .jp-coin { display: none; }
  #jp .js-pie, #jp .js-pie-d { forced-color-adjust: none; }
}


/* ══ THE TOP OF THE JOB, BESIDE THE PHOTOGRAPHS ═══════════════════════════════════  15 Oct 2026 (rp148) ══
   Sir: "the bath mixer tap leak in that section, where you get ... submit quotes, and it gives the location and
   ... the submit a quote button. I'd like you to improve that section." The photographs stay.
   The panel already frosts the lead photograph that runs under it (the page's own glass, 8 Sep), so the card is
   navy glass over that: the same family as What you keep below. Above the title, the trade's mark, where the job
   stands and Save; the title in the display face, left; who, where and when as marks; the facts as tiles; the
   budget said once, on the card. Every hook hyyryn-jobquote.js writes keeps its element and its words. */
#jpHero { --jp-fast: 160ms; --jp-base: 260ms; --jp-in: cubic-bezier(.16, .84, .44, 1); --jp-std: cubic-bezier(.4, 0, .2, 1);
  justify-content: center; gap: 16px; text-align: left; }
#jpHero .tradehead { display: none; }

/* where the job stands, its trade, and Save */
#jpHero .jp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
#jpHero .jp-trade {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 13px 3px 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(216, 207, 184, .95);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--navy); text-decoration: none;
  transition: box-shadow var(--jp-fast) var(--jp-std), transform var(--jp-fast) var(--jp-std);
}
#jpHero .jp-trade:hover, #jpHero .jp-trade:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-1px); }
#jpHero .jp-trade:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
#jpHero .jp-ring--xs { width: 28px; height: 28px; box-shadow: inset 0 0 0 1px rgba(131, 99, 44, .45); }
#jpHero .jp-ring--xs svg { width: 15px; height: 15px; }
#jpHero .jp-status {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 13px 0 11px; border-radius: 999px;
  background: rgba(15, 90, 79, .08); box-shadow: inset 0 0 0 1px rgba(15, 90, 79, .24);
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
#jpHero .jp-status[hidden] { display: none; }
#jpHero .jp-status i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
#jpHero .jp-status[data-state="open"] i::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(15, 90, 79, .35);
  animation: jp-pulse 2.4s var(--jp-std) infinite;
}
@keyframes jp-pulse { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
#jpHero .jp-status[data-state="closed"] { background: rgba(131, 99, 44, .08); box-shadow: inset 0 0 0 1px rgba(131, 99, 44, .3); color: var(--gold); }
#jpHero .jp-status[data-state="closed"] i { background: var(--gold); }
#jpHero .jp-save {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px 0 11px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(10, 22, 40, .3); cursor: pointer;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
  transition: background-color var(--jp-fast) var(--jp-std), color var(--jp-fast) var(--jp-std), transform var(--jp-fast) var(--jp-std);
}
#jpHero .jp-save[hidden] { display: none; }
#jpHero .jp-save svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--jp-base) var(--jp-in); }
#jpHero .jp-save:hover, #jpHero .jp-save:focus-visible { background: rgba(10, 22, 40, .06); transform: translateY(-1px); }
#jpHero .jp-save:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
#jpHero .jp-save[aria-pressed="true"] { background: var(--navy); color: var(--cream); box-shadow: none; }
#jpHero .jp-save[aria-pressed="true"] svg { fill: var(--gold-soft); stroke: var(--gold-soft); transform: scale(1.08); }
#jpHero .jp-save[disabled] { opacity: .7; cursor: progress; }

/* the title, and who, where and when */
#jpHero .listing-header { margin: 0; padding: 0; text-align: left; border: 0; background: none; }
#jpHero .listing-title {
  margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(30px, 2.6vw, 42px); line-height: 1.08;
  letter-spacing: 0; text-transform: none; color: var(--navy); text-align: left;
}
#jpHero .listing-title em { font-style: normal; color: var(--navy); }
#jpHero .listing-by { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#jpHero .jp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 12px 0 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
#jpHero .jp-meta span { display: inline-flex; align-items: center; gap: 7px; }
#jpHero .jp-meta svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#jpHero .jp-meta b { font-weight: 600; color: var(--navy); }

/* the facts, as tiles; the budget is said once, on the card */
#jpHero .trustband { margin: 0; padding: 0; border: 0; }
#jpHero .creds, #jpHero .creds-by { display: none; }
#jpHero .tradefacts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; background: none;
}
#jpHero .tradefacts .tf {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin: 0; padding: 12px 13px 11px; border: 0; border-radius: 14px; text-align: left; min-width: 0;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(216, 207, 184, .95), 0 10px 22px -20px rgba(10, 22, 40, .5);
}
#jpHero .tradefacts .tf[data-k="budget"] { display: none; }
#jpHero .tradefacts .tf::before, #jpHero .tradefacts .tf::after { content: none; display: none; }
#jpHero .jp-tf-i { margin: 0 0 4px; width: 19px; height: 19px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#jpHero .tradefacts .tf b {
  display: block; margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: 20px; line-height: 1.1; color: var(--navy); text-align: left;
  overflow-wrap: anywhere;
}
#jpHero .tradefacts .tf b small { font-size: 13px; }
#jpHero .tradefacts .tf span {
  display: block; margin: 0; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-align: left; line-height: 1.3; overflow-wrap: anywhere;
}

/* the card: navy glass over the frosted photograph, a gold seam, a slow light */
#jpHero .listing-sidebar > .ls-stack { gap: 0; }
#jpHero .board {
  position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: 0; border-radius: 24px;
  /* the colour itself carries the navy (a gradient alone reads as no ground to a contrast check), the light on it */
  background-color: rgba(10, 22, 40, .9); background-image: radial-gradient(120% 90% at 100% 0%, rgba(20, 42, 81, .7), rgba(20, 42, 81, 0) 62%);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(250, 248, 243, .08), 0 34px 60px -34px rgba(10, 22, 40, .8);
}
#jpHero .board .slip, #jpHero .board .pin { display: none; }
#jpHero .board::before {
  content: ''; position: absolute; z-index: 3; left: 28px; right: 28px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(212, 169, 67, 0), rgba(212, 169, 67, .9), rgba(212, 169, 67, 0));
}
#jpHero .jp-board-ph {
  position: absolute; z-index: -1; inset: -30%; pointer-events: none;
  background:
    radial-gradient(closest-side at 82% 18%, rgba(212, 169, 67, .3), rgba(212, 169, 67, 0) 70%),
    radial-gradient(closest-side at 12% 92%, rgba(15, 90, 79, .45), rgba(15, 90, 79, 0) 72%);
  animation: jp-drift 24s ease-in-out infinite alternate;
}
#jpHero .board .sheet {
  position: relative; z-index: 1; width: auto; margin: 0; padding: clamp(20px, 1.8vw, 26px) clamp(20px, 1.8vw, 26px) 6px; border-radius: 0;
  background: none; box-shadow: none; rotate: none; transform: none; color: var(--cream);
}
#jpHero .board .sheet::after, #jpHero .board .sheet::before { content: none; display: none; }
#jpHero .jp-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
#jpHero .jp-free {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px;
  background: rgba(250, 248, 243, .08); box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .18);
  font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 248, 243, .9);
}
@media (max-width: 760px) { #jpHero .jp-free { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
#jpHero .jp-free[hidden] { display: none; }
#jpHero .jp-free svg { width: 13px; height: 13px; fill: none; stroke: rgb(232, 196, 112); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#jpHero .jp-qn { margin-left: auto; font-family: var(--sans); font-size: 12px; font-weight: 500; color: rgba(250, 248, 243, .8); text-align: right; }
#jpHero .jp-qn:empty { display: none; }
#jpHero .sheet-fig { margin: 0 0 14px; padding: 0 0 14px; border: 0; border-bottom: 1px solid rgba(250, 248, 243, .14); }
#jpHero .sheet-fig[hidden] { display: none; }
#jpHero .sheet-fig b {
  display: block; font-family: var(--serif-display); font-weight: 400; font-size: clamp(36px, 3vw, 46px); line-height: 1; letter-spacing: -.01em;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
#jpHero .sheet-fig span {
  display: block; margin-top: 8px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(232, 196, 112);
}
#jpHero .sheet-k {
  display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgb(232, 196, 112);
}
#jpHero .sheet-k::before {
  content: ''; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E %3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E %3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
#jpHero .sheet-t {
  margin: 0 0 18px; padding: 0 0 16px; border: 0; border-bottom: 1px solid rgba(250, 248, 243, .14);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: rgba(250, 248, 243, .84);
}
/* the door: gold, as the quote button below; while it waits or once used, quiet */
#jpHero .board-btn {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px;
  margin: 0; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, rgb(232, 196, 112), var(--gold-soft)); color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 28px -14px rgba(212, 169, 67, .75);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: transform var(--jp-fast) var(--jp-std), box-shadow var(--jp-fast) var(--jp-std);
}
#jpHero a.board-btn:not(#jobQuote)::before { content: none; display: none; }
#jpHero #jobQuote::before {
  content: ''; display: block; position: static; inset: auto; width: 17px; height: 17px; flex: none; opacity: 1; background: currentColor; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E %3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E %3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E") center / contain no-repeat;
}
#jpHero #jobQuote::after {
  content: ''; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E %3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E %3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--jp-base) var(--jp-in);
}
#jpHero .board-btn:hover, #jpHero .board-btn:focus-visible { background: linear-gradient(180deg, rgb(238, 206, 128), var(--gold-soft)); color: var(--navy); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 34px -14px rgba(212, 169, 67, .9); }
#jpHero #jobQuote:hover::after, #jpHero #jobQuote:focus-visible::after { transform: translateX(4px); }
/* his job: the camera is the door, with its mark */
#jpHero label.board-btn::before {
  content: ''; display: block; position: static; inset: auto; width: 18px; height: 18px; flex: none; opacity: 1; background: currentColor; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E %3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E %3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
#jpHero .board-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
#jpHero #jobQuote[aria-disabled="true"] {
  cursor: default; transform: none; background: rgba(250, 248, 243, .1); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .3);
}
#jpHero #jobQuote[aria-disabled="true"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
#jpHero #jobQuote[aria-disabled="true"]::after { display: none; }
#jpHero .board-quiet {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin: 10px 0 0; padding: 0 18px; border: 0; border-radius: 999px;
  background: none; box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .32); color: var(--cream); text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color var(--jp-fast) var(--jp-std), box-shadow var(--jp-fast) var(--jp-std);
}
#jpHero a.board-quiet::before {
  content: ''; width: 16px; height: 16px; flex: none; background: rgb(232, 196, 112);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E %3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E %3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E %3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E %3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
#jpHero .board-quiet:hover, #jpHero .board-quiet:focus-visible { background: rgba(250, 248, 243, .08); box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .6); border: 0; }
#jpHero .board-quiet:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
#jpHero .board-quiet[hidden] { display: none; }
/* the withdraw button carries its own inline look (an underlined link); on navy it takes cream */
#jpHero button.board-quiet[data-withdraw] {
  color: rgba(250, 248, 243, .86) !important; box-shadow: none; min-height: 40px; margin-top: 6px;
  font-family: var(--sans) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: .02em; text-transform: none;
}
#jpHero .board-fine { margin: 12px 0 0; font-family: var(--sans); font-size: 12px; line-height: 1.5; color: rgba(250, 248, 243, .76); text-align: center; }
#jpHero .board .sheet-t[role="status"] { border: 0; margin: 12px 0 0; padding: 0; }
#jpHero .board-foot {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 12px 20px 18px;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: rgba(250, 248, 243, .78);
  text-align: left; line-height: 1.45;
}
@media (max-width: 760px) { #jpHero .board-foot { font-size: 12px; } }  /* rp200 phone floor, was 11px */
#jpHero .board-foot::before {
  content: ''; width: 14px; height: 14px; flex: none; background: rgb(232, 196, 112);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ══ the top, narrower and the ways out ══ */
@media (max-width: 900px) {
  #jpHero .tradefacts { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}
@media (max-width: 640px) {
  #jpHero .listing-title { font-size: 30px; }
  #jpHero .jp-save span { display: none; }
  #jpHero .jp-save { padding: 0 10px; }
  #jpHero .tradefacts .tf b { font-size: 18px; }
  #jpHero .tradefacts .tf span { font-size: 9px; letter-spacing: .1em; }
@media (max-width: 760px) { #jpHero .tradefacts .tf span { font-size: 10.5px; } }  /* rp200 phone floor, was 9px */
  #jpHero .tradefacts { gap: 6px; }
  #jpHero .tradefacts .tf { padding: 10px 10px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #jpHero .jp-status[data-state] i::after, #jpHero .jp-board-ph { animation: none; }
  #jpHero .jp-trade, #jpHero .jp-save, #jpHero .board-btn, #jpHero #jobQuote::after { transition: none; }
  #jpHero .jp-trade:hover, #jpHero .jp-save:hover, #jpHero .board-btn:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  #jpHero .board { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--navy); }
}
@media (forced-colors: active) {
  #jpHero .board, #jpHero .tradefacts .tf, #jpHero .jp-save, #jpHero .jp-trade, #jpHero .jp-status { border: 1px solid CanvasText; }
  #jpHero .jp-board-ph { display: none; }
  #jpHero .sheet-k::before, #jpHero #jobQuote::before, #jpHero #jobQuote::after, #jpHero a.board-quiet::before, #jpHero .board-foot::before { forced-color-adjust: none; background: CanvasText; }
}

/* =============================================================================
   rp151. THE JOB'S FIRST PHOTOGRAPH, BLURRED, BEHIND THE PAGE ITSELF
   Sir: "the cards should not have the backgrounds. I meant the page itself." The cards keep their own grounds;
   the photograph lies behind the whole page, fixed (it stays as the page moves over it), blurred and a little
   richer, under a cream veil whose strength (--jp-veil) hyyryn-job-page.js measures from the photograph: the
   lightest that keeps the page's own words at 4.6:1. The page's grounds that hid it step aside (the body, the
   page's wash, the band beside the photographs). The words that sit straight on the page go a step darker while
   the photograph is there: the quiet grey to ink and the small gold heads to the darkest gold, as the panel beside
   the photographs already does (8 Sep). No photograph: html never takes .jp-photo and nothing here applies.
   ============================================================================= */
.jp-backdrop { display: none; }
html.jp-photo { background: var(--cream); }
html.jp-photo body, html.jp-photo .page-wrap, html.jp-photo .pdp { background: transparent; }
html.jp-photo .jp-backdrop {
  display: block; position: fixed; z-index: -1; left: -60px; top: -60px; width: calc(100vw + 120px);
  height: calc(100vh + 120px); height: calc(100lvh + 120px); overflow: hidden; pointer-events: none;
}
html.jp-photo .jp-backdrop > i {
  position: absolute; inset: 0; background: var(--jp-photo, none) center / cover no-repeat;
  filter: blur(24px) saturate(1.3); animation: jp-backdrop-in 1100ms var(--jp-std, ease) both;
}
html.jp-photo .jp-backdrop::after {
  content: ''; position: absolute; inset: 0; background: rgba(250, 248, 243, var(--jp-veil, .9)); transition: background-color 600ms ease;
}
@keyframes jp-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
/* the words straight on the page, a step darker while the photograph is behind them */
html.jp-photo .breadcrumbs.jp-crumbs span,
html.jp-photo #jp .js-lead, html.jp-photo #jp .js-tally,
html.jp-photo .jp-three .rz-d { color: var(--ink); }
html.jp-photo #jp .jp-main .jp-k, html.jp-photo #jp .js-tally i,
html.jp-photo .jp-three .rz-n, html.jp-photo .jp-three .rz-k { color: #5B4318; }
/* rp152, Sir on the column beside the photographs: "remove the second cream container behind this section so it
   has the same background as the rest of the page". With the photograph behind the page, that column's frosted
   cream (82%, 18px blur, 24 Aug) and its hairline give way, and the lead photograph stops at the column's edge
   instead of running under it (24 Aug), so the title and the card stand on the page's own photograph like
   everything below them. Without a photograph behind the page, the column is as it was. */
html.jp-photo .pdp-info { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-left-color: transparent; }
html.jp-photo .pdp-lead { margin-right: 0; }
html.jp-photo .gallery-all { right: 18px; }
@media (prefers-reduced-motion: reduce) {
  html.jp-photo .jp-backdrop > i { animation: none; }
}
/* the photograph is a picture behind words: off where the reader asks for less, and on paper */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active), print {
  html.jp-photo .jp-backdrop { display: none; }
}

/* ══ rp157 (17 Oct 2026, the launch-day pass): HIS OWN JOB, HIRED ═══════════════════════════════════════════════
   On a job he has been hired for (hyyryn-jobquote.js work() sets html.jp-hired), the page still made the case
   for quoting: "No photographs yet ... a quote priced on risk", what their words cover and a button to ask what
   the job involves, what he keeps "if you quote the budget" (£237.50 on a job accepted at £460), "After you quote:
   where the money goes" and "Before you quote: three things worth a minute". Those are put away; the panel with no
   photographs says whose photographs this job needs, the money card is worked from the price accepted, and the
   sheet says where the money is (all three in hyyryn-jobquote.js). */
html.jp-hired .jp-cover-k,
html.jp-hired #jdCover,
html.jp-hired .jd-ask,
html.jp-hired .jp-try,
html.jp-hired .jp-three { display: none !important; }

/* ══ rp212 (22 Oct 2026): THE DARK WELL WITH NO PHOTOGRAPHS, UNDER GLASS, ON BOTH PAGES ═══════════════════════════
   Sir, of the job page and the listing (rp211 gave them one design): "bring back the glass stripe effect for the no
   photographs section". rp210's window on the listing had it: the well lit a little at its centre and two faint bands of
   light across it, as on a pane of glass. It lives here, in the sheet both pages load, so the two wells stay one. The
   colour stays the well's own (rgb 38 48 63) under the light, for anything that reads the colour alone. */
.pdp-media.is-nopix.is-nopix {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, rgb(44, 55, 71) 0, rgba(38, 48, 63, 0) 55%, rgb(29, 38, 51) 100%) rgb(38, 48, 63);
}
.pdp-media.is-nopix::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .055) 36%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .03) 56%, rgba(255, 255, 255, 0) 60%);
}
.pdp-media.is-nopix > .pdp-nopix { position: relative; z-index: 1; }
/* the bands are light on glass: off where the reader asks for less transparency or more contrast, and in forced colours */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { .pdp-media.is-nopix::before { display: none; } }

/* ══ rp214 (23 Oct 2026): HIS OWN JOB, ITS PHOTOGRAPHS AND ITS MONEY ══════════════════════════════════════════════
   Sir, of the remaining pages before the test run: improve each. On a job he is hired for, the dark well said "No
   photographs from Hannah" over four lines after his own were in, and nothing on the page said where his money was
   (rp157 put the road away). His two photographs take the well (hyyryn-jobquote.js shots(): Before and After, each
   with what has happened to it), or come first below it when the homeowner's own fill the well (#jpProof); and the
   road comes back as his job's: the steps passed ticked, the one the job is at lit, the gold drawn as far as the
   money has come (data-at, hyyryn-job-page.js). Nothing here is drawn on the listing page, which shares this sheet. */
/* what the well's panel puts away stays away: its mark and its button carry their own display, which beat [hidden] */
.pdp-nopix > [hidden] { display: none; }
.pdp-media.is-nopix .pdp-nopix.has-proof { max-width: 700px; width: 100%; }
.np-proof[hidden] { display: none; }
.np-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin: 22px 0 0; text-align: left; }
.np-shot { margin: 0; min-width: 0; }
.np-frame {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: rgba(250, 248, 243, .05); box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .22), 0 18px 36px -22px rgba(0, 0, 0, .7); cursor: zoom-in;
  transition: transform 260ms cubic-bezier(.16, .84, .44, 1), box-shadow 260ms cubic-bezier(.16, .84, .44, 1);
}
.np-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 420ms cubic-bezier(.4, 0, .2, 1); }
.np-frame.is-in img { opacity: 1; }
button.np-frame:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(212, 169, 67, .7), 0 24px 40px -22px rgba(0, 0, 0, .8); }
button.np-frame:focus-visible { outline: 2px solid #D4A943; outline-offset: 3px; }
.np-frame.is-empty { cursor: default; background: rgba(250, 248, 243, .025); box-shadow: none; border: 1.5px dashed rgba(250, 248, 243, .3); }
.np-frame.is-empty svg { width: 30px; height: 30px; fill: none; stroke: rgba(250, 248, 243, .6); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.np-shot figcaption { display: grid; justify-items: start; gap: 7px; margin: 12px 0 0; }
.np-sk { font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: #D4A943; }
.np-st {
  display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 11px 0 9px; border-radius: 999px;
  background: rgba(250, 248, 243, .08); box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .22);
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; line-height: 1.2; color: #FAF8F3;
}
.np-st::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(250, 248, 243, .55); }
.np-shot[data-st="ok"] .np-st::before { background: rgb(111, 207, 170); }
.np-shot[data-st="wait"] .np-st::before { background: #D4A943; }
.np-shot[data-st="no"] .np-st::before { background: rgb(240, 150, 136); }
.np-sl { font-family: var(--sans); font-size: 13px; line-height: 1.45; color: rgba(250, 248, 243, .76); }
/* one photograph large, over the well it came from */
.np-big { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-rows: minmax(0, 1fr) auto; border-radius: inherit; overflow: hidden; background: rgb(18, 26, 38); }
.np-big img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; cursor: zoom-out; }
.np-big-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  background: rgba(10, 22, 40, .82); font-family: var(--sans); font-size: 13px; line-height: 1.4; color: #FAF8F3;
}
.np-big-x {
  flex: none; min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: #FAF8F3; color: #0A1628; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.np-big-x:focus-visible { outline: 2px solid #D4A943; outline-offset: 3px; }
/* with the homeowner's photographs in the well, his come first below it, on the night band */
#jp .jp-proof {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px, 3.2vw, 44px) clamp(22px, 3.4vw, 48px);
  border-radius: 28px; color: var(--cream); background: radial-gradient(90% 120% at 0% 0%, rgb(20, 42, 81), var(--navy) 60%);
  box-shadow: 0 2px 4px rgba(10, 22, 40, .12), 0 40px 80px -50px rgba(10, 22, 40, .8);
}
#jp .jp-proof .jp-k { color: var(--gold-soft); }
#jp .jp-proof .jp-h { color: var(--cream); }
#jp .jp-proof .jp-ring { background: rgba(250, 248, 243, .08); color: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(212, 169, 67, .55), 0 0 0 5px rgba(212, 169, 67, .08); }
#jp .jp-proof .np-pair { max-width: 720px; margin-top: 4px; }
/* no job chosen (rp214) or none there: no photograph behind the page (the illustration's stood there), and the line
   saying what to do is read, not only heard */
html.hy-nojob .jp-backdrop { display: none; }
html.hy-nojob #jpHero .listing-by {
  position: static; width: auto; height: auto; margin: 8px 0 22px; overflow: visible; clip: auto; white-space: normal; max-width: 56ch;
  font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink);
}
/* a tile's label breaks between words, never inside one ("PHOTOGRAPH / S" on a phone): on a phone it is set a little
   tighter so the longest, Photographs, fits its tile at 360 */
#jpHero .tradefacts .tf span { overflow-wrap: normal; }
@media (max-width: 640px) { #jpHero .tradefacts .tf.tf span { letter-spacing: .05em; } }
/* the quiet button on the card is 46px tall already; the chrome's press rule for small links (margin -6px, by an id in
   :is) pulled it up over the sealed-record line above it on a phone. Two classes and the id win on count. */
#jpHero a.board-quiet.board-quiet { margin-block: 10px 0; padding-block: 0; }
/* on a phone the gallery's count ("One photograph") was 10px in the well with her photographs: the phone floor is 12 */
@media (max-width: 760px) { .pdp-media .gallery-all.gallery-all { font-size: 12px; } }
/* the road on his own job: passed, here, still to come */
#jpFlow[data-at] .jp-coin { display: none; }
#jpFlow .jp-st--done .jp-st-d { color: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(212, 169, 67, .6), inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 7px var(--navy), 0 14px 26px -12px rgba(0, 0, 0, .6); }
#jpFlow .jp-st--done .jp-st-n { font-size: 0; background: var(--gold-soft); }
#jpFlow .jp-st--done .jp-st-n::before { content: ''; width: 9px; height: 5px; margin-top: -2px; border: solid var(--navy); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
#jpFlow .jp-st--stop .jp-st-d { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgb(240, 150, 136), 0 0 0 7px var(--navy), 0 0 30px rgba(240, 150, 136, .3); }
#jpFlow[data-at] .jp-st:not(.jp-st--done):not(.jp-st--now):not(.jp-st--stop) b { color: rgba(250, 248, 243, .78); }
#jpFlow[data-at] .jp-st:not(.jp-st--done):not(.jp-st--now):not(.jp-st--stop) > span:last-child { color: rgba(250, 248, 243, .64); }
@media (max-width: 760px) {
  .np-pair { gap: 12px; margin-top: 16px; }
  .np-frame { border-radius: 12px; }
  .np-sl { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .np-frame, .np-frame img { transition: none; } button.np-frame:hover { transform: none; } }
@media (forced-colors: active) { .np-frame { border: 1px solid CanvasText; } .np-st::before { forced-color-adjust: none; background: CanvasText; } }