/* Taskwire — wizard lander styles
   Plain-spoken trade look: square edges, flat colour, hard rules, no shadows.
   One accent (hi-vis yellow) used for selection and emphasis only. */

/* Archivo, self-hosted (SIL Open Font License, see fonts/OFL.txt).
   Variable font: weight 400-900, width 62-125%. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #161616;
  --ink-soft: #55534e;
  --paper: #ffffff;
  --panel: #f2f1ec;
  --line: #d6d3ca;
  --yellow: #ffd21f;
  --yellow-dark: #e6b800;
  --max: 1080px;
  --font: "Archivo", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}

a { color: inherit; }
img, svg { max-width: 100%; }

h1, h2, h3 { letter-spacing: -0.01em; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  padding: 4px 10px 3px;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-link {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.nav-link:hover { text-decoration-color: var(--yellow-dark); }
.nav-link[aria-current="page"] { text-decoration-color: var(--yellow); text-decoration-thickness: 4px; }



/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--yellow); color: var(--ink); }
.btn-primary:disabled { background: var(--line); border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; }

.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #fff; }

.btn-ghost {
  background: transparent;
  border: none;
  padding: 6px 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-ghost:hover { text-decoration-color: var(--yellow-dark); }

.btn:focus-visible, .btn-ghost:focus-visible, .tile:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--yellow-dark);
  outline-offset: 2px;
}

/* ---------- Home hero ---------- */

.hero { padding: 56px 24px 44px; }

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  max-width: 22ch;
  margin: 0 0 22px;
}

.hero p.lede {
  font-size: 1.25rem;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 30px;
}

/* ---------- Wizard frame ---------- */

.wizard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  padding-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.wizard-wrap { padding-top: 8px; padding-bottom: 48px; }

.stepper {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.stepper-item {
  border-top: 5px solid var(--line);
  padding-top: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stepper-item .num { margin-right: 4px; }

.stepper-item.is-done { border-top-color: var(--ink); color: var(--ink); }
.stepper-item.is-active { border-top-color: var(--yellow); color: var(--ink); }

.stepper-item.is-clickable { cursor: pointer; }
.stepper-item.is-clickable:hover { text-decoration: underline; text-underline-offset: 3px; }

.wizard-step { display: none; }
.wizard-step.is-active { display: block; }

.section-head { margin: 0 0 24px; }
.h-aside { font-size: 0.5em; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; white-space: nowrap; vertical-align: middle; margin-left: 6px; }

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 10px;
}
.section-head p { color: var(--ink-soft); margin: 0; font-size: 1.05rem; }

/* ---------- Tiles ---------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.tile {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 0;
  padding: 20px 52px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-family: inherit;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
  width: 100%;
  transition: border-color 0.1s ease, background 0.1s ease;
}

.tile:hover { border-color: var(--ink); }

/* Lucide line icons, inlined at build time; they take the text colour. */
.icon { flex: none; width: 28px; height: 28px; stroke-width: 1.75; }
.tile .icon { margin-bottom: 6px; }

.tile h3 { font-size: 1.1rem; font-weight: 750; line-height: 1.2; margin: 0; }
.tile p.tile-copy { color: var(--ink-soft); font-size: 0.93rem; margin: 0; }

.tile-check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  color: transparent;
}

.tile.is-selected {
  border-color: var(--ink);
  background: var(--yellow);
}
.tile.is-selected p.tile-copy { color: var(--ink); }
.tile.is-selected .tile-check { background: var(--ink); color: var(--yellow); }

/* Compact tiles (step 1): icon and label on one row, no description. */
.tile-grid.compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
/* Only the title keeps clear of the tick box; the description runs the full
   width underneath it, so it wraps onto fewer, more even lines. */
.tile-compact { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 18px 18px; }
.tile-compact .tile-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile-compact h3 { font-size: 1rem; line-height: 1.25; padding-right: 34px; text-wrap: balance; }
.tile-compact p.tile-copy { font-size: 0.88rem; line-height: 1.5; text-wrap: pretty; }
.tile-compact .tile-check { top: 15px; right: 16px; }
.tile.tile-compact .icon { margin: 0; width: 22px; height: 22px; }

.tile-static { text-decoration: none; padding-right: 20px; }
.tile-static:hover { background: var(--panel); }

