/* Contact as a branching funnel. No hero: the page opens on question one. */
.funnel{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);
  gap:clamp(32px,5vw,76px);align-items:start;padding-block:clamp(56px,7vw,96px)}

.funnel-intro{position:sticky;top:108px}
.funnel-intro h1{font-family:'EB Garamond',Garamond,serif;font-weight:500;
  font-size:clamp(2.2rem,4vw,3.3rem);line-height:1.03;letter-spacing:-.025em;margin:.6rem 0 0}
.funnel-intro p{color:#3B3448;font-size:1.02rem;line-height:1.6;margin:1.1rem 0 0;max-width:44ch}
.funnel-direct{font-size:.92rem;color:#5D5568}
.funnel-direct a{color:#5B21B6;text-decoration:none;border-bottom:1px solid rgba(91,33,182,.35)}

/* Progress */
.progress{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.progress-track{flex:1;height:3px;border-radius:99px;background:rgba(11,7,19,.1);overflow:hidden}
.progress-fill{display:block;height:100%;transform-origin:0 50%;transform:scaleX(.25);
  background:linear-gradient(90deg,#7C3AED,#22D3EE,#F472B6);
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.progress-count{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5D5568;white-space:nowrap}

/* A step. Heading is a plain element: <legend> renders on the fieldset border
   box, which is what was floating the question titles outside their cards. */
.q{border:1px solid rgba(11,7,19,.09);border-radius:20px;background:#fff;
  padding:28px 28px 24px;margin:0 0 14px;box-shadow:0 10px 30px rgba(11,7,19,.045)}
.q-head{display:flex;align-items:baseline;gap:12px;margin:0;
  font-family:'EB Garamond',Garamond,serif;font-weight:500;font-size:1.5rem;line-height:1.12;color:#1A1225}
.q-num{font-family:Inter,system-ui,sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.16em;color:#7C3AED}
.q-hint{margin:.6rem 0 0;font-size:.88rem;color:#5D5568}

/* With JS on, one step at a time. Without it, every step is simply visible and
   the form still submits. */
.is-funnel .q{display:none}
.is-funnel .q.on{display:block;animation:stepIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.is-funnel .q-nav{display:flex}
.q-nav{display:none;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.q-nav .text-link{background:none;border:0;font:inherit;cursor:pointer;color:#5D5568;padding:0}
.q-nav .text-link:hover{color:#5B21B6}
.q-nav .button{margin-left:auto}

.q-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;align-items:start}
.q .field{margin:0}
/* The top margin is for fields STACKED under one another. Inside the grid it
   fired on the second column too and pushed it 16px lower than the first, so
   the two labels and their inputs no longer lined up. */
.q > .field{margin-top:16px}
.q > .field + .field{margin-top:16px}
.q-fields > .field{margin-top:0}
/* Labels wrap to different heights ("Trade" against "Roughly how many on the
   crew?"), so the inputs are pinned to the bottom of each cell instead of
   floating under whatever the label happened to need. */
.q-fields > .field{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.q-fields > .field label{min-height:1.05rem}
.q label{display:block;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#5D5568;margin-bottom:7px}
.q input[type=text],.q input[type=email],.q input[type=tel],.q select,.q textarea{
  width:100%;font:inherit;font-size:.97rem;color:#1A1225;background:#FAF8FC;
  border:1px solid rgba(11,7,19,.14);border-radius:12px;padding:12px 14px;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.q textarea{resize:vertical;min-height:86px}
.q input:focus,.q select:focus,.q textarea:focus{outline:none;background:#fff;
  border-color:#7C3AED;box-shadow:0 0 0 4px rgba(124,58,237,.14)}

/* The pain question. Ticking your own week off a list is easier than writing it. */
.q-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.q-checks label{display:flex;align-items:center;gap:11px;margin:0;
  font-size:.93rem;font-weight:500;letter-spacing:0;text-transform:none;color:#3B3448;
  padding:13px 15px;border:1px solid rgba(11,7,19,.1);border-radius:12px;cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.q-checks label:hover{border-color:rgba(124,58,237,.4);background:rgba(124,58,237,.04);transform:translateY(-1px)}
.q-checks input{accent-color:#7C3AED;width:17px;height:17px;flex:0 0 auto;margin:0}
.q-checks label:has(input:checked){border-color:#7C3AED;background:rgba(124,58,237,.08)}

/* The branch result, written in after step two. */
.verdict{margin:16px 0 0;padding:16px 18px;border-left:3px solid #7C3AED;
  background:rgba(124,58,237,.05);border-radius:0 12px 12px 0;
  font-size:1rem;line-height:1.55;color:#1A1225;
  opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.verdict.on{opacity:1;transform:none}

.form-note{margin:16px 0 0;font-size:.84rem;color:#5D5568;max-width:52ch}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:960px){
  .funnel{grid-template-columns:1fr;gap:24px;padding-block:36px}
  .funnel-intro{position:static}
  .q-fields,.q-checks{grid-template-columns:1fr}
  .q{padding:22px 18px}
  .q-nav .button{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .is-funnel .q.on{animation:none}
  .progress-fill,.verdict{transition:none}
}

/* ===========================================================================
   THE BOOKER, step five
   ---------------------------------------------------------------------------
   Booking lives inside the funnel rather than behind its own overlay. By the
   time anyone reaches this step they have already said what they run and what
   is going wrong, so the call gets booked with that attached instead of being a
   separate errand.
   =========================================================================== */
.booker{margin-top:22px}
.booker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.booker-month{font-family:'EB Garamond',Garamond,serif;font-size:1.3rem;letter-spacing:-.01em}
.booker-arrow{
  width:40px;height:40px;flex:none;border:1px solid rgba(11,7,19,.14);border-radius:50%;
  background:#fff;cursor:pointer;font-size:1rem;color:#0B0713;line-height:1;
  transition:border-color .25s ease,background-color .25s ease,opacity .25s ease;
}
.booker-arrow:hover:not(:disabled){border-color:#7C3AED;background:#F7F3FF}
.booker-arrow:disabled{opacity:.3;cursor:default}

.booker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.booker-dow{
  text-align:center;padding-bottom:6px;
  font-size:.62rem;font-weight:800;letter-spacing:.1em;color:#7A7286;
}
.booker-gap{aspect-ratio:1}
.booker-day{
  aspect-ratio:1;min-height:40px;border:0;border-radius:10px;background:none;
  font:inherit;font-size:.9rem;font-weight:650;color:#0B0713;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.booker-day:hover:not(:disabled){background:#EFE9FB}
.booker-day:disabled{color:#BDB6C7;cursor:default}
.booker-day.on{background:#0B0713;color:#fff}
.booker-day:focus-visible{outline:3px solid #7C3AED;outline-offset:2px}

.booker-prompt{margin:16px 0 0;font-size:.88rem;color:#5D5568}

.booker-times{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px;
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(11,7,19,.09);
}
.booker-slot{
  min-height:44px;padding:0 8px;border:1px solid rgba(11,7,19,.14);border-radius:999px;
  background:#fff;font:inherit;font-size:.84rem;font-weight:700;color:#0B0713;cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.booker-slot:hover:not(:disabled){border-color:#7C3AED;background:#F7F3FF}
/* A taken slot stays visible on purpose. Removing it makes the week look empty;
   showing it struck through makes the week look busy, which is the truth. */
.booker-slot:disabled{color:#BDB6C7;border-color:rgba(11,7,19,.07);text-decoration:line-through;cursor:default}
.booker-slot.on{background:#0B0713;border-color:#0B0713;color:#fff}
.booker-slot:focus-visible{outline:3px solid #7C3AED;outline-offset:2px}

.booker-chosen{
  margin:18px 0 0;padding:13px 16px;border-radius:12px;
  background:#EFE9FB;color:#3B1D7A;font-size:.9rem;font-weight:700;
}

@media (max-width:520px){
  .booker-times{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .booker-day{min-height:44px}
}