/* ============================================================
   ASSESSMENT, the qualification experience
   Split layout: the pitch on the left, one question at a time on the
   right. Dark panel so it reads as a consultation, not a web form.
   ============================================================ */

.assess{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
  background:var(--paper);
}

/* ---------- left: why this is worth two minutes ---------- */
.assess__aside{
  position:relative;
  padding:calc(var(--nav-h) + clamp(3rem,7vh,5.5rem)) clamp(1.5rem,4vw,4.5rem) clamp(3rem,6vh,5rem);
  display:flex;flex-direction:column;
  background:
    radial-gradient(100% 70% at 20% 8%, rgba(199,164,114,.16), rgba(199,164,114,0) 60%),
    linear-gradient(170deg,#FCFBF9 0%,#F3EFE8 100%);
}
.assess__t{
  font-family:var(--font-display);
  font-size:min(5.4vw,9vh,4.2rem);
  font-weight:600;letter-spacing:-.038em;line-height:1.02;color:var(--text);
  max-width:14ch;
}
.assess__t .soft{display:block;color:var(--text-3)}
.assess__d{
  margin-top:clamp(1.2rem,2.2vw,1.8rem);max-width:40ch;
  font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.65;color:var(--text-2);
}
.assess__marks{
  margin-top:auto;padding-top:clamp(2rem,4vh,3rem);
  display:grid;gap:1rem;
}
.assess__mark{
  display:flex;gap:12px;align-items:flex-start;
  font-size:var(--fs-sm);line-height:1.55;color:var(--text-2);
}
.assess__mark svg{width:17px;height:17px;flex:none;color:var(--bronze);margin-top:2px}
.assess__meta{
  margin-top:clamp(1.6rem,3vh,2.4rem);padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--text-3);
}

/* ---------- right: the questions ---------- */
.assess__panel{
  position:relative;
  background:var(--ink);color:var(--on-dark);
  padding:calc(var(--nav-h) + clamp(2rem,5vh,3.5rem)) clamp(1.5rem,4vw,4.5rem) clamp(2rem,4vh,3rem);
  display:flex;flex-direction:column;
}
.assess__panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 80% 6%, rgba(199,164,114,.14), rgba(199,164,114,0) 60%);
}
.assess__head{position:relative;z-index:1;flex:none}
.assess__count{
  font-size:var(--fs-xs);letter-spacing:.02em;color:var(--on-dark-3);
}
.assess__bar{
  margin-top:.75rem;height:2px;border-radius:2px;
  background:rgba(255,255,255,.12);overflow:hidden;
}
.assess__bar i{
  display:block;height:100%;width:9%;background:var(--bronze-lite);
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.assess__body{
  position:relative;z-index:1;flex:1;
  padding-top:clamp(2rem,4vh,3rem);
  overflow-y:auto;min-height:0;
}
.assess__foot{
  position:relative;z-index:1;flex:none;
  display:flex;align-items:center;gap:14px;
  padding-top:clamp(1.25rem,2.5vh,2rem);
  border-top:1px solid rgba(255,255,255,.1);
}

/* ---------- one question at a time ---------- */
.q{display:none}
.q.is-active{display:block;animation:qIn .6s cubic-bezier(.22,1,.36,1)}
@keyframes qIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.q__q{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  font-weight:600;letter-spacing:-.028em;line-height:1.18;
  color:var(--on-dark);max-width:22ch;
}
.q__hint{
  margin-top:.7rem;font-size:var(--fs-sm);line-height:1.55;color:var(--on-dark-2);max-width:44ch;
}
.q__fields{margin-top:clamp(1.5rem,3vh,2.2rem);display:grid;gap:1.1rem}
.q__fields--2{grid-template-columns:1fr 1fr}
.q__fields--2 .f--wide{grid-column:1/-1}
@media(max-width:640px){ .q__fields--2{grid-template-columns:1fr} }

/* ---------- inputs ---------- */
.f{display:grid;gap:8px}
.f__l{font-size:var(--fs-xs);color:var(--on-dark-2)}
.f__l em{font-style:normal;color:var(--bronze-lite)}
.f__i,.f__s,.f__a{
  width:100%;padding:14px 2px;
  background:transparent;color:var(--on-dark);
  border:0;border-bottom:1px solid rgba(255,255,255,.22);
  font-size:1rem;border-radius:0;
  transition:border-color .3s var(--ease);
}
.f__a{min-height:120px;resize:vertical;line-height:1.6;padding-top:8px}
.f__i::placeholder,.f__a::placeholder{color:rgba(244,242,238,.34)}
.f__i:focus,.f__s:focus,.f__a:focus{outline:none;border-bottom-color:var(--bronze-lite)}
.f__s{
  appearance:none;cursor:pointer;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23A3A6AC' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:12px;
}
.f__s option{background:var(--ink-2);color:var(--on-dark)}
.f.has-error .f__i,.f.has-error .f__s,.f.has-error .f__a{border-bottom-color:#C86A5E}
.f__err{font-size:var(--fs-xs);color:#D98A7E;display:none}
.f.has-error .f__err{display:block}

/* ---------- choice chips ---------- */
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts.has-error{
  outline:1px solid rgba(200,106,94,.5);outline-offset:10px;border-radius:6px;
}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  color:var(--on-dark-2);font-size:.9375rem;cursor:pointer;
  transition:all .25s var(--ease);
}
.opt span::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.26);transition:background .25s var(--ease);
}
.opt:hover span{border-color:rgba(255,255,255,.34);color:var(--on-dark)}
.opt input:checked + span{
  border-color:var(--bronze-lite);
  background:rgba(199,164,114,.14);
  color:var(--on-dark);
}
.opt input:checked + span::before{background:var(--bronze-lite)}
.opt input:focus-visible + span{outline:2px solid var(--bronze-lite);outline-offset:3px}

