:root {
  color-scheme: light;

  /* ----- Color ----- */
  --paper: #f8f4ef;
  --paper-alt: #fefefd;
  --ink: oklch(0.16 0.012 55);
  --ink-muted: #4a4a48;
  --line: rgba(28, 22, 16, 0.22);
  --accent: #00e6ff;
  --placeholder: #6b6b6b;

  /* ----- Type families ----- */
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ----- Type scale (Figma reference: 1366 viewport) ----- */
  --fs-display: 66px;        /* hero h1, statement h2, knowledge h2, motion h2 */
  --lh-display: 1.061;       /* 70/66 */
  --fs-bond-h2: 45px;        /* bond h2 only */
  --lh-bond-h2: 1.111;       /* 50/45 */
  --fs-body-l: 30px;         /* bond list, motion list, statement quote */
  --lh-body-l: 1.067;        /* 32/30 */
  --fs-body-m: 18px;         /* hero sidebar, statement stat, figcaption, signup label */
  --lh-body-m: 1.222;        /* 22/18 */

  /* ----- Layout ----- */
  --container-x: clamp(22px, 4vw, 49px);
  --header-h: 78px;
  --section-py: 96px;        /* mobile section padding-block */
  --section-py-lg: 140px;    /* desktop section padding-block */

  /* ----- Diagonal stroke (Figma slope -2.29; angle = atan(-2.29)) ----- */
  --diagonal-angle: -66.42deg;
  --slash-length: 20px;
}

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

html {
  background: var(--paper);
  scroll-padding-top: var(--header-h);
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 16px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--lh-display);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 8px 14px;
  color: var(--paper);
  background: var(--ink);
  font: 600 13px/1 var(--sans);
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 150ms ease;
  z-index: 100;
}

.skip-link:focus {
  transform: translateY(0);
}

.cyan-tab {
  position: absolute;
  left: 0;
  top: 96px;
  width: 14px;
  height: 132px;
  background: var(--accent);
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 1;
}

.hero__copy .cyan-tab {
  top: 50%;
  left: calc(-1 * var(--container-x));
  height: 168px;
  transform: translateY(-50%);
}

/* ===== Header / nav ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--container-x);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  width: 30px;
  height: auto;
}

.brand__wordmark {
  width: 96px;
  height: auto;
  margin-bottom: 4px;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 13px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  margin: 2px 0;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

body.nav-open .nav-toggle__bar:nth-child(2) {
  transform: translateY(6px) rotate(45deg);
}

body.nav-open .nav-toggle__bar:nth-child(3) {
  opacity: 0;
}

body.nav-open .nav-toggle__bar:nth-child(4) {
  transform: translateY(-6px) rotate(-45deg);
}

.primary-nav {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  padding: calc(var(--header-h) + 24px) var(--container-x) 32px;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

body.nav-open .primary-nav {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* While the window is being resized, kill the nav's transition so the
   overlay doesn't fade in/out as media-query values flip. JS toggles
   [data-resizing] on <html>. */
html[data-resizing] .primary-nav,
html[data-resizing] .nav-toggle__bar {
  transition: none;
}

.primary-nav a {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  width: 100%;
  min-height: 66px;
  color: inherit;
  border-bottom: 1px solid var(--line);
  font: 700 13px/1.2 var(--sans);
  text-decoration: none;
  text-transform: uppercase;
}

.primary-nav a:first-child {
  border-top: 1px solid var(--line);
}

.primary-nav__num {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 56px var(--container-x) 0;
  overflow: hidden;
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(40px, 9vw, var(--fs-display));
  line-height: var(--lh-display);
  letter-spacing: 0;
}

.hero__sidebar {
  margin-top: 36px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  max-width: 420px;
}

.hero__sidebar p {
  margin-bottom: 20px;
}

.hero__pitch {
  font-weight: 600;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  padding-block: 6px;
  font: 600 clamp(20px, 2.8vw, 26px) / 1.05 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 8px;
  text-transform: uppercase;
}

.link-arrow::before {
  content: "";
  display: inline-block;
  width: clamp(28px, 3vw, 40px);
  height: 2px;
  margin-right: 14px;
  background: var(--accent);
  transform: rotate(var(--diagonal-angle));
}

.hero__diagonal {
  display: none;
}

