/* ============================================================
   SARAH AKRIDGE — INVESTOR READINESS FORM
   Loaded ONLY by start.html. Kept out of style.css deliberately:
   the other five pages are already browser-verified and this file
   must not be able to regress them.

   Signature: the ghost numeral becomes the step counter. The same
   outlined Fraunces figure that bleeds off every section on this
   site counts 01 → 09 as you advance, and the disqualify screens
   invert the page to full-bleed navy — the same inversion the
   Index rows do on hover. No new visual language is introduced.
   ============================================================ */

/* ---------- 1. Shell ---------- */
.form-wrap { position: relative; }

/* style.css defines c1-5…c8-13 but not this pair — the form needs a wide
   question column plus a narrow right rail for the "why I ask" notes. Declared
   here rather than in the shared stylesheet.
   These are load-bearing: an undefined c* class does not fall back to full
   width, it silently auto-places the div into grid track 1, which collapsed
   the whole questionnaire into a ~180px strip. */
.c1-8  { grid-column: 1 / 9; }
.c9-13 { grid-column: 9 / 13; }

/* The step numeral. Same treatment as .numeral but it animates on change. */
.step-num {
  position: absolute; pointer-events: none; user-select: none;
  right: -.09em; top: -.14em;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(9rem, 22vw, 26rem);
  line-height: .72; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(14,35,64,.07);
  z-index: 0;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.step-num.turn { opacity: 0; transform: translateY(-18px); }

/* ---------- 2. Step progress rail — reuses the .rail language ---------- */
.steps-rail {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  flex-wrap: wrap;
}
.steps-rail .tick {
  width: 18px; height: 1px; background: var(--ink-mute); opacity: .4;
  transition: width .55s var(--ease), background-color .55s var(--ease),
              opacity .55s var(--ease), height .55s var(--ease);
}
.steps-rail .tick.done { background: var(--gold-deep); opacity: .55; }
.steps-rail .tick.here { width: 34px; height: 2px; background: var(--gold); opacity: 1; }
.steps-rail .count {
  font-family: var(--label); font-size: .62rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-mute); margin-left: .8rem;
}
.steps-rail .count b { color: var(--navy); font-weight: 400; }

/* ---------- 3. Steps ---------- */
.step { display: none; }
/* min-height keeps the document a stable height across steps. Without it a
   short step (consent, timeline) shrinks the page so far that the scroll
   target clamps at the document bottom and the step's own heading ends up
   above the viewport. It also stops the rail and numeral jumping about. */
.step.live {
  display: block;
  min-height: min(58vh, 620px);
  animation: stepIn .75s var(--ease-out) both;
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step.live { animation: none; }
}
/* Without JS every step is visible and the noscript notice explains the rest. */
.no-js .step { display: block; margin-bottom: var(--y-tight); }
.no-js .steps-rail, .no-js .step-nav, .no-js .step-num { display: none; }

.step > .over { margin-bottom: 1.1rem; }
/* tabindex="-1" so focus can land here when a step changes, which is what
   announces the new section to a screen reader. It is not interactive, so it
   must not draw a focus ring — Chromium otherwise boxes the heading in gold
   after every Continue press. Real controls keep their :focus-visible ring. */
.step h2 { margin-bottom: 1.1rem; }
.step h2:focus, .step h2:focus-visible,
.outcome .big:focus, .outcome .big:focus-visible { outline: none; }
.step .step-lede {
  font-size: var(--t-0); line-height: 1.6; color: var(--ink-soft);
  max-width: 52ch; margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---------- 4. Questions ---------- */
/* A question is a hairline-separated editorial block, never a card. */
.q {
  border: 0; padding: clamp(1.6rem, 3vw, 2.4rem) 0; margin: 0;
  border-top: 1px solid var(--line);
}
.q:last-of-type { border-bottom: 1px solid var(--line); }
/* legend cannot be laid out like a normal box in every engine, so it is
   floated to full width — which means everything after it must clear. */
.q > legend, .q > .q-t {
  font-family: var(--display); font-size: var(--t-1);
  letter-spacing: -.02em; color: var(--navy); line-height: 1.24;
  padding: 0; margin-bottom: .45rem; float: left; width: 100%;
}
.q > legend + *, .q > .q-t + * { clear: both; }
.q .opts, .q .field, .q .pair, .q .slots, .q .err { clear: both; }
.q .q-hint {
  font-size: var(--t--1); color: var(--ink-mute); line-height: 1.6;
  margin-bottom: 1.3rem; max-width: 56ch;
}
.q .q-hint + .opts, .q > legend + .opts, .q > .q-t + .opts { margin-top: .4rem; }
.q .field { margin-bottom: 0; }
.q .field + .field { margin-top: 1.5rem; }
.q .pair .field + .field { margin-top: 0; }

/* required marker — a gold hairline, not an asterisk */
.q .req {
  display: inline-block; width: 14px; height: 1px;
  background: var(--gold); vertical-align: .34em; margin-left: .55rem;
}

/* ---------- 5. Options — the rail's active language, reused ---------- */
.opts { display: block; }
.opt {
  position: relative;
  display: grid; grid-template-columns: 34px 1fr; align-items: baseline;
  gap: .1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: border-color .4s var(--ease);
}
.opt:first-child { border-top: 1px solid var(--line-soft); }
/* When the legend is visually hidden (the consent group) there is no text
   between the fieldset's own top rule and the first option's, so the two
   hairlines read as a mistake rather than a device. */
.q > legend.sr-only + .opts > .opt:first-child { border-top: 0; }
/* the real control stays in the DOM and focusable — never display:none */
.opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.opt .mk {
  width: 18px; height: 1px; background: var(--ink-mute); opacity: .45;
  margin-top: .72em; align-self: start;
  transition: width .5s var(--ease), height .5s var(--ease),
              background-color .5s var(--ease), opacity .5s var(--ease);
}
.opt .tx {
  font-size: var(--t-0); color: var(--ink-soft); line-height: 1.5;
  transition: color .4s var(--ease);
}
.opt .tx small {
  display: block; font-size: .78rem; color: var(--ink-mute); margin-top: .2rem;
}
.opt input:checked ~ .mk {
  width: 30px; height: 2px; background: var(--gold); opacity: 1;
}
.opt input:checked ~ .tx { color: var(--navy); }
.opt input:focus-visible ~ .mk {
  outline: 2px solid var(--gold-deep); outline-offset: 4px;
}
@media (hover: hover) {
  .opt:hover .mk { opacity: .9; width: 26px; }
  .opt:hover .tx { color: var(--navy); }
}

/* checkbox variant — square that fills, no tick glyph */
.opt.box .mk {
  width: 13px; height: 13px; background: transparent;
  border: 1px solid var(--ink-mute); opacity: .6; margin-top: .42em;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), opacity .4s var(--ease);
}
.opt.box input:checked ~ .mk {
  width: 13px; height: 13px; background: var(--gold); border-color: var(--gold); opacity: 1;
}
@media (hover: hover) {
  .opt.box:hover .mk { width: 13px; opacity: 1; border-color: var(--gold-deep); }
}

/* consent lines sit tighter and read as legal copy, not as choices */
.opt.consent { grid-template-columns: 30px 1fr; padding: 1rem 0; }
.opt.consent .tx { font-size: .87rem; color: var(--ink-soft); line-height: 1.62; }
.opt.consent input:checked ~ .tx { color: var(--ink); }

/* ---------- 6. Aside — "why I ask" ---------- */
.q-aside { align-self: start; }
@media (min-width: 1001px) {
  .q-aside { position: sticky; top: clamp(6.5rem, 14vh, 9rem); }
}
.q-aside .why {
  border-top: 1px solid var(--line); padding-top: 1.4rem;
}
.q-aside .why h3 {
  font-family: var(--label); font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: .9rem; font-weight: 400;
}
.q-aside .why p {
  font-size: var(--t--1); color: var(--ink-soft); line-height: 1.68;
}
.q-aside .why p + p { margin-top: .75em; }
.q-aside .why em { font-style: italic; color: var(--navy); }

/* ---------- 7. Step nav ---------- */
.step-nav {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.back {
  font-family: var(--label); font-size: var(--t--1); letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-mute);
  background: none; border: 0; cursor: pointer; padding: .4rem 0;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color .45s var(--ease);
}
.back .arw { transition: transform .5s var(--ease); }
@media (hover: hover) {
  .back:hover { color: var(--navy); }
  .back:hover .arw { transform: translateX(-5px); }
}
.step-nav .save {
  font-size: .76rem; color: var(--ink-mute); margin-left: auto;
}

