/* Keep the redesign palette out of retained engineering/research content. */
body.pact:not(.inner-page), .site-nav, .site-footer {
  --green: #2e7d5b;
  --green-dark: #1a4a38;
  --green-deep: #0b2e24;
  --green-light: #4a9b73;
  --green-soft: #7bb894;
  --gold: #e0b84c;
  --gold-soft: #f0d078;
  --ink: #0b2e24;
  --muted: #4b5f58;
  --dim: #7a8c85;
  --faint: #a3b1ab;
  --line: #dde3df;
  --line-strong: #b9c4bf;
  --rail: #f6f3ea;
  --paper: #ffffff;
  --font-display: "Funnel Display", system-ui, sans-serif;
  --font-sans: "Overused Grotesk", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.pact:not(.inner-page) {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.pact:not(.inner-page) a { color: var(--green); text-decoration: none; }
body.pact:not(.inner-page) a:hover { color: var(--ink); }
body.pact.inner-page {
  --font-display: "Funnel Display", system-ui, sans-serif;
  --font-sans: "Overused Grotesk", system-ui, sans-serif;
  font-family: var(--font-sans);
}
::selection { background: rgba(224, 184, 76, 0.3); color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 16px;
  top: 12px;
  background: var(--gold);
  color: var(--ink);
  padding: 10px 16px;
  font-weight: 700;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
}
.site-nav-row {
  display: flex;
  width: 100%;
  height: 72px;
  align-items: stretch;
  justify-content: space-between;
  padding-left: 20px;
}
.site-nav .mark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.site-nav .mark i {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--green);
  border-right: 6px solid var(--gold);
}
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
}
.site-nav-links a {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.site-nav-links a:hover,
.site-nav-links a.is-current { color: var(--green); }
.site-nav-cta {
  display: flex;
  align-items: stretch;
}
.site-nav-cta a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-left: 1px solid var(--line);
  transition: background 0.2s, color 0.2s;
}
.site-nav-cta a:hover { background: var(--rail); color: var(--green); }
.site-nav-cta a.primary {
  background: var(--ink);
  color: #fff;
  border-left: 0;
}
.site-nav-cta a.primary:hover { opacity: 0.9; color: #fff; }
.site-nav-burger {
  display: none;
  background: 0;
  border: 0;
  color: var(--ink);
  width: 52px;
  padding: 0 16px;
  cursor: pointer;
  font-size: 0;
}
.site-nav-burger::before {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.site-footer {
  border-top: 1px solid var(--line);
}
.site-footer-row {
  max-width: 1152px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer .mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.site-footer .mark i {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--green);
  border-right: 4px solid var(--gold);
}
.site-footer .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-left: 8px;
}
.site-footer-links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  flex-wrap: wrap;
}
.site-footer-links a { color: var(--dim); }
.site-footer-links a:hover { color: var(--green); }

.mosaic {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.mosaic-grid {
  display: grid;
  height: 100%;
  width: 100%;
}
.mosaic-cell { position: relative; width: 100%; height: 100%; }
.mosaic-cell-in {
  position: relative;
  width: 100%;
  height: 100%;
  animation: mosaicIn 0.8s cubic-bezier(0.22, 0.9, 0.35, 1) var(--m-in-delay) both;
}
.mosaic-cell-in.fading {
  animation:
    mosaicIn 0.8s cubic-bezier(0.22, 0.9, 0.35, 1) var(--m-in-delay) both,
    mosaicFade 9s ease-in-out var(--m-fade-delay) infinite alternate;
}
.mosaic-cell-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: mosaicWave 6.5s ease-in-out var(--m-wave-delay) infinite;
}
.mosaic-cap {
  pointer-events: none;
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
}
.mosaic-cap.tl { left: 12px; top: 12px; }
.mosaic-cap.br { right: 12px; bottom: 12px; }
@media (min-width: 768px) {
  .mosaic-cap { font-size: 12px; }
  .mosaic-cap.tl { left: 20px; top: 20px; }
  .mosaic-cap.br { right: 20px; bottom: 20px; }
}

@keyframes mosaicIn {
  0% { opacity: 0; transform: translate(var(--m-from-x), var(--m-from-y)); }
  100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes mosaicWave {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.11; }
}
@keyframes mosaicFade {
  from { background: var(--m-a); }
  to { background: var(--m-b); }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-cell-in,
  .mosaic-cell-in.fading,
  .mosaic-cell-in::after { animation: none; }
}

