/* ============================================================================
   work-with-me.css — the film scoring intake (brief + call booking).
   Page-specific only. Tokens, header, footer, buttons come from style.css +
   site-header.css. Never restyle .foot* or .nav* here.
============================================================================ */

.wrap { max-width: var(--max); margin: 0 auto; }
.wwm-head { padding-bottom: clamp(20px, 3vh, 36px); }

/* ---- stepper ---- */
.stepper {
  list-style: none; margin: 0 var(--gutter); padding: 22px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  border-top: 1px solid var(--hairline);
}
.stepper__step { display: flex; align-items: baseline; gap: 12px; color: var(--ink-mute); transition: color 0.4s; }
.stepper__num { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 28px); line-height: 1; }
.stepper__label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.stepper__step.is-current { color: var(--gold); }
.stepper__step.is-done { color: var(--ink-dim); }
.stepper__step.is-done .stepper__num::after { content: " ✓"; font-style: normal; font-size: 0.6em; color: var(--gold); }
@media (max-width: 600px) { .stepper { grid-template-columns: 1fr; gap: 10px; } }

/* ---- layout ---- */
.intake { padding-top: clamp(28px, 5vh, 56px); }
.intake__grid { max-width: 820px; margin: 0 auto; }

.intake__aside { position: sticky; top: 110px; }
@media (max-width: 900px) { .intake__aside { position: static; } }
.intake__aside .eyebrow { margin-bottom: 14px; }
.intake__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.intake__steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 34px 1fr; gap: 12px;
  padding: 16px 0; border-top: 1px solid var(--hairline);
  font-size: clamp(14px, 1.3vw, 16px); line-height: 1.6; color: var(--ink-dim);
}
.intake__steps li:last-child { border-bottom: 1px solid var(--hairline); }
.intake__steps li::before {
  content: counter(step, upper-roman) ".";
  font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.2; color: var(--gold);
}
.intake__steps strong { color: var(--ink); font-weight: 400; }
.intake__note {
  margin: 28px 0 0; font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--ink-dim);
}
.intake__reel { margin-top: 28px; }

/* ---- numbered section heads (same voice as Screen Scoring) ---- */
.sec-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 clamp(22px, 3vh, 32px); }
.sec-head__num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 2vw, 24px); color: var(--gold); line-height: 1; }
.sec-head__title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.01em; line-height: 1; margin: 0; color: var(--ink); }

/* ---- the form ---- */
.form { display: grid; }
.form.is-sent { opacity: 0.45; pointer-events: none; transition: opacity 0.6s; }
.form__group { padding: 36px 0 4px; border-top: 1px solid var(--hairline); }
.form__group:first-of-type { padding-top: 0; border-top: 0; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; margin-bottom: 28px; min-width: 0; }
.field label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.field label .req { color: var(--gold); margin-left: 4px; }
.field .hint { font-size: 13px; line-height: 1.5; color: var(--ink-mute); margin: 0 0 6px; }

.field input, .field textarea, .field select {
  appearance: none; -webkit-appearance: none;
  width: 100%; box-sizing: border-box;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 10px 0 12px;
  font: inherit; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { min-height: 72px; resize: vertical; }
.field select {
  padding-right: 28px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field select option { color: #1b1714; background: #f5f2ec; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold); }
.field input:-webkit-autofill, .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; transition: background-color 9999s ease-in-out 0s;
}

.form__submit { padding-top: 30px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.form__submit .btn, .book__actions .btn { font-family: inherit; background: transparent; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:disabled:hover { border-color: var(--line); background: transparent; color: var(--ink); }
.btn--gold:disabled:hover { border-color: var(--gold); color: var(--gold); }
.btn--ghost { border-color: transparent; color: var(--ink-dim); padding-left: 8px; padding-right: 8px; }
.form__privacy { font-size: 12.5px; line-height: 1.6; color: var(--ink-mute); max-width: 420px; margin: 0; }
.form__msg { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.form__msg.is-bad { color: #b3453b; }
body.theme-dark .form__msg.is-bad { color: #e08a7e; }

/* ---- step 2: booking ---- */
.book__head { max-width: 720px; margin-bottom: clamp(30px, 5vh, 56px); }
.book__head .eyebrow { margin-bottom: 14px; }
.book__lede { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; color: var(--ink-dim); margin: 0; }
.book__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .book__grid { grid-template-columns: 1fr; } }

.days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.days__loading { grid-column: 1 / -1; font-size: 13px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; }
.day {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 6px 12px; background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font: inherit;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.day__wd { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.day__d { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); }
.day__m { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.day:hover { border-color: var(--gold); color: var(--gold); }
.day.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--gold); }
.day.is-on .day__d { color: var(--gold); }

.slots { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.slot {
  width: 100%; padding: 12px 8px; background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; letter-spacing: 0.08em;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.slot:hover { border-color: var(--gold); color: var(--gold); }
.slot.is-on { border-color: var(--gold); background: var(--gold); color: #000; }
.book__note { margin-top: 6px; }
.book__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.book__done { max-width: 720px; }
.book__done .eyebrow { margin-bottom: 14px; }
.book__done .contact__links { justify-content: flex-start; margin-top: 2em; }

/* ---- thank-you page (Netlify Forms fallback) ---- */
.thanks { text-align: center; padding: clamp(80px, 16vh, 180px) var(--gutter); }
.thanks__inner { max-width: 620px; margin: 0 auto; }
.thanks p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; color: var(--ink-dim); }
.thanks .contact__links { margin-top: 2.2em; }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }