/* ==========================================================================
   HAATlab — stylesheet
   Implements HAATlab.dc.html (Claude Design handoff) as plain, static CSS.
   ========================================================================== */

:root {
  /* Measured palette. Four of the original five sat in one hue family (195-248 deg):
     sage teal and dark slate were indistinguishable from the base (dE 11.8 and 15.4)
     and sage failed text contrast, so both are dropped. Olive is kept as a large-area
     fill only - at 2.2:1 it can never hold text. One warm colour is added so that
     "this is the finding" has something to say it with. */
  --ink: #0A2B3A;      /* text - 13.2:1 on paper */
  --paper: #F5F2EA;
  --base: #0D5D7E;     /* primary - 6.4:1 on paper, carries text */
  --signal: #C05A2B;   /* findings only - marks and large type, never body text (3.9:1) */
  --accent: #B3B274;   /* large fills, never text */
  --rule: rgba(10, 43, 58, .22);
  --base-soft: rgba(13, 93, 126, .35);
  --tint: rgba(10, 43, 58, .06);
  --paper-veil: rgba(245, 242, 234, .94);
  --bar-h: 73px;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

h1, h3, h4, [data-display] { font-family: var(--font-display); }
a, button { touch-action: manipulation; }
button:active, a[href^="mailto"]:active { transform: scale(.985); }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  position: relative;
  overflow-x: clip;
}
::selection { background: var(--base); color: var(--paper); }
h1, h2, h3, h4, p, ul, li { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--base); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
section[id] { scroll-margin-top: 96px; }
img { max-width: 100%; }

/* ---------- skip link ---------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  position: fixed; left: 14px; top: 14px; z-index: 400;
  background: var(--ink); color: var(--paper);
  padding: 13px 18px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px; font-weight: 600; text-decoration: none;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--paper-veil);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 12px clamp(18px, 4vw, 44px);
}
.site-header__tag {
  margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .02em; line-height: 1.3;
  color: var(--ink);
}
@media (max-width: 640px) { .site-header__tag { display: none; } }
.site-header__logo {
  display: flex; align-items: center; justify-self: center; text-decoration: none;
}
.site-header__logo img { display: block; width: 132px; height: auto; }
.site-header__cta {
  justify-self: end;
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  color: var(--base); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--base-soft);
  transition: box-shadow .2s;
}
.site-header__cta:hover { box-shadow: inset 0 -1px 0 var(--base); }

/* ---------- side rail nav ---------- */
.rail {
  position: fixed; left: clamp(14px, 2.2vw, 30px); top: 50%; transform: translateY(-50%);
  z-index: 150; display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 1279px) { .rail { display: none !important; } }
.rail__link {
  display: flex; align-items: center; width: 168px; min-height: 36px;
  font-family: var(--font-body); font-size: 14px; line-height: 1.3; letter-spacing: .01em;
  font-weight: 400; text-decoration: none; padding: 6px 0 6px 12px;
  border-left: 2px solid var(--rule); color: var(--ink);
  transition: color .25s, border-color .25s, border-left-width .25s;
}
.rail__link.is-active {
  font-weight: 600; color: var(--base); border-left: 3px solid var(--base);
}

/* ---------- hero ---------- */
.hero {
  min-height: calc(100svh - var(--bar-h, 73px));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 3.4vh, 40px);
  background: var(--paper); color: var(--ink);
  padding: clamp(16px, 5vh, 88px) clamp(24px, 6vw, 80px);
  text-align: center;
}
.hero__logo {
  position: relative; width: min(620px, 80vw);
  animation: haatFloat 9s 2.4s ease-in-out infinite;
}
@media (max-height: 620px) { .hero__logo { width: min(440px, 70vw); } }
.hero__frame { position: relative; overflow: hidden; }
.hero__frame img { display: block; width: 100%; height: auto; }
.hero__gleam {
  position: absolute; top: 0; left: 0; width: 34%; height: 100%; pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
  will-change: transform;
  animation: haatGleam 9s 3.4s ease-in-out infinite;
}
.hero__cover {
  position: absolute; top: -2%; left: 0; width: 100%; height: 104%;
  background: var(--paper); will-change: transform;
  animation: haatCover 1.6s .4s cubic-bezier(.3,.72,.16,1) both;
}
.hero__scan {
  position: absolute; top: -4%; left: 0; width: 2px; height: 108%; pointer-events: none;
  background: linear-gradient(180deg, rgba(192,90,43,0) 0%, var(--signal) 22%, var(--signal) 78%, rgba(192,90,43,0) 100%);
  will-change: transform, opacity;
  animation: haatScan 1.6s .4s cubic-bezier(.3,.72,.16,1) both;
}
.hero__title {
  animation: haatRise .9s 1.55s cubic-bezier(.2,.8,.2,1) both;
  font-size: clamp(19px, 2.1vw, 30px); line-height: 1.25; letter-spacing: -.01em;
  font-weight: 600; text-wrap: balance;
}
.hero__title .accent { color: var(--base); }
.hero__subtitle {
  animation: haatRise .9s 1.95s cubic-bezier(.2,.8,.2,1) both;
  max-width: 54ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink);
}