/* Wire-V watermark: the brand's most distinctive visual gesture, echoed
   above the fold so the page is recognisable as Valency before section
   five. Hidden on phone (no room without crowding); appears at tablet+
   bottom-left of the hero column, low-opacity, line-drawn on first paint. */
.hero__mark {
  display: none;
}

/* ===== Hero image ===== */
.hero-image {
  position: relative;
  margin: 48px 0 0;
  overflow: hidden;
}

.hero-image picture,
.hero-image img:not(.hero-image__overlay) {
  display: block;
  width: 100%;
  height: auto;
}

.hero-image img:not(.hero-image__overlay) {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.hero-image__overlay {
  /* Width is the source of truth; aspect-ratio matches the SVG viewBox so
     height stays in lockstep regardless of viewport changes. */
  position: absolute;
  top: -13.5%;
  right: -10.7%;
  width: 57.4%;
  aspect-ratio: 783.979 / 736.352;
  pointer-events: none;
}

/* ===== Statement ===== */
.statement {
  position: relative;
  padding: var(--section-py) var(--container-x);
}

.statement h2 {
  max-width: 22ch;
  font-size: clamp(34px, 7vw, var(--fs-display));
  line-height: var(--lh-display);
  letter-spacing: 0;
}

.statement__grid {
  display: grid;
  gap: 60px;
  margin-top: 80px;
}

.statement__stat p:not(.footnote) {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  margin-bottom: 26px;
}

.statement__stat strong {
  font-weight: 700;
}

.statement__stat sup a {
  text-decoration: none;
}

.footnote {
  font: 400 11px/1.4 var(--sans);
  color: var(--ink-muted);
}

.footnote em {
  font-style: italic;
}

.statement__diagonal {
  display: none;
  color: var(--accent);
}

.statement__quote {
  margin: 0;
}

.statement__quote blockquote {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-body-l);
  line-height: 1.133; /* 34/30 — quote uses slightly looser leading than body-l */
}

.statement__quote figcaption {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
}

/* ===== Knowledge =====
   The page's only ink-on-paper-reverse moment: a deliberate dark "page break"
   between Statement and Bond. Light type on dark, so leading is bumped per
   the shared design law (light-on-dark adds 0.05–0.1 to line-height). */
.knowledge {
  background: var(--ink);
  color: var(--paper);
  padding: var(--section-py) var(--container-x);
  text-align: center;
}

.knowledge h2 {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(34px, 7vw, var(--fs-display));
  line-height: 1.10;
}

.knowledge__copy {
  max-width: 56ch;
  margin: 36px auto 0;
}

/* Cyan rule under the H2, short and centered: the editorial cadence mark
   that signals the dark moment is intentional, not just a color swap. */
.knowledge__copy::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto 32px;
  background: var(--accent);
}

.knowledge__copy p {
  font: 400 16px/1.55 var(--sans);
}

/* ===== Bond ===== */
.bond {
  position: relative;
  padding: var(--section-py) var(--container-x);
}

.bond h2 {
  font-size: clamp(28px, 5vw, var(--fs-bond-h2));
  line-height: var(--lh-bond-h2);
  margin-bottom: 56px;
  max-width: 14ch;
}

.bond__group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 32px;
  border-top: 1px solid var(--accent);
  padding: 28px 0 32px;
}

.bond__title {
  font-family: var(--sans);
  font-size: clamp(20px, 3vw, var(--fs-body-l));
  font-weight: 400;
  line-height: 1.133; /* 34/30 — bond h3 has slightly looser leading than body-l */
  letter-spacing: -0.01em;
}

.bond__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bond__list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
}

.bond__list li:last-child {
  border-bottom: 0;
}

.bond__copy {
  padding: 16px 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
}

/* ===== Already in motion ===== */
.motion {
  position: relative;
  padding: var(--section-py) var(--container-x);
  overflow: hidden;
}

.motion h2 {
  text-align: center;
  font-size: clamp(34px, 7vw, var(--fs-display));
  margin-bottom: 64px;
}

.motion__list {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.motion__list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 50px;
}

.motion__list li:last-child {
  margin-bottom: 0;
}

.motion__list span {
  font: 400 24px/1.2 var(--serif);
}

.motion__list p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
}

