/* ==========================================================================
   WERNER CLOETE — AI-NATIVE PORTFOLIO
   Ground-up rebuild. One theme (graphite void), one layout system.

   Principles:
   - The stage is a GRID. Reply, proof, twin, suggestions, prompt each own a
     cell. Nothing can paint over anything else — collisions are impossible
     by construction, so nothing needs to hide or fade to survive.
   - Scene changes MORPH. The five persistent elements carry
     view-transition-names, so they travel and reshape between scenes instead
     of cutting.
   - Content is the hero. The room is quiet; the work and the words are loud.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --void: #202429;
  --void-deep: #14181b;
  --ink: #f4f4f1;
  --paper: #f4f4f1;
  --paper-soft: rgba(244, 244, 241, 0.74);
  --muted: rgba(244, 244, 241, 0.5);
  --line: rgba(255, 255, 255, 0.13);
  --signal: #a9d9e5;
  --shadow: 0 32px 100px rgba(0, 0, 0, 0.46);
  --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--paper);
}

/* Route accents tint the signal colour so the room subtly shifts with topic. */
#app[data-route="awards"] { --signal: #f0c769; }
#app[data-route="ai"],
#app[data-route="inhouse"],
#app[data-route="not-another-portfolio"] { --signal: #9fc2ff; }
#app[data-layout="testimonials"] { --signal: #d8c8ff; }

/* ---------- base ---------- */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--void);
  color: var(--paper);
  overflow: hidden;
}

/* The void: a lit column of air over graphite. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 42% at 50% 30%, rgba(188, 199, 207, 0.26), transparent 70%),
    linear-gradient(120deg, #111417 0%, #343a40 48%, #13171a 100%);
}

body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(220, 232, 238, 0.16) 30%, rgba(220, 232, 238, 0.1) 60%, transparent);
  pointer-events: none;
}

button, input, a { font: inherit; }
button, a { touch-action: manipulation; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

input {
  min-width: 0;
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  outline: none;
  background: rgba(238, 241, 242, 0.92);
  color: #171a1d;
  padding: 0 16px;
  font-size: 0.98rem;
  font-weight: 600;
}

input::placeholder { color: rgba(23, 26, 29, 0.48); }

input:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(169, 217, 229, 0.22);
}

button:disabled { cursor: wait; opacity: 0.65; }

/* ---------- shared small pieces ---------- */
.eyebrow, .system-line {
  margin: 0;
  color: var(--signal);
  font-size: 0.72rem;
  line-height: 1.3;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.password-row, .prompt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(18, 21, 24, 0.76);
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.login-form button, .prompt-form button {
  min-height: 50px;
  border-radius: 8px;
  background: #e7e9e9;
  color: #16191c;
  padding: 0 20px;
  font-weight: 800;
  transition: transform 160ms var(--ease-out), opacity 160ms ease;
}

.login-form button:hover, .prompt-form button:hover { transform: translateY(-1px); }

#app[data-layout="encounter"] .prompt-form input {
  border-color: rgba(169, 217, 229, 0.2);
  background: rgba(10, 14, 17, 0.82);
  color: var(--paper);
  box-shadow: none;
}

#app[data-layout="encounter"] .prompt-form input::placeholder { color: rgba(244, 244, 241, 0.42); }

#app[data-layout="encounter"] .prompt-form input:focus {
  border-color: rgba(169, 217, 229, 0.58);
  box-shadow: 0 0 0 3px rgba(169, 217, 229, 0.1);
}

#app[data-layout="encounter"] .prompt-form button {
  width: 52px;
  min-height: 50px;
  padding: 0;
  border: 1px solid rgba(169, 217, 229, 0.26);
  background: rgba(169, 217, 229, 0.11);
  color: var(--paper);
  font-size: 1.25rem;
}

.form-message {
  min-height: 22px;
  margin: 10px 0 0;
  color: #f0c769;
  font-size: 0.88rem;
  text-align: center;
}

/* The presenter's grounding disc. Breathes so the room never feels frozen. */
.twin-disc::before,
.gate-twin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(110%, 400px);
  height: clamp(28px, 6vw, 64px);
  transform: translateX(-50%);
  border: 1px solid rgba(169, 217, 229, 0.22);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(180, 196, 205, 0.16), rgba(9, 12, 14, 0.55) 62%, transparent 74%);
  box-shadow: inset 0 4px 22px rgba(220, 232, 238, 0.1), 0 24px 70px rgba(0, 0, 0, 0.4);
  animation: discBreath 5.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes discBreath {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.04); }
}

/* ==========================================================================
   GATE
   ========================================================================== */
.gate-shell {
  position: fixed;
  inset: 0;
  display: grid;
}

.gate-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  padding: 20px 20px 40px;
}

.gate-identity {
  position: absolute;
  left: 22px;
  top: 18px;
  display: grid;
  gap: 4px;
}

.gate-id { margin: 0; font-size: 0.82rem; font-weight: 750; }
.gate-id span { color: var(--signal); padding: 0 4px; }
.gate-identity .eyebrow { color: var(--muted); font-size: 0.66rem; }

.gate-twin {
  position: relative;
  grid-row: 2;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: min(80vw, 420px);
  padding-bottom: 10px;
}

.gate-twin img {
  position: relative;
  z-index: 1;
  width: min(30vw, 340px);
  max-height: 62svh;
  object-fit: contain;
  filter: brightness(0.96) contrast(1.05) saturate(0.92) drop-shadow(0 34px 44px rgba(0, 0, 0, 0.55));
  animation: twinBreath 6.5s ease-in-out infinite;
}

.gate-copy {
  grid-row: 3;
  width: min(480px, 100%);
  margin-top: clamp(20px, 4vh, 44px);
  text-align: center;
}

.gate-links { margin-top: 14px; }

.gate-links a {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(169, 217, 229, 0.44);
}

.gate-links a:hover { color: var(--paper); border-color: var(--signal); }

/* ==========================================================================
   APP SHELL + TOPBAR (a quiet overlay)
   ========================================================================== */
.app-shell {
  position: fixed;
  inset: 0;
}

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px 0;
  pointer-events: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: rgba(244, 244, 241, 0.58);
  pointer-events: auto;
  transition: color 160ms ease;
}

.brand-mark:hover { color: var(--paper); }

.brand-identity {
  display: grid;
  gap: 1px;
  font-size: 0.64rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.brand-identity > span { color: var(--signal); font-weight: 800; }
.brand-identity strong { color: inherit; font-size: inherit; }

.brand-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 780;
  text-transform: uppercase;
}

.brand-back > span {
  color: var(--signal);
  font-size: 1rem;
  line-height: 1;
}

#app[data-layout="encounter"] .brand-back { display: none; }
#app:not([data-layout="encounter"]) .brand-identity { display: none; }

.top-actions {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.top-actions a, .top-actions button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: rgba(244, 244, 241, 0.5);
  padding: 0 8px;
  font-size: 0.68rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.68);
  transition: color 160ms ease;
}

.top-actions a:hover, .top-actions button:hover { color: var(--paper); }

