/* =============================================================================
   SUGARLUMP DESIGN SYSTEM — Components
   Reusable UI built entirely on tokens. Depends on tokens.css + base.css.
   ============================================================================= */

/* --- Type helpers ------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 1.4em; height: 2px;
  background: var(--primary);
  border-radius: 2px;
}
.eyebrow--center { justify-content: center; }

.display-4xl { font-size: var(--fs-4xl); line-height: var(--lh-tight); font-weight: 560; }
.display-3xl { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: 560; }
.display-2xl { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
.display-xl  { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
.title-lg    { font-size: var(--fs-lg);  font-weight: 600; font-family: var(--font-display); line-height: var(--lh-snug); }

.lead { font-size: var(--fs-lg); line-height: 1.5; color: var(--text-soft); font-weight: 420; }
.muted { color: var(--text-muted); }
.ital { font-style: italic; }
.hl { color: var(--primary); font-style: italic; }
.hl-mint { color: var(--secondary-deep); font-style: italic; }
.hl-amber { color: var(--accent); }

/* Marker underline drawn behind a word */
.mark {
  background: linear-gradient(180deg, transparent 62%, var(--accent-soft) 62%);
  padding-inline: 0.06em;
}
.mark--mint { background: linear-gradient(180deg, transparent 62%, var(--secondary-soft) 62%); }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  --_bg: var(--c-ink-900);
  --_fg: var(--text-inverse);
  --_edge: var(--c-ink-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.95em 1.5em;
  border: 2px solid var(--_edge);
  border-radius: var(--r-pill);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-bounce),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  box-shadow: 0 2px 0 var(--_edge);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--_edge), var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 0 var(--_edge); }
.btn .arrow { transition: transform var(--dur-med) var(--ease-bounce); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary { --_bg: var(--primary); --_fg: var(--c-white); --_edge: var(--primary-deep); }
.btn--mint    { --_bg: var(--secondary); --_fg: #05221b; --_edge: var(--secondary-deep); }
.btn--amber   { --_bg: var(--accent); --_fg: #3a2402; --_edge: var(--accent-deep, #e8850a); }
.btn--ghost {
  --_bg: transparent; --_fg: var(--text); --_edge: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { --_bg: var(--text); --_fg: var(--bg); box-shadow: 0 6px 0 transparent, var(--shadow-md); }
.btn--lg { font-size: var(--fs-md); padding: 1.1em 1.9em; }
.btn--sm { font-size: var(--fs-xs); padding: 0.7em 1.15em; }
.btn--block { display: flex; width: 100%; }

/* Link with animated underline */
.link {
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background-image: linear-gradient(var(--primary), var(--primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur-med) var(--ease-out), color var(--dur-fast);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 2px; color: var(--primary); }
.link .arrow { transition: transform var(--dur-med) var(--ease-bounce); }
.link:hover .arrow { transform: translateX(3px); }

/* --- Chips / badges ---------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.42em 0.85em;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  border: 1.5px solid var(--line);
  white-space: nowrap;
}
.chip--primary { background: var(--primary-soft); color: var(--primary-deep); border-color: transparent; }
.chip--mint    { background: var(--secondary-soft); color: var(--secondary-deep); border-color: transparent; }
.chip--amber   { background: var(--accent-soft); color: #915005; border-color: transparent; }
.chip--cool    { background: var(--cool-soft); color: var(--cool); border-color: transparent; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--live .dot { background: var(--secondary-deep); box-shadow: 0 0 0 0 var(--secondary); animation: pulse 1.8s var(--ease-out) infinite; }
:root[data-theme="dark"] .chip--amber { color: var(--accent); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--secondary) 70%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Card -------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--dur-med) var(--ease-bounce),
              box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.card--hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}
.card--pop { box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
.card--pop.card--hover:hover { transform: translate(-3px, -3px); box-shadow: 8px 9px 0 var(--c-ink-900); }
.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 700;
}

/* --- Sugar-cube motif (the brand building block) ----------------------- */
.cube {
  --cube-size: 46px;
  --cube-face: var(--primary);
  --cube-top: color-mix(in srgb, var(--cube-face) 78%, white);
  --cube-side: color-mix(in srgb, var(--cube-face) 74%, black);
  width: var(--cube-size);
  aspect-ratio: 1;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-28deg) rotateY(-42deg);
  flex: none;
}
.cube__f {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--cube-size) * 0.16);
}
.cube__f--top   { background: var(--cube-top);  transform: translateZ(calc(var(--cube-size) / 2)); }
.cube__f--front { background: var(--cube-face); transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube__f--side  { background: var(--cube-side); transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube--mint  { --cube-face: var(--secondary); }
.cube--amber { --cube-face: var(--accent); }
.cube--cool  { --cube-face: var(--cool); }
.cube--spin { animation: cube-spin 14s linear infinite; }
@keyframes cube-spin {
  from { transform: rotateX(-28deg) rotateY(-42deg); }
  to   { transform: rotateX(-28deg) rotateY(318deg); }
}

/* Logo lockup */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand__mark { --cube-size: 30px; --uni-size: 32px; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.brand__word b { font-weight: 600; color: var(--primary); font-style: italic; }

/* --- Header / nav ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1.5px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 72px;
}
.nav__links { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.9rem); }
.nav__link {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  position: relative;
  padding: 0.4em 0;
  transition: color var(--dur-fast);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; background: var(--primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: var(--sp-3); }
@media (max-width: 820px) {
  .nav__links { display: none; }
}

.theme-toggle {
  width: 42px; height: 42px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-pill);
  border: 2px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  font-size: 1.1rem;
  transition: transform var(--dur-fast) var(--ease-bounce), background var(--dur-fast);
}
.theme-toggle:hover { transform: rotate(-12deg) scale(1.05); background: var(--surface-2); }

/* --- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: clamp(1.5rem, 3.5vw, 3rem);
  overflow: hidden;
}
.hero > .container { width: 100%; }
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 60% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 60% 0%, #000 30%, transparent 78%);
}
.hero__inner { position: relative; z-index: 2; max-width: 20ch; }
.hero__inner { max-width: none; }
.hero__lede { max-width: 46ch; margin-top: var(--sp-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1.5px dashed var(--line);
}
.hero__stat { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__stat b { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 560; line-height: 1; }
.hero__stat span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* Floating cube cluster for hero */
.cube-cluster { position: relative; height: 100%; min-height: 320px; }
.cube-cluster .cube { position: absolute; }
.float { animation: float 6s ease-in-out infinite; }
.float--2 { animation-duration: 7.5s; animation-delay: -1.5s; }
.float--3 { animation-duration: 5.4s; animation-delay: -0.8s; }
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}

/* --- Availability status pill ------------------------------------------ */
.status-pill {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--secondary-deep); background: var(--secondary-soft);
  padding: 0.5em 0.95em; border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary-deep); box-shadow: 0 0 0 0 var(--secondary); animation: pulse 1.8s var(--ease-out) infinite; }
:root[data-theme="dark"] .status-pill { color: var(--secondary); }
.cta .status-pill { background: rgba(47, 212, 172, 0.16); color: var(--secondary); }

/* --- Two-step contact -------------------------------------------------- */
.contact-intent { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-4); }
.intent {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  padding: 0.6em 1.1em; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08); color: var(--c-cream-300);
  border: 2px solid rgba(255,255,255,0.22); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce), border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.intent:hover { transform: translateY(-2px); border-color: var(--c-cream-50); color: var(--c-cream-50); }
