/* CPS Lab — visual identity
 * Primary dark marine #0F172A · Graphite #1F2937
 * Technical blue #2563EB · Precision turquoise #14B8A6
 * Steel gray #94A3B8 · Light bg #F8FAFC · Warning amber #F59E0B
 */

:root {
  --c-bg: #0F172A;
  --c-bg-2: #0B1220;
  --c-bg-3: #1E293B;
  --c-graphite: #1F2937;
  --c-line: #243144;
  --c-line-soft: #182234;
  --c-blue: #2563EB;
  --c-blue-soft: #3B82F6;
  --c-turq: #14B8A6;
  --c-steel: #94A3B8;
  --c-steel-2: #CBD5E1;
  --c-light: #F8FAFC;
  --c-amber: #F59E0B;

  --font-sans: "Inter", "Suisse Int'l", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4vw, 56px);
  --max: 1200px;
}

@supports (font-variation-settings: normal) {
  :root { --font-sans: "Inter var", "Suisse Int'l", ui-sans-serif, -apple-system, sans-serif; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-bg);
  color: var(--c-steel-2);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;  /* containing block for the floating .partners post-it */
}
a { color: var(--c-blue-soft); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--c-turq); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--c-light); font-weight: 500; letter-spacing: -0.01em; margin: 0; }

/* --- Top bar --- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 18, 32, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line-soft);
}
.topbar__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topbar__brand {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--c-light);
  text-decoration: none;
}
.topbar__brand:hover { color: var(--c-light); }
.topbar__sep {
  color: var(--c-line);
  font-size: 18px;
  font-weight: 300;
  user-select: none;
}
.topbar__partner {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--c-steel);
  transition: color .15s ease;
}
.topbar__partner-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-steel);
  white-space: nowrap;
}
.topbar__partner img {
  height: 22px;
  width: auto;
  max-width: none;
  opacity: 0.85;
  transition: opacity .15s ease;
}
.topbar__partner:hover img { opacity: 1; }

/* Hide the institutional caption on narrow screens; keep the logo */
@media (max-width: 880px) {
  .topbar__sep,
  .topbar__partner-label { display: none; }
}
@media (max-width: 500px) {
  .topbar__partner { display: none; }
}
.topbar__nav { display: flex; gap: 24px; }
.topbar__nav a {
  color: var(--c-steel);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.topbar__nav a:hover { color: var(--c-light); }
/* GitHub mark: sits with the text links and brightens on hover like them. */
.topbar__github { display: inline-flex; align-items: center; }
.topbar__github svg { display: block; }

/* hamburger button */
.topbar__burger {
  display: none;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 3px;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.topbar__burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--c-light);
  transition: transform .15s ease, opacity .15s ease;
}
.topbar.is-open .topbar__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.topbar.is-open .topbar__burger span:nth-child(2) { opacity: 0; }
.topbar.is-open .topbar__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* The five nav labels plus the two-line lab identity stop fitting on one row
   somewhere below ~900px (they collide and "Doctoral research" wraps), so the
   burger takes over from there down — tablets included. */
@media (max-width: 900px) {
  .topbar__burger { display: flex; }
  .topbar__nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--c-bg-2);
    border-bottom: 1px solid var(--c-line-soft);
    padding: 8px var(--gutter) 16px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }
  .topbar.is-open .topbar__nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .topbar__nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--c-line-soft);
    font-size: 15px;
  }
  .topbar__nav a:last-child { border-bottom: none; }
}

/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--c-line-soft);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--c-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 40%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(20px, 2.6vw, 36px) var(--gutter) clamp(20px, 2.6vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.hero__logo {
  height: clamp(96px, 13vw, 160px);
  width: auto;
  margin: 0;
  display: block;
  flex-shrink: 0;
}
.hero__text { flex: 1; min-width: 0; }
@media (max-width: 720px) {
  .hero__inner { flex-direction: column; align-items: flex-start; }
}
.hero__title {
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--c-light);
  margin: 0 0 10px;
  max-width: 16ch;
}
.hero__lede {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--c-steel-2);
  max-width: 60ch;
  line-height: 1.5;
  margin: 0;
}