/* Back / Continue bar. Sticks to the bottom of the screen while the step is
   taller than the viewport, so Continue is always visible without scrolling,
   then settles into place at the end of the step. */
.wizard-nav {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--ink);
  flex-wrap: wrap;
}

.wizard-hint { color: var(--ink-soft); font-size: 0.92rem; font-weight: 600; }
.wizard-nav .btn-primary { margin-left: auto; }

/* ---------- Step 4: enquiry ---------- */

.enquiry-summary,
form.booking-form {
  max-width: 640px;
  border: 2px solid var(--ink);
}

.enquiry-summary {
  background: var(--panel);
  padding: 4px 24px;
  margin: 0 0 20px;
}

/* Contact page: the side box offering the wizard instead. */
.contact-aside { margin: 20px 0 0; padding: 20px 24px 24px; }
.contact-aside h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 8px; }
.contact-aside h3 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 24px 0 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact-aside p { margin: 0 0 14px; color: var(--ink-soft); }
.contact-aside h3 + p { margin: 0; }
.contact-aside p a { color: var(--ink); font-weight: 700; }
.contact-section { padding-bottom: 56px; }

/* Step 4 on wider screens: the form on the left, "your answers" in a column
   on the right. Phones: answers first, then the form. */
@media (min-width: 900px) {
  .send-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .send-layout .enquiry-summary,
  .send-layout form.booking-form { max-width: none; margin: 0; }
  .send-layout .enquiry-summary { grid-column: 2; grid-row: 1; }
  .send-layout form.booking-form { grid-column: 1; grid-row: 1; }
}

.enquiry-row {
  display: flex;
  align-items: center;
  gap: 6px 12px;
  flex-wrap: wrap;
  padding: 14px 0;
}
.enquiry-row + .enquiry-row { border-top: 1px solid var(--line); }

.enquiry-label {
  flex: 0 0 100%;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.enquiry-empty { color: var(--ink-soft); font-size: 0.93rem; }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; flex-grow: 1; }

.chip {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 4px 10px;
  font-size: 0.88rem;
  font-weight: 600;
}

form.booking-form {
  background: var(--paper);
  padding: 28px 24px;
  display: grid;
  gap: 16px;
}

form.booking-form label { font-weight: 700; font-size: 0.92rem; display: block; margin-bottom: 6px; }

form.booking-form input[type="text"],
form.booking-form input[type="email"],
form.booking-form input[type="tel"],
form.booking-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 2px solid var(--line);
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  background: var(--paper);
  color: var(--ink);
}

form.booking-form input:focus, form.booking-form textarea:focus {
  outline: 3px solid var(--yellow);
  outline-offset: 0;
  border-color: var(--ink);
}

form.booking-form textarea { resize: vertical; min-height: 96px; }