.intent.is-on { background: var(--primary); border-color: var(--primary); color: var(--c-white); }
.field-row[hidden], .contact-done[hidden] { display: none !important; }
.contact-done { display: grid; place-items: center; gap: var(--sp-3); text-align: center; }
.contact-done h3 { font-family: var(--font-display); font-weight: 560; font-size: var(--fs-2xl); color: var(--c-cream-50); }
.contact-done p { color: var(--c-cream-300); max-width: 44ch; }
.contact-done__mark { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--secondary); color: #05221b; display: grid; place-items: center; font-size: 1.6rem; }

/* --- Hero head + project showcase -------------------------------------- */
.hero__head { max-width: 62ch; }
.hero__head h1 { margin-top: var(--sp-4); }
.hero__head .lead { margin-top: var(--sp-5); max-width: 60ch; }

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
@media (max-width: 900px) { .showcase-grid { grid-template-columns: 1fr; } }

.showcase {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-bounce), box-shadow var(--dur-med);
}
.showcase:hover { transform: translate(-3px, -3px); box-shadow: 8px 9px 0 var(--c-ink-900); }
.showcase__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; }
.showcase__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.showcase__kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.showcase h2 { font-size: var(--fs-2xl); line-height: 1.02; }
.showcase__desc { color: var(--text-soft); font-size: var(--fs-sm); }
.showcase__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-4); border-top: 1.5px dashed var(--line); }
.showcase__claims { display: flex; gap: var(--sp-5); }
.showcase__claims div { display: flex; flex-direction: column; }
.showcase__claims b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 560; line-height: 1; }
.showcase__claims span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

/* --- Compact projects-in-hero (rotated cards next to the copy) --------- */
.hero-split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(1.5rem, 4vw, 3.75rem);
  align-items: center;
  width: 100%;
}
@media (max-width: 940px) { .hero-split { grid-template-columns: 1fr; gap: var(--sp-6); align-items: stretch; } }

.hero-copy h1, .hero-title {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  line-height: 1.05; letter-spacing: var(--tracking-tight);
  margin-top: var(--sp-4);
}
.hero-copy .lead { margin-top: var(--sp-5); max-width: 44ch; font-size: var(--fs-lg); line-height: 1.45; }
.hero-copy__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero-cards { display: grid; gap: var(--sp-4); max-width: 560px; margin-inline: auto; width: 100%; }
.hero-proj {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-bounce), box-shadow var(--dur-med);
}
.hero-proj--a { transform: rotate(-2.4deg); }
.hero-proj--b { transform: rotate(2deg); }
.hero-proj:hover { transform: rotate(0) translateY(-5px); box-shadow: var(--shadow-lg); position: relative; z-index: 3; }
.hero-proj__visual { position: relative; aspect-ratio: 5 / 2; border-bottom: 2px solid var(--line-strong); }
.hero-proj__visual svg { display: block; width: 100%; height: 100%; }
.hero-proj__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--primary) 45%, transparent);
  animation: scan 3.6s var(--ease-out) infinite;
}
.hero-proj__bar { padding: 0.7rem var(--sp-4) 0.85rem; display: grid; gap: 0.35rem; }
.hero-proj__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-proj__kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.hero-proj h3 { font-size: var(--fs-lg); line-height: 1; }
.hero-proj__note { font-size: 0.78rem; color: var(--text-soft); line-height: 1.35; }
.hero-proj__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: 1px; }
.hero-proj .link { font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) { .hero-proj__scan { animation: none !important; } }
.hero-proj__cta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: 0.35rem; }

/* --- Project rotator: one card at a time, auto-cycling ----------------- */
.rotator { position: relative; max-width: 560px; margin-inline: auto; width: 100%; }
.rotator__stage { position: relative; }
.rslide {
  position: absolute; inset: 0; opacity: 0;
  transform: scale(0.96) rotate(-4deg);
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-bounce);
  pointer-events: none;
}
.rslide.is-active { position: relative; opacity: 1; transform: rotate(-1.6deg); pointer-events: auto; }
.rotator .hero-proj__bar { min-height: 214px; padding: var(--sp-5) var(--sp-5) var(--sp-6); gap: 0.5rem; }
.rotator .hero-proj h3 { font-size: var(--fs-xl); }
.rotator .hero-proj__note { font-size: 0.95rem; line-height: 1.45; }
.rotator .hero-proj__cta { margin-top: var(--sp-2); gap: var(--sp-3); }
.rotator__dots { display: flex; justify-content: center; gap: 0.55rem; margin-top: var(--sp-4); }
.rdot {
  width: 9px; height: 9px; border-radius: var(--r-pill);
  border: 2px solid var(--line-strong); background: transparent; cursor: pointer; padding: 0;
  transition: transform var(--dur-fast) var(--ease-bounce), background var(--dur-fast), width var(--dur-med) var(--ease-bounce);
}
.rdot:hover { border-color: var(--primary); }
.rdot.is-active { background: var(--primary); border-color: var(--primary); width: 22px; }
@media (prefers-reduced-motion: reduce) { .rslide { transition: opacity 0.3s; } }

/* --- Below-the-fold "deck": content left, sticky chat rail right ------- */
.deck {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: clamp(1.5rem, 3vw, 3.25rem);
  align-items: start;
}
.deck__main { min-width: 0; }
.deck__main > .section { padding-block: clamp(2.25rem, 5vw, 4.5rem); }
.deck__main > .section:first-child { padding-top: 0; }
.deck__main .container { max-width: none; padding-inline: 0; margin-inline: 0; }
/* keep the What-we-do tiles comfortable inside the narrower left column:
   3-up would be too tight, so they run 2-up. (The Approach section uses its
   own container-query layout — see .apA-* — and the journal keeps its 2-col
   .post card.) */
.deck__main .grid--3 { grid-template-columns: repeat(2, 1fr); }

.deck__rail { position: sticky; top: 86px; align-self: start; display: flex; flex-direction: column; gap: var(--sp-3); }
.deck__rail .chat { height: calc(100vh - 104px); max-height: none; min-height: 440px; }

@media (max-width: 980px) {
  .deck { grid-template-columns: 1fr; padding-inline: 0; max-width: none; gap: 0; }
  .deck__main .container { max-width: var(--container); padding-inline: var(--gutter); margin-inline: auto; }
  .deck__main .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .deck__rail { position: static; padding: 0 var(--gutter) var(--sp-8); }
  .deck__rail .chat { height: auto; max-height: 74vh; }
}
@media (max-width: 600px) { .deck__main .grid--3 { grid-template-columns: 1fr; } }

/* --- Lump personality: typing, nudges, celebration, gallop, spotlight -- */
/* typewriter caret */
.type-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--text); margin-left: 1px; vertical-align: -0.15em; animation: caret-blink 0.9s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* rotating "try me" tag pinned to the chat */
.chat__nudge {
  position: absolute; top: -12px; right: 18px; z-index: 6;
  background: var(--accent); color: #3a2402;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em;
  padding: 0.32em 0.75em; border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm); white-space: nowrap; transform: rotate(-3deg);
  animation: nudge-bob 2.2s ease-in-out infinite;
}
.chat__nudge span { display: inline-block; transition: opacity var(--dur-fast); }
@keyframes nudge-bob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-3px); } }

/* reserve celebration — sparkle burst */
.spark-burst { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 20; }
.spark-burst i {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); font-size: 0.95rem; line-height: 1;
  animation: spark-fly 900ms var(--ease-out) forwards;
}
@keyframes spark-fly {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(140deg); opacity: 0; }
}
.uni.is-happy svg { animation: uni-hop 0.55s var(--ease-bounce) 2; }
@keyframes uni-hop { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-9px) rotate(-8deg); } }

/* gallop — unicorn runs across, then hands off to the chat */
.lump-gallop {
  position: fixed; z-index: calc(var(--z-overlay) + 1); top: 46%; left: 0;
  --uni-size: 88px; pointer-events: none; opacity: 0;
}
.lump-gallop.is-running { animation: gallop-run 1.5s var(--ease-out) forwards; }
.lump-gallop.is-running svg { animation: gallop-bob 0.28s ease-in-out infinite; }
@keyframes gallop-run {
  0% { opacity: 0; transform: translateX(-140px) scaleX(-1); }
  12% { opacity: 1; }
  78% { opacity: 1; transform: translateX(46vw) scaleX(-1); }
  100% { opacity: 0; transform: translateX(52vw) scaleX(-1) scale(1.15); }
}
@keyframes gallop-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.lump-gallop__trail { position: absolute; right: 100%; top: 50%; display: flex; gap: 6px; }
.lump-gallop__trail i { color: var(--accent); font-size: 0.7rem; animation: trail-fade 0.6s var(--ease-out) infinite; }
.lump-gallop__trail i:nth-child(2){ animation-delay: 0.12s; } .lump-gallop__trail i:nth-child(3){ animation-delay: 0.24s; }
@keyframes trail-fade { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(0.4); } }
@media (prefers-reduced-motion: reduce) { .lump-gallop { display: none !important; } }

/* "Try me" spotlight — centers the chat once, dismissed by scroll or button */
.lump-spotlight {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; grid-template-rows: auto auto 1fr; place-items: center; align-content: center;
  gap: var(--sp-4); padding: clamp(1rem, 4vh, 2.5rem) var(--gutter);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.lump-spotlight.is-open { opacity: 1; visibility: visible; }
.lump-spotlight__backdrop {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--c-ink-900) 46%, transparent);
  backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); cursor: pointer;
}
.lump-spotlight__title {
  position: relative; z-index: 1; text-align: center;
  font-family: var(--font-display); font-weight: 560; font-style: italic;
  font-size: var(--fs-2xl); color: var(--c-cream-50);
  transform: translateY(12px); opacity: 0; transition: transform var(--dur-slow) var(--ease-bounce) 0.1s, opacity var(--dur-slow) 0.1s;
}
.lump-spotlight.is-open .lump-spotlight__title { transform: none; opacity: 1; }
.lump-spotlight__dialog {
  position: relative; z-index: 1; width: min(540px, 94vw); height: min(660px, 74vh);
  display: flex; transform: scale(0.94); transition: transform var(--dur-med) var(--ease-bounce);
}
.lump-spotlight.is-open .lump-spotlight__dialog { transform: none; }
.lump-spotlight__dialog .chat { flex: 1; width: 100%; height: auto; max-height: none; min-height: 0; box-shadow: var(--shadow-lg); }
.lump-spotlight__close {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm);
  padding: 0.7em 1.3em; border-radius: var(--r-pill);
  background: var(--c-cream-50); color: var(--c-ink-900); border: 0; cursor: pointer;
  box-shadow: var(--shadow-md); transition: transform var(--dur-fast) var(--ease-bounce);
}
.lump-spotlight__close:hover { transform: translateY(2px); }
.lump-spotlight__close .arrow { transition: transform var(--dur-med) var(--ease-bounce); }
.lump-spotlight__close:hover .arrow { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) {
  .lump-spotlight__title, .lump-spotlight__dialog { transition: opacity var(--dur-med); transform: none; }
}

/* sponsor stream — emoji fly from the cursor to the sponsor button */
.coin {
  position: fixed; z-index: var(--z-overlay); pointer-events: none;
  left: 0; top: 0; font-size: 1.2rem; line-height: 1;
  will-change: transform, opacity;
  /* stays fully visible while it travels, then fades only at the very end */
  transition: transform var(--_t, 1200ms) cubic-bezier(0.34, 0.2, 0.2, 1),
              opacity 320ms ease-in var(--_od, 900ms);
}
@media (prefers-reduced-motion: reduce) { .coin { display: none !important; } }

/* --- Chat focus modal (opened from "Let's talk") ---------------------- */
.chat-modal {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vh, 2.5rem) var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.chat-modal.is-open { opacity: 1; visibility: visible; }
.chat-modal__backdrop {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--c-ink-900) 52%, transparent);
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  cursor: pointer;
}
.chat-modal__dialog {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--sp-4);
  width: min(560px, 94vw); height: min(760px, 84vh);
}
.chat-modal__close {
  align-self: center;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm);
  padding: 0.75em 1.4em; border-radius: var(--r-pill);
  background: var(--c-cream-50); color: var(--c-ink-900);
  border: 2px solid transparent; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.chat-modal__close:hover { transform: translateY(-2px); }
.chat-modal__close .arrow { transition: transform var(--dur-med) var(--ease-bounce); }
.chat-modal__close:hover .arrow { transform: translateX(-4px); }
.chat-modal__slot { flex: 1; min-height: 0; display: flex; }
.chat-modal__dialog .chat {
  flex: 1; height: auto; max-height: none; min-height: 0; width: 100%;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95) translateY(10px);
  transition: transform var(--dur-med) var(--ease-bounce);
}
.chat-modal.is-open .chat-modal__dialog .chat { transform: none; }
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .chat-modal__dialog .chat { transform: none; } }

/* --- "Visual claim" scene (blueprint audit frame) ---------------------- */
.scene {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(var(--grid-dot) 1.4px, transparent 1.4px) -11px -11px / 22px 22px,
    linear-gradient(160deg, var(--bg-elevated), var(--bg-sunken));
  border-bottom: 2px solid var(--line-strong);
  overflow: hidden;
}
.scene__tag {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 4;
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35em 0.7em; border-radius: var(--r-pill);
  background: var(--c-ink-900); color: var(--c-cream-50);
}
.scene__tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); animation: pulse 1.8s var(--ease-out) infinite; }

/* animated scan line */
.scene__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--primary) 50%, transparent);
  animation: scan 3.4s var(--ease-out) infinite;
}
@keyframes scan { 0% { top: 6%; } 50% { top: 92%; } 100% { top: 6%; } }

/* horizon road for the audit scene */
.scene__road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink-900) 12%, transparent), color-mix(in srgb, var(--c-ink-900) 22%, transparent));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}
.scene__road::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--c-cream-100) 0 10%, transparent 10% 22%);
  opacity: 0.7;
}

/* a placed object in the scene (emoji marker) */
.scene__obj { position: absolute; z-index: 2; font-size: 1.9rem; line-height: 1; filter: saturate(0.92); }

/* detection box with corner label */
.detect {
  position: absolute; z-index: 3;
  border: 2px dashed var(--primary);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.detect > b {
  position: absolute; top: -0.9rem; left: -2px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.03em; white-space: nowrap;
  padding: 0.2em 0.5em; border-radius: 4px 4px 4px 0;
  background: var(--primary); color: var(--c-white);
}
.detect--amber { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.detect--amber > b { background: var(--accent); color: #3a2402; }
.detect--cool { border-color: var(--cool); background: color-mix(in srgb, var(--cool) 8%, transparent); }
.detect--cool > b { background: var(--cool); color: var(--c-white); }

/* --- Comfort-first gauge (AgingSoWhat claim) --------------------------- */
.scene--asw { display: grid; place-items: center; gap: var(--sp-3); padding: var(--sp-5); }
.gauge { position: relative; width: 148px; aspect-ratio: 1; display: grid; place-items: center; z-index: 2; }
.gauge__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--secondary) 0 80%, var(--secondary-soft) 80% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 63%, #000 64%);
  mask: radial-gradient(farthest-side, transparent 63%, #000 64%);
}
.gauge__tick { position: absolute; inset: 0; border-radius: 50%; }
.gauge__center { position: relative; text-align: center; z-index: 2; }
.gauge__center b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1; display: block; }
.gauge__center span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.scene--asw .scene__cap { position: relative; z-index: 2; text-align: center; font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); color: var(--text-soft); max-width: 26ch; }
.scene--asw .chip { position: relative; z-index: 2; }

/* --- Marquee ----------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 2px solid var(--line-strong);
  background: var(--c-ink-900);
  color: var(--c-cream-100);
  padding-block: 0.85rem;
}
:root[data-theme="dark"] .marquee { background: #0f0b08; }
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  display: inline-flex; align-items: center; gap: 1.4rem;
  padding-inline: 1.4rem;
}
.marquee__item::after { content: "✦"; color: var(--accent); font-style: normal; font-size: 0.7em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Section heading --------------------------------------------------- */
.sec-head { max-width: 62ch; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: var(--sp-3); }
.sec-head p { margin-top: var(--sp-4); color: var(--text-soft); font-size: var(--fs-md); }