.hero-split {
  display: flex;
  flex-direction: column;
}
.hero-split .mosaic {
  aspect-ratio: 4 / 3;
  width: 100%;
}
.hero-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 32px;
  background: var(--rail);
  min-width: 0;
  min-height: 0;
}
.hero-kicker {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green);
}
.hero-rail h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  overflow-wrap: break-word;
}
.hero-rail h1 em {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--green);
}
.hero-help {
  margin: 20px 0 0;
  max-width: 420px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
}
.hero-meta {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.btn-fill,
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 24px;
  transition: opacity 0.2s, border-color 0.2s, color 0.2s;
}
.btn-fill { background: var(--green); color: #fff; }
.btn-fill:hover { opacity: 0.9; color: #fff; }
.btn-line { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-line:hover { border-color: var(--green); color: var(--green); }
.scroll-cues {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--faint);
}
.scroll-cues svg {
  width: 16px;
  height: 16px;
  animation: cue 1.6s ease-in-out infinite;
}
.scroll-cues svg:nth-child(2) { animation-delay: 0.25s; }
.scroll-cues svg:nth-child(3) { animation-delay: 0.5s; }
@keyframes cue {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(3px); }
}
.hero-featured p {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.hero-featured a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  padding: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.2s;
}
.hero-featured a:hover { background: var(--rail); color: var(--ink); }

@media (min-width: 900px) {
  .hero-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    min-height: calc(100vh - 72px);
  }
  .hero-split .mosaic {
    aspect-ratio: auto;
    height: auto;
    min-height: calc(100vh - 72px);
  }
  .hero-rail {
    padding: 40px;
    min-height: calc(100vh - 72px);
  }
  .hero-rail .hero-copy { padding-top: 96px; }
  .scroll-cues { display: flex; }
}

@media (max-width: 899px) {
  .site-nav { position: relative; }
  .site-nav-links,
  .site-nav-cta { display: none; }
  .site-nav-burger { display: block; margin-left: auto; }
  .site-nav.is-open .site-nav-links,
  .site-nav.is-open .site-nav-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 8px 0 16px;
    gap: 0;
  }
  .site-nav.is-open .site-nav-links a,
  .site-nav.is-open .site-nav-cta a {
    padding: 14px 24px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .site-nav.is-open .site-nav-cta a.primary { margin: 8px 24px 0; justify-content: center; }
  .hero-rail { padding: 28px 20px; }
  .hero-help, .hero-meta { max-width: 100%; }
  .btn-fill, .btn-line { white-space: normal; }
}

.inner-main { max-width: 880px; margin: 0 auto; padding: 48px 24px 96px; }
.inner-main h1,
.inner-main h2 { font-family: var(--font-display); letter-spacing: -0.02em; }
body.pact .masthead,
body.pact header.site-header,
body.pact footer.footer,
body.pact > footer:not(.site-footer) { display: none; }
body.pact.inner-page h1 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* Release QA: visible focus, legible actions and one flowing mobile menu. */
body.pact a.btn-fill { color: #fff; }
body.pact :focus-visible { outline: 3px solid #96720c; outline-offset: 4px; }
.site-footer { display: block; padding: 0; max-width: none; margin: 0; background: #fff; }
.site-footer .mark { flex-wrap: wrap; }
.site-footer .tag { white-space: normal; }
.site-nav, .site-footer { font-family: var(--font-sans); }
.site-nav a, .site-footer a { text-decoration: none; }
.site-nav { line-height: 1.4; }
body.pact.inner-page main a:not([class]) { text-decoration: underline; text-underline-offset: 0.2em; }
.study-box > div { min-width: 0 !important; flex-basis: 260px !important; }
@media (max-width: 1100px) {
  .site-nav-links { gap: 16px; padding: 0 16px; }
  .site-nav-cta a { padding: 0 16px; }
  .site-nav-cta a:not(.primary) { display: none; }
}
@media (max-width: 899px) {
  .site-nav-row { height: auto; min-height: 72px; flex-wrap: wrap; padding-left: 0; }
  .site-nav .mark { margin-left: 20px; min-height: 72px; }
  .site-nav.is-open .site-nav-links,
  .site-nav.is-open .site-nav-cta { position: static; flex-basis: 100%; padding: 0; }
  .site-nav.is-open .site-nav-cta { padding-bottom: 16px; }
  .hero-split .mosaic { order: 2; aspect-ratio: 3 / 1; min-height: 160px; }
  .hero-rail { order: 1; }
  .site-footer .tag { flex-basis: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cues svg { animation: none; }
}