/* ═══════════════════════════════════════════════════════════════════
   Falconite Marketing — client onboarding

   The device: the page is a ledger being filled in. The rail down the
   side is the same ruled row the case studies and the rate card use,
   and the step numeral is set at display scale like a folio.
   ═══════════════════════════════════════════════════════════════════ */

.ob-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(6.5rem, 12vh, 9rem) var(--px) clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: start;
}

.ob-head { grid-column: 1 / -1; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ob-head h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); }
.ob-head p {
  margin-top: 1.1rem;
  font-size: clamp(1.06rem, .7rem + .7vw, 1.3rem);
  line-height: 1.5;
  color: var(--bone-dim);
  max-width: 52ch;
}

/* ── the rail ─────────────────────────────────────────────── */

.ob-rail {
  list-style: none;
  position: sticky;
  top: 6.5rem;
  border-top: 1px solid var(--hair);
}
.ob-rail li { border-bottom: 1px solid var(--hair); }

.ob-rail button {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: .9rem;
  align-items: baseline;
  padding: .95rem .2rem;
  text-align: left;
  cursor: pointer;
  color: var(--slate);
  transition: color var(--t-hover) ease;
}
/* .is-on / .is-done set colour at 0-3-1, so a plain `button:hover` at
   0-2-1 silently lost — completed steps, the ones you actually want to
   click back to, had no hover feedback at all. */
.ob-rail li:not(.is-on) button:hover { color: var(--gold); }
.ob-rail b {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis-weight: none;
  font-size: 1.05rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.ob-rail span {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ob-rail .is-on button { color: var(--gold); }
.ob-rail .is-done button { color: var(--bone); }
.ob-rail .is-done b::after { content: "\2713"; margin-inline-start: .3rem; color: var(--gold); }

.ob-progress {
  margin-top: 1.1rem;
  height: 3px;
  background: rgba(242, 239, 232, .1);
  overflow: hidden;
}
.ob-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}
.ob-count {
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ── steps ────────────────────────────────────────────────── */

/* fieldsets carry a border, padding and a floated legend by default;
   none of that survives contact with this layout. */
.ob-step, .ob-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.ob-step > legend, .ob-group > legend { display: block; width: 100%; float: none; }

.ob-f { display: block; }

.ob-step { display: none; }
.ob-step.is-on { display: block; animation: obIn .5s var(--ease) both; }
@keyframes obIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ob-step > legend, .ob-step-title {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis-weight: none;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: .008em;
  color: var(--bone);
  padding: 0;
}
.ob-step-note {
  margin-top: .9rem;
  color: var(--slate);
  font-size: 1rem;
  max-width: 58ch;
}
.ob-fields {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ob-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 620px) { .ob-two { grid-template-columns: 1fr; } }

.ob-f > span:first-child, .ob-group > legend {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: .48rem;
  padding: 0;
}
.ob-f > span:first-child em, .ob-group > legend em { color: var(--gold); font-style: normal; }
.ob-hint {
  display: block;
  margin-top: .45rem;
  font-family: var(--serif);
  font-size: .86rem;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--slate);
}

.ob-f input[type="text"], .ob-f input[type="email"], .ob-f input[type="tel"],
.ob-f input[type="url"], .ob-f input[type="date"], .ob-f textarea, .ob-f select {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--bone);
  background: var(--ink-2);
  /* Same reasoning as the contact form: --hair is a divider colour and
     reads at 1.35:1 here. A field boundary is a UI component and needs 3:1
     under WCAG 1.4.11. */
  border: 1px solid var(--field-edge);
  border-radius: 4px;
  padding: .82rem .95rem;
  min-height: 44px;
  transition: border-color var(--t-hover) ease;
}
.ob-f textarea { resize: vertical; min-height: 6.5rem; }
.ob-f select {
  appearance: none;
  padding-inline-end: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23bcbfc6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 6px;
}
.ob-f input:focus, .ob-f textarea:focus, .ob-f select:focus { border-color: var(--gold); outline: none; }
.ob-f input:focus-visible, .ob-f textarea:focus-visible, .ob-f select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.ob-f.is-bad input, .ob-f.is-bad textarea, .ob-f.is-bad select,
.ob-group.is-bad { border-color: #ff7a6b; }
.ob-err {
  display: none;
  margin-top: .45rem;
  font-family: var(--serif);
  font-size: var(--fs-xs);
  letter-spacing: normal;
  text-transform: none;
  color: #ff9d91;
}
.is-bad .ob-err { display: block; }

/* ── chips: multi-select without a card in sight ───────────── */

.ob-group { border: 0; padding: 0; margin: 0; }
.ob-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.ob-chip { position: relative; }
.ob-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.ob-chip span {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem 1.05rem;
  border: 1px solid var(--hair);
  border-radius: 99px;
  font-family: var(--serif);
  font-size: .94rem;
  color: var(--bone-dim);
  transition: border-color var(--t-hover) ease, color var(--t-hover) ease, background var(--t-hover) ease;
}
/* A chip is a checkbox. Without a hover state nothing says it is clickable. */
.ob-chip:hover input:not(:checked) + span { border-color: var(--bone-dim); color: var(--bone); }
.ob-chip input:checked + span { border-color: var(--gold); color: var(--ink); background: var(--gold); }
.ob-chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.ob-chip i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sw);
  border: 1px solid rgba(242, 239, 232, .35);
  flex-shrink: 0;
}