/* --- Grids ------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }
.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 900px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Capability / service tile ----------------------------------------- */
.tile {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 2px solid var(--line);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-bounce), border-color var(--dur-med), background var(--dur-med);
}
.tile:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.tile__num {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem;
  color: var(--text-muted); letter-spacing: 0.1em;
}
.tile__icon {
  --cube-size: 38px;
  margin-block: var(--sp-4) var(--sp-5);
}
.tile h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.tile p { color: var(--text-soft); font-size: var(--fs-sm); }
.tile::after {
  content: ""; position: absolute; right: -30%; top: -60%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft), transparent 70%);
  opacity: 0; transition: opacity var(--dur-slow); pointer-events: none;
}
.tile:hover::after { opacity: 0.7; }

/* --- Project (sponsorship) card ---------------------------------------- */
.project {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-pop);
  transition: transform var(--dur-med) var(--ease-bounce), box-shadow var(--dur-med);
}
.project:hover { transform: translate(-3px, -3px); box-shadow: 8px 9px 0 var(--c-ink-900); }
.project__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.project__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.project__kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.project h3 { font-size: var(--fs-2xl); line-height: 1.05; margin-block: var(--sp-2); }
.project__desc { color: var(--text-soft); font-size: var(--fs-md); }
.project__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-5); border-top: 1.5px dashed var(--line); }
.project__meta { display: flex; gap: var(--sp-5); }
.project__meta div { display: flex; flex-direction: column; }
.project__meta b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 560; line-height: 1; }
.project__meta span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }

/* --- Steps / approach -------------------------------------------------- */
.step { display: flex; gap: var(--sp-4); align-items: flex-start; }
.step__n {
  flex: none;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--c-ink-900); color: var(--c-cream-50);
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  box-shadow: var(--shadow-pop-primary);
}
.step:nth-child(2) .step__n { background: var(--primary); box-shadow: 3px 3px 0 var(--c-ink-900); }
.step:nth-child(3) .step__n { background: var(--secondary); color: #05221b; box-shadow: 3px 3px 0 var(--c-ink-900); }
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.step p { color: var(--text-soft); font-size: var(--fs-sm); }

/* --- Approach: "the loop made literal" (container-query driven) ---------
   Three candy step-cards that flow Explore -> Prototype -> Validate and then
   loop back, echoing the copy ("a loop, not a waterfall"). Reacts to the
   COLUMN width via container queries, so it renders as a 3-across row with a
   return arc in the wide deck column and stacks with a "loop back" chip when
   the column is narrow (mobile / collapsed deck). */
.apA-wrap { container-type: inline-size; font-family: var(--font-body); }

.apA-thesis { max-width: 52ch; margin: 0 0 var(--sp-6); }
.apA-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--primary); margin: 0 0 var(--sp-3);
  display: inline-flex; align-items: center; gap: .6em;
}
.apA-eyebrow::before { content: ""; width: 1.7rem; height: 2px; background: var(--primary); border-radius: 2px; }
.apA-headline {
  font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); color: var(--text); margin: 0 0 var(--sp-4);
  font-size: clamp(1.9rem, 1.35rem + 3cqi, 2.85rem); text-wrap: balance;
}
.apA-em { color: var(--secondary-deep); font-style: italic; }
.apA-intro { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text-soft); margin: 0; }

.apA-cycle { position: relative; }
.apA-loop { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }

.apA-node {
  position: relative; background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-pop);
  --apA-a: var(--accent);
  transition: transform var(--dur-med) var(--ease-bounce), box-shadow var(--dur-med) var(--ease-out);
}
.apA-node--p { --apA-a: var(--primary); }
.apA-node--v { --apA-a: var(--secondary); }
.apA-node::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--apA-a); border-radius: var(--r-md) var(--r-md) 0 0;
}
.apA-badge {
  position: absolute; top: calc(-1 * var(--sp-4)); left: var(--sp-5);
  width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--apA-a); color: var(--c-ink-900); border: 1.5px solid var(--line-strong);
  box-shadow: 3px 3px 0 var(--line-strong); font-family: var(--font-mono); font-weight: 700;
  font-size: var(--fs-sm);
}
.apA-node-title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  line-height: var(--lh-snug); color: var(--text); margin: var(--sp-4) 0 var(--sp-2);
  letter-spacing: var(--tracking-tight);
}
.apA-node-title::after {
  content: ""; display: block; width: 1.6rem; height: 3px; border-radius: 3px;
  background: var(--apA-a); margin-top: var(--sp-2);
}
.apA-node-desc { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-soft); margin: 0; }

/* forward connector chevron — vertical default: points down into the gap */
.apA-node:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: .62rem; height: .62rem; border-right: 2.5px solid var(--line-strong);
  border-bottom: 2.5px solid var(--line-strong); border-radius: 0 0 2px 0;
  transform: translate(-50%, calc(-.5 * var(--sp-5) - .28rem)) rotate(45deg); opacity: .85;
}

/* return: compact loop-back chip (vertical / narrow default) */
.apA-back {
  display: inline-flex; align-items: center; gap: .6em; margin-top: var(--sp-5);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--primary-soft); border: 1.5px solid var(--primary);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--primary-deep);
}
.apA-back svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* return: horizontal in-flow loop-back curve (hidden until row layout) */
.apA-returnh { display: none; }

@container (min-width: 540px) {
  .apA-loop { flex-direction: row; align-items: stretch; gap: var(--sp-5); margin-top: var(--sp-6); }
  .apA-node { flex: 1 1 0; min-width: 0; }
  .apA-node-title { margin-top: var(--sp-3); }
  /* forward chevron points right, sits in the gap between cards */
  .apA-node:not(:last-child)::after {
    left: 100%; top: var(--sp-6);
    transform: translate(calc(.5 * var(--sp-5) - .22rem), 0) rotate(-45deg);
  }
  .apA-back { display: none; }
  .apA-returnh { display: block; position: relative; margin-top: var(--sp-3); }
  .apA-returnh-curve { display: block; width: 100%; height: auto; overflow: visible; }
  .apA-returnh-label {
    position: absolute; left: 50%; top: 82%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
    padding: .2rem .7rem; border-radius: var(--r-pill);
    background: var(--primary-soft); border: 1.5px solid var(--primary);
    font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--primary-deep);
  }
  .apA-returnh-label svg { width: .85rem; height: .85rem; flex: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .apA-node:hover { transform: translate(-2px, -2px); box-shadow: 7px 9px 0 var(--line-strong); }
}

