:root {
  --home-paper: #f7f3eb;
  --home-paper-warm: #f1e9db;
  --home-ink: #1b2b3a;
  --home-copy: #33434f;
  --home-blue: #2f6a99;
  --home-blue-light: #8fb7d9;
  --home-brown: #8a4a1f;
  --home-green: #a3c4a6;
  --home-green-dark: #173b3f;
  --home-ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }
body { background: var(--home-paper); color: var(--home-ink); overflow-x: clip; }
.hero { margin-bottom: 0; }
.hero-copy::before { display:none; }
.hero-copy .eyebrow { color:#dcebf2; }
.hero-copy h1 { color:#fefdfa; font-size: clamp(2.6rem, 4.2vw, 3.75rem); font-weight: 700; letter-spacing: -.025em; text-shadow:0 2px 12px rgba(12,32,48,.26); }
.hero-copy .hero-description { color:#f2f7f9; text-shadow:0 1px 8px rgba(12,32,48,.22); }
/* The project mark stays white on its darker brand green. */
.hero-copy .project-hero-cta--llama { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.45); }
.hero-copy .project-hero-cta--llama .project-cta-memory-mark { color: #fff; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }

.home-body { font-family: var(--sans); }
.home-body *, .site-footer * { box-sizing: border-box; }
.home-body h2, .home-body h3, .home-body p { margin-top: 0; }
.home-body em { color: var(--home-blue); font-style: normal; }
.home-wrap { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.home-section { padding: 128px 0; }
.chapter { display: flex; align-items: center; gap: 28px; margin-bottom: 54px; }
.chapter span { color: var(--home-blue); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; white-space: nowrap; }
.chapter::after { content: ""; height: 3px; flex: 1; border-radius: 2px; background: var(--home-blue); }
.display { font-weight: 700; letter-spacing: -.025em; text-wrap: pretty; }
.section-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); gap: 80px; align-items: end; }
.section-intro h2 { margin-bottom: 0; font-size: clamp(3.25rem, 6vw, 5rem); line-height: 1; }
.section-intro p { margin-bottom: 8px; color: var(--home-copy); font-size: 1.25rem; line-height: 1.55; }

.capabilities { padding-top: 64px; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 56px; padding-top: 76px; }
.capability { display: flex; flex-direction: column; gap: 14px; }
.capability:nth-child(2) { transform: translateY(40px); }
.capability:nth-child(3) { transform: translateY(80px); }
.capability h3 { margin-bottom: 0; font-size: 2rem; line-height: 1.12; letter-spacing: -.01em; }
.capability p { color: var(--home-copy); font-size: 1.0625rem; line-height: 1.6; }

.example-section { margin-top: 32px; padding: 120px 0 104px; background: var(--home-paper-warm); }
.example-head { max-width: 980px; }
.example-head .chapter { margin-bottom: 22px; }
.example-head h2 { margin-bottom: 22px; font-size: clamp(3rem, 5.5vw, 4.5rem); line-height: 1; }
.example-head > p { max-width: 820px; color: var(--home-copy); font-size: 1.25rem; line-height: 1.55; }
.example-flow { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 40px; margin-top: 56px; align-items: stretch; }
.black-response { align-self: start; padding: 32px 30px; border-radius: 12px; background: #e4dbcb; }
.black-response .label { color: #7a6a55; }
.black-response strong { display: block; margin: 14px 0; color: #4a4038; font-size: 1.625rem; line-height: 1.2; }
.black-response p { color: #6b5e4e; font-size: 1rem; line-height: 1.5; }
.label { color: var(--home-blue); font-size: .9375rem; font-weight: 700; }
.clear-response { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.evidence-card, .relationship { padding: 28px 30px 30px; border-radius: 12px; background: var(--home-paper); box-shadow: 0 24px 50px -40px rgba(27,43,58,.35); }
.evidence-card h3 { margin: 14px 0; font-size: 1.5rem; line-height: 1.2; }
.record-row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid #e1d9cc; }
.record-row:last-child { border-bottom: 0; }
.record-row strong { color: var(--home-blue); }
.record-fill { position: relative; display:inline-block; min-width:132px; color: #9a8c78; font-style: italic; text-align: right; }
.record-fill b { position: absolute; inset: 0; display: block; padding-left: 8px; background: var(--home-paper); color: var(--home-ink); font-style: normal; white-space: nowrap; }
.record-empty { transition:opacity .16s ease; }
.is-in .record-empty { opacity:0; }
.conversation { padding: 12px 8px 0; }
.conversation blockquote { margin: 14px 0; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; font-style: italic; line-height: 1.08; letter-spacing: -.02em; }
.conversation p { color: #7a6a55; }
.relationship { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.relationship h3 { margin: 10px 0 0; font-size: 1.875rem; line-height: 1.15; }
.timeline { position: relative; min-height: 96px; }
.timeline-line, .timeline-band { position: absolute; top: 52px; left: 0; height: 4px; border-radius: 2px; }
.timeline-line { right: 0; background: #e1d5c3; }
.timeline-band { width: 42%; background: #9a6540; transform-origin: left; }
.time { position: absolute; top: 0; }
.time strong { display: block; color: #9a6540; font-size: 1.875rem; line-height: 1; }
.time small { color: var(--home-copy); font-size:.72rem; letter-spacing:-.01em; white-space:nowrap; }
.time-start { left: 0; }.time-mid { left: 42%; transform: translateX(-50%); }.time-end { right: 0; text-align: right; }
.time-end strong { color: var(--home-blue); }
.next-artifact { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 56px; overflow: hidden; border-radius: 14px 22px 12px 24px; background: var(--home-ink); color: var(--home-paper); box-shadow: 0 40px 80px -50px rgba(27,43,58,.7); }
.next-artifact::before, .next-artifact::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.next-artifact::before { left: -10%; top: -40%; width: 60%; height: 180%; background: radial-gradient(circle,rgba(47,106,153,.55),rgba(47,106,153,0) 65%); animation: field-a 10.4s cubic-bezier(.45,0,.55,1) -1.6s infinite; }
.next-artifact::after { right: -10%; bottom: -40%; width: 55%; height: 170%; background: radial-gradient(circle,rgba(143,183,217,.22),rgba(143,183,217,0) 65%); animation: field-b 13.2s cubic-bezier(.45,0,.55,1) -9.1s infinite; }
.artifact-copy { position: relative; z-index: 1; }
.artifact-copy:last-child { padding-left: 32px; border-left: 1px solid rgba(143,183,217,.4); }
.artifact-copy .label { color: var(--home-blue-light); }
.artifact-copy h3 { margin: 12px 0; color:var(--home-paper); font-size: clamp(2rem, 4vw, 3.75rem); line-height: 1; }
.artifact-copy:last-child h3 { font-size: 1.75rem; line-height: 1.2; }
.artifact-copy p { color: #d6dee5; font-size: 1.125rem; }
.choice { display: inline-block; margin-right: 8px; padding: 5px 12px; border: 1px solid rgba(143,183,217,.5); border-radius: 999px; }
.choice.selected { border-color: var(--home-blue-light); background: var(--home-blue-light); color: var(--home-ink); font-weight: 700; }
.example-note { max-width: 900px; margin: 28px 0 0; color: #7a6a55; font-size: .9375rem; line-height: 1.55; }

.projects-intro { padding-bottom: 72px; }
.project { position: relative; overflow: hidden; }
.project-inner { width: min(1280px, calc(100% - 80px)); margin: 0 auto; display: grid; grid-template-columns: minmax(360px, 520px) minmax(0,1fr); gap: 72px; align-items: center; }
.project-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; }
.project-copy h3 { margin-bottom: 0; font-size: clamp(2.7rem, 4.4vw, 3.125rem); line-height: 1.04; }
.project-copy p { margin-bottom: 0; font-size: 1.0625rem; line-height: 1.6; }
.project-name { display: flex; align-items: center; gap: 12px; font-size: 1.625rem; font-weight: 700; }
.project-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 4px; }
.home-button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1.5px solid currentColor; border-radius: 4px; color: inherit; text-decoration: none; font-weight: 600; transition: transform 420ms var(--home-ease), background-color 180ms ease; }
.home-button:hover { transform: scale(.975); }
.text-link { color: inherit; font-weight: 600; text-underline-offset: 4px; }

.llama-project { margin: 0 40px; padding: 104px 0 88px; border-radius: 24px; background: var(--home-green-dark); color: #eaf2ee; }
.llama-project::after { content:""; position:absolute; right:-160px; top:-200px; width:760px; height:760px; border-radius:50%; background:radial-gradient(circle,rgba(163,196,166,.14),rgba(163,196,166,0) 70%); }
.llama-project .project-copy p { color: #c6dacf; }
.llama-project .project-copy h3 { color:#eaf2ee; }
.llama-project .project-copy p:last-of-type { padding-top: 10px; border-top: 1px solid rgba(163,196,166,.3); }
.llama-project em { color: #8fd1a8; }
.llama-mark { display: inline-flex; align-items: center; gap: 5px; }
.llama-mark i { display: flex; align-items:center; justify-content:center; width:22px; height:34px; border-radius:5px; font-style:normal; font-size:16px; }
.llama-mark i:first-child { background:#4e8a65; color:#eaf2ee; }
.llama-mark i:nth-child(2) { border:3px solid #4e8a65; color:#a3c4a6; }
.llama-lines { display:flex; flex-direction:column; gap:3px; }
.llama-lines b { width:16px; height:6px; border-radius:2px; background:#a3c4a6; }
.llama-project .primary { border-color: var(--home-green); background: var(--home-green); color:#14302b; }
.llama-project .secondary { border-color:rgba(163,196,166,.6); color:#eaf2ee; }
.agent-stack { position: relative; z-index: 2; }
.agent-surface { overflow: hidden; border-radius: 12px; background: var(--home-paper); color: var(--home-ink); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.agent-top { display:flex; justify-content:space-between; gap:16px; padding:16px 22px; background:#f1ebe0; font-size:.8125rem; font-weight:600; }
.agent-status { color:#2e7a55; }.agent-status::before { content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#2e7a55; }
.agent-chat { padding:22px 24px 24px; display:flex; flex-direction:column; gap:14px; }
.agent-chat p { max-width:90%; margin:0; padding:14px 18px; border-radius:10px 10px 10px 3px; background:#f1e9db; color:var(--home-copy); line-height:1.5; }
.agent-chat p:last-child { align-self:flex-end; border-radius:10px 10px 3px 10px; background:#e3efe7; }
.agent-chat span { display:block; margin-bottom:4px; color:#2e7a55; font-size:.75rem; font-weight:700; }
.project-tie { position:relative; height:56px; display:flex; justify-content:center; }
.project-tie::before { content:""; width:2px; height:100%; background:var(--home-green); }
.project-tie span { position:absolute; top:50%; left:calc(50% + 14px); transform:translateY(-50%); color:var(--home-green); font-size:.75rem; font-weight:600; white-space:nowrap; }
.benchmark { padding:26px 28px 22px; border-radius:12px; background:rgba(10,26,28,.55); }
.benchmark-head { display:flex; justify-content:space-between; gap:18px; color:#a3c4a6; font-size:.75rem; }
.benchmark-head strong { color:#f7fbf8; font-size:1.125rem; }
.chart { height:170px; margin:16px 0 8px 44px; border-left:1px solid rgba(163,196,166,.35); border-bottom:1px solid rgba(163,196,166,.35); }
.chart svg { width:100%; height:100%; overflow:visible; }
.chart-axis { display:flex; justify-content:space-between; margin-left:44px; color:#a3c4a6; font-size:.7rem; }
.legend { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:14px; font-size:.8125rem; font-weight:600; }
.legend i { display:inline-block; width:16px; height:3px; margin-right:8px; border-radius:2px; vertical-align:middle; }

.frame-project { margin:40px 40px 0; padding:104px 0 96px; border-radius:24px; background:#f3e6d6; }
.frame-project .project-inner { grid-template-columns:minmax(340px,520px) minmax(0,640px); }
.frame-project .project-copy p { color:var(--home-copy); }
.frame-project em { color:#9a6540; }
.frame-project .primary { border-color:var(--home-brown); background:var(--home-brown); color:#fbf6ee; }
.cf-mark { width:44px; height:44px; object-fit:contain; }
.frame-visual { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:16px; }
.surface { overflow:hidden; border-radius:12px; background:#fbf8f2; box-shadow:0 30px 60px -44px rgba(120,80,40,.5); }
.surface + .surface { margin-top:16px; }
.surface-head { display:flex; justify-content:space-between; gap:12px; padding:12px 18px; background:#f6eee2; font-size:.8125rem; font-weight:600; }
.desk-copy { padding:18px 20px; color:var(--home-copy); font-size:.9rem; line-height:1.5; }
.desk-copy p { margin-bottom:10px; }.desk-copy p:last-child { margin-bottom:0; }
.desk-copy .highlight { padding:8px 10px; border-radius:6px; background:#f1dfc9; color:var(--home-ink); }
.build-shot { position:relative; height:172px; overflow:hidden; background:#f1e8da; }
.build-shot img { width:100%; height:100%; object-fit:cover; object-position:left top; }
.build-highlight { position:absolute; left:35%; top:54%; width:15%; height:22%; border:2px solid var(--home-brown); border-radius:4px; box-shadow:0 0 0 4px rgba(138,74,31,.15); }
.history { display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:12px; background:#efe1cf; color:#4a4038; font-size:.8125rem; }
.history > strong { color:var(--home-brown); font-size:.9375rem; }
.history-entry { padding:9px 10px; border-left:3px solid #d9c0a6; }
.history-entry.active { border-color:var(--home-brown); border-radius:6px; background:#fbf8f2; }

.darp-project { margin-top:40px; padding:130px 0; background:#e9f0f6; }
.darp-project::before,.darp-project::after { content:""; position:absolute; inset:-8%; pointer-events:none; }
.darp-project::before { background:radial-gradient(ellipse 45% 55% at 70% 30%,#fff 0%,rgba(255,255,255,0) 70%); animation:cloud-a 28s ease-in-out infinite alternate; }
.darp-project::after { background:radial-gradient(ellipse 40% 50% at 25% 75%,#d7e6f1 0%,rgba(215,230,241,0) 70%),radial-gradient(ellipse 30% 40% at 55% 60%,#fff 0%,rgba(255,255,255,0) 70%); animation:cloud-b 37s ease-in-out -11s infinite alternate; }
.darp-project .project-inner { position:relative; z-index:1; grid-template-columns:1fr 1fr; max-width:1120px; }
.darp-project .project-copy p { color:var(--home-copy); }
.darp-project .primary { border-color:var(--home-blue); background:var(--home-blue); color:var(--home-paper); }
.darp-record { padding:40px 44px; border-radius:12px; background:#fbfcfd; box-shadow:0 40px 80px -50px rgba(47,106,153,.5); font-family:var(--mono); font-size:1.15rem; }
.darp-record p { display:grid; grid-template-columns:140px 1fr; gap:10px; margin:0 0 18px; }
.darp-record small { display:block; padding-top:10px; border-top:1px solid #dce6ee; color:#5a6b7a; font: .8rem/1.4 var(--sans); }

.public-work { display:grid; grid-template-columns: 400px 1fr; gap:80px; }
.public-copy h2 { font-size:clamp(2.75rem,4.5vw,3.75rem); line-height:1.02; }
.public-copy p { color:var(--home-copy); font-size:1.05rem; line-height:1.6; }
.public-copy p:last-child { padding-top:14px; border-top:1px solid #e1d9cc; font-size:1rem; }
.event-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.event-card { display:flex; flex-direction:column; gap:16px; padding:36px; border-radius:12px; background:var(--home-paper-warm); color:var(--home-copy); text-decoration:none; transition:transform 420ms var(--home-ease), box-shadow 420ms var(--home-ease); }
.event-card:last-child { margin-top:56px; background:#e7eef4; }
.event-card:hover { transform:translateY(-4px); box-shadow:0 24px 50px -38px rgba(27,43,58,.45); }
.event-card .label { color:var(--home-blue); }
.event-card h3 { margin:0; color:var(--home-ink); font-size:1.875rem; line-height:1.12; }
.event-card p { margin:0; font-size:1rem; line-height:1.6; }
.event-card .link { margin-top:auto; color:var(--home-blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }

.contact-band { padding:120px 0 128px; background:var(--home-ink); color:var(--home-paper); }
.contact-band .chapter span { color:var(--home-blue-light); }.contact-band .chapter::after { background:var(--home-blue-light); opacity:.7; }
.contact-grid { display:grid; grid-template-columns:1fr 500px; gap:80px; align-items:end; }
.contact-grid h2 { margin:0; color:var(--home-paper); font-size:clamp(4rem,7vw,6rem); line-height:.98; }
.contact-grid em { color:var(--home-blue-light); }
.contact-copy p { color:#d6dee5; font-size:1.125rem; line-height:1.6; }
.contact-copy .engagements { color:var(--home-blue-light); font-size:.9375rem; }
.contact-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.contact-actions .home-button { border-color:var(--home-paper); background:var(--home-paper); color:var(--home-ink); }
.contact-actions a:last-child { color:var(--home-blue-light); font-weight:600; }

.home-page-body .site-footer { margin-top:0; background:var(--home-paper); }

@keyframes home-settle { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes home-forward { from { opacity:.18; transform:scale(.9); } to { opacity:1; transform:none; } }
@keyframes home-fill { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
@keyframes home-band { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes home-produce { 0% { opacity:0; transform:translateY(-26px) scaleY(.94); } 70% { opacity:1; } 100% { opacity:1; transform:none; } }
@keyframes home-tie { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes field-a { 0%,100% { transform:translate(-6%,-4%) scale(1); } 50% { transform:translate(8%,6%) scale(1.12); } }
@keyframes field-b { 0%,100% { transform:translate(10%,8%) scale(1.05); } 50% { transform:translate(-8%,-6%) scale(.92); } }
@keyframes cloud-a { from { transform:translate(0,0); } to { transform:translate(2.5%,-2.2%); } }
@keyframes cloud-b { from { transform:translate(0,0); } to { transform:translate(-2.2%,1.8%); } }
[data-home-scene].is-armed:not(.is-in) [data-home-motion] { opacity:0; }
[data-home-scene].is-in [data-home-motion] { animation:.68s var(--home-ease) var(--delay,0s) both home-settle; }
[data-home-scene].is-in [data-home-motion="forward"] { animation-name:home-forward; animation-duration:.44s; }
[data-home-scene].is-in [data-home-motion="fill"] { animation-name:home-fill; }
[data-home-scene].is-in [data-home-motion="band"] { animation-name:home-band; transform-origin:left center; }
[data-home-scene].is-in [data-home-motion="produce"] { animation-name:home-produce; animation-duration:.8s; animation-timing-function:cubic-bezier(.5,0,.2,1); transform-origin:center top; }
[data-home-scene].is-in .project-tie::before { animation:.68s var(--home-ease) .5s both home-tie; transform-origin:center top; }

@media (max-width: 980px) {
  .home-section { padding:96px 0; }
  .section-intro, .public-work, .contact-grid { grid-template-columns:1fr; gap:32px; }
  .capability-grid { gap:32px; }
  .example-flow { grid-template-columns:1fr; }
  .project-inner, .frame-project .project-inner, .darp-project .project-inner { grid-template-columns:1fr; }
  .llama-project, .frame-project { margin-left:24px; margin-right:24px; }
  .project-inner { width:min(760px,calc(100% - 48px)); }
  .darp-record { order:2; }
  .public-work { width:min(760px,calc(100% - 48px)); }
}

@media (min-width: 760px) {
  .hero { min-height:550px; }
  .hero-copy { top:38px; max-width:900px; padding-inline:50px; }
  .hero-copy h1 { font-size:54px; }
}

@media (max-width: 700px) {
  .home-page-body .site-nav a,
  .home-page-body .nav-dropdown-toggle { font-size:12px; }
  .hero { min-height:620px; }
  .hero-motion-control { top:530px; right:24px; width:36px; height:36px; }
  .home-wrap { width:calc(100% - 40px); }
  .home-section { padding:76px 0; }
  .capabilities { padding-top:40px; }
  .chapter { gap:14px; margin-bottom:30px; }
  .chapter span { font-size:1.15rem; white-space:normal; }
  .section-intro h2 { font-size:2.625rem; }
  .section-intro p { font-size:1.05rem; }
  .capability-grid { grid-template-columns:1fr; padding-top:48px; }
  .capability:nth-child(n) { transform:none; }
  .capability h3 { font-size:1.6rem; }
  .example-section { margin-top:0; padding:76px 0 72px; }
  .example-head h2 { font-size:2.375rem; }
  .example-flow { margin-top:40px; }
  .clear-response { grid-template-columns:1fr; }
  .record-row:last-child { align-items:flex-start; min-height:48px; }
  .record-fill { display:grid; min-width:118px; min-height:2.8em; line-height:1.3; }
  .record-fill > * { grid-area:1 / 1; }
  .record-fill b { position:relative; inset:auto; width:100%; min-height:2.8em; padding-left:4px; }
  .relationship, .next-artifact { grid-column:auto; grid-template-columns:1fr; }
  .relationship { gap:24px; }
  .record-fill b { white-space:normal; }
  .next-artifact { gap:28px; padding:38px 28px; }
  .artifact-copy:last-child { padding:28px 0 0; border-left:0; border-top:1px solid rgba(143,183,217,.4); }
  .projects-intro { padding-bottom:48px; }
  .llama-project, .frame-project { margin:0; border-radius:0; padding:76px 0; }
  .project-inner { width:calc(100% - 40px); gap:44px; }
  .project-copy h3 { font-size:2.35rem; }
  .agent-top, .benchmark-head { flex-direction:column; }
  .project-tie span { left:calc(50% + 8px); font-size:.65rem; }
  .frame-visual { grid-template-columns:1fr; }
  .history { min-height:220px; }
  .darp-project { margin-top:0; padding:80px 0; }
  .darp-record { padding:28px 22px; font-size:.95rem; }
  .darp-record p { grid-template-columns:96px 1fr; }
  .event-grid { grid-template-columns:1fr; }
  .event-card:last-child { margin-top:0; }
  .contact-band { padding:80px 0; }
  .contact-grid h2 { font-size:3.25rem; }
  .contact-copy { position:static; margin:0; padding:0; border:0; background:transparent; }
}

@media (max-width:360px) {
  .hero { min-height:660px; }
  .hero-copy { top:52px; }
  .hero-motion-control { top:570px; }
  .hero-copy h1 { font-size:34px; }
  .hero-copy .hero-description { margin-top:16px; font-size:17px; line-height:1.38; }
  .hero-actions { margin-top:18px; }
  .project-copy h3 { font-size:2.1rem; }
  .time strong { font-size:1.625rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  [data-home-motion], [data-home-scene].is-in [data-home-motion], .next-artifact::before, .next-artifact::after, .darp-project::before, .darp-project::after, [data-home-scene].is-in .project-tie::before { animation:none !important; opacity:1 !important; transform:none !important; }
  .event-card, .home-button { transition:none; }
}

/* ==========================================================================
   Neighborhood website example (2026-09-25): black box / clear box tabs,
   evidence, focus, result. Previous version: git history; first version at
   tag archive/home-workshop-example-20260924.
   ========================================================================== */
/* Neighborhood example (v8): black box vs clear box, evidence, focus, result.
   Reuses .example-*, .clear-response, .relationship, .next-artifact, .timeline-band, .label. */
.example-list { display: grid; gap: 12px; margin: 16px 0 0; padding-left: 1.15em; }
.example-list li { line-height: 1.5; }
.example-flow { grid-template-columns: minmax(0,1fr); }
.example-flow > .clear-response { grid-column: 1 / -1; }
.clear-response { grid-template-columns: 7fr 5fr; }

/* Row 1: the two approaches, starting from the same symptom. */
.approach-row { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; gap: 20px; }
.black-box, .clear-box-head { padding: 30px 30px 32px; border-radius: 12px; }
.black-box { background: #16191b; box-shadow: 0 30px 60px -40px rgba(20,22,23,.8); }
.black-box > .label { color: #a9b2ba; }
.black-box strong, .clear-box-head strong { display: block; margin: 14px 0 12px; color: var(--home-paper); font-size: 1.5rem; line-height: 1.2; }
.black-box p { color: #8e979f; font-size: 1rem; line-height: 1.5; }
.clear-box-head { background: radial-gradient(120% 90% at 0% 0%, #3777a6 0%, rgba(55,119,166,0) 60%), linear-gradient(160deg, #2f6a99 0%, #2b6390 100%); box-shadow: 0 30px 60px -40px rgba(27,43,58,.7); }
.clear-box-head > .label { color: #fefdfa; }
.clear-box-head strong { color: #fff; }
.clear-box-head p { color: #d7e8f4; font-size: 1rem; line-height: 1.5; }
/* Connector: the clear box path continues down into the evidence. */
.clear-box-head { position: relative; }
.clear-box-head::after { content: ""; position: absolute; left: 50%; bottom: -21px; width: 3px; height: 22px; border-radius: 2px; background: #2f6a99; }
.black-box > .label, .clear-box-head > .label, .result-title { font-size: 1.0625rem; letter-spacing: .1em; }

/* Row 2: the evidence. People in warm tones, data in cool tones. */
.source-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; padding-bottom: 18px; }
.source-row > :nth-child(2), .source-row > :nth-child(4) { transform: translateY(18px); }
.source-card { padding: 26px 24px 28px; border-radius: 12px; color: var(--home-ink); box-shadow: 0 24px 50px -40px rgba(27,43,58,.35); }
.source-card .label { font-size: .9375rem; letter-spacing: .07em; }
.source-card .example-list { font-size: 1rem; }
.source-card strong { font-weight: 700; }
.source-developers { background: var(--home-paper-warm); }
.source-developers .label, .source-developers strong { color: var(--home-brown); }
.source-people { background: #e2ede3; }
.source-people .label, .source-people strong { color: var(--home-green-dark); }
.source-data { background: #e4eef5; }
.source-data .label, .source-data strong { color: var(--home-blue); }
.source-site { background: #e9edf2; }
.source-site .label, .source-site strong { color: #1e3449; }

/* Row 3 left: what came into focus. Near-white, with a Home-to-Community accent. */
.focus-card { position: relative; overflow: hidden; display: block; background: #fefdfa; }
.focus-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #9a6540, var(--home-blue)); }
.focus-card h3 { max-width: 760px; font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 400; }
.focus-community-word { color: var(--home-blue); font-weight: 600; }
.focus-home-word { color: #9a6540; font-weight: 600; }
.focus-span { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.focus-end { display: flex; align-items: center; gap: 12px; flex: none; }
.focus-end svg { flex: none; }
.focus-home svg { fill: #9a6540; }
.focus-community svg { fill: #8fb7d9; }
.focus-community svg .front { fill: var(--home-blue); }
.focus-community { text-align: right; }
.focus-end strong { display: block; font-size: 1.375rem; line-height: 1.1; }
.focus-home strong { color: #9a6540; }
.focus-community strong { color: var(--home-blue); }
.focus-end small { color: var(--home-copy); font-size: .8125rem; }
.focus-line { position: relative; flex: 1; height: 4px; border-radius: 2px; background: #e1d5c3; }
.focus-line .timeline-band { top: 0; width: 100%; }
.clear-response > .focus-card { grid-column: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; }
.focus-card .focus-span { margin-top: auto; padding-top: 28px; }

/* Row 3 right: the result, in the same blue as the clear box approach. */
.result-panel { grid-column: 2; grid-template-columns: 1fr; align-content: start; gap: 24px; background: radial-gradient(120% 90% at 0% 0%, #3777a6 0%, rgba(55,119,166,0) 60%), linear-gradient(160deg, #2f6a99 0%, #2b6390 100%); }
.result-panel::before, .result-panel::after { display: none; }
.result-title { position: relative; z-index: 1; grid-column: 1 / -1; color: #fefdfa; }
.result-panel .artifact-copy .label { color: #d7e8f4; }
.result-panel .artifact-copy p { margin: 14px 0 0; color: #fefdfa; line-height: 1.55; }
.result-panel .artifact-copy strong { color: #fff; font-weight: 700; }
.result-panel .artifact-copy:last-child, .page-home .result-panel .artifact-copy:last-child { padding: 0; border: 0; }

.example-section .example-note { max-width: 760px; margin: 48px auto 0; text-align: center; }

@media (max-width: 980px) {
  .page-home .clear-response, .clear-response { grid-template-columns: 1fr; }
  .approach-row { grid-template-columns: 1fr; }
  .clear-response > .focus-card, .result-panel { grid-column: 1; }
  .clear-box-head::after { display: none; }
}
@media (max-width: 700px) {
  .source-row { grid-template-columns: 1fr; }
  .approach-row { grid-template-columns: 1fr; }
  .focus-span { flex-direction: column; align-items: stretch; gap: 14px; }
  .focus-line { flex: none; }
  .focus-community { justify-content: flex-end; }
}

/* Section icons: small solid glyphs in the label color. */
.label-icon { display: inline-block; width: 1.35em; height: 1.35em; margin-right: .5em; vertical-align: -.3em; fill: currentColor; }
.label-icon.icon-outline { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.black-box .label-icon, .clear-box-head .label-icon, .result-title .label-icon { width: 1.5em; height: 1.5em; }

/* Four across only where the labels fit; 2x2 below, no stagger. */
@media (max-width: 1600px) {
  .source-row { grid-template-columns: 1fr 1fr; padding-bottom: 0; }
  .source-row > :nth-child(2), .source-row > :nth-child(4) { transform: none; }
}

/* Focus card beside the taller result: larger statement, centered between label and line. */
.clear-response > .focus-card h3 { margin: auto 0; padding: 24px 0; font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.2; }
.focus-card .focus-span { margin-top: 0; padding-top: 0; }
@media (max-width: 980px) {
  .clear-response > .focus-card h3 { margin: 14px 0 0; padding: 0; font-size: clamp(1.5rem, 5vw, 1.875rem); }
  .focus-card .focus-span { margin-top: 28px; }
}

/* Phones: one column everywhere (declared last so it wins over the 1600px 2x2 rule). */
@media (max-width: 700px) {
  .source-row { grid-template-columns: 1fr; }
  .result-panel, .clear-response > .focus-card { min-width: 0; }
}

/* v10: icons above card titles; focus full width; result as two half-width blue boxes. */
.card-icon { display: block; width: 34px; height: 34px; margin-bottom: 14px; fill: currentColor; }
.source-developers .card-icon { color: var(--home-brown); }
.source-people .card-icon { color: var(--home-green-dark); }
.source-data .card-icon { color: var(--home-blue); }
.source-site .card-icon { color: #1e3449; }
.clear-response > .focus-card { grid-column: 1 / -1; display: block; }
.clear-response > .focus-card h3 { margin: 14px 0 0; padding: 0; font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.focus-card .focus-span { margin-top: 28px; }
.result-box { position: relative; padding: 30px 30px 32px; border-radius: 14px 22px 12px 24px; color: #fefdfa; background: radial-gradient(120% 90% at 0% 0%, #3777a6 0%, rgba(55,119,166,0) 60%), linear-gradient(160deg, #2f6a99 0%, #2b6390 100%); box-shadow: 0 40px 80px -50px rgba(27,43,58,.7); }
.result-box .card-icon { color: #d7e8f4; }
.result-box .label { color: #d7e8f4; }
.result-box p { margin: 14px 0 0; color: #fefdfa; font-size: 1.125rem; line-height: 1.55; }
.result-box strong { color: #fff; font-weight: 700; }
@media (max-width: 980px) {
  .result-box { grid-column: 1; }
}

/* Result boxes split the width evenly. */
.clear-response { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .page-home .clear-response, .clear-response { grid-template-columns: 1fr; } }

/* v11 ------------------------------------------------------------------ */
.approach-row { grid-template-columns: 1fr 1fr; }
.clear-box-head::after { display: none; }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 16px 0 0; padding: 0; list-style: none; }
.steps li { padding: 6px 14px; border: 1px solid rgba(254,253,250,.55); border-radius: 999px; color: #fefdfa; font-weight: 600; font-size: .9375rem; }
.steps li + li { margin-left: 30px; position: relative; }
.steps li + li::before { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: #d7e8f4; font-weight: 400; }
/* Evidence: alternate warm and cool; darker slate for the site card. */
.source-site { background: #dde4ec; }
/* Focus: sentence spans the card, tighter padding. */
.clear-response > .focus-card { padding-top: 26px; padding-bottom: 26px; }
.clear-response > .focus-card h3 { max-width: none; }
.focus-card .focus-span { margin-top: 20px; }
/* The result: one blue panel holding two see-through cards. */
.result-panel-v11 { grid-column: 1 / -1; padding: 30px; border-radius: 14px 22px 12px 24px; background: radial-gradient(120% 90% at 0% 0%, #3777a6 0%, rgba(55,119,166,0) 60%), linear-gradient(160deg, #2f6a99 0%, #2b6390 100%); box-shadow: 0 40px 80px -50px rgba(27,43,58,.7); }
.result-heading { display: block; margin-bottom: 18px; color: #fefdfa; font-size: 1.0625rem; letter-spacing: .1em; }
.result-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.result-card { padding: 26px 26px 28px; border-radius: 12px; background: rgba(254,253,250,.1); border: 1px solid rgba(254,253,250,.22); color: #fefdfa; }
.result-card .card-icon, .result-card .label { color: #d7e8f4; }
.result-card p { margin: 14px 0 0; color: #fefdfa; font-size: 1.0625rem; line-height: 1.55; }
.result-card strong { color: #fff; font-weight: 700; }
@media (max-width: 980px) { .approach-row { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .result-pair { grid-template-columns: 1fr; } .result-panel-v11 { padding: 22px; } }

/* v12 ------------------------------------------------------------------ */
/* Icons in the top-right corner of each card. */
.source-card, .result-card { position: relative; }
.source-card .card-icon, .result-card .card-icon { position: absolute; top: 22px; right: 22px; width: 30px; height: 30px; margin: 0; opacity: .9; }
.source-card .label, .result-card .label { display: block; padding-right: 44px; }
/* Approach marks: X on the black box, check on the clear box. */
.black-box, .clear-box-head { position: relative; }
.approach-mark { position: absolute; top: 22px; right: 22px; width: 34px; height: 34px; }
.approach-mark svg { width: 100%; height: 100%; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mark-no svg { stroke: #8e979f; }
.mark-yes svg { stroke: #fefdfa; }
.mark-yes svg circle { fill: rgba(254,253,250,.14); }
.black-box > .label, .clear-box-head > .label { padding-right: 48px; }
/* Focus: centered label and statement. */
.clear-response > .focus-card > .label, .clear-response > .focus-card h3 { text-align: center; }
.clear-response > .focus-card h3 { margin-left: auto; margin-right: auto; }
/* Result panel without a heading. */
.result-panel-v11 { padding: 22px; }
/* Phones: Home and Community stay on one row with a short line between. */
@media (max-width: 700px) {
  .focus-span { flex-direction: row; align-items: center; gap: 10px; }
  .focus-line { flex: 1; min-width: 24px; }
  .focus-end small { display: none; }
  .focus-end { gap: 8px; }
  .focus-end strong { font-size: 1.125rem; }
  .focus-end svg { width: 28px; height: 28px; }
  .focus-community { justify-content: flex-end; }
  .result-panel-v11 { padding: 14px; }
}

.clear-response > .focus-card > .label { display: block; width: 100%; }

/* Browser-tab frame (variant 7). */
.clear-response[class*="variant-"] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.clear-response[class*="variant-"] > * { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .clear-response[class*="variant-"], .variant-2 { grid-template-columns: 1fr !important; }
}
.variant-7 .tab-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; padding: 0 14px; }
.variant-7 .btab { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.variant-7 .btab-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.variant-7 .btab-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.variant-7 .btab-title { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.variant-7 .btab-note { font-size: .8125rem; line-height: 1.35; }
.variant-7 .btab .approach-mark { position: static; flex: none; width: 24px; height: 24px; }
.variant-7 .btab-off { margin-bottom: 7px; padding: 10px 14px 11px 18px; border-radius: 11px; background: #1c2023; box-shadow: inset 0 -8px 12px -10px rgba(0,0,0,.7); }
.variant-7 .btab-off .btab-label { color: #a9b2ba; }
.variant-7 .btab-off .btab-title { color: #e9e3d8; }
.variant-7 .btab-off .btab-note { color: #8e979f; }
.variant-7 .btab-on { padding: 12px 16px 14px 20px; border-radius: 12px 12px 0 0; background: #2f6a99; }
.variant-7 .btab-on .btab-label { color: #d7e8f4; }
.variant-7 .btab-on .btab-title { color: #fff; font-size: 1.125rem; }
.variant-7 .btab-on::before, .variant-7 .btab-on::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; }
.variant-7 .btab-on::before { left: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, #2f6a99 12px); }
.variant-7 .btab-on::after { right: -12px; background: radial-gradient(circle at 100% 0, transparent 11.5px, #2f6a99 12px); }
.variant-7 .browser-body { overflow: hidden; border: 2px solid #2f6a99; border-radius: 14px; background: #edf3f8; }
.variant-7 .browser-toolbar { padding: 10px 22px 14px; background: #2f6a99; }
.variant-7 .browser-toolbar .steps { margin: 0; }
.variant-7 .browser-toolbar .steps li { padding: 4px 12px; font-size: .875rem; }
.variant-7 .browser-page { display: grid; gap: 20px; padding: 22px; }
.variant-7 .browser-page .source-row { grid-template-columns: 1fr 1fr; }
.variant-7 .browser-page .result-panel-v11 { box-shadow: none; }
.variant-7 .browser-page > .focus-card { display: block; }
.variant-7 .browser-page > .focus-card > .label { display: block; text-align: center; }
.variant-7 .browser-page > .focus-card h3 { margin: 14px auto 0; text-align: center; font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.variant-7 .browser-page > .focus-card .focus-span { margin-top: 20px; }
@media (max-width: 700px) {
  .variant-7 .tab-strip { gap: 6px; padding: 0 8px; }
  .variant-7 .btab { align-items: flex-start; gap: 6px; }
  .variant-7 .btab-off { padding: 8px 10px; }
  .variant-7 .btab-on { padding: 10px 10px 12px; }
  .variant-7 .btab-title, .variant-7 .btab-on .btab-title { font-size: .875rem; }
  .variant-7 .btab-note { display: none; }
  .variant-7 .btab-label { font-size: .625rem; }
  .variant-7 .btab .approach-mark { width: 18px; height: 18px; }
  .variant-7 .browser-toolbar { padding: 10px 12px 12px; }
  .variant-7 .browser-page { padding: 12px; }
  .variant-7 .browser-page .source-row { grid-template-columns: 1fr; }
  .variant-7 .browser-page .result-panel-v11 { padding: 10px; }
  .variant-7 .focus-span { gap: 8px; }
  .variant-7 .focus-end { gap: 6px; }
  .variant-7 .focus-end strong { font-size: 1rem; }
  .variant-7 .focus-end svg { width: 24px; height: 24px; }
}
@media (min-width: 701px) {
  .variant-7 .btab-text { display: flex; align-items: baseline; gap: 14px; flex-wrap: nowrap; overflow: hidden; }
  .variant-7 .btab-label { flex: none; }
  .variant-7 .btab-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .variant-7 .btab-off { margin-bottom: 6px; padding: 7px 12px 7px 16px; border-radius: 10px; }
  .variant-7 .btab-off .btab-title { font-size: .9375rem; }
  .variant-7 .btab-off .approach-mark { width: 20px; height: 20px; }
  .variant-7 .btab-on { padding: 11px 14px 11px 18px; }
  .variant-7 .btab-on .approach-mark { width: 22px; height: 22px; }
}
@media (min-width: 701px) {
  .variant-7 .tab-strip { grid-template-columns: 5fr 7fr; }
  .variant-7 .btab-label { letter-spacing: .08em; }
}
@media (min-width: 701px) and (max-width: 1180px) {
  .variant-7 .btab-text { flex-wrap: wrap; gap: 0 12px; }
  .variant-7 .btab-title { white-space: normal; }
}
@media (min-width: 701px) {
  .variant-7 .tab-strip { grid-template-columns: 1fr 1fr; }
  .variant-7 .btab-off .btab-label { font-size: .6875rem; }
}
@media (min-width: 701px) and (max-width: 1500px) {
  .variant-7 .btab-text { flex-wrap: wrap; gap: 0 12px; }
  .variant-7 .btab-title { white-space: normal; }
}
.variant-7 .browser-toolbar { height: 10px; padding: 0; }
.variant-7 .tab-strip { padding: 0 0 0 14px; }
.variant-7 .btab-on::after { display: none; }
.variant-7 .browser-body { border-top-right-radius: 0; }
@media (max-width: 700px) {
  .variant-7 .tab-strip { padding: 0 0 0 8px; }
  .variant-7 .browser-toolbar { height: 8px; }
}
.variant-7 .tab-strip { align-items: stretch; }
.variant-7 .btab-off { margin: 6px 0 6px; align-items: center; }
.variant-7 .browser-page > .focus-card h3 { max-width: none; }
@media (max-width: 700px) {
  .variant-7 .btab { align-items: center; }
  .variant-7 .btab-off { margin: 5px 0 5px; }
}
.page-home .clear-response.variant-7, .clear-response.variant-7 { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.variant-7 .browser-body { background: linear-gradient(#2f6a99 0 12px, #edf3f8 12px); }
@media (min-width: 1101px) {
  .variant-7.four-col .browser-page .source-row { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
  .variant-7.four-col .source-card { padding: 22px 20px 24px; }
  .variant-7.four-col .source-card .label { font-size: .8125rem; padding-right: 36px; }
  .variant-7.four-col .source-card .card-icon { top: 18px; right: 16px; width: 26px; height: 26px; }
  .variant-7.four-col .source-card .example-list { font-size: .9375rem; }
}

/* Privacy note on one line inside the folder, under the result cards. */
.variant-7 .browser-page > .note-inside { margin: 2px 0 0; max-width: none; text-align: center; font-size: .875rem; line-height: 1.5; }
@media (max-width: 700px) {
  .variant-7 .browser-page > .note-inside { font-size: .8125rem; }
}

/* Product names in the project sections take each section accent color. */
.llama-project .project-copy p strong { color: #8fd1a8; }
.frame-project .project-copy p strong { color: var(--home-brown); }

/* DARP card in Atkinson Hyperlegible Next, matching the other card labels. */
.darp-record { font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible Next Fallback", system-ui, sans-serif; }

/* commonllama brand mark: letters in IBM Plex Mono, as on /commonllama/ (2026-09-29) */
.llama-mark i { font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace; font-weight: 600; }

/* Closing panel, tightened (2026-10-05): less padding, smaller heading, copy aligned to the top of the heading */
.contact-band { padding: 72px 0 80px; }
.contact-band .chapter { margin-bottom: 32px; }
.contact-grid { align-items: start; gap: 64px; }
.contact-grid h2 { font-size: clamp(3rem, 5vw, 4.5rem); }
.contact-copy p:first-child { margin-top: 0; }
@media (max-width: 760px) { .contact-band { padding: 48px 0; } .contact-grid h2 { font-size: 3rem; } .contact-grid { gap: 24px; } }

/* Closing panel, same on every page (2026-10-05) */
.contact-actions .home-button.ghost-light { border-color: rgba(247, 243, 235, .7); background: transparent; color: var(--home-paper); }
.contact-grid { grid-template-columns: minmax(0, 1fr) 640px; }
.contact-copy .engagements { margin: 0 0 10px; }
.contact-actions { margin-top: 28px; }
@media (max-width: 1100px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }