/* ============================================================
   CohortLens, static build
   Self-contained stylesheet: no external theme is assumed.
   Palette and type approximate the Fraunhofer MEVIS house style
   (Nunito Sans, muted institutional blue and green) so the page
   can later be folded back into that theme without a redesign.
   ============================================================ */

:root {
  --text: #3e3e3e;
  --muted: #6b7178;
  --blue: #1e7cb8;
  --green: #179c7d;
  --band: #f3f5f7;
  --line: #dde2e6;
  --bg: #ffffff;
  --measure: 66ch;
  --content: 1100px;
  --sticky-nav-height: 75px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sticky-nav-height);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--text); text-wrap: balance; line-height: 1.15; margin: 0 0 .6em; }
h1 { font-size: 2.6rem; font-weight: 400; }
h2 { font-size: 1.7rem; font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--green); outline-offset: 2px;
}
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--content); margin: 0 auto; padding: 0 30px; }

/* ---------- sticky bar: logo, section links, call to action ---------- */
.cl-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--line); font-size: .93rem;
}
.cl-nav-inner {
  display: flex; flex-wrap: wrap; gap: .25rem .8rem; align-items: center;
  padding: .55rem 30px; max-width: var(--content); margin: 0 auto;
}
.cl-nav .brand { display: inline-flex; align-items: center; margin-right: .75rem; border-bottom: 0; }
.cl-nav .brand:hover { border-bottom: 0; }
.cl-nav .brand img { height: 30px; width: auto; }
.cl-nav-inst { display: inline-flex; align-items: center; margin-left: .6rem; padding-left: .6rem; border-left: 1px solid var(--line); border-bottom: 0; }
.cl-nav a.cl-nav-inst:hover { border-bottom-color: transparent; }
.cl-nav-inst img { height: 46px; width: auto; transform: translateY(2px); }
@media (max-width: 1180px) { .cl-nav-inst { display: none; } }
.cl-nav a { color: var(--text); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; font-weight: 600; }
.cl-nav a:not(.brand):not(.cl-nav-inst) { transform: translateY(3px); }
.cl-nav a:hover { border-bottom-color: var(--blue); }
.cl-nav a.is-current { border-bottom-color: var(--green); color: var(--text); }
.cl-nav .cl-nav-cta { margin-left: auto; color: var(--blue); font-weight: 600; }
.cl-nav .cl-nav-cta.is-current { color: var(--blue); border-bottom-color: var(--blue); }

/* ---------- buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.btn {
  display: inline-block; text-decoration: none; font-size: 1rem; padding: .85rem 1.7rem;
  border: 2px solid var(--blue); border-radius: 2px; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-outline { background: transparent; color: var(--blue); }

/* ---------- hero ---------- */
.cl-hero { padding: 2.5rem 0 1rem; overflow: hidden; }
.cl-hero .wrap { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cl-hero-text { flex: 1 1 380px; min-width: 0; }
.cl-hero h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.12; max-width: 20ch; margin: .25rem 0 1rem; }
.cl-kicker { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green); font-weight: 700; margin: 0 0 .5rem; }
.cl-lead { font-size: 1.15rem; max-width: var(--measure); }
.cl-hero-figure { flex: 1 1 340px; min-width: 0; }
.cl-hero-figure img { width: 100%; }
.cl-hero-figure figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
@media (min-width: 900px) {
  .cl-hero-figure { flex-basis: 45%; margin-right: -12vw; }
  .cl-hero-figure img { max-width: none; width: calc(100% + 12vw); }
  .cl-hero-figure figcaption { max-width: 34ch; }
}

/* ---------- trust strip ---------- */
.cl-trust {
  list-style: none; margin: 0 0 1rem; padding: 1rem 30px;
  max-width: var(--content); margin-left: auto; margin-right: auto;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1.5rem;
  font-size: .95rem; color: var(--muted);
}
.cl-trust li { padding-left: 0; }
.cl-trust a { color: inherit; text-decoration: none; display: flex; gap: .6rem; align-items: flex-start; }
.cl-trust-icon { width: 26px; height: 26px; flex: none; margin-top: .1rem; }
.cl-trust-text > span { display: block; color: var(--text); font-weight: 600; margin-bottom: .1rem; }
.cl-trust a:hover .cl-trust-text > span { color: var(--blue); }
.cl-trust a:hover { color: var(--text); }

/* ---------- sections ---------- */
.cl-section { padding: 3.5rem 0; }
.cl-section h2 { margin-bottom: 1.5rem; }
.cl-band { background: var(--band); }
.cl-note { font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem; max-width: var(--measure); }

/* generic responsive column grid, used for cards / routes / steps */
.cl-grid { display: flex; gap: 1.75rem; flex-wrap: wrap; align-items: stretch; }
.cl-grid > * { flex: 1 1 260px; min-width: 0; }

.cl-cards .cl-card, .cl-routes .cl-card {
  background: #fff; border: 1px solid var(--line); padding: 1.5rem;
  display: flex; flex-direction: column;
}
.cl-band .cl-routes .cl-card { border-color: transparent; }
/* pinned to the foot of the card so the "You receive" lines align across cards */
.cl-outputs { font-size: .95rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .75rem; margin-top: 1rem; }
.cl-card .cl-outputs { margin-top: auto; margin-bottom: 0; }
.cl-outputs strong { color: var(--green); }

