/* KNO Events + Workgrounds microsite
   Faithful implementation of "KNO Events + Workgrounds.dc.html" (Claude Design handoff). */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

:root {
  --ease: cubic-bezier(.2,0,.2,1);
  --pad-x: clamp(20px,4vw,32px);
}

/* ── Page ─────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--kno-ink-700); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--kno-blue); text-decoration: none; }
a:hover { color: var(--kno-blue-700); text-decoration: underline; text-underline-offset: 2px; }
* { box-sizing: border-box; }
img { max-width: 100%; }

.page { width: 100%; font-family: var(--font-body); }
.wrap { max-width: 1200px; margin: 0 auto; }

/* Shared type */
.eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--kno-coral); margin-bottom: 16px; }
.h2 { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.08; color: var(--kno-blue); font-size: clamp(28px,2.9vw,46px); }

/* Sections keep full-bleed backgrounds; at rail breakpoints their content is inset (see below). */
.section { scroll-margin-top: 104px; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section.section--hero { padding-left: 0; padding-right: 0; }

/* ── Header ───────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; width: 100%; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--kno-ink-100); }
.site-header__inner { width: 100%; padding: 14px var(--pad-x) 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; justify-content: space-between; }
.site-header__brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.site-header__brand .kno-logo { height: 28px; width: auto; display: block; }
.site-header__divider { display: inline-block; width: 1px; height: 22px; background: var(--kno-ink-200); }
.site-header__partner { display: flex; align-items: center; height: 50px; flex: none; }
.site-header__partner img { display: block; height: 22px; width: auto; }
.site-header__nav { display: flex; align-items: center; gap: 24px; }
.header-link { display: none; font-size: 14px; font-weight: 600; color: var(--kno-ink-700); text-decoration: none; }
.header-link:hover { color: var(--kno-blue); text-decoration: none; }
.btn-cta { display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border-radius: 999px; white-space: nowrap; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 120ms var(--ease); background-color: var(--kno-coral); }
.btn-cta:hover { background: var(--kno-blue-700); text-decoration: none; color: #fff; }

/* ── Side rail ────────────────────────────────────────── */
.rail { display: flex; position: fixed; left: 16px; top: 103px; z-index: 40; flex-direction: column; gap: 2px; padding: 10px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--kno-ink-100); border-radius: 14px; box-shadow: 0 18px 44px -26px rgba(5,54,79,.36); }
.rail__link { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--kno-ink-700); background: transparent; text-decoration: none; white-space: nowrap; transition: background 120ms var(--ease), color 120ms var(--ease); }
.rail__link:hover { background: var(--kno-blue-050); color: var(--kno-navy); text-decoration: none; }
.rail__ring { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; color: var(--kno-blue); }
.rail__label { display: inline; color: var(--kno-blue); }
.rail__link.is-active { color: var(--kno-navy); background: var(--kno-blue-050); }
.rail__link.is-active .rail__ring { border-color: var(--kno-coral); border-width: 3px; }

/* Rail modes (mirrors the prototype's breakpoints):
   ≥1560 gutter · 860–1559 full · 600–859 compact · <600 off */
@media (min-width: 1560px) {
  .rail { left: 28px; }
  .site-header__inner { padding-left: 28px; }
  .section { padding-left: 0; }
}
@media (min-width: 860px) and (max-width: 1559.98px) {
  .section, .section.section--hero { padding-left: calc(224px + var(--pad-x)); }
}
@media (min-width: 600px) and (max-width: 859.98px) {
  .section, .section.section--hero { padding-left: calc(76px + var(--pad-x)); }
  .header-link { display: inline; }
  .rail__label { display: none; }
  .rail__link { padding: 9px 10px; }
  .rail:hover .rail__label { display: inline; }
  .rail:hover .rail__link { padding: 9px 14px; }
}
@media (max-width: 599.98px) {
  .rail { display: none; }
}

/* ── 1 · Hero ─────────────────────────────────────────── */
.section--hero { background: #fff; border-bottom: 1px solid var(--kno-ink-100); }
.hero__inner { max-width: 1200px; margin: 0 auto; padding: clamp(16px,1.8vw,24px) var(--pad-x) clamp(44px,5vw,72px); }
.hero__row { display: flex; flex-wrap: wrap; gap: clamp(20px,3vw,40px); align-items: center; }
.hero__copy { flex: 1 1 260px; min-width: min(100%,240px); }
.hero__shift { margin-left: calc(-1 * min(32px, var(--pad-x))); }
.hero__spacer { max-width: 20ch; margin-bottom: 28px; }
.hero__title { margin: 0 0 28px; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.04; color: var(--kno-blue); font-size: clamp(40px,6vw,76px); max-width: 17ch; text-wrap: balance; }
.hero__lead { margin: 0 0 20px; font-size: clamp(17px,1.5vw,22px); line-height: 1.5; color: var(--kno-blue); max-width: 58ch; text-wrap: pretty; }
.hero__lead-gap { display: block; height: 10px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.btn-outline { display: inline-flex; align-items: center; height: 50px; padding: 0 28px; border-radius: 999px; white-space: nowrap; background: #fff; border: 1px solid var(--kno-ink-200); color: var(--kno-blue); font-size: 16px; font-weight: 700; text-decoration: none; transition: background 120ms var(--ease); }
.btn-outline:hover { background: var(--kno-blue-050); color: var(--kno-blue); text-decoration: none; }
.hero__art { flex: 0 1 300px; max-width: 340px; min-width: 180px; display: flex; align-items: center; justify-content: flex-end; padding: 48px 0; }
.hero__lottie { width: 100%; aspect-ratio: 304/240; }

/* ── 2 · Discovery ────────────────────────────────────── */
.section--discovery { background: #F2F8FC; padding-top: clamp(28px,3vw,44px); padding-bottom: clamp(72px,8vw,120px); }
.discovery__head { margin-bottom: clamp(40px,5vw,60px); }
.discovery__head .h2 { margin: 0 0 20px; line-height: 1.06; }
.discovery__cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
.card { background: #fff; border: 1px solid var(--kno-ink-100); border-radius: 14px; padding: 28px; box-shadow: 0 1px 2px rgba(5,54,79,.05); transition: box-shadow 140ms var(--ease), transform 140ms var(--ease); }
.card--lift:hover { box-shadow: 0 18px 40px -22px rgba(5,54,79,.30); transform: translateY(-2px); }
.card__eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--kno-coral); margin-bottom: 14px; }
.card__title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tile { display: block; border-radius: var(--radius-lg); object-fit: cover; }
.tile--44 { width: 44px; height: 44px; }
.tile--48 { width: 48px; height: 48px; }
.card__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(22px,2vw,28px); line-height: 1.1; letter-spacing: -0.01em; color: var(--kno-blue); }
.card__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--kno-blue); text-wrap: pretty; }
.card__body--spaced { margin-bottom: 24px; }
.card__list { display: flex; flex-direction: column; gap: 14px; }
.card__list h4 { margin: 0 0 2px; font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--kno-blue); }
.card__list p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--kno-blue); text-wrap: pretty; }

/* ── 3 · Platform ─────────────────────────────────────── */
.section--platform { background: #fff; padding-top: clamp(28px,3vw,44px); padding-bottom: clamp(72px,8vw,120px); }
.platform__head { margin-bottom: clamp(28px,3vw,40px); }
.platform__head .h2 { text-wrap: balance; }
.shot { border: 1px solid var(--kno-ink-100); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px -26px rgba(5,54,79,.42); }
.shot__inner { width: 100%; background: #fff; }
.shot__inner img { display: block; width: 100%; height: auto; }

/* ── 4 · Roadmap ──────────────────────────────────────── */
.section--roadmap { background-color: #F2F8FC; padding-top: clamp(28px,3vw,44px); padding-bottom: clamp(72px,8vw,120px); }
.roadmap__head { margin-bottom: clamp(40px,5vw,56px); }
.roadmap__head .h2 { text-wrap: balance; max-width: 100%; }
.roadmap__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 1px; background: var(--kno-ink-200); border: 1px solid var(--kno-ink-200); border-radius: 14px; overflow: hidden; }
.roadmap__item { background: #fff; padding: clamp(26px,3vw,34px); }
.roadmap__num { font-family: var(--font-display); font-weight: 900; font-size: 13px; color: var(--kno-blue); letter-spacing: .1em; margin-bottom: 18px; }
.roadmap__item h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 900; font-size: 17px; color: var(--kno-blue); letter-spacing: -0.01em; }
.roadmap__item h3.nowrap { white-space: nowrap; }
.roadmap__item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--kno-blue); }
.roadmap__summary { grid-column: 1 / -1; background: var(--kno-navy); padding: clamp(26px,3vw,34px); }
.roadmap__summary h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--kno-coral); letter-spacing: -0.01em; }
.roadmap__summary p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--kno-white); }

/* ── 5 · Why partner ──────────────────────────────────── */
.section--together { background: #fff; padding-top: clamp(56px,7vw,104px); padding-bottom: clamp(72px,8vw,120px); }
.together__head { margin-bottom: clamp(40px,5vw,56px); }
.together__head .h2 { margin: 0 0 20px; }
.together__intro { margin: 0; font-size: 16px; line-height: 1.65; color: var(--kno-blue); text-wrap: pretty; }
.together__rows { display: flex; flex-direction: column; }
.together__row { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); column-gap: clamp(24px,4vw,64px); row-gap: 12px; align-items: center; padding: clamp(28px,3.5vw,44px) 0; border-top: 2px solid var(--kno-blue); }
.together__row:last-child { border-bottom: 2px solid var(--kno-blue); }
.together__title { display: flex; align-items: center; gap: clamp(16px,2vw,28px); }
.together__icon { flex: none; display: flex; }
.together__title h3 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(20px,1.8vw,26px); line-height: 1.15; letter-spacing: -0.01em; color: var(--kno-blue); text-wrap: balance; }
.together__row p { margin: 0; font-size: clamp(16px,1.2vw,18px); line-height: 1.6; color: var(--kno-blue); text-wrap: pretty; }

/* ── 6 · Value ────────────────────────────────────────── */
.section--value { background: var(--kno-navy); padding-top: clamp(64px,8vw,112px); padding-bottom: clamp(64px,8vw,112px); }
.value__head { margin-bottom: clamp(32px,4vw,48px); }
.value__head .h2 { color: var(--kno-white); }
.value__cols { display: flex; flex-wrap: wrap; column-gap: clamp(24px,3vw,48px); }
.value__col { flex: 1 1 300px; min-width: 0; border-top: 1px solid rgba(255,255,255,.28); padding: clamp(28px,3vw,40px) 0; display: flex; flex-direction: column; gap: 14px; }
.value__col h3 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(20px,1.7vw,24px); line-height: 1.2; color: var(--kno-coral); letter-spacing: -0.01em; text-wrap: balance; }
.value__col p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--kno-white); text-wrap: pretty; }

/* ── 7 · Our team ─────────────────────────────────────── */
.section--team { color: #fff; background-color: #fff; padding-top: clamp(28px,3vw,44px); padding-bottom: clamp(72px,8vw,116px); }
.team__head { margin-bottom: clamp(36px,4vw,56px); }
.team__head .h2 { margin: 0 0 20px; line-height: 1.05; text-wrap: balance; }
.team__intro { margin: 0 0 32px; font-size: 16px; line-height: 1.55; color: var(--kno-blue); max-width: none; text-wrap: pretty; }
.team__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 20px; max-width: 1060px; }
.person { background: #fff; border: 1px solid var(--kno-ink-100); border-radius: 14px; padding: clamp(24px,2.6vw,30px); box-shadow: 0 1px 2px rgba(5,54,79,.05); display: flex; flex-direction: column; align-items: center; text-align: center; }
.person__photo { display: block; flex: none; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; margin-bottom: 18px; }
.person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person__name { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--kno-blue); letter-spacing: -0.01em; }
.person__role { font-size: 15px; color: var(--kno-blue); margin-top: 4px; white-space: nowrap; }
.person__bio { margin: 16px 0 0; max-width: 44ch; font-size: 15px; line-height: 1.6; color: var(--kno-blue); text-wrap: pretty; }
.person__email { display: block; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--kno-coral); text-decoration: none; word-break: break-all; }
.person__email:hover { color: var(--kno-coral); text-decoration: underline; }
.person__linkedin { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 14px; border-radius: 50%; background: transparent; border: 1px solid var(--kno-blue); color: var(--kno-blue); text-decoration: none; transition: color 120ms var(--ease), border-color 120ms var(--ease); }
.person__linkedin:hover { color: var(--kno-blue); border-color: var(--kno-blue); text-decoration: none; }
.person__linkedin svg { fill: var(--kno-blue); }

/* ── Scroll reveal ────────────────────────────────────── */
.reveal-pending { opacity: 0; transform: translateY(14px); }
.reveal-anim { transition: opacity 420ms var(--ease), transform 420ms var(--ease) !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-pending { opacity: 1; transform: none; }
}

/* ── Phones (<600px) ──────────────────────────────────── */
/* No section navigation on phones: the rail and the header anchors are both
   hidden (see .header-link and the rail modes above). */
@media (max-width: 599.98px) {
  /* The hero's leftward pull lines the copy up with the rail inset; without the
     rail it pushes the text against the screen edge. */
  .hero__shift { margin-left: 0; }
}