@keyframes haatCover { from { transform: translate3d(0,0,0); } to { transform: translate3d(100.5%,0,0); } }
@keyframes haatScan {
  0% { opacity: 0; transform: translate3d(0,0,0) scaleY(.4); }
  12% { opacity: 1; transform: translate3d(12%,0,0) scaleY(1); }
  88% { opacity: 1; transform: translate3d(88%,0,0) scaleY(1); }
  100% { opacity: 0; transform: translate3d(100%,0,0) scaleY(.4); }
}
@keyframes haatGleam { 0% { transform: translateX(-140%) skewX(-12deg); } 100% { transform: translateX(260%) skewX(-12deg); } }
@keyframes haatFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes haatRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- scroll reveal ---------- */
.is-animating [data-rise] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .38s cubic-bezier(.2,.7,.2,1), transform .38s cubic-bezier(.2,.7,.2,1);
}
.is-animating [data-rise][data-in] { opacity: 1; transform: none; }

/* ---------- content wrapper ---------- */
.content {
  max-width: 1080px; margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 44px) clamp(60px, 8vw, 110px);
  display: flex; flex-direction: column; gap: clamp(56px, 8vw, 104px);
}

/* ---------- section grid (label col + content col) ---------- */
.section {
  display: grid;
  grid-template-columns: clamp(140px, 17vw, 210px) minmax(0, 1fr);
  gap: clamp(18px, 3.2vw, 52px);
  border-top: 1px solid var(--rule);
  padding-top: clamp(20px, 2.6vw, 32px);
}
.section > .section__col { grid-column: 2; }
.section > .section__wide { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .section { grid-template-columns: 1fr !important; gap: clamp(14px, 3vw, 20px); }
  .section > .section__col, .section > .section__wide { grid-column: 1 / -1 !important; }
}
.section__label { align-self: start; }
.section__index {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--base); margin-bottom: 9px;
}
.section__eyebrow {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.35; color: var(--ink);
}
.section__col { display: flex; flex-direction: column; gap: 26px; max-width: 64ch; }
.section__lede { font-size: clamp(21px, 1.85vw, 25px); line-height: 1.6; letter-spacing: -.006em; }
.section__body { font-size: clamp(19px, 1.4vw, 20px); line-height: 1.7; }
.section__heading {
  font-weight: 700; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -.018em;
  max-width: 26ch; margin-bottom: 18px;
}

/* ---------- pull statement + block quote ---------- */
.pull {
  margin: clamp(26px, 3.4vw, 40px) 0 clamp(20px, 2.6vw, 30px);
  background: var(--accent);
  padding: clamp(30px, 4vw, 52px) clamp(26px, 3.4vw, 44px);
}
.pull__text {
  max-width: 34ch; font-weight: 700; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12;
  letter-spacing: -.02em; color: var(--ink);
}
.pull__text em { font-style: italic; font-weight: 400; }

.quote {
  margin: clamp(30px, 3.8vw, 46px) 0 0;
  padding: clamp(24px, 3vw, 34px) 0 0;
  border-top: 2px solid var(--ink);
}
.quote__text {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.3; letter-spacing: -.018em; color: var(--ink); max-width: 46ch; text-wrap: balance;
}

/* ---------- domains grid ---------- */
.domains {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px);
  margin: clamp(26px, 3.2vw, 36px) 0;
}
@media (max-width: 1023px) { .domains { grid-template-columns: 1fr; } }
.domains__item { background: var(--tint); padding: clamp(20px, 2.4vw, 26px); }
.domains__marker {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: .04em;
  color: var(--base); margin-bottom: 14px;
}
.domains__title {
  font-family: var(--font-mono); font-size: clamp(15px, 1.4vw, 17px); font-weight: 600;
  line-height: 1.3; color: var(--ink); margin-bottom: 10px;
}
.domains__body { font-size: 18px; line-height: 1.58; color: var(--ink); }

/* ---------- findings form panel ---------- */
.panel {
  position: relative; margin-top: clamp(26px, 3.2vw, 36px);
  background: var(--accent); padding: clamp(26px, 3.2vw, 38px);
}
.panel__label {
  display: block; font-family: var(--font-body); font-size: 20px; font-weight: 600;
  line-height: 1.4; color: var(--ink); margin-bottom: 14px;
}
.panel__row { display: flex; flex-wrap: wrap; gap: 10px; }
.panel__input {
  flex: 1 1 240px; min-width: 0; font-family: inherit; font-size: 18px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink); padding: 13px 14px;
}

