/* Fybr · Request a review: calm, the thread ending at the send button. Loads after base.css. */

.start{padding:calc(var(--header-h) + clamp(40px,7vw,90px)) 0 clamp(80px,10vw,130px);background:radial-gradient(90% 60% at 80% 0%,#0F151C 0%,var(--ground) 60%)}
.start-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"head form" "next form";grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,110px);row-gap:clamp(40px,5vw,70px);align-items:start}
.start-head{grid-area:head}
.start-form{grid-area:form}
.start-next{grid-area:next;position:sticky;top:calc(var(--header-h) + 30px)}
.start-head h1{font-size:clamp(2.9rem,5.6vw,5.2rem);line-height:.98;letter-spacing:-.035em;margin:20px 0 22px}
.start-head .deck{font-size:clamp(1.05rem,1.3vw,1.2rem);color:#D6DEE7;max-width:32rem;line-height:1.55}
.start-assure{margin-top:18px;padding-left:14px;border-left:2px solid var(--brass);max-width:32rem;font-size:.95rem;line-height:1.55;color:var(--ink-mid)}
.start-assure a{color:var(--ink);border-bottom:1px solid rgba(232,184,115,.6);overflow-wrap:anywhere}
.start-next h2{font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:1.04;letter-spacing:-.025em;margin:16px 0 16px}
.start-next > p:not(.eyebrow){color:var(--ink-mid);max-width:30rem;line-height:1.6}
.next-steps{list-style:none;margin:26px 0;padding:0;counter-reset:n}
.next-steps li{position:relative;padding:0 0 20px 34px;counter-increment:n}
.next-steps li::before{content:counter(n);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(232,184,115,.5);font:500 .7rem/20px var(--mono);text-align:center;color:var(--brass)}
.next-steps li:not(:last-child)::after{content:"";position:absolute;left:11px;top:28px;bottom:4px;width:1px;background:linear-gradient(180deg,rgba(232,184,115,.4),rgba(95,168,184,.25))}
.next-steps h3{font-size:1.2rem;margin-bottom:4px}
.next-steps p{color:var(--ink-mid);font-size:.95rem;line-height:1.55}
.next-note{font-size:.9rem;margin:6px 0 16px}

/* ---------- the brief ---------- */
.brief{scroll-margin-top:calc(var(--header-h) + 16px);position:relative;padding:clamp(26px,3vw,40px) clamp(22px,3vw,40px) clamp(26px,3vw,36px) clamp(48px,4.6vw,64px);border:1px solid var(--line-soft);border-radius:8px;background:linear-gradient(180deg,rgba(20,26,33,.86),rgba(13,18,24,.86))}
.brief h2{font-size:clamp(1.6rem,2.3vw,2.1rem);margin-bottom:8px}
.brief-lede{color:var(--ink-mid);margin-bottom:26px}
.brief-thread{position:absolute;left:clamp(22px,2.2vw,30px);top:var(--t0,150px);height:var(--th,60%);width:2px;border-radius:2px;background:rgba(234,240,246,.08)}
.brief-thread__fill{position:absolute;inset:0;border-radius:2px;background:linear-gradient(180deg,var(--teal),#A9B39A 55%,var(--brass));transform-origin:50% 0;transform:scaleY(var(--k,0));transition:transform .6s var(--ease-out);box-shadow:0 0 12px rgba(232,184,115,.25)}

.contact-form{display:grid;gap:20px}
.field{position:relative;display:grid;gap:8px;margin:0;border:0;padding:0;min-width:0}
.field[data-step]::before,.field-row[data-step]::before{content:"";position:absolute;left:calc(-1 * clamp(48px,4.6vw,64px) + clamp(22px,2.2vw,30px) - 4px);top:6px;width:10px;height:10px;border-radius:50%;background:#1A222B;border:1px solid rgba(234,240,246,.2);transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.field[data-step].is-done::before,.field-row[data-step].is-done::before{background:var(--teal);border-color:var(--teal);box-shadow:0 0 10px rgba(95,168,184,.6)}
.field-row[data-step].is-done::before{background:#C9B584;border-color:#C9B584;box-shadow:0 0 10px rgba(201,181,132,.6)}
.field label,.field legend{font-size:.9rem;color:var(--ink);font-weight:500;padding:0}
.field input,.field textarea,.field select{width:100%;box-sizing:border-box;font:400 1rem/1.45 var(--sans);color:var(--ink);background:rgba(7,9,12,.55);border:1px solid rgba(234,240,246,.16);border-radius:4px;padding:12px 13px;transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-mid) 50%),linear-gradient(135deg,var(--ink-mid) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.field input::placeholder,.field textarea::placeholder{color:#6F7B88}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(232,184,115,.18)}
.field small{color:var(--ink-low-text);font-size:.8rem;line-height:1.45}
.field-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.contact-form[hidden],.brief-sent[hidden]{display:none}

/* where you are: three groups, the site's own words */
.stage legend{margin-bottom:10px}
/* which step: the three chips stacked, one per line, so each reads whole */
.step .stage-group{flex-direction:column;align-items:flex-start;margin-bottom:4px}
.stage-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.stage-kicker{flex:0 0 72px;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:8px 12px;border:1px solid rgba(234,240,246,.16);border-radius:3px;font-size:.86rem;color:var(--ink-mid);transition:border-color .16s var(--ease-out),color .16s var(--ease-out),background-color .16s var(--ease-out)}
.chip:hover span{color:var(--ink);border-color:var(--ink-low)}
.chip input:checked + span{color:#152029;background:var(--brass);border-color:var(--brass)}
.chip input:focus-visible + span{outline:2px solid var(--brass);outline-offset:3px}

.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.h-captcha{min-height:144px}
.send{position:relative;display:flex;align-items:center}
.send-node{position:absolute;left:calc(-1 * clamp(48px,4.6vw,64px) + clamp(22px,2.2vw,30px) - 6px);top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#1A222B;border:1px solid rgba(234,240,246,.25);transition:all .5s var(--ease-out)}
.brief.is-ready .send-node{background:var(--brass);border-color:var(--brass);box-shadow:0 0 0 6px rgba(232,184,115,.12),0 0 18px rgba(232,184,115,.55)}
.brief.is-ready .send .button{box-shadow:0 0 28px rgba(232,184,115,.28)}
.brief.is-sending .send-node,.brief.is-sent .send-node{background:#fff;border-color:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.1),0 0 26px rgba(255,255,255,.6)}
.brief.is-sent .brief-thread__fill{transform:scaleY(1)}
.form-message{min-height:1.2em;font-size:.92rem;color:var(--ink)}
.form-message[data-error]{color:#F0B7A6}
.form-reassure{font-size:.82rem;color:var(--ink-low-text);line-height:1.55}
.form-reassure a{color:var(--ink-mid);border-bottom:1px solid rgba(234,240,246,.3)}

.brief-sent{padding:30px 0 10px;text-align:left}
.brief-sent img{width:min(240px,60%);height:auto;margin-bottom:22px;animation:sentIn 1.2s var(--ease-out) both}
.brief-sent h3{font-size:clamp(1.8rem,2.6vw,2.4rem);margin-bottom:10px}
.brief-sent h3:focus{outline:none}
.brief-sent p{color:var(--ink-mid);max-width:30rem}
@keyframes sentIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .start-grid{grid-template-columns:1fr;grid-template-areas:"head" "form" "next"}
  .start-next{position:static}
}
@media (max-width:760px){
  .field-row{grid-template-columns:1fr}
  .stage-kicker{flex-basis:100%;margin:4px 0 2px}
  .brief{padding:24px 18px 26px 40px}
  .brief-thread{left:18px}
  .field[data-step]::before,.field-row[data-step]::before{left:-26px}
  .send-node{left:-28px}
}
@media (prefers-reduced-motion:reduce){
  .brief-thread__fill,.send-node{transition:none}
  .brief-sent img{animation:none}
}