/* ==========================================================================
   WiltshireTech — demos.css
   Styles for the "See what I can build" section. Loaded only on
   business.html so the other four pages stay light.
   Every colour, font and space value comes from the tokens in site.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared demo furniture
   -------------------------------------------------------------------------- */
.demo-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3rem var(--sp-3);
  background: var(--sand-100);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sand-800);
}
.demo-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sand-500);
}

.demo-note {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   2. Featured demo — description above a full-width preview

   The description used to sit in a side column, which left the preview about
   660px wide. The demo site's desktop breakpoint is 1120px, so the wider the
   frame the less the preview has to be scaled down to show a true desktop
   layout — hence description above, preview across the full container.
   -------------------------------------------------------------------------- */
.demo-featured { display: grid; gap: var(--sp-6); align-items: start; }
.demo-featured__stage { min-width: 0; }

.demo-featured__body h3 { font-size: var(--step-3); margin: var(--sp-4) 0 var(--sp-3); }
.demo-featured__body > p { color: var(--ink-soft); max-width: 68ch; }

/* A single wrapping row rather than a stacked list, so the description block
   stays short and the preview starts high on the screen. */
.demo-featured__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--step--1);
}
.demo-featured__list li {
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
}
.demo-featured__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
}

/* --------------------------------------------------------------------------
   3. Device toggle
   -------------------------------------------------------------------------- */