form.booking-form .wizard-nav { margin-top: 4px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.small-print { font-size: 0.82rem; color: var(--ink-soft); margin: 0; }

/* ---------- Step 5: confirmation ---------- */

.thanks-panel {
  max-width: 640px;
  border-left: 8px solid var(--yellow);
  padding: 8px 0 8px 28px;
}
.thanks-panel h2 { margin-top: 0; font-size: 1.8rem; font-weight: 800; line-height: 1.15; }
.thanks-panel .btn { margin-top: 12px; }

/* Desktop: thank-you message on the left, "While you wait" links stacked on
   the right. Phones: one column, links underneath. */
.thanks-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.thanks-layout .while-you-wait { margin-top: 8px; }
.thanks-layout .wait-links { grid-template-columns: 1fr; }
@media (max-width: 820px) {
  .thanks-layout { grid-template-columns: 1fr; gap: 0; }
  .thanks-layout .while-you-wait { margin-top: 40px; }
}

/* ---------- How it works ---------- */

.section { padding: 44px 0; }
.section + .section { border-top: 2px solid var(--ink); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 28px;
}

.step { border-top: 3px solid var(--ink); padding-top: 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
.step .num {
  grid-row: span 2;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
}
.step h3 { margin: 0 0 2px; font-size: 1.05rem; font-weight: 750; }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Pricing page ---------- */

.sub-h { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.15; margin: 0 0 12px; }

.calc {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border: 2px solid var(--ink);
}
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }

.calc-inputs { padding: 28px 24px; background: var(--panel); display: grid; gap: 28px; align-content: start; }
.calc-results { padding: 28px 24px; display: grid; gap: 22px; align-content: start; }

.calc-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.calc-hours { display: flex; align-items: center; gap: 16px; }
.calc-hours input[type="range"] { flex: 1; accent-color: var(--ink); height: 28px; }
.calc-hours output { font-size: 1.5rem; font-weight: 800; min-width: 4.6em; text-align: right; }

.solo-note { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; max-width: 760px; color: var(--ink-soft); }
.solo-note .icon { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--ink); }
.solo-note strong { color: var(--ink); }
.solo-link { border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.solo-link:hover { text-decoration-color: var(--yellow-dark); }
.solo-link:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 2px; }
.calc-vat { margin: 4px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.calc-salary { border: none; margin: 0; padding: 0; }
.pay-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-input {
  flex: 1 1 140px; display: flex; align-items: center; gap: 4px;
  border: 2px solid var(--ink); background: var(--paper); padding: 0 12px;
  font-size: 1.4rem; font-weight: 800;
}
.pay-input input {
  width: 100%; min-width: 0; border: none; background: transparent; padding: 8px 0;
  font: inherit; color: var(--ink); font-variant-numeric: tabular-nums;
}
.pay-input input:focus { outline: none; }
.pay-input:focus-within { outline: 3px solid var(--yellow); }
.unit-toggle { display: flex; border: 2px solid var(--ink); }
.unit-toggle label { display: flex; cursor: pointer; }
.unit-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.unit-toggle span { display: flex; align-items: center; padding: 0 14px; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.unit-toggle label + label span { border-left: 2px solid var(--ink); }
.unit-toggle input:checked + span { background: var(--ink); color: #fff; }
.unit-toggle input:focus-visible + span { outline: 3px solid var(--yellow-dark); outline-offset: -3px; }

.bottom-line { margin: 18px 0 0; padding: 10px 14px; border-left: 6px solid var(--ink); background: var(--panel); color: var(--ink-soft); font-size: 0.95rem; }
.bottom-line strong { color: var(--ink); }

.calc-term { border: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.term-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 2px solid var(--line);
  background: var(--paper);
  cursor: pointer;
}
.term-option:hover { border-color: var(--ink); }
.term-option input { accent-color: var(--ink); margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.term-option span { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.4; }
.term-option strong { display: block; color: var(--ink); font-size: 1rem; }
.term-option:has(input:checked) { border-color: var(--ink); background: var(--yellow); }
.term-option:has(input:checked) span { color: var(--ink); }
.term-option:has(input:focus-visible) { outline: 3px solid var(--yellow-dark); outline-offset: 2px; }

.calc-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-figure { border: 2px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.calc-figure.is-ours { border-color: var(--ink); background: var(--yellow); }
.calc-figure-label { font-weight: 700; font-size: 0.9rem; }
.calc-figure-value { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.calc-figure-note { font-size: 0.85rem; color: var(--ink-soft); }
.calc-figure.is-ours .calc-figure-note { color: var(--ink); }
.calc-figure-save { font-size: 1rem; font-weight: 800; margin-top: 4px; }

.calc-build { margin: 0; font-weight: 600; }

/* The headline result: what they save. */
.calc-saving { margin: 0; background: var(--ink); color: #fff; padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.save-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.save-month { font-size: clamp(2.2rem, 4.5vw, 3rem); font-weight: 900; line-height: 1.05; color: var(--yellow); white-space: nowrap; font-variant-numeric: tabular-nums; }
.save-month small { font-size: 1rem; font-weight: 700; color: #fff; }
.save-more { font-size: 1rem; font-weight: 700; }
.calc-build strong { font-weight: 800; }


.table-wrap { overflow-x: auto; }
.calc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.calc-table th, .calc-table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.calc-table td:last-child, .calc-table th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.calc-table th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.calc-table tr.is-total td { font-weight: 800; border-top: 2px solid var(--ink); }
.table-wrap .table-note { font-size: 0.85rem; color: var(--ink-soft); margin: 12px 0 0; }

.chain-section .sub-h { margin-bottom: 18px; }
.chain-section .cost-details { margin-top: 18px; }

.real-cost-lede { color: var(--ink-soft); max-width: 62ch; margin: 0 0 16px; }
.cost-details { max-width: 760px; border-top: 2px solid var(--ink); }
.cost-details summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cost-details summary::-webkit-details-marker { display: none; }
.cost-details summary::before { content: "+"; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border: 2px solid var(--ink); font-weight: 800; line-height: 1; }
.cost-details[open] summary::before { content: "\2212"; background: var(--yellow); }
.cost-details summary:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 2px; }

.note-mark { color: inherit; text-decoration: none; font-size: 0.6em; vertical-align: super; margin-left: 1px; }
.note-mark:hover { text-decoration: underline; }
.price-notes { padding-bottom: 40px; }
.price-notes p { margin: 0; max-width: 90ch; font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 16px; }
.price-notes strong { color: var(--ink); }
.cta-section p { color: var(--ink-soft); margin: 0 0 20px; }

/* Pricing hero: shorter, so the calculator starts in view. */
.hero.hero-tight { padding-bottom: 8px; }
.hero-tight + .calc-section { padding-top: 40px; }

.calc-month { margin: -14px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.calc-figure-value { white-space: nowrap; }
.calc-figure-value small { display: block; margin-top: 2px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.calc-figure-note { font-variant-numeric: tabular-nums; }

/* "In short" chain: wage -> real cost -> our price. */
.chain-section { padding-top: 36px; }
.chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.chain-step {
  position: relative;
  border: 2px solid var(--ink);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chain-step + .chain-step::before {
  content: "\2192";
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  font-size: 1.2rem;
}
.chain-step.is-ours { background: var(--yellow); }
.chain-num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.chain-step.is-ours .chain-num { color: var(--ink); }
.chain-label { font-weight: 700; }
.chain-value { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chain-value small { display: block; font-size: 0.9rem; font-weight: 600; margin-top: 2px; }
.chain-note { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; margin-top: 4px; }
.chain-step.is-ours .chain-note { color: var(--ink); }
.chain-note a { color: var(--ink); font-weight: 700; white-space: nowrap; }
@media (max-width: 820px) {
  .chain { grid-template-columns: 1fr; gap: 24px; }
  .chain-step + .chain-step::before { content: "\2193"; left: 50%; top: -24px; transform: translateX(-50%); }
}
.fair-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 28px; }
.fair-points li { font-size: 0.93rem; line-height: 1.45; color: var(--ink-soft); border-top: 2px solid var(--ink); padding-top: 10px; }
.fair-points li strong { color: var(--ink); }
.fair-close { margin: 24px 0 0; font-size: 1.15rem; font-weight: 800; }

/* "Never clock off": hours a year at work, person vs agents. */
.always-lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 58ch; margin: 0 0 28px; }
.hours-chart { border: 2px solid var(--ink); padding: 22px 24px 14px; margin-bottom: 32px; }
.hours-row { display: grid; grid-template-columns: 10em 1fr 12em; align-items: center; gap: 14px; margin-bottom: 12px; }
.hours-name { font-weight: 700; }
.hours-track { height: 30px; background: var(--panel); }
.hours-bar { height: 100%; }
.hours-person { background: var(--ink-soft); }
.hours-agents { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.hours-value { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.hours-value small { display: block; font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); }
@media (max-width: 640px) {
  .hours-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .hours-track { grid-column: 1 / -1; grid-row: 2; }
  .hours-value { text-align: right; }
}

.always-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px 28px;
}
.always-points li { display: flex; gap: 14px; align-items: flex-start; border-top: 2px solid var(--ink); padding-top: 16px; }
.always-points .icon { width: 26px; height: 26px; flex: none; }
.always-points h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.25; }
.always-points p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.5; }

/* Pricing sections fade up as they come into view (see initReveal in
   pricing.js). Only applies once JS has flagged the page. */
.js-reveal [data-rail] { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js-reveal [data-rail].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-rail] { transform: none; transition: opacity 0.2s linear; }
}

/* Vertical progress rail (pricing page). A track that fills as you scroll,
   with one marker per section; labels show on wide screens or on hover. */
.progress-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  height: min(56vh, 400px);
  z-index: 30;
}
.rail-track { position: absolute; right: 5px; top: 0; bottom: 0; width: 3px; background: var(--line); }
.rail-fill { width: 100%; height: 0; background: var(--ink); }
.rail-links {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.rail-links a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 0;
}
.rail-dot { width: 13px; height: 13px; border: 2px solid var(--ink); background: var(--paper); flex: none; transition: background 0.15s ease, transform 0.15s ease; }
.rail-links a.is-passed .rail-dot { background: var(--ink); }
.rail-links a.is-current { color: var(--ink); }
.rail-links a.is-current .rail-dot { background: var(--yellow); transform: scale(1.25); }
.rail-links a:hover .rail-dot, .rail-links a:focus-visible .rail-dot { background: var(--yellow); }
.rail-links a:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 2px; }
.rail-label { white-space: nowrap; background: var(--paper); padding: 2px 6px; }

/* Labels need the side gutter; below that, show them only while hovering. */
@media (max-width: 1399px) {
  .rail-label { display: none; }
  .progress-rail:hover .rail-label, .progress-rail:focus-within .rail-label { display: inline; box-shadow: 0 0 0 2px var(--ink); }
}

/* Phones: no room for markers, so just a thin bar down the right-hand edge. */
@media (max-width: 700px) {
  .progress-rail { top: 0; bottom: 0; right: 0; height: auto; transform: none; width: 4px; }
  .rail-track { right: 0; width: 4px; }
  .rail-links { display: none; }
}

/* ---------- "Is it safe?" page ---------- */

.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding-bottom: 12px; }
.trust-col { border: 2px solid var(--ink); padding: 22px 24px; }
.trust-col:first-child { background: var(--yellow); }
.trust-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.trust-head .icon { width: 30px; height: 30px; flex: none; }
.trust-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; }
.trust-col ul { list-style: none; margin: 0; padding: 0; }
.trust-col li { padding: 10px 0; border-top: 1px solid rgba(22, 22, 22, 0.2); color: var(--ink-soft); }
.trust-col:first-child li { color: var(--ink); }
.trust-col li strong { display: block; color: var(--ink); }

/* ---------- Footer ---------- */

footer.site {
  border-top: 2px solid var(--ink);
  padding: 28px 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
footer.site .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
footer.site a { color: var(--ink); font-weight: 700; }
.footer-links { display: flex; gap: 20px; }
.footer-legal { line-height: 1.5; }

.small-print a { color: var(--ink); }

/* ---------- Privacy notice ---------- */

.prose { padding-top: 56px; padding-bottom: 64px; }
.prose > * { max-width: 720px; }
.prose h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.1; margin: 0 0 8px; }
.prose-meta { color: var(--ink-soft); margin: 0 0 36px; }
.prose h2 { font-size: 1.25rem; font-weight: 800; margin: 36px 0 10px; padding-top: 16px; border-top: 2px solid var(--ink); }
.prose p, .prose li { color: var(--ink); max-width: 66ch; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 4px; }
.prose mark { background: var(--yellow); padding: 0 4px; }

@media (max-width: 640px) {
  header.site .wrap { height: auto; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; row-gap: 12px; }
  nav.main-nav { gap: 14px; flex-wrap: wrap; }
  header.site .btn { padding: 10px 14px; }
  .stepper-item { font-size: 0.7rem; letter-spacing: 0.03em; }
  .hero { padding-top: 44px; }
  .wizard-nav { gap: 8px 12px; padding-top: 10px; }
  .wizard-hint { order: -1; flex-basis: 100%; text-align: center; font-size: 0.82rem; }
}

.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.hero-facts {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 28px;
}
.facts-note { margin-top: 18px; font-size: 0.85rem; color: var(--ink-soft); }
.facts-note > p { margin: 0 0 6px; }
.facts-note summary { cursor: pointer; display: inline-block; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.facts-note details[open] summary { margin-bottom: 6px; }
.facts-note details p { margin: 0; max-width: 90ch; line-height: 1.55; }
.facts-note a { color: var(--ink); }
.hero-facts li { border-top: 8px solid var(--yellow); padding-top: 16px; font-size: 1.25rem; font-weight: 600; }
.hero-facts strong { display: block; font-size: clamp(2.8rem, 5vw, 3.9rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin-bottom: 6px; white-space: nowrap; }
.hero-facts .note-mark { font-size: 0.7em; }
.tile-static.tile-compact { padding-right: 18px; }
.tile-static.tile-compact h3 { padding-right: 0; }

/* Home: services band. */
.plate-section { background: var(--panel); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.plate-section .section-head h2 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.plate-section .tile { border-color: var(--ink); padding: 20px 20px 22px; }
.plate-section .tile:hover { background: var(--yellow); }
.plate-section .tile .icon { width: 28px; height: 28px; }
.plate-section .tile h3 { font-size: 1.15rem; }
.plate-section .tile p.tile-copy { color: var(--ink-soft); }
.plate-section + .section { border-top: none; }

/* Home: floating "Start here" bar, shown once you've scrolled past the services. */
.start-float {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  width: min(1032px, calc(100% - 32px)); transform: translate(-50%, calc(100% + 40px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  background: var(--yellow); border: 2px solid var(--ink); padding: 12px 12px 12px 20px;
  transition: transform 0.25s ease;
}
.start-float.is-visible { transform: translate(-50%, 0); }
.start-float p { margin: 0; font-size: 1.05rem; }
.start-float strong { font-size: 1.2rem; }
@media (max-width: 560px) { .start-float span { display: none; } }
@media (prefers-reduced-motion: reduce) { .start-float { transition: none; } }
body:has(#start-float) footer.site { padding-bottom: 100px; }

/* Wizard thank-you: where to go next. */
.while-you-wait { margin-top: 40px; }
.while-you-wait > h3 { margin: 0 0 12px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.wait-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.wait-links .tile { border-color: var(--ink); }
.wait-links .tile:hover { background: var(--yellow); }

/* Pricing calculator: first year, split into agents / support / build. */
.split-chart { margin: 0; }
.split-row { display: grid; grid-template-columns: 7.5em 1fr 7.5em; align-items: center; gap: 12px; margin-bottom: 8px; }
.split-name { font-size: 0.88rem; font-weight: 600; }
.split-group { display: flex; justify-content: space-between; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 800; }
.split-group .split-name { font-weight: 800; font-size: 0.95rem; }
.split-group .split-value { font-weight: 800; }
.split-group.is-once { margin-top: 18px; border-top: 2px dashed var(--ink); }
.split-row.is-part .split-name { padding-left: 14px; font-weight: 500; color: var(--ink-soft); }
.split-track { display: flex; height: 24px; }
.split-bar { height: 100%; transition: width 0.2s ease; }
.split-bar + .split-bar { margin-left: 2px; }
.split-hire { background: var(--ink-soft); }
.split-build { background: repeating-linear-gradient(45deg, var(--ink) 0 2px, var(--yellow) 2px 6px); box-shadow: inset 0 0 0 2px var(--ink); }
.split-agents { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.split-support { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.split-value { font-size: 0.9rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .split-row { grid-template-columns: 1fr auto; row-gap: 4px; margin-bottom: 12px; }
  .split-track { grid-column: 1 / -1; grid-row: 2; }
}

/* Pricing: "What you pay" comparison. Rows are the three parts, columns the plans. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pay-table { width: 100%; min-width: 620px; border-collapse: collapse; border: 2px solid var(--ink); }
.pay-table th, .pay-table td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.pay-table thead th { font-size: 1.15rem; font-weight: 800; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.pay-table tbody th { width: 34%; font-weight: 800; font-size: 1.05rem; }
.pay-table tbody th small, .pay-table td small { display: block; font-weight: 500; font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }
.pay-table .is-best { background: var(--yellow); }
.pay-table td.is-best small { color: var(--ink); }
.pay-badge { display: block; width: max-content; background: var(--ink); color: var(--yellow); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; margin-bottom: 6px; }
.pay-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--ink); color: #fff; font-size: 0.8rem; margin-right: 6px; vertical-align: 2px; }
.pay-big { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.pay-tier { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.pay-tier em { font-style: normal; color: var(--ink-soft); font-size: 0.85rem; }
.is-best .pay-tier em { color: var(--ink); }
.pay-tier strong { font-variant-numeric: tabular-nums; }
.pay-terms th { font-size: 0.95rem !important; font-weight: 700 !important; }
.pay-terms td { font-size: 0.95rem; }
.pay-compare td { font-weight: 800; }
.pay-note { margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.pay-note a { color: var(--ink); }
@media (max-width: 640px) {
  .pay-table { min-width: 0; }
  .pay-table tr { display: grid; grid-template-columns: 1fr 1fr; }
  .pay-table thead th:first-child { display: none; }
  .pay-table tbody th[scope="row"] { grid-column: 1 / -1; width: auto; border-bottom: none; padding-bottom: 4px; }
  .pay-table th, .pay-table td { padding: 12px 12px; }
  .pay-table thead th { font-size: 1rem; }
  .pay-big { font-size: 1.3rem; }
  .pay-tier { flex-direction: column; gap: 0; padding: 3px 0; }
}

/* ---------- Compact pass ---------- */

/* Home services: five across on a laptop, so ten tiles make two full rows. */
.plate-section .tile-grid.full { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 10px; }
.plate-section .tile { padding: 16px; gap: 10px; }
.plate-section .tile .icon { width: 24px; height: 24px; }
.plate-section .tile h3 { font-size: 1rem; }
.plate-section .tile p.tile-copy { font-size: 0.85rem; }
@media (min-width: 900px) { .plate-section .tile-compact { flex-direction: column; } }

.hours-chart { padding: 16px 20px 8px; margin-bottom: 24px; }
.always-lede { margin-bottom: 18px; }
.chain-section { padding-top: 24px; }

@media (max-width: 640px) {
  .section { padding: 32px 0; }
  .hero { padding: 32px 24px 28px; }
  .section-head { margin-bottom: 16px; }

  /* Home stats: side by side, smaller. */
  .hero-facts { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
  .hero-facts li { font-size: 0.85rem; border-top-width: 5px; padding-top: 10px; }
  .hero-facts strong { font-size: 1.7rem; white-space: normal; }

  /* Pricing: the three numbers side by side, notes hidden. */
  .chain { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .chain-step { padding: 10px; }
  .chain-step + .chain-step::before { display: none; }
  .chain-num, .chain-note { display: none; }
  .chain-label { font-size: 0.78rem; line-height: 1.25; }
  .chain-value { font-size: 1.35rem; }
  .chain-value small { font-size: 0.7rem; }
  .chain-value .note-mark { display: none; }

  .always-points { gap: 14px; }
  .always-points li { padding-top: 10px; }
}
@media (max-width: 640px) {
  /* The two-row header would take ~15% of a phone screen if it stuck; let it scroll away. */
  header.site { position: static; }
}
.fair-bespoke { margin: 20px 0 0; color: var(--ink-soft); }

/* Home hero: headline beside an example agent activity feed. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px 40px; align-items: center; }
.hero-grid .lede { margin-bottom: 0; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.agent-feed { background: var(--ink); color: #fff; border: 2px solid var(--ink); font-variant-numeric: tabular-nums; }
.feed-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.feed-list { list-style: none; margin: 0; padding: 4px 16px; height: 240px; overflow-y: auto; scrollbar-width: none; }
.feed-list::-webkit-scrollbar { display: none; }
.feed-list { -webkit-mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 22px), transparent); }
.feed-list li { display: grid; grid-template-columns: 3.4em 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.92rem; animation: feed-in 0.35s ease; }
.feed-list li:last-child { border-bottom: none; }
.feed-time { color: var(--yellow); font-weight: 700; }
.feed-task { color: rgba(255, 255, 255, 0.92); }
.feed-status { color: var(--yellow); font-weight: 900; text-align: right; }
.feed-list li.is-working .feed-task::after { content: ""; display: inline-block; width: 8px; height: 1em; margin-left: 6px; vertical-align: -2px; background: var(--yellow); animation: feed-caret 0.8s steps(1) infinite; }
.feed-foot { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }
.feed-foot strong { color: var(--yellow); font-size: 1rem; }
@keyframes feed-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes feed-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feed-list li { animation: none; } .feed-list li.is-working .feed-task::after { animation: none; } }
.feed-ok, .feed-flag { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; white-space: nowrap; }
.feed-ok { border: 1px solid rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.85); }
.feed-flag { background: var(--yellow); color: var(--ink); }
.feed-to { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; white-space: nowrap; border: 1px solid var(--yellow); color: var(--yellow); }


/* Booking form: spam trap (hidden from people) and send error */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: #b42318; font-weight: 600; margin: 0; }
.turnstile:empty { display: none; }
.form-error a { color: inherit; }

/* Smallest phones: keep Pricing, AI Safety, Contact and the button on one row. */
@media (max-width: 380px) {
  nav.main-nav { gap: 10px; font-size: 0.9rem; }
  header.site .btn { padding: 9px 10px; }
}

/* "or send us a message" under a call-to-action button */
.cta-section .cta-alt, .cta-alt { margin: 14px 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.cta-alt a { color: var(--ink); font-weight: 700; }

/* Enquiry forms: the marketing opt-out tick box */
form.booking-form label.optout { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); margin: 0; cursor: pointer; }
form.booking-form label.optout input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }