/* Layout: scrolling page. Hero = name, three CTAs, chat widget (left) and plain photo (right). Then three full-width lead-in sections. */
:root {
  --bg: #000000;
  --panel: #0b0e15;
  --panel-2: #121724;
  --ink: #f2f6fb;
  --body: #c3cad6;
  --muted: #8f9aad;
  --line: rgba(190,210,255,0.16);
  /* Default accent: Deep Caribbean blue. --accent fills; --accent-text is the text color; --on-accent sits on a fill.
     The other Deep colors are kept below as [data-accent] options. */
  --accent: #0089c4;
  --accent-hover: #2aa6de;
  --accent-text: #0089c4;
  --on-accent: #050709;
  --chat-bg: #d3d3d3;
    --chat-ink: #101010;
  --chat-muted: #555555;
  --chat-line: rgba(0,0,0,0.16);
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, sans-serif;
  --label: 'Montserrat', 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-accent="green"]  { --accent: #1fa878; --accent-hover: #3dc496; --accent-text: #1fa878; --on-accent: #050709; }
:root[data-accent="yellow"] { --accent: #dccb3f; --accent-hover: #e8da6a; --accent-text: #dccb3f; --on-accent: #050709; }
:root[data-accent="orange"] { --accent: #e8692e; --accent-hover: #f08454; --accent-text: #e8692e; --on-accent: #050709; }
:root[data-accent="red"]    { --accent: #cf2748; --accent-hover: #de4d68; --accent-text: #e5546e; --on-accent: #ffffff; }
:root[data-accent="blue"]   { --accent: #0089c4; --accent-hover: #2aa6de; --accent-text: #0089c4; --on-accent: #050709; }
:root[data-accent="indigo"] { --accent: #6258d8; --accent-hover: #7f77e6; --accent-text: #8178ec; --on-accent: #ffffff; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--body); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; padding-inline: clamp(16px, 5vw, 64px); overflow-x: hidden; }
.wrap { max-width: 1120px; margin: 0 auto; }
h1, h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); text-wrap: balance; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* hero */
.name { font-family: var(--label); font-weight: 700; font-size: clamp(1.9rem, 3.75vw, 2.65rem); text-transform: uppercase; letter-spacing: .12em; line-height: 1.05; color: var(--ink); margin-bottom: 28px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: stretch; padding-block: 36px 88px; }
.left { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.left .chat { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-top: 10px; }
.ctas { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); padding: 15px 20px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease, background .45s ease, color .45s ease; }
.cta.in { opacity: 1; transform: none; }
.cta .t { font-family: var(--serif); font-size: clamp(1.35rem, 2.3vw, 1.7rem); font-weight: 500; line-height: 1.1; display: block; }
.cta small { display: block; font-size: .78rem; color: var(--muted); margin-top: 3px; transition: color .45s ease; }
.cta .arr { font-family: var(--sans); font-size: 1.7rem; font-weight: 300; line-height: 1; transition: transform .25s; }
.cta.hl { color: var(--accent-text); }
.cta:hover, .cta:focus-visible { background: var(--accent); color: var(--on-accent); }
.cta:hover small, .cta:focus-visible small { color: rgba(5,7,9,.72); }
.cta:hover .arr, .cta:focus-visible .arr { transform: translateX(5px); }

/* chat: the one rounded, light object on the page */
.chat { background: none; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(26px) scale(.96); transform-origin: 20% 100%; }
.chat.in { animation: pop .65s cubic-bezier(.2, 1.35, .4, 1) forwards; }
@keyframes pop { 0% { opacity: 0; transform: translateY(26px) scale(.96); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: url('/home-avatar.jpg?v=1') center / cover no-repeat; }
.log { padding: 22px 20px 16px; flex: 1 1 0; min-height: 60px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(190,210,255,.3) transparent; display: flex; flex-direction: column; gap: 12px; }
.log > :first-child { margin-top: auto; }
.row { display: flex; gap: 10px; align-items: flex-end; }
.row.user { justify-content: flex-end; }
.row { animation: rowin .3s ease; }
@keyframes rowin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bubble.pop { animation: bpop .45s cubic-bezier(.2, 1.3, .4, 1); transform-origin: 0 100%; }
.row.user .bubble.pop { transform-origin: 100% 100%; }
@keyframes bpop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.bubble.long { border-radius: 22px; padding: 18px 26px; max-width: 94%; display: flex; flex-direction: column; gap: 12px; }
.bubble.long b { font-weight: 600; display: block; margin-bottom: 4px; }
.bubble.long ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }
.bubble.long .tagline { font-size: .78rem; opacity: .78; }
.bubble { background: var(--accent); color: #fff; padding: 12px 26px; border-radius: 999px; font-size: .98rem; line-height: 1.45; max-width: 86%; min-width: 0; overflow-wrap: anywhere; }
.row.user .bubble { background: #f2f2f2; color: var(--chat-ink); }
/* One-time travelling outline around a new reply from Adam (single Deep color). */
/* Outline color: Deep green by default. Try another with ?trace=yellow|orange|red|indigo|blue on the URL. */
:root { --trace-color: #1fa878; }
:root[data-trace="yellow"] { --trace-color: #dccb3f; } :root[data-trace="orange"] { --trace-color: #e8692e; }
:root[data-trace="red"] { --trace-color: #cf2748; } :root[data-trace="indigo"] { --trace-color: #6258d8; } :root[data-trace="blue"] { --trace-color: #0089c4; }
@property --trace { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.bubble { position: relative; }
.bubble.trace::after {
  content: ''; position: absolute; inset: -4px; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--trace), transparent 0deg, color-mix(in srgb, var(--trace-color) 35%, transparent) 120deg, var(--trace-color) 300deg, transparent 330deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--trace-color) 60%, transparent));
  animation: trace 1.8s cubic-bezier(.45, .05, .35, 1) forwards;
}
@keyframes trace { 0% { --trace: 0deg; opacity: 1; } 85% { opacity: 1; } 100% { --trace: 360deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bubble.trace::after { display: none; } }
.dots { display: inline-flex; gap: 5px; padding: 6px 2px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: bounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.sample { font-size: .74rem; color: var(--muted); padding: 0 20px 12px; }
.chat form { display: flex; padding: 14px 20px; border-top: 1px solid var(--line); }
.field { position: relative; flex: 1; min-width: 0; background: #f2f2f2; border: 1px solid transparent; border-radius: 10px; transition: border-color .2s; }
.field:focus-within { border-color: var(--accent); }
.field textarea { display: block; width: 100%; resize: none; overflow-y: auto; background: none; border: 0; color: var(--chat-ink); font: inherit; line-height: 1.4; padding: 12px 48px 12px 16px; max-height: 128px; min-height: 46px; }
.field textarea:focus { outline: none; }
.field textarea::placeholder { color: #6b6b6b; }
.field .enter { position: absolute; right: 6px; bottom: 5px; width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: #6b6b6b; cursor: pointer; transition: color .2s; }
.field .enter svg { width: 20px; height: 20px; }
.field.has .enter { color: #101010; }
.field .enter:hover, .field .enter:focus-visible { color: var(--accent); }
.chat-head { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.chat-head .ctl { width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: #ffffff; cursor: pointer; opacity: 1; transition: background .2s; }
.chat-head .ctl svg { width: 18px; height: 18px; }
.chat-head .lbl { font-size: .82rem; color: var(--muted); display: none; }
.chat.max .lbl { display: inline; }
.chat.max .ctl { opacity: 1; }
#scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.78); opacity: 0; pointer-events: none; transition: opacity .25s; }
#scrim.on { opacity: 1; pointer-events: auto; }
.chat.max { position: fixed; z-index: 60; left: 50%; top: 50%; width: 75vw; height: 75vh; max-width: none; margin: 0; background: #0a0d13; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 30px 90px rgba(0,0,0,.7); animation: maxin .3s ease forwards; opacity: 1; transform: translate(-50%, -50%); }
@keyframes maxin { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
.chat.max .chat-head { height: 44px; padding: 0 18px; }
.chat.max .log { padding: 28px clamp(20px, 5vw, 56px) 20px; }
.chat.max .chat-head .ctl { color: var(--ink); }
.chat.max form, .chat.max .sample { padding-inline: clamp(20px, 5vw, 56px); }
@media (max-width: 620px) { .chat.max { width: 94vw; height: 82vh; } }
#fbar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 30; background: rgba(0,0,0,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding-inline: clamp(16px, 5vw, 64px); transform: translateY(-110%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
#fbar.on { transform: none; }
#fbar .in { max-width: 1120px; margin: 0 auto; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#fbar .nm { font-family: var(--label); font-weight: 700; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
#fbar a { font-size: .8rem; color: var(--muted); text-decoration: none; }
#fbar a:hover, #fbar a:focus-visible { color: var(--ink); }

/* photo */
.photo { margin: 0; position: relative; opacity: 0; transition: opacity 1.2s ease .2s; }
.photo.in { opacity: 1; }
.photo { height: 100%; }
.photo img { display: block; width: 100%; height: 100%; min-height: 640px; object-fit: cover; object-position: 50% 30%; border-radius: 2px; border: 1px solid var(--line); }

/* lead-in sections */
.lead { border-top: 1px solid var(--line); padding-block: 96px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.lead .txt { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; min-width: 0; }
.lead h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; }
.lead p { font-size: 1.1rem; max-width: 46ch; }
.eyebrow { font-family: var(--label); font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.btn { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 500; padding: 14px 22px; border-radius: 2px; border: 1px solid var(--accent); color: var(--accent-text); transition: background .2s, color .2s; }
.btn:hover { background: var(--accent); color: var(--on-accent); }
.btn.solid { background: var(--accent); color: var(--on-accent); }
.btn.solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.stats div { padding: 20px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stats b { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--ink); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats span { font-size: .85rem; color: var(--muted); }
.list { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.list > div, .list > a { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.list > a { color: inherit; text-decoration: none; transition: background .2s; }
.list > a:hover b, .list > a:focus-visible b { color: var(--accent-text); }
.list > a span:after { content: ' \203A'; font-size: 1.1rem; }
.list b { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); font-weight: 500; }
.list span { font-size: .85rem; color: var(--muted); text-align: right; }
footer { border-top: 1px solid var(--line); padding-block: 36px 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: .9rem; color: var(--muted); }

.js .rv { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
#fscrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.8); opacity: 0; pointer-events: none; transition: opacity .25s; }
#fscrim.on { opacity: 1; pointer-events: auto; }
#fdlg { position: fixed; z-index: 75; left: 50%; top: 50%; width: min(720px, 92vw); height: min(80vh, 720px); transform: translate(-50%, -48%) scale(.97); opacity: 0; visibility: hidden; transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s; background: #0a0d13; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 30px 90px rgba(0,0,0,.7); display: flex; flex-direction: column; color: var(--body); }
#fdlg.on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition-delay: 0s; }
.fhead { height: 52px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 12px 0 clamp(18px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.fhead b { font-family: var(--label); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.fhead button { width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: #fff; cursor: pointer; }
.fhead button:hover, .fhead button:focus-visible { background: rgba(255,255,255,.14); }
.fhead svg { width: 18px; height: 18px; }
#flog { padding: 24px clamp(18px, 4vw, 40px) 16px; }
.fnote { flex: none; font-size: .74rem; color: var(--muted); padding: 0 clamp(18px, 4vw, 40px) 12px; }
#fform { flex: none; display: flex; padding: 14px clamp(18px, 4vw, 40px); border-top: 1px solid var(--line); }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-bottom: 64px; }
  .photo { order: 3; height: auto; }
  .left .chat .log { flex: none; height: 190px; }
  .photo img { height: auto; aspect-ratio: 4 / 5; min-height: 0; }
  .lead { grid-template-columns: 1fr; padding-block: 64px; }
}
/* Phones: wrapped text in a full pill sits against the curved ends, so use a softer radius (single lines still read as pills) and a little more side padding. */
@media (max-width: 620px) {
  .bubble { border-radius: 26px; padding: 13px 28px; }
  .bubble.long { padding: 18px 28px; }
}
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } * { animation: none !important; transition: none !important; } .cta, .chat, .photo { opacity: 1; transform: none; } }

.btn.soon { border-color: var(--line); color: var(--muted); cursor: default; }
.btn.soon:hover { background: none; color: var(--muted); }
.lead { scroll-margin-top: 54px; }
.sample a { color: inherit; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }