/* ══ HELP AND CONTACT, THE LEGAL PAGES' SIBLING ════════════════ 12 Oct 2026 (rp108), v6 ══
   Loaded after hyyryn-company.css, on support.html only. Sir, 12 Oct, after v5: the
   page "really needs a revamp that matches somewhat the privacy policy and similar
   pages. Because right now it just looks very ... ostracized". v5 dressed Help as a
   company page (a photograph, bands of different grounds); the legal pages had
   meanwhile become the site's reading room. Help is a document a person reads to
   find one answer, so it now stands as they do (Mason 59.19), with the values read
   off privacy.html (its inline sheet, rp99), so the three read as one family:
     the ground    the legal pages' reeded glass, a green wash and a little gold
     the head      the title in the display face over a deed's double rule (navy,
                   then gold); on its right, on glass, the search and the switch
     the rail      the contents on glass, number then name, the part being read
                   marked with the gold edge; a disclosure on a phone
     the docket    the help desk on glass with a gold edge: the one urgent thing,
                   the two inboxes, a person
     the sheet     paper, a gold rule down the margin, the numbers hung in it
                   (1 to 6 the stops of a job, A to E the rest, W a person); the
                   road and the index as the sheet's stub; a counterfoil at the foot
   The one idea stays: you find help by where you are in the job.

   THE CONTROLS BY KIND (Mason 59.4):
   | Kind       | Here                                 | Rest                              | Hover                       | Focus |
   | Action     | Go to my disputes; Send the message  | square 48px, capitals, an arrow   | rises 1px, arrow steps 4px  | navy  |
   | Switch     | I'm a homeowner / a tradesperson     | a pill on glass, the chosen cream | the other word darkens      | navy  |
   | Way in     | the rail, the road's stops, the index| a row or a ring, number then name | tints; the ring rises 2px   | navy  |
   | Disclosure | a question                           | the row, a ring with a plus       | row tints, indents 8px      | navy  |
   | Way to     | an answer's links, the plans rows    | capitals, a 1px underline, arrow  | line 2px, arrow steps 4px   | navy  |
   | Choice     | the topic of a message               | a square row with a ring          | edge darkens                | navy  |
   | Field      | the search, the letter's fields      | white, a hairline                 | -                           | navy  |
   Every colour is a company-sheet token, a legal-page value, or an rgba of one. */

html.hp-page { background: var(--cream); scroll-padding-top: 96px; }
html.hp-page body { background: transparent; }
@media (max-width: 900px) { html.hp-page { scroll-padding-top: 80px; } }
/* the legal pages' ground: reeded glass under a green wash and a little gold (privacy.html, rp99), one window-sized layer */
html.hp-page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
    radial-gradient(820px 600px at 2% 110px, rgba(15,90,79,.13), transparent 72%),
    radial-gradient(900px 700px at 100% 80%, rgba(212,169,67,.12), transparent 72%),
    repeating-linear-gradient(90deg, rgba(10,22,40,.045) 0 1px, rgba(255,255,255,.55) 1px 2px, transparent 2px 9px, rgba(10,22,40,.018) 9px 13px, transparent 13px 14px); }

.hp {
  --hp-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --hp-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --hp-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hp-paper: #FFFDF8; --hp-sheet: #FBF7EC; --hp-rule: rgba(131,99,44,.42); --hp-gold-ink: #5B4318; --hp-muted: #4A5160;
  --hp-gut-l: clamp(20px, 2.4vw, 40px); --hp-gut-r: clamp(24px, 3vw, 48px); --hp-num: 76px;
  --hp-glass: rgba(255,253,248,.58); --hp-glass-ring: rgba(255,255,255,.8); --hp-glass-edge: rgba(10,22,40,.09); --hp-glass-fx: blur(12px) saturate(1.5);
  --hp-pane: inset 0 0 0 1px var(--hp-glass-ring), 0 0 0 1px var(--hp-glass-edge), 0 22px 44px -30px rgba(10,22,40,.42);
  --hp-line: rgba(10,22,40,.12); --hp-ring: rgba(10,22,40,.26);
  --hp-sheet-l: calc(var(--hp-num) + clamp(24px, 3vw, 44px));
  --hp-col: 46rem;   /* the reading column: about 72 characters of the answers' face; parts, headings and rows share it */
}
.hp-k { margin: 0 0 16px; display: flex; align-items: center; gap: 12px; font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.hp-k::before { content: ''; width: 28px; height: 1px; background: var(--gold-soft); }

/* ── the head: the title over a deed's double rule, the search on glass beside it ── */
.hp-head { padding: 72px var(--hp-gut-r) 40px var(--hp-gut-l); }
.hp-head-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; }
.hp-head-in::after { content: ''; grid-column: 1 / -1; display: block; height: 7px; margin-top: 28px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--gold-soft); }
@media (min-width: 1500px) { .hp-head-in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.hp-h1 { margin: 0; font-family: var(--hp-display); font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.04; letter-spacing: 0; color: var(--navy); }
.hp-lede { margin: 14px 0 0; max-width: 36ch; font-family: var(--hp-serif); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--hp-muted); }
.hp-ask { padding: 20px 24px 18px; background: var(--hp-glass); -webkit-backdrop-filter: var(--hp-glass-fx); backdrop-filter: var(--hp-glass-fx); box-shadow: var(--hp-pane); }
.hp-find-l { display: block; margin: 0 0 10px; font-family: var(--hp-sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hp-gold-ink); }
@media (max-width: 760px) { .hp-find-l { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.hp-findrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.hp-find { position: relative; flex: 1 1 380px; min-width: 0; }
.hp-find svg { position: absolute; left: 18px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: var(--navy); stroke-width: 1.9; stroke-linecap: round; pointer-events: none; }
.hp-find input { width: 100%; height: 52px; padding: 0 18px 0 50px; border: 0; border-radius: 0; background: #fff; color: var(--ink); font-family: var(--hp-serif); font-size: 16.5px;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.22), 0 10px 22px -18px rgba(10,22,40,.5); transition: box-shadow 200ms; }
.hp-find input::placeholder { color: var(--muted); }
.hp-find input:hover { box-shadow: inset 0 0 0 1px rgba(10,22,40,.4), 0 10px 22px -18px rgba(10,22,40,.5); }
.hp-find input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 3px rgba(10,22,40,.10); }
.hp-find input::-webkit-search-cancel-button { cursor: pointer; }
/* the switch: a pill on glass, the chosen word on cream (the plans page's, in the head's light) */
.hp-who { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(10,22,40,.05);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.16), inset 0 1px 2px rgba(10,22,40,.06); }
.hp-who-b { position: relative; z-index: 1; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hp-muted); transition: color 220ms; }
.hp-who-b[aria-pressed="false"]:hover { color: var(--navy); }
.hp-who-b[aria-pressed="true"] { color: var(--navy); background-color: var(--hp-paper); box-shadow: 0 1px 2px rgba(10,22,40,.16), 0 6px 14px -8px rgba(10,22,40,.4); }
.hp-who.is-sliding .hp-who-b[aria-pressed="true"] { background-color: transparent; box-shadow: none; }
.hp-who::before { content: ''; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--hp-paper);
  box-shadow: 0 1px 2px rgba(10,22,40,.16), 0 6px 14px -8px rgba(10,22,40,.4); opacity: 0; transition: translate 250ms var(--ease-stone); }
.hp-who.is-sliding::before { opacity: 1; }
.hp-who:has([data-role="trade"][aria-pressed="true"])::before { translate: 100% 0; }
.hp-who-b:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.hp-found { margin: 10px 0 0; font-family: var(--hp-sans); font-size: 12.5px; color: var(--hp-muted); }
.hp-found:empty { display: none; }

/* ── the three columns: contents, the sheet, the help desk (the desk stands above the sheet below 1500px) ── */
.hp-wrap { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: start;
  padding: 8px var(--hp-gut-r) 96px var(--hp-gut-l); }
.hp-wrap > .hp-desk { grid-column: 2; grid-row: 1; }
.hp-wrap > .hp-toc { grid-column: 1; grid-row: 1 / span 2; }
.hp-wrap > .hp-sheet { grid-column: 2; grid-row: 2; }
@media (min-width: 1500px) {
  .hp-wrap { grid-template-columns: minmax(240px, 300px) minmax(0, 960px) minmax(260px, 1fr); }
  .hp-wrap > .hp-desk { grid-column: 3; grid-row: 1 / span 2; position: sticky; top: 96px; }
  .hp-wrap > .hp-sheet { grid-row: 1 / span 2; }
}

/* ── the help desk: a docket on glass, a gold edge ── */
.hp-desk { position: relative; margin: 0 0 28px; padding: 18px 22px 18px 24px; background: var(--hp-glass); -webkit-backdrop-filter: var(--hp-glass-fx); backdrop-filter: var(--hp-glass-fx); box-shadow: var(--hp-pane); }
.hp-desk::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-soft); }
.hp-desk-k { margin: 0 0 12px; font-family: var(--hp-sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hp-gold-ink); }
@media (max-width: 760px) { .hp-desk-k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
/* the one urgent thing: paper on the glass, ruled in gold above */
.hp-now { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 16px 16px 14px; background: var(--hp-paper);
  box-shadow: inset 0 2px 0 var(--gold-soft), inset 0 0 0 1px var(--line-2); }
.hp-now .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(131,99,44,.5); }
.hp-now .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--hp-gold-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-now p { margin: 0; font-family: var(--hp-serif); font-size: 14.5px; line-height: 1.58; color: var(--hp-muted); }
.hp-now b { display: block; margin-bottom: 4px; font-family: var(--hp-display); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--navy); }
.hp-now .hp-btn { grid-column: 1 / -1; justify-self: start; max-width: 100%; margin-top: 12px; white-space: normal; text-align: left; line-height: 1.35; padding-block: 10px; }
/* in the narrow docket beside the sheet, the urgent action takes the docket's width */
@media (min-width: 1500px) { .hp-now { grid-template-columns: minmax(0, 1fr); } .hp-now .ic { display: none; } .hp-now .hp-btn { justify-self: stretch; justify-content: space-between; } }
.hp-inbox { margin: 16px 0 0; }
.hp-inbox > div { padding: 12px 0; border-top: 1px solid var(--line-2); }
.hp-inbox dt { font-family: var(--hp-sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hp-gold-ink); }
@media (max-width: 760px) { .hp-inbox dt { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.hp-inbox dd { margin: 8px 0 0; display: grid; gap: 8px; justify-items: start; }
.hp-inbox .w { font-family: var(--hp-serif); font-size: 14px; line-height: 1.55; color: var(--hp-muted); }
.hp-inbox .co-copy { background: var(--hp-paper); }
.hp-desk-p { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2); font-family: var(--hp-serif); font-size: 14px; line-height: 1.6; color: var(--hp-muted); }
.hp-desk-go { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hp-desk-go a, .hp-next-go { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); box-shadow: inset 0 -1px 0 rgba(10,22,40,.35); transition: box-shadow 200ms; }
.hp-desk-go svg, .hp-next-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-quick); }
.hp-desk-go a:hover, .hp-next-go:hover { box-shadow: inset 0 -2px 0 currentColor; }
.hp-desk-go a:hover svg, .hp-next-go:hover svg { transform: translateX(4px); }
.hp-desk-go a:focus-visible, .hp-next-go:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (min-width: 1001px) and (max-width: 1499px) {
  /* above the sheet the desk is wide: the urgent thing beside the inboxes */
  .hp-desk { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 28px; }
  .hp-desk-k { grid-column: 1 / -1; }
  .hp-desk .hp-now { grid-column: 1; grid-row: 2 / span 3; align-self: start; }
  .hp-inbox { margin-top: 0; }
  .hp-inbox > div:first-child { border-top: 0; padding-top: 0; }
}

/* the actions: square, capitals, an arrow */
.hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--hp-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: transform 220ms var(--ease-quick); }
.hp-btn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-quick); }
.hp-btn:hover { transform: translateY(-1px); }
.hp-btn:hover svg { transform: translateX(4px); }
.hp-btn.is-gold { background-color: var(--gold-soft); color: var(--navy); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -14px rgba(10,22,40,.6); }
.hp-btn.is-gold:hover { background-color: var(--gold-hi); }
.hp-btn.is-gold:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.hp-btn.is-solid { position: relative; isolation: isolate; min-height: 52px; padding: 0 26px; color: var(--cream); background-color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(10,22,40,.18), 0 12px 24px -12px rgba(10,22,40,.5); }
.hp-btn.is-solid::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--navy-2); opacity: 0; transition: opacity 220ms; }
.hp-btn.is-solid:hover::after { opacity: 1; }
.hp-btn.is-solid:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.hp-btn:disabled { opacity: .6; cursor: progress; transform: none; }

/* ── the contents: a rail beside the sheet that marks where you are; a disclosure on a phone ── */
.hp-toc details > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 0 0 12px; cursor: default; border-bottom: 2px solid var(--navy);
  font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.hp-toc details > summary::-webkit-details-marker { display: none; }
.hp-toc-h { margin: 14px 0 4px; padding: 0 0 0 10px; font-family: var(--hp-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hp-gold-ink); }
.hp-toc ol { list-style: none; margin: 0; padding: 0; }
.hp-toc-w { margin-top: 12px !important; border-top: 1px solid var(--line-2); }
.hp-toc li { margin: 0; font-size: 14px; }
.hp-toc a { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; padding: 7px 8px 7px 10px; text-decoration: none;
  font-family: var(--hp-serif); line-height: 1.4; color: var(--hp-muted); border-bottom: 1px solid var(--line); transition: color .2s ease, background-color .2s ease, opacity .2s ease; }
