/* Redesign A — "Spatial". Dark, 3D-first. */
:root {
  --bg: #05070f;
  --bg-2: #0a0f1f;
  --panel: rgba(17, 24, 46, 0.62);
  --panel-solid: #10172b;
  --line: rgba(140, 170, 255, 0.16);
  --line-strong: rgba(140, 200, 255, 0.34);
  --text: #eef2ff;
  --muted: #c6cee4;
  --dim: #b9c2dc;
  --chip-fg: #cfd6ee;
  --placeholder: #a9b3cf;
  --teal: #3de8d8;
  --magenta: #e071ff;
  --blue: #7d8cff;
  --focus: #ffe066;
  --radius: 18px;
  --wrap: 1180px;
  --display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.6 var(--body); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: #9ff7ee; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 0; transform: translateY(-120%); z-index: 100; background: var(--focus); color: #000; padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { transform: translateY(12px); }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--mono); }
.accent { background: linear-gradient(90deg, var(--teal), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 14px max(16px, env(safe-area-inset-left)) 14px max(16px, env(safe-area-inset-right));
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(5, 7, 15, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  font: 800 .8rem var(--display); letter-spacing: .02em;
  background: linear-gradient(135deg, rgba(61,232,216,.18), rgba(224,113,255,.18));
  border: 1px solid var(--line-strong);
}
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 500; }
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.06); }
.xr-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(61,232,216,.55); background: rgba(61,232,216,.1); color: var(--teal);
  font-weight: 600; font-size: .9rem;
}
.xr-btn[hidden] { display: none; }
.xr-btn svg, .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.xr-btn:hover { background: rgba(61,232,216,.2); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.stage { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 70% 45%, #121a3a 0%, var(--bg) 60%); }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: pan-y; }
.stage.grab canvas { cursor: grab; }
.stage.grabbing canvas { cursor: grabbing; }
.stage.pointing canvas { cursor: pointer; }
.stage-still { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; opacity: 0; transition: opacity .8s; }
.stage.still .stage-still { opacity: 1; }
.stage-label {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translate(-50%, -140%);
  padding: 8px 13px; border-radius: 10px; white-space: nowrap;
  font: 500 .92rem var(--mono); color: var(--text); background: rgba(5,7,15,.82); border: 1px solid var(--line-strong);
  transition: opacity .15s;
}
.stage-label.show { opacity: 1; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,15,.94) 0%, rgba(5,7,15,.82) 34%, rgba(5,7,15,.35) 50%, rgba(5,7,15,0) 64%),
    linear-gradient(0deg, var(--bg) 0%, rgba(5,7,15,0) 22%),
    linear-gradient(180deg, rgba(5,7,15,.75) 0%, rgba(5,7,15,0) 18%);
}
.hero-copy { width: min(var(--wrap), 100% - 32px); margin-inline: auto; padding: 110px 0 90px; pointer-events: none; }
.hero-copy > * { pointer-events: auto; max-width: 620px; }
.hud { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 500 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }
.hero-name { margin: 0; font: 800 clamp(2.5rem, 5.4vw, 4.9rem)/.95 var(--display); letter-spacing: -.03em; max-width: none !important; }
.hero-name .line { display: block; }
.hero-name .line:last-child { background: linear-gradient(92deg, #fff 0%, #b9f6f0 35%, var(--teal) 60%, var(--magenta) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hero-title { margin: 22px 0 0; font: 600 clamp(1.05rem, 2vw, 1.35rem)/1.3 var(--display); letter-spacing: -.01em; }
.hero-summary { margin: 14px 0 0; color: var(--muted); font-size: 1.06rem; max-width: 520px !important; }
.hero-avail { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10,15,31,.6); font-size: .9rem; color: var(--text); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #5cf29a; box-shadow: 0 0 0 0 rgba(92,242,154,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(92,242,154,0); } 100% { box-shadow: 0 0 0 0 rgba(92,242,154,0); } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.xr-note { margin: 16px 0 0; font-size: .85rem; color: var(--dim); }
.xr-note[hidden] { display: none; }
.hero-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; margin: 0; font: 500 .75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); transition: opacity .4s; }
.hero-hint.hide { opacity: 0; }
.stage.still ~ .hero-hint { display: none; }
.hero-hint { display: none; } /* C: the character's greeting explains the ring instead */
.hero-copy { text-shadow: 0 2px 18px rgba(5,7,15,.85); }
.hero-copy .accent, .hero-name .line:last-child { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(5,7,15,.8)); }
.writing { padding-bottom: 0 !important; }
.writing + .contact, #writing + #contact { padding-top: clamp(56px, 8vw, 96px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 20px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: var(--text);
  font-weight: 600; font-size: .95rem; text-decoration: none; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { color: var(--text); background: rgba(255,255,255,.09); transform: translateY(-1px); }
.btn[hidden] { display: none; }
.btn-primary { background: linear-gradient(95deg, var(--teal), #8fb0ff 55%, var(--magenta)); color: #050814; border: 0; box-shadow: 0 8px 30px -10px rgba(61,232,216,.6); }
.btn-primary:hover { color: #050814; background: linear-gradient(95deg, #7af3e8, #a9c1ff 55%, #eaa0ff); box-shadow: 0 10px 34px -8px rgba(61,232,216,.8); }
.btn-xr { border-color: rgba(61,232,216,.6); color: var(--teal); background: rgba(61,232,216,.08); }
.btn-xr:hover { color: #9ff7ee; background: rgba(61,232,216,.16); }
.btn-ghost { background: transparent; }

/* ---------- sections ---------- */
main section { position: relative; padding: clamp(40px, 5vw, 64px) 0; }
.eyebrow { margin: 0 0 12px; font: 500 .78rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.sec-head { margin-bottom: 36px; }
.sec-head h2, .contact h2 { margin: 0; font: 700 clamp(1.7rem, 4vw, 2.9rem)/1.08 var(--display); letter-spacing: -.025em; max-width: 820px; }
.sec-sub { margin: 14px 0 0; color: var(--muted); max-width: 620px; font-size: 1.05rem; }

.now { padding-top: 24px !important; padding-bottom: 0 !important; }
.now-card {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 40px; align-items: start;
  padding: 30px 34px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(61,232,216,.07), rgba(125,140,255,.04) 45%, rgba(224,113,255,.07)), var(--panel);
}
.now-card .eyebrow { grid-row: span 2; margin-top: 6px; }
.now-role { margin: 0; font: 600 clamp(1.2rem, 2.6vw, 1.6rem)/1.25 var(--display); letter-spacing: -.015em; }
.now-dates { margin: 4px 0 0; font: 500 .85rem var(--mono); color: var(--muted); }
.now-desc { margin: 10px 0 0; color: var(--text); }
.platforms { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.platforms li { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); font: 500 .78rem var(--mono); color: var(--muted); }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 14px; }
.search { position: relative; display: flex; align-items: center; flex: 0 1 300px; }
.search svg { position: absolute; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search input {
  width: 100%; min-height: 44px; padding: 10px 14px 10px 42px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(10,15,31,.8); color: var(--text); font: inherit; font-size: .95rem;
}
.search input::placeholder { color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.select { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.select::after { content: ''; position: absolute; right: 16px; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.8px 1.8px 0; transform: translateY(-2px) rotate(45deg); pointer-events: none; }
.select select {
  appearance: none; min-height: 44px; padding: 10px 40px 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(10,15,31,.8); color: var(--text); font: inherit; font-size: .95rem;
}
.select select:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.select option { background: #0a0f1f; color: var(--text); }
.chip {
  min-height: 36px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  font-size: .85rem; color: var(--muted); transition: all .2s;
}
.chip .n { margin-left: 6px; font: 500 .75rem var(--mono); color: var(--dim); }
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip[aria-pressed="true"] { color: #051014; background: var(--teal); border-color: var(--teal); }
.chip[aria-pressed="true"] .n { color: #0d3b37; }
.chip.more { color: var(--teal); border-style: dashed; }
.result-note { margin: 0 0 22px; min-height: 1.4em; font: 500 .8rem var(--mono); color: var(--dim); }

/* project grid */
.grid > li { display: flex; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; perspective: 1200px; }
.card {
  position: relative; height: 100%; display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-solid);
  transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.card:hover, .card:focus-visible { border-color: rgba(61,232,216,.55); box-shadow: 0 24px 60px -24px rgba(61,232,216,.45), 0 0 0 1px rgba(61,232,216,.2); }
.card::after { /* glare that follows the pointer */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.12), transparent 45%);
}
.card:hover::after { opacity: 1; }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1020; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-media img { transform: scale(1.05); }
.card-year { position: absolute; left: 12px; top: 12px; padding: 3px 9px; border-radius: 999px; font: 500 .75rem var(--mono); background: rgba(5,7,15,.78); color: var(--text); border: 1px solid var(--line); }
.card-badge { position: absolute; right: 12px; top: 12px; padding: 3px 9px; border-radius: 999px; font: 600 .75rem var(--body); background: rgba(224,113,255,.92); color: #1b0624; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-title { margin: 0; font: 600 1.05rem/1.3 var(--display); letter-spacing: -.01em; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-client { margin: 0; font-size: .86rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: auto 0 0; padding: 8px 0 0; }
.tags li, .tags .tag { padding: 2px 8px; border-radius: 6px; font: 500 .75rem var(--mono); color: var(--muted); background: rgba(125,140,255,.1); }
.empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 16px; }

/* AI lab */
.lab { background: linear-gradient(180deg, transparent, rgba(125,140,255,.05) 30%, rgba(224,113,255,.05) 70%, transparent); }
.lab-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.lab-item { grid-column: span 4; }
.lab-item:nth-child(1), .lab-item:nth-child(2), .lab-item:nth-child(n+6) { grid-column: span 6; }
.lab-card { height: 100%; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-solid); transition: border-color .3s, transform .3s; }
.lab-card:hover { border-color: rgba(224,113,255,.5); transform: translateY(-3px); }
.lab-media { aspect-ratio: 16 / 10; overflow: hidden; background: #0b1020; }
.lab-media img, .lab-media video { width: 100%; height: 100%; object-fit: cover; }
.lab-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lab-meta { display: flex; align-items: center; gap: 10px; font: 500 .78rem var(--mono); color: var(--dim); }
.status { padding: 2px 9px; border-radius: 999px; font: 600 .75rem var(--mono); text-transform: uppercase; letter-spacing: .06em; border: 1px solid currentColor; }
.status.ongoing { color: var(--teal); }
.status.finished { color: #5cf29a; }
.status.upcoming { color: #ffd36e; }
.status.paused { color: #b2b9d4; }
.lab-card h3 { margin: 0; font: 600 1.12rem/1.3 var(--display); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lab-card p { margin: 0; color: var(--muted); font-size: .93rem; }
.lab-card .tags li, .lab-card .tags .tag { background: rgba(224,113,255,.1); }

/* writing */
.posts { display: grid; gap: 16px; }
.soon {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 28px 30px; border-radius: 16px;
  border: 1px dashed var(--line-strong); background: rgba(10,15,31,.5);
}
.soon p { margin: 0; color: var(--muted); flex: 1 1 320px; }
.soon strong { color: var(--text); }
.post { display: block; padding: 22px 24px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); text-decoration: none; }
.post:hover { border-color: rgba(61,232,216,.5); color: var(--text); }
.post h3 { margin: 4px 0 6px; font: 600 1.1rem var(--display); }
.post p { margin: 0; color: var(--muted); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.mail { display: inline-block; margin-top: 26px; font: 600 clamp(1.1rem, 2.4vw, 1.5rem) var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.socials a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; font-size: .9rem; }
.socials a:hover { border-color: var(--teal); color: var(--teal); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.field { display: grid; gap: 6px; }
.field label { font: 500 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(150,200,255,.45); background: #0b1122;
  color: var(--text); font: inherit; resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--teal); }
.form .btn { justify-self: start; }
.form-status { margin: 0; min-height: 1.4em; font-size: .9rem; color: var(--muted); }
.form-status.ok { color: #5cf29a; }
.form-status.err { color: #ff8f8f; }

.foot { border-top: 1px solid var(--line); padding: 26px 0 90px; color: var(--dim); font-size: .85rem; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.foot p { margin: 0; }




/* ---------- detail dialog ---------- */
.detail {
  width: min(980px, 100% - 24px); max-height: calc(100svh - 24px); padding: 0; border: 1px solid var(--line-strong);
  border-radius: 22px; background: #0a0f1f; color: var(--text); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(61,232,216,.08);
}
.detail::backdrop { background: rgba(3,4,10,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.detail[open] { animation: pop .45s cubic-bezier(.2,.9,.25,1); }
.detail[open]::backdrop { animation: fade .3s ease; }
@keyframes pop { from { opacity: 0; transform: perspective(900px) translateY(24px) rotateX(8deg) scale(.96); } }
@keyframes fade { from { opacity: 0; } }
.detail-inner { position: relative; }
.detail-close {
  position: sticky; top: 12px; float: right; margin: 12px 12px -60px 0; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line-strong); background: rgba(5,7,15,.8);
}
.detail-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
.detail-media { aspect-ratio: 16 / 9; background: #000; }
.detail-media iframe, .detail-media video, .detail-media img { width: 100%; height: 100%; border: 0; object-fit: contain; }
.detail-thumbs { display: flex; gap: 8px; padding: 10px 16px 0; overflow-x: auto; }
.detail-thumbs:empty { display: none; }
.detail-thumbs button { flex: 0 0 auto; width: 96px; aspect-ratio: 16/10; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #000; opacity: .65; }
.detail-thumbs button[aria-current="true"] { border-color: var(--teal); opacity: 1; }
.detail-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.detail-body { padding: 24px clamp(18px, 4vw, 40px) 32px; }
.detail-body h2 { margin: 0; font: 700 clamp(1.5rem, 3.6vw, 2.3rem)/1.1 var(--display); letter-spacing: -.02em; }
.detail-highlight { display: inline-block; margin: 14px 0 0; padding: 5px 12px; border-radius: 999px; background: rgba(224,113,255,.14); color: #f0c4ff; border: 1px solid rgba(224,113,255,.4); font-weight: 600; font-size: .88rem; }
.detail-highlight[hidden] { display: none; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; margin: 22px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.facts div { min-width: 0; }
.facts dt { font: 500 .75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.facts dd { margin: 3px 0 0; font-size: .95rem; }
.detail-desc p, .detail-extra p { margin: 0 0 12px; color: #cfd6ee; }
.detail-extra { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: rgba(125,140,255,.06); border: 1px solid var(--line); }
.detail-extra:empty { display: none; }
.detail-extra h3 { margin: 0 0 10px; font: 600 .8rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.detail-extra video { margin-top: 10px; border-radius: 10px; max-height: 360px; }
.detail-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.detail .tags { margin-top: 18px; }
.detail-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav nav { margin-left: auto; }
  .lab-item, .lab-item:nth-child(1), .lab-item:nth-child(2), .lab-item:nth-child(n+6) { grid-column: span 6; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .br-wide { display: none; }
}
@media (max-width: 640px) {
  .hero { align-items: flex-end; }
  .hero-copy { padding: 300px 0 56px; }
  .hero-shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(5,7,15,.9) 38%, rgba(5,7,15,.35) 62%, rgba(5,7,15,.1) 100%); }
  .stage-still { object-position: 60% 30%; }
  .hero-summary { font-size: .98rem; }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-hint { display: none; }
  .now-card { grid-template-columns: 1fr; padding: 22px; }
  .now-card .eyebrow { grid-row: auto; margin: 0; }
  .platforms { grid-column: 1; }
  .lab-item, .lab-item:nth-child(1), .lab-item:nth-child(2) { grid-column: span 12; }
  .grid { grid-template-columns: 1fr; }
  .form { padding: 20px; }
  .brand-text { display: none; }
  .search { flex: 1 1 100%; }
  .select { flex: 1 1 0; } .select select { width: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; width: calc(100% + 32px); }
  .chip { flex: 0 0 auto; }
  .detail { width: 100%; max-height: 100svh; height: 100svh; border-radius: 0; margin: 0; max-width: none; }
  .detail-inner { padding-top: 64px; }
  .detail-close { position: fixed; top: 10px; right: 12px; margin: 0; float: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .card { transform: none !important; }
}

/* =====================================================================
   Talking character (redesign C): hero group, dock, project dialog.
   Kept at the end of the file so it wins the cascade.
   One rendering per state: hero + dialog show the speech bubble (the
   transcript is screen-reader only); the expanded dock is a chat view
   (live transcript, no separate bubble).
   ===================================================================== */
.guide-home-hero, .guide-dock, .detail-guide {
  --g2d-font: var(--body); --g2d-fg: var(--text); --g2d-muted: var(--muted);
  --g2d-surface: #121a31; --g2d-border: rgba(150, 200, 255, .4); --g2d-accent: var(--teal); --g2d-accent-fg: #04121a;
  --g2d-bubble-bg: #172243; --g2d-bubble-fg: #f3f6ff; --g2d-radius: 16px; --g2d-stage-bg: transparent;
}
.g2d-guide .g2d-bubble { font-size: .95rem; line-height: 1.5; max-height: none; overflow: visible;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.95), 0 0 0 1px rgba(61,232,216,.16); }
.g2d-guide .g2d-chip { color: var(--chip-fg); background: #0d1428; border-color: rgba(150, 200, 255, .38); font-size: .82rem; padding: 6px 12px; }
.g2d-guide .g2d-chip:hover:not([disabled]) { color: var(--teal); border-color: var(--teal); }
.g2d-guide .g2d-chip.is-used, .g2d-guide .g2d-chip[disabled] { color: #9aa6c4; border-style: dashed; cursor: default; }
.g2d-guide .g2d-chip.is-used::before { content: '✓ '; color: var(--teal); }
.g2d-guide .g2d-input { background: #121a31; }
.g2d-guide .g2d-input::placeholder { color: var(--placeholder); opacity: 1; }
.g2d-guide .g2d-btn { font-weight: 600; }
.g2d-guide .g2d-canned { flex-wrap: wrap; }
.guide-home-hero .g2d-guide, .guide-dock .g2d-guide, .detail-guide .g2d-guide { container-type: normal; }
.guide-home-hero .g2d-stage, .guide-home-hero .g2d-chat,
.guide-dock .g2d-stage, .guide-dock .g2d-chat,
.detail-guide .g2d-stage, .detail-guide .g2d-chat { display: contents; }
.guide-home-hero .g2d-transcript, .detail-guide .g2d-transcript, .guide-dock:not(.expanded) .g2d-transcript {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* figure: a cut-out with a soft spotlight and a ground shadow; no card, no glowing outline */
.g2d-guide .g2d-figure-host { position: relative; isolation: isolate; cursor: pointer; }
.g2d-guide .g2d-figure-host::before { /* soft cool spotlight so the black tee separates from the page */
  content: ''; position: absolute; z-index: -1; inset: 4% -8% 6%;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(120,140,255,.22), rgba(61,232,216,.07) 55%, transparent 75%);
}
.g2d-guide .g2d-figure-host::after { /* ground shadow */
  content: ''; position: absolute; z-index: -1; left: 14%; right: 14%; bottom: -3%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.65), rgba(0,0,0,.25) 60%, transparent);
}
.g2d-guide .g2d-figure {
  filter: drop-shadow(0 0 1px rgba(210,230,255,.55)) drop-shadow(0 8px 14px rgba(0,0,0,.55));
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.g2d-guide .g2d-figure-host:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 12px; }

/* chat view (expanded dock): message bubbles, newest at the bottom */
.g2d-guide .g2d-transcript li { font-size: .92rem; line-height: 1.5; padding: 9px 13px; border-radius: 14px; }
.g2d-guide .g2d-transcript .g2d-a { background: var(--g2d-bubble-bg); color: var(--g2d-bubble-fg); border: 1px solid rgba(150,200,255,.22); border-bottom-left-radius: 4px; }
.g2d-guide .g2d-transcript .g2d-q { border-bottom-right-radius: 4px; font-weight: 500; }

/* ---- hero group (desktop): ring top-right, Saul standing below it, speech to his left ---- */
.guide-home-hero {
  position: absolute; z-index: 2; right: max(20px, calc((100vw - var(--wrap)) / 2 - 10px)); bottom: 0;
  width: min(620px, 50vw); pointer-events: none; --g2d-figure-max: 250px;
}
.guide-home-hero .g2d-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; column-gap: 8px; row-gap: 10px; align-items: end;
  grid-template-areas: ". fig" "bubble fig" "chips fig" "form fig"; grid-template-rows: 1fr auto auto auto; }
.guide-home-hero .g2d-bubble { grid-area: bubble; margin: 0; max-width: none; pointer-events: auto; }
.guide-home-hero .g2d-bubble::after { left: auto; right: -8px; top: 22px; bottom: auto; transform: rotate(-45deg); }
.guide-home-hero .g2d-figure-host { grid-area: fig; pointer-events: auto; align-self: end; }
.guide-home-hero .g2d-canned { grid-area: chips; pointer-events: auto; gap: 6px; }
.guide-home-hero .g2d-form { grid-area: form; pointer-events: auto; margin-bottom: 26px; }
.guide-home-hero .g2d-input { padding: 7px 14px; border-radius: 999px; font-size: .9rem; background: rgba(13,20,40,.9); }
.guide-home-hero .g2d-btn { padding: 6px 14px; border-radius: 999px; }

/* ---- dock (desktop): a small figure + pill in a reserved right gutter ---- */
.guide-dock {
  position: fixed; z-index: 45; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom));
  width: 116px; display: flex; flex-direction: column; align-items: center; gap: 6px; --g2d-figure-max: 100px;
  transition: transform .3s ease, opacity .3s ease;
}
.guide-dock[hidden] { display: none; }
.guide-dock-mount { position: relative; width: 100%; display: flex; justify-content: center; }
.guide-dock:not(.expanded) .g2d-layout { display: block; }
.guide-dock:not(.expanded) .g2d-figure-host { width: 100px; margin: 0 auto; }
.guide-dock:not(.expanded) .g2d-form, .guide-dock:not(.expanded) .g2d-canned { display: none; }
.guide-dock:not(.expanded) .g2d-bubble { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); margin: 0; font-size: .9rem; }
.guide-dock:not(.expanded) .g2d-bubble::after { left: auto; right: 40px; }
.guide-dock:not(.expanded) .g2d-guide:not([data-state="talking"]):not([data-state="thinking"]) .g2d-bubble { visibility: hidden; }
.guide-dock-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(61,232,216,.6); background: #0b1224; color: var(--teal); font-weight: 600; font-size: .85rem;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.8); white-space: nowrap;
}
.guide-dock-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (min-width: 901px) {

}
/* expanded: a fixed-height chat panel; messages scroll, the input never leaves the panel */
.guide-dock.expanded {
  width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100svh - 96px)); display: flex; flex-direction: column; gap: 0;
  padding: 0; border-radius: 20px; border: 1px solid var(--line-strong); overflow: hidden;
  background: linear-gradient(160deg, rgba(61,232,216,.06), rgba(224,113,255,.04) 60%), #080c1a;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); --g2d-figure-max: 64px;
}

.guide-dock.expanded .guide-dock-mount { flex: 1; min-height: 0; display: block; width: 100%; }
.guide-dock.expanded .g2d-guide, .guide-dock.expanded .g2d-layout { height: 100%; }
.guide-dock.expanded .g2d-layout { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: "log log" "fig chips" "form form"; gap: 10px; padding: 12px 14px 14px; }
.guide-dock.expanded .g2d-transcript { grid-area: log; max-height: none; height: 100%; overflow-y: auto; padding-right: 4px; }
.guide-dock.expanded .g2d-bubble { display: none; }
.guide-dock.expanded .g2d-figure-host { grid-area: fig; width: 64px; align-self: end; }
.guide-dock.expanded .g2d-canned { grid-area: chips; align-self: end; }
.guide-dock.expanded .g2d-form { grid-area: form; }
.guide-dock.expanded .guide-dock-toggle { position: absolute; top: 10px; right: 12px; min-height: 34px; }

/* ---- project dialog ---- */
.detail-head {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px 14px clamp(18px, 3vw, 28px); background: #0a0f1f; border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) {
  .detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; padding: 12px 12px 12px 16px; }
  .detail-head .detail-close { grid-column: 2; grid-row: 1; }
  .detail-head .detail-highlight { grid-column: 1 / -1; justify-self: start; }
}
.detail-head-text { flex: 1 1 260px; min-width: 0; }
.detail-head .eyebrow { margin: 0 0 4px; }
.detail-head h2 { margin: 0; font: 700 clamp(1.35rem, 3vw, 2rem)/1.1 var(--display); letter-spacing: -.02em; }
.detail-head .detail-highlight { margin: 0; }
.detail .detail-close { position: static; float: none; margin: 0 0 0 auto; flex: 0 0 auto; align-self: flex-start; }
.detail-inner { padding-top: 0 !important; }
.detail-media { aspect-ratio: 16 / 9; }
.detail-thumbs { padding-bottom: 4px; }
.detail-body { padding-top: 8px; }
.detail-side { display: flex; flex-direction: column; }
.detail-guide .g2d-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; grid-template-areas: "bubble" "fig" "chips" "form"; }
.detail-guide .g2d-bubble { grid-area: bubble; margin: 0; max-width: none; }
.detail-guide .g2d-figure-host { grid-area: fig; justify-self: center; }
.detail-guide .g2d-form { grid-area: form; }
.detail-guide .g2d-canned { grid-area: chips; }
@media (min-width: 1000px) {
  .detail { width: min(1240px, 100% - 32px); }
  .detail-inner { display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-areas: "head head" "media side" "thumbs side" "body side"; align-items: start; }
  .detail-head { grid-area: head; }
  .detail-media { grid-area: media; } .detail-thumbs { grid-area: thumbs; } .detail-body { grid-area: body; min-width: 0; }
  .detail-side { grid-area: side; position: sticky; top: 74px; align-self: start; max-height: calc(100svh - 110px); overflow-y: auto;
    padding: 16px 18px 20px; border-left: 1px solid var(--line); }
  .detail-guide { --g2d-figure-max: 230px; }
}
@media (max-width: 999px) {
  .detail-side { padding: 16px; border-block: 1px solid var(--line); background: #0b1122; }
  .detail-guide { --g2d-figure-max: 120px; }
  .detail-guide .g2d-layout { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "fig bubble" "chips chips" "form form"; align-items: center; }
  .detail-guide .g2d-figure-host { align-self: end; }
  .detail-guide .g2d-bubble::after { left: -8px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(135deg); }
}

/* ---- tablets and phones ---- */
@media (max-width: 900px) {
  .hero { flex-direction: column; justify-content: flex-start; align-items: stretch; }
  .hero-hint { display: none; }
  .stage { bottom: auto; height: 340px; }
  .hero-shade { background: linear-gradient(180deg, rgba(5,7,15,.0) 0%, rgba(5,7,15,0) 250px, var(--bg) 340px) !important; }
  .hero-copy { padding: 330px 0 12px !important; }
  .guide-home-hero { position: relative; right: auto; bottom: auto; width: min(560px, calc(100% - 32px)); margin: 6px auto 36px; --g2d-figure-max: 132px; }
  .guide-home-hero .g2d-layout { grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "fig bubble" "chips chips" "form form"; align-items: center; }
  .guide-home-hero .g2d-bubble::after { left: -8px; right: auto; top: 50%; transform: translateY(-50%) rotate(135deg); }
  .guide-home-hero .g2d-form { margin-bottom: 0; }}
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* dock: a small floating figure + pill; hides while you scroll down, returns when you scroll up */
  .guide-dock { width: 92px; --g2d-figure-max: 70px; }
  .guide-dock:not(.expanded) .g2d-figure-host { width: 70px; }
  .guide-dock.tucked:not(.expanded) { transform: translateY(130%); opacity: 0; pointer-events: none; }
  html[data-guide-at="dock"] body { padding-bottom: 130px; }
  .guide-dock.expanded { left: 0; right: 0; bottom: 0; width: auto; height: 60svh; border-radius: 22px 22px 0 0; border-bottom: 0; }
}

/* ---- lower sections ---- */
.field-full, .form .btn, .form-status { grid-column: 1 / -1; }
.form textarea { min-height: 120px; }
.contact-grid { align-items: center; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.lab-list { align-items: stretch; }
.soon-card {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 22px 28px; align-items: center;
  padding: 28px 30px; border-radius: 18px; border: 1px solid var(--line-strong); overflow: hidden;
  background: linear-gradient(120deg, rgba(61,232,216,.08), rgba(125,140,255,.05) 50%, rgba(224,113,255,.08)), #0c1326;
}
.soon-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(61,232,216,.12); border: 1px solid rgba(61,232,216,.4); }
.soon-icon svg { width: 28px; height: 28px; stroke: var(--teal); fill: none; stroke-width: 1.6; }
.soon-card h3 { margin: 0 0 6px; font: 600 1.25rem var(--display); letter-spacing: -.01em; }
.soon-card p { margin: 0; color: var(--muted); }
.soon-topics { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.soon-topics li { font: 500 .78rem var(--mono); color: var(--chip-fg); padding: 4px 10px; border-radius: 999px; border: 1px dashed rgba(150,200,255,.4); }
@media (max-width: 760px) { .soon-card { grid-template-columns: 1fr; } }
.g2d-guide .g2d-fx-flicker { display: none; } /* rubber-hose film vignette reads as a card on this dark page */
.hero-copy .hero-name { width: fit-content; max-width: min(720px, 100%) !important; } /* the headline must not swallow clicks meant for the ring */

/* ================= round 2 ================= */
/* hero: shipped-on line fills the left column under the CTAs */
.hero-shipped { margin: 22px 0 0; font-size: .9rem; color: var(--muted); }
.hero-shipped span { display: inline-block; margin-right: 8px; font: 500 .75rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.hero-cta { margin-top: 34px; }
@media (min-width: 901px) {
  .guide-home-hero { width: min(560px, 46vw); bottom: 34px; --g2d-figure-max: 230px; }
  .guide-home-hero .g2d-layout { grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "bubble fig" "chips fig" "form fig" ". fig"; align-items: start; row-gap: 10px; }
  .guide-home-hero .g2d-bubble { margin-top: 34px; }
  .guide-home-hero .g2d-bubble::after { top: 26px; }
  .guide-home-hero .g2d-form { margin-bottom: 0; }
}
/* per-skin scale so heads read the same size */
.g2d-guide[data-skin="jojo"] .g2d-figure { transform: scale(1.125); transform-origin: 50% 100%; }
.g2d-guide[data-skin="puppet"] .g2d-figure { transform: scale(.943); transform-origin: 50% 100%; }
.g2d-guide[data-skin="rubberhose"] .g2d-figure { transform: scale(.971); transform-origin: 50% 100%; }
.g2d-guide[data-skin="rubberhose"] .g2d-figure { -webkit-mask-image: none; mask-image: none; }

/* chat view: soft fade at the top of the log so nothing reads as a cut fragment */
.guide-dock.expanded .g2d-transcript { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); padding-top: 14px; }
.guide-dock.away:not(.expanded) { opacity: 0; transform: translateY(40%); pointer-events: none; }

/* dialog: facts strip under the header, poster instead of an embed, shorter media */
.detail .facts { margin: 0; padding: 12px clamp(18px, 3vw, 28px); border-top: 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1.2fr .8fr .9fr 1.6fr; gap: 6px 22px; background: #0a0f1f; }
.detail .facts dd { font-size: .9rem; line-height: 1.4; }
.detail .facts dt { color: #c2cbe3; }
.detail-media { aspect-ratio: auto; height: min(46svh, 430px); background: #04060c; }
.detail-media img { object-fit: contain; }
.poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #04060c; cursor: pointer; overflow: hidden; }
.poster img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(1.05); transition: transform .5s, filter .3s; }
.poster:hover img { transform: scale(1.03); filter: brightness(.82); }
.poster-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--teal), var(--magenta)); box-shadow: 0 10px 40px -8px rgba(61,232,216,.7); }
.poster-play svg { width: 32px; height: 32px; fill: #04121a; margin-left: 4px; }
.poster-label { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(5,7,15,.85); font: 500 .8rem var(--mono); color: var(--text); }
.poster:focus-visible { outline-offset: -4px; }
@media (min-width: 1000px) {
  .detail-inner { grid-template-areas: "head head" "facts facts" "media side" "thumbs side" "body side"; }
  .detail .facts { grid-area: facts; }
  .detail-side { top: 150px; max-height: calc(100svh - 190px); }
}
@media (max-width: 999px) {
  .detail .facts { grid-template-columns: 1fr 1fr; }
  .detail .facts .fact-team { grid-column: 1 / -1; }
  .detail-media { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .detail-guide { --g2d-figure-max: 96px; }
  .detail-guide .g2d-layout { grid-template-columns: 96px minmax(0, 1fr); }
  .detail-side { padding: 12px 14px; }
}

/* phone hero: compact ring band; headline and a glimpse of Saul in the first screen */
@media (max-width: 900px) {
  .stage { height: 260px; }
  .hero-shade { background: linear-gradient(180deg, transparent 0, transparent 190px, var(--bg) 260px) !important; }
  .hero-copy { padding: 250px 0 8px !important; }
  .hero-copy .hud { margin-bottom: 12px; }
  .hero-title { margin-top: 12px; }
  .hero-summary { margin-top: 8px; }
  .hero-avail { margin-top: 12px; }
  .hero-cta { margin-top: 18px; }
  .xr-note, .hero-shipped { display: none; }
  .guide-home-hero { margin-top: 18px; }
}

/* sections */
.lab-card p { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lab-body { gap: 10px; }
.writing .sec-head { margin-bottom: 20px; }
.card-client { min-height: 2.8em; font-size: .88rem; }
.card-media img { object-position: 50% 50%; }
.contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; }
.field label { font: 500 .95rem var(--body); letter-spacing: 0; text-transform: none; color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field textarea { min-height: 110px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (min-width: 901px) { .guide-home-hero .g2d-layout { column-gap: 30px; } .guide-home-hero { width: min(580px, 47vw); } }
/* chat log: earlier messages fade out at the top instead of showing a cut line */
.guide-dock.expanded .g2d-transcript { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 14px, #000 64px); mask-image: linear-gradient(to bottom, transparent 0, transparent 14px, #000 64px); }
/* phone dock: a compact row (pill + small figure) tucked in the corner */
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock:not(.expanded) { flex-direction: row-reverse; align-items: flex-end; width: auto; gap: 6px; right: 8px; bottom: 8px; --g2d-figure-max: 58px; }
  .guide-dock:not(.expanded) .guide-dock-mount { width: 58px; }
  .guide-dock:not(.expanded) .g2d-figure-host { width: 58px; }
  .guide-dock:not(.expanded) .guide-dock-toggle { margin-bottom: 6px; }
  html[data-guide-at="dock"] body { padding-bottom: 84px; }
}

/* ================= round 3 ================= */
/* dock header: a real element outside the scrolling log */
.guide-dock-head { display: none; }
.guide-dock.expanded .guide-dock-head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 58px;
  padding: 12px 120px 12px 18px; border-bottom: 1px solid var(--line); }
.guide-dock-title { margin: 0; font: 600 1.05rem var(--display); }
.guide-earlier { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--chip-fg); font-size: .8125rem; }
.guide-earlier[hidden] { display: none; }
.guide-dock.expanded .guide-dock-toggle { top: 12px; right: 12px; }
.guide-dock.expanded .g2d-transcript { padding-top: 6px; -webkit-mask-image: none; mask-image: none; }
.guide-dock.expanded .g2d-transcript .is-folded { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* hero: CTA row only as wide as its buttons, so Saul's group never sits on it */
.hero-cta { width: fit-content; }
.hud-avail { display: none; }

/* smallest text bumped to 13px */
.tags li, .tags .tag, .card-year, .card-badge, .status, .chip .n, .platforms li, .facts dt, .eyebrow,
.soon-topics li, .poster-label, .hero-shipped span { font-size: .8125rem !important; }
.g2d-guide .g2d-chip.is-used, .g2d-guide .g2d-chip[disabled] { color: #b4bfdb; }

/* contact heading */
.contact h2 { text-wrap: balance; }
.nowrap { white-space: nowrap; }
/* poster label sits at the top so a scrolled-away poster leaves no stray text under the sticky header */
.poster-label { top: calc(50% + 50px); bottom: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* phone: Saul's hero group keeps its height when a reply arrives; compact hero so the chips fit */
@media (max-width: 900px) {
  .stage { height: 222px; }
  .hero-shade { background: linear-gradient(180deg, transparent 0, transparent 160px, var(--bg) 222px) !important; }
  .hero-copy { padding-top: 214px !important; }
  .hero-avail { display: none; }
  .hud-avail { display: inline; }
  .hero-summary { font-size: .95rem; line-height: 1.5; }
  .hero-name { font-size: 2.35rem; }
  .guide-home-hero { margin-top: 12px; --g2d-figure-max: 112px; }
  .guide-home-hero .g2d-layout { grid-template-columns: 112px minmax(0, 1fr); row-gap: 8px; }
  .guide-home-hero .g2d-bubble { min-height: 154px; display: flex; align-items: center; font-size: .9rem; }
  .guide-home-hero .g2d-chip { font-size: .8125rem; padding: 5px 10px; }
}
/* phone dock: figure over pill in a reserved right gutter beside the project grid */
@media (max-width: 600px) {
  #grid { padding-right: 84px; }}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock:not(.expanded) { flex-direction: column; align-items: center; width: 80px; right: 6px; bottom: 8px; gap: 4px; --g2d-figure-max: 72px; }
  .guide-dock:not(.expanded) .guide-dock-mount, .guide-dock:not(.expanded) .g2d-figure-host { width: 72px; }
  .guide-dock:not(.expanded) .guide-dock-toggle { margin: 0; padding: 6px 10px; }
  .guide-dock:not(.expanded) .guide-dock-toggle svg { display: none; }
  html[data-guide-at="dock"] body { padding-bottom: 130px; }
}
@media (max-width: 900px) {
  .hud { display: block; font-size: .75rem; letter-spacing: .05em; }
  .hud-dot { display: inline-block; margin-right: 8px; vertical-align: 1px; }
}
.contact h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
.contact h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); text-wrap: wrap; }
.g2d-guide .g2d-figure-host { overflow: visible; } /* per-skin scale grows upward; do not clip hair */
/* grid rows align: tags are a single pinned row; contact columns start at the top */
.card .tags { flex-wrap: nowrap; overflow: hidden; }
.card .tags .tag { flex: 0 0 auto; white-space: nowrap; }
.contact-grid { align-items: start; }
.writing { padding-bottom: 8px !important; }
main section { padding-block: clamp(36px, 4vw, 52px); }
.grid > li, .card, .card-body, .card .tags { min-width: 0; max-width: 100%; }

/* ================= round 4 ================= */
/* featured band */
.featured { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.featured > li { display: flex; min-width: 0; }
.card-big .card-media { aspect-ratio: 16 / 10; }
.card-big .card-title { font-size: 1.2rem; min-height: 0; }
.card-big .card-client { min-height: 0; color: var(--teal); font-size: .85rem; }
.card-pitch { display: block; font-size: .92rem; line-height: 1.5; color: var(--text); margin-top: 2px; }
.card-big { border-color: rgba(61,232,216,.3); background: linear-gradient(180deg, #111a33, #0d1428); }
.sub-h { margin: 0 0 14px; font: 600 1.1rem var(--display); letter-spacing: -.01em; }
/* grid ends on purpose */
.grid-end { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 24px; min-height: 200px;
  border-radius: 16px; border: 1px dashed rgba(150,200,255,.4); background: linear-gradient(135deg, rgba(61,232,216,.06), rgba(224,113,255,.05)); }
.grid-end p { margin: 0; color: var(--muted); }
.grid-end strong { color: var(--text); }
.grid > li.empty { display: none; }
/* never truncate chips, tags or badges */
.card .tags { flex-wrap: nowrap; overflow: visible; }
.card .tags .tag[hidden] { display: none; }
.card-badge { max-width: 62%; white-space: normal; overflow: visible; text-overflow: clip; text-align: right; line-height: 1.25; padding: 3px 9px; }
.card-title { -webkit-line-clamp: 2; overflow-wrap: normal; word-break: normal; }
@media (max-width: 640px) {
  .filters { position: relative; }
  .chips { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 40px; }
  .filters::after { content: '\2192'; position: absolute; right: 0; bottom: 10px; color: var(--teal); font-size: 1.1rem; pointer-events: none; }
}
/* AI Lab cards: buttons that open the detail view */
.lab-card { width: 100%; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.lab-card .lab-media { display: block; }
.lab-body { display: flex; flex-direction: column; }
.lab-title { font: 600 1.12rem/1.3 var(--display); letter-spacing: -.01em; color: var(--text); }
.lab-sum { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.lab-card .tags { margin-top: auto; flex-wrap: nowrap; }
.lab-card .tags .tag { white-space: nowrap; background: rgba(224,113,255,.1); }
.lab-card .tags .tag[hidden] { display: none; }
.lab-more { font: 600 .85rem var(--body); color: var(--teal); }
.lab-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lab-detail { width: min(760px, 100% - 24px); }
.lab-detail .detail-inner { display: block; } /* one column: the project dialog's media/side grid left half of it empty */
.ld-body { padding: 20px clamp(18px, 4vw, 32px) 32px; }
.ld-img { width: 100%; border-radius: 12px; margin-bottom: 16px; }
.ld-embed { display: block; aspect-ratio: 16 / 9; height: auto; border: 0; background: #04060c; }
.ld-sum { margin: 0 0 16px; font-size: 1rem; line-height: 1.65; }
.ld-credit { margin: -8px 0 16px; color: var(--muted); font-size: .85rem; }
.ld-team { margin: 0 0 16px; color: var(--muted); }
.ld-team span { margin-right: 6px; color: var(--text); font-weight: 600; }
.ld-link { margin-top: 18px; }
/* field notes strip under the AI Lab */
.field-notes { display: grid; grid-template-columns: auto 1fr auto; gap: 16px 22px; align-items: center; margin-top: 28px; padding: 18px 22px;
  border-radius: 16px; border: 1px solid var(--line-strong); background: linear-gradient(120deg, rgba(61,232,216,.07), rgba(224,113,255,.06)), #0c1326; }
.field-notes h3 { margin: 0 0 4px; font: 600 1.05rem var(--display); }
.field-notes p { margin: 0; color: var(--muted); }
.notes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
@media (max-width: 640px) { .field-notes { grid-template-columns: 1fr; } .field-notes .soon-icon { display: none; } }
/* contact + footer */
.contact-facts { display: grid; gap: 10px; margin: 22px 0 0; }
.contact-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.contact-facts dt { font: 500 .8125rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
.contact-facts dd { margin: 0; }
.contact-grid { align-items: stretch; }
.contact-intro { display: flex; flex-direction: column; }
.foot { padding: 40px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px 40px; }
.foot-grid p { margin: 0 0 6px; }
.foot-name { font: 600 1rem var(--display); color: var(--text); }
.foot-h { font: 500 .8125rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-grid a { color: var(--text); text-decoration: none; }
.foot-grid a:hover { color: var(--teal); }
.foot-copy { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
/* dialog bottom padding */
.detail-body { padding-bottom: 36px; }
.detail-side { padding-bottom: 32px; }
/* skins: the per-skin scale may grow upward, but fx glyphs stay inside the figure column */
.g2d-guide .g2d-figure-host { overflow: clip visible; }
.hud-coords { display: inline; }
@media (max-width: 900px) { .hud-coords { display: none; } }
/* ---- hero lockup: Saul stands inside the ring; speech + ask card beside him ---- */
@media (min-width: 901px) {
  .hero-name { font-size: clamp(2.5rem, 4.6vw, 4.2rem); }
  .hero-copy > * { max-width: 520px; }
  .guide-home-hero { right: max(150px, calc((100vw - var(--wrap)) / 2 + 90px)); bottom: 30px; width: 560px; }
  .guide-home-hero .g2d-layout { grid-template-columns: minmax(0, 1fr) 230px; column-gap: 26px; }
  .guide-home-hero .g2d-canned, .guide-home-hero .g2d-form { background: rgba(10,15,31,.88); }
  .guide-home-hero .g2d-canned { padding: 10px 10px 4px; border-radius: 14px 14px 0 0; border: 1px solid var(--line); border-bottom: 0; margin-bottom: -10px; }
  .guide-home-hero .g2d-form { padding: 8px 10px 10px; border-radius: 0 0 14px 14px; border: 1px solid var(--line); border-top: 0; }
}
/* phone: ring + Saul as one stage block at the top, then his speech, then the headline */
@media (max-width: 900px) {
  .stage { height: 300px; }
  .hero-shade { background: linear-gradient(180deg, transparent 0, transparent 230px, var(--bg) 300px) !important; }
  .hero-copy { padding-top: 22px !important; order: 2; }
  .guide-home-hero { order: 1; margin: 76px auto 0; --g2d-figure-max: 128px; }
  .guide-home-hero .g2d-layout { grid-template-columns: 1fr; grid-template-areas: "fig" "bubble" "chips" "form"; justify-items: stretch; }
  .guide-home-hero .g2d-figure-host { justify-self: center; width: 128px; }
  .guide-home-hero .g2d-bubble { min-height: 6.4em; margin-top: 8px; display: flex; align-items: center; }
  .guide-home-hero .g2d-bubble::after { left: 50%; right: auto; top: -8px; bottom: auto; transform: translateX(-50%) rotate(225deg); }
}
.lab-meta { font-size: .8125rem; } .lab-meta time { font-size: .8125rem; }
@media (max-width: 600px) { #featured { padding-right: 84px; } }

/* ================= round 5 ================= */
/* one container system: every section, the hero text and the hero group share these edges.
   On desktop the side gutters are wide enough for the docked figure, so it never sits on content. */
:root { --gutter: 16px; --cw: min(var(--wrap), 100vw - 2 * var(--gutter)); }
@media (min-width: 901px) { :root { --gutter: 136px; } }
.wrap, .hero-copy { width: var(--cw); margin-inline: auto; }
@media (min-width: 901px) {
  .guide-home-hero { right: calc((100vw - var(--cw)) / 2); width: min(560px, 54%); }
  .hero-copy > * { max-width: 450px; }
  .hero-copy > .hero-name { max-width: none; }
  .hero-shipped, .xr-note { color: var(--muted) !important; }
}
.xr-note { color: var(--muted); }

/* sticky header: solid, no smeared glow */
.nav.scrolled { background: #05070f; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line); }

/* dialog details */
.detail .facts dt { color: #d6ddf0 !important; font-size: .8125rem !important; }
@media (min-width: 1000px) { .detail-media { height: min(45vh, 360px); } }
.detail-thumbs.scrolls { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 40px; }
.chips-more { padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--teal); background: transparent; color: var(--teal); font-size: .8125rem; font-weight: 600; }
.chips-more[hidden] { display: none; }

/* AI Lab: one column on phones */
@media (max-width: 640px) { .lab-list .lab-item { grid-column: 1 / -1 !important; } }
.lab-media img { object-position: 50% 30%; }

/* contact: the left column runs the full height of the form */
.contact-grid { align-items: stretch; }
.contact-intro { justify-content: space-between; }

/* skins */
.g2d-guide[data-skin="rubberhose"] .g2d-figure { -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent); mask-image: linear-gradient(to bottom, #000 90%, transparent); }
.g2d-guide[data-skin="jojo"] .g2d-go { opacity: .45; scale: .7; }

/* ---- phone ---- */
@media (max-width: 600px) {
  #grid, #featured { padding-right: 0; }}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  html[data-guide-at="dock"] body { padding-bottom: 96px; }
  /* collapsed dock: a floating action button with Saul's head */
  .guide-dock:not(.expanded) { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 60px; height: 60px; padding: 0; gap: 0;
    border-radius: 50%; overflow: hidden; border: 2px solid rgba(61,232,216,.75); background: radial-gradient(circle at 50% 40%, #233056, #0d1428);
    box-shadow: 0 10px 28px -8px rgba(0,0,0,.85), 0 0 18px -4px rgba(61,232,216,.5); display: block; --g2d-figure-max: 110px; }
  .guide-dock:not(.expanded) .guide-dock-mount { position: absolute; left: -25px; top: -4px; width: 110px; }
  .guide-dock:not(.expanded) .g2d-figure-host { width: 110px; }
  .guide-dock:not(.expanded) .g2d-figure-host::before, .guide-dock:not(.expanded) .g2d-figure-host::after { display: none; }
  .guide-dock:not(.expanded) .g2d-bubble { display: none; }
  .guide-dock:not(.expanded) .guide-dock-toggle { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 0 4px; border: 0; border-radius: 50%;
    background: transparent; box-shadow: none; align-items: flex-end; justify-content: center; }
  .guide-dock:not(.expanded) .guide-dock-toggle .label { font-size: 0; }
  .guide-dock:not(.expanded) .guide-dock-toggle .label::after { content: 'Ask'; font-size: .8125rem; font-weight: 700; color: #04121a; background: var(--teal); padding: 1px 8px; border-radius: 999px; }
  /* expanded: a bottom sheet; Saul sits beside the latest reply, input clear of the safe area */
  .guide-dock.expanded { padding-bottom: env(safe-area-inset-bottom); --g2d-figure-max: 96px; }
  .guide-dock.expanded .g2d-layout { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "fig log" "chips chips" "form form"; }
  .guide-dock.expanded .g2d-figure-host { width: 96px; align-self: end; }
}

/* ---- phone hero: ring band as a backdrop, Saul standing at its lower right, speech below, then the name ---- */
@media (max-width: 900px) {
  .stage { height: 220px; }
  .hero-shade { background: linear-gradient(180deg, transparent 0, transparent 160px, var(--bg) 220px) !important; }
  .guide-home-hero { margin: 104px auto 0; --g2d-figure-max: 96px; }
  .guide-home-hero .g2d-layout { grid-template-columns: 1fr; grid-template-areas: "fig" "bubble" "chips" "form"; }
  .guide-home-hero .g2d-figure-host { justify-self: end; width: 96px; margin-right: 6px; }
  .guide-home-hero .g2d-bubble { min-height: 6.8em; margin-top: 10px; }
  .guide-home-hero .g2d-bubble::after { left: auto; right: 44px; top: -8px; bottom: auto; transform: rotate(225deg); }
  .hero-copy { padding-top: 18px !important; }
}
.guide-dock[hidden] { display: none !important; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock.expanded { height: 74svh; --g2d-figure-max: 80px; }
  .guide-dock.expanded .g2d-layout { grid-template-columns: 80px minmax(0, 1fr); column-gap: 8px; }
  .guide-dock.expanded .g2d-figure-host { width: 80px; }
}

/* ================= round 6: lab split-out, mobile ================= */
/* AI Lab teaser on the home page */
.lab-teaser { padding-block: clamp(36px, 4vw, 52px); }
.teaser-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.teaser-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.teaser { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; height: 100%; padding: 12px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--panel-solid); color: var(--text); text-decoration: none; transition: border-color .25s, transform .25s; }
.teaser:hover { color: var(--text); border-color: rgba(224,113,255,.55); transform: translateY(-2px); }
.teaser img { width: 116px; height: 100%; min-height: 116px; object-fit: cover; border-radius: 10px; background: #0b1020; }
.teaser-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.teaser-title { font: 600 1rem/1.3 var(--display); letter-spacing: -.01em; }
.teaser-sum { font-size: .9rem; line-height: 1.45; color: var(--muted); }
.teaser-go { margin-top: auto; font-weight: 600; font-size: .875rem; color: var(--teal); }
@media (max-width: 900px) {
  .teaser-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .teaser-row > li { flex: 0 0 84%; scroll-snap-align: start; }
  .teaser { grid-template-columns: 1fr; }
  .teaser img { width: 100%; height: 150px; min-height: 0; }
}

/* work grid: no ghost card; a plain "Show all" row below; phones swipe */
.grid-end { display: none; }
.grid-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 22px; color: var(--muted); }
.grid-more[hidden] { display: none; }
.grid-pager { display: inline-flex; align-items: center; gap: 10px; }
.pager-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text);
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0 0 3px; }
.pager-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.pager-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pager-btn:disabled { opacity: .35; cursor: default; }
.pager-btn[hidden] { display: none; }
.grid-empty { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; color: var(--muted); }
@media (max-width: 600px) {
  .grid.swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .grid.swipe > li { flex: 0 0 78%; scroll-snap-align: start; }
  .grid.swipe .card-media { aspect-ratio: 16 / 9; }
  .swipe-end { flex: 0 0 62% !important; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 20px;
    border-radius: 16px; border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(61,232,216,.08), rgba(224,113,255,.06)), #0c1326; color: var(--muted); }
  .swipe-end p { margin: 0; } .swipe-end strong { color: var(--text); }
  .featured { gap: 14px; margin-bottom: 30px; }
  .featured .card-big .card-media { aspect-ratio: 16 / 8; }
}

/* used quick questions read as answered, not disabled */
.g2d-guide .g2d-chip.is-used { color: var(--chip-fg) !important; border-style: solid !important; border-color: rgba(61,232,216,.55) !important; cursor: default; opacity: 1; }

/* inputs never below 16px (iOS zooms the page otherwise) */
input, textarea, select, .g2d-guide .g2d-input, .guide-home-hero .g2d-input, .search input { font-size: 16px !important; }

/* tap targets */
.foot-grid a, .socials a { display: inline-flex; align-items: center; min-height: 28px; }
.socials a { min-width: 44px; justify-content: center; }
.foot-copy a { display: inline-block; padding: 4px 0; }
@media (max-width: 900px) {
  .foot-grid ul { gap: 0; }
  .foot-grid a, .foot-copy a, .socials a, .mail { min-height: 44px; display: inline-flex; align-items: center; }
  .socials a { min-width: 48px; }
}

/* phone hero: name, role and CTAs first; ring + Saul as one stage below; his speech after */
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-shade { display: none; }
  .hero-copy { order: 1; padding: 86px 0 0 !important; }
  .stage { order: 2; position: relative; inset: auto; width: 100%; height: 250px; margin-top: 8px; background: radial-gradient(70% 70% at 50% 55%, #121a3a 0%, transparent 75%); }
  .stage::after { content: ''; position: absolute; inset: auto 0 0; height: 60px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
  .guide-home-hero { order: 3; margin: -132px auto 30px !important; --g2d-figure-max: 112px; }
  .guide-home-hero .g2d-figure-host { justify-self: end; width: 112px; margin-right: 0; }
  .guide-home-hero .g2d-bubble { min-height: 5.6em; margin-top: 12px; }
  .guide-home-hero .g2d-bubble::after { right: 46px; }
}

/* phone chat: a bottom sheet over a scrim, with a drag handle */
.guide-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(3,4,10,.6); }
.guide-scrim[hidden] { display: none; }
@media (min-width: 601px) and (orientation: portrait), (min-width: 601px) and (min-height: 501px), (min-width: 951px) { .guide-scrim { display: none; } }
.sheet-handle { display: none; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock.expanded { height: auto; max-height: 55vh; --g2d-figure-max: 72px; }
  .guide-dock.expanded .sheet-handle { display: block; position: absolute; left: 50%; top: 6px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(200,215,255,.45); touch-action: none; }
  .guide-dock.expanded .g2d-layout { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "fig log" "chips chips" "form form"; }
  .guide-dock.expanded .g2d-figure-host { width: 72px; }
  .guide-dock.expanded .g2d-canned { flex-wrap: wrap; }
  .guide-dock.expanded .guide-dock-mount { min-height: 0; overflow: hidden; }
}
@media (min-width: 901px) { .featured { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .card-pitch { font-size: .875rem; } }
.grid.swipe, .teaser-row { scroll-padding-inline: var(--gutter); }
.foot-grid a { min-width: 44px; }
@media (max-width: 900px) { .nav-brand { min-height: 44px; } }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock.expanded .g2d-layout { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "log log" "fig chips" "form form"; }
}
@media (max-width: 900px) { .guide-home-hero .g2d-bubble { min-height: 8.6em; } }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) { .guide-dock.expanded { height: 55vh; } }
@media (max-width: 900px) { .stage { height: 236px; } .guide-home-hero { margin-top: -126px !important; } }
@media (max-width: 900px) { .hero-copy { padding-top: 74px !important; } .stage { height: 226px; } .guide-home-hero { margin-top: -122px !important; } }
@media (max-width: 900px) { .guide-home-hero .g2d-bubble { min-height: 5em; margin-top: 8px; } }
@media (max-width: 900px) { .guide-home-hero .g2d-bubble { min-height: 6.6em; } }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock.expanded .g2d-layout { grid-template-columns: 72px minmax(0, 1fr) !important; grid-template-areas: "fig log" "chips chips" "form form" !important; }
  .guide-dock.expanded .g2d-figure-host { align-self: end; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* log keeps the full width (long replies fit whole); Saul sits beside the input, chips wrap above it */
  .guide-dock.expanded .g2d-layout { grid-template-areas: "log log" "chips chips" "fig form" !important; }
  .guide-dock.expanded .g2d-form { align-self: center; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* Saul peeks over the top edge of the sheet, so the log keeps all the height for whole messages */
  .guide-dock.expanded, .guide-dock.expanded .guide-dock-mount { overflow: visible !important; }
  .guide-dock.expanded .g2d-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "log" "chips" "form" !important; }
  .guide-dock.expanded .g2d-figure-host { position: absolute !important; top: -66px; right: 18px; width: 72px !important; z-index: 2; }
  .guide-dock.expanded .guide-dock-head { padding-right: 120px; }
  .guide-dock.expanded .guide-dock-toggle { right: 100px; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock.expanded .guide-dock-toggle { right: 12px; }
  .guide-dock.expanded .g2d-figure-host { right: 104px; }
  .guide-dock.expanded .guide-dock-head { padding-right: 186px; gap: 8px; }
  .guide-earlier { font-size: 0; min-height: 32px; }
  .guide-earlier::after { content: 'Earlier'; font-size: .8125rem; }
}

/* ================= round 7 ================= */
:root { --muted: #d0d7ec; --dim: #c3cbe2; }
.eyebrow, .case-meta, .lab-meta, .foot, .foot p, .tags li, .tags .tag, .facts dt, .hud { font-size: max(13px, .8125rem) !important; }
.detail .facts dt { color: #e8edf9 !important; }

/* desktop hero: air between the CTA column and the guide group; he stands fully in frame */
@media (min-width: 901px) {
  .hero-copy > * { max-width: 420px; }
  .guide-home-hero { width: min(520px, 50%); bottom: 44px; --g2d-figure-max: 210px; }
  .guide-home-hero .g2d-layout { grid-template-columns: minmax(0, 1fr) 210px; }
  .guide-home-hero .g2d-figure { -webkit-mask-image: none; mask-image: none; }
}

/* desktop dock: a 120px figure in the right gutter */
@media (min-width: 901px) and (orientation: portrait), (min-width: 901px) and (min-height: 501px), (min-width: 951px) {
  .guide-dock:not(.expanded) { width: 128px; right: 4px; --g2d-figure-max: 120px; }
  .guide-dock:not(.expanded) .g2d-figure-host { width: 120px; }
}

/* desktop dialog: the character column is a defined card, full height */
@media (min-width: 1000px) {
  .detail-side { align-self: stretch; position: static; max-height: none; overflow: visible; grid-row: media / span 3;
    margin: 14px 14px 14px 0; padding: 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: #0c1326; }
  .detail-guide { position: sticky; top: 92px; }
  /* the whole column (bubble, figure, chips, input) fits the window: the figure gives way on shorter laptops */
  .detail-guide { --g2d-figure-max: clamp(110px, calc((100svh - 590px) * .8), 230px); }
}
@media (min-width: 1000px) and (max-height: 740px) {
  .detail-guide { --g2d-figure-max: 104px; }
  .detail-guide .g2d-layout { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "fig bubble" "chips chips" "form form"; align-items: center; }
  .detail-guide .g2d-figure-host { align-self: end; }
  .detail-guide .g2d-bubble::after { left: -8px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(135deg); }
}

/* skins */
.g2d-guide[data-skin="jojo"] .g2d-figure { -webkit-mask-image: none !important; mask-image: none !important; }
.g2d-guide .g2d-go, .g2d-guide .g2d-fx { display: none !important; }
.g2d-guide[data-skin="rubberhose"] .g2d-figure-host { overflow: hidden; }

/* lab grid: no orphan last card */
.exp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.exp-grid .lab-item, .exp-grid .lab-item:nth-child(n) { grid-column: span 2 !important; }
.exp-grid .lab-item:last-child:nth-child(3n+1) { grid-column: 1 / -1 !important; }
.exp-grid .lab-item:nth-last-child(2):nth-child(3n+1), .exp-grid .lab-item:last-child:nth-child(3n+2) { grid-column: span 3 !important; }
.exp-grid .lab-item:last-child:nth-child(3n+1) .lab-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.exp-grid .lab-item:last-child:nth-child(3n+1) .lab-media img { height: 100%; }
@media (max-width: 900px) {
  .exp-grid .lab-item, .exp-grid .lab-item:nth-child(n) { grid-column: span 3 !important; }
  .exp-grid .lab-item:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
  .exp-grid .lab-item, .exp-grid .lab-item:nth-child(n) { grid-column: 1 / -1 !important; }
  .exp-grid .lab-item:last-child:nth-child(3n+1) .lab-card { display: flex; }
}

/* carousels: an edge fade says there is more */
.grid.swipe, .teaser-row { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
@media (max-width: 999px) { .detail-thumbs { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); padding-right: 40px; } }

/* ---------- phones: the guide lives in a floating button ---------- */
@media (max-width: 600px) {
  .guide-home-hero { display: none !important; }
  .stage { height: 270px; margin-bottom: 8px; }
  .detail-side, #chips-more { display: none !important; }
  html body { padding-bottom: 96px; }
  .detail-body { padding-bottom: 104px; }}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {

  .guide-dock:not(.expanded) { width: 64px; height: 64px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); overflow: visible; transition: transform .3s ease, opacity .3s ease; --g2d-figure-max: 118px; }
  .guide-dock:not(.expanded) .guide-dock-mount { overflow: hidden; border-radius: 50%; position: absolute; inset: 0; width: 64px; height: 64px; }
  .guide-dock:not(.expanded) .g2d-figure-host { position: absolute; left: -27px; top: -2px; width: 118px; }
  .guide-dock.peek:not(.expanded) { transform: translateX(64px); }
  .guide-dock:not(.expanded) .guide-dock-toggle .label::after { content: none; }
  .guide-dock:not(.expanded) .guide-dock-toggle .label { position: absolute; right: 72px; bottom: 18px; font-size: .8125rem; font-weight: 700; color: #04121a; background: var(--teal);
    padding: 4px 10px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity .6s; pointer-events: none; }
  .guide-dock.hello:not(.expanded):not(.peek) .guide-dock-toggle .label { opacity: 1; }

  /* the sheet: at most 60vh, sized to its content; the character sits in the header */
  .guide-dock.expanded { height: auto !important; max-height: 60vh; display: flex; flex-direction: column; overflow: hidden !important; --g2d-figure-max: 96px; }
  .guide-dock.expanded .guide-dock-head { min-height: 112px; padding: 18px 110px 12px 124px !important; align-items: center; flex-wrap: wrap; }
  .guide-dock.expanded .guide-dock-mount { position: static !important; overflow: visible !important; flex: 0 1 auto; min-height: 0; }
  .guide-dock.expanded .g2d-guide, .guide-dock.expanded .g2d-layout { height: auto; }
  .guide-dock.expanded .g2d-figure-host { position: absolute !important; top: 12px !important; left: 14px; right: auto !important; width: 96px !important; }
  .guide-dock.expanded .g2d-transcript { max-height: calc(60vh - 310px); min-height: 0; }
  .guide-dock.expanded .guide-dock-toggle { right: 12px !important; top: 18px; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock.expanded .guide-dock-head { flex-wrap: nowrap; padding-right: 108px !important; }
  .guide-dock.expanded .guide-dock-title { font-size: .95rem; white-space: nowrap; }
  .guide-dock.peek:not(.expanded) { box-shadow: -3px 0 0 0 var(--teal), 0 10px 28px -8px rgba(0,0,0,.85); }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) { .guide-dock:not(.expanded) .g2d-guide { width: 64px; height: 64px; } }
@media (min-width: 901px) {
  .guide-home-hero { width: min(580px, 54%); --g2d-figure-max: 190px; }
  .guide-home-hero .g2d-layout { grid-template-columns: minmax(0, 1fr) 190px; column-gap: 18px; }
}
@media (min-width: 901px) { .guide-home-hero { width: min(540px, 50%); } .hero-copy > :not(.hero-name) { max-width: 410px !important; } }

/* ================= round 8 ================= */
/* lab grid: real columns again; an orphan is handled by a "more coming" tile, never by more columns */
.exp-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
.exp-grid .lab-item, .exp-grid .lab-item:nth-child(n), .exp-grid .lab-item:last-child:nth-child(n) { grid-column: auto !important; }
.exp-grid .lab-item .lab-card, .exp-grid .lab-item:last-child:nth-child(n) .lab-card { display: flex !important; flex-direction: column; }
.exp-grid .lab-more-tile { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 24px; border-radius: 16px;
  border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(61,232,216,.08), rgba(224,113,255,.06)), #0c1326; color: var(--muted); }
.exp-grid .lab-more-tile h3 { margin: 0; font: 600 1.1rem var(--display); color: var(--text); }
.exp-grid .lab-more-tile p { margin: 0; }

/* ---------- phone floating button: always fully on screen ---------- */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock.peek:not(.expanded) { transform: none !important; box-shadow: 0 12px 30px -6px rgba(0,0,0,.95), 0 0 0 2px rgba(61,232,216,.75), 0 0 22px -4px rgba(61,232,216,.6) !important; }
  .guide-dock:not(.expanded) { width: 60px; height: 60px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 35%, #2b3a66, #111a33 70%); }
  .guide-dock:not(.expanded) .guide-dock-mount, .guide-dock:not(.expanded) .g2d-guide { width: 60px; height: 60px; }
  /* head-and-shoulders crop */
  .guide-dock:not(.expanded) .g2d-figure-host { width: 96px !important; left: -18px; top: 2px; }
  .guide-dock:not(.expanded) .guide-dock-toggle .label { right: 70px; bottom: 16px; }
  .guide-dock.hello:not(.expanded) { animation: fab-pulse 1.6s ease-out 2; }
  @keyframes fab-pulse { 0% { box-shadow: 0 0 0 0 rgba(61,232,216,.6); } 100% { box-shadow: 0 0 0 16px rgba(61,232,216,0); } }

  /* sheet header: a framed bust beside "Ask Saul" and a context line */
  .guide-dock.expanded .guide-dock-head { min-height: 140px; padding: 22px 104px 14px 132px !important; display: grid !important; grid-template-columns: 1fr; align-content: center; justify-items: start; gap: 4px; }
  .guide-dock.expanded .guide-dock-title { font-size: 1.05rem; }
  .guide-dock.expanded .g2d-figure-host { top: 20px !important; left: 16px; width: 100px !important; height: 112px; overflow: hidden; border-radius: 14px;
    background: radial-gradient(circle at 50% 40%, #24335f, #101830 75%); border: 1px solid var(--line-strong); }
  .guide-dock.expanded .g2d-figure-host .g2d-figure { transform: none !important; }
}
.guide-dock-sub { display: none; margin: 0; font-size: .875rem; color: var(--muted); }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) { .guide-dock.expanded .guide-dock-sub { display: block; } }
@media (prefers-reduced-motion: reduce) { .guide-dock.hello { animation: none !important; } }

/* phone hero: a bigger ring with soft edges */
@media (max-width: 600px) {
  .stage { height: 290px; margin-top: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 50px), transparent); mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 50px), transparent); }
  .stage::after { display: none; }
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock:not(.expanded) .guide-dock-toggle .label { font-size: .8125rem !important; }
  .guide-dock.away:not(.expanded) { opacity: 1; transform: none; pointer-events: auto; }
  .guide-earlier { font-size: .8125rem; }
  .guide-earlier::after { content: none; }
}

/* ================= round 9: type scale, hero scene ================= */
:root { --muted: #d8deef; --dim: #cbd2e6; --chip-fg: #e2e7f5; --placeholder: #b9c2dc; }
body { font-size: 16px; }
/* secondary text: at least 14px */
.xr-note, .hero-shipped, .card-client, .card-pitch, .lab-sum, .teaser-sum, .case-sum, .grid-more, .result-note,
.g2d-guide .g2d-chip, .chip, .socials a, .foot, .foot p, .foot-grid a, .detail .facts dd, .tags li, .tags .tag,
.lab-more, .teaser-go, .soon-topics li, .case-body .case-tools li, .guide-dock-sub, .guide-earlier, .guide-dock-toggle,
.platforms li, .card-year, .card-badge, .status, .case-crumb { font-size: max(14px, .875rem) !important; }
.chip .n { font-size: 13px !important; }
/* mono labels and eyebrows: 13px with tracking */
.eyebrow, .hud, .facts dt, .lab-meta time, .case-meta, .foot-h, .contact-facts dt, .poster-label, .hero-shipped span { font-size: 13px !important; letter-spacing: .1em; }
.tags li, .tags .tag { letter-spacing: .02em; }

/* desktop hero: the guide stands on the floor under the ring; speech + a light row of chips beside his head */
@media (min-width: 901px) {
  .guide-home-hero { bottom: 18px; width: min(560px, 50%); }
  .guide-home-hero .g2d-canned, .guide-home-hero .g2d-form { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }
  .guide-home-hero .g2d-canned { margin-bottom: 2px !important; }
  .guide-home-hero .g2d-chip { background: rgba(12,19,38,.55); border-color: rgba(150,200,255,.3); }
  .guide-home-hero .g2d-input { background: rgba(12,19,38,.6); }
  .guide-home-hero .g2d-bubble { margin-top: 26px; }
  .guide-home-hero .g2d-bubble::after { top: 30px; }
  .guide-home-hero .g2d-figure { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%) !important; mask-image: linear-gradient(to bottom, #000 78%, transparent 100%) !important; }
  .guide-home-hero .g2d-figure-host::after { left: -10%; right: -10%; bottom: -4%; height: 16%;
    background: radial-gradient(closest-side, rgba(61,232,216,.38), rgba(125,140,255,.16) 55%, transparent) !important; }
}

/* phone sheet: compact header, bust card overlapping the sheet's top edge */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock.expanded .guide-dock-head { min-height: 84px; padding: 16px 100px 10px 96px !important; gap: 2px; }
  .guide-dock.expanded .g2d-figure-host { top: -20px !important; left: 14px; width: 68px !important; height: 80px; }
  .guide-dock-sub { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .guide-dock.expanded .guide-dock-head .guide-earlier { display: none; }
  .guide-dock.expanded .guide-dock-toggle { top: 16px; }
  .guide-dock.expanded .g2d-transcript { max-height: calc(60vh - 260px); }
  .guide-dock.expanded .sheet-handle { left: auto; right: 50%; }}
@media (max-width: 600px) {
  /* Saul's button is in the top bar now, so the NOW card follows the ring directly */
  .hero { padding-bottom: 0; }
  .stage { height: 300px; }
}

/* lab cards: uniform images, heads kept in frame; Details as a button-style link */
.exp-grid .lab-media img, .exp-grid .lab-item:last-child:nth-child(n) .lab-media img { aspect-ratio: 16 / 10; height: auto !important; object-fit: cover; object-position: 50% 12%; }
.exp-grid .lab-more { align-self: flex-start; margin-top: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(61,232,216,.55); color: var(--teal); font-weight: 600; }
.exp-grid .lab-card:hover .lab-more { background: rgba(61,232,216,.12); }

/* desktop dialog: the video fills a 16:9 column; a softer character panel */
@media (min-width: 1000px) {
  .detail-media { height: auto !important; aspect-ratio: 16 / 9; }
  .detail-media video, .detail-media .poster img { object-fit: cover !important; }
  .detail-side { background: linear-gradient(180deg, #17224a, #121b38) !important; border-color: rgba(150,200,255,.3) !important; }
}
.hero-summary { font-size: 16px !important; }
@media (min-width: 901px) { .guide-home-hero { bottom: 64px; } } /* a clear floor under him: the glow never meets the window edge */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) { .guide-dock.expanded .g2d-figure-host { top: 8px !important; width: 60px !important; height: 70px; } .guide-dock.expanded .guide-dock-head { padding-left: 88px !important; } }
/* short phones (320x568): keep the whole chat sheet, input included, on screen; scroll inside it */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) { .guide-dock.expanded { max-height: calc(100dvh - 16px) !important; overflow-y: auto !important; } }
/* small desktops (901-1199): the hero copy is ~550-590px wide, so the hero guide gets only the
   space to its right instead of sliding under "Get in touch" and the "Shipped on" line */
@media (min-width: 901px) and (max-width: 1199px) {
  .guide-home-hero { left: auto !important; right: 16px !important; width: calc(100vw - 636px) !important; --g2d-figure-max: 150px; }
  .guide-home-hero .g2d-layout { grid-template-columns: minmax(0, 1fr) min(150px, 36%) !important; column-gap: 12px !important; }
  .guide-home-hero .g2d-chip { font-size: .8125rem; padding: 5px 9px; }
}
@media (min-width: 901px) and (max-width: 1060px) { .guide-home-hero { width: calc(100vw - 596px) !important; } .guide-home-hero .g2d-input { font-size: .8125rem; } }
/* PHONE-LANDSCAPE (keep in sync with `phone` in guide.js): phones held sideways use the floating
   button like portrait phones. The open sheet takes nearly the whole short screen, with a
   one-line header, so the conversation keeps real height above the chips and input. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .guide-dock.expanded { height: calc(100dvh - 8px) !important; max-height: calc(100dvh - 8px) !important; overflow: hidden !important; display: flex !important; flex-direction: column; }
  .guide-dock.expanded .guide-dock-head { min-height: 50px !important; padding: 8px 104px 4px 76px !important; display: flex !important; flex-wrap: nowrap; align-items: baseline; gap: 10px; }
  .guide-dock.expanded .guide-dock-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .guide-dock.expanded .g2d-figure-host { top: 4px !important; left: 14px; width: 50px !important; height: 50px !important; }
  .guide-dock.expanded .guide-dock-toggle { top: 8px !important; }
  .guide-dock.expanded .guide-dock-mount { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; }
  .guide-dock.expanded .g2d-guide { flex: 1 1 auto; height: auto !important; min-height: 0; display: flex; flex-direction: column; }
  .guide-dock.expanded .g2d-layout { flex: 1 1 auto; height: auto !important; min-height: 0; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto auto !important; grid-template-areas: "log" "chips" "form" !important; row-gap: 6px; }
  .guide-dock.expanded .g2d-transcript { max-height: none !important; min-height: 0; height: 100% !important; overflow-y: auto; }
  .guide-dock.expanded .g2d-canned { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .guide-dock.expanded .g2d-chip { flex: 0 0 auto; }
}
/* desktop dock: the greeting bubble shows only where it covers no page text (guide.js checkBubble) */
.guide-dock:not(.expanded):not(.clear) .g2d-bubble { visibility: hidden !important; }
/* award badge: wrap within the space right of the year chip, never over it */
.card-badge { max-width: calc(100% - 84px) !important; white-space: nowrap !important; } /* labels are kept short by badgeLabel(); never truncated */
/* chat themes (js/character/chat-themes.css): the open dock panel takes a dark tint of the skin's
   theme, so the header and frame belong to the same world as the messages inside them. The frame
   (border, corners) changes only on the desktop panel; the phone sheet keeps its own shape. */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="voxel"]) { background: repeating-conic-gradient(rgba(255,255,255,.025) 0 25%, transparent 0 50%) 0 0 / 8px 8px, #232323; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="gameboy"]) { background: #081820; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="nes"]) { background: #000; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="ps1"]) { background: linear-gradient(165deg, #1C2C78, #070B2E 70%), #0F1A52; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="jojo"]) { background: linear-gradient(160deg, #2A0F45, #0E0618 70%), #1C0A30; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="rubberhose"]) { background: #221811; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="puppet"]) { background: #2B1D14; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="clay"]) { background: radial-gradient(ellipse at 30% 0%, rgba(242, 182, 50, .10), transparent 60%), #2E2018; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="zombie"]) { background: radial-gradient(ellipse at 50% 115%, rgba(150, 185, 120, .16), transparent 60%), linear-gradient(180deg, #141A14, #0A0D0A); }
@media (min-width: 601px) and (min-height: 501px), (min-width: 951px) {
  .guide-dock.expanded:has(.g2d-guide[data-chat-theme="voxel"]) { border: 3px solid #111; border-radius: 4px; box-shadow: inset 3px 3px 0 #3A3A3A, inset -3px -3px 0 #0A0A0A, 0 30px 80px -20px rgba(0,0,0,.9); }
  .guide-dock.expanded:has(.g2d-guide[data-chat-theme="gameboy"]) { border: 4px solid #346856; border-radius: 4px; }
  .guide-dock.expanded:has(.g2d-guide[data-chat-theme="nes"]) { border: 4px solid #FFFFFF; border-radius: 12px; }
  .guide-dock.expanded:has(.g2d-guide[data-chat-theme="ps1"]) { border: 2px solid #D4D6E6; border-radius: 8px; }
  .guide-dock.expanded:has(.g2d-guide[data-chat-theme="jojo"]) { border: 3px solid #7B2CBF; }
  .guide-dock.expanded:has(.g2d-guide[data-chat-theme="rubberhose"]) { border: 3px solid #F4E9CF; border-radius: 22px 30px 20px 34px / 30px 20px 34px 22px; }
  .guide-dock.expanded:has(.g2d-guide[data-chat-theme="puppet"]) { border: 3px dashed #C0814A; }
  .guide-dock.expanded:has(.g2d-guide[data-chat-theme="clay"]) { border: 4px solid #D9B98C; border-radius: 28px 34px 26px 32px / 32px 26px 34px 28px; }
  .guide-dock.expanded:has(.g2d-guide[data-chat-theme="zombie"]) { border: 2px solid #5B6B4A; border-radius: 6px 18px 8px 14px; }
}
/* chat log: the visible messages sit just above the chips, newest at the bottom, rather than under the
   header with a hole below them. fold() leaves only whole messages, so there is often room to spare;
   this puts it above the first visible line. An unfolded log that overflows resolves it to 0 and scrolls. */
.guide-dock.expanded .g2d-transcript > li:first-child,
.guide-dock.expanded .g2d-transcript > .is-folded + li:not(.is-folded) { margin-top: auto; }

/* the panel's header (title, "Earlier", Close) in each theme's own type and buttons */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme]:not([data-chat-theme="classic"])) .guide-dock-toggle svg { stroke-width: 2.2; }
/* voxel: white pixel title with a drop shadow, stone buttons */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="voxel"]) .guide-dock-head { border-bottom: 3px solid #000; box-shadow: 0 2px 0 #3E3E3E; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="voxel"]) .guide-dock-title { font-family: 'Pixelify Sans', ui-monospace, monospace; font-weight: 600; font-size: 1.2rem; color: #FFFFFF; text-shadow: 2px 2px 0 #3F3F3F; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="voxel"]) .guide-dock-sub { color: #D0D0D0; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="voxel"]) :is(.guide-earlier, .guide-dock-toggle) {
  font-family: 'Pixelify Sans', ui-monospace, monospace; font-weight: 500; color: #FFFFFF; text-shadow: 2px 2px 0 #262626;
  background: #525252; border: 0; border-radius: 0; box-shadow: inset 2px 2px 0 #8E8E8E, inset -2px -2px 0 #2E2E2E, 0 0 0 2px #000;
}
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="voxel"]) :is(.guide-earlier, .guide-dock-toggle):hover { background: #3A4688; color: #FFFFA0; }
/* gameboy: the four greens; Close matches the A-button Ask */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="gameboy"]) .guide-dock-head { border-bottom: 3px solid #346856; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="gameboy"]) .guide-dock-title { font-family: 'Pixelify Sans', ui-monospace, monospace; font-weight: 600; font-size: 1.2rem; color: #E0F8D0; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="gameboy"]) .guide-dock-sub { color: #88C070; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="gameboy"]) .guide-earlier {
  font-family: 'Pixelify Sans', ui-monospace, monospace; font-weight: 500; color: #081820; background: #88C070; border: 2px solid #E0F8D0; border-radius: 0;
}
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="gameboy"]) .guide-dock-toggle {
  font-family: 'Pixelify Sans', ui-monospace, monospace; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #E0F8D0; background: #346856; border: 2px solid #88C070; border-radius: 0; box-shadow: inset 2px 2px 0 #88C070;
}
/* nes: the dialogue font for the title, white-framed black menu boxes */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="nes"]) .guide-dock-head { border-bottom: 3px solid #FFFFFF; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="nes"]) .guide-dock-title { font-family: 'Press Start 2P', ui-monospace, monospace; font-weight: 400; font-size: 13px; text-transform: uppercase; color: #FFFFFF; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="nes"]) .guide-dock-sub { color: #BCBCBC; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="nes"]) :is(.guide-earlier, .guide-dock-toggle) {
  font-family: 'Pixelify Sans', ui-monospace, monospace; font-weight: 500; color: #FFFFFF; background: #000; border: 3px solid #FFFFFF; border-radius: 6px; box-shadow: none;
}
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="nes"]) .guide-dock-toggle:hover { background: #B81C00; }
/* ps1: bevelled system type, a silver Close like the Ask button, a blue Earlier like the chips */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="ps1"]) .guide-dock-head { border-bottom: 2px solid #D4D6E6; box-shadow: 0 1px 0 #4C5078; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="ps1"]) .guide-dock-title { font-family: Verdana, Tahoma, 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: .03em; color: #F4F5FA; text-shadow: 1px 1px 0 #000; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="ps1"]) .guide-dock-sub { color: #C9CEEA; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="ps1"]) .guide-earlier {
  font-family: Verdana, Tahoma, 'Segoe UI', sans-serif; color: #FFFFFF; text-shadow: 1px 1px 0 #000;
  background-color: #16287F; background-image: linear-gradient(170deg, #3550C4, #101A5E 70%); border: 2px solid #C4C7DC; border-radius: 4px;
}
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="ps1"]) .guide-dock-toggle {
  font-family: Verdana, Tahoma, 'Segoe UI', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #10142E; text-shadow: 0 1px 0 #FFFFFF;
  background-color: #C9CAD6; background-image: linear-gradient(#F6F6FA, #A6A8BA); border: 2px solid #4E5170; border-radius: 4px;
}
/* jojo: a Bangers title in yellow with a purple drop, ink-and-purple buttons */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="jojo"]) .guide-dock-head { border-bottom: 3px solid #7B2CBF; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="jojo"]) .guide-dock-title { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 1.55rem; letter-spacing: .06em; color: #FFD23F; text-shadow: 3px 3px 0 #7B2CBF; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="jojo"]) .guide-dock-sub { color: #E7DAF5; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="jojo"]) :is(.guide-earlier, .guide-dock-toggle) { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; letter-spacing: .07em; border-radius: 4px; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="jojo"]) .guide-earlier { color: #111111; background: #FFFFFF; border: 2px solid #111111; box-shadow: 3px 3px 0 #7B2CBF; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="jojo"]) .guide-dock-toggle { color: #FFFFFF; background: #7B2CBF; border: 2px solid #111111; box-shadow: 3px 3px 0 #FFCF33; }
/* rubberhose: italic serif on dark ink, cream and brick-red buttons with wobbly corners */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="rubberhose"]) .guide-dock-head { border-bottom: 2px solid #8C7556; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="rubberhose"]) .guide-dock-title { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.25rem; color: #F4E9CF; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="rubberhose"]) .guide-dock-sub { color: #E2D3B0; font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="rubberhose"]) :is(.guide-earlier, .guide-dock-toggle) { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; font-weight: 700; border-radius: 14px 20px 12px 22px / 20px 12px 22px 14px; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="rubberhose"]) .guide-earlier { font-style: italic; color: #1B1410; background: #F4E9CF; border: 2px solid #1B1410; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="rubberhose"]) .guide-dock-toggle { font-variant: small-caps; letter-spacing: .05em; color: #F8EEDA; background: #8E2B1F; border: 2px solid #F4E9CF; }
/* puppet: rounded felt type, felt buttons with a stitched seam */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="puppet"]) .guide-dock-head { border-bottom: 2px dashed #C0814A; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="puppet"]) .guide-dock-title { font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; color: #FFF1DC; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="puppet"]) .guide-dock-sub { color: #F0D9B5; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="puppet"]) :is(.guide-earlier, .guide-dock-toggle) {
  font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif; font-weight: 700; color: #FFFFFF;
  border: 0; border-radius: 14px; outline: 1.5px dashed rgba(255, 255, 255, .75); outline-offset: -5px; box-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="puppet"]) .guide-earlier { background: #1F5F5B; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="puppet"]) .guide-dock-toggle { background: #B0362B; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="puppet"]) :is(.guide-earlier, .guide-dock-toggle):focus-visible { outline: 3px solid #FFC861; outline-offset: 2px; }
/* clay: chunky rounded type, squashed plasticine buttons */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="clay"]) .guide-dock-head { border-bottom: 3px solid #5A3E2A; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="clay"]) .guide-dock-title { font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; color: #F7E6C4; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="clay"]) .guide-dock-sub { color: #E8C99A; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="clay"]) :is(.guide-earlier, .guide-dock-toggle) {
  font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif; font-weight: 800; color: #FFFFFF;
  border: 0; border-radius: 16px 20px 15px 19px / 19px 15px 20px 16px;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .22), inset 2px 2px 0 rgba(255, 255, 255, .25), 0 3px 0 rgba(0, 0, 0, .4);
}
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="clay"]) .guide-earlier { background: #1F4F86; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="clay"]) .guide-dock-toggle { background: #8E2A18; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="clay"]) :is(.guide-earlier, .guide-dock-toggle):focus-visible { outline: 3px solid #F2B632; outline-offset: 2px; }
/* zombie: tombstone serif, stone buttons */
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="zombie"]) .guide-dock-head { border-bottom: 2px solid #3A4530; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="zombie"]) .guide-dock-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; color: #DCE8C6; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="zombie"]) .guide-dock-sub { color: #9AAA88; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="zombie"]) :is(.guide-earlier, .guide-dock-toggle) {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; color: #FFFFFF;
  border: 0; border-bottom: 3px solid #262926; border-radius: 15px 15px 3px 3px; box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
}
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="zombie"]) .guide-earlier { background: #3E4A39; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="zombie"]) .guide-dock-toggle { background: #4D4444; }
.guide-dock.expanded:has(.g2d-guide[data-chat-theme="zombie"]) :is(.guide-earlier, .guide-dock-toggle):focus-visible { outline: 3px solid #C8E08E; outline-offset: 2px; }
.now-link { text-decoration: underline 2px; text-decoration-color: color-mix(in srgb, var(--teal) 70%, transparent); text-underline-offset: 6px; }
.now-link:hover, .now-link:focus-visible { text-decoration-color: var(--teal); }

/* Talks & community: a compact two-column list (the home page has a height budget) */
.community { padding-block: clamp(28px, 3vw, 40px); }
.community-h { margin: 0 0 18px; font: 700 clamp(1.3rem, 2.4vw, 1.7rem)/1.15 var(--display); letter-spacing: -.02em; }
.community-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 40px; }
.community-list li { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: baseline; }
.cc-kind { font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.community-list li > :last-child { display: inline-block; padding-block: 3px; min-height: 24px; color: var(--text); }
.community-list a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--teal) 60%, transparent); text-underline-offset: 4px; }
.community-list a:hover, .community-list a:focus-visible { text-decoration-color: var(--teal); }
@media (max-width: 900px) { .community-list { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .community-list li { grid-template-columns: 1fr; gap: 0; margin-bottom: 8px; } }

/* ================= responsive pass (2026-10-13) =================
   Above 900px the side gutters stay 136px for the docked figure, so between 901px and ~1230px the
   content is only 630-960px wide. The desktop layouts below assumed ~1000px+; give that range its own. */

/* the carousel edge fade only where the teaser row actually scrolls */
@media (min-width: 901px) { .teaser-row { -webkit-mask-image: none; mask-image: none; } }

@media (min-width: 901px) and (max-width: 1231px) {
  /* featured: 2 x 2 instead of 4 squeezed columns */
  .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* AI Lab teaser: image on top, so the text gets the card's full width */
  .teaser { grid-template-columns: 1fr; }
  .teaser img { width: 100%; height: 140px; min-height: 0; }
  /* contact: stack the intro above the form */
  .contact-grid { grid-template-columns: 1fr; }
  /* hero: copy and chat panel share the row without overlapping */
  .hero-copy > *:not(.hero-name) { max-width: min(450px, calc(var(--cw) - 400px)); }
  .guide-home-hero { width: min(560px, calc(var(--cw) - min(450px, calc(var(--cw) - 400px)) - 20px)); }
}
@media (max-width: 1231px) { .community-list { grid-template-columns: 1fr; } }

/* landscape phones and small tablets: 2 x 2 featured, never 3 + 1 */
@media (min-width: 601px) and (max-width: 900px) { .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the address never breaks mid-word; it scales down instead */
.mail { overflow-wrap: normal; white-space: nowrap; font-size: clamp(1rem, 1.7vw, 1.5rem); }

/* phones: social buttons are full-size tap targets */
@media (max-width: 600px) { .socials a { min-height: 44px; } }
/* the old 3-column orphan rule (.lab-item:nth-last-child(2):nth-child(3n+1) -> span 3) outranks the round 8 reset */
.exp-grid .lab-item:nth-last-child(2):nth-child(n) { grid-column: auto !important; }
/* headings only as wide as their text, so the docked bubble in the right gutter never sits on them */
.community .eyebrow, .community-h { width: fit-content; max-width: 100%; }

.teaser.no-img { grid-template-columns: 1fr; }

/* 901-1180px: the ring starts about 340px into the hero, so the copy column stops short of it */
@media (min-width: 901px) and (max-width: 1180px) { .hero-copy > :not(.hero-name):not(.hud):not(.hero-title) { max-width: 340px !important; } }

/* phones: Saul's button lives in the top bar, where it covers nothing; the chat still opens as a bottom sheet */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  html[data-guide-at="dock"] body, html body { padding-bottom: 0; }
  .detail-body { padding-bottom: 24px; }
  .guide-dock:not(.expanded) { top: max(10px, env(safe-area-inset-top)); bottom: auto !important; right: max(14px, env(safe-area-inset-right)); width: 44px; height: 44px; z-index: 45;
    transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
  .guide-dock:not(.expanded) .guide-dock-mount { width: 44px; height: 44px; }
  .guide-dock:not(.expanded) .g2d-figure-host { left: -19px; top: -1px; width: 82px; }
  .guide-dock:not(.expanded) .guide-dock-toggle .label { right: 52px; bottom: auto; top: 50%; transform: translateY(-50%); }
  dialog[open] .guide-dock:not(.expanded) { top: 12px; right: 66px; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* the dialog's title wraps before Saul's head button (beside the close button) instead of running under it */
  .detail-head .detail-head-text { padding-right: 54px; }
  dialog[open] .guide-dock:not(.expanded) .guide-dock-toggle .label { display: none; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* the dialog's title wraps before Saul's head button (beside the close button) instead of running under it */
  .detail-head .detail-head-text { padding-right: 54px; }
  dialog[open] .guide-dock:not(.expanded) .guide-dock-toggle .label { display: none; }
}