/* --- Tick list --------------------------------------------------------- */
.tick-list { list-style: none; padding: 0; margin-block: var(--sp-4); display: grid; gap: var(--sp-3); }
.tick-list li { position: relative; padding-left: 2rem; color: var(--text-soft); font-size: var(--fs-sm); }
.tick-list li::before {
  content: "✦"; position: absolute; left: 0; top: 0;
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border-radius: 7px; background: var(--secondary-soft); color: var(--secondary-deep);
  font-size: 0.7rem;
}

/* --- Unicorn brand mark / mascot ("Lump") ------------------------------ */
.uni { --uni-size: 34px; width: var(--uni-size); height: var(--uni-size); flex: none; display: inline-block; line-height: 0; }
.uni svg { width: 100%; height: 100%; display: block; overflow: visible; }
.uni--sm { --uni-size: 28px; }
.uni--lg { --uni-size: 76px; }

.uni__spark, .uni__mane, .uni__eye { transform-box: fill-box; }
.uni__spark { transform-origin: center; animation: uni-twinkle 2.4s var(--ease-out) infinite; }
.uni__mane { transform-origin: 60% 90%; animation: uni-sway 3.6s ease-in-out infinite; }
.uni__eye { transform-origin: center; animation: uni-blink 5s var(--ease-out) infinite; }
.uni__svg { transform-box: fill-box; transform-origin: bottom center; }

/* gentle idle bob on interactive/mascot placements */
.uni--bob svg, a:hover > .uni svg, .brand:hover .uni svg {
  animation: uni-bob 2.6s ease-in-out infinite;
}

@keyframes uni-twinkle {
  0%, 100% { transform: scale(0.5) rotate(0deg); opacity: 0.35; }
  50% { transform: scale(1.15) rotate(45deg); opacity: 1; }
}
@keyframes uni-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes uni-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.15); } }
@keyframes uni-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }

@media (prefers-reduced-motion: reduce) {
  .uni__spark, .uni__mane, .uni__eye, .uni__svg, .uni--bob svg { animation: none !important; }
}

/* --- Chat interface ---------------------------------------------------- */
.chat {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  max-height: 560px;
}
.chat > .chat__head { border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); overflow: hidden; }
.chat > .chat__foot { border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }
.chat__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 2px solid var(--line);
  background: var(--surface-2);
}
.chat__id { display: flex; flex-direction: column; line-height: 1.2; }
.chat__id b { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); }
.chat__id span { font-size: 0.72rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); letter-spacing: 0.04em; }
.chat__id .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary-deep); box-shadow: 0 0 0 0 var(--secondary); animation: pulse 1.8s var(--ease-out) infinite; }
.chat__reset { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); background: none; border: 0; cursor: pointer; padding: 0.3em; text-transform: uppercase; letter-spacing: 0.08em; }
.chat__reset:hover { color: var(--primary); }

.chat__window {
  flex: 1; min-height: 240px; overflow-y: auto;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  scroll-behavior: smooth;
}
.msg { display: flex; gap: var(--sp-3); align-items: flex-end; max-width: 88%; }
.msg__bubble {
  padding: 0.75rem 1rem;
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  line-height: 1.5;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
}
.msg--bot .msg__bubble { border-bottom-left-radius: var(--r-xs); }
.msg--user { margin-left: auto; flex-direction: row-reverse; }
.msg--user .msg__bubble { background: var(--primary); color: var(--c-white); border-color: transparent; border-bottom-right-radius: var(--r-xs); }
.msg__bubble b { font-weight: 700; }
.msg__bubble .agent-line { display: flex; align-items: center; gap: 0.5em; margin-top: 0.5em; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.msg__bubble .agent-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--secondary-deep); }
.msg--enter { animation: msgin var(--dur-med) var(--ease-bounce); }
@keyframes msgin { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* typing indicator */
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 0.35rem 0.15rem; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: typing 1.2s var(--ease-out) infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* reserve button inside a bubble */
.msg__reserve {
  margin-top: 0.7em;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 700; font-size: 0.82rem;
  padding: 0.55em 1em; border-radius: var(--r-pill);
  background: var(--c-ink-900); color: var(--c-cream-50);
  border: 0; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.msg__reserve:hover { transform: translateY(-2px); }
.msg__reserve[disabled] { background: var(--secondary); color: #05221b; cursor: default; transform: none; }

/* suggestions + input */
.chat__foot { border-top: 2px solid var(--line); padding: var(--sp-4) var(--sp-5); background: var(--surface); }
.chat__suggest { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.suggest {
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  padding: 0.5em 0.9em; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1.5px solid var(--line); color: var(--text-soft);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-bounce), background var(--dur-fast);
}
.suggest:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.chat__form { display: flex; gap: var(--sp-2); }
.chat__field {
  flex: 1; padding: 0.85em 1.1em; border-radius: var(--r-pill);
  border: 2px solid var(--line); background: var(--surface-2); color: var(--text); font-size: var(--fs-sm);
}
.chat__field:focus-visible { border-color: var(--focus-ring); }
.chat__disclaimer { margin-top: var(--sp-3); font-size: 0.72rem; line-height: 1.4; color: var(--text-muted); text-align: center; }
.chat__send {
  flex: none; width: 3rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--primary); color: var(--c-white); border: 0; cursor: pointer;
  font-size: 1.1rem; display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease-bounce), background var(--dur-fast);
}
.chat__send:hover { transform: scale(1.08) rotate(-8deg); background: var(--primary-deep); }

@media (prefers-reduced-motion: reduce) {
  .typing i { animation: none !important; }
}

/* --- Founder (B&W portrait + colourful animated ring) ------------------ */
.founder { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
@media (max-width: 720px) { .founder { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.founder__portrait { position: relative; width: clamp(160px, 22vw, 232px); aspect-ratio: 1; flex: none; }
.founder__ring {
  position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--primary), var(--accent), var(--secondary), var(--cool), var(--primary));
  animation: founder-spin 9s linear infinite;
  filter: saturate(1.1);
}
.founder__ring::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg);
}
@keyframes founder-spin { to { transform: rotate(360deg); } }

