:root {
  --ink: #07151d;
  --ink-soft: #10232d;
  --paper: #eef1eb;
  --paper-deep: #dce1d9;
  --acid: #cbff4d;
  --mist: #b6c2bd;
  --muted: #7c8d8c;
  --line: rgba(238, 241, 235, 0.17);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem .9rem; color: var(--ink); background: var(--acid); transition: top .2s; }
.skip-link:focus { top: 1rem; }

.site-header { height: 5.25rem; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; padding: 0 clamp(1.25rem, 4vw, 4.5rem); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-size: .9rem; font-weight: 700; letter-spacing: -.025em; }
.brand-mark { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; color: var(--ink); background: var(--acid); border-radius: 50%; font-family: var(--serif); font-size: 1rem; }
.site-header nav { display: flex; align-items: center; gap: 1.65rem; margin-left: auto; margin-right: 2.25rem; }
.site-header nav a, .header-contact { font-size: .76rem; font-weight: 700; letter-spacing: .02em; color: var(--mist); transition: color .2s ease; }
.site-header nav a:hover, .header-contact:hover { color: var(--acid); }
.header-contact { color: var(--ink); background: var(--paper); padding: .65rem .85rem; }
.header-contact span { margin-left: .25rem; }

.hero { min-height: calc(100vh - 5.25rem); display: grid; grid-template-columns: minmax(20rem, .92fr) minmax(36rem, 1.08fr); max-width: 100rem; margin: 0 auto; padding: clamp(2.5rem, 7vh, 6rem) clamp(1.25rem, 4vw, 4.5rem) 4rem; gap: clamp(2rem, 6vw, 8rem); align-items: center; }
.hero-copy { padding-bottom: 2rem; }
.eyebrow { display: flex; align-items: center; gap: .6rem; color: var(--mist); margin: 0 0 1.4rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { width: 1.6rem; height: 1px; display: inline-block; background: var(--acid); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 400; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
h1 { font-size: clamp(3.8rem, 7.1vw, 7.4rem); margin-bottom: 1.7rem; }
h1 em, h2 em { font-family: var(--serif); font-weight: 400; }
.hero-lead { max-width: 29rem; margin-bottom: 2rem; color: var(--mist); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; }
.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.button { min-height: 2.85rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .7rem 1rem; border: 1px solid transparent; color: inherit; background: transparent; font-size: .77rem; font-weight: 750; letter-spacing: .01em; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--acid); color: var(--ink); }
.button-quiet { border-color: rgba(238, 241, 235, .35); color: var(--paper); }
.button-quiet:hover { border-color: var(--paper); }
.hero-note { display: flex; align-items: center; gap: .55rem; color: var(--muted); margin-top: 2rem; font-size: .7rem; }
.pulse { width: .42rem; height: .42rem; background: var(--acid); border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(203, 255, 77, .12); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 .45rem rgba(203, 255, 77, 0); } }

.story-shell { min-height: 38rem; position: relative; overflow: hidden; background: #e7ece2; color: var(--ink); border-radius: 2px; box-shadow: 1.2rem 1.2rem 0 rgba(203, 255, 77, .1); }
.story-topbar, .story-controls { position: absolute; z-index: 5; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; color: #31424a; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.story-topbar { top: 0; }
.story-controls { bottom: 0; border-top: 1px solid rgba(7, 21, 29, .12); }
.sound-toggle, .next-scene { border: 0; padding: 0; color: inherit; background: transparent; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.sound-toggle span, .next-scene span { font-size: .9rem; margin-left: .2rem; }
.story-progress { display: flex; gap: .35rem; }
.story-progress button { width: 1.2rem; height: 3px; padding: 0; border: 0; background: rgba(7, 21, 29, .19); transition: background .3s, width .3s; }
.story-progress button.is-current { width: 2.1rem; background: var(--ink); }
.story-stage { height: 38rem; position: relative; overflow: hidden; }
.story-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(7, 21, 29, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 21, 29, .1) 1px, transparent 1px); background-size: 3.4rem 3.4rem; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }
.story-scene { display: flex; flex-direction: column; position: absolute; inset: 0; padding: 4.7rem 2.6rem 3.5rem; visibility: hidden; opacity: 0; transform: translateX(7%); pointer-events: none; }
.story-scene.is-active { visibility: visible; opacity: 1; transform: translateX(0); pointer-events: auto; animation: scene-enter .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes scene-enter { from { opacity: 0; transform: translateX(5%); } to { opacity: 1; transform: translateX(0); } }
.scene-number { position: absolute; right: 2.4rem; top: 4.8rem; color: #617277; font-size: .67rem; font-weight: 750; letter-spacing: .08em; }
.scene-intro { position: relative; z-index: 2; }
.scene-intro-wide h2 { max-width: 31rem; }
.scene-label { display: block; margin-bottom: .55rem; color: #617277; font-size: .61rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.scene-intro h2 { margin-bottom: 0; max-width: 22rem; font-size: clamp(2rem, 3.4vw, 3.25rem); }
.scene-caption { position: absolute; z-index: 2; left: 2.6rem; bottom: 4.4rem; max-width: 27rem; color: #52636a; margin: 0; font-size: .74rem; }
.floating-card, .review-card, .memo-card { box-shadow: 0 1.4rem 2.8rem rgba(7, 21, 29, .12); }
.project-card { width: 17.8rem; position: absolute; top: 12.5rem; right: 12%; padding: 1rem; background: var(--ink); color: var(--paper); transform: rotate(2deg); animation: float 5s ease-in-out infinite; }
.project-card-top { display: flex; gap: .45rem; align-items: center; color: #c4cec9; font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; }
.mini-icon { color: var(--acid); font-size: .9rem; }.mini-dots { margin-left: auto; }.project-card h3 { margin: 1.25rem 0 .9rem; font-size: 1.75rem; font-weight: 430; letter-spacing: -.06em; line-height: .95; }.project-rule { height: 1px; background: rgba(238,241,235,.17); }.project-card dl { margin: .8rem 0; }.project-card dl div { display: flex; justify-content: space-between; margin-bottom: .35rem; }.project-card dt, .project-card dd { margin: 0; font-size: .62rem; }.project-card dt { color: #9caaa5; }.project-card dd { font-weight: 600; }.criteria-chip { display: inline-block; margin-top: .3rem; padding: .4rem .5rem; color: var(--acid); border: 1px solid rgba(203,255,77,.45); font-size: .59rem; font-weight: 700; letter-spacing: .04em; }
@keyframes float { 50% { transform: translateY(-.8rem) rotate(1deg); } }

@keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes spin-reverse { to { transform: rotate(-360deg); } }

.drop-zone { width: 23rem; height: 14rem; position: absolute; right: 7%; bottom: 7rem; border: 1px dashed #839397; background: rgba(247,249,244,.42); }.folder { width: 8rem; height: 5.8rem; position: absolute; left: 7.3rem; top: 4rem; background: var(--acid); }.folder span { position: absolute; top: -.8rem; left: 0; width: 3.5rem; height: 1rem; background: var(--acid); }.folder i { position: absolute; inset: 1.1rem; border: 1px solid rgba(7,21,29,.43); }.document { width: 6.4rem; min-height: 7rem; position: absolute; padding: .7rem; display: flex; flex-direction: column; background: #fff; box-shadow: .3rem .5rem .8rem rgba(7,21,29,.15); color: #253940; }.document b { font-size: .65rem; }.document small { margin-top: auto; font-size: .56rem; }.document i { width: 2.5rem; height: 2px; position: absolute; top: 1.8rem; left: .7rem; background: var(--acid); }.document-one { left: 1rem; top: 1rem; transform: rotate(-10deg); animation: doc-one 4s ease-in-out infinite; }.document-two { right: 1.6rem; top: .3rem; transform: rotate(10deg); animation: doc-two 4s ease-in-out infinite .5s; }.document-three { bottom: -.5rem; left: 2.8rem; transform: rotate(-2deg); animation: doc-one 4s ease-in-out infinite .8s; }.document-four { right: 3.4rem; bottom: -.7rem; transform: rotate(8deg); animation: doc-two 4s ease-in-out infinite 1.2s; }.upload-status { position: absolute; right: 1rem; bottom: -2rem; padding: .5rem .7rem; background: var(--ink); color: var(--paper); font-size: .61rem; font-weight: 650; }.upload-status span { margin-right: .3rem; color: var(--acid); } @keyframes doc-one { 50% { transform: translateY(-.5rem) rotate(-6deg); } } @keyframes doc-two { 50% { transform: translateY(.45rem) rotate(5deg); } }

.review-card { width: 23rem; position: absolute; top: 12.2rem; right: 7%; padding: 1rem; background: #f9fbf6; }.review-heading { display: flex; justify-content: space-between; padding-bottom: .85rem; border-bottom: 1px solid #d6dcd3; font-size: .65rem; font-weight: 750; }.review-heading strong { color: #4c6532; }.review-row { display: grid; grid-template-columns: 1.2rem 1fr auto; align-items: center; gap: .35rem; padding: .75rem 0; border-bottom: 1px solid #e3e7e1; font-size: .67rem; }.review-row i { width: 1rem; height: 1rem; display: grid; place-items: center; border-radius: 50%; font-size: .57rem; font-style: normal; }.check { color: #304d20; background: #d9f8a0; }.risk { color: #7b3b1f; background: #ffd59e; }.gap { color: #586167; background: #dde4e1; }.review-row em { color: #738181; font-size: .56rem; font-style: normal; }.review-progress { height: 3px; margin-top: 1rem; background: #dce3dc; overflow: hidden; }.review-progress span { width: 68%; height: 100%; display: block; background: var(--ink); animation: progress 2.8s ease-in-out infinite; } @keyframes progress { 50% { width: 86%; } }

.memo-card { width: 25rem; position: absolute; right: 5%; bottom: 5.7rem; padding: 1.1rem 1.15rem; background: #fffefa; }.memo-header, .memo-footer { display: flex; justify-content: space-between; color: #728181; font-size: .56rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }.memo-header i { color: var(--ink); font-style: normal; }.memo-card h3 { margin: 1.2rem 0 .45rem; font-size: 1.7rem; font-weight: 470; letter-spacing: -.06em; }.memo-card > p { margin-bottom: .9rem; color: #44575e; font-size: .67rem; line-height: 1.5; }.evidence-line { padding: .6rem; background: #eef3e8; font-size: .58rem; }.evidence-line span { display: block; color: #6d7c7b; margin-bottom: .14rem; }.memo-question { display: flex; gap: .4rem; align-items: center; padding: .65rem 0; color: #59381f; border-bottom: 1px solid #dce2db; font-size: .6rem; font-weight: 650; }.memo-question span { display: grid; place-items: center; width: 1rem; height: 1rem; background: #ffdeac; border-radius: 50%; }.memo-footer { margin-top: .65rem; text-transform: none; letter-spacing: 0; }

.section-dark { background: var(--ink-soft); }.statement-section { min-height: 32rem; display: grid; grid-template-columns: 18% 1fr; gap: 2rem; padding: 7rem clamp(1.25rem, 10vw, 10rem); }.section-count { color: var(--acid); font-size: .75rem; font-weight: 760; letter-spacing: .08em; }.statement-wrap h2, .contrast-heading h2, .skills-heading h2, .review-intro h2, .governance-copy h2, .open-source-copy h2, .contact-section h2 { margin-bottom: 1.7rem; font-size: clamp(3rem, 5.5vw, 6rem); }.statement-lead { max-width: 41rem; color: var(--mist); font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.55; }

.contrast-section { display: grid; grid-template-columns: minmax(19rem, .8fr) 1.2fr; gap: clamp(2.5rem, 9vw, 9rem); padding: 7rem clamp(1.25rem, 10vw, 10rem); background: var(--paper); color: var(--ink); }.contrast-heading h2 { max-width: 34rem; }.contrast-heading .eyebrow { color: #66777a; }.contrast-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: end; gap: 1px; background: #b8c4be; }.contrast-card { min-height: 26rem; padding: 1.4rem; background: #e2e7df; }.contrast-card-head { display: flex; justify-content: space-between; color: #5a6b6b; font-size: .65rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }.contrast-card-head i { font-style: normal; }.contrast-card h3 { margin: 3rem 0 1.6rem; font-size: clamp(1.55rem, 2.3vw, 2.2rem); font-weight: 430; letter-spacing: -.06em; line-height: 1.02; }.contrast-card ul { margin: 0 0 1.7rem; padding: 0; list-style: none; }.contrast-card li { padding: .42rem 0; border-top: 1px solid rgba(7,21,29,.16); font-size: .72rem; line-height: 1.4; }.contrast-card li::before { content: "—"; display: inline-block; margin-right: .35rem; }.contrast-card p { margin: 0; color: #5e6d6d; font-size: .7rem; line-height: 1.5; }.contrast-active { background: var(--ink); color: var(--paper); }.contrast-active .contrast-card-head, .contrast-active p { color: #a6b3ae; }.contrast-active li { border-color: rgba(238,241,235,.16); }.contrast-active li::before { color: var(--acid); }

.skills-section { padding: 7rem clamp(1.25rem, 10vw, 10rem) 5rem; }.skills-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 4rem; }.skills-heading h2 { margin-bottom: 0; }.skills-heading > p { max-width: 21rem; margin: 0 0 .5rem; color: var(--mist); font-size: .95rem; line-height: 1.6; }.skill-building { display: grid; grid-template-columns: minmax(19rem, .84fr) 1.16fr; gap: clamp(2rem, 7vw, 7rem); }.skill-steps { border-top: 1px solid var(--line); }.skill-step { display: grid; grid-template-columns: 2.8rem 1fr; gap: 1rem; padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--line); cursor: pointer; transition: padding .25s ease, color .25s ease; }.skill-step > span { padding-top: .2rem; color: var(--muted); font-size: .65rem; font-weight: 750; }.skill-step h3 { margin: 0 0 .25rem; font-size: 1.06rem; font-weight: 500; letter-spacing: -.035em; }.skill-step p { max-height: 0; margin: 0; overflow: hidden; color: var(--mist); font-size: .75rem; line-height: 1.55; opacity: 0; transition: max-height .3s ease, opacity .3s ease; }.skill-step.is-selected { padding-left: .8rem; color: var(--acid); }.skill-step.is-selected p { max-height: 5rem; opacity: 1; }.skill-preview { min-height: 25rem; display: flex; flex-direction: column; padding: 1.1rem; color: var(--ink); background: #f0f4ed; box-shadow: .9rem .9rem 0 rgba(203,255,77,.14); }.preview-topline, .preview-footer { display: flex; justify-content: space-between; align-items: center; color: #667779; font-size: .61rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }.live-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #85bd26; }.preview-code { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding: 2rem .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(.7rem, 1.15vw, .88rem); line-height: 1.55; }.preview-code span { display: block; }.preview-code b { padding: .08rem .2rem; background: var(--acid); font-weight: 600; }.code-muted { color: #758585; }.preview-footer { padding-top: .75rem; border-top: 1px solid #ccd6cb; text-transform: none; letter-spacing: 0; }.preview-footer b { color: #405723; }.skills-callout { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 1.2rem; align-items: center; margin-top: 4rem; padding: 1.5rem; border: 1px solid rgba(203,255,77,.55); background: #0c1d25; }.callout-symbol { color: var(--acid); font-size: 2.3rem; }.skills-callout p { margin: 0; max-width: 37rem; color: var(--mist); font-size: .87rem; }.skills-callout strong { color: var(--paper); }.skills-callout a { color: var(--acid); font-size: .72rem; font-weight: 750; white-space: nowrap; }.skills-callout a span { margin-left: .3rem; }

.review-section { display: grid; grid-template-columns: 17% minmax(18rem, .7fr) 1fr; gap: 2rem; padding: 7rem clamp(1.25rem, 10vw, 10rem); background: var(--paper); color: var(--ink); }.review-intro h2 { margin-bottom: 0; }.review-intro .eyebrow { color: #607174; }.review-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #aebcb3; }.review-list-item { display: grid; grid-template-columns: 2.5rem minmax(13rem, 1fr) 1fr; gap: .5rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid #bfcac2; }.review-list-item > span { color: #6c7d7d; font-size: .65rem; font-weight: 750; }.review-list-item h3 { margin: 0; font-size: 1.12rem; font-weight: 510; letter-spacing: -.04em; }.review-list-item p { margin: 0; color: #5a6c6d; font-size: .72rem; }

.governance-section { display: grid; grid-template-columns: 1fr minmax(21rem, .8fr); gap: clamp(3rem, 10vw, 10rem); padding: 7rem clamp(1.25rem, 10vw, 10rem); background: #dce2d9; color: var(--ink); }.governance-copy h2 { max-width: 37rem; }.governance-copy > p:last-child { max-width: 34rem; color: #506466; font-size: 1rem; line-height: 1.6; }.governance-copy .eyebrow { color: #637578; }.governance-board { align-self: center; padding: 1rem; background: #f6f8f3; box-shadow: .9rem .9rem 0 rgba(7,21,29,.1); }.board-top, .board-item, .board-meta { display: flex; align-items: center; }.board-top { justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid #d2dbd2; color: #56696c; font-size: .63rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }.board-live { color: #406225; }.board-item { gap: .7rem; padding: .85rem 0; border-bottom: 1px solid #e0e6df; }.board-icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; background: #e3eadd; font-size: .75rem; }.board-item div { flex: 1; }.board-item strong, .board-item small { display: block; }.board-item strong { font-size: .75rem; }.board-item small { color: #687b7c; font-size: .62rem; }.board-item i { color: #607176; font-size: .6rem; font-style: normal; }.board-line { height: 1px; margin: .65rem 0; background: #cbd5cd; }.board-meta { justify-content: space-between; margin-top: .6rem; color: #617274; font-size: .64rem; }.board-meta b { color: var(--ink); font-weight: 700; }

.uses-section { padding: 5.5rem clamp(1.25rem, 10vw, 10rem) 6.5rem; }.uses-cloud { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .65rem; max-width: 74rem; }.uses-cloud li { display: inline-block; padding: .65rem .8rem; border: 1px solid rgba(238,241,235,.28); color: var(--mist); font-size: .8rem; transition: color .2s, border-color .2s, background .2s; }.uses-cloud li:nth-child(3n+1):hover { color: var(--ink); border-color: var(--acid); background: var(--acid); }.uses-cloud li:nth-child(3n+2):hover { color: var(--ink); border-color: var(--paper); background: var(--paper); }.uses-cloud li:nth-child(3n) { color: var(--acid); border-color: rgba(203,255,77,.4); }

.open-source-section { display: grid; grid-template-columns: 14% 1fr minmax(16rem, .55fr); gap: 3rem; padding: 7rem clamp(1.25rem, 10vw, 10rem); background: #d9e0d7; color: var(--ink); }.open-source-mark { display: flex; flex-direction: column; align-items: flex-start; color: #617275; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }.open-source-mark span { color: var(--ink); font-size: 2rem; }.open-source-mark small { font-size: .58rem; }.open-source-copy h2 { max-width: 38rem; }.open-source-copy > p { max-width: 37rem; color: #4a5e61; font-size: 1rem; line-height: 1.6; }.open-source-copy .eyebrow { color: #5e7072; }.open-source-links { display: flex; gap: 1.5rem; margin-top: 1.75rem; flex-wrap: wrap; }.open-source-links a { padding-bottom: .15rem; border-bottom: 1px solid currentColor; font-size: .74rem; font-weight: 750; }.open-source-links a span { margin-left: .3rem; }.venture-note { align-self: end; padding-left: 1rem; border-left: 1px solid #8e9c93; }.venture-note > span { display: block; margin-bottom: .35rem; color: #667779; font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.venture-note strong { display: block; font-size: 1.25rem; font-weight: 510; letter-spacing: -.05em; line-height: 1; }.venture-note p { margin: 1rem 0 0; color: #526568; font-size: .7rem; line-height: 1.5; }.venture-note a { border-bottom: 1px solid #728381; }

.contact-section { min-height: 37rem; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 7rem clamp(1.25rem, 10vw, 10rem); overflow: hidden; }.contact-section h2 { position: relative; z-index: 1; max-width: 55rem; margin-bottom: 1.7rem; }.contact-section > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 32rem; color: var(--mist); font-size: 1rem; line-height: 1.6; }.contact-email { position: relative; z-index: 1; display: inline-flex; width: fit-content; align-items: center; gap: 1rem; margin-top: 1.3rem; padding-bottom: .25rem; border-bottom: 1px solid var(--acid); color: var(--acid); font-size: clamp(1rem, 1.65vw, 1.3rem); font-weight: 600; }.contact-orbit { width: 36rem; height: 36rem; position: absolute; right: -10rem; top: 0; border: 1px solid rgba(203,255,77,.35); border-radius: 50%; }.contact-orbit::before, .contact-orbit::after { content: ""; position: absolute; inset: 4rem; border: 1px solid rgba(238,241,235,.13); border-radius: 50%; }.contact-orbit::after { inset: 9rem; border-color: rgba(203,255,77,.23); }.contact-orbit span, .contact-orbit i, .contact-orbit b { position: absolute; display: block; }.contact-orbit span { top: 6rem; left: 4.2rem; color: var(--acid); font-size: 2rem; }.contact-orbit i { right: 4rem; bottom: 8rem; width: .8rem; height: .8rem; background: var(--acid); border-radius: 50%; }.contact-orbit b { left: 10rem; bottom: 3rem; width: .35rem; height: .35rem; background: var(--paper); border-radius: 50%; } @keyframes orbit { to { transform: rotate(360deg); } }


.reveal { animation: enter .8s cubic-bezier(.16,1,.3,1) both; }.story-shell.reveal { animation-delay: .12s; } @keyframes enter { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: translateY(0); } }

.header-contact { border: 0; cursor: pointer; }
.scene-intro h2 { max-width: 16rem; font-size: clamp(1.9rem, 3vw, 2.85rem); }
.scene-intro-wide h2 { max-width: 20rem; }
.project-card { top: auto; right: 7%; bottom: 6.2rem; }
.review-card { top: auto; bottom: 6.2rem; }
.scene-caption { max-width: 15rem; }
.contrast-section { display: block; }
.contrast-heading { max-width: 62rem; }
.contrast-heading h2 { max-width: none; margin-bottom: .65rem; }
.contrast-heading > p:last-child { max-width: 38rem; margin: 0; color: #536567; font-family: var(--serif); font-size: clamp(1.75rem, 3.3vw, 3.2rem); letter-spacing: -.055em; line-height: 1; }
.contrast-cards { max-width: 68rem; margin-top: 4rem; }
.contrast-card { min-height: 27rem; padding: clamp(1.4rem, 2.3vw, 2.25rem); }
.contrast-card h3 { margin-top: 4rem; }

.contact-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: min(52rem, calc(100vh - 2rem)); padding: 0; border: 0; color: var(--paper); background: var(--ink-soft); box-shadow: 0 2rem 5rem rgba(0,0,0,.45); }
.contact-dialog::backdrop { background: rgba(3, 12, 17, .78); backdrop-filter: blur(.3rem); }
.dialog-panel { position: relative; padding: clamp(1.5rem, 4vw, 3.5rem); }
.dialog-panel h2 { max-width: 32rem; margin-bottom: 1rem; font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -.065em; line-height: .95; }
.dialog-close { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; position: absolute; top: 1rem; right: 1rem; padding: 0; border: 1px solid rgba(238,241,235,.35); color: var(--paper); background: transparent; font-size: 1.45rem; line-height: 1; }
.dialog-close:hover { color: var(--ink); border-color: var(--acid); background: var(--acid); }
.dialog-lead { max-width: 35rem; margin-bottom: 1.75rem; color: var(--mist); font-size: .94rem; line-height: 1.55; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form label { display: flex; flex-direction: column; gap: .4rem; color: var(--mist); font-size: .69rem; font-weight: 700; letter-spacing: .03em; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: .75rem .8rem; border: 1px solid rgba(238,241,235,.32); border-radius: 0; outline: none; color: var(--paper); background: rgba(238,241,235,.06); font: inherit; font-size: .87rem; font-weight: 400; letter-spacing: 0; }
.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--acid) 50%), linear-gradient(135deg, var(--acid) 50%, transparent 50%); background-position: calc(100% - 1rem) 1.15rem, calc(100% - .7rem) 1.15rem; background-size: .3rem .3rem, .3rem .3rem; background-repeat: no-repeat; }
.contact-form textarea { resize: vertical; min-height: 7rem; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--acid); box-shadow: 0 0 0 2px rgba(203,255,77,.15); }
.contact-form .form-message, .contact-form .button { grid-column: 1 / -1; }
.contact-form .button { width: fit-content; margin-top: .35rem; }
.direct-email { margin: 1.6rem 0 0; color: var(--mist); font-size: .75rem; }
.direct-email a { color: var(--acid); border-bottom: 1px solid currentColor; }

.legal-page { min-height: 100vh; display: flex; flex-direction: column; }
.legal-page .site-header { flex: 0 0 auto; }
.legal-content { flex: 1; width: min(68rem, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 0; }
.legal-content h1 { max-width: 56rem; margin-bottom: 4rem; font-size: clamp(3.4rem, 7vw, 7rem); }
.legal-copy { max-width: 42rem; color: var(--mist); font-size: 1rem; line-height: 1.7; }
.legal-copy .legal-lead { color: var(--paper); font-size: 1.28rem; line-height: 1.55; }
.legal-copy h2 { margin: 2.3rem 0 .75rem; color: var(--paper); font-size: 1.4rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.legal-copy a { color: var(--acid); border-bottom: 1px solid currentColor; }
.legal-copy strong { color: var(--paper); }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; max-width: 47rem; }.hero-copy { padding-bottom: 0; }.story-shell { min-height: 35rem; }.story-stage { height: 35rem; }.contrast-section, .governance-section { grid-template-columns: 1fr; }.contrast-heading h2 { margin-bottom: 0; }.review-section { grid-template-columns: 1fr 1fr; }.review-section .section-count { grid-column: 1 / -1; }.open-source-section { grid-template-columns: 10% 1fr; }.venture-note { grid-column: 2; }
}

@media (max-width: 640px) {
  .site-header { height: 4.5rem; }.header-contact { font-size: .65rem; }.hero { min-height: auto; padding-top: 3.6rem; gap: 3rem; }.hero-copy { padding-bottom: 0; }.story-shell, .story-stage { min-height: 32rem; height: 32rem; }.story-scene { padding: 4.2rem 1.4rem 3rem; }.scene-number { top: 4.3rem; right: 1.3rem; }.scene-caption { left: 1.4rem; right: 1.4rem; bottom: 4rem; }.project-card { top: auto; right: 1.2rem; bottom: 5rem; transform: scale(.86) rotate(2deg); transform-origin: bottom right; }.drop-zone { width: 20rem; right: 50%; bottom: 6.5rem; transform: translateX(50%) scale(.85); }.review-card { right: 50%; top: auto; bottom: 4.8rem; width: 22rem; transform: translateX(50%) scale(.9); transform-origin: bottom center; }.memo-card { width: 22.5rem; right: 50%; bottom: 5rem; transform: translateX(50%) scale(.84); transform-origin: bottom center; }.statement-section { grid-template-columns: 1fr; padding-top: 5rem; padding-bottom: 5rem; gap: 3rem; }.contrast-cards { grid-template-columns: 1fr; }.contrast-card { min-height: auto; }.contrast-card h3 { margin-top: 2rem; }.skills-heading, .skill-building { grid-template-columns: 1fr; display: grid; }.skills-heading { gap: 1.5rem; margin-bottom: 2.7rem; }.skills-callout { grid-template-columns: 2.2rem 1fr; }.skills-callout a { grid-column: 2; }.review-section { grid-template-columns: 1fr; padding-top: 5rem; padding-bottom: 5rem; }.review-list-item { grid-template-columns: 2rem 1fr; }.review-list-item p { grid-column: 2; }.governance-section, .open-source-section { padding-top: 5rem; padding-bottom: 5rem; }.open-source-section { grid-template-columns: 1fr; gap: 1.6rem; }.venture-note { grid-column: 1; }.contact-section { min-height: 31rem; }.contact-orbit { width: 26rem; height: 26rem; right: -11rem; top: 2rem; }.contact-form { grid-template-columns: 1fr; }.contact-form .form-message, .contact-form .button { grid-column: 1; }.dialog-panel { padding: 1.4rem; }.legal-page 
}

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

/* ==========================================================================
   Trust & clarity layer
   ========================================================================== */

:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.contrast-section :focus-visible, .review-section :focus-visible, .governance-section :focus-visible,
.open-source-section :focus-visible, .engagement-section :focus-visible, .story-shell :focus-visible { outline-color: var(--ink); }

/* Header */
.site-header nav { gap: 1.4rem; margin-right: 1.75rem; }
a.header-contact { display: inline-flex; align-items: center; }
.header-contact:hover { color: var(--ink); background: var(--acid); }
.menu-toggle { display: none; align-items: center; gap: .55rem; min-height: 2.75rem; margin-left: auto; padding: 0 .8rem; border: 1px solid rgba(238,241,235,.35); color: var(--paper); background: transparent; font-size: .78rem; font-weight: 700; letter-spacing: .03em; }
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { display: block; width: 1rem; height: 1.5px; background: currentColor; position: relative; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -5px; }
.menu-toggle-bars::after { top: 5px; }
.menu-open .menu-toggle-bars { background: transparent; }
.menu-open .menu-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

/* Hero trust facts */
.trust-list { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 2.2rem 0 0; padding: 0; list-style: none; color: var(--mist); font-size: .84rem; }
.trust-list li { display: flex; align-items: center; gap: .5rem; }
.trust-check { width: .95rem; height: .95rem; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(203,255,77,.16); }
.trust-check::after { content: ""; width: .3rem; height: .52rem; margin-top: -.12rem; border: solid var(--acid); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* Skill steps as real buttons */
.skill-step { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; text-align: left; font: inherit; }
.skill-step-num { padding-top: .2rem; color: var(--muted); font-size: .72rem; font-weight: 750; }
.skill-step-body { display: block; }
.skill-step-title { display: block; margin: 0 0 .25rem; font-size: 1.12rem; font-weight: 500; letter-spacing: -.025em; }
.skill-step-text { display: block; max-height: 0; overflow: hidden; color: var(--mist); font-size: .9rem; line-height: 1.55; opacity: 0; transition: max-height .3s ease, opacity .3s ease; }
.skill-step.is-selected .skill-step-text { max-height: 6rem; opacity: 1; }
.skill-step:hover .skill-step-title { color: var(--acid); }

/* Readability: lift the smallest body copy */
.contrast-card li { font-size: .92rem; }
.contrast-card p { font-size: .88rem; }
.review-list-item p { font-size: .92rem; }
.skills-callout p { font-size: .95rem; }
.skills-callout a { font-size: .85rem; }
.scene-caption { font-size: .8rem; }
.open-source-links a { font-size: .88rem; }
.statement-lead, .open-source-copy > p, .governance-copy > p:last-child { max-width: 40rem; }

/* Text links */
.text-link { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; padding-bottom: .2rem; border-bottom: 1px solid currentColor; font-size: .9rem; font-weight: 700; }
.text-link-light { color: var(--acid); }

/* Security */
.security-section { padding: 7rem clamp(1.25rem, 10vw, 10rem); }
.security-heading { display: grid; grid-template-columns: 18% 1fr; gap: 2rem; margin-bottom: 3.5rem; }
.security-heading h2 { max-width: 46rem; margin-bottom: 1.4rem; font-size: clamp(2.6rem, 4.8vw, 5rem); }
.security-heading p:not(.eyebrow) { max-width: 38rem; margin: 0; color: var(--mist); font-size: 1.1rem; line-height: 1.6; }
.security-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 2.5rem; background: var(--line); border: 1px solid var(--line); }
.security-card { display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem; background: var(--ink-soft); }
.security-card svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--acid); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.security-card h3 { margin: .6rem 0 0; font-size: 1.15rem; font-weight: 550; letter-spacing: -.02em; }
.security-card p { margin: 0; color: var(--mist); font-size: .92rem; line-height: 1.6; }

/* Engagement */
.engagement-section { padding: 7rem clamp(1.25rem, 10vw, 10rem); background: var(--paper); color: var(--ink); }
.engagement-heading { max-width: 52rem; margin-bottom: 3.5rem; }
.engagement-heading .eyebrow { color: #5e7072; }
.engagement-heading h2 { margin: 0; font-size: clamp(2.6rem, 4.8vw, 5rem); }
.engagement-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.engagement-steps li { display: flex; flex-direction: column; gap: .7rem; padding-top: 1.2rem; border-top: 2px solid var(--ink); }
.engagement-num { color: #4a6a1c; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.engagement-steps h3 { margin: 0; font-size: 1.25rem; font-weight: 550; letter-spacing: -.025em; }
.engagement-steps p { margin: 0; color: #4a5e61; font-size: .95rem; line-height: 1.6; }

/* Who is behind (open-source aside) */
.venture-note dl { margin: .6rem 0 1.2rem; }
.venture-note dl div { padding: .6rem 0; border-bottom: 1px solid #b4c0b8; }
.venture-note dt { color: #5e7072; font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.venture-note dd { margin: .15rem 0 0; font-size: .98rem; font-weight: 550; letter-spacing: -.02em; }
.venture-more { font-size: .85rem; font-weight: 750; }

/* FAQ */
.faq-section { display: grid; grid-template-columns: minmax(16rem, .7fr) 1.3fr; gap: clamp(2rem, 7vw, 7rem); padding: 7rem clamp(1.25rem, 10vw, 10rem); }
.faq-heading h2 { margin: 0; font-size: clamp(2.6rem, 4.8vw, 5rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.3rem 0; cursor: pointer; list-style: none; font-size: 1.12rem; font-weight: 500; letter-spacing: -.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; color: var(--acid); font-size: 1.5rem; font-weight: 300; line-height: 1; transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--acid); }
.faq-list details p { max-width: 44rem; margin: 0 0 1.5rem; color: var(--mist); font-size: .98rem; line-height: 1.65; }
.faq-list details a { color: var(--acid); border-bottom: 1px solid currentColor; }

/* Contact */
.contact-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 1.3rem; }
.contact-actions .contact-email { margin-top: 0; }
.form-fallback { margin-top: 1.4rem; padding: 1rem 1.1rem; border: 1px solid rgba(203,255,77,.45); }
.form-fallback p { margin: 0 0 .8rem; color: var(--paper); font-size: .9rem; }
.form-fallback a { color: var(--acid); border-bottom: 1px solid currentColor; }
.direct-email a + a, .direct-email a { margin-left: .1rem; }
.contact-form label { font-size: .78rem; }

/* Footer */
.site-footer { padding: 3.5rem clamp(1.25rem, 4vw, 4.5rem) 1.6rem; border-top: 1px solid var(--line); color: var(--mist); font-size: .85rem; }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-brand p { max-width: 20rem; margin: 1rem 0; line-height: 1.55; }
.footer-email { color: var(--acid); border-bottom: 1px solid currentColor; font-weight: 600; }
.footer-col { display: flex; flex-direction: column; gap: .6rem; }
.footer-col h2 { margin: 0 0 .4rem; color: var(--paper); font-family: var(--sans); font-size: .7rem; font-weight: 750; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.footer-col a { width: fit-content; transition: color .2s; }
.footer-col a:hover { color: var(--acid); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.footer-legal p { margin: 0; }
.footer-legal a { color: var(--mist); border-bottom: 1px solid rgba(238,241,235,.4); }

/* Legal & content pages */
.legal-content h1 { margin-bottom: 3rem; font-size: clamp(3rem, 6vw, 6rem); }
.legal-copy ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.legal-copy li { margin-bottom: .55rem; }
.legal-copy li::marker { color: var(--acid); }
.legal-copy address { font-style: normal; line-height: 1.8; }
.legal-copy .entity-list { margin: 0; border-top: 1px solid var(--line); }
.legal-copy .entity-list div { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.legal-copy .entity-list dt { color: var(--paper); font-weight: 650; }
.legal-copy .entity-list dd { margin: 0; }
.legal-updated { margin-top: 3rem; color: var(--muted); font-size: .85rem; }

@media (max-width: 1100px) {
  .menu-toggle { display: inline-flex; }
  .site-header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: .5rem clamp(1.25rem, 4vw, 4.5rem) 1.2rem; background: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 1.5rem 2.5rem rgba(0,0,0,.35); }
  .menu-open .site-header nav { display: flex; }
  .site-header nav a { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--paper); }
  .site-header .header-contact { margin-left: .75rem; }
  .security-heading { grid-template-columns: 1fr; gap: 1rem; }
  .security-grid, .engagement-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-section { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-header .header-contact { display: none; }
  .trust-list { flex-direction: column; }
  .security-section, .engagement-section, .faq-section { padding-top: 5rem; padding-bottom: 5rem; }
  .security-grid, .engagement-steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .legal-copy .entity-list div { grid-template-columns: 1fr; gap: .3rem; }
}
.skill-step > .skill-step-body { padding-top: 0; color: inherit; font-size: inherit; }
.open-source-copy > .eyebrow { font-size: .68rem; max-width: none; }

/* Email address shown as an image (outlined glyphs) so it is not harvested from the source */
.email-img { display: inline-block; height: 1.36em; aspect-ratio: 8.0348; vertical-align: -.293em; }
.email-img svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.contact-email .email-img, .footer-email .email-img { height: 1.25em; vertical-align: -.27em; }

/* Hero key facts: one per line */
.trust-list { flex-direction: column; align-items: flex-start; }

/* Story titles: wide enough to stay on at most two lines */
.scene-intro h2, .scene-intro-wide h2 { max-width: none; font-size: clamp(1.6rem, 2.3vw, 2.3rem); text-wrap: balance; }

/* Section titles: use the available width, at most two lines */
.security-heading h2, .engagement-heading h2, .open-source-copy h2, .governance-copy h2, .contact-section h2, .faq-heading h2, .review-intro h2, .skills-heading h2, .statement-wrap h2 { max-width: none; text-wrap: balance; }

/* Desktop: let the long section titles span the row so they stay on two lines */
@media (min-width: 1101px) {
  .governance-section { grid-template-columns: 1fr minmax(21rem, .8fr); grid-template-rows: auto auto 1fr; row-gap: 0; }
  .governance-copy { display: contents; }
  .governance-copy .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .governance-copy h2 { grid-column: 1 / -1; grid-row: 2; }
  .governance-copy > p:last-child { grid-column: 1; align-self: start; }
  .governance-board { grid-column: 2; grid-row: 3; }
}

/* Contact form: dark dropdown list so options are readable */
.contact-form select { color-scheme: dark; background-color: #0c1d25; }
.contact-form option { color: var(--paper); background: #0c1d25; }

/* Story scene 2: a Skill passes its checks, one by one, then is validated */
.skill-card { width: 23rem; position: absolute; right: 7%; bottom: 6.2rem; padding: 1.1rem 1.1rem 1rem; background: #f9fbf6; box-shadow: 0 1.2rem 2.4rem rgba(7,21,29,.12); }
.skill-card-head { display: flex; align-items: center; gap: .7rem; padding-bottom: .9rem; border-bottom: 1px solid #dfe5de; }
.skill-card-head .mini-icon { width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--ink); color: var(--acid); border-radius: 50%; }
.skill-card-head strong { display: block; font-size: 1rem; font-weight: 550; letter-spacing: -.03em; }
.skill-card-head small { color: #6c7b7c; font-size: .62rem; }
.skill-check { display: grid; grid-template-columns: 1.2rem 1fr auto; align-items: center; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid #e6eae4; font-size: .72rem; }
.skill-check i { width: 1.05rem; height: 1.05rem; display: grid; place-items: center; border-radius: 50%; color: #304d20; background: #d9f8a0; font-size: .58rem; font-style: normal; }
.skill-check em { color: #607071; font-size: .62rem; font-style: normal; }
.skill-card-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.skill-meter { flex: 1; height: 3px; background: #dce3dc; overflow: hidden; }
.skill-meter span { display: block; width: 100%; height: 100%; background: var(--ink); transform-origin: left; }
.skill-seal { padding: .35rem .65rem; border: 1.5px solid #304d20; color: #304d20; background: #d9f8a0; font-size: .64rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.story-scene.is-active .skill-check i { animation: check-in .45s cubic-bezier(.34,1.56,.64,1) both; }
.story-scene.is-active .skill-check em { animation: fade-in .4s ease both; }
.story-scene.is-active .skill-check:nth-of-type(2) i, .story-scene.is-active .skill-check:nth-of-type(2) em { animation-delay: .5s; }
.story-scene.is-active .skill-check:nth-of-type(3) i, .story-scene.is-active .skill-check:nth-of-type(3) em { animation-delay: 1.1s; }
.story-scene.is-active .skill-check:nth-of-type(4) i, .story-scene.is-active .skill-check:nth-of-type(4) em { animation-delay: 1.7s; }
.story-scene.is-active .skill-check:nth-of-type(5) i, .story-scene.is-active .skill-check:nth-of-type(5) em { animation-delay: 2.3s; }
.story-scene.is-active .skill-meter span { animation: meter-fill 2.6s ease-out .3s both; }
.story-scene.is-active .skill-seal { animation: seal-in .5s cubic-bezier(.34,1.56,.64,1) 3s both; }
@keyframes check-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes meter-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes seal-in { from { opacity: 0; transform: scale(1.4) rotate(-6deg); } to { opacity: 1; transform: scale(1) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .story-scene.is-active .skill-check i, .story-scene.is-active .skill-check em, .story-scene.is-active .skill-meter span, .story-scene.is-active .skill-seal { animation: none; } }
@media (max-width: 640px) { .skill-card { right: 50%; bottom: 4.8rem; width: 22rem; transform: translateX(50%) scale(.9); transform-origin: bottom center; } }
.skills-callout p { max-width: none; }
.skills-heading { display: block; } .skills-heading > p { max-width: 40rem; margin-top: 1.5rem; }

/* Titles sized from the width they live in, so they stay on two lines at every screen size */
main > section, .hero-copy { container-type: inline-size; }
h1 { font-size: clamp(2.4rem, 15cqi, 7.4rem); }
.statement-wrap h2, .contrast-heading h2, .skills-heading h2, .review-intro h2, .governance-copy h2, .open-source-copy h2, .contact-section h2, .security-heading h2, .engagement-heading h2 { max-width: none; font-size: clamp(1.7rem, 6.2cqi, 5.6rem); }
@media (max-width: 1100px) { .review-intro, .review-list { grid-column: 1 / -1; } }
.engagement-heading { max-width: none; }

/* ---------- Alignment pass: one page gutter, one left edge per section ---------- */
:root { --gutter: max(clamp(1.25rem, 5vw, 5rem), calc((100% - 84rem) / 2)); --card-pad: 1.6rem; }
.site-header, .site-footer, main > section[class] { padding-left: var(--gutter); padding-right: var(--gutter); }
.hero { max-width: none; margin: 0; }

/* Section numbers sit above the eyebrow instead of in an indent column */
.section-count { margin-bottom: 1.1rem; }
.statement-section, .security-heading { grid-template-columns: 1fr; gap: 0; }
.review-section { grid-template-columns: 1fr; row-gap: 0; }
.review-section .section-count, .review-intro, .review-list { grid-column: 1; }
.review-intro { margin-bottom: 3rem; }

/* Open source: the </> mark becomes a small label on the eyebrow row */
.open-source-section { grid-template-columns: 1fr minmax(16rem, .5fr); column-gap: 4rem; row-gap: 0; }
.open-source-mark { flex-direction: row; align-items: baseline; gap: .6rem; grid-column: 1 / -1; margin-bottom: 1.1rem; }
.open-source-mark span { font-size: 1.1rem; }
.open-source-copy { display: contents; }
.open-source-copy .eyebrow, .open-source-copy h2 { grid-column: 1 / -1; }
.open-source-copy > p, .open-source-links { grid-column: 1; }
.open-source-links { align-self: start; align-items: flex-start; }
.venture-note { grid-column: 2; grid-row: 4 / span 2; align-self: start; }
@media (max-width: 900px) {
  .open-source-section { grid-template-columns: 1fr; }
  .venture-note { grid-column: 1; grid-row: auto; margin-top: 2.5rem; }
}

/* Cards and lists use the full content width */
.contrast-cards { max-width: none; }

/* Story card: scene content shares the inset of the card chrome */
.story-topbar, .story-controls { padding-left: var(--card-pad); padding-right: var(--card-pad); }
.story-scene { padding-left: var(--card-pad); padding-right: var(--card-pad); }
.scene-number { right: var(--card-pad); }
@media (max-width: 640px) { :root { --card-pad: 1.2rem; } }

/* AI Review Skill builder: no sideways jump on the selected row; code aligned with its header */
.skill-step.is-selected { padding-left: 0; }
.skill-step > .skill-step-body { font-weight: 400; }
.skill-step-title { font-weight: 600; }
.preview-code { padding-left: 0; padding-right: 0; }

/* Contrast: heavier titles */
h1, h2 { font-weight: 500; }
.scene-intro h2 { font-weight: 600; letter-spacing: -.04em; }

/* Contact: paragraph uses the full width; the button is the single action */
.contact-section > p:not(.eyebrow) { max-width: none; }
@media (max-width: 1100px) { .site-header nav { padding-left: var(--gutter); padding-right: var(--gutter); } }

/* Header: nav and CTA at the same size as the brand name */
@media (min-width: 1101px) {
  .site-header nav a, .site-header .header-contact { font-size: .9rem; }
  .site-header nav { gap: clamp(1.1rem, 1.6vw, 1.8rem); }
}
@media (min-width: 901px) {
  .open-source-section { grid-template-rows: auto auto auto auto auto 1fr; }
  .venture-note { grid-row: 4 / 7; }
}

/* Light sections: eyebrow rule in a darker green so it stays visible */
.contrast-section .eyebrow span, .review-section .eyebrow span, .governance-section .eyebrow span, .engagement-section .eyebrow span, .open-source-section .eyebrow span { background: #7d9a35; }

/* Contact: evidence converging on a decision */
.decision-art { display: none; }
@media (min-width: 901px) {
  .contact-section { display: grid; grid-template-columns: 1fr auto; column-gap: 3rem; align-content: center; }
  .contact-section > * { grid-column: 1; }
  .contact-section > p:not(.eyebrow), .contact-actions { grid-column: 1 / -1; }
  .decision-art { display: block; grid-column: 2; grid-row: 1 / 3; align-self: center; width: clamp(13rem, 19vw, 18rem); height: auto; overflow: visible; }
}
.da-ring { fill: none; stroke: rgba(238,241,235,.14); stroke-width: 1; }
.da-ring-dashed { stroke: rgba(203,255,77,.45); stroke-dasharray: 2 7; transform-origin: 160px 160px; animation: spin-slow 70s linear infinite reverse; }
.da-orbit { transform-origin: 160px 160px; animation: spin-slow 140s linear infinite; }
.da-lines line { stroke: rgba(203,255,77,.32); stroke-width: 1; stroke-dasharray: 3 5; animation: da-flow 2.4s linear infinite; }
.da-docs rect { fill: #eef1eb; opacity: .85; }
.da-core { fill: var(--acid); }
.da-check { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.da-pulse { fill: none; stroke: var(--acid); stroke-width: 1.2; transform-origin: 160px 160px; animation: da-pulse 3.2s ease-out infinite; }
@keyframes da-flow { to { stroke-dashoffset: -16; } }
@keyframes da-pulse { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) { .da-ring-dashed, .da-orbit, .da-lines line, .da-pulse { animation: none; } }
@media (min-width: 901px) { .contact-section > p:not(.eyebrow) { grid-column: 1; } }

/* Contrast heading: the quiet setup first, the claim in the large title */
.contrast-heading { max-width: none; }
.contrast-heading > .contrast-kicker { max-width: none; margin: 0 0 .9rem; color: #536567; font-family: var(--serif); font-size: clamp(1.75rem, 3.3vw, 3.2rem); letter-spacing: -.04em; line-height: 1; }
.contrast-heading h2 { margin-bottom: 0; }

/* Statement: wide enough to read in two lines */
.statement-lead { max-width: none; }

/* Descriptive text: justified when it runs over several lines */
.hero-lead, .statement-lead, .skills-heading > p, .contrast-card p, .skills-callout p, .skill-step-text, .governance-copy > p, .security-heading p, .security-card p, .engagement-steps p, .open-source-copy > p, .faq-list p, .contact-section > p:not(.eyebrow), .legal-copy p, .legal-lead, .dialog-lead {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}

/* ---------- Theme toggle ---------- */
.theme-toggle { width: 2.6rem; height: 2.6rem; display: inline-grid; place-items: center; flex: 0 0 auto; margin-right: .9rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--mist); background: transparent; transition: color .2s ease, border-color .2s ease; }
.theme-toggle:hover { color: var(--acid); border-color: currentColor; }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }
@media (max-width: 1100px) { .theme-toggle { order: 2; margin: 0 0 0 .6rem; } .menu-toggle { order: 1; } .site-header .header-contact { order: 3; } }

/* ---------- Light theme ----------
   Page-level colours are re-pointed; the story card and the sections that were
   already light keep the original palette. */
[data-theme="light"] {
  color-scheme: light;
  --paper: #0b1a22;
  --mist: #3d5054;
  --muted: #667777;
  --line: rgba(7, 21, 29, .14);
  --acid: #4a7300;
  --ink-soft: #e9ede4;
}
[data-theme="light"] :is(.story-shell, .skill-preview, .contrast-section, .review-section, .governance-section, .open-source-section, .engagement-section) {
  --paper: #eef1eb; --mist: #b6c2bd; --muted: #7c8d8c; --line: rgba(238, 241, 235, .17); --acid: #cbff4d; --ink-soft: #10232d;
}
[data-theme="light"] body { background: #f7f8f3; }
[data-theme="light"] .story-shell { box-shadow: 1.2rem 1.2rem 0 rgba(74, 115, 0, .12); }

/* Fills stay lime; only lime used as text or strokes becomes olive */
[data-theme="light"] :is(.brand-mark, .button-primary, .skip-link, .pulse) { background: #cbff4d; }
[data-theme="light"] .da-core { fill: #cbff4d; }
[data-theme="light"] .header-contact { color: #eef1eb; background: var(--ink); }
[data-theme="light"] .header-contact:hover, [data-theme="light"] .dialog-close:hover { color: var(--ink); background: #cbff4d; border-color: #cbff4d; }
[data-theme="light"] .uses-cloud li:nth-child(3n+1):hover { background: #cbff4d; border-color: #cbff4d; }
[data-theme="light"] .uses-cloud li:nth-child(3n+2):hover { color: #eef1eb; }

/* Borders and washes that were light-on-dark */
[data-theme="light"] :is(.button-quiet, .dialog-close, .menu-toggle) { border-color: rgba(7, 21, 29, .3); }
[data-theme="light"] .uses-cloud li { border-color: rgba(7, 21, 29, .22); }
[data-theme="light"] .uses-cloud li:nth-child(3n) { border-color: rgba(74, 115, 0, .45); }
[data-theme="light"] .footer-legal a { border-bottom-color: rgba(7, 21, 29, .35); }
[data-theme="light"] .trust-check { background: rgba(74, 115, 0, .14); }
[data-theme="light"] .skills-callout { background: #fff; border-color: rgba(74, 115, 0, .45); }
[data-theme="light"] .security-card { background: #f8faf5; }
[data-theme="light"] .site-header nav { background: #f7f8f3; }
[data-theme="light"] .form-fallback { border-color: rgba(74, 115, 0, .45); }
[data-theme="light"] .contact-dialog { background: #f7f8f3; }
[data-theme="light"] .contact-dialog::backdrop { background: rgba(7, 21, 29, .55); }
[data-theme="light"] :is(.contact-form input, .contact-form select, .contact-form textarea) { border-color: rgba(7, 21, 29, .25); background-color: #fff; }
[data-theme="light"] .contact-form input:focus, [data-theme="light"] .contact-form select:focus, [data-theme="light"] .contact-form textarea:focus { box-shadow: 0 0 0 2px rgba(74, 115, 0, .18); }
[data-theme="light"] .contact-form select { color-scheme: light; }
[data-theme="light"] .contact-form option { color: var(--ink); background: #fff; }

/* Decision artwork on a light page */
[data-theme="light"] .da-ring { stroke: rgba(7, 21, 29, .16); }
[data-theme="light"] .da-ring-dashed { stroke: rgba(74, 115, 0, .55); }
[data-theme="light"] .da-lines line { stroke: rgba(74, 115, 0, .45); }
[data-theme="light"] .da-docs rect { fill: #0b1a22; opacity: .7; }

/* Legal / about pages: aligned to the page gutter, text uses the available width */
.legal-content { width: auto; margin: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
.legal-content h1 { max-width: none; font-size: clamp(2.4rem, 5.6vw, 5.6rem); }
.legal-copy { max-width: 76rem; }
.legal-copy .entity-list div { grid-template-columns: 16rem 1fr; }
@media (max-width: 640px) { .legal-copy .entity-list div { grid-template-columns: 1fr; } }

/* ---------- Language selector ---------- */
.lang-select { height: 2.6rem; flex: 0 0 auto; margin-right: .5rem; padding: 0 1.7rem 0 .8rem; border: 1px solid var(--line); border-radius: 1.3rem; color: var(--mist); background: transparent; font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - .95rem) 1.15rem, calc(100% - .7rem) 1.15rem; background-size: .25rem .25rem; background-repeat: no-repeat; }
.lang-select:hover, .lang-select:focus-visible { color: var(--acid); border-color: currentColor; }
.lang-select option { color: var(--ink); background: #fff; }
[data-theme="dark"] .lang-select { color-scheme: dark; }
[data-theme="dark"] .lang-select option { color: #eef1eb; background: #0c1d25; }
@media (max-width: 1100px) { .lang-select { order: 2; margin: 0 0 0 .6rem; } .theme-toggle { order: 2; } }