/* ============================================================================
   Start a project  -  .spx  (prototype)
   ----------------------------------------------------------------------------
   An open treatment of the booking + brief form. The live /start-project/ form
   is a panel of filled, 12px-rounded inputs inside a bordered calendar card.
   This drops every container: no panel, no card, no fills. Fields are a single
   bottom hairline on the paper background, the calendar is a bare grid, and the
   only filled surfaces are the selected states and the primary button.

   Prefixed .spx throughout so the live page's .sp-/.bk- rules are untouched and
   the three prototypes can be compared against it.
   ========================================================================== */

.spx { --spx-line: rgba(17, 17, 15, .16); }

/* ---- section rhythm ----
   The one-form version used to head each block with an "01 - PICK A TIME"
   eyebrow, which also separated the three blocks. With the eyebrows gone a
   hairline does that job, so the headings still read as three distinct moves. */
.spx__step + .spx__step {
  margin-top: clamp(64px, 8vw, 120px);
  padding-top: clamp(52px, 6vw, 88px);
  border-top: 1px solid var(--spx-line);
}
.spx__h {
  margin: 0; color: var(--ink); font-weight: 300;
  font-size: clamp(32px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -.04em;
  text-wrap: balance;
}
.spx__lead {
  max-width: 56ch; margin: 18px 0 0;
  color: var(--muted); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55;
}
.spx__block { margin-top: clamp(34px, 4vw, 56px); }
.spx__label {
  display: block; margin: 0 0 16px;
  color: var(--ink); font-size: 15px;
}
.spx__label small { color: var(--muted); font-size: 13px; }

/* ---- fields: one hairline, no box ---- */
.spx .ff { position: relative; margin: 0; }
.spx .ff input,
.spx .ff textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--spx-line);
  border-radius: 0; background: transparent;
  padding: 26px 0 12px;
  font: 400 clamp(17px, 1.4vw, 20px)/1.4 Matter, system-ui, sans-serif;
  color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease;
}
.spx .ff textarea { min-height: 116px; resize: vertical; }
.spx .ff input:hover, .spx .ff textarea:hover { border-bottom-color: rgba(17,17,15,.34); }
.spx .ff input:focus, .spx .ff textarea:focus { border-bottom-color: var(--orange); box-shadow: none; }
.spx .ff label {
  position: absolute; left: 0; top: 24px;
  color: var(--muted); font-size: clamp(17px, 1.4vw, 20px);
  pointer-events: none; transform-origin: left top;
  transition: transform .18s ease, color .18s ease;
}
.spx .ff input:focus ~ label,
.spx .ff input:not(:placeholder-shown) ~ label,
.spx .ff textarea:focus ~ label,
.spx .ff textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-22px) scale(.68); color: var(--muted);
}
.spx .ff input:focus ~ label, .spx .ff textarea:focus ~ label { color: var(--orange); }

.spx__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px,2.4vw,38px); }
.spx__grid--one { grid-template-columns: minmax(0,1fr); }

/* ---- choice pills: hairline, ink when chosen ---- */
.spx .pills { display: flex; flex-wrap: wrap; gap: 10px; }
.spx .pills .pill { position: relative; cursor: pointer; user-select: none; }
.spx .pills .pill input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.spx .pills .pill > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px;
  border: 1px solid var(--spx-line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.spx .pills .pill:hover > span { border-color: rgba(17,17,15,.4); color: var(--ink); }
.spx .pills .pill:has(input:checked) > span {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
  transform: none; box-shadow: none;
}
.spx .pills .pill:has(input:checked) > span::before { content: none; }
.spx .pills .pill input:focus-visible ~ span { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---- calendar: no card ---- */
.spx__picker {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4.5vw, 76px); align-items: start;
  margin-top: clamp(34px, 4vw, 56px);
}
.spx .bk-cal { border: 0; border-radius: 0; background: none; padding: 0; }
.spx .bk-cal__head { margin: 0 0 18px; }
.spx .bk-cal__title { font-size: 17px; letter-spacing: -.01em; }
.spx .bk-cal__nav {
  width: 36px; height: 36px; border: 1px solid var(--spx-line);
  border-radius: 999px; background: transparent;
}
.spx .bk-cal__nav:hover { border-color: var(--ink); }
.spx .bk-cal__grid { gap: 2px; }
.spx .bk-cal__dow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding-bottom: 10px; }
.spx .bk-cal__day {
  min-height: 46px; border: 0; border-radius: 0; background: transparent;
  color: rgba(17,17,15,.26); font-size: 15px;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
/* an available day is marked by weight and an underline, not a filled tile */
.spx .bk-cal__day.is-available {
  color: var(--ink); background: transparent;
  box-shadow: inset 0 -1px 0 0 var(--orange);
}
.spx .bk-cal__day.is-available:hover { background: rgba(221,61,6,.09); }
.spx .bk-cal__day.is-selected,
.spx .bk-cal__day.is-available.is-selected {
  background: var(--ink); color: var(--paper); box-shadow: none;
}
.spx .bk-cal__day:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; box-shadow: none; }