.founder__photo {
  position: absolute; inset: 10px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
}
.founder__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.founder__portrait:hover .founder__photo img { filter: grayscale(0) contrast(1); transform: scale(1.04); }
.founder__photo.is-empty { background: linear-gradient(150deg, var(--c-ink-800), var(--c-ink-900)); }
.founder__mono {
  display: none;
  font-family: var(--font-display); font-weight: 560; font-size: clamp(2.5rem, 6vw, 3.6rem);
  color: var(--c-cream-50); letter-spacing: -0.03em;
}
.founder__photo.is-empty .founder__mono { display: block; }

/* little sparkle riding the ring */
.founder__portrait::after {
  content: "✦"; position: absolute; top: -2px; left: 50%; z-index: 2;
  color: var(--accent); font-size: 1.1rem;
  transform: translateX(-50%);
  animation: uni-twinkle 2.6s var(--ease-out) infinite;
}
.founder__text .btn { margin-top: var(--sp-5); }
@media (prefers-reduced-motion: reduce) {
  .founder__ring { animation: none; }
  .founder__portrait::after { animation: none; }
}

/* Compact horizontal strip variant (sits right after the marquee) */
.founder-strip { padding-block: clamp(1.75rem, 4vw, 3rem); border-bottom: 1.5px dashed var(--line); }
.founder--compact { grid-template-columns: auto 1fr; align-items: center; gap: clamp(1.25rem, 4vw, 3rem); }
.founder--compact .founder__portrait { width: clamp(108px, 13vw, 150px); }
.founder--compact h2 { font-family: var(--font-display); font-weight: 560; font-size: var(--fs-xl); line-height: 1; margin-top: var(--sp-2); letter-spacing: var(--tracking-tight); }
.founder--compact .founder__bio { margin-top: var(--sp-3); max-width: 64ch; color: var(--text-soft); font-size: var(--fs-md); line-height: 1.5; }
.founder--compact .founder__bio b { color: var(--text); }
.founder--compact .link { margin-top: var(--sp-4); }
@media (max-width: 720px) { .founder--compact { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* --- CTA band ---------------------------------------------------------- */
.cta {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--c-ink-900);
  color: var(--c-cream-50);
  padding: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  text-align: center;
}
:root[data-theme="dark"] .cta { background: #0f0b08; border: 2px solid var(--line); }
/* the CTA card is always dark — links inside must not inherit the page text color */
.cta .link { color: var(--c-cream-50); }
.cta .link:hover { color: var(--secondary); }
.cta h2 { color: var(--c-cream-50); font-size: var(--fs-3xl); }
.cta p { color: var(--c-cream-300); margin-top: var(--sp-4); max-width: 48ch; margin-inline: auto; }
.cta__grid { position: absolute; inset: 0; opacity: 0.5; }

/* --- Form field -------------------------------------------------------- */
.field-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-6); }
.field {
  flex: 1 1 260px;
  max-width: 360px;
  padding: 1em 1.3em;
  border-radius: var(--r-pill);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast);
}
.field::placeholder { color: var(--text-muted); }
.field:focus-visible { border-color: var(--focus-ring); }
.field--area {
  flex-basis: 100%;
  max-width: none;
  min-height: 7.5em;
  resize: vertical;
  border-radius: var(--r-lg);
  font-family: inherit;
  line-height: 1.5;
}
.contact-fields { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; width: 100%; max-width: 640px; }
.contact-fields .field { max-width: none; }
.contact-error { color: var(--c-raspberry-soft); font-size: var(--fs-sm); margin-top: var(--sp-3); }
.cta .field { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); color: var(--c-cream-50); }
.cta .field::placeholder { color: var(--c-cream-400); }

