/* Level — building contractor, 48 Red Hills Road, Kingston.
 *
 * Palette: cool drawing-paper white (#eef1f6) and graphite ink (#12161b), with
 * one accent, a level-bubble teal (#00808f, and #22d3e0 where it sits on the
 * graphite board). The reason: this site's whole argument is that the figure and
 * the date are written down and do not move, so the page has to read like the
 * contract documents a client already trusts — a drawing sheet and a programme,
 * cool and unexcitable, figures set in a monospace so columns of money line up
 * and can be compared at a glance. The accent is spent on exactly one job:
 * marking where a programme has got to today and what has been signed off. No
 * warm colour anywhere, because warmth on a builder's site reads as persuasion,
 * and persuasion is what a client fears when the final invoice arrives.
 *
 * Type: Chivo for headings (a squared grotesque with the flat terminals of
 * stencilled site signage), Public Sans for reading, IBM Plex Mono for every
 * number, week label and stage code.
 *
 * Class prefix: lv-
 */

:root {
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --max: 78rem;
  --shell: min(100% - 2 * var(--gutter), var(--max));

  --paper: #eef1f6;
  --panel: #ffffff;
  --panel-2: #e3e9f0;
  --ink: #12161b;
  --ink-2: #49525c;
  --ink-3: #78828d;
  --rule: #ccd4de;
  --rule-2: #dde3ea;
  --accent: #00808f;
  --accent-ink: #00646f;
  --bright: #22d3e0;
  --dark: #12161b;
  --dark-2: #1b222a;
  --dark-3: #2a333d;

  --sans: "Public Sans", system-ui, -apple-system, sans-serif;
  --display: "Chivo", "Public Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
  --step-4: clamp(2.5rem, 1.6rem + 3.4vw, 4.6rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.62 var(--sans);
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
strong { font-weight: 600; }
em { font-style: italic; }

.lv-shell { width: var(--shell); margin-inline: auto; }
.lv-skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--ink); color: #fff; padding: 0.75rem 1.1rem; font: 600 0.9rem var(--sans);
}
.lv-skip:focus { left: 1rem; top: 1rem; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ─── figures, labels, small parts ─────────────────────────────── */

.lv-fig { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lv-cur { font-family: var(--mono); font-weight: 500; font-size: 0.72em; color: var(--ink-3); letter-spacing: 0.04em; }
.lv-kicker {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent-ink); margin: 0 0 0.9rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.lv-kicker::before { content: ""; width: 1.6rem; height: 2px; background: var(--accent); }
.lv-lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.lv-note { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); line-height: 1.6; }

.lv-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 600 0.98rem var(--sans); text-decoration: none; letter-spacing: -0.01em;
  padding: 0.82rem 1.35rem; border: 1px solid var(--ink); border-radius: 2px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lv-btn:hover { background: var(--ink); color: #fff; }
.lv-btn--ink { background: var(--ink); color: #fff; }
.lv-btn--ink:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.lv-btn--light { border-color: rgba(255,255,255,0.4); color: #fff; }
.lv-btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.lv-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin: 0; }
.lv-link {
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--accent); padding-bottom: 1px; color: var(--ink);
}
.lv-link:hover { color: var(--accent-ink); }

/* ─── masthead ─────────────────────────────────────────────────── */

.lv-top {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.lv-top__in {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.6rem;
}
.lv-mark {
  text-decoration: none; display: grid; gap: 0.1rem; margin-right: auto;
  font-family: var(--display); font-weight: 900; font-size: 1.5rem; letter-spacing: -0.04em;
  line-height: 1;
}
.lv-mark span { display: flex; align-items: center; gap: 0.45rem; }
.lv-mark i {
  width: 1.5rem; height: 0.55rem; border: 1.5px solid var(--ink); border-radius: 1px;
  position: relative; display: inline-block;
}
.lv-mark i::after {
  content: ""; position: absolute; inset: 1.5px auto 1.5px 55%;
  width: 0.34rem; background: var(--accent); border-radius: 1px;
}
.lv-mark small {
  font: 500 0.66rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.lv-nav { display: flex; gap: 1.5rem; }
.lv-nav a {
  text-decoration: none; font: 500 0.95rem var(--sans); color: var(--ink-2);
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
}
.lv-nav a:hover { color: var(--ink); border-color: var(--rule); }
.lv-nav a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.lv-top__cta { padding: 0.65rem 1.1rem; font-size: 0.92rem; }
.lv-nav__cta { display: none; }
.lv-burger {
  display: none; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--rule);
  border-radius: 2px; padding: 0.55rem 0.7rem; cursor: pointer;
  font: 600 0.8rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink);
}
.lv-burger b { display: grid; gap: 3px; }
.lv-burger b i { display: block; width: 16px; height: 2px; background: var(--ink); }

@media (max-width: 900px) {
  /* Closed, the panel must take no space at all: max-height clamps the content
     box only, so padding and a border left a white sliver with the first link
     cut in half under the masthead. */
  .lv-nav {
    position: fixed; inset: 4.6rem 0 auto; display: grid; gap: 0;
    background: var(--panel); border-bottom: 0 solid var(--rule);
    padding: 0 var(--gutter); max-height: 0; overflow: hidden;
    transition: max-height 0.2s ease, padding 0.2s ease;
  }
  .lv-nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule-2); font-size: 1.05rem; }
  .lv-top[data-open] .lv-nav {
    max-height: 24rem; padding: 0.5rem var(--gutter) 1.2rem; border-bottom-width: 1px;
  }
  .lv-nav__cta { display: block; color: var(--accent-ink); font-weight: 600; border-bottom: 0; }
  .lv-burger { display: inline-flex; }
  .lv-top__cta { display: none; }
  .lv-mark small { display: none; }
}