.motion__mark {
  position: absolute;
  right: -20%;
  bottom: -10%;
  width: 70%;
  max-width: 620px;
  height: auto;
  color: var(--accent);
  pointer-events: none;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  min-height: 44px;
  /* Don't let min-width overflow the section padding box on tiny screens. */
  min-width: min(280px, 100%);
  padding: 0 22px;
  color: var(--ink);
  background: var(--accent);
  border: 0;
  font: 600 14px/22px var(--sans);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--paper-alt);
  padding: 64px var(--container-x) 32px;
}

.site-footer__grid {
  display: grid;
  gap: 40px;
}

.signup__label {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-body-m);
  line-height: 1.3;
  margin-bottom: 18px;
}

.signup__field {
  border-bottom: 1px solid var(--ink);
  max-width: 420px;
}

.signup__field input {
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: 0;
  font: 400 14px/1.4 var(--sans);
  color: var(--ink);
}

.signup__field input::placeholder {
  color: var(--placeholder);
}

.signup__field input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.signup__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.signup__submit {
  margin-top: 22px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  font: 600 14px/1 var(--sans);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
  cursor: pointer;
}

.signup__status {
  margin-top: 10px;
  min-height: 1.4em;
  font: 600 12px/1.4 var(--sans);
  color: var(--ink-muted);
}

.signup__status[data-state] {
  color: var(--ink);
}

.signup__submit[disabled] {
  cursor: progress;
  opacity: 0.55;
}

.site-footer__nav {
  display: grid;
  gap: 12px;
  font: 600 12px/1 var(--sans);
  text-transform: uppercase;
}

.site-footer__nav a {
  padding-block: 6px;
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
}

.site-footer__mark {
  display: block;
  width: 96px;
  height: auto;
  justify-self: end;
  color: var(--accent);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--accent);
  font: 400 13px/1.6 var(--sans);
}

@media (min-width: 1024px) {
  .site-footer__bottom {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 60px;
    align-items: center;
  }
}

.site-footer__wordmark {
  width: 80px;
  height: auto;
  color: var(--ink);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials a {
  display: inline-block;
  padding-block: 6px;
  text-decoration: underline;
}

.copyright {
  margin-left: auto;
  color: var(--ink-muted);
}

/* ===== Tablet / half-screen-laptop ===== */
/* Bridges the mobile single-column stack and the 1024+ Figma layout so
   half-screen browsers (≈720–1023px) don't show big stretches of empty
   space below each section's heading. The diagonal SVGs and cyan-tab
   accents are pixel-tuned for ≥1024px, so they stay desktop-only. */
@media (min-width: 720px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 360px);
    gap: 40px;
    align-items: end;
    padding-top: 88px;
  }

  .hero h1 {
    max-width: 14ch;
    font-size: clamp(40px, 6.5vw, 60px);
    line-height: var(--lh-display);
  }

  .hero__sidebar {
    align-self: end;
    margin-top: 0;
    margin-left: auto;
    max-width: 360px;
  }

  .hero__mark {
    display: block;
    position: absolute;
    bottom: clamp(20px, 3vw, 56px);
    left: var(--container-x);
    width: clamp(110px, 14vw, 180px);
    height: auto;
    color: var(--accent);
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
  }

  .statement {
    text-align: center;
  }

  .statement h2 {
    max-width: 28ch;
    margin: 0 auto;
    font-size: clamp(40px, 5.5vw, 56px);
  }

  /* Three-column composition with a smaller diagonal in the middle. The
     desktop rule at min-width:1024px overrides with larger values; this
     keeps the asymmetric stat | diagonal | quote shape alive in the
     720–1023px range instead of collapsing to a generic two-column block. */
  .statement__grid {
    grid-template-columns: minmax(220px, 300px) auto 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 80px;
    text-align: left;
    max-width: 980px;
    margin-inline: auto;
  }

  .statement__diagonal {
    display: block;
    align-self: center;
    justify-self: center;
    width: clamp(50px, 7vw, 90px);
    height: clamp(110px, 18vw, 200px);
    overflow: visible;
  }

  .bond h2 {
    font-size: clamp(28px, 4.5vw, 40px);
    max-width: 24ch;
    margin-bottom: 72px;
  }

  .bond__group {
    grid-template-columns: minmax(240px, 420px) 1fr;
    gap: 24px 60px;
    padding: 28px 0 44px;
    align-items: start;
  }

  /* Editorial staircase: title sits high, content drops below. The diagonal
     between the two does the wayfinding work that decorative arrows used to.
     Margin (not padding) so it doesn't fight the desktop padding overrides. */
  .bond__list,
  .bond__copy {
    margin-top: clamp(24px, 3vw, 44px);
  }
}

/* ===== Desktop ===== */
@media (min-width: 1024px) {
  :root {
    --container-x: 49px;
    --header-h: 86px;
  }

  .nav-toggle {
    display: none;
  }

  .primary-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .primary-nav a {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    font: 700 11px/1 var(--sans);
    text-decoration: none;
  }

  .primary-nav a:first-child {
    border-top: 0;
  }

  .primary-nav__num {
    display: none;
  }

  .primary-nav a + a {
    position: relative;
    padding-left: 26px;
  }

  .primary-nav a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--slash-length);
    height: 1px;
    background: var(--accent);
    transform: translateY(-1px) rotate(var(--diagonal-angle));
    transform-origin: center;
  }

  /* Hero */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    /* padding-bottom: 28px lets the sidebar's `align-self: end` land at the
       Figma y-position naturally (slash aligns with diagonal endpoint). */
    padding: 122px var(--container-x) 28px;
    /* Reserve room for the oversized cyan diagonal; clamped so very narrow
       (1024) and very wide (>1920) viewports don't get extreme heights.
       Kept at 40vw so the sidebar's bottom edge stays near the diagonal's
       lower endpoint — narrowing the hero pushes the sidebar up and the
       diagonal slices through the text. */
    min-height: clamp(440px, 40vw, 640px);
  }

  .hero h1 {
    /* Constrains the h1 so it wraps to 4 lines at every desktop width:
       fits "People-Centered," but not "People-Centered, AI-". */
    max-width: 16ch;
    font-size: clamp(56px, 5vw, var(--fs-display));
    line-height: var(--lh-display);
  }

  .hero__sidebar {
    align-self: end;
    margin-top: 0;
    padding-bottom: 0;
    margin-left: auto;
    max-width: 420px;
  }

  .hero__sidebar p {
    /* Figma sidebar (4009:995) is 414×86 with 4 lines → 18px/22px body-m. */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }

  .hero__diagonal {
    /* Figma Line 124 bbox is (920,146)→(1102,563) at 1366vw, but at every
       desktop width the original length had the line crossing through the
       sidebar's first words. Shorten so the lower endpoint clears the
       sidebar's top edge across 1024–1600+, keeping the original slope
       (height ÷ width ≈ 2.29). */
    display: block;
    position: absolute;
    top: clamp(40px, 4.4vw, 80px);
    left: 65%;
    width: clamp(75px, 7.6vw, 122px);
    height: clamp(170px, 17.5vw, 280px);
    color: var(--accent);
    pointer-events: none;
    overflow: visible;
  }

  /* Hero image */
  .hero-image {
    margin-top: 0;
  }

  .hero-image img:not(.hero-image__overlay) {
    aspect-ratio: 1366 / 548;
    height: auto;
  }

  .hero-image__overlay {
    top: -13.5%;
    right: -10.7%;
    width: 57.4%;
    max-width: none;
  }

  /* Statement */
  .statement {
    padding: var(--section-py-lg) var(--container-x);
    text-align: center;
  }

  .cyan-tab {
    width: 20px;
    /* Figma anchors cyan tabs at viewport x=20. */
    left: 20px;
  }

  .hero__copy .cyan-tab {
    height: 259px;
    /* Cancel the section padding so the tab lands at viewport x=20. */
    left: calc(20px - var(--container-x));
  }

  .statement .cyan-tab {
    /* Aligns vertically with the "35M researchers" stat row in Figma. */
    top: 512px;
    height: 128px;
  }

  .statement h2 {
    /* Figma h2 bbox is 1031px wide at 1366vw → ~32ch at 66px PT Serif. */
    max-width: 32ch;
    margin: 0 auto;
    font-size: clamp(48px, 5vw, var(--fs-display));
  }

  .statement__grid {
    grid-template-columns: minmax(240px, 320px) 1fr minmax(280px, 460px);
    gap: 60px;
    align-items: start;
    margin-top: 120px;
    text-align: left;
    max-width: 1200px;
    margin-inline: auto;
  }

  .statement__diagonal {
    /* Bbox derived from Figma Line 88 (530,1645)→(693,2003); same slope as
       the hero diagonal, shorter. */
    display: block;
    align-self: center;
    justify-self: center;
    width: clamp(110px, 12vw, 200px);
    height: clamp(240px, 26vw, 440px);
    overflow: visible;
  }

  .statement__quote blockquote {
    font-size: var(--fs-body-l);
    line-height: 1.133;
  }

  /* Knowledge */
  .knowledge {
    padding: var(--section-py-lg) var(--container-x);
  }

  .knowledge h2 {
    /* Figma h2 bbox is 770px wide at 1366vw → ~24ch at 66px PT Serif. */
    max-width: 24ch;
    font-size: clamp(48px, 5vw, var(--fs-display));
  }

  .knowledge__copy {
    max-width: 540px;
  }

  .knowledge__copy::before {
    width: 80px;
    margin-bottom: 40px;
  }

  .knowledge__copy p {
    font-size: var(--fs-body-m);
    /* Slightly looser leading than the cream sections; light-on-dark needs it. */
    line-height: 1.4;
  }

  /* Bond */
  .bond {
    padding: 120px var(--container-x);
  }

  .bond .cyan-tab {
    top: 130px;
    height: 222px;
  }

  .bond h2 {
    margin-bottom: 96px;
    font-size: clamp(32px, 4vw, var(--fs-bond-h2));
    /* Figma h2 bbox is 600px wide at 1366vw → ~27ch at 45px PT Serif. */
    max-width: 27ch;
  }

  .bond__group {
    grid-template-columns: minmax(280px, 540px) 1fr;
    gap: 24px 80px;
    padding: 36px 0 56px;
    align-items: start;
  }

  .bond__group + .bond__group {
    margin-top: 8px;
  }

  .bond__title {
    font-size: var(--fs-body-l);
  }

  .bond__list li,
  .bond__copy {
    /* Figma list bbox is 518×214 (4009:1039) → ~18px Work Sans, 22px lh. */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
    padding: 18px 0;
  }

  /* Motion */
  .motion {
    padding: var(--section-py-lg) var(--container-x);
    /* Tall enough to contain the oversized wire-V (Figma section is 1182px at 1366vw),
       clamped so neither tiny nor huge viewports get extreme heights. */
    min-height: clamp(960px, 86.55vw, 1320px);
  }

  .motion h2 {
    margin-bottom: 88px;
  }

  .motion__list {
    max-width: 620px;
    margin: 0 0 56px;
  }

  .motion__list span {
    /* Figma serif numerals match h3 body-l visual weight in this section. */
    font-size: var(--fs-body-l);
  }

  .motion__list p {
    /* Figma list bbox is 540×520 (4009:990) for 5 items → ~18px body-m. */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }

  .motion__mark {
    /* Figma Icon 4009:1012 at 1366vw is 725×682, top 362, right -204.
       Clamp keeps proportions reasonable across viewports. */
    width: clamp(440px, 53.1vw, 760px);
    height: clamp(414px, 49.9vw, 715px);
    max-width: none;
    top: clamp(220px, 26.5vw, 380px);
    right: clamp(-210px, -14.9vw, -120px);
    bottom: auto;
  }

  .cta-button {
    width: 330px;
    height: 41px;
    min-height: 41px;
    padding: 0;
    font-size: 16px;
  }

  /* Footer */
  .site-footer {
    padding: 80px var(--container-x) 40px;
  }

  .site-footer__grid {
    grid-template-columns: 1.2fr 1fr auto;
    gap: 60px;
    align-items: start;
  }

  .site-footer__nav {
    grid-template-columns: 1fr;
    row-gap: 22px;
    border-left: 1px solid var(--accent);
    padding-left: 22px;
  }

  .site-footer__mark {
    width: 200px;
    height: auto;
    max-width: none;
    align-self: start;
  }

  .site-footer__bottom {
    margin-top: 80px;
    gap: 24px 40px;
  }

  .site-footer__wordmark {
    width: 149px;
  }
}