.device-toggle {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  margin-bottom: var(--sp-4);
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.device-toggle button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.device-toggle button:hover { color: var(--green-800); }
.device-toggle button[aria-pressed="true"] {
  background: var(--white);
  color: var(--green-800);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   4. Website preview

   One <iframe> onto the real standalone site in demos/heating-plumbing/.
   Desktop and Mobile are the same document at two viewport widths: switching
   only changes the chrome and the iframe's width, so the demo site's own
   media queries do the reflowing and the frame never reloads.

   Desktop renders the site at a fixed 1200px logical width — comfortably past
   its 1120px desktop breakpoint — then scales the result down to fit. Mobile
   sets no scale at all: the iframe really is ~390px wide, so the mobile
   layout is genuine rather than a shrunken desktop.
   -------------------------------------------------------------------------- */
.demo-stage { position: relative; }

.preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.device-toggle { margin-bottom: 0; }

.preview-open {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green-800);
  text-decoration: none;
  white-space: nowrap;
}
.preview-open:hover { border-color: var(--green-600); background: var(--green-50); color: var(--green-900); }

/* --- The frame ---------------------------------------------------------- */
.preview {
  --preview-h: 620px;
  --frame-w: 1200px;
  --scale: 1;

  position: relative;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: max-width 0.34s ease, padding 0.34s ease,
              background-color 0.34s ease, border-radius 0.34s ease;
}

.preview__chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: 0.55rem var(--sp-4);
  background: var(--chalk);
  border-bottom: 1px solid var(--line);
}
.browser-dots { display: flex; gap: 6px; flex-shrink: 0; }
.browser-dots i { width: 10px; height: 10px; border-radius: 50%; background: #CFD5CF; }
.browser-url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 0.28rem var(--sp-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-url svg { flex-shrink: 0; color: #7FA894; }

.preview__notch {
  display: none;
  width: 74px;
  height: 5px;
  margin: 0 auto 9px;
  background: #3D4A47;
  border-radius: 99px;
}

.preview__screen { position: relative; background: var(--white); overflow: hidden; }

.preview__scaler { height: var(--preview-h); overflow: hidden; }

.preview__frame {
  display: block;
  border: 0;
  width: var(--frame-w);
  height: calc(var(--preview-h) / var(--scale));
  transform: scale(var(--scale));
  transform-origin: 0 0;
  background: var(--white);
}

/* --- Mobile view: a real ~390px viewport, never a scaled desktop --------- */
.demo-stage[data-view="mobile"] .preview {
  --preview-h: 600px;
  --frame-w: 100%;
  --scale: 1;
  max-width: 410px;
  padding: 11px 10px 13px;
  background: #1B2523;
  border-color: #1B2523;
  border-radius: 34px;
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.demo-stage[data-view="mobile"] .preview__chrome { display: none; }
.demo-stage[data-view="mobile"] .preview__notch { display: block; }
.demo-stage[data-view="mobile"] .preview__screen { border-radius: 24px; }

/* --- SEO view ----------------------------------------------------------- */
.demo-stage__seo { display: none; animation: stageIn 0.32s ease both; }
.demo-stage[data-view="seo"] .demo-stage__seo { display: block; }
.demo-stage[data-view="seo"] .preview,
.demo-stage[data-view="seo"] .demo-stage__hint { display: none; }

@keyframes stageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.demo-stage__hint {
  margin: var(--sp-3) 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-align: center;
}

/* --- Loading / failure state -------------------------------------------- */
.preview__state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5);
  background: var(--chalk);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}
.preview__state[hidden] { display: none; }

/* On a phone a 1200px-wide desktop render is unreadable, so that option is
   withdrawn rather than offered uselessly. "Open full website" still is. */
@media (max-width: 899px) {
  .device-toggle button[data-view="desktop"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .preview { transition: none; }
  .demo-stage__seo { animation: none; }
}

/* --------------------------------------------------------------------------
   6. Secondary demo cards
   -------------------------------------------------------------------------- */
.demo-pair { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 1024px) { .demo-pair { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.demo-pair > * { min-width: 0; }

/* The last step of the quote walkthrough is entirely about the dashboard: the
   customer's side of the story finished several steps earlier. Because the two
   cards are grid siblings they stretch to the same height, so what was left on
   the left was not empty page but a tall blank white card — a third of the
   screen of dead panel beside the thing being talked about. For that step only,
   the spent card steps aside and the dashboard takes the middle. The width
   barely changes (a little over 8%), which keeps the walkthrough's targets
   where the cursor expects to find them. */
@media (min-width: 1024px) {
  body.tour-dash-focus .demo-pair {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  body.tour-dash-focus .demo-pair > * { width: 100%; max-width: 34rem; }
  body.tour-dash-focus .demo-pair > :first-child { display: none; }
}

.demo-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) { .demo-card { padding: var(--sp-6); } }

/* The prospect concept sits on its own below the pair, so it has to supply the
   gap the pair's grid was providing. Its body is copy and one link rather than
   an interactive panel, so it also holds a comfortable measure. */
.demo-card--slim { margin-top: var(--sp-6); }
.demo-card--slim > p { max-width: 68ch; }
.demo-card--slim .demo-label { align-self: start; }

.demo-card h3 { font-size: var(--step-2); margin: var(--sp-4) 0 var(--sp-3); }
.demo-card > p { color: var(--ink-soft); font-size: var(--step--1); }

.demo-card__panel {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4);
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  container-type: inline-size;
}

.demo-card__foot { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   7. Booking demo
   -------------------------------------------------------------------------- */
.bk__steps {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: 0;
  list-style: none;
}
.bk__steps li {
  flex: 1;
  margin: 0;
  height: 5px;
  border-radius: 99px;
  background: #D5DCD8;
  transition: background-color 0.3s ease;
}
.bk__steps li[data-done="true"] { background: var(--green-600); }

.bk__stepname {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
}

.bk__panel > h4 { font-size: var(--step-1); margin-bottom: var(--sp-4); }
.bk__panel[hidden] { display: none; }

.bk__options { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
@container (min-width: 380px) { .bk__options--grid { grid-template-columns: 1fr 1fr; } }

.bk__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 2px solid #C3CBC7;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.bk__opt small { font-weight: 400; font-size: 0.875rem; color: var(--ink-soft); }
.bk__opt:hover { border-color: var(--green-600); background: var(--green-50); }
.bk__opt[aria-pressed="true"] {
  border-color: var(--green-700);
  background: var(--green-50);
}

.bk__times { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@container (min-width: 380px) { .bk__times { grid-template-columns: repeat(4, 1fr); } }
.bk__times .bk__opt { align-items: center; text-align: center; }

.bk__field { margin-bottom: var(--sp-4); }
.bk__field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green-900);
}
.bk__field input,
.bk__field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--white);
  border: 2px solid #C3CBC7;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.bk__field input:hover,
.bk__field textarea:hover { border-color: var(--green-600); }
.bk__field textarea { min-height: 5.5rem; line-height: 1.5; resize: vertical; }

.bk__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.bk__actions .btn { flex: 1 1 auto; min-height: 48px; padding-inline: var(--sp-4); }

.bk__summary {
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}
.bk__summary li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.bk__summary li:last-child { border-bottom: 0; }
.bk__summary dfn { font-style: normal; color: var(--ink-soft); }
.bk__summary b { text-align: right; }

.bk__done {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-800);
}

/* --------------------------------------------------------------------------
   8. Dashboard demo
   -------------------------------------------------------------------------- */
.dash__tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
  padding: var(--sp-1);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.dash__tabs button {
  flex: 1;
  min-height: 44px;
  padding: var(--sp-2);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.dash__tabs button:hover { color: var(--green-800); }
.dash__tabs button[aria-selected="true"] { background: var(--green-700); color: var(--white); }

.dash__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.dash__stat {
  padding: var(--sp-3) var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.dash__stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--green-800);
  line-height: 1.1;
}
.dash__stat span { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); overflow-wrap: break-word; }

.dash__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.dash__filters button {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.dash__filters button:hover { border-color: var(--green-600); color: var(--green-800); }
.dash__filters button[aria-pressed="true"] {
  background: var(--green-700);
  border-color: var(--green-700);
  color: var(--white);
}

.dash__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }

.dash__row {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  animation: dashIn 0.28s ease both;
}
.dash__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* Mid-width panels: job details run on one line, status and action beneath.
   Wide panels: everything on a single row. Decorative separators use empty
   pseudo-element content so screen readers don't announce them. */
@container (min-width: 340px) {
  .dash__row {
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: var(--sp-3);
    column-gap: var(--sp-3);
  }
  .dash__main {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 0;
  }
  .dash__what::before,
  .dash__when::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 8px 3px;
    border-radius: 50%;
    background: #9AA6A2;
    vertical-align: middle;
  }
}

@container (min-width: 560px) {
  .dash__row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 0; }
  .dash__main { grid-column: auto; }
}

@keyframes dashIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.dash__who { font-weight: 700; font-size: 0.9375rem; }
.dash__what { font-size: 0.875rem; color: var(--ink-soft); }
.dash__when { font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

.dash__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  justify-self: start;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dash__status[data-status="Scheduled"]   { background: var(--green-100); color: var(--green-800); }
.dash__status[data-status="In progress"] { background: var(--sand-100); color: var(--sand-800); }
.dash__status[data-status="Quote sent"]  { background: #E2E8F3; color: #37507E; }
.dash__status[data-status="Complete"]    { background: #DCEAE4; color: #14544A; }

.dash__act {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green-800);
  cursor: pointer;
  white-space: nowrap;
  justify-self: start;
}
.dash__act:hover { border-color: var(--green-600); background: var(--green-50); }
.dash__act[disabled] { opacity: 0.45; cursor: default; }
.dash__act[disabled]:hover { border-color: var(--line); background: var(--white); }

.dash__add {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
@container (min-width: 440px) { .dash__add { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.dash__add label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green-900);
}
.dash__add input {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--white);
  border: 2px solid #C3CBC7;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}
.dash__add button { min-height: 44px; }

.dash__empty {
  padding: var(--sp-5);
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.dash__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   9. Final CTA
   -------------------------------------------------------------------------- */
.demo-cta {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-lg);
}
@media (min-width: 800px) {
  .demo-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding: var(--sp-7);
  }
}
.demo-cta h3 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.demo-cta p { color: var(--ink-soft); margin-bottom: 0; max-width: 52ch; }
.demo-cta .btn { margin-top: var(--sp-5); flex-shrink: 0; }
@media (min-width: 800px) { .demo-cta .btn { margin-top: 0; } }

/* --------------------------------------------------------------------------
   10. Motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dash__row { animation: none; }
}

/* ==========================================================================
   PART TWO — deeper demos
   Added for the booking handover, the job/customer/quote drawer, toasts,
   the in-preview website navigation and the SEO view.
   Same tokens as everything else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. Toasts
   -------------------------------------------------------------------------- */
.toasts {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 300;
  display: grid;
  gap: var(--sp-2);
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  padding: var(--sp-3) var(--sp-4);
  background: var(--green-900);
  color: #EAF2EE;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  animation: toastIn 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.toast--good { background: var(--green-700); }
.toast.is-going { animation: toastOut 0.3s ease both; }

@keyframes toastIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------------------
   12. Small button variant used inside the demos
   -------------------------------------------------------------------------- */
.btn--sm {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   13. Expanded ("full view") demo cards
   -------------------------------------------------------------------------- */
.demo-card__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-4);
}
.demo-card__tools > p { flex: 1 1 14rem; }
.demo-card__tools .btn { flex-shrink: 0; }

.demo-expand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green-800);
  cursor: pointer;
}
.demo-expand:hover { border-color: var(--green-600); background: var(--green-50); }

body.has-expanded-demo { overflow: hidden; }