/* --- Blog / journal card ----------------------------------------------- */
.post {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.post__cover {
  background:
    radial-gradient(circle at 25% 30%, var(--accent) 0 12%, transparent 12.5%),
    radial-gradient(circle at 70% 65%, var(--secondary) 0 16%, transparent 16.5%),
    radial-gradient(circle at 85% 20%, var(--cool) 0 8%, transparent 8.5%),
    linear-gradient(135deg, var(--primary), var(--primary-deep));
  min-height: 240px;
  position: relative;
}
.post__cover .cube { position: absolute; right: 8%; bottom: 12%; --cube-size: 72px; }
.post__body { padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; }
.post__meta { display: flex; gap: var(--sp-3); align-items: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.05em; }
.post h3 { font-size: var(--fs-2xl); line-height: 1.05; }
@media (max-width: 720px) { .post { grid-template-columns: 1fr; } .post__cover { min-height: 160px; } }

/* --- Footer ------------------------------------------------------------ */
.site-footer { border-top: 2px solid var(--line-strong); background: var(--bg-elevated); padding-block: var(--sp-8) var(--sp-6); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__col h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: var(--sp-4); }
.footer__col a { display: block; color: var(--text-soft); font-weight: 500; padding-block: 0.3em; transition: color var(--dur-fast), transform var(--dur-fast); }
.footer__col a:hover { color: var(--primary); transform: translateX(3px); }
.footer__colofon {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1.5px dashed var(--line);
}
.footer__legal-info { font-style: normal; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-soft); }
.footer__legal-info a { color: var(--text-soft); text-decoration: underline; text-decoration-color: var(--line); }
.footer__legal-info a:hover { color: var(--primary); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.footer__legal-links a { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.footer__legal-links a:hover { color: var(--primary); }

/* placeholder marker — obvious "fill me in" styling; delete .ph wrapper once filled */
.ph {
  font-family: var(--font-mono); font-size: 0.85em;
  color: var(--accent-deep, #915005);
  background: var(--accent-soft);
  padding: 0.05em 0.3em; border-radius: 4px;
  text-decoration: none;
}
:root[data-theme="dark"] .ph { color: var(--accent); }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1.5px dashed var(--line);
  font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono);
}

/* --- Divider dots ------------------------------------------------------ */
.dot-row { display: flex; gap: 0.4rem; }
.dot-row i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-row i:nth-child(1) { background: var(--primary); }
.dot-row i:nth-child(2) { background: var(--secondary); }
.dot-row i:nth-child(3) { background: var(--accent); }

/* --- Reveal on load / scroll ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Respect reduced-motion for ALL decorative loops -------------------
   The token durations already zero transitions; these infinite animations
   use fixed durations, so stop them explicitly. */
@media (prefers-reduced-motion: reduce) {
  .cube--spin, .float, .float--2, .float--3,
  .marquee__track, .chip--live .dot,
  .scene__scan, .scene__tag .dot {
    animation: none !important;
  }
}

/* --- Scrollytelling: sticky graphic + scrolling caption steps ---------- */
.scrolly__intro { max-width: 60ch; margin-bottom: var(--sp-6); }
.scrolly__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.scrolly__rail { min-width: 0; }
.scrolly__step { min-height: 84vh; display: flex; align-items: center; }
.scrolly__step:first-child { min-height: 62vh; }
.scrolly__step:last-child { min-height: 72vh; }
.scrolly__card {
  background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-pop);
  opacity: 0.4; transform: translateY(14px) rotate(-1.2deg);
  transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-bounce);
}
.scrolly__step.is-active .scrolly__card { opacity: 1; transform: rotate(-1.2deg); }
.scrolly__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.scrolly__card h3 { font-size: var(--fs-lg); margin: 0.35rem 0 0.45rem; }
.scrolly__card p { color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.55; }
.scrolly__card .chip { margin-top: var(--sp-3); }
.scrolly__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.scrolly__viz {
  width: 100%; border-radius: var(--r-xl); overflow: hidden;
  border: 2px solid var(--line-strong); box-shadow: var(--shadow-lg);
  background: var(--bg-elevated);
}
.scrolly__viz svg { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
  .scrolly__inner { grid-template-columns: 1fr; }
  .scrolly__sticky { position: sticky; top: 58px; height: auto; margin-bottom: var(--sp-5); }
  .scrolly__step { min-height: 58vh; }
}
@media (prefers-reduced-motion: reduce) {
  .scrolly__sticky { position: static; height: auto; }
  .scrolly__step { min-height: 0; margin-bottom: var(--sp-5); }
  .scrolly__card { opacity: 1; transform: none; }
}

/* generic viz layer transitions */
.vlayer { transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }

/* Vision Zero viz — layer visibility per active step */
.vzviz .vl-map, .vzviz .vl-street, .vzviz .vl-ride, .vzviz .vl-detect, .vzviz .vl-scan, .vzviz .vl-report { opacity: 0; }
.vzviz[data-active="0"] .vl-map { opacity: 1; }
.vzviz[data-active="1"] .vl-street { opacity: 1; }
.vzviz[data-active="2"] .vl-street, .vzviz[data-active="2"] .vl-ride { opacity: 1; }
.vzviz[data-active="3"] .vl-street, .vzviz[data-active="3"] .vl-detect, .vzviz[data-active="3"] .vl-scan { opacity: 1; }
.vzviz[data-active="4"] .vl-street, .vzviz[data-active="4"] .vl-report { opacity: 1; }
.vzviz.show-all .vl-street, .vzviz.show-all .vl-detect, .vzviz.show-all .vl-report { opacity: 1; }
.vzviz .vl-detect { transform: scale(0.96); }
.vzviz[data-active="3"] .vl-detect, .vzviz.show-all .vl-detect { transform: none; }
.vl-scan { animation: vz-scanline 3s var(--ease-out) infinite; }
@keyframes vz-scanline { 0% { transform: translateY(0); } 50% { transform: translateY(150px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .vl-scan { animation: none; opacity: 0 !important; } }

/* AgingSoWhat viz — "The Kind Curve" */
.aswviz .vl-chairs, .aswviz .vl-testcurve, .aswviz .vl-comfort, .aswviz .vl-library, .aswviz .vl-success { opacity: 0; }
.aswviz[data-active="0"] .vl-chairs { opacity: 1; }
.aswviz[data-active="1"] .vl-testcurve { opacity: 1; }
.aswviz[data-active="2"] .vl-comfort { opacity: 1; }
.aswviz[data-active="3"] .vl-library { opacity: 1; }
.aswviz[data-active="4"] .vl-success { opacity: 1; }
.aswviz.show-all .vl-comfort { opacity: 1; }
.aswviz .draw { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--ease-out); }
.aswviz[data-active="1"] .vl-testcurve .draw,
.aswviz[data-active="2"] .vl-comfort .draw,
.aswviz.show-all .vl-comfort .draw { stroke-dashoffset: 0; }
.aswviz .lib-dot { animation: asw-pop 0.5s var(--ease-bounce) both; }
@keyframes asw-pop { from { transform: scale(0); } to { transform: scale(1); } }
.aswviz .petal { animation: asw-float 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes asw-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .aswviz .lib-dot, .aswviz .petal { animation: none; } .aswviz .draw { transition: none; stroke-dashoffset: 0; } }

/* --- Prose (legal / long-form pages) ----------------------------------- */
.prose { max-width: var(--container-narrow); }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.prose p, .prose li { color: var(--text-soft); font-size: var(--fs-md); }
.prose p { margin-bottom: var(--sp-4); }
.prose ul { padding-left: 1.3rem; margin-bottom: var(--sp-4); display: grid; gap: var(--sp-2); }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.15em; }
.prose__note {
  border: 2px dashed var(--accent); background: var(--accent-soft);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6);
  font-size: var(--fs-sm); color: #6b3d02;
}
:root[data-theme="dark"] .prose__note { color: var(--accent); }

/* Swatch (styleguide) */
.swatch { border-radius: var(--r-md); border: 2px solid var(--line); overflow: hidden; }
.swatch__chip { height: 84px; }
.swatch__meta { padding: 0.7rem 0.85rem; background: var(--surface); }
.swatch__meta b { display: block; font-size: var(--fs-sm); }
.swatch__meta code { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }