/* Triad assistant: the living symbol, the orb that wakes and writes, and the interview panel.
   Everything is scoped under .tri so it never clashes with the site's own classes. */

.tri { --ink: #111; --line: #E3E3E3; --soft: #F3F3F3; --grey: #5C5C5C; --dim: #8E8E8E; --e: cubic-bezier(.2, .7, .1, 1);
  position: fixed; z-index: 70; right: 24px; bottom: 24px; display: grid; justify-items: end; font: 400 16px/1.5 "Archivo", Arial, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
.tri button, .tri input, .tri textarea { font: inherit; color: inherit; }
.tri button { cursor: pointer; }
.tri[hidden] { display: none; }

/* The living symbol */
@property --o { syntax: "<number>"; inherits: true; initial-value: 0; }
.tri-mark { display: block; width: 100%; height: auto; overflow: visible; }
.tri-mark .blade { transform: translate(calc(var(--dx) * var(--o, 0) * var(--amp, 100) * 1px), calc(var(--dy) * var(--o, 0) * var(--amp, 100) * 1px)); transition: transform .6s var(--e); }
.tri-mark .b1 { --dx: .5; --dy: -.86; }
.tri-mark .b2 { --dx: -.95; --dy: .3; }
.tri-mark .b3 { --dx: .42; --dy: .9; }
.tri[data-alive="1"] .tri-mark .blade { animation: tri-breathe 4.8s ease-in-out infinite; }
.tri[data-alive="1"] .tri-mark .b2 { animation-delay: -1.6s; }
.tri[data-alive="1"] .tri-mark .b3 { animation-delay: -3.2s; }
@keyframes tri-breathe { 0%, 100% { --o: 0; } 50% { --o: .45; } }
.tri[data-alive="1"][data-state="listen"] .tri-mark .blade { animation: none; --o: -.32; transition-duration: .35s; }
.tri[data-alive="1"][data-state="think"] .tri-mark .blade { animation: tri-lift 1.05s var(--e) infinite; }
.tri[data-alive="1"][data-state="think"] .tri-mark .b2 { animation-delay: .35s; }
.tri[data-alive="1"][data-state="think"] .tri-mark .b3 { animation-delay: .7s; }
@keyframes tri-lift { 0%, 60%, 100% { --o: 0; } 25% { --o: 1; } }
.tri[data-alive="1"][data-state="speak"] .tri-mark .blade { animation: tri-talk .5s ease-in-out infinite alternate; }
.tri[data-alive="1"][data-state="speak"] .tri-mark .b2 { animation-delay: .12s; }
.tri[data-alive="1"][data-state="speak"] .tri-mark .b3 { animation-delay: .24s; }
@keyframes tri-talk { from { --o: .05; } to { --o: .55; } }
.tri[data-alive="1"][data-state="wake"] .tri-mark .blade { animation: tri-wake 1.1s var(--e) both; }
@keyframes tri-wake { 0% { --o: 0; } 45% { --o: 1.5; } 100% { --o: .1; } }
.tri[data-alive="1"][data-state="nod"] .tri-mark .blade { animation: tri-nod .7s var(--e) both; }
@keyframes tri-nod { 0% { --o: 0; } 40% { --o: -.6; } 100% { --o: 0; } }
.tri[data-alive="1"][data-state="notice"] .tri-mark .blade { animation: none; --o: .6; transition-duration: .9s; }

/* The orb: asleep, waking, writing */
.tri__orb { position: relative; display: grid; grid-template-columns: 36px 0fr; align-items: start; gap: 0; width: 64px; min-height: 64px; padding: 14px; border-radius: 22px; background: var(--ink); color: #fff;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: width .75s var(--e), grid-template-columns .75s var(--e), gap .75s var(--e), border-radius .75s var(--e), padding .6s var(--e), transform .4s var(--e), opacity .4s, background .4s, color .4s; }
.tri__orb[data-mode="waking"], .tri__orb[data-mode="talk"], .tri__orb[data-mode="bye"] { width: min(380px, calc(100vw - 24px)); grid-template-columns: 36px 1fr; gap: 14px; padding: 14px 18px 16px 14px; border-radius: 24px; }
.tri__orb-mark { width: 36px; height: 36px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: inherit; }
.tri__glyph { width: 34px; --amp: 150; transform: translate(calc(var(--gx, 0) * 2.5px), calc(var(--gy, 0) * 2.5px)); transition: transform .5s var(--e); view-transition-name: tri-mark; }
.tri__orb-body { min-width: 0; overflow: hidden; opacity: 0; transition: opacity .35s var(--e); }
.tri__orb[data-mode="talk"] .tri__orb-body, .tri__orb[data-mode="bye"] .tri__orb-body { opacity: 1; transition-delay: .25s; }
.tri__orb-who { display: block; font-size: .75rem; color: #9A9A9A; white-space: nowrap; }
.tri__orb-who span { margin-left: 4px; padding: 1px 6px; border-radius: 99px; border: 1px solid #3A3A3A; font-size: .625rem; letter-spacing: .04em; }
.tri__orb-text { margin: 4px 0 0; min-height: 1.4em; font-size: 1.0625rem; line-height: 1.4; font-stretch: 106%; white-space: pre-line; }
.tri__orb-text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; animation: tri-caret 1s steps(1) infinite; }
@keyframes tri-caret { 50% { opacity: 0; } }
.tri__orb-replies { display: flex; gap: 8px; max-height: 0; margin-top: 0; opacity: 0; transform: translateY(6px); transition: max-height .5s var(--e), margin .5s var(--e), opacity .4s var(--e), transform .5s var(--e); }
.tri__orb.has-replies .tri__orb-replies { max-height: 60px; margin-top: 14px; opacity: 1; transform: none; }
.tri__orb-replies button { min-height: 40px; padding: 0 15px; border-radius: 99px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; font-weight: 500; font-size: .875rem; transition: background .2s, transform .15s; }
.tri__orb-replies button:first-child { background: #fff; color: var(--ink); border-color: #fff; }
.tri__orb-replies button:active { transform: scale(.96); }
.tri__orb[data-mode="rest"] { cursor: pointer; }
.tri__orb[data-mode="rest"]:hover { transform: translateY(-2px); }
.tri.is-open .tri__orb { display: none; }
.tri__orb.is-light { background: #fff; color: var(--ink); box-shadow: 0 18px 40px -14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.06); }
.tri__orb.is-light .tri__orb-who { color: var(--grey); }
.tri__orb.is-light .tri__orb-who span { border-color: var(--line); }
.tri__orb.is-light .tri__orb-replies button { border-color: var(--line); color: var(--ink); }
.tri__orb.is-light .tri__orb-replies button:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.tri.is-tucked .tri__orb[data-mode="rest"] { opacity: 0; transform: translateY(20px); pointer-events: none; }
::view-transition-group(tri-mark) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }

/* Panel */
.tri__panel { width: 410px; height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 40px 100px -30px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.06); animation: tri-pop .5s var(--e); }
.tri__panel[hidden] { display: none; }
@keyframes tri-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.tri__head { flex: none; position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 16px 14px 12px 18px; box-shadow: 0 1px 0 transparent; transition: box-shadow .3s; }
.tri__panel.is-scrolled .tri__head { box-shadow: 0 1px 0 var(--line); }
.tri__face { width: 38px; flex: none; --amp: 130; }
.tri.is-open .tri__face { view-transition-name: tri-mark; }
.tri__who { flex: 1; min-width: 0; }
.tri__who b { display: block; font-stretch: 112.5%; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.tri__status { display: block; font-size: .8125rem; color: var(--grey); }
.tri__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--soft); display: grid; place-items: center; transition: background .2s, transform .3s var(--e); }
.tri__close:hover { background: #E8E8E8; }
.tri__close:hover svg { transform: translateY(2px); }
.tri__close svg { transition: transform .3s var(--e); }
.tri__close svg { width: 22px; height: 22px; }

.tri__brief { flex: none; display: block; margin: 0 14px 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left; transition: border-color .3s; }
.tri__brief[hidden] { display: none; }
.tri__brief-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; }
.tri__brief-top b { font-weight: 600; }
.tri__brief-count { color: var(--grey); font-variant-numeric: tabular-nums; }
.tri__brief-bars { display: flex; gap: 4px; margin-top: 8px; }
.tri__brief-bars i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tri__brief-bars i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--e); }
.tri__brief-bars i.is-on::after { transform: none; }
.tri__brief-list { display: none; margin: 10px 0 2px; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .8125rem; }
.tri__brief[aria-expanded="true"] .tri__brief-list { display: grid; }
.tri__brief-list dt { color: var(--dim); }
.tri__brief-list dd { margin: 0; }
.tri__brief.is-pulse { border-color: var(--ink); }

