/* ============================================================
   CONVERSATIONAL FORM + CALENDLY
   ============================================================ */

/* ---------- TABS ---------- */
.tabs{display:flex;gap:0;border-block:1px solid var(--rule);margin-bottom:0}
.tab{background:none;border:0;cursor:pointer;padding:1.25em 0;margin-right:clamp(2rem,5vw,4rem);
  font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:-0.01em;color:var(--ink-mute);display:flex;align-items:baseline;gap:.7em;
  position:relative;transition:color var(--d-standard) var(--ease-out)}
.tab::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;
  background:var(--ox-700);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-standard) var(--ease-inout)}
.tab[aria-selected="true"]{color:var(--ox-700)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab:hover{color:var(--ink)}

.pane{padding-block:clamp(3rem,6vw,5.5rem)}
.pane[hidden]{display:none}

/* ---------- CONVERSATIONAL SHELL ---------- */
.tf{position:relative;min-height:clamp(30rem,58vh,40rem);display:flex;flex-direction:column}
.tf__bar{position:absolute;inset:0 0 auto 0;height:2px;background:var(--rule-soft);
  overflow:hidden;z-index:2}
.tf__fill{display:block;height:100%;width:100%;background:var(--ox-700);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 400ms cubic-bezier(.215,.61,.355,1)}
/* All steps share one grid cell, so the shell sizes to whichever question is
   showing instead of being clipped by a fixed height. Only one step is ever
   display:block, so they never overlap mid-transition. */
.tf__form{position:relative;flex:1;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr);
  min-height:clamp(26rem,46vh,34rem);
  padding-block:clamp(2.5rem,5vw,4rem)}
.tf__nojs{display:none}
.tf.is-transitioning{overflow-y:hidden}
.tf.is-transitioning .tf__form{pointer-events:none}

/* ---------- STEP ----------
   Motion measured off a live Typeform: blur(2px)->0, travel expressed as a
   PERCENTAGE of each block's own height so tall blocks move further than
   short ones, and each block inside the question carries its own delay.
   The footer enters from below while the content enters from above, which
   is what produces the "assembling" feel rather than a slab fade.        */
.step{border:0;padding:0;margin:0;min-inline-size:0;width:100%;max-width:44rem}
html.js .step{display:none;grid-area:1/1;align-self:center}
html.js .step[data-active]{display:block}

html.js .step[data-active]>*{
  opacity:0;filter:blur(2px);transform:translateY(-30%);
  animation:q-in 340ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(min(var(--i,0),5) * 60ms)}
html.js .step[data-active]>.step__act{transform:translateY(40%)}
@keyframes q-in{to{opacity:1;filter:blur(0);transform:translateY(0)}}

html.js .step[data-leaving]{animation:q-out 340ms cubic-bezier(.16,1,.3,1) forwards}
html.js .step[data-leaving][data-dir="prev"]{animation-name:q-out-down}
@keyframes q-out     {to{opacity:0;transform:translateY(-60%)}}
@keyframes q-out-down{to{opacity:0;transform:translateY(60%)}}

/* Reduced motion: keep the fade, drop travel + blur + stagger.
   0.01ms rather than `none` — `none` would revert blocks to opacity:0. */
@media (prefers-reduced-motion:reduce){
  html.js .step[data-active]>*,
  html.js .step[data-active]>.step__act{
    filter:none;transform:none;animation-duration:.01ms;animation-delay:0ms}
  html.js .step[data-leaving]{animation-duration:.01ms}
}

.step__n{display:flex;align-items:center;gap:.5em;color:var(--ox-700);margin-bottom:1.15rem}
.step__arw{opacity:.55}
.step__q{margin-bottom:.55rem;max-width:22ch;text-wrap:balance}
.step__h{color:var(--ink-mute);font-size:14px;max-width:52ch;margin-bottom:1.9rem;
  line-height:1.55}

/* ---------- CONTROLS ---------- */
.ctrl{
  width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--rule);
  padding:.45em 0 .6em;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.28;letter-spacing:-0.024em;
  color:var(--ink);resize:none;
  transition:border-color var(--d-standard) var(--ease-out)}
.ctrl::placeholder{color:var(--bone-500)}
.ctrl:focus{outline:0;border-color:var(--ox-700)}
textarea.ctrl{font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.5;letter-spacing:-0.012em}
.step.has-error .ctrl{border-color:var(--alert)}

/* ---------- CHOICE OPTIONS ---------- */
.opts{display:flex;flex-direction:column;gap:.55rem;max-width:34rem}
.opt{position:relative;display:flex;align-items:center;gap:.9rem;
  padding:.85em 1em;border:1.5px solid var(--rule);cursor:pointer;
  transition:border-color var(--d-micro) var(--ease),background var(--d-micro) var(--ease)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt__key{width:1.85em;height:1.85em;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule);font-family:var(--font-mono);font-size:var(--t-micro);
  color:var(--ink-mute);transition:all var(--d-micro) var(--ease)}
.opt__t{font-family:var(--font-display);font-weight:500;font-size:var(--step-0);
  letter-spacing:-0.012em;flex:1}
.opt__tick{width:16px;height:16px;flex:none;opacity:0;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8.5l4 4 8-9' stroke='%232E0014' stroke-width='2'/%3E%3C/svg%3E");
  transition:opacity var(--d-micro) var(--ease)}