@media (min-width: 1280px) {
  .hero {
    padding-block: 96px;
    gap: 96px;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-top: 32px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .statement,
  .knowledge,
  .bond,
  .motion {
    padding: 72px var(--container-x);
  }

  .statement h2,
  .knowledge h2,
  .motion h2 {
    font-size: 32px;
  }

  .bond h2 {
    font-size: 28px;
  }

  /* The wire-V is composed to bleed off the right edge as a deliberate
     corner element; below ~520px viewport it cannot do that without
     becoming a small clipped blob, so the section drops to numbered list
     only. The CTA still anchors the section. */
  .motion__mark {
    display: none;
  }
}

/* ===== Animations ===== */

/* Hero entrance — runs once on first paint via @starting-style.
   Browsers without @starting-style support skip the transition and
   render the resolved state immediately, which is the same final UI. */

.hero__copy .cyan-tab {
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

@starting-style {
  .hero__copy .cyan-tab {
    opacity: 0;
    transform: translateY(calc(-50% + 8px));
  }
}

.hero h1 {
  transition: opacity 500ms ease-out 200ms;
}

@starting-style {
  .hero h1 { opacity: 0; }
}

.hero__diagonal line {
  /* Line length in viewBox units: hypot(181, 416) ≈ 454. Round up so the
     dasharray fully hides the stroke at offset = dasharray. */
  stroke-dasharray: 460;
  transition: stroke-dashoffset 900ms ease-out 500ms;
}

@starting-style {
  .hero__diagonal line { stroke-dashoffset: 460; }
}

.hero__sidebar {
  transition: opacity 500ms ease-out 700ms, transform 500ms ease-out 700ms;
}

@starting-style {
  .hero__sidebar {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Hero wire-V line-draw on first paint. Six staggered paths, each finishes
   under 1s; total run lands ~2000ms after paint, just behind the diagonal
   stroke and the sidebar fade. The dasharray of 8000 is comfortably larger
   than any path's getTotalLength() in this viewBox, so dashoffset:8000
   reliably hides each stroke and the transition draws it in.

   No JS dependency: @starting-style supplies the initial hidden state,
   browsers without @starting-style render the resolved (drawn) state. */
.hero__mark path {
  stroke-dasharray: 8000;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 800ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

@starting-style {
  .hero__mark path { stroke-dashoffset: 8000; }
}

.hero__mark path:nth-child(1) { transition-duration: 600ms; transition-delay: 600ms; }
.hero__mark path:nth-child(2) { transition-duration: 600ms; transition-delay: 700ms; }
.hero__mark path:nth-child(3) { transition-duration: 700ms; transition-delay: 800ms; }
.hero__mark path:nth-child(4) { transition-duration: 700ms; transition-delay: 900ms; }
.hero__mark path:nth-child(5) { transition-duration: 800ms; transition-delay: 1000ms; }
.hero__mark path:nth-child(6) { transition-duration: 900ms; transition-delay: 1100ms; }

/* Scroll-driven section reveals — pure CSS via animation-timeline: view().
   Browsers without support skip the @supports block and render content at
   its resolved state (no animation). */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: reveal-up 800ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  /* Each motion list item gets its own view() timeline, so the stagger
     comes from each item's individual scroll position rather than a fixed
     animation-delay. Fast scrolls collapse the stagger; slow scrolls stretch it. */
  .motion__list li {
    animation: reveal-up 700ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  /* Bond list items animate one at a time as their group enters. */
  .bond__list li {
    animation: reveal-up 600ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

/* Wire-V line draw — JS sets --path-length per path on first run; CSS uses
   it for both stroke-dasharray and the initial stroke-dashoffset (via the
   variable) so the .is-drawing class can transition the offset to 0
   without an inline-style override winning the cascade. */
.motion__mark path {
  stroke-dasharray: var(--path-length, 0);
  stroke-dashoffset: var(--path-length, 0);
}

.motion__mark.is-drawing path {
  stroke-dashoffset: 0;
  transition-property: stroke-dashoffset;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.motion__mark.is-drawing path:nth-child(1) { transition-duration: 250ms; transition-delay:   0ms; }
.motion__mark.is-drawing path:nth-child(2) { transition-duration: 250ms; transition-delay: 120ms; }
.motion__mark.is-drawing path:nth-child(3) { transition-duration: 300ms; transition-delay: 240ms; }
.motion__mark.is-drawing path:nth-child(4) { transition-duration: 300ms; transition-delay: 360ms; }
.motion__mark.is-drawing path:nth-child(5) { transition-duration: 350ms; transition-delay: 480ms; }
.motion__mark.is-drawing path:nth-child(6) { transition-duration: 400ms; transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* @supports (animation-timeline) sets data-reveal opacity:0 in its
     starting frame; force the resolved state so reduced-motion users
     never see a hidden block. Same for the diagonal and wire-V strokes. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__diagonal line,
  .hero__mark path { stroke-dashoffset: 0 !important; }
}