.tri__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.tri__log > * { flex-shrink: 0; }
/* Short conversations sit at the bottom, near the input, like a messenger. */
.tri__log > :first-child { margin-top: auto; }
.tri__msg { max-width: 88%; margin: 0; line-height: 1.5; font-size: .96875rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.tri__msg a { color: inherit; text-underline-offset: 3px; }
.tri__msg--bot { align-self: flex-start; }
.tri__msg--bot .w { opacity: 0; transition: opacity .35s var(--e); }
.tri__msg--bot .w.is-in { opacity: 1; }
/* Streamed replies: each new piece of text fades in as it arrives. */
.tri__msg--bot .ink { animation: tri-ink .45s var(--e) both; }
@keyframes tri-ink { from { opacity: 0; filter: blur(2px); } }
.tri__msg--me { align-self: flex-end; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--ink); color: #fff; animation: tri-rise .35s var(--e); }
.tri__msg--meta { align-self: center; font-size: .75rem; color: var(--dim); }
@keyframes tri-rise { from { opacity: 0; transform: translateY(8px); } }
.tri__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 2px; }
.tri__typing i { width: 6px; height: 6px; border-radius: 50%; background: #9A9A9A; animation: tri-blink 1.1s infinite; }
.tri__typing i:nth-child(2) { animation-delay: .15s; }
.tri__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tri-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* Cards inside the conversation */
.tri__card { align-self: stretch; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fff; animation: tri-rise .45s var(--e); }
.tri__card-k { font-size: .75rem; color: var(--grey); }
.tri__card-h { margin: 2px 0 0; font-stretch: 112.5%; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.tri__card-p { margin: 6px 0 0; font-size: .875rem; color: #3A3A3A; }
.tri__card--project { padding: 0; overflow: hidden; }
.tri__card--project a { display: block; color: inherit; text-decoration: none; }
.tri__card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft); }
.tri__card-img img { width: 100%; display: block; }
.tri__card-img .tri__card-phone { position: absolute; right: 10px; bottom: -18%; width: 24%; border-radius: 12px; border: 3px solid #0E0E0E; }
.tri__card-body { padding: 12px 14px 14px; }
.tri__card-link { display: inline-block; margin-top: 8px; font-weight: 600; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
.tri__budget-value { display: block; margin: 8px 0 6px; font-stretch: 112.5%; font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; }
.tri__budget input[type="range"] { width: 100%; height: 36px; accent-color: var(--ink); }
.tri__budget-scale { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--dim); }
.tri__actions { display: flex; gap: 8px; margin-top: 12px; }
.tri__actions .tri__btn { flex: 1; }
.tri__btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 600; font-size: .9375rem; transition: background .2s, transform .15s; }
.tri__btn:active { transform: scale(.97); }
.tri__btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
a.tri__btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; align-self: flex-start; }
.tri__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tri__pick button { min-height: 52px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left; font-weight: 500; font-size: .9375rem; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.tri__pick button small { display: block; color: var(--dim); font-size: .75rem; font-weight: 400; }
.tri__pick button:active { transform: scale(.97); }
.tri__pick button.is-on, .tri__pick button:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.tri__pick button.is-on small, .tri__pick button:hover:not(:disabled) small { color: #BDBDBD; }
.tri__review dl { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 10px 0 0; font-size: .875rem; }
.tri__review dt { padding: 8px 0; color: var(--dim); border-top: 1px solid var(--line); }
.tri__review dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--line); outline: none; border-radius: 4px; }
.tri__review dd[contenteditable="true"] { background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line); padding-inline: 8px; }
.tri__field { display: grid; gap: 4px; margin-top: 10px; font-size: .8125rem; color: var(--grey); }
.tri__field input { min-height: 46px; padding: 0 12px; border: 1px solid #D6D6D6; border-radius: 12px; font-size: 16px; color: var(--ink); background: #fff; }
.tri__field input:focus { outline: 2px solid var(--ink); border-color: transparent; }
.tri__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: .8125rem; color: #3A3A3A; }
.tri__consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.tri__consent a { color: inherit; }
.tri__consent.is-error { color: #B00020; }
.tri__done { text-align: center; padding: 22px 16px; }
.tri__tick { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; background: var(--ink); color: #fff; animation: tri-popin .5s var(--e); }
@keyframes tri-popin { from { transform: scale(.4); opacity: 0; } }

.tri__quick { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 4px; }
.tri__quick:empty { display: none; }
.tri__chip { min-height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-weight: 500; font-size: .9375rem; animation: tri-rise .4s var(--e) both; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.tri__chip:active { transform: scale(.96); }
.tri__chip:hover { border-color: var(--ink); }
.tri__chip.is-on, .tri__chip--done { background: var(--ink); color: #fff; border-color: var(--ink); }
.tri__chip--done:disabled { opacity: .35; }
.tri__chip--ghost { color: var(--grey); }
.tri__form { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 8px 12px 4px; padding: 5px 5px 5px 16px; border: 1px solid #DADADA; border-radius: 24px; background: #fff; transition: border-color .25s, box-shadow .3s var(--e); }
.tri__form:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(17,17,17,.06); }
.tri__form textarea { flex: 1; resize: none; border: 0; outline: 0; padding: 10px 0 9px; min-height: 40px; max-height: 110px; background: none; font-size: 16px; line-height: 1.35; caret-color: var(--ink); }
.tri__form textarea::placeholder { color: #9C9C9C; }
/* Send: quiet grey while there is nothing to send, solid ink when there is; the arrow lifts off on send,
   and a thin ring turns around it while the assistant is thinking. */
.tri__send { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: #ABABAB; display: grid; place-items: center; overflow: hidden; transition: background .3s var(--e), color .3s var(--e), transform .35s var(--e), box-shadow .3s var(--e); }
.tri__send:disabled { cursor: default; }
.tri__send:not(:disabled) { background: var(--ink); color: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,.55); }
.tri__send:not(:disabled):hover { transform: translateY(-1px); }
.tri__send:not(:disabled):active { transform: scale(.9); }
.tri__send svg { width: 20px; height: 20px; transition: transform .4s var(--e); }
.tri__send:not(:disabled) svg { transform: translateY(-1px); }
.tri__send.is-sent svg { animation: tri-launch .55s var(--e); }
@keyframes tri-launch { 0% { transform: none; } 40% { transform: translateY(-150%); opacity: 0; } 41% { transform: translateY(150%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tri__send::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: currentColor; opacity: 0; transition: opacity .25s; }
.tri[data-state="think"] .tri__send::after { opacity: .9; animation: tri-spin .9s linear infinite; }
@keyframes tri-spin { to { transform: rotate(360deg); } }
.tri__note { flex: none; margin: 0; padding: 2px 16px calc(10px + env(safe-area-inset-bottom, 0px)); font-size: .6875rem; color: var(--dim); text-align: center; }
.tri__note a { color: inherit; }
.tri__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.tri-open { overflow: hidden; }

/* Phones: the orb rests out of the way (the action bar has Ask); when it wakes, it rises above the bar.
   The conversation is a bottom sheet. */
@media (max-width: 960px) {
  .tri { right: 12px; left: 12px; bottom: calc(var(--dock, 76px) + 8px + env(safe-area-inset-bottom, 0px)); }
  .tri__orb[data-mode="rest"] { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }
  .tri__orb[data-mode="waking"], .tri__orb[data-mode="talk"], .tri__orb[data-mode="bye"] { width: 100%; }
  .tri__orb-text { font-size: 1.125rem; }
  .tri__orb-replies button { min-height: 44px; flex: 1; }
  .tri.is-open { left: 0; right: 0; bottom: 0; }
  .tri__panel { width: 100vw; height: 92svh; border-radius: 24px 24px 0 0; animation: tri-sheet .5s var(--e); }
  @keyframes tri-sheet { from { transform: translateY(100%); } }
  .tri__quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; -webkit-mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); }
  .tri__quick::-webkit-scrollbar { display: none; }
  .tri__chip { flex: none; }
  body.tri-open .dock { transform: translateY(150%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tri .tri-mark .blade { animation: none !important; }
  .tri *, .tri { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Privacy page text */
.legal { padding: 8px 0 96px; }
.legal .wrap { max-width: 720px; }
.legal h2 { margin: 40px 0 8px; font-stretch: 112.5%; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.legal p { margin: 0; color: #3A3A3A; line-height: 1.65; }
.legal a { color: inherit; text-underline-offset: 3px; }