/* ---- time chips ---- */
.spx .bk-times__title { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.spx .bk-times { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.spx .bk-chip { position: relative; cursor: pointer; }
.spx .bk-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.spx .bk-chip > span {
  display: grid; place-items: center; min-height: 46px;
  border: 1px solid var(--spx-line); border-radius: 999px;
  color: var(--ink); font-size: 15px;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.spx .bk-chip:hover > span { border-color: rgba(17,17,15,.4); }
.spx .bk-chip:has(input:checked) > span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.spx .bk-chip input:focus-visible ~ span { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---- footer / actions ---- */
.spx__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
  margin-top: clamp(38px, 4.4vw, 62px);
  padding-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--spx-line);
}
.spx__foot .btn { border-radius: 999px; }
.spx__back {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--muted); font: 400 15px/1 Matter, system-ui, sans-serif;
  border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease;
}
.spx__back:hover { color: var(--ink); border-bottom-color: var(--ink); }
.spx .form-status { margin: 0; font-size: 14px; color: var(--muted); }
.spx .form-status.is-error { color: var(--orange); }

/* ---- progress rail (2- and 3-step) ---- */
.spx__rail { display: flex; gap: clamp(20px,3vw,52px); margin: 0 0 clamp(46px,5.5vw,80px); }
.spx__railitem {
  flex: 1 1 0; padding-top: 14px;
  border-top: 1px solid var(--spx-line);
  color: var(--muted); font-size: 14px;
  transition: color .3s ease, border-color .3s ease;
}
/* The rail carried a "STEP 1" caps label above each name. The name alone plus
   the rule colour already says where you are, so only the name remains. */
.spx__railitem b { display: block; font-weight: 400; color: inherit; font-size: 15px; }
.spx__railitem.is-on { color: var(--ink); border-top-color: var(--orange); }
.spx__railitem.is-done { color: var(--ink); border-top-color: var(--ink); }

/* ---- the chosen-slot recap carried into later steps ---- */
.spx__recap {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
  margin: clamp(26px,3vw,40px) 0 clamp(30px,3.4vw,48px);
  padding-bottom: clamp(18px,2vw,26px);
  border-bottom: 1px solid var(--spx-line);
  color: var(--muted); font-size: clamp(17px,1.3vw,20px);
}
.spx__recap b { font-weight: 400; color: var(--ink); }

/* Focus is moved to the step heading on navigation so the change is announced.
   A ring around a 56px display heading reads as a rendering fault, and the
   visitor did not tab there, so the outline is suppressed on the heading only. */
.spx__h:focus { outline: none; }

/* ---- panes ---- */
.spx__pane[hidden] { display: none; }

@media (max-width: 900px) {
  .spx__picker { grid-template-columns: minmax(0,1fr); gap: clamp(30px,5vw,44px); }
  .spx__grid { grid-template-columns: minmax(0,1fr); }
  .spx__rail { gap: 12px; }
  .spx__railitem span { font-size: 11px; }
  .spx__railitem b { font-size: 13px; }
}
@media (max-width: 600px) {
  .spx .bk-times { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .spx__foot { gap: 14px; }
  .spx__foot .btn { width: 100%; }
}

/* A visitor who does not want a call has no route through a calendar-first
   form, so step one keeps a plain link to /contact/ for them. */
.spx__optout { margin: 18px 0 0; color: var(--muted); font-size: 15px; }
.spx__optout a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--spx-line); }
.spx__optout a:hover { color: var(--orange); border-bottom-color: var(--orange); }