/* --- Section base --- */
.section {
  padding: clamp(20px, 2.4vw, 36px) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.section--alt { background: var(--c-bg-2); }
.section--cta {
  text-align: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(37, 99, 235, 0.16), transparent 70%),
    var(--c-bg);
}
.section__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section__head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
}
.section__head h2 { font-size: clamp(22px, 2.8vw, 30px); }
.section__intro {
  max-width: 70ch;
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--c-steel-2);
  line-height: 1.55;
}
.section__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-blue-soft);
  letter-spacing: 0.16em;
}
.section__head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.two-col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
}
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 28px; } }
.lede {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--c-light);
  font-weight: 400;
}
.muted { color: var(--c-steel); }
.small { font-size: 13.5px; }

/* --- Use cases --- */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
@media (max-width: 900px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cases { grid-template-columns: 1fr; } }
.case {
  background: var(--c-bg-2);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background .2s ease;
}
.case__tag { margin-bottom: 4px; }
.case h3 { font-size: 17px; }
.case p { font-size: 14.5px; }
.case:hover { background: var(--c-bg-3); }
.case__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-turq);
  display: inline-block;
  margin-bottom: 14px;
}
.case h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-light);
}
.case p {
  color: var(--c-steel-2);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
}

/* --- Matrix / amplified table --- */
.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--c-steel-2);
}
.matrix th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-turq);
  font-weight: 500;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-line);
}
.matrix td {
  padding: 22px 18px;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: top;
  line-height: 1.5;
}
.matrix td:first-child {
  color: var(--c-light);
  font-weight: 500;
  width: 14%;
  white-space: nowrap;
}
.matrix td:nth-child(2) {
  color: var(--c-steel);
  width: 36%;
}
.matrix tbody tr:last-child td { border-bottom: none; }
@media (max-width: 760px) {
  .matrix, .matrix thead, .matrix tbody, .matrix tr, .matrix td, .matrix th { display: block; }
  .matrix thead { display: none; }
  .matrix td { padding: 8px 0; border: none; width: auto !important; white-space: normal !important; }
  .matrix tr { padding: 20px 0; border-bottom: 1px solid var(--c-line-soft); }
  .matrix td:first-child {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--c-turq); font-weight: 500;
    margin-bottom: 6px;
  }
}

.max-60 { max-width: 60ch; margin-bottom: 48px; }
em { font-style: italic; color: var(--c-light); }

/* --- Partners post-it (floating, top-right) --- */
.partners {
  flex: 0 0 clamp(220px, 24vw, 300px);
  align-self: center;
  margin-left: auto;
}
.partners__inner {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line-soft);
  border-left: 2px solid var(--c-turq);
  padding: 16px 18px 18px;
}
.partners__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-turq);
  margin-bottom: 8px;
}
.partners p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-steel-2);
}
.partners a {
  color: var(--c-blue-soft);
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.partners a:hover { color: var(--c-turq); border-color: currentColor; }
.partners strong { color: var(--c-light); font-weight: 500; }
.partners__ltu {
  display: block;
  margin: 14px auto 4px;
  width: max-content;
  border-bottom: none !important;
  line-height: 0;
}
.partners__ltu img {
  width: 150px !important;
  height: 76px !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
  opacity: 0.92;
}
.partners__ltu:hover img { opacity: 1; }

/* Mobile: stack below the hero text, no rotation */
@media (max-width: 720px) {
  .partners {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 18px;
    max-width: 480px;
    align-self: flex-start;
  }
  .partners__inner { transform: none; }
  .partners__inner:hover { transform: none; }
  .partners__inner::before { display: none; }
}

/* --- Stack figure (SVG architecture diagram) --- */
.stack-fig {
  margin: 0;
  padding: 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-soft);
}
.stack-fig svg {
  width: 100%;
  height: auto;
  display: block;
}
.stack-fig svg .layer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  fill: var(--c-steel);
}
.stack-fig svg .layer-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  fill: var(--c-light);
}
.stack-fig svg .layer-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--c-steel);
}
.stack-fig svg .chip-t {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--c-steel-2);
}
.stack-fig svg .chip-t--hi {
  fill: var(--c-light);
  font-weight: 500;
}
.stack-fig figcaption {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel);
  text-align: center;
}