.demo-card.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 250;
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  padding: var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: none;
}
@media (min-width: 720px) {
  .demo-card.is-expanded { padding-block: var(--sp-7); }
}
/* Constrain the measure with padding, not auto margins: an auto inline
   margin on a flex child stops it stretching and it collapses to content. */
.demo-card.is-expanded {
  padding-inline: max(var(--sp-5), calc((100% - 1000px) / 2));
}
.demo-card.is-expanded .demo-card__tools { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   14. Booking — richer options
   -------------------------------------------------------------------------- */
.bk__layout { display: grid; gap: var(--sp-4); }
@container (min-width: 620px) {
  .bk__layout { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--sp-5); align-items: start; }
}

.bk__aside {
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bk__aside[hidden] { display: none; }
.bk__aside-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
}
.bk__aside-empty { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.bk__aside-list { margin: 0; display: grid; gap: var(--sp-2); font-size: 0.875rem; }
.bk__aside-list dt { color: var(--ink-soft); }
.bk__aside-list dd {
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: var(--green-900);
}
.bk__aside-list dd:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.bk__opt--service {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.bk__opt-main { display: grid; gap: 2px; min-width: 0; }
.bk__opt-name { font-weight: 700; }
.bk__opt-meta { display: grid; gap: 2px; text-align: right; flex-shrink: 0; }
.bk__price {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--green-800);
}

.bk__dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
@container (min-width: 420px) { .bk__dates { grid-template-columns: repeat(5, 1fr); } }

.bk__opt--date {
  align-items: center;
  gap: 0;
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
}
.bk__date-day { font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); }
.bk__date-num {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--green-900);
}
.bk__date-mon { font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); }
.bk__opt--date small { margin-top: 2px; font-size: 0.8125rem; color: var(--green-700); font-weight: 600; }

.bk__times { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@container (min-width: 380px) { .bk__times { grid-template-columns: repeat(4, 1fr); } }
.bk__opt--time { align-items: center; text-align: center; gap: 0; }
.bk__opt--time small { font-size: 0.8125rem; color: var(--green-700); font-weight: 600; }
.bk__opt--time[disabled] {
  background: var(--chalk);
  border-color: var(--line);
  color: #97A29E;
  cursor: not-allowed;
  text-decoration: line-through;
}
.bk__opt--time[disabled] small { color: #97A29E; text-decoration: none; }
.bk__opt--time[disabled]:hover { border-color: var(--line); background: var(--chalk); }

/* --------------------------------------------------------------------------
   15. Booking — confirmation and handover
   -------------------------------------------------------------------------- */
.bk__ref {
  display: inline-block;
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--green-50);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--green-800);
}

.bk__handover {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--green-900);
  border-radius: var(--radius);
  color: #D5E4DE;
  animation: hoIn 0.4s ease both;
}
.bk__handover[hidden] { display: none; }
@keyframes hoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bk__handover h5 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8FC3B0;
}
.bk__handover h4 {
  margin: 0 0 var(--sp-4);
  font-size: var(--step-1);
  color: var(--white);
}

.bk__ho-card {
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
}
.bk__ho-card dl { display: grid; gap: var(--sp-2); margin: 0; font-size: 0.9375rem; }
.bk__ho-card dt { color: #9DBDB1; }
.bk__ho-card dd { margin: 0; font-weight: 700; color: var(--white); }
@container (min-width: 380px) {
  .bk__ho-card dl { grid-template-columns: auto 1fr; column-gap: var(--sp-4); }
  .bk__ho-card dd { text-align: right; }
}

.bk__ho-events { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.auto-event {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  font-size: 0.9375rem;
  color: #DCEAE4;
  animation: eventIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.auto-event__tick {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-600);
  color: var(--white);
}
@keyframes eventIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.bk__ho-note {
  margin: var(--sp-4) 0 0;
  font-size: 0.875rem;
  color: #9DBDB1;
}

/* --------------------------------------------------------------------------
   16. Dashboard — KPIs, rows, drawer
   -------------------------------------------------------------------------- */
.dash__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.dash__kpi {
  padding: var(--sp-3) var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.dash__kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--green-800);
}
.dash__kpi span {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}
.is-bumped { animation: bump 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes bump {
  0%   { transform: none; }
  35%  { transform: scale(1.16); color: var(--green-600); }
  100% { transform: none; }
}

.dash__list > li { margin: 0; }

button.dash__row {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
button.dash__row:hover { border-color: var(--green-600); background: var(--green-50); }

.dash__value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-800);
  white-space: nowrap;
  justify-self: start;
}

.dash__status[data-status="New enquiry"] { background: #EDE7F4; color: #55407A; }
.dash__status[data-status="Sent"]        { background: #E2E8F3; color: #37507E; }
.dash__status[data-status="Accepted"]    { background: #DCEAE4; color: #14544A; }

/* Drawer */
.dash__drawer {
  /* Sits between the figures and the job list, so it needs clearance on
     both sides rather than only above. */
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--white);
  border: 2px solid var(--green-700);
  border-radius: var(--radius);
  animation: drawerIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.dash__drawer[hidden] { display: none; }
@keyframes drawerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.drawer__eyebrow {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
}
.drawer__title { margin: 2px 0 0; font-size: var(--step-1); }
.drawer__title:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.drawer__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  cursor: pointer;
}
.drawer__close:hover { border-color: var(--green-600); color: var(--green-800); background: var(--green-50); }

.drawer__flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.drawer__flow li {
  margin: 0;
  padding: 5px var(--sp-3);
  background: var(--chalk);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #8B9793;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.drawer__flow li[data-done="true"] { background: var(--green-100); color: var(--green-800); }

.drawer__list { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); font-size: 0.9375rem; }
@container (min-width: 380px) {
  .drawer__list { grid-template-columns: auto 1fr; column-gap: var(--sp-4); align-items: baseline; }
  .drawer__list dd { text-align: right; }
}
.drawer__list dt { color: var(--ink-soft); }
.drawer__list dd { margin: 0; font-weight: 600; color: var(--green-900); }

.drawer__notes {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  background: var(--chalk);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.drawer__notes span {
  display: block;
  margin-bottom: 2px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-700);
}

.drawer__sub {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
}
.drawer__none { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }

.drawer__mini { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.drawer__mini li { margin: 0; }
.drawer__mini button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.drawer__mini button:hover { border-color: var(--green-600); background: var(--green-50); }

.drawer__lines { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.drawer__lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.drawer__lines b { font-family: var(--font-display); color: var(--green-900); }
.drawer__total { border-bottom: 0 !important; padding-top: var(--sp-3) !important; font-weight: 700; }
.drawer__total b { font-size: var(--step-1); }

.drawer__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.drawer__paid {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--green-100);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--green-800);
}

/* --------------------------------------------------------------------------
   17. SEO view panel
   The visibility rules for this view live with the preview in section 4.
   -------------------------------------------------------------------------- */
.seo-panel {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.seo-panel > p { font-size: var(--step--1); color: var(--ink-soft); }

.serp {
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.serp__label {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.serp__url { font-size: 0.875rem; color: var(--ink-soft); }
.serp__title {
  margin: 2px 0 4px;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: #1A4FA0;
}
.serp__desc { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); max-width: 60ch; }

.seo-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
@container (min-width: 420px) { .seo-checks { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); } }
.seo-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  font-size: 0.9375rem;
}
.seo-checks svg { flex-shrink: 0; margin-top: 3px; color: var(--green-600); }

/* --------------------------------------------------------------------------
   18. Motion preference — part two
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .toast, .auto-event, .bk__handover, .dash__drawer { animation: none; }
  .is-bumped { animation: none; }
}


/* ==========================================================================
   PART THREE — the guided walkthrough
   A controller that drives the three demos above in a fixed order. It owns
   no interface of its own beyond the intro panel and the control bar; every
   thing it shows is the same demo a visitor can drive by hand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19. Intro panel
   -------------------------------------------------------------------------- */
.tour {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 860px) {
  .tour {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-7);
    padding: var(--sp-6);
  }
}
.tour__lead h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.tour__lead p { margin-bottom: 0; color: var(--ink-soft); font-size: var(--step--1); }

.tour__actions { display: grid; gap: var(--sp-3); justify-items: stretch; }
@media (min-width: 860px) { .tour__actions { max-width: 21rem; } }
.tour__or { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

/* Two walkthroughs, offered as one compact group rather than two competing
   primary buttons: neither story is the headline, they are alternatives. */
.tour__choices { display: grid; gap: var(--sp-2); }
.tour-choice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.tour-choice:hover { border-color: var(--green-700); background: var(--light); }
.tour-choice:active { transform: translateY(1px); }
.tour-choice__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  color: var(--white);
  background: var(--green-700);
  border-radius: 50%;
}
.tour-choice__text { display: grid; gap: 2px; min-width: 0; }
.tour-choice__text b { font-size: var(--step--1); color: var(--ink); }
.tour-choice__text small { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-soft); }

/* Once a walkthrough is running the launchers would only confuse.
   They are disabled in JS; this is the matching look. */
body.tour-open .tour__actions { opacity: 0.45; }
.tour__actions .btn[disabled] { cursor: default; }
.tour-choice[disabled] { cursor: default; }
.tour-choice[disabled]:hover { border-color: var(--line); background: var(--white); }

/* --------------------------------------------------------------------------
   20. The element currently being talked about
   Calm: a ring and a lift, no dimming of the page and no glow.
   -------------------------------------------------------------------------- */
.is-tour-focus {
  position: relative;
  z-index: 2;
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px var(--green-600), 0 0 0 9px rgba(29, 111, 96, 0.13), var(--shadow-md);
  transition: box-shadow 0.35s ease;
}

/* --------------------------------------------------------------------------
   21. Control bar
   -------------------------------------------------------------------------- */
.tour-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 240;
  background: var(--green-900);
  color: #DCEAE4;
  box-shadow: 0 -8px 28px rgba(14, 51, 44, 0.24);
  animation: tourBarIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tour-bar[hidden] { display: none; }
@keyframes tourBarIn { from { transform: translateY(100%); } to { transform: none; } }

.tour-bar__track { height: 3px; background: rgba(255, 255, 255, 0.16); }
.tour-bar__track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green-600);
  transition: width 0.4s ease;
}