.helpers{
  margin-top:.9rem;display:flex;flex-wrap:wrap;gap:8px;
}
.helpers span{
  font-size:var(--fs-xs);color:var(--on-dark-3);
  padding:5px 11px;border-radius:999px;border:1px dashed rgba(255,255,255,.16);
}

/* ---------- buttons ---------- */
.a-btn{
  display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:0 28px;border-radius:999px;
  font-size:1rem;font-weight:500;white-space:nowrap;
  background:var(--paper);color:var(--ink);border:1px solid var(--paper);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.a-btn:hover{transform:translateY(-1px);background:#fff}
.a-btn svg{width:15px;height:15px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.a-btn:hover svg{transform:translateX(3px)}
.a-btn--ghost{
  background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.24);
}
.a-btn--ghost:hover{background:transparent;border-color:rgba(255,255,255,.5)}
.assess__foot .a-btn:last-child{margin-left:auto}

/* ---------- the close ---------- */
.thanks{display:none}
.assess.is-done .assess__body,
.assess.is-done .assess__foot,
.assess.is-done .assess__head{display:none}
.assess.is-done .thanks{
  display:block;position:relative;z-index:1;
  animation:qIn .8s cubic-bezier(.22,1,.36,1);
  padding-block:clamp(1rem,4vh,3rem);
}
.thanks__mark{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(199,164,114,.16);border:1px solid rgba(199,164,114,.4);
  color:var(--bronze-lite);margin-bottom:1.6rem;
}
.thanks__mark svg{width:22px;height:22px}
.thanks__t{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--on-dark);
}
.thanks__p{
  margin-top:1.1rem;max-width:46ch;
  font-size:1.02rem;line-height:1.65;color:var(--on-dark-2);
}
.thanks__card{
  margin-top:clamp(1.8rem,3vh,2.4rem);
  padding:clamp(1.25rem,2.4vw,1.8rem);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
}
.thanks__k{
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-lite);margin-bottom:.9rem;
}
.thanks__card ul{display:grid;gap:.75rem}
.thanks__card li{
  font-size:var(--fs-sm);line-height:1.55;color:var(--on-dark-2);
  padding-left:1.1rem;position:relative;
}
.thanks__card li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--bronze-lite);
}
.thanks__next{
  margin-top:clamp(1.6rem,3vh,2.2rem);padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--fs-sm);color:var(--on-dark-3);
}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .assess{grid-template-columns:1fr;min-height:auto}
  .assess__aside{padding-bottom:clamp(2rem,5vh,3rem)}
  .assess__marks{margin-top:2rem}
  .assess__panel{padding-top:clamp(2rem,5vh,3rem);min-height:auto}
  .assess__body{overflow:visible}
}
@media(max-width:560px){
  .assess__foot{flex-wrap:wrap}
  .assess__foot .a-btn{flex:1 1 100%;justify-content:center}
  .assess__foot .a-btn:last-child{margin-left:0}
}