/* --- (legacy) Stack list layers — kept for compat --- */
.stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
}
.stack__layer {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--c-line-soft);
  position: relative;
  transition: background .2s ease;
}
.stack__layer:last-child { border-bottom: none; }
.stack__layer::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c-line);
  transition: background .2s ease;
}
.stack__layer:hover { background: var(--c-bg-3); }
.stack__layer:hover::before { background: var(--c-blue); }

.stack__layer--users::before    { background: var(--c-turq); }
.stack__layer--agents::before   { background: var(--c-blue); }
.stack__layer--meta::before     { background: var(--c-blue-soft); }
.stack__layer--infra::before    { background: var(--c-steel); }
.stack__layer--sensing::before  { background: var(--c-graphite); }

.stack__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-steel);
}
.stack__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stack__body strong {
  color: var(--c-light);
  font-weight: 500;
  font-size: 17px;
}
.stack__body span:not(.chip) {
  color: var(--c-steel-2);
  font-size: 14.5px;
}
.stack__body--chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-block;
  padding: 6px 12px;
  background: var(--c-bg-3);
  border: 1px solid var(--c-line);
  color: var(--c-steel-2);
  font-size: 13px;
  border-radius: 2px;
  letter-spacing: 0.005em;
}
.chip--accent {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.45);
  color: var(--c-light);
  font-weight: 500;
}
.stack__note {
  margin-top: 28px;
  max-width: 80ch;
  line-height: 1.55;
}
.stack__note strong { color: var(--c-light); }

@media (max-width: 640px) {
  .stack__layer { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px 18px 22px; }
  .stack__label { margin-bottom: 2px; }
}

/* --- Apps (screenshot grid) --- */
.apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px) { .apps { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 560px) { .apps { grid-template-columns: 1fr; gap: 14px; } }
.app {
  margin: 0;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.app:hover { border-color: var(--c-blue); transform: translateY(-2px); }
.app__shot {
  display: block;
  overflow: hidden;
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-line);
}
.app__shot img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .25s ease;
}
.app:hover .app__shot img { transform: scale(1.015); }
.app figcaption {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-turq);
  margin-bottom: 4px;
}
.app h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-light);
  margin: 0;
}
.app p {
  font-size: 13.5px;
  color: var(--c-steel);
  margin: 0;
  line-height: 1.5;
}

/* --- Features --- */
.features {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.features li {
  background: var(--c-bg);
  padding: 14px 18px 16px;
  position: relative;
}
.features h3 { margin-bottom: 6px; font-size: 15px; }
.features p { font-size: 13.5px; }
.features li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--c-blue);
}
.features h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--c-light);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.features p {
  margin: 0;
  color: var(--c-steel);
  font-size: 14.5px;
  line-height: 1.55;
}

/* --- CTA --- */
.section--cta h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.section--cta .lede {
  max-width: 50ch;
  margin: 0 auto 36px;
}
.cta {
  display: inline-block;
  padding: 14px 32px;
  background: var(--c-blue);
  color: var(--c-light);
  font-weight: 500;
  border-radius: 2px;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  transition: background .15s ease;
}
.cta:hover { background: var(--c-blue-soft); color: var(--c-light); }

/* --- Footer --- */
.footer {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-line-soft);
  color: var(--c-steel);
}
.footer__logos {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gutter) 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.footer__logo-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  text-decoration: none;
}
.footer__wordmark {
  /* match colonyos.io wordmark: Exo Bold */
  font-family: "Exo", var(--font-sans);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.005em;
  color: var(--c-light);
  transition: color .15s ease;
}
.footer__logo-link--wordmark:hover .footer__wordmark { color: var(--c-turq); }
.footer__logo {
  display: block;
  height: clamp(48px, 8vw, 88px);
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity .15s ease;
}
.footer__logo-link:hover .footer__logo { opacity: 1; }

.footer__contact {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) 16px;
  display: flex;
  justify-content: center;
}
.footer__contact-label { font-size: 14px; color: var(--c-steel); }
.footer__email { font-size: 14px; color: var(--c-steel-2); }
.footer__email:hover { color: var(--c-turq); }

.footer__bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--gutter) 14px;
  border-top: 1px solid var(--c-line-soft);
  display: flex; justify-content: space-between; gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-steel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .footer__logos {
    justify-content: space-around;
    gap: 16px;
  }
  .footer__contact { justify-content: center; padding-bottom: 18px; }
}