/* ─── bands ────────────────────────────────────────────────────── */

.lv-band { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.lv-band--tight { padding: clamp(2.2rem, 4vw, 3.4rem) 0; }
.lv-band--rule { border-top: 1px solid var(--rule); }
.lv-band--dark { background: var(--dark); color: #fff; }
.lv-band--dark .lv-lead { color: rgba(255,255,255,0.72); }
.lv-band--dark .lv-kicker { color: var(--bright); }
.lv-band--dark .lv-kicker::before { background: var(--bright); }
.lv-band--panel { background: var(--panel); border-block: 1px solid var(--rule); }

.lv-head { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: 2.4rem; }
.lv-head--wide { max-width: 62rem; }
.lv-num {
  font: 600 0.75rem var(--mono); letter-spacing: 0.14em; color: var(--ink-3);
  display: block; margin-bottom: -0.4rem;
}
.lv-band--dark .lv-num { color: rgba(255,255,255,0.5); }

/* ─── hero ─────────────────────────────────────────────────────── */

.lv-hero { padding: clamp(2.5rem, 5vw, 4.5rem) 0 0; }
.lv-hero__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1.05fr 0.95fr; align-items: end; }
.lv-hero h1 { max-width: 20ch; }
.lv-hero h1 b { color: var(--accent-ink); font-weight: 900; }
.lv-hero__lead { margin-top: 1.5rem; max-width: 40ch; }
.lv-hero__cta { margin-top: 2rem; }
.lv-hero__shot { position: relative; align-self: stretch; min-height: 22rem; }
.lv-hero__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--panel-2);
}
.lv-hero__cap {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: color-mix(in srgb, var(--dark) 88%, transparent);
  color: #fff; padding: 0.7rem 0.95rem;
  font: 500 0.76rem/1.45 var(--mono); letter-spacing: 0.01em;
}
.lv-hero__cap b { color: var(--bright); font-weight: 600; }

.lv-promise {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 2px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.lv-promise > div { background: var(--panel); padding: 1.5rem 1.5rem 1.6rem; }
.lv-promise dt {
  font: 600 0.73rem var(--mono); text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--accent-ink); margin-bottom: 0.7rem;
}
.lv-promise dd { margin: 0; }
.lv-promise strong { display: block; font-family: var(--display); font-size: 1.12rem; font-weight: 700; margin-bottom: 0.35rem; }
.lv-promise p { font-size: 0.95rem; color: var(--ink-2); }

@media (max-width: 860px) {
  .lv-hero__in { grid-template-columns: 1fr; align-items: start; }
  .lv-hero__shot { min-height: 15rem; }
  .lv-promise { grid-template-columns: 1fr; }
}

/* ─── the programme board (the device) ─────────────────────────── */

