/* ---------------------------------------------------------------
   The enquiry page. Same tokens, same numbering, same three
   channels as the site it hangs off, but held to one screen wide:
   the pitch stays in view on the left while the answers are typed
   on the right, so nobody has to scroll back to remember what they
   were being asked for.
   --------------------------------------------------------------- */
body.eq{background:var(--ink);color:var(--paper);min-height:100svh;display:flex;flex-direction:column}
body.eq::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 40% at 4% 2%,   rgba(255,137,131,.16), transparent 66%),
    radial-gradient(46% 38% at 98% 12%, rgba(169,58,147,.38),  transparent 68%),
    radial-gradient(70% 48% at 40% 104%,rgba(21,131,124,.26),  transparent 70%);
}
body.eq .bar,body.eq .eq__main,body.eq .foot{position:relative;z-index:2}
body.eq .bar__cta{border-color:var(--hair)}
body.eq .bar__cta span{display:inline-block;transition:transform .35s var(--ease)}
body.eq .bar__cta:hover span{transform:translateX(-4px)}

.eq__main{flex:1 0 auto;padding:clamp(2rem,6vh,4.5rem) var(--gut) clamp(4rem,9vh,7rem)}
.eq__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
  max-width:96rem;
}
/* The pitch leads, and stays in view while the form is filled in. The heading
   anchors the left the way every section heading on the site does. */
.eq__side{position:sticky;top:clamp(2rem,5vh,3.5rem)}
.eq__head{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(2rem,4.4vw,3.5rem);letter-spacing:-.045em;line-height:.98;
}
.eq__lede{margin-top:clamp(1.25rem,3vh,2rem);max-width:44ch;color:#A3A3AD;line-height:1.6}

/* what happens after they press send, which is the thing that stops a
   form feeling like shouting into a inbox */
.next{margin-top:clamp(2rem,4.5vh,3rem);display:grid;gap:1.1rem}
.next li{--ch:var(--v);display:flex;gap:1rem;align-items:baseline}
.next li[data-ch="r"]{--ch:var(--r)}
.next li[data-ch="g"]{--ch:var(--g)}
.next li[data-ch="v"]{--ch:var(--v)}
.next b{font-size:.75rem;letter-spacing:.18em;color:var(--ch);flex:none}
.next span{color:#A3A3AD;font-size:.9375rem;line-height:1.5}
.eq__alt{margin-top:clamp(2rem,4vh,2.75rem);color:var(--dim);font-size:.875rem;line-height:1.6}
.eq__alt a{color:var(--paper);border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .35s var(--ease)}
.eq__alt a:hover{border-color:var(--paper)}

/* ---------- the questions ---------- */
.eq__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{
  --ch:var(--v);
  position:relative;border:0;padding:0 0 clamp(1.5rem,3.5vh,2.25rem);margin:0 0 clamp(2.25rem,5vh,3.5rem);
}
.field[data-ch="r"]{--ch:var(--r)}
.field[data-ch="g"]{--ch:var(--g)}
.field[data-ch="v"]{--ch:var(--v)}
.field::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair)}
.field::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--spectrum);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .65s var(--ease);
}
.field:focus-within::after{transform:scaleX(1)}
.field__n{display:block;font-size:.75rem;letter-spacing:.18em;line-height:1;color:var(--ch);margin-bottom:clamp(.9rem,2vh,1.25rem)}
.field__q{
  display:block;padding:0;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.875rem);letter-spacing:-.035em;line-height:1.1;
  color:var(--paper);
}
.field__hint{margin-top:.7rem;max-width:52ch;color:var(--dim);font-size:.9375rem;line-height:1.55}
.field__in{
  display:block;width:100%;
  margin-top:clamp(1.1rem,2.5vh,1.75rem);
  background:transparent;border:0;padding:0 0 .35rem;
  color:var(--paper);
  font:500 clamp(1rem,1.3vw,1.25rem)/1.5 "Bricolage Grotesque","Inter Tight",sans-serif;
  letter-spacing:-.02em;
}
.field__in::placeholder{color:#4E4E58;font-weight:400}
.field__in:focus{outline:none}
.field__in--grow{resize:none;overflow:hidden;min-height:2.2em}
.field:focus-within .field__n{color:var(--paper)}

/* ---------- the package choice ---------- */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.6rem;margin-top:clamp(1.1rem,2.5vh,1.75rem)}
.pick{display:block;cursor:pointer}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick__box{
  display:flex;flex-direction:column;gap:.35rem;height:100%;
  padding:1rem 1.1rem;border:1px solid var(--hair);border-radius:8px;
  background:rgba(255,255,255,.02);
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.pick__box b{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:.9375rem;letter-spacing:-.02em}
.pick__box i{font-style:normal;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.375rem;letter-spacing:-.03em;color:var(--g)}
.pick__box em{font-style:normal;font-size:.75rem;color:var(--dim);line-height:1.4}
.pick:hover .pick__box{border-color:rgba(255,255,255,.28)}
.pick input:checked + .pick__box{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.pick input:checked + .pick__box i{color:var(--ink)}
.pick input:checked + .pick__box em{color:#54545E}
.pick input:focus-visible + .pick__box{outline:2px solid var(--paper);outline-offset:3px}

/* ---------- send ---------- */
.cta--send{width:100%;border:0;text-align:left;cursor:pointer;font:inherit}
.cta--send:focus-visible{outline:2px solid var(--paper);outline-offset:4px}

body.eq .foot{background:transparent;border-top:1px solid var(--hair)}
body.eq .skip{background:var(--paper);color:var(--ink)}

@media (max-width:900px){
  .eq__grid{grid-template-columns:1fr;gap:clamp(2.5rem,6vh,4rem)}
  .eq__side{position:static}
}
@media (prefers-reduced-motion:reduce){
  body.eq .bar__cta:hover span{transform:none}
  .cta:hover{transform:none}
}

/* email and phone share question 05, so the count stays at five */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1.25rem 2rem}
.pair__f{display:block}
.pair__k{
  display:block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-top:clamp(1.1rem,2.5vh,1.75rem);
}
.pair__k i{font-style:normal;color:var(--dimmer);letter-spacing:.08em;text-transform:none}
.pair .field__in{margin-top:.5rem}

/* ---------- the page they land on after sending ---------- */
.done{max-width:44rem;padding-top:clamp(2rem,8vh,6rem)}
.done .eq__head{font-size:clamp(2.25rem,5.4vw,4.25rem)}
.done__back{margin-top:clamp(2.5rem,5vh,3.5rem);max-width:20rem}