.footer__legal { display: flex; gap: 16px; align-items: center; }
.footer__legal a,
.footer__legal-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.footer__legal a:hover,
.footer__legal-btn:hover { color: var(--c-turq); }

/* --- GDPR consent dialog --- */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; justify-content: center;
  padding: var(--gutter);
  pointer-events: none;
}
.consent[hidden] { display: none; }
.consent__card {
  pointer-events: auto;
  max-width: 560px; width: 100%;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  transform: translateY(16px); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.consent.is-open .consent__card { transform: translateY(0); opacity: 1; }
.consent__title {
  font-size: 16px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.consent__title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-turq); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18);
}
.consent__body { font-size: 14px; line-height: 1.6; color: var(--c-steel-2); margin: 0 0 18px; }
.consent__actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.consent__btn {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 10px 22px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--c-line); transition: all .15s ease;
}
/* Decline is given equal visual weight to Accept (GDPR requirement). */
.consent__btn--ghost { background: transparent; color: var(--c-steel-2); }
.consent__btn--ghost:hover { border-color: var(--c-steel); color: var(--c-light); }
.consent__btn--primary {
  background: var(--c-blue); border-color: var(--c-blue); color: #fff;
}
.consent__btn--primary:hover { background: var(--c-blue-soft); border-color: var(--c-blue-soft); }
@media (max-width: 640px) {
  .consent__actions { justify-content: stretch; }
  .consent__btn { flex: 1; }
}

/* --- Document pages (privacy) --- */
.doc { max-width: 760px; }
.doc__updated {
  font-family: var(--font-mono); font-size: 12px; color: var(--c-steel);
  text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 24px;
}
.doc h3 { font-size: 18px; margin: 32px 0 10px; color: var(--c-light); }
.doc p { margin: 0 0 14px; }
.doc code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--c-bg-3); border: 1px solid var(--c-line);
  border-radius: 4px; padding: 1px 5px; color: var(--c-steel-2);
}
.doc__list { margin: 0 0 14px; padding-left: 20px; }
.doc__list li { margin-bottom: 10px; }
.doc__table {
  width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px;
}
.doc__table th, .doc__table td {
  text-align: left; padding: 8px 12px; border: 1px solid var(--c-line);
}
.doc__table th { background: var(--c-bg-3); color: var(--c-light); font-weight: 500; }
.doc__attr { font-size: 12px; color: var(--c-steel); margin-top: 28px; }

/* legacy compat */
.label { display: none; }

/* ─────────  CPS Lab additions (appended)  ───────── */

/* Hero: brand eyebrow + action buttons */
.hero__brand {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-turq);
  margin-bottom: 10px;
}
.hero__title { max-width: 22ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.cta--sm { padding: 11px 24px; font-size: 14.5px; }
.cta--ghost {
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-steel-2);
}
.cta--ghost:hover {
  background: var(--c-bg-3);
  border-color: var(--c-blue);
  color: var(--c-light);
}

/* Card grid variant: four compact cards */
.cases--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .cases--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .cases--four { grid-template-columns: 1fr; } }

/* "Selected result" line pinned to the bottom of a card */
.case p.case__result {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-steel);
}
.case__result span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-blue-soft);
  margin-bottom: 5px;
}

/* Emphasis inside a section intro */
.section__intro strong { color: var(--c-light); font-weight: 500; }

/* Closing note with an inline call to action */
.section__note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 22px 0 4px;
  font-size: 16px;
  color: var(--c-light);
}

/* Footer disclosure + funding acknowledgement */
.footer__notes {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) 14px;
  text-align: center;
}
.footer__note {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-steel);
}
.footer__note:last-child { margin-bottom: 0; }

/* Three-card grids at the two-column breakpoint: let the lone last card
   span both columns instead of leaving an empty cell. */
@media (min-width: 521px) and (max-width: 900px) {
  .cases > .case:nth-child(3):last-child { grid-column: span 2; }
}

/* Research grid: four full-length cards, 2×2 at wide widths.
   (.cases--four packs four compact cards on one row; these cards carry more
   text, so they read better in two columns.) */