/* ---------- honeypot ---------- */
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- buttons / links ---------- */
.btn {
  cursor: pointer; font-family: var(--font-body); font-size: 17px; font-weight: 600;
  color: var(--paper); background: var(--base); border: 1px solid var(--base);
  padding: 13px 22px; transition: background .2s, border-color .2s; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--form { padding: 14px 24px; }
.btn--paper {
  color: var(--ink); background: var(--paper); border: 1px solid var(--paper);
}
.btn--paper:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.link-underline {
  color: var(--base); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(13, 93, 126, .4);
}
.link-underline:hover { color: var(--base); border-bottom-color: var(--ink); }

/* ---------- choices (how we do it) ---------- */
.choices {
  display: flex; flex-direction: column; margin: clamp(26px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
}
.choices:hover .choice, .choices:hover .choice * { animation-play-state: paused; }
.choice {
  position: relative; display: grid; grid-template-columns: 44px minmax(140px, 220px) 1fr;
  gap: clamp(12px, 1.8vw, 26px); align-items: baseline;
  padding: clamp(18px, 2.2vw, 24px) clamp(12px, 1.4vw, 18px);
  border-top: 1px solid var(--rule);
  animation: hlRowOn 12.6s linear infinite;
}
.choice__num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--ink); animation: hlRowInk 12.6s linear infinite;
}
.choice__title {
  font-weight: 700; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.18; letter-spacing: -.015em;
  color: var(--ink); animation: hlRowInk 12.6s linear infinite;
}
.choice__body { font-size: 18px; line-height: 1.6; }
.choice__bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--base);
  transform: scaleX(0); transform-origin: left; animation: hlRowBar 12.6s linear infinite;
}
.choice:nth-child(1), .choice:nth-child(1) .choice__num, .choice:nth-child(1) .choice__title, .choice:nth-child(1) .choice__bar { animation-delay: 0.0s; }
.choice:nth-child(2), .choice:nth-child(2) .choice__num, .choice:nth-child(2) .choice__title, .choice:nth-child(2) .choice__bar { animation-delay: 4.2s; }
.choice:nth-child(3), .choice:nth-child(3) .choice__num, .choice:nth-child(3) .choice__title, .choice:nth-child(3) .choice__bar { animation-delay: 8.4s; }
@keyframes hlRowOn { 0%, 33.2% { background: rgba(179,178,116,.32); } 33.3%, 100% { background: transparent; } }
@keyframes hlRowInk { 0%, 33.2% { color: var(--base); } 33.3%, 100% { color: var(--ink); } }
@keyframes hlRowBar { 0% { transform: scaleX(0); } 33.2% { transform: scaleX(1); } 33.3%, 100% { transform: scaleX(0); } }
@media (max-width: 767px) { .choice { grid-template-columns: 1fr !important; gap: 8px !important; } }

/* ---------- board grid ---------- */
.board {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 2.8vw, 34px);
  margin: clamp(28px, 3.6vw, 42px) 0;
}
@media (max-width: 1023px) { .board { grid-template-columns: 1fr; } }
.board__item { border-top: 1px solid var(--rule); padding-top: clamp(14px, 1.8vw, 20px); }
.board__name { font-weight: 700; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.18; letter-spacing: -.015em; }
.board__role {
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.4;
  color: var(--base); margin: 6px 0 10px;
}
.board__bio { font-size: 18px; line-height: 1.6; }

/* ---------- get involved (dark CTA band) ---------- */
.involve { background: var(--ink); color: var(--paper); padding: clamp(34px, 4.6vw, 58px); }
.involve__heading { font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.02em; max-width: 24ch; }
.involve__list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 30px);
  margin: clamp(26px, 3.2vw, 38px) 0;
}
@media (max-width: 1023px) { .involve__list { grid-template-columns: 1fr; } }
.involve__title { font-weight: 700; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.16; letter-spacing: -.012em; margin-bottom: 7px; }
.involve__body { font-size: 18px; line-height: 1.58; color: var(--paper); }

/* ---------- forms (advisory council / expert network) ---------- */
.form {
  position: relative; margin-top: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--rule); padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 18px;
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1023px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.field__required { color: var(--base); }
.field__input, .field__textarea {
  font-family: inherit; font-size: 18px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); padding: 12px 13px;
}
.field__textarea { line-height: 1.5; resize: vertical; }
.form__note { font-size: 18px; line-height: 1.5; color: var(--ink); }
.form__status { font-size: 20px; line-height: 1.5; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: clamp(30px, 4vw, 46px) clamp(18px, 4vw, 44px); }
.site-footer__inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start;
}
@media (max-width: 1023px) { .site-footer__inner { grid-template-columns: 1fr; } }
.site-footer__name { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink); }
.site-footer__note { margin-top: 10px; max-width: 50ch; font-size: 20px; line-height: 1.55; color: var(--ink); }
.site-footer__links { display: flex; flex-direction: column; gap: 9px; font-family: var(--font-body); font-size: 16px; }
.site-footer__links a { color: var(--base); text-decoration: none; }
.site-footer__links a:hover { color: var(--ink); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-animating [data-rise] { opacity: 1 !important; transform: none !important; }
  .hero *, .hero__logo { animation: none !important; }
  .hero__cover, .hero__scan, .hero__gleam { display: none !important; }
  .hero { min-height: 0; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}