/* ==========================================================================
   ContactBrief.css — Option C · Brief Builder
   Full-bleed wizard. One question per step. JS in /assets/js/contact-brief.js.
   ========================================================================== */

.contact--brief {
  background: var(--paper);
  color: var(--ink);
  min-height: 80vh;
  padding: 0 var(--container-px) clamp(6rem, 12vw, 10rem);
  display: flex;
  flex-direction: column;
}

.contact--brief *:where(.visually-hidden) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Progress strip
   ========================================================================== */

.contact-brief__progress {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-brief__progress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  flex: none;
  min-width: 4ch;
}

.contact-brief__progress-track {
  flex: 1;
  height: 2px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.contact-brief__progress-fill {
  height: 100%;
  background: var(--brand-gradient);
  border-radius: 999px;
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Persistent answer chips
   ========================================================================== */

.contact-brief__chips {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 1.6rem;
}

.contact-brief__chip-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-brief__chip-pill strong {
  font-weight: 500;
  color: var(--ink);
}

/* Form & step container
   ========================================================================== */

.contact-brief__form {
  position: relative;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}

.contact-brief__step {
  display: none;
  padding-top: clamp(2rem, 5vw, 4rem);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.32s ease-out, transform 0.32s ease-out;
}

.contact-brief__step.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Eyebrow / question / labels
   ========================================================================== */

.contact-brief__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
}

.contact-brief__question {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}

.contact-brief__field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.65rem;
  padding: 0;
}

/* Inputs (large, editorial)
   ========================================================================== */

.contact-brief__field {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.contact-brief__field input[type="text"],
.contact-brief__field input[type="email"],
.contact-brief__field textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--rule-strong);
  padding: 0.7rem 0;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s ease;
}

.contact-brief__field textarea {
  resize: vertical;
  min-height: 140px;
  font-size: 1.0625rem;
}

.contact-brief__field input:focus,
.contact-brief__field textarea:focus {
  border-image: var(--brand-gradient) 1;
  border-image-slice: 0 0 1 0;
}

.contact-brief__field input::placeholder,
.contact-brief__field textarea::placeholder {
  color: var(--ink-faint);
}

.contact-brief__field-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 600px) {
  .contact-brief__field-pair {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
}

/* Project type cards
   ========================================================================== */

.contact-brief__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 600px) {
  .contact-brief__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

.contact-brief__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-brief__card:hover {
  border-color: var(--ink);
}

.contact-brief__card:active {
  transform: scale(0.985);
}

.contact-brief__card input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.contact-brief__card:has(input:checked) {
  border-color: transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 12px 28px -14px rgba(160, 100, 169, 0.4);
}

.contact-brief__card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--ink);
}

.contact-brief__card-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* Segmented controls (timeline / budget on step 4)
   ========================================================================== */

.contact-brief__segmented-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  min-width: 0;
}

.contact-brief__segmented {
  display: grid;
  /* Always 5 columns. minmax(0, 1fr) lets cells shrink below content width
     so the strip never overflows on narrow mobile viewports (~320px). */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--paper);
  padding: 4px;
  gap: 2px;
}

.contact-brief__segment {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.contact-brief__segment input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.contact-brief__segment span {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.6rem 0.3rem;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 480px) {
  .contact-brief__segment span {
    font-size: 11.5px;
    letter-spacing: 0.1em;
    padding: 0.6rem 0.5rem;
  }
}

/* iPhone SE / very narrow viewports — allow long labels ("Exploring",
   "Not sure") to wrap to two lines instead of overflowing the segment. */
@media (max-width: 359px) {
  .contact-brief__segment span {
    white-space: normal;
    line-height: 1.15;
    letter-spacing: 0;
  }
}

.contact-brief__segment:has(input:checked) span {
  background: var(--brand-gradient);
  color: var(--white);
  box-shadow: 0 6px 16px -8px rgba(160, 100, 169, 0.55);
}

/* Review block on final step
   ========================================================================== */

.contact-brief__review {
  margin-top: 1.75rem;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 14px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  display: grid;
  gap: 0.4rem;
}

.contact-brief__review:empty {
  display: none;
}

.contact-brief__review-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  align-items: baseline;
}

.contact-brief__review-row dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.contact-brief__review-row dd {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 0;
  word-break: break-word;
}

/* Inline validation error
   ========================================================================== */