.cases--2up { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .cases--2up { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   HERO — "the thinking continuum"
   A full-bleed canvas scene sits behind the copy; a two-axis scrim keeps
   the text at full contrast while the right side of the frame stays open
   for the animation. Everything below the fold is untouched.
   ══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 76vh, 760px);
  overflow: hidden;
  isolation: isolate;
  /* static fallback if the canvas never paints (no JS, old browser) */
  background:
    radial-gradient(ellipse 70% 46% at 62% 30%, rgba(20, 184, 166, 0.16), transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(37, 99, 235, 0.14), transparent 66%),
    linear-gradient(180deg, #0a1120 0%, #0b1220 44%, #070c16 100%);
}

/* the old CSS lattice is replaced by the canvas ground plane */
.hero__grid { display: none; }

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(9, 14, 26, 0.94) 0%,
      rgba(9, 14, 26, 0.86) 30%,
      rgba(9, 14, 26, 0.46) 56%,
      rgba(9, 14, 26, 0.06) 78%,
      rgba(9, 14, 26, 0) 100%),
    linear-gradient(180deg,
      rgba(9, 14, 26, 0.72) 0%,
      rgba(9, 14, 26, 0.10) 20%,
      rgba(9, 14, 26, 0) 55%,
      rgba(9, 14, 26, 0.55) 88%,
      rgba(9, 14, 26, 0.86) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(40px, 7vh, 92px) var(--gutter);
}

.hero__text { max-width: 62ch; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-turq);
  margin-bottom: 18px;
}
.hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-turq);
  box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.55);
  animation: hero-beacon 2.6s ease-out infinite;
}
@keyframes hero-beacon {
  0%   { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(20, 184, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}

.hero .hero__title {
  font-size: clamp(40px, 6.6vw, 82px);
  line-height: 0.98;
  font-weight: 200;
  letter-spacing: -0.038em;
  color: #F4F9FF;
  max-width: none;
  margin: 0 0 22px;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(3, 8, 18, 0.9);
}
.hero__accent {
  background: linear-gradient(96deg, #7DD3FC 0%, #2DD4BF 46%, #FBBF24 118%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
}
/* if background-clip:text is unsupported the word simply stays turquoise */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__accent { color: var(--c-turq); background: none; }
}

.hero .hero__lede {
  font-size: clamp(15.5px, 1.28vw, 19px);
  line-height: 1.62;
  color: #C3D2E4;
  max-width: 54ch;
  margin: 0;
  text-shadow: 0 1px 22px rgba(3, 8, 18, 0.85);
}
.hero__lede a {
  color: #8DD9F0;
  border-bottom: 1px solid rgba(141, 217, 240, 0.32);
  transition: color .15s ease, border-color .15s ease;
}
.hero__lede a:hover { color: var(--c-turq); border-color: currentColor; }

@media (max-width: 900px) {
  .hero { min-height: clamp(480px, 68vh, 640px); }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(9,14,26,0.94) 0%, rgba(9,14,26,0.80) 52%, rgba(9,14,26,0.34) 100%),
      linear-gradient(180deg, rgba(9,14,26,0.70) 0%, rgba(9,14,26,0.15) 24%, rgba(9,14,26,0.55) 100%);
  }
  .hero__text { max-width: none; }
}
@media (max-width: 560px) {
  .hero { min-height: 460px; }
  .hero .hero__title { font-size: clamp(34px, 10vw, 46px); }
  .hero .hero__lede { font-size: 15px; line-height: 1.58; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow::before { animation: none; }
}

/* Two-line lab identity in the top bar */
.topbar__brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}
.topbar__brand-name { font-size: 16px; font-weight: 600; color: var(--c-light); }
.topbar__brand-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-steel);
  font-weight: 400;
}
@media (max-width: 420px) {
  .topbar__brand-sub { display: none; }
}

/* On a phone the copy owns most of the frame, so the hero grows a little
   and the scrim opens up the lower third — enough of the scene shows under
   the text for the machines to be part of the page rather than a rumour. */
@media (max-width: 620px) {
  .hero {
    min-height: 640px;
    align-items: flex-start;
  }
  .hero__inner { padding-top: clamp(28px, 5vh, 44px); padding-bottom: 0; }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(9, 14, 26, 0.93) 0%,
      rgba(9, 14, 26, 0.90) 54%,
      rgba(9, 14, 26, 0.52) 72%,
      rgba(9, 14, 26, 0.28) 84%,
      rgba(9, 14, 26, 0.62) 100%);
  }
}