/* media inside a card: screenshot or demo clip */
.cl-card-media { margin: 2rem 0 1.5rem; }
.cl-card-media video,
.cl-card-media img { width: 100%; display: block; border: 1px solid var(--line); }
.cl-card-media video { height: auto; background: #000; }
/* the stratification map is portrait; crop it to a band so both cards balance */
.cl-card-media img { height: 260px; object-fit: cover; object-position: center 30%; background: var(--band); }
.cl-media-caption { font-size: .85rem; color: var(--muted); margin: .5rem 0 0; max-width: none; }

/* lens on the stratification image: the attention map sits on top of the
   plain slide and is clipped to a circle under the pointer */
.cl-loupe { position: relative; border: 1px solid var(--line); line-height: 0; cursor: crosshair; }
.cl-loupe img { display: block; width: 100%; height: auto; border: 0; object-fit: initial; }
.cl-loupe-reveal { clip-path: circle(0 at 50% 50%); transition: opacity .15s ease; }
.cl-loupe-ring {
  position: absolute; top: 0; left: 0; width: 190px; height: 190px;
  border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
  pointer-events: none; opacity: 0; transition: opacity .15s ease; will-change: transform;
}
.cl-loupe.is-active .cl-loupe-ring { opacity: 1; }
.cl-loupe-hint {
  position: absolute; right: .5rem; bottom: .5rem; line-height: 1.4;
  background: rgba(255, 255, 255, .92); color: var(--muted);
  font-size: .78rem; padding: .2rem .55rem; border: 1px solid var(--line);
  pointer-events: none; transition: opacity .18s ease;
}
.cl-loupe.is-active .cl-loupe-hint { opacity: 0; }
.cl-loupe.is-shown .cl-loupe-hint, .cl-loupe.is-shown .cl-loupe-ring { opacity: 0; }
/* corner lens button: the route in on touch and by keyboard */
.cl-loupe-toggle {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  color: var(--blue); background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2); cursor: pointer; line-height: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cl-loupe-toggle:hover, .cl-loupe-toggle:focus-visible { background: #fff; }
.cl-loupe-toggle[aria-pressed="true"] {
  color: #fff; background: var(--blue); border-color: var(--blue);
}
/* touch devices have no pointer to track, so the button is the way in */
@media (hover: none) {
  .cl-loupe { cursor: auto; }
  .cl-loupe-hint, .cl-loupe-ring { display: none; }
}

/* steps */
.cl-step-no {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: .6rem;
  border-radius: 50%; background: var(--blue); color: #fff; font-size: 1rem; font-weight: 700; vertical-align: middle;
}

/* evidence cards */
.cl-evidence { display: grid; grid-template-columns: 1fr; gap: 1.5rem 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 700px) { .cl-evidence { grid-template-columns: 1fr 1fr; } }
.cl-ev { border-top: 3px solid var(--blue); padding: 1.1rem 0 0; }
/* higher specificity than ".cl-ev p", which would otherwise shrink these */
.cl-ev .cl-ev-num {
  font-size: clamp(2.9rem, 4.4vw, 3.6rem); font-weight: 700; line-height: .95;
  letter-spacing: -.02em; color: var(--blue); margin: 0 0 .4rem;
  font-variant-numeric: tabular-nums;
}
.cl-ev .cl-ev-num sup { font-size: .4em; font-weight: 600; vertical-align: super; }
.cl-ev h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.cl-ev p { font-size: .95rem; }
.cl-ev a { font-size: .9rem; }

/* worked case */
.cl-case { background: var(--band); padding: 1.75rem 2rem; border-left: 4px solid var(--green); }
.cl-case .cl-kicker { margin-bottom: .3rem; }
.cl-case h3 { margin: 0 0 1rem; font-size: 1.4rem; }
.cl-case dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; }
.cl-case dt { font-weight: 700; color: var(--muted); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; padding-top: .15rem; }
.cl-case dd { margin: 0; max-width: var(--measure); }
@media (max-width: 600px) { .cl-case dl { grid-template-columns: 1fr; } .cl-case dt { margin-top: .5rem; } }

/* academic callout */
.cl-academic { margin-top: 2rem; padding: 1.25rem 1.5rem; background: #fff; border-left: 4px solid var(--blue); max-width: none; }

/* open science note */
.cl-open-science { font-size: .95rem; color: var(--muted); margin-top: 1.5rem; }

/* contact */
.cl-contact-grid { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.cl-contact-intro { flex: 1 1 280px; }
.cl-contact-form { flex: 2 1 380px; min-width: 0; }
form.cl-form label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .25rem; }
form.cl-form input:not([type="submit"]), form.cl-form textarea {
  display: block; width: 100%; border: 1px solid var(--line); padding: .6rem .75rem;
  margin: .2rem 0 .9rem; font: inherit; font-size: 1rem; color: var(--text); background: #fff;
}
form.cl-form button[type="submit"] {
  background: var(--blue); color: #fff; border: 0; padding: .8rem 1.75rem; font: inherit; font-size: 1rem; cursor: pointer;
}
form.cl-form button[type="submit"]:hover { background: #17628f; }
.cl-form-status { font-size: .9rem; margin-top: .75rem; min-height: 1.2em; }
.cl-form-status[data-state="sent"] { color: var(--green); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; font-size: .9rem; color: var(--muted); }
.site-footer .wrap { display: flex; gap: 1.5rem 2.5rem; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.site-footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .5rem; }
.site-footer a { color: var(--muted); }
.footer-logo { display: inline-flex; order: 2; }
.footer-logo img { height: 54px; width: auto; }
.footer-meta { order: 1; }
.footer-lede { color: var(--text); margin-bottom: .35rem; }

@media (max-width: 700px) {
  .cl-nav .cl-nav-cta { margin-left: 0; }
}