.opt:hover{border-color:var(--ox-400);background:var(--bone-100)}
.opt:hover .opt__key{border-color:var(--ox-400);color:var(--ox-700)}
.opt:has(input:checked){border-color:var(--ox-700);background:var(--bone-100)}
.opt:has(input:checked) .opt__key{background:var(--ox-700);border-color:var(--ox-700);color:var(--bone-100)}
.opt:has(input:checked) .opt__tick{opacity:1}
.opt:has(input:focus-visible){outline:2px solid var(--alert);outline-offset:3px}

/* ---------- ERROR ---------- */
.step__e{min-height:1.4em;margin-top:.7rem;font-size:14px;color:var(--alert);
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--d-micro) var(--ease),transform var(--d-micro) var(--ease)}
.step.has-error .step__e{opacity:1;transform:none;
  animation:err-in 180ms cubic-bezier(.215,.61,.355,1) both}
/* deliberately no shake — a shake on a legal intake form reads as hostile */
@keyframes err-in{from{opacity:0;transform:translateY(-4px)}}

/* ---------- ACTIONS ---------- */
.step__act{display:flex;align-items:center;gap:1.1rem;margin-top:1.7rem;flex-wrap:wrap}
.step__hint{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute)}
/* there is no Enter key on a phone — the hint is noise there */
@media (hover:none){.step__hint{display:none}}
kbd{font-family:var(--font-mono);font-size:.95em;border:1px solid var(--rule);
  padding:.15em .45em;background:var(--bone-100)}
@media (max-width:560px){.step__hint{display:none}}

/* ---------- REVIEW ---------- */
.tf__review{margin-top:.5rem;border-top:1px solid var(--rule);max-width:38rem}
.tf__review div{display:grid;grid-template-columns:minmax(0,9rem) 1fr;gap:var(--gutter);
  padding-block:.85rem;border-bottom:1px solid var(--rule)}
.tf__review dt{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute)}
.tf__review dd{font-size:14px;color:var(--ink)}
.tf__review dd:empty::after{content:"—";color:var(--ink-mute)}
@media (max-width:560px){.tf__review div{grid-template-columns:1fr;gap:.3rem}}

/* ---------- DONE ---------- */
.tf__tick{display:grid;place-items:center;width:76px;height:76px;
  border:1.5px solid var(--ox-700);color:var(--ox-700);margin-bottom:1.6rem;
  border-radius:50%}
.js .step.is-live .tf__tick svg path{
  stroke-dasharray:60;stroke-dashoffset:60;animation:tick 620ms var(--ease-out) 260ms forwards}
@keyframes tick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .js .step.is-live .tf__tick svg path{animation:none;stroke-dashoffset:0}}

/* ---------- FOOT / PAGER ---------- */
.tf__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding-top:var(--s-5);border-top:1px solid var(--rule)}
.tf__count{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute)}
.tf__i{color:var(--ox-700)}
.tf__nav{display:flex;gap:.4rem}
.tf__pg{width:42px;height:38px;display:grid;place-items:center;background:var(--ox-700);
  color:var(--bone-100);border:1px solid var(--ox-700);cursor:pointer;
  transition:opacity var(--d-micro),background var(--d-micro)}
.tf__pg:disabled{opacity:.28;cursor:not-allowed}
.tf__pg:not(:disabled):hover{background:var(--ox-500)}

/* ---------- NO-JS FALLBACK ---------- */
html:not(.js) .tf__nojs{display:block;color:var(--ink-mute);font-size:14px;
  margin-bottom:2.5rem;padding:1em 1.2em;border:1px solid var(--rule)}
html:not(.js) .tf__form{display:block;align-items:stretch}
html:not(.js) .step{max-width:44rem;margin-bottom:3rem}
html:not(.js) .step--done{display:none}
html:not(.js) .tf__review{display:none}
html:not(.js) .step--review .step__q{font-size:var(--step-2)}
html:not(.js) .tf__foot{display:none}
html:not(.js) .step__hint{display:none}

/* ---------- CALENDLY ---------- */
.cal__grid{row-gap:clamp(2.5rem,5vw,4rem)}
.cal__side{grid-column:1/4;position:sticky;top:7rem;align-self:start}
.cal__embed{grid-column:5/13}
@media (max-width:1000px){.cal__side{grid-column:1/-1;position:static}
  .cal__embed{grid-column:1/-1}}
.cal__list{margin-top:1.8rem;border-top:1px solid var(--rule)}
.cal__list li{display:flex;gap:1rem;padding-block:.95rem;border-bottom:1px solid var(--rule);
  font-size:14px;color:var(--ink-soft)}
.cal__list .num{flex:none;color:var(--ox-700);padding-top:.25em}
/* Height is reserved at Calendly's own container breakpoints instead of
   using data-resize, which mutates height after load and generates CLS. */
.cal__mount{position:relative;min-width:320px;width:100%;height:1060px;
  background:var(--bone-100);border:1px solid var(--rule);contain:layout paint}
@media (min-width:650px){.cal__mount{height:840px}}
@media (min-width:1100px){.cal__mount{height:760px}}
.cal__mount iframe{display:block;border:0}
.cal__skel{position:absolute;inset:0;display:flex;flex-direction:column;gap:1rem;
  padding:2.5rem}
.cal__skel span{display:block;height:14px;background:var(--bone-300);
  animation:sk 1.5s var(--ease) infinite}
.cal__skel span:nth-child(1){width:42%}
.cal__skel span:nth-child(2){width:66%;animation-delay:.12s}
.cal__skel span:nth-child(3){width:30%;animation-delay:.24s}
@keyframes sk{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.cal__skel span{animation:none}}