/* eyebrow link keeps the eyebrow look */
.hero__eyebrow a { color: inherit; text-decoration: none; }
.hero__eyebrow a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE PASS — phones and tablets
   Everything below is scoped to ≤900px (or is layout-neutral on desktop),
   so the 16:9 desktop design is untouched.
   ══════════════════════════════════════════════════════════════════════ */

/* iOS Safari inflates text in landscape unless this is pinned. */
html { -webkit-text-size-adjust: 100%; }

/* Nothing may push the page wider than the viewport at any width. */
body { overflow-wrap: break-word; }

/* The topbar identity must yield before the burger does. */
.topbar__left { flex: 1 1 auto; }
.topbar__burger { flex: 0 0 auto; }

/* Reserve the screenshot's aspect box so a figure never collapses to a bare
   caption while a multi-megabyte PNG is still in flight. */
.app__shot { aspect-ratio: 3462 / 2780; }
.app__shot picture { display: block; width: 100%; height: 100%; }
.footer__logo-link picture { display: flex; }
.app__shot img { width: 100%; height: 100%; object-fit: cover; }

/* The topbar identity is the page's home link — give it a full-height hit box
   on a touch screen rather than the 19px the text alone occupies. */
@media (max-width: 900px) {
  .topbar__brand { padding: 12px 0; margin: -12px 0; }
}

/* ── Tablet and below (≤900px) ─────────────────────────────────────── */
@media (max-width: 900px) {
  /* 44px minimum touch targets */
  .topbar__burger { width: 44px; height: 44px; }
  .topbar__nav a { padding: 14px 0; }

  /* Body copy at a readable size on a handheld */
  .section__intro { font-size: 16px; }
  .app p { font-size: 15px; }
  .footer__contact-label,
  .footer__email { font-size: 15px; }
  .footer__note { font-size: 13.5px; }

  /* Sections need a little more air once they are one column deep */
  .section { padding: 30px 0; }
  .section__head { margin-bottom: 16px; }

  /* Footer legal row: real tap targets, not 17px-tall hairlines, and labels
     that never break mid-phrase ("COOKIE / SETTINGS"). */
  .footer__bottom { letter-spacing: 0.06em; }
  .footer__legal { gap: 8px; flex-shrink: 0; }
  .footer__legal a,
  .footer__legal-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    white-space: nowrap;
  }
}

/* ── Phone (≤620px) ───────────────────────────────────────────────── */
@media (max-width: 620px) {
  /* The hero copy carries its own wash, so it stays at full contrast however
     long it wraps; the scrim then only has to tint the open scene below it.
     (The old fixed-percentage scrim let the wireframes run through the last
     third of the lede on a 320–390px screen.) */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(9, 14, 26, 0.58) 0%,
      rgba(9, 14, 26, 0.20) 34%,
      rgba(9, 14, 26, 0.14) 66%,
      rgba(9, 14, 26, 0.34) 88%,
      rgba(9, 14, 26, 0.62) 100%);
  }
  .hero__inner {
    background: linear-gradient(180deg,
      rgba(9, 14, 26, 0.92) 0%,
      rgba(9, 14, 26, 0.90) 76%,
      rgba(9, 14, 26, 0.58) 92%,
      rgba(9, 14, 26, 0) 100%);
    padding-bottom: 34px;
  }

  /* Footer: stack the bottom rule instead of jamming a four-line copyright
     against the legal links. */
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    letter-spacing: 0.06em;
    line-height: 1.6;
  }
  .footer__legal { justify-content: center; }
  .footer__logos { padding-top: 26px; gap: 20px; }
  .footer__logo { height: 44px; }
  .footer__wordmark { font-size: 24px; }
}

/* ── Small phone (≤400px) ─────────────────────────────────────────── */
@media (max-width: 400px) {
  .hero .hero__title { font-size: clamp(31px, 9.4vw, 38px); }
  .hero__eyebrow { font-size: 10px; letter-spacing: 0.16em; }
  .case h3, .app h3 { font-size: 17px; }
  .footer__logos { justify-content: center; gap: 18px; }
}

/* iOS: 100vh counts the collapsing URL bar, so the hero jumps on scroll.
   Small-viewport units keep it still. */
@supports (height: 100svh) {
  .hero { min-height: clamp(540px, 76svh, 760px); }
  @media (max-width: 900px) { .hero { min-height: clamp(480px, 68svh, 640px); } }
  @media (max-width: 620px) { .hero { min-height: 640px; } }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE DESIGN PASS
   The responsive pass above made the page fit a phone; this one makes it
   look composed on one. Everything is inside a max-width query, so the
   desktop design is byte-for-byte unchanged.

   The shape of it:
     · the hero becomes a two-band composition — copy on top, an open
       scene band below, instead of copy floating over an empty grid;
     · the lede drops to two sentences (see the span swap in index.html);
     · one type scale, set in clamp(), instead of a dozen fixed sizes;
     · one vertical rhythm — 44 / 26 / 18 / 10 — across every section;
     · cards become discrete objects with a shared radius rather than a
       seamless list inside a page-tall hairline frame.
   ══════════════════════════════════════════════════════════════════════ */

/* The two lede tails: the long one is the default (desktop, tablet). */
.hero__lede-short { display: none; }

/* ── Phone: type scale ────────────────────────────────────────────────
   Every size below is one step of a single scale rather than a value
   picked per component, which is what made the page read as unedited.
   44 / 27 / 19 / 17 / 15.5 / 14.5 / 10.5. */
@media (max-width: 620px) {
  :root {
    --gutter: 22px;
    --rhythm: 44px;   /* space between sections */
    --rhythm-2: 26px; /* space between blocks inside a section */
    --rhythm-3: 18px; /* space under a section head */
  }

  body { font-size: 16px; line-height: 1.6; }

  .section__head h2 {
    font-size: clamp(24px, 6.9vw, 28px);
    line-height: 1.12;
    letter-spacing: -0.022em;
    text-wrap: balance;
  }
  .section__intro {
    font-size: 17px;
    line-height: 1.52;
    color: var(--c-steel-2);
    max-width: 34ch;
  }
  .case h3, .app h3 {
    font-size: 19px;
    line-height: 1.26;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }
  .case p { font-size: 15.5px; line-height: 1.6; color: var(--c-steel-2); }
  .app p  { font-size: 15px;   line-height: 1.55; color: var(--c-steel); }
  .case__tag, .app__tag {
    font-size: 10.5px;
    letter-spacing: 0.17em;
  }
}

/* ── Phone: vertical rhythm ───────────────────────────────────────────
   Sections used to sit 30px apart whatever they contained, so a
   four-card block and a one-paragraph block looked equally weighted. */
@media (max-width: 620px) {
  .section { padding: var(--rhythm) 0 calc(var(--rhythm) + 4px); }
  .section__head {
    margin-bottom: var(--rhythm-3);
    padding-bottom: 12px;
  }
  .section__intro { margin: 0 0 var(--rhythm-2); }
  /* a section whose whole body is one paragraph must not carry the gap that
     is there to separate that paragraph from a card grid */
  .section__inner > .section__intro:last-child { margin-bottom: 0; }
}

/* ── Phone: cards as objects ──────────────────────────────────────────
   .cases is a 1px-gap grid on a lined background: at three columns that
   reads as a table, but at one column it collapses into a page-tall
   rectangle with hairlines across it — an accident, not a design. On a
   phone each card becomes its own object, sharing the 10px radius with
   the demonstrator figures and the consent sheet. */
@media (max-width: 620px) {
  /* the grid keeps its column count (2-up survives down to 520px); only the
     hairline frame it used to draw around itself goes away */
  .cases,
  .cases--2up,
  .cases--four {
    gap: 10px;
    background: none;
    border: 0;
  }
  .case {
    /* one card language for the whole page: a card is always a surface
       raised off its section. .case used to be darker than the section it
       sat in while .app was lighter than its own, so the two grids read as
       two unrelated components. */
    background: #162032;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    padding: 20px 18px 22px;
    gap: 0;
  }
  /* :hover latches on after a tap on a touch screen */
  .case:hover { background: #162032; }
  .case__tag { margin-bottom: 11px; }
  .case h3 { margin-bottom: 9px; }
  .case p.case__result { margin-top: 16px; }

  .apps { gap: 12px; }
  .app {
    border-radius: 10px;
    overflow: hidden;
  }
  .app figcaption { padding: 18px 18px 20px; gap: 0; }
  .app__tag { margin-bottom: 10px; }
  .app h3 { margin-bottom: 8px; }
  /* the figure is a whole object, so it must not lift on tap the way a
     hover card does on a mouse device */
  .app:hover { transform: none; }
}

/* ── Phone: hero ──────────────────────────────────────────────────────
   Portrait cannot hold the wide composition (copy left, scene right), so
   the frame is restacked: copy in the upper band, the scene running
   clear underneath it. The canvas horizon moves down to match — see
   hero-anim.js, layout(). */
@media (max-width: 620px) {
  .hero {
    /* leave a sliver of the next section showing on a short phone (SE, 667pt)
       so the page reads as scrollable, without squeezing the scene band on a
       tall one */
    min-height: 620px;
    align-items: flex-start;
  }
  @supports (height: 100svh) {
    .hero { min-height: clamp(500px, 84svh, 620px); }
  }

  .hero__inner {
    /* the wash belongs to the whole frame now, not to the copy block —
       the old gradient ended with the paragraph and left a visible seam */
    background: none;
    padding: clamp(30px, 5.4vh, 46px) var(--gutter) 0;
  }

  /* the scene dissolves into the section below instead of being cut off by
     a rule drawn across a lit ground plane */
  .hero { border-bottom: 0; }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(15, 23, 42, 0) 74%,
        rgba(15, 23, 42, 0.42) 90%,
        var(--c-bg) 100%),
      /* keeps the copy at full contrast */
      linear-gradient(180deg,
        rgba(9, 14, 26, 0.93) 0%,
        rgba(9, 14, 26, 0.90) 40%,
        rgba(9, 14, 26, 0.60) 55%,
        rgba(9, 14, 26, 0.08) 68%,
        rgba(9, 14, 26, 0) 86%),
      /* and lets the scene sit in a pool of its own light */
      radial-gradient(ellipse 120% 40% at 50% 78%,
        rgba(20, 184, 166, 0.10), transparent 70%);
  }

  .hero__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.18em;
    margin-bottom: 14px;
  }
  .hero .hero__title {
    font-size: clamp(35px, 10.4vw, 46px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 18px;
  }
  .hero .hero__lede {
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 36ch;
    color: #C9D6E7;
    text-wrap: pretty;   /* no one-word last line under the headline */
  }
  .hero__lede-long  { display: none; }
  .hero__lede-short { display: inline; }
}