.tour-bar__inner {
  display: grid;
  gap: var(--sp-3);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter);
}
.tour-bar__inner[hidden] { display: none; }
@media (min-width: 780px) {
  .tour-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-5);
  }
}

.tour-bar__text { min-width: 0; }
.tour-bar__step {
  display: block;
  margin-bottom: 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8FC3B0;
}
.tour-bar__caption {
  margin: 0;
  max-width: 62ch;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--white);
}

.tour-bar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tour-bar__controls .btn { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   The bar on a short phone.

   Stacked, it was taking well over a third of a 667px-tall screen, and on the
   outro nearer half. The height went on things that were not the words: 32px
   of vertical padding, a step line generous enough to wrap onto a second row,
   and line-heights tuned for a desktop column. Tightening those keeps every
   control at its full 44px target and the caption at a readable 16px, which
   is the part that matters — the text is not made smaller, only the space
   around it. Longer narration is shortened in JS rather than squeezed.
   -------------------------------------------------------------------------- */
@media (max-width: 779px) {
  .tour-bar__inner { gap: var(--sp-2); padding-block: var(--sp-3); }
  .tour-bar__step {
    margin-bottom: 1px;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }
  .tour-bar__caption { line-height: 1.35; }
  .tour-bar__controls { gap: 6px; }
}

/* Below about 340px the control row runs out of width and wraps onto a second
   line, which costs more height than the label saves. The button keeps its
   size and its accessible name; only the visible word goes. */
@media (max-width: 339px) {
  .tour-bar__controls .tour-btn--wide { padding-inline: 0; width: 44px; }
  .tour-bar__controls .tour-btn--wide [data-tour-toggle-label] { display: none; }
}

.tour-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #EAF2EE;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tour-btn:hover { background: rgba(255, 255, 255, 0.17); border-color: rgba(255, 255, 255, 0.4); color: var(--white); }
.tour-btn--wide { padding-inline: var(--sp-4); }
.tour-btn--exit { background: transparent; border-color: transparent; }
.tour-btn--exit:hover { background: rgba(255, 255, 255, 0.12); }
.tour-bar :focus-visible { outline: 3px solid #EAF2EE; outline-offset: 2px; }

.tour-bar__outro .tour-bar__step { color: var(--white); font-size: 0.9375rem; letter-spacing: 0.03em; }

/* Keep the page usable behind the bar, and lift the toasts clear of it */
body.tour-open { padding-bottom: 9.5rem; }
@media (min-width: 780px) { body.tour-open { padding-bottom: 7rem; } }
body.tour-open .toasts { bottom: calc(9.5rem + var(--sp-4)); }
@media (min-width: 780px) { body.tour-open .toasts { bottom: calc(7rem + var(--sp-4)); } }

/* A job row the walkthrough has just pointed at */
.dash__row.is-flagged {
  border-color: var(--green-600);
  background: var(--green-50);
  animation: flagIn 1.1s ease both;
}
@keyframes flagIn {
  0%   { box-shadow: 0 0 0 0 rgba(29, 111, 96, 0.42); }
  70%  { box-shadow: 0 0 0 9px rgba(29, 111, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 111, 96, 0); }
}

/* --------------------------------------------------------------------------
   22. Motion preference — part three
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tour-bar,
  .demo-stage__seo,
  .dash__row.is-flagged { animation: none; }
  .is-tour-focus { transition: none; }
}

/* --------------------------------------------------------------------------
   23. Simulated cursor

   Presentation only — it never receives a pointer event and never performs an
   action. The walkthrough still works entirely through api.booking and
   api.dashboard; this just shows the visitor where each change came from.

   On a coarse pointer the arrow is swapped for a tap disc, because a mouse
   arrow on a phone reads as a bug rather than a demonstration. Both share the
   same document-space positioning, so touch scrolling keeps the tap disc
   attached exactly as wheel scrolling keeps the arrow attached.
   -------------------------------------------------------------------------- */
.tour-cursor {
  /* Absolute, not fixed. Its transform holds *document* coordinates, so when
     the page scrolls the browser moves the cursor and the control it is
     sitting on by exactly the same amount — no JavaScript, no lag, nothing
     to fall out of step. */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 260;              /* over the tour bar (240), under toasts (300) */
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;      /* must never intercept a real pointer */
  /* Two properties, two durations: the transform duration is set per move in
     JS, while opacity keeps its own so the cursor fades out at the end of a
     run rather than vanishing mid-frame. */
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.33, 0.02, 0.24, 1), ease;
  transition-duration: 0ms, 280ms;
  will-change: transform;
}
.tour-cursor.is-on { opacity: 1; }

.tour-cursor__arrow {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform-origin: 0 0;
  filter: drop-shadow(0 2px 4px rgba(14, 51, 44, 0.4));
  transition: transform 0.14s ease;
}
/* site.css sets `svg { max-width: 100% }`, and this sits inside a zero-width
   host, so without an explicit size the arrow collapses to nothing. */
.tour-cursor__arrow svg {
  display: block;
  width: 22px;
  height: 22px;
  max-width: none;
}
.tour-cursor[data-mode="tap"] .tour-cursor__arrow { display: none; }

/* The tap disc, centred on the point being touched */
.tour-cursor__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: rgba(29, 111, 96, 0.28);
  border: 2px solid var(--green-700);
  box-shadow: 0 2px 8px rgba(14, 51, 44, 0.28);
  transition: transform 0.14s ease;
}
.tour-cursor[data-mode="tap"] .tour-cursor__dot { display: block; }

/* The press ring, shared by both modes */
.tour-cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid var(--green-600);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.35);
}
.tour-cursor[data-mode="mouse"] .tour-cursor__ring { margin: -14px 0 0 -10px; }

.tour-cursor.is-clicking .tour-cursor__ring { animation: tourPress 0.5s ease-out both; }
.tour-cursor.is-clicking .tour-cursor__arrow { transform: scale(0.82); }
.tour-cursor.is-clicking .tour-cursor__dot { transform: scale(0.8); }

@keyframes tourPress {
  0%   { opacity: 0.9; transform: scale(0.35); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* The control the cursor has just pressed acknowledges the press */
.is-tour-hit {
  animation: tourHit 0.42s ease-out;
}
@keyframes tourHit {
  0%   { box-shadow: 0 0 0 0 rgba(29, 111, 96, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(29, 111, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 111, 96, 0); }
}

@media (prefers-reduced-motion: reduce) {
  /* Still shown, so the visitor can follow what is being pointed at — it just
     stops travelling and pulsing. */
  .tour-cursor { transition-duration: 0ms !important; }
  .tour-cursor.is-clicking .tour-cursor__ring { animation: none; opacity: 0.6; transform: scale(1); }
  .tour-cursor.is-clicking .tour-cursor__arrow,
  .tour-cursor.is-clicking .tour-cursor__dot { transform: none; }
  .is-tour-hit { animation: none; }
}

/* --------------------------------------------------------------------------
   Quote request track
   Shares the booking demo's language: same option tiles, same step bar, same
   summary aside. Only the pieces that genuinely have no equivalent above —
   the entry chooser, the photo dropzone and the thumbnails — are new.
   -------------------------------------------------------------------------- */
.bk__pick h4 { margin: 0 0 var(--sp-4); }
.bk__pick-grid { display: grid; gap: var(--sp-3); }
@container (min-width: 520px) { .bk__pick-grid { grid-template-columns: 1fr 1fr; } }

.bk__pick-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-5);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}
.bk__pick-opt:hover { border-color: var(--green-600); }
.bk__pick-icon { color: var(--green-700); }
.bk__pick-name { font-weight: 700; font-size: var(--step-0); color: var(--ink); }
.bk__pick-opt small { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45; }

.bk__hint { margin: 0 0 var(--sp-4); color: var(--ink-soft); font-size: var(--step--1); }

.bk__urgency { margin: var(--sp-5) 0 0; padding: 0; border: 0; }
.bk__urgency legend { padding: 0 0 var(--sp-2); font-weight: 700; font-size: var(--step--1); }
.bk__urgency-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bk__chip {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.bk__chip[aria-pressed="true"] { border-color: var(--green-700); background: var(--green-50); color: var(--green-900); }

.bk__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  background: var(--chalk);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--green-700);
}
.bk__drop p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.bk__drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.bk__local {
  margin: var(--sp-3) 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.bk__thumbs { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.bk__thumbs-none { color: var(--ink-soft); font-size: var(--step--1); }
.bk__thumb {
  position: relative;
  width: 116px;
  padding-bottom: var(--sp-1);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.bk__thumb img {
  display: block;
  width: 100%;
  height: 78px;
  object-fit: cover;
  /* keeps a broken or tiny image (and its alt text) inside the tile */
  overflow: hidden;
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.bk__thumb-name {
  display: block;
  padding: var(--sp-2);
  font-size: 0.75rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk__thumb-x {
  position: absolute;
  top: 3px; right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40px so it is a real target on a phone, which is where someone is most
     likely to be attaching photos in the first place. */
  width: 40px; height: 40px;
  background: rgba(14, 51, 44, 0.82);
  border: 0;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
}
.bk__thumb-x:hover { background: var(--green-900); }

/* --------------------------------------------------------------------------
   Dashboard: requests, photos, quote builder, invoice
   -------------------------------------------------------------------------- */
.dash__group {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dash__list > .dash__group:first-child { margin-top: 0; }
.dash__photos {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-2);
  padding: 1px var(--sp-2);
  background: var(--sand-50);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sand-800);
}

.drawer__photos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0; }
.dash__photo {
  display: block;
  width: 92px; height: 68px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
}
.dash__photo img { display: block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; font-size: 0.7rem; }
.dash__photo:hover { border-color: var(--green-600); }

.drawer__timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--sp-5);
  border-left: 2px solid var(--line);
}
.drawer__timeline li {
  position: relative;
  margin-bottom: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.drawer__timeline li::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) * -1 - 5px);
  top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-600);
}