.contact-brief__error {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: rgba(220, 38, 38, 0.06);
  border-left: 2px solid #dc2626;
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
}

.contact-brief__error[hidden] {
  display: none;
}

/* Footer (Back / Continue / Submit)
   ========================================================================== */

.contact-brief__footer {
  position: sticky;
  bottom: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(to top, var(--paper) 70%, rgba(247, 253, 252, 0));
}

@media (max-width: 899px) {
  /* Lift footer above the global mobile tabbar (which sits at the bottom) */
  .contact-brief__footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

.contact-brief__back {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}

.contact-brief__back:hover { border-color: var(--ink); }
.contact-brief__back:active { transform: scale(0.96); }

.contact-brief__back[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Continue (steps 1–4): ink-solid pill, primary but neutral. The stepper.
   ────────────────────────────────────────────────────────────────────────── */
.contact-brief__continue {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}

.contact-brief__continue:hover {
  filter: none;
  opacity: 1;
  background: #20223e;
}

.contact-brief__continue:active { transform: scale(0.96); }

.contact-brief__continue[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.contact-brief__continue-pulse {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(247, 253, 252, 0.28);
  flex: none;
}

/* Submit (step 5 only): gradient pill with arrow signature, slightly
   larger than Continue. Shown only on the final step via JS — see
   contact-brief.js → showStep(). The gradient is reserved for this
   moment so it reads as the climactic gesture, not another step.
   ────────────────────────────────────────────────────────────────────────── */
.contact-brief__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
  padding: 1rem 1.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(160, 100, 169, 0.5);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.contact-brief__submit:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -14px rgba(160, 100, 169, 0.6);
}

.contact-brief__submit:active { transform: scale(0.96); }

/* The buttons set their own display, which has the same specificity as the
   UA's [hidden] { display: none } rule and would otherwise win — meaning the
   `hidden` attribute (toggled by JS) wouldn't actually hide them. Restore
   the expected behavior here. */
.contact-brief__continue[hidden],
.contact-brief__submit[hidden] {
  display: none;
}

.contact-brief__submit-arrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--white);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-brief__submit:hover .contact-brief__submit-arrow {
  transform: translateX(4px);
}

/* Thanks state
   ========================================================================== */

.contact-brief__thanks {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding-top: clamp(2rem, 5vw, 4rem);
}

.contact-brief__thanks-body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  max-width: 56ch;
}

/* ==========================================================================
   Mobile refinements (≤ 599px)
   Tightens vertical rhythm, gives wrapped questions breathing room,
   bumps tap targets to iOS HIG (44pt), reflows the footer so the gradient
   Submit pill never overflows narrow viewports, and stacks the step-5
   review rows so values get full width on small screens.
   ========================================================================== */