/* radio rows read like the ledger everywhere else on the site */
.ob-rows { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.ob-row { position: relative; border-bottom: 1px solid var(--hair); }
.ob-row input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.ob-row > span {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: .92rem .3rem;
  font-family: var(--serif);
  font-size: var(--fs-sm);
  color: var(--bone-dim);
  transition: color var(--t-hover) ease, background var(--t-hover) ease;
}
.ob-row:hover > span { color: var(--bone); background: rgba(242, 239, 232, .035); }
.ob-row > span::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: .3rem;
  border: 1px solid var(--slate);
  border-radius: 50%;
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.ob-row input:checked + span { color: var(--bone); background: rgba(255, 200, 44, .05); }
.ob-row input:checked + span::before { border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--gold); }
.ob-row input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -2px; }
.ob-row small {
  display: block;
  margin-top: .2rem;
  font-size: var(--fs-xs);
  color: var(--slate);
}

/* ── file drops ───────────────────────────────────────────── */

.ob-drop {
  position: relative;
  border: 1px dashed rgba(242, 239, 232, .24);
  border-radius: 6px;
  padding: 1.5rem 1.2rem;
  text-align: center;
  transition: border-color var(--t-hover) ease, background var(--t-hover) ease;
}
.ob-drop:hover, .ob-drop.is-over { border-color: var(--gold); background: rgba(255, 200, 44, .04); }
.ob-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ob-drop b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-synthesis-weight: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.02rem;
  color: var(--bone);
}
.ob-drop em {
  display: block;
  margin-top: .4rem;
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--slate);
}

.ob-files { list-style: none; margin-top: .85rem; display: flex; flex-direction: column; }
.ob-files li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: .9rem;
  color: var(--bone-dim);
}
.ob-files span { font-family: var(--mono); font-size: var(--fs-label); color: var(--slate); white-space: nowrap; }

/* ── review ───────────────────────────────────────────────── */

.ob-review { border-top: 1px solid var(--hair); margin-top: 1.6rem; }
.ob-review > div {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--hair);
}
.ob-review dt {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
}
.ob-review dd { font-size: var(--fs-sm); color: var(--bone-dim); white-space: pre-wrap; }
.ob-review .ob-skip { color: var(--slate); font-style: italic; }
@media (max-width: 620px) { .ob-review > div { grid-template-columns: 1fr; gap: .25rem; } }

/* ── nav ──────────────────────────────────────────────────── */

.ob-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}
.ob-back {
  appearance: none;
  background: none;
  border: 0;
  color: var(--slate);
  font-family: var(--display);
  font-weight: 400;
  font-synthesis-weight: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .9rem;
  padding: .8rem 0;
  cursor: pointer;
  transition: color var(--t-hover) ease;
}
.ob-back:hover { color: var(--bone); }
.ob-nav .btn { border: 0; }
.ob-saved {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: 0;
  transition: opacity .3s ease;
}
.ob-saved.is-on { opacity: 1; }

/* ── the thank-you ────────────────────────────────────────── */

.ob-done { display: none; }
.ob-done.is-on { display: block; animation: obIn .6s var(--ease) both; }
.ob-done h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.ob-done p { margin-top: 1.2rem; color: var(--bone-dim); max-width: 54ch; }
.ob-files-step {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--field-edge);
  border-radius: 6px;
  color: var(--bone-dim);
  max-width: 54ch;
}
.ob-files-step a { color: var(--gold); }

.ob-done .ob-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

@media (max-width: 900px) {
  .ob-main { grid-template-columns: 1fr; }
  .ob-rail { position: static; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .ob-rail li { border-bottom: 0; }
  .ob-rail button { grid-template-columns: 1fr; gap: .3rem; padding: .7rem .4rem; border-top: 2px solid var(--hair); }
  .ob-rail .is-on button { border-top-color: var(--gold); }
  .ob-rail .is-done button { border-top-color: rgba(255, 200, 44, .4); }
  .ob-rail span { font-size: var(--fs-label); letter-spacing: .08em; }
}
@media (max-width: 520px) {
  .ob-rail { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ob-step.is-on, .ob-done.is-on { animation: none; }
  .ob-progress i { transition: none; }
}

/* ── what onboarding actually involves ──────────────────────
   Sits between the headline and the form. It has to earn that position:
   somebody who knows what they are doing scrolls straight past it, and
   somebody who doesn't gets the two things that stop a ten-minute form
   being abandoned halfway — what to go and find first, and what happens
   once they let go of it.

   Two columns, because the two questions are different in kind: one is a
   checklist you act on before starting, the other is a sequence that
   happens after. The gap between the columns is more than twice the gap
   within either, so they read as two lists rather than one grid. */

.ob-about {
  grid-column: 1 / -1;
  padding-top: clamp(1.1rem, 2.2vw, 1.6rem);
  border-top: 1px solid var(--hair);
}
/* .ob-main is a grid, and its 72px row gap already separates these rows.
   The head's own margin-bottom and a margin-bottom here would both stack
   on top of it — three spacings doing one job, and 110px of dead air
   between the intro and the band. The gap keeps the job. */
.ob-head:has(+ .ob-about) { margin-bottom: 0; }

/* The two halves sit either side of the form, because they belong at
   different moments: the checklist is something you act on before you
   start, and the sequence is what somebody about to press Send wants to
   know. Keeping them together pushed the form to 1571px on a phone — a
   long way down for the page an ad points at. */
.ob-after {
  grid-column: 1 / -1;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--hair);
}
.ob-after h2 {
  margin-top: .5rem;
  font-size: clamp(1.32rem, .9rem + .9vw, 1.85rem);
  line-height: 1.1;
}

/* Both lists spread across the width rather than running as one tall
   column — which is what keeps the block short enough to sit above a
   form without burying it. */
@media (min-width: 820px) {
  .ob-about-list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 3.6rem); }
  .ob-after .ob-about-steps { grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 5vw, 3.4rem); }
}

.ob-about-kind {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slate);
}
.ob-about-col h2 {
  margin-top: .5rem;
  font-size: clamp(1.32rem, .9rem + .9vw, 1.85rem);
  line-height: 1.1;
}

.ob-about-list,
.ob-about-steps {
  margin-top: 1.15rem;
  list-style: none;
  display: grid;
  gap: .72rem;
}
.ob-about-list li,
.ob-about-steps li {
  position: relative;
  padding-left: 1.65rem;
  font-size: clamp(.99rem, .72rem + .28vw, 1.08rem);
  line-height: 1.5;
  color: var(--bone-dim);
}

/* Markers are absolutely positioned rather than set as list markers or
   grid columns. A grid here would split "<b>We read it.</b> trailing
   text" into two grid items and crush the sentence into the marker
   column — the same trap the case-study ledger hit. */
.ob-about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: 1px;
  background: var(--gold);
}
.ob-about-steps { counter-reset: obstep; }
.ob-about-steps li { counter-increment: obstep; }
.ob-about-steps li::before {
  content: counter(obstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .06em;
  font-family: var(--mono);
  font-size: var(--fs-label);
  color: var(--gold);
}
.ob-about-steps li b { color: var(--bone); font-weight: inherit; }

.ob-about-aside,
.ob-about-note {
  margin-top: 1.05rem;
  font-size: clamp(.93rem, .7rem + .22vw, 1rem);
  line-height: 1.55;
  color: var(--slate);
  max-width: 58ch;
}
.ob-about-note {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: 1.05rem;
  border-top: 1px solid var(--hair);
  max-width: none;
}