.void-stage {
  position: relative;
  height: 100svh;
  isolation: isolate;
}

/* The dock is transparent to existing scene grids. Layouts that need one
   continuous control surface opt into a real wrapper below. */
.interaction-dock { display: contents; }

/* Legacy zones that no longer render content. */
.detail-zone, #stageTitle { display: none; }

/* ==========================================================================
   THE TWIN (shared)
   ========================================================================== */
.twin-zone {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.twin-plate {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  max-width: 100%;
}

.twin-plate img {
  position: relative;
  z-index: 1;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0.95) contrast(1.05) saturate(0.9) drop-shadow(0 26px 34px rgba(0, 0, 0, 0.58));
  transform: translate3d(var(--twin-shift-x, 0px), var(--twin-shift-y, 0px), 0) rotateY(var(--twin-rotate-y, 0deg));
  transform-origin: 50% 92%;
  transition: transform 600ms var(--ease-out), opacity 420ms ease;
  animation: twinBreath 6.5s ease-in-out infinite;
}

.twin-plate img.is-changing { opacity: 0; }

.twin-plate span {
  position: absolute;
  left: 4px;
  bottom: 2px;
  z-index: 2;
  color: rgba(244, 244, 241, 0.34);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@keyframes twinBreath {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.6%; }
}

/* ==========================================================================
   ENCOUNTER — Werner alone in the void, one question away.
   ========================================================================== */
#app[data-layout="encounter"] .void-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  padding: clamp(56px, 7vh, 72px) 22px clamp(18px, 3vh, 34px);
  row-gap: clamp(8px, 1.5vh, 16px);
}

#app[data-layout="encounter"] .conversation-zone {
  grid-row: 1;
  display: block;
  align-self: start;
  width: min(900px, 100%);
  padding: 0 18px;
  text-align: center;
}

#app[data-layout="encounter"] .conversation-zone .system-line,
#app[data-layout="encounter"] .conversation-zone #stageReply {
  display: none;
}

#app[data-layout="encounter"] .conversation-zone h1 {
  max-width: 28ch;
  margin: 0 auto;
  color: var(--paper);
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0;
}

#app[data-layout="encounter"] #stageTitle { display: block; }

#app[data-layout="encounter"] .twin-zone {
  grid-row: 2;
  width: min(90vw, 560px);
  padding-bottom: 4px;
}

#app[data-layout="encounter"] .twin-plate { justify-content: center; }

#app[data-layout="encounter"] .twin-plate img {
  max-height: min(52svh, 520px);
  width: auto;
}

#app[data-layout="encounter"] .twin-plate span { display: none; }

#app[data-layout="encounter"] .twin-zone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(60vw, 460px);
  height: clamp(30px, 6vw, 70px);
  transform: translateX(-50%);
  border: 1px solid rgba(169, 217, 229, 0.22);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(180, 196, 205, 0.16), rgba(9, 12, 14, 0.5) 64%, transparent 75%);
  animation: discBreath 5.4s ease-in-out infinite;
}

#app[data-layout="encounter"] .interaction-dock {
  grid-row: 3;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 10px;
  width: min(820px, 100%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#app[data-layout="encounter"] .suggestion-row {
  grid-row: auto;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.entry-home-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  width: 100%;
}

#app[data-layout="encounter"] .suggestion-row button.entry-home-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid rgba(169, 217, 229, 0.2);
  border-radius: 999px;
  background: rgba(244, 244, 241, 0.045);
  color: var(--paper);
  text-align: center;
  box-shadow: none;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms var(--ease-out);
}

#app[data-layout="encounter"] .suggestion-row button.entry-home-card::before { display: none; }

#app[data-layout="encounter"] .suggestion-row button.entry-home-card strong {
  font-size: 0.78rem;
  line-height: 1;
}

#app[data-layout="encounter"] .suggestion-row button.entry-home-card:hover,
#app[data-layout="encounter"] .suggestion-row button.entry-home-card:focus-visible {
  border-color: rgba(169, 217, 229, 0.62);
  background: rgba(169, 217, 229, 0.11);
  color: #fff;
  transform: translateY(-2px);
}

.entry-start-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#app[data-layout="encounter"] .suggestion-row button.is-entry-guide {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid rgba(244, 244, 241, 0.16);
  border-radius: 6px;
  background: rgba(244, 244, 241, 0.06);
  color: rgba(244, 244, 241, 0.82);
  font-size: 0.78rem;
  font-weight: 680;
  box-shadow: none;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms var(--ease-out);
}

#app[data-layout="encounter"] .suggestion-row button.is-entry-guide::before { display: none; }

#app[data-layout="encounter"] .suggestion-row button.is-entry-guide:hover,
#app[data-layout="encounter"] .suggestion-row button.is-entry-guide:focus-visible {
  color: var(--paper);
  border-color: rgba(169, 217, 229, 0.52);
  background: rgba(169, 217, 229, 0.12);
  box-shadow: none;
  transform: translateY(-1px);
}

.entry-case-links {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.entry-case-links > span {
  color: rgba(244, 244, 241, 0.42);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0;
}

.entry-case-links > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

#app[data-layout="encounter"] .suggestion-row button.is-case-highlight {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(169, 217, 229, 0.22);
  border-radius: 6px;
  background: rgba(169, 217, 229, 0.055);
  color: rgba(244, 244, 241, 0.72);
  font-size: 0.76rem;
  font-weight: 650;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms var(--ease-out);
}

#app[data-layout="encounter"] .suggestion-row button.is-case-highlight::before {
  display: none;
}

#app[data-layout="encounter"] .suggestion-row button.is-case-highlight:hover,
#app[data-layout="encounter"] .suggestion-row button.is-case-highlight:focus-visible {
  color: var(--paper);
  border-color: rgba(169, 217, 229, 0.5);
  background: rgba(169, 217, 229, 0.12);
  box-shadow: none;
  transform: translateY(-1px);
}

#app[data-layout="encounter"] .evidence-zone { display: none; }

#app[data-layout="encounter"] .prompt-form {
  grid-row: auto;
  width: 100%;
}

#app[data-layout="encounter"] .prompt-row {
  border-color: rgba(169, 217, 229, 0.2);
  background: rgba(8, 12, 15, 0.72);
  box-shadow: none;
}

/* ==========================================================================
   SCENE — the working grid. Proof owns the left, the conversation owns the
   right rail (reply, then Werner, then suggestions), the prompt sits under
   everything. Cells cannot overlap; long text redistributes space.
   ========================================================================== */
#app.has-scene:not([data-layout="encounter"]) .void-stage {
  --scene-twin-height: clamp(150px, 24svh, 250px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(330px, 30vw, 440px);
  grid-template-rows: minmax(0, 1fr) var(--scene-twin-height) auto auto;
  grid-template-areas:
    "proof reply"
    "proof twin"
    "proof suggest"
    "prompt prompt";
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 14px;
  padding: clamp(48px, 7vh, 68px) clamp(20px, 3vw, 48px) clamp(16px, 2.6vh, 30px);
}

/* Overview is a visual index, so the work takes the stage and Werner steps
   out of frame. The conversation remains available as a quiet guide rail. */
#app[data-layout="overview"] .void-stage {
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 360px);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "proof reply"
    "proof suggest"
    "proof prompt";
}

#app[data-layout="overview"] .twin-zone { display: none; }

#app[data-layout="overview"] .conversation-zone {
  align-content: end;
  align-self: end;
  padding-bottom: 10px;
}

#app[data-layout="overview"] #stageReply {
  max-width: 29ch;
  color: rgba(244, 244, 241, 0.82);
}

#app[data-layout="overview"] .prompt-form { width: 100%; }

/* About Werner puts his own working principles beside independent proof.
   This is one profile, not another collection of competing panels. */
#app[data-layout="testimonials"] .void-stage {
  grid-template-columns: clamp(190px, 20vw, 280px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "twin proof"
    "suggest proof"
    "prompt prompt";
  column-gap: clamp(28px, 4vw, 64px);
}

#app[data-layout="testimonials"] .evidence-zone {
  border-left: 1px solid rgba(216, 200, 255, 0.18);
  overflow: hidden;
}

#app[data-layout="testimonials"] .conversation-zone { display: none; }

#app[data-layout="testimonials"] .twin-zone {
  align-self: stretch;
  justify-content: center;
  height: 100%;
  padding-right: 0;
}

#app[data-layout="testimonials"] .twin-plate,
#app[data-layout="testimonials"] .twin-plate img {
  width: 100%;
  height: 100%;
}

#app[data-layout="testimonials"] .twin-plate { justify-content: center; }

#app[data-layout="testimonials"] .twin-plate img {
  max-height: min(58svh, 520px);
  object-fit: contain;
}

.about-proof {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(22px, 3vh, 36px);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(18px, 3vw, 46px) clamp(22px, 4vw, 68px);
}

.about-self,
.about-endorsement {
  min-width: 0;
  min-height: 0;
}

.about-self {
  display: grid;
  grid-template-columns: minmax(250px, 0.92fr) minmax(360px, 1.35fr);
  grid-template-areas:
    "eyebrow intro"
    "headline intro"
    "headline principles"
    "aside principles";
  align-content: start;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 8px;
}

.about-self > .about-eyebrow { grid-area: eyebrow; }

.about-eyebrow {
  color: var(--signal);
  font-size: 0.69rem;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

.about-self h2 {
  grid-area: headline;
  max-width: 11ch;
  margin: 0;
  color: var(--paper);
  font-size: clamp(2.15rem, min(3.6vw, 5.5vh), 4.2rem);
  font-weight: 640;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.about-intro {
  grid-area: intro;
  align-self: end;
  max-width: 40ch;
  margin: 0;
  color: var(--paper-soft);
  font-size: clamp(0.86rem, 1vw, 1rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.about-principles {
  grid-area: principles;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.about-principle {
  display: grid;
  gap: 3px;
  padding-top: 9px;
  border-top: 1px solid rgba(244, 244, 241, 0.15);
}

.about-principle span,
.about-aside span {
  color: rgba(244, 244, 241, 0.46);
  font-size: 0.62rem;
  font-weight: 760;
  text-transform: uppercase;
}

.about-principle strong {
  color: rgba(244, 244, 241, 0.88);
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: 0;
}

.about-aside {
  grid-area: aside;
  display: grid;
  gap: 4px;
  max-width: 46ch;
  margin: 0;
  color: rgba(244, 244, 241, 0.62);
  font-size: 0.73rem;
  line-height: 1.38;
}

.about-endorsement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 0.42fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "heading switcher"
    "quote switcher";
  gap: 12px clamp(28px, 4vw, 60px);
  min-height: 0;
  padding-top: clamp(18px, 2.4vh, 28px);
  border-top: 1px solid rgba(216, 200, 255, 0.22);
}

.about-endorsement-heading {
  grid-area: heading;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.about-endorsement-heading > span:last-child {
  color: rgba(244, 244, 241, 0.38);
  font-size: 0.68rem;
}

.about-endorsement .testimonial-quote { grid-area: quote; }
.about-endorsement .testimonial-mobile-quote { grid-area: quote; }
.about-endorsement .testimonial-switcher { grid-area: switcher; align-self: end; }

.about-endorsement .testimonial-quote p {
  font-size: clamp(1.08rem, min(1.55vw, 2.45vh), 1.72rem);
  line-height: 1.22;
}

.about-endorsement .testimonial-mark {
  font-size: clamp(7rem, 13vw, 13rem);
}

.testimonial-mobile-quote { display: none; }

.composer-reveal { display: none; }

.testimonial-proof {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(22px, 4vh, 44px);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(18px, 3.8vw, 62px);
}

.testimonial-quote {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 0;
}

.testimonial-mark {
  position: absolute;
  top: -0.24em;
  left: -0.18em;
  color: rgba(216, 200, 255, 0.13);
  font-family: Georgia, serif;
  font-size: clamp(9rem, 20vw, 20rem);
  line-height: 1;
  pointer-events: none;
}

.testimonial-quote blockquote {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(22px, 3.2vh, 34px);
  width: min(100%, 920px);
  margin: 0;
}

.testimonial-quote p {
  margin: 0;
  color: var(--paper);
  font-size: clamp(1.38rem, min(2.2vw, 3.2vh), 2.45rem);
  font-weight: 630;
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: pretty;
}

.testimonial-quote footer {
  display: grid;
  gap: 3px;
  padding-left: 14px;
  border-left: 2px solid var(--signal);
}

.testimonial-quote footer strong {
  color: var(--paper);
  font-size: 0.96rem;
  letter-spacing: 0;
}

.testimonial-quote footer span {
  color: var(--paper-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}

.testimonial-switcher {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}

.testimonial-person {
  display: grid;
  flex: 1 1 0;
  gap: 3px;
  min-width: 0;
  padding: 12px 0 10px;
  border-top: 1px solid rgba(244, 244, 241, 0.18);
  background: transparent;
  color: rgba(244, 244, 241, 0.5);
  text-align: left;
  transition: color 180ms ease, border-color 180ms ease;
}

.testimonial-person span {
  font-size: 0.86rem;
  font-weight: 740;
  letter-spacing: 0;
}

.testimonial-person small {
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 540;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.testimonial-person:hover,
.testimonial-person:focus-visible,
.testimonial-person.is-active {
  border-color: var(--signal);
  color: var(--paper);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 0.8vw, 12px);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.overview-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 244, 241, 0.13);
  border-radius: 6px;
  background: #111518;
  color: var(--paper);
  text-align: left;
  isolation: isolate;
  animation: overviewCardIn 520ms var(--ease-out) both;
  animation-delay: calc(var(--overview-index) * 32ms);
  transition: border-color 220ms ease, transform 280ms var(--ease-out), box-shadow 280ms ease;
}

.overview-card[data-accent="mint"] { background: #163128; }
.overview-card[data-accent="gold"] { background: #332a16; }
.overview-card[data-accent="coral"] { background: #35201d; }
.overview-card[data-accent="ice"] { background: #192c33; }
.overview-card[data-accent="lime"] { background: #253018; }
.overview-card[data-accent="blue"] { background: #18263a; }
.overview-card[data-accent="rose"] { background: #321d29; }
.overview-card[data-accent="silver"] { background: #272a2d; }
.overview-card[data-accent="amber"] { background: #382817; }

.overview-card::after {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  z-index: 1;
  background: linear-gradient(transparent, rgba(5, 7, 8, 0.88));
  pointer-events: none;
}

.overview-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.03) brightness(0.86);
  transform: scale(1.002);
  transition: transform 480ms var(--ease-out), filter 280ms ease;
}

.overview-card-mark {
  position: absolute;
  inset: 14px auto auto 14px;
  max-width: calc(100% - 28px);
  color: rgba(244, 244, 241, 0.34);
  font-size: 0.62rem;
  font-weight: 780;
  text-transform: uppercase;
}

.overview-card-copy {
  position: absolute;
  inset: auto 14px 12px;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.overview-card-copy small {
  overflow: hidden;
  color: var(--signal);
  font-size: clamp(0.52rem, 0.62vw, 0.66rem);
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.overview-card-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: clamp(0.86rem, 1.18vw, 1.22rem);
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.overview-card:hover,
.overview-card:focus-visible {
  z-index: 3;
  border-color: rgba(169, 217, 229, 0.72);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34);
  transform: translateY(-2px);
}

.overview-card:hover img,
.overview-card:focus-visible img {
  filter: saturate(1) contrast(1.03) brightness(0.98);
  transform: scale(1.035);
}

@keyframes overviewCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- reply (top of the rail) --- */
#app.has-scene .conversation-zone {
  grid-area: reply;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* About is a single editorial profile. The proof already contains Werner's
   voice, so the standard reply rail would only repeat it and squeeze the page. */
#app.has-scene[data-layout="testimonials"] .conversation-zone {
  display: none;
}

#app.has-scene #stageReply {
  margin: 0;
  color: var(--paper);
  font-size: clamp(0.96rem, min(1.15vw, 2svh), 1.18rem);
  line-height: 1.38;
  white-space: pre-wrap;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 30px rgba(0, 0, 0, 0.6);
}

@media (min-width: 901px) and (max-height: 760px) {
  #app.has-scene:not([data-layout="encounter"]) .void-stage {
    --scene-twin-height: 132px;
    row-gap: 10px;
    padding-top: 46px;
    padding-bottom: 14px;
  }

  #app.has-scene .suggestion-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
  }

  .testimonial-proof {
    gap: 16px;
    padding-block: 14px;
  }

  .about-proof {
    gap: 18px;
    padding-block: 12px;
  }

  .about-self {
    column-gap: 30px;
    row-gap: 5px;
  }

  .about-self h2 {
    font-size: clamp(2rem, 3.4vw, 3.4rem);
  }

  .about-intro { font-size: 0.8rem; }
  .about-principle { padding-top: 6px; }
  .about-principle strong { font-size: 0.74rem; }
  .about-aside { font-size: 0.66rem; }

  .about-endorsement {
    gap: 8px 30px;
    padding-top: 12px;
  }

  .about-endorsement .testimonial-quote p {
    font-size: clamp(0.98rem, min(1.32vw, 2.3vh), 1.34rem);
  }

  .testimonial-quote blockquote { gap: 16px; }

  .testimonial-quote p {
    font-size: clamp(1.18rem, min(1.75vw, 2.8vh), 1.82rem);
    line-height: 1.16;
  }
}

/* --- Werner (middle of the rail; yields space when words need it) --- */
#app.has-scene .twin-zone {
  grid-area: twin;
  justify-content: flex-end;
  height: var(--scene-twin-height);
  min-height: 0;
  padding-right: clamp(4px, 1vw, 20px);
}

#app.has-scene .twin-plate {
  width: 100%;
  height: 100%;
  justify-content: flex-end;
}

#app.has-scene .twin-plate img {
  width: 100%;
  height: 100%;
}

#app.has-scene .twin-plate::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: clamp(18px, 2.2vw, 34px);
  transform: translateX(-50%);
  border: 1px solid rgba(169, 217, 229, 0.18);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(180, 196, 205, 0.12), rgba(9, 12, 14, 0.45) 64%, transparent 76%);
  animation: discBreath 5.4s ease-in-out infinite;
}

/* --- suggestions (bottom of the rail): a quiet ticked list --- */
#app.has-scene .suggestion-row {
  grid-area: suggest;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-content: end;
  align-items: center;
  justify-content: flex-start;
}

/* --- proof: the hero cell --- */
.evidence-zone {
  grid-area: proof;
  position: relative;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  display: grid;
  overflow: hidden;
}

.proof-reveal {
  display: grid;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.case-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.case-media.has-video, .case-media.has-image {
  align-self: center;
  border-radius: 12px;
  background: #0d1013;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.05);
}

.case-media video, .case-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #0d1013;
}

/* Static boards and print pieces must fit the evidence cell instead of using
   their intrinsic image height to stretch the fixed viewport. */
#app.has-visual-proof:not(.has-cinematic-proof) .case-media.has-image {
  align-self: stretch;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

#app.has-visual-proof:not(.has-cinematic-proof) .case-media.has-image img {
  position: absolute;
  inset: 0;
}

/* Cinema keeps the film at 16:9, as large as the cell allows. */
#app.has-cinematic-proof .proof-reveal { place-items: center; }

#app.has-cinematic-proof .case-media {
  width: min(100%, calc((100svh - 240px) * 16 / 9));
  aspect-ratio: 16 / 9;
}

/* A campaign series is one evolving proof, not a thumbnail gallery. The active
   asset owns the stage; the remaining films sit as a quiet strip of fragments. */
.proof-reveal.is-series,
.case-series {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.case-series {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 52px;
  gap: 10px;
}

.series-feature-shell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
}

#app.has-series-proof .case-media.series-feature {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 10px;
}

#app.has-series-proof .case-media.series-feature.is-portrait {
  width: min(68%, calc((100svh - 285px) * 4 / 5));
  height: 100%;
  background: rgba(13, 16, 19, 0.76);
}

.series-feature video,
.series-feature img {
  object-position: center;
}

.series-caption {
  position: absolute;
  left: clamp(12px, 2vw, 28px);
  bottom: clamp(10px, 1.7vw, 24px);
  z-index: 4;
  display: grid;
  gap: 2px;
  max-width: min(70%, 380px);
  padding: 12px 14px 11px;
  background: rgba(6, 9, 10, 0.76);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.series-caption span {
  color: var(--signal);
  font-size: 0.6rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.series-caption strong {
  color: var(--paper);
  font-size: clamp(0.88rem, 1.1vw, 1.05rem);
  line-height: 1.2;
}

.series-fragments {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.series-fragment {
  position: relative;
  flex: 0 1 60px;
  min-width: 34px;
  overflow: hidden;
  border: 0;
  border-bottom: 2px solid rgba(244, 244, 241, 0.16);
  border-radius: 0;
  background: #0d1013;
  opacity: 0.52;
  filter: grayscale(0.72);
  transition: flex-basis 320ms var(--ease-out), opacity 240ms ease, filter 240ms ease, border-color 240ms ease;
}

.series-fragment:hover,
.series-fragment:focus-visible {
  opacity: 0.82;
  filter: grayscale(0.2);
}

.series-fragment.is-active {
  flex-basis: 104px;
  border-bottom-color: var(--signal);
  opacity: 1;
  filter: none;
}

.series-fragment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.series-fragment span {
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  text-shadow: 0 1px 8px #000;
}

/* Image-led proof */
#app.has-visual-proof:not(.has-cinematic-proof) .case-media { width: 100%; height: 100%; }

/* Text-led proof: the title is the poster, floating on the void. */
.case-media.is-abstract {
  width: 100%;
  height: 100%;
  align-content: center;
  justify-items: start;
  padding: clamp(24px, 4vw, 64px);
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(169, 217, 229, 0.12), transparent 46%),
    radial-gradient(140% 120% at 30% 50%, rgba(6, 8, 10, 0.42), transparent 70%);
}

.case-media.is-abstract span, .case-media.is-abstract small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.case-media.is-abstract strong {
  max-width: 10ch;
  margin: 10px 0 0;
  color: var(--paper);
  font-size: clamp(3rem, 6.4vw, 7.4rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

.case-media.is-abstract small { margin-top: 16px; }

.proof-reveal-copy {
  position: absolute;
  right: clamp(16px, 2.4vw, 40px);
  bottom: clamp(14px, 2.2vw, 36px);
  width: min(30%, 300px);
  display: grid;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid rgba(169, 217, 229, 0.34);
}

.proof-reveal-copy span {
  color: var(--signal);
  font-size: 0.64rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.proof-reveal-copy h2 { display: none; }

.proof-reveal-copy p {
  margin: 0;
  color: var(--paper-soft);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* Film and photo proof: the media speaks for itself. */
#app.has-visual-proof .proof-reveal-copy { display: none; }

/* No case on stage: the theme intro floats quietly. */
.empty-proof {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(24px, 4vw, 64px);
}

.empty-proof span {
  color: var(--signal);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.empty-proof p {
  max-width: 30ch;
  margin: 0;
  color: var(--paper-soft);
  font-size: 1.3rem;
  line-height: 1.4;
}

/* --- prompt: centred under everything --- */
.prompt-form { position: relative; }

#app.has-scene:not([data-layout="encounter"]) .prompt-form {
  grid-area: prompt;
  justify-self: center;
  width: min(640px, 100%);
}

/* Native video overlay play button */
.case-play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 50%;
  background: rgba(22, 25, 28, 0.78);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  transition: transform 180ms var(--ease-out), opacity 180ms ease;
}

.case-play:hover { transform: translate(-50%, -50%) scale(1.06); }

.case-play span {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #fff;
}

.case-media.has-video.is-playing .case-play { pointer-events: none; opacity: 0; }

/* ---------- suggestions (shared look) ---------- */
.suggestion-row button {
  position: relative;
  min-height: 36px;
  max-width: 100%;
  padding: 8px 13px;
  border: 1px solid rgba(169, 217, 229, 0.24);
  border-radius: 999px;
  background: rgba(169, 217, 229, 0.055);
  color: rgba(244, 244, 241, 0.8);
  font-size: 0.8rem;
  font-weight: 680;
  line-height: 1.2;
  text-align: left;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms var(--ease-out);
}

.suggestion-row button::before {
  display: none;
}

.suggestion-row button:hover,
.suggestion-row button:focus-visible {
  border-color: rgba(169, 217, 229, 0.66);
  background: rgba(169, 217, 229, 0.13);
  color: #fff;
  transform: translateY(-1px);
}

.suggestion-row .contact-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 4px;
  padding: 0 14px;
  border: 1px solid rgba(169, 217, 229, 0.42);
  border-radius: 999px;
  background: rgba(169, 217, 229, 0.1);
  color: var(--signal);
  font-size: 0.8rem;
  font-weight: 740;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.suggestion-row .contact-chip:hover {
  border-color: rgba(169, 217, 229, 0.8);
  background: rgba(169, 217, 229, 0.18);
  color: #fff;
}

/* ==========================================================================
   STATES
   ========================================================================== */
/* Thinking: the previous words and options step back; the room listens. */
#app.has-scene .conversation-zone,
#app.has-scene .suggestion-row {
  transition: opacity 320ms ease;
}

#app.is-thinking .conversation-zone,
#app.is-thinking .suggestion-row { opacity: 0.35; }

/* Speaking: a whisper of light on the presenter. */
#app.is-speaking .twin-plate img {
  filter: brightness(0.98) contrast(1.05) saturate(0.92)
    drop-shadow(0 26px 34px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 26px rgba(169, 217, 229, 0.18));
}

.app-shell.is-listening .prompt-row { border-color: rgba(169, 217, 229, 0.4); }

/* The reply is revealed by a paced character queue in JS. The caret is the
   only decorative motion, so uneven network chunks never become visible. */
#app.is-speaking #stageReply::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.12em;
  background: var(--signal);
  vertical-align: -0.08em;
  animation: typingCaret 760ms steps(1, end) infinite;
}

@keyframes typingCaret { 50% { opacity: 0; } }

/* ==========================================================================
   MORPH TRANSITIONS — named elements travel between scenes.
   ========================================================================== */
.twin-zone { view-transition-name: twin; }
.evidence-zone { view-transition-name: proof; }
.conversation-zone { view-transition-name: reply; }
.suggestion-row { view-transition-name: suggestions; }
.prompt-form { view-transition-name: prompt; }

::view-transition-group(*) {
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(0.3, 0.75, 0.22, 1);
}

::view-transition-group(twin) {
  animation-duration: 880ms;
  animation-timing-function: cubic-bezier(0.22, 0.78, 0.2, 1);
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 620ms;
}

/* Contents inside a moving group crossfade gently rather than blink. */
::view-transition-old(proof), ::view-transition-new(proof),
::view-transition-old(reply), ::view-transition-new(reply),
::view-transition-old(suggestions), ::view-transition-new(suggestions) {
  animation-duration: 480ms;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   MOBILE — one column, in flow, nothing overlaps.
   ========================================================================== */
@media (max-width: 900px) {
  #app.has-scene:not([data-layout="encounter"]) .void-stage {
    --scene-twin-height: clamp(64px, 15svh, 120px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) var(--scene-twin-height) auto auto;
    grid-template-areas:
      "reply"
      "proof"
      "twin"
      "suggest"
      "prompt";
    padding: 52px 16px 14px;
    row-gap: 10px;
  }

  #app.has-scene .conversation-zone { max-height: 32svh; }

  #app[data-layout="overview"] .void-stage {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "reply"
      "proof"
      "suggest"
      "prompt";
  }

  #app[data-layout="overview"] .conversation-zone {
    align-content: start;
    align-self: auto;
    max-height: 21svh;
    padding: 0;
  }

  #app[data-layout="overview"] #stageReply { max-width: 44ch; }

  #app[data-layout="overview"] .evidence-zone {
    overflow: hidden;
  }

  #app[data-layout="testimonials"] .void-stage {
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "proof"
      "suggest"
      "prompt";
    padding-top: 46px;
  }

  #app[data-layout="testimonials"] .conversation-zone,
  #app[data-layout="testimonials"] .twin-zone { display: none; }

  #app[data-layout="testimonials"] .evidence-zone {
    border-left: 0;
    border-top: 1px solid rgba(216, 200, 255, 0.2);
    overflow: hidden;
  }

  #app[data-layout="testimonials"] .twin-zone {
    height: 54px;
  }

  .about-proof {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 14px;
    align-content: start;
    padding: 12px 4px 4px;
    overflow: hidden;
  }

  .about-self {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "headline"
      "intro"
      "principles";
    gap: 7px;
  }

  .about-self > .about-eyebrow { grid-area: eyebrow; }

  .about-self h2 {
    max-width: 16ch;
    font-size: clamp(1.3rem, 6vw, 1.8rem);
    line-height: 1;
  }

  .about-intro {
    display: block;
    max-width: 42ch;
    font-size: 0.72rem;
    line-height: 1.3;
  }

  .about-aside { display: none; }

  .about-principles {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .about-principle {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
  }

  .about-principle strong {
    font-size: 0.66rem;
    line-height: 1.22;
  }

  .about-endorsement {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "heading"
      "quote"
      "switcher";
    gap: 6px;
    padding-top: 7px;
    border-top: 1px solid rgba(216, 200, 255, 0.24);
  }

  .about-endorsement .testimonial-quote { display: none; }

  .testimonial-mobile-quote {
    display: grid;
    gap: 5px;
    margin: 0;
  }

  .testimonial-mobile-quote p {
    margin: 0;
    color: var(--paper);
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.22;
  }

  .testimonial-mobile-quote footer {
    display: grid;
    gap: 1px;
    padding-left: 8px;
    border-left: 2px solid var(--signal);
  }

  .testimonial-mobile-quote footer strong {
    color: var(--paper);
    font-size: 0.64rem;
  }

  .testimonial-mobile-quote footer span {
    color: var(--paper-soft);
    font-size: 0.56rem;
  }

  .testimonial-proof {
    gap: 9px;
    padding: 14px 4px 4px;
  }

  .testimonial-quote blockquote { gap: 10px; }

  .testimonial-quote p {
    font-size: clamp(0.92rem, 4vw, 1.18rem);
    line-height: 1.2;
  }

  .testimonial-quote footer span { font-size: 0.7rem; }

  .testimonial-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    overflow: visible;
  }

  #app.has-scene:not([data-layout="encounter"]).is-composer-collapsed .prompt-form {
    justify-self: end;
    width: auto;
  }

  #app.has-scene.is-composer-collapsed .prompt-row { display: none; }

  #app.has-scene.is-composer-collapsed .composer-reveal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(169, 217, 229, 0.28);
    border-radius: 999px;
    background: rgba(15, 19, 22, 0.72);
    color: rgba(244, 244, 241, 0.72);
    font-size: 0.7rem;
    font-weight: 700;
    backdrop-filter: blur(14px);
  }

  #app.has-scene.is-composer-collapsed .composer-reveal span {
    color: var(--signal);
    font-size: 0.96rem;
  }

  .testimonial-person {
    min-width: 0;
    padding-block: 8px 4px;
  }

  .testimonial-person span,
  .testimonial-person small {
    white-space: normal;
  }

  .overview-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(2, minmax(112px, 1fr));
    grid-auto-columns: minmax(170px, 58vw);
    grid-auto-flow: column;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .overview-grid::-webkit-scrollbar { display: none; }

  .overview-card { scroll-snap-align: start; }

  #app.has-scene #stageReply { font-size: 0.98rem; line-height: 1.36; }

  #app.has-scene .twin-zone { justify-content: flex-end; padding-right: 6px; }

  #app.has-scene .suggestion-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, black 0 88%, transparent);
  }

  #app.has-scene .suggestion-row::-webkit-scrollbar { display: none; }

  #app.has-scene .suggestion-row button { white-space: nowrap; }

  #app[data-layout="testimonials"] .suggestion-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    overflow: visible;
    mask-image: none;
  }

  #app[data-layout="testimonials"] .suggestion-row button {
    width: 100%;
    min-height: 19px;
    white-space: normal;
  }

  #app.has-cinematic-proof .case-media { width: 100%; }

  .case-series { grid-template-rows: minmax(0, 1fr) 44px; gap: 6px; }

  #app.has-series-proof .case-media.series-feature.is-portrait {
    width: min(78%, calc(44svh * 4 / 5));
  }

  .series-fragments {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .series-fragments::-webkit-scrollbar { display: none; }

  .series-fragment { flex-basis: 44px; min-width: 44px; }
  .series-fragment.is-active { flex-basis: 72px; min-width: 72px; }

  .series-caption {
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 8px 10px;
  }

  .proof-reveal-copy { display: none; }

  .case-media.is-abstract strong { font-size: clamp(2.2rem, 11vw, 4rem); }

  #app[data-layout="encounter"] .twin-plate img { max-height: 42svh; }

  #app[data-layout="encounter"] .void-stage {
    padding: 56px 12px 14px;
    row-gap: 8px;
  }

  #app[data-layout="encounter"] .interaction-dock {
    gap: 7px;
    padding: 0;
  }

  #app[data-layout="encounter"] .conversation-zone {
    padding-inline: 8px;
  }

  #app[data-layout="encounter"] .conversation-zone h1 {
    max-width: 20ch;
    font-size: clamp(1.35rem, 6vw, 1.85rem);
    line-height: 1;
  }

  .entry-home-grid {
    gap: 5px;
  }

  #app[data-layout="encounter"] .suggestion-row button.entry-home-card {
    min-height: 32px;
    padding: 6px 10px;
  }

  #app[data-layout="encounter"] .suggestion-row button.entry-home-card strong {
    font-size: 0.7rem;
  }

  .entry-start-links {
    gap: 22px;
  }

  .gate-twin img { width: min(56vw, 300px); max-height: 50svh; }

  .gate-copy { width: 100%; }
}

@media (max-width: 900px) and (max-height: 720px) {
  #app[data-layout="testimonials"] .about-intro { display: none; }

  #app[data-layout="testimonials"] .about-proof {
    gap: 8px;
  }

  #app[data-layout="testimonials"] .about-self {
    gap: 5px;
  }

  #app[data-layout="testimonials"] .about-endorsement-heading > span:last-child {
    display: none;
  }
}

/* ==========================================================================
   ABOUT — one answer, one piece of independent proof, one conversation dock.
   The deeper working-style material stays in the knowledge base until asked.
   ========================================================================== */
#app.has-testimonial-proof { --signal: #d8c8ff; }

#app.has-scene.has-testimonial-proof:not([data-layout="encounter"]) .void-stage {
  grid-template-columns: clamp(210px, 24vw, 330px) minmax(420px, 650px);
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "twin reply"
    "twin proof"
    "suggest suggest"
    "prompt prompt";
  justify-content: center;
  column-gap: clamp(30px, 4vw, 64px);
  row-gap: 0;
  padding: clamp(70px, 9vh, 94px) 24px clamp(14px, 2.4vh, 26px);
}

#app.has-testimonial-proof .detail-zone { display: none; }

#app.has-testimonial-proof .twin-zone {
  display: flex;
  align-self: stretch;
  justify-content: center;
  height: auto;
  min-height: 0;
  padding: 0;
}

#app.has-testimonial-proof .twin-plate {
  width: 100%;
  height: 100%;
  justify-content: center;
}

#app.has-testimonial-proof .twin-plate img {
  width: 100%;
  height: 100%;
  max-height: min(58svh, 510px);
  object-fit: contain;
}

#app.has-scene.has-testimonial-proof .conversation-zone {
  display: grid;
  align-self: end;
  align-content: end;
  gap: 0;
  width: 100%;
  max-height: none;
  overflow: visible;
  padding: 0 0 clamp(14px, 2.8vh, 28px);
}

#app.has-testimonial-proof .conversation-zone::before {
  content: "In my words";
  margin-bottom: 8px;
  color: var(--signal);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#app.has-testimonial-proof .system-line,
#app.has-testimonial-proof #stageTitle {
  display: none;
}

#app.has-testimonial-proof #stageReply {
  max-width: 38ch;
  color: rgba(244, 244, 241, 0.94);
  font-size: clamp(1.12rem, min(1.65vw, 2.7vh), 1.52rem);
  font-weight: 540;
  line-height: 1.36;
  text-wrap: pretty;
}

#app.has-testimonial-proof .evidence-zone {
  align-self: start;
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
  border: 0;
}

.about-quote-proof {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "label"
    "quote"
    "credit";
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 18px 20px 18px 54px;
  overflow: hidden;
  border: 1px solid rgba(216, 200, 255, 0.2);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(216, 200, 255, 0.1), rgba(216, 200, 255, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.about-quote-label {
  grid-area: label;
  color: var(--signal) !important;
  font-size: 0.62rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.about-quote-mark {
  position: absolute;
  left: 16px;
  top: 16px;
  color: rgba(216, 200, 255, 0.72) !important;
  font-family: Georgia, serif;
  font-size: 3.6rem !important;
  line-height: 0.9;
}

.about-quote-proof p {
  grid-area: quote;
  margin: 0;
  color: rgba(244, 244, 241, 0.92);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  font-weight: 620;
  line-height: 1.34;
  text-wrap: pretty;
}

.about-quote-proof footer {
  grid-area: credit;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.about-quote-proof strong {
  color: var(--paper);
  font-size: 0.74rem;
}

.about-quote-proof span {
  color: rgba(244, 244, 241, 0.42);
  font-size: 0.68rem;
}

#app.has-testimonial-proof .suggestion-row {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-self: center;
  gap: 7px;
  width: min(100%, 850px);
  min-height: 52px;
  padding: 9px 10px 8px;
  border: 1px solid rgba(216, 200, 255, 0.2);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(13, 16, 19, 0.66);
  backdrop-filter: blur(18px);
}

#app.has-testimonial-proof .suggestion-row button {
  width: auto;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(216, 200, 255, 0.3);
  border-radius: 999px;
  background: rgba(216, 200, 255, 0.09);
  color: rgba(244, 244, 241, 0.8);
  font-size: 0.76rem;
  line-height: 1.15;
  white-space: normal;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms var(--ease-out);
}

#app.has-testimonial-proof .suggestion-row button::before { display: none; }

#app.has-testimonial-proof .suggestion-row button:hover,
#app.has-testimonial-proof .suggestion-row button:focus-visible {
  border-color: rgba(216, 200, 255, 0.62);
  background: rgba(216, 200, 255, 0.14);
  color: var(--paper);
  transform: translateY(-1px);
}

#app.has-scene.has-testimonial-proof .prompt-form {
  justify-self: center;
  width: min(100%, 850px);
}

#app.has-testimonial-proof .prompt-row {
  padding: 0 7px 7px;
  border-color: rgba(216, 200, 255, 0.2);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(13, 16, 19, 0.66);
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.34);
}

@media (max-width: 900px) {
  #app.has-scene.has-testimonial-proof:not([data-layout="encounter"]) .void-stage {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "reply reply"
      "twin proof"
      "suggest suggest"
      "prompt prompt";
    align-content: stretch;
    column-gap: 12px;
    row-gap: 0;
    padding: 58px 14px 12px;
  }

  #app.has-scene.has-testimonial-proof .conversation-zone {
    display: grid;
    align-self: start;
    max-height: none;
    overflow: visible;
    padding: 0 0 12px;
  }

  #app.has-testimonial-proof .conversation-zone::before { margin-bottom: 5px; }

  #app.has-testimonial-proof #stageReply {
    max-width: 42ch;
    font-size: clamp(0.94rem, 4.35vw, 1.08rem);
    line-height: 1.35;
  }

  #app.has-testimonial-proof .twin-zone {
    align-self: end;
    height: min(25svh, 190px);
  }

  #app.has-testimonial-proof .twin-plate img { max-height: min(25svh, 190px); }

  #app.has-testimonial-proof .evidence-zone {
    align-self: center;
    overflow: visible;
    border: 0;
  }

  .about-quote-proof {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "quote"
      "credit";
    gap: 6px;
    padding: 13px 12px 13px 34px;
  }

  .about-quote-mark { left: 9px; top: 13px; font-size: 2.55rem !important; }

  .about-quote-proof p {
    font-size: 0.82rem;
    line-height: 1.28;
  }

  .about-quote-proof strong { font-size: 0.68rem; }
  .about-quote-proof span { font-size: 0.6rem; }

  #app.has-testimonial-proof .suggestion-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    min-height: 48px;
    padding: 8px 9px 6px;
    mask-image: linear-gradient(90deg, black 0 90%, transparent);
    scrollbar-width: none;
  }

  #app.has-testimonial-proof .suggestion-row::-webkit-scrollbar { display: none; }

  #app.has-testimonial-proof .suggestion-row button {
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    padding: 6px 10px;
    white-space: nowrap;
  }

  #app.has-scene.has-testimonial-proof.is-composer-collapsed .prompt-form {
    justify-self: stretch;
    width: 100%;
  }

  #app.has-testimonial-proof.is-composer-collapsed .suggestion-row {
    border-bottom: 1px solid rgba(216, 200, 255, 0.2);
    border-radius: 8px;
  }
}

/* About is deliberately not a social-media screenshot. It uses the same
   presenter-and-proof mechanic as the work, with one verbatim recommendation
   treated as an editorial object and one connected conversation dock. */
#app.has-scene.has-testimonial-proof:not([data-layout="encounter"]) .void-stage {
  --about-twin-height: min(62svh, 570px);
  grid-template-columns: clamp(220px, 24vw, 340px) minmax(440px, 680px);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "twin reply"
    "twin proof"
    "dock dock";
  align-content: center;
  justify-content: center;
  column-gap: clamp(34px, 4vw, 70px);
  row-gap: clamp(12px, 2vh, 20px);
  padding: clamp(64px, 8vh, 84px) 24px clamp(14px, 2.2vh, 24px);
}

#app.has-scene.has-testimonial-proof .conversation-zone {
  align-self: end;
  align-content: end;
  padding: 0 0 4px;
}

#app.has-testimonial-proof #stageReply {
  max-width: 38ch;
  font-size: clamp(1.04rem, min(1.36vw, 2.2vh), 1.34rem);
  line-height: 1.38;
}

#app.has-testimonial-proof .evidence-zone {
  align-self: start;
  min-height: 0;
  overflow: visible;
}

#app.has-testimonial-proof .twin-zone {
  align-self: stretch;
  justify-content: center;
  height: auto;
  min-height: 0;
  padding: 0;
}

#app.has-testimonial-proof .twin-plate,
#app.has-testimonial-proof .twin-plate img {
  width: 100%;
  height: 100%;
  max-height: var(--about-twin-height);
  object-fit: contain;
}

.editorial-testimonial {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: clamp(10px, 1.5vh, 16px);
  width: 100%;
  height: auto;
  min-height: 0;
  padding: clamp(18px, 2.2vw, 28px);
  overflow: visible;
  border: 1px solid rgba(216, 200, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(216, 200, 255, 0.11), rgba(216, 200, 255, 0.025) 58%),
    rgba(12, 15, 18, 0.55);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.editorial-testimonial > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--signal);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.editorial-testimonial > header span:last-child { color: rgba(244, 244, 241, 0.38); }

.editorial-testimonial blockquote {
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(9px, 1.4vh, 13px);
  min-height: 0;
  margin: 0;
  padding-left: clamp(34px, 4vw, 52px);
}

.editorial-quote-mark {
  position: absolute;
  left: 0;
  top: 0.08em;
  color: rgba(216, 200, 255, 0.34);
  font-family: Georgia, serif;
  font-size: clamp(3.6rem, 5.5vw, 5.8rem);
  line-height: 0.7;
}

.editorial-testimonial blockquote p {
  max-width: none;
  margin: 0;
  color: rgba(244, 244, 241, 0.94);
  font-size: clamp(0.92rem, min(1.08vw, 1.9vh), 1.1rem);
  font-weight: 590;
  line-height: 1.34;
  text-wrap: pretty;
}

.testimonial-quote-short { display: none; }

.editorial-testimonial blockquote footer {
  display: grid;
  gap: 2px;
  margin-top: 1px;
  padding-left: 12px;
  border-left: 2px solid var(--signal);
}

.editorial-testimonial blockquote footer strong { color: var(--paper); font-size: 0.82rem; }
.editorial-testimonial blockquote footer span { color: rgba(244, 244, 241, 0.46); font-size: 0.7rem; }

.testimonial-proof-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.testimonial-proof-switcher button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(216, 200, 255, 0.16);
  border-radius: 6px;
  background: rgba(216, 200, 255, 0.035);
  color: rgba(244, 244, 241, 0.5);
  text-align: left;
}

.testimonial-proof-switcher button span { color: var(--signal); font-size: 0.62rem; }
.testimonial-proof-switcher button strong { overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }

.testimonial-proof-switcher button[aria-pressed="true"] {
  border-color: rgba(216, 200, 255, 0.5);
  background: rgba(216, 200, 255, 0.11);
  color: var(--paper);
}

#app.has-testimonial-proof .interaction-dock {
  grid-area: dock;
  display: grid;
  justify-self: center;
  width: min(100%, 920px);
  overflow: hidden;
  border: 1px solid rgba(216, 200, 255, 0.22);
  border-radius: 8px;
  background: rgba(10, 13, 16, 0.68);
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

#app.has-testimonial-proof .suggestion-row {
  grid-area: auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 8px 9px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

#app.has-scene.has-testimonial-proof .prompt-form {
  grid-area: auto;
  width: 100%;
  margin: 0;
}

#app.has-testimonial-proof .prompt-row {
  padding: 0 7px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  #app.has-scene.has-testimonial-proof:not([data-layout="encounter"]) .void-stage {
    --about-twin-height: 72px;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: auto auto var(--about-twin-height) auto;
    grid-template-areas:
      "reply reply"
      "proof proof"
      "twin twin"
      "dock dock";
    align-content: start;
    column-gap: 10px;
    row-gap: 7px;
    padding: 54px 12px 10px;
  }

  #app.has-scene.has-testimonial-proof .conversation-zone { padding: 2px 1px 5px; }
  #app.has-testimonial-proof .conversation-zone::before { margin-bottom: 4px; font-size: 0.58rem; }

  #app.has-testimonial-proof #stageReply {
    max-width: 44ch;
    font-size: clamp(0.88rem, 3.95vw, 1rem);
    line-height: 1.3;
  }

  #app.has-testimonial-proof .evidence-zone {
    align-self: stretch;
    min-height: 0;
    max-height: none;
  }

  .editorial-testimonial {
    gap: 7px;
    padding: 10px 11px;
  }

  .editorial-testimonial > header { font-size: 0.56rem; }

  .editorial-testimonial blockquote {
    gap: 7px;
    padding-left: 28px;
  }

  .editorial-quote-mark {
    top: 0.08em;
    font-size: 3.15rem;
  }
  .testimonial-quote-full { display: none; }
  .editorial-testimonial blockquote p.testimonial-quote-short {
    display: block;
    font-size: 0.8rem;
    line-height: 1.26;
  }
  .editorial-testimonial blockquote footer strong { font-size: 0.7rem; }
  .editorial-testimonial blockquote footer span { font-size: 0.6rem; }

  .testimonial-proof-switcher button { min-height: 34px; padding: 5px 8px; }
  .testimonial-proof-switcher button strong { font-size: 0.64rem; }

  #app.has-testimonial-proof .twin-zone {
    align-self: stretch;
    justify-content: center;
    height: var(--about-twin-height);
    padding: 0;
  }

  #app.has-testimonial-proof .twin-plate,
  #app.has-testimonial-proof .twin-plate img {
    width: 100%;
    height: 100%;
    max-height: var(--about-twin-height);
  }

  #app.has-testimonial-proof .interaction-dock { width: 100%; }

  #app.has-testimonial-proof .suggestion-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding: 7px 8px 5px;
    mask-image: linear-gradient(90deg, black 0 90%, transparent);
    scrollbar-width: none;
  }

  #app.has-testimonial-proof .suggestion-row::-webkit-scrollbar { display: none; }
  #app.has-testimonial-proof .suggestion-row button { flex: 0 0 auto; white-space: nowrap; }

  #app.has-testimonial-proof.is-composer-collapsed .interaction-dock { padding-bottom: 2px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}