/* site-visit.css: /site-visit/, the in-person visit request.
 *
 * THE IDEA: the page is a docket. Construction runs on paper you fill in at a
 * gate, delivery notes, site instruction sheets, the visitor book by the cabin
 * door, and this page asks for the same things one of those asks for: who you
 * are, where to come, when, and who will be there. So the form is not styled as
 * a form on a page. It IS the page, printed as a ruled sheet with a head, a
 * reference, and line items.
 *
 * WHAT THIS FILE DOES NOT DO: restyle the form. The document treatment already
 * exists as .pr-quote-doc / .pr-quote-form / .qf-* in pricing.css, built for the
 * quote form on 22 Aug 2026, and this page loads that sheet and uses those
 * classes unchanged. Two copies of a hairline document would drift within a
 * month. Everything below is either genuinely new here (the reference stamp,
 * the address row, the textarea, the day list) or a small correction for this
 * page's wider docket.
 *
 * Distinct from /book-a-demo/ on purpose. That page is a two-column pitch beside
 * a calendar, because picking a slot is the whole job. Here there is no slot to
 * pick: the job is telling us where to come, so the docket runs full width and
 * single column and the reading matter sits underneath it.
 */

/* ── Hero ──────────────────────────────────────────────────────────────
   Short by design. The docket is the page and it should be on screen almost
   immediately; anyone who needs convincing has already read /book-a-demo/ or
   /pricing/ to get here. */
.sv-hero {
  padding: clamp(48px, 6vw, 92px) 0 clamp(28px, 3.4vw, 44px);
}
.sv-hero h1 {
  margin: 18px 0 16px;
  max-width: 18ch;
}
.sv-hero .sub {
  margin: 0;
  max-width: 54ch;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ── The docket ────────────────────────────────────────────────────────
   Wider than the quote document (980px). This form carries a full street
   address, and at 980 the two-thirds column holds about 380px: enough for a
   long street address only if nobody looks at it too hard. */
.sv-doc {
  max-width: 1120px;
}

/* The reference stamp. The one ornament on the page, and it earns its place by
   doing the job a docket number does: it tells the reader this is a record that
   will exist after they close the tab, which is exactly the reassurance someone
   needs before inviting a supplier to their office. Not a live reference, and
   it does not pretend to be one: it is the date, which is true. */
.sv-ref {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.sv-ref .sv-ref-k {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 58%, transparent);
}

/* ── Rows this page adds ───────────────────────────────────────────────
   The address line: two thirds to the street address, one third to the
   postcode. An even split would be wrong in both directions at once, giving a
   unit number, an industrial estate, a street and a town the same room as six
   characters.

   This was a three-column row until 24 Aug 2026, when the "Office or site"
   selector beside it was removed: a visit is always to the office. */
.qf-row.qf-row-addr { grid-template-columns: 2fr 1fr; }

/* The notes field. pricing.css has no textarea because the quote form has no
   free text, so the input treatment is restated here rather than inherited:
   same hairline underline, same focus colour, no box. */
.qf-row textarea {
  width: 100%;
  margin-top: 8px;
  padding: 0 0 10px;
  min-height: 84px;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid oklch(0.42 0.01 60);
  background: transparent;
  color: var(--paper);
  font-family: var(--f-display);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.qf-row textarea::placeholder { color: oklch(0.55 0.005 60); }
.qf-row textarea:focus { outline: 0; border-bottom-color: var(--hazard); }

/* ── What happens on the day ───────────────────────────────────────────
   A ruled list, not three cards with icons. The content is a sequence, so it is
   set as one: numbered, in order, each line separated by the same hairline the
   docket above it uses. Same rule, same rhythm, no new vocabulary. */
.sv-day {
  max-width: 1120px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.sv-day-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(16px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
}
.sv-day-n {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hazard);
  padding-top: 6px;
}
.sv-day-row h3 {
  margin: 0 0 8px;
  font-size: var(--fs-xl);
  line-height: 1.25;
}
.sv-day-row p {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-2);
  line-height: 1.65;
}

/* ── Coverage and travel ───────────────────────────────────────────────
   Set as a plain ruled note, deliberately unglamorous. It carries the one thing
   a reader is quietly worried about (is this going to cost me, and will they
   actually come this far), and a decorated panel would make an honest answer
   look like a sales point. */
.sv-cover {
  max-width: 1120px;
  margin: 0 auto;
  border-left: 3px solid var(--hazard);
  padding: 4px 0 4px clamp(20px, 2.2vw, 32px);
}
.sv-cover h2 {
  margin: 0 0 14px;
  font-size: var(--fs-h3);
}
.sv-cover p {
  margin: 0 0 14px;
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.7;
}
.sv-cover p:last-child { margin-bottom: 0; }

/* The address row folds earlier than the two-column rows, at 860 rather than
   pricing.css's 640. That is deliberate, not an inconsistency: at 700px the
   two-thirds column is about 430px, which still holds a street address, but
   below that it does not, and a truncated address on the one form where the
   address IS the point is the fault worth spending a breakpoint on.

   The borders have to be restated here. pricing.css only reassigns them inside
   its own 640 query, so between 641 and 860 these labels would stack with the
   vertical rule still on them: a hairline running down the right of a
   single-column row, dividing nothing. */
@media (max-width: 860px) {
  .qf-row.qf-row-addr { grid-template-columns: 1fr; }
  .qf-row.qf-row-addr > label {
    border-right: 0;
    border-bottom: 1px solid oklch(0.32 0.01 60);
  }
  .qf-row.qf-row-addr > label:last-child { border-bottom: 0; }
  .sv-day-row { grid-template-columns: 40px 1fr; gap: 14px; }
  .sv-ref { margin-bottom: 14px; }
}