/* Enquiry form: a split dialog. A dark side panel says what happens next and keeps Stella's
   number in view; the form runs in three short steps on the right. Under 900px the panel
   shrinks to a slim header; under 560px the dialog fills the screen with the buttons pinned. */
.intake {
  width: min(1040px, calc(100% - 32px)); max-height: min(780px, calc(100dvh - 32px));
  padding: 0; border: 1px solid #fff; border-radius: 28px; color: var(--ink); background: #fff;
  box-shadow: 0 50px 100px -30px #10161a77; overflow: auto;
}
.intake::backdrop { background: #10161a55; backdrop-filter: blur(6px); }
.intake[open] { animation: intake-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
@keyframes intake-in { from { opacity: 0; translate: 0 24px; scale: 0.96; } }
.intake__form { display: grid; grid-template-columns: 370px minmax(0, 1fr); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Side panel */
.intake__side {
  display: flex; flex-direction: column; gap: 22px; padding: 30px; color: #ffffffd9;
  background: radial-gradient(120% 70% at 0% 0%, #087e9677, transparent 62%), var(--ink);
}
.intake__brand .lockup { --lockup-h: 30px; }
.intake__hello { font: 600 2rem/1.05 var(--font-display); letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.intake__lede { font-size: 0.95rem; color: #ffffffa6; }
.intake__next-label { color: var(--teal-2); }
.intake__next { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.intake__next li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 0.95rem; line-height: 1.45; }
.intake__next b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #3cc3d466; color: var(--teal-2); font: 500 0.78rem var(--font-mono); }
.intake__talk { display: grid; gap: 4px; margin-top: auto; padding: 16px; border-radius: 16px; background: #ffffff0f; border: 1px solid #ffffff1c; font-size: 0.85rem; color: #ffffffa6; }
.intake__talk a { font-size: 1rem; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; }
.intake__talk a:hover { color: var(--teal-2); }

/* Form column */
.intake__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 28px 34px 0; background: linear-gradient(160deg, #fff, var(--mist)); }
.intake__head { display: grid; gap: 10px; }
.intake__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.intake__track { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--ink-2); }
.intake__track > span:first-child { display: flex; gap: 8px; }
.intake__track i { width: 26px; height: 5px; border-radius: 5px; background: var(--line); transition: background 0.3s; }
.intake__track i.is-on { background: var(--teal); }
.intake__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.8rem); letter-spacing: -0.03em; }
.intake__sub { color: var(--ink-2); }
.intake__sub:empty { display: none; }
.intake__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.intake__close:hover { color: var(--teal); }
.intake__step { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; animation: step-in 0.4s ease; }
@keyframes step-in { from { opacity: 0; translate: 16px 0; } }

/* Core services: cards with a one-line explanation and a tick */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svc__card {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: start;
  padding: 14px 44px 14px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.svc__card input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.svc__ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--teal-wash); color: var(--teal); transition: background 0.2s, color 0.2s; }
.svc svg, .done-tick svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc__t { font-weight: 600; font-size: 0.96rem; line-height: 1.3; }
.svc__d { font-size: 0.84rem; line-height: 1.4; color: var(--ink-2); }
.svc__tick { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); color: transparent; transition: background 0.2s, border-color 0.2s; }
.svc .svc__tick svg { width: 13px; height: 13px; stroke-width: 3; }
.svc__card:hover { border-color: var(--teal-2); }
.svc__card:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); background: #d8eef055; }
.svc__card:has(input:checked) .svc__ic { background: var(--teal); color: #fff; }
.svc__card:has(input:checked) .svc__tick { background: var(--teal); border-color: var(--teal); color: #fff; }
.svc__card:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Other choices and single-answer pills */
.chips, .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; cursor: pointer; }
.chip-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip-opt span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 15px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); font-weight: 500; font-size: 0.92rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.chip-opt:hover span { border-color: var(--teal-2); }
.chip-opt input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip-opt input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 3px; }
.chip-opt--quiet span { background: transparent; border-style: dashed; }

/* Fields */
.field { display: grid; gap: 6px; }
.field__l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 500; font-size: 0.95rem; }
.field__l small { font-weight: 400; font-size: 0.82rem; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--font-body);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.intake__error { margin: 0; color: #a1321b; font-size: 0.9rem; }
.intake__status:empty { display: none; }
.intake__status { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff4ec; border: 1px solid #f1c7a8; color: #6b2e12; font-size: 0.92rem; }
.intake__status a { color: #055768; font-weight: 600; } /* brand --teal-ink: small teal text on a tint (4.5:1) */
.intake__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Buttons, pinned to the bottom of the form column */
.intake__foot {
  position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 12px;
  margin: auto -34px 0; padding: 14px 34px 22px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--mist) 92%, transparent); backdrop-filter: blur(8px);
}
.intake__foot [data-next] { margin-left: auto; }
.intake__picked { font-size: 0.9rem; color: var(--ink-2); }

/* Review and thank-you */
.done-summary { display: grid; gap: 8px; width: 100%; margin: 0; }
.done-summary div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.done-summary dt { padding-top: 3px; font: 500 0.75rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: #055768; } /* brand --teal-ink */
.done-summary dd { margin: 0; overflow-wrap: anywhere; }
.intake__done { justify-items: start; }
.done-tick { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: #fff; }
.done-tick svg { stroke-width: 2.6; }

@media (max-width: 900px) {
  .intake { width: min(640px, calc(100% - 32px)); }
  .intake__form { grid-template-columns: 1fr; }
  .intake__side { gap: 10px; padding: 16px 20px; }
  .intake__hello { font-size: 1.35rem; }
  .intake__lede, .intake__next-label, .intake__next { display: none; }
  .intake__talk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 0; padding: 10px 12px; font-size: 0.92rem; }
  .intake__talk a { font-size: 0.92rem; }
  .intake__main { padding: 20px 20px 0; }
  .intake__foot { margin-inline: -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .intake { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .intake__form { min-height: 100%; grid-template-rows: auto 1fr; }
  .svc { grid-template-columns: 1fr; gap: 8px; }
  .svc__card { padding: 12px 42px 12px 12px; }
  .done-summary div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .intake[open], .intake__step { animation: none; }
  .intake__track i, .svc__card, .svc__ic, .svc__tick, .chip-opt span { transition: none; }
}