.hp-toc a:hover { color: var(--navy); background: rgba(212,169,67,.08); }
.hp-toc a:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.hp-tn { font-family: var(--hp-sans); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--hp-gold-ink); font-variant-numeric: tabular-nums; padding-top: 2px; }
.hp-toc a[aria-current="true"] { color: var(--navy); background: var(--hp-paper); box-shadow: inset 3px 0 0 var(--gold-soft); }
.hp-toc a[aria-current="true"] .hp-tn { color: var(--navy); }
.hp-toc li.is-miss > a { opacity: .42; }
@media (min-width: 1001px) {
  .hp-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 18px 14px 14px 16px; background: var(--hp-glass); -webkit-backdrop-filter: var(--hp-glass-fx); backdrop-filter: var(--hp-glass-fx); box-shadow: var(--hp-pane); }
}

/* ── the sheet: paper, a gold rule down the margin, the numbers hung in the margin ── */
.hp-sheet { position: relative; min-width: 0; padding: clamp(28px, 3.4vw, 56px) clamp(24px, 4vw, 64px) 0 var(--hp-sheet-l); background: var(--hp-paper);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(10,22,40,.05), 0 30px 60px -40px rgba(10,22,40,.35); }
.hp-sheet::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--hp-sheet-l) - 22px); width: 1px; background: var(--hp-rule); }
.hp-sec, .hp-talk { position: relative; scroll-margin-top: 96px; }
.hp-n { position: absolute; right: calc(100% + 36px); width: var(--hp-num); text-align: right; font-family: var(--hp-sans); font-weight: 600; font-size: 15px; letter-spacing: .04em; line-height: 1.9;
  color: var(--hp-gold-ink); font-variant-numeric: tabular-nums; top: 22px; }
.hp-sec > h2, .hp-talk > h2 { margin: 52px 0 6px; padding-top: 22px; border-top: 1px solid var(--line-2); max-width: var(--hp-col); font-family: var(--hp-display); font-weight: 400;
  font-size: clamp(24px, 2.1vw, 30px); line-height: 1.18; color: var(--navy); text-wrap: balance; }
/* a part (in the job; not about a job) is its own divider: a navy rule over the whole column, its name in
   small capitals, and the first section under it takes no second rule */
.hp-part { max-width: var(--hp-col); margin: 64px 0 0; padding-top: 14px; border-top: 2px solid var(--navy); font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hp-gold-ink); }
.hp-secs > .hp-part:first-child { margin-top: 44px; }
.hp-part + .hp-sec > h2 { margin-top: 18px; padding-top: 0; border-top: 0; }
.hp-part + .hp-sec > .hp-n { top: 0; }

/* the stub at the head of the sheet: the road and the index, ruled navy then gold above */
.hp-stub { position: relative; margin: 0; padding: 24px clamp(20px, 2.6vw, 34px) 18px; background: var(--hp-sheet); box-shadow: inset 0 0 0 1px var(--line-2); }
.hp-stub::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--gold-soft); }
.hp-stub-h { margin: 2px 0 6px; font-family: var(--hp-display); font-weight: 400; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; color: var(--navy); }
.hp-stub-p { margin: 0 0 20px; max-width: 64ch; font-family: var(--hp-serif); font-size: 15px; line-height: 1.55; color: var(--hp-muted); }
.hp-stub-k { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--line-2); font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hp-gold-ink); }
/* the road: drawn from the first stop to the last, navy as far as the stop being read */
.hp-road { min-width: 0; }
.hp-track { --a: calc(100% / 12); --len: calc(100% * 10 / 12); --here: 0px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hp-track::before, .hp-track::after { content: ''; position: absolute; top: 21px; left: var(--a); height: 2px; pointer-events: none; }
.hp-track::before { width: var(--len); background: repeating-linear-gradient(90deg, var(--hp-ring) 0 10px, transparent 10px 16px); }
.hp-track::after { width: var(--here); background: var(--navy); transition: width 600ms var(--ease-stone); }
.hp-stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 4px 4px; text-decoration: none; color: var(--hp-muted); }
.hp-stop .dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--hp-paper); box-shadow: inset 0 0 0 1.5px var(--hp-ring), 0 0 0 6px var(--hp-sheet);
  font-family: var(--hp-display); font-size: 19px; color: var(--navy); transition: background-color 240ms, box-shadow 240ms, color 240ms, translate 240ms var(--ease-quick); }
.hp-stop .nm { font-family: var(--hp-sans); font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center; transition: color 200ms; }
.hp-stop.is-past .dot { box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 6px var(--hp-sheet); }
.hp-stop:hover .dot { box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 6px var(--hp-sheet), 0 10px 18px -10px rgba(10,22,40,.5); translate: 0 -2px; }
.hp-stop:hover .nm { color: var(--navy); }
.hp-stop[aria-current="step"] { color: var(--navy); }
.hp-stop[aria-current="step"] .dot { background: var(--navy); color: var(--cream); box-shadow: 0 0 0 4px var(--hp-sheet), 0 0 0 5.5px var(--gold-soft), 0 12px 22px -10px rgba(10,22,40,.55); }
.hp-stop[aria-current="step"] .nm { font-weight: 600; }
.hp-stop:focus-visible { outline: none; }
.hp-stop:focus-visible .dot { outline: 2px solid var(--navy); outline-offset: 8px; }
/* the index of what is not about a job: five rows, letter then name, in two columns */
.hp-grps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); }
.hp-grps li { border-top: 1px solid var(--line); }
.hp-grp { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; padding: 10px 8px 10px 4px; text-decoration: none; color: var(--navy); transition: background-color 200ms, padding-left 220ms var(--ease-quick); }
.hp-grp .hp-tn { padding-top: 3px; }
.hp-grp .tx { display: grid; gap: 2px; min-width: 0; }
.hp-grp .nm { font-family: var(--hp-serif); font-weight: 700; font-size: 15px; line-height: 1.35; }
.hp-grp .d { font-family: var(--hp-serif); font-size: 13.5px; line-height: 1.45; color: var(--hp-muted); }
.hp-grp:hover { background: rgba(212,169,67,.08); padding-left: 10px; }
.hp-grp[aria-current="true"] { background: var(--hp-paper); box-shadow: inset 3px 0 0 var(--gold-soft); }
.hp-grp:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

/* a question: a disclosure on paper, the question in the reading face */
.hp-sec > *:not(h2):not(.hp-n) { max-width: var(--hp-col); }
.hp-q { border-bottom: 1px solid var(--line); }
.hp-q > summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 30px; column-gap: 22px; align-items: center; padding: 14px 8px 14px 0; cursor: pointer; list-style: none;
  font-family: var(--hp-serif); font-weight: 400; font-size: 17px; line-height: 1.4; color: var(--navy); transition: padding-left 220ms var(--ease-quick), background-color 220ms; }
.hp-q[open] > summary { font-weight: 700; }
.hp-q > summary::-webkit-details-marker { display: none; }
.hp-q > summary::after { content: ''; justify-self: end; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hp-ring);
  background: linear-gradient(var(--navy), var(--navy)) 50% 50% / 10px 1.5px no-repeat, linear-gradient(var(--navy), var(--navy)) 50% 50% / 1.5px 10px no-repeat;
  transition: background-size 220ms var(--ease-quick), box-shadow 220ms, background-color 220ms, transform 260ms var(--ease-quick); }
.hp-q > summary:hover { padding-left: 8px; background-color: rgba(212,169,67,.07); }
.hp-q > summary:hover::after { box-shadow: inset 0 0 0 1px var(--navy); }
.hp-q[open] > summary::after { background-size: 10px 1.5px, 1.5px 0; box-shadow: inset 0 0 0 1px var(--navy); background-color: rgba(10,22,40,.05); transform: rotate(180deg); }
.hp-q > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.hp-q.is-other > summary span.side { display: inline-block; margin-left: 10px; padding: 2px 7px 1px; vertical-align: 2px; font-family: var(--hp-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hp-gold-ink); box-shadow: inset 0 0 0 1px rgba(131,99,44,.42); }
.hp-q .a { padding: 0 52px 20px 0; }
.hp-q .a p { margin: 0; font-family: var(--hp-serif); font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.hp-q .a p + p { margin-top: 10px; }
.hp-q .a a:not(.go a) { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(131,99,44,.6); }
.hp-q mark { background: linear-gradient(180deg, transparent 0 50%, rgba(212,169,67,.36) 50% 94%, transparent 94%); color: inherit; padding: 0 .06em; }
.hp-q .a p.go { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 12px; }
.hp-q .go a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); box-shadow: inset 0 -1px 0 rgba(10,22,40,.35); transition: box-shadow 200ms; }
.hp-q .go a::after, .hp-out::after { content: ''; flex: none; width: 13px; height: 13px; background: currentColor; transition: transform 220ms var(--ease-quick);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") 50% 50% / 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='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") 50% 50% / contain no-repeat; }
.hp-q .go a:hover { box-shadow: inset 0 -2px 0 currentColor; }
.hp-q .go a:hover::after { transform: translateX(4px); }
.hp-q .go a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* the plans page's answers: one row each, a way to that one answer */
.hp-when { margin: 14px 0 18px; padding: 12px 16px; background: rgba(212,169,67,.12); box-shadow: inset 2px 0 0 var(--gold-soft); font-family: var(--hp-serif); font-size: 15px; line-height: 1.6; color: var(--hp-gold-ink); }
.hp-out-k { margin: 4px 0 4px; font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hp-muted); }
.hp-outs { list-style: none; margin: 0 0 16px; padding: 0; }
.hp-outs li { border-bottom: 1px solid var(--line); }
.hp-out { display: grid; grid-template-columns: minmax(0, 1fr) auto 13px; column-gap: 18px; align-items: center; padding: 13px 8px 13px 0; color: var(--navy); text-decoration: none;
  font-family: var(--hp-serif); font-weight: 700; font-size: 16px; line-height: 1.4; transition: padding-left 220ms var(--ease-quick), background-color 220ms; }
.hp-out .w { font-family: var(--hp-sans); font-weight: 600; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--hp-gold-ink); white-space: nowrap; }
.hp-out:hover { padding-left: 8px; background-color: rgba(212,169,67,.07); }
.hp-out:hover::after { transform: translateX(4px); }
.hp-out:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.hp-out-k:has(+ .hp-outs:not(:has(li:not([hidden])))), .hp-outs:not(:has(li:not([hidden]))) { display: none; }

.hp-none { margin: 40px 0 0; padding: 18px 20px; background: var(--hp-sheet); box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--hp-serif); font-size: 16px; color: var(--hp-muted); }
.hp-secs.is-searching .hp-sec.is-miss { display: none; }

/* ── a person: the last part of the sheet, the letter as a sheet of its own ── */
.hp-talk { padding-bottom: 8px; }
.hp-talk > h2 { margin-top: 64px; }
.hp-p { margin: 10px 0 0; max-width: 64ch; font-family: var(--hp-serif); font-size: 17px; line-height: 1.62; color: var(--ink); }
.hp-warn { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; margin: 16px 0 0; max-width: 64ch; padding: 12px 16px; background: rgba(212,169,67,.12);
  box-shadow: inset 2px 0 0 var(--gold-soft); font-family: var(--hp-serif); font-size: 14.5px; line-height: 1.55; color: var(--hp-gold-ink); }
.hp-warn svg { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--hp-gold-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hp-talk-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); column-gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: 24px; }
.hp-card { position: relative; min-width: 0; padding: clamp(22px, 2.6vw, 36px); background: var(--hp-sheet); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.hp-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--gold-soft); }
.hp-next { padding-top: 6px; }
.hp-next-h { margin: 0; font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hp-gold-ink); }
.hp-steps { list-style: none; counter-reset: s; margin: 14px 0 0; padding: 0; }
.hp-steps li { counter-increment: s; position: relative; padding: 0 0 18px 44px; font-family: var(--hp-serif); font-size: 15px; line-height: 1.55; color: var(--hp-muted); }
.hp-steps li::before { content: counter(s); position: absolute; left: 0; top: -3px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--hp-paper);
  box-shadow: inset 0 0 0 1px var(--navy); font-family: var(--hp-display); font-size: 14px; color: var(--navy); }
.hp-steps li::after { content: ''; position: absolute; left: 14px; top: 29px; bottom: 2px; width: 1px; background: var(--line-2); }
.hp-steps li:last-child { padding-bottom: 0; }
.hp-steps li:last-child::after { display: none; }
.hp-steps b { font-weight: 700; color: var(--navy); }
.hp-next-go { margin-top: 20px; }
.hp-chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.hp-chips legend { padding: 0; font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.hp-chip-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.hp-chip { position: relative; display: block; }
.hp-chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.hp-chip span { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 46px; padding: 10px 14px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--hp-sans); font-size: 14px; line-height: 1.3; color: var(--ink); transition: box-shadow 180ms, background-color 180ms; }
.hp-chip span::before { content: ''; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hp-ring); background: #fff; transition: box-shadow 180ms, background 180ms; }
.hp-chip input:hover + span { box-shadow: inset 0 0 0 1px var(--navy); }
.hp-chip input:checked + span { background: var(--hp-paper); box-shadow: inset 0 0 0 1.5px var(--navy); font-weight: 500; color: var(--navy); }
.hp-chip input:checked + span::before { box-shadow: inset 0 0 0 1.5px var(--navy); background: radial-gradient(circle, var(--navy) 0 4.5px, #fff 5px); }
.hp-chip input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.hp-route { margin: 12px 0 0; font-family: var(--hp-sans); font-size: 13px; line-height: 1.5; color: var(--hp-muted); }
.hp-route b { color: var(--navy); font-weight: 600; }
.hp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.hp-f { margin-top: 16px; }
.hp-row .hp-f { margin-top: 0; }
.hp-f label { display: block; margin-bottom: 7px; font-family: var(--hp-sans); font-size: 13px; font-weight: 500; color: var(--navy); }
.hp-f .opt { font-weight: 400; color: var(--muted); }
.hp-f input, .hp-f textarea { width: 100%; padding: 0 15px; border: 0; border-radius: 0; background: #fff; color: var(--ink); font-size: 15.5px; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 180ms; }
.hp-f input { height: 50px; }
.hp-f textarea { display: block; padding: 14px 15px; min-height: 168px; font-family: var(--hp-serif); font-size: 16px; line-height: 1.6; resize: vertical; }
.hp-f input:hover, .hp-f textarea:hover { box-shadow: inset 0 0 0 1px var(--hp-ring); }
.hp-f input:focus, .hp-f textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 3px rgba(10,22,40,.10); }
.hp-f [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger); }
.hp-card .err { margin: 6px 0 0; font-size: 12.5px; color: var(--danger); }
.hp-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.hp-say { margin: 0; font-size: 13px; line-height: 1.5; color: var(--danger); }
.hp-say:empty { display: none; }
.hp-hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp-hp input, .hp-hp label { display: block; width: 1px; height: 1px; padding: 0; border: 0; }
.hp-sent { text-align: center; padding: 26px 8px 14px; outline: none; }
.hp-sent .seal { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--green); box-shadow: 0 0 0 5px var(--hp-sheet), 0 0 0 6.5px rgba(15,90,79,.4); }
.hp-sent .seal svg { width: 26px; height: 26px; fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hp-sent h3 { margin: 0; font-family: var(--hp-display); font-weight: 400; font-size: 28px; color: var(--navy); }
.hp-sent .ref { margin: 10px 0 0; font-size: 13px; color: var(--hp-muted); }
.hp-sent .ref b { font-size: 16px; color: var(--navy); letter-spacing: .06em; }
.hp-sent p { margin: 12px auto 0; max-width: 46ch; font-family: var(--hp-serif); font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.hp-link { display: inline-flex; margin-top: 18px; padding: 6px 0; border: 0; background: none; cursor: pointer; color: var(--navy); font-family: var(--hp-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(10,22,40,.35); transition: box-shadow 200ms; }
.hp-link:hover { box-shadow: inset 0 -2px 0 currentColor; }
.hp-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* the counterfoil: the desk's true particulars, perforated off the sheet; decoration */
.hp-foil { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 48px calc(-1 * clamp(24px, 4vw, 64px)) 0 calc(-1 * var(--hp-sheet-l)); padding: 16px clamp(24px, 4vw, 64px) 16px var(--hp-sheet-l);
  border-top: 2px dashed var(--line-3); background: repeating-linear-gradient(90deg, rgba(10,22,40,.035) 0 2px, transparent 2px 9px), var(--hp-sheet);
  font-family: var(--hp-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hp-gold-ink); }
.hp-foil span + span::before { content: '\00B7' / ''; margin-right: 22px; color: var(--gold-soft); }

/* ── narrower windows ─────────────────────────────────────────────────── */
@media (max-width: 1240px) { .hp-talk-in { grid-template-columns: minmax(0, 1fr); row-gap: 26px; } }
@media (max-width: 1000px) {
  .hp-wrap { grid-template-columns: minmax(0, 1fr); }
  .hp-wrap > .hp-desk, .hp-wrap > .hp-toc, .hp-wrap > .hp-sheet { grid-column: 1; grid-row: auto; }
  .hp-toc { margin-bottom: 28px; padding: 14px 18px; background: var(--hp-glass); -webkit-backdrop-filter: var(--hp-glass-fx); backdrop-filter: var(--hp-glass-fx); box-shadow: var(--hp-pane); }
  .hp-toc details > summary { cursor: pointer; padding: 4px 0 12px; }
  .hp-toc details:not([open]) > summary { padding-bottom: 4px; border-bottom: 0; }
  .hp-toc details > summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
  .hp-toc details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
}
@media (max-width: 900px) { .hp-head-in { grid-template-columns: minmax(0, 1fr); row-gap: 26px; } }
@media (max-width: 760px) { .hp-grps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .hp-head { padding-top: 44px; padding-bottom: 28px; }
  .hp-ask { padding: 16px 14px 14px; }
  .hp-find { flex-basis: 100%; }
  .hp-who { width: 100%; }
  .hp-who-b { padding: 0 8px; letter-spacing: .1em; }
  .hp-sheet { --hp-num: 0px; --hp-sheet-l: 18px; padding: 22px 18px 0; }
  .hp-sheet::before { display: none; }
  /* the numbers come in from the margin and stand over their headings */
  .hp-n { position: static; display: block; width: auto; margin: 44px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); text-align: left; font-size: 12px; line-height: 1.2; }
  .hp-sec > h2, .hp-talk > h2 { margin-top: 4px; padding-top: 0; border-top: 0; }
  .hp-part { margin-top: 48px; }
  .hp-part + .hp-sec > .hp-n { margin-top: 18px; padding-top: 0; border-top: 0; }
  .hp-part + .hp-sec > h2 { margin-top: 4px; }
  .hp-stub { margin: 0 -6px; padding: 20px 14px 12px; }
  .hp-track { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 -14px; padding: 0 14px 6px; scroll-padding-inline: 14px; }
  .hp-track::-webkit-scrollbar { display: none; }
  .hp-track li { flex: none; width: 88px; scroll-snap-align: start; }
  .hp-q > summary { column-gap: 12px; padding-right: 2px; font-size: 16px; }
  .hp-q .a { padding-right: 0; }
  .hp-q .a p { font-size: 16px; }
  .hp-out { grid-template-columns: minmax(0, 1fr) 13px; row-gap: 4px; }
  .hp-out .w { grid-row: 2; grid-column: 1; }
  .hp-out::after { grid-row: 1 / span 2; grid-column: 2; }
  .hp-chip-row, .hp-row { grid-template-columns: minmax(0, 1fr); }
  .hp-card { margin: 0 -6px; padding: 22px 14px; }
  .hp-send .hp-btn, .hp-now .hp-btn { width: 100%; }
  .hp-foil { margin: 36px -18px 0; padding: 14px 18px; }
}
@media (prefers-reduced-transparency: reduce) {
  .hp-ask, .hp-desk, .hp-toc { background: var(--hp-paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-who::before, .hp-track::after, .hp-stop .dot, .hp-q > summary, .hp-q > summary::after, .hp-out, .hp-grp, .hp-btn, .hp-btn svg, .hp-q .go a::after, .hp-out::after, .hp-desk-go svg, .hp-next-go svg, .hp-toc a { transition: none; }
  .hp-stop:hover .dot, .hp-btn:hover { translate: none; transform: none; }
  .hp-q > summary:hover, .hp-out:hover, .hp-grp:hover { padding-left: 0; }
  .hp-q[open] > summary::after { transform: none; }
}
/* forced colours: what must survive is text, a border or a stroke (Mason 59.8) */
@media (forced-colors: active) {
  .hp-sheet, .hp-desk, .hp-toc, .hp-ask, .hp-card, .hp-now, .hp-none, .hp-warn, .hp-stub { border: 1px solid CanvasText; }
  .hp-toc a[aria-current="true"], .hp-grp[aria-current="true"] { border-left: 3px solid Highlight; }
  .hp-stop .dot, .hp-q > summary::after, .hp-chip span::before { border: 1px solid CanvasText; }
  .hp-stop[aria-current="step"] .dot { border: 2px solid Highlight; }
  .hp-who-b[aria-pressed="true"] { border: 2px solid Highlight; }
  .hp-chip span { border: 1px solid CanvasText; }
  .hp-chip input:checked + span { border: 2px solid Highlight; }
  .hp-q > summary::after { background: none; content: '+'; display: grid; place-items: center; }
  .hp-q[open] > summary::after { content: '\2212'; transform: none; }
  .hp-track::before, .hp-track::after { background: CanvasText; }
  .hp-q .go a::after, .hp-out::after { background: LinkText; }
  .hp-foil { background: none; }
}
/* print: the answers alone, every one open, the addresses shown */
@media print {
  html.hp-page { background: none; } html.hp-page::before { display: none; }
  header.topbar, .footer, .hp-toc, .hp-ask, .hp-stub, .hp-talk-in, .hp-desk-go, .profile-drawer, .profile-overlay, .hp-tour-dock, .back-to-top { display: none !important; }
  .hp-wrap { display: block; padding: 0; }
  .hp-desk, .hp-sheet { box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hp-q > summary::after { display: none; }
  .hp-q:not([open]) .a { display: none; }
}
/* rp133: a source line under an answer (Ordnance Survey's attribution), quieter than the answer */
.hp-q .a p.hp-src { font-family: var(--hp-sans, 'Inter', sans-serif); font-size: 12px; line-height: 1.55; color: var(--muted, #5B6474); }