.lv-picker { display: flex; flex-wrap: wrap; gap: 1px; background: var(--dark-3); border: 1px solid var(--dark-3); border-radius: 2px; margin-bottom: 1.6rem; }
.lv-picker button {
  flex: 1 1 14rem; text-align: left; background: var(--dark-2); color: rgba(255,255,255,0.62);
  border: 0; padding: 0.95rem 1.1rem; cursor: pointer; font: 500 0.95rem var(--sans);
  display: grid; gap: 0.25rem; transition: background 0.15s, color 0.15s;
}
.lv-picker button:hover { background: var(--dark-3); color: #fff; }
.lv-picker button b { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.lv-picker button span { font: 500 0.74rem var(--mono); letter-spacing: 0.02em; }
.lv-picker button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.lv-picker button[aria-pressed="true"] span { color: var(--accent-ink); }

.lv-board {
  --name: 17rem;
  background: var(--dark-2); border: 1px solid var(--dark-3); border-radius: 2px;
  color: #fff; overflow: hidden;
}
.lv-board + .lv-board { margin-top: 2rem; }
.lv-board__head {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: start;
  padding: 1.5rem 1.5rem 1.35rem; border-bottom: 1px solid var(--dark-3);
}
.lv-board__head h3 { font-size: 1.4rem; }
.lv-board__head h3 a { text-decoration: none; }
.lv-board__head h3 a:hover { color: var(--bright); }
.lv-board__meta { margin-top: 0.5rem; font: 500 0.78rem/1.7 var(--mono); color: rgba(255,255,255,0.6); }
.lv-board__meta b { color: #fff; font-weight: 600; }
.lv-board__state {
  text-align: right; font-family: var(--mono); font-size: 0.78rem; line-height: 1.7;
  color: rgba(255,255,255,0.6);
}
.lv-board__state strong {
  display: block; font-family: var(--display); font-weight: 900; font-size: 1.6rem;
  color: var(--bright); letter-spacing: -0.02em;
}

.lv-board__grid { position: relative; padding: 1.2rem 1.5rem 1.5rem; }
.lv-board__ruler {
  display: grid; grid-template-columns: var(--name) 1fr; align-items: end;
  font: 500 0.68rem var(--mono); color: rgba(255,255,255,0.4); padding-bottom: 0.5rem;
}
.lv-board__ruler span:first-child { letter-spacing: 0.12em; text-transform: uppercase; }
.lv-board__ticks { display: flex; justify-content: space-between; border-bottom: 1px solid var(--dark-3); padding-bottom: 0.3rem; }
.lv-board__rows { list-style: none; margin: 0; padding: 1.5rem 0 0; display: grid; gap: 0.35rem; position: relative; }
.lv-board__row { display: grid; grid-template-columns: var(--name) 1fr; align-items: center; gap: 0 1rem; }
.lv-board__stage { display: grid; gap: 0.15rem; padding-right: 0.8rem; }
.lv-board__stage b {
  font: 500 0.7rem var(--mono); color: rgba(255,255,255,0.45); letter-spacing: 0.1em;
}
.lv-board__stage span { font-size: 0.93rem; font-weight: 500; line-height: 1.3; }
.lv-board__stage em {
  font-style: normal; font: 500 0.72rem var(--mono); color: rgba(255,255,255,0.5);
}
.lv-board__track { position: relative; height: 2.35rem; background: var(--dark); border-radius: 1px; }
.lv-board__bar {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--from) / var(--weeks) * 100%);
  width: calc(var(--span) / var(--weeks) * 100%);
  background: var(--dark-3); border-radius: 1px;
  display: flex; align-items: center; padding-inline: 0.55rem;
  font: 600 0.72rem var(--mono); color: rgba(255,255,255,0.75); white-space: nowrap;
  border-left: 2px solid var(--dark-3);
}
.is-done .lv-board__bar { background: #47535f; color: #fff; border-left-color: #6d7a86; }
.is-now .lv-board__bar { background: var(--accent); color: #fff; border-left-color: var(--bright); }
.is-next .lv-board__bar { background: var(--dark-3); border-left-color: rgba(255,255,255,0.45); }
.lv-board__flag {
  position: absolute; top: 1.35rem; bottom: 0; width: 2px; background: var(--bright);
  left: calc(var(--name) + 1rem + (100% - var(--name) - 1rem) * var(--at) / var(--weeks));
  z-index: 2; pointer-events: none; list-style: none;
}
.lv-board__flag b {
  position: absolute; top: -1.3rem; left: 0; transform: translateX(-50%);
  background: var(--bright); color: var(--dark); border-radius: 1px;
  font: 600 0.65rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.15rem 0.35rem; white-space: nowrap;
}

.lv-board__pay { border-top: 1px solid var(--dark-3); padding: 1.4rem 1.5rem 1.6rem; }
.lv-board__pay h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--mono); font-weight: 600; color: rgba(255,255,255,0.6); margin-bottom: 0.9rem; }
.lv-pay { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.lv-pay th, .lv-pay td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--dark-3); }
.lv-pay th {
  font: 600 0.68rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
}
.lv-pay td:last-child, .lv-pay th:last-child, .lv-pay td:nth-child(2), .lv-pay th:nth-child(2) { text-align: right; }
.lv-pay tr:last-child td { border-bottom: 0; }
.lv-pay .lv-fig { color: #fff; }
.lv-pay .is-released td { color: rgba(255,255,255,0.55); }
.lv-pay .is-released .lv-fig { color: rgba(255,255,255,0.55); }
.lv-pay .is-due .lv-fig, .lv-pay .is-due td { color: var(--bright); }
.lv-pay tfoot td { border-top: 1px solid var(--dark-3); font-weight: 600; }
.lv-pay small { display: block; margin-top: 0.2rem; font: 500 0.76rem var(--mono); color: rgba(255,255,255,0.45); }
.lv-tag {
  font: 600 0.65rem var(--mono); text-transform: uppercase; letter-spacing: 0.09em;
  border: 1px solid currentColor; border-radius: 1px; padding: 0.1rem 0.35rem; white-space: nowrap;
}

@media (max-width: 860px) {
  .lv-board { --name: 0px; }
  .lv-board__head { grid-template-columns: 1fr; }
  .lv-board__state { text-align: left; }
  .lv-board__grid { padding-inline: 1rem; }
  .lv-board__ruler { grid-template-columns: 1fr; }
  .lv-board__ruler span:first-child { display: none; }
  .lv-board__row { grid-template-columns: 1fr; gap: 0.3rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--dark); }
  .lv-board__stage { padding-right: 0; }
  .lv-board__track { height: 1.9rem; }
  .lv-board__bar { font-size: 0.68rem; }
  /* Stacked, the rows are name-over-bar, so a full-height today line would run
     straight through the stage names. On a phone the marker becomes the rule on
     the stage that is on now, and the header carries the week number. */
  .lv-board__flag { display: none; }
  .lv-board__row.is-now { box-shadow: inset 2px 0 0 var(--bright); padding-left: 0.65rem; }
  .lv-board__pay { padding-inline: 1rem; }
  .lv-pay th:nth-child(2), .lv-pay td:nth-child(2) { display: none; }
}

