@font-face{font-family:"Figtree";src:url("../fonts/figtree-variable.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dm-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
[hidden]{display:none!important}

:root{
  color-scheme: dark;
  --aubergine:#2F2039; --ink:#22182B; --paper:#F6F3F0; --on-dark:#F5F0F3; --on-dark-soft:#D8CFD9; --on-dark-muted:#A99CAC;
  --teal:#5EF2DA; --lilac:#D4B0F2; --line:#E0D8D3; --body:#463A4F; --muted:#6D6173;
  --sans:"Figtree","Helvetica Neue",Arial,sans-serif; --mono:"DM Mono","Courier New",ui-monospace,monospace;
}
body{background:var(--aubergine);color:var(--on-dark);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}
.lbl{font-family:var(--mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin:0}
.grid-bg{background-color:var(--aubergine);background-image:linear-gradient(rgba(245,240,243,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(245,240,243,.06) 1px,transparent 1px);background-size:68px 68px}

/* header */
.top{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:20px clamp(16px,6vw,96px)}
.top svg{height:32px;width:auto;display:block}
/* after the scroll animation, the header returns as a fixed bar */
.top.is-stuck{position:fixed;top:0;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px;background:rgba(47,32,57,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(245,240,243,.12);animation:top-in .35s cubic-bezier(.22,.61,.36,1)}
@keyframes top-in{from{transform:translateY(-100%)}to{transform:none}}
.sec{scroll-margin-top:72px}
.btn{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.01em;height:44px;padding:0 20px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1.5px solid transparent;box-sizing:border-box;transition:background .2s cubic-bezier(.22,.61,.36,1),color .2s cubic-bezier(.22,.61,.36,1)}
.btn-teal{background:var(--teal);color:var(--ink)}.btn-teal:hover{background:var(--on-dark);color:var(--ink)}
.btn-line{color:var(--ink);border-color:var(--ink)}.btn-line:hover{background:var(--ink);color:var(--paper)}
a:focus-visible,button:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}

/* the scroll track */
.track{position:relative;height:260vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage svg.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.copy{position:absolute;left:0;right:0;text-align:center;padding:0 16px;pointer-events:none}
.copy h1,.copy h2{margin:0;font-weight:800;letter-spacing:-.045em;color:var(--on-dark);text-wrap:balance}
.copy h1{font-size:clamp(40px,6vw,88px);line-height:.95}
.copy h2{font-size:clamp(34px,5vw,72px);line-height:1}
.copy p{margin:14px auto 0;max-width:34ch;font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--on-dark-soft)}
.teal{color:var(--teal)}
#copyA{bottom:clamp(40px,9vh,96px)}
#copyB{top:clamp(88px,15vh,150px);opacity:0}
.names{position:absolute;inset:0;pointer-events:none}
.name{position:absolute;transform:translate(-50%,0);text-align:center;opacity:0;white-space:nowrap}
.name b{display:block;font-size:clamp(17px,1.7vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--on-dark)}
.name span{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.name i{display:block;margin-top:10px;font-style:normal;font-size:14px;line-height:1.45;color:var(--on-dark-soft);white-space:normal;width:180px}
.hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--on-dark-muted)}
.hint svg{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.scrub{position:absolute;right:clamp(16px,3vw,32px);top:50%;transform:translateY(-50%);width:2px;height:120px;background:rgba(245,240,243,.14)}
.scrub i{position:absolute;left:0;top:0;width:2px;background:var(--teal);height:0}

/* after the track */
.after{background:var(--paper);color:var(--ink);padding-block:96px;padding-inline:clamp(16px,6vw,96px)}
.after .wrap{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.rule{height:2px;background:var(--ink);position:relative}
.rule::before{content:"";position:absolute;left:0;top:-4px;width:64px;height:6px;background:var(--teal)}
.after h2{margin:0;font-size:clamp(32px,4vw,52px);line-height:1.05;font-weight:800;letter-spacing:-.04em;text-wrap:balance}
.after .lead{margin:0;font-size:18px;line-height:1.55;color:var(--body);max-width:56ch}
.row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.foot{background:var(--aubergine);padding-block:28px;padding-inline:clamp(16px,6vw,96px);color:var(--on-dark-muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:640px){
  .track{height:180vh}
  .name i{display:none}
  .name b{font-size:15px}
  .name span{font-size:9px;letter-spacing:.1em}
  .scrub{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hint svg{animation:none}
  .top.is-stuck{animation:none}
  .btn{transition:none}
}

/* site sections below the scroll */
[hidden]{display:none!important}
.top nav{display:flex;gap:36px}
.top nav a{color:var(--on-dark);text-decoration:none;font-size:15px;font-weight:500}
.top nav a:hover{color:var(--teal)}
.top-right{display:flex;gap:24px;align-items:center}
.top-right .login{color:var(--on-dark);text-decoration:none;font-size:15px;font-weight:500}
.sec{padding-block:112px;padding-inline:clamp(16px,6vw,96px)}
.sec.light{background:var(--paper);color:var(--ink)}
.sec.greige{background:#E9E2DD;color:var(--ink)}
.sec.pad-top-0{padding-top:0}
.wrap{max-width:1200px;margin:0 auto}
.sec h2{margin:0;font-size:clamp(32px,4vw,52px);line-height:1.06;font-weight:800;letter-spacing:-.04em;text-wrap:balance}
.lead{margin:0;font-size:18px;line-height:1.55;color:var(--body);max-width:52ch}
.muted{color:var(--muted)}
.lilac{color:var(--lilac)}
.small{font-size:11px}
.sh{display:flex;flex-direction:column;gap:14px;margin-bottom:56px}
.sh .rule{margin-bottom:14px}
.row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}

/* product cards: three over two, like the lattice */
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.pcard{flex:0 0 calc((100% - 48px)/3);min-height:250px;border-radius:16px;padding:28px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;gap:32px;color:var(--ink);text-decoration:none;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s cubic-bezier(.22,.61,.36,1)}
.pcard:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wm{height:26px;width:145px;display:block;flex:none}
.pc-name{font-size:20px;font-weight:500}
.pc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.pc-foot p{margin:0;font-size:16px;line-height:1.45;max-width:26ch}
.pm{width:38px;height:44px;flex:none}

/* see it work */
.split{display:flex;gap:clamp(40px,7vw,96px);align-items:center}
.split-text{flex:0 0 min(440px,100%);display:flex;flex-direction:column;gap:22px}
.ticks{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:1.45}
.ticks svg{width:12px;height:14px;flex:none}
.more{font-family:var(--mono);font-size:15px;font-weight:500;color:#0A6A5E}
.more:hover{color:var(--ink)}
.chat{flex:1 1 0;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.chat-strip{height:6px;background:#8CCBFF}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;background:#fff;border-bottom:1px solid var(--line)}
.chat-head svg{height:24px;width:auto;display:block}
.chat-body{padding:24px;display:flex;flex-direction:column;gap:22px}
.you{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:85%}
.bubble{background:#EDE7E3;border-radius:16px 16px 2px 16px;padding:10px 16px;font-size:16px;line-height:1.5}
.agent{display:flex;flex-direction:column;gap:10px}
.agent-head{display:flex;align-items:center;gap:8px}
.agent-mark{width:19px;height:22px;flex:none}
.agent p{margin:0;padding-left:27px;font-size:16px;line-height:1.55}
.action{margin-left:27px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:16px}
.action-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.action h3{margin:4px 0 0;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:2px;font-family:var(--mono);font-size:13px;font-weight:500;white-space:nowrap}
.chip svg{width:14px;height:14px}
.chip-caution{background:#FBF0CF;color:#8A5A00}
.chip-positive{background:#D6FBF4;color:#0A6A5E}
.figs{margin:0;display:flex;flex-direction:column}
.figs div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.figs dt{color:var(--body)}
.figs dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.figs .total{border-top:2px solid var(--ink);font-weight:600}
.figs .total dt{color:var(--ink)}
.action-btns{display:flex;gap:8px;flex-wrap:wrap}
.action-note{margin:0;font-size:14px;color:var(--muted)}
.btn-line:disabled{opacity:.5}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.step{display:flex;flex-direction:column;gap:16px}
.num{width:52px;height:52px;display:grid;place-items:center;border-radius:2px;font-family:var(--mono);font-size:18px;font-weight:500;color:var(--ink)}
.step h3{margin:0;font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.step p{margin:0;font-size:17px;line-height:1.6;color:var(--body)}

/* firms band */
.band{border-radius:16px;padding:clamp(32px,5vw,72px) clamp(20px,5vw,80px);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band-text{display:flex;flex-direction:column;gap:16px;max-width:620px}
.band h2{color:var(--on-dark);font-size:clamp(28px,3.4vw,44px)}
.band p:not(.lbl){margin:0;font-size:18px;line-height:1.55;color:var(--on-dark-soft)}

/* about */
.about{align-items:flex-start}
.about h2{font-size:clamp(30px,3.4vw,44px)}
.about-copy{flex:1 1 0;display:flex;flex-direction:column;gap:20px;padding-top:30px}
.big{margin:0;font-size:20px;line-height:1.55;color:var(--ink);max-width:56ch}

/* footer */
.site-foot{padding-block:80px 40px;padding-inline:clamp(16px,6vw,96px);color:var(--on-dark-soft)}
.foot-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;margin-bottom:56px}
.foot-brand{display:flex;flex-direction:column;gap:24px;max-width:360px;align-items:flex-start}
.foot-brand svg{height:40px;width:auto;display:block}
.foot-brand p{margin:0;font-size:16px;line-height:1.55}
.foot-cols{display:flex;gap:clamp(40px,7vw,96px);flex-wrap:wrap}
.foot-cols nav{display:flex;flex-direction:column}
.foot-cols .lbl{margin-bottom:12px}
.foot-cols a{color:var(--on-dark-soft);text-decoration:none;font-size:15px;line-height:32px}
.foot-cols a:hover{color:var(--teal)}
.foot-base{border-top:1px solid rgba(245,240,243,.18);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--on-dark-muted)}
.foot-base .lbl{font-size:11px;line-height:18px}

@media (max-width:1000px){
  .top nav{display:none}
  .pcard{flex-basis:calc((100% - 24px)/2)}
  .split{flex-direction:column;align-items:stretch}
  .split-text{flex-basis:auto}
  .chat{flex:none;width:100%}
  .steps{grid-template-columns:1fr;gap:32px}
  .about-copy{padding-top:0}
}
@media (max-width:640px){
  .sec{padding-block:64px}
  .sec.pad-top-0{padding-top:0}
  .pcard{flex-basis:100%;min-height:200px;padding:22px}
  .top-right .login{display:none}
  .chat-body{padding:18px 14px}
  .action{margin-left:0;padding:18px}
  .agent p{padding-left:0}
  .action-btns .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){ .pcard{transition:none} }

/* book a call */
.book{align-items:flex-start}
.book-form{color-scheme:light;box-sizing:border-box;flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-size:14px;font-weight:600;color:var(--ink);padding:0}
.field input,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid #8F827D;border-radius:2px;padding:11px 12px;width:100%;box-sizing:border-box}
.field input:focus,.field textarea:focus{outline:2px solid #6A3E9C;outline-offset:2px}
.checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.checks label{display:inline-flex;align-items:center;gap:8px;font-weight:400;font-size:15px;border:1px solid var(--line);border-radius:2px;padding:9px 12px;background:var(--paper);cursor:pointer}
.checks input{width:18px;height:18px;accent-color:#0A6A5E;margin:0}
.book-form .btn{align-self:flex-start;height:48px;cursor:pointer;font-size:15px}
.small-print{margin:0;font-size:13px;color:var(--muted)}
.small-print a{color:#0A6A5E}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:1000px){.book-form{flex:none;width:100%}}
@media (max-width:640px){.book-form .btn{align-self:stretch}}