/* ---------- 8. Validation ---------- */
.q.bad { border-top-color: var(--gold-deep); }
.q .err {
  display: none;
  font-family: var(--label); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: #9A3521;
  margin-top: 1rem; padding-left: 1.1rem; position: relative;
}
.q .err::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 1px; background: currentColor;
}
.q.bad .err { display: block; }
.field input:invalid:not(:placeholder-shown) { border-color: #9A3521; }

/* ---------- 9. Outcome panels ---------- */
/* Full-bleed navy — the same inversion the Index rows perform on hover. */
.outcome { display: none; }

/* Once an outcome is showing, the intro is hidden and a navy section becomes
   the top of the page — which leaves the nav's navy brand and ink links
   invisible against it at scroll 0. Pin the nav's cream backdrop on instead of
   waiting for the scroll handler's .stuck threshold. */
body.outcome-live .nav-wrap { padding-block: .9rem; }
body.outcome-live .nav-wrap::before { opacity: 1; }
.outcome.live { display: block; animation: stepIn .8s var(--ease-out) both; }
.outcome .big {
  font-family: var(--display); font-size: var(--t-4); line-height: .96;
  letter-spacing: -.035em; color: var(--cream-warm); margin-bottom: 1.8rem;
}
.outcome .lede { max-width: 50ch; }
.outcome .next {
  border-top: 1px solid var(--line-navy); margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
}
.outcome .next h3 {
  font-family: var(--label); font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-light);
  margin-bottom: 1.4rem; font-weight: 400;
}

/* ---------- 10. Booking ---------- */
.booking {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line-navy);
  background: rgba(241,234,220,.04);
}
.booking iframe {
  display: block; width: 100%; height: 640px; border: 0;
  background: var(--cream-warm);
}
@media (max-width: 680px) { .booking iframe { height: 560px; } }
.booking .fallback { padding: clamp(1.4rem, 3vw, 2.2rem); }
.booking .fallback .pair { gap: 1.2rem; }

/* window picker rows */
.slots { border-top: 1px solid var(--line-navy); }
.slot {
  display: grid; grid-template-columns: 2.2rem 1fr 1fr; gap: 1rem;
  align-items: end; padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-navy);
}
.slot .n {
  font-family: var(--label); font-size: .62rem; letter-spacing: .2em;
  color: var(--gold-light); padding-bottom: .9rem;
}
@media (max-width: 680px) {
  .slot { grid-template-columns: 1fr; gap: .6rem; }
  .slot .n { padding-bottom: 0; }
}

/* ---------- 11. Sending / result states ---------- */
.sending {
  display: none; align-items: center; gap: .8rem;
  font-family: var(--label); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 1.6rem;
}
.sending.on { display: flex; }
.sending .dot {
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
  animation: pulse 1.1s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

.sendfail {
  display: none; margin-top: 1.6rem; padding: 1.2rem 1.4rem;
  border: 1px solid rgba(154,53,33,.4); background: rgba(154,53,33,.05);
  font-size: var(--t--1); line-height: 1.65; color: var(--ink-soft);
}
.sendfail.on { display: block; }
.sendfail a { color: var(--gold-deep); border-bottom: 1px solid currentColor; }
.outcome .sendfail { color: var(--on-navy-mute); border-color: rgba(224,196,137,.35); background: rgba(224,196,137,.06); }
.outcome .sendfail a { color: var(--gold-light); }

/* ---------- 12. Intro summary rows ---------- */
.brief { border-top: 1px solid var(--line); }
.brief > div {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1rem, 1.9vw, 1.5rem) 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.brief .k {
  font-family: var(--label); font-size: .62rem; letter-spacing: .2em;
  color: var(--gold-deep);
}
.brief .v { font-size: var(--t--1); color: var(--ink-soft); line-height: 1.6; }
.brief .v strong {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-1); letter-spacing: -.02em; color: var(--navy);
  margin-bottom: .2rem;
}

/* ---------- 13. Responsive ---------- */
@media (max-width: 1000px) {
  .q-aside { display: none; }
  .step-num { font-size: clamp(7rem, 30vw, 14rem); }
}
@media (max-width: 680px) {
  .opt { grid-template-columns: 26px 1fr; }
  .opt .mk { width: 14px; }
  .opt input:checked ~ .mk { width: 20px; }
  .step-nav { flex-direction: column; align-items: stretch; }
  .step-nav .save { margin-left: 0; text-align: center; }
  .step-nav .back { order: 2; justify-content: center; }
}

/* ---------- 14. Print ---------- */
@media print {
  .step, .outcome { display: block !important; }
  .step-num, .steps-rail, .step-nav, .booking { display: none !important; }
}