/* ─── rate card ────────────────────────────────────────────────── */

.lv-rates { border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); }
.lv-rate {
  display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 2rem; align-items: baseline;
  padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--rule-2); text-decoration: none;
}
.lv-rate:last-child { border-bottom: 0; }
.lv-rate:hover { background: var(--paper); }
/* Explicit placement: an item with a definite row and an auto column takes the
   FIRST free column in that row, which put the figure on the left and pushed
   the name across. Every cell here is named. */
.lv-rate__name { grid-area: 1 / 1; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.lv-rate__teaser { grid-area: 2 / 1; font-size: 0.95rem; color: var(--ink-2); }
.lv-rate__weeks { grid-area: 3 / 1; }
.lv-rate__fig { grid-area: 1 / 2 / span 3 / 3; align-self: start; text-align: right; font-size: 1.3rem; }
.lv-rate__fig small { display: block; font: 500 0.7rem var(--mono); color: var(--ink-3); letter-spacing: 0.02em; margin-top: 0.2rem; }
.lv-rate__weeks { font: 500 0.75rem var(--mono); color: var(--ink-3); }

.lv-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.lv-split--even { grid-template-columns: 1fr 1fr; }
/* Grid items default to min-width:auto, which floors their size at their
   content's min-content width (here, a full-size product/job photo) instead
   of the fr track. That holds .lv-article/.lv-split's columns near 736px
   wide no matter how narrow the viewport is, pushing the whole page into
   horizontal overflow. min-width:0 lets the columns actually shrink to the
   track (and to the image's own max-width:100%) below 900px. */
.lv-split > * { min-width: 0; }
@media (max-width: 900px) { .lv-split, .lv-split--even { grid-template-columns: 1fr; } }

.lv-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 2px; padding: 1.5rem; }
.lv-card h3 { font-size: 1.2rem; margin-bottom: 0.7rem; }
.lv-card--dark { background: var(--dark-2); border-color: var(--dark-3); color: #fff; }
.lv-card--dark p { color: rgba(255,255,255,0.72); }

.lv-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lv-ticks li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.7rem; font-size: 0.97rem; }
.lv-ticks li::before {
  content: ""; width: 0.75rem; height: 0.75rem; margin-top: 0.4rem;
  border: 2px solid var(--accent); border-radius: 1px;
}
.lv-ticks--out li::before { border-color: var(--ink-3); background: repeating-linear-gradient(45deg, var(--ink-3) 0 1px, transparent 1px 3px); }

