/* /start: the business enquiry form, on a cream sheet (tokens in review/base.css).
   The build loads this file on every page, so each rule here is scoped to the
   enquiry page, except the legacy fieldset reset at the end. */
.intake-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,7vw,96px);align-items:start;padding-block:clamp(36px,6vw,72px) 0}
.intake-intro{min-width:0}
.intake-intro h1{font-size:clamp(36px,4.2vw,58px);margin:14px 0 20px}
.intake-intro>p:not(.eyebrow){max-width:24em;font-size:18px;color:var(--text-muted)}
/* Steps: done, current and still to come. After sending, every step shows done. */
.intake-progress{list-style:none;padding:0;margin:32px 0;display:grid;color:var(--text-muted);font-size:16px}
.intake-progress li{position:relative;display:flex;align-items:center;gap:14px;padding-block:9px}
.intake-progress li+li::before{content:"";position:absolute;left:13.5px;top:-9px;width:1px;height:18px;background:var(--rule-strong)}
.intake-progress b{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid var(--rule-strong);border-radius:50%;font:600 12px/1 var(--font-body)}
.intake-progress [aria-current]{color:var(--text);font-weight:600}
.intake-progress [aria-current] b{background:var(--text);border-color:var(--text);color:var(--bg)}
.intake-progress li:has(~ [aria-current]),.intake-progress[data-complete] li{color:var(--text)}
.intake-progress li:has(~ [aria-current]) b,.intake-progress[data-complete] li b{border-color:var(--text);font-size:0}
.intake-progress li:has(~ [aria-current]) b::after,.intake-progress[data-complete] li b::after{content:"";width:9px;height:5px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.intake-note{max-width:24em;padding-top:20px;border-top:1px solid var(--rule);font-size:14px;color:var(--text-muted)}
.intake-panel{min-width:0}
.intake-panel fieldset{border:0;padding:0;margin:0;min-width:0}
.intake-panel legend{padding:0;margin-bottom:8px;font:600 26px/1.15 var(--font-head);letter-spacing:-.03em}
.intake-panel .help{font-size:14px;line-height:1.6;color:var(--text-muted)}
.intake-panel h2{font-size:clamp(28px,3vw,36px);margin:4px 0 12px}

/* The chosen path, on steps 2 and 3 */
.intake-path{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;margin:0 0 22px;padding:10px 10px 10px 14px;border-radius:var(--radius-control);background:var(--surface-sunk);font-size:14px;line-height:1.4}
.intake-path>span{color:var(--text-muted);font-size:12.5px}
.intake-path strong{font-weight:600}
.intake-path-change{grid-column:2;grid-row:1/3;min-height:36px;padding:4px 12px;font-size:13px;font-weight:500}

/* Sent */
#confirmation{display:grid;justify-items:start;gap:4px}
#confirmation .eyebrow{margin:14px 0 0}
#confirmation .reference{justify-self:stretch;margin:12px 0 4px}
#confirmation .button{margin-top:16px}
.intake-done{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--text)}
.intake-done::after{content:"";width:16px;height:9px;margin-top:-4px;border-left:2.5px solid var(--bg);border-bottom:2.5px solid var(--bg);transform:rotate(-45deg)}

/* Choosing a path */
.intent-options{display:grid;gap:10px;margin-top:22px}
.intent-options label{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface);cursor:pointer;transition:border-color var(--quick) var(--ease),box-shadow var(--quick) var(--ease)}
.intent-options label:hover{border-color:var(--rule-strong)}
.intent-options label:has(:checked){border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.intent-options label:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.intent-options input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--text)}
.intent-options input:focus-visible{outline:0}
.intent-options strong{display:block;font-size:16px;line-height:1.35;font-weight:600}
.intent-options small{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--text-muted)}
.intent-options label>span[aria-hidden]{margin-left:auto;color:var(--text-muted)}

/* Fields */
.field{display:grid;gap:7px;margin:20px 0}
.field label{font-size:15px;font-weight:600}
.field label span{font-weight:400;color:var(--text-muted)}
.field input,.field select,.field textarea{width:100%;min-width:0;min-height:48px;padding:11px 13px;border:1px solid var(--rule-strong);border-radius:7px;background:var(--surface);color:var(--text);font-size:16px}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2356635b' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.field :is(input,select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--text)}
.field :is(input,select,textarea):user-invalid{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.consent{display:flex;align-items:flex-start;gap:12px;margin-top:8px;font-size:15px}
.consent input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--text)}
.intake-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:28px}
.intake-actions button:last-child{margin-left:auto}
.intake-panel button:disabled{opacity:.6;cursor:wait}

/* Messages */
.form-error{margin-bottom:22px;padding:14px 16px;border-left:3px solid var(--danger);border-radius:0 6px 6px 0;background:#f7e2d6;color:var(--danger)}
.preview-notice{margin-bottom:20px;padding:10px 12px;border-radius:6px;background:#fbefcf;color:#5c4a12;font-size:13px}
.bot-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.reference{padding:14px 16px;border-radius:8px;background:var(--surface-sunk);font-size:14px}
.reference strong{display:block;margin-top:2px;font:500 14px/1.4 var(--font-mono)}
.reference strong{overflow-wrap:anywhere}

/* Option B: one centred sheet, with the introduction and steps at its top */
.intake-layout[data-layout=single]{grid-template-columns:minmax(0,1fr);max-width:760px;gap:0}
.intake-panel>.intake-intro{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.intake-panel>.intake-intro h1{font-size:clamp(32px,3.6vw,44px);margin:12px 0 12px}
.intake-panel>.intake-intro>p:not(.eyebrow){max-width:none;font-size:17px}
.intake-panel>.intake-intro .intake-note{display:none}

/* Steps in a row: on phones, and inside the single sheet */
.intake-panel .intake-progress{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:20px 0 0;font-size:14px}
.intake-panel .intake-progress li{gap:8px;padding:0}
.intake-panel .intake-progress li+li::before{position:static;width:20px;height:1px}
.intake-panel .intake-progress b{width:24px;height:24px;font-size:11px}

@media (max-width:760px){
  .intake-layout{grid-template-columns:1fr;gap:24px;padding-top:32px}
  .intake-intro h1{font-size:40px;margin-bottom:16px}
  .intake-progress{display:flex;flex-wrap:wrap;align-items:center;gap:6px 7px;margin:16px 0 0;font-size:13px}
  .intake-progress li{gap:6px;padding:0}
  .intake-progress li+li::before{position:static;width:9px;height:1px}
  .intake-panel .intake-progress{gap:6px 7px;font-size:13px}
  .intake-panel .intake-progress li+li::before{width:9px}
  .intake-progress b{width:24px;height:24px;font-size:11px}
  .intake-note{display:none}
  .intent-options label{padding:14px 12px}
}

@media (max-width:420px){
  /* Small phones: only the current step keeps its label on screen; the others stay readable to screen readers. */
  .intake-progress li:not([aria-current]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Legacy: Our Process and Workspace still lean on this reset and legend size.
   Move it into their page CSS when those pages adopt the tokens. */
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:25px;font-weight:600;letter-spacing:-.04em;margin-bottom:12px}
