/* =========================================================
   1:1 COACHING APPLICATION: Flexibility Maestro
   Same design system as the HKMP and coaching pages.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --red:#ED1C24;
  --red-deep:#C4141B;
  --red-soft:rgba(237,28,36,.12);

  --ink:#0E0E0E;
  --ink-2:#161616;
  --ink-3:#232323;
  --ink-4:#2E2E2E;

  --paper:#F5F4F2;
  --paper-2:#FFFFFF;
  --line:#E2E0DC;

  --white:#FFFFFF;
  --mute:#9A9A9A;
  --mute-d:#6B6B6B;

  --maxw:1180px;
  --gut:clamp(1rem,5vw,2.5rem);
  --r:14px;
  --r-sm:9px;

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms var(--ease);
  --t-med:320ms var(--ease);
  --t-slow:620ms var(--ease);

  --f-head:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--ink);color:var(--white);
  font:400 16px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;padding:.7rem 1.1rem;font-weight:600}
.skip:focus{left:8px;top:8px}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--nar{max-width:820px}
.sec{padding:clamp(3.5rem,9vw,6.5rem) 0;position:relative}
.sec--dark{background:var(--ink);color:var(--white)}
.sec--light{background:var(--paper);color:var(--ink)}
.center{text-align:center}

/* ---------- TYPE ---------- */
.h1{
  font:800 clamp(2.15rem,6.4vw,3.15rem)/1.02 var(--f-head);
  letter-spacing:-.032em;margin:.55rem 0 0;
}
.h2{
  font:800 clamp(1.75rem,4.4vw,2.85rem)/1.05 var(--f-head);
  letter-spacing:-.028em;margin:.4rem 0 0;
}
.h3{font:700 clamp(1.2rem,2.4vw,1.6rem)/1.15 var(--f-head);letter-spacing:-.02em}
.h4{font:700 clamp(1.05rem,2vw,1.22rem)/1.2 var(--f-head);letter-spacing:-.015em}

.eyebrow{
  font:500 clamp(.63rem,1.35vw,.72rem)/1.45 var(--f-mono);
  text-transform:uppercase;letter-spacing:.14em;color:var(--mute);
  margin:0;position:relative;padding-bottom:.62rem;
}
.sec--light .eyebrow{color:var(--mute-d)}
.eyebrow--red{color:var(--red)}
/* signature: red rule wipes in under every eyebrow */
.eyebrow::after{
  content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--ease) 120ms;
}
.eyebrow.center::after{left:50%;transform:translateX(-50%) scaleX(0)}
.is-in .eyebrow::after,.eyebrow.is-in::after{transform:scaleX(1)}
.is-in .eyebrow.center::after,.eyebrow.center.is-in::after{transform:translateX(-50%) scaleX(1)}

.lede{color:var(--mute);font-size:clamp(.95rem,1.9vw,1.06rem);line-height:1.62;margin-top:1.1rem}
.lede b{color:var(--white);font-weight:600}
.sec--light .lede{color:var(--mute-d)}
.micro{font:500 .72rem/1.5 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin-top:.7rem}
.red{color:var(--red)}
.strike{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}

/* =========================================================
   MOTION SYSTEM
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow),transform var(--t-slow);
  transition-delay:calc(var(--i,0) * 60ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* line-mask headline reveal */
.mask > span{display:block;overflow:hidden}
.mask > span > span{display:block;transform:translateY(105%);
  transition:transform 720ms var(--ease)}
.mask > span:nth-child(2) > span{transition-delay:90ms}
.mask > span:nth-child(3) > span{transition-delay:180ms}
.mask.is-in > span > span{transform:none}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --bg:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--bg);color:#fff;font:600 .95rem/1 var(--f-body);
  padding:.95rem 1.5rem;border-radius:var(--r-sm);border:1px solid transparent;
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
  box-shadow:0 1px 0 rgba(0,0,0,.2);white-space:nowrap;
}
.btn:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 8px 22px rgba(237,28,36,.28)}
.btn:active{transform:scale(.98) translateY(0);transition-duration:80ms}
.btn__arw{display:inline-block;transition:transform var(--t-fast)}
.btn:hover .btn__arw{transform:translateX(4px)}
.btn--sm{padding:.66rem 1.05rem;font-size:.85rem}
.btn--lg{padding:1.12rem 1.9rem;font-size:1.02rem}
.btn--full{width:100%}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.22)}