@media (max-width: 599px) {
  /* Trim the chrome stack at the top so the question reaches the eye
     faster. Combined we go from 64–120px of pre-question whitespace down
     to roughly 40–70px. */
  .contact-brief__progress {
    padding: clamp(1.25rem, 4vw, 2.5rem) 0 0.75rem;
    gap: 0.75rem;
  }

  .contact-brief__chips {
    padding-top: 0.25rem;
    min-height: 0;
  }

  .contact-brief__step {
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* Looser leading on the editorial heading once it wraps to multiple
     lines. 1.05 reads fine on a single-line desktop question but feels
     stacked on 2–3 mobile lines. */
  .contact-brief__question {
    line-height: 1.12;
    margin-bottom: 1.5rem;
  }

  /* Bring segment touch targets up to 44pt and let them breathe a touch
     more vertically. */
  .contact-brief__segment span {
    min-height: 44px;
  }

  /* Stack review rows so the value gets the full width — 7rem + 1fr at
     320px leaves only ~152px for an email or budget string. */
  .contact-brief__review-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  /* Footer: let the primary action grow to fill the remaining row so
     "Send message →" never overflows on iPhone SE (~280px usable width).
     Back stays compact on the left; Continue / Submit flex to fill the
     rest, justifying their content centered. */
  .contact-brief__footer {
    gap: 0.5rem;
  }

  .contact-brief__continue,
  .contact-brief__submit {
    flex: 1;
    justify-content: center;
    margin-left: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .contact-brief__back {
    padding: 0.85rem 1rem;
  }
}

/* ==========================================================================
   Dark mode (prefers-color-scheme: dark)
   Mirrors the treatment used by /home, /how-we-work, /capabilities, /projects:
   #0A0B1B page surface, paper text, brand gradients preserved, neutral
   shadows/depth pulled back. Primary "Continue" flips ink → paper.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .contact--brief {
    background: #0A0B1B;
    color: var(--paper);
  }

  /* Progress strip */
  .contact-brief__progress-label {
    color: rgba(245, 241, 232, 0.6);
  }

  .contact-brief__progress-track {
    background: rgba(245, 241, 232, 0.14);
  }

  /* Answer chips */
  .contact-brief__chip-pill {
    background: rgba(245, 241, 232, 0.05);
    border-color: rgba(245, 241, 232, 0.14);
    color: rgba(245, 241, 232, 0.7);
  }

  .contact-brief__chip-pill strong {
    color: var(--paper);
  }

  /* Eyebrow / question / labels */
  .contact-brief__eyebrow,
  .contact-brief__field-label {
    color: rgba(245, 241, 232, 0.6);
  }

  .contact-brief__question {
    color: var(--paper);
  }

  /* Inputs */
  .contact-brief__field input[type="text"],
  .contact-brief__field input[type="email"],
  .contact-brief__field textarea {
    color: var(--paper);
    border-bottom-color: rgba(245, 241, 232, 0.28);
  }

  .contact-brief__field input::placeholder,
  .contact-brief__field textarea::placeholder {
    color: rgba(245, 241, 232, 0.35);
  }

  /* Project type cards */
  .contact-brief__card {
    background: rgba(245, 241, 232, 0.04);
    border-color: rgba(245, 241, 232, 0.14);
  }

  .contact-brief__card:hover {
    border-color: rgba(245, 241, 232, 0.45);
  }

  /* Checked state keeps the brand-gradient border but rebases the inner fill
     onto a dark surface so the card no longer reads as a bright paper panel. */
  .contact-brief__card:has(input:checked) {
    background:
      linear-gradient(rgba(245, 241, 232, 0.06), rgba(245, 241, 232, 0.06)) padding-box,
      var(--brand-gradient) border-box;
  }

  .contact-brief__card-title {
    color: var(--paper);
  }

  .contact-brief__card-body {
    color: rgba(245, 241, 232, 0.7);
  }

  /* Segmented controls */
  .contact-brief__segmented {
    background: rgba(245, 241, 232, 0.04);
    border-color: rgba(245, 241, 232, 0.14);
  }

  .contact-brief__segment span {
    color: rgba(245, 241, 232, 0.7);
  }
  /* Checked segment keeps brand-gradient fill — readable on dark as-is. */

  /* Review block on final step */
  .contact-brief__review {
    background: rgba(245, 241, 232, 0.05);
    border-color: rgba(245, 241, 232, 0.12);
  }

  .contact-brief__review-row dt {
    color: rgba(245, 241, 232, 0.6);
  }

  .contact-brief__review-row dd {
    color: var(--paper);
  }

  /* Inline error */
  .contact-brief__error {
    color: var(--paper);
    background: rgba(220, 38, 38, 0.14);
  }

  /* Footer fade — switch the mask color to match the dark page */
  .contact-brief__footer {
    background: linear-gradient(to top, #0A0B1B 70%, rgba(10, 11, 27, 0));
  }

  /* Back button */
  .contact-brief__back {
    border-color: rgba(245, 241, 232, 0.22);
    color: var(--paper);
  }

  .contact-brief__back:hover {
    border-color: rgba(245, 241, 232, 0.5);
  }

  /* Continue (steps 1–4): flip to paper fill on dark so it remains the
     primary stepper without being a near-invisible ink-on-ink pill. */
  .contact-brief__continue {
    background: var(--paper);
    color: var(--ink);
  }

  .contact-brief__continue:hover {
    background: #E5EDEA;
  }

  .contact-brief__continue-pulse {
    background: var(--ink);
    box-shadow: 0 0 0 3px rgba(20, 21, 42, 0.28);
  }

  /* Submit (step 5): brand-gradient pill is preserved; its purple glow
     reads as a brand signature on dark and matches the rest of the site. */

  /* Thanks state */
  .contact-brief__thanks-body {
    color: rgba(245, 241, 232, 0.72);
  }
}