/* ── Phone: footer ────────────────────────────────────────────────────
   space-around put a 100px ColonyOS lockup and an 80px LTU mark at
   different optical weights on the same row; centring them at matched
   heights reads as a pair. */
@media (max-width: 620px) {
  .footer__logos {
    justify-content: center;
    gap: 26px;
    padding: 30px var(--gutter) 22px;
  }
  .footer__logo { height: 40px; }
  .footer__wordmark { font-size: 22px; }
  .footer__logo-link { gap: 10px; }

  .footer__contact { padding-bottom: 20px; }
  .footer__contact-label, .footer__email { font-size: 15px; }

  .footer__notes { padding-bottom: 22px; }
  .footer__note {
    font-size: 13px;
    line-height: 1.55;
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
  }
  .footer__bottom { padding: 14px var(--gutter) 18px; gap: 8px; }
}

/* ── Phone: consent sheet ─────────────────────────────────────────────
   At 14px/1.6 in a 24px box the notice filled two thirds of the screen
   and buried the page behind it on first visit. */
@media (max-width: 620px) {
  .consent { padding: 12px; }
  .consent__card {
    padding: 18px 18px 16px;
    border-radius: 14px;
  }
  .consent__title { font-size: 15.5px; }
  .consent__body {
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 16px;
  }
  .consent__btn { padding: 12px 20px; }
}

/* ── Small phone (≤400px) ─────────────────────────────────────────── */
@media (max-width: 400px) {
  :root { --gutter: 20px; --rhythm: 38px; }
  .case { padding: 18px 16px 20px; }
  .app figcaption { padding: 16px 16px 18px; }
  .footer__logos { gap: 20px; }
}