/* Websites by Tyler: the client portal's look. The same world as the quote document the client reads (cream paper, ink,
   deep gold), phone first. One easing curve and fixed durations for everything that moves. */
@font-face{font-family:IN;src:url(/static/f/Inter-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:IN;src:url(/static/f/Inter-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:IN;src:url(/static/f/Inter-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
:root{--ink:#16171b;--dim:#5f626b;--line:#e3e0d8;--gold:#9a7a3f;--goldbg:#f6f0e4;--bg:#fbfaf7;--card:#fff;--red:#b3261e;--redbg:#fbeae8;--green:#2f6b3a;--greenbg:#e8f3ea;--blue:#1f4f8f;--bluebg:#e6eef9;--amber:#8a5a00;--amberbg:#fdf1d7;
  --ease:cubic-bezier(.19,1,.22,1);--fast:160ms;--mid:240ms;--r:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 IN,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1{font:600 30px/1.15 IN;letter-spacing:-.015em}
h2{font:600 19px/1.25 IN;letter-spacing:-.005em}
h3{font:600 16px/1.3 IN}
a{color:inherit}
.sub{color:var(--dim);font-size:14px}
.lead{font-size:17px;margin-top:14px}
s{color:var(--dim)}
.brand{font:600 12px/1 IN;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* signing in */
.gate{max-width:460px;margin:0 auto;padding:18vh 24px 40px;display:grid;gap:16px}
.gate label{font-size:14px;color:var(--dim);display:block;margin-bottom:8px}
.coderow{display:flex;gap:10px;flex-wrap:wrap}
.coderow input{flex:1 1 150px;font:600 24px/1 IN;letter-spacing:.3em;text-align:center;padding:12px 10px;border:1.5px solid var(--ink);border-radius:12px;background:#fff;min-width:0}
.err{color:var(--red);font-size:14px}

/* buttons */
.btn{appearance:none;cursor:pointer;border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:99px;padding:11px 20px;min-height:44px;font:600 15px/1.2 IN;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform var(--fast) var(--ease),background var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.btn:hover{background:rgba(22,23,27,.05)}
.btn:active{transform:scale(.98)}
.btn.gold{background:var(--ink);color:#fff}
.btn.gold:hover{background:#000;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.btn.big{padding:15px 28px;font-size:16px}
.btn:focus-visible,.tab:focus-visible,input:focus-visible,textarea:focus-visible,.lnk:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lnk{appearance:none;background:none;border:0;padding:6px 0;color:var(--dim);font:500 14px/1.2 IN;text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start}
.right{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;align-items:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* frame */
.top{display:flex;align-items:center;gap:16px;padding:16px 20px 12px;max-width:980px;margin:0 auto}
.top .brand{white-space:nowrap}.top .who{flex:1;text-align:right;font-weight:600;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .who span{font-weight:400;color:var(--dim)}
.pvw{font:600 12px/1 IN;background:var(--amberbg);color:var(--amber);padding:7px 10px;border-radius:99px;white-space:nowrap}
.tabs{position:sticky;top:0;z-index:5;background:rgba(251,250,247,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:8px max(16px,calc((100vw - 980px)/2 + 16px))}
.tabs::-webkit-scrollbar{display:none}
.tab{appearance:none;border:0;background:none;cursor:pointer;white-space:nowrap;padding:10px 14px;min-height:44px;border-radius:99px;font:500 14.5px/1 IN;color:var(--dim);display:inline-flex;align-items:center;gap:6px;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.tab:hover:not(:disabled){background:rgba(22,23,27,.05);color:var(--ink)}
.tab.on{background:var(--ink);color:#fff}
.tab.dim{opacity:.38;cursor:not-allowed}
.tab .n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font:600 11px/1 IN}
.pane{max-width:980px;margin:0 auto;padding:22px 16px 96px;display:grid;gap:16px;overflow-wrap:anywhere}.pane>*{min-width:0}
.pane.fade{animation:in var(--mid) var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* cards */
.card,.flag{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:14px}
.flag{border-color:#e9c7c3;box-shadow:0 10px 30px -22px rgba(179,38,30,.55)}
.flag .fh{display:grid;gap:6px}.flag .badge,.flag > .btn,.card > .btn{justify-self:start}
.flags{display:grid;gap:14px}
.calm{text-align:center;padding:36px 22px}
.dh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.badge{display:inline-block;border-radius:99px;padding:5px 10px;font:600 11.5px/1.2 IN;letter-spacing:.04em;background:#efede7;color:var(--dim);white-space:nowrap;transition:background var(--mid) var(--ease),color var(--mid) var(--ease)}
.badge.red{background:var(--redbg);color:var(--red)}.badge.green{background:var(--greenbg);color:var(--green)}.badge.blue{background:var(--bluebg);color:var(--blue)}.badge.amber{background:var(--amberbg);color:var(--amber)}
.empty{color:var(--dim);font-size:14px;padding:8px 0}

/* where the project is */
.strip{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.strip li{flex:1 0 auto;min-width:92px;font:500 13px/1.3 IN;color:var(--dim);padding-top:16px;position:relative;text-align:left}
.strip li::before{content:"";position:absolute;left:0;right:0;top:4px;height:3px;background:var(--line);border-radius:3px}
.strip li i{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--line);border:2px solid var(--card)}
.strip li.done{color:var(--ink)}.strip li.done::before,.strip li.done i{background:var(--ink)}
.strip li.now{color:var(--ink);font-weight:600}.strip li.now i{background:var(--gold);box-shadow:0 0 0 4px var(--goldbg)}

/* rows */
.rows{display:grid}
.row{padding:14px 0;border-top:1px solid var(--line);display:grid;gap:8px;align-items:center}
.rows .row:first-child,.cal h3 + .row{border-top:0}
.row.r2{grid-template-columns:64px 1fr}.row.r3{grid-template-columns:1.4fr 1fr auto}.row.r4{grid-template-columns:1.4fr auto auto auto;gap:14px}
.row.need{grid-template-columns:1fr auto}
.cal h3{margin:18px 0 4px;color:var(--dim);font:600 12px/1 IN;letter-spacing:.12em;text-transform:uppercase}
.cal .d{display:grid;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}.cal .d b{font:600 20px/1.1 IN;color:var(--ink);letter-spacing:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:15px}.kv dt{color:var(--dim)}.kv dd{margin:0;font-weight:500}
.list{background:var(--bg);border-radius:10px;padding:12px 14px;display:grid;gap:4px;font-size:15px}.list b{font-size:13px;color:var(--dim)}
.ticks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}.ticks li{padding-left:22px;position:relative}.ticks li::before{content:"";position:absolute;left:3px;top:.45em;width:9px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.row.r2w{grid-template-columns:110px 1fr;align-items:start}.row .wide{grid-column:1 / -1}
.amd{border:1px solid var(--line);border-radius:10px;background:var(--bg)}.amd summary{cursor:pointer;padding:12px 14px;font:500 14.5px/1.3 IN;list-style:none;display:flex;justify-content:space-between;align-items:center}
.amd summary::-webkit-details-marker{display:none}.amd summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform var(--fast) var(--ease)}
.amd[open] summary::after{transform:rotate(-135deg)}.amd .doc{border:0;border-top:1px solid var(--line);border-radius:0 0 10px 10px;animation:in var(--mid) var(--ease)}
.choices .btn{width:100%}

/* things to look at */
.media{display:grid;gap:14px}
.shot{margin:0;display:grid;gap:8px}
.shot img,.shot video{width:100%;height:auto;max-height:78vh;object-fit:contain;background:#f1efe9;border:1px solid var(--line);border-radius:10px;display:block}
.shot figcaption{font-size:14px;color:var(--dim)}
.media.compact .shot img,.media.compact .shot video{max-height:46vh}
.linkrow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:var(--bg);transition:border-color var(--fast) var(--ease)}
.linkrow:hover{border-color:var(--ink)}.linkrow span{color:var(--dim);font-size:14px;white-space:nowrap}
.ans,.choices{display:grid;gap:12px}
.notebox{display:grid;gap:12px;animation:in var(--mid) var(--ease)}
.notebox[hidden]{display:none}
label{font-size:14px;color:var(--dim);display:grid;gap:8px}
textarea,input[type=text]{width:100%;font:400 16px/1.5 IN;color:var(--ink);background:#fff;border:1px solid #cfcbc1;border-radius:10px;padding:12px 14px;resize:vertical}
.ck{grid-template-columns:22px 1fr;align-items:start;color:var(--ink);font-size:15px;gap:10px}.ck input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.askbox,.signbox,.signed{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:12px}
.signbox{background:var(--goldbg);border:1px solid #e6d8b8;border-radius:12px;padding:20px}
.pay{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;animation:in 420ms var(--ease)}
.pay div{display:grid}.pay span{color:var(--dim);font-size:14px}
.wait{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:14px}
.wait i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--gold);animation:spin 800ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.doc{display:block;border:1px solid var(--line);border-radius:10px;padding:22px;background:var(--bg);overflow-x:auto}
.up{position:relative}

/* messages */
.thread{display:grid;gap:10px}
.msg{max-width:86%;min-width:0;border-radius:14px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);display:grid;gap:4px;font-size:15px}
.msg.you{justify-self:end;background:var(--ink);color:#fff;border-color:var(--ink)}
.mh{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;opacity:.7}.ms{font-weight:600}

/* toast */
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,24px);opacity:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:99px;font:500 14.5px/1.3 IN;max-width:calc(100vw - 32px);transition:transform var(--mid) var(--ease),opacity var(--mid) var(--ease);z-index:20;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}#toast.bad{background:var(--red)}
.loading{color:var(--dim);padding:20vh 0;text-align:center}

@media (max-width:640px){
  h1{font-size:26px}.card,.flag{padding:18px}
  .row.r3{grid-template-columns:1fr auto}.row.r3 > :nth-child(2){grid-column:1;color:var(--dim);font-size:14px}.row.r3 > :nth-child(3){grid-row:1 / span 2;grid-column:2}
  .row.r4{grid-template-columns:1fr auto}.row.r4 > :nth-child(4){grid-column:1 / -1;justify-content:stretch}.row.r4 .btn{width:100%}
  .row.need{grid-template-columns:1fr}.row.need .right{justify-content:flex-start}
  .row.r2w{grid-template-columns:1fr;gap:2px}.two{grid-template-columns:1fr}.msg{max-width:94%}.doc{padding:0;border:0;background:none}.flag > .btn{justify-self:stretch}
  .top .who span{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}}