/* Lorne & Vale scroll narrative v2. All selectors .lvn- prefixed.
   Sticky column carries a changing headline plus an operable stage.
   Scrolling column carries one short line per step. */

.lvn{position:relative;background:var(--dbg);color:var(--dink);padding:88px 0 96px;overflow:clip}
.lvn *{box-sizing:border-box}

.lvn__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,84px);align-items:start}
@media(max-width:960px){.lvn__grid{grid-template-columns:1fr;gap:0}}

/* ------------------------------------------------------ sticky left column */

.lvn__sticky{position:sticky;top:calc(var(--nav-h) + 30px);align-self:start}
@media(max-width:960px){
  .lvn__sticky{top:calc(var(--nav-h) + 6px);z-index:2;margin-bottom:22px;padding-bottom:12px;
    background:linear-gradient(180deg,var(--dbg) 84%,transparent)}
}

.lvn__k2{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dink3);margin-bottom:12px}
.lvn__title{font-size:clamp(30px,4.1vw,58px);line-height:1.03;letter-spacing:-.036em;font-weight:600;
  margin:0 0 26px;min-height:1.06em;
  background:linear-gradient(96deg,#fff 8%,#a8c9ff 58%,#b3a9ff 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lvn__title.is-in{animation:lvnTitle .58s cubic-bezier(.16,1,.3,1) both}
@keyframes lvnTitle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.lvn__stage{position:relative;width:100%;max-width:660px;background:linear-gradient(180deg,#1a1a1c,#141416);
  border:1px solid var(--dline2);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 36px 96px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset}
.lvn__bar{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--dline2);
  background:rgba(255,255,255,.02)}
.lvn__dot{width:9px;height:9px;border-radius:50%;background:var(--dline)}
.lvn__cap{font-size:12.5px;color:var(--dink2);margin-left:7px;letter-spacing:-.01em}
.lvn__step-n{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--dink3);font-variant-numeric:tabular-nums}

.lvn__panes{position:relative;padding:22px 20px;min-height:268px;display:flex}
@media(max-width:600px){.lvn__panes{min-height:250px;padding:18px 16px}}
.lvn__pane{position:absolute;inset:22px 20px auto;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;justify-content:center;width:calc(100% - 40px)}
.lvn__pane.is-on{opacity:1;transform:none;pointer-events:auto;position:relative;inset:auto;width:100%}

/* shared pane bits */
.lvn__cue{font-size:13.5px;color:var(--dink2);margin:14px 0 0;line-height:1.5}
.lvn__cue--dim{color:var(--dink3);font-size:12px;margin-top:8px}
.lvn__btn2{appearance:none;cursor:pointer;font:inherit;font-size:13.5px;font-weight:500;
  padding:9px 17px;border-radius:var(--pill);background:transparent;color:var(--dink2);
  border:1px solid var(--dline);align-self:flex-start;margin-top:16px;
  transition:color .2s,border-color .2s,background .2s}
.lvn__btn2:hover{color:var(--dink);border-color:var(--dink3);background:rgba(255,255,255,.04)}
.lvn__btn2:focus-visible{outline:2px solid var(--acc1);outline-offset:2px}
.lvn__btn2--go{background:var(--accg);border-color:transparent;color:#fff;font-weight:600;
  box-shadow:0 8px 22px rgba(10,132,255,.25)}
.lvn__btn2--go:hover{background:var(--accg);color:#fff;border-color:transparent}
.lvn__btn2[disabled]{opacity:.45;cursor:default}

/* 1. doors */
.lvn__big{font-family:var(--mono);font-size:clamp(34px,4.4vw,52px);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1;margin-bottom:18px}
.lvn__doors{display:grid;gap:7px}
.lvn__door{appearance:none;cursor:pointer;font:inherit;font-size:13.5px;text-align:left;
  display:flex;align-items:center;gap:10px;border:1px solid var(--dline2);border-radius:var(--r-sm);
  padding:10px 13px;color:var(--dink3);background:transparent;
  transition:color .3s,border-color .3s,background .3s}
.lvn__door i{width:7px;height:7px;border-radius:50%;background:var(--dline);flex:none;transition:background .3s}
.lvn__door:hover{color:var(--dink2);border-color:var(--dline)}
.lvn__door.is-lit{color:var(--dink);border-color:var(--acc1);background:rgba(10,132,255,.09)}
.lvn__door.is-lit i{background:var(--acc1)}
.lvn__door:focus-visible{outline:2px solid var(--acc1);outline-offset:2px}

/* 2. pipeline */
.lvn__pipe{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
@media(max-width:560px){.lvn__pipe{grid-template-columns:1fr;gap:12px;justify-items:center}}

.lvn__doors2{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.lvn__doors2 li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dink3);
  transition:color .3s}
.lvn__doors2 i{width:8px;height:8px;border-radius:50%;background:var(--dline);flex:none;transition:background .3s,box-shadow .3s}
.lvn__doors2 li.is-live{color:var(--dink)}
.lvn__doors2 li.is-live i{background:var(--acc1);box-shadow:0 0 0 4px rgba(10,132,255,.2)}
@media(max-width:560px){.lvn__doors2{grid-auto-flow:column;gap:14px}.lvn__doors2 span{display:none}}

.lvn__wires{width:100%;max-width:150px;height:120px;justify-self:center}
.lvn__wires .w{fill:none;stroke:var(--dline);stroke-width:1.6}
.lvn__bead{fill:url(#lvnG)}

.lvn__hub{border:1px solid var(--acc1);background:rgba(10,132,255,.09);border-radius:var(--r-sm);
  padding:14px 18px;text-align:center;min-width:104px}
.lvn__hub b{display:block;font-size:30px;letter-spacing:-.03em;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums}
.lvn__hub span{font-size:11.5px;color:var(--dink3)}

/* 3. tags */
.lvn__tags{display:flex;flex-wrap:wrap;gap:7px}
.lvn__tag{font-size:12px;padding:6px 13px;border-radius:var(--pill);border:1px solid var(--dline2);color:var(--dink2)}
.lvn__tag--btn{appearance:none;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s,opacity .2s}
.lvn__tag--btn:hover{transform:translateY(-1px)}
.lvn__tag--btn:focus-visible{outline:2px solid var(--acc1);outline-offset:2px}
.lvn__tag--btn.is-sel{box-shadow:0 0 0 2px rgba(255,255,255,.28)}
.lvn__tag--hot{background:var(--hot);border-color:var(--hot);color:#fff}
.lvn__tag--warm{background:var(--warm);border-color:var(--warm);color:#000}
.lvn__tag--good{background:var(--good);border-color:var(--good);color:#fff}
.lvn__tag--fill{background:var(--accg);border-color:transparent;color:#fff}
.lvn__why{font-size:14px;color:var(--dink2);margin:16px 0 0;line-height:1.55;min-height:2.6em}

/* 4. reply slider */
.lvn__lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;color:var(--dink2);margin-bottom:12px}
.lvn__lab output{font-family:var(--mono);font-size:19px;color:var(--dink);font-variant-numeric:tabular-nums}
.lvn__pane.is-late .lvn__cue{color:var(--warm)}

/* 5. gate */
.lvn__gate{display:flex;gap:7px;flex-wrap:wrap}

/* 6. seal */
.lvn__seal{display:grid;place-items:center;padding:0 0 4px}
.lvn__seal svg{width:104px;height:78px;overflow:visible}
.lvn__seal .r{fill:none;stroke:var(--acc1);stroke-width:1.2;opacity:.5;transform-origin:70px 52px;
  animation:lvnRing 4.2s ease-out infinite}
.lvn__seal .r2{animation-delay:1.4s}
.lvn__seal .doc{fill:rgba(255,255,255,.05);stroke:var(--dline);stroke-width:1.4}
.lvn__seal .ln{stroke:var(--dline);stroke-width:1.4;stroke-linecap:round;fill:none}
.lvn__seal .hub2{fill:#141416;stroke:var(--acc1);stroke-width:1.8}
.lvn__seal .key{stroke:var(--acc1);stroke-width:1.8;fill:none;stroke-linecap:round}
@keyframes lvnRing{0%{transform:scale(.82);opacity:0}35%{opacity:.55}100%{transform:scale(1.22);opacity:0}}
.lvn__cipher{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--dink3);
  background:rgba(255,255,255,.03);border:1px solid var(--dline2);border-radius:var(--r-sm);
  padding:10px 11px;margin:12px 0 0;white-space:pre-wrap;word-break:break-all}
.lvn__cipherMsg{display:block;margin-top:8px;color:var(--dink2);font-family:var(--ff);font-size:12.5px;word-break:normal}

/* ---------------------------------------------------- scrolling right column */

.lvn__steps{position:relative;padding-left:30px}
@media(max-width:960px){.lvn__steps{padding-left:24px}}
.lvn__spine{position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--dline2);border-radius:2px}
.lvn__spine i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;background:var(--accg);
  transition:height .18s linear}

.lvn__step{position:relative;min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:22px 0}
@media(max-width:960px){.lvn__step{min-height:auto;padding:30px 0}}
.lvn__step::before{content:"";position:absolute;left:-30px;top:calc(50% - 6px);width:12px;height:12px;border-radius:50%;
  background:var(--dsoft);border:2px solid var(--dline);transition:border-color .35s,background .35s,transform .35s}
@media(max-width:960px){.lvn__step::before{left:-24px;top:38px}}
.lvn__step.is-on::before{border-color:var(--acc1);background:var(--acc1);transform:scale(1.18)}

.lvn__k{font-family:var(--mono);font-size:11.5px;color:var(--dink3);letter-spacing:.1em;margin-bottom:10px;display:block}
.lvn__t{font-size:clamp(21px,2.1vw,28px);line-height:1.16;letter-spacing:-.026em;font-weight:600;margin:0 0 9px;
  color:var(--dink3);transition:color .4s}
.lvn__step.is-on .lvn__t{color:var(--dink)}
.lvn__p{font-size:15.5px;line-height:1.55;color:var(--dink2);margin:0;max-width:34ch}

/* ------------------------------------------------------------- arithmetic */

.lvn__calc{margin-top:70px;border:1px solid var(--dline2);border-radius:var(--r-lg);
  background:linear-gradient(180deg,#19191b,#131315);padding:clamp(22px,3vw,38px);
  box-shadow:0 30px 84px rgba(0,0,0,.5)}
.lvn__calcH{font-size:clamp(20px,2vw,27px);line-height:1.14;letter-spacing:-.026em;font-weight:600;margin:0 0 22px}
.lvn__inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:24px}
@media(max-width:900px){.lvn__inputs{grid-template-columns:1fr;gap:20px}}
.lvn__f label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;color:var(--dink2);margin-bottom:11px}
.lvn__f output{font-family:var(--mono);font-size:19px;color:var(--dink);font-variant-numeric:tabular-nums}

.lvn__range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;
  background:var(--dline2);outline:none;cursor:pointer}
.lvn__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.lvn__range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:0;cursor:pointer}
.lvn__range:focus-visible{outline:2px solid var(--acc1);outline-offset:4px}

.lvn__out{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media(max-width:700px){.lvn__out{grid-template-columns:1fr}}
.lvn__stat{border:1px solid var(--dline2);border-radius:var(--r-sm);padding:15px 16px;background:rgba(255,255,255,.02)}
.lvn__stat b{display:block;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.032em;line-height:1;margin-bottom:7px;
  font-variant-numeric:tabular-nums}
.lvn__stat--hi b{background:var(--accg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lvn__stat span{font-size:12.5px;color:var(--dink3);line-height:1.45;display:block}
.lvn__fine{font-size:12px;color:var(--dink3);line-height:1.5;margin:0}

.lvn__cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.lvn__btn{appearance:none;border:0;cursor:pointer;font:inherit;font-size:15.5px;font-weight:600;
  letter-spacing:-.012em;padding:14px 26px;border-radius:var(--pill);color:#fff;text-decoration:none;
  background:var(--accg);display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 10px 30px rgba(10,132,255,.26);transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s}
.lvn__btn:hover{transform:translateY(-1.5px);box-shadow:0 15px 40px rgba(10,132,255,.34)}
.lvn__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lvn__ghost{color:var(--dink2);text-decoration:none;font-size:14.5px;border-bottom:1px solid var(--dline);
  padding-bottom:2px;transition:color .22s,border-color .22s}
.lvn__ghost:hover{color:var(--dink);border-color:var(--dink)}

@media(prefers-reduced-motion:reduce){
  .lvn *,.lvn *::before,.lvn *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ------------------------------------------------------------ the context */
.lvn__intro{max-width:60ch;margin:0 0 clamp(44px,5vw,72px);padding-bottom:clamp(28px,3vw,40px);
  border-bottom:1px solid var(--dline2)}
.lvn__introK{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dink3);margin-bottom:16px}
.lvn__introH{font-size:clamp(21px,2.3vw,31px);line-height:1.28;letter-spacing:-.022em;font-weight:600;
  margin:0 0 12px;color:var(--dink)}
.lvn__introP{font-size:15px;line-height:1.55;color:var(--dink3);margin:0}

/* 4. the race: your reply against the firms that never answer */
.lvn__race{display:grid;gap:12px;margin-top:20px}
.lvn__lane{display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:12px}
@media(max-width:560px){.lvn__lane{grid-template-columns:1fr;gap:5px}}
.lvn__lane>span{font-size:12.5px;color:var(--dink3)}
.lvn__lane>b{font-size:13px;font-weight:500;color:var(--dink2);white-space:nowrap}
.lvn__track{height:8px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.lvn__track i{display:block;height:100%;border-radius:5px;background:var(--accg);
  transition:width .35s cubic-bezier(.16,1,.3,1),background .35s}
.lvn__track i.is-late{background:var(--warm)}
.lvn__track i.is-none{width:100%;background:repeating-linear-gradient(90deg,
  rgba(255,255,255,.10) 0 6px, transparent 6px 12px)}
.lvn__lane--you>b{color:var(--dink)}
.lvn__lane--them>span,.lvn__lane--them>b{color:var(--dink3)}

.lvn__split{font-size:13.5px;color:var(--dink2);margin:0 0 10px;line-height:1.55}
.lvn__f label{gap:10px}
.lvn__f label{align-items:baseline}

/* 3. the extraction: free text in, structured file out */
.lvn__raw{border:1px solid var(--dline2);border-radius:var(--r-sm);padding:12px 14px;
  background:rgba(255,255,255,.02);margin-bottom:14px}
.lvn__rawFrom{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dink3);margin-bottom:7px}
.lvn__raw p{font-size:14px;line-height:1.6;color:var(--dink2);margin:0}
.lvn__raw mark{background:transparent;color:var(--dink2);border-radius:3px;padding:1px 2px;
  transition:background .3s,color .3s,box-shadow .3s}
.lvn__raw mark.is-on{background:rgba(10,132,255,.22);color:#fff;box-shadow:0 0 0 1px rgba(10,132,255,.45)}

.lvn__fields{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  border:1px solid var(--dline2);border-radius:var(--r-sm);overflow:hidden;background:var(--dline2)}
.lvn__fields li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;
  padding:9px 13px;background:#161618;font-size:13.5px;line-height:1.45}
@media(max-width:560px){.lvn__fields li{grid-template-columns:1fr;gap:2px}}
.lvn__fields li>span{color:var(--dink3);font-size:12px}
.lvn__fields li>b{font-weight:500;color:var(--dink2)}
.lvn__fields li.is-live{cursor:pointer;transition:background .25s}
.lvn__fields li.is-live:hover,.lvn__fields li.is-live:focus-visible{background:#1c1c20;outline:none}
.lvn__fields li.is-live:hover>b,.lvn__fields li.is-sel>b{color:var(--dink)}
.lvn__fields li.is-sel{background:rgba(10,132,255,.10)}
.lvn__fields li.is-live::after{content:"";position:absolute}

/* 5. the draft awaiting a fee earner */
.lvn__draft{border:1px solid var(--dline2);border-radius:var(--r-sm);padding:14px;background:rgba(255,255,255,.02)}
.lvn__draft.is-held{border-color:var(--warm)}
.lvn__badge{display:inline-block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  padding:4px 11px;border-radius:var(--pill);background:var(--warm);color:#000;margin-bottom:12px;
  transition:background .3s,color .3s}
.lvn__badge.is-sent{background:var(--good);color:#fff}
.lvn__drow{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:6px 0;font-size:13.5px;line-height:1.5}
.lvn__drow+.lvn__drow{border-top:1px solid var(--dline2)}
.lvn__drow>span{color:var(--dink3);font-size:12px}
.lvn__drow>b{font-weight:500;color:var(--dink2)}
@media(max-width:560px){.lvn__drow{grid-template-columns:1fr;gap:2px}}

.lvn__track2{list-style:none;margin:12px 0 0;padding:12px 14px;display:grid;gap:7px;
  border:1px solid rgba(49,162,76,.4);border-radius:var(--r-sm);background:rgba(49,162,76,.07)}
.lvn__track2 li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.45}
.lvn__track2 li>span{color:var(--dink3);font-size:12px}
.lvn__track2 li>b{font-weight:500;color:var(--dink2)}
@media(max-width:560px){.lvn__track2 li{grid-template-columns:1fr;gap:2px}}

.lvn__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.lvn__acts .lvn__btn2{margin-top:0}