/* Quote builder — deliberately four fields and a total, not an accounts package */
.qb { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.qb__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); }
@container (min-width: 420px) { .qb__row { grid-template-columns: 9rem 1fr; align-items: center; } }
.qb__row > span { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.qb__row input {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--white);
  border: 2px solid #C3CBC7;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.qb__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-3);
  border-top: 2px solid var(--line);
  font-weight: 700;
}
.qb__total b { font-size: var(--step-1); font-variant-numeric: tabular-nums; }

/* Quote / invoice preview — what the customer would receive */
.inv {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.inv__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.inv__meta { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0; font-size: var(--step--1); }
.inv__meta dt { color: var(--ink-soft); }
.inv__meta dd { margin: 0; font-weight: 600; }
.inv__note { margin: var(--sp-3) 0 0; font-size: var(--step--1); color: var(--ink-soft); }

.paysim {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--sand-50);
  border-left: 4px solid var(--sand-500);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.paysim p { margin: 0 0 var(--sp-3); font-size: var(--step--1); color: var(--ink-soft); }

/* Photo lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(14, 51, 44, 0.88);
}
.lightbox.is-open { display: flex; }
body.has-lightbox { overflow: hidden; }
.lightbox__inner { position: relative; max-width: min(880px, 100%); width: 100%; text-align: center; }
.lightbox__inner img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  margin: 0 auto;
  border-radius: var(--radius);
  background: var(--white);
}
.lightbox__name { margin: var(--sp-3) 0 0; color: #DCE7E2; font-size: var(--step--1); }
.lightbox__nav { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.lightbox__btn,
.lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
}
.lightbox__btn:hover,
.lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__close { position: absolute; top: -54px; right: 0; }
@media (max-width: 519px) { .lightbox__close { top: -50px; } }

/* "(optional)" sits with the heading but must not compete with it: the photo
   step is encouraged, not required, and next to a numbered progress bar the
   stage otherwise reads as compulsory. */
.bk__optional { font-family: var(--font-body); font-weight: 500; font-size: var(--step--1); color: var(--ink-soft); }