/* ─── stage payment schedule (light) ──────────────────────────── */

.lv-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--rule); }
.lv-table caption { text-align: left; font: 500 0.8rem var(--mono); color: var(--ink-3); padding-bottom: 0.7rem; }
.lv-table th, .lv-table td { padding: 0.78rem 1rem; border-bottom: 1px solid var(--rule-2); text-align: left; vertical-align: top; }
.lv-table thead th {
  font: 600 0.68rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.lv-table tbody tr:last-child td { border-bottom: 0; }
.lv-table .lv-r { text-align: right; }
.lv-table td b { font-family: var(--display); font-weight: 700; }
.lv-table small { display: block; color: var(--ink-3); font-size: 0.85rem; margin-top: 0.2rem; }
.lv-table tfoot td { background: var(--paper); font-weight: 600; border-top: 1px solid var(--rule); }
.lv-scroll { overflow-x: auto; }
/* .lv-scroll already provides horizontal scroll for the 5-column stage-payment
   table, but width:100% + table-layout:auto let the browser shrink the Stage
   and Signed-off-by columns to near one-word-per-line on narrow viewports
   instead of ever triggering that scroll. A min-width keeps every column
   legible and makes the table genuinely overflow so .lv-scroll can do its job. */
.lv-scroll .lv-table { min-width: 700px; }

/* ─── finished jobs, quoted against final ─────────────────────── */

.lv-jobs { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.lv-job {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
  display: grid; overflow: hidden;
}
.lv-job img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-bottom: 1px solid var(--rule); }
.lv-job__in { padding: 1.25rem 1.35rem 1.4rem; display: grid; gap: 0.85rem; }
.lv-job__in h3 { font-size: 1.15rem; }
.lv-job__in h3 a { text-decoration: none; }
.lv-job__in h3 a:hover { color: var(--accent-ink); }
.lv-job__sub { font: 500 0.74rem var(--mono); color: var(--ink-3); letter-spacing: 0.02em; }
.lv-money { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); }
.lv-money > div { background: var(--paper); padding: 0.7rem 0.8rem; }
.lv-money dt { font: 600 0.66rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 0.25rem; }
.lv-money dd { margin: 0; font-family: var(--mono); font-weight: 600; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.lv-money > div:last-child { background: #fff; }
.lv-money .lv-same { color: var(--accent-ink); }
.lv-delta { font: 500 0.78rem var(--mono); color: var(--ink-2); }
.lv-delta b { font-weight: 600; }

/* ─── reports ──────────────────────────────────────────────────── */

.lv-reports { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.lv-report { background: var(--panel); padding: 1.4rem 1.5rem; display: grid; grid-template-columns: 11rem 1fr; gap: 0.6rem 2rem; }
.lv-report__when { font: 500 0.76rem/1.7 var(--mono); color: var(--ink-3); }
.lv-report__when b { display: block; color: var(--accent-ink); font-weight: 600; }
.lv-report h3 { font-size: 1.15rem; margin-bottom: 0.45rem; }
.lv-report h3 a { text-decoration: none; }
.lv-report h3 a:hover { color: var(--accent-ink); }
.lv-report__body { color: var(--ink-2); }
.lv-report__body p { margin-bottom: 0.7rem; }
@media (max-width: 760px) { .lv-report { grid-template-columns: 1fr; } }

/* ─── questions ────────────────────────────────────────────────── */

.lv-qa { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.lv-qa > div { background: var(--panel); padding: 1.35rem 1.5rem; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem 1rem; }
.lv-qa__n { font: 600 0.78rem var(--mono); color: var(--ink-3); padding-top: 0.25rem; }
.lv-qa h3 { font-size: 1.1rem; }
.lv-qa__a { grid-column: 2; color: var(--ink-2); margin: 0; }

/* ─── quotes ───────────────────────────────────────────────────── */

.lv-says { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.lv-say { background: var(--panel); border: 1px solid var(--rule); border-radius: 2px; padding: 1.5rem; display: grid; gap: 1rem; }
.lv-say blockquote { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1.45; }
.lv-say cite { font: 500 0.76rem var(--mono); font-style: normal; color: var(--ink-3); letter-spacing: 0.02em; }
.lv-stars { font-family: var(--mono); font-size: 0.85rem; color: var(--accent-ink); letter-spacing: 0.1em; }

/* ─── the form ─────────────────────────────────────────────────── */

.lv-form { display: grid; gap: 1.3rem; }
.lv-form fieldset { border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); margin: 0; padding: 0 1.35rem 1.35rem; }
.lv-form legend {
  float: left; width: 100%; padding: 1.2rem 0 1rem;
  font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-ink);
}
.lv-form legend + * { clear: both; }
.lv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .lv-two { grid-template-columns: 1fr; } }
.lv-field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.lv-field:last-child { margin-bottom: 0; }
.lv-field label { font: 500 0.85rem var(--sans); color: var(--ink-2); }
.lv-field input, .lv-field textarea, .lv-field select {
  font: 400 1rem var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px; padding: 0.72rem 0.8rem; width: 100%;
}
.lv-field input:focus, .lv-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.lv-field small { font: 500 0.78rem var(--mono); color: var(--ink-3); }
.lv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lv-send { display: grid; gap: 0.8rem; justify-items: start; }
.lv-msg {
  font: 500 0.95rem var(--sans); padding: 0.8rem 1rem; border-radius: 2px; width: 100%;
  background: var(--panel-2); border-left: 3px solid var(--accent);
}
.lv-msg[data-state="err"] { border-left-color: #b3261e; }
.lv-form[data-busy] { opacity: 0.7; }

/* ─── what replaces the form once the enquiry is logged ─────────
   A docket, because that is the document this client is about to receive a
   lot of: figures in the mono, dates in a column, nothing shouting. */
.lv-lodged {
  background: var(--panel); border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  border-radius: 2px; padding: clamp(1.25rem, 3vw, 2rem);
}
.lv-lodged:focus { outline: none; }
.lv-lodged:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lv-lodged h2 { font-size: var(--step-2); margin: 0 0 0.9rem; }
.lv-lodged > p { color: var(--ink-2); }
.lv-lodged__ref { font-size: 0.85rem; color: var(--ink-3); margin: 0 0 1.4rem; }
.lv-lodged__ref b { color: var(--accent-ink); }

.lv-lodged__sheet { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; }
.lv-lodged__sheet caption {
  text-align: left; font: 600 0.72rem var(--mono); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent-ink); padding-bottom: 0.6rem;
}
.lv-lodged__sheet th, .lv-lodged__sheet td {
  text-align: left; vertical-align: top; padding: 0.55rem 0;
  border-top: 1px solid var(--rule-2); overflow-wrap: anywhere;
}
.lv-lodged__sheet th {
  width: 8.5rem; font: 500 0.78rem var(--mono); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em; padding-right: 0.9rem;
}
.lv-lodged__sheet td { font-size: 0.97rem; color: var(--ink); }
.lv-lodged__sheet td.lv-fig { font-size: 0.92rem; }
@media (max-width: 460px) {
  .lv-lodged__sheet th, .lv-lodged__sheet td { display: block; width: auto; padding-right: 0; }
  .lv-lodged__sheet td { border-top: 0; padding-top: 0.15rem; padding-bottom: 0.7rem; }
}

.lv-lodged__told { display: grid; gap: 0.35rem; margin: 0 0 1.6rem; padding: 0.9rem 1rem; background: var(--panel-2); border-radius: 2px; }
.lv-lodged__told b { font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
.lv-lodged__told q { font-size: 0.97rem; color: var(--ink); }

.lv-lodged__prognote { margin: 0 0 0.7rem; }
.lv-lodged__prog { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0; }
.lv-lodged__prog li {
  display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: 0.3rem 1.2rem;
  padding: 0.85rem 0; border-top: 1px solid var(--rule-2);
}
.lv-lodged__prog li:last-child { border-bottom: 1px solid var(--rule-2); }
.lv-lodged__prog b { font-size: 0.85rem; color: var(--accent-ink); }
.lv-lodged__prog span { font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 620px) { .lv-lodged__prog li { grid-template-columns: 1fr; } }

.lv-lodged__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin: 1.5rem 0 0; }
.lv-again {
  font: 500 0.85rem var(--mono); letter-spacing: 0.02em; color: var(--accent-ink);
  background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 2px; cursor: pointer;
}
.lv-again:hover { color: var(--ink); }

/* the enhanced dropdown (shared select.js, our vocabulary) */
.lv-dd { position: relative; }
.lv-dd__button {
  width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 2px; padding: 0.72rem 2.2rem 0.72rem 0.8rem; font: 400 1rem var(--sans);
  color: var(--ink); cursor: pointer; position: relative;
}
.lv-dd__button::after {
  content: ""; position: absolute; right: 0.9rem; top: 50%; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
}
.lv-dd__button.is-placeholder { color: var(--ink-3); }
.lv-dd__list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 3px);
  background: var(--panel); border: 1px solid var(--ink); border-radius: 2px;
  max-height: 20rem; overflow: auto; margin: 0; padding: 0.3rem; list-style: none;
  box-shadow: 0 14px 30px rgba(18, 22, 27, 0.14);
}
.lv-dd__option { padding: 0.6rem 0.7rem; cursor: pointer; border-radius: 1px; }
.lv-dd__text, .lv-dd__value { display: grid; gap: 0.12rem; }
.lv-dd__value .lv-dd__meta { display: none; }
.lv-dd__option.is-active, .lv-dd__option:hover { background: var(--panel-2); }
.lv-dd__option.is-selected { box-shadow: inset 3px 0 0 var(--accent); }
.lv-dd__title { font-weight: 500; }
.lv-dd__meta { font: 500 0.76rem var(--mono); color: var(--ink-3); }

/* ─── article / detail pages ───────────────────────────────────── */

.lv-article { max-width: 46rem; }
.lv-article h1 { margin-bottom: 1.2rem; }
.lv-article__body { font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); }
.lv-article__body p { margin-bottom: 1.1em; }
.lv-article__body strong { color: var(--ink); }
.lv-crumbs { font: 500 0.75rem var(--mono); letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 1.1rem; text-transform: uppercase; }
.lv-crumbs a { text-decoration: none; }
.lv-crumbs a:hover { color: var(--accent-ink); }
.lv-shot { border: 1px solid var(--rule); border-radius: 2px; margin-bottom: 1.8rem; }
.lv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 1.8rem 0; }
.lv-facts > div { background: var(--panel); padding: 0.9rem 1rem; }
.lv-facts dt { font: 600 0.66rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 0.3rem; }
.lv-facts dd { margin: 0; font-family: var(--mono); font-weight: 600; font-size: 1rem; }

/* ─── footer ───────────────────────────────────────────────────── */

.lv-foot { background: var(--dark); color: rgba(255,255,255,0.72); padding: clamp(3rem, 5vw, 4.5rem) 0 2rem; margin-top: 0; }
.lv-foot__in {
  width: var(--shell); margin-inline: auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem;
}
.lv-foot h2 { font-size: 0.75rem; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bright); margin-bottom: 0.9rem; }
.lv-foot__mark { font-family: var(--display); font-weight: 900; font-size: 1.6rem; color: #fff; letter-spacing: -0.03em; margin-bottom: 0.6rem; }
.lv-foot p, .lv-foot dd, .lv-foot dt { font-size: 0.93rem; }
.lv-foot a { text-decoration: none; }
.lv-foot a:hover { color: var(--bright); }
.lv-foot__nav { display: grid; gap: 0.5rem; }
.lv-hours { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; margin: 0; }
.lv-hours dt { color: rgba(255,255,255,0.55); }
.lv-hours dd { margin: 0; font-family: var(--mono); font-size: 0.85rem; }
.lv-foot__fine {
  width: var(--shell); margin: 2.5rem auto 0; padding-top: 1.3rem;
  border-top: 1px solid var(--dark-3); font: 500 0.78rem var(--mono); color: rgba(255,255,255,0.45);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
}
@media (max-width: 860px) { .lv-foot__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lv-foot__in { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}