.undlink{
  display:inline-block;margin-top:.9rem;font-size:.87rem;color:var(--mute);
  border-bottom:1px solid currentColor;padding-bottom:1px;transition:color var(--t-fast)
}
.undlink:hover{color:var(--red)}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{position:sticky;top:0;z-index:90;background:rgba(14,14,14,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-3)}
.hdr__in{max-width:var(--maxw);margin-inline:auto;padding:.72rem var(--gut);
  display:flex;align-items:center;gap:1.4rem}
.hdr__logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.hdr__logo img{width:38px;height:auto}
.hdr__logo span{font:800 .95rem/1 var(--f-head);letter-spacing:-.02em;text-transform:uppercase}
.hdr__logo em{color:var(--red);font-style:normal}


/* =========================================================
   UTILITIES
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
kbd{font:600 .64rem/1 var(--f-mono);padding:.2rem .4rem;border:1px solid var(--ink-4);
  border-radius:4px;color:#CFCFCF;background:var(--ink-3)}

/* =========================================================
   HEADER (minimal: an application page offers no exits)
   ========================================================= */
.hdr__meta{margin-left:auto;display:flex;align-items:center;gap:.55rem;
  font:500 .66rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--mute);text-align:right}
.hdr__short{display:none}
.hdr__dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto;
  animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(237,28,36,.55)}
  70%{box-shadow:0 0 0 8px rgba(237,28,36,0)}100%{box-shadow:0 0 0 0 rgba(237,28,36,0)}}

/* =========================================================
   PAGE
   ========================================================= */
.apply{position:relative;min-height:calc(100vh - 62px);
  padding:clamp(1.6rem,5vw,3.4rem) 0 clamp(2.6rem,7vw,4.6rem)}
.apply__bg{position:absolute;inset:0;z-index:0}
.apply__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;opacity:.14}
.apply__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,14,14,.72) 0%,var(--ink) 78%)}
.apply__grid{position:relative;z-index:1;display:grid;gap:1.6rem;align-items:start}
.apply .h1{font-size:clamp(2.05rem,6vw,3.05rem)}
.apply .lede{max-width:38ch}

.next{display:grid}
.next li{display:flex;gap:.9rem;padding:.85rem 0;border-top:1px solid var(--ink-3)}
.next li:last-child{border-bottom:1px solid var(--ink-3)}
.next i{font:700 .66rem/1.95 var(--f-mono);font-style:normal;color:var(--red);flex:0 0 auto}
.next b{display:block;font:700 .95rem/1.3 var(--f-head);letter-spacing:-.01em}
.next span{display:block;font-size:.86rem;line-height:1.5;color:var(--mute);margin-top:.15rem}

/* =========================================================
   CARD
   ========================================================= */
.card{position:relative;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);scroll-margin-top:84px}
.card__bar{height:3px;background:var(--ink-3);border-radius:17px 17px 0 0;overflow:hidden}
.card__fill{display:block;height:100%;width:0;background:var(--red);
  transition:width 520ms var(--ease)}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem 0}
.card__count{font:700 .72rem/1 var(--f-mono);letter-spacing:.12em;color:var(--white)}
.card__count span{color:var(--mute-d)}
.card__reset{font:500 .64rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--mute);padding:.35rem 0;border-bottom:1px solid transparent;
  transition:color var(--t-fast),border-color var(--t-fast)}
.card__reset:hover{color:var(--red);border-color:currentColor}

.card__stage{position:relative;padding:1.15rem 1.3rem 1.4rem;min-height:290px}
.card__loading{color:var(--mute);font-size:.9rem}

.card__nav{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:.8rem;
  padding:.95rem 1.3rem;padding-bottom:calc(.95rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--ink-3);background:#121212;border-radius:0 0 17px 17px}
.card__back{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .15rem;
  font:500 .88rem var(--f-body);color:var(--mute);transition:color var(--t-fast)}
.card__back:hover{color:var(--white)}
.card__back[disabled]{visibility:hidden}
.card__hint{margin-left:auto;font:500 .66rem/1 var(--f-mono);color:var(--mute-d);display:none;
  white-space:nowrap}
.card__nav .btn{margin-left:auto}
.btn[disabled]{background:var(--ink-4);color:#7A7A7A;box-shadow:none;transform:none;cursor:not-allowed}
.btn[disabled] .btn__arw{transform:none}
.btn.is-busy{pointer-events:none}
.btn.is-busy .btn__arw{width:14px;height:14px;font-size:0;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.card__err{margin:0 1.3rem 1.2rem;padding:.85rem 1rem;border:1px solid rgba(237,28,36,.5);
  background:var(--red-soft);border-radius:var(--r-sm);font-size:.88rem;line-height:1.5;color:#FFD9DB}
.card__noscript{padding:1.3rem;color:var(--mute)}

/* =========================================================
   QUESTION
   ========================================================= */
.q.is-fwd{animation:qInF 380ms var(--ease)}
.q.is-back{animation:qInB 380ms var(--ease)}
@keyframes qInF{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes qInB{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.q__title{font:800 clamp(1.28rem,3.4vw,1.7rem)/1.18 var(--f-head);letter-spacing:-.025em;outline:none}
/* the applicant's own name, picked up from question one */
.q__title em{font-style:normal;color:var(--red)}
.q__help{margin-top:.5rem;color:var(--mute);font-size:.9rem;line-height:1.5}
.q__body{margin-top:1.25rem}
.q__note{margin-top:.9rem;font:500 .66rem/1.5 var(--f-mono);text-transform:uppercase;
  letter-spacing:.08em;color:var(--mute-d)}

/* ---------- option buttons (single + multi) ---------- */
.opts{display:grid;gap:.5rem}
.opt{position:relative;display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  padding:.82rem .9rem;border:1px solid var(--ink-4);border-radius:12px;
  background:rgba(255,255,255,.015);color:#E4E4E4;font:500 .93rem/1.3 var(--f-body);
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.opt:hover{border-color:#4A4A4A;background:rgba(255,255,255,.04)}
.opt:active{transform:scale(.985)}
.opt__key{flex:0 0 auto;display:grid;place-content:center;width:1.55rem;height:1.55rem;
  border:1px solid var(--ink-4);border-radius:6px;font:700 .62rem/1 var(--f-mono);color:var(--mute);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.opt__label{flex:1;min-width:0}
.opt__tick{flex:0 0 auto;width:18px;height:18px;opacity:0;transform:scale(.5);
  transition:opacity var(--t-fast),transform 260ms var(--ease)}
.opt__tick path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset 300ms var(--ease) 60ms}
.opt.is-on{border-color:var(--red);background:var(--red-soft);color:#fff}
.opt.is-on .opt__key{background:var(--red);border-color:var(--red);color:#fff}
.opt.is-on .opt__tick{opacity:1;transform:none}
.opt.is-on .opt__tick path{stroke-dashoffset:0}
.opt.is-pop{animation:pop 280ms var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(.965)}100%{transform:scale(1)}}

.opts--grid3 .opt{padding:.72rem .75rem;font-size:.9rem;gap:.6rem}
.opts--grid3 .opt__tick{display:none}

.other{margin-top:.8rem}
.other.is-in{animation:qInF 300ms var(--ease)}

/* ---------- inputs ---------- */
.field{display:block}
.field + .field{margin-top:.8rem}
.field__label{display:block;margin-bottom:.45rem;font:500 .64rem/1 var(--f-mono);
  text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.inp{display:block;width:100%;background:var(--ink);border:1px solid var(--ink-4);border-radius:12px;
  color:var(--white);font:500 1rem/1.45 var(--f-body);padding:.85rem 1rem;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.inp::placeholder{color:#5E5E5E}
.inp:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.18)}
.inp.is-bad{border-color:var(--red)}
textarea.inp{resize:vertical;min-height:84px;font-size:.95rem}
.inp--big{font:700 clamp(1.15rem,3vw,1.45rem)/1.3 var(--f-head);letter-spacing:-.02em;padding:1rem 1.1rem}
.field__err{margin-top:.45rem;font-size:.8rem;color:#FF8A90}

/* ---------- tap chips (struggles, goals) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .85rem;
  border:1px solid var(--ink-4);border-radius:999px;font:500 .84rem/1.2 var(--f-body);color:#D4D4D4;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.chip::before{content:"+";font:700 .8rem/1 var(--f-mono);color:var(--mute-d);transition:color var(--t-fast)}
.chip:hover{border-color:#4A4A4A;color:#fff}
.chip:active{transform:scale(.96)}
.chip.is-on{background:var(--red);border-color:var(--red);color:#fff}
.chip.is-on::before{content:"\2713";color:#fff}
.chips + .field{margin-top:1rem}

/* ---------- 1 to 7 scale ---------- */
.scale{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}
.scale__b{display:grid;place-content:center;aspect-ratio:1/1.08;border:1px solid var(--ink-4);
  border-radius:12px;font:800 clamp(1.1rem,3.6vw,1.5rem)/1 var(--f-head);color:#E4E4E4;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.scale__b:hover{border-color:#4A4A4A;background:rgba(255,255,255,.04)}
.scale__b:active{transform:scale(.95)}
.scale__b.is-on{background:var(--red);border-color:var(--red);color:#fff}
.scale__ends{display:flex;justify-content:space-between;margin-top:.55rem;
  font:500 .6rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute-d)}

/* ---------- week builder (tap to count sessions) ---------- */
.wchips{display:flex;flex-wrap:wrap;gap:.45rem}
.wchip{display:inline-flex;align-items:stretch;border:1px solid var(--ink-4);border-radius:999px;
  overflow:hidden;transition:background var(--t-fast),border-color var(--t-fast)}
.wchip:hover{border-color:#4A4A4A}
.wchip__main{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .85rem;
  font:500 .84rem/1.2 var(--f-body);color:#D4D4D4}
.wchip__main b{display:none;font:800 .86rem/1 var(--f-head)}
.wchip__plus{font:700 .8rem/1 var(--f-mono);color:var(--mute-d)}
.wchip__minus{display:none;padding:0 .8rem;border-left:1px solid rgba(255,255,255,.28);
  font:700 .95rem/1 var(--f-mono);color:#fff;transition:background var(--t-fast)}
.wchip__minus:hover{background:rgba(0,0,0,.18)}
.wchip.is-on{background:var(--red);border-color:var(--red)}
.wchip.is-on .wchip__main{color:#fff}
.wchip.is-on .wchip__main b{display:inline}
.wchip.is-on .wchip__plus{display:none}
.wchip.is-on .wchip__minus{display:block}
.wchip.is-pop{animation:pop 260ms var(--ease)}
.week__sum{margin-top:.95rem;padding:.75rem .95rem;border-radius:10px;border:1px dashed var(--ink-4);
  font:500 .72rem/1.55 var(--f-mono);letter-spacing:.02em;color:var(--mute)}
.week__sum b{color:var(--white);font-weight:700}
.week__sum span{color:var(--mute-d)}
.wchips + .field,.week__sum + .field{margin-top:.9rem}

/* ---------- contact ---------- */
.consent{margin-top:1rem;font-size:.78rem;line-height:1.55;color:var(--mute-d)}
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* =========================================================
   DONE
   ========================================================= */
.done{display:grid;justify-items:center;gap:.9rem;text-align:center;padding:1.8rem .3rem .8rem}
.done__icon{width:76px;height:76px;border-radius:50%;background:var(--red-soft);
  display:grid;place-content:center;animation:pop 420ms var(--ease)}
.done__icon path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw 600ms var(--ease) 180ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done .q__title{max-width:18ch}
.done p{color:var(--mute);max-width:40ch;line-height:1.6;font-size:.95rem}
.done .btn{margin-top:.4rem}
.btn--line{background:transparent;border-color:#4A4A4A;color:#fff}
.btn--line:hover{background:#fff;border-color:#fff;color:var(--ink);box-shadow:none}

/* =========================================================
   FOOTER
   ========================================================= */
.ftr--min{background:var(--ink);border-top:1px solid var(--ink-3);padding:1.4rem var(--gut);text-align:center}
.ftr--min p{font:500 .66rem/1.6 var(--f-mono);letter-spacing:.05em;color:var(--mute-d)}

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (max-width:520px){
  .hdr__long{display:none}
  .hdr__short{display:inline}
}
@media (min-width:560px){
  .opts--grid2{grid-template-columns:1fr 1fr}
  .opts--grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:559px){
  .opts--grid3{grid-template-columns:1fr 1fr}
  .opts--grid2{display:flex;flex-wrap:wrap;gap:.45rem}
  .opts--grid2 .opt{width:auto;padding:.6rem .85rem;border-radius:999px;font-size:.86rem}
  .opts--grid2 .opt__key,.opts--grid2 .opt__tick{display:none}
  .opts--grid2 .opt.is-on{background:var(--red);border-color:var(--red)}
  .card__stage{min-height:210px}
}
@media (min-width:720px){
  .card__hint{display:block}
  .card__hint + .btn{margin-left:0}
  .card__top{padding:1.3rem 1.8rem 0}
  .card__stage{padding:1.4rem 1.8rem 1.7rem;min-height:330px}
  .card__nav{padding:1.05rem 1.8rem}
  .card__err{margin:0 1.8rem 1.3rem}
}
@media (min-width:1024px){
  .apply__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-areas:"intro card" "next card";column-gap:3.4rem;row-gap:1.8rem}
  .apply__intro{grid-area:intro;padding-top:.8rem}
  .next{grid-area:next;align-self:start}
  .card{grid-area:card}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .mask > span > span{transform:none!important}
  .eyebrow::after{transform:scaleX(1)!important}
  .done__icon path,.opt__tick path{stroke-dashoffset:0!important}
